@font-face {
    font-family: 'Roboto-Light';
    src: url('../content/roboto/Roboto-Light.woff') format('woff');
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url('../content/roboto/Roboto-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../content/roboto/Roboto-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../content/roboto/Roboto-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../content/roboto/Roboto-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('../content/material-icon/MaterialIcons-Regular.eot'); /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), 
        url('../content/material-icon/MaterialIcons-Regular.woff2') format('woff2'), 
        url('../content/material-icon/MaterialIcons-Regular.woff') format('woff'), 
        url('../content/material-icon/MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 22px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}
    /* Rules for sizing the icon. */
    .material-icons.md-18 {
        font-size: 18px;
        height: 18px;
        width: 18px;
        line-height:18px;
    }

    .material-icons.md-24 {
        font-size: 24px;
        height: 24px;
        width: 24px;
        line-height:24px;
    }
    .material-icons.md-30 {
        font-size: 30px;
        height: 30px;
        width: 30px;
        line-height:30px;
    }
    .material-icons.md-36 {
        font-size: 36px;
        height: 36px;
        width: 36px;
        line-height:36px;
    }

    .material-icons.md-48 {
        font-size: 48px;
        height: 48px;
        width: 48px;
        line-height:48px;
    }


    /* Rules for using icons as black on a light background. */
    .material-icons.md-dark {
        color: rgba(0, 0, 0, 0.54);
    }

        .material-icons.md-dark.md-inactive {
            color: rgba(0, 0, 0, 0.26);
        }

    /* Rules for using icons as white on a dark background. */
    .material-icons.md-light {
        color: rgba(255, 255, 255, 1);
    }

        .material-icons.md-light.md-inactive {
            color: rgba(255, 255, 255, 0.3);
        }
html {
    background-color: black;
}

body {
    color: dimgrey;
    font-family: 'Roboto-Light', sans-serif;
}

textarea, input, md-select-value {
    font-family: 'Roboto-Regular', sans-serif;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: capitalize;
}

h5 {
    font-size: calc(15px + 0.5vw);
}

h4 {
    font-size: calc(20px + 1vw);
}

h3 {
    font-size: calc(25px + 1.5vw);
}

h2 {
    font-size: calc(30px + 2.0vw);
}

.noshadow {
    box-shadow: none;
}

.logo-img {

    max-height: 80px;
}

@media(max-width: 374px) {
    .logo-img {
        padding-top: 15px;
        padding-bottom: 15px;
        max-height: 55px;
    }
}

.footer-icon {
    color: #999;
    font-size: 1.8em;
    vertical-align: top;
}

    .footer-icon:hover {
        color: #D20A28;
    }

.footer-icon-mobile {
    color: #999;
    font-size: 1.8em;
    vertical-align: baseline;
}

.footer-icon:hover {
    color: #D20A28;
}

.md-button.md-icon-button.footer-icon[disabled]:hover {
    color: rgba(0,0,0,0.38);
}

.bigicon {
    font-size: 20px;
}

.nav-link {
    color: grey !important;
    text-transform: capitalize;
    font-size: 16px;
    border-bottom: 2px solid transparent;
    transition: border-bottom-color 0.5s ease-out;
    -webkit-transition: border-bottom-color 0.5s ease-out;
}

    .nav-link:hover {
        color: white !important;
        border-bottom-color: #D20A28 !important;
    }

    .nav-link.active {
        color: white !important;
        border-bottom-color: #D20A28 !important;
    }

    .nav-link.active-link {
        color: white !important;
        border-bottom-color: #D20A28 !important;
    }

    .nav-link.dropdown-active {
        background-color: #D20A28 !important;
        color: white !important;
    }

.side-nav li > a {
    padding: 0 25px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.dropdown-content {
    background-color: #FFFFFF;
    margin: 0;
    display: none;
    min-width: 300px; /* Changed this to accomodate content width */
    max-height: auto;
    margin-left: -1px; /* Add this to keep dropdown in line with edge of navbar */
    overflow: hidden; /* Changed this from overflow-y:auto; to overflow:hidden; */
    opacity: 0;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
    will-change: width, height;
}

.side-nav .collapsible-body li a, .side-nav.fixed .collapsible-body li a {
    padding: 0 20px 0 35px;
}

.side-nav .collapsible-header, .side-nav.fixed .collapsible-header {
    padding: 0 25px;
}

label {
    font-size: inherit;
}

md-select-value *：not(.md-text){
font-size:18px;
}

md-input-container label {
    color: rgb(150,150,150);
    font-size: 18px;
}

.md-autocomplete-suggestions-container li {
    color: dimgrey;
}

table {
    width: inherit;
}

.row {
    margin-bottom: 0;
}

.hafele-red-bgr {
    background-color: rgb(210, 10, 40) !important;
}

.hafele-grey-bgr {
    background-color: rgb(150, 150, 150) !important;
}

.hafele-red-txt {
    color: rgb(210, 10, 40) !important;
}

table.md-table th.md-column {
    font-size: 13px;
    font-weight: 700;
}

table.md-table td.md-cell {
    font-size: 14px;
}

.md-table-pagination {
    font-size: 13px;
}

md-checkbox.md-default-theme.md-checked .md-icon, md-checkbox.md-checked .md-icon {
    background-color: #26a69a !important;
}

md-table-pagination button:focus {
    background-color: transparent !important;
}

md-icon {
    min-width: inherit;
}

.md-button.md-default-theme.md-raised, .md-button.md-raised {
    background-color: rgb(210, 10, 40);
    color: white;
}

    .md-button.md-default-theme.md-raised:not([disabled]):hover, .md-button.md-raised:not([disabled]):hover {
        background-color: #c30925;
    }

    .md-button.md-default-theme.md-raised:not([disabled]).md-focused, .md-button.md-raised:not([disabled]).md-focused {
        background-color: #c30925;
    }

.first-button {
    margin-left: 0;
}

button:focus {
    background-color: transparent;
}

.email-wrapper {
    display: inline-block;
    max-width: 100%;
}

.hide-text {
    height: 16px;
    line-height: 16px;
    padding: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: -3px;
}

.show {
    overflow: visible;
    height: auto;
    white-space: normal;
}

    .show.cc {
        margin-bottom: 1px;
    }

@media only screen and (max-width: 615px) {
    .md-table-pagination > * {
        height: 35px;
    }
}


/********* for full-screen app ********/
@media only screen and (min-width: 993px) {
    .container {
        width: 75%;
        max-width: none;
    }
}
/******** fix in side-nav ng-model is reconized as empty in a certain condition by1122 ********/
md-input-container:not(.md-input-has-value) input:not(:focus),
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text {
    color: unset;
    margin-bottom: 0;
}
/*********custom check box - with white tick inside*/
md-checkbox.md-default-theme.md-checked .md-icon:after, md-checkbox.md-checked .md-icon:after {
    border-color: white;
}
/******* narrow down the verticle gap between md-input-container *******/
.no-margin-left {
    margin-left: 0 !important;
}

md-input-container {
    margin: 12px 0 7px 0;
    min-height: 56px;
}

md-autocomplete md-progress-linear .md-container {
    margin-top: 11px;
}

.md-virtual-repeat-container {
    margin-top: 8px;
}
/******* end of narrowing down the verticle gap between md-input-container *******/

md-input-container.md-input-focused .md-input, md-input-container .md-input.ng-invalid.ng-dirty, md-input-container.md-input-resized .md-input {
    margin-bottom: 0;
}

._md-datepicker-floating-label .md-input {
    margin-bottom: 0;
}
/*** input has margin-bottom caused by materialize.min.css ***/
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
    margin-bottom: 0;
}

md-progress-circular svg path {
    stroke: rgb(210, 10, 40);
}

input:not([type]):focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #D20A28;
    box-shadow: 0 1px 0 0 #D20A28;
}

md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused input.md-input, md-input-container:not(.md-input-invalid).md-input-focused input.md-input, md-input-container.md-default-theme:not(.md-input-invalid).md-input-resized input.md-input, md-input-container:not(.md-input-invalid).md-input-resized input.md-input {
    border-color: rgb(0,150,136);
    box-shadow: 0 1px 0 0 rgb(0,150,136);
}

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

.navbar-fixed {
    z-index: 50;
}

.hint {
    /* Position the hint */
    position: absolute;
    left: 2px;
    right: auto;
    bottom: 7px;
    /* Copy styles from ng-messages */
    font-size: 12px;
    line-height: 14px;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    /* Set our own color */
    color: grey;
}
/*input*/
md-contact-chips.no-border input[type=search]:focus:not([readonly]) {
    border-bottom: none;
    box-shadow: none;
}

@media only screen and (min-width: 993px) {
    .body-content {
        padding: 0;
    }
}

table.md-table tbody.md-body > tr.md-row, table.md-table tfoot.md-foot > tr.md-row {
    transition: background-color .2s;
}

    table.md-table tbody.md-body > tr.md-row:not([disabled]):hover {
        background-color: #eee !important;
    }

[role="button"] {
    cursor: pointer;
}

input:not([type]):disabled,
input:not([type])[readonly="readonly"],
input[type=text]:disabled,
input[type=text][readonly="readonly"],
input[type=password]:disabled,
input[type=password][readonly="readonly"],
input[type=email]:disabled,
input[type=email][readonly="readonly"],
input[type=url]:disabled,
input[type=url][readonly="readonly"],
input[type=time]:disabled,
input[type=time][readonly="readonly"],
input[type=date]:disabled,
input[type=date][readonly="readonly"],
input[type=datetime]:disabled,
input[type=datetime][readonly="readonly"],
input[type=datetime-local]:disabled,
input[type=datetime-local][readonly="readonly"],
input[type=tel]:disabled,
input[type=tel][readonly="readonly"],
input[type=number]:disabled,
input[type=number][readonly="readonly"],
input[type=search]:disabled,
input[type=search][readonly="readonly"],
textarea.materialize-textarea:disabled,
textarea.materialize-textarea[readonly="readonly"] {
    color: rgba(0,0,0,0.5);
    border-bottom: 1px dotted transparent;
}

md-select[disabled] .md-select-value {
    color: rgba(0,0,0,0.5);
}

[disabled] md-input-container.md-default-theme .md-input, 
[disabled] md-input-container .md-input, 
md-input-container.md-default-theme .md-input[disabled], 
md-input-container .md-input[disabled] {
    color: rgba(0,0,0,0.5);
}

.md-chips {
    margin-bottom: 12px;
}

#container {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
}

md-select-menu.md-default-theme md-content md-option[disabled] .md-text, md-select-menu md-content md-option[disabled] .md-text {
    color: rgba(0,0,0,0.5);
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}