@charset "UTF-8";

a {
    color: black;
}

a.submit {
    background: url("../res/images/btn-submit.png") no-repeat 5px 3px #333333;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 1px 0 #666;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    margin: 0 5px 0 0;
    padding: 3px 7px 3px 22px;
    text-decoration: none;
}

/*body{background:url('/res/images/bg.gif') repeat-x;color:#333;font:13px arial,sans-serif;margin:0 auto;padding:0;min-width:1000px;;max-width:1200px;}*/
body#update {
    background: none;
}

/*dt.cklbl{width:200px !important;}
dd.cklbl{width:370px !important;}*/
dl {
    width: 100%;
}

h1 {
    color: #333333;
    font-size: 16px;
    margin: 0 0 20px;
    padding: 0;
}

hr {
    background: #024c6f;
    border: none;
    clear: both;
    color: #024c6f;
    height: 1px;
    margin: 20px 0;
}

input.checkbox {
    border: 0;
    height: 16px;
    width: 16px;
}

p.footer {
    color: #024c6f;
    padding: 0 20px 50px;
}

p.footer a {
    color: #024c6f;
}

select {
    border: 1px solid #024c6f;
    border-radius: 5px;
    font: 12px arial, sans-serif;
}

#login {
    color: #999999;
    float: right;
    height: 20px;
    padding: 34px 20px;
    text-align: right;
    width: 400px;
}

#login .logout {
    background: url("../res/images/btn-logout.png") no-repeat right;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: 19px;
    padding: 0;
    vertical-align: middle;
    width: 91px;
}

#login .logout span {
    display: none;
}

#frmLogin {
    padding: 60px 0 0 20px;
}

#frm>dl {
    width: 570px;
}

#frm>dt {
    clear: both;
    float: left;
    padding: 4px 0 0 0;
    width: 120px;
}

#frm>dd {
    display: block;
    float: left;
    margin: 0;
    padding: 0 0 10px 0;
    width: 435px;
}

#frm>dd>p {
    width: 450px;
}

#frm>dd img {
    border: 1px solid #024c6f;
}

#nocontent {
    margin: 20px;
    padding: 20px;
}

#content table {
    border-collapse: collapse;
    margin: 20px 0 0;
    width: 100%;
}

#content table img {
    border: 1px solid #024c6f;
}

#content th {
    text-align: left;
}

#content td.Yes {
    color: green;
}

#content td.Active {
    color: green;
}

#content td.New {
    color: orange;
}

#content td.No {
    color: red;
}

#content td.Inactive {
    color: red;
}

#content td.edit {
    text-align: right;
    width: 120px;
}

#content td.opties {
    text-align: right;
    width: 20px;
}

#content td.thumb {
    width: 100px;
}

#content>dd>p {
    width: 450px;
}

#content dd img {
    border: 1px solid #024c6f;
}

#content dd .selector_select {
    width: 350px;
}

#content dd .translated {
    display: inline-block;
    width: 295px;
}

#content dd>textarea.translated {
    width: 450px;
}

#content dd .translated.nicinstance {
    width: 435px;
}

#content dd>button.btnTranslations {
    width: 125px;
}

#content dd .translations.hidden {
    display: none;
}

#content dd .translations label {
    display: inline-block;
    text-overflow: ellipsis;
    width: 125px;
    white-space: nowrap;
}

#content dd .translations input {
    width: 295px;
}

#content dd .translated img {
    vertical-align: middle;
}

#content dd .translations img {
    vertical-align: middle;
}

#content dd .fileselection .translations {
    text-align: left;
}

#content dd .fileselection .translations div {
    display: inline-block;
    width: 295px;
}

#content dd .fileselection .translations .filelist {
    display: inline-block;
    width: 317px;
}

#content dd .fileselection .translations label {
    padding-top: 15px;
    vertical-align: top;
}

#content dd .fileupload {
    padding-top: 10px;
}

#content dd .fileupload.hidden {
    display: none !important;
}

#content dd .filebrowse {
    padding-top: 10px;
}

#content dd .filebrowse.hidden {
    display: none !important;
}

#content>dd>p {
    margin: 0;
    padding: 6px 0 0;
}

#content>dd>a.currentfile {
    background: url(../res/images/icons.png) 0 -543px no-repeat;
    display: block;
    line-height: 20px;
    margin: 0;
    padding: 3px 0 0 25px;
    text-align: left;
}

#content .toc_table {
    margin: 0;
}

#content .toc_table tr:hover {
    background-color: #fff;
}

#content .toc_pagenr {
    width: 75px !important;
}

#content .toc_title {
    width: 340px !important;
}

.folder {
    background-position: 4px 2px !important;
}

.aep {
    background-position: 4px -18px !important;
}

.ai {
    background-position: 4px -39px !important;
}

.asnd {
    background-position: 4px -60px !important;
}

.css {
    background-position: 4px -81px !important;
}

.doc,
.docx {
    background-position: 4px -102px !important;
}

.eps {
    background-position: 4px -123px !important;
}

.fla {
    background-position: 4px -144px !important;
}

.gif {
    background-position: 4px -165px !important;
}

.html,
.htm {
    background-position: 4px -186px !important;
}

.indd {
    background-position: 4px -207px !important;
}

.jpg,
.jpeg {
    background-position: 4px -228px !important;
}

.js {
    background-position: 4px -249px !important;
}

.mov {
    background-position: 4px -270px !important;
}

.avi,
.mp4,
.mpg,
.wmv {
    background-position: 4px -291px !important;
}

.pdf {
    background-position: 4px -312px !important;
}

.php {
    background-position: 4px -333px !important;
}

.png {
    background-position: 4px -354px !important;
}

.ppt,
.pptx {
    background-position: 4px -375px !important;
}

.psd {
    background-position: 4px -396px !important;
}

.swf {
    background-position: 4px -417px !important;
}

.txt,
.rtf {
    background-position: 4px -438px !important;
}

.wav,
.mp3,
.ogg,
.flac,
.wma {
    background-position: 4px -459px !important;
}

.xml {
    background-position: 4px -480px !important;
}

.xls,
.xlsx {
    background-position: 4px -501px !important;
}

.zip,
.rar,
.\37 z {
    background-position: 4px -522px !important;
}

#logo span {
    display: none;
}

#logo-controlpanel {
    background: url(../res/images/logo-controlpanel.png) center center no-repeat;
    display: block;
    float: left;
    height: 83px;
    margin-top: 10px;
    width: 180px;
}

#logo-controlpanel span {
    display: none;
}

#menu {
    clear: both;
    height: 65px;
    margin: 0;
    padding: 0;
    position: relative;
}

#menu a {
    color: #024c6f;
    display: block;
    font-weight: bold;
    line-height: 20px;
    padding: 5px 20px;
    text-decoration: none;
}

#menu li {
    background: #fff;
    border-bottom: 1px solid #024c6f;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}

#menu li.a {
    border: 1px solid #024c6f;
    border-bottom: 1px solid #fff;
}

#menu li.a ul {
    display: block;
    left: 0;
    position: absolute;
}

#menu li li a {
    font-size: 12px;
    font-weight: normal;
}

#menu li li.a {
    border: none;
    border-bottom: 2px solid #ed7e00;
}

#menu li li.a a {
    color: #333333;
}

#menu li ul {
    display: none;
    padding: 0;
}

#line {
    stroke: #333333;
    stroke-width: 2;
}

.preview {
    width: 200px;
}

.selected_bg {
    background: #369;
}

.selected_border {
    border: 1px solid #333333;
}

#appmenu li li {
    padding-left: 10px;
}

.appdownload {
    font-weight: bold;
    margin-bottom: 20px;
    display: inline-block;
    padding: 10px;
    position: relative;
    color: #5a5a5a;
    font-size: 15px;
    text-decoration: none;
}

.appdownload img {
    border-radius: 15px;
    margin-right: 10px;
    vertical-align: middle;
}

/*#special{background:none;width:600px;}*/
#special dt {
    border: 0;
    width: 120px;
}

#special dd {
    border: 0;
    width: 300px;
}

#special hr {
    display: none;
}

#special form {
    padding: 0;
}

#special #content {
    margin: 0;
    padding: 0;
}

#special #logo {
    margin: 0;
    padding: 12px 0;
}

#special #login {
    margin: 0;
    padding: 48px 0;
    width: 380px;
}

#special #menu {
    display: none;
}

#special .footer {
    display: block;
    height: 30px;
    bottom: 0;
    padding: 0;
    position: absolute;
}

#steps td img {
    border: 0;
}

#steps {
    width: 100%;
}

#steps td {
    color: black;
    text-align: center;
}

#steps tr:nth-child(1) td:nth-child(2) {
    border: 2px solid black;
    height: 55px;
    width: 85px;
    font-size: 30px;
}

#steps tr:nth-child(1) td:nth-child(6) {
    border: 2px solid black;
    height: 55px;
    width: 85px;
    font-size: 30px;
}

#steps tr:nth-child(1) td:nth-child(10) {
    border: 2px solid black;
    height: 55px;
    width: 85px;
    font-size: 30px;
}

#steps tr:nth-child(2) {
    height: 35px;
}

#steps td.active {
    border: 2px solid #ed7e00 !important;
    background-color: #ed7e00 !important;
    color: #ffffff;
}

#steps tr:nth-child(2) td.active {
    color: #ed7e00;
    background: none !important;
    border: 0 !important;
}

.resultTR {
    border-top: 1px solid black;
}

.resultTR:first-child {
    border-top: none;
}

.resultTR:last-child {
    border-bottom: 1px solid black;
}

.resultTR.dup {
    border-top: none;
}

.resultTR td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.resultTR .hideanswer {
    color: #dedede;
}

#enquettesort,
#headerul {
    list-style: none;
    padding: 0;
}

#enquettesort .Active {
    color: green;
}

#enquettesort .Inactive {
    color: red;
}

#enquettesort li,
#headerul li {
    margin: 5px 0;
}

#enquettesort li div,
#headerul li div {
    word-wrap: break-word;
    display: inline-block;
}

#enquettesort td {
    word-wrap: break-word;
}

#enquettesort .empty {
    opacity: 0;
    cursor: default;
}

.ui-sortableUI-helper {
    background: rgba(255, 255, 255, 0.81);
    border: 1px solid #a7a7a7;
    padding: 10px;
}

.ui-state-highlight {
    height: 15px;
    line-height: 10px;
    background: rgba(125, 125, 125, 0.7);
    border: 1px solid #787878;
    border-color: #787878 !important;
}

.dragthis {
    display: inline-block;
    width: 25px;
    margin-right: 10px;
    background: url("../res/images/icon-move.png") center no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 20px;
    vertical-align: middle;
    cursor: move;
    width: 3%;
    display: inline-block;
    margin-left: -1%;
    margin-right: 3%;
}

#headerul {
    margin-top: 20px;
}

#headerul div {
    font-weight: bold;
}

#headerul .dragthis {
    background: transparent;
}

/** Lazy load features */
ui-image {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 1500ms, transform 1500ms cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    will-change: opacity;
}

*[img-src] {
    position: relative;
}

*[img-src] ui-image {
    opacity: 0;
}

/** Button. Can be applied to <a> and <input type="submit">. */
button,
.button,
ui-selection-list div.option-buttons div {
    display: inline-block;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 14px 26px 13px 26px;
    text-align: left;
    text-transform: uppercase;
    transition: background-color 200ms, color 200ms, opacity 150ms,
        transform 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
        background-position 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    outline: none;
    vertical-align: middle;
}

button:hover,
button:active,
.button:hover,
ui-selection-list div.option-buttons div:hover,
.button:active,
ui-selection-list div.option-buttons div:active {
    background-color: black;
    color: white;
}

button:active,
.button:active,
ui-selection-list div.option-buttons div:active {
    opacity: 0.4;
    /*transform:translateY(2px);*/
}

button.icon,
button.edit,
button.button.edit,
button.new,
button.button.new,
button.submit,
button.button.submit,
button.submit2,
button.button.submit2,
button.details,
button.button.details,
button.cancel,
button.button.cancel,
button.delete,
button.button.delete,
button.back,
button.button.back,
button.refresh,
button.button.refresh,
button.list,
button.button.list,
button.doc,
button.button.doc,
button.pres,
button.button.pres,
button.play,
button.button.play,
button.duplicate,
button.button.duplicate,
.button.icon,
.button.edit,
ui-selection-list div.option-buttons div.edit,
.button.new,
ui-selection-list div.option-buttons div.new,
.button.submit,
ui-selection-list div.option-buttons div.submit,
.button.submit2,
ui-selection-list div.option-buttons div.submit2,
.button.details,
ui-selection-list div.option-buttons div.details,
.button.cancel,
ui-selection-list div.option-buttons div.cancel,
.button.delete,
ui-selection-list div.option-buttons div.delete,
.button.back,
ui-selection-list div.option-buttons div.back,
.button.refresh,
ui-selection-list div.option-buttons div.refresh,
.button.list,
ui-selection-list div.option-buttons div.list,
.button.doc,
ui-selection-list div.option-buttons div.doc,
.button.pres,
ui-selection-list div.option-buttons div.pres,
.button.play,
ui-selection-list div.option-buttons div.play,
.button.duplicate,
ui-selection-list div.option-buttons div.duplicate,
ui-selection-list div.option-buttons div.icon {
    background-repeat: no-repeat;
    background-position: calc(100% - 20px) 50%;
    background-size: auto 22px;
    padding-right: 50px;
}

button.icon.next,
button.next.edit,
button.next.new,
button.next.submit,
button.next.submit2,
button.next.details,
button.next.cancel,
button.next.delete,
button.next.back,
button.next.refresh,
button.next.list,
button.next.doc,
button.next.pres,
button.next.play,
button.next.duplicate,
.button.icon.next,
.button.next.edit,
ui-selection-list div.option-buttons div.next.edit,
.button.next.new,
ui-selection-list div.option-buttons div.next.new,
.button.next.submit,
ui-selection-list div.option-buttons div.next.submit,
.button.next.submit2,
ui-selection-list div.option-buttons div.next.submit2,
.button.next.details,
ui-selection-list div.option-buttons div.next.details,
.button.next.cancel,
ui-selection-list div.option-buttons div.next.cancel,
.button.next.delete,
ui-selection-list div.option-buttons div.next.delete,
.button.next.back,
ui-selection-list div.option-buttons div.next.back,
.button.next.refresh,
ui-selection-list div.option-buttons div.next.refresh,
.button.next.list,
ui-selection-list div.option-buttons div.next.list,
.button.next.doc,
ui-selection-list div.option-buttons div.next.doc,
.button.next.pres,
ui-selection-list div.option-buttons div.next.pres,
.button.next.play,
ui-selection-list div.option-buttons div.next.play,
.button.next.duplicate,
ui-selection-list div.option-buttons div.next.duplicate,
ui-selection-list div.option-buttons div.icon.next {
    background-image: url("../res/svg/arrow_right_white.svg");
}

button.icon.next:hover,
button.next.edit:hover,
button.next.new:hover,
button.next.submit:hover,
button.next.submit2:hover,
button.next.details:hover,
button.next.cancel:hover,
button.next.delete:hover,
button.next.back:hover,
button.next.refresh:hover,
button.next.list:hover,
button.next.doc:hover,
button.next.pres:hover,
button.next.play:hover,
button.next.duplicate:hover,
.button.icon.next:hover,
.button.next.edit:hover,
ui-selection-list div.option-buttons div.next.edit:hover,
.button.next.new:hover,
ui-selection-list div.option-buttons div.next.new:hover,
.button.next.submit:hover,
ui-selection-list div.option-buttons div.next.submit:hover,
.button.next.submit2:hover,
ui-selection-list div.option-buttons div.next.submit2:hover,
.button.next.details:hover,
ui-selection-list div.option-buttons div.next.details:hover,
.button.next.cancel:hover,
ui-selection-list div.option-buttons div.next.cancel:hover,
.button.next.delete:hover,
ui-selection-list div.option-buttons div.next.delete:hover,
.button.next.back:hover,
ui-selection-list div.option-buttons div.next.back:hover,
.button.next.refresh:hover,
ui-selection-list div.option-buttons div.next.refresh:hover,
.button.next.list:hover,
ui-selection-list div.option-buttons div.next.list:hover,
.button.next.doc:hover,
ui-selection-list div.option-buttons div.next.doc:hover,
.button.next.pres:hover,
ui-selection-list div.option-buttons div.next.pres:hover,
.button.next.play:hover,
ui-selection-list div.option-buttons div.next.play:hover,
.button.next.duplicate:hover,
ui-selection-list div.option-buttons div.next.duplicate:hover,
ui-selection-list div.option-buttons div.icon.next:hover {
    background-position: calc(100% - 15px) 50%;
}

button.bordered,
button.delete,
button.button.delete,
.button.bordered,
.button.delete,
ui-selection-list div.option-buttons div.delete,
ui-selection-list div.option-buttons div.bordered {
    padding-top: 13px;
    padding-bottom: 12px;
}

button.olive:not(:hover),
.button.olive:not(:hover),
ui-selection-list div.option-buttons div.olive:not(:hover) {
    background-color: #007f46;
    color: white;
}

button.white:not(:hover),
.button.white:not(:hover),
ui-selection-list div.option-buttons div.white:not(:hover) {
    background-color: #eeefea;
}

button,
button.darkgrey:not(:hover),
.button,
ui-selection-list div.option-buttons div,
.button.darkgrey:not(:hover),
ui-selection-list div.option-buttons div.darkgrey:not(:hover) {
    background-color: #666666;
    color: white;
}

button.black:not(:hover),
.button.black:not(:hover),
ui-selection-list div.option-buttons div.black:not(:hover) {
    background-color: #444444;
    color: white;
}

button.yellow:not(:hover),
.button.yellow:not(:hover),
ui-selection-list div.option-buttons div.yellow:not(:hover) {
    background-color: #fecb00;
}

button.bmwblue:not(:hover),
.button.bmwblue:not(:hover),
ui-selection-list div.option-buttons div.bmwblue:not(:hover) {
    background-color: #1c69d4;
    color: white;
}

button.small,
.button.small,
ui-selection-list div.option-buttons div.small {
    font-size: 12px;
    line-height: 12px;
}

button.edit,
.button.edit,
ui-selection-list div.option-buttons div.edit {
    background-image: url("../res/svg/icon_edit_outline_white.svg");
}

button.new,
.button.new,
ui-selection-list div.option-buttons div.new {
    background-image: url("../res/images/btn-new.png");
}

button.submit,
.button.submit,
ui-selection-list div.option-buttons div.submit {
    background-image: url("../res/images/btn-submit.png");
}

button.submit2,
.button.submit2,
ui-selection-list div.option-buttons div.submit2 {
    background-image: url("../res/images/btn-submit.png");
}

button.details,
.button.details,
ui-selection-list div.option-buttons div.details {
    background-image: url("../res/images/btn-submit.png");
}

button.cancel,
.button.cancel,
ui-selection-list div.option-buttons div.cancel {
    background-image: url("../res/images/btn-cancel.png");
}

button.delete,
.button.delete,
ui-selection-list div.option-buttons div.delete {
    background-image: url("../res/svg/icon_delete_outline_red.svg");
    background-color: transparent;
    color: #cc3333;
    border: 1px solid #cc3333;
}

button.back,
.button.back,
ui-selection-list div.option-buttons div.back {
    background-image: url("../res/images/btn-back.png");
}

button.refresh,
.button.refresh,
ui-selection-list div.option-buttons div.refresh {
    background-image: url("../res/images/btn-refresh.png");
}

button.list,
.button.list,
ui-selection-list div.option-buttons div.list {
    background-image: url("../res/images/btn-list.png");
}

button.doc,
.button.doc,
ui-selection-list div.option-buttons div.doc {
    background-image: url("../res/svg/icon_document_outline_white.svg");
}

button.pres,
.button.pres,
ui-selection-list div.option-buttons div.pres {
    background-image: url("../res/svg/icon_document_outline_white.svg");
}

button.play,
.button.play,
ui-selection-list div.option-buttons div.play {
    background-image: url("../res/svg/icon_video_outline_white.svg");
}

button.duplicate,
.button.duplicate,
ui-selection-list div.option-buttons div.duplicate {
    background-image: url("../res/images/btn-new.png");
}

/** Block link, prefixed with an > icon. */
a.block {
    color: #444444;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 10px 0;
    text-decoration: none;
    cursor: pointer;
}

a.block::before {
    content: "";
    display: inline-block;
    background: url("../res/svg/arrow_right_dark.svg") no-repeat 50% 50% / contain;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    transition: color 200ms,
        transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    vertical-align: middle;
}

a.block:hover {
    color: black;
}

a.block:hover::before {
    transform: translateX(5px);
}

/** Text inputs */
input,
textarea {
    box-sizing: border-box;
    border: 1px solid #999999;
    border-radius: 0;
    box-shadow: 0;
    font-size: 1rem;
    font-family: Helvetica, sans-serif;
    padding: 12px 10px;
    display: block;
    width: 100%;
}

input:focus,
textarea:focus {
    outline: none;
}

input:disabled,
input:read-only,
textarea:disabled,
textarea:read-only {
    color: #999999;
}

input[type="color"] {
    padding: 0;
    height: 50px;
    border: 0;
    width: 200px;
}

textarea {
    min-height: 190px;
}

/** Check boxes and radio buttons. */
input[type="checkbox"],
input[type="radio"] {
    display: none;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
    display: inline-block;
    font-family: Helvetica, sans-serif;
    padding: 8px 0 8px 36px;
    position: relative;
    cursor: pointer;
}

input[type="checkbox"]+label:active,
input[type="radio"]+label:active {
    opacity: 0.8;
}

input[type="checkbox"]+label::before,
input[type="radio"]+label::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    border: 1px solid #444444;
}

input[type="checkbox"]+label::after,
input[type="radio"]+label::after {
    display: block;
    content: "";
    position: absolute;
}

input[type="checkbox"]+label::before {
    transition: border 200ms;
}

input[type="checkbox"]+label::after {
    width: 0;
    height: 22px;
    left: 0;
    top: 6px;
    background: url("../res/svg/checkbox_checkmark.svg") no-repeat 4px 50%/14px 11px;
    transition: width 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

input[type="checkbox"]:checked+label::before {
    border-bottom: 3px solid #444444;
}

input[type="checkbox"]:checked+label::after {
    width: 22px;
}

input[type="radio"]+label::after {
    left: 6px;
    top: 12px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #444444;
    opacity: 0;
}

input[type="radio"]:checked+label::before {
    border-radius: 16px;
}

input[type="radio"]:checked+label::after {
    opacity: 1;
}

/* Dropdown */
ui-dropdown {
    display: block;
    font-family: Helvetica, sans-serif;
    font-size: 15px;
    min-width: 100px;
    position: relative;
    transition: opacity 300ms;
    text-align: left;
    vertical-align: middle;
    width: 50%;
    margin-bottom: 10px;
}

ui-dropdown input {
    display: none;
}

ui-dropdown div.selected {
    background-color: #d9d9d9;
    cursor: pointer;
}

ui-dropdown div.selected::after {
    content: "";
    display: block;
    background: url("../res/svg/arrow_down_dark.svg") no-repeat 50% 50%;
    position: absolute;
    right: 20px;
    top: 0;
    width: 18px;
    height: 100%;
    transition: transform 250ms cubic-bezier(0.86, 0, 0.07, 1);
}

ui-dropdown div.selected span {
    display: block;
    color: #444444;
    overflow: hidden;
    padding: 14px 30px;
    text-overflow: ellipsis;
    transition: padding 250ms;
    white-space: nowrap;
}

ui-dropdown:not(.open):not(:active) div.selected:hover {
    background-color: whitesmoke;
}

ui-dropdown.open div.selected::after {
    transform: rotate(180deg);
}

ui-dropdown div.options {
    background-color: #d9d9d9;
    /*box-shadow:0 10px 25px -6px rgba(0, 0, 0, 0.5);*/
    left: 0;
    max-height: 300px;
    pointer-events: none;
    position: absolute;
    opacity: 0;
    overflow: auto;
    top: 100%;
    transform-origin: 50% 0;
    transform: scaleY(0.95);
    transition: opacity 150ms,
        transform 250ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    width: 100%;
    z-index: 2;
}

ui-dropdown div.options div.option {
    box-sizing: border-box;
    color: #999999;
    cursor: pointer;
    display: block;
    overflow: hidden;
    padding: 14px 30px;
    text-overflow: ellipsis;
    transition: color 120ms, background-color 120ms;
    white-space: nowrap;
}

ui-dropdown div.options div.option:hover,
ui-dropdown div.options div.option.current {
    color: #444444;
}

ui-dropdown div.options div.group::before {
    color: black;
    content: attr(label);
    display: block;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 2px 8px;
    text-transform: uppercase;
}

ui-dropdown div.options div.group div.option {
    padding-left: 16px;
}

ui-dropdown.open div.options {
    display: block;
    pointer-events: all;
    opacity: 1;
    transform: scaleY(1);
}

ui-dropdown.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Keywords input */
ui-keywords {
    display: block;
    background-color: white;
    border: 1px solid #999999;
    cursor: text;
    font-family: Helvetica, sans-serif;
}

ui-keywords::after {
    display: block;
    content: "";
    clear: both;
}

ui-keywords span.keywords {
    display: block;
    float: left;
    overflow: hidden;
    width: auto;
    min-width: 40px;
    height: 20px;
    padding: 14px 10px;
    outline: none;
}

ui-keywords div.keyword {
    animation: showKeyword 250ms 0ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: #ececec;
    display: block;
    float: left;
    cursor: pointer;
    color: #646464;
    font-size: 0.9rem;
    margin: 2px;
    padding: 14px 12px 13px;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 150ms, color 150ms;
}

ui-keywords div.keyword:hover {
    background-color: gainsboro;
    color: black;
}

ui-keywords div.keyword:active {
    opacity: 0.5;
}

ui-keywords div.keyword::after {
    display: inline-block;
    content: "×";
    color: #444444;
    font-size: 14px;
    padding-left: 8px;
    vertical-align: center;
}

ui-keywords div.keyword:hover::after {
    color: black;
}

@keyframes showKeyword {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Selection list */
ui-selection-list {
    display: block;
    font-family: Helvetica, sans-serif;
}

ui-selection-list div.input-holder {
    background-color: #d9d9d9;
    position: relative;
    width: 320px;
}

ui-selection-list div.input-holder::after {
    content: "";
    display: block;
    background: url("../res/svg/arrow_down_dark.svg") no-repeat 50% 50%;
    position: absolute;
    right: 20px;
    top: 0;
    width: 18px;
    height: 100%;
    transition: transform 250ms cubic-bezier(0.86, 0, 0.07, 1);
    pointer-events: none;
}

ui-selection-list div.option-buttons {
    position: absolute;
    left: calc(100% + 4px);
    top: 0;
    overflow: hidden;
    pointer-events: none;
}

ui-selection-list div.option-buttons div {
    display: inline-block;
    font-size: 0.8rem;
    margin-bottom: 2px;
    opacity: 0;
    padding: 12px 16px;
    transform: translateX(-16px);
    transition: transform 400ms, opacity 300ms;
    white-space: nowrap;
}

ui-selection-list div.option-buttons div:hover {
    background-color: black;
}

ui-selection-list div.option-buttons div:nth-of-type(2) {
    transition-delay: 100ms;
}

ui-selection-list div.option-list-holder {
    box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #999999;
    border-top: 0;
    max-height: 220px;
    position: absolute;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    left: 0;
    opacity: 0;
    top: calc(100% - 1px);
    transform: scaleY(0.8);
    transform-origin: 50% 0;
    transition: opacity 250ms, transform 250ms cubic-bezier(0.86, 0, 0.07, 1);
    width: 100%;
    z-index: 4;
    pointer-events: none;
}

ui-selection-list div.option-list-holder div.option-list {
    position: relative;
}

ui-selection-list div.option-list-holder div.option-list:empty::after {
    content: "";
    display: block;
    height: 4px;
}

ui-selection-list div.option-list-holder div.option-list div.option {
    cursor: pointer;
    box-sizing: border-box;
    font-size: 0.9em;
    padding: 11px 12px;
    transition: background-color 200ms, padding 200ms;
}

ui-selection-list div.option-list-holder div.option-list div.option:hover {
    background-color: #f0f0f0;
    padding-left: 20px;
}

ui-selection-list.open div.option-list-holder {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: all;
}

ui-selection-list.open div.input-holder::before {
    background-color: #d9d9d9;
    content: "";
    position: absolute;
    left: 12px;
    top: 100%;
    width: calc(100% - 24px);
    height: 1px;
    z-index: 2;
}

ui-selection-list.open div.option-buttons {
    pointer-events: all;
}

ui-selection-list.open div.option-buttons div {
    opacity: 1;
    transform: translateX(0);
}

ui-selection-list div.selections-holder div.selected-option {
    margin: 2px 0;
}

ui-selection-list div.selections-holder div.selected-option span {
    animation: showSelectedOption 250ms 0ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: #ececec;
    cursor: pointer;
    display: inline-block;
    padding: 6px 4px;
    width: auto;
    font-size: 0.9rem;
    padding: 11px 12px;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 150ms, color 150ms;
}

ui-selection-list div.selections-holder div.selected-option span:hover {
    background-color: gainsboro;
    color: black;
}

ui-selection-list div.selections-holder div.selected-option span:active {
    opacity: 0.5;
}

ui-selection-list div.selections-holder div.selected-option span::before {
    display: inline-block;
    content: "";
    width: 14px;
    height: 12px;
    padding: 0 8px;
    background: url("../res/svg/checkbox_checkmark.svg") no-repeat 4px 0/14px 11px;
    vertical-align: middle;
}

ui-selection-list div.selections-holder div.selected-option span::after {
    display: inline-block;
    content: "×";
    color: #444444;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding-left: 8px;
    vertical-align: center;
}

ui-selection-list div.selections-holder div.selected-option span:hover::after {
    color: black;
}

@keyframes showSelectedOption {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Spinner */
ui-spinner {
    animation: color-bubble 2s linear 0s infinite;
    color: #1c69d4;
    display: block;
}

ui-spinner::after,
ui-spinner::before {
    content: "";
    animation: spinner-bubble 2000ms linear 0s infinite;
    border-radius: 100%;
    bottom: 0;
    box-shadow: 0 0 0 3px;
    margin: auto;
    position: absolute;
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 10px;
    height: 10px;
}

ui-spinner::before {
    animation: spinner-bubble 2000ms linear 3000ms infinite;
}

@keyframes spinner-bubble {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}

/* Fancy textfield. */
ui-textfield {
    display: block;
    border: 1px solid #0a0a0a;
    box-sizing: border-box;
    font-family: Helvetica, sans-serif;
    position: relative;
    transform: translateZ(1px) scale(1) rotate(0deg);
    transition: transform 300ms cubic-bezier(1, 0, 0, 1);
    will-change: transform;
}

ui-textfield label {
    display: block;
    color: #0a0a0a;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
    pointer-events: none;
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    user-select: none;
    z-index: 2;
}

ui-textfield label span {
    color: red;
}

ui-textfield input {
    background: none;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    font-family: Helvetica, sans-serif;
    font-size: 1.1rem;
    margin: 0;
    padding: 22px 10px 22px 120px;
    position: relative;
    width: 100%;
    outline: none;
}

ui-textfield input::before {
    background-color: #444444;
    content: "";
    display: block;
    position: absolute;
    width: 0;
    transition: width 400ms ease-in-out;
}

ui-textfield input:focus::before {
    width: 100%;
}

ui-textfield label,
ui-textfield input,
ui-textfield input::placeholder {
    transition: color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
        background-color 300ms;
}

ui-textfield input:-webkit-autofill+label {
    color: #0a0a0a;
}

ui-textfield input::-webkit-credentials-auto-fill-button {
    background-color: white;
}

ui-textfield::before {
    background: linear-gradient(45deg, #444444 60%, #292929 100%);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    content: "";
    display: block;
    width: 0%;
    height: calc(100% + 6px);
    position: absolute;
    left: -3px;
    top: -3px;
    transition: width 400ms cubic-bezier(0.86, 0, 0.07, 1),
        box-shadow 500ms cubic-bezier(0.86, 0, 0.07, 1);
}

ui-textfield.focus {
    z-index: 2;
}

ui-textfield.focus::before {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.6);
    width: calc(100% + 6px);
}

ui-textfield.focus label,
ui-textfield.focus input {
    color: white;
}

ui-textfield.focus input::placeholder {
    color: #a0a0a0;
}

@font-face {
    font-family: "BMW Group";
    font-weight: lighter;
    src: url("../res/fonts/BMWGroupLight-Regular.woff") format("woff"),
        url("../res/fonts/BMWGroupLight-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "BMW Group";
    font-weight: normal;
    src: url("../res/fonts/BMWGroup-Regular.woff") format("woff"),
        url("../res/fonts/BMWGroup-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "BMW Group";
    font-weight: bold;
    src: url("../res/fonts/BMWGroup-Bold.woff") format("woff"),
        url("../res/fonts/BMWGroup-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "BMW Group Condensed";
    font-weight: normal;
    src: url("../res/fonts/BMWGroupCondensed-Regular.woff") format("woff"),
        url("../res/fonts/BMWGroupCondensed-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "BMW Group Condensed";
    font-weight: bold;
    src: url("../res/fonts/BMWGroupCondensed-Bold.woff") format("woff"),
        url("../res/fonts/BMWGroupCondensed-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "BMW Group Serif";
    font-weight: normal;
    src: url("../res/fonts/BMWGroupSerif-Regular.woff") format("woff"),
        url("../res/fonts/BMWGroupSerif-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "BMW Group Serif";
    font-weight: bold;
    src: url("../res/fonts/BMWGroupSerif-Bold.woff") format("woff"),
        url("../res/fonts/BMWGroupSerif-Bold.ttf") format("truetype");
}

#html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background-color: #f6f6f6;
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#wrapper {
    display: flex;
    width: 100%;
    min-height: 100%;
    position: relative;
    background: url("../res/images/login_bg_2_lr.jpg") no-repeat 0 0 / cover;
}

#wrapper ui-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
}

#poweredby {
    color: #6e6e6e;
    font-size: 0.7em;
    position: absolute;
    left: 0;
    bottom: 26px;
    text-align: center;
    width: 100%;
}

#poweredby a {
    color: black;
}

#poweredby a:hover {
    text-decoration: none;
}

#formholder {
    background: url("../res/images/login_bg_2_blur.jpg") no-repeat 0 0 / cover;
    position: relative;
}

#formholder div.inner {
    background: linear-gradient(-35deg,
            rgba(255, 255, 255, 0.7) 75%,
            white 95%);
    display: flex;
    padding: 0 62px;
    width: 400px;
    height: 100vh;
    min-height: 500px;
}

#formholder div.inner div.content {
    margin: auto;
    width: 100%;
}

#formholder div.inner div.content div.logo {
    background: url("../res/svg/login_logo.svg") no-repeat 0 100% / contain;
    padding-left: 150px;
    padding-top: 50px;
}

#formholder div.inner div.content p {
    margin-left: 150px;
    display: block;
    color: #3c3c3c;
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    line-height: 24px;
    padding: 10px 0 10px 30px;
    text-transform: uppercase;
    border-left: 1.5px solid rgba(0, 0, 0, 0.1);
    height: 100%;
}

#formholder div.inner div.content p strong {
    display: block;
    color: #141414;
}

#formholder div.inner div.content form ui-textfield {
    margin-bottom: 17px;
    width: 100%;
}

#formholder div.inner div.content form div.columns {
    font-size: 0.9em;
}

#formholder div.inner div.content form div.columns div.column {
    display: inline-block;
    vertical-align: top;
}

#formholder div.inner div.content form div.columns div.column:first-of-type {
    padding-top: 6px;
    width: 55%;
}

#formholder div.inner div.content form div.columns div.column:nth-of-type(2) {
    width: 45%;
}

#formholder div.inner div.content form input[type="submit"] {
    width: 100%;
}

form {
    position: relative;
}

form ui-spinner {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
}

form.busy {
    pointer-events: none;
}

form.busy * {
    opacity: 0.5;
}

form.busy ui-spinner {
    display: block;
    opacity: 1;
}

body>header {
    background-color: #f6f6f6;
    box-sizing: border-box;
    display: block;
    position: relative;
    font-size: 0.8em;
    margin: 0;
    padding: 0 40px 0 160px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 4;
}

body>header a#logo {
    background: url("../res/svg/login_logo.svg") no-repeat 0 50% / contain;
    display: block;
    left: 40px;
    top: 0;
    position: absolute;
    width: 100px;
    height: 100%;
    transition: width 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

body>header nav ul li a,
body>header div#userblock a {
    color: #1e1e1e;
    display: block;
    font-family: Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0.07em;
    padding: 30px 26px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: padding 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
        font-size 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

body>header nav ul li a::before,
body>header div#userblock a::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    margin-right: 16px;
    vertical-align: middle;
    transition: margin 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

body>header div#userblock a::before,
body>header nav ul li a::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    background-image: url(../res/images/logistics.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    margin-right: 16px;
    vertical-align: middle;
    transition: margin 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

body>header div#userblock a::before,
body>header nav ul li.active a:before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    background-image: url(../res/images/logistics_green.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    margin-right: 16px;
    vertical-align: middle;
    transition: margin 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

body>header nav {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

body>header nav ul,
body>header nav ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: color 150ms, background-color 150ms;
}

body>header nav ul li {
    display: inline-block;
}

body>header nav ul li:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

body>header nav ul li:hover a {
    color: black;
}

body>header nav ul.toplevel>li.active>a {
    color: white;
    cursor: default;
    background-color: #007f46;
    /*box-shadow:0 5px 8px -2px rgba(0, 0, 0, 0.4);*/
    z-index: 2;
}

body>header nav ul.toplevel>li.active>a::after {
    background-color: #007f46;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 3px;
}

body>header nav ul li.active ul.secondlevel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

body>header nav ul li ul.secondlevel {
    background-color: rgba(255, 255, 255, 0.97);
    box-sizing: border-box;
    display: none;
    padding: 0 40px 0 160px;
}

body>header nav ul li ul.secondlevel li {
    position: relative;
    margin: 0 1px 0 0;
}

body>header nav ul li ul.secondlevel li::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transition: left 200ms cubic-bezier(0.86, 0, 0.07, 1),
        width 200ms cubic-bezier(0.86, 0, 0.07, 1);
    width: 0;
    height: 3px;
}

body>header nav ul li ul.secondlevel li a {
    color: black;
    padding: 30px 20;
}

body>header nav ul li ul.secondlevel li a::before {
    display: none;
}

body>header nav ul li ul.secondlevel li:hover,
body>header nav ul li ul.secondlevel li.active {
    background: none;
}

body>header nav ul li ul.secondlevel li:hover::after,
body>header nav ul li ul.secondlevel li.active::after {
    left: 0;
    width: 100%;
}

body>header nav ul li ul.secondlevel li::after {
    background-color: #007f46;
}

@supports (-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px)) {
    body>header nav ul li ul.secondlevel {
        background-color: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}

body>header nav ul li.home a::before,
body>header nav ul li.logistiek a::before {
    background-image: url("../res/svg/icon_home_dark_outline.svg");
}

body>header nav ul li.menu a::before {
    background-image: url("../res/svg/icon_content_dark_outline.svg");
}

body>header nav ul li.users a::before {
    background-image: url("../res/svg/icon_management_dark_outline.svg");
}

body>header nav ul li.active.home a::before,
body>header nav ul li.active.logistiek a::before {
    background-image: url("../res/svg/icon_home_white_filled.svg");
}

body>header nav ul li.active.menu a::before {
    background-image: url("../res/svg/icon_content_white_filled.svg");
}

body>header nav ul li.active.users a::before {
    background-image: url("../res/svg/icon_management_white_filled.svg");
}

body>header div#userblock {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
    width: 160px;
    height: 100%;
}

body>header div#userblock a {
    display: inline-block;
}

body>header div#userblock a::before {
    background-image: url("../res/svg/icon_logout_dark_outline.svg");
}

body>header.compact a#logo {
    width: 50px;
}

body>header.compact a::before {
    margin-right: 0;
}

body>header.compact nav ul.toplevel>li>a {
    font-size: 0;
}

body>header.compact nav ul.toplevel a {
    padding: 14px 26px;
}

body>header.compact div#userblock a {
    font-size: 0;
    padding: 14px;
}

body>header.compact div#userblock a::before {
    margin-right: 0;
}

div#content {
    background: white;
    margin: 200px auto 60px auto;
    max-width: 1100px;
    padding: 20px 30px;
    width: 100%;
}

div#content a:hover {
    color: #007f46;
}

div#content ui-dropdown#app_id,
div#content ui-dropdown#division_id {
    min-width: 250px;
    margin-right: 8px;
}

div#content h1 {
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 0.1px;
}

div#content dl {
    width: 100%;
    padding: 20px 0;
}

div#content dl::after {
    content: "";
    display: block;
    clear: both;
}

div#content dl dt,
div#content dl dd {
    border-top: 1px solid #f0f0f0;
    float: left;
    padding: 12px 0;
}

div#content dl dt:first-of-type,
div#content dl dd:first-of-type {
    border-top: 0;
}

div#content dl dt {
    clear: both;
    width: 180px;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.1px;
}

div#content dl dt label {
    display: block;
    padding-top: 8px;
}

div#content dl dd {
    display: block;
    margin: 0;
    width: 520px;
}

div#content dl dd select {
    display: block;
    margin-bottom: 8px;
}

div#content dl dd ui-dropdown {
    min-width: 250px;
}

div#content dl dd button.details,
div#content dl dd .fileselection button {
    margin-right: 6px;
    font-size: 12px;
    line-height: 12px;
}

div#content .filelist {
    border: 1px solid #999999;
    height: 215px;
    overflow: auto;
    width: 100%;
}

div#content .filelist.big {
    height: 500px;
    margin-top: 20px;
}

div#content .filelist strong {
    color: #ccc;
    display: block;
    text-align: right;
}

div#content .filelist table {
    margin: 0;
}

div#content .filelist table tr {
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    height: 22px;
}

div#content .filelist table tr:last-of-type {
    border-bottom: 0;
}

div#content .filelist table tr.active {
    background-color: #ccc;
}

div#content .filelist table tr.unusable {
    color: #ccc;
}

div#content .filelist table tr td {
    padding: 10px 6px 10px 6px;
    text-align: left;
    vertical-align: top;
}

div#content .filelist table tr td:first-child {
    background: url("../res/images/icons.png") 0 -543px no-repeat;
    display: block;
    height: 20px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 20px;
}

div#content .filelist table tr td:nth-child(2) {
    width: 100%;
}

div#content div.error dl {
    margin: 0;
    padding: 0;
}

#appmenu {
    list-style: none;
    margin: 30px 0;
    padding: 0;
    position: relative;
}

#appmenu>li {
    padding: 0;
}

#appmenu ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 40px;
}

#appmenu li {
    border-top: 1px solid #ddd;
    line-height: 30px;
    transition: box-shadow 500ms;
}

#appmenu li * {
    vertical-align: middle;
}

#appmenu li:hover {
    background: rgba(65, 39, 39, 0.02);
}

#appmenu li.dragged {
    position: absolute;
    background: white;
    box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.3);
    border-top: 0;
    top: 0;
    z-index: 2;
}

#appmenu li.dragged button {
    display: none;
}

#appmenu li.hidden ul {
    display: none;
}

#appmenu li.placeholder {
    background: #eee;
    height: 54px;
}

#appmenu li.inactive a {
    color: #ddd;
}

#appmenu li.inactive button {
    background-color: #ddd;
}

#appmenu li a {
    display: inline-block;
    font-size: 15px;
    padding: 12px 0 12px 8px;
    text-decoration: none;
}

#appmenu li .icon-move,
#appmenu li .icon-door {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0.3;
    display: block;
    height: 54px;
    float: left;
    width: 26px;
}

#appmenu li .icon-move {
    background-image: url("../res/images/icon-move.png");
    cursor: row-resize;
}

#appmenu li .icon-door {
    background-image: url("../res/images/icon-plus.png");
    cursor: pointer;
}

#appmenu li .icon-move+a {
    padding-left: 34px;
}

#appmenu li .icon-door.min {
    background: url("../res/images/icon-min.png") center no-repeat;
}

#appmenu li button {
    display: block;
    float: right;
    font-size: 12px;
    line-height: 12px;
    width: 140px;
    margin-top: 7px;
}

table {
    font-size: 0.9rem;
}

table thead tr th {
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
}

table thead tr th:first-of-type {
    padding-left: 20px;
}

table thead tr th button,
table thead tr th input,
table thead tr th span,
table thead tr th ui-dropdown {
    display: none;
}

table tbody tr {
    border-bottom: 1px solid #e6e6e6;
    transition: box-shadow 150ms, background-color 150ms;
}

table tbody tr:first-of-type {
    border-radius: 10px 10px 0 0;
}

table tbody tr:last-of-type {
    border-radius: 0 0 10px 10px;
}

table tbody tr:hover {
    background-color: white;
    box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

table tbody tr td {
    padding-top: 6px;
    padding-bottom: 6px;
}

table tbody tr td:first-of-type {
    padding-left: 20px;
}

table tbody tr td button {
    color: black;
    background-color: white;
}

div.error,
div.message {
    margin: 20px 0;
    padding: 0 20px;
}

div.error h4,
div.message h4 {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
}

div.message {
    border: 2px solid #666666;
    color: #666666;
}

div.message h4 {
    color: #666666;
}

div.error {
    border: 2px solid #cc3333;
    color: #cc3333;
}

div.error h4 {
    color: #cc3333;
}

#mapform {
    width: 100%;
    clear: both;
    float: none;
    border: 1px solid #8a8a8a;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0px 0px 7px -2px #676767;
    margin-bottom: 0;
    position: relative;
    margin-top: 13px;
    list-style: none;
    display: inline-block;
    width: 100%;
}

#googlemapcon {
    height: 400px;
}

#googlemapcon #map-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    float: right;
    z-index: 0;
}

#geojson-properties {
    float: left;
    width: 100%;
    height: auto;
    outline: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 2;
}

#googlemapcon #panel {
    float: left;
    width: 100%;
    height: 200px;
    outline: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 2;
    display: none !important;
}

#googlemapcon #panel-content {
    padding: 8.5px;
}

#googlemapcon #drop-container,
#googlemapcon #map-holder {
    height: 100%;
    width: 100%;
}

#showMap {
    height: 250px;
    border: 1px solid #024c6f;
    /*border-radius:5px;*/
}

#googlemapcon {
    height: 400px;
}

#googlemapcon #map-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    float: right;
    z-index: 0;
}

#googlemapcon #drop-container,
#googlemapcon #map-holder {
    height: 100%;
    width: 100%;
}

#googlemapcon #drop-container {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: hsla(0, 0%, 39%, 0.5);
}

#googlemapcon #drop-container.visible {
    display: block;
}

#googlemapcon #drop-silhouette {
    color: #fff;
    border: 8px dashed #fff;
    height: calc(100% - 56px);
    width: calc(100% - 56px);
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAAZiS0dEAGQAZABkkPCsTwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90LHAIvICWdsKwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACdklEQVR42u3csU7icBzA8Xp3GBMSeRITH8JHMY7cRMvmVmXoE9TAcJubhjD4ApoiopgqDMWAKAgIcSAiCfxuwhwROVJbkPD9rP23ob8vpZCQKgoAAAAAAAAAAPDYyiK/eNM05bNtr6+vSjgcXiHxDMkE1WpVFvGcfpCVICAIQUAQgoAgBAFBCAKCgCAEAUEIAoIQBAQhCAgCghAEBCEICEIQEIQgIAgIQhAQhCAgCEFAEIKAICAIQUAQgoAgBAFBCDIzhmFINBo9/K6D0XVddnd3ZaneDY7jSCqVcn3SfjyeKRKJbJ2dnYllWbKUl2i5XJaXlxdJJBIy7yDHx8fy9vYm6XR6OWMM3d/fi4hIqVSSWCwmsw5ycHAgrVZLRETOz8+XO8ZQpVJ5H2Y6nRZN0/b9DqLruhSLxfd9MpkMMT6L0uv1JJlMih9BhveJwWDwvv7i4oIY4zw8PIwMtt1uSzweF6+CHB0dSbfbHVmbzWaJMcnj4+OHAd/d3cne3p64DWKapjw/P39Yd3l5SYxpVKvVsYO2LEtUVd2ZNoiu6+I4ztg1V1dXxPAiSq/Xk5OTk0k9pNVqyenp6ch94l+5XI4YbtRqNfHa9fX1t43xcwGa/Nnc3PwdDAY9OZht28rGxgZPvP6KSCSy9fT09OUrw7ZtPqa8jFKv113HuLm5IYbXVFXdcRPl9vaWGH5GaTQaU8fI5/PE8JumafvNZvO/MQqFAjFmJRqNHk6Ksqgx5vr1zzAM2d7edr3/6uqqsra2NnZbp9NR+v2+62OHQqG5zObXPIMEAgFlfX3dl2N79btl1viTA0FAEIKAIAQBAAAAAAAAsMz+Ai1bUgo6ebm8AAAAAElFTkSuQmCC");
    background-repeat: no-repeat;
    background-position: 50%;
    margin: 20px;
}

#googlemapcon #panel {
    float: left;
    width: 100%;
    height: 200px;
    outline: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 2;
}

#googlemapcon #panel-content {
    padding: 8.5px;
}

#googlemapcon #geojson-controls {
    padding-bottom: 8px;
}

#googlemapcon #geojson-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    resize: none;
    background-color: #f1f1f1;
}

#googlemapcon #panel-title {
    font-size: 20px;
    line-height: 24px;
    color: #dd4b39;
}

#googlemapcon .subtitle {
    font-size: 16px;
    color: #222;
}

#googlemapcon hr {
    color: #ebebeb;
}

#googlemapcon #geojson-input {
    background-color: #f1f1f1;
}

#googlemapcon #geojson-input.invalid {
    background-color: #fac6c0;
}

#geojson-properties {
    float: left;
    width: 100%;
    height: auto;
    outline: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 2;
}

#geojson-properties .feature {
    background-color: #f1f1f1;
    width: calc(100% - 10px);
    padding: 10px;
    box-sizing: border-box;
    margin: 5px;
}

#adressbutton {
    display: inline-block;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 14px 26px 13px 26px;
    text-align: left;
    text-transform: uppercase;
    transition: background-color 200ms, color 200ms, opacity 150ms,
        transform 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
        background-position 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    outline: none;
    vertical-align: middle;
    background-color: #666666;
    color: white;
}

@media (max-width: 480px) {
    #formholder {
        width: 100%;
    }

    #formholder div.inner {
        box-sizing: border-box;
        width: 100%;
        min-height: inherit;
        padding: 0 20px;
    }
}