@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&subset=latin-ext');

*
{
 font-family: 'Roboto', arial, sans-serif;
 font-size: 1em;
 box-sizing: border-box;
}

html
{
 overflow-y: scroll;
 min-height: 100%;
 position: relative;
}

body
{
 margin: 0;
 height: 100%;
}

.clr
{
 clear: both;
}

.center
{
 text-align: center;
}

.middle
{
 margin: 0 auto;
}

.right
{
 text-align: right;
}

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

.justify
{
 text-align: justify;
}

.strong
{
 font-weight: bold;
}

.float-right
{
 float: right;
}

.cursor-pointer
{
 cursor: pointer;
}

table
{
 font-size: 11pt;
}

table .red
{
 background-color: #f00;
 color: #fff;
}

small
{
 font-size: .8em;
}

.msg
{
 width: 100%;
 text-align: center;
 background-color: #3b3;
 color: #fff;
 font-weight: bold;
 margin: .5em 0;
 padding: .5em;
 border-radius: 5px;
}

.msg-error
{
 background-color: #b33;
}

p
{
 font-size: 12pt;
 line-height: 1.4em;
 margin-top: 0;
}

ul
{
 line-height: 1.4em;
}

a
{
 cursor: pointer;
}

h1
{
 font-size: 22pt;
 font-weight: bold;
 color: #000;
 text-align: center;
}

h2
{
 font-size: 18pt;
 font-weight: bold;
 margin-top: 0;
}

input,
select,
textarea
{
 border: 1px solid #ccc;
 padding: 5px;
 outline-color: #080;
 outline-width: 1px;
 max-width: 100%;
}

input[type="file"]
{
 border: none;
}

input.error
{
 background-color: #c88;
}

input.ok
{
 background-color: #cfc;
}

textarea.fullwidth
{
 clear: both;
 width: 100%;
}

.button
{
 cursor: pointer;
 box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
 font-family: Roboto, sans-serif;
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 font-size: 0.875rem;
 line-height: 2.25rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 text-decoration: none;
 text-transform: uppercase;
 -webkit-tap-highlight-color: transparent;
 will-change: transform, opacity;
 display: inline-block;
 position: relative;
 box-sizing: border-box;
 min-width: 64px;
 height: 36px;
 padding: 0 16px;
 border: none;
 outline: none;
 text-align: center;
 webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-appearance: none;
 overflow: hidden;
 vertical-align: middle;
 border-radius: 2px;
 background-color: #ccc;
 margin-bottom: .5em;
}

.button:disabled,
.button:disabled:hover,
.button-disabled,
.button-disabled:hover
{
 background-color: #888 !important;
 cursor: not-allowed !important;
}

.button:hover
{
 background-color: #ddd;
}

.button-green
{
 background-color: #3b3;
 color: #fff;
}

.button-green:hover
{
 background-color: #0c0;
}

.text-button
{
 cursor: pointer;
 display: inline-block;
 font-weight: bold;
 letter-spacing: 0.04em;
 text-decoration: none;
 text-transform: uppercase;
 color: var(--color-red);
 padding: 5px;
 border: 0;
 background: none;
 outline: 0;
}

.text-button:hover
{
 background-color: #ddd;
}

.text-button-small
{
 font-size: .7rem;
}

a.button
{
 text-decoration: none;
 display: inline-block;
}

header
{
 width: 100%;
 padding: 10px 20px;
 background-color: #933;
 position: fixed;
 top: 0;
 left: 0;
 -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
 z-index: 5000;
}

header > .header-title
{
 font-size: 20px !important;
 display: inline-block;
 font-weight: bold;
}

header > .header-title > a
{
 text-decoration: none;
}

header > div#header-username
{
 float: right;
 color: #fff;
 cursor: pointer;
}

header a
{
 color: #fff;
}

header img
{
 display: inline-block;
 vertical-align: bottom;
 height: 24px;
}

nav#user-menu
{
 display: none;
 position: fixed;
 top: 35px;
 right: 0;
 background-color: #933;
 color: #fff;
 padding: 10px 15px;
}

nav#user-menu > ul
{
 list-style: none;
 padding: 0;
}

nav#user-menu > ul > li
{
 margin-top: 20px;
}

nav#user-menu > ul > li > a
{
 color: #fff;
 text-decoration: none;
 display: block;
}

nav#user-menu > ul > li > a:hover
{
 color: #ddd;
}

#container
{
 padding: 60px 0 20px 0;
 margin: 0 20px;
}

footer
{
 font-size: 8pt;
 text-align: center;
 margin-bottom: 1em;
}

/* project list */

#project-list-filter
{
 text-align: center;
}

#project-list-filter > div
{
 display: inline-block;
 vertical-align: middle;
 margin-bottom: .5em;
}

div#project-list
{
 overflow-x: auto;
}

.open-new
{
 display: inline-block;
 float: right;
 width: 20px;
 height: 20px;
 margin: 3px;
 z-index: 100;
}

.open-new > img
{
 width: 100%;
 height: 100%;
}

#project-list > table
{
 width: 100%;
 margin: 0 auto;
}

#project-list > table > thead
{
 font-weight: bold;
}

#project-list > table td,
#project-list > table th
{
 padding: 4px;
 vertical-align: top;
}

#project-list > table th.sortable
{
 background: url(../img/bg.gif) no-repeat right 4px center;
 cursor: pointer;
}

#project-list > table th.sort-asc
{
 background: url(../img/asc.gif) no-repeat right 4px center;
}

#project-list > table th.sort-desc
{
 background: url(../img/desc.gif) no-repeat right 4px center;
}

#project-list > table > thead > tr
{
 background-color: #888;
 color: #fff;
 text-align: left;
}

#project-list > table > tbody > tr
{
 background-color: #e0e0e0;
}

#project-list > table > tbody > tr:nth-child(odd)
{
# background-color: #f0f0f0;
}

#project-list > table > tbody > tr:nth-child(even)
{
# background-color: #e0e0e0;
}

#project-list > table > tbody > tr:hover
{
 background-color: #ff8;
}

#project-list > table > thead > tr > th.header,
#project-list > table > thead > tr > th.tablesorter-header
{
 background: url(../img/bg.gif) no-repeat right 4px center;
}

#project-list > table > thead > tr > th.headerSortUp,
#project-list > table > thead > tr > th.tablesorter-headerDesc
{
 background: url(../img/asc.gif) no-repeat right 4px center;
}

#project-list > table > thead > tr > th.headerSortDown,
#project-list > table > thead > tr > th.tablesorter-headerAsc
{
 background: url(../img/desc.gif) no-repeat right 4px center;
}

table.list th
{
 background-color: #888;
 color: #fff;
 padding: 5px;
 text-align: left;
 font-weight: normal;
}

table.list td
{
 background-color: #e0e0e0;
 padding: 5px;
}

.pagination
{
 text-align: center;
 margin: .5em 0;
}

.pagination > a
{
 display: inline-block;
 padding: 5px;
 width: 2.5em;
 text-align: center;
 background-color: #eee;
 margin: 0 5px 5px 0;
 text-decoration: none;
 color: #ccc;
}

.pagination > span
{
 display: inline-block;
 padding: 5px;
 width: 3em;
 text-align: center;
 margin: 0 5px 5px 0;
 color: #ccc;
}

.pagination a.active
{
 color: #fff;
 background-color: #933;
}

.brand
{
 font-size: .9em;
 font-style: italic;
}

td.td-link
{
 cursor: pointer;
}

.tr-data
{
 display: none;
}

.tr-data > div
{
 display: inline-block;
 vertical-align: top;
 margin-right: 1em;
}

td.td-details-open
{
 cursor: pointer;
}

.item-edit
{
 height: 18px;
 cursor: pointer;
}

#project-data-edit-button
{
 height: 24px;
 cursor: pointer;
}

#project-source-edit
{
 display: none;
}

#project-customer-edit-button
{
 height: 14px;
 cursor: pointer;
}

.todo-past
{
 color: #f33;
}

td.project-no {white-space: nowrap;}
.project-planned {background-color: #ff0;}
.project-new {background-color: #fc0;}
.project-pending {background-color: #fc9;}
.project-quoted {background-color: #ffc;}
.project-ordered {background-color: #cfc;}
.project-registered {background-color: #8f8;}
.project-print {background-color: #fcc;}
.project-printed {background-color: #9ff;}
.project-invoice {background-color: #ebf;}
.project-invoiced {background-color: #2e75b6;}
.project-personal_collection {background-color: #a9d18e;}
.project-gls_collection {background-color: #5e913b;}
.project-done {background-color: #0a0;}
.project-lost {background-color: #666;}
.project-expired {background-color: #888;}
.project-deleted {background-color: #f66;}

/* project */

.workdir
{
 color: #00c;
 cursor: pointer;
}

.workdir-copied
{
 display: none;
 color: #f00;
 text-decoration: none !important;
}

/* autocomplete */

ul.ui-autocomplete
{
 z-index: 2000;
}

ul.ui-autocomplete > li
{
 padding: 5px;
 font-size: 12pt
}

#customer-info
{
 display: none;
 margin: .5em 0 0 3.5em;
}

/* new customer popup */

img.window-close
{
 float: right;
 margin: 0 0 10px 10px;
 width: 40px;
 height: 40px;
 cursor: pointer;
}

#new-customer-popup,
#project-data-popup,
#customer-data-popup,
#customer-edit-popup,
#quote-popup,
#quote-edit-popup,
#edit-popup,
#popup
{
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 min-height: 100%;
 z-index: 2000;
 background-color: rgba(0, 0, 0, 0.3);
 text-align: center;
 overflow: hidden;
}

#new-customer-popup-content,
#project-data-popup-content,
#customer-data-popup-content,
#customer-edit-popup-content,
#quote-popup-content,
#quote-edit-popup-content,
#edit-popup-content,
#popup-content
{
 display: inline-block;
 position: relative;
 background-color: #fff;
 padding: 20px;
 max-width: 90%;
 margin: 50px auto 50px auto;
 border: 1px solid #000;
 text-align: left;
}

#quote-popup-content,
#quote-edit-popup-content,
#edit-popup-content,
#popup-content
{
 width: 90%;
}

#new-customer-popup-content p,
#project-data-popup-content p,
#customer-data-popup-content p,
#customer-edit-popup-content p
{
 margin: 0 0 .25em 0;
}

#new-customer-popup-close
{
 cursor: pointer;
}

#new-customer-popup label,
#project-data-popup label,
#customer-data-popup label,
#customer-edit-popup label
{
 width: 6em;
 display: inline-block;
}

#project-data-popup label
{
 width: 15em;
}

#new-customer-popup input
{
 display: inline-block;
}

#project-data-popup-content > div,
#customer-data-popup-content > div,
#customer-edit-popup-content > div,
#new-customer-form > div
{
 display: inline-block;
 vertical-align: top;
 margin-right: 2em;
}

.quote-item
{
 padding: .5em;
}

.quote-item:hover
{
 background-color: #ff8;
}

/* project data */

#project-data
{
 float: left;
 margin-top: 10px;
}

#project-data > h1
{
 margin: 0 0 .5em 0;
}

#project-customer
{
 float: right;
 margin-left: 2em;
 margin-top: 10px;
}

#project-customer > p
{
 cursor: pointer;
}

/* fileupload */

#upload-input,
#upload-input-out
{
 background-color: #cfc;
 outline: 1px dashed black;
 outline-offset: -5px;
 padding: 1.5em 1em;
 text-align: center;
 margin-bottom: 1em;
 -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
 transition: outline-offset .15s ease-in-out, background-color .15s linear;
}

#upload-input.is-dragover,
#upload-input-out.is-dragover
{
 outline-offset: -7px;
 outline-color: #0f0;
 background-color: #fff;
}

.upload-file
{
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
}
.upload-file + label
{
 max-width: 80%;
 text-overflow: ellipsis;
 white-space: nowrap;
 cursor: pointer;
 display: inline-block;
 overflow: hidden;
}

#upload-gallery,
#upload-gallery-out
{
 margin-top: 1em;
 margin-bottom: .5em;
}

#upload-gallery img,
#upload-gallery-out img
{
 width: 100px;
 margin: 0 10px 10px 0;
 vertical-align: top;
 background: #ccc url(/img/upload-progress.gif) no-repeat;
 padding-top: 10px;
}

.progress
{
 background: #ccc url(/img/upload-progress.gif) repeat-x;
}

#upload-gallery img.uploaded,
#upload-gallery-out img.uploaded
{
 background: #0c0;
}

#upload-gallery img.error,
#upload-gallery-out img.error
{
 background: #c00;
}

#imageupload-progress
{
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 min-height: 100%;
 background-color: rgba(0, 0, 0, 0.7);
 text-align: center;
 color: #fff;
 font-size: 20pt;
 padding-top: 20%;
 z-index: 5000;
}

/* technology */

#technology-selection
{
 list-style: none;
 text-align: center;
}

#technology-selection > label
{
 display: inline-block;
 text-align: center;
 padding: 1em;
 width: 100px;
 vertical-align: middle;
 border: 1px dashed #ccc;
 margin: 0em .5em 1em .5em;
 cursor: pointer;
 background-color: #eee;
}

#technology-selection > label:hover
{
 border: 1px solid #080;
}

#technology-selection > label.selected
{
 background-color: #cfc;
}


div.technology
{
 display: none;
}

div.job
{
}

div.job-col
{
 display: inline-block;
 vertical-align: top;
 text-align: left;
 margin-right: 1em;
}

div.job label
{
 display: inline-block;
}

div.job input:read-only
{
 background-color: #f0f0f0;
}

.hidden
{
 visibility: hidden;
}

.table-info
{
 margin-bottom: 1em;
}

.table-info td
{
 padding: 5px;
 vertical-align: top;
}

/* Design */

.design-item input:read-only
{
 border: 0;
 outline: 0;
}

/* users */

table.table-grey
{
 margin: 0 auto;
}

table.table-grey > thead
{
 font-weight: bold;
}

table.table-grey td,
table.table-grey th
{
 padding: 4px;
 vertical-align: top;
}

table.table-grey > thead > tr
{
 background-color: #888;
 color: #fff;
 text-align: left;
}

table.table-grey > tbody > tr:nth-child(odd)
{
 background-color: #f0f0f0;
}

table.table-grey > tbody > tr:nth-child(even)
{
 background-color: #e0e0e0;
}

table.table-grey > tbody > tr.today
{
 background-color: #cfc;
}

table.table-grey > tbody > tr:hover
{
 background-color: #ff8;
}

tr.inactive
{
 color: #c00 !important;
}

img.table-icon
{
 width: 20px;
 height: 20px;
}

#user-form label
{
 display: inline-block;
 width: 8em;
}

/* MEDIA QUERIES */

@media all and (max-width: 1200px)
{
}

@media all and (max-width: 1000px)
{
}

@media all and (max-width: 900px)
{
}

@media all and (max-width: 500px)
{
 header {padding: 10px;}
 header > .header-title {font-size: 24px !important;}
 header img {height: 28px;}
 nav#user-menu {top: 45px;}
 #container {padding: 60px 0 20px 0; margin: 0 10px;}
 #technology-selection > label {width: 60px; padding: .5em;}
 #project-data {float: none;}
 #project-customer {float: none; clear: both; margin-left: auto;}
}

@media all and (max-width: 370px)
{
}