@font-face {font-display: swap; font-family: 'Montserrat';font-style: normal;font-weight: 300;src: url('/assets/fonts/montserrat-v29-latin-300.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Montserrat';font-style: italic;font-weight: 300;src: url('/assets/fonts/montserrat-v29-latin-300italic.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Montserrat';font-style: normal;font-weight: 400;src: url('/assets/fonts/montserrat-v29-latin-regular.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Montserrat';font-style: italic;font-weight: 400;src: url('/assets/fonts/montserrat-v29-latin-italic.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Montserrat';font-style: normal;font-weight: 600;src: url('/assets/fonts/montserrat-v29-latin-600.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Montserrat';font-style: italic;font-weight: 600;src: url('/assets/fonts/montserrat-v29-latin-600italic.woff2') format('woff2');}
:root {
    --white: #ffffff;
    --off-black:#1d2934; 
    --off-white:#fafafa;
    --yellow:#efda04;
    --gold: #d8b667;
    
    --prime-000:#eef6f6;
    --prime-100:#cde5e4;
    --prime-200:#abd3d1;
    --prime-300:#8ac2bf;
    --prime-400:#68b0ad;
    --prime-500:#4f9793;
    --prime-600:#3d7573;
    --prime-700:#2c5452;
    --prime-800:#1a3231;
    --prime-900:#091110;
    
    --grey-000:#f1f3f3;
    --grey-100:#d6dcdb;
    --grey-200:#bac4c2;
    --grey-300:#9eadaa;
    --grey-400:#839692;
    --grey-500:#697c78;
    --grey-600:#52615e;
    --grey-700:#3b4543;
    --grey-800:#232928;
    --grey-900:#0c0e0d;
}

html {-webkit-text-size-adjust: 100%}
.sreen-reader-only {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skip a {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skip a:focus {position:static;width:auto;height:auto;}
body {font-family: Montserrat, 'Open Sans', sans-serif;text-rendering: optimizeLegibility;margin: 0;padding: 0;font-size:1.1rem;line-height: 1.9;color: var(--prime-900);font-weight: 300;}
header {border-bottom: solid 1px var(--grey-300);}
main {min-height: 60vh;}
*, *:before, *:after {box-sizing: border-box}
h1 {font-size: clamp(1.75rem, 4vw, 2.6875rem);line-height: 1.3;letter-spacing: normal;font-weight: 300;margin: .625em 0 .3125em;text-wrap-style: balance;max-width: 60ch;}
h2 {font-size: clamp(1.4rem, 2.5vw, 1.625rem);line-height: 1.3;font-weight: normal;text-wrap-style: balance;max-width: 60ch;}
h2:has(+ p), h2:has(+ ul) {margin: 1.5em 0 .0 0;}
h3 {text-wrap-style: balance;font-weight: 400;line-height: 1.3;margin: 2em 0 .5em 0;}
p a, ul a {color: var(--prime-700);}
p a:hover, ul a:hover, p a:focus ul a:focus {color: var(--white);text-decoration: none;background: var(--prime-700);}
:focus {outline:2px solid var(--off-black);}
/*a:focus img  {outline:2px auto var(--off-black); outline-offset: 2px;}*/
abbr[title] {border-bottom: 0;text-decoration: underline;text-decoration: underline dotted}
img {max-width: 100%;height: auto;vertical-align: middle;display: block;border: 0;margin: auto;}
blockquote {font-style: italic}
blockquote::before {content: "\201C";display: block;font-size: 2.5rem;height: 0;position: relative;top: -14px;left: -25px;}
@media only screen and (max-width:700px) {
    blockquote {margin:1rem;}
}
article {max-width: 1280px;margin: 2rem auto 3rem;;width:96%;}
article p {max-width: 80ch;margin: .5em 0 1em 0;}
article ul {max-width: 80ch;}
.content-wrapper {max-width: 1280px;width: 96%;margin: auto;padding:3rem 0;}
.icon {margin: 0 0 -7px 0;}
.icon path {fill:var(--prime-500)}
.icon path:hover {fill:var(--grey-800);}
.img-float-right {float:right;margin:0 0 1rem 1rem;}
.video-wrapper {max-width: 560px;margin: 0 auto;border: thin solid;}
.video-wrapper iframe {width: 100%;height: auto;aspect-ratio: 560 / 315;}


@media only screen and (max-width:600px) {
    article, .content-wrapper {width: 94%;}
    .img-float-right {float:none;margin: 0 auto 1rem;}
}
.text-center {text-align: center;}


/**************  SYSTEM ERROR PAGE  ****************************************************/
.system-page, .system_page {padding:60px 10px; text-align:center;}
.system-page p, .system_page p {margin:2rem auto 4rem;}
.system-page h2, .system_page h2 {max-width:100%;}
.system_form {margin-inline: auto;max-width: 400px;text-align: left;}
.system_table {margin:auto;}
.system_page .big_letter {font-size: 5em;color:var(--prime-600);line-height: 1;}
.system_svg{width:45px;height:45px;margin:0 auto 35px;display:block}
.system_table td:nth-child(1) {text-align: right;padding:.25rem;}
.system_table td:nth-child(2) {text-align: left;padding:.25rem;}

/**********  BUTTON  **********/
.a-btn-light, .a-btn-dark {display: inline-block;padding: 0.5rem 1.5rem;border-radius: .5rem;text-decoration: none;font-size: clamp(1.1rem, 2vw, 1.3rem);text-wrap-style: balance;color: var(--white);text-align: center;}
.a-btn-light {background: var(--prime-600);}
.a-btn-light:hover {background: var(--grey-800);}
.a-btn-dark {background: var(--grey-800);}
.a-btn-dark:hover {background: var(--prime-600);}



/**********  NAV  **********/
#quick-nav {background: var(--white);}
.nav-content-wrapper {max-width: 1280px;width: 96%;margin: 0 auto;padding: .5rem 0;display: flex;justify-content: flex-end;}
.nav-content-wrapper .mobile {display:none;}
.nav-content-wrapper .a-btn-light {line-height: 1;font-size:inherit;padding:.5rem .75rem;margin-left: 1rem;}
.nav-phone {color: var(--prime-700);text-decoration: none;margin-right: 1rem;}
.nav-phone:hover, .nav-phone:focus {color: var(--white);text-decoration: none;background: var(--prime-700);}
@media only screen and (max-width:1050px) {
    .nav-content-wrapper .mobile {display:inline;margin-right: 1rem;}
    .nav-content-wrapper .desktop {display:none;}
}
@media(max-width: 825px) {
    header {display:flex;flex-direction: column;}
    #quick-nav {order:2;}
    .nav-content-wrapper {flex-direction: column;align-items: center;padding: 0 0 1em;text-align: center;}
    .nav-content-wrapper > div:last-of-type {margin:1rem auto 0;}
    .nav-content-wrapper .mobile {display:none;}
    .nav-content-wrapper .desktop {display:inline;margin-right: 0;}
    .nav-content-wrapper .a-btn-light {margin:0 1rem ;}
}

/**************  NAVIGATION  ****************************************************/
nav.main { display: flex; align-items: center;justify-content: space-between; width:98%; max-width: 1280px; margin: 0 auto;position: relative;}
nav.main img {height: 40px;width: auto;margin:1rem;transition: all 0.5s ease-in-out;}

.nav-dropdown > :first-child:after { content: "\25BE"; padding-left: 4px; }
.selected > :first-child{border-bottom:3px solid var(--prime-500); }
.selected > a:first-of-type { color: var(--prime-900);background-color:var(--prime-100); }

.main ul {margin: 0 auto; padding: 0; list-style-type: none;}
.main ul li { display: inline-block;transition: background-color 0.4s ease-in-out; position: relative; }
.main ul li a { text-decoration: none; display: block; padding: .35rem 1.5rem; color: var(--prime-900);transition: padding .6s ease-in-out;line-height: 1.2; }
.main button:hover, .highlight > a:hover {  background: var(--off-black);color:var(--white);transition: background 0.6s ease-in-out}
.main ul li:hover {border-bottom:1px solid var(--prime-500);}
.main ul li a:hover {background:inherit;font-weight:400;}
.main ul ul { position: absolute; z-index:2; min-width: 200px; display: none; text-align:left;background:var(--white);
    border-left: thin solid var(--grey-300);border-right: thin solid var(--grey-300);border-bottom: thin solid var(--grey-300);
    border-top: 1px solid var(--prime-500);overflow: hidden;left: 50%;transform: translateX(-50%);}
.main ul ul li a {color:var(--prime-900);padding: .35rem .75rem;}
.main ul ul li { display: block; }
.main ul li:hover ul { display: block;}
.main ul li i { float: right; padding-left: 10px; color: var(--prime-900);}
.mobilenav {display: block!important;position: absolute;right: 0;top: 90px;}
.main button {font-size: 1.3rem;cursor: pointer;display: none;padding: .6rem .5rem;color: var(--prime-900);background: inherit;border: none;font-family: inherit;margin: 0 8% 0 auto;line-height:1;align-items: center;}
.main button span {/*font-size: 1.1rem;*/font-weight: 400;}

/*@media(max-width: 1020px) {
    nav.main {flex-wrap: wrap; }
    nav.main img {height: 80px;}
}*/
@media(min-width: 1070px) {
    .scroll-img { height: 60px!important;}
}
@media(min-width: 600px) and (max-width: 1070px) {
    .scroll-img { height: 50px!important;}
}
@media(max-width: 600px) {
   /* nav.main img { height:60px; }*/
}

@media(max-width: 1000px) {
.main ul li a {padding: .35rem 1rem;}
}
@media(max-width: 900px) {
    .main button {display: flex;}
    .main button svg {stroke:black;}
    .main button:hover svg {stroke:white;}
    .main ul {display: none;background:var(--white);text-align: left;max-width: 300px;margin: 0 0 0 auto;z-index: 10;}
    .main ul li {display: block;border: thin solid var(--grey-300);}
    .nav-dropdown {background: var(--grey-200);}
    .main ul li a {padding: .5rem 2rem;}
    .main ul ul {position: static; left: 0;transform: none;width:100%;box-shadow: none;border-radius:0 0 0 0;}
    .main ul ul li {background: var(--white);border-left: none;border-right: none;border-bottom: none;}
    .main ul ul li a {padding: .5rem 4rem;}
    nav:has(.mobilenav) ul {display: block;}
}
@media(max-width: 825px) {
    nav.main {margin:0 auto;}
    .main button {margin-top:0;}
    nav.main img { margin:.5rem; }
}
@media(max-width: 575px) {
    .main button {padding: 10px 8px;}
}

/**********  HOMEPAGE  **********/
.home-banner {margin-bottom: -2rem;height: 500px;border-bottom: thin solid var(--grey-200);}
.home-banner img, .head-banner img {object-fit: cover;width: 100%;height: 100%;}
.head-banner {height: 250px;border-bottom: thin solid var(--grey-200);}
@media(max-width: 600px) {
    .home-banner {height: 350px;}
}
.section-green {background: var(--prime-500);background: linear-gradient(to bottom, var(--prime-600) 0%, var(--prime-400) 100%);text-align: center;}
.section-green h2 {color:var(--white);text-wrap-style: balance;margin: 2em auto;}
.section-meet {display: flex;align-items: center;text-align: center;overflow: hidden;}
.section-meet > picture {margin: 0 -70px;padding: 3rem 0 0;}
.section-meet div {padding: 0 2rem 0 0;}
@media only screen and (max-width:750px) {
    .section-meet {flex-direction: column-reverse;}
    .section-meet > picture {padding:2rem 0 0;}
    .section-meet div {padding: 3rem 0 0 0;width: 96%;max-width: 500px;}
}
.icon-wrapper {display: flex;gap: 1rem;text-align: center;flex-wrap: wrap;justify-content: center;}
.icon-wrapper a {width: calc(25% - .75rem);flex: 1 1 auto;color: var(--white);text-decoration: none;font-size: 1.2500em;line-height: 1;}
.icon-wrapper span {display: block;margin-top:1rem;}
.section-green p {text-align: center;color: var(--white);font-size: 1.35rem;text-wrap-style: balance;line-height: 1.2;margin: 4rem 0 2rem;}
@media (min-width: 300px) and (max-width:1000px) {
    .icon-wrapper a {width: calc(50% - .75rem);}
}
@media only screen and (max-width:300px) {
    .icon-wrapper a {width: auto;}
}

.team-photo {position: relative;background: var(--off-black);overflow: hidden;}
.team-photo a {position: absolute;left: 50%;bottom: 15%;transform: translateX(-50%);}

@media only screen and (max-width:750px) {
    .team-photo img {max-width: 130%;margin: 0 -15%;}
    .team-photo a {bottom: 5%;width: max-content;}
}
@media only screen and (min-width:1440px) {
    .team-photo img {max-width:1440px;}
}
.main-reviews-wrapper {background: #2e3f4e;background: linear-gradient(to bottom, #2e3f4e 0%, #1d2934 100%);    color: var(--white);}
.main-reviews-wrapper h2 {text-align:center;    margin-top: 0;}
.main-review-card {background: var(--off-black);width: 80%;max-width: 800px;margin: 0 auto 2rem;padding:1rem 2rem 2rem;}
.main-review-author {text-align: right;}
.main-reivew-stars {color: var(--yellow);}

@media only screen and (max-width:700px) {
.main-review-card {padding:1rem 2rem;width: 95%;}
}
/**********  HOMEPAGE  **********/
footer .section-grey {background:var(--grey-000);}
footer .section-grey div { max-width: 1280px;width: 96%;margin: auto;padding: 2rem 0;display: flex;justify-content: space-around;gap: 2rem;align-items: center;}
footer .section-grey svg {max-width:100%;}
footer .section-grey a {display:flex;}
@media only screen and (max-width:500px) {
    footer .section-grey div {flex-direction: column;}
}
footer .section-black {background: var(--off-black);text-align: center;color: var(--white);}
footer nav {font-size: 1rem;max-width: 1280px;width: 96%;margin: auto;padding: 2rem 0;}
footer .section-black a {color:var(--white);text-decoration: none;display: inline-block;padding: 0 .25rem;}
footer .section-green {color: var(--white);font-size:.9rem;}
footer .section-green p:first-of-type {margin: 2rem auto .5rem;}
footer .section-green p {font-size:.9rem;margin: .5rem auto;text-wrap-style: pretty;max-width: 85ch;}
footer .section-green img {max-width: 150px;padding: 0 0 2rem 0;}
footer p a {color:var(--white);}

.section-address {display:flex;text-align:center;gap: 1rem;justify-content: space-around;}
.section-address iframe {border: 10px solid var(--prime-100);border-radius: .5em;width:100%;height: 300px;}
.section-address span a {color: var(--prime-700);font-weight:bold;text-decoration: none;font-size:1.2rem;}
.section-address span a:hover, .section-address span a:focus {color: var(--white);text-decoration: none;background: var(--prime-700);}
.section-address .a-btn-light {margin: 1rem auto;}
@media only screen and (max-width:650px) {    
    .section-address { flex-direction: column;}
}

.team-wraper {display: flex;margin: 3rem 2rem;gap: 2rem;}
.team-wraper h2 {margin-top: 0;}
.team-wraper img {min-width: 200px;max-width: 250px;width: 100%;}
@media only screen and (max-width:650px) { 
.team-wraper {flex-direction: column;text-align: center;}
}
.testimonial-card {margin: 3rem 2rem;}
.testimonial-card h2 {margin: 0;}
.testimonial-card span {color: var(--gold);}
.testimonial-card p {margin: 0;}
.before-after-card {margin: 3rem 2rem;}
.before-after-flex {display: flex;gap: 2rem;flex-wrap: wrap;}
.before-after-flex img {min-width: 229px;}
.before-after-card picture {position: relative;}
.smile-before::after {content: 'Before';} 
.smile-after::after {content: 'After';}
.smile-before::after, .smile-after::after {position: absolute;bottom: 0;left: 0;padding: .3rem;background: var(--prime-500);color: var(--white);line-height: 1;}
.faq-card {margin: 1rem;background: var(--grey-000);padding: 1rem;}
.faq-card + h2 {margin-top: 3rem;}
.faq-card p {margin: 0 0 0 1rem;}
.contact-flex {display: flex;column-gap: 2rem;}
.contact-flex > div {flex-basis: 100%;}
.contact-map-wrapper iframe {width: 100%;height: 400px;border: thin solid var(--prime-300);}
.hours {display: grid;grid-template-columns: 70px 160px;column-gap: 1em;text-align: left;}
.hours span:nth-child(odd) {text-align: right;}
.hours, .address {line-height: 1.5;}
@media only screen and (max-width:700px) { 
    .contact-flex {display:block;}
}

/**************  PORTAL  ****************************************************/
.title-flex {display:flex;gap:1rem;justify-content:space-between;align-items:center;flex-wrap: wrap;margin: 1rem 0;}
.title-flex h1 { margin:0;}
.title-flex-button {text-align: center;margin-inline-start: auto;}
.title-flex-button a {background-color:var(--prime-600);color: var(--white);font-size: .8em;border-radius: .5em;padding: .5em .75em;text-decoration:none;}
.title-flex-button a:hover {background-color: var(--grey-800);color: var(--white);text-decoration:none;}

.patient-portal-welcome {text-indent: 2rem;font-size: 1.3rem;margin-block: 0 3em;line-height: 1;}
.patient-portal-button-flex{display: flex;gap: 2rem;flex-wrap: wrap;justify-content: center;margin-block: 2rem;}

/**************  PATIENT INFORMATION TABLE LAYOUT  ****************************************************/
.patient-table-layout {max-width: 800px;margin: auto;border-collapse: collapse;}
.patient-table-layout h2 {margin:0;}
.patient-table-layout h3 {font-size: 1.1em;margin-block-start: .25em;margin-block-end: 0;}
.patient-table-layout .text-right {text-align: right;}
.patient-table-layout .title-row {border-left:thin grey solid;border-top: thin grey solid;border-right: thin grey solid;font-size:8px;padding-inline: 0.25rem;vertical-align: top;}
.patient-table-layout .content-row {border-left:thin grey solid;border-bottom:thin grey solid;border-right: thin grey solid;padding:.2rem .3rem;line-height: 1.1;font-size: 1rem;}
.patient-table-layout .consent-row {border: thin grey solid; padding: .5rem 1rem;}
.patient-table-layout .consent-row div {font-size:.7rem;}
.patient-table-layout .consent-row p {max-width:100%;}
.patient-info-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;justify-items: center;}
.patient-info-wrapper {max-width: 400px;width:100%;border: thin solid var(--prime-600);border-radius: .5rem;text-align: center;}
.patient-info-wrapper h3 {margin-block: 2rem 1rem;}
.patient-info-wrapper p {margin-block: 0;line-height: 1;}
.patient-info-wrapper > span {font-size: .8rem;}
.patient-info-wrapper .patient-buttons {
    display: flex;
}
.patient-info-wrapper a {background-color: var(--prime-600);color: var(--white);width: 100%;display: inline-block;margin-block-start: 1rem;text-decoration: none;}
.patient-info-wrapper a:hover {background-color: var(--grey-800);}

/**********  FORM  **********/
form {max-width: 800px;}
.form-center {margin:auto;}
.form-w500 {max-width: 500px;}
.form-flex {display: flex;gap: 1rem;}
@media only screen and (max-width:700px) { 
    .form-flex {display:block;}
}
.form-flex > div {flex: 1 1 0;}
label {line-height: 1;font-size: .9rem;margin: 1rem 0 .25rem 0;display: block;}
label:has(+ input:required):after, label:has(+ textarea:required):after, label:has(+ select:required):after {content: ' *';color: red;}
label:has(+ input[type=radio])::after {
    content: '';
}
input[type=email], input[type=tel], input[type=text], input[type=file],input[type=password] {border: none;width: 100%;padding: .75rem;font-family: inherit;font-size: inherit;line-height:1;border: thin solid var(--prime-500);}
textarea {display:block;border: none;width: 100%;padding: .75rem;font-family: inherit;font-size: inherit;line-height:inherit;border: thin solid var(--prime-500);}
input[type=date], input[type=number] {border: none;padding: .75rem;font-family: inherit;font-size: inherit;line-height:1;border: thin solid var(--prime-500);}
input[type=checkbox], input[type=radio]  {margin: .625em 0 .625em 0;background:var(--white);width: 1rem;height: 1rem;min-width: 20px;}
.checkbox-wrapper {display: flex;gap: 1rem;}
.checkbox-wrapper label {font-size: 1rem;margin-top: 0.4rem;line-height: 1.3;}

select {border: none;width: 100%;padding: .85rem .75rem;font-family: inherit;font-size: inherit;line-height:1;background: inherit;-webkit-appearance: none;appearance: none;border: thin solid var(--prime-500);background:var(--white);}
input[type=submit] {background: var(--prime-600);padding: 0.5rem 1.5rem;margin: 1rem 0;font-size: inherit;letter-spacing: 1px;text-decoration: none;color: var(--white);font-family: inherit;border: none;    border-radius: .5rem;}
input[type=submit]:hover {background:var(--off-black);}
fieldset {margin-bottom: 2rem;border: none;background: var(--grey-000);padding: .5rem 1rem 1rem;}
fieldset:last-of-type {margin-bottom: 0;}
fieldset hr {margin: 2rem 1rem 1rem;}
fieldset p {font-size: 1rem;line-height: 1.3;margin-left: 2rem;}
.fieldset-btn {background-color: var(--grey-200);display: block;padding: 0.5rem 1.5rem;border-radius: .5rem;text-decoration: none;text-wrap-style: balance;color: var(--grey-900);line-height: 1;margin-inline:auto;width: fit-content;}
legend {background: var(--prime-600);color: #fffdfd;padding: .25rem .75rem;width: 100%;font-weight: bold;letter-spacing: 2px;position: sticky;
    top: 0;}


.check-list > div {display: flex;gap: .5em;}
.check-list label {font-size: 1rem;margin-top: .625em;}

.radio-check, .check-list {margin: 1rem 0 0 0;padding: 0;}
.radio-check {flex: 1 1 auto;display: flex;gap: 1rem;}
.radio-check legend, .check-list legend {background: inherit;color: inherit;font-weight: inherit;letter-spacing: inherit;position: unset;padding: 0;line-height: 1;font-size: .9rem;}
.radio-check legend:has(+ input:required)::after, .check-list legend:has(+ input:required)::after {content: ' *';color: red;}
/*.radio-check label {display: inline;font-size: 1rem;padding-right:3rem;}*/
.check-list {column-count:2;}
@media only screen and (max-width:500px) { 
    .check-list {column-count:1;}
}
.check-list > div {padding-left: 1rem;}
.radio-options {display:none;margin:0 2rem;}
.radio-options label {margin:0 0 .25rem 0;}
.radio-check > div {display: flex;align-items: center;padding-block: 1rem;}
.radio-check  label {margin: 0;padding: 0 1em 0 .25em;}
.radio-check  input[type=radio] {margin: 0;}

input:focus:user-valid {outline: solid 2px green;}

input:focus:invalid {outline: 2px solid orange;} 
input:user-invalid {outline: solid thin red;}


.signin-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 3rem;}
.signin-grid h2 {margin-block: 1rem;}
.signin-grid input[type=email], .signin-grid input[type=password] {max-width: 400px;width: 100%;min-width:300px;}

/**********     PASSWORD ENTRY     **********/
.password-form {max-width:500px;text-align: left;}
.password-view-wrapper {display: flex;justify-content: space-between;}
.password-view-checkbox {    font-size: .8rem;display: flex;margin-inline-end: .5rem;align-items: center;}
.password-view-checkbox > input[type=checkbox] {margin: 0 .625em 00;}
#password_error_wrapper {columns: 2;max-width: 450px;    margin: .5em;font-size: .8rem;}
#password_error_match {font-size: .8rem;margin: 0 0 1rem 1rem;color: red;}
.password-error {color: red; font-weight:bold;}
.password-success {color: green;font-weight:bold;}
.password-no-break {white-space: nowrap;}

/**********     ERROR MESSAGE     **********/
.message-info, .message-invalid, .message-valid, .message-warning {margin-inline: auto;width: 90%;max-width: 60ch;text-wrap-style: balance;text-align: center;padding: .5rem 1rem;border-radius: .5rem;font-size: 1.1rem;display: flex;align-items: center;gap: 1rem;}
.message-invalid {background-color: #b50101;color: #ffffff;}
.message-invalid::before {display: inline-block;min-width: 1rem;height: 1rem;background-color: white;content:'';mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='currentColor' d='M1024 0q141 0 272 36t244 104t207 160t161 207t103 245t37 272q0 141-36 272t-104 244t-160 207t-207 161t-245 103t-272 37q-141 0-272-36t-244-104t-207-160t-161-207t-103-245t-37-272q0-141 36-272t104-244t160-207t207-161T752 37t272-37m113 1024l342-342l-113-113l-342 342l-342-342l-113 113l342 342l-342 342l113 113l342-342l342 342l113-113z'/%3E%3C/svg%3E");}
.message-valid {background: #0e6600;color: #ffffff;}
.message-valid::before {display: inline-block;min-width: 1rem;height: 1rem;background-color: white;content:'';mask-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='currentColor' d='M1024 0q141 0 272 36t244 104t207 160t161 207t103 245t37 272q0 141-36 272t-104 244t-160 207t-207 161t-245 103t-272 37q-141 0-272-36t-244-104t-207-160t-161-207t-103-245t-37-272q0-141 36-272t104-244t160-207t207-161T752 37t272-37m603 685l-136-136l-659 659l-275-275l-136 136l411 411z'/%3E%3C/svg%3E");}
.message-info {background: #213ce6;color: #ffffff;}
.message-info::before {display: inline-block;min-width: 1rem;height: 1rem;background-color: white;content:'';mask-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='currentColor' d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m-.01 8H11a1 1 0 0 0-.117 1.993L11 12v4.99c0 .52.394.95.9 1.004l.11.006h.49a1 1 0 0 0 .596-1.803L13 16.134V11.01c0-.52-.394-.95-.9-1.004zM12 7a1 1 0 1 0 0 2a1 1 0 0 0 0-2'/%3E%3C/g%3E%3C/svg%3E");}
.message-warning {background: #894809;color: #ffffff;}
.message-warning::before {display: inline-block;min-width: 1rem;height: 1rem;background-color: white;content:'';mask-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zM12 18q.425 0 .713-.288T13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18m0-3q.425 0 .713-.288T13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15'/%3E%3C/svg%3E");}
.message-valid a, .message-info a, .message-waring a, .message-invalid a {color:#ffffff;}