/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
 /* Layout */
 * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body, textarea {
    background-repeat: repeat-x;
    margin: 0px;
    font: 14px Verdana, Geneva, sans-serif;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#left {
    width: 150px;
    float: left;
    text-align: center;
}
#left #date-panel {
    display: table;
    width: 100%;
    height: 30px;
    border-bottom: solid 1px #999;
    border-right: solid 1px #999;
    font-size: 10px;
    font-weight: bold;
}
#left #title-text {
    display: table;
    width: 100%;
    height: 100px;
    background-color: #f7f7f7;
    border-left: solid 1px #999;
    font-size: 26px;
    font-weight: bold;
    color: #999;
}
#left #menu {
    width: 100%;
    padding-left: 3px;
    margin-left: 1px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}
#left #menu a {
    display: block;
    height: 20px;
    background-color: #ff0;
    border-bottom: solid 1px #fff;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    padding-top: 3px;
}
#left #menu .authenticated-link {
    background-color: #ccc;
}
#right {
    float: none;
    width: auto;
    overflow: hidden;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}
#right #user-panel {
    display: table;
    width: 100%;
    height: 30px;
    text-align: right;
    padding-right: 5px;
    background-color: #ff0;
}
#right #user-panel a {
    color: #000;
    text-decoration: none;
}
#right #user-panel a:hover {
    text-decoration: underline;
}
#right #contact-panel {
    display: table;
    width: 100%;
    height: 30px;
    text-align: right;
    padding-right: 5px;
    background-color: #999;
}
#right #contact-panel a {
    color: #000;
    text-decoration: none;
}
#right #contact-panel a:hover {
    text-decoration: underline;
}
#right #banner-div {
    width: 100%;
    height: 100px;
    text-align: center;
    background-color: #f7f7f7;
}
#right #banner-div #banner-img {
    height: 90px;
    margin-top: 5px;
}
#right #content {
    background-color: #f7f7f7;
    border-top: dotted 1px #ccc;
    border-left: solid 1px #999;
    min-height: 360px;
    padding: 15px;
}
#footer {
    margin-left: 150px;
    text-align: center;
    color: #ccc;
}
/* Tables... */
table {
    margin: 10px auto;
}
table, th, td {
    padding: 0px 14px;
    border: 1px solid black;
    border-collapse: collapse;
}
tr:nth-child(odd):not(.closed) {
    background-color: #fff;
}
tr:nth-child(even):not(.closed) {
    background-color: #f7f7f7;
}
th {
    background-color: #ff0;
    text-align: center;
}
.small {
    font-size: 8px;
}
tr.small th {
    padding: 1px;
}
td {
    text-align: left;
}
/* Forms */
input, select, textarea {
    margin-left: 10px;
}
label:not(.boolean) {
    display: block;
    margin-top: 4px;
}
textarea {
    height: 52px;
    width: 350px;
    resize: none;
}
/* Test form */
.hint {
    font-size: 10px;
    display: block;
}
td .input {
    margin: 0;
}
/* Lists */
/* Headings */
h1 {
    text-align: center;
    margin: 10px;
}
h2 {
    margin: 8px 0 10px 0;
}
/* Special divs */
#notice, #alert {
    width: 100%;
    text-align: center;
    padding: 4px 0;
    background-color: #fff;
}
#notice #notice, #alert #notice {
    border-top: 2px solid #ff0;
    border-bottom: 2px solid #ff0;
}
#notice #alert, #alert #alert {
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}
#sales-report {
    font-size: 10px;
    margin: 10px;
}
.cell-middle {
    display: table-cell;
    vertical-align: middle;
}
.centered {
    text-align: center;
}
.actions-div {
    text-align: center;
    margin: 12px;
    font-size: 12px;
}
.actions-div a {
    display: inline;
    margin: 0 8px;
    color: #000;
    font-weight: bold;
}
.topic {
    width: 95%;
    margin: 10px auto;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ccc;
}
.block {
    display: block;
}
/* Text-classes */
.small-bold {
    font-size: 11px;
    font-weight: bold;
}
.downcase {
    text-transform: lowercase;
}
/* Other */
#abre-image {
    width: 80%;
}
#image-upload-div > input {
    display: none;
}
#top-fixed-div, #bottom-fixed-div {
    font-size: 1.2em;
    height: 2.4em;
    padding: 0.6em 0;
    text-align: center;
    background-color: #ff0;
    position: fixed;
    width: 100%;
}
#top-fixed-div a, #bottom-fixed-div a {
    color: black;
    font-weight: bold;
    font-size: 0.9em;
}
#top-fixed-div {
    top: 0px;
}
#bottom-fixed-div {
    bottom: 0px;
}
.right-fixed-div, .left-fixed-div {
    position: fixed;
    margin: 0;
    padding: 0;
}
.right-fixed-div {
    right: 5px;
}
.left-fixed-div {
    left: 5px;
}
#image-upload-div {
    position: fixed;
    bottom: 6px;
}
#take-picture {
    width: 52px;
}
#smartphone-content-div {
    font-size: 24px;
    padding: 1.2em 8px 64px 8px;
    margin-top: 5px;
}
#smartphone-content-div input, #smartphone-content-div textarea, #smartphone-content-div select {
    margin: 0 auto;
    padding: 0;
    max-width: 95%;
    font-size: 24px;
}
#smartphone-content-div textarea {
    height: 90px;
    font-size: 20px;
}
#smartphone-content-div .input_wrapper {
    margin-bottom: 20px;
}
#smartphone-content-div .hint {
    font-size: 16px;
    display: block;
}
.attachment {
    width: 85%;
}
.table-container {
    overflow-x: scroll;
}
.autofit {
    width: 100%;
    table-layout: fixed;
}
#progress-bar-div {
    display: block;
}
progress[value] {
   /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    width: 52px;
    height: 8px;
    display: block;
    margin-bottom: 2px;
}
/* Sales report */
.closed {
    background-color: #0f9;
}
#wide-wrapper > div {
    margin: 0;
    padding: 0;
}
#wide-header {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}