/* Container width for basic and expert mode */
#domainlist.basicmode {
    width: 1400px;
}
#domainlist.minifiedmode {
    width: 100%;
}
#domainlist.expertmode {
    width: 100%;
}
#domainlist.expertmode > div.row:nth-child(3) .panel.panel-default {
    min-width: 1650px;
}
@media (max-width: 1400px) {
    #domainlist.basicmode {
        width: 100%;
    }
}

/* Filter */
@media (max-width: 768px) {
    #domainlist #domain-filter.panel,
    #domainlist #domain-filter > div.panel {
        margin-bottom: 5px;
    }
}

/* Mass import and export */
#domainlist #import-export #import-export-collapse > div.row {
    margin: 15px 0px !important;
}
#domainlist #import-export #upload-file-name {
    background-color: white;
    cursor: default;
}
#domainlist #import-export #upload-file-select {
    width: 100%;
    height: 100%;
}
#domainlist #import-export .input-group-addon {
    padding: 0;
    height: 34px;
}
#domainlist #import-export .import-export-button {
    margin-top: 5px;
}
#domainlist #import-export form .import-export-button {
    margin-top: 0px;
}
@media (max-width: 768px) {
    #domainlist #import-export > div.panel {
        margin-bottom: 5px;
    }
}

/* Legend */
#domainlist #legend #legend-collapse > div {
    margin: 15px 0px !important;
}
#domainlist #legend #legend-collapse .legend-icon-dutchauction {
    transform: rotate(45deg);
}
@media (max-width: 768px) {
    #domainlist #legend > div.panel {
        margin-bottom: 5px;
    }
}

/* Icons */
#domainlist #filter-panel .icons,
#domainlist #navbar-filter .icons,
#domainlist .col-value .icons,
#domainlist #domainlist-header .icons {
    background-image: url(../svg/catchtiger_sprite_map.svg);
    background-repeat: no-repeat;
    background-color: transparent !important;
}
#domainlist #domainlist-header .icons {
    margin: auto;
}

#domainlist #filter-panel label.icon-label,
#domainlist #navbar-filter label.icon-label {
    display: flex;
    flex-direction: row;
    flex-flow: nowrap;
    justify-content: flex-start;
    align-items: center;
}

#domainlist .icons.icon-chars,
#domainlist .icons.icon-in-tld,
#domainlist .icons.icon-only-chars {
    background-image: none !important;
}

#domainlist .icons.icon-bids             { background-position: -254px -11px; width: 19px; height: 18px; }
#domainlist .icons.icon-bid              { background-position: -284px -10px; width: 19px; height: 18px; }
#domainlist .icons.icon-time             { background-position: -312px -10px; width: 19px; height: 18px; }
#domainlist .icons.icon-score            { background-position: -342px -11px; width: 19px; height: 18px; }
#domainlist .icons.icon-domain-authority { background-position: -257px -36px; width: 20px; height: 18px; }
#domainlist .icons.icon-mozilla-rank     { background-position: -286px -36px; width: 22px; height: 18px; }
#domainlist .icons.icon-page-authority   { background-position: -318px -36px; width: 19px; height: 18px; }
#domainlist .icons.icon-majestic-rd      { background-position: -348px -37px; width: 19px; height: 18px; }
#domainlist .icons.icon-majestic-bl      { background-position: -227px -62px; width: 19px; height: 18px; }
#domainlist .icons.icon-majestic-tf      { background-position: -228px -80px; width: 19px; height: 18px; }
#domainlist .icons.icon-majestic-cf      { background-position: -257px -80px; width: 19px; height: 18px; }
#domainlist .icons.icon-majestic-tfcf    { background-position: -290px -80px; width: 36px; height: 18px; }
#domainlist .icons.icon-google-hits      { background-position: -286px -61px; width: 19px; height: 18px; }
#domainlist .icons.icon-google-ads       { background-position: -372px -61px; width: 24px; height: 18px; }
#domainlist .icons.icon-dictionary       { background-position: -316px -61px; width: 20px; height: 18px; }
#domainlist .icons.icon-wikipedia        { background-position: -369px -12px; width: 22px; height: 18px; }
#domainlist .icons.icon-kvk              { background-position: -364px -80px; width: 28px; height: 18px; }
#domainlist .icons.icon-arc              { background-position: -332px -80px; width: 28px; height: 18px; }

@keyframes description-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#domainlist .icon-description {
    position: absolute;
    width: 300px;
    margin-left: calc(50% - 165px);
    margin-top: 13px;
    display: none;
    padding: 10px;
    z-index: 99;
    border: solid 1px black;
    background-color: #f5f5f5;
    font-size: 1.1em;
}
#domainlist .icon-description.show {
    display: block !important;
    animation: description-fade-in 0.4s;
}
#domainlist .icon-description > div.arrow-up {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-top: -21px;
    margin-left: 130px;
    border-top: solid 1px black;
    border-left: solid 1px black;
    background-color: #f5f5f5;
    transform: rotate(45deg);
}
#domainlist .icon-description > h4 {
    font-weight: bold;
}

/* Spalten für alle Modi */
#domainlist div.col-domain {
    display: flex;
    flex-flow: row wrap;
    font-weight: bold;
    word-break: break-all;
}
#domainlist div.col-domain > div:nth-child(3) > span.state-label {
    margin-left: 5px;
}
#domainlist div.col-domain > div:nth-child(2) {
    margin-left: 5px;
}

/* Columns for expert mode */
#domainlist.expertmode div[id*="scrollto_"] div.col-domain {
    width: calc((100% / 15) * 2.5) !important;
}
#domainlist.expertmode div[id*="scrollto_"] div.col-action {
    width: calc((100% / 15) * 2.5) !important;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}
#domainlist.expertmode div.col-value {
    width: calc((100% - (100% / 15 * 2.5 * 2)) / 13) !important;
    text-align: center;
}

/* Columns for basic mode */
#domainlist.basicmode div[id*="scrollto_"] div.col-domain {
    width: 20%;
}
#domainlist.basicmode div[id*="scrollto_"] div.col-action {
    width: 20%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}
#domainlist.basicmode div.col-value {
    width: calc(60% / 6) !important;
    text-align: center;
}
#domainlist.basicmode div.col-value .mobile-caption {
    display: none;
}
@media (max-width: 768px) {
    #domainlist.basicmode div.col-domain,
    #domainlist.basicmode div.col-action,
    #domainlist.basicmode div.col-value.current-bid {
        width: 100% !important;
        text-align: left;
    }
    #domainlist.basicmode div.col-value {
        width: 50% !important;
        text-align: center;
    }
    #domainlist.basicmode div.col-value .mobile-caption {
        width: 100%;
        display: inline-block;
        font-weight: bold;
    }
    #domainlist.basicmode div.col-value.current-bid .mobile-caption {
        width: auto;
    }
    #domainlist.basicmode div.col-value.current-bid > *:nth-child(1n+3) {
        margin-left: 10px;
    }
    #domainlist.basicmode div.col-value > * {
        display: inline-block;
    }
}

/* Columns for minified mode */
#domainlist.minifiedmode div[id*="scrollto_"] div.col-domain {
    width: 30%;
}
#domainlist.minifiedmode div[id*="scrollto_"] div.col-action {
    width: 30%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}
#domainlist.minifiedmode div.col-value {
    width: calc(40% / 2);
    text-align: center;
}
#domainlist.minifiedmode div.col-value .mobile-caption {
    display: none;
}
@media (max-width: 768px) {
    #domainlist.minifiedmode div[id*="scrollto_"] > div.row {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
    }
    #domainlist.minifiedmode div[id*="scrollto_"] div.col-domain {
        width: 40%;
    }
    #domainlist.minifiedmode div[id*="scrollto_"] div.col-action {
        width: 60%;
    }
    #domainlist.minifiedmode div.col-value {
        width: 50%;
        padding-top: 5px;
        text-align: center;
    }
}

/* Spalten im Kompaktmodus - Leserichtung: Spalte für Spalte (Sortierung) */
@media (min-width: 1600px) {
    #domainlist.minifiedmode.listflow-column div[id*="scrollto_"] {
        order: var(--list-pos-three-col);
    }
}
@media (min-width: 1200px) and (max-width: 1599px) {
    #domainlist.minifiedmode.listflow-column div[id*="scrollto_"] {
        order: var(--list-pos-two-col);
    }
}
@media (max-width: 1199px) {
    #domainlist.minifiedmode.listflow-column div[id*="scrollto_"] {
        order: var(--list-pos-one-col);
    }
}

/* Domainlist header */
#domainlist div#domainlist-header {
    padding-bottom: 8px;
    font-weight: bold;
}
#domainlist div#domainlist-header .col-action button {
    float: left;
}
#domainlist div#domainlist-header.fixed {
    position: fixed;
    padding-top: 16px;
    top: 0px;
    z-index: 99;
    background-color: white;
    border-bottom: solid 1px #c9c9c9;
}

#domainlist.basicmode #domainlist-header .col-domain,
#domainlist.basicmode #domainlist-header .col-action {
    width: 20% !important;
}

#domainlist.minifiedmode #domainlist-header > div > div.row > div:nth-child(1),
#domainlist.minifiedmode #domainlist-header > div > div.row > div:nth-child(2) {
    width: 30% !important;
}
#domainlist.minifiedmode #domainlist-header > div > div.row > div:nth-child(3),
#domainlist.minifiedmode #domainlist-header > div > div.row > div:nth-child(4) {
    width: 20% !important;
    text-align: center;
}

#domainlist.expertmode #domainlist-header .col-domain,
#domainlist.expertmode #domainlist-header .col-action {
    width: calc((100% / 15) * 2.5) !important;
}

/* Icons for sort ASC and DESC */
#domainlist #domainlist-header .fa-chevron-up,
#domainlist #domainlist-header .fa-chevron-down {
    color: #ccc;
    border: none;
    padding: 1px;
}
#domainlist #domainlist-header .fa-chevron-up.active,
#domainlist #domainlist-header .fa-chevron-down.active {
    color: #72C02C;
}

/* Button for toggle favorite */
#domainlist div.col-action .favorite-toggle {
    color: black;
}
#domainlist div.col-action .favorite-toggle.favorite-remove {
    color: #72c02c;
}

#domainlist div.col-action > div.favorite-buttons {
    width: 25%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
}

/* Button for edit favorite note */
#domainlist div.col-action .favorite-note-edit,
#domainlist div.col-action .favorite-note-save {
    display: none;
    color: black;
}
#domainlist div.col-action .favorite-note-edit.is-favorite,
#domainlist div.col-action .favorite-note-save.is-favorite {
    display: block;
}
@media (max-width: 768px) {
    #domainlist div.col-action .favorite-toggle,
    #domainlist div.col-action .favorite-note-edit,
    #domainlist div.col-action .favorite-note-save {
        height: 29px;
    }
}

/* Anzeige der Notizen */
#domainlist.basicmode div.favorite-note-wrapper span,
#domainlist.expertmode div.favorite-note-wrapper span {
    width: 100%;
    float: left;
    padding: 0px 12px;
    margin-top: 5px;
    margin-bottom: 0px;
    line-height: 30px;
    font-size: 12px;
    text-align: left;
    color: #707070;
    border: 0;
    background: transparent;
    white-space: pre-wrap;
    font-family: inherit;
}
#domainlist.basicmode div.favorite-note-wrapper input,
#domainlist.expertmode div.favorite-note-wrapper input {
    height: 30px;
    margin-top: 4px;
    margin-bottom: 1px;
    font-size: 12px;
    padding: 0px 11px;
    color: #707070;
}
#domainlist.minifiedmode div.favorite-note-wrapper input {
    height: 22px;
    padding: 0;
    line-height: 22px;
    border: 0;
    font-size: 12px;
    color: #707070;
}
#domainlist.minifiedmode div.favorite-note-wrapper span {
    width: 100%;
    float: left;
    line-height: 22px;
    font-size: 12px;
    text-align: left;
    color: #707070;
    border: 0;
    background: transparent;
    white-space: pre-wrap;
    font-family: inherit;
}

/* Buttons for toggle bid form */
#domainlist div.col-action .bid-button {
    width: calc(75% / 4 * 3) !important;
}
#domainlist div.col-action .buy-button,
#domainlist div.col-action .bid-button.btn-dutchauction,
#domainlist div.col-action .bid-abort-button,
#domainlist div.col-action .buy-abort-button {
    width: calc(75% / 4 * 4) !important;
}

/* for all fastbid buttons */
#domainlist div.col-action button[class*="fastbid-"] {
    width: calc(75% / 4);
    display: block;
    float: left;
}

/* Buttons for select fastbid value */
#domainlist div.col-action .fastbid-raise {
    width: calc(75% / 4) !important;
}

/* Button for accept new fastbid */
#domainlist div.col-action .fastbid-accept {
    width: calc(75% / 4 * 3) !important;
}

@media (max-width: 768px) {
    #domainlist div.col-action button[class*="fastbid-"],
    #domainlist div.col-action button.bid-button,
    #domainlist div.col-action button.bid-abort-button {
        font-size: 12px;
    }
}

/*@media (min-width: 768px) and (max-width: 1200px) {*/
@media (max-width: 991px) {
    .navbar-toggle {
        display: block !important;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
}

/* style for row */
#domainlist .row[id*="scrollto_"] {
    border-top: solid 1px #EEE; padding: 8px 0px;
}
#domainlist .row[id*="scrollto_"].is-favorite,
#domainlist .col[id*="scrollto_"].is-favorite {
    background-image: linear-gradient(135deg, #72c02c, transparent 20px);
    background-repeat: no-repeat;
}

#domainlist.minifiedmode #domainlist-header + .row > .col[id*="scrollto_"] {
    padding-top: 2px;
    padding-bottom: 2px;
    border-width: 0px;
    border-style: solid;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1%, #c9c9c9 7% 26%, rgba(0, 0, 0, 0) 32% 51%, #c9c9c9 57% 91%, rgba(0, 0, 0, 0) 97%) 1 0%;
}
@media (min-width: 1200px) and (max-width: 1599px) {
    #domainlist.minifiedmode:not(.listflow-column) #domainlist-header + .row > .col[id*="scrollto_"]:nth-child(2n+3),
    #domainlist.minifiedmode:not(.listflow-column) #domainlist-header + .row > .col[id*="scrollto_"]:nth-child(2n+4) {
        border-top-width: 1px;
    }
    #domainlist.minifiedmode.listflow-column #domainlist-header + .row > .col[id*="scrollto_"],
    #domainlist.minifiedmode.listflow-column #domainlist-header + .row > .col[id*="scrollto_"] {
        border-top-width: var(--top-border-width-two-col);
    }
}
@media (min-width: 1600px) {
    #domainlist.minifiedmode:not(.listflow-column) #domainlist-header + .row > .col[id*="scrollto_"]:nth-child(3n+4),
    #domainlist.minifiedmode:not(.listflow-column) #domainlist-header + .row > .col[id*="scrollto_"]:nth-child(3n+5),
    #domainlist.minifiedmode:not(.listflow-column) #domainlist-header + .row > .col[id*="scrollto_"]:nth-child(3n+6) {
        border-top-width: 1px;
    }
    #domainlist.minifiedmode.listflow-column #domainlist-header + .row > .col[id*="scrollto_"],
    #domainlist.minifiedmode.listflow-column #domainlist-header + .row > .col[id*="scrollto_"] {
        border-top-width: var(--top-border-width-three-col);
    }
}

#domainlist.minifiedmode #domainlist-header + .row {
    display: flex;
    flex-flow: row wrap;
    align-content: stretch;
}
@media (max-width: 768px) {
    #domainlist .row[id*="scrollto_"] {
        display: flex;
        flex-flow: row wrap;
    }
}

/* Anzeige für das aktuelle Gebot */
#domainlist.minifiedmode div.col-value.current-bid {
    display: flex;
    flex-direction: row;
    flex-flow: nowrap;
    justify-content: space-around;
}
@media (max-width: 768px) {
    #domainlist.minifiedmode div.col-value.current-bid {
        justify-content: space-between;
    }
}

/* Extra große Spalten wie in Bootstrap 4 */
@media (min-width: 1600px) {
    *[class*="col-xl-"] {
        position: relative;
        min-height: 1px;
        float: left;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-xl-1 {
        width: 8.333333333333332%;
    }
    .col-xl-2 {
        width: 16.666666666666664%;
    }
    .col-xl-3 {
        width: 25%;
    }
    .col-xl-4 {
        width: 33.33333333333333%;
    }
    .col-xl-5 {
        width: 41.66666666666667%;
    }
    .col-xl-6 {
        width: 50%;
    }
    .col-xl-7 {
        width: 58.333333333333336%;
    }
    .col-xl-8 {
        width: 66.66666666666666%;
    }
    .col-xl-9 {
        width: 75%;
    }
    .col-xl-10 {
        width: 83.33333333333334%;
    }
    .col-xl-11 {
        width: 91.66666666666666%;
    }
    .col-xl-12 {
        width: 100%;
    }
    .hidden-xl {
        display: none !important;
        visibility: hidden !important;
    }
    .visible-xl {
        display: block !important;
        visibility: visible !important;
    }
}

/* Header in der Domainliste mit Auswahl des Modus und Einträge pro Seite */
#domainlist div.panel-heading {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}
#domainlist div.panel-heading > h3.panel-title:nth-child(1) {
    width: 100%;
}
#domainlist div.panel-heading > form:nth-child(2),
#domainlist div.panel-heading > div:nth-child(3) {
    width: 50%;
}
@media (max-width: 768px) {
    #domainlist div.panel-heading > form:nth-child(2),
    #domainlist div.panel-heading > div:nth-child(3) {
        width: 100%;
    }
    #domainlist div.panel-heading > div:nth-child(3) {
        padding-top: 5px;
    }
}

/* Auktionsverlängerung */
@keyframes anim-pulsate {
    50% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}
.anim-pulsate {
    display: inline-block;
    transform: scale(1.0);
    animation: anim-pulsate 0.5s ease-out;
    animation-iteration-count: 5;
    -webkit-animation: anim-pulsate 0.5s ease-out;
    -webkit-animation-iteration-count: 5;
}

.auction-extension-max-duration {
    font-family: "FontAwesome";
}
.auction-extension-max-duration::after {
    content: "  \f023";
}