@font-face {
    font-family: 'Palanquin';
    font-style: normal;
    font-weight: 100;
    src: local('Palanquin Thin'), local('Palanquin-Thin'), url(font-palanquin/Palanquin-Thin.ttf) format('truetype');
}
@font-face {
    font-family: 'Palanquin';
    font-style: normal;
    font-weight: 200;
    src: local('Palanquin ExtraLight'), local('Palanquin-ExtraLight'), url(font-palanquin/Palanquin-ExtraLight.ttf) format('truetype');
}
@font-face {
    font-family: 'Palanquin';
    font-style: normal;
    font-weight: 300;
    src: local('Palanquin Light'), local('Palanquin-Light'), url(font-palanquin/Palanquin-Light.ttf) format('truetype');
}
@font-face {
    font-family: 'Palanquin';
    font-style: normal;
    font-weight: 400;
    src: local('Palanquin Regular'), local('Palanquin-Regular'), url(font-palanquin/Palanquin-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Palanquin';
    font-style: normal;
    font-weight: 500;
    src: local('Palanquin Medium'), local('Palanquin-Medium'), url(font-palanquin/Palanquin-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'Palanquin';
    font-style: normal;
    font-weight: 600;
    src: local('Palanquin SemiBold'), local('Palanquin-SemiBold'), url(font-palanquin/Palanquin-SemiBold.ttf) format('truetype');
}
@font-face {
    font-family: 'Palanquin';
    font-style: normal;
    font-weight: 700;
    src: local('Palanquin Bold'), local('Palanquin-Bold'), url(font-palanquin/Palanquin-Bold.ttf) format('truetype');
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Palanquin, Arial;
    font-weight: 400;
    line-height: 1em;
}

.ui-widget {
    font-family: Palanquin, Arial;
    font-size: 1em;
}


body {
    background-color: white;
    color: #222;
    font-size: 12px;
}

h1 {
    font-family: Arial, sans-serif;
}

div:focus {
    outline: none;
}

button {
    display: inline-block;
    zoom: 1;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    background-color: #ccc;
    text-decoration: none;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    box-sizing: border-box;
    padding: 5px;
}

button:hover {
    border-style: none;
}

button.btn-default {
    background-color: #717aff;
    border-style: none;
    font-weight: bold;
    color: white;
}

button.btn-default:hover {
    background-color: #5555c4;
    border-style: none;
}

button:focus {
    outline-style: none;
    outline-offset: 2px;
    outline-color: #81adff;
    outline-width: 1px;
}

.icon-button {
    cursor: pointer;
    text-decoration: none;
}

.icon-button:visited {
    text-decoration: none;
}

.icon-button:hover {
    text-decoration: none;
    color: #6705ff;
    font-size: 1.4em;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.float-right {
    float: right !important;
}

input[type=bedrag] {
    text-align: right;
}

/* Pure CSS overrides */
.pure-form input[type=text], .pure-form input[type=datum], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form select, .pure-form textarea {
    padding: .0em .0em .0em .2em;
}

.pure-form .pure-input-1-6{width:16,67%} 
.pure-form .pure-input-1-8{width:12,5%} 

.pure-button {
    padding: 0em 0.3em;
}

/* Dialog CSS start */

.dialog {
    display: none;
    position: fixed;
    border-style: solid;
    border-width: 1px;
    border-color: #aaa;
    border-radius: 3px;
    opacity: 1;
    background-color: ghostwhite;
    z-index: 1050;
    resize: none;
    margin: 10px;
}

.dialog.dialog-dragging-item, .dialog.dialog-resizing-item {
    outline-width: 3px;
    outline-style: outset;
    outline-offset: 3px;
    outline-color: #717aff;
}

.dialog-header {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 25px;
    line-height: 16px;
    font-size: 14px;
    font-weight: bold;
    background-color: #ddd;
    color: #555;
    padding-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    resize: none;
}

.dialog-header.draggable {
    cursor: move;
}

.dialog-footer {
    display: block;
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    height: 30px;
    resize: none;
}

.dialog-content {
    display: block;
    position: absolute;
    top: 30px;
    left: 5px;
    right: 5px;
    bottom: 30px;
    overflow: auto;
    resize: none;
}

.dialog-resize-marker {
    display: block;
    position: absolute;
    right: 2px;
    bottom: -1px;
    color: #81adff;
    transform: rotate(45deg);
}

.dialog-resize-area {
    display: block;
    position: absolute;
    background-color: transparent;
    filter: alpha(opacity=0);
}

.dialog-resize-area.n {
    top: -3px;
    left: 15px;
    right: 15px;
    height: 6px;
    cursor: ns-resize;
}

.dialog-resize-area.nw.top {
    top: -3px;
    left: -3px;
    width: 18px;
    height: 6px;
    cursor: nwse-resize;
}

.dialog-resize-area.nw.left {
    top: 3px;
    left: -3px;
    width: 6px;
    height: 12px;
    cursor: nwse-resize;
}

.dialog-resize-area.w {
    top: 15px;
    left: -3px;
    width: 6px;
    bottom: 12px;
    cursor: ew-resize;
}

.dialog-resize-area.sw.left {
    bottom: -3px;
    left: -3px;
    width: 6px;
    height: 15px;
    cursor: nesw-resize;
}

.dialog-resize-area.sw.bottom {
    bottom: -3px;
    left: 3px;
    width: 12px;
    height: 6px;
    cursor: nesw-resize;
}

.dialog-resize-area.s {
    bottom: -3px;
    left: 15px;
    right: 12px;
    height: 6px;
    cursor: ns-resize;
}

.dialog-resize-area.se.bottom {
    bottom: -3px;
    right: -3px;
    width: 15px;
    height: 6px;
    cursor: nwse-resize;
}

.dialog-resize-area.se.right {
    bottom: 3px;
    right: -3px;
    width: 6px;
    height: 15px;
    cursor: nwse-resize;
}

.dialog-resize-area.e {
    top: 15px;
    right: -3px;
    width: 6px;
    bottom: 12px;
    cursor: ew-resize;
}

.dialog-resize-area.ne.right {
    top: -3px;
    right: -3px;
    width: 6px;
    height: 18px;
    cursor: nesw-resize;
}

.dialog-resize-area.ne.top {
    top: -3px;
    right: 3px;
    height: 6px;
    width: 12px;
    cursor: nesw-resize;
}

.dialog-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: black;
    opacity: .5;
    filter: alpha(opacity=50);
    display: none;
}

/* Dialog CSS end */