@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(components/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(components/fonts/MaterialIcons-Regular.woff2) format('woff2'),
       url(components/fonts/MaterialIcons-Regular.woff) format('woff'),
       url(components/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: RobotoDraft;
    font-style: normal;
    font-weight: 400;
    src: local('RobotoDraft'), local('RobotoDraft-Regular'), url(components/fonts/Roboto.woff2) format('woff2');
}

@font-face {
    font-family: MyriadProCond;
    font-style: normal;
    font-weight: 400;
    src: local('MyriadPro-Cond'), url(components/fonts/MyriadPro-Cond.ttf) format('ttf'), url(components/fonts/MyriadPro-Cond.woff) format('woff');
}

@font-face {
    font-family: MyriadPro;
    font-style: normal;
    font-weight: 400;
    src: local('MyriadProRegular'), url(components/fonts/MyriadProRegular.ttf) format('ttf'), url(components/fonts/MyriadProRegular.woff) format('woff');
}

:root {
    --snot: #AEC511;
    --bg-bright: #F3F4F8;
    --bg: #E7E8ED;
    --bg-dark: #484C4D;
    --txt: #45525A;
    --input-border: #D1D2D6;
    --nav-bg-top: rgb(80, 80, 80);
    --nav-bg-bottom: rgb(50, 50, 50);
    --dark-grey-blue: #345a65;
    --light-grey-blue: #78ABB9;
    --slate-grey: #666674;
}

input, select, textarea {
    background-color: #F3F4F8;
    border: 1px solid #D1D2D6;
    border-radius: 5px;
    padding: 5px 10px;
    color: #345a65;
}

button {
    border-width: 0px;
    border-radius: 3px;
    padding: 5px 10px;
    color: #45525A;
    background: linear-gradient(to bottom, #f5f5f5, #e2e2e2);
    box-shadow: 2px 2px 2px #bfbfbf;
}

button.btn-green {
    color: #FFF;
    background: linear-gradient(to bottom, #95be21, #72a919);
}

.toast-button {
    padding: 5px 10px;
}

body, input, button, td, th, select, textarea {
    font-family: MyriadProCond;
    font-size: 1.11em;
}

html {
    background-color: #E7E8ED;
}

body {
    background-color: #E7E8ED;
}

a {
    text-decoration: none;
}

.reg {
    font-family: MyriadPro;
}

div.lkd-nav {
    background-image: url('components/img/nav-bg.png');
    height: 49px;
}

div.lkd-nav-logo {
    background-image: url('components/img/nav-autro.png');
    background-repeat: no-repeat;
    background-position: center center;
    text-align: right;
    width: 94px;
    height: 49px;
}

div.lkd-nav-divider {
    width: 2px;
    height: 49px;
    background-image: url('components/img/nav-divider.png');
    background-repeat: no-repeat;
    background-position: center center;
}

div.lkd-nav-section {
    color: #C4C3C8;
    margin-top: -5px;
    text-align: center;
    width: 150px;
}

div.lkd-nav-section > a {
    color: #C4C3C8;
}

div.lkd-left-nav {
    width: 94px;
    background-color: #F3F4F8;
    border-right: 2px solid #dcdde2;
}

div.lkd-left-nav-section {
    width: 94px;
    height: 74px;
    border-bottom: 1px solid #dcdde2;
    color: #345a65;
    cursor: pointer;
}

div.lkd-left-nav-section.active {
    background-color: #E7E8ED;
    background-image: url('components/img/nav-active-bg.png');
    font-weight: bold;
}

div.lkd-left-nav-section.active:hover {
    text-decoration: underline;
}

div.lkd-left-nav-section:hover {
    background-color: #E7E8ED;
/*    text-shadow: -1px -1px 3px #345a65, 1px 1px 3px #345a65,
                  1px -1px 3px #345a65, -1px 1px 3px #345a65;*/
}

div.layer-contents {
    padding: 0px 70px 70px 70px;
}

div.layer-headline {
    color: #345a65;
    border-bottom: 1px solid #d6d8dd;
    height: 74px;
    vertical-align: middle;
    padding-left: 20px;
}

div.layer-headline-spacer {
    border-top: 1px solid #F3F4F8;
    margin-bottom: 20px;
}

div.frame {
    border: 2px solid #496b75;
    border-radius: 3px;
    background-color: #FFF;
    box-shadow: 0px 0px 5px #30545e;
}

div.frame-header {
    padding: 10px 20px;
    background: linear-gradient(to bottom, #496b75, #345a65);
    color: #FFF;
    font-size: 1.3em;
}

div.frame-body {
    padding: 20px;
}

div.footer {
    background-color: #323232;
    height: 200px;
}

div.form-label {
    text-align: right;
    padding-right: 20px;
}

div.form-row {
    margin-bottom: 10px;
}

div.kit {
    background-color: #f3f4f8;
    border: 1px solid #dcdde2;
    box-shadow: 1px 1px 2px rgba(155, 154, 155, 0.8);
    padding: 20px;
    margin-bottom: 20px;
}

div.kit-header {
    color: #345a65;
    cursor: pointer;
}

div.kit-body {
    color: #757575;
    padding-top: 10px;
    border-top: 1px solid #dcdde2;
}

div.feature {
    cursor: pointer;
    font-family: MyriadPro;
    font-size: 0.85em;
}

.nav-bullet {
    margin-right: 7px;
}

div.nav-bullet {
    background: url('components/img/nav-bullet.png');
    width: 11px;
    height: 11px;
}

div.nav-bullet:hover {
    background: url('components/img/nav-bullet-inactive.png');
    width: 11px;
    height: 11px;
}

.order-kit {
    background-color: yellow;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    /*width: 1em;
    height: 1em;*/
    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';
}

md-toast {
    position: fixed;
    border-radius: 3px;
    margin: 10px 10px 0px 0px;
    padding: 0px 20px;
    box-shadow: 2px 2px 2px #AAA;
}

md-toast.md-success-toast-theme {
    color: #2A2A2A;
    background-color: #CFF55A;
    background: linear-gradient(to bottom, hsl(75, 89%, 66%), hsl(75, 89%, 45%));
}

md-toast.md-warning-toast-theme {
    color: #2A2A2A;
    background-color: #FFC34D;
    background: linear-gradient(to bottom, hsl(40, 100%, 65%), hsl(40, 100%, 50%));
}

md-toast.md-error-toast-theme {
    font-family: MyriadPro;
    font-size: 0.8em;
    color: white;
    font-weight: 600;
    background-color: #F55A5F;
    background: linear-gradient(to bottom, hsl(358, 89%, 66%), hsl(358, 89%, 45%));
}

md-whiteframe {
    background-color: #FFF;
    padding: 10px;
}

fieldset {
    border-style: solid;
    border-width: 1px;
}

table, th, td {
    border: 1px solid #c9c9cb;
    border-collapse: collapse;
    background-color: #f6f6f6;
}

th {
    background-color: #ebebeb;
    padding: 5px 10px;
}

.hidden {
    display: none;
}

div.grey-frame {
    background-color: #efefef;
    border: 1px solid #c9c9cb;
    padding: 20px;
}

tr.error-row > td {
    background-color: #FE8080;
    background: linear-gradient(to bottom, #FE8080, #F07070);
}

div.error-box {
    background-color: #FE8080;
    background: linear-gradient(to bottom, #FE8080, #F07070);
    border: 1px solid #EC5F5F;
    border-radius: 3px;
    box-shadow: 0px 0px 2px #50747e;
    margin-bottom: 20px;
    padding: 10px;
}