/* These are the only tailwind styles that are needed for the transition in index.tsx */
/* Including other tailwind libraries like base or components may break the styles of Magnolia rendered components */
.personalized-section-container .invisible {
    visibility: hidden
}
.personalized-section-container .absolute {
    position: absolute
}
.personalized-section-container .relative {
    position: relative
}
.personalized-section-container .top-0 {
    top: 0px
}
.personalized-section-container .float-right {
    float: right
}
.personalized-section-container .float-left {
    float: left
}
.personalized-section-container .mx-auto {
    margin-left: auto;
    margin-right: auto
}
.personalized-section-container .mb-0\.5 {
    margin-bottom: 4px
}
.personalized-section-container .mb-1 {
    margin-bottom: 8px
}
.personalized-section-container .mb-2 {
    margin-bottom: 16px
}
.personalized-section-container .mb-4 {
    margin-bottom: 32px
}
.personalized-section-container .mr-1 {
    margin-right: 8px
}
.personalized-section-container .mt-\[12px\] {
    margin-top: 12px
}
.personalized-section-container .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}
.personalized-section-container .hidden {
    display: none
}
.personalized-section-container .h-0 {
    height: 0px
}
.personalized-section-container .h-inherit {
    height: inherit
}
.personalized-section-container .w-4 {
    width: 32px
}
.personalized-section-container .w-full {
    width: 100%
}
.personalized-section-container .min-w-44 {
    min-width: 352px
}
.personalized-section-container .min-w-\[300px\] {
    min-width: 300px
}
.personalized-section-container .flex-1 {
    flex: 1 1 0%
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
.personalized-section-container .animate-fadeIn {
    animation: fadeIn 0.5s ease-in-out 0ms forwards
}
.personalized-section-container .cursor-pointer {
    cursor: pointer
}
.personalized-section-container .rounded {
    border-radius: 8px
}
.personalized-section-container .rounded-full {
    border-radius: 9999px
}
.personalized-section-container .bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(0 115 185 / var(--tw-bg-opacity, 1))
}
.personalized-section-container .bg-blue-50\/10 {
    background-color: rgb(0 115 185 / 0.1)
}
.personalized-section-container .bg-transparent {
    background-color: transparent
}
.personalized-section-container .bg-opacity-10 {
    --tw-bg-opacity: 0.1
}
.personalized-section-container .fill-green-40 {
    fill: #48ce65
}
.personalized-section-container .fill-orange-40 {
    fill: #f58331
}
.personalized-section-container .p-2 {
    padding: 16px
}
.personalized-section-container .p-\[12px\] {
    padding: 12px
}
.personalized-section-container .pt-4 {
    padding-top: 32px
}
.personalized-section-container .text-5 {
    font-size: 20px;
    line-height: 1.25
}
.personalized-section-container .font-semibold {
    font-weight: 600
}
.personalized-section-container .leading-\[1\.5\] {
    line-height: 1.5
}
.personalized-section-container .text-blue-50 {
    --tw-text-opacity: 1;
    color: rgb(0 115 185 / var(--tw-text-opacity, 1))
}
.personalized-section-container .text-gray-40 {
    --tw-text-opacity: 1;
    color: rgb(182 190 194 / var(--tw-text-opacity, 1))
}
.personalized-section-container .opacity-0 {
    opacity: 0
}
.personalized-section-container .shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}
.personalized-section-container .outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px
}
.personalized-section-container .ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.personalized-section-container .ring-blue-50 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(0 115 185 / var(--tw-ring-opacity, 1))
}
.personalized-section-container .ring-offset-1 {
    --tw-ring-offset-width: 1px
}
.personalized-section-container .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.personalized-section-container .transition-height {
    transition-property: height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms
}
.personalized-section-container .ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.personalized-section-container .p-inset-sm {
    padding: 12px
}
.personalized-section-container .p-squish-sm {
    padding: 8px 16px
}
.personalized-section-container .hover\:bg-blue-50\/20:hover {
    background-color: rgb(0 115 185 / 0.2)
}
.personalized-section-container .focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
.personalized-section-container .active\:ring-2:active {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}
@media (min-width: 75em) {
    .personalized-section-container .lg\:mr-0 {
        margin-right: 0px
    }
    .personalized-section-container .lg\:flex {
        display: flex
    }
    .personalized-section-container .lg\:hidden {
        display: none
    }
}
.personalized-section-container .\[\&_svg\]\:h-3 svg {
    height: 24px
}
.personalized-section-container .\[\&_svg\]\:w-3 svg {
    width: 24px
}
@media (min-width: 75em) {
    .personalized-section-container .lg\:\[\&_svg\]\:h-2 svg {
        height: 16px
    }
    .personalized-section-container .lg\:\[\&_svg\]\:w-2 svg {
        width: 16px
    }
}