select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #000;
}
.pn-form .record-info {
    position: fixed;
    bottom: 0;
    height: 61px;
    left: 0;
    right: 0;
    background-color: #ECECEC;
}
.record-info [class*="span"] {
    margin: 0;
    padding: 0;
}
.record-info .container {
    position: absolute;
    left: 0;
    right: 0;
    height:100%;
}
.record-info p {
    font-size: 9px;
    line-height: 18px;
    padding: 0 19px;
    color: #424242;
}

.tab-header > .btn-report {
    margin-top: -40px;
    margin-right: 10px;
}
.record-info .record-info-content .spacer {
    padding: 0 10px;
}
.record-info .btn-link.delete-record {
    color: red;
    margin-right: 5px;
}
.record-info .record-info-content {
    position: absolute;
    top: 47px;
    padding: 0 12px;
    background: #EEEEEE;
}
.record-info .tab-pane-bottom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    padding: 8px 0;
    border-color: #E1E1E1;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-radius: 0;
    background-color: #FFF;
    margin: 0;
}
.el.input-append, .el.input-prepend {
    margin-bottom: 0;
}
.pn-checkbox > span {
    z-index: 2;
    position: relative;
    left: 8px;
}
.pn-hidden { display: none!important; }
.pn-checkbox .add-on-before {
  position: absolute;
  left: 0;
  width: 36px;
  bottom: 0;
  background-color: red;
  top: -1px;
  border-radius: 4px;
  overflow: hidden;
}
/* Hidden placeholders */
.el input:-moz-placeholder,
.el textarea:-moz-placeholder,
.el select:-moz-placeholder,
.el input::-moz-placeholder,
.el textarea::-moz-placeholder,
.el select::-moz-placeholder,
.el input:-ms-input-placeholder,
.el textarea:-ms-input-placeholder,
.el select:-ms-input-placeholder,
.el input::-webkit-input-placeholder,
.el textarea::-webkit-input-placeholder,
.el select::-webkit-input-placeholder {
  color: transparent;
  font-style: italic;
  opacity: 0;
}

input::-webkit-input-placeholder { color:transparent; }
input:-moz-placeholder { color:transparent; } /* FF 4-18 */
input::-moz-placeholder { color:transparent; } /* FF 19+ */
input:-ms-input-placeholder { color:transparent; } /* IE 10+ */

textarea::-webkit-input-placeholder { color:transparent; }
textarea:-moz-placeholder { color:transparent; } /* FF 4-18 */
textarea::-moz-placeholder { color:transparent; } /* FF 19+ */
textarea:-ms-input-placeholder { color:transparent; } /* IE 10+ */

/* Visible placeholders */


.el.pn-placeholder input:-moz-placeholder,
.el.pn-placeholder textarea:-moz-placeholder,
.el.pn-placeholder select:-moz-placeholder,
.el.pn-placeholder input::-moz-placeholder,
.el.pn-placeholder textarea::-moz-placeholder,
.el.pn-placeholder select::-moz-placeholder,
.el.pn-placeholder input:-ms-input-placeholder,
.el.pn-placeholder textarea:-ms-input-placeholder,
.el.pn-placeholder select:-ms-input-placeholder,
.el.pn-placeholder input::-webkit-input-placeholder,
.el.pn-placeholder textarea::-webkit-input-placeholder,
.el.pn-placeholder select::-webkit-input-placeholder {
  color: #CCCCCC;
  font-style: italic;
  font-size: 8px;
}

.el.pn-placeholder input::-webkit-input-placeholder { color:#CCCCCC;font-size:8px; }
.el.pn-placeholder input:-moz-placeholder { color:#CCCCCC;font-size:8px; } /* FF 4-18 */
.el.pn-placeholder input::-moz-placeholder { color:#CCCCCC;font-size:8px; } /* FF 19+ */
.el.pn-placeholder input:-ms-input-placeholder { color:#CCCCCC;font-size:8px; } /* IE 10+ */

.el.pn-placeholder textarea::-webkit-input-placeholder { color:#CCCCCC;font-size:8px; }
.el.pn-placeholder textarea:-moz-placeholder { color:#CCCCCC;font-size:8px; } /* FF 4-18 */
.el.pn-placeholder textarea::-moz-placeholder { color:#CCCCCC;font-size:8px; } /* FF 19+ */
.el.pn-placeholder textarea:-ms-input-placeholder { color:#CCCCCC;font-size:8px; } /* IE 10+ */

.el.pn-bestandskoppeling .placeholder { color:transparent; }

.el .pn-info {
    padding: 0 7px;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: red;
    border-radius: 0 6px 6px 0;
    font-size: 10px;
    font-weight: bold;
    display: none;
}
.pn-form {
    position: relative;
}
.pn-form .form-horizontal {
    min-height: 500px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.pn-form .form-horizontal .form-element {
    position: absolute;
    overflow: hidden;
}
.el {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-top-color: #999999;
    min-height: 20px;
    line-height: 20px;
}
.el.pn-transparant {
    background-color: transparent;
}
.el input, .el select, .el textarea, .el button , .el a.btn {
    border: medium none;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Arial';
    font-size: 12px;
    min-height: 20px;
    padding: 0;
    width: 100%;
    vertical-align: top;
    height: 100%;
    background-color: transparent;
    border-radius: 0;
}
.el input, .el select, .el button, .el a.btn {
    text-indent: 3px;
    box-sizing: border-box;
}
.el textarea {
    resize: none;
    padding: 3px;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
}
.el.pn-textarea {
    padding: 3px;
    overflow:hidden;
}
.el.pn-textarea textarea {
    padding: 0;
    box-shadow:none;
    border-radius: 0;
}
.el.pn-label {
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid rgba(255, 255, 255, 0);
    color: #000;
}
.el.pn-label .text {
}
/* Nummer 3 - Lijst */
.el.pn-drop-down-list select {
    display: none;
}
.el.pn-drop-down-list .pn-el-select2, .el.pn-drop-down-list .pn-el-select2 .btn {
    width: 100%;
    height: 100%;
    border-radius: 0!important;
}
.el.pn-drop-down-list .pn-el-select2 .btn:hover, .el.pn-drop-down-list .pn-el-select2 .btn:focus, .el.pn-drop-down-list .pn-el-select2 .btn:active, .el.pn-drop-down-list .pn-el-select2 .btn.active {
    background-color: transparent!important;
}
.el.pn-drop-down-list .pn-el-select2 .btn:focus {
    outline: 0!important;
}
.el.pn-drop-down-list .pn-el-select2.btn-group {
    display: block;
}
.el.pn-drop-down-list.pn-autocomplete {
    padding-right: 24px;
}
.el.pn-autocomplete .select2-container,
.pn-formula.select2-container,
.el.pn-fixed-values .select2-container {
    font-size: 12px;
    top: 0;
    overflow: hidden;
    border-radius: 0px;
}
.select2-container .select2-choice,
.el.pn-autocomplete .select2-container {
    overflow: visible;
}
.el.pn-autocomplete .select2-container-active {

}

span.select2-arrow {
    top: -1px!important;
    right: -4px!important;
    bottom: -1px!important;
    height: 21px!important;
    width: 22px!important;
    border-radius: 0 4px 4px 0!important;
}
.select2-container .select2-choice .select2-arrow:after {
    content: '\f0c5';
    font-family: 'WebHostingHub-Glyphs'!important;
    font-size: 13px;
    color: #FFF;
    position: absolute;
    top: 0px;
    right: 5px;
}
.select2-dropdown-open span.select2-arrow {
    right: 0!important;
}
.select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
    background-image: none!important;
}
.select2-search input {
    box-shadow: none!important;
    border-top: none!important;
    border-left: none!important;
    border-right: none!important;
    border-radius: 0;
    border-bottom: 1px solid #CCCCCC!important;
    margin: 0!important;
    padding: 3px;
}
.select2-search input.select2-active {
    border-bottom: none!important;
    background: url("../img/select2-spinner.gif") no-repeat scroll right 4px transparent;
}
.select2-results {
    padding: 0;
    margin: 0;
}
.select2-search {
    padding-left: 0;
    padding-right: 0;
    opacity: 0.75;
}
.el.pn-autocomplete .select2-container.select2-allowclear .select2-choice abbr,
.el.pn-fixed-values .select2-container.select2-allowclear .select2-choice abbr{
    display: inline-block;
    top: 4px;
}
.el.pn-autocomplete .select2-container .select2-choice,
.pn-formula.select2-container .select2-choice,
.el.pn-fixed-values .select2-container .select2-choice {
    background-image: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: auto;
    border-radius: 0;
    border: none;
    line-height: 20px;
    padding: 0 0 0 4px;
}
.el.pn-autocomplete .select2-container .select2-choice span.select2-chosen,
.pn-formula.select2-container .select2-choice span.select2-chosen,
.el.pn-fixed-values .select2-container .select2-choice span.select2-chosen {
    font-size: 12px;
    color: #000;
}
.el.pn-autocomplete .select2-container .select2-choice.select2-default span.select2-chosen,
.pn-formula.select2-container .select2-choice.select2-default span.select2-chosen,
.el.pn-fixed-values .select2-container .select2-choice.select2-default span.select2-chosen {
    color: #757575;
}
.el.pn-autocomplete .select2-container .select2-choice span.select2-arrow,
.pn-formula.select2-container .select2-choice span.select2-arrow,
.el.pn-fixed-values .select2-container .select2-choice span.select2-arrow {
    background: none;
    border-radius: 0;
}
.el.pn-autocomplete .select2-container .select2-choice span.select2-arrow b,
.pn-formula.select2-container .select2-choice span.select2-arrow b,
.el.pn-fixed-values .select2-container .select2-choice span.select2-arrow b {
    background-position: 1px -2px;
}
/* Date field */
.el.pn-date .add-on,
.el.pn-url .add-on,
.el.pn-email .add-on,
.el.pn-drop-down-list .input-group-btn > button {
    background-color: #7B7B7B;
    border-radius: 0 3px 3px 0;
    position: relative;
    color: rgba(0, 0, 0, 0);
    height: 22px;
    width: 24px;
    border-color: #7B7B7B;
    color: #FFF;
    float: right;
    margin-top: -21px;
    margin-right: -24px
}


.el.pn-date .add-on:before,
.el.pn-url .add-on:before,
.el.pn-date .add-on:hover:before,
.el.pn-email .add-on:before,
.el.pn-drop-down-list .input-group-btn > button:before {
    display: inline-block;
    font-family: 'FontAwesome';
    position: absolute;
    color: #FFF;
    pointer-events: none;
    left: 0;
    top: 0;
    width: 20px;
    margin:0;
    height: 20px;
    overflow: hidden;
    font-size: 13px;
    line-height: 22px;
    text-shadow: none;
}
.el.pn-drop-down-list .input-group-btn > button:before {
    content: "\f040";
}
.el.pn-date .add-on:before {
    content: "\f133";
    line-height:20px;
    font-size: 12px;
    margin-left: -1px;
}
.el.pn-date .add-on:hover:before { font-size: 12px}
.el.pn-email .add-on:before {
    content: "\f003"
}
.el.pn-url .add-on:before {
    content: "\f0ac"
}

.el.pn-date .add-on:hover,.el.pn-date .add-on:active,.el.pn-date .add-on:focus,
.el.pn-url .add-on:hover,.el.pn-url .add-on:active,.el.pn-url .add-on:focus,
.el.pn-email .add-on:hover,.el.pn-email .add-on:active,.el.pn-email .add-on:focus,
.el.pn-drop-down-list .input-group-btn > button:hover,.el.pn-drop-down-list .input-group-btn > button:active,.el.pn-drop-down-list .input-group-btn > button:focus {
    opacity: 0.8;
}
.datepicker {
    padding: 2px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    background: none;
    background-color: #FFF;
    z-index: 10000000000;
}
.datepicker table { width: 100%;}
.datepicker .arrow {
    content: "";
    display: block;
    position: absolute;
    border: 8px solid transparent;
    border-bottom-color: #CCCCCC;
    top: -16px;
}
.datepicker .arrow:after {
    content: "";
    display: block;
    position: absolute;
    border: 8px solid transparent;
    border-bottom-color: #FFF;
    top: -7px;
    margin-left: -8px;
}
.ui-widget-header {
    padding: 2px;
    background: none;
    border: none;
}

/* Nummer 11 - Checkbox */
.el.pn-checkbox * { padding: 0; margin:0;}
.el.pn-checkbox {
    border: 1px solid transparent;
    background-color: transparent;
    height: 18px;
    line-height: 18px;
}
.el.pn-checkbox input {
    opacity: 0;
    border-width: 0;
    height: 23px;
    width: 23px;
}
.el.pn-checkbox span {
cursor: pointer;
    background-color: rgba(255,255,255,1);
    border: 1px solid #CCC;
    border-top-color: #999999;
    background-clip: padding-box;
    display: inline-block;
    width: 16px;
    height: 16px;
    top: -1px;
    margin: 2px 2px 2px -9px;
}
.el.pn-checkbox.with-add-on span {
    margin-left: 0;
}
.el.pn-label {
    background-color: transparent!important;
}
.el.pn-checkbox.with-add-on span {
    border-radius: 4px;
    border-color: rgba(0,0,0,0.2);
}
.el.pn-checkbox span:before {
    content: '\2713';
    font-family: 'WebHostingHub-Glyphs';
    font-size: 9px;
    opacity: 0;
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    top: 50%;
    margin-left: -4px;
    margin-top: -6px;
    line-height: 11px;
}
.el.pn-checkbox span.checked:before { opacity: 1; }
.el.pn-checkbox.hover span,
.el.pn-checkbox.focus span,
.el.pn-checkbox:focus span
 {
    opacity: 0.8;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
.el.pn-checkbox.pn-readonly.hover span,
.el.pn-checkbox.pn-readonly.focus span,
.el.pn-checkbox.pn-readonly:focus span,
.el.pn-checkbox.pn-locked.hover span,
.el.pn-checkbox.pn-locked.focus span,
.el.pn-checkbox.pn-locked:focus span,
.el.pn-checkbox.pn-disabled.hover span,
.el.pn-checkbox.pn-disabled.focus span,
.el.pn-checkbox.pn-disabled:focus span
 {
    opacity: 1;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: not-allowed;
}
/* Nummer 12 - Bestandskoppeling */
.el .uploadifive-queue-item {
    display: none;
}
.el.pn-bestandskoppeling {

}
.el.pn-bestandskoppeling .btn, .el.pn-afbeelding .btn {
    width: 24px;
    padding: 0;
    height: 22px;
}
.el.pn-bestandskoppeling .btn {
    top: -1px;
    position: absolute;
}
.el.pn-bestandskoppeling .btn:hover, .el.pn-afbeelding .btn:hover {
    border-color: #FFF;
}
.el.pn-bestandskoppeling .upload-file, .el.pn-afbeelding .upload-file {
    right: -24px;
    border-right: 1px dotted #FFF;
}
.el.pn-bestandskoppeling .upload-file, .el.pn-afbeelding .upload-file,
.el.pn-bestandskoppeling .delete-file, .el.pn-afbeelding .delete-file
{
    height: 21px;
    text-decoration: none;
}
.el.pn-bestandskoppeling .upload-file:after, .el.pn-afbeelding .upload-file:after,
.el.pn-bestandskoppeling .delete-file:after, .el.pn-afbeelding .delete-file:after
{
    font-family: 'WebHostingHub-Glyphs';
    font-size: 12px;
    text-align: center;
    display: block;
    padding:0;
    text-decoration: none;
    border-width: 0;
    margin-left: -2px;
}
.el.pn-bestandskoppeling .delete-file:after, .el.pn-afbeelding .delete-file:after {
    content: '\00d7';
}
.el.pn-bestandskoppeling .upload-file:after, .el.pn-afbeelding .upload-file:after {
    content: '\f7d6';
    font-size: 14px;
}
.el.pn-bestandskoppeling .delete-file, .el.pn-afbeelding .delete-file {
    right: -48px;
}
.el.pn-bestandskoppeling .delete-file { border-radius: 0 4px 4px 0; }
.el.pn-afbeelding .upload-file { border-radius: 4px 0 0 0;}
.el.pn-bestandskoppeling .btn i .el.pn-afbeelding .btn i {
    margin-right: 3px;
    margin-top: 0px;
}
.el.pn-bestandskoppeling a {
    font-size: 12px;
    padding: 2px 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.el.pn-bestandskoppeling input[type="file"], .el.pn-bestandskoppeling .uploadifive-button { display: none; }
.el.pn-bestandskoppeling input {
    color: #1F8CE1;
    text-decoration: underline;
}
/* Nummer 14 - Afbeelding */
.el.pn-afbeelding {
    background-image: url("../img/bg/el-afbeelding.png");
    background-size: auto;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.el.pn-afbeelding div.spacer {
    margin: 0px 4px;
}
.el.pn-afbeelding ../img {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 100%;
    width: 100%;
    position: absolute;
}
.el.pn-afbeelding > div.holder {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.el.pn-afbeelding > div.holder > div {
    bottom: 0;
    display: none;
    right: 0;
    text-align: center;
    width: auto;
    position: absolute;
}
.el.pn-afbeelding input, .el.pn-afbeelding .uploadifive-button { display: none; }
.el.pn-afbeelding > div.holder:hover > div { display: block; }
.design-modus .el.pn-afbeelding:hover > div.holder { display: none; }
/* Nummer 17 - Button */
.el.pn-button {
    border-radius: 3px;
    border-top-color: #CCCCCC;
}
.el.pn-button button, .el.pn-button a.btn {
    color: #000;
}
.el.pn-button a.btn { line-height: 30px; }
.el.pn-empty.pn-required input,
.el.pn-empty.pn-required.pn-drop-down-list a,
.el.pn-empty.pn-required.pn-fixed-values a,
.el.pn-empty.pn-bestandskoppeling.pn-required a,
.el.pn-empty.pn-afbeelding.pn-required,
.el.pn-empty.pn-required select,
.el.pn-empty.pn-required textarea {
    background-color: #FFFCD1;
}
.el input[disabled],
.el select[disabled],
.el textarea[disabled],
.el input[readonly],
.el select[readonly],
.el textarea[readonly],
.el.pn-disabled.pn-drop-down-list a,
.el.pn-disabled.pn-fixed-values a,
.el.pn-readonly.pn-drop-down-list a,
.el.pn-readonly.pn-fixed-values a,
.el.pn-checkbox.pn-readonly span,
.el.pn-checkbox.pn-disabled span,
.el.pn-checkbox.pn-locked span {
    background-color: #EEEEEE!important;
}
.pn-bold {
    font-weight: bold;
}
.el.pn-drop-down-list .input-group-btn {
    display: none;
}
.el.pn-prefix-suffix span {
    position: absolute;
    min-width: 3px;
    padding: 0 1px;
    top: 0;
    box-sizing: border-box;
}
.el.pn-prefix-suffix span.suffix {
    right: 0;
}
.input-append input:focus, .input-prepend input:focus, .input-append select:focus, .input-prepend select:focus, .input-append .uneditable-input:focus, .input-prepend .uneditable-input:focus {
  z-index: 0;
}
/*
Multiple Checkbox
*/
.el.pn-multiple-choice textarea {
    opacity: 0.2;
    background-color: red;
    position: absolute;
    top: 0;
    height: 10px;
}
.el.pn-multiple-choice ul {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    z-index: 2;
    overflow-y:scroll;
    list-style: none;
    margin: 0;
    padding: 0;
}
.el.pn-multiple-choice ul li {
    background-color: #FFF;
    height: 19px;
    padding: 5px 8px;
    position: relative;
    border-bottom: 1px solid #CCC;
    margin: 0;
}
.el.pn-multiple-choice ul li:last-child {
    border-bottom-width: 0;
}
.el.pn-multiple-choice ul li > .el {
    position: absolute;
}
.el.pn-multiple-choice ul li > .el.pn-checkbox {
    margin-top: -1px;
    margin-left: -3px;
}
.el.pn-multiple-choice ul li > .el.pn-label {
    left: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    overflow: hidden;
    right: 10px;
    line-height: 18px;
}
.el.pn-locked.pn-date .add-on {
    cursor: not-allowed;
}
.btn-icon {
    background-image: none;
    padding:0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: none;
}
.btn-icon i {
    font-size: 18px;
    line-height: 20px;
}
.btn-icon:hover {
    opacity: 0.8;
    background-color: transparent;
}
.pn-text-multiple-values ul {
    margin: 0;
    list-style-type: none;
}
.pn-text-multiple-values ul > li {
    position: relative;
    }
.pn-text-multiple-values ul > li > .btn {
    position: absolute;
    width: 30px;
    text-align: center;
    top: -1px;
    left: 100%;
    height: 100%;
    border: 1px solid transparent;
}
.pn-signature-field .pn-signature {
  position: relative;
  border: none;
}
.pn-signature-field.pn-empty .pn-clear-signature {
  display: none;
}
.pn-signature-field .pn-clear-signature {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: block;
}
.pn-signature-field .pn-clear-signature button {
  font-size: 9px;
  padding: 0px 5px;
  line-height: 8px;
  height: 10px;
  text-indent: 0;
}
.select2-container .select2-choice abbr {
    background: none;
    font: normal normal normal 14px/1 FontAwesome;
    right: 28px;
    top: 6px;
}
.select2-container .select2-choice abbr:before {
    content: "\f057";
}
@media (min-width: 1200px) {
    .row-fluid [class*="span"] {
        min-height: 22px;
    }
}