/* ==========================================================================
   VARIABLES
   ========================================================================== */

.iduid-dialog,
.iduid-tooltip {
    --iduid--color--lighter-gray: #d3d3d3;
    --iduid--color--black: #121212;
    --iduid--color--white: #fff;
    --iduid--color--light-gray: #4d4d4d;
    --iduid--color--dark-gray: #3f3f3d;
    --iduid--color--blue: #007aff;
    --iduid--color--light-blue: #2A8CF7;

    --iduid--primary--color: var(--iduid--color--white);
    --iduid--primary--BackgroundColor: var(--iduid--color--blue);
    --iduid--primary--BackgroundColor--hover: var(--iduid--color--light-blue);
    --iduid--primary--BackgroundColor--focus:var(--iduid--color--blue);
    --iduid--primary--BackgroundColor--active:var(--iduid--color--blue);

    --iduid--FontFamily--sans-serif: "Poppins", helvetica, arial, sans-serif;

    /*The font sizes must be defined, these can vary depending on
    host pages like WEST or YARP2 css-resets*/

    --iduid--FontWeight--normal: 400;
    --iduid--FontWeight--semi-bold: 600;
    --iduid--FontWeight--bold: 700;
    --iduid--LineHeight--sm: 1.2;
    --iduid--LineHeight--md: 1.5;

    --iduid--spacer--2xs: 0.5em; /* 8px */
    --iduid--spacer--xs: 0.75em; /* 12px */
    --iduid--spacer--sm: 0.875em; /* 14px */
    --iduid--spacer--md: 1em; /* 16px */
    --iduid--spacer--lg: 1.125em; /* 18px */
    --iduid--spacer--xl: 1.5em; /* 24px */
    --iduid--spacer--2xl: 1.75em;/* 28px*/
    --iduid--spacer--3xl: 1.875em;/* 30px*/
    --iduid--spacer--4xl: 2em;/* 32px*/

    --iduid--BorderRadius--sm: 5px;
}

/* ==========================================================================
   FONTS
   ========================================================================== */

/* poppins-regular */
@font-face {
    font-display: fallback;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url("https://idcdn.de/static-files/common/fonts/Poppins/Poppins400normal.woff2?20231205") format("woff2"), /* Super Modern Browsers */
    url("https://idcdn.de/static-files/common/fonts/Poppins/Poppins400normal.woff?20231205") format("woff"); /* Modern Browsers */
}

/* poppins-semi-bold */
@font-face {
    font-display: fallback; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    src: url("https://idcdn.de/static-files/common/fonts/Poppins/Poppins600normal.woff2?20240408") format("woff2"), /* Super Modern Browsers */
    url("https://idcdn.de/static-files/common/fonts/Poppins/Poppins600normal.woff?20240408") format("woff"); /* Modern Browsers */
}

/* poppins-bold */
@font-face {
    font-display: fallback;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    src: url("https://idcdn.de/static-files/common/fonts/Poppins/Poppins700normal.woff2?20240408") format("woff2"), /* Super Modern Browsers */
    url("https://idcdn.de/static-files/common/fonts/Poppins/Poppins700normal.woff?20240408") format("woff"); /* Modern Browsers */
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.iduid-wrapper {
    font-family: var(--iduid--FontFamily--sans-serif);
    font-size: 16px;
    margin: var(--iduid--spacer--2xl) var(--iduid--spacer--3xl);
    line-height: 1.5;
}

.iduid-content,
.iduid-content-innen,
.iduid-links {
    display: grid;
    grid-auto-flow: row;
}

.iduid-content,
.iduid-content-innen {
    gap: var(--iduid--spacer--md);
    text-align: center;
}

.iduid-content-innen {
    grid-template-columns: 1fr;
    gap: var(--iduid--spacer--md);
    justify-content: center;
}

.iduid-links {
    gap: var(--iduid--spacer--2xs);
    grid-template-columns: 1fr;
}

.iduid-headline {
    font-size: 16px;
    font-weight: var(--iduid--FontWeight--bold);
    line-height: var(--iduid--LineHeight--md);
    /* don't rely on host page css-resets... */
    margin: 0;
    padding: 0;
}

.iduid-headline--withEmail {
    font-weight: normal;
}

.iduid-headline-email {
    font-weight: var(--iduid--FontWeight--bold);
}

.iduid-logo {
    margin: var(--iduid--spacer--lg) auto var(--iduid--spacer--sm);
}

.iduid-text,
.iduid-info {
    /* don't rely on host page css-resets... */
    margin: 0;
    padding: 0;
}

.iduid-info,
.iduid-help {
    color: var(--iduid--color--light-gray);
    font-size: 12px;
}

.iduid-help {
    text-decoration: underline;
}

.iduid-help:hover,
.iduid-help:active,
.iduid-help:focus,
.iduid-help:visited {
    color: var(--iduid--color--light-gray);
}

.iduid-info-clientname:before {
    content: "Diese Seite nutzt"
}

.iduid-text-link {
    cursor: pointer;
    color: var(--iduid--color--blue);
    font-size: 12px;
    text-decoration: underline;
}

.iduid-icon-feedback {
    margin: 2px auto 0;
}

.iduid-text-small {
    font-size: 12px;
}

.iduid-text-with-marginTop{
   margin-top: calc(var(--iduid--spacer--sm) * -1);
}

/* buttons */

.iduid-link {
    background-color: var(--iduid--color--white);
    border: 1px solid  var(--iduid--color--blue);
    border-radius: var(--iduid--BorderRadius--sm);
    color: var(--iduid--color--blue);
    cursor: pointer;
    font-family: var(--iduid--FontFamily--sans-serif);
    font-weight: var(--iduid--FontWeight--semi-bold);
    line-height: var(--iduid--LineHeight--sm);
    padding: var(--iduid--spacer--md);
    text-align: center;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
}

.iduid-link:hover,
.iduid-link:active,
.iduid-link:focus,
.iduid-link:visited {
    background-color: var(--iduid--color--white);
    color: var(--iduid--color--blue);
}

.iduid-link.iduid-link-primary {
    background: var(--iduid--color--blue);
    border: 1px solid  var(--iduid--color--blue);
    color:  var(--iduid--color--white);
}
.iduid-link.iduid-link-primary:hover {
    background-color: var(--iduid--primary--BackgroundColor--hover);
    border: 1px solid  var(--iduid--primary--BackgroundColor--hover);
    color: var(--iduid--color--white);
}
.iduid-link.iduid-link-primary:active {
    background-color: var(--iduid--primary--BackgroundColor--active);
    border: 1px solid  var(--iduid--primary--BackgroundColor--hover);
}

/* ==========================================================================
    type "dialog"
   ========================================================================== */

.iduid-dialog {
    animation: show 0.8s ease normal;
    -webkit-animation: show 0.8s ease normal;
    background-color: #fff;
    border: none;
    color: var(--iduid--color--dark-gray);
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    width: 100%;

    /* "global resets" like
            * { margin:0 }
        are possible on host-pages like west.
        our css must be able to work correctly even with such styles in markup... */
    margin: auto auto 0 auto;
}

.iduid-dialog a:focus-visible {
    outline: none;
}

.iduid-dialog-close {
    cursor: pointer;
    height: 30px;
    margin: 0 5px;
    padding: 0 15px;
    position: absolute;
    right: 15px;
    top: 18px;
    width: 30px;
    z-index: 1;
}

.iduid-dialog-close:before {
    background: url("/sso/static/login/common/img/close-8fe968e26e5ba6023668c40f32c67a8a.svg?20231205") no-repeat;
    background-size: 0.75em 0.75em;
    content: " ";
    height: 0.75em;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 0.75em;
}

@-webkit-keyframes show {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}

.iduid-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

/** View for screens larger than 48em (= 500px) **/
@media screen and (min-width: 31.25em) {
    .iduid-content-innen {
        grid-template-columns: 330px;
    }
}

/** View for screens larger than 48em (= 768px) **/
@media screen and (min-width: 48.063em) {
    .iduid-dialog {
        margin-bottom: auto;
        width: 575px;
    }

    .iduid-links {
        gap: var(--iduid--spacer--md);
        grid-template-columns: 1fr 1fr;
    }
}

/* login icon tooltip */

.iduid-tooltip-text {
    position: absolute;
    background: var(--iduid--color--light-gray);
    border-radius: var(--iduid--BorderRadius--sm);
    padding: 1px var(--iduid--spacer--2xs) 1px var(--iduid--spacer--2xs);
    width: max-content;
    max-width: 95vw;
    margin-left: 10px;
    box-shadow: 0 4px 4px 0 #00000033;
    z-index: 2147483647; /* 1 more than the value of z-index for WEST header to make the tooltip visible */
    visibility: hidden;
}

.iduid-tooltip-story-page {
    & > .iduid-tooltip-text {
        padding: calc(var(--iduid--spacer--2xs) / 2) var(--iduid--spacer--2xs) calc(var(--iduid--spacer--2xs) / 2) var(--iduid--spacer--2xs);
        z-index: 2147483647; /* 1 more than the value of z-index for WEST header to make the tooltip visible */
    }
}

.iduid-tooltip-homepage {
    & > .iduid-tooltip-text {
        z-index: 41; /* 1 more than the value of z-index for WEST header to make the tooltip visible */
    }
}

.iduid-tooltip-text h3 {
    color: white;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.iduid-tooltip-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #4d4d4d;
    z-index: 2147483647;
    position: absolute;
    visibility: hidden;
}

.iduid-tooltip-content {
    position: relative;
}