.top-bar .company-logo {
    height: 20px;
}

.inbox .top-menu {
    padding-left: 5px;
    border-left: none;
}

.inbox .dataTables_length, .inbox .dataTables_length > label {
    float: none;
    margin-bottom: 10px;
}

.inbox table.message-table tr.highlighted {
    background-color: #FFFCCF;
}

table.message-table tr.unread {
    background-color: #FFF;
}

.inbox .bottom {
    border: none;
}

.single-message-item {
    border-left: none;
    padding: 10px 0 0;
}

.top-bar .user-icon {
    height: 26px;
    width: 26px;
    background-color: #FFFFFF;
}

.widget.hanse-edit-header .widget-header, .widget.hanse-edit-header .widget-header-toolbar {
    height: 45px;
}

.widget.hanse-edit-header .widget-header-toolbar .btn {
    height: 35px;
    color: #FFF;
}

.hanse-field-container {

}

.hanse-text-area {
    width: 400px;
    height: 250px !important;
    overflow-y: auto;
}

.hanse-text-area br {
    line-height: 1.5em;
}

/* A name that was mentioned with an "@", in read mode. */
.hanse-mention {
    background-color: #e8f0fe;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: bold;
    white-space: nowrap;
}

/* The "@" picker. Appended to the body, so that the scrollable text area cannot clip it - which means it
   has to sit above the Bootstrap modal (z-index 1050) it is usually opened in. */
.hanse-mention-dropdown {
    position: absolute;
    z-index: 1060;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    min-width: 200px;
}

.hanse-mention-dropdown > li.active > a {
    background-color: #f5f5f5;
    color: #262626;
}

/* The highlight while editing.

   A text area can only render its own plain value, so the mention cannot be marked up inside it. Instead a
   backdrop sits exactly behind the field showing the same text with the mentions highlighted, and the text
   area on top is transparent so the colour shows through behind its real text. The backdrop carries the text
   area's own classes, so font, padding and border match by construction rather than by copying computed
   styles - which also means the few properties below have to be overridden deliberately.

   A block, not an inline-block: the text area inside is width:100%, which needs a parent with a definite
   width, and a shrink-to-fit wrapper would collapse the field. */
.hanse-mention-field {
    position: relative;
    display: block;
}

/* Inside the backdrop the highlighted text has to be metrically identical to the text the user actually sees
   in the text area, otherwise the coloured box does not line up with the name and everything after it
   drifts. So the three properties that make the read mode chip look like a chip - bold, padding and nowrap -
   are switched off here and only the background colour is kept. */
.hanse-mention-field > .hanse-mention-backdrop .hanse-mention {
    white-space: inherit;
    font-weight: inherit;
    padding: 0;
    border-radius: 0;
}

/* Scoped through the wrapper on purpose: because the backdrop carries the text area's classes it also
   inherits their position and height, so these overrides need to outrank a plain single class selector. */
.hanse-mention-field > .hanse-mention-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    color: transparent;
    background-color: #fff;
    overflow: hidden;
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-shadow: none;
}

.hanse-mention-field > textarea {
    position: relative;
    background-color: transparent;
}

/* Hidden copy of the text area, used only to measure where the caret is. */
.hanse-mention-mirror {
    position: absolute;
    visibility: hidden;
    left: -9999px;
    top: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.hanse-max-field-length {
    max-width: 400px;
}

.hanse-dialog-footer {
    font-size: 11px;
    margin-top: 25px;
}

.hanse-table tr {
    cursor: pointer;
}

.hanse-table td ul {
    padding-left: 5px;
}

td.hanse-table-number-column {
    text-align: right;
}

td.hanse-table-column-5 {
    width: 5%;
}

td.hanse-table-column-10 {
    width: 10%;
}

td.hanse-table-column-20 {
    width: 20%;
}

.hanse-field-container .tab-content {
    border-bottom: 1px solid #ddd;
}

.hanse-dialog-tabs {
    margin-bottom: 15px;
    cursor: pointer;
}

.hanse-thumbnail-image {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.btn.btn-sm.btn-primary.input-group-addon.hanse-upload-button {
    color: #FFFFFF;
}

.hanse-simple-button-container {
    text-align: right;
    padding-bottom: 15px;
}

.hanse-widget-footer-toolbar {
    text-align: right;
}

/* accordeon overrides for use in widgets */
.widget-content .panel-group .panel .panel-title > a {
    padding: 5px 0;
}

.hanse-accordeon-title {
    padding-top: 5px;
}

.hanse-accordeon-buttongroup {
    text-align: right;
}

/* customized multi select field*/
.hanse-field-container .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
    box-shadow: none;
    background-color: #909090;
    filter: none;
    background-image: none;
    color: #fff;
    border: 1px solid #26669e;
    font-size: 85%;
}

.hanse-italic {
    font-style: italic;
}

/* dealer list */
.hanse-filter-brand-item {
    padding-right: 20px;
}

.hanse-dealer-list-name-column {
    width: 350px;
}

.hanse-dealer-list-popover-column {
    width: 25px;
    text-align: center;
    vertical-align: middle;
}

.hanse-dealer-list-popover-content {
    min-width: 200px;
}

/* customer list */
.hanse-customer-list-name-column {
    width: 350px;
}

.hanse-customer-list-address-column {
    width: 200px;
}

.hanse-customer-list-dealer-column {
    width: 200px;
}

.hanse-customer-list-source-column {
    width: 200px;
}

/*events list*/
.hanse-boatshow-list-category-column {
    width: 10%;
}

.hanse-boatshow-list-dealers-column {
    width: 40%;
}

/** boat relevant documents */
.knowledge .boat-relevant-document a {
    color: #428bca;
    display: inline-block;
    padding-left: 0px;
}

/*documents*/
.hanse-dark-td {
    background-color: #909090;
    color: #fff;
}

/** accessory */
.hanse-accessory-list-brand-column {
    width: 15%
}

.hanse-accessory-list-xnumber-column,
.hanse-accessory-list-onlyAvailableInPackage-column {
    width: 10%;
}

/** customer requests  */
.hanse-customerRequest-list-status-column,
.hanse-customerRequest-list-country-column {
    width: 8%;
}

.hanse-customerRequest-list-creationDate-column,
.hanse-customerRequest-list-model-column {
    width: 10%;
}

.thumbnail img.list-group-image.hanse-document-thumbnail {
    height: 150px;
    width: auto;
}

.document-download-select {
    width: 100%;
    height: 22px;
    /*necessary for safari*/
    -webkit-appearance: menulist-button;
}

.document-download {
    padding-top: 5px;
}

/*Messages (Mails)*/
.hanse-selected-recipients-container {
    max-height: 250px;
    overflow-y: auto;
    margin-right: 20px;
}

.hanse-selected-recipient {
    padding: 4px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.hanse-cursor-pointer {
    cursor: pointer;
}

/* After sales request */
.hanse-after-sales-status-column {
    width: 75px;
}

/*dashboard*/
.hanse-icon-list-item {
    text-align: center;
    /* seven icons evenly over whole page */
    width: calc(100% / 7);
    float: left;
    position: relative;
}

.hanse-icon-list-item > a {
    color: #555555;
}

.hanse-icon-list-count {
    position: absolute;
    top: -4px;
    left: 54%;
    padding: 0px 5px;
}

.hanse-dashboard-table-height {
    max-height: 350px;
    overflow-y: scroll;
}

.passwordlost-box {
    width: 100%;
    border: 1px solid #dddddd;
    padding: 25px;
    text-align: left;
    background-color: #f1f1f1;
}

/*warranty table anchor (link) in table row*/
.warranty-link {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 60px;
}

.warranty-link-container {
    position: absolute;
    display: block;
    width: 95%;
    height: auto;
    left: 30px;
}

.warranty-row {
    position: relative;
}

.select-field-add-btn {
    padding: 4px 10px;
    position: absolute;
}

.select-field-add-btn i {
    margin: 0;
}

@media screen and (min-width: 768px) {
    .passwordlost-box {
        width: 70%;
    }
}

@media screen and (min-width: 992px) {
    .passwordlost-box {
        width: 50%;
    }
}

@media print {
    .widget-header, /*.btn-group,*/
    .select2-container.select2-container-disabled .select2-choice .select2-arrow,
    .fancy-checkbox input[type="checkbox"]:not (:checked ) + span {
        display: none;
    }

    .select2-container.select2-container-disabled .select2-choice {
        border: none;
        width: 150%;
    }

    .control-label {
        white-space: nowrap;
    }
}

.custom-label-padding {
    padding-top: 0.75rem;
}

/** pricelist */
.hanse-pricelist-onlypackage-column, .hanse-pricelist-standard-column,
.hanse-pricelist-xnumber-column {
    width: 10%;
}

/** customize features of an offer */
.configure-offer-table {
    width: 80%;
}

.configure-offer-table-item-title {
    width: 20%;
}

.configure-offer-table-item-check {
    width: 1%;
}

.configure-offer-table-item-original-price {
    width: 20%;
    text-align: right;
    padding-right: 50px !important;
}

.configure-offer-table-item-discount {
    width: 15%;
}

.configure-offer-table-item-discount
input {
    width: 78%;
    display: inline;
}

.configure-offer-table-item-sum {
    width: 14%;
    text-align: right;
}

.configure-offer-table {
    margin: 10px 0;
}

.configure-offer-table input {
    text-align: right;
}

.configure-offer-feature-name {
    background-color: #B0C6E1;
    color: #FFFFFF;
    border: 1px black solid;
}

.configure-offer-feature-name td {
    padding: 5px 10px;
}

.configure-offer-feature-level-one {
    background-color: #CFDEF1;
}

.configure-offer-feature-level-one td {
    padding: 0px 10px;
}

.configure-offer-feature-level-two {
    background-color: #DFE9F5;
    border: 2px solid #F9F9F9;
}

.configure-offer-feature-level-two td {
    padding: 1px 10px;
}

.configure-offer-sum-with-discount {
    background-color: #BFF0B7;
    font-weight: bold;
}

.configure-offer-sum-with-discount div {
    padding: 15px 10px;
}

.configure-offer-sum-without-discount {
    background-color: #D2F6CC;
    font-weight: bold;
}

.configure-offer-sum-without-discount div {
    padding: 15px 10px;
}

.configure-offer-sum-total-discount {
    background-color: #E2FAE0;
    font-weight: bold;
}

.configure-offer-sum-total-discount .table-cell__input {
    padding: 0 10px 0 0;
}

.configure-offer-sum-total-discount input {
    display: inline;
    width: 55%;
}

.configure-offer-sum-total-discount span {
    display: inline;
}

.configure-offer-sum-total-discount div {
    padding: 15px 10px;
}

.configure-offer-sticky {
    display: inline-block;
    position: fixed;
    z-index: 1200;
    background-color: white;
    right: 0px;
    top: 300px;
    width: 175px;
    box-shadow: 1px 1px 16px grey;
}

.configure-offer-sticky__headline {
    background-color: #F4F4F4;
    padding: 10px;
}

.configure-offer-sticky__body {
    padding: 10px;
    /* 	background-color: #F7F7F7; */
}

/* Adjustment of bootstrap alerts */
.alert--short {
    width: 80%;
}

.hanse-list-userloginattempt-firstname,
.hanse-list-userloginattempt-lastname,
.hanse-list-userloginattempt-logindate,
.hanse-list-userloginattempt-success {
    width: 15%;
}

.hanse-offer-for-saleslead-list-id-column {
    widtH: 7%;
}

.hanse-offer-for-saleslead-list-parentOfferId-column {
    width: 10%;
}

.hanse-offer-for-saleslead-list-status-column,
.hanse-offer-for-saleslead-list-dates-column,
.hanse-offer-for-saleslead-list-prices-column {
    width: 15%;
}

.hanse-offer-for-saleslead-list-prices-column {
    text-align: right;
}

.hanse-list-saleslead-reminddate, .hanse-list-saleslead-deliverydate {
    width: 15%;
}

.hanse-list-saleslead-boat {
    width: 20%;
}

.hanse-boat-layout-image-container {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    margin: 15px 50px;
}

.hanse-boat-layout-image {
    height: 230px;
}

.hanse-no-margin {
    margin: 0;
}

#magazine_entry_allocation_key {
    margin-bottom: 5%;
}

.magazine-entry-allocation-key-table {
    width: 100%;
}

.magazine-entry-allocation-key-table tr.dealing-company-row {
    border-bottom: #dddddd solid 1px;
}

.magazine-entry-allocation-key-table .dealing-company-percentage-row {
    padding-top: 32px;
}

.magazine-entry-allocation-key-table thead tr {
    border-bottom: #aaaaaa solid 2px;
}

.magazine-entry-allocation-key-table thead th {
    text-align: center;
}

.magazine-entry-allocation-key-table .money-column {
    text-align: right;
}

.magazine-entry-allocation-key-table .money-column-euro span {
    margin-left: 4px;
}

.magazine-entry-allocation-key-table td, .magazine-entry-allocation-key-table th {
    padding: 10px 0;
}

.magazine-entry-allocation-key-table td input.inline-input {
    width: 80%;
    display: inline-block;
}

.magazine-entry-allocation-key-table-item-amounteuro {
    width: 5%;
    text-align: right;
}

td.magazine-entry-allocation-key-table-button-column {
    padding: 10px 1px;
}

td.magazine-entry-allocation-key-table-button-column button {
    width: 90%;
}

.error {
    color: #db3833;
    font-size: 0.9em;
    margin-top: 3px;
}

.hanse-modal-dialog {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.hanse-modal-dialog-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.hanse-modal-dialog-close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.hanse-modal-dialog-close-button:hover,
.hanse-modal-dialog-close-button:focus{
    color: black;
    text-decoration: none;
    cursor:pointer;
}

.brand-specification-template-table {
    width: 100%;
}

.brand-specification-template-table td, .brand-specification-template-table th {
    height: 35px;
    padding: 10px 0;
}

.brand-specification-template-table .category-title-column {
    text-align: center;
    background-color:#C1D0E3;
    /*border: 1px solid grey;*/
    font-size: 14px;
    vertical-align: middle;
}

.brand-specification-template-table .order-column {
    text-align: center;
}

.brand-specification-template-table .unit-column {
    padding-left: 10px;
}

.align-right {
    text-align: right;
}

.align-top {
    vertical-align: top;
}

.hanse-languages {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 0 3px 0;
}

#safety-cloud-iframe {
    width: 100%;
    height: 90vh;
}

ul.mfa {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.my-1 {
    margin-top: 1ch;
    margin-bottom: 1ch;
}

.disabledbutton {
    pointer-events: none;
    cursor: not-allowed;
    background-color: #eee;
    opacity: 0.3;
}

/*
 * Image previews of a document collection field (@DialogField(imagePreview = true)).
 *
 * The grid takes as many columns as the available width allows, at least 170px each, and the columns
 * share the remaining space evenly. The preview block deliberately sits outside
 * .hanse-max-field-length: that 400px cap is meant for text inputs and would pin the grid to two
 * columns no matter how wide the dialog is.
 */
.hanse-attachment-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
  max-width: 1100px;
}

.hanse-attachment-preview {
  position: relative;
}

.hanse-attachment-preview-image {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  background-color: #fafafa;
}

.hanse-attachment-preview-actions {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 1px 4px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.85);
  visibility: hidden;
}

.hanse-attachment-preview:hover .hanse-attachment-preview-actions,
.hanse-attachment-preview:focus-within .hanse-attachment-preview-actions {
  visibility: visible;
}

.hanse-attachment-preview-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

/*
 * Full size preview modal.
 *
 * Bootstrap's .modal-lg is a fixed 900px, which wastes most of a wide screen for an image viewer, so
 * the dialog is sized relative to the viewport instead and only capped on very wide monitors.
 */
.hanse-image-preview-modal .modal-dialog {
  width: 75vw;
  max-width: 1400px;
}

.hanse-image-preview-body {
  text-align: center;
}

.hanse-image-preview-image {
  /* max-height keeps a portrait image inside the viewport instead of stretching the modal past it */
  max-width: 100%;
  max-height: 75vh;
  height: auto;
}

/* thumbnail in the attachment selection of the share dialog */
.hanse-share-attachment-thumbnail {
  width: 48px;
  height: 48px;
  object-fit: cover;
  margin: 0 4px;
  border: 1px solid #ddd;
  border-radius: 3px;
  vertical-align: middle;
}