/*

    Authors: Adrian Demleitner
    E-Mail: a.demleitner@cloudtec.ch
    2018 (c) cloudtec.ch

    Arcplace Styles

    0. Font
    1. Colors
    2. Typography
    3. Simple Customizations
    4. Form Styles
    5. Specialities

 */

/* 0. Font */

html, body, input, textarea, select, button {
    font-family: 'maaxregular', sans-serif !important;
}
html, body {
    color: #181818;
}
.tool-section-title {
    padding: 0;
    margin: 0;
    border-right: none;
    font-size: 28px;
    line-height: 30px;
    float: left;
}
.tool-section-title + .tool-section-subtitle {
    padding: 0 0 0 20px;
    margin: 0 0 0 20px;
    border-left: 1px solid rgba(0, 0, 0, 0.09);
}
.small-font {
    font-size:88%;
    line-height:105%;
}

.icon-warning:before { content: '\e81d'; }
.icon-error:before { content: '\e81d'; }

/* ------------------------------------------------------------ *\
    1. Colors
\* ------------------------------------------------------------ */

html.maximized,
html.maximized body {
    overflow:hidden;
}

body {
    background-color: #F6F8FA;
}

.color-primary, .cp { color: #468BAC !important; }
.color-secondary, .cs { color: #B584C8 !important; }

.bg-primary, .bgp { background-color: #468BAC; }
.bg-secondary, .bgs { background-color: #B584C8 }
.bg-primary:hover, .bgp:hover { background-color: #a3c5d5; }
.bg-secondary:hover, .bgs:hover { background-color: #B584C8; }

.strikethrough { text-decoration:line-through; }

#main-navigation > li.active,
#main-navigation > li:hover {
    background-color: #51a2c4;
}
#main-navigation > li > a.disabled {
    color: rgba(255,128,128,0.6) !important;
    background-color: rgba(255,0,0,0.1) !important;
}
.side-navigation > li.active {
    background-color: #51A2C4;
    border-color: #468BAC;
}
#wrapper .side-navigation > li > a.disabled > p {
    color: #80569166 !important;
}
#wrapper .side-navigation > li > a.disabled {
    background-color: #80569113 !important;
}
a.disabled {
    pointer-events: none;
}
.table-head .table-row, .table-head .table-row:hover {
    background-color: #fff;
    border-bottom: solid 10px #F6F8FA;
}
.table-head a, .table-head a:link, .table-head a:hover, .table-head a:focus, .table-head p {
    color: #181818;
    font-size: 14px;
}
.table-head .table-cell {
    padding: 5px 15px 5px 0 !important;
}
.table-head .table-cell:first-child,
.table-body .table-cell:first-child {
    padding-left: 15px !important;
}
.table-row.disabled .table-cell {
    opacity:0.5;
}
.table-head a:hover {
    text-decoration: underline;
}
.table-body:hover {
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.125);
}
.table-body .table-row, .table-body .table-row.small-row, .table-body .table-row-medium {
    border-bottom: solid 1px rgba(0,0,0,0.09) !important;
}
#main-section .table-body p {
    color: #181818;
}
.table-cell {
    text-align: left;
}
.table-cell.tac {
    text-align: center;
}
.table-cell.left {
    padding-left: 1px !important;
}
.table-cell.ellipsis {
    position:relative;
}
.table-cell.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.table-cell.ellipsis > p {
    position: absolute;
    left: 0;
    right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table-cell.date-cell {
    font-size: 14px;
}
.table-cell.spacer {
    width: 220px;
}
@media (max-width: 1300px) {
    .table-cell.spacer {
        display:none;
        width:0;
    }
}
.floatThead-container {
    padding: 0 !important;
}
.inline {
    display: inline-block;
    margin-right: 0.25em;
}
thead {
    font-weight: bold
}
@media (max-width: 1300px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1024px) {
    .entries-per-page-holder {
        padding-right: 50px;
        margin-top: -3px;
    }
}

table.form-input-table {
    border-top:solid 1px #e8e8e8;
    width: 100%;
}
table.form-input-table.head {
    border-top:none;
}
table.form-input-table td {
    vertical-align: middle;
    padding:5px 15px;
    box-sizing: content-box;
}
table.form-input-table td input.error,
#bpoc_invoice_day_slaExceptionReason.error {
    border-color: red;
    color: red;
    background-color: rgba(255,0,0,0.05);
}
#bpoc_invoice_position .form-label label.border {
    margin-top:0;
    padding-top:16px;
    border-top:solid 1px #e8e8e8;
    display:inline-block;
    width: auto;
    float:right;
}

/* buttons */

/* #805691, #B584C9 */
button, .button {
    padding: 0 40px;
    height: 35px;
    line-height: 34px;
    font-weight: bold;
}

button, .button, button[type="submit"] {
    font-size: 14px;

    background-color: #B584C9 !important;
    color: #fff;

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    overflow: hidden;
    transform: translateZ(0);
    z-index: 0;
}

button:after, .button:after, button[type="submit"]:after {
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -o-transition: width .3s cubic-bezier(.455, .03, .515, .955) 0s;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -webkit-transition: width .3s cubic-bezier(.455, .03, .515, .955) 0s;
    content: "";
    display: block;
    height: 550px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transition: width .3s cubic-bezier(.455, .03, .515, .955) 0s;
    width: 0;
    z-index: -1;

    background-color: #805691;
}
.button-cancel {
    padding-right: 5px;
}
.button-cancel:after {
    background-color: #e65c5c;
}

button:hover, .button:hover, button[type="submit"]:hover,
button:focus, .button:focus, button[type="submit"]:focus {
    color: white !important;
    background-color: #B584C9 !important;
}
button:hover:after, .button:hover:after, button[type="submit"]:hover:after,
button:focus:after, .button:focus:after, button[type="submit"]:focus:after {
    width: 110%;
}

/* special cases */
.button-cancel:after,
.button-delete:after,
#show-filter-button:after {
    content: none;
}

.button-polite {
    color: #B584C9 !important;
    background-color: transparent !important;
}
.button-polite:hover {
    background-color: transparent !important;
    text-decoration: underline;
}
.button-polite:after,
.button-polite:hover:after {
    content: none;
}

.button-cancel {
    color: #222;
    background-color: transparent !important;
}
.button-cancel:hover {
    color: #222;
    text-decoration: underline;
    background-color: transparent !important;
}
.button-icon,
.image_actions a.button-delete,
li.document a.button-delete {
    padding: 0;
    width: 40px;
    text-align: center;
}
.button-delete,
.image_actions a.button-delete,
li.document a.button-delete {
    color: #fff;
    border-color: #e63428 !important;
    background-color: #e63428 !important;
    opacity: .75;
}
.button-delete:hover,
.image_actions a.button-delete:hover,
li.document a.button-delete:hover {
    opacity: 1;
}
.button-icon > span,
.button-icon > span:before {
    font-size: 14px;
    line-height: 35px;
    margin: 0 !important;
}

#show-filter-button {
    background-color: #51A2C4 !important;
    z-index: 1500;
}
#show-filter-button:hover {
    background-color: #a3c5d5 !important;
}
#show-left-section-button {
    height: 50px;
}

/* datatable buttons */

.table-wrap .datatable {
    min-width: 0;
}

.datatable-tools-holder {
    padding-right: 10px;
}

.datatable-tools-holder,
.datatable-tools-holder .default-buttons {
    min-width:300px;
    white-space: nowrap;
}

.datatable-tools-holder button,
.datatable-tools-holder .button {
    margin-left: 0;
}

.datatable-tools-holder .additional-buttons {
    display: inline-block;
    background: rgba(0, 0, 0, 0);
    z-index: 1000;
}
.datatable-tools-holder .additional-buttons .button,
.datatable-tools-holder .additional-buttons button {
    display: none;
}
.datatable-tools-holder .additional-buttons .button.button-menu {
    display: inline-block;
}
.datatable-tools-holder .additional-buttons .button.button-menu .icon-close {
    display: none;
}

.datatable-tools-holder .additional-buttons.open .button,
.datatable-tools-holder .additional-buttons.open button {
    display: inline-block;
}
.datatable-tools-holder .additional-buttons.open .button.button-menu .icon-menu {
    display: none;
}
.datatable-tools-holder .additional-buttons.open .button.button-menu .icon-close {
    display: inline-block;
}

.datatable .table-cell-m {
    width: 200px;
}
.table-row.pointer {
    cursor: pointer;
}
.table-row.pointer:hover .checkbox-wrapper {
    pointer-events: none;
}
.table-row.pointer:hover .checkbox-wrapper label::before {
    border-color: #9d73af;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16);
}

@media (max-width: 1024px) {
    .datatable .table-body .table-cell:first-child {
        padding: 15px 10px 10px 2px;
    }
}

@media (max-width: 1024px) {
    .table-cell.optional {
        display:none;
    }
    .table-cell.optional ~ .table-cell {
        padding-left: 3px;
    }
}

@media (min-width: 1440px) and (max-width: 1920px) {
    .table-cell.optional {
        display:none;
    }
    .table-cell.optional ~ .table-cell {
        padding-left: 3px;
    }
}

/* ------------------------------------------------------------ *\
    2. Typography
\* ------------------------------------------------------------ */

.tal, .text-align-left {
    text-align: left;
}
a {
    color: #468BAC;
}
a:hover {
    color: #9d73af;
}
#main-navigation > li > a {
    font-weight: normal;
}
#main-navigation > li.active > a {
    font-weight: bold;
}
#main-section .table-body p {
    color: #404952;
}
#main-section:after {
    content: '';
    clear: both;
    display: block;
}
.maximized #test-flag + #wrapper #main-section {
    padding-top:110px;
}
#wrapper.iframe #main-section {
    padding-top: 80px;
}
.maximized #wrapper.iframe #left-secion.open ~ #main-section {
    padding: 80px 0 0 260px;
}
.maximized #wrapper #main-section.fullwidth {
    padding-left: 0;
}
.maximized #wrapper #main-section > p {
    padding: 20px;
}
.maximized #main-section > .frame {
    position:relative;
    height:calc(100vh - 100px);
}
.maximized #main-section > .frame > iframe {
    border:none;
    background-color:#fff;
    margin:0;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.big-tag {
    background: #51a2c4;
    white-space: nowrap;
    color: white;
    padding: 6px 10px 4px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 125%;
    font-weight: bold;
}
.big-tag.pale {
    background-color: #9AD2DE;
}

.mb5 {
    margin-bottom: 5px !important;
}
.pt5 {
    padding-top: 5px !important;
}

/* ------------------------------------------------------------ *\
    3. Simple Customizations
\* ------------------------------------------------------------ */

.logo {
    background-image: url(/img/logo_arcplace.png);
    background-size: 120px;
}

.logo-holder, .logo {
    width: 120px;
}

.logo-holder {
    height: inherit;
}

.logo {
    height: 28px;
}

#top-section {
    background-color: #468BAC;
}
#main-navigation > li {
    background-color: #468BAC;
}
#main-navigation > li.user-info-holder > a:after {
    content: '';
    width: 1px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 20px;
    border-right: 1px solid white;
}
.user-info-holder > span > img {
    position: relative;
    display: inline-block;
    top: -2px;
    margin-right: 10px;
    vertical-align: middle;
}
#main-navigation > li.user-info-holder > a:hover:after {
    content: none;
}

#main-navigation > .too-many-items:hover > ul,
li.impersonation-holder > ul a {
    background-color: #51a2c4;
}
.too-many-items .add-to-sub:hover,
li.impersonation-holder > ul a:hover {
    background-color: #468bac;
}
.too-many-items .add-to-sub > a {
    white-space: nowrap;
    text-overflow: ellipsis;
}
li.impersonation-holder .chosen-container,
li.organisation-switch-holder .chosen-container {
    padding:10px;
}
li.impersonation-holder .chosen-single,
li.impersonation-holder .chosen-container-active.chosen-with-drop .chosen-single,
li.organisation-switch-holder .chosen-single,
li.organisation-switch-holder .chosen-container-active.chosen-with-drop .chosen-single {
    background-color: #468bac !important;
    color: #fff !important;
    border: none !important;
}
li.impersonation-holder:hover .chosen-single,
li.organisation-switch-holder:hover .chosen-single {
    background-color:#51a2c4 !important;
}
li.organisation-switch-holder .chosen-container-active.chosen-with-drop .chosen-single,
li.impersonation-holder .chosen-container-active.chosen-with-drop .chosen-single {
    background:none !important;
}

li.organisation-switch-holder .chosen-container-single .chosen-single div b,
li.impersonation-holder .chosen-container-single .chosen-single div b {
    background: url(/img/sprite/chosen-sprite.png) no-repeat 0 5px !important;
}
li.impersonation-holder .chosen-drop,
li.organisation-switch-holder .chosen-drop {
    box-shadow:none;
    border:none;
    left:0;
    background-color: #468bac !important;
    color: #fff !important;
}
li.impersonation-holder .chosen-drop .chosen-search,
li.organisation-switch-holder .chosen-drop .chosen-search {
    padding: 10px;
}
li.impersonation-holder .chosen-drop .chosen-search-input,
li.organisation-switch-holder .chosen-drop .chosen-search-input {
    border:none;
    background-color:rgba(255,255,255,0.75);
}
li.impersonation-holder .chosen-drop .active-result,
li.organisation-switch-holder .chosen-drop .active-result {
    color: #fff;
    padding: 8px 10px;
}
li.organisation-switch-holder .chosen-drop .active-result.highlighted,
li.impersonation-holder .chosen-drop .active-result.highlighted {
    background:#51a2c4 !important;
}
li.organisation-switch-holder .chosen-drop .chosen-results,
li.impersonation-holder .chosen-drop .chosen-results {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}
li.impersonation-holder .chosen-single > span,
li.organisation-switch-holder .chosen-single > span {
    max-width:100px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-body .table-row,
.table-body .table-row.small-row,
.table-body .table-row-medium {
    background-color: #fff;
    border-top: none;
}
.table-row > td {
    position: relative;
}
.table-body .table-row,
.table-body .table-row.small-row,
.table-body .table-row-medium {
    min-height: 74px;
}
.datatable-tools-holder {
    margin: 20px 20px 0 0;
    min-width: 160px;
}
table .datatable-tools-holder {
    margin: 0 20px 0 0;
    transform: translateY(-50%);
}
.datatable-tools-holder.small {
    min-width: 40px;
}
.datatable-tools-holder.extended {
    min-width: 600px;
}
#profile-picture {
    width: 165px;
    height: 165px;
}
.picture-upload-circle {
    border: 0;
}

#show-more-button-holder {
    text-align: left;
    padding: 0;
}
#show-more-button-holder .button-polite {
    padding: 0 3px;
}
#show-more-button-holder .more-indicator {
    display: none;
}

#tool-section {
    border-bottom-color:rgba(0,0,0,0.1);
}

.maximized #tool-section,
.customer-solution-view #tool-section .tool-section-tools {
    position: absolute;
    padding: 68px 10px 10px 0;
    margin: 0;
    right: 0;
    border-bottom: none;
}

.customer-solution-view #tool-section .tool-section-tools {
    padding-top: 5px;
    padding-bottom: 5px;
}

@media (min-width:1200px) {
    .customer-solution-view #tool-section .tool-section-tools {
        margin-top:-50px;
    }
}

.maximized #tool-section .tool-section-row {
    float: none;
    margin-right: 0;
    width: auto;
    height: auto;
}

.maximized #tool-section .tool-section-title-holder {
    display: none;
}

.maximized #tool-section .tool,
.customer-solution-view #tool-section .tool-section-tools .tool {
    margin-left: 5px;
}

.maximized #test-flag + #wrapper > #tool-section {
    padding-top: 117px;
}

#event-holder .event .event-mutation-padding {
    white-space: nowrap;
}

#event-holder .event .event-mutation-padding .color-grey {
    word-wrap: anywhere;
    white-space: normal;
    padding-right: 35px;
}

#event-holder .event .event-mutation-padding span {
    display: inline-block;
    vertical-align: top;
}

/* ------------------------------------------------------------ *\
4. Form Styles
\* ------------------------------------------------------------ */

form {
    display: inline-block;
    width: 100%;
}
form h2:first-child, h2.events:first-child, #main-section .main-form-holder h2:first-child {
    margin-top: 0;
}
form.label-less .form-label {
    display: none;
}
form.label-less .form-input:first-child {
    margin-left: 0;
}
.form-label label {
    color: #222;
    font-size: 16px;
    line-height: 20px;
}
.form-label label.segmentlabel {
    margin-top: 6px;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
    font-size: 16px;
    line-height: 18px;
    color: #181818;
}
input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
    top: -4px;
}
input[type="radio"] + label .icon,
input[type="checkbox"] + label .icon {
    top: 0;
}
#filter-section {
    z-index: 1250;
}
#filter-section input[type="radio"] + label .icon,
#filter-section input[type="checkbox"] + label .icon {
    top: 3px;
}
.checkbox-container {
    margin-bottom: 0;
}
.table-cell > .checkbox-wrapper {
    margin-top: 0;
}

input[type='text'], input[type='email'],
input[type='password'], input[type='date'],
input[type='url'], select, textarea,
input[type="radio"] + label:before,
input[type="checkbox"] + label:before,
input:focus ~ span.input-icon {
    border: 1px solid #d8d8d8;
    font-size: 16px;
}
.cke_focus,
input[type='text']:focus, input[type='email']:focus,
input[type='password']:focus, input[type='date']:focus,
input[type='url']:focus, select:focus, textarea:focus,
input[type="radio"] + label:hover:before,
input[type="checkbox"] + label:hover:before {
    border-color: #d8d8d8;
    -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16);
}
input[type="radio"]:focus + label:before,
input[type="checkbox"]:focus + label:before {
    border-color: #d8d8d8;
}

input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
    border-color: #9d73af;
}
input:focus ~ span.input-icon {
    color: #a3b1bf;
}

input[type='text'][disabled='disabled'],
input[type='email'][disabled='disabled'],
input[type='password'][disabled='disabled'],
input[type='url'][disabled='disabled'],
input[type='text'][disabled='disabled'] + span.input-icon,
input[type='radio'][disabled='disabled'] + label,
input[type='checkbox'][disabled='disabled'] + label,
textarea[disabled='disabled'] {
    opacity: 0.5 !important;
    cursor: default;
}

.chosen-container .chosen-drop,
.chosen-container-active .chosen-choices,
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices,
.chosen-container-active.chosen-with-drop .chosen-single {
    border-color: #d8d8d8 !important;
}
.chosen-container .chosen-drop {
    -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16);
}
.chosen-container-single .chosen-single span {
    font-size: 16px;
}
.chosen-container-multi.chosen-disabled .chosen-choices > li.search-choice > a.search-choice-close {
    display: none;
}
.chosen-container-multi.chosen-disabled .chosen-choices > li.search-choice {
    padding-right: 8px;
}

.switch input:checked ~ label {
    border-color: #B584C9;
}
.switch input:checked ~ label .switch-btn {
    background: #B584C9;
}

.file-upload.hover, .file-upload:hover {
    border-color: #B584C9;
}

.button-row.list-button-create {
    position: absolute;
    right: 200px;
    margin: 6px 0 0 0;
}

.list-button-row .pagination-holder {
    margin-top: 0;
}

@media (max-width: 1200px) {
    .list-button-row {
        padding-left: 30px;
    }
}

.input-size-max {
    width: 100%;
    max-width: 100%;
}

.tool-section-row .input-size-xs.date {
    max-width: 110px;
    cursor:pointer;
}

.form-button-row, .modal-button-row {
    border: none;
}

.form-button-row > div:last-child {
    padding-right: 0;
}

.incident-success-message {
    margin-bottom: 20px;
}

.star {
    margin-top: 5px;
}

.star input[type="radio"] + label {
    margin-right: 0;
    padding-right: 10px;
    margin-bottom: 0;
    padding-bottom: 10px;
}

.star input[type="radio"] + label:before {
    content: '\e80f';
    border-radius: 0;
    border: 0;
    font-family: "luna", sans-serif;
    background: transparent;
    font-size: 20px;
    line-height: 25px;
}

.star input[type="radio"]:checked + label,
.star input[type="radio"]:checked + label:hover,
.star input[type="radio"] + label:hover,
.star input[type="radio"] + label.hover {
    color: #FFCC36;
}

.star input[type="radio"]:checked + label:before,
.star input[type="radio"]:checked + label:hover:before,
.star input[type="radio"] + label:hover:before,
.star input[type="radio"] + label.hover:before {
    content: '\e810';
}

.star:hover input[type="radio"]:checked + label:before {
    content: '\e80f';
    color: #000;
}

.star:hover input[type="radio"]:checked + label:hover:before {
    color: #FFCC36;
    content: '\e810';
}

.star input[type="radio"] + label.hover:before,
.star input[type="radio"] + label:hover:before {
    color: #FFCC36 !important;
    content: '\e810' !important;
}

.star input[type="radio"] + label:hover:before,
.star input[type="radio"] + label.hover:before {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.rating {
    display: block;
    font-size: 18px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.rating-wrapper {
    display: inline-block;
    position: relative;
    height: 19px;
}

.rating-wrapper i:before {
    margin-right: 0.1em;
    margin-left: 0.1em;
}

.rating .stars-active {
    color: #FFCC36;
    position: relative;
    z-index: 10;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;

}

.rating .stars-inactive {
    color: grey;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-text-stroke: initial;
}

div.switch {
    user-select: none;
}

#bpoc_invoice_position ul .form-field {
    margin-bottom: 0;
}

/* ------------------------------------------------------------ *\
5. Layouts
\* ------------------------------------------------------------ */
#tool-section {
    background-color: #f6f8fa;
}
.tool-section-row {
    float: left;
    margin-right: 400px;
    width: 100%;
}
.aside-section-title {
    float: right;
    width: 400px;
}
.main-content {
    margin-right: 418px;
}
.aside-content {
    float: right;
    width: 400px;
}
.aside-content .event-logo {
    display: none;
}

.content > div {
    background-color: #fff;
    padding: 20px 0;
    margin-bottom: 15px;
    border: 1px solid rgba(0, 0, 0, 0.09);

    -webkit-transition: .25s;
    transition: .25s;

    -webkit-box-shadow: none;
    box-shadow: none;
}
.content > div.shy {
    background-color: transparent;
    border-color: transparent;
}
.content > div:hover {
    border-color: #fff;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12);
}
.content > div:hover.shy {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.content > div > div,
.content > div > form,
.content > div > h2,
.content > div > h3,
.content > div > h4,
.content > div > ul,
.content > div > p {
    padding: 0 20px;
    margin-bottom: 20px;
}
.content > div > form {
    margin-bottom: 0;
}
.content > div > h4 {
    margin-bottom: 5px;
}
.content > div > hr {
    margin-bottom: 20px;
    border-bottom-color: rgba(0, 0, 0, 0.09);
}
.content > div .user-info-holder {
    float: none !important;
}
.content > div .user-info-holder > a > img {
    margin-right: 0;
}

/* ------------------------------------------------------------ *\
6. Special Elements

- Progress Bar
- Dashboard
- Incident Wizard

\* ------------------------------------------------------------ */

.progress-wrapper {
    height: 14px;
    margin: 0 20px 10px;
    padding: 0 !important;
    position: relative;
}
.progress:before,
.progress:after {
    content: '';
    display: inline-block;
    border-radius: 8px;
}
.progress:before {
    width: 100%;
    height: 14px;
    border: 1px solid #cecece;
}
.progress:after {
    width: calc(100% - 4px);
    height: 10px;
    position: absolute;
    top: 3px;
    left: 3px;
    background: #9d73af;
}
.progress.status-1:after {
    width: calc(33% - 4px);
}
.progress.status-2:after {
    width: calc(66% - 4px);
}
.progress.status-3:after {
    width: calc(100% - 4px);
}
ul.ticket-documents {
    margin-bottom: 0 !important;
}
ul.ticket-documents li.document {
    display: inline-block;
    width: 49%;
}
ul.ticket-documents li.document .icon-custom-attachment,
ul.ticket-documents li.document .file-name {
    display: inline-block;
    font-size: 16px;
    line-height: 18px;
    font-weight: 300;
    color: #468BAC;
    margin-bottom: 5px;
}
ul.ticket-documents li.document .meta-information {
    font-size: 12px;
    line-height: 13px;
    color: #8A9399;
}

.dashboard,
.dashboard-feedback {
    margin-right: 0;
}

#main-section .main-content.content.dashboard {
    max-width:1650px;
}

#main-section .main-content.content.dashboard .item {
    padding: 15px 0 15px 0;
}

#main-section .main-content.content.dashboard .item h4 {
    padding:5px 0;
}

#main-section .main-content.content.dashboard .item h4::before {
    margin-left: 0;
}

#main-section .main-content.content.dashboard .item:first-child {
    padding-top: 0;
}

#main-section .main-content.content.dashboard .item p {
    margin: 0;
}

#main-section .main-content.content.dashboard .item .small {
    font-size: 88%;
    line-height: 175%;
}

.dashboard .dashboard-widget,
.dashboard-feedback .dashboard-widget {
    float:left;
    width:calc(50% - 10px);
    margin-right:10px;
}
.dashboard .dashboard-widget h2 {
    padding:0;
    margin:0 20px;
}

.main-content.dashboard-feedback-fullwidth  {
    margin-right: 0;
}
.dashboard .feedback-widget,
.dashboard-feedback .feedback-widget {
    width: calc(100% - 10px);
    background: transparent;
    border: none;
}
#main-section .dashboard-feedback .feedback-widget h3 {
    padding-left: 0;
}
#main-section .dashboard-widget:hover {
    box-shadow: none;
    border-color:rgba(0,0,0,0.09);
}
.dashboard-feedback .feedback-widget .widget-content {
    padding-left: 0;
    padding-right: 0;
    background: #fff;
}
.dashboard .dashboard-widget .widget-content,
.dashboard-feedback .dashboard-widget .widget-content {
    margin-bottom: 0;
}
.dashboard .dashboard-widget .widget-content .button-row {
    margin-top: 20px;
    height: auto;
}
.dashboard .dashboard-widget .widget-content .table-body .table-row,
.dashboard-feedback .dashboard-widget .widget-content .table-body .table-row {
    height: auto;
}
.dashboard .dashboard-widget .widget-content .datatable-tools-holder {
    margin-top: 10px;
}
.dashboard .dashboard-widget .table-head .table-row {
    background-color:#fff;
    border-bottom:solid 1px rgba(0, 0, 0, 0.09);
}
.dashboard .dashboard-widget .table-head .table-cell {
    vertical-align:bottom;
}
.dashboard .dashboard-widget .table-head .table-row a,
.dashboard .dashboard-widget .table-head .table-row p {
    color:#000;
    font-weight:bold;
}
.dashboard .dashboard-widget.documents .table-cell:first-child {
    width:33%;
}
@media (max-width: 1440px){
    .dashboard .dashboard-widget {
        width: 100%;
    }
}
@media (max-width: 1280px) {
    .dashboard-feedback .dashboard-widget {
        width: 100%;
    }
    .dashboard-feedback .table-wrap .datatable {
        min-width: 0 !important;
    }
}

.form-button-row.document-transfer-hint {
    margin-top: 0;
    padding-top: 0;
}

#questionnaire_sheet_form .form-label {
    margin-top:25px;
    padding:15px 15px 0 0;
}

#questionnaire_sheet_form .form-label label {
    text-align:left;
}

#questionnaire_sheet_form .form-compound:first-child .form-label {
    margin-top: 0;
}

#questionnaire_sheet_form .form-field {
    margin:0;
    padding:0;
}

#questionnaire_sheet_form .repeated-question label {
    display:none;
}

#questionnaire_sheet_form .form-field > div,
#archive_destruct_comment {
    display:block;
    float:none !important;
    width:auto;
    text-align:left;
}

#questionnaire_sheet_form .form-label label {
    margin-top:0;
    margin-bottom:5px;
}

#questionnaire_sheet_form .input-size-max {
    padding:15px 0;
}

#questionnaire_sheet_form .input-size-max textarea {
    min-width:100%;
    max-width:100%;
}

#questionnaire_sheet_form .repeated-question .input-size-max {
    padding-top:5px;
}

#questionnaire_sheet_form .repeated-question .form-label {
    margin:0;
    padding:0;
}

#questionnaire_sheet_form .star {
    position:static;
    float:none;
    display:block;
    margin:0;
    padding:0;
}

#questionnaire_sheet_form .form-button-row > div {
    margin-left: 1px;
}

#questionnaire_sheet_form textarea {
    border-radius:2px;
}

#questionnaire_sheet_form .form-error {
    margin-left: 0;
    margin-top: 7px;
}

#questionnaire_sheet_form .question > .form-compound {
    padding-bottom: 30px;
}

#questionnaire_sheet_form .repeated-question > .form-compound {
    transform:translateY(-15px);
}

#questionnaire_sheet_form .question .input-size-max {
    padding-bottom: 5px;
}

#questionnaire_sheet_form .spacer {
    padding: 15px 0 30px 0;
}

#main-section .main-content.feedback hr {
    margin:15px 0;
}

#main-section .main-content.feedback p {
    margin-top:5px;
}

#main-section .main-content.feedback i {
    color:rgba(0,0,0,0.5);
}

#main-section .main-content.feedback .rating .rating-wrapper {
    transform:scale(0.75, 0.75) translate(0px, 3px);
    transform-origin:0 100%;
}

/* subnavigation */

.side-navigation > li {
    padding-left: 0;
}
.side-navigation > li > a {
    padding-left: 20px;
}

#side-nav-wrapper li > ul {
    margin-left:0;
}

#side-nav-wrapper .side-navigation > li li.active,
#side-nav-wrapper .side-navigation > li li:hover {
    background-color: #468bac;
}
.side-navigation > li > a p:first-child,
.side-navigation > li > a p:nth-child(2),
.side-navigation > li > a p:last-child {
    font-size: 14px;
    color: #181818;
}
.side-navigation > li.active > a p:first-child,
.side-navigation > li.active > a p:nth-child(2),
.side-navigation > li.active > a p:last-child {
    color: #fff;
}
.side-navigation > li.active > a {
    font-weight: bold;
}

/* form */
.main-form-holder {
    width: 100%;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.09);
    margin-bottom: 40px;
    padding-top: 30px;
    padding-left: 30px;
}

.main-form-holder > * {
    max-width: 960px;
}

#main-section .main-form-holder.full-width {
    padding-right: 30px;
}

#main-section .main-form-holder.full-width > * {
    max-width: none;
}

.main-form-holder.feedback-details,
.main-form-holder.reports {
    padding-left: 40px;
}

.main-form-holder.feedback-details.readonly input,
.main-form-holder.feedback-details.readonly textarea {
    border: none;
    padding: 0;
    font-size: 16px;
    line-height: 20px;
    height: auto;
}

.main-form-holder.feedback-details.readonly input,
.main-form-holder.feedback-details.readonly textarea,
.main-form-holder.feedback-details.readonly .star {
    pointer-events: none;
}

.main-form-holder.feedback-details.readonly .required::after {
    display: none;
}

.main-form-holder.feedback-details .chosen-container {
    margin-top: 10px;
    margin-bottom: 15px;
}

.main-form-holder.feedback-details .form-error,
.main-form-holder.feedback-details .chosen-container,
.main-form-holder.feedback-details .yesno-answer {
    margin-left: 15px;
}

.main-form-holder.feedback-details .yesno-answer {
    margin-bottom: 20px;
}

.button-cancel:hover {
    color: #222 !important;
    text-decoration: underline;
    background-color: transparent !important;
}

.form-button-row {
    border-top: 1px solid rgba(0,0,0,0.09);
}

/* wizard */
.incident-wizard .main-form-holder {
    padding-left: 40px;
}
.incident-wizard h2:first-of-type {
    padding-top: 0;
    margin-top: 0;
}

/* datepicker */
.pika-single {
    background-color: #fff;
}
.pika-button, .pika-prev, .pika-next {
    background-color: #fff !important;
}
.pika-prev:after,
.pika-prev:hover:after,
.pika-next:after,
.pika-next:hover:after,
.pika-button:after,
.pika-button:hover:after {
    content: none;
}
.pika-goto-today {
    margin-top: 10px !important;
    width: 100% !important;
}


/* Luna overrides */
#bottom-section {
    position: absolute;
    padding: 20px 20px 20px 320px;
}

#left-section, #tool-section, #main-section, #bottom-section {
    -webkit-transition: .0s;
    transition: .0s;
}

#left-section {
    border-right-color: rgba(0, 0, 0, 0.09);
}

.log-icon-holder {
    margin-top:1px;
}

.log-entry > h3 {
    margin:10px 0;
}

.log-entry > ul {
    margin:0 0 20px 10px;
}

/* Additional tools for "tool-section" */

#tool-section .tool {
    float:right;
    margin-left:20px;
    white-space:nowrap;
}

#tool-section .tool > p,
#tool-section .tool > input {
    float: left;
    position: relative;
}

#tool-section .tool > p {
    font-size: 13px;
    line-height: 40px;
    color: #222222;
}

#tool-section .tool.filter-margin {
    margin-right: 36px;
}

/* Reporting */

a.noref, a.noref:hover {
    text-decoration:none;
    cursor:default;
}

#main-section ul.segments {
    margin-top:30px;
}

#main-section ul.segments .segment {
    position: relative;
    padding: 30px 0;
    margin: 0 0 0 0;
    border-bottom: solid 1px rgba(0,0,0,0.09);
}

#main-section .segment.header,
.segmentlabel {
    font-size: 14px !important;
    font-weight: normal !important;
}

#main-section ul.segments .segment:first-child {
    border-top: solid 1px rgba(0,0,0,0.09);
}

#main-section ul.segments .segment:hover {
    background-color:rgba(255,255,255,0.5);
}

#main-section ul.segments .segment .remove {
    position: absolute;
    display: block;
    top: 40px;
    right: 0;
    cursor: pointer;
}

#main-section ul.segments .segment .remove:hover {
    background-color: #a3c5d5;
    color: #fff;
}

#main-section ul.segments .add-segment {
    margin-bottom: 0;
}

#main-section ul.segments .add-segment a {
    cursor:pointer;
    display:inline-block;
    padding: 30px 0 10px 0;
}

.sla-info {
    margin-bottom: 20px;
}

#main-section .reports .table-row {
    height: auto;
}

#main-section .reports .table-body .table-cell:first-of-type {
    padding-right:30px;
}

#main-section .reports .table-row.locked p {
    opacity:0.5;
}

#main-section .reports .table-row.highlight .table-cell {
    background-color:rgba(0,0,0,0.03);
}

#wrapper.reports #main-section .reports .table-body .table-cell.branch-1 {
    padding-left:35px;
}

#wrapper.reports #main-section .reports .table-body .table-cell.branch-2 {
    padding-left:60px;
}

#wrapper.reports #main-section .reports .table-body .table-cell.branch-3 {
    padding-left:85px;
}

#main-section .reports .datatable-tools-holder {
    min-width: 350px;
}

#main-section .reports.list .datatable-tools-holder {
    top: 50%;
    margin: 2px 0;
}

#main-section .reports.overview .table-cell > p {
    display: inline-block;
}

#main-section .reports .table-cell.reports-column {
    width:17%;
}

#main-section .reports fieldset {
    padding:10px;
    margin-top:25px;
    margin-bottom:10px;
    border:0;
    position:relative;
    overflow:visible;
}

#main-section .reports fieldset legend {
    color:rgba(0,0,0,0.5);
    padding:0 0;
    position:absolute;
    left:0;
    top:-20px;
}

#main-section .reports .form-field {
    white-space: nowrap;
}

#main-section .reports fieldset .form-field:last-of-type {
    margin-bottom:0;
}

#main-section .reports .table-cell > .progress-wrapper {
    display: inline-block;
    position: relative;
    width: 100px;
    margin: 0 10px;
    border: solid 1px #ccc;
    border-radius: 4px;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

#main-section .reports .table-cell > .progress-wrapper > .progressbar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    max-width:100% !important;
    background: #9d73af;
    border:solid 1px #fff;
    border-radius: 3px;
}

#main-section .reports .status-indicator {
    display:inline-block;
    width:16px;
    height:16px;
    border-radius:100%;
    border:solid 1px #fff;
}

#main-section .reports .status-indicator.OK {
    background-color: #6ab04c;
}

#main-section .reports .status-indicator.NOK {
    background-color: #eb4d4b;
}

#main-section .reports .status-indicator.SKIP {
    background-color: #dff9fb;
}

.form-input .comment {
    display: block;
    padding: 11px 0 0 3px;
    color:rgba(0,0,0,0.3);
}

.form-input .comment.error {
    color:rgba(255,0,0,0.5);
}

@media only screen and (max-width:1200px) {
    #main-section .reports .table-cell.branch-1 {
        padding-left:15px;
    }

    #main-section .reports .table-cell.branch-2 {
        padding-left:30px;
    }

    #main-section .reports .table-cell.branch-3 {
        padding-left:45px;
    }
}
#main-section .table-body [class^="icon-bullet"]:before {
    font-size: 28px;
    position: relative;
    left: -15px;
    top: 5px;
}
.no-results {
    padding: 15px;
    margin-top: 10px;
    background: white;
}
#test-flag>p{
    text-align: center;
    font-weight: bold;
}
.quote {
    color: #888 !important;
    padding: 18px 0;
}
.quote:before {
    content:"«";
    display:inline;
}
.quote:after {
    content:"»";
    display:inline;
}
.invisible {
    visibility:hidden;
}

/* custom for deny-list module (date widget) */
.deny-list-date-holder {
    width: 200px;
}
#deny_list_dates_chosen, .deny-list-date-holder label {
    display: inline-block;
}
#deny_list_dates_chosen {
    width: 120px !important;
}
.alias .form-field td:last-child {
    width:32px;
    text-align:center;
    padding:0
}
.alias .form-field:first-child td:last-child {
    width:0;
}
.alias .form-field:first-child a.remove {
    display: none;
}
.deny-list-date-holder label {
    translate: 0 5px;
    font-size: 13px;
    padding-right: 5px;
}
.datatable tr.table-row.new {
    background-color: #d9f0d4;
}
.datatable tr.table-row.updated {
    background-color: #fff7d6;
}
.datatable tr.table-row.deleted {
    background-color: #ffd6d6;
}

.mutations > div > div > table {
    margin-top:15px;
    width: 100%;
    border-top: solid 1px rgba(0,0,0,0.125);
    font-size: 88%;
}

.mutations > div > div > table > tbody > tr {
    border-bottom: solid 1px rgba(0,0,0,0.125);
}

.mutations table table td {
    padding-right: 10px;
}

.mutations > div > div > table > tbody > tr > td {
    padding: 10px 0;
}

.mutations td .old {
    background-color:rgba(255,0,0,0.1);
}

.mutations td .new {
    background-color:rgba(0,255,0,0.1);
}
.mutations table, .mutations table td, .mutations table tr {
    border-collapse: collapse;
    border-spacing: 0;
}

.mutations table td {
    vertical-align: top;
}

.mutations td.path {
    min-width: 130px;
}

.mutations td .user {
    display: block;
    font-size: 88%;
}

@media (min-width: 1200px) {
    .deny-list-date-holder {
        position: absolute;
        right: 200px;
        top: 55px;
    }
}
@media (max-width: 1129px) {
    .deny-list-date-holder {
        margin-right: 50px;
    }
}