/**, ::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: }
::backdrop { --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: }

*,::after,::before { box-sizing:border-box; border-width:0; border-style:solid; border-color:#e5e7eb }
::after,::before { --tw-content:'' }
:host,html { line-height:1.5; -webkit-text-size-adjust:100%; -moz-tab-size:4; tab-size:4; font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings:normal; font-variation-settings:normal; -webkit-tap-highlight-color:transparent }
body { margin:0; line-height:inherit;box-sizing:border-box;background:#fff; }
hr { height:0; color:inherit; border-top-width:1px }
abbr:where([title]) { -webkit-text-decoration:underline dotted; text-decoration:underline dotted }
h1,h2,h3,h4,h5,h6 { font-size:inherit; font-weight:inherit }
a { color:inherit; text-decoration:inherit }
b,strong { font-weight:bolder }
code,kbd,pre,samp { font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings:normal; font-variation-settings:normal; font-size:1em }
small { font-size:80% }
sub,sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline }
sub { bottom:-.25em }
sup { top:-.5em }
form { width:100%; }
table { text-indent:0; border-color:inherit; border-collapse:collapse }
button,input,optgroup,select,textarea { font-family:inherit; font-feature-settings:inherit; font-variation-settings:inherit; font-size:100%; font-weight:inherit; line-height:inherit; letter-spacing:inherit; color:inherit; margin:0; padding:0 }
button,select { text-transform:none }
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) { -webkit-appearance:button; background-color:transparent; background-image:none }
:-moz-focusring { outline:auto }
:-moz-ui-invalid { box-shadow:none }
progress { vertical-align:baseline }
::-webkit-inner-spin-button,::-webkit-outer-spin-button { height:auto }
[type=search] { -webkit-appearance:textfield; outline-offset:-2px }
::-webkit-search-decoration { -webkit-appearance:none }
::-webkit-file-upload-button { -webkit-appearance:button; font:inherit }
summary { display:list-item }
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre { margin:0 }
fieldset { margin:0; padding:0 }
legend { padding:0 }
menu,ol,ul { list-style:none; margin:0; padding:0 }
dialog { padding:0 }
textarea { resize:vertical }
input::placeholder,textarea::placeholder { opacity:1; color:#9ca3af }
[role=button],button { cursor:pointer }
:disabled { cursor:default }*/
/*audio,canvas,embed,iframe,img,object,svg,video { display:block; vertical-align:middle }*/
img,video { max-width:100%; height:auto }
[hidden]:where(:not([hidden=until-found])) { display:none }
.absolute { position:absolute }
.relative { position:relative }
.sticky { position:sticky }
.inset-0 { inset:0px }
.top-0 { top:0px }
.bot-0 { bottom:0px }
.z-10 { z-index:10 }
.m-0-auto {	margin:0 auto;	}
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-1 { margin-left:0.25rem; margin-right:0.25rem }
.mb-1 { margin-bottom:0.25rem }
.mb-12 { margin-bottom:3rem }
.mb-16 { margin-bottom:4rem }
.mb-2 { margin-bottom:0.5rem }
.mb-3 { margin-bottom:0.75rem }
.mb-4 { margin-bottom:1rem }
.mb-5 { margin-bottom:1.25rem }
.mb-6 { margin-bottom:1.5rem }
.mt-1 { margin-top:0.25rem }
.mt-3 { margin-top:0.75rem }
.mt-8 { margin-top:2rem }
.mt-auto { margin-top:auto }
.m-auto { margin:0 auto }
.flex { display:flex }
.grid { display:grid }
.h-2 { height:0.5rem }
.h-20 { height:4rem }
.h-28 { height:7rem }
.h-40 { height:10rem }
.h-48 { height:12rem }
.h-\[14px\] { height:14px }
.h-\[18px\] { height:18px }
.h-\[2\.5px\] { height:2.5px }
.h-\[800px\] { height:800px }
.h-full { height:100% }
.min-h-\[45px\] { min-height:45px }
.min-h-screen { min-height:100vh }
.w-16 { width:4rem }
.w-2 { width:0.5rem }
.w-24 { width:6rem }
.w-48 { width:12rem }
.w-\[100\%\] { width:100% }
.w-\[18px\] { width:18px }
.w-\[20\%\] { width:20% }
.w-\[33\%\] { width:33% !important;}
.w-\[25\%\] { width:25% }
.w-\[40\%\] { width:40% }
.w-\[50\%\] { width:50% }
.w-\[60\%\] { width:60% }
.w-\[60\%\] { width:60% }
.w-\[75\%\] { width:75% }
.w-\[80\%\] { width:80% }
.w-\[80px\] { width:80px }
.w-full { width:100% }
.flex-1 { flex:1 1 0% }
.flex-333 { flex:0 0 33.3333333% }
.flex-4 { flex:0 0 25% }
.flex-\[2\] { flex:2 }
.shrink-0 { flex-shrink:0 }
.cursor-pointer { cursor:pointer }
.resize-none { resize:none }
.grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)) }
.grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)) }
.flex-col { flex-direction:column }
.items-start { align-items:flex-start }
.items-center { align-items:center }
.justify-center { justify-content:center }
.justify-between { justify-content:space-between }
.justify-around { justify-content:space-around }
.gap-\[5px\] { gap:5px; }
.gap-\[10px\] { gap:10px; }
.gap-\[15px\] { gap:15px; }
.gap-0\.5 { gap:0.125rem }
.gap-1 { gap:0.25rem }
.gap-2\.5 { gap:0.625rem }
.gap-1\.5 { gap:0.375rem }
.gap-2 { gap:0.5rem }
.gap-3 { gap:0.75rem }
.gap-8 { gap:2rem }
.gap-\[12px\] { gap:12px }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0; margin-top:calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom:calc(0.375rem * var(--tw-space-y-reverse)) }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0; margin-top:calc(0.875rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom:calc(0.875rem * var(--tw-space-y-reverse)) }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0; margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom:calc(1rem * var(--tw-space-y-reverse)) }
.space-y-7 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0; margin-top:calc(1.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom:calc(1.75rem * var(--tw-space-y-reverse)) }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse:0; margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom:calc(2rem * var(--tw-space-y-reverse)) }
.overflow-hidden { overflow:hidden }
.overflow-x-auto { overflow-x:auto }
.overflow-y-auto { overflow-y:auto }
.overflow-y-visible { overflow-y:visible }
.whitespace-nowrap { white-space:nowrap }
.rounded { border-radius:0.25rem !important; }
.rounded-\[2px\] { border-radius:2px !important; }
.rounded-full { border-radius:9999px !important; }
.rounded-lg { border-radius:0.5rem !important; }
.rounded-lg-t { border-radius:0.5rem 0.5rem 0 0 !important; }
.rounded-md { border-radius:0.375rem !important; }
.rounded-sm { border-radius:0.125rem !important; }
.rounded-xl { border-radius:0.75rem !important; }
.rounded-xl-t { border-radius:0.75rem 0.75rem 0 0 !important; }
.border { border-width:1px }
.border-\[1\.5px\] { border-width:1.5px }
.border-b-\[1\.5px\] { border-bottom-width:1.5px }
.border-t { border-top-width:1px }
.border-\[\#1A64B2\] { --tw-border-opacity:1; border-color:rgb(26 100 178 / var(--tw-border-opacity, 1)) }
.border-\[\#999\] { --tw-border-opacity:1; border-color:rgb(153 153 153 / var(--tw-border-opacity, 1)) }
.border-\[\#CCC\] { --tw-border-opacity:1; border-color:rgb(204 204 204 / var(--tw-border-opacity, 1)) }
.border-\[\#DDD\] { --tw-border-opacity:1; border-color:rgb(221 221 221 / var(--tw-border-opacity, 1)) }
.border-\[\#E5E5E5\] { --tw-border-opacity:1; border-color:rgb(229 229 229 / var(--tw-border-opacity, 1)) }
.border-\[\#EEE\] { --tw-border-opacity:1; border-color:rgb(238 238 238 / var(--tw-border-opacity, 1)) }
.border-gray-100 { --tw-border-opacity:1; border-color:rgb(243 244 246 / var(--tw-border-opacity, 1)) }
.bg-\[\#1A64B2\] { --tw-bg-opacity:1; background-color:rgb(26 100 178 / var(--tw-bg-opacity, 1)) !important; }
.bg-\[\#8468AE\] { --tw-bg-opacity:1; background-color:rgb(132 104 174 / var(--tw-bg-opacity, 1)) }
.bg-\[\#F2F2F2\] { --tw-bg-opacity:1; background-color:rgb(242 242 242 / var(--tw-bg-opacity, 1)) }
.bg-\[\#F4F8FC\] { --tw-bg-opacity:1; background-color:rgb(244 248 252 / var(--tw-bg-opacity, 1)) }
.bg-\[\#F5F2EF\] { --tw-bg-opacity:1; background-color:rgb(245 242 239 / var(--tw-bg-opacity, 1)) }
.bg-\[\#F5F5F5\] { --tw-bg-opacity:1; background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1)) }
.bg-\[\#EFA021\] { --tw-bg-opacity:1; background-color:rgb(239 160 33 / var(--tw-bg-opacity, 1)) }
.bg-\[\#F2F2F2\] { --tw-bg-opacity:1; background-color:rgb(242 242 242 / var(--tw-bg-opacity, 1)) }
.bg-\[\#F4F4F4\] { --tw-bg-opacity:1; background-color:rgb(244 244 244 / var(--tw-bg-opacity, 1)) }
.bg-\[\#F6F4F1\] { --tw-bg-opacity:1; background-color:rgb(246 244 241 / var(--tw-bg-opacity, 1)) }
.bg-\[\#FFF\] { --tw-bg-opacity:1; background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)) }
.bg-gray-100 { --tw-bg-opacity:1; background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1)) }
.bg-gray-800 { --tw-bg-opacity:1; background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1)) }
.bg-white { --tw-bg-opacity:1; background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)) }
.bg-transparent { background-color:transparent; }
.p-0\.5 { padding:0.125rem }
.p-1 { padding:0.25rem }
.p-2 { padding:0.5rem }
.p-3 { padding:0.75rem }
.p-4 { padding:1rem }
.p-5 { padding:1.25rem }
.p-8 { padding:2rem }
.px-0\.5 { padding-left:0.125rem; padding-right:0.125rem }
.px-1 { padding-left:0.25rem; padding-right:0.25rem }
.px-2 { padding-left:0.5rem; padding-right:0.5rem }
.px-3 { padding-left:0.75rem; padding-right:0.75rem }
.px-4 { padding-left:1rem; padding-right:1rem }
.px-5 { padding-left:1.25rem; padding-right:1.25rem }
.px-6 { padding-left:1.5rem; padding-right:1.5rem }
.py-1 { padding-top:0.25rem; padding-bottom:0.25rem }
.py-1\.5 { padding-top:0.4325rem; padding-bottom:0.325rem }
.py-2 { padding-top:0.425rem; padding-bottom:0.425rem }
.py-2\.5 { padding-top:0.625rem; padding-bottom:0.625rem }
.py-3\.5 { padding-top:0.875rem; padding-bottom:0.875rem }
.py-4 { padding-top:1rem; padding-bottom:1rem }
.py-6 { padding-top:1.5rem; padding-bottom:1.5rem }
.pb-6 { padding-bottom:1.5rem }
.pb-10 { padding-bottom:2.5rem }
.pb-2 { padding-bottom:0.5rem }
.pb-4 { padding-bottom:1rem }
.pl-1\.5 { padding-left:0.375rem }
.pl-2 { padding-left:0.5rem }
.pr-2 { padding-right:0.5rem }
.pt-2 { padding-top:0.5rem }
.pt-20 { padding-top:5rem }
.pt-24 { padding-top:6rem }
.pt-4 { padding-top:1rem }
.pt-5 { padding-top:1.25rem }
.text-center { text-align:center }
.text-right { text-align:right }
.font-sans { font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" }
.text-\[10px\] { font-size:10px }
.text-\[11px\] { font-size:11px }
.text-\[13px\] { font-size:13px }
.text-\[14px\] { font-size:14px }
.text-\[15px\] { font-size:15px }
.text-\[16px\] { font-size:16px }
.text-\[17px\] { font-size:17px }
.text-\[18px\] { font-size:18px }
.text-\[20px\] { font-size:20px }
.text-\[24px\] { font-size:24px }
.text-\[22px\] { font-size:22px }
.text-xs { font-size:0.75rem; line-height:1rem }
.font-black { font-weight:900 }
.font-bold { font-weight:700 }
.font-medium { font-weight:500 }
.leading-\[1\.4\] { line-height:1.4 }
.leading-none { line-height:1 }
.tracking-tight { letter-spacing:-0.025em }
.text-\[\#111\] { --tw-text-opacity:1; color:rgb(17 17 17 / var(--tw-text-opacity, 1)) }
.text-\[\#1A64B2\] { --tw-text-opacity:1; color:rgb(26 100 178 / var(--tw-text-opacity, 1)) }
.text-\[\#222\] { --tw-text-opacity:1; color:rgb(34 34 34 / var(--tw-text-opacity, 1)) }
.text-\[\#333\] { --tw-text-opacity:1; color:rgb(51 51 51 / var(--tw-text-opacity, 1)) }
.text-\[\#666\] { --tw-text-opacity:1; color:rgb(102 102 102 / var(--tw-text-opacity, 1)) }
.text-\[\#8468AE\] { --tw-text-opacity:1; color:rgb(132 104 174 / var(--tw-text-opacity, 1)) }
.text-\[\#999\] { --tw-text-opacity:1; color:rgb(153 153 153 / var(--tw-text-opacity, 1)) }
.text-\[\#D32F2F\] { --tw-text-opacity:1; color:rgb(211 47 47 / var(--tw-text-opacity, 1)) }
.text-\[\#EFA021\] { --tw-text-opacity:1; color:rgb(239 160 33 / var(--tw-text-opacity, 1)) }
.text-gray-300 { --tw-text-opacity:1; color:rgb(209 213 219 / var(--tw-text-opacity, 1)) }
.text-gray-400 { --tw-text-opacity:1; color:rgb(156 163 175 / var(--tw-text-opacity, 1)) }
.text-gray-500 { --tw-text-opacity:1; color:rgb(107 114 128 / var(--tw-text-opacity, 1)) }
.text-gray-600 { --tw-text-opacity:1; color:rgb(75 85 99 / var(--tw-text-opacity, 1)) }
.text-gray-700 { --tw-text-opacity:1; color:rgb(55 65 81 / var(--tw-text-opacity, 1)) }
.text-gray-800 { --tw-text-opacity:1; color:rgb(31 41 55 / var(--tw-text-opacity, 1)) }
.text-white { --tw-text-opacity:1; color:rgb(255 255 255 / var(--tw-text-opacity, 1)) }
.shadow-\[0_4px_14px_rgba\(239\2c 160\2c 33\2c 0\.3\)\] { --tw-shadow:0 4px 14px rgba(239,160,33,0.3); --tw-shadow-colored:0 4px 14px var(--tw-shadow-color); box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) }
.shadow-sm { --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color); box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) }
.shadow-xl { --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) }
.placeholder\:text-gray-300::placeholder { --tw-text-opacity:1; color:rgb(209 213 219 / var(--tw-text-opacity, 1)) }
.placeholder\:text-gray-400::placeholder { --tw-text-opacity:1; color:rgb(156 163 175 / var(--tw-text-opacity, 1)) }
.placeholder\:text-gray-500::placeholder { --tw-text-opacity:1; color:rgb(107 114 128 / var(--tw-text-opacity, 1)) }
.focus\:border-\[\#1A64B2\]:focus { --tw-border-opacity:1; border-color:rgb(26 100 178 / var(--tw-border-opacity, 1)) }
.focus\:outline-none:focus { outline:2px solid transparent; outline-offset:2px }
.text-white { --tw-text-opacity:1; color:rgb(255 255 255 / var(--tw-text-opacity, 1)) }
.shadow-xl { --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) }
.placeholder\:text-\[\#333\]::placeholder { --tw-text-opacity:1; color:rgb(51 51 51 / var(--tw-text-opacity, 1)) }
.placeholder\:text-\[\#999\]::placeholder { --tw-text-opacity:1; color:rgb(153 153 153 / var(--tw-text-opacity, 1)) }
.focus\:outline-none:focus { outline:2px solid transparent; outline-offset:2px }

/*.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}*/

.steps {
	position:absolute;
	top:20px;
	right:20px;
	z-index:11;
}

.botbuttons {
	
	position:fixed;
	width:calc(100% - 48px);
	bottom:20px;
	z-index:13;
}

.botbuttons1 {
	position:fixed;
	bottom:0;
	left:8px;
	z-index:13;
	width:calc(100% - 16px);
	box-sizing:border-box;
	--tw-bg-opacity: 1;
    background-color: rgb(246 244 241 / var(--tw-bg-opacity, 1));
	border-top:0
}

.botbuttons2 {
	position:fixed;
	bottom:0;
	left:8px;
	z-index:13;
	width:calc(100% - 16px);
	box-sizing:border-box;
	background:#fff;
	border-top:0;
	padding-top:5px;
}

#lays {
	max-width:650px;
	margin:0 auto;
}

#lays2 {
	max-width:650px;
	margin:0 auto;
	height:500px;
}

.sections {
    display: flex;
}

#section2 .chatImagecontainer {

	width:100%;
	height:250px;
	overflow-y:auto;
	position : relative;
}

#section2 .chatImagecontainer .subtitles {
	
	width:80%;
	margin: 0 0 20px;
	border-radius:14px;
	padding:10px;
	background:#fbe2cd;
	font-size:12pt;
}

#section2 .chatImagecontainer .subresponse {

	width:80%;
	margin: 0 0 40px 20%;
	border-radius:14px;
	padding:10px;
	border:1px solid #fbe2cd;
	font-size:12pt;
	position : relative;
}

#section2 .chatImagecontainer .subresponse .subrespimg {
	width:100%;
	text-align:center;
	position : relative;
}

#section2 .chatImagecontainer .subresponse .imgdown {
	
	position : absolute;
	bottom:5px;
	right:5px;
	padding:4px;
	background:#f00;
	color:#fff;
	font-size:10px;
	border-radius:14px;
}

.bubble  .imgdown {
	
	position : absolute;
	bottom:5px;
	right:0;
	padding:4px;
	background:#f00;
	color:#fff;
	font-size:10px;
	border-radius:14px;
}

#section2 .chatImagecontainer .subresponse .subrespimg img {
	
	max-width:80%;
	max-height:50px;
}

#section2 .chatcontainer {

	width:100%;
	height:350px;
	overflow-y:auto;
	position : relative;
}

#section2 .chatcontainer .subtitles {
	
	width:80%;
	margin: 0 0 20px 20%;
	border-radius:14px;
	padding:10px;
	background:#fbe2cd;
	font-size:12pt;
}

#section2 .chatcontainer .subresponse {

	width:100%;
	margin: 0 0 40px 0;
	border-radius:14px;
	padding:10px;
	border:0 solid #fbe2cd;
	font-size:12pt;
	position : relative;
}

h1#songtitles, h1#imagetitles {
	font-size:1.5em;
}

.control-container {
    display: flex;
    position: relative;
	margin-right:10px;
}

.control-container:nth-child(4n) {
	margin-right:0;
}

.control-container + .control-container {
    /*margin-top: 0.7em;*/
}

#area-progress progress {
	width: 100%;
	height: 20px;
	border-radius: 10px;
	background-color: #eee; /* 배경색 */
	margin:20px auto;
}
#area-progress progress::-webkit-progress-bar {
  background-color: #f3f3f3;
  border-radius: 10px;
}

#area-progress progress::-webkit-progress-value {
  background-color: #4caf50; /* 진행 부분 색상 */
  border-radius: 10px;
}

#area-progress progress::-moz-progress-bar {
  background-color: #4caf50;
  border-radius: 10px;
}

#area-progress label {
	font-size:1.2em;
	color:#4caf50;
}

.deco {
  width: 50px;
  height: 50px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
}

.deco2 {
  width: 100px;
  height: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  border-radius:12px;
}

.deco2-1 {
  width: 100px;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  border-radius:12px;
}
/* 안쪽부분의 디자인 변경 */
.deco::-webkit-color-swatch {
  border-radius: 30px;
  border: none;
}

/*input:range*/
[type="range"] {
    appearance: none;
    cursor: pointer;
    outline: none;
    width: 100%;
    height: 1.5rem; /* thumb의 height와 일치 */
    margin: 0; /* reset margin */
    padding: 0; /* reset padding */
    background-color: transparent;
}

/* thumb */
[type="range"]::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
    appearance: none;
    width: 1.5rem; /* height와 일치 */
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background-color: #007475;
    transition: all 0.15s ease-in-out;
    margin-top: calc((0.5rem - 1.5rem) * 0.5); /* calc((track의 height - thumb의 height) * 0.5) */
}
[type="range"]::-moz-range-thumb { /* 파이어폭스 */
    appearance: none;
    width: 1.5rem; /* height와 일치 */
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background-color: #007475;
    transition: all 0.15s ease-in-out;
}
[type="range"]:focus::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 116, 117, .4);
}
[type="range"]:focus::-moz-range-thumb { /* 파이어폭스 */
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 116, 117, .4);
}
[type="range"]::-webkit-slider-thumb:active { /* Webkit 기반 브라우저 */
    background-color: #99c7c7;
}
[type="range"]::-moz-range-thumb:active { /* 파이어폭스 */
    background-color: #99c7c7;
}

/* track */
[type="range"]::-webkit-slider-runnable-track { /* Webkit 기반 브라우저 */
    cursor: pointer;
    width: 100%;
    height: 0.5rem;
    background-color: #d3d9de;
    border-radius: 0.25rem;
}
[type="range"]::-moz-range-track { /* 파이어폭스 */
    cursor: pointer;
    width: 100%;
    height: 0.5rem;
    background-color: #d3d9de;
    border-radius: 0.25rem;
}

/* disabled 속성 적용 시 */
[type="range"]:disabled::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
    pointer-events: none;
    background-color: #8b9aa7;
}
[type="range"]:disabled::-moz-range-thumb { /* 파이어폭스 */
    background-color: #8b9aa7;
}


/* 체크박스 CSS */
.screen-reader { /* 스크린 리더를 고려해서 체크박스를 화면에서 숨김 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    margin: -1px;
    clip-path: inset(50%);
}
.label-box {
    position: relative;
}
.check-icon {
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid gray;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.check-icon::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 30%;
    height: 55%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-70%) rotateZ(40deg);
    border-right: 1.7px solid gray;
    border-bottom: 1.7px solid gray;
}
label:not(.upload-label, .form-label) {
    padding-left: 2.2em;
    position: relative;
    cursor: pointer;
}
[type="radio"]:checked + .label-box .check-icon {
    border-color:  yellowgreen;
    background-color: yellowgreen;
}
[type="radio"]:checked + .label-box .check-icon::before {
    border-color: #fff;
}
[type="checkbox"]:checked + .label-box .check-icon {
    border-color:  yellowgreen;
    background-color: yellowgreen;
}
[type="checkbox"]:checked + .label-box .check-icon::before {
    border-color: #fff;
}

/*chat*/
#selecttype { width:100%; height:40px; line-height:40px; display:flex; padding-left:20px; }
#chatbox { width:100%; height:400px;overflow-y:auto;background:#fff; display:flex; flex-direction:column; padding:20px; }

#promptbox {
	width: 100%;
    height: 550px;
    overflow-y: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px;
	white-space: pre-line;
	font-size:15px;
}
#chatbox.emojibox { height:310px; }
#chatbox .chatline { display:flex; margin-top:20px; margin-bottom:20px; align-items:flex-end; }
#chatbox .chatline img {  }
#chatbox .bubble { padding:10px 14px; border-radius:18px; max-width:85%; line-height:1.4; font-size:16px; white-space: pre-line;}
#chatbox .user { background:#0078d7; color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
#chatbox .ai { background:#e9ecef; color:#333; margin-right:auto; border-bottom-left-radius:4px;
.quiz-text {
    font-size: 28px;       /* 폰트 크기를 28픽셀로 대폭 확대! */
    font-weight: bold;     /* 글씨도 두껍게 강조 */
    display: block;        /* 줄바꿈이 자연스럽게 일어나도록 설정 */
    margin: 10px 0;        /* 위아래 여백을 줘서 퀴즈를 돋보이게 함 */
    letter-spacing: 2px;   /* 이모지 간격이 너무 붙지 않게 자간 조절 */
} }
.avatar { width:32px; height:32px; border-radius:50%; margin:0 8px; }
.smallbtn { color:#fff; position:absolute; top:10px; right:10px; font-size:10px; border-radius:12px; border:1px solid #fff; padding:3px; 8px;  }
  
#lays2 #inputArea { display:flex; margin-top:15px; padding:0 20px;}
#lays2 #userInput { flex:1; padding:10px; border:1px solid #ccc; border-radius:8px; }
#lays2 #sendBtn, #inputArea #sendBtn { background:#0078d7; color:#fff; border:none; border-radius:8px; padding:10px 16px; margin-left:8px; cursor:pointer; }
 
#selecttype select {
	border:1px solid rgb(204 204 204 / var(--tw-border-opacity, 1));
	border-radius:0.375rem !important;padding: .8em .5em;
}
 
/*deepar*/
#deepar-div {
	width: 640px;
	height: 480px;
	margin: 20px auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	background: #000;
}

.deepar canvas { border: 1px solid rgb(26 100 178 / var(--tw-bg-opacity, 1)); margin-top: 10px; width: 100%; max-width: 620px; height: auto; border-radius: 16px; }
.deepar .palette-box {
	display: inline-block;
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 10px;
	padding: 15px;
	margin: 15px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.deepar .palette-title { font-weight: bold; margin-bottom: 10px; }
.deepar .colors { display: flex; flex-wrap: wrap; justify-content: center; }
.deepar .color-btn {
	width: 50px; height: 50px; border-radius: 8px;
	margin: 5px; border: 2px solid #333; cursor: pointer;
}
.deepar .slider { width: 95%; margin: 10px 0 0 ; }

.tab{display:none}
.tab.on{display:block}
.tab-container{display:flex;justify-content:center;gap:20px;margin-top:20px;font-size:15px}
.tabs{padding:10px 20px;border-radius:50px;font-weight:700;cursor:pointer;background:#f2f2f2;transition:all .3s}
.tabs:hover{padding:10px 30px}
.tabs.on{color:#fff;background:#111}
.tab_wrap{margin-top:30px;padding:20px;text-align:center;background:#f2f2f2;height:200px; overflow-y:auto; }


.preset button {
	width:calc((100% - 40px) / 4);
	margin:10px 0;
}


/* 스크롤바 숨기기 CSS */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.scroll4::-webkit-scrollbar {
  width: 10px;
}
 
.scroll4::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 20px;
}

.scroll4::-webkit-scrollbar-track {
  background: #ddd;
  border-radius: 20px;
}


/*스테치업로드*/
.upload-label{
    background:rgb(132 104 174 / var(--tw-bg-opacity, 1));
    color:#fff;
    width:calc(100% - 90px);
    padding:14px 0;
    border-radius:12px;
    text-align:center;
    cursor:pointer;
    font-weight:bold;
    transition:0.2s;
}

#fileUpload{
    display:none;
}
.preview-box{
    width:calc(100% - 90px);
	aspect-ratio:1;
    border:2px dashed #ddd;
    border-radius:16px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fafafa;
}

.preview-box img{
    max-width:95%;
    max-height:95%;
    object-fit:cover;
}

.preview-text{
    color:#999;
    font-size:14px;
}

.style-card {
    background: #f2ece0;
    border: 2px solid #e0d9ce;
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    font-family: 'Noto Sans KR', sans-serif;
    color: #1e1e2e;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width:calc((100% / 2) - 10px);
}

.style-card.sel-character, .style-card.sel-jobs {
	flex: 0 0 calc(25% - 10px * 3 / 4);
	min-height:32px;
	padding:6px;
}

.style-card.sel-style {
	flex: 0 0 calc((100% / 3) - 10px * 2 / 3);
	min-height:32px;
	padding:6px;
}

.style-card.on {
	
	border-color : rgb(132 104 174 / var(--tw-text-opacity, 1));
	background : #f1eafb;
}

.style-card-title { }

.prompt label {
	font-weight: 900;
	--tw-text-opacity: 1;
    color: rgb(132 104 174 / var(--tw-text-opacity, 1));
}

.prompt input[type=text] {
	border: 1px solid #e0d9ce;
}

.card-footer {
	background-color:#fff;
}
card-footer::after {
	display:none;
}

#viwe-character img {
	max-width:95%;
}

.img-card {
    border: 2px solid #e0d9ce;
    border-radius: 12px;
	width:calc((100% - 15px) / 4);
	aspect-ratio: 2 / 3;
    padding: 0;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    font-family: 'Noto Sans KR', sans-serif;
    color: #1e1e2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.img-card img {
	width:90%;
}

.img-card.on {
	
	border-color : rgb(132 104 174 / var(--tw-text-opacity, 1));
}

.expr-item {
    background: #f2ece0;
    border: 1px solid #e0d9ce;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 10px 14px;
    align-items: start;
    transition: border-color 0.2s;
}
.expr-item div:not(.not-w) { width:calc((100% - 80px) / 2); }
.expr-item div:first-child { width:40px; }
.expr-item div:nth-child(3) { width:40px; text-align:center; font-weight:bold; line-height:45px; }

.expr-field {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e0d9ce;
    border-radius: 8px;
    background: #ffffff;
    color: #1e1e2e;
    font-size: 14px;
    transition: border-color 0.2s;
    line-height: 1.4;
}
.desc-field {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0d9ce;
    border-radius: 10px;
    /*background: #f2ece0;*/
    color: #1e1e2e;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    resize: vertical;
    min-height: 56px;
    transition: border-color 0.3s;
    line-height: 1.5;
}


.emoti-card {
    background: #f2ece0;
    border: 2px solid #e0d9ce;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    font-family: 'Noto Sans KR', sans-serif;
    color: #1e1e2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width:calc((100% / 2) - 10px);
	aspect-ratio: 3 / 2;
    padding: 14px 12px;
}

.character-box{
    width:calc(100% - 10px);
    height:300px;
    border:2px dashed #ddd;
    border-radius:16px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fafafa;
}

#patternList {
	max-height:350px;
	overflow-y:auto;
}
.style-category  {
    background: #f2ece0;
    border: 2px solid #e0d9ce;
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    font-family: 'Noto Sans KR', sans-serif;
    color: #1e1e2e;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width:calc((100% / 3) - 5px);
}


.style-category-none {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    font-family: 'Noto Sans KR', sans-serif;
    color: #1e1e2e;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width:calc((100% / 3) - 5px);
}

.style-category.on {
	
	border-color : rgb(132 104 174 / var(--tw-text-opacity, 1));
	background : #f1eafb;
}

.effects {
	
	min-height:100px;
}

.expr-item .h_title {
	line-height:36px !important;
	font-size:0.95em;
	width:100px !important;
	text-align:left;
}

.expr-item .h_foot {
	line-height:36px !important;
	width:calc(100% - 100px) !important;
}

.expr-item .h_foot .label-box {
	padding-right:20px;
}

/*로딩중1*/
.loading_box { position: relative; width: 60px; height: 20px; line-height: 20px; }
.loading_box span { display: inline-block; width: 10px; height: 10px; margin-left: 25px; background: #d1d3d7; border-radius: 50%; font-size: 0; animation: loading_ani 1s infinite linear alternate; animation-delay: 0.5s; }
.loading_box span::before, .loading_box span::after { content: ''; display: inline-block; position: absolute; top: 6px; width: 10px; height: 10px; background: #0026dd; border-radius: 50%; animation: loading_ani 1s infinite alternate; }
.loading_box span::before { left: 0; animation-delay: 0s; }
.loading_box span::after { right: 0; animation-delay: 1s; }
@keyframes loading_ani { 0% { background: #0026dd; } 50%, 100% { background: #d1d3d7; } }

.loading-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 300px;
        background-color: #0002;
    }
    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 5px solid #3498db;
        border-top: 5px solid transparent;
        border-radius: 50%;
        animation: rotate 1s linear infinite;
    }

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
      .ex-box {
        padding: 10px;
        border: 1px solid black;
      }

/*로딩중2*/
	.loaderText {
	  width:280px;
	  position:fixed;
	  top:calc(50% - 160px);
	  left:calc(50% - 140px);
	  text-align:center;
	  color:#fff;
	  font-weight:bold;
	  font-size:16px;
	}
	.loader { 
	  border: 16px solid #f3f3f3; 
	  border-top: 16px solid #3498db; 
	  border-radius: 50%; 
	  width: 120px; 
	  height: 120px; 
	  animation: spin 2s linear infinite; 
	  
	  /* transform을 제거하고 아래 속성으로 대체 */
	  position: fixed; 
	  inset: 0;
	  margin: auto;
	} 

	@keyframes spin { 
	  0% { transform: rotate(0deg); } 
	  100% { transform: rotate(360deg); } 
	}
	
	
@media (max-width: 639px) {

	.sm\:w-\[360px\] { width:390px }
}
@media (min-width: 640px) {

	.sm\:w-\[360px\] { width:450px }
	.sm\:w-\[650px\] { width:98%; margin-left:auto; margin-right:auto; }
}


      .wizard-steps {
        counter-reset: step;
        list-style: none;
        padding: 0;
        display: flex;
        justify-content: space-between;
        position: relative;
      }
      .wizard-steps::before {
        content: '';
        position: absolute;
        top: 1rem;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--bs-border-color);
        z-index: 0;
      }
      .wizard-steps li {
        position: relative;
        z-index: 1;
        background: var(--bs-body-bg);
        padding: 0 0.75rem;
        text-align: center;
        color: var(--bs-secondary-color);
        font-size: 0.875rem;
      }
      .wizard-steps li::before {
        counter-increment: step;
        content: counter(step);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        margin: 0 auto 0.5rem;
        border-radius: 50%;
        background: var(--bs-body-tertiary-bg);
        border: 2px solid var(--bs-border-color);
        color: var(--bs-secondary-color);
        font-weight: 600;
      }
      .wizard-steps li.active {
        color: var(--bs-primary);
        font-weight: 600;
      }
      .wizard-steps li.active::before {
        background: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
      }
      .wizard-steps li.completed::before {
        background: var(--bs-success);
        border-color: var(--bs-success);
        color: #fff;
        content: '\f633';
        font-family: 'bootstrap-icons';
      }
	  
	  .dynamic-album-card {
		width:80%;
		margin: 15px auto 30px;
		text-align:center;
		
	  }
	  
	  .dynamic-album-card img {
		width: 100%; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
	  }
	  
	  .dynamic-album-card a .btn {
	  }
	  
/*메이크업페이지*/
.tablet-makeup-wrapper {
    display: flex;
    flex-direction: row; /* 수평 배치 */
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.media-view-zone {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.canvas-container canvas {
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0 auto;
    /*border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);*/
    transform: scaleX(-1); /* 거울 모드 좌우 반전 */
}
.webcam-video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 💡 핵심: 찌러짐 없이 원본 비율 유지하며 정중앙 배치 */
}

/* 오른쪽 제어 메뉴 존 (화면의 40% 차지) */
.control-menu-zone {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px 0;
    border: 1px solid #e9ecef;
}

/* 13개 부위 셀렉트 박스 태블릿 맞춤형 스타일 */
#makeup_category_select {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    border-radius: 8px;
    border: 2px solid #dee2e6;
    background-color: #fff;
    margin-bottom: 20px;
    font-weight: bold;
}

/* 컬러 칩 정렬 (태블릿에서 누르기 좋게 큼직하게 정렬) */
.color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.color-chip {
    height: 60px;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    font-weight: bold;
    cursor: pointer;
}