/*---------------------------------------------------------------------------------------
Override Material Design
---------------------------------------------------------------------------------------*/

:root {
    --mdc-theme-primary: #58708b;
    --mdc-theme-secondary: #26384c;
    --mdc-theme-background: #fafafa;
    --mdc-theme-surface: #fafafa;
    
    --c-grey: #b8b8b8;
    --c-black: #000;
    --c-yellow: #ffca00;
    --c-red: #ff5b5b;
    --c-green: #00bd00;
    --c-border: #e0e0e0;
    --c-primary-transparent: rgba(119, 135, 154, 0.7);
}


/*---------------------------------------------------------------------------------------
Font
---------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../font/material-icons.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}



/*---------------------------------------------------------------------------------------
General
---------------------------------------------------------------------------------------*/

html, body {
    background: var(--mdc-theme-background);
    font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
}

.mdc-layout-grid { max-width: 1200px; }

.flex { display: flex; }
.flex.inline { justify-content: space-between; align-items: center; }
.full-width { width: 100%; }
.flex-end { justify-content:flex-end; }
.hide { display: none !important; }
.invisible { opacity: 0 !important; }
.note { font-size: .8em; font-weight: 400; color: var(--c-grey);}

.back-wrapper {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

h1 {
    margin: 0px;
    margin-top: 24px;
}

/*---------------------------------------------------------------------------------------
Table View
---------------------------------------------------------------------------------------*/

.color-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0px 16px;
}

#list-table .mdc-data-table__table { white-space: normal; }
#list-table thead tr th.mdc-data-table__header-cell { background: #f1f1f1; }

#list-table thead tr th, .mdc-data-table__cell, .mdc-data-table__header-cell { 
    line-height: 2rem;
    padding: 12px; 
}

#list-table tbody tr:hover { cursor: pointer; }
#list-table tbody tr.hide { display: none; }

#list-table tbody tr[data-status="rejected"] .color-icon { background: var(--c-red); }
#list-table tbody tr[data-status="hold"] .color-icon { background: var(--c-grey) }
#list-table tbody tr[data-status="prevented"] .color-icon { background: var(--c-black); }
#list-table tbody tr[data-status="approved"] .color-icon { background: var(--c-green); }


#list-table .mdc-data-table__row {
    -webkit-transition: background-color 150ms ease-in;
    -ms-transition: background-color 150ms ease-in;
    transition: background-color 150ms ease-in;
}

#list-table .mdc-data-table__row.rejected {
    background-color: #ea9d9d;
}

.mdc-data-table__cell.date-created { 
    width: 16%;
    color: #9d9d9d;
    font-size: .8em;
}


.inline-btn { 
    float: right; 
    height: 32px;
}

/* material design override */
.mdc-button--outlined .mdc-button__ripple::before, .mdc-button--outlined .mdc-button__ripple::after {
    background-color: var(--c-red);
}   
.mdc-button--outlined:hover .mdc-button__ripple::before, .mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before {
    opacity: 0.2;
}
.mdc-dialog__title {
    text-align: center;
    padding: 0 24px 16px;
}

/*---------------------------------------------------------------------------------------
Table Filters
---------------------------------------------------------------------------------------*/

.mdc-checkbox+label:hover { cursor: pointer; }

/*---------------------------------------------------------------------------------------
Detail View
---------------------------------------------------------------------------------------*/

.mdc-card__content, .mdc-card__actions { padding: 16px; }

.mdc-card__title {
    border-bottom: 1px solid var(--c-border);
    padding: 0px 16px;
}

.mdc-card__media { 
    border-bottom: 1px solid var(--c-border);
    background-size: contain;
}

.mdc-card__form, .mdc-card__note {
    border: 1px solid var(--c-border);
    padding: 0px 16px 0px 16px;
    margin: 16px 16px 16px;
    border-radius: var(--mdc-shape-medium, 4px);
}

.mdc-card__note { margin: 16px 0px 16px 0px; }

.mdc-card__form .mdc-form-field { margin-left: 16px; }
.mdc-card__form .mdc-form-field:nth-child(1) { margin-left: 0px; }
.mdc-card__note { padding: 0px 16px; }

.mdc-radio+label:hover { cursor: pointer; }


/*---------------------------------------------------------------------------------------
Layout
---------------------------------------------------------------------------------------*/

@media (min-width: 840px) {
    @supports (display: grid) {
        .mdc-layout-grid__cell.full-width { grid-column-end: span 12; }
        .mdc-layout-grid__cell.half-width { grid-column-end: span 6; }
    }
}

@media (min-width: 600px) and (max-width: 839px) {
    @supports (display: grid) {
        .mdc-layout-grid__cell.full-width { grid-column-end: span 8; }
        .mdc-layout-grid__cell.half-width { grid-column-end: span 4; }
    }
}

@media (max-width: 599px) {
    @supports (display: grid) {
        .mdc-layout-grid__cell.full-width { grid-column-end: span 4; }
        .mdc-layout-grid__cell.half-width { grid-column-end: span 2; }
    }
    .flex:not(.inline) { flex-direction: column; }
    .mdc-card__form .mdc-form-field { margin-left: 0px; }
}


/*---------------------------------------------------------------------------------------
Form Style Override
---------------------------------------------------------------------------------------*/

/* Checkbox */

.mdc-checkbox[data-status="rejected"] .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, 
.mdc-checkbox[data-status="rejected"] .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background, 
.mdc-checkbox[data-status="rejected"] .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background {
    border-color: var(--c-red);
    background-color: var(--c-red);
}

.mdc-checkbox[data-status="rejected"] .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
    border-color: var(--c-red);
}


.mdc-checkbox[data-status="hold"] .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, 
.mdc-checkbox[data-status="hold"] .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background, 
.mdc-checkbox[data-status="hold"] .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background {
    border-color: var(--c-grey);
    background-color: var(--c-grey);
}

.mdc-checkbox[data-status="hold"] .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
    border-color: var(--c-grey);
}


.mdc-checkbox[data-status="prevented"] .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, 
.mdc-checkbox[data-status="prevented"] .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background, 
.mdc-checkbox[data-status="prevented"] .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background {
    border-color: var(--c-black);
    background-color: var(--c-black);
}

.mdc-checkbox[data-status="prevented"] .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
    border-color: var(--c-black);
}


.mdc-checkbox[data-status="approved"] .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, 
.mdc-checkbox[data-status="approved"] .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background, 
.mdc-checkbox[data-status="approved"] .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background {
    border-color: var(--c-green);
    background-color: var(--c-green);
}

.mdc-checkbox[data-status="approved"] .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
    border-color: var(--c-green);
}

/*Radio*/

.mdc-radio[data-status="rejected"] .mdc-radio__native-control:enabled:checked~.mdc-radio__background .mdc-radio__outer-circle, 
.mdc-radio[data-status="rejected"] .mdc-radio__native-control:enabled:indeterminate~.mdc-radio__background .mdc-radio__outer-circle, 
.mdc-radio[data-status="rejected"] .mdc-radio__native-control[data-indeterminate=true]:enabled~.mdc-radio__background .mdc-radio__outer-circle,
.mdc-radio[data-status="rejected"] .mdc-radio__native-control:enabled:checked~.mdc-radio__background .mdc-radio__inner-circle, 
.mdc-radio[data-status="rejected"] .mdc-radio__native-control:enabled:indeterminate~.mdc-radio__background .mdc-radio__inner-circle, 
.mdc-radio[data-status="rejected"] .mdc-radio__native-control[data-indeterminate=true]:enabled~.mdc-radio__background .mdc-radio__inner-circle {
    border-color: var(--c-red);
}


.mdc-radio[data-status="hold"] .mdc-radio__native-control:enabled:checked~.mdc-radio__background .mdc-radio__outer-circle, 
.mdc-radio[data-status="hold"] .mdc-radio__native-control:enabled:indeterminate~.mdc-radio__background .mdc-radio__outer-circle, 
.mdc-radio[data-status="hold"] .mdc-radio__native-control[data-indeterminate=true]:enabled~.mdc-radio__background .mdc-radio__outer-circle,
.mdc-radio[data-status="hold"] .mdc-radio__native-control:enabled:checked~.mdc-radio__background .mdc-radio__inner-circle, 
.mdc-radio[data-status="hold"] .mdc-radio__native-control:enabled:indeterminate~.mdc-radio__background .mdc-radio__inner-circle, 
.mdc-radio[data-status="hold"] .mdc-radio__native-control[data-indeterminate=true]:enabled~.mdc-radio__background .mdc-radio__inner-circle {
    border-color: var(--c-grey);
}


.mdc-radio[data-status="prevented"] .mdc-radio__native-control:enabled:checked~.mdc-radio__background .mdc-radio__outer-circle, 
.mdc-radio[data-status="prevented"] .mdc-radio__native-control:enabled:indeterminate~.mdc-radio__background .mdc-radio__outer-circle, 
.mdc-radio[data-status="prevented"] .mdc-radio__native-control[data-indeterminate=true]:enabled~.mdc-radio__background .mdc-radio__outer-circle,
.mdc-radio[data-status="prevented"] .mdc-radio__native-control:enabled:checked~.mdc-radio__background .mdc-radio__inner-circle, 
.mdc-radio[data-status="prevented"] .mdc-radio__native-control:enabled:indeterminate~.mdc-radio__background .mdc-radio__inner-circle, 
.mdc-radio[data-status="prevented"] .mdc-radio__native-control[data-indeterminate=true]:enabled~.mdc-radio__background .mdc-radio__inner-circle {
    border-color: var(--c-black);
}

.mdc-radio[data-status="approved"] .mdc-radio__native-control:enabled:checked~.mdc-radio__background .mdc-radio__outer-circle, 
.mdc-radio[data-status="approved"] .mdc-radio__native-control:enabled:indeterminate~.mdc-radio__background .mdc-radio__outer-circle, 
.mdc-radio[data-status="approved"] .mdc-radio__native-control[data-indeterminate=true]:enabled~.mdc-radio__background .mdc-radio__outer-circle,
.mdc-radio[data-status="approved"] .mdc-radio__native-control:enabled:checked~.mdc-radio__background .mdc-radio__inner-circle, 
.mdc-radio[data-status="approved"] .mdc-radio__native-control:enabled:indeterminate~.mdc-radio__background .mdc-radio__inner-circle, 
.mdc-radio[data-status="approved"] .mdc-radio__native-control[data-indeterminate=true]:enabled~.mdc-radio__background .mdc-radio__inner-circle {
    border-color: var(--c-green);
}