body {
    display: flex;
    height: 100vh;
}

.mdc-drawer-app-content {
    flex: auto;
    overflow: auto;
    position: relative;
}

.main-content {
    overflow: auto;
    height: 100%;
    margin-bottom: -40px;
}

.app-bar {
    position: absolute;
}

.mdc-top-app-bar {
    z-index: 7;
}

/*
    Theme:
    - Main: #c62828
    - Dark: #8e0000
    -Light: #ff5f52
    - Text: #ffffff
*/

:root {
    --mdc-theme-primary: #c62828 !important;
    --mdc-theme-primary-dark: #8e0000 !important;
    --mdc-theme-secondary: #c62828 !important;
    --mdc-theme-background: #ffffff !important;
    --mdc-theme-surface: #ffffff !important;
    --mdc-theme-on-primary: #ffffff !important;
    --mdc-theme-on-secondary: #ffffff !important;
    --mdc-theme-on-surface: #000000 !important;
    --mdc-theme-text-primary-on-background: rgba(0,0,0,.87);
    --mdc-theme-text-secondary-on-background: rgba(0,0,0,.54);
    --mdc-theme-text-hint-on-background: rgba(0,0,0,.38);
    --mdc-theme-text-disabled-on-background: rgba(0,0,0,.38);
    --mdc-theme-text-icon-on-background: rgba(0,0,0,.38);
    --mdc-theme-text-primary-on-light: rgba(0,0,0,.87);
    --mdc-theme-text-secondary-on-light: rgba(0,0,0,.54);
    --mdc-theme-text-hint-on-light: rgba(0,0,0,.38);
    --mdc-theme-text-disabled-on-light: rgba(0,0,0,.38);
    --mdc-theme-text-icon-on-light: rgba(0,0,0,.38);
    --mdc-theme-text-primary-on-dark: #fff;
    --mdc-theme-text-secondary-on-dark: hsla(0,0%,100%,.7);
    --mdc-theme-text-hint-on-dark: hsla(0,0%,100%,.5);
    --mdc-theme-text-disabled-on-dark: hsla(0,0%,100%,.5);
    --mdc-theme-text-icon-on-dark: hsla(0,0%,100%,.5);
    --theme-header-dark: #343a40 !important;
    --theme-table-hover-color: rgba(0, 0, 0, .06);
    --theme-box-shadow-primary-dark: rgba(142, 0, 0, .25);
}

.mdc-drawer__content {
    color: var(--mdc-theme-on-primary);
    background-color: var(--theme-header-dark);
}

.text-on-primary {
    color: var(--mdc-theme-on-primary) !important;
}

.icon-on-primary {
    color: var(--mdc-theme-on-primary) !important;
}

.mdc-select--focused:not(.mdc-select--disabled) .mdc-floating-label {
    color: #000000 !important;
}

.mdc-select--focused .mdc-select__dropdown-icon {
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E") no-repeat center;
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #000000 !important;
}

.mdc-text-field--fullwidth:not(.mdc-text-field--textarea) .mdc-text-field__input {
    padding-top: 20px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 6px;
}

.mdc-button--raised:not(:disabled) {
    color: #fff !important;
}

.mdc-text-field--with-leading-icon .mdc-text-field__input, .mdc-text-field--fullwidth:not(.mdc-text-field--textarea).mdc-text-field--with-leading-icon .mdc-text-field__input {
    padding-left: 48px;
    padding-right: 16px;
}

.mdc-text-field--with-trailing-icon .mdc-text-field__input, .mdc-text-field--fullwidth:not(.mdc-text-field--textarea).mdc-text-field--with-trailing-icon .mdc-text-field__input {
    padding-left: 16px;
    padding-right: 48px;
}

.content {
    display: none;
}

.content--active {
    display: block;
}

label{
    margin-bottom: 0 !important;
}

::selection {
    color: var(--mdc-theme-on-primary);
    background: var(--mdc-theme-on-surface);
}

:focus {
    outline-color: var(--mdc-theme-primary);
}

.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(rgb(var(--color)), 0.2);
}

.form-control:focus {
    border-color: var(--mdc-theme-primary);
    border-radius: 4px;
    box-shadow: 0 0 0.6rem 0.2rem var(--theme-box-shadow-primary-dark);
}

.custom-select:focus {
    border-color: var(--mdc-theme-primary);
    border-radius: 4px;
    box-shadow: 0 0 0.6rem 0.2rem var(--theme-box-shadow-primary-dark);
}

.page-link {
    color: var(--mdc-theme-on-surface);
    background-color: var(--mdc-theme-surface);
    border-radius: 4px;
    margin: 4px;
}

.page-link:hover {
    color: var(--mdc-theme-primary);
    border-width: 1px;
    /*border-color: var(--mdc-theme-primary);*/
    border-radius: 4px;
}

.page-link:focus {
    color: var(--mdc-theme-primary);
    border-width: 1px;
    border-color: var(--mdc-theme-primary);
    border-radius: 4px;
    box-shadow: 0 0 0.6rem 0.2rem var(--theme-box-shadow-primary-dark);
}

.page-item.active .page-link {
    color: var(--mdc-theme-on-primary);
    background-color: var(--mdc-theme-primary);
    border-color: var(--mdc-theme-primary);
    border-radius: 4px;
    box-shadow: none;
}

a {
    color: inherit;
    text-decoration: none !important;
}

a:hover {
    color: inherit;
    text-decoration: none !important;
}

.mdc-card--header {
    padding: 16px;
    border-radius: 4px;
    color: var(--mdc-theme-on-primary);
    background-color: var(--mdc-theme-primary);
}

.mdc-card--header-dark {
    padding: 16px;
    border-radius: 4px;
    color: var(--mdc-theme-on-primary);
    background-color: var(--theme-header-dark);
}

.mdc-card-group {
    padding: 16px;
}

.thead-primary {
    color: var(--mdc-theme-on-primary);
    background: var(--mdc-theme-primary);
    border: hidden;
}

.table-hover tbody tr:hover td {
    background: var(--theme-table-hover-color);
}

.table-th-start {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.table-th-end {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.table-td-fill {
    width: 99%;
}

.mdc-fab--extended {
    border-radius: 4px;
}

.input-hidden {
    visibility: hidden;
    width: 0;
    height: 0;
}

/*
.mdc-form-field > label {
    margin-bottom: 0;
    font-size: 1rem;
    padding-top: 4px;
    padding-left: 0;
}
*/

.nowrap {
    white-space: nowrap !important;
}

.text-field-container {
    padding-top: 11px;
}

.checkbox-form {
    padding-top: 24px;
    padding-bottom: 22px;
}

.list-checkbox-form {
    padding-top: 16px;
    padding-bottom: 22px;
}

.divider {
    height: 0;
    margin: 0;
    margin-top: 8px;
    border: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: rgba(0, 0, 0, .25);
}

.empty-form-item {
    padding-bottom: 86px;
}

.th-header-search {
    background-color: var(--mdc-theme-background);
    padding: 4px !important;
    padding-left: 6px !important;
}

.th-header-search-input {
    min-width: 80px;
    width: 100%;
    padding-left: 4px !important;
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background-color: var(--mdc-theme-primary-dark) !important;
}

.dtp div.dtp-date, .dtp div.dtp-time {
    background-color: var(--mdc-theme-primary) !important;
}

.dtp div.dtp-actual-year {
    color: var(--mdc-theme-on-primary) !important;
}

.dtp .p10 > a {
    color: var(--mdc-theme-on-primary) !important;
}

.dtp table.dtp-picker-days tr > td > a.selected {
    background-color: var(--mdc-theme-primary) !important;
}

.year-picker-item:hover {
    color: var(--mdc-theme-primary) !important;
}

.year-picker-item.active {
    color: var(--mdc-theme-primary) !important;
}

.svg-clock [fill='#8BC34A'] {
    fill: var(--mdc-theme-primary) !important;
}

.svg-clock [stroke='#8BC34A'] {
    stroke: var(--mdc-theme-primary) !important;
}

.list-scrollbar {
    overflow: hidden;
    overflow-y: scroll;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--mdc-theme-text-icon-on-background);
}

/*48px height list item*/
.list-scrollbar-6 {
    height: 288px;
}

.list-scrollbar-10 {
    height: 480px;
}

.list-scrollbar-20 {
    height: 960px;
}

/*86px height list form item*/
.list-scrollbar-form-4 {
    height: 344px;
}

.list-scrollbar-form-6 {
    height: 516px;
}

.list-scrollbar-form-10 {
    height: 860px;
}