/* --- Motion system (drop-in) --- */
:root{
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur: 700ms;
  --gordita:"Gordita", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v160/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
    font-style: normal;font-weight: 100 700;font-display: inline;
}
@font-face {
    font-family: 'Gordita';
    src: url('/assets/fonts/Gordita-Regular.woff2') format('woff2');
    font-weight: normal;font-style: normal;font-display: swap;
}
@font-face {
    font-family: 'Gordita';
    src: url('/assets/fonts/Gordita-Bold.woff2') format('woff2');
    font-weight: bold;font-style: normal;font-display: swap;
}
@font-face {
    font-family: 'Gordita';
    src: url('/assets/fonts/Gordita-Medium.woff2') format('woff2');
    font-weight: 500;font-style: normal;font-display: swap;
}
@font-face {
    font-family: 'Gordita';
    src: url('/assets/fonts/Gordita-Italic.woff2') format('woff2');
    font-weight: normal;font-style: italic;font-display: swap;
}





body * {scrollbar-width:7px; scrollbar-color:#014254 transparent; -webkit-tap-highlight-color: transparent;}
body *::-webkit-scrollbar {width:7px;-webkit-appearance: none;}

body *::-webkit-scrollbar-track {background:transparent}
body *::-webkit-scrollbar-thumb {background-color:transparent; border-radius:4px; background-color: #014254;}


.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';font-weight: normal;font-style: normal;font-size: 24px;
    line-height: 1;letter-spacing: normal;text-transform: none;display: inline-block; vertical-align:middle; white-space: nowrap;word-wrap: normal;direction: ltr;
    -webkit-font-feature-settings: 'liga';-webkit-font-smoothing: antialiased;
}
.msoF100 {font-variation-settings:'FILL'1,'wght'100;}
.msoF200 {font-variation-settings:'FILL'1,'wght'200;}
.msoF300 {font-variation-settings:'FILL'1,'wght'300;}
.msoF400 {font-variation-settings:'FILL'1,'wght'400;}
.mso100 {font-variation-settings:'FILL'0,'wght'100;}
.mso200 {font-variation-settings:'FILL'0,'wght'200;}
.mso300 {font-variation-settings:'FILL'0,'wght'300;}
.mso400 {font-variation-settings:'FILL'0,'wght'400;}
.mso500 {font-variation-settings:'FILL'0,'wght'500;}
.mso600 {font-variation-settings:'FILL'0,'wght'600;}


@keyframes sqareLoading {
  0% {transform: translate(0%);border-radius: 50%;} 25% {transform: translate(150%) scale(0.5);border-radius: 0%;}
  50% {transform: translate(150%, 150%);border-radius: 50%;} 75% {transform: translate(0, 150%) scale(0.5);border-radius: 0%;}
}

* {box-sizing:border-box;-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;  outline:0;}

html,body {margin:0; padding:0; color:#d0f5ff; font-family:var(--gordita); font-weight:normal; font-size:16px; line-height:1.4; background: #014254; min-height:calc(var(--vh, 1vh) * 100);}
html.login-open .footerBtnBar{display:none !important;opacity:0 !important;pointer-events:none !important;visibility:hidden !important;}
p {margin:0; padding:0 0 10px 0;}
a {text-decoration: none;}

a, textarea, input[type=text], input[type=password], input[type=button], input[type=submit], input[type=number], input[type=tel], input[type=search], input[type=url], select, option,button {
    outline: 0;-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;-o-appearance: none;appearance: none; font-family:var(--gordita);
}
input[type=number] {-moz-appearance:textfield;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}

button {cursor:pointer; border:0; background:#014254; font-weight:500; line-height:1; padding:13px 30px; font-size:18px; border-radius:30px; width:fit-content; color:#BB9FF4;}

input[type=text], textarea, input[type=password], input[type=email], input[type=tel], input[type=url] {
    background: #003949;border: 1px solid #007798;color: #d0f5ff;border-radius: 30px;font-size: 16px;padding: 10px 20px 10px 50px;width:100%;font-family:var(--gordita);
}
input[type=url] {font-kerning: none;}

input::placeholder, textarea::placeholder {color:#d0f5ff; opacity:0.4} 
.passwordBoxEye {position:relative;}
.passwordBoxEye i {position:absolute; right:20px;color:#BB9FF4; top:50%; transform:translateY(-50%); cursor:pointer;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: #d0f5ff; -webkit-box-shadow: inset 0 0 0px 9999px #003949; transition: background-color 5000s ease-in-out 0s; background-color: #003949 !important;
}
label[data-icon] {position: relative;display: block;margin-bottom:20px;}
label[data-icon]:before {
    position: absolute; color: #007798; font-size: 24px; transform: translateY(-50%); top: 50%; left: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 200; font-family: 'Material Symbols Outlined';font-weight: normal;
    font-style: normal;content: attr(data-icon);
}
.select {position: relative;display:block;}
select {font-size: 16px; border-radius: 20px;padding:10px 20px;background: #003949; border: 1px solid #007798; width:100%; color:#d0f5ff;}
.select:after {
    cursor: pointer; position: absolute;right: 10px; top: 50%; transform:translate(0, -50%); z-index:0; pointer-events: none; color:#d0f5ff;  
    font-size: 22px;font-family: 'Material Symbols Outlined';content: "expand_more";
    -webkit-font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400;
}

textarea {border-radius: 10px;padding: 20px;}
/* POPUP TEXTAREA*/
.enlargeTextArea {margin-bottom: 20px;}
.enlargeTextArea textarea {resize:none;overflow: hidden; min-height:100px;touch-action:auto; font-size: 16px;}
.enlargeTextArea:focus-within {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:100dvh; max-height:400px; border-radius:10px; background:#005268; padding:50px 20px 20px 20px;
    touch-action:none; z-index:2; 
}
/* for below touch-action:pan-x; overflow-y:scroll; */
.enlargeTextArea:focus-within textarea {padding:0; border:0; background:transparent; resize: none; overflow: auto; height:100%; overscroll-behavior: none;}
.enlargeTextArea:focus-within:before {
    position:absolute; top:5px; right:7px; z-index:1; cursor: pointer;
    font-family:'Material Symbols Outlined';font-variation-settings:'FILL'1,'wght'600;font-weight: normal;font-style: normal;font-size:32px; content:'cancel'; color:#BB9FF4;
}
@media only screen and (max-width: 600px) {
    .enlargeTextArea:focus-within {top:0; left:0; width:100dvw; transform:unset; border-radius:0; max-height: unset;}   
}




header { position:sticky; top:0; z-index:1; display:flex; align-items:flex-end; height:60px; padding:0 20px; background:#BB9FF4;}

header > div {max-width:900px; width:100%; margin:0 auto; position:relative; display:flex; align-items:flex-end; margin-bottom: -1px;}
header .folderLogo {font-weight: bold; font-size: 28px; padding-bottom:5px; color:#014254}
header .folderBack {
    height: 35px; width:160px; background-color: var(--folder-color, #014254); background-color: #014254;
    -webkit-mask: url(/assets/images/foldertop.svg) no-repeat;mask: url(/assets/images/foldertop.svg) no-repeat; mask-size: auto 100%;
}
header .hamburger {margin-left: auto; align-self: flex-start; border-radius: 50%; padding: 6px; position:fixed; right:20px; top:13px;}
#navMenu {position:fixed; z-index: 999; top:70px; right:-320px; width:100%; max-width:300px; max-height:calc(100dvh - 80px); background:#002a36;  padding:10px; border-radius:10px;}
#navMenu > div {overflow:auto; height:100%; max-height:calc(100dvh - 100px); font-size:14px; color:#2a92b2; padding:10px;}
#navMenu a {padding: 5px 15px;display: block;color: #d0f5ff;cursor: pointer;-webkit-transition: 0.2s;transition: 0.2s;font-size:16px;}
#navMenu a:hover {background:#001e26; border-radius:20px;}
#navMenu a.active {background:#001e26; border-radius:20px;}
#navMenu .lastChild {background: #034254;height: 1px;margin: 10px 0;}


.section-dark       {--folder-color:#014254; background:#014254; }
.section-mid        {--folder-color:#004f64; background:#004f64; }
.section-light      {--folder-color:#005a72; background:#005a72; }
.section-lighter    {--folder-color:#0a647b; background:#0a647b; }




/* =========================
   STOREY PAGE CONTENT BASE
   Drop-in styles for: .content, headings, cards, buttons, lists, etc.
   Works with your section colour classes:
   .section-dark/.section-mid/.section-light/.section-lighter
   ========================= */

.page {width:100%;}

.section{padding: clamp(28px, 5vw, 64px) 18px; color: rgba(255,255,255,0.92);}

/* If you ever use lighter sections with dark text later,
   you can override per-section by setting color on that section. */

.content{width:100%; max-width: 980px; margin: 0 auto;}
.content > *:first-child{ margin-top: 0; }
.content > *:last-child{ margin-bottom: 0; }

/* Typography */
.content h1 {font-size: clamp(28px, 4.2vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin: 14px 0 12px 0; font-weight:500;}
.content h2 {font-size: clamp(22px, 3.2vw, 30px); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px 0; font-weight:500;}
.content h3 {font-size: 18px; line-height: 1.25; margin: 0 0 8px 0; font-weight:500;}
.content p {margin: 0 0 16px 0; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.88);}
.content em {font-style: italic; color: rgba(255,255,255,0.92);}
.content strong {color: rgba(255,255,255,0.96); font-weight:500;}
.content .lede {font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.92); max-width: 62ch;}
.content .smallNote {font-size: 13px; line-height: 1.55; margin-top: 14px; color: rgba(255,255,255,0.75);}

/* Breadcrumbs */
.breadcrumbs {
    font-size: 13px; line-height: 1.3; color: rgba(255,255,255,0.72); margin: 0 0 14px 0; display:flex; flex-wrap:wrap; gap: 8px; align-items:center;
}
.breadcrumbs a {color: rgba(255,255,255,0.86); text-decoration: none;}
.breadcrumbs a:hover{ text-decoration: underline; }
.breadcrumbs span{ color: rgba(255,255,255,0.55); }

/* Buttons */
.ctaRow {display:flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 18px 0;}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px;
  text-decoration: none; font-weight: 500; font-size: 14px; letter-spacing: 0.01em; border:none; background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92); transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:hover {background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.26); transform: translateY(-1px);}
.btn:active {transform: translateY(0); }

.btn.primary {background: rgba(187,159,244,0.92); border-color: rgba(187,159,244,0.92); color: #0b2030;}
.btn.primary:hover {background: rgba(187,159,244,1); border-color: rgba(187,159,244,1);}
.btn.secondary {background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.92);}

/* Card grids */
.gridCards {display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 16px; margin-bottom:20px;}
.card {
    grid-column: span 6; padding: 16px; border-radius: 16px; background: rgba(1,1,1,0.16); 
    /* box-shadow: 0 10px 22px rgba(0,0,0,0.18); */
}
.card p {margin: 0; color: rgba(255,255,255,0.82);}

/* Tick list */
.tickList {list-style: none; padding: 0; margin: 16px 0 0 0; display: grid; gap: 10px; margin-bottom:20px;}
.tickList li {position: relative; color: rgba(255,255,255,0.88); line-height: 1.6; display:flex; align-items:center;}
.tickList li::before {
    content: "✓"; width:24px; height:24px; border-radius: 999px; font-weight: 900; color: #0b2030; font-size:12px; margin-right:15px;
    background: rgba(187,159,244,0.95); box-shadow: 0 8px 18px rgba(187,159,244,0.18); display: flex; align-items: center; justify-content: center;
}
.tickList li > span {width:calc(100% - 39px);}
.tickList li strong {display:block;}

/* Link cards */
.linkGrid {display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 16px;margin-bottom: 20px;}
.linkGrid img, .linkGrid svg  {height:40px;}

.linkCard {
  grid-column: span 6; display:block; padding: 16px; border-radius: 16px; text-decoration:none; background: rgba(1,1,1,0.16);
  transition: transform 120ms ease, background 120ms ease;
}
.linkCard:hover {transform: translateY(-1px); background: rgba(1,1,1,0.2);}
.linkCard h3 {color:#BB9FF4; margin-bottom: 6px;}
.linkCard p {margin: 0; color: rgba(255,255,255,0.80);}

/* Final CTA block */
.finalCta {margin-top: 26px; padding: 18px; border-radius: 18px; background: rgba(0,0,0,0.12);}
.finalCta h2 { margin-bottom: 8px; }
.finalCta p { margin-bottom: 14px; }

/* Optional: subtle left accent using folder colour */
.section .content > h2::before {
  content:""; display:inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 10px;
  background: var(--folder-color, #BB9FF4); box-shadow: 0 10px 18px rgba(0,0,0,0.20); transform: translateY(-1px);
}



.contactCustomerForm {
    max-width:600px; margin: 0 auto; font-size:16px; display:flex; flex-direction:column; justify-content:center; height:100%; padding:20px;
    min-height:calc(var(--vh, 1vh) * 100 - 60px);
}
#contactRobot {
    display:flex; align-items:center; margin:0 10px; justify-content:center; position:fixed; top:0; left:0; width:100dvw; height:100dvh;
    background:#BB9FF4; padding: 20px; z-index: 1; display: none;
}
#contactRobot > div {width:400px; padding:30px; background:#014254; border-radius:10px; text-align:center;}
.contactCustomerForm .robotInfo {margin:0 auto 10px auto;}
.contactCustomerForm .g-recaptcha {display:inline-block; margin:0 auto;}





/* FOOTER  */
.footer {background: rgba(0, 0, 0, 0.08); padding-top:40px; font-size:12px;}
.footer .content {max-width:980px; padding:0 10px; margin:0 auto;}
.footerGrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 10px; }
.footerCol { grid-column: span 3; padding: 16px; border-radius: 16px; background: rgba(1,1,1,0.13);}
.footerCol h3 {margin: 0 0 8px 0; margin-bottom: 10px; font-size: 18px;line-height: 1.25; font-weight: 500; padding-bottom:0;}
.footerLinks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footerLinks a { color: rgba(255,255,255,0.86); text-decoration: none; }
.footerLinks a:hover { text-decoration: underline; }
.footerLinksSmall { gap: 8px; }
.footer .smallNote {font-size:12px;}
.footerDivider { height: 1px; background: rgba(255,255,255,0.12); margin: 14px 0; }
.footerBottom { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.footerBottom a { color: rgba(255,255,255,0.86); text-decoration: none; }
.footerBottom a:hover { text-decoration: underline; }
.footerLinks.svg {display:flex; align-items: center;gap: 15px;}
.footerLinks.svg svg, .footerLinks.svg img {width:auto; height:30px; fill:rgba(255,255,255,0.5)}
.footerLinks.svg a.twitter svg, .footerLinks.svg a.twitter img {height:25px;}
/* Tablet: 2 across */
@media (max-width: 980px) { .footerCol { grid-column: span 6; } }
/* Mobile: 1 across */
@media (max-width: 540px) { .footerCol { grid-column: span 12; } }


#cookieDesc{opacity:1;	transition:none;}
.cookie-known #cookieOverlay,.cookie-known #cookieBanner{display:none !important;}
.cookieOverlay,.cookieBanner {contain:layout paint;}
.cookieOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(2px);z-index:9998;}
.cookieOverlay,.cookieBanner{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 180ms ease, visibility 0s linear;}
.cookieOverlay[hidden],.cookieBanner[hidden]{opacity:0;visibility:hidden;pointer-events:none;}
.cookieBanner,.cookiePrefs{position:fixed;left:18px;right:18px;bottom:18px;z-index:9999;display:flex;justify-content:center;}
.cookieCard{
    width:100%;max-width:420px;padding:16px;border-radius:16px; background: #014254; box-shadow:0 10px 22px rgba(0,0,0,0.25);
    overflow:auto;scrollbar-color: #046d8a transparent; font-size: 14px;
    max-height:calc(100dvh - 40px);
	max-height:calc(100vh - 40px);
}
.cookieCard h3{margin:0 0 8px 0;font-size:22px; padding-bottom: 0; font-weight:500;}
.cookieCard a {color:#BB9FF4;}
.cookieCard .btnContainer {margin-bottom:20px; display:flex; align-items:center; gap:10px;}
.cookieCard .btn {padding: 13px 30px;border-radius: 30px;}
.cookieCard .btn.primary {background:#BB9FF4; color:#014254;}
.cookieCard .btn.secondary {background: rgba(255, 255, 255, 0.1); color:#fff}

.cookieAccordion{margin:12px 0 22px 0;display:grid;gap:0;background:rgba(1,1,1,0.15); border-radius: 10px;}
.cookieDetails:first-child {border-bottom:2px solid #014254}
.cookieSummary{cursor:pointer;list-style:none;padding:12px 14px;color:rgba(255,255,255,0.92);font-weight:500;}
.cookieSummary::-webkit-details-marker{display:none;}
.cookiePanel{padding:0 14px 14px 14px;color:rgba(255,255,255,0.82);max-height: 200px; overflow: auto; scrollbar-color: #046d8a transparent;}
.cookiePanel a {color:rgba(255,255,255,0.90);text-decoration:underline;}
.cookieAccordion h1 {display:none;}
@media (max-width: 640px) { .cookieCard .btnContainer {flex-direction: column;} .cookieCard .btn {width:100%;} }





/* Responsive */
@media (max-width: 740px){
  .card, .linkCard{ grid-column: span 12; }
  .btn{ width: 100%; }
  .ctaRow{ gap: 8px; }
}


.guideLayout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;}
.guideMain{min-width:0;}
.guideAside{position:relative;position:sticky;top:80px;}

.sidePanel{padding:16px;border-radius:16px; background: rgba(0, 0, 0, 0.07);}
.sidePanel h3{
    margin: 0 5px 10px 0px; padding: 6px 6px 6px 10px; font-size:16px;line-height:1.25;font-weight:500;color:rgba(255,255,255,0.95);
    background: rgba(0, 0, 0, 0.07); border-radius: 10px;
}

.sideHeading{margin-top:14px;}
.sideLinks{display:grid;gap:5px;margin-bottom:6px;}
.sideLink{display:block;padding:12px; text-decoration:none; border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-bottom:15px;}
.sideLink:last-child{border-bottom:none;}
.sideLink:hover{transform:translateY(-1px);}
.sideLink strong{display:block;color:rgba(255,255,255,0.95);font-weight:500;margin-bottom:4px;}
.sideLink span{display:block;color:rgba(255,255,255,0.78);font-size:13px;line-height:1.45;}
@media (max-width: 980px){
    .guideLayout{grid-template-columns:1fr;}
    .sidePanel{position:static;}
}







#infoAlert {
    position: fixed;top: 0;left: 0;width: 100dvw;height: 100dvh;background: rgba(0, 0, 0, 0.7);align-items: flex-end;justify-content: center;padding: 20px;z-index: 2;display: none;
}
#infoAlert.open {display: flex;}
#infoAlert.open > div {display: block; animation: bounceInUp; animation-duration: 1.2s;}
#infoAlert > div {background: #014254;color: #d0f5ff;font-weight: normal;line-height: 1.4;font-size: 16px;padding: 10px;border-radius: 20px;max-width: 400px;}
#infoAlert > div > div {scrollbar-color: #046d8a transparent;max-height: 400px;overflow: auto;padding: 10px;}
.wcfTerms {text-align: justify; font-size:14px; line-height: 1.7;}
.wcfTerms a {color:#BB9FF4;}
.wcfTerms > ol {margin-left:-30px;}
.wcfTerms > div {margin-bottom:10px;}
.wcfTerms b {font-weight:normal; font-size:16px;}
.wcfTerms ol {counter-reset: item;}
.wcfTerms ol > li {counter-increment: item; margin-bottom:10px;}
.wcfTerms ol > li:before {content:'';margin-right:6px;}
.wcfTerms ol ol > li {display: block;}
.wcfTerms ol ol > li:before {content: counters(item, ".") ". ";margin-left: -32px; display:inline-block;}
.wcfTerms ol > li span {display:inline-block;vertical-align:top;}
.wcfTerms ol > li span:not(:first-child) {margin-left:5px; display:block;}
.wcfTerms ol ol > li span:not(:first-child) {margin-left:10px;}
.wcfTerms ol ol > li:before {width:20px;}
.wcfTerms ol ol ol > li span {width:calc(100% - 40px)}
.wcfTerms ol ol ol > li:before {width:40px;}
.wcfTerms ol ol ol ol > li span {width:calc(100% - 50px)}
.wcfTerms ol ol ol ol > li:before {width:50px;}



/* STOREY AI */
#chatContainerBackground {z-index:9; position:fixed; display:flex; align-items:flex-end; justify-content:flex-end; bottom:0; right:0; padding:20px; display:none;}
#chatContainer {width:280px; max-width:100%; background:#014254; color:#fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); padding:55px 10px 10px 10px; border-radius:10px; position:relative;}
#closeStoreyAI {position:absolute; top:10px; right:10px; color:#BB9FF4; cursor:pointer;}
.storeyAIAvatar {width:70px; height:70px; border-radius:50%; overflow:hidden; position:absolute; top:-35px; transform:translate(-50%, 0); left:50%;}
.storeyAIAvatar img {width:60px; height:61px;}
#chatContainer .storeyAIAvatar img {width:70px; height:71px;}
#storeyAIAvatar {position:fixed; bottom:20px; right:20px; top:unset; left:unset; transform:unset; width:60px; height:60px; cursor:pointer;}
#chatFreelyContainer {display:none;}
#chatFreely {font-size: 14px; max-height:calc(100dvh - 200px); min-height:200px; overflow:auto; scrollbar-color:#046d8a transparent;}
#chatFreelyInput {display:flex; margin:10px 0 0 0}
#chatFreelyInput input {border: 1px solid #005268;border-radius: 5px;background: #005268;color: #d0f5ff; padding:8px 10px; width:calc(100% - 35px); border-radius:10px 0 0 10px;font-family:var(--gordita);}
#chatFreelyInput button {width:35px; background:#BB9FF4; color:#014254; border-radius:0 10px 10px 0; padding:0; display: flex; align-items: center; justify-content: center;}
#chatFreelyInput button:before {font-family: 'Material Symbols Outlined';font-variation-settings:'FILL'0,'wght'300;font-weight: normal;font-style: normal;font-size:24px;content:attr(data-icon);}
.storey-ai-reply {background: #004d62; padding:10px; border-radius:10px; margin-bottom:10px;}
.storey-ai-reply ul {padding-left: 1.2rem;}
.storey-ai-reply strong {font-weight:500;}
.storey-ai-user {margin-bottom:10px;}
#chatFreely a {color:#BB9FF4;}

#professionalForm input[type=text], #professionalForm textarea, #professionalForm input[type=password], #professionalForm input[type=email], #professionalForm input[type=tel], #professionalForm input[type=url] {
    padding: 10px 20px 10px 20px;
}




