@charset "utf-8";

.dotContainer {
    position: var(--posAbsolute);
    top: unset !important;
    bottom: calc(var(--calcLogoHeight) + .5em) !important;
    left: 0px;
    margin: var(--noMarginPadding);
    padding: var(--noMarginPadding);
    width: var(--maxWidth);
    height: 1.5em !important;
    box-sizing: var(--boxSizeingNorm);
    -webkit-box-sizing: var(--boxSizeingNorm);
    text-align: center;
    display: var(--displayBlock) !important;
    user-select: var(--userSelect);
    -webkit-user-select: var(--userSelect);
    -moz-user-select: var(--userSelect);
    pointer-events: none;
    z-index: 219;
}

.containerSlider:is(:hover, :active, :focus, :target, :focus-visible, :focus-within) .dotContainer, #mainSlideshow:is(:hover, :active, :focus, :target, :focus-visible, :focus-within) .dotContainer {
    width: var(--maxWidth);
}

.dot {
    height: calc(0.9vw * var(--setCalcFactor));
    width: calc(0.9vw * var(--setCalcFactor));
    margin: calc(0.15vw * var(--setCalcFactor));
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    box-sizing: var(--boxSizeingBorder);
    -webkit-box-sizing: var(--boxSizeingBorder);
    display: var(--displayInlineBlock);
    transition: background-color var(--transitionFast) ease;
    -webkit-transition: background-color var(--transitionFast) ease;
    position: var(--posRelative);
    vertical-align: middle;
    box-shadow: var(--boxShadow);
    overflow: var(--overflowHidden);
    user-select: var(--userSelect);
    z-index: 14;
}

.containerSlider:is(:hover, :active, :focus, :target, :focus-visible, :focus-within) .dot {}

:is(#Pos1, #Pos2, #Pos3, #Pos4, #Pos5, #Pos6, #Pos7, #Pos8, #Pos9, #Pos10).dot:is(:hover, :active, :focus, :target, :focus-visible, :focus-within), .dot:is(:hover, :active, :focus, :target, :focus-visible, :focus-within) {
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px #fff;
}

.dot:hover::before {
    display: var(--displayInlineBlock);
    height: 1.25em !important;
    width: 15em;
    border-radius: 0.25em;
    border: solid 1px #000000;
    background-color: #eeeeaa;
    color: #222222;
    content: attr(alt);
    position: var(--posRelative);
    top: -2.5em;
    text-decoration: none !important;
    text-shadow: none !important;
    text-overflow: ellipsis !important;
    word-break: keep-all;
    box-sizing: var(--boxSizeingBorder);
    -webkit-box-sizing: var(--boxSizeingBorder);
}

.dotBackground {
    text-align: center;
    background-color: var(--colorDrkGreyTrans);
    backdrop-filter: var(--bgBlur);
    -webkit-backdrop-filter: var(--bgBlur);
    display: var(--displayInlineBlock);
    border-radius: 0.5em;
    width: auto;
    height: auto !important;
    padding: 0 calc(0.5em * 0.75);
    box-shadow: var(--boxShadow);
    user-select: var(--userSelect);
    -webkit-user-select: var(--userSelect);
    -moz-user-select: var(--userSelect);
    position: var(--posAbsolute);
    box-sizing: var(--boxSizeingNorm);
    -webkit-box-sizing: var(--boxSizeingNorm);
}

.dotBackground:nth-child(2) {
    position: var(--posAbslute);
    display: var(--displayInlineBlock);
    width: max-content;
    opacity: 1 !important;
    border-color: transparent !important;
    translate: -50%;
    transform: translateX(calc(0px + var(--posSliderProcent)));
    background: transparent !important;
    box-shadow: var(--boxShadow3);
    backdrop-filter: unset !important;
    background-color: transparent;
}

.dotBackground:nth-child(2) .dot {
    opacity: 0 !important;
    visibility:hidden !important;
}

.dotBackground:nth-child(2) .dot:nth-child(5) {
    background-color: var(--colorBlueDrk);
    box-shadow: var(--boxShadow);
    border: solid 1px var(--colorBlueLgth);
    outline: solid 1px var(--colorXLgtGrey);
    opacity: 1 !important;
    visibility: visible !important;
}

.containerSlider:is(:hover, :active, :focus, :target, :focus-visible, :focus-within) .dotBackground, #mainSlideshow:is(:hover, :active, :focus, :target, :focus-visible, :focus-within) .dotBackground {
    padding: 0.125em 0.25em;
    height: 24px !important;
}

#mainSlideshow:is(:hover, :active, :focus, :target, :focus-visible, :focus-within) .dotBackground:nth-child(2), .containerSlider:is(:hover, :active, :focus, :target, :focus-visible, :focus-within) .dotBackground:nth-child(2) {
    display: none !important
}