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

.iduid-dialog {
    --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--color--dark-blue: #216dbe;


    --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--dark-blue);
    --iduid--primary--BackgroundColor--active:var(--iduid--color--dark-blue);

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

    --iduid--FontWeight--normal: 400;
    --iduid--FontWeight--semi-bold: 600;
    --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: 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-bold */
@font-face {
    font-display: fallback;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    src: url("https://idcdn.de/static-files/common/fonts/Poppins/Poppins600normal.woff2?20231205") format("woff2"), /* Super Modern Browsers */
    url("https://idcdn.de/static-files/common/fonts/Poppins/Poppins600normal.woff?20231205") 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-links,
.iduid-information {
    display: grid;
    grid-auto-flow: row;
}

.iduid-content {
    gap: var(--iduid--spacer--md);
    text-align: center;
}
.iduid-links,
.iduid-information {
    gap: var(--iduid--spacer--2xs);
}

.iduid-headline {
    font-size: var(--iduid--FontSize--md);
    font-weight: var(--iduid--FontWeight--semi-bold);
    line-height: var(--iduid--LineHeight--sm);
    /* 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--semi-bold);
}

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

.iduid-links {
    grid-template-columns: 1fr;
    line-height: var(--iduid--LineHeight--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:focus-visible {
    outline: none;
}

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

/*
 * buttons
 */

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

.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);
}

/*
 * register
 */

.iduid-register {
    margin: 0 auto;
}

/* ==========================================================================
    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-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.svg?20231205") no-repeat;
    background-size: 12px 12px;
    content: " ";
    height: 12px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 12px;
}

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

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

@media screen and (min-width: 48.063em) {
    .iduid-dialog {
        margin-bottom: auto;
        width: 700px;
    }

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