/* fonts */
@font-face {
   font-family: Raleway;
   src: url(../fonts/raleway.woff);
   font-style: normal;
   font-weight: normal;
}

.fa {
   font-family:FontAwesome !important;
   margin-right: 9px;
}

.login-image .fa {
   margin-right: 0;
}

table .fa,
.projectTileList .fa {

}

/* basic configuration */
* {
   margin: 0;
   padding: 0;
   border: 0;
   font-family: Raleway, Arial, Helvetica, sans-serif;
   font-size: 14px;
   outline: 0px;
   box-sizing: border-box;
}

html {
   height: 100%;
}

body {
}

h1, h2, h3, h4, h5, h6 {
   font-weight: bold;
}

h1 {
   font-size: 2.4em;
   padding: 20px 0 10px 0;
}

h2{
   font-size: 2.2em;
   padding: 12px 0 12px 0;
}

h3 {
   font-size: 2.0em;
   padding: 8px 0 8px 0;
}

h4 {
   font-size: 1.6em;
   padding: 6px 0 6px 0;
}

h5 {
   font-weight: normal;
   font-size: 1.4em;
   padding: 4px 0 4px 0;
}

h6 {
   font-weight: normal;
   font-size: 1.2em;
   padding: 2px 0 2px 0;
}

p {
   line-height: 1.2;
   padding: 3px 0 3px 0;
}

ul {
   padding: 0 0 0 16px;
}

hr {
   margin: 6px 0;
}

.clear {
   clear: both;
}

.align-left {
   text-align: left;
}

.align-right {
   text-align: right;
}

.align-center {
   text-align: center;
}

/* wrapper */
#footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   
   height: 52px;
}

/* menus */
#breadcrumbs {
   float: left;
   padding: 0 0 0 24px;
}

#breadcrumbs ul {
   list-style-type: none;
   height: 44px;
   padding: 0; 
}

#breadcrumbs li {
   float: left;
   padding: 0 8px 0 0;
   list-style-type: none;
}

#breadcrumbs li a {
   display: block;
   height: 44px;
   line-height: 44px;
   padding: 0 12px;
   text-decoration: none;
}

#footerNavigation {
   list-style-type: none;
   height: 44px;
   padding: 0;
   float: right;
}

#footerNavigation li {
   float: left;
   padding: 0 8px 0 0;
}

#footerNavigation li a {
   display: inline-block;
   text-align: center;
   height: 44px;
   line-height: 44px;
   width: 110px;
   text-decoration: none;
   
   transition: background 0.2s linear 0s, color 0.2s linear 0s;
}

#footerNavigation li.active a {

}

#footerNavigation li a:hover {

}

#copyright {
   float: right;
   margin: 0;
   padding: 0 24px 0 0;
}

#copyright a {  
   display: block;
   height: 44px;
   line-height: 44px;
   padding: 0 8px;
   text-decoration: none;
   
   transition: background 0.2s linear 0s, color 0.2s linear 0s;
}

#copyright a:hover {

}

/* Intern Area */
.logged-in {
   height: 100%;
}

/* wrapper */
.logged-in #mainWrapper {
   min-height: 100%;
   width: 100%;
   position: relative;
   padding-bottom: 52px;
}

.logged-in #contentWrapper {
   min-height:100%;
   padding: 0 24px 24px 24px;
}

.logged-out #contentWrapper {
   position: absolute;
   top: 25px;
   left: 25px;
   right: 25px;
   bottom: 45px; 
}

.logged-out #contentWrapper  {
   bottom: 25px; 
}

#header {
   min-height: 80px;
}

#header h1 {
   text-transform: uppercase;
   font-size: 3em;
   font-weight: normal;
   padding: 0;
   float: left;
   height: 80px;
   line-height: 80px;
   
   text-shadow: 0px 0px 3px rgba(0,0,0,0.6);
}

.logged-in  #content {
   padding: 24px;
}

/* menus */
#headerNavigation {
   list-style-type: none;
   margin: 18px 0 0 0;
   padding: 0;
   float: right;
   border-top: 0;
   border-right: 0;
   height: 62px;
}

#headerNavigation li {
   float: left;
   padding: 0;
}

#headerNavigation li a {
   display: block;
   height: 44px;
   line-height: 44px;
   margin-left: 8px;
   width: 112px;
   text-align: center;
   text-decoration: none;
   
   transition: background 0.2s linear 0s, color 0.2s linear 0s;
}

#headerNavigation li:first-child a {
   margin-left: 0;
}

#headerNavigation li.active a {
   text-decoration: none;
   height: 62px;
   padding-bottom: 18px;
   margin-bottom: -18px;
}

#headerNavigation li a:hover {
   text-decoration: none;
}

@media screen and (max-width: 1280px) {
   
   #header h1 {
      float: none;
   }
   
   #headerNavigation {
      float: none;
   }
}

#secondLevelNavigation {
   list-style-type: none;
   height: 38px;
   margin: 0;
   padding: 0;
}

#secondLevelNavigation li {
   float: left;
   padding: 0 6px;
}

#secondLevelNavigation li:first-child {
   padding-left: 0;
}

#secondLevelNavigation li a {
   display: block;
   height: 38px;
   padding: 0 8px;
   line-height: 38px;
   text-align: center;
   text-decoration: none;
   font-size: 1.2em;
   
   transition: background 0.2s linear 0s, color 0.2s linear 0s;
}

#secondLevelNavigation li a:hover {

}

/* tables */
table {
   border-collapse: collapse;
   width: 100%;
}


.cell-hidden {
   display: none;
}

.tableline th {
   padding: 9px 6px;
}

.itemCollection .tableline th {
   padding: 4px 6px;
}

.itemCollection .tableline th span {

}

.tableline th {
   font-weight: bold;
   text-align: left;
   white-space: nowrap;
}

.tableline.foot th {
   font-weight: normal;
}

.table-swipemode .tableline th a {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: block;
}

.tableline td {
   padding: 4px 6px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: 240px;
   
   transition: background 0.1s linear 0s;
}

.table-swipemode .tableline th,
.table-swipemode .tableline td {
   max-width: 120px;
}

.tableline td:last-child,
.tableline th:last-child,
.table-swipemode .tableline td:last-child,
.table-swipemode .tableline th:last-child {
   min-width: 132px;
}

.itemCollection .tableline td:last-child {
   min-width: 0;
}

.line1 td {

}

tr.tableline:hover td {

}

tr.tableline td a,
tr.tableline td a:hover {
   
   transition: color 0.1s linear 0s;
}

tr.tableline:hover td a,
tr.tableline:hover td a:hover {

}

tr.tableline:hover td a:hover {
   text-decoration: none;
}

tr.tableline.last-line td {
   font-weight: bold;
}

table.itemCollection {
   width: 450px
}

table.table-compact {
   margin: 12px 0 24px 0;
   max-width: 400px;
}

table.table-items {
   margin: 12px 0 24px 0;
   max-width: 900px;
}

table.table-items tr.tableline th + th,
table.table-items tr.tableline td + td,
table.table-compact tr.tableline th + th,
table.table-compact tr.tableline td + td  {
   text-align: right;
}

table.table-address {
   margin: 12px 0 24px 0;  
}

table.table-address td {
   line-height: 28px;
   font-size: 1.2em;
}

table ul {
   list-style-type: none;
   padding: 0;
}

table ul  li a:hover {
   text-decoration: none;
}

table tr:hover ul  li a {

}

/* sorting */
.table-sorting {
   display: inline-block;
   width: 12px;
   height: 16px;
   position: relative;
}

.table-sorting i.fa {
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 4px;
}

.table-sorting i.fa.arrow-desc {
   top: 8px;
}

/* Forms */
div.formLine {
   padding: 8px 0;
   min-height: 28px;
   line-height: 28px;
}

div.formLine#container_org_billid {
   display: none;
}

.logged-in label {
   display: block;
   float: left;
   line-height: 34px;
   width: 200px;
   height: 34px; 
}

.logged-in input , textarea, select {
   line-height: 34px;
   width: 450px;
   height: 34px;
   padding: 0 4px;
   box-shadow: none !important;
   
   transition: background 0.2s linear 0s, border 0.2s linear 0s;
}

select option {
   padding: 4px;
}

input.inputError, 
textarea.inputError, 
select.inputError {

}

select {

}

select[multiple] {
   height: auto;
}

.logged-in input:focus, textarea:focus {
   
}

textarea{
   height: 182px;
}

.logged-in button[type="submit"] {
   height: 36px;
   width: 84px;
   padding: 0;
   text-align: center;
   cursor: pointer;
   
   transition: background 0.2s linear 0s;
}

.logged-in button[type=submit]:hover {

}

button[type="submit"] .submit-value {

}

.logged-in button[type="submit"]:focus {

}

input[type="checkbox"] {
   width: 14px;
   height: 14px;  
   background: transparent;
   position: relative;
   top: 5px;
   padding: 0;
   visibility: hidden;
   margin-left: -14px;
}

input[type="checkbox"] + label::before {
   content: "\f096";
   font-family:FontAwesome;
   font-style:normal;
   font-weight:normal;
   font-size: 1.25em;
   margin-right: 12px;
   display: inline-block;
   width: 16px;
}

input[type="checkbox"]:checked + label::before {
   content: "\f14a";
}

.multi {
   margin-left: 200px;
}

.multi label {
   float: none;
   margin-left: 0;
   width: auto;
}

.multi input[type="checkbox"] {
   float: left;
}

.tableline input {
   position: absolute;
   top: -4px;
   left: 0;
   right: 0;
   bottom: 0;
}

.tableline input:focus,
.tableline input:hover {

}

.tableline td.edit {
    max-width: 240px;
    min-width: 30px;
    height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-inline {
   display: block;
   padding: 12px 44px 12px 0;
   float: left;
}

.form-inline label {
   width: auto;
   margin-right: 12px;
}

.form-inline label:empty {
   display: none;
}

.form-inline .formLine {
   display: inline;
}

.form-inline  input ,  
.form-inline  select {
   width: auto;
   margin-right: 12px;
}

.form-inline  button[type="submit"] {
   height: 34px;
}

.form-inline-container {
   padding: 0 12px;
   margin-bottom: 24px;
}

/* Application Icons */
.optionLink a,
a.optionLink {
   display: block;
   padding: 0;
   height: 44px;
}

a.optionLink {
   padding: 2px 0;
}

.optionLink a i,
a.optionLink i {
   height: 24px;
   width: 24px;
   line-height: 24px;
   text-align: center;
   
   transition: background 0.2s linear 0s;
}

table ul  li.optionLink,
.simple-option-list li ul  li.optionLink  {
   float: left;
   padding: 0 18px 0 0;
}

table ul li.optionLink,
.simple-option-list li ul  li.optionLink {
   padding: 0;
   margin-right: 8px;
   
   transition: box-shadow 0.2s linear 0s;
}

table ul  li.optionLink a,
.simple-option-list li ul  li.optionLink a {
   width: 24px;
   height: 24px;
   overflow: hidden;
}

#indexmenu,
#billMenu,
#billYearMenu,
#payYearMenu,
#questionMenu,
#contentmenu,
#billBadMenu {
   list-style-type: none;
   margin: -16px -16px 0 -16px;
   padding: 16px;
}

#billYearMenu,
#payYearMenu {
   margin: 0;
   height: 44px;
   padding: 0 0 12px 0;
}

#indexmenu li,
#billMenu li,
#billYearMenu li,
#contentmenu li,
#billBadMenu li,
#payYearMenu li {
   height: 44px;
   line-height: 44px;
}

#billYearMenu li,
#payYearMenu li {
   float: left;
   margin: 0 12px 0 0;
}

#questionMenu li {
   float: left;
   padding: 2px;
   margin: 12px 12px 0 0;
}

#indexmenu li a:hover,
#billMenu li a:hover,
#billYearMenu li a:hover,
#questionMenu li a:hover,
#contentmenu li a:hover,
#billBadMenu li a:hover,
#payYearMenu li a:hover {
   text-decoration: none;
}

/* bill icon colors */
#billMenu .billBad i {

}

#billMenu .billOpen i {

}

#billMenu .billOk i {

}

/* icon colors */
#indexmenu .billAdd i,
#contentmenu  .bill i,
.customerBill i,
.optionLink.bill i {

}

#indexmenu .offerAdd i,
#contentmenu  .offer i,
.customerOffer i,
.optionLink.offer i {

}

.optionLink.delete-link i,
.optionLink.globalDelete i {

}

.add.fa.fa-plus,
.remove.fa.fa-minus {
   font-size: 0.7em;
   cursor: pointer;
}

/* Lists */
.profitList {
   list-style-type: none;
   padding: 0;
   float: left;
}
.profitList li {
   height: 24px;
   line-height: 24px;
}

.profitList .profitOpen {

}

.profitList .profitOk {

}

.profitList .profitAll {

}

.floatContainer {
   float: left;
   margin: 0 32px 0 0;
}

/* DetailsList */
.detailsLabel {
   float: left;
   height: 22px;
   line-height: 22px;
   width: 180px;   
}

.detailsText {
   float: left;
   min-height: 22px;
   line-height: 22px;
}

/* Project Tile List */
.projectTileList {
   list-style-type: none;
   padding: 0;
   margin: 0 -16px;
}

.projectTileList .optionLink a,
.projectTileList a.optionLink {
   height: 26px;
   
   transition: box-shadow 0.2s linear 0s;
}

.projectTileList .optionLink {
   float: left;
   padding: 0;
   margin-right: 18px;
}

.projectTileList > li {
   display: inline-block;
   height: 150px;
   width: 150px;
   margin: 16px;
   position: relative;
   
   transition: background 0.2s linear 0s, border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

.projectTileList > li:hover {

}

.projectTileList > li > ul {
   list-style-type: none;
   padding: 0;
   position: absolute;
   bottom: 18px;
   right: 0;
   left: 18px;
   height: 26px;
}

.projectTileList > li > ul > li {
   float: left;
   width: 26px;
}

.projectTileList > li > ul > li > a {
   display: block;
   overflow: hidden;
   width: 26px;
}

.projectTileList > li > ul > li > a > i {
   height: 26px;
   width: 26px;
   line-height: 26px;
}

.projectTileList > li > a {
   width: 100%;
   height: 100px;
   padding: 12px 12px 0 12px;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   display: block;
   line-height: 18px;
   
   transition: color 0.2s linear 0s;
}

/* Login Area */
.logged-out * {
   font-family: Raleway, Arial, Helvetica, sans-serif;
   font-size: 14px;
}

.logged-out {
   padding: 0;
   margin: 0;
   min-height: 100%;
}

.logged-out #mainWrapper {
   width: 680px;
   height: 313px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -156px 0 0 -360px
}

.logged-out #header {
   display: none;
}

.logged-out #footer {
   display: none;
}

.logged-out  #content {
   padding: 0;
   height: 100%;
}

.logged-out .login-image {
   height: 146px;
   width: 146px;
   margin: 24px;
   border-radius: 50%;
   float: left;
   text-align: center;
}

.logged-out .login-image i {
  font-size: 8em;
  line-height: 146px;
}

.logged-out h2 {
   text-transform: uppercase;
   font-size: 3em;
   font-weight: normal;
   padding: 16px 0 6px 0;
}

.logged-out .formLine {
   padding: 2px 0;
   height: 44px;
   line-height: 44px;
}

.logged-out form label {
   float: left;
   font-size: 1.2em;
   width: 124px;
   padding: 0 0 0 3px;
   display: block;
   height: 100%;
}

.logged-out form input[type=text],
.logged-out form input[type=password] {
   padding: 0 4px;
   width: 209px;
   height: 36px;
   
   transition: background 0.2s linear 0s, border 0.2s linear 0s;
}

.logged-out form input[type=text]:focus,
.logged-out form input[type=password]:focus {

}

.logged-out form button[type=submit] {
   padding-left: 12px;
   padding-right: 12px;
   width: 144px;
   height: 44px;
   cursor: pointer;
   margin-top: 2px;
   
   transition: background 0.2s linear 0s;
}

.logged-out form button[type=submit]:hover {
   
}

/* simple-option-list */
.simple-option-list {
   list-style-type: none;
   clear: both;
}

h2 + .simple-option-list {
   padding-left: 0;
}

h2 + .simple-option-list > li {
   margin-left: -16px;
   padding: 0 6px;
}

.simple-option-list .simple-option-list-actions {
   
   list-style-type: none;
   float: left;
}

.simple-option-list .simple-option-list-actions li {
   list-style-type: none;
   float: left;
}

.simple-option-list li {
   
   padding-right: 0 0 0 6px;
   min-height: 38px;
   line-height: 38px;
}

.simple-option-list li ul li.optionLink a {
   line-height: 26px;
   margin: 6px 0;
}

.simple-option-list .name-field {
   min-height: 38px;
   line-height: 38px;
   float: left;
}

/* inner right list in pages */
.page-right-list {
   list-style-type: none;
   float: right;
   padding: 0;
}

.page-right-list li {
   height: 24px;
   padding: 0 4px;
   line-height: 24px;
   min-height: 24px;
   margin: 6px 3px;
   float: left;
}

.page-right-list li i {
   margin-right: 6px;
   margin-left: 2px;
}

/* Messages */
#message  {
   padding: 12px;
   margin: 24px 0;
}

#message .fa-times-circle, 
#message .fa-times-circle + span {
   font-size: 1.2em;
}

#message .fa-check-circle, 
#message .fa-check-circle + span {
   font-size: 1.2em;
}

/* DatePicker */
#ui-datepicker-div {
   padding: 12px;
   position: absolute;
   top: -10000px;
}

#ui-datepicker-div.datepicker-on-bottom {
   margin-top: 4px;
}

#ui-datepicker-div.datepicker-on-top {
   margin-top: -4px;
}

#ui-datepicker-div.datepicker-on-top::before,
#ui-datepicker-div.datepicker-on-bottom::before  {
   width: 0px;
   height: 0px;
   border-style: solid;
   content: " ";
   position: absolute;
   left: 50%;
   margin-left: -6px;
}

#ui-datepicker-div.datepicker-on-bottom::before  {
   border-width: 0 8px 10px 8px;
   top: -10px;
}

#ui-datepicker-div.datepicker-on-top::before {
   border-width: 10px 8px 0 8px;
   bottom: -10px;
}

#ui-datepicker-div .ui-datepicker-header {
   height: 32px;
   margin-bottom: 4px;
}

#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-next {
   display: block;
   width: 32px;
   height: 32px;
   line-height: 32px;
   text-align: center;
   
   font-weight: bold;
}
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-header .ui-datepicker-next:hover {

   cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev {
   float: left;
}

#ui-datepicker-div .ui-datepicker-header .ui-datepicker-next {
   float: right;
}

#ui-datepicker-div .ui-datepicker-header .ui-datepicker-title {
   width: calc(100% - 80px);
   margin: 0 auto;
   height: 32px;
   line-height: 32px;
   text-align: center;

   font-weight: bold;
}

#ui-datepicker-div table th {
   padding: 8px 0;  
}

#ui-datepicker-div table td {
   padding: 2px;
}

#ui-datepicker-div table tbody tr:first-child td {
   padding-top: 4px;  
}

#ui-datepicker-div table td:first-child {
   padding-left: 0;  
}

#ui-datepicker-div table td:last-child {
   padding-right: 0;  
}

#ui-datepicker-div table td a  {
   text-decoration: none;
   display: block;
   height: 32px;
   width: 32px;
   line-height: 32px;
   text-align: center;

   transition: background 0.2s linear 0s, color 0.2s linear 0s;
}