.d-none{
    display: none !important;
}
.d-block{
    display: block !important;
}

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --tw-shadow-color: 0 0 #0000;
}

*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

:host, html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: Nunito, sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #FFF9F5;
    color: #374151;
}

body {
    margin: 0;
    line-height: inherit;
    height: 100%;
}

.kodo-layout{
    height: 100%;
}

.wrapper{
    max-height: 100vh;
    width: 100%;
    display: block;
    overflow: auto;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
    height: 100%;
}

.content-wrapper{
    position: relative;
    display: flex;
    min-height: 100vh;
    flex: 1 1 0%;
    justify-content: center;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.content{
    position: relative;
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 28rem;
    flex-direction: column;
    border-right-width: 1px;
    border-left-width: 1px;
    border-color: rgb(255 237 213 / 0.5);
    background-color: rgb(255 249 245 / var(--tw-bg-opacity, 1));
    font-family: Nunito, sans-serif;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    height: 100%;
}

.kodo-page-main-content-panel{
    height: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    flex: 1;
    flex-direction: column;
}