/* HTML5 ✰ Boilerplate
 * ==|== normalize ==========================================================
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%;-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;height:100%;overflow:hidden; overflow-y: scroll;}
body { margin: 0; font-size: 14px; line-height: 1.2; height:100%;}
body, button, input, select, textarea { font-family: 'Roboto', sans-serif; outline:none;;-webkit-appearance:none;border-radius:0;font-weight:300;letter-spacing:1.5px;}

::-moz-selection { background: #EE3331; color: #fff; text-shadow: none; }
::selection { background: #EE3331; color: #fff; text-shadow: none; }

::-webkit-input-placeholder {color:#888;}
:-moz-placeholder {color:#888;}
::-moz-placeholder {color:#888;}
:-ms-input-placeholder {color:#888;}
::-webkit-textarea-placeholder {color:#888;}
:-ms-textarea-placeholder {color:#888;}

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* ==|== primary styles =====================================================
   Author: Daniel Speer
   ========================================================================== */

body { background: #f7f7f7; color: #231F20; font-family: 'Roboto', sans-serif; font-weight:300;letter-spacing:1.5px;}

/* Standards */
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.hidden { display: none !important; visibility: hidden; }
.clearfix:after {content:"";display:table;clear:both;}
a {text-decoration:none;}
i {vertical-align:middle;}
.table {display:table;width:100%;height:100%;}
.cell {display:table-cell;vertical-align:middle;}

/* Message */
#success {padding:10px 15px;background:#dff0d8;color:#468847;margin-bottom:15px;}
#errors {padding:10px 15px;background:#ffe0e0;color:#EE3331;margin-bottom:15px;}
.content #success, .content #errors {margin:0 15px 15px;}

/* Font */
h1 {font-family: "Montserrat", sans-serif;font-weight:bold;font-size:26px;text-transform:uppercase;}
h2 {font-family: "Montserrat", sans-serif;font-weight:bold;font-size:22px;text-transform:uppercase;}
h3 {font-family: "Montserrat", sans-serif;font-weight:bold;font-size:18px;text-transform:uppercase;}
h4 {font-family: "Montserrat", sans-serif;font-weight:bold;font-size:14px;text-transform:uppercase;}

/* Error */
.error {width:600px;margin:12px auto;}
.error h3 {background:#fff;color:#231F20;border:1px solid #ddd;margin:0;padding:15px;}
.error h3 span {color:#EE3331;}
.error .top {font-size:12px;border-bottom:1px solid #ddd;padding:15px;font-weight:700;}
.error .top.exist {border-bottom:none;}
.error .message {padding:15px;font-size:12px;}
.error .message .important {font-weight:700;}
.error .message ul {list-style:none;margin:0;padding:0 0 0 15px;}
.error .message ul li {padding-bottom:10px;}

/* Login */
.login {width:400px;margin:12px auto;}
.login h3 {background:#fff;color:#231F20;border:1px solid #ddd;margin:0;padding:15px;}
.login h3 span {color:#EE3331;}
.login-inner {background:#fff;border:1px solid #ddd;border-top:none;}
.login-inner form {padding:15px;}
.login-inner .bottom {text-align:center;border-top:1px solid #ddd;padding:15px;font-size:12px;}
.login-inner .bottom p {margin:0;}
.login-inner .bottom a {color:#231F20;}
.login-inner .bottom a:hover {color:#EE3331;}

/* Form Elements */
.form {position:relative;margin-bottom:20px;}
.form.last {margin-bottom:0;}
.form input {border:none;border-bottom:1px solid #ddd;padding:8px 0;width:100%;background:#fff;}
.form select {border:none;border-bottom:1px solid #ddd;padding:8px 0;width:100%;background:#fff;}
.form textarea {border:none;border-bottom:1px solid #ddd;padding:8px 0;width:100%;background:#fff;}
.form button {border:none;padding:10px 15px;background:#231F20;color:#fff;}

/* Layout */
#app {width:100%;height:100%;}
#content {display:table;width:100%;table-layout:fixed;overflow:auto;height:100%;position:relative;}
#layout {display:table-row;height:100%;}
#main {display:table-cell;vertical-align:top;position:relative;border-right:1px solid #ddd;background:#fff;}

/* Sidebar */
#sidebar {width:200px;display:table-cell;vertical-align:top;overflow:hidden;position:relative;background:#fff;border-left:1px solid #ddd;border-right:1px solid #ddd;}
#sidebar h4 {margin:0;padding:15px;}
#sidebar h4 span.red {color:#EE3331;}
#sidebar .nav {white-space:nowrap;position:relative;z-index:999;}
#sidebar .nav .toggle {display:block;padding:10px 15px;color:#231F20;position:relative;}
#sidebar .nav .toggle .dot {display:block;width:6px;height:6px;border-radius:6px;border:1px solid #231F20;position:absolute;top:15px;right:15px;}
#sidebar .nav .toggle.active .dot {background:#EE3331;border:1px solid #EE3331;}
#sidebar .nav ul {display:none;list-style:none;padding:0;margin:0;}
#sidebar .nav ul li a {display:block;font-size:11px;color:#231F20;padding:8px 15px 8px 34px;}
#sidebar .nav ul li:hover a {color:#aaa;}
#sidebar .separator {background:#ddd;height:1px;margin:10px 0;}

#sidebar.closed {width:48px;overflow:visible;}
#sidebar.closed span.hide {display:none;}
#sidebar.closed .nav .toggle span {display:none;}
#sidebar.closed .nav .toggle i {font-size:22px;}
#sidebar.closed .nav:hover {width:188px;}
#sidebar.closed .nav:hover ul {display:block;position:absolute;right:0;width:140px;background:#231F20;top:10px;}
#sidebar.closed .nav:hover ul li a {padding:8px 15px;color:#C0BDBF;}

/* Header */
.header {background:#fff;border-bottom:1px solid #ddd;}
.header .user {float:right;list-style:none;margin:0;padding:0;}
.header .user li {position:relative;float:left;}
.header .user li a {display:block;padding:5px 15px;color:#231F20;}
.header .user li a span {color:#aaa;font-size:11px;}
.header .user li a .img {display:inline-block;width:30px;height:30px;border-radius:30px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
.header .user li a .name {display:inline-block;}
.header .user ul {display:none;list-style:none;padding:0;margin:0;background:#231F20;position:absolute;right:0;top:100%;width:42px;z-index:555;}
.header .user li:hover ul {display:block;}
.header .user ul li {float:none;}
.header .user ul li a {padding:11px 15px;color:#C0BDBF;font-size:16px;}

.header .menu-btn {position:relative;display:block;float:left;padding:21px 21px 22px;color:#231F20;}
.header .menu-btn:after {content:'\f3d5';font-family:'Ionicons';position:absolute;left:15px;top:8px;font-size:25px;}
.header .menu-btn.active:after {content:'\f3d6';}

/* Main */
#main .title h3 {background:#fff;margin:0;padding:15px;border-bottom:1px solid #ddd;margin-bottom:15px;}
#main .padded {padding:15px;position:relative;}
#main .padded.special {padding:10px 15px;}
#main .box {background:#fff;border:1px solid #ddd;margin-bottom:15px;}
#main .box.items {min-height:356px;}
#main .box h4 {background:#f7f7f7;margin:0;padding:15px;border-bottom:1px solid #ddd;}
#main .box p {margin:0;padding-bottom:10px;}
#main .box p:last-child {padding-bottom:0;}
#main .box p a {color:#EE3331;}
#main .box ul {list-style:none;padding:0;margin:0;}
#main .box ul li {margin:5px 0;}
#main .box ul li:hover {cursor:default;}
#main .box ul ul {margin-bottom:-5px;}
#main .box ul .left {float:left;margin-top:4px;max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#main .box ul .left span {font-style:italic;color:#aaa;}
#main .box ul .right {float:right;}
#main .box ul .right a {color:#231F20;font-size:18px;}
#main .box .divider {background:#ddd;height:1px;}
#main .box button {border:none;padding:10px 15px;background:#231F20;color:#fff;}
#main .box button.red {background:#EE3331;}
#main .box .btn {border:none;padding:10px 15px;background:#231F20;color:#fff;}
#main .box .uploader {width:100%;border:1px solid #ddd;}
#main .box .images {margin:0 -5px;}
#main .box .images .item {padding:0;}
#main .box .images li {padding:0 5px;}
#main .box .images li .img {border:1px solid #ddd;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}
#main .box .images li a {color:#231F20;font-size:18px;}

/* Invoices */
#main .box .invoice-category {font-style:italic;color:#aaa;}
#main .box a.delete {position:absolute;top:15px;right:15px;color:#231F20;font-size:18px;}

#main .box .amounts {margin:0 -15px;}
#main .box .amount {float:left;padding:0 15px;}
#main .box .amount span.title {font-family: "Montserrat", sans-serif;font-weight:bold;text-transform:uppercase;}

/* Tabs */
#main #tabs > ul {list-style:none;margin:0;padding:0;;border-bottom:1px solid #ddd;}
#main #tabs > ul > li {margin:0;display:inline-block;}
#main #tabs > ul > li a {display:block;padding:15px;color:#231F20;}
#main #tabs > ul > li a.active {color:#EE3331;}
#main #tabs > ul > li a:hover {color:#EE3331;}
#main #tabs .tab {display:none;}
#main #tabs .tab.active {display:block;}

@media only screen and (max-width:767px){	
.error {width:300px;}
.login {width:300px;}
}

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
   * {-webkit-print-color-adjust:exact;}
   @page { margin: 0.5cm; }
}