/* ============================================================================
   05-sale.css — part 5 of 9 of the former main.css
   Shared record UI (pills, key-value and striped tables, cards) plus the sale
   flow: stepper, housing association, overview, offers.

   NOT a sale-only file, despite the name. Measured: of 190 rules, 95 cannot be
   confined to any single area and only 32 are sale-specific. It is referenced by
   395 templates across 14 areas, so it has to stay on the global path.

   LOAD ORDER MATTERS. These files are linked in numeric order from
   shared_elements/main/main.html. They were split by position and never
   reordered, so the cascade is byte-for-byte what the single file produced.
   Moving a rule between them can change which declaration wins.
   ============================================================================ */
/*
 _____       _      _   _           _
/  ___|     | |    | | | |         | |
\ `--.  __ _| | ___| |_| |_   _  __| |
 `--. \/ _` | |/ _ \  _  | | | |/ _` |
/\__/ / (_| | |  __/ | | | |_| | (_| |
\____/ \__,_|_|\___\_| |_/\__,_|\__,_|
*/

.stepper-wrapper
{
    margin: 0 0 1rem 0;
    padding: 1.5rem 0;
}

.stepper-wrapper .step
{
    padding: 0;
    margin: 0;
    flex-flow: wrap;
}

.stepper-wrapper .step-item a
{
    text-decoration: none;
    color: var(--ks-grey);
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    line-height: 21px;
    font-size: 16px;
    margin-right: 0.5rem;
}

.stepper-wrapper .step-item-divider {
    margin-right: 0.5rem;
}

.stepper-wrapper .step-item a:hover,
.stepper-wrapper .step-item:hover + svg
{
    color:var(--ks-black);
    text-decoration: underline;
}

.stepper-wrapper .step-item + .fa-chevron-right
{
    color: var(--ks-grey);
}

.stepper-wrapper .step-item.completed a
{
    color: var(--ks-black-2);
}

.stepper-wrapper .step-item.completed + .fa-chevron-right
{
    color: var(--ks-black-2);
}

.stepper-wrapper .step-item.active a
{
    color: var(--eC-primary);
    text-shadow: 0px 0px 10px rgba(var(--eC-primary-rgb), 0.3) !important;
}

.stepper-wrapper .step-item.active + .fa-chevron-right
{
    color: var(--eC-primary);
}

.question-accordion-item > h2
{
    font-size: 24px;
    font-weight: 300;
    line-height: 28px;
    color: var(--ks-black);
    font-family: 'Work Sans';
}

.question-accordion-item > h2.collapsed::before
{
    content:"+";
    width: 5%;
}

.question-accordion-item > h2::before
{
    content:"-";
    width: 5%;
}

@media only screen and (max-width: 945px)
{
    .question-accordion-item > h2.collapsed::before
    {
        margin-right: 0.7rem;
    }
    .question-accordion-item > h2::before
    {
        margin-right: 0.7rem;
    }
}

@media only screen and (min-width: 946px)
{
    .question-accordion-item > h2.collapsed::before
    {
        margin-right: 0rem;
    }
    .question-accordion-item > h2::before
    {
        margin-right: 0rem;
    }
}

#financing-tab-display .financing-bubble {
    border-radius: 100%;
    background-color: var(--ks-white);
    border: 3px solid var(--ks-grey);
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    padding: 1.5rem;
    font-size: 16px;
    line-height: 19px;
    color: var(--ks-grey);
}

#financing-tab-display .financing-bubble-container {
    border: none;
    background-color: transparent;
    transition: 0.25s ease-out;
}

#financing-tab-display .financing-bubble-container.completed .financing-bubble
{
    border: 3px solid var(--ks-green);
    background-color: var(--ks-green);
    color: var(--ks-white);
}

#financing-tab-display .financing-bubble-container.current .financing-bubble
{
    border: 3px solid var(--eC-primary);
    color: var(--eC-primary);
}

.financing-bubble-wrapper .financing-bubble-container .financing-bubble svg
{
    position: absolute;
    width: 24px;
    height: 24px;
    left: 12px;
    bottom: 12px;
}

#financing-tab-display .financing-bubble-wrapper .financing-bubble-container span.bubble-label {
    color: var(--ks-grey);
    transition: 0.25s ease-out;
}

#financing-tab-display .financing-bubble-wrapper .financing-bubble-container.active span.bubble-label {
    color: var(--ks-white);
}

#financing-tab-display .financing-bubble-wrapper .financing-bubble-container.active.completed span.bubble-label {
    color: var(--ks-white);
}

#financing-tab-display .financing-bubble-wrapper .financing-bubble-container.completed span.bubble-label {
    color: var(--ks-green);
}

#financing-tab-display .financing-bubble-wrapper {
    gap: 2rem;
}

#financing-tab-display .financing-bubble-wrapper .financing-bubble-container.active {
    background-color: rgba(var(--eC-primary-rgb), 0.85);
    border-radius: 6px;
}

#financing-tab-display .financing-bubble-wrapper .financing-bubble-container:hover {
    background-color: rgba(var(--eC-primary-rgb), 0.25);
    border-radius: 6px;
}

#financing-tab-display .financing-bubble-wrapper .financing-bubble-container.active:hover {
    background-color: rgba(var(--eC-primary-rgb), 0.85);
    border-radius: 6px;
}

#financing-tab-display .financing-bubble-wrapper .financing-bubble-container:not(:last-child) .financing-bubble::after {
    content: '';
    position: absolute;
    left: 22.5px;
    top: 100%;
    height: 7rem;
    border-right: 3px dotted var(--ks-grey);
}

#financing-tab-display .financing-bubble-wrapper .financing-bubble-container.completed:not(:last-child) .financing-bubble::after {
    border-right: 3px dotted var(--ks-green);
}

#financing-tab-display .financing-details-wrapper {
    background: var(--ks-white);
    border: 1px solid var(--ks-lightgrey);
    border-radius: 6px;
}

.financing-details-wrapper > .financing-details {
    min-height: 350px;
}

/* User related */

select.unselected-grey:has(option[value=""]:checked),
select.unselected-grey option[value=""] {
    color:grey;
}

/* fyrir drop down í skrefi 1 */
.adv-sel .selection-field-wrapper select
{
    font-size: 0.65rem;
}

.adv-sel option
{
    font-size: 0.7rem;
}

.adv-sel .field-placeholder {
    font-size:0.8rem;
    bottom:-5px !important;
}
/*** Skref 7 - Húsfélag ***/
.ha-add-form {
    position:absolute;
    right:32px;
    top:32px;
    border:none;
}

.add-form-button {
    display: inline-block;
    border-radius: 6px;
    text-align: center;
    height:3rem;
    min-width:16rem;
    vertical-align: bottom;
    font-weight: 400;
    border:none;
    background-color: var(--ks-white);
}

.add-form-button .plus {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
}

.add-form-button .plus b {
    font-size:1.5rem;
}

.each-husfelag-header-container {
    display: flex;
    justify-content: space-between;
}

.each-husfelag-header-container .husfelag-title {
    font-size: 1.5rem;
    font-weight: 300;
}

/* fjarlægja húsfélag takkar */
.delete-button-text {
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor: pointer;
}

/* Skref 7 - Húsfélag ends */
.pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0.8rem 1rem;
    font-size: 0.8rem;
    gap: 1rem;
    background: var(--ks-background-primary);
    border-radius: 6px;
    border:none;
    user-select:none;
    width: 100%;
}

.pill-button {
    cursor:pointer;
}

.pill-selected {
    background: var(--ks-green);
    box-shadow: 0px 0px 10px rgba(var(--ks-green), 0.25) !important;
    color: var(--ks-white);
}
.pill .age-container {
    gap:2px;
}

.vertical-table thead tr,
.vertical-table tbody tr td:last-child {
    font-weight: bold;
}

.vertical-table.primary-stripes tbody tr td:last-child {
    color: var(--eC-text-primary);
}

.key-val-table /* Simple table for key-value duo */
{
    border-collapse: separate;
    border-spacing: 0.5rem;
}

.key-val-table td
{
    padding: 0;
    overflow-wrap: normal;
    word-break: keep-all!important;
}
.key-val-table td * {
    margin-right: 0.5rem;
}

.key-val-table td:last-child p {
    max-height: 150px !important;
    overflow-y: auto;
    margin-bottom: 0;
}

.key-val-table td:nth-child(2) {
    color:var(--ks-grey);
    word-break: break-all;
}

.property-owners {
    font-size: 16px;
    line-height: 19px;
    color: var(--ks-grey);
}

.matseiningar-grid {
    display: grid;
    width: 100%;
    grid-template-columns: calc(100%/3 - 3vw) calc(100%/3 - 3vw);
    column-gap: 2rem;
    row-gap: 0.5rem;
}

.delinquent-payment-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    column-gap: 2rem;
    row-gap: 2rem;
}

.property-contact-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    column-gap: 2rem;
    row-gap: 1rem;
}

.address-detail-matseiningar-grid
{
    display: grid;
    width: 100%;
    grid-template-columns: calc(100%/1 - 3vw);
    column-gap: 1.5rem;
    row-gap: 0.5rem;
}

.address-detail-matseiningar-grid > div.d-inline-flex span:first-child,
.matseiningar-grid > div.d-inline-flex span:first-child
{
    font-size: 16px;
    line-height: 19px;
    color: var(--ks-black-2);
}

.address-detail-matseiningar-grid > div.d-inline-flex span:last-child,
.matseiningar-grid > div.d-inline-flex span:last-child
{
    font-size: 16px;
    line-height: 19px;
    color: var(--ks-grey);
}

/*
______      _     _ _       ______                          _
| ___ \    | |   | (_)      | ___ \                        | |
| |_/ /   _| |__ | |_  ___  | |_/ / __ ___  _ __   ___ _ __| |_ _   _
|  __/ | | | '_ \| | |/ __| |  __/ '__/ _ \| '_ \ / _ \ '__| __| | | |
| |  | |_| | |_) | | | (__  | |  | | | (_) | |_) |  __/ |  | |_| |_| |
\_|   \__,_|_.__/|_|_|\___| \_|  |_|  \___/| .__/ \___|_|   \__|\__, |
                                           | |                   __/ |
                                           |_|                  |___/
*/

.no-wrap {
    text-wrap: nowrap;
}

table.primary-stripes thead tr {
    color: var(--eC-black);
    font-weight: bold;
}

table.primary-stripes tbody tr:nth-child(odd){
    background: rgba(var(--eC-primary-rgb), 0.1);
}
table.primary-stripes tbody tr td {
    color: var(--eC-text-secondary);
}

.primary-stripes-collapse thead tr {
    color: var(--eC-black);
    font-weight: bold;
}

.primary-stripes-collapse tbody tr:nth-child(4n + 2),
.primary-stripes-collapse tbody tr:nth-child(4n + 1) {
    background-color: rgba(var(--eC-primary-rgb), 0.1);
}

.primary-stripes-collapse tbody tr:nth-child(4n + 3)
{
    background-color: transparent;
}

.primary-stripes-collapse tbody tr:nth-child(4n + 3)
{
    background-color: transparent;
}

table.manual-primary-stripes thead {
    color: var(--eC-black);
    font-weight: bold;
}

table.manual-primary-stripes .stripe-1 {
    background-color: rgba(var(--eC-primary-rgb), 0.3);
}

table *.dt-hasChild {
    background-color: rgba(var(--eC-primary-rgb), 0.2);
}

table.fixed-first-col-exempt {
    table-layout: fixed;
    border-collapse: collapse;
}

table.fixed-first-col-exempt tr *:first-child {
    width: 200px !important;
}

table.fixed-first-col-exempt tr *:nth-child(n+1) {
    width: auto;
}

.matseiningar-grid {
    display: grid;
    width: 100%;
    grid-template-columns: calc(100% - 3vw);
    column-gap: 2rem;
    row-gap: 0.5rem;
}
.matseiningar-grid > div.d-inline-flex span:first-child
{
    font-size: 16px;
    line-height: 19px;
    color: var(--ks-black-2);
}
.matseiningar-grid > div.d-inline-flex span:last-child
{
    font-size: 16px;
    line-height: 19px;
    color: var(--ks-grey);
}

.table-fixed {
    table-layout: fixed;
}

.inspection-reserve-table {
    vertical-align: middle;
}

.table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
}

.inprogress-card:hover{
    box-shadow: transparent;
    background-color: var(--eC-primary) !important; /* dark */
}
.inprogress-card:hover .card-circle{
    border: 3px solid var(--eC-primary) !important; /* dark */
}
.inprogress-card:hover .agency-progress{
    background-color: rgba(255,255,255, 0.85);
    box-shadow: 0 0 0 4px rgba(255,255,255, 0.85);
}
.inprogress-card:hover h4 {
    color: white !important;
}

.inactive-anchor {
    text-decoration: none;
    pointer-events: none;
    color: unset;
}

/* sale overview */
.fancy-card {
    transition: 0.5s;
}

.operation-wrapper button {
    border: none;
    white-space: nowrap;
    padding: 0;
}

.operation-wrapper a {
    text-decoration: none;
    white-space: nowrap;
}

.operation-wrapper .card-circle-sub {
    border-radius: 50% !important;
    border: 1.5px solid var(--ks-white);
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 25px;
    padding-top: 10px;
    transition: 0.5s;
}

.std-operation {
    background-color: rgba(var(--eC-primary-lighter-rgb), 0.25);
    box-shadow: 0 0 0 2px rgba(var(--eC-primary-lighter-rgb), 0.25);
}

.std-operation-card {
    color: var(--eC-primary);
}

.std-operation-card .card-body {
    padding: 0.5rem 1rem;
}

.std-operation-card:hover {
    box-shadow: 0px 5px 6px var(--eC-primary-fade-2) !important;
    background-color: var(--eC-primary);
}

.std-operation-card:hover .card-circle-sub {
    border: 1px solid var(--eC-primary) !important;
    background-color: rgba(255,255,255, 0.85);
    box-shadow: 0 0 0 4px rgba(255,255,255, 0.85);
}

.std-operation-card:hover h5 {
    color: var(--ks-white) !important;
}

.operation-wrapper svg {
    color: var(--eC-primary);
    text-align: center;
}

#sale-tab-display .collapsing {
    -webkit-transition: height 0.25s ease;
    -o-transition: height 0.25s ease;
    transition: height 0.25s ease;
}

.title-and-tutorials-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 1rem;
    min-width:15em;
}

.title-and-tutorials-container .right-arrow {
    background-color: var(--ks-white);
    margin-bottom:8px;
    border:none;
    rotate:90deg;
}

.tutorials-button-container {
    display:flex;
    flex-direction: row;
    justify-content: center;
    background-color: var(--ks-info-blue);
    height:1.5rem;
    width:100%;
    max-width: 1.5rem;
    cursor:pointer;
    border:none;
    box-shadow: none;
    border-radius:100%;
}

.tutorials-button-container svg {
    margin:auto;
    scale:0.8;
    color: var(--ks-white);
}

.tutorials-text-content {
    background-color: var(--ks-info);
    color: var(--ks-info-blue);
    border: 0.5px solid var(--ks-info-blue);
    border-radius: 4px;
    padding:2rem;
    padding-top:1.5rem;
    margin-top:2rem;
}

.tutorials-text-content h5 {
    color: var(--ks-info-blue);
}

.additional-information-accordion .accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235285C0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.additional-information-accordion {
    background-color: var(--ks-info);
    color: var(--eC-primary);
}

.accordion-button {
    box-shadow: none !important;
}

.additional-information-accordion .accordion-button:not(.collapsed) {
    color: var(--eC-primary);
    background-color: var(--ks-info);
}

.accordion-item {
    border-color: rgba(var(--eC-primary-rgb), 0.3);
}

.accordion-body-border {
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    border-top:  0;
}

.additional-information-h5 {
    font-size: 1.3rem;
}

/* Inside each tutorials template */

.tutorials-template-header-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width:100%;
    margin-bottom:1rem;
    flex-wrap: wrap;
}

.tutorials-template-header-container > h4{
    margin: auto auto auto 0rem;
}
/* Tutorials ends */

/* Confirm info */

.confirm-info-title-container {
    /*background-color: blue;*/
    flex-direction: column;
    align-items: flex-start!important;
}

.confirm-info-feerev-container table tbody th
{
    font-size: 16px;
    font-weight: 300 !important;
}

.confirm-info-feerev-container p
{
    margin: 0;
}

.ci-file-container > div + div,
.ci-file-container > div:last-of-type
{
    margin-right: 2rem;
}

.ci-file-container > div:first-of-type
{
    margin-left: 2rem;
    margin-right: 2rem;
}

.box-shadow-none
{
    box-shadow: none !important;
}

#module #property-description.collapse:not(.show) {
    display: block;
    /* height = lineheight * no of lines to display */
    height: 12em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
}

#module #property-description.collapsing {
    height: 12em;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
}

/* Confirm info ends */

.mt-4-3
{
    margin-top: 2rem !important;
}

.mb-4-3
{
    margin-bottom: 2rem !important;
}

.my-4-3
{
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.w-md-100 {
    width: 100%;
}

.ms-4-3
{
    margin-left: 2rem !important;
}

.me-4-3
{
    margin-right: 2rem !important;
}

.p-4-3
{
    padding: 2rem !important;
}

.pt-4-3
{
    padding-top: 2rem !important;
}

.pe-4-3
{
    padding-right: 2rem !important;
}

.pb-4-3
{
    padding-bottom: 2rem !important;
}

.px-4-3
{
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.gap-4-3
{
    gap: 2rem !important;
}

.h-5
{
    height: 3rem !important;
}

.w-5
{
    width: 3rem !important;
}

.ox-auto
{
    overflow-x: auto;
}

.togglePdfInfoButton .icon, .togglePdfInfoButton svg {
    color: var(--eC-primary);
    width: 5rem;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
}
.togglePdfInfoButton {
    background-color: inherit !important;
    border: none;
}

.file-thumbnail {
    min-width: 14rem;
}

.thumbnail-container
{
    position: relative;
    overflow: hidden;
    height: 6rem;
    width: auto;
    max-width: 8rem;
    border: none;
    background-color: transparent;
}

.wsnowrap-hideoverflow {
    white-space: nowrap;
    overflow: hidden;
}
.thumbnail-container > img
{
    width: 100%;
    height: 100%;
}

/* Skref 5 - Önnur föst gjöld */

.onnur-fost-gjold-container {
    display:flex;
    flex-direction: column;
    padding: 2rem;
}

.onnur-fost-gjold-container .input-container {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}

.onnur-fost-gjold-container .tutorials-text-content
{
    margin: 2rem 0 0 0;
}

/* Skref 5 - Tekjur og gjöld ends */

/* Skref 8 - Mortgages */

/* changes on MD */
.mort-title-container {
    flex-direction: column;
}

.fit-content {
    width: fit-content;
}

.card {
    background-color: var(--ks-white);
    box-shadow: 2px 3px 5px rgba(var(--eC-primary-darker-rgb), 0.1);
    border: none;
}

.ec-card {
    background-color: var(--ks-white) !important;
    box-shadow: none;
    border:none!important;
    margin-top: 2.5rem;
}

.ec-card > .card-body {
    flex: 1 1 auto;
    padding: 0rem;
}

.flex-auto {
    flex: 1 1 auto;
}

.ec-card hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    visibility: hidden;
}

.overview-detail-grid-bidders {
    display: grid;
    width: 100%;
    grid-template-columns: auto auto auto auto;
    column-gap: 2rem;
    row-gap: 1rem;
    white-space: nowrap;
}

.overview-detail-grid-payment {
    display: grid;
    width: 100%;
    grid-template-columns: auto auto auto auto;
    column-gap: 2rem;
    row-gap: 1rem;
    white-space: nowrap;
}

.bid-status-badge {
    border-radius: 12px;
    text-align: center;
    font-size: 0.8rem;
    user-select: none;
    color: var(--ks-white);
}

/* Active & Accepted */
.bid-status-badge[data-bid-status="0"],
.bid-status-badge[data-bid-status="3"],
.bid-status-badge[data-bid-status="4"] {
    background-color: var(--ks-green);
}

/* Draft */
.bid-status-badge[data-bid-status="1"] {
    background-color: var(--ks-dark-orange);
}

/* Inactive */
.bid-status-badge[data-bid-status="2"] {
    background-color: var(--ks-danger);
}

/* make .../url/#target cards stand out */
.card:target {
    box-shadow: 0px 0px 15px 2px var(--eC-primary) ;
}

.pdf-card .card-body {
    padding: 0 1rem 0 0 !important;
}

/* Skref 8 - Mortgages ends */

/* Public Property */
#sharePropertyButton::after
{
    display: none !important;
}

.v-hidden
{
    visibility: hidden;
}

.carousel-button-background
{
    background-color: var(--eC-primary);
    padding: 1rem;
    border-radius: 50%;
}

#outerCarousel-img_files .carousel-control-prev > div,
#outerCarousel-img_files .carousel-control-next > div {
    width: 2rem;
    height: 2rem;
    position: relative;
}

#outerCarousel-img_files .carousel-control-prev svg {
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
}

#outerCarousel-img_files .carousel-control-next svg {
    position: absolute;
    top: 0.5rem;
    left: 0.8rem;
}

#outerCarousel {
    z-index: 1;
}

.carousel-inner img {
    height: 220px;
    min-width: 280px;
}

.carousel .bg-background {
    opacity: 75%;
}

.carousel #bgimage {
    filter: blur(15px);
    -webkit-filter: blur(15px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#magnifying-glass-container {
    z-index: 2;
    font-size: 2rem;
    pointer-events: none;
    opacity: 65%;
}

#magnifyingGlassIcon {
    z-index: 3;
    pointer-events: none;
}

#property-location #map {
    border-radius: 6px;
    margin-bottom: 0;
}

/* Causes an element's width to span the equivalent of two grid elements */

/* Public Property ends */

/* Kauptilboð Gagntilboð Form start */

.make-offer-estate-info-wrapper h3
{
    line-height: 38px;
}

.bidding-form-row{
    margin-bottom: 1.8rem;
    display:flex;
}

.text-red{
    color:red;
}

#heildarupph-villubod > span{
    margin: 0px;
}

.bid-overtake-loan-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    row-gap: 0.2rem;
}

.toast-danger{
    background-color: var(--ks-danger);
    align-items: center;
}

#close-toast-btn{
    width: 1.5em;
    height: 1.5em;
}

.unread-bid-count-circle {
    position: absolute;
    top: -0.8rem;
    right: -0.6rem;
    pointer-events: none;
}

.unread-bid-count-circle > svg {
    position: relative;
    width: 1.8rem;
    height: 1.8rem;
    color: var(--ks-error-red);
}

.circle-small{
    top: -0.4rem;
    right: -0.3rem;
}
.circle-small > svg{
    width: 1.0rem;
    height: 1.0rem;
}

.unread-bid-count-circle > span {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    left: 2px;
    top: 5px;
}

/* sale overview image sorting */
.image-list {
    list-style-type: none;
}

.image-list div {
    margin: 0 4px 4px 4px;
    padding: 0.4em;
    display: inline-block;
}

.image-list img {
    height: auto;
    width:300px;
    max-height:300px;
    max-width: 300px;
    border: 1px solid var(--ks-grey);
}

.image-list li:first-child {
    position: relative;
    flex-direction: column;
    border: 2px solid var(--ks-lightgrey);
    border-radius: 6px;
}

.image-list li:first-child::after {
    content: "Forsíðumynd";
    color: var(--eC-text-secondary);
    position: absolute;
    top:-0.9rem;
    left: 90px;
    line-height: 1rem;
    background-color: var(--ks-background-primary);
    padding: 0px 1rem;
    border-radius: 6px;
}

.ci-sort-form img {
    height: 6rem;
    width: auto;
    max-width: 8rem;
}

.ci-sort-form li:first-child::after {
    left: 0;
    right: 0;
    white-space: nowrap;
    padding: 0;
    text-align: center;
}