/*! material-style.css v0.28.1-beta */
/*
 * Color Palette (http://www.google.com/design/spec/style/color.html#color-color-palette)
 * Primary 100 - #c5cae9    Secondary 100 - #ffe0b2
 * Primary 200 - #9fa8da    Secondary 200 - #ffcc80
 * Primary 300 - #7986cb    Secondary 300 - #ffb74d
 * Primary 400 - #5c6bc0    Secondary 400 - #ffa726
 * Primary 500 - #3f51b5    Secondary 500 - #ff9800
 * Primary 600 - #3949ab    Secondary 600 - #fb8c00
 * Primary 700 - #303f9f    Secondary 700 - #f57c00
 * Primary 800 - #283593    Secondary 800 - #ef6c00
 * Primary 900 - #1a237e    Secondary 900 - #e65100
 *  Primary A1 - #8c9eff     Secondary A1 - #ffd180
 *  Primary A2 - #536dfe     Secondary A2 - #ffab40
 *  Primary A4 - #3d5afe     Secondary A4 - #ff9100
 *  Primary A7 - #304ffe     Secondary A7 - #ff6d00
 * Dark - #3d3e46
 * Light- #f9f9fa
 */
/* HTML
 =============================================================================*/
html,
body {
    font-family: 'Roboto', arial, sans-serif;
    background-color: #fafafa;
    height: 100%;
    color: rgba(0, 0, 0, 0.87);
}
a {
    color: #3f51b5;
}
a:visited {
    color: #303f9f;
}
a:hover {
    text-decoration: underline;
    color: #7986cb;
}

kbd {
    background-color: #f0f0f0;
}

pre {
    margin: 2rem;
}

blockquote {
    background-color: rgba(0, 0, 0, 0.02);
    border-left: 5px solid rgba(0, 0, 0, 0.26);
    padding: 0.5rem 1rem;
}

/* Table
 * ---------------------------------------------------------------------------*/
table.nice thead {
    background-color: #efefef;
    color: #303030;
}

table.striped tr:nth-child(2n-1) td {
    background-color: #f3f3f3;
}

/* Forms
 =============================================================================*/
/* Buttons
 * ---------------------------------------------------------------------------*/
button {
    font-family: 'Roboto', arial, sans-serif;
}

button.raised, a.raised,
button.flat, a.flat {
    text-transform: uppercase;
    background-color: transparent;
    font-size: 1em;
    line-height: 1em;
    border: none;
    border-radius: 2px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: .3s;
    -webkit-font-smoothing: antialiased;
}

button.flat:focus, a.flat:focus {
    outline: 0;
}

button.flat:hover, a.flat:hover {
    color: rgba(255, 255, 255, 0.7);
    background-color: #7986cb;
}

button.flat[disabled], button.flat.disabled, a.flat.disabled {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    cursor: not-allowed;
}

button.flat:active, a.flat:active {
    color: #fff;
    background-color: #3f51b5;
}

button.raised, a.raised {
    background-color: #3f51b5;
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

button.raised:hover, a.raised:hover {
    background-color: #7986cb;
}

button.raised[disabled], button.raised.disabled, a.raised.disabled {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    cursor: not-allowed;
    box-shadow: none;
}

button.raised:active, a.raised:active {
    background-color: #303f9f;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Input Elements
 * ---------------------------------------------------------------------------*/
.slender { height: 1.5em; } /*1.5 to accommodate 1 line height*/
.tall { height: 4.6em; }
.grande { height: 7em; }
.venti { height: 12.2em; }
.malleable {
    transition: height 0.5s;
}

.input {
    position: relative;
    transition: .3s;
    padding: 0.625rem 0 0.25rem;
}

.input__selection {
    padding: 0.5rem 0;
}

label, .label {
    font-size: 0.75rem;
    line-height: 0.75rem;
    display: inline-block;
    color: rgba(0, 0, 0, 0.38);
    font-weight: bold;
}

label.selection {
    color: rgba(0, 0, 0, 0.54);
}

label.selection:hover {
    color: rgba(0, 0, 0, 0.87);
}

label:hover, .label:hover {
    color: rgba(0, 0, 0, 0.54);
}

.textfield {
    width: 100%;
    line-height: 1.5rem;
    cursor: text;
    outline: 0;
    border-bottom: 1px solid #cbcbcb;
    padding: 0.5rem 0 10px;
}

input[type=password],
input[type=email],
input[type=text] {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid #cbcbcb;
    padding: 0.5rem 0 10px;
    border-radius: 0;
    -webkit-font-smoothing: antialiased;
}

/* remove the 100% width */
.input .inputs input[type=text].year {
    width: 3rem;
}

.input .inputs input[type=text].month {
    width: 2rem;
}

.input .inputs input[type=text].day {
    width: 2rem;
}

.input .inputs input[type=text].date {
    width: 6.5rem;
}

.input .inputs input[type=text].time {
    width: 3.5rem;
}

.textfield:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=text]:focus {
    outline: 0;
    border-bottom-width: 2px;
    padding-bottom: 9px;
    border-bottom-color: #3f51b5;
}

.textfield.disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=text]:disabled {
    border-bottom-style: dotted;
}

.textfield.disabled {
    opacity: 0.5;
    color: rgba(0, 0, 0, 0.38);
}

input[type=password]:disabled:hover,
input[type=email]:disabled:hover,
input[type=text]:disabled:hover {
    cursor: not-allowed;
}

input[type=password]:disabled::-webkit-input-placeholder { opacity: 0.5; }
input[type=password]:disabled:-moz-placeholder { opacity: 0.5; }
input[type=password]:disabled::-moz-placeholder { opacity: 0.5; }
input[type=password]:disabled:-ms-input-placeholder { opacity: 0.5; }
input[type=email]:disabled::-webkit-input-placeholder { opacity: 0.5; }
input[type=email]:disabled:-moz-placeholder { opacity: 0.5; }
input[type=email]:disabled::-moz-placeholder { opacity: 0.5; }
input[type=email]:disabled:-ms-input-placeholder { opacity: 0.5; }
input[type=text]:disabled::-webkit-input-placeholder { opacity: 0.5; }
input[type=text]:disabled:-moz-placeholder { opacity: 0.5; }
input[type=text]:disabled::-moz-placeholder { opacity: 0.5; }
input[type=text]:disabled:-ms-input-placeholder { opacity: 0.5; }

textarea {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid #cbcbcb;;
    padding: 0.5rem 0 10px;
    border-radius: 0;
    line-height: 1.5em;
    -webkit-font-smoothing: antialiased;
}

textarea:focus {
    outline: 0;
    border-width: 2px;
    padding-bottom: 9px;
    border-color: #3f51b5;
}

textarea:disabled {
    border-bottom-style: dotted;
}

textarea:disabled:hover {
    cursor: not-allowed;
}

textarea:disabled::-webkit-input-placeholder { opacity: 0.5; }
textarea:disabled:-moz-placeholder { opacity: 0.5; }
textarea:disabled::-moz-placeholder { opacity: 0.5; }
textarea:disabled:-ms-input-placeholder { opacity: 0.5; }

.input-message {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    display: none;
}

.input-message:after {
    content: "\0020";
    display: block;
    overflow: hidden;
    height: 0;
    clear: both;
}

.input-text {
    color: rgba(0, 0, 0, 0.36);
    transition: .3s ease-in-out;
}

.input-error {
    color: #d32f2f;
    transition: .3s ease-in-out;
}

/*hide the helper text under the fields*/
.input .input-message,
.input .input-text,
.input .input-error {
    display: none;
}

/*hide the error, show the info*/
.input.info .input-message { display: block; }
.input.info .input-text { display: block; }
.input.info .input-error { display: none; }

/*show the error, hide the info*/
.input.error .input-message { display: block; }
.input.error .input-error { display: block; }
.input.error .input-text { display: none; }

.input.error .textfield,
.input.error input,
.input.error textarea {
    border-bottom-width: 2px;
    padding-bottom: 9px;
    border-bottom-color: #d32f2f;
}

/* Autocomplete results
 * ---------------------------------------------------------------------------*/
.input__results {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: white;
    padding: 1rem 0.5rem;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.37);
    display: none;
    max-height: 22rem;
    overflow-y: scroll;
    z-index: 101;
}

.input__results.active {
    display: block;
}

.input__results ul {
    list-style: none;
}

.input__results li {
    padding: 0.5rem;
    cursor: pointer;
}

.input__results li:hover,
.input__results li.cursor {
    background-color: rgba(0, 0, 0, 0.12);
}

.input__results li.plain {
    padding-bottom: 0.5rem;
    cursor: auto;
}

.input__results li.inactive {
    cursor: auto;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.input__results li.inactive:hover,
.input__results li.plain:hover {
    background-color: transparent;
}

.input__results__action {
    padding: 0.5rem;
}

/* On/Off Switch
 * ---------------------------------------------------------------------------*/
.onoffswitch {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: inline-block;
}

.onoffswitch [type="checkbox"] {
    display: none;
}

.onoffswitch [type="checkbox"]:checked + .switch .inner {
    margin-left: -100%;
}

.onoffswitch [type="checkbox"]:checked + .switch .handle {
    right: 50%;
}

.onoffswitch .switch {
    margin: 0;
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    height: 100%;
}

.onoffswitch .switch .inner {
    height: inherit;
    width: 200%;
    transition: margin 0.3s ease-in;
    text-transform: uppercase;
}

.onoffswitch .switch .inner .on {
    margin: 0 -1px 0 -2px;
    color: #fff;
    background-color: #3f51b5;
}

.onoffswitch .switch .inner .off {
    text-align: right;
    background-color: #e0e0e0;
}

.onoffswitch .switch .inner .on,
.onoffswitch .switch .inner .off {
    height: inherit;
    width: 50%;
    box-sizing: border-box;
    font-size: 0;
    line-height: 0;
    display: inline-block;
    color: #fff;
}

.onoffswitch .switch:hover .inner .on,
.onoffswitch .switch:hover .inner .off {
    color: #7986cb;
}

.onoffswitch .switch .inner .on .value,
.onoffswitch .switch .inner .off .value {
    padding: 0.5rem;
    vertical-align: middle;
    text-align: left;
    display: inline-block;
    width: 50%;
    font-size: 0.875rem;
    line-height: 0.875rem;
}

.onoffswitch .switch .inner .off .value {
    text-align: right;
}

.onoffswitch .switch .handle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0px;
    width: 50%;
    border: 1px solid #cbcbcb;
    border-radius: 2px;
    display: block;
    transition: all 0.3s ease-in;
    background-color: #fff;
}

/* File Upload
 * ---------------------------------------------------------------------------*/
.file-upload {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.file-upload:hover {
    color: #ccc;
}

.file-upload input[type=file] {
    position: absolute;
    opacity: 0;
    width: 100%;
}

.file-upload i[class^=icon16-], .file-upload i[class*=icon16-],
.file-upload i[class^=icon32-], .file-upload i[class*=icon32-],
.file-upload i[class^=icon64-], .file-upload i[class*=icon64-] {
    vertical-align: middle;
}

/* Search
 * ---------------------------------------------------------------------------*/
input[type=text].search {
    display: inline-block;
    vertical-align: middle;
    background: #fff url(img/lineicons-16.png) no-repeat scroll -495px 6px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 5px;
    padding-left: 26px;
    -moz-transition: 0.3s linear border;
    -webkit-transition: 0.3s linear border;
    transition: 0.3s linear border;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input.search:focus {
    outline: 0;
    border-color: #303f9f;
}

/* Dropdowns
 * ---------------------------------------------------------------------------*/
.relative {
    display: inline-block;
    position: relative;
}

.relative .drop {
    display: none;
}

.relative.reveal .drop,
.relative.auto:hover .drop {
    display: block;
}

.drop {
    position: absolute;
    transition: .3s ease-in-out;
    z-index: 11;
}

.drop.up {
    bottom: 0;
    top: auto;
}
.drop.up.max {
    width: 100%;
    box-sizing: border-box;
}
.drop.up-left {
    top: auto;
    bottom: 100%;
    left: 0;
    right: auto;
}
.drop.up-left.max {
    width: 100%;
    box-sizing: border-box;
}
.drop.up-right {
    top: auto;
    bottom: 100%;
    right: 0;
    left: auto;
}
.drop.up-right.max {
    width: 100%;
    box-sizing: border-box;
}
.drop.down {
    top: 0;
    bottom: auto;
}
.drop.down.max {
    width: 100%;
    box-sizing: border-box;
}
.drop.down-left {
    top: 100%;
    bottom: auto;
    left: 0;
    right: auto;
}
.drop.down-left.max {
    width: 100%;
    box-sizing: border-box;
}
.drop.down-right {
    top: 100%;
    bottom: auto;
    right: 0;
    left: auto;
}
.drop.down-right.max {
    width: 100%;
    box-sizing: border-box;
}
.drop.left {
    left: 0;
    right: auto;
}
.drop.left-down {
    left: auto;
    right: 100%;
    top: 0;
    bottom: auto;
}
.drop.left-down.max {
    width: 100%;
    box-sizing: border-box;
}
.drop.left-up {
    left: auto;
    right: 100%;
    bottom: 0;
    top: auto;
}
.drop.left-up.max {
    width: 100%;
    box-sizing: border-box;
}
.drop.right {
    right: 0;
    left: auto;
}
.drop.right-down {
    right: auto;
    left: 100%;
    top: 0;
    bottom: auto;
}
.drop.right-down.max {
    width: 100%;
    box-sizing: border-box;
}
.drop.right-up {
    right: auto;
    left: 100%;
    bottom: 0;
    top: auto;
}
.drop.right-up.max {
    width: 100%;
    box-sizing: border-box;
}

/* Menu
 =============================================================================*/
/* Dropdown
 * ---------------------------------------------------------------------------*/
.drop ul {
    list-style: none;
}

.cardlet {
    background-color: white;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

.cardlet__display {
    color: rgba(0, 0, 0, 0.84);
    background-color: #fafafa;
    display: block;
    padding: 0.625rem 0.875rem;
    white-space: nowrap;
}

.cardlet__item {
    color: rgba(0, 0, 0, 0.84);
    background-color: white;
    display: block;
    cursor: pointer;
    white-space: nowrap;
}

.cardlet__item__w {
    padding: 0.625rem 0.875rem;
    display: block;
}

.cardlet__item:hover {
    background-color: rgba(0, 0, 0, 0.12);
    display: block;
}

.cardlet__separator {
    height: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0 0.875rem;
}

/* Slideout
 * ---------------------------------------------------------------------------*/
.slidemenu {
    background-color: white;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    bottom: 0;
    left: -242px;
    z-index: 1001;
    width: 240px;
    transition: left 0.25s;
}

.slidemenu.reveal {
    left: 0;
}

.slidemenu nav ul {
    padding: 0;
    padding-top: 1rem;
}

.slidemenu nav ul i[class^=icon16-] {
    vertical-align: text-top;
}

.slidemenu nav ul > li span {
    padding: 0.5rem 1.25rem;
    padding-left: 1rem;
}

.slidemenu nav ul > li a {
    padding: 0.5rem 1.25rem;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.54);
    display: block;
}

.slidemenu nav ul > li a:hover {
    background-color: #f9f9fa;
}

.slidemenu nav ul > li.active {
    font-weight: bold;
}

.slidemenu nav ul > li.inactive {
    color: rgba(0, 0, 0, 0.38);
}

.slidemenu nav ul > li.inactive:hover {
    background-color: white; /*same as .slidemenu*/
}

.slidemenu .auxillary {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 0.75rem;
}

.slidemenu .auxillary ul {
    padding: 0;
    list-style: none;
}

.slidemenu .auxillary ul > li {
    padding: 0.5rem 1.25rem;
}

.slidemenu .auxillary ul > li a {
    color: rgba(0, 0, 0, 0.54);
}

/* Dialog
 =============================================================================*/
.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: #000;
    opacity: 0.7;
    filter: alpha(opacity=7); /* For IE8 and earlier */
}


.dialog {
    box-shadow: 0 10px 50px 3px rgba(0, 0, 0, 0.7);
    background-color: white;
    z-index: 1002;
    position: fixed;
    top: 10%;
    right: 20%;
    left: 20%;
    max-height: 70%;
    overflow-y: auto;
    display: none;
}
@media (max-width: 640px) {
    .dialog {
        top: 10%;
        right: 10%;
        left: 10%;
    }
}

.dialog__body {
    padding: 1.5rem;
    padding-bottom: 1rem;
    overflow-y: auto;
}

.dialog__body__title {
    color: rgba(0, 0, 0, 0.84);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.dialog__body__content p,
.dialog__body__content {
    color: rgba(0, 0, 0, 0.54);
}

.dialog__body__content {
    font-size: 0.875rem;
}

.dialog__body__status {
    padding: 1rem 0;
}

.dialog__actions {
    min-height: 2rem;
    padding: 0.375rem 1.5rem;
    margin-bottom: 0.5rem;
}

.dialog__actions__button--one {
    width: auto;
    margin: 0 auto;
    text-align: center;
}

.dialog__actions__button--side {
    float: right;
    margin-left: 0.5rem;
}

.dialog__actions__button--stack {
    display: block;
    padding: 0.375rem;
    text-align: right;
}

/* Banner
 =============================================================================*/
.banner {
    border: 1px solid #607d8b;
    font-size: 0.75em;
}

.banner__head {
    padding: 0.25rem 0.5rem;
    background-color: #607d8b;
    color: rgba(255, 255, 255, 0.65);
}

.banner__body {
    padding: 0.5rem;
    background-color: #b0bec5;
    color: #333;
}

.banner.error {
    border-color: #f44336;
}

.banner.error .banner__head {
    background-color: #f44336;
}

.banner.error .banner__body {
    background-color: #ef9a9a;
}

.banner.info {
    border-color: #3f51b5;
}

.banner.info .banner__head {
    background-color: #3f51b5;
}

.banner.info .banner__body {
    background-color: #9fa8da;
}

.banner.success {
    border-color: #4caf50;
}

.banner.success .banner__head {
    background-color: #4caf50;
}

.banner.success .banner__body {
    background-color: #a5d6a7;
}

.banner.warning {
    border-color: #ff5722;
}

.banner.warning .banner__head {
    background-color: #ff5722;
}

.banner.warning .banner__body {
    background-color: #ffab91;
    color: #333;
}

/* Cards
 =============================================================================*/
.card {
    font-size: 0.875rem;
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    background-color: white;
    width: 100%;
    position: relative;
}

a.card {
    color: inherit;
}

.card-title {
    font-size: 1.25rem;
    line-height: 2rem;
}

.card__image img {
    display: block;
    margin: 0 auto;
}

.card__message__wrapper {
    margin: 1rem;
    line-height: 1.5em;
}

.card__action {
    padding: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.card__image {
    background-color: #eee;
    position: relative;
}

.card__image__caption {
    position: absolute;
    right: 0;
    bottom: 1rem;
    left: 0;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    font-size: 1.75rem;
}

.card__image__subtitle {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 0.5rem;
}

.landscape .card__image {
    width: 200px;
    float: left;
}

.landscape .card__image__caption,
.landscape .card__image__subtitle {
    display: none;
}

.landscape .card__message {
    overflow: hidden;
}

.landscape .card__action {
    clear: left;
    overflow: hidden;
}

.card.resp .card__image {
    width: 200px;
    float: left;
    position: relative;
}

.card.resp .card__image__caption,
.card.resp .card__image__subtitle {
    display: none;
}

.card.resp .card__message {
    overflow: hidden;
}

.card.resp .card__action {
    clear: left;
    overflow: hidden;
}

@media (max-width: 767px) {
    .card.landscape .card__image {
        width: 120px;
    }

    .card.landscape .card__message {
        margin-left: 120px;
    }

    .card.resp .card__image {
        width: 100%;
        float: none;
    }

    .card.resp .card__image__caption {
        position: absolute;
        right: 0;
        bottom: 1rem;
        left: 0;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
        font-size: 1.75rem;
        display: block;
    }

    .card.resp .card__image__subtitle {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.3);
        color: rgba(255, 255, 255, 0.7);
        padding: 0.5rem;
        display: block;
    }
}

/* Chip
 =============================================================================*/
.chip {
    display: inline-block;
    position: relative;
    margin: 0.25em;
    border-radius: 1em;
    font-size: 0.8125em;
    color: rgba(0, 0, 0, 0.87);
    background-color: rgba(224, 224, 224, 0.87);
}

.chip__text {
    display: inline-block;
    margin: 0.5em 0.75em;
}

.chip__cross {
    display: inline-block;
    margin-left: -0.5em;
    margin-right: 0.5em;
    width: 1em;
    height: 1em;
    border-radius: 1em;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    color: rgba(224, 224, 224, 0.87);
    background-color: rgba(166, 166, 166, 0.87);
}

.chip--icon .chip__icon {
    display: inline-block;
    position: absolute;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 1em;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
}

.chip--icon .chip__text {
    margin-left: 2.5em;
}

/* Epanel
 =============================================================================*/
.ep__header {
    padding: 1rem;
    color: white;
    background-color: #3f51b5;
}

.ep__header__title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.ep__header__subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.ep__row--expand {
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.ep__row__action {
    padding: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.02);
    text-align: right;
    background-color: white;
}

.ep__row__view {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background-color: white;
}

.ep__row--focus .ep__row__action {
    background-color: #eee;
}

.ep__row--focus .ep__row__view {
    background-color: #eee;
}

.ep__row__view__label {
    overflow: auto;
    color: rgba(0, 0, 0, 0.87);
    width: 30%;
}

.ep__row__view__label__sub {
    font-size: smaller;
    color: rgba(0, 0, 0, 0.54);
}

.ep__row__view__value {
    overflow: auto;
    color: rgba(0, 0, 0, 0.54);
}

.ep__row__view__value__sub {
    font-size: smaller;
}

.ep__row__view__value__set {
    padding-top: 1rem;
}

.ep .ep5 { width: 5%; }
.ep .ep10 { width: 10%; }
.ep .ep15 { width: 15%; }
.ep .ep20 { width: 20%; }
.ep .ep25 { width: 25%; }
.ep .ep30 { width: 30%; }
.ep .ep35 { width: 35%; }
.ep .ep40 { width: 40%; }
.ep .ep45 { width: 45%; }
.ep .ep50 { width: 50%; }
.ep .ep55 { width: 55%; }
.ep .ep60 { width: 60%; }
.ep .ep65 { width: 65%; }
.ep .ep70 { width: 70%; }
.ep .ep75 { width: 75%; }
.ep .ep80 { width: 80%; }
.ep .ep85 { width: 85%; }
.ep .ep90 { width: 90%; }
.ep .ep95 { width: 95%; }

@media (max-width: 767px) {
    .ep__row__view {
        flex-direction: column;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .ep__row__view__label {
        margin-bottom: 1rem;
    }

    .ep__row__view__value {
        margin-bottom: 1rem;
    }

    .ep__row__action {
        display: flex;
        flex-flow: column;
    }

    .ep .ep5 { width: 100%; }
    .ep .ep10 { width: 100%; }
    .ep .ep15 { width: 100%; }
    .ep .ep20 { width: 100%; }
    .ep .ep25 { width: 100%; }
    .ep .ep30 { width: 100%; }
    .ep .ep35 { width: 100%; }
    .ep .ep40 { width: 100%; }
    .ep .ep45 { width: 100%; }
    .ep .ep50 { width: 100%; }
    .ep .ep55 { width: 100%; }
    .ep .ep60 { width: 100%; }
    .ep .ep65 { width: 100%; }
    .ep .ep70 { width: 100%; }
    .ep .ep75 { width: 100%; }
    .ep .ep80 { width: 100%; }
    .ep .ep85 { width: 100%; }
    .ep .ep90 { width: 100%; }
    .ep .ep95 { width: 100%; }
}

/* Threads
 =============================================================================*/
.thread {
    padding: 1.5rem;
}

.thread__sub {
    padding-top: 1rem;
}

.thread__main__avatar {
    float: left;
    width: 4rem;
    min-height: 4rem;
    height: 4rem;
    overflow: hidden;
    margin-right: 0.5rem;
}

.thread__sub__avatar {
    float: left;
    margin-left: 1rem;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    margin-right: 0.5rem;
}

.thread__main:after,
.thread__sub:after {
    content: "\0020";
    display: block;
    overflow: hidden;
    height: 0;
    clear: both;
}

.thread__main__body,
.thread__sub__body {
    padding-left: 0.5rem;
}

.thread__main__body__actions,
.thread__sub__body__actions,
.thread__main__body__name,
.thread__sub__body__name {
    display: inline-block;
    font-size: 0.75rem;
}

.thread__main__body__actions,
.thread__sub__body__actions {
    float: right;
}

.thread__main__body__timestamp,
.thread__sub__body__timestamp {
    display: inline-block;
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.thread__main__body__content,
.thread__sub__body__content {
    font-size: 0.875rem;
    overflow: auto;
    clear: right; /* to clear actions */
}

.thread__main + .thread__sub {
    border-top: 1px solid #efefef;
    margin-top: 1rem;
}

.thread__reply {
    margin-top: 1rem;
}

/* Lists
 =============================================================================*/
.list {
    padding: 0.5rem 0;
    list-style: none;
    background-color: white;
}

.list__row:hover {
    background-color: rgba(0, 0, 0, 0.12);
}

.list__row__tile {
    margin: 0 1rem;
    overflow: hidden;
}

.list__row__tile__pri {
    display: flex;
    align-items: center;
}

.list__row__tile__pri__content {
    border-bottom: 1px solid #eee;
    width: 100%;
}

/*remove the last line*/
.list__row:last-child .list__row__tile__pri__content {
    border-bottom-width: 0;
}

.list__row__tile__pri__icon {
    min-width: 3rem;
    width: 3rem;
    margin-right: 1rem;
    text-align: center;
    order: 1;
}

.list__row__tile__pri__icon img {
    max-width: 3rem;
}

.list__row__tile__pri__content {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    order: 2;
    padding: 1rem 0;
}

.list__row__tile__pri__content__title {
    line-height: 1.5rem;
    text-overflow: ellipsis;
}

.list__row__tile__pri__content__textpri {
    font-size: 0.875rem;
    line-height: 1rem;
}

.list__row__tile__pri__content__textsec {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.54);
    line-height: 1rem;
}

.list__row__tile__pri__action {
    width: 2rem;
    margin-left: 0.5rem;
    order: 3;
}

/* Tabs & Navigation Bar
 =============================================================================*/
.navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: #3f51b5;
    color: #f9f9fa;
    padding: 0.5rem 1rem 0;
    z-index: 20;
}

.masthead {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: #3f51b5;
    color: rgba(255, 255, 255, 1);
    z-index: 21;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

.mastbody {
    padding: 1rem;
}

.masthead nav {
    padding: 0.5rem 1rem 0;
}

.navbar a, .masthead a {
    padding: 0.5rem 1.5rem;
    color: #f9f9fa;
}

.masthead__heading {
    display: inline-block;
    margin-left: 1rem;
    margin-top: 0.25rem;
}

.masthead__heading__title {
    font-size: larger;
}

.masthead__heading__subtitle {
    font-size: smaller;
    font-weight: 300;
}

.masthead__menu {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.masthead__menu.hide {
    display: none;
}

.tabs .tab {
    display: inline-block;
    text-align: center;
    border-bottom: 2px solid transparent;
}

.tabs .tab.selected {
    color: #ffe0b2;
    border-color: #ffe0b2;
}

.tabs .tab:hover {
    border-color: #ffb74d;
    color: #ffb74d;
}

.app {
    margin-top: 5rem; /*increase to 9rem with tabs*/
}

/* Toasts
 =============================================================================*/
.toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    background-color: rgba(0, 0, 0, 0.87);
    color: white;
    padding: 1rem 1.5rem;
    z-index: 10000;
}

.toast__action {
    float: right;
    margin-left: 1.5rem;
    color: #7986cb;
    cursor: pointer;
}

.toast__action a {
    color: #7986cb;
    cursor: pointer;
}

/* Material Search Bar
 =============================================================================*/
.searchbar {
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.37);
    padding: 0.5rem;
    position: relative;
    display: flex;
    vertical-align: middle;
    align-items: center;
    box-sizing: border-box;
}

.searchbar__icon {
    width: 1.5rem;
    text-align: center;
    order: 1;
}

.searchbar--reverse .searchbar__icon {
    float: right;
}

.searchbar__field {
    display: block;
    margin-left: 1.5rem;
    order: 2;
    flex-grow: 1;
}

.searchbar--reverse .searchbar__field {
    margin-right: 2.0rem;
    margin-left: 0.5rem;
}

.searchbar__field input, .searchbar__field input:focus {
    border-width: 0;
}

.searchbar__results {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: white;
    padding: 1rem 0.5rem;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.37);
    display: none;
    z-index: 101;
}

.searchbar__results ul {
    list-style: none;
}

.searchbar__results li {
    padding: 0.5rem 0.5rem 0 3rem;
    cursor: pointer;
    height: 3rem;
}

.searchbar__results li.cursor,
.searchbar__results li:hover {
    background-color: rgba(0, 0, 0, 0.12);
}

.searchbar__results li.plain {
    height: auto;
    padding-bottom: 0.5rem;
    cursor: auto;
}

.searchbar__results li.inactive {
    cursor: auto;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.searchbar__results li.inactive:hover,
.searchbar__results li.plain:hover {
    background-color: transparent;
}

.searchbar__results li .chip {
    margin-left: -2.5rem;
    margin-top: 0.25rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem; /*to center the image*/
    overflow: hidden;
    float: left;
    border-radius: 1rem;
}

.searchbar__results__next {
    float: right;
    text-align: right;
    width: 50%;
    cursor: pointer;
    margin-bottom: -0.5rem;
    display: none;
}

.searchbar__results__prev {
    width: 50%;
    cursor: pointer;
    margin-bottom: -0.5rem;
    display: none;
}

.searchbar__results__next:hover,
.searchbar__results__prev:hover {
    background-color: #fafafa;
}

/* Help Menu & Contents
 =============================================================================*/
.helpmenu {
    background-color: white;
    max-width: 800px;
    margin: 3rem auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.helpmenu__header {
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.87);
    border-bottom: 1px solid #d0d0d0;
    padding: 1rem 1rem 1rem 4rem;
}

.helpmenu__title {
    color: rgba(0, 0, 0, 0.54);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.75rem 1rem 0.75rem 4rem;
    cursor: pointer;
}

.helpmenu__title:hover {
    background-color: rgba(0, 0, 0, 0.12);
}

.helpmenu__title.current {
    display: none;
}

.helpmenu__list {
    background-color: rgba(0, 0, 0, 0.54);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.75rem 1rem 0.75rem 4rem;
    font-weight: bold;
    display: none;
}

.helpmenu__list.current {
    display: block;
}

.helpmenu__list ul {
    font-weight: normal;
    margin-top: 1rem;
    list-style: none;
}

.helpmenu__list ul li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.helpmenu__list ul li a {
    color: rgba(255, 255, 255, 0.7);
}

.help {
    background-color: white;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.help__title {
    color: rgba(0, 0, 0, 0.87);
    font-weight: normal;
}

.helplisting {
    margin: 1rem 2rem;
}

.helplisting__title {
    color: rgba(0, 0, 0, 0.54);
}

.helplisting__list {
    list-style: none;
}

.helplisting__list li {
    padding: 0.5rem;
    padding-left: 1rem;
}

.helplisting__list li.current {
    border-left: 2px solid #000;
    font-weight: bold;
}

/* Material Dropdown Bar
 =============================================================================*/
.dropdownbar {
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.37);
    padding: 0 0.25rem;
    position: relative;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.dropdownbar--inline {
    display: inline-flex;
}

.dropdownbar__icon {
    width: 2rem;
    text-align: center;
    cursor: pointer;
    order: 2;
}

.dropdownbar__icon:hover {
    background-color: rgba(0, 0, 0, 0.12);
}

.dropdownbar__icon.inactive {
    display: none;
}

.dropdownbar__field {
    display: block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    order: 1;
    flex-grow: 1;
}
.dropdownbar__field.inactive {
    display: none;
}

.dropdownbar__field input, .dropdownbar__field input:focus {
    border-width: 0;
}

.dropdownbar__results {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: white;
    padding: 1rem 0.5rem;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.37);
    display: none;
    max-height: 22rem;
    overflow-y: scroll;
    z-index: 101;
}

.dropdownbar__results.active {
    display: block;
}

.dropdownbar__results ul {
    list-style: none;
}

.dropdownbar__selected,
.dropdownbar__results li {
    padding: 0.5rem 0.5rem 0 3rem;
    cursor: pointer;
}

.dropdownbar__results li {
    height: 3rem;
}

.dropdownbar__selected {
    cursor: default;
    order: 1;
    flex-grow: 1;
}

.dropdownbar__results li:hover,
.dropdownbar__results li.cursor {
    background-color: rgba(0, 0, 0, 0.12);
}

.dropdownbar__results li.plain {
    height: auto;
    padding-bottom: 0.5rem;
    cursor: auto;
}

.dropdownbar__results li.inactive {
    cursor: auto;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.dropdownbar__results li.inactive:hover,
.dropdownbar__results li.plain:hover {
    background-color: transparent;
}

.dropdownbar__selected .chip,
.dropdownbar__results li .chip {
    margin-left: -2.5rem;
    margin-top: 0.25rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem; /*to center the image*/
    overflow: hidden;
    float: left;
    border-radius: 1rem;
}

/* Scroll Dial
 =============================================================================*/
.scrolldial {
    display: inline-flex;
    flex-flow: column nowrap;
    text-align: center;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.37);
}

.scrolldial__value {
    order: 1;
    overflow: hidden;
    padding-right: 1em;
    padding-left: 1em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    cursor: text;
    color: rgba(0, 0, 0, 0.54);
}

.scrolldial__value__dial {
    position: relative;
    height: 2.5em;
}

.scrolldial__value__dial__cell {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: top 0.7s;
}

.scrolldial__value__dial__cell--down {
    top: 2.5em;
}

.scrolldial__value__dial__cell--up {
    top: -2.5em;
}

.scrolldial__up,
.scrolldial__down {
    padding-right: 1.5em;
    padding-left: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.12);
}

.scrolldial__up:hover,
.scrolldial__down:hover {
    background-color: rgba(0, 0, 0, 0.12);
}

.scrolldial__up {
    order: 0;
}

.scrolldial__down {
    order: 2;
}

/* Date Picker
 =============================================================================*/
.datepicker {
    background-color: white;
    position: absolute;
    border: 1px solid #afafaf;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.37);
    padding: 0.25rem 0.5rem;
    z-index: 1010;
    display: none;
}

.datepicker__nav {
    margin: 0.2rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-size: 0.75rem;
    height: 1.5rem;
    line-height: 1.5rem;
}

.datepicker__nav select {
    font-size: 0.75rem;
}

.datepicker__nav__prev,
.datepicker__nav__next {
    cursor: pointer;
}

.datepicker table {
    font-size: 0.75rem;
    margin: 0.25rem auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.datepicker table th,
.datepicker table td {
    width: 1.65rem;
    height: 1.5rem;
    text-align: center;
}

.datepicker table td {
    border: 1px solid #e5e5e5;
}

.datepicker table td.now {
    font-weight: bold;
}

.datepicker table td.selected {
    background-color: rgba(0, 0, 0, 0.38);
}

.datepicker table td:hover {
    background-color: rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.datepicker table td.empty {
    border-width: 0;
}

/* Tabs
 =============================================================================*/
.tab__tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-end;
}

.tab__tabs--dynamic {
    align-items: flex-end;
}

.tab__tabs__tab {
    background-color: #f3f3f3;
    padding: 0.5rem 1rem;
    margin-right: 0.25rem;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.tab__tabs__tab.active {
    background-color: white;
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
}

.tab__tabs__tab__image {
    max-width: 64px;
    display: block;
}

.tab__window {
    box-sizing: border-box;
    width: 100%;
    background-color: white;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* Multi-path selector
 =============================================================================*/
.selector {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
}
.selector__pool {
    flex-grow: 1;
    padding: 0.5rem;
}
.selector__pool__trail {
    font-size: smaller;
    color: rgba(0, 0, 0, 0.54);
    margin: 0.5rem;
}
.selector__pool__trail__item:before {
    content: "\0203A\00a0";
}
.selector__pool__list {
    background-color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    list-style: none;
    overflow: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.selector__pool__list__item {
    color: rgba(0, 0, 0, 0.87);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 0;
    padding: 0.5rem;
}
.selector__pool__list__item:hover {
    background-color: rgba(0, 0, 0, 0.12);
}
.selector__pool__list__item.active {
    color: rgba(0, 0, 0, 0.38);
    cursor: default;
}
.selector__pool__list.disabled .selector__pool__list__item {
    color: rgba(0, 0, 0, 0.54);
}
.selector__pool__list.disabled .selector__pool__list__item.active {
    background-color: rgba(0, 0, 0, 0.12);
}
.selector__pool__list__item.active:hover {
    background-color: white;
}
.selector__picked {
    flex-grow: 1;
    padding: 0.5rem;
}
.selector__picked__subtitle {
    font-size: smaller;
    color: rgba(0, 0, 0, 0.38);
    margin: 0.5rem;
}
.selector__picked__list {
    list-style: none;
    padding: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.selector__picked__list__item {
    color: rgba(0, 0, 0, 0.87);
    padding: 0.25rem;
    cursor: pointer;
}
.selector__picked__list__item:hover {
    background-color: rgba(0, 0, 0, 0.12);
}
.selector__picked__list__item.inactive:hover {
    background-color: transparent;
    cursor: default;
}
@media (max-width: 767px) {
    .selector {
        flex-direction: column;
    }
}

/* Dashboard
 =============================================================================*/
.dashboard {
    width: 100%;
}

.d__app {
    margin-left: 16.25rem;
    transition-property: margin;
    transition-duration: .3s;
    transition-timing-function: ease-out;
}

.mh__pri {
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 1rem;
    height: 4.125rem;
    overflow: hidden;
    background-color: #3949ab;
    color: white;
}

.mh__pri__navpri {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.mh__pri__navpri__logo {
    max-height: 2rem;
    max-width: 2rem;
    margin-right: 0.5rem;
    display: none;
}

.mh__pri__navpri__toggle {
    /*margin-left: -1.5rem; /*based on 1.5rem .mh__pri*/
    display: flex;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
}

.mh__pri__navsec {
    display: flex;
    vertical-align: middle;
    align-items: center;
}

.mh__pri__navsec__label {
    color: #c5cae9;
    margin-right: 0.5rem;
}

.mh__pri__navsec__item {
    display: inline-block;
    margin: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #7986cb;
    border-radius: 0.25rem;
    color: #c5cae9;
}

.mh__sec {
    padding: 1rem;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.54);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mh__sec__nav__link {
    margin-right: 1.5rem;
}

.d__navmenu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 16.25rem;
    background-color: #303f9f;
    transition-property: width, left;
    transition-duration: .3s;
    transition-timing-function: ease-out;
}

.d__navmenu__logo {
    display: flex;
    vertical-align: middle;
    align-items: center;
    box-sizing: border-box;
    padding: 1.5rem 1rem;
    height: 4.125rem;
    background-color: #3f51b5;
    color: white;
}

.d__navmenu__logo__icon {
    max-width: 2rem;
    max-height: 2rem;
    margin-right: 0.5rem;
}

.d__navmenu__nav {
    /*padding: 1rem 1.5rem; /*no padding for full width highlight*/
}

.d__navmenu__nav__preface {
    padding: 1rem;
    background-color: #1a237e;
}

.d__navmenu__nav__preface--bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

.d__navmenu__nav__preface__avatar {
    max-width: 3rem;
    max-height: 3rem;
    float: left;
    overflow: hidden;
    transition-property: width, height;
    transition-duration: .3s;
    transition-timing-function: ease-in;
}

.d__navmenu__nav__preface__avatar--round {
    border-radius: 1.5rem;
}

.d__navmenu__nav__preface__cover {
    padding-left: 1rem;
    overflow: hidden;
    color: #c5cae9;
    line-height: 1.5rem;
}

.d__navmenu__nav__preface__cover__title {
    font-size: larger;
}

.d__navmenu__nav__header {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 1rem 1rem 0;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
}

.d__navmenu__nav ul {
    list-style: none;
    color: rgba(0, 0, 0, 0.5);
}

.d__navmenu__nav ul li {
    position: relative;
    display: flex;
    align-items: center;
    vertical-align: middle;
    font-size: 0.875rem;
    height: 2.5rem;
}

.d__navmenu__nav ul li:hover {
    background-color: #3f51b5;
}

.d__navmenu__nav ul li a {
    display: flex;
    align-items: center;
    vertical-align: middle;
    padding: 0.5rem 1.5rem;
    width: 100%;
    color: rgba(255, 255, 255, 0.5);
}

.d__navmenu__nav ul li a.sep {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.d__navmenu__nav ul li a:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
}

.d__navmenu__nav ul li.navmore a:after {
    position: absolute;
    top: 25%;
    right: 0.5rem;
    content: "\203A";
}

.d__navmenu__nav ul li .bdg {
    position: absolute;
    top: 25%;
    right: 1.5rem;
    padding: 0.125rem 0.25em;
    border-radius: 2px;
    font-size: smaller;
}

.d__navmenu__nav .material-icons {
    margin-right: 0.5rem;
    vertical-align: middle;
    font-size: 1.25rem;
}

.d__navmenu__footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    color: rgba(255, 255, 255, 0.5);
}

.d__cont {
    max-width: 1600px;
}

.d__cont__panel {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: white;
}

.d__cont__panel__w {
    margin: 1rem;
}

.d--max .d__navmenu {
    width: 4.5rem;
}

.d--max .d__app {
    margin-left: 4.5rem;
}

.d--max .d__navmenu__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.d--max .d__navmenu__logo__label {
    display: none;
}

.d--max .d__navmenu__nav__header {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    font-size: 0.625rem;
}

.d--max .d__navmenu__nav__label {
    display: none;
}

.d--max .d__navmenu__nav ul li a {
    display: block;
    text-align: center;
}

.d--max .d__navmenu__nav ul li .bdg {
    top: inherit;
    right: 20%;
    bottom: 10%;
}

.d--max .d__navmenu__nav__preface__avatar {
    max-width: 2rem;
    max-height: 2rem;
    float: none;
    /*cannot use text-align because width*/
    margin: 0 auto;
}

.d--max .d__navmenu__nav__preface__cover {
    display: none;
}

@media (max-width: 767px) {
    .d__navmenu__logo__icon {
        cursor: pointer;
    }

    .mh__pri__navsec__item { /**/
        padding: 0.25rem;
    }

    .mh__pri__navpri__logo { /*Show the logo in nav*/
        display: inline-block;
    }

    .mh__pri__navpri__toggle { /*hide the toggle button in nav*/
        display: none;
    }

    /* Hide the side menu */
    .d--max .d__app,
    .d__app {
        margin-left: 0;
    }
    .d--max .d__navmenu,
    .d__navmenu {
        left: -16.25rem;
    }
    .d--max .d__navmenu--reveal,
    .d__navmenu--reveal {
        left: 0;
        z-index: 1001; /*1 more than backdrop*/
    }
    .d__navmenu__footer {
        display: none;
    }

    /* Override all side menu collapse settings */
    .d--max .d__navmenu {
        width: 16.25rem;
    }
    .d--max .d__navmenu__logo {
        display: flex;
        justify-content: inherit;
    }

    .d--max .d__navmenu__logo__label {
        display: inline-block;
    }

    .d--max .d__navmenu__nav__header {
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: inherit;
        font-size: 0.625rem;
    }

    .d--max .d__navmenu__nav__label {
        display: inline-block;
    }

    .d--max .d__navmenu__nav ul li a {
        display: flex;
        text-align: inherit;
    }

    .d--max .d__navmenu__nav ul li .bdg {
        top: 25%;
        right: 1.5rem;
        bottom: inherit;
    }

    .d--max .d__navmenu__nav__preface__avatar {
        max-width: 3rem;
        max-height: 3rem;
        float: left;
        margin: 0 auto;
    }

    .d--max .d__navmenu__nav__preface__cover {
        display: block;
    }

    .d--max .mh__pri {
        visibility: visible;
    }

    .d--max .mh__sec {
        visibility: hidden;
    }
}

/* Card Layout
 =============================================================================*/
.calay {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.calay__card {
    box-sizing: border-box;
    margin: 0.5rem;
}

@media screen and (min-width: 767px) {
    .calay {
        flex-direction: row;
    }

    .calay__card {
        flex: 0 1 calc(50% - 1rem);
    }
}

@media screen and (min-width: 979px) {
    .calay__card {
        flex: 0 1 calc(33% - 1rem);
    }
}

@media screen and (min-width: 1200px) {
    .calay__card {
        flex: 0 1 calc(24% - 1rem);
    }
}

/* Typography
 * These colours are the primary 500 colours specified in Material Design.
 * ---------------------------------------------------------------------------*/
.text-error     { color: #f44336 !important; }
.text-info      { color: #3f51b5 !important; }
.text-success   { color: #4caf50 !important; }
.text-warning   { color: #ff5722 !important; }
.msg-error {
    padding: 1.5rem;
    background-color: #f44336;
    color: #fff;
}
.msg-info {
    padding: 1.5rem;
    background-color: #3f51b5;
    color: #fff;
}
.msg-success {
    padding: 1.5rem;
    background-color: #4caf50;
    color: #fff;
}
.msg-warning {
    padding: 1.5rem;
    background-color: #ff5722;
    color: #fff;
}

.flat.clr-prim-0, .clr-prim-0 { color: #3f51b5 }	/* Primary color */
.flat.clr-prim-1, .clr-prim-1 { color: #c5cae9 }
.flat.clr-prim-2, .clr-prim-2 { color: #7986cb }
.flat.clr-prim-3, .clr-prim-3 { color: #303f9f }
.flat.clr-prim-4, .clr-prim-4 { color: #1a237e }

.flat.clr-p1, .clr-p1 { color: #c5cae9; }
.flat.clr-p2, .clr-p2 { color: #9fa8da; }
.flat.clr-p3, .clr-p3 { color: #7986cb; }
.flat.clr-p4, .clr-p4 { color: #5c6bc0; }
.flat.clr-p5, .clr-p5 { color: #3f51b5; }
.flat.clr-p6, .clr-p6 { color: #3949ab; }
.flat.clr-p7, .clr-p7 { color: #303f9f; }
.flat.clr-p8, .clr-p8 { color: #283593; }
.flat.clr-p9, .clr-p9 { color: #1a237e; }
.flat.clr-pa, .clr-pa { color: #8c9eff; }
.flat.clr-pb, .clr-pb { color: #536dfe; }
.flat.clr-pc, .clr-pc { color: #3d5afe; }
.flat.clr-pd, .clr-pd { color: #304ffe; }

.flat.clr-comp-0, .clr-comp-0 { color: #ff9800 }	/* Secondary color */
.flat.clr-comp-1, .clr-comp-1 { color: #ffe0b2 }
.flat.clr-comp-2, .clr-comp-2 { color: #ffb74d }
.flat.clr-comp-3, .clr-comp-3 { color: #f57c00 }
.flat.clr-comp-4, .clr-comp-4 { color: #e65100 }

.flat.clr-s1, .clr-s1 { color: #ffe0b2; }
.flat.clr-s2, .clr-s2 { color: #ffcc80; }
.flat.clr-s3, .clr-s3 { color: #ffb74d; }
.flat.clr-s4, .clr-s4 { color: #ffa726; }
.flat.clr-s5, .clr-s5 { color: #ff9800; }
.flat.clr-s6, .clr-s6 { color: #fb8c00; }
.flat.clr-s7, .clr-s7 { color: #f57c00; }
.flat.clr-s8, .clr-s8 { color: #ef6c00; }
.flat.clr-s9, .clr-s9 { color: #e65100; }
.flat.clr-sa, .clr-sa { color: #ffd180; }
.flat.clr-sb, .clr-sb { color: #ffab40; }
.flat.clr-sc, .clr-sc { color: #ff9100; }
.flat.clr-sd, .clr-sd { color: #ff6d00; }

td.clrb-prim-0, .raised.clrb-prim-0, .clrb-prim-0 { background-color: #3f51b5; color: #fff; }
td.clrb-prim-1, .raised.clrb-prim-1, .clrb-prim-1 { background-color: #c5cae9; color: rgba(0, 0, 0, 0.87); }
td.clrb-prim-2, .raised.clrb-prim-2, .clrb-prim-2 { background-color: #7986cb; color: rgba(0, 0, 0, 0.87); }
td.clrb-prim-3, .raised.clrb-prim-3, .clrb-prim-3 { background-color: #303f9f; color: #fff; }
td.clrb-prim-4, .raised.clrb-prim-4, .clrb-prim-4 { background-color: #1a237e; color: #fff; }

td.clrb-p1, .raised.clrb-p1, .clrb-p1 { background-color: #c5cae9; color: rgba(  0,   0,   0, 0.87); }
td.clrb-p2, .raised.clrb-p2, .clrb-p2 { background-color: #9fa8da; color: rgba(  0,   0,   0, 0.87); }
td.clrb-p3, .raised.clrb-p3, .clrb-p3 { background-color: #7986cb; color: rgba(  0,   0,   0, 0.87); }
td.clrb-p4, .raised.clrb-p4, .clrb-p4 { background-color: #5c6bc0; color: rgba(  0,   0,   0, 0.87); }
td.clrb-p5, .raised.clrb-p5, .clrb-p5 { background-color: #3f51b5; color: rgba(255, 255, 255, 1); }
td.clrb-p6, .raised.clrb-p6, .clrb-p6 { background-color: #3949ab; color: rgba(255, 255, 255, 1); }
td.clrb-p7, .raised.clrb-p7, .clrb-p7 { background-color: #303f9f; color: rgba(255, 255, 255, 1); }
td.clrb-p8, .raised.clrb-p8, .clrb-p8 { background-color: #283593; color: rgba(255, 255, 255, 1); }
td.clrb-p9, .raised.clrb-p9, .clrb-p9 { background-color: #1a237e; color: rgba(255, 255, 255, 1); }
td.clrb-pa, .raised.clrb-pa, .clrb-pa { background-color: #8c9eff; color: rgba(  0,   0,   0, 0.87); }
td.clrb-pb, .raised.clrb-pb, .clrb-pb { background-color: #536dfe; color: rgba(  0,   0,   0, 0.87); }
td.clrb-pc, .raised.clrb-pc, .clrb-pc { background-color: #3d5afe; color: rgba(255, 255, 255, 1); }
td.clrb-pd, .raised.clrb-pd, .clrb-pd { background-color: #304ffe; color: rgba(255, 255, 255, 1); }

td.clrb-comp-0, .raised.clrb-comp-0, .clrb-comp-0 { background-color: #ff9800; color: #fff; }
td.clrb-comp-1, .raised.clrb-comp-1, .clrb-comp-1 { background-color: #ffe0b2; color: rgba(0, 0, 0, 0.87); }
td.clrb-comp-2, .raised.clrb-comp-2, .clrb-comp-2 { background-color: #ffb74d; color: rgba(0, 0, 0, 0.87); }
td.clrb-comp-3, .raised.clrb-comp-3, .clrb-comp-3 { background-color: #f57c00; color: #fff; }
td.clrb-comp-4, .raised.clrb-comp-4, .clrb-comp-4 { background-color: #e65100; color: #fff; }

td.clrb-s1, .raised.clrb-s1, .clrb-s1 { background-color: #ffe0b2; color: rgba(  0,   0,   0, 0.87); }
td.clrb-s2, .raised.clrb-s2, .clrb-s2 { background-color: #ffcc80; color: rgba(  0,   0,   0, 0.87); }
td.clrb-s3, .raised.clrb-s3, .clrb-s3 { background-color: #ffb74d; color: rgba(  0,   0,   0, 0.87); }
td.clrb-s4, .raised.clrb-s4, .clrb-s4 { background-color: #ffa726; color: rgba(  0,   0,   0, 0.87); }
td.clrb-s5, .raised.clrb-s5, .clrb-s5 { background-color: #ff9800; color: rgba(255, 255, 255, 1); }
td.clrb-s6, .raised.clrb-s6, .clrb-s6 { background-color: #fb8c00; color: rgba(255, 255, 255, 1); }
td.clrb-s7, .raised.clrb-s7, .clrb-s7 { background-color: #f57c00; color: rgba(255, 255, 255, 1); }
td.clrb-s8, .raised.clrb-s8, .clrb-s8 { background-color: #ef6c00; color: rgba(255, 255, 255, 1); }
td.clrb-s9, .raised.clrb-s9, .clrb-s9 { background-color: #e65100; color: rgba(255, 255, 255, 1); }
td.clrb-sa, .raised.clrb-sa, .clrb-sa { background-color: #ffd180; color: rgba(  0,   0,   0, 0.87); }
td.clrb-sb, .raised.clrb-sb, .clrb-sb { background-color: #ffab40; color: rgba(  0,   0,   0, 0.87); }
td.clrb-sc, .raised.clrb-sc, .clrb-sc { background-color: #ff9100; color: rgba(255, 255, 255, 1); }
td.clrb-sd, .raised.clrb-sd, .clrb-sd { background-color: #ff6d00; color: rgba(255, 255, 255, 1); }

.clr-prim-1.flat:hover, .clrb-prim-1.raised:hover { background-color: #1a237e; }
.clr-prim-2.flat:hover, .clrb-prim-2.raised:hover { background-color: #c5cae9; }
.clr-prim-0.flat:hover, .clrb-prim-0.raised:hover { background-color: #7986cb; }
.clr-prim-3.flat:hover, .clrb-prim-3.raised:hover { background-color: #3f51b5; }
.clr-prim-4.flat:hover, .clrb-prim-4.raised:hover { background-color: #303f9f; }

.clr-p1.flat:hover, .clrb-p1.raised:hover { background-color: #8c9eff; color: rgba(0, 0, 0, 0.7); }
.clr-p2.flat:hover, .clrb-p2.raised:hover { background-color: #536dfe; color: rgba(0, 0, 0, 0.7); }
.clr-p3.flat:hover, .clrb-p3.raised:hover { background-color: #3d5afe; color: rgba(0, 0, 0, 0.7); }
.clr-p4.flat:hover, .clrb-p4.raised:hover { background-color: #3d5afe; color: rgba(0, 0, 0, 0.7); }
.clr-p5.flat:hover, .clrb-p5.raised:hover { background-color: #304ffe; color: rgba(0, 0, 0, 0.7); }
.clr-p6.flat:hover, .clrb-p6.raised:hover { background-color: #304ffe; color: rgba(0, 0, 0, 0.7); }
.clr-p7.flat:hover, .clrb-p7.raised:hover { background-color: #304ffe; color: rgba(0, 0, 0, 0.7); }
.clr-p8.flat:hover, .clrb-p8.raised:hover { background-color: #304ffe; color: rgba(0, 0, 0, 0.7); }
.clr-p9.flat:hover, .clrb-p9.raised:hover { background-color: #304ffe; color: rgba(0, 0, 0, 0.7); }

.clrb-prim-0.raised[disabled]:hover, .clrb-prim-0.raised.disabled:hover { background-color: #3f51b5; }
.clrb-prim-1.raised[disabled]:hover, .clrb-prim-1.raised.disabled:hover { background-color: #c5cae9; }
.clrb-prim-2.raised[disabled]:hover, .clrb-prim-2.raised.disabled:hover { background-color: #7986cb; }
.clrb-prim-3.raised[disabled]:hover, .clrb-prim-3.raised.disabled:hover { background-color: #303f9f; }
.clrb-prim-4.raised[disabled]:hover, .clrb-prim-4.raised.disabled:hover { background-color: #1a237e; }

.clrb-p1.raised[disabled]:hover, .clrb-p1.raised.disabled:hover { background-color: #c5cae9; }
.clrb-p2.raised[disabled]:hover, .clrb-p2.raised.disabled:hover { background-color: #9fa8da; }
.clrb-p3.raised[disabled]:hover, .clrb-p3.raised.disabled:hover { background-color: #7986cb; }
.clrb-p4.raised[disabled]:hover, .clrb-p4.raised.disabled:hover { background-color: #5c6bc0; }
.clrb-p5.raised[disabled]:hover, .clrb-p5.raised.disabled:hover { background-color: #3f51b5; }
.clrb-p6.raised[disabled]:hover, .clrb-p6.raised.disabled:hover { background-color: #3949ab; }
.clrb-p7.raised[disabled]:hover, .clrb-p7.raised.disabled:hover { background-color: #303f9f; }
.clrb-p8.raised[disabled]:hover, .clrb-p8.raised.disabled:hover { background-color: #283593; }
.clrb-p9.raised[disabled]:hover, .clrb-p9.raised.disabled:hover { background-color: #1a237e; }
.clrb-pa.raised[disabled]:hover, .clrb-pa.raised.disabled:hover { background-color: #8c9eff; }
.clrb-pb.raised[disabled]:hover, .clrb-pb.raised.disabled:hover { background-color: #536dfe; }
.clrb-pc.raised[disabled]:hover, .clrb-pc.raised.disabled:hover { background-color: #3d5afe; }
.clrb-pd.raised[disabled]:hover, .clrb-pd.raised.disabled:hover { background-color: #304ffe; }

.clr-comp-1.flat:hover, .clrb-comp-1.raised:hover { background-color: #e65100; color: white; }
.clr-comp-2.flat:hover, .clrb-comp-2.raised:hover { background-color: #ffe0b2; }
.clr-comp-0.flat:hover, .clrb-comp-0.raised:hover { background-color: #ffb74d; }
.clr-comp-3.flat:hover, .clrb-comp-3.raised:hover { background-color: #ff9800; }
.clr-comp-4.flat:hover, .clrb-comp-4.raised:hover { background-color: #f57c00; }

.clr-s1.flat:hover, .clrb-s1.raised:hover { background-color: #ffd180; }
.clr-s2.flat:hover, .clrb-s2.raised:hover { background-color: #ffab40; }
.clr-s3.flat:hover, .clrb-s3.raised:hover { background-color: #ff9100; }
.clr-s4.flat:hover, .clrb-s4.raised:hover { background-color: #ff9100; }
.clr-s5.flat:hover, .clrb-s5.raised:hover { background-color: #ff6d00; }
.clr-s6.flat:hover, .clrb-s6.raised:hover { background-color: #ff6d00; }
.clr-s7.flat:hover, .clrb-s7.raised:hover { background-color: #ff6d00; }
.clr-s8.flat:hover, .clrb-s8.raised:hover { background-color: #ff6d00; }
.clr-s9.flat:hover, .clrb-s9.raised:hover { background-color: #ff6d00; }

.clrb-comp-0.raised[disabled]:hover, .clrb-comp-0.raised.disabled:hover { background-color: #ff9800; }
.clrb-comp-1.raised[disabled]:hover, .clrb-comp-1.raised.disabled:hover { background-color: #ffe0b2; }
.clrb-comp-2.raised[disabled]:hover, .clrb-comp-2.raised.disabled:hover { background-color: #ffb74d; }
.clrb-comp-3.raised[disabled]:hover, .clrb-comp-3.raised.disabled:hover { background-color: #f57c00; }
.clrb-comp-4.raised[disabled]:hover, .clrb-comp-4.raised.disabled:hover { background-color: #e65100; }

.clrb-s1.raised[disabled]:hover, .clrb-s1.raised.disabled:hover { background-color: #c5cae9; }
.clrb-s2.raised[disabled]:hover, .clrb-s2.raised.disabled:hover { background-color: #9fa8da; }
.clrb-s3.raised[disabled]:hover, .clrb-s3.raised.disabled:hover { background-color: #7986cb; }
.clrb-s4.raised[disabled]:hover, .clrb-s4.raised.disabled:hover { background-color: #5c6bc0; }
.clrb-s5.raised[disabled]:hover, .clrb-s5.raised.disabled:hover { background-color: #3f51b5; }
.clrb-s6.raised[disabled]:hover, .clrb-s6.raised.disabled:hover { background-color: #3949ab; }
.clrb-s7.raised[disabled]:hover, .clrb-s7.raised.disabled:hover { background-color: #303f9f; }
.clrb-s8.raised[disabled]:hover, .clrb-s8.raised.disabled:hover { background-color: #283593; }
.clrb-s9.raised[disabled]:hover, .clrb-s9.raised.disabled:hover { background-color: #1a237e; }
.clrb-sa.raised[disabled]:hover, .clrb-sa.raised.disabled:hover { background-color: #8c9eff; }
.clrb-sb.raised[disabled]:hover, .clrb-sb.raised.disabled:hover { background-color: #536dfe; }
.clrb-sc.raised[disabled]:hover, .clrb-sc.raised.disabled:hover { background-color: #3d5afe; }
.clrb-sd.raised[disabled]:hover, .clrb-sd.raised.disabled:hover { background-color: #304ffe; }

.dark, .lightb { color: #3d3e46; }
.darkb { background-color: #3d3e46; }
.light, .darkb { color: #f9f9fa; }
.lightb { background-color: #f9f9fa; }

.darkpri,
h1.darkpri,
h2.darkpri,
h3.darkpri,
h4.darkpri,
h5.darkpri,
h6.darkpri,
p.darkpri,
blockquote.darkpri,
figure.darkpri,
ol.darkpri,
ul.darkpri {
    color: rgba(0, 0, 0, 0.87);
}

.darksec,
h1.darksec,
h2.darksec,
h3.darksec,
h4.darksec,
h5.darksec,
h6.darksec,
p.darksec,
blockquote.darksec,
figure.darksec,
ol.darksec,
ul.darksec {
    color: rgba(0, 0, 0, 0.54);
}

.darkhint,
h1.darkhint,
h2.darkhint,
h3.darkhint,
h4.darkhint,
h5.darkhint,
h6.darkhint,
p.darkhint,
blockquote.darkhint,
figure.darkhint,
ol.darkhint,
ul.darkhint {
    color: rgba(0, 0, 0, 0.38);
}

.darkdiv,
h1.darkdiv,
h2.darkdiv,
h3.darkdiv,
h4.darkdiv,
h5.darkdiv,
h6.darkdiv,
p.darkdiv,
blockquote.darkdiv,
figure.darkdiv,
ol.darkdiv,
ul.darkdiv {
    color: rgba(0, 0, 0, 0.12);
}

.lightpri,
h1.lightpri,
h2.lightpri,
h3.lightpri,
h4.lightpri,
h5.lightpri,
h6.lightpri,
p.lightpri,
blockquote.lightpri,
figure.lightpri,
ol.lightpri,
ul.lightpri {
    color: rgba(255, 255, 255, 0.9);
}

.lightsec,
h1.lightsec,
h2.lightsec,
h3.lightsec,
h4.lightsec,
h5.lightsec,
h6.lightsec,
p.lightsec,
blockquote.lightsec,
figure.lightsec,
ol.lightsec,
ul.lightsec {
    color: rgba(255, 255, 255, 0.7);
}

.lighthint,
h1.lighthint,
h2.lighthint,
h3.lighthint,
h4.lighthint,
h5.lighthint,
h6.lighthint,
p.lighthint,
blockquote.lighthint,
figure.lighthint,
ol.lighthint,
ul.lighthint {
    color: rgba(255, 255, 255, 0.5);
}

.lightdiv,
h1.lightdiv,
h2.lightdiv,
h3.lightdiv,
h4.lightdiv,
h5.lightdiv,
h6.lightdiv,
p.lightdiv,
blockquote.lightdiv,
figure.lightdiv,
ol.lightdiv,
ul.lightdiv {
    color: rgba(255, 255, 255, 0.12);
}