:where(body) {
    display: block
}

:where(body) :where(*,*::before,*::after) {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box
}

:where(body) :where(button,input,textarea,fieldset) {
    border: none;
    background-color: transparent;
    font: inherit
}

:where(body) :where(input,textarea) {
    outline: none
}

:where(body) input:-webkit-autofill, :where(body) input:-webkit-autofill:hover, :where(body) input:-webkit-autofill:focus, :where(body) input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--color-white, #FFFFFF) inset
}

:where(body) input:-internal-autofill-selected, :where(body) textarea:-internal-autofill-selected {
    box-shadow: 0 0 0 1000px var(--color-white, #FFFFFF) inset
}

:where(body) input::-webkit-outer-spin-button, :where(body) input::-webkit-inner-spin-button, :where(body) textarea::-webkit-outer-spin-button, :where(body) textarea::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

:where(body) input[type=password]::-ms-reveal {
    display: none
}

:where(body) :where(button,input[type=submit]) {
    cursor: pointer
}

:where(body) :where([data-hidden-default]) {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

:where(body) :where(li) {
    list-style: none
}

:where(body) :where(img,svg,canvas) {
    display: block
}

:where(body) :where(svg) {
    fill: currentColor
}

:where(body) :where(img) {
    max-width: 100%
}

:where(body) :where(dialog) {
    border: none
}

:where(body) :where([data-img-component]) {
    border-radius: inherit
}

:where(body) {
    font: 400 16px/1.5 Open Sans,serif;
    color: var(--color-slate-900, #353841);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%
}

:where(body) :where(label,a,strong) {
    display: inline-block
}

:where(body) :where(label) {
    color: var(--color-black, #000000);
}

:where(body) :where(input,textarea)::-webkit-input-placeholder {
    font-family: Open Sans,serif;
    font-size: inherit;
    color: var(--color-gray-400, #A0A3AB);
}

:where(body) :where(h1) {
    font-size: 24px
}

:where(body) :where(a) {
    text-decoration: none;
    color: inherit
}

:where(body) :where(span[data-inline-text]) {
    font: inherit;
    display: inline-block;
}

.app-container {
    width: 100%;
    height: 100%;
    max-width: var(--takeda-connect-max-width, 100%);
    display: grid;
    grid-template-rows: var(--takeda-connect-rows);
    position: fixed;
    top: 0;
    right: 0;
    transition: all .3s ease-in-out;
    container: takeda-app/inline-size;
    background: var(--color-blue-50, #EFF5F9);
}

@media (max-width: 767px) {
    .app-container {
        height: 100dvh
    }
}

.app-container > div {
    overflow: hidden;
    grid-row: var(--colapse-div-grid-row)
}

.layout {
    width: 100%;
    height: var(--layout-height);
    background: var(--color-white-40, #FFFFFF66);
    backdrop-filter: blur(100px);
    transition: all .2s ease-in-out;
}

.layout--float {
    --layout-height: calc(100% - 64px)
}

@media (max-width: 767px) {
    .layout {
        --layout-padding-inline: 15px
    }
}

@container takeda-app (max-width: 490px) {
    .layout {
        --layout-padding-inline: 15px
    }
}

.layout__container {
    width: 100%;
    height: 100%
}

@container takeda-app (max-width: 490px) {
    .layout__container {
        padding-block-start: 10px
    }
}

.layout__scroll {
    padding-inline: var(--layout-scroll-p-inline);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

.layout__scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    border-radius: 9999px
}

.layout__scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-400, #A0A3AB);
    border-radius: 9999px
}

.layout__scroll::-webkit-scrollbar-track {
    background-color: var(--color-gray-25, #F5F5F5);
}

@container takeda-app (min-width: 491px) {
    .layout__scroll {
        margin-right: 8px;
        padding: 0 32px;
        --layout-scroll-p-inline: 32px 24px
    }
}

@container takeda-app (max-width: 490px) {
    .layout__scroll {
        --layout-scroll-p-inline: 10px
    }
}

.home {
    height: 100%;
}