/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 30.11.2016, 12:13:05
Author : Konrad
*/
.autocompleete {
position: absolute;
background: white;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #bbb;
max-height: 12em;
overflow: hidden;
overflow-y: scroll;
}
.autocompleete li {
padding: 0.5em 1em;
cursor: pointer;
}
.autocompleete li:not(:last-child) {
border-bottom: 1px solid #bbb;
}
.autocompleete li:hover {
background: #eee;
}
#auto_export {
background-color: #f2f2f2 !important;
}
.export-builder {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -ms-flexbox;
display: flex;
background-color: #f2f2f2;
}
.export-builder .next-export {
font-size: 16px;
}
.export-builder input[type="text"],
.export-builder input[type="password"],
.export-builder input[type="number"] {
border-radius: 3px;
border: solid 1px #c9c9c9;
width: 100%;
height: 2.5em;
padding: 0.25em 0.7em;
background-color: #f9f9f9;
}
.export-builder .tooltip-row {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-bottom: 5px;
}
.export-builder .tooltip {
position: relative;
}
.export-builder .tooltip .tooltiptext {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
visibility: hidden;
width: 350px;
min-height: 75px;
max-width: 350px;
background-color: #555;
color: #fff;
text-align: center;
padding: 8px;
border-radius: 6px;
font-family: "Roboto", sans-serif !important;
font-weight: 400;
font-size: 13px;
line-height: normal;
position: absolute;
z-index: 1;
white-space: normal;
left: -75px;
margin-left: -80px;
opacity: 0;
transition: opacity 1s;
}
.export-builder .tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.export-builder .export-container {
width: 100%;
height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.export-builder .export-container .info-container {
width: 60%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.export-builder .export-container .info-container .info {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.export-builder .export-container .info-container .info .info-title {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.export-builder .export-container .info-container input {
width: 75%;
margin: 0 auto;
}
.export-builder .export-container .info-container label {
font-size: 16px;
}
.export-builder .export-container .config-container {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-align: center;
align-items: center;
min-height: 100px;
}
.export-builder .export-container .explanation-container {
text-align: left;
padding: 0 2em;
}
.export-builder .export-container .filter-container .filterRow {
width: 100%;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 1em;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
}
.export-builder .export-container .filter-container .filterRow select {
text-align: center;
-moz-text-align-last: center;
text-align-last: center;
}
.export-builder .export-container .filter-container .filterRow .label-print-epaper {
margin-top: 2px;
}
.export-builder .export-container .filter-container .filterRow .print-epaper .info,
.export-builder .export-container .filter-container .filterRow .single-upload .info {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
.export-builder .export-container .filter-container .filterRow .print-epaper .info .icon,
.export-builder .export-container .filter-container .filterRow .single-upload .info .icon {
margin-left: 5px;
margin-bottom: 4px;
}
.export-builder .export-container .filter-container .filterRow .print-epaper .type-content,
.export-builder .export-container .filter-container .filterRow .single-upload .type-content {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
margin-top: 4px;
margin-bottom: 8px;
}
.export-builder .export-container .filter-container .filterRow .print-epaper .type-content .print-container,
.export-builder .export-container .filter-container .filterRow .single-upload .type-content .print-container {
margin-right: 25px;
}
.export-builder .export-container .filter-container .filterRow .print-epaper .type-content .mdl-checkbox__label,
.export-builder .export-container .filter-container .filterRow .single-upload .type-content .mdl-checkbox__label {
font-size: 15px;
line-height: 16px;
}
.export-builder .export-container .filter-container .filterRow label {
display: block;
font-weight: bold;
}
.export-builder .export-container .filter-container .filterRow .location,
.export-builder .export-container .filter-container .filterRow .employee,
.export-builder .export-container .filter-container .filterRow .empty-div,
.export-builder .export-container .filter-container .filterRow .partnerGroup,
.export-builder .export-container .filter-container .filterRow .partner,
.export-builder .export-container .filter-container .filterRow .form.active,
.export-builder .export-container .filter-container .filterRow .print-epaper {
max-width: 400px;
min-width: 20%;
}
.export-builder .export-container .csv-pdf-container {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
margin: 15px 0;
}
.export-builder .export-container .csv-pdf-container label {
font-weight: 600;
}
.export-builder .export-container .csv-pdf-container select {
text-align: center;
-moz-text-align-last: center;
text-align-last: center;
}
.export-builder .export-container .button-container {
min-height: 100px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.export-builder .export-container .button-container .mdl-button--accent {
margin-right: 5px;
}
.weekday-container button {
background: #607d8b;
color: white;
}
.weekday-container button:hover,
.weekday-container button:active,
.weekday-container button:focus:not(:active) {
background: #607d8b;
}
.weekday-container button.active {
background-color: green;
}
.weekday-container button.active:hover,
.weekday-container button.active:active,
.weekday-container button.active:focus:not(:active) {
background-color: green;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 27.05.2016, 14:26:26
Author : Konrad Klockgether
*/
.context-menu {
position: absolute;
background-color: white;
border: 1px solid lightgray;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
display: none;
-ms-flex-direction: column;
flex-direction: column;
width: 250px;
z-index: 1;
font-size: 13px;
box-sizing: border-box;
}
.context-menu.is-active {
display: -ms-flexbox;
display: flex;
}
.context-menu * {
box-sizing: border-box;
}
.context-menu li {
margin: 0;
text-align: left;
padding: 0.5em 1em;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
cursor: pointer;
position: relative;
width: 250px - 2px;
color: #212121;
}
.context-menu li.is-active,
.context-menu li:not(.has-sub-menu):hover {
background-color: #2979ff;
color: white;
}
.context-menu li i {
font-size: 1.3em;
margin-right: 0.5em;
margin-top: 0.12em;
}
.context-menu li i.sub-menu-indicator {
display: none;
margin-right: 0;
}
.context-menu li label {
-ms-flex-positive: 1;
flex-grow: 1;
cursor: pointer;
}
.context-menu li.has-sub-menu > i.sub-menu-indicator {
display: block;
}
.context-menu li .sub-menu {
right: -250px;
top: -1px;
}
.context-menu li.is-active > .sub-menu {
display: -ms-flexbox;
display: flex;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 11.10.2016, 14:30:00
Author : Konrad Klockgether
*/
.date-picker {
position: absolute;
z-index: 15000;
height: auto;
background: white;
border-radius: 3px;
overflow: hidden;
transition: visibility 0ms linear 200ms, opacity 200ms ease-out, transform 200ms ease-out;
transform-origin: top;
transform: scale(0);
visibility: hidden;
opacity: 0;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
}
.date-picker.on {
transition: visibility 0ms linear, opacity 150ms ease-out, transform 150ms cubic-bezier(0, 0, 0.85, 1.35);
transform: none;
visibility: visible;
opacity: 1;
}
.date-picker.calculate-rect {
visibility: hidden;
transform: none;
}
.date-picker.no-animation {
transition: none;
}
.date-picker * {
box-sizing: border-box;
}
.date-picker > .header {
white-space: nowrap;
background-color: #2196f3;
color: white;
padding: 1em 1.2em;
}
.date-picker > .header h1,
.date-picker > .header h2 {
margin: 0;
line-height: normal;
cursor: pointer;
transition: color 250ms ease;
}
.date-picker > .header h2 {
font-size: 1.2em;
margin-bottom: 0.3em;
color: rgba(255, 255, 255, 0.7);
}
.date-picker > .header h2.on {
color: white;
}
.date-picker > .header h2.on + h1 {
color: rgba(255, 255, 255, 0.7);
}
.date-picker > .header h1 {
font-size: 2em;
}
.date-picker > .content {
overflow: hidden;
}
.date-picker > .content > .month-selector {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
margin-top: 0.5em;
}
.date-picker > .content > .month-selector i {
padding: 0.3em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.date-picker > .content > .month-selector .month {
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
font-weight: bold;
white-space: nowrap;
}
.date-picker > .content > .months {
position: relative;
}
.date-picker > .content > .months .month {
background-color: white;
padding: 0.5em 0.5em 0 0.5em;
transition: transform 150ms ease-in-out;
transform: none;
}
.date-picker > .content > .months .month.future,
.date-picker > .content > .months .month.past {
position: absolute;
top: 0;
left: 0;
}
.date-picker > .content > .months .month.future {
transform: translateX(100%);
}
.date-picker > .content > .months .month.past {
transform: translateX(-100%);
}
.date-picker > .content > .months .month table {
margin: 0.5em 0.5em 0 0.5em;
}
.date-picker > .content > .months .month table th,
.date-picker > .content > .months .month table td {
min-width: 2.4em;
min-height: 2.4em;
max-width: 2.4em;
max-height: 2.4em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.date-picker > .content > .months .month table th {
font-weight: normal;
color: #777;
}
.date-picker > .content > .months .month table td {
padding: 0.5em;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.date-picker > .content > .months .month table td.today {
color: #2196f3;
}
.date-picker > .content > .months .month table td.selected {
background: #2196f3;
color: white;
}
.date-picker > .content > .months .month table td.empty {
color: transparent;
}
.date-picker > .content > .years {
background: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100%;
overflow: auto;
transition: visibility 0ms linear 250ms, transform 250ms ease-in, opacity 250ms ease-in;
visibility: hidden;
transform: scale(0);
opacity: 0;
}
.date-picker > .content > .years.on {
transition: visibility 0ms linear 0ms, transform 250ms ease-out, opacity 250ms ease-out;
visibility: visible;
transform: none;
opacity: 1;
}
.date-picker > .content > .years.on ~ .months,
.date-picker > .content > .years.on ~ .month-selector {
transition: visibility 0ms linear 250ms, transform 250ms ease-in, opacity 250ms ease-in;
visibility: hidden;
transform: scale(0);
opacity: 0;
}
.date-picker > .content > .years ~ .months,
.date-picker > .content > .years ~ .month-selector {
transition: visibility 0ms linear 0ms, transform 250ms ease-out, opacity 250ms ease-out;
visibility: visible;
transform: none;
opacity: 1;
}
.date-picker > .content > .years ~ .months.month-selector,
.date-picker > .content > .years ~ .month-selector.month-selector {
transform-origin: bottom;
}
.date-picker > .content > .years .shaddow {
height: 25%;
width: 100%;
position: absolute;
left: 0;
pointer-events: none;
}
.date-picker > .content > .years .shaddow.top {
top: 0;
background: linear-gradient(white, transparent);
}
.date-picker > .content > .years .shaddow.bottom {
bottom: 0;
background: linear-gradient(transparent, white);
}
.date-picker > .content > .years ul {
max-height: 100%;
overflow: auto;
margin: 0;
padding: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
padding: 40% 0;
font-size: 1.6em;
}
.date-picker > .content > .years ul li {
list-style: none;
margin: 0.4em 0;
cursor: pointer;
}
.date-picker > .content > .years ul li.selected {
color: #2196f3;
font-size: 1.5em;
}
.date-picker > .actions {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
}
.date-picker > .actions a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 1em 1.2em;
background: none;
border: none;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
color: #2196f3;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 23.05.2016, 12:34:31
Author : Konrad
*/
.a4 {
width: 210px * 3;
height: 297px * 3;
background-color: white;
position: relative;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.a4 div.document-controll {
background: white;
width: 50px;
position: absolute;
top: 0;
right: -50px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
z-index: -1;
}
.a4 div.document-controll i {
padding: 0.2em 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.a4 div.document-controll i:hover {
background-color: lightgray;
}
.a4 div.item-holder {
position: absolute;
border: 1px solid transparent;
/* ---- holder types start ---- */
/* ---- holder types end ---- */
}
.a4 div.item-holder > .naviOptions {
position: absolute;
top: -28px;
height: 28px;
right: -1px;
border: solid 1px darkgray;
display: none;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.a4 div.item-holder > .naviOptions i {
cursor: pointer;
display: none;
pointer-events: auto;
background-color: white;
padding: 1px;
}
.a4 div.item-holder > .naviOptions i:first-of-type {
display: block;
}
.a4 div.item-holder > .naviOptions i:hover {
background-color: lightgray;
}
.a4 div.item-holder.is-active,
.a4 div.item-holder:hover {
border: 1px dashed darkgray;
}
.a4 div.item-holder.is-active > .naviOptions,
.a4 div.item-holder:hover > .naviOptions {
display: -ms-flexbox;
display: flex;
}
.a4 div.item-holder:hover {
z-index: 1000 !important;
}
.a4 div.item-holder.is-active > .naviOptions i {
display: block;
}
.a4 div.item-holder.is-active > .naviOptions i:first-of-type {
display: none;
}
.a4 div.item-holder.is-active * {
pointer-events: auto;
}
.a4 div.item-holder * {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.a4 div.item-holder.is-draggable {
cursor: move;
}
.a4 div.item-holder.is-draggable > .naviOptions i.drag {
background-color: plum;
}
.a4 div.item-holder.is-draggable * {
pointer-events: none;
}
.a4 div.item-holder > .sticky-drag {
position: absolute;
display: none;
}
.a4 div.item-holder > .sticky-drag.sticky-drag-top {
border-top: 1px solid red;
left: -210px * 3;
top: -1px;
height: 1px;
width: 210px * 3 * 2;
}
.a4 div.item-holder > .sticky-drag.sticky-drag-left {
border-left: 1px solid red;
left: -1px;
top: -297px * 3;
height: 297px * 3 * 2;
width: 1px;
}
.a4 div.item-holder.is-sticky-drag-top > .sticky-drag-top {
display: block;
}
.a4 div.item-holder.is-sticky-drag-left > .sticky-drag-left {
display: block;
}
.a4 div.item-holder > .resize {
background: lightgray;
position: absolute;
background-clip: padding-box;
box-sizing: content-box;
display: none;
}
.a4 div.item-holder > .resize.resize-right {
width: 5px;
height: 100%;
top: 0;
right: -60px;
cursor: col-resize;
border-left: 20px solid transparent;
border-right: 50px solid transparent;
}
.a4 div.item-holder > .resize.resize-bottom {
width: 100%;
height: 5px;
bottom: -60px;
left: 0;
cursor: row-resize;
border-top: 20px solid transparent;
border-bottom: 50px solid transparent;
}
.a4 div.item-holder.is-resizeable * {
pointer-events: none;
}
.a4 div.item-holder.is-resizeable > .resize {
display: block;
pointer-events: auto;
}
.a4 div.item-holder.is-resizeable > .naviOptions i.resize {
background-color: plum;
}
.a4 div.item-holder > .sticky-resize {
position: absolute;
border-left: 1px solid red;
border-bottom: 1px solid red;
display: none;
}
.a4 div.item-holder > .sticky-resize.sticky-resize-height {
border-top: 1px solid red;
height: 100%;
width: 5px;
left: -10px;
top: 0;
}
.a4 div.item-holder > .sticky-resize.sticky-resize-width {
border-right: 1px solid red;
height: 5px;
width: 100%;
left: 0;
bottom: -10px;
}
.a4 div.item-holder.is-sticky-resize-height > .sticky-resize-height {
display: block;
}
.a4 div.item-holder.is-sticky-resize-width > .sticky-resize-width {
display: block;
}
.a4 div.item-holder > .remove-question {
position: absolute;
background: white;
height: 100%;
width: 100%;
display: none;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
max-width: 200px;
max-height: 100px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.a4 div.item-holder > .remove-question > label {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.a4 div.item-holder > .remove-question > label.question {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
background-color: lightgray;
}
.a4 div.item-holder > .remove-question > label.answer {
-ms-flex-positive: 1;
flex-grow: 1;
cursor: pointer;
pointer-events: auto;
}
.a4 div.item-holder > .remove-question > label.answer.ok {
background-color: lightcoral;
}
.a4 div.item-holder > .remove-question > label.answer.no {
background-color: lightgreen;
}
.a4 div.item-holder.is-removeable * {
pointer-events: none;
}
.a4 div.item-holder.is-removeable > .remove-question {
display: -ms-flexbox;
display: flex;
}
.a4 div.item-holder > .zIndex {
position: absolute;
right: -30px;
top: 0;
display: none;
-ms-flex-direction: column;
flex-direction: column;
width: 30px;
}
.a4 div.item-holder > .zIndex input,
.a4 div.item-holder > .zIndex button {
pointer-events: auto;
}
.a4 div.item-holder > .zIndex input {
width: 100%;
border: solid 1px lightgray;
text-align: center;
}
.a4 div.item-holder > .zIndex input::-webkit-outer-spin-button,
.a4 div.item-holder > .zIndex input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.a4 div.item-holder.is-zIndex * {
pointer-events: none;
}
.a4 div.item-holder.is-zIndex > .zIndex {
display: -ms-flexbox;
display: flex;
}
.a4 div.item-holder.is-zIndex > .naviOptions i.zIndex {
background-color: plum;
}
.a4 div.item-holder > .history {
position: absolute;
right: -95px;
top: 0;
width: 90px;
background: white;
border: solid 1px darkgray;
display: none;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
max-height: 310px;
overflow: auto;
}
.a4 div.item-holder > .history li {
cursor: pointer;
}
.a4 div.item-holder > .history li:not(:last-of-type) {
border-bottom: 1px solid lightgray;
}
.a4 div.item-holder > .history li:not(.empty):hover {
background-color: lightgray;
}
.a4 div.item-holder > .history li.empty {
cursor: default;
}
.a4 div.item-holder.is-history * {
pointer-events: none;
}
.a4 div.item-holder.is-history > .history {
display: -ms-flexbox;
display: flex;
}
.a4 div.item-holder.is-history > .history li {
pointer-events: auto;
}
.a4 div.item-holder.is-history > .naviOptions i.history {
background-color: plum;
}
.a4 div.item-holder.is-history-preview {
border: 1px red dotted;
}
.a4 div.item-holder.simpleMultiLineText textarea {
height: 100%;
width: 100%;
resize: none;
border: none;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 16.01.2017, 15:14:09
Author : Konrad
*/
body,
html {
font-family: "Roboto", sans-serif !important;
}
.removeitem {
display: none;
}
.mdl-layout__drawer.hidedrawer {
transform: translateX(1);
}
.ql-container {
width: 100%;
max-width: 100%;
display: block;
max-height: 15em;
height: 15em;
min-height: 15em;
margin-bottom: 15px;
word-break: break-word;
}
.ql-toolbar {
margin-top: 15px;
}
.form-builder {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -ms-flexbox;
display: flex;
background-color: #f2f2f2;
}
.form-builder .cursorpointer {
cursor: pointer;
}
.form-builder tr {
background-color: white;
}
.form-builder tr[attr="options"] {
white-space: pre-wrap;
font-size: 10px;
line-height: 1.5em;
}
.form-builder table[attr="optionsDefault"] {
margin-top: 15px;
}
.form-builder table.input.tablerelative:first-of-type {
margin-top: 5em;
}
.form-builder select {
display: inline-block;
height: 30px;
padding: 4px 12px;
outline: none;
border: solid 2px #f2f2f2;
border-radius: 4px;
margin-left: 4px;
width: 100%;
background: url("data:image/svg+xml;utf8,");
background-size: 12px;
background-position: calc(100% - 15px) 12px;
background-repeat: no-repeat;
}
.form-builder input {
border: solid 2px #f2f2f2;
height: 30px;
margin: 4px;
border-radius: 3px;
padding: 4px 12px;
font-size: 14px;
}
.form-builder .tablerelative {
position: relative;
}
.form-builder .absright {
position: absolute;
right: 10px;
top: 17px;
}
.form-builder > .form,
.form-builder > .blueprints,
.form-builder > .preview {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
}
.form-builder > .form > h3,
.form-builder > .blueprints > h3,
.form-builder > .preview > h3,
.form-builder > .form > label,
.form-builder > .blueprints > label,
.form-builder > .preview > label {
text-align: center;
display: block;
}
.form-builder > .preview {
transition: transform 250ms ease-out;
transform: translateZ(0);
background: white;
}
.form-builder > .preview.active {
transform: translateX(-100%) translateZ(0);
box-shadow: -2px 0px 13px -4px rgba(0, 0, 0, 0.75);
}
.form-builder > .form {
position: relative;
padding-bottom: 5em;
}
.form-builder > .form input:invalid {
border: solid 1px #f44336;
}
.form-builder .blueprints input,
.form-builder .blueprints select,
.form-builder .blueprints .ql-container,
.form-builder .blueprints .ql-toolbar {
pointer-events: none;
}
.form-builder > .form .input,
.form-builder > .blueprints .input {
display: -ms-flexbox;
display: flex;
max-width: 100%;
padding: 1em;
margin: 1em 0.5em;
-ms-flex-pack: start;
justify-content: flex-start;
background-color: #fff;
border-radius: 4px;
}
.form-builder > .form .input input:disabled,
.form-builder > .blueprints .input input:disabled {
background-color: #dddddd;
}
.form-builder > .form .input.invalid,
.form-builder > .blueprints .input.invalid {
border: solid 1px #f44336;
}
.form-builder > .form .input h4,
.form-builder > .blueprints .input h4 {
margin: 0;
}
.form-builder > .form .input.input-tel .dont-display,
.form-builder > .blueprints .input.input-tel .dont-display {
display: none;
}
.form-builder > .form .input.input-address .dont-display,
.form-builder > .blueprints .input.input-address .dont-display {
display: none;
}
.form-builder > .form .input.input-address .inputs,
.form-builder > .blueprints .input.input-address .inputs {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.form-builder > .form .input.input-address .inputs input[name="postalCode"],
.form-builder > .blueprints .input.input-address .inputs input[name="postalCode"] {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
.form-builder > .form .input.input-address .inputs input[name="city"],
.form-builder > .blueprints .input.input-address .inputs input[name="city"] {
-ms-flex-preferred-size: 70%;
flex-basis: 70%;
-ms-flex-positive: 1;
flex-grow: 1;
}
.form-builder > .form .input.input-address .inputs input[name="street"],
.form-builder > .blueprints .input.input-address .inputs input[name="street"] {
-ms-flex-positive: 1;
flex-grow: 1;
}
.form-builder > .form .input.input-address .inputs input[name="houseNumber"],
.form-builder > .blueprints .input.input-address .inputs input[name="houseNumber"] {
-ms-flex-preferred-size: 18%;
flex-basis: 18%;
}
.form-builder > .form .input.input-address .inputs input[name="houseNumberExtra"],
.form-builder > .blueprints .input.input-address .inputs input[name="houseNumberExtra"] {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
}
.form-builder > .form .input.input-default .inputs table,
.form-builder > .blueprints .input.input-default .inputs table {
width: 100%;
background-color: #eee;
margin: 0.5em;
}
.form-builder > .form .input.input-default .inputs table tr:first-child td,
.form-builder > .blueprints .input.input-default .inputs table tr:first-child td {
padding-top: 0.5em;
}
.form-builder > .form .input.input-default .inputs table tr:last-child td,
.form-builder > .blueprints .input.input-default .inputs table tr:last-child td {
padding-bottom: 0.5em;
}
.form-builder > .form .input.input-default .inputs table tr td,
.form-builder > .blueprints .input.input-default .inputs table tr td {
padding-right: 0.5em;
}
.form-builder > .form .input.input-default .inputs table tr td:first-child,
.form-builder > .blueprints .input.input-default .inputs table tr td:first-child {
padding-left: 0.5em;
}
.form-builder > .form .input.input-default .inputs table input:not([type="checkbox"]),
.form-builder > .blueprints .input.input-default .inputs table input:not([type="checkbox"]) {
width: 100%;
}
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="options"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="options"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="min"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="min"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="max"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="max"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="regex"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="regex"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="contact"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="contact"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="autooptin"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="autooptin"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="date_min"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="date_min"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="date_min_in"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="date_min_in"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="date_minage"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="date_minage"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="emptySelect"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="emptySelect"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="date_max"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="date_max"],
.form-builder > .form .input.input-default .inputs table[type="text"] tr[attr="startdate_weekday"],
.form-builder > .blueprints .input.input-default .inputs table[type="text"] tr[attr="startdate_weekday"] {
display: none;
}
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="options"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="options"],
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="min"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="min"],
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="max"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="max"],
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="regex"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="regex"],
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="date_min"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="date_min"],
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="date_min_in"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="date_min_in"],
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="date_minage"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="date_minage"],
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="emptySelect"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="emptySelect"],
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="date_max"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="date_max"],
.form-builder > .form .input.input-default .inputs table[type="email"] tr[attr="startdate_weekday"],
.form-builder > .blueprints .input.input-default .inputs table[type="email"] tr[attr="startdate_weekday"] {
display: none;
}
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="options"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="options"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="minLength"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="minLength"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="maxLength"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="maxLength"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="date_min"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="date_min"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="contact"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="contact"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="autooptin"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="autooptin"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="date_min_in"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="date_min_in"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="date_minage"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="date_minage"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="emptySelect"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="emptySelect"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="regex"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="regex"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="date_max"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="date_max"],
.form-builder > .form .input.input-default .inputs table[type="number"] tr[attr="startdate_weekday"],
.form-builder > .blueprints .input.input-default .inputs table[type="number"] tr[attr="startdate_weekday"] {
display: none;
}
.form-builder > .form .input.input-default .inputs table[type="date"] tr[attr="options"],
.form-builder > .blueprints .input.input-default .inputs table[type="date"] tr[attr="options"],
.form-builder > .form .input.input-default .inputs table[type="date"] tr[attr="minLength"],
.form-builder > .blueprints .input.input-default .inputs table[type="date"] tr[attr="minLength"],
.form-builder > .form .input.input-default .inputs table[type="date"] tr[attr="maxLength"],
.form-builder > .blueprints .input.input-default .inputs table[type="date"] tr[attr="maxLength"],
.form-builder > .form .input.input-default .inputs table[type="date"] tr[attr="min"],
.form-builder > .blueprints .input.input-default .inputs table[type="date"] tr[attr="min"],
.form-builder > .form .input.input-default .inputs table[type="date"] tr[attr="max"],
.form-builder > .blueprints .input.input-default .inputs table[type="date"] tr[attr="max"],
.form-builder > .form .input.input-default .inputs table[type="date"] tr[attr="contact"],
.form-builder > .blueprints .input.input-default .inputs table[type="date"] tr[attr="contact"],
.form-builder > .form .input.input-default .inputs table[type="date"] tr[attr="autooptin"],
.form-builder > .blueprints .input.input-default .inputs table[type="date"] tr[attr="autooptin"],
.form-builder > .form .input.input-default .inputs table[type="date"] tr[attr="emptySelect"],
.form-builder > .blueprints .input.input-default .inputs table[type="date"] tr[attr="emptySelect"],
.form-builder > .form .input.input-default .inputs table[type="date"] tr[attr="regex"],
.form-builder > .blueprints .input.input-default .inputs table[type="date"] tr[attr="regex"] {
display: none;
}
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="required"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="required"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="min"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="min"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="max"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="max"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="minLength"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="minLength"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="maxLength"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="maxLength"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="date_min"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="date_min"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="date_max"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="date_max"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="contact"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="contact"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="autooptin"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="autooptin"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="date_min_in"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="date_min_in"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="date_minage"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="date_minage"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="regex"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="regex"],
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="startdate_weekday"],
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="startdate_weekday"] {
display: none;
}
.form-builder > .form .input.input-default .inputs table[type="select"] tr[attr="options"] td,
.form-builder > .blueprints .input.input-default .inputs table[type="select"] tr[attr="options"] td {
padding-bottom: 0.5em;
}
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="options"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="options"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="min"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="min"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="max"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="max"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="minLength"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="minLength"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="maxLength"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="maxLength"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="date_min"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="date_min"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="date_max"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="date_max"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="contact"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="contact"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="autooptin"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="autooptin"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="date_min_in"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="date_min_in"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="date_minage"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="date_minage"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="emptySelect"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="emptySelect"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="regex"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="regex"],
.form-builder > .form .input.input-default .inputs table[type="iban"] tr[attr="startdate_weekday"],
.form-builder > .blueprints .input.input-default .inputs table[type="iban"] tr[attr="startdate_weekday"] {
display: none;
}
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="options"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="options"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="min"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="min"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="max"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="max"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="date_min"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="date_min"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="date_max"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="date_max"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="contact"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="contact"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="date_min_in"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="date_min_in"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="date_minage"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="date_minage"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="emptySelect"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="emptySelect"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="regex"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="regex"],
.form-builder > .form .input.input-default .inputs table[type="tel"] tr[attr="startdate_weekday"],
.form-builder > .blueprints .input.input-default .inputs table[type="tel"] tr[attr="startdate_weekday"] {
display: none;
}
.form-builder > .form .input.input-text input[name="checkbox"],
.form-builder > .blueprints .input.input-text input[name="checkbox"] {
vertical-align: middle;
}
.form-builder > .form .input.input-text input[name="checkbox"] + span,
.form-builder > .blueprints .input.input-text input[name="checkbox"] + span {
font-size: 0.8em;
}
.form-builder > .form .input.input-text input[name="smalltext"],
.form-builder > .blueprints .input.input-text input[name="smalltext"] {
vertical-align: middle;
}
.form-builder > .form .input.input-text input[name="smalltext"] + span,
.form-builder > .blueprints .input.input-text input[name="smalltext"] + span {
font-size: 0.8em;
}
.form-builder > .form .input.input-raffle .raffle td:first-child label,
.form-builder > .blueprints .input.input-raffle .raffle td:first-child label {
display: block;
width: 15rem;
}
.form-builder > .form .input.input-raffle .raffle td:first-child label input,
.form-builder > .blueprints .input.input-raffle .raffle td:first-child label input {
height: auto;
}
.form-builder > .form .input.input-raffle tbody,
.form-builder > .blueprints .input.input-raffle tbody {
width: 100%;
}
.form-builder > .form .input.input-raffle tbody tr,
.form-builder > .blueprints .input.input-raffle tbody tr {
width: 100%;
}
.form-builder > .form .input.input-raffle tbody tr td,
.form-builder > .blueprints .input.input-raffle tbody tr td {
width: 100%;
}
.form-builder > .form .input.input-raffle tbody tr td table,
.form-builder > .blueprints .input.input-raffle tbody tr td table {
width: 98%;
}
.form-builder > .form .input.input-raffle tbody tr td table tbody td,
.form-builder > .blueprints .input.input-raffle tbody tr td table tbody td {
width: 0%;
}
.form-builder > .form .input.input-image .inputs,
.form-builder > .blueprints .input.input-image .inputs {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.form-builder > .form .input.input-image .inputs img.thumb,
.form-builder > .blueprints .input.input-image .inputs img.thumb {
max-width: 70%;
max-height: 400px;
margin: auto;
width: 50%;
}
.form-builder > .form .input.input-image .options tr td:first-of-type,
.form-builder > .blueprints .input.input-image .options tr td:first-of-type {
white-space: nowrap;
}
.form-builder > .form .input .options,
.form-builder > .blueprints .input .options {
vertical-align: top;
padding-left: 0.5em;
}
.form-builder > .form .input .options table,
.form-builder > .blueprints .input .options table {
margin-left: 0.5em;
}
.form-builder > .form .input .options table tr td:first-of-type,
.form-builder > .blueprints .input .options table tr td:first-of-type {
padding-right: 0.5em;
}
.form-builder > .form .input.insert-before,
.form-builder > .blueprints .input.insert-before {
position: relative;
}
.form-builder > .form .input.insert-before:before,
.form-builder > .blueprints .input.insert-before:before {
content: "";
background: #f44336;
width: 100%;
position: absolute;
height: 3px;
left: 0;
top: -0.6em;
}
.form-builder .control-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
height: 5em;
-ms-flex-pack: distribute;
justify-content: space-around;
color: #ffffff;
background-color: #607d8b;
line-height: 5em;
position: fixed;
top: 0px;
z-index: 2;
width: 50%;
}
.form-builder .control-bar > * {
-ms-flex-item-align: center;
align-self: center;
}
.form-builder .control-bar i.save,
.form-builder .control-bar i.cancel,
.form-builder .control-bar i.preview,
.form-builder .control-bar i.delete,
.form-builder .control-bar i.back {
cursor: pointer;
}
.form-builder .mirrored {
transform: rotate(90deg);
}
.form-builder .spin {
transform: rotate(270deg);
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 17.02.2017, 17:32:00
Author : Konrad
*/
body,
html {
font-family: "Roboto", sans-serif !important;
}
.formExportCsv-builder {
position: absolute;
z-index: 10;
top: 0;
left: 0;
background-color: #f2f2f2;
width: 100%;
height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
}
.formExportCsv-builder .tooltip {
position: relative;
}
.formExportCsv-builder .tooltip .tooltiptext {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
visibility: hidden;
width: 350px;
min-height: 75px;
max-width: 350px;
background-color: #555;
color: #fff;
text-align: center;
padding: 8px;
border-radius: 6px;
font-family: "Roboto", sans-serif !important;
font-weight: 400;
font-size: 13px;
line-height: normal;
position: absolute;
z-index: 1;
white-space: normal;
left: -75px;
margin-left: -80px;
opacity: 0;
transition: opacity 1s;
}
.formExportCsv-builder .tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.formExportCsv-builder .export-content {
margin: 0.5em;
min-height: 90%;
border-radius: 1em;
-ms-flex-preferred-size: 49%;
flex-basis: 49%;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
border: dashed 3px grey;
margin-top: 5.5em;
}
.formExportCsv-builder .functions {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-left: 5em;
}
.formExportCsv-builder .functions select {
min-width: 300px;
}
.formExportCsv-builder .item {
background-color: white;
}
.formExportCsv-builder .item td {
text-align: left;
}
.formExportCsv-builder .item[attr="options"] {
white-space: pre-wrap;
font-size: 10px;
line-height: 1.5em;
}
.formExportCsv-builder table[attr="optionsDefault"] {
margin-top: 15px;
}
.formExportCsv-builder table.item.input.blueprint:first-of-type {
margin-top: 5.5em;
}
.formExportCsv-builder select {
display: inline-block;
height: 30px;
padding: 4px 12px;
outline: none;
border: solid 2px #f2f2f2;
border-radius: 4px;
margin-left: 4px;
width: 100%;
min-width: 250px;
background: url("data:image/svg+xml;utf8,");
background-size: 12px;
background-position: calc(100% - 15px) 12px;
background-repeat: no-repeat;
}
.formExportCsv-builder input:not([type="checkbox"]) {
border: solid 2px #f2f2f2;
height: 30px;
margin: 4px;
border-radius: 3px;
padding: 4px 12px;
font-size: 14px;
}
.formExportCsv-builder .csv-inputs {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.formExportCsv-builder > .export,
.formExportCsv-builder > .blueprints {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
overflow-y: auto;
overflow-x: hidden;
}
.formExportCsv-builder > .export > h3,
.formExportCsv-builder > .blueprints > h3,
.formExportCsv-builder > .export > label,
.formExportCsv-builder > .blueprints > label {
text-align: center;
display: block;
}
.formExportCsv-builder > .export .item,
.formExportCsv-builder > .blueprints .item {
cursor: grab;
cursor: -webkit-grab;
}
.formExportCsv-builder > .export {
position: relative;
}
.formExportCsv-builder > .export input:invalid {
border: solid 1px red;
}
.formExportCsv-builder .blueprints input,
.formExportCsv-builder .blueprints select {
pointer-events: none;
}
.formExportCsv-builder .blueprints input.placeholder_number,
.formExportCsv-builder .blueprints select.placeholder_number {
width: 75px;
}
.formExportCsv-builder > .export .input,
.formExportCsv-builder > .blueprints .input {
display: -ms-flexbox;
display: flex;
max-width: 100%;
padding: 1em;
margin: 1em 0.5em;
-ms-flex-pack: start;
justify-content: flex-start;
background-color: #fff;
border-radius: 4px;
}
.formExportCsv-builder > .export .input h4,
.formExportCsv-builder > .blueprints .input h4 {
margin: 0;
}
.formExportCsv-builder > .export .input.inputs,
.formExportCsv-builder > .blueprints .input.inputs {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-preferred-size: 70%;
flex-basis: 70%;
}
.formExportCsv-builder > .export .insert-before,
.formExportCsv-builder > .blueprints .insert-before {
position: relative;
}
.formExportCsv-builder > .export .insert-before:before,
.formExportCsv-builder > .blueprints .insert-before:before {
content: "";
background: red;
width: 100%;
position: absolute;
height: 3px;
left: 0;
top: -0.6em;
}
.formExportCsv-builder > .export .insert-after,
.formExportCsv-builder > .blueprints .insert-after {
position: relative;
}
.formExportCsv-builder > .export .insert-after:before,
.formExportCsv-builder > .blueprints .insert-after:before {
content: "";
background: red;
width: 100%;
position: absolute;
height: 3px;
left: 0;
bottom: -0.6em;
}
.formExportCsv-builder .control-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
height: 5em;
-ms-flex-pack: distribute;
justify-content: space-around;
color: #ffffff;
background-color: #607d8b;
line-height: 5em;
position: fixed;
top: 0px;
z-index: 5;
width: 50%;
}
.formExportCsv-builder .control-bar > * {
-ms-flex-item-align: center;
align-self: center;
}
.formExportCsv-builder .control-bar i.ok,
.formExportCsv-builder .control-bar i.close,
.formExportCsv-builder .control-bar i.preview,
.formExportCsv-builder .control-bar i.delete {
cursor: pointer;
}
.formExportCsv-builder .customerXML {
width: calc(100% - 1em);
margin: 0.5em;
min-height: 75%;
padding: 1em 1em 1em 4em;
resize: none;
border-radius: 1em;
overflow-y: auto;
font-size: 1em;
}
.formExportCsv-builder .blueprints-table {
margin-top: 1em;
margin-bottom: 2em;
}
.formExportCsv-builder .blueprints-table tr td:first-child {
border-right: 1px solid darkgray;
padding-right: 0.5em;
}
.formExportCsv-builder .blueprints-table tr td:last-child {
cursor: pointer;
padding-left: 0.5em;
}
.formExportCsv-builder .blueprints-table tr td:last-child label {
cursor: pointer;
}
.formExportCsv-builder .blueprints-table tr td {
padding-top: 0.5em;
border-top: 1px solid lightgray;
}
.formExportCsv-builder .blueprints-table .table-header {
cursor: default !important;
font-weight: 700;
border-top: 0px;
border-bottom: 1px solid darkgray;
}
.formExportCsv-builder .blueprints-table .table-header label {
cursor: default !important;
}
.formExportCsv-builder .infobox {
font-size: 0.7rem;
margin-top: 1rem;
text-align: left;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.formExportCsv-builder .functions .functions-container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.formExportCsv-builder td.labels {
min-width: 100px;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 16.03.2017, 15:07:29
Author : Konrad
*/
.form-filter {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.form-filter > div {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: baseline;
align-items: baseline;
-ms-flex-pack: center;
justify-content: center;
margin: 0.5em;
border: 1px solid black;
padding: 0.5em;
}
.form-filter > div label {
font-size: 1.2em;
}
.form-filter > div span {
font-size: 0.9em;
}
.form-filter .filter-sign {
max-width: 20em;
}
.form-filter .filter-address textarea {
min-width: 20em;
}
.form-filter .filter-default ul {
padding: 0;
margin: 0;
}
.form-filter .filter-default ul li {
margin: 0.5em 0;
background: #eee;
padding: 0 0.5em 0.5em 0.5em;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.form-filter .filter-default ul li:last-of-type {
margin-bottom: 0;
}
.form-filter .filter-default ul label {
font-size: 1em;
font-weight: normal !important;
text-align: left;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 02.06.2016, 11:37:33
Author : Konrad
*/
button.loader {
transition: min-width 250ms, padding 250ms, border-radius 250ms, font-size 250ms;
}
button.loader.is-loading,
button.loader.is-done,
button.loader.is-abort {
font-size: 0;
padding: 0;
min-width: 36px;
border-radius: 50%;
transition: min-width 250ms, padding 250ms, border-radius 250ms;
}
button.loader.is-loading .mdl-spinner {
visibility: visible;
height: 24px;
width: 24px;
position: absolute;
top: 6px;
left: 0;
right: 0;
margin: auto;
}
button.loader.is-loading .mdl-spinner.mdl-spinner--single-color .mdl-spinner__layer {
border-color: white;
}
@media (min-width: 768px) {
button.loader.is-loading .mdl-spinner.mdl-spinner--single-color .mdl-spinner__layer .mdl-spinner__circle {
border-style: dotted;
}
}
button.loader .mdl-spinner {
visibility: hidden;
}
button.loader.is-done,
button.loader.is-abort {
text-align: left;
}
button.loader.is-done i.done {
margin-left: 6px;
width: 24px;
transition: width 500ms;
}
button.loader.is-abort i.abort {
margin-left: 6px;
width: 24px;
transition: width 500ms;
}
button.loader i.done,
button.loader i.abort {
overflow: hidden;
transition: none;
width: 0px;
}
.delayed-text-input {
position: relative;
}
.delayed-text-input input {
width: 100%;
}
.delayed-text-input input:focus {
outline: none;
}
.delayed-text-input input + .delay-indicator {
position: absolute;
height: 2px;
left: 0;
bottom: -1px;
width: 100%;
background: green;
transform-origin: left;
transition: none;
transform: scaleX(0);
}
.delayed-text-input input.active + .delay-indicator {
transition: transform 500ms linear;
transform: none;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 25.01.2017, 11:12:22
Author : Konrad
*/
/* Blink, WebKit, Edge HTML */
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/* Gecko */
::-moz-placeholder {
color: inherit;
opacity: 0.54;
}
/* Trident */
:-ms-input-placeholder {
color: inherit;
opacity: 0.54;
}
.form-viewer {
word-break: break-word;
width: 100%;
max-height: 100%;
}
.form-viewer.mdl-data-table td,
.form-viewer.mdl-data-table tr {
border: none;
}
.form-viewer button {
color: white;
border-radius: 3em;
padding-left: 1em;
padding-right: 1em;
}
.form-viewer button.ok {
background-color: #9faa38;
}
.form-viewer button.blueprint {
background-color: #78909c;
}
.form-viewer button.clear {
background-color: #ef5d52;
}
.form-viewer td i.cleardate {
position: absolute;
font-size: 18px;
color: #4c4c4c;
right: 7px;
top: 12px;
z-index: 1000;
}
.form-viewer .dateinputdiv {
-ms-flex-item-align: center;
align-self: center;
position: relative;
-ms-flex: 1 0 0;
flex: 1 0 0;
margin: 4px;
}
.form-viewer .dateinputdiv input {
width: 100%;
margin: 0;
padding: 5px 12px;
}
.form-viewer.mdl-data-table td.label {
padding-bottom: 0;
width: 100%;
word-wrap: break-word;
}
.form-viewer.mdl-data-table td:not(.label) {
padding-top: 0;
padding-bottom: 12px;
}
.form-viewer .fullscreenContainer {
position: relative;
}
.form-viewer .fullscreenContainer span {
position: absolute;
z-index: 999;
top: 1%;
left: 91%;
cursor: pointer;
display: block;
height: 1em;
width: 1em;
line-height: 1em;
/* or 50% */
border-radius: 50%;
/* or 50% */
background-color: gray;
color: white;
text-align: center;
font-size: 1.2em;
}
.form-viewer label {
margin: 0 6px;
font-size: 1.2em;
white-space: initial;
}
.form-viewer td {
text-align: left;
}
.form-viewer h5 {
margin: 0 6px;
}
.form-viewer input {
border: solid 1px #f2f2f2;
height: 42px;
margin: 4px;
border-radius: 3px;
padding: 5px 12px;
font-size: 1.2em;
background-color: white;
width: 10%;
}
.form-viewer input:required {
border-bottom: solid 2px #d9d9d9;
}
.form-viewer input:invalid:not(:focus):not(:placeholder-shown) {
border-bottom: solid 2px #f44336;
}
.form-viewer input:invalid:focus:not(:placeholder-shown) {
border-bottom: solid 2px #f44336;
}
.form-viewer input:valid:focus {
border-bottom: solid 2px #9ccc65;
}
.form-viewer input:focus {
outline: none;
}
.form-viewer input.valid {
border-bottom: solid 2px #9ccc65 !important;
}
.form-viewer input.not-valid:not(:valid) {
border-bottom: solid 2px #f44336;
}
.form-viewer textarea {
width: 100%;
resize: none;
font-size: 1.2em;
border: solid 1px #f2f2f2;
margin: 4px;
border-radius: 3px;
padding: 5px 12px;
background-color: white;
}
.form-viewer textarea:required {
border-bottom: solid 2px #d9d9d9;
}
.form-viewer textarea:invalid:not(:focus):not(:placeholder-shown) {
border-bottom: solid 2px #f44336;
}
.form-viewer textarea:invalid:focus:not(:placeholder-shown) {
border-bottom: solid 2px #f44336;
}
.form-viewer textarea:valid:focus {
border-bottom: solid 2px #9ccc65;
}
.form-viewer textarea:focus {
outline: none;
}
.form-viewer textarea.not-valid:not(:valid) {
border-bottom: solid 2px #f44336;
}
.form-viewer div.valid {
border-bottom: solid 2px #9ccc65;
}
.form-viewer div.not-valid {
border-bottom: solid 2px #f44336;
}
.form-viewer select {
background: url("data:image/svg+xml;utf8,");
background-size: 12px;
background-position: calc(100% - 15px) 16px;
background-repeat: no-repeat;
box-shadow: none;
border: solid 1px #f2f2f2;
height: 42px;
margin: 4px;
border-radius: 3px;
padding: 5px 12px;
font-size: 1.2em;
background-color: white;
/*&:required {
// border: solid 1px @input-border;
border-bottom: solid 2px @input-border-accent;
} // 1. IN focus
// 2. VALID
&:valid:focus {
border-bottom: solid 2px @input-valid;
} // remove focus blur
&:focus {
outline: none;
}
&.not-valid:not(:valid) {
border-bottom: solid 2px @input-invalid;
}
*/
}
.form-viewer select.selectreqired {
border-bottom: solid 2px #d9d9d9 !important;
}
.form-viewer select.selectvalid {
border-bottom: solid 2px #9ccc65;
}
.form-viewer select.selectinvalid {
border-bottom: solid 2px #f44336;
}
.form-viewer select.not-chosen {
color: inherit;
opacity: 0.54;
}
.form-viewer .input.input-multichoice > td {
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-direction: column;
flex-direction: column;
}
.form-viewer .input.input-multichoice input[type="checkbox"] {
display: none;
}
.form-viewer .input.input-multichoice input[type="radio"] {
display: none;
}
.form-viewer .input.input-multichoice .multichoice-elem {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
align-items: center;
height: 42px;
margin-bottom: 0.5rem;
}
.form-viewer .input.input-multichoice .multichoice-elem > label {
padding: 0 0.5em;
min-width: 3rem;
}
.form-viewer .input.input-multichoice .multichoice-elem input {
height: 42px;
}
.form-viewer .input.input-multichoice .multichoice-elem input[type="text"] {
min-width: 10em;
margin-right: -1em;
-ms-flex: 1;
flex: 1;
margin-bottom: 8px;
}
.form-viewer .input.input-multichoice .multichoice-elem .checkbox-wrapper,
.form-viewer .input.input-multichoice .multichoice-elem .radio-wrapper {
vertical-align: top;
text-align: center;
width: 4em;
padding-left: 20px;
}
.form-viewer .input.input-multichoice .multichoice-elem .checkbox-wrapper label,
.form-viewer .input.input-multichoice .multichoice-elem .radio-wrapper label {
display: inline-block;
margin: 0;
height: 100%;
}
.form-viewer .input.input-multichoice .multichoice-elem .reset-button {
min-width: unset;
width: 22px;
height: 24px;
padding-left: 24px;
}
.form-viewer .input.input-multichoice .multichoice-elem-big {
min-width: 66.6% !important;
position: relative;
}
.form-viewer .input.input-multichoice .multichoice-elem-big .clearinput {
position: relative;
top: 0px;
right: 10px;
font-size: 18px;
color: #4c4c4c;
cursor: pointer;
border-radius: 9px;
display: block;
}
.form-viewer .input.input-multichoice .multichoice-elem-big .clearinput:hover {
background-color: lightgray;
}
.form-viewer .input.input-tel td > div > div {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-positive: 1;
flex-grow: 1;
}
.form-viewer .input.input-tel td > div > div .tel {
-ms-flex: 3 0 0;
flex: 3 0 0;
}
.form-viewer .input.input-tel td > div > div .vw {
-ms-flex: 1 0 0;
flex: 1 0 0;
}
.form-viewer .input.input-sign td > div {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.form-viewer .input.input-sign td > div h5 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.form-viewer .input.input-sign td > div .clear {
cursor: pointer;
background: #f44336;
color: white;
padding: 0 0.5em;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.form-viewer .input.input-sign td > div canvas {
background: #eee;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: crosshair;
}
.form-viewer .input.input-sign td > div canvas.not-valid {
border-bottom: solid 2px #f44336;
}
.form-viewer .input.input-address td div {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.form-viewer .input.input-address td div > div {
-ms-flex-positive: 1;
flex-grow: 1;
}
.form-viewer .input.input-address td div input {
min-width: 0;
}
.form-viewer .input.input-address td div input[name="postalCode"] {
-ms-flex: 1 0 0;
flex: 1 0 0;
}
.form-viewer .input.input-address td div input[name="city"] {
-ms-flex: 1 0 0;
flex: 1 0 0;
}
.form-viewer .input.input-address td div input[name="street"] {
-ms-flex: 2 0 0;
flex: 2 0 0;
}
.form-viewer .input.input-address td div input[name="houseNumber"] {
-ms-flex: 1 0 0;
flex: 1 0 0;
}
.form-viewer .input.input-address td div input[name="houseNumberExtra"] {
-ms-flex: 1 0 0;
flex: 1 0 0;
}
.form-viewer .input.input-address td div .checkbox-wrapper {
margin: 4px;
}
.form-viewer .input.input-address td div .checkbox-wrapper > .hide {
visibility: hidden;
}
.form-viewer .input.input-address td div .checkbox-wrapper > * {
display: inline;
}
.form-viewer .input.input-address td div .checkbox-wrapper label:not(.checkbox-img) {
margin: 4px;
height: 42px;
line-height: 42px;
}
.form-viewer .input.input-address td div .checkbox-wrapper input[type="checkbox"] {
display: none;
}
.form-viewer .input.input-image td {
text-align: center;
padding: 0;
}
.form-viewer .input.input-image td img {
width: 100%;
max-width: 100%;
margin: 0 0 5% 0;
}
.form-viewer .input.input-text .text-container,
.form-viewer .input.input-raffle .text-container {
display: -ms-flexbox;
display: flex;
padding: 6px;
margin: 4px;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
justify-content: flex-end;
margin-left: 0;
padding-left: 0;
}
.form-viewer .input.input-text .text-container.not-valid,
.form-viewer .input.input-raffle .text-container.not-valid {
border: solid 2px #f44336;
}
.form-viewer .input.input-text .text-container > *,
.form-viewer .input.input-raffle .text-container > * {
display: inline-block;
box-sizing: border-box;
}
.form-viewer .input.input-text .text-container .text-expander,
.form-viewer .input.input-raffle .text-container .text-expander,
.form-viewer .input.input-text .text-container .checkbox-text-expander,
.form-viewer .input.input-raffle .text-container .checkbox-text-expander {
color: #9fa841;
}
.form-viewer .input.input-text .text-container .text,
.form-viewer .input.input-raffle .text-container .text,
.form-viewer .input.input-text .text-container .checkbox-text,
.form-viewer .input.input-raffle .text-container .checkbox-text {
margin: 2px;
margin-left: 10px;
white-space: normal;
word-wrap: break-word;
max-width: calc(100% - 12px);
width: calc(100% - 12px);
}
.form-viewer .input.input-text .text-container .text p,
.form-viewer .input.input-raffle .text-container .text p,
.form-viewer .input.input-text .text-container .checkbox-text p,
.form-viewer .input.input-raffle .text-container .checkbox-text p {
margin: 0;
font-size: 1.2em;
}
.form-viewer .input.input-text .text-container .text p .ql-size-huge,
.form-viewer .input.input-raffle .text-container .text p .ql-size-huge,
.form-viewer .input.input-text .text-container .checkbox-text p .ql-size-huge,
.form-viewer .input.input-raffle .text-container .checkbox-text p .ql-size-huge {
font-size: 1.8em;
}
.form-viewer .input.input-text .text-container .text p .ql-size-small,
.form-viewer .input.input-raffle .text-container .text p .ql-size-small,
.form-viewer .input.input-text .text-container .checkbox-text p .ql-size-small,
.form-viewer .input.input-raffle .text-container .checkbox-text p .ql-size-small {
font-size: 0.8em;
}
.form-viewer .input.input-text .text-container .text p .ql-size-large,
.form-viewer .input.input-raffle .text-container .text p .ql-size-large,
.form-viewer .input.input-text .text-container .checkbox-text p .ql-size-large,
.form-viewer .input.input-raffle .text-container .checkbox-text p .ql-size-large {
font-size: 1.4em;
}
.form-viewer .input.input-text .text-container .checkbox-text,
.form-viewer .input.input-raffle .text-container .checkbox-text {
-ms-flex: 1 0 90%;
flex: 1 0 90%;
}
.form-viewer .input.input-text .text-container .checkbox-wrapper,
.form-viewer .input.input-raffle .text-container .checkbox-wrapper {
-ms-flex: 1 0 0;
flex: 1 0 0;
text-align: center;
}
.form-viewer .input.input-text .text-container input,
.form-viewer .input.input-raffle .text-container input {
display: none;
}
.form-viewer .input.input-sign div {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
.form-viewer .input.input-default td {
display: -ms-flexbox;
display: flex;
}
.form-viewer .input.input-default td select,
.form-viewer .input.input-default td input {
-ms-flex-item-align: center;
align-self: center;
-ms-flex: 1 0 0;
flex: 1 0 0;
}
.form-viewer .input.input-submit td {
padding-top: 12px;
margin-bottom: 12px;
border-top: solid 1px #f2f2f2;
display: -ms-flexbox;
display: flex;
}
.form-viewer .input.input-submit td button {
-ms-flex: 1 0 0;
flex: 1 0 0;
margin: 0 6px;
}
.form-viewer .input input[type="checkbox"] + .checkbox-img {
background-image: url(../images/checkbox_icon.svg);
width: 2em;
height: 2em;
background-size: cover;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin-left: 0.5em;
pointer-events: none;
}
.form-viewer .input input[type="checkbox"]:checked + .checkbox-img {
background-image: url("../images/checkbox_icon.svg");
width: 2em;
height: 2em;
background-size: cover;
background-position-x: 2em;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin-left: 0.5em;
pointer-events: none;
}
.form-viewer .input input[type="radio"] + .radio-img {
background-image: url(../images/radio_icon.svg);
width: 2em;
height: 2em;
background-size: cover;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin-left: 0.5em;
pointer-events: none;
}
.form-viewer .input input[type="radio"]:checked + .radio-img {
background-image: url("../images/radio_icon.svg");
width: 2em;
height: 2em;
background-size: cover;
background-position-x: 2em;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin-left: 0.5em;
pointer-events: none;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 19.05.2016, 17:29:53
Author : Konrad
*/
#loadingBar {
position: absolute;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 30.05.2016, 11:01:12
Author : Konrad
*/
#loginMenu {
position: fixed;
z-index: 10000;
width: 100%;
height: 100%;
max-height: 100%;
overflow-y: auto;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
transform: scaleY(-0.5);
transform-origin: top;
transition: transform 750ms ease;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
#loginMenu.is-active {
transform: none;
}
#loginMenu .close {
position: absolute;
right: 0.5em;
top: 0.5em;
cursor: pointer;
width: auto;
}
#loginMenu .title {
margin: 0;
height: 3em;
padding: 0.5em 0;
text-align: center;
}
#loginMenu form {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
position: relative;
background: white;
width: 100%;
max-width: 450px;
padding: 2em;
}
#loginMenu form > * {
display: block !important;
width: 300px;
max-width: 100%;
margin: auto;
}
#loginMenu form label.mdl-checkbox {
height: auto;
}
#loginMenu form a.changeMode {
cursor: pointer;
margin: 1em auto;
}
#loginMenu form button {
margin: 1em auto 0 auto;
color: white;
}
#loginMenu form div.errorMessage {
background-color: rgba(0, 0, 0, 0.2);
color: green;
font-size: 1.1em;
border-radius: 0 0 10px 10px;
overflow: hidden;
transition: all 500ms ease;
max-height: 0;
padding: 0;
}
#loginMenu form div.errorMessage.is-active {
max-height: 6.2em;
padding: 0.5em;
}
#loginMenu form div.errorMessage.error {
color: red;
}
#loginMenu form input.error ~ label.mdl-textfield__label:after {
background-color: red;
visibility: visible;
width: 100%;
left: 0;
}
#loginMenu form input.error ~ span.mdl-checkbox__box-outline {
border-color: red;
}
#loginMenu form label.error {
display: none !important;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 19.05.2016, 16:26:50
Author : Konrad
*/
div.msgBox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 100;
}
div.msgBox > .box {
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
max-height: 16em;
width: auto;
max-width: 25em;
z-index: 1000;
-ms-flex-pack: justify;
justify-content: space-between;
}
div.msgBox > .box > button.close {
position: absolute;
right: 0.2em;
top: 0.2em;
}
div.msgBox > .box > div.mdl-card__supporting-text {
width: 100%;
}
div.msgBox > .box > div.mdl-card__actions {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
/*
Created on : 19.05.2016, 15:05:38
Author : Konrad
*/
.rating-stars {
height: 1em;
position: relative;
letter-spacing: -15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.rating-stars.rating-stars--input {
cursor: pointer;
}
.rating-stars > * {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
}
.rating-stars .bg {
z-index: 1;
width: 100%;
}
.rating-stars .bg i {
color: lightgray;
}
.rating-stars .value {
z-index: 2;
max-width: 100%;
transition: width 1000ms ease;
}
.rating-stars .value i {
color: gold;
}
.rating-stars i {
width: 1em;
font-size: 1em;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 14.12.2016, 18:28:36
Author : Konrad
*/
.rest-edit {
display: -ms-flexbox;
display: flex;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background: white;
z-index: 5;
transition: transform 250ms ease-in;
transform: translateZ(0);
margin-top: 1em;
padding-bottom: 1em;
position: relative;
}
.rest-edit.active {
transform: translateX(-100%) translateZ(0);
transition: transform 250ms ease-out;
}
.rest-edit .back {
position: absolute;
top: 0.5em;
left: 0.5em;
cursor: pointer;
z-index: 5;
background: white;
border-radius: 100%;
margin: 0;
padding: 0.5em;
}
.rest-edit .back:hover {
background: #ccc;
}
.rest-edit .back i {
color: black;
}
.rest-edit > * {
margin: 0.5em;
}
.rest-edit h2 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.rest-edit .mdl-card {
min-height: 0;
}
.rest-edit input[type="text"],
.rest-edit input[type="email"],
.rest-edit input[type="date"],
.rest-edit input[type="number"],
.rest-edit input[type="password"] {
border-radius: 3px;
border: solid 1px #c9c9c9;
width: 100%;
height: 2.5em;
padding: 0.25em 0.7em;
background-color: #f9f9f9;
}
.rest-edit textarea {
height: 8em;
border-radius: 3px;
border: solid 1px #c9c9c9;
width: 100%;
/* height: 2.5em; */
padding: 0.25em 0.7em;
background-color: #f9f9f9;
}
.rest-edit textarea[name="mailFields"],
.rest-edit textarea[name="htmlBody"] {
height: 25em;
width: 50em;
}
.rest-edit label {
font-size: medium;
}
.rest-edit p {
margin: 0;
font-size: medium;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 03.01.2017, 14:09:52
Author : Konrad
*/
.rest-edit .basic {
max-width: 60em;
min-width: 40em;
min-height: 75vh;
}
.rest-edit .basic .tooltip {
position: relative;
}
.rest-edit .basic .tooltip .tooltiptext {
visibility: hidden;
width: auto;
background-color: #555;
color: #fff;
text-align: center;
padding: 8px;
border-radius: 6px;
font-family: "Roboto", sans-serif !important;
font-weight: 400;
font-size: 14px;
line-height: normal;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.rest-edit .basic .tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.rest-edit .basic ul.error {
position: absolute;
z-index: 1;
top: calc(100% - 0.9em);
right: 0;
background: red;
color: white;
padding: 0.3em 0.7em;
text-align: left;
margin-right: 0.5em;
transform-origin: right;
transition: transform 250ms ease-out;
transform: scaleX(0);
margin: 0;
font-size: 1em;
list-style: circle;
}
.rest-edit .basic ul.error.visible {
transform: none;
}
.rest-edit .basic i.done {
color: green;
vertical-align: middle;
margin-right: 0.5em;
opacity: 0;
transition: opacity 250ms ease;
}
.rest-edit .basic i.done.visible {
opacity: 1;
}
.rest-edit .basic input[type="file"] ~ img.image-thumb {
display: block;
max-width: 100%;
margin-top: 1em;
}
.rest-edit .basic button:hover.delete ~ ul.behavior:nth-of-type(1),
.rest-edit .basic input[type="submit"]:hover.delete ~ ul.behavior:nth-of-type(1) {
display: block;
}
.rest-edit .basic button:hover.save ~ ul.behavior:nth-of-type(2),
.rest-edit .basic input[type="submit"]:hover.save ~ ul.behavior:nth-of-type(2) {
display: block;
}
.rest-edit .basic button ~ ul.behavior,
.rest-edit .basic input[type="submit"] ~ ul.behavior {
display: none;
background: #f44336;
color: white;
margin: 0;
padding: 0.2em 0.5em;
margin-top: 0.5em;
white-space: initial;
max-width: 250px;
margin-right: 0;
margin-left: auto;
}
.rest-edit .basic button ~ ul.behavior li,
.rest-edit .basic input[type="submit"] ~ ul.behavior li {
list-style: none;
line-height: 1.2em;
margin: 0.5em 0;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 15.12.2016, 11:09:38
Author : Konrad
*/
.rest-edit-collection {
padding: 0.5em;
}
.rest-edit-collection table {
min-width: 65em;
}
.rest-edit-collection.mdl-tabs__panel {
min-height: 75vh;
}
.rest-edit-collection td .remove i {
cursor: pointer;
border-radius: 100%;
padding: 0.2em;
}
.rest-edit-collection td .remove i:hover {
background: #ccc;
}
.rest-edit-collection td .remove.animation i {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: rotation;
}
.rest-edit-collection td i.click {
cursor: pointer;
border-radius: 100%;
padding: 0.2em;
}
.rest-edit-collection td i.click:hover {
background: #ccc;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 15.12.2016, 11:09:38
Author : Konrad
*/
.rest-edit-collection {
padding: 0.5em;
}
.rest-edit-collection table {
min-width: 65em;
}
.rest-edit-collection.mdl-tabs__panel {
min-height: 75vh;
}
.rest-edit-collection td .remove i {
cursor: pointer;
border-radius: 100%;
padding: 0.2em;
}
.rest-edit-collection td .remove i:hover {
background: #ccc;
}
.rest-edit-collection td .remove.animation i {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: rotation;
}
.rest-edit-collection td i.click {
cursor: pointer;
border-radius: 100%;
padding: 0.2em;
}
.rest-edit-collection td i.click:hover {
background: #ccc;
}
.rest-edit-collection td.--left {
text-align: left;
}
.rest-edit-collection .rest-edit-header {
vertical-align: middle;
}
.rest-edit-collection .rest-edit-header.sorting {
cursor: pointer;
}
.rest-edit-collection .rest-edit-header .sorting-icon {
transform: scale(0.7, 0.7);
padding-right: 7px;
cursor: pointer;
vertical-align: middle;
}
.rest-edit-collection .rest-edit-header .sorting-icon.default {
transform: scale(0.7, 0.7) rotate(90deg);
padding-right: 7px;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 22.11.2016, 16:02:23
Author : Konrad
*/
.rest-table {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.rest-table header,
.rest-table footer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
padding: 1em;
}
.rest-table header {
-ms-flex-align: end;
align-items: flex-end;
}
.rest-table header2 {
-ms-flex-align: end;
align-items: flex-end;
}
.rest-table table {
margin: 0 1em;
cursor: pointer;
}
.rest-table table thead th i {
/* IE 9 */
/* Chrome, Safari, Opera */
transform: rotate(90deg);
padding-bottom: 15px;
}
.rest-table table thead .no-icon {
cursor: default;
}
.rest-table table thead .no-icon i {
visibility: hidden;
}
.rest-table table thead.in-search th.searchable {
background: rgba(50, 255, 50, 0.1);
color: black;
}
.rest-table table tbody td {
cursor: pointer;
}
.rest-table table tbody td i {
color: black;
}
.rest-table footer .pageing {
display: -ms-flexbox;
display: flex;
}
.rest-table footer .pageing button {
padding: 0.4em 0.8em;
background: #fafafa;
border: 1px solid #ccc;
margin: 0 0.2em;
border-radius: 1px;
cursor: pointer;
transition: background 250ms ease;
}
.rest-table footer .pageing button:hover {
background: #ddd;
}
div.mdl-layout > .mdl-layout__header .mdl-layout-title {
background-image: url(../images/logo.png);
}
div.mdl-layout > .mdl-layout__drawer {
background-color: rgba(79, 83, 83, 0.8);
border: none;
width: 255px;
}
div.mdl-layout > .mdl-layout__drawer .mdl-layout-title {
background-image: url(../images/logo.png);
}
div.mdl-layout > .mdl-layout__drawer .mdl-navigation__link {
color: #ffffff;
}
.transition-back {
transform: translateX(1) !important;
}
.content:not(#login):not(#customer):not(#auto-export):not(#customer_today) {
background: #f7f7f7;
padding-top: 0.1px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
overflow-x: hidden;
}
#login > .mdl-grid > * {
background: white;
padding: 1em;
border-radius: 1px;
}
#login.loading .loader {
display: block;
}
#login.loading .form {
display: none;
}
#login .loader {
display: none;
padding: 1em;
}
#login .loader h5 {
margin: 1em;
}
#login .form {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
}
#login .form h2 {
max-width: 100%;
}
#form .form-viewer_ {
position: absolute;
right: 0;
top: 0;
z-index: 20;
background: #fff;
width: 50%;
padding: 1em;
}
td.csv-td {
border: none;
}
#customer {
background: white;
padding-bottom: 1em;
margin-bottom: 80vh;
}
#customer .filterTable,
#customer .exportTable {
display: block;
margin-bottom: 1em;
}
#customer .complete-export {
width: 100%;
height: 100%;
-ms-flex: 1;
flex: 1;
}
#customer .complete-export .complete-button {
width: 200px;
}
#customer .filter {
padding-bottom: 1em;
}
#customer .filter label input[type="checkbox"] {
vertical-align: bottom;
}
#customer .filter label input[type="checkbox"] + span {
font-weight: normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#customer select {
text-align: center;
-moz-text-align-last: center;
text-align-last: center;
/* webkit*/
}
#customer option {
text-align: left;
/* reset to left*/
}
#customer .formExportXml {
margin-left: 1em;
}
#customer .filter,
#customer .export {
width: 100%;
}
#customer .exportRow {
width: 100%;
display: -ms-flexbox;
display: flex;
margin-top: 1em;
margin-left: 1em;
}
#customer .exportRow label {
display: block;
font-weight: bold;
}
#customer .exportRow .mdl-button {
margin-left: 1em;
}
#customer .sorting,
#customer .underline {
cursor: pointer;
text-decoration: underline;
}
#customer .sorting .sorting-icon,
#customer .underline .sorting-icon {
vertical-align: middle;
transform: scale(0.7, 0.7);
}
#customer .sorting .sorting-icon.default,
#customer .underline .sorting-icon.default {
transform: scale(0.7, 0.7) rotate(90deg);
padding-right: 7px;
}
#customer .filterRow,
#customer .filter-by-form {
width: 100%;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 1em;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
}
#customer .filterRow .partnerGroup,
#customer .filter-by-form .partnerGroup,
#customer .filterRow .partner,
#customer .filter-by-form .partner,
#customer .filterRow .form.active,
#customer .filter-by-form .form.active {
width: 27%;
}
#customer .filterRow input.mdl-textfield__input.flatpickr-input,
#customer .filter-by-form input.mdl-textfield__input.flatpickr-input {
text-align: center;
}
#customer .filterRow .label-print-epaper,
#customer .filter-by-form .label-print-epaper {
margin-top: 2px;
}
#customer .filterRow .tooltip,
#customer .filter-by-form .tooltip {
position: relative;
}
#customer .filterRow .tooltip .tooltiptext,
#customer .filter-by-form .tooltip .tooltiptext {
visibility: hidden;
width: 230px;
min-height: 75px;
max-width: 250px;
background-color: #555;
color: #fff;
text-align: center;
padding: 8px;
border-radius: 6px;
font-family: "Roboto", sans-serif !important;
font-weight: 400;
font-size: 13px;
line-height: normal;
position: absolute;
z-index: 1;
white-space: normal;
left: -75px;
margin-left: -80px;
opacity: 0;
transition: opacity 1s;
}
#customer .filterRow .tooltip:hover .tooltiptext,
#customer .filter-by-form .tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
#customer .filterRow .print-epaper,
#customer .filter-by-form .print-epaper {
width: 18%;
}
#customer .filterRow .print-epaper .info,
#customer .filter-by-form .print-epaper .info {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
#customer .filterRow .print-epaper .info .icon,
#customer .filter-by-form .print-epaper .info .icon {
margin-left: 5px;
margin-bottom: 4px;
}
#customer .filterRow .print-epaper .type-content,
#customer .filter-by-form .print-epaper .type-content {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
margin-top: 4px;
margin-bottom: 8px;
}
#customer .filterRow .print-epaper .type-content .print-container,
#customer .filter-by-form .print-epaper .type-content .print-container {
margin-right: 25px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
#customer .filterRow .print-epaper .type-content .mdl-checkbox__label,
#customer .filter-by-form .print-epaper .type-content .mdl-checkbox__label {
font-size: 15px;
line-height: 16px;
}
#customer .filterRow label,
#customer .filter-by-form label {
display: block;
font-weight: bold;
}
#customer .filterRow .location,
#customer .filter-by-form .location,
#customer .filterRow .employee,
#customer .filter-by-form .employee {
max-width: 400px;
min-width: 20%;
}
#customer .filterRow .fulltext-search,
#customer .filter-by-form .fulltext-search {
padding-bottom: 0;
padding-top: 40px;
margin-left: 5px;
}
#customer .filterRow .dates p,
#customer .filter-by-form .dates p {
font-weight: bold;
}
#customer .filterRow .dates .dates-container,
#customer .filter-by-form .dates .dates-container {
display: -ms-flexbox;
display: flex;
}
#customer .filterRow .dates .dates-container .endDate,
#customer .filter-by-form .dates .dates-container .endDate {
margin-left: 10px;
}
#customer .modal-background {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.4);
}
#customer .pdfSelectModal {
position: absolute;
width: 700px;
height: 275px;
border-radius: 15px;
padding: 30px 10px 10px;
background-color: #ffffff;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
#customer .pdfSelectModal .pdfSelectContent {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
height: 100%;
}
#customer .pdfSelectModal .pdfSelectContent .top .bottom {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
height: 100%;
}
#customer .pdfSelectModal .pdfSelectContent button {
height: 60px;
min-width: 225px;
margin: 0.3em;
color: white;
text-align: center;
font-size: 15px;
}
#customer .filter-by-form {
display: none;
background: #f8f8f8;
}
#customer .filter-by-form.filled h1.placeholder {
display: none;
}
#customer .filter-by-form h1.placeholder {
font-size: 2em;
margin: 0;
color: #aaa;
font-weight: 100;
}
#customer .export {
-ms-flex-align: center;
align-items: center;
background-color: #eee;
display: -ms-flexbox;
display: flex;
}
#customer .export .tooltip {
position: relative;
color: red;
margin-top: 8px;
}
#customer .export .tooltip .tooltiptext {
visibility: hidden;
width: 230px;
min-height: 50px;
max-width: 250px;
background-color: #555;
color: #fff;
text-align: center;
padding: 8px;
border-radius: 6px;
font-family: "Roboto", sans-serif !important;
font-weight: 400;
font-size: 13px;
line-height: normal;
position: absolute;
z-index: 1;
white-space: normal;
opacity: 0;
transition: opacity 1s;
}
#customer .export .tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
#customer table.found {
margin-top: 1em;
width: 100%;
text-align: left;
position: relative;
}
#customer table.found.loading:before {
content: "Loading..";
position: absolute;
display: block;
width: 100%;
left: 0;
top: 0;
text-align: center;
background: rgba(255, 255, 255, 0.9);
font-size: 2em;
}
#customer table.found > thead th {
text-indent: 0.5em;
white-space: nowrap;
}
#customer table.found > thead th input {
margin: 0;
}
#customer table.found > tbody > tr:hover {
background: #ddd;
}
#customer table.found > tbody > tr:hover td {
position: relative;
}
#customer table.found > tbody > tr:hover table.dataset {
position: absolute;
background: white;
border: #ddd 1.5em solid;
top: -1em;
left: 0;
}
#customer table.found > tbody > tr:hover table.dataset p {
max-width: 500px;
white-space: normal;
}
#customer table.found > tbody > tr:hover table.dataset > tbody > tr {
display: table-row !important;
}
#customer table.found > tbody > tr:hover table.dataset > tbody > tr table tbody {
display: table-row-group !important;
}
#customer table.found > tbody > tr:hover table.dataset > tbody > tr table tbody tr td:first-child {
display: initial !important;
}
#customer table.found > tbody > tr > td {
white-space: nowrap;
padding: 0.4em;
vertical-align: middle;
}
#customer table.found > tbody > tr > td:last-child {
width: 100%;
word-break: break-all;
padding-top: 0;
padding-bottom: 0;
}
#customer table.found > tbody > tr > td table.dataset > tbody > tr {
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
#customer table.found > tbody > tr > td table.dataset > tbody > tr:first-child {
border-top: 1px solid gray;
}
#customer table.found > tbody > tr > td table.dataset > tbody > tr > td:first-child {
font-weight: bold;
}
#customer table.found > tbody > tr > td table.dataset > tbody > tr:first-child table tbody {
display: -ms-flexbox;
display: flex;
}
#customer table.found > tbody > tr > td table.dataset > tbody > tr:first-child table tbody tr td:first-child {
display: none;
}
#customer table.found > tbody > tr > td table.dataset > tbody > tr:not(:first-child) {
display: none;
}
#customer table.found > tbody > tr > td table.dataset td {
padding: 0.1em;
vertical-align: top;
}
#customer table.found > tbody > tr > td table.dataset td:first-child {
padding-left: 0.3em;
white-space: nowrap;
}
#customer table.found > tbody > tr > td table.dataset td:last-child {
padding-right: 0.3em;
}
#customer table.found > tbody > tr > td table.dataset td table {
width: 100%;
}
#customer table.found > tbody > tr > td table.dataset td table td:last-child {
padding-left: 1em;
text-align: right;
}
#dashboard {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;
}
#dashboard #dateFromTo {
width: 200px;
text-align: center;
margin-bottom: 5px;
}
#dashboard #timeFrom {
text-align: center;
}
#dashboard .chartContainer {
background-color: #ffffff;
border-radius: 4px;
border: solid 1px #e7e7e7;
height: 100%;
padding: 0 0.7em;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-direction: column;
flex-direction: column;
}
#dashboard .chartContainer .titleContainer {
text-align: left;
margin: 1em 0 3em 0.3em;
}
#dashboard .chartContainer .titleContainer > * {
margin: 0;
}
#dashboard .chartContainer .titleContainer h5 {
margin-bottom: 0.25em;
}
#dashboard .chartContainer .titleContainer h6 {
color: #aaaaaa;
}
#dashboard .chartContainer .chart > canvas {
height: 100%;
}
#dashboard .chartContainer .legend {
text-align: left;
margin-top: auto;
}
#dashboard .chartContainer .legend li {
cursor: pointer;
}
#dashboard .chartContainer .legend i {
vertical-align: bottom;
}
#dashboard .chartContainer .additionalInformation {
text-align: left;
color: #aaaaaa;
padding: 0.7em 0.7em;
border-top: solid 1px #e7e7e7;
vertical-align: center;
}
#dashboard .chartContainer .additionalInformation i {
margin-right: 0.25em;
vertical-align: bottom;
}
#dashboard .dataChooserContainer {
display: -ms-flexbox;
display: flex;
margin: 1em 0;
width: 100%;
}
#dashboard .dataChooserContainer > * {
-ms-flex-positive: 1;
flex-grow: 1;
margin: 0 1em;
}
#dashboard .dataChooserContainer select {
width: 100%;
}
#dashboard .dataChooserContainer label {
display: block;
font-weight: bold;
}
#dashboard .dataChooserContainer .active,
#dashboard .dataChooserContainer .active-employee {
max-width: 50px;
}
#dashboard .range {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
#dashboard select,
#dashboard input {
border-radius: 3px;
border: solid 1px #f2f2f2;
height: 2.5em;
padding: 0.25em 0.7em;
background-color: #ffffff;
}
#dashboard ul {
padding: 0;
margin: 2.5em 0 1em 0;
}
#dashboard ul li {
display: inline-block;
margin: 0 0.5em;
}
#dashboard select {
background-image: url("data:image/svg+xml;utf8,");
background-position: calc(100% - 0.5em) 1em;
background-size: 1em 1em;
background-repeat: no-repeat;
outline: 0;
}
#dashboard select:focus {
background-image: url("data:image/svg+xml;utf8,");
background-position: calc(100% - 0.5em) 1em;
background-size: 1em 1em;
background-repeat: no-repeat;
border-color: #d9d9d9;
outline: 0;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
overflow: hidden;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 45rem;
border-radius: 0.5rem;
}
.modal-content.smtp-config .mt-3 {
margin-top: 15px;
}
.modal-content.history-content {
width: 85rem;
min-height: 75%;
max-height: 75%;
}
.modal-content.history-content .history-table-body td {
text-align: left;
}
.modal-content.history-content .rest-table table {
display: block;
max-height: 375px;
overflow-y: scroll;
}
.modal-content .flex-column {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
text-align: left;
-ms-flex-pack: center;
justify-content: center;
width: 45%;
}
.modal-content .flex-column.full-width {
width: 90%;
}
.modal-content .flex-row {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
margin-bottom: 20px;
}
.modal-content .flex-row.--no-space {
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.modal-content .flex-center {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.modal-content .close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.modal-content .close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
#customer_today {
background: white;
padding-bottom: 1em;
margin-bottom: 80vh;
width: 100vw;
}
#customer_today .filterTable {
display: block;
margin-bottom: 1em;
}
#customer_today .filter {
padding-bottom: 1em;
}
#customer_today .filter label input[type="checkbox"] {
vertical-align: bottom;
}
#customer_today .filter label input[type="checkbox"] + span {
font-weight: normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#customer_today select {
text-align: center;
-moz-text-align-last: center;
text-align-last: center;
/* webkit*/
}
#customer_today option {
text-align: left;
/* reset to left*/
}
#customer_today .sorting,
#customer_today .underline {
cursor: pointer;
text-decoration: underline;
}
#customer_today .sorting .sorting-icon,
#customer_today .underline .sorting-icon {
vertical-align: middle;
transform: scale(0.7, 0.7);
}
#customer_today .sorting .sorting-icon.default,
#customer_today .underline .sorting-icon.default {
transform: scale(0.7, 0.7) rotate(90deg);
padding-right: 7px;
}
#customer_today .filterRow,
#customer_today .filter-by-form {
width: 100%;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 1em;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
}
#customer_today .filterRow .partnerGroup,
#customer_today .filter-by-form .partnerGroup,
#customer_today .filterRow .partner,
#customer_today .filter-by-form .partner {
width: 50%;
}
#customer_today .filterRow input.mdl-textfield__input.flatpickr-input,
#customer_today .filter-by-form input.mdl-textfield__input.flatpickr-input {
text-align: center;
}
#customer_today .filterRow .label-print-epaper,
#customer_today .filter-by-form .label-print-epaper {
margin-top: 2px;
}
#customer_today label {
display: block;
font-weight: bold;
}
#customer_today .dates p {
font-weight: bold;
}
#customer_today .dates .dates-container {
display: -ms-flexbox;
display: flex;
}
#customer_today .dates .dates-container .endDate {
margin-left: 10px;
}
.filter-by-form {
display: none;
background: #f8f8f8;
}
.filter-by-form.filled h1.placeholder {
display: none;
}
.filter-by-form h1.placeholder {
font-size: 2em;
margin: 0;
color: #aaa;
font-weight: 100;
}
table.found {
margin-top: 1em;
width: 100vw;
text-align: left;
position: relative;
}
table.found.loading:before {
content: "Loading..";
position: absolute;
display: block;
width: 100%;
left: 0;
top: 0;
text-align: center;
background: rgba(255, 255, 255, 0.9);
font-size: 2em;
}
table.found > thead th {
text-indent: 0.5em;
white-space: nowrap;
}
table.found > thead th input {
margin: 0;
}
table.found > tbody > tr:hover {
background: #ddd;
}
table.found > tbody > tr:hover td {
position: relative;
}
table.found > tbody > tr:hover table.dataset {
position: absolute;
background: white;
border: #ddd 1.5em solid;
top: -1em;
right: 1em;
}
table.found > tbody > tr:hover table.dataset p {
max-width: 500px;
white-space: normal;
}
table.found > tbody > tr:hover table.dataset > tbody > tr {
display: table-row !important;
}
table.found > tbody > tr:hover table.dataset > tbody > tr table tbody {
display: table-row-group !important;
}
table.found > tbody > tr:hover table.dataset > tbody > tr table tbody tr td:first-child {
display: initial !important;
}
table.found > tbody > tr > td {
white-space: nowrap;
padding: 0.4em;
vertical-align: middle;
}
table.found > tbody > tr > td:last-child {
width: 100%;
word-break: break-all;
padding-top: 0;
padding-bottom: 0;
}
table.found > tbody > tr > td table.dataset > tbody > tr {
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
table.found > tbody > tr > td table.dataset > tbody > tr:first-child {
border-top: 1px solid gray;
}
table.found > tbody > tr > td table.dataset > tbody > tr > td:first-child {
font-weight: bold;
}
table.found > tbody > tr > td table.dataset > tbody > tr:first-child table tbody {
display: -ms-flexbox;
display: flex;
}
table.found > tbody > tr > td table.dataset > tbody > tr:first-child table tbody tr td:first-child {
display: none;
}
table.found > tbody > tr > td table.dataset > tbody > tr:not(:first-child) {
display: none;
}
table.found > tbody > tr > td table.dataset > tbody > tr td {
padding: 0.1em;
vertical-align: top;
}
table.found > tbody > tr > td table.dataset > tbody > tr td:first-child {
padding-left: 0.3em;
white-space: nowrap;
}
table.found > tbody > tr > td table.dataset > tbody > tr td:last-child {
padding-right: 0.3em;
}
table.found > tbody > tr > td table.dataset > tbody > tr td table {
width: 100%;
}
table.found > tbody > tr > td table.dataset > tbody > tr td table td:last-child {
padding-left: 1em;
text-align: right;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbFmUiA8.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 200;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZEbVmUiA8.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmUiA8.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiA8.ttf) format('truetype');
}
* {
box-sizing: border-box;
text-rendering: optimizeSpeed;
}
body,
html {
font-family: "Roboto", sans-serif !important;
font-weight: 400;
color: #212121;
background-color: transparent;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
max-height: 100%;
overflow-wrap: break-word;
}
body > *,
html > * {
z-index: 1;
}
body {
background-image: url(../images/black-and-white-city-man-people.jpg);
background-size: cover;
background-position: center;
}
::-webkit-scrollbar {
display: none;
}
#snackbar.mdl-snackbar--active .time-indicator {
transition: transform 5000ms linear;
transform: none;
}
#snackbar .time-indicator {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: white;
transform: scaleX(0);
}
table {
border-spacing: 0;
border-collapse: collapse;
}
table td {
padding: 0;
}
table.mdl-data-table td.mdl-data-table__cell--non-numeric {
padding-bottom: 12px !important;
white-space: normal !important;
}
/*.mdl-spinner{
position: fixed;
top: 48%;
left: 48%;
width: 4em;
height: 4em;
}*/
div.mdl-layout {
perspective: 1000px;
}
div.mdl-layout > .mdl-layout__header .mdl-layout-title,
div.mdl-layout > .mdl-layout__drawer .mdl-layout-title {
background-size: contain;
background-repeat: no-repeat;
}
div.mdl-layout > .mdl-layout__header .mdl-layout-title {
height: 80%;
background-position-y: 50%;
background-position-x: 0;
cursor: pointer;
}
div.mdl-layout > .mdl-layout__drawer .mdl-layout-title {
height: 4em;
margin-top: 1em;
background-position: center;
}
div.mdl-layout > .mdl-layout__drawer a.mdl-navigation__link {
font-size: 1.1em;
font-weight: 300;
cursor: pointer;
}
div.mdl-layout > .mdl-layout__drawer a.mdl-navigation__link.private {
display: none;
}
div.mdl-layout .mdl-layout__header-row {
padding-left: 70px;
padding-right: 0;
}
div.mdl-layout .mdl-layout__header-row #headerSearch {
max-width: 10em;
}
@media screen and (max-width: 1024px) {
div.mdl-layout .mdl-layout__header-row {
padding-left: 56px;
}
}
div.mdl-layout nav i.material-icons {
vertical-align: bottom;
}
div.mdl-layout > main {
transform: translateZ(0);
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.mdl-grid {
-ms-flex-pack: center;
justify-content: center;
}
.content {
transform: translateZ(0);
margin: 0 0 0 1em;
}
.changeViewAnimation {
opacity: 0;
}
.mdl-data-table th {
white-space: normal;
padding: 0.8em;
line-height: 1.5em;
font-size: small;
text-align: left;
}
.mdl-tabs__tab-bar {
width: 100%;
margin-bottom: 3em;
}
.mdl-card {
width: auto;
}
footer div.mdl-mini-footer__left-section {
width: 100%;
}
footer div.mdl-mini-footer__left-section ul {
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}
footer div.mdl-mini-footer__left-section ul li.spacer {
-ms-flex-positive: 1;
flex-grow: 1;
}
footer div.mdl-mini-footer__left-section ul li.social {
padding: 0.5em 1em;
cursor: pointer;
transition: all 250ms ease;
}
footer div.mdl-mini-footer__left-section ul li.social:hover {
color: #ffffff;
}
li {
list-style: none;
}
input,
select {
border-radius: 0;
}
select {
cursor: pointer;
border: none;
border-bottom: 1px solid black;
background: transparent;
-webkit-border-radius: 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
font-size: inherit;
}
select[disabled] {
border-bottom-color: #ccc;
}
input:invalid + span {
color: red;
}
label.mdl-textfield__label {
white-space: normal;
}
label.mdl-checkbox {
height: auto;
text-align: left;
width: 300px;
max-width: 100%;
}
form input.error ~ label.mdl-textfield__label:after {
background-color: red;
visibility: visible;
width: 100%;
left: 0;
}
form input.error ~ span.mdl-checkbox__box-outline {
border-color: red;
}
form label.error {
display: none !important;
}
/* ---- rating stars strat ---- */
.ratings {
padding-top: 1em;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.ratings .title {
text-align: left;
text-indent: 1em;
}
.ratings div.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: stretch;
align-items: stretch;
}
.ratings div.wrapper > * {
margin: 1em;
}
.ratings div.wrapper > div.summary {
-ms-flex-positive: 0;
flex-grow: 0;
color: #333;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
}
.ratings div.wrapper > div.summary label.total-ranking {
font-size: 4.5em;
line-height: 1em;
font-weight: 100;
}
.ratings div.wrapper > div.summary div.counter i.material-icons {
vertical-align: bottom;
}
.ratings div.wrapper > div.diagram {
-ms-flex-positive: 1;
flex-grow: 1;
padding-left: 2em;
}
.ratings div.wrapper > div.diagram > span {
margin-left: 3em;
position: relative;
padding: 0.2em;
display: block;
margin: 0.5em 0;
text-align: left;
}
.ratings div.wrapper > div.diagram > span > label:not(.counter) {
position: absolute;
width: 3em;
left: -2.2em;
font-size: 1em;
color: #777;
}
.ratings div.wrapper > div.diagram > span > label:not(.counter) i.material-icons {
vertical-align: middle;
font-size: 1em;
}
.ratings div.wrapper > div.diagram > span > div.bar {
height: 100%;
width: 0%;
position: absolute;
z-index: -1;
top: 0;
transition: all 1500ms ease-out;
transition-delay: 1000ms;
}
.ratings div.wrapper > div.diagram > span > label.counter {
vertical-align: middle;
margin-left: 0.5em;
}
.ratings div.wrapper > div.diagram > span:nth-child(1) div.bar {
background-color: #88b131;
}
.ratings div.wrapper > div.diagram > span:nth-child(2) div.bar {
background-color: #99cc00;
}
.ratings div.wrapper > div.diagram > span:nth-child(3) div.bar {
background-color: #ffcf02;
}
.ratings div.wrapper > div.diagram > span:nth-child(4) div.bar {
background-color: #ff9f02;
}
.ratings div.wrapper > div.diagram > span:nth-child(5) div.bar {
background-color: #ff6f31;
}
/* ---- rating stars end ---- */
/* ---- date picker start ---- */
div.ui-datepicker {
font-family: inherit;
padding: 0;
width: 19em;
border: none;
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
background: white;
}
div.ui-datepicker div.ui-datepicker-header {
background-color: #8bc34a;
border: none;
border-radius: 0;
font-weight: 400;
padding: 0;
}
div.ui-datepicker div.ui-datepicker-header div.ui-datepicker-title {
background-color: transparent;
padding: 0.5em 0;
font-size: 1.3em;
}
div.ui-datepicker div.ui-datepicker-header div.ui-datepicker-title select {
color: #ffffff;
text-indent: 0.5em;
}
div.ui-datepicker div.ui-datepicker-header div.ui-datepicker-title select:first-of-type {
margin-right: 0.5em;
}
div.ui-datepicker div.ui-datepicker-header div.ui-datepicker-title option {
color: #212121;
}
div.ui-datepicker div.ui-datepicker-header a.ui-corner-all {
background-position: center;
background-repeat: no-repeat;
top: 0;
height: 3.65em;
width: 3.65em;
border-radius: 0;
}
div.ui-datepicker div.ui-datepicker-header a.ui-corner-all.ui-datepicker-prev {
background-image: url(../images/ic_navigate_before_white_24dp_2x.png);
left: 0;
}
div.ui-datepicker div.ui-datepicker-header a.ui-corner-all.ui-datepicker-next {
background-image: url(../images/ic_navigate_next_white_24dp_2x.png);
right: 0;
}
div.ui-datepicker div.ui-datepicker-header a.ui-corner-all.ui-state-hover {
background-color: rgba(255, 255, 255, 0.2);
border: none;
}
div.ui-datepicker table thead {
color: #969696;
}
div.ui-datepicker table thead th {
padding: 0.3em;
font-weight: 400;
}
div.ui-datepicker table tbody td {
padding: 0.5em;
}
div.ui-datepicker table tbody td span.ui-state-default,
div.ui-datepicker table tbody td a.ui-state-default {
border-radius: 50%;
text-align: center;
background-color: white;
height: 2em;
width: 2em;
color: #212121;
font-weight: 400;
border: 1px solid transparent;
}
div.ui-datepicker table tbody td span.ui-state-default.ui-state-highlight,
div.ui-datepicker table tbody td a.ui-state-default.ui-state-highlight {
background-color: #ccc;
}
div.ui-datepicker table tbody td span.ui-state-default.ui-state-active,
div.ui-datepicker table tbody td a.ui-state-default.ui-state-active {
color: #ffffff;
background-color: #8bc34a;
}
div.ui-datepicker table tbody td span.ui-state-default.ui-state-hover,
div.ui-datepicker table tbody td a.ui-state-default.ui-state-hover {
border-color: #ccc;
}
/* ---- date picker end ---- */