html,
body {
    height: 100%;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
}


/* Text Classes */

.heading {
    font-size: 24px;
    font-weight: 500;
    color: #333333;
}

.sub-heading {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
}

.text {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
}

.desc-text {
    font-size: 14px;
    font-weight: 500;
    color: #666666;
}

.info-text {
    font-size: 12px;
    font-weight: 500;
    color: #666666;
}


/* Table */

table {
    border-collapse: collapse;
}

.card {
    border-radius: 8px !important;
}

.table-margin {
    margin: 8px 8px 54px 8px;
}

.table-bold-text {
    color: #DEC269 !important;
    font-weight: bold;
}

.table-details {
    color: #DEC269 !important;
    font-style: italic;
    cursor: pointer;
}


/* Universal Component Classes */

.mat-header-row {
    height: 36px !important;
    background-color: #ddc269 !important;
    margin-bottom: 50px !important;
    padding-bottom: 50px !important;
}

.mat-header-cell {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333333 !important;
}

.mat-row {
    height: 36px !important;
}

.mat-row-cell {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #666666 !important;
}

td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type, th.mat-header-cell:first-of-type {
        padding-left: 24px;
}
.mat-table thead, .mat-table tbody, .mat-table tfoot, mat-header-row, mat-row, mat-footer-row, [mat-header-row], [mat-row], [mat-footer-row], .mat-table-sticky {
    background: inherit;
}

th {
    border-bottom: 0 solid !important;
}
td.mat-cell, td.mat-footer-cell, th.mat-header-cell {
    padding: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

constructed stylesheet
.mat-row {
    height: 36px !important;
}
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: #c58b10 !important;
}
mat-row, mat-header-row, mat-footer-row, th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
    border-bottom-color: rgba(0, 0, 0, 0.12);
}
.mat-cell, .mat-footer-cell {
    font-size: 14px;
}
.mat-cell, .mat-footer-cell {
    color: rgba(0, 0, 0, 0.87);
}

table.mat-table {
    border-spacing: 0;
}

.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #066636 !important;
}

.mat-focused .mat-form-field-label {
    color: #c58b10 !important;
}

.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .65em 0 !important;
    /* Original top/bottom value was 1em. */
}

.mat-form-field-appearance-outline .mat-form-field-outline {
    position: absolute;
    top: 0.5em !important;
}

.mat-input-element {
    position: relative;
    top: -1.2em !important;
    /* Adjust accordingly to keep placeholder/input text vertically centered. */
}

.mat-form-field-label-wrapper {
    top: -1.2em !important;
    /* Adjust accordingly to keep <mat-label> text vertically centered. */
}


/* Buttons */

.back-button {
    border-radius: 8px;
    border: solid 2px #066636;
    background-color: #fafafa;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #066636;
}

.submit-button {
    border-radius: 8px;
    background-color: #066636;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
}

.close-button {
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
}
.add-process-button {
    border-radius: 8px;
    background-color: #066636;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
}
/* SnackBar */

.my-snack-bar,
.my-snack-bar button {
    background: #066636 !important;
    color: white !important;
}


/* checkbox */

.mat-checkbox .mat-checkbox-frame {
    border-color: #DDC269;
}

.mat-checkbox-checked .mat-checkbox-background {
    background-color: #066636 !important;
}

html .page-wrapper .page-content {
    padding: 15px;
 }

.page-content {
    padding: 15px;
}

* {
    outline: none;
    box-sizing: border-box;
}

.mat-drawer-container {
    background-color: #fafafa;
    color: rgba(0, 0, 0, 0.87);
}

.main-container {
    background-color: #efefef;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

mat-toolbar{
    border-bottom: 3px solid #016533;
    background-color: #faf9ec;
}
.mat-toolbar-row, .mat-toolbar-single-row {
    height: 64px;
}
.mat-toolbar-row, .mat-toolbar-single-row {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}
.topbar {
    position: relative;
    z-index: 2;
}
.p-1 {
    padding: .25rem !important;
}
mat-toolbar {
    box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5);
}
.mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6 {
    font: 500 20px/32px Poppins !important;
    margin: 0;
}
.example-spacer{
    -webkit-box-flex: 1;
    flex: 1 1 auto;
}
.mat-line {
    display: inherit;
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #016533;
}
a:hover, a:focus, a {
    text-decoration: none;
}
img {
    vertical-align: middle;
    border-style: none;
}
.UserImg {
    cursor: pointer !important;
    color: #026131;
}

.submit-button {
    border-radius: 8px;
    background-color: #066636;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
}