@charset "utf-8";

/*
Hive Take The Bill
Copyright (c) 2008-2024 Hive Solutions Lda.

This file is part of Hive Take The Bill.

Hive Take The Bill is free software: you can redistribute it and/or modify
it under the terms of the Apache License as published by the Apache
Foundation, either version 2.0 of the License, or (at your option) any
later version.

Hive Take The Bill is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
Apache License for more details.

You should have received a copy of the Apache License along with
Hive Take The Bill. If not, see <http://www.apache.org/licenses/>.
*/

/*
__author__    = João Magalhães <joamag@hive.pt>
__copyright__ = Copyright (c) 2008-2024 Hive Solutions Lda.
__license__   = Apache License, Version 2.0
*/

@-webkit-keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fade-into-drop {
    from {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        transform: translateY(-6px);
        -o-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -khtml-transform: translateY(-6px);
        -webkit-transform: translateY(-6px);
    }
    to {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -khtml-transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
}

@keyframes fade-into-drop {
    from {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        transform: translateY(-6px);
        -o-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -khtml-transform: translateY(-6px);
        -webkit-transform: translateY(-6px);
    }
    to {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -khtml-transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
}

@-webkit-keyframes fade-into-rise {
    from {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        transform: translateY(6px);
        -o-transform: translateY(6px);
        -ms-transform: translateY(6px);
        -moz-transform: translateY(6px);
        -khtml-transform: translateY(6px);
        -webkit-transform: translateY(6px);
    }
    to {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -khtml-transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
}

@keyframes fade-into-rise {
    from {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        transform: translateY(6px);
        -o-transform: translateY(6px);
        -ms-transform: translateY(6px);
        -moz-transform: translateY(6px);
        -khtml-transform: translateY(6px);
        -webkit-transform: translateY(6px);
    }
    to {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -khtml-transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
}

@-webkit-keyframes fade-grow {
    from {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        transform: scale(0.96);
        -o-transform: scale(0.96);
        -ms-transform: scale(0.96);
        -moz-transform: scale(0.96);
        -khtml-transform: scale(0.96);
        -webkit-transform: scale(0.96);
    }
    to {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -khtml-transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@keyframes fade-grow {
    from {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        transform: scale(0.96);
        -o-transform: scale(0.96);
        -ms-transform: scale(0.96);
        -moz-transform: scale(0.96);
        -khtml-transform: scale(0.96);
        -webkit-transform: scale(0.96);
    }
    to {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -khtml-transform: scale(1);
        -webkit-transform: scale(1);
    }
}

#footer {
    background: transparent url(../images/footer-separator-2x.png) no-repeat center top;
    background-size: 360px 20px;
    color: #6d6d6d;
    padding-top: 30px;
}

body {
    background-image: url(../images/background-extra.png);
}

body.full {
    background-color: #f5f5f5;
    background-image: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
}

#content {
    animation: fade-in 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-in 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-in 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-in 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-in 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-in 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
}

body.full #content {
    margin: 0px auto 0px auto;
    width: 960px;
}

a {
    color: #3b73af;
}

a:hover,
a.hover {
    border-bottom: 1px solid #3b73af;
}

a.link-silent {
    border-bottom: none;
    color: inherit;
    padding-bottom: 0px;
}

a.link-silent:hover,
a.link-silent.hover {
    border-bottom: none;
}

fieldset {
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: 1px solid #e6e6e6;
    margin-bottom: 24px;
    padding-left: 0px;
    padding-right: 0px;
}

fieldset.simple {
    border-top: none;
    margin-bottom: 8px;
}

fieldset.inline {
    display: inline-block;
    vertical-align: top;
}

fieldset.more {
    margin-bottom: 12px;
}

fieldset.padded {
    margin-bottom: 0px;
}

fieldset legend {
    color: #418bbf;
    font-weight: bold;
    padding: 0px 12px 0px 0px;
    text-transform: uppercase;
}

fieldset.padded legend {
    margin-bottom: 24px;
}

fieldset .input > label {
    text-transform: none;
}

li.list-more > .button {
    background-color: #ffffff;
    color: #a0a0a0;
    display: inline;
    height: inherit;
    line-height: inherit;
    margin: inherit;
    text-align: inherit;
    transition: inherit;
    -o-transition: inherit;
    -ms-transition: inherit;
    -moz-transition: inherit;
    -khtml-transition: inherit;
    -webkit-transition: inherit;
    width: inherit;
}

.form {
    margin: inherit;
    width: inherit;
}

.button.button-style {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #4d4d4d;
    display: inline-block;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    margin: 0px 0px 0px 0px;
    padding-bottom: 0px;
    text-align: center;
    transition: 0.075s;
    -o-transition: 0.075s;
    -ms-transition: 0.075s;
    -moz-transition: 0.075s;
    -khtml-transition: 0.075s;
    -webkit-transition: 0.075s;
    width: 160px;
}

.button.button-style.disabled {
    border-color: #dddddd;
    color: #aaaaaa;
}

.button.button-style:hover {
    background-color: #4d4d4d;
    border-color: #4d4d4d;
    color: #ffffff;
}

.button.button-style.disabled:hover {
    background-color: #ffffff;
    border-color: #dddddd;
    color: #aaaaaa;
}

.button.button-style.button-red {
    background-color: #c41919;
    border-color: transparent;
    color: #ffffff;
}

.button.button-style.button-red.disabled {
    background-color: #e67f7f;
    color: #ffffff;
}

.button.button-style.button-red:hover {
    background-color: #ad0000;
}

.button.button-style.button-red.disabled:hover {
    background-color: #e67f7f;
    color: #ffffff;
}

.button.button-style.button-blue {
    background-color: #418bbf;
    border-color: transparent;
    color: #ffffff;
}

.button.button-style.button-blue.disabled {
    background-color: #8db9d9;
    color: #ffffff;
}

.button.button-style.button-blue:hover {
    background-color: #2473ad;
}

.button.button-style.button-blue.disabled:hover {
    background-color: #8db9d9;
    color: #ffffff;
}

.button.button-style.button-back {
    background: transparent url(../images/button-back.png) no-repeat left 0px;
    background-size: 32px 64px;
    border: none;
    height: 32px;
    transition: none;
    -o-transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -khtml-transition: none;
    -webkit-transition: none;
    vertical-align: middle;
    width: 32px;
}

.retina-s .button.button-style.button-back {
    background-image: url(../images/button-back-2x.png);
}

.button.button-style.button-back:hover,
.button.button-style.button-back.hover {
    background-position: left -32px;
}

.button.button-style.table-new-line {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.table.table-edit {
    margin-bottom: 0px;
}

.filter.invoices .filter-input {
    margin-left: 30px;
    margin-top: -60px;
    position: absolute;
    width: 260px;
}

.filter.invoices .filter-more:hover {
    background-color: transparent;
}

.filter.invoices .filter-more.loading .load {
    border-color: #cccccc;
    display: inline-block;
}

.filter.invoices .filter-more.loading .load:hover {
    background-color: #ffffff;
}

.filter.invoices > .filter-loading {
    animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    display: none;
    height: 140px;
    line-height: 140px;
    margin: 48px 0px 48px 0px;
}

.filter.invoices.loading.no-contents > .filter-loading {
    display: inline-block;
}

.filter.invoices .filter-no-results {
    animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-in 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    height: 140px;
    padding: 48px 0px 48px 0px;
    text-transform: none;
}

.filter.invoices.loading .filter-no-results {
    height: 0px;
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    padding: 0px 0px 0px 0px;
}

.filter.invoices .filter-no-results > .logo {
    background: transparent url(../images/invoice-new.png) no-repeat;
    background-size: 72px 72px;
    height: 72px;
    margin: 0px auto 0px auto;
    width: 72px;
}

.filter.invoices .filter-no-results > h2 {
    color: #4d4d4d;
    font-size: 18px;
    margin: 16px 0px 0px 0px;
}

.filter.invoices .filter-no-results > h3 {
    color: #4d4d4d;
    font-size: 14px;
    font-weight: normal;
    margin: 6px 0px 0px 0px;
}

.filter.invoices .filter-contents {
    margin: 0px -20px 0px -10px;
    text-align: left;
}

.filter.invoices .filter-contents .invoice-item {
    animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    background: transparent url(../images/invoice-item.png) no-repeat left 0px;
    background-size: 485px 240px;
    cursor: default;
    display: inline-block;
    height: 120px;
    margin-bottom: 18px;
    margin-right: 10px;
    width: 485px;
}

.filter.invoices .filter-contents .invoice-item > .options {
    animation: fade-into-drop 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-into-drop 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-into-drop 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-into-drop 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-into-drop 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-into-drop 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    background: #777777 url(../images/invoice-item-options.png) repeat-x left top;
    border-bottom: 1px solid #b2b2b2;
    border-left: 1px solid #b2b2b2;
    border-right: 1px solid #b2b2b2;
    display: none;
    height: 30px;
    margin-left: 10px;
    margin-top: 100px;
    position: absolute;
    text-align: right;
    width: 463px;
}

.filter.invoices .filter-contents .invoice-item.selected > .options {
    display: block;
}

.filter.invoices .filter-contents .invoice-item > .options > .button {
    background: transparent none no-repeat 10px 7px;
    background-color: transparent;
    background-size: 16px 16px;
    border: none;
    color: #ffffff;
    display: inline-block;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    padding: 0px 12px 0px 32px;
    text-transform: none;
    width: auto;
}

.filter.invoices .filter-contents .invoice-item > .options > .button:hover {
    background-color: #4d4d4d;
}

.filter.invoices .filter-contents .invoice-item > .options > .button.download {
    background-image: url(../images/icon-download.png);
}

.filter.invoices .filter-contents .invoice-item > .options > .button.printer {
    background-image: url(../images/icon-printer.png);
}

.filter.invoices .filter-contents .invoice-item:hover {
    background-position: left -120px;
}

.filter.invoices .filter-contents .invoice-item.selected {
    background-position: left -120px;
}

.filter.invoices .filter-contents .invoice-item > .sequence {
    background-color: #888888;
    box-shadow: 0px 1px 2px #bbbbbb;
    -o-box-shadow: 0px 1px 2px #bbbbbb;
    -ms-box-shadow: 0px 1px 2px #bbbbbb;
    -moz-box-shadow: 0px 1px 2px #bbbbbb;
    -khtml-box-shadow: 0px 1px 2px #bbbbbb;
    -webkit-box-shadow: 0px 1px 2px #bbbbbb;
    color: #ffffff;
    font-weight: bold;
    height: 22px;
    line-height: 22px;
    margin-top: 24px;
    padding: 0px 6px 0px 6px;
    position: absolute;
    text-align: right;
    width: 46px;
}

.filter.invoices .filter-contents .invoice-item > .data {
    float: left;
    height: 76px;
    padding: 24px 12px 24px 74px;
    width: 234px;
}

.filter.invoices .filter-contents .invoice-item.full > .data {
    padding: 24px 12px 24px 28px;
    width: 280px;
}

.filter.invoices .filter-contents .invoice-item .name {
    font-size: 16px;
    font-weight: bold;
    height: 26px;
    line-height: 22px;
    margin-top: 4px;
    overflow: hidden;
}

.filter.invoices .filter-contents .invoice-item > .separator {
    background: transparent url(../images/invoice-separator.png) repeat-y;
    float: left;
    height: 90px;
    margin-top: 10px;
    width: 2px;
}

.filter.invoices .filter-contents .invoice-item > .value {
    background: transparent url(../images/stripes-light.png) repeat;
    float: left;
    font-size: 20px;
    font-weight: bold;
    height: 66px;
    line-height: 66px;
    margin: 22px 16px 16px 16px;
    text-align: center;
    width: 120px;
}

.filter.invoices .filter-contents .invoice-item:hover > .value {
    background-image: url(../images/stripes-medium.png);
}

.filter.invoices .filter-contents .invoice-item.selected > .value {
    background-image: url(../images/stripes-medium.png);
}

.filter.invoices .filter-contents .invoice-item > .value.red {
    color: #de0000;
}

.filter.invoices .filter-contents .invoice-item > .value.green {
    color: #52b500;
}

.action-bar {
    background: transparent url(../images/action-bar.png) repeat-x;
    background-size: 6px 50px;
    height: 50px;
    position: fixed;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    width: 100%;
    z-index: 10;
}

.retina-s .action-bar {
    background-image: url(../images/action-bar-2x.png);
}

.action-bar > .contents {
    margin: 0px auto 0px auto;
    text-align: left;
    width: 960px;
}

.action-bar > .contents > .contents-left {
    float: left;
}

.action-bar > .contents > .contents-right {
    float: right;
}

.action-bar > .contents > .contents-clear {
    clear: both;
}

.action-bar > .contents .item {
    display: inline-block;
}

.action-bar > .contents .item.logo {
    background: transparent url(../images/header-logo.png) no-repeat;
    background-size: 40px 40px;
    border: none;
    box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    -moz-box-shadow: none;
    -khtml-box-shadow: none;
    -webkit-box-shadow: none;
    height: 40px;
    width: 40px;
}

.retina-s .action-bar > .contents .item.logo {
    background-image: url(../images/header-logo-2x.png);
}

.action-bar > .contents .item.separator {
    background: transparent url(../images/header-separator.png) repeat-y;
    height: 40px;
    width: 2px;
}

.action-bar > .contents .item.link {
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    height: 34px;
    line-height: 34px;
    margin: 0px 6px 0px 6px;
    padding: 0px 12px 0px 12px;
    text-transform: uppercase;
    transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-transition: border-color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    vertical-align: top;
}

.action-bar > .contents .item.link.selected {
    border-top-color: #ffffff;
}

.action-bar > .contents .item.link:hover {
    border-top-color: #ffffff;
}

.action-bar > .contents .item.menu-link {
    background: transparent url(../images/header-arrow.png) no-repeat right 0px;
    background-size: 16px 68px;
    margin-left: 0px;
    margin-right: 0px;
    max-width: 100px;
    overflow: hidden;
    padding-right: 22px;
}

.retina-s .action-bar > .contents .item.menu-link {
    background-image: url(../images/header-arrow-2x.png);
}

.action-bar > .contents .item.menu-link.active {
    background-color: #ffffff;
    background-position: right -34px;
    color: #4d4d4d;
}

.system-menu a {
    font-weight: bold;
}

.system-menu > .menu-contents {
    animation: fade-into-drop 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-into-drop 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-into-drop 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-into-drop 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-into-drop 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-into-drop 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    background-color: #ffffff;
    box-shadow: 1px 4px 4px #aaaaaa;
    -o-box-shadow: 1px 4px 4px #aaaaaa;
    -ms-box-shadow: 1px 4px 4px #aaaaaa;
    -moz-box-shadow: 1px 4px 4px #aaaaaa;
    -khtml-box-shadow: 1px 4px 4px #aaaaaa;
    -webkit-box-shadow: 1px 4px 4px #aaaaaa;
    min-width: 340px;
    position: absolute;
}

.system-menu .header-contents {
    line-height: 0px;
    padding: 20px 20px 20px 20px;
}

.system-menu .avatar-image {
    height: 64px;
    width: 64px;
}

.system-menu .avatar-contents {
    display: inline-block;
    margin: 0px 12px 0px 12px;
    vertical-align: top;
}

.system-menu .avatar-contents h2 {
    font-size: 15px;
    line-height: 15px;
    margin: 15px 0px 7px 0px;
    text-transform: uppercase;
}

.system-menu .avatar-contents h3 {
    color: #5d5d5d;
    font-size: 13px;
    font-weight: normal;
    line-height: 13px;
    margin: 0px 0px 0px 0px;
}

.system-menu .footer-contents {
    border-top: 1px solid #dddddd;
    padding: 12px 20px 12px 20px;
    text-align: right;
}

.system-menu .footer-contents a {
    text-transform: uppercase;
}

.content-margin {
    height: 50px;
}

.content-header > .header-left {
    float: left;
}

.content-header > .header-right {
    float: right;
}

.content-header > .header-clear {
    clear: both;
}

.content-header .header-buttons {
    margin: 18px 0px 18px 0px;
}

.content-header h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 40px;
    margin: 18px 0px 18px 0px;
}

.signin {
    animation: fade-grow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-grow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-grow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-grow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-grow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-grow 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    background-color: #f5f5f5;
    border: 1px solid #bbbbbb;
    border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -khtml-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 0px 8px #cccccc;
    -o-box-shadow: 0px 0px 8px #cccccc;
    -ms-box-shadow: 0px 0px 8px #cccccc;
    -moz-box-shadow: 0px 0px 8px #cccccc;
    -khtml-box-shadow: 0px 0px 8px #cccccc;
    -webkit-box-shadow: 0px 0px 8px #cccccc;
    margin: 68px auto 36px auto; ;
    padding: 36px 36px 36px 36px;
    width: 340px;
}

.signin a {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.signin .logo {
    background: transparent url(../images/signin-logo.png) no-repeat;
    background-size: 208px 80px;
    height: 80px;
    margin: 0px auto 50px auto;
    width: 208px;
}

.retina-s .signin .logo {
    background-image: url(../images/signin-logo-2x.png);
}

.signin input {
    width: 322px;
}

.signin .form {
    margin: 0px 0px 0px 0px;
    width: 340px;
}

.signin .input {
    margin: 10px 0px 26px 0px;
    text-align: left;
}

.signin .error {
    font-weight: bold;
    margin: 32px 0px 32px 0px;
}

.signin .forgot {
    margin-bottom: 26px;
    margin-top: -20px;
    text-align: right;
}

.signin .line {
    margin: 10px 0px 10px 0px;
}

.create-account {
    font-weight: bold;
    margin-bottom: 98px;
}

.shortcuts {
    display: none;
}

.invoice {
    animation: fade-into-rise 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-into-rise 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-into-rise 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-into-rise 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-into-rise 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-into-rise 0.45s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    background-color: #ffffff;
    box-shadow: 1px 1px 4px #aaaaaa;
    -o-box-shadow: 1px 1px 4px #aaaaaa;
    -ms-box-shadow: 1px 1px 4px #aaaaaa;
    -moz-box-shadow: 1px 1px 4px #aaaaaa;
    -khtml-box-shadow: 1px 1px 4px #aaaaaa;
    -webkit-box-shadow: 1px 1px 4px #aaaaaa;
    margin: 10px 0px 64px 0px;
    min-height: 100px;
    padding: 60px 60px 30px 60px;
    text-align: left;
    width: 840px;
}

.invoice > .status {
    background-color: #888888;
    box-shadow: 0px 1px 2px #bbbbbb;
    -o-box-shadow: 0px 1px 2px #bbbbbb;
    -ms-box-shadow: 0px 1px 2px #bbbbbb;
    -moz-box-shadow: 0px 1px 2px #bbbbbb;
    -khtml-box-shadow: 0px 1px 2px #bbbbbb;
    -webkit-box-shadow: 0px 1px 2px #bbbbbb;
    color: #ffffff;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    margin-left: -80px;
    position: absolute;
    text-align: center;
    width: 80px;
}

.invoice > .status.unpaid {
    background-color: #de0000;
}

.invoice > .status.paid {
    background-color: #52b500;
}

.invoice > .status.draft {
    background-color: #888888;
}

.invoice > .header > .clear {
    clear: both;
}

.invoice > .header > .title {
    float: right;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 46px;
    text-align: right;
    width: 320px;
}

.invoice > .header > .sender {
    float: left;
    width: 320px;
}

.invoice > .header > .receiver {
    float: right;
    width: 320px;
}

.invoice > .header > .sender h2,
.invoice > .header > .receiver h2 {
    font-size: 16px;
    margin: 8px 0px 8px 0px;
}

.invoice > .header > .sender div,
.invoice > .header > .receiver div {
    font-size: 14px;
    margin: 4px 0px 4px 0px;
}

.invoice > .header > ul.notes {
    margin: 52px 0px 52px 0px;
}

.invoice > .header > ul.notes > li {
    background: transparent url(../images/stripes-light.png) repeat;
    display: inline-block;
    margin: 0px 4px 0px 0px;
    padding: 6px 12px 6px 12px;
    width: 249px;
}

.invoice > .header > ul.notes > li:hover {
    background-color: transparent;
}

.invoice > .header > ul.notes > li > h3 {
    font-size: 16px;
    margin: 0px 0px 4px 0px;
}

.invoice > .contents > table {
    margin-top: 0px;
}

.invoice > .contents > table thead tr {
    border-bottom: 1px solid #e5e5e5;
    font-size: 15px;
    height: 42px;
}

.invoice > .contents > table td {
    padding: 8px 0px 8px 0px;
}

.invoice > .contents > table tbody {
    border-bottom: 1px solid #e5e5e5;
}

.invoice > .contents > .observations {
    margin: 32px 0px 32px 0px;
}

.invoice > .contents > .observations h3 {
    font-size: 16px;
    margin: 8px 0px 8px 0px;
}

.invoice > .contents > .observations p {
    line-height: 24px;
    margin: 0px 0px 0px 0px;
}

.invoice > .footer > table.tax-table {
    float: left;
    width: 320px;
}

.invoice > .footer > table.tax-table td {
    padding: 8px 0px 8px 0px;
}

.invoice > .footer > table.totals-table {
    float: right;
    width: 320px;
}

.invoice > .footer > table.totals-table td {
    padding: 8px 0px 8px 0px;
}

.invoice > .footer > table.totals-table td.key {
    font-weight: bold;
}

.invoice > .footer > .total {
    background: transparent url(../images/stripes-light.png) repeat;
    font-size: 22px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    padding: 12px 12px 12px 12px;
    text-align: right;
    width: 816px;
}

.invoice > .footer > .total > .label {
    display: inline-block;
    width: 100px;
}

.invoice > .footer > .total > .value {
    display: inline-block;
    width: 202px;
}

.invoice > .footer > .ender {
    font-size: 13px;
    line-height: 22px;
    margin: 30px 0px 0px 0px;
    text-align: center;
}

.invoice > .footer > .ender > .atcud {
    font-weight: bold;
    margin-bottom: 12px;
}

.invoice > .footer > .ender > .qr-code {
    display: block;
    margin: 0px auto 12px auto;
    width: 140px;
}

.invoice > .buttons {
    text-align: center;
}

.invoice > .buttons > .button {
    margin: 0px 8px 0px 8px;
}

.invoice .column {
    width: 406px;
}

.invoice .column-left {
    float: left;
}

.invoice .column-right {
    float: right;
}

.invoice .column-clear {
    clear: both;
}

.invoice .column-linear {
    display: inline-block;
    width: 341px;
}

.invoice label {
    display: block;
    padding: 12px 0px 6px 0px;
}

.invoice input,
.invoice textarea {
    width: 818px;
}

.invoice a {
    line-height: 40px;
}

.invoice fieldset.inline.totals {
    margin-left: 147px;
}

.invoice .column label {
    display: inline-block;
    padding: 12px 0px 6px 0px;
}

.invoice .column input,
.invoice .column textarea {
    width: 388px;
}

.invoice .column-linear a {
    cursor: pointer;
    font-weight: bold;
    line-height: inherit;
}

.invoice .column-linear a:hover,
.invoice .column-linear a.hover {
    border-bottom: inherit;
    padding-bottom: inherit;
}

.invoice .column-linear a,
.invoice .column-linear label {
    display: inline-block;
    width: 199px;
}

.invoice .column-linear a.value,
.invoice .column-linear label.value {
    display: inline-block;
    text-align: right;
    width: 138px;
}

.invoice .column-linear input {
    height: 30px;
    margin-left: 20px;
    text-align: right;
    width: 100px;
}

.invoice .large a,
.invoice .large label {
    font-size: 20px;
}

.settings {
    background-color: #ffffff;
    box-shadow: 1px 1px 4px #aaaaaa;
    -o-box-shadow: 1px 1px 4px #aaaaaa;
    -ms-box-shadow: 1px 1px 4px #aaaaaa;
    -moz-box-shadow: 1px 1px 4px #aaaaaa;
    -khtml-box-shadow: 1px 1px 4px #aaaaaa;
    -webkit-box-shadow: 1px 1px 4px #aaaaaa;
    margin: 10px 0px 64px 0px;
    min-height: 100px;
    padding: 60px 209px 60px 209px;
    text-align: left;
    width: 542px;
}

.settings > .buttons {
    text-align: center;
}

.settings > .buttons > .button {
    margin: 0px 8px 0px 8px;
}

.settings fieldset.padded .input {
    margin: 8px 0px 8px 0px;
    min-height: 38px;
}

.steps {
    margin-bottom: 52px;
    margin-top: -20px;
    text-align: center;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}

.steps .step {
    display: inline-block;
    height: 42px;
    margin: 0px 10px 0px 10px;
    max-width: 134px;
    min-width: 134px;
    vertical-align: bottom;
    width: 134px;
}

.steps .step > h4 {
    color: #666666;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    margin: 0px 0px 8px 0px;
    text-transform: uppercase;
}

.steps .step > .mark {
    background: transparent url(../images/step.png) no-repeat left 0px;
    background-size: 20px 40px;
    height: 20px;
    margin: 0px auto 0px auto;
    width: 20px;
}

.retina-s .steps .step > .mark {
    background-image: url(../images/step-2x.png);
}

.steps .step.selected > .mark {
    background-position: left -20px;
}

.steps .separator {
    background: transparent url(../images/step-line.png) repeat-x left 32px;
    background-size: 2px 2px;
    display: inline-block;
    height: 42px;
    margin-left: -71px;
    position: absolute;
    vertical-align: bottom;
    width: 138px;
}

.retina-s .steps .separator {
    background-image: url(../images/step-line-2x.png);
}

.footer-language a {
    margin-left: 6px;
}

ul.settings-list {
    text-align: left;
    width: 100%;
}

ul.settings-list li.button {
    animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-into-drop 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    background-color: #ffffff;
    border: 1px solid #cccccc;
    display: inline-block;
    height: inherit;
    margin: 0px 16px 16px 0px;
    padding: 18px 18px 18px 18px;
    text-align: left;
    vertical-align: top;
    width: 432px;
}

ul.settings-list li.button:hover {
    background-color: #ffffff;
    border-bottom: 1px solid #2d2d2d;
    border-color: #2d2d2d;
    color: #4d4d4d;
    padding-bottom: 18px;
}

ul.settings-list li.button.disabled {
    cursor: not-allowed;
}

ul.settings-list li.button.final {
    margin-right: 0px;
}

ul.settings-list li.button .icon {
    display: inline-block;
    height: 96px;
    vertical-align: top;
    width: 96px;
}

ul.settings-list li.button .contents {
    display: inline-block;
    margin-left: 12px;
    width: 320px;
}

ul.settings-list li.button h2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 26px;
    margin: 0px 0px 12px 0px;
    text-transform: none;
}

ul.settings-list li.button.disabled h2 {
    color: #aaaaaa;
}

ul.settings-list li.button p {
    font-size: 13px;
    font-weight: normal;
    line-height: 22px;
    margin: 0px 0px 0px 0px;
    text-transform: none;
}

ul.settings-list li.button.disabled p {
    color: #aaaaaa;
}

ul.settings-list li.button .icon {
    background-size: 96px 96px;
}

ul.settings-list li.button.disabled .icon {
    opacity: 0.6;
    -o-opacity: 0.6;
    -ms-opacity: 0.6;
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    -webkit-opacity: 0.6;
}

ul.settings-list.no-icon li.button .icon {
    display: none;
}

ul.settings-list li.button.company .icon {
    background-image: url(../images/icon-company.png);
}

.retina-s ul.settings-list li.button.company .icon {
    background-image: url(../images/icon-company-2x.png);
}

ul.settings-list li.button.taxes .icon {
    background-image: url(../images/icon-taxes.png);
}

.retina-s ul.settings-list li.button.taxes .icon {
    background-image: url(../images/icon-taxes-2x.png);
}