@charset "UTF-8";

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto:400,300italic,300,400italic,500,500italic,700,700italic);
@import url(reset.css);
@import url(grid.css);

html {
    height:100%;
    font:400 10px/1 'Roboto', sans-serif;
    color:#444; }
body {
    font-size:1.2rem;
    background:#eeeded;
    height:100%; }
article {
    display:flex; }

h1 {
    font-size:2.4rem;
    line-height:4.8rem;
    font-weight:300; }
h2 {
    font-size:2rem;
    line-height:4rem;
    font-weight:300; }
h3 {
    font-size:1.8rem;
    line-height:3.6rem;
    font-weight:300; }
h4 {
    font-size:1.6rem;
    line-height:3.2rem;
    font-weight:500; }
h5 {
    font-size:1.4rem;
    line-height:2.8rem;
    font-weight:500; }
    h1 small, h2 small, h3 small, h4 small, h5 small {
        color:#888; }
p {
    font-size:1.4rem;
    line-height:2.8rem;
    color:#666666; }
a {
    color:#2574A9;
    text-decoration:none; }
blockquote {
    display:block;
    background:#CFD8DC;
    padding:1rem 2rem;
    font-size:1.8rem;
    line-height:3.6rem;
    font-weight:300;
    color:#555;
    border-radius:4px;
    border-left:4px solid #78909C; }
    blockquote cite {
        display:block;
        margin-left:2rem;
        font-size:1.5rem;
        line-height:3rem;
        color:#777; }
address {
    font-size:1.4rem;
    line-height:2.2rem; }
code {
    background:#E3F2FD;
    padding:2px;
    border:1px solid #BBDEFB;
    border-radius:2px;
    color:#757575;
    font-family:'Source Code Pro', monospace;
    font-size:1.3rem; }
    pre code {
        display:block;
        box-sizing:border-box;
        padding:0 2rem;
        background:#FAFAFA;
        border:1px solid #E0E0E0;
        font-size:1.3rem;
        line-height:1.8rem; }
ul, ol {
    font-size:1.4rem;
    line-height:2.4rem; }
li { }

/**
 * Buttons
 */
button, .button {
    display:block;
    border-radius:2px;
    border:transparent;
    font-size:1.4rem;
    margin-bottom:1.4rem;
    padding:1rem 1.2rem;
    cursor:pointer;
    text-align:center; }
    button.small, .button.small {
        display:block;
        font-size:1.3rem;
        line-height:1.4;
        margin:0;
        padding:0.3rem 0.8rem; }
    button.inline, .button.inline {
        display:inline-block; }
    button .fa, .button .fa {
        margin-right:0.7rem; }
    button.selected, .button.selected {
        background:repeating-linear-gradient(-45deg, #EEEEEE, #EEEEEE 10px, #E0E0E0 10px, #E0E0E0 20px);
        border:1px solid #BDBDBD; }

    button.primary, .button.primary {
        color:#fff;
        background:#42A5F5; }
        button.primary:hover, .button.primary:hover {
            background:#64B5F6; }
    button.success, .button.success {
        color:#fff;
        background:#66BB6A; }
        button.success:hover, .button.success:hover {
            background:#81C784; }
    button.info, .button.info {
        color:#fff;
        background:#26C6DA; }
        button.info:hover, .button.info:hover {
            background:#4DD0E1; }
    button.warning, .button.warning {
        color:#fff;
        background:#FFCA28; }
        button.warning:hover, .button.warning:hover {
            background:#FFD54F; }
    button.danger, .button.danger {
        color:#fff;
        background:#FF7043; }
        button.danger:hover, .button.danger:hover {
            background:#FF8A65; }
    button.basic, .button.basic {
        color:#fff;
        background:#78909C; }
        button.basic:hover, .button.basic:hover {
            background:#90A4AE; }
    button.clear, .button.clear {
        background:none; }
        button.clear:hover, .button.clear:hover {}
.button-bar {
    list-style:none;
    margin:0;
    font-size:0;
    line-height:1;
    display:flex;
    align-items:stretch; }
    .button-bar.block {
        margin-bottom:1.4rem; }
    .button-bar li {
        display:inline-block; }
        .button-bar li button, .button-bar li .button {
            border-radius:0px;
            margin:0; }
        .button-bar li:first-child button, .button-bar li:first-child .button {
            border-radius:2px 0 0 2px; }
        .button-bar li:last-child button, .button-bar li:last-child .button {
            border-radius:0 2px 2px 0; }
    .button-bar li .spacer {
        display:inline-block;
        width:2rem;
        height:100%;
        background:#616161; }

/**
 * Header
 */
header {
    background:#1565C0;
    display:flex;
    justify-content:space-between; }
    header .logo {
        display:inline-block;
        padding:1rem 2rem; }
        header .logo a {
            color:#fafafa;
            font-size:2.5rem;
            line-height:3.2rem;
            font-weight:500;
            letter-spacing:0.1rem;
            text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2); }
        header .logo .tagline {
            display:block;
            color:#E0E0E0;
            font-size:1.5rem;
            line-height:2.2rem;
            font-weight:300; }
.account-actions {
    float:right;
    display:flex;
    justify-content:right;
    align-items:center;
    margin:0 2rem; }
    .account-actions ul {
        list-style:none;
        color:#fafafa;
        display:block;
        margin:0 4rem; }
        .account-actions li {
            display:inline-block;
            padding-right:2rem; }
            .account-actions li:last-child {
                padding:0; }
        .account-actions li a {
            color:#BBDEFB; }
        .profile-link:before {
            font-family:FontAwesome;
            content:'\f007';
            padding-right:0.5rem; }
        .account-link:after {
            font-family:FontAwesome;
            content:'\f0d7';
            padding-left:0.5rem;
            color:#424242; }
    .account-actions button {
        box-shadow:none;
        background:none;
        color:#fafafa; }
        .account-actions button:hover {
            color:#eee; }

/**
 * Sidebar
 */
aside.sidebar {
    width:275px;
    background:#616161;
    box-shadow:inset -1px 2px 2px rgba(0, 0, 0, 0.1); }
    .sidebar nav {
        display:block;
        padding:1rem 0; }
        .sidebar ul {
            list-style:none;
            margin:0; }
        .sidebar ul li {
            font-size:1.6rem;
            line-height:2.2rem;
            font-weight:300;
            position:relative; }
            .sidebar ul li.collapsed a:after {
                position:absolute;
                right:1rem;
                font-family:FontAwesome;
                content:'\f105';
                color:#EEEEEE; }
            .sidebar ul li a {
                color:#E0E0E0;
                display:block;
                width:100%;
                padding:1rem 2rem;
                box-sizing:border-box; }
                .sidebar ul li a:hover {
                    color:#f3f3f3;
                    transition:color ease 0.3s; }
                .sidebar ul li a:hover:before {
                    content:'';
                    position:absolute;
                    left:0;
                    width:0;
                    height:0;
                    border-top:1rem solid transparent;
                    border-bottom:1rem solid transparent;
                    border-left:1rem solid #757575; }
                    .sidebar ul ul li a:hover:before {
                        border-left:1rem solid #616161; }
                .sidebar ul li a.current {
                    color:#64B5F6;
                    font-weight:500;
                    letter-spacing:0.1rem;
                    text-transform:uppercase;
                    cursor:inherit; }
                    .sidebar ul li a.current:after {
                        content:'';
                        position:absolute;
                        right:0;
                        width:0;
                        height:0;
                        border-top:1rem solid transparent;
                        border-bottom:1rem solid transparent;
                        border-right:1rem solid #eeeded; }
                    .sidebar ul li a.current:hover:before {
                        border:none; }
            .sidebar ul li a.active {
                background:#eeeded;
                color:#2196F3;
                text-shadow:0 1px 1px rgba(0, 0, 0, 0.1); }
        .sidebar ul ul {
            display:none;
            background:#424242;
            box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1); }
            .sidebar ul li.expanded ul {
                display:inherit; }
        .sidebar ul li li {
            font-size:1.4rem;
            line-height:1.8rem;
            font-weight:400; }
            .sidebar ul li li a {
                padding-left:3rem; }

/**
 * Content
 */
.content {
    min-height:100vh;
    background:#eeeded;
    flex-grow:2; }

/**
 * Layout Panels
 */
.panel {
    box-sizing:border-box;
    background:#fff;
    border:1px solid #E0E0E0;
    border-radius:2px;
    margin:1.5rem;
    padding:1rem 2rem; }
.panel > h1, .panel > h2, .panel > h3, .panel > h4, .panel > h5 {
    margin:0; }
.panel-title > h1, .panel-title > h2, .panel-title > h3, .panel-title > h4, .panel-title > h5 {
    margin:0; }
    .panel-title.title-underline {
        border-bottom:1px solid #e0e0e0;
        margin-bottom:1.5rem; }

.panel-head {
    background:#fff;
    overflow:hidden;
    box-sizing:border-box;
    padding:1rem 2rem;
    border-bottom:1px solid #E0E0E0;
    position:relative; }
    .panel-head h1 {
        margin:0; }

.panel-tabs {
    overflow:hidden;
    box-sizing:border-box;
    padding:2rem 2rem 0 2rem;
    position:relative;
    background:#E0E0E0; }
    .panel-tabs ul {
        margin:0;
        list-style:none; }
    .panel-tabs li {
        display:inline-block;
        border:1px solid #9E9E9E;
        border-bottom:none;
        border-radius:2px 2px 0 0;
        box-shadow:0 -1px 2px rgba(0, 0, 0, 0.3); }
    .panel-tabs a {
        display:block;
        padding:1rem 2rem; }
        .panel-tabs a.current {
            background:#eeeded;
            font-weight:600; }

/**
 * Breadcrumbs
 */
.breadcrumbs {
    list-style:none;
    margin:0; }
    .breadcrumbs li {
        font-size:1.3rem;
        line-height:2.2rem;
        display:inline-block; }
        .breadcrumbs li:before {
            content:'/';
            color:#9E9E9E; }
            .breadcrumbs li:first-child:before {
                content:''; }
        .breadcrumbs li a {
            padding:0 1rem; }
            .breadcrumbs li:first-child a {
                padding:0 1rem 0 0; }
        .breadcrumbs li span {
            padding:0 0 0 1rem; }
        .breadcrumbs li a:hover {}

/**
 * Tables
 */
.table {
    width:100%;
    margin-bottom:1rem; }
    .table thead {
        font-size:1.8rem;
        border-bottom:4px solid #1976D2; }
        .table thead tr {}
        .table th {
            text-align:left;
            padding:5px 0;
            font-weight:300; }
            .table th.sortable {
                cursor:pointer; }
                .table th.sortable:after {
                    font-family:FontAwesome;
                    content:'\f0dc';
                    font-size:1.3rem;
                    position:relative;
                    top:-1px;
                    left:5px;
                    color:#777; }
                    .table th.sortable.asc:after {
                        content:'\f0de'; }
                    .table th.sortable.desc:after {
                        content:'\f0dd'; }
    .table tbody {
        font-size:1.3rem;
        line-height:2rem; }
        .table tbody tr {}
            .table tbody tr:nth-child(odd) {
                background:#f3f3f3; }
        .table tbody tr.primary {
            background:#E3F2FD; }
        .table tbody tr.success {
            background:#E8F5E9; }
        .table tbody tr.info {
            background:#E0F7FA; }
        .table tbody tr.warning {
            background:#FFF8E1; }
        .table tbody tr.danger {
            background:#FBE9E7; }
        .table td {
            padding:7px 0; }
            .table td:first-child, .table th:first-child {
                padding-left:10px; }
            .table td:last-child, .table th:last-child {
                padding-right:10px; }
    .table label {
        margin:0;
        font-weight:400; }
.asc:after {
    font-family:FontAwesome;
    font-size:1.3rem;
    content:'\f0d7';
    padding-left:5px; }
.desc:after {
    font-family:FontAwesome;
    font-size:1.3rem;
    content:'\f0d8';
    padding-left:5px; }

/**
 * Badges
 */
.badge {
    font-size:1.2rem;
    display:inline-block;
    padding:5px;
    margin:-3px 0;
    border-radius:50%; }
    .badge.squared {
        padding:3px 5px;
        border-radius:2px;
        margin:0; }
    .badge.primary {
        color:#fff;
        background:#42A5F5; }
        .primary .badge.primary {
            background:#1976D2; }
    .badge.success {
        color:#fff;
        background:#66BB6A; }
        .success .badge.success {
            background:#388E3C; }
    .badge.info {
        color:#fff;
        background:#26C6DA; }
        .info .badge.info {
            background:#0097A7; }
    .badge.warning {
        color:#fff;
        background:#FFCA28; }
        .warning .badge.warning {
            background:#FFA000; }
    .badge.danger {
        color:#fff;
        background:#FF7043; }
        .danger .badge.danger {
            background:#E64A19; }
    .badge.basic {
        color:#fff;
        background:#78909C; }
        .basic .badge.basic {
            background:#616161; }
    .badge.clear {
        background:none; }
        .clear .badge.clear {
            background:#EEEEEE; }

/**
 * Notifications
 */
.notifications {}
    .notifications > div {
        position:fixed; }
    .notifications .top {
        top:0;
        left:0;
        width:100%; }
        .notifications .top-left {
            top:0;
            left:0;
            width:25%; }
        .notifications .top-right {
            top:0;
            right:0;
            width:25%; }
        .notifications .top-center {
            top:0;
            width:25%;
            left:50%;
            margin-left:-12.5%; }
    .notifications .bottom {
        bottom:0;
        left:0;
        width:100%; }
        .notifications .bottom-left {
            bottom:0;
            left:0;
            width:25%; }
        .notifications .bottom-right {
            bottom:0;
            right:0;
            width:25%; }
        .notifications .bottom-center {
            bottom:0;
            width:25%;
            left:50%;
            margin-left:-12.5%; }
    .notification {
        display:block;
        position:relative;
        margin:1.5rem;
        font-size:1.6rem;
        line-height:2.6rem;
        padding:2rem 3rem;
        border-radius:2px;
        box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
        cursor:pointer; }
        .notification:after {
            position:absolute;
            top:0.3rem;
            right:0.5rem;
            font-family:FontAwesome;
            line-height:1;
            content:'\f00d';
            color:rgba(0, 0, 0, 0.3); }
        .notification.primary {
            color:#fff;
            background:#42A5F5; }
        .notification.success {
            color:#fff;
            background:#66BB6A; }
        .notification.info {
            color:#fff;
            background:#26C6DA; }
        .notification.warning {
            color:#fff;
            background:#FFCA28; }
        .notification.danger {
            color:#fff;
            background:#FF7043; }
        .notification.basic {
            color:#fff;
            background:#78909C; }
    /* Animations */
    .slide-enter {
        bottom:-50px;
        opacity:0; }
    .slide-enter-active {
        transition:all 0.3s ease; }
    .slide-enter-to {
        bottom:0;
        opacity:1;
        transition:all 0.3s ease; }
    .slide-leave {
        opacity:1; }
    .slide-leave-active {
        transition:all 0.3s ease; }
    .slide-leave-to {
        opacity:0; }

/**
 * Forms
 */
label {
    font-size:1.4rem;
    font-weight:500;
    display:block;
    margin-bottom:1.5rem; }
    label .help {
        font-weight:300;
        font-size:1.3rem;
        display:block;
        padding:1rem 0; }
input, textarea, select {
    display:block;
    margin-top:0.7rem;
    font-size:1.3rem;
    font-weight:400;
    line-height:1.6rem;
    color:#444;
    min-width:250px; }
    input.inline, textarea.inline, select.inline {
        display:inline-block; }
    input, textarea {
        border:1px solid #aaa;
        padding:6px; }
    select {
        border:1px solid #aaa;
        padding:4px; }
        input:focus, textarea:focus, input:checked {
            border:1px solid #ccc;
            box-shadow:0 1px 0 #1BBC9B, 0 0 2px rgba(0, 0, 0, 0.15); }
input[type="checkbox"], input[type="radio"] {
    min-width:auto;
    display:inline-block;
    vertical-align:text-bottom;
    margin-left:0; }
    input[type="checkbox"] {
        margin-right:7px; }
    input[type="radio"] {
        vertical-align:bottom; }
label .error {
    color:#EF4836;
    font-weight:400;
    display:block;
    margin-top:5px;
    font-size:1.3rem; }
textarea.md-editor {
    width:100%; }


/**
 * SyneWav Demo Styles
 * The rest of the stylesheet is only for that
 */
.device-list {
    display:block;
    margin:2rem 0; }
    .device-list .row {
        margin-bottom:2rem; }
    .device-summary {
        display:block;
        padding:1rem;
        background:#ECEFF1;
        text-align:center;
        border-radius:2px;
        border:1px solid rgba(0, 0, 0, 0.05);
        box-shadow:0 3px 3px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2); }
    .device-summary h3 {
        line-height:2rem;
        margin:1rem 0 0.5rem 0; }
        .device-summary h3 .fa {
            color:#0D47A1; }
    .device-summary p {
        line-height:1.6rem;
        margin:1rem 0 1rem 0;
        color:#777; }
        .device-summary.alert {
            background:#FFE0B2; }
            .device-summary.alert p {
                color:#F57C00; }

.note-editor {
    padding:0;
    margin:0.7rem 0 1.3rem 0; }
.note-toolbar {
    display:block;
    background:#f5f5f5; }
    .note-btn-group {
        display:inline-block; }
    .note-toolbar button {
        display:inline-block;
        margin-bottom:0;
        background:#FAFAFA;
        padding:0.7rem 1rem;
        border:1px solid rgba(0, 0, 0, 0.1); }
    .note-toolbar .dropdown-menu {
        display:none; }
    .note-popover {
        display:none; }


.panel-clear {
    box-sizing:border-box;
    margin:15px;
    margin-bottom:0; }
    .panel-clear button {
        margin-bottom:0; }
.panel-clear .btn-large {
    display:inline-block;
    margin-right:10px; }
    .panel-clear .panel {
        margin:0; }

    .main-actions button, .main-actions .button {
        display:inline-block;
        margin-bottom:0; }

/*
    Auth
 */
.auth {
    width:100%;
    height:100%;
    position:absolute;
    background:#eeeded;
    display:flex; }
.auth .pane {
    margin:auto;
    position:relative;
    text-align:center; }
    .auth .pane form {
        border-radius:4px;
        background:#fff;
        text-align:left;
        padding:2.5rem;
        box-shadow:0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); }
    .auth .pane h1 {
        margin-top:0;
        margin-bottom:1.5rem; }
    .auth .pane p {
        margin-bottom:0; }
    .auth .logo {
        margin-bottom:1.5rem; }
    .shiny-metal-ass {
        right:-10px;
        bottom:-60px;
        position:absolute; }
/*
    Auth Forms
 */
.auth label {
    font-size:1.4rem;
    font-weight:500;
    display:block;
    margin-bottom:1.5rem; }
.auth input, .auth textarea {
    display:block;
    margin-top:0.2rem;
    font-size:1.3rem;
    font-weight:400;
    line-height:1.6rem;
    color:#555;
    min-width:250px; }
.auth input[type="text"], .auth input[type="password"], .auth textarea {
    border:none;
    border-bottom:1px solid #ddd;
    padding:6px 0;
    transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
    .auth input[type="text"]:focus, .auth input[type="password"]:focus, .auth textarea:focus {
        border-color:#4CAF50;
        box-shadow:0 1px 0 #4CAF50; }
.auth input[type="checkbox"] {
    min-width:auto;
    display:inline-block;
    vertical-align:text-bottom;
    margin-left:0; }
    .auth .auth-error {
        font-style:italic;
        margin-top:0.5rem;
        color:#EF4836; }
    .auth .pane .auth-success {
        font-style:italic;
        margin-bottom:1rem;
        color:#66CC99; }
.auth .custom-file {
    display:none; }

.panel-head nav {
    position:absolute;
    right:2rem;
    top:2.3rem; }
    .panel-head nav ul {
        list-style:none; }
        .panel-head nav ul li {}
    .panel-head nav a {
        display:block;
        font-size:1.3rem;
        line-height:1.4;
        margin:0;
        padding:0.3rem 0.8rem; }
.align-right {
    text-align: right;
}

/*
    Modals
 */
.modal-overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    z-index:1000;
    display:flex;
    background:rgba(0, 0, 0, 0.5); }
.modal-container {
    margin:auto;
    display:flex;
    flex-direction:column; }
.modal {
    background:#fff;
    position:relative;
    padding:10px 20px;
    border:1px solid transparent;
    border-radius:4px;
    min-width:25%;
    min-height:25%;
    box-shadow:0 1px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2); }
    .fly-in-enter .modal, .fly-in-leave-to .modal {
        bottom:-20px;
        opacity:0; }
        .fly-in-leave-to {
            opacity:0; }
        .fly-in-enter-to .modal, .fly-in-leave .modal {
            bottom:0;
            opacity:1; }
        .fly-in-leave {
            opacity:1; }
        .fly-in-enter-active .modal, .fly-in-leave-active .modal, .fly-in-enter-active, .fly-in-leave-active {
            transition:opacity 0.2s ease, bottom 0.5s ease; }
.modal-title {
    font-size:1.8rem;
    line-height:2.2rem;
    margin:1rem 0 1.8rem 0;
    border-bottom:4px solid #4183D7;
    flex-grow:0; }
    .modal-title h2 {
        margin-top:0;
        font-weight:300; }
.modal-content {
    flex-grow:2; }
    .modal-close {
        font-family:FontAwesome;
        position:absolute;
        top:-40px;
        right:-40px;
        padding:20px;
        color:#fff;
        cursor:pointer; }
    .modal-close:hover {
        color:#f3f3f3; }
.modal-actions {
    width:100%;
    flex-grow:0;
    padding-top:1rem; }
    .modal-actions button {
        display:inline-block;
        margin:0; }
    .modal-actions button.tertiary {
        float:right; }
.modal-sub-content {
    text-align:right;
    margin:1rem; }
.modal-sub-content a {
    color:#BDBDBD;
    font-size:1.4rem; }