/* Imports */
@import url("build/css/light-1536.03cd3f1a84f3.css");
@import url("fonts/iDM-icons-font/style.ce9007e74815.css");

@import url("components/accordion.86c5ed56f8fc.css");
@import url("components/badge.d76c30803dc9.css");
@import url("components/breadcrumbs.274837918229.css");
@import url("components/button-chip.57d8f072aba7.css");
@import url("components/button-segmented.74e11e6ae725.css");
@import url("components/button-special.d3e45cb5d623.css");
@import url("components/button.14c945b6f8ad.css");
@import url("components/card.7b17a913e197.css");
@import url("components/card-article.1e5cf7c54102.css");
@import url("components/card-cells.849f06f928be.css");
@import url("components/checkbox.07da5eace7ee.css");
@import url("components/divider.efea1f560fb6.css");
@import url("components/datepicker.74a29c3ddfa1.css");
@import url("components/dragdropfield.bbc3a28c7f45.css");
@import url("components/energylabel.7b182d255f9e.css");
@import url("components/footer.4e43736c92a0.css");
@import url("components/header-smart.473841fc1271.css");
@import url("components/input.adc0588759b5.css");
@import url("components/link.c28cf365bbc5.css");
@import url("components/modal.d74e3cc339e0.css");
@import url("components/nav.1dce49f01b81.css");
@import url("components/nav-list.ddf612d2e67f.css");
@import url("components/notice.817761511711.css");
@import url("components/paging.09f1e0ec6f08.css");
@import url("components/progressbar.4e203aa22ae8.css");
@import url("components/radiobutton.7a3304f96942.css");
@import url("components/row-product.6d5fe912ec2e.css");
@import url("components/select.fa4b993a2caf.css");
@import url("components/stepper.062eee80bf11.css");
@import url("components/tabbar.e062b21fc95b.css");
@import url("components/tag.b7d23144273f.css");
@import url("components/toast.b139fa5e725a.css");
@import url("components/toggle.3096e35e6037.css");
@import url("components/tooltip.3433cd431f9e.css");


/* General */
@font-face {
    font-family: 'Aller';
    src:    url("fonts/Aller_Rg.d67e43074abc.ttf?ai0dxq") format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

* {
  font-family: 'Aller';
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

*:focus,
*:focus-visible,
*:focus-within {
  outline: none;
}

a {
    text-decoration: none;
}

.container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.container > div, .container > form {
    width: 100%;
    padding-left: calc(var(--idmSemSpacingContainerInsetHorizontal150));
    padding-right: calc(var(--idmSemSpacingContainerInsetHorizontal150));
    max-width: calc(var(--idmSemGridMaxWidth) + (var(--idmSemSpacingContainerInsetHorizontal150) * 2));
}



@media screen and (max-width: 1536px)  {
    .footer {
        flex-direction: column;
    }
}

@media screen and (max-width: 1280px)  {
    .card-articles {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media screen and (max-width: 1024px)  {

}

@media screen and (max-width: 768px)  {
    .card-articles {
        grid-template-columns: 1fr;
    }

    .progressbar-connectline {
        width: 100%;
    }
}

@media screen and (max-width: 768px)  {
    .footer-left {
        gap: calc(var(--idmCompFooterInlineMd));
        flex-direction: column;
    }

    /* DragDrop Field*/
    .dragdropfield {
        padding: calc(var(--idmCompDragDropFieldInsetXlVer)) calc(var(--idmCompDragDropFieldInsetLgHor));
        flex-direction: column;
    }
    .dragdropfield > i {
        font-size: calc(var(--idmCompDragDropFieldSizeIcon));
        width: calc(var(--idmCompDragDropFieldSizeIcon));
        height: calc(var(--idmCompDragDropFieldSizeIcon));
    }
    .dragdropfield-stack-sm {
        text-align: center;
    }
    .dragdropfield-text-title {font: var(--idmCompDragDropFieldTypographyTitle);}
    .dragdropfield-text-body {font: var(--idmCompDragDropFieldTypographyBody);}

    /* Toast */
    .toast-inline > a:nth-child(3) {justify-content: flex-end;}
    .toast-inline {
        flex-direction: column;
        width: 100%;
        align-items: unset;
    }
    .toast > .toast-icon-sm {
        position: absolute;
        top: calc(var(--idmCompToastScreenSmartInsetMd));
        right: calc(var(--idmCompToastScreenSmartInsetLg));
    }
}

@media screen and (max-width: 490px)  {
    .footer-right {
        flex-wrap: wrap;
    }

    .footer-right:nth-child(1) {
        width: 100%;
    }
}
