/* App Base CSS - Main Application Styles */

/* External Library Imports - These will be resolved by the build system */

/* Bootstrap */
/* External import from node_modules/bootstrap/dist/css/bootstrap.min.css */
/*!
 * Bootstrap v4.6.2 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:.875em;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote-footer{display:block;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"\2014\00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#6c757d}code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#212529}pre code{font-size:inherit;color:inherit;word-break:normal}.pre-scrollable{max-height:340px;overflow-y:scroll}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-first{-ms-flex-order:-1;order:-1}.order-last{-ms-flex-order:13;order:13}.order-0{-ms-flex-order:0;order:0}.order-1{-ms-flex-order:1;order:1}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-9{-ms-flex-order:9;order:9}.order-10{-ms-flex-order:10;order:10}.order-11{-ms-flex-order:11;order:11}.order-12{-ms-flex-order:12;order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-first{-ms-flex-order:-1;order:-1}.order-sm-last{-ms-flex-order:13;order:13}.order-sm-0{-ms-flex-order:0;order:0}.order-sm-1{-ms-flex-order:1;order:1}.order-sm-2{-ms-flex-order:2;order:2}.order-sm-3{-ms-flex-order:3;order:3}.order-sm-4{-ms-flex-order:4;order:4}.order-sm-5{-ms-flex-order:5;order:5}.order-sm-6{-ms-flex-order:6;order:6}.order-sm-7{-ms-flex-order:7;order:7}.order-sm-8{-ms-flex-order:8;order:8}.order-sm-9{-ms-flex-order:9;order:9}.order-sm-10{-ms-flex-order:10;order:10}.order-sm-11{-ms-flex-order:11;order:11}.order-sm-12{-ms-flex-order:12;order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-first{-ms-flex-order:-1;order:-1}.order-md-last{-ms-flex-order:13;order:13}.order-md-0{-ms-flex-order:0;order:0}.order-md-1{-ms-flex-order:1;order:1}.order-md-2{-ms-flex-order:2;order:2}.order-md-3{-ms-flex-order:3;order:3}.order-md-4{-ms-flex-order:4;order:4}.order-md-5{-ms-flex-order:5;order:5}.order-md-6{-ms-flex-order:6;order:6}.order-md-7{-ms-flex-order:7;order:7}.order-md-8{-ms-flex-order:8;order:8}.order-md-9{-ms-flex-order:9;order:9}.order-md-10{-ms-flex-order:10;order:10}.order-md-11{-ms-flex-order:11;order:11}.order-md-12{-ms-flex-order:12;order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-first{-ms-flex-order:-1;order:-1}.order-lg-last{-ms-flex-order:13;order:13}.order-lg-0{-ms-flex-order:0;order:0}.order-lg-1{-ms-flex-order:1;order:1}.order-lg-2{-ms-flex-order:2;order:2}.order-lg-3{-ms-flex-order:3;order:3}.order-lg-4{-ms-flex-order:4;order:4}.order-lg-5{-ms-flex-order:5;order:5}.order-lg-6{-ms-flex-order:6;order:6}.order-lg-7{-ms-flex-order:7;order:7}.order-lg-8{-ms-flex-order:8;order:8}.order-lg-9{-ms-flex-order:9;order:9}.order-lg-10{-ms-flex-order:10;order:10}.order-lg-11{-ms-flex-order:11;order:11}.order-lg-12{-ms-flex-order:12;order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-first{-ms-flex-order:-1;order:-1}.order-xl-last{-ms-flex-order:13;order:13}.order-xl-0{-ms-flex-order:0;order:0}.order-xl-1{-ms-flex-order:1;order:1}.order-xl-2{-ms-flex-order:2;order:2}.order-xl-3{-ms-flex-order:3;order:3}.order-xl-4{-ms-flex-order:4;order:4}.order-xl-5{-ms-flex-order:5;order:5}.order-xl-6{-ms-flex-order:6;order:6}.order-xl-7{-ms-flex-order:7;order:7}.order-xl-8{-ms-flex-order:8;order:8}.order-xl-9{-ms-flex-order:9;order:9}.order-xl-10{-ms-flex-order:10;order:10}.order-xl-11{-ms-flex-order:11;order:11}.order-xl-12{-ms-flex-order:12;order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}.table{width:100%;margin-bottom:1rem;color:#212529}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6}.table tbody+tbody{border-top:2px solid #dee2e6}.table-sm td,.table-sm th{padding:.3rem}.table-bordered{border:1px solid #dee2e6}.table-bordered td,.table-bordered th{border:1px solid #dee2e6}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{color:#212529;background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#b8daff}.table-primary tbody+tbody,.table-primary td,.table-primary th,.table-primary thead th{border-color:#7abaff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#d6d8db}.table-secondary tbody+tbody,.table-secondary td,.table-secondary th,.table-secondary thead th{border-color:#b3b7bb}.table-hover .table-secondary:hover{background-color:#c8cbcf}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#c8cbcf}.table-success,.table-success>td,.table-success>th{background-color:#c3e6cb}.table-success tbody+tbody,.table-success td,.table-success th,.table-success thead th{border-color:#8fd19e}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>td,.table-info>th{background-color:#bee5eb}.table-info tbody+tbody,.table-info td,.table-info th,.table-info thead th{border-color:#86cfda}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>td,.table-warning>th{background-color:#ffeeba}.table-warning tbody+tbody,.table-warning td,.table-warning th,.table-warning thead th{border-color:#ffdf7e}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>td,.table-danger>th{background-color:#f5c6cb}.table-danger tbody+tbody,.table-danger td,.table-danger th,.table-danger thead th{border-color:#ed969e}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>td,.table-light>th{background-color:#fdfdfe}.table-light tbody+tbody,.table-light td,.table-light th,.table-light thead th{border-color:#fbfcfc}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>td,.table-dark>th{background-color:#c6c8ca}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#95999c}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.table .thead-dark th{color:#fff;background-color:#343a40;border-color:#454d55}.table .thead-light th{color:#495057;background-color:#e9ecef;border-color:#dee2e6}.table-dark{color:#fff;background-color:#343a40}.table-dark td,.table-dark th,.table-dark thead th{border-color:#454d55}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{color:#fff;background-color:rgba(255,255,255,.075)}@media (max-width:575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-sm>.table-bordered{border:0}}@media (max-width:767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-md>.table-bordered{border:0}}@media (max-width:991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-lg>.table-bordered{border:0}}@media (max-width:1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control:-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::-ms-input-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}input[type=date].form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time].form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control:-moz-focusring{color:transparent;text-shadow:0 0 0 #495057}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block;width:100%}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem;line-height:1.5}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem;line-height:1.5}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;font-size:1rem;line-height:1.5;color:#212529;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.form-control-lg{height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}select.form-control[multiple],select.form-control[size]{height:auto}textarea.form-control{height:auto}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.form-check{position:relative;display:block;padding-left:1.25rem}.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{color:#6c757d}.form-check-label{margin-bottom:0}.form-check-inline{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding-left:0;margin-right:.75rem}.form-check-inline .form-check-input{position:static;margin-top:0;margin-right:.3125rem;margin-left:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#28a745}.valid-tooltip{position:absolute;top:100%;left:0;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#fff;background-color:rgba(40,167,69,.9);border-radius:.25rem}.form-row>.col>.valid-tooltip,.form-row>[class*=col-]>.valid-tooltip{left:5px}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#28a745;padding-right:calc(1.5em + .75rem)!important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.was-validated select.form-control:valid,select.form-control.is-valid{padding-right:3rem!important;background-position:right 1.5rem center}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.custom-select.is-valid,.was-validated .custom-select:valid{border-color:#28a745;padding-right:calc(.75em + 2.3125rem)!important;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}.custom-select.is-valid:focus,.was-validated .custom-select:valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#28a745}.form-check-input.is-valid~.valid-feedback,.form-check-input.is-valid~.valid-tooltip,.was-validated .form-check-input:valid~.valid-feedback,.was-validated .form-check-input:valid~.valid-tooltip{display:block}.custom-control-input.is-valid~.custom-control-label,.was-validated .custom-control-input:valid~.custom-control-label{color:#28a745}.custom-control-input.is-valid~.custom-control-label::before,.was-validated .custom-control-input:valid~.custom-control-label::before{border-color:#28a745}.custom-control-input.is-valid:checked~.custom-control-label::before,.was-validated .custom-control-input:valid:checked~.custom-control-label::before{border-color:#34ce57;background-color:#34ce57}.custom-control-input.is-valid:focus~.custom-control-label::before,.was-validated .custom-control-input:valid:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label::before,.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label::before{border-color:#28a745}.custom-file-input.is-valid~.custom-file-label,.was-validated .custom-file-input:valid~.custom-file-label{border-color:#28a745}.custom-file-input.is-valid:focus~.custom-file-label,.was-validated .custom-file-input:valid:focus~.custom-file-label{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;left:0;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#fff;background-color:rgba(220,53,69,.9);border-radius:.25rem}.form-row>.col>.invalid-tooltip,.form-row>[class*=col-]>.invalid-tooltip{left:5px}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#dc3545;padding-right:calc(1.5em + .75rem)!important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.was-validated select.form-control:invalid,select.form-control.is-invalid{padding-right:3rem!important;background-position:right 1.5rem center}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.custom-select.is-invalid,.was-validated .custom-select:invalid{border-color:#dc3545;padding-right:calc(.75em + 2.3125rem)!important;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat,#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}.custom-select.is-invalid:focus,.was-validated .custom-select:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545}.form-check-input.is-invalid~.invalid-feedback,.form-check-input.is-invalid~.invalid-tooltip,.was-validated .form-check-input:invalid~.invalid-feedback,.was-validated .form-check-input:invalid~.invalid-tooltip{display:block}.custom-control-input.is-invalid~.custom-control-label,.was-validated .custom-control-input:invalid~.custom-control-label{color:#dc3545}.custom-control-input.is-invalid~.custom-control-label::before,.was-validated .custom-control-input:invalid~.custom-control-label::before{border-color:#dc3545}.custom-control-input.is-invalid:checked~.custom-control-label::before,.was-validated .custom-control-input:invalid:checked~.custom-control-label::before{border-color:#e4606d;background-color:#e4606d}.custom-control-input.is-invalid:focus~.custom-control-label::before,.was-validated .custom-control-input:invalid:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label::before,.was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label::before{border-color:#dc3545}.custom-file-input.is-invalid~.custom-file-label,.was-validated .custom-file-input:invalid~.custom-file-label{border-color:#dc3545}.custom-file-input.is-invalid:focus~.custom-file-label,.was-validated .custom-file-input:invalid:focus~.custom-file-label{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-inline{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center}.form-inline .form-check{width:100%}@media (min-width:576px){.form-inline label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}.form-inline .form-group{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;margin-bottom:0}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-plaintext{display:inline-block}.form-inline .custom-select,.form-inline .input-group{width:auto}.form-inline .form-check{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-left:0}.form-inline .form-check-input{position:relative;-ms-flex-negative:0;flex-shrink:0;margin-top:0;margin-right:.25rem;margin-left:0}.form-inline .custom-control{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.form-inline .custom-control-label{margin-bottom:0}}.btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529;text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}.btn:not(:disabled):not(.disabled){cursor:pointer}a.btn.disabled,fieldset:disabled a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#0069d9;border-color:#0062cc;box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0062cc;border-color:#005cbf}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5a6268;border-color:#545b62}.btn-secondary.focus,.btn-secondary:focus{color:#fff;background-color:#5a6268;border-color:#545b62;box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#545b62;border-color:#4e555b}.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(130,138,145,.5)}.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#218838;border-color:#1e7e34;box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#1e7e34;border-color:#1c7430}.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(72,180,97,.5)}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#138496;border-color:#117a8b;box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-warning{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#212529;background-color:#e0a800;border-color:#d39e00}.btn-warning.focus,.btn-warning:focus{color:#212529;background-color:#e0a800;border-color:#d39e00;box-shadow:0 0 0 .2rem rgba(222,170,12,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle{color:#212529;background-color:#d39e00;border-color:#c69500}.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(222,170,12,.5)}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c82333;border-color:#bd2130;box-shadow:0 0 0 .2rem rgba(225,83,97,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#bd2130;border-color:#b21f2d}.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,83,97,.5)}.btn-light{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#212529;background-color:#e2e6ea;border-color:#dae0e5}.btn-light.focus,.btn-light:focus{color:#212529;background-color:#e2e6ea;border-color:#dae0e5;box-shadow:0 0 0 .2rem rgba(216,217,219,.5)}.btn-light.disabled,.btn-light:disabled{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle{color:#212529;background-color:#dae0e5;border-color:#d3d9df}.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,217,219,.5)}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#23272b;border-color:#1d2124;box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1d2124;border-color:#171a1d}.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(82,88,93,.5)}.btn-outline-primary{color:#007bff;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.btn-outline-secondary{color:#6c757d;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.btn-outline-success{color:#28a745;border-color:#28a745}.btn-outline-success:hover{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#28a745;background-color:transparent}.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.btn-outline-info{color:#17a2b8;border-color:#17a2b8}.btn-outline-info:hover{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#17a2b8;background-color:transparent}.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-warning{color:#ffc107;border-color:#ffc107}.btn-outline-warning:hover{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle{color:#212529;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle{color:#212529;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.btn-outline-dark{color:#343a40;border-color:#343a40}.btn-outline-dark:hover{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#343a40;background-color:transparent}.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.btn-link{font-weight:400;color:#007bff;text-decoration:none}.btn-link:hover{color:#0056b3;text-decoration:underline}.btn-link.focus,.btn-link:focus{text-decoration:underline}.btn-link.disabled,.btn-link:disabled{color:#6c757d;pointer-events:none}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.width{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.width{transition:none}}.dropdown,.dropleft,.dropright,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-left{right:auto;left:0}.dropdown-menu-sm-right{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-left{right:auto;left:0}.dropdown-menu-md-right{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-left{right:auto;left:0}.dropdown-menu-lg-right{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-left{right:auto;left:0}.dropdown-menu-xl-right{right:0;left:auto}}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropleft .dropdown-toggle::after{display:none}.dropleft .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty::after{margin-left:0}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#e9ecef}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#adb5bd;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1.5rem;color:#212529}.btn-group,.btn-group-vertical{position:relative;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.btn-group-vertical>.btn:hover,.btn-group>.btn:hover{z-index:1}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:1}.btn-toolbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropright .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropleft .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:stretch;align-items:stretch;width:100%}.input-group>.custom-file,.input-group>.custom-select,.input-group>.form-control,.input-group>.form-control-plaintext{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;min-width:0;margin-bottom:0}.input-group>.custom-file+.custom-file,.input-group>.custom-file+.custom-select,.input-group>.custom-file+.form-control,.input-group>.custom-select+.custom-file,.input-group>.custom-select+.custom-select,.input-group>.custom-select+.form-control,.input-group>.form-control+.custom-file,.input-group>.form-control+.custom-select,.input-group>.form-control+.form-control,.input-group>.form-control-plaintext+.custom-file,.input-group>.form-control-plaintext+.custom-select,.input-group>.form-control-plaintext+.form-control{margin-left:-1px}.input-group>.custom-file .custom-file-input:focus~.custom-file-label,.input-group>.custom-select:focus,.input-group>.form-control:focus{z-index:3}.input-group>.custom-file .custom-file-input:focus{z-index:4}.input-group>.custom-select:not(:first-child),.input-group>.form-control:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.custom-file{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input-group>.custom-file:not(:last-child) .custom-file-label,.input-group>.custom-file:not(:last-child) .custom-file-label::after{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.custom-file:not(:first-child) .custom-file-label{border-top-left-radius:0;border-bottom-left-radius:0}.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label,.input-group:not(.has-validation)>.custom-file:not(:last-child) .custom-file-label::after,.input-group:not(.has-validation)>.custom-select:not(:last-child),.input-group:not(.has-validation)>.form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.custom-file:nth-last-child(n+3) .custom-file-label,.input-group.has-validation>.custom-file:nth-last-child(n+3) .custom-file-label::after,.input-group.has-validation>.custom-select:nth-last-child(n+3),.input-group.has-validation>.form-control:nth-last-child(n+3){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-append,.input-group-prepend{display:-ms-flexbox;display:flex}.input-group-append .btn,.input-group-prepend .btn{position:relative;z-index:2}.input-group-append .btn:focus,.input-group-prepend .btn:focus{z-index:3}.input-group-append .btn+.btn,.input-group-append .btn+.input-group-text,.input-group-append .input-group-text+.btn,.input-group-append .input-group-text+.input-group-text,.input-group-prepend .btn+.btn,.input-group-prepend .btn+.input-group-text,.input-group-prepend .input-group-text+.btn,.input-group-prepend .input-group-text+.input-group-text{margin-left:-1px}.input-group-prepend{margin-right:-1px}.input-group-append{margin-left:-1px}.input-group-text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.25rem}.input-group-text input[type=checkbox],.input-group-text input[type=radio]{margin-top:0}.input-group-lg>.custom-select,.input-group-lg>.form-control:not(textarea){height:calc(1.5em + 1rem + 2px)}.input-group-lg>.custom-select,.input-group-lg>.form-control,.input-group-lg>.input-group-append>.btn,.input-group-lg>.input-group-append>.input-group-text,.input-group-lg>.input-group-prepend>.btn,.input-group-lg>.input-group-prepend>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.input-group-sm>.custom-select,.input-group-sm>.form-control:not(textarea){height:calc(1.5em + .5rem + 2px)}.input-group-sm>.custom-select,.input-group-sm>.form-control,.input-group-sm>.input-group-append>.btn,.input-group-sm>.input-group-append>.input-group-text,.input-group-sm>.input-group-prepend>.btn,.input-group-sm>.input-group-prepend>.input-group-text{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.input-group-lg>.custom-select,.input-group-sm>.custom-select{padding-right:1.75rem}.input-group.has-validation>.input-group-append:nth-last-child(n+3)>.btn,.input-group.has-validation>.input-group-append:nth-last-child(n+3)>.input-group-text,.input-group:not(.has-validation)>.input-group-append:not(:last-child)>.btn,.input-group:not(.has-validation)>.input-group-append:not(:last-child)>.input-group-text,.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),.input-group>.input-group-prepend>.btn,.input-group>.input-group-prepend>.input-group-text{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text,.input-group>.input-group-prepend:first-child>.btn:not(:first-child),.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),.input-group>.input-group-prepend:not(:first-child)>.btn,.input-group>.input-group-prepend:not(:first-child)>.input-group-text{border-top-left-radius:0;border-bottom-left-radius:0}.custom-control{position:relative;z-index:1;display:block;min-height:1.5rem;padding-left:1.5rem;-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}.custom-control-inline{display:-ms-inline-flexbox;display:inline-flex;margin-right:1rem}.custom-control-input{position:absolute;left:0;z-index:-1;width:1rem;height:1.25rem;opacity:0}.custom-control-input:checked~.custom-control-label::before{color:#fff;border-color:#007bff;background-color:#007bff}.custom-control-input:focus~.custom-control-label::before{box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#80bdff}.custom-control-input:not(:disabled):active~.custom-control-label::before{color:#fff;background-color:#b3d7ff;border-color:#b3d7ff}.custom-control-input:disabled~.custom-control-label,.custom-control-input[disabled]~.custom-control-label{color:#6c757d}.custom-control-input:disabled~.custom-control-label::before,.custom-control-input[disabled]~.custom-control-label::before{background-color:#e9ecef}.custom-control-label{position:relative;margin-bottom:0;vertical-align:top}.custom-control-label::before{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;pointer-events:none;content:"";background-color:#fff;border:1px solid #adb5bd}.custom-control-label::after{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;content:"";background:50%/50% 50% no-repeat}.custom-checkbox .custom-control-label::before{border-radius:.25rem}.custom-checkbox .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e")}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before{border-color:#007bff;background-color:#007bff}.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e")}.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-radio .custom-control-label::before{border-radius:50%}.custom-radio .custom-control-input:checked~.custom-control-label::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-switch{padding-left:2.25rem}.custom-switch .custom-control-label::before{left:-2.25rem;width:1.75rem;pointer-events:all;border-radius:.5rem}.custom-switch .custom-control-label::after{top:calc(.25rem + 2px);left:calc(-2.25rem + 2px);width:calc(1rem - 4px);height:calc(1rem - 4px);background-color:#adb5bd;border-radius:.5rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out}@media (prefers-reduced-motion:reduce){.custom-switch .custom-control-label::after{transition:none}}.custom-switch .custom-control-input:checked~.custom-control-label::after{background-color:#fff;-webkit-transform:translateX(.75rem);transform:translateX(.75rem)}.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before{background-color:rgba(0,123,255,.5)}.custom-select{display:inline-block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;vertical-align:middle;background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat;border:1px solid #ced4da;border-radius:.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-select:focus::-ms-value{color:#495057;background-color:#fff}.custom-select[multiple],.custom-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.custom-select:disabled{color:#6c757d;background-color:#e9ecef}.custom-select::-ms-expand{display:none}.custom-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #495057}.custom-select-sm{height:calc(1.5em + .5rem + 2px);padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem}.custom-select-lg{height:calc(1.5em + 1rem + 2px);padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem}.custom-file{position:relative;display:inline-block;width:100%;height:calc(1.5em + .75rem + 2px);margin-bottom:0}.custom-file-input{position:relative;z-index:2;width:100%;height:calc(1.5em + .75rem + 2px);margin:0;overflow:hidden;opacity:0}.custom-file-input:focus~.custom-file-label{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.custom-file-input:disabled~.custom-file-label,.custom-file-input[disabled]~.custom-file-label{background-color:#e9ecef}.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"}.custom-file-input~.custom-file-label[data-browse]::after{content:attr(data-browse)}.custom-file-label{position:absolute;top:0;right:0;left:0;z-index:1;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;overflow:hidden;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem}.custom-file-label::after{position:absolute;top:0;right:0;bottom:0;z-index:3;display:block;height:calc(1.5em + .75rem);padding:.375rem .75rem;line-height:1.5;color:#495057;content:"Browse";background-color:#e9ecef;border-left:inherit;border-radius:0 .25rem .25rem 0}.custom-range{width:100%;height:1.4rem;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-range:focus{outline:0}.custom-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range:focus::-ms-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .2rem rgba(0,123,255,.25)}.custom-range::-moz-focus-outer{border:0}.custom-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#007bff;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.custom-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.custom-range::-webkit-slider-thumb:active{background-color:#b3d7ff}.custom-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.custom-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#007bff;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.custom-range::-moz-range-thumb{-moz-transition:none;transition:none}}.custom-range::-moz-range-thumb:active{background-color:#b3d7ff}.custom-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.custom-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.2rem;margin-left:.2rem;background-color:#007bff;border:0;border-radius:1rem;-ms-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media (prefers-reduced-motion:reduce){.custom-range::-ms-thumb{-ms-transition:none;transition:none}}.custom-range::-ms-thumb:active{background-color:#b3d7ff}.custom-range::-ms-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:transparent;border-color:transparent;border-width:.5rem}.custom-range::-ms-fill-lower{background-color:#dee2e6;border-radius:1rem}.custom-range::-ms-fill-upper{margin-right:15px;background-color:#dee2e6;border-radius:1rem}.custom-range:disabled::-webkit-slider-thumb{background-color:#adb5bd}.custom-range:disabled::-webkit-slider-runnable-track{cursor:default}.custom-range:disabled::-moz-range-thumb{background-color:#adb5bd}.custom-range:disabled::-moz-range-track{cursor:default}.custom-range:disabled::-ms-thumb{background-color:#adb5bd}.custom-control-label::before,.custom-file-label,.custom-select{transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.custom-control-label::before,.custom-file-label,.custom-select{transition:none}}.nav{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:focus,.nav-link:hover{text-decoration:none}.nav-link.disabled{color:#6c757d;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-link{margin-bottom:-1px;background-color:transparent;border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{isolation:isolate;border-color:#e9ecef #e9ecef #dee2e6}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{background:0 0;border:0;border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#007bff}.nav-fill .nav-item,.nav-fill>.nav-link{-ms-flex:1 1 auto;flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}.navbar .container,.navbar .container-fluid,.navbar .container-lg,.navbar .container-md,.navbar .container-sm,.navbar .container-xl{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static;float:none}.navbar-text{display:inline-block;padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:50%/100% 100% no-repeat}.navbar-nav-scroll{max-height:75vh;overflow-y:auto}@media (max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid,.navbar-expand-sm>.container-lg,.navbar-expand-sm>.container-md,.navbar-expand-sm>.container-sm,.navbar-expand-sm>.container-xl{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid,.navbar-expand-sm>.container-lg,.navbar-expand-sm>.container-md,.navbar-expand-sm>.container-sm,.navbar-expand-sm>.container-xl{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (max-width:767.98px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid,.navbar-expand-md>.container-lg,.navbar-expand-md>.container-md,.navbar-expand-md>.container-sm,.navbar-expand-md>.container-xl{padding-right:0;padding-left:0}}@media (min-width:768px){.navbar-expand-md{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-md .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container,.navbar-expand-md>.container-fluid,.navbar-expand-md>.container-lg,.navbar-expand-md>.container-md,.navbar-expand-md>.container-sm,.navbar-expand-md>.container-xl{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (max-width:991.98px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid,.navbar-expand-lg>.container-lg,.navbar-expand-lg>.container-md,.navbar-expand-lg>.container-sm,.navbar-expand-lg>.container-xl{padding-right:0;padding-left:0}}@media (min-width:992px){.navbar-expand-lg{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-lg .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid,.navbar-expand-lg>.container-lg,.navbar-expand-lg>.container-md,.navbar-expand-lg>.container-sm,.navbar-expand-lg>.container-xl{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (max-width:1199.98px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid,.navbar-expand-xl>.container-lg,.navbar-expand-xl>.container-md,.navbar-expand-xl>.container-sm,.navbar-expand-xl>.container-xl{padding-right:0;padding-left:0}}@media (min-width:1200px){.navbar-expand-xl{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-xl .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid,.navbar-expand-xl>.container-lg,.navbar-expand-xl>.container-md,.navbar-expand-xl>.container-sm,.navbar-expand-xl>.container-xl{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid,.navbar-expand>.container-lg,.navbar-expand>.container-md,.navbar-expand>.container-sm,.navbar-expand>.container-xl{padding-right:0;padding-left:0}.navbar-expand .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand>.container,.navbar-expand>.container-fluid,.navbar-expand>.container-lg,.navbar-expand>.container-md,.navbar-expand>.container-sm,.navbar-expand>.container-xl{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-light .navbar-text a{color:rgba(0,0,0,.9)}.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.5)}.navbar-dark .navbar-text a{color:#fff}.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{-ms-flex:1 1 auto;flex:1 1 auto;min-height:1px;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem;border-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom,.card-img-top{-ms-flex-negative:0;flex-shrink:0;width:100%}.card-img,.card-img-top{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-deck .card{margin-bottom:15px}@media (min-width:576px){.card-deck{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{-ms-flex:1 0 0%;flex:1 0 0%;margin-right:15px;margin-bottom:0;margin-left:15px}}.card-group>.card{margin-bottom:15px}@media (min-width:576px){.card-group{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.card-group>.card{-ms-flex:1 0 0%;flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem;orphans:1;widows:1}.card-columns .card{display:inline-block;width:100%}}.accordion{overflow-anchor:none}.accordion>.card{overflow:hidden}.accordion>.card:not(:last-of-type){border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion>.card:not(:first-of-type){border-top-left-radius:0;border-top-right-radius:0}.accordion>.card>.card-header{border-radius:0;margin-bottom:-1px}.breadcrumb{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#6c757d;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}.breadcrumb-item.active{color:#6c757d}.pagination{display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.page-link:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:3;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:3;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.badge{transition:none}}a.badge:focus,a.badge:hover{text-decoration:none}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-primary{color:#fff;background-color:#007bff}a.badge-primary:focus,a.badge-primary:hover{color:#fff;background-color:#0062cc}a.badge-primary.focus,a.badge-primary:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}.badge-secondary{color:#fff;background-color:#6c757d}a.badge-secondary:focus,a.badge-secondary:hover{color:#fff;background-color:#545b62}a.badge-secondary.focus,a.badge-secondary:focus{outline:0;box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.badge-success{color:#fff;background-color:#28a745}a.badge-success:focus,a.badge-success:hover{color:#fff;background-color:#1e7e34}a.badge-success.focus,a.badge-success:focus{outline:0;box-shadow:0 0 0 .2rem rgba(40,167,69,.5)}.badge-info{color:#fff;background-color:#17a2b8}a.badge-info:focus,a.badge-info:hover{color:#fff;background-color:#117a8b}a.badge-info.focus,a.badge-info:focus{outline:0;box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.badge-warning{color:#212529;background-color:#ffc107}a.badge-warning:focus,a.badge-warning:hover{color:#212529;background-color:#d39e00}a.badge-warning.focus,a.badge-warning:focus{outline:0;box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}.badge-danger{color:#fff;background-color:#dc3545}a.badge-danger:focus,a.badge-danger:hover{color:#fff;background-color:#bd2130}a.badge-danger.focus,a.badge-danger:focus{outline:0;box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.badge-light{color:#212529;background-color:#f8f9fa}a.badge-light:focus,a.badge-light:hover{color:#212529;background-color:#dae0e5}a.badge-light.focus,a.badge-light:focus{outline:0;box-shadow:0 0 0 .2rem rgba(248,249,250,.5)}.badge-dark{color:#fff;background-color:#343a40}a.badge-dark:focus,a.badge-dark:hover{color:#fff;background-color:#1d2124}a.badge-dark.focus,a.badge-dark:focus{outline:0;box-shadow:0 0 0 .2rem rgba(52,58,64,.5)}.jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:#e9ecef;border-radius:.3rem}@media (min-width:576px){.jumbotron{padding:4rem 2rem}}.jumbotron-fluid{padding-right:0;padding-left:0;border-radius:0}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;z-index:2;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}.alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;line-height:0;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.progress-bar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#007bff;transition:width .6s ease}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:1s linear infinite progress-bar-stripes;animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{-webkit-animation:none;animation:none}}.media{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.media-body{-ms-flex:1;flex:1}.list-group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:.25rem}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:-1px;border-top-width:1px}.list-group-horizontal{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}@media (min-width:576px){.list-group-horizontal-sm{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:768px){.list-group-horizontal-md{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:992px){.list-group-horizontal-lg{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:1200px){.list-group-horizontal-xl{-ms-flex-direction:row;flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 1px}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#004085;background-color:#b8daff}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#004085;background-color:#9fcdff}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#004085;border-color:#004085}.list-group-item-secondary{color:#383d41;background-color:#d6d8db}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#383d41;background-color:#c8cbcf}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#383d41;border-color:#383d41}.list-group-item-success{color:#155724;background-color:#c3e6cb}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#155724;background-color:#b1dfbb}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#155724;border-color:#155724}.list-group-item-info{color:#0c5460;background-color:#bee5eb}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#0c5460;background-color:#abdde5}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#0c5460;border-color:#0c5460}.list-group-item-warning{color:#856404;background-color:#ffeeba}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#856404;background-color:#ffe8a1}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#856404;border-color:#856404}.list-group-item-danger{color:#721c24;background-color:#f5c6cb}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#721c24;background-color:#f1b0b7}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#721c24;border-color:#721c24}.list-group-item-light{color:#818182;background-color:#fdfdfe}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#818182;background-color:#ececf6}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#818182;border-color:#818182}.list-group-item-dark{color:#1b1e21;background-color:#c6c8ca}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#1b1e21;background-color:#b9bbbe}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#1b1e21;border-color:#1b1e21}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:hover{color:#000;text-decoration:none}.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{opacity:.75}button.close{padding:0;background-color:transparent;border:0}a.close.disabled{pointer-events:none}.toast{-ms-flex-preferred-size:350px;flex-basis:350px;max-width:350px;font-size:.875rem;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .25rem .75rem rgba(0,0,0,.1);opacity:0;border-radius:.25rem}.toast:not(:last-child){margin-bottom:.75rem}.toast.showing{opacity:1}.toast.show{display:block;opacity:1}.toast.hide{display:none}.toast-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:.25rem .75rem;color:#6c757d;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05);border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.toast-body{padding:.75rem}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-50px);transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{-webkit-transform:none;transform:none}.modal.modal-static .modal-dialog{-webkit-transform:scale(1.02);transform:scale(1.02)}.modal-dialog-scrollable{display:-ms-flexbox;display:flex;max-height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 1rem);overflow:hidden}.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header{-ms-flex-negative:0;flex-shrink:0}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:calc(100% - 1rem)}.modal-dialog-centered::before{display:block;height:calc(100vh - 1rem);height:-webkit-min-content;height:-moz-min-content;height:min-content;content:""}.modal-dialog-centered.modal-dialog-scrollable{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:100%}.modal-dialog-centered.modal-dialog-scrollable .modal-content{max-height:none}.modal-dialog-centered.modal-dialog-scrollable::before{content:none}.modal-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.modal-header .close{padding:1rem 1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.modal-footer{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px)}.modal-footer>*{margin:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{max-height:calc(100% - 3.5rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-dialog-centered::before{height:calc(100vh - 3.5rem);height:-webkit-min-content;height:-moz-min-content;height:min-content}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{max-width:800px}}@media (min-width:1200px){.modal-xl{max-width:1140px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow{top:0}.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{padding:0 .4rem}.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .arrow::after,.popover .arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top]>.arrow,.bs-popover-top>.arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=top]>.arrow::before,.bs-popover-top>.arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right]>.arrow,.bs-popover-right>.arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=right]>.arrow::before,.bs-popover-right>.arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom]>.arrow,.bs-popover-bottom>.arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=bottom]>.arrow::before,.bs-popover-bottom>.arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left]>.arrow,.bs-popover-left>.arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=left]>.arrow::before,.bs-popover-left>.arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(0,0,0,.25)}.bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#212529}.carousel{position:relative}.carousel.pointer-event{-ms-touch-action:pan-y;touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-right,.carousel-item-next:not(.carousel-item-left){-webkit-transform:translateX(100%);transform:translateX(100%)}.active.carousel-item-left,.carousel-item-prev:not(.carousel-item-right){-webkit-transform:translateX(-100%);transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;-webkit-transform:none;transform:none}.carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:50%/100% 100% no-repeat}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:15;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{box-sizing:content-box;-ms-flex:0 1 auto;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators li{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}@-webkit-keyframes spinner-border{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-border{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;border:.25em solid currentcolor;border-right-color:transparent;border-radius:50%;-webkit-animation:.75s linear infinite spinner-border;animation:.75s linear infinite spinner-border}.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}@-webkit-keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1;-webkit-transform:none;transform:none}}@keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1;-webkit-transform:none;transform:none}}.spinner-grow{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;background-color:currentcolor;border-radius:50%;opacity:0;-webkit-animation:.75s linear infinite spinner-grow;animation:.75s linear infinite spinner-grow}.spinner-grow-sm{width:1rem;height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{-webkit-animation-duration:1.5s;animation-duration:1.5s}}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.bg-primary{background-color:#007bff!important}a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:hover{background-color:#0062cc!important}.bg-secondary{background-color:#6c757d!important}a.bg-secondary:focus,a.bg-secondary:hover,button.bg-secondary:focus,button.bg-secondary:hover{background-color:#545b62!important}.bg-success{background-color:#28a745!important}a.bg-success:focus,a.bg-success:hover,button.bg-success:focus,button.bg-success:hover{background-color:#1e7e34!important}.bg-info{background-color:#17a2b8!important}a.bg-info:focus,a.bg-info:hover,button.bg-info:focus,button.bg-info:hover{background-color:#117a8b!important}.bg-warning{background-color:#ffc107!important}a.bg-warning:focus,a.bg-warning:hover,button.bg-warning:focus,button.bg-warning:hover{background-color:#d39e00!important}.bg-danger{background-color:#dc3545!important}a.bg-danger:focus,a.bg-danger:hover,button.bg-danger:focus,button.bg-danger:hover{background-color:#bd2130!important}.bg-light{background-color:#f8f9fa!important}a.bg-light:focus,a.bg-light:hover,button.bg-light:focus,button.bg-light:hover{background-color:#dae0e5!important}.bg-dark{background-color:#343a40!important}a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover{background-color:#1d2124!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.border{border:1px solid #dee2e6!important}.border-top{border-top:1px solid #dee2e6!important}.border-right{border-right:1px solid #dee2e6!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-left{border-left:1px solid #dee2e6!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-primary{border-color:#007bff!important}.border-secondary{border-color:#6c757d!important}.border-success{border-color:#28a745!important}.border-info{border-color:#17a2b8!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#343a40!important}.border-white{border-color:#fff!important}.rounded-sm{border-radius:.2rem!important}.rounded{border-radius:.25rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-lg{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-0{border-radius:0!important}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:-ms-flexbox!important;display:flex!important}.d-print-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.857143%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.flex-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-center{-ms-flex-align:center!important;align-items:center!important}.align-items-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}@media (min-width:576px){.flex-sm-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-sm-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-sm-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-sm-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-sm-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-sm-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-sm-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-sm-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-sm-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-sm-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-sm-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-sm-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-sm-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-sm-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-sm-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-sm-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-sm-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-sm-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-sm-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-sm-center{-ms-flex-align:center!important;align-items:center!important}.align-items-sm-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-sm-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-sm-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-sm-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-sm-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-sm-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-sm-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-sm-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-sm-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-sm-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-sm-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-sm-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-sm-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-sm-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:768px){.flex-md-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-md-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-md-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-md-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-md-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-md-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-md-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-md-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-md-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-md-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-md-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-md-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-md-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-md-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-md-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-md-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-md-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-md-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-md-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-md-center{-ms-flex-align:center!important;align-items:center!important}.align-items-md-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-md-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-md-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-md-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-md-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-md-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-md-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-md-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-md-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-md-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-md-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-md-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-md-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-md-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:992px){.flex-lg-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-lg-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-lg-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-lg-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-lg-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-lg-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-lg-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-lg-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-lg-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-lg-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-lg-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-lg-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-lg-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-lg-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-lg-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-lg-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-lg-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-lg-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-lg-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-lg-center{-ms-flex-align:center!important;align-items:center!important}.align-items-lg-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-lg-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-lg-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-lg-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-lg-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-lg-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-lg-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-lg-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-lg-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-lg-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-lg-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-lg-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-lg-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-lg-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:1200px){.flex-xl-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-xl-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-xl-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-xl-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-xl-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-xl-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-xl-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-xl-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-xl-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-xl-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-xl-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-xl-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-xl-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-xl-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-xl-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-xl-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-xl-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-xl-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-xl-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-xl-center{-ms-flex-align:center!important;align-items:center!important}.align-items-xl-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-xl-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-xl-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-xl-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-xl-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-xl-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-xl-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-xl-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-xl-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-xl-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-xl-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-xl-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-xl-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-xl-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}@media (min-width:576px){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}}@media (min-width:768px){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}}@media (min-width:992px){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}}@media (min-width:1200px){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.min-vw-100{min-width:100vw!important}.min-vh-100{min-height:100vh!important}.vw-100{width:100vw!important}.vh-100{height:100vh!important}.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-n1{margin:-.25rem!important}.mt-n1,.my-n1{margin-top:-.25rem!important}.mr-n1,.mx-n1{margin-right:-.25rem!important}.mb-n1,.my-n1{margin-bottom:-.25rem!important}.ml-n1,.mx-n1{margin-left:-.25rem!important}.m-n2{margin:-.5rem!important}.mt-n2,.my-n2{margin-top:-.5rem!important}.mr-n2,.mx-n2{margin-right:-.5rem!important}.mb-n2,.my-n2{margin-bottom:-.5rem!important}.ml-n2,.mx-n2{margin-left:-.5rem!important}.m-n3{margin:-1rem!important}.mt-n3,.my-n3{margin-top:-1rem!important}.mr-n3,.mx-n3{margin-right:-1rem!important}.mb-n3,.my-n3{margin-bottom:-1rem!important}.ml-n3,.mx-n3{margin-left:-1rem!important}.m-n4{margin:-1.5rem!important}.mt-n4,.my-n4{margin-top:-1.5rem!important}.mr-n4,.mx-n4{margin-right:-1.5rem!important}.mb-n4,.my-n4{margin-bottom:-1.5rem!important}.ml-n4,.mx-n4{margin-left:-1.5rem!important}.m-n5{margin:-3rem!important}.mt-n5,.my-n5{margin-top:-3rem!important}.mr-n5,.mx-n5{margin-right:-3rem!important}.mb-n5,.my-n5{margin-bottom:-3rem!important}.ml-n5,.mx-n5{margin-left:-3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}@media (min-width:576px){.m-sm-0{margin:0!important}.mt-sm-0,.my-sm-0{margin-top:0!important}.mr-sm-0,.mx-sm-0{margin-right:0!important}.mb-sm-0,.my-sm-0{margin-bottom:0!important}.ml-sm-0,.mx-sm-0{margin-left:0!important}.m-sm-1{margin:.25rem!important}.mt-sm-1,.my-sm-1{margin-top:.25rem!important}.mr-sm-1,.mx-sm-1{margin-right:.25rem!important}.mb-sm-1,.my-sm-1{margin-bottom:.25rem!important}.ml-sm-1,.mx-sm-1{margin-left:.25rem!important}.m-sm-2{margin:.5rem!important}.mt-sm-2,.my-sm-2{margin-top:.5rem!important}.mr-sm-2,.mx-sm-2{margin-right:.5rem!important}.mb-sm-2,.my-sm-2{margin-bottom:.5rem!important}.ml-sm-2,.mx-sm-2{margin-left:.5rem!important}.m-sm-3{margin:1rem!important}.mt-sm-3,.my-sm-3{margin-top:1rem!important}.mr-sm-3,.mx-sm-3{margin-right:1rem!important}.mb-sm-3,.my-sm-3{margin-bottom:1rem!important}.ml-sm-3,.mx-sm-3{margin-left:1rem!important}.m-sm-4{margin:1.5rem!important}.mt-sm-4,.my-sm-4{margin-top:1.5rem!important}.mr-sm-4,.mx-sm-4{margin-right:1.5rem!important}.mb-sm-4,.my-sm-4{margin-bottom:1.5rem!important}.ml-sm-4,.mx-sm-4{margin-left:1.5rem!important}.m-sm-5{margin:3rem!important}.mt-sm-5,.my-sm-5{margin-top:3rem!important}.mr-sm-5,.mx-sm-5{margin-right:3rem!important}.mb-sm-5,.my-sm-5{margin-bottom:3rem!important}.ml-sm-5,.mx-sm-5{margin-left:3rem!important}.p-sm-0{padding:0!important}.pt-sm-0,.py-sm-0{padding-top:0!important}.pr-sm-0,.px-sm-0{padding-right:0!important}.pb-sm-0,.py-sm-0{padding-bottom:0!important}.pl-sm-0,.px-sm-0{padding-left:0!important}.p-sm-1{padding:.25rem!important}.pt-sm-1,.py-sm-1{padding-top:.25rem!important}.pr-sm-1,.px-sm-1{padding-right:.25rem!important}.pb-sm-1,.py-sm-1{padding-bottom:.25rem!important}.pl-sm-1,.px-sm-1{padding-left:.25rem!important}.p-sm-2{padding:.5rem!important}.pt-sm-2,.py-sm-2{padding-top:.5rem!important}.pr-sm-2,.px-sm-2{padding-right:.5rem!important}.pb-sm-2,.py-sm-2{padding-bottom:.5rem!important}.pl-sm-2,.px-sm-2{padding-left:.5rem!important}.p-sm-3{padding:1rem!important}.pt-sm-3,.py-sm-3{padding-top:1rem!important}.pr-sm-3,.px-sm-3{padding-right:1rem!important}.pb-sm-3,.py-sm-3{padding-bottom:1rem!important}.pl-sm-3,.px-sm-3{padding-left:1rem!important}.p-sm-4{padding:1.5rem!important}.pt-sm-4,.py-sm-4{padding-top:1.5rem!important}.pr-sm-4,.px-sm-4{padding-right:1.5rem!important}.pb-sm-4,.py-sm-4{padding-bottom:1.5rem!important}.pl-sm-4,.px-sm-4{padding-left:1.5rem!important}.p-sm-5{padding:3rem!important}.pt-sm-5,.py-sm-5{padding-top:3rem!important}.pr-sm-5,.px-sm-5{padding-right:3rem!important}.pb-sm-5,.py-sm-5{padding-bottom:3rem!important}.pl-sm-5,.px-sm-5{padding-left:3rem!important}.m-sm-n1{margin:-.25rem!important}.mt-sm-n1,.my-sm-n1{margin-top:-.25rem!important}.mr-sm-n1,.mx-sm-n1{margin-right:-.25rem!important}.mb-sm-n1,.my-sm-n1{margin-bottom:-.25rem!important}.ml-sm-n1,.mx-sm-n1{margin-left:-.25rem!important}.m-sm-n2{margin:-.5rem!important}.mt-sm-n2,.my-sm-n2{margin-top:-.5rem!important}.mr-sm-n2,.mx-sm-n2{margin-right:-.5rem!important}.mb-sm-n2,.my-sm-n2{margin-bottom:-.5rem!important}.ml-sm-n2,.mx-sm-n2{margin-left:-.5rem!important}.m-sm-n3{margin:-1rem!important}.mt-sm-n3,.my-sm-n3{margin-top:-1rem!important}.mr-sm-n3,.mx-sm-n3{margin-right:-1rem!important}.mb-sm-n3,.my-sm-n3{margin-bottom:-1rem!important}.ml-sm-n3,.mx-sm-n3{margin-left:-1rem!important}.m-sm-n4{margin:-1.5rem!important}.mt-sm-n4,.my-sm-n4{margin-top:-1.5rem!important}.mr-sm-n4,.mx-sm-n4{margin-right:-1.5rem!important}.mb-sm-n4,.my-sm-n4{margin-bottom:-1.5rem!important}.ml-sm-n4,.mx-sm-n4{margin-left:-1.5rem!important}.m-sm-n5{margin:-3rem!important}.mt-sm-n5,.my-sm-n5{margin-top:-3rem!important}.mr-sm-n5,.mx-sm-n5{margin-right:-3rem!important}.mb-sm-n5,.my-sm-n5{margin-bottom:-3rem!important}.ml-sm-n5,.mx-sm-n5{margin-left:-3rem!important}.m-sm-auto{margin:auto!important}.mt-sm-auto,.my-sm-auto{margin-top:auto!important}.mr-sm-auto,.mx-sm-auto{margin-right:auto!important}.mb-sm-auto,.my-sm-auto{margin-bottom:auto!important}.ml-sm-auto,.mx-sm-auto{margin-left:auto!important}}@media (min-width:768px){.m-md-0{margin:0!important}.mt-md-0,.my-md-0{margin-top:0!important}.mr-md-0,.mx-md-0{margin-right:0!important}.mb-md-0,.my-md-0{margin-bottom:0!important}.ml-md-0,.mx-md-0{margin-left:0!important}.m-md-1{margin:.25rem!important}.mt-md-1,.my-md-1{margin-top:.25rem!important}.mr-md-1,.mx-md-1{margin-right:.25rem!important}.mb-md-1,.my-md-1{margin-bottom:.25rem!important}.ml-md-1,.mx-md-1{margin-left:.25rem!important}.m-md-2{margin:.5rem!important}.mt-md-2,.my-md-2{margin-top:.5rem!important}.mr-md-2,.mx-md-2{margin-right:.5rem!important}.mb-md-2,.my-md-2{margin-bottom:.5rem!important}.ml-md-2,.mx-md-2{margin-left:.5rem!important}.m-md-3{margin:1rem!important}.mt-md-3,.my-md-3{margin-top:1rem!important}.mr-md-3,.mx-md-3{margin-right:1rem!important}.mb-md-3,.my-md-3{margin-bottom:1rem!important}.ml-md-3,.mx-md-3{margin-left:1rem!important}.m-md-4{margin:1.5rem!important}.mt-md-4,.my-md-4{margin-top:1.5rem!important}.mr-md-4,.mx-md-4{margin-right:1.5rem!important}.mb-md-4,.my-md-4{margin-bottom:1.5rem!important}.ml-md-4,.mx-md-4{margin-left:1.5rem!important}.m-md-5{margin:3rem!important}.mt-md-5,.my-md-5{margin-top:3rem!important}.mr-md-5,.mx-md-5{margin-right:3rem!important}.mb-md-5,.my-md-5{margin-bottom:3rem!important}.ml-md-5,.mx-md-5{margin-left:3rem!important}.p-md-0{padding:0!important}.pt-md-0,.py-md-0{padding-top:0!important}.pr-md-0,.px-md-0{padding-right:0!important}.pb-md-0,.py-md-0{padding-bottom:0!important}.pl-md-0,.px-md-0{padding-left:0!important}.p-md-1{padding:.25rem!important}.pt-md-1,.py-md-1{padding-top:.25rem!important}.pr-md-1,.px-md-1{padding-right:.25rem!important}.pb-md-1,.py-md-1{padding-bottom:.25rem!important}.pl-md-1,.px-md-1{padding-left:.25rem!important}.p-md-2{padding:.5rem!important}.pt-md-2,.py-md-2{padding-top:.5rem!important}.pr-md-2,.px-md-2{padding-right:.5rem!important}.pb-md-2,.py-md-2{padding-bottom:.5rem!important}.pl-md-2,.px-md-2{padding-left:.5rem!important}.p-md-3{padding:1rem!important}.pt-md-3,.py-md-3{padding-top:1rem!important}.pr-md-3,.px-md-3{padding-right:1rem!important}.pb-md-3,.py-md-3{padding-bottom:1rem!important}.pl-md-3,.px-md-3{padding-left:1rem!important}.p-md-4{padding:1.5rem!important}.pt-md-4,.py-md-4{padding-top:1.5rem!important}.pr-md-4,.px-md-4{padding-right:1.5rem!important}.pb-md-4,.py-md-4{padding-bottom:1.5rem!important}.pl-md-4,.px-md-4{padding-left:1.5rem!important}.p-md-5{padding:3rem!important}.pt-md-5,.py-md-5{padding-top:3rem!important}.pr-md-5,.px-md-5{padding-right:3rem!important}.pb-md-5,.py-md-5{padding-bottom:3rem!important}.pl-md-5,.px-md-5{padding-left:3rem!important}.m-md-n1{margin:-.25rem!important}.mt-md-n1,.my-md-n1{margin-top:-.25rem!important}.mr-md-n1,.mx-md-n1{margin-right:-.25rem!important}.mb-md-n1,.my-md-n1{margin-bottom:-.25rem!important}.ml-md-n1,.mx-md-n1{margin-left:-.25rem!important}.m-md-n2{margin:-.5rem!important}.mt-md-n2,.my-md-n2{margin-top:-.5rem!important}.mr-md-n2,.mx-md-n2{margin-right:-.5rem!important}.mb-md-n2,.my-md-n2{margin-bottom:-.5rem!important}.ml-md-n2,.mx-md-n2{margin-left:-.5rem!important}.m-md-n3{margin:-1rem!important}.mt-md-n3,.my-md-n3{margin-top:-1rem!important}.mr-md-n3,.mx-md-n3{margin-right:-1rem!important}.mb-md-n3,.my-md-n3{margin-bottom:-1rem!important}.ml-md-n3,.mx-md-n3{margin-left:-1rem!important}.m-md-n4{margin:-1.5rem!important}.mt-md-n4,.my-md-n4{margin-top:-1.5rem!important}.mr-md-n4,.mx-md-n4{margin-right:-1.5rem!important}.mb-md-n4,.my-md-n4{margin-bottom:-1.5rem!important}.ml-md-n4,.mx-md-n4{margin-left:-1.5rem!important}.m-md-n5{margin:-3rem!important}.mt-md-n5,.my-md-n5{margin-top:-3rem!important}.mr-md-n5,.mx-md-n5{margin-right:-3rem!important}.mb-md-n5,.my-md-n5{margin-bottom:-3rem!important}.ml-md-n5,.mx-md-n5{margin-left:-3rem!important}.m-md-auto{margin:auto!important}.mt-md-auto,.my-md-auto{margin-top:auto!important}.mr-md-auto,.mx-md-auto{margin-right:auto!important}.mb-md-auto,.my-md-auto{margin-bottom:auto!important}.ml-md-auto,.mx-md-auto{margin-left:auto!important}}@media (min-width:992px){.m-lg-0{margin:0!important}.mt-lg-0,.my-lg-0{margin-top:0!important}.mr-lg-0,.mx-lg-0{margin-right:0!important}.mb-lg-0,.my-lg-0{margin-bottom:0!important}.ml-lg-0,.mx-lg-0{margin-left:0!important}.m-lg-1{margin:.25rem!important}.mt-lg-1,.my-lg-1{margin-top:.25rem!important}.mr-lg-1,.mx-lg-1{margin-right:.25rem!important}.mb-lg-1,.my-lg-1{margin-bottom:.25rem!important}.ml-lg-1,.mx-lg-1{margin-left:.25rem!important}.m-lg-2{margin:.5rem!important}.mt-lg-2,.my-lg-2{margin-top:.5rem!important}.mr-lg-2,.mx-lg-2{margin-right:.5rem!important}.mb-lg-2,.my-lg-2{margin-bottom:.5rem!important}.ml-lg-2,.mx-lg-2{margin-left:.5rem!important}.m-lg-3{margin:1rem!important}.mt-lg-3,.my-lg-3{margin-top:1rem!important}.mr-lg-3,.mx-lg-3{margin-right:1rem!important}.mb-lg-3,.my-lg-3{margin-bottom:1rem!important}.ml-lg-3,.mx-lg-3{margin-left:1rem!important}.m-lg-4{margin:1.5rem!important}.mt-lg-4,.my-lg-4{margin-top:1.5rem!important}.mr-lg-4,.mx-lg-4{margin-right:1.5rem!important}.mb-lg-4,.my-lg-4{margin-bottom:1.5rem!important}.ml-lg-4,.mx-lg-4{margin-left:1.5rem!important}.m-lg-5{margin:3rem!important}.mt-lg-5,.my-lg-5{margin-top:3rem!important}.mr-lg-5,.mx-lg-5{margin-right:3rem!important}.mb-lg-5,.my-lg-5{margin-bottom:3rem!important}.ml-lg-5,.mx-lg-5{margin-left:3rem!important}.p-lg-0{padding:0!important}.pt-lg-0,.py-lg-0{padding-top:0!important}.pr-lg-0,.px-lg-0{padding-right:0!important}.pb-lg-0,.py-lg-0{padding-bottom:0!important}.pl-lg-0,.px-lg-0{padding-left:0!important}.p-lg-1{padding:.25rem!important}.pt-lg-1,.py-lg-1{padding-top:.25rem!important}.pr-lg-1,.px-lg-1{padding-right:.25rem!important}.pb-lg-1,.py-lg-1{padding-bottom:.25rem!important}.pl-lg-1,.px-lg-1{padding-left:.25rem!important}.p-lg-2{padding:.5rem!important}.pt-lg-2,.py-lg-2{padding-top:.5rem!important}.pr-lg-2,.px-lg-2{padding-right:.5rem!important}.pb-lg-2,.py-lg-2{padding-bottom:.5rem!important}.pl-lg-2,.px-lg-2{padding-left:.5rem!important}.p-lg-3{padding:1rem!important}.pt-lg-3,.py-lg-3{padding-top:1rem!important}.pr-lg-3,.px-lg-3{padding-right:1rem!important}.pb-lg-3,.py-lg-3{padding-bottom:1rem!important}.pl-lg-3,.px-lg-3{padding-left:1rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4,.py-lg-4{padding-top:1.5rem!important}.pr-lg-4,.px-lg-4{padding-right:1.5rem!important}.pb-lg-4,.py-lg-4{padding-bottom:1.5rem!important}.pl-lg-4,.px-lg-4{padding-left:1.5rem!important}.p-lg-5{padding:3rem!important}.pt-lg-5,.py-lg-5{padding-top:3rem!important}.pr-lg-5,.px-lg-5{padding-right:3rem!important}.pb-lg-5,.py-lg-5{padding-bottom:3rem!important}.pl-lg-5,.px-lg-5{padding-left:3rem!important}.m-lg-n1{margin:-.25rem!important}.mt-lg-n1,.my-lg-n1{margin-top:-.25rem!important}.mr-lg-n1,.mx-lg-n1{margin-right:-.25rem!important}.mb-lg-n1,.my-lg-n1{margin-bottom:-.25rem!important}.ml-lg-n1,.mx-lg-n1{margin-left:-.25rem!important}.m-lg-n2{margin:-.5rem!important}.mt-lg-n2,.my-lg-n2{margin-top:-.5rem!important}.mr-lg-n2,.mx-lg-n2{margin-right:-.5rem!important}.mb-lg-n2,.my-lg-n2{margin-bottom:-.5rem!important}.ml-lg-n2,.mx-lg-n2{margin-left:-.5rem!important}.m-lg-n3{margin:-1rem!important}.mt-lg-n3,.my-lg-n3{margin-top:-1rem!important}.mr-lg-n3,.mx-lg-n3{margin-right:-1rem!important}.mb-lg-n3,.my-lg-n3{margin-bottom:-1rem!important}.ml-lg-n3,.mx-lg-n3{margin-left:-1rem!important}.m-lg-n4{margin:-1.5rem!important}.mt-lg-n4,.my-lg-n4{margin-top:-1.5rem!important}.mr-lg-n4,.mx-lg-n4{margin-right:-1.5rem!important}.mb-lg-n4,.my-lg-n4{margin-bottom:-1.5rem!important}.ml-lg-n4,.mx-lg-n4{margin-left:-1.5rem!important}.m-lg-n5{margin:-3rem!important}.mt-lg-n5,.my-lg-n5{margin-top:-3rem!important}.mr-lg-n5,.mx-lg-n5{margin-right:-3rem!important}.mb-lg-n5,.my-lg-n5{margin-bottom:-3rem!important}.ml-lg-n5,.mx-lg-n5{margin-left:-3rem!important}.m-lg-auto{margin:auto!important}.mt-lg-auto,.my-lg-auto{margin-top:auto!important}.mr-lg-auto,.mx-lg-auto{margin-right:auto!important}.mb-lg-auto,.my-lg-auto{margin-bottom:auto!important}.ml-lg-auto,.mx-lg-auto{margin-left:auto!important}}@media (min-width:1200px){.m-xl-0{margin:0!important}.mt-xl-0,.my-xl-0{margin-top:0!important}.mr-xl-0,.mx-xl-0{margin-right:0!important}.mb-xl-0,.my-xl-0{margin-bottom:0!important}.ml-xl-0,.mx-xl-0{margin-left:0!important}.m-xl-1{margin:.25rem!important}.mt-xl-1,.my-xl-1{margin-top:.25rem!important}.mr-xl-1,.mx-xl-1{margin-right:.25rem!important}.mb-xl-1,.my-xl-1{margin-bottom:.25rem!important}.ml-xl-1,.mx-xl-1{margin-left:.25rem!important}.m-xl-2{margin:.5rem!important}.mt-xl-2,.my-xl-2{margin-top:.5rem!important}.mr-xl-2,.mx-xl-2{margin-right:.5rem!important}.mb-xl-2,.my-xl-2{margin-bottom:.5rem!important}.ml-xl-2,.mx-xl-2{margin-left:.5rem!important}.m-xl-3{margin:1rem!important}.mt-xl-3,.my-xl-3{margin-top:1rem!important}.mr-xl-3,.mx-xl-3{margin-right:1rem!important}.mb-xl-3,.my-xl-3{margin-bottom:1rem!important}.ml-xl-3,.mx-xl-3{margin-left:1rem!important}.m-xl-4{margin:1.5rem!important}.mt-xl-4,.my-xl-4{margin-top:1.5rem!important}.mr-xl-4,.mx-xl-4{margin-right:1.5rem!important}.mb-xl-4,.my-xl-4{margin-bottom:1.5rem!important}.ml-xl-4,.mx-xl-4{margin-left:1.5rem!important}.m-xl-5{margin:3rem!important}.mt-xl-5,.my-xl-5{margin-top:3rem!important}.mr-xl-5,.mx-xl-5{margin-right:3rem!important}.mb-xl-5,.my-xl-5{margin-bottom:3rem!important}.ml-xl-5,.mx-xl-5{margin-left:3rem!important}.p-xl-0{padding:0!important}.pt-xl-0,.py-xl-0{padding-top:0!important}.pr-xl-0,.px-xl-0{padding-right:0!important}.pb-xl-0,.py-xl-0{padding-bottom:0!important}.pl-xl-0,.px-xl-0{padding-left:0!important}.p-xl-1{padding:.25rem!important}.pt-xl-1,.py-xl-1{padding-top:.25rem!important}.pr-xl-1,.px-xl-1{padding-right:.25rem!important}.pb-xl-1,.py-xl-1{padding-bottom:.25rem!important}.pl-xl-1,.px-xl-1{padding-left:.25rem!important}.p-xl-2{padding:.5rem!important}.pt-xl-2,.py-xl-2{padding-top:.5rem!important}.pr-xl-2,.px-xl-2{padding-right:.5rem!important}.pb-xl-2,.py-xl-2{padding-bottom:.5rem!important}.pl-xl-2,.px-xl-2{padding-left:.5rem!important}.p-xl-3{padding:1rem!important}.pt-xl-3,.py-xl-3{padding-top:1rem!important}.pr-xl-3,.px-xl-3{padding-right:1rem!important}.pb-xl-3,.py-xl-3{padding-bottom:1rem!important}.pl-xl-3,.px-xl-3{padding-left:1rem!important}.p-xl-4{padding:1.5rem!important}.pt-xl-4,.py-xl-4{padding-top:1.5rem!important}.pr-xl-4,.px-xl-4{padding-right:1.5rem!important}.pb-xl-4,.py-xl-4{padding-bottom:1.5rem!important}.pl-xl-4,.px-xl-4{padding-left:1.5rem!important}.p-xl-5{padding:3rem!important}.pt-xl-5,.py-xl-5{padding-top:3rem!important}.pr-xl-5,.px-xl-5{padding-right:3rem!important}.pb-xl-5,.py-xl-5{padding-bottom:3rem!important}.pl-xl-5,.px-xl-5{padding-left:3rem!important}.m-xl-n1{margin:-.25rem!important}.mt-xl-n1,.my-xl-n1{margin-top:-.25rem!important}.mr-xl-n1,.mx-xl-n1{margin-right:-.25rem!important}.mb-xl-n1,.my-xl-n1{margin-bottom:-.25rem!important}.ml-xl-n1,.mx-xl-n1{margin-left:-.25rem!important}.m-xl-n2{margin:-.5rem!important}.mt-xl-n2,.my-xl-n2{margin-top:-.5rem!important}.mr-xl-n2,.mx-xl-n2{margin-right:-.5rem!important}.mb-xl-n2,.my-xl-n2{margin-bottom:-.5rem!important}.ml-xl-n2,.mx-xl-n2{margin-left:-.5rem!important}.m-xl-n3{margin:-1rem!important}.mt-xl-n3,.my-xl-n3{margin-top:-1rem!important}.mr-xl-n3,.mx-xl-n3{margin-right:-1rem!important}.mb-xl-n3,.my-xl-n3{margin-bottom:-1rem!important}.ml-xl-n3,.mx-xl-n3{margin-left:-1rem!important}.m-xl-n4{margin:-1.5rem!important}.mt-xl-n4,.my-xl-n4{margin-top:-1.5rem!important}.mr-xl-n4,.mx-xl-n4{margin-right:-1.5rem!important}.mb-xl-n4,.my-xl-n4{margin-bottom:-1.5rem!important}.ml-xl-n4,.mx-xl-n4{margin-left:-1.5rem!important}.m-xl-n5{margin:-3rem!important}.mt-xl-n5,.my-xl-n5{margin-top:-3rem!important}.mr-xl-n5,.mx-xl-n5{margin-right:-3rem!important}.mb-xl-n5,.my-xl-n5{margin-bottom:-3rem!important}.ml-xl-n5,.mx-xl-n5{margin-left:-3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto,.my-xl-auto{margin-top:auto!important}.mr-xl-auto,.mx-xl-auto{margin-right:auto!important}.mb-xl-auto,.my-xl-auto{margin-bottom:auto!important}.ml-xl-auto,.mx-xl-auto{margin-left:auto!important}}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:rgba(0,0,0,0)}.text-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important}.text-justify{text-align:justify!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-light{font-weight:300!important}.font-weight-lighter{font-weight:lighter!important}.font-weight-normal{font-weight:400!important}.font-weight-bold{font-weight:700!important}.font-weight-bolder{font-weight:bolder!important}.font-italic{font-style:italic!important}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0056b3!important}.text-secondary{color:#6c757d!important}a.text-secondary:focus,a.text-secondary:hover{color:#494f54!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#19692c!important}.text-info{color:#17a2b8!important}a.text-info:focus,a.text-info:hover{color:#0f6674!important}.text-warning{color:#ffc107!important}a.text-warning:focus,a.text-warning:hover{color:#ba8b00!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#a71d2a!important}.text-light{color:#f8f9fa!important}a.text-light:focus,a.text-light:hover{color:#cbd3da!important}.text-dark{color:#343a40!important}a.text-dark:focus,a.text-dark:hover{color:#121416!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-decoration-none{text-decoration:none!important}.text-break{word-break:break-word!important;word-wrap:break-word!important}.text-reset{color:inherit!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #adb5bd;page-break-inside:avoid}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #dee2e6!important}.table-dark{color:inherit}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#dee2e6}.table .thead-dark th{color:inherit;border-color:#dee2e6}}
/*# sourceMappingURL=bootstrap.min.css.map */
/* End external import from node_modules/bootstrap/dist/css/bootstrap.min.css */

/* Dragula */
/* External import from node_modules/dragula/dist/dragula.css */
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-user-select: none !important;

  -moz-user-select: none !important;

  -ms-user-select: none !important;

  user-select: none !important;
}
.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

/* End external import from node_modules/dragula/dist/dragula.css */

/* Custom Scrollbar */
/* External import from node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css */
/*
== malihu jquery custom scrollbar plugin ==
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
*/



/*
CONTENTS: 
	1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 
	2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 
	3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
	4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 
	5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 
	6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 
		6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
*/



/* 
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE  
------------------------------------------------------------------------------------------------------------------------
*/

	.mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ }
	.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }
	
	.mCustomScrollBox{ /* contains plugin's markup */
		position: relative;
		overflow: hidden;
		height: 100%;
		max-width: 100%;
		outline: none;
		direction: ltr;
	}

	.mCSB_container{ /* contains the original content */
		overflow: hidden;
		width: auto;
		height: auto;
	}



/* 
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR 
y-axis
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_inside > .mCSB_container{ margin-right: 30px; }

	.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
		margin-right: 0;
		margin-left: 30px;
	}
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */

	.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
		position: absolute;
		width: 16px;
		height: auto;
		left: auto;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, 
	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
		right: auto;
		left: 0;
	}
	
	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */

	.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0; 
		height: auto;
	}

	.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }

	.mCSB_scrollTools .mCSB_draggerRail{
		width: 2px;
		height: 100%;
		margin: 0 auto;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px;
 -moz-border-radius: 16px;
 border-radius: 16px;
	}

	.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
		cursor: pointer;
		width: 100%;
		height: 30px; /* minimum dragger height */
		z-index: 1;
	}

	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
		position: relative;
		width: 4px;
		height: 100%;
		margin: 0 auto;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px;
 -moz-border-radius: 16px;
 border-radius: 16px;
		text-align: center;
	}
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }

	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown{
		display: block;
		position: absolute;
		height: 20px;
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		cursor: pointer;
	}

	.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
3. HORIZONTAL SCROLLBAR 
x-axis
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_horizontal.mCSB_inside > .mCSB_container{
		margin-right: 0;
		margin-bottom: 30px;
	}
	
	.mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; }

	.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */

	.mCSB_scrollTools.mCSB_scrollTools_horizontal{
		width: auto;
		height: 16px;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
	.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */

	.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; }

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 2px;
		margin: 7px 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{
		width: 30px; /* minimum dragger width */
		height: 100%;
		left: 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 4px;
		margin: 6px auto;
	}
	
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		height: 12px; /* auto-expanded scrollbar */
		margin: 2px auto;
	}
	
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 8px; /* auto-expanded scrollbar */
		margin: 4px 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{
		display: block;
		position: absolute;
		width: 20px;
		height: 100%;
		overflow: hidden;
		margin: 0 auto;
		cursor: pointer;
	}
	
	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; }

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS 
yx-axis 
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_container_wrapper{
		position: absolute;
		height: auto;
		width: auto;
		overflow: hidden;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin-right: 30px;
		margin-bottom: 30px;
	}
	
	.mCSB_container_wrapper > .mCSB_container{
		padding-right: 30px;
		padding-bottom: 30px;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
	}
	
	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; }
	
	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; }
	
	/* non-visible horizontal scrollbar */
	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; }
	
	/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; }
	
	/* RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; }
	
	/* non-visible scrollbar/RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; }
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */
		margin-right: 0;
		margin-left: 30px;
	}
	
	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; }
	
	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; }
	
	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{
		margin-right: 0; /* non-visible scrollbar */
		margin-left: 0;
	}
	
	/* non-visible horizontal scrollbar */
	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS  
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_scrollTools, 
	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;

		-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;

		-ms-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;

		transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
	}
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
		-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-o-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out;
 
		-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out;
 
		-ms-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out;
 
		transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
	}



/* 
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS  
------------------------------------------------------------------------------------------------------------------------
*/

	/* 
	----------------------------------------
	6.1 THEMES 
	----------------------------------------
	*/
	
	/* default theme ("light") */

	.mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }
	
	.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
	.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }
	
	.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollBox:hover > .mCSB_scrollTools,
	.mCustomScrollBox:hover ~ .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

	.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.4);
		filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
	}

	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; 
	}

	.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.85);
		filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; 
	}
	.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.9);
		filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; 
	}

	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		background-image: url(mCSB_buttons.png); /* css sprites */
		background-repeat: no-repeat;
		opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
	}

	.mCSB_scrollTools .mCSB_buttonUp{
		background-position: 0 0;
		/* 
		sprites locations 
		light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
		dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonDown{
		background-position: 0 -20px;
		/* 
		sprites locations
		light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
		dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonLeft{
		background-position: 0 -40px;
		/* 
		sprites locations 
		light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
		dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonRight{
		background-position: 0 -56px;
		/* 
		sprites locations 
		light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
		dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonUp:hover,
	.mCSB_scrollTools .mCSB_buttonDown:hover,
	.mCSB_scrollTools .mCSB_buttonLeft:hover,
	.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

	.mCSB_scrollTools .mCSB_buttonUp:active,
	.mCSB_scrollTools .mCSB_buttonDown:active,
	.mCSB_scrollTools .mCSB_buttonLeft:active,
	.mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }
	

	/* theme: "dark" */

	.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

	.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); }

	.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
	
	/* ---------------------------------------- */
	


	/* theme: "light-2", "dark-2" */

	.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.1);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px;
 -moz-border-radius: 1px;
 border-radius: 1px;
	}

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px;
 -moz-border-radius: 1px;
 border-radius: 1px;
	}

	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 4px;
		margin: 6px auto;
	}

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{	background-position: -32px -20px; }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{	background-position: -40px -40px; }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; }
	
	
	/* theme: "dark-2" */

	.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.1);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px;
 -moz-border-radius: 1px;
 border-radius: 1px;
	}

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.75);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px;
 -moz-border-radius: 1px;
 border-radius: 1px;
	}

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -56px; }
	
	/* ---------------------------------------- */
	


	/* theme: "light-thick", "dark-thick" */

	.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.1);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
	}

	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 6px;
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
	}

	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 4px;
		margin: 6px 0;
	}

	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 6px;
		margin: 5px auto;
	}

	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }

	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{	background-position: -16px -20px; }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{	background-position: -20px -40px; }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; }


	/* theme: "dark-thick" */
	
	.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.1);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
	}

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.75);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
	}

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{	background-position: -100px -56px; }
	
	/* ---------------------------------------- */
	


	/* theme: "light-thin", "dark-thin" */
	
	.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); }

	.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; }

	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; }

	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 2px;
		margin: 7px auto;
	}


	/* theme "dark-thin" */
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{	background-position: -80px 0; }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */
	
	.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 14px;
		margin: 0 1px;
	}
	
	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; }
	
	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 14px;
		margin: 1px 0;
	}
	
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		width: 16px; /* auto-expanded scrollbar */
		height: 16px;
		margin: -1px 0;
	}
	
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ }
	
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		height: 16px; /* auto-expanded scrollbar */
		width: 16px;
		margin: 0 -1px;
	}
	
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 4px; /* auto-expanded scrollbar */
		margin: 6px 0;
	}
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; }
	
	
	/* theme "rounded-dark", "rounded-dots-dark" */
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; }
	
	
	/* theme "rounded-dots", "rounded-dots-dark" */
	
	.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		background-color: transparent;
		background-position: center;
	}
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
		background-repeat: repeat-y;
		opacity: 0.3;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		height: 4px;
		margin: 6px 0;
		background-repeat: repeat-x;
	}
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; }
	
	
	/* theme "rounded-dots-dark" */
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=");
	}
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; }
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; }
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; }
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */
	
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-repeat: repeat-y;
		background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
	}
	
	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		background-repeat: repeat-x;
		background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
	}
	
	
	/* theme "3d", "3d-dark" */
	
	.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, 
	.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; }
	
	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; }
	
	.mCS-3d.mCSB_scrollTools, 
	.mCS-3d-dark.mCSB_scrollTools{
		opacity: 1;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px;
 -moz-border-radius: 16px;
 border-radius: 16px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
		width: 8px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
		-webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2);

		-moz-box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2);

		box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2);
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 	 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }

	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; }

	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 8px;
		margin: 4px 0;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2);

		-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2);

		box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2);
	}

	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 8px;
		margin: 4px auto;
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "3d-dark" */
	
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.1);
		-webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1);

		-moz-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1);

		box-shadow: inset 1px 0 1px rgba(0,0,0,0.1);
	}
	
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
 box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); }
	
	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme: "3d-thick", "3d-thick-dark" */
	
	.mCS-3d-thick.mCSB_scrollTools, 
	.mCS-3d-thick-dark.mCSB_scrollTools{
		opacity: 1;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-3d-thick.mCSB_scrollTools, 
	.mCS-3d-thick-dark.mCSB_scrollTools, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 border-radius: 7px; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px; }
	
	.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, 
	.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; }
	
	.mCS-3d-thick.mCSB_scrollTools_vertical, 
	.mCS-3d-thick-dark.mCSB_scrollTools_vertical{ -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);
 -moz-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);
 box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); }
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{
		bottom: 1px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);

		-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);

		box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);
	}
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.4);

		-moz-box-shadow: inset 1px 0 0 rgba(255,255,255,0.4);

		box-shadow: inset 1px 0 0 rgba(255,255,255,0.4);
		width: 12px;
		margin: 2px;
		position: absolute;
		height: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,  
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 12px;
		width: auto;
	}
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{
		background-color: #000; background-color: rgba(0,0,0,0.05);
		-webkit-box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);

		-moz-box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);

		box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
	}
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }

	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }

	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{	background-position: -40px -128px; }
	
	
	/* theme: "3d-thick-dark" */
	
	.mCS-3d-thick-dark.mCSB_scrollTools{ -webkit-box-shadow: inset 0 0 14px rgba(0,0,0,0.2);
 -moz-box-shadow: inset 0 0 14px rgba(0,0,0,0.2);
 box-shadow: inset 0 0 14px rgba(0,0,0,0.2); }
	
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2);
 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2);
 box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2);
 -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2);
 box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); }
	 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2);
 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2);
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,  
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{
		background-color: #fff; background-color: rgba(0,0,0,0.05);
		-webkit-box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);

		-moz-box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);

		box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
	}
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme: "minimal", "minimal-dark" */
	
	.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
	.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		right: 0; 
		margin: 12px 0; 
	}
	
	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{
		bottom: 0; 
		margin: 0 12px; 
	}
	
	/* RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		left: 0; 
		right: auto;
	}
	
	.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, 
	.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; }
	
	.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; }
	
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.2);
		filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
	}
	
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.5);
		filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
	}
	
	
	/* theme: "minimal-dark" */
	
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.2);
		filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
	}
	
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.5);
		filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
	}
	
	/* ---------------------------------------- */
	
	
	
	/* theme "light-3", "dark-3" */
	
	.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{
		width: 6px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
	}

	.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; }

	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 6px;
		margin: 5px 0;
	}
	
	.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		width: 12px;
	}
	
	.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 12px;
		margin: 2px 0;
	}
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "dark-3" */
	
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
	
	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */
	
	.mCS-inset.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{
		width: 12px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
	}

	.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 
		width: 6px;
		margin: 3px 5px;
		position: absolute;
		height: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 6px;
		margin: 5px 3px;
		position: absolute;
		width: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 12px;
		margin: 2px 0;
	}
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "inset-dark", "inset-2-dark", "inset-3-dark" */
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	
	/* theme "inset-2", "inset-2-dark" */
	
	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-color: transparent;
		border-width: 1px;
		border-style: solid;
		border-color: #fff;
		border-color: rgba(255,255,255,0.2);
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
	}
	
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); }
	
	
	/* theme "inset-3", "inset-3-dark" */
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); }
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
	
	/* ---------------------------------------- */

/* End external import from node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css */

/* Date/Time Picker */
/* External import from node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css */
/*!@preserve
 * Tempus Dominus Bootstrap4 v5.39.0 (https://tempusdominus.github.io/bootstrap-4/)
 * Copyright 2016-2020 Jonathan Peterson and contributors
 * Licensed under MIT (https://github.com/tempusdominus/bootstrap-3/blob/master/LICENSE)
 */

.sr-only, .bootstrap-datetimepicker-widget table th.next::after, .bootstrap-datetimepicker-widget table th.prev::after, .bootstrap-datetimepicker-widget .picker-switch::after, .bootstrap-datetimepicker-widget .btn[data-action=today]::after, .bootstrap-datetimepicker-widget .btn[data-action=clear]::after, .bootstrap-datetimepicker-widget .btn[data-action=togglePeriod]::after, .bootstrap-datetimepicker-widget .btn[data-action=showMinutes]::after, .bootstrap-datetimepicker-widget .btn[data-action=showHours]::after, .bootstrap-datetimepicker-widget .btn[data-action=decrementMinutes]::after, .bootstrap-datetimepicker-widget .btn[data-action=decrementHours]::after, .bootstrap-datetimepicker-widget .btn[data-action=incrementMinutes]::after, .bootstrap-datetimepicker-widget .btn[data-action=incrementHours]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body.tempusdominus-bootstrap-datetimepicker-widget-day-click,
body.tempusdominus-bootstrap-datetimepicker-widget-day-click * {
  cursor: pointer !important;
}

body.tempusdominus-bootstrap-datetimepicker-widget-day-click {
  position: relative !important;
}

.tempusdominus-bootstrap-datetimepicker-widget-day-click-glass-panel {
  position: absolute;
  z-index: 999999999999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer !important;
}

.bootstrap-datetimepicker-widget .datepicker-days tbody td {
  cursor: pointer;
}

.bootstrap-datetimepicker-widget {
  list-style: none;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
  display: block;
  margin: 2px 0;
  padding: 4px;
  width: 14rem;
}
.bootstrap-datetimepicker-widget.dropdown-menu.tempusdominus-bootstrap-datetimepicker-widget-with-feather-icons {
  width: 16rem;
}
.bootstrap-datetimepicker-widget.dropdown-menu.tempusdominus-bootstrap-datetimepicker-widget-with-calendar-weeks {
  width: 16rem;
}
.bootstrap-datetimepicker-widget.dropdown-menu.tempusdominus-bootstrap-datetimepicker-widget-with-calendar-weeks.tempusdominus-bootstrap-datetimepicker-widget-with-feather-icons {
  width: 17rem;
}
@media (min-width: 576px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}
@media (min-width: 768px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}
@media (min-width: 992px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}
.bootstrap-datetimepicker-widget.dropdown-menu:before, .bootstrap-datetimepicker-widget.dropdown-menu:after {
  content: "";
  display: inline-block;
  position: absolute;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  top: -7px;
  left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  top: -6px;
  left: 8px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #ccc;
  border-top-color: rgba(0, 0, 0, 0.2);
  bottom: -7px;
  left: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  bottom: -6px;
  left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.float-right:before {
  left: auto;
  right: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
  left: auto;
  right: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.wider {
  width: 16rem;
}
.bootstrap-datetimepicker-widget .list-unstyled {
  margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
  padding: 6px 0;
}
.bootstrap-datetimepicker-widget a[data-action]:active {
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  box-shadow: none;
}
.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
  width: 54px;
  font-weight: bold;
  font-size: 1.2em;
  margin: 0;
}
.bootstrap-datetimepicker-widget button[data-action] {
  padding: 6px;
}
.bootstrap-datetimepicker-widget .btn[data-action=togglePeriod] {
  text-align: center;
  font-family: Arial, sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  width: 38px;
  height: 38px;
}
.bootstrap-datetimepicker-widget .btn[data-action=incrementHours]::after {
  content: "Increment Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action=incrementMinutes]::after {
  content: "Increment Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action=decrementHours]::after {
  content: "Decrement Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action=decrementMinutes]::after {
  content: "Decrement Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action=showHours]::after {
  content: "Show Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action=showMinutes]::after {
  content: "Show Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action=togglePeriod]::after {
  content: "Toggle AM/PM";
}
.bootstrap-datetimepicker-widget .btn[data-action=clear]::after {
  content: "Clear the picker";
}
.bootstrap-datetimepicker-widget .btn[data-action=today]::after {
  content: "Set the date to today";
}
.bootstrap-datetimepicker-widget .picker-switch {
  text-align: center;
}
.bootstrap-datetimepicker-widget .picker-switch::after {
  content: "Toggle Date and Time Screens";
}
.bootstrap-datetimepicker-widget .picker-switch td {
  padding: 0;
  margin: 0;
  height: auto;
  width: auto;
  line-height: inherit;
}
.bootstrap-datetimepicker-widget .picker-switch td span {
  line-height: 2.5;
  height: 2.5em;
  width: 100%;
}
.bootstrap-datetimepicker-widget .picker-switch.picker-switch-with-feathers-icons td span {
  line-height: 2.8;
  height: 2.8em;
}
.bootstrap-datetimepicker-widget table {
  width: 100%;
  margin: 0;
}
.bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th {
  text-align: center;
  -webkit-border-radius: 0.25rem;

  -moz-border-radius: 0.25rem;

  border-radius: 0.25rem;
}
.bootstrap-datetimepicker-widget table th {
  height: 20px;
  line-height: 20px;
  width: 20px;
}
.bootstrap-datetimepicker-widget table th.picker-switch {
  width: 145px;
}
.bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover {
  background: none;
  color: #6c757d;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table th.prev::after {
  content: "Previous Month";
}
.bootstrap-datetimepicker-widget table th.next::after {
  content: "Next Month";
}
.bootstrap-datetimepicker-widget table thead tr:first-child th {
  cursor: pointer;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  background: #e9ecef;
}
.bootstrap-datetimepicker-widget table td {
  height: 54px;
  line-height: 54px;
  width: 54px;
}
.bootstrap-datetimepicker-widget table td.cw {
  font-size: 0.8em;
  height: 20px;
  line-height: 20px;
  color: #6c757d;
  cursor: default;
}
.bootstrap-datetimepicker-widget table td.day {
  height: 20px;
  line-height: 20px;
  width: 20px;
}
.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover {
  background: #e9ecef;
  cursor: pointer;
}
.bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new {
  color: #6c757d;
}
.bootstrap-datetimepicker-widget table td.today {
  position: relative;
}
.bootstrap-datetimepicker-widget table td.today:before {
  content: "";
  display: inline-block;
  border: solid transparent;
  border-width: 0 0 7px 7px;
  border-bottom-color: #007bff;
  border-top-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 4px;
  right: 4px;
}
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #007bff;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget table td.active.today:before {
  border-bottom-color: #fff;
}
.bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover {
  background: none;
  color: #6c757d;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table td span {
  display: inline-block;
  width: 54px;
  height: 54px;
  line-height: 54px;
  margin-top: 2px;
  margin-bottom: 2px;
  cursor: pointer;
  -webkit-border-radius: 0.25rem;

  -moz-border-radius: 0.25rem;

  border-radius: 0.25rem;
}
.bootstrap-datetimepicker-widget table td span:hover {
  background: #e9ecef;
}
.bootstrap-datetimepicker-widget table td span.active {
  background-color: #007bff;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget table td span.old {
  color: #6c757d;
}
.bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover {
  background: none;
  color: #6c757d;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
  height: 27px;
  line-height: 27px;
}
.bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn {
  color: #007bff;
  color: var(--blue, #007bff);
}
.bootstrap-datetimepicker-widget .timepicker .timepicker-picker a.btn:hover {
  color: #0056b3;
}
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td.day, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td.hour, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td.minute, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td.second,
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=incrementHours], .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=incrementMinutes], .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=incrementSeconds],
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=decrementHours], .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=decrementMinutes], .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=decrementSeconds],
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=showHours], .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=showMinutes], .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=showSeconds],
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=togglePeriod] {
  pointer-events: none;
  cursor: default;
}
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td.day:hover, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td.hour:hover, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td.minute:hover, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td.second:hover,
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=incrementHours]:hover, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=incrementMinutes]:hover, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=incrementSeconds]:hover,
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=decrementHours]:hover, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=decrementMinutes]:hover, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=decrementSeconds]:hover,
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=showHours]:hover, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=showMinutes]:hover, .bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=showSeconds]:hover,
.bootstrap-datetimepicker-widget.bootstrap-datetimepicker-widget-readonly table td [data-action=togglePeriod]:hover {
  background: none;
}

.input-group [data-toggle=datetimepicker] {
  cursor: pointer;
}

/* End external import from node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css */

/* Sweet Alert */
/* External import from node_modules/sweetalert2/dist/sweetalert2.min.css */
@-webkit-keyframes swal2-show{0%{-webkit-transform:scale(.7);transform:scale(.7)}45%{-webkit-transform:scale(1.05);transform:scale(1.05)}80%{-webkit-transform:scale(.95);transform:scale(.95)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes swal2-show{0%{-webkit-transform:scale(.7);transform:scale(.7)}45%{-webkit-transform:scale(1.05);transform:scale(1.05)}80%{-webkit-transform:scale(.95);transform:scale(.95)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes swal2-hide{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}}@keyframes swal2-hide{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}}@-webkit-keyframes swal2-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.875em;width:1.5625em}}@keyframes swal2-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.875em;width:1.5625em}}@-webkit-keyframes swal2-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@keyframes swal2-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@-webkit-keyframes swal2-rotate-success-circular-line{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}5%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}12%{-webkit-transform:rotate(-405deg);transform:rotate(-405deg)}100%{-webkit-transform:rotate(-405deg);transform:rotate(-405deg)}}@keyframes swal2-rotate-success-circular-line{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}5%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}12%{-webkit-transform:rotate(-405deg);transform:rotate(-405deg)}100%{-webkit-transform:rotate(-405deg);transform:rotate(-405deg)}}@-webkit-keyframes swal2-animate-error-x-mark{0%{margin-top:1.625em;-webkit-transform:scale(.4);transform:scale(.4);opacity:0}50%{margin-top:1.625em;-webkit-transform:scale(.4);transform:scale(.4);opacity:0}80%{margin-top:-.375em;-webkit-transform:scale(1.15);transform:scale(1.15)}100%{margin-top:0;-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes swal2-animate-error-x-mark{0%{margin-top:1.625em;-webkit-transform:scale(.4);transform:scale(.4);opacity:0}50%{margin-top:1.625em;-webkit-transform:scale(.4);transform:scale(.4);opacity:0}80%{margin-top:-.375em;-webkit-transform:scale(1.15);transform:scale(1.15)}100%{margin-top:0;-webkit-transform:scale(1);transform:scale(1);opacity:1}}@-webkit-keyframes swal2-animate-error-icon{0%{-webkit-transform:rotateX(100deg);transform:rotateX(100deg);opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}}@keyframes swal2-animate-error-icon{0%{-webkit-transform:rotateX(100deg);transform:rotateX(100deg);opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}}body.swal2-toast-shown .swal2-container{background-color:transparent}body.swal2-toast-shown .swal2-container.swal2-shown{background-color:transparent}body.swal2-toast-shown .swal2-container.swal2-top{top:0;right:auto;bottom:auto;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-top-end,body.swal2-toast-shown .swal2-container.swal2-top-right{top:0;right:0;bottom:auto;left:auto}body.swal2-toast-shown .swal2-container.swal2-top-left,body.swal2-toast-shown .swal2-container.swal2-top-start{top:0;right:auto;bottom:auto;left:0}body.swal2-toast-shown .swal2-container.swal2-center-left,body.swal2-toast-shown .swal2-container.swal2-center-start{top:50%;right:auto;bottom:auto;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-center{top:50%;right:auto;bottom:auto;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}body.swal2-toast-shown .swal2-container.swal2-center-end,body.swal2-toast-shown .swal2-container.swal2-center-right{top:50%;right:0;bottom:auto;left:auto;-webkit-transform:translateY(-50%);transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-left,body.swal2-toast-shown .swal2-container.swal2-bottom-start{top:auto;right:auto;bottom:0;left:0}body.swal2-toast-shown .swal2-container.swal2-bottom{top:auto;right:auto;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-end,body.swal2-toast-shown .swal2-container.swal2-bottom-right{top:auto;right:0;bottom:0;left:auto}body.swal2-toast-column .swal2-toast{flex-direction:column;align-items:stretch}body.swal2-toast-column .swal2-toast .swal2-actions{flex:1;align-self:stretch;height:2.2em;margin-top:.3125em}body.swal2-toast-column .swal2-toast .swal2-loading{justify-content:center}body.swal2-toast-column .swal2-toast .swal2-input{height:2em;margin:.3125em auto;font-size:1em}body.swal2-toast-column .swal2-toast .swal2-validation-message{font-size:1em}.swal2-popup.swal2-toast{flex-direction:row;align-items:center;width:auto;padding:.625em;box-shadow:0 0 .625em #d9d9d9;overflow-y:hidden}.swal2-popup.swal2-toast .swal2-header{flex-direction:row}.swal2-popup.swal2-toast .swal2-title{flex-grow:1;justify-content:flex-start;margin:0 .6em;font-size:1em}.swal2-popup.swal2-toast .swal2-footer{margin:.5em 0 0;padding:.5em 0 0;font-size:.8em}.swal2-popup.swal2-toast .swal2-close{position:initial;width:.8em;height:.8em;line-height:.8}.swal2-popup.swal2-toast .swal2-content{justify-content:flex-start;font-size:1em}.swal2-popup.swal2-toast .swal2-icon{width:2em;min-width:2em;height:2em;margin:0}.swal2-popup.swal2-toast .swal2-icon-text{font-size:2em;font-weight:700;line-height:1em}.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line]{top:.875em;width:1.375em}.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{left:.3125em}.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{right:.3125em}.swal2-popup.swal2-toast .swal2-actions{height:auto;margin:0 .3125em}.swal2-popup.swal2-toast .swal2-styled{margin:0 .3125em;padding:.3125em .625em;font-size:1em}.swal2-popup.swal2-toast .swal2-styled:focus{box-shadow:0 0 0 .0625em #fff,0 0 0 .125em rgba(50,100,150,.4)}.swal2-popup.swal2-toast .swal2-success{border-color:#a5dc86}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line]{position:absolute;width:2em;height:2.8125em;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:50%}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left]{top:-.25em;left:-.9375em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:2em 2em;transform-origin:2em 2em;border-radius:4em 0 0 4em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right]{top:-.25em;left:.9375em;-webkit-transform-origin:0 2em;transform-origin:0 2em;border-radius:0 4em 4em 0}.swal2-popup.swal2-toast .swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-popup.swal2-toast .swal2-success .swal2-success-fix{top:0;left:.4375em;width:.4375em;height:2.6875em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line]{height:.3125em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip]{top:1.125em;left:.1875em;width:.75em}.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long]{top:.9375em;right:.1875em;width:1.375em}.swal2-popup.swal2-toast.swal2-show{-webkit-animation:showSweetToast .5s;animation:showSweetToast .5s}.swal2-popup.swal2-toast.swal2-hide{-webkit-animation:hideSweetToast .2s forwards;animation:hideSweetToast .2s forwards}.swal2-popup.swal2-toast .swal2-animate-success-icon .swal2-success-line-tip{-webkit-animation:animate-toast-success-tip .75s;animation:animate-toast-success-tip .75s}.swal2-popup.swal2-toast .swal2-animate-success-icon .swal2-success-line-long{-webkit-animation:animate-toast-success-long .75s;animation:animate-toast-success-long .75s}@-webkit-keyframes showSweetToast{0%{-webkit-transform:translateY(-.625em) rotateZ(2deg);transform:translateY(-.625em) rotateZ(2deg);opacity:0}33%{-webkit-transform:translateY(0) rotateZ(-2deg);transform:translateY(0) rotateZ(-2deg);opacity:.5}66%{-webkit-transform:translateY(.3125em) rotateZ(2deg);transform:translateY(.3125em) rotateZ(2deg);opacity:.7}100%{-webkit-transform:translateY(0) rotateZ(0);transform:translateY(0) rotateZ(0);opacity:1}}@keyframes showSweetToast{0%{-webkit-transform:translateY(-.625em) rotateZ(2deg);transform:translateY(-.625em) rotateZ(2deg);opacity:0}33%{-webkit-transform:translateY(0) rotateZ(-2deg);transform:translateY(0) rotateZ(-2deg);opacity:.5}66%{-webkit-transform:translateY(.3125em) rotateZ(2deg);transform:translateY(.3125em) rotateZ(2deg);opacity:.7}100%{-webkit-transform:translateY(0) rotateZ(0);transform:translateY(0) rotateZ(0);opacity:1}}@-webkit-keyframes hideSweetToast{0%{opacity:1}33%{opacity:.5}100%{-webkit-transform:rotateZ(1deg);transform:rotateZ(1deg);opacity:0}}@keyframes hideSweetToast{0%{opacity:1}33%{opacity:.5}100%{-webkit-transform:rotateZ(1deg);transform:rotateZ(1deg);opacity:0}}@-webkit-keyframes animate-toast-success-tip{0%{top:.5625em;left:.0625em;width:0}54%{top:.125em;left:.125em;width:0}70%{top:.625em;left:-.25em;width:1.625em}84%{top:1.0625em;left:.75em;width:.5em}100%{top:1.125em;left:.1875em;width:.75em}}@keyframes animate-toast-success-tip{0%{top:.5625em;left:.0625em;width:0}54%{top:.125em;left:.125em;width:0}70%{top:.625em;left:-.25em;width:1.625em}84%{top:1.0625em;left:.75em;width:.5em}100%{top:1.125em;left:.1875em;width:.75em}}@-webkit-keyframes animate-toast-success-long{0%{top:1.625em;right:1.375em;width:0}65%{top:1.25em;right:.9375em;width:0}84%{top:.9375em;right:0;width:1.125em}100%{top:.9375em;right:.1875em;width:1.375em}}@keyframes animate-toast-success-long{0%{top:1.625em;right:1.375em;width:0}65%{top:1.25em;right:.9375em;width:0}84%{top:.9375em;right:0;width:1.125em}100%{top:.9375em;right:.1875em;width:1.375em}}body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown){overflow:hidden}body.swal2-height-auto{height:auto!important}body.swal2-no-backdrop .swal2-shown{top:auto;right:auto;bottom:auto;left:auto;background-color:transparent}body.swal2-no-backdrop .swal2-shown>.swal2-modal{box-shadow:0 0 10px rgba(0,0,0,.4)}body.swal2-no-backdrop .swal2-shown.swal2-top{top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}body.swal2-no-backdrop .swal2-shown.swal2-top-left,body.swal2-no-backdrop .swal2-shown.swal2-top-start{top:0;left:0}body.swal2-no-backdrop .swal2-shown.swal2-top-end,body.swal2-no-backdrop .swal2-shown.swal2-top-right{top:0;right:0}body.swal2-no-backdrop .swal2-shown.swal2-center{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}body.swal2-no-backdrop .swal2-shown.swal2-center-left,body.swal2-no-backdrop .swal2-shown.swal2-center-start{top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}body.swal2-no-backdrop .swal2-shown.swal2-center-end,body.swal2-no-backdrop .swal2-shown.swal2-center-right{top:50%;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}body.swal2-no-backdrop .swal2-shown.swal2-bottom{bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}body.swal2-no-backdrop .swal2-shown.swal2-bottom-left,body.swal2-no-backdrop .swal2-shown.swal2-bottom-start{bottom:0;left:0}body.swal2-no-backdrop .swal2-shown.swal2-bottom-end,body.swal2-no-backdrop .swal2-shown.swal2-bottom-right{right:0;bottom:0}.swal2-container{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;flex-direction:row;align-items:center;justify-content:center;padding:10px;background-color:transparent;z-index:1060;overflow-x:hidden;-webkit-overflow-scrolling:touch}.swal2-container.swal2-top{align-items:flex-start}.swal2-container.swal2-top-left,.swal2-container.swal2-top-start{align-items:flex-start;justify-content:flex-start}.swal2-container.swal2-top-end,.swal2-container.swal2-top-right{align-items:flex-start;justify-content:flex-end}.swal2-container.swal2-center{align-items:center}.swal2-container.swal2-center-left,.swal2-container.swal2-center-start{align-items:center;justify-content:flex-start}.swal2-container.swal2-center-end,.swal2-container.swal2-center-right{align-items:center;justify-content:flex-end}.swal2-container.swal2-bottom{align-items:flex-end}.swal2-container.swal2-bottom-left,.swal2-container.swal2-bottom-start{align-items:flex-end;justify-content:flex-start}.swal2-container.swal2-bottom-end,.swal2-container.swal2-bottom-right{align-items:flex-end;justify-content:flex-end}.swal2-container.swal2-grow-fullscreen>.swal2-modal{display:flex!important;flex:1;align-self:stretch;justify-content:center}.swal2-container.swal2-grow-row>.swal2-modal{display:flex!important;flex:1;align-content:center;justify-content:center}.swal2-container.swal2-grow-column{flex:1;flex-direction:column}.swal2-container.swal2-grow-column.swal2-bottom,.swal2-container.swal2-grow-column.swal2-center,.swal2-container.swal2-grow-column.swal2-top{align-items:center}.swal2-container.swal2-grow-column.swal2-bottom-left,.swal2-container.swal2-grow-column.swal2-bottom-start,.swal2-container.swal2-grow-column.swal2-center-left,.swal2-container.swal2-grow-column.swal2-center-start,.swal2-container.swal2-grow-column.swal2-top-left,.swal2-container.swal2-grow-column.swal2-top-start{align-items:flex-start}.swal2-container.swal2-grow-column.swal2-bottom-end,.swal2-container.swal2-grow-column.swal2-bottom-right,.swal2-container.swal2-grow-column.swal2-center-end,.swal2-container.swal2-grow-column.swal2-center-right,.swal2-container.swal2-grow-column.swal2-top-end,.swal2-container.swal2-grow-column.swal2-top-right{align-items:flex-end}.swal2-container.swal2-grow-column>.swal2-modal{display:flex!important;flex:1;align-content:center;justify-content:center}.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen)>.swal2-modal{margin:auto}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.swal2-container .swal2-modal{margin:0!important}}.swal2-container.swal2-fade{transition:background-color .1s}.swal2-container.swal2-shown{background-color:rgba(0,0,0,.4)}.swal2-popup{display:none;position:relative;flex-direction:column;justify-content:center;width:32em;max-width:100%;padding:1.25em;border-radius:.3125em;background:#fff;font-family:inherit;font-size:1rem;box-sizing:border-box}.swal2-popup:focus{outline:0}.swal2-popup.swal2-loading{overflow-y:hidden}.swal2-popup .swal2-header{display:flex;flex-direction:column;align-items:center}.swal2-popup .swal2-title{display:block;position:relative;max-width:100%;margin:0 0 .4em;padding:0;color:#595959;font-size:1.875em;font-weight:600;text-align:center;text-transform:none;word-wrap:break-word}.swal2-popup .swal2-actions{flex-wrap:wrap;align-items:center;justify-content:center;margin:1.25em auto 0;z-index:1}.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled[disabled]{opacity:.4}.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:hover{background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))}.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:active{background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2))}.swal2-popup .swal2-actions.swal2-loading .swal2-styled.swal2-confirm{width:2.5em;height:2.5em;margin:.46875em;padding:0;border:.25em solid transparent;border-radius:100%;border-color:transparent;background-color:transparent!important;color:transparent;cursor:default;box-sizing:border-box;-webkit-animation:swal2-rotate-loading 1.5s linear 0s infinite normal;animation:swal2-rotate-loading 1.5s linear 0s infinite normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.swal2-popup .swal2-actions.swal2-loading .swal2-styled.swal2-cancel{margin-right:30px;margin-left:30px}.swal2-popup .swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after{display:inline-block;width:15px;height:15px;margin-left:5px;border:3px solid #999;border-radius:50%;border-right-color:transparent;box-shadow:1px 1px 1px #fff;content:'';-webkit-animation:swal2-rotate-loading 1.5s linear 0s infinite normal;animation:swal2-rotate-loading 1.5s linear 0s infinite normal}.swal2-popup .swal2-styled{margin:.3125em;padding:.625em 2em;font-weight:500;box-shadow:none}.swal2-popup .swal2-styled:not([disabled]){cursor:pointer}.swal2-popup .swal2-styled.swal2-confirm{border:0;border-radius:.25em;background:initial;background-color:#3085d6;color:#fff;font-size:1.0625em}.swal2-popup .swal2-styled.swal2-cancel{border:0;border-radius:.25em;background:initial;background-color:#aaa;color:#fff;font-size:1.0625em}.swal2-popup .swal2-styled:focus{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(50,100,150,.4)}.swal2-popup .swal2-styled::-moz-focus-inner{border:0}.swal2-popup .swal2-footer{justify-content:center;margin:1.25em 0 0;padding:1em 0 0;border-top:1px solid #eee;color:#545454;font-size:1em}.swal2-popup .swal2-image{max-width:100%;margin:1.25em auto}.swal2-popup .swal2-close{position:absolute;top:0;right:0;justify-content:center;width:1.2em;height:1.2em;padding:0;transition:color .1s ease-out;border:none;border-radius:0;outline:initial;background:0 0;color:#ccc;font-family:serif;font-size:2.5em;line-height:1.2;cursor:pointer;overflow:hidden}.swal2-popup .swal2-close:hover{-webkit-transform:none;transform:none;color:#f27474}.swal2-popup>.swal2-checkbox,.swal2-popup>.swal2-file,.swal2-popup>.swal2-input,.swal2-popup>.swal2-radio,.swal2-popup>.swal2-select,.swal2-popup>.swal2-textarea{display:none}.swal2-popup .swal2-content{justify-content:center;margin:0;padding:0;color:#545454;font-size:1.125em;font-weight:300;line-height:normal;z-index:1;word-wrap:break-word}.swal2-popup #swal2-content{text-align:center}.swal2-popup .swal2-checkbox,.swal2-popup .swal2-file,.swal2-popup .swal2-input,.swal2-popup .swal2-radio,.swal2-popup .swal2-select,.swal2-popup .swal2-textarea{margin:1em auto}.swal2-popup .swal2-file,.swal2-popup .swal2-input,.swal2-popup .swal2-textarea{width:100%;transition:border-color .3s,box-shadow .3s;border:1px solid #d9d9d9;border-radius:.1875em;font-size:1.125em;box-shadow:inset 0 1px 1px rgba(0,0,0,.06);box-sizing:border-box}.swal2-popup .swal2-file.swal2-inputerror,.swal2-popup .swal2-input.swal2-inputerror,.swal2-popup .swal2-textarea.swal2-inputerror{border-color:#f27474!important;box-shadow:0 0 2px #f27474!important}.swal2-popup .swal2-file:focus,.swal2-popup .swal2-input:focus,.swal2-popup .swal2-textarea:focus{border:1px solid #b4dbed;outline:0;box-shadow:0 0 3px #c4e6f5}.swal2-popup .swal2-file::-webkit-input-placeholder,.swal2-popup .swal2-input::-webkit-input-placeholder,.swal2-popup .swal2-textarea::-webkit-input-placeholder{color:#ccc}.swal2-popup .swal2-file:-ms-input-placeholder,.swal2-popup .swal2-input:-ms-input-placeholder,.swal2-popup .swal2-textarea:-ms-input-placeholder{color:#ccc}.swal2-popup .swal2-file::-ms-input-placeholder,.swal2-popup .swal2-input::-ms-input-placeholder,.swal2-popup .swal2-textarea::-ms-input-placeholder{color:#ccc}.swal2-popup .swal2-file::placeholder,.swal2-popup .swal2-input::placeholder,.swal2-popup .swal2-textarea::placeholder{color:#ccc}.swal2-popup .swal2-range input{width:80%}.swal2-popup .swal2-range output{width:20%;font-weight:600;text-align:center}.swal2-popup .swal2-range input,.swal2-popup .swal2-range output{height:2.625em;margin:1em auto;padding:0;font-size:1.125em;line-height:2.625em}.swal2-popup .swal2-input{height:2.625em;padding:0 .75em}.swal2-popup .swal2-input[type=number]{max-width:10em}.swal2-popup .swal2-file{font-size:1.125em}.swal2-popup .swal2-textarea{height:6.75em;padding:.75em}.swal2-popup .swal2-select{min-width:50%;max-width:100%;padding:.375em .625em;color:#545454;font-size:1.125em}.swal2-popup .swal2-checkbox,.swal2-popup .swal2-radio{align-items:center;justify-content:center}.swal2-popup .swal2-checkbox label,.swal2-popup .swal2-radio label{margin:0 .6em;font-size:1.125em}.swal2-popup .swal2-checkbox input,.swal2-popup .swal2-radio input{margin:0 .4em}.swal2-popup .swal2-validation-message{display:none;align-items:center;justify-content:center;padding:.625em;background:#f0f0f0;color:#666;font-size:1em;font-weight:300;overflow:hidden}.swal2-popup .swal2-validation-message::before{display:inline-block;width:1.5em;min-width:1.5em;height:1.5em;margin:0 .625em;border-radius:50%;background-color:#f27474;color:#fff;font-weight:600;line-height:1.5em;text-align:center;content:'!';zoom:normal}@supports (-ms-accelerator:true){.swal2-range input{width:100%!important}.swal2-range output{display:none}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.swal2-range input{width:100%!important}.swal2-range output{display:none}}@-moz-document url-prefix(){.swal2-close:focus{outline:2px solid rgba(50,100,150,.4)}}.swal2-icon{position:relative;justify-content:center;width:5em;height:5em;margin:1.25em auto 1.875em;border:.25em solid transparent;border-radius:50%;line-height:5em;cursor:default;box-sizing:content-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;zoom:normal}.swal2-icon-text{font-size:3.75em}.swal2-icon.swal2-error{border-color:#f27474}.swal2-icon.swal2-error .swal2-x-mark{position:relative;flex-grow:1}.swal2-icon.swal2-error [class^=swal2-x-mark-line]{display:block;position:absolute;top:2.3125em;width:2.9375em;height:.3125em;border-radius:.125em;background-color:#f27474}.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{left:1.0625em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{right:1em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.swal2-icon.swal2-warning{border-color:#facea8;color:#f8bb86}.swal2-icon.swal2-info{border-color:#9de0f6;color:#3fc3ee}.swal2-icon.swal2-question{border-color:#c9dae1;color:#87adbd}.swal2-icon.swal2-success{border-color:#a5dc86}.swal2-icon.swal2-success [class^=swal2-success-circular-line]{position:absolute;width:3.75em;height:7.5em;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:50%}.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left]{top:-.4375em;left:-2.0635em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:3.75em 3.75em;transform-origin:3.75em 3.75em;border-radius:7.5em 0 0 7.5em}.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right]{top:-.6875em;left:1.875em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 3.75em;transform-origin:0 3.75em;border-radius:0 7.5em 7.5em 0}.swal2-icon.swal2-success .swal2-success-ring{position:absolute;top:-.25em;left:-.25em;width:100%;height:100%;border:.25em solid rgba(165,220,134,.3);border-radius:50%;z-index:2;box-sizing:content-box}.swal2-icon.swal2-success .swal2-success-fix{position:absolute;top:.5em;left:1.625em;width:.4375em;height:5.625em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);z-index:1}.swal2-icon.swal2-success [class^=swal2-success-line]{display:block;position:absolute;height:.3125em;border-radius:.125em;background-color:#a5dc86;z-index:2}.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip]{top:2.875em;left:.875em;width:1.5625em;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.swal2-icon.swal2-success [class^=swal2-success-line][class$=long]{top:2.375em;right:.5em;width:2.9375em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.swal2-progresssteps{align-items:center;margin:0 0 1.25em;padding:0;font-weight:600}.swal2-progresssteps li{display:inline-block;position:relative}.swal2-progresssteps .swal2-progresscircle{width:2em;height:2em;border-radius:2em;background:#3085d6;color:#fff;line-height:2em;text-align:center;z-index:20}.swal2-progresssteps .swal2-progresscircle:first-child{margin-left:0}.swal2-progresssteps .swal2-progresscircle:last-child{margin-right:0}.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep{background:#3085d6}.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progresscircle{background:#add8e6}.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progressline{background:#add8e6}.swal2-progresssteps .swal2-progressline{width:2.5em;height:.4em;margin:0 -1px;background:#3085d6;z-index:10}[class^=swal2]{-webkit-tap-highlight-color:transparent}.swal2-show{-webkit-animation:swal2-show .3s;animation:swal2-show .3s}.swal2-show.swal2-noanimation{-webkit-animation:none;animation:none}.swal2-hide{-webkit-animation:swal2-hide .15s forwards;animation:swal2-hide .15s forwards}.swal2-hide.swal2-noanimation{-webkit-animation:none;animation:none}.swal2-rtl .swal2-close{right:auto;left:0}.swal2-animate-success-icon .swal2-success-line-tip{-webkit-animation:swal2-animate-success-line-tip .75s;animation:swal2-animate-success-line-tip .75s}.swal2-animate-success-icon .swal2-success-line-long{-webkit-animation:swal2-animate-success-line-long .75s;animation:swal2-animate-success-line-long .75s}.swal2-animate-success-icon .swal2-success-circular-line-right{-webkit-animation:swal2-rotate-success-circular-line 4.25s ease-in;animation:swal2-rotate-success-circular-line 4.25s ease-in}.swal2-animate-error-icon{-webkit-animation:swal2-animate-error-icon .5s;animation:swal2-animate-error-icon .5s}.swal2-animate-error-icon .swal2-x-mark{-webkit-animation:swal2-animate-error-x-mark .5s;animation:swal2-animate-error-x-mark .5s}@-webkit-keyframes swal2-rotate-loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swal2-rotate-loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@media print{body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown){overflow-y:scroll!important}body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown)>[aria-hidden=true]{display:none}body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container{position:initial!important}}
/* End external import from node_modules/sweetalert2/dist/sweetalert2.min.css */

/* Form Validation */
/* External import from resources/assets/vf/form-validation/css/formValidation.css */
/**
 * FormValidation (https://formvalidation.io)
 * The best validation library for JavaScript
 * (c) 2013 - 2018 Nguyen Huu Phuoc <me@phuoc.ng>
 */
.fv-sr-only {
  display: none; }

.fv-plugins-framework input::-ms-clear,
.fv-plugins-framework textarea::-ms-clear {
  display: none;
  height: 0;
  width: 0; }

.fv-plugins-icon-container {
  position: relative; }

.fv-plugins-icon {
  position: absolute;
  right: 0;
  text-align: center;
  top: 0; }

.fv-plugins-tooltip {
  position: absolute;
  z-index: 10000; }
  .fv-plugins-tooltip .fv-plugins-tooltip__content {
    background: #000;
    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;
    color: #eee;
    padding: 10px;
    position: relative; }
    .fv-plugins-tooltip .fv-plugins-tooltip__content:before {
      border: 8px solid transparent;
      content: '';
      position: absolute; }

.fv-plugins-tooltip--hide {
  opacity: 0; }

.fv-plugins-tooltip--top-left {
  margin-top: 8px; }
  .fv-plugins-tooltip--top-left .fv-plugins-tooltip__content:before {
    border-top-color: #000;
    left: 8px;
    top: 100%; }

.fv-plugins-tooltip--top {
  margin-top: 8px; }
  .fv-plugins-tooltip--top .fv-plugins-tooltip__content:before {
    border-top-color: #000;
    left: 50%;
    margin-left: -8px;
    top: 100%; }

.fv-plugins-tooltip--top-right {
  margin-top: 8px; }
  .fv-plugins-tooltip--top-right .fv-plugins-tooltip__content:before {
    border-top-color: #000;
    right: 8px;
    top: 100%; }

.fv-plugins-tooltip--right .fv-plugins-tooltip__content:before {
  border-right-color: #000;
  margin-top: -8px;
  right: 100%;
  top: 50%; }

.fv-plugins-tooltip--bottom-right {
  margin-top: 8px; }
  .fv-plugins-tooltip--bottom-right .fv-plugins-tooltip__content:before {
    border-bottom-color: #000;
    bottom: 100%;
    right: 8px; }

.fv-plugins-tooltip--bottom {
  margin-top: 8px; }
  .fv-plugins-tooltip--bottom .fv-plugins-tooltip__content:before {
    border-bottom-color: #000;
    bottom: 100%;
    left: 50%;
    margin-left: -8px; }

.fv-plugins-tooltip--bottom-left {
  margin-top: 8px; }
  .fv-plugins-tooltip--bottom-left .fv-plugins-tooltip__content:before {
    border-bottom-color: #000;
    bottom: 100%;
    left: 8px; }

.fv-plugins-tooltip--left .fv-plugins-tooltip__content:before {
  border-left-color: #000;
  left: 100%;
  margin-top: -8px;
  top: 50%; }

.fv-plugins-tooltip-icon {
  cursor: pointer;
  pointer-events: inherit; }

.fv-plugins-bootstrap {
  /* For horizontal form */
  /* Stacked form */
  /* Inline form */ }
  .fv-plugins-bootstrap .fv-help-block {
    color:#FFA471 !important;;
    font-size: 80%;
    margin-top: .25rem; }
  .fv-plugins-bootstrap .is-invalid ~ .form-check-label,
  .fv-plugins-bootstrap .is-valid ~ .form-check-label {
    color: inherit; }
  .fv-plugins-bootstrap .has-danger .fv-plugins-icon {
    color: #FFA471 !important; }
  .fv-plugins-bootstrap .has-success .fv-plugins-icon {
    color: #28a745; }
  .fv-plugins-bootstrap .fv-plugins-icon {
    height: 38px;
    line-height: 38px;
    width: 38px; }
  .fv-plugins-bootstrap .input-group ~ .fv-plugins-icon {
    z-index: 3; }
  .fv-plugins-bootstrap .form-group.row .fv-plugins-icon {
    right: 15px; }
  .fv-plugins-bootstrap .form-group.row .fv-plugins-icon-check {
    top: -7px;
    /* labelHeight/2 - iconHeight/2 */ }
  .fv-plugins-bootstrap:not(.form-inline) label ~ .fv-plugins-icon {
    top: 32px; }
  .fv-plugins-bootstrap:not(.form-inline) label ~ .fv-plugins-icon-check {
    top: 25px; }
  .fv-plugins-bootstrap:not(.form-inline) label.sr-only ~ .fv-plugins-icon-check {
    top: -7px; }
  .fv-plugins-bootstrap.form-inline .form-group {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: auto; }

.fv-plugins-bootstrap3 .help-block {
  margin-bottom: 0; }

.fv-plugins-bootstrap3 .input-group ~ .form-control-feedback {
  z-index: 4; }

.fv-plugins-bootstrap3.form-inline .form-group {
  vertical-align: top; }

.fv-plugins-bulma {
  /* Support add ons inside field */ }
  .fv-plugins-bulma .field.has-addons {
    flex-wrap: wrap; }
    .fv-plugins-bulma .field.has-addons::after {
      content: '';
      width: 100%; }
    .fv-plugins-bulma .field.has-addons .fv-plugins-message-container {
      order: 1; }
  .fv-plugins-bulma .icon.fv-plugins-icon-check {
    top: -4px; }
  .fv-plugins-bulma .fv-has-error .input,
  .fv-plugins-bulma .fv-has-error .textarea {
    border: 1px solid #ff3860;
    /* Same as .input.is-danger */ }
  .fv-plugins-bulma .fv-has-success .input,
  .fv-plugins-bulma .fv-has-success .textarea {
    border: 1px solid #23d160;
    /* Same as .input.is-success */ }

.fv-plugins-foundation {
  /* Stacked form */ }
  .fv-plugins-foundation .fv-plugins-icon {
    height: 39px;
    line-height: 39px;
    right: 0;
    width: 39px;
    /* Same as height of input */ }
  .fv-plugins-foundation .grid-padding-x .fv-plugins-icon {
    right: 15px; }
  .fv-plugins-foundation .fv-plugins-icon-container .cell {
    position: relative; }
  .fv-plugins-foundation [type="checkbox"] ~ .fv-plugins-icon,
  .fv-plugins-foundation [type="checkbox"] ~ .fv-plugins-icon {
    top: -7px;
    /* labelHeight/2 - iconHeight/2 */ }
  .fv-plugins-foundation.fv-stacked-form .fv-plugins-message-container {
    width: 100%; }
  .fv-plugins-foundation.fv-stacked-form label .fv-plugins-icon,
  .fv-plugins-foundation.fv-stacked-form fieldset [type="checkbox"] ~ .fv-plugins-icon,
  .fv-plugins-foundation.fv-stacked-form fieldset [type="radio"] ~ .fv-plugins-icon {
    top: 25px;
    /* Same as height of label */ }
  .fv-plugins-foundation .form-error {
    display: block; }
  .fv-plugins-foundation .fv-row__success .fv-plugins-icon {
    color: #3adb76;
    /* Same as .success */ }
  .fv-plugins-foundation .fv-row__error label,
  .fv-plugins-foundation .fv-row__error fieldset legend,
  .fv-plugins-foundation .fv-row__error .fv-plugins-icon {
    color: #cc4b37;
    /* Same as .is-invalid-label and .form-error */ }

.fv-plugins-materialize .fv-plugins-icon {
  height: 42px;
  /* Same as height of input */
  line-height: 42px;
  width: 42px; }

.fv-plugins-materialize .fv-plugins-icon-check {
  top: -10px; }

.fv-plugins-materialize .fv-invalid-row .helper-text,
.fv-plugins-materialize .fv-invalid-row .fv-plugins-icon {
  color: #F44336; }

.fv-plugins-materialize .fv-valid-row .helper-text,
.fv-plugins-materialize .fv-valid-row .fv-plugins-icon {
  color: #4CAF50; }

.fv-plugins-milligram .fv-plugins-icon {
  height: 38px;
  /* Same as height of input */
  line-height: 38px;
  width: 38px; }

.fv-plugins-milligram .column {
  position: relative; }
  .fv-plugins-milligram .column .fv-plugins-icon {
    right: 10px; }

.fv-plugins-milligram .fv-plugins-icon-check {
  top: -6px; }

.fv-plugins-milligram .fv-plugins-message-container {
  margin-bottom: 15px; }

.fv-plugins-milligram.fv-stacked-form .fv-plugins-icon {
  top: 30px; }

.fv-plugins-milligram.fv-stacked-form .fv-plugins-icon-check {
  top: 24px; }

.fv-plugins-milligram .fv-invalid-row .fv-help-block,
.fv-plugins-milligram .fv-invalid-row .fv-plugins-icon {
  color: red; }

.fv-plugins-milligram .fv-valid-row .fv-help-block,
.fv-plugins-milligram .fv-valid-row .fv-plugins-icon {
  color: green; }

.fv-plugins-mini .fv-plugins-icon {
  height: 42px;
  /* Same as height of input */
  line-height: 42px;
  width: 42px;
  top: 4px;
  /* Same as input's margin top */ }

.fv-plugins-mini .fv-plugins-icon-check {
  top: -8px; }

.fv-plugins-mini.fv-stacked-form .fv-plugins-icon {
  top: 28px; }

.fv-plugins-mini.fv-stacked-form .fv-plugins-icon-check {
  top: 20px; }

.fv-plugins-mini .fv-plugins-message-container {
  margin: calc(var(--universal-margin) / 2); }

.fv-plugins-mini .fv-invalid-row .fv-help-block,
.fv-plugins-mini .fv-invalid-row .fv-plugins-icon {
  color: var(--input-invalid-color); }

.fv-plugins-mini .fv-valid-row .fv-help-block,
.fv-plugins-mini .fv-valid-row .fv-plugins-icon {
  color: #308732;
  /* Same as tertiary color */ }

.fv-plugins-mui .fv-plugins-icon {
  height: 32px;
  /* Same as height of input */
  line-height: 32px;
  width: 32px;
  top: 15px;
  right: 4px; }

.fv-plugins-mui .fv-plugins-icon-check {
  top: -6px;
  right: -10px; }

.fv-plugins-mui .fv-plugins-message-container {
  margin: 8px 0; }

.fv-plugins-mui .fv-invalid-row .fv-help-block,
.fv-plugins-mui .fv-invalid-row .fv-plugins-icon {
  color: #F44336; }

.fv-plugins-mui .fv-valid-row .fv-help-block,
.fv-plugins-mui .fv-valid-row .fv-plugins-icon {
  color: #4CAF50; }

.fv-plugins-pure {
  /* Horizontal form */
  /* Stacked form */ }
  .fv-plugins-pure .fv-plugins-icon {
    height: 36px;
    line-height: 36px;
    width: 36px;
    /* Height of Pure input */ }
  .fv-plugins-pure .fv-has-error label,
  .fv-plugins-pure .fv-has-error .fv-help-block,
  .fv-plugins-pure .fv-has-error .fv-plugins-icon {
    color: #CA3C3C;
    /* Same as .button-error */ }
  .fv-plugins-pure .fv-has-success label,
  .fv-plugins-pure .fv-has-success .fv-help-block,
  .fv-plugins-pure .fv-has-success .fv-plugins-icon {
    color: #1CB841;
    /* Same as .button-success */ }
  .fv-plugins-pure.pure-form-aligned .fv-help-block {
    margin-top: 5px;
    margin-left: 180px; }
  .fv-plugins-pure.pure-form-aligned .fv-plugins-icon-check {
    top: -9px;
    /* labelHeight/2 - iconHeight/2 */ }
  .fv-plugins-pure.pure-form-stacked .pure-control-group {
    margin-bottom: 8px; }
  .fv-plugins-pure.pure-form-stacked .fv-plugins-icon {
    top: 22px;
    /* Same as height of label */ }
  .fv-plugins-pure.pure-form-stacked .fv-plugins-icon-check {
    top: 13px; }
  .fv-plugins-pure.pure-form-stacked .fv-sr-only ~ .fv-plugins-icon {
    top: -9px; }

.fv-plugins-semantic.ui.form .fields.error label,
.fv-plugins-semantic .error .fv-plugins-icon {
  color: #9f3a38;
  /* Same as .ui.form .field.error .input */ }

.fv-plugins-semantic .fv-plugins-icon-check {
  right: 7px; }

.fv-plugins-shoelace .input-group {
  margin-bottom: 0; }

.fv-plugins-shoelace .fv-plugins-icon {
  height: 32px;
  line-height: 32px;
  /* Same as height of input */
  width: 32px;
  top: 28px;
  /* Same as height of label */ }

.fv-plugins-shoelace .row .fv-plugins-icon {
  right: 16px;
  top: 0; }

.fv-plugins-shoelace .fv-plugins-icon-check {
  top: 24px; }

.fv-plugins-shoelace .fv-sr-only ~ .fv-plugins-icon,
.fv-plugins-shoelace .fv-sr-only ~ div .fv-plugins-icon {
  top: -4px; }

.fv-plugins-shoelace .input-valid .fv-help-block,
.fv-plugins-shoelace .input-valid .fv-plugins-icon {
  color: #2ecc40; }

.fv-plugins-shoelace .input-invalid .fv-help-block,
.fv-plugins-shoelace .input-invalid .fv-plugins-icon {
  color: #ff4136; }

.fv-plugins-spectre .form-checkbox .form-icon,
.fv-plugins-spectre .form-radio .form-icon {
  margin: 0; }

.fv-plugins-spectre .input-group .fv-plugins-icon {
  z-index: 2; }

.fv-plugins-spectre:not(.form-horizontal) .form-group.has-error .fv-plugins-icon {
  margin-top: 4px; }

.fv-plugins-spectre:not(.form-horizontal) .form-group.has-error .fv-plugins-icon-check {
  margin-top: 0; }

.fv-plugins-spectre:not(.form-horizontal) .form-group.has-success .fv-plugins-icon {
  margin-top: 15px; }

.fv-plugins-spectre:not(.form-horizontal) .form-group.has-success .fv-plugins-icon-check {
  margin-top: 0; }

.fv-plugins-tachyons .fv-plugins-icon {
  height: 36px;
  line-height: 36px;
  width: 36px; }

.fv-plugins-tachyons .fv-plugins-icon-check {
  top: -7px; }

.fv-plugins-tachyons.fv-stacked-form .fv-plugins-icon {
  top: 34px; }

.fv-plugins-tachyons.fv-stacked-form .fv-plugins-icon-check {
  top: 24px; }

.fv-plugins-turret .fv-plugins-icon {
  height: 48px;
  /* Same as height of input */
  line-height: 48px;
  width: 48px; }

.fv-plugins-turret.fv-stacked-form .fv-plugins-icon {
  top: 37px; }

.fv-plugins-turret.fv-stacked-form .fv-plugins-icon-check {
  top: 24px; }

.fv-plugins-turret .fv-invalid-row .form-message,
.fv-plugins-turret .fv-invalid-row .fv-plugins-icon {
  color: #c00;
  /* Same as .form-message.error */ }

.fv-plugins-turret .fv-valid-row .form-message,
.fv-plugins-turret .fv-valid-row .fv-plugins-icon {
  color: #00b300;
  /* Same as .form-message.success */ }

.fv-plugins-uikit {
  /* Horizontal form */
  /* Stacked form */ }
  .fv-plugins-uikit .fv-plugins-icon {
    height: 40px;
    /* Height of UIKit input */
    line-height: 40px;
    top: 25px;
    /* Height of UIKit label */
    width: 40px; }
  .fv-plugins-uikit.uk-form-horizontal .fv-plugins-icon {
    top: 0; }
  .fv-plugins-uikit.uk-form-horizontal .fv-plugins-icon-check {
    top: -11px;
    /* checkboxLabelHeight/2 - iconHeight/2 = 18/2 - 40/2 */ }
  .fv-plugins-uikit.uk-form-stacked .fv-plugins-icon-check {
    top: 15px;
    /* labelHeight + labelMarginBottom + checkboxLabelHeight/2 - iconHeight/2 = 21 + 5 + 18/2 - 40/2 */ }
  .fv-plugins-uikit.uk-form-stacked .fv-no-label .fv-plugins-icon {
    top: 0; }
  .fv-plugins-uikit.uk-form-stacked .fv-no-label .fv-plugins-icon-check {
    top: -11px; }

/* End external import from resources/assets/vf/form-validation/css/formValidation.css */

/* Toastr */
/* External import from node_modules/toastr/build/toastr.css */
.toast-title {
  font-weight: bold;
}
.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}
.toast-message a,
.toast-message label {
  color: #FFFFFF;
}
.toast-message a:hover {
  color: #CCCCCC;
  text-decoration: none;
}
.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
  line-height: 1;
}
.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}
.rtl .toast-close-button {
  left: -0.3em;
  float: left;
  right: 0.3em;
}
/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-left {
  top: 12px;
  left: 12px;
}
.toast-top-right {
  top: 12px;
  right: 12px;
}
.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}
.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}
#toast-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  /*overrides*/
}
#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;
}
#toast-container > div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;

  -moz-border-radius: 3px 3px 3px 3px;

  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999999;
  -webkit-box-shadow: 0 0 12px #999999;
  -webkit-box-shadow: 0 0 12px #999999;

  -moz-box-shadow: 0 0 12px #999999;

  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
#toast-container > div.rtl {
  direction: rtl;
  padding: 15px 50px 15px 15px;
  background-position: right 15px center;
}
#toast-container > div:hover {
  -moz-box-shadow: 0 0 12px #000000;
  -webkit-box-shadow: 0 0 12px #000000;
  -webkit-box-shadow: 0 0 12px #000000;

  -moz-box-shadow: 0 0 12px #000000;

  box-shadow: 0 0 12px #000000;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
  cursor: pointer;
}
#toast-container > .toast-info {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-success {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}
.toast {
  background-color: #030303;
}
.toast-success {
  background-color: #51A351;
}
.toast-error {
  background-color: #BD362F;
}
.toast-info {
  background-color: #2F96B4;
}
.toast-warning {
  background-color: #F89406;
}
.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}
/*Responsive Design*/
@media all and (max-width: 240px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  #toast-container > div.rtl {
    padding: 8px 50px 8px 8px;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
  #toast-container .rtl .toast-close-button {
    left: -0.2em;
    right: 0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  #toast-container > div.rtl {
    padding: 8px 50px 8px 8px;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
  #toast-container .rtl .toast-close-button {
    left: -0.2em;
    right: 0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
  #toast-container > div.rtl {
    padding: 15px 50px 15px 15px;
  }
}

/* End external import from node_modules/toastr/build/toastr.css */

/* jQuery Confirm */
/* External import from node_modules/jquery-confirm/css/jquery-confirm.css */
/*!
 * jquery-confirm v3.3.4 (http://craftpip.github.io/jquery-confirm/)
 * Author: boniface pereira
 * Website: www.craftpip.com
 * Contact: hey@craftpip.com
 *
 * Copyright 2013-2019 jquery-confirm
 * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
 */
@-webkit-keyframes jconfirm-spin {
    from {
        -webkit-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg);
    }
}

@keyframes jconfirm-spin {
    from {
        -webkit-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg);
    }
}

body[class*=jconfirm-no-scroll-] {
    overflow: hidden !important;
}

.jconfirm {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
    font-family: inherit;
    overflow: hidden;
}

.jconfirm .jconfirm-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: opacity .4s;
    -webkit-transition: opacity .4s;

    -moz-transition: opacity .4s;

    -ms-transition: opacity .4s;

    transition: opacity .4s;
}

.jconfirm .jconfirm-bg.jconfirm-bg-h {
    opacity: 0 !important;
}

.jconfirm .jconfirm-scrollpane {
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-perspective-origin: center;
    perspective-origin: center;
    display: table;
    width: 100%;
    height: 100%;
}

.jconfirm .jconfirm-row {
    display: table-row;
    width: 100%;
}

.jconfirm .jconfirm-cell {
    display: table-cell;
    vertical-align: middle;
}

.jconfirm .jconfirm-holder {
    max-height: 100%;
    padding: 50px 0;
}

.jconfirm .jconfirm-box-container {
    -webkit-transition: -webkit-transform;
    -webkit-transition: -webkit-transform;

    -moz-transition: -webkit-transform;

    -ms-transition: -webkit-transform;

    transition: -webkit-transform;
    -webkit-transition: transform;

    -moz-transition: transform;

    -ms-transition: transform;

    transition: transform;
    -webkit-transition: transform, -webkit-transform;

    -moz-transition: transform, -webkit-transform;

    -ms-transition: transform, -webkit-transform;

    transition: transform, -webkit-transform;
}

.jconfirm .jconfirm-box-container.jconfirm-no-transition {
    -webkit-transition: none !important;
    -webkit-transition: none !important;

    -moz-transition: none !important;

    -ms-transition: none !important;

    transition: none !important;
}

.jconfirm .jconfirm-box {
    background: white;
    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;
    position: relative;
    outline: none;
    padding: 15px 15px 0;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

@-webkit-keyframes type-blue {
    1%,
    100% {
        border-color: #3498db;
    }
    50% {
        border-color: #5faee3;
    }
}

@keyframes type-blue {
    1%,
    100% {
        border-color: #3498db;
    }
    50% {
        border-color: #5faee3;
    }
}

@-webkit-keyframes type-green {
    1%,
    100% {
        border-color: #2ecc71;
    }
    50% {
        border-color: #54d98c;
    }
}

@keyframes type-green {
    1%,
    100% {
        border-color: #2ecc71;
    }
    50% {
        border-color: #54d98c;
    }
}

@-webkit-keyframes type-red {
    1%,
    100% {
        border-color: #e74c3c;
    }
    50% {
        border-color: #ed7669;
    }
}

@keyframes type-red {
    1%,
    100% {
        border-color: #e74c3c;
    }
    50% {
        border-color: #ed7669;
    }
}

@-webkit-keyframes type-orange {
    1%,
    100% {
        border-color: #f1c40f;
    }
    50% {
        border-color: #f4d03f;
    }
}

@keyframes type-orange {
    1%,
    100% {
        border-color: #f1c40f;
    }
    50% {
        border-color: #f4d03f;
    }
}

@-webkit-keyframes type-purple {
    1%,
    100% {
        border-color: #9b59b6;
    }
    50% {
        border-color: #b07cc6;
    }
}

@keyframes type-purple {
    1%,
    100% {
        border-color: #9b59b6;
    }
    50% {
        border-color: #b07cc6;
    }
}

@-webkit-keyframes type-dark {
    1%,
    100% {
        border-color: #34495e;
    }
    50% {
        border-color: #46627f;
    }
}

@keyframes type-dark {
    1%,
    100% {
        border-color: #34495e;
    }
    50% {
        border-color: #46627f;
    }
}

.jconfirm .jconfirm-box.jconfirm-type-animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.jconfirm .jconfirm-box.jconfirm-type-blue {
    border-top: solid 7px #3498db;
    -webkit-animation-name: type-blue;
    animation-name: type-blue;
}

.jconfirm .jconfirm-box.jconfirm-type-green {
    border-top: solid 7px #2ecc71;
    -webkit-animation-name: type-green;
    animation-name: type-green;
}

.jconfirm .jconfirm-box.jconfirm-type-red {
    border-top: solid 7px #e74c3c;
    -webkit-animation-name: type-red;
    animation-name: type-red;
}

.jconfirm .jconfirm-box.jconfirm-type-orange {
    border-top: solid 7px #f1c40f;
    -webkit-animation-name: type-orange;
    animation-name: type-orange;
}

.jconfirm .jconfirm-box.jconfirm-type-purple {
    border-top: solid 7px #9b59b6;
    -webkit-animation-name: type-purple;
    animation-name: type-purple;
}

.jconfirm .jconfirm-box.jconfirm-type-dark {
    border-top: solid 7px #34495e;
    -webkit-animation-name: type-dark;
    animation-name: type-dark;
}

.jconfirm .jconfirm-box.loading {
    height: 120px;
}

.jconfirm .jconfirm-box.loading:before {
    content: '';
    position: absolute;
    left: 0;
    background: white;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;
    z-index: 1;
}

.jconfirm .jconfirm-box.loading:after {
    opacity: 0.6;
    content: '';
    height: 30px;
    width: 30px;
    border: solid 3px transparent;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;
    -webkit-animation: jconfirm-spin 1s infinite linear;
    -webkit-animation: jconfirm-spin 1s infinite linear;

    -moz-animation: jconfirm-spin 1s infinite linear;

    -ms-animation: jconfirm-spin 1s infinite linear;

    animation: jconfirm-spin 1s infinite linear;
    border-bottom-color: dodgerblue;
    top: 50%;
    margin-top: -15px;
    z-index: 2;
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    opacity: .6;
    text-align: center;
    font-size: 27px !important;
    line-height: 14px !important;
    display: none;
    z-index: 1;
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon:empty {
    display: none;
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon .fa {
    font-size: 16px;
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon .glyphicon {
    font-size: 16px;
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon .zmdi {
    font-size: 16px;
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon:hover {
    opacity: 1;
}

.jconfirm .jconfirm-box div.jconfirm-title-c {
    display: block;
    font-size: 22px;
    line-height: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;
    cursor: default;
    padding-bottom: 15px;
}

.jconfirm .jconfirm-box div.jconfirm-title-c.jconfirm-hand {
    cursor: move;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
    font-size: inherit;
    display: inline-block;
    vertical-align: middle;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c i {
    vertical-align: middle;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c:empty {
    display: none;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;
    font-size: inherit;
    font-family: inherit;
    display: inline-block;
    vertical-align: middle;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title:empty {
    display: none;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane {
    margin-bottom: 15px;
    height: auto;
    -webkit-transition: height 0.4s ease-in;
    -webkit-transition: height 0.4s ease-in;

    -moz-transition: height 0.4s ease-in;

    -ms-transition: height 0.4s ease-in;

    transition: height 0.4s ease-in;
    display: inline-block;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll {
    overflow-y: hidden;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar {
    width: 3px;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar-thumb {
    background: #666;
    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    overflow: auto;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content img {
    max-width: 100%;
    height: auto;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content:empty {
    display: none;
}

.jconfirm .jconfirm-box .jconfirm-buttons {
    padding-bottom: 11px;
}

.jconfirm .jconfirm-box .jconfirm-buttons > button {
    margin-bottom: 4px;
    margin-left: 2px;
    margin-right: 2px;
}

.jconfirm .jconfirm-box .jconfirm-buttons button {
    display: inline-block;
    padding: 6px 12px;
    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;
    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;
    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;
    min-height: 1em;
    -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
    -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;

    -moz-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;

    -ms-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;

    transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
    -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;

    -moz-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;

    -ms-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;

    transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;

    -moz-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;

    -ms-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;

    transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background-image: none;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue {
    background-color: #3498db;
    color: #FFF;
    text-shadow: none;
    -webkit-transition: background .2s;
    -webkit-transition: background .2s;

    -moz-transition: background .2s;

    -ms-transition: background .2s;

    transition: background .2s;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue:hover {
    background-color: #2980b9;
    color: #FFF;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-green {
    background-color: #2ecc71;
    color: #FFF;
    text-shadow: none;
    -webkit-transition: background .2s;
    -webkit-transition: background .2s;

    -moz-transition: background .2s;

    -ms-transition: background .2s;

    transition: background .2s;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-green:hover {
    background-color: #27ae60;
    color: #FFF;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red {
    background-color: #e74c3c;
    color: #FFF;
    text-shadow: none;
    -webkit-transition: background .2s;
    -webkit-transition: background .2s;

    -moz-transition: background .2s;

    -ms-transition: background .2s;

    transition: background .2s;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red:hover {
    background-color: #c0392b;
    color: #FFF;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-orange {
    background-color: #f1c40f;
    color: #FFF;
    text-shadow: none;
    -webkit-transition: background .2s;
    -webkit-transition: background .2s;

    -moz-transition: background .2s;

    -ms-transition: background .2s;

    transition: background .2s;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-orange:hover {
    background-color: #f39c12;
    color: #FFF;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default {
    background-color: #ecf0f1;
    color: #000;
    text-shadow: none;
    -webkit-transition: background .2s;
    -webkit-transition: background .2s;

    -moz-transition: background .2s;

    -ms-transition: background .2s;

    transition: background .2s;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover {
    background-color: #bdc3c7;
    color: #000;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-purple {
    background-color: #9b59b6;
    color: #FFF;
    text-shadow: none;
    -webkit-transition: background .2s;
    -webkit-transition: background .2s;

    -moz-transition: background .2s;

    -ms-transition: background .2s;

    transition: background .2s;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-purple:hover {
    background-color: #8e44ad;
    color: #FFF;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-dark {
    background-color: #34495e;
    color: #FFF;
    text-shadow: none;
    -webkit-transition: background .2s;
    -webkit-transition: background .2s;

    -moz-transition: background .2s;

    -ms-transition: background .2s;

    transition: background .2s;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-dark:hover {
    background-color: #2c3e50;
    color: #FFF;
}

.jconfirm .jconfirm-box.jconfirm-type-red .jconfirm-title-c .jconfirm-icon-c {
    color: #e74c3c !important;
}

.jconfirm .jconfirm-box.jconfirm-type-blue .jconfirm-title-c .jconfirm-icon-c {
    color: #3498db !important;
}

.jconfirm .jconfirm-box.jconfirm-type-green .jconfirm-title-c .jconfirm-icon-c {
    color: #2ecc71 !important;
}

.jconfirm .jconfirm-box.jconfirm-type-purple .jconfirm-title-c .jconfirm-icon-c {
    color: #9b59b6 !important;
}

.jconfirm .jconfirm-box.jconfirm-type-orange .jconfirm-title-c .jconfirm-icon-c {
    color: #f1c40f !important;
}

.jconfirm .jconfirm-box.jconfirm-type-dark .jconfirm-title-c .jconfirm-icon-c {
    color: #34495e !important;
}

.jconfirm .jconfirm-clear {
    clear: both;
}

.jconfirm.jconfirm-rtl {
    direction: rtl;
}

.jconfirm.jconfirm-rtl div.jconfirm-closeIcon {
    left: 5px;
    right: auto;
}

.jconfirm.jconfirm-white .jconfirm-bg,
.jconfirm.jconfirm-light .jconfirm-bg {
    background-color: #444;
    opacity: .2;
}

.jconfirm.jconfirm-white .jconfirm-box,
.jconfirm.jconfirm-light .jconfirm-box {
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
    margin-right: 8px;
    margin-left: 0px;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons {
    float: right;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default {
    -webkit-box-shadow: none;
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;
    color: #333;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default:hover,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default:hover {
    background: #ddd;
}

.jconfirm.jconfirm-white.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c,
.jconfirm.jconfirm-light.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c {
    margin-left: 8px;
    margin-right: 0px;
}

.jconfirm.jconfirm-black .jconfirm-bg,
.jconfirm.jconfirm-dark .jconfirm-bg {
    background-color: darkslategray;
    opacity: .4;
}

.jconfirm.jconfirm-black .jconfirm-box,
.jconfirm.jconfirm-dark .jconfirm-box {
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background: #444;
    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;
    color: white;
}

.jconfirm.jconfirm-black .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,
.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
    margin-right: 8px;
    margin-left: 0px;
}

.jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons,
.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons {
    float: right;
}

.jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button {
    border: none;
    background-image: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
    -webkit-transition: background .1s;
    -webkit-transition: background .1s;

    -moz-transition: background .1s;

    -ms-transition: background .1s;

    transition: background .1s;
    color: white;
}

.jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button.btn-default,
.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default {
    -webkit-box-shadow: none;
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;
    color: #fff;
    background: none;
}

.jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button.btn-default:hover,
.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default:hover {
    background: #666;
}

.jconfirm.jconfirm-black.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c,
.jconfirm.jconfirm-dark.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c {
    margin-left: 8px;
    margin-right: 0px;
}

.jconfirm .jconfirm-box.hilight.jconfirm-hilight-shake {
    -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

    -moz-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

    -ms-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);
}

.jconfirm .jconfirm-box.hilight.jconfirm-hilight-glow {
    -webkit-animation: glow 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    -webkit-animation: glow 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

    -moz-animation: glow 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

    -ms-animation: glow 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

    animation: glow 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);
}

@-webkit-keyframes shake {
    10%,
    90% {
        -webkit-transform: translate3d(-2px, 0, 0);
        -webkit-transform: translate3d(-2px, 0, 0);

        -moz-transform: translate3d(-2px, 0, 0);

        -ms-transform: translate3d(-2px, 0, 0);

        transform: translate3d(-2px, 0, 0);
    }
    20%,
    80% {
        -webkit-transform: translate3d(4px, 0, 0);
        -webkit-transform: translate3d(4px, 0, 0);

        -moz-transform: translate3d(4px, 0, 0);

        -ms-transform: translate3d(4px, 0, 0);

        transform: translate3d(4px, 0, 0);
    }
    30%,
    50%,
    70% {
        -webkit-transform: translate3d(-8px, 0, 0);
        -webkit-transform: translate3d(-8px, 0, 0);

        -moz-transform: translate3d(-8px, 0, 0);

        -ms-transform: translate3d(-8px, 0, 0);

        transform: translate3d(-8px, 0, 0);
    }
    40%,
    60% {
        -webkit-transform: translate3d(8px, 0, 0);
        -webkit-transform: translate3d(8px, 0, 0);

        -moz-transform: translate3d(8px, 0, 0);

        -ms-transform: translate3d(8px, 0, 0);

        transform: translate3d(8px, 0, 0);
    }
}

@keyframes shake {
    10%,
    90% {
        -webkit-transform: translate3d(-2px, 0, 0);
        -webkit-transform: translate3d(-2px, 0, 0);

        -moz-transform: translate3d(-2px, 0, 0);

        -ms-transform: translate3d(-2px, 0, 0);

        transform: translate3d(-2px, 0, 0);
    }
    20%,
    80% {
        -webkit-transform: translate3d(4px, 0, 0);
        -webkit-transform: translate3d(4px, 0, 0);

        -moz-transform: translate3d(4px, 0, 0);

        -ms-transform: translate3d(4px, 0, 0);

        transform: translate3d(4px, 0, 0);
    }
    30%,
    50%,
    70% {
        -webkit-transform: translate3d(-8px, 0, 0);
        -webkit-transform: translate3d(-8px, 0, 0);

        -moz-transform: translate3d(-8px, 0, 0);

        -ms-transform: translate3d(-8px, 0, 0);

        transform: translate3d(-8px, 0, 0);
    }
    40%,
    60% {
        -webkit-transform: translate3d(8px, 0, 0);
        -webkit-transform: translate3d(8px, 0, 0);

        -moz-transform: translate3d(8px, 0, 0);

        -ms-transform: translate3d(8px, 0, 0);

        transform: translate3d(8px, 0, 0);
    }
}

@-webkit-keyframes glow {
    0%,
    100% {
        -webkit-box-shadow: 0 0 0px red;
        -webkit-box-shadow: 0 0 0px red;

        -moz-box-shadow: 0 0 0px red;

        box-shadow: 0 0 0px red;
    }
    50% {
        -webkit-box-shadow: 0 0 30px red;
        -webkit-box-shadow: 0 0 30px red;

        -moz-box-shadow: 0 0 30px red;

        box-shadow: 0 0 30px red;
    }
}

@keyframes glow {
    0%,
    100% {
        -webkit-box-shadow: 0 0 0px red;
        -webkit-box-shadow: 0 0 0px red;

        -moz-box-shadow: 0 0 0px red;

        box-shadow: 0 0 0px red;
    }
    50% {
        -webkit-box-shadow: 0 0 30px red;
        -webkit-box-shadow: 0 0 30px red;

        -moz-box-shadow: 0 0 30px red;

        box-shadow: 0 0 30px red;
    }
}

/*Transition rules*/
.jconfirm {
    -webkit-perspective: 400px;
    perspective: 400px;
}

.jconfirm .jconfirm-box {
    opacity: 1;
    -webkit-transition-property: all;
    transition-property: all;
}

.jconfirm .jconfirm-box.jconfirm-animation-top,
.jconfirm .jconfirm-box.jconfirm-animation-left,
.jconfirm .jconfirm-box.jconfirm-animation-right,
.jconfirm .jconfirm-box.jconfirm-animation-bottom,
.jconfirm .jconfirm-box.jconfirm-animation-opacity,
.jconfirm .jconfirm-box.jconfirm-animation-zoom,
.jconfirm .jconfirm-box.jconfirm-animation-scale,
.jconfirm .jconfirm-box.jconfirm-animation-none,
.jconfirm .jconfirm-box.jconfirm-animation-rotate,
.jconfirm .jconfirm-box.jconfirm-animation-rotatex,
.jconfirm .jconfirm-box.jconfirm-animation-rotatey,
.jconfirm .jconfirm-box.jconfirm-animation-scaley,
.jconfirm .jconfirm-box.jconfirm-animation-scalex {
    opacity: 0;
}

.jconfirm .jconfirm-box.jconfirm-animation-rotate {
    -webkit-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);
}

.jconfirm .jconfirm-box.jconfirm-animation-rotatex {
    -webkit-transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);

    -moz-transform: rotateX(90deg);

    -ms-transform: rotateX(90deg);

    transform: rotateX(90deg);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.jconfirm-animation-rotatexr {
    -webkit-transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);

    -moz-transform: rotateX(-90deg);

    -ms-transform: rotateX(-90deg);

    transform: rotateX(-90deg);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.jconfirm-animation-rotatey {
    -webkit-transform: rotatey(90deg);
    -webkit-transform: rotatey(90deg);

    -moz-transform: rotatey(90deg);

    -ms-transform: rotatey(90deg);

    transform: rotatey(90deg);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.jconfirm-animation-rotateyr {
    -webkit-transform: rotatey(-90deg);
    -webkit-transform: rotatey(-90deg);

    -moz-transform: rotatey(-90deg);

    -ms-transform: rotatey(-90deg);

    transform: rotatey(-90deg);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.jconfirm-animation-scaley {
    -webkit-transform: scaley(1.5);
    -webkit-transform: scaley(1.5);

    -moz-transform: scaley(1.5);

    -ms-transform: scaley(1.5);

    transform: scaley(1.5);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.jconfirm-animation-scalex {
    -webkit-transform: scalex(1.5);
    -webkit-transform: scalex(1.5);

    -moz-transform: scalex(1.5);

    -ms-transform: scalex(1.5);

    transform: scalex(1.5);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.jconfirm-animation-top {
    -webkit-transform: translate(0px, -100px);
    -webkit-transform: translate(0px, -100px);

    -moz-transform: translate(0px, -100px);

    -ms-transform: translate(0px, -100px);

    transform: translate(0px, -100px);
}

.jconfirm .jconfirm-box.jconfirm-animation-left {
    -webkit-transform: translate(-100px, 0px);
    -webkit-transform: translate(-100px, 0px);

    -moz-transform: translate(-100px, 0px);

    -ms-transform: translate(-100px, 0px);

    transform: translate(-100px, 0px);
}

.jconfirm .jconfirm-box.jconfirm-animation-right {
    -webkit-transform: translate(100px, 0px);
    -webkit-transform: translate(100px, 0px);

    -moz-transform: translate(100px, 0px);

    -ms-transform: translate(100px, 0px);

    transform: translate(100px, 0px);
}

.jconfirm .jconfirm-box.jconfirm-animation-bottom {
    -webkit-transform: translate(0px, 100px);
    -webkit-transform: translate(0px, 100px);

    -moz-transform: translate(0px, 100px);

    -ms-transform: translate(0px, 100px);

    transform: translate(0px, 100px);
}

.jconfirm .jconfirm-box.jconfirm-animation-zoom {
    -webkit-transform: scale(1.2);
    -webkit-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -ms-transform: scale(1.2);

    transform: scale(1.2);
}

.jconfirm .jconfirm-box.jconfirm-animation-scale {
    -webkit-transform: scale(0.5);
    -webkit-transform: scale(0.5);

    -moz-transform: scale(0.5);

    -ms-transform: scale(0.5);

    transform: scale(0.5);
}

.jconfirm .jconfirm-box.jconfirm-animation-none {
    visibility: hidden;
}

.jconfirm.jconfirm-supervan .jconfirm-bg {
    background-color: rgba(54, 70, 93, 0.95);
}

.jconfirm.jconfirm-supervan .jconfirm-box {
    background-color: transparent;
}

.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-blue {
    border: none;
}

.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-green {
    border: none;
}

.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-red {
    border: none;
}

.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-orange {
    border: none;
}

.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-purple {
    border: none;
}

.jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-dark {
    border: none;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-closeIcon {
    color: white;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c {
    text-align: center;
    color: white;
    font-size: 28px;
    font-weight: normal;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c > * {
    padding-bottom: 25px;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
    margin-right: 8px;
    margin-left: 0px;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content-pane {
    margin-bottom: 25px;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content {
    text-align: center;
    color: white;
}

.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons {
    text-align: center;
}

.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button {
    font-size: 16px;
    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;
    background: #303f53;
    text-shadow: none;
    border: none;
    color: white;
    padding: 10px;
    min-width: 100px;
}

.jconfirm.jconfirm-supervan.jconfirm-rtl .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
    margin-left: 8px;
    margin-right: 0px;
}

.jconfirm.jconfirm-material .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.67);
}

.jconfirm.jconfirm-material .jconfirm-box {
    background-color: white;
    -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);

    -moz-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);

    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 30px 25px 10px 25px;
}

.jconfirm.jconfirm-material .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
    margin-right: 8px;
    margin-left: 0px;
}

.jconfirm.jconfirm-material .jconfirm-box div.jconfirm-closeIcon {
    color: rgba(0, 0, 0, 0.87);
}

.jconfirm.jconfirm-material .jconfirm-box div.jconfirm-title-c {
    color: rgba(0, 0, 0, 0.87);
    font-size: 22px;
    font-weight: bold;
}

.jconfirm.jconfirm-material .jconfirm-box div.jconfirm-content {
    color: rgba(0, 0, 0, 0.87);
}

.jconfirm.jconfirm-material .jconfirm-box .jconfirm-buttons {
    text-align: right;
}

.jconfirm.jconfirm-material .jconfirm-box .jconfirm-buttons button {
    text-transform: uppercase;
    font-weight: 500;
}

.jconfirm.jconfirm-material.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c {
    margin-left: 8px;
    margin-right: 0px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.21);
}

.jconfirm.jconfirm-bootstrap .jconfirm-box {
    background-color: white;
    -webkit-box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2);

    -moz-box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2);

    box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2);
    border: solid 1px rgba(0, 0, 0, 0.4);
    padding: 15px 0 0;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
    margin-right: 8px;
    margin-left: 0px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-closeIcon {
    color: rgba(0, 0, 0, 0.87);
}

.jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c {
    color: rgba(0, 0, 0, 0.87);
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-content {
    color: rgba(0, 0, 0, 0.87);
    padding: 0px 15px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons {
    text-align: right;
    padding: 10px;
    margin: -5px 0 0px;
    border-top: solid 1px #ddd;
    overflow: hidden;
    -webkit-border-radius: 0 0 4px 4px;

    -moz-border-radius: 0 0 4px 4px;

    border-radius: 0 0 4px 4px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button {
    font-weight: 500;
}

.jconfirm.jconfirm-bootstrap.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c {
    margin-left: 8px;
    margin-right: 0px;
}

.jconfirm.jconfirm-modern .jconfirm-bg {
    background-color: slategray;
    opacity: .6;
}

.jconfirm.jconfirm-modern .jconfirm-box {
    background-color: white;
    -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);

    -moz-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);

    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 30px 30px 15px;
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-closeIcon {
    color: rgba(0, 0, 0, 0.87);
    top: 15px;
    right: 15px;
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c {
    color: rgba(0, 0, 0, 0.87);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
    -webkit-transition: -webkit-transform .5s;
    -webkit-transition: -webkit-transform .5s;

    -moz-transition: -webkit-transform .5s;

    -ms-transition: -webkit-transform .5s;

    transition: -webkit-transform .5s;
    -webkit-transition: transform .5s;

    -moz-transition: transform .5s;

    -ms-transition: transform .5s;

    transition: transform .5s;
    -webkit-transition: transform .5s, -webkit-transform .5s;

    -moz-transition: transform .5s, -webkit-transform .5s;

    -ms-transition: transform .5s, -webkit-transform .5s;

    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: scale(0);
    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);
    display: block;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
    font-size: 69px;
    color: #aaa;
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content {
    text-align: center;
    font-size: 15px;
    color: #777;
    margin-bottom: 25px;
}

.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons {
    text-align: center;
}

.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button {
    font-weight: bold;
    text-transform: uppercase;
    -webkit-transition: background .1s;
    -webkit-transition: background .1s;

    -moz-transition: background .1s;

    -ms-transition: background .1s;

    transition: background .1s;
    padding: 10px 20px;
}

.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button + button {
    margin-left: 4px;
}

.jconfirm.jconfirm-modern.jconfirm-open .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
    -webkit-transform: scale(1);
    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);
}

/* End external import from node_modules/jquery-confirm/css/jquery-confirm.css */

/* DataTables */
/* External import from node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css */
@charset "UTF-8";
:root {
  --dt-row-selected: 2, 117, 216;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 9, 10, 11;
  --dt-row-stripe: 0, 0, 0;
  --dt-row-hover: 0, 0, 0;
  --dt-column-ordering: 0, 0, 0;
  --dt-html-background: white;
}
:root.dark {
  --dt-html-background: rgb(33, 37, 41);
}

table.dataTable td.dt-control {
  text-align: center;
  cursor: pointer;
}
table.dataTable td.dt-control:before {
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  content: "▶";
}
table.dataTable tr.dt-hasChild td.dt-control:before {
  content: "▼";
}

html.dark table.dataTable td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable td.dt-control:before {
  color: rgba(255, 255, 255, 0.5);
}
html.dark table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before {
  color: rgba(255, 255, 255, 0.5);
}

table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting_asc_disabled,
table.dataTable thead > tr > td.sorting_desc_disabled {
  cursor: pointer;
  position: relative;
  padding-right: 26px;
}
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
  position: absolute;
  display: block;
  opacity: 0.125;
  right: 10px;
  line-height: 9px;
  font-size: 0.8em;
}
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before {
  bottom: 50%;
  content: "▲";
  content: "▲"/"";
}
table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
  top: 50%;
  content: "▼";
  content: "▼"/"";
}
table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:after {
  opacity: 0.6;
}
table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting_asc_disabled:before {
  display: none;
}
table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
  outline: none;
}

div.dataTables_scrollBody > table.dataTable > thead > tr > th:before, div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,
div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,
div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {
  display: none;
}

div.dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 2px;
  z-index: 10;
}
div.dataTables_processing > div:last-child {
  position: relative;
  width: 80px;
  height: 15px;
  margin: 1em auto;
}
div.dataTables_processing > div:last-child > div {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  border-radius: 50%;
  background: rgb(2, 117, 216);
  background: rgb(var(--dt-row-selected));
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div.dataTables_processing > div:last-child > div:nth-child(1) {
  left: 8px;
  -webkit-animation: datatables-loader-1 0.6s infinite;

  -moz-animation: datatables-loader-1 0.6s infinite;

  -ms-animation: datatables-loader-1 0.6s infinite;

  animation: datatables-loader-1 0.6s infinite;
}
div.dataTables_processing > div:last-child > div:nth-child(2) {
  left: 8px;
  -webkit-animation: datatables-loader-2 0.6s infinite;

  -moz-animation: datatables-loader-2 0.6s infinite;

  -ms-animation: datatables-loader-2 0.6s infinite;

  animation: datatables-loader-2 0.6s infinite;
}
div.dataTables_processing > div:last-child > div:nth-child(3) {
  left: 32px;
  -webkit-animation: datatables-loader-2 0.6s infinite;

  -moz-animation: datatables-loader-2 0.6s infinite;

  -ms-animation: datatables-loader-2 0.6s infinite;

  animation: datatables-loader-2 0.6s infinite;
}
div.dataTables_processing > div:last-child > div:nth-child(4) {
  left: 56px;
  -webkit-animation: datatables-loader-3 0.6s infinite;

  -moz-animation: datatables-loader-3 0.6s infinite;

  -ms-animation: datatables-loader-3 0.6s infinite;

  animation: datatables-loader-3 0.6s infinite;
}

@keyframes datatables-loader-1 {
  0% {
    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);
  }
}
@keyframes datatables-loader-3 {
  0% {
    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);
  }
}
@keyframes datatables-loader-2 {
  0% {
    -webkit-transform: translate(0, 0);

    -moz-transform: translate(0, 0);

    -ms-transform: translate(0, 0);

    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(24px, 0);

    -moz-transform: translate(24px, 0);

    -ms-transform: translate(24px, 0);

    transform: translate(24px, 0);
  }
}
table.dataTable.nowrap th, table.dataTable.nowrap td {
  white-space: nowrap;
}
table.dataTable th.dt-left,
table.dataTable td.dt-left {
  text-align: left;
}
table.dataTable th.dt-center,
table.dataTable td.dt-center,
table.dataTable td.dataTables_empty {
  text-align: center;
}
table.dataTable th.dt-right,
table.dataTable td.dt-right {
  text-align: right;
}
table.dataTable th.dt-justify,
table.dataTable td.dt-justify {
  text-align: justify;
}
table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
  white-space: nowrap;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  text-align: left;
}
table.dataTable thead th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable tfoot td.dt-head-left {
  text-align: left;
}
table.dataTable thead th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable tfoot td.dt-head-center {
  text-align: center;
}
table.dataTable thead th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable tfoot td.dt-head-right {
  text-align: right;
}
table.dataTable thead th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable tfoot td.dt-head-justify {
  text-align: justify;
}
table.dataTable thead th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
  white-space: nowrap;
}
table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
  text-align: left;
}
table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
  text-align: center;
}
table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
  text-align: right;
}
table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
  text-align: justify;
}
table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
  white-space: nowrap;
}

table.dataTable {
  clear: both;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0;
}
table.dataTable td,
table.dataTable th {
  -webkit-box-sizing: content-box;
  -webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  box-sizing: content-box;
}
table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
  text-align: center;
}
table.dataTable.nowrap th,
table.dataTable.nowrap td {
  white-space: nowrap;
}
table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) {
  background-color: transparent;
}
table.dataTable > tbody > tr {
  background-color: transparent;
}
table.dataTable > tbody > tr.selected > * {
  -webkit-box-shadow: inset 0 0 0 9999px rgb(2, 117, 216);

  -moz-box-shadow: inset 0 0 0 9999px rgb(2, 117, 216);

  box-shadow: inset 0 0 0 9999px rgb(2, 117, 216);
  -webkit-box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));

  -moz-box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));

  box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
  color: rgb(255, 255, 255);
  color: rgb(var(--dt-row-selected-text));
}
table.dataTable > tbody > tr.selected a {
  color: rgb(9, 10, 11);
  color: rgb(var(--dt-row-selected-link));
}
table.dataTable.table-striped > tbody > tr.odd > * {
  -webkit-box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05);

  -moz-box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05);

  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05);
}
table.dataTable.table-striped > tbody > tr.odd.selected > * {
  -webkit-box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.95);

  -moz-box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.95);

  box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.95);
  -webkit-box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95);

  -moz-box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95);

  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95);
}
table.dataTable.table-hover > tbody > tr:hover > * {
  -webkit-box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075);

  -moz-box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075);

  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075);
}
table.dataTable.table-hover > tbody > tr.selected:hover > * {
  -webkit-box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.975);

  -moz-box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.975);

  box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.975);
  -webkit-box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975);

  -moz-box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975);

  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975);
}

div.dataTables_wrapper div.dataTables_length label {
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_length select {
  width: auto;
  display: inline-block;
}
div.dataTables_wrapper div.dataTables_filter {
  text-align: right;
}
div.dataTables_wrapper div.dataTables_filter label {
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
}
div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0.5em;
  display: inline-block;
  width: auto;
}
div.dataTables_wrapper div.dataTables_info {
  padding-top: 0.85em;
}
div.dataTables_wrapper div.dataTables_paginate {
  margin: 0;
  white-space: nowrap;
  text-align: right;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 2px 0;
  white-space: nowrap;
  justify-content: flex-end;
}
div.dataTables_wrapper div.dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 1em 0;
}

div.dataTables_scrollHead table.dataTable {
  margin-bottom: 0 !important;
}

div.dataTables_scrollBody > table {
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
div.dataTables_scrollBody > table > thead .sorting:before,
div.dataTables_scrollBody > table > thead .sorting_asc:before,
div.dataTables_scrollBody > table > thead .sorting_desc:before,
div.dataTables_scrollBody > table > thead .sorting:after,
div.dataTables_scrollBody > table > thead .sorting_asc:after,
div.dataTables_scrollBody > table > thead .sorting_desc:after {
  display: none;
}
div.dataTables_scrollBody > table > tbody tr:first-child th,
div.dataTables_scrollBody > table > tbody tr:first-child td {
  border-top: none;
}

div.dataTables_scrollFoot > .dataTables_scrollFootInner {
  -webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  box-sizing: content-box;
}
div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
  margin-top: 0 !important;
  border-top: none;
}

@media screen and (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_filter,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: center;
  }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center !important;
  }
}
table.dataTable.table-sm > thead > tr > th:not(.sorting_disabled) {
  padding-right: 20px;
}

table.table-bordered.dataTable {
  border-right-width: 0;
}
table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
  border-left-width: 0;
}
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
  border-right-width: 1px;
}
table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
  border-bottom-width: 0;
}

div.dataTables_scrollHead table.table-bordered {
  border-bottom-width: 0;
}

div.table-responsive > div.dataTables_wrapper > div.row {
  margin: 0;
}
div.table-responsive > div.dataTables_wrapper > div.row > div[class^=col-]:first-child {
  padding-left: 0;
}
div.table-responsive > div.dataTables_wrapper > div.row > div[class^=col-]:last-child {
  padding-right: 0;
}

/* End external import from node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css */
/* External import from node_modules/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css */
@keyframes dtb-spinner{100%{transform:rotate(360deg)}}@-o-keyframes dtb-spinner{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes dtb-spinner{100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dtb-spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes dtb-spinner{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}div.dt-button-info{position:fixed;top:50%;left:50%;width:400px;margin-top:-100px;margin-left:-200px;background-color:white;border:2px solid #111;box-shadow:3px 3px 8px rgba(0, 0, 0, 0.3);border-radius:3px;text-align:center;z-index:21}div.dt-button-info h2{padding:.5em;margin:0;font-weight:normal;border-bottom:1px solid #ddd;background-color:#f3f3f3}div.dt-button-info>div{padding:1em}div.dt-button-collection-title{text-align:center;padding:.3em 0 .5em;font-size:.9em}div.dt-button-collection-title:empty{display:none}div.dt-button-collection{position:absolute;z-index:2001}div.dt-button-collection div.dropdown-menu{display:block;z-index:2002;min-width:100%}div.dt-button-collection div.dt-button-collection-title{background-color:white;border:1px solid rgba(0, 0, 0, 0.15)}div.dt-button-collection.fixed{position:fixed;top:50%;left:50%;margin-left:-75px;border-radius:0}div.dt-button-collection.fixed.two-column{margin-left:-200px}div.dt-button-collection.fixed.three-column{margin-left:-225px}div.dt-button-collection.fixed.four-column{margin-left:-300px}div.dt-button-collection>:last-child{display:block !important;-webkit-column-gap:8px;-moz-column-gap:8px;-ms-column-gap:8px;-o-column-gap:8px;column-gap:8px}div.dt-button-collection>:last-child>*{-webkit-column-break-inside:avoid;break-inside:avoid}div.dt-button-collection.two-column{width:400px}div.dt-button-collection.two-column>:last-child{padding-bottom:1px;-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}div.dt-button-collection.three-column{width:450px}div.dt-button-collection.three-column>:last-child{padding-bottom:1px;-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}div.dt-button-collection.four-column{width:600px}div.dt-button-collection.four-column>:last-child{padding-bottom:1px;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}div.dt-button-collection .dt-button{border-radius:0}div.dt-button-collection.fixed{max-width:none}div.dt-button-collection.fixed:before,div.dt-button-collection.fixed:after{display:none}div.dt-button-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999}@media screen and (max-width: 767px){div.dt-buttons{float:none;width:100%;text-align:center;margin-bottom:.5em}div.dt-buttons a.btn{float:none}}div.dt-buttons button.btn.processing,div.dt-buttons div.btn.processing,div.dt-buttons a.btn.processing{color:rgba(0, 0, 0, 0.2)}div.dt-buttons button.btn.processing:after,div.dt-buttons div.btn.processing:after,div.dt-buttons a.btn.processing:after{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;display:block;content:" ";border:2px solid #282828;border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:dtb-spinner 1500ms infinite linear;-o-animation:dtb-spinner 1500ms infinite linear;-ms-animation:dtb-spinner 1500ms infinite linear;-webkit-animation:dtb-spinner 1500ms infinite linear;-moz-animation:dtb-spinner 1500ms infinite linear}

/* End external import from node_modules/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css */
/* External import from node_modules/datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css */
div.dt-autofill-handle{position:absolute;height:10px;width:10px;z-index:10;box-sizing:border-box;background:#0275d8;cursor:pointer}div.dtk-focus-alt div.dt-autofill-handle{background:#ff8b33}div.dt-autofill-select{position:absolute;z-index:1001;background-color:#0275d8;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px)}div.dt-autofill-select.top,div.dt-autofill-select.bottom{height:3px;margin-top:-1px}div.dt-autofill-select.left,div.dt-autofill-select.right{width:3px;margin-left:-1px}div.dt-autofill-list{position:fixed;top:50%;left:50%;width:500px;margin-left:-250px;background-color:white;border-radius:.75em;box-shadow:0 12px 30px rgba(0, 0, 0, 0.6);z-index:104;box-sizing:border-box;padding:2em}div.dt-autofill-list div.dtaf-popover-close{position:absolute;top:6px;right:6px;width:22px;height:22px;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dt-autofill-list>div.dt-autofill-list-items>button{display:block;width:100%;margin:1em 0;padding:1em;border-radius:.5em;border:1px solid rgba(0, 0, 0, 0.175);background-color:#f6f6f6;text-align:left;cursor:pointer}div.dt-autofill-list>div.dt-autofill-list-items>button:hover{background-color:#ebebeb}div.dt-autofill-list>div.dt-autofill-list-items>button:first-child{margin-top:0}div.dt-autofill-list>div.dt-autofill-list-items>button:last-child{margin-bottom:0}div.dt-autofill-list>div.dt-autofill-list-items>button input[type=number]{display:inline-block;box-sizing:border-box;padding:6px;width:70px;margin:-2px 0}div.dt-autofill-list>div.dt-autofill-list-items>button span{float:right}div.dtaf-popover-closeable{padding-top:2.5em}div.dt-autofill-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);background:radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);z-index:103}html.dark div.dt-autofill-handle{background:rgb(110, 168, 254)}html.dark div.dt-autofill-select{position:absolute;z-index:1001;background-color:rgb(110, 168, 254);background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0, 0, 0, 0.5) 5px, rgba(0, 0, 0, 0.5) 10px)}html.dark div.dt-autofill-list{background-color:var(--dt-html-background);border:1px solid rgba(255, 255, 255, 0.15)}html.dark div.dt-autofill-list button{color:inherit;border:1px solid rgba(255, 255, 255, 0.175);background-color:rgb(47, 52, 56)}html.dark div.dt-autofill-list button:hover{background-color:rgb(64, 69, 73)}@media screen and (max-width: 767px){div.dt-autofill-handle{height:16px;width:16px}div.dt-autofill-list{width:90%;left:74.5%}}div.dt-autofill-list div.dt-autofill-question input[type=number]{padding:6px;width:60px;margin:-2px 0}

/* End external import from node_modules/datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css */
/* External import from node_modules/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css */
table.DTCR_clonedTable.dataTable{position:absolute !important;background-color:rgba(255, 255, 255, 0.7);z-index:202;border-radius:4px}div.DTCR_pointer{width:1px;background-color:#0275d8;z-index:201}html.dark table.DTCR_clonedTable.dataTable{background-color:rgba(33, 33, 33, 0.9)}html.dark div.DTCR_pointer{background-color:#6ea8fe}

/* End external import from node_modules/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css */
/* External import from node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css */
table.DTFC_Cloned tr{background-color:white;margin-bottom:0}div.DTFC_LeftHeadWrapper table,div.DTFC_RightHeadWrapper table{border-bottom:none !important;margin-bottom:0 !important;background-color:white}div.DTFC_LeftBodyWrapper table,div.DTFC_RightBodyWrapper table{border-top:none;margin:0 !important;z-index:2}div.DTFC_LeftBodyWrapper table thead .sorting:before,div.DTFC_LeftBodyWrapper table thead .sorting:after,div.DTFC_LeftBodyWrapper table thead .sorting_asc:before,div.DTFC_LeftBodyWrapper table thead .sorting_asc:after,div.DTFC_LeftBodyWrapper table thead .sorting_desc:before,div.DTFC_LeftBodyWrapper table thead .sorting_desc:after,div.DTFC_LeftBodyWrapper table thead .sorting:before,div.DTFC_LeftBodyWrapper table thead .sorting:after,div.DTFC_LeftBodyWrapper table thead .sorting_asc:before,div.DTFC_LeftBodyWrapper table thead .sorting_asc:after,div.DTFC_LeftBodyWrapper table thead .sorting_desc:before,div.DTFC_LeftBodyWrapper table thead .sorting_desc:after,div.DTFC_RightBodyWrapper table thead .sorting:before,div.DTFC_RightBodyWrapper table thead .sorting:after,div.DTFC_RightBodyWrapper table thead .sorting_asc:before,div.DTFC_RightBodyWrapper table thead .sorting_asc:after,div.DTFC_RightBodyWrapper table thead .sorting_desc:before,div.DTFC_RightBodyWrapper table thead .sorting_desc:after,div.DTFC_RightBodyWrapper table thead .sorting:before,div.DTFC_RightBodyWrapper table thead .sorting:after,div.DTFC_RightBodyWrapper table thead .sorting_asc:before,div.DTFC_RightBodyWrapper table thead .sorting_asc:after,div.DTFC_RightBodyWrapper table thead .sorting_desc:before,div.DTFC_RightBodyWrapper table thead .sorting_desc:after{display:none}div.DTFC_LeftBodyWrapper table tbody tr:first-child th,div.DTFC_LeftBodyWrapper table tbody tr:first-child td,div.DTFC_RightBodyWrapper table tbody tr:first-child th,div.DTFC_RightBodyWrapper table tbody tr:first-child td{border-top:none}div.DTFC_LeftFootWrapper table,div.DTFC_RightFootWrapper table{border-top:none;margin-top:0 !important;background-color:white}div.DTFC_Blocker{background-color:white}table.dataTable.table-striped.DTFC_Cloned tbody{background-color:white}

/* End external import from node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css */
/* External import from node_modules/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css */
table.dataTable.fixedHeader-floating,table.dataTable.fixedHeader-locked{background-color:white;margin-top:0 !important;margin-bottom:0 !important}table.dataTable.fixedHeader-locked{position:absolute !important}@media print{table.fixedHeader-floating{display:none}}

/* End external import from node_modules/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css */
/* External import from node_modules/datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css */
table.dataTable tbody th.focus,table.dataTable tbody td.focus{outline:2px solid #0275d8;outline-offset:-2px}table.dataTable tbody tr.selected th.focus,table.dataTable tbody tr.selected td.focus{outline-color:#013e73}div.dtk-focus-alt table.dataTable tbody th.focus,div.dtk-focus-alt table.dataTable tbody td.focus{outline:2px solid #ff8b33;outline-offset:-2px}html.dark table.dataTable tbody th.focus,html.dark table.dataTable tbody td.focus{outline-color:rgb(13, 110, 253)}html.dark table.dataTable tbody tr.selected th.focus,html.dark table.dataTable tbody tr.selected td.focus{outline-color:#0143a3}html.dark div.dtk-focus-alt table.dataTable tbody th.focus,html.dark div.dtk-focus-alt table.dataTable tbody td.focus{outline-color:#ff8b33}

/* End external import from node_modules/datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css */
/* External import from node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control{cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before{margin-right:.5em;display:inline-block;color:rgba(0, 0, 0, 0.5);content:"►"}table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control.arrow-right::before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control.arrow-right::before{content:"◄"}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before{content:"▼"}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td.dtr-control,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th.dtr-control{padding-left:.333em}table.dataTable.dtr-column>tbody>tr>td.dtr-control,table.dataTable.dtr-column>tbody>tr>th.dtr-control,table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.dtr-control:before,table.dataTable.dtr-column>tbody>tr>th.dtr-control:before,table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{display:inline-block;color:rgba(0, 0, 0, 0.5);content:"►"}table.dataTable.dtr-column>tbody>tr>td.dtr-control.arrow-right::before,table.dataTable.dtr-column>tbody>tr>th.dtr-control.arrow-right::before,table.dataTable.dtr-column>tbody>tr>td.control.arrow-right::before,table.dataTable.dtr-column>tbody>tr>th.control.arrow-right::before{content:"◄"}table.dataTable.dtr-column>tbody>tr.parent td.dtr-control:before,table.dataTable.dtr-column>tbody>tr.parent th.dtr-control:before,table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:"▼"}table.dataTable>tbody>tr.child{padding:.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul.dtr-details{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul.dtr-details>li{border-bottom:1px solid #efefef;padding:.5em 0}table.dataTable>tbody>tr.child ul.dtr-details>li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul.dtr-details>li:last-child{padding-bottom:0;border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:fit-content;max-height:75%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:.5em;box-shadow:0 12px 30px rgba(0, 0, 0, 0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:2.5em}div.dtr-modal div.dtr-modal-content h2{margin-top:0}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0, 0, 0, 0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}html.dark table.dataTable>tbody>tr>td.dtr-control:before{color:rgba(255, 255, 255, 0.5) !important}html.dark table.dataTable>tbody>tr.child ul.dtr-details>li{border-bottom-color:#404346}html.dark div.dtr-modal div.dtr-modal-display{background-color:#212529;border:1px solid rgba(255, 255, 255, 0.15)}div.dtr-bs-modal table.table tr:first-child td{border-top:none}

/* End external import from node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css */
/* External import from node_modules/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css */
table.dataTable tr.dtrg-group th{background-color:rgba(0, 0, 0, 0.1);text-align:left}table.dataTable tr.dtrg-group.dtrg-level-0 th{font-weight:bold}table.dataTable tr.dtrg-group.dtrg-level-1 th,table.dataTable tr.dtrg-group.dtrg-level-2 th,table.dataTable tr.dtrg-group.dtrg-level-3 th,table.dataTable tr.dtrg-group.dtrg-level-4 th,table.dataTable tr.dtrg-group.dtrg-level-5 th{background-color:rgba(0, 0, 0, 0.05);padding-top:.25em;padding-bottom:.25em;padding-left:2em;font-size:.9em}table.dataTable tr.dtrg-group.dtrg-level-2 th{background-color:rgba(0, 0, 0, 0.01);padding-left:2.5em}table.dataTable tr.dtrg-group.dtrg-level-3 th{background-color:rgba(0, 0, 0, 0.01);padding-left:3em}table.dataTable tr.dtrg-group.dtrg-level-4 th{background-color:rgba(0, 0, 0, 0.01);padding-left:3.5em}table.dataTable tr.dtrg-group.dtrg-level-5 th{background-color:rgba(0, 0, 0, 0.01);padding-left:4em}html.dark table.dataTable tr.dtrg-group th{background-color:rgba(255, 255, 255, 0.1)}html.dark table.dataTable tr.dtrg-group.dtrg-level-1 th{background-color:rgba(255, 255, 255, 0.05)}html.dark table.dataTable tr.dtrg-group.dtrg-level-2 th,html.dark table.dataTable tr.dtrg-group.dtrg-level-3 th,html.dark table.dataTable tr.dtrg-group.dtrg-level-4 th,html.dark table.dataTable tr.dtrg-group.dtrg-level-5 th{background-color:rgba(255, 255, 255, 0.01)}

/* End external import from node_modules/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css */
/* External import from node_modules/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css */
div.dt-rowReorder-float-parent{table-layout:fixed;outline:2px solid #0275d8;z-index:2001;position:absolute !important;overflow:hidden;border-radius:3px}div.dt-rowReorder-float-parent table.dt-rowReorder-float{opacity:.9;background-color:white;margin:0 !important}div.dt-rowReorder-float-parent.drop-not-allowed{cursor:not-allowed}tr.dt-rowReorder-moving{outline:2px solid #888;outline-offset:-2px}body.dt-rowReorder-noOverflow{overflow-x:hidden}table.dataTable td.reorder{text-align:center;cursor:move}html.dark div.dt-rowReorder-float-parent{outline-color:rgb(110, 168, 254)}html.dark div.dt-rowReorder-float-parent table.dt-rowReorder-float{background-color:var(--dt-html-background)}html.dark tr.dt-rowReorder-moving{outline-color:#aaa}

/* End external import from node_modules/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css */
/* External import from node_modules/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css */
div.DTS{display:block !important}div.DTS tbody th,div.DTS tbody td{white-space:nowrap}div.DTS div.DTS_Loading{z-index:1}div.DTS div.dataTables_scrollBody{background:repeating-linear-gradient(45deg, #edeeff, #edeeff 10px, #fff 10px, #fff 20px)}div.DTS div.dataTables_scrollBody table{z-index:2}div.DTS div.dataTables_paginate,div.DTS div.dataTables_length{display:none}div.DTS div.dataTables_scrollBody table{background-color:white}

/* End external import from node_modules/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css */
/* External import from node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css */
table.dataTable>tbody>tr>.selected{background-color:rgba(13, 110, 253, 0.9);color:white}table.dataTable>tbody>tr>td.select-checkbox,table.dataTable>tbody>tr>th.select-checkbox{position:relative}table.dataTable>tbody>tr>td.select-checkbox:before,table.dataTable>tbody>tr>td.select-checkbox:after,table.dataTable>tbody>tr>th.select-checkbox:before,table.dataTable>tbody>tr>th.select-checkbox:after{display:block;position:absolute;top:50%;left:50%;width:12px;height:12px;box-sizing:border-box}table.dataTable>tbody>tr>td.select-checkbox:before,table.dataTable>tbody>tr>th.select-checkbox:before{content:" ";margin-top:-6px;margin-left:-6px;border:1px solid black;border-radius:3px}table.dataTable>tbody>tr.selected>td.select-checkbox:before,table.dataTable>tbody>tr.selected>th.select-checkbox:before{border:1px solid white}table.dataTable>tbody>tr.selected>td.select-checkbox:after,table.dataTable>tbody>tr.selected>th.select-checkbox:after{content:"✓";font-size:20px;margin-top:-12px;margin-left:-6px;text-align:center}table.dataTable.compact>tbody>tr>td.select-checkbox:before,table.dataTable.compact>tbody>tr>th.select-checkbox:before{margin-top:-12px}table.dataTable.compact>tbody>tr.selected>td.select-checkbox:after,table.dataTable.compact>tbody>tr.selected>th.select-checkbox:after{margin-top:-16px}div.dataTables_wrapper span.select-info,div.dataTables_wrapper span.select-item{margin-left:.5em}html.dark table.dataTable>tbody>tr>td.select-checkbox:before,html.dark table.dataTable>tbody>tr>th.select-checkbox:before,html[data-bs-theme=dark] table.dataTable>tbody>tr>td.select-checkbox:before,html[data-bs-theme=dark] table.dataTable>tbody>tr>th.select-checkbox:before{border:1px solid rgba(255, 255, 255, 0.6)}@media screen and (max-width: 640px){div.dataTables_wrapper span.select-info,div.dataTables_wrapper span.select-item{margin-left:0;display:block}}

/* End external import from node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css */
/* External import from public/css/datatable-custom.css */
#ionsunDataTable th, #ionsunDataTable td {
    word-break: break-all;
}

.dataTables_processing {
    background-color: #fff;
    z-index: 9999999;
    padding: 0!important;
    border: 0!important;
    top:40%!important;
}

#vhSystemLoaderData {
    -webkit-box-shadow: 0 1px 5px rgb(234 228 228 / 89);

    -moz-box-shadow: 0 1px 5px rgb(234 228 228 / 89);

    box-shadow: 0 1px 5px rgb(234 228 228 / 89);
    width: 145px;
    height: 147px;
}

/* End external import from public/css/datatable-custom.css */

/* Animate.css */
/* External import from node_modules/animate.css/animate.compat.css */
@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.repeat-1{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-count:var(--animate-repeat);animation-iteration-count:var(--animate-repeat)}.animated.repeat-2{-webkit-animation-iteration-count:2;animation-iteration-count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-iteration-count:calc(var(--animate-repeat)*2)}.animated.repeat-3{-webkit-animation-iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-repeat)*3)}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--animate-duration)/2);animation-duration:calc(var(--animate-duration)/2)}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-duration:calc(var(--animate-duration)*0.8)}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-duration)*3)}@media (prefers-reduced-motion:reduce),print{.animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;-webkit-transition-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}.animated[class*=Out]{opacity:0}}@-webkit-keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0) scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0) scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0) scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0) scaleY(1.02)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shakeX{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shakeX{-webkit-animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes shakeY{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}20%,40%,60%,80%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.shakeY{-webkit-animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInDown{0%{-webkit-transform:translateY(-1200px) scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInDown{-webkit-animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInLeft{0%{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInLeft{-webkit-animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInRight{0%{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInRight{-webkit-animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes backInUp{0%{-webkit-transform:translateY(1200px) scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInUp{-webkit-animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(700px) scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.backOutDown{-webkit-animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px) scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.backOutLeft{-webkit-animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px) scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.backOutRight{-webkit-animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-webkit-transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px) scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.backOutUp{-webkit-animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0) scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0) scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0) scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0) scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0) scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0) scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0) scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0) scaleX(.995)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0) scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0) scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0) scaleY(.985)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0) scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0) scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0) scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0) scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0) scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInTopLeft{-webkit-animation-name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInTopRight{-webkit-animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInBottomLeft{-webkit-animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInBottomRight{0%{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInBottomRight{-webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-100%,0)}}.fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,-100%,0);transform:translate3d(100%,-100%,0)}}.fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyframes fadeOutBottomRight{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.fadeOutBottomRight{-webkit-animation-name:fadeOutBottomRight;animation-name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(-100%,100%,0);transform:translate3d(-100%,100%,0)}}.fadeOutBottomLeft{-webkit-animation-name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0) skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOutRight{-webkit-animation-name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}}.lightSpeedOutLeft{-webkit-animation-name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{opacity:1}to{-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{opacity:1}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{opacity:1}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-transform-origin:top left;transform-origin:top left}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-origin:left center;transform-origin:left center}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right center;transform-origin:right center}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
/* End external import from node_modules/animate.css/animate.compat.css */

/* Froala Editor */
/* External import from public/froalav4/css/froala_editor.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-element,.fr-element:focus{outline:0 solid transparent}.fr-view.fr-element-scroll-visible{overflow-x:visible !important}.fr-box.fr-basic{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-basic .fr-element{font-family:sans-serif;color:#414141;font-size:14px;line-height:1.6;padding:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow-x:auto;min-height:60px;text-align:left}.fr-box.fr-basic.fr-rtl .fr-element{text-align:right}.fr-element{background:transparent;position:relative;z-index:2;-webkit-user-select:auto}.fr-element a{user-select:auto;-o-user-select:auto;-moz-user-select:auto;-khtml-user-select:auto;-webkit-user-select:auto;-ms-user-select:auto}.fr-element.fr-disabled{user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.fr-element [contenteditable="true"]{outline:0 solid transparent}.fr-box a.fr-floating-btn{-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;height:40px;width:40px;text-align:center;background:#FFF;color:#333333;-webkit-transition:background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;-moz-transition:background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;-ms-transition:background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;-o-transition:background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;outline:none;left:0;top:0;line-height:40px;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);text-align:center;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none}.fr-box a.fr-floating-btn svg{-webkit-transition:transform 0.2s ease 0s;-moz-transition:transform 0.2s ease 0s;-ms-transition:transform 0.2s ease 0s;-o-transition:transform 0.2s ease 0s;fill:#333333}.fr-box a.fr-floating-btn i,.fr-box a.fr-floating-btn svg{font-size:14px;line-height:40px}.fr-box a.fr-floating-btn.fr-btn+.fr-btn{margin-left:10px}.fr-box a.fr-floating-btn:hover{background:#ebebeb;cursor:pointer}.fr-box a.fr-floating-btn:hover svg{fill:#333333}.fr-box .fr-visible a.fr-floating-btn{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1)}iframe.fr-iframe{width:100%;border:none;position:relative;display:block;z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-wrapper{position:relative;z-index:1}.fr-wrapper::after{clear:both;display:block;content:"";height:0}.fr-wrapper .fr-placeholder{position:absolute;font-size:14px;color:#AAA;font-family:sans-serif;z-index:1;display:none;top:0;left:0;right:0;overflow:hidden}.fr-wrapper.show-placeholder .fr-placeholder{display:block;white-space:nowrap;text-overflow:ellipsis}.fr-wrapper ::-moz-selection{background:rgba(181,214,253,0.8);color:#000}.fr-wrapper ::selection{background:rgba(181,214,253,0.8);color:#000}.fr-box.fr-basic .fr-wrapper{background:#FFF;border:1px solid #CCCCCC;border-bottom-color:#efefef;top:0;left:0}.fr-box.fr-basic.fr-top .fr-wrapper{border-top:0}.fr-box.fr-basic.fr-bottom .fr-wrapper{border-bottom:0;border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}@media (min-width: 992px){.fr-box.fr-document{min-width:21cm}.fr-box.fr-document .fr-wrapper{text-align:left;padding:30px;min-width:21cm;background:#efefef}.fr-box.fr-document .fr-wrapper .fr-element{text-align:left;background:#FFF;width:21cm;margin:auto;min-height:26cm !important;padding:1cm 2cm;overflow:visible;z-index:auto}.fr-box.fr-document .fr-wrapper .fr-element hr{margin-left:-2cm;margin-right:-2cm;background:#efefef;height:1cm;outline:none;border:none}.fr-box.fr-document .fr-wrapper .fr-element img{z-index:1}}.fr-tooltip{position:absolute;top:0;left:0;padding:0 8px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background:#222222;color:#FFF;font-size:11px;line-height:22px;font-family:Arial, Helvetica, sans-serif;-webkit-transition:opacity 0.2s ease 0s;-moz-transition:opacity 0.2s ease 0s;-ms-transition:opacity 0.2s ease 0s;-o-transition:opacity 0.2s ease 0s;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";left:-3000px;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;z-index:2147483647;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fr-tooltip.fr-visible{-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}.fr-toolbar .fr-btn-wrap,.fr-popup .fr-btn-wrap,.fr-modal .fr-btn-wrap{float:left;white-space:nowrap;position:relative}.fr-toolbar .fr-btn-wrap.fr-hidden,.fr-popup .fr-btn-wrap.fr-hidden,.fr-modal .fr-btn-wrap.fr-hidden{display:none}.fr-toolbar .fr-command.fr-btn,.fr-popup .fr-command.fr-btn,.fr-modal .fr-command.fr-btn{background:transparent;color:#333333;-moz-outline:0;outline:none;border:0;line-height:1;cursor:pointer;text-align:left;margin:4px 2px;padding:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;z-index:2;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;float:left;height:40px}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-options,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-options,.fr-modal .fr-command.fr-btn.fr-dropdown.fr-options{border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0 4px 4px 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar .fr-command.fr-btn.fr-btn-hover,.fr-popup .fr-command.fr-btn.fr-btn-hover,.fr-modal .fr-command.fr-btn.fr-btn-hover{border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar .fr-command.fr-btn::-moz-focus-inner,.fr-popup .fr-command.fr-btn::-moz-focus-inner,.fr-modal .fr-command.fr-btn::-moz-focus-inner{border:0;padding:0}.fr-toolbar .fr-command.fr-btn.fr-btn-text,.fr-popup .fr-command.fr-btn.fr-btn-text,.fr-modal .fr-command.fr-btn.fr-btn-text{width:auto}.fr-toolbar .fr-command.fr-btn i,.fr-toolbar .fr-command.fr-btn svg,.fr-popup .fr-command.fr-btn i,.fr-popup .fr-command.fr-btn svg,.fr-modal .fr-command.fr-btn i,.fr-modal .fr-command.fr-btn svg{display:block;text-align:center;float:none;margin:8px 7px;width:24px}.fr-toolbar .fr-command.fr-btn svg.fr-svg,.fr-popup .fr-command.fr-btn svg.fr-svg,.fr-modal .fr-command.fr-btn svg.fr-svg{height:24px}.fr-toolbar .fr-command.fr-btn svg path,.fr-popup .fr-command.fr-btn svg path,.fr-modal .fr-command.fr-btn svg path{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;fill:#333333}.fr-toolbar .fr-command.fr-btn span.fr-sr-only,.fr-popup .fr-command.fr-btn span.fr-sr-only,.fr-modal .fr-command.fr-btn span.fr-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-toolbar .fr-command.fr-btn span,.fr-popup .fr-command.fr-btn span,.fr-modal .fr-command.fr-btn span{font-size:14px;display:block;line-height:17px;min-width:30px;float:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:17px;font-weight:bold;padding:0 4px}.fr-toolbar .fr-command.fr-btn img,.fr-popup .fr-command.fr-btn img,.fr-modal .fr-command.fr-btn img{margin:8px 7px;width:24px}.fr-toolbar .fr-command.fr-btn.fr-btn-active-popup,.fr-popup .fr-command.fr-btn.fr-btn-active-popup,.fr-modal .fr-command.fr-btn.fr-btn-active-popup{background:#d6d6d6}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection span,.fr-modal .fr-command.fr-btn.fr-dropdown.fr-selection span{font-weight:normal}.fr-toolbar .fr-command.fr-btn.fr-dropdown i,.fr-toolbar .fr-command.fr-btn.fr-dropdown span,.fr-toolbar .fr-command.fr-btn.fr-dropdown img,.fr-toolbar .fr-command.fr-btn.fr-dropdown svg,.fr-popup .fr-command.fr-btn.fr-dropdown i,.fr-popup .fr-command.fr-btn.fr-dropdown span,.fr-popup .fr-command.fr-btn.fr-dropdown img,.fr-popup .fr-command.fr-btn.fr-dropdown svg,.fr-modal .fr-command.fr-btn.fr-dropdown i,.fr-modal .fr-command.fr-btn.fr-dropdown span,.fr-modal .fr-command.fr-btn.fr-dropdown img,.fr-modal .fr-command.fr-btn.fr-dropdown svg{margin-left:3px;margin-right:11px}.fr-toolbar .fr-command.fr-btn.fr-dropdown:after,.fr-popup .fr-command.fr-btn.fr-dropdown:after,.fr-modal .fr-command.fr-btn.fr-dropdown:after{position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #333333;right:2px;top:18px;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;content:""}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active,.fr-modal .fr-command.fr-btn.fr-dropdown.fr-active{fill:#333333;background:#d6d6d6;-webkit-transition:0.5s ease;-moz-transition:0.5s ease;-ms-transition:0.5s ease;-o-transition:0.5s ease}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover,.fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:hover{background:#ebebeb;fill:#333333}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after,.fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:hover::after{border-top-color:#333333}.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:after,.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:after,.fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:after{border-top:0;border-bottom:4px solid #222222}.fr-toolbar .fr-command.fr-btn.fr-disabled,.fr-popup .fr-command.fr-btn.fr-disabled,.fr-modal .fr-command.fr-btn.fr-disabled{color:#bdbdbd;cursor:default;-webkit-opacity:0.3;-moz-opacity:0.3;opacity:0.3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}.fr-toolbar .fr-command.fr-btn.fr-disabled::after,.fr-popup .fr-command.fr-btn.fr-disabled::after,.fr-modal .fr-command.fr-btn.fr-disabled::after{border-top-color:#bdbdbd}.fr-toolbar .fr-command.fr-btn.fr-hidden,.fr-popup .fr-command.fr-btn.fr-hidden,.fr-modal .fr-command.fr-btn.fr-hidden{display:none}.fr-toolbar .fr-tabs .fr-command.fr-btn,.fr-popup .fr-tabs .fr-command.fr-btn,.fr-modal .fr-tabs .fr-command.fr-btn{margin:0;width:46px;height:40px;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active,.fr-toolbar .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active-tab,.fr-popup .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active,.fr-popup .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active-tab,.fr-modal .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active,.fr-modal .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active-tab{background:#FFF}.fr-toolbar .fr-tabs .fr-command.fr-btn span,.fr-popup .fr-tabs .fr-command.fr-btn span,.fr-modal .fr-tabs .fr-command.fr-btn span{height:27px}.fr-toolbar .fr-tabs .fr-command.fr-btn img,.fr-toolbar .fr-tabs .fr-command.fr-btn svg,.fr-popup .fr-tabs .fr-command.fr-btn img,.fr-popup .fr-tabs .fr-command.fr-btn svg,.fr-modal .fr-tabs .fr-command.fr-btn img,.fr-modal .fr-tabs .fr-command.fr-btn svg{margin:8px 11px;width:24px;height:24px}.fr-toolbar .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,.fr-toolbar .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,.fr-toolbar .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,.fr-popup .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,.fr-popup .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,.fr-popup .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,.fr-modal .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,.fr-modal .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,.fr-modal .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path{fill:#0098f7}.fr-toolbar.fr-disabled .fr-btn,.fr-toolbar.fr-disabled .fr-btn.fr-active,.fr-popup.fr-disabled .fr-btn,.fr-popup.fr-disabled .fr-btn.fr-active,.fr-modal.fr-disabled .fr-btn,.fr-modal.fr-disabled .fr-btn.fr-active{color:#bdbdbd;-webkit-opacity:0.3;-moz-opacity:0.3;opacity:0.3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}.fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after,.fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after,.fr-popup.fr-disabled .fr-btn.fr-dropdown::after,.fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after,.fr-modal.fr-disabled .fr-btn.fr-dropdown::after,.fr-modal.fr-disabled .fr-btn.fr-active.fr-dropdown::after{border-top-color:#bdbdbd}.fr-toolbar.fr-rtl .fr-btn-grp.fr-float-left,.fr-popup.fr-rtl .fr-btn-grp.fr-float-left,.fr-modal.fr-rtl .fr-btn-grp.fr-float-left{float:right}.fr-toolbar.fr-rtl .fr-btn-grp.fr-float-right,.fr-popup.fr-rtl .fr-btn-grp.fr-float-right,.fr-modal.fr-rtl .fr-btn-grp.fr-float-right{float:left}.fr-toolbar.fr-rtl .fr-command.fr-btn,.fr-toolbar.fr-rtl .fr-btn-wrap,.fr-popup.fr-rtl .fr-command.fr-btn,.fr-popup.fr-rtl .fr-btn-wrap,.fr-modal.fr-rtl .fr-command.fr-btn,.fr-modal.fr-rtl .fr-btn-wrap{float:right}.fr-toolbar.fr-rtl .fr-command.fr-btn.fr-dropdown.fr-options,.fr-toolbar.fr-rtl .fr-btn-wrap.fr-dropdown.fr-options,.fr-popup.fr-rtl .fr-command.fr-btn.fr-dropdown.fr-options,.fr-popup.fr-rtl .fr-btn-wrap.fr-dropdown.fr-options,.fr-modal.fr-rtl .fr-command.fr-btn.fr-dropdown.fr-options,.fr-modal.fr-rtl .fr-btn-wrap.fr-dropdown.fr-options{border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar.fr-rtl .fr-command.fr-btn.fr-btn-hover,.fr-toolbar.fr-rtl .fr-btn-wrap.fr-btn-hover,.fr-popup.fr-rtl .fr-command.fr-btn.fr-btn-hover,.fr-popup.fr-rtl .fr-btn-wrap.fr-btn-hover,.fr-modal.fr-rtl .fr-command.fr-btn.fr-btn-hover,.fr-modal.fr-rtl .fr-btn-wrap.fr-btn-hover{border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0 4px 4px 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar.fr-inline>.fr-command.fr-btn:not(.fr-hidden),.fr-toolbar.fr-inline>.fr-btn-wrap:not(.fr-hidden){display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;float:none}.fr-desktop .fr-command:hover,.fr-desktop .fr-command:focus,.fr-desktop .fr-command.fr-btn-hover,.fr-desktop .fr-command.fr-expanded{outline:0;color:#333333}.fr-desktop .fr-command:hover:not(.fr-table-cell),.fr-desktop .fr-command:focus:not(.fr-table-cell),.fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell),.fr-desktop .fr-command.fr-expanded:not(.fr-table-cell){background:#ebebeb}.fr-desktop .fr-command:hover::after,.fr-desktop .fr-command:focus::after,.fr-desktop .fr-command.fr-btn-hover::after,.fr-desktop .fr-command.fr-expanded::after{border-top-color:#333333}.fr-desktop .fr-command.fr-selected:not(.fr-table-cell),.fr-desktop .fr-command:active{color:#333333;background:#d6d6d6}.fr-desktop .fr-command.fr-active:hover,.fr-desktop .fr-command.fr-active:focus,.fr-desktop .fr-command.fr-active.fr-btn-hover,.fr-desktop .fr-command.fr-active.fr-expanded{background:#ebebeb}.fr-desktop .fr-command.fr-active:active{background:#d6d6d6}.fr-desktop .fr-command.fr-disabled:hover,.fr-desktop .fr-command.fr-disabled:focus,.fr-desktop .fr-command.fr-disabled.fr-selected{background:transparent}.fr-desktop.fr-disabled .fr-command:hover,.fr-desktop.fr-disabled .fr-command:focus,.fr-desktop.fr-disabled .fr-command.fr-selected{background:transparent}.fr-toolbar.fr-mobile .fr-command.fr-blink,.fr-popup.fr-mobile .fr-command.fr-blink{background:#d6d6d6}.fr-command.fr-btn.fr-options{width:16px;margin-left:-5px}.fr-command.fr-btn.fr-options.fr-btn-hover,.fr-command.fr-btn.fr-options:hover,.fr-command.fr-btn.fr-options:focus{border-left:solid 1px #FAFAFA;-webkit-transition:border-left 0s, background-color 0.5s;-moz-transition:border-left 0s, background-color 0.5s;-ms-transition:border-left 0s, background-color 0.5s;-o-transition:border-left 0s, background-color 0.5s}.fr-command.fr-btn+.fr-dropdown-menu{background:#FFF;display:inline-block;position:absolute;right:auto;bottom:auto;height:auto;z-index:4;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-overflow-scrolling:touch;overflow:hidden;zoom:1;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)}.fr-command.fr-btn+.fr-dropdown-menu.test-height .fr-dropdown-wrapper{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;height:auto;max-height:275px}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper{padding:0;margin:auto;display:inline-block;text-align:left;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:height 0.3s;-moz-transition:height 0.3s;-ms-transition:height 0.3s;-o-transition:height 0.3s;margin-top:0;float:left;height:0;margin-top:0 !important}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content{position:relative}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list{list-style-type:none;margin:0;padding:8px 0;min-width:72px}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li{padding:0;margin:0;font-size:15px}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a{padding:0 20px;line-height:200%;display:flex;cursor:pointer;white-space:nowrap;color:inherit;text-decoration:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a svg{width:24px;height:24px;margin:3px 4px}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a svg path{fill:#333333}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active{background:#d6d6d6}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled{color:#bdbdbd;cursor:default}.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a .fr-shortcut{margin-left:20px;font-weight:bold;-webkit-opacity:0.75;-moz-opacity:0.75;opacity:0.75}.fr-command.fr-btn.fr-active+.fr-dropdown-menu{display:inline-block;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)}.fr-bottom>.fr-command.fr-btn+.fr-dropdown-menu{border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar.fr-rtl .fr-dropdown-wrapper,.fr-popup.fr-rtl .fr-dropdown-wrapper{text-align:right !important}body.fr-prevent-scroll{overflow:hidden}body.fr-prevent-scroll.fr-mobile{position:fixed;-webkit-overflow-scrolling:touch}.fr-modal{color:#222222;font-family:Arial, Helvetica, sans-serif;position:fixed;overflow-x:auto;overflow-y:scroll;top:0;left:0;bottom:0;right:0;width:100%;z-index:2147483640;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;line-height:1.2}.fr-modal.fr-middle .fr-modal-wrapper{margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);position:absolute}.fr-modal .fr-modal-wrapper{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-clip:padding-box;margin:20px auto;display:inline-block;background:#FFF;min-width:300px;-webkit-box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);border:0;overflow:hidden;width:90%;position:relative}@media (min-width: 768px) and (max-width: 991px){.fr-modal .fr-modal-wrapper{margin:30px auto;width:70%}}@media (min-width: 992px){.fr-modal .fr-modal-wrapper{margin:50px auto;width:960px}}.fr-modal .fr-modal-wrapper .fr-modal-head{background:#FFF;overflow:hidden;position:absolute;width:100%;min-height:42px;z-index:3;border-bottom:solid #efefef 1px;-webkit-transition:all 0.2s ease 0s;-moz-transition:all 0.2s ease 0s;-ms-transition:all 0.2s ease 0s;-o-transition:all 0.2s ease 0s}.fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-head-line{height:56px;padding:0 10px}.fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close{margin:10px;position:absolute;top:0;right:0}.fr-modal .fr-modal-wrapper .fr-modal-head h4{font-size:20px;padding:19px 10px;margin:0;font-weight:400;line-height:18px;display:inline-block;float:left}.fr-modal .fr-modal-wrapper div.fr-modal-body{height:100%;min-height:150px;overflow-y:auto;padding-bottom:20px}.fr-modal .fr-modal-wrapper div.fr-modal-body:focus{outline:0}.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command{height:36px;line-height:1;color:#0098f7;padding:10px;cursor:pointer;text-decoration:none;border:none;background:none;font-size:16px;outline:none;-webkit-transition:background 0.2s ease 0s;-moz-transition:background 0.2s ease 0s;-ms-transition:background 0.2s ease 0s;-o-transition:background 0.2s ease 0s;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command+button{margin-left:24px}.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover,.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus{background:#ebebeb;color:#0098f7}.fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active{background:#d6d6d6;color:#0098f7}.fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner{border:0}.fr-desktop .fr-modal-wrapper .fr-modal-head i:hover{background:#ebebeb}.fr-overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:#000;-webkit-opacity:0.5;-moz-opacity:0.5;opacity:0.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";z-index:2147483639}ol.decimal_type{counter-reset:item}ol.decimal_type>li{display:block;position:relative}ol.decimal_type>li:before{content:counters(item,".") ". ";counter-increment:item;position:absolute;margin-right:100%;right:10px}.fr-popup{position:absolute;display:none;color:#222222;background:#FFF;-webkit-box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);font-family:Arial, Helvetica, sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-top:10px;z-index:2147483635;text-align:left;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.2}.fr-popup .fr-icon{text-align:center;vertical-align:middle;font-size:20px;line-height:1;cursor:pointer;font-weight:400;box-sizing:content-box;padding:6px}.fr-popup .fr-icon-container{padding:20px;max-height:200px;overflow:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@supports not (-ms-high-contrast: none){.fr-popup .fr-icon-container{grid-template-columns:repeat(auto-fill, minmax(36px, 36px));display:grid}}@media (min-width: 768px){.fr-popup .fr-icon-container{min-width:276px}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.fr-popup .fr-icon-container{display:inline-flex;-ms-flex-flow:row wrap}}@media screen and (-ms-high-contrast: active) and (max-width: 768px), (-ms-high-contrast: none) and (max-width: 768px){.fr-popup .fr-icon-container{width:236px}}.fr-popup .fr-input-focus{background:whitesmoke}.fr-popup.fr-above{margin-top:-10px;border-top:0}.fr-popup.fr-active{display:block}.fr-popup.fr-hidden{display:none !important}.fr-popup.fr-empty{display:none !important}.fr-popup .fr-hs{display:block !important}.fr-popup .fr-hs.fr-hidden{display:none !important}.fr-popup .fr-input-line{position:relative;padding:15px 0}.fr-popup .fr-input-line input[type="text"],.fr-popup .fr-input-line input[type="number"],.fr-popup .fr-input-line textarea{width:100%;margin-bottom:1px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;border:solid 1px #999999;color:#222222;font-size:14px;background:#FFF;position:relative;z-index:2;padding:4px 12px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border 0.5s, padding 0.5s;-moz-transition:border 0.5s, padding 0.5s;-ms-transition:border 0.5s, padding 0.5s;-o-transition:border 0.5s, padding 0.5s}.fr-popup .fr-input-line input[type="text"]:hover,.fr-popup .fr-input-line input[type="number"]:hover,.fr-popup .fr-input-line textarea:hover{border:solid 1px #515151}.fr-popup .fr-input-line input[type="text"]:focus,.fr-popup .fr-input-line input[type="number"]:focus,.fr-popup .fr-input-line textarea:focus{border:solid 2px #0098f7;padding:3px 11px}.fr-popup .fr-input-line input[type="text"],.fr-popup .fr-input-line input[type="number"]{height:46px}.fr-popup .fr-input-line input+label,.fr-popup .fr-input-line textarea+label{position:absolute;top:29px;left:12px;font-size:14px;color:grey;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;z-index:3;display:block;background:#FFF;padding:0;cursor:text}.fr-popup .fr-input-line input.fr-not-empty+label,.fr-popup .fr-input-line textarea.fr-not-empty+label{color:gray;width:auto;left:4px;padding:0 4px;font-size:11px;top:9px}.fr-popup input,.fr-popup textarea{user-select:text;-o-user-select:text;-moz-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-ms-user-select:text;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;outline:none}.fr-popup textarea{resize:none}.fr-popup .fr-buttons{white-space:nowrap;line-height:0}.fr-popup .fr-buttons .fr-btn{margin-left:4px;margin-right:4px;display:inline-block;float:none}.fr-popup .fr-buttons .fr-btn i{float:left}.fr-popup .fr-buttons .fr-separator{display:inline-block;float:none}.fr-popup .fr-buttons.fr-tabs{border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;-webkit-border-radius:6px 6px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:#f5f5f5;overflow:hidden}@media (max-width: 768px){.fr-popup .fr-buttons.fr-tabs.fr-tabs-scroll{overflow:scroll;overflow-y:hidden;width:276px}}.fr-popup .fr-buttons:not(.fr-tabs){padding:5px}.fr-popup .fr-layer{border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;width:195px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:20px;display:none}@media (min-width: 768px){.fr-popup .fr-layer{width:260px}}.fr-popup .fr-layer.fr-active{display:inline-block}.fr-popup .fr-action-buttons{z-index:7;height:36px;text-align:right}.fr-popup .fr-action-buttons button.fr-command{height:36px;line-height:1;color:#0098f7;padding:10px;cursor:pointer;text-decoration:none;border:none;background:none;font-size:16px;outline:none;-webkit-transition:background 0.2s ease 0s;-moz-transition:background 0.2s ease 0s;-ms-transition:background 0.2s ease 0s;-o-transition:background 0.2s ease 0s;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-popup .fr-action-buttons button.fr-command+button{margin-left:24px}.fr-popup .fr-action-buttons button.fr-command:hover,.fr-popup .fr-action-buttons button.fr-command:focus{background:#ebebeb;color:#0098f7}.fr-popup .fr-action-buttons button.fr-command:active{background:#d6d6d6;color:#0098f7}.fr-popup .fr-action-buttons button::-moz-focus-inner{border:0}.fr-popup .fr-checkbox{position:relative;display:inline-block;width:18px;height:18px;padding:10px;border-radius:100%;line-height:1;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;vertical-align:middle}.fr-popup .fr-checkbox svg{margin-left:2px;margin-top:2px;display:none;width:10px;height:10px}.fr-popup .fr-checkbox span{border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;width:18px;height:18px;display:inline-block;position:relative;z-index:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background 0.2s ease 0s, border-color 0.2s ease 0s;-moz-transition:background 0.2s ease 0s, border-color 0.2s ease 0s;-ms-transition:background 0.2s ease 0s, border-color 0.2s ease 0s;-o-transition:background 0.2s ease 0s, border-color 0.2s ease 0s}.fr-popup .fr-checkbox input{position:absolute;z-index:2;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";border:0 none;cursor:pointer;height:18px;margin:0;padding:0;width:18px;top:7px;left:7px}.fr-popup .fr-checkbox input:not(:checked)+span{border:solid 2px #999999}.fr-popup .fr-checkbox input:not(:checked):active+span{background-color:#f5f5f5}.fr-popup .fr-checkbox input:not(:checked):focus+span,.fr-popup .fr-checkbox input:not(:checked):hover+span{border-color:#515151}.fr-popup .fr-checkbox input:checked+span{background:#0098f7;border:solid 2px #0098f7}.fr-popup .fr-checkbox input:checked+span svg{display:block}.fr-popup .fr-checkbox input:checked:active+span{background-color:#EcF5Ff}.fr-popup .fr-checkbox input:checked:focus+span,.fr-popup .fr-checkbox input:checked:hover+span{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}.fr-popup .fr-checkbox-line{font-size:14px;line-height:1.4px;margin-top:10px}.fr-popup .fr-checkbox-line label{cursor:pointer;margin:0 5px;vertical-align:middle}.fr-popup.fr-rtl{direction:rtl;text-align:right}.fr-popup.fr-rtl .fr-action-buttons{text-align:left}.fr-popup.fr-rtl .fr-input-line input+label,.fr-popup.fr-rtl .fr-input-line textarea+label{left:auto;right:0}.fr-popup.fr-rtl .fr-buttons .fr-separator.fr-vs{float:right}.fr-text-edit-layer{width:250px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block !important}.fr-toolbar{color:#222222;background:#FFF;position:relative;font-family:Arial, Helvetica, sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;text-align:left;border:1px solid #CCCCCC;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.2;padding-bottom:0;-webkit-transition:padding-bottom 0.5s;-moz-transition:padding-bottom 0.5s;-ms-transition:padding-bottom 0.5s;-o-transition:padding-bottom 0.5s}.fr-toolbar::after{clear:both;display:block;content:"";height:0}.fr-toolbar::after{height:0}.fr-toolbar .fr-newline{clear:both;display:block;content:"";margin-left:9px;margin-right:9px;background:#efefef;height:1px;-webkit-transition:height 0.5s;-moz-transition:height 0.5s;-ms-transition:height 0.5s;-o-transition:height 0.5s}.fr-toolbar.fr-toolbar-open .fr-newline{height:0}.fr-toolbar .fr-float-right{float:right}.fr-toolbar .fr-float-left{float:left}.fr-toolbar .fr-more-toolbar{float:left;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background-color:#f5f5f5;-webkit-transition:height 0.5s;-moz-transition:height 0.5s;-ms-transition:height 0.5s;-o-transition:height 0.5s;height:0;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%}.fr-toolbar .fr-more-toolbar.fr-expanded{height:48px}.fr-toolbar .fr-more-toolbar.fr-overflow-visible{overflow:visible}.fr-toolbar .fr-more-toolbar>.fr-command.fr-btn{margin-left:4px;margin-right:4px}.fr-toolbar .fr-btn-grp{display:inline-block;margin:0 17px 0 12px}@media (max-width: 768px){.fr-toolbar .fr-btn-grp{margin:0 7px 0 6px}}.fr-toolbar .fr-command.fr-btn.fr-open{margin-top:10px;margin-bottom:-1px;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active){background:#f5f5f5}.fr-toolbar.fr-rtl{text-align:right}.fr-toolbar.fr-inline{display:none;-webkit-box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);border:0;white-space:nowrap;position:absolute;margin-top:5px;z-index:2147483630}.fr-toolbar.fr-inline.fr-above{margin-top:-10px;border-top:0}.fr-toolbar.fr-inline .fr-newline{height:0}.fr-toolbar.fr-inline .fr-more-toolbar{position:absolute !important}.fr-toolbar.fr-inline .fr-more-toolbar.fr-expanded{position:relative !important}.fr-toolbar.fr-top{top:0;border-bottom:0;border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar.fr-bottom{bottom:0;border-top:0;padding-bottom:0;border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar.fr-bottom .fr-newline{padding-top:0;-webkit-transition:padding-top 0.5s;-moz-transition:padding-top 0.5s;-ms-transition:padding-top 0.5s;-o-transition:padding-top 0.5s}.fr-toolbar.fr-bottom.fr-toolbar-open .fr-newline{padding-top:48px;background:#FFF}.fr-toolbar.fr-bottom .fr-command.fr-btn.fr-open{margin-top:-1px;margin-bottom:10px;border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-toolbar.fr-sticky-on{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-separator{background:#ebebeb;display:block;vertical-align:top;float:left}.fr-separator+.fr-separator{display:none}.fr-separator.fr-vs{height:32px;width:1px;margin:8px 4px}.fr-separator.fr-hs{clear:both;width:calc(100% - (2 * 4px));margin:0 4px;height:1px}.fr-separator.fr-hidden{display:none !important}.fr-rtl .fr-separator{float:right}.fr-toolbar.fr-inline .fr-separator.fr-hs{float:none}.fr-toolbar.fr-inline .fr-separator.fr-vs{float:none;display:inline-block}.fr-second-toolbar{border:1px solid #CCCCCC;border-top:0;background:#FFF;line-height:1.4;border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-second-toolbar::after{clear:both;display:block;content:"";height:0}.fr-second-toolbar:empty{min-height:calc(10px);position:relative;margin-top:calc(-1px);z-index:2}#fr-logo{float:left;outline:none}#fr-logo>span{display:inline-block;float:left;font-family:sans-serif;padding:11px 5px 10px 15px;font-size:12px;font-weight:500;color:#b1b2b7;-webkit-transition:color 0.3s;-moz-transition:color 0.3s;-ms-transition:color 0.3s;-o-transition:color 0.3s}#fr-logo>svg{height:20px;width:47px;margin:7px 0;cursor:pointer}#fr-logo>svg *{-webkit-transition:fill 0.3s;-moz-transition:fill 0.3s;-ms-transition:fill 0.3s;-o-transition:fill 0.3s}#fr-logo:hover>span,#fr-logo:focus>span{color:#0098f7}#fr-logo:hover>svg .fr-logo,#fr-logo:focus>svg .fr-logo{fill:#0098f7}.fr-visibility-helper{display:none;margin-left:0 !important}@media (min-width: 768px){.fr-visibility-helper{margin-left:1px !important}}@media (min-width: 992px){.fr-visibility-helper{margin-left:2px !important}}@media (min-width: 1200px){.fr-visibility-helper{margin-left:3px !important}}.fr-opacity-0{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}.fr-box{position:relative}.fr-sticky{position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;position:sticky}.fr-sticky-off{position:relative}.fr-sticky-on{position:fixed;z-index:10}.fr-sticky-on.fr-sticky-ios{position:-webkit-sticky;left:0;right:0;width:auto !important}.modal .fr-sticky-on{position:sticky}.fr-sticky-dummy{display:none}.fr-sticky-on+.fr-sticky-dummy,.fr-sticky-box>.fr-sticky-dummy{display:block}span.fr-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-view .fr-highlight-change,.fr-highlight-change>img,.fr-highlight-change>.fr-video>video,.fr-highlight-change>.fr-video>embed,.fr-highlight-change>.fr-video>iframe,.fr-highlight-change>.fr-embedly>.embedly-card>.embedly-card-hug>iframe,.fr-highlight-change>p,.fr-view .fr-highlight-change>span:not(.fr-tracking-deleted){background-color:#f3eec3;opacity:0.5}.fr-highlight-change.fr-highlight-change>table td,.fr-highlight-change.fr-highlight-change>hr{border-color:#f3eec3}.fr-tracking-deleted.fr-tracking-deleted>table td,.fr-tracking-deleted.fr-tracking-deleted>hr{border-color:#dc3545}.fr-tracking-deleted img,.fr-tracking-deleted>.fr-video>video,.fr-tracking-deleted>.fr-video>iframe,.fr-tracking-deleted>.fr-embedly>.embedly-card>.embedly-card-hug>iframe{opacity:0.5;background-color:#dc3545}.fr-view .fr-tracking-deleted{background-color:#dc3545;text-decoration:line-through;pointer-events:none;user-select:none;opacity:1}.fr-highlight-change>.fr-video>iframe,.fr-tracking-deleted>.fr-video>iframe,.fr-highlight-change>.fr-video>video,.fr-tracking-deleted>.fr-video>video,.fr-highlight-change>.fr-video>embed,.fr-highlight-change>.fr-embedly>.embedly-card>.embedly-card-hug>iframe,.fr-tracking-deleted>.fr-embedly>.embedly-card>.embedly-card-hug>iframe{padding:10px !important}.fr-tracking-deleted img,.fr-highlight-change img{border:2px solid #f3eec3}.fr-highlight-change #isPasted *:not(table):not(tbody):not(tr):not(td){opacity:0.5;background-color:#f3eec3}.fr-highlight-change #isPasted>table td{opacity:0.5;border-color:#f3eec3}.fr-track-hide{display:none}.fr-track-hide-mobile{width:0;height:0;overflow:hidden;position:absolute}.fr-ios-mobile-disable-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.fr-bottom-extended{flex-wrap:wrap;display:flex;box-sizing:border-box}.position-relative{position:relative !important}

/* End external import from public/froalav4/css/froala_editor.min.css */
/* External import from public/froalav4/css/froala_style.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-view img.fr-rounded,.fr-view .fr-img-caption.fr-rounded img{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-view img.fr-shadow,.fr-view .fr-img-caption.fr-shadow img{-webkit-box-shadow:10px 10px 5px 0px #cccccc;-moz-box-shadow:10px 10px 5px 0px #cccccc;box-shadow:10px 10px 5px 0px #cccccc}.fr-view img.fr-bordered,.fr-view .fr-img-caption.fr-bordered img{border:solid 5px #CCC}.fr-view img.fr-bordered{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-view .fr-img-caption.fr-bordered img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-view li img.fr-dii.fr-fil{margin-right:20px}.fr-view{word-wrap:break-word}.fr-view span[style~="color:"] a{color:inherit}.fr-view strong{font-weight:700}.fr-view table[border='0'] td:not([class]),.fr-view table[border='0'] th:not([class]),.fr-view table[border='0'] td[class=""],.fr-view table[border='0'] th[class=""]{border-width:0px}.fr-view table{border:none;border-collapse:collapse;empty-cells:show;max-width:100%}.fr-view table td{min-width:5px}.fr-view table.fr-dashed-borders td,.fr-view table.fr-dashed-borders th{border-style:dashed}.fr-view table.fr-alternate-rows tbody tr:nth-child(2n){background:whitesmoke}.fr-view table td,.fr-view table th{border:1px solid #DDD}.fr-view table td:empty,.fr-view table th:empty{height:20px}.fr-view table td.fr-highlighted,.fr-view table th.fr-highlighted{border:1px double red}.fr-view table td.fr-thick,.fr-view table th.fr-thick{border-width:2px}.fr-view table th{background:#ececec}.fr-view table tfoot td{background:#ececec}.fr-view hr{clear:both;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;break-after:always;page-break-after:always}.fr-view .fr-file{position:relative}.fr-view .fr-file::after{position:relative;content:"\1F4CE";font-weight:normal}.fr-view pre{white-space:pre-wrap;word-wrap:break-word;overflow:visible}.fr-view[dir="rtl"] blockquote{border-left:none;border-right:solid 2px #5E35B1;margin-right:0;padding-right:5px;padding-left:0}.fr-view[dir="rtl"] blockquote blockquote{border-color:#00BCD4}.fr-view[dir="rtl"] blockquote blockquote blockquote{border-color:#43A047}.fr-view blockquote{border-left:solid 2px #5E35B1;margin-left:0;padding-left:5px;color:#5E35B1}.fr-view blockquote blockquote{border-color:#00BCD4;color:#00BCD4}.fr-view blockquote blockquote blockquote{border-color:#43A047;color:#43A047}.fr-view span.fr-emoticon{font-weight:normal;font-family:"Apple Color Emoji","Segoe UI Emoji","NotoColorEmoji","Segoe UI Symbol","Android Emoji","EmojiSymbols";display:inline;line-height:0}.fr-view span.fr-emoticon.fr-emoticon-img{background-repeat:no-repeat !important;font-size:inherit;height:1em;width:1em;min-height:20px;min-width:20px;display:inline-block;margin:-.1em .1em .1em;line-height:1;vertical-align:middle}.fr-view .fr-text-gray{color:#AAA !important}.fr-view .fr-text-bordered{border-top:solid 1px #222;border-bottom:solid 1px #222;padding:10px 0}.fr-view .fr-text-spaced{letter-spacing:1px}.fr-view .fr-text-uppercase{text-transform:uppercase}.fr-view .fr-class-highlighted{background-color:#ffff00}.fr-view .fr-class-code{border-color:#cccccc;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background:#f5f5f5;padding:10px;font-family:"Courier New", Courier, monospace}.fr-view .fr-class-transparency{opacity:0.5}.fr-view img{position:relative;max-width:100%}.fr-view img.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}.fr-view img.fr-dib.fr-fil{margin-left:0;text-align:left}.fr-view img.fr-dib.fr-fir{margin-right:0;text-align:right}.fr-view img.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}.fr-view img.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}.fr-view img.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.fr-view span.fr-img-caption{position:relative;max-width:100%}.fr-view span.fr-img-caption.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}.fr-view span.fr-img-caption.fr-dib.fr-fil{margin-left:0;text-align:left}.fr-view span.fr-img-caption.fr-dib.fr-fir{margin-right:0;text-align:right}.fr-view span.fr-img-caption.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}.fr-view span.fr-img-caption.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}.fr-view span.fr-img-caption.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.fr-view .fr-video{text-align:center;position:relative}.fr-view .fr-video.fr-rv{padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}.fr-view .fr-video.fr-rv>iframe,.fr-view .fr-video.fr-rv object,.fr-view .fr-video.fr-rv embed{position:absolute !important;top:0;left:0;width:100%;height:100%}.fr-view .fr-video>*{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;max-width:100%;border:none}.fr-view .fr-video.fr-dvb{display:block;clear:both}.fr-view .fr-video.fr-dvb.fr-fvl{text-align:left}.fr-view .fr-video.fr-dvb.fr-fvr{text-align:right}.fr-view .fr-video.fr-dvi{display:inline-block}.fr-view .fr-video.fr-dvi.fr-fvl{float:left}.fr-view .fr-video.fr-dvi.fr-fvr{float:right}.fr-view a.fr-strong{font-weight:700}.fr-view a.fr-green{color:green}.fr-view .fr-img-caption{text-align:center}.fr-view .fr-img-caption .fr-img-wrap{padding:0;margin:auto;text-align:center;width:100%}.fr-view .fr-img-caption .fr-img-wrap a{display:block}.fr-view .fr-img-caption .fr-img-wrap img{display:block;margin:auto;width:100%}.fr-view .fr-img-caption .fr-img-wrap>span{margin:auto;display:block;padding:5px 5px 10px;font-size:14px;font-weight:initial;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-opacity:0.9;-moz-opacity:0.9;opacity:0.9;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";width:100%;text-align:center}.fr-view button.fr-rounded,.fr-view input.fr-rounded,.fr-view textarea.fr-rounded{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-view button.fr-large,.fr-view input.fr-large,.fr-view textarea.fr-large{font-size:24px}.fr-view span.fr-img-caption.fr-dii.fr-fil,.fr-view p img.fr-dii.fr-fil{margin-right:15px}a.fr-view.fr-strong{font-weight:700}a.fr-view.fr-green{color:green}img.fr-view{position:relative;max-width:100%}img.fr-view.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}img.fr-view.fr-dib.fr-fil{margin-left:0;text-align:left}img.fr-view.fr-dib.fr-fir{margin-right:0;text-align:right}img.fr-view.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}img.fr-view.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}img.fr-view.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}span.fr-img-caption.fr-view{position:relative;max-width:100%}span.fr-img-caption.fr-view.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}span.fr-img-caption.fr-view.fr-dib.fr-fil{margin-left:0;text-align:left}span.fr-img-caption.fr-view.fr-dib.fr-fir{margin-right:0;text-align:right}span.fr-img-caption.fr-view.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}span.fr-img-caption.fr-view.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}span.fr-img-caption.fr-view.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}

/* End external import from public/froalav4/css/froala_style.min.css */
/* External import from public/froalav4/css/third_party/codemirror/codemirror.min.css */
.CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-type,.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta{color:#555}.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error{color:red}.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}
/* End external import from public/froalav4/css/third_party/codemirror/codemirror.min.css */
/* External import from public/froalav4/css/plugins/char_counter.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-box .fr-counter{padding:10px;float:right;color:#999;content:attr(data-chars);font-size:14px;font-family:sans-serif;z-index:1;border-radius:2px 0 0 0;-moz-border-radius:2px 0 0 0;-webkit-border-radius:2px 0 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-rtl .fr-counter{left:0;right:auto;border-left:none;border-radius:0 2px 0 0;-moz-border-radius:0 2px 0 0;-webkit-border-radius:0 2px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-code-view .fr-counter{display:none}

/* End external import from public/froalav4/css/plugins/char_counter.min.css */
/* External import from public/froalav4/css/plugins/code_view.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}textarea.fr-code{display:none;width:100%;resize:none;-moz-resize:none;-webkit-resize:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;padding:10px;margin:0;font-family:"Courier New",monospace;font-size:14px;background:#FFF;color:#000;outline:none}.fr-box.fr-rtl textarea.fr-code{direction:rtl}.fr-box .CodeMirror{display:none}.fr-box.fr-code-view textarea.fr-code{display:block}.fr-box.fr-code-view .fr-element,.fr-box.fr-code-view .fr-placeholder,.fr-box.fr-code-view .fr-iframe{display:none}.fr-box.fr-code-view .CodeMirror{display:block}.fr-box.fr-inline.fr-code-view .fr-command.fr-btn.html-switch{display:block}.fr-box.fr-inline .fr-command.fr-btn.html-switch{display:none;position:absolute;top:0;right:0;display:none;background:#FFF;color:#333;-moz-outline:0;outline:0;border:0;line-height:1;cursor:pointer;text-align:left;padding:8px 7px;-webkit-transition:background 0.2s ease 0s;-moz-transition:background 0.2s ease 0s;-ms-transition:background 0.2s ease 0s;-o-transition:background 0.2s ease 0s;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none}.fr-box.fr-inline .fr-command.fr-btn.html-switch i{font-size:24px;width:24px;text-align:center}.fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover{background:#ebebeb}

/* End external import from public/froalav4/css/plugins/code_view.min.css */
/* External import from public/froalav4/css/plugins/colors.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-popup .fr-layer.fr-color-hex-layer{margin:0;padding:20px;padding-top:0;float:left}.fr-popup .fr-layer.fr-color-hex-layer .fr-input-line{float:left;width:calc(100% - 50px);padding:15px 0 0}.fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons{float:right;width:38px;height:40px;padding:17px 0 0;margin:0}.fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons button.fr-command{border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;font-size:13px;height:40px;width:38px}.fr-popup .fr-separator+.fr-colors-tabs{margin-left:2px;margin-right:2px}.fr-popup .fr-color-set{line-height:0;display:none}.fr-popup .fr-color-set.fr-selected-set{display:block;padding:20px;padding-bottom:0}.fr-popup .fr-color-set>span{display:inline-block;width:32px;height:32px;position:relative;z-index:1}.fr-popup .fr-color-set>span>i,.fr-popup .fr-color-set>span>svg{text-align:center;line-height:32px;height:24px;width:24px;margin:4px;font-size:13px;position:absolute;bottom:0;cursor:default;left:0}.fr-popup .fr-color-set>span>i path,.fr-popup .fr-color-set>span>svg path{fill:#222}.fr-popup .fr-color-set>span .fr-selected-color{color:#FFF;font-family:FontAwesome;font-size:13px;font-weight:400;line-height:32px;position:absolute;top:0;bottom:0;right:0;left:0;text-align:center;cursor:default}.fr-popup .fr-color-set>span:hover,.fr-popup .fr-color-set>span:focus{outline:1px solid #222;z-index:2}.fr-rtl .fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1="text"] ~ [data-param1="background"]::after{-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0)}

/* End external import from public/froalav4/css/plugins/colors.min.css */
/* External import from public/froalav4/css/plugins/draggable.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-drag-helper{background:#0098f7;height:2px;margin-top:-1px;-webkit-opacity:.2;-moz-opacity:.2;opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";position:absolute;z-index:2147483640;display:none}.fr-drag-helper.fr-visible{display:block}.fr-dragging{-webkit-opacity:.4;-moz-opacity:.4;opacity:.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}

/* End external import from public/froalav4/css/plugins/draggable.min.css */
/* External import from public/froalav4/css/plugins/emoticons.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-popup .fr-emoticon{width:24px;height:24px;font-family:"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Segoe UI Symbol", "Android Emoji", EmojiSymbols}.fr-popup .fr-emoticon img{height:24px;width:24px}.fr-popup .fr-command.fr-btn.fr-tabs-unicode{padding:0 0 0 14px}@media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px){.fr-popup .fr-icon-container.fr-emoticon-container{width:368px}}

/* End external import from public/froalav4/css/plugins/emoticons.min.css */
/* External import from public/froalav4/css/plugins/file.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-popup .fr-file-upload-layer{border:dashed 2px #bdbdbd;padding:25px 0;margin:20px;position:relative;font-size:14px;letter-spacing:1px;line-height:140%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center}.fr-popup .fr-file-upload-layer:hover{background:#ebebeb}.fr-popup .fr-file-upload-layer.fr-drop{background:#ebebeb;border-color:#0098f7}.fr-popup .fr-file-upload-layer .fr-form{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";position:absolute;top:0;bottom:0;left:0;right:0;z-index:2147483640;overflow:hidden;margin:0 !important;padding:0 !important;width:100% !important}.fr-popup .fr-file-upload-layer .fr-form input{cursor:pointer;position:absolute;right:0;top:0;bottom:0;width:500%;height:100%;margin:0;font-size:400px}.fr-popup .fr-file-progress-bar-layer{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-popup .fr-file-progress-bar-layer>h3{font-size:16px;margin:10px 0;font-weight:normal}.fr-popup .fr-file-progress-bar-layer>div.fr-action-buttons{display:none}.fr-popup .fr-file-progress-bar-layer>div.fr-loader{background:#b3e0fd;height:10px;width:100%;margin-top:20px;overflow:hidden;position:relative}.fr-popup .fr-file-progress-bar-layer>div.fr-loader span{display:block;height:100%;width:0%;background:#0098f7;-webkit-transition:width 0.2s ease 0s;-moz-transition:width 0.2s ease 0s;-ms-transition:width 0.2s ease 0s;-o-transition:width 0.2s ease 0s}.fr-popup .fr-file-progress-bar-layer>div.fr-loader.fr-indeterminate span{width:30% !important;position:absolute;top:0;-webkit-animation:loading 2s linear infinite;-moz-animation:loading 2s linear infinite;-o-animation:loading 2s linear infinite;animation:loading 2s linear infinite}.fr-popup .fr-file-progress-bar-layer.fr-error>div.fr-loader{display:none}.fr-popup .fr-file-progress-bar-layer.fr-error>div.fr-action-buttons{display:block}@keyframes loading{from{left:-25%}to{left:100%}}@-webkit-keyframes loading{from{left:-25%}to{left:100%}}@-moz-keyframes loading{from{left:-25%}to{left:100%}}@-o-keyframes loading{from{left:-25%}to{left:100%}}@keyframes loading{from{left:-25%}to{left:100%}}

/* End external import from public/froalav4/css/plugins/file.min.css */
/* External import from public/froalav4/css/plugins/files_manager.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-element img{cursor:pointer;padding:0 1px}.fr-height-auto{height:auto !important}.fr-file-loader{border:4px solid #f3f3f3;border-radius:50%;border-top:4px solid #53777a;display:inline-block !important;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;width:20px;height:20px;display:block !important;align-items:center}.fr-trim-button{margin-top:5px;height:36px;line-height:1;color:#0098f7;padding:10px;cursor:pointer;text-decoration:none;border:none;background:none;font-size:16px;border-radius:5px;background-color:#eff5fa;outline:none}.fr-trim-button:hover{background:#ebebeb}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.fr-image-resizer{position:absolute;border:solid 1px #0098f7;display:none;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-image-resizer.fr-active{display:block}.fr-image-resizer .fr-handler{display:block;position:absolute;background:#0098f7;border:solid 1px #FFF;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;z-index:4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-image-resizer .fr-handler.fr-hnw{cursor:nw-resize}.fr-image-resizer .fr-handler.fr-hne{cursor:ne-resize}.fr-image-resizer .fr-handler.fr-hsw{cursor:sw-resize}.fr-image-resizer .fr-handler.fr-hse{cursor:se-resize}.fr-image-resizer .fr-handler{width:12px;height:12px}.fr-image-resizer .fr-handler.fr-hnw{left:-6px;top:-6px}.fr-image-resizer .fr-handler.fr-hne{right:-6px;top:-6px}.fr-image-resizer .fr-handler.fr-hsw{left:-6px;bottom:-6px}.fr-image-resizer .fr-handler.fr-hse{right:-6px;bottom:-6px}@media (min-width: 1200px){.fr-image-resizer .fr-handler{width:10px;height:10px}.fr-image-resizer .fr-handler.fr-hnw{left:-5px;top:-5px}.fr-image-resizer .fr-handler.fr-hne{right:-5px;top:-5px}.fr-image-resizer .fr-handler.fr-hsw{left:-5px;bottom:-5px}.fr-image-resizer .fr-handler.fr-hse{right:-5px;bottom:-5px}}.fr-image-overlay{position:fixed;top:0;left:0;bottom:0;right:0;z-index:2147483640;display:none}.fr-by-url-padding{padding:11.5px 0}.fr-popup .fr-upload-progress-layer{border-radius:0;box-sizing:border-box;padding-left:20px;padding-top:15px;margin:auto !important;max-height:100%;overflow-y:auto;overflow-x:hidden;width:100% !important;overscroll-behavior:contain}.fr-popup .fr-files-by-url-layer{width:calc(100% - 40px) !important}.fr-popup .fr-files-embed-layer{width:calc(100% - 40px) !important}.fr-popup .fr-files-upload-layer{border:dashed 2px #bdbdbd;margin:20px;position:relative;font-size:10px;letter-spacing:1px;line-height:140%;text-align:center;width:calc(100% - 40px) !important}.fr-popup .fr-files-upload-layer:hover{background:#ebebeb}.fr-popup .fr-files-upload-layer.fr-drop{background:#ebebeb;border-color:#0098f7}.fr-popup .fr-files-upload-layer .fr-form{-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";position:absolute;top:0;bottom:0;left:0;right:0;z-index:2147483640;overflow:hidden;margin:0 !important;padding:0 !important;width:100% !important}.fr-popup .fr-files-upload-layer .fr-form input{cursor:pointer;position:absolute;right:0;top:0;bottom:0;width:500%;height:100%;margin:0;font-size:400px}.fr-popup .fr-files-progress-bar-layer{width:calc(100% - 40px);width:-moz-available;width:-webkit-stretch;width:stretch}.fr-popup .fr-files-progress-bar-layer>h3{font-size:16px;margin:10px 0;font-weight:normal}.fr-popup .fr-files-progress-bar-layer>div.fr-action-buttons{display:none}.fr-popup .fr-files-progress-bar-layer>div.fr-loader{background:#b3e0fd;height:10px;width:100%;margin-top:20px;overflow:hidden;position:relative}.fr-popup .fr-files-progress-bar-layer>div.fr-loader span{display:block;height:100%;width:0%;background:#0098f7;-webkit-transition:width 0.2s ease 0s;-moz-transition:width 0.2s ease 0s;-ms-transition:width 0.2s ease 0s;-o-transition:width 0.2s ease 0s}.fr-popup .fr-files-progress-bar-layer>div.fr-loader.fr-indeterminate span{width:30% !important;position:absolute;top:0;-webkit-animation:loading 2s linear infinite;-moz-animation:loading 2s linear infinite;-o-animation:loading 2s linear infinite;animation:loading 2s linear infinite}.fr-popup .fr-files-progress-bar-layer.fr-error>div.fr-loader{display:none}.fr-popup .fr-files-progress-bar-layer.fr-error>div.fr-action-buttons{display:block}.fr-image-size-layer .fr-image-group .fr-input-line{width:calc(50% - 5px);display:inline-block}.fr-image-size-layer .fr-image-group .fr-input-line+.fr-input-line{margin-left:10px}.fr-progress-bar-style{width:calc(100% - 40px)}.fr-progress-bar{position:relative;background-color:#4CAF50;height:8px;margin-bottom:8px;margin-left:20px;margin-right:20px;width:100%;width:-moz-available;width:-webkit-stretch;width:stretch}.fr-uploading{-webkit-opacity:.4;-moz-opacity:.4;opacity:.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}@-webkit-keyframes loading{from{left:-25%}to{left:100%}}@-moz-keyframes loading{from{left:-25%}to{left:100%}}@-o-keyframes loading{from{left:-25%}to{left:100%}}@keyframes loading{from{left:-25%}to{left:100%}}.fr-pull-left{float:left}.fr-pull-right{float:right}.fr-icons{padding:10px 20px 0;display:inline}.fr-transform-135{transform:rotate(135deg)}.fr-icons i{margin:4px;padding:2px;cursor:pointer;color:#999588;font-size:20px}.fr-blue-decorator{background:#4a7fba;color:white;display:grid;padding:5px}.fr-upload-progress{padding:1px}.fr-upload-section{position:relative;width:100%;width:-moz-available;width:-webkit-stretch;width:stretch}@media screen and (max-width: 399px){.fr-upload-section{margin-left:7px;margin-right:7px}.fr-files-upload-layer{padding-top:7px;padding-bottom:7px}}@media screen and (min-width: 400px) and (max-width: 469px){.fr-upload-section{margin-left:7px;margin-right:7px}.fr-files-upload-layer{padding-top:7px;padding-bottom:7px}}@media screen and (min-width: 470px) and (max-width: 680px){.fr-upload-section{margin-left:7px;margin-right:7px}.fr-files-upload-layer{padding-top:7px;padding-bottom:7px}}@media screen and (min-width: 681px){.fr-upload-section{margin-left:35px;margin-right:35px}.fr-files-upload-layer{padding-top:20px;padding-bottom:20px}}.fr-half-circle{width:60px;height:25px;background-color:white;border-top-left-radius:110px;border-top-right-radius:110px;transform:rotate(180deg);border-bottom:0;position:relative;left:50%;z-index:1;left:50%;margin-top:-1px;margin-left:-25px}.fr-decorated{overflow:hidden;text-align:center}.fr-decorated>span{position:relative;display:inline-block}.fr-decorated>span:before,.fr-decorated>span:after{content:'';position:absolute;top:50%;border-bottom:2px solid #ffffff;width:100%;margin:0 20px}.fr-decorated>span:before{right:100%}.fr-decorated>span:after{left:100%}.fr-align-right{float:right}.fr-checkbox-container{display:inline-block;position:relative;padding-left:20px;margin-bottom:12px;cursor:pointer;font-size:13px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fr-files-checkbox-line{display:flex;align-items:center;font-size:10px}.fr-files-checkbox-line label{cursor:pointer;vertical-align:middle}.fr-insert-checkbox input{height:13px !important;width:13px !important}.fr-autoplay-checkbox input{height:13px !important;width:13px !important}button[data-cmd="insertFiles"]{padding-left:2px !important;padding-top:2.7px !important}button[data-cmd="autoplay"] svg{position:relative !important;top:3.2px !important}button[data-cmd="insertAll"]{padding-left:4px !important}button[data-cmd="insertAll"] svg{position:relative !important;top:3.2px !important}.fr-checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fr-checkmark{position:absolute;top:0;left:0;height:15px;width:15px;background-color:#eee}.fr-file-list-item{display:flex;justify-content:space-between;align-items:center;padding-top:7px;flex-wrap:wrap;position:relative;top:-20px;border-bottom:1px solid #ddd;padding-bottom:7px}.fr-file-item-left{display:flex;flex-wrap:wrap}.fr-file-item-icon{display:flex;align-items:center;padding-left:7px}.fr-file-item-description{display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;max-width:400px;margin-left:5px}.fr-cloud-icon{height:30px;width:32px;background-color:white;border-radius:50%;display:flex;justify-content:center;position:relative;margin:0 auto;margin-top:-18px}.fr-files-checkbox{position:relative;display:inline-block;width:13px;height:13px;padding-right:5px;border-radius:100%;line-height:1;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;vertical-align:middle}.fr-files-checkbox svg{margin-left:0px;margin-top:0px;display:none;width:10px;height:10px}.fr-files-checkbox span{border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;width:15px;height:15px;display:inline-block;position:relative;z-index:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;-moz-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;-ms-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;-o-transition:background 0.2s ease 0s,border-color 0.2s ease 0s}.fr-files-checkbox input{position:absolute;z-index:2;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";border:0 none;cursor:pointer;height:18px;margin:0;padding:0;width:18px}.fr-files-checkbox input:not(:checked)+span{border:solid 2px #999}.fr-files-checkbox input:not(:checked):active+span{background-color:#f5f5f5}.fr-files-checkbox input:not(:checked):focus+span,.fr-files-checkbox input:not(:checked):hover+span{border-color:#515151}.fr-files-checkbox input:checked+span{background:#0098f7;border:solid 2px #0098f7}.fr-files-checkbox input:checked+span svg{display:block}.fr-files-checkbox input:checked:active+span{background-color:#EcF5Ff}.fr-files-checkbox input:checked:focus+span,.fr-files-checkbox input:checked:hover+span{-webkit-opacity:.8;-moz-opacity:.8;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}.fr-checkbox-disabled{opacity:0.4;position:relative;display:inline-block;width:13px !important;height:13px !important;padding-right:5px;border-radius:100%;line-height:1;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;vertical-align:middle}.fr-checkbox-disabled svg{margin-left:2px;margin-top:2px;display:none;width:10px;height:10px}.fr-checkbox-disabled span{border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;width:15px;height:15px;display:inline-block;position:relative;z-index:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;-moz-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;-ms-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;-o-transition:background 0.2s ease 0s,border-color 0.2s ease 0s}.fr-checkbox-disabled input{position:absolute;z-index:2;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";border:0 none;cursor:default;height:13px !important;margin:0;padding:0;width:13px !important;top:7px;left:7px}.fr-checkbox-disabled input:not(:checked)+span{border:solid 2px #999}.fr-checkbox-disabled input:not(:checked):active+span{background-color:#f5f5f5}.fr-checkbox-disabled input:checked+span{background:#0098f7;border:solid 2px #0098f7}.fr-checkbox-disabled input:checked+span svg{display:block}.fr-checkbox-disabled input:checked:active+span{background-color:#EcF5Ff}.fr-file-view{position:absolute;max-width:60%;right:10%;z-index:2147483642}.fr-file-item-thumbnail-hover{transition:transform .2s}.fr-file-item-thumbnail-hover:hover{-ms-transform:scale(1.3);-webkit-transform:scale(1.3);transform:scale(1.3)}.fr-file-name{padding-top:5px;font-size:12px;font-weight:bold}.fr-margin-16{margin-bottom:16px}.fr-none{display:none}.fr-display-block{display:block}.fr-files-manager-tooltip{position:relative}.padding-top-15{padding-top:15px !important;padding-bottom:0px !important}.fr-files-manager-tooltip .tooltiptext{visibility:hidden;width:max-content;max-width:250px;word-break:break-word;word-wrap:break-word;background-color:black;color:#fff;text-align:left;padding:4px;border-radius:2px;font-weight:100;font-size:10px;position:absolute;top:80%;left:50%;z-index:2147483647}.fr-files-manager-tooltip:hover .tooltiptext{visibility:visible}.fr-file-details{display:flex;flex-wrap:wrap;font-size:10px}.fr-file-date{word-break:break-word;word-wrap:break-word;max-width:110px;color:#444;padding-top:2px;padding-bottom:2px}.fr-file-size{color:#444;padding-top:2px;padding-bottom:2px}.dot{width:20px;height:20px;background-image:radial-gradient(circle, grey 1px, transparent 2px);background-size:100% 33.33%;margin-left:2px;margin-right:2px}.fr-file-action-icons{margin-right:5px;margin-left:5px !important;color:#999;height:25px !important;padding:5px !important}@media screen and (max-width: 700px){.fr-files-manager-tooltip .tooltiptext{max-width:250px;visibility:hidden;word-break:break-word;word-wrap:break-word;top:90%;left:0%;font-size:8px}}@media screen and (max-width: 500px){.fr-files-manager-tooltip .tooltiptext{max-width:100px;visibility:hidden;word-break:break-word;word-wrap:break-word;top:90%;left:0%}.fr-file-item-description{width:130px}.fr-file-item-right{width:100%}.progress-circle{font-size:6px}}@media screen and (max-width: 320px){.fr-files-manager-tooltip .tooltiptext{max-width:100px;visibility:hidden;word-break:break-word;word-wrap:break-word;top:90%;left:-50%;font-size:8px}.dot{width:20px;margin-left:0px;margin-right:3px}.fr-file-item-description{width:80px}.fr-file-details{display:flex;flex-wrap:wrap;font-size:9px}.fr-file-name{font-size:10px}.fr-file-action-icons{padding:0px !important}}@media screen and (min-width: 501px){.progress-circle{font-size:9px}}.fr-file-view-modal{display:block;position:fixed;position:-ms-page;z-index:2147483641;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,0.7)}.fr-file-view-modal-content{display:inline-block;text-align:center}.fr-file-view-image{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;max-width:80%;max-height:70%}.fr-file-view-close{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:bold;transition:0.3s}.fr-file-view-close:hover,.fr-file-view-close:focus{color:#bbb;text-decoration:none;cursor:pointer}.fr-file-error{color:red;font-weight:200;font-size:12px;padding-bottom:5px}.fr-file-error-h5{margin:0}.fr-file-item-right{display:flex;align-items:center;justify-content:flex-end;margin-right:20px}.fr-file-item-action-buttons{display:flex;align-items:center;justify-content:space-around}.fr-file-item-autoplay-checkbox{align-items:center;margin:0px;padding:0px;margin-right:5px}.fr-autoplay-checkbox-label{margin:0;cursor:default !important}.fr-checkbox-container:hover input ~ .fr-checkmark{background-color:#ccc}.fr-checkbox-container input:checked ~ .fr-checkmark{background-color:#2196F3}.fr-checkmark:after{content:"";position:absolute;display:none}.fr-checkbox-container input:checked ~ .fr-checkmark:after{display:block}.fr-container .fr-checkmark:after{left:5px;top:2px;width:3px;height:7px;border:solid white;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.fr-file-item-details .file-name{font-weight:bold;display:inline}.fr-file-item-details .file-description{font-weight:300;font-size:11px;display:inline}.fr-width-10{width:10%;display:inline-block}.fr-width-20{width:20%;display:inline-block}.fr-width-30{width:30%;display:inline-block}.fr-width-40{width:40%;display:inline-block}.fr-width-50{width:50%;display:inline-block}.fr-width-60{width:60%;display:inline-block}.fr-width-100{width:100%;display:inline-block}.fr-width-80{width:80%;display:inline-block}.fr-width-90{width:90%;display:inline-block}.fr-width-85{width:85%;display:inline-block}.fr-width-5{width:5%;display:inline-block}.fr-width-7{width:7%;display:inline-block}.fr-img-icon{color:#aaaaaa;font-size:16px;padding:0px 4px}.fr-position-content{position:relative;top:10px}.file-error{color:red}#myprogressBar{width:10%;height:5px;background-color:#4CAF50;position:relative;top:-30px}.fr-files-manager{z-index:2147483641 !important}.progress-circle{margin:0px;margin-left:10px;position:relative;padding:0;width:5em;height:5.1em;background-color:#f2e9e1;border-radius:50%;line-height:5em}.progress-circle:after{border:none;position:absolute;top:0.35em;left:0.35em;text-align:center;display:block;border-radius:50%;width:4.3em;height:4.3em;background-color:white;content:" "}.progress-circle span{position:absolute;line-height:5em;width:5em;text-align:center;display:block;color:#53777a;z-index:2}.progress-circle.over50 .left-half-clipper{clip:rect(auto, auto, auto, auto)}.progress-circle.over50 .first50-bar{position:absolute;clip:rect(0, 5em, 5em, 2.5em);background-color:#53777a;border-radius:50%;width:5em;height:5em}.progress-circle:not(.over50) .first50-bar{display:none}.progress-circle.p0 .value-bar{display:none}.progress-circle.p1 .value-bar{transform:rotate(4deg)}.progress-circle.p2 .value-bar{transform:rotate(7deg)}.progress-circle.p3 .value-bar{transform:rotate(11deg)}.progress-circle.p4 .value-bar{transform:rotate(14deg)}.progress-circle.p5 .value-bar{transform:rotate(18deg)}.progress-circle.p6 .value-bar{transform:rotate(22deg)}.progress-circle.p7 .value-bar{transform:rotate(25deg)}.progress-circle.p8 .value-bar{transform:rotate(29deg)}.progress-circle.p9 .value-bar{transform:rotate(32deg)}.progress-circle.p10 .value-bar{transform:rotate(36deg)}.progress-circle.p11 .value-bar{transform:rotate(40deg)}.progress-circle.p12 .value-bar{transform:rotate(43deg)}.progress-circle.p13 .value-bar{transform:rotate(47deg)}.progress-circle.p14 .value-bar{transform:rotate(50deg)}.progress-circle.p15 .value-bar{transform:rotate(54deg)}.progress-circle.p16 .value-bar{transform:rotate(58deg)}.progress-circle.p17 .value-bar{transform:rotate(61deg)}.progress-circle.p18 .value-bar{transform:rotate(65deg)}.progress-circle.p19 .value-bar{transform:rotate(68deg)}.progress-circle.p20 .value-bar{transform:rotate(72deg)}.progress-circle.p21 .value-bar{transform:rotate(76deg)}.progress-circle.p22 .value-bar{transform:rotate(79deg)}.progress-circle.p23 .value-bar{transform:rotate(83deg)}.progress-circle.p24 .value-bar{transform:rotate(86deg)}.progress-circle.p25 .value-bar{transform:rotate(90deg)}.progress-circle.p26 .value-bar{transform:rotate(94deg)}.progress-circle.p27 .value-bar{transform:rotate(97deg)}.progress-circle.p28 .value-bar{transform:rotate(101deg)}.progress-circle.p29 .value-bar{transform:rotate(104deg)}.progress-circle.p30 .value-bar{transform:rotate(108deg)}.progress-circle.p31 .value-bar{transform:rotate(112deg)}.progress-circle.p32 .value-bar{transform:rotate(115deg)}.progress-circle.p33 .value-bar{transform:rotate(119deg)}.progress-circle.p34 .value-bar{transform:rotate(122deg)}.progress-circle.p35 .value-bar{transform:rotate(126deg)}.progress-circle.p36 .value-bar{transform:rotate(130deg)}.progress-circle.p37 .value-bar{transform:rotate(133deg)}.progress-circle.p38 .value-bar{transform:rotate(137deg)}.progress-circle.p39 .value-bar{transform:rotate(140deg)}.progress-circle.p40 .value-bar{transform:rotate(144deg)}.progress-circle.p41 .value-bar{transform:rotate(148deg)}.progress-circle.p42 .value-bar{transform:rotate(151deg)}.progress-circle.p43 .value-bar{transform:rotate(155deg)}.progress-circle.p44 .value-bar{transform:rotate(158deg)}.progress-circle.p45 .value-bar{transform:rotate(162deg)}.progress-circle.p46 .value-bar{transform:rotate(166deg)}.progress-circle.p47 .value-bar{transform:rotate(169deg)}.progress-circle.p48 .value-bar{transform:rotate(173deg)}.progress-circle.p49 .value-bar{transform:rotate(176deg)}.progress-circle.p50 .value-bar{transform:rotate(180deg)}.progress-circle.p51 .value-bar{transform:rotate(184deg)}.progress-circle.p52 .value-bar{transform:rotate(187deg)}.progress-circle.p53 .value-bar{transform:rotate(191deg)}.progress-circle.p54 .value-bar{transform:rotate(194deg)}.progress-circle.p55 .value-bar{transform:rotate(198deg)}.progress-circle.p56 .value-bar{transform:rotate(202deg)}.progress-circle.p57 .value-bar{transform:rotate(205deg)}.progress-circle.p58 .value-bar{transform:rotate(209deg)}.progress-circle.p59 .value-bar{transform:rotate(212deg)}.progress-circle.p60 .value-bar{transform:rotate(216deg)}.progress-circle.p61 .value-bar{transform:rotate(220deg)}.progress-circle.p62 .value-bar{transform:rotate(223deg)}.progress-circle.p63 .value-bar{transform:rotate(227deg)}.progress-circle.p64 .value-bar{transform:rotate(230deg)}.progress-circle.p65 .value-bar{transform:rotate(234deg)}.progress-circle.p66 .value-bar{transform:rotate(238deg)}.progress-circle.p67 .value-bar{transform:rotate(241deg)}.progress-circle.p68 .value-bar{transform:rotate(245deg)}.progress-circle.p69 .value-bar{transform:rotate(248deg)}.progress-circle.p70 .value-bar{transform:rotate(252deg)}.progress-circle.p71 .value-bar{transform:rotate(256deg)}.progress-circle.p72 .value-bar{transform:rotate(259deg)}.progress-circle.p73 .value-bar{transform:rotate(263deg)}.progress-circle.p74 .value-bar{transform:rotate(266deg)}.progress-circle.p75 .value-bar{transform:rotate(270deg)}.progress-circle.p76 .value-bar{transform:rotate(274deg)}.progress-circle.p77 .value-bar{transform:rotate(277deg)}.progress-circle.p78 .value-bar{transform:rotate(281deg)}.progress-circle.p79 .value-bar{transform:rotate(284deg)}.progress-circle.p80 .value-bar{transform:rotate(288deg)}.progress-circle.p81 .value-bar{transform:rotate(292deg)}.progress-circle.p82 .value-bar{transform:rotate(295deg)}.progress-circle.p83 .value-bar{transform:rotate(299deg)}.progress-circle.p84 .value-bar{transform:rotate(302deg)}.progress-circle.p85 .value-bar{transform:rotate(306deg)}.progress-circle.p86 .value-bar{transform:rotate(310deg)}.progress-circle.p87 .value-bar{transform:rotate(313deg)}.progress-circle.p88 .value-bar{transform:rotate(317deg)}.progress-circle.p89 .value-bar{transform:rotate(320deg)}.progress-circle.p90 .value-bar{transform:rotate(324deg)}.progress-circle.p91 .value-bar{transform:rotate(328deg)}.progress-circle.p92 .value-bar{transform:rotate(331deg)}.progress-circle.p93 .value-bar{transform:rotate(335deg)}.progress-circle.p94 .value-bar{transform:rotate(338deg)}.progress-circle.p95 .value-bar{transform:rotate(342deg)}.progress-circle.p96 .value-bar{transform:rotate(346deg)}.progress-circle.p97 .value-bar{transform:rotate(349deg)}.progress-circle.p98 .value-bar{transform:rotate(353deg)}.progress-circle.p99 .value-bar{transform:rotate(356deg)}.progress-circle.p100 .value-bar{transform:rotate(360deg)}.left-half-clipper{border-radius:50%;width:5em;height:5em;position:absolute;clip:rect(0, 5em, 5em, 2.5em)}.value-bar{position:absolute;clip:rect(0, 2.5em, 5em, 0);width:5em;height:5em;border-radius:50%;border:0.45em solid #53777a;box-sizing:border-box}.align-autoplay{align-items:flex-end;margin-right:7px}.fr-hovered-over-file{background-color:#F0F0F0}.fr-thumbnail-padding{padding-right:4px}

/* End external import from public/froalav4/css/plugins/files_manager.min.css */
/* External import from public/froalav4/css/plugins/fullscreen.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}body.fr-fullscreen{overflow:hidden;height:100%;width:100%;position:fixed}.fr-box.fr-fullscreen{margin:0 !important;position:fixed;top:0;left:0;bottom:0;right:0;z-index:2147483630 !important;width:auto !important}.fr-box.fr-fullscreen .fr-wrapper{background-color:#FFF}.fr-box.fr-fullscreen.fr-basic.fr-top .fr-wrapper{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-fullscreen.fr-basic.fr-bottom .fr-wrapper{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-fullscreen .fr-toolbar{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-box.fr-fullscreen .fr-toolbar.fr-top{top:0 !important}.fr-box.fr-fullscreen .fr-toolbar.fr-bottom{bottom:0 !important}.fr-box.fr-fullscreen .fr-second-toolbar{margin-top:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-fullscreen-wrapper{z-index:2147483640 !important;width:100% !important;margin:0 !important;padding:0 !important;overflow:visible !important}

/* End external import from public/froalav4/css/plugins/fullscreen.min.css */
/* External import from public/froalav4/css/plugins/help.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal{text-align:left;padding:20px 20px 10px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table{border-collapse:collapse;font-size:14px;line-height:1.5;width:100%}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table+table{margin-top:20px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr{border:0}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th{text-align:left}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th,.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table td{padding:6px 0 4px}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr{border-bottom:solid 1px #ebebeb}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child{width:60%;color:#646464}.fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:nth-child(n+2){letter-spacing:0.5px}

/* End external import from public/froalav4/css/plugins/help.min.css */
/* External import from public/froalav4/css/plugins/image_manager.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-modal .fr-modal-head .fr-modal-head-line::after{clear:both;display:block;content:"";height:0}.fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more{margin-top:10px}.fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more.fr-not-available{opacity:0;width:0;padding:12px 0}.fr-modal .fr-modal-head .fr-modal-tags{padding:0 20px;display:none;text-align:left}.fr-modal .fr-modal-head .fr-modal-tags a{display:inline-block;opacity:0;padding:6px 12px;margin:8px 0 8px 8px;text-decoration:none;border-radius:32px;-moz-border-radius:32px;-webkit-border-radius:32px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-transition:opacity 0.2s ease 0s,background 0.2s ease 0s;-moz-transition:opacity 0.2s ease 0s,background 0.2s ease 0s;-ms-transition:opacity 0.2s ease 0s,background 0.2s ease 0s;-o-transition:opacity 0.2s ease 0s,background 0.2s ease 0s;cursor:pointer;background-color:#f5f5f5}.fr-modal .fr-modal-head .fr-modal-tags a:focus{outline:none;background-color:#ebebeb}.fr-modal .fr-modal-head .fr-modal-tags a:hover{background-color:#ebebeb}.fr-modal .fr-modal-head .fr-modal-tags a:active{background-color:#d6d6d6}.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag{background-color:#EcF5Ff;color:#0098f7}.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:focus{outline:none;background-color:#ebebeb}.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:hover{background-color:#ebebeb}.fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:active{background-color:#d6d6d6}.fr-show-tags .fr-modal-more svg path{fill:#0098f7}div.fr-modal-body{-webkit-transition:background 0.2s ease 0s;-moz-transition:background 0.2s ease 0s;-ms-transition:background 0.2s ease 0s;-o-transition:background 0.2s ease 0s}div.fr-modal-body .fr-preloader{display:block;margin:50px auto}div.fr-modal-body div.fr-image-list{text-align:center;margin:0 20px;padding:0}div.fr-modal-body div.fr-image-list .fr-list-column{float:left;width:calc((100% - 20px) / 2)}@media (min-width: 768px) and (max-width: 1199px){div.fr-modal-body div.fr-image-list .fr-list-column{width:calc((100% - 40px) / 3)}}@media (min-width: 1200px){div.fr-modal-body div.fr-image-list .fr-list-column{width:calc((100% - 60px) / 4)}}div.fr-modal-body div.fr-image-list .fr-list-column+.fr-list-column{margin-left:20px}div.fr-modal-body div.fr-image-list div.fr-image-container{position:relative;width:100%;display:block;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;overflow:hidden}div.fr-modal-body div.fr-image-list div.fr-image-container:first-child{margin-top:20px}div.fr-modal-body div.fr-image-list div.fr-image-container+div{margin-top:20px}div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after{position:absolute;-webkit-opacity:.5;-moz-opacity:.5;opacity:.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transition:opacity 0.2s ease 0s;-moz-transition:opacity 0.2s ease 0s;-ms-transition:opacity 0.2s ease 0s;-o-transition:opacity 0.2s ease 0s;background:#000;content:"";top:0;left:0;bottom:0;right:0;z-index:2}div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before{content:attr(data-deleting);color:#FFF;top:0;left:0;bottom:0;right:0;margin:auto;position:absolute;z-index:3;font-size:15px;height:20px}div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty{height:95px;background:#ccc;z-index:1}div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;content:attr(data-loading);display:inline-block;height:20px}div.fr-modal-body div.fr-image-list div.fr-image-container img{width:100%;vertical-align:middle;position:relative;z-index:2;-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transition:opacity 0.2s ease 0s,filter 0.2s ease 0s;-moz-transition:opacity 0.2s ease 0s,filter 0.2s ease 0s;-ms-transition:opacity 0.2s ease 0s,filter 0.2s ease 0s;-o-transition:opacity 0.2s ease 0s,filter 0.2s ease 0s;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected img{-webkit-opacity:.75;-moz-opacity:.75;opacity:.75;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-delete-img,div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-insert-img{display:inline-block}div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img,div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img{display:none;top:50%;border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-transition:background 0.2s ease 0s,color 0.2s ease 0s;-moz-transition:background 0.2s ease 0s,color 0.2s ease 0s;-ms-transition:background 0.2s ease 0s,color 0.2s ease 0s;-o-transition:background 0.2s ease 0s,color 0.2s ease 0s;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:absolute;cursor:pointer;margin:0;line-height:40px;text-decoration:none;z-index:3}div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img{background:#B8312F;fill:#FFF;padding:8px;left:50%;-webkit-transform:translateY(-50%) translateX(25%);-moz-transform:translateY(-50%) translateX(25%);-ms-transform:translateY(-50%) translateX(25%);-o-transform:translateY(-50%) translateX(25%)}div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img{background:#FFF;fill:#0098f7;padding:8px;left:50%;-webkit-transform:translateY(-50%) translateX(-125%);-moz-transform:translateY(-50%) translateX(-125%);-ms-transform:translateY(-50%) translateX(-125%);-o-transform:translateY(-50%) translateX(-125%)}.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover img{-webkit-opacity:.75;-moz-opacity:.75;opacity:.75;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-delete-img,.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-insert-img{display:inline-block;width:40px;height:40px}.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover{background:#bf4644;color:#FFF}.fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover{background:#ebebeb}

/* End external import from public/froalav4/css/plugins/image_manager.min.css */
/* External import from public/froalav4/css/plugins/line_breaker.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-line-breaker{cursor:text;border-top:1px solid #0098f7;position:fixed;z-index:2;display:none}.fr-line-breaker.fr-visible{display:block}.fr-line-breaker a.fr-floating-btn{position:absolute;left:calc(50% - (40px / 2));top:-20px}.fr-line-breaker a.fr-floating-btn svg{margin:8px;height:24px;width:24px}

/* End external import from public/froalav4/css/plugins/line_breaker.min.css */
/* External import from resources/assets/froala-custom/custom-link-plugin.css */
.fr-popup .fr-input-line select,
.fr-popup .fr-input-line input[type="file"] {
    width: 100%;
    margin: 10px 0 1px 0;
    border: none;
    border-bottom: solid 1px #bdbdbd;
    color: #222222;
    font-size: 14px;
    padding: 6px 0 2px;
    background: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;
}

.fr-popup .fr-input-line input[type="file"] {
    width: 100%;
    margin: 0 0 1px 0;
    border: none;
    border-bottom: solid 1px #bdbdbd;
    color: #222222;
    font-size: 14px;
    padding: 6px 0 2px;
    background: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;
}

.fr-popup .fr-input-line select + label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0);
    -webkit-transition: color 0.2s ease 0s;
    -moz-transition: color 0.2s ease 0s;
    -ms-transition: color 0.2s ease 0s;
    -o-transition: color 0.2s ease 0s;
    z-index: 3;
    width: 100%;
    display: block;
    background: #ffffff;
}

.fr-popup .fr-input-line select + label {
    color: #808080;
}

.fr-popup .fr-input-line.upload, .fr-popup .fr-input-line.location_on_page {
    display: none;
}

.fr-popup .fr-input-focus {
    background: #ffffff !important;
}


/* End external import from resources/assets/froala-custom/custom-link-plugin.css */
/* External import from public/froalav4/css/plugins/quick_insert.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-quick-insert{position:absolute;z-index:2147483639;white-space:nowrap;padding-right:10px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-quick-insert a.fr-floating-btn svg{margin:8px;width:24px;height:24px}.fr-quick-insert.fr-on a.fr-floating-btn svg{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg)}.fr-quick-insert.fr-hidden{display:none}.fr-qi-helper{position:absolute;z-index:3;padding-left:20px;white-space:nowrap}.fr-qi-helper a.fr-btn.fr-floating-btn{text-align:center;padding:6px 10px 10px 10px;display:inline-block;color:#222;background:#FFF;-webkit-opacity:0;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0)}.fr-qi-helper a.fr-btn.fr-floating-btn svg{fill:#222}.fr-qi-helper a.fr-btn.fr-floating-btn.fr-size-1{-webkit-opacity:1;-moz-opacity:1;opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1)}

/* End external import from public/froalav4/css/plugins/quick_insert.min.css */
/* External import from public/froalav4/css/plugins/table.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after {
  clear: both;
  display: block;
  content: "";
  height: 0; }

.fr-hide-by-clipping {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

.fr-element table td.fr-selected-cell, .fr-element table th.fr-selected-cell {
  border: 1px double #0098f7; }
.fr-element table td, .fr-element table th {
  -webkit-user-select: text;

  -moz-user-select: text;

  -ms-user-select: text;

  user-select: text;
  -o-user-select: text;
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text; }
.fr-element .fr-no-selection table td, .fr-element .fr-no-selection table th {
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none; }

.fr-table-resizer {
  cursor: col-resize;
  position: absolute;
  z-index: 3;
  display: none; }
  .fr-table-resizer.fr-moving {
    z-index: 2; }
  .fr-table-resizer div {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    border-right: 1px solid #0098f7; }

.fr-no-selection {
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none; }

.fr-popup .fr-table-size {
  margin: 20px; }
  .fr-popup .fr-table-size .fr-table-size-info {
    text-align: center;
    font-size: 14px; }
  .fr-popup .fr-table-size .fr-select-table-size {
    line-height: 0;
    padding: 5px;
    white-space: nowrap; }
    .fr-popup .fr-table-size .fr-select-table-size > span {
      display: inline-block;
      padding: 0 4px 4px 0;
      background: transparent; }
      .fr-popup .fr-table-size .fr-select-table-size > span > span {
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 1px solid #DDD; }
      .fr-popup .fr-table-size .fr-select-table-size > span.hover {
        background: transparent; }
        .fr-popup .fr-table-size .fr-select-table-size > span.hover > span {
          background: rgba(0, 152, 247, 0.3);
          border: solid 1px #0098f7; }
    .fr-popup .fr-table-size .fr-select-table-size .new-line::after {
      clear: both;
      display: block;
      content: "";
      height: 0; }
.fr-popup.fr-above .fr-table-size .fr-select-table-size > span {
  display: inline-block !important; }
.fr-popup .fr-table-colors {
  display: block;
  padding: 20px;
  padding-bottom: 0; }

.fr-popup.fr-desktop .fr-table-size .fr-select-table-size > span > span {
  width: 12px;
  height: 12px; }

.fr-insert-helper {
  position: absolute;
  z-index: 9999;
  white-space: nowrap; }

/* End external import from public/froalav4/css/plugins/table.css */
/* External import from public/froalav4/css/plugins/special_characters.min.css */
/*!
 * froala_editor v4.1.4 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2023 Froala Labs
 */

.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-popup .fr-buttons.fr-tabs .fr-special-character-category{padding:10px 15px}.fr-popup .fr-buttons.fr-tabs .fr-special-character-category span{font-weight:normal;font-size:16px}.fr-popup .fr-special-character{width:24px;height:24px}@media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px){.fr-popup .fr-icon-container.fr-sc-container{width:368px}}

/* End external import from public/froalav4/css/plugins/special_characters.min.css */
/* External import from public/froalav4/css/third_party/codemirror/theme.juejin.min.css */
.cm-s-juejin.CodeMirror{background:#f8f9fa}.cm-s-juejin .cm-def,.cm-s-juejin .cm-header{color:#1ba2f0}.cm-s-juejin .cm-comment{color:#009e9d}.cm-s-juejin .cm-attribute,.cm-s-juejin .cm-link,.cm-s-juejin .cm-quote,.cm-s-juejin .cm-strong{color:#fd7741}.cm-s-juejin .cm-builtin,.cm-s-juejin .cm-keyword,.cm-s-juejin .cm-url{color:#bb51b8}.cm-s-juejin .cm-hr{color:#909090}.cm-s-juejin .cm-tag{color:#107000}.cm-s-juejin .cm-variable-2{color:#0050a0}
/* End external import from public/froalav4/css/third_party/codemirror/theme.juejin.min.css */

/* Theme Components (Custom Sunshine Theme) */
/* External import from public/collections/css/sunshine-theme.css */
/* Main Theme Entry Point */

/* Import Variables First */
/* Imported from ./variables.css */
/*===============================================
THEME VARIABLES

What lives here: icon filters, the tint/shade mixes, layout and font vars.

What does NOT live here: brand colours, the gray ramp, and the semantic
tokens. Those are owned by tokens/ — primitives, palette, semantic and
extensions — which main.css imports after this file and which therefore win.
This file used to declare 35 of them a second time, and every one of those
declarations was dead: the value the browser used always came from tokens/.
They were removed rather than reconciled, because two spellings of the same
token is how they drift apart in the first place.

Add a new colour to tokens/, not here.
===============================================*/

:root {
  /* Layout Variables */
  --sidebar-width: 248px;
  --sidebar-offcanvas-width: 64px;
  --sidebar-content-left-padding: 24px;
  
  /* Typography */
  
  /* Extended Colors */

  /* Legacy Brand Colors */
  --dark: #153A3E;
  
  /* Grays not in the palette ramp */
  --black: #04161B;
  --ghostwhite: #F9FAFC;
  
  
  
  /* CSS Filters for Icons */
  /* Icon recolouring works by crushing the SVG to black — brightness(0)
     saturate(100%) — and then rotating that black to the target hue. Without
     the prefix the rotation applies to whatever colour the icon already is,
     which is how --primary-filter was rendering purple. Keep the prefix on
     every filter token. */
  --primary-filter: brightness(0) saturate(100%) invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%);
  --accent-filter: brightness(0) saturate(100%) invert(54%) sepia(50%) saturate(1503%) hue-rotate(132deg) brightness(94%) contrast(91%);
  --success-filter: brightness(0) saturate(100%) invert(54%) sepia(50%) saturate(1503%) hue-rotate(132deg) brightness(94%) contrast(91%);
  --warning-filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
  --destructive-filter: brightness(0) saturate(100%) invert(53%) sepia(22%) saturate(6419%) hue-rotate(318deg) brightness(101%) contrast(88%);
  --link-filter: brightness(0) saturate(100%) invert(42%) sepia(85%) saturate(1882%) hue-rotate(164deg) brightness(94%) contrast(99%);
  --info-filter: brightness(0) saturate(100%) invert(52%) sepia(92%) saturate(2026%) hue-rotate(158deg) brightness(100%) contrast(103%);
  --live-filter: brightness(0) saturate(100%) invert(46%) sepia(98%) saturate(774%) hue-rotate(134deg) brightness(97%) contrast(91%);
  --draft-filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
  --dev-filter: brightness(0) saturate(100%) invert(52%) sepia(92%) saturate(2026%) hue-rotate(158deg) brightness(100%) contrast(103%);
  --beta-filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);

  /* Extended Color Filters */

  --white-filter: brightness(0) saturate(100%) brightness(0) invert(1);
  --black-filter: brightness(0) saturate(100%) invert(7%) sepia(12%) saturate(2639%) hue-rotate(146deg) brightness(96%) contrast(99%);
  --dark-filter: brightness(0) saturate(100%) invert(17%) sepia(32%) saturate(755%) hue-rotate(137deg) brightness(101%) contrast(95%);
  --secondary-filter: brightness(0) saturate(100%) invert(49%) sepia(100%) saturate(2335%) hue-rotate(140deg) brightness(103%) contrast(91%);
  --system-filter: brightness(0) saturate(100%) invert(26%) sepia(42%) saturate(769%) hue-rotate(145deg) brightness(87%) contrast(98%);
  
  /* Gray Filters */
  --gray-0-filter: brightness(0) saturate(100%) invert(100%) sepia(21%) saturate(1161%) hue-rotate(178deg) brightness(101%) contrast(97%);
  --gray-25-filter: brightness(0) saturate(100%) invert(98%) sepia(43%) saturate(207%) hue-rotate(171deg) brightness(99%) contrast(96%);
  --gray-50-filter: brightness(0) saturate(100%) invert(95%) sepia(13%) saturate(63%) hue-rotate(149deg) brightness(98%) contrast(95%);
  --gray-100-filter: brightness(0) saturate(100%) invert(94%) sepia(4%) saturate(301%) hue-rotate(150deg) brightness(98%) contrast(88%);
  --gray-150-filter: brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(112%) hue-rotate(152deg) brightness(88%) contrast(95%);
  --gray-200-filter: brightness(0) saturate(100%) invert(82%) sepia(19%) saturate(120%) hue-rotate(152deg) brightness(95%) contrast(87%);
  --gray-250-filter: brightness(0) saturate(100%) invert(78%) sepia(10%) saturate(299%) hue-rotate(152deg) brightness(95%) contrast(86%);
  --gray-300-filter: brightness(0) saturate(100%) invert(83%) sepia(25%) saturate(142%) hue-rotate(151deg) brightness(80%) contrast(86%);
  --gray-400-filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
  --gray-500-filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
  --gray-600-filter: brightness(0) saturate(100%) invert(34%) sepia(5%) saturate(1851%) hue-rotate(151deg) brightness(100%) contrast(83%);
  --gray-700-filter: brightness(0) saturate(100%) invert(16%) sepia(69%) saturate(431%) hue-rotate(151deg) brightness(79%) contrast(60%); /* Solved to land on --gray-700 (#3B4C53) */
  --gray-800-filter: brightness(0) saturate(100%) invert(16%) sepia(14%) saturate(1552%) hue-rotate(152deg) brightness(85%) contrast(85%);
  --gray-900-filter: brightness(0) saturate(100%) invert(7%) sepia(14%) saturate(2100%) hue-rotate(148deg) brightness(95%) contrast(96%);
  --gray-950-filter: brightness(0) saturate(100%) invert(7%) sepia(12%) saturate(2639%) hue-rotate(146deg) brightness(96%) contrast(99%);
}

/* End import from ./variables.css */

/* Design System Tokens (OKLCH palette, semantic pairs, spacing, etc.) */
/* Imported from ./tokens/primitives.css */
/* =============================================================================
   LAYER 1A: Primitives
   =============================================================================
   Base parameters for OKLCH color derivation. These CSS custom properties
   control the palette generation in palette.css.

   Key design decisions:
     - --hue-gray is INDEPENDENT of --hue-brand. Users can pick any
       background tone (warm, cool, neutral) separately from brand accents.
     - --contrast-scale enables a Linear.app-style contrast slider that
       compresses/expands the lightness range of the gray palette.
     - All values are CSS custom properties for runtime theming.
   ============================================================================= */

:root {
  /* Brand hue (controls brand/primary color scales) */
  --hue-brand:       180;     /* teal (derived from $brand-primary #0D6B69) */

  /* Gray hue (INDEPENDENT of brand — controls background/surface tone)
     Default has a cool blue-teal tint matching the existing gray palette.
     Custom themes can set any value:
       warm charcoal: 30 | cool blue: 230 | neutral: 0 | match brand: 180 */
  --hue-gray:        200;
  --chroma-gray:     0.015;   /* subtle tint (0 = fully neutral gray) */

  /* Status hues */
  --hue-destructive: 15;      /* red-pink  (from #F05E73) */
  --hue-warning:     55;      /* orange    (from #FF9558) */
  --hue-info:        230;     /* blue      (from #00B7F0) */
  --hue-success:     170;     /* teal      (from #0BBBA6) */

  /* Brand chroma */
  --chroma-brand:    0.10;

  /* Contrast control (Linear.app-style slider)
     Adjusts lightness spread of the gray palette:
       1.0 = full contrast range (default)
       0.5 = compressed toward middle (lower contrast)
       0.15 = minimal contrast (accessibility: reduced contrast preference) */
  --contrast-scale:  1;
}

/* End import from ./tokens/primitives.css */
/* Imported from ./tokens/palette.css */
/* =============================================================================
   LAYER 1B: Palette — Color Ramps
   =============================================================================
   Raw palette values that semantic tokens (Layer 2) reference.

   Gray ramp — programmatically derived from --gray-950 using CIE LCH relative
   color syntax. lch(from <color> L c h) preserves chroma and hue from the
   anchor and steps only the lightness — the same approach Figma's LCH Colors
   plugin uses, so this produces pixel-matching output.

   Changing --gray-950 (the dark background color) remaps the entire neutral
   palette automatically, maintaining the same hue tint throughout.

     white     = #FFFFFF         gray-400  ≈ #81949B  (L=59)
     gray-0    ≈ #F9FAFC  (L=98) gray-500  ≈ #667B83  (L=49)
     gray-25   ≈ #F3F7F9  (L=97) gray-600  ≈ #4E636B  (L=40)
     gray-50   ≈ #E9EFF1  (L=93) gray-700  ≈ #374B53  (L=31)
     gray-100  ≈ #D9E1E4  (L=89) gray-800  ≈ #21343C  (L=22)
     gray-150  ≈ #CBD5D9  (L=84) gray-900  ≈ #0F2026  (L=11)
     gray-200  ≈ #BBC7CC  (L=79) gray-950    #04161B  ← anchor
     gray-250  ≈ #ABBAC0  (L=74) gray-925  ≈ (L=10) — dark submenu
     gray-300  ≈ #9DADB3  (L=70)
   ============================================================================= */

:root {
  /* Gray ramp — CIE LCH steps derived from --gray-950 (the only hardcoded value).
     L  = CIE L* lightness (0–100)
     c  = chroma scaled from the anchor — tapers toward light end to match the
          natural sRGB gamut shape (high chroma at mid-tones, low near white)
     h  = hue inherited from anchor (no change)

     Chroma scale factors: 1.0 at mid-tone (gray-500), tapering to ~0.07 at white.
     Changing --gray-950 shifts hue, chroma, and darkness — all steps recompute.

     gray-950 = #04161B — branded dark teal-black (L≈9), sets cool character for whole ramp
     gray-900 = derived at L=11 — primary dark bg / card/popover surface in dark mode */
  --white:     #FFFFFF;
  --gray-925:  lch(from var(--gray-950) 8.5 calc(c * 0.95) h);  /* ≈ midpoint between 900 (L=11) and 950 (L≈6) */
  --gray-950:  #04161B;
  --gray-900:  lch(from var(--gray-950) 11 calc(c * 0.97) h);  /* ≈ #0F2026 */
  --gray-800:  lch(from var(--gray-950) 22 calc(c * 1.05) h);  /* ≈ #21343C */
  --gray-700:  lch(from var(--gray-950) 31 calc(c * 1.12) h);  /* ≈ #374B53 */
  --gray-600:  lch(from var(--gray-950) 40 calc(c * 1.15) h);  /* ≈ #4E636B */
  --gray-500:  lch(from var(--gray-950) 49 calc(c * 1.15) h);  /* ≈ #667B83 */
  --gray-400:  lch(from var(--gray-950) 59 calc(c * 1.10) h);  /* ≈ #81949B */
  --gray-300:  lch(from var(--gray-950) 70 calc(c * 1.00) h);  /* ≈ #9DADB3 */
  --gray-250:  lch(from var(--gray-950) 74 calc(c * 0.88) h);  /* ≈ #ABBAC0 */
  --gray-200:  lch(from var(--gray-950) 79 calc(c * 0.75) h);  /* ≈ #BBC7CC */
  --gray-150:  lch(from var(--gray-950) 84 calc(c * 0.68) h);  /* ≈ #CBD5D9 */
  --gray-100:  lch(from var(--gray-950) 89 calc(c * 0.53) h);  /* ≈ #D9E1E4 */
  --gray-50:   lch(from var(--gray-950) 93 calc(c * 0.32) h);  /* ≈ #E9EFF1 */
  --gray-25:   lch(from var(--gray-950) 97 calc(c * 0.19) h);  /* ≈ #F3F7F9 */
  --gray-0:    lch(from var(--gray-950) 98 calc(c * 0.11) h);  /* ≈ #F9FAFC */

  /* Brand teal ramp */
  --brand-50:  oklch(96% 0.03 var(--hue-brand));
  --brand-100: oklch(90% 0.05 var(--hue-brand));
  --brand-200: oklch(80% 0.08 var(--hue-brand));
  --brand-300: oklch(70% 0.10 var(--hue-brand));    /* ~ #0BBBA6 */
  --brand-400: oklch(60% 0.10 var(--hue-brand));
  --brand-500: oklch(50% 0.09 var(--hue-brand));
  --brand-600: oklch(42% 0.08 var(--hue-brand));    /* ~ #0D6B69 */
  --brand-700: oklch(35% 0.07 var(--hue-brand));
  --brand-800: oklch(28% 0.06 var(--hue-brand));    /* ~ #0F4D5C */
  --brand-900: oklch(22% 0.05 var(--hue-brand));    /* ~ #153A3E */
  --brand-950: oklch(14% 0.04 var(--hue-brand));

  /* Destructive (red-pink) ramp — from #F05E73 */
  --destructive-50:  oklch(96% 0.02 var(--hue-destructive));
  --destructive-100: oklch(90% 0.06 var(--hue-destructive));
  --destructive-200: oklch(82% 0.10 var(--hue-destructive));
  --destructive-300: oklch(74% 0.14 var(--hue-destructive));
  --destructive-400: oklch(68% 0.16 var(--hue-destructive));
  --destructive-500: oklch(62% 0.17 var(--hue-destructive));  /* paints #D85164 — NOT the brand
                                                                 #F05E73. Do not treat this ramp
                                                                 step as the brand red. */
  --destructive-600: oklch(55% 0.18 var(--hue-destructive));
  --destructive-700: oklch(45% 0.15 var(--hue-destructive));
  --destructive-800: oklch(35% 0.10 var(--hue-destructive));
  --destructive-900: oklch(25% 0.08 var(--hue-destructive));
  --destructive-950: oklch(18% 0.05 var(--hue-destructive));

  /* Warning (amber/mango) ramp — from #FF9558 */
  --warning-50:  oklch(96% 0.02 var(--hue-warning));
  --warning-100: oklch(90% 0.05 var(--hue-warning));
  --warning-200: oklch(84% 0.08 var(--hue-warning));
  --warning-300: oklch(80% 0.11 var(--hue-warning));
  --warning-400: oklch(78% 0.13 var(--hue-warning));
  --warning-500: oklch(76% 0.14 var(--hue-warning));  /* ~ #FF9558 */
  --warning-600: oklch(65% 0.14 var(--hue-warning));
  --warning-700: oklch(52% 0.12 var(--hue-warning));
  --warning-800: oklch(40% 0.09 var(--hue-warning));
  --warning-900: oklch(28% 0.06 var(--hue-warning));
  --warning-950: oklch(18% 0.04 var(--hue-warning));

  /* Info (blue) ramp — from #00B7F0 */
  --info-50:  oklch(96% 0.02 var(--hue-info));
  --info-100: oklch(90% 0.05 var(--hue-info));
  --info-200: oklch(84% 0.08 var(--hue-info));
  --info-300: oklch(78% 0.11 var(--hue-info));
  --info-400: oklch(74% 0.13 var(--hue-info));
  --info-500: oklch(71% 0.14 var(--hue-info));  /* ~ #00B7F0 */
  --info-600: oklch(60% 0.13 var(--hue-info));
  --info-700: oklch(48% 0.11 var(--hue-info));
  --info-800: oklch(36% 0.08 var(--hue-info));
  --info-900: oklch(25% 0.05 var(--hue-info));
  --info-950: oklch(16% 0.03 var(--hue-info));

  /* Success (bright teal) ramp — from #0BBBA6 */
  --success-50:  oklch(96% 0.03 var(--hue-success));
  --success-100: oklch(90% 0.05 var(--hue-success));
  --success-200: oklch(82% 0.08 var(--hue-success));
  --success-300: oklch(76% 0.10 var(--hue-success));
  --success-400: oklch(73% 0.11 var(--hue-success));
  --success-500: oklch(70% 0.12 var(--hue-success));  /* ~ #0BBBA6 */
  --success-600: oklch(58% 0.11 var(--hue-success));
  --success-700: oklch(46% 0.09 var(--hue-success));
  --success-800: oklch(35% 0.07 var(--hue-success));
  --success-900: oklch(24% 0.05 var(--hue-success));
  --success-950: oklch(16% 0.03 var(--hue-success));

  /* Chart colors — monochromatic brand-green ramp for data visualization.
     All on the brand teal hue (≈180), stepping lightness for series distinction.
     chart-1 = Caribbean Green (primary/most prominent series).
     Sequential light → dark mirrors the brand story without departing the hue. */
  --chart-1: oklch(70% 0.12 var(--hue-brand));  /* Caribbean Green — #0BBBA6 */
  --chart-2: oklch(55% 0.10 var(--hue-brand));  /* mid teal */
  --chart-3: oklch(83% 0.07 var(--hue-brand));  /* light mint */
  --chart-4: oklch(40% 0.08 var(--hue-brand));  /* Kauai deep — #0D6B69 range */
  --chart-5: oklch(22% 0.05 var(--hue-brand));  /* #153A3E brand forest */
  --chart-6: #C8E9E4;  /* pale primary tint — light counterpart to chart-4 */
}

/* End import from ./tokens/palette.css */
/* Imported from ./tokens/semantic.css */
/* =============================================================================
   LAYER 2: Semantic Tokens
   =============================================================================
   Paired surface + foreground pattern. Every surface color has a guaranteed-
   contrast foreground. Dark mode flips the pairs.

   These are the tokens that components consume directly:
     background: var(--background);
     color: var(--foreground);
     border-color: var(--border);

   Convention: --name is the surface/background, --name-foreground is text on it.
   ============================================================================= */

:root {
  /* Page background & text */
  --background:            var(--gray-0);     /* lightest — #F9FAFC */
  --foreground:            var(--gray-950);  /* darkest  — #04161B */

  /* Cards — white surface floating above page bg */
  --card:                  white;
  --card-foreground:       var(--gray-950);

  /* Surface levels, named for their role rather than numbered.
     A numbered scale cannot grow downwards without renaming everything, and it
     already needed to: the floating layout puts something behind the panels.

       canvas     behind everything — only visible once panels float
       recessed   one below a panel: the expanded submenu, and the background
                  of full-bleed pages that have no panel of their own
       panel      the standard panel — the rail, and the body
       raised     a card sitting on a panel

     They are ordered — canvas is lowest, raised highest, and the step numbers
     are in the comments so "which is higher" is answerable at a glance. The
     NAMES are deliberately not numbers: this scale already had to grow
     downwards once, and a name numbered from the bottom cannot.

     Do not reach for these by hand to build a card. Use .vh-card and let the
     component choose — a card is one step above whatever it sits on, so the
     right token depends on context and the component already knows.

     Light mode runs out of colour at white, so panel and raised share it and
     the separation is carried by stroke and shadow instead. See .vh-card.

     Elevation is RELATIVE. Which role a region takes depends on what it sits
     next to — the body is a panel when a submenu separates it from the rail,
     and recessed when it is full-bleed. Assign roles per layout; do not bake an
     absolute level into a component. */
  --surface-canvas:        var(--gray-50);     /* step 0 — ≈#E9EFF1. Was --gray-25 (L=97), one
                                                  lightness point below recessed (L=98) — a real
                                                  difference that nobody could see. Dropped to the
                                                  next real palette step so canvas reads as a
                                                  different surface. */
  --surface-recessed:      var(--background);  /* step 1 — ≈#F9FAFC, the same value as --gray-0 */
  --surface-panel:         white;              /* step 2 */
  --surface-raised:        white;              /* step 3 — deliberately identical to panel. A card
                                                  on a panel is white on white, separated by its
                                                  1.5px stroke alone. White on white is intentional. */

  /* Popovers / dropdowns — same elevation as card */
  --popover:               white;
  --popover-foreground:    var(--gray-950);

  /* Primary action — Kauai Green, exact brand hex */
  --primary:               #0D6B69;
  --primary-foreground:    white;

  /* Secondary action — neutral gray for cancel/dismiss buttons */
  --secondary:             var(--gray-50);
  --secondary-foreground:  var(--gray-900);

  /* Muted / subdued content */
  --muted:                 var(--gray-25);   /* #F3F7F9 — very light, for tab bars, code bg, chips */
  --muted-foreground:      var(--gray-500);  /* #667B83 — secondary/subdued text everywhere */

  /* Accent — Caribbean Green, exact brand hex */
  --accent:                #0BBBA6;
  --accent-foreground:     white;

  /* Destructive — RED, severe: deletions, broken states, critical failures */
  --destructive:           #F05E73;
  --destructive-foreground: white;

  /* Warning — AMBER/MANGO (#FF9558), soft: validation, missed fields, alerts
     Not the end of the world, just needs attention. */
  --warning:               #FF9558;
  --warning-foreground:    white;

  /* Button interaction states: hover lowers OKLCH lightness by 0.07, pressed by 0.14,
     keeping chroma and hue. Literal hex is deliberate rather than OKLCH relative-colour
     syntax because older browsers do not support it, and a parse failure would leave
     buttons with no hover state at all. */
  --primary-shade:         #005755;
  --primary-active:        #004442;
  --accent-shade:          #00A591;
  --accent-active:         #008F7C;
  --destructive-shade:     #D7475F;
  --destructive-active:    #BE2E4B;
  --warning-shade:         #E77F41;
  --warning-active:        #CF6928;
  --success-shade:         #00A591;
  --success-active:        #008F7C;
  --info-shade:            #00A1D8;
  --info-active:           #008BC1;

  /* Dev — blue, developer-permissioned features and tools
     Used for: dev-mode UI indicators, developer-only features, admin tooling
     Inherits from --info so developer indicators stay aligned with the info brand color. */
  --dev:                   var(--info);
  --dev-foreground:        white;

  /* Link — sky blue, darkened for legibility on light backgrounds.
     A literal rather than a derivation from --info, on purpose. Deriving it as
     --info darkened by the same L step lands on #009ED6, which carries info's
     higher chroma and reads more saturated. The darkening here is deliberately
     NOT the -0.12 used elsewhere — it is -0.078 (the sweet spot). Visited
     drops a further -0.09, the same step the accent pair below uses. */
  --link:                  #019DCF;
  --link-visited:          oklch(from var(--link) calc(l - 0.09) c h);

  /* Link in the customer's theme colour — opt-in, via .link-accent.
     Named for the accent, not for green, because the accent is what it tracks: a
     customer who themes their accent purple gets a purple link here, and that is the
     intent. Anything that must stay green regardless of theme
     belongs on a semantic token instead. */
  --link-accent:           oklch(from var(--accent) calc(l - 0.12) c h);
  --link-accent-visited:   oklch(from var(--accent) calc(l - 0.21) c h);

  /* Link on permanently dark surfaces (tooltips, toasts, dark cards) — not a mode-flipped pair.
     Uses link-tint (lightened link) so contrast is sufficient on dark backgrounds in light mode. */
  --link-tint:             color-mix(in srgb, var(--link) 80%, white 20%);
  --link-on-dark:          var(--link-tint);

  /* Control state shades — checkboxes, radios and switches.

     These are deliberately NOT the -shade tokens buttons use. --warning-shade
     is #E77F41; controls hover to #FF8741, which is visibly lighter. A control
     is small, and the gentler step reads better on one — whether that SHOULD
     differ from a button is a design question, but it is now one token to
     change rather than 84 literals to hunt down.

     All three families agreed on every value before this existed, so nothing
     is being reconciled here, only named. */
  --control-primary-hover:     #0A5E5C;
  --control-primary-active:    #08514F;
  --control-warning-hover:     #FF8741;
  --control-info-hover:        #01AAE0;
  --control-destructive-hover: #D93457;
  /* system is a deep blue-green (hue 218), so it darkens by the same step
     primary does — primary being the closest analogue in the set. Before this
     existed the system controls hovered to the warning orange, 170 degrees
     away, copied from that variant and never corrected. */
  --control-system-hover:      #004250;

  /* Borders and inputs */
  /* gray-50 (L=93), not gray-100 (L=89). Chosen 2026-08-24 by comparing card
     outlines on the Account page: at L89 the outline asserts itself as a line;
     at L93 it reads as a boundary and lets the white card do the separating.
     gray-25 (L=97) was tried and rejected -- one step from the --gray-0 canvas
     (L=98), so it effectively disappears. NOTE border-width cannot go below 1px:
     the browser snaps 0.5/1/1.5px all to 1px, so colour is the only lever on how
     heavy an outline reads. Dark mode keeps --gray-800 and is unaffected. */
  --border:                var(--gray-50);   /* #E9EFF1 — outline around a surface */
  /* Separate from --border on purpose, and deliberately one step DARKER
     (gray-100, L=89, against the outline's gray-50, L=93). They answer different
     questions: the outline is a soft boundary that only has to say where the
     surface ends, while a divider has to actually separate two rows a reader is
     comparing -- matched values made the rows mushy. Same split --input
     already makes for field
     borders. */
  --divider:               var(--gray-100);  /* #D9E1E4 — rule between rows inside a surface */
  --input:                 var(--gray-100);  /* #D9E1E4 — input field border */
  /* Accent, not brand. Primary is the colour of the thing you are about to do
     (buttons); the focus ring is the colour of where you are -- a ring in
     button-green sitting next to a button in button-green reads as a second
     button. Accent also follows a customer theme.

     Pointed at --accent. Every :focus rule in the theme already glows accent
     via color-mix on var(--accent), and the keyboard focus ring uses it too,
     so the token and the rules agree. */
  --ring:                  var(--accent);    /* focus ring — accent green */

  /* Overlay — dark semi-transparent scrim for modals, drawers, dropdowns */
  --overlay:               oklch(from var(--gray-950) l c h / 0.70);

  /* Sidebar */
  --sidebar:                       var(--gray-50);
  --sidebar-foreground:            var(--gray-900);
  --sidebar-primary:               var(--brand-600);
  --sidebar-primary-foreground:    white;
  --sidebar-accent:                var(--brand-50);   /* intentionally subtle for hover */
  --sidebar-accent-foreground:     var(--brand-900);
  --sidebar-border:                var(--gray-200);
  --sidebar-ring:                  var(--brand-600);
}

/* =============================================================================
   Dark mode — flip the pairs
   ============================================================================= */

.dark, [data-theme="dark"] {
  --background:            var(--gray-925);  /* L=10 — reserves gray-950 for deepest dark accents */
  --foreground:            var(--gray-50);

  --card:                  var(--gray-900);
  --card-foreground:       var(--gray-50);

  /* Dark mode has room to keep going, so every role lightens by a real step
     rather than leaning on stroke and shadow the way light mode has to. */
  --surface-canvas:        var(--gray-950);    /* step 0 */
  --surface-recessed:      var(--background);  /* step 1 — gray-925 */
  --surface-panel:         var(--gray-900);    /* step 2 */
  --surface-raised:        var(--gray-900);    /* step 3 — same fill as panel, on purpose. A card
                                                  is an outline in both modes, drawn by its 1.5px
                                                  --border (gray-800 here) rather than by a fill. */

  --popover:               var(--gray-900);
  --popover-foreground:    var(--gray-50);

  --primary:               #0D6B69;  /* same as light mode — no transformation needed */
  --primary-foreground:    white;  /* was --gray-950: near-black on a dark teal, ~3:1.
                                      Nothing consumed it, so this changes no pixels - it
                                      stops the name lying to whoever adopts it first. */

  --secondary:             var(--gray-900);  /* subtle neutral — darker so it recedes like light-gray does in light mode */
  --secondary-foreground:  var(--gray-200);

  --muted:                 var(--gray-800);
  --muted-foreground:      var(--gray-400);

  --accent:                #0BBBA6;  /* same as light mode — already bright enough on dark bg */
  --accent-foreground:     white;  /* same as --primary-foreground above */

  --destructive:           #F05E73;  /* same as light mode — already bright enough on dark bg.
                                        Was var(--destructive-500), which paints #D85164, not
                                        #F05E73 — so light and dark showed different reds, and
                                        --destructive-shade/-active (derived from the light
                                        literal, defined once in :root) gave dark destructive
                                        buttons almost no visible hover step. */
  --destructive-foreground: white;

  --warning:               #FF9558;  /* same as light mode — no darkening needed */
  --warning-foreground:    white;

  --dev:                   oklch(74% 0.13 230);  /* lighter Sky Blue for dark bg */
  --dev-foreground:        var(--gray-950);

  /* Link — sky blue sits at 73% L, already legible on a dark background, so dark
     mode uses --info undarkened rather than the light-mode literal. Visited drops
     10%, as before. --link is the single blue link token; --link-blue was removed
     as a distinct token and consolidated here. See colors.css for the retained
     alias classes. */
  --link:                  var(--info);
  --link-visited:          oklch(from var(--info) calc(l - 0.10) c h);
  --link-on-dark:          var(--link);  /* dark mode --link is already light enough on dark bg */

  --link-accent:           var(--accent);
  --link-accent-visited:   oklch(from var(--accent) calc(l - 0.10) c h);

  --border:                var(--gray-800);
  --divider:               var(--gray-800);
  --input:                 var(--gray-800);
  /* Same accent in dark mode. --accent is deliberately unchanged between themes
     (see its own note above: "already bright enough on dark bg"), so the focus
     ring is one colour everywhere rather than a light and dark variant that can
     drift apart. */
  --ring:                  var(--accent);

  --sidebar:                       var(--gray-900);
  --sidebar-foreground:            var(--gray-50);
  --sidebar-primary:               var(--brand-400);
  --sidebar-primary-foreground:    var(--gray-950);
  --sidebar-accent:                var(--gray-800);
  --sidebar-accent-foreground:     var(--gray-50);
  --sidebar-border:                var(--gray-800);
  --sidebar-ring:                  var(--brand-400);
}

/* End import from ./tokens/semantic.css */
/* Imported from ./tokens/extensions.css */
/* =============================================================================
   LAYER 3: Vahara Extensions
   =============================================================================
   Tokens that the standard shadcn convention doesn't cover — success/info
   semantic pairs, content publishing states, and internal feature flags.

   Note: --dev is a semantic token (semantic.css) because it's a system-wide
   interface concept (developer-permissioned features), not just a badge color.

   Status token architecture:
   Status tokens inherit from their semantic tokens so brand and workflow colors
   stay aligned when base semantics change.
   ============================================================================= */

:root {
  /* ── Semantic extension pairs ────────────────────────────────────────────
     Reference palette tokens. Dark mode flips them. */

  /* Success — vivid teal (#0BBBA6)
     Used for: positive states, publish confirmation, go-live indicators */
  --success:               #0BBBA6;
  --success-foreground:    white;

  /* Info — blue (#00B7F0)
     Used for: informational banners, tips, help text */
  --info:                  #00B7F0;
  --info-foreground:       white;


  /* ── Content Publishing States ──────────────────────────────────────────
     Reflect the state of customer content in the publishing workflow.

     These carry meaning, not brand, so they are set to their own values rather
     than chained to a theme colour.
     --publish previously read var(--accent): once accent becomes customer-
     editable, a customer choosing purple would have got a purple "ready to
     publish" state. All three still resolve to the same colours they did
     before, so nothing moves today. */

  --live:                  #0BBBA6;               /* success teal — published & active */
  --publish:               #0BBBA6;               /* success teal — ready to publish */
  --draft:                 var(--warning);        /* mango orange — unpublished, in-progress */
  --archived:              var(--gray-500); /* saved but hidden — the neutral ramp, not a
                                              second near-identical gray. Was
                                              oklch(55% 0.015 220), which painted #687478
                                              against gray-500's #65787F. */

  /* Soft publishing states — the publish-status indicator's dots
     (Common/PublishStatusIndicator.js, components/publish-status.blade.php).
     Faded on purpose: the indicator sits beside a page title
     whenever the item has a state, so it has to read as status without
     competing with the title the way a full-strength badge would.

     Deliberately NOT derived from --live/--draft/--archived. Those are the badge
     colours and are free to move with the badge; these are the mark's own values,
     picked in Figma against the header ground. --archived-soft resolves to the
     neutral ramp because #85959B and gray-400 are the same colour to
     within a rounding step, and one gray beats two near-identical ones. */
  --live-soft:             #54CFC1;               /* faded teal   — published */
  --draft-soft:            #FFBD97;               /* faded mango  — draft */
  --archived-soft:         var(--gray-400);       /* ≈ #81949B / #85959B */


  /* ── Internal / Feature Flag States ────────────────────────────────────
     Used internally. Not visible to end customers in production.
     Note: --dev is in semantic.css (it's a system-wide UI concept, not just a badge). */

  /* --system and --beta answer different questions and can appear together:
     system is WHO can see this (Vahara staff only), beta is HOW FINISHED it is.
     A beta feature restricted to staff is both, so they stay visually distinct
     rather than becoming two shades of 'unusual'. */
  --system:                #0F4D5C;               /* Dark Teal #0F4D5C — system/internal-only */
  --beta:                  var(--warning);        /* Mango #FF9558 — under construction 🚧 */

  /* Default foreground for status badges */
  --status-foreground:     white;
}


/* =============================================================================
   Dark mode — lighter steps for legibility on dark backgrounds
   ============================================================================= */

.dark, [data-theme="dark"] {
  --success:               var(--success-400);   /* oklch(73% 0.11 170) */
  --success-foreground:    var(--gray-950);

  --info:                  var(--info-400);       /* oklch(74% 0.13 230) */
  --info-foreground:       var(--gray-950);

  --live:                  oklch(73% 0.11 170);  /* lighter teal */
  --publish:               oklch(73% 0.11 170);  /* matches live, as it does in light mode */
  --draft:                 oklch(78% 0.13 55);   /* lighter mango */
  --archived:              var(--gray-400); /* one step lighter on a dark background */

  /* Soft publishing states, one step lighter and less saturated, the same move
     --live and --draft make above. --archived-soft follows --archived one step
     up the neutral ramp. */
  --live-soft:             oklch(80% 0.095 185);
  --draft-soft:            oklch(87% 0.075 51);
  --archived-soft:         var(--gray-300);
  /* Dark mode system. Was var(--brand-700), which was wrong twice over: it sits
     at hue 179 against the light value's 218, so it was the brand green rather
     than a darker blue, and at L 0.35 against a L 0.21 background it barely
     separated from the page while every other semantic lifts to 0.74+.

     This keeps hue 218 and lifts to 0.55 — legible on the dark background, and
     still 0.19 below --info dark, which preserves the relationship light mode
     has where system reads as the deeper, quieter colour and info as the bright
     one. Chroma is nudged up because dark backgrounds wash saturation out. */
  --system:                oklch(55% 0.09 218);
  --beta:                  var(--warning-400);    /* lighter mango for dark bg */
}

/* End import from ./tokens/extensions.css */
/* Imported from ./tokens/typography.css */
/* =============================================================================
   Typography Tokens
   =============================================================================
   Font families, type scale, weights, and line heights.
   ============================================================================= */

:root {
  /* Font families */
  --font-sans:  "Open Sans", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale (based on major second ratio ~ 1.125) */
  --text-xs:    0.8125rem;  /* 13px — minimum text size */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */

  /* Font weights */
  --font-light:     300;
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
}

/* End import from ./tokens/typography.css */
/* Imported from ./tokens/spacing.css */
/* =============================================================================
   Spacing Tokens
   =============================================================================
   4px base grid. These values match the Tailwind spacing scale for
   compatibility with AI tool output (V0, Claude Code).

   The scale is 4px, but the CONVENTION IS 8px. Reach for the multiples of 8
   first — --space-2, -4, -6, -8, -12, -16, -20, -24 — and drop to a 4px step
   only when 8 genuinely does not work. 12px is the common exception, and some
   controls have their own defaults; input padding is one.

   The point is not purity. It is that a value like 30px should have been 32 or
   24, and without a stated rule there is nothing to notice that against.
   Paul, 2026-08-05.

   Existing CSS does not follow this yet — roughly 350 off-grid uses against
   185 on the 8px grid. Bringing those in line is deliberately separate work.
   ============================================================================= */

:root {
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;   /* 2px */
  --space-1:    0.25rem;    /* 4px */
  --space-1-5:  0.375rem;   /* 6px */
  --space-2:    0.5rem;     /* 8px */
  --space-2-5:  0.625rem;   /* 10px */
  --space-3:    0.75rem;    /* 12px */
  --space-3-5:  0.875rem;   /* 14px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-7:    1.75rem;    /* 28px */
  --space-8:    2rem;       /* 32px */
  --space-9:    2.25rem;    /* 36px */
  --space-10:   2.5rem;     /* 40px */
  --space-11:   2.75rem;    /* 44px */
  --space-12:   3rem;       /* 48px */
  --space-14:   3.5rem;     /* 56px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
}

/* End import from ./tokens/spacing.css */
/* Imported from ./tokens/tables.css */
/* Shared row density for plain, legacy, and React tables. */
:root {
  --vh-row-h-compact: 32px;
  --vh-row-h-default: 39px;
  --vh-row-h-comfortable: 56px;
}

/* End import from ./tokens/tables.css */
/* Imported from ./tokens/radii.css */
/* =============================================================================
   Border Radius Tokens
   =============================================================================
   Standard radius scale. --radius is the default used by most components.
   ============================================================================= */

:root {
  --radius-none: 0;
  --radius-sm:   0.25rem;   /* 4px  — pills, small badges */
  --radius:      0.375rem;  /* 6px  — default (buttons, inputs, cards) */
  --radius-md:   0.5rem;    /* 8px  — medium containers */
  --radius-lg:   0.75rem;   /* 12px — large cards, modals */
  --radius-xl:   1rem;      /* 16px — hero sections, large containers */
  --radius-2xl:  1.5rem;    /* 24px — rounded cards */
  --radius-full: 9999px;    /* pill shape, circles */
}

/* End import from ./tokens/radii.css */
/* Imported from ./tokens/shadows.css */
/* =============================================================================
   Shadow / Elevation Tokens
   =============================================================================
   Progressive elevation scale using OKLCH black for consistent shadow color.
   ============================================================================= */

:root {
  --shadow-none: none;
  --shadow-sm:   0 1px 2px 0 oklch(0% 0 0 / 0.05);
  --shadow:      0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1);
  --shadow-md:   0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1);
  --shadow-2xl:  0 25px 50px -12px oklch(0% 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 oklch(0% 0 0 / 0.05);
}

/* End import from ./tokens/shadows.css */
/* Imported from ./tokens/borders.css */
/* =============================================================================
   Border Width / Stroke Tokens
   ============================================================================= */

:root {
  --border-width-0:       0;
  --border-width-thin:    1px;
  --border-width-default: 1.5px;
  --border-width-thick:   2px;
}

/* End import from ./tokens/borders.css */
/* Imported from ./tokens/motion.css */
/* =============================================================================
   Motion / Animation Tokens
   =============================================================================
   Duration and easing for transitions and animations.
   ============================================================================= */

:root {
  /* Duration */
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;

  /* Easing */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Components using these tokens automatically respect user motion preferences. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    1ms;
    --duration-normal:  1ms;
    --duration-slow:    1ms;
    --duration-slower:  1ms;
  }
}

/* End import from ./tokens/motion.css */

/* Import Components */
/* Imported from ./components/reset-and-basics.css */
h1, h2, h3, h4, h5, ul, li, ol, dl {
  margin: 0;
  padding: 0;
}

html, body {
  font-family: 'Open Sans', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

h1 {
  font-size: 2.20rem;
}

h2 {
  font-size: 1.90rem;
}

h3 {
  font-size: 1.60rem;
}

h4 {
  font-size: 1.30rem;
}

h5 {
  font-size: 1.10rem;
}

h6 {
  font-size: .90rem;
}

@media print {
  * { 
    overflow: visible !important; 
  }
  .page { 
    page-break-after: always; 
  }
}

/* Zero-specificity default, so anything that names a font wins. Was `Open Sans`
   with no fallback; the token adds sans-serif, which only shows if Open Sans
   fails to load. */
* {
  font-family: var(--font-sans);
}

/* Number inputs in this product use their own controls. */
::-webkit-inner-spin-button {
  display: none;
}

/* Consolidated 2026-08-04. This was copied into 27 views, 28 times, always as
   the identical `cursor: default`. The :after reset was already shared. */
.check-cursor {
  cursor: default;
}

.check-cursor:after {
  display: none;
}

/* End import from ./components/reset-and-basics.css */
/* Imported from ./components/colors.css */
/* Color Utility Classes */

/* Button Icon Gray Classes - Referenced from _colors.scss */
.btn-icon-gray300:hover .vh-icon-white-hover {
  filter: var(--white-filter) !important;
}

/* Primary Colors */
.bg-primary {
  background-color: var(--primary) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.text-primary-hover:hover {
  color: var(--primary) !important;
}

.primary-hover:hover, .bg-primary-hover:hover {
  background-color: var(--primary) !important;
}

.text-primary-click:focus, .text-primary-click:focus-within {
  color: var(--primary) !important;
}

.tooltip-primary {
  opacity: 1;
}

.tooltip-primary.fade, .tooltip-primary.show {
  -webkit-transition: opacity 0s !important;

  -moz-transition: opacity 0s !important;

  -ms-transition: opacity 0s !important;

  -webkit-transition: opacity 0s !important;


  -moz-transition: opacity 0s !important;


  -ms-transition: opacity 0s !important;


  transition: opacity 0s !important;
}

.tooltip-primary .tooltip-inner {
  background-color: var(--primary);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  padding: 8px 12px;
}

.tooltip-primary.bs-tooltip-right .arrow::before {
  border-right-color: var(--primary);
}

.tooltip-primary.bs-tooltip-left .arrow::before {
  border-left-color: var(--primary);
}

.tooltip-primary.bs-tooltip-top .arrow::before {
  border-top-color: var(--primary);
}

.tooltip-primary.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--primary);
}

/* Secondary Colors */
.bg-secondary {
  background-color: var(--secondary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

.text-secondary-hover:hover {
  color: var(--secondary) !important;
}

.secondary-hover:hover, .bg-secondary-hover:hover {
  background-color: var(--secondary) !important;
}

.text-secondary-click:focus, .text-secondary-click:focus-within {
  color: var(--secondary) !important;
}

/* Muted foreground -- the semantic subdued-text token. Use for subtitles,
   helper/description text, and secondary body copy (auth screens et al.). */
.text-muted-foreground {
  color: var(--muted-foreground) !important;
}

.tooltip-secondary {
  opacity: 1;
}

.tooltip-secondary.fade, .tooltip-secondary.show {
  -webkit-transition: opacity 0s !important;

  -moz-transition: opacity 0s !important;

  -ms-transition: opacity 0s !important;

  -webkit-transition: opacity 0s !important;


  -moz-transition: opacity 0s !important;


  -ms-transition: opacity 0s !important;


  transition: opacity 0s !important;
}

.tooltip-secondary .tooltip-inner {
  background-color: var(--secondary);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  padding: 8px 12px;
}

.tooltip-secondary.bs-tooltip-right .arrow::before {
  border-right-color: var(--secondary);
}

.tooltip-secondary.bs-tooltip-left .arrow::before {
  border-left-color: var(--secondary);
}

.tooltip-secondary.bs-tooltip-top .arrow::before {
  border-top-color: var(--secondary);
}

.tooltip-secondary.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--secondary);
}

/* Accent Colors */
.bg-accent {
  background-color: var(--accent) !important;
}

/* Accent Tint Classes */
.accent10, .bg-accent-10, .accent-tint-10 {
  background-color: rgb(230.6, 248.2, 246.1) !important;
}

.accent20, .bg-accent-20, .accent-tint-20 {
  background-color: rgb(206.2, 241.4, 237.2) !important;
}

.accent30, .bg-accent-30, .accent-tint-30 {
  background-color: rgb(181.8, 234.6, 228.3) !important;
}

.accent40, .bg-accent-40, .accent-tint-40 {
  background-color: rgb(157.4, 227.8, 219.4) !important;
}

.accent50, .bg-accent-50, .accent-tint-50 {
  background-color: rgb(133, 221, 210.5) !important;
}

.accent60, .bg-accent-60, .accent-tint-60 {
  background-color: rgb(108.6, 214.2, 201.6) !important;
}

.accent70, .bg-accent-70, .accent-tint-70 {
  background-color: rgb(84.2, 207.4, 192.7) !important;
}

.accent80, .bg-accent-80, .accent-tint-80 {
  background-color: rgb(59.8, 200.6, 183.8) !important;
}

.accent90, .bg-accent-90, .accent-tint-90 {
  background-color: rgb(35.4, 193.8, 174.9) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.text-accent-hover:hover {
  color: var(--accent) !important;
}

.accent-hover:hover, .bg-accent-hover:hover {
  background-color: var(--accent) !important;
}

.text-accent-click:focus, .text-accent-click:focus-within {
  color: var(--accent) !important;
}

/* Success Colors */
.bg-success {
  background-color: var(--success) !important;
}

/* Success Tint Classes */
.success10, .bg-success-10, .success-tint-10 {
  background-color: rgb(230.6, 248.2, 246.1) !important;
}

.success20, .bg-success-20, .success-tint-20 {
  background-color: rgb(206.2, 241.4, 237.2) !important;
}

.success30, .bg-success-30, .success-tint-30 {
  background-color: rgb(181.8, 234.6, 228.3) !important;
}

.success40, .bg-success-40, .success-tint-40 {
  background-color: rgb(157.4, 227.8, 219.4) !important;
}

.success50, .bg-success-50, .success-tint-50 {
  background-color: rgb(133, 221, 210.5) !important;
}

.success60, .bg-success-60, .success-tint-60 {
  background-color: rgb(108.6, 214.2, 201.6) !important;
}

.success70, .bg-success-70, .success-tint-70 {
  background-color: rgb(84.2, 207.4, 192.7) !important;
}

.success80, .bg-success-80, .success-tint-80 {
  background-color: rgb(59.8, 200.6, 183.8) !important;
}

.success90, .bg-success-90, .success-tint-90 {
  background-color: rgb(35.4, 193.8, 174.9) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-success-hover:hover {
  color: var(--success) !important;
}

.success-hover:hover, .bg-success-hover:hover {
  background-color: var(--success) !important;
}

.text-success-click:focus, .text-success-click:focus-within {
  color: var(--success) !important;
}

/* Error Colors */
.bg-error {
  background-color: var(--warning) !important;
}

/* Error Tint Classes */
.error10, .bg-error-10, .error-tint-10 {
  background-color: rgb(255, 244.4, 238.3) !important;
}

.error20, .bg-error-20, .error-tint-20 {
  background-color: rgb(255, 233.8, 221.6) !important;
}

.error30, .bg-error-30, .error-tint-30 {
  background-color: rgb(255, 223.2, 204.9) !important;
}

.error40, .bg-error-40, .error-tint-40 {
  background-color: rgb(255, 212.6, 188.2) !important;
}

.error50, .bg-error-50, .error-tint-50 {
  background-color: rgb(255, 202, 171.5) !important;
}

.error60, .bg-error-60, .error-tint-60 {
  background-color: rgb(255, 191.4, 154.8) !important;
}

.error70, .bg-error-70, .error-tint-70 {
  background-color: rgb(255, 180.8, 138.1) !important;
}

.error80, .bg-error-80, .error-tint-80 {
  background-color: rgb(255, 170.2, 121.4) !important;
}

.error90, .bg-error-90, .error-tint-90 {
  background-color: rgb(255, 159.6, 104.7) !important;
}

.text-error {
  color: var(--warning) !important;
}

.text-error-hover:hover {
  color: var(--warning) !important;
}

.error-hover:hover, .bg-error-hover:hover {
  background-color: var(--warning) !important;
}

.text-error-click:focus, .text-error-click:focus-within {
  color: var(--warning) !important;
}

/* Warning Colors */
.bg-warning {
  background-color: var(--warning) !important;
}

/* Warning Tint Classes */
.warning10, .bg-warning-10, .warning-tint-10 {
  background-color: rgb(255, 244.4, 238.3) !important;
}

.warning20, .bg-warning-20, .warning-tint-20 {
  background-color: rgb(255, 233.8, 221.6) !important;
}

.warning30, .bg-warning-30, .warning-tint-30 {
  background-color: rgb(255, 223.2, 204.9) !important;
}

.warning40, .bg-warning-40, .warning-tint-40 {
  background-color: rgb(255, 212.6, 188.2) !important;
}

.warning50, .bg-warning-50, .warning-tint-50 {
  background-color: rgb(255, 202, 171.5) !important;
}

.warning60, .bg-warning-60, .warning-tint-60 {
  background-color: rgb(255, 191.4, 154.8) !important;
}

.warning70, .bg-warning-70, .warning-tint-70 {
  background-color: rgb(255, 180.8, 138.1) !important;
}

.warning80, .bg-warning-80, .warning-tint-80 {
  background-color: rgb(255, 170.2, 121.4) !important;
}

.warning90, .bg-warning-90, .warning-tint-90 {
  background-color: rgb(255, 159.6, 104.7) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-warning-hover:hover {
  color: var(--warning) !important;
}

.warning-hover:hover, .bg-warning-hover:hover {
  background-color: var(--warning) !important;
}

.text-warning-click:focus, .text-warning-click:focus-within {
  color: var(--warning) !important;
}

/* Danger Colors */
.bg-danger {
  background-color: var(--destructive) !important;
}

/* Danger Tint Classes */
.danger10, .bg-danger-10, .danger-tint-10 {
  background-color: rgb(253.5, 238.9, 241) !important;
}

.danger20, .bg-danger-20, .danger-tint-20 {
  background-color: rgb(252, 222.8, 227) !important;
}

.danger30, .bg-danger-30, .danger-tint-30 {
  background-color: rgb(250.5, 206.7, 213) !important;
}

.danger40, .bg-danger-40, .danger-tint-40 {
  background-color: rgb(249, 190.6, 199) !important;
}

.danger50, .bg-danger-50, .danger-tint-50 {
  background-color: rgb(247.5, 174.5, 185) !important;
}

.danger60, .bg-danger-60, .danger-tint-60 {
  background-color: rgb(246, 158.4, 171) !important;
}

.danger70, .bg-danger-70, .danger-tint-70 {
  background-color: rgb(244.5, 142.3, 157) !important;
}

.danger80, .bg-danger-80, .danger-tint-80 {
  background-color: rgb(243, 126.2, 143) !important;
}

.danger90, .bg-danger-90, .danger-tint-90 {
  background-color: rgb(241.5, 110.1, 129) !important;
}

.text-danger {
  color: var(--destructive) !important;
}

.text-danger-hover:hover {
  color: var(--destructive) !important;
}

.danger-hover:hover, .bg-danger-hover:hover {
  background-color: var(--destructive) !important;
}

.text-danger-click:focus, .text-danger-click:focus-within {
  color: var(--destructive) !important;
}

/* Info Colors */
.bg-info {
  background-color: var(--info) !important;
}

/* Info Tint Classes */
.info10, .bg-info-10, .info-tint-10 {
  background-color: rgb(229.5, 247.8, 253.5) !important;
}

.info20, .bg-info-20, .info-tint-20 {
  background-color: rgb(204, 240.6, 252) !important;
}

.info30, .bg-info-30, .info-tint-30 {
  background-color: rgb(178.5, 233.4, 250.5) !important;
}

.info40, .bg-info-40, .info-tint-40 {
  background-color: rgb(153, 226.2, 249) !important;
}

.info50, .bg-info-50, .info-tint-50 {
  background-color: rgb(127.5, 219, 247.5) !important;
}

.info60, .bg-info-60, .info-tint-60 {
  background-color: rgb(102, 211.8, 246) !important;
}

.info70, .bg-info-70, .info-tint-70 {
  background-color: rgb(76.5, 204.6, 244.5) !important;
}

.info80, .bg-info-80, .info-tint-80 {
  background-color: rgb(51, 197.4, 243) !important;
}

.info90, .bg-info-90, .info-tint-90 {
  background-color: rgb(25.5, 190.2, 241.5) !important;
}

.text-info {
  color: var(--info) !important;
}

.text-info-hover:hover {
  color: var(--info) !important;
}

.info-hover:hover, .bg-info-hover:hover {
  background-color: var(--info) !important;
}

.text-info-click:focus, .text-info-click:focus-within {
  color: var(--info) !important;
}

/* No bare colour-name aliases here. Every background utility is .bg-<name>.
   Bare names like .primary or .dark collide with other class uses (e.g. .dark
   is the dark-mode class on body AND an icon-variant class in the sidebar).
   If you want a background, write .bg-<name>. */

/* Link Colors.
   No bare .link alias here on purpose: typography.css owns .link as the text
   link class, and an !important background would paint a block behind every
   one of them. Use .bg-link for the background. */
.bg-link {
  background-color: var(--link) !important;
}

/* Link Tint Classes */
.link10, .bg-link-10, .link-tint-10 {
  background-color: rgb(229.6, 245.2, 250.2) !important;
}

.link20, .bg-link-20, .link-tint-20 {
  background-color: rgb(204.2, 235.4, 243.4) !important;
}

.link30, .bg-link-30, .link-tint-30 {
  background-color: rgb(178.8, 225.6, 236.6) !important;
}

.link40, .bg-link-40, .link-tint-40 {
  background-color: rgb(153.4, 215.8, 229.8) !important;
}

.link50, .bg-link-50, .link-tint-50 {
  background-color: rgb(128, 206, 223) !important;
}

.link60, .bg-link-60, .link-tint-60 {
  background-color: rgb(102.6, 196.2, 216.2) !important;
}

.link70, .bg-link-70, .link-tint-70 {
  background-color: rgb(77.2, 186.4, 209.4) !important;
}

.link80, .bg-link-80, .link-tint-80 {
  background-color: rgb(51.8, 176.6, 202.6) !important;
}

.link90, .bg-link-90, .link-tint-90 {
  background-color: rgb(26.4, 166.8, 195.8) !important;
}

.text-link {
  color: var(--link) !important;
}

.text-link-hover:hover {
  color: var(--link) !important;
}

.link-hover:hover, .bg-link-hover:hover {
  background-color: var(--link) !important;
}

.text-link-click:focus, .text-link-click:focus-within {
  color: var(--link) !important;
}

/* Link (blue) — CONSOLIDATED: --link-blue was removed as a
   distinct token in tokens/semantic.css (it was byte-identical to --link in
   light mode, and only ~close in dark mode). These classes came in from the
   billing branch and its markup still uses them, so they are retained as
   aliases pointed at --link rather than deleted. Mirrors the .text-link
   group above 1:1. */
.text-link-blue {
  color: var(--link) !important;
}

.text-link-blue-hover:hover {
  color: var(--link) !important;
}

.text-link-blue-click:focus, .text-link-blue-click:focus-within {
  color: var(--link) !important;
}

/* Status Colors */
.bg-live {
  background-color: var(--live) !important;
}

/* Live Tint Classes */
.live10, .bg-live-10, .live-tint-10 {
  background-color: rgb(230.6, 248.2, 246.1) !important;
}

.live20, .bg-live-20, .live-tint-20 {
  background-color: rgb(206.2, 241.4, 237.2) !important;
}

.live30, .bg-live-30, .live-tint-30 {
  background-color: rgb(181.8, 234.6, 228.3) !important;
}

.live40, .bg-live-40, .live-tint-40 {
  background-color: rgb(157.4, 227.8, 219.4) !important;
}

.live50, .bg-live-50, .live-tint-50 {
  background-color: rgb(133, 221, 210.5) !important;
}

.live60, .bg-live-60, .live-tint-60 {
  background-color: rgb(108.6, 214.2, 201.6) !important;
}

.live70, .bg-live-70, .live-tint-70 {
  background-color: rgb(84.2, 207.4, 192.7) !important;
}

.live80, .bg-live-80, .live-tint-80 {
  background-color: rgb(59.8, 200.6, 183.8) !important;
}

.live90, .bg-live-90, .live-tint-90 {
  background-color: rgb(35.4, 193.8, 174.9) !important;
}

.text-live {
  color: var(--live) !important;
}

.bg-draft {
  background-color: var(--draft) !important;
}

/* Draft Tint Classes */
.draft10, .bg-draft-10, .draft-tint-10 {
  background-color: rgb(255, 244.4, 238.3) !important;
}

.draft20, .bg-draft-20, .draft-tint-20 {
  background-color: rgb(255, 233.8, 221.6) !important;
}

.draft30, .bg-draft-30, .draft-tint-30 {
  background-color: rgb(255, 223.2, 204.9) !important;
}

.draft40, .bg-draft-40, .draft-tint-40 {
  background-color: rgb(255, 212.6, 188.2) !important;
}

.draft50, .bg-draft-50, .draft-tint-50 {
  background-color: rgb(255, 202, 171.5) !important;
}

.draft60, .bg-draft-60, .draft-tint-60 {
  background-color: rgb(255, 191.4, 154.8) !important;
}

.draft70, .bg-draft-70, .draft-tint-70 {
  background-color: rgb(255, 180.8, 138.1) !important;
}

.draft80, .bg-draft-80, .draft-tint-80 {
  background-color: rgb(255, 170.2, 121.4) !important;
}

.draft90, .bg-draft-90, .draft-tint-90 {
  background-color: rgb(255, 159.6, 104.7) !important;
}

.text-draft {
  color: var(--draft) !important;
}

.bg-dev {
  background-color: var(--dev) !important;
}

/* Dev Tint Classes */
.dev10, .bg-dev-10, .dev-tint-10 {
  background-color: rgb(229.5, 247.8, 253.5) !important;
}

.dev20, .bg-dev-20, .dev-tint-20 {
  background-color: rgb(204, 240.6, 252) !important;
}

.dev30, .bg-dev-30, .dev-tint-30 {
  background-color: rgb(178.5, 233.4, 250.5) !important;
}

.dev40, .bg-dev-40, .dev-tint-40 {
  background-color: rgb(153, 226.2, 249) !important;
}

.dev50, .bg-dev-50, .dev-tint-50 {
  background-color: rgb(127.5, 219, 247.5) !important;
}

.dev60, .bg-dev-60, .dev-tint-60 {
  background-color: rgb(102, 211.8, 246) !important;
}

.dev70, .bg-dev-70, .dev-tint-70 {
  background-color: rgb(76.5, 204.6, 244.5) !important;
}

.dev80, .bg-dev-80, .dev-tint-80 {
  background-color: rgb(51, 197.4, 243) !important;
}

.dev90, .bg-dev-90, .dev-tint-90 {
  background-color: rgb(25.5, 190.2, 241.5) !important;
}

.text-dev {
  color: var(--dev) !important;
}

.bg-system {
  background-color: var(--system) !important;
}

/* System Tint Classes */
.system10, .bg-system-10, .system-tint-10 {
  background-color: rgb(255, 244.4, 238.3) !important;
}

.system20, .bg-system-20, .system-tint-20 {
  background-color: rgb(255, 233.8, 221.6) !important;
}

.system30, .bg-system-30, .system-tint-30 {
  background-color: rgb(255, 223.2, 204.9) !important;
}

.system40, .bg-system-40, .system-tint-40 {
  background-color: rgb(255, 212.6, 188.2) !important;
}

.system50, .bg-system-50, .system-tint-50 {
  background-color: rgb(255, 202, 171.5) !important;
}

.system60, .bg-system-60, .system-tint-60 {
  background-color: rgb(255, 191.4, 154.8) !important;
}

.system70, .bg-system-70, .system-tint-70 {
  background-color: rgb(255, 180.8, 138.1) !important;
}

.system80, .bg-system-80, .system-tint-80 {
  background-color: rgb(255, 170.2, 121.4) !important;
}

.system90, .bg-system-90, .system-tint-90 {
  background-color: rgb(255, 159.6, 104.7) !important;
}

.text-system {
  color: var(--system) !important;
}

.bg-beta {
  background-color: var(--beta) !important;
}

/* Beta Tint Classes */
.beta10, .bg-beta-10, .beta-tint-10 {
  background-color: rgb(255, 244.4, 238.3) !important;
}

.beta20, .bg-beta-20, .beta-tint-20 {
  background-color: rgb(255, 233.8, 221.6) !important;
}

.beta30, .bg-beta-30, .beta-tint-30 {
  background-color: rgb(255, 223.2, 204.9) !important;
}

.beta40, .bg-beta-40, .beta-tint-40 {
  background-color: rgb(255, 212.6, 188.2) !important;
}

.beta50, .bg-beta-50, .beta-tint-50 {
  background-color: rgb(255, 202, 171.5) !important;
}

.beta60, .bg-beta-60, .beta-tint-60 {
  background-color: rgb(255, 191.4, 154.8) !important;
}

.beta70, .bg-beta-70, .beta-tint-70 {
  background-color: rgb(255, 180.8, 138.1) !important;
}

.beta80, .bg-beta-80, .beta-tint-80 {
  background-color: rgb(255, 170.2, 121.4) !important;
}

.beta90, .bg-beta-90, .beta-tint-90 {
  background-color: rgb(255, 159.6, 104.7) !important;
}

.text-beta {
  color: var(--beta) !important;
}

/* Archived */
.bg-archived {
  background-color: var(--archived) !important;
}

.text-archived {
  color: var(--archived) !important;
}

.text-archived-hover:hover {
  color: var(--archived) !important;
}

.archived-hover:hover, .bg-archived-hover:hover {
  background-color: var(--archived) !important;
}

/* Tertiary Colors */
.bg-tertiary {
  background-color: var(--system) !important;
}

.text-tertiary {
  color: var(--system) !important;
}

.text-tertiary-hover:hover {
  color: var(--system) !important;
}

.tertiary-hover:hover, .bg-tertiary-hover:hover {
  background-color: var(--system) !important;
}

.text-tertiary-click:focus, .text-tertiary-click:focus-within {
  color: var(--system) !important;
}

/* Gray Colors */
.bg-white {
  background-color: var(--white) !important;
}

.text-white {
  color: var(--white) !important;
}

.bg-black {
  background-color: var(--black) !important;
}

.text-black {
  color: var(--black) !important;
}

.bg-dark {
  background-color: var(--dark) !important;
}

.text-dark {
  color: var(--dark) !important;
}

/* Gray Scale */
.gray-950, .bg-gray-950 {
  background-color: var(--gray-950) !important;
}

.text-gray-950 {
  color: var(--gray-950) !important;
}

.gray-900, .bg-gray-900 {
  background-color: var(--gray-900) !important;
}

.text-gray-900 {
  color: var(--gray-900) !important;
}

.gray-800, .bg-gray-800 {
  background-color: var(--gray-800) !important;
}

.text-gray-800 {
  color: var(--gray-800) !important;
}

.gray-700, .bg-gray-700 {
  background-color: var(--gray-700) !important;
}

.text-gray-700 {
  color: var(--gray-700) !important;
}

.gray-600, .bg-gray-600 {
  background-color: var(--gray-600) !important;
}

.text-gray-600 {
  color: var(--gray-600) !important;
}

.gray-500, .bg-gray-500 {
  background-color: var(--gray-500) !important;
}

.text-gray-500 {
  color: var(--gray-500) !important;
}

.gray-400, .bg-gray-400 {
  background-color: var(--gray-400) !important;
}

.text-gray-400 {
  color: var(--gray-400) !important;
}

.gray-300, .bg-gray-300 {
  background-color: var(--gray-300) !important;
}

.text-gray-300 {
  color: var(--gray-300) !important;
}

.gray-250, .bg-gray-250 {
  background-color: var(--gray-250) !important;
}

.text-gray-250 {
  color: var(--gray-250) !important;
}

.gray-200, .bg-gray-200 {
  background-color: var(--gray-200) !important;
}

.text-gray-200 {
  color: var(--gray-200) !important;
}

.gray-150, .bg-gray-150 {
  background-color: var(--gray-150) !important;
}

.text-gray-150 {
  color: var(--gray-150) !important;
}

.gray-100, .bg-gray-100 {
  background-color: var(--gray-100) !important;
}

.text-gray-100 {
  color: var(--gray-100) !important;
}

.gray-50, .bg-gray-50 {
  background-color: var(--gray-50) !important;
}

.text-gray-50 {
  color: var(--gray-50) !important;
}

.gray-25, .bg-gray-25 {
  background-color: var(--gray-25) !important;
}

.text-gray-25 {
  color: var(--gray-25) !important;
}

.gray-0, .bg-gray-0 {
  background-color: var(--gray-0) !important;
}

.text-gray-0 {
  color: var(--gray-0) !important;
}

/* Gray Tint Classes */
.gray-900-tint-10 {
  background-color: color-mix(in srgb, var(--gray-900) 90%, white) !important;
}

.gray-800-tint-10 {
  background-color: color-mix(in srgb, var(--gray-800) 90%, white) !important;
}

.gray-700-tint-10 {
  background-color: color-mix(in srgb, var(--gray-700) 90%, white) !important;
}

.gray-600-tint-10 {
  background-color: color-mix(in srgb, var(--gray-600) 90%, white) !important;
}

.gray-500-tint-10 {
  background-color: color-mix(in srgb, var(--gray-500) 90%, white) !important;
}

.gray-400-tint-10 {
  background-color: color-mix(in srgb, var(--gray-400) 90%, white) !important;
}

.gray-300-tint-10 {
  background-color: color-mix(in srgb, var(--gray-300) 90%, white) !important;
}

.gray-250-tint-10 {
  background-color: color-mix(in srgb, var(--gray-250) 90%, white) !important;
}

.gray-200-tint-10 {
  background-color: color-mix(in srgb, var(--gray-200) 90%, white) !important;
}

.gray-150-tint-10 {
  background-color: color-mix(in srgb, var(--gray-150) 90%, white) !important;
}

.gray-100-tint-10 {
  background-color: color-mix(in srgb, var(--gray-100) 90%, white) !important;
}

.gray-50-tint-10 {
  background-color: color-mix(in srgb, var(--gray-50) 90%, white) !important;
}

.gray-25-tint-10 {
  background-color: color-mix(in srgb, var(--gray-25) 90%, white) !important;
}

.gray-0-tint-10 {
  background-color: color-mix(in srgb, var(--gray-0) 90%, white) !important;
}

/* Icon Dark Hover */
.vh-icon-dark-hover {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
  cursor: pointer;
}

.vh-icon-dark-hover:hover {
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
}

.vh-icon-dark-hover:active {
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
}

/* Base Icon Classes */
.vh-icon {
  filter: brightness(0) saturate(100%) invert(75%) sepia(5%) saturate(1046%) hue-rotate(148deg) brightness(94%) contrast(91%);
}

.vh-icon:hover {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
  cursor: pointer;
}

.vh-icon-dark {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}

.vh-icon-dark:hover {
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
  cursor: pointer;
}

.vh-icon-active {
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}

.vh-icon-secondary-20-active {
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(24%) sepia(44%) saturate(283%) hue-rotate(151deg) brightness(96%) contrast(88%);
}

.vh-icon-white {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(25deg) brightness(100%) contrast(100%);
}

.btn-icon-gray300:hover .vh-icon-white-hover {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(25deg) brightness(100%) contrast(100%) !important;
}

.vh-icon-hover {
  filter: brightness(0) saturate(100%) invert(75%) sepia(5%) saturate(1046%) hue-rotate(148deg) brightness(94%) contrast(91%);
  cursor: pointer;
}

.vh-icon-hover:hover {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}

.vh-icon-hover:active,
.vh-icon-hover.active {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}

/* Color-specific Icon Classes */
.vh-icon-primary {
  filter: brightness(0) saturate(100%) invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%);
}

.vh-icon-accent {
  filter: brightness(0) saturate(100%) invert(54%) sepia(50%) saturate(1503%) hue-rotate(132deg) brightness(94%) contrast(91%);
}

.vh-icon-success {
  filter: brightness(0) saturate(100%) invert(54%) sepia(50%) saturate(1503%) hue-rotate(132deg) brightness(94%) contrast(91%);
}

.vh-icon-error {
  filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}

.vh-icon-warning {
  filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}

/* .vh-icon-destructive is an alias of .vh-icon-danger -- both render the
   --destructive red (var(--destructive)). Keep them grouped so there is one source of truth. */
.vh-icon-danger,
.vh-icon-destructive {
  filter: brightness(0) saturate(100%) invert(53%) sepia(22%) saturate(6419%) hue-rotate(318deg) brightness(101%) contrast(88%);
}

.vh-icon-link {
  filter: brightness(0) saturate(100%) invert(42%) sepia(85%) saturate(1882%) hue-rotate(164deg) brightness(94%) contrast(99%);
}

.vh-icon-info {
  filter: brightness(0) saturate(100%) invert(52%) sepia(92%) saturate(2026%) hue-rotate(158deg) brightness(100%) contrast(103%);
}

.vh-icon-live {
  filter: brightness(0) saturate(100%) invert(46%) sepia(98%) saturate(774%) hue-rotate(134deg) brightness(97%) contrast(91%);
}

.vh-icon-draft {
  filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}

.vh-icon-dev {
  filter: brightness(0) saturate(100%) invert(52%) sepia(92%) saturate(2026%) hue-rotate(158deg) brightness(100%) contrast(103%);
}

.vh-icon-system {
  filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}

.vh-icon-beta {
  filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}

.vh-icon-secondary {
  filter: brightness(0) saturate(100%) invert(30%) sepia(73%) saturate(427%) hue-rotate(143deg) brightness(89%) contrast(95%);
}

.vh-icon-gray700 {
  filter: brightness(0) saturate(100%) invert(26%) sepia(6%) saturate(1015%) hue-rotate(148deg) brightness(95%) contrast(89%);
}

/* Additional Gray Icon Classes */
.vh-icon-gray900 {
  filter: brightness(0) saturate(100%) invert(8%) sepia(9%) saturate(2180%) hue-rotate(153deg) brightness(95%) contrast(97%);
}

.vh-icon-gray800 {
  filter: brightness(0) saturate(100%) invert(16%) sepia(11%) saturate(1653%) hue-rotate(156deg) brightness(95%) contrast(91%);
}

.vh-icon-gray600 {
  filter: brightness(0) saturate(100%) invert(36%) sepia(9%) saturate(789%) hue-rotate(149deg) brightness(95%) contrast(88%);
}

.vh-icon-gray500 {
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
}

.vh-icon-gray400 {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}

.vh-icon-gray300 {
  filter: brightness(0) saturate(100%) invert(75%) sepia(5%) saturate(1046%) hue-rotate(148deg) brightness(94%) contrast(91%);
}

.vh-icon-gray250 {
  filter: brightness(0) saturate(100%) invert(78%) sepia(9%) saturate(234%) hue-rotate(149deg) brightness(97%) contrast(93%);
}

.vh-icon-gray200 {
  filter: brightness(0) saturate(100%) invert(85%) sepia(5%) saturate(433%) hue-rotate(149deg) brightness(95%) contrast(91%);
}

.vh-icon-gray150 {
  filter: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(209%) hue-rotate(149deg) brightness(98%) contrast(89%);
}

.vh-icon-gray100 {
  filter: brightness(0) saturate(100%) invert(91%) sepia(3%) saturate(448%) hue-rotate(150deg) brightness(95%) contrast(91%);
}

.vh-icon-gray50 {
  filter: brightness(0) saturate(100%) invert(97%) sepia(2%) saturate(408%) hue-rotate(149deg) brightness(96%) contrast(93%);
}

.vh-icon-gray25 {
  filter: brightness(0) saturate(100%) invert(98%) sepia(2%) saturate(182%) hue-rotate(152deg) brightness(99%) contrast(95%);
}

.vh-icon-gray0 {
  filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(366%) hue-rotate(152deg) brightness(99%) contrast(96%);
}

.vh-icon-black {
  filter: brightness(0) saturate(100%) invert(0%) sepia(5%) saturate(7484%) hue-rotate(184deg) brightness(94%) contrast(107%);
}

/* Non-hyphenated Gray Background Classes */
.gray900, .bg-gray900 {
  background-color: var(--gray-900) !important;
}

.gray800, .bg-gray800 {
  background-color: var(--gray-800) !important;
}

.gray700, .bg-gray700 {
  background-color: var(--gray-700) !important;
}

.gray600, .bg-gray600 {
  background-color: var(--gray-600) !important;
}

.gray500, .bg-gray500 {
  background-color: var(--gray-500) !important;
}

.gray400, .bg-gray400 {
  background-color: var(--gray-400) !important;
}

.gray300, .bg-gray300 {
  background-color: var(--gray-300) !important;
}

.gray250, .bg-gray250 {
  background-color: var(--gray-250) !important;
}

.gray200, .bg-gray200 {
  background-color: var(--gray-200) !important;
}

.gray150, .bg-gray150 {
  background-color: var(--gray-150) !important;
}

.gray100, .bg-gray100 {
  background-color: var(--gray-100) !important;
}

.gray50, .bg-gray50 {
  background-color: var(--gray-50) !important;
}

.gray25, .bg-gray25 {
  background-color: var(--gray-25) !important;
}

.gray0, .bg-gray0 {
  background-color: var(--gray-0) !important;
}

/* Hover Icon Classes */
.vh-icon-hover-primary,
.vh-icon-dark-hover-primary {
  filter: brightness(0) saturate(100%) invert(75%) sepia(5%) saturate(1046%) hue-rotate(148deg) brightness(94%) contrast(91%);
  cursor: pointer;
}

.vh-icon-hover-primary:hover,
.vh-icon-dark-hover-primary:hover {
  filter: brightness(0) saturate(100%) invert(30%) sepia(73%) saturate(427%) hue-rotate(143deg) brightness(89%) contrast(95%);
}

.vh-icon-hover-primary:active,
.vh-icon-hover-primary.primary-active,
.vh-icon-dark-hover-primary:active,
.vh-icon-dark-hover-primary.primary-active {
  filter: brightness(0) saturate(100%) invert(30%) sepia(73%) saturate(427%) hue-rotate(143deg) brightness(89%) contrast(95%);
}

.vh-icon-hover-caution,
.vh-icon-dark-hover-caution {
  cursor: pointer;
}

.vh-icon-hover-caution:hover,
.vh-icon-dark-hover-caution:hover {
  filter: brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(5548%) hue-rotate(334deg) brightness(102%) contrast(92%);
}

.vh-icon-hover-caution:active,
.vh-icon-hover-caution.caution-active,
.vh-icon-dark-hover-caution:active,
.vh-icon-dark-hover-caution.caution-active {
  filter: brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(5548%) hue-rotate(334deg) brightness(102%) contrast(92%);
}

.vh-icon-secondary,
.vh-icon-secondary-hover {
  cursor: pointer;
}

.vh-icon-secondary:hover,
.vh-icon-secondary-hover:hover {
  filter: brightness(0) saturate(100%) invert(30%) sepia(73%) saturate(427%) hue-rotate(143deg) brightness(89%) contrast(95%);
}

.vh-icon-secondary:active,
.vh-icon-secondary.coral-active,
.vh-icon-secondary-hover:active,
.vh-icon-secondary-hover.coral-active {
  filter: brightness(0) saturate(100%) invert(30%) sepia(73%) saturate(427%) hue-rotate(143deg) brightness(89%) contrast(95%);
}

.vh-icon-warning,
.vh-icon-warning-hover {
  cursor: pointer;
}

.vh-icon-warning:hover,
.vh-icon-warning-hover:hover {
  filter: brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(5548%) hue-rotate(334deg) brightness(102%) contrast(92%);
}

.vh-icon-warning:active,
.vh-icon-warning.coral-active,
.vh-icon-warning-hover:active,
.vh-icon-warning-hover.coral-active {
  filter: brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(5548%) hue-rotate(334deg) brightness(102%) contrast(92%);
}

.vh-icon-warning:active,
.vh-icon-warning:focus-within,
.vh-icon-warning-hover:active,
.vh-icon-warning-hover:focus-within {
  filter: brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(5548%) hue-rotate(334deg) brightness(102%) contrast(92%);
}

.vh-icon-warning-hover {
  filter: brightness(0) saturate(100%) invert(75%) sepia(5%) saturate(1046%) hue-rotate(148deg) brightness(94%) contrast(91%);
  cursor: pointer;
}

.vh-icon-warning-hover:hover {
  filter: brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(5548%) hue-rotate(334deg) brightness(102%) contrast(92%);
}

.vh-icon-warning-dark-hover {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
  cursor: pointer;
}

.vh-icon-warning-dark-hover:hover {
  filter: brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(5548%) hue-rotate(334deg) brightness(102%) contrast(92%);
}

.vh-icon-vine-hover {
  filter: brightness(0) saturate(100%) invert(75%) sepia(5%) saturate(1046%) hue-rotate(148deg) brightness(94%) contrast(91%);
  cursor: pointer;
}

.vh-icon-vine-hover:hover {
  filter: brightness(0) saturate(100%) invert(30%) sepia(73%) saturate(427%) hue-rotate(143deg) brightness(89%) contrast(95%);
}

/* Back to History Button */
a.btn-back-to-history:hover .vh-icon-hover,
a.btn-back-to-history:active .vh-icon-hover,
a.btn-back-to-history:focus-within .vh-icon-hover {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}

/* Image Specific Classes */
img.vh-icon-warning,
img.vh-icon-warning-hover {
  cursor: pointer;
}

img.vh-icon-warning:hover,
img.vh-icon-warning-hover {
  filter: brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(5548%) hue-rotate(334deg) brightness(102%) contrast(92%);
}

img.vh-icon-warning:active,
img.vh-icon-warning.coral-active {
  filter: brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(5548%) hue-rotate(334deg) brightness(102%) contrast(92%);
}

/* Additional Text Classes */
.text-primary {
  color: var(--gray-900) !important;
}

.text-secondary {
  color: var(--gray-600) !important;
}

.text-tertiary,
.text-legal,
.field-label-ext {
  color: var(--gray-500) !important;
}

.text-label,
.field-label-int {
  color: var(--gray-400) !important;
}

.background {
  background-color: var(--gray-0) !important;
}

.pane {
  background-color: var(--white);
}

.line-default {
  border-color: var(--gray-100) !important;
}

.line-light {
  border-color: var(--gray-50) !important;
}

.shade {
  background-color: #000000b2;
}

.bg-img-primary-30 {
  background: color-mix(in srgb, var(--primary) 70%, white) !important;
}

.text-accent {
  color: var(--accent);
}

.text-fog,
.text-gray400 {
  color: var(--gray-400);
}

.text-primary {
  color: var(--primary);
}

.text-primary-hover:hover {
  color: var(--primary);
}

.text-stone,
.text-gray800 {
  color: var(--gray-800);
}

.text-smoke,
.text-gray500 {
  color: var(--gray-500) !important;
}

.text-obsidian,
.text-gray50 {
  color: var(--gray-50) !important;
}

.text-coral,
.text-coral-hover:hover {
  color: var(--warning) !important;
}

/* Primary Color Tints and Shades */
.primary50, .bg-primary-50, .primary-tint-50 {
  background-color: color-mix(in srgb, var(--primary) 50%, white) !important;
}

.primary55, .bg-primary-55, .primary-tint-45 {
  background-color: color-mix(in srgb, var(--primary) 55%, white) !important;
}

.primary60, .bg-primary-60, .primary-tint-40 {
  background-color: color-mix(in srgb, var(--primary) 60%, white) !important;
}

.primary65, .bg-primary-65, .primary-tint-35 {
  background-color: color-mix(in srgb, var(--primary) 65%, white) !important;
}

.primary70, .bg-primary-70, .primary-tint-30 {
  background-color: color-mix(in srgb, var(--primary) 70%, white) !important;
}

.primary75, .bg-primary-75, .primary-tint-25 {
  background-color: color-mix(in srgb, var(--primary) 75%, white) !important;
}

.primary80, .bg-primary-80, .primary-tint-20 {
  background-color: color-mix(in srgb, var(--primary) 80%, white) !important;
}

.primary85, .bg-primary-85, .primary-tint-15 {
  background-color: color-mix(in srgb, var(--primary) 85%, white) !important;
}

.primary90, .bg-primary-90, .primary-tint-10 {
  background-color: color-mix(in srgb, var(--primary) 90%, white) !important;
}

.primary95, .bg-primary-95, .primary-tint-5 {
  background-color: color-mix(in srgb, var(--primary) 95%, white) !important;
}

.text-primary-50 {
  color: color-mix(in srgb, var(--primary) 50%, white);
}

.text-primary-55 {
  color: color-mix(in srgb, var(--primary) 55%, white);
}

.text-primary-60 {
  color: color-mix(in srgb, var(--primary) 60%, white);
}

.text-primary-65 {
  color: color-mix(in srgb, var(--primary) 65%, white);
}

.text-primary-70 {
  color: color-mix(in srgb, var(--primary) 70%, white);
}

.text-primary-75 {
  color: color-mix(in srgb, var(--primary) 75%, white);
}

.text-primary-80 {
  color: color-mix(in srgb, var(--primary) 80%, white);
}

.text-primary-85 {
  color: color-mix(in srgb, var(--primary) 85%, white);
}

.text-primary-90 {
  color: color-mix(in srgb, var(--primary) 90%, white);
}

.text-primary-95 {
  color: color-mix(in srgb, var(--primary) 95%, white);
}

.primary150, .bg-primary-150 {
  background-color: color-mix(in srgb, var(--primary) 50%, black);
}

.primary155, .bg-primary-155 {
  background-color: color-mix(in srgb, var(--primary) 45%, black);
}

.primary160, .bg-primary-160 {
  background-color: color-mix(in srgb, var(--primary) 40%, black);
}

.primary165, .bg-primary-165 {
  background-color: color-mix(in srgb, var(--primary) 35%, black);
}

.primary170, .bg-primary-170 {
  background-color: color-mix(in srgb, var(--primary) 30%, black);
}

.primary175, .bg-primary-175 {
  background-color: color-mix(in srgb, var(--primary) 25%, black);
}

.primary180, .bg-primary-180 {
  background-color: color-mix(in srgb, var(--primary) 20%, black);
}

.primary185, .bg-primary-185 {
  background-color: color-mix(in srgb, var(--primary) 15%, black);
}

.primary190, .bg-primary-190 {
  background-color: color-mix(in srgb, var(--primary) 10%, black);
}

.primary195, .bg-primary-195 {
  background-color: color-mix(in srgb, var(--primary) 5%, black);
}

.text-primary-150 {
  background-color: color-mix(in srgb, var(--primary) 50%, black);
}

.text-primary-155 {
  background-color: color-mix(in srgb, var(--primary) 45%, black);
}

.text-primary-160 {
  background-color: color-mix(in srgb, var(--primary) 40%, black);
}

.text-primary-165 {
  background-color: color-mix(in srgb, var(--primary) 35%, black);
}

.text-primary-170 {
  background-color: color-mix(in srgb, var(--primary) 30%, black);
}

.text-primary-175 {
  background-color: color-mix(in srgb, var(--primary) 25%, black);
}

.text-primary-180 {
  background-color: color-mix(in srgb, var(--primary) 20%, black);
}

.text-primary-185 {
  background-color: color-mix(in srgb, var(--primary) 15%, black);
}

.text-primary-190 {
  background-color: color-mix(in srgb, var(--primary) 10%, black);
}

.text-primary-195 {
  background-color: color-mix(in srgb, var(--primary) 5%, black);
}

/* Secondary Color Tints and Shades */
.secondary50, .bg-secondary-50, .secondary-tint-50 {
  background-color: color-mix(in srgb, var(--secondary) 50%, white) !important;
}

.secondary55, .bg-secondary-55, .secondary-tint-45 {
  background-color: color-mix(in srgb, var(--secondary) 55%, white) !important;
}

.secondary60, .bg-secondary-60, .secondary-tint-40 {
  background-color: color-mix(in srgb, var(--secondary) 60%, white) !important;
}

.secondary65, .bg-secondary-65, .secondary-tint-35 {
  background-color: color-mix(in srgb, var(--secondary) 65%, white) !important;
}

.secondary70, .bg-secondary-70, .secondary-tint-30 {
  background-color: color-mix(in srgb, var(--secondary) 70%, white) !important;
}

.secondary75, .bg-secondary-75, .secondary-tint-25 {
  background-color: color-mix(in srgb, var(--secondary) 75%, white) !important;
}

.secondary80, .bg-secondary-80, .secondary-tint-20 {
  background-color: color-mix(in srgb, var(--secondary) 80%, white) !important;
}

.secondary85, .bg-secondary-85, .secondary-tint-15 {
  background-color: color-mix(in srgb, var(--secondary) 85%, white) !important;
}

.secondary90, .bg-secondary-90, .secondary-tint-10 {
  background-color: color-mix(in srgb, var(--secondary) 90%, white) !important;
}

.secondary95, .bg-secondary-95, .secondary-tint-5 {
  background-color: color-mix(in srgb, var(--secondary) 95%, white) !important;
}

.text-secondary-50 {
  color: color-mix(in srgb, var(--secondary) 50%, white);
}

.text-secondary-55 {
  color: color-mix(in srgb, var(--secondary) 55%, white);
}

.text-secondary-60 {
  color: color-mix(in srgb, var(--secondary) 60%, white);
}

.text-secondary-65 {
  color: color-mix(in srgb, var(--secondary) 65%, white);
}

.text-secondary-70 {
  color: color-mix(in srgb, var(--secondary) 70%, white);
}

.text-secondary-75 {
  color: color-mix(in srgb, var(--secondary) 75%, white);
}

.text-secondary-80 {
  color: color-mix(in srgb, var(--secondary) 80%, white);
}

.text-secondary-85 {
  color: color-mix(in srgb, var(--secondary) 85%, white);
}

.text-secondary-90 {
  color: color-mix(in srgb, var(--secondary) 90%, white);
}

.text-secondary-95 {
  color: color-mix(in srgb, var(--secondary) 95%, white);
}

.secondary150, .bg-secondary-150 {
  background-color: color-mix(in srgb, var(--secondary) 50%, black);
}

.secondary155, .bg-secondary-155 {
  background-color: color-mix(in srgb, var(--secondary) 45%, black);
}

.secondary160, .bg-secondary-160 {
  background-color: color-mix(in srgb, var(--secondary) 40%, black);
}

.secondary165, .bg-secondary-165 {
  background-color: color-mix(in srgb, var(--secondary) 35%, black);
}

.secondary170, .bg-secondary-170 {
  background-color: color-mix(in srgb, var(--secondary) 30%, black);
}

.secondary175, .bg-secondary-175 {
  background-color: color-mix(in srgb, var(--secondary) 25%, black);
}

.secondary180, .bg-secondary-180 {
  background-color: color-mix(in srgb, var(--secondary) 20%, black);
}

.secondary185, .bg-secondary-185 {
  background-color: color-mix(in srgb, var(--secondary) 15%, black);
}

.secondary190, .bg-secondary-190 {
  background-color: color-mix(in srgb, var(--secondary) 10%, black);
}

.secondary195, .bg-secondary-195 {
  background-color: color-mix(in srgb, var(--secondary) 5%, black);
}

.text-secondary-150 {
  background-color: color-mix(in srgb, var(--secondary) 50%, black);
}

.text-secondary-155 {
  background-color: color-mix(in srgb, var(--secondary) 45%, black);
}

.text-secondary-160 {
  background-color: color-mix(in srgb, var(--secondary) 40%, black);
}

.text-secondary-165 {
  background-color: color-mix(in srgb, var(--secondary) 35%, black);
}

.text-secondary-170 {
  background-color: color-mix(in srgb, var(--secondary) 30%, black);
}

.text-secondary-175 {
  background-color: color-mix(in srgb, var(--secondary) 25%, black);
}

.text-secondary-180 {
  background-color: color-mix(in srgb, var(--secondary) 20%, black);
}

.text-secondary-185 {
  background-color: color-mix(in srgb, var(--secondary) 15%, black);
}

.text-secondary-190 {
  background-color: color-mix(in srgb, var(--secondary) 10%, black);
}

.text-secondary-195 {
  background-color: color-mix(in srgb, var(--secondary) 5%, black);
}

/* Icon Hover Classes - Main Colors */
.vh-icon-hover-primary {
  filter: var(--gray-300-filter);
}

.vh-icon-hover-primary:hover {
  filter: var(--primary-filter);
  cursor: pointer;
}

.vh-icon-dark-hover-primary, .vh-icon-primary-dark-hover {
  filter: var(--gray-400-filter);
}

.vh-icon-dark-hover-primary:hover, .vh-icon-primary-dark-hover:hover {
  filter: var(--primary-filter);
  cursor: pointer;
}

.vh-icon-primary {
  filter: var(--primary-filter);
}

.vh-icon-primary-hover:hover {
  filter: var(--primary-filter);
  cursor: pointer;
}

[data-type="tooltip-primary"][aria-describedby] img {
  filter: var(--primary-filter);
}

.vh-icon-hover-secondary {
  filter: var(--gray-300-filter);
}

.vh-icon-hover-secondary:hover {
  filter: var(--secondary-filter);
  cursor: pointer;
}

.vh-icon-dark-hover-secondary, .vh-icon-secondary-dark-hover {
  filter: var(--gray-400-filter);
}

.vh-icon-dark-hover-secondary:hover, .vh-icon-secondary-dark-hover:hover {
  filter: var(--secondary-filter);
  cursor: pointer;
}

.vh-icon-secondary {
  filter: var(--secondary-filter);
}

.vh-icon-secondary-hover:hover {
  filter: var(--secondary-filter);
  cursor: pointer;
}

[data-type="tooltip-secondary"][aria-describedby] img {
  filter: var(--secondary-filter);
}

.vh-icon-hover-tertiary {
  filter: var(--gray-300-filter);
}

.vh-icon-hover-tertiary:hover {
  filter: var(--system-filter);
  cursor: pointer;
}

.vh-icon-dark-hover-tertiary, .vh-icon-tertiary-dark-hover {
  filter: var(--gray-400-filter);
}

.vh-icon-dark-hover-tertiary:hover, .vh-icon-tertiary-dark-hover:hover {
  filter: var(--system-filter);
  cursor: pointer;
}

.vh-icon-tertiary {
  filter: var(--system-filter);
}

.vh-icon-tertiary-hover:hover {
  filter: var(--system-filter);
  cursor: pointer;
}

[data-type="tooltip-tertiary"][aria-describedby] img {
  filter: var(--system-filter);
}

.vh-icon-hover-error {
  filter: var(--gray-300-filter);
}

.vh-icon-hover-error:hover {
  filter: var(--destructive-filter);
  cursor: pointer;
}

.vh-icon-dark-hover-error, .vh-icon-error-dark-hover {
  filter: var(--gray-400-filter);
}

.vh-icon-dark-hover-error:hover, .vh-icon-error-dark-hover:hover {
  filter: var(--destructive-filter);
  cursor: pointer;
}

.vh-icon-error {
  filter: var(--destructive-filter);
}

.vh-icon-error-hover:hover {
  filter: var(--destructive-filter);
  cursor: pointer;
}

[data-type="tooltip-error"][aria-describedby] img {
  filter: var(--destructive-filter);
}

.vh-icon-hover-success {
  filter: var(--gray-300-filter);
}

.vh-icon-hover-success:hover {
  filter: var(--success-filter);
  cursor: pointer;
}

.vh-icon-dark-hover-success, .vh-icon-success-dark-hover {
  filter: var(--gray-400-filter);
}

.vh-icon-dark-hover-success:hover, .vh-icon-success-dark-hover:hover {
  filter: var(--success-filter);
  cursor: pointer;
}

.vh-icon-success {
  filter: var(--success-filter);
}

.vh-icon-success-hover:hover {
  filter: var(--success-filter);
  cursor: pointer;
}

[data-type="tooltip-success"][aria-describedby] img {
  filter: var(--success-filter);
}

.vh-icon-hover-info {
  filter: var(--gray-300-filter);
}

.vh-icon-hover-info:hover {
  filter: var(--info-filter);
  cursor: pointer;
}

.vh-icon-dark-hover-info, .vh-icon-info-dark-hover {
  filter: var(--gray-400-filter);
}

.vh-icon-dark-hover-info:hover, .vh-icon-info-dark-hover:hover {
  filter: var(--info-filter);
  cursor: pointer;
}

.vh-icon-info {
  filter: var(--info-filter);
}

.vh-icon-info-hover:hover {
  filter: var(--info-filter);
  cursor: pointer;
}

[data-type="tooltip-info"][aria-describedby] img {
  filter: var(--info-filter);
}

.vh-icon-hover-warning {
  filter: var(--gray-300-filter);
}

.vh-icon-hover-warning:hover {
  filter: var(--warning-filter);
  cursor: pointer;
}

.vh-icon-dark-hover-warning, .vh-icon-warning-dark-hover {
  filter: var(--gray-400-filter);
}

.vh-icon-dark-hover-warning:hover, .vh-icon-warning-dark-hover:hover {
  filter: var(--warning-filter);
  cursor: pointer;
}

.vh-icon-warning {
  filter: var(--warning-filter);
}

.vh-icon-warning-hover:hover {
  filter: var(--warning-filter);
  cursor: pointer;
}

[data-type="tooltip-warning"][aria-describedby] img {
  filter: var(--warning-filter);
}

.vh-icon-hover-white {
  filter: var(--gray-300-filter);
}

.vh-icon-hover-white:hover {
  filter: var(--white-filter);
  cursor: pointer;
}

.vh-icon-dark-hover-white, .vh-icon-white-dark-hover {
  filter: var(--gray-400-filter);
}

.vh-icon-dark-hover-white:hover, .vh-icon-white-dark-hover:hover {
  filter: var(--white-filter);
  cursor: pointer;
}

.vh-icon-white {
  filter: var(--white-filter);
}

.vh-icon-white-hover:hover {
  filter: var(--white-filter);
  cursor: pointer;
}

[data-type="tooltip-white"][aria-describedby] img {
  filter: var(--white-filter);
}

.vh-icon-hover-black {
  filter: var(--gray-300-filter);
}

.vh-icon-hover-black:hover {
  filter: var(--black-filter);
  cursor: pointer;
}

.vh-icon-dark-hover-black, .vh-icon-black-dark-hover {
  filter: var(--gray-400-filter);
}

.vh-icon-dark-hover-black:hover, .vh-icon-black-dark-hover:hover {
  filter: var(--black-filter);
  cursor: pointer;
}

.vh-icon-black {
  filter: var(--black-filter);
}

.vh-icon-black-hover:hover {
  filter: var(--black-filter);
  cursor: pointer;
}

[data-type="tooltip-black"][aria-describedby] img {
  filter: var(--black-filter);
}

/* Icon Classes - Gray Colors */
.vh-icon-gray0 {
  filter: var(--gray-0-filter);
}

.vh-icon-gray0-hover:hover {
  filter: var(--gray-0-filter);
  cursor: pointer;
}

.vh-icon-gray25 {
  filter: var(--gray-25-filter);
}

.vh-icon-gray25-hover:hover {
  filter: var(--gray-25-filter);
  cursor: pointer;
}

.vh-icon-gray50 {
  filter: var(--gray-50-filter);
}

.vh-icon-gray50-hover:hover {
  filter: var(--gray-50-filter);
  cursor: pointer;
}

.vh-icon-gray100 {
  filter: var(--gray-100-filter);
}

.vh-icon-gray100-hover:hover {
  filter: var(--gray-100-filter);
  cursor: pointer;
}

.vh-icon-gray150 {
  filter: var(--gray-150-filter);
}

.vh-icon-gray150-hover:hover {
  filter: var(--gray-150-filter);
  cursor: pointer;
}

.vh-icon-gray200 {
  filter: var(--gray-200-filter);
}

.vh-icon-gray200-hover:hover {
  filter: var(--gray-200-filter);
  cursor: pointer;
}

.vh-icon-gray250 {
  filter: var(--gray-250-filter);
}

.vh-icon-gray250-hover:hover {
  filter: var(--gray-250-filter);
  cursor: pointer;
}

.vh-icon-gray300 {
  filter: var(--gray-300-filter);
}

.vh-icon-gray300-hover:hover {
  filter: var(--gray-300-filter);
  cursor: pointer;
}

.vh-icon-gray400 {
  filter: var(--gray-400-filter);
}

.vh-icon-gray400-hover:hover {
  filter: var(--gray-400-filter);
  cursor: pointer;
}

.vh-icon-gray500 {
  filter: var(--gray-500-filter);
}

.vh-icon-gray500-hover:hover {
  filter: var(--gray-500-filter);
  cursor: pointer;
}

.vh-icon-gray600 {
  filter: var(--gray-600-filter);
}

.vh-icon-gray600-hover:hover {
  filter: var(--gray-600-filter);
  cursor: pointer;
}

.vh-icon-gray700 {
  filter: var(--gray-700-filter);
}

.vh-icon-gray700-hover:hover {
  filter: var(--gray-700-filter);
  cursor: pointer;
}

.vh-icon-gray800 {
  filter: var(--gray-800-filter);
}

.vh-icon-gray800-hover:hover {
  filter: var(--gray-800-filter);
  cursor: pointer;
}

.vh-icon-gray900 {
  filter: var(--gray-900-filter);
}

.vh-icon-gray900-hover:hover {
  filter: var(--gray-900-filter);
  cursor: pointer;
}

.vh-icon-gray1000 {
  filter: var(--gray-950-filter);
}

.vh-icon-gray1000-hover:hover {
  filter: var(--gray-950-filter);
  cursor: pointer;
}

.vh-icon-dark {
  filter: var(--dark-filter);
}

.vh-icon-dark-hover:hover {
  filter: var(--dark-filter);
  cursor: pointer;
}

.black-tint-10 {
  background-color: color-mix(in srgb, var(--black) 90%, white) !important;
}

.gray1000, .bg-gray1000 {
  background-color: var(--gray-950) !important;
}

.gray1000-tint-10 {
  background-color: color-mix(in srgb, var(--gray-950) 90%, white) !important;
}

.text-gray1000 {
  color: var(--gray-950) !important;
}

.gray900-tint-10 {
  background-color: color-mix(in srgb, var(--gray-900) 90%, white) !important;
}

.text-gray900 {
  color: var(--gray-900) !important;
}

.gray800-tint-10 {
  background-color: color-mix(in srgb, var(--gray-800) 90%, white) !important;
}

.text-gray800 {
  color: var(--gray-800) !important;
}

.gray700-tint-10 {
  background-color: color-mix(in srgb, var(--gray-700) 90%, white) !important;
}

.text-gray700 {
  color: var(--gray-700) !important;
}

.gray600-tint-10 {
  background-color: color-mix(in srgb, var(--gray-600) 90%, white) !important;
}

.text-gray600 {
  color: var(--gray-600) !important;
}

.gray500-tint-10 {
  background-color: color-mix(in srgb, var(--gray-500) 90%, white) !important;
}

.text-gray500 {
  color: var(--gray-500) !important;
}

.gray400-tint-10 {
  background-color: color-mix(in srgb, var(--gray-400) 90%, white) !important;
}

.text-gray400 {
  color: var(--gray-400) !important;
}

.gray300-tint-10 {
  background-color: color-mix(in srgb, var(--gray-300) 90%, white) !important;
}

.text-gray300 {
  color: var(--gray-300) !important;
}

.gray250-tint-10 {
  background-color: color-mix(in srgb, var(--gray-250) 90%, white) !important;
}

.text-gray250 {
  color: var(--gray-250) !important;
}

.gray200-tint-10 {
  background-color: color-mix(in srgb, var(--gray-200) 90%, white) !important;
}

.text-gray200 {
  color: var(--gray-200) !important;
}

.gray150-tint-10 {
  background-color: color-mix(in srgb, var(--gray-150) 90%, white) !important;
}

.text-gray150 {
  color: var(--gray-150) !important;
}

.gray100-tint-10 {
  background-color: color-mix(in srgb, var(--gray-100) 90%, white) !important;
}

.text-gray100 {
  color: var(--gray-100) !important;
}

.gray50-tint-10 {
  background-color: color-mix(in srgb, var(--gray-50) 90%, white) !important;
}

.text-gray50 {
  color: var(--gray-50) !important;
}

.gray25-tint-10 {
  background-color: color-mix(in srgb, var(--gray-25) 90%, white) !important;
}

.text-gray25 {
  color: var(--gray-25) !important;
}

.gray0-tint-10 {
  background-color: color-mix(in srgb, var(--gray-0) 90%, white) !important;
}

.text-gray0 {
  color: var(--gray-0) !important;
}

.white-tint-10 {
  background-color: color-mix(in srgb, var(--white) 90%, white) !important;
}

.dark-tint-10 {
  background-color: color-mix(in srgb, var(--dark) 90%, white) !important;
}
/* End import from ./components/colors.css */
/* Imported from ./components/buttons.css */
/* Button Styles - Complete Conversion from SCSS */

/* Button Base Styles */
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-border-radius: 0.25rem;

  -moz-border-radius: 0.25rem;

  -webkit-border-radius: 0.25rem;


  -moz-border-radius: 0.25rem;


  border-radius: 0.25rem;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  -moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  -ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;


  -moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;


  -ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;


  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  -webkit-user-select: none;


  -moz-user-select: none;


  -ms-user-select: none;


  user-select: none;
  
  /* Additional base styles from SCSS */
  background-color: var(--gray-50);
  border-color: var(--gray-50);
  color: var(--gray-700);
  border: 0;
  font-weight: 600;
  -webkit-border-radius: 6px !important;

  -moz-border-radius: 6px !important;

  -webkit-border-radius: 6px !important;


  -moz-border-radius: 6px !important;


  border-radius: 6px !important;
  white-space: nowrap;
  -webkit-transition: none !important;

  -moz-transition: none !important;

  -ms-transition: none !important;

  -webkit-transition: none !important;


  -moz-transition: none !important;


  -ms-transition: none !important;


  transition: none !important;
  -webkit-animation: none !important;

  -moz-animation: none !important;

  -ms-animation: none !important;

  -webkit-animation: none !important;


  -moz-animation: none !important;


  -ms-animation: none !important;


  animation: none !important;
  /* 8px between adjacent buttons is the standard spacing rule */
  margin-left: 4px;
  margin-right: 4px;
}

.btn.shadow {
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .1) !important;

  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, .1) !important;

  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .1) !important;


  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, .1) !important;


  box-shadow: 0 2px 8px rgba(0, 0, 0, .1) !important;
}

.btn:focus,
.btn.focus {
  outline: none!important;
  -webkit-box-shadow: none!important;

  -moz-box-shadow: none!important;

  -webkit-box-shadow: none!important;


  -moz-box-shadow: none!important;


  box-shadow: none!important;
}

.btn:hover,
.btn:active,
.btn:focus {
  -webkit-transition: none !important;

  -moz-transition: none !important;

  -ms-transition: none !important;

  -webkit-transition: none !important;


  -moz-transition: none !important;


  -ms-transition: none !important;


  transition: none !important;
  -webkit-animation: none !important;

  -moz-animation: none !important;

  -ms-animation: none !important;

  -webkit-animation: none !important;


  -moz-animation: none !important;


  -ms-animation: none !important;


  animation: none !important;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Button Sizes - Default md */
.btn {
  font-size: 14px;
  padding: 8.5px 23.08px;
  height: 36px !important;
}

.btn .spinner-sec {
  width: 26px !important;
}

.btn .spinner-sec .progress-spinner {
  font-size: 3.4px !important;
}

/* Button Size Variants */
.btn-xl {
  font-size: 16px;
  padding: 11px 23.3px;
  height: 44px !important;
}

.btn-xl .spinner-sec {
  width: 26px !important;
}

.btn-xl .spinner-sec .progress-spinner {
  font-size: 4.2px !important;
}

.btn-lg {
  font-size: 14px;
  padding: 10.5px 23.2px;
  height: 40px !important;
}

.btn-lg .spinner-sec {
  width: 26px !important;
}

.btn-lg .spinner-sec .progress-spinner {
  font-size: 3.8px !important;
}

.btn-l {
  font-size: 14px;
  padding: 10.5px 23.2px;
  height: 40px !important;
}

.btn-l .spinner-sec {
  width: 26px !important;
}

.btn-l .spinner-sec .progress-spinner {
  font-size: 3.8px !important;
}

.btn-md {
  font-size: 14px;
  padding: 8.5px 23.08px;
  height: 36px !important;
}

.btn-md .spinner-sec {
  width: 26px !important;
}

.btn-md .spinner-sec .progress-spinner {
  font-size: 3.4px !important;
}

.btn-m {
  font-size: 14px;
  padding: 8.5px 23.08px;
  height: 36px !important;
}

.btn-m .spinner-sec {
  width: 26px !important;
}

.btn-m .spinner-sec .progress-spinner {
  font-size: 3.4px !important;
}

.btn-sm {
  font-size: 14px;
  padding: 6.5px 19px;
  height: 32px !important;
}

.btn-sm .spinner-sec {
  width: 26px !important;
}

.btn-sm .spinner-sec .progress-spinner {
  font-size: 3.2px !important;
}

.btn-s {
  font-size: 14px;
  padding: 6.5px 19px;
  height: 32px !important;
}

.btn-s .spinner-sec {
  width: 26px !important;
}

.btn-s .spinner-sec .progress-spinner {
  font-size: 3.2px !important;
}

.btn-sm-caps {
  font-size: 14px;
  padding: 6.5px 19px;
  height: 32px !important;
}

.btn-sm-caps .spinner-sec {
  width: 26px !important;
}

.btn-sm-caps .spinner-sec .progress-spinner {
  font-size: 3.2px !important;
}

.btn-xs {
  font-size: 13px;
  padding: 5px 15.29px;
  height: 28px !important;
}

.btn-xs .spinner-sec {
  width: 26px !important;
}

.btn-xs .spinner-sec .progress-spinner {
  font-size: 3px !important;
}

/* Button Icons */
.btn i {
  font-size: 19px;
}

.btn img, .btn svg {
  width: 17px;
}

/* Button Animations */
@keyframes removeActiveState {
  100% {
    background-color: inherit;
    border-color: inherit;
  }

}

@keyframes rotateBackground {
  0% { -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);

 -moz-transform: rotate(0deg);

 -ms-transform: rotate(0deg);

 transform: rotate(0deg); }

  100% { -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);

 -moz-transform: rotate(360deg);

 -ms-transform: rotate(360deg);

 transform: rotate(360deg); }

}

/* Button Variants - Primary */
.btn-primary {
  color: var(--white) !important;
  background-color: var(--primary);
  border-color: var(--primary);
  outline: 0;
  border: 1.5px solid var(--primary);
}

.btn-primary:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--white);
  background-color: rgba(13, 107, 105, 0.85) !important;
  border-color: rgba(13, 107, 105, 0.85) !important;
}

.btn-primary:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-primary.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--primary-shade);
  border-color: var(--primary-shade);
}

.btn-primary:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-primary:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--primary-shade);
  border-color: var(--primary-shade);
}

.btn-primary:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-primary.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--primary-active);
  border-color: var(--primary-active);
}

.btn-primary:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-primary.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--white) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  cursor: default;
}

/* Button Variants - Secondary */
.btn-secondary {
  color: var(--gray-700) !important;
  background-color: var(--gray-25);
  border-color: var(--gray-25);
  outline: 0;
  border: 1.5px solid var(--gray-25);
}

.btn-secondary:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--gray-700);
  background-color: var(--gray-50) !important;
  border-color: var(--gray-50) !important;
}

.btn-secondary:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-secondary.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--gray-50);
  border-color: var(--gray-50);
}

.btn-secondary:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-secondary:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--gray-50);
  border-color: var(--gray-50);
}

.btn-secondary:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-secondary.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--gray-100);
  border-color: var(--gray-100);
}

.btn-secondary:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-secondary.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--gray-700) !important;
  background-color: var(--gray-25) !important;
  border-color: var(--gray-25) !important;
  cursor: default;
}

/* Button Variants - Accent */
.btn-accent {
  color: var(--white) !important;
  background-color: var(--accent);
  border-color: var(--accent);
  outline: 0;
  border: 1.5px solid var(--accent);
}

.btn-accent:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--white);
  background-color: rgba(11, 187, 166, 0.85) !important;
  border-color: rgba(11, 187, 166, 0.85) !important;
}

.btn-accent:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-accent.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--accent-shade);
  border-color: var(--accent-shade);
}

.btn-accent:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-accent:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--accent-shade);
  border-color: var(--accent-shade);
}

.btn-accent:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-accent.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--accent-active);
  border-color: var(--accent-active);
}

.btn-accent:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-accent.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--white) !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  cursor: default;
}

/* Button Variants - Tertiary */
/* The staff-only system button. Was named .btn-tertiary while every
   declaration in the family used var(--system), and .btn-system itself was
   undefined - so the name the token implies rendered as a plain button.
   Renamed, not restyled: the colours are untouched. */
.btn-system {
  color: var(--white) !important;
  background-color: var(--system);
  border-color: var(--system);
  outline: 0;
  border: 1.5px solid var(--system);
}

.btn-system:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--white);
  background-color: rgba(15, 77, 92, 0.85) !important;
  border-color: rgba(15, 77, 92, 0.85) !important;
}

.btn-system:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-system.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: #0D3F4A;
  border-color: #0D3F4A;
}

.btn-system:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-system:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: #0D3F4A;
  border-color: #0D3F4A;
}

.btn-system:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-system.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: #0D3F4A;
  border-color: #0D3F4A;
}

.btn-system:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-system.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--white) !important;
  background-color: var(--system) !important;
  border-color: var(--system) !important;
  cursor: default;
}

/* Button Variants - Destructive.
   .btn-danger was the deprecated alias. Every call site we own now uses this
   name, so the alias is gone. Two things still emit it and neither can be
   migrated at source:
     - The remote editor, styled entirely by
       resources/assets/vf/drag-edit/drag-edit.css, which never loads this
       theme, so it is unaffected.
     - The vendored form builder — see the rule at the end of this section. */
.btn-destructive {
  color: var(--white) !important;
  background-color: var(--destructive);
  border-color: var(--destructive);
  outline: 0;
  border: 1.5px solid var(--destructive);
}

.btn-destructive:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--white);
  background-color: rgba(240, 94, 115, 0.85) !important;
  border-color: rgba(240, 94, 115, 0.85) !important;
}

.btn-destructive:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-destructive.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--destructive-shade);
  border-color: var(--destructive-shade);
}

.btn-destructive:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-destructive:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--destructive-shade);
  border-color: var(--destructive-shade);
}

.btn-destructive:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-destructive.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--destructive-active);
  border-color: var(--destructive-active);
}

.btn-destructive:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-destructive.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--white) !important;
  background-color: var(--destructive) !important;
  border-color: var(--destructive) !important;
  cursor: default;
}

/* Vendored form builder — emits .btn-danger, cannot be migrated at source.
   public/js/form-builder.min.js is a tracked vendor library that renders
   class="no btn btn-danger btn-sm" (per-field remove) and
   class="clear-all btn btn-danger". It is loaded by
   resources/views/web/item/fields/form.blade.php, reachable from any content
   item with a Form field.

   Without these rules the buttons fall back to this theme's own .btn, which
   sets var(--gray-50). Three rules match and .btn is the last of them at equal
   specificity, so it beats Bootstrap's .btn-danger (#dc3545) earlier in the
   same bundle — Bootstrap never gets a look in. Measured in the browser:
   #e6ecee on #3b4c53, an ordinary gray button where a destructive one belongs.

   Anchored to the vendor's own hooks rather than to .btn-danger generally, so
   the retired alias stays retired everywhere else. */
.btn.btn-danger.no,
.btn.btn-danger.clear-all {
  color: var(--white) !important;
  background-color: var(--destructive);
  border-color: var(--destructive);
  outline: 0;
  border: 1.5px solid var(--destructive);
}

.btn.btn-danger.no:hover:not(.disabled),
.btn.btn-danger.clear-all:hover:not(.disabled) {
  background-color: var(--destructive-shade);
  border-color: var(--destructive-shade);
}

.btn.btn-danger.no:active:not(.disabled),
.btn.btn-danger.clear-all:active:not(.disabled) {
  background-color: var(--destructive-active);
  border-color: var(--destructive-active);
}

/* Open dropdown state. Bootstrap defines .show > .btn-primary.dropdown-toggle
   and .show > .btn-secondary.dropdown-toggle in app-base.css and would
   otherwise paint an open split button its own blue or gray, since this
   theme's .btn-primary is only 0,1,0 against Bootstrap's 0,3,0. Matches the
   pressed treatment, which is what an open menu is. Variants Bootstrap does
   not define - accent, tertiary, destructive - need no rule here. */
.show > .btn-primary.dropdown-toggle:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--primary-active);
  border-color: var(--primary-active);
}

.show > .btn-secondary.dropdown-toggle:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--secondary-active, var(--gray-100));
  border-color: var(--secondary-active, var(--gray-100));
}

/* Button Variants - Warning */
.btn-warning {
  color: var(--white) !important;
  background-color: var(--warning);
  border-color: var(--warning);
  outline: 0;
  border: 1.5px solid var(--warning);
}

.btn-warning:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--white);
  background-color: rgba(255, 149, 88, 0.85) !important;
  border-color: rgba(255, 149, 88, 0.85) !important;
}

.btn-warning:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-warning.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--warning-shade);
  border-color: var(--warning-shade);
}

.btn-warning:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-warning:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--warning-shade);
  border-color: var(--warning-shade);
}

.btn-warning:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-warning.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--warning-active);
  border-color: var(--warning-active);
}

.btn-warning:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-warning.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--white) !important;
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
  cursor: default;
}

/* Button Variants - Subtle Primary */
.btn-subtle-primary {
  color: var(--white) !important;
  background-color: var(--primary);
  border-color: var(--primary);
  outline: 0;
  border: 1.5px solid var(--primary);
}

.btn-subtle-primary:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--white);
  background-color: rgba(13, 107, 105, 0.85) !important;
  border-color: rgba(13, 107, 105, 0.85) !important;
}

.btn-subtle-primary:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-subtle-primary.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}

.btn-subtle-primary:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-subtle-primary:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}

.btn-subtle-primary:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-subtle-primary.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--control-primary-active);
  border-color: var(--control-primary-active);
}

.btn-subtle-primary:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-subtle-primary.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--white) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  cursor: default;
}

/* Button Variants - Subtle Secondary */
.btn-subtle-secondary {
  color: var(--white) !important;
  background-color: var(--accent);
  border-color: var(--accent);
  outline: 0;
  border: 1.5px solid var(--accent);
}

.btn-subtle-secondary:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--white);
  background-color: rgba(11, 187, 166, 0.85) !important;
  border-color: rgba(11, 187, 166, 0.85) !important;
}

.btn-subtle-secondary:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-subtle-secondary.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--accent-shade);
  border-color: var(--accent-shade);
}

.btn-subtle-secondary:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-subtle-secondary:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--accent-shade);
  border-color: var(--accent-shade);
}

.btn-subtle-secondary:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-subtle-secondary.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: var(--accent-active);
  border-color: var(--accent-active);
}

.btn-subtle-secondary:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-subtle-secondary.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--white) !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  cursor: default;
}

/* Button Variants - Transparent */
.btn-transparent {
  color: var(--white) !important;
  background-color: transparent;
  border-color: transparent;
  outline: 0;
  border: 1.5px solid transparent;
}

.btn-transparent:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--white);
  background-color: transparent !important;
  border-color: transparent !important;
}

.btn-transparent:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-transparent.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: transparent;
  border-color: transparent;
}

.btn-transparent:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-transparent:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-transparent:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-transparent.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: transparent;
  border-color: transparent;
}

.btn-transparent:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-transparent.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: transparent !important;
  border: transparent !important;
  cursor: default;
}

/* Button Variants - White */
.btn-white {
  color: var(--white) !important;
  background-color: transparent;
  border-color: transparent;
  outline: 0;
  border: 1.5px solid transparent;
}

.btn-white:focus-within.dropdown-toggle[aria-expanded="true"] {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.btn-white:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-white.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-white:focus:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-white:focus-within:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-white:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-white.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-white:disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn-white.disabled:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: transparent !important;
  border: transparent !important;
  cursor: default;
}

/* Button Variants - White (dark mode) — ghost/clear: transparent until hover */
body.dark .btn-white {
  color: var(--gray-200) !important;
  background-color: transparent;
  border-color: transparent;
  border: 1.5px solid transparent;
}

body.dark .btn-white:hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
body.dark .btn-white.hover:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.10);
}

body.dark .btn-white:active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
body.dark .btn-white.active:not(.disabled):not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Outline Buttons */
.btn-outline {
  background-color: transparent !important;
}

.btn-outline.btn-primary {
  color: var(--primary) !important;
  border: 1.5px solid rgba(13, 107, 105, 0.2) !important;
}

.btn-outline.btn-primary:hover:not(.disabled):not(:disabled),
.btn-outline.btn-primary.hover:not(.disabled):not(:disabled) {
  background-color: rgba(13, 107, 105, 0.08) !important;
  border: 1.5px solid rgba(13, 107, 105, 0.2) !important;
  color: var(--primary) !important;
}

.btn-outline.btn-primary:focus,
.btn-outline.btn-primary:focus-within {
  background-color: rgba(13, 107, 105, 0.08) !important;
  border: 1.5px solid rgba(13, 107, 105, 0.2) !important;
  color: var(--primary) !important;
}

.btn-outline.btn-primary:active,
.btn-outline.btn-primary.active,
.btn-outline.btn-primary:active:focus {
  background-color: rgba(13, 107, 105, 0.14) !important;
  border: 1.5px solid rgba(13, 107, 105, 0.2) !important;
  color: var(--primary) !important;
}

.btn-outline.btn-primary:disabled,
.btn-outline.btn-primary.disabled {
  cursor: default;
}

.btn-outline.btn-destructive {
  color: var(--destructive) !important;
  border: 1.5px solid rgba(240, 94, 115, 0.2) !important;
}

.btn-outline.btn-destructive:hover:not(.disabled):not(:disabled),
.btn-outline.btn-destructive.hover:not(.disabled):not(:disabled) {
  background-color: rgba(240, 94, 115, 0.08) !important;
  border: 1.5px solid rgba(240, 94, 115, 0.2) !important;
  color: var(--destructive) !important;
}

.btn-outline.btn-destructive:focus,
.btn-outline.btn-destructive:focus-within {
  background-color: rgba(240, 94, 115, 0.08) !important;
  border: 1.5px solid rgba(240, 94, 115, 0.2) !important;
  color: var(--destructive) !important;
}

.btn-outline.btn-destructive:active,
.btn-outline.btn-destructive.active,
.btn-outline.btn-destructive:active:focus {
  background-color: rgba(240, 94, 115, 0.14) !important;
  border: 1.5px solid rgba(240, 94, 115, 0.2) !important;
  color: var(--destructive) !important;
}

.btn-outline.btn-destructive:disabled,
.btn-outline.btn-destructive.disabled {
  cursor: default;
}

.btn-outline.btn-destructive {
  color: var(--destructive) !important;
  border: 1.5px solid rgba(240, 94, 115, 0.2) !important;
}

.btn-outline.btn-destructive:hover,
.btn-outline.btn-destructive.hover {
  background-color: rgba(240, 94, 115, 0.08) !important;
  border: 1.5px solid rgba(240, 94, 115, 0.2) !important;
  color: var(--destructive) !important;
}

/* Clear Buttons */
.btn-clear {
  background-color: transparent;
  border-color: transparent;
}

.btn-clear.btn-primary {
  color: var(--primary) !important;
}

.btn-clear.btn-primary:hover,
.btn-clear.btn-primary.hover {
  background-color: rgba(13, 107, 105, 0.1) !important;
}

.btn-clear.btn-primary:active,
.btn-clear.btn-primary.active,
.btn-clear.btn-primary:focus,
.btn-clear.btn-primary:focus-within {
  background-color: rgba(13, 107, 105, 0.15) !important;
  border-color: transparent !important;
}

.btn-clear.btn-primary:disabled,
.btn-clear.btn-primary.disabled {
  cursor: default;
}

.btn-clear.btn-destructive {
  color: var(--destructive) !important;
}

.btn-clear.btn-destructive:hover,
.btn-clear.btn-destructive.hover {
  background-color: rgba(240, 94, 115, 0.1) !important;
}

.btn-clear.btn-destructive:active,
.btn-clear.btn-destructive.active,
.btn-clear.btn-destructive:focus,
.btn-clear.btn-destructive:focus-within {
  background-color: rgba(240, 94, 115, 0.15) !important;
  border-color: transparent !important;
}

.btn-clear.btn-destructive:disabled,
.btn-clear.btn-destructive.disabled {
  cursor: default;
}

/* Outline & Clear Button Icon Colors
   Icons inside outline/clear buttons must match the button text color.
   Solid-fill buttons use .vh-icon-white; these variants need their own filters. */

.btn-outline.btn-primary img,
.btn-outline.btn-primary svg,
.btn-clear.btn-primary img,
.btn-clear.btn-primary svg {
  filter: brightness(0) saturate(100%) invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%) !important;
}

.btn-outline.btn-accent img,
.btn-outline.btn-accent svg,
.btn-clear.btn-accent img,
.btn-clear.btn-accent svg {
  filter: brightness(0) saturate(100%) invert(54%) sepia(50%) saturate(1503%) hue-rotate(132deg) brightness(94%) contrast(91%) !important;
}

.btn-outline.btn-secondary img,
.btn-outline.btn-secondary svg,
.btn-clear.btn-secondary img,
.btn-clear.btn-secondary svg {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%) !important;
}

.btn-outline.btn-destructive img,
.btn-outline.btn-destructive svg,
.btn-clear.btn-destructive img,
.btn-clear.btn-destructive svg {
  filter: brightness(0) saturate(100%) invert(53%) sepia(22%) saturate(6419%) hue-rotate(318deg) brightness(101%) contrast(88%) !important;
}

.btn-outline.btn-error img,
.btn-outline.btn-error svg,
.btn-clear.btn-error img,
.btn-clear.btn-error svg {
  filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%) !important;
}

.btn-outline.btn-warning img,
.btn-outline.btn-warning svg,
.btn-clear.btn-warning img,
.btn-clear.btn-warning svg {
  filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%) !important;
}

/* Button Icon Variants */
.btn-icon-gray150 {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-gray150 img,
.btn-icon-gray150 svg,
.btn-icon-gray150 i {
  filter: brightness(0) saturate(100%) invert(85%) sepia(6%) saturate(123%) hue-rotate(169deg) brightness(95%) contrast(89%);
}

.btn-icon-gray200 {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-gray200 img,
.btn-icon-gray200 svg,
.btn-icon-gray200 i {
  filter: brightness(0) saturate(100%) invert(78%) sepia(6%) saturate(123%) hue-rotate(169deg) brightness(95%) contrast(89%);
}

.btn-icon-gray300 {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-gray300 img,
.btn-icon-gray300 svg,
.btn-icon-gray300 i {
  filter: brightness(0) saturate(100%) invert(70%) sepia(6%) saturate(123%) hue-rotate(169deg) brightness(95%) contrast(89%);
}

.btn-icon-gray400 {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-gray400 img,
.btn-icon-gray400 svg,
.btn-icon-gray400 i {
  filter: brightness(0) saturate(100%) invert(62%) sepia(6%) saturate(123%) hue-rotate(169deg) brightness(95%) contrast(89%);
}

.btn-icon-gray500 {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-gray500 img,
.btn-icon-gray500 svg,
.btn-icon-gray500 i {
  filter: brightness(0) saturate(100%) invert(54%) sepia(6%) saturate(123%) hue-rotate(169deg) brightness(95%) contrast(89%);
}

.btn-icon-accent {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-accent img,
.btn-icon-accent svg,
.btn-icon-accent i {
  filter: brightness(0) saturate(100%) invert(67%) sepia(78%) saturate(1234%) hue-rotate(169deg) brightness(95%) contrast(89%);
}

.btn.btn-icon.btn-icon-accent:hover,
.btn-icon-accent.hover {
  background-color: rgba(11, 187, 166, 0.1) !important;
}

.btn.btn-icon.btn-icon-accent:active,
.btn-icon-accent.active,
.btn.btn-icon.btn-icon-accent:focus,
.btn.btn-icon.btn-icon-accent:focus-within {
  background-color: rgba(11, 187, 166, 0.15) !important;
}

.btn-icon-dev {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-dev img,
.btn-icon-dev svg,
.btn-icon-dev i {
  filter: brightness(0) saturate(100%) invert(67%) sepia(78%) saturate(1234%) hue-rotate(169deg) brightness(95%) contrast(89%);
}

.btn.btn-icon.btn-icon-dev:hover,
.btn-icon-dev.hover {
  background-color: rgba(0, 183, 240, 0.1) !important;
}

.btn.btn-icon.btn-icon-dev:active,
.btn-icon-dev.active,
.btn.btn-icon.btn-icon-dev:focus,
.btn.btn-icon.btn-icon-dev:focus-within {
  background-color: rgba(0, 183, 240, 0.15) !important;
}

/* Icon Circle */
.icon-circle {
  -webkit-border-radius: 50% !important;

  -moz-border-radius: 50% !important;

  -webkit-border-radius: 50% !important;


  -moz-border-radius: 50% !important;


  border-radius: 50% !important;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 0.5rem;
}

/* Toggle Buttons */
.btn.toggle-on,
.btn.toggle-off,
.btn.toggle-handle {
  padding: 7px 16px;
}

.btn.toggle-off {
  background-color: var(--gray-150);
}

.btn.toggle-handle {
  background: white;
}

.btn.btn-icon,
.btn.btn-icon-circle {
  display: flex;
  align-items: center;
}

/* Universal icon button hover/active — use DS neutral tokens to avoid warm black overlays */
.btn.btn-icon:hover,
.btn.btn-icon-circle:hover {
  background-color: var(--gray-50) !important;
}

.btn.btn-icon:active,
.btn.btn-icon-circle:active {
  background-color: var(--gray-100) !important;
}

/* Dark mode: use dark neutral tokens for parity */
.dark .btn.btn-icon:hover,
.dark .btn.btn-icon-circle:hover,
[data-theme="dark"] .btn.btn-icon:hover,
[data-theme="dark"] .btn.btn-icon-circle:hover {
  background-color: var(--gray-800) !important;
}

.dark .btn.btn-icon:active,
.dark .btn.btn-icon-circle:active,
[data-theme="dark"] .btn.btn-icon:active,
[data-theme="dark"] .btn.btn-icon-circle:active {
  background-color: var(--gray-700) !important;
}

.btn.icon-left,
.btn.icon-right {
  padding: 8.5px 16px;
}

.btn.icon-left img,
.btn.icon-left svg {
  margin-right: 8px;
}

.btn.icon-right img,
.btn.icon-right svg {
  margin-left: 8px;
}

/* Loading Spinner */
.btn .spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  border-radius: 50%;
  -webkit-animation: spinner-border 0.75s linear infinite;

  -moz-animation: spinner-border 0.75s linear infinite;

  -ms-animation: spinner-border 0.75s linear infinite;

  -webkit-animation: spinner-border 0.75s linear infinite;


  -moz-animation: spinner-border 0.75s linear infinite;


  -ms-animation: spinner-border 0.75s linear infinite;


  animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -webkit-transform: rotate(360deg);


    -moz-transform: rotate(360deg);


    -ms-transform: rotate(360deg);


    transform: rotate(360deg);
  }

}

/* Special Button Styles */
.btn-white {
  border-color: transparent !important;
}

.btn-icon-gray150 img,
.btn-icon-gray150 svg,
.btn-icon-gray150 i {
  filter: var(--gray-400-filter);
}

.btn-icon-gray150:hover img,
.btn-icon-gray150.hover img,
.btn-icon-gray150:hover svg,
.btn-icon-gray150.hover svg,
.btn-icon-gray150:hover i,
.btn-icon-gray150.hover i {
  filter: var(--gray-400-filter);
}

.btn-icon-gray150:active img,
.btn-icon-gray150.active img,
.btn-icon-gray150:active svg,
.btn-icon-gray150.active svg,
.btn-icon-gray150:active i,
.btn-icon-gray150.active i {
  filter: var(--gray-400-filter);
}

.btn-icon-gray200 img,
.btn-icon-gray200 svg,
.btn-icon-gray200 i {
  filter: var(--gray-200-filter);
}

.btn-icon-gray200:hover img,
.btn-icon-gray200.hover img,
.btn-icon-gray200:hover svg,
.btn-icon-gray200.hover svg,
.btn-icon-gray200:hover i,
.btn-icon-gray200.hover i {
  filter: var(--gray-200-filter);
}

.btn-icon-gray200:active img,
.btn-icon-gray200.active img,
.btn-icon-gray200:active svg,
.btn-icon-gray200.active svg,
.btn-icon-gray200:active i,
.btn-icon-gray200.active i {
  filter: var(--gray-200-filter);
}

.btn-icon-gray200-darker {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-gray200-darker img,
.btn-icon-gray200-darker svg,
.btn-icon-gray200-darker i {
  filter: var(--gray-200-filter);
}

.btn-icon-gray200-darker:hover img,
.btn-icon-gray200-darker.hover img,
.btn-icon-gray200-darker:hover svg,
.btn-icon-gray200-darker.hover svg,
.btn-icon-gray200-darker:hover i,
.btn-icon-gray200-darker.hover i {
  filter: var(--gray-300-filter);
}

.btn-icon-gray200-darker:active img,
.btn-icon-gray200-darker.active img,
.btn-icon-gray200-darker:active svg,
.btn-icon-gray200-darker.active svg,
.btn-icon-gray200-darker:active i,
.btn-icon-gray200-darker.active i {
  filter: var(--gray-400-filter);
}

.btn-icon-gray300 img,
.btn-icon-gray300 svg,
.btn-icon-gray300 i {
  filter: var(--gray-300-filter);
}

.btn-icon-gray300:hover img,
.btn-icon-gray300.hover img,
.btn-icon-gray300:hover svg,
.btn-icon-gray300.hover svg,
.btn-icon-gray300:hover i,
.btn-icon-gray300.hover i {
  filter: var(--gray-300-filter);
}

.btn-icon-gray300:active img,
.btn-icon-gray300.active img,
.btn-icon-gray300:active svg,
.btn-icon-gray300.active svg,
.btn-icon-gray300:active i,
.btn-icon-gray300.active i {
  filter: var(--gray-300-filter);
}

.btn-icon-gray300-darker {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-gray300-darker img,
.btn-icon-gray300-darker svg,
.btn-icon-gray300-darker i {
  filter: var(--gray-300-filter);
}

.btn-icon-gray300-darker:hover img,
.btn-icon-gray300-darker.hover img,
.btn-icon-gray300-darker:hover svg,
.btn-icon-gray300-darker.hover svg,
.btn-icon-gray300-darker:hover i,
.btn-icon-gray300-darker.hover i {
  filter: var(--gray-400-filter);
}

.btn-icon-gray300-darker:active img,
.btn-icon-gray300-darker.active img,
.btn-icon-gray300-darker:active svg,
.btn-icon-gray300-darker.active svg,
.btn-icon-gray300-darker:active i,
.btn-icon-gray300-darker.active i {
  filter: var(--gray-500-filter);
}

.btn-icon-gray400 img,
.btn-icon-gray400 svg,
.btn-icon-gray400 i {
  filter: var(--gray-400-filter);
}

.btn-icon-gray400:hover img,
.btn-icon-gray400.hover img,
.btn-icon-gray400:hover svg,
.btn-icon-gray400.hover svg,
.btn-icon-gray400:hover i,
.btn-icon-gray400.hover i {
  filter: var(--gray-400-filter);
}

.btn-icon-gray400:active img,
.btn-icon-gray400.active img,
.btn-icon-gray400:active svg,
.btn-icon-gray400.active svg,
.btn-icon-gray400:active i,
.btn-icon-gray400.active i {
  filter: var(--gray-400-filter);
}

.btn-icon-gray400-darker {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-gray400-darker img,
.btn-icon-gray400-darker svg,
.btn-icon-gray400-darker i {
  filter: var(--gray-400-filter);
}

.btn-icon-gray400-darker:hover img,
.btn-icon-gray400-darker.hover img,
.btn-icon-gray400-darker:hover svg,
.btn-icon-gray400-darker.hover svg,
.btn-icon-gray400-darker:hover i,
.btn-icon-gray400-darker.hover i {
  filter: var(--gray-500-filter);
}

.btn-icon-gray400-darker:active img,
.btn-icon-gray400-darker.active img,
.btn-icon-gray400-darker:active svg,
.btn-icon-gray400-darker.active svg,
.btn-icon-gray400-darker:active i,
.btn-icon-gray400-darker.active i {
  filter: var(--gray-600-filter);
}

.btn-icon-gray500 img,
.btn-icon-gray500 svg,
.btn-icon-gray500 i {
  filter: var(--gray-500-filter);
}

.btn-icon-gray500:hover img,
.btn-icon-gray500.hover img,
.btn-icon-gray500:hover svg,
.btn-icon-gray500.hover svg,
.btn-icon-gray500:hover i,
.btn-icon-gray500.hover i {
  filter: var(--gray-500-filter);
}

.btn-icon-gray500:active img,
.btn-icon-gray500.active img,
.btn-icon-gray500:active svg,
.btn-icon-gray500.active svg,
.btn-icon-gray500:active i,
.btn-icon-gray500.active i {
  filter: var(--gray-500-filter);
}

.btn-icon-gray500-darker {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-gray500-darker img,
.btn-icon-gray500-darker svg,
.btn-icon-gray500-darker i {
  filter: var(--gray-500-filter);
}

.btn-icon-gray500-darker:hover img,
.btn-icon-gray500-darker.hover img,
.btn-icon-gray500-darker:hover svg,
.btn-icon-gray500-darker.hover svg,
.btn-icon-gray500-darker:hover i,
.btn-icon-gray500-darker.hover i {
  filter: var(--gray-600-filter);
}

.btn-icon-gray500-darker:active img,
.btn-icon-gray500-darker.active img,
.btn-icon-gray500-darker:active svg,
.btn-icon-gray500-darker.active svg,
.btn-icon-gray500-darker:active i,
.btn-icon-gray500-darker.active i {
  filter: var(--gray-700-filter);
}

.btn-icon-accent img,
.btn-icon-accent svg,
.btn-icon-accent i {
  filter: var(--accent-filter);
}

.btn.btn-icon.btn-icon-accent:hover img,
.btn-icon-accent.hover img,
.btn.btn-icon.btn-icon-accent:hover svg,
.btn-icon-accent.hover svg,
.btn.btn-icon.btn-icon-accent:hover i,
.btn-icon-accent.hover i {
  filter: var(--accent-filter);
}

.btn.btn-icon.btn-icon-accent:active,
.btn-icon-accent.active {
  background-color: rgba(11, 187, 166, 0.15) !important;
}

.btn-icon-accent:active img,
.btn-icon-accent.active img,
.btn-icon-accent:active svg,
.btn-icon-accent.active svg,
.btn-icon-accent:active i,
.btn-icon-accent.active i {
  filter: var(--accent-filter);
}

.btn-icon-dev img,
.btn-icon-dev svg,
.btn-icon-dev i {
  filter: var(--info-filter);
}

.btn.btn-icon.btn-icon-dev:hover img,
.btn-icon-dev.hover img,
.btn.btn-icon.btn-icon-dev:hover svg,
.btn-icon-dev.hover svg,
.btn.btn-icon.btn-icon-dev:hover i,
.btn-icon-dev.hover i {
  filter: var(--info-filter);
}

.btn.btn-icon.btn-icon-dev:active,
.btn-icon-dev.active {
  background-color: rgba(0, 183, 240, 0.15) !important;
}

.btn-icon-dev:active img,
.btn-icon-dev.active img,
.btn-icon-dev:active svg,
.btn-icon-dev.active svg,
.btn-icon-dev:active i,
.btn-icon-dev.active i {
  filter: var(--info-filter);
}

.btn-outline-brand {
  color: var(--brand-color);
  background-color: transparent;
  border-color: var(--brand-color);
}

.btn-outline-brand:hover {
  color: var(--white);
  background-color: var(--brand-color);
  border-color: var(--brand-color);
}

.btn-outline-brand:focus,
.btn-outline-brand.focus {
  color: var(--white);
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.5);

  -moz-box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.5);

  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.5);


  -moz-box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.5);


  box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.5);
}

.btn-outline-brand:active,
.btn-outline-brand.active {
  color: var(--white);
  background-color: var(--brand-color);
  border-color: var(--brand-color);
}

.btn-outline-brand:disabled,
.btn-outline-brand.disabled {
  color: var(--brand-color);
  background-color: transparent;
  border-color: var(--brand-color);
}

.btn-light {
  color: #282a3c;
  background-color: var(--white);
  border-color: var(--white);
}

.btn-light:hover {
  color: #282a3c;
  background-color: color-mix(in srgb, var(--white) 85%, black);
  border-color: color-mix(in srgb, var(--white) 85%, black);
}

.btn-light:focus,
.btn-light.focus {
  color: #282a3c;
  background-color: color-mix(in srgb, var(--white) 85%, black);
  border-color: color-mix(in srgb, var(--white) 85%, black);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);

  -moz-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);

  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);


  -moz-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);


  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-light:active,
.btn-light.active {
  color: #282a3c;
  background-color: color-mix(in srgb, var(--white) 85%, black);
  border-color: color-mix(in srgb, var(--white) 85%, black);
}

.btn-light:disabled,
.btn-light.disabled {
  color: #282a3c;
  background-color: var(--white);
  border-color: var(--white);
}

.btn-outline-light {
  color: var(--white);
  background-color: transparent;
  border-color: var(--white);
}

.btn-outline-light:hover {
  color: #282a3c;
  background-color: var(--white);
  border-color: var(--white);
}

.btn-outline-light:focus,
.btn-outline-light.focus {
  color: #282a3c;
  background-color: var(--white);
  border-color: var(--white);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);

  -moz-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);

  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);


  -moz-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);


  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-outline-light:active,
.btn-outline-light.active {
  color: #282a3c;
  background-color: var(--white);
  border-color: var(--white);
}

.btn-outline-light:disabled,
.btn-outline-light.disabled {
  color: var(--white);
  background-color: transparent;
  border-color: var(--white);
}

/* Project Dropdown Button */
.btn.btn-project-dropdown {
  color: var(--gray-500);
  background-color: transparent;
  border-color: transparent;
  padding: 4px 16px;
}

.btn.btn-project-dropdown::after {
  display: none !important;
}

.btn.btn-project-dropdown:hover:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--gray-700) !important;
  background-color: var(--gray-50) !important;
  border-color: var(--gray-50) !important;
}

.btn.btn-project-dropdown:focus:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn.btn-project-dropdown:active:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn.btn-project-dropdown.active:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  color: var(--gray-700) !important;
  background-color: var(--gray-100) !important;
  border-color: var(--gray-100) !important;
}

/* Dropdown Menu Styles */
.btn .dropdown-menu,
.btn-group .dropdown-menu {
  width: 240px;
  padding: 8px;
  -webkit-box-shadow: 1px 2px 16px 0 rgba(11, 26, 31, 0.15);

  -moz-box-shadow: 1px 2px 16px 0 rgba(11, 26, 31, 0.15);

  -webkit-box-shadow: 1px 2px 16px 0 rgba(11, 26, 31, 0.15);


  -moz-box-shadow: 1px 2px 16px 0 rgba(11, 26, 31, 0.15);


  box-shadow: 1px 2px 16px 0 rgba(11, 26, 31, 0.15);
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  border-radius: 10px;
  border: none;
  margin-bottom: 20px;
}

.btn .dropdown-menu .dropdown-menu-header,
.btn-group .dropdown-menu .dropdown-menu-header {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  display: flex;
  padding: 6px 8px;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  margin-bottom: 0;
  /* Matches the popover-menu heading. Was --gray-300, which measures 2.32:1 on
     white against a 4.5:1 requirement; --gray-400 is 3.16:1 and is the value the
     design system demonstrates. A dropdown heading and a popover-menu heading are
     the same thing wearing different markup, so they take the same colour. */
  color: var(--gray-400);
}

.btn .dropdown-menu li,
.btn-group .dropdown-menu li {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0;
  margin-bottom: 0;
}

.btn .dropdown-menu li a,
.btn-group .dropdown-menu li a {
  height: 34px;
  padding: 8px 7px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.btn .dropdown-menu li a:hover,
.btn-group .dropdown-menu li a:hover {
  text-decoration: none;
}

.btn .dropdown-menu li a:hover svg path,
.btn-group .dropdown-menu li a:hover svg path {
  filter: var(--black-filter) !important;
}

.btn .dropdown-menu li a:focus,
.btn-group .dropdown-menu li a:focus {
  background: var(--gray-25);
}

.btn .dropdown-menu li a svg,
.btn-group .dropdown-menu li a svg {
  margin-right: 8px;
}

.btn .dropdown-menu li a:active,
.btn-group .dropdown-menu li a:active {
  background: color-mix(in srgb, var(--primary) 10%, white);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}

.btn .dropdown-menu li a:active .svg-icon,
.btn-group .dropdown-menu li a:active .svg-icon {
  filter: var(--black-filter) !important;
}

.btn .dropdown-menu li .svg-icon,
.btn-group .dropdown-menu li .svg-icon {
  filter: var(--gray-400-filter);
}

.btn .dropdown-menu li:hover,
.btn-group .dropdown-menu li:hover {
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  background: var(--gray-25);
}

.btn .dropdown-menu li:hover .svg-icon,
.btn-group .dropdown-menu li:hover .svg-icon {
  filter: var(--black-filter) !important;
}

.btn .dropdown-menu li:active,
.btn-group .dropdown-menu li:active {
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  background: var(--gray-50);
}

.btn .dropdown-menu li:active .svg-icon,
.btn-group .dropdown-menu li:active .svg-icon {
  filter: var(--black-filter) !important;
}

.btn.show {
  display: inline-flex !important;
}

/* Button Loading Styles */
.btn.btn-loading {
  display: flex;
  align-items: center;
  /* Without this the spinner sits at flex-start, against the 68px left padding,
     rather than in the middle of the button. */
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 68px;
  padding-right: 68px;
}

.btn.btn-loading i {
  margin: 0 !important;
  width: 22px;
  height: 22px;
  background-image: url('/assets/icons/Loader.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-animation: rotateBackground 2s linear infinite;

  -moz-animation: rotateBackground 2s linear infinite;

  -ms-animation: rotateBackground 2s linear infinite;

  -webkit-animation: rotateBackground 2s linear infinite;


  -moz-animation: rotateBackground 2s linear infinite;


  -ms-animation: rotateBackground 2s linear infinite;


  animation: rotateBackground 2s linear infinite;
}

.btn.btn-loading .spinner-sec {
  height: 100%;
}

.btn.btn-loading .spinner-sec .btn-loader {
  top: auto;
  height: 100%;
  align-items: center;
}

.btn.btn-loading.btn-lg,
.btn.btn-loading.btn-l {
  padding-left: 68px;
  padding-right: 68px;
}

.btn.btn-loading.btn-lg i,
.btn.btn-loading.btn-l i {
  width: 19px;
  height: 19px;
}

.btn.btn-loading.btn-md,
.btn.btn-loading.btn-m {
  padding-left: 68px;
  padding-right: 68px;
}

.btn.btn-loading.btn-md i,
.btn.btn-loading.btn-m i {
  width: 17px;
  height: 17px;
}

.btn.btn-loading.btn-sm,
.btn.btn-loading.btn-s,
.btn.btn-loading.btn-sm-caps {
  padding-left: 68px;
  padding-right: 68px;
}

.btn.btn-loading.btn-sm i,
.btn.btn-loading.btn-s i,
.btn.btn-loading.btn-sm-caps i {
  width: 16px;
  height: 16px;
  margin: 1px 1.5px !important;
}

.btn.btn-loading.btn-xs {
  height: 30px !important;
  padding-left: 50.5px;
  padding-right: 50.5px;
}

.btn.btn-loading.btn-xs i {
  width: 15px;
  height: 15px;
}

/* Loading button mechanism. .active-loading is added at runtime by
   public/js/custom-button-loader.js. */
.spinner-sec {
    display: inline-block;
    opacity: 0;
    width: 0;
    -webkit-transition: opacity 0.25s, width 0.25s;
    -moz-transition: opacity 0.25s, width 0.25s;
    -o-transition: opacity 0.25s, width 0.25s;
    -webkit-transition: opacity 0.25s, width 0.25s;

    -moz-transition: opacity 0.25s, width 0.25s;

    -ms-transition: opacity 0.25s, width 0.25s;

    -webkit-transition: opacity 0.25s, width 0.25s;


    -moz-transition: opacity 0.25s, width 0.25s;


    -ms-transition: opacity 0.25s, width 0.25s;


    transition: opacity 0.25s, width 0.25s;
}

.btn-loading.active-loading {
    cursor: progress;
    position: relative;
    opacity: 1;
    pointer-events: none;
}

.btn-s.active-loading, .btn-m.active-loading, .btn-l.active-loading {
    line-height: 21px!important;
}

.btn-loading.active-loading .spinner-sec {
    opacity: 1;
    width: auto;
}

.btn-loading.btn.active-loading .spinner-sec {
    min-width: 1px;
    position: relative;
}

.btn-loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: inline-flex;
    justify-content: center;
}

.btn.btn-primary.btn-clear:disabled,
.btn.btn-primary.btn-clear.disabled {
  cursor: default !important;
  pointer-events: none;
}

.btn.btn-loading.btn-primary i,
.btn.btn-loading.btn-accent i,
.btn.btn-loading.btn-publish i,
.btn.btn-loading.btn-success i,
.btn.btn-loading.btn-destructive i,
.btn.btn-loading.btn-warning i,
.btn.btn-loading.btn-error i,
.btn.btn-loading.btn-tertiary i {
    filter: var(--white-filter);
}

/* Button Loading Icon Filter for Outline Buttons */
.btn-outline.btn-loading i {
  filter: var(--outline-loading-icon-color);
}

/* Additional Missing Button Classes */

/* Button Icon Size Classes */
.btn.btn-icon-36x24 {
  padding: 0;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
}

.btn.btn-icon-36x24 img,
.btn.btn-icon-36x24 svg,
.btn.btn-icon-36x24 i {
  width: 24px !important;
}

.btn.btn-icon-32x20 {
  padding: 0;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
}

.btn.btn-icon-32x20 img,
.btn.btn-icon-32x20 svg,
.btn.btn-icon-32x20 i {
  width: 20px !important;
}

/* PUBLISH-STATUS INDICATOR (Common/PublishStatusIndicator.js,
   components/publish-status.blade.php). An icon button whose content is a
   two-colour inline SVG rather than an <img>, so it takes the `.btn-icon`
   sizing and the hover tile from the rules above and none of the icon
   filters. Its OWN surface is written here, not in the header, because the
   header slot is not the only place it renders -- /style/components shows all
   five states outside any header, and a base `.btn` background there left a
   permanent tile behind a mark that is supposed to read as a bare dot. */
.btn.btn-icon.vh-publish-status {
  padding: 0;
  border: none;
  background-color: transparent;
}

.btn.btn-icon.vh-publish-status svg {
  display: block;
}

.btn.btn-icon-28x20 {
  padding: 0;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
}

.btn.btn-icon-28x20 img,
.btn.btn-icon-28x20 svg,
.btn.btn-icon-28x20 i {
  width: 20px !important;
}

.btn.btn-icon-28x18 {
  padding: 0;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
}

.btn.btn-icon-28x18 img,
.btn.btn-icon-28x18 svg,
.btn.btn-icon-28x18 i {
  width: 18px !important;
}

.btn.btn-icon-28x16 {
  padding: 0;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
}

.btn.btn-icon-28x16 img,
.btn.btn-icon-28x16 svg,
.btn.btn-icon-28x16 i {
  width: 16px !important;
}

/* Button Clear Group Input */
.btn.btn-clear-group-input {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  padding: 0 !important;
  background: transparent !important;
  height: 16px !important;
}

/* Button Icon Circle */
.btn-icon-circle {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 50% !important;

  -moz-border-radius: 50% !important;

  -webkit-border-radius: 50% !important;


  -moz-border-radius: 50% !important;


  border-radius: 50% !important;
}

/* Button Clear White */
.btn.btn-clear-white {
  color: var(--white);
}

.btn.btn-clear-white:hover:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn.btn-clear-white.hover:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.btn.btn-clear-white:focus:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn.btn-clear-white:active:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal),
.btn.btn-clear-white.active:not(.btn-outline):not(.btn-clear):not(.btn-ghost):not(.btn-tonal) {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Button No Margins */
.btn.btn-no-right-margin {
  margin-right: 0;
}

.btn.btn-no-left-margin {
  margin-left: 0;
}

/* Button Shadows */
.btn.btn-shadow {
  -webkit-box-shadow: 1px 2px 8px 0 rgba(9, 21, 25, 0.12);

  -moz-box-shadow: 1px 2px 8px 0 rgba(9, 21, 25, 0.12);

  -webkit-box-shadow: 1px 2px 8px 0 rgba(9, 21, 25, 0.12);


  -moz-box-shadow: 1px 2px 8px 0 rgba(9, 21, 25, 0.12);


  box-shadow: 1px 2px 8px 0 rgba(9, 21, 25, 0.12);
}

.btn.btn-shadow-strong {
  -webkit-box-shadow: 1px 2px 12px 0 rgba(9, 21, 25, 0.30);

  -moz-box-shadow: 1px 2px 12px 0 rgba(9, 21, 25, 0.30);

  -webkit-box-shadow: 1px 2px 12px 0 rgba(9, 21, 25, 0.30);


  -moz-box-shadow: 1px 2px 12px 0 rgba(9, 21, 25, 0.30);


  box-shadow: 1px 2px 12px 0 rgba(9, 21, 25, 0.30);
}

/* Button Icon White */
.btn.btn-icon-white {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn.btn-icon-white img,
.btn.btn-icon-white svg,
.btn.btn-icon-white i {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(360deg) brightness(102%) contrast(103%);
}

.btn.btn-icon-white:hover,
.btn.btn-icon-white.hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.btn.btn-icon-white:active,
.btn.btn-icon-white.active,
.btn.btn-icon-white:focus,
.btn.btn-icon-white:focus-within {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Button Group Styles */
.btn-group,
.btn-group.show {
}

.btn-group .btn:not(.dropdown-toggle) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin: 0 !important;
}

.btn-group .btn:not(:first-child) > .btn,
.btn-group .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.btn-group .btn.dropdown-toggle {
  padding: 12px 8px;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
  margin-left: 1.5px !important;
  width: 36px;
}

.btn-group .btn.dropdown-toggle:hover,
.btn-group .btn.dropdown-toggle:active,
.btn-group .btn.dropdown-toggle:focus,
.btn-group .btn.dropdown-toggle:focus-within {
  /* border-left: 1.5px solid white !important; */
}

.btn-group .btn.dropdown-toggle:after {
  display: none;
}

.btn-group .btn.dropdown-toggle .ds-split-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Button Split Sizes */
.btn-group.btn-split-xl .btn {
  font-size: 16px;
  padding: 11px 23.3px;
  height: 44px !important;
}

.btn-group.btn-split-lg .btn,
.btn-group.btn-split-l .btn {
  font-size: 14px;
  padding: 10.5px 23.2px;
  height: 40px !important;
}

.btn-group.btn-split-md .btn,
.btn-group.btn-split-m .btn {
  font-size: 14px;
  padding: 8.5px 23.08px;
  height: 36px !important;
}

.btn-group.btn-split-sm .btn,
.btn-group.btn-split-s .btn,
.btn-group.btn-split-sm-caps .btn {
  font-size: 14px;
  padding: 6.5px 19px;
  height: 32px !important;
}

.btn-group.btn-split-xs .btn {
  font-size: 13px;
  padding: 5px 15.29px;
  height: 28px !important;
}

/* Button Toggle Icon Variants */

/* Toggle Accent Button

   PAUL'S TOGGLE RULE, 2026-09-08. This supersedes the rule that stood here
   before ("the tile is a pointer affordance, never a state badge; consumers
   must not add a resting tile to the pressed state"), which made an on
   toggle indistinguishable from an off one until the pointer arrived.

   ON  = accent icon on the accent wash tile, and the tile is PERSISTENT.
   OFF = grey icon, no tile at rest, the neutral wash only under the pointer.

   The two states therefore differ at rest, which is the whole point of a
   toggle. Both still step under the pointer and under focus, one shade at a
   time, so hovering an on toggle is not a no-op.

   Keyboard-only focus paint: a mouse click leaves the button focused, so
   `:focus:not(:focus-visible)` returns each state to its own resting tile --
   nothing for off, the accent wash for on -- rather than stranding a focus
   tile behind a pointer that has already left. */
.btn-icon-toggle-accent {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-toggle-accent img,
.btn-icon-toggle-accent svg,
.btn-icon-toggle-accent i {
  filter: var(--gray-300-filter);
}

.btn-icon-toggle-accent:hover,
.btn-icon-toggle-accent.hover {
  background-color: var(--gray-25) !important;
}

.btn-icon-toggle-accent:hover img,
.btn-icon-toggle-accent.hover img,
.btn-icon-toggle-accent:hover svg,
.btn-icon-toggle-accent.hover svg,
.btn-icon-toggle-accent:hover i,
.btn-icon-toggle-accent.hover i {
  filter: var(--gray-300-filter);
}

.btn-icon-toggle-accent:focus,
.btn-icon-toggle-accent:focus-within {
  background-color: var(--gray-100) !important;
}

.btn-icon-toggle-accent:focus:not(:focus-visible) {
  background-color: transparent !important;
}

.btn-icon-toggle-accent:focus img,
.btn-icon-toggle-accent:focus-within img,
.btn-icon-toggle-accent:focus svg,
.btn-icon-toggle-accent:focus-within svg,
.btn-icon-toggle-accent:focus i,
.btn-icon-toggle-accent:focus-within i {
  filter: var(--gray-300-filter);
}

.btn-icon-toggle-accent.active {
  background-color: rgba(11, 187, 166, 0.1) !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-toggle-accent.active img,
.btn-icon-toggle-accent.active svg,
.btn-icon-toggle-accent.active i {
  filter: var(--accent-filter);
}

/* THE FAVOURITE HEART IS THE ONE EXCEPTION to the persistent on-tile: a
   favourited heart is the accent icon alone at rest, and the
   accent wash rises only under the pointer -- the heart already reads as
   "on" by its colour, and a tile behind every favourited row would turn a
   list into a checkerboard. Marked by `.vh-favorite-button` (Apps/Pages
   datatables) or `.vh-row-action-toggle` (VaharaDataTable's row heart). */
.btn-icon-toggle-accent.vh-favorite-button.active,
.vh-row-action-toggle.btn-icon-toggle-accent.active {
  background-color: transparent !important;
}
.btn-icon-toggle-accent.vh-favorite-button.active:hover,
.vh-row-action-toggle.btn-icon-toggle-accent.active:hover {
  background-color: rgba(11, 187, 166, 0.1) !important;
}

.btn-icon-toggle-accent.active:hover,
.btn-icon-toggle-accent.active.hover {
  background-color: rgba(11, 187, 166, 0.15) !important;
}

.btn-icon-toggle-accent.active:hover img,
.btn-icon-toggle-accent.active.hover img,
.btn-icon-toggle-accent.active:hover svg,
.btn-icon-toggle-accent.active.hover svg,
.btn-icon-toggle-accent.active:hover i,
.btn-icon-toggle-accent.active.hover i {
  filter: var(--accent-filter);
}

.btn-icon-toggle-accent.active:focus,
.btn-icon-toggle-accent.active:focus-within {
  background-color: rgba(11, 187, 166, 0.2) !important;
}

.btn-icon-toggle-accent.active:focus:not(:focus-visible) {
  background-color: rgba(11, 187, 166, 0.1) !important;
}

.btn-icon-toggle-accent.active:focus img,
.btn-icon-toggle-accent.active:focus-within img,
.btn-icon-toggle-accent.active:focus svg,
.btn-icon-toggle-accent.active:focus-within svg,
.btn-icon-toggle-accent.active:focus i,
.btn-icon-toggle-accent.active:focus-within i {
  filter: var(--accent-filter);
}

/* Toggle Dev Button */
.btn-icon-toggle-dev {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-toggle-dev img,
.btn-icon-toggle-dev svg,
.btn-icon-toggle-dev i {
  filter: var(--gray-300-filter);
}

.btn-icon-toggle-dev:hover,
.btn-icon-toggle-dev.hover {
  background-color: var(--gray-50) !important;
}

.btn-icon-toggle-dev:hover img,
.btn-icon-toggle-dev.hover img,
.btn-icon-toggle-dev:hover svg,
.btn-icon-toggle-dev.hover svg,
.btn-icon-toggle-dev:hover i,
.btn-icon-toggle-dev.hover i {
  filter: var(--gray-300-filter);
}

.btn-icon-toggle-dev:focus,
.btn-icon-toggle-dev:focus-within {
  background-color: var(--gray-100) !important;
}

.btn-icon-toggle-dev:focus img,
.btn-icon-toggle-dev:focus-within img,
.btn-icon-toggle-dev:focus svg,
.btn-icon-toggle-dev:focus-within svg,
.btn-icon-toggle-dev:focus i,
.btn-icon-toggle-dev:focus-within i {
  filter: var(--gray-300-filter);
}

.btn-icon-toggle-dev.active {
  background-color: transparent !important;
  padding: 6px !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  width: fit-content;
}

.btn-icon-toggle-dev.active img,
.btn-icon-toggle-dev.active svg,
.btn-icon-toggle-dev.active i {
  filter: var(--info-filter);
}

.btn-icon-toggle-dev.active:hover,
.btn-icon-toggle-dev.active.hover {
  background-color: rgba(0, 183, 240, 0.1) !important;
}

.btn-icon-toggle-dev.active:hover img,
.btn-icon-toggle-dev.active.hover img,
.btn-icon-toggle-dev.active:hover svg,
.btn-icon-toggle-dev.active.hover svg,
.btn-icon-toggle-dev.active:hover i,
.btn-icon-toggle-dev.active.hover i {
  filter: var(--info-filter);
}

.btn-icon-toggle-dev.active:focus,
.btn-icon-toggle-dev.active:focus-within {
  background-color: rgba(0, 183, 240, 0.15) !important;
}

.btn-icon-toggle-dev.active:focus img,
.btn-icon-toggle-dev.active:focus-within img,
.btn-icon-toggle-dev.active:focus svg,
.btn-icon-toggle-dev.active:focus-within svg,
.btn-icon-toggle-dev.active:focus i,
.btn-icon-toggle-dev.active:focus-within i {
  filter: var(--info-filter);
}

/* Disabled primary */
body.dark .btn-primary:disabled,
body.dark .btn-primary.disabled {
  background-color: var(--gray-800) !important;
  border-color: var(--gray-800) !important;
  color: var(--gray-500) !important;
}

/* Disabled outline */
body.dark .btn-outline:disabled,
body.dark .btn-outline.disabled {
  border-color: var(--gray-800) !important;
  color: var(--gray-600) !important;
  background-color: transparent !important;
  pointer-events: none;
}

/* Outline primary — use lighter text/border for dark bg */
body.dark .btn-outline.btn-primary {
  color: var(--accent) !important;
  border-color: rgba(11, 187, 166, 0.25) !important;
}

body.dark .btn-outline.btn-primary:hover:not(.disabled):not(:disabled) {
  background-color: rgba(11, 187, 166, 0.08) !important;
  border-color: rgba(11, 187, 166, 0.3) !important;
}

body.dark .btn-outline.btn-primary:active,
body.dark .btn-outline.btn-primary.active,
body.dark .btn-outline.btn-primary:focus {
  color: var(--accent) !important;
  background-color: rgba(11, 187, 166, 0.12) !important;
  border-color: rgba(11, 187, 166, 0.4) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

body.dark .btn-outline.btn-primary:active .vh-icon-primary,
body.dark .btn-outline.btn-primary.active .vh-icon-primary,
body.dark .btn-outline.btn-primary:focus .vh-icon-primary {
  filter: var(--accent-filter) !important;
}

/* Clear/ghost primary — use accent for visibility */
body.dark .btn-clear.btn-primary {
  color: var(--accent) !important;
}

body.dark .btn-clear.btn-primary:hover {
  background-color: rgba(11, 187, 166, 0.15) !important;
}

/* Icon button gray700 — invert icon filter for dark mode */
body.dark .btn-icon-gray700 img,
body.dark .btn-icon-gray700 svg,
body.dark .btn-icon-gray700 i {
  filter: var(--gray-400-filter);
}

body.dark .btn-icon-gray700:hover img,
body.dark .btn-icon-gray700:hover svg,
body.dark .btn-icon-gray700:hover i {
  filter: var(--gray-300-filter);
}

/* All icon buttons in dark mode — ensure icons match text colors */
body.dark .btn-icon-gray500-darker img,
body.dark .btn-icon-gray500-darker svg,
body.dark .btn-icon-gray500-darker i {
  filter: var(--gray-400-filter);
}

body.dark .btn-icon-gray500-darker:hover img,
body.dark .btn-icon-gray500-darker:hover svg,
body.dark .btn-icon-gray500-darker:hover i {
  filter: var(--gray-300-filter);
}

body.dark .btn-icon-gray500-darker:hover {
  background-color: var(--gray-800) !important;
}

/* Accent button — slightly darkened in dark mode for readability */
body.dark .btn-accent:not(:disabled):not(.disabled):not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal) {
  background-color: oklch(from var(--accent) calc(l - 0.04) c h) !important;
  border-color: oklch(from var(--accent) calc(l - 0.04) c h) !important;
}

body.dark .btn-accent:not(:disabled):not(.disabled):not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal):hover {
  background-color: oklch(from var(--accent) calc(l - 0.08) c h) !important;
  border-color: oklch(from var(--accent) calc(l - 0.08) c h) !important;
}

body.dark .btn-accent:not(:disabled):not(.disabled):not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal):active,
body.dark .btn-accent:not(:disabled):not(.disabled):not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal).active {
  background-color: oklch(from var(--accent) calc(l - 0.12) c h) !important;
  border-color: oklch(from var(--accent) calc(l - 0.12) c h) !important;
}

body.dark .btn-accent:not(:disabled):not(.disabled):focus,
body.dark .btn-accent:not(:disabled):not(.disabled):not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal):focus-within {
  background-color: oklch(from var(--accent) calc(l - 0.08) c h) !important;
  border-color: oklch(from var(--accent) calc(l - 0.08) c h) !important;
}

/* Icons inside regular buttons — dark mode filter overrides */
body.dark .btn .vh-icon-gray700,
body.dark .btn .vh-icon-gray500 {
  filter: var(--gray-400-filter) !important;
}

body.dark .btn:hover .vh-icon-gray700,
body.dark .btn:hover .vh-icon-gray500 {
  filter: var(--gray-300-filter) !important;
}

/* Outline primary button icon — match accent text color */
body.dark .btn-outline.btn-primary .vh-icon-primary {
  filter: var(--accent-filter) !important;
}

/* Toggle button hover -- gray-50 is near-white, use gray-800 instead. Only the
   off state: a pressed toggle raises the accent wash on either ground, and
   these selectors outrank the `.active` rules that carry it. */
body.dark .btn-icon-toggle-accent:not(.active):hover,
body.dark .btn-icon-toggle-accent:not(.active).hover {
  background-color: var(--gray-800) !important;
}

body.dark .btn-icon-toggle-accent:not(.active):focus,
body.dark .btn-icon-toggle-accent:not(.active):focus-within {
  background-color: var(--gray-700) !important;
}

body.dark .btn-icon-toggle-dev:hover,
body.dark .btn-icon-toggle-dev.hover {
  background-color: var(--gray-800) !important;
}

body.dark .btn-icon-toggle-dev:focus,
body.dark .btn-icon-toggle-dev:focus-within {
  background-color: var(--gray-700) !important;
}

/* A one-off blue button, used by a single view (data/data-items.blade.php).
   #5482FF belongs to no token and the variant is not in the design system —
   it should either become a real variant or become .btn-primary. */


/* ── Accent and warning: outline and ghost ───────────────────────────────────
   Both semantics set `color: var(--white) !important` with no outline/ghost
   guard, and .btn-outline / .btn-clear then remove the fill underneath — so
   .btn-accent.btn-outline rendered white text on nothing. Literally invisible,
   measured at both 1x and 2x.

   Primary and destructive already carry this guard; these two were simply
   missed. Nothing rendered correctly before, so nothing can regress.
   Decided. */
.btn.btn-accent.btn-outline,
.btn.btn-accent.btn-clear {
  color: var(--accent) !important;
  background-color: transparent !important;
}

.btn.btn-warning.btn-outline,
.btn.btn-warning.btn-clear {
  color: var(--warning) !important;
  background-color: transparent !important;
}


/* ── System: outline and ghost ───────────────────────────────────────────────
   Same defect the accent and warning variants had, and missed the first time
   because .btn-system is internal-only so it never showed up in a review of
   product pages. `.btn-system` sets `color: var(--white) !important` with no
   outline/ghost guard, and .btn-outline / .btn-clear then remove the fill
   underneath — so .btn-system.btn-outline rendered white text on nothing.

   Measured invisible before this rule, so nothing can regress.
   Decided. */
.btn.btn-system.btn-outline,
.btn.btn-system.btn-clear {
  color: var(--system) !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TONAL  —  .btn-tonal
   ═══════════════════════════════════════════════════════════════════════════

   The third value on the modifier axis, beside .btn-outline and .btn-clear.
   A low-alpha fill of the semantic colour: a solid object that is clearly
   subordinate to a solid button, used for rank 2 in the button ladder — a real
   alternative the user might choose (Save as draft, Duplicate, Add another),
   never for Cancel.

     .btn.btn-primary.btn-tonal        .btn.btn-destructive.btn-tonal
     .btn.btn-warning.btn-tonal        (and the rest, defined below)

   Light mode mixes the semantic into the surface, so more alpha reads darker.
   Dark mode cannot do that — any tint added to a near-black panel gets
   LIGHTER — so its rest state is lifted and hover/active darken the fill
   toward black instead. Both directions end up obeying the same convention:
   buttons darken on hover and darken further on click.

   Every value here was measured, not guessed.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn.btn-tonal {
  --tonal-hue: var(--primary);
  --tonal-ink: var(--primary);
  /* The ink darkens with the fill. In light mode the fill gets DARKER as it is
     pressed, so a fixed label loses contrast on the way down — measured 4.96 →
     4.26 → 3.72:1 on primary before this was added. Dark mode has the opposite
     problem solved for free, because its fill darkens away from a light label. */
  --tonal-ink-hover: var(--tonal-ink);
  --tonal-ink-active: var(--tonal-ink);
  --tonal-rest: 16%;
  --tonal-hover: 26%;
  --tonal-active: 34%;

  background-color: color-mix(in srgb, var(--tonal-hue) var(--tonal-rest), transparent) !important;
  color: var(--tonal-ink) !important;
  border-color: transparent !important;
  -webkit-transition: background-color .13s ease;

  -moz-transition: background-color .13s ease;

  -ms-transition: background-color .13s ease;

  -webkit-transition: background-color .13s ease;


  -moz-transition: background-color .13s ease;


  -ms-transition: background-color .13s ease;


  transition: background-color .13s ease;
}
.btn.btn-tonal:hover:not(.disabled):not(:disabled) {
  background-color: color-mix(in srgb, var(--tonal-hue) var(--tonal-hover), transparent) !important;
  color: var(--tonal-ink-hover) !important;
  border-color: transparent !important;
}
.btn.btn-tonal:active:not(.disabled):not(:disabled),
.btn.btn-tonal.active:not(.disabled):not(:disabled) {
  background-color: color-mix(in srgb, var(--tonal-hue) var(--tonal-active), transparent) !important;
  color: var(--tonal-ink-active) !important;
  border-color: transparent !important;
}
.btn.btn-tonal:disabled,
.btn.btn-tonal.disabled {
  background-color: color-mix(in srgb, var(--tonal-hue) 10%, transparent) !important;
  color: var(--gray-400) !important;
  cursor: default;
}

/* Per-semantic: hue, ink, and the alphas each colour needs to read correctly.
   The alphas differ because the semantics differ in lightness — mango at 16%
   is far paler than the primary teal at 16%. */
.btn.btn-primary.btn-tonal {
  --tonal-hue: var(--primary);   --tonal-ink: var(--primary);
  --tonal-ink-hover: var(--primary-shade); --tonal-ink-active: var(--primary-active);
  --tonal-rest: 16%; --tonal-hover: 26%; --tonal-active: 34%;
}
.btn.btn-destructive.btn-tonal {
  /* Ink was --destructive-700 (measures ~7:1, reads as "really dark red") --
     moved to the un-darkened brand token, matching what the
     indicator system's tone-danger already ships (3.2:1, an accepted AA
     deviation -- see decision 010) and the destructive-700 change below. */
  --tonal-hue: var(--destructive); --tonal-ink: var(--destructive);
  --tonal-rest: 14%; --tonal-hover: 24%; --tonal-active: 32%;
}
.btn.btn-warning.btn-tonal {
  /* Ink was --warning-800 -- same correction, matching tone-warning (2.17:1,
     also an accepted AA deviation). */
  --tonal-hue: var(--warning);   --tonal-ink: var(--warning);
  --tonal-rest: 20%; --tonal-hover: 32%; --tonal-active: 42%;
}
/* The remaining semantics are defined so nothing renders broken if someone
   reaches for them, but the ladder only calls for the three above. */
.btn.btn-accent.btn-tonal {
  --tonal-hue: var(--accent);    --tonal-ink: var(--primary);
  --tonal-ink-hover: var(--primary-shade); --tonal-ink-active: var(--primary-active);
  --tonal-rest: 18%; --tonal-hover: 28%; --tonal-active: 36%;
}
.btn.btn-system.btn-tonal {
  --tonal-hue: var(--system);    --tonal-ink: var(--system);
  --tonal-rest: 14%; --tonal-hover: 24%; --tonal-active: 32%;
}
.btn.btn-secondary.btn-tonal {
  --tonal-hue: var(--gray-500);  --tonal-ink: var(--gray-700);
  --tonal-rest: 16%; --tonal-hover: 26%; --tonal-active: 34%;
}

/* ── Dark ────────────────────────────────────────────────────────────────────
   Literal values rather than alphas, because these are darkened toward black
   rather than mixed into the surface. Each triple measured rest > hover >
   active in luminance, with label contrast rising as it darkens. */
body.dark .btn.btn-primary.btn-tonal {
  --tonal-ink: var(--accent); --tonal-ink-hover: var(--accent); --tonal-ink-active: var(--accent);
  background-color: #0E3C3F !important; color: var(--accent) !important;
  border-color: transparent !important;
}
body.dark .btn.btn-primary.btn-tonal:hover:not(.disabled):not(:disabled) { background-color: #0B3134 !important; border-color: transparent !important; }
body.dark .btn.btn-primary.btn-tonal:active:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-tonal.active:not(.disabled):not(:disabled) { background-color: #0A2A2C !important; border-color: transparent !important; }

body.dark .btn.btn-destructive.btn-tonal {
  --tonal-ink: var(--destructive-200); --tonal-ink-hover: var(--destructive-200); --tonal-ink-active: var(--destructive-200);
  background-color: #52333D !important; color: var(--destructive-200) !important;
  border-color: transparent !important;
}
body.dark .btn.btn-destructive.btn-tonal:hover:not(.disabled):not(:disabled) { background-color: #432A32 !important; border-color: transparent !important; }
body.dark .btn.btn-destructive.btn-tonal:active:not(.disabled):not(:disabled),
body.dark .btn.btn-destructive.btn-tonal.active:not(.disabled):not(:disabled) { background-color: #39242B !important; border-color: transparent !important; }

body.dark .btn.btn-warning.btn-tonal {
  --tonal-ink: var(--warning-200); --tonal-ink-hover: var(--warning-200); --tonal-ink-active: var(--warning-200);
  background-color: #574335 !important; color: var(--warning-200) !important;
  border-color: transparent !important;
}
body.dark .btn.btn-warning.btn-tonal:hover:not(.disabled):not(:disabled) { background-color: #47372B !important; border-color: transparent !important; }
body.dark .btn.btn-warning.btn-tonal:active:not(.disabled):not(:disabled),
body.dark .btn.btn-warning.btn-tonal.active:not(.disabled):not(:disabled) { background-color: #3D2F25 !important; border-color: transparent !important; }

body.dark .btn.btn-accent.btn-tonal {
  --tonal-ink: var(--accent); --tonal-ink-hover: var(--accent); --tonal-ink-active: var(--accent);
  background-color: #0E4245 !important; color: var(--accent) !important;
  border-color: transparent !important;
}
body.dark .btn.btn-accent.btn-tonal:hover:not(.disabled):not(:disabled) { background-color: #0B3639 !important; border-color: transparent !important; }
body.dark .btn.btn-accent.btn-tonal:active:not(.disabled):not(:disabled) { background-color: #0A2E30 !important; border-color: transparent !important; }

body.dark .btn.btn-system.btn-tonal {
  --tonal-ink: var(--info); --tonal-ink-hover: var(--info); --tonal-ink-active: var(--info);
  background-color: #12303A !important; color: var(--info) !important;
  border-color: transparent !important;
}
body.dark .btn.btn-system.btn-tonal:hover:not(.disabled):not(:disabled) { background-color: #0E2830 !important; border-color: transparent !important; }
body.dark .btn.btn-system.btn-tonal:active:not(.disabled):not(:disabled) { background-color: #0C2229 !important; border-color: transparent !important; }

body.dark .btn.btn-secondary.btn-tonal {
  --tonal-ink: var(--gray-200); --tonal-ink-hover: var(--gray-200); --tonal-ink-active: var(--gray-200);
  background-color: #21343C !important; color: var(--gray-200) !important;
  border-color: transparent !important;
}
body.dark .btn.btn-secondary.btn-tonal:hover:not(.disabled):not(:disabled) { background-color: #1A2A30 !important; border-color: transparent !important; }
body.dark .btn.btn-secondary.btn-tonal:active:not(.disabled):not(:disabled) { background-color: #162328 !important; border-color: transparent !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   GHOST  —  .btn-ghost  (.btn-clear is a deprecated alias — see below)
   ═══════════════════════════════════════════════════════════════════════════

   Rank 3 of the button ladder: Cancel, Dismiss, Back. No fill and no border at
   any state — it is the label alone until you touch it.

   Green (.btn-primary.btn-ghost) beside a primary or accent action; NEUTRAL
   (.btn-secondary.btn-ghost) the moment the rank-1 action turns destructive or
   warning, because green beside red reads as Christmas.

   ── Renamed .btn-clear -> .btn-ghost ────────────────────────────────────────
   This block was called "GHOST" everywhere except its own class name -- every
   comment here, decision 009, and the style guide already said "ghost"; only
   the selector itself said "clear". The clear and ghost treatments were
   suspected to be separate (clear possibly intended for dark mode use), but
   investigation found no
   dark-mode-only intent in the code -- .btn-clear has always carried full
   light AND dark rules for every semantic, and the one bare (no-semantic)
   .btn-clear call site (the login/forgot-password grey text link) sits on a
   white surface, not a dark one. There is no second, functionally distinct
   "dark mode clear" hiding here: .btn-clear and "ghost" were always one
   treatment under two names, so decision 009's own word wins.

   .btn-clear is kept below as a fully-working, permanently-supported alias
   (every selector in this block lists both), because
   resources/views/web/style/tables.blade.php and
   resources/views/web/style/sections/_datatable_section.blade.php are owned
   by another workstream and still reference it directly. All other call
   sites were migrated to .btn-ghost. Do not add new call sites against
   .btn-clear.

   ── Why every state pins border-color ──────────────────────────────────────
   Bootstrap is layer 0 and its .btn-primary:hover sets border-color #0062cc,
   its .btn-secondary:hover sets background #5a6268. The old ghost rules set a
   background but left border-color alone, so those leaked straight through: a
   ghost Cancel grew a BLUE border on hover, and the neutral ghost filled with
   Bootstrap grey. Pinning both properties at every interactive state is what
   closes that off — do not remove the seemingly redundant declarations.

   ── Why hover gets LIGHTER while everything else darkens ───────────────────
   A ghost has no fill, so hovering it is the button appearing. On a dark panel
   appearing means getting lighter. It materialises at roughly the tonal's
   shade, then darkens on click like every other button.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn.btn-ghost,
.btn.btn-clear {
  --ghost-hue: var(--primary);
  --ghost-ink: var(--primary);
  --ghost-ink-active: var(--ghost-ink);
  --ghost-hover: 9%;
  --ghost-active: 15%;

  /* ── A bare .btn-clear sets NOTHING but its border. ───────────────────────
     `.btn-clear` with no semantic is a real, deliberate pattern: login and
     forgot-password use
       class="btn bg-white btn-clear btn-l text-gray500 underline-hover"
     to draw a grey TEXT LINK. 27 of the 39 ghost call sites carry no semantic.

     An earlier version set `color` and `background-color` with !important
     here, which beat .text-gray500 and .bg-white and turned those links green
     on a transparent ground. Colour and fill now live on the per-semantic
     rules below, and background-color is deliberately NOT !important so a
     utility class can still win. Only border-color is forced, because that is
     what Bootstrap leaks through.
     "I dont really want ANY changes to login pages". */
  background-color: transparent;
  border-color: transparent !important;
  -webkit-transition: background-color .13s ease;

  -moz-transition: background-color .13s ease;

  -ms-transition: background-color .13s ease;

  -webkit-transition: background-color .13s ease;


  -moz-transition: background-color .13s ease;


  -ms-transition: background-color .13s ease;


  transition: background-color .13s ease;
}
.btn.btn-ghost:hover,
.btn.btn-clear:hover,
.btn.btn-ghost:focus,
.btn.btn-clear:focus,
.btn.btn-ghost:focus-within,
.btn.btn-clear:focus-within,
.btn.btn-ghost:active,
.btn.btn-clear:active,
.btn.btn-ghost.active,
.btn.btn-clear.active,
.btn.btn-ghost:disabled,
.btn.btn-clear:disabled,
.btn.btn-ghost.disabled,
.btn.btn-clear.disabled {
  border-color: transparent !important;
}
.btn.btn-ghost:disabled,
.btn.btn-clear:disabled,
.btn.btn-ghost.disabled,
.btn.btn-clear.disabled { cursor: default; }

/* Colour and fill apply only when a semantic is present. */
.btn.btn-primary.btn-ghost,
.btn.btn-primary.btn-clear,
.btn.btn-secondary.btn-ghost,
.btn.btn-secondary.btn-clear,
.btn.btn-accent.btn-ghost,
.btn.btn-accent.btn-clear,
.btn.btn-system.btn-ghost,
.btn.btn-system.btn-clear,
.btn.btn-destructive.btn-ghost,
.btn.btn-destructive.btn-clear,
.btn.btn-warning.btn-ghost,
.btn.btn-warning.btn-clear {
  color: var(--ghost-ink) !important;
  background-color: transparent !important;
}
.btn.btn-primary.btn-ghost:hover:not(.disabled):not(:disabled),
.btn.btn-primary.btn-clear:hover:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-ghost:hover:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-clear:hover:not(.disabled):not(:disabled),
.btn.btn-accent.btn-ghost:hover:not(.disabled):not(:disabled),
.btn.btn-accent.btn-clear:hover:not(.disabled):not(:disabled),
.btn.btn-system.btn-ghost:hover:not(.disabled):not(:disabled),
.btn.btn-system.btn-clear:hover:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-ghost:hover:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-clear:hover:not(.disabled):not(:disabled),
.btn.btn-warning.btn-ghost:hover:not(.disabled):not(:disabled),
.btn.btn-warning.btn-clear:hover:not(.disabled):not(:disabled),
.btn.btn-primary.btn-ghost:focus:not(.disabled):not(:disabled),
.btn.btn-primary.btn-clear:focus:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-ghost:focus:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-clear:focus:not(.disabled):not(:disabled),
.btn.btn-accent.btn-ghost:focus:not(.disabled):not(:disabled),
.btn.btn-accent.btn-clear:focus:not(.disabled):not(:disabled),
.btn.btn-system.btn-ghost:focus:not(.disabled):not(:disabled),
.btn.btn-system.btn-clear:focus:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-ghost:focus:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-clear:focus:not(.disabled):not(:disabled),
.btn.btn-warning.btn-ghost:focus:not(.disabled):not(:disabled),
.btn.btn-warning.btn-clear:focus:not(.disabled):not(:disabled),
.btn.btn-primary.btn-ghost:focus-within:not(.disabled):not(:disabled),
.btn.btn-primary.btn-clear:focus-within:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-ghost:focus-within:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-clear:focus-within:not(.disabled):not(:disabled),
.btn.btn-accent.btn-ghost:focus-within:not(.disabled):not(:disabled),
.btn.btn-accent.btn-clear:focus-within:not(.disabled):not(:disabled),
.btn.btn-system.btn-ghost:focus-within:not(.disabled):not(:disabled),
.btn.btn-system.btn-clear:focus-within:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-ghost:focus-within:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-clear:focus-within:not(.disabled):not(:disabled),
.btn.btn-warning.btn-ghost:focus-within:not(.disabled):not(:disabled),
.btn.btn-warning.btn-clear:focus-within:not(.disabled):not(:disabled) {
  background-color: color-mix(in srgb, var(--ghost-hue) var(--ghost-hover), transparent) !important;
  color: var(--ghost-ink) !important;
}
.btn.btn-primary.btn-ghost:active:not(.disabled):not(:disabled),
.btn.btn-primary.btn-clear:active:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-ghost:active:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-clear:active:not(.disabled):not(:disabled),
.btn.btn-accent.btn-ghost:active:not(.disabled):not(:disabled),
.btn.btn-accent.btn-clear:active:not(.disabled):not(:disabled),
.btn.btn-system.btn-ghost:active:not(.disabled):not(:disabled),
.btn.btn-system.btn-clear:active:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-ghost:active:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-clear:active:not(.disabled):not(:disabled),
.btn.btn-warning.btn-ghost:active:not(.disabled):not(:disabled),
.btn.btn-warning.btn-clear:active:not(.disabled):not(:disabled),
.btn.btn-primary.btn-ghost.active:not(.disabled):not(:disabled),
.btn.btn-primary.btn-clear.active:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-ghost.active:not(.disabled):not(:disabled),
.btn.btn-secondary.btn-clear.active:not(.disabled):not(:disabled),
.btn.btn-accent.btn-ghost.active:not(.disabled):not(:disabled),
.btn.btn-accent.btn-clear.active:not(.disabled):not(:disabled),
.btn.btn-system.btn-ghost.active:not(.disabled):not(:disabled),
.btn.btn-system.btn-clear.active:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-ghost.active:not(.disabled):not(:disabled),
.btn.btn-destructive.btn-clear.active:not(.disabled):not(:disabled),
.btn.btn-warning.btn-ghost.active:not(.disabled):not(:disabled),
.btn.btn-warning.btn-clear.active:not(.disabled):not(:disabled) {
  background-color: color-mix(in srgb, var(--ghost-hue) var(--ghost-active), transparent) !important;
  color: var(--ghost-ink-active) !important;
}
.btn.btn-primary.btn-ghost:disabled,
.btn.btn-primary.btn-clear:disabled,
.btn.btn-secondary.btn-ghost:disabled,
.btn.btn-secondary.btn-clear:disabled,
.btn.btn-accent.btn-ghost:disabled,
.btn.btn-accent.btn-clear:disabled,
.btn.btn-system.btn-ghost:disabled,
.btn.btn-system.btn-clear:disabled,
.btn.btn-destructive.btn-ghost:disabled,
.btn.btn-destructive.btn-clear:disabled,
.btn.btn-warning.btn-ghost:disabled,
.btn.btn-warning.btn-clear:disabled,
.btn.btn-primary.btn-ghost.disabled,
.btn.btn-primary.btn-clear.disabled,
.btn.btn-secondary.btn-ghost.disabled,
.btn.btn-secondary.btn-clear.disabled,
.btn.btn-accent.btn-ghost.disabled,
.btn.btn-accent.btn-clear.disabled,
.btn.btn-system.btn-ghost.disabled,
.btn.btn-system.btn-clear.disabled,
.btn.btn-destructive.btn-ghost.disabled,
.btn.btn-destructive.btn-clear.disabled,
.btn.btn-warning.btn-ghost.disabled,
.btn.btn-warning.btn-clear.disabled {
  color: var(--gray-400) !important;
  background-color: transparent !important;
}

/* Per-semantic hue and ink. */
.btn.btn-primary.btn-ghost,
.btn.btn-primary.btn-clear     { --ghost-hue: var(--primary);     --ghost-ink: var(--primary);
                                 --ghost-ink-active: var(--primary-shade); }
.btn.btn-accent.btn-ghost,
.btn.btn-accent.btn-clear      { --ghost-hue: var(--accent);      --ghost-ink: var(--primary);
                                 --ghost-ink-active: var(--primary-shade); }
.btn.btn-system.btn-ghost,
.btn.btn-system.btn-clear      { --ghost-hue: var(--system);      --ghost-ink: var(--system); }
.btn.btn-destructive.btn-ghost,
.btn.btn-destructive.btn-clear { --ghost-hue: var(--destructive); --ghost-ink: var(--destructive-700); }
.btn.btn-warning.btn-ghost,
.btn.btn-warning.btn-clear     { --ghost-hue: var(--warning);     --ghost-ink: var(--warning-800); }
/* The neutral ghost. Rank 3 for destructive and warning rows. */
.btn.btn-secondary.btn-ghost,
.btn.btn-secondary.btn-clear   { --ghost-hue: var(--gray-500);    --ghost-ink: var(--gray-600);
                                 --ghost-ink-active: var(--gray-700);
                                 --ghost-hover: 12%; --ghost-active: 20%; }

/* ── Dark ────────────────────────────────────────────────────────────────────
   Literal fills, and the ink swaps to the brighter member of each family
   because the light-mode ink is too dark on a dark panel — --primary measures
   2.65:1 there, so the green ghost uses --accent. */
body.dark .btn.btn-primary.btn-ghost,
body.dark .btn.btn-primary.btn-clear,
body.dark .btn.btn-accent.btn-ghost,
body.dark .btn.btn-accent.btn-clear {
  --ghost-ink: var(--accent); --ghost-ink-active: var(--accent);
  color: var(--accent) !important;
}
body.dark .btn.btn-primary.btn-ghost:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-clear:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-ghost:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-clear:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-ghost:focus-within:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-clear:focus-within:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-ghost:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-clear:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-ghost:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-clear:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-ghost:focus-within:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-clear:focus-within:not(.disabled):not(:disabled) {
  background-color: #0E383B !important; border-color: transparent !important;
}
body.dark .btn.btn-primary.btn-ghost:active:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-clear:active:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-ghost.active:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-clear.active:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-ghost:active:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-clear:active:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-ghost.active:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-clear.active:not(.disabled):not(:disabled) {
  background-color: #0B2D2F !important; border-color: transparent !important;
}

body.dark .btn.btn-secondary.btn-ghost,
body.dark .btn.btn-secondary.btn-clear {
  --ghost-ink: var(--gray-300); --ghost-ink-active: var(--gray-100);
  color: var(--gray-300) !important;
}
body.dark .btn.btn-secondary.btn-ghost:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-secondary.btn-clear:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-secondary.btn-ghost:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-secondary.btn-clear:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-secondary.btn-ghost:focus-within:not(.disabled):not(:disabled),
body.dark .btn.btn-secondary.btn-clear:focus-within:not(.disabled):not(:disabled) {
  background-color: #21343C !important; color: var(--gray-100) !important;
  border-color: transparent !important;
}
body.dark .btn.btn-secondary.btn-ghost:active:not(.disabled):not(:disabled),
body.dark .btn.btn-secondary.btn-clear:active:not(.disabled):not(:disabled),
body.dark .btn.btn-secondary.btn-ghost.active:not(.disabled):not(:disabled),
body.dark .btn.btn-secondary.btn-clear.active:not(.disabled):not(:disabled) {
  background-color: #1A2A30 !important; color: var(--gray-100) !important;
  border-color: transparent !important;
}

body.dark .btn.btn-destructive.btn-ghost,
body.dark .btn.btn-destructive.btn-clear { --ghost-ink: var(--destructive-200); --ghost-ink-active: var(--destructive-200); color: var(--destructive-200) !important; }
body.dark .btn.btn-destructive.btn-ghost:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-destructive.btn-clear:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-destructive.btn-ghost:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-destructive.btn-clear:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-destructive.btn-ghost:focus-within:not(.disabled):not(:disabled),
body.dark .btn.btn-destructive.btn-clear:focus-within:not(.disabled):not(:disabled) {
  background-color: #52333D !important; border-color: transparent !important; }
body.dark .btn.btn-destructive.btn-ghost:active:not(.disabled):not(:disabled),
body.dark .btn.btn-destructive.btn-clear:active:not(.disabled):not(:disabled) {
  background-color: #432A32 !important; border-color: transparent !important; }

body.dark .btn.btn-warning.btn-ghost,
body.dark .btn.btn-warning.btn-clear { --ghost-ink: var(--warning-200); --ghost-ink-active: var(--warning-200); color: var(--warning-200) !important; }
body.dark .btn.btn-warning.btn-ghost:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-warning.btn-clear:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-warning.btn-ghost:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-warning.btn-clear:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-warning.btn-ghost:focus-within:not(.disabled):not(:disabled),
body.dark .btn.btn-warning.btn-clear:focus-within:not(.disabled):not(:disabled) {
  background-color: #574335 !important; border-color: transparent !important; }
body.dark .btn.btn-warning.btn-ghost:active:not(.disabled):not(:disabled),
body.dark .btn.btn-warning.btn-clear:active:not(.disabled):not(:disabled) {
  background-color: #47372B !important; border-color: transparent !important; }

body.dark .btn.btn-system.btn-ghost,
body.dark .btn.btn-system.btn-clear { --ghost-ink: var(--info); --ghost-ink-active: var(--info); color: var(--info) !important; }
body.dark .btn.btn-system.btn-ghost:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-system.btn-clear:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-system.btn-ghost:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-system.btn-clear:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-system.btn-ghost:focus-within:not(.disabled):not(:disabled),
body.dark .btn.btn-system.btn-clear:focus-within:not(.disabled):not(:disabled) {
  background-color: #12303A !important; border-color: transparent !important; }
body.dark .btn.btn-system.btn-ghost:active:not(.disabled):not(:disabled),
body.dark .btn.btn-system.btn-clear:active:not(.disabled):not(:disabled) {
  background-color: #0E2830 !important; border-color: transparent !important; }


/* NOTE — the accent / warning / system outline border rules that used to sit
   here hardcoded a 20% edge at a specificity that outranked the generic
   .btn-outline system, pinning three semantics at the old weight after the
   50% change. Removed 2026-08-21; the OUTLINE block near the end of this file
   owns every semantic's edge now. The colour declarations above are still
   needed, because .btn-accent and .btn-warning set `color: var(--white)
   !important` on their solid rule with no modifier guard. */

/* ═══════════════════════════════════════════════════════════════════════════
   OUTLINE  —  .btn-outline
   ═══════════════════════════════════════════════════════════════════════════

   NOT rank 3. Outline is a standalone tertiary treatment for places where no
   solid button sits beside it to lose to. Rank 3 is .btn-clear — see the ghost
   block above.

   Border sits at 50% of the semantic. It was 20%, which measures 1.35:1
   against white and reads as decoration rather than a control; 50% measures
   2.26:1. That is still under the 3:1 a control boundary nominally wants, and
   is an accepted deviation — "btn outline at full strength
   no i like it at 50%".

   Same border-pinning discipline as the ghost: Bootstrap's .btn-secondary:hover
   was painting #545b62 onto secondary outlines and .btn-warning:hover was
   painting #d39e00 onto warning ones.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn.btn-outline {
  --outline-hue: var(--primary);
  --outline-ink: var(--primary);
  --outline-edge: 50%;
  --outline-wash: 8%;
  --outline-wash-active: 14%;

  background-color: transparent !important;
  color: var(--outline-ink) !important;
  border-color: color-mix(in srgb, var(--outline-hue) var(--outline-edge), transparent) !important;
  -webkit-transition: background-color .13s ease;

  -moz-transition: background-color .13s ease;

  -ms-transition: background-color .13s ease;

  -webkit-transition: background-color .13s ease;


  -moz-transition: background-color .13s ease;


  -ms-transition: background-color .13s ease;


  transition: background-color .13s ease;
}
.btn.btn-outline:hover:not(.disabled):not(:disabled),
.btn.btn-outline:focus:not(.disabled):not(:disabled),
.btn.btn-outline:focus-within:not(.disabled):not(:disabled) {
  background-color: color-mix(in srgb, var(--outline-hue) var(--outline-wash), transparent) !important;
  color: var(--outline-ink) !important;
  border-color: color-mix(in srgb, var(--outline-hue) var(--outline-edge), transparent) !important;
}
.btn.btn-outline:active:not(.disabled):not(:disabled),
.btn.btn-outline.active:not(.disabled):not(:disabled) {
  background-color: color-mix(in srgb, var(--outline-hue) var(--outline-wash-active), transparent) !important;
  color: var(--outline-ink) !important;
  border-color: color-mix(in srgb, var(--outline-hue) var(--outline-edge), transparent) !important;
}
.btn.btn-outline:disabled,
.btn.btn-outline.disabled {
  background-color: transparent !important;
  color: var(--gray-400) !important;
  border-color: var(--gray-100) !important;
  cursor: default;
}

.btn.btn-primary.btn-outline     { --outline-hue: var(--primary);     --outline-ink: var(--primary); }
.btn.btn-accent.btn-outline      { --outline-hue: var(--accent);      --outline-ink: var(--primary); }
.btn.btn-system.btn-outline      { --outline-hue: var(--system);      --outline-ink: var(--system); }
/* Ink was --destructive-700 / --warning-800 -- the text read as too dark
   (e.g. the Cancel Plan button on account/plan-billing). Moved to the un-darkened
   brand tokens -- see the .btn-tonal correction above for the full
   reasoning and measured contrast. Dark mode (below) is correct as-is and
   is untouched. */
.btn.btn-destructive.btn-outline { --outline-hue: var(--destructive); --outline-ink: var(--destructive); }
.btn.btn-warning.btn-outline     { --outline-hue: var(--warning);     --outline-ink: var(--warning); }
.btn.btn-secondary.btn-outline   { --outline-hue: var(--gray-500);    --outline-ink: var(--gray-700);
                                   --outline-edge: 45%; }

/* Dark: the ink moves to the bright member of the family, because the
   light-mode ink is too dark on a dark panel. The old rule swapped the label
   to --primary on HOVER only, landing at 2.65:1 — the label vanished the
   moment you touched it. */
body.dark .btn.btn-primary.btn-outline,
body.dark .btn.btn-accent.btn-outline {
  --outline-hue: var(--accent); --outline-ink: var(--accent);
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--outline-hue) var(--outline-edge), transparent) !important;
}
body.dark .btn.btn-primary.btn-outline:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-outline:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-primary.btn-outline:active:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-outline:hover:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-outline:focus:not(.disabled):not(:disabled),
body.dark .btn.btn-accent.btn-outline:active:not(.disabled):not(:disabled) {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) var(--outline-edge), transparent) !important;
}
body.dark .btn.btn-secondary.btn-outline {
  --outline-hue: var(--gray-400); --outline-ink: var(--gray-300);
  color: var(--gray-300) !important;
  border-color: color-mix(in srgb, var(--outline-hue) var(--outline-edge), transparent) !important;
}
body.dark .btn.btn-destructive.btn-outline { --outline-hue: var(--destructive); --outline-ink: var(--destructive-200); color: var(--destructive-200) !important;
  border-color: color-mix(in srgb, var(--outline-hue) var(--outline-edge), transparent) !important;
}
body.dark .btn.btn-warning.btn-outline     { --outline-hue: var(--warning);     --outline-ink: var(--warning-200);     color: var(--warning-200) !important;
  border-color: color-mix(in srgb, var(--outline-hue) var(--outline-edge), transparent) !important;
}
body.dark .btn.btn-system.btn-outline      { --outline-hue: var(--info);        --outline-ink: var(--info);            color: var(--info) !important;
  border-color: color-mix(in srgb, var(--outline-hue) var(--outline-edge), transparent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECONDARY, DARK MODE
   ═══════════════════════════════════════════════════════════════════════════
   .btn-secondary hardcoded --gray-25 with no dark override, so a dark-mode
   Cancel was a near-white pill measuring 15.53:1 against --surface-panel while
   the .btn-primary Save beside it measured 2.65:1 — roughly six times more
   prominent than the action you actually want taken. The hierarchy was
   inverted on every dark form in the product.

   Grey-800 fill with a grey-100 label: present without shouting, 1.66:1
   against the panel. Guarded to solid only, so the ghost, outline and tonal
   secondaries above keep their own treatment.

   NOTE the selector is `.btn-secondary`, not `.btn.btn-secondary`, deliberately.
   The light-mode rule has no .btn requirement and 40+ call sites across 14
   files depend on that - icon links like `a.configure-item-icon.btn-secondary`
   in the content-type list, the order views, dev-servers. Narrowing this to
   .btn would leave those near-white in dark while real buttons went grey-800,
   changing half a page. Keep the two rules matching the same set.
   ═══════════════════════════════════════════════════════════════════════════ */
body.dark .btn-secondary:not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal) {
  background-color: var(--gray-800) !important;
  border-color: var(--gray-800) !important;
  color: var(--gray-100) !important;
}
body.dark .btn-secondary:not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal):hover:not(.disabled):not(:disabled) {
  background-color: var(--gray-700) !important;
  border-color: var(--gray-700) !important;
}
body.dark .btn-secondary:not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal):active:not(.disabled):not(:disabled),
body.dark .btn-secondary:not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal).active:not(.disabled):not(:disabled) {
  background-color: var(--gray-600) !important;
  border-color: var(--gray-600) !important;
}
body.dark .btn-secondary:not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal):disabled,
body.dark .btn-secondary:not(.btn-clear):not(.btn-ghost):not(.btn-outline):not(.btn-tonal).disabled {
  background-color: var(--gray-900) !important;
  border-color: var(--gray-900) !important;
  color: var(--gray-500) !important;
}

/* End import from ./components/buttons.css */
/* Imported from ./components/fields.css */
/* Field Variables */
:root {
  --theme-blue: rgba(84, 130, 255, 1);
  --icon-margin: 12px;
  --field-max-width: 672px;
  --field-height: 40px;
  --field-with-ico-padding: 42px;
}

/* Calendar picker indicators */
input[type="date"]::-webkit-calendar-picker-indicator, 
input[type="datetime-local"]::-webkit-calendar-picker-indicator, 
input[type="month"]::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
  display: block;
  background: url('/img/Calendar@2x.png') no-repeat;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  border-width: thin;
  padding: 0 0 0 0;
}

/* Textarea scrollbar */
textarea::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  border-radius: 10px;
  background-color: white;
}

textarea::-webkit-scrollbar {
  width: 4px;
  background-color: white;
}

textarea::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  border-radius: 10px;
  -webkit-box-shadow: none;
  background-color: var(--gray-200);
}

/* Select styling */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--gray-300);
  padding-left: 12px !important;
  cursor: pointer;
  background-image: url("/assets/icons/gray400/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - var(--icon-margin)) calc(50% + 0px);
  background-size: 20px;
}

select.form-control {
  background-position: calc(100% - var(--icon-margin)) calc(50% + 0px);
  padding: 9px 12px;
  line-height: 20px;
  padding-right: 35px;
}

select option[value=""]:first-of-type {
  color: var(--gray-300) !important;
}

select option[value=""]:not(:first-of-type) {
  color: red;
}

select.has-value {
  color: var(--gray-950);
}

/* Invalid state for select elements. The generic .form-control invalid rules
   in this file exclude select via :not(select), so this is the only source.
   Note #FFA471 does not match the --warning token; reconciling them is
   deliberately deferred so this change alters nothing visually. */
.custom-select.is-invalid,
.was-validated .custom-select:invalid {
    border-color: #FFA471 !important;
    background-image: none !important;
}

.custom-select.is-invalid:focus,
.was-validated .custom-select:invalid:focus {
    -webkit-box-shadow: none !important;

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;


    -moz-box-shadow: none !important;


    box-shadow: none !important;
}

/* Input error states */
.input-error, .submitted input:invalid, .submitted select:invalid, .submitted textarea:invalid {
  border-color: var(--warning) !important;
}

/* Force error styling for required fields that are empty (before user interaction) */
.form-group.required input[required]:empty,
.form-group.required select[required]:empty,
.form-group.required textarea[required]:empty {
  border-color: var(--warning) !important;
}

/* Show error styling for required fields when form is submitted or field is touched */
.submitted input[required]:invalid,
.submitted select[required]:invalid,
.submitted textarea[required]:invalid,
.touched input[required]:invalid,
.touched select[required]:invalid,
.touched textarea[required]:invalid {
  border-color: var(--warning) !important;
}

.input-error:hover, .submitted input:invalid:hover, .submitted select:invalid:hover, .submitted textarea:invalid:hover {
  border-color: var(--warning) !important;
}

/* Hover states for immediate required field validation */
.submitted input[required]:invalid:hover,
.submitted select[required]:invalid:hover,
.submitted textarea[required]:invalid:hover,
.touched input[required]:invalid:hover,
.touched select[required]:invalid:hover,
.touched textarea[required]:invalid:hover {
  border-color: var(--warning) !important;
}

.input-error:active, .input-error:focus-within, .input-error:focus,
.submitted input:invalid:active, .submitted input:invalid:focus-within, .submitted input:invalid:focus,
.submitted select:invalid:active, .submitted select:invalid:focus-within, .submitted select:invalid:focus,
.submitted textarea:invalid:active, .submitted textarea:invalid:focus-within, .submitted textarea:invalid:focus {
  border-color: var(--warning) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;
}

/* Focus states for immediate required field validation */
.submitted input[required]:invalid:active, .submitted input[required]:invalid:focus-within, .submitted input[required]:invalid:focus,
.submitted select[required]:invalid:active, .submitted select[required]:invalid:focus-within, .submitted select[required]:invalid:focus,
.submitted textarea[required]:invalid:active, .submitted textarea[required]:invalid:focus-within, .submitted textarea[required]:invalid:focus,
.touched input[required]:invalid:active, .touched input[required]:invalid:focus-within, .touched input[required]:invalid:focus,
.touched select[required]:invalid:active, .touched select[required]:invalid:focus-within, .touched select[required]:invalid:focus,
.touched textarea[required]:invalid:active, .touched textarea[required]:invalid:focus-within, .touched textarea[required]:invalid:focus {
  border-color: var(--warning) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;
}

/* Radio button styling */
.fb-radio {
  display: flex;
  align-items: start;
  margin: 0 0 12px 0 !important;
}

.fb-radio input[type=radio] {
  margin: 4px 4px 0 0 !important;
}

.fb-radio label {
  margin: 0 !important;
}

/* Header field */
.header-field.form-field label.field-label {
  display: none !important;
}

/* Form group styling */
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) {
  max-width: var(--field-max-width);
  position: relative !important;
  margin-bottom: 12px;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select {
  max-width: var(--field-max-width);
  display: inline-block;
  width: 100%;
  border: 1.5px solid var(--gray-100);
  outline: none;
  padding: 0 11px;
  -webkit-border-radius: 6px !important;

  -moz-border-radius: 6px !important;

  -webkit-border-radius: 6px !important;


  -moz-border-radius: 6px !important;


  border-radius: 6px !important;
  -webkit-transition: none;

  -moz-transition: none;

  -ms-transition: none;

  -webkit-transition: none;


  -moz-transition: none;


  -ms-transition: none;


  transition: none;
  font-family: 'Open Sans', sans-serif;
  color: var(--gray-950);
  font-size: 15px !important;
  letter-spacing: 0 !important;
  font-style: normal;
  font-weight: 400;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input:is(select),
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select:is(select) {
  color: var(--gray-300);
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input:is(select).has-value,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select:is(select).has-value {
  color: var(--gray-950);
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input:hover:not(.input-error),
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select:hover:not(.input-error) {
  border-color: var(--gray-100);
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input:focus:not(.input-error),
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input.focus:not(.input-error),
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select:focus:not(.input-error),
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select.focus:not(.input-error) {
  color: var(--gray-950);
  border-color: var(--accent);
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input:focus:not(.input-error):not([type="range"]),
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input.focus:not(.input-error):not([type="range"]),
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select:focus:not(.input-error):not([type="range"]),
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select.focus:not(.input-error):not([type="range"]) {
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white);

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white);

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white);


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white);


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white);
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input::-webkit-input-placeholder,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select::-webkit-input-placeholder {
  color: var(--gray-300) !important;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input:-ms-input-placeholder,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select:-ms-input-placeholder {
  color: var(--gray-300) !important;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input::placeholder,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select::placeholder {
  color: var(--gray-300) !important;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input:disabled,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) select:disabled {
  background-color: var(--white) !important;
  color: var(--gray-300);
  border-color: var(--gray-100) !important;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input[type="file"] {
  font-size: 14px;
  padding: 8px 0 8px 12px;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) input[type="file"]::-webkit-file-upload-button {
  height: 30px;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) .form-control:not(textarea):not(input[type="file"]) {
  height: 48px;
  line-height: 19px;
  padding: 23px 12px 6px 12px;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) .form-control:is(select) {
  padding: 20px 10px 6px 12px !important;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px !important;
}

/* Icon attached */
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) .ico-attached {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
  right: 10px;
  font-size: 24px;
  color: var(--gray-200);
  z-index: 1;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).has-danger .ico-attached {
  top: 35%;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).has-success .ico-attached {
  top: 50%;
}

/* Textarea styling */
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) textarea {
  width: 100%;
  border: 1.5px solid var(--gray-100);
  padding: 22px 0 0 12px;
  -webkit-border-radius: 5px !important;

  -moz-border-radius: 5px !important;

  -webkit-border-radius: 5px !important;


  -moz-border-radius: 5px !important;


  border-radius: 5px !important;
  font-size: 14px;
  letter-spacing: 0.44px;
  line-height: 20px;
  min-height: 160px;
  height: auto;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) textarea:hover {
  border-color: var(--gray-100);
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) textarea::-webkit-resizer {
  display: block;
  cursor: se-resize;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0.7' y1='-0.7' x2='3.2598' y2='-0.7' transform='matrix(0.707105 -0.707109 0.707105 0.707109 5.2002 8)' stroke='%23BDC2C5' stroke-width='1.4' stroke-linecap='round'/%3e%3cline x1='1' y1='7.01005' x2='7.01005' y2='1' stroke='%23BDC2C5' stroke-width='1.4' stroke-linecap='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
}

/* Label styling */
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) label:first-child:not(.toggle-on):not(.normal-label) {
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 5;
  text-transform: uppercase;
  margin-left: 12px;
  left: 0;
  line-height: 16px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  top: 0;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) label:first-child:not(.toggle-on):not(.normal-label),
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) .label-caps {
  color: var(--gray-400);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) label {
  margin-bottom: 0;
}

/* Hardcoded colour has no dark-mode support; this pattern is discouraged for new work. */
.form-group label.normal-label {
    font-weight: bold;
    display: inline-block;
    margin: inherit;
    margin-bottom: .5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #575962;
    text-align: left;
    position: initial;
    text-transform: initial;
    letter-spacing: normal;

}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).disabled label {
  color: var(--gray-300) !important;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).txtarea1 label {
  background-color: var(--white);
  padding: 8px 0 5px 12px !important;
  margin: 1px !important;
  border-top-left-radius: 6px;
  display: inline-block;
  width: calc(100% - 15px);
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group) .fv-plugins-icon-container {
  position: initial;
}

/* Tooltip icon in field labels — hover/active states */
.field-group label [data-toggle="tooltip_custom"],
.form-group label [data-toggle="tooltip_custom"] {
  cursor: pointer;
  color: inherit;
}
.field-group label [data-toggle="tooltip_custom"]:hover,
.form-group label [data-toggle="tooltip_custom"]:hover {
  color: var(--gray-600);
}
.field-group label [data-toggle="tooltip_custom"]:active,
.form-group label [data-toggle="tooltip_custom"]:active,
.field-group label [data-toggle="tooltip_custom"][aria-describedby],
.form-group label [data-toggle="tooltip_custom"][aria-describedby] {
  color: var(--primary);
}

/* System filled state */
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).system-filled input {
  background: var(--gray-25) !important;
  color: var(--gray-900) !important;
  border-color: var(--gray-100) !important;
  cursor: default !important;
  caret-color: transparent !important;
}

.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).system-filled input:active,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).system-filled input:focus-within,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).system-filled input:focus,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).system-filled .form-control:focus,
.form-group:not(.required-wrap, .fb-radio-group, .fb-checkbox-group).system-filled .form-control:active {
  border-color: var(--gray-100) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
  outline: none !important;
}

/* Field group */
.field-group {
  position: relative;
  margin-bottom: 12px;
  max-width: var(--field-max-width);
}

.field-group label {
  margin-bottom: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.field-group label > * {
  margin: 0 4px;
}

/* The default label variant emitted by resources/js/components/Common/FieldGroup.js
   (its "interior" branch maps to .control-label.lbl-sm; "exterior" mapped to
   nothing at all). Used in 284 files and defined in none of them until now, so
   it only looked right where an ancestor rule caught the bare <label>.

   Specificity is deliberately 0,1,0 - below .field-group label at 0,1,1 - so
   this changes nothing that already renders correctly and only reaches labels
   that were falling through to the browser default. */
.exterior-label {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.field-group.disabled label {
  color: var(--gray-300) !important;
}

.field-group.disabled input {
  color: var(--gray-300) !important;
  border-color: var(--gray-100) !important;
}

.field-group input:focus:not(.input-error),
.field-group select:focus:not(.input-error),
.field-group textarea:focus:not(.input-error) {
  color: var(--gray-950) !important;
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;
}

.field-group .ico-attached {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
  right: 10px;
  font-size: 24px;
  color: var(--gray-200);
  z-index: 1;
}

.field-group .ico-attached.ico-sm {
  font-size: 16px;
}

.field-group.ico-left .form-input {
  padding-left: 28px;
}

.field-group.ico-left .ico-attached {
  left: 8px;
  right: inherit;
}

.field-group textarea {
  min-height: 160px;
  height: auto;
  margin-bottom: 0;
  display: block;
}

.field-group textarea::-webkit-resizer {
  display: block;
  cursor: se-resize;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0.7' y1='-0.7' x2='3.2598' y2='-0.7' transform='matrix(0.707105 -0.707109 0.707105 0.707109 5.2002 8)' stroke='%23BDC2C5' stroke-width='1.4' stroke-linecap='round'/%3e%3cline x1='1' y1='7.01005' x2='7.01005' y2='1' stroke='%23BDC2C5' stroke-width='1.4' stroke-linecap='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  -webkit-border-radius: 2px;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;


  -moz-border-radius: 2px;


  border-radius: 2px;
}

.field-group .input-group {
  border: 1.5px solid var(--gray-100) !important;
  height: 40px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  -webkit-border-radius: 6px !important;

  -moz-border-radius: 6px !important;

  -webkit-border-radius: 6px !important;


  -moz-border-radius: 6px !important;


  border-radius: 6px !important;
  -webkit-transition: none;

  -moz-transition: none;

  -ms-transition: none;

  -webkit-transition: none;


  -moz-transition: none;


  -ms-transition: none;


  transition: none;
}

.field-group .input-group input,
.field-group .input-group .input-group-prepend {
  height: 37px !important;
}

.field-group .input-group:focus-within:not(.input-error):not(:invalid),
.field-group .input-group:active:not(.input-error):not(:invalid),
.field-group .input-group.focus:not(.input-error):not(:invalid) {
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;
}

.field-group .input-group input {
  -webkit-transition: none;

  -moz-transition: none;

  -ms-transition: none;

  -webkit-transition: none;


  -moz-transition: none;


  -ms-transition: none;


  transition: none;
  font-family: var(--font-sans);
  color: var(--gray-950);
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

.field-group .input-group input::-webkit-input-placeholder,
.field-group .input-group input:-ms-input-placeholder,
.field-group .input-group input::placeholder {
  color: var(--gray-300) !important;
}

.field-group .input-group .input-group-prepend {
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.field-group .input-group .input-group-prepend,
.field-group .input-group .input-group-append {
  button {
    margin: 6px;
    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;


    -moz-border-radius: 6px;


    border-radius: 6px;
    height: 28px;
    padding: 4px 16px;
    line-height: 20px;
    font-family: var(--font-sans);
    font-size: 12px;
  }
}

.field-group .input-group:not(.vh-input-group) {
  border: 1.5px solid var(--gray-100);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}

.field-group .input-group:not(.vh-input-group):hover.input-group {
  border: 1.5px solid var(--gray-100);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}

.field-group .input-group:not(.vh-input-group):focus:not(.input-error):not(:invalid):not(.search-control):not(.search-control-container),
.field-group .input-group:not(.vh-input-group).focus:not(.input-error):not(:invalid):not(.search-control) {
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;
}

.field-group .input-group:not(.vh-input-group) input,
.field-group .input-group:not(.vh-input-group) input:focus,
.field-group .input-group:not(.vh-input-group) input.focus {
  border: 0 !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.field-group.system-filled input {
  background: var(--gray-25) !important;
  color: var(--gray-900) !important;
  border-color: var(--gray-100) !important;
  cursor: default !important;
  caret-color: transparent !important;
}

.field-group.system-filled input:active,
.field-group.system-filled input:focus-within,
.field-group.system-filled input:focus,
.field-group.system-filled .form-control:focus,
.field-group.system-filled .form-control:active {
  border-color: var(--gray-100) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
  outline: none !important;
}

/* Form Group and Input Group Search Controls */
.form-group:not(.required-wrap),
.input-group {
  .form-control.search-form-control {
    height: 29.78px !important;
    padding-left: 8px;
    padding-right: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 19px;
  }
}

/* Form Control Base Styles */
.form-control {
  max-width: var(--field-max-width);
  display: inline-block;
  width: 100%;
  border: 1.5px solid var(--gray-100);
  outline: none;
  padding: 9px 12px 9px 12px;
  line-height: 22px;
  -webkit-border-radius: 6px !important;

  -moz-border-radius: 6px !important;

  -webkit-border-radius: 6px !important;


  -moz-border-radius: 6px !important;


  border-radius: 6px !important;
  font-family: var(--font-sans);
  color: var(--gray-950);
  font-size: 15px !important;
  letter-spacing: 0 !important;
  -webkit-transition: none !important;

  -moz-transition: none !important;

  -ms-transition: none !important;

  -webkit-transition: none !important;


  -moz-transition: none !important;


  -ms-transition: none !important;


  transition: none !important;
}

.form-control:hover:not(.input-error):not(:invalid) {
  border-color: var(--gray-100);
}

.form-control:focus:not(.input-error):not(:invalid):not(.search-control),
.form-control.focus:not(.input-error):not(:invalid):not(.search-control) {
  color: var(--gray-950);
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;
}

.form-control:focus:not(.input-error):not(:invalid):not(.search-control)[type="range"],
.form-control.focus:not(.input-error):not(:invalid):not(.search-control)[type="range"] {
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.form-control::-webkit-input-placeholder,
.form-control select option[value=""]:first-of-type {
  color: var(--gray-300) !important;
}

.form-control select option[value=""]:not(:first-of-type) {
  color: red;
}

.form-control:-ms-input-placeholder {
  color: var(--gray-300) !important;
}

.form-control::placeholder {
  color: var(--gray-300) !important;
}

.form-control:disabled {
  background-color: var(--white) !important;
  color: var(--gray-300);
  border-color: var(--gray-100) !important;
}

.form-control:not(textarea) {
  height: var(--field-height);
}

.form-control.is-valid:not(select) {
  background-image: none !important;
  border-color: #28a745 !important;
}

.form-control.is-invalid:not(select) {
  background-image: none !important;
}

.form-control:is(select) {
  color: var(--gray-300);
}

.form-control:is(select).has-value {
  color: var(--gray-950);
}

.form-control.form-control-md,
.form-control.form-control-m {
  height: 36px !important;
  line-height: 1;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 600;
  background-size: 18px;
}

/* Has Icon */
.has-icon .form-control {
  padding-right: var(--field-with-ico-padding) !important;
}

/* Has Danger/Error */
.has-danger,
.has-error {
  .form-control,
  input {
    border-color: var(--warning) !important;
    margin-bottom: -5px !important;
  }
}

.has-danger .form-control:focus,
.has-danger .form-control.focus,
.has-error .form-control:focus,
.has-error .form-control.focus {
  border-color: var(--warning) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;
}

/* Has Danger/Error for inputs specifically */
.has-danger input,
.has-error input {
  border-color: var(--warning) !important;
  margin-bottom: -5px !important;
}

.has-danger input:focus,
.has-danger input.focus,
.has-error input:focus,
.has-error input.focus {
  border-color: var(--warning) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;
}

/* Has Danger/Error for textarea and select */
.has-danger textarea,
.has-danger select,
.has-error textarea,
.has-error select {
  border-color: var(--warning) !important;
  margin-bottom: -5px !important;
}

.has-danger textarea:focus,
.has-danger textarea.focus,
.has-danger select:focus,
.has-danger select.focus,
.has-error textarea:focus,
.has-error textarea.focus,
.has-error select:focus,
.has-error select.focus {
  border-color: var(--warning) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;
}

/* Error Messages */
.vh-form-error-message,
.vh-error-message {
  display: none;
  color: var(--warning);
  font-style: normal;
  padding-left: 0;
  font-size: 13px;
  letter-spacing: normal;
  font-weight: 600;
  line-height: 18px;
  margin-top: 4px;
}

.submitted .vahara-field-group:has(input:invalid) ~ .vh-form-error-message,
.vahara-field-group.input-error ~ .vh-error-message,
.vahara-field-group.input-error ~ .vh-form-error-message,
.submitted input:invalid ~ .vh-error-message,
.submitted input:invalid ~ .vh-form-error-message,
.submitted select:invalid ~ .vh-error-message,
.submitted select:invalid ~ .vh-form-error-message,
.submitted textarea:invalid ~ .vh-error-message,
.submitted textarea:invalid ~ .vh-form-error-message,
.input-error ~ .vh-error-message,
.input-error ~ .vh-form-error-message {
  display: block !important;
}

.submitted input:invalid {
  border-color: var(--warning);
}

.submitted input:invalid:active,
.submitted input:invalid:focus-within,
.submitted input:invalid:focus {
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, white 80%, var(--warning)) !important;
}

/* Was Validated */
.was-validated .form-control:valid {
  background-image: none !important;
  border-color: #28a745 !important;
}

.was-validated .form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--warning) !important;
  background-image: none !important;
}

.was-validated .form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.form-control.is-invalid:not(select) {
  background-image: none !important;
  border-color: var(--warning) !important;
}

/* Sidebar Menu Toggler */
.sidebar-menutoggler.toggler-sub-menu .fa-chevron-right:before {
  content: "\f053" !important;
}

/* Form Builder */
.form-wrap.form-builder .frmb .form-field .form-group:not(.required-wrap, .fb-radio-group) label {
  font-size: 12px !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 600 !important;
  color: #8A8D8E !important;
  text-align: left !important;
  margin: 6px 0 0 12px !important;
  padding: 0 !important;
}

.form-wrap.form-builder .frmb .form-field .form-group:not(.required-wrap, .fb-radio-group) .input-wrap {
  width: 100% !important;
  margin-left: 0 !important;
  float: left !important;
}

.form-wrap.form-builder .frmb .form-field .form-group:not(.required-wrap, .fb-radio-group) .form-control:not(textarea):not(input[type="file"]) {
  height: 48px;
  line-height: 22px;
  padding: 20px 10px 4px 12px;
}

/* Form Field Character Count */
.form-field-char {
  position: relative;
}

.form-field-char span {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
  right: 10px;
  font-size: 12px !important;
  font-family: var(--font-sans);
  font-weight: 700 !important;
  color: var(--gray-200) !important;
  letter-spacing: 0.05em !important;
}

.form-field-char span.clr-coral {
  color: var(--warning) !important;
}

.form-field-char span.clr-mango {
  color: var(--warning) !important;
}

/* Form Group Input Groups */
.form-group:not(.required-wrap) .input-group {
  border: 1.5px solid var(--gray-100);
  height: 48px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  -webkit-border-radius: 6px !important;

  -moz-border-radius: 6px !important;

  -webkit-border-radius: 6px !important;


  -moz-border-radius: 6px !important;


  border-radius: 6px !important;
  -webkit-transition: none !important;

  -moz-transition: none !important;

  -ms-transition: none !important;

  -webkit-transition: none !important;


  -moz-transition: none !important;


  -ms-transition: none !important;


  transition: none !important;
}

.form-group:not(.required-wrap) .input-group input,
.form-group:not(.required-wrap) .input-group .input-group-prepend {
  height: 45px !important;
  padding: 23px 12px 6px 12px;
}

.form-group:not(.required-wrap) .input-group:focus-within:not(.input-error):not(:invalid),
.form-group:not(.required-wrap) .input-group:active:not(.input-error):not(:invalid),
.form-group:not(.required-wrap) .input-group.focus:not(.input-error):not(:invalid) {
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;
}

.form-group:not(.required-wrap) .input-group input,
.form-group:not(.required-wrap) .input-group input:focus,
.form-group:not(.required-wrap) .input-group input.focus {
  border: 0 !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.form-group:not(.required-wrap) .input-group input {
  -webkit-transition: none;

  -moz-transition: none;

  -ms-transition: none;

  -webkit-transition: none;


  -moz-transition: none;


  -ms-transition: none;


  transition: none;
  font-family: var(--font-sans);
  color: var(--gray-950);
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

.form-group:not(.required-wrap) .input-group input::-webkit-input-placeholder,
.form-group:not(.required-wrap) .input-group input:-ms-input-placeholder,
.form-group:not(.required-wrap) .input-group input::placeholder {
  color: var(--gray-300) !important;
}

.form-group:not(.required-wrap) .input-group .input-group-prepend {
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.form-group:not(.required-wrap) .input-group.vh-input-group .input-group-append {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.form-group:not(.required-wrap) .input-group .input-group-prepend,
.form-group:not(.required-wrap) .input-group .input-group-append {
  button {
    margin: 8px;
    height: 32px;
    padding: 6.5px 24px;
    font-family: var(--font-sans);
  }
}

/* Input Group Base */
.input-group:not(.vh-input-group) {
  border: 1.5px solid var(--gray-200);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}

.input-group:not(.vh-input-group):hover.input-group {
  border: 1.5px solid var(--gray-100);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}

.input-group:not(.vh-input-group):focus:not(.input-error):not(:invalid),
.input-group:not(.vh-input-group).focus:not(.input-error):not(:invalid) {
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, white) !important;
}

.input-group:not(.vh-input-group) input,
.input-group:not(.vh-input-group) input:focus,
.input-group:not(.vh-input-group) input.focus {
  border: 0 !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

/* System-filled — final override to suppress focus ring while allowing text selection
   Specificity (0,5,1) beats .form-control:focus:not():not():not() at (0,4,0) */
.system-filled .form-control:focus:not(.input-error):not(:invalid):not(.search-control),
.system-filled .form-control:active:not(.input-error):not(:invalid):not(.search-control),
.system-filled input.form-control:focus,
.system-filled input.form-control:active {
  border-color: var(--gray-100) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
  outline: none !important;
}

/* =============================================================================
   Dark mode — form field overrides
   ============================================================================= */
body.dark .form-control,
body.dark .form-control:focus,
body.dark input.form-control,
body.dark select.form-control,
body.dark textarea.form-control {
  background-color: var(--gray-900) !important;
  color: var(--foreground) !important;
  border-color: var(--gray-800) !important;
}

body.dark .form-control::placeholder {
  color: var(--gray-500) !important;
}

body.dark .form-control:disabled,
body.dark .form-group:not(.required-wrap) input:disabled,
body.dark .form-group:not(.required-wrap) select:disabled {
  background-color: var(--gray-950) !important;
  color: var(--gray-500) !important;
  border-color: var(--gray-800) !important;
}

body.dark .form-group:not(.required-wrap).txtarea1 label {
  background-color: var(--gray-900);
}

body.dark textarea::-webkit-scrollbar-track,
body.dark textarea::-webkit-scrollbar {
  background-color: var(--gray-900);
}

/* Interior label (.form-group) dark mode */
body.dark .form-group:not(.required-wrap) {
  border-color: var(--gray-800);
}

body.dark .form-group:not(.required-wrap) input,
body.dark .form-group:not(.required-wrap) select,
body.dark .form-group:not(.required-wrap) textarea {
  background-color: var(--gray-900) !important;
  color: var(--foreground) !important;
}

body.dark .form-group:not(.required-wrap) label {
  color: var(--gray-300);
}

/* Exterior labels (.field-group) */
body.dark .field-group > label,
body.dark .field-group .lbl {
  color: var(--gray-300) !important;
}

/* Tooltip icon in field labels — dark hover/active */
body.dark .field-group label [data-toggle="tooltip_custom"]:hover,
body.dark .form-group label [data-toggle="tooltip_custom"]:hover {
  color: var(--gray-200);
}
body.dark .field-group label [data-toggle="tooltip_custom"]:active,
body.dark .form-group label [data-toggle="tooltip_custom"]:active,
body.dark .field-group label [data-toggle="tooltip_custom"][aria-describedby],
body.dark .form-group label [data-toggle="tooltip_custom"][aria-describedby] {
  color: var(--accent);
}

/* Icons inside fields — mute in dark mode */
body.dark .ico-attached,
body.dark .form-group:not(.required-wrap) .ico-attached {
  color: var(--gray-500) !important;
}

/* Select chevron — swap to a lighter but muted icon */
body.dark select {
  background-image: url("/assets/icons/gray500/chevron-down.svg");
}

/* Focus ring — mix with dark bg instead of white */
body.dark .form-control:focus:not(.input-error):not(:invalid):not(.search-control),
body.dark .form-control.focus:not(.input-error):not(:invalid):not(.search-control) {
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

/* Error/validation halos — dark-appropriate glow */
body.dark .input-error:active, body.dark .input-error:focus-within, body.dark .input-error:focus,
body.dark .submitted input:invalid:active, body.dark .submitted input:invalid:focus-within, body.dark .submitted input:invalid:focus,
body.dark .submitted select:invalid:active, body.dark .submitted select:invalid:focus-within, body.dark .submitted select:invalid:focus,
body.dark .submitted textarea:invalid:active, body.dark .submitted textarea:invalid:focus-within, body.dark .submitted textarea:invalid:focus {
  border-color: var(--warning) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;
}

body.dark .submitted input[required]:invalid:active, body.dark .submitted input[required]:invalid:focus-within, body.dark .submitted input[required]:invalid:focus,
body.dark .submitted select[required]:invalid:active, body.dark .submitted select[required]:invalid:focus-within, body.dark .submitted select[required]:invalid:focus,
body.dark .submitted textarea[required]:invalid:active, body.dark .submitted textarea[required]:invalid:focus-within, body.dark .submitted textarea[required]:invalid:focus,
body.dark .touched input[required]:invalid:active, body.dark .touched input[required]:invalid:focus-within, body.dark .touched input[required]:invalid:focus,
body.dark .touched select[required]:invalid:active, body.dark .touched select[required]:invalid:focus-within, body.dark .touched select[required]:invalid:focus,
body.dark .touched textarea[required]:invalid:active, body.dark .touched textarea[required]:invalid:focus-within, body.dark .touched textarea[required]:invalid:focus {
  border-color: var(--warning) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;
}

/* has-error / has-danger focus in dark mode */
body.dark .has-danger .form-control:focus, body.dark .has-danger .form-control.focus,
body.dark .has-error .form-control:focus, body.dark .has-error .form-control.focus,
body.dark .has-danger input:focus, body.dark .has-danger input.focus,
body.dark .has-error input:focus, body.dark .has-error input.focus,
body.dark .has-danger textarea:focus, body.dark .has-danger textarea.focus,
body.dark .has-danger select:focus, body.dark .has-danger select.focus,
body.dark .has-error textarea:focus, body.dark .has-error textarea.focus,
body.dark .has-error select:focus, body.dark .has-error select.focus {
  border-color: var(--warning) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 25%, transparent) !important;
}

/* Field-group focus ring — dark mode (override light-mode white mix) */
body.dark .field-group input:focus:not(.input-error),
body.dark .field-group select:focus:not(.input-error),
body.dark .field-group textarea:focus:not(.input-error) {
  border-color: var(--accent) !important;
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;

  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;

  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;


  -moz-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;


  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

/* Textarea resize handle — swap to dark-appropriate gray */
body.dark .form-group:not(.required-wrap) textarea::-webkit-resizer,
body.dark .field-group textarea::-webkit-resizer,
body.dark textarea::-webkit-resizer {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0.7' y1='-0.7' x2='3.2598' y2='-0.7' transform='matrix(0.707105 -0.707109 0.707105 0.707109 5.2002 8)' stroke='%23546369' stroke-width='1.4' stroke-linecap='round'/%3e%3cline x1='1' y1='7.01005' x2='7.01005' y2='1' stroke='%23546369' stroke-width='1.4' stroke-linecap='round'/%3e%3c/svg%3e") !important;
}

/* Character countdown number — match muted icon gray */
body.dark .form-field-char span {
  color: var(--gray-500) !important;
}

/* Error state — solid amber border at rest, NO halo until focused */
body.dark .input-error,
body.dark input.input-error,
body.dark input.form-control.input-error,
body.dark select.form-control.input-error,
body.dark textarea.form-control.input-error,
body.dark .has-error .form-control,
body.dark .has-error input.form-control,
body.dark .has-error input,
body.dark .has-danger .form-control,
body.dark .has-danger input.form-control,
body.dark .has-danger input {
  border-color: var(--warning) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

/* System-filled — suppress focus ring and use dark bg */
body.dark .form-group:not(.required-wrap).system-filled input,
body.dark .field-group.system-filled input,
body.dark .system-filled .form-control {
  background-color: var(--gray-950) !important;
  color: var(--foreground) !important;
  border-color: var(--gray-700) !important;
  cursor: default !important;
  caret-color: transparent !important;
}
body.dark .form-group:not(.required-wrap).system-filled input:focus,
body.dark .form-group:not(.required-wrap).system-filled input:active,
body.dark .form-group:not(.required-wrap).system-filled .form-control:focus,
body.dark .field-group.system-filled input:focus,
body.dark .field-group.system-filled input:active,
body.dark .field-group.system-filled input:focus:not(.input-error),
body.dark .field-group.system-filled .form-control:focus,
body.dark .field-group.system-filled .form-control:focus:not(.input-error),
body.dark .system-filled .form-control:focus,
body.dark .system-filled .form-control:focus:not(.input-error):not(:invalid):not(.search-control),
body.dark .system-filled .form-control:active {
  border-color: var(--gray-700) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
  outline: none !important;
}
body.dark .form-group:not(.required-wrap).system-filled:focus-within {
  border-color: var(--gray-700) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}
body.dark .field-group.system-filled input:focus-within,
body.dark .field-group.system-filled:focus-within {
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

/* Error state — amber border when in error (not just on focus) */
body.dark .has-danger .form-control,
body.dark .has-danger input.form-control,
body.dark .has-danger input,
body.dark .has-danger textarea,
body.dark .has-danger select,
body.dark .has-error .form-control,
body.dark .has-error input.form-control,
body.dark .has-error input,
body.dark .has-error textarea,
body.dark .has-error select,
body.dark .input-error,
body.dark input.form-control.input-error,
body.dark select.form-control.input-error,
body.dark textarea.form-control.input-error {
  border-color: var(--warning) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

/* Error state — submitted/touched required fields */
body.dark .submitted input:invalid,
body.dark .submitted input.form-control:invalid,
body.dark .submitted select:invalid,
body.dark .submitted select.form-control:invalid,
body.dark .submitted textarea:invalid,
body.dark .submitted textarea.form-control:invalid {
  border-color: var(--warning) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.form-group input[type="checkbox"]:focus, .form-group input[type="radio"]:focus {
    outline: none;
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;


    -moz-box-shadow: none;


    box-shadow: none;
    border: none;
}

/* =============================================================================
   Field hint text
   =============================================================================
   .form-name-text-muted is the small uppercase note pinned to the right of a
   field label — 82 views use it. .field-limit-character-count sits on top of it
   and is updated at runtime.
   ========================================================================== */

.form-name-text-muted {
  color: #B0B0B0;
  font-style: italic;
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.92px;
  position: absolute;
  z-index: 5;
  text-transform: uppercase;
  margin-right: 12px;
  right: 0;
  line-height: 13px;
  margin-top: 8px;
}

.field-limit-character-count {
  margin: 0px 11px;
  line-height: 38px;
  font-size: 12px;
  top: 21px;
}

/* :not(.toggle-on) matters — bootstrap4-toggle.min.js adds that class to the
   labels it generates at runtime, and they must not pick up this margin. */
.form-row .form-group label:first-child:not(.toggle-on):not(.normal-label) {
  margin: 2px 30px 0 18px;
}

/* Generated at runtime by plugins, so neither selector appears in any view. */
.fv-plugins-bootstrap:not(.form-inline) label ~ .fv-plugins-icon {
  top: 36px;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
  padding-left: 2px !important;
  padding-right: 11px !important;
  min-width: 15rem;
}

/* End import from ./components/fields.css */
/* Imported from ./components/typography.css */
/* Fonts loaded via WebFont.load in account layout (Open Sans + Source Code Pro) */

/* =============================================================================
   Typography Classes
   =============================================================================
   All text classes use var(--foreground) so dark mode works automatically.

   Heading scale — all Medium 500:
     .display  32px  editorial/hero — not standard product UI
     .h1       26px  page titles
     .h2       22px  section headings
     .h3       19px  card titles, dialogs
     .h4       16px  panel headers

   Body scale:
     .body-large   16px / 400  lead paragraphs
     .body         15px / 400  default interface text
     .body-semibold  15px / 600  emphasized body text
     .body-small   14px / 400  helper text, captions
     .body-xs      13px / 400  timestamps, metadata (13px floor)

   Labels — Bold 700 uppercase:
     .lbl  14px
     .lbl-sm    13px  (13px floor)
   ============================================================================= */


/* ─── Display — editorial/hero, not standard product UI ─── */
.display {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-weight: 500;
  letter-spacing: 0;
  /* 32px, deliberately off the token scale (--text-3xl is 30). Paul: display
     is intended at 32 and is editorial, not part of the product heading ladder,
     so it does not have to sit on a step the UI ranks use. */
  font-size: 32px;
  line-height: 44px;
}


/* ─── Headings ─── */

.h1, h1 {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-weight: 500;
  letter-spacing: 0;
  /* 24px = --text-2xl. Was 26px, which matched no step. See
     vahara/decisions/2026-08-24-type-scale-roles.md — the ladder is 24/20/16/14. */
  font-size: 24px;
  line-height: 32px;
}

.h2, h2 {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-weight: 500;
  letter-spacing: 0;
  /* 20px = --text-xl. Was 22px, which matched no step -- the same defect
     .h3 had at 19px. 20px is also what .modal-title already renders at, so
     this size was already in the product without a class. Role: section
     heading, grouping several cards. */
  font-size: 20px;
  line-height: 28px;
}

.h3, h3 {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-weight: 500;
  letter-spacing: 0;
  /* 18px = --text-lg. Corrected from 19px, which matched no step.
     NO CURRENT ROLE -- do not reach for .h3 in new work; use .h2 (section
     heading) or .h4 (card heading). The rule stays because it also styles
     ~119 bare <h3> elements, which would otherwise fall back to the browser
     default. Line-height stays 26px deliberately: changing it would shift
     the rhythm of all of them. */
  font-size: 18px;
  line-height: 26px;
}

.h4, h4 {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-weight: 500;
  letter-spacing: 0;
  font-size: 16px;
  line-height: 24px;
}

/* h5 — micro-heading utility, not in primary scale */
.h5, h5 {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: 0;
  font-size: 14px;
  line-height: 20px;
}


/* ─── Body text ─── */

.body-large {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  font-weight: 400;
}

/* Semibold variant of body-large — used on sidebar nav items and section headers */
.body-large-semibold {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  font-weight: 600;
}

/* .body is 15px, which is deliberately OFF the token scale. The scale steps
   14 -> 16 and both are taken: 16 is .body-large, 14 is .body-small (and every
   field label). The text ladder needs a rung between them that a spacing-derived
   scale never provided. Moving .body to 14 would collapse it into .body-small.
   See vahara/decisions/2026-08-24-type-scale-roles.md. */
.body {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-size: 15px;
  letter-spacing: 0;
  line-height: 24px;
  font-weight: 400;
}

/* body-medium — 400-weight alias kept for template compatibility */
.body-medium {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22px;
  font-weight: 400;
}

.body-semibold {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22px;
  font-weight: 600;
}

.body-small, .body-s {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  font-weight: 400;
}

.body-xs {
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 18px;
  font-weight: 400;
}


/* ─── Labels — uppercase, Bold 700 ─── */

.lbl {
  font-family: 'Open Sans', sans-serif;
  color: var(--muted-foreground);
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 700;
}

.lbl-sm {
  font-family: 'Open Sans', sans-serif;
  color: var(--muted-foreground);
  font-size: 13px;
  letter-spacing: 0.26px;
  line-height: 18px;
  text-transform: uppercase;
  font-weight: 700;
}


/* ─── Prose — vertical rhythm for flowing text content ─────────────────────
   Wrap any flowing text block in .prose for automatic, consistent spacing
   between heading and body elements. No margin utilities needed inside.
   Usage: <div class="prose"><h3 class="h3">…</h3><p class="body">…</p></div>
   ─────────────────────────────────────────────────────────────────────── */
.prose > * {
  margin-top: 0;
  margin-bottom: 0;
}
.prose > * + * {
  margin-top: 12px;
}
.prose > * + h2, .prose > * + .h2,
.prose > * + h3, .prose > * + .h3 {
  margin-top: 28px;
}
.prose > * + h4, .prose > * + .h4 {
  margin-top: 20px;
}
.prose > * + h5, .prose > * + .h5 {
  margin-top: 16px;
}
.prose > * + .lbl,
.prose > * + .lbl-sm {
  margin-top: 20px;
}
.prose > h2 + *, .prose > .h2 + *,
.prose > h3 + *, .prose > .h3 + * {
  margin-top: 6px;
}
.prose > h4 + *, .prose > .h4 + *,
.prose > h5 + *, .prose > .h5 + * {
  margin-top: 4px;
}
.prose > .lbl + *,
.prose > .lbl-sm + * {
  margin-top: 4px;
}


/* ─── Code ─── */

.code {
  font-size: 14px;
  color: var(--foreground);
  font-family: 'Source Code Pro', monospace;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Inline code spans in running text — use on <code class="code-inline"> */
.code-inline {
  font-family: 'JetBrains Mono', 'Source Code Pro', ui-monospace, monospace;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--primary);
  background: rgba(0, 0, 0, 0.025);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  padding: 2px 5px;
  margin: 0 1px;
  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;


  -moz-border-radius: 4px;


  border-radius: 4px;
}

body.dark .code-inline {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Monospace without color treatment — for technical content in editors */
.mono {
  font-family: 'Source Code Pro', 'Courier New', monospace;
  font-size: 0.95em;
  font-weight: 500;
}


/* ─── Text utilities ─── */

/* Tabular numbers — aligns digits in columns; use in data tables, financial figures */
.tabular { font-variant-numeric: tabular-nums; }

/* Truncate — single-line ellipsis overflow */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ─── Rich text / CMS styles ─── */

blockquote, .blockquote {
  border-left: 3px solid var(--primary);
  padding: 4px 0 4px 16px;
  color: var(--muted-foreground);
  font-style: italic;
  margin: 0;
}

body.dark blockquote, body.dark .blockquote {
  border-left-color: var(--accent);
}

.caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--muted-foreground);
}

mark, .mark {
  background: color-mix(in oklch, var(--accent) 20%, transparent);
  color: var(--foreground);
  padding: 0 2px;
  -webkit-border-radius: 2px;

  -moz-border-radius: 2px;

  -webkit-border-radius: 2px;


  -moz-border-radius: 2px;


  border-radius: 2px;
}

body.dark mark, body.dark .mark {
  background: color-mix(in oklch, var(--accent) 16%, transparent);
}

/* Lists inside .prose — structured spacing and bullet treatment */
.prose > ul,
.prose > ol {
  padding-left: 20px;
}
/* Multi-level bullet types — unordered */
.prose ul         { list-style-type: disc; }
.prose ul ul       { list-style-type: circle; }
.prose ul ul ul     { list-style-type: square; }
.prose ul ul ul ul   { list-style-type: disc; }
.prose ul ul ul ul ul { list-style-type: circle; }
/* Multi-level counter types — ordered */
.prose ol           { list-style-type: decimal; }
.prose ol ol         { list-style-type: lower-alpha; }
.prose ol ol ol       { list-style-type: lower-roman; }
.prose ol ol ol ol     { list-style-type: upper-alpha; }
.prose ol ol ol ol ol  { list-style-type: upper-roman; }
/* Nested list indentation and spacing */
.prose li > ul,
.prose li > ol {
  margin-top: 4px;
  padding-left: 20px;
}
.prose li + li { margin-top: 5px; }


/* ─── Font weight utilities ─── */

.font-light    { font-weight: 300; }
.font-regular  { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }


/* ─── Links ─── */

a, .link {
  font-family: 'Open Sans', sans-serif;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

a:visited, .link:visited {
  color: var(--link-visited);
}

a:hover, .link:hover {
  color: var(--link);
  text-decoration: underline;
}

/* Bare <a> — no underline by default (nav items, buttons-as-links, most UI) */
a {
  text-decoration: none;
}

/* Never underlined — the third value on the underline axis. The showroom
   listed this behaviour and demonstrated it with a bare <a>, which underlines
   on hover because two a:hover rules in app-base.css say so; it was showing the
   browser default rather than anything the system provides.
   a.underline-none:hover is 0,2,1 against a:hover at 0,1,1, so no !important. */
a.underline-none, .underline-none {
  text-decoration: none;
}

a.underline-none:hover, .underline-none:hover {
  text-decoration: none;
}

/* Underline on hover — the underline axis by itself, so a link can take this
   behaviour and keep whatever colour it was given. Without this there is no way
   to write an accent link that underlines on hover. */
a.underline-hover, .underline-hover {
  text-decoration: none;
}

a.underline-hover:hover, .underline-hover:hover {
  text-decoration: underline;
}

/* Subtle — reads as body text and reveals itself on hover. Both axes at once:
   no link colour, and no underline until hover. A preset, not an axis value.

   It keeps its colour on :visited and :hover because the base `a` rules set one
   on both, and a subtle link that turns blue when visited is not subtle. */
a.subtle, .link.subtle {
  color: inherit;
  text-decoration: none;
}

a.subtle:visited, .link.subtle:visited {
  color: inherit;
}

a.subtle:hover, .link.subtle:hover {
  color: inherit;
  text-decoration: underline;
}

/* Accent link — the colour axis, independent of the underline axis, so it
   composes with .underline-hover. Needs its own :hover because the base a:hover
   rule re-asserts var(--link); .link-accent:hover is (0,2,0) against that
   rule's (0,1,1), so it wins without !important.

   Do not combine with .subtle — .subtle strips colour by definition, and which
   one wins would come down to source order rather than intent. */
a.link-accent, .link-accent {
  color: var(--link-accent);
}

a.link-accent:visited, .link-accent:visited {
  color: var(--link-accent-visited);
}

a.link-accent:hover, .link-accent:hover {
  color: var(--link-accent);
}


/* ─── Placeholders ─── */

select.dropdown-field.placeholder-shown {
  color: var(--gray-400);
}

select.dropdown-field.placeholder-hidden {
  color: var(--foreground);
}


/* ─── Shadow utilities ─── */

.shadow3 {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.03);

  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.03);

  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.03);


  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.03);


  box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.03);
}

.shadow5 {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.05);

  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.05);

  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.05);


  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.05);


  box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.05);
}

.shadow10 {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);

  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);

  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);


  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);


  box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);
}

.shadow15 {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);

  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);

  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);


  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);


  box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);
}

.shadow20 {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.20);

  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.20);

  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.20);


  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.20);


  box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.20);
}

.shadow30 {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 2px 4px 8.6px 2px rgba(10, 23, 28, 0.30);

  -moz-box-shadow: 2px 4px 8.6px 2px rgba(10, 23, 28, 0.30);

  -webkit-box-shadow: 2px 4px 8.6px 2px rgba(10, 23, 28, 0.30);


  -moz-box-shadow: 2px 4px 8.6px 2px rgba(10, 23, 28, 0.30);


  box-shadow: 2px 4px 8.6px 2px rgba(10, 23, 28, 0.30);
}

.shadow40 {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 1px 4px 12.1px 2px rgba(10, 23, 28, 0.40);

  -moz-box-shadow: 1px 4px 12.1px 2px rgba(10, 23, 28, 0.40);

  -webkit-box-shadow: 1px 4px 12.1px 2px rgba(10, 23, 28, 0.40);


  -moz-box-shadow: 1px 4px 12.1px 2px rgba(10, 23, 28, 0.40);


  box-shadow: 1px 4px 12.1px 2px rgba(10, 23, 28, 0.40);
}

.shadow50 {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 2px 3px 13.5px 2px rgba(10, 23, 28, 0.50);

  -moz-box-shadow: 2px 3px 13.5px 2px rgba(10, 23, 28, 0.50);

  -webkit-box-shadow: 2px 3px 13.5px 2px rgba(10, 23, 28, 0.50);


  -moz-box-shadow: 2px 3px 13.5px 2px rgba(10, 23, 28, 0.50);


  box-shadow: 2px 3px 13.5px 2px rgba(10, 23, 28, 0.50);
}

.top-overly {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 0px 1px 16px 0px rgba(11, 26, 31, 0.03);

  -moz-box-shadow: 0px 1px 16px 0px rgba(11, 26, 31, 0.03);

  -webkit-box-shadow: 0px 1px 16px 0px rgba(11, 26, 31, 0.03);


  -moz-box-shadow: 0px 1px 16px 0px rgba(11, 26, 31, 0.03);


  box-shadow: 0px 1px 16px 0px rgba(11, 26, 31, 0.03);
}

.bottom-overly {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 0px -1px 16px 0px rgba(11, 26, 31, 0.03);

  -moz-box-shadow: 0px -1px 16px 0px rgba(11, 26, 31, 0.03);

  -webkit-box-shadow: 0px -1px 16px 0px rgba(11, 26, 31, 0.03);


  -moz-box-shadow: 0px -1px 16px 0px rgba(11, 26, 31, 0.03);


  box-shadow: 0px -1px 16px 0px rgba(11, 26, 31, 0.03);
}

.right-overly {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 1px 0px 16px 0px rgba(11, 26, 31, 0.03);

  -moz-box-shadow: 1px 0px 16px 0px rgba(11, 26, 31, 0.03);

  -webkit-box-shadow: 1px 0px 16px 0px rgba(11, 26, 31, 0.03);


  -moz-box-shadow: 1px 0px 16px 0px rgba(11, 26, 31, 0.03);


  box-shadow: 1px 0px 16px 0px rgba(11, 26, 31, 0.03);
}

.left-overly {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: -1px 0px 16px 0px rgba(11, 26, 31, 0.05);

  -moz-box-shadow: -1px 0px 16px 0px rgba(11, 26, 31, 0.05);

  -webkit-box-shadow: -1px 0px 16px 0px rgba(11, 26, 31, 0.05);


  -moz-box-shadow: -1px 0px 16px 0px rgba(11, 26, 31, 0.05);


  box-shadow: -1px 0px 16px 0px rgba(11, 26, 31, 0.05);
}

.modal-overly {
  border: 1px solid var(--gray-50);
  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);

  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);

  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);


  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);


  box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.10);
}

/* End import from ./components/typography.css */
/* Imported from ./components/common.css */
.style-content {
  max-width: 1024px;
}

.tooltip {
  -webkit-transition: none !important;

  -moz-transition: none !important;

  -ms-transition: none !important;

  -webkit-transition: none !important;


  -moz-transition: none !important;


  -ms-transition: none !important;


  transition: none !important;
}

.tooltip.data-table-tooltip.show, .tooltip.fade-in-with-delay.show, .tooltip.fade-in-without-delay.show {
  transition-property: opacity !important;
  transition-duration: 1s !important;
  transition-timing-function: linear !important;
  transition-delay: 1s !important;
}

.tooltip.fade-in-without-delay.show {
  transition-duration: 1s !important;
  transition-delay: 0s !important;
  transition-timing-function: ease !important;
}

.tooltip.show:not(.data-table-tooltip):not(.fade-in-with-delay):not(.fade-in-without-delay),
.tooltip.fade {
  -webkit-transition: opacity 0s !important;

  -moz-transition: opacity 0s !important;

  -ms-transition: opacity 0s !important;

  -webkit-transition: opacity 0s !important;


  -moz-transition: opacity 0s !important;


  -ms-transition: opacity 0s !important;


  transition: opacity 0s !important;
}

.disclaimer a {
  font-size: inherit;
  text-decoration: underline !important;
}

.disclaimer-custom-text {
  margin-top: 24px;
  margin-bottom: 24px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #8A8D8E;
}

.copyright-section {
  bottom: 8px !important;
  position: absolute;
  text-align: center;
  width: inherit;
}

.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
  padding: 0 8px;
}

.tooltip.fade, .tooltip.show {
  -webkit-transition: opacity 0s !important;

  -moz-transition: opacity 0s !important;

  -ms-transition: opacity 0s !important;

  -webkit-transition: opacity 0s !important;


  -moz-transition: opacity 0s !important;


  -ms-transition: opacity 0s !important;


  transition: opacity 0s !important;
}

.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
  left: 0;
  width: 8px;
  height: 0.8rem;
}

.modal-form .toggle.off {
  border-color: rgba(0, 0, 0, .25);
}

.toggle > .toggle-group {
  background: white;
  -webkit-box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);

  -moz-box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);

  -webkit-box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);


  -moz-box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);


  box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%);
}

.toggle.off {
  background-color: white;
  border: thin rgba(0, 0, 0, .25) solid;
}

.badge.vh-badge {
  -webkit-border-radius: 18px !important;

  -moz-border-radius: 18px !important;

  -webkit-border-radius: 18px !important;


  -moz-border-radius: 18px !important;


  border-radius: 18px !important;
  font-size: 10px !important;
  line-height: 17px !important;
  padding: 0 10px !important;
  font-weight: 600 !important;
  border: 1px solid !important;
  height: 18px !important;
}

.badge.vh-badge.badge-primary {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 85%, white);
  border-color: var(--primary);
}

.badge.vh-badge.badge-secondary {
  background: var(--gray-950);
  color: var(--gray-500);
  border-color: var(--gray-500);
}

.circle-icon,
.circle-icon-success,
.circle-icon-error,
.circle-icon-warning {
  height: 40px;
  width: 40px;
  -webkit-border-radius: 50% !important;

  -moz-border-radius: 50% !important;

  -webkit-border-radius: 50% !important;


  -moz-border-radius: 50% !important;


  border-radius: 50% !important;
  font-size: 22px !important;
  text-align: center;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.circle-icon img {
  width: 22px;
  height: 22px;
}

/* ── Dark-mode circle icons ──
   Inverted expression: dark muted fills + bright icons. */

body.dark .circle-icon.gray25,
[data-theme="dark"] .circle-icon.gray25 {
  background: var(--gray-800) !important;
}

body.dark .circle-icon.success-tint-10,
[data-theme="dark"] .circle-icon.success-tint-10 {
  background: color-mix(in oklch, var(--success) 25%, var(--gray-900)) !important;
}

body.dark .circle-icon.error-tint-10,
body.dark .circle-icon.warning-tint-10,
[data-theme="dark"] .circle-icon.error-tint-10,
[data-theme="dark"] .circle-icon.warning-tint-10 {
  background: color-mix(in oklch, var(--warning) 30%, var(--gray-900)) !important;
}

body.dark .circle-icon.danger-tint-10,
[data-theme="dark"] .circle-icon.danger-tint-10 {
  background: color-mix(in srgb, var(--destructive) 28%, var(--gray-900)) !important;
}

/* Dark icon filters — bright on dark surface */
body.dark .circle-icon img.vh-icon-gray400,
[data-theme="dark"] .circle-icon img.vh-icon-gray400 {
  filter: brightness(0) saturate(100%) invert(82%) sepia(8%) saturate(300%) hue-rotate(160deg) brightness(100%) contrast(88%) !important;
}

body.dark .circle-icon img.vh-icon-success,
[data-theme="dark"] .circle-icon img.vh-icon-success {
  filter: brightness(0) saturate(100%) invert(72%) sepia(40%) saturate(600%) hue-rotate(131deg) brightness(98%) contrast(85%) !important;
}

body.dark .circle-icon img.vh-icon-warning,
body.dark .circle-icon img.vh-icon-error,
[data-theme="dark"] .circle-icon img.vh-icon-warning,
[data-theme="dark"] .circle-icon img.vh-icon-error {
  filter: brightness(0) saturate(100%) invert(78%) sepia(50%) saturate(500%) hue-rotate(329deg) brightness(102%) contrast(90%) !important;
}

body.dark .circle-icon img.vh-icon-danger,
[data-theme="dark"] .circle-icon img.vh-icon-danger {
  filter: brightness(0) saturate(100%) invert(52%) sepia(75%) saturate(900%) hue-rotate(314deg) brightness(102%) contrast(95%) !important;
}

a.btn,
button.btn,
.jconfirm .jconfirm-box .jconfirm-buttons button {
  display: inline-flex;
  align-items: center;
}

.btn i,
.btn .fa {
  margin-right: 5px;
}

.input-group-prepend .btn-input-group {
  font-size: 12px !important;
  height: 24px !important;
  padding: 4px 12px !important;
}

.input-group-prepend .btn-input-group-interior {
  font-size: 12px !important;
  height: 32px !important;
  padding: 4px 12px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

@media (max-width: 768px) {
  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }
}

.form-wrap.form-builder .frmb .field-actions {
  z-index: 99;
}

.form-wrap.form-builder .frmb .field-actions .btn {
  padding: 0 6px !important;
  height: 32px !important;
  border-width: 1px !important;
}

.form-wrap.form-builder .frmb .field-actions .btn:before {
  margin-left: 2.8px !important;
  margin-right: 2.8px !important;
}

td .dropdown-menu-publish {
  margin-left: -8px;
}

.dropdown-menu-publish, .dropdown-menu:not(.bootstrap-timepicker-widget) {
  width: 240px;
  padding: 8px !important;
  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  border: 0 !important;
  margin-bottom: 20px;
  top: 0 !important;
}

.dropdown-menu-publish::after, .dropdown-menu:not(.bootstrap-timepicker-widget)::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  top: -5px;
  right: 10px;
  background-color: var(--white);
  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -webkit-transform: rotate(45deg);


  -moz-transform: rotate(45deg);


  -ms-transform: rotate(45deg);


  transform: rotate(45deg);
  z-index: -1;
}

.dropdown-menu-publish li, .dropdown-menu:not(.bootstrap-timepicker-widget) li {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  padding: 0;
}

.dropdown-menu-publish li a, .dropdown-menu:not(.bootstrap-timepicker-widget) li a {
  height: 30px;
  padding: 8px 8.5px;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: var(--black);
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.dropdown-menu-publish li a:hover, .dropdown-menu:not(.bootstrap-timepicker-widget) li a:hover {
  text-decoration: none;
}

.dropdown-menu-publish li a svg, .dropdown-menu:not(.bootstrap-timepicker-widget) li a svg {
  margin-right: 8px;
}

.dropdown-menu-publish li a:hover, .dropdown-menu:not(.bootstrap-timepicker-widget) li a:hover {
  background: var(--gray-25);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}

.dropdown-menu-publish li a:hover .svg-icon, .dropdown-menu:not(.bootstrap-timepicker-widget) li a:hover .svg-icon {
  fill: var(--primary) !important;
}

.dropdown-menu-publish li .svg-icon, .dropdown-menu:not(.bootstrap-timepicker-widget) li .svg-icon {
  fill: var(--gray-500);
}
/* End import from ./components/common.css */
/* Imported from ./components/tooltips.css */
/* ==========================================================================
   TOOLTIPS

   Bootstrap-tooltip base rules (transition/fade timing) live in common.css
   already; this file holds the compact tooltip SIZE variant, `.vh-tooltip-compact`.

   Promoted out of the design system on 2026-09-04. It previously existed only
   as demo CSS inside `web/style/sections/_tooltips.blade.php` (as
   `.ds-tooltip-compact`), scoped to the style guide and unreachable from any
   real page. That demo's own note said the product ships a single tooltip
   TRIGGER (`tooltip_custom`) -- true, and unrelated to this: trigger and
   size are independent attributes (`data-toggle` vs `data-type`), so a
   product-level small SIZE was simply missing, not blocked by the
   single-trigger rule. This is that size, promoted so any `tooltip_custom`
   trigger anywhere in the app can opt in via `data-type="vh-tooltip-compact"`.
   The demo file now references this class instead of defining its own copy.
   ========================================================================== */

.tooltip.vh-tooltip-compact {
  opacity: 1;
}

.tooltip.vh-tooltip-compact.fade,
.tooltip.vh-tooltip-compact.show {
  -webkit-transition: opacity 0s !important;

  -moz-transition: opacity 0s !important;

  -ms-transition: opacity 0s !important;

  -webkit-transition: opacity 0s !important;


  -moz-transition: opacity 0s !important;


  -ms-transition: opacity 0s !important;


  transition: opacity 0s !important;
}

/* Compounded onto `.tooltip` (every Bootstrap tooltip already carries that
   class) so this out-specifies the standard tooltip's own `.tooltip
   .tooltip-inner` rule (custom.css) -- same specificity as
   `.vh-tooltip-compact .tooltip-inner` alone, so without this the two rules
   tied and source order silently picked the standard size regardless of
   which class was actually applied. Caught by measuring computed styles on
   a real trigger, not just eyeballing the demo (short demo text made the
   un-overridden standard size look compact by accident). */
.tooltip.vh-tooltip-compact .tooltip-inner {
  background-color: var(--gray-800, #21343C);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  /* Was 8px 10px, which read cramped. The standard tooltip is 12px 16px,
     so this sits a step below it and stays visibly compact. 10px is a
     deliberate 2px step off the 8px convention: 12px vertical would
     match the standard size outright and lose the distinction (Paul,
     2026-08-05, carried over from the pre-promotion demo CSS). */
  padding: 10px 12px;
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  border-radius: 8px;
  max-width: 220px;
  text-align: left;
}

.tooltip.vh-tooltip-compact .tooltip-inner a {
  color: var(--link-on-dark, #BDEBFF) !important;
}

.tooltip.vh-tooltip-compact .tooltip-inner a:hover {
  color: var(--link-on-dark, #BDEBFF) !important;
  text-decoration: underline;
}

/* `.vh-tooltip-tight` -- standard-size 14px text at the compact variant's
   tighter padding/line-height/max-width. For short, single-word-ish labels
   (e.g. the collapsed rail nav) where compact's 12px text reads too small
   but the standard tooltip's roomier 12px 16px box is more room than the
   content needs. Not a replacement for either: standard stays the default
   everywhere text volume varies (a long multi-line tooltip renders visibly
   denser under this tighter padding -- fine for one short label, not for
   prose), and compact stays the dense-table/tight-UI 12px size. Same
   specificity pattern as `.vh-tooltip-compact` above (3 classes:
   `.tooltip.vh-tooltip-tight .tooltip-inner`) for the same reason documented
   in the comment above -- custom.css's standard `.tooltip .tooltip-inner`
   rule loads after this file, so equal specificity would let it silently
   win. */

.tooltip.vh-tooltip-tight {
  opacity: 1;
}

.tooltip.vh-tooltip-tight.fade,
.tooltip.vh-tooltip-tight.show {
  -webkit-transition: opacity 0s !important;

  -moz-transition: opacity 0s !important;

  -ms-transition: opacity 0s !important;

  -webkit-transition: opacity 0s !important;


  -moz-transition: opacity 0s !important;


  -ms-transition: opacity 0s !important;


  transition: opacity 0s !important;
}

.tooltip.vh-tooltip-tight .tooltip-inner {
  background-color: var(--gray-800, #21343C);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  padding: 10px 12px;
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  border-radius: 8px;
  max-width: 220px;
  text-align: left;
}

.tooltip.vh-tooltip-tight .tooltip-inner a {
  color: var(--link-on-dark, #BDEBFF) !important;
}

.tooltip.vh-tooltip-tight .tooltip-inner a:hover {
  color: var(--link-on-dark, #BDEBFF) !important;
  text-decoration: underline;
}

.tooltip.vh-tooltip-compact.bs-tooltip-right .arrow::before {
  border-right-color: var(--gray-800, #21343C);
  left: 2.5px;
}

.tooltip.vh-tooltip-compact.bs-tooltip-left .arrow::before {
  border-left-color: var(--gray-800, #21343C);
}

.tooltip.vh-tooltip-compact.bs-tooltip-top .arrow::before {
  border-top-color: var(--gray-800, #21343C);
}

.tooltip.vh-tooltip-compact.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--gray-800, #21343C);
}

/* The trigger icon tints to the primary color while its tooltip is open
   (shown via aria-describedby once Bootstrap wires the popup) or actively
   pressed -- was scoped to the style guide's #tooltips section only; now
   general so it applies wherever a compact-tooltip trigger is used. */
[data-type="vh-tooltip-compact"][aria-describedby] img,
[data-type="vh-tooltip-compact"]:active img {
  filter: var(--primary-filter);
}

/* End import from ./components/tooltips.css */
/* Imported from ./components/datatables.css */
/* DataTables Styles - Complete Conversion from SCSS */

/* ==========================================================================
   BASE DATA TABLE STYLES
   ========================================================================== */

.dataTables_wrapper table.ionsunDataTable tbody tr td {
  height: 20px !important;
}

/* Text rows reserve the shared row height, including the 22px emphasized-text line and hairline.
   The three control-heavy legacy tables retain their content-sized cells. */
body:not(:has(.vh-legacy-content-sized-rows)) .dataTables_wrapper table.ionsunDataTable tbody tr td {
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;


  -moz-box-sizing: border-box;


  box-sizing: border-box;
  height: var(--vh-row-h-default, 39px) !important;
  padding-top: calc((var(--vh-row-h-default, 39px) - 22px - 1px) / 2);
  padding-bottom: calc((var(--vh-row-h-default, 39px) - 22px - 1px) / 2);
}

/* Align inline action images without a text-baseline descender below the icon. */
body:not(:has(.vh-legacy-content-sized-rows)) .dataTables_wrapper table.ionsunDataTable .collection-options img {
  vertical-align: top;
}

.collection-options-td {
  min-width: 100px;
}

#ionsunDataTable th {
  text-transform: capitalize !important;
  font-size: 14px;
  letter-spacing: 0.44px;
  border-top: none;
  color: var(--gray-500);
}

.dataTable th, 
.dataTable td {
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 19px !important;
  max-height: 19px !important;
}

.dataTable th:not(td) {
  /* Header padding preserves the 33px band above the body rows. */
  padding: 7px 8px 7px 8px;
}

.dataTable td:not(th) {
  padding: 10px 8px 10px 8px;
}

.dataTable th a:not(.btn), 
.dataTable td a:not(.btn) {
  text-decoration: underline;
}

.dataTable td:not(th):not(:first-child):not(:nth-child(2)) a:not(.btn):hover {
  text-decoration: underline;
}

.dataTable th.dtr-control, 
.dataTable td.dtr-control {
  max-width: 18px !important;
  width: 18px !important;
}

#ionsunDataTable td:last-child {
  min-width: 100px;
}

.show-in-data-section, 
.data-section-hide-show {
  cursor: pointer;
}

#ionsunDataTable tr:hover {
  cursor: pointer;
}

.dataTables_wrapper table.ionsunDataTable tbody tr:hover .item-name {
  text-decoration: none !important;
}

/* ==========================================================================
   DATA TABLES WRAPPER STYLES
   ========================================================================== */

.dataTables_wrapper .bottom {
  background-color: var(--white);
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1.5px solid var(--gray-150);
  height: 72px;
}

.dataTables_wrapper .bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 0px;
  align-items: center;
  height: 54px;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  color: var(--gray-500);
  border: none;
  bottom: -5px;
  padding: 0 16px;
}

.dataTables_wrapper .bottom label, 
.dataTables_wrapper .bottom a,
.dataTables_wrapper .bottom span {
  font-weight: 600 !important;
  font-size: 14px;
  line-height: 19px;
  color: var(--gray-500);
}

.dataTables_wrapper .bottom select.custom-select {
  color: var(--gray-500);
  font-weight: 700 !important;
}

.dataTables_wrapper .bottom .page-link:focus-within {
  background-color: transparent !important;
}

.dataTables_wrapper .bottom .page-link:focus-within,
.dataTables_wrapper .bottom .page-link:focus {
  background-color: color-mix(in srgb, var(--primary) 94%, white) !important;
}

.dataTables_wrapper .bottom label {
  margin: 0;
}

.dataTables_wrapper .bottom::after {
  content: '';
  width: 122%;
  border-top: 1.5px solid var(--gray-150);
  position: absolute;
  left: -5%;
  z-index: 1;
  top: 0;
}

.dataTables_wrapper .pagination {
  display: inline-flex;
  align-items: center;
}

.dataTables_wrapper .paginate_button.page-item .page-link {
  -webkit-border-radius: 50% !important;

  -moz-border-radius: 50% !important;

  -webkit-border-radius: 50% !important;


  -moz-border-radius: 50% !important;


  border-radius: 50% !important;
}

.dataTables_wrapper .paginate_button.page-item .page-link:hover {
  background-color: color-mix(in srgb, var(--primary) 94%, white) !important;
  color: var(--gray-500) !important;
}

.dataTables_wrapper .paginate_button.page-item.next.disabled,
.dataTables_wrapper .paginate_button.page-item.previous.disabled {
  color: var(--gray-300) !important;
}

.dataTables_wrapper .paginate_button.page-item.next .page-link,
.dataTables_wrapper .paginate_button.page-item.previous .page-link {
  -webkit-border-radius: 3px !important;

  -moz-border-radius: 3px !important;

  -webkit-border-radius: 3px !important;


  -moz-border-radius: 3px !important;


  border-radius: 3px !important;
}

.dataTables_wrapper .paginate_button.previous .page-link::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url(/assets/icons/chevron-left.svg) no-repeat center / contain;
  mask: url(/assets/icons/chevron-left.svg) no-repeat center / contain;
}

.dataTables_wrapper .paginate_button.next .page-link::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url(/assets/icons/chevron-right.svg) no-repeat center / contain;
  mask: url(/assets/icons/chevron-right.svg) no-repeat center / contain;
}

.dataTables_wrapper .paginate_button.page-item.active .page-link {
  background-color: var(--white);
  border: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  font-weight: bold !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination {
  font-size: 14px;
  justify-content: center !important;
}

.dataTables_wrapper .dtWrapperFooter {
  padding-top: 30px;
}

.dataTables_wrapper .dtWrapperFooter .dtCustomArea {
  display: flex;
  justify-content: flex-end !important;
}

.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollHeadInner {
  width: 100% !important;
}

.dataTables_wrapper .dataTables_scrollBody > table {
  margin-bottom: 30px !important;
}

.dataTables_wrapper .dataTables_scrollBody .ionsunDataTable thead tr th {
  height: 0 !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 14px;
}

.dataTables_wrapper .dataTables_info span {
  font-weight: 600;
}

.dataTables_wrapper .dataTables_length label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dataTables_wrapper .dataTables_length select.custom-select {
  height: 24px !important;
  border: 2px solid var(--gray-300) !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  padding: 0 !important;
  margin: 0;
  background: var(--white);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
}

.dataTables_wrapper .dataTables_length select.custom-select:focus,
.dataTables_wrapper .dataTables_length select.custom-select:active {
  border-color: var(--gray-300) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

div.dataTables_wrapper div.dataTables_info {
  padding: 0;
}

/* ==========================================================================
   DATA TABLES WRAPPER - IONSUNDATATABLE STYLES
   ========================================================================== */

.dataTables_wrapper table.ionsunDataTable tr .vahara-custom-checkbox {
  position: relative;
  z-index: 99;
}

.dataTables_wrapper table.ionsunDataTable tr .collection-options a {
  text-decoration: none !important;
  opacity: 0;
  margin-left: 8px;
  margin-right: 8px;
}

.dataTables_wrapper table.ionsunDataTable tr a {
  color: var(--black);
  text-decoration: none;
  font-weight: normal;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.01em;
}

.dataTables_wrapper table.ionsunDataTable tr .svg-icon:hover {
  fill: var(--black);
}

.dataTables_wrapper table.ionsunDataTable tr .table-svg-icon {
  cursor: pointer;
}

.dataTables_wrapper table.ionsunDataTable tr .table-svg-icon img:hover {
  filter: brightness(0.2);
}

.dataTables_wrapper table.ionsunDataTable tr .selected-row-div {
  background-color: var(--secondary);
  font-weight: bold;
  font-size: 14px;
  line-height: 19px;
  border: 5px solid var(--secondary);
  padding-right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dataTables_wrapper table.ionsunDataTable tr .selected-row-div .float-right a {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.dataTables_wrapper table.ionsunDataTable tr .selected-row-div .float-right a:hover {
  background-color: #ffffff33;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
}

.dataTables_wrapper table.ionsunDataTable tbody tr:hover {
  background-color: rgb(242.9, 247.6, 247.5);
  cursor: pointer;
}

.dataTables_wrapper table.ionsunDataTable tbody tr:hover .collection-options a {
  opacity: 1;
}

.dataTables_wrapper table.ionsunDataTable tbody tr:hover .item-name {
  text-decoration: underline;
}

.dataTables_wrapper table.ionsunDataTable tbody tr td {
  font-weight: normal;
  font-size: 14px;
  line-height: 19px;
  height: 21px;
}

.dataTables_wrapper table.ionsunDataTable tbody tr td:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  padding-right: 32px;
}

.dataTables_wrapper table.ionsunDataTable th {
  text-transform: capitalize !important;
  border-top: none;
  /* The React full-page table is the canonical treatment. Its header uses
     --muted-foreground at 600 with no extra tracking; these headers match. */
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
}

.dataTables_wrapper table.ionsunDataTable th:first-child::after,
.dataTables_wrapper table.ionsunDataTable th:first-child::before {
  content: none;
}

.dataTables_wrapper table.ionsunDataTable td {
  color: var(--black);
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--gray-50);
}

.dataTables_wrapper table.ionsunDataTable td > a:not(.btn) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dataTables_wrapper table.ionsunDataTable td:last-child {
  min-width: 100px;
}

.dataTables_wrapper table.ionsunDataTable td:first-child,
.dataTables_wrapper table.ionsunDataTable th:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  /* React's edge padding is 18px, but its first *text* column sits at 62px because a
     46px checkbox column precedes it. These tables have no checkbox column, so 18px puts
     their text much further left than React's. 24px sits on the 8px scale between the two. */
  padding-left: 24px;
}

.dataTables_wrapper table.ionsunDataTable td.dtr-control,
.dataTables_wrapper table.ionsunDataTable th.dtr-control,
.dataTables_wrapper table.ionsunDataTable td.sorting_disabled,
.dataTables_wrapper table.ionsunDataTable th.sorting_disabled {
  padding-right: 0;
}

.dataTables_wrapper table.ionsunDataTable td:last-child,
.dataTables_wrapper table.ionsunDataTable th:last-child {
  padding-right: 24px;
}

.dataTables_wrapper table.ionsunDataTable td .project-desc-section.active,
.dataTables_wrapper table.ionsunDataTable th .project-desc-section.active {
  display: block;
}

.dataTables_wrapper table.ionsunDataTable .vahara-checkbox label {
  font-size: 16px;
  line-height: 16px;
}

.dataTables_wrapper table.ionsunDataTable .vahara-checkbox label::after {
  width: 16px;
  height: 16px;
  padding-left: 1px;
  padding-top: 1px;
  font-size: 14px;
}

.dataTables_wrapper table.ionsunDataTable .vahara-checkbox label::before {
  width: 16px;
  height: 16px;
}

.dataTables_wrapper table.ionsunDataTable .vahara-checkbox input[type="checkbox"]:checked:hover ~ label::after {
  width: 16px;
  height: 16px;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
}

.dataTables_wrapper table.ionsunDataTable .vahara-checkbox label:focus::before,
.dataTables_wrapper table.ionsunDataTable .vahara-radio label:focus::before,
.dataTables_wrapper table.ionsunDataTable .vahara-checkbox label:hover::before,
.dataTables_wrapper table.ionsunDataTable .vahara-radio input[type="radio"]:hover + label {
  border: 2px solid var(--gray-500);
}

.dataTables_wrapper table.ionsunDataTable .vahara-table-checkbox.vahara-checkbox-primary input:checked + div::before,
.dataTables_wrapper table.ionsunDataTable .vahara-checkbox-primary input[type="checkbox"]:checked:hover ~ div::after,
.dataTables_wrapper table.ionsunDataTable .vahara-radio-primary input[type="radio"]:checked:hover ~ label::after,
.dataTables_wrapper table.ionsunDataTable .vahara-checkbox-primary input[type="checkbox"]:checked ~ div::before {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
}

/* ==========================================================================
   IONSUNDATATABLE WRAPPER
   ========================================================================== */

#ionsunDataTable_wrapper {
  left: 316px; /* 60px rail + 256px submenu */
  position: fixed;
  /* /account/api-keys has no sticky header and uses this fallback. */
  top: var(--vh-legacy-table-top, 113px);
  bottom: 76px;
  right: 0;
}

body.account-layout #ionsunDataTable_wrapper {
  left: var(--sidebar-total-width);
}

/* Full-page legacy tables reserve the actual header and footer geometry.
   The measured body height overrides DataTables' viewport-based scrollY. */
#ionsunDataTable_wrapper.vh-legacy-viewport-table {
  top: calc(var(--vh-legacy-table-top, 113px) + var(--vh-legacy-table-gap, 0px));
  height: auto;
}

.vh-legacy-project-manager {
  --vh-legacy-table-gap: calc(var(--vh-legacy-filter-height, var(--field-height)) + var(--space-8));
}

.vh-legacy-project-invoices {
  --vh-legacy-table-gap: calc(var(--vh-legacy-filter-height, var(--field-height)) + var(--space-8) + var(--space-5));
}

#ionsunDataTable_wrapper.vh-legacy-viewport-table .dataTables_scrollBody,
#ionsunDataTable_wrapper.vh-legacy-viewport-table > .vh-legacy-table-scroll {
  height: var(--vh-legacy-scroll-height) !important;
  max-height: var(--vh-legacy-scroll-height) !important;
}

/* The older Bootstrap DOM on All Projects has no .bottom or scrollBody. */
#ionsunDataTable_wrapper.vh-legacy-viewport-table > .row:not(.vh-legacy-table-scroll) {
  height: auto;
}

#ionsunDataTable_wrapper.vh-legacy-viewport-table > .vh-legacy-table-scroll {
  overflow-y: auto;
}

#ionsunDataTable_wrapper.vh-legacy-viewport-table > .vh-legacy-table-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

#ionsunDataTable_wrapper > .vh-legacy-table-footer .dataTables_paginate {
  width: max-content;
  margin-left: auto;
}

#ionsunDataTable_wrapper .dataTables_scrollBody .ionsunDataTable:first-child thead::after,
#ionsunDataTable_wrapper .collection-list-table thead::after {
  border: none;
}

#ionsunDataTable_wrapper .dataTables_scrollHead::after {
  content: '';
  width: 122%;
  border-bottom: 1.5px solid var(--gray-50);
  position: absolute;
  left: -5%;
  z-index: 1;
  bottom: 0;
}

/* ==========================================================================
   DATA TABLE BASE STYLES
   ========================================================================== */

table.dataTable {
  table-layout: fixed;
  margin-top: 2px !important;
}

table.dataTable {
  margin-top: 3px !important;
}

table#ionsunDataTable {
  table-layout: fixed;
}

.dataTable {
  margin-top: 2px !important;
}

.dataTable.ionsunDataTable thead,
.dataTable.collection-list-table thead {
}

.dataTable .btn-datatable-action {
  margin-right: 10px;
}

.dataTables_scrollHead {
  width: 100% !important;
}

/* ==========================================================================
   DATA TABLES - NO-FOOTER STYLES
   ========================================================================== */

table.dataTable.no-footer {
  border-bottom: none;
}

.dataTables_wrapper.dt-bootstrap4.no-footer {
  /* Additional styles for no-footer wrapper */
}

.dataTables_wrapper.dt-bootstrap4 table.no-footer {
  border-bottom: none;
}

/* ==========================================================================
   DATA TABLE SORTING STYLES
   ========================================================================== */

.dataTables_wrapper .vh-legacy-column-label {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 11px - var(--space-1));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* One trailing glyph for both sort directions; no leading/right-anchored twin. */
.dataTables_wrapper table.dataTable > thead .sorting::before,
.dataTables_wrapper table.dataTable > thead .sorting_asc::before,
.dataTables_wrapper table.dataTable > thead .sorting_desc::before,
.dataTables_wrapper table.dataTable > thead .sorting_asc_disabled::before,
.dataTables_wrapper table.dataTable > thead .sorting_desc_disabled::before {
  display: none;
}

.dataTables_wrapper table.dataTable > thead .sorting::after,
.dataTables_wrapper table.dataTable > thead .sorting_asc::after,
.dataTables_wrapper table.dataTable > thead .sorting_desc::after,
.dataTables_wrapper table.dataTable > thead .sorting_asc_disabled::after,
.dataTables_wrapper table.dataTable > thead .sorting_desc_disabled::after {
  position: static;
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-1);
  content: "" !important;
  /* Painted with currentColor via a mask rather than a background image plus a filter
     token. --link-accent is computed from --accent, so a fixed filter cannot track it --
     and this way the arrow follows whatever colour the header is, for free. Same
     technique as .vh-sort-arrow in the React table. */
  background-color: currentColor;
  -webkit-mask: url("/assets/icons/arrow-down.svg") center / contain no-repeat;
  mask: url("/assets/icons/arrow-down.svg") center / contain no-repeat;
  opacity: 0 !important;
  width: 11px;
  height: 11px;

}

.dataTables_wrapper table.dataTable > thead .sorting_asc,
.dataTables_wrapper table.dataTable > thead .sorting_desc {
  /* --link-accent (accent - 12% L), matching the React table. Keeps the
     accent hue so it tracks a customer's theme, but dark enough to read. */
  color: var(--link-accent);
}

.dataTables_wrapper table.dataTable > thead .sorting_asc::after,
.dataTables_wrapper table.dataTable > thead .sorting_desc::after {
  /* colour comes from currentColor on the th -- no filter token needed */
  opacity: 1 !important;
}

.dataTables_wrapper table.dataTable > thead .sorting_asc::after {
  -webkit-transform: rotate(180deg);

  -moz-transform: rotate(180deg);

  -ms-transform: rotate(180deg);

  -webkit-transform: rotate(180deg);


  -moz-transform: rotate(180deg);


  -ms-transform: rotate(180deg);


  transform: rotate(180deg);
}

/* DataTables keeps a zero-height sizing header in the scrolling body. */
.dataTables_wrapper .dataTables_scrollBody table.dataTable > thead th::after {
  display: none;
}

/* ==========================================================================
   ITEM SELECTION PRIMARY
   ========================================================================== */

.item-selection-primary {
  background-color: var(--secondary);
  font-weight: bold;
  font-size: 14px;
  line-height: 19px;
  border: 5px solid var(--secondary);
  padding-right: 12px;
}

.item-selection-primary .float-right a {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 4px 10px;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
}

.item-selection-primary .float-right a:hover {
  background-color: #ffffff33;
}

.item-selection-primary .float-right a:focus {
  background-color: var(--white);
  color: var(--gray-800) !important;
}

.item-selection-primary .float-right a:active {
  background-color: var(--white);
  color: var(--gray-800) !important;
}

/* ==========================================================================
   POPUP TABLE HOVER
   ========================================================================== */

.popup-table-hover {
  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
  min-width: 207px;
  left: -90px !important;
  padding: 4px;
}

.popup-table-hover .arrow {
  display: none !important;
}

.popup-table-hover ul {
  margin-bottom: 0;
}

/* ==========================================================================
   VAHARA TABLE CHECKBOX
   ========================================================================== */

.vahara-table-checkbox {
  cursor: pointer;
}

.vahara-table-checkbox label {
  cursor: pointer;
}

.vahara-table-checkbox input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.vahara-table-checkbox input:checked + div {
  position: relative;
}

.vahara-table-checkbox input:checked + div::before {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.vahara-table-checkbox input:checked + div::after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url('/assets/icons/white/check.svg') left center no-repeat;
  background-size: 100%;
}

.vahara-table-checkbox.vahara-checkbox-primary div::before {
  background-color: var(--white);
}

.vahara-table-checkbox.vahara-checkbox-primary input:checked + div::before {
  background-color: var(--primary);
  border-color: var(--primary);
}

.vahara-table-checkbox.vahara-checkbox-primary input.checked + div::before {
  background-color: var(--primary);
  border-color: var(--primary);
}

.vahara-table-checkbox.vahara-checkbox-primary input.checked + div::after {
  content: '';
  display: block;
  position: absolute;
  width: 6px;
  height: 14px;
  border: solid var(--white);
  border-width: 0 3px 0 0;
  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  -webkit-transform: rotate(90deg);


  -moz-transform: rotate(90deg);


  -ms-transform: rotate(90deg);


  transform: rotate(90deg);
  margin-top: -19px;
  margin-left: 7px;
}

.vahara-table-checkbox div::before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid var(--gray-300);
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 16px;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
}

/* ==========================================================================
   VAHARA TABLE RADIO
   ========================================================================== */

.vahara-table-radio input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.vahara-table-radio input:checked + div::before {
  background-color: var(--white);
  border-color: var(--secondary);
}

.vahara-table-radio input:checked + div::after {
  content: '';
  display: block;
  position: absolute;
  border: solid var(--secondary);
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  border-radius: 50%;
  margin-top: -16px;
  margin-left: 3px;
  width: 13px;
  height: 13px;
  background: var(--secondary);
}

.vahara-table-radio div::before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid var(--gray-500);
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 12px;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  border-radius: 50%;
}

/* ==========================================================================
   POPOVER TABLE LABEL
   ========================================================================== */

.popover-table-label {
  font-weight: bold;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* ==========================================================================
   COLUMN SHOW/HIDE LISTS
   ========================================================================== */

.column-show-ul li {
  margin-bottom: 2px;
  padding: 7px 8px;
}

.column-show-ul li a {
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--black);
}

.column-show-ul li .svg-icon {
  float: right;
}

.column-show-ul li:hover {
  background: #CEDEDC;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);
}

.column-show-ul li:hover a {
  text-decoration: none;
}

.column-hide-ul li {
  margin-bottom: 2px;
  padding: 7px 8px;
}

.column-hide-ul li a {
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--black);
}

.column-hide-ul li .svg-icon {
  float: right;
}

.column-hide-ul li:hover {
  background-color: color-mix(in srgb, var(--secondary) 95%, white);
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
}

.column-hide-ul li:hover a {
  text-decoration: none;
}

.column-hide-ul li:hover .svg-icon {
  fill: var(--black);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.h-shadow {
  -webkit-box-shadow: 0px 1px 13px 0px #8080806b;

  -moz-box-shadow: 0px 1px 13px 0px #8080806b;

  -webkit-box-shadow: 0px 1px 13px 0px #8080806b;


  -moz-box-shadow: 0px 1px 13px 0px #8080806b;


  box-shadow: 0px 1px 13px 0px #8080806b;
  z-index: 9;
}

.vh-table-filter-icon {
  width: 20px;
  height: 20px;
}

.checkbox-col {
  max-width: 16px;
}

.checkbox-col::before,
td:first-child.dtr-control::before {
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.data-table-tooltip {
  -webkit-transition: all 0.4s 0s ease !important;

  -moz-transition: all 0.4s 0s ease !important;

  -ms-transition: all 0.4s 0s ease !important;

  -webkit-transition: all 0.4s 0s ease !important;


  -moz-transition: all 0.4s 0s ease !important;


  -ms-transition: all 0.4s 0s ease !important;


  transition: all 0.4s 0s ease !important;
}

.opacity-1 {
  opacity: 1 !important;
}

.dataTables_processing {
  background-color: transparent;
}

.dataTables_processing .vhSystemLoaderData {
  background-color: var(--white);
  border: none !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
}

table.dataTable thead th,
table.dataTable tbody th,
table.dataTable tbody td {
  white-space: nowrap;
}

/* ==========================================================================
   REACT DATA TABLE (rdt_) — row link & sort header overrides
   ========================================================================== */

/* Table row links should use foreground text color, not --link */
#main-wrapper .rdt_TableRow a,
#main-wrapper .rdt_TableRow a:visited {
  color: var(--foreground);
  text-decoration: none;
}

/* Sorted column header — use accent token instead of hardcoded hex */
.rdt_TableHeadRow .rdt_TableCol_Sortable[aria-sort="ascending"],
.rdt_TableHeadRow .rdt_TableCol_Sortable[aria-sort="descending"] {
  color: var(--accent);
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media (max-width: 992px) {
  #ionsunDataTable_wrapper {
    left: 0 !important;
  }

  #ionsunDataTable_wrapper .dataTables_info {
    display: none;
  }
}

@media (max-width: 900px) {
  #ionsunDataTable_wrapper td:not(.all),
  #ionsunDataTable_wrapper th:not(.all) {
    /* display: none; */
  }
}

@media (max-width: 767px) {
  #ionsunDataTable_wrapper {
    top: 110px !important;
  }

  #ionsunDataTable_wrapper th:not(:last-child):not(:first-child) {
    word-break: normal !important;
    padding-right: 70px;
  }

  #ionsunDataTable_wrapper th:not(:first-child) {
    min-width: 80px !important;
  }
}

@media (max-width: 620px) {
  /* hide other columns for mobile devices excluding first, second and last */
  #ionsunDataTable_wrapper td.all:not(:nth-child(2)):not(:first-child):not(:last-child),
  #ionsunDataTable_wrapper td:not(.all),
  #ionsunDataTable_wrapper th:not(.all),
  #ionsunDataTable_wrapper th.all:not(:nth-child(2)):not(:first-child):not(:last-child) {
    display: none;
  }
}

.pagination .page-item.disabled:not(:first-child):not(:last-child) .page-link {
    padding: 1px 0 0.770em 0;
}

.ionsunDataTable thead th, .collection-list-table thead th, .collection-list-table tbody tr:first-child td {
    border-bottom: none;
    border-top: none;
}

/* =============================================================================
   Pagination — Bootstrap's .page-item/.page-link and DataTables' .paginate_button
   =============================================================================
   The two markups are styled together because they render the same control.
   The rules above scope to .dataTables_wrapper and do not reach the Bootstrap
   pagination that appears outside a DataTable.

   The chevrons are FontAwesome glyphs. The theme's own pagination uses custom
   SVGs instead; these two selectors are the remaining FontAwesome pair and
   should follow suit.
   ========================================================================== */

.page-link:focus,
.content-item-wrapper .paginate_button:focus {
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
  outline: none;
}

.page-item .page-link,
.content-item-wrapper .paginate_button {
  border: none !important;
  -webkit-border-radius: 5000px;

  -moz-border-radius: 5000px;

  -webkit-border-radius: 5000px;


  -moz-border-radius: 5000px;


  border-radius: 5000px;
  padding: 0.385em 0.8em;
  line-height: unset;
  -webkit-transition: background 0.15s ease-in, color 0.15s ease-in;

  -moz-transition: background 0.15s ease-in, color 0.15s ease-in;

  -ms-transition: background 0.15s ease-in, color 0.15s ease-in;

  -webkit-transition: background 0.15s ease-in, color 0.15s ease-in;


  -moz-transition: background 0.15s ease-in, color 0.15s ease-in;


  -ms-transition: background 0.15s ease-in, color 0.15s ease-in;


  transition: background 0.15s ease-in, color 0.15s ease-in;
  margin: 1px;
}

.content-item-wrapper .paginate_button.previous:before,
.page-item:first-child .page-link:before {
  font-family: 'FontAwesome';
  content: "\f104";
  padding-right: 5px;
}

.content-item-wrapper .paginate_button.next:after,
.page-item:last-child .page-link:after {
  font-family: 'FontAwesome';
  content: "\f105";
  padding-left: 5px;
}

/* End import from ./components/datatables.css */
/* Imported from ./components/bulk-selection.css */
/* Bulk Selection Toolbar
   -----------------------
   Single shared definition for the ".vh-bulk-*" classes that make up the
   floating bulk-selection toolbar shown when rows/cards are multi-selected.
   Two distinct markup producers consume these rules:
     - The React DataTable bulk bar (resources/js/components/Custom/BulkSelectionToolbar.js),
       rendered inside the React app's #main-wrapper container.
     - Blade/jQuery pages (e.g. resources/views/web/app/project/index.blade.php)
       that render the same "selected-row-div rounded text-white vh-bulk-selection-toolbar"
       markup by hand, outside of #main-wrapper.
   Selectors that must beat the unrelated `#main-wrapper .selected-row-div` base
   rule (resources/js/components/Styles/vaharaDataTableStyles.css) are duplicated
   with and without the #main-wrapper ancestor so both producers render identically --
   this is not a second copy of the component, only the ancestor context differs.
   Do not add another copy of these rules anywhere else; edit this file only. */

.selected-row-div.vh-bulk-selection-toolbar,
#main-wrapper .selected-row-div.vh-bulk-selection-toolbar {
  /* Base "selected-row-div" look (background/type/border/flex) -- normally
     supplied by the React-only `#main-wrapper .selected-row-div` rule in
     vaharaDataTableStyles.css, which blade pages never load since they have
     no #main-wrapper ancestor. Restated here so the toolbar is self-contained
     and renders identically on both producers; values must stay in sync with
     that base rule if it ever changes. */
  background-color: var(--foreground, #21343C);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  border: 1px solid var(--foreground, #21343C);
  display: flex;
  align-items: center;
  justify-content: space-between;

  position: fixed;
  bottom: 60px;
  min-height: 48px;
  height: 48px;
  margin: 0;
  padding: 8px 12px 8px 16px;
  -webkit-border-radius: 12px !important;

  -moz-border-radius: 12px !important;

  -webkit-border-radius: 12px !important;


  -moz-border-radius: 12px !important;


  border-radius: 12px !important;
  z-index: 1001;
  -webkit-box-shadow: 0 10px 28px oklch(from var(--gray-900) l c h / 0.18);

  -moz-box-shadow: 0 10px 28px oklch(from var(--gray-900) l c h / 0.18);

  -webkit-box-shadow: 0 10px 28px oklch(from var(--gray-900) l c h / 0.18);


  -moz-box-shadow: 0 10px 28px oklch(from var(--gray-900) l c h / 0.18);


  box-shadow: 0 10px 28px oklch(from var(--gray-900) l c h / 0.18);
  -webkit-animation: vh-bulk-toolbar-slide-up 180ms ease-out;

  -moz-animation: vh-bulk-toolbar-slide-up 180ms ease-out;

  -ms-animation: vh-bulk-toolbar-slide-up 180ms ease-out;

  -webkit-animation: vh-bulk-toolbar-slide-up 180ms ease-out;


  -moz-animation: vh-bulk-toolbar-slide-up 180ms ease-out;


  -ms-animation: vh-bulk-toolbar-slide-up 180ms ease-out;


  animation: vh-bulk-toolbar-slide-up 180ms ease-out;
}
body:not(.account-layout) .selected-row-div.vh-bulk-selection-toolbar,
body:not(.account-layout) #main-wrapper .selected-row-div.vh-bulk-selection-toolbar {
  left: calc(var(--sidebar-width, 316px) + 24px);
  width: calc(100% - var(--sidebar-width, 316px) - 48px);
}

body.account-layout .selected-row-div.vh-bulk-selection-toolbar,
body.account-layout #main-wrapper .selected-row-div.vh-bulk-selection-toolbar {
  left: calc(var(--sidebar-total-width) + 24px);
  width: calc(100% - var(--sidebar-total-width) - 48px);
}


.vh-bulk-selection-toolbar .vh-bulk-toolbar-summary {
  min-width: 0;
  gap: 8px;
}
.vh-bulk-selection-toolbar .vh-bulk-toolbar-summary .font-weight-bold {
  line-height: 28px;
}

.vh-bulk-selection-toolbar .vh-bulk-selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  height: 28px;
  padding: 0 12px;
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  border-radius: 8px;
  border: 1px solid oklch(from var(--white) l c h / 0.18);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
}
.vh-bulk-selection-toolbar .vh-bulk-selection-chip:hover {
  text-decoration: none;
}
.vh-bulk-selection-toolbar .vh-bulk-selection-chip:focus,
.vh-bulk-selection-toolbar .vh-bulk-selection-chip:active,
.vh-bulk-selection-toolbar .vh-bulk-selection-chip:focus-visible {
  outline: none;
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
}
.vh-bulk-selection-toolbar .vh-bulk-selection-chip-label {
  line-height: 18px;
}
.vh-bulk-selection-toolbar .vh-bulk-selection-chip-close {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.68;
  -webkit-transition: opacity 140ms ease;

  -moz-transition: opacity 140ms ease;

  -ms-transition: opacity 140ms ease;

  -webkit-transition: opacity 140ms ease;


  -moz-transition: opacity 140ms ease;


  -ms-transition: opacity 140ms ease;


  transition: opacity 140ms ease;
}
.vh-bulk-selection-toolbar .vh-bulk-selection-chip:hover .vh-bulk-selection-chip-close {
  opacity: 1;
}

.vh-bulk-selection-toolbar .vh-bulk-select-all,
.vh-bulk-selection-toolbar .vh-bulk-toolbar-actions .btn.btn-white {
  min-height: 28px;
  height: 28px;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.vh-bulk-selection-toolbar .vh-bulk-toolbar-actions {
  gap: 4px;
}
.vh-bulk-selection-toolbar .vh-bulk-toolbar-actions .btn {
  margin-left: 0 !important;
}

/* React "embedded" table variant (e.g. a bulk bar shown inside an embedded
   Pages table). Only the React app renders `.vh-pages-page.vh-pages-embed`,
   so this stays scoped to #main-wrapper. */
#main-wrapper .vh-pages-page.vh-pages-embed .vh-bulk-selection-toolbar {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  bottom: 56px !important;
}

.vh-bulk-selection-toolbar .vh-bulk-close-button {
  padding: 0;
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  border-radius: 10px;
}

@keyframes vh-bulk-toolbar-slide-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(16px);

    -moz-transform: translateY(16px);

    -ms-transform: translateY(16px);

    -webkit-transform: translateY(16px);


    -moz-transform: translateY(16px);


    -ms-transform: translateY(16px);


    transform: translateY(16px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);

    -moz-transform: translateY(0);

    -ms-transform: translateY(0);

    -webkit-transform: translateY(0);


    -moz-transform: translateY(0);


    -ms-transform: translateY(0);


    transform: translateY(0);
  }
}

@media (max-width: 992px) {
  .selected-row-div.vh-bulk-selection-toolbar,
  #main-wrapper .selected-row-div.vh-bulk-selection-toolbar {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 16px;
  }
}

/* "Inline" placement modifier -- for producers that show the bar IN FLOW,
   above a list, rather than floating over the viewport bottom (e.g. the My
   Projects page). Default/base rules above stay floating; add this class
   alongside .vh-bulk-selection-toolbar to opt in. Placement, shadow and
   entrance all switch together so the three never drift out of sync. */
.selected-row-div.vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline,
#main-wrapper .selected-row-div.vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline {
  position: static;
  left: auto;
  bottom: auto;
  width: 100%;
  margin: 0 0 24px 0;
  -webkit-box-shadow: 0 1px 3px oklch(from var(--gray-900) l c h / 0.08);

  -moz-box-shadow: 0 1px 3px oklch(from var(--gray-900) l c h / 0.08);

  -webkit-box-shadow: 0 1px 3px oklch(from var(--gray-900) l c h / 0.08);


  -moz-box-shadow: 0 1px 3px oklch(from var(--gray-900) l c h / 0.08);


  box-shadow: 0 1px 3px oklch(from var(--gray-900) l c h / 0.08);
  -webkit-animation: vh-bulk-toolbar-pop 160ms ease-out;

  -moz-animation: vh-bulk-toolbar-pop 160ms ease-out;

  -ms-animation: vh-bulk-toolbar-pop 160ms ease-out;

  -webkit-animation: vh-bulk-toolbar-pop 160ms ease-out;


  -moz-animation: vh-bulk-toolbar-pop 160ms ease-out;


  -ms-animation: vh-bulk-toolbar-pop 160ms ease-out;


  animation: vh-bulk-toolbar-pop 160ms ease-out;
}

@keyframes vh-bulk-toolbar-pop {
  from {
    opacity: 0;
    -webkit-transform: scale(0.98);

    -moz-transform: scale(0.98);

    -ms-transform: scale(0.98);

    -webkit-transform: scale(0.98);


    -moz-transform: scale(0.98);


    -ms-transform: scale(0.98);


    transform: scale(0.98);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    -webkit-transform: scale(1);


    -moz-transform: scale(1);


    -ms-transform: scale(1);


    transform: scale(1);
  }
}

@media (max-width: 992px) {
  .selected-row-div.vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline,
  #main-wrapper .selected-row-div.vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline {
    left: auto;
    right: auto;
    width: 100%;
    bottom: auto;
  }
}

/* SimpleTable's own bulk bar (SimpleTable.js) -- a more specific selector
   layered on the shared ".vh-bulk-selection-toolbar--inline" rule above.
   This narrows the bar; the Blade "My Projects" tag bar (the other
   consumer of that modifier) is untouched.

   SimpleTable.js renders this bar AFTER the table's rows (not before), so
   selecting a row grows content height below the rows (pushing the footer
   down, expected and correct) without moving anything above it.

   MARGIN, TWO JOBS. Bottom: the base rule's 24px is sized for the
   full-page "My Projects" tag bar next to a 16px page gutter; this
   card/frame's own `vh-inline-*` system uses `--space-2` (8px) throughout,
   so this narrows to match rather than inheriting a value measured for a
   different context. Left/right: the bar sits inside
   `.vh-inline-card`/`.vh-inline-frame` like any other content and is
   already no wider than a row; matching `--space-2` on left/right insets
   it a further 8px past that, so it visibly reads as sitting WITHIN the
   card's padding box rather than merely fitting inside it. */
.vh-datatable.vh-simple-table > .vh-inline-card > .vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline,
.vh-datatable.vh-simple-table > .vh-inline-frame > .vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline {
  flex: 0 0 auto;
  width: auto;
  margin: 0 var(--space-2, 8px) var(--space-2, 8px) var(--space-2, 8px);
}

/* NARROW VIEWPORT (<=480px, this codebase's own most common narrow-phone
   breakpoint -- billing/main.css and tables.css each use it twice already,
   and vaharaDataTable.css's own ".vh-inline-header-bar" rule uses the
   identical breakpoint and the identical wrap-to-auto-height technique for
   the SAME reason: a fixed-height flex row with real content in it, at a
   width too narrow for that content to fit on one line without it
   overlapping itself.

   CONFIRMED LIVE, not assumed: at 375px the base rule's `height: 48px`
   (not just `min-height`) clips a summary chip whose label wraps to two
   lines plus two action buttons, all fighting for one 48px-tall row.
   Re-confirmed against every placement this bar has had so far -- the
   fixed `height: 48px` fault is a property of the shared base rule, not
   of whichever modifier sits alongside it. Same fix shape as the
   header-bar rule each time. */
@media (max-width: 480px) {
  .vh-datatable.vh-simple-table .vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline {
    height: auto;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: var(--space-2, 8px);
    padding-top: var(--space-2, 8px);
    padding-bottom: var(--space-2, 8px);
  }

  .vh-datatable.vh-simple-table .vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline .vh-bulk-toolbar-summary,
  .vh-datatable.vh-simple-table .vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline .vh-bulk-toolbar-actions {
    flex: 1 1 100%;
    width: 100%;
  }

  .vh-datatable.vh-simple-table .vh-bulk-selection-toolbar.vh-bulk-selection-toolbar--inline .vh-bulk-toolbar-actions {
    flex-wrap: wrap;
    row-gap: var(--space-2, 8px);
    justify-content: flex-start;
  }
}

/* End import from ./components/bulk-selection.css */
/* Imported from ./components/tables.css */
/* ==========================================================================
   PLAIN TABLE — .vh-table

   The canonical treatment for a static or list-rendered table: content laid
   out in columns, with no sorting, filtering, selection or pagination. If it
   needs any of those it is a data table, not this.

   Promoted out of the design system on 2026-08-24 (D2 / M5). It shipped as
   `.ds-basic-table`, defined inside `web/style/tables.blade.php` and used by
   nothing outside the showroom -- 57 occurrences, all demos. "The
   version that we designed, the design system on DSBasicTable, was the look
   and feel that I liked and wanted to start using."

   Every colour in the original was a hardcoded hex. They are tokens here, so
   the pattern follows the theme and works in dark mode:
       #23373F body text   -> --foreground        (also what the data tables use)
       #E2E8EC borders     -> --border            (the standard divider token)
       #F8FAFB header bg   -> --surface-recessed  (a 1/255 shift)
       #5E7077 header text -> --muted-foreground  (also what the data tables use)
       #70848C muted cell  -> --muted-foreground  (was a second, near-identical grey)
   ========================================================================== */

.vh-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  color: var(--foreground);
}

.vh-table th,
.vh-table td {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: var(--card);
}

.vh-table th {
  background: var(--surface-recessed);
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

/* The outer frame. border-collapse is `separate` so the corners can round,
   which means the top and left edges need drawing explicitly. */
.vh-table thead th {
  border-top: 1px solid var(--border);
}

.vh-table tr > *:first-child {
  border-left: 1px solid var(--border);
}

.vh-table thead tr:first-child th:first-child {
  border-top-left-radius: 12px;
}

.vh-table thead tr:first-child th:last-child {
  border-top-right-radius: 12px;
}

.vh-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

.vh-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

/* A secondary cell -- a type, a category, anything subordinate to the row's subject. */
.vh-table .vh-table-muted {
  color: var(--muted-foreground);
}

/* Opt a column out of nowrap and give it a fixed measure, for prose cells. */
.vh-table .vh-table-wrap-column {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  white-space: normal;
}

/* No-wrap variant: every cell truncates with an ellipsis instead of
   wrapping onto a second line. Column widths still follow content (table-
   layout stays auto), so a cell only actually truncates once it's wider
   than 220px -- pair with .vh-table-wrap below so the table scrolls
   horizontally in its own container rather than the page when that pushes
   the table wider than its space. The opposite of .vh-table-wrap-column
   (which opts a prose column INTO wrapping); pick one behaviour per table,
   not both. */
.vh-table-nowrap th,
.vh-table-nowrap td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ==========================================================================
   DENSITY — compact / default / comfortable

   Opt-in row-height presets, added 2026-09-04. Unclassed .vh-table is
   untouched (still the original fixed 14px 16px padding / 50px rows) so
   existing usage elsewhere in the app doesn't shift; add one of these
   classes on the <table> itself to pick a density.

   32 / 39 / 56px is not a new scale -- it's the exact one the React tables
   already use (SimpleTable / VaharaDataTable), read from the same
   --vh-row-h-* custom properties declared once in tokens/tables.css. Padding is derived from that shared token
   via calc() rather than hardcoded, so if the token ever changes this
   follows it: row height = padding-top + padding-bottom + a 14px/21px-
   line-height single line of text (21px) + the row's own 1px bottom
   border, so vertical padding = (target - 22px) / 2. Verified by measuring
   rendered row height, not just computing it: 32 / 39 / 56px exactly.

   Header height is constant across every density (matching that same
   convention on the React side) -- these rules only touch tbody td. */
.vh-table-density-compact tbody td {
  padding-top: calc((var(--vh-row-h-compact, 32px) - 22px) / 2);
  padding-bottom: calc((var(--vh-row-h-compact, 32px) - 22px) / 2);
}

.vh-table-density-default tbody td {
  padding-top: calc((var(--vh-row-h-default, 39px) - 22px) / 2);
  padding-bottom: calc((var(--vh-row-h-default, 39px) - 22px) / 2);
}

.vh-table-density-comfortable tbody td {
  padding-top: calc((var(--vh-row-h-comfortable, 56px) - 22px) / 2);
  padding-bottom: calc((var(--vh-row-h-comfortable, 56px) - 22px) / 2);
}

/* Wide tables scroll inside their own container rather than the page, with a
   persistently visible (not click-or-hover-to-reveal) scrollbar as the cue
   that there is more to see -- an OS-default thin scrollbar auto-hides on
   several platforms until the pointer is over it, which reads as "the table
   is simply cut off" rather than "this scrolls." Both scrollbar-color
   (Firefox) and the WebKit scrollbar pseudo-elements (Chrome/Safari) are
   set so the cue is consistent across engines; either is a no-op where the
   other applies. */
.vh-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.vh-table-wrap::-webkit-scrollbar {
  height: 8px;
}

.vh-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.vh-table-wrap::-webkit-scrollbar-thumb {
  background-color: var(--border);
  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;


  -moz-border-radius: 4px;


  border-radius: 4px;
}

/* End import from ./components/tables.css */

/* Import newly converted components */
/* Imported from ./components/sidebar.css */
/* Sidebar Styles - Complete Conversion from SCSS */

/* `--sidebar-total-width`'s definition, and the sticky header's own use of
   it, now live in page-header.css; `.main-wrapper.with-sidebar` below
   (content-area.css) still reads the same variable for its own padding. */

#sidebar.sidebar-offcanvas:not(.has-submenu) {
  width: 248px !important;
}

.sidebar {
  -webkit-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -webkit-transition: all 300ms ease;


  -moz-transition: all 300ms ease;


  -ms-transition: all 300ms ease;


  transition: all 300ms ease;
  width: 248px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10901;
  padding: 0;
  -webkit-box-shadow: 13px -2px 17px -12px rgba(41, 50, 66, 0.05);

  -moz-box-shadow: 13px -2px 17px -12px rgba(41, 50, 66, 0.05);

  -webkit-box-shadow: 13px -2px 17px -12px rgba(41, 50, 66, 0.05);


  -moz-box-shadow: 13px -2px 17px -12px rgba(41, 50, 66, 0.05);


  box-shadow: 13px -2px 17px -12px rgba(41, 50, 66, 0.05);
}

.sidebar.reveal {
  display: block;
  left: 0 !important;
  -webkit-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -webkit-transition: all 300ms ease;


  -moz-transition: all 300ms ease;


  -ms-transition: all 300ms ease;


  transition: all 300ms ease;
}

.sidebar-menu-container {
  position: relative;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
}

.sidebar-menu-container .la {
  font-size: 20px;
  margin-right: 10px;
  vertical-align: text-bottom;
}

.sidebar-menu-container .nav-brand {
  display: flex;
  width: 248px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 6px 84.5px 6px 14px; /* mark at x=14 like the collapsed rail, so it does not jump on collapse */
  align-items: center;
  flex-shrink: 0;
  margin: 8px 1px 40px 0;
}

.sidebar-menu-container .nav-brand .img-vahara-logo {
  width: 147.5px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.sidebar-menu-container .nav-brand.nav-brand-short {
  width: 60px; /* = the collapsed rail; 32px mark centred with 14px each side */
  padding: 6px 14px;
}

.sidebar-menu-container .nav-brand.nav-brand-short .img-vahara-logo-v {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.sidebar-menu-container ul,
.sidebar-menu-container li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-menu-container a:hover {
  text-decoration: none !important;
}

.sidebar-menu-container label {
  margin-bottom: 0;
}

.sidebar-menu-container .main-menu li a,
.sidebar-menu-container .fixed-bottom-nav-ul li a,
.sidebar-menu-container .sidebar-submenu a,
.sidebar-menu-container ul.sidebar-submenu > li > ul > li,
.sidebar-menu-container .popover-body .account-li,
.sidebar-menu-container .popover-body .help-li {
  background-color: transparent;
  color: var(--gray-500);
}

.sidebar-menu-container .main-menu li a img,
.sidebar-menu-container .fixed-bottom-nav-ul li a img,
.sidebar-menu-container .sidebar-submenu a img,
.sidebar-menu-container ul.sidebar-submenu > li > ul > li img,
.sidebar-menu-container .popover-body .account-li img,
.sidebar-menu-container .popover-body .help-li img {
  filter: var(--gray-500-filter);
}

.sidebar-menu-container .main-menu li a:hover,
.sidebar-menu-container .fixed-bottom-nav-ul li a:not(.sys-mode-on):not(.dev-mode-on):hover,
.sidebar-menu-container .sidebar-submenu a:hover,
.sidebar-menu-container ul.sidebar-submenu > li > ul > li:hover,
.sidebar-menu-container .popover-body .account-li:hover,
.sidebar-menu-container .popover-body .help-li:hover {
  background-color: var(--gray-25) !important;
  color: var(--gray-800) !important;
  text-decoration: none;
}

.sidebar-menu-container .main-menu li a:hover img,
.sidebar-menu-container .fixed-bottom-nav-ul li a:not(.sys-mode-on):not(.dev-mode-on):hover img,
.sidebar-menu-container .sidebar-submenu a:hover img,
.sidebar-menu-container ul.sidebar-submenu > li > ul > li:hover img,
.sidebar-menu-container .popover-body .account-li:hover img,
.sidebar-menu-container .popover-body .help-li:hover img {
  filter: var(--gray-800-filter);
}

.sidebar-menu-container .main-menu li a.active,
.sidebar-menu-container .main-menu li a:focus,
.sidebar-menu-container .main-menu li a:focus-within,
.sidebar-menu-container .sidebar-submenu a.active,
.sidebar-menu-container .sidebar-submenu a:focus-within,
.sidebar-menu-container ul.sidebar-submenu > li > ul > li.active,
.sidebar-menu-container ul.sidebar-submenu > li > ul > li:focus-within {
  background-color: var(--gray-50) !important;
  color: var(--gray-900) !important;
}

.sidebar-menu-container .main-menu li a.active img,
.sidebar-menu-container .main-menu li a:focus img,
.sidebar-menu-container .main-menu li a:focus-within img,
.sidebar-menu-container .sidebar-submenu a.active img,
.sidebar-menu-container .sidebar-submenu a:focus-within img,
.sidebar-menu-container ul.sidebar-submenu > li > ul > li.active img,
.sidebar-menu-container ul.sidebar-submenu > li > ul > li:focus-within img {
  filter: var(--gray-900-filter);
}

/* Rail icons: 20px.
   .icon-m is a shared utility class used throughout the product (modals, data
   tables, submenu flyout, etc.), so it is NOT edited globally here. Scoped to
   the rail (.main-menu / .fixed-bottom-nav-ul) only -- the label box
   (resources/assets/cms/css/left-sidebar.css, 40x40 as of round 2) is
   state-independent and flex-centers the smaller glyph automatically, so this
   does not change rail width or icon position. */
#sidebar .main-menu img.icon-m,
#sidebar .fixed-bottom-nav-ul img.icon-m {
  width: 20px;
  height: 20px;
}

.sidebar-accordion-menu {
  width: 100%;
  background: #4d5158;
  margin: 4em auto;
}

.sidebar-accordion-menu ul {
  display: none;
}

.sidebar-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  -webkit-user-select: none;


  -moz-user-select: none;


  -ms-user-select: none;


  user-select: none;
}

.sidebar-accordion-menu input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.sidebar-accordion-menu label,
.sidebar-accordion-menu a {
  position: relative;
  display: block;
  padding: 15px 15px 15px 20px;
  background: var(--white);
  -webkit-box-shadow: inset 0 -1px var(--gray-200);

  -moz-box-shadow: inset 0 -1px var(--gray-200);

  -webkit-box-shadow: inset 0 -1px var(--gray-200);


  -moz-box-shadow: inset 0 -1px var(--gray-200);


  box-shadow: inset 0 -1px var(--gray-200);
  color: var(--gray-900);
  -webkit-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -webkit-transition: all 300ms ease;


  -moz-transition: all 300ms ease;


  -ms-transition: all 300ms ease;


  transition: all 300ms ease;
}

.sidebar-accordion-menu label:hover,
.sidebar-accordion-menu a:hover {
  background: var(--gray-500);
  -webkit-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -webkit-transition: all 300ms ease;


  -moz-transition: all 300ms ease;


  -ms-transition: all 300ms ease;


  transition: all 300ms ease;
}

.sidebar-accordion-menu label::before {
  font-family: 'LineAwesome', sans-serif;
  content: '\f110';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
  right: 15px;
  -webkit-transform: translateY(-50%) rotate(-90deg);

  -moz-transform: translateY(-50%) rotate(-90deg);

  -ms-transform: translateY(-50%) rotate(-90deg);

  -webkit-transform: translateY(-50%) rotate(-90deg);


  -moz-transform: translateY(-50%) rotate(-90deg);


  -ms-transform: translateY(-50%) rotate(-90deg);


  transform: translateY(-50%) rotate(-90deg);
}

.sidebar-accordion-menu label {
  cursor: pointer;
}

.sidebar-accordion-menu input[type=checkbox]:checked + label::before {
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
}

.sidebar-accordion-menu input[type=checkbox]:checked + label + ul,
.sidebar-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  display: block;
}

.sidebar-accordion-menu ul label,
.sidebar-accordion-menu ul a {
  background: var(--white);
  -webkit-box-shadow: inset 0 -1px var(--gray-500);

  -moz-box-shadow: inset 0 -1px var(--gray-500);

  -webkit-box-shadow: inset 0 -1px var(--gray-500);


  -moz-box-shadow: inset 0 -1px var(--gray-500);


  box-shadow: inset 0 -1px var(--gray-500);
  padding-left: 30px;
}

.sidebar-accordion-menu ul label::before {
  right: 15px;
}

.sidebar-accordion-menu ul ul label,
.sidebar-accordion-menu ul ul a {
  padding-left: 100px;
}

.sidebar-accordion-menu ul ul label::before {
  right: 15px;
}

.sidebar-accordion-menu ul ul ul label,
.sidebar-accordion-menu ul ul ul a {
  padding-left: 118px;
}

.sidebar-accordion-menu ul ul ul label::before {
  right: 15px;
}

.sidebar-accordion-menu > li:last-of-type > label,
.sidebar-accordion-menu > li:last-of-type > a {
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
}

.sidebar-accordion-menu > li > ul > li:last-of-type label,
.sidebar-accordion-menu > li > ul > li:last-of-type a {
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
}

.sidebar-accordion-menu.animated label::before {
  -webkit-transition: -webkit-transform .3s;
  -moz-transition: -moz-transform .3s;
  -webkit-transition: transform 0.3s;

  -moz-transition: transform 0.3s;

  -ms-transition: transform 0.3s;

  -webkit-transition: transform 0.3s;


  -moz-transition: transform 0.3s;


  -ms-transition: transform 0.3s;


  transition: transform 0.3s;
}

.sidebar-toggler {
  position: absolute;
  z-index: 10901;
  left: -1px;
  top: 10px;
  -webkit-border-radius: 0 4px 4px 0;

  -moz-border-radius: 0 4px 4px 0;

  -webkit-border-radius: 0 4px 4px 0;


  -moz-border-radius: 0 4px 4px 0;


  border-radius: 0 4px 4px 0;
  border: 1px solid var(--gray-500);
  padding: 4px 10px;
  background-color: var(--gray-900);
  color: var(--white);
  display: none;
  -webkit-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -webkit-transition: all 300ms ease;


  -moz-transition: all 300ms ease;


  -ms-transition: all 300ms ease;


  transition: all 300ms ease;
}

.sidebar-toggler:hover {
  color: var(--white);
  text-decoration: none;
}

.sidebar-toggler.menu {
  left: 248px;
  -webkit-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -webkit-transition: all 300ms ease;


  -moz-transition: all 300ms ease;


  -ms-transition: all 300ms ease;


  transition: all 300ms ease;
}

.sidebar-toggler.menu .fa,
.sidebar-toggler.menu .la {
  -webkit-transform: rotate(180deg);

  -moz-transform: rotate(180deg);

  -ms-transform: rotate(180deg);

  -webkit-transform: rotate(180deg);


  -moz-transform: rotate(180deg);


  -ms-transform: rotate(180deg);


  transform: rotate(180deg);
}

.sidebar-toggle-overlay {
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: transparent;
  opacity: 0;
  z-index: 9;
  -webkit-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -webkit-transition: all 300ms ease;


  -moz-transition: all 300ms ease;


  -ms-transition: all 300ms ease;


  transition: all 300ms ease;
}

.sidebar-toggle-overlay.on {
  visibility: visible;
  opacity: 0.6;
  -webkit-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -webkit-transition: all 300ms ease;


  -moz-transition: all 300ms ease;


  -ms-transition: all 300ms ease;


  transition: all 300ms ease;
}

.fixed-bottom-nav-ul {
  position: fixed;
  display: inline-block;
  bottom: 0;
  width: 248px;
  margin-bottom: 0;
  background: white;
  border-right: solid 1px var(--sidebar-border);
}

.fixed-bottom-nav-ul a:hover {
  cursor: pointer;
  background: white;
}

.fixed-bottom-nav-ul li a.bottom-label:hover label,
.fixed-bottom-nav-ul li a:focus-within {
  background-color: var(--gray-50);
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
  color: var(--black);
}

.tab-active a {
  background-color: color-mix(in srgb, var(--primary) 10%, white);
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
  color: var(--black);
}

.account-li a,
.help-li a {
  color: var(--black);
}

.popupover-body a,
.sidebar-submenu a {
  text-decoration: none;
}

.sidebar-submenu li ul li.sidebar-text-divider {
  font-weight: 700;
  color: var(--gray-300);
  font-size: 12px !important;
  justify-content: flex-start;
  padding-left: 15px !important;
}

.sidebar-submenu li ul li.sidebar-text-divider:hover {
  pointer-events: none !important;
}

.sidebar-submenu li ul li a {
  padding: 6.5px 12px 7.5px 16px !important;
  height: 32px !important;
}

.sidebar-content {
  position: relative;
}

.sidebar-content .sidebar-submenu .link-visual {
  position: absolute;
  top: 102px;
}

.sidebar-content .sidebar-submenu .link-visual.link-view {
  right: 14px;
}

.sidebar-content .sidebar-submenu .link-visual.link-edit {
  right: 46px;
}

.sidebar-content .sidebar-submenu .link-visual img {
  width: 20px;
  height: 20px;
  margin: 5px;
  filter: brightness(0) saturate(100%) invert(65%) sepia(23%) saturate(147%) hue-rotate(150deg) brightness(100%) contrast(90%);
}

.sidebar-content .sidebar-submenu .link-visual:hover {
  background-color: transparent;
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
}

.sidebar-content .sidebar-submenu .link-visual:hover img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(35%) saturate(877%) hue-rotate(149deg) brightness(93%) contrast(92%);
}

.sidebar-content .nav-brand {
  padding-left: 16px !important;
}

.selected-menu-name {
  padding: 40px 0 0 23px;
  font-size: 18px;
  margin: 0;
  display: block;
  font-weight: 600;
  line-height: 21px;
  color: #1A1A1A;
}

.sidebar-offcanvas:has(.has-submenu) .fixed-bottom-nav-ul li a {
  height: 40px !important;
  width: 40px !important;
  padding: 0 !important;
  margin-bottom: 4px !important;
}

.sidebar-offcanvas:has(.has-submenu) .fixed-bottom-nav-ul li a label {
  width: 40px !important;
  height: 100% !important;
}

.sidebar-offcanvas:has(.has-submenu) .fixed-bottom-nav-ul li a label img {
  height: 24px !important;
}

.sidebar-offcanvas:has(.has-submenu) .fixed-bottom-nav-ul li a label img.dev-beta-icon {
  height: 16px !important;
}

.sidebar-offcanvas:has(.has-submenu) .fixed-bottom-nav-ul li a.btn-toggle-beta-mode img.dev-beta-icon {
  height: 16px !important;
}

.account-li,
.help-li {
  display: flex;
  align-items: center;
  height: 36px !important;
}

.account-li img,
.help-li img {
  width: 20px !important;
  height: 20px !important;
}

.sidebar-divider {
  display: flex;
  height: 1.5px;
  background-color: var(--gray-200);
  border: 0;
}

.sidebar-divider.my-0 {
  margin: 0 -8px 4px -8px !important;
}

.sidebar-text-divider {
  font-size: 10px;
  text-transform: uppercase;
}

.account-li .dark-mode,
.help-li .dark-mode {
  display: none;
}

.account-li:hover .dark-mode,
.help-li:hover .dark-mode {
  display: inline-block;
}

.account-li:hover .light,
.help-li:hover .light {
  display: none;
}

.sys-beta-text {
  color: var(--warning);
}

/* Mobile Styles */
@media (max-width: 992px) {
  .sidebar-toggler {
    display: block;
  }
  
  .main-wrapper {
    padding-left: 30px !important;
  }
  
  .sidebar {
    left: -261px;
  }
}

.selected-menu-name.sidebar_experience {
  display: none;
}

.inner-accord-main-sec .setting-card-header {
  height: 56px;
  border: none;
  -webkit-border-radius: 0;

  -moz-border-radius: 0;

  -webkit-border-radius: 0;


  -moz-border-radius: 0;


  border-radius: 0;
  background-color: transparent;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  color: var(--gray-300);
  text-transform: uppercase;
  display: flex;
  cursor: pointer;
  align-items: center;
}

.inner-accord-main-sec .setting-card-header .dark {
  display: none;
  background-color: transparent;
}

.inner-accord-main-sec .setting-card-header .light {
  display: inline-block;
}

.inner-accord-main-sec .setting-card-header:hover {
  background-color: color-mix(in srgb, var(--primary) 5%, white);
  color: var(--black);
  -webkit-box-shadow: inset 7px -1px 8px -8px rgb(26 26 26 / 15%), inset -6px 0 8px -8px rgb(26 26 26 / 15%);

  -moz-box-shadow: inset 7px -1px 8px -8px rgb(26 26 26 / 15%), inset -6px 0 8px -8px rgb(26 26 26 / 15%);

  -webkit-box-shadow: inset 7px -1px 8px -8px rgb(26 26 26 / 15%), inset -6px 0 8px -8px rgb(26 26 26 / 15%);


  -moz-box-shadow: inset 7px -1px 8px -8px rgb(26 26 26 / 15%), inset -6px 0 8px -8px rgb(26 26 26 / 15%);


  box-shadow: inset 7px -1px 8px -8px rgb(26 26 26 / 15%), inset -6px 0 8px -8px rgb(26 26 26 / 15%);
}

.inner-accord-main-sec .setting-card-header:hover .dark {
  display: inline-block;
}

.inner-accord-main-sec .setting-card-header:hover .light {
  display: none;
}

.inner-accord-main-sec .setting-card-header:hover .vh-icon-dark-hover {
  filter: var(--gray-950-filter);
}

.inner-accord-main-sec .setting-card-header:hover:not(.active) img.vh-icon-dark-hover {
  filter: var(--gray-950-filter);
}

.inner-accord-main-sec .setting-card-header a {
  font-size: 16px;
}

.inner-accord-main-sec .setting-card-header.active a {
  font-size: 16px;
  color: var(--secondary) !important;
  font-weight: 700;
}

.inner-accord-main-sec .setting-card-header.active .dark {
  display: inline-block;
}

.inner-accord-main-sec .setting-card-header.active .light {
  display: none;
}

.inner-accord-main-sec .setting-card-header.active .collapsible-accord-content {
  display: block;
}

.inner-accord-main-sec .setting-card-header.active img.vh-icon-dark-hover {
  filter: var(--gray-50-filter);
}

.inner-accord-main-sec .card.inner-accord-sec {
  border: none;
  -webkit-border-radius: 0;

  -moz-border-radius: 0;

  -webkit-border-radius: 0;


  -moz-border-radius: 0;


  border-radius: 0;
  background-color: transparent;
  position: relative;
  padding: 7px 0;
  border-bottom: 1px solid var(--gray-150);
}

.inner-accord-main-sec .card.inner-accord-sec .link-visual {
  position: absolute;
  top: 16px;
}

.inner-accord-main-sec .card.inner-accord-sec .link-visual img {
  width: 20px;
  height: 20px;
  margin: 5px;
  filter: brightness(0) saturate(100%) invert(65%) sepia(23%) saturate(147%) hue-rotate(150deg) brightness(100%) contrast(90%);
}

.inner-accord-main-sec .card.inner-accord-sec .link-visual:hover {
  background-color: transparent;
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
}

.inner-accord-main-sec .card.inner-accord-sec .link-visual:hover img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(35%) saturate(877%) hue-rotate(149deg) brightness(93%) contrast(92%);
}

.inner-accord-main-sec .card.inner-accord-sec .link-view {
  right: 14px;
}

.inner-accord-main-sec .card.inner-accord-sec .link-edit {
  right: 46px;
}

.inner-accord-main-sec .card.inner-accord-sec img.icon-m {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.inner-accord-main-sec .card.inner-accord-sec .setting-card-header,
.inner-accord-main-sec .card.inner-accord-sec .card-header {
  height: 44px;
  border: none;
  padding: 9px 6px 9px 12px;
  margin: 2px 8px;
  -webkit-border-radius: 7px;

  -moz-border-radius: 7px;

  -webkit-border-radius: 7px;


  -moz-border-radius: 7px;


  border-radius: 7px;
  color: var(--gray-500);
  font-feature-settings: 'liga' off, 'clig' off;
  text-overflow: ellipsis;
  font-family: "Open Sans";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
  background-color: transparent;
}

.inner-accord-main-sec .card.inner-accord-sec .setting-card-header .dark,
.inner-accord-main-sec .card.inner-accord-sec .card-header .dark {
  display: none;
  background-color: transparent;
}

.inner-accord-main-sec .card.inner-accord-sec .setting-card-header .light,
.inner-accord-main-sec .card.inner-accord-sec .card-header .light {
  display: inline-block;
}

.inner-accord-main-sec .card.inner-accord-sec .setting-card-header:hover,
.inner-accord-main-sec .card.inner-accord-sec .card-header:hover {
  color: var(--gray-950);
  background-color: var(--gray-50);
}

.inner-accord-main-sec .card.inner-accord-sec .setting-card-header:hover .dark,
.inner-accord-main-sec .card.inner-accord-sec .card-header:hover .dark {
  display: inline-block;
}

.inner-accord-main-sec .card.inner-accord-sec .setting-card-header:hover .light,
.inner-accord-main-sec .card.inner-accord-sec .card-header:hover .light {
  display: none;
}

.inner-accord-main-sec .card.inner-accord-sec .setting-card-header:hover:not(.active) img.vh-icon-dark-hover,
.inner-accord-main-sec .card.inner-accord-sec .card-header:hover:not(.active) img.vh-icon-dark-hover {
  filter: var(--gray-950-filter);
}

.inner-accord-main-sec .card.inner-accord-sec .collapsible-accord-content {
  display: none;
}

.inner-accord-main-sec .card.inner-accord-sec.active .card-header {
  color: var(--gray-900);
  font-weight: 600;
}

.inner-accord-main-sec .card.inner-accord-sec.active .dark {
  display: inline-block;
}

.inner-accord-main-sec .card.inner-accord-sec.active .light {
  display: none;
}

.inner-accord-main-sec .card.inner-accord-sec.active .collapsible-accord-content {
  display: block;
}

.inner-accord-main-sec .card.inner-accord-sec .card-body {
  padding: 0;
}

.inner-accord-main-sec .card.inner-accord-sec .card-body li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  margin-bottom: 4px !important;
}

.inner-accord-main-sec .card.inner-accord-sec .card-body li a {
  display: flex;
  height: 32px;
  padding-left: 24px;
  align-items: center;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: var(--black);
  font-weight: 400;
  width: 100%;
}

.inner-accord-main-sec .card.inner-accord-sec .card-body li a.active {
  font-weight: 600;
}

.sidebar-text-divider {
  display: flex;
  height: 32px;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  width: 100%;
  color: var(--gray-300) !important;
  text-transform: uppercase;
  font-weight: 700;
  justify-content: left !important;
  padding-left: 15px !important;
}

body:not(.axis-site) .sidebar-submenus {
  background-color: var(--gray-0) !important;
  width: 256px !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
  border-left: 1px solid var(--sidebar-border) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}

body:not(.axis-site) .sidebar-submenus .btn-submenu-action {
  background-color: transparent !important;
  color: var(--gray-900) !important;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

body:not(.axis-site) .sidebar-submenus .btn-submenu-action img {
  filter: var(--gray-900-filter);
}

body:not(.axis-site) .sidebar-submenus .btn-submenu-action:hover {
  background-color: var(--gray-50) !important;
}

body:not(.axis-site) .sidebar-submenus .btn-submenu-action.active {
  background-color: var(--gray-100) !important;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

/* ORBIT / CUSTOMER PROJECT SIDEBAR — DARK MODE */
body.dark:not(.axis-site) #sidebar {
  background-color: var(--sidebar) !important;
  border-color: var(--sidebar-border) !important;
}

body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul {
  background-color: var(--sidebar) !important;
  border-color: var(--sidebar-border) !important;
}

body.dark:not(.axis-site) .nav-brand .img-vahara-logo-v,
body.dark:not(.axis-site) .nav-brand .img-vahara-logo {
  filter: var(--white-filter) !important;
  opacity: 0.9;
}

body.dark:not(.axis-site) #sidebar .main-menu li > a,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on),
body.dark:not(.axis-site) #sidebar .popover-body .account-li,
body.dark:not(.axis-site) #sidebar .popover-body .help-li,
body.dark:not(.axis-site) #sidebar .popover-body .account-li a,
body.dark:not(.axis-site) #sidebar .popover-body .help-li a {
  color: var(--gray-200) !important;
}

body.dark:not(.axis-site) #sidebar img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar img.icon-m,
body.dark:not(.axis-site) #sidebar .popover-body .account-li img,
body.dark:not(.axis-site) #sidebar .popover-body .help-li img {
  filter: var(--gray-200-filter) !important;
}

body.dark:not(.axis-site) #sidebar .main-menu li > a:hover,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover,
body.dark:not(.axis-site) #sidebar .popover-body .account-li:hover,
body.dark:not(.axis-site) #sidebar .popover-body .help-li:hover,
body.dark:not(.axis-site) #sidebar .popover-body .account-li:hover a,
body.dark:not(.axis-site) #sidebar .popover-body .help-li:hover a {
  color: var(--sidebar-foreground) !important;
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
}

body.dark:not(.axis-site) #sidebar .main-menu li > a:hover img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .main-menu li > a:hover img.icon-m,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover img.icon-m,
body.dark:not(.axis-site) #sidebar .popover-body .account-li:hover img,
body.dark:not(.axis-site) #sidebar .popover-body .help-li:hover img {
  filter: var(--gray-50-filter) !important;
}

body.dark:not(.axis-site) #sidebar .main-menu li > a.active,
body.dark:not(.axis-site) #sidebar .main-menu li > a:active,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus-within,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within {
  color: var(--gray-0) !important;
  background-color: color-mix(in srgb, var(--gray-0) 10%, transparent) !important;
}

body.dark:not(.axis-site) #sidebar .main-menu li > a.active span,
body.dark:not(.axis-site) #sidebar .main-menu li > a.active label,
body.dark:not(.axis-site) #sidebar .main-menu li > a:active span,
body.dark:not(.axis-site) #sidebar .main-menu li > a:active label,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus span,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus label,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus-within span,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus-within label,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active span,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active label,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active span,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active label,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus span,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus label,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within span,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within label {
  color: var(--gray-0) !important;
  background-color: transparent !important;
}

body.dark:not(.axis-site) #sidebar .main-menu li > a.active img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .main-menu li > a.active img.icon-m,
body.dark:not(.axis-site) #sidebar .main-menu li > a:active img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .main-menu li > a:active img.icon-m,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus img.icon-m,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus-within img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .main-menu li > a:focus-within img.icon-m,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active img.icon-m,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active img.icon-m,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus img.icon-m,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within img.vh-icon-dark-hover,
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within img.icon-m {
  filter: var(--gray-0-filter) !important;
}

body.dark:not(.axis-site) .sidebar-submenus {
  background-color: var(--gray-950) !important;
  border-left-color: var(--sidebar-border) !important;
  border-right-color: var(--sidebar-border) !important;
}

body.dark:not(.axis-site) .sidebar-submenus .selected-menu-name,
body.dark:not(.axis-site) .sidebar-submenus .nav-brand .project-list-menu {
  color: var(--sidebar-foreground) !important;
}

body.dark:not(.axis-site) .sidebar-submenus .sidebar-text-divider {
  color: var(--gray-400) !important;
}

body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action {
  color: var(--gray-200) !important;
}

body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a img,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action img,
body.dark:not(.axis-site) .sidebar-submenus .submenu-icon {
  filter: var(--gray-200-filter) !important;
}

body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a:hover,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:hover {
  color: var(--sidebar-foreground) !important;
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
}

body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a:hover img,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:hover img,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:hover .submenu-icon {
  filter: var(--gray-50-filter) !important;
}

body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a.active,
body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a:active,
body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a:focus,
body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a:focus-within,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action.active,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:active,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:focus,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:focus-within {
  color: var(--sidebar-accent-foreground) !important;
  background-color: var(--sidebar-accent) !important;
}

body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a.active img,
body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a:active img,
body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a:focus img,
body.dark:not(.axis-site) .sidebar-submenus .sidebar-submenu li a:focus-within img,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action.active img,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:active img,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:focus img,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:focus-within img,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action.active .submenu-icon,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:active .submenu-icon,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:focus .submenu-icon,
body.dark:not(.axis-site) .sidebar-submenus .btn-submenu-action:focus-within .submenu-icon {
  filter: var(--white-filter) !important;
}

body.dark:not(.axis-site) .sidebar-submenus .btn.btn-project-dropdown {
  color: var(--gray-200) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

body.dark:not(.axis-site) .sidebar-submenus .btn.btn-project-dropdown:hover,
body.dark:not(.axis-site) .sidebar-submenus .btn.btn-project-dropdown:hover:not(.btn-outline):not(.btn-clear) {
  color: var(--sidebar-foreground) !important;
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
  border-color: transparent !important;
}

body.dark:not(.axis-site) .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown,
body.dark:not(.axis-site) .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown:hover,
body.dark:not(.axis-site) .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown:hover:not(.btn-outline):not(.btn-clear) {
  color: var(--sidebar-accent-foreground) !important;
  background-color: var(--sidebar-accent) !important;
  border-color: transparent !important;
}

body.dark:not(.axis-site) .sidebar-submenus .btn.btn-project-dropdown img {
  filter: var(--gray-200-filter) !important;
  opacity: 0.9;
}

body.dark:not(.axis-site) .sidebar-submenus .btn.btn-project-dropdown:hover img,
body.dark:not(.axis-site) .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown img,
body.dark:not(.axis-site) .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown:hover img {
  filter: var(--gray-50-filter) !important;
  opacity: 1;
}

body.dark:not(.axis-site) .sidebar-content .sidebar-submenu .link-visual img {
  filter: var(--gray-300-filter);
}

body.dark:not(.axis-site) .sidebar-content .sidebar-submenu .link-visual:hover img {
  filter: var(--gray-50-filter);
}

body.dark:not(.axis-site) .main-wrapper.coconut,
body.dark:not(.axis-site) .main-wrapper .main-content {
  background-color: var(--background) !important;
}

/* AXIS SIDEBAR MENU */
.axis-site .nav-brand .img-vahara-logo-v,
.axis-site .nav-brand .img-vahara-logo {
  filter: var(--white-filter) !important;
  opacity: 0.7;
}

.axis-site.axis-env-beta .nav-brand .img-vahara-logo-v,
.axis-site.axis-env-beta .nav-brand .img-vahara-logo {
  filter: var(--beta-filter) saturate(0.48) brightness(1.28) contrast(0.92) !important;
  opacity: 0.96 !important;
}

.axis-site.axis-env-dev .nav-brand .img-vahara-logo-v,
.axis-site.axis-env-dev .nav-brand .img-vahara-logo {
  filter: var(--dev-filter) !important;
  opacity: 1 !important;
}


.axis-site #sidebar {
  background-color: var(--gray-900) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
  border-color: var(--sidebar-border) !important;
}

.axis-site #sidebar .fixed-bottom-nav-ul {
  background-color: var(--gray-900) !important;
  border-color: var(--sidebar-border) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

/* Main Menu + Bottom Nav - Default State (body-semibold: 15px, 600 weight) */
.axis-site #sidebar .main-menu li > a,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on) {
  color: var(--gray-200) !important;
  font-size: 15px !important;
  line-height: 22px !important;
}

/* Main Menu + Bottom Nav - Default State Icons */
.axis-site #sidebar img.vh-icon-dark-hover,
.axis-site #sidebar img.icon-m {
  filter: var(--gray-200-filter) !important;
}

/* Main Menu + Bottom Nav - Hover State */
.axis-site #sidebar .main-menu li > a:hover,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover {
  color: var(--gray-0) !important;
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
}

/* Main Menu + Bottom Nav - Hover State Icons */
.axis-site #sidebar .main-menu li > a:hover img.vh-icon-dark-hover,
.axis-site #sidebar .main-menu li > a:hover img.icon-m,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover img.vh-icon-dark-hover,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover img.icon-m {
  filter: var(--white-filter) !important;
}

/* Main Menu + Bottom Nav - Active State */
.axis-site #sidebar .main-menu li > a.active,
.axis-site #sidebar .main-menu li > a:active,
.axis-site #sidebar .main-menu li > a:focus,
.axis-site #sidebar .main-menu li > a:focus-within,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within {
  color: var(--accent) !important;
  background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

/* Main Menu + Bottom Nav - Active State Spans/Labels */
.axis-site #sidebar .main-menu li > a.active span,
.axis-site #sidebar .main-menu li > a.active label,
.axis-site #sidebar .main-menu li > a:active span,
.axis-site #sidebar .main-menu li > a:active label,
.axis-site #sidebar .main-menu li > a:focus span,
.axis-site #sidebar .main-menu li > a:focus label,
.axis-site #sidebar .main-menu li > a:focus-within span,
.axis-site #sidebar .main-menu li > a:focus-within label,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active span,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active label,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active span,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active label,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus span,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus label,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within span,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within label {
  background-color: transparent !important;
  color: var(--accent) !important;
}

/* Main Menu + Bottom Nav - Active State Icons */
.axis-site #sidebar .main-menu li > a.active img.vh-icon-dark-hover,
.axis-site #sidebar .main-menu li > a.active img.icon-m,
.axis-site #sidebar .main-menu li > a:active img.vh-icon-dark-hover,
.axis-site #sidebar .main-menu li > a:active img.icon-m,
.axis-site #sidebar .main-menu li > a:focus img.vh-icon-dark-hover,
.axis-site #sidebar .main-menu li > a:focus img.icon-m,
.axis-site #sidebar .main-menu li > a:focus-within img.vh-icon-dark-hover,
.axis-site #sidebar .main-menu li > a:focus-within img.icon-m,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active img.vh-icon-dark-hover,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active img.icon-m,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active img.vh-icon-dark-hover,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):active img.icon-m,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus img.vh-icon-dark-hover,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus img.icon-m,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within img.vh-icon-dark-hover,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):focus-within img.icon-m {
  filter: var(--accent-filter) !important;
}

/* Prevent hover from changing active state icons */
.axis-site #sidebar .main-menu li > a.active:hover img.vh-icon-dark-hover,
.axis-site #sidebar .main-menu li > a.active:hover img.icon-m,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active:hover img.vh-icon-dark-hover,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on).active:hover img.icon-m {
  filter: var(--accent-filter) !important;
}

/* Sidebar Submenus Container */
.axis-site .sidebar-submenus {
  color: var(--gray-0) !important;
  background-color: var(--gray-950) !important;
}

/* Submenu Heading */
.axis-site .sidebar-submenus .nav-brand .project-list-menu,
.axis-site .sidebar-submenus .selected-menu-name {
  color: var(--gray-0) !important;
}

/* Submenu Items - Default State (body-small: 14px/20px, 500 weight) */
.axis-site .sidebar-submenus .sidebar-submenu li a {
  color: var(--gray-200) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

/* Submenu Items - Hover State */
.axis-site .sidebar-submenus .sidebar-submenu li a:hover {
  color: var(--gray-200) !important;
  font-weight: 500 !important;
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
}

/* Submenu Items - Active State (same weight to prevent text shift) */
.axis-site .sidebar-submenus .sidebar-submenu li a.active,
.axis-site .sidebar-submenus .sidebar-submenu li a:active,
.axis-site .sidebar-submenus .sidebar-submenu li a:focus,
.axis-site .sidebar-submenus .sidebar-submenu li a:focus-within {
  color: var(--gray-0) !important;
  font-weight: 500 !important;
  background-color: color-mix(in srgb, var(--gray-0) 10%, transparent) !important;
}

/* Legacy btn-submenu-action support */
.axis-site .sidebar-submenus .btn-submenu-action {
  color: var(--gray-200) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

.axis-site .sidebar-submenus .btn-submenu-action:hover {
  color: var(--gray-200) !important;
  font-weight: 500 !important;
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
}

.axis-site .sidebar-submenus .btn-submenu-action:hover img.vh-icon-dark-hover {
  opacity: 1;
}

.axis-site .sidebar-submenus .btn-submenu-action.active,
.axis-site .sidebar-submenus .btn-submenu-action:active,
.axis-site .sidebar-submenus .btn-submenu-action:focus,
.axis-site .sidebar-submenus .btn-submenu-action:focus-within {
  color: var(--gray-0) !important;
  font-weight: 500 !important;
  background-color: color-mix(in srgb, var(--gray-0) 10%, transparent) !important;
}

/* Disable color transitions for instant state changes - fixes flash/blip on menu click */
.axis-site #sidebar .main-menu li > a,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a,
.axis-site .sidebar-submenus .sidebar-submenu li a,
.axis-site .sidebar-submenus .btn-submenu-action {
  -webkit-transition: background-color 0s, color 0s, filter 0s !important;

  -moz-transition: background-color 0s, color 0s, filter 0s !important;

  -ms-transition: background-color 0s, color 0s, filter 0s !important;

  -webkit-transition: background-color 0s, color 0s, filter 0s !important;


  -moz-transition: background-color 0s, color 0s, filter 0s !important;


  -ms-transition: background-color 0s, color 0s, filter 0s !important;


  transition: background-color 0s, color 0s, filter 0s !important;
}

.axis-site #sidebar img.vh-icon-dark-hover,
.axis-site #sidebar img.icon-m {
  -webkit-transition: filter 0s !important;

  -moz-transition: filter 0s !important;

  -ms-transition: filter 0s !important;

  -webkit-transition: filter 0s !important;


  -moz-transition: filter 0s !important;


  -ms-transition: filter 0s !important;


  transition: filter 0s !important;
}

/* Project Dropdown - Axis HQ (high specificity to override buttons.css) */
.axis-site .sidebar-submenus .btn.btn-project-dropdown {
  color: var(--gray-200) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Hover: subtle neutral overlay, no text/icon shift */
.axis-site .sidebar-submenus .btn.btn-project-dropdown:hover,
.axis-site .sidebar-submenus .btn.btn-project-dropdown:hover:not(.btn-outline):not(.btn-clear) {
  color: var(--gray-200) !important;
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
  border-color: transparent !important;
}

/* Active/Click/Show: bright foreground with stronger neutral overlay */
.axis-site .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown,
.axis-site .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown:hover,
.axis-site .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown:hover:not(.btn-outline):not(.btn-clear) {
  color: var(--gray-0) !important;
  background-color: color-mix(in srgb, var(--gray-0) 10%, transparent) !important;
  border-color: transparent !important;
}

/* Chevron icon in project dropdown - default */
.axis-site .sidebar-submenus .btn.btn-project-dropdown img {
  filter: var(--white-filter) !important;
  opacity: 0.7;
}

/* Hover: icon stays same (no change) */
.axis-site .sidebar-submenus .btn.btn-project-dropdown:hover img {
  filter: var(--white-filter) !important;
  opacity: 0.7;
}

/* Active/Click/Show: icon full white - MUST override hover */
.axis-site .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown img,
.axis-site .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown:hover img {
  filter: var(--white-filter) !important;
  opacity: 1;
}

/* Sidebar theme toggle */
.axis-site #sidebar .sidebar-theme-toggle {
  outline: none;
}

.axis-site #sidebar .sidebar-theme-toggle .theme-icon-light,
.axis-site.axis-sidebar-theme-light #sidebar .sidebar-theme-toggle .theme-icon-dark {
  display: none;
}

.axis-site.axis-sidebar-theme-light #sidebar .sidebar-theme-toggle .theme-icon-light {
  display: block;
}

.axis-site.axis-sidebar-theme-dark #sidebar .sidebar-theme-toggle .theme-icon-dark {
  display: block;
}

.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle,
.axis-site #sidebar .sidebar-theme-toggle,
.axis-site #sidebar .sidebar-theme-toggle.active,
.axis-site #sidebar .sidebar-theme-toggle:active,
.axis-site #sidebar .sidebar-theme-toggle:focus,
.axis-site #sidebar .sidebar-theme-toggle:focus-within,
.axis-site #sidebar .sidebar-theme-toggle:hover {
  outline: none !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:active,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus-within,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle.active,
.axis-site #sidebar .sidebar-theme-toggle:active,
.axis-site #sidebar .sidebar-theme-toggle:focus,
.axis-site #sidebar .sidebar-theme-toggle:focus-within,
.axis-site #sidebar .sidebar-theme-toggle.active {
  color: inherit !important;
  background-color: transparent !important;
}

.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:active label,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus label,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus-within label,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle.active label,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:active span,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus span,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus-within span,
.axis-site #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle.active span,
.axis-site #sidebar .sidebar-theme-toggle:active label,
.axis-site #sidebar .sidebar-theme-toggle:focus label,
.axis-site #sidebar .sidebar-theme-toggle:focus-within label,
.axis-site #sidebar .sidebar-theme-toggle.active label,
.axis-site #sidebar .sidebar-theme-toggle:active span,
.axis-site #sidebar .sidebar-theme-toggle:focus span,
.axis-site #sidebar .sidebar-theme-toggle:focus-within span,
.axis-site #sidebar .sidebar-theme-toggle.active span {
  color: inherit !important;
  background-color: transparent !important;
}

.axis-site.axis-sidebar-theme-dark #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:active img,
.axis-site.axis-sidebar-theme-dark #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus img,
.axis-site.axis-sidebar-theme-dark #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus-within img,
.axis-site.axis-sidebar-theme-dark #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle.active img,
.axis-site.axis-sidebar-theme-dark #sidebar .sidebar-theme-toggle:active img,
.axis-site.axis-sidebar-theme-dark #sidebar .sidebar-theme-toggle:focus img,
.axis-site.axis-sidebar-theme-dark #sidebar .sidebar-theme-toggle:focus-within img,
.axis-site.axis-sidebar-theme-dark #sidebar .sidebar-theme-toggle.active img {
  filter: var(--gray-200-filter) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:active img,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus img,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:focus-within img,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle.active img,
.axis-site.axis-sidebar-theme-light #sidebar .sidebar-theme-toggle:active img,
.axis-site.axis-sidebar-theme-light #sidebar .sidebar-theme-toggle:focus img,
.axis-site.axis-sidebar-theme-light #sidebar .sidebar-theme-toggle:focus-within img,
.axis-site.axis-sidebar-theme-light #sidebar .sidebar-theme-toggle.active img {
  filter: var(--gray-500-filter) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:hover {
  color: var(--gray-900) !important;
  background-color: var(--gray-25) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a#sidebar-theme-toggle:hover img {
  filter: var(--gray-900-filter) !important;
}

.axis-site {
  --axis-rail-width: 60px; /* 60 - 2*10 li padding = the 40px tile, so it centres */
  --axis-submenu-width: 256px;
  --axis-sidebar-divider-color: var(--gray-800);
}

.axis-site.axis-sidebar-theme-light {
  --axis-sidebar-divider-color: var(--gray-100);
}

@media (min-width: 993px) {
  .axis-site #sidebar.sidebar-offcanvas.has-submenu {
    width: var(--axis-rail-width) !important;
    left: 0 !important;
  }

  .axis-site #sidebar.sidebar-offcanvas.has-submenu .fixed-bottom-nav-ul {
    width: var(--axis-rail-width) !important;
  }

  .axis-site #sidebar.sidebar-offcanvas.has-submenu + .sidebar-submenus {
    display: block !important;
    left: var(--axis-rail-width) !important;
    width: var(--axis-submenu-width) !important;
    border-left: 1px solid var(--axis-sidebar-divider-color) !important;
    border-right: 1px solid var(--axis-sidebar-divider-color) !important;
    -webkit-box-shadow: none !important;

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;


    -moz-box-shadow: none !important;


    box-shadow: none !important;
  }

  body.account-layout:not(.modal-mode):not(:where(:has(#sidebar.sidebar-offcanvas.has-submenu ~ .main-wrapper.with-sidebar))) .main-wrapper.with-sidebar {
    padding-left: calc(var(--sidebar-total-width) + 30px) !important;
  }

  /* Preserve ordinary submenu-open content at its existing 330px reservation.
     Full-page tables override this interior inset with the token alone.
     Keep the state gate weightless so their ID selector still wins. */
  body.account-layout:not(.modal-mode):where(:has(#sidebar.sidebar-offcanvas.has-submenu ~ .main-wrapper.with-sidebar)) .main-wrapper.with-sidebar {
    padding-left: calc(var(--sidebar-total-width) + 9px) !important;
  }
}

.axis-site.axis-sidebar-debug #sidebar.sidebar-offcanvas.has-submenu {
  -webkit-box-shadow: inset -1px 0 0 #2563eb !important;

  -moz-box-shadow: inset -1px 0 0 #2563eb !important;

  -webkit-box-shadow: inset -1px 0 0 #2563eb !important;


  -moz-box-shadow: inset -1px 0 0 #2563eb !important;


  box-shadow: inset -1px 0 0 #2563eb !important;
}

.axis-site.axis-sidebar-debug #sidebar.sidebar-offcanvas.has-submenu + .sidebar-submenus {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  -webkit-box-shadow: inset 1px 0 0 #ef4444, inset -1px 0 0 #22c55e !important;

  -moz-box-shadow: inset 1px 0 0 #ef4444, inset -1px 0 0 #22c55e !important;

  -webkit-box-shadow: inset 1px 0 0 #ef4444, inset -1px 0 0 #22c55e !important;


  -moz-box-shadow: inset 1px 0 0 #ef4444, inset -1px 0 0 #22c55e !important;


  box-shadow: inset 1px 0 0 #ef4444, inset -1px 0 0 #22c55e !important;
}

/* Axis HQ - gray background only for dashboard (coconut class) */
.axis-site .main-wrapper.coconut,
.axis-site .main-wrapper.coconut .main-content {
  background-color: var(--gray-0) !important;
}

/* Light theme overrides - sidebar only */
.axis-site.axis-sidebar-theme-light .nav-brand .img-vahara-logo-v,
.axis-site.axis-sidebar-theme-light .nav-brand .img-vahara-logo {
  filter: none !important;
  opacity: 1;
}

.axis-site.axis-sidebar-theme-light.axis-env-beta .nav-brand .img-vahara-logo-v,
.axis-site.axis-sidebar-theme-light.axis-env-beta .nav-brand .img-vahara-logo {
  filter: var(--beta-filter) saturate(0.92) brightness(0.9) !important;
  opacity: 0.94 !important;
}

.axis-site.axis-sidebar-theme-light.axis-env-dev .nav-brand .img-vahara-logo-v,
.axis-site.axis-sidebar-theme-light.axis-env-dev .nav-brand .img-vahara-logo {
  filter: var(--dev-filter) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar {
  background-color: var(--white) !important;
  border-color: var(--gray-100) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul {
  background-color: var(--white) !important;
  border-color: var(--gray-100) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on) {
  color: var(--gray-600) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar img.icon-m {
  filter: var(--gray-600-filter) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on),
.axis-site.axis-sidebar-theme-light .sidebar-submenus .sidebar-submenu li a,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn-submenu-action,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn.btn-project-dropdown {
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
  background-image: none !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:hover,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover {
  color: var(--gray-800) !important;
  background-color: var(--gray-25) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:hover span,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:hover label,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover span,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover label {
  color: var(--gray-800) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:hover img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:hover img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):hover img.icon-m {
  filter: var(--gray-800-filter) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a.active,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:active,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus-within,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle).active,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):active,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus-within {
  color: color-mix(in srgb, var(--accent) 72%, var(--gray-950)) !important;
  background-color: color-mix(in srgb, var(--accent) 5%, white) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a.active span,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a.active label,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:active span,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:active label,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus span,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus label,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus-within span,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus-within label,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle).active span,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle).active label,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):active span,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):active label,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus span,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus label,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus-within span,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus-within label {
  color: color-mix(in srgb, var(--accent) 72%, var(--gray-950)) !important;
}

.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a.active img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a.active img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:active img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:active img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus-within img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a:focus-within img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle).active img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle).active img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):active img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):active img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus-within img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle):focus-within img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a.active:hover img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .main-menu li > a.active:hover img.icon-m,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle).active:hover img.vh-icon-dark-hover,
.axis-site.axis-sidebar-theme-light #sidebar .fixed-bottom-nav-ul > li > a:not(.sys-mode-on):not(.dev-mode-on):not(#sidebar-theme-toggle).active:hover img.icon-m {
  filter: var(--accent-filter) brightness(0.84) saturate(0.88) !important;
}

.axis-site #sidebar.sidebar-offcanvas.has-submenu,
.axis-site #sidebar.sidebar-offcanvas.has-submenu .fixed-bottom-nav-ul,
.axis-site.axis-sidebar-theme-light #sidebar.sidebar-offcanvas.has-submenu,
.axis-site.axis-sidebar-theme-dark #sidebar.sidebar-offcanvas.has-submenu,
.axis-site.axis-sidebar-theme-light #sidebar.sidebar-offcanvas.has-submenu .fixed-bottom-nav-ul,
.axis-site.axis-sidebar-theme-dark #sidebar.sidebar-offcanvas.has-submenu .fixed-bottom-nav-ul {
  border-right: none !important;
  border-right-color: transparent !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus,
.axis-site.axis-sidebar-theme-dark .sidebar-submenus {
  border-left: 1px solid var(--sidebar-border) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus {
  color: var(--gray-900) !important;
  background-color: var(--gray-0) !important;
  border-left: 1px solid var(--gray-100) !important;
  border-right: 1px solid var(--gray-100) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus .nav-brand .project-list-menu,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .selected-menu-name {
  color: var(--gray-900) !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus .sidebar-submenu li a,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn-submenu-action {
  color: var(--gray-600) !important;
  font-weight: 500 !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus .sidebar-submenu li a:hover,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn-submenu-action:hover {
  color: var(--gray-900) !important;
  background-color: var(--gray-50) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus .sidebar-submenu li a.active,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .sidebar-submenu li a:active,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .sidebar-submenu li a:focus,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .sidebar-submenu li a:focus-within,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn-submenu-action.active,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn-submenu-action:active,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn-submenu-action:focus,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn-submenu-action:focus-within {
  color: var(--gray-900) !important;
  background-color: var(--gray-100) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn.btn-project-dropdown {
  color: var(--gray-600) !important;
  font-weight: 500 !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn.btn-project-dropdown:hover,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn.btn-project-dropdown:hover:not(.btn-outline):not(.btn-clear) {
  color: var(--gray-900) !important;
  background-color: var(--gray-25) !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown:hover,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown:hover:not(.btn-outline):not(.btn-clear) {
  color: var(--gray-900) !important;
  background-color: var(--gray-50) !important;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn.btn-project-dropdown img,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .btn.btn-project-dropdown:hover img {
  filter: var(--gray-600-filter) !important;
  opacity: 1;
}

.axis-site.axis-sidebar-theme-light .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown img,
.axis-site.axis-sidebar-theme-light .sidebar-submenus .project-name-container.show .btn.btn-project-dropdown:hover img {
  filter: var(--gray-900-filter) !important;
}

.axis-site.axis-sidebar-theme-dark #sidebar,
.axis-site.axis-sidebar-theme-dark #sidebar .fixed-bottom-nav-ul {
  border-color: var(--gray-800) !important;
}

.axis-site.axis-sidebar-theme-dark .sidebar-submenus {
  border-left: 1px solid var(--gray-800) !important;
  border-right: 1px solid var(--gray-800) !important;
}

/* Axis HQ Home page - remove white portlet background */
.axis-site .portlet.center-content-wrapper {
  background-color: transparent !important;
}

.axis-site .portlet.center-content-wrapper .head {
  display: none !important;
}

/* Axis HQ Home Page Shortcuts */
.axis-site .shortcut-options {
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
}

.axis-site .shortcut-options svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

.axis-site .shortcut-options a {
  color: var(--foreground) !important;
}

.axis-site .shortcut-options a:hover {
  font-weight: 500 !important;
  text-decoration: underline !important;
  color: var(--foreground) !important;
}

.axis-site .shortcut-options:hover svg:not(.icon-codesandbox),
.axis-site .shortcut-options:hover svg:not(.icon-codesandbox) path,
.axis-site .shortcut-options:hover svg:not(.icon-codesandbox) g {
  fill: var(--foreground) !important;
}

/* Codesandbox icon uses stroke, not fill - keep fill none on hover */
.axis-site .shortcut-options:hover svg.icon-codesandbox,
.axis-site .shortcut-options:hover svg.icon-codesandbox path,
.axis-site .shortcut-options:hover svg.icon-codesandbox polyline,
.axis-site .shortcut-options:hover svg.icon-codesandbox line {
  fill: none !important;
  stroke: var(--foreground) !important;
}

.axis-site .tooltip-gray {
  opacity: 1;
}

.axis-site .tooltip-gray.fade,
.axis-site .tooltip-gray.show {
  -webkit-transition: opacity 0s !important;

  -moz-transition: opacity 0s !important;

  -ms-transition: opacity 0s !important;

  -webkit-transition: opacity 0s !important;


  -moz-transition: opacity 0s !important;


  -ms-transition: opacity 0s !important;


  transition: opacity 0s !important;
}

.axis-site .tooltip-gray .tooltip-inner {
  background-color: var(--gray-700);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  padding: 12.5px 16px;
  color: var(--white);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}

.axis-site .tooltip-gray.bs-tooltip-right .arrow::before {
  border-right-color: var(--gray-700);
  left: 2.5px;
}

.axis-site .tooltip-gray.bs-tooltip-left .arrow::before {
  border-left-color: var(--gray-700);
}

.axis-site .tooltip-gray.bs-tooltip-top .arrow::before {
  border-top-color: var(--gray-700);
}

.axis-site .tooltip-gray.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--gray-700);
}

.btn-toggle-beta-mode img {
  filter: var(--gray-500-filter);
}

.btn-toggle-beta-mode:hover img,
.btn-toggle-beta-mode:active img,
.btn-toggle-beta-mode:focus img,
.btn-toggle-beta-mode:focus-within img,
.btn-toggle-beta-mode.active img {
  filter: var(--gray-900-filter);
}

.dev-mode-on {
  color: var(--info);
}

.dev-mode-on img {
  filter: var(--info-filter) !important;
}

.dev-mode-on:hover {
  background-color: rgba(0, 183, 240, 0.05) !important;
}

.dev-mode-on:active,
.dev-mode-on.active {
  background-color: rgba(0, 183, 240, 0.1) !important;
}

.sys-mode-on {
  color: var(--warning);
}

.sys-mode-on img {
  filter: var(--warning-filter) !important;
}

.sys-mode-on:hover {
  background-color: rgba(255, 149, 88, 0.05) !important;
}

.sys-mode-on:active,
.sys-mode-on.active {
  background-color: rgba(255, 149, 88, 0.1) !important;
}

/* Settings Sidebar Toggler */
.settings-sidebar-menutoggler {
  position: fixed;
  width: 30px;
  height: 30px;
  left: 0;
  top: 20%;
  z-index: 111;
  background-color: var(--white);
  -webkit-border-radius: 0 4px 4px 0;

  -moz-border-radius: 0 4px 4px 0;

  -webkit-border-radius: 0 4px 4px 0;


  -moz-border-radius: 0 4px 4px 0;


  border-radius: 0 4px 4px 0;
  text-align: center;
  display: none;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);

  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);


  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);


  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* Settings sidebar overlay for mobile */
.settings-sidebar-toggle-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
}

.settings-sidebar-toggle-overlay.on {
  display: block;
}

.toggler-settings-menu {
  left: 185px;
  -webkit-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;

  -moz-transition: all 300ms ease;

  -ms-transition: all 300ms ease;

  -webkit-transition: all 300ms ease;


  -moz-transition: all 300ms ease;


  -ms-transition: all 300ms ease;


  transition: all 300ms ease;
}

/* Settings sidebar responsive styling */
@media (max-width: 992px) {
  .settings-sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    z-index: 110;
    overflow-y: auto;
    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;


    -moz-transition: all 0.3s ease;


    -ms-transition: all 0.3s ease;


    transition: all 0.3s ease;
  }

  .settings-sidebar.reveal-menu {
    left: 0;
  }

  .settings-sidebar-menutoggler {
    display: block;
  }

  .main-wrapper.settings-blur {
    filter: blur(3px);
  }

  .settings-sidebar-menutoggler.toggler-settings-menu .fa-chevron-right:before,
  .settings-sidebar-menutoggler.toggler-settings-menu .fa-chevron-right:before {
    content: "\f053" !important;
  }
}

/* Legacy row-offcanvas-left wrapper is emitted by resources/views/web/layouts/account.blade.php. */
.row-offcanvas-left .sidebar-offcanvas {
    width: 217px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99 !important;
}

.row-offcanvas-left .sidebar-submenus {
    position: fixed;
    top: 0;
    left: 60px; /* = --axis-rail-width */
    height: 100%;
    width: 248px;
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;


    -moz-box-shadow: none;


    box-shadow: none;
    border-right: solid 1px var(--gray-100);
    z-index: 99 !important;
    background-color: white;
}

/* =============================================================================
   ACCOUNT-LAYOUT OFF-CANVAS TOGGLER -- the same hamburger the settings layout
   already has.
   =============================================================================

   WHY THE SETTINGS ONE DOES NOT ALREADY REACH THESE PAGES. There are two
   independent off-canvas systems in this app, and they share no selectors:

     - web/layouts/settings.blade.php uses `.settings-sidebar`,
       `.settings-sidebar-menutoggler`, `.settings-sidebar-toggle-overlay` and
       `.main-wrapper.settings-blur`. Its hamburger, its fixed narrow top bar
       and its token-based backdrop fade are all styled under a
       `body.settings-layout` prefix (custom.css) plus the
       `.settings-sidebar-*` rules further up this file.
     - web/layouts/account.blade.php -- which web/layouts/account_react.blade.php
       simply @includes, and which therefore serves /style/data-table and the
       real content-type list pages -- uses `#sidebar.sidebar-offcanvas`,
       `.sidebar-menutoggler`, `.sidebar-toggle-overlay` and
       `.main-wrapper.blur`.

   Not one of the settings selectors matches anything in the account layout, so
   none of that polish can apply here. Without these rules the account layout
   renders the legacy control from resources/assets/cms/css/left-sidebar.css
   (compiled into cms-libs.css, a separate bundle from this one): a 33x34
   #5e6383 square pinned at left:0, top:10px holding a `fa-chevron-right`
   glyph. Confirmed live on /style/data-table at 768px and 430px.

   The blade renders the same /assets/icons/menu.svg + .vh-icon-dark-hover
   image the settings toggler renders, and the rules below undo the legacy
   square's chrome so it reads as the same plain icon button. The layout's
   existing toggle machinery is untouched: the click handler in
   account.blade.php, `.reveal-menu`, `.toggler-menu`/`.toggler-sub-menu`,
   `.sidebar-toggle-overlay.on` and `.main-wrapper.blur` all keep working as
   they always have. There is deliberately no second implementation of the
   control, and no copy of the settings layout's fixed narrow top bar --
   this layout keeps its own sticky header and breadcrumbs.

   cms-libs.css loads AFTER app-base.css (which is what embeds this file), so
   every rule here is written at `body.account-layout` specificity (0,2,1) to
   out-rank the legacy bare-class rules (0,1,0) regardless of source order.

   The 992px breakpoint is the same one the rest of this file uses for the
   off-canvas switch, and the same one left-sidebar.css reveals the toggler at.
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
  /* `top: 6px` was a magic number, never
     computed against anything -- confirmed it could not centre by
     accident. The corrected target (this superseded two earlier
     attempts at centring against #sticky-header's full, page-varying
     height -- 66/113/152px -- see git history): the
     hamburger centres against the BREADCRUMB ROW only, sits in its own
     box with a divider on the right (`.breadcrumb-container`'s own
     `border-bottom: 1px solid var(--border)`, just turned 90 degrees --
     see the border-right reuse below; `border-right/left: 1px solid
     var(--border)` is the theme's existing vertical-divider pattern,
     already used in tables.css and elsewhere in this file's stylesheet),
     and breadcrumbs sit to its right.

     Unlike the full header, the breadcrumb row's height is a genuine
     design constant, not a per-page variable: `.breadcrumb-container` is
     documented two rules up in custom.css as "a 32px band" by design, and
     is already forced there to a single non-wrapping line (`flex-wrap:
     nowrap` + `overflow-x: auto`), so its height doesn't grow with a long
     trail or shrink for a short one. That means the box/divider geometry
     below (`top: 0; height: 32px`) is a constant, not a guess -- nothing
     here needs the per-page pixel measurement the two prior attempts
     needed.

     What genuinely can't be known without JS is a structural fact, not a
     number: whether THIS page will render a breadcrumb row at all.
     `html.has-header-breadcrumbs` (account.blade.php) is set once that's
     confirmed -- synchronously for Blade's standard-header (already in
     the DOM), after React mounts PageHeader.js otherwise, and cached
     per-route so a repeat visit is seeded before first paint. Absent that
     class, this box falls through to the plain `top: 6px` below, the exact
     legacy position -- account.blade.php now renders a breadcrumb-only bar
     server-side for plain Blade pages that have no header of their own, so
     in practice that fallback only still applies to a page this stylesheet
     otherwise can't reach (e.g. one outside this layout's own markup).

     `position: fixed` (not the legacy `absolute`, still true for the
     `.settings-sidebar-menutoggler` share of this rule in
     left-sidebar.css, untouched): reproduced live -- scroll a table page
     at 375px and `#sticky-header` (already `position: fixed`) correctly
     stays put, but this element, still `absolute`, is laid out relative
     to a plain in-flow ancestor (`.row-offcanvas`, itself inside the
     scrollable `<body>`) and slides up with it whenever body has ANY
     overflow, however slight -- confirmed by forcing
     `document.body.scrollTop = 32`: the header's rect stayed at
     `top: 0`, this element's moved to `top: -32`. That mismatch, two
     elements meant to read as one bar using two different positioning
     schemes, is what appeared as "half scrolling" with a residual line.
     `position: fixed` pins this element to the viewport exactly like the
     header, so the two can never drift apart regardless of which
     container ends up scrolling. */
  body.account-layout .sidebar-menutoggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 6px 10px; /* a little more air left and right of the glyph */
    position: fixed;
    top: 6px;
    background-color: transparent;
    border: none;
    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;


    -moz-border-radius: 4px;


    border-radius: 4px;
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;


    -moz-box-shadow: none;


    box-shadow: none;
  }

  /* Bar positioning: the hamburger sits in the top-left of the 32px
     bar, full height, whenever that bar exists -- deliberately split from
     the divider rule below. A page WITH breadcrumbs gets
     both this box and a divider on its right edge; a page whose bar has
     nothing in it would get this box with NO divider, "just... the one
     horizontal line... and the hamburger menu in the top left of it."
     Named `has-header-bar` rather than reusing `has-header-breadcrumbs` so
     that no-breadcrumb case could set only this class without inheriting a
     divider it doesn't want; today the only thing that produces a bar is a
     breadcrumb row (every account-layout page gets one now, including
     pages with no header of their own -- account.blade.php renders a
     Home + page-title bar for those server-side), so account.blade.php
     sets both classes together whenever it detects one.

     32px matches `#sticky-header .breadcrumb-container`'s own documented,
     now-constant height (custom.css) -- `top: 0; height: 32px` spans the
     row exactly, from the viewport's top edge down to the breadcrumb
     line, and the existing `align-items: center` above centres the icon
     inside it, so no pixel arithmetic is needed here at all. */
  html.has-header-bar body.account-layout .sidebar-menutoggler {
    top: 0;
    height: 32px;
    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    -webkit-border-radius: 0;


    -moz-border-radius: 0;


    border-radius: 0;
  }

  /* Divider: only when there is something to the right of the box to
     divide it from. `border-right` reuses the theme's existing
     vertical-divider pattern (tables.css, custom.css) at the same
     `var(--border)` token `.breadcrumb-container` already uses for its
     own (horizontal) border, rather than inventing a new line style. */
  html.has-header-breadcrumbs body.account-layout .sidebar-menutoggler {
    border-right: 1px solid var(--gray-200); /* the same grey as the crumb bar's hairline it meets */
  }

  body.account-layout .sidebar-menutoggler img {
    width: 18px;
    height: 18px;
  }

  /* WHILE THE MENU IS OPEN the hamburger is a floating icon button beside the
     revealed menu, over the faded page: no divider line, a
     lighter icon so it reads on the dark scrim, and the tile only under the
     pointer -- the same hover treatment as every other icon button. */
  html body.account-layout .sidebar-menutoggler.toggler-menu,
  html body.account-layout .sidebar-menutoggler.toggler-sub-menu {
    border-right: none;
    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;


    -moz-border-radius: 4px;


    border-radius: 4px;
    height: 32px;
    width: 32px;
    padding: 0;
    top: 6px; /* floats clear of the viewport edge and the menu's edge */
    margin-left: 8px;
  }
  body.account-layout .sidebar-menutoggler.toggler-menu img,
  body.account-layout .sidebar-menutoggler.toggler-sub-menu img {
    filter: var(--gray-200-filter);
  }
  /* A faint white wash at rest so the button does not float alone on the
     scrim, a stronger wash under the pointer. */
  html body.account-layout .sidebar-menutoggler.toggler-menu,
  html body.account-layout .sidebar-menutoggler.toggler-sub-menu {
    background-color: rgba(255, 255, 255, 0.12);
  }
  body.account-layout .sidebar-menutoggler.toggler-menu:hover,
  body.account-layout .sidebar-menutoggler.toggler-sub-menu:hover,
  body.account-layout .sidebar-menutoggler.toggler-menu:focus-visible,
  body.account-layout .sidebar-menutoggler.toggler-sub-menu:focus-visible {
    background-color: rgba(255, 255, 255, 0.24);
  }
  /* AND THE ICON GOES WHITE UNDER THE POINTER: the wash alone moved the tile
     but left the glyph the same --gray-200, so
     hover read as a slightly brighter box rather than as the control
     answering. `--white-filter` is the theme's own token for this (variables.
     css), the one buttons.css and notifications.css already use to take an
     icon to white. The rest state above is untouched. */
  body.account-layout .sidebar-menutoggler.toggler-menu:hover img,
  body.account-layout .sidebar-menutoggler.toggler-sub-menu:hover img,
  body.account-layout .sidebar-menutoggler.toggler-menu:focus-visible img,
  body.account-layout .sidebar-menutoggler.toggler-sub-menu:focus-visible img {
    filter: var(--white-filter);
  }

  /* The backdrop was invisible, not subtle: `.sidebar-toggle-overlay` (above
     in this file) declares `background-color: transparent` and fades only its
     opacity, so 0 -> 0.6 on a transparent colour renders nothing at all. The
     settings backdrop fades the `--overlay` token instead; using the same
     token here is what makes the two layouts' open states match. Opacity goes
     to 1 rather than 0.6 because `--overlay` already carries its own 0.70
     alpha -- the same net value the settings backdrop lands on. */
  body.account-layout .sidebar-toggle-overlay {
    background-color: var(--overlay);
  }

  body.account-layout .sidebar-toggle-overlay.on {
    opacity: 1;
  }

  /* Parity with `.main-wrapper.settings-blur` (3px, further up this file).
     The shared `.blur` utility is 2px and page-agnostic; this narrows the
     difference to nothing for the one element that opens a sidebar over it. */
  body.account-layout .main-wrapper.blur {
    filter: blur(3px);
  }

  /* ------------------------------------------------------------------
     THE CLOSE MIRRORS THE OPEN.

     Opening slid the menu in; closing made it vanish. Traced on Orbit Types
     at 700px -- open: `transitionstart` on `left` at 21ms, `transitionend`
     at 317, left -248 -> -42.4 at t=150 -> 0. Close: NO transition event at
     all, and left already back at -248 ten milliseconds after the click.

     Why: the animation was declared on the open state only. The off-canvas
     positions come from the legacy bundle -- `.sidebar-offcanvas { left:
     -248px !important }` inside its own 992px block, and `.reveal-menu {
     left: 0 !important; -webkit-transition: all 300ms ease }`
     (resources/assets/cms/css/left-sidebar.css, compiled into cms-libs.css)
     -- and it is `.reveal-menu` that carries the transition. A transition is
     read from the style the element is animating TO, so removing that class
     removes the declaration in the same frame as the new `left`: there is
     nothing left to animate with. (`.sidebar { -webkit-transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 -moz-transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 -ms-transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 -moz-transition: all 300ms ease }`
     (resources/assets/cms/css/left-sidebar.css, compiled into cms-libs.css)
     -- and it is `.reveal-menu` that carries the transition. A transition is
     read from the style the element is animating TO, so removing that class
     removes the declaration in the same frame as the new `left`: there is
     nothing left to animate with. (`.sidebar { -webkit-transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 -moz-transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 -ms-transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 -ms-transition: all 300ms ease }`
     (resources/assets/cms/css/left-sidebar.css, compiled into cms-libs.css)
     -- and it is `.reveal-menu` that carries the transition. A transition is
     read from the style the element is animating TO, so removing that class
     removes the declaration in the same frame as the new `left`: there is
     nothing left to animate with. (`.sidebar { -webkit-transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 -moz-transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 -ms-transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
 -webkit-transition: all 300ms ease }`
     (resources/assets/cms/css/left-sidebar.css, compiled into cms-libs.css)
     -- and it is `.reveal-menu` that carries the transition. A transition is
     read from the style the element is animating TO, so removing that class
     removes the declaration in the same frame as the new `left`: there is
     nothing left to animate with. (`.sidebar { transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;

 -moz-transition: all 300ms ease }`
     (resources/assets/cms/css/left-sidebar.css, compiled into cms-libs.css)
     -- and it is `.reveal-menu` that carries the transition. A transition is
     read from the style the element is animating TO, so removing that class
     removes the declaration in the same frame as the new `left`: there is
     nothing left to animate with. (`.sidebar { transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;

 -ms-transition: all 300ms ease }`
     (resources/assets/cms/css/left-sidebar.css, compiled into cms-libs.css)
     -- and it is `.reveal-menu` that carries the transition. A transition is
     read from the style the element is animating TO, so removing that class
     removes the declaration in the same frame as the new `left`: there is
     nothing left to animate with. (`.sidebar { transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;

 transition: all 300ms ease }`
     (resources/assets/cms/css/left-sidebar.css, compiled into cms-libs.css)
     -- and it is `.reveal-menu` that carries the transition. A transition is
     read from the style the element is animating TO, so removing that class
     removes the declaration in the same frame as the new `left`: there is
     nothing left to animate with. (`.sidebar { transition: all 300ms ease }`
     at the top of this file does not cover it -- the element carries
     `sidebar-offcanvas`, `sidebar-menu-container` and `has-submenu`, but not
     `sidebar`. `.settings-sidebar` states its transition on the base rule,
     which is why the settings layout has never had this.)

     Stated on the base state here, so it applies in both directions, with
     the open's own property, duration and easing: `left`, 300ms, `ease`.
     Named rather than `all`, because `all` on these two elements would also
     animate the width and background changes the submenu states make.
     `body.account-layout` (0,2,1) out-ranks `.reveal-menu` (0,1,0), so this
     governs the open as well and the two directions cannot drift apart.

     Nothing is display-toggled on the way out -- `.reveal-menu`'s
     `display: block` matches the base display of both elements (measured
     `block` at every sample, open and closed), so there is no
     `transitionend` to wait for before hiding anything. */
  body.account-layout #sidebar.sidebar-offcanvas,
  body.account-layout .sidebar-submenus {
    transition: left 300ms ease;
  }

  /* The page blur is the content's half of the same gesture, and it snapped
     on and off while the menu took 300ms. Same curve, so the page settles
     with the menu instead of before it. */
  body.account-layout .main-wrapper {
    -webkit-transition: filter 300ms ease;

    -moz-transition: filter 300ms ease;

    -ms-transition: filter 300ms ease;

    -webkit-transition: filter 300ms ease;


    -moz-transition: filter 300ms ease;


    -ms-transition: filter 300ms ease;


    transition: filter 300ms ease;
  }
}

/* The Superuser control shares the rail row geometry and neutral states. */
#sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser {
  background: transparent !important;
}
#sidebar .btn-toggle-superuser img {
  filter: var(--gray-600-filter) !important;
}
#sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser:hover {
  background: var(--gray-25) !important;
}
#sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser:active,
#sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser:focus-visible {
  background: var(--gray-50) !important;
}
#sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on {
  color: var(--warning) !important;
}
#sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on:hover {
  background: color-mix(in oklch, var(--warning) 18%, transparent) !important;
}
/* Light Orbit only; retain the existing Axis/dark wash and pressed state. */
:where(body:not(.axis-site):not(.dark)) #sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on:hover {
  background: color-mix(in oklch, var(--warning) 10%, transparent) !important;
}
#sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on:active,
#sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on:focus-visible {
  background: color-mix(in oklch, var(--warning) 26%, transparent) !important;
}
#sidebar .btn-toggle-superuser:focus-visible {
  outline: var(--border-width-thick) solid var(--sidebar-ring);
  outline-offset: var(--border-width-thick);
}

/* The enabled switch keeps its warning icon through the rail's dark states. */
body.dark:not(.axis-site) #sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on img {
  filter: var(--warning-filter) !important;
}

/* Gate indicators occupy the trailing content slot in menus and popovers. */
.sidebar-submenus .sidebar-submenu a.vh-gated-row,
#sidebar .vh-gated-row,
.popover.popover-menu .vh-gated-row,
.vh-project-dropdown-menu .vh-gated-row {
  position: relative;
  padding-right: calc(var(--space-3) + var(--space-2) + 6px) !important;
}
.sidebar-submenus .vh-gate-dot,
#sidebar .vh-gate-dot,
.popover.popover-menu .vh-gate-dot,
.vh-project-dropdown-menu .vh-gate-dot {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  -webkit-border-radius: var(--radius-full);

  -moz-border-radius: var(--radius-full);

  -webkit-border-radius: var(--radius-full);


  -moz-border-radius: var(--radius-full);


  border-radius: var(--radius-full);
  background-color: var(--warning);
  pointer-events: none;
}
#sidebar .main-menu > li > a:has(> .vh-gate-dot) {
  position: relative;
}
#sidebar.has-submenu .main-menu > li > a > .vh-gate-dot {
  right: var(--space-2);
  top: var(--space-2);
  -webkit-transform: none;

  -moz-transform: none;

  -ms-transform: none;

  -webkit-transform: none;


  -moz-transform: none;


  -ms-transform: none;


  transform: none;
}

#sidebar .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on img {
  filter: var(--warning-filter) !important;
}

body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .fixed-bottom-nav-ul li a,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .sidebar-submenu a,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container ul.sidebar-submenu > li > ul > li,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .popover-body .account-li,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .popover-body .help-li {
  background-color: transparent;
  color: var(--gray-600) !important;
}

body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .fixed-bottom-nav-ul li a img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .sidebar-submenu a img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container ul.sidebar-submenu > li > ul > li img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .popover-body .account-li img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .popover-body .help-li img {
  filter: var(--gray-600-filter) !important;
}

/* Main rail only: submenu and popover rows retain their existing greys. */
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu > li > a,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .fixed-bottom-nav-ul > li > a {
  color: var(--gray-700) !important;
}
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu > li > a img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .fixed-bottom-nav-ul > li > a img {
  filter: var(--gray-700-filter) !important;
}

body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a:hover,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .fixed-bottom-nav-ul li a:not(.sys-mode-on):not(.dev-mode-on):hover,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .sidebar-submenu a:hover,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container ul.sidebar-submenu > li > ul > li:hover,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .popover-body .account-li:hover,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .popover-body .help-li:hover {
  background-color: var(--gray-25) !important;
  color: var(--gray-900) !important;
  text-decoration: none;
}

body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a:hover img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .fixed-bottom-nav-ul li a:not(.sys-mode-on):not(.dev-mode-on):hover img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .sidebar-submenu a:hover img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container ul.sidebar-submenu > li > ul > li:hover img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .popover-body .account-li:hover img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .popover-body .help-li:hover img {
  filter: var(--gray-900-filter) !important;
}

body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a.active,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a:focus,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a:focus-within,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .sidebar-submenu a.active,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .sidebar-submenu a:focus-within,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container ul.sidebar-submenu > li > ul > li.active,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container ul.sidebar-submenu > li > ul > li:focus-within {
  background-color: var(--gray-50) !important;
  color: var(--gray-925) !important;
}

body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a.active img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a:focus img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu li a:focus-within img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .sidebar-submenu a.active img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .sidebar-submenu a:focus-within img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container ul.sidebar-submenu > li > ul > li.active img,
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container ul.sidebar-submenu > li > ul > li:focus-within img {
  filter: var(--gray-900-filter) !important;
}

body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu > li > a:is(.active, :active, :focus, :focus-within) {
  color: var(--gray-950) !important;
}
body:not(.axis-site):not(.dark) #sidebar.sidebar-menu-container .main-menu > li > a:is(.active, :active, :focus, :focus-within) img {
  filter: var(--gray-950-filter) !important;
}

body:not(.axis-site):not(.dark) .sidebar-submenus .btn-submenu-action {
  color: var(--gray-925) !important;
}

body:not(.axis-site) #sidebar.sidebar-menu-container .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on,
body:not(.axis-site) #sidebar.sidebar-menu-container .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on:hover {
  color: var(--warning) !important;
}
body:not(.axis-site) #sidebar.sidebar-menu-container .fixed-bottom-nav-ul > li > a.btn-toggle-superuser.sys-mode-on img {
  filter: var(--warning-filter) !important;
}

/* End import from ./components/sidebar.css */
/* Imported from ./components/portlets.css */
/* No shadow. There was one here, and app-in-dev.css cancelled it on every page
   that loaded both — which was every page with a portlet on it. Portlets have
   rendered flat for as long as both files existed, so this is what already
   ships; the shadow was dead code that looked authoritative. */
.portlet {
  background-color: var(--white);
  color: var(--gray-900);
  margin-bottom: 2.5rem;
  height: 100%;
}

.portlet .head {
  display: table;
  padding: 0 2rem 0 2rem;
  height: 4rem;
  width: 100%;
  border-bottom: 1px solid var(--gray-200);
}

.portlet .head .title {
  display: table-cell;
  vertical-align: middle;
  font-size: 1.2rem;
  font-weight: 500;
}
/* End import from ./components/portlets.css */
/* Imported from ./components/content-area.css */
.main-content {
  color: var(--gray-900);
  position: relative;
}

.main-content .content-section {
  margin-bottom: 2.5rem;
}

.main-content .page-subheading {
  display: inline-block;
  padding: 0;
  margin-right: auto !important;
  margin-bottom: 2px;
}

.main-content .page-subheading h3 {
  padding: 7px 25px 5px 0;
  display: inline-block;
  vertical-align: middle;
  margin: 0 15px 0 0;
  color: var(--gray-900);
}

.main-content .page-subheading.with-seperator h3 {
  padding-right: 20px;
  border-right: 1px solid var(--sidebar-border);
}

.main-content .page-subheading ul.breadcrumbs {
  display: inline-block;
  width: auto;
  height: 100%;
  margin-bottom: 1px;
}

.main-content .page-subheading ul.breadcrumbs li {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.main-content .page-subheading ul.breadcrumbs li:not(:first-child):before {
  content: '\2192';
  margin-left: 5px;
  margin-right: 5px;
  color: var(--gray-800);
}

.vahara-main-wrap.container-fluid {
  padding: 0 !important;
}

.main-wrapper.with-sidebar {
  /* Non-account shells retain their existing content gutter. */
  padding-left: calc(var(--sidebar-total-width, var(--sidebar-width)) + 30px);
  padding-right: 30px;
  height: 100vh;
}

.main-wrapper.no-sidebar {
  padding-left: calc(0px + 30px);
  padding-right: 30px;
  height: 100vh;
}

.main-wrapper.with-sidebar {
    margin-right: 15px;
    margin-left: 15px;
    padding-right: 0px;
}

@media (max-width: 768px) {
    .main-wrapper {
        margin-left: 15px !important;
    }

}

/* End import from ./components/content-area.css */
/* Imported from ./components/custom.css */
@charset "UTF-8";
code {
  font-size: 87.5%;
  color: var(--warning);
  word-break: break-word;
  padding: 0.2rem 0.4rem;
  background: var(--gray-150);
}

body.coconut {
  background-color: var(--gray-25);
}

.alert {
  padding: 0.85rem 1.5rem;
  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;


  -moz-border-radius: 4px;


  -webkit-border-radius: 4px;



  -moz-border-radius: 4px;



  border-radius: 4px;
  position: relative;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.alert.alert-default {
  background: var(--gray-950);
  color: var(--gray-900);
}

.beta-link {
  color: var(--warning) !important;
}

.superuser-link {
  color: var(--warning) !important;
}

/* Left-nav and sub-menu items flagged superuser=1 emit `superuser-link1`
   (account.blade.php, style_pages.blade.php, submenu_links.blade.php) but no
   rule ever targeted it. Super-user-only items go orange so
   unreleased entries are obvious at a glance. */
.superuser-link1 {
  color: var(--warning) !important;
}

.superuser-area {
  background-color: color-mix(in oklch, var(--warning) 40%, transparent) !important;
}

.superuser-btn {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}

.superuser-box {
  border: 1px solid var(--warning) !important;
}

/** need area and box  with background and border **/
.main-header .btn.btn-primary {
  background: var(--secondary);
  border-color: var(--secondary);
}
.main-header .btn.btn-primary:focus, .main-header .btn.btn-primary.focus, .main-header .btn.btn-primary:hover {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h) !important;
  border-color: oklch(from var(--accent) calc(l - 0.025) c h) !important;
}

.structured-main-list .project-selection-info {
  background: transparent;
  border: none;
  padding: 0 7px;
  margin: 0;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--gray-800);
}
.structured-main-list .project-selection-info:hover svg path {
  fill: var(--gray-500);
}
.structured-main-list .square-service-block a .add-project-img-section {
  width: 100%;
  min-height: 176px;
  height: 176px;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  -webkit-border-radius: 3px;



  -moz-border-radius: 3px;



  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--gray-150);
}
.structured-main-list .square-service-block a .add-project-img-section .rounded-sec {
  width: 64px;
  height: 64px;
  border: 1px solid white;
  background-color: white;
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  -webkit-border-radius: 50%;



  -moz-border-radius: 50%;



  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--gray-800);
}
.structured-main-list .square-service-block a .add-project-desc-section {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  background-color: var(--gray-150);
  color: var(--secondary);
  text-align: center;
}
.structured-main-list .square-service-block a .add-project-desc-section:focus, .structured-main-list .square-service-block a .add-project-desc-section.focus, .structured-main-list .square-service-block a .add-project-desc-section:hover {
  background-color: var(--secondary);
  color: var(--white);
}
.structured-main-list .square-service-block a .add-project-desc-section .create-new-project-copy {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  letter-spacing: 0.5px;
}
.structured-main-list .square-service-block a:focus .add-project-desc-section, .structured-main-list .square-service-block a.focus .add-project-desc-section, .structured-main-list .square-service-block a:hover .add-project-desc-section {
  background-color: var(--secondary);
  color: var(--white);
  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);

  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);

  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);


  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);


  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);



  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);



  box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);
}
.structured-main-list .square-service-block a:focus .rounded-sec, .structured-main-list .square-service-block a.focus .rounded-sec, .structured-main-list .square-service-block a:hover .rounded-sec {
  color: var(--secondary);
}
.structured-main-list .square-service-block a {
  color: var(--gray-950);
}
.structured-main-list .square-service-block a h2 {
  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.01em;
  max-height: 37px;
  overflow: hidden;
}
.structured-main-list .square-service-block a:focus, .structured-main-list .square-service-block a.focus, .structured-main-list .square-service-block a:hover {
  color: var(--secondary);
}
.structured-main-list .square-service-block a.project-more-info {
  justify-content: center;
  /*height: 24px;
  width: 24px;
  //display: flex;

  &:hover {
      background-color: $gray150;
      -webkit-border-radius: 50%;

      -moz-border-radius: 50%;

      -webkit-border-radius: 50%;


      -moz-border-radius: 50%;


      -webkit-border-radius: 50%;



      -moz-border-radius: 50%;



      border-radius: 50%;
  }

  &:focus, &.focus, &:active, &.active, {
      background-color: $gray30;
      -webkit-border-radius: 50%;

      -moz-border-radius: 50%;

      -webkit-border-radius: 50%;


      -moz-border-radius: 50%;


      -webkit-border-radius: 50%;



      -moz-border-radius: 50%;



      border-radius: 50%;
  }*/
}
.structured-main-list .square-service-block a.project-more-info img {
  width: 24px;
}
.structured-main-list .project-desc-section.active a.project-more-info {
  background-color: var(--gray-200);
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  -webkit-border-radius: 50%;



  -moz-border-radius: 50%;



  border-radius: 50%;
}
.structured-main-list .project-desc-section.active a.project-more-info.more-options-light {
  background-color: var(--gray-150);
}
.structured-main-list .project-desc-section.active a.project-more-info.more-options-light img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
}
.structured-main-list .project-desc-section.active a.project-more-info .more-info-light-img {
  display: none !important;
}
.structured-main-list .project-desc-section.active a.project-more-info .more-info-dark-img {
  display: inline-block !important;
}

.project-edit-popover .account-li:hover {
  background-color: color-mix(in oklch, var(--primary) 6%, white);
}
.project-edit-popover .account-li:focus, .project-edit-popover .account-li:active {
  background-color: color-mix(in oklch, var(--primary) 12%, white);
}

.new-project-list-view .square-service-block .btn-open-project {
  display: none;
}
.new-project-list-view .square-service-block:focus .btn-open-project, .new-project-list-view .square-service-block.focus .btn-open-project, .new-project-list-view .square-service-block:hover .btn-open-project {
  display: block;
}

.popup-position-show .arrow {
  display: none !important;
}

.popup-position {
  width: 200px;
  background: var(--white);
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  -webkit-border-radius: 3px;



  -moz-border-radius: 3px;



  border-radius: 3px;
  border: none !important;
  -webkit-box-shadow: 0 1px 9px 1px rgba(0, 0, 0, 0.15);

  -moz-box-shadow: 0 1px 9px 1px rgba(0, 0, 0, 0.15);

  -webkit-box-shadow: 0 1px 9px 1px rgba(0, 0, 0, 0.15);


  -moz-box-shadow: 0 1px 9px 1px rgba(0, 0, 0, 0.15);


  -webkit-box-shadow: 0 1px 9px 1px rgba(0, 0, 0, 0.15);



  -moz-box-shadow: 0 1px 9px 1px rgba(0, 0, 0, 0.15);



  box-shadow: 0 1px 9px 1px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  left: -62px !important;
}
.popup-position .arrow {
  left: 150px !important;
}
.popup-position .account-li {
  height: 32px;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  -webkit-border-radius: 3px;



  -moz-border-radius: 3px;



  border-radius: 3px;
  display: flex;
}
.popup-position .account-li .hover-img {
  display: none;
}
.popup-position .account-li:focus, .popup-position .account-li.focus, .popup-position .account-li:hover {
  background-color: color-mix(in oklch, var(--primary) 6%, white);
}
.popup-position .account-li:focus .light, .popup-position .account-li.focus .light, .popup-position .account-li:hover .light {
  display: none;
}
.popup-position .account-li:focus .hover-img, .popup-position .account-li.focus .hover-img, .popup-position .account-li:hover .hover-img {
  display: inline-block;
}
.popup-position .account-li .span {
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--gray-950);
}

.show-project-selection-list {
  list-style: none;
  padding: 1px;
  margin-bottom: 0;
}
.show-project-selection-list li {
  height: 30px;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  -webkit-border-radius: 3px;



  -moz-border-radius: 3px;



  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 5px;
}
.show-project-selection-list li a {
  font-weight: normal;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: var(--gray-950);
  display: flex;
  align-items: center;
}

.popover, .vh-menu-list, .dropdown-menulist {
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  -webkit-border-radius: 6px;



  -moz-border-radius: 6px;



  border-radius: 6px;
}
.popover:not(.dropdown-menulist), .vh-menu-list:not(.dropdown-menulist), .dropdown-menulist:not(.dropdown-menulist) {
  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);



  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);



  box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  -webkit-border-radius: 6px;



  -moz-border-radius: 6px;



  border-radius: 6px;
  min-width: 200px;
  z-index: 999999 !important;
  border: none !important;
}
.tooltip {
  /* Tooltips and popovers are both Bootstrap plugins appended to
     document.body, so they share this stacking context and compete on
     z-index alone. The popover above is forced to 999999 !important;
     tooltips are the most transient layer and must always win, so this
     sits one above it. Bootstrap's own default (1070) left tooltips
     rendering behind an open popover. */
  z-index: 1000000 !important;
}
.popover.popover-menu .popover-body, .popover.vh-items .popover-body, .popover.dropdown-items .popover-body, .vh-menu-list.popover-menu .popover-body, .vh-menu-list.vh-items .popover-body, .vh-menu-list.dropdown-items .popover-body, .dropdown-menulist.popover-menu .popover-body, .dropdown-menulist.vh-items .popover-body, .dropdown-menulist.dropdown-items .popover-body {
  padding: 8px;
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  -webkit-border-radius: 10px;



  -moz-border-radius: 10px;



  border-radius: 10px;
}
.popover.popover-menu:not(.dropdown-items), .popover.vh-items:not(.dropdown-items), .popover.dropdown-items:not(.dropdown-items), .vh-menu-list.popover-menu:not(.dropdown-items), .vh-menu-list.vh-items:not(.dropdown-items), .vh-menu-list.dropdown-items:not(.dropdown-items), .dropdown-menulist.popover-menu:not(.dropdown-items), .dropdown-menulist.vh-items:not(.dropdown-items), .dropdown-menulist.dropdown-items:not(.dropdown-items) {
  width: 240px;
  padding: 0 !important;
  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  border-radius: 10px;
  border: none;
  margin-bottom: 20px;
  background: var(--popover);
  color: var(--popover-foreground);
}
.popover.popover-menu .top-label-28, .popover.popover-menu .top-label-32, .popover.vh-items .top-label-28, .popover.vh-items .top-label-32, .popover.dropdown-items .top-label-28, .popover.dropdown-items .top-label-32, .vh-menu-list.popover-menu .top-label-28, .vh-menu-list.popover-menu .top-label-32, .vh-menu-list.vh-items .top-label-28, .vh-menu-list.vh-items .top-label-32, .vh-menu-list.dropdown-items .top-label-28, .vh-menu-list.dropdown-items .top-label-32, .dropdown-menulist.popover-menu .top-label-28, .dropdown-menulist.popover-menu .top-label-32, .dropdown-menulist.vh-items .top-label-28, .dropdown-menulist.vh-items .top-label-32, .dropdown-menulist.dropdown-items .top-label-28, .dropdown-menulist.dropdown-items .top-label-32 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0;
}
.popover.popover-menu .top-label-28, .popover.vh-items .top-label-28, .popover.dropdown-items .top-label-28, .vh-menu-list.popover-menu .top-label-28, .vh-menu-list.vh-items .top-label-28, .vh-menu-list.dropdown-items .top-label-28, .dropdown-menulist.popover-menu .top-label-28, .dropdown-menulist.vh-items .top-label-28, .dropdown-menulist.dropdown-items .top-label-28 {
  padding: 6px 8px;
}
.popover.popover-menu .top-label-32, .popover.vh-items .top-label-32, .popover.dropdown-items .top-label-32, .vh-menu-list.popover-menu .top-label-32, .vh-menu-list.vh-items .top-label-32, .vh-menu-list.dropdown-items .top-label-32, .dropdown-menulist.popover-menu .top-label-32, .dropdown-menulist.vh-items .top-label-32, .dropdown-menulist.dropdown-items .top-label-32 {
  padding: 7.5px 8px 8.5px;
}
.popover.popover-menu hr, .popover.vh-items hr, .popover.dropdown-items hr, .vh-menu-list.popover-menu hr, .vh-menu-list.vh-items hr, .vh-menu-list.dropdown-items hr, .dropdown-menulist.popover-menu hr, .dropdown-menulist.vh-items hr, .dropdown-menulist.dropdown-items hr {
  border: none;
  border-bottom: 1px solid var(--gray-50);
  margin: 8.5px 0;
}
.popover.popover-menu ul, .popover.vh-items ul, .popover.dropdown-items ul, .vh-menu-list.popover-menu ul, .vh-menu-list.vh-items ul, .vh-menu-list.dropdown-items ul, .dropdown-menulist.popover-menu ul, .dropdown-menulist.vh-items ul, .dropdown-menulist.dropdown-items ul {
  margin: 0;
}
.popover.popover-menu ul li, .popover.vh-items ul li, .popover.dropdown-items ul li, .vh-menu-list.popover-menu ul li, .vh-menu-list.vh-items ul li, .vh-menu-list.dropdown-items ul li, .dropdown-menulist.popover-menu ul li, .dropdown-menulist.vh-items ul li, .dropdown-menulist.dropdown-items ul li {
  height: 34px;
  padding: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.01em;
  width: 100%;
  color: var(--gray-950);
}
.popover.popover-menu ul li.vahara-menu, .popover.vh-items ul li.vahara-menu, .popover.dropdown-items ul li.vahara-menu, .vh-menu-list.popover-menu ul li.vahara-menu, .vh-menu-list.vh-items ul li.vahara-menu, .vh-menu-list.dropdown-items ul li.vahara-menu, .dropdown-menulist.popover-menu ul li.vahara-menu, .dropdown-menulist.vh-items ul li.vahara-menu, .dropdown-menulist.dropdown-items ul li.vahara-menu {
  padding: 5px 6px;
}
.popover.popover-menu ul li.vahara-menu img, .popover.vh-items ul li.vahara-menu img, .popover.dropdown-items ul li.vahara-menu img, .vh-menu-list.popover-menu ul li.vahara-menu img, .vh-menu-list.vh-items ul li.vahara-menu img, .vh-menu-list.dropdown-items ul li.vahara-menu img, .dropdown-menulist.popover-menu ul li.vahara-menu img, .dropdown-menulist.vh-items ul li.vahara-menu img, .dropdown-menulist.dropdown-items ul li.vahara-menu img {
  margin-right: 10px;
}
.popover.popover-menu ul li:not(.vahara-menu), .popover.vh-items ul li:not(.vahara-menu), .popover.dropdown-items ul li:not(.vahara-menu), .vh-menu-list.popover-menu ul li:not(.vahara-menu), .vh-menu-list.vh-items ul li:not(.vahara-menu), .vh-menu-list.dropdown-items ul li:not(.vahara-menu), .dropdown-menulist.popover-menu ul li:not(.vahara-menu), .dropdown-menulist.vh-items ul li:not(.vahara-menu), .dropdown-menulist.dropdown-items ul li:not(.vahara-menu) {
  padding: 7px 8px;
}
.popover.popover-menu ul li:not(.vahara-menu) img, .popover.vh-items ul li:not(.vahara-menu) img, .popover.dropdown-items ul li:not(.vahara-menu) img, .vh-menu-list.popover-menu ul li:not(.vahara-menu) img, .vh-menu-list.vh-items ul li:not(.vahara-menu) img, .vh-menu-list.dropdown-items ul li:not(.vahara-menu) img, .dropdown-menulist.popover-menu ul li:not(.vahara-menu) img, .dropdown-menulist.vh-items ul li:not(.vahara-menu) img, .dropdown-menulist.dropdown-items ul li:not(.vahara-menu) img {
  margin-right: 12px;
}
.popover.popover-menu ul li label, .popover.popover-menu ul li .vh-checkbox-input, .popover.vh-items ul li label, .popover.vh-items ul li .vh-checkbox-input, .popover.dropdown-items ul li label, .popover.dropdown-items ul li .vh-checkbox-input, .vh-menu-list.popover-menu ul li label, .vh-menu-list.popover-menu ul li .vh-checkbox-input, .vh-menu-list.vh-items ul li label, .vh-menu-list.vh-items ul li .vh-checkbox-input, .vh-menu-list.dropdown-items ul li label, .vh-menu-list.dropdown-items ul li .vh-checkbox-input, .dropdown-menulist.popover-menu ul li label, .dropdown-menulist.popover-menu ul li .vh-checkbox-input, .dropdown-menulist.vh-items ul li label, .dropdown-menulist.vh-items ul li .vh-checkbox-input, .dropdown-menulist.dropdown-items ul li label, .dropdown-menulist.dropdown-items ul li .vh-checkbox-input {
  margin: 0;
}
.popover.popover-menu ul li.vahara-menu > :first-child:not(a), .popover.vh-items ul li.vahara-menu > :first-child:not(a), .popover.dropdown-items ul li.vahara-menu > :first-child:not(a), .vh-menu-list.popover-menu ul li.vahara-menu > :first-child:not(a), .vh-menu-list.vh-items ul li.vahara-menu > :first-child:not(a), .vh-menu-list.dropdown-items ul li.vahara-menu > :first-child:not(a), .dropdown-menulist.popover-menu ul li.vahara-menu > :first-child:not(a), .dropdown-menulist.vh-items ul li.vahara-menu > :first-child:not(a), .dropdown-menulist.dropdown-items ul li.vahara-menu > :first-child:not(a) {
  /* Scoped to .vahara-menu: that variant's own li padding is 5px 6px (below),
     so its first child needs its own 8px to match the 8px every other row
     gets from the li itself. Applying this to every li double-counted the
     inset whenever the first child wasn't an <a> — an <a> gets its own
     padding:0 reset and so never showed it, but a plain wrapper div (the
     Selection Controls pattern, and MenuSelectionRow in PopoverMenu.js) has
     no such reset, so its text sat 8px deeper than the section label above
     it. Every live .vahara-menu row's first child is an <a> anyway (see
     app-standard-header.blade.php), so this scoping changes nothing there —
     it only stops the rule reaching rows it was never meant to touch. */
  padding-left: 8px;
  padding-right: 8px;
}
.popover.popover-menu ul li a, .popover.vh-items ul li a, .popover.dropdown-items ul li a, .vh-menu-list.popover-menu ul li a, .vh-menu-list.vh-items ul li a, .vh-menu-list.dropdown-items ul li a, .dropdown-menulist.popover-menu ul li a, .dropdown-menulist.vh-items ul li a, .dropdown-menulist.dropdown-items ul li a {
  height: 34px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.01em;
  width: 100%;
  color: var(--gray-950);
  display: flex;
  align-items: center;
}
.popover.popover-menu ul li a:has(.icon-end) svg.icon-end, .popover.popover-menu ul li a:has(.icon-end) img.icon-end, .popover.vh-items ul li a:has(.icon-end) svg.icon-end, .popover.vh-items ul li a:has(.icon-end) img.icon-end, .popover.dropdown-items ul li a:has(.icon-end) svg.icon-end, .popover.dropdown-items ul li a:has(.icon-end) img.icon-end, .vh-menu-list.popover-menu ul li a:has(.icon-end) svg.icon-end, .vh-menu-list.popover-menu ul li a:has(.icon-end) img.icon-end, .vh-menu-list.vh-items ul li a:has(.icon-end) svg.icon-end, .vh-menu-list.vh-items ul li a:has(.icon-end) img.icon-end, .vh-menu-list.dropdown-items ul li a:has(.icon-end) svg.icon-end, .vh-menu-list.dropdown-items ul li a:has(.icon-end) img.icon-end, .dropdown-menulist.popover-menu ul li a:has(.icon-end) svg.icon-end, .dropdown-menulist.popover-menu ul li a:has(.icon-end) img.icon-end, .dropdown-menulist.vh-items ul li a:has(.icon-end) svg.icon-end, .dropdown-menulist.vh-items ul li a:has(.icon-end) img.icon-end, .dropdown-menulist.dropdown-items ul li a:has(.icon-end) svg.icon-end, .dropdown-menulist.dropdown-items ul li a:has(.icon-end) img.icon-end {
  float: right;
  margin-left: auto;
  filter: brightness(0) saturate(100%) invert(82%) sepia(19%) saturate(120%) hue-rotate(152deg) brightness(95%) contrast(87%);
}
.popover.popover-menu ul li a:has(.icon-end):hover svg.icon-end, .popover.popover-menu ul li a:has(.icon-end):hover img.icon-end, .popover.vh-items ul li a:has(.icon-end):hover svg.icon-end, .popover.vh-items ul li a:has(.icon-end):hover img.icon-end, .popover.dropdown-items ul li a:has(.icon-end):hover svg.icon-end, .popover.dropdown-items ul li a:has(.icon-end):hover img.icon-end, .vh-menu-list.popover-menu ul li a:has(.icon-end):hover svg.icon-end, .vh-menu-list.popover-menu ul li a:has(.icon-end):hover img.icon-end, .vh-menu-list.vh-items ul li a:has(.icon-end):hover svg.icon-end, .vh-menu-list.vh-items ul li a:has(.icon-end):hover img.icon-end, .vh-menu-list.dropdown-items ul li a:has(.icon-end):hover svg.icon-end, .vh-menu-list.dropdown-items ul li a:has(.icon-end):hover img.icon-end, .dropdown-menulist.popover-menu ul li a:has(.icon-end):hover svg.icon-end, .dropdown-menulist.popover-menu ul li a:has(.icon-end):hover img.icon-end, .dropdown-menulist.vh-items ul li a:has(.icon-end):hover svg.icon-end, .dropdown-menulist.vh-items ul li a:has(.icon-end):hover img.icon-end, .dropdown-menulist.dropdown-items ul li a:has(.icon-end):hover svg.icon-end, .dropdown-menulist.dropdown-items ul li a:has(.icon-end):hover img.icon-end {
  display: inline-block;
}
.popover.popover-menu ul li a img, .popover.vh-items ul li a img, .popover.dropdown-items ul li a img, .vh-menu-list.popover-menu ul li a img, .vh-menu-list.vh-items ul li a img, .vh-menu-list.dropdown-items ul li a img, .dropdown-menulist.popover-menu ul li a img, .dropdown-menulist.vh-items ul li a img, .dropdown-menulist.dropdown-items ul li a img {
  width: 20px;
}
.popover.popover-menu ul li a img:last-child:not(:first-child), .popover.vh-items ul li a img:last-child:not(:first-child), .popover.dropdown-items ul li a img:last-child:not(:first-child), .vh-menu-list.popover-menu ul li a img:last-child:not(:first-child), .vh-menu-list.vh-items ul li a img:last-child:not(:first-child), .vh-menu-list.dropdown-items ul li a img:last-child:not(:first-child), .dropdown-menulist.popover-menu ul li a img:last-child:not(:first-child), .dropdown-menulist.vh-items ul li a img:last-child:not(:first-child), .dropdown-menulist.dropdown-items ul li a img:last-child:not(:first-child) {
  margin-right: 0 !important;
}
.popover.popover-menu ul li a:hover, .popover.vh-items ul li a:hover, .popover.dropdown-items ul li a:hover, .vh-menu-list.popover-menu ul li a:hover, .vh-menu-list.vh-items ul li a:hover, .vh-menu-list.dropdown-items ul li a:hover, .dropdown-menulist.popover-menu ul li a:hover, .dropdown-menulist.vh-items ul li a:hover, .dropdown-menulist.dropdown-items ul li a:hover {
  text-decoration: none;
}
.popover.popover-menu ul li a:hover svg:first-child:not(.icon-end) path, .popover.popover-menu ul li a:hover img:first-child:not(.icon-end) path, .popover.vh-items ul li a:hover svg:first-child:not(.icon-end) path, .popover.vh-items ul li a:hover img:first-child:not(.icon-end) path, .popover.dropdown-items ul li a:hover svg:first-child:not(.icon-end) path, .popover.dropdown-items ul li a:hover img:first-child:not(.icon-end) path, .vh-menu-list.popover-menu ul li a:hover svg:first-child:not(.icon-end) path, .vh-menu-list.popover-menu ul li a:hover img:first-child:not(.icon-end) path, .vh-menu-list.vh-items ul li a:hover svg:first-child:not(.icon-end) path, .vh-menu-list.vh-items ul li a:hover img:first-child:not(.icon-end) path, .vh-menu-list.dropdown-items ul li a:hover svg:first-child:not(.icon-end) path, .vh-menu-list.dropdown-items ul li a:hover img:first-child:not(.icon-end) path, .dropdown-menulist.popover-menu ul li a:hover svg:first-child:not(.icon-end) path, .dropdown-menulist.popover-menu ul li a:hover img:first-child:not(.icon-end) path, .dropdown-menulist.vh-items ul li a:hover svg:first-child:not(.icon-end) path, .dropdown-menulist.vh-items ul li a:hover img:first-child:not(.icon-end) path, .dropdown-menulist.dropdown-items ul li a:hover svg:first-child:not(.icon-end) path, .dropdown-menulist.dropdown-items ul li a:hover img:first-child:not(.icon-end) path {
  fill: var(--gray-950) !important;
}
.popover.popover-menu ul li a:hover svg:last-child:not(:first-child), .popover.popover-menu ul li a:hover img:last-child:not(:first-child), .popover.vh-items ul li a:hover svg:last-child:not(:first-child), .popover.vh-items ul li a:hover img:last-child:not(:first-child), .popover.dropdown-items ul li a:hover svg:last-child:not(:first-child), .popover.dropdown-items ul li a:hover img:last-child:not(:first-child), .vh-menu-list.popover-menu ul li a:hover svg:last-child:not(:first-child), .vh-menu-list.popover-menu ul li a:hover img:last-child:not(:first-child), .vh-menu-list.vh-items ul li a:hover svg:last-child:not(:first-child), .vh-menu-list.vh-items ul li a:hover img:last-child:not(:first-child), .vh-menu-list.dropdown-items ul li a:hover svg:last-child:not(:first-child), .vh-menu-list.dropdown-items ul li a:hover img:last-child:not(:first-child), .dropdown-menulist.popover-menu ul li a:hover svg:last-child:not(:first-child), .dropdown-menulist.popover-menu ul li a:hover img:last-child:not(:first-child), .dropdown-menulist.vh-items ul li a:hover svg:last-child:not(:first-child), .dropdown-menulist.vh-items ul li a:hover img:last-child:not(:first-child), .dropdown-menulist.dropdown-items ul li a:hover svg:last-child:not(:first-child), .dropdown-menulist.dropdown-items ul li a:hover img:last-child:not(:first-child) {
  display: inline-block;
}
.popover.popover-menu ul li a:focus svg:first-child:not(.icon-end) path, .popover.vh-items ul li a:focus svg:first-child:not(.icon-end) path, .popover.dropdown-items ul li a:focus svg:first-child:not(.icon-end) path, .vh-menu-list.popover-menu ul li a:focus svg:first-child:not(.icon-end) path, .vh-menu-list.vh-items ul li a:focus svg:first-child:not(.icon-end) path, .vh-menu-list.dropdown-items ul li a:focus svg:first-child:not(.icon-end) path, .dropdown-menulist.popover-menu ul li a:focus svg:first-child:not(.icon-end) path, .dropdown-menulist.vh-items ul li a:focus svg:first-child:not(.icon-end) path, .dropdown-menulist.dropdown-items ul li a:focus svg:first-child:not(.icon-end) path {
  fill: var(--gray-950) !important;
}
.popover.popover-menu ul li a:focus img:first-child:not(.icon-end), .popover.vh-items ul li a:focus img:first-child:not(.icon-end), .popover.dropdown-items ul li a:focus img:first-child:not(.icon-end), .vh-menu-list.popover-menu ul li a:focus img:first-child:not(.icon-end), .vh-menu-list.vh-items ul li a:focus img:first-child:not(.icon-end), .vh-menu-list.dropdown-items ul li a:focus img:first-child:not(.icon-end), .dropdown-menulist.popover-menu ul li a:focus img:first-child:not(.icon-end), .dropdown-menulist.vh-items ul li a:focus img:first-child:not(.icon-end), .dropdown-menulist.dropdown-items ul li a:focus img:first-child:not(.icon-end) {
  filter: brightness(0) saturate(100%) invert(7%) sepia(12%) saturate(2639%) hue-rotate(146deg) brightness(96%) contrast(99%);
}
.popover.popover-menu ul li a:focus img.vh-icon-hover:first-child:not(.icon-end), .popover.vh-items ul li a:focus img.vh-icon-hover:first-child:not(.icon-end), .popover.dropdown-items ul li a:focus img.vh-icon-hover:first-child:not(.icon-end), .vh-menu-list.popover-menu ul li a:focus img.vh-icon-hover:first-child:not(.icon-end), .vh-menu-list.vh-items ul li a:focus img.vh-icon-hover:first-child:not(.icon-end), .vh-menu-list.dropdown-items ul li a:focus img.vh-icon-hover:first-child:not(.icon-end), .dropdown-menulist.popover-menu ul li a:focus img.vh-icon-hover:first-child:not(.icon-end), .dropdown-menulist.vh-items ul li a:focus img.vh-icon-hover:first-child:not(.icon-end), .dropdown-menulist.dropdown-items ul li a:focus img.vh-icon-hover:first-child:not(.icon-end) {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}
.popover.popover-menu ul li a svg:last-child:not(:first-child), .popover.popover-menu ul li a img:last-child:not(:first-child), .popover.vh-items ul li a svg:last-child:not(:first-child), .popover.vh-items ul li a img:last-child:not(:first-child), .popover.dropdown-items ul li a svg:last-child:not(:first-child), .popover.dropdown-items ul li a img:last-child:not(:first-child), .vh-menu-list.popover-menu ul li a svg:last-child:not(:first-child), .vh-menu-list.popover-menu ul li a img:last-child:not(:first-child), .vh-menu-list.vh-items ul li a svg:last-child:not(:first-child), .vh-menu-list.vh-items ul li a img:last-child:not(:first-child), .vh-menu-list.dropdown-items ul li a svg:last-child:not(:first-child), .vh-menu-list.dropdown-items ul li a img:last-child:not(:first-child), .dropdown-menulist.popover-menu ul li a svg:last-child:not(:first-child), .dropdown-menulist.popover-menu ul li a img:last-child:not(:first-child), .dropdown-menulist.vh-items ul li a svg:last-child:not(:first-child), .dropdown-menulist.vh-items ul li a img:last-child:not(:first-child), .dropdown-menulist.dropdown-items ul li a svg:last-child:not(:first-child), .dropdown-menulist.dropdown-items ul li a img:last-child:not(:first-child) {
  float: right;
  margin-left: auto;
  filter: brightness(0) saturate(100%) invert(82%) sepia(19%) saturate(120%) hue-rotate(152deg) brightness(95%) contrast(87%);
}
.popover.popover-menu ul li a:last-child:not(:first-child), .popover.vh-items ul li a:last-child:not(:first-child), .popover.dropdown-items ul li a:last-child:not(:first-child), .vh-menu-list.popover-menu ul li a:last-child:not(:first-child), .vh-menu-list.vh-items ul li a:last-child:not(:first-child), .vh-menu-list.dropdown-items ul li a:last-child:not(:first-child), .dropdown-menulist.popover-menu ul li a:last-child:not(:first-child), .dropdown-menulist.vh-items ul li a:last-child:not(:first-child), .dropdown-menulist.dropdown-items ul li a:last-child:not(:first-child) {
  width: 30px;
  padding-left: 0 !important;
  position: absolute;
  right: 12px;
  z-index: 9;
}
.popover.popover-menu ul li .svg-icon, .popover.vh-items ul li .svg-icon, .popover.dropdown-items ul li .svg-icon, .vh-menu-list.popover-menu ul li .svg-icon, .vh-menu-list.vh-items ul li .svg-icon, .vh-menu-list.dropdown-items ul li .svg-icon, .dropdown-menulist.popover-menu ul li .svg-icon, .dropdown-menulist.vh-items ul li .svg-icon, .dropdown-menulist.dropdown-items ul li .svg-icon {
  fill: var(--gray-500);
}
.popover.popover-menu ul li:hover, .popover.vh-items ul li:hover, .popover.dropdown-items ul li:hover, .vh-menu-list.popover-menu ul li:hover, .vh-menu-list.vh-items ul li:hover, .vh-menu-list.dropdown-items ul li:hover, .dropdown-menulist.popover-menu ul li:hover, .dropdown-menulist.vh-items ul li:hover, .dropdown-menulist.dropdown-items ul li:hover {
  background: var(--muted) !important;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  -webkit-border-radius: 6px;



  -moz-border-radius: 6px;



  border-radius: 6px;
}
.popover.popover-menu ul li:hover .svg-icon, .popover.vh-items ul li:hover .svg-icon, .popover.dropdown-items ul li:hover .svg-icon, .vh-menu-list.popover-menu ul li:hover .svg-icon, .vh-menu-list.vh-items ul li:hover .svg-icon, .vh-menu-list.dropdown-items ul li:hover .svg-icon, .dropdown-menulist.popover-menu ul li:hover .svg-icon, .dropdown-menulist.vh-items ul li:hover .svg-icon, .dropdown-menulist.dropdown-items ul li:hover .svg-icon {
  fill: var(--primary) !important;
}
.popover.popover-menu ul li:hover .icon-end, .popover.popover-menu ul li:hover img.vh-icon-hover:last-child:not(:first-child), .popover.vh-items ul li:hover .icon-end, .popover.vh-items ul li:hover img.vh-icon-hover:last-child:not(:first-child), .popover.dropdown-items ul li:hover .icon-end, .popover.dropdown-items ul li:hover img.vh-icon-hover:last-child:not(:first-child), .vh-menu-list.popover-menu ul li:hover .icon-end, .vh-menu-list.popover-menu ul li:hover img.vh-icon-hover:last-child:not(:first-child), .vh-menu-list.vh-items ul li:hover .icon-end, .vh-menu-list.vh-items ul li:hover img.vh-icon-hover:last-child:not(:first-child), .vh-menu-list.dropdown-items ul li:hover .icon-end, .vh-menu-list.dropdown-items ul li:hover img.vh-icon-hover:last-child:not(:first-child), .dropdown-menulist.popover-menu ul li:hover .icon-end, .dropdown-menulist.popover-menu ul li:hover img.vh-icon-hover:last-child:not(:first-child), .dropdown-menulist.vh-items ul li:hover .icon-end, .dropdown-menulist.vh-items ul li:hover img.vh-icon-hover:last-child:not(:first-child), .dropdown-menulist.dropdown-items ul li:hover .icon-end, .dropdown-menulist.dropdown-items ul li:hover img.vh-icon-hover:last-child:not(:first-child) {
  display: inline-block !important;
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
}
.popover.popover-menu ul li:hover img.vh-icon-hover:first-child:not(.icon-end), .popover.vh-items ul li:hover img.vh-icon-hover:first-child:not(.icon-end), .popover.dropdown-items ul li:hover img.vh-icon-hover:first-child:not(.icon-end), .vh-menu-list.popover-menu ul li:hover img.vh-icon-hover:first-child:not(.icon-end), .vh-menu-list.vh-items ul li:hover img.vh-icon-hover:first-child:not(.icon-end), .vh-menu-list.dropdown-items ul li:hover img.vh-icon-hover:first-child:not(.icon-end), .dropdown-menulist.popover-menu ul li:hover img.vh-icon-hover:first-child:not(.icon-end), .dropdown-menulist.vh-items ul li:hover img.vh-icon-hover:first-child:not(.icon-end), .dropdown-menulist.dropdown-items ul li:hover img.vh-icon-hover:first-child:not(.icon-end) {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}
.popover.popover-menu ul li:hover img.vh-icon-dark-hover:first-child:not(.icon-end), .popover.vh-items ul li:hover img.vh-icon-dark-hover:first-child:not(.icon-end), .popover.dropdown-items ul li:hover img.vh-icon-dark-hover:first-child:not(.icon-end), .vh-menu-list.popover-menu ul li:hover img.vh-icon-dark-hover:first-child:not(.icon-end), .vh-menu-list.vh-items ul li:hover img.vh-icon-dark-hover:first-child:not(.icon-end), .vh-menu-list.dropdown-items ul li:hover img.vh-icon-dark-hover:first-child:not(.icon-end), .dropdown-menulist.popover-menu ul li:hover img.vh-icon-dark-hover:first-child:not(.icon-end), .dropdown-menulist.vh-items ul li:hover img.vh-icon-dark-hover:first-child:not(.icon-end), .dropdown-menulist.dropdown-items ul li:hover img.vh-icon-dark-hover:first-child:not(.icon-end) {
  filter: brightness(0) saturate(100%) invert(7%) sepia(12%) saturate(2639%) hue-rotate(146deg) brightness(96%) contrast(99%);
}
.popover.popover-menu ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .popover.popover-menu ul li:hover img.vh-icon-dark-hover-warning:first-child:not(.icon-end):not(.icon-simple), .popover.vh-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .popover.vh-items ul li:hover img.vh-icon-dark-hover-warning:first-child:not(.icon-end):not(.icon-simple), .popover.dropdown-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .popover.dropdown-items ul li:hover img.vh-icon-dark-hover-warning:first-child:not(.icon-end):not(.icon-simple), .vh-menu-list.popover-menu ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .vh-menu-list.popover-menu ul li:hover img.vh-icon-dark-hover-warning:first-child:not(.icon-end):not(.icon-simple), .vh-menu-list.vh-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .vh-menu-list.vh-items ul li:hover img.vh-icon-dark-hover-warning:first-child:not(.icon-end):not(.icon-simple), .vh-menu-list.dropdown-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .vh-menu-list.dropdown-items ul li:hover img.vh-icon-dark-hover-warning:first-child:not(.icon-end):not(.icon-simple), .dropdown-menulist.popover-menu ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .dropdown-menulist.popover-menu ul li:hover img.vh-icon-dark-hover-warning:first-child:not(.icon-end):not(.icon-simple), .dropdown-menulist.vh-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .dropdown-menulist.vh-items ul li:hover img.vh-icon-dark-hover-warning:first-child:not(.icon-end):not(.icon-simple), .dropdown-menulist.dropdown-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .dropdown-menulist.dropdown-items ul li:hover img.vh-icon-dark-hover-warning:first-child:not(.icon-end):not(.icon-simple) {
  filter: invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}
.popover.popover-menu ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .popover.vh-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .popover.dropdown-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .vh-menu-list.popover-menu ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .vh-menu-list.vh-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .vh-menu-list.dropdown-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .dropdown-menulist.popover-menu ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .dropdown-menulist.vh-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), .dropdown-menulist.dropdown-items ul li:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end) {
  filter: invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}
.popover.popover-menu ul li:focus, .popover.vh-items ul li:focus, .popover.dropdown-items ul li:focus, .vh-menu-list.popover-menu ul li:focus, .vh-menu-list.vh-items ul li:focus, .vh-menu-list.dropdown-items ul li:focus, .dropdown-menulist.popover-menu ul li:focus, .dropdown-menulist.vh-items ul li:focus, .dropdown-menulist.dropdown-items ul li:focus {
  background: var(--gray-50) !important;
}
.popover.vh-items:not(.popover-menu), .vh-menu-list.vh-items:not(.popover-menu), .dropdown-menulist.vh-items:not(.popover-menu) {
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  -webkit-box-shadow: none;



  -moz-box-shadow: none;



  box-shadow: none;
  width: 100%;
}
.popover.vh-items:not(.popover-menu) ul li svg:first-child:not(.icon-end), .popover.vh-items:not(.popover-menu) ul li img:first-child:not(.icon-end), .vh-menu-list.vh-items:not(.popover-menu) ul li svg:first-child:not(.icon-end), .vh-menu-list.vh-items:not(.popover-menu) ul li img:first-child:not(.icon-end), .dropdown-menulist.vh-items:not(.popover-menu) ul li svg:first-child:not(.icon-end), .dropdown-menulist.vh-items:not(.popover-menu) ul li img:first-child:not(.icon-end) {
  margin-right: 12px;
}
.popover.no-arrow .arrow, .vh-menu-list.no-arrow .arrow, .dropdown-menulist.no-arrow .arrow {
  display: none !important;
}
.popover.popover[x-placement^=right-end], .popover.popover[x-placement^=right-start], .vh-menu-list.popover[x-placement^=right-end], .vh-menu-list.popover[x-placement^=right-start], .dropdown-menulist.popover[x-placement^=right-end], .dropdown-menulist.popover[x-placement^=right-start] {
  margin-left: 0.5rem;
  margin-bottom: 0;
}
.popover.popover[x-placement^=left-start], .popover.popover[x-placement^=left-end], .vh-menu-list.popover[x-placement^=left-start], .vh-menu-list.popover[x-placement^=left-end], .dropdown-menulist.popover[x-placement^=left-start], .dropdown-menulist.popover[x-placement^=left-end] {
  margin-right: 0.5rem;
}
.popover.popover[x-placement^=bottom-end], .popover.popover[x-placement^=bottom-start], .vh-menu-list.popover[x-placement^=bottom-end], .vh-menu-list.popover[x-placement^=bottom-start], .dropdown-menulist.popover[x-placement^=bottom-end], .dropdown-menulist.popover[x-placement^=bottom-start] {
  margin-top: 3.47px;
}
.popover.popover[x-placement^=bottom-end], .vh-menu-list.popover[x-placement^=bottom-end], .dropdown-menulist.popover[x-placement^=bottom-end] {
  right: 0;
}
.popover.popover[x-placement^=top-start], .popover.popover[x-placement^=top-end], .vh-menu-list.popover[x-placement^=top-start], .vh-menu-list.popover[x-placement^=top-end], .dropdown-menulist.popover[x-placement^=top-start], .dropdown-menulist.popover[x-placement^=top-end] {
  margin-bottom: 0.5rem;
}

/*Right start*/
li a:hover, li a.active, li a:focus-within {
  text-decoration: none;
}
li a:hover svg:first-child:not(.icon-end) path, li a:hover img:first-child:not(.icon-end) path, li a.active svg:first-child:not(.icon-end) path, li a.active img:first-child:not(.icon-end) path, li a:focus-within svg:first-child:not(.icon-end) path, li a:focus-within img:first-child:not(.icon-end) path {
  fill: var(--gray-950) !important;
}
li a:hover svg:last-child:not(:first-child), li a:hover img:last-child:not(:first-child), li a.active svg:last-child:not(:first-child), li a.active img:last-child:not(:first-child), li a:focus-within svg:last-child:not(:first-child), li a:focus-within img:last-child:not(:first-child) {
  display: inline-block;
}
li a:hover img.vh-icon-hover:first-child:not(.icon-end), li a.active img.vh-icon-hover:first-child:not(.icon-end), li a:focus-within img.vh-icon-hover:first-child:not(.icon-end) {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}
li a:hover img.vh-icon-dark-hover:first-child:not(.icon-end), li a.active img.vh-icon-dark-hover:first-child:not(.icon-end), li a:focus-within img.vh-icon-dark-hover:first-child:not(.icon-end) {
  filter: brightness(0) saturate(100%) invert(7%) sepia(12%) saturate(2639%) hue-rotate(146deg) brightness(96%) contrast(99%);
}
li a:hover img.vh-icon-warning-dark-hover:first-child:not(.icon-end), li a:hover img.vh-icon-error-dark-hover:first-child:not(.icon-end), li a.active img.vh-icon-warning-dark-hover:first-child:not(.icon-end), li a.active img.vh-icon-error-dark-hover:first-child:not(.icon-end), li a:focus-within img.vh-icon-warning-dark-hover:first-child:not(.icon-end), li a:focus-within img.vh-icon-error-dark-hover:first-child:not(.icon-end) {
  filter: invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}
li a:focus, li a:focus-within {
  background: color-mix(in oklch, var(--primary) 12%, white);
}
li a:focus svg:first-child:not(.icon-end) path, li a:focus-within svg:first-child:not(.icon-end) path {
  fill: var(--gray-950) !important;
}
li a:focus img.vh-icon-hover:first-child:not(.icon-end), li a:focus-within img.vh-icon-hover:first-child:not(.icon-end) {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}

.popover[x-placement^=right-start] > .arrow, .popover[x-placement^=right-end] > .arrow {
  left: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.popover[x-placement^=right-start] > .arrow::before, .popover[x-placement^=right-end] > .arrow::before {
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgba(0, 0, 0, 0.03);
}

.popover[x-placement^=right-start] > .arrow::after, .popover[x-placement^=right-end] > .arrow::after {
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: var(--white);
}

/*LEFT START*/
.popover[x-placement^=left-start] > .arrow, .popover[x-placement^=left-end] > .arrow {
  right: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.popover[x-placement^=left-start] > .arrow::before, .popover[x-placement^=left-end] > .arrow::before {
  right: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: rgba(0, 0, 0, 0.03);
}

.popover[x-placement^=left-start] > .arrow::after, .popover[x-placement^=left-end] > .arrow::after {
  right: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: var(--white);
}

/* Bottom start */
.popover[x-placement^=bottom-start] > .arrow, .popover[x-placement^=bottom-end] > .arrow {
  top: calc(-0.4rem - 1px);
}

.popover[x-placement^=bottom-end] > .arrow {
  right: 14px !important;
  left: auto !important;
}

.popover[x-placement^=bottom-start] > .arrow::before, .popover[x-placement^=bottom-end] > .arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgba(0, 0, 0, 0.03);
}

.popover[x-placement^=bottom-start] > .arrow::after, .popover[x-placement^=bottom-end] > .arrow::after {
  top: 1px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: var(--white);
}

/*top-start*/
.popover[x-placement^=top-end] > .arrow, .popover[x-placement^=top-start] > .arrow {
  bottom: calc(-0.5rem - 1px);
}

.popover[x-placement^=top-start] > .arrow::before, .popover[x-placement^=top-end] > .arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgba(0, 0, 0, 0.03);
}

.popover[x-placement^=top-start] > .arrow::after, .popover[x-placement^=top-end] > .arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: var(--white);
}

.vahara-inline-inputs {
  display: flex;
  flex-wrap: wrap;
}

.vahara-custom-radio {
  padding-right: 0;
  margin: 0;
  letter-spacing: normal;
}
.vahara-custom-radio label {
  cursor: pointer;
  display: flex;
}
.vahara-custom-radio [type=radio] + span:not(:empty),
.vahara-custom-radio [type=radio] + div:not(:empty) {
  padding-left: 28px !important;
  padding-right: 40px !important;
}
.vahara-custom-radio [type=radio]:checked,
.vahara-custom-radio [type=radio]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.vahara-custom-radio [type=radio]:checked + span,
.vahara-custom-radio [type=radio]:not(:checked) + span,
.vahara-custom-radio [type=radio]:checked + div,
.vahara-custom-radio [type=radio]:not(:checked) + div {
  position: relative;
  padding-left: 0;
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
  line-height: 20px;
  display: inline-flex;
  font-weight: 400;
  font-size: 14px;
  /* --foreground, not --gray-950. The palette greys are deliberately
     theme-invariant -- --gray-950 is #04161B in both themes -- so a label
     painted with it stayed near-black on a dark panel and was effectively
     invisible in dark mode. --foreground is --gray-950 in light and --gray-50
     in dark, so this is a no-op in light and the actual fix in dark. */
  color: var(--foreground);
}
.vahara-custom-radio [type=radio]:checked + span:before,
.vahara-custom-radio [type=radio]:not(:checked) + span:before,
.vahara-custom-radio [type=radio]:checked + div:before,
.vahara-custom-radio [type=radio]:not(:checked) + div:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-200);
  -webkit-border-radius: 100%;

  -moz-border-radius: 100%;

  -webkit-border-radius: 100%;


  -moz-border-radius: 100%;


  -webkit-border-radius: 100%;



  -moz-border-radius: 100%;



  border-radius: 100%;
  background: var(--white);
}
.vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + span:hover:before,
.vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + div:hover:before {
  border: 2px solid var(--gray-300);
}
.vahara-custom-radio [type=radio]:not(:checked):disabled + span:before,
.vahara-custom-radio [type=radio]:not(:checked):disabled + div:before {
  border: 2px solid var(--border) !important;
  cursor: default;
}
.vahara-custom-radio [type=radio]:checked:disabled + span:before,
.vahara-custom-radio [type=radio]:checked:disabled + div:before {
  border: 2px solid color-mix(in oklch, var(--accent) 40%, transparent) !important;
  cursor: default;
}
.vahara-custom-radio [type=radio]:checked:disabled + span,
.vahara-custom-radio [type=radio]:not(:checked):disabled + span,
.vahara-custom-radio [type=radio]:checked:disabled + div,
.vahara-custom-radio [type=radio]:not(:checked):disabled + div {
  color: var(--border);
  cursor: default;
  -webkit-user-select: text;
  -webkit-user-select: text;

  -moz-user-select: text;

  -ms-user-select: text;

  -webkit-user-select: text;


  -moz-user-select: text;


  -ms-user-select: text;


  user-select: text;
}
.vahara-custom-radio [type=radio]:checked + span:before,
.vahara-custom-radio [type=radio]:checked + div:before {
  border: 2px solid var(--accent);
}
.vahara-custom-radio [type=radio]:checked + span:after,
.vahara-custom-radio [type=radio]:not(:checked) + span:after,
.vahara-custom-radio [type=radio]:checked + div:after,
.vahara-custom-radio [type=radio]:not(:checked) + div:after {
  content: "";
}
.vahara-custom-radio [type=radio]:not(:checked) + span:after,
.vahara-custom-radio [type=radio]:not(:checked) + div:after {
  opacity: 0;
  -webkit-transform: scale(0);
  -webkit-transform: scale(0);

  -moz-transform: scale(0);

  -ms-transform: scale(0);

  -webkit-transform: scale(0);


  -moz-transform: scale(0);


  -ms-transform: scale(0);


  -webkit-transform: scale(0);



  -moz-transform: scale(0);



  -ms-transform: scale(0);



  transform: scale(0);
}
.vahara-custom-radio [type=radio]:checked + span:after,
.vahara-custom-radio [type=radio]:checked + div:after {
  opacity: 1;
  /* -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -webkit-transform: scale(1);

 -moz-transform: scale(1);

 -ms-transform: scale(1);

 -webkit-transform: scale(1);


 -moz-transform: scale(1);


 -ms-transform: scale(1);


 transform: scale(1); */
  -webkit-transform: scale(0.5);

  -moz-transform: scale(0.5);

  -ms-transform: scale(0.5);

  -webkit-transform: scale(0.5);


  -moz-transform: scale(0.5);


  -ms-transform: scale(0.5);


  -webkit-transform: scale(0.5);



  -moz-transform: scale(0.5);



  -ms-transform: scale(0.5);



  transform: scale(0.5);
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  -webkit-border-radius: 50%;



  -moz-border-radius: 50%;



  border-radius: 50%;
  border: 2px solid var(--accent);
  background-color: var(--accent);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
}
.vahara-custom-radio [type=radio]:checked + span:hover:after,
.vahara-custom-radio [type=radio]:checked + div:hover:after {
  border: 2px solid oklch(from var(--accent) calc(l - 0.025) c h);
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-radio [type=radio]:checked:disabled + span:after,
.vahara-custom-radio [type=radio]:checked:disabled + div:after {
  background-color: color-mix(in oklch, var(--accent) 40%, transparent) !important;
  border: 2px solid color-mix(in oklch, var(--accent) 40%, transparent) !important;
}
.vahara-custom-radio.l [type=radio]:checked + span:empty,
.vahara-custom-radio.l [type=radio]:not(:checked) + span:empty,
.vahara-custom-radio.l [type=radio]:checked + div:empty,
.vahara-custom-radio.l [type=radio]:not(:checked) + div:empty {
  max-width: 20px;
  min-width: 20px;
  max-height: 20px;
  min-height: 20px;
}
.vahara-custom-radio.m [type=radio]:checked + span:empty,
.vahara-custom-radio.m [type=radio]:not(:checked) + span:empty,
.vahara-custom-radio.m [type=radio]:checked + div:empty,
.vahara-custom-radio.m [type=radio]:not(:checked) + div:empty {
  max-width: 18px;
  min-width: 18px;
  max-height: 18px;
  min-height: 18px;
}
.vahara-custom-radio.m [type=radio]:checked + span:not(:empty),
.vahara-custom-radio.m [type=radio]:not(:checked) + span:not(:empty),
.vahara-custom-radio.m [type=radio]:checked + div:not(:empty),
.vahara-custom-radio.m [type=radio]:not(:checked) + div:not(:empty) {
  padding-left: 26px !important;
}
.vahara-custom-radio.m [type=radio]:checked + span:before,
.vahara-custom-radio.m [type=radio]:not(:checked) + span:before,
.vahara-custom-radio.m [type=radio]:checked + div:before,
.vahara-custom-radio.m [type=radio]:not(:checked) + div:before {
  max-width: 18px;
  min-width: 18px;
  max-height: 18px;
  min-height: 18px;
  top: 1px;
}
.vahara-custom-radio.m [type=radio]:checked + span:after,
.vahara-custom-radio.m [type=radio]:checked + div:after {
  max-width: 18px;
  min-width: 18px;
  max-height: 18px;
  min-height: 18px;
  top: 1px;
}
.vahara-custom-radio.s [type=radio]:checked + span:empty,
.vahara-custom-radio.s [type=radio]:not(:checked) + span:empty,
.vahara-custom-radio.s [type=radio]:checked + div:empty,
.vahara-custom-radio.s [type=radio]:not(:checked) + div:empty {
  max-width: 14px;
  min-width: 14px;
  max-height: 14px;
  min-height: 14px;
}
.vahara-custom-radio.s [type=radio]:checked + span:not(:empty),
.vahara-custom-radio.s [type=radio]:not(:checked) + span:not(:empty),
.vahara-custom-radio.s [type=radio]:checked + div:not(:empty),
.vahara-custom-radio.s [type=radio]:not(:checked) + div:not(:empty) {
  padding-left: 22px !important;
}
.vahara-custom-radio.s [type=radio]:checked + span:before,
.vahara-custom-radio.s [type=radio]:not(:checked) + span:before,
.vahara-custom-radio.s [type=radio]:checked + div:before,
.vahara-custom-radio.s [type=radio]:not(:checked) + div:before {
  max-width: 14px;
  min-width: 14px;
  max-height: 14px;
  min-height: 14px;
  top: 3px;
}
.vahara-custom-radio.s [type=radio]:checked + span:after,
.vahara-custom-radio.s [type=radio]:checked + div:after {
  max-width: 14px;
  min-width: 14px;
  max-height: 14px;
  min-height: 14px;
  /* Matches the ring's top below. These were 3px and 1px apart, so the small
     radio's dot sat above its own ring; .m has both at 1px and looks right. */
  top: 3px;
}

.clickable-row:hover .vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + span:before, li:hover .vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + span:before {
  border: 2px solid var(--gray-400);
}

.vahara-custom-checkbox {
  padding-right: 0;
  margin: 0;
  cursor: pointer;
  letter-spacing: normal;
}
.vahara-custom-checkbox label {
  cursor: pointer;
  display: flex;
}
.vahara-custom-checkbox label div {
  min-width: 20px;
  min-height: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
  line-height: 20px;
  display: inline-flex;
  font-weight: 400;
  font-size: 14px;
  /* --foreground, not --gray-950. The palette greys are deliberately
     theme-invariant -- --gray-950 is #04161B in both themes -- so a label
     painted with it stayed near-black on a dark panel and was effectively
     invisible in dark mode. --foreground is --gray-950 in light and --gray-50
     in dark, so this is a no-op in light and the actual fix in dark. */
  color: var(--foreground);
}
.vahara-custom-checkbox [type=checkbox] + span:not(:empty),
.vahara-custom-checkbox [type=checkbox] + div:not(:empty) {
  padding-left: 28px !important;
  padding-right: 40px !important;
}
.vahara-custom-checkbox [type=checkbox] {
  position: absolute;
  left: -9999px !important;
}
.vahara-custom-checkbox [type=checkbox]:checked + div, .vahara-custom-checkbox [type=checkbox]:not(:checked) + div {
  position: relative;
}
.vahara-custom-checkbox [type=checkbox]:checked + div:before, .vahara-custom-checkbox [type=checkbox]:not(:checked) + div:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-200);
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  -webkit-border-radius: 3px;



  -moz-border-radius: 3px;



  border-radius: 3px;
  background: var(--white);
}
.vahara-custom-checkbox [type=checkbox]:not(:checked):not(:disabled) + div:hover:before {
  border-color: var(--gray-300);
}
.vahara-custom-checkbox [type=checkbox]:checked + div:before {
  background-color: var(--accent);
  border-color: var(--accent);
}
.vahara-custom-checkbox [type=checkbox]:checked + div:hover:before, .vahara-custom-checkbox [type=checkbox]:checked + span:hover:before {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-checkbox [type=checkbox]:checked + div:after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  left: 0;
  background: url("/assets/icons/white/check.svg") left center no-repeat;
  background-size: 100%;
}
.vahara-custom-checkbox [type=checkbox]:not(:checked):disabled + div:before {
  border-color: var(--border) !important;
  cursor: default;
}
.vahara-custom-checkbox [type=checkbox]:not(:checked):disabled + div {
  cursor: default;
}
.vahara-custom-checkbox [type=checkbox]:checked:disabled + div {
  cursor: default;
}
.vahara-custom-checkbox [type=checkbox]:checked:disabled + div::before {
  background-color: color-mix(in oklch, var(--accent) 40%, transparent) !important;
  border-color: transparent !important;
}
.vahara-custom-checkbox.l div {
  line-height: 20px !important;
  position: relative;
}
.vahara-custom-checkbox.l [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.l [type=checkbox]:checked + div:after,
.vahara-custom-checkbox.l [type=checkbox]:not(:checked) + div:before {
  max-width: 20px;
  min-width: 20px;
  max-height: 20px;
  min-height: 20px;
}
.vahara-custom-checkbox.m div {
  line-height: 18px !important;
  position: relative;
  max-height: 18px;
  min-height: 18px;
}
.vahara-custom-checkbox.m div:empty {
  max-width: 18px;
  min-width: 18px;
  max-height: 18px;
  min-height: 18px;
}
.vahara-custom-checkbox.m [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.m [type=checkbox]:checked + div:after,
.vahara-custom-checkbox.m [type=checkbox]:not(:checked) + div:before {
  max-width: 18px;
  min-width: 18px;
  max-height: 18px;
  min-height: 18px;
}
.vahara-custom-checkbox.m [type=checkbox] + span:not(:empty),
.vahara-custom-checkbox.m [type=checkbox] + div:not(:empty) {
  padding-left: 26px !important;
}
.vahara-custom-checkbox.s div, .vahara-custom-checkbox.s span {
  line-height: 14px !important;
  position: relative;
  min-width: 14px;
  max-height: 14px;
  min-height: 14px;
}
.vahara-custom-checkbox.s [type=checkbox] + span:not(:empty),
.vahara-custom-checkbox.s [type=checkbox] + div:not(:empty) {
  padding-left: 22px !important;
}
.vahara-custom-checkbox.s [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.s [type=checkbox]:checked + div:after,
.vahara-custom-checkbox.s [type=checkbox]:not(:checked) + div:before {
  max-width: 14px;
  min-width: 14px;
  max-height: 14px;
  min-height: 14px;
}
.vahara-custom-checkbox.check-multi-critical [type=checkbox]:checked + div:after, .vahara-custom-checkbox.check-multi [type=checkbox]:checked + div:after, .vahara-custom-checkbox.check-multi-primary [type=checkbox]:checked + div:after {
  background: url("/assets/icons/white/minus.svg") left center no-repeat;
  background-size: 100%;
}
.vahara-custom-checkbox.checkbox-md {
  height: 18px;
}
.vahara-custom-checkbox.checkbox-md label {
  height: 18px;
}
.vahara-custom-checkbox.checkbox-md label div {
  height: 18px;
  line-height: 18px;
}
.vahara-custom-checkbox.checkbox-md [type=checkbox]:checked + div:before, .vahara-custom-checkbox.checkbox-md [type=checkbox]:not(:checked) + div:before, .vahara-custom-checkbox.checkbox-md [type=checkbox]:checked + div:after {
  width: 18px;
  height: 18px;
}
.vahara-custom-checkbox.checkbox-md [type=checkbox] + span:not(:empty),
.vahara-custom-checkbox.checkbox-md [type=checkbox] + div:not(:empty) {
  padding-left: 26px !important;
}
.vahara-custom-checkbox.checkbox-sm {
  height: 14px;
}
.vahara-custom-checkbox.checkbox-sm label {
  height: 14px;
}
.vahara-custom-checkbox.checkbox-sm label div {
  height: 14px;
  line-height: 14px;
}
.vahara-custom-checkbox.checkbox-sm [type=checkbox]:checked + div:before, .vahara-custom-checkbox.checkbox-sm [type=checkbox]:not(:checked) + div:before, .vahara-custom-checkbox.checkbox-sm [type=checkbox]:checked + div:after {
  width: 14px;
  height: 14px;
}
.vahara-custom-checkbox.checkbox-sm [type=checkbox] + span:not(:empty),
.vahara-custom-checkbox.checkbox-sm [type=checkbox] + div:not(:empty) {
  padding-left: 22px !important;
}

.data-table td .vahara-custom-checkbox label, .data-table th .vahara-custom-checkbox label {
  margin: 0;
}
.data-table td .vahara-custom-checkbox div, .data-table th .vahara-custom-checkbox div {
  line-height: 16px !important;
  position: relative;
}
.data-table td .vahara-custom-checkbox [type=checkbox]:checked + div:before,
.data-table td .vahara-custom-checkbox [type=checkbox]:checked + div:after,
.data-table td .vahara-custom-checkbox [type=checkbox]:not(:checked) + div:before, .data-table th .vahara-custom-checkbox [type=checkbox]:checked + div:before,
.data-table th .vahara-custom-checkbox [type=checkbox]:checked + div:after,
.data-table th .vahara-custom-checkbox [type=checkbox]:not(:checked) + div:before {
  width: 16px;
  height: 16px;
}

.vahara-custom-pill [type=radio]:checked,
.vahara-custom-pill [type=radio]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.vahara-custom-pill [type=radio]:checked + div,
.vahara-custom-pill [type=radio]:not(:checked) + div {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  background: var(--gray-25);
  -webkit-border-radius: 21px;

  -moz-border-radius: 21px;

  -webkit-border-radius: 21px;


  -moz-border-radius: 21px;


  -webkit-border-radius: 21px;



  -moz-border-radius: 21px;



  border-radius: 21px;
  text-align: center;
  padding: 5px 15px;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.vahara-custom-pill [type=radio]:checked + div {
  background: color-mix(in oklch, var(--primary) 12%, white);
  color: var(--primary);
}

.vahara-custom-pills [type=checkbox]:checked,
.vahara-custom-pills [type=checkbox]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.vahara-custom-pills [type=checkbox]:checked + div,
.vahara-custom-pills [type=checkbox]:not(:checked) + div {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  background: var(--gray-25);
  -webkit-border-radius: 21px;

  -moz-border-radius: 21px;

  -webkit-border-radius: 21px;


  -moz-border-radius: 21px;


  -webkit-border-radius: 21px;



  -moz-border-radius: 21px;



  border-radius: 21px;
  text-align: center;
  padding: 5px 15px;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.vahara-custom-pills [type=checkbox]:checked + div {
  background: color-mix(in oklch, var(--primary) 12%, white);
  color: var(--primary);
}

.vahara-custom-radio.vahara-radio-primary [type=radio]:checked + span:before,
.vahara-custom-radio.vahara-radio-primary [type=radio]:checked + div:before {
  border: 2px solid var(--primary);
}
.vahara-custom-radio.vahara-radio-primary [type=radio]:checked + span:after,
.vahara-custom-radio.vahara-radio-primary [type=radio]:checked + div:after {
  opacity: 1;
  border: 2px solid var(--primary);
  background-color: var(--primary);
}

.vahara-custom-checkbox.vahara-checkbox-primary [type=checkbox]:not(:checked):not(:disabled) + div:hover:before, .vahara-table-checkbox.vahara-checkbox-primary [type=checkbox]:not(:checked):not(:disabled) + div:hover:before {
  border: 2px solid var(--gray-300);
}
.vahara-custom-checkbox.vahara-checkbox-primary [type=checkbox]:checked + div:before, .vahara-table-checkbox.vahara-checkbox-primary [type=checkbox]:checked + div:before {
  border: 2px solid var(--primary);
}
.vahara-custom-checkbox.vahara-checkbox-primary [type=checkbox]:checked + div:after, .vahara-table-checkbox.vahara-checkbox-primary [type=checkbox]:checked + div:after {
  opacity: 1;
}

.vahara-custom-checkbox.vahara-checkbox-critical [type=checkbox]:checked + div:before, .vahara-table-checkbox.vahara-checkbox-critical [type=checkbox]:checked + div:before {
  border: 2px solid var(--warning);
  background-color: var(--warning);
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  -webkit-border-radius: 3px;



  -moz-border-radius: 3px;



  border-radius: 3px;
}
.vahara-custom-checkbox.vahara-checkbox-critical [type=checkbox]:checked + div:after, .vahara-table-checkbox.vahara-checkbox-critical [type=checkbox]:checked + div:after {
  opacity: 1;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  -webkit-border-radius: 3px;



  -moz-border-radius: 3px;



  border-radius: 3px;
  background-color: var(--warning);
}
.vahara-custom-checkbox.vahara-checkbox-critical.check-multi-critical [type=checkbox]:checked + div:after, .vahara-table-checkbox.vahara-checkbox-critical.check-multi-critical [type=checkbox]:checked + div:after {
  /*border-width: 0 2px 0 0 !important;
  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  -webkit-transform: rotate(90deg);


  -moz-transform: rotate(90deg);


  -ms-transform: rotate(90deg);


  -webkit-transform: rotate(90deg);



  -moz-transform: rotate(90deg);



  -ms-transform: rotate(90deg);



  transform: rotate(90deg);*/
}
.vahara-custom-checkbox.vahara-checkbox-critical [type=checkbox]:not(:checked):not(:disabled) + div:hover:before, .vahara-table-checkbox.vahara-checkbox-critical [type=checkbox]:not(:checked):not(:disabled) + div:hover:before {
  border: 2px solid var(--gray-300);
}

.icon-right-sidebar.active img {
  filter: brightness(0) saturate(100%) invert(53%) sepia(55%) saturate(3813%) hue-rotate(140deg) brightness(103%) contrast(91%);
}

.icon-right-sidebar {
  color: var(--gray-200);
}
.icon-right-sidebar:focus, .icon-right-sidebar.focus, .icon-right-sidebar:hover {
  color: var(--gray-400);
}

.right-sidebar, .history-right-sidebar {
  position: fixed;
  width: 280px;
  height: 100vh;
  background: var(--white);
  right: -300px;
  top: 0;
  bottom: 0;
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;


  -moz-box-sizing: border-box;


  -webkit-box-sizing: border-box;



  -moz-box-sizing: border-box;



  box-sizing: border-box;
  padding-top: 88px;
  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);

  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);

  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);


  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);


  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);



  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);



  box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.2);
  overflow: auto;
  z-index: 99;
}
.right-sidebar #accordion-sub, .history-right-sidebar #accordion-sub {
  padding: 15px 16px;
}
.right-sidebar #accordion-sub .collapsible-btn, .history-right-sidebar #accordion-sub .collapsible-btn {
  font-family: "Open Sans";
  font-size: 15px 13px 15px 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  color: var(--muted-foreground);
  padding: 0;
}
.right-sidebar #accordion-sub .collapsible-btn i, .history-right-sidebar #accordion-sub .collapsible-btn i {
  margin: 0;
  color: var(--muted-foreground);
}
.right-sidebar #accordion-sub a, .history-right-sidebar #accordion-sub a {
  line-height: 19px;
}
.right-sidebar #accordion-sub a.icon-link, .right-sidebar #accordion-sub a.accordion-toggle, .history-right-sidebar #accordion-sub a.icon-link, .history-right-sidebar #accordion-sub a.accordion-toggle {
  display: block;
  padding: 16px 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: var(--gray-950);
}
.right-sidebar #accordion-sub a.icon-link:focus, .right-sidebar #accordion-sub a.icon-link.focus, .right-sidebar #accordion-sub a.icon-link:hover, .right-sidebar #accordion-sub a.accordion-toggle:focus, .right-sidebar #accordion-sub a.accordion-toggle.focus, .right-sidebar #accordion-sub a.accordion-toggle:hover, .history-right-sidebar #accordion-sub a.icon-link:focus, .history-right-sidebar #accordion-sub a.icon-link.focus, .history-right-sidebar #accordion-sub a.icon-link:hover, .history-right-sidebar #accordion-sub a.accordion-toggle:focus, .history-right-sidebar #accordion-sub a.accordion-toggle.focus, .history-right-sidebar #accordion-sub a.accordion-toggle:hover {
  color: var(--secondary);
  text-decoration: none;
  cursor: pointer;
}
.right-sidebar #accordion-sub #sidebar_details .details-header, .right-sidebar #accordion-sub #sidebar_history .details-header, .right-sidebar #accordion-sub .right_sidebar_details .details-header, .right-sidebar #accordion-sub div[id^=sidebar_history_] .details-header, .history-right-sidebar #accordion-sub #sidebar_details .details-header, .history-right-sidebar #accordion-sub #sidebar_history .details-header, .history-right-sidebar #accordion-sub .right_sidebar_details .details-header, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .details-header {
  overflow: hidden;
  font-feature-settings: "liga" off, "clig" off;
  text-overflow: ellipsis;
  /* LABEL */
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  /* 133.333% */
  letter-spacing: 0.24px;
  text-transform: uppercase;
  color: var(--gray-400);
}
.right-sidebar #accordion-sub #sidebar_details a, .right-sidebar #accordion-sub #sidebar_history a, .right-sidebar #accordion-sub .right_sidebar_details a, .right-sidebar #accordion-sub div[id^=sidebar_history_] a, .history-right-sidebar #accordion-sub #sidebar_details a, .history-right-sidebar #accordion-sub #sidebar_history a, .history-right-sidebar #accordion-sub .right_sidebar_details a, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] a {
  padding: 0;
}
.right-sidebar #accordion-sub #sidebar_details .panel-body, .right-sidebar #accordion-sub #sidebar_details .panel-body div a, .right-sidebar #accordion-sub #sidebar_history .panel-body, .right-sidebar #accordion-sub #sidebar_history .panel-body div a, .right-sidebar #accordion-sub .right_sidebar_details .panel-body, .right-sidebar #accordion-sub .right_sidebar_details .panel-body div a, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a, .history-right-sidebar #accordion-sub #sidebar_details .panel-body, .history-right-sidebar #accordion-sub #sidebar_details .panel-body div a, .history-right-sidebar #accordion-sub #sidebar_history .panel-body, .history-right-sidebar #accordion-sub #sidebar_history .panel-body div a, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body div a, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a {
  overflow: hidden;
  color: var(--gray-600);
  font-feature-settings: "liga" off, "clig" off;
  text-overflow: ellipsis;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  /* 128.571% */
}
.right-sidebar #accordion-sub #sidebar_details .panel-body .row, .right-sidebar #accordion-sub #sidebar_details .panel-body div a .row, .right-sidebar #accordion-sub #sidebar_history .panel-body .row, .right-sidebar #accordion-sub #sidebar_history .panel-body div a .row, .right-sidebar #accordion-sub .right_sidebar_details .panel-body .row, .right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row, .history-right-sidebar #accordion-sub #sidebar_details .panel-body .row, .history-right-sidebar #accordion-sub #sidebar_details .panel-body div a .row, .history-right-sidebar #accordion-sub #sidebar_history .panel-body .row, .history-right-sidebar #accordion-sub #sidebar_history .panel-body div a .row, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body .row, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row {
  margin-bottom: 12px;
}
.right-sidebar #accordion-sub #sidebar_details .panel-body .row .col-10, .right-sidebar #accordion-sub #sidebar_details .panel-body div a .row .col-10, .right-sidebar #accordion-sub #sidebar_history .panel-body .row .col-10, .right-sidebar #accordion-sub #sidebar_history .panel-body div a .row .col-10, .right-sidebar #accordion-sub .right_sidebar_details .panel-body .row .col-10, .right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row .col-10, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row .col-10, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row .col-10, .history-right-sidebar #accordion-sub #sidebar_details .panel-body .row .col-10, .history-right-sidebar #accordion-sub #sidebar_details .panel-body div a .row .col-10, .history-right-sidebar #accordion-sub #sidebar_history .panel-body .row .col-10, .history-right-sidebar #accordion-sub #sidebar_history .panel-body div a .row .col-10, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body .row .col-10, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row .col-10, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row .col-10, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row .col-10 {
  display: flex;
  align-items: center;
}
.right-sidebar #accordion-sub #sidebar_details .panel-body .row span, .right-sidebar #accordion-sub #sidebar_details .panel-body div a .row span, .right-sidebar #accordion-sub #sidebar_history .panel-body .row span, .right-sidebar #accordion-sub #sidebar_history .panel-body div a .row span, .right-sidebar #accordion-sub .right_sidebar_details .panel-body .row span, .right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row span, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row span, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row span, .history-right-sidebar #accordion-sub #sidebar_details .panel-body .row span, .history-right-sidebar #accordion-sub #sidebar_details .panel-body div a .row span, .history-right-sidebar #accordion-sub #sidebar_history .panel-body .row span, .history-right-sidebar #accordion-sub #sidebar_history .panel-body div a .row span, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body .row span, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row span, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row span, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row span {
  font-size: 11px;
}
.right-sidebar #accordion-sub #sidebar_details .panel-body .row .history-item-info, .right-sidebar #accordion-sub #sidebar_details .panel-body div a .row .history-item-info, .right-sidebar #accordion-sub #sidebar_history .panel-body .row .history-item-info, .right-sidebar #accordion-sub #sidebar_history .panel-body div a .row .history-item-info, .right-sidebar #accordion-sub .right_sidebar_details .panel-body .row .history-item-info, .right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row .history-item-info, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row .history-item-info, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row .history-item-info, .history-right-sidebar #accordion-sub #sidebar_details .panel-body .row .history-item-info, .history-right-sidebar #accordion-sub #sidebar_details .panel-body div a .row .history-item-info, .history-right-sidebar #accordion-sub #sidebar_history .panel-body .row .history-item-info, .history-right-sidebar #accordion-sub #sidebar_history .panel-body div a .row .history-item-info, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body .row .history-item-info, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row .history-item-info, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row .history-item-info, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row .history-item-info {
  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;


  -moz-border-radius: 5px;


  -webkit-border-radius: 5px;



  -moz-border-radius: 5px;



  border-radius: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.right-sidebar #accordion-sub #sidebar_details .panel-body .row:hover:not(.active), .right-sidebar #accordion-sub #sidebar_details .panel-body div a .row:hover:not(.active), .right-sidebar #accordion-sub #sidebar_history .panel-body .row:hover:not(.active), .right-sidebar #accordion-sub #sidebar_history .panel-body div a .row:hover:not(.active), .right-sidebar #accordion-sub .right_sidebar_details .panel-body .row:hover:not(.active), .right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row:hover:not(.active), .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row:hover:not(.active), .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row:hover:not(.active), .history-right-sidebar #accordion-sub #sidebar_details .panel-body .row:hover:not(.active), .history-right-sidebar #accordion-sub #sidebar_details .panel-body div a .row:hover:not(.active), .history-right-sidebar #accordion-sub #sidebar_history .panel-body .row:hover:not(.active), .history-right-sidebar #accordion-sub #sidebar_history .panel-body div a .row:hover:not(.active), .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body .row:hover:not(.active), .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .row:hover:not(.active), .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .row:hover:not(.active), .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .row:hover:not(.active) {
  background-color: transparent !important;
}
.right-sidebar #accordion-sub #sidebar_details .panel-body .btn-see-version, .right-sidebar #accordion-sub #sidebar_details .panel-body div a .btn-see-version, .right-sidebar #accordion-sub #sidebar_history .panel-body .btn-see-version, .right-sidebar #accordion-sub #sidebar_history .panel-body div a .btn-see-version, .right-sidebar #accordion-sub .right_sidebar_details .panel-body .btn-see-version, .right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .btn-see-version, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .btn-see-version, .right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .btn-see-version, .history-right-sidebar #accordion-sub #sidebar_details .panel-body .btn-see-version, .history-right-sidebar #accordion-sub #sidebar_details .panel-body div a .btn-see-version, .history-right-sidebar #accordion-sub #sidebar_history .panel-body .btn-see-version, .history-right-sidebar #accordion-sub #sidebar_history .panel-body div a .btn-see-version, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body .btn-see-version, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body div a .btn-see-version, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body .btn-see-version, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .panel-body div a .btn-see-version {
  padding: 4px 12px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--gray-900);
  width: max-content;
  text-align: center;
}
.right-sidebar #accordion-sub #sidebar_details .badge-custom, .right-sidebar #accordion-sub #sidebar_history .badge-custom, .right-sidebar #accordion-sub .right_sidebar_details .badge-custom, .right-sidebar #accordion-sub div[id^=sidebar_history_] .badge-custom, .history-right-sidebar #accordion-sub #sidebar_details .badge-custom, .history-right-sidebar #accordion-sub #sidebar_history .badge-custom, .history-right-sidebar #accordion-sub .right_sidebar_details .badge-custom, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .badge-custom {
  padding: 3px 10px;
  -webkit-border-radius: 18px;

  -moz-border-radius: 18px;

  -webkit-border-radius: 18px;


  -moz-border-radius: 18px;


  -webkit-border-radius: 18px;



  -moz-border-radius: 18px;



  border-radius: 18px;
  font-style: normal;
  font-weight: bold;
  font-size: 10px !important;
  line-height: 14px;
}
.right-sidebar #accordion-sub #sidebar_details .main-heading, .right-sidebar #accordion-sub #sidebar_history .main-heading, .right-sidebar #accordion-sub .right_sidebar_details .main-heading, .right-sidebar #accordion-sub div[id^=sidebar_history_] .main-heading, .history-right-sidebar #accordion-sub #sidebar_details .main-heading, .history-right-sidebar #accordion-sub #sidebar_history .main-heading, .history-right-sidebar #accordion-sub .right_sidebar_details .main-heading, .history-right-sidebar #accordion-sub div[id^=sidebar_history_] .main-heading {
  font-weight: bold;
  font-size: 11px;
  line-height: 15px;
  align-items: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.right-sidebar #accordion-sub .right_sidebar_details .panel-body .row, .history-right-sidebar #accordion-sub .right_sidebar_details .panel-body .row {
  margin-bottom: 0;
}
.right-sidebar #accordion-sub #sidebar_history:hover, .history-right-sidebar #accordion-sub #sidebar_history:hover {
  cursor: pointer;
}
.right-sidebar #accordion-sub #sidebar_connections, .history-right-sidebar #accordion-sub #sidebar_connections {
  font-weight: normal;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--gray-800);
  padding: 0;
}
.right-sidebar #accordion-sub #sidebar_connections ul li, .history-right-sidebar #accordion-sub #sidebar_connections ul li {
  display: flex;
}
.right-sidebar #accordion-sub #sidebar_connections ul li span:before, .history-right-sidebar #accordion-sub #sidebar_connections ul li span:before {
  content: "•"; /* Insert content that looks like bullets */
  padding-right: 8px;
  color: var(--dev); /* Or a color you prefer */
}
.right-sidebar #accordion-sub #sidebar_connections ul li a, .history-right-sidebar #accordion-sub #sidebar_connections ul li a {
  color: var(--primary);
  padding: 0;
  font-weight: normal;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
}
.right-sidebar #accordion-sub #sidebar_connections ul li a:focus, .right-sidebar #accordion-sub #sidebar_connections ul li a.focus, .right-sidebar #accordion-sub #sidebar_connections ul li a:hover, .history-right-sidebar #accordion-sub #sidebar_connections ul li a:focus, .history-right-sidebar #accordion-sub #sidebar_connections ul li a.focus, .history-right-sidebar #accordion-sub #sidebar_connections ul li a:hover {
  text-decoration: underline;
  cursor: pointer;
}
.right-sidebar .right-sidebar-list, .history-right-sidebar .right-sidebar-list {
  padding: 0 0 8px 0;
}
.right-sidebar .right-sidebar-list li, .history-right-sidebar .right-sidebar-list li {
  height: 34px;
  margin: 0 8px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  -webkit-border-radius: 6px;



  -moz-border-radius: 6px;



  border-radius: 6px;
}
.right-sidebar .right-sidebar-list li a, .history-right-sidebar .right-sidebar-list li a {
  height: 34px;
  display: flex;
  align-items: center;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  -webkit-border-radius: 6px;



  -moz-border-radius: 6px;



  border-radius: 6px;
  width: 100%;
  padding: 8px !important;
}
.right-sidebar .right-sidebar-list li a .svg-icon, .history-right-sidebar .right-sidebar-list li a .svg-icon {
  margin-right: 12px;
  fill: var(--gray-800) !important;
  width: 18px !important;
  height: 18px !important;
}
.right-sidebar .right-sidebar-list li:focus, .right-sidebar .right-sidebar-list li.focus, .right-sidebar .right-sidebar-list li:hover, .history-right-sidebar .right-sidebar-list li:focus, .history-right-sidebar .right-sidebar-list li.focus, .history-right-sidebar .right-sidebar-list li:hover {
  background-color: color-mix(in oklch, var(--primary) 6%, white);
  cursor: pointer;
}
.right-sidebar .right-sidebar-list li:focus a, .right-sidebar .right-sidebar-list li.focus a, .right-sidebar .right-sidebar-list li:hover a, .history-right-sidebar .right-sidebar-list li:focus a, .history-right-sidebar .right-sidebar-list li.focus a, .history-right-sidebar .right-sidebar-list li:hover a {
  text-decoration: none;
}
.right-sidebar .right-sidebar-list li:focus a .svg-icon, .right-sidebar .right-sidebar-list li.focus a .svg-icon, .right-sidebar .right-sidebar-list li:hover a .svg-icon, .history-right-sidebar .right-sidebar-list li:focus a .svg-icon, .history-right-sidebar .right-sidebar-list li.focus a .svg-icon, .history-right-sidebar .right-sidebar-list li:hover a .svg-icon {
  fill: var(--gray-950) !important;
}
.right-sidebar .right-sidebar-list li:focus a.superuser-link .svg-icon, .right-sidebar .right-sidebar-list li.focus a.superuser-link .svg-icon, .right-sidebar .right-sidebar-list li:hover a.superuser-link .svg-icon, .history-right-sidebar .right-sidebar-list li:focus a.superuser-link .svg-icon, .history-right-sidebar .right-sidebar-list li.focus a.superuser-link .svg-icon, .history-right-sidebar .right-sidebar-list li:hover a.superuser-link .svg-icon {
  fill: var(--warning) !important;
}
.right-sidebar .right-sidebar-list li a, .history-right-sidebar .right-sidebar-list li a {
  display: flex;
  color: var(--gray-900);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}
.right-sidebar .right-sidebar-list li a.superuser-link, .history-right-sidebar .right-sidebar-list li a.superuser-link {
  color: var(--warning);
}
.right-sidebar .right-sidebar-list li a.superuser-link .svg-icon, .history-right-sidebar .right-sidebar-list li a.superuser-link .svg-icon {
  fill: var(--warning) !important;
}
.right-sidebar .panel.panel-default:first-child, .history-right-sidebar .panel.panel-default:first-child {
  border-top: 1.5px solid var(--gray-50);
}
.right-sidebar .panel.panel-default, .history-right-sidebar .panel.panel-default {
  border-bottom: 1.5px solid var(--gray-50);
}
.right-sidebar [data-toggle=collapse]:after, .history-right-sidebar [data-toggle=collapse]:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f054";
  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  -webkit-transform: rotate(90deg);


  -moz-transform: rotate(90deg);


  -ms-transform: rotate(90deg);


  -webkit-transform: rotate(90deg);



  -moz-transform: rotate(90deg);



  -ms-transform: rotate(90deg);



  transform: rotate(90deg);
  -webkit-transition: all linear 0.25s;

  -moz-transition: all linear 0.25s;

  -ms-transition: all linear 0.25s;

  -webkit-transition: all linear 0.25s;


  -moz-transition: all linear 0.25s;


  -ms-transition: all linear 0.25s;


  -webkit-transition: all linear 0.25s;



  -moz-transition: all linear 0.25s;



  -ms-transition: all linear 0.25s;



  transition: all linear 0.25s;
  float: right;
}
.right-sidebar [data-toggle=collapse].collapsed :after, .history-right-sidebar [data-toggle=collapse].collapsed :after {
  -webkit-transform: rotate(-90deg);

  -moz-transform: rotate(-90deg);

  -ms-transform: rotate(-90deg);

  -webkit-transform: rotate(-90deg);


  -moz-transform: rotate(-90deg);


  -ms-transform: rotate(-90deg);


  -webkit-transform: rotate(-90deg);



  -moz-transform: rotate(-90deg);



  -ms-transform: rotate(-90deg);



  transform: rotate(-90deg);
}
.right-sidebar .history-item.active, .right-sidebar .history-item.active:hover, .history-right-sidebar .history-item.active, .history-right-sidebar .history-item.active:hover {
  background: color-mix(in oklch, var(--accent) 25%, white) !important;
}

.right-sidebar {
  padding-top: 113px !important;
}
.right-sidebar.with-high-header {
  padding-top: 150px !important;
}
.right-sidebar .right-sidebar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 6px 6px 16px;
  height: 36px;
}
.right-sidebar .right-sidebar-title span {
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.right-sidebar .right-sidebar-title .close-right-sidebar {
  padding: 6px;
}
.right-sidebar .right-sidebar-title .close-right-sidebar img {
  width: 20px;
  height: 20px;
}

@media (min-width: 1280px) {
  .right-sidebar {
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;


    -moz-box-shadow: none;


    -webkit-box-shadow: none;



    -moz-box-shadow: none;



    box-shadow: none;
    border-left: 1px solid var(--border);
  }
  .main-content {
    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    -ms-transition: all 0.4s ease;

    -webkit-transition: all 0.4s ease;


    -moz-transition: all 0.4s ease;


    -ms-transition: all 0.4s ease;


    -webkit-transition: all 0.4s ease;



    -moz-transition: all 0.4s ease;



    -ms-transition: all 0.4s ease;



    transition: all 0.4s ease;
  }
  .main-content.has-right-sidebar {
    padding-right: 265px;
  }
}
.history-right-sidebar #accordion-sub .history-item {
  margin-bottom: 0 !important;
}
.history-right-sidebar #accordion-sub .history-item-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-right-sidebar #accordion-sub .row {
  margin-bottom: 0;
}
.history-right-sidebar #accordion-sub .row:hover {
  background: color-mix(in oklch, var(--primary) 8%, white);
}

.json-pre-data {
  background-color: var(--gray-50);
  padding: 1rem;
}

.right-sidebar.active, .history-right-sidebar.active {
  right: 0px;
}

.search-container {
  display: inline-flex;
}
.search-container .search {
  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -ms-transition: all 1s;

  -webkit-transition: all 1s;


  -moz-transition: all 1s;


  -ms-transition: all 1s;


  -webkit-transition: all 1s;



  -moz-transition: all 1s;



  -ms-transition: all 1s;



  transition: all 1s;
  z-index: 4;
  position: relative;
  display: inline-block;
  height: 25px;
  vertical-align: middle;
  margin-right: 0px;
}
.search-container .search:hover {
  cursor: pointer;
}
.search-container input {
  width: 0;
  height: 30px;
  outline: none;
  border-bottom: 1.5px solid var(--gray-900);
  color: var(--gray-950);
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -ms-transition: all 1s;

  -webkit-transition: all 1s;


  -moz-transition: all 1s;


  -ms-transition: all 1s;


  -webkit-transition: all 1s;



  -moz-transition: all 1s;



  -ms-transition: all 1s;



  transition: all 1s;
  opacity: 0;
  z-index: 5;
  font-weight: bolder;
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;


  -moz-box-sizing: border-box;


  -webkit-box-sizing: border-box;



  -moz-box-sizing: border-box;



  box-sizing: border-box;
}
.search-container input:hover {
  cursor: pointer;
}
.search-container input::placeholder {
  color: var(--gray-950);
  opacity: 0.5;
  font-weight: bolder;
}
.search-container .input-box {
  vertical-align: middle;
  display: inline-block;
}
.search-container .close {
  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -ms-transition: all 1s;

  -webkit-transition: all 1s;


  -moz-transition: all 1s;


  -ms-transition: all 1s;


  -webkit-transition: all 1s;



  -moz-transition: all 1s;



  -ms-transition: all 1s;



  transition: all 1s;
  z-index: 4;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  visibility: hidden;
  width: auto;
}
.search-container.active .search {
  margin-right: -25px;
}
.search-container.active input {
  width: 300px;
  opacity: 1;
  cursor: text;
  padding: 0 30px 0 30px;
  background-color: transparent;
}
.search-container.active input::placeholder {
  color: var(--gray-300) !important;
  opacity: 1;
}
.search-container.active input:focus {
  border: 2px solid var(--primary);
}
.search-container.active input ~ .close {
  right: 15px;
  z-index: 6;
  visibility: visible;
  cursor: pointer;
}

.project-breadcrumb-list li a {
  color: var(--gray-900);
  text-transform: capitalize;
}
.project-breadcrumb-list li a:hover {
  color: var(--gray-950);
}

.project-breadcrumb-list li, .total-project-cnt {
  display: inline-block;
  padding-right: 10px;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: var(--gray-800);
}

.total-project-cnt {
  display: block;
  margin-top: 2px;
}

span.fancytree-childcounter {
  background: transparent !important;
  color: var(--gray-500) !important;
  border: none !important;
  padding-left: 5px !important;
}

@media screen and (max-width: 768px) {
  .popover {
    position: absolute !important;
  }
}
.badge-vahara.badge-outline-secondary {
  background-color: transparent;
  border: 1px solid var(--gray-800);
  -webkit-border-radius: 18px;

  -moz-border-radius: 18px;

  -webkit-border-radius: 18px;


  -moz-border-radius: 18px;


  -webkit-border-radius: 18px;



  -moz-border-radius: 18px;



  border-radius: 18px;
  padding: 2px 10px;
  color: var(--gray-800);
}
.badge-vahara.badge-outline-primary {
  background-color: transparent;
  border: 1px solid var(--secondary);
  -webkit-border-radius: 18px;

  -moz-border-radius: 18px;

  -webkit-border-radius: 18px;


  -moz-border-radius: 18px;


  -webkit-border-radius: 18px;



  -moz-border-radius: 18px;



  border-radius: 18px;
  padding: 3px 10px;
  color: var(--secondary);
}
.badge-vahara.badge-sm {
  font-size: 10px !important;
}

.color-stone {
  color: var(--gray-800);
}

.tab-card-header .nav-tabs a, .tab-card-header .nav-tabs a {
  color: var(--gray-500);
}
.tab-card-header .nav-tabs a.active, .tab-card-header .nav-tabs a.show, .tab-card-header .nav-tabs a:focus, .tab-card-header .nav-tabs a.focus, .tab-card-header .nav-tabs a:hover, .tab-card-header .nav-tabs a.active, .tab-card-header .nav-tabs a.show, .tab-card-header .nav-tabs a:focus, .tab-card-header .nav-tabs a.focus, .tab-card-header .nav-tabs a:hover {
  color: var(--primary);
  font-weight: 700;
}
.tab-card-header .nav-tabs a.active::after, .tab-card-header .nav-tabs a.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary);
}
.tab-card-header.card-bottom-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-right: 12px;
}
.tab-card-header.card-bottom-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tab-card-header.card-bottom-line > .nav-tabs > li {
  padding: 0 !important;
  margin: 0 !important;
  margin-right: 2px !important;
}
.tab-card-header.card-bottom-line > .nav-tabs > li > a {
  border: 0;
  color: #8A8D8E;
  padding: 10px 0;
  margin: 0 16px;
  letter-spacing: 0.12px !important;
  background: transparent !important;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.tab-card-header.card-bottom-line > .nav-tabs > li > a.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--secondary);
}

.vh-checkbox-input {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--gray-950);
  margin-bottom: 1rem;
}
.vh-checkbox-input .vh-switch {
  position: relative;
  display: inline-block;
  min-width: 36px;
  height: 24px;
  margin: 0;
}
.vh-checkbox-input .vh-switch.locked {
  pointer-events: none;
  cursor: auto;
}
.vh-checkbox-input .vh-switch label {
  margin-bottom: 0;
  cursor: pointer !important;
}
.vh-checkbox-input .vh-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.vh-checkbox-input .vh-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-300);
  -webkit-transition: 0.1s;
  -webkit-transition: 0.1s;

  -moz-transition: 0.1s;

  -ms-transition: 0.1s;

  -webkit-transition: 0.1s;


  -moz-transition: 0.1s;


  -ms-transition: 0.1s;


  -webkit-transition: 0.1s;



  -moz-transition: 0.1s;



  -ms-transition: 0.1s;



  transition: 0.1s;
  width: 36px;
}
.vh-checkbox-input .vh-switch .slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 0px;
  bottom: 0px;
  background-color: white;
  -webkit-transition: 0.1s;
  -webkit-transition: 0.1s;

  -moz-transition: 0.1s;

  -ms-transition: 0.1s;

  -webkit-transition: 0.1s;


  -moz-transition: 0.1s;


  -ms-transition: 0.1s;


  -webkit-transition: 0.1s;



  -moz-transition: 0.1s;



  -ms-transition: 0.1s;



  transition: 0.1s;
  border: 2px solid var(--gray-300);
}
.vh-checkbox-input .vh-switch .slider.round {
  -webkit-border-radius: 24px;

  -moz-border-radius: 24px;

  -webkit-border-radius: 24px;


  -moz-border-radius: 24px;


  -webkit-border-radius: 24px;



  -moz-border-radius: 24px;



  border-radius: 24px;
}
.vh-checkbox-input .vh-switch .slider.round:before {
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  -webkit-border-radius: 50%;



  -moz-border-radius: 50%;



  border-radius: 50%;
}
.vh-checkbox-input .vh-switch input ~ img {
  position: absolute;
  width: 10px;
  top: 7px;
  left: 7px;
  -webkit-transition: 0.1s;
  -webkit-transition: 0.1s;

  -moz-transition: 0.1s;

  -ms-transition: 0.1s;

  -webkit-transition: 0.1s;


  -moz-transition: 0.1s;


  -ms-transition: 0.1s;


  -webkit-transition: 0.1s;



  -moz-transition: 0.1s;



  -ms-transition: 0.1s;



  transition: 0.1s;
  filter: brightness(0) saturate(100%) invert(83%) sepia(25%) saturate(142%) hue-rotate(151deg) brightness(80%) contrast(86%);
}
.vh-checkbox-input .vh-switch input:checked + .slider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  -webkit-transform: translateX(12px);

  -moz-transform: translateX(12px);

  -ms-transform: translateX(12px);

  -webkit-transform: translateX(12px);


  -moz-transform: translateX(12px);


  -ms-transform: translateX(12px);


  -webkit-transform: translateX(12px);



  -moz-transform: translateX(12px);



  -ms-transform: translateX(12px);



  transform: translateX(12px);
  border-color: var(--accent);
}
.vh-checkbox-input .vh-switch input:not(:checked) + .slider:hover {
  border-color: var(--gray-400);
  background-color: var(--gray-400);
}
.vh-checkbox-input .vh-switch input:not(:checked) + .slider:hover + img {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}
.vh-checkbox-input .vh-switch input:checked + .slider:hover {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input .vh-switch input:not(:checked) + .slider:hover:before {
  border-color: var(--gray-400);
}
.vh-checkbox-input .vh-switch input:checked + .slider:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input .vh-switch input:not(:checked):disabled + .slider {
  border-color: var(--border);
  background-color: var(--border);
}
.vh-checkbox-input .vh-switch input:not(:checked):disabled + .slider:before {
  border-color: var(--border);
}
.vh-checkbox-input .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
  background-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.vh-checkbox-input .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.vh-checkbox-input .vh-switch input:not(:checked):disabled + .slider {
  cursor: auto;
  background-color: var(--border);
}
.vh-checkbox-input .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--accent) 40%, transparent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.vh-checkbox-input .vh-switch input:checked ~ img {
  position: absolute;
  width: 10px;
  top: 7px;
  -webkit-transform: translateX(12px);

  -moz-transform: translateX(12px);

  -ms-transform: translateX(12px);

  -webkit-transform: translateX(12px);


  -moz-transform: translateX(12px);


  -ms-transform: translateX(12px);


  -webkit-transform: translateX(12px);



  -moz-transform: translateX(12px);



  -ms-transform: translateX(12px);



  transform: translateX(12px);
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  -webkit-transition: 0.1s;
  -webkit-transition: 0.1s;

  -moz-transition: 0.1s;

  -ms-transition: 0.1s;

  -webkit-transition: 0.1s;


  -moz-transition: 0.1s;


  -ms-transition: 0.1s;


  -webkit-transition: 0.1s;



  -moz-transition: 0.1s;



  -ms-transition: 0.1s;



  transition: 0.1s;
  filter: brightness(0) saturate(100%) invert(49%) sepia(100%) saturate(2335%) hue-rotate(140deg) brightness(103%) contrast(91%);
}
.vh-checkbox-input .vh-switch .toggle-label-text {
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: var(--gray-200);
  text-transform: uppercase;
  margin-left: 42px;
}
.vh-checkbox-input .vh-switch input:checked + .slider {
  background-color: var(--accent);
  border-color: var(--accent);
}
.vh-checkbox-input .vh-switch input:checked ~ .toggle-label-text {
  color: var(--accent);
}
.vh-checkbox-input .vh-switch.danger input:checked + .slider, .vh-checkbox-input .vh-switch.critical input:checked + .slider {
  background-color: var(--warning);
}
.vh-checkbox-input .vh-switch .vh-switch-primary input:checked + .slider {
  background-color: var(--primary);
}
.vh-checkbox-input .vh-switch .vh-switch-accent input:checked + .slider {
  background-color: var(--accent);
}
.vh-checkbox-input .vh-switch .vh-switch-success input:checked + .slider {
  background-color: var(--success);
}
.vh-checkbox-input .vh-switch .vh-switch-error input:checked + .slider {
  background-color: var(--warning);
}
.vh-checkbox-input .vh-switch .vh-switch-warning input:checked + .slider {
  background-color: var(--warning);
}
.vh-checkbox-input .vh-switch .vh-switch-danger input:checked + .slider {
  background-color: var(--destructive);
}
.vh-checkbox-input .vh-switch .vh-switch-link input:checked + .slider {
  background-color: var(--link);
}
.vh-checkbox-input .vh-switch .vh-switch-info input:checked + .slider {
  background-color: var(--dev);
}
.vh-checkbox-input .vh-switch .vh-switch-live input:checked + .slider {
  background-color: var(--live);
}
.vh-checkbox-input .vh-switch .vh-switch-draft input:checked + .slider {
  background-color: var(--warning);
}
.vh-checkbox-input .vh-switch .vh-switch-dev input:checked + .slider {
  background-color: var(--dev);
}
.vh-checkbox-input .vh-switch .vh-switch-system input:checked + .slider {
  background-color: var(--warning);
}
.vh-checkbox-input .vh-switch .vh-switch-beta input:checked + .slider {
  background-color: var(--warning);
}
.vh-checkbox-input .vh-switch .vh-switch-secondary input:checked + .slider {
  background-color: var(--secondary);
}
.vh-checkbox-input .vh-switch .vh-switch-tertiary input:checked + .slider {
  background-color: var(--system);
}
.vh-checkbox-input .vh-switch.l .slider {
  width: 36px;
  height: 24px;
}
.vh-checkbox-input .vh-switch.l .slider:before {
  height: 24px;
  width: 24px;
}
.vh-checkbox-input .vh-switch.m {
  height: 20px;
  min-width: 30px;
}
.vh-checkbox-input .vh-switch.m label {
  line-height: 20px;
}
.vh-checkbox-input .vh-switch.m input ~ img {
  width: 10px;
  height: 10px;
  top: 5px;
  left: 5px;
}
.vh-checkbox-input .vh-switch.m input:checked ~ img {
  width: 10px;
  height: 10px;
  top: 5px;
  left: 3px;
}
.vh-checkbox-input .vh-switch.m input:checked + .slider:before {
  -webkit-transform: translateX(10px);

  -moz-transform: translateX(10px);

  -ms-transform: translateX(10px);

  -webkit-transform: translateX(10px);


  -moz-transform: translateX(10px);


  -ms-transform: translateX(10px);


  -webkit-transform: translateX(10px);



  -moz-transform: translateX(10px);



  -ms-transform: translateX(10px);



  transform: translateX(10px);
}
.vh-checkbox-input .vh-switch.m .slider {
  width: 30px;
  height: 20px;
}
.vh-checkbox-input .vh-switch.m .slider:before {
  height: 20px;
  width: 20px;
}
.vh-checkbox-input .vh-switch.m .slider.round {
  -webkit-border-radius: 20px;

  -moz-border-radius: 20px;

  -webkit-border-radius: 20px;


  -moz-border-radius: 20px;


  -webkit-border-radius: 20px;



  -moz-border-radius: 20px;



  border-radius: 20px;
}
.vh-checkbox-input .vh-switch.s {
  height: 16px;
  min-width: 24px;
}
.vh-checkbox-input .vh-switch.s label {
  line-height: 16px;
}
.vh-checkbox-input .vh-switch.s input ~ img {
  width: 8px;
  height: 8px;
  top: 4px;
  left: 4px;
}
.vh-checkbox-input .vh-switch.s input:checked ~ img {
  width: 8px;
  height: 8px;
  top: 4px;
  left: 0px;
}
.vh-checkbox-input .vh-switch.s input:checked + .slider:before {
  -webkit-transform: translateX(8px);

  -moz-transform: translateX(8px);

  -ms-transform: translateX(8px);

  -webkit-transform: translateX(8px);


  -moz-transform: translateX(8px);


  -ms-transform: translateX(8px);


  -webkit-transform: translateX(8px);



  -moz-transform: translateX(8px);



  -ms-transform: translateX(8px);



  transform: translateX(8px);
}
.vh-checkbox-input .vh-switch.s .slider {
  width: 24px;
  height: 16px;
}
.vh-checkbox-input .vh-switch.s .slider:before {
  height: 16px;
  width: 16px;
}
.vh-checkbox-input .vh-switch.s .slider.round {
  -webkit-border-radius: 16px;

  -moz-border-radius: 16px;

  -webkit-border-radius: 16px;


  -moz-border-radius: 16px;


  -webkit-border-radius: 16px;



  -moz-border-radius: 16px;



  border-radius: 16px;
}
.vh-checkbox-input .vh-switch + * {
  margin-left: 16px;
}
.vh-checkbox-input label {
  line-height: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.vh-checkbox-input .lbl-sm {
  line-height: 24px;
}
/* min-height, not height. These pin the row to the switch's own height, which
   is right when the container holds only a switch and wrong the moment it also
   holds a label block, a subfield or an option list — the box clamps and the
   content spills over whatever follows. .vh-switch.m is itself 24px tall, so
   height: 20px was clamping below its own content even in the simple case.
   Found via the Selection Patterns composites. */
.vh-checkbox-input:has(.vh-switch.m) {
  min-height: 20px;
}
.vh-checkbox-input:has(.vh-switch.s) {
  min-height: 16px;
}

.height-fit-content {
  height: fit-content;
}

.vh-checkbox-input + label, .vh-checkbox-input span ~ label, .vh-toggle-bottom-notes {
  margin-left: 52px;
}

.field-subtype-selector .add-new-fields-list {
  max-width: 408px;
}
.field-subtype-selector .add-new-fields-list .btn-select-field-sub-type-option {
  padding-left: 16px;
  padding-right: 16px;
  max-width: 136px;
  max-height: 103px;
  min-height: 96px;
}
.field-subtype-selector .mr-32 {
  margin-right: 32px;
}
.field-subtype-selector .ml-32 {
  margin-left: 32px;
}

.add-new-fields-list .field-box i {
  color: var(--gray-500);
}
.add-new-fields-list .field-box .fa-lg {
  font-size: 32px;
  line-height: 0.75em;
  vertical-align: -0.0667em;
}
.add-new-fields-list .field-box-outer-section:hover i, .add-new-fields-list .field-box-outer-section.active i {
  color: var(--primary);
}
.add-new-fields-list .field-box-outer-section:hover img.vh-icon-hover-primary, .add-new-fields-list .field-box-outer-section.active img.vh-icon-hover-primary {
  filter: invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%);
}
.add-new-fields-list .field-box-outer-section:hover img.vh-icon-primary-dark-hover, .add-new-fields-list .field-box-outer-section.active img.vh-icon-primary-dark-hover {
  filter: brightness(0) saturate(100%) invert(52%) sepia(93%) saturate(940%) hue-rotate(130deg) brightness(92%) contrast(91%);
}

.field-box-outer-section label {
  color: var(--foreground);
}
.field-box-outer-section:hover i {
  color: var(--primary);
}
.field-box-outer-section:hover label {
  color: var(--primary);
}
.field-box-outer-section:hover img.vh-icon-hover-primary {
  filter: invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%);
}
.field-box-outer-section:hover img.vh-icon-primary-dark-hover {
  filter: invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%);
}

.fs-26 {
  font-size: 1.625em !important;
}

.fs-28 {
  font-size: 1.75em !important;
}

.bootstrap-tagsinput input {
  background: transparent !important;
}

.btn-remove-tag-from-projects:hover svg path {
  fill: var(--warning);
}

.tooltip-primary .arrow::before,
.tooltip-primary[x-placement^=top] .arrow::before {
  border-top-color: var(--primary);
}

.tooltip-secondary .arrow::before,
.tooltip-secondary[x-placement^=top] .arrow::before {
  border-top-color: var(--secondary);
}

.tooltip-alert .arrow::before,
.tooltip-alert[x-placement^=top] .arrow::before {
  border-top-color: var(--warning);
}

[data-type=tooltip]:active img, [data-type=tooltip]:is([aria-describedby]) img {
  filter: var(--primary-filter);
}

[data-type=tooltip-primary]:hover svg path {
  fill: var(--gray-400);
  color: var(--gray-400);
}
[data-type=tooltip-primary]:active svg path, [data-type=tooltip-primary]:is([aria-describedby]) svg path {
  fill: var(--primary);
  color: var(--primary);
}
[data-type=tooltip-primary]:active img, [data-type=tooltip-primary]:is([aria-describedby]) img {
  filter: invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%);
}

[data-type=tooltip-secondary]:hover svg path {
  fill: var(--gray-50);
  color: var(--gray-400);
}
[data-type=tooltip-secondary]:active svg path, [data-type=tooltip-secondary]:is([aria-describedby]) svg path {
  fill: var(--secondary);
  color: var(--secondary);
}
[data-type=tooltip-secondary]:active img, [data-type=tooltip-secondary]:is([aria-describedby]) img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(10%) saturate(3890%) hue-rotate(125deg) brightness(92%) contrast(91%);
}

.more-options, .more-options-light {
  width: 32px;
  height: 32px;
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  -webkit-border-radius: 50%;



  -moz-border-radius: 50%;



  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.more-options:not(.more-options-light) img, .more-options-light:not(.more-options-light) img {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}
.more-options:not(.more-options-light):hover, .more-options-light:not(.more-options-light):hover {
  background: var(--gray-950);
}
.more-options:not(.more-options-light):hover img, .more-options-light:not(.more-options-light):hover img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
}
.more-options:not(.more-options-light):active, .more-options:not(.more-options-light).active, .more-options-light:not(.more-options-light):active, .more-options-light:not(.more-options-light).active {
  background: var(--gray-200);
}
.more-options:not(.more-options-light):active img, .more-options:not(.more-options-light).active img, .more-options-light:not(.more-options-light):active img, .more-options-light:not(.more-options-light).active img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(14%) saturate(1552%) hue-rotate(152deg) brightness(85%) contrast(85%);
}
.more-options:not(.more-options) img, .more-options-light:not(.more-options) img {
  filter: brightness(0) saturate(100%) invert(82%) sepia(19%) saturate(120%) hue-rotate(152deg) brightness(95%) contrast(87%);
}
.more-options:not(.more-options):hover, .more-options-light:not(.more-options):hover {
  background: var(--gray-950);
}
.more-options:not(.more-options):hover img, .more-options-light:not(.more-options):hover img {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}
.more-options:not(.more-options):active, .more-options:not(.more-options).active, .more-options-light:not(.more-options):active, .more-options-light:not(.more-options).active {
  background: var(--gray-150);
}
.more-options:not(.more-options):active img, .more-options:not(.more-options).active img, .more-options-light:not(.more-options):active img, .more-options-light:not(.more-options).active img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
}

.pane {
  -webkit-border-radius: 12px;

  -moz-border-radius: 12px;

  -webkit-border-radius: 12px;


  -moz-border-radius: 12px;


  -webkit-border-radius: 12px;



  -moz-border-radius: 12px;



  border-radius: 12px;
  background-color: var(--card);
}
.pane.pane-light {
  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);

  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);

  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);


  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);


  box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);
}
.pane.pane-medium {
  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.1);

  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.1);

  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.1);


  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.1);


  box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.1);
}
/* Dark mode pane overrides */
body.dark .pane.pane-light {
  -webkit-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);

  -moz-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);

  -webkit-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);


  -moz-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);


  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
body.dark .pane.pane-medium {
  -webkit-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.07);

  -moz-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.07);

  -webkit-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.07);


  -moz-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.07);


  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* Type and colour come from the .body-xs and .text-legal classes on the element
   (see components/copyright.blade.php) — don't re-declare them here. */
.copy-right-text {
  display: inline-block;
}

/** End - Custom Modal Styles */
.modal-md-600 {
  max-width: 600px !important;
}

.modal-md-412 {
  max-width: 412px !important;
}

.modal-md-256 {
  max-width: 256px !important;
}

.modal-md-256 .modal-content {
  height: 256px !important;
}

.vh-icon-secondary {
  filter: brightness(0) saturate(100%) invert(49%) sepia(100%) saturate(2335%) hue-rotate(140deg) brightness(103%) contrast(91%);
}

.tooltip.fade, .tooltip.show {
  -webkit-transition: opacity 0s !important;

  -moz-transition: opacity 0s !important;

  -ms-transition: opacity 0s !important;

  -webkit-transition: opacity 0s !important;


  -moz-transition: opacity 0s !important;


  -ms-transition: opacity 0s !important;


  -webkit-transition: opacity 0s !important;



  -moz-transition: opacity 0s !important;



  -ms-transition: opacity 0s !important;



  transition: opacity 0s !important;
}


.copy-write-text {
  color: var(--gray-400) !important;
}


.project-title {
  margin-top: 24px !important;
}
.project-title .title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 8px;
}

.modal-inner-container {
  margin-right: 32px;
  margin-left: 32px;
}

.project-modal {
  background-color: var(--overlay);
}
.project-modal.vh-react-modal {
  background-color: transparent !important;
}
.modal-backdrop.vh-react-modal-backdrop {
  background-color: var(--overlay) !important;
}
.modal-backdrop.vh-react-modal-backdrop {
  opacity: 0 !important;
}

.modal-backdrop.vh-react-modal-backdrop.show {
  opacity: 1 !important;
}
.project-modal .interface-modal .project-title {
  margin-top: 16px !important;
  padding-bottom: 16px;
  gap: 10px;
}

.project-modal .interface-modal .project-title .circle-icon img,
.project-modal .interface-modal .project-title .circle-icon svg,
.project-modal .interface-modal .project-title label img {
  filter: var(--gray-300-filter) !important;
}

/* The rest of the left-aligned interface modal's geometry. It existed only as
   demo CSS on the design-system page (.ds-modal-interface-demo in
   resources/views/web/style/sections/_modals.blade.php), which meant the
   specimen could not actually be reproduced by a product page -- copying the
   Blade got you a different-looking modal. Promoted here on its second
   consumer (the payment-method modal). The /style demo rules are now
   duplicates of these and are harmless.

   One deliberate change from the demo: the icon slot is width:auto with a gap
   rather than a fixed 18px box, so it can hold a leading control (the payment
   modal puts a back chevron there) beside the glyph. With a single child it
   still measures 18px, so the specimen is unaffected. */
.project-modal .interface-modal .ds-modal-interface-icon {
  background: transparent !important;
  width: auto;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.project-modal .interface-modal .ds-modal-interface-icon img,
.project-modal .interface-modal .ds-modal-interface-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.project-modal .interface-modal .vh-modal-content {
  margin-top: 16px !important;
}

.project-modal .interface-modal .vh-modal-buttons {
  margin-top: 12px !important;
}

/* The interface modal's title typography, promoted for the same reason as the
   rules above: it lived only in the design-system page's demo CSS, so the
   theme's own .project-title .title (height: 28px, margin-top: 12px, centred)
   applied instead and made a product copy of the specimen render a 61px header
   where the specimen measures 56px. No !important needed here -- this is
   (0,4,0) against that rule's (0,3,0), where the demo had to force it. */
.project-modal .interface-modal .project-title .title {
  margin-top: 0;
  padding-bottom: 0;
  height: auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  flex: 0 1 auto;
}

.project-modal .project-title {
  margin-top: 24px !important;
  color: var(--card-foreground);
}
.project-modal .project-title .title {
  margin-top: 12px;
  margin-bottom: 0;
  display: flex;
  height: 28px;
  flex-direction: column;
  justify-content: center;
  color: var(--card-foreground);
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/* Bare .modal-content radius. The scoped modal variants in this file cover
   .project-modal and similar, but an unscoped Bootstrap modal has no theme
   rule, so this is the only thing holding its corners at 16px. */
.modal-content {
    -webkit-border-radius: 16px !important;

    -moz-border-radius: 16px !important;

    -webkit-border-radius: 16px !important;


    -moz-border-radius: 16px !important;


    border-radius: 16px !important;
}

.project-modal .modal-content {
  background: var(--card);
  color: var(--card-foreground);
  -webkit-box-shadow: 0 24px 64px rgba(4, 22, 27, 0.2), 0 2px 12px rgba(4, 22, 27, 0.16) !important;

  -moz-box-shadow: 0 24px 64px rgba(4, 22, 27, 0.2), 0 2px 12px rgba(4, 22, 27, 0.16) !important;

  -webkit-box-shadow: 0 24px 64px rgba(4, 22, 27, 0.2), 0 2px 12px rgba(4, 22, 27, 0.16) !important;


  -moz-box-shadow: 0 24px 64px rgba(4, 22, 27, 0.2), 0 2px 12px rgba(4, 22, 27, 0.16) !important;


  -webkit-box-shadow: 0 24px 64px rgba(4, 22, 27, 0.2), 0 2px 12px rgba(4, 22, 27, 0.16) !important;



  -moz-box-shadow: 0 24px 64px rgba(4, 22, 27, 0.2), 0 2px 12px rgba(4, 22, 27, 0.16) !important;



  box-shadow: 0 24px 64px rgba(4, 22, 27, 0.2), 0 2px 12px rgba(4, 22, 27, 0.16) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
}

.project-modal .modal-body {
  background: var(--card);
  color: var(--card-foreground);
}

.project-modal .close.absolute-container {
  position: absolute;
  z-index: 10;
  width: 32px;
  height: 32px;
  padding: 0px !important;
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  -webkit-border-radius: 50%;



  -moz-border-radius: 50%;



  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 8px 0 0;
  color: var(--muted-foreground);
  background: transparent;
  -webkit-transition: background-color 0.15s ease, color 0.15s ease;

  -moz-transition: background-color 0.15s ease, color 0.15s ease;

  -ms-transition: background-color 0.15s ease, color 0.15s ease;

  -webkit-transition: background-color 0.15s ease, color 0.15s ease;


  -moz-transition: background-color 0.15s ease, color 0.15s ease;


  -ms-transition: background-color 0.15s ease, color 0.15s ease;


  transition: background-color 0.15s ease, color 0.15s ease;
}

.project-modal .close.absolute-container svg {
  display: block;
}

.gap-8 {
  gap: 8px;
}

.project-modal .close.absolute-container:hover {
  background: var(--muted);
  color: var(--foreground);
}

.project-modal .close.absolute-container:active {
  background: color-mix(in oklch, var(--muted) 72%, var(--border));
  color: var(--foreground);
}

.project-modal .modal-header-section-with-border {
  /* height: 140px; */
  height: auto;
  border-bottom: 1.5px solid var(--border);
  padding-left: 24px;
}

.project-modal .modal-footer-section-with-border {
  padding-top: 32px;
  border-top: 1.5px solid var(--border);
  z-index: 11;
  background: var(--card);
  display: flex;
  align-items: center;
}

.project-modal .modal-inner-section,
.project-modal .modal-inner-section p,
.project-modal .modal-inner-section label,
.project-modal .modal-inner-section .body,
.project-modal .modal-inner-section .body-small,
.project-modal .modal-inner-section .subtitle,
.project-modal .modal-inner-section .text-secondary {
  color: inherit;
}

.project-modal .vh-modal-message p,
.project-modal .vh-modal-message .text-secondary {
  color: var(--muted-foreground) !important;
}

/* Modal circle icons — match shared dark primitive */
.dark .project-modal .project-title .circle-icon.gray25,
[data-theme="dark"] .project-modal .project-title .circle-icon.gray25 {
  background: var(--gray-800) !important;
}

.dark .project-modal .project-title .circle-icon.success-tint-10,
[data-theme="dark"] .project-modal .project-title .circle-icon.success-tint-10 {
  background: color-mix(in oklch, var(--success) 25%, var(--gray-900)) !important;
}

.dark .project-modal .project-title .circle-icon.error-tint-10,
.dark .project-modal .project-title .circle-icon.warning-tint-10,
[data-theme="dark"] .project-modal .project-title .circle-icon.error-tint-10,
[data-theme="dark"] .project-modal .project-title .circle-icon.warning-tint-10 {
  background: color-mix(in srgb, var(--warning) 28%, var(--gray-900)) !important;
}

.dark .project-modal .project-title .circle-icon.danger-tint-10,
[data-theme="dark"] .project-modal .project-title .circle-icon.danger-tint-10 {
  background: color-mix(in srgb, var(--destructive) 28%, var(--gray-900)) !important;
}

.dark .project-modal .modal-content,
[data-theme="dark"] .project-modal .modal-content {
  -webkit-box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;

  -moz-box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;

  -webkit-box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;


  -moz-box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;


  -webkit-box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;



  -moz-box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;



  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

/** Start - Custom Modal Styles */
@keyframes vh-modal-loader-animation {
  0%   { -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);

 -moz-transform: rotate(0deg);

 -ms-transform: rotate(0deg);

 transform: rotate(0deg); }
  12%  { -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);

 -moz-transform: rotate(90deg);

 -ms-transform: rotate(90deg);

 transform: rotate(90deg); }   /* fast burst */
  47%  { -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -webkit-transform: rotate(180deg);

 -moz-transform: rotate(180deg);

 -ms-transform: rotate(180deg);

 transform: rotate(180deg); }  /* slow drag */
  59%  { -webkit-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -ms-transform: rotate(270deg);
 -webkit-transform: rotate(270deg);

 -moz-transform: rotate(270deg);

 -ms-transform: rotate(270deg);

 transform: rotate(270deg); }  /* fast burst */
  100% { -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);

 -moz-transform: rotate(360deg);

 -ms-transform: rotate(360deg);

 transform: rotate(360deg); }  /* slow drag */
}

/* Propeller — asymmetric S-curve: slow 3.3s coast-down, snappy 2.7s ramp-up
   Velocity: 0.80 rot/s (slow) ↔ 2.20 rot/s (fast), 6s loop */
@keyframes vh-propeller-loader-animation {
     0.0% { -webkit-transform: rotate(0.0deg);
 -moz-transform: rotate(0.0deg);
 -ms-transform: rotate(0.0deg);
 -webkit-transform: rotate(0.0deg);

 -moz-transform: rotate(0.0deg);

 -ms-transform: rotate(0.0deg);

 transform: rotate(0.0deg); }
     2.5% { -webkit-transform: rotate(118.7deg);
 -moz-transform: rotate(118.7deg);
 -ms-transform: rotate(118.7deg);
 -webkit-transform: rotate(118.7deg);

 -moz-transform: rotate(118.7deg);

 -ms-transform: rotate(118.7deg);

 transform: rotate(118.7deg); }
     5.0% { -webkit-transform: rotate(236.6deg);
 -moz-transform: rotate(236.6deg);
 -ms-transform: rotate(236.6deg);
 -webkit-transform: rotate(236.6deg);

 -moz-transform: rotate(236.6deg);

 -ms-transform: rotate(236.6deg);

 transform: rotate(236.6deg); }
     7.5% { -webkit-transform: rotate(353.0deg);
 -moz-transform: rotate(353.0deg);
 -ms-transform: rotate(353.0deg);
 -webkit-transform: rotate(353.0deg);

 -moz-transform: rotate(353.0deg);

 -ms-transform: rotate(353.0deg);

 transform: rotate(353.0deg); }
    10.0% { -webkit-transform: rotate(467.1deg);
 -moz-transform: rotate(467.1deg);
 -ms-transform: rotate(467.1deg);
 -webkit-transform: rotate(467.1deg);

 -moz-transform: rotate(467.1deg);

 -ms-transform: rotate(467.1deg);

 transform: rotate(467.1deg); }
    12.5% { -webkit-transform: rotate(578.3deg);
 -moz-transform: rotate(578.3deg);
 -ms-transform: rotate(578.3deg);
 -webkit-transform: rotate(578.3deg);

 -moz-transform: rotate(578.3deg);

 -ms-transform: rotate(578.3deg);

 transform: rotate(578.3deg); }
    15.0% { -webkit-transform: rotate(686.1deg);
 -moz-transform: rotate(686.1deg);
 -ms-transform: rotate(686.1deg);
 -webkit-transform: rotate(686.1deg);

 -moz-transform: rotate(686.1deg);

 -ms-transform: rotate(686.1deg);

 transform: rotate(686.1deg); }
    17.5% { -webkit-transform: rotate(789.7deg);
 -moz-transform: rotate(789.7deg);
 -ms-transform: rotate(789.7deg);
 -webkit-transform: rotate(789.7deg);

 -moz-transform: rotate(789.7deg);

 -ms-transform: rotate(789.7deg);

 transform: rotate(789.7deg); }
    20.0% { -webkit-transform: rotate(888.8deg);
 -moz-transform: rotate(888.8deg);
 -ms-transform: rotate(888.8deg);
 -webkit-transform: rotate(888.8deg);

 -moz-transform: rotate(888.8deg);

 -ms-transform: rotate(888.8deg);

 transform: rotate(888.8deg); }
    22.5% { -webkit-transform: rotate(983.0deg);
 -moz-transform: rotate(983.0deg);
 -ms-transform: rotate(983.0deg);
 -webkit-transform: rotate(983.0deg);

 -moz-transform: rotate(983.0deg);

 -ms-transform: rotate(983.0deg);

 transform: rotate(983.0deg); }
    25.0% { -webkit-transform: rotate(1072.0deg);
 -moz-transform: rotate(1072.0deg);
 -ms-transform: rotate(1072.0deg);
 -webkit-transform: rotate(1072.0deg);

 -moz-transform: rotate(1072.0deg);

 -ms-transform: rotate(1072.0deg);

 transform: rotate(1072.0deg); }
    27.5% { -webkit-transform: rotate(1155.7deg);
 -moz-transform: rotate(1155.7deg);
 -ms-transform: rotate(1155.7deg);
 -webkit-transform: rotate(1155.7deg);

 -moz-transform: rotate(1155.7deg);

 -ms-transform: rotate(1155.7deg);

 transform: rotate(1155.7deg); }
    30.0% { -webkit-transform: rotate(1234.0deg);
 -moz-transform: rotate(1234.0deg);
 -ms-transform: rotate(1234.0deg);
 -webkit-transform: rotate(1234.0deg);

 -moz-transform: rotate(1234.0deg);

 -ms-transform: rotate(1234.0deg);

 transform: rotate(1234.0deg); }
    32.5% { -webkit-transform: rotate(1307.0deg);
 -moz-transform: rotate(1307.0deg);
 -ms-transform: rotate(1307.0deg);
 -webkit-transform: rotate(1307.0deg);

 -moz-transform: rotate(1307.0deg);

 -ms-transform: rotate(1307.0deg);

 transform: rotate(1307.0deg); }
    35.0% { -webkit-transform: rotate(1374.8deg);
 -moz-transform: rotate(1374.8deg);
 -ms-transform: rotate(1374.8deg);
 -webkit-transform: rotate(1374.8deg);

 -moz-transform: rotate(1374.8deg);

 -ms-transform: rotate(1374.8deg);

 transform: rotate(1374.8deg); }
    37.5% { -webkit-transform: rotate(1437.7deg);
 -moz-transform: rotate(1437.7deg);
 -ms-transform: rotate(1437.7deg);
 -webkit-transform: rotate(1437.7deg);

 -moz-transform: rotate(1437.7deg);

 -ms-transform: rotate(1437.7deg);

 transform: rotate(1437.7deg); }
    40.0% { -webkit-transform: rotate(1496.1deg);
 -moz-transform: rotate(1496.1deg);
 -ms-transform: rotate(1496.1deg);
 -webkit-transform: rotate(1496.1deg);

 -moz-transform: rotate(1496.1deg);

 -ms-transform: rotate(1496.1deg);

 transform: rotate(1496.1deg); }
    42.5% { -webkit-transform: rotate(1550.3deg);
 -moz-transform: rotate(1550.3deg);
 -ms-transform: rotate(1550.3deg);
 -webkit-transform: rotate(1550.3deg);

 -moz-transform: rotate(1550.3deg);

 -ms-transform: rotate(1550.3deg);

 transform: rotate(1550.3deg); }
    45.0% { -webkit-transform: rotate(1601.1deg);
 -moz-transform: rotate(1601.1deg);
 -ms-transform: rotate(1601.1deg);
 -webkit-transform: rotate(1601.1deg);

 -moz-transform: rotate(1601.1deg);

 -ms-transform: rotate(1601.1deg);

 transform: rotate(1601.1deg); }
    47.5% { -webkit-transform: rotate(1649.0deg);
 -moz-transform: rotate(1649.0deg);
 -ms-transform: rotate(1649.0deg);
 -webkit-transform: rotate(1649.0deg);

 -moz-transform: rotate(1649.0deg);

 -ms-transform: rotate(1649.0deg);

 transform: rotate(1649.0deg); }
    50.0% { -webkit-transform: rotate(1694.6deg);
 -moz-transform: rotate(1694.6deg);
 -ms-transform: rotate(1694.6deg);
 -webkit-transform: rotate(1694.6deg);

 -moz-transform: rotate(1694.6deg);

 -ms-transform: rotate(1694.6deg);

 transform: rotate(1694.6deg); }
    52.5% { -webkit-transform: rotate(1738.7deg);
 -moz-transform: rotate(1738.7deg);
 -ms-transform: rotate(1738.7deg);
 -webkit-transform: rotate(1738.7deg);

 -moz-transform: rotate(1738.7deg);

 -ms-transform: rotate(1738.7deg);

 transform: rotate(1738.7deg); }
    55.0% { -webkit-transform: rotate(1782.0deg);
 -moz-transform: rotate(1782.0deg);
 -ms-transform: rotate(1782.0deg);
 -webkit-transform: rotate(1782.0deg);

 -moz-transform: rotate(1782.0deg);

 -ms-transform: rotate(1782.0deg);

 transform: rotate(1782.0deg); }
    57.5% { -webkit-transform: rotate(1825.4deg);
 -moz-transform: rotate(1825.4deg);
 -ms-transform: rotate(1825.4deg);
 -webkit-transform: rotate(1825.4deg);

 -moz-transform: rotate(1825.4deg);

 -ms-transform: rotate(1825.4deg);

 transform: rotate(1825.4deg); }
    60.0% { -webkit-transform: rotate(1869.9deg);
 -moz-transform: rotate(1869.9deg);
 -ms-transform: rotate(1869.9deg);
 -webkit-transform: rotate(1869.9deg);

 -moz-transform: rotate(1869.9deg);

 -ms-transform: rotate(1869.9deg);

 transform: rotate(1869.9deg); }
    62.5% { -webkit-transform: rotate(1916.7deg);
 -moz-transform: rotate(1916.7deg);
 -ms-transform: rotate(1916.7deg);
 -webkit-transform: rotate(1916.7deg);

 -moz-transform: rotate(1916.7deg);

 -ms-transform: rotate(1916.7deg);

 transform: rotate(1916.7deg); }
    65.0% { -webkit-transform: rotate(1966.8deg);
 -moz-transform: rotate(1966.8deg);
 -ms-transform: rotate(1966.8deg);
 -webkit-transform: rotate(1966.8deg);

 -moz-transform: rotate(1966.8deg);

 -ms-transform: rotate(1966.8deg);

 transform: rotate(1966.8deg); }
    67.5% { -webkit-transform: rotate(2021.1deg);
 -moz-transform: rotate(2021.1deg);
 -ms-transform: rotate(2021.1deg);
 -webkit-transform: rotate(2021.1deg);

 -moz-transform: rotate(2021.1deg);

 -ms-transform: rotate(2021.1deg);

 transform: rotate(2021.1deg); }
    70.0% { -webkit-transform: rotate(2080.4deg);
 -moz-transform: rotate(2080.4deg);
 -ms-transform: rotate(2080.4deg);
 -webkit-transform: rotate(2080.4deg);

 -moz-transform: rotate(2080.4deg);

 -ms-transform: rotate(2080.4deg);

 transform: rotate(2080.4deg); }
    72.5% { -webkit-transform: rotate(2145.5deg);
 -moz-transform: rotate(2145.5deg);
 -ms-transform: rotate(2145.5deg);
 -webkit-transform: rotate(2145.5deg);

 -moz-transform: rotate(2145.5deg);

 -ms-transform: rotate(2145.5deg);

 transform: rotate(2145.5deg); }
    75.0% { -webkit-transform: rotate(2216.7deg);
 -moz-transform: rotate(2216.7deg);
 -ms-transform: rotate(2216.7deg);
 -webkit-transform: rotate(2216.7deg);

 -moz-transform: rotate(2216.7deg);

 -ms-transform: rotate(2216.7deg);

 transform: rotate(2216.7deg); }
    77.5% { -webkit-transform: rotate(2294.4deg);
 -moz-transform: rotate(2294.4deg);
 -ms-transform: rotate(2294.4deg);
 -webkit-transform: rotate(2294.4deg);

 -moz-transform: rotate(2294.4deg);

 -ms-transform: rotate(2294.4deg);

 transform: rotate(2294.4deg); }
    80.0% { -webkit-transform: rotate(2378.7deg);
 -moz-transform: rotate(2378.7deg);
 -ms-transform: rotate(2378.7deg);
 -webkit-transform: rotate(2378.7deg);

 -moz-transform: rotate(2378.7deg);

 -ms-transform: rotate(2378.7deg);

 transform: rotate(2378.7deg); }
    82.5% { -webkit-transform: rotate(2469.5deg);
 -moz-transform: rotate(2469.5deg);
 -ms-transform: rotate(2469.5deg);
 -webkit-transform: rotate(2469.5deg);

 -moz-transform: rotate(2469.5deg);

 -ms-transform: rotate(2469.5deg);

 transform: rotate(2469.5deg); }
    85.0% { -webkit-transform: rotate(2566.4deg);
 -moz-transform: rotate(2566.4deg);
 -ms-transform: rotate(2566.4deg);
 -webkit-transform: rotate(2566.4deg);

 -moz-transform: rotate(2566.4deg);

 -ms-transform: rotate(2566.4deg);

 transform: rotate(2566.4deg); }
    87.5% { -webkit-transform: rotate(2669.1deg);
 -moz-transform: rotate(2669.1deg);
 -ms-transform: rotate(2669.1deg);
 -webkit-transform: rotate(2669.1deg);

 -moz-transform: rotate(2669.1deg);

 -ms-transform: rotate(2669.1deg);

 transform: rotate(2669.1deg); }
    90.0% { -webkit-transform: rotate(2776.8deg);
 -moz-transform: rotate(2776.8deg);
 -ms-transform: rotate(2776.8deg);
 -webkit-transform: rotate(2776.8deg);

 -moz-transform: rotate(2776.8deg);

 -ms-transform: rotate(2776.8deg);

 transform: rotate(2776.8deg); }
    92.5% { -webkit-transform: rotate(2888.7deg);
 -moz-transform: rotate(2888.7deg);
 -ms-transform: rotate(2888.7deg);
 -webkit-transform: rotate(2888.7deg);

 -moz-transform: rotate(2888.7deg);

 -ms-transform: rotate(2888.7deg);

 transform: rotate(2888.7deg); }
    95.0% { -webkit-transform: rotate(3003.9deg);
 -moz-transform: rotate(3003.9deg);
 -ms-transform: rotate(3003.9deg);
 -webkit-transform: rotate(3003.9deg);

 -moz-transform: rotate(3003.9deg);

 -ms-transform: rotate(3003.9deg);

 transform: rotate(3003.9deg); }
    97.5% { -webkit-transform: rotate(3121.4deg);
 -moz-transform: rotate(3121.4deg);
 -ms-transform: rotate(3121.4deg);
 -webkit-transform: rotate(3121.4deg);

 -moz-transform: rotate(3121.4deg);

 -ms-transform: rotate(3121.4deg);

 transform: rotate(3121.4deg); }
   100.0% { -webkit-transform: rotate(3240.0deg);
 -moz-transform: rotate(3240.0deg);
 -ms-transform: rotate(3240.0deg);
 -webkit-transform: rotate(3240.0deg);

 -moz-transform: rotate(3240.0deg);

 -ms-transform: rotate(3240.0deg);

 transform: rotate(3240.0deg); }
}

.vh-absolute-center {
  margin: auto;
}

.vh-modal-loader-svg {
  /*margin: auto;
  display: block;
  width: 46px;
  height: 46px;*/
  -webkit-animation: vh-modal-loader-animation 1.6s linear infinite;

  -moz-animation: vh-modal-loader-animation 1.6s linear infinite;

  -ms-animation: vh-modal-loader-animation 1.6s linear infinite;

  -webkit-animation: vh-modal-loader-animation 1.6s linear infinite;


  -moz-animation: vh-modal-loader-animation 1.6s linear infinite;


  -ms-animation: vh-modal-loader-animation 1.6s linear infinite;


  animation: vh-modal-loader-animation 1.6s linear infinite;
  transform-origin: 50% 50%;
}

.vh-propeller-loader-svg {
  -webkit-animation: vh-propeller-loader-animation 6s linear infinite;

  -moz-animation: vh-propeller-loader-animation 6s linear infinite;

  -ms-animation: vh-propeller-loader-animation 6s linear infinite;

  -webkit-animation: vh-propeller-loader-animation 6s linear infinite;


  -moz-animation: vh-propeller-loader-animation 6s linear infinite;


  -ms-animation: vh-propeller-loader-animation 6s linear infinite;


  animation: vh-propeller-loader-animation 6s linear infinite;
  transform-origin: 50% 50%;
}

/* Circle loader — seamless SVG arc (stroke-dashoffset) */
@keyframes vh-circle-loader-rotate {
}
@keyframes vh-circle-loader-dash {
  0%   { stroke-dasharray: 1, 126;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 89, 126; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 1, 126;  stroke-dashoffset: -126; }
}
.vh-circle-loader {
  width: 38px;
  height: 38px;
  -webkit-animation: vh-circle-loader-rotate 2s linear infinite;

  -moz-animation: vh-circle-loader-rotate 2s linear infinite;

  -ms-animation: vh-circle-loader-rotate 2s linear infinite;

  -webkit-animation: vh-circle-loader-rotate 2s linear infinite;


  -moz-animation: vh-circle-loader-rotate 2s linear infinite;


  -ms-animation: vh-circle-loader-rotate 2s linear infinite;


  animation: vh-circle-loader-rotate 2s linear infinite;
  transform-origin: 50% 50%;
  overflow: visible;
}
.vh-circle-loader .vh-circle-track {
  fill: none;
  stroke: #CEF1ED;
  stroke-width: 5;
}
.vh-circle-loader .vh-circle-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1, 126;
  -webkit-animation: vh-circle-loader-dash 1.5s ease-in-out infinite;

  -moz-animation: vh-circle-loader-dash 1.5s ease-in-out infinite;

  -ms-animation: vh-circle-loader-dash 1.5s ease-in-out infinite;

  -webkit-animation: vh-circle-loader-dash 1.5s ease-in-out infinite;


  -moz-animation: vh-circle-loader-dash 1.5s ease-in-out infinite;


  -ms-animation: vh-circle-loader-dash 1.5s ease-in-out infinite;


  animation: vh-circle-loader-dash 1.5s ease-in-out infinite;
}

/* Circle loader — dark mode */
body.dark .vh-circle-loader .vh-circle-track {
  stroke: rgba(11, 187, 166, 0.15);
}

/* Propeller loader — dark mode (lighten the fill) */
body.dark .vh-propeller-loader-svg path {
  fill: var(--gray-400) !important;
}

.vh-modal-message {
  font-size: 14px !important;
  margin-top: 0px !important;
}

.vh-modal-content {
  font-size: 14px !important;
  margin-top: 16px !important;
}

.vh-modal-content .form-group {
  margin-bottom: 12px !important;
}

.vh-modal-content .form-group:last-child,
.vh-modal-content :last-child {
  margin-bottom: 0 !important;
}

.vh-modal-buttons {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}
.vh-modal-buttons .btn {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.vh-modal-buttons .modal-footer-section .btn {
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.vh-new-content-type-modal .project-title {
  margin-top: 32px;
}

.vh-new-content-type-modal .vh-modal-content {
  margin-top: 16px !important;
}

.vh-new-content-type-modal .vh-modal-content .form-group {
  margin-bottom: 12px !important;
}

.vh-new-content-type-modal .vh-modal-content .form-group:last-child {
  margin-bottom: 0 !important;
}

.vh-new-content-type-modal .vh-modal-buttons {
  margin-top: 20px !important;
}

.vh-new-content-type-modal .vh-new-content-type-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.vh-new-content-type-modal .vh-new-content-type-footer-row .btn {
  margin: 0 !important;
}

.vh-collision-table-wrap {
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
}

.vh-collision-table {
  width: 100%;
  margin-bottom: 0;
  font-size: 14px;
}

.vh-collision-table th {
  font-weight: 600;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-200);
  padding: 8px 12px;
  text-align: left;
}

.vh-collision-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}

/* --danger is Bootstrap's token, not ours, and the fallback was a Tailwind red.
   Neither belongs in this theme. --destructive is the semantic we actually own,
   and it is always defined so the fallback served no purpose. This is a small
   visible change: Bootstrap's #dc3545 becomes our #F05E73. */
.vh-collision-table .vh-collision-match {
  color: var(--destructive);
  font-weight: 600;
}

.vh-collision-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-700);
  text-decoration: none;
}

.vh-collision-edit-link:hover {
  color: var(--primary);
  text-decoration: none;
}

.modal.fade:not(.project-modal) .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;

  -moz-transition: -webkit-transform 0.3s ease-out;

  -ms-transition: -webkit-transform 0.3s ease-out;

  -webkit-transition: -webkit-transform 0.3s ease-out;


  -moz-transition: -webkit-transform 0.3s ease-out;


  -ms-transition: -webkit-transform 0.3s ease-out;


  -webkit-transition: -webkit-transform 0.3s ease-out;



  -moz-transition: -webkit-transform 0.3s ease-out;



  -ms-transition: -webkit-transform 0.3s ease-out;



  transition: -webkit-transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;

  -moz-transition: transform 0.3s ease-out;

  -ms-transition: transform 0.3s ease-out;

  -webkit-transition: transform 0.3s ease-out;


  -moz-transition: transform 0.3s ease-out;


  -ms-transition: transform 0.3s ease-out;


  -webkit-transition: transform 0.3s ease-out;



  -moz-transition: transform 0.3s ease-out;



  -ms-transition: transform 0.3s ease-out;



  transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;

  -moz-transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;

  -ms-transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;

  -webkit-transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;


  -moz-transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;


  -ms-transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;


  -webkit-transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;



  -moz-transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;



  -ms-transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;



  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -5px);
  -webkit-transform: translate(0, -5px);

  -moz-transform: translate(0, -5px);

  -ms-transform: translate(0, -5px);

  -webkit-transform: translate(0, -5px);


  -moz-transform: translate(0, -5px);


  -ms-transform: translate(0, -5px);


  -webkit-transform: translate(0, -5px);



  -moz-transform: translate(0, -5px);



  -ms-transform: translate(0, -5px);



  transform: translate(0, -5px);
  -webkit-transform: scale(0.9);

  -moz-transform: scale(0.9);

  -ms-transform: scale(0.9);

  -webkit-transform: scale(0.9);


  -moz-transform: scale(0.9);


  -ms-transform: scale(0.9);


  -webkit-transform: scale(0.9);



  -moz-transform: scale(0.9);



  -ms-transform: scale(0.9);



  transform: scale(0.9);
}

.modal.show:not(.project-modal) .modal-dialog {
  -webkit-transform: none;
  -webkit-transform: none;

  -moz-transform: none;

  -ms-transform: none;

  -webkit-transform: none;


  -moz-transform: none;


  -ms-transform: none;


  -webkit-transform: none;



  -moz-transform: none;



  -ms-transform: none;



  transform: none;
  -webkit-transform: scale(1);

  -moz-transform: scale(1);

  -ms-transform: scale(1);

  -webkit-transform: scale(1);


  -moz-transform: scale(1);


  -ms-transform: scale(1);


  -webkit-transform: scale(1);



  -moz-transform: scale(1);



  -ms-transform: scale(1);



  transform: scale(1);
}

.modal-dialog {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
}

@media (max-width: 768px) {
  .modal-dialog {
    min-height: 60vh;
  }
}

/* Shared dialog motion: single timing source for Blade + React parity */
.project-modal.modal {
  --vh-modal-duration: 0.11s;
  --vh-modal-ease: ease-out;
}

.project-modal.modal.fade {
  -webkit-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out) !important;

  -moz-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out) !important;

  -ms-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out) !important;

  -webkit-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out) !important;


  -moz-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out) !important;


  -ms-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out) !important;


  transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out) !important;
  transition-delay: 0ms !important;
}

.project-modal.modal.fade .modal-dialog {
  opacity: 0 !important;
  -webkit-transform: scale(0.95) !important;

  -moz-transform: scale(0.95) !important;

  -ms-transform: scale(0.95) !important;

  -webkit-transform: scale(0.95) !important;


  -moz-transform: scale(0.95) !important;


  -ms-transform: scale(0.95) !important;


  transform: scale(0.95) !important;
  -webkit-transform: scale(0.95) !important;
  transform-origin: 50% 50%;
  transition-property: transform, opacity !important;
  transition-duration: var(--vh-modal-duration, 0.11s), var(--vh-modal-duration, 0.11s) !important;
  transition-timing-function: var(--vh-modal-ease, ease-out), var(--vh-modal-ease, ease-out) !important;
  transition-delay: 0ms, 0ms !important;
  will-change: transform, opacity;
}

.project-modal.modal.show .modal-dialog {
  opacity: 1 !important;
  -webkit-transform: scale(1) !important;

  -moz-transform: scale(1) !important;

  -ms-transform: scale(1) !important;

  -webkit-transform: scale(1) !important;


  -moz-transform: scale(1) !important;


  -ms-transform: scale(1) !important;


  transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
}

.modal-backdrop.fade {
  -webkit-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out);

  -moz-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out);

  -ms-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out);

  -webkit-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out);


  -moz-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out);


  -ms-transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out);


  transition: opacity var(--vh-modal-duration, 0.11s) var(--vh-modal-ease, ease-out);
}

/** End - Custom Modal Styles */
.modal-md-600 {
  max-width: 600px;
}

.modal-md-412 {
  max-width: 412px;
}

.modal-md-256 {
  max-width: 256px;
}

.modal-md-256 .modal-content {
  height: 256px;
}

.w-844 {
  width: 100%;
  max-width: 844px !important;
}

.w-824 {
  width: 100%;
  max-width: 824px !important;
}

.w-700 {
  width: 100%;
  max-width: 700px !important;
}

.w-96 {
  width: 100%;
  max-width: 96px !important;
}

.blockOverlay {
  background-color: var(--overlay) !important;
  opacity: 1 !important;
}

.blockMsg.blockPage, .blockOverlay {
  opacity: 1;
}

/* CUSTOM VH MODAL */
._vhAppFullPageModal {
  position: fixed;
  z-index: 99999999;
  width: 90%;
  background-color: var(--white);
  top: 10px;
  left: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 0.3rem;

  -moz-border-radius: 0.3rem;

  -webkit-border-radius: 0.3rem;


  -moz-border-radius: 0.3rem;


  -webkit-border-radius: 0.3rem;



  -moz-border-radius: 0.3rem;



  border-radius: 0.3rem;
  min-height: 200px;
  overflow: hidden;
}

._vhAppFullPageModal .modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
  cursor: pointer;
  position: absolute;
  width: 100%;
  background: white;
  z-index: 1;
}
._vhAppFullPageModal .modal-header .modal-title-content {
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
  color: #b8b8b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

._vhAppFullPageModal .modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
  margin-top: 70px;
}

._vhAppFullPageModal iframe {
  /*background: var(--white);
  width: 100%;
  height: calc(100vh - 60px);
  border: none;*/
}

._vhAppFullPageModal .modal-body .btn-close {
  padding: 10px;
  margin: -4px -4px 4px -4px;
  float: right;
}

._vhAppFullPageModal.modal-fullscreen {
  top: 0;
  left: 0;
  border: 0;
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
  -webkit-border-radius: 0px;

  -moz-border-radius: 0px;

  -webkit-border-radius: 0px;


  -moz-border-radius: 0px;


  -webkit-border-radius: 0px;



  -moz-border-radius: 0px;



  border-radius: 0px;
}

._vhAppFullPageModal.modal-fullscreen.content-modal {
  height: calc(100vh - 20px);
  top: 10px;
  -webkit-border-radius: 0.3rem;

  -moz-border-radius: 0.3rem;

  -webkit-border-radius: 0.3rem;


  -moz-border-radius: 0.3rem;


  -webkit-border-radius: 0.3rem;



  -moz-border-radius: 0.3rem;



  border-radius: 0.3rem;
}

._vhAppFullPageModal.modal-fullscreen .modal-content {
  -webkit-border-radius: 0 !important;

  -moz-border-radius: 0 !important;

  -webkit-border-radius: 0 !important;


  -moz-border-radius: 0 !important;


  -webkit-border-radius: 0 !important;



  -moz-border-radius: 0 !important;



  border-radius: 0 !important;
}

._vhAppFullPageModal.modal-xl {
  top: 75px;
  width: calc(100vw - 150px);
  height: calc(100vh - 150px);
  min-width: 850px;
}

._vhAppFullPageModal.modal-lg {
  top: 100px;
  width: calc(100vw - 300px);
  max-height: calc(100vh - 200px);
  max-width: 1100px;
  min-width: 800px;
}

._vhAppFullPageModal.modal-md {
  top: 100px;
  width: calc(100vw - 450px);
  max-height: calc(100vh - 200px);
  max-width: 850px;
  min-width: 800px;
}

._vhAppFullPageModal.modal-sm {
  top: 100px;
  width: calc(100vw - 550px);
  max-height: calc(100vh - 200px);
  max-width: 600px;
  min-width: 500px;
}

._vhAppFullPageModal:not(.modal-fullscreen) {
  -webkit-transform: translate(-50%, 0);

  -moz-transform: translate(-50%, 0);

  -ms-transform: translate(-50%, 0);

  -webkit-transform: translate(-50%, 0);


  -moz-transform: translate(-50%, 0);


  -ms-transform: translate(-50%, 0);


  -webkit-transform: translate(-50%, 0);



  -moz-transform: translate(-50%, 0);



  -ms-transform: translate(-50%, 0);



  transform: translate(-50%, 0);
}

._vhAppFullPageModal .modal-content {
  height: 100%;
  position: absolute;
}

._vhAppFullPageModal:not(.modal-iframe) .modal-body {
  overflow-y: auto;
  padding: 16px;
}

._vhAppFullPageModal.modal-iframe .modal-dialog {
  margin: 0 auto;
  height: 100%;
}

._vhAppFullPageModal.modal-iframe .modal-body {
  overflow-y: hidden;
  padding: 0;
  position: relative;
}

._vhAppFullPageModal iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

._vhAppFullPageModal .modal-body .btn-close:focus {
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  -webkit-box-shadow: none;



  -moz-box-shadow: none;



  box-shadow: none;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

::-webkit-scrollbar {
  width: 4px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  background-color: #b0afaf;
}

/* Scoped auto-hide override for the settings layout only (fixes
   permanently-visible scrollbar on narrow settings viewports). The global
   rules above intentionally style every scrollbar app-wide, which opts
   every scroller out of the OS's overlay/auto-hide behavior -- that's
   outside this fix's blast radius and stays untouched here.

   Verified in-browser which box actually scrolls on settings pages: not
   #main-wrapper/.main-content (settings.blade.php sets no height/overflow
   on either) -- <body> is the one whose scrollTop changes on scroll, a
   side effect of "html, body { height: 100% }" + "html, body { overflow-x:
   hidden }" elsewhere in this bundle, not anything declared here. Scope to
   body.settings-layout for that reason, and pair every rule with the
   equivalent html:has(body.settings-layout) selector as a no-cost hedge
   in case a given engine treats <html> as the scrollbar-owning box
   instead (the two selectors never both match a real scrollbar at once).

   Rather than un-styling ::-webkit-scrollbar for a subset of elements
   (once any rule matches a scroller, WebKit/Blink can't be told to fall
   back to overlay mode for just that scroller), collapse it to 0 width at
   rest and reveal a thin themed bar while the pointer is over the page --
   the closest CSS-only approximation of "fades away unless being used"
   for a whole-page scrollbar. scrollbar-width/scrollbar-color cover
   Firefox the same way. */
body.settings-layout,
html:has(body.settings-layout) {
  scrollbar-width: none;
}

body.settings-layout:hover,
html:has(body.settings-layout):hover {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

body.settings-layout::-webkit-scrollbar,
html:has(body.settings-layout)::-webkit-scrollbar {
  width: 0;
  -webkit-transition: width 0.15s ease-in-out;

  -moz-transition: width 0.15s ease-in-out;

  -ms-transition: width 0.15s ease-in-out;

  -webkit-transition: width 0.15s ease-in-out;


  -moz-transition: width 0.15s ease-in-out;


  -ms-transition: width 0.15s ease-in-out;


  transition: width 0.15s ease-in-out;
}

body.settings-layout:hover::-webkit-scrollbar,
html:has(body.settings-layout):hover::-webkit-scrollbar {
  width: 4px;
}

body.settings-layout::-webkit-scrollbar-thumb,
html:has(body.settings-layout)::-webkit-scrollbar-thumb {
  background-color: var(--border);
}

body.settings-layout::-webkit-scrollbar-track,
html:has(body.settings-layout)::-webkit-scrollbar-track {
  background-color: transparent;
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
}

@media (max-width: 820px) {
  ._vhAppFullPageModal.modal-md, ._vhAppFullPageModal.modal-lg, ._vhAppFullPageModal.modal-xl {
    width: 90%;
    max-width: 90%;
    min-width: 90%;
  }
}
@media (max-width: 600px) {
  ._vhAppFullPageModal.modal-sm, ._vhAppFullPageModal.modal-md, ._vhAppFullPageModal.modal-lg, ._vhAppFullPageModal.modal-xl {
    width: 90%;
  }
}
@media (min-width: 620px) {
  ._vhAppFullPageModal .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }
  ._vhAppFullPageModal.modal-sm {
    max-width: 600px;
  }
}
.vhc-superframe-header {
  display: block;
  background-color: #000;
  color: var(--white);
  font-size: 12px;
  padding: 4px 0px 4px 10px;
  height: 26px;
  margin-bottom: 0px;
  cursor: move;
}

._app-modal-fade-option {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999999;
  background-color: #000;
  opacity: 0.5;
}

._vhAppFullPageModal.fade-body-option {
  max-height: 60px;
  min-height: 60px;
}

/* CUSTOM VH MODAL END */
.form-wrap.form-builder .form-elements .form-group.field-options label {
  position: relative !important;
  margin-bottom: 1rem !important;
  max-width: 672px;
}
.form-wrap.form-builder .form-elements .form-group.field-options input[type=text] {
  width: 100% !important;
}

.form-wrap.form-builder .frmb .sortable-options-wrap {
  display: block !important;
  width: 96% !important;
}

.form-wrap.form-builder .frmb .sortable-options > li .remove {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-wrap.form-builder .btn.icon-cancel {
  padding: 2px !important;
  height: auto !important;
}

.form-wrap.form-builder .frmb .sortable-options > li {
  display: flex;
  padding-right: 30px !important;
}

.ml-32 {
  margin-left: 32px;
}

.laguna-box {
  margin-left: 32px !important;
}

.btn-developer-mode {
  width: 60px;
  font-size: 12px;
  font-weight: bold;
  padding: 0px !important;
  color: white !important;
}

.project-dropdown-menu-list a:hover {
  text-decoration: none;
}

.proxy-user-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 30px;
  color: grey;
  opacity: 0.8;
  text-align: center;
}

#account.active .rounded-circle,
#account:hover .rounded-circle {
  border: 2px solid var(--accent-shade);
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  -webkit-border-radius: 50%;



  -moz-border-radius: 50%;



  border-radius: 50%;
  height: 36px;
  width: 36px;
  margin: 0;
}

.tab-active a {
  background: #E7F8F6;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  -webkit-border-radius: 3px;



  -moz-border-radius: 3px;



  border-radius: 3px;
  /* padding: 0px 14px!important; */
}

.copy-write-text {
  position: absolute;
  height: 18px;
  width: 100%;
  left: 0;
  bottom: 0px;
  font-size: 13px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 18px;
  /* 138.462% */
}

ul.sidebar-submenu > li > ul > li.active,
ul.sidebar-submenu > li > ul > li:hover {
  background: transparent !important;
}

.blockOverlay {
  z-index: 9999999 !important;
}

.blockMsg {
  z-index: 99999999 !important;
}

@media print {
  .noprint {
    visibility: hidden;
  }
  * {
    overflow: visible !important;
  }
  .page {
    page-break-after: always;
  }
}
.sidebar-menutoggler.toggler-sub-menu .fa-chevron-right:before {
  content: "\f053" !important;
}

.grid-stack-item-content h2 img {
  cursor: auto;
  height: 24px;
  width: 24px;
}
.grid-stack-item-content h2 span {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-700);
}

.btn-project-name {
  margin: 14px 9px;
  padding: 4px 16px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 20px;
  color: var(--gray-400);
  font-feature-settings: "liga" off, "clig" off;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  -webkit-border-radius: 6px;



  -moz-border-radius: 6px;



  border-radius: 6px;
}
.btn-project-name.active {
  background-color: var(--gray-50);
}
.btn-project-name.dropdown-toggle::after {
  display: none;
}

.project-name-container {
  padding: 14px 8px;
}
.project-name-container.show .btn-project-dropdown, .project-name-container.show .btn-project-dropdown:hover {
  color: var(--gray-700) !important;
  background-color: var(--border) !important;
  border-color: var(--border) !important;
}
.project-name-container.show .vh-project-dropdown-menu::after {
  display: none !important;
}

.project-name-container .dropdown-menu {
  width: 230px;
  padding: 8px;
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  -webkit-border-radius: 10px;



  -moz-border-radius: 10px;



  border-radius: 10px;
  background-color: var(--white);
  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);

  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);

  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);


  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);


  -webkit-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);



  -moz-box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);



  box-shadow: 1px 2px 16px 0px rgba(11, 26, 31, 0.15);
  border: 0;
}

.project-name-container .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 7px 8px;
  height: 34px;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  -webkit-border-radius: 6px;



  -moz-border-radius: 6px;



  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  color: var(--gray-900);
}

.project-name-container .dropdown-menu .dropdown-item img {
  width: 18px;
  height: 18px;
  margin-right: 12px;
}

.project-name-container .dropdown-menu li div {
  color: var(--gray-900);
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.project-name-container .dropdown-menu li div p {
  color: var(--gray-400);
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.project-logo {
  width: 24px !important;
  height: 24px;
  margin-right: 8px;
}

.project-logo-lg {
  width: 32px;
  height: 32px;
  margin-right: 14px;
}

.dropdown-divider {
  height: 1px;
  background-color: var(--gray-50);
  margin: 8.5px 0;
}

/* The panel remains anchored while the page and its menu scroll independently. */
.settings-sidebar {
  position: fixed;
  top: 0;
  width: 256px;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;


  -moz-box-sizing: border-box;


  box-sizing: border-box;
  overscroll-behavior-y: contain;
  padding: 16px 8px;
  /* Hairline separating the settings sidebar from the page, matching the
     main nav's submenu panel exactly -- that panel is drawn by
     `body:not(.axis-site) .sidebar-submenus` (theme/sunshine/components/
     sidebar.css) as `1px solid var(--sidebar-border)` on both its left and
     right edges, and nothing else contributes: measured on
     /account/data-items, #main-wrapper immediately to its right has
     border-left-width 0. This rule was 1px solid var(--border) instead.
     Same width, different token, and the difference is what made the
     settings sidebar look like it had no divider at all: --border resolves
     to --gray-50 (lch(93 2.45 228.4)) -- one step off the sidebar's own
     --gray-25 background on one side and near-white on the other, so it
     effectively disappeared, while --sidebar-border resolves to --gray-200
     (lch(79 5.74 228.4)) and reads as an actual line. --sidebar-border is
     also the semantically right token here (it is what #sidebar itself uses,
     left-sidebar.css) rather than the generic surface-outline token. */
  border-right: 1px solid var(--sidebar-border);
  background: var(--gray-25);
  z-index: 99;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Dark mode: --gray-25 is a primitive that doesn't flip with theme (this
   whole layout had no dark mode wiring until web/layouts/settings.blade.php
   got the theme bootstrap -- see that file's docblock), so turning dark
   mode on left the sidebar stuck light against a now-dark #main-wrapper
   (body.settings-layout #main-wrapper/.main-content use var(--card),
   further down this file). var(--sidebar) is the semantic surface token
   already used by this file's other .settings-sidebar dark-mode rules
   (menu-item hover/active use var(--sidebar-accent) a few rules down) --
   same family, not a new one. */
/* Root rubber-band (Safari/macOS) shifts fixed elements and exposes the html canvas.
   Paint the canvas under the sidebar the sidebar's own grey so no white stripe shows
   above or below it; the rest of the canvas keeps the page colour. */
html:has(body.settings-layout) {
  background: linear-gradient(to right, var(--gray-25) 0 256px, var(--card) 256px);
}
html:has(body.settings-layout.dark) {
  background: linear-gradient(to right, var(--sidebar) 0 256px, var(--card) 256px);
}
/* The body's bg-white utility paints over the canvas inside the viewport, which is what
   shows behind the sidebar when Chrome bounces it. Paint the same column on the body. */
body.settings-layout.bg-white {
  background: linear-gradient(to right, var(--gray-25) 0 256px, var(--card) 256px) !important;
}
body.settings-layout.bg-white.dark {
  background: linear-gradient(to right, var(--sidebar) 0 256px, var(--card) 256px) !important;
}
body.dark .settings-sidebar {
  background: var(--sidebar);
}

/* Custom overlay scroll-thumb for the now-internally-scrolling sidebar
   above (`overflow-y: auto` added to the base rule). The scroll bar
   should only appear when scrolling and then fade away. Explicitly:
   don't lean on the OS's native overlay-scrollbar setting (Show scroll
   bars: When scrolling / Always) -- it'll look wrong for anyone set to
   Always.

   Attempt 1 styled the real `::-webkit-scrollbar` via a JS-toggled class
   (:hover can't express "after scrolling stops"). Measured in-browser that
   this container's Chromium renders an OS-level overlay scrollbar that
   ignores `::-webkit-scrollbar` customization entirely (offsetWidth minus
   clientWidth stayed pinned at 1px whether or not the class was applied)
   -- exactly the "depends on a per-user system setting" failure.

   Attempt 2 hid the native scrollbar unconditionally and
   drew a custom `position: absolute` thumb as a CHILD of .settings-sidebar
   -- which needed `position: relative` added to .settings-sidebar itself
   as an anchor. That relative-positioning rule collided with sidebar.css's
   off-canvas `position: fixed` below 992px (custom.css loads after
   sidebar.css, so at equal specificity the unconditional rule won even
   below that breakpoint) and measurably broke the closed panel: a fresh
   375px load showed document.body.scrollWidth/clientWidth at 392/375 (17px
   of horizontal overflow) with .settings-sidebar's own bounding rect
   collapsed to 17px wide. Scoping the relative-positioning rule to
   `@media (min-width: 993px)` fixed that specific bug -- but the deeper
   problem was that an absolutely-positioned DESCENDANT of a
   scrolling container scrolls WITH that container's content; the JS `top`
   was adding a second offset on top of a box that was already
   scroll-translated. Measured before fixing: at 50% scroll the thumb's
   actual position was 202.65px off from where it should have been, and at
   100% scroll 405.01px off -- drift ≈ -scrollTop at both points, i.e.
   double-counted movement, not a formula bug.

   Attempt 3 (here): `position: fixed`, not `absolute` or `relative`.
   Fixed positioning is always relative to the viewport and escapes every
   scrolling ancestor regardless of DOM nesting, so it can't inherit
   .settings-sidebar's own scroll no matter where in the document it lives.
   settings.blade.php appends this element to <body> (a sibling of
   .settings-sidebar, not a child) and sets its `top`/`left` directly from
   .settings-sidebar's own getBoundingClientRect() each time it's laid
   out -- no positioned-ancestor rule needed on .settings-sidebar at all
   any more, so the whole amendment-4-era relative-positioning rule (and
   its 992px collision) is gone, not just fixed.

   Zero permanently-reserved gutter, by construction: fixed positioning
   takes the thumb out of flow entirely on both axes, so it can never
   shift any .menu-item's layout regardless of state. `left` is computed
   to sit its right edge 1px inside .settings-sidebar's own right edge,
   keeping the full width inside the existing 8px right inset from
   .settings-sidebar's `padding: 16px 8px` -- padding space no .menu-item
   content ever reaches (menu rows are sized to the *content* box, not
   into the padding).

   Sizing ("a little too thin and a little too tall"):
   width 4px -> 6px, rounded (var(--radius-full)). Height started as
   `Math.max(24, natural)` with no ceiling -- on this sidebar's actual
   content that produced a ~621px thumb on a 900px track (natural ratio
   ~0.69), which read as "the whole sidebar, minus a sliver" rather than a
   scrollbar, so a 25%-of-track cap was added on top of the 24px floor.

   The cap made the thumb "too short" and
   travels "way too fast" -- travel distance is (trackHeight -
   thumbHeight), so capping the height short necessarily lengthens the
   travel for the same scroll delta; the two complaints share one cause.
   The original "too tall" read was also made against a thumb that was
   simultaneously double-counting scroll (the position:absolute bug fixed
   above), so it isn't reliable evidence against proportional sizing on
   its own. Cap removed; height is `Math.max(24, natural)` again, applied
   in settings.blade.php's layoutSidebarScrollThumb() (see the comment
   there for the measured numbers this was decided from).

   Color is var(--gray-250), a direct gray-scale step, not the semantic
   var(--border) token this file otherwise reaches for by habit.
   var(--border) resolves to
   var(--gray-100) (#D9E1E4) -- literally the hairline-border color, which
   at 4-6px wide on a white sidebar reads as almost nothing. It's also the
   wrong *kind* of token here regardless of shade: var(--border) means "
   this is a border," and a scrollbar thumb isn't one. var(--gray-250)
   (#ABBAC0, docs/design-system/colors.md) is one step past the immediate
   --gray-200/#BBC7CC if this still needs nudging darker. */
.settings-sidebar {
  scrollbar-width: none;
}
.settings-sidebar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.settings-sidebar-scroll-thumb {
  position: fixed;
  width: 6px;
  -webkit-border-radius: var(--radius-full);

  -moz-border-radius: var(--radius-full);

  -webkit-border-radius: var(--radius-full);


  -moz-border-radius: var(--radius-full);


  border-radius: var(--radius-full);
  background-color: var(--gray-250);
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in-out;

  -moz-transition: opacity 0.15s ease-in-out;

  -ms-transition: opacity 0.15s ease-in-out;

  -webkit-transition: opacity 0.15s ease-in-out;


  -moz-transition: opacity 0.15s ease-in-out;


  -ms-transition: opacity 0.15s ease-in-out;


  transition: opacity 0.15s ease-in-out;
  pointer-events: none;
  z-index: 106;
}
.settings-sidebar-scroll-thumb.is-scrolling {
  opacity: 1;
}
.settings-sidebar .exit-settings {
  color: var(--gray-500);
  font-family: "Open Sans";
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  padding: 5px 8px;
}
.settings-sidebar .exit-settings img {
  margin-right: 4px;
  height: 15px;
  width: 15px;
}
/* Match menu-row edges, accounting for the button's transparent 1px border. */
/* The arrow glyph carries more left bearing than the row icons; pull its ink 1.75px left
   and give the same back on the right so the text does not move. Sized like the row icons. */
.settings-sidebar .back-to-project img {
  width: 16px;
  height: 16px;
  margin-left: -1.75px;
  margin-right: 5.5px; /* 10px of ink between the arrow and the text (arrow ink ends 3.25px inside its box; the B starts 1.25px inside its box) */
}
.settings-sidebar .back-to-project {
  margin-left: 0;
  padding-left: calc(var(--space-4) - var(--border-width-thin)); /* keeps the arrow ink on the row icons' line */
  padding-right: calc(var(--space-4) - var(--border-width-thin)); /* equal to the left */
}
/* Bottom padding stepped down one notch (var(--space-4), 16px ->
   var(--space-3), 12px): less space below the project
   name before the menu sections. Measured (container
   Playwright): 16px padding-bottom on this box, plus the first section
   label's own 16px margin-top immediately below it (see .divider below),
   read together as a 32px gap between the project-name text and
   "PERSONAL". Both halves step down together here and in .divider's
   margin-top, landing on 24px total. Top/left/right left at 16px --
   only the bottom (the side that abuts the menu) changes. */
.settings-sidebar .project-name {
  padding: var(--space-4) var(--space-4) var(--space-3);
  color: var(--gray-800);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
/* Row height. Measured live on Orbit before this change (Playwright,
   getComputedStyle at /account/project-settings): 34px rows at a 35px
   pitch -- the extra 1px is this rule's own `margin: 1px 0`, collapsed
   between neighbours -- reading as slightly too airy. Now 32px / 33px
   pitch. The two numbers below are the only ones that set it; everything
   else here (14px/20px type, the 12px/16px horizontal padding, the 6px
   radius, the 1px margin) is deliberately untouched, and so are the 16px
   icons and the .project-name padding.

   Vertical padding is nominal, not structural: the box is border-box at a
   fixed `height`, and `align-items: center` centres the 20px line inside
   it whatever the padding sums to. It is kept in step with the height
   anyway, holding the original 1px optical bias toward the bottom.

   Stepping one notch further (rendered and reviewed alongside this as
   Option B, 30px rows / 31px pitch) is these two values plus the
   matching one on .settings-sidebar .divider further down:
     height: 30px; padding: 3.5px 12px 4.5px 16px;
   For reference, the main nav's submenu rows are 32px at a 33px pitch --
   the same density this rule now sits at -- so Option B would make the
   settings menu denser than the main nav, not merely match it. */
.settings-sidebar .menu-item {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 4.5px 12px 5.5px 16px;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  -webkit-border-radius: 6px;



  -moz-border-radius: 6px;



  border-radius: 6px;
  color: var(--gray-900);
  font-feature-settings: "liga" off, "clig" off;
  font-family: "Open Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  margin: 1px 0;
}
.settings-sidebar .menu-item img {
  height: 16px;
  width: 16px;
  margin-right: 10px;
}
/* Hover = light grey wash. Placed before the active/pressed rule below so
   that on a tie (hovering the already-selected item) source order gives the
   win to the darker "selected" treatment -- matching the project content
   submenu's ".btn-submenu-action" reference behavior (hovering the active
   item keeps it at the darker shade, it doesn't lighten). */
.settings-sidebar .menu-item:hover {
  background-color: var(--gray-50);
}

/* Selected (.active, set server-side via Request::is()) and pressed
   (:active from mousedown, :focus/:focus-within from a completed click)
   all read as the same darker grey. The :focus/:focus-within pair needs
   !important to beat the global `li a:focus, li a:focus-within { background:
   color-mix(in oklch, var(--primary) 12%, white) !important; }` rule
   (typography/custom.css, line ~543) -- that unscoped rule is what was
   tinting every clicked/focused <a> inside any <li> app-wide with a pale
   wash of --primary ("Kauai Green"), which read as the reported "turns
   green" bug. Fixed here scoped to .settings-sidebar only; the shared
   rule itself is left alone so other nav (e.g. the content submenu, which
   already neutralizes it via its own higher-specificity
   `.btn-submenu-action { background-color: transparent !important; }`
   base rule) is unaffected. */
.settings-sidebar .menu-item.active,
.settings-sidebar .menu-item:active,
.settings-sidebar .menu-item:focus,
.settings-sidebar .menu-item:focus-within {
  background-color: var(--border) !important;
}

/* Dark mode: the resting-state text is var(--gray-900), a primitive that
   doesn't flip with theme -- near-black on what is now a near-black
   sidebar (body.dark .settings-sidebar uses var(--sidebar), further up
   this file), so every unselected menu label was unreadable until this
   layout got dark-mode wiring. var(--sidebar-foreground) is the paired
   semantic token for var(--sidebar) (tokens/semantic.css). */
body.dark .settings-sidebar .menu-item {
  color: var(--sidebar-foreground);
}
/* Icons are flat SVGs with a baked-in fill="#04161B" (gray-950), not
   currentColor, so the text-color fix above doesn't touch them -- same
   invisible-on-dark problem, just needing a filter instead of a color.
   var(--gray-400-filter) is the established fix for exactly this. */
body.dark .settings-sidebar .menu-item img {
  filter: var(--gray-400-filter);
}

/* Dark mode: --gray-50/--border are primitives that don't flip with theme,
   so dark mode needs its own values. Same tokens the content submenu's dark
   override uses for the equivalent states (sidebar.css, body.dark
   .sidebar-submenus .btn-submenu-action rules). */
body.dark .settings-sidebar .menu-item:hover {
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent);
}
body.dark .settings-sidebar .menu-item.active,
body.dark .settings-sidebar .menu-item:active,
body.dark .settings-sidebar .menu-item:focus,
body.dark .settings-sidebar .menu-item:focus-within {
  background-color: var(--sidebar-accent) !important;
}

/* Orbit settings links match the Content panel's .btn-submenu-action
   states (sidebar.css), which are separate from the #sidebar rail palette.
   Exclude the Superuser switch; section labels are not anchors. */
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):hover {
  background-color: var(--gray-50) !important;
  color: var(--gray-925) !important;
}
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser).active,
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):active,
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):focus,
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):focus-within {
  background-color: var(--gray-100) !important;
  color: var(--gray-925) !important;
}
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):hover img,
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser).active img,
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):active img,
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):focus img,
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):focus-within img {
  filter: var(--gray-950-filter) !important;
}
/* Rest text on the same step as the submenu rows. */
body:not(.axis-site):not(.dark) .settings-sidebar a.menu-item:not(.btn-toggle-superuser) {
  color: var(--gray-925) !important;
}
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):hover {
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
  color: var(--sidebar-foreground) !important;
}
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):hover img {
  filter: var(--gray-50-filter) !important;
}
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser).active,
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):active,
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):focus,
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):focus-within {
  background-color: var(--sidebar-accent) !important;
  color: var(--sidebar-accent-foreground) !important;
}
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser).active img,
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):active img,
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):focus img,
body.dark:not(.axis-site) .settings-sidebar a.menu-item:not(.btn-toggle-superuser):focus-within img {
  filter: var(--white-filter) !important;
}

/* Section labels ("DEVELOPMENT", "OLD TO SORT") used to have a border-top
   doing the section-break work visually; that's gone now, so the vertical
   gap has to do it instead. Asymmetric on purpose -- generous space above
   (separates from the previous section, standing in for the old divider
   line) and only a little below (keeps the label reading as part of the
   group beneath it, not floating between the two). Both the LI wrapper and
   the .menu-item base rule normally carry their own 1px top/bottom margin
   (see .settings-sidebar .menu-item above) -- zero the inner one out below
   so only this rule controls the gap, not two sources fighting.

   Stepped down from var(--space-6) (24px) to var(--space-5) (20px)
   -- a correction, not a reversal back to the old cramped state.

   Sidebar-restructure brief: "reduce the space below them a little as
   well as the space above them a bit too" -- a small tightening, not a
   collapse. Measured computed margin before that change (container
   Playwright, .settings-sidebar .divider): 20px top / 4px bottom. One
   more step down each side of the spacing scale -- top var(--space-5,
   20px) -> var(--space-4, 16px), bottom var(--space-1, 4px) ->
   var(--space-0-5, 2px) -- keeps top clearly larger than bottom so the
   label still reads as grouped downward, not floating between
   sections.

   One more notch down on the top only:
   var(--space-4, 16px) -> var(--space-3, 12px). Bottom (2px) is already
   effectively minimal and left alone. This margin-top applies to every
   .divider including the first ("Personal", right under .project-name),
   so it tightens both the project-name-to-first-label gap and every
   section-to-section gap from the same rule. Top (12px) stays clearly
   larger than bottom (2px) -- a 6:1 ratio -- so each label still groups
   downward into its own section.

   Stepped down one more token with the 34px -> 32px row-height change
   above (var(--space-3), 12px -> var(--space-2-5), 10px) so the section
   gaps tighten in proportion with the rows rather than leaving the labels
   floating in the old spacing. Bottom stays var(--space-0-5) (2px), already
   minimal. The Option B step described on .settings-sidebar .menu-item
   pairs with var(--space-2) (8px) here. */
.settings-sidebar .divider {
  margin: var(--space-2-5) -8px var(--space-0-5);
}
.settings-sidebar .divider .menu-item {
  margin: 0;
  padding-left: 24px;
  color: var(--gray-400);
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}
/* Section-header rows ("DEVELOPMENT", "OLD TO SORT") are non-interactive
   labels (href="#") -- keep them inert across every state, not just hover,
   now that :active/:focus above give real nav items a background. */
.settings-sidebar .divider .menu-item:hover,
.settings-sidebar .divider .menu-item:active,
.settings-sidebar .divider .menu-item:focus,
.settings-sidebar .divider .menu-item:focus-within {
  background-color: inherit !important;
}

/* A second, separate button system in public/css/components.css (no
   matching source found under resources/ -- likely its own build, not
   css-compiler.js) defines ".btn.btn-secondary" with an unguarded solid
   var(--gray-25) rest-state background (no :not(.btn-outline):not(.btn-clear)
   guard, unlike that same rule's own hover/focus/active states, which do
   have the guard). At 2-class specificity it beat .btn-clear's transparent
   rest state here, painting the ghost button solid grey at rest instead of
   only on hover. Force transparent back at rest; hover/active below still
   provide the intended grey wash. */
/* The gray color of the arrow and text in the Back to Project button is
   lighter so it's not so prominent. It's a secondary navigational
   affordance, not a call to action, so it should recede rather than read at
   the same weight as active nav items. Step one grey lighter than the
   inherited base (.btn's base rule sets color: var(--gray-700), no
   !important -- see buttons.css) -- gray-700 -> gray-600 on the documented
   scale (colors.md). The narrow top-bar instance below gets the same
   gray-600 step for the same reason, keeping both instances at matching
   relative weight; see the comment there for why they land on the same
   token instead of different ones. */
body.settings-layout .settings-sidebar .back-to-project {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--gray-600) !important;
}

/* Ghost + Secondary has no hover/active background anywhere in
   buttons.css -- .btn-clear only special-cases .btn-primary/.btn-accent
   for background, and .btn-secondary's own hover/active rules explicitly
   guard with :not(.btn-clear), so .btn-clear.btn-secondary silently stayed
   fully transparent on hover. Same grey wash used for neutral hover/active
   elsewhere on this page (.settings-sidebar .menu-item, above). */
body.settings-layout .settings-sidebar .back-to-project:hover:not(.disabled),
body.settings-layout .settings-sidebar .back-to-project.hover:not(.disabled),
body.settings-layout .settings-sidebar .back-to-project:focus:not(.disabled),
body.settings-layout .settings-sidebar .back-to-project:focus-within:not(.disabled) {
  background-color: var(--gray-50) !important;
  border-color: transparent !important;
}

body.settings-layout .settings-sidebar .back-to-project:active:not(.disabled),
body.settings-layout .settings-sidebar .back-to-project.active:not(.disabled) {
  background-color: var(--border) !important;
  border-color: transparent !important;
}

body.dark.settings-layout .settings-sidebar .back-to-project:hover:not(.disabled),
body.dark.settings-layout .settings-sidebar .back-to-project.hover:not(.disabled),
body.dark.settings-layout .settings-sidebar .back-to-project:focus:not(.disabled),
body.dark.settings-layout .settings-sidebar .back-to-project:focus-within:not(.disabled) {
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
}

body.dark.settings-layout .settings-sidebar .back-to-project:active:not(.disabled),
body.dark.settings-layout .settings-sidebar .back-to-project.active:not(.disabled) {
  background-color: var(--sidebar-accent) !important;
}

/* Item 1 -- arrow colour must match the button's text colour exactly.
   buttons.md's pairing pattern (.icon-left on the button + a matching
   .vh-icon-* class on the <img>) is already followed here -- the <img>
   carries .vh-icon-gray700, the documented choice for a Secondary/neutral
   surface. But buttons.css's `.btn-clear.btn-secondary img { filter: ...
   !important }` rule (2 classes + !important, buttons.css) silently beats
   .vh-icon-gray700's own filter (1 class, no !important, colors.css) on
   specificity alone -- a different, unrelated filter chain wins, so the
   arrow rendered a muted teal-grey instead of gray-700. This is exactly
   the documented-but-not-implemented trap: the class is present and
   "correct" per the docs, but a higher-specificity rule elsewhere silently
   overrides it. Verified via computed styles: the link's
   text color resolved to lch(31 8.57685 228.4) (~#374B53, --gray-700)
   while the arrow's filter resolved to the buttons.css chain (invert(59%)
   sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%)
   contrast(88%)), not --gray-700-filter (invert(16%) sepia(14%)
   saturate(1552%) hue-rotate(152deg) brightness(85%) contrast(85%)).
   Force the correct token-based filter back here, at higher specificity
   than the buttons.css rule it's fixing.

   Stepped to gray-600 (from gray-700) alongside the text-color change
   above, so the arrow keeps matching the button's text colour exactly
   after the lightening pass. */
body.settings-layout .settings-sidebar .back-to-project img {
  filter: var(--gray-600-filter) !important;
}

/* Settings Sidebar - responsive off-canvas top bar. Below Bootstrap 4's
   `lg` breakpoint (max-width: 992px -- the same value sidebar.css already
   uses to take .settings-sidebar out of flow / reveal
   .settings-sidebar-menutoggler) the hamburger and "Back to project"
   (item 11) share a fixed top bar, .settings-narrow-topbar, added as a
   wrapper in web.layouts.settings around both controls. The bar used to
   BE the toggler element itself (before item 11); it's now a wrapper so a
   second control can sit next to the hamburger in the same row. Kept
   deliberately minimal per the original design direction -- icon flush
   left, no chevron. custom.css imports after sidebar.css in main.css so
   this wins the cascade tie; the body.settings-layout prefix adds a
   specificity margin on top of that. */
/* Hidden by default (desktop) -- only becomes a fixed row at/below the
   992px breakpoint, in the @media block right below. Without this, the
   wrapper (a plain block div with two default-styled <a> children and no
   positioning outside that media query) would render inline at the very
   top of <body>, above the sidebar, on every viewport. */
.settings-narrow-topbar {
  display: none;
}

@media (max-width: 992px) {
  body.settings-layout .settings-narrow-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    padding: 0 16px;
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    /* Above both the sidebar panel and its backdrop (z-indexes below) so
       the bar -- and its close affordance, the hamburger -- always stays
       reachable regardless of open/closed state. */
    z-index: 112;
  }

  /* The toggler now lives inside .settings-narrow-topbar as a plain icon
     button instead of being the fixed bar itself -- undo sidebar.css's
     small floating-square treatment (30x30, fixed, left:0, top:20%) down
     to a normal inline flex child sized by its parent row. */
  body.settings-layout .settings-sidebar-menutoggler {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    padding: 4px;
    background-color: transparent;
    border: none;
    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;


    -moz-border-radius: 4px;


    border-radius: 4px;
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;


    -moz-box-shadow: none;


    box-shadow: none;
  }

  body.settings-layout .settings-sidebar-menutoggler img {
    width: 18px;
    height: 18px;
  }

  /* Item 11 -- "Back to project" moves into the top bar at narrow widths,
     next to the hamburger. Decision: show it ONLY here below the
     breakpoint, not also inside the off-canvas panel -- the panel's own
     .back-to-project (further up this file) is hidden in this same media
     query, so there's exactly one reachable instance instead of two nav
     targets doing the same thing (one of which would otherwise require
     opening the menu first to reach, making the top-bar copy redundant
     rather than a real improvement).

     The back to project button text is stepped lighter. This bar sits on
     the page's white top-bar surface (--card), not the sidebar's grey, so
     the original gray-700 text/arrow read as too heavy here. Stepped one
     documented step lighter to gray-600 (colors.md) -- the same token the
     in-panel instance above also lands on after its own lightening pass,
     so both "Back to project" instances read at the same relative weight
     rather than two different-looking buttons. gray-600 (#4E636B) still
     holds ~6.3:1 contrast against the white/gray-25 surfaces here, well
     past the 4.5:1 text floor, so there's room in this step without
     failing contrast.

     Ghost treatment: this should "appear as a ghost
     button on white" -- the bar sits on --card (white), and a filled
     gray-25 pill at rest read as a solid button rather than the
     documented Ghost style (buttons.md: .btn-clear, "No border, no
     fill"). Considered swapping this <a> to the real .btn.btn-clear
     .btn-secondary classes used by the in-panel instance above (line
     ~242), but rejected: (1) common.css's `a.btn, button.btn {
     display: inline-flex; }` has already collided with this
     bar's layout once before (see the note just below, on
     the in-panel hide rule) and adding .btn here risks the same fight;
     (2) .btn-clear.btn-secondary has no hover/active/focus rule
     anywhere in shipped CSS (buttons.css only styles its icon color,
     not its background) -- that gap would have to be patched locally
     either way. Kept this bespoke class instead and made only the rest
     state match Ghost: background dropped to transparent, no fill on
     white. The gray-50 hover/focus surface directly below already
     supplies the "subtle surface on hover/focus" Ghost calls for, using
     the same token as before -- no separate patch needed for that half. */
  body.settings-layout .settings-narrow-back-to-project {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    color: var(--gray-600);
    background-color: transparent;
    font-family: "Open Sans";
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    padding: 5px 8px;
    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;


    -moz-border-radius: 6px;


    border-radius: 6px;
  }

  body.settings-layout .settings-narrow-back-to-project img {
    width: 14px;
    height: 14px;
    /* Same underlying fix as item 1 (the in-panel arrow, above): pin the
       token-based filter directly rather than trust .vh-icon-* alone. This
       link isn't a .btn, so it isn't hit by the specific buttons.css rule
       that broke the panel's arrow, but setting it explicitly here keeps
       both "Back to project" instances visually identical on purpose, not
       by accident of two different code paths happening to agree.
       Stepped to gray-600-filter alongside the text-color change above. */
    filter: var(--gray-600-filter);
  }

  body.settings-layout .settings-narrow-back-to-project:hover,
  body.settings-layout .settings-narrow-back-to-project:focus,
  body.settings-layout .settings-narrow-back-to-project:focus-within {
    background-color: var(--gray-50);
  }

  /* Hide the in-panel "Back to project" below the breakpoint now that the
     top bar carries it -- see the "single instance" decision above.
     No !important needed: common.css's `.btn { display: inline-flex }`
     no longer carries !important, so this selector's higher specificity
     (3 classes vs. 1 class + 1 tag) wins on its own. */
  body.settings-layout .settings-sidebar .back-to-project {
    display: none;
  }

  /* Push page content below the new top bar. */
  body.settings-layout #main-wrapper {
    padding-top: 44px;
  }

  body.settings-layout .settings-sidebar {
    /* sidebar.css's off-canvas rule sets top: 0 / height: 100%, which
       would sit the sidebar's first item directly underneath the 44px top
       bar above -- hidden behind it while "open". Start the panel below
       the bar instead so the bar (hamburger + Back to project) stays
       visible/clickable and nothing in the sidebar is obscured. */
    top: 44px;
    height: calc(100% - 44px);
    /* Item 9 (grey sliver): custom.css's own unconditional
       `.settings-sidebar { width: 256px }` rule above (no media guard)
       beats sidebar.css's narrow-width `width: 250px` on a cascade tie
       (custom.css loads after sidebar.css, same 1-class specificity), so
       the panel was 6px wider than the -250px closed offset that's meant
       to hide it -- a permanent 6px sliver on screen when "closed".
       Measured: closed bounding box was {x: -250, width: 256}. Pin the
       width back to match sidebar.css's own off-canvas math, at the
       higher specificity this selector already carries. */
    width: 250px;
    /* Item 10 (stacking): same tie-breaking bug -- the unconditional
       `.settings-sidebar { z-index: 99 }` rule above beat sidebar.css's
       narrow-width `z-index: 110`, putting the open panel BELOW its own
       backdrop (.settings-sidebar-toggle-overlay, z-index: 100). Measured:
       open sidebar z-index was 99 vs. the overlay's 100. Sit above the
       overlay but below the top bar (112) so the bar stays clickable as
       the close affordance while the panel is open. */
    z-index: 105;
    /* Item 2 -- excessive space above "Test Project Alpha" once the panel
       sits below the fixed 44px top bar. Below this breakpoint the panel's
       first visible child is .project-name (the in-panel "Back to
       project" link right above it is display:none in this same media
       query, see the rule further up), so the gap the user sees is this
       padding-top plus .project-name's own 16px padding-top -- unrelated
       to the 44px top-bar offset already accounted for by `top: 44px`
       above. Measured 16px (this rule's unmodified padding-top, inherited
       from the unconditional `.settings-sidebar { padding: 16px 8px }`
       rule) stacked with .project-name's 16px reads as a 32px gap right
       under a bar the user just tapped through -- doubled padding, not a
       deliberate offset. Halved to 8px, the same halving move already
       used for item 12's page-title spacing below, landing on a 24px
       total gap that still gives the heading room to breathe without
       reading as dead space. Left/right/bottom padding (8px / 16px)
       untouched -- only the top inset changes. */
    padding-top: 8px;
  }
}

/* Item 12 -- page title top spacing, narrow only. The generous space
   above the page title comes from .general-settings-page's own
   `padding: var(--space-20) ...` (project-settings.blade.php's page-css --
   NOT settings-page-header.blade.php, which carries no top spacing of its
   own; measured computed padding-top was 80px = var(--space-20) at both
   1440px and 375px). Halve it below the sidebar's
   off-canvas breakpoint only -- var(--space-10) is the exact token-scale
   half of var(--space-20) (40px vs. 80px), not an approximation. Desktop
   is untouched: nothing outside this media query changes padding-top, so
   .general-settings-page's own unconditional rule still wins above 992px.
   Overridden here (custom.css, an owned file) rather than in
   project-settings.blade.php (not owned) via the same higher-specificity
   pattern already used for the sidebar width/z-index fixes above --
   body.settings-layout .general-settings-page (2 classes) beats the
   page's own .general-settings-page (1 class) regardless of the page
   style loading later in the document. */
@media (max-width: 992px) {
  body.settings-layout .general-settings-page {
    padding-top: var(--space-10);
  }
}

/* Items 3 & 4 -- the settings sidebar's dimming backdrop. sidebar.css's
   base rule (.settings-sidebar-toggle-overlay) toggles visibility with
   plain display:none/block via JS adding/removing the .on class -- display
   can't be transitioned, so the dim appeared abruptly instead of fading,
   and it used a hand-rolled rgba(0,0,0,0.5) instead of a design-system
   token. Overridden here at a higher specificity (body.settings-layout
   prefix, same pattern as every other override in this file) so custom.css
   -- which loads after sidebar.css -- wins the cascade.

   Colour: uses the --overlay token. --overlay exists
   (tokens/semantic.css: `oklch(from var(--gray-950) l c h / 0.70)`,
   documented in colors.md's Surface table as "gray-950 / 70% -- Modal
   overlays and scrims") and is already used elsewhere in this file (see
   the other `background-color: var(--overlay)` rules above) -- this is
   exactly that use case, just not wired up yet for this backdrop.

   Fade: swapped display:none/block for opacity + pointer-events
   so opacity can transition. pointer-events keeps the backdrop
   non-interactive (and unclickable) while hidden, so leaving it
   permanently in the layout (rather than display:none) doesn't trap clicks
   or tab stops -- it has no text content and isn't a tab stop either way.
   Duration/easing pulled from foundation.md's documented scale rather than
   invented: --duration-slow (300ms) is the row foundation.md labels
   "Panels, drawers, modals" -- this backdrop accompanies exactly that (the
   off-canvas settings panel), and --ease-out ("Entrances -- starts fast,
   decelerates") is the documented curve for something appearing. Kept to
   a single quick fade rather than separate enter/exit timings -- this is a
   UI affordance, not an animation showcase. */
body.settings-layout .settings-sidebar-toggle-overlay {
  display: block;
  background-color: var(--overlay);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity var(--duration-slow) var(--ease-out);

  -moz-transition: opacity var(--duration-slow) var(--ease-out);

  -ms-transition: opacity var(--duration-slow) var(--ease-out);

  -webkit-transition: opacity var(--duration-slow) var(--ease-out);


  -moz-transition: opacity var(--duration-slow) var(--ease-out);


  -ms-transition: opacity var(--duration-slow) var(--ease-out);


  transition: opacity var(--duration-slow) var(--ease-out);
}

body.settings-layout .settings-sidebar-toggle-overlay.on {
  opacity: 1;
  pointer-events: auto;
}

/* Root cause of the settings-page left/right gutter asymmetry.
   #main-wrapper (web.layouts.
   settings) shares its `.main-wrapper` class with the generic dashboard
   shell, where three separate stylesheets we do not own each nudge
   `.main-wrapper` to compensate for the OTHER sidebar (`.sidebar`, 248px,
   see components/sidebar.css) going off-canvas -- none of them pair a
   matching right-side value, and all three leak into the settings layout
   as a side effect of the shared class name:
     - components/sidebar.css: `.main-wrapper { padding-left: 30px
       !important }` at max-width:992px (this file, compiled into
       app-base.css).
     - public/css/app-in-dev.css: `.main-wrapper { padding-left: 0;
       padding-right: 0 !important }` at max-width:768px.
     - public/css/components.css: `.main-wrapper { margin-left: 15px
       !important }` at max-width:768px -- left only, no margin-right.
   Measured effective gutter on #main-wrapper's own box absent this rule:
   +30px left / +0px right at 991px, +15px left / +0px right at 768px --
   stacking on top of .vh-settings-page's own (symmetric) padding inside
   it, which is what actually produced the reported left > right
   imbalance. This is not a cosmetic counter-offset: it neutralizes the
   leaked box-model properties at their source element so
   .vh-settings-page's own padding (settings-page-wrapper.blade.php) is
   the ONLY thing contributing horizontal spacing in this layout, at every
   width. `body.settings-layout #main-wrapper` (id + class) outranks the
   bare `.main-wrapper` (single class) the leaking rules use, so this wins
   regardless of !important or stylesheet load order on either side. */
body.settings-layout #main-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.fixed-bottom-nav-ul a {
  -webkit-border-radius: 8px !important;

  -moz-border-radius: 8px !important;

  -webkit-border-radius: 8px !important;


  -moz-border-radius: 8px !important;


  -webkit-border-radius: 8px !important;



  -moz-border-radius: 8px !important;



  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}
.fixed-bottom-nav-ul a.fixed-bottom-nav-ul:hover {
  background-color: color-mix(in oklch, var(--dev) 5%, transparent) !important;
}
.fixed-bottom-nav-ul a.fixed-bottom-nav-ul.active {
  background-color: color-mix(in oklch, var(--dev) 10%, transparent) !important;
}
.fixed-bottom-nav-ul .text-secondary {
  -webkit-border-radius: 8px !important;

  -moz-border-radius: 8px !important;

  -webkit-border-radius: 8px !important;


  -moz-border-radius: 8px !important;


  -webkit-border-radius: 8px !important;



  -moz-border-radius: 8px !important;



  border-radius: 8px !important;
}
.fixed-bottom-nav-ul .text-secondary:hover {
  background-color: color-mix(in oklch, var(--dev) 5%, transparent) !important;
}
.fixed-bottom-nav-ul .text-secondary.active {
  background-color: color-mix(in oklch, var(--dev) 10%, transparent) !important;
}
.fixed-bottom-nav-ul .text-secondary.dev-mode, .fixed-bottom-nav-ul .text-secondary.dev-mode:hover {
  color: var(--dev) !important;
}
.fixed-bottom-nav-ul .clr-coral {
  -webkit-border-radius: 8px !important;

  -moz-border-radius: 8px !important;

  -webkit-border-radius: 8px !important;


  -moz-border-radius: 8px !important;


  -webkit-border-radius: 8px !important;



  -moz-border-radius: 8px !important;



  border-radius: 8px !important;
}
.fixed-bottom-nav-ul .clr-coral:hover {
  background-color: color-mix(in oklch, var(--warning) 5%, transparent) !important;
}
.fixed-bottom-nav-ul .clr-coral.active {
  background-color: color-mix(in oklch, var(--warning) 10%, transparent) !important;
}
.fixed-bottom-nav-ul .clr-coral.sys-mode, .fixed-bottom-nav-ul .clr-coral.sys-mode:hover {
  color: var(--warning) !important;
}
.fixed-bottom-nav-ul .vh-icon-coral, .fixed-bottom-nav-ul .vh-icon-coral-hover, .fixed-bottom-nav-ul .vh-icon-coral:hover, .fixed-bottom-nav-ul .vh-icon-coral-hover:hover {
  filter: brightness(0) saturate(100%) invert(80%) sepia(29%) saturate(3466%) hue-rotate(318deg) brightness(99%) contrast(109%) !important;
}

.popover.popover-menu .clickable-row {
  /* Vertical padding here, horizontal on the children below, so the hover
     background spans the full row while content stays inset. Net geometry
     matches the Blade renderer's 7px 8px. Was `padding: 0` and tied with a
     `7px 8px` rule in js/components/Styles/dataTableStyles.css at identical
     specificity — which of the two won was decided by CSS load order. */
  padding: 7px 0 !important;
}
.popover.popover-menu .clickable-row > :first-child {
  padding-left: 8px !important;
}
.popover.popover-menu .clickable-row > :last-child {
  padding-right: 8px !important;
}
.popover.popover-menu .clickable-row:hover {
  background-color: var(--muted) !important;
}
.popover.popover-menu .clickable-row button {
  margin: 0 2px !important;
}
/* The row's own link is a <button> in the React renderer and an <a> in Blade.
   The 2px margin above is for trailing action buttons; applied to the main
   link it pushed React's label 4px right of Blade's. Land both on 16px. */
.popover.popover-menu .clickable-row > button:first-child {
  margin: 0 !important;
  padding-left: 8px;
  padding-right: 8px;
  border: 0;
}

.sidebar-submenu li a.btn-submenu-action {
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  -webkit-border-radius: 6px;



  -moz-border-radius: 6px;



  border-radius: 6px;
}
.sidebar-submenu li a.btn-submenu-action:hover {
  background-color: var(--gray-50) !important;
}
.sidebar-submenu li a.btn-submenu-action.active {
  background-color: var(--border) !important;
}

.navbar.fixed-vahara-nav {
  height: 80px;
  background-color: var(--white);
  /* The account bar carries the subtle line, not the `--gray-200` hairline
     the project and page headers draw: this bar sits over the app shell
     rather than over a page's content, and the darker stroke reads as a
     divider the app does not have. */
  border-bottom: 1px solid var(--border);
}
@media(max-width:460px){
  .navbar.fixed-vahara-nav {
    height: auto;
  }
}
.navbar.fixed-vahara-nav .img-vahara-logo {
  margin-top: 18px;
}
.navbar.fixed-vahara-nav .btn-project {
  padding: 0 16px !important;
  margin-right: 7px;
}

.vh-file-uploader {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23BBC7CCFF' stroke-width='2' stroke-dasharray='3%2c 5' stroke-dashoffset='9' stroke-linecap='square'/%3e%3c/svg%3e");
  -webkit-border-radius: 12px;

  -moz-border-radius: 12px;

  -webkit-border-radius: 12px;


  -moz-border-radius: 12px;


  -webkit-border-radius: 12px;



  -moz-border-radius: 12px;



  border-radius: 12px;
  padding: 2px;
  background-color: var(--gray-25);
  min-height: 56px;
}
.vh-file-uploader.dropzone-wrapper:hover {
  background-color: var(--gray-50) !important;
}
.vh-file-uploader .inputFile {
  background: transparent;
  padding: 0;
}
.vh-file-uploader label, .vh-file-uploader .dropzone-desc {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 0;
  color: var(--gray-500);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0;
}
.vh-file-uploader label:hover, .vh-file-uploader .dropzone-desc:hover {
  text-decoration: underline;
}
.vh-file-uploader input {
  width: 100%;
  outline: none;
  cursor: pointer;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  font-weight: 500;
  font-size: 2rem;
  height: 56px;
  position: absolute;
}
.vh-file-uploader input:not(.dropzone) {
  left: 1000px;
  visibility: hidden;
}
.vh-file-uploader .dropzone-desc {
  -webkit-border-radius: 16px;

  -moz-border-radius: 16px;

  -webkit-border-radius: 16px;


  -moz-border-radius: 16px;


  -webkit-border-radius: 16px;



  -moz-border-radius: 16px;



  border-radius: 16px;
}
.vh-file-uploader .file-upload-input {
  -webkit-border-radius: 16px 0 0 16px;

  -moz-border-radius: 16px 0 0 16px;

  -webkit-border-radius: 16px 0 0 16px;


  -moz-border-radius: 16px 0 0 16px;


  -webkit-border-radius: 16px 0 0 16px;



  -moz-border-radius: 16px 0 0 16px;



  border-radius: 16px 0 0 16px;
}
.vh-file-uploader .file-upload-input label {
  justify-content: end;
  padding-right: 0.5rem;
}
.vh-file-uploader .file-upload-input:after {
  color: var(--gray-500);
  content: " • ";
  border-right: none;
  -webkit-border-radius: 12px 0 0 12px;

  -moz-border-radius: 12px 0 0 12px;

  -webkit-border-radius: 12px 0 0 12px;


  -moz-border-radius: 12px 0 0 12px;


  -webkit-border-radius: 12px 0 0 12px;



  -moz-border-radius: 12px 0 0 12px;



  border-radius: 12px 0 0 12px;
  justify-content: right;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  opacity: 1;
  align-items: center;
  display: flex;
  visibility: visible;
  text-align: center;
  font-size: 14px;
}
.vh-file-uploader .select-from-gallery-input {
  -webkit-border-radius: 0 16px 16px 0;

  -moz-border-radius: 0 16px 16px 0;

  -webkit-border-radius: 0 16px 16px 0;


  -moz-border-radius: 0 16px 16px 0;


  -webkit-border-radius: 0 16px 16px 0;



  -moz-border-radius: 0 16px 16px 0;



  border-radius: 0 16px 16px 0;
}
.vh-file-uploader .select-from-gallery-input label {
  padding-left: 0.25rem;
}

.vh-table {
  border: 0;
  margin: 0;
}
.vh-table:not(.table-responsive) table {
  table-layout: fixed;
}
.vh-table table {
  border-collapse: separate; /* Important to allow border-radius on cells */
  border-spacing: 0;
}
.vh-table table th {
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  color: var(--gray-500);
  border: 0.5px solid var(--gray-50);
  border-top: 1px solid var(--gray-50);
  background: var(--gray-25);
  padding: 7px 8px;
  max-width: 250px;
}
.vh-table table th * {
  max-width: 250px; /* Adjust width as needed */
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box; /* Required for line-clamp */
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  text-align: left;
}
.vh-table table th:first-child {
  border-top-left-radius: 10px;
  border-left: 1px solid var(--gray-50);
}
.vh-table table th:last-child {
  border-top-right-radius: 10px;
  border-right: 1px solid var(--gray-50);
}
.vh-table table td {
  max-width: 250px;
  height: 39px;
  padding: 9px 3px 10px 12px;
  color: var(--gray-900);
  overflow: hidden;
  font-feature-settings: "liga" off, "clig" off;
  text-overflow: ellipsis;
  /* Body-Small */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  border: 0.5px solid var(--gray-50);
}
.vh-table table td:first-child {
  border-left: 1px solid var(--gray-50);
}
.vh-table table td:last-child {
  border-right: 1px solid var(--gray-50);
}
.vh-table table tr:hover {
  background-color: var(--gray-25);
}
.vh-table table tr:last-of-type td {
  border-bottom: 1px solid var(--gray-50);
}

/* Shared Styles for All Code Editors */
.code-editor {
  border: 2px solid #f5a9a9; /* Light red border */
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  -webkit-border-radius: 8px;



  -moz-border-radius: 8px;



  border-radius: 8px; /* Rounded corners */
  background-color: #f9f9f9; /* Light gray background */
  padding: 10px; /* Padding inside the container */
  width: 100%; /* Full width */
  max-width: 600px; /* Optional: limit max width */
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);


  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);


  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);



  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);



  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  margin-bottom: 20px; /* Spacing between editors */
}

.vh-code-editor-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  max-width: 672px;
  resize: vertical;
  overflow: hidden;
  min-height: 80px;
  max-height: 800px;
  /* Copy Icon Styling */
}
.vh-code-editor-wrapper::-webkit-resizer {
  display: none;
}
.vh-code-editor-wrapper .copy-icon {
  content: ""; /* Clipboard Unicode Icon */
  position: absolute;
  top: 8px; /* Adjust distance from top */
  right: 8px; /* Adjust distance from right */
  cursor: pointer;
  z-index: 10; /* Ensure it’s above the editor */
  -webkit-transition: opacity 0.2s, color 0.2s;

  -moz-transition: opacity 0.2s, color 0.2s;

  -ms-transition: opacity 0.2s, color 0.2s;

  -webkit-transition: opacity 0.2s, color 0.2s;


  -moz-transition: opacity 0.2s, color 0.2s;


  -ms-transition: opacity 0.2s, color 0.2s;


  -webkit-transition: opacity 0.2s, color 0.2s;



  -moz-transition: opacity 0.2s, color 0.2s;



  -ms-transition: opacity 0.2s, color 0.2s;



  transition: opacity 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vh-code-editor-wrapper .copy-icon:hover {
  background-color: var(--gray-50) !important;
}
.vh-code-editor-wrapper .copy-icon:active {
  background-color: var(--gray-100) !important;
}
.vh-code-editor-wrapper::after {
  content: "";
  position: absolute;
  bottom: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  background-image: url("/assets/icons/textarea-resize.svg");
  background-size: cover;
  background-repeat: no-repeat;
  cursor: se-resize;
  z-index: 1000;
}
.vh-code-editor-wrapper .vh-code-editor {
  width: 100%;
  /* Code */
  font-family: "Source Code Pro";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: var(--gray-800) !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-border-radius: 12px;

  -moz-border-radius: 12px;

  -webkit-border-radius: 12px;


  -moz-border-radius: 12px;


  -webkit-border-radius: 12px;



  -moz-border-radius: 12px;



  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--gray-25);
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;


  -moz-box-sizing: border-box;


  box-sizing: border-box;
}
.vh-code-editor-wrapper .vh-code-editor.ace_editor,
.vh-code-editor-wrapper .vh-code-editor.ace_editor *,
.vh-code-editor-wrapper .vh-code-editor.ace_editor div {
  font-family: "Source Code Pro", monospace !important;
  line-height: normal !important;
}
.vh-code-editor-wrapper .vh-code-editor .ace_indent-guide {
  background: none !important;
}
.vh-code-editor-wrapper .vh-code-editor .ace_string, .vh-code-editor-wrapper .vh-code-editor .ace_line span {
  color: var(--gray-800) !important;
}
.vh-code-editor-wrapper .vh-code-editor .ace_cursor {
  color: var(--gray-800) !important; /* Set the cursor foreground color */
}
.vh-code-editor-wrapper .vh-code-editor .ace_content {
  padding: 0 16px;
}
.vh-code-editor-wrapper .vh-code-editor ::-webkit-scrollbar {
  width: 0 !important;
}
.vh-code-editor-wrapper.dark-editor::after {
  background-image: url("/assets/icons/textarea-resize-white.svg"); /* Replace with your image URL */
}
.vh-code-editor-wrapper.dark-editor .copy-icon img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.45;
}
.vh-code-editor-wrapper.dark-editor .copy-icon:hover {
  background-color: var(--gray-800) !important;
}
.vh-code-editor-wrapper.dark-editor .copy-icon:active {
  background-color: var(--gray-700) !important;
}
.vh-code-editor-wrapper.dark-editor .copy-icon:hover img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.85;
}
.vh-code-editor-wrapper.dark-editor .vh-code-editor {
  background: #0A2C35;
  border-color: #0A2C35;
  color: var(--white) !important;
}
.vh-code-editor-wrapper.dark-editor .vh-code-editor .ace_string, .vh-code-editor-wrapper.dark-editor .vh-code-editor .ace_line span {
  color: var(--white) !important;
}
.vh-code-editor-wrapper.dark-editor .vh-code-editor .ace_cursor {
  color: var(--white) !important; /* Set the cursor foreground color */
}

.vh-checkbox-input.switch-primary .vh-switch input:checked + .slider {
  background-color: var(--primary);
  border-color: var(--primary);
}
.vh-checkbox-input.switch-primary .vh-switch input:checked + .slider:before {
  border-color: var(--primary);
}
.vh-checkbox-input.switch-primary .vh-switch input:checked + .slider:hover {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}
.vh-checkbox-input.switch-primary .vh-switch input:checked + .slider:hover:before {
  border-color: var(--control-primary-hover);
}
.vh-checkbox-input.switch-primary .vh-switch input:checked ~ img {
  filter: invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%);
}
.vh-checkbox-input.switch-primary .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--primary) 40%, transparent);
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}
.vh-checkbox-input.switch-primary .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-primary [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-primary [type=checkbox]:checked + span:before {
  background-color: var(--primary);
  border-color: var(--primary);
}
.vahara-custom-checkbox.checkbox-primary [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-primary [type=checkbox]:checked + span:hover:before {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}
.vahara-custom-checkbox.checkbox-primary [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--primary) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-primary [type=radio]:checked + div:after,
.vahara-custom-radio.radio-primary [type=radio]:checked + span:after {
  background-color: var(--primary);
  border-color: var(--primary);
}
.vahara-custom-radio.radio-primary [type=radio]:checked + div:before,
.vahara-custom-radio.radio-primary [type=radio]:checked + span:before {
  border-color: var(--primary);
}
.vahara-custom-radio.radio-primary [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-primary [type=radio]:checked + span:hover:after {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}
.vahara-custom-radio.radio-primary [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-primary [type=radio]:checked + span:hover:before {
  border-color: var(--control-primary-hover);
}

.vh-checkbox-input.switch-secondary .vh-switch input:checked + .slider {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-secondary .vh-switch input:checked + .slider:before {
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-secondary .vh-switch input:checked + .slider:hover {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-secondary .vh-switch input:checked + .slider:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-secondary .vh-switch input:checked ~ img {
  filter: brightness(0) saturate(100%) invert(49%) sepia(100%) saturate(2335%) hue-rotate(140deg) brightness(103%) contrast(91%);
}
.vh-checkbox-input.switch-secondary .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--accent) 40%, transparent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.vh-checkbox-input.switch-secondary .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-secondary [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-secondary [type=checkbox]:checked + span:before {
  background-color: var(--accent);
  border-color: var(--accent);
}
.vahara-custom-checkbox.checkbox-secondary [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-secondary [type=checkbox]:checked + span:hover:before {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-checkbox.checkbox-secondary [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--accent) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-secondary [type=radio]:checked + div:after,
.vahara-custom-radio.radio-secondary [type=radio]:checked + span:after {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-secondary [type=radio]:checked + div:before,
.vahara-custom-radio.radio-secondary [type=radio]:checked + span:before {
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-secondary [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-secondary [type=radio]:checked + span:hover:after {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-radio.radio-secondary [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-secondary [type=radio]:checked + span:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}

.vh-checkbox-input.switch-success .vh-switch input:checked + .slider {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-success .vh-switch input:checked + .slider:before {
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-success .vh-switch input:checked + .slider:hover {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-success .vh-switch input:checked + .slider:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-success .vh-switch input:checked ~ img {
  filter: brightness(0) saturate(100%) invert(49%) sepia(100%) saturate(2335%) hue-rotate(140deg) brightness(103%) contrast(91%);
}
.vh-checkbox-input.switch-success .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--accent) 40%, transparent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.vh-checkbox-input.switch-success .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-success [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-success [type=checkbox]:checked + span:before {
  background-color: var(--success);
  border-color: var(--success);
}
.vahara-custom-checkbox.checkbox-success [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-success [type=checkbox]:checked + span:hover:before {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-checkbox.checkbox-success [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--accent) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-success [type=radio]:checked + div:after,
.vahara-custom-radio.radio-success [type=radio]:checked + span:after {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-success [type=radio]:checked + div:before,
.vahara-custom-radio.radio-success [type=radio]:checked + span:before {
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-success [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-success [type=radio]:checked + span:hover:after {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-radio.radio-success [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-success [type=radio]:checked + span:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}

.vh-checkbox-input.switch-publish .vh-switch input:checked + .slider {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-publish .vh-switch input:checked + .slider:before {
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-publish .vh-switch input:checked + .slider:hover {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-publish .vh-switch input:checked + .slider:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-publish .vh-switch input:checked ~ img {
  filter: brightness(0) saturate(100%) invert(49%) sepia(100%) saturate(2335%) hue-rotate(140deg) brightness(103%) contrast(91%);
}
.vh-checkbox-input.switch-publish .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--accent) 40%, transparent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.vh-checkbox-input.switch-publish .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-publish [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-publish [type=checkbox]:checked + span:before {
  background-color: var(--live);
  border-color: var(--live);
}
.vahara-custom-checkbox.checkbox-publish [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-publish [type=checkbox]:checked + span:hover:before {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-checkbox.checkbox-publish [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--accent) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-publish [type=radio]:checked + div:after,
.vahara-custom-radio.radio-publish [type=radio]:checked + span:after {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-publish [type=radio]:checked + div:before,
.vahara-custom-radio.radio-publish [type=radio]:checked + span:before {
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-publish [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-publish [type=radio]:checked + span:hover:after {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-radio.radio-publish [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-publish [type=radio]:checked + span:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}

.vh-checkbox-input.switch-accent .vh-switch input:checked + .slider {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-accent .vh-switch input:checked + .slider:before {
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-accent .vh-switch input:checked + .slider:hover {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-accent .vh-switch input:checked + .slider:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-accent .vh-switch input:checked ~ img {
  filter: brightness(0) saturate(100%) invert(49%) sepia(100%) saturate(2335%) hue-rotate(140deg) brightness(103%) contrast(91%);
}
.vh-checkbox-input.switch-accent .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--accent) 40%, transparent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.vh-checkbox-input.switch-accent .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-accent [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-accent [type=checkbox]:checked + span:before {
  background-color: var(--accent);
  border-color: var(--accent);
}
.vahara-custom-checkbox.checkbox-accent [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-accent [type=checkbox]:checked + span:hover:before {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-checkbox.checkbox-accent [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--accent) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-accent [type=radio]:checked + div:after,
.vahara-custom-radio.radio-accent [type=radio]:checked + span:after {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-accent [type=radio]:checked + div:before,
.vahara-custom-radio.radio-accent [type=radio]:checked + span:before {
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-accent [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-accent [type=radio]:checked + span:hover:after {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-radio.radio-accent [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-accent [type=radio]:checked + span:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}

.vh-checkbox-input.switch-tertiary .vh-switch input:checked + .slider {
  background-color: var(--system);
  border-color: var(--system);
}
.vh-checkbox-input.switch-tertiary .vh-switch input:checked + .slider:before {
  border-color: var(--system);
}
.vh-checkbox-input.switch-tertiary .vh-switch input:checked + .slider:hover {
  background-color: oklch(from var(--system) calc(l - 0.06) c h);
  border-color: oklch(from var(--system) calc(l - 0.06) c h);
}
.vh-checkbox-input.switch-tertiary .vh-switch input:checked + .slider:hover:before {
  border-color: oklch(from var(--system) calc(l - 0.06) c h);
}
.vh-checkbox-input.switch-tertiary .vh-switch input:checked ~ img {
  filter: brightness(0) saturate(100%) invert(26%) sepia(42%) saturate(769%) hue-rotate(145deg) brightness(87%) contrast(98%);
}
.vh-checkbox-input.switch-tertiary .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--system) 40%, transparent);
  border-color: color-mix(in oklch, var(--system) 40%, transparent);
}
.vh-checkbox-input.switch-tertiary .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--system) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-tertiary [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-tertiary [type=checkbox]:checked + span:before {
  background-color: var(--system);
  border-color: var(--system);
}
.vahara-custom-checkbox.checkbox-tertiary [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-tertiary [type=checkbox]:checked + span:hover:before {
  background-color: oklch(from var(--system) calc(l - 0.06) c h);
  border-color: oklch(from var(--system) calc(l - 0.06) c h);
}
.vahara-custom-checkbox.checkbox-tertiary [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--system) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-tertiary [type=radio]:checked + div:after,
.vahara-custom-radio.radio-tertiary [type=radio]:checked + span:after {
  background-color: var(--system);
  border-color: var(--system);
}
.vahara-custom-radio.radio-tertiary [type=radio]:checked + div:before,
.vahara-custom-radio.radio-tertiary [type=radio]:checked + span:before {
  border-color: var(--system);
}
.vahara-custom-radio.radio-tertiary [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-tertiary [type=radio]:checked + span:hover:after {
  background-color: oklch(from var(--system) calc(l - 0.06) c h);
  border-color: oklch(from var(--system) calc(l - 0.06) c h);
}
.vahara-custom-radio.radio-tertiary [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-tertiary [type=radio]:checked + span:hover:before {
  border-color: oklch(from var(--system) calc(l - 0.06) c h);
}

.vh-checkbox-input.switch-danger .vh-switch input:checked + .slider {
  background-color: var(--warning);
  border-color: var(--warning);
}
.vh-checkbox-input.switch-danger .vh-switch input:checked + .slider:before {
  border-color: var(--warning);
}
.vh-checkbox-input.switch-danger .vh-switch input:checked + .slider:hover {
  background-color: var(--control-destructive-hover);
  border-color: var(--control-destructive-hover);
}
.vh-checkbox-input.switch-danger .vh-switch input:checked + .slider:hover:before {
  border-color: var(--control-destructive-hover);
}
.vh-checkbox-input.switch-danger .vh-switch input:checked ~ img {
  filter: invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}
.vh-checkbox-input.switch-danger .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--warning) 40%, transparent);
  border-color: color-mix(in oklch, var(--warning) 40%, transparent);
}
.vh-checkbox-input.switch-danger .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--warning) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-danger [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-danger [type=checkbox]:checked + span:before {
  background-color: var(--warning);
  border-color: var(--warning);
}
.vahara-custom-checkbox.checkbox-danger [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-danger [type=checkbox]:checked + span:hover:before {
  background-color: var(--control-destructive-hover);
  border-color: var(--control-destructive-hover);
}
.vahara-custom-checkbox.checkbox-danger [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--warning) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-danger [type=radio]:checked + div:after,
.vahara-custom-radio.radio-danger [type=radio]:checked + span:after {
  background-color: var(--warning);
  border-color: var(--warning);
}
.vahara-custom-radio.radio-danger [type=radio]:checked + div:before,
.vahara-custom-radio.radio-danger [type=radio]:checked + span:before {
  border-color: var(--warning);
}
.vahara-custom-radio.radio-danger [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-danger [type=radio]:checked + span:hover:after {
  background-color: var(--control-destructive-hover);
  border-color: var(--control-destructive-hover);
}
.vahara-custom-radio.radio-danger [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-danger [type=radio]:checked + span:hover:before {
  border-color: var(--control-destructive-hover);
}

.vh-checkbox-input.switch-info .vh-switch input:checked + .slider {
  background-color: var(--dev);
  border-color: var(--dev);
}
.vh-checkbox-input.switch-info .vh-switch input:checked + .slider:before {
  border-color: var(--dev);
}
.vh-checkbox-input.switch-info .vh-switch input:checked + .slider:hover {
  background-color: var(--control-info-hover);
  border-color: var(--control-info-hover);
}
.vh-checkbox-input.switch-info .vh-switch input:checked + .slider:hover:before {
  border-color: var(--control-info-hover);
}
.vh-checkbox-input.switch-info .vh-switch input:checked ~ img {
  filter: invert(52%) sepia(92%) saturate(2026%) hue-rotate(158deg) brightness(100%) contrast(103%);
}
.vh-checkbox-input.switch-info .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--dev) 40%, transparent);
  border-color: color-mix(in oklch, var(--dev) 40%, transparent);
}
.vh-checkbox-input.switch-info .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--dev) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-info [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-info [type=checkbox]:checked + span:before {
  background-color: var(--dev);
  border-color: var(--dev);
}
.vahara-custom-checkbox.checkbox-info [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-info [type=checkbox]:checked + span:hover:before {
  background-color: var(--control-info-hover);
  border-color: var(--control-info-hover);
}
.vahara-custom-checkbox.checkbox-info [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--dev) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-info [type=radio]:checked + div:after,
.vahara-custom-radio.radio-info [type=radio]:checked + span:after {
  background-color: var(--dev);
  border-color: var(--dev);
}
.vahara-custom-radio.radio-info [type=radio]:checked + div:before,
.vahara-custom-radio.radio-info [type=radio]:checked + span:before {
  border-color: var(--dev);
}
.vahara-custom-radio.radio-info [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-info [type=radio]:checked + span:hover:after {
  background-color: var(--control-info-hover);
  border-color: var(--control-info-hover);
}
.vahara-custom-radio.radio-info [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-info [type=radio]:checked + span:hover:before {
  border-color: var(--control-info-hover);
}

.vh-checkbox-input.switch-error .vh-switch input:checked + .slider {
  background-color: var(--warning);
  border-color: var(--warning);
}
.vh-checkbox-input.switch-error .vh-switch input:checked + .slider:before {
  border-color: var(--warning);
}
.vh-checkbox-input.switch-error .vh-switch input:checked + .slider:hover {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}
.vh-checkbox-input.switch-error .vh-switch input:checked + .slider:hover:before {
  border-color: var(--control-warning-hover);
}
.vh-checkbox-input.switch-error .vh-switch input:checked ~ img {
  filter: invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}
.vh-checkbox-input.switch-error .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--warning) 40%, transparent);
  border-color: color-mix(in oklch, var(--warning) 40%, transparent);
}
.vh-checkbox-input.switch-error .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--warning) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-error [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-error [type=checkbox]:checked + span:before {
  background-color: var(--warning);
  border-color: var(--warning);
}
.vahara-custom-checkbox.checkbox-error [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-error [type=checkbox]:checked + span:hover:before {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}
.vahara-custom-checkbox.checkbox-error [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--warning) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-error [type=radio]:checked + div:after,
.vahara-custom-radio.radio-error [type=radio]:checked + span:after {
  background-color: var(--warning);
  border-color: var(--warning);
}
.vahara-custom-radio.radio-error [type=radio]:checked + div:before,
.vahara-custom-radio.radio-error [type=radio]:checked + span:before {
  border-color: var(--warning);
}
.vahara-custom-radio.radio-error [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-error [type=radio]:checked + span:hover:after {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}
.vahara-custom-radio.radio-error [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-error [type=radio]:checked + span:hover:before {
  border-color: var(--control-warning-hover);
}

.vh-checkbox-input.switch-warning .vh-switch input:checked + .slider {
  background-color: var(--warning);
  border-color: var(--warning);
}
.vh-checkbox-input.switch-warning .vh-switch input:checked + .slider:before {
  border-color: var(--warning);
}
.vh-checkbox-input.switch-warning .vh-switch input:checked + .slider:hover {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}
.vh-checkbox-input.switch-warning .vh-switch input:checked + .slider:hover:before {
  border-color: var(--control-warning-hover);
}
.vh-checkbox-input.switch-warning .vh-switch input:checked ~ img {
  filter: invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}
.vh-checkbox-input.switch-warning .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--warning) 40%, transparent);
  border-color: color-mix(in oklch, var(--warning) 40%, transparent);
}
.vh-checkbox-input.switch-warning .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--warning) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-warning [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-warning [type=checkbox]:checked + span:before {
  background-color: var(--warning);
  border-color: var(--warning);
}
.vahara-custom-checkbox.checkbox-warning [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-warning [type=checkbox]:checked + span:hover:before {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}
.vahara-custom-checkbox.checkbox-warning [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--warning) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-warning [type=radio]:checked + div:after,
.vahara-custom-radio.radio-warning [type=radio]:checked + span:after {
  background-color: var(--warning);
  border-color: var(--warning);
}
.vahara-custom-radio.radio-warning [type=radio]:checked + div:before,
.vahara-custom-radio.radio-warning [type=radio]:checked + span:before {
  border-color: var(--warning);
}
.vahara-custom-radio.radio-warning [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-warning [type=radio]:checked + span:hover:after {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}
.vahara-custom-radio.radio-warning [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-warning [type=radio]:checked + span:hover:before {
  border-color: var(--control-warning-hover);
}

.vh-checkbox-input.switch-subtle-primary .vh-switch input:checked + .slider {
  background-color: var(--primary);
  border-color: var(--primary);
}
.vh-checkbox-input.switch-subtle-primary .vh-switch input:checked + .slider:before {
  border-color: var(--primary);
}
.vh-checkbox-input.switch-subtle-primary .vh-switch input:checked + .slider:hover {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}
.vh-checkbox-input.switch-subtle-primary .vh-switch input:checked + .slider:hover:before {
  border-color: var(--control-primary-hover);
}
.vh-checkbox-input.switch-subtle-primary .vh-switch input:checked ~ img {
  filter: invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%);
}
.vh-checkbox-input.switch-subtle-primary .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--primary) 40%, transparent);
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}
.vh-checkbox-input.switch-subtle-primary .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-subtle-primary [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-subtle-primary [type=checkbox]:checked + span:before {
  background-color: var(--primary);
  border-color: var(--primary);
}
.vahara-custom-checkbox.checkbox-subtle-primary [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-subtle-primary [type=checkbox]:checked + span:hover:before {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}
.vahara-custom-checkbox.checkbox-subtle-primary [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--primary) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-subtle-primary [type=radio]:checked + div:after,
.vahara-custom-radio.radio-subtle-primary [type=radio]:checked + span:after {
  background-color: var(--primary);
  border-color: var(--primary);
}
.vahara-custom-radio.radio-subtle-primary [type=radio]:checked + div:before,
.vahara-custom-radio.radio-subtle-primary [type=radio]:checked + span:before {
  border-color: var(--primary);
}
.vahara-custom-radio.radio-subtle-primary [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-subtle-primary [type=radio]:checked + span:hover:after {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}
.vahara-custom-radio.radio-subtle-primary [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-subtle-primary [type=radio]:checked + span:hover:before {
  border-color: var(--control-primary-hover);
}

.vh-checkbox-input.switch-subtle-secondary .vh-switch input:checked + .slider {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-subtle-secondary .vh-switch input:checked + .slider:before {
  border-color: var(--secondary);
}
.vh-checkbox-input.switch-subtle-secondary .vh-switch input:checked + .slider:hover {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-subtle-secondary .vh-switch input:checked + .slider:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vh-checkbox-input.switch-subtle-secondary .vh-switch input:checked ~ img {
  filter: brightness(0) saturate(100%) invert(49%) sepia(100%) saturate(2335%) hue-rotate(140deg) brightness(103%) contrast(91%);
}
.vh-checkbox-input.switch-subtle-secondary .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--accent) 40%, transparent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}
.vh-checkbox-input.switch-subtle-secondary .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

.vahara-custom-checkbox.checkbox-subtle-secondary [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-subtle-secondary [type=checkbox]:checked + span:before {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vahara-custom-checkbox.checkbox-subtle-secondary [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-subtle-secondary [type=checkbox]:checked + span:hover:before {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-checkbox.checkbox-subtle-secondary [type=checkbox]:checked:disabled + div:before {
  background-color: color-mix(in oklch, var(--accent) 40%, transparent) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-subtle-secondary [type=radio]:checked + div:after,
.vahara-custom-radio.radio-subtle-secondary [type=radio]:checked + span:after {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-subtle-secondary [type=radio]:checked + div:before,
.vahara-custom-radio.radio-subtle-secondary [type=radio]:checked + span:before {
  border-color: var(--secondary);
}
.vahara-custom-radio.radio-subtle-secondary [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-subtle-secondary [type=radio]:checked + span:hover:after {
  background-color: oklch(from var(--accent) calc(l - 0.025) c h);
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}
.vahara-custom-radio.radio-subtle-secondary [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-subtle-secondary [type=radio]:checked + span:hover:before {
  border-color: oklch(from var(--accent) calc(l - 0.025) c h);
}

.vh-checkbox-input.switch-transparent .vh-switch input:checked + .slider {
  background-color: transparent;
  border-color: transparent;
}
.vh-checkbox-input.switch-transparent .vh-switch input:checked + .slider:before {
  border-color: transparent;
}
.vh-checkbox-input.switch-transparent .vh-switch input:checked + .slider:hover {
  background-color: transparent;
  border-color: transparent;
}
.vh-checkbox-input.switch-transparent .vh-switch input:checked + .slider:hover:before {
  border-color: transparent;
}
.vh-checkbox-input.switch-transparent .vh-switch input:checked ~ img {
  filter: brightness(0) saturate(100%) brightness(0) invert(1);
}
.vh-checkbox-input.switch-transparent .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.4);
}
.vh-checkbox-input.switch-transparent .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: rgba(0, 0, 0, 0.4);
}

.vahara-custom-checkbox.checkbox-transparent [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-transparent [type=checkbox]:checked + span:before {
  background-color: transparent;
  border-color: transparent;
}
.vahara-custom-checkbox.checkbox-transparent [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-transparent [type=checkbox]:checked + span:hover:before {
  background-color: transparent;
  border-color: transparent;
}
.vahara-custom-checkbox.checkbox-transparent [type=checkbox]:checked:disabled + div:before {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-transparent [type=radio]:checked + div:after,
.vahara-custom-radio.radio-transparent [type=radio]:checked + span:after {
  background-color: transparent;
  border-color: transparent;
}
.vahara-custom-radio.radio-transparent [type=radio]:checked + div:before,
.vahara-custom-radio.radio-transparent [type=radio]:checked + span:before {
  border-color: transparent;
}
.vahara-custom-radio.radio-transparent [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-transparent [type=radio]:checked + span:hover:after {
  background-color: transparent;
  border-color: transparent;
}
.vahara-custom-radio.radio-transparent [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-transparent [type=radio]:checked + span:hover:before {
  border-color: transparent;
}

.vh-checkbox-input.switch-light-gray .vh-switch input:checked + .slider {
  background-color: var(--muted);
  border-color: var(--muted);
}
.vh-checkbox-input.switch-light-gray .vh-switch input:checked + .slider:before {
  border-color: var(--muted);
}
.vh-checkbox-input.switch-light-gray .vh-switch input:checked + .slider:hover {
  background-color: var(--gray-50);
  border-color: var(--gray-50);
}
.vh-checkbox-input.switch-light-gray .vh-switch input:checked + .slider:hover:before {
  border-color: var(--gray-50);
}
.vh-checkbox-input.switch-light-gray .vh-switch input:checked ~ img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(14%) saturate(1552%) hue-rotate(152deg) brightness(85%) contrast(85%);
}
.vh-checkbox-input.switch-light-gray .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: rgba(243, 247, 249, 0.4);
  border-color: rgba(243, 247, 249, 0.4);
}
.vh-checkbox-input.switch-light-gray .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: rgba(243, 247, 249, 0.4);
}

.vahara-custom-checkbox.checkbox-light-gray [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-light-gray [type=checkbox]:checked + span:before {
  background-color: var(--muted);
  border-color: var(--muted);
}
.vahara-custom-checkbox.checkbox-light-gray [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-light-gray [type=checkbox]:checked + span:hover:before {
  background-color: var(--gray-50);
  border-color: var(--gray-50);
}
.vahara-custom-checkbox.checkbox-light-gray [type=checkbox]:checked:disabled + div:before {
  background-color: rgba(243, 247, 249, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-light-gray [type=radio]:checked + div:after,
.vahara-custom-radio.radio-light-gray [type=radio]:checked + span:after {
  background-color: var(--muted);
  border-color: var(--muted);
}
.vahara-custom-radio.radio-light-gray [type=radio]:checked + div:before,
.vahara-custom-radio.radio-light-gray [type=radio]:checked + span:before {
  border-color: var(--muted);
}
.vahara-custom-radio.radio-light-gray [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-light-gray [type=radio]:checked + span:hover:after {
  background-color: var(--gray-50);
  border-color: var(--gray-50);
}
.vahara-custom-radio.radio-light-gray [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-light-gray [type=radio]:checked + span:hover:before {
  border-color: var(--gray-50);
}

.vh-checkbox-input.switch-white .vh-switch input:checked + .slider {
  background-color: transparent;
  border-color: transparent;
}
.vh-checkbox-input.switch-white .vh-switch input:checked + .slider:before {
  border-color: transparent;
}
.vh-checkbox-input.switch-white .vh-switch input:checked + .slider:hover {
  background-color: rgba(255, 255, 255, 0.1490196078);
  border-color: rgba(255, 255, 255, 0.1490196078);
}
.vh-checkbox-input.switch-white .vh-switch input:checked + .slider:hover:before {
  border-color: rgba(255, 255, 255, 0.1490196078);
}
.vh-checkbox-input.switch-white .vh-switch input:checked ~ img {
  filter: brightness(0) saturate(100%) brightness(0) invert(1);
}
.vh-checkbox-input.switch-white .vh-switch .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.4);
}
.vh-checkbox-input.switch-white .vh-switch .vh-switch input:checked:disabled + .slider:before {
  border-color: rgba(0, 0, 0, 0.4);
}

.vahara-custom-checkbox.checkbox-white [type=checkbox]:checked + div:before,
.vahara-custom-checkbox.checkbox-white [type=checkbox]:checked + span:before {
  background-color: transparent;
  border-color: transparent;
}
.vahara-custom-checkbox.checkbox-white [type=checkbox]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-white [type=checkbox]:checked + span:hover:before {
  background-color: rgba(255, 255, 255, 0.1490196078);
  border-color: rgba(255, 255, 255, 0.1490196078);
}
.vahara-custom-checkbox.checkbox-white [type=checkbox]:checked:disabled + div:before {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-radio.radio-white [type=radio]:checked + div:after,
.vahara-custom-radio.radio-white [type=radio]:checked + span:after {
  background-color: transparent;
  border-color: transparent;
}
.vahara-custom-radio.radio-white [type=radio]:checked + div:before,
.vahara-custom-radio.radio-white [type=radio]:checked + span:before {
  border-color: transparent;
}
.vahara-custom-radio.radio-white [type=radio]:checked + div:hover:after,
.vahara-custom-radio.radio-white [type=radio]:checked + span:hover:after {
  background-color: rgba(255, 255, 255, 0.1490196078);
  border-color: rgba(255, 255, 255, 0.1490196078);
}
.vahara-custom-radio.radio-white [type=radio]:checked + div:hover:before,
.vahara-custom-radio.radio-white [type=radio]:checked + span:hover:before {
  border-color: rgba(255, 255, 255, 0.1490196078);
}

.ace_editor, .ace_editor *, .ace_editor, .ace_editor div {
  font-family: monospace;
  line-height: 1.5;
}

.ace_print-margin {
  background: transparent !important;
}

/* Switch Color Variants */
.vh-switch-primary input:checked + .slider {
  background-color: var(--primary);
}

.vh-switch-accent input:checked + .slider {
  background-color: var(--accent);
}

.vh-switch-success input:checked + .slider {
  background-color: var(--success);
}

.vh-switch-error input:checked + .slider {
  background-color: var(--warning);
}

.vh-switch-warning input:checked + .slider {
  background-color: var(--warning);
}

.vh-switch-danger input:checked + .slider {
  background-color: var(--destructive);
}

.vh-switch-link input:checked + .slider {
  background-color: var(--link);
}

.vh-switch-info input:checked + .slider {
  background-color: var(--info);
}

.vh-switch-live input:checked + .slider {
  background-color: var(--live);
}

.vh-switch-draft input:checked + .slider {
  background-color: var(--draft);
}

.vh-switch-dev input:checked + .slider {
  background-color: var(--dev);
}

.vh-switch-system input:checked + .slider {
  background-color: var(--system);
}

.vh-switch-beta input:checked + .slider {
  background-color: var(--beta);
}

.vh-switch-secondary input:checked + .slider {
  background-color: var(--secondary);
}

.vh-switch-tertiary input:checked + .slider {
  background-color: var(--system);
}

.vh-checkbox-input.switch-primary .vh-switch input:checked + .slider:hover {
  background-color: color-mix(in srgb, var(--primary) 85%, black);
  border-color: color-mix(in srgb, var(--primary) 85%, black);
}

.vh-checkbox-input.switch-primary .vh-switch input:checked + .slider:hover:before {
  border-color: color-mix(in srgb, var(--primary) 85%, black);
}

.vh-checkbox-input.switch-primary .vh-switch input:checked ~ img {
  filter: var(--primary-filter);
}

.vh-checkbox-input.switch-primary .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--primary) 40%, transparent);
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}

.vh-checkbox-input.switch-primary .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}

.vh-checkbox-input.switch-secondary .vh-switch input:checked ~ img {
  filter: var(--secondary-filter);
}

.vh-checkbox-input.switch-secondary .vh-switch input:checked:disabled + .slider {
  cursor: auto;
  background-color: color-mix(in oklch, var(--accent) 40%, transparent);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

.vh-checkbox-input.switch-secondary .vh-switch input:checked:disabled + .slider:before {
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

.bootstrap-tagsinput .badge.primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.bootstrap-tagsinput .badge.secondary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* tagsinput container — base styles at line ~2142, badge overrides below */
#tags .ds-tags-demo {
  max-width: 672px;
}
#tags .bootstrap-tagsinput {
  width: 100%;
  min-height: 80px;
  padding: 10px 10px 6px;
  border: 1px solid var(--border);
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  -webkit-border-radius: 8px;



  -moz-border-radius: 8px;



  border-radius: 8px;
  background: var(--card);
  cursor: default;
}
#tags .bootstrap-tagsinput .badge {
  font-size: 14px;
  padding: 4px 8px;
  -webkit-border-radius: 6px !important;

  -moz-border-radius: 6px !important;

  -webkit-border-radius: 6px !important;


  -moz-border-radius: 6px !important;


  -webkit-border-radius: 6px !important;



  -moz-border-radius: 6px !important;



  border-radius: 6px !important;
  font-weight: 500;
  height: 28px;
  line-height: 18px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0 !important;
  letter-spacing: 0.077px !important;
}
#tags .bootstrap-tagsinput .badge [data-role=remove] {
  background-color: transparent !important;
  opacity: 0.5;
  height: 14px !important;
  width: 14px !important;
  margin-left: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  cursor: pointer;
}
#tags .bootstrap-tagsinput .badge [data-role=remove]:after {
  background-color: transparent !important;
  font-size: 14px !important;
  padding: 0 !important;
  -webkit-border-radius: unset !important;

  -moz-border-radius: unset !important;

  -webkit-border-radius: unset !important;


  -moz-border-radius: unset !important;


  -webkit-border-radius: unset !important;



  -moz-border-radius: unset !important;



  border-radius: unset !important;
  height: 14px;
  display: flex;
  width: 14px;
  justify-content: center;
  align-items: center;
  content: "" !important;
  font-weight: 600;
  background: url(/assets/icons/white/x.svg) left center no-repeat;
  background-size: 100%;
}
#tags .bootstrap-tagsinput .badge [data-role=remove]:hover {
  opacity: 0.9;
}

.vh-checkbox-input label [data-toggle^=tooltip],
label.d-flex [data-toggle^=tooltip],
.vahara-custom-checkbox [type=checkbox] + div [data-toggle^=tooltip],
.vahara-custom-radio [type=radio] + div [data-toggle^=tooltip] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.w-672 {
  max-width: 672px !important;
}

#tags .bootstrap-tagsinput input {
  height: 28px;
  padding: 0 !important;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  cursor: default;
}
#tags .ds-tags-actions {
  margin-top: 4px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
#tags .clear-all-btn {
  cursor: pointer;
  margin-right: 0 !important;
}
#tags .btn.btn-primary.btn-clear,
#tags .btn.btn-primary.btn-clear:focus,
#tags .btn.btn-primary.btn-clear:focus-within,
#tags .btn.btn-primary.btn-clear:focus-visible {
  background-color: transparent !important;
  border-color: transparent !important;
  outline: none !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}
#tags .btn.btn-primary.btn-clear:hover,
#tags .btn.btn-primary.btn-clear:hover:focus,
#tags .btn.btn-primary.btn-clear:hover:focus-visible {
  background-color: rgba(13, 107, 105, 0.08) !important;
  border-color: transparent !important;
  outline: none !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}
#tags .btn.btn-primary.btn-clear:active,
#tags .btn.btn-primary.btn-clear:active:focus,
#tags .btn.btn-primary.btn-clear:active:focus-visible,
#tags .btn.btn-primary.btn-clear.active {
  background-color: rgba(13, 107, 105, 0.14) !important;
  border-color: transparent !important;
  outline: none !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}
#tags .tag-clear-all-section {
  display: none !important;
}

.tag-clear-all-section {
  display: none !important;
}

.bootstrap-tagsinput:has(.badge) > .tag-clear-all-section {
  display: inline-block !important;
}

.tooltip {
  opacity: 1;
}
.tooltip .tooltip-inner {
  background-color: var(--gray-800);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  padding: 12px 16px;
  -webkit-border-radius: var(--radius-md);

  -moz-border-radius: var(--radius-md);

  -webkit-border-radius: var(--radius-md);


  -moz-border-radius: var(--radius-md);


  border-radius: var(--radius-md);
  max-width: 260px;
}
.tooltip .tooltip-inner a {
  color: var(--link-on-dark) !important;
}
.tooltip .tooltip-inner a:hover {
  color: var(--link-on-dark) !important;
  text-decoration: underline;
}
.tooltip.bs-tooltip-right .arrow::before {
  border-right-color: var(--gray-800);
  left: 2.5px;
}
.tooltip.bs-tooltip-left .arrow::before {
  border-left-color: var(--gray-800);
}
.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: var(--gray-800);
}
.tooltip.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--gray-800);
}

.mb-10 {
  margin-bottom: 10px !important;
}

.line-height-20 {
  line-height: 20px !important;
}

.line-height-16 {
  line-height: 16px !important;
}

.btn-toggle-beta-mode:not(.dev-mode-on):not(.sys-mode-on) {
  color: var(--gray-500) !important;
}
.btn-toggle-beta-mode:not(.dev-mode-on):not(.sys-mode-on) img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
}
.btn-toggle-beta-mode:not(.dev-mode-on):not(.sys-mode-on):hover {
  color: var(--gray-900) !important;
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  -webkit-border-radius: 8px;



  -moz-border-radius: 8px;



  border-radius: 8px;
  background: color-mix(in oklch, var(--dev) 5%, transparent) !important;
}
.btn-toggle-beta-mode:not(.dev-mode-on):not(.sys-mode-on):hover img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(19%) saturate(1584%) hue-rotate(150deg) brightness(96%) contrast(92%);
}
.btn-toggle-beta-mode:not(.dev-mode-on):not(.sys-mode-on):active, .btn-toggle-beta-mode:not(.dev-mode-on):not(.sys-mode-on).active {
  color: var(--gray-900) !important;
  background: color-mix(in oklch, var(--dev) 10%, transparent) !important;
}

.dev-mode-on {
  color: var(--dev) !important;
}
.dev-mode-on img {
  filter: invert(52%) sepia(92%) saturate(2026%) hue-rotate(158deg) brightness(100%) contrast(103%);
}
.dev-mode-on:hover {
  background-color: var(--dev)0D !important;
}
.dev-mode-on:active, .dev-mode-on.active {
  background-color: var(--dev)1A !important;
}

.sys-mode-on {
  color: var(--warning) !important;
}
.sys-mode-on img {
  filter: invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%);
}
.sys-mode-on:hover {
  background-color: var(--warning)0D !important;
}
.sys-mode-on:active, .sys-mode-on.active {
  background-color: var(--warning)1A !important;
}

/* System-mode-only UI markers */
.system-mode-text {
  color: var(--warning) !important;
}
.system-mode-area {
  background-color: color-mix(in oklch, var(--warning) 8%, transparent);
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}

.fr-popup .fr-checkbox-line {
  display: flex;
  align-items: center;
}

.text-decoration-underline-hover:hover {
  text-decoration: underline;
}

.item-asset-img {
  position: relative;
  width: max-content;
}

.item-asset-img img {
  height: auto !important;
  min-height: 200px !important;
  display: block;
  object-fit: contain !important;
}

.item-asset-img .fa-pencil-square-o {
  position: absolute;
  top: 15px;
  right: 30px;
  color: white;
}

.item-asset-img .fa-trash-o, .item-asset-img .btn-editor {
  position: absolute;
  top: 15px;
  right: 10px;
  color: white;
}

.item-asset-img .fa-trash-o:hover {
  color: gray;
}

.item-asset-img .fa-pencil-square-o:hover {
  color: gray;
}

.fr-wrapper .fr-iframe {
  min-height: 80px;
  max-height: 500px;
}

.fr-view {
  max-height: 500px;
}

.fr-view {
  max-height: 500px;
  height: auto;
  overflow-y: scroll;
}

.fr-view::-webkit-scrollbar, .fr-wrapper .fr-iframe::-webkit-scrollbar {
  width: 8px !important;
}

.fr-view::-webkit-scrollbar-thumb, .fr-wrapper .fr-iframe::-webkit-scrollbar-thumb {
  background-color: var(--border) !important;
  -webkit-border-radius: 4px !important;

  -moz-border-radius: 4px !important;

  -webkit-border-radius: 4px !important;


  -moz-border-radius: 4px !important;


  -webkit-border-radius: 4px !important;



  -moz-border-radius: 4px !important;



  border-radius: 4px !important;
}

.vahara-drag-n-drop-list .list-group-item {
  margin-bottom: 6px;
  text-align: left;
  min-height: 48px;
  padding: 10px 8px 10px 15px;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  -webkit-border-radius: 8px;



  -moz-border-radius: 8px;



  border-radius: 8px;
  background: var(--muted);
  border: 1px solid var(--muted);
}

.vahara-drag-n-drop-list .list-group-item.py-0:not([data-is-group=true]),
.vahara-drag-n-drop-list .list-group-item.py-0[data-is-group=true] > .list-item-row {
  height: 48px;
}

.vahara-drag-n-drop-list .list-group-item.package-field-item .btn-delete-field {
  display: none !important;
}

.text-primary-green {
  color: var(--primary) !important;
}

/* Outline & Clear Button Icon Colors — icons match button text color */
.btn-outline.btn-primary img,
.btn-outline.btn-primary svg,
.btn-clear.btn-primary img,
.btn-clear.btn-primary svg {
  filter: brightness(0) saturate(100%) invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%) !important;
}
.btn-outline.btn-primary:disabled img,
.btn-outline.btn-primary.disabled img,
.btn-clear.btn-primary:disabled img,
.btn-clear.btn-primary.disabled img {
  opacity: 0.4;
}
.btn-outline.btn-accent img,
.btn-outline.btn-accent svg,
.btn-clear.btn-accent img,
.btn-clear.btn-accent svg {
  filter: brightness(0) saturate(100%) invert(54%) sepia(50%) saturate(1503%) hue-rotate(132deg) brightness(94%) contrast(91%) !important;
}
.btn-outline.btn-secondary img,
.btn-outline.btn-secondary svg,
.btn-clear.btn-secondary img,
.btn-clear.btn-secondary svg {
  filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%) !important;
}
.btn-outline.btn-destructive img,
.btn-outline.btn-destructive svg,
.btn-clear.btn-destructive img,
.btn-clear.btn-destructive svg {
  filter: brightness(0) saturate(100%) invert(53%) sepia(22%) saturate(6419%) hue-rotate(318deg) brightness(101%) contrast(88%) !important;
}
.btn-outline.btn-warning img,
.btn-outline.btn-warning svg,
.btn-clear.btn-warning img,
.btn-clear.btn-warning svg {
  filter: brightness(0) saturate(100%) invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%) !important;
}

/* =============================================================================
   Dark mode — toggle / checkbox / radio / file upload overrides
   ============================================================================= */

/* Toggle switch — off track */
body.dark .vh-checkbox-input .vh-switch .slider {
  background-color: var(--gray-700);
}

/* Toggle switch — on track (accent green) */
body.dark .vh-checkbox-input .vh-switch input:checked + .slider {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Toggle switch — knob (off state) — white knob, track-color border */
body.dark .vh-checkbox-input .vh-switch .slider:before {
  background-color: white;
  border-color: var(--gray-700);
}

/* Toggle switch — knob (on state) — white knob, accent border */
body.dark .vh-checkbox-input .vh-switch input:checked + .slider:before {
  background-color: white;
  border-color: var(--accent);
}

/* Toggle switch — off hover — track and knob border change together */
body.dark .vh-checkbox-input .vh-switch input:not(:checked) + .slider:hover {
  background-color: var(--gray-600);
  border-color: var(--gray-600);
}
body.dark .vh-checkbox-input .vh-switch input:not(:checked) + .slider:hover:before {
  border-color: var(--gray-600);
}

/* Toggle switch — on hover */
body.dark .vh-checkbox-input .vh-switch input:checked + .slider:hover {
  background-color: oklch(from var(--accent) calc(l - 0.04) c h);
  border-color: oklch(from var(--accent) calc(l - 0.04) c h);
}

/* Toggle switch — disabled off */
body.dark .vh-checkbox-input .vh-switch input:not(:checked):disabled + .slider {
  background-color: var(--gray-800);
  border-color: var(--gray-800);
}
body.dark .vh-checkbox-input .vh-switch input:not(:checked):disabled + .slider:before {
  border-color: var(--gray-800);
  background-color: var(--gray-300);
}

/* Toggle switch — disabled checked — muted solid teal */
body.dark .vh-checkbox-input .vh-switch input:checked:disabled + .slider {
  background-color: #0F4E47 !important;
  border-color: #0F4E47 !important;
  cursor: default;
}
body.dark .vh-checkbox-input .vh-switch input:checked:disabled + .slider:before {
  background-color: var(--gray-300);
  border-color: #0F4E47;
}

/* Toggle switch — lock icon dark mode */
body.dark .vh-checkbox-input .vh-switch input ~ img {
  filter: var(--gray-400-filter);
}
body.dark .vh-checkbox-input .vh-switch input:checked ~ img {
  filter: var(--accent-filter);
}

/* Checkbox unchecked — dark bg */
body.dark .vahara-custom-checkbox [type=checkbox]:not(:checked) + div:before {
  background: var(--gray-900);
  border-color: var(--gray-500);
}

/* Checkbox checked — keep accent green fill */
body.dark .vahara-custom-checkbox [type=checkbox]:checked + div:before {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Checkbox checked hover — slightly darker accent */
body.dark .vahara-custom-checkbox [type=checkbox]:checked:not(:disabled) + div:hover:before {
  background-color: oklch(from var(--accent) calc(l - 0.03) c h);
  border-color: oklch(from var(--accent) calc(l - 0.03) c h);
}

/* Checkbox unchecked hover */
body.dark .vahara-custom-checkbox [type=checkbox]:not(:checked):not(:disabled) + div:hover:before {
  border-color: var(--gray-400);
}

/* Checkbox disabled unchecked */
body.dark .vahara-custom-checkbox [type=checkbox]:not(:checked):disabled + div:before {
  background: var(--gray-950);
  border-color: var(--gray-700) !important;
}

/* Checkbox disabled checked — muted solid teal */
body.dark .vahara-custom-checkbox [type=checkbox]:checked:disabled + div:before {
  background-color: #0F4E47 !important;
  border-color: #0F4E47 !important;
}

/* Radio unchecked — dark bg */
body.dark .vahara-custom-radio [type=radio]:not(:checked) + span:before,
body.dark .vahara-custom-radio [type=radio]:not(:checked) + div:before {
  background: var(--gray-900);
  border-color: var(--gray-600);
}

/* Radio checked — keep accent border */
body.dark .vahara-custom-radio [type=radio]:checked + span:before,
body.dark .vahara-custom-radio [type=radio]:checked + div:before {
  background: var(--gray-900);
  border-color: var(--accent);
}

/* Radio checked inner dot — accent color */
body.dark .vahara-custom-radio [type=radio]:checked + span:after,
body.dark .vahara-custom-radio [type=radio]:checked + div:after {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Radio unchecked hover */
body.dark .vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + span:hover:before,
body.dark .vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + div:hover:before {
  border-color: var(--gray-500);
}

/* Radio disabled unchecked */
body.dark .vahara-custom-radio [type=radio]:not(:checked):disabled + span:before,
body.dark .vahara-custom-radio [type=radio]:not(:checked):disabled + div:before {
  background: var(--gray-950);
  border-color: var(--gray-700) !important;
}

/* Radio disabled checked — muted solid teal */
body.dark .vahara-custom-radio [type=radio]:checked:disabled + span:before,
body.dark .vahara-custom-radio [type=radio]:checked:disabled + div:before {
  border-color: #0F4E47 !important;
}
body.dark .vahara-custom-radio [type=radio]:checked:disabled + span:after,
body.dark .vahara-custom-radio [type=radio]:checked:disabled + div:after {
  background-color: #0F4E47 !important;
  border-color: #0F4E47 !important;
}

/* File upload dropzone */
body.dark .vh-file-uploader {
  background-color: var(--gray-900);
}
body.dark .vh-file-uploader.dropzone-wrapper:hover {
  background-color: var(--gray-850, var(--gray-800)) !important;
}

/* File upload — file items (real component) */
body.dark .vh-file-item {
  background-color: var(--gray-900);
  border-color: var(--gray-800);
}

/* Tags input — container */
body.dark .bootstrap-tagsinput {
  background-color: var(--gray-900) !important;
  border-color: var(--gray-700) !important;
  color: var(--foreground) !important;
  -webkit-box-shadow: none !important;

  -moz-box-shadow: none !important;

  -webkit-box-shadow: none !important;


  -moz-box-shadow: none !important;


  box-shadow: none !important;
}
body.dark .bootstrap-tagsinput input {
  color: var(--foreground) !important;
}
body.dark .bootstrap-tagsinput input::placeholder {
  color: var(--gray-500) !important;
}
body.dark .bootstrap-tagsinput input::-webkit-input-placeholder {
  color: var(--gray-500) !important;
}

/* =============================================================================
   Dark mode — Headers
   ============================================================================= */

/* ── Project header (#sticky-header / standard-header) ──
   Dark-mode header/breadcrumb rules now live in page-header.css, alongside
   the rest of the header's paint. */

/* ── Simple / Focus layout (body.app-layout.vahara-colors) ── */
/* Ensure consistent dark background — no gray25/bg-white class on this body */
body.dark.app-layout {
    background-color: var(--background) !important;
}

/* ── Account header (.fixed-vahara-nav / app-standard-header) ── */

/* Navbar background */
body.dark .navbar.fixed-vahara-nav {
    background-color: var(--card) !important;
}

/* Account header popover (user menu) */
body.dark .popover.popover-menu {
    background-color: var(--card);
    border: 1px solid var(--border);
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

    -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);


    -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);


    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
body.dark .popover.popover-menu .popover-body {
    background-color: var(--card);
}
body.dark .popover-menu ul li a {
    color: var(--foreground);
}
body.dark .popover-menu ul li:hover {
    background-color: color-mix(in oklch, var(--primary) 10%, var(--card));
    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;


    -moz-border-radius: 4px;


    border-radius: 4px;
}
body.dark .popover-menu ul li:hover a {
    color: var(--foreground);
}
body.dark .popover-menu hr {
    border-color: var(--border);
}

/* ── Account header logo (logo-gray80.svg is dark — invert to near-white) ── */
body.dark .navbar.fixed-vahara-nav .nav-brand a img {
    filter: brightness(0) invert(1) opacity(0.9);
}
/* Vahara HQ logo-mark in the user popover menu (legacy monochrome SVG
   sibling entries, if any are ever added back -- the current Vahara HQ
   entry itself is now the colored .vahara-hq-avatar image below, which
   must NOT be inverted). */
body.dark .popover-menu .vahara-menu img:not(.vahara-hq-avatar) {
    filter: brightness(0) invert(1) opacity(0.75);
}
/* Vahara HQ project avatar -- a real dark-teal/mint image, not a themable
   monochrome glyph, so it must not pick up the invert-to-white treatment
   above (it did, when it briefly shared img.vahara-menu's default filter,
   and rendered as a blank white square in dark mode). */
/* The Vahara HQ project avatar. Lives here rather than inside
   app-standard-header's own <style> block: a rule scoped inside one
   component only reaches pages that render that component, and the
   account layout also needs this rounding. */
img.vahara-hq-avatar {
    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;


    -moz-border-radius: 5px;


    border-radius: 5px;
    object-fit: cover;
}

/* Never recolour it, in either theme. This is a real two-colour image, not a
   themable monochrome glyph, and every surface it sits on has an icon rule that
   assumes the latter:
     - the account dropdown inverts menu glyphs to white on dark
     - the sidebar recolours nav glyphs to gray-500 in BOTH themes, via
       `.sidebar-menu-container .main-menu li a img` (0,2,3)
   The sidebar rule is the reason for `!important` rather than a more specific
   selector. Beating (0,2,3) means either naming the sidebar here -- coupling this
   asset to one placement, so the next placement silently breaks the same way --
   or stacking the class three times, which reads as a puzzle. "This image is
   never filtered, wherever you put it" is a genuine invariant, so state it as one.

   Deliberately unscoped: the account layout's HQ entry is a bare <li> in the
   sidebar, not a .vahara-menu popover row, so any scoped guard misses it. */
img.vahara-hq-avatar {
    filter: none !important;
}

/* ── Page backgrounds — flip hardcoded palette classes to the semantic token ──
   Neither layout uses var(--background) directly:
     - account layout: body.bg-white  (Bootstrap, literal white)
     - app layout:     body.gray25    (palette class, var(--gray-25))
   These overrides make both use var(--background) in dark mode, which is the
   correct semantic token and already set to var(--gray-925) for dark. */
body.dark.bg-white,
body.dark.gray25 {
    background-color: var(--background) !important;
}
/* vahara-main-body-wrap has an inline background-color: var(--ghostwhite) — override it */
body.dark .vahara-main-body-wrap {
    background-color: var(--background) !important;
}

/* ── Main content area: axis-site sets var(--gray-0) via coconut — override for dark ── */
body.dark.axis-site .main-wrapper.coconut,
body.dark.axis-site .main-wrapper.coconut .main-content {
    background-color: var(--background) !important;
}
.table-responsive {
    width: auto;
    margin: 0 0px 0 -15px;
    padding-left: 0;
    min-width: 100%;
}

@media (max-width: 768px) {
    .table-responsive {
        margin: 0;
        padding: 0;
    }
}

/* Header rules moved intact to page-header.css. */

.modal-inner-section p {
    margin-bottom: 0 !important;
}

.modal-inner-section > .form-group:last-child {
    margin-bottom: 0%;
}

/* =============================================================================
   .vahara-color-selector — the swatch picker
   =============================================================================
   One page uses it (web/experience/configuration.blade.php) and that page also
   carries inline overrides for size, radius and the checked colour. Those
   overrides look like a full replacement and are not: they never restate
   `opacity: 0` on the native input, so without the rules below the real radio
   circles draw on top of the swatches.
   ========================================================================== */

span.vahara-color-selector-radio {
  display: none;
}

.vahara-color-selector input[type="radio"] {
  width: 92px;
  height: 92px;
  margin: 0;
  cursor: default;
  opacity: 0;
}

.vahara-color-selector input[type="radio"] + span.vahara-color-selector-radio {
  display: inline-block;
  width: 92px;
  height: 92px;
  background-color: var(--white);
  margin: 0px;
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  border-radius: 50%;
  -webkit-box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8);

  -moz-box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8);

  -webkit-box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8);


  -moz-box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8);


  box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.vahara-color-selector input[type="radio"]:checked + span.vahara-color-selector-radio,
.vahara-color-selector input[type="radio"]:hover + span.vahara-color-selector-radio {
  opacity: 1;
}

/* content: '.' with a transparent colour reserves the tick's box before there
   is a tick, so the swatch does not jump when it is selected. */
.vahara-color-selector input[type="radio"] + span.vahara-color-selector-radio::after {
  content: '.';
  color: transparent;
  position: absolute;
  display: block;
  width: 28px;
  height: 28px;
  margin: 28px 0 0 28px;
  opacity: 0.6;
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  border-radius: 50%;
  -webkit-transition: .2s;

  -moz-transition: .2s;

  -ms-transition: .2s;

  -webkit-transition: .2s;


  -moz-transition: .2s;


  -ms-transition: .2s;


  transition: .2s;
}

.vahara-color-selector input[type="radio"]:checked + span.vahara-color-selector-radio::after {
  width: 28px;
  height: 28px;
  margin: 32px 0 0 32px;
  background-color: rgba(51, 51, 51, .6);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);

  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);

  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);


  -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);


  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  content: "\f17b";
  font-family: 'lineAwesome';
  color: var(--white);
  padding: 2px 5px;
  font-size: 18px;
  opacity: 1;
}

/* =============================================================================
   Modal shell
   ========================================================================== */

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 16px !important;

  -moz-border-radius: 16px !important;

  -webkit-border-radius: 16px !important;


  -moz-border-radius: 16px !important;


  border-radius: 16px !important;
  outline: 0;
}

.modal-footer-section.margin-32 {
  margin: 32px 0;
}

.project-modal .project-title.mt-24 {
  margin-top: 24px;
}

.project-modal .project-title.mb-4 {
  margin-bottom: 4px !important;
}

/* ── File upload ──────────────────────────────────────────────────────────
   The control the design system prescribes: a dashed drop zone offering both
   an upload and a library path, above a list of chosen files.

   Lives here rather than scoped to the Controls page style block, so it is
   reusable elsewhere. The live item field still uses .vh-file-uploader, a
   different, older design; swapping it to this component is separate
   product work. .file-upload-input / .select-from-gallery-input in
   custom.css implement this same two-action idea but no markup uses
   them. */
.vh-upload-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.vh-upload-drop {
  position: relative;
  background: transparent;
  -webkit-border-radius: var(--radius-md);

  -moz-border-radius: var(--radius-md);

  -webkit-border-radius: var(--radius-md);


  -moz-border-radius: var(--radius-md);


  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px;
  cursor: pointer;
  -webkit-transition: background 0.15s ease;

  -moz-transition: background 0.15s ease;

  -ms-transition: background 0.15s ease;

  -webkit-transition: background 0.15s ease;


  -moz-transition: background 0.15s ease;


  -ms-transition: background 0.15s ease;


  transition: background 0.15s ease;
  outline: none;
}

.vh-upload-drop:hover,
.vh-upload-drop.is-drag-active {
  background: var(--gray-0);
}

/* Dashed outline as an SVG rather than a border, so the dash pattern stays
   even around the corner radius. */
.vh-upload-drop svg.vh-upload-outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.vh-upload-drop svg.vh-upload-outline rect {
  fill: none;
  stroke: var(--gray-200);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  rx: 8;
  ry: 8;
}

.vh-upload-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-500);
}

.vh-upload-action {
  text-decoration: none;
  color: var(--gray-500);
  cursor: pointer;
}

.vh-upload-action:hover {
  text-decoration: underline;
}

.vh-upload-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  background: var(--gray-25);
  -webkit-border-radius: var(--radius-md);

  -moz-border-radius: var(--radius-md);

  -webkit-border-radius: var(--radius-md);


  -moz-border-radius: var(--radius-md);


  border-radius: var(--radius-md);
  padding: 0 6px 0 12px;
  margin-bottom: 12px;
  -webkit-transition: opacity 0.15s ease;

  -moz-transition: opacity 0.15s ease;

  -ms-transition: opacity 0.15s ease;

  -webkit-transition: opacity 0.15s ease;


  -moz-transition: opacity 0.15s ease;


  -ms-transition: opacity 0.15s ease;


  transition: opacity 0.15s ease;
}

.vh-upload-file .btn {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.vh-upload-file-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
}

.vh-upload-file-name:hover {
  text-decoration: underline;
}

body.dark .vh-upload-file {
  background: var(--gray-800);
}

body.dark .vh-upload-file-name {
  color: var(--gray-300);
}

body.dark .vh-upload-drop:hover,
body.dark .vh-upload-drop.is-drag-active {
  background: var(--gray-850, var(--gray-900));
}

body.dark .vh-upload-drop svg.vh-upload-outline rect {
  stroke: var(--gray-600);
}

body.dark .vh-upload-label {
  color: var(--muted-foreground);
}

body.dark .vh-upload-text {
  color: var(--gray-400);
}

/* ─── Popover menu — React renderer parity ──────────────────────────────────
   PopoverMenu.js emits `popover popover-menu show ds-react-menu-popover`, so
   the .popover-menu rules above already cover it. These selectors are the
   safety net: page-level scripts have been observed stripping `popover-menu`
   off every .popover in the document (see style/components.blade.php), which
   silently removed React menus from the theme. Matching ds-react-menu-popover
   directly means React styling no longer depends on that class surviving.
   Keep these values identical to the .popover-menu block above.
   ------------------------------------------------------------------------ */
.popover.ds-react-menu-popover {
  width: 240px;
  padding: 0 !important;
  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);

  -webkit-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  -moz-box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);


  box-shadow: 1px 2px 12px rgba(26, 26, 26, 0.2);
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  border-radius: 10px;
  border: none !important;
  background: var(--popover);
  color: var(--popover-foreground);
}

.popover.ds-react-menu-popover .popover-body {
  padding: 8px;
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  border-radius: 10px;
  background: var(--popover);
  color: var(--popover-foreground);
}

.popover.ds-react-menu-popover .top-label-28,
.popover.ds-react-menu-popover .top-label-32 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0;
}

.popover.ds-react-menu-popover .top-label-28 { padding: 6px 8px; }
.popover.ds-react-menu-popover .top-label-32 { padding: 7.5px 8px 8.5px; }

/* Menus have no caret. This was a showroom-only JS call —
   $pop.find('.arrow').hide() in style/components.blade.php — so every menu
   outside the design-system page grew an arrow the design never had.
   Scoped to menus: tooltips and .popover-table keep theirs. */
.popover.popover-menu > .arrow,
.popover.popover-menu > .popover-arrow,
.popover.ds-react-menu-popover > .arrow,
.popover.ds-react-menu-popover > .popover-arrow {
  display: none;
}

/* Trigger wrapper — was only defined in js/components/Styles/pageTitleStyles.css,
   so React menus on pages that did not import that file had no pointer handling.

   The wrapper (`.ds-react-menu-trigger-wrap`, a <span> — see
   Common/PopoverMenu.js) is `d-inline-flex position-relative`, so its own
   box can be slightly larger than the trigger it contains. Blocking pointer
   events on the wrapper keeps that box from stealing clicks meant for
   whatever sits behind/beside it; re-enabling pointer events on its content
   restores the trigger's own clickability.

   Re-enabling pointer events targets the wrapper's actual content rather
   than a hardcoded allowlist of selectors, so any trigger element works
   regardless of tag or class. PopoverMenu.js only ever renders
   one direct child into this wrapper (the trigger element — the menu
   overlay is a React portal onto document.body, so it never lives inside
   this wrapper in the DOM), so re-enabling pointer events on any direct
   child covers every trigger regardless of tag or class. */
.ds-react-menu-trigger-wrap { pointer-events: none; }
.ds-react-menu-trigger-wrap > * { pointer-events: auto; }

/* Danger item — the showroom turned the label destructive on hover while
   dataTableStyles.css forced it back to near-black. Destructive wins. */
.ds-menu-item-danger .ds-react-menu-item-label,
.ds-menu-item-danger a { color: var(--popover-foreground); }

.ds-menu-item-danger:hover .ds-react-menu-item-label,
.ds-menu-item-danger:focus .ds-react-menu-item-label,
.ds-menu-item-danger:hover a,
.ds-menu-item-danger:focus a { color: var(--destructive); }

/* ─── Popover menu — interior ───────────────────────────────────────────────
   Promoted out of resources/views/web/style/components.blade.php, where it
   lived as the showroom-only modifiers .ds-menu-dark and
   .ds-menu-selection-popover. Those made the design-system page look right
   while every real menu rendered an older treatment.

   Deliberately keyed off the controls themselves rather than a variant class
   on the container: a menu that contains a radio IS a selection menu. Both
   the Blade and the React renderer therefore get this with no class to
   remember and no way to get it wrong.

   The !important flags are carried over verbatim from the source. Most are
   fighting checkbox-radio-variants.css rather than Bootstrap and could likely
   be dropped, but that is a separate change with its own before/after pass.
   ------------------------------------------------------------------------ */

.popover.popover-menu hr,
.popover.ds-react-menu-popover hr {
  border: none;
  border-bottom: 1px solid var(--border);
  margin: 8px 0;
}

.popover.popover-menu ul li,
.popover.popover-menu ul li a,
.popover.popover-menu ul li span,
.popover.ds-react-menu-popover ul li,
.popover.ds-react-menu-popover ul li a,
.popover.ds-react-menu-popover ul li span {
  color: var(--popover-foreground);
}

.popover.popover-menu .ds-sort-item.ds-sort-active {
  background: transparent;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}
.popover.popover-menu .ds-sort-item.ds-sort-active:hover {
  background: var(--muted);
}

/* Row height. The showroom set this inline via jQuery (minHeight: '34px'),
   so rows only held their height on the design-system page. */
.popover.popover-menu ul li,
.popover.ds-react-menu-popover ul li {
  min-height: 34px;
}

/* Rows carrying a control on the RIGHT: a plain wrapper div holding a label
   and, after it, the control. Excludes rows where the control itself is the
   row's direct child — that is the control-on-the-LEFT pattern (a radio list
   like My Projects' Sort by), which must not be stretched or indented.

   padding: 0 overrides the legacy ":first-child:not(a)" rule above (kept for
   .vahara-menu variants, whose own li padding is only 6px) — the li already
   supplies the row's 8px inset, so this wrapper must add none of its own or
   the row's label sits 8px deeper than the section label above it. */
.popover.popover-menu ul li > div:not([class]),
.popover.ds-react-menu-popover ul li > div:not([class]) {
  min-height: 20px;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popover.popover-menu ul li > div > .vahara-custom-radio,
.popover.popover-menu ul li > div > .vahara-custom-checkbox,
.popover.ds-react-menu-popover ul li > div > .vahara-custom-radio,
.popover.ds-react-menu-popover ul li > div > .vahara-custom-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 12px !important;
  flex-shrink: 0;
}

.popover.popover-menu .vahara-custom-radio label,
.popover.popover-menu .vahara-custom-checkbox label,
.popover.ds-react-menu-popover .vahara-custom-radio label,
.popover.ds-react-menu-popover .vahara-custom-checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.popover.popover-menu .vahara-custom-radio div,
.popover.popover-menu .vahara-custom-checkbox div,
.popover.ds-react-menu-popover .vahara-custom-radio div,
.popover.ds-react-menu-popover .vahara-custom-checkbox div {
  position: relative;
}

.popover.popover-menu ul li > div > .vh-checkbox-input,
.popover.ds-react-menu-popover ul li > div > .vh-checkbox-input {
  width: 24px !important;
  min-width: 24px !important;
  height: 20px !important;
  margin-left: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex-shrink: 0;
}

.popover.popover-menu .vh-checkbox-input > label,
.popover.ds-react-menu-popover .vh-checkbox-input > label {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  height: 16px !important;
}

.popover.popover-menu .vh-switch,
.popover.popover-menu .vh-switch.s,
.popover.ds-react-menu-popover .vh-switch,
.popover.ds-react-menu-popover .vh-switch.s {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 16px !important;
  vertical-align: middle !important;
  position: relative;
}

.popover.popover-menu .vh-switch .slider,
.popover.ds-react-menu-popover .vh-switch .slider {
  width: 24px !important;
  height: 16px !important;
  top: 50% !important;
  left: 0;
  right: 0;
  bottom: auto;
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
}

.popover.popover-menu .vh-switch .slider:before,
.popover.ds-react-menu-popover .vh-switch .slider:before {
  width: 16px !important;
  height: 16px !important;
}

/* Footer action — a full-width button pinned under the list */
.popover.popover-menu .popover-menu-footer,
.popover.ds-react-menu-popover .popover-menu-footer {
  padding: 0 !important;
}
.popover.popover-menu .popover-menu-footer .btn,
.popover.ds-react-menu-popover .popover-menu-footer .btn {
  width: 100%;
  margin: 0 !important;
  min-height: 40px;
}

/* ─── Popover menu — row links and icons ────────────────────────────────────
   Restored from the deleted showroom blocks. The Blade renderer had these as
   jQuery .css() calls and React had them in _menus.blade.php; neither shipped.
   Written once here for both renderers, with the theme's filter tokens in
   place of the hardcoded filter() strings the originals carried.
   ------------------------------------------------------------------------ */

.popover.popover-menu ul li a,
.popover.popover-menu ul li button.ds-sort-link,
.popover.ds-react-menu-popover ul li a,
.popover.ds-react-menu-popover ul li button.ds-sort-link {
  min-height: 20px;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  color: var(--popover-foreground);
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.01em;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
  outline: none;
}

.popover.popover-menu ul li a:hover,
.popover.popover-menu ul li a:focus,
.popover.popover-menu ul li button.ds-sort-link:hover,
.popover.popover-menu ul li button.ds-sort-link:focus,
.popover.ds-react-menu-popover ul li a:hover,
.popover.ds-react-menu-popover ul li a:focus,
.popover.ds-react-menu-popover ul li button.ds-sort-link:hover,
.popover.ds-react-menu-popover ul li button.ds-sort-link:focus {
  text-decoration: none;
  color: var(--popover-foreground);
  background: transparent;
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
  outline: none;
}

/* Icons. A leading glyph is 20px with a 12px gutter; a trailing one is 14px
   and pushed to the far edge. */
.popover.popover-menu ul li a img,
.popover.popover-menu ul li > div img,
.popover.ds-react-menu-popover ul li a img,
.popover.ds-react-menu-popover ul li > div img {
  width: 20px;
  flex-shrink: 0;
}

.popover.popover-menu ul li a img:first-child:not(.icon-end),
.popover.ds-react-menu-popover ul li a img:first-child:not(.icon-end) {
  margin-right: 12px;
}

.popover.popover-menu ul li a img.icon-end,
.popover.ds-react-menu-popover ul li a img.icon-end {
  width: 14px;
  margin-left: auto;
  margin-right: 0 !important;
  filter: var(--gray-250-filter);
}

.popover.popover-menu ul li:hover a img.icon-end,
.popover.ds-react-menu-popover ul li:hover a img.icon-end {
  filter: var(--gray-500-filter);
}

.popover.popover-menu ul li a img.vh-icon-dark-hover:first-child:not(.icon-end),
.popover.ds-react-menu-popover ul li a img.vh-icon-dark-hover:first-child:not(.icon-end) {
  filter: var(--gray-500-filter);
}

.popover.popover-menu ul li:hover a img.vh-icon-dark-hover:first-child:not(.icon-end),
.popover.ds-react-menu-popover ul li:hover a img.vh-icon-dark-hover:first-child:not(.icon-end) {
  filter: var(--gray-950-filter);
}

.popover.popover-menu .ds-menu-item-danger:hover img:first-child:not(.icon-end),
.popover.ds-react-menu-popover .ds-menu-item-danger:hover img:first-child:not(.icon-end) {
  filter: var(--destructive-filter, invert(57%) sepia(99%) saturate(370%) hue-rotate(329deg) brightness(103%) contrast(102%));
}

/* ─── Popover menu — dark ─────────────────────────────────────────────────── */

body.dark .popover.popover-menu,
body.dark .popover.ds-react-menu-popover,
body[data-theme="dark"] .popover.popover-menu,
body[data-theme="dark"] .popover.ds-react-menu-popover {
  -webkit-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);

  -moz-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);

  -webkit-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);


  -moz-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);


  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

body.dark .popover.popover-menu .vahara-custom-radio [type=radio] + span,
body.dark .popover.popover-menu .vahara-custom-radio [type=radio] + div,
body.dark .popover.popover-menu .vahara-custom-checkbox label div,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio] + span,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio] + div,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-checkbox label div {
  color: var(--gray-50) !important;
}

body.dark .popover.popover-menu .vahara-custom-radio [type=radio] + span:before,
body.dark .popover.popover-menu .vahara-custom-radio [type=radio] + div:before,
body.dark .popover.popover-menu .vahara-custom-checkbox [type=checkbox] + div:before,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio] + span:before,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio] + div:before,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-checkbox [type=checkbox] + div:before {
  background: var(--gray-925) !important;
  border-color: var(--gray-600) !important;
}

body.dark .popover.popover-menu .vahara-custom-radio [type=radio]:checked + span:before,
body.dark .popover.popover-menu .vahara-custom-radio [type=radio]:checked + div:before,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio]:checked + span:before,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio]:checked + div:before {
  background: var(--gray-925) !important;
  border-color: var(--accent) !important;
}

body.dark .popover.popover-menu .vahara-custom-radio [type=radio]:checked + span:after,
body.dark .popover.popover-menu .vahara-custom-radio [type=radio]:checked + div:after,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio]:checked + span:after,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio]:checked + div:after {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

body.dark .popover.popover-menu .vahara-custom-checkbox [type=checkbox]:checked + div:before,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-checkbox [type=checkbox]:checked + div:before {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

body.dark .popover.popover-menu .vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + span:hover:before,
body.dark .popover.popover-menu .vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + div:hover:before,
body.dark .popover.popover-menu .vahara-custom-checkbox [type=checkbox]:not(:checked):not(:disabled) + div:hover:before,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + span:hover:before,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-radio [type=radio]:not(:checked):not(:disabled) + div:hover:before,
body[data-theme="dark"] .popover.popover-menu .vahara-custom-checkbox [type=checkbox]:not(:checked):not(:disabled) + div:hover:before {
  border-color: var(--gray-500) !important;
}

body.dark .popover.popover-menu .vh-switch .slider,
body[data-theme="dark"] .popover.popover-menu .vh-switch .slider {
  background-color: var(--gray-600) !important;
}
body.dark .popover.popover-menu .vh-switch .slider:before,
body[data-theme="dark"] .popover.popover-menu .vh-switch .slider:before {
  background-color: var(--gray-0) !important;
  border-color: var(--gray-600) !important;
}
body.dark .popover.popover-menu .vh-switch input:not(:checked) + .slider:hover,
body[data-theme="dark"] .popover.popover-menu .vh-switch input:not(:checked) + .slider:hover {
  background-color: var(--gray-500) !important;
  border-color: var(--gray-500) !important;
}
body.dark .popover.popover-menu .vh-switch input:checked + .slider,
body[data-theme="dark"] .popover.popover-menu .vh-switch input:checked + .slider {
  background-color: var(--accent) !important;
}
body.dark .popover.popover-menu .vh-switch input:checked + .slider:before,
body[data-theme="dark"] .popover.popover-menu .vh-switch input:checked + .slider:before {
  border-color: var(--accent) !important;
}

@media (min-width: 993px) {
  body.settings-layout .settings-sidebar {
    left: 0;
  }
  /* Reserve the fixed panel's existing width in the content column. */
  body.settings-layout:not(.settings-embedded) #main-wrapper {
    margin-left: 256px !important;
  }
}
@media (max-width: 992px) {
  body.settings-layout .settings-sidebar {
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);
    min-height: 0;
  }
}

/* Settings switches use the existing menu row with neutral button chrome. */
.settings-sidebar :where(.menu-item.btn-toggle-superuser) {
  width: 100%;
  border: 0;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
}
.settings-sidebar .btn-toggle-superuser img {
  filter: var(--gray-500-filter);
}
.settings-sidebar .menu-item.btn-toggle-superuser.sys-mode-on {
  color: var(--warning);
}
/* The shared sys-mode-on wash must not override settings menu states. */
.settings-sidebar .menu-item.btn-toggle-superuser:hover {
  background-color: var(--gray-50) !important;
}
body.dark .settings-sidebar .menu-item.btn-toggle-superuser:hover {
  background-color: color-mix(in srgb, var(--gray-0) 5%, transparent) !important;
}
.settings-sidebar .menu-item.btn-toggle-superuser:active,
.settings-sidebar .menu-item.btn-toggle-superuser:focus,
.settings-sidebar .menu-item.btn-toggle-superuser:focus-within {
  background-color: var(--border) !important;
}
body.dark .settings-sidebar .menu-item.btn-toggle-superuser:active,
body.dark .settings-sidebar .menu-item.btn-toggle-superuser:focus,
body.dark .settings-sidebar .menu-item.btn-toggle-superuser:focus-within {
  background-color: var(--sidebar-accent) !important;
}
.settings-sidebar .btn-toggle-superuser:focus-visible {
  outline: var(--border-width-thick) solid var(--sidebar-ring);
  outline-offset: var(--border-width-thick);
}
.settings-sidebar .menu-rule {
  height: 0;
  min-height: 0;
  border-top: var(--border-width-thin) solid var(--sidebar-border);
  margin: var(--space-3) 0;
}

/* Gated settings links reserve a trailing slot without moving their labels. */
.settings-sidebar .vh-gated-row {
  position: relative;
  padding-right: calc(var(--space-3) + var(--space-2) + 6px);
}
.settings-sidebar .vh-gate-dot {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  -webkit-border-radius: var(--radius-full);

  -moz-border-radius: var(--radius-full);

  -webkit-border-radius: var(--radius-full);


  -moz-border-radius: var(--radius-full);


  border-radius: var(--radius-full);
  background-color: var(--warning);
  pointer-events: none;
}

/* The retained beta-mode hook carries legacy colours; settings use their row palette. */
.settings-sidebar .menu-item.btn-toggle-superuser:not(.sys-mode-on) {
  color: var(--gray-900) !important;
}
.settings-sidebar .menu-item.btn-toggle-superuser:not(.sys-mode-on) img {
  filter: var(--gray-900-filter) !important;
}
body.dark .settings-sidebar .menu-item.btn-toggle-superuser:not(.sys-mode-on) {
  color: var(--sidebar-foreground) !important;
}
body.dark .settings-sidebar .menu-item.btn-toggle-superuser:not(.sys-mode-on) img {
  filter: var(--gray-400-filter) !important;
}
.settings-sidebar .menu-item.btn-toggle-superuser.sys-mode-on img {
  filter: var(--warning-filter) !important;
}

/* End import from ./components/custom.css */
/* Imported from ./components/tags-input.css */
/* bootstrap-tagsinput plugin, themed to match the design-system field treatment
   and the .vh-indicator.vh-solid.vh-rect.tone-primary chip (see badges.css).
   The vendor stylesheet is <link>ed from
   inside individual page blades, so it loads AFTER this theme file -- these
   selectors are doubled up on purpose to win on specificity instead of load
   order, without resorting to !important. */
.bootstrap-tagsinput.bootstrap-tagsinput {
    background-color: var(--gray-0, #fff);
    border: 1.5px solid var(--gray-150);
    -webkit-border-radius: var(--radius-lg);

    -moz-border-radius: var(--radius-lg);

    -webkit-border-radius: var(--radius-lg);


    -moz-border-radius: var(--radius-lg);


    border-radius: var(--radius-lg);
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;


    -moz-box-shadow: none;


    box-shadow: none;
    height: auto;
    min-height: 80px;
    padding: 10px;
}

.bootstrap-tagsinput.bootstrap-tagsinput .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    margin: 0 6px 6px 0;
    -webkit-border-radius: var(--radius);

    -moz-border-radius: var(--radius);

    -webkit-border-radius: var(--radius);


    -moz-border-radius: var(--radius);


    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.bootstrap-tagsinput.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "\00d7";
    padding: 0 2px;
    /* Same glyph, same font stack as the Manage Tags modal's × (see
       project/index.blade.php's .btn-remove-manage-tag::after) -- nudged
       down to optically match the label text's ink-centre for the same
       font-metric reason. */
    position: relative;
    top: 2px;
}

/* Remove (×) control: a bare glyph, not a button tile. The vendor plugin's
   own stylesheet (public/js/libs/bootstrap-tagsinput/.../bootstrap-tagsinput.css)
   gives [data-role="remove"]:hover a box-shadow "highlight" -- a sharp-
   edged rectangle that doesn't match this chip's rounded corners and reads
   as a rendering bug rather than a designed hover state. Overridden here
   (doubled specificity per this file's own convention above) to conform to
   the design system's documented tag-chip removal treatment instead of
   inventing a new one: resources/views/web/style/sections/_tags.blade.php's
   .ds-react-tag-remove -- opacity 0.5 at rest, 0.9 on hover, no background. */
.bootstrap-tagsinput.bootstrap-tagsinput .tag [data-role="remove"] {
    opacity: 0.5;
}

.bootstrap-tagsinput.bootstrap-tagsinput .tag [data-role="remove"]:hover,
.bootstrap-tagsinput.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;


    -moz-box-shadow: none;


    box-shadow: none;
    opacity: 0.9;
}

/* End import from ./components/tags-input.css */
/* Imported from ./components/modals.css */
/* Shared modal footer button row -- see docs/design-system/modals.md */
.ds-modal-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.ds-modal-footer-row--end {
    justify-content: flex-end;
}
.ds-modal-footer-row .btn {
    margin: 0 !important;
}

/* Field labels keep the field system's colour inside a modal.
   custom.css has `.project-modal .modal-inner-section label { color: inherit }`
   so modal body copy follows the modal's own text colour -- but that selector
   (0,3,0) also catches .field-group label, which is a field-system element
   styled by fields.css (0,2,0) and loses. The result: labels render near-black
   inside a modal and --gray-500 everywhere else, from identical markup.
   Restores the field rule at higher specificity rather than weakening the modal
   reset, which other modal content still relies on.

   Note .exterior-label, which these labels also carry, has no CSS anywhere in
   the theme or the built bundle -- it is inert. The colour comes from
   .field-group label. */
.project-modal .modal-inner-section .field-group label,
.project-modal .modal-inner-section .form-group label {
  color: var(--gray-500);
}

/* End import from ./components/modals.css */
/* Imported from ./components/avatar-crop-modal.css */
/* Shared avatar/logo crop modal (Blade: components.avatar-crop-modal, JS:
   /js/avatar-crop-modal.js). One modal, reused by the profile photo (circle
   crop), and the project and organization avatar uploaders (square crop) --
   see docs/design.md §7 for the base modal component this extends.

   Redesign, 2026-08-27 (Paul's feedback): the old per-page modal was
   modal-412 (a near-square 412px dialog) with Cropper forced to a 300px
   minimum inside it, and the base .modal-dialog rule below forces every
   modal to min-height: 80vh and vertically centers its content -- so a short
   dialog sits pinned in the middle of a mostly-empty 80vh box. That's the
   "dead space above and below" complaint. This class widens the dialog
   (modal-lg, via modalSize) and unpins its height so it hugs its content
   instead of an 80vh floor. */

.project-modal.avatar-crop-modal .modal-dialog {
  min-height: auto;
}

/* Default modalSize content padding is 16px each side (.vh-modal-content.px-4)
   from a plain .col-md-12, which also carries Bootstrap's own 15px column
   gutter underneath it -- inconsistent, and not the "bad left/right padding"
   Paul flagged. contentClasses overrides px-4 with this class instead so the
   modal has one deliberate, even gutter tied to a real space token. */
.avatar-crop-modal-content {
  padding-left: var(--space-6) !important;
  padding-right: var(--space-6) !important;
  margin-top: var(--space-3) !important;
}

/* Cropper stage: the rounded, recessed frame the image sits inside. Fixed
   height rather than the old 300px *minimum* squeezed into a 412px-wide
   modal -- at modal-lg's width there is room for a real working area, and a
   deliberate height means the stage no longer just inherits whatever
   Cropper's default container math produces. */
.avatar-crop-stage {
  position: relative;
  width: 100%;
  height: 420px;
  -webkit-border-radius: var(--radius-xl);

  -moz-border-radius: var(--radius-xl);

  -webkit-border-radius: var(--radius-xl);


  -moz-border-radius: var(--radius-xl);


  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-canvas);
}

.avatar-crop-stage img {
  display: block;
  max-width: 100%;
}

/* Circular crop overlay -- profile photos only. Cropper.js has no built-in
   circle mode; this is its own documented technique: round the two elements
   that actually paint the selection (the highlighted view of the image, and
   the dark overlay's cut-out face), leaving the crop *box* and its handles
   square underneath. The output crop is still a square image -- the circle
   is a preview affordance for "this is what will show in a round avatar",
   not a different export shape.

   Modifier lives on modalExtraClass (avatar-crop-modal--circle /
   avatar-crop-modal--square) rather than a data attribute -- the shared
   components.modal shell has no slot for passing arbitrary data-* onto its
   outer element, only modalExtraClass's raw class string. */
.avatar-crop-modal--circle .cropper-view-box,
.avatar-crop-modal--circle .cropper-face {
  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;


  -moz-border-radius: 50%;


  border-radius: 50%;
}

/* Square variant (project/organization avatars): explicit rule so the shape
   is a real branch here, not "circle plus an unstyled default" -- matches
   the rounded-square avatars those two surfaces already render avatars as
   (var(--radius-xl), same token used by organizations/view.blade.php's
   .vh-org-profile-wrapper). */
.avatar-crop-modal--square .cropper-view-box,
.avatar-crop-modal--square .cropper-face {
  -webkit-border-radius: var(--radius-xl);

  -moz-border-radius: var(--radius-xl);

  -webkit-border-radius: var(--radius-xl);


  -moz-border-radius: var(--radius-xl);


  border-radius: var(--radius-xl);
}

/* More breathing room between the cropper and the footer buttons (Paul's
   explicit ask). The base modal component's .vh-modal-buttons already gets
   margin-top: 8px from .col-md-12.gap-8 -- not enough once the tool itself
   reads as a real editing surface rather than a cramped square. */
.avatar-crop-modal .vh-modal-buttons {
  margin-top: var(--space-8) !important;
}

/* Loading indicator shown on the stage while a picked file is being read /
   an existing image is being re-fetched for Edit. Cropper itself has
   nothing to size against until the image has real, decoded dimensions
   (see the JS), so this covers that gap instead of a blank stage. */
.avatar-crop-stage-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
}

/* Tooltip icon next to an avatar field's label (Profile image / Avatar) --
   Paul's feedback, 2026-08-27: it read darker than the label text beside it.
   fields.css's `[data-toggle="tooltip_custom"] { color: inherit }` rule only
   applies inside a `.field-group label` / `.form-group label` ancestor (see
   docs/design.md §12); these three avatar fields use a plain label-styled
   div, not a real <label>, so that rule never matched and the icon fell back
   to the page's default text colour. Explicit rule here instead of inline
   styles on three separate pages -- shared because the trap is shared. */
.vh-field-tooltip-icon {
  color: var(--gray-500);
}

/* Edit / Remove link row under an avatar tile. "Edit" (new, 2026-08-27) sits
   beside the existing "Remove" link on all three surfaces. Each page keeps
   its own colour/hover/type rule on the buttons themselves
   (my-account/index.blade.php's .vh-avatar-remove-link,
   organizations/view.blade.php's .vh-org-profile-remove,
   project-settings.blade.php's .gs-avatar-remove-link -- all three already
   share the same block/96px/-6px-margin shape by design) -- this row only
   overrides that shape generically, by child selector, so it isn't coupled
   to any one page's class name. */
.vh-avatar-link-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 96px;
  margin-top: -6px;
}

.vh-avatar-link-row > button,
.vh-avatar-link-row > a {
  display: inline;
  width: auto;
  margin-top: 0;
}

.vh-avatar-link-sep {
  color: var(--gray-300);
}

/* End import from ./components/avatar-crop-modal.css */
/* Imported from ./components/callout.css */
/* Callout
   -------
   An inline block that pairs a short explanation with an action. Use it where a
   section needs to state a consequence before the user acts -- not for transient
   feedback, which is a toast (components/notifications.css).

   Structure:
     .vh-callout                     flex row: [icon] [body] [action]
       .vh-callout-icon              optional, 20px, aligns to the title line
       .vh-callout-body
         .vh-callout-title           .body-semibold
         .vh-callout-text            .body-small (colour comes from this file)
       .vh-callout-action            button, vertically centred

   Modifiers:
     .bordered      a 1px --gray-150 stroke on an 8px radius, no fill. Separates the
                    block from the section around it without adding colour weight.
                    This is the default choice inside a .pane that already has a heading.
     .destructive   --destructive-50 fill with a --destructive-100 hairline, for when
                    the consequence needs more weight than a stroke can carry.

   Example (Account Settings -> Delete Account):
     <div class="vh-callout bordered">
       <div class="vh-callout-body">
         <p class="body-semibold vh-callout-title">Delete this account</p>
         <p class="body-small vh-callout-text">...</p>
       </div>
       <button type="button" class="btn btn-m btn-destructive vh-callout-action">Delete account</button>
     </div> */

.vh-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.vh-callout-body {
  flex: 1 1 auto;
  min-width: 0;
}

.vh-callout-title {
  margin: 0 0 2px;
}

.vh-callout-text {
  margin: 0;
  /* Explicit rather than inherited. This previously relied on .text-gray700 in the
     markup, which renders lch(31) -- darker than the --muted-foreground labels
     around it, so 15px copy read a size larger than it was. --muted-foreground is
     also theme-aware (gray-500 light / gray-400 dark); .text-gray700 is not. */
  color: var(--muted-foreground);
  /* Even out the line lengths instead of filling the first line and orphaning a
     short second one. Ignored by browsers without support -- normal wrapping. */
  text-wrap: balance;
}

/* 2px nudge aligns the glyph to the title cap-height rather than its line box top. */
.vh-callout-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.vh-callout-action {
  flex: 0 0 auto;
  align-self: center;
}

/* Inset ring rather than `border`, so adding the modifier never changes the box size. */
.vh-callout.bordered {
  padding: 16px;
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 0 1px var(--gray-150);

  -moz-box-shadow: inset 0 0 0 1px var(--gray-150);

  -webkit-box-shadow: inset 0 0 0 1px var(--gray-150);


  -moz-box-shadow: inset 0 0 0 1px var(--gray-150);


  box-shadow: inset 0 0 0 1px var(--gray-150);
}

.vh-callout.destructive {
  padding: 16px;
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  border-radius: 8px;
  background: var(--destructive-50);
  -webkit-box-shadow: inset 0 0 0 1px var(--destructive-100);

  -moz-box-shadow: inset 0 0 0 1px var(--destructive-100);

  -webkit-box-shadow: inset 0 0 0 1px var(--destructive-100);


  -moz-box-shadow: inset 0 0 0 1px var(--destructive-100);


  box-shadow: inset 0 0 0 1px var(--destructive-100);
}

@media (max-width: 767px) {
  .vh-callout {
    flex-wrap: wrap;
  }
  .vh-callout-action {
    align-self: flex-start;
  }
}

/* End import from ./components/callout.css */
/* Imported from ./components/elements.css */
.change-btn-color {
  border-color: #8A8D8E !important;
}

.search-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--black);
  margin-bottom: -16px;
  margin-top: 41px;
}

.search-list .search-container {
  height: 100%;
  align-items: center;
  flex-wrap: nowrap;
  padding-left: 28px;
  padding-right: 28px;
}

.rounded-30 {
  -webkit-border-radius: 30px !important;

  -moz-border-radius: 30px !important;

  -webkit-border-radius: 30px !important;


  -moz-border-radius: 30px !important;


  border-radius: 30px !important;
}

.rounded-right-30 {
  border-top-right-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
}

.search-title {
  font-weight: 600;
  font-size: 16px;
}

/* Icon is positioned absolutely so it never moves */
.search-list .search-container .btn-searchIcon {
  position: absolute;
  left: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  z-index: 1;
}

/* Search icon (search.svg is a 24x24 asset with no size class in any
   consumer's markup) sized to match the icon-s (20x20) convention used
   by neighbouring functional icons (menu/action icons throughout the
   header, field lists, etc.). Scoped to .btn-searchIcon img only, which
   only ever wraps the magnifying-glass glyph -- .close-searchIcon is a
   sibling, not a descendant, so this cannot affect the x/close icon. */
.btn-searchIcon img {
  width: 20px;
  height: 20px;
}

.search-list {
  height: 36px;
  -webkit-border-radius: 40px;

  -moz-border-radius: 40px;

  -webkit-border-radius: 40px;


  -moz-border-radius: 40px;


  border-radius: 40px;
  padding: 8px 12px;
  width: 44px;
  border: 1.5px solid transparent;
  margin-left: auto;
  -webkit-transition: width .2s ease-out;

  -moz-transition: width .2s ease-out;

  -ms-transition: width .2s ease-out;

  -webkit-transition: width .2s ease-out;


  -moz-transition: width .2s ease-out;


  -ms-transition: width .2s ease-out;


  transition: width .2s ease-out;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.search-list .close-searchIcon {
  display: inline-flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.active-search.search-list .close-searchIcon {
  pointer-events: auto;
}

/* Expandable search: match open search bar text size */
.search-list .search-control {
  font-size: 15px !important;
}

/* Expandable search: match open search placeholder color */
.search-list .search-control::placeholder {
  color: var(--gray-300) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Expandable search: arrow cursor on icon when open */
.active-search.search-list .btn-searchIcon,
.active-search.search-list .btn-searchIcon * {
  cursor: default !important;
}

.search-bar {
  max-width: 264px;
}

.search-bar .close-searchIcon {
  display: none;
  padding-right: 8px;
}

.search-bar .close-searchIcon.active, .search-bar input:not(:placeholder-shown):has(~ .close-searchIcon) + .close-searchIcon {
  display: inline-flex;
  height: 29px;
  align-items: center;
  justify-content: center;
}

.search-bar .close-searchIcon img {
  width: 18px !important;
  height: 18px !important;
}

.active-search.search-list .close-searchIcon {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);


  -moz-transform: translateY(-50%);


  -ms-transform: translateY(-50%);


  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.active-search.search-bar .close-searchIcon {
  cursor: pointer;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.active-search .close-searchIcon img {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.search-bar .input-group {
  padding-left: 12px;
}

.active-search {
  width: 100%;
}

.active-search.search-list {
  width: 264px;
  background-color: white;
  -webkit-transition: width .3s ease-out;

  -moz-transition: width .3s ease-out;

  -ms-transition: width .3s ease-out;

  -webkit-transition: width .3s ease-out;


  -moz-transition: width .3s ease-out;


  -ms-transition: width .3s ease-out;


  transition: width .3s ease-out;
}

.search-control,
.search-control:focus,
.search-control:active {
  font-size: 14px;
  color: var(--black) !important;
  z-index: unset !important;
  border-bottom: 0 !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  padding: 0 !important;
}

.search-control::placeholder {
  color: var(--gray-300) !important;
  font-weight: 500 !important;
}

.active-search .search-control {
  padding: 0 !important;
  opacity: unset !important;
  height: 32px;
  cursor: text !important;
}

.rounded-24 {
  -webkit-border-radius: 24px !important;

  -moz-border-radius: 24px !important;

  -webkit-border-radius: 24px !important;


  -moz-border-radius: 24px !important;


  border-radius: 24px !important;
}

.search-two .input-group, .search-bar .input-group, .active-search.search-list {
  border: 1.5px solid var(--gray-50) !important;
  height: 36px;
}

.search-two .input-group:hover, .search-bar .input-group:hover, .active-search.search-list:hover {
  border-color: var(--gray-50) !important;
}

/* :focus-within added 2026-08-21. The rule was :active/:focus only, so the
   border darkened while the mouse was held and reverted on release — even
   when the input inside was genuinely focused. See the click-to-focus handler
   in resources/assets/scripts/app/app.js, which is the other half of this. */
.search-two .input-group:active, .search-two .input-group:focus, .search-two .input-group:focus-within, .search-bar .input-group:active, .search-bar .input-group:focus, .search-bar .input-group:focus-within, .active-search.search-list:active, .active-search.search-list:focus, .active-search.search-list:focus-within {
  border-color: var(--gray-400) !important;
}

.search-two .input-group input, .search-bar .input-group input, .active-search.search-list input {
  height: 32px !important;
}

.search-two .input-group input.form-control, .search-bar .input-group input.form-control, .active-search.search-list input.form-control {
  margin-left: 10px !important;
}

.active-search.search-list.change-btn-color,
.active-search.search-list.change-btn-color,
.change-btn-color .input-group,
.change-btn-color .input-group {
  border: 1.5px solid var(--gray-200) !important;
}

.active-search.search-list.change-btn-color:hover:not(.search-active),
.active-search.search-list.change-btn-color:hover:not(.search-active),
.change-btn-color .input-group:hover:not(.search-active),
.change-btn-color .input-group:hover:not(.search-active) {
  border: 1.5px solid var(--gray-200) !important;
}

.active-search.search-list.change-btn-color input,
.active-search.search-list.change-btn-color input,
.change-btn-color .input-group input,
.change-btn-color .input-group input {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.active-search.search-list.change-btn-color .btn-searchIcon img,
.active-search.search-list.change-btn-color .btn-searchIcon img,
.change-btn-color .input-group .btn-searchIcon img,
.change-btn-color .input-group .btn-searchIcon img {
  filter: var(--gray-400-filter) !important;
}

.active-search.search-list.change-btn-color:focus,
.active-search.search-list.change-btn-color:focus-within,
.change-btn-color .input-group:focus,
.change-btn-color .input-group:focus-within {
  border: 1.5px solid var(--gray-400) !important;
  -webkit-box-shadow: 0 0 2.5px var(--gray-50);

  -moz-box-shadow: 0 0 2.5px var(--gray-50);

  -webkit-box-shadow: 0 0 2.5px var(--gray-50);


  -moz-box-shadow: 0 0 2.5px var(--gray-50);


  box-shadow: 0 0 2.5px var(--gray-50);
}

.search-bar .input-group img {
  filter: var(--gray-300-filter);
}

.search-bar .input-group:hover img {
  filter: var(--gray-300-filter);
}

.change-btn-color .input-group img,
.active-search.search-list img,
.change-btn-color .input-group img {
  filter: var(--gray-400-filter);
}

.change-btn-color .input-group:hover img,
.active-search.search-list:hover img,
.change-btn-color .input-group:hover img {
  filter: var(--gray-400-filter);
}

.change-btn-color .input-group:active .btn-searchIcon img,
.change-btn-color .input-group:focus .btn-searchIcon img,
.change-btn-color .input-group:focus-within .btn-searchIcon img,
.active-search.search-list:active .btn-searchIcon img,
.active-search.search-list:focus .btn-searchIcon img,
.active-search.search-list:focus-within .btn-searchIcon img,
.change-btn-color .input-group:active .btn-searchIcon img,
.change-btn-color .input-group:focus .btn-searchIcon img,
.change-btn-color .input-group:focus-within .btn-searchIcon img {
  filter: var(--gray-400-filter) !important;
}

.close-searchIcon img {
  filter: var(--gray-200-filter) !important;
}

.close-searchIcon img:hover {
  filter: var(--gray-400-filter) !important;
}

.search-column {
  max-width: 264px;
}

.btn-searchIcon .hover-icon {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.btn-searchIcon:hover .hover-icon {
  display: inline;
}

.change-btn-color .btn-searchIcon img {
  filter: var(--gray-50-filter);
}

.active-search:not(.change-btn-color) .btn-searchIcon img {
  filter: var(--gray-300-filter);
}

.btn-search-padding {
  padding-top: 0;
  margin-right: -4px;
}

.active-search.search-list.change-btn-color.search-active,
.change-btn-color.search-active .input-group {
  border: 1.5px solid var(--gray-400) !important;
  -webkit-box-shadow: 0 0 0 2px var(--gray-50) !important;

  -moz-box-shadow: 0 0 0 2px var(--gray-50) !important;

  -webkit-box-shadow: 0 0 0 2px var(--gray-50) !important;


  -moz-box-shadow: 0 0 0 2px var(--gray-50) !important;


  box-shadow: 0 0 0 2px var(--gray-50) !important;
}

.active-search.search-list.change-btn-color.search-active:hover,
.change-btn-color.search-active .input-group:hover {
  border: 1.5px solid var(--gray-400) !important;
  -webkit-box-shadow: 0 0 0 2px var(--gray-50) !important;

  -moz-box-shadow: 0 0 0 2px var(--gray-50) !important;

  -webkit-box-shadow: 0 0 0 2px var(--gray-50) !important;


  -moz-box-shadow: 0 0 0 2px var(--gray-50) !important;


  box-shadow: 0 0 0 2px var(--gray-50) !important;
}

/* =============================================================================
   Dark mode — search bar overrides
   ============================================================================= */
body.dark .search-two .input-group,
body.dark .search-bar .input-group,
body.dark .active-search.search-list {
  border-color: var(--gray-700) !important;
  background-color: var(--gray-900);
}

body.dark .active-search.search-list {
  background-color: var(--gray-900);
}

body.dark .active-search.search-list.change-btn-color,
body.dark .change-btn-color .input-group {
  border-color: var(--gray-700) !important;
}

body.dark .active-search.search-list.change-btn-color.search-active,
body.dark .change-btn-color.search-active .input-group {
  border-color: var(--gray-500) !important;
  -webkit-box-shadow: 0 0 0 2px var(--gray-800) !important;

  -moz-box-shadow: 0 0 0 2px var(--gray-800) !important;

  -webkit-box-shadow: 0 0 0 2px var(--gray-800) !important;


  -moz-box-shadow: 0 0 0 2px var(--gray-800) !important;


  box-shadow: 0 0 0 2px var(--gray-800) !important;
}

body.dark .search-control,
body.dark .search-control:focus,
body.dark .search-control:active {
  color: var(--foreground) !important;
}

/* Search input — transparent bg so container bg shows through */
body.dark .search-control,
body.dark input.search-control,
body.dark input.form-control.search-control {
  background: transparent !important;
  background-color: transparent !important;
}

body.dark input.form-control.search-control:focus,
body.dark input.search-control:focus {
  background: transparent !important;
  background-color: transparent !important;
}

/* Search input placeholder */
body.dark .search-control::placeholder {
  color: var(--gray-500) !important;
}

/* Expandable search focus — proper dark focus ring instead of light blue */
body.dark .active-search.search-list.change-btn-color.search-active,
body.dark .change-btn-color.search-active .input-group {
  -webkit-box-shadow: 0 0 0 2px var(--gray-800) !important;

  -moz-box-shadow: 0 0 0 2px var(--gray-800) !important;

  -webkit-box-shadow: 0 0 0 2px var(--gray-800) !important;


  -moz-box-shadow: 0 0 0 2px var(--gray-800) !important;


  box-shadow: 0 0 0 2px var(--gray-800) !important;
}

/* Search icons — don't change filter on focus in dark mode */
body.dark .active-search.search-list .btn-searchIcon img,
body.dark .search-bar .btn-searchIcon img {
  filter: var(--gray-400-filter) !important;
}

body.dark .active-search.search-list:focus-within .btn-searchIcon img,
body.dark .search-bar .input-group:focus-within .btn-searchIcon img {
  filter: var(--gray-400-filter) !important;
}

body.dark .active-search .close-searchIcon img {
  filter: var(--gray-400-filter) !important;
}
/* End import from ./components/elements.css */
/* Imported from ./components/topbar.css */
.vahara-navbar-top.navbar {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: .5rem 0 !important;
}

.vahara-navbar-top.navbar .container-fluid {
  padding: 0 !important;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.vahara-navbar-top.navbar .navbar-collapse {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.vahara-navbar-top.navbar .navbar-collapse .navbar-nav {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.vahara-navbar-top.navbar .navbar-collapse .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.vahara-navbar-top.navbar .navbar-collapse .dropdown-menu {
  position: absolute;
  float: none;
}

.notification-dropdown.dropdown-menu {
  top: 45px;
  right: 0;
  left: unset;
  width: 460px;
  padding: 0;
  -webkit-box-shadow: 0 0 15px 1px rgba(69, 65, 78, 0.2);

  -moz-box-shadow: 0 0 15px 1px rgba(69, 65, 78, 0.2);

  -webkit-box-shadow: 0 0 15px 1px rgba(69, 65, 78, 0.2);


  -moz-box-shadow: 0 0 15px 1px rgba(69, 65, 78, 0.2);


  box-shadow: 0 0 15px 1px rgba(69, 65, 78, 0.2);
}

.notification-dropdown.dropdown-menu:after {
  content: "";
  position: absolute;
  top: -8px;
  right: 26px;
  border: 10px solid var(--gray-900);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--gray-150) transparent;
}

.notification-dropdown.dropdown-menu:before {
  content: "";
  position: absolute;
  top: -10px;
  right: 24px;
  border: 10px solid var(--gray-900);
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent var(--gray-150) transparent;
}

.notification-dropdown .head {
  padding: 5px 15px;
  -webkit-border-radius: 3px 3px 0 0;

  -moz-border-radius: 3px 3px 0 0;

  -webkit-border-radius: 3px 3px 0 0;


  -moz-border-radius: 3px 3px 0 0;


  border-radius: 3px 3px 0 0;
  background-color: var(--gray-150);
  height: 4rem;
}

.notification-dropdown .head .header {
  padding-top: 1rem;
}

.notification-dropdown .head .title {
  color: var(--gray-900);
}

.notification-dropdown .footer {
  padding: 5px 15px;
  -webkit-border-radius: 0 0 3px 3px;

  -moz-border-radius: 0 0 3px 3px;

  -webkit-border-radius: 0 0 3px 3px;


  -moz-border-radius: 0 0 3px 3px;


  border-radius: 0 0 3px 3px;
}

.notification-dropdown .notification-box {
  padding: 10px 0;
  -webkit-transition: all 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  -ms-transition: all 0.2s ease-out;

  -webkit-transition: all 0.2s ease-out;


  -moz-transition: all 0.2s ease-out;


  -ms-transition: all 0.2s ease-out;


  transition: all 0.2s ease-out;
}

.notification-dropdown .notification-box:hover {
  cursor: pointer;
  background-color: var(--gray-50);
  -webkit-transition: all 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  -ms-transition: all 0.2s ease-out;

  -webkit-transition: all 0.2s ease-out;


  -moz-transition: all 0.2s ease-out;


  -ms-transition: all 0.2s ease-out;


  transition: all 0.2s ease-out;
}
/* End import from ./components/topbar.css */
/* Imported from ./components/notifications.css */
@keyframes vh-toast-slide-up-in {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 14px, 0);

    -moz-transform: translate3d(0, 14px, 0);

    -ms-transform: translate3d(0, 14px, 0);

    -webkit-transform: translate3d(0, 14px, 0);


    -moz-transform: translate3d(0, 14px, 0);


    -ms-transform: translate3d(0, 14px, 0);


    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -webkit-transform: translate3d(0, 0, 0);


    -moz-transform: translate3d(0, 0, 0);


    -ms-transform: translate3d(0, 0, 0);


    transform: translate3d(0, 0, 0);
  }
}

@keyframes vh-toast-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.vh-notification-alert {
  font-weight: 600 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 20px !important;
  background: var(--gray-800) !important;
  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);

  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);

  -webkit-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);


  -moz-box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);


  box-shadow: 1px 2px 8px rgba(26, 26, 26, 0.05);
  -webkit-border-radius: 8px !important;

  -moz-border-radius: 8px !important;

  -webkit-border-radius: 8px !important;


  -moz-border-radius: 8px !important;


  border-radius: 8px !important;
  padding: 8px 16px 8px 48px !important;
  max-width: 440px !important;
  min-height: 48px !important;
  border: 0;
  color: var(--white) !important;
  z-index: 999999999999 !important;
}

.vh-notification-alert.slideUpFadeIn {
  -webkit-animation: vh-toast-slide-up-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;

  -moz-animation: vh-toast-slide-up-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;

  -ms-animation: vh-toast-slide-up-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;

  -webkit-animation: vh-toast-slide-up-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;


  -moz-animation: vh-toast-slide-up-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;


  -ms-animation: vh-toast-slide-up-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;


  animation: vh-toast-slide-up-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vh-notification-alert.toastFadeOut {
  -webkit-animation: vh-toast-fade-out 0.22s ease-out both;

  -moz-animation: vh-toast-fade-out 0.22s ease-out both;

  -ms-animation: vh-toast-fade-out 0.22s ease-out both;

  -webkit-animation: vh-toast-fade-out 0.22s ease-out both;


  -moz-animation: vh-toast-fade-out 0.22s ease-out both;


  -ms-animation: vh-toast-fade-out 0.22s ease-out both;


  animation: vh-toast-fade-out 0.22s ease-out both;
}

.vh-notification-alert:not(:has(span[data-notify="title"])) {
  max-height: 48px !important;
}

.vh-notification-alert:hover {
  cursor: pointer;
}

.vh-notification-alert:hover button.close {
  opacity: 75%;
}

.vh-notification-alert span[data-notify="icon"] {
  position: absolute;
  left: 16px;
  top: 13px;
}

.vh-notification-alert span[data-notify="icon"] img {
  width: 20px;
  height: 20px;
}

.vh-notification-alert span[data-notify="title"] {
  line-height: 32px;
}

.vh-notification-alert button.close {
  top: 8px !important;
  right: 8px !important;
}

.btn-close-icon-notification {
  opacity: 1 !important;
  background-color: transparent;
}

.btn-close-icon-notification img {
  filter: var(--gray-400-filter);
}

.btn-close-icon-notification:hover {
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
}

.btn-close-icon-notification:hover img {
  filter: var(--gray-200-filter) !important;
}

.btn-close-icon-notification:active, .btn-close-icon-notification:focus {
  background-color: rgba(255, 255, 255, 0.30);
}

.btn-close-icon-notification:active img, .btn-close-icon-notification:focus img {
  filter: var(--white-filter) !important;
}
/* End import from ./components/notifications.css */
/* Imported from ./components/utilities.css */
/* =============================================================================
   Layout Utilities
   =============================================================================
   .stack — uniform vertical spacing between direct children via adjacent
            sibling combinator. Use for component stacks (form groups, card
            lists, sidebar sections) where .prose's text-aware rules aren't
            needed.

   Usage:
     <div class="stack">          16px gap (default)
     <div class="stack stack-sm"> 8px gap
     <div class="stack stack-md"> 12px gap
     <div class="stack stack-lg"> 24px gap
     <div class="stack stack-xl"> 32px gap

   Custom gap one-off:
     <div class="stack" style="--stack-gap: 20px;">
   ============================================================================= */

/* --stack-gap is a custom property, so it INHERITS. .stack therefore has to set
   it rather than rely on the var() fallback: a plain .stack nested inside a
   .stack-xl would otherwise inherit 32px and silently ignore its own documented
   16px. The fallback only applies where nothing up the tree has set the
   property, which is exactly the case nesting breaks.

   Found on the Foundation page, where the nested demo stack rendered 32px while
   its own caption said 16px (Paul, 2026-08-05).

   A one-off inline --stack-gap still wins: inline beats a class selector. */
.stack {
    --stack-gap: 16px;
}

.stack > * + * {
    margin-top: var(--stack-gap, 16px);
}

.stack-sm  { --stack-gap: 8px;  }
.stack-md  { --stack-gap: 12px; }
/* .stack alone = 16px, set explicitly above */
.stack-lg  { --stack-gap: 24px; }
.stack-xl  { --stack-gap: 32px; }


/* =============================================================================
   Misc Utilities
   ============================================================================= */

.blur {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.bg-light {
    background-color: var(--gray-950) !important;
}

.la-20px {
    font-size: 20px !important;
}

.text-w-bold {
    font-weight: 700;
}

.text-w-medium {
    font-weight: 500;
}

.text-mango {
    color: var(--warning) !important;
}

.text-coral {
    color: var(--warning) !important;
}

.clr-gray-400 {
    color: var(--gray-400) !important;
}

/* Used by ItemStatusComponent.js for the Draft and Archived datatable statuses.
   .clr-mango was only ever defined scoped inside .form-field-char, so it never
   reached the status spans; .clr-gray500 was defined nowhere at all. Both
   statuses rendered as plain body text. Naming follows the existing .clr-*
   helpers above rather than the .text-* family the rest of the theme prefers —
   renaming belongs with a React rebuild. */
.clr-mango {
    color: var(--warning) !important;
}

.clr-gray500 {
    color: var(--gray-500) !important;
}

#vhSystemLoader, #vhSystemLoaderData, #vhSystemPropeller {
    display: inline-block;
    background-color: var(--white);
    max-width: 360px;
    padding: 40px;
    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;


    -moz-border-radius: 20px;


    border-radius: 20px;
}

/* Spacing steps Bootstrap does not ship. Each is used by a handful of views;
   .mb-32 is also redefined inline by the one page that uses it. */
.pt-32 {
  padding-top: 32px !important;
}

.mt-24 {
  margin-top: 24px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-32 {
  margin-bottom: 32px;
}

/* End import from ./components/utilities.css */
/* Imported from ./components/checkbox-radio-variants.css */
/* Checkbox Variants */
.vahara-custom-checkbox.checkbox-primary [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-primary [type="checkbox"]:checked + span:before {
  background-color: var(--primary);
  border-color: var(--primary);
}

.vahara-custom-checkbox.checkbox-primary [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-primary [type="checkbox"]:checked + span:hover:before {
  background-color: color-mix(in srgb, var(--primary) 93%, black);
  border-color: color-mix(in srgb, var(--primary) 93%, black);
}

.vahara-custom-checkbox.checkbox-primary [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(13, 107, 105, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-secondary [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-secondary [type="checkbox"]:checked + span:before {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.vahara-custom-checkbox.checkbox-secondary [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-secondary [type="checkbox"]:checked + span:hover:before {
  background-color: var(--accent-shade);
  border-color: var(--accent-shade);
}

.vahara-custom-checkbox.checkbox-secondary [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(11, 187, 166, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-accent [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-accent [type="checkbox"]:checked + span:before {
  background-color: var(--accent);
  border-color: var(--accent);
}

.vahara-custom-checkbox.checkbox-accent [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-accent [type="checkbox"]:checked + span:hover:before {
  background-color: color-mix(in srgb, var(--accent) 93%, black);
  border-color: color-mix(in srgb, var(--accent) 93%, black);
}

.vahara-custom-checkbox.checkbox-accent [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(11, 187, 166, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-success [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-success [type="checkbox"]:checked + span:before {
  background-color: var(--success);
  border-color: var(--success);
}

.vahara-custom-checkbox.checkbox-success [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-success [type="checkbox"]:checked + span:hover:before {
  background-color: color-mix(in srgb, var(--success) 93%, black);
  border-color: color-mix(in srgb, var(--success) 93%, black);
}

.vahara-custom-checkbox.checkbox-success [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(11, 187, 166, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-error [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-error [type="checkbox"]:checked + span:before {
  background-color: var(--warning);
  border-color: var(--warning);
}

.vahara-custom-checkbox.checkbox-error [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-error [type="checkbox"]:checked + span:hover:before {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}

.vahara-custom-checkbox.checkbox-error [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(255, 149, 88, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-warning [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-warning [type="checkbox"]:checked + span:before {
  background-color: var(--warning);
  border-color: var(--warning);
}

.vahara-custom-checkbox.checkbox-warning [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-warning [type="checkbox"]:checked + span:hover:before {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}

.vahara-custom-checkbox.checkbox-warning [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(255, 149, 88, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-danger [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-danger [type="checkbox"]:checked + span:before {
  background-color: var(--destructive);
  border-color: var(--destructive);
}

.vahara-custom-checkbox.checkbox-danger [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-danger [type="checkbox"]:checked + span:hover:before {
  background-color: color-mix(in srgb, var(--destructive) 93%, black);
  border-color: color-mix(in srgb, var(--destructive) 93%, black);
}

.vahara-custom-checkbox.checkbox-danger [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(240, 94, 115, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-link [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-link [type="checkbox"]:checked + span:before {
  background-color: var(--link);
  border-color: var(--link);
}

.vahara-custom-checkbox.checkbox-link [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-link [type="checkbox"]:checked + span:hover:before {
  background-color: color-mix(in srgb, var(--link) 93%, black);
  border-color: color-mix(in srgb, var(--link) 93%, black);
}

.vahara-custom-checkbox.checkbox-link [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(1, 157, 207, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-info [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-info [type="checkbox"]:checked + span:before {
  background-color: var(--info);
  border-color: var(--info);
}

.vahara-custom-checkbox.checkbox-info [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-info [type="checkbox"]:checked + span:hover:before {
  background-color: color-mix(in srgb, var(--info) 93%, black);
  border-color: color-mix(in srgb, var(--info) 93%, black);
}

.vahara-custom-checkbox.checkbox-info [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(0, 183, 240, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-live [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-live [type="checkbox"]:checked + span:before {
  background-color: var(--live);
  border-color: var(--live);
}

.vahara-custom-checkbox.checkbox-live [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-live [type="checkbox"]:checked + span:hover:before {
  background-color: color-mix(in srgb, var(--live) 93%, black);
  border-color: color-mix(in srgb, var(--live) 93%, black);
}

.vahara-custom-checkbox.checkbox-live [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(11, 187, 166, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-draft [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-draft [type="checkbox"]:checked + span:before {
  background-color: var(--draft);
  border-color: var(--draft);
}

.vahara-custom-checkbox.checkbox-draft [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-draft [type="checkbox"]:checked + span:hover:before {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}

.vahara-custom-checkbox.checkbox-draft [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(255, 149, 88, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-dev [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-dev [type="checkbox"]:checked + span:before {
  background-color: var(--dev);
  border-color: var(--dev);
}

.vahara-custom-checkbox.checkbox-dev [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-dev [type="checkbox"]:checked + span:hover:before {
  background-color: color-mix(in srgb, var(--dev) 93%, black);
  border-color: color-mix(in srgb, var(--dev) 93%, black);
}

.vahara-custom-checkbox.checkbox-dev [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(0, 183, 240, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-system [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-system [type="checkbox"]:checked + span:before {
  background-color: var(--system);
  border-color: var(--system);
}

.vahara-custom-checkbox.checkbox-system [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-system [type="checkbox"]:checked + span:hover:before {
  background-color: var(--control-system-hover);
  border-color: var(--control-system-hover);
}

.vahara-custom-checkbox.checkbox-system [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(255, 149, 88, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-beta [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-beta [type="checkbox"]:checked + span:before {
  background-color: var(--beta);
  border-color: var(--beta);
}

.vahara-custom-checkbox.checkbox-beta [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-beta [type="checkbox"]:checked + span:hover:before {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}

.vahara-custom-checkbox.checkbox-beta [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(255, 149, 88, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-tertiary [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-tertiary [type="checkbox"]:checked + span:before {
  background-color: var(--system);
  border-color: var(--system);
}

.vahara-custom-checkbox.checkbox-tertiary [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-tertiary [type="checkbox"]:checked + span:hover:before {
  background-color: color-mix(in srgb, var(--system) 93%, black);
  border-color: color-mix(in srgb, var(--system) 93%, black);
}

.vahara-custom-checkbox.checkbox-tertiary [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(15, 77, 92, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-subtle-primary [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-subtle-primary [type="checkbox"]:checked + span:before {
  background-color: var(--primary);
  border-color: var(--primary);
}

.vahara-custom-checkbox.checkbox-subtle-primary [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-subtle-primary [type="checkbox"]:checked + span:hover:before {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}

.vahara-custom-checkbox.checkbox-subtle-primary [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(13, 107, 105, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-subtle-secondary [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-subtle-secondary [type="checkbox"]:checked + span:before {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.vahara-custom-checkbox.checkbox-subtle-secondary [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-subtle-secondary [type="checkbox"]:checked + span:hover:before {
  background-color: var(--accent-shade);
  border-color: var(--accent-shade);
}

.vahara-custom-checkbox.checkbox-subtle-secondary [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(11, 187, 166, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-transparent [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-transparent [type="checkbox"]:checked + span:before {
  background-color: transparent;
  border-color: transparent;
}

.vahara-custom-checkbox.checkbox-transparent [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-transparent [type="checkbox"]:checked + span:hover:before {
  background-color: transparent;
  border-color: transparent;
}

.vahara-custom-checkbox.checkbox-transparent [type="checkbox"]:checked:disabled + div:before {
  background-color: transparent !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-light-gray [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-light-gray [type="checkbox"]:checked + span:before {
  background-color: var(--gray-25);
  border-color: var(--gray-25);
}

.vahara-custom-checkbox.checkbox-light-gray [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-light-gray [type="checkbox"]:checked + span:hover:before {
  background-color: var(--gray-50);
  border-color: var(--gray-50);
}

.vahara-custom-checkbox.checkbox-light-gray [type="checkbox"]:checked:disabled + div:before {
  background-color: rgba(249, 250, 252, 0.4) !important;
  border-color: transparent !important;
}

.vahara-custom-checkbox.checkbox-white [type="checkbox"]:checked + div:before,
.vahara-custom-checkbox.checkbox-white [type="checkbox"]:checked + span:before {
  background-color: transparent;
  border-color: transparent;
}

.vahara-custom-checkbox.checkbox-white [type="checkbox"]:checked + div:hover:before,
.vahara-custom-checkbox.checkbox-white [type="checkbox"]:checked + span:hover:before {
  background-color: #FFFFFF26;
  border-color: #FFFFFF26;
}

.vahara-custom-checkbox.checkbox-white [type="checkbox"]:checked:disabled + div:before {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Radio Variants */
.vahara-custom-radio.radio-primary [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-primary [type="radio"]:checked + span:after {
  background-color: var(--primary);
  border-color: var(--primary);
}

.vahara-custom-radio.radio-primary [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-primary [type="radio"]:checked + span:before {
  border-color: var(--primary);
}

.vahara-custom-radio.radio-primary [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-primary [type="radio"]:checked + span:hover:after {
  background-color: color-mix(in srgb, var(--primary) 93%, black);
  border-color: color-mix(in srgb, var(--primary) 93%, black);
}

.vahara-custom-radio.radio-primary [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-primary [type="radio"]:checked + span:hover:before {
  border-color: color-mix(in srgb, var(--primary) 93%, black);
}

.vahara-custom-radio.radio-secondary [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-secondary [type="radio"]:checked + span:after {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.vahara-custom-radio.radio-secondary [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-secondary [type="radio"]:checked + span:before {
  border-color: var(--secondary);
}

.vahara-custom-radio.radio-secondary [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-secondary [type="radio"]:checked + span:hover:after {
  background-color: var(--accent-shade);
  border-color: var(--accent-shade);
}

.vahara-custom-radio.radio-secondary [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-secondary [type="radio"]:checked + span:hover:before {
  border-color: var(--accent-shade);
}

.vahara-custom-radio.radio-accent [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-accent [type="radio"]:checked + span:after {
  background-color: var(--accent);
  border-color: var(--accent);
}

.vahara-custom-radio.radio-accent [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-accent [type="radio"]:checked + span:before {
  border-color: var(--accent);
}

.vahara-custom-radio.radio-accent [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-accent [type="radio"]:checked + span:hover:after {
  background-color: color-mix(in srgb, var(--accent) 93%, black);
  border-color: color-mix(in srgb, var(--accent) 93%, black);
}

.vahara-custom-radio.radio-accent [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-accent [type="radio"]:checked + span:hover:before {
  border-color: color-mix(in srgb, var(--accent) 93%, black);
}

.vahara-custom-radio.radio-success [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-success [type="radio"]:checked + span:after {
  background-color: var(--success);
  border-color: var(--success);
}

.vahara-custom-radio.radio-success [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-success [type="radio"]:checked + span:before {
  border-color: var(--success);
}

.vahara-custom-radio.radio-success [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-success [type="radio"]:checked + span:hover:after {
  background-color: color-mix(in srgb, var(--success) 93%, black);
  border-color: color-mix(in srgb, var(--success) 93%, black);
}

.vahara-custom-radio.radio-success [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-success [type="radio"]:checked + span:hover:before {
  border-color: color-mix(in srgb, var(--success) 93%, black);
}

.vahara-custom-radio.radio-error [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-error [type="radio"]:checked + span:after {
  background-color: var(--warning);
  border-color: var(--warning);
}

.vahara-custom-radio.radio-error [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-error [type="radio"]:checked + span:before {
  border-color: var(--warning);
}

.vahara-custom-radio.radio-error [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-error [type="radio"]:checked + span:hover:after {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}

.vahara-custom-radio.radio-error [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-error [type="radio"]:checked + span:hover:before {
  border-color: var(--control-warning-hover);
}

.vahara-custom-radio.radio-warning [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-warning [type="radio"]:checked + span:after {
  background-color: var(--warning);
  border-color: var(--warning);
}

.vahara-custom-radio.radio-warning [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-warning [type="radio"]:checked + span:before {
  border-color: var(--warning);
}

.vahara-custom-radio.radio-warning [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-warning [type="radio"]:checked + span:hover:after {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}

.vahara-custom-radio.radio-warning [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-warning [type="radio"]:checked + span:hover:before {
  border-color: var(--control-warning-hover);
}

.vahara-custom-radio.radio-danger [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-danger [type="radio"]:checked + span:after {
  background-color: var(--destructive);
  border-color: var(--destructive);
}

.vahara-custom-radio.radio-danger [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-danger [type="radio"]:checked + span:before {
  border-color: var(--destructive);
}

.vahara-custom-radio.radio-danger [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-danger [type="radio"]:checked + span:hover:after {
  background-color: color-mix(in srgb, var(--destructive) 93%, black);
  border-color: color-mix(in srgb, var(--destructive) 93%, black);
}

.vahara-custom-radio.radio-danger [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-danger [type="radio"]:checked + span:hover:before {
  border-color: color-mix(in srgb, var(--destructive) 93%, black);
}

.vahara-custom-radio.radio-link [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-link [type="radio"]:checked + span:after {
  background-color: var(--link);
  border-color: var(--link);
}

.vahara-custom-radio.radio-link [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-link [type="radio"]:checked + span:before {
  border-color: var(--link);
}

.vahara-custom-radio.radio-link [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-link [type="radio"]:checked + span:hover:after {
  background-color: color-mix(in srgb, var(--link) 93%, black);
  border-color: color-mix(in srgb, var(--link) 93%, black);
}

.vahara-custom-radio.radio-link [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-link [type="radio"]:checked + span:hover:before {
  border-color: color-mix(in srgb, var(--link) 93%, black);
}

.vahara-custom-radio.radio-info [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-info [type="radio"]:checked + span:after {
  background-color: var(--info);
  border-color: var(--info);
}

.vahara-custom-radio.radio-info [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-info [type="radio"]:checked + span:before {
  border-color: var(--info);
}

.vahara-custom-radio.radio-info [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-info [type="radio"]:checked + span:hover:after {
  background-color: color-mix(in srgb, var(--info) 93%, black);
  border-color: color-mix(in srgb, var(--info) 93%, black);
}

.vahara-custom-radio.radio-info [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-info [type="radio"]:checked + span:hover:before {
  border-color: color-mix(in srgb, var(--info) 93%, black);
}

.vahara-custom-radio.radio-live [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-live [type="radio"]:checked + span:after {
  background-color: var(--live);
  border-color: var(--live);
}

.vahara-custom-radio.radio-live [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-live [type="radio"]:checked + span:before {
  border-color: var(--live);
}

.vahara-custom-radio.radio-live [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-live [type="radio"]:checked + span:hover:after {
  background-color: color-mix(in srgb, var(--live) 93%, black);
  border-color: color-mix(in srgb, var(--live) 93%, black);
}

.vahara-custom-radio.radio-live [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-live [type="radio"]:checked + span:hover:before {
  border-color: color-mix(in srgb, var(--live) 93%, black);
}

.vahara-custom-radio.radio-draft [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-draft [type="radio"]:checked + span:after {
  background-color: var(--draft);
  border-color: var(--draft);
}

.vahara-custom-radio.radio-draft [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-draft [type="radio"]:checked + span:before {
  border-color: var(--draft);
}

.vahara-custom-radio.radio-draft [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-draft [type="radio"]:checked + span:hover:after {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}

.vahara-custom-radio.radio-draft [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-draft [type="radio"]:checked + span:hover:before {
  border-color: var(--control-warning-hover);
}

.vahara-custom-radio.radio-dev [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-dev [type="radio"]:checked + span:after {
  background-color: var(--dev);
  border-color: var(--dev);
}

.vahara-custom-radio.radio-dev [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-dev [type="radio"]:checked + span:before {
  border-color: var(--dev);
}

.vahara-custom-radio.radio-dev [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-dev [type="radio"]:checked + span:hover:after {
  background-color: color-mix(in srgb, var(--dev) 93%, black);
  border-color: color-mix(in srgb, var(--dev) 93%, black);
}

.vahara-custom-radio.radio-dev [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-dev [type="radio"]:checked + span:hover:before {
  border-color: color-mix(in srgb, var(--dev) 93%, black);
}

.vahara-custom-radio.radio-system [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-system [type="radio"]:checked + span:after {
  background-color: var(--system);
  border-color: var(--system);
}

.vahara-custom-radio.radio-system [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-system [type="radio"]:checked + span:before {
  border-color: var(--system);
}

.vahara-custom-radio.radio-system [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-system [type="radio"]:checked + span:hover:after {
  background-color: var(--control-system-hover);
  border-color: var(--control-system-hover);
}

.vahara-custom-radio.radio-system [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-system [type="radio"]:checked + span:hover:before {
  border-color: var(--control-system-hover);
}

.vahara-custom-radio.radio-beta [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-beta [type="radio"]:checked + span:after {
  background-color: var(--beta);
  border-color: var(--beta);
}

.vahara-custom-radio.radio-beta [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-beta [type="radio"]:checked + span:before {
  border-color: var(--beta);
}

.vahara-custom-radio.radio-beta [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-beta [type="radio"]:checked + span:hover:after {
  background-color: var(--control-warning-hover);
  border-color: var(--control-warning-hover);
}

.vahara-custom-radio.radio-beta [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-beta [type="radio"]:checked + span:hover:before {
  border-color: var(--control-warning-hover);
}

.vahara-custom-radio.radio-tertiary [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-tertiary [type="radio"]:checked + span:after {
  background-color: var(--system);
  border-color: var(--system);
}

.vahara-custom-radio.radio-tertiary [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-tertiary [type="radio"]:checked + span:before {
  border-color: var(--system);
}

.vahara-custom-radio.radio-tertiary [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-tertiary [type="radio"]:checked + span:hover:after {
  background-color: color-mix(in srgb, var(--system) 93%, black);
  border-color: color-mix(in srgb, var(--system) 93%, black);
}

.vahara-custom-radio.radio-tertiary [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-tertiary [type="radio"]:checked + span:hover:before {
  border-color: color-mix(in srgb, var(--system) 93%, black);
}

.vahara-custom-radio.radio-subtle-primary [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-subtle-primary [type="radio"]:checked + span:after {
  background-color: var(--primary);
  border-color: var(--primary);
}

.vahara-custom-radio.radio-subtle-primary [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-subtle-primary [type="radio"]:checked + span:before {
  border-color: var(--primary);
}

.vahara-custom-radio.radio-subtle-primary [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-subtle-primary [type="radio"]:checked + span:hover:after {
  background-color: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
}

.vahara-custom-radio.radio-subtle-primary [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-subtle-primary [type="radio"]:checked + span:hover:before {
  border-color: var(--control-primary-hover);
}

.vahara-custom-radio.radio-subtle-secondary [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-subtle-secondary [type="radio"]:checked + span:after {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.vahara-custom-radio.radio-subtle-secondary [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-subtle-secondary [type="radio"]:checked + span:before {
  border-color: var(--secondary);
}

.vahara-custom-radio.radio-subtle-secondary [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-subtle-secondary [type="radio"]:checked + span:hover:after {
  background-color: var(--accent-shade);
  border-color: var(--accent-shade);
}

.vahara-custom-radio.radio-subtle-secondary [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-subtle-secondary [type="radio"]:checked + span:hover:before {
  border-color: var(--accent-shade);
}

.vahara-custom-radio.radio-transparent [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-transparent [type="radio"]:checked + span:after {
  background-color: transparent;
  border-color: transparent;
}

.vahara-custom-radio.radio-transparent [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-transparent [type="radio"]:checked + span:before {
  border-color: transparent;
}

.vahara-custom-radio.radio-transparent [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-transparent [type="radio"]:checked + span:hover:after {
  background-color: transparent;
  border-color: transparent;
}

.vahara-custom-radio.radio-transparent [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-transparent [type="radio"]:checked + span:hover:before {
  border-color: transparent;
}

.vahara-custom-radio.radio-light-gray [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-light-gray [type="radio"]:checked + span:after {
  background-color: var(--gray-25);
  border-color: var(--gray-25);
}

.vahara-custom-radio.radio-light-gray [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-light-gray [type="radio"]:checked + span:before {
  border-color: var(--gray-25);
}

.vahara-custom-radio.radio-light-gray [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-light-gray [type="radio"]:checked + span:hover:after {
  background-color: var(--gray-50);
  border-color: var(--gray-50);
}

.vahara-custom-radio.radio-light-gray [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-light-gray [type="radio"]:checked + span:hover:before {
  border-color: var(--gray-50);
}

.vahara-custom-radio.radio-white [type="radio"]:checked + div:after,
.vahara-custom-radio.radio-white [type="radio"]:checked + span:after {
  background-color: transparent;
  border-color: transparent;
}

.vahara-custom-radio.radio-white [type="radio"]:checked + div:before,
.vahara-custom-radio.radio-white [type="radio"]:checked + span:before {
  border-color: transparent;
}

.vahara-custom-radio.radio-white [type="radio"]:checked + div:hover:after,
.vahara-custom-radio.radio-white [type="radio"]:checked + span:hover:after {
  background-color: #FFFFFF26;
  border-color: #FFFFFF26;
}

.vahara-custom-radio.radio-white [type="radio"]:checked + div:hover:before,
.vahara-custom-radio.radio-white [type="radio"]:checked + span:hover:before {
  border-color: #FFFFFF26;
}

/* =============================================================================
   .vahara-checkbox — the field-group checkbox
   =============================================================================
   Distinct from .vahara-custom-checkbox above, despite the near-identical name.
   This one wraps a bare <input> and a sibling <label> in a .field-group:

       <div class="field-group vahara-checkbox vahara-checkbox-primary">
         <input type="checkbox" id="x"><label for="x">Client Project</label>
       </div>

   The box is drawn on the label's ::before and the tick on its ::after; the
   real input is moved off-screen rather than hidden, so it stays focusable.
   .vahara-custom-checkbox uses a different structure entirely (input followed
   by a div or span) and its rules do not reach this markup.

   Two implementations of the same control under two names is a design-system
   defect in its own right. Folding this in as-is keeps rendering identical;
   consolidating them is a separate decision. 10 views use the base class and
   25 use the -primary variant.
   ========================================================================== */

.vahara-checkbox {
  padding-left: 20px;
}

.vahara-checkbox label {
  width: 100%;
  display: inline-block;
  position: relative;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.44px;
  padding-left: 36px;
}

.form-group input[type="checkbox"]:focus,
.form-group input[type="radio"]:focus {
  outline: none;
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
  border: none;
}

.vahara-checkbox label:focus,
.vahara-checkbox label:active,
.vahara-checkbox label:focus-within {
  outline: none;
  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;


  -moz-box-shadow: none;


  box-shadow: none;
  border: none;
}

.vahara-checkbox label:focus::before,
.vahara-checkbox label:hover::before {
  border: 2px solid #717678;
}

/* #B9C0CB is very close to --gray-200 (var(--gray-200)) but not equal, so it stays
   literal — swapping it would be a visual change, not a migration. Worth
   settling when the borders are looked at as a set. */
.vahara-checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  border: 2px solid #B9C0CB;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
  background-color: var(--white);
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;

  -moz-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;

  -ms-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;

  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;


  -moz-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;


  -ms-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;


  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.vahara-checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 0;
  padding-left: 3px;
  padding-top: 0px;
  font-size: 14px;
  color: #555555;
}

/* Off-screen rather than display:none — a hidden input cannot be focused, and
   the focus ring below is drawn on the label's ::before. */
.vahara-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: -7171px;
  left: -9999px;
}

.vahara-checkbox .fv-plugins-message-container {
  margin-left: -20px;
}

.vahara-checkbox input[type="checkbox"]:focus + label::before {
  outline: none !important;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.vahara-checkbox input[type="checkbox"]:checked ~ label::after {
  content: "\f17b";
  font-family: 'lineAwesome';
}

.vahara-checkbox input[type="checkbox"]:checked:hover ~ label::after {
  width: 20px;
  height: 20px;
  -webkit-border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;


  -moz-border-radius: 3px;


  border-radius: 3px;
}

.vahara-checkbox input[type="checkbox"]:disabled ~ label {
  opacity: 0.65;
}

.vahara-checkbox input[type="checkbox"]:disabled ~ label::before {
  background-color: #eeeeee;
  cursor: not-allowed;
}

/* Primary variant — the checked box takes the accent colour. */
.vahara-checkbox-primary input[type="checkbox"]:checked ~ label::before {
  background-color: var(--accent);
  border-color: var(--accent);
}

.vahara-checkbox-primary input[type="checkbox"]:checked ~ label::after {
  color: var(--white);
}

.vahara-checkbox-primary input[type="checkbox"]:checked:hover ~ label::after {
  background-color: var(--accent);
}

/* End import from ./components/checkbox-radio-variants.css */
/* Imported from ./components/badges.css */
/* ========================================
   INDICATOR SYSTEM
   ----------------------------------------
   One primitive, two independent axes — see
   vault/vahara/projects/design-system/decisions/010-indicators-are-one-primitive-on-two-axes.md

     .vh-indicator   — base. Requires one class from each axis below.

   Fill axis (same vocabulary as the button ladder — 009):
     .vh-solid   .vh-tonal   .vh-outline

   Shape axis:
     .vh-pill    (full-radius)     .vh-rect   (softened rect)

   All six fill x shape combinations are valid, e.g.
   `.vh-indicator.vh-solid.vh-pill`, `.vh-indicator.vh-outline.vh-pill`.

   Tone modifiers (compose with any fill):
     .tone-primary  .tone-success  .tone-warning
     .tone-info     .tone-neutral  .tone-danger
   No tone class = neutral gray.

   Semantic status modifiers (tonal fill only — status IS a fill choice):
     .status-live  .status-draft  .status-archived
     .status-system  .status-dev
   .status-beta is outline-only — see below.

   Size modifier:
     .sm   — compact (22px / 12px), use for table cells and nav

   Default size: 28px height / 14px font

   Semantic shortcuts:
     .vh-indicator.vh-outline.vh-rect.status-beta   — outline warning-family badge (Beta label)

   ----------------------------------------
   "Tag" is not a fill (decision 010, phase 3). It goes back to meaning a
   genuine user-applied tag that happens to use solid fill -- see the real
   tag chip in app/project/index.blade.php
   (.vh-indicator.vh-solid.vh-rect.tone-primary). .vh-tag as a class name is
   fully retired below; nothing references it any more (verified by grep).

   DEPRECATED ALIASES — .vh-pill / .vh-label / .vh-badge
   Preserved only until every call site migrates to the two-axis classes
   above (see decision 010). Do not add new call sites against them.
   Currently still required by resources/js/components/Datatables/*.js,
   which is out of scope for this pass — coordinate before removing.
     .vh-pill  == .vh-indicator.vh-tonal.vh-pill
     .vh-label == .vh-indicator.vh-tonal.vh-rect
     .vh-badge == .vh-indicator.vh-outline.vh-rect

   Permanently preserved (not part of this migration — see bottom of file):
     .badge.vh-badge (compound Bootstrap class)
     .badge.badge-vahara
     .beta-label
   ======================================== */


/* ════════════════════════════════════════════════════════════════════════
   TWO-AXIS SYSTEM — .vh-indicator
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Shared base ─── */

.vh-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--text-sm);    /* 14px */
    font-weight: var(--font-medium); /* 500 — body-small medium */
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0;
    vertical-align: middle;
    height: 28px;
}

/* Icon children: inline <svg stroke="currentColor"> only — inherits text color.
   <img> tags will NOT match text color automatically. */
.vh-indicator > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.vh-indicator.sm > svg {
    width: 14px;
    height: 14px;
}

/* ─── Size modifier (.sm — compact, for table cells) ─── */

.vh-indicator.sm {
    font-size: 12px;
    font-weight: var(--font-semibold); /* 600 — slightly heavier at compact size */
    height: 22px;
    padding: 0 10px;
}


/* ─── Shape axis ───
   Scoped as `.vh-indicator.vh-pill` / `.vh-indicator.vh-rect` (rather than a
   bare `.vh-pill`) because the deprecated alias above already owns the bare
   `.vh-pill` selector for its own, different rule set during the migration
   window. The compound selector wins on specificity where both are present. */

.vh-indicator.vh-rect {
    -webkit-border-radius: var(--radius);

    -moz-border-radius: var(--radius);

    -webkit-border-radius: var(--radius);


    -moz-border-radius: var(--radius);


    border-radius: var(--radius);
    padding: 0 12px;
}

.vh-indicator.vh-pill {
    -webkit-border-radius: var(--radius-full);

    -moz-border-radius: var(--radius-full);

    -webkit-border-radius: var(--radius-full);


    -moz-border-radius: var(--radius-full);


    border-radius: var(--radius-full);
    padding: 0 14px;
}

/* Outline eats into its own padding with a 1.5px border, same visual inset
   the old .vh-badge had (11px = 12px - 1.5px border, rounded). */
.vh-indicator.vh-rect.vh-outline {
    padding: 0 11px;
}

.vh-indicator.vh-pill.vh-outline {
    padding: 0 13px;
}


/* ─── Fill axis: defaults (no tone) — neutral gray ─── */

.vh-indicator.vh-tonal {
    color: var(--gray-600);
    background: var(--gray-100);
}

.vh-indicator.vh-outline {
    color: var(--gray-600);
    background: transparent;
    border: 1.5px solid var(--gray-300);
}

.vh-indicator.vh-solid {
    color: white;
    background: var(--gray-600);
}


/* ─── Fill x Tone matrix ───
   Tonal and outline values are carried over unchanged from the old
   .vh-pill/.vh-label (tonal) and .vh-badge (outline) rules. Solid x tone is
   new — completing the combination that used to only exist as the
   undifferentiated .vh-tag (solid, primary-only). */

.vh-indicator.vh-tonal.tone-primary {
    color: var(--primary);
    background: color-mix(in oklch, var(--primary) 13%, white);
}
.vh-indicator.vh-outline.tone-primary {
    color: var(--primary);
    border-color: var(--primary);
}
.vh-indicator.vh-solid.tone-primary {
    background: var(--primary);
    color: white;
}

.vh-indicator.vh-tonal.tone-success {
    color: var(--success);
    background: color-mix(in oklch, var(--success) 15%, white);
}
.vh-indicator.vh-outline.tone-success {
    color: var(--success);
    border-color: var(--success);
}
.vh-indicator.vh-solid.tone-success {
    /* --success-500, not the semantic --success token: --success is
       redefined lighter in dark mode for text-on-dark-tonal legibility,
       which would wash out an opaque solid fill. -500 is the fixed
       palette step matching the light-mode brand teal in both modes. */
    background: var(--success-500);
    color: white;
}

.vh-indicator.vh-tonal.tone-warning {
    color: var(--warning);
    background: color-mix(in oklch, var(--warning) 18%, white);
}
.vh-indicator.vh-outline.tone-warning {
    color: var(--warning);
    border-color: var(--warning);
}
.vh-indicator.vh-solid.tone-warning {
    background: var(--warning);
    color: white;
}

.vh-indicator.vh-tonal.tone-info {
    color: var(--info);
    background: color-mix(in oklch, var(--info) 15%, white);
}
.vh-indicator.vh-outline.tone-info {
    color: var(--info);
    border-color: var(--info);
}
.vh-indicator.vh-solid.tone-info {
    /* --info-500 — same fixed-step reasoning as tone-success above. */
    background: var(--info-500);
    color: white;
}

.vh-indicator.vh-tonal.tone-neutral {
    color: var(--gray-600);
    background: var(--gray-100);
}
.vh-indicator.vh-outline.tone-neutral {
    color: var(--gray-500);
    border-color: var(--gray-300);
}
.vh-indicator.vh-solid.tone-neutral {
    background: var(--gray-600);
    color: white;
}

.vh-indicator.vh-tonal.tone-danger {
    color: var(--destructive);
    background: color-mix(in oklch, var(--destructive) 12%, white);
}
.vh-indicator.vh-outline.tone-danger {
    color: var(--destructive);
    border-color: var(--destructive);
}
.vh-indicator.vh-solid.tone-danger {
    background: var(--destructive);
    color: white;
}


/* ─── Semantic status modifiers (tonal fill only) ─── */

.vh-indicator.vh-tonal.status-live {
    color: var(--live);
    background: color-mix(in oklch, var(--live) 15%, white);
}

.vh-indicator.vh-tonal.status-draft {
    color: var(--draft);
    background: color-mix(in oklch, var(--draft) 18%, white);
}

.vh-indicator.vh-tonal.status-archived {
    color: var(--archived);
    background: color-mix(in oklch, var(--archived) 18%, white);
}

.vh-indicator.vh-tonal.status-system {
    color: var(--system);
    background: color-mix(in oklch, var(--system) 12%, white);
}

.vh-indicator.vh-tonal.status-dev {
    color: var(--dev);
    background: color-mix(in oklch, var(--dev) 15%, white);
}

/* Beta: compact outline badge, all-caps — semantic feature-stage label.
   Canonical usage is `.vh-indicator.vh-outline.vh-rect.status-beta.sm` in
   dense contexts like nav. */
.vh-indicator.vh-outline.status-beta {
    color: var(--draft);
    border-color: var(--draft);
    padding: 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    height: 22px;
}

.vh-indicator.vh-outline.status-beta.sm {
    color: var(--draft);
    border-color: var(--draft);
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    padding: 0 4px;
    letter-spacing: 0.06em;
    height: 18px;
}


/* ════════════════════════════════════════════════════════════════════════
   DEPRECATED ALIASES — .vh-pill / .vh-label / .vh-badge
   ────────────────────────────────────────────────────────────────────────
   Unmodified from the pre-migration version of this file, except .vh-tag
   (removed here — decision 010 phase 3: "tag" is not a fill vocabulary
   word, and nothing referenced the bare class any more, verified by grep).
   The remaining three are kept only for the handful of call sites this pass
   could not reach (resources/js/components/Datatables/*.js — owned by
   another session). Remove this whole block once
   `grep -rn "vh-pill\|vh-label\|vh-badge" --include=*.blade.php
   --include=*.js` (excluding the compound `.badge.vh-badge` legacy class
   below) comes back empty.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Shared base ─── */

.vh-pill,
.vh-label,
.vh-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--text-sm);    /* 14px */
    font-weight: var(--font-medium); /* 500 — body-small medium */
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0;
    vertical-align: middle;
}

/* Icon children: inline <svg stroke="currentColor"> only — inherits text color.
   <img> tags will NOT match text color automatically. */
.vh-pill > svg,
.vh-label > svg,
.vh-badge > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.vh-pill.sm > svg,
.vh-label.sm > svg,
.vh-badge.sm > svg {
    width: 14px;
    height: 14px;
}


/* ─── vh-pill: full-radius, tinted bg ─── */

.vh-pill {
    -webkit-border-radius: var(--radius-full);

    -moz-border-radius: var(--radius-full);

    -webkit-border-radius: var(--radius-full);


    -moz-border-radius: var(--radius-full);


    border-radius: var(--radius-full);
    padding: 0 14px;
    height: 28px;
    color: var(--gray-600);
    background: var(--gray-100);
}


/* ─── vh-label: rectangular, tinted bg ─── */

.vh-label {
    -webkit-border-radius: var(--radius);

    -moz-border-radius: var(--radius);

    -webkit-border-radius: var(--radius);


    -moz-border-radius: var(--radius);


    border-radius: var(--radius);
    padding: 0 12px;
    height: 28px;
    color: var(--gray-600);
    background: var(--gray-100);
}


/* ─── vh-badge: rectangular, outline only ─── */

.vh-badge {
    -webkit-border-radius: var(--radius);

    -moz-border-radius: var(--radius);

    -webkit-border-radius: var(--radius);


    -moz-border-radius: var(--radius);


    border-radius: var(--radius);
    padding: 0 11px;
    height: 28px;
    color: var(--gray-600);
    background: transparent;
    border: 1.5px solid var(--gray-300);
}


/* ─── Size modifier (.sm — compact, for table cells) ─── */

.vh-pill.sm,
.vh-label.sm,
.vh-badge.sm {
    font-size: 12px;
    font-weight: var(--font-semibold); /* 600 — slightly heavier at compact size */
    height: 22px;
    padding: 0 10px;
}


/* ─── Tone modifiers ─── */

.vh-pill.tone-primary,
.vh-label.tone-primary {
    color: var(--primary);
    background: color-mix(in oklch, var(--primary) 13%, white);
}

.vh-badge.tone-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.vh-pill.tone-success,
.vh-label.tone-success {
    color: var(--success);
    background: color-mix(in oklch, var(--success) 15%, white);
}

.vh-badge.tone-success {
    color: var(--success);
    border-color: var(--success);
}

.vh-pill.tone-warning,
.vh-label.tone-warning {
    color: var(--warning);
    background: color-mix(in oklch, var(--warning) 18%, white);
}

.vh-badge.tone-warning {
    color: var(--warning);
    border-color: var(--warning);
}

.vh-pill.tone-info,
.vh-label.tone-info {
    color: var(--info);
    background: color-mix(in oklch, var(--info) 15%, white);
}

.vh-badge.tone-info {
    color: var(--info);
    border-color: var(--info);
}

.vh-pill.tone-neutral,
.vh-label.tone-neutral {
    color: var(--gray-600);
    background: var(--gray-100);
}

.vh-badge.tone-neutral {
    color: var(--gray-500);
    border-color: var(--gray-300);
}

.vh-pill.tone-danger,
.vh-label.tone-danger {
    color: var(--destructive);
    background: color-mix(in oklch, var(--destructive) 12%, white);
}

.vh-badge.tone-danger {
    color: var(--destructive);
    border-color: var(--destructive);
}


/* ─── Semantic status modifiers ─── */

.vh-pill.status-live,
.vh-label.status-live {
    color: var(--live);
    background: color-mix(in oklch, var(--live) 15%, white);
}

.vh-pill.status-draft,
.vh-label.status-draft {
    color: var(--draft);
    background: color-mix(in oklch, var(--draft) 18%, white);
}

.vh-pill.status-archived,
.vh-label.status-archived {
    color: var(--archived);
    background: color-mix(in oklch, var(--archived) 18%, white);
}

.vh-pill.status-system,
.vh-label.status-system {
    color: var(--system);
    background: color-mix(in oklch, var(--system) 12%, white);
}

.vh-pill.status-dev,
.vh-label.status-dev {
    color: var(--dev);
    background: color-mix(in oklch, var(--dev) 15%, white);
}

/* Beta: compact outline badge, all-caps — semantic feature-stage label.
   Canonical usage is `.vh-badge.status-beta.sm` in dense contexts like nav. */
.vh-badge.status-beta {
    color: var(--draft);
    border-color: var(--draft);
    padding: 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    height: 22px;
}

.vh-badge.status-beta.sm {
    color: var(--draft);
    border-color: var(--draft);
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    padding: 0 4px;
    letter-spacing: 0.06em;
    height: 18px;
}


/* ========================================
   LEGACY — Preserved, do not remove

   These classes are actively used in blade
   templates. Migrate to new primitives above
   when touching those templates.
   ======================================== */

/* .badge.vh-badge — compound Bootstrap class, used in 15 blade files.
   The !important rules here override any .vh-badge base styles above
   for elements that carry both classes. Do not remove. */

.badge.vh-badge {
    -webkit-border-radius: 18px !important;

    -moz-border-radius: 18px !important;

    -webkit-border-radius: 18px !important;


    -moz-border-radius: 18px !important;


    border-radius: 18px !important;
    font-size: 10px !important;
    line-height: 17px !important;
    padding: 0 10px !important;
    font-weight: 600 !important;
    border: 1px solid !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.badge.vh-badge.badge-primary {
    color: var(--primary);
    background: color-mix(in oklch, var(--primary) 15%, white);
    border-color: var(--primary);
}

.badge.vh-badge.badge-secondary {
    color: var(--gray-500);
    background: var(--gray-100);
    border-color: var(--gray-400);
}

/* =============================================================================
   Dark mode — indicator overrides
   ============================================================================= */

/* ─── Two-axis system — dark mode ─── */

/* Default (no tone) — tonal & outline */
body.dark .vh-indicator.vh-tonal {
    color: var(--gray-300);
    background: var(--gray-800);
}
body.dark .vh-indicator.vh-outline {
    color: var(--gray-400);
    border-color: var(--gray-600);
    background: transparent;
}
/* Default (no tone) — solid stays as-is; the background tokens used across
   the fill x tone matrix are theme-invariant (--primary, --warning,
   --destructive, --gray-600 don't change between modes, and success/info
   deliberately pin to the fixed -500 palette step), so an opaque solid chip
   needs no dark override to keep working. */

/* ─── Fill x Tone matrix — dark mode (tonal & outline only) ─── */

/* Primary — use accent for legibility (--primary is too dark on dark bg) */
body.dark .vh-indicator.vh-tonal.tone-primary {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--gray-900));
}
body.dark .vh-indicator.vh-outline.tone-primary {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--gray-900));
}

/* Success */
body.dark .vh-indicator.vh-tonal.tone-success {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 25%, var(--gray-900));
}
body.dark .vh-indicator.vh-outline.tone-success {
    color: var(--success);
    border-color: var(--success);
}

/* Warning */
body.dark .vh-indicator.vh-tonal.tone-warning {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 28%, var(--gray-900));
}
body.dark .vh-indicator.vh-outline.tone-warning {
    color: var(--warning);
    border-color: var(--warning);
}

/* Info */
body.dark .vh-indicator.vh-tonal.tone-info {
    color: var(--info);
    background: color-mix(in srgb, var(--info) 25%, var(--gray-900));
}
body.dark .vh-indicator.vh-outline.tone-info {
    color: var(--info);
    border-color: var(--info);
}

/* Neutral */
body.dark .vh-indicator.vh-tonal.tone-neutral {
    color: var(--gray-400);
    background: var(--gray-800);
}
body.dark .vh-indicator.vh-outline.tone-neutral {
    color: var(--gray-400);
    border-color: var(--gray-600);
}

/* Danger */
body.dark .vh-indicator.vh-tonal.tone-danger {
    color: var(--destructive);
    background: color-mix(in srgb, var(--destructive) 22%, var(--gray-900));
}
body.dark .vh-indicator.vh-outline.tone-danger {
    color: var(--destructive);
    border-color: var(--destructive);
}

/* ─── Semantic status modifiers — dark mode ─── */

body.dark .vh-indicator.vh-tonal.status-live {
    color: var(--live);
    background: color-mix(in srgb, var(--live) 25%, var(--gray-900));
}

body.dark .vh-indicator.vh-tonal.status-draft {
    color: var(--draft);
    background: color-mix(in srgb, var(--draft) 28%, var(--gray-900));
}

body.dark .vh-indicator.vh-tonal.status-archived {
    color: var(--archived);
    background: color-mix(in srgb, var(--archived) 28%, var(--gray-900));
}

body.dark .vh-indicator.vh-tonal.status-system {
    color: var(--system);
    background: color-mix(in srgb, var(--system) 22%, var(--gray-900));
}

body.dark .vh-indicator.vh-tonal.status-dev {
    color: var(--dev);
    background: color-mix(in srgb, var(--dev) 25%, var(--gray-900));
}

/* Beta badge */
body.dark .vh-indicator.vh-outline.status-beta {
    color: var(--draft);
    border-color: color-mix(in srgb, var(--draft) 60%, var(--gray-900));
}

/* ─── Deprecated aliases — dark mode (unmodified) ─── */

/* Default (no tone) — pills & labels */
body.dark .vh-pill,
body.dark .vh-label {
    color: var(--gray-300);
    background: var(--gray-800);
}

/* Default (no tone) — badges */
body.dark .vh-badge {
    color: var(--gray-400);
    border-color: var(--gray-600);
    background: transparent;
}

/* ─── Tone modifiers — dark mode ─── */

/* Primary — use accent for legibility (primary var(--primary) is too dark on dark bg) */
body.dark .vh-pill.tone-primary,
body.dark .vh-label.tone-primary {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--gray-900));
}
body.dark .vh-badge.tone-primary {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--gray-900));
}

/* Success */
body.dark .vh-pill.tone-success,
body.dark .vh-label.tone-success {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 25%, var(--gray-900));
}
body.dark .vh-badge.tone-success {
    color: var(--success);
    border-color: var(--success);
}

/* Warning */
body.dark .vh-pill.tone-warning,
body.dark .vh-label.tone-warning {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 28%, var(--gray-900));
}
body.dark .vh-badge.tone-warning {
    color: var(--warning);
    border-color: var(--warning);
}

/* Info */
body.dark .vh-pill.tone-info,
body.dark .vh-label.tone-info {
    color: var(--info);
    background: color-mix(in srgb, var(--info) 25%, var(--gray-900));
}
body.dark .vh-badge.tone-info {
    color: var(--info);
    border-color: var(--info);
}

/* Neutral */
body.dark .vh-pill.tone-neutral,
body.dark .vh-label.tone-neutral {
    color: var(--gray-400);
    background: var(--gray-800);
}
body.dark .vh-badge.tone-neutral {
    color: var(--gray-400);
    border-color: var(--gray-600);
}

/* Danger */
body.dark .vh-pill.tone-danger,
body.dark .vh-label.tone-danger {
    color: var(--destructive);
    background: color-mix(in srgb, var(--destructive) 22%, var(--gray-900));
}
body.dark .vh-badge.tone-danger {
    color: var(--destructive);
    border-color: var(--destructive);
}

/* ─── Semantic status modifiers — dark mode ─── */

body.dark .vh-pill.status-live,
body.dark .vh-label.status-live {
    color: var(--live);
    background: color-mix(in srgb, var(--live) 25%, var(--gray-900));
}

body.dark .vh-pill.status-draft,
body.dark .vh-label.status-draft {
    color: var(--draft);
    background: color-mix(in srgb, var(--draft) 28%, var(--gray-900));
}

body.dark .vh-pill.status-archived,
body.dark .vh-label.status-archived {
    color: var(--archived);
    background: color-mix(in srgb, var(--archived) 28%, var(--gray-900));
}

body.dark .vh-pill.status-system,
body.dark .vh-label.status-system {
    color: var(--system);
    background: color-mix(in srgb, var(--system) 22%, var(--gray-900));
}

body.dark .vh-pill.status-dev,
body.dark .vh-label.status-dev {
    color: var(--dev);
    background: color-mix(in srgb, var(--dev) 25%, var(--gray-900));
}

/* Beta badge */
body.dark .vh-badge.status-beta {
    color: var(--draft);
    border-color: color-mix(in srgb, var(--draft) 60%, var(--gray-900));
}

/* Legacy compound badges */
body.dark .badge.vh-badge.badge-primary {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--gray-900));
    border-color: color-mix(in srgb, var(--accent) 50%, var(--gray-900));
}

body.dark .badge.vh-badge.badge-secondary {
    color: var(--gray-400);
    background: var(--gray-800);
    border-color: var(--gray-600);
}

/* End import from ./components/badges.css */
/* Imported from ./components/pill-tabs.css */
/* Square Pill Tabs
   ─────────────────────────────────────────────────────────────────────────
   The design system's tab component. Values are the Figma Design System's
   own, node 10239:63140 in file D8HvF3fxSbPUhMKNV5srhJ, read from the node's
   variable bindings rather than off a screenshot:

     bar    Gray100 #d9e1e4, 4px padding, 4px gap, 8px radius
     tab    16px x 6px padding, 6px radius, 6px icon gap, 16px icons,
            Body-Small Medium500 (Open Sans 14 / 20 / 500)
     rest   label and icon Gray600 #4e636b
     hover  fill Gray150 #cbd5d9, label UNCHANGED at Gray600
     active White #ffffff, near-black label, 1px soft shadow

   Why this file exists: until 2026-08-26 this component had no shared home.
   It lived only inside the inline <style> of its own showroom specimen
   (resources/views/web/style/sections/_tabs_section.blade.php), which is
   included by exactly one page. Every product page that wanted it copied the
   whole ruleset in -- billing, the organization detail page, and a prototype
   page -- and those copies then drifted from each other and from the spec,
   which is precisely what happened: the specimen was still on the pre-restyle
   --muted / --gray-400 pair months after the product pages had moved on, so
   the showroom was showing something the product no longer used.

   Consumers keep ONLY their own layout overrides (margins) in page CSS. Page
   <style> blocks load after this file, so those still win at equal
   specificity. Do not re-declare colour, padding, or type here in a page.

   The hover state deliberately changes the fill and nothing else. An earlier
   version darkened the label to --foreground as well, which made hover read
   almost as strongly as the active tab; the spec's second tab carries the
   fill with the same Gray600 label as a tab at rest. */

.ds-pill-tab-bar {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--gray-100);
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  border-radius: 8px;
}

body.dark .ds-pill-tab-bar {
  background: var(--gray-900);
}

.ds-pill-tab {
  padding: 6px 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--gray-600, #4E636B);
  text-decoration: none;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: all 0.15s ease;

  -moz-transition: all 0.15s ease;

  -ms-transition: all 0.15s ease;

  -webkit-transition: all 0.15s ease;


  -moz-transition: all 0.15s ease;


  -ms-transition: all 0.15s ease;


  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
}

.ds-pill-tab:hover {
  background: var(--gray-150);
  text-decoration: none;
}

.ds-pill-tab.active {
  background: #FFFFFF;
  color: var(--foreground, #04161B);
  font-weight: 500;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);


  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);


  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ds-pill-tab.active:hover {
  background: #FFFFFF;
}

body.dark .ds-pill-tab {
  color: var(--gray-400);
}

body.dark .ds-pill-tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--gray-300);
}

body.dark .ds-pill-tab.active {
  background: var(--gray-800);
  color: var(--foreground, #F3F7F9);
}

body.dark .ds-pill-tab.active:hover {
  background: var(--gray-800);
}

/* Icons track the label, including on hover, where the label does not move. */
.ds-pill-tab img {
  width: 16px;
  height: 16px;
  pointer-events: none;
  filter: var(--gray-600-filter);
}

.ds-pill-tab:hover img {
  filter: var(--gray-600-filter);
}

.ds-pill-tab.active img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(672%) hue-rotate(155deg) brightness(93%) contrast(93%);
}

body.dark .ds-pill-tab img {
  filter: var(--gray-400-filter);
}

body.dark .ds-pill-tab:hover img {
  filter: var(--gray-300-filter);
}

body.dark .ds-pill-tab.active img {
  filter: brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(200%) hue-rotate(155deg) brightness(100%) contrast(95%);
}

/* ── Small size ───────────────────────────────────────────────────────────
   The modifier goes on the BAR, not on individual tabs: a tab bar is
   homogeneous, and sizing it in one place makes a half-small bar impossible to
   write. (The variant this replaces, .lg, was per-tab, and its removal on
   2026-08-26 is why this one is not.)

   32px tall by default, 28px small -- the same rungs the design system's icon
   buttons use, so a tab bar sitting next to a toolbar lines up with it.

   Icon and text-only are not separate variants and need no class: the icon gap
   is flex `gap`, which only applies between items, so a tab with just a label
   has no phantom space to strip. Both are shown on /style/navigation. */
.ds-pill-tab-bar--sm .ds-pill-tab {
  padding: 5px 12px;
  font-size: 13px;
  line-height: 18px;
}

.ds-pill-tab-bar--sm .ds-pill-tab img {
  width: 14px;
  height: 14px;
}

/* .ds-pill-tab is deliberately not a .btn (matching the specimen's markup),
   so the theme's app-wide .btn:focus-visible reset does not reach it. This
   just replaces the browser default with the ring colour used elsewhere. */
.ds-pill-tab:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Chip tabs: restored showroom treatment, including its original icon filters. */
.ds-chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ds-chip {
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    -webkit-border-radius: 20px;


    -moz-border-radius: 20px;


    border-radius: 20px;
    background: var(--gray-25);
    color: var(--muted-foreground);
    cursor: pointer;
    -webkit-transition: background 0.15s ease;

    -moz-transition: background 0.15s ease;

    -ms-transition: background 0.15s ease;

    -webkit-transition: background 0.15s ease;


    -moz-transition: background 0.15s ease;


    -ms-transition: background 0.15s ease;


    transition: background 0.15s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ds-chip:hover {
    background: var(--gray-50);
}
.ds-chip.active {
    background: var(--primary);
    color: #fff;
}
.ds-chip.active:hover {
    background: var(--primary);
}
body.dark .ds-chip {
    background: var(--gray-800);
    color: var(--gray-400);
}
body.dark .ds-chip:hover {
    background: var(--gray-700);
}
body.dark .ds-chip.active {
    background: var(--primary);
    color: #fff;
}
body.dark .ds-chip.active:hover {
    background: var(--primary);
}
.ds-chip img {
    height: 14px;
    pointer-events: none;
    filter: brightness(0) saturate(100%) invert(59%) sepia(12%) saturate(397%) hue-rotate(150deg) brightness(94%) contrast(88%);
}
.ds-chip.active img {
    filter: brightness(0) saturate(100%) invert(100%);
    opacity: 0.9;
}
body.dark .ds-chip img {
    filter: var(--gray-400-filter);
}
body.dark .ds-chip.active img {
    filter: brightness(0) saturate(100%) invert(100%);
    opacity: 0.9;
}

/* End import from ./components/pill-tabs.css */
/* Imported from ./components/cards.css */
/* ── Cards ───────────────────────────────────────────────────────────────────
   The standard surface. .vh-card rather than .card because Bootstrap owns
   .card with thirty rules and the product already uses it.

   Three variants, and the difference between them is how the card separates
   itself from what is behind it:

     .vh-card                   1.5px stroke, no shadow. The default. Reads
                                cleanly on the page background or on white.
     .vh-card.vh-card-raised    stroke and a shadow, for something that should
                                feel lifted while still being bounded.
     .vh-card.vh-card-floating  shadow only, no stroke. Used selectively.

   The stroke is doing real work in light mode, not decoration: a level-1
   surface is white and the page is nearly white, so without the stroke there
   is nothing marking the edge. Dark mode separates by lightness instead, which
   is why the stroke there is quieter.

   Padding is deliberately not set. It is a spacing utility on the element —
   p-3, p-4 — the same way .pane works, so a card can be dense or roomy without
   a second class.

   A card is a bounded object that sits INSIDE a content zone and respects its
   width. It is not a page container and not a page header. .portlet is neither
   a card nor a container — do not model new work on it.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --card-stroke: 1.5px;
}

/* The stroke is a box-shadow spread ring rather than a border, and that is
   deliberate. Chrome floors border-width AND outline-width to whole CSS pixels,
   so `border: 1.5px` computes to 1px and paints identically to 1px at both 1x
   and 2x — measured, not assumed. box-shadow spread is the only one of the
   three that keeps the fractional value: at 2x it paints 3 device pixels,
   genuinely between 1px (2) and 2px (4).

   Two consequences to know before reaching for this:

   1. The ring paints OUTSIDE the layout box, and box-shadow never contributes
      to layout. So it can overlap whatever sits beside the card — adjacent
      cards lose ~3px of visual gap — and an ancestor with overflow:hidden will
      clip it.
   2. Stroke and shadow share one property. The raised variant lists the ring
      first so it paints over the shadow; the two cannot be set independently.

   At 1x the ring renders as one solid row plus one at 50% grey, so it reads
   slightly soft rather than crisp. Both costs accepted: Paul, 2026-08-07. */
.vh-card {
  background-color: var(--surface-panel);
  -webkit-border-radius: 12px;

  -moz-border-radius: 12px;

  -webkit-border-radius: 12px;


  -moz-border-radius: 12px;


  border-radius: 12px;
  -webkit-box-shadow: 0 0 0 var(--card-stroke) var(--border);

  -moz-box-shadow: 0 0 0 var(--card-stroke) var(--border);

  -webkit-box-shadow: 0 0 0 var(--card-stroke) var(--border);


  -moz-box-shadow: 0 0 0 var(--card-stroke) var(--border);


  box-shadow: 0 0 0 var(--card-stroke) var(--border);
}

/* Ring first so it paints over the shadow. --shadow-md is itself two shadows,
   so this expands to three. */
.vh-card.vh-card-raised {
  -webkit-box-shadow: 0 0 0 var(--card-stroke) var(--border), var(--shadow-md);

  -moz-box-shadow: 0 0 0 var(--card-stroke) var(--border), var(--shadow-md);

  -webkit-box-shadow: 0 0 0 var(--card-stroke) var(--border), var(--shadow-md);


  -moz-box-shadow: 0 0 0 var(--card-stroke) var(--border), var(--shadow-md);


  box-shadow: 0 0 0 var(--card-stroke) var(--border), var(--shadow-md);
}

/* No ring. Dropping it costs nothing in layout — unlike a border, the ring was
   never part of the box — so there is no transparent-instead-of-none dance. */
.vh-card.vh-card-floating {
  -webkit-box-shadow: var(--shadow-md);

  -moz-box-shadow: var(--shadow-md);

  -webkit-box-shadow: var(--shadow-md);


  -moz-box-shadow: var(--shadow-md);


  box-shadow: var(--shadow-md);
}

/* Elevation is relative: a card on a card steps up a role rather than holding a
   fixed level. In light mode raised is still white, so the stroke is what tells
   the two apart. */
.vh-card .vh-card {
  background-color: var(--surface-raised);
}

/* End import from ./components/cards.css */

/* Create Project wizard -- stepper + selectable-tile components */
/* Imported from ./components/create-project.css */
/* ── Create Project wizard ──────────────────────────────────────────────────
   Net-new components for the redesigned Create Project flow (About / Plan /
   Billing on web.layouts.simple, the "Focus" shell). Two things the design
   system did not previously have:

     .cp-stepper        a 3-dot numbered step indicator (About/Plan/Billing).
                         No DS wizard/stepper existed before this file.
     .cp-tile-group      a selectable row-card radio pattern (Blank Slate /
                         Website template on About; template cards on the
                         Template Chooser). Derived from .vahara-custom-radio's
                         selected-state colours, but laid out as a full card
                         row/grid rather than a small circle.

   All colour comes from tokens (--primary, --accent, --gray-*, --border,
   --card, --muted-foreground) so both light and dark mode are automatic via
   the existing `.dark, [data-theme="dark"]` token flip in tokens/semantic.css
   — no separate dark rules needed here except where noted.
   ────────────────────────────────────────────────────────────────────────── */

/* Fixed stepper band: sits directly under the layout's own fixed header
   (#sticky-header, measured 113px — see web/layouts/simple.blade.php's own
   comment) and stays in the exact same position/size on every screen in the
   flow, independent of how tall that screen's card is. Content below it is
   pushed down via .cp-flow-row's padding-top rather than centered against it,
   so a short About card and a tall Plan card don't move the stepper. */
.cp-stepper-band {
  position: fixed;
  top: 113px;
  left: 0;
  right: 0;
  z-index: 15;
  /* WHITE, not the page background. --background is --gray-0 (#F9FAFC), which
     painted a visible gray strip across the top of an otherwise white focus
     shell -- Paul flagged it on 2026-09-05. --card is the same white the header
     above and the flow below already use, so the band stops reading as a
     separate surface. */
  background: var(--card);
  display: flex;
  justify-content: center;
  padding: 20px 20px 16px;
}

.cp-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.cp-stepper .cp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
}

.cp-stepper .cp-step .cp-dot {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 9999px;

  -moz-border-radius: 9999px;

  -webkit-border-radius: 9999px;


  -moz-border-radius: 9999px;


  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid var(--gray-250);
  color: var(--gray-400);
  background: var(--card);
  z-index: 1;
  -webkit-transition: background 200ms ease, border-color 200ms ease, color 200ms ease;

  -moz-transition: background 200ms ease, border-color 200ms ease, color 200ms ease;

  -ms-transition: background 200ms ease, border-color 200ms ease, color 200ms ease;

  -webkit-transition: background 200ms ease, border-color 200ms ease, color 200ms ease;


  -moz-transition: background 200ms ease, border-color 200ms ease, color 200ms ease;


  -ms-transition: background 200ms ease, border-color 200ms ease, color 200ms ease;


  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.cp-stepper .cp-step .cp-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-400);
  text-align: center;
}

.cp-stepper .cp-step .cp-connector {
  position: absolute;
  top: 15px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: var(--gray-150);
}

.cp-stepper .cp-step:last-child .cp-connector {
  display: none;
}

/* Active step — outlined in primary green: number, ring, and label. */
.cp-stepper .cp-step.is-current .cp-dot {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--card);
}
.cp-stepper .cp-step.is-current .cp-label {
  color: var(--primary);
}

/* Completed step — solid primary-green fill with a white check mark. */
.cp-stepper .cp-step.is-done .cp-dot {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.cp-stepper .cp-step.is-done .cp-connector {
  background: var(--primary);
}
.cp-stepper .cp-step.is-done .cp-label {
  color: var(--primary);
}

.cp-stepper .cp-step.is-clickable {
  cursor: pointer;
}
.cp-stepper .cp-step.is-clickable:hover .cp-dot {
  background: color-mix(in oklch, var(--primary) 88%, black);
  border-color: color-mix(in oklch, var(--primary) 88%, black);
}
.cp-stepper .cp-step.is-clickable:hover .cp-label {
  color: var(--primary);
}
.cp-stepper .cp-step.is-clickable:focus-visible {
  outline: none;
}
.cp-stepper .cp-step.is-clickable:focus-visible .cp-dot {
  outline: 2px solid var(--ring, var(--accent));
  outline-offset: 2px;
}

/* Row below the fixed header + stepper band. The layout's own
   `.main-content.simple-layout > .row` vertically centers its content by
   default (right for a single-card auth page); the create-project flow
   instead wants the stepper band pinned and the card top-anchored beneath
   it, so this class overrides alignment and reserves the header+band height
   as top padding. Scoped to `.cp-flow-row` only — no other simple-layout
   page is affected. */
.main-content.simple-layout > .row.cp-flow-row {
  align-items: flex-start;
  padding-top: 176px;
  padding-bottom: 64px;
}

.cp-flow-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cp-step-heading {
  margin: 0 0 24px;
  text-align: center;
}

.cp-wizard-col {
  width: 100%;
  max-width: 640px;
}

/* Plan / Billing / Template Chooser cards are wider than About's ~440px
   default per design-decisions.md ("Plan/Template Chooser/Billing wider
   than About"). 920px matches the Template Chooser prototype
   (02-template-chooser.html: ".wizard-col.wide{max-width:920px}"). */
.cp-wizard-col.cp-wizard-col-wide {
  max-width: 920px;
}

/* The Plan step is wider still. Its four Professional cards are the pricing
   page's own cards, and at 920px they squeeze to ~208px each and every tagline
   wraps to five lines. 1200px is the marketing site's content container, which
   is what those cards were designed against. Separate class rather than a
   change to -wide, which the Template Chooser and Billing both still use. */
.cp-wizard-col.cp-wizard-col-plan {
  max-width: 1200px;
}

.cp-form-card {
  padding: 32px;
}
@media (max-width: 480px) {
  .cp-form-card {
    padding: 22px;
  }
}

/* Org/Industry selects show their prompt in placeholder-gray until a value
   is chosen (JS toggles this on `change`); `select.form-control` itself has
   no such state in the DS. */
.cp-select-placeholder {
  color: var(--gray-400);
}

.cp-group-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
  margin: 28px 0 12px;
}

/* Step nav buttons at the foot of the form (Back / Continue). */
.cp-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
}
.cp-step-actions.cp-step-actions-end {
  justify-content: flex-end;
}

/* ── Selectable tile / card pattern ─────────────────────────────────────────
   Used for: About's Blank Slate / Website template choice (2 tiles, stacked),
   and the Template Chooser's template gallery (many cards, grid). Real radio
   input + label for accessibility and keyboard support; visuals live on the
   label so the native input can stay visually hidden without losing focus
   behaviour. */
.cp-tile-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cp-tile-group.cp-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.cp-tile {
  position: relative;
}
.cp-tile input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cp-tile label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1.5px solid var(--border);
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  -webkit-transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;

  -moz-transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;

  -ms-transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;

  -webkit-transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;


  -moz-transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;


  -ms-transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;


  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.cp-tile label:hover {
  border-color: var(--gray-300);
}
.cp-tile .cp-tile-icon {
  width: 40px;
  height: 40px;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--primary) 14%, var(--card));
  color: var(--primary);
  -webkit-transition: background 200ms ease, color 200ms ease;

  -moz-transition: background 200ms ease, color 200ms ease;

  -ms-transition: background 200ms ease, color 200ms ease;

  -webkit-transition: background 200ms ease, color 200ms ease;


  -moz-transition: background 200ms ease, color 200ms ease;


  -ms-transition: background 200ms ease, color 200ms ease;


  transition: background 200ms ease, color 200ms ease;
}
.cp-tile .cp-tile-icon svg {
  width: 22px;
  height: 22px;
}
.cp-tile .cp-tile-body {
  flex: 1;
  min-width: 0;
}
.cp-tile .cp-tile-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  display: block;
}
.cp-tile .cp-tile-desc {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted-foreground);
  display: block;
  margin-top: 2px;
}
.cp-tile .cp-tile-check {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 9999px;

  -moz-border-radius: 9999px;

  -webkit-border-radius: 9999px;


  -moz-border-radius: 9999px;


  border-radius: 9999px;
  border: 1.5px solid var(--gray-300);
  background: var(--card);
}

/* Selected tile: accent-green outline (same 1.5px stroke weight, not
   thickened) + accent-green filled check — matches account-creation's
   selectable-card pattern. Background stays --card; only outline, icon tint
   and the check dot carry the accent colour. */
.cp-tile input:checked + label {
  border-color: var(--accent);
}
.cp-tile input:checked + label .cp-tile-icon {
  background: color-mix(in oklch, var(--accent) 22%, var(--card));
  color: var(--accent);
}
.cp-tile input:checked + label .cp-tile-check {
  border-color: var(--accent);
  background: var(--accent);
}
.cp-tile input:checked + label .cp-tile-check::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.cp-tile input:focus-visible + label {
  outline: 2px solid var(--ring, var(--accent));
  outline-offset: 2px;
}

/* Template Chooser gallery (prototypes/02-template-chooser.html). Pick-only
   radiogroup of placeholder cards -- no colour/theme-preset toggle for V1
   and no real template catalog yet, only
   honest CSS-wireframe thumbnails standing in for real screenshots.
   role="radiogroup"/"radio" + aria-checked carry the semantics; selection
   itself is a plain click-toggled class (.is-selected), matching the
   prototype's actual JS rather than a hidden radio-input pattern. */
.cp-template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 820px) {
  .cp-template-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .cp-template-grid {
    grid-template-columns: 1fr;
  }
}

.cp-template-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--card);
  border: 1.5px solid var(--border);
  -webkit-border-radius: 12px;

  -moz-border-radius: 12px;

  -webkit-border-radius: 12px;


  -moz-border-radius: 12px;


  border-radius: 12px;
  -webkit-box-shadow: var(--shadow-sm, 0 1px 2px rgba(4, 22, 27, 0.06));

  -moz-box-shadow: var(--shadow-sm, 0 1px 2px rgba(4, 22, 27, 0.06));

  -webkit-box-shadow: var(--shadow-sm, 0 1px 2px rgba(4, 22, 27, 0.06));


  -moz-box-shadow: var(--shadow-sm, 0 1px 2px rgba(4, 22, 27, 0.06));


  box-shadow: var(--shadow-sm, 0 1px 2px rgba(4, 22, 27, 0.06));
  -webkit-transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;

  -moz-transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;

  -ms-transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;

  -webkit-transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;


  -moz-transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;


  -ms-transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;


  transition: border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.cp-template-card:hover {
  border-color: var(--gray-300);
}
.cp-template-card.is-selected {
  border-color: var(--accent);
}
/* Once something is picked, dim the rest slightly so the choice reads
   clearly -- matches the prototype's has-selection behaviour. */
.cp-template-grid.has-selection .cp-template-card:not(.is-selected) {
  opacity: 0.6;
}
.cp-template-card:focus-visible {
  outline: 2px solid var(--ring, var(--accent));
  outline-offset: 2px;
}

.cp-template-thumb {
  height: 120px;
  position: relative;
  background: var(--muted);
  overflow: hidden;
}
.cp-template-card.is-selected .cp-template-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}

/* Persistent accent-green checkmark badge, top-right -- stays visible once
   picked so the selection is always legible at a glance. */
.cp-template-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  -webkit-border-radius: 9999px;

  -moz-border-radius: 9999px;

  -webkit-border-radius: 9999px;


  -moz-border-radius: 9999px;


  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid var(--gray-300);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.cp-template-card.is-selected .cp-template-check {
  display: flex;
  border-color: var(--accent);
  background: var(--accent);
}
.cp-template-check svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

.cp-template-info {
  padding: 14px 16px 0;
}
.cp-template-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
}
.cp-template-category {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.cp-template-actions {
  display: flex;
  gap: 8px;
  padding: 16px;
}
.cp-template-actions .btn {
  flex: 1;
}

/* ── Plan step (prototypes/03-plan.html) ────────────────────────────────────
   Professional/Business category picker, tier cards. Feature-bullet "learn
   more" tooltips from the prototype are intentionally NOT reproduced here
   (a floating-popover system with no DS precedent, for placeholder copy
   marked "not real product copy" in the prototype itself) -- bullets render
   as a plain checked list. Noted as a deliberate scope reduction. */
.cp-category-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 640px) {
  .cp-category-toggle {
    grid-template-columns: 1fr;
  }
}
.cp-category-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans, inherit);
  -webkit-transition: border-color 200ms ease, background 200ms ease;

  -moz-transition: border-color 200ms ease, background 200ms ease;

  -ms-transition: border-color 200ms ease, background 200ms ease;

  -webkit-transition: border-color 200ms ease, background 200ms ease;


  -moz-transition: border-color 200ms ease, background 200ms ease;


  -ms-transition: border-color 200ms ease, background 200ms ease;


  transition: border-color 200ms ease, background 200ms ease;
}
.cp-category-card:hover {
  border-color: var(--gray-300);
}
.cp-category-card.active {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 6%, var(--card));
}
.cp-category-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  border-radius: 8px;
  background: color-mix(in oklch, var(--primary) 14%, var(--card));
  color: var(--primary);
}
.cp-category-icon svg {
  width: 22px;
  height: 22px;
}
.cp-category-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  display: block;
}
.cp-category-desc {
  font-size: 13px;
  color: var(--muted-foreground);
  display: block;
  margin-top: 2px;
}

.cp-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.cp-plan-grid.cp-plan-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .cp-plan-grid,
  .cp-plan-grid.cp-plan-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .cp-plan-grid,
  .cp-plan-grid.cp-plan-grid-3 {
    grid-template-columns: 1fr;
  }
}

.cp-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1.5px solid var(--border);
  -webkit-border-radius: 12px;

  -moz-border-radius: 12px;

  -webkit-border-radius: 12px;


  -moz-border-radius: 12px;


  border-radius: 12px;
  padding: 20px;
  -webkit-transition: border-color 200ms ease;

  -moz-transition: border-color 200ms ease;

  -ms-transition: border-color 200ms ease;

  -webkit-transition: border-color 200ms ease;


  -moz-transition: border-color 200ms ease;


  -ms-transition: border-color 200ms ease;


  transition: border-color 200ms ease;
}
.cp-plan-card.is-selected {
  border-color: var(--accent);
  -webkit-box-shadow: 0 0 0 1.5px var(--accent);

  -moz-box-shadow: 0 0 0 1.5px var(--accent);

  -webkit-box-shadow: 0 0 0 1.5px var(--accent);


  -moz-box-shadow: 0 0 0 1.5px var(--accent);


  box-shadow: 0 0 0 1.5px var(--accent);
}
.cp-plan-ribbon {
  position: absolute;
  top: -11px;
  left: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  -webkit-border-radius: 9999px;

  -moz-border-radius: 9999px;

  -webkit-border-radius: 9999px;


  -moz-border-radius: 9999px;


  border-radius: 9999px;
}
.cp-plan-top {
  display: flex;
  flex-direction: column;
  /* Fixed-height top block so Select buttons align across a row regardless
     of blurb/name length -- design-decisions.md's "plan-card anatomy". */
  min-height: 190px;
}
.cp-plan-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--foreground);
}
.cp-plan-blurb {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 4px;
  min-height: 34px;
}
.cp-plan-price {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 600;
  color: var(--foreground);
}
.cp-plan-price .cp-plan-period {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted-foreground);
  margin-left: 2px;
}
.cp-plan-select-btn {
  margin-top: 14px;
  width: 100%;
}
.cp-plan-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
.cp-plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.cp-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--foreground);
}
.cp-plan-features li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent);
}

.cp-compare-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--link, var(--primary));
  text-decoration: none;
}
.cp-compare-link svg {
  width: 14px;
  height: 14px;
}

/* ── Billing step (prototypes/03b-payment.html) ─────────────────────────────
   Scoped down from the prototype's full checkout engine (custom
   payment-method popover mixing cards/ACH/invoice, a Billing Day/proration
   system, and live legitimizer tooltips) to a real, honest, non-functional
   placeholder: a cost summary, an optional trial checkbox, a saved-method
   radiogroup + "add a card" mock fields (real .vahara-custom-radio / real
   .field-group/.form-control, not a bespoke popover), a plain legitimizers
   row, and the terms-agreement checkbox. Never calls a live payment
   provider. Billing-engine internals are out of scope. */
.cp-cost-block {
  border: 1.5px solid var(--border);
  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;


  -moz-border-radius: 10px;


  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
.cp-cost-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cp-cost-block-plan {
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
}
.cp-cost-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  color: var(--foreground);
  padding: 4px 0;
}
.cp-cost-line.is-savings span:last-child {
  color: var(--accent);
  font-weight: 600;
}
.cp-cost-line-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}
.cp-cost-line.is-total {
  font-size: 15px;
  font-weight: 600;
}

.cp-billing-section {
  margin-bottom: 24px;
}

.cp-payment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  -webkit-border-radius: 8px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;


  -moz-border-radius: 8px;


  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: border-color 200ms ease;

  -moz-transition: border-color 200ms ease;

  -ms-transition: border-color 200ms ease;

  -webkit-transition: border-color 200ms ease;


  -moz-transition: border-color 200ms ease;


  -ms-transition: border-color 200ms ease;


  transition: border-color 200ms ease;
}
.cp-payment-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cp-payment-option:hover {
  border-color: var(--gray-300);
}
.cp-payment-option.is-selected {
  border-color: var(--accent);
}
/* Same selection-dot language as .cp-tile-check, reused here for visual
   consistency across every radiogroup in this flow (About's starting-point
   tiles, the Template Chooser, and this payment-method list). */
.cp-payment-check {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  -webkit-border-radius: 9999px;

  -moz-border-radius: 9999px;

  -webkit-border-radius: 9999px;


  -moz-border-radius: 9999px;


  border-radius: 9999px;
  border: 1.5px solid var(--gray-300);
  background: var(--card);
}
.cp-payment-option.is-selected .cp-payment-check {
  border-color: var(--accent);
  background: var(--accent);
}
.cp-payment-option.is-selected .cp-payment-check::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
.cp-payment-option input:focus-visible ~ .cp-payment-check {
  outline: 2px solid var(--ring, var(--accent));
  outline-offset: 2px;
}
.cp-payment-brand {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-foreground);
  width: 40px;
  flex-shrink: 0;
}
.cp-payment-details {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--foreground);
  flex-wrap: wrap;
}
.cp-payment-new-fields {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.cp-payment-new-fields.is-visible {
  display: flex;
}
.cp-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .cp-field-row {
    grid-template-columns: 1fr;
  }
}

.cp-legitimizers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
@media (max-width: 640px) {
  .cp-legitimizers {
    grid-template-columns: 1fr;
  }
}
.cp-legitimizer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-foreground);
  justify-content: center;
}
.cp-legitimizer svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Done (prototypes/05-done.html) ─────────────────────────────────────────
   The real propeller icon from web/partials/loader.blade.php, recolored via
   currentColor so light/dark just work, with a brief spin-up settling into
   a slow idle spin -- a deliberate simplification of the prototype's full
   choreographed pull-cord sequence (three failed yanks, then a catch). */
.cp-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.cp-done-propeller path {
  fill: var(--gray-800);
}
.cp-done-propeller {
  -webkit-animation: cp-propeller-spin-up 900ms cubic-bezier(0.2, 0.8, 0.4, 1) 1,
    cp-propeller-idle 3s linear infinite 900ms;

  -moz-animation: cp-propeller-spin-up 900ms cubic-bezier(0.2, 0.8, 0.4, 1) 1,
    cp-propeller-idle 3s linear infinite 900ms;

  -ms-animation: cp-propeller-spin-up 900ms cubic-bezier(0.2, 0.8, 0.4, 1) 1,
    cp-propeller-idle 3s linear infinite 900ms;

  -webkit-animation: cp-propeller-spin-up 900ms cubic-bezier(0.2, 0.8, 0.4, 1) 1,
    cp-propeller-idle 3s linear infinite 900ms;


  -moz-animation: cp-propeller-spin-up 900ms cubic-bezier(0.2, 0.8, 0.4, 1) 1,
    cp-propeller-idle 3s linear infinite 900ms;


  -ms-animation: cp-propeller-spin-up 900ms cubic-bezier(0.2, 0.8, 0.4, 1) 1,
    cp-propeller-idle 3s linear infinite 900ms;


  animation: cp-propeller-spin-up 900ms cubic-bezier(0.2, 0.8, 0.4, 1) 1,
    cp-propeller-idle 3s linear infinite 900ms;
  transform-origin: 50% 50%;
}
@keyframes cp-propeller-spin-up {
  from {
    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -webkit-transform: rotate(0deg);


    -moz-transform: rotate(0deg);


    -ms-transform: rotate(0deg);


    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1080deg);

    -moz-transform: rotate(1080deg);

    -ms-transform: rotate(1080deg);

    -webkit-transform: rotate(1080deg);


    -moz-transform: rotate(1080deg);


    -ms-transform: rotate(1080deg);


    transform: rotate(1080deg);
  }
}
@keyframes cp-propeller-idle {
  from {
    -webkit-transform: rotate(1080deg);

    -moz-transform: rotate(1080deg);

    -ms-transform: rotate(1080deg);

    -webkit-transform: rotate(1080deg);


    -moz-transform: rotate(1080deg);


    -ms-transform: rotate(1080deg);


    transform: rotate(1080deg);
  }
  to {
    -webkit-transform: rotate(1440deg);

    -moz-transform: rotate(1440deg);

    -ms-transform: rotate(1440deg);

    -webkit-transform: rotate(1440deg);


    -moz-transform: rotate(1440deg);


    -ms-transform: rotate(1440deg);


    transform: rotate(1440deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-done-propeller {
    -webkit-animation: none;

    -moz-animation: none;

    -ms-animation: none;

    -webkit-animation: none;


    -moz-animation: none;


    -ms-animation: none;


    animation: none;
  }
}

.cp-terms-gate {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}


/* End import from ./components/create-project.css */

/* Site Configuration section (/site/{id}/...) redesign — namespaced .sc-* */
/* Imported from ./components/site-config.css */
/* =============================================================================
   Site Configuration section (the /site/{id}/... experience-config pages)
   =============================================================================
   Shared component layer for the redesigned site-configuration section, applied
   on top of the design-system theme. Mirrors the approved mockup
   (mockups/website-config/) but reuses DS primitives:
     - buttons:  .btn .btn-primary | .btn-secondary | .btn-destructive .btn-m
     - icons:    <img class="vh-icon-primary|accent|danger|white|…"> from /assets/icons
   Only genuinely-new, section-shared components live here, all namespaced .sc-*.

   Pages opt in with @section('body-class', 'sc-redesign'); unconverted pages keep
   the old white-card .site-editor-content layout untouched.
   ============================================================================= */

/* Redesigned pages: the layout's content area becomes the gray "page" surface;
   each page paints white .sc-card surfaces on top. */
body.sc-redesign .site-editor-content {
    background: var(--gray-25);
    padding: 0;
    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    -webkit-border-radius: 0;


    -moz-border-radius: 0;


    border-radius: 0;
    min-height: calc(100vh - 50px);
}

/* ----------------------------------------------------------------------------
   Page chrome
   ---------------------------------------------------------------------------- */
.sc-page { padding: 32px 40px 72px; }
.sc-inner { max-width: 1040px; margin: 0 auto; }
.sc-inner.is-narrow { max-width: 720px; }

.sc-backlink {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600;
    color: var(--gray-500); margin-bottom: 14px; text-decoration: none;
}
.sc-backlink:hover { color: var(--primary); }
.sc-backlink:hover img { filter: brightness(0) saturate(100%) invert(29%) sepia(17%) saturate(5854%) hue-rotate(150deg) brightness(89%) contrast(90%); }

.sc-heading-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 24px;
}
.sc-heading-text { flex: 1; min-width: 0; }
.sc-page-heading { font-size: 22px; font-weight: 700; color: var(--gray-900); margin: 0 0 4px; line-height: 1.2; }
.sc-page-sub { font-size: 14px; color: var(--gray-500); margin: 0; line-height: 1.5; }
.sc-heading-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ----------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------------- */
.sc-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;


    -moz-border-radius: 10px;


    border-radius: 10px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04);

    -moz-box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04);

    -webkit-box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04);


    -moz-box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04);


    box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04);
    overflow: hidden;
}
.sc-card-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 18px 24px 14px;
}
.sc-card-title { font-size: 15px; font-weight: 600; color: var(--gray-900); margin: 0 0 2px; }
.sc-card-sub { font-size: 13px; color: var(--gray-400); margin: 0; line-height: 1.5; }
.sc-card-body { padding: 8px 24px 24px; }
.sc-card-body.is-flush { padding: 16px; }
.sc-card.is-danger { border-color: rgba(240, 94, 115, 0.28); }
.sc-card.is-danger .sc-card-title { color: var(--destructive); }

.sc-save-row {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gray-50);
}

/* ----------------------------------------------------------------------------
   Form fields
   ---------------------------------------------------------------------------- */
.sc-field { margin-bottom: 18px; max-width: 480px; }
.sc-field:last-child { margin-bottom: 0; }
.sc-field-label { display: block; font-size: 14px; font-weight: 500; color: var(--gray-500); margin-bottom: 6px; }
.sc-input, .sc-select, .sc-textarea {
    width: 100%; height: 40px; padding: 0 12px;
    border: 1.5px solid var(--gray-100); -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;

 -moz-border-radius: 6px;

 border-radius: 6px;
    font-family: inherit; font-size: 15px; color: var(--gray-900);
    background: var(--white); outline: none;
    -webkit-transition: border-color 0.15s, box-shadow 0.15s;

    -moz-transition: border-color 0.15s, box-shadow 0.15s;

    -ms-transition: border-color 0.15s, box-shadow 0.15s;

    -webkit-transition: border-color 0.15s, box-shadow 0.15s;


    -moz-transition: border-color 0.15s, box-shadow 0.15s;


    -ms-transition: border-color 0.15s, box-shadow 0.15s;


    transition: border-color 0.15s, box-shadow 0.15s;
}
.sc-textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.sc-select {
    appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239DADB3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}
.sc-input:focus, .sc-select:focus, .sc-textarea:focus { border-color: var(--accent); -webkit-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2);
 -moz-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2);
 -webkit-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2);

 -moz-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2);

 box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2); }
.sc-field-hint { font-size: 12px; color: var(--gray-400); margin-top: 6px; line-height: 1.45; }
.sc-char-counter { font-size: 12px; color: var(--gray-400); text-align: right; margin-top: 4px; }

/* Icon picker (radio inputs kept for behaviour; visually hidden) */
.sc-icon-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-icon-tile { position: relative; cursor: pointer; margin: 0; }
.sc-icon-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-icon-tile-box {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;

 -moz-border-radius: 8px;

 border-radius: 8px;
    border: 1.5px solid var(--gray-100); background: var(--white);
    -webkit-transition: all 0.15s;

    -moz-transition: all 0.15s;

    -ms-transition: all 0.15s;

    -webkit-transition: all 0.15s;


    -moz-transition: all 0.15s;


    -ms-transition: all 0.15s;


    transition: all 0.15s;
}
.sc-icon-tile:hover .sc-icon-tile-box { border-color: var(--gray-300); }
.sc-icon-tile:has(input:checked) .sc-icon-tile-box {
    border-color: var(--accent); background: var(--accent);
    -webkit-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.18);

    -moz-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.18);

    -webkit-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.18);


    -moz-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.18);


    box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.18);
}
.sc-icon-tile:has(input:checked) .sc-icon-tile-box img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(25deg) brightness(100%) contrast(100%);
}

/* Radio cards (radio inputs kept; visually hidden) */
.sc-radio-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.sc-radio-card {
    position: relative; display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 16px; border: 1.5px solid var(--gray-100); -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;

 -moz-border-radius: 8px;

 border-radius: 8px;
    background: var(--white); cursor: pointer; min-width: 220px; margin: 0;
    -webkit-transition: border-color 0.15s, background 0.15s;

    -moz-transition: border-color 0.15s, background 0.15s;

    -ms-transition: border-color 0.15s, background 0.15s;

    -webkit-transition: border-color 0.15s, background 0.15s;


    -moz-transition: border-color 0.15s, background 0.15s;


    -ms-transition: border-color 0.15s, background 0.15s;


    transition: border-color 0.15s, background 0.15s;
}
.sc-radio-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-radio-card:hover { border-color: var(--gray-300); }
.sc-radio-card:has(input:checked) { border-color: var(--primary); background: rgba(13, 107, 105, 0.04); }
.sc-radio-dot {
    width: 18px; height: 18px; -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;

 -moz-border-radius: 50%;

 border-radius: 50%; border: 2px solid var(--gray-200);
    flex-shrink: 0; margin-top: 1px; position: relative; -webkit-transition: border-color 0.15s;
 -moz-transition: border-color 0.15s;
 -ms-transition: border-color 0.15s;
 -webkit-transition: border-color 0.15s;

 -moz-transition: border-color 0.15s;

 -ms-transition: border-color 0.15s;

 transition: border-color 0.15s;
}
.sc-radio-card:has(input:checked) .sc-radio-dot { border-color: var(--primary); }
.sc-radio-card:has(input:checked) .sc-radio-dot::after { content: ""; position: absolute; inset: 3px; -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;

 -moz-border-radius: 50%;

 border-radius: 50%; background: var(--primary); }
.sc-radio-title { display: block; font-size: 14px; font-weight: 600; color: var(--gray-900); }
.sc-radio-desc { display: block; font-size: 12.5px; color: var(--gray-500); margin-top: 2px; line-height: 1.45; }

/* ----------------------------------------------------------------------------
   Square icon button (the DS lacks a clean one; used in list rows / tables)
   ---------------------------------------------------------------------------- */
.sc-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; -webkit-border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;

 -moz-border-radius: 7px;

 border-radius: 7px;
    border: 1.5px solid var(--gray-100); background: var(--white); cursor: pointer;
    -webkit-transition: background 0.15s, border-color 0.15s;

    -moz-transition: background 0.15s, border-color 0.15s;

    -ms-transition: background 0.15s, border-color 0.15s;

    -webkit-transition: background 0.15s, border-color 0.15s;


    -moz-transition: background 0.15s, border-color 0.15s;


    -ms-transition: background 0.15s, border-color 0.15s;


    transition: background 0.15s, border-color 0.15s;
}
.sc-icon-btn:hover { border-color: var(--gray-300); background: var(--gray-25); }
.sc-icon-btn.is-danger:hover { background: var(--destructive); border-color: var(--destructive); }
.sc-icon-btn.is-primary:hover { background: var(--primary); border-color: var(--primary); }
.sc-icon-btn.is-danger:hover img,
.sc-icon-btn.is-primary:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(25deg) brightness(100%) contrast(100%);
}

/* ----------------------------------------------------------------------------
   List rows (themes / assets / servers / layouts / partials / menu items)
   ---------------------------------------------------------------------------- */
.sc-list { display: flex; flex-direction: column; gap: 10px; }
.sc-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    border: 1.5px solid var(--gray-100); -webkit-border-radius: 9px;
 -moz-border-radius: 9px;
 -webkit-border-radius: 9px;

 -moz-border-radius: 9px;

 border-radius: 9px; background: var(--white);
    -webkit-transition: border-color 0.15s, box-shadow 0.15s;

    -moz-transition: border-color 0.15s, box-shadow 0.15s;

    -ms-transition: border-color 0.15s, box-shadow 0.15s;

    -webkit-transition: border-color 0.15s, box-shadow 0.15s;


    -moz-transition: border-color 0.15s, box-shadow 0.15s;


    -ms-transition: border-color 0.15s, box-shadow 0.15s;


    transition: border-color 0.15s, box-shadow 0.15s;
}
.sc-row:hover { border-color: var(--gray-150); -webkit-box-shadow: 0 2px 8px rgba(4, 22, 27, 0.06);
 -moz-box-shadow: 0 2px 8px rgba(4, 22, 27, 0.06);
 -webkit-box-shadow: 0 2px 8px rgba(4, 22, 27, 0.06);

 -moz-box-shadow: 0 2px 8px rgba(4, 22, 27, 0.06);

 box-shadow: 0 2px 8px rgba(4, 22, 27, 0.06); }
.sc-drag { display: flex; align-items: center; justify-content: center; width: 18px; cursor: grab; flex-shrink: 0; }
.sc-row-thumb {
    width: 44px; height: 44px; -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;

 -moz-border-radius: 8px;

 border-radius: 8px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--gray-25); border: 1px solid var(--gray-100);
}
.sc-row-thumb img.sc-thumb-photo { width: 100%; height: 100%; object-fit: cover; }
.sc-row-body { flex: 1; min-width: 0; }
.sc-row-name { font-size: 14px; font-weight: 600; color: var(--gray-900); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-row-sub { font-size: 12.5px; color: var(--gray-500); margin-top: 2px; }
.sc-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sc-add-row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* radio toggle for the "active" item (themes) */
.sc-radio-toggle { width: 18px; height: 18px; -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;

 -moz-border-radius: 50%;

 border-radius: 50%; border: 2px solid var(--gray-200); flex-shrink: 0; position: relative; cursor: pointer; }
.sc-radio-toggle.is-on { border-color: var(--primary); }
.sc-radio-toggle.is-on::after { content: ""; position: absolute; inset: 3px; -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;

 -moz-border-radius: 50%;

 border-radius: 50%; background: var(--primary); }

/* ----------------------------------------------------------------------------
   Search / filter toolbar
   ---------------------------------------------------------------------------- */
.sc-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--white); border: 1px solid var(--gray-100); -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;

 -moz-border-radius: 8px;

 border-radius: 8px;
    padding: 10px 14px; margin-bottom: 16px;
}
.sc-toolbar.is-split .sc-toolbar-left { display: flex; align-items: center; gap: 10px; }
.sc-toolbar.is-split .sc-search-wrap { flex: 0 1 320px; margin-left: auto; }
.sc-search-wrap { position: relative; flex: 1; min-width: 220px; }
.sc-search-wrap img { position: absolute; left: 11px; top: 50%; -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -webkit-transform: translateY(-50%);

 -moz-transform: translateY(-50%);

 -ms-transform: translateY(-50%);

 transform: translateY(-50%); pointer-events: none; }
.sc-search { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1.5px solid var(--gray-100); -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;

 -moz-border-radius: 6px;

 border-radius: 6px; font-family: inherit; font-size: 14px; color: var(--gray-900); background: var(--white); outline: none; }
.sc-filter {
    height: 36px; padding: 0 30px 0 11px; border: 1.5px solid var(--gray-100); -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;

 -moz-border-radius: 6px;

 border-radius: 6px;
    font-family: inherit; font-size: 14px; color: var(--gray-700); background: var(--white); cursor: pointer; min-width: 140px;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239DADB3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.sc-search:focus, .sc-filter:focus { border-color: var(--accent); -webkit-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2);
 -moz-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2);
 -webkit-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2);

 -moz-box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2);

 box-shadow: 0 0 0 2px rgba(11, 187, 166, 0.2); }

/* ----------------------------------------------------------------------------
   Table (outputs)
   ---------------------------------------------------------------------------- */
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-400); padding: 0 16px 12px; border-bottom: 1px solid var(--gray-50); white-space: nowrap; }
.sc-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--gray-50); font-size: 14px; color: var(--gray-700); vertical-align: middle; }
.sc-table tbody tr:last-child td { border-bottom: none; }
.sc-table tbody tr:hover { background: #FBFDFD; }
.sc-table .sc-cell-name { font-weight: 600; color: var(--gray-900); }
.sc-table .sc-cell-actions { text-align: right; white-space: nowrap; }
.sc-table .sc-tmpl { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12.5px; color: var(--gray-700); }
.sc-check { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; vertical-align: middle; }
.sc-table th.sc-col-check, .sc-table td.sc-col-check { width: 40px; padding-left: 18px; padding-right: 0; }
.sc-table th.sc-col-plus, .sc-table td.sc-col-plus { width: 56px; text-align: right; }
.sc-row-add { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;

 -moz-border-radius: 50%;

 border-radius: 50%; border: 1.5px solid var(--gray-150); background: var(--white); cursor: pointer; -webkit-transition: all 0.15s;
 -moz-transition: all 0.15s;
 -ms-transition: all 0.15s;
 -webkit-transition: all 0.15s;

 -moz-transition: all 0.15s;

 -ms-transition: all 0.15s;

 transition: all 0.15s; }
.sc-row-add:hover { border-color: var(--primary); background: var(--primary); }
.sc-row-add:hover img { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(25deg) brightness(100%) contrast(100%); }

/* ----------------------------------------------------------------------------
   Badges (section-specific tones not covered by .vh-badge)
   ---------------------------------------------------------------------------- */
.sc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 3px 10px; -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;

 -moz-border-radius: 20px;

 border-radius: 20px; border: 1.5px solid; white-space: nowrap; }
.sc-badge-success { color: #1da462; border-color: rgba(29,164,98,0.3); background: rgba(29,164,98,0.07); }
.sc-badge-primary { color: var(--primary); border-color: rgba(13,107,105,0.3); background: rgba(13,107,105,0.06); }
.sc-badge-violet  { color: #6B5CE7; border-color: rgba(107,92,231,0.35); background: rgba(107,92,231,0.06); }
.sc-badge-warning { color: #b86200; border-color: rgba(255,149,88,0.35); background: rgba(255,149,88,0.10); }
.sc-badge-info    { color: #0476a3; border-color: rgba(0,183,240,0.32); background: rgba(0,183,240,0.08); }
.sc-badge-neutral { color: var(--gray-600); border-color: var(--gray-100); background: var(--white); }
.sc-code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12.5px; color: var(--gray-700); background: var(--gray-25); border: 1px solid var(--gray-100); -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;

 -moz-border-radius: 5px;

 border-radius: 5px; padding: 1px 7px; }

/* ----------------------------------------------------------------------------
   Stat cards + landing tiles + info note (landing / summaries)
   ---------------------------------------------------------------------------- */
.sc-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.sc-stat-card { background: var(--white); border: 1px solid var(--gray-100); -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;

 -moz-border-radius: 8px;

 border-radius: 8px; padding: 18px 20px; }
a.sc-stat-card { display: block; -webkit-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 -moz-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 -ms-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 -webkit-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;

 -moz-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;

 -ms-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;

 transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; text-decoration: none; }
a.sc-stat-card:hover { border-color: var(--accent); -webkit-box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10);
 -moz-box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10);
 -webkit-box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10);

 -moz-box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10);

 box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10); -webkit-transform: translateY(-2px);
 -moz-transform: translateY(-2px);
 -ms-transform: translateY(-2px);
 -webkit-transform: translateY(-2px);

 -moz-transform: translateY(-2px);

 -ms-transform: translateY(-2px);

 transform: translateY(-2px); }
.sc-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); margin-bottom: 12px; }
.sc-stat-num { font-size: 34px; font-weight: 700; color: var(--gray-900); line-height: 1; }
.sc-stat-unit { font-size: 13px; color: var(--gray-500); margin-top: 6px; }
/* Multi-line stat card (key/value rows). .sc-stat-line avoids Bootstrap's .row. */
.sc-stat-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.sc-stat-line { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.sc-stat-line .k { color: var(--gray-700); }
.sc-stat-line .v { font-weight: 700; color: var(--gray-900); }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.sc-tile { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: var(--white); border: 1px solid var(--gray-100); -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04);
 -moz-box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04);
 -webkit-box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04);

 -moz-box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04);

 box-shadow: 0 1px 3px rgba(4, 22, 27, 0.04); text-decoration: none; -webkit-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 -moz-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 -ms-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
 -webkit-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;

 -moz-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;

 -ms-transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;

 transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.sc-tile:hover { border-color: var(--accent); -webkit-box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10);
 -moz-box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10);
 -webkit-box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10);

 -moz-box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10);

 box-shadow: 0 6px 20px rgba(4, 22, 27, 0.10); -webkit-transform: translateY(-2px);
 -moz-transform: translateY(-2px);
 -ms-transform: translateY(-2px);
 -webkit-transform: translateY(-2px);

 -moz-transform: translateY(-2px);

 -ms-transform: translateY(-2px);

 transform: translateY(-2px); }
/* Never underline the tile / stat-card / back-link text on hover (overrides theme a:hover). */
.sc-tile:hover, .sc-tile:focus,
a.sc-stat-card:hover, a.sc-stat-card:focus,
.sc-backlink:hover, .sc-backlink:focus { text-decoration: none; }
.sc-tile-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 border-radius: 10px; background: rgba(13, 107, 105, 0.09); flex-shrink: 0; }
.sc-tile-body { flex: 1; min-width: 0; padding-right: 14px; }
.sc-tile-title { display: block; font-size: 15.5px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
.sc-tile-desc { display: block; font-size: 13px; color: var(--gray-500); line-height: 1.5; }
.sc-tile-arrow { position: absolute; top: 22px; right: 18px; -webkit-transition: transform 0.15s;
 -moz-transition: transform 0.15s;
 -ms-transition: transform 0.15s;
 -webkit-transition: transform 0.15s;

 -moz-transition: transform 0.15s;

 -ms-transition: transform 0.15s;

 transition: transform 0.15s; }
.sc-tile:hover .sc-tile-arrow { -webkit-transform: translateX(3px);
 -moz-transform: translateX(3px);
 -ms-transform: translateX(3px);
 -webkit-transform: translateX(3px);

 -moz-transform: translateX(3px);

 -ms-transform: translateX(3px);

 transform: translateX(3px); }

.sc-note { display: flex; gap: 12px; background: var(--white); border: 1px solid var(--gray-100); -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;

 -moz-border-radius: 8px;

 border-radius: 8px; padding: 16px 18px; margin-top: 16px; }
.sc-note-icon { flex-shrink: 0; margin-top: 1px; }
.sc-note-body { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
.sc-note-body strong { color: var(--gray-900); }

.sc-muted { color: var(--gray-400); }

@media (max-width: 720px) {
    .sc-page { padding: 24px 18px 60px; }
    .sc-heading-row { flex-direction: column; }
}

/* End import from ./components/site-config.css */

/* App shell — was app-in-dev.css. Last, to keep the cascade order it had. */
/* Imported from ./components/app-shell.css */
/* ── App shell ───────────────────────────────────────────────────────────────
   Was public/css/app-in-dev.css, a fourth stylesheet loaded after the theme on
   every app page. Its name said it was temporary; it had been there long
   enough to accumulate 93 rules.

   Most of it was never overrides. 83 of those rules style things the theme had
   nothing to say about — the sticky header, breadcrumbs, the column system,
   icon sizing — so they were design system components living outside the design
   system. They are here now, verbatim, in their original order.

   Dropped on the way in: six rules whose classes appear in no markup anywhere
   in the repo, and one that repeated a theme rule word for word.

   One rule here genuinely contradicted the theme — it cancelled the portlet
   box-shadow that portlets.css declared. That is now resolved at the source:
   portlets.css no longer declares a shadow, and the cancel is gone.

   Two others were flagged as contradictions and were not. Both sit inside
   @media blocks — a max-width:768px override of .main-wrapper padding and a
   max-width:600px override of the colour-selector size — so they are ordinary
   responsive rules. The script that flagged them flattened at-rules, which
   compared media-scoped rules against unconditional ones as equals.

   This file is imported last in main.css, which is the cascade position the old
   stylesheet had.
   ────────────────────────────────────────────────────────────────────────── */

.column-regular {
    display:block;
    max-width:672px;
    margin:0 auto;
    position: relative;
}


.row > .column-regular {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}


.column-regular.column-auto-expand-collapse:focus-within {
    max-width: 100%;
}


.column-regular.column-expandable {
    pointer-events: none;
}


.floating-container {
    background-color:#fff;
    -webkit-box-shadow: 0 2px 8px 1px rgb(0 0 0 / 13%);

    -moz-box-shadow: 0 2px 8px 1px rgb(0 0 0 / 13%);

    -webkit-box-shadow: 0 2px 8px 1px rgb(0 0 0 / 13%);


    -moz-box-shadow: 0 2px 8px 1px rgb(0 0 0 / 13%);


    box-shadow: 0 2px 8px 1px rgb(0 0 0 / 13%);
}



.column-regular.column-expandable:before {
    content: "\f065";
    font-family: FontAwesome;
    cursor: pointer;
    pointer-events: auto;
}


.column-regular.column-expandable label, .column-regular.column-expandable > div, .column-regular.column-expandable .form-control, .column-regular.column-expandable input, .column-regular.column-expandable select, .column-regular.column-expandable textarea {
    pointer-events: auto;
}



.app-page-content-wrapper {
    height: auto;
    max-width: 736px;
    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;


    -moz-border-radius: 3px;


    border-radius: 3px;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.13);

    -moz-box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.13);

    -webkit-box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.13);


    -moz-box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.13);


    box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.13);
    padding-bottom: 50px;
    padding-top: 50px;
    margin:0 auto;
}


/* Header rules moved intact to page-header.css. */

.portlet > .body {
    padding: 8.6rem 2.2rem 5rem !important;
}

.popup-breadcrumb-left-position .arrow {
    display: none !important;
}


.popup-breadcrumb-left-position  {
    border: none;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;

    -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;

    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;


    -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;


    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}


.header-breadcrumb-ul {
    padding: 12px 10px;
    margin-bottom: 0;
}


.header-breadcrumb-li {
    list-style: none;
    font-size: 13px;
    cursor: pointer;
    padding: 5px;
    margin: 0;
}


.header-breadcrumb-li:hover {
    font-weight: 500;

}


.header-breadcrumb-li a:hover {
    margin-bottom:0px !important;
}


.header-breadcrumb-li span {
    margin-left: 5px;
    color: #333333;
    letter-spacing: 0.44px;
    line-height: 16px;
}


.header-breadcrumb-li .action-delete, .header-breadcrumb-li .action-delete > span {
    color: #EF9595 !important;
}


.header-label {
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
}


.breadcrumbs {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.overflow-wrap-section {
    max-width: 100%;
    min-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
}

 /* icons css start */
.text-size {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
}

.icon-size{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    display: flex;
    height: 16px;
    align-items: center;

}

.icon-text:not(.input-control){
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    display: flex;
    align-items: center;
    text-align: center;
}

.icon-xs {
    width: 16px;
    height: 16px;
}


.icon-s {
    width: 20px;
    height: 20px;
}


.icon-m {
    width: 24px;
    height: 24px;
}


.icon-l {
    width: 32px;
    height: 32px;
}


.icon-xl {
    width: 40px;
    height: 40px;
}

.use-cases{
    margin-top: 25px;
}

.para{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
}

.table-heading{
    color: #9ea1ab;
    font-size: 15px;
}

.table-body{
    color: #1a1a1a;
    font-size: 15px;
    font-weight: 600;
    margin-top: 5px;
}


@media screen and (max-width: 768px) {
    /* This used to unconditionally hide the
       breadcrumb below 768px. It was never clipped or missing -- verified
       live at 375px: the header renders 152px tall with `overflow: visible`
       and the breadcrumb element is present in the DOM, just hidden here.
       Paul wants it back. Layout (hamburger clearance, no-wrap/scroll so a
       long trail can't push the row) lives with `#sticky-header
       .breadcrumb-container` in custom.css, next to the rest of that
       element's styling. */
    .mobile-nav {
        width: 100% !important;
        position: fixed !important;
        background: #ffff;
        opacity: 1;
        padding: 10px 20px !important;
        min-height: 0;
        top: 0;
        left: 0;
    }
    .mobile-nav .icon {
        position: absolute;
        right: 0;
        top: -50px;
        background-color: #E7EBEF;
        padding: 10px 15px 5px 15px;
    }
    .mobile-nav a {
        float: none;
        display: none;
        text-align: left;
        clear: both;
    }
    .mobile-nav .d-sm-none {
        display: none;
    }

    .mobile-nav a.icon {
        float: right;
        display: block;
        z-index: 999;
    }

    .mobile-nav:not(.vh-header-actions__mobile).responsive a:first-child {
        margin-top: 10px;
    }

    .mobile-nav:not(.vh-header-actions__mobile).responsive a {
        float: none;
        display: block;
        text-align: center;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .mobile-nav:not(.vh-header-actions__mobile) .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.5 !important;
        vertical-align: middle !important;
        padding: 0.375rem 0.75rem !important;
        height: 35px !important;
    }

    .main-wrapper {
        padding-left: 0!important;
        padding-right: 0!important;
    }

    .popup-breadcrumb-left-position {
        left: 0px !important;
    }

    .d-sm-none {
        display: none;
    }

    .standard-header-mobile-nav-menu {
        top: 16px !important;
        position: fixed !important;
        right: 10px !important;
        background-color: #E7EBEF;
        padding: 8px 15px 8px 15px;
        z-index: 999;
    }

    .header-label {
        max-width: 80%;
    }

    .breadcrumbs {
        max-width: 90%;
    }
}


.vertically-centered-section {
    display: flex !important;
    align-items: center;
}


.vertically-centered-section h3 {
    line-height: 0;
}


.vertically-centered-section .header-label {
    line-height: normal;
}


.flex-content-right {
    justify-content: flex-end;
}


.flex-content-right a {
    margin-left: 5px;
}


@media screen and (min-width: 768px) {
    .vertically-centered-btn-section {
        display: flex !important;
        align-items: center;
    }

    .flex-content-right {
        justify-content: flex-end;
    }

    .flex-content-right a {
        margin-left: 5px;
    }
}


.sticky-header-restore {
    left: calc(310px);
    margin-top: 70px;
    padding: 7px 0;
    height: 45px;
    background-color: #eceef0 !important;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    -webkit-box-shadow: 0 1px 8px 0px rgba(0, 0, 0, 0.13);

    -moz-box-shadow: 0 1px 8px 0px rgba(0, 0, 0, 0.13);

    -webkit-box-shadow: 0 1px 8px 0px rgba(0, 0, 0, 0.13);


    -moz-box-shadow: 0 1px 8px 0px rgba(0, 0, 0, 0.13);


    box-shadow: 0 1px 8px 0px rgba(0, 0, 0, 0.13);
}


.sticky-header-restore span, .sticky-header-restore a {
    color: #8A8D8E;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    text-decoration: none;
    cursor: auto;
    letter-spacing: 0;
}


.sticky-header-restore a {
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sticky-header-restore a:hover {
    text-decoration: none;
    color: #585c5d;
    cursor: pointer;
}

.form-input {
    display: inline-block;
    width: 100%;
    border: 1px solid #b9c0cb;
    height: 40px;
    outline: none;
    padding: 0 11px;
    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;


    -moz-border-radius: 3px;


    border-radius: 3px;
    -webkit-transition: border 0.5s;

    -moz-transition: border 0.5s;

    -ms-transition: border 0.5s;

    -webkit-transition: border 0.5s;


    -moz-transition: border 0.5s;


    -ms-transition: border 0.5s;


    transition: border 0.5s;
    font-family: "Open Sans", sans-serif;
    color: #1a1a1a;
    font-size: 14px;
}

.column-regular .form-control {
    max-width: 100% !important;
}

/* styles for selecting color field */
@media only screen and (max-width: 600px) {
    .vahara-color-selector input[type="radio"] {
        width: 70px !important;
        height: 70px !important;
    }
    .vahara-color-selector input[type="radio"]+span.vahara-color-selector-radio {
        width: 70px !important;
        height: 70px !important;
    }
    .vahara-color-selector {
        height: 86px !important;
        width: 86px !important;
    }
    .selected-color-parent span {
        font-size: 12px !important;
    }
}


@media (max-width: 767px) {
    .portlet > .body {
        padding: 7rem 0rem 5rem !important;
    }

    .px-sm-0 {
        padding-left: 0!important;
        padding-right: 0!important;
    }

    .mb-sm-2 {
        margin-bottom: 0.5rem!important;
    }
    .mb-sm-3 {
        margin-bottom: 1rem!important;
    }

    .vahara-drag-n-drop-list .list-group-item {
        /*padding-left: 0!important;
        padding-right: 0!important;*/
    }

    .vahara-drag-n-drop-list .list-group-item[data-is-group="true"] .list-group.nested-sortable {
        padding-left: 2rem!important;
        padding-right: 0.5rem!important;
    }
}

/* End import from ./components/app-shell.css */

/* Page header -- last, so the .vh-header--react rules moved in from the
   React bundle (previously injected after the whole theme) keep winning
   any equal-specificity tie the way they did before the move. */
/* Imported from ./components/page-header.css */
/* Page header component -- everything that paints the top-of-page header
   and its breadcrumb row, for both implementations: the Blade
   `standard-header` component and the React header the data-table screens
   render (Layout/PageHeader.js + PageTitle.js + Breadcrumb.js).

   Layout:
     1. Rules with no modifier prefix already apply to both implementations
        today (theme-layer rules, or selectors -- like #sticky-header --
        that both implementations render identically) and are left
        unscoped.
     2. `.vh-header--blade` rules match only Blade's standard-header markup;
        that modifier class is added by standard-header.blade.php itself.
     3. `.vh-header--react` rules match only the React header's markup;
        that modifier class is added by Layout/PageHeader.js itself.
   Availability gates use :where() to preserve the original specificity.
   Standalone PageTitle paint also matches .vh-inline-datatable; the showroom
   breadcrumb illustration shares only the breadcrumb rules.
   The two scoped sections intentionally still differ from each other in
   several places (padding, left-offset handling, hover-reveal behaviour) --
   that gap is closed by a later, dedicated visual pass, not here. */

/* ---- Legacy theme rules: custom.css, then app-shell.css (original order) ---- */

/* TOP HEADER CSS*/
.top-header.sticky-header {
    height: 88px;
    padding: 0;
}

.top-header.sticky-header .vertically-centered-section {
    align-items: normal;
    flex-direction: column;
    justify-content: center;

    position: initial;
    flex: 1 0 auto;
    max-width: calc(50% - 10px); /* Adjust the value to fit your desired spacing */
    margin: 5px;
}

.top-header.sticky-header .item-header-title, .top-header.sticky-header .standard-header-title {
    font-weight: 600;
    line-height: 27px;
    width: auto;
    letter-spacing: 0.44px;
}

.top-header.sticky-header .standard-header-title {
    display: flex;
    align-items: center;
}

.top-header.sticky-header .breadcrumb-header ul {
    display: flex;
    align-items: flex-end;
}

.top-header.sticky-header .breadcrumb-header ul.breadcrumbs li:not(:first-child):before {
    margin-left: 10px;
    margin-right: 10px;
    content: url("/img/chevron-right-400.svg");
    vertical-align: middle;
}

.top-header.sticky-header .top-header-right-section-md {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 32px;

    flex-shrink: 0;
    flex-grow: 1;
    max-width: 80%;
    margin: 5px 0;
}

.top-header.sticky-header .top-header-right-section-md .btn {
    margin-left: 8px;
}

.top-header.sticky-header .top-header-right-section-md .btn-group > .btn:first-child {
    margin-right: 0px;
}

.top-header.sticky-header .breadcrumb-header {
    position: absolute;
    margin-top: 43px;
    max-width: calc(100% - 75px);
}

.top-header.sticky-header .subheading-inline {
    display: flex;
    align-items: center;
    line-height: 1;
    overflow: hidden;
}

.top-header.sticky-header .subheading-inline:last-child {
    height: 42px
}

.top-header.sticky-header .subheading-inline label, .subheading-inline a {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.01em;
    color: #525657;
    margin: 0;
    margin-left: 9px;
}

.top-header.sticky-header .subheading-inline label {
    line-height: 42px;
    height: 42px;
}

.top-header.sticky-header .subheading-inline a {
    margin-left: 28px;
}

.top-header.sticky-header .subheading-filter-wrapper,
.top-header.sticky-header .unpublished-changes-wrapper {
    position: absolute;
    width: 100%;
    background: #ECEEF0;
    height: 42px;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);

    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);

    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);


    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);


    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    margin-left: -2px;
}

.top-header.sticky-header .subheading-filter-wrapper {
    background: var(--ghostwhite) !important;
    margin-left: 0px;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);

    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);

    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);


    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);


    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    height: 70px;
}

.top-header.sticky-header .top-header-first {
    z-index: 999;
    position: relative;
    background: white;
    margin: 0;
    flex-wrap: nowrap;
}

.top-header.sticky-header .col-md-12.unpublished-changes-wrapper {
    display: none !important;
}

.top-header.sticky-header .btn-search-structure > .hover-icon {
    display: none;
}

.top-header.sticky-header .btn-search-structure:hover > .hover-icon {
    display: inline-block !important;
}

.top-header.sticky-header .btn-search-structure:hover > .plane-icon {
    display: none !important;
}

.top-header.sticky-header .search-container.active input {
    width: 240px !important;
    height: 32px;
    padding: 0 20px 0 30px;
}

.top-header.sticky-header .vh-search-container {
    display: inline-flex;
    align-items: center;
}

.top-header.sticky-header .search-container .search {
    display: flex;
    height: 20px;
}

.top-header.sticky-header .search-container .close {
    height: 32px;
}

@media (max-width: 768px) {
    /* The sidebar toggle stays in the cluster at every width. */

    .top-header.sticky-header .top-header-right-section-md {
        display: none;
    }

    .top-header.sticky-header .standard-header-mobile-nav-menu {
        top: 25px !important;
    }
    .top-header.sticky-header .vertically-centered-section {
        max-width: calc(85% - 65px);
    }

    .top-header.sticky-header .breadcrumb-header {
        max-width: calc(100% - 25px);
    }
}

.top-header.sticky-header .badge-plus {
    margin: 0 2px;
    display: flex;
    align-items: center;
}

.breadcrumbs li a {
    position: relative;
}

#sticky-header.top-header.sticky-header .breadcrumb-header ul.breadcrumbs li {
    height: auto !important;
    padding-bottom: 4px !important;
    padding-top: 10px !important;
    max-width: 150px;
}

.breadcrumbs li a:hover:after {
    -webkit-transform: scaleX(1);

    -moz-transform: scaleX(1);

    -ms-transform: scaleX(1);

    -webkit-transform: scaleX(1);


    -moz-transform: scaleX(1);


    -ms-transform: scaleX(1);


    transform: scaleX(1);
    transform-origin: bottom left;
}

/** item edit header / standardized header classes **/

.sticky-header {
    position: fixed;
    top: 0;
    bottom: 0;
    right:0;
    left: 0;
    z-index: 999;
    /*width: 100%;*/
    border-bottom: 1.5px solid #ECEEF0;
    height: 70px;
    padding-top: 15px;

}


@media screen and (max-width: 992px) {
    .sticky-header {
        left: 0px!important;
    }
}

@media screen and (min-width: 993px) {
    .sticky-header {
        left: 220px;

    }
}






.sticky-header .header-wrapper {
    display: flex;
    align-items: center;
}


.sticky-header .item-badge-light {
    background: #E7EBEF;
    font-weight: normal;
    font-size: 12px;
}

.sticky-header .item-header-title, .sticky-header .standard-header-title {
    font-size: 1.25rem;
    margin-bottom: 0;
}


.breadcrumb-header {
    /*margin-top: 25px;*/
}

.sticky-header .breadcrumb-header ul.breadcrumbs {
    display: inline-block;
    width: 100%;
    height: 100%;
}


.sticky-header .breadcrumb-header ul.breadcrumbs li {
    width: auto;
    display: inline-block;
    vertical-align: middle;
    color: #9FA5B0;
    font-size: 11px;
    font-weight: 500;
    margin: 0 !important;
    padding: 0 !important;

}


.sticky-header .breadcrumb-header ul.breadcrumbs li:not(:first-child):before {
    content: '\f105';
    /*margin-left: 5px;*/
    margin-right: 5px;
    color: #9ea1ab;
    font: normal normal normal 14px/1 FontAwesome;
}


.sticky-header .breadcrumb-header ul.breadcrumbs li a,
.sticky-header a {
    color: #9ea1ab;
    text-decoration: none !important;
}


.sticky-header .btn-secondary {
    padding: 0.25rem 0.8rem 0.25rem 0.8rem;

}

.sticky-header .btn {
    font-size: 14px;
}




.sticky-header .sticky-header-toggle-dropdown {
    cursor: pointer;
}






/* ---- Account-shell positioning ---- */

/* Persistent account navigation occupies no content padding. */
body.account-layout {
  --sidebar-total-width: 0px;
}

@media (min-width: 993px) {
  body.account-layout:not(.modal-mode):has(#sidebar.sidebar-offcanvas:not(.has-submenu) ~ .main-wrapper.with-sidebar) {
    --sidebar-total-width: 248px;
  }

  body.account-layout:not(.modal-mode):has(#sidebar.sidebar-offcanvas.has-submenu ~ .main-wrapper.with-sidebar) {
    --sidebar-total-width: 316px; /* 60px rail + 256px submenu (was 321 with the 65px rail) */
  }
}

/* Non-account Blade shells retain their existing fallback. */
.top-header.sticky-header:where(.vh-header--blade) {
  left: var(--sidebar-total-width, 278px);
}

body.account-layout .top-header.sticky-header:where(.vh-header--blade, .vh-header--react) {
  left: var(--sidebar-total-width);
}

/* ---- Live header chrome (custom.css) ----

   THE HEADER, BY WHATEVER NAME. These rules used to key on `#sticky-header`
   alone -- the id every product page's header carries. A showroom copy cannot
   carry it (a page showing a header inside a documentation page already has
   one, and two elements cannot share an id), so every preview rendered
   without the crumb hairline, without the header's own padding and with a
   smaller title than the product's. The selector now also names the two
   renderer modifiers the components themselves emit, so the chrome follows
   the header rather than one page's id. `:is()` takes the highest
   specificity of its arguments, so the id weight these rules are written
   against is unchanged, and a product header -- which carries the id AND the
   modifier -- matches exactly as before. */

:is(#sticky-header, .vh-header--blade, .vh-header--react) {
  z-index: 999;
  height: 113px;
  /* ONE HAIRLINE, THE SAME ONE AS THE CRUMB AND THE HEAD ROW. It was
     `1.5px var(--border)`: `--border` is rgb(236,238,240), which is also the
     page ground a Blade header sits above, so in the product that stroke was
     invisible -- sampled on Orbit /contact, the 9px strip across the header's
     bottom edge was a single flat rgb(236,238,240). `--gray-200`
     (rgb(185,198,203)) is the token every other rule in this header already
     uses, at the 1px the rest of them use. */
  border-bottom: 1px solid var(--gray-200);
}
:is(#sticky-header, .vh-header--blade, .vh-header--react).no-border {
  border-bottom: 0;
}
/* ONE HAIRLINE COLOUR IN DARK MODE. `--gray-200` is a
   fixed palette step, so every chrome line declared with it stayed
   light-mode-bright on a dark ground while the lines that use `--border`
   swapped to `--gray-800`. The split ran through the middle of one set of
   lines -- the crumb bar and the header's bottom edge stayed pale while the
   head-row seam and the pagination bar went dark. `--gray-800` is the house
   dark pairing (it is what `--border` resolves to under `.dark`), so it is
   what all of them use. */
body.dark :is(#sticky-header, .vh-header--blade, .vh-header--react),
body.dark :is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container,
body.dark :where(.vh-header--react, .vh-breadcrumb-preview) nav[aria-label="breadcrumb"] {
  border-bottom-color: var(--gray-800, #21343C);
}/* 4px, not 8px — a 32px band rather than 40px ("a little too tall").
   This unscoped rule sets the Blade breadcrumb's border; the
   .vh-header--react rule further down overrides it back to none
   for the React header specifically. */
:is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container {
  /* ONE CRUMB BAND, 32px + a 1px hairline = 33, in both renderers. The React
     header hangs the band on its `nav[aria-label="breadcrumb"]` wrapper
     (`min-height: 32px` further down this file) and zeroes this element's own
     border; the Blade header has no such wrapper, so this element IS the
     band -- and with only `padding: 4px 8px` around a 22px crumb it measured
     30 + 1 = 31 against React's 33. Stating the floor here settles both --
     32 for the React container, whose `nav` adds the hairline outside it, and
     33 for the Blade one just below, which is border-box and carries the
     hairline inside its own box. */
  min-height: 32px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--gray-200); /* one hairline for both renderers and the hamburger divider */
}
/* Layout order below 992px is
   hamburger -> space -> breadcrumbs. The toggler (`.sidebar-menutoggler`,
   sidebar.css) is a ~30px-wide button pinned to the header's own top-left
   corner, absolutely positioned outside the header's normal flow -- so
   without this left padding the crumb trail's home icon renders directly
   under it (confirmed overlapping at 834px tablet width before this fix,
   not just at 375px). 992px matches the breakpoint the toggler itself
   appears at (sidebar.css, left-sidebar.css).
   `overflow-x: auto` + the default (unset) `flex-wrap: nowrap` keep a long
   trail on one line rather than letting it wrap and push `#sticky-header`
   taller -- deliberate choice: scroll the crumb row horizontally rather
   than truncate individual labels or grow the header. Scrollbar hidden
   since this is a one-line utility strip, not a page needing a visible
   scroll affordance. */
/* 32px of band plus the 1px hairline this element carries itself. */
:is(#sticky-header, .vh-header--blade):where(.vh-header--blade) .breadcrumb-container {
  min-height: 33px;
}

@media (max-width: 992px) {
  :is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container {
    padding-left: 50px; /* the hamburger box is now 38px wide (18px glyph + 10px each side); 12px to the home icon */
    overflow-x: auto;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  :is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container::-webkit-scrollbar {
    display: none;
  }
}
/* Pages that render no header of their own (see account.blade.php's
   server-side check on the child view's rendered content) get this bar
   instead -- the same #sticky-header id and .breadcrumb-container markup,
   just without the title/search/actions area, since these pages have none
   of that to show. Hidden completely at desktop: it is a narrow-width
   affordance paired with the hamburger, never a page header at full width.
   Below 992px (the same breakpoint the hamburger itself appears at) it
   drops the desktop height rules above and hugs just the breadcrumb row's
   own 32px, with `bottom: auto` breaking the top+bottom auto-height
   calculation the base .sticky-header rule (app-shell.css) would otherwise
   force -- height:auto with both top and bottom set stretches a fixed
   element to the full viewport rather than its content. */
#sticky-header.account-fallback-header {
  display: none;
}
@media (max-width: 992px) {
  #sticky-header.account-fallback-header {
    display: block;
    top: 0;
    bottom: auto;
    height: auto !important;
    border-bottom: none !important;
  }
}
/* THE HOME CRUMB IS ONE 24px HIT BOX WITH A 14px GLYPH IN IT, in both
   renderers. Both trails now draw the same inline SVG (Layout/Breadcrumb.js
   and components/breadcrumb-trail.blade.php), so one rule sizes and colours
   it and the icon lands on the same x in either header. An SVG rather than an
   `<img>` because only `currentColor` can hold the glyph to the crumb label's
   own colour; a filter chain can only approximate it.
   `min-width` rather than `width`: the Blade trail can carry a text label
   beside the glyph (experience context), and that must still fit. */
:is(#sticky-header, .vh-header--blade, .vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0;
}
:is(#sticky-header, .vh-header--blade, .vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .home-icon-svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
  color: var(--gray-500, #5B7079);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(#sticky-header, .vh-header--blade, .vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home:hover .home-icon-svg,
:is(#sticky-header, .vh-header--blade, .vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home:focus .home-icon-svg,
:is(#sticky-header, .vh-header--blade, .vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home:focus-within .home-icon-svg {
  color: var(--gray-500, #5B7079);
}
:is(#sticky-header, .vh-header--blade, .vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home:active .home-icon-svg {
  color: var(--foreground, #04161B);
}
:is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container img.bread-separator {
  padding: 4px 1px;
  height: 22px;
  pointer-events: none;
  cursor: default;
}
:is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container a {
  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;


  -moz-border-radius: 4px;


  -webkit-border-radius: 4px;



  -moz-border-radius: 4px;



  border-radius: 4px;
}
:is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container a:hover {
  background-color: var(--muted);
}
:is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container a:active {
  background-color: var(--gray-50);
}
/* 24px, the React crumb's own hit box: this rule outranks the React branch's
   `height` further down the file, which only reached 24 through a `min-height`
   the box then grew into. Stating 24 here is one number for both renderers,
   and the label's own y is unchanged because the row centres it either way. */
:is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container .bread-item a {
  height: 24px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  color: var(--gray-500);
  text-overflow: ellipsis;
  font-family: "Open Sans";
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
/* The opt-in per-item glyph (`breadcrumb_show_icons`, off in every product
   header) sits 4px off its own label, so the pair reads as one crumb rather
   than as a glyph the label is touching. Scoped to a glyph INSIDE a crumb
   link: the chevron separators are siblings of `.bread-item`, not children of
   its anchor, and keep their own spacing. */
:is(#sticky-header, .vh-header--blade, .vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .bread-item a img {
  margin-right: 4px;
  flex-shrink: 0;
}

/* Unify hover: icon + text change together when hovering the link, not independently */
:is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container a .vh-icon-dark-hover {
  pointer-events: none;
}
:is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container a:hover .vh-icon-dark-hover {
  filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(503%) hue-rotate(151deg) brightness(94%) contrast(90%);
}
/* THE SAME BOX THE REACT HEADER'S `.vh-header-content` IS: 16px top and
   bottom around a 36px row, 24px in from the left, 16px from the right, so
   the two renderers put their titles on the same x and the same y. `height:
   auto` because the box is the row plus that padding, nothing else, and
   `align-items: center` so the 28px title and the 36px cluster share one
   centre line rather than stretching to the box.

   16, not 14: the title is 28px tall inside a 36px row, so
   the row's own 4px of centring sits on each side of it and 16px of padding
   reads as 20 above the title and 20 below. The tabless header is 102px --
   33 crumb band + 68 content box + the 1px hairline the Blade header carries
   itself. */
:is(#sticky-header, .vh-header--blade, .vh-header--react) .header-content {
  padding: 16px 16px 16px 24px;
  height: auto;
  align-items: center;
}
@media (max-width: 768px) {
  .container-fluid :is(#sticky-header, .vh-header--blade, .vh-header--react) .header-content {
    background: var(--white);
    width: 100%;
    padding: 8px 32px;
    height: 120px;
  }

  .container-fluid :is(#sticky-header, .vh-header--blade, .vh-header--react) .header-content .header-title {
    margin-top: 80px;
    margin-bottom: 20px;
  }
}
:is(#sticky-header, .vh-header--blade, .vh-header--react) .header-content .header-title {
  /* H4 - Section */
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  /* 140% */
  padding: 0;
  margin: 0;
  margin-right: 8px;
}
:is(#sticky-header, .vh-header--blade, .vh-header--react) .header-content h2.header-title {
  font-family: "Open Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
  /* 138.462% */
}



.settings-layout .top-header.sticky-header {
  left: 256px;
}



/* ---- Dark mode (custom.css) ---- */

/* Override Bootstrap bg-white on the sticky header element.
   Exclude simple/focus layout — it sets background: transparent and relies on that. */
body.dark:not(.app-layout) .top-header.sticky-header {
  background-color: var(--card) !important;
}

/* Honour the simple layout's transparent sticky-header */
body.dark.app-layout .top-header.sticky-header {
  background-color: transparent !important;
}

/* Breadcrumb: icon hover filter → light gray on dark bg */
body.dark :is(#sticky-header, .vh-header--blade, .vh-header--react) .breadcrumb-container a:hover .vh-icon-dark-hover {
  filter: brightness(0) invert(1) opacity(0.75);
}



@media (max-width: 768px) {
  /* This box is position:fixed with top:0 and bottom:0 (app-shell.css's
     base .sticky-header rule), so height:auto alone would stretch it to
     fill the viewport rather than size to its own content -- bottom:auto
     releases the second fixed edge so height:auto can size the box off
     its normal-flow children instead (breadcrumb row + title/search/tab
     rows), the same pairing #sticky-header.account-fallback-header uses
     for the headerless-page bar. A page-agnostic fixed height here (this
     rule used to read height:66px) clips whichever page's header content
     runs taller than that number at this width, leaving a dead gap between
     the header box and the page content below it. */
  .top-header.sticky-header {
    height: auto !important;
    bottom: auto !important;
  }
}



/* ==================== Blade-only (standard-header.blade.php) ==================== */

/* The account layout measures this header and its mobile action row at runtime.
   No extra spacer belongs between this header and the page content. */
:where(.vh-header--blade) {
  --vh-header-content-gap: 0px;
}

/* Let the title column absorb the squeeze at every viewport. A block title
   draws an ellipsis; inline-flex only clips the text without drawing one.

   `flex: 0 1 auto`, not `1 1 0px`: the growth was what made this box as wide
   as the free space in the row, and this box is the hover target for the
   title utilities (see the `.title-row` rule further down). Shrinking is the
   half that matters here -- "absorb the squeeze" -- and `flex-shrink: 1` with
   `min-width: 0` keeps it. The field beside it carries `margin-left: auto`,
   which absorbs the free space this no longer takes, so nothing moves. */
:where(.vh-header--blade) .header-content > .d-flex:first-child {
  flex: 0 1 auto;
  min-width: 0;
}

/* One row at every width: the cluster holds its
   order and never wraps; the search shrinks first, the title truncates last. */
:where(.vh-header--blade) .header-content > .d-flex.justify-content-end {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

:where(.vh-header--blade) .header-content .header-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* THE TRUNCATION SPAN IS THE CLIPPING BOX, not the heading around it.
   Custom/TruncatedText measures the span it renders, so the ellipsis triple
   has to sit on that span or it always measures as fitting and no title ever
   gets a tooltip -- the same rule `.rdt_TableCell > .vh-truncated-text`
   (vaharaDataTable.css) exists for. The heading keeps its own copy of the
   triple, which now only matters for a title rendered without the span.
   `min-width: 0` because the heading is a flex item: without it the item's
   automatic minimum floors it at its longest word, the ellipsis never
   engages, and the measurement reports "not truncated". */
:where(.vh-header--react, .vh-header--blade, .vh-inline-datatable) .header-title > .vh-truncated-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* THE BLADE TITLE UTILITIES' REVEAL, the same contract the React header has
   below (`.vh-header--react ... .title-actions .title-action-button`): hidden
   at rest, shown while the header row is hovered, while the slot holds focus,
   and while the button's own menu is open. `opacity`, not `display`, so the
   title never reflows, and owned per-button rather than by the group for the
   reason spelt out on the React rule.

   It replaces a jQuery show()/hide() pair keyed on `.header-content`'s own
   mouseover/mouseleave (standard-header.blade.php). That pair could not
   survive a menu: the popover is parked on document.body, so the pointer
   moving from the trigger into the menu left the header row and hid the
   trigger underneath it. `[aria-expanded="true"]` is what holds it now.

   THE HOVER TARGET IS `.title-row`, THE SAME BOX THE REACT RULE USES. It was
   `.header-content` -- the whole header row -- which is what the jQuery
   handler had used, and which meant any white space in the header revealed
   the trigger. The Blade header does carry `title-row` (added when the two
   renderers were given one gap; standard-header.blade.php), and that box is
   sized to the title itself further down this file. */
:where(.vh-header--blade) .header-content .title-actions .title-action-button {
  opacity: 0;
  -webkit-transition: opacity 120ms ease-out;

  -moz-transition: opacity 120ms ease-out;

  -ms-transition: opacity 120ms ease-out;

  -webkit-transition: opacity 120ms ease-out;


  -moz-transition: opacity 120ms ease-out;


  -ms-transition: opacity 120ms ease-out;


  transition: opacity 120ms ease-out;
}

:where(.vh-header--blade) .header-content .title-row:hover .title-actions .title-action-button,
:where(.vh-header--blade) .header-content .title-actions:focus-within .title-action-button,
:where(.vh-header--blade) .header-content .title-actions .title-action-button[aria-expanded="true"],
:where(.vh-header--blade) .header-content .title-actions .title-action-button.active {
  opacity: 1;
}

@media (hover: none) {
  :where(.vh-header--blade) .header-content .title-actions .title-action-button {
    opacity: 1;
  }
}

/* Title utilities are icon buttons: the tile under them is the shared
   `.btn-icon-*` surface -- none at rest, a neutral wash under the pointer --
   so only the border is suppressed here. A blanket background declaration
   would hold every one of those states flat and leave the utilities beside a
   Blade title with no hover tile at all. */
:where(.vh-header--blade) .header-icons-container .btn {
  border: none !important;
}

/* Focus paint is keyboard-only. A mouse click leaves the button focused, and
   `.btn-icon-toggle-accent:focus` carries its own surface, so without this
   reset a tile stays behind on a button the pointer has already left. */
:where(.vh-header--blade) .header-icons-container .btn:focus:not(:focus-visible) {
  background-color: transparent !important;
}

/* The gear is an icon button without `.btn-icon` -- that class switches the
   button to `display: flex`, which would break the utilities out of the
   title's inline row onto separate lines -- so its hover tile is written
   here. Every utility in this slot takes it: the favourite heart, which used
   to be carved out of this rule so its own accent wash could show through,
   left the header on 2026-09-08. */
:where(.vh-header--blade) .header-icons-container .btn:hover {
  background-color: var(--gray-50) !important;
}

.dark :where(.vh-header--blade) .header-icons-container .btn:hover,
[data-theme="dark"] :where(.vh-header--blade) .header-icons-container .btn:hover {
  background-color: var(--gray-800) !important;
}

:where(.vh-header--blade) .header-icons-container .btn:focus-visible {
  outline: var(--space-0-5) solid var(--ring) !important;
  outline-offset: var(--space-0-5);
}


:where(.vh-header--blade) .header-content .standard-header-search {
  flex: 0 0 264px;
  width: 264px;
  min-width: 264px;
  max-width: 264px;
  margin-bottom: 0 !important;
}

:where(.vh-header--blade) .header-content .standard-header-search .input-group {
  margin-bottom: 0;
  width: 100%;
}

:where(.vh-header--blade) .header-content > .d-flex:last-child > .btn,
:where(.vh-header--blade) .header-content > .d-flex:last-child > a.btn {
  margin-left: 0;
}

/* Styles for images in breadcrumbs and headers */
:where(.vh-header--blade) .breadcrumb-container img.vahara-list-image,
:where(.vh-header--blade) .header-title img.vahara-list-image,
:where(.vh-header--blade) .breadcrumb-container .text-gray500 img,
:where(.vh-header--blade) .header-title img {
  height: 20px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}

:where(.vh-header--blade) .breadcrumb-container .text-gray500,
:where(.vh-header--blade) .header-title {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

:where(.vh-header--blade) .actions-btn-container {
  display: flex;
}
@media (max-width: 768px) {
  :where(.vh-header--blade) .actions-btn-container {
    display: none;
  }

  /* The right-hand column deliberately keeps its default automatic
     min-width here (`min-width: auto`, not `0`) -- unlike the title
     column above, this one must NOT be told it can shrink to
     nothing. Its floor needs to track its child's real minimum
     (the search field's own `min-width: 120px` below, when a search
     field is present at all), and `min-width: auto` is exactly what
     makes a flex item's minimum size track its content instead of a
     hardcoded number that would either overshoot (reserving 120px+
     of blank space on pages with no search) or undershoot.

     A prior version of this rule set `min-width: 0` here too, on the
     mistaken assumption that "every flex item in the chain needs
     min-width:0 to shrink" applies uniformly. It does not: zeroing
     the OUTER column's floor let the browser's flex-shrink math
     compute this column smaller than the search field actually
     allows itself to be. Nothing then clipped the difference, so
     the search pill -- unable to shrink past its own 120px floor --
     rendered wider than the box the outer math had allotted it and
     bled left, on top of the title's truncated tail (confirmed
     live: 34px of overlap at 375px, 6px at 480px, gone by 600px,
     and reproduced on a real page with a realistic long title, not
     just the design-system preview's). Leaving this column's
     min-width unset lets its automatic size take the search field's
     floor into account in the first place, so the title column is
     the only one the outer flex-shrink math is ever allowed to
     squeeze past its content size. */

  /* The search field shrinks instead of holding its desktop 264px
     width, but keeps a 120px floor so it stays a usable control
     rather than collapsing to an unreadable sliver -- the title
     above has no floor of its own, so it is what actually absorbs
     the squeeze via its ellipsis. */
}



/* ==================== React-only (PageHeader.js / PageTitle.js / Breadcrumb.js) ==================== */

/* ---- Breadcrumb.js ---- */

/* 32px band, not 40px (the 40px version was a little too tall). The content is a
   24px-tall crumb; it was carrying 8px of padding top and bottom. 4px each side
   keeps the crumb's own hit area intact while tightening the band, and puts the
   breadcrumb closer in weight to what it is — a locator, not a header. */
:where(.vh-header--react, .vh-breadcrumb-preview) nav[aria-label="breadcrumb"] {
  min-height: 32px;
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--gray-200, #A8B5BB);
}

/* Hide the breadcrumb when the page is embedded (e.g. site config Pages tab)
   and add top padding so the heading isn't flush against the top edge. */
.vh-pages-embed :where(.vh-header--react) nav[aria-label="breadcrumb"] {
  display: none;
}
.vh-pages-embed #sticky-header:where(.vh-header--react) {
  padding-top: 0;
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container {
  min-height: 32px;
  padding: 4px 8px;
  gap: 0;
  border-bottom: 0 !important;
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .home-icon-svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
  color: var(--gray-500, #5B7079);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container img.bread-separator {
  padding: 4px 1px;
  height: 22px;
  width: auto;
  display: block;
  pointer-events: none;
  cursor: default;
  flex-shrink: 0;
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container a {
  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;


  -moz-border-radius: 4px;


  border-radius: 4px;
  text-decoration: none;
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container a:hover {
  background-color: var(--muted);
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container a:active {
  background-color: var(--gray-50);
}

/* The crumb link's own text and box. Two selectors because a standalone trail
   (`.vh-breadcrumb-preview` -- the showroom's Breadcrumbs section) renders the
   `components/breadcrumb-trail` partial on its own, with no `nav` wrapper
   around it: the React header supplies that element, the partial does not.
   Without the second selector the standalone trail reached none of this and
   the showroom had to restate all of it locally, which is exactly how the two
   drifted apart. */
:where(.vh-header--react, .vh-breadcrumb-preview) nav[aria-label="breadcrumb"] .breadcrumb-container .bread-item a,
:where(.vh-breadcrumb-preview) .breadcrumb-container .bread-item a {
  min-height: 24px;
  height: 24px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  color: var(--gray-500);
  font-family: "Open Sans", sans-serif;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;


  -moz-box-sizing: border-box;


  box-sizing: border-box;
}


:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .bread-item {
  min-width: 0;
  display: flex;
  align-items: center;
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .bread-item a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container a .vh-icon-dark-hover {
  pointer-events: none;
  filter: var(--gray-500-filter);
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container a:hover .vh-icon-dark-hover {
  filter: var(--gray-500-filter);
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home:hover .home-icon-svg,
:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home:focus .home-icon-svg,
:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home:focus-within .home-icon-svg {
  color: var(--gray-500, #5B7079);
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home:active .home-icon-svg {
  color: var(--foreground, #04161B);
}

:where(.vh-header--react, .vh-breadcrumb-preview) .breadcrumb-container .breadcrumb-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
}



/* ---- PageTitle.js base rules ---- */

/* Popover-menu styling lives in the theme (theme/sunshine/components/custom.css).
   Do not re-declare it here -- a higher-specificity redeclaration with a
   hardcoded background would block dark-mode theming. */
.sticky-header:where(.vh-header--react) .title-section {
  padding-top: 20px;
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sticky-header:where(.vh-header--react) .title-section h4,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .datatable-header-section .header-title {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 140% */
}
.sticky-header:where(.vh-header--react) .title-section h4 .main-title,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .datatable-header-section .header-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* THE TITLE ACTIONS REVEAL ON HOVER, PER BUTTON. They are secondary to the
   title — favouriting the page, the overflow menu — and showing them
   permanently puts two grey glyphs beside every page heading in the
   product.

   Hovering anywhere in the title row reveals them, not just the buttons
   themselves, so they are easy to reach. `opacity`, not `display`, so the
   title never reflows. A button that is open (a popover showing, via
   `aria-expanded="true"`) or focused stays visible, or it would vanish
   under the user's own menu. Pointers that cannot hover always show them.

   VISIBILITY IS OWNED PER-BUTTON, NOT BY THE GROUP: a favourited heart
   (.active is permanent) must not drag the kebab into permanent visibility.
   The group (.title-actions) no longer carries opacity at all; each
   `.title-action-button` owns its own. Opacity flattens the whole subtree
   it is set on, so a child's `opacity: 1` cannot un-hide itself from
   inside a transparent parent -- per-button ownership avoids that. */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button {
  opacity: 0;
  -webkit-transition: opacity 120ms ease-out;

  -moz-transition: opacity 120ms ease-out;

  -ms-transition: opacity 120ms ease-out;

  -webkit-transition: opacity 120ms ease-out;


  -moz-transition: opacity 120ms ease-out;


  -ms-transition: opacity 120ms ease-out;


  transition: opacity 120ms ease-out;
}

:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-row:hover .title-actions .title-action-button,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions:focus-within .title-action-button,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button[aria-expanded="true"],
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button.active {
  opacity: 1;
}

@media (hover: none) {
  :where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button {
    opacity: 1;
  }
}

.sticky-header:where(.vh-header--react) .title-section .btn-icon-action,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 4px;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  -webkit-transition: background-color 120ms ease, opacity 120ms ease;

  -moz-transition: background-color 120ms ease, opacity 120ms ease;

  -ms-transition: background-color 120ms ease, opacity 120ms ease;

  -webkit-transition: background-color 120ms ease, opacity 120ms ease;


  -moz-transition: background-color 120ms ease, opacity 120ms ease;


  -ms-transition: background-color 120ms ease, opacity 120ms ease;


  transition: background-color 120ms ease, opacity 120ms ease;
}
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action:hover,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:hover {
  background-color: var(--gray-50, #F1F4F6);
}
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action:hover img,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:hover img {
  filter: var(--gray-500-filter);
}
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action:focus,
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action:focus-within,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:focus,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:focus-within {
  background-color: var(--gray-50, #F1F4F6);
}
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action:focus img,
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action:focus-within img,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:focus img,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:focus-within img {
  filter: var(--gray-500-filter);
}
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action:active,
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action.active,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:active,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button.active {
  background-color: var(--gray-100, #E9EFF1);
}
/* The favourite is excluded from the neutral icon greys on these three
   states: it is a toggle, so its icon colour is the accent while pressed and
   `.btn-icon-toggle-accent`'s own filters everywhere else. Without the
   exclusion these four-class selectors outrank that two-class variant and a
   favourited heart paints gray-600. */
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action:active img,
.sticky-header:where(.vh-header--react) .title-section .btn-icon-action.active img,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:active img,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button.active img {
  filter: var(--gray-600-filter);
}
.sticky-header:where(.vh-header--react) .title-section .search-bar,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .search-bar.search-two {
  width: 264px;
  max-width: 264px;
  min-width: 200px;
}
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .search-bar.search-two {
  margin-bottom: 0 !important;
}
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .search-bar.search-two input,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .search-bar.search-two .form-control,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .search-bar input,
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .search-bar .form-control {
  font-size: 13px !important;
  line-height: 18px !important;
}
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .search-bar.search-two .input-group:focus-within {
  border-color: var(--gray-400) !important;
  -webkit-box-shadow: 0 0 2.5px var(--gray-50);

  -moz-box-shadow: 0 0 2.5px var(--gray-50);

  -webkit-box-shadow: 0 0 2.5px var(--gray-50);


  -moz-box-shadow: 0 0 2.5px var(--gray-50);


  box-shadow: 0 0 2.5px var(--gray-50);
}
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .search-bar.search-two .close-searchIcon img {
  cursor: pointer;
}
.sticky-header:where(.vh-header--react) .submenu-left-btn {
  display: inline-flex;
  min-height: 32px;
  padding: 0 12px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  color: var(--gray-500, #5B7079);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-right: 4px;
  text-decoration: none;
  -webkit-transition: background-color 120ms ease, color 120ms ease;

  -moz-transition: background-color 120ms ease, color 120ms ease;

  -ms-transition: background-color 120ms ease, color 120ms ease;

  -webkit-transition: background-color 120ms ease, color 120ms ease;


  -moz-transition: background-color 120ms ease, color 120ms ease;


  -ms-transition: background-color 120ms ease, color 120ms ease;


  transition: background-color 120ms ease, color 120ms ease;
}
.sticky-header:where(.vh-header--react) .submenu-left-btn:hover,
.sticky-header:where(.vh-header--react) .submenu-left-btn:focus,
.sticky-header:where(.vh-header--react) .submenu-left-btn:focus-within {
  background: var(--muted, #F1F4F6);
  color: var(--gray-500, #5B7079);
}
.sticky-header:where(.vh-header--react) .submenu-left-btn:active,
.sticky-header:where(.vh-header--react) .submenu-left-btn.active {
  background: var(--muted, #F1F4F6);
  color: var(--foreground, #04161B);
}
.sticky-header:where(.vh-header--react) .submenu-left-dropdown {
  display: inline-flex;
  min-height: 32px;
  padding: 0 8px;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--gray-500, #5B7079);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  margin-right: 4px;
  cursor: pointer;
  -webkit-transition: background-color 120ms ease, color 120ms ease;

  -moz-transition: background-color 120ms ease, color 120ms ease;

  -ms-transition: background-color 120ms ease, color 120ms ease;

  -webkit-transition: background-color 120ms ease, color 120ms ease;


  -moz-transition: background-color 120ms ease, color 120ms ease;


  -ms-transition: background-color 120ms ease, color 120ms ease;


  transition: background-color 120ms ease, color 120ms ease;
  appearance: auto;
}
.sticky-header:where(.vh-header--react) .submenu-left-dropdown:hover,
.sticky-header:where(.vh-header--react) .submenu-left-dropdown:focus {
  background: var(--muted, #F1F4F6);
  color: var(--foreground, #04161B);
  outline: none;
}
.sticky-header:where(.vh-header--react) .submenu-right-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Multiple buttons render here (subMenuRightIconButtons is an array,
     mapped in PageTitle.js) but nothing separated them -- with two or more
     they sat flush against each other. */
  gap: 4px;
  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;


  -moz-border-radius: 6px;


  border-radius: 6px;
}
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action,
.sticky-header:where(.vh-header--react) .submenu-right-icons a {
  width: 32px !important;
  min-width: 32px;
  height: 32px !important;
  min-height: 32px;
  margin-right: 0;
  margin-left: 0;
  padding: 0;
}
/* RESTING colour, one step darker on the ramp. These icons inherit
   `--gray-300-filter` from the generic `.btn-icon-gray300 img` rule in
   buttons.css (--gray-300 ≈ #9DADB3). One step down the ramp is
   --gray-400-filter (--gray-400 ≈ #81949B) -- the same ramp the row-action
   hover state (vaharaDataTable.css) already settled on, applied here to a
   different state. Scoped to `.submenu-right-icons` only, so this does not
   touch every other `.btn-icon-gray300` consumer in the app -- it does,
   deliberately, reach every page that renders `subMenuRightIconButtons`
   (this selector carries no page class), not only the style-guide preview:
   `/account/data-items` and `/item/all-entries` both render this exact
   markup and use this rule. */
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a img {
  filter: var(--gray-400-filter);
}
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action:hover,
.sticky-header:where(.vh-header--react) .submenu-right-icons a:hover {
  background-color: var(--gray-50, #F1F4F6) !important;
}
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action:hover img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a:hover img {
  filter: var(--gray-500-filter);
}
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action:focus,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action:focus-within,
.sticky-header:where(.vh-header--react) .submenu-right-icons a:focus,
.sticky-header:where(.vh-header--react) .submenu-right-icons a:focus-within {
  background-color: var(--gray-50, #F1F4F6) !important;
}
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action:focus img,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action:focus-within img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a:focus img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a:focus-within img {
  filter: var(--gray-500-filter);
}
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action:active img,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.active img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a:active img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.active img {
  filter: var(--gray-600-filter);
}
/* One step darker than the resting colour above, same as the generic
   (non-trigger) hover rule already does with --gray-500-filter -- kept a
   distinct, more-specific rule (hence still needing !important to win over
   the generic hover rule) because this one also drives the muted-background
   treatment below, not because the icon colour itself should differ from
   the generic hover state. Left at --gray-500-filter rather than
   --gray-400-filter (what the resting rule above uses) because matching
   them would stop hover from darkening the icon at all for this specific
   trigger. */
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger:active img,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger.active img,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger:hover img,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger:focus img,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger:focus-within img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger:active img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger.active img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger:hover img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger:focus img,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger:focus-within img {
  filter: var(--gray-500-filter) !important;
}
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger:hover,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger:focus,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger:focus-within,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger:active,
.sticky-header:where(.vh-header--react) .submenu-right-icons .btn-icon-action.vh-visibility-trigger.active,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger:hover,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger:focus,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger:focus-within,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger:active,
.sticky-header:where(.vh-header--react) .submenu-right-icons a.vh-visibility-trigger.active {
  background-color: var(--muted, #F1F4F6) !important;
}
.sticky-header:where(.vh-header--react) .submenu-section {
  margin-bottom: 0;
}

/* Baseline gap below the tabs row.

   `dataTableStyles.css`'s `.vh-header-content { padding: 18px 24px; }` (not
   ours, and that file is not on the owned list) gives the header equal
   top/bottom breathing room. That symmetry is right for the Standard shape,
   where the title/search row is the last child and 18px sits directly below
   it. When tabs are present, `.sub-section` becomes the last child instead
   and the same 18px would land below the tabs, which reads as too much.

   This is the baseline the inline-datatable header and the fixed-height
   mobile header use. The desktop header (761px and up) sizes itself to its
   own children and raises this to 12px at the end of this file, where the
   value is the whole visible gap between the tabs row and the hairline. */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content.shouldRenderSection {
  padding-bottom: 4px;
}




:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-row {
  min-width: 0;
}

/* ONE ROW, ONE GAP, BOTH RENDERERS. The title, the publish-status indicator
   and the title-utilities slot are 8px apart, and the row's own `gap` is the
   only thing that says so. Each of those three used to carry a margin of its
   own -- the Blade title an 8px `margin-right` from the shared
   `.header-content .header-title` rule (which never reached the React header,
   whose title lives in `.vh-header-content`), the indicator and the slot an
   8px `margin-left` each. They stacked: measured 16px between the Blade title
   and its indicator against React's 8. Zeroed below, so there is one number
   in one place. Blade carries `title-row` too (standard-header.blade.php). */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-row,
:where(.vh-header--blade) .header-content > .title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* AND THE ROW IS THE HOVER TARGET, so it is sized to the title, not to the
     title COLUMN (reveal the utilities only when the cursor is close to the
     title text). Both renderers reveal on `.title-row:hover` -- the base
     React rule near the top of this file, the item-type page's own set
     further down, and the Blade set below. Measured at 1440 on Orbit
     Types: title 155px wide inside a `.title-row` of 677.7px, so 522px of
     white space either side of the heading revealed the More trigger.

     `width: max-content` shrink-wraps the group -- the heading, the
     publish-status indicator and the utilities slot -- and `max-width: 100%`
     is what keeps the title truncating: with the heading `white-space:
     nowrap`, min-content equals max-content, so a fit-content box would size
     to the full string and overflow its column rather than draw an ellipsis.
     `max-width` clamps the flex container to the space it actually has and
     the `h4` (`min-width: 0`) gives way inside it, exactly as it does today.

     24px OF SLACK ON EACH SIDE, as padding, so the target is forgiving
     without being the column; the negative left margin puts the heading's own
     x back where it was, so nothing visible moves. 8px was too tight -- the
     utilities only appeared when almost touching the button. 24 is still
     nowhere near the controls
     cluster: at 1440 on Orbit Types the group is 79px wide in a 678px column,
     so the target grows from 95px to 127px and leaves 550px of header white
     space that reveals nothing.

     8px ABOVE AND BELOW, cancelled by an equal negative block margin. The row
     is a flex item in a column that sizes to it, so vertical padding alone
     would have pushed everything under the title down by 16px; the negative
     margins hand that height back, and the box the pointer sees is the only
     thing that changes. */
  width: max-content;
  max-width: 100%;
  padding: 8px 24px;
  margin-left: -24px;
  margin-top: -8px;
  margin-bottom: -8px;
}

/* Id weight to match the `.header-content .header-title` rule this is
   cancelling, which is written against `:is(#sticky-header, …)`. */
:is(#sticky-header, .vh-header--blade):where(.vh-header--blade) .header-content > .title-row > .header-title {
  margin-right: 0;
}

/* Inside the utilities slot the gap is its own (8px between two utilities);
   what it must NOT add is a second gap on the side the row already owns. */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions,
:where(.vh-header--blade) .header-content .title-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}

/* ONE GAP, OWNED BY THE SLOT. Every button in here is a `.btn`, and `.btn`
   carries 4px of horizontal margin of its own (buttons.css) -- which stacked
   on the slot's 8px and on the indicator's own 4px and put 16px between the
   status indicator and the More trigger. Zeroed, so the 8px above and the
   `gap` beside it are the only numbers in play: 8 from whatever precedes the
   slot, 8 between two utilities. */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .btn,
:where(.vh-header--blade) .header-content .title-actions .btn {
  margin-left: 0;
  margin-right: 0;
}

/* PUBLISH-STATUS INDICATOR (Common/PublishStatusIndicator.js,
   components/publish-status.blade.php). It sits between the title and the
   title-utilities slot in both renderers and is STATUS, so it is always
   visible -- it deliberately takes none of `.title-actions`' hover reveal, and
   is not inside that box. The tile under it is the shared `.btn-icon` surface
   from buttons.css: none at rest, a neutral wash under the pointer, the same
   affordance the utilities beside it have. Only PLACEMENT is written here --
   the button's own surface (no tile at rest, no border, no padding) is in
   buttons.css with the rest of the icon-button family, because it also renders
   outside any header on /style/components. */
:where(.vh-header--react, .vh-inline-datatable, .vh-header--blade) .vh-publish-status {
  flex: 0 0 auto;
  /* The title row's `gap` owns both sides of this button; `.btn`'s own 4px
     side margins would be added to it. */
  margin-left: 0;
  margin-right: 0;
}

/* Focus paint is keyboard-only here too, matching the utilities beside it. */
:where(.vh-header--react, .vh-inline-datatable, .vh-header--blade) .vh-publish-status:focus:not(:focus-visible) {
  background-color: transparent !important;
}

:where(.vh-header--react, .vh-inline-datatable, .vh-header--blade) .vh-publish-status:focus-visible {
  outline: var(--space-0-5) solid var(--ring) !important;
  outline-offset: var(--space-0-5);
}

/* `.ds-react-menu-trigger-wrap` pointer handling lives in the theme, not
   here, so React menus on pages that do not import this file still get
   it. */

/* 8px, the cluster's one gap (see the search-toggle block near the end of
   this file). This rule used to say 4 and was outranked in the product by the
   id-scoped row rule that says 8 -- so a showroom copy of the same header,
   which carries no id, rendered the toggle 4px from the CTA. */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content > .flex-50.d-flex.justify-content-end.align-items-end.flex-column > .d-flex.justify-content-end.align-items-center {
  gap: 8px;
}

:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button img {
  display: block;
  max-height: 20px;
}

:where(.vh-header--react, .vh-inline-datatable) .flex-50 {
  flex: 1 1 50%;
}

/* TAB ORDER: SearchField's input must be the first Tab stop inside
   `.vh-header-content`, ahead of the title's own hover-revealed action
   buttons (favourite/settings/kebab, `.title-actions`, rendered inside
   `.vh-title-col`). Sequential focus navigation follows literal DOM order,
   not the `order` CSS property (confirmed live: Chromium ignores `order`
   for Tab), so PageTitle.js renders `.vh-controls-col` (search +
   topRightSideButtons) BEFORE `.vh-title-col` (title + title-actions) in
   source order -- the only change that actually moves the search input
   earlier in Tab sequence without touching tabIndex (a positive tabIndex
   would jump the field ahead of the whole page's nav, not just this
   header) and without intercepting the Tab key itself.

   `order` here exists PURELY to restore the left-to-right VISUAL layout
   (title left, search+buttons right) that the swapped DOM order would
   otherwise flip -- it has no effect on focus order. Applies at every
   breakpoint, including the `display: grid` layouts below 1060px/900px
   (`grid-template-columns: minmax(0, 1fr) auto`): grid auto-placement is
   also DOM-order-based absent explicit line placement, so without this
   rule the swapped DOM order would put search+buttons in the narrow
   `.vh-title-col`'s (1fr) track and the title in the `auto` track at
   those widths too. */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content > .vh-title-col {
  order: 1;
}

:where(.vh-header--react, .vh-inline-datatable) .vh-header-content > .vh-controls-col {
  order: 2;
}

/* H5 -- A LONG TITLE TRUNCATES; THE SEARCH AND CTAs STAY ON THE TITLE ROW.

   `.vh-header-content` is `d-flex flex-wrap` and both columns are
   `flex: 1 1 50%` with the flex default `min-width: auto`, so a long
   `nowrap` title made the title column's minimum size its own content
   width and the controls column had nowhere to go but a second line --
   measured on the React header at 1200 and 1601 with a 601px title, search
   at y=127/y=108 against title rows at y=99/y=80. The Blade header has
   never done this because its controls column is `flex-shrink: 0` with the
   title absorbing the squeeze.

   Two declarations, matching that: the title column may shrink below its
   content (`min-width: 0`, which is what lets the `h4`'s existing
   `overflow: hidden; text-overflow: ellipsis` actually engage), and the
   controls column takes its content width and neither grows nor shrinks.
   `.sub-section` still wraps to its own line -- it carries `w-100`, so
   nothing here can put it beside anything.

   The `h4`'s own `max-width: 50%` cap goes with it. That cap was the blunt
   version of this same guard (see the 1060px note further down, which
   already lifts it inside the grid): with the column free to shrink, the
   TRACK is now the constraint, and the title uses everything the cluster
   leaves rather than half the row with the other half empty. */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content > .flex-50.vh-title-col {
  min-width: 0;
}

:where(.vh-header--react, .vh-inline-datatable) .vh-header-content > .flex-50.vh-controls-col {
  flex: 0 0 auto;
}

:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .datatable-header-section .title-row {
  min-width: 0;
}

:is(#sticky-header, .vh-header--react):where(.vh-header--react) .vh-header-content .datatable-header-section .header-title,
:where(.vh-inline-datatable) .vh-header-content .datatable-header-section .header-title {
  max-width: 100%;
  min-width: 0;
}

/* The tabs row (`.sub-section`, rendered only when `shouldRenderSection`)
   is a THIRD top-level child of `.vh-header-content`, always last in DOM
   -- untouched by the DOM-order swap above -- but flex/grid item placement
   with `order` set on siblings is order-value-based, not DOM-position-
   based, once ANY sibling declares an explicit `order`. Without its own
   value here `.sub-section` would default to `order: 0`, tying it with
   nothing (both columns above are now 1/2) but still sorting BEFORE them
   -- wrapping the tabs row above the title/search row instead of below
   it.

   `grid-column: 1 / -1` is what actually makes it a full-width row rather
   than a squeezed one. The narrow-width layout below is `display: grid`
   with two column tracks (title, search+CTA); an item that does not
   explicitly span both tracks auto-places into the FIRST one, same as the
   title. `.sub-section` carries its own `w-100` class (`PageTitle.js`),
   which reads as "full width" but is only ever 100% of whichever track it
   lands in -- on a real item-type page with a long sub-menu label
   ("All Items") and a real primary button (`/account/data-items/pages` at
   375px), that track collapsed to ~130px and the tab label wrapped onto a
   second line, which in turn doubled the row's own height and pushed the
   whole two-row block far enough past the header's fixed height that the
   title measured *above* the header's own top edge -- confirmed live via
   `getBoundingClientRect()`. This has no effect above 1060px: the base
   layout is `display: flex; flex-wrap: wrap`, where `grid-column` is
   simply ignored and `width: 100%` already means the full flex
   container. */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content > .sub-section {
  order: 3;
  grid-column: 1 / -1;
}

.sticky-header:where(.vh-header--react) .h-28 {
  height: 32px;
}

:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .datatable-header-section .sub-section {
  position: relative;
  top: -3px;
}

:where(.vh-header--react, .vh-inline-datatable) .vh-header-content > .flex-50.d-flex.justify-content-end.align-items-end.flex-column > .sub-section {
  position: relative;
  top: -7px;
}



/* Decorative action icons must not become the pointer hit target. */
:where(.vh-header--react, .vh-inline-datatable) .title-action-button > img {
  pointer-events: none;
}

/* ---- PageTitle.js: item-type page hover-reveal (H16 named branch) ---- */


.vh-item-type-page :where(.vh-header--react) .vh-header-content .title-actions {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) {
  .vh-item-type-page :where(.vh-header--react) .vh-header-content .title-actions .title-action-button {
    opacity: 0;
    pointer-events: none;
    background-color: transparent;
    -webkit-transition: opacity 120ms ease, background-color 120ms ease;

    -moz-transition: opacity 120ms ease, background-color 120ms ease;

    -ms-transition: opacity 120ms ease, background-color 120ms ease;

    -webkit-transition: opacity 120ms ease, background-color 120ms ease;


    -moz-transition: opacity 120ms ease, background-color 120ms ease;


    -ms-transition: opacity 120ms ease, background-color 120ms ease;


    transition: opacity 120ms ease, background-color 120ms ease;
  }
}

.vh-item-type-page :where(.vh-header--react) .vh-header-content .title-actions .title-action-button.active {
  opacity: 1;
  pointer-events: auto;
}

/* REVEAL ON THE TITLE, NOT THE HEADER (appearing anytime the pointer enters the
   header itself is too distracting). The pointer has to be
   over the title row itself -- the heading and the utilities beside it -- or a
   utility has to hold keyboard focus. Hovering the search, the CTAs or the
   tabs reveals nothing. */
.vh-item-type-page #sticky-header:where(.vh-header--react) .vh-header-content .title-row:hover .title-actions .title-action-button,
.vh-item-type-page #sticky-header:where(.vh-header--react) .vh-header-content .title-actions:focus-within .title-action-button {
  opacity: 1;
  pointer-events: auto;
}

/* Title utilities are icon buttons, so their tile is the shared `.btn-icon-*`
   surface: no tile at rest, a neutral wash under the pointer, and the accent
   wash while pressed. Only the states the shared rules cannot know about are
   written here.

   Focus paint is keyboard-only. A mouse click leaves the button focused, and
   `.btn-icon-toggle-accent:focus` carries its own surface, so without this
   reset a tile stays behind on a button the pointer has already left. */
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:focus:not(:focus-visible) {
  background-color: transparent !important;
}

:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .title-actions .title-action-button:focus-visible {
  outline: var(--space-0-5) solid var(--ring) !important;
  outline-offset: var(--space-0-5);
}

/* The pressed favourite carries no tile of its own: `.btn-icon-toggle-accent`
   already paints the accent icon on a transparent ground while `.active`, and
   raises the accent wash only under the pointer. Its `!important` surfaces
   outrank the neutral `:hover` and `.active` tiles written above, so nothing
   is added here -- a resting tile would make the on state a permanent block of
   colour beside the title. */



/* ---- PageTitle.js: pages-embed variant + responsive collapse (H16) ---- */


.vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content {
  /* 16px right, shared with the row actions. The +2 rhythm
     (pass 11) reaches this variant too -- 14/0 became 16/2, so the title sits
     the same 20 below the top as on every other header and the tabs row keeps
     a 2px hair of ground before the hairline. */
  padding: 16px 16px 2px 24px;
  /* Centred, like every other header: the 36px control cluster shares the
     40px title row's centre line instead of topping out with it, which left
     it 2px high. */
  align-items: center;
}

.vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content .title-row {
  min-height: 40px;
  align-items: flex-start;
}

.vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content.shouldRenderSection .sub-section {
  margin-top: 8px;
}

.vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content > .flex-50.vh-controls-col {
  align-items: flex-end !important;
}

.vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content > .flex-50.vh-controls-col > .d-flex:first-child {
  align-items: center !important;
  margin-top: 0;
}

.vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content .search-bar.search-two {
  margin-bottom: 0 !important;
}

.vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content .sub-section .submenu-right-icons {
  margin-top: 0;
}

/* Shared narrow-width header defaults. The identical all-entries,
   content-types and vahara-apps groups collapse here without page prefixes.
   Packages retains its base flex layout. Embedded Pages retains its own
   900px breakpoint and paint;
   the preview's differing declarations remain page-scoped below. */
/* =====================================================================
   ONE LAYOUT AT EVERY WIDTH

   The title sits on the left and the control cluster (search, secondary
   CTAs, primary CTA, sidebar toggle) on the right, on ONE row, at the SAME
   vertical position at every viewport width. Nothing here is width-
   specific: the former 1060px grid, 760px fixed heights and 768px padding
   change each re-centred the row differently, which is what made the title
   and buttons jump up and down as the page resized.

   Fit order as the row narrows: the search field shrinks first (shrink
   factor 3 against the title's 1, down to a 160px floor), then the title
   ellipsis-truncates. Below 768px PageTitle.js swaps the field for the
   search toggle and renders the open field as its own row (the NARROW-
   WIDTH block at the end of this file).

   `flex-basis: 0` on the title column is what keeps the row from wrapping:
   flexbox breaks lines on each item's hypothetical size before it shrinks
   anything, so a title with a content-sized basis would carry the cluster
   onto a second line the moment it was wider than the free space. With a
   zero basis it never trips that test and simply grows into what the
   cluster leaves. The search row and the tabs row are `flex: 1 1 100%` /
   `w-100`, so they are the only things that ever wrap.

   BY MODIFIER AS WELL AS BY ID, for the reason the crumb and search-row
   chrome above already is: a showroom copy of this header cannot carry
   `#sticky-header`, so none of this block reached it. Without
   `flex: 1 1 0px` the title column took its content size and carried the
   cluster onto a second line -- the exact failure this block exists to
   prevent, visible in every React preview panel at 375. `:is()` takes the
   highest specificity of its arguments, so the weight these rules are
   written against is unchanged and a product header still matches exactly
   as before.
   ===================================================================== */
:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  align-content: start;
  column-gap: 16px;
  /* 16 top and 16 bottom, which is 20 above the title and 20 below it: the
     title is 28px tall inside a 36px row (the search field's height), so the
     row's own 4px of centring sits on each side of it. A header
     with a tabs row states its own padding-bottom further down and keeps 8
     under the tabs, so only its top edge moves. 16px right, shared with the
     row actions. */
  padding: 16px 16px 16px 24px;
}

:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content > .flex-50.vh-title-col {
  flex: 1 1 0px !important;
  width: auto !important;
  min-width: 0;
}

:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content > .flex-50.vh-controls-col {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0;
  margin-left: auto;
  align-items: flex-end !important;
}

:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content > .flex-50.vh-controls-col > .d-flex:first-child {
  align-items: center !important;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  min-height: 36px; /* the search field's height, so the row is the same height once the 32px toggle replaces it */
}

/* The search keeps its desktop width until the 600px swap to the toggle;
   the title is the only thing that yields (at the very most, the title on
   the left should truncate). */
:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content > .flex-50.vh-controls-col .search-bar.search-two {
  flex: 0 0 264px;
  width: 264px;
  min-width: 264px;
  max-width: 264px;
  margin-bottom: 0 !important;
}

:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content > .flex-50.vh-controls-col .search-bar.search-two .input-group {
  width: 100%;
}

:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content .sub-section {
  margin-top: 14px !important; /* tighter between the title row and the tabs */
}

/* With the narrow-width search row open, the tabs sit as far below the row as
   the row sits below the title text (16px each, measured). */
:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content > .vh-header-search-row ~ .sub-section {
  margin-top: 14px !important;
}

/* 12px under the tabs row at every width (H25b), not the 18px the box carries
   when the title row is its last child. */
:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content.shouldRenderSection {
  padding-bottom: 8px; /* less under the tabs / tools icon */
}

:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content .submenu-right-icons {
  margin-top: 0 !important;
}

/* .vh-datatable-preview-page's OVERRIDES on the shared grid block above.
   The shared block is not scoped away from this page -- its `:not()` list
   only excludes embedded Pages and Packages -- so this page already gets
   the grid, the column sizing, the controls-column alignment and the
   search/submenu spacing from it.

   THE HEADER RHYTHM IS NO LONGER OVERRIDDEN HERE (Z1, 2026-09-08). This
   block used to carry `padding: 18px 16px 0 24px` and `.sub-section {
   margin-top: 29px !important }`, which made `/style/data-table` the ONLY
   React header in the product with a different rhythm below 1060px:
   measured at 375 against the Types page (`/account/data-items`, the
   reference), the title sat at y=55 instead of 51, the tabs row at y=116
   instead of 97, and the header ran 151px tall instead of 137 -- the
   showroom reading 14px taller than the thing it is supposed to be the
   showroom FOR. Both declarations are gone, so this page now inherits the
   shared `14px 16px 18px 24px` (8px bottom with tabs) and the shared 14px
   tabs offset at every width, the same as every product table page.
   `align-content: start` went with them: the shared block above already
   declares it.

   Nothing is overridden here any more. This page no longer carries a
   wrapping controls row or an `order`/`flex-basis` pair that pushed the
   search field onto a second line -- every header now keeps its open field
   down to 768px and swaps to the toggle button below it, and the toggle's
   own row is a sibling of both columns (see PageTitle.js). The wrapping row
   also had to go on its own account: it let this header wrap the search and
   CTA below the title at widths where every product header truncates the
   title instead, which is the opposite of what a showroom is for.

   Removed earlier: identical copies of the shared block's
   `.vh-title-col`/`.vh-controls-col` sizing, the controls column's
   `margin-left`/`align-items`, its first `.d-flex` row's `align-items`/
   `gap`, `.search-bar.search-two`'s zeroed margin and
   `.submenu-right-icons`'s zeroed margin -- every one of them re-declared
   the shared value verbatim. Also removed:
   `.vh-header-content > .flex-50.vh-controls-col .sub-section`, which
   cannot match a real element (PageTitle.js renders `.sub-section` as a
   SIBLING of `.vh-controls-col`, not a descendant) and so was never
   applying its 25px/flex-end values to anything.

   Why the grid is needed here at all: below ~800px the base `d-flex
   flex-wrap` layout wrapped the search+CTA below the title, because the
   right column's own min-content width (a 264px-open search input plus a
   button) exceeds what is left once neither `.flex-50` column can hold its
   nominal 50%. The grid makes column 1 (title) `minmax(0, 1fr)` so it
   yields and ellipsis-truncates instead. */

/* Neutralizes a legacy, page-agnostic rule (custom.css,
   `.top-header.sticky-header` at max-width:768px -- `height: 66px
   !important`) that otherwise clips this page's dynamically-measured
   header height below where `!important` can be beaten by anything but a
   more specific `!important` rule. Confirmed live: with the collapsible
   search above open at <=768px, that legacy rule froze `#sticky-header` at
   66px while its own children (the breadcrumb nav + `.vh-header-content`,
   both normal-flow, neither absolutely positioned) actually ran to ~140px
   -- so the search input's second line rendered visually below the
   header's own bottom edge, not clipped (nothing here sets `overflow:
   hidden`) but adrift under an opaque header that stopped short of it.
   `height: auto` lets the box size to its own normal-flow children, the
   same way it already does above 768px once this override is out of the
   way -- it does not need to duplicate VaharaDataTablePreview.js's own
   pixel measurement, only stop clobbering it. Scoped to this page and to
   the legacy rule's own 768px range; the rule itself is untouched for
   whatever else on the site still relies on it. */
@media (max-width: 768px) {
  .vh-datatable-preview-page #sticky-header:where(.vh-header--react).top-header.sticky-header {
    /* `auto`, not `--vh-sticky-header-height` (Z1, 2026-09-08). That variable
       is PageHeader.js's measured child extent PLUS a fixed 3px, and feeding
       it back in as the box's own height made this header render 3px taller
       than its own content -- 140px against the Types page's 137 at 375, with
       the table's first hairline 3px lower to match. `auto` is what the
       paragraph above actually describes: the box sizes to its normal-flow
       children, which already include the collapsible search's second line
       when it is open, so the legacy 66px clamp is still beaten without
       inventing a height the content does not have. */
    height: auto !important;
  }
}

@media (max-width: 900px) {
  .vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
  /* Centred, not `start` -- same fix and same reasoning as the first grid
     block in this file's `@media (max-width: 1060px)` section above. */
    align-items: center !important;
    align-content: start;
  }

  .vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content > .flex-50.vh-title-col,
.vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content > .flex-50.vh-controls-col {
    width: auto !important;
    flex: none !important;
    min-width: 0;
  }

  .vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content > .flex-50.vh-controls-col {
    margin-left: auto;
    justify-content: flex-start !important;
    align-items: flex-end !important;
  }

  .vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content > .flex-50.vh-controls-col > .d-flex:first-child {
    gap: 8px;
    align-items: center !important;
  }

  .vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content > .flex-50.vh-controls-col .sub-section {
    margin-top: 8px !important;
    justify-content: flex-end !important;
  }

  .vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content .sub-section .submenu-right-icons {
    margin-top: 0 !important;
  }
}

/* THE TITLE'S 50% CAP DOES NOT APPLY TO THE GRID LAYOUTS. The title
   truncates on mobile despite obvious free space to its right -- e.g.
   "Content Ty..." on /style/data-table.

   The cap is `max-width: 50%` on `.vh-header-content .datatable-header-section
   .header-title` -- declared twice, identically, at the top of this file and
   again in `dataTableStyles.css` -- alongside `white-space: nowrap;
   overflow: hidden; text-overflow: ellipsis`. It is doing real work in the
   BASE FLEX LAYOUT (above 1060px, or 900px for the embed variant): there both
   `.flex-50` columns are `flex: 1 1 50%` with no `min-width: 0`, so a long
   nowrap title's min-content width would push past its half of the row and
   wrap the search + CTA column onto a second line. Half is a blunt but
   effective guard there, and it is left alone -- this rule is inside the same
   media queries as the grid, so it cannot reach the flex layout.

   Inside the grid it is redundant AND harmful. The title column is already
   `minmax(0, 1fr)` with `min-width: 0` (blocks above), so the TRACK is the
   constraint: the title ellipsis-truncates at exactly the width left over
   after the fixed-content `auto` column, which is the behaviour the cap was
   approximating. Stacking 50% on top of that truncates a second time, at half
   of an already-correct width, with the other half sitting empty. Measured
   live, /style/data-table at a 430px viewport: the title
   needed 136px, its track offered 184px, and it rendered at 92px -- exactly
   50% -- so "Content Types" became "Conten...". `100%` here means "as much of
   the track as the title needs", and the track's own `minmax(0, 1fr)` keeps
   the ellipsis for titles that genuinely do not fit.

   Scoped to the same shared grid defaults above, excluding embedded Pages
   until its own 900px breakpoint, so the base flex layout keeps its cap. */
@media (max-width: 1060px) {
  :is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content .datatable-header-section .header-title {
    max-width: 100%;
  }
}

/* The embed variant's grid starts at 900px, not 1060px (its own block above),
   so its copy of the same fix uses its own breakpoint. */
@media (max-width: 900px) {
  .vh-pages-page.vh-pages-embed #sticky-header:where(.vh-header--react) .vh-header-content .datatable-header-section .header-title {
    max-width: 100%;
  }
}

/* AND EACH HOVER-ONLY TITLE ACTION STOPS RESERVING THE TITLE'S WIDTH WHILE IT
   IS INVISIBLE -- the second half of "truncating the title on mobile for no
   reason".

   Lifting the 50% cap above was not the whole story. `.title-actions` sits
   after the `h4` in the same flex `.title-row`, and its buttons are revealed
   by OPACITY on hover -- see this file's "THE TITLE ACTIONS REVEAL ON HOVER"
   comment near the top, and the deliberate reason given there: opacity rather
   than display, so the title never reflows. That is right at desktop widths,
   where the ~80px it holds (72px of buttons plus this container's own 8px
   `margin-left`) is a rounding error next to the row. It is what the eye
   reads as "free space" at 430px, where the same 80px is the difference
   between "Content Types" and "Content ...". Measured live at a 430px
   viewport: title track 184px, title needs 136px, and it rendered at 104px
   -- 184 minus exactly that 80.

   PER BUTTON, NEVER PER GROUP -- for exactly the reason the opacity reveal
   above is already per button. `.title-actions` is a HETEROGENEOUS box, not a
   fixed pair of hover-only icons:

     - `PageTitle.js` renders an optional `statusBadge` <span> into it ahead
       of any action. That is not an action, is never hover-revealed, and has
       to keep its width unconditionally.
     - the number of actions is per page. The `/style/data-table` preview
       renders two; an item-type page renders three (`ItemTypeDatatable.js`'s
       `pageActions`: the heart, a beta/dev-only settings icon, the kebab).
     - the heart's `.active` is PERSISTENT once the page is favourited
       (`IconButton.js` maps `active` straight onto the class), whereas the
       kebab's own `.active` lasts only while its popover is open.

   A group-level collapse cannot express any of that: collapsing the box
   hides the status badge, and restoring the box on `:has(.active)` would
   re-expand every sibling, so favouriting a page would permanently reserve
   the width of the still-invisible kebab and settings icons -- putting
   back the blank space this rule exists to reclaim. So the width lives on
   `.title-action-button` itself. A button
   that is visible occupies its own space; a button that is not gives up its
   own space; content that is not a button is never touched at all. Any
   number of actions, in any combination of visible and hidden.

   `max-width`, not `width`: the buttons take their real size from a
   `btn-icon-*` size class, and `max-width: 0` clamps the border box (global
   `box-sizing: border-box`) without this rule having to know or restate that
   size. There is no `max-width: none` counterpart handing the size class
   back, because there is no restore rule at all -- see the note on the rule
   itself below. The collapse is written as a NEGATION of the reveal
   conditions, so a revealed button simply never matches it and keeps every
   value its own component rules give it, width included.

   THE COLLAPSE CONDITIONS ARE THE OPACITY RULES' CONDITIONS, INVERTED -- both
   the base set near the top of this file AND `.vh-item-type-page`'s own set
   further down, which reveals on `#sticky-header:hover` rather than
   `.title-row:hover`. Missing that second set would have left item-type pages
   revealing fully opaque buttons inside zero-width boxes.

   Restricted to `(hover: hover)` because the whole problem is buttons that
   are invisible. A touch pointer already gets `opacity: 1` unconditionally
   (the `@media (hover: none)` rule near the top of this file), so on a real
   phone these buttons are on screen, that space is space the user can see and
   press, and this rule must not -- and does not -- touch that case.

   Restricted to `max-width: 1060px` because that is where the grid layout
   takes over and the title column becomes the one thing that yields.

   The trade this makes, stated plainly: at these widths, hovering the title
   row now reflows it -- the hidden actions take their space back and the
   title ellipsis-truncates to fit. That is a real regression against the
   "never reflows" intent above, accepted here because the alternative is a
   permanently truncated title next to permanently blank space, which is the
   reported defect.

   A side effect worth stating: a collapsed button is not merely transparent,
   it has no box, so it is no longer an invisible click target either.

   `overflow: hidden` clips only the collapsed button's own icon. The kebab's
   popover is portalled out of this container (verified in the live DOM --
   opening it adds `aria-expanded="true"`/`.active` to the button and nothing
   else appears inside `.title-actions`), and that same `aria-expanded="true"`
   is one of the states the collapse excludes anyway.

   The container's own 8px `margin-left` stays group-level, because it is a
   group-level fact: it is the gap between the title and whatever the box
   holds. It is dropped only when the box holds nothing visible at all -- no
   non-action child (so: no status badge) and no revealed button -- and comes
   back with the first thing that shows.

   One piece of markup to know before reading those selectors: the kebab is
   NOT a direct child of `.title-actions`. `PopoverMenu` wraps its trigger in
   a `span.ds-react-menu-trigger-wrap` (confirmed in the live DOM), so the
   per-button rules below are deliberately descendant selectors, and the
   status-badge test below has to distinguish that wrapper span from a badge
   span by what it contains rather than by what it is. */
@media (max-width: 1060px) and (hover: hover) {
  /* WRITTEN AS A NEGATION -- "collapse a button that is not revealed" -- and
     not as a collapse-plus-restore pair, for one concrete reason: the box
     that has to disappear is not only a width. `.btn-icon-toggle-accent`
     (the heart) carries `padding: 6px !important`, and with
     `box-sizing: border-box` a `max-width: 0` box still floors at its own
     padding, so a collapsed button measured 12px wide -- 32px of reserved
     space across a two-action group, most of what this rule set out to
     reclaim. Zeroing the padding is easy; putting it BACK in a restore rule
     is not, because the value differs by button variant and would have to be
     restated here, per variant, and kept in sync forever. A negation has no
     restore rule to write: when the button is revealed these declarations
     simply do not apply and every base value -- padding, margin, width --
     is whatever its own component rules say, untouched.

     The conditions are the reveal conditions of the opacity rules at the top
     of this file, inverted, including `.vh-item-type-page`'s own further
     down (that page reveals on `#sticky-header:hover`, a wider target than
     `.title-row:hover`; leaving it out would have revealed fully opaque
     buttons inside zero-width boxes there). */
  :where(.vh-header--react, .vh-inline-datatable) .vh-header-content
    .title-row:not(:hover)
    .title-actions:not(:focus-within)
    .title-action-button:not(
      .active,
      [aria-expanded="true"],
      .vh-item-type-page #sticky-header:where(.vh-header--react):hover *,
      .vh-item-type-page #sticky-header:where(.vh-header--react):focus-within *
    ) {
    max-width: 0;
    /* `min-width: 0` is not redundant: these are flex items, so `min-width`
       computes to `auto` -- the automatic minimum size -- which Chrome
       resolves from the 18px icon inside rather than from `max-width`. */
    min-width: 0;
    /* `!important` only to out-rank `.btn-icon-toggle-accent`'s own
       `padding: 6px !important`. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Both sides: these buttons carry a 4px margin on each, and with the box
       itself at zero width a leftover margin is the whole of what the button
       still costs the title. */
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
  }

  /* The container's own 8px `margin-left`, on the same negation and for the
     same reason. It is the gap between the title and whatever the box holds,
     so it goes only when the box holds nothing at all -- no revealed button,
     and no non-action child.

     That last test is `:not(:has(> :not(.title-action-button):not(.ds-react-menu-trigger-wrap)))`:
     "holds no direct child that is neither an action button nor the standard
     wrapper around one". Both halves are needed, because the kebab is NOT a
     direct child -- `PopoverMenu` wraps its trigger in a
     `span.ds-react-menu-trigger-wrap` (confirmed in the live DOM) -- so a
     plain `:not(.title-action-button)` child test would read that wrapper as
     non-action content and the gap would never collapse at all. Naming the
     wrapper class rather than asking "does this child contain a button" is
     not a preference: `:has()` may not be nested inside `:has()`, and an
     invalid selector invalidates the whole rule silently, with no visible
     error to catch it. */
  :where(.vh-header--react, .vh-inline-datatable) .vh-header-content
    .title-row:not(:hover)
    .title-actions:not(
      :focus-within,
      :has(.title-action-button.active),
      :has(.title-action-button[aria-expanded="true"]),
      :has(> :not(.title-action-button):not(.ds-react-menu-trigger-wrap)),
      .vh-item-type-page #sticky-header:where(.vh-header--react):hover *,
      .vh-item-type-page #sticky-header:where(.vh-header--react):focus-within *
    ) {
    margin-left: 0;
  }
}




/* ---- dataTableStyles.css / vaharaDataTableStyles.css header-touching rules ---- */

:where(.vh-header--react, .vh-inline-datatable) .title-action-button.active.is-open,
:where(.vh-header--react, .vh-inline-datatable) .title-action-button.is-open {
  background-color: var(--gray-50, #F1F4F6) !important;
}
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 18px 16px 18px 24px; /* 16px right, shared with the row actions */
}
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .datatable-header-section {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content .datatable-header-section .header-title {
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
:where(.vh-header--react, .vh-inline-datatable) .vh-header-content.shouldRenderSection .sub-section {
  margin-top: 22px;
}
.vh-inline-datatable .vh-header-content {
  height: 56px;
  padding: 8px 16px 8px 24px;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}
@media (max-width: 768px) {
  .vh-inline-datatable .vh-header-content {
    padding: 30px;
  }
}
.vh-inline-datatable .vh-header-content .datatable-header-section {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}





/* THE PAGE'S OWN HEADER HANDS ITS SEPARATOR TO `.content-area`, so that a
   table row's hover wash is always flush with the line above it. That
   transfer is only correct where there IS a `.content-area` to carry it: the
   header's own hairline is suppressed here, and `.content-area { border-top:
   1px solid var(--gray-200) }` (AccountLayoutStyles.css) draws the same line
   one pixel lower.

   Scoped by `:has()` to exactly that case -- the header that is a sibling of
   a `.content-area` -- rather than to "any header inside #main-wrapper".
   Written the loose way, it also silenced every showroom copy of the header,
   which has no `.content-area` under it and so painted no bottom edge at all
   (measured on /style/navigation: white, then straight to the frame's
   run-of-page ground). Blade product pages never had a `.content-area`
   either, so they keep the header's own line, which is now the same colour. */
#main-wrapper .main-content:has(> .content-area) > :is(#sticky-header, .vh-header--blade, .vh-header--react) {
  border-bottom: none;
}

/* ---- Header Actions: shared Blade/React CTA presentation ----
   Buttons own their colors, padding, radius and sizes. Their 4px side margins
   supply the 8px inter-control spacing; edge utilities remove only outer margins. */
.vh-header-actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.vh-header-actions [hidden],
.vh-header-actions__more[hidden] {
  display: none !important;
}
.vh-header-actions__more {
  display: inline-flex;
  align-items: center;
}
.vh-header-actions__action {
  position: relative;
  max-width: 100%;
  flex-shrink: 0;
  white-space: nowrap;
}
.vh-header-actions__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vh-header-actions__content {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vh-header-actions__content img {
  flex-shrink: 0;
}
.vh-header-actions__action .vh-header-actions__spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
}
.vh-header-actions__action--loading .vh-header-actions__content {
  visibility: hidden;
}
.vh-header-actions__action--loading .vh-header-actions__spinner {
  display: block;
}
.vh-header-actions :is(button, a):focus-visible,
.vh-header-actions__menu :is(button, a):focus-visible {
  outline: var(--border-width-thick) solid var(--ring) !important;
  outline-offset: var(--space-1);
}
.vh-header-actions__menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-1);
  max-width: calc(100vw - var(--space-8));
}
.vh-header-actions__menu .vh-header-actions__action {
  margin: var(--space-1) 0;
  width: 100%;
  height: auto !important;
  min-height: var(--space-9);
}
.vh-header-actions__icon-label {
  display: none;
}
.vh-header-actions__menu .vh-header-actions__icon-label {
  display: inline;
}
.vh-header-actions__menu .btn-icon img {
  margin-right: var(--space-2);
}
body.dark :is(.vh-header-actions, .vh-header-actions__menu) :is(.btn-tonal, .btn-ghost) .vh-icon-primary {
  filter: var(--accent-filter) !important;
}
.vh-header-actions__desktop {
  flex-shrink: 0;
  display: flex;
  min-width: 0;
  max-width: 100%;
}
.vh-header-actions__mobile,
.vh-header-actions__drawer-toggle {
  display: none !important;
}
.vh-header-actions__drawer-toggle:focus-visible {
  outline: var(--border-width-thick) solid var(--ring) !important;
  outline-offset: var(--space-1);
}
/* The sidebar toggle is the rightmost control in the cluster (search · secondary
   CTAs · primary CTA · sidebar toggle). It stays
   first in the DOM -- both renderers' scripts find it there -- and `order`
   places it. */
.vh-header-actions > .icon-right-sidebar,
.vh-header-actions > .vh-header-actions__sidebar {
  order: 10;
  margin-left: 8px !important; /* the control before it is the cluster's former right edge and carries no right margin */
  margin-right: 0 !important;
}

/* Structured Blade controls keep their width; the title absorbs the squeeze. */
.vh-header-actions--structured .vh-header-actions__controls {
  flex-shrink: 0;
  max-width: 100%;
}
.vh-header-actions--structured .vh-controls-col,
.vh-header-actions--structured .vh-controls-col > .d-flex:first-child {
  min-width: 0;
  max-width: 100%;
}
/* The inline controls stay inline at every width: the primary CTA and the
   sidebar toggle are in the cluster even at phone
   width; supporting actions fold into "more" when they do not fit). The
   drawer copy of the actions is no longer shown at any width. */
@media (max-width: 768px) {
  .vh-header-actions__menu .vh-header-actions__action {
    min-height: var(--space-8);
  }
  .vh-header-actions__action--mobile-icon .vh-header-actions__label {
    display: none;
  }
  .vh-header-actions__action--mobile-icon .vh-header-actions__content img {
    margin-right: 0;
  }
  .vh-header-actions__menu .vh-header-actions__label {
    display: inline;
  }
  .vh-header-actions__menu .icon-left .vh-header-actions__content img {
    margin-right: var(--space-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vh-header-actions__spinner {
    animation-duration: var(--duration-normal);
  }
}

/* Compact desktop rhythm; keep the existing hamburger/mobile dimensions. */
#sticky-header:where(.vh-header--react):not(.vh-page-header-preview-page *) {
  height: auto !important;
  bottom: auto;
}
/* The Blade header is the same height at every width above the 768px swap,
   and that height is the React header's: a 33px crumb band, a 68px content
   box (16 + a 36px row + 16) and the 1px hairline the Blade header carries
   itself, where the React one hands its stroke to `.content-area`.
   `!important` outranks the legacy `.top-header.sticky-header { height: auto
   !important }` at <=768px in app-base.css; the 768px rule below carries an id
   plus two classes so it still wins here. */
:is(#sticky-header, .vh-header--blade):where(.vh-header--blade) {
  height: 102px !important;
}

/* =====================================================================
   NARROW-WIDTH HEADER -- ONE ROW, THEN A SEARCH ROW

   Below 768px (the tablet breakpoint, where the hamburger also appears) the header is:

     row 1  menu button + breadcrumb (untouched, its own element)
     row 2  the title on the left, one compact cluster on the right
     row 3  the search field, full width, ONLY while the search toggle is
            pressed -- above the tabs row, below row 2
     row 4  the tabs / action row, when the page has one

   THE FIT RULE IS "THE TITLE YIELDS". The cluster never wraps, never
   reorders and never moves; when the row runs out of width the title
   ellipsis-truncates. It never wraps to a second line and never
   disappears. That is why the cluster is `flex-wrap: nowrap` with
   `flex-shrink: 0` and the title column is the only track allowed to give
   (`minmax(0, 1fr)`, set by the shared 1060px grid block above).

   THE SEARCH ROW IS A SIBLING OF THE TWO COLUMNS, not a child of either.
   A field inside the controls column can only ever be as wide as that
   column, which is what made the previous attempt open to 144-350 of a
   375px viewport instead of edge to edge. React renders
   `.vh-header-search-row` as a third child of `.vh-header-content`
   (`Layout/PageTitle.js`); Blade renders `.vh-header-search-field` as a
   third child of `.header-content` (`components/standard-header.blade.php`).

   OPENING IT MOVES NOTHING BUT THE TABS ROW. Both boxes size to their own
   content at this width and pack their rows from the top, so row 2 keeps
   the same y whether the search row is there or not, and the tabs row
   moves down by exactly the search row's height. The alternative --
   the fixed heights and `align-content: center` the wider rules use --
   re-centres every row the moment a row is added.
   ===================================================================== */

/* The Blade field sits between the title and the controls column in source
   order. An auto margin resolves before `justify-content`, so it absorbs
   all the free space and puts the field hard against the controls column,
   exactly where it rendered when it was inside that column. */
:where(.vh-header--blade) .header-content > .vh-header-search-field {
  margin-left: auto;
  /* No gap of its own: with nothing in the controls cluster beside it the
     field IS the rightmost control, and the rightmost control is always 16
     from the header's right edge -- which is the content box's own
     `padding-right`, and nothing more. */
  margin-right: 0;
  align-self: center;
}

/* 12px only when a control actually follows: React's field sits inside the
   controls row, so it carries its own `mx-1` (4px) AND that row's 8px gap
   before the first button. The Blade field is a sibling of the cluster
   instead, so the whole 12 is its own margin -- and its right edge lands on
   exactly the x React's does. `.vh-header-has-controls` is written by
   components/standard-header.blade.php, which knows whether the cluster has
   anything in it; the cluster element itself is always emitted (it also holds
   the narrow-width search toggle) and measures zero width when it is empty,
   so nothing in CSS can tell the two cases apart. */
:where(.vh-header--blade) .header-content.vh-header-has-controls > .vh-header-search-field {
  margin-right: 12px;
}

/* THE CLUSTER'S GAP IS 8px, AND THE ROW OWNS IT. The search toggle, the
   secondary CTAs and the primary CTA sit 8px apart in both renderers. Before
   this there were three different numbers on one control: the React product
   header's row `gap: 8px` PLUS the toggle's own `.btn` 4px margin gave 12, the
   React showroom embed (which the id-scoped row rule never reached) gave 8,
   and the Blade cluster -- no row gap at all, just that 4px margin -- gave 4.
   Stated on the row for both renderers, with the toggle's `.btn` margins
   zeroed so nothing is added to it. */
:where(.vh-header--blade) .header-content > .d-flex.justify-content-end {
  gap: 8px;
  /* The search field's height, so the content row is 36px tall -- and the
     header the same height -- whether the page supplies a cluster of buttons,
     a lone toggle, or nothing at all. The React controls column states the
     same floor for the same reason. */
  min-height: 36px;
}

/* Two classes so this outranks `.btn`'s own side margins (buttons.css). */
.btn.vh-header-search-toggle {
  margin-left: 0;
  margin-right: 0;
}

/* The narrow-width search toggle exists in the markup at every width;
   only below the breakpoint is it the control. */
/* `.btn` sets `display: inline-block`, so this needs to outrank it rather
   than merely follow it in one stylesheet. */
.btn.vh-header-search-toggle,
.vh-header-search-toggle {
  display: none;
}

@media (max-width: 768px) {
  /* ---- shared ---- */
  .btn.vh-header-search-toggle,
  .vh-header-search-toggle {
    display: inline-flex;
  }

  /* THE SEARCH TOGGLE IS ICON-ONLY WHILE ON: accent icon on a
     transparent ground, the accent wash only under the pointer -- the open field
     right below it already says "on". (The sidebar toggle keeps the persistent
     tile of the general toggle rule; this and the favourite heart are the two
     exceptions.) A mouse click leaves the button focused, and the shared `:focus`
     surface would otherwise keep a tile behind it. */
  /* Three classes: the React bundle's own datatable stylesheet re-declares the
     two-class `.btn-icon-toggle-accent.active` tile with !important after this
     file, so the exception has to outrank it, not just follow it. */
  .btn.vh-header-search-toggle.active,
  .btn-icon-toggle-accent.vh-header-search-toggle.active,
  .btn-icon-toggle-accent.vh-header-search-toggle.active:focus:not(:focus-visible),
  .vh-header-search-toggle:focus:not(:focus-visible) {
    background-color: transparent !important;
  }
  .btn.vh-header-search-toggle.active:hover,
  .btn-icon-toggle-accent.vh-header-search-toggle.active:hover {
    background-color: rgba(11, 187, 166, 0.1) !important;
  }

  /* The Blade field's input-group carries its own 12px left padding, which
     stacked on the input's inset and put the text at 35px against React's 23. */
  :where(.vh-header--blade).vh-search-open .header-content > .vh-header-search-field .input-group {
    padding-left: 0;
  }

  /* The open search row is the field alone: no magnifier (the pressed toggle
     above already says "search"), and the X is always present because it is
     how the row closes. */
  :where(.vh-header--react) .vh-header-content > .vh-header-search-row .btn-searchIcon,
  :where(.vh-header--blade).vh-search-open .header-content > .vh-header-search-field .btn-searchIcon {
    display: none !important;
  }
  :where(.vh-header--react) .vh-header-content > .vh-header-search-row .search-control,
  :where(.vh-header--blade).vh-search-open .header-content > .vh-header-search-field .search-control {
    padding-left: 12px !important; /* text starts where the pill's curve ends (20 was far too much) */
  }

  :where(.vh-header--react) .vh-header-content > .vh-header-search-row .close-searchIcon,
  :where(.vh-header--blade).vh-search-open .header-content > .vh-header-search-field .close-searchIcon {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer;
  }

  /* ---- React ---- */
  :is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *, .vh-datatable-preview-page *)),
:is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *, .vh-datatable-preview-page *)) .vh-header-content {
    height: auto !important;
  }

  :is(#sticky-header, .vh-header--react):where(.vh-header--react):where(:not(.vh-pages-embed *, .vh-packages-page *)) .vh-header-content {
    align-content: start !important;
  }

  /* The cluster is one unit: it holds its width and keeps its order, and
     the title is what runs out of room first. */
  :where(.vh-header--react) .vh-header-content > .flex-50.vh-controls-col {
    flex-shrink: 0;
  }

  :where(.vh-header--react) .vh-header-content > .flex-50.vh-controls-col > .d-flex:first-child {
    flex-wrap: nowrap;
  }

  /* `order: 2` ties with `.vh-controls-col` (see the order block earlier in
     this file); PageTitle.js renders this row directly after that column,
     and equal order values fall back to source order, so it lands between
     the title/cluster row and `.sub-section` (order 3) without renumbering
     either of them. `grid-column` is what makes it span both tracks of the
     1060px grid rather than auto-placing into the title's. */
  :where(.vh-header--react) .vh-header-content > .vh-header-search-row {
    order: 2;
    grid-column: 1 / -1;
    margin-top: 12px;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Outranks the 48px icon-pill sizing the 760px block gives the cluster's
     own search field -- that field is not this one, and this one is the
     full-width desktop field.

     BY MODIFIER AS WELL AS BY ID, for the same reason the Blade chrome above
     is: a showroom copy of this header cannot carry `#sticky-header`, and
     without these four rules its open search row was a 264px field floating
     in a full-width row instead of filling it. */
  :is(#sticky-header, .vh-header--react):where(.vh-header--react) .vh-header-content > .vh-header-search-row .search-bar.search-two {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  :is(#sticky-header, .vh-header--react):where(.vh-header--react) .vh-header-content > .vh-header-search-row .search-bar.search-two .input-group {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  :is(#sticky-header, .vh-header--react):where(.vh-header--react) .vh-header-content > .vh-header-search-row .search-bar.search-two input,
:is(#sticky-header, .vh-header--react):where(.vh-header--react) .vh-header-content > .vh-header-search-row .search-bar.search-two .close-searchIcon {
    display: flex !important;
  }

  :is(#sticky-header, .vh-header--react):where(.vh-header--react) .vh-header-content > .vh-header-search-row .search-bar.search-two .btn-search-padding {
    width: auto;
    min-width: 0 !important;
  }

  /* ---- Blade ---- */
  :is(#sticky-header, .vh-header--blade):where(.vh-header--blade).top-header.sticky-header {
    height: auto !important;
  }

  /* GRID, NOT A WRAPPING FLEX ROW. Flexbox breaks lines using each item's
     hypothetical main size BEFORE it shrinks anything, so as soon as
     `.header-content` is allowed to wrap, a title wider than the row goes
     to a line of its own and takes the cluster with it -- measured at 375:
     the title column ran the full 327px and the cluster dropped below it,
     hard left. A grid has no such step: the title's track is
     `minmax(0, 1fr)` and simply gives way. Row and column are stated
     explicitly for the cluster and the search field so nothing depends on
     auto-placement finding them in the right order. */
  :where(.vh-header--blade) .header-content {
  /* `!important` because the element also carries Bootstrap's `.d-flex`
     utility, which is itself `display: flex !important`. */
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    /* 12px between row 1 and the open search row -- the `margin-top` the
       React search row carries, so both renderers open to the same y. */
    row-gap: 12px;
    align-items: center;
  }

  /* ROW 1 IS PINNED TO THE HEIGHT IT ALREADY HAS, and the box grows
     downwards. Row 1 is 36px -- the search field's height, the same track
     the React header's content row is -- so the title and the cluster sit at
     exactly the same y whether or not a second row exists, instead of being
     re-centred in a taller box the moment the search row appears.
     `min-height` rather than `height` so the closed header is the height it
     was, and `align-content: start` so the added row lands below row 1
     rather than redistributing both. */
  :is(#sticky-header, .vh-header--blade):where(.vh-header--blade) .header-content {
    height: auto !important;
    min-height: 68px;
    /* ONE EXPLICIT TRACK, not two. A second declared track puts the row gap
       into the box whether or not anything occupies it -- 12px of dead space
       under the cluster on every closed narrow header. The search field
       states `grid-row: 2` itself, so it opens into an implicit track and
       the gap appears with it. */
    grid-template-rows: 36px;
    align-content: start;
  }

  :where(.vh-header--blade) .header-content > .d-flex.justify-content-end {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  /* The title is the only thing that yields. */
  :where(.vh-header--blade) .header-content > .d-flex.justify-content-start {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  :where(.vh-header--blade) .header-content .header-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }

  /* Closed, the field is not in the layout at all -- the toggle button is
     the control. `display: none` is safe here precisely because the button
     no longer opens the field by focusing it. */
  :where(.vh-header--blade) .header-content > .vh-header-search-field {
    display: none;
  }

  :where(.vh-header--blade).vh-search-open .header-content > .vh-header-search-field {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: stretch;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }
}

/* End import from ./components/page-header.css */

/*# sourceMappingURL=sunshine-theme.css.map */
/* End external import from public/collections/css/sunshine-theme.css */

/* Font Libraries */
/* External import from resources/assets/themes/vendor/line-awesome.css */
/*!
 *  Line Awesome 1.1.0 by @icons_8 - https://icons8.com/line-awesome
 *  License - https://icons8.com/good-boy-license/ (Font: SIL OFL 1.1, CSS: MIT License)
 *
 * Made with love by Icons8 [ https://icons8.com/ ] using FontCustom [ https://github.com/FontCustom/fontcustom ]
 *
 * Contacts:
 *    [ https://icons8.com/contact ]
 *
 * Follow Icon8 on
 *    Twitter [ https://twitter.com/icons_8 ]
 *    Facebook [ https://www.facebook.com/Icons8 ]
 *    Google+ [ https://plus.google.com/+Icons8 ]
 *    GitHub [ https://github.com/icons8 ]
 */

@font-face {
  font-family: "LineAwesome";
  src: url("/fonts/line-awesome.eot?v=1.1.");
  src: url("/fonts/line-awesome.eot??v=1.1.#iefix") format("embedded-opentype"),
       url("/fonts/line-awesome.woff2?v=1.1.") format("woff2"),
       url("/fonts/line-awesome.woff?v=1.1.") format("woff"),
       url("/fonts/line-awesome.ttf?v=1.1.") format("truetype"),
       url("/fonts/line-awesome.svg?v=1.1.#fa") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "LineAwesome";
    src: url("/fonts/line-awesome.svg?v=1.1.#fa") format("svg");
  }
}

/* Thanks to http://fontawesome.io @fontawesome and @davegandy */
.la {
    display: inline-block;
    font: normal normal normal 16px/1 "LineAwesome";
    font-size: inherit;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
/* makes the font 33% larger relative to the icon container */
.la-lg {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
}
.la-2x {
    font-size: 2em;
}
.la-3x {
    font-size: 3em;
}
.la-4x {
    font-size: 4em;
}
.la-5x {
    font-size: 5em;
}
.la-fw {
    width: 1.28571429em;
    text-align: center;
}
.la-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none;
}
.la-ul > li {
    position: relative;
}
.la-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: 0.14285714em;
    text-align: center;
}
.la-li.la-lg {
    left: -1.85714286em;
}
.la-border {
    padding: .2em .25em .15em;
    border: solid 0.08em #eeeeee;
    -webkit-border-radius: .1em;

    -moz-border-radius: .1em;

    border-radius: .1em;
}
.pull-right {
    float: right;
}
.pull-left {
    float: left;
}
.li.pull-left {
    margin-right: .3em;
}
.li.pull-right {
    margin-left: .3em;
}
.la-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    -webkit-animation: fa-spin 2s infinite linear;

    -moz-animation: fa-spin 2s infinite linear;

    -ms-animation: fa-spin 2s infinite linear;

    animation: fa-spin 2s infinite linear;
}
@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);

        -moz-transform: rotate(359deg);

        -ms-transform: rotate(359deg);

        transform: rotate(359deg);
    }
}
@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);

        -moz-transform: rotate(359deg);

        -ms-transform: rotate(359deg);

        transform: rotate(359deg);
    }
}
.la-rotate-90 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);
}
.la-rotate-180 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);

    -moz-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg);
}
.la-rotate-270 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);

    -moz-transform: rotate(270deg);

    -ms-transform: rotate(270deg);

    transform: rotate(270deg);
}
.la-flip-horizontal {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);

    -moz-transform: scale(-1, 1);

    -ms-transform: scale(-1, 1);

    transform: scale(-1, 1);
}
.la-flip-vertical {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);

    -moz-transform: scale(1, -1);

    -ms-transform: scale(1, -1);

    transform: scale(1, -1);
}
:root .la-rotate-90,
:root .la-rotate-180,
:root .la-rotate-270,
:root .la-flip-horizontal,
:root .la-flip-vertical {
    filter: none;
}
.la-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
}
.la-stack-1x,
.la-stack-2x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}
.la-stack-1x {
    line-height: inherit;
}
.la-stack-2x {
    font-size: 2em;
}
.la-inverse {
    color: #ffffff;
}
/* Thanks to http://fontawesome.io @fontawesome and @davegandy */

.la-500px:before { content: "\f100"; }
.la-adjust:before { content: "\f101"; }
.la-adn:before { content: "\f102"; }
.la-align-center:before { content: "\f103"; }
.la-align-justify:before { content: "\f104"; }
.la-align-left:before { content: "\f105"; }
.la-align-right:before { content: "\f106"; }
.la-amazon:before { content: "\f107"; }
.la-ambulance:before { content: "\f108"; }
.la-anchor:before { content: "\f109"; }
.la-android:before { content: "\f10a"; }
.la-angellist:before { content: "\f10b"; }
.la-angle-double-down:before { content: "\f10c"; }
.la-angle-double-left:before { content: "\f10d"; }
.la-angle-double-right:before { content: "\f10e"; }
.la-angle-double-up:before { content: "\f10f"; }
.la-angle-down:before { content: "\f110"; }
.la-angle-left:before { content: "\f111"; }
.la-angle-right:before { content: "\f112"; }
.la-angle-up:before { content: "\f113"; }
.la-apple:before { content: "\f114"; }
.la-archive:before { content: "\f115"; }
.la-area-chart:before { content: "\f116"; }
.la-arrow-circle-down:before { content: "\f117"; }
.la-arrow-circle-left:before { content: "\f118"; }
.la-arrow-circle-o-down:before { content: "\f119"; }
.la-arrow-circle-o-left:before { content: "\f11a"; }
.la-arrow-circle-o-right:before { content: "\f11b"; }
.la-arrow-circle-o-up:before { content: "\f11c"; }
.la-arrow-circle-right:before { content: "\f11d"; }
.la-arrow-circle-up:before { content: "\f11e"; }
.la-arrow-down:before { content: "\f11f"; }
.la-arrow-left:before { content: "\f120"; }
.la-arrow-right:before { content: "\f121"; }
.la-arrow-up:before { content: "\f122"; }
.la-arrows:before { content: "\f123"; }
.la-arrows-alt:before { content: "\f124"; }
.la-arrows-h:before { content: "\f125"; }
.la-arrows-v:before { content: "\f126"; }
.la-asterisk:before { content: "\f127"; }
.la-at:before { content: "\f128"; }
.la-automobile:before { content: "\f129"; }
.la-backward:before { content: "\f12a"; }
.la-balance-scale:before { content: "\f12b"; }
.la-ban:before { content: "\f12c"; }
.la-bank:before { content: "\f12d"; }
.la-bar-chart:before { content: "\f12e"; }
.la-bar-chart-o:before { content: "\f12f"; }
.la-barcode:before { content: "\f130"; }
.la-bars:before { content: "\f131"; }
.la-battery-0:before { content: "\f132"; }
.la-battery-1:before { content: "\f133"; }
.la-battery-2:before { content: "\f134"; }
.la-battery-3:before { content: "\f135"; }
.la-battery-4:before { content: "\f136"; }
.la-battery-empty:before { content: "\f137"; }
.la-battery-full:before { content: "\f138"; }
.la-battery-half:before { content: "\f139"; }
.la-battery-quarter:before { content: "\f13a"; }
.la-battery-three-quarters:before { content: "\f13b"; }
.la-bed:before { content: "\f13c"; }
.la-beer:before { content: "\f13d"; }
.la-behance:before { content: "\f13e"; }
.la-behance-square:before { content: "\f13f"; }
.la-bell:before { content: "\f140"; }
.la-bell-o:before { content: "\f141"; }
.la-bell-slash:before { content: "\f142"; }
.la-bell-slash-o:before { content: "\f143"; }
.la-bicycle:before { content: "\f144"; }
.la-binoculars:before { content: "\f145"; }
.la-birthday-cake:before { content: "\f146"; }
.la-bitbucket:before { content: "\f147"; }
.la-bitbucket-square:before { content: "\f148"; }
.la-bitcoin:before { content: "\f149"; }
.la-black-tie:before { content: "\f14a"; }
.la-bold:before { content: "\f14b"; }
.la-bolt:before { content: "\f14c"; }
.la-bomb:before { content: "\f14d"; }
.la-book:before { content: "\f14e"; }
.la-bookmark:before { content: "\f14f"; }
.la-bookmark-o:before { content: "\f150"; }
.la-briefcase:before { content: "\f151"; }
.la-btc:before { content: "\f152"; }
.la-bug:before { content: "\f153"; }
.la-building:before { content: "\f154"; }
.la-building-o:before { content: "\f155"; }
.la-bullhorn:before { content: "\f156"; }
.la-bullseye:before { content: "\f157"; }
.la-bus:before { content: "\f158"; }
.la-buysellads:before { content: "\f159"; }
.la-cab:before { content: "\f15a"; }
.la-calculator:before { content: "\f15b"; }
.la-calendar:before { content: "\f15c"; }
.la-calendar-check-o:before { content: "\f15d"; }
.la-calendar-minus-o:before { content: "\f15e"; }
.la-calendar-o:before { content: "\f15f"; }
.la-calendar-plus-o:before { content: "\f160"; }
.la-calendar-times-o:before { content: "\f161"; }
.la-camera:before { content: "\f162"; }
.la-camera-retro:before { content: "\f163"; }
.la-car:before { content: "\f164"; }
.la-caret-down:before { content: "\f165"; }
.la-caret-left:before { content: "\f166"; }
.la-caret-right:before { content: "\f167"; }
.la-caret-square-o-down:before, .la-toggle-down:before { content: "\f168"; }
.la-caret-square-o-left:before, .la-toggle-left:before { content: "\f169"; }
.la-caret-square-o-right:before, .la-toggle-right:before { content: "\f16a"; }
.la-caret-square-o-up:before, .la-toggle-up:before { content: "\f16b"; }
.la-caret-up:before { content: "\f16c"; }
.la-cart-arrow-down:before { content: "\f16d"; }
.la-cart-plus:before { content: "\f16e"; }
.la-cc:before { content: "\f16f"; }
.la-cc-amex:before { content: "\f170"; }
.la-cc-diners-club:before { content: "\f171"; }
.la-cc-discover:before { content: "\f172"; }
.la-cc-jcb:before { content: "\f173"; }
.la-cc-mastercard:before { content: "\f174"; }
.la-cc-paypal:before { content: "\f175"; }
.la-cc-stripe:before { content: "\f176"; }
.la-cc-visa:before { content: "\f177"; }
.la-certificate:before { content: "\f178"; }
.la-chain:before { content: "\f179"; }
.la-chain-broken:before { content: "\f17a"; }
.la-check:before { content: "\f17b"; }
.la-check-circle:before { content: "\f17c"; }
.la-check-circle-o:before { content: "\f17d"; }
.la-check-square:before { content: "\f17e"; }
.la-check-square-o:before { content: "\f17f"; }
.la-chevron-circle-down:before { content: "\f180"; }
.la-chevron-circle-left:before { content: "\f181"; }
.la-chevron-circle-right:before { content: "\f182"; }
.la-chevron-circle-up:before { content: "\f183"; }
.la-chevron-down:before { content: "\f184"; }
.la-chevron-left:before { content: "\f185"; }
.la-chevron-right:before { content: "\f186"; }
.la-chevron-up:before { content: "\f187"; }
.la-child:before { content: "\f188"; }
.la-chrome:before { content: "\f189"; }
.la-circle:before { content: "\f18a"; }
.la-circle-o:before { content: "\f18b"; }
.la-circle-o-notch:before { content: "\f18c"; }
.la-circle-thin:before { content: "\f18d"; }
.la-clipboard:before { content: "\f18e"; }
.la-clock-o:before { content: "\f18f"; }
.la-clone:before { content: "\f190"; }
.la-close:before { content: "\f191"; }
.la-cloud:before { content: "\f192"; }
.la-cloud-download:before { content: "\f193"; }
.la-cloud-upload:before { content: "\f194"; }
.la-cny:before { content: "\f195"; }
.la-code:before { content: "\f196"; }
.la-code-fork:before { content: "\f197"; }
.la-codepen:before { content: "\f198"; }
.la-coffee:before { content: "\f199"; }
.la-cog:before { content: "\f19a"; }
.la-cogs:before { content: "\f19b"; }
.la-columns:before { content: "\f19c"; }
.la-comment:before { content: "\f19d"; }
.la-comment-o:before { content: "\f19e"; }
.la-commenting:before { content: "\f19f"; }
.la-commenting-o:before { content: "\f1a0"; }
.la-comments:before { content: "\f1a1"; }
.la-comments-o:before { content: "\f1a2"; }
.la-compass:before { content: "\f1a3"; }
.la-compress:before { content: "\f1a4"; }
.la-connectdevelop:before { content: "\f1a5"; }
.la-contao:before { content: "\f1a6"; }
.la-copy:before { content: "\f1a7"; }
.la-copyright:before { content: "\f1a8"; }
.la-creative-commons:before { content: "\f1a9"; }
.la-credit-card:before { content: "\f1aa"; }
.la-crop:before { content: "\f1ab"; }
.la-crosshairs:before { content: "\f1ac"; }
.la-css3:before { content: "\f1ad"; }
.la-cube:before { content: "\f1ae"; }
.la-cubes:before { content: "\f1af"; }
.la-cut:before { content: "\f1b0"; }
.la-cutlery:before { content: "\f1b1"; }
.la-dashboard:before { content: "\f1b2"; }
.la-dashcube:before { content: "\f1b3"; }
.la-database:before { content: "\f1b4"; }
.la-dedent:before { content: "\f1b5"; }
.la-delicious:before { content: "\f1b6"; }
.la-desktop:before { content: "\f1b7"; }
.la-deviantart:before { content: "\f1b8"; }
.la-diamond:before { content: "\f1b9"; }
.la-digg:before { content: "\f1ba"; }
.la-dollar:before { content: "\f1bb"; }
.la-dot-circle-o:before { content: "\f1bc"; }
.la-download:before { content: "\f1bd"; }
.la-dribbble:before { content: "\f1be"; }
.la-dropbox:before { content: "\f1bf"; }
.la-drupal:before { content: "\f1c0"; }
.la-edit:before { content: "\f1c1"; }
.la-eject:before { content: "\f1c2"; }
.la-ellipsis-h:before { content: "\f1c3"; }
.la-ellipsis-v:before { content: "\f1c4"; }
.la-empire:before, .la-ge:before { content: "\f1c5"; }
.la-envelope:before { content: "\f1c6"; }
.la-envelope-o:before { content: "\f1c7"; }
.la-envelope-square:before { content: "\f1c8"; }
.la-eraser:before { content: "\f1c9"; }
.la-eur:before { content: "\f1ca"; }
.la-euro:before { content: "\f1cb"; }
.la-exchange:before { content: "\f1cc"; }
.la-exclamation:before { content: "\f1cd"; }
.la-exclamation-circle:before { content: "\f1ce"; }
.la-exclamation-triangle:before { content: "\f1cf"; }
.la-expand:before { content: "\f1d0"; }
.la-expeditedssl:before { content: "\f1d1"; }
.la-external-link:before { content: "\f1d2"; }
.la-external-link-square:before { content: "\f1d3"; }
.la-eye:before { content: "\f1d4"; }
.la-eye-slash:before { content: "\f1d5"; }
.la-eyedropper:before { content: "\f1d6"; }
.la-facebook:before, .la-facebook-f:before { content: "\f1d7"; }
.la-facebook-official:before { content: "\f1d8"; }
.la-facebook-square:before { content: "\f1d9"; }
.la-fast-backward:before { content: "\f1da"; }
.la-fast-forward:before { content: "\f1db"; }
.la-fax:before { content: "\f1dc"; }
.la-female:before { content: "\f1dd"; }
.la-fighter-jet:before { content: "\f1de"; }
.la-file:before { content: "\f1df"; }
.la-file-archive-o:before { content: "\f1e0"; }
.la-file-audio-o:before { content: "\f1e1"; }
.la-file-code-o:before { content: "\f1e2"; }
.la-file-excel-o:before { content: "\f1e3"; }
.la-file-image-o:before { content: "\f1e4"; }
.la-file-movie-o:before { content: "\f1e5"; }
.la-file-o:before { content: "\f1e6"; }
.la-file-pdf-o:before { content: "\f1e7"; }
.la-file-photo-o:before { content: "\f1e8"; }
.la-file-picture-o:before { content: "\f1e9"; }
.la-file-powerpoint-o:before { content: "\f1ea"; }
.la-file-sound-o:before { content: "\f1eb"; }
.la-file-text:before { content: "\f1ec"; }
.la-file-text-o:before { content: "\f1ed"; }
.la-file-video-o:before { content: "\f1ee"; }
.la-file-word-o:before { content: "\f1ef"; }
.la-file-zip-o:before { content: "\f1f0"; }
.la-files-o:before { content: "\f1f1"; }
.la-film:before { content: "\f1f2"; }
.la-filter:before { content: "\f1f3"; }
.la-fire:before { content: "\f1f4"; }
.la-fire-extinguisher:before { content: "\f1f5"; }
.la-firefox:before { content: "\f1f6"; }
.la-flag:before { content: "\f1f7"; }
.la-flag-checkered:before { content: "\f1f8"; }
.la-flag-o:before { content: "\f1f9"; }
.la-flash:before { content: "\f1fa"; }
.la-flask:before { content: "\f1fb"; }
.la-flickr:before { content: "\f1fc"; }
.la-floppy-o:before { content: "\f1fd"; }
.la-folder:before { content: "\f1fe"; }
.la-folder-o:before { content: "\f1ff"; }
.la-folder-open:before { content: "\f200"; }
.la-folder-open-o:before { content: "\f201"; }
.la-font:before { content: "\f202"; }
.la-fonticons:before { content: "\f203"; }
.la-forumbee:before { content: "\f204"; }
.la-forward:before { content: "\f205"; }
.la-foursquare:before { content: "\f206"; }
.la-frown-o:before { content: "\f207"; }
.la-futbol-o:before, .la-soccer-ball-o:before { content: "\f208"; }
.la-gamepad:before { content: "\f209"; }
.la-gavel:before { content: "\f20a"; }
.la-gbp:before { content: "\f20b"; }
.la-gear:before { content: "\f20c"; }
.la-gears:before { content: "\f20d"; }
.la-genderless:before { content: "\f20e"; }
.la-get-pocket:before { content: "\f20f"; }
.la-gg:before { content: "\f210"; }
.la-gg-circle:before { content: "\f211"; }
.la-gift:before { content: "\f212"; }
.la-git:before { content: "\f213"; }
.la-git-square:before { content: "\f214"; }
.la-github:before { content: "\f215"; }
.la-github-alt:before { content: "\f216"; }
.la-github-square:before { content: "\f217"; }
.la-glass:before { content: "\f218"; }
.la-globe:before { content: "\f219"; }
.la-google:before { content: "\f21a"; }
.la-google-plus:before { content: "\f21b"; }
.la-google-plus-square:before { content: "\f21c"; }
.la-google-wallet:before { content: "\f21d"; }
.la-graduation-cap:before { content: "\f21e"; }
.la-gratipay:before, .la-gittip:before { content: "\f21f"; }
.la-group:before { content: "\f220"; }
.la-h-square:before { content: "\f221"; }
.la-hacker-news:before { content: "\f222"; }
.la-hand-grab-o:before { content: "\f223"; }
.la-hand-lizard-o:before { content: "\f224"; }
.la-hand-o-down:before { content: "\f225"; }
.la-hand-o-left:before { content: "\f226"; }
.la-hand-o-right:before { content: "\f227"; }
.la-hand-o-up:before { content: "\f228"; }
.la-hand-paper-o:before { content: "\f229"; }
.la-hand-peace-o:before { content: "\f22a"; }
.la-hand-pointer-o:before { content: "\f22b"; }
.la-hand-rock-o:before { content: "\f22c"; }
.la-hand-scissors-o:before { content: "\f22d"; }
.la-hand-spock-o:before { content: "\f22e"; }
.la-hand-stop-o:before { content: "\f22f"; }
.la-hdd-o:before { content: "\f230"; }
.la-header:before { content: "\f231"; }
.la-headphones:before { content: "\f232"; }
.la-heart:before { content: "\f233"; }
.la-heart-o:before { content: "\f234"; }
.la-heartbeat:before { content: "\f235"; }
.la-history:before { content: "\f236"; }
.la-home:before { content: "\f237"; }
.la-hospital-o:before { content: "\f238"; }
.la-hotel:before { content: "\f239"; }
.la-hourglass:before { content: "\f23a"; }
.la-hourglass-1:before { content: "\f23b"; }
.la-hourglass-2:before { content: "\f23c"; }
.la-hourglass-3:before { content: "\f23d"; }
.la-hourglass-end:before { content: "\f23e"; }
.la-hourglass-half:before { content: "\f23f"; }
.la-hourglass-o:before { content: "\f240"; }
.la-hourglass-start:before { content: "\f241"; }
.la-houzz:before { content: "\f242"; }
.la-html5:before { content: "\f243"; }
.la-i-cursor:before { content: "\f244"; }
.la-ils:before { content: "\f245"; }
.la-image:before { content: "\f246"; }
.la-inbox:before { content: "\f247"; }
.la-indent:before { content: "\f248"; }
.la-industry:before { content: "\f249"; }
.la-info:before { content: "\f24a"; }
.la-info-circle:before { content: "\f24b"; }
.la-inr:before { content: "\f24c"; }
.la-instagram:before { content: "\f24d"; }
.la-institution:before { content: "\f24e"; }
.la-internet-explorer:before { content: "\f24f"; }
.la-ioxhost:before { content: "\f250"; }
.la-italic:before { content: "\f251"; }
.la-joomla:before { content: "\f252"; }
.la-jpy:before { content: "\f253"; }
.la-jsfiddle:before { content: "\f254"; }
.la-key:before { content: "\f255"; }
.la-keyboard-o:before { content: "\f256"; }
.la-krw:before { content: "\f257"; }
.la-language:before { content: "\f258"; }
.la-laptop:before { content: "\f259"; }
.la-lastfm:before { content: "\f25a"; }
.la-lastfm-square:before { content: "\f25b"; }
.la-leaf:before { content: "\f25c"; }
.la-leanpub:before { content: "\f25d"; }
.la-legal:before { content: "\f25e"; }
.la-lemon-o:before { content: "\f25f"; }
.la-level-down:before { content: "\f260"; }
.la-level-up:before { content: "\f261"; }
.la-life-bouy:before { content: "\f262"; }
.la-life-buoy:before { content: "\f263"; }
.la-life-ring:before, .la-support:before { content: "\f264"; }
.la-life-saver:before { content: "\f265"; }
.la-lightbulb-o:before { content: "\f266"; }
.la-line-chart:before { content: "\f267"; }
.la-link:before { content: "\f268"; }
.la-linkedin:before { content: "\f269"; }
.la-linkedin-square:before { content: "\f26a"; }
.la-linux:before { content: "\f26b"; }
.la-list:before { content: "\f26c"; }
.la-list-alt:before { content: "\f26d"; }
.la-list-ol:before { content: "\f26e"; }
.la-list-ul:before { content: "\f26f"; }
.la-location-arrow:before { content: "\f270"; }
.la-lock:before { content: "\f271"; }
.la-long-arrow-down:before { content: "\f272"; }
.la-long-arrow-left:before { content: "\f273"; }
.la-long-arrow-right:before { content: "\f274"; }
.la-long-arrow-up:before { content: "\f275"; }
.la-magic:before { content: "\f276"; }
.la-magnet:before { content: "\f277"; }
.la-mail-forward:before { content: "\f278"; }
.la-mail-reply:before { content: "\f279"; }
.la-mail-reply-all:before { content: "\f27a"; }
.la-male:before { content: "\f27b"; }
.la-map:before { content: "\f27c"; }
.la-map-marker:before { content: "\f27d"; }
.la-map-o:before { content: "\f27e"; }
.la-map-pin:before { content: "\f27f"; }
.la-map-signs:before { content: "\f280"; }
.la-mars:before { content: "\f281"; }
.la-mars-double:before { content: "\f282"; }
.la-mars-stroke:before { content: "\f283"; }
.la-mars-stroke-h:before { content: "\f284"; }
.la-mars-stroke-v:before { content: "\f285"; }
.la-maxcdn:before { content: "\f286"; }
.la-meanpath:before { content: "\f287"; }
.la-medium:before { content: "\f288"; }
.la-medkit:before { content: "\f289"; }
.la-meh-o:before { content: "\f28a"; }
.la-mercury:before { content: "\f28b"; }
.la-microphone:before { content: "\f28c"; }
.la-microphone-slash:before { content: "\f28d"; }
.la-minus:before { content: "\f28e"; }
.la-minus-circle:before { content: "\f28f"; }
.la-minus-square:before { content: "\f290"; }
.la-minus-square-o:before { content: "\f291"; }
.la-mobile:before { content: "\f292"; }
.la-mobile-phone:before { content: "\f293"; }
.la-money:before { content: "\f294"; }
.la-moon-o:before { content: "\f295"; }
.la-mortar-board:before { content: "\f296"; }
.la-motorcycle:before { content: "\f297"; }
.la-mouse-pointer:before { content: "\f298"; }
.la-music:before { content: "\f299"; }
.la-navicon:before { content: "\f29a"; }
.la-neuter:before { content: "\f29b"; }
.la-newspaper-o:before { content: "\f29c"; }
.la-object-group:before { content: "\f29d"; }
.la-object-ungroup:before { content: "\f29e"; }
.la-odnoklassniki:before { content: "\f29f"; }
.la-odnoklassniki-square:before { content: "\f2a0"; }
.la-opencart:before { content: "\f2a1"; }
.la-openid:before { content: "\f2a2"; }
.la-opera:before { content: "\f2a3"; }
.la-optin-monster:before { content: "\f2a4"; }
.la-outdent:before { content: "\f2a5"; }
.la-pagelines:before { content: "\f2a6"; }
.la-paint-brush:before { content: "\f2a7"; }
.la-paper-plane:before, .la-send:before { content: "\f2a8"; }
.la-paper-plane-o:before, .la-send-o:before { content: "\f2a9"; }
.la-paperclip:before { content: "\f2aa"; }
.la-paragraph:before { content: "\f2ab"; }
.la-paste:before { content: "\f2ac"; }
.la-pause:before { content: "\f2ad"; }
.la-paw:before { content: "\f2ae"; }
.la-paypal:before { content: "\f2af"; }
.la-pencil:before { content: "\f2b0"; }
.la-pencil-square:before { content: "\f2b1"; }
.la-pencil-square-o:before { content: "\f2b2"; }
.la-phone:before { content: "\f2b3"; }
.la-phone-square:before { content: "\f2b4"; }
.la-photo:before { content: "\f2b5"; }
.la-picture-o:before { content: "\f2b6"; }
.la-pie-chart:before { content: "\f2b7"; }
.la-pied-piper:before { content: "\f2b8"; }
.la-pied-piper-alt:before { content: "\f2b9"; }
.la-pinterest:before { content: "\f2ba"; }
.la-pinterest-p:before { content: "\f2bb"; }
.la-pinterest-square:before { content: "\f2bc"; }
.la-plane:before { content: "\f2bd"; }
.la-play:before { content: "\f2be"; }
.la-play-circle:before { content: "\f2bf"; }
.la-play-circle-o:before { content: "\f2c0"; }
.la-plug:before { content: "\f2c1"; }
.la-plus:before { content: "\f2c2"; }
.la-plus-circle:before { content: "\f2c3"; }
.la-plus-square:before { content: "\f2c4"; }
.la-plus-square-o:before { content: "\f2c5"; }
.la-power-off:before { content: "\f2c6"; }
.la-print:before { content: "\f2c7"; }
.la-puzzle-piece:before { content: "\f2c8"; }
.la-qq:before { content: "\f2c9"; }
.la-qrcode:before { content: "\f2ca"; }
.la-question:before { content: "\f2cb"; }
.la-question-circle:before { content: "\f2cc"; }
.la-quote-left:before { content: "\f2cd"; }
.la-quote-right:before { content: "\f2ce"; }
.la-ra:before { content: "\f2cf"; }
.la-random:before { content: "\f2d0"; }
.la-rebel:before { content: "\f2d1"; }
.la-recycle:before { content: "\f2d2"; }
.la-reddit:before { content: "\f2d3"; }
.la-reddit-square:before { content: "\f2d4"; }
.la-refresh:before { content: "\f2d5"; }
.la-registered:before { content: "\f2d6"; }
.la-renren:before { content: "\f2d7"; }
.la-reorder:before { content: "\f2d8"; }
.la-repeat:before { content: "\f2d9"; }
.la-reply:before { content: "\f2da"; }
.la-reply-all:before { content: "\f2db"; }
.la-retweet:before { content: "\f2dc"; }
.la-rmb:before { content: "\f2dd"; }
.la-road:before { content: "\f2de"; }
.la-rocket:before { content: "\f2df"; }
.la-rotate-left:before { content: "\f2e0"; }
.la-rotate-right:before { content: "\f2e1"; }
.la-rouble:before { content: "\f2e2"; }
.la-rss:before, .la-feed:before { content: "\f2e3"; }
.la-rss-square:before { content: "\f2e4"; }
.la-rub:before { content: "\f2e5"; }
.la-ruble:before { content: "\f2e6"; }
.la-rupee:before { content: "\f2e7"; }
.la-safari:before { content: "\f2e8"; }
.la-save:before { content: "\f2e9"; }
.la-scissors:before { content: "\f2ea"; }
.la-search:before { content: "\f2eb"; }
.la-search-minus:before { content: "\f2ec"; }
.la-search-plus:before { content: "\f2ed"; }
.la-sellsy:before { content: "\f2ee"; }
.la-server:before { content: "\f2ef"; }
.la-share:before { content: "\f2f0"; }
.la-share-alt:before { content: "\f2f1"; }
.la-share-alt-square:before { content: "\f2f2"; }
.la-share-square:before { content: "\f2f3"; }
.la-share-square-o:before { content: "\f2f4"; }
.la-shekel:before { content: "\f2f5"; }
.la-sheqel:before { content: "\f2f6"; }
.la-shield:before { content: "\f2f7"; }
.la-ship:before { content: "\f2f8"; }
.la-shirtsinbulk:before { content: "\f2f9"; }
.la-shopping-cart:before { content: "\f2fa"; }
.la-sign-in:before { content: "\f2fb"; }
.la-sign-out:before { content: "\f2fc"; }
.la-signal:before { content: "\f2fd"; }
.la-simplybuilt:before { content: "\f2fe"; }
.la-sitemap:before { content: "\f2ff"; }
.la-skyatlas:before { content: "\f300"; }
.la-skype:before { content: "\f301"; }
.la-slack:before { content: "\f302"; }
.la-sliders:before { content: "\f303"; }
.la-slideshare:before { content: "\f304"; }
.la-smile-o:before { content: "\f305"; }
.la-sort:before, .la-unsorted:before { content: "\f306"; }
.la-sort-alpha-asc:before { content: "\f307"; }
.la-sort-alpha-desc:before { content: "\f308"; }
.la-sort-amount-asc:before { content: "\f309"; }
.la-sort-amount-desc:before { content: "\f30a"; }
.la-sort-asc:before, .la-sort-up:before { content: "\f30b"; }
.la-sort-desc:before, .la-sort-down:before { content: "\f30c"; }
.la-sort-numeric-asc:before { content: "\f30d"; }
.la-sort-numeric-desc:before { content: "\f30e"; }
.la-soundcloud:before { content: "\f30f"; }
.la-space-shuttle:before { content: "\f310"; }
.la-spinner:before { content: "\f311"; }
.la-spoon:before { content: "\f312"; }
.la-spotify:before { content: "\f313"; }
.la-square:before { content: "\f314"; }
.la-square-o:before { content: "\f315"; }
.la-stack-exchange:before { content: "\f316"; }
.la-stack-overflow:before { content: "\f317"; }
.la-star:before { content: "\f318"; }
.la-star-half:before { content: "\f319"; }
.la-star-half-o:before, .la-star-half-full:before, .la-star-half-empty:before { content: "\f31a"; }
.la-star-o:before { content: "\f31b"; }
.la-steam:before { content: "\f31c"; }
.la-steam-square:before { content: "\f31d"; }
.la-step-backward:before { content: "\f31e"; }
.la-step-forward:before { content: "\f31f"; }
.la-stethoscope:before { content: "\f320"; }
.la-sticky-note:before { content: "\f321"; }
.la-sticky-note-o:before { content: "\f322"; }
.la-stop:before { content: "\f323"; }
.la-street-view:before { content: "\f324"; }
.la-strikethrough:before { content: "\f325"; }
.la-stumbleupon:before { content: "\f326"; }
.la-stumbleupon-circle:before { content: "\f327"; }
.la-subscript:before { content: "\f328"; }
.la-subway:before { content: "\f329"; }
.la-suitcase:before { content: "\f32a"; }
.la-sun-o:before { content: "\f32b"; }
.la-superscript:before { content: "\f32c"; }
.la-table:before { content: "\f32d"; }
.la-tablet:before { content: "\f32e"; }
.la-tachometer:before { content: "\f32f"; }
.la-tag:before { content: "\f330"; }
.la-tags:before { content: "\f331"; }
.la-tasks:before { content: "\f332"; }
.la-taxi:before { content: "\f333"; }
.la-television:before, .la-tv:before { content: "\f334"; }
.la-tencent-weibo:before { content: "\f335"; }
.la-terminal:before { content: "\f336"; }
.la-text-height:before { content: "\f337"; }
.la-text-width:before { content: "\f338"; }
.la-th:before { content: "\f339"; }
.la-th-large:before { content: "\f33a"; }
.la-th-list:before { content: "\f33b"; }
.la-thumb-tack:before { content: "\f33c"; }
.la-thumbs-down:before { content: "\f33d"; }
.la-thumbs-o-down:before { content: "\f33e"; }
.la-thumbs-o-up:before { content: "\f33f"; }
.la-thumbs-up:before { content: "\f340"; }
.la-ticket:before { content: "\f341"; }
.la-times:before, .la-remove:before { content: "\f342"; }
.la-times-circle:before { content: "\f343"; }
.la-times-circle-o:before { content: "\f344"; }
.la-tint:before { content: "\f345"; }
.la-toggle-off:before { content: "\f346"; }
.la-toggle-on:before { content: "\f347"; }
.la-trademark:before { content: "\f348"; }
.la-train:before { content: "\f349"; }
.la-transgender:before, .la-intersex:before { content: "\f34a"; }
.la-transgender-alt:before { content: "\f34b"; }
.la-trash:before { content: "\f34c"; }
.la-trash-o:before { content: "\f34d"; }
.la-tree:before { content: "\f34e"; }
.la-trello:before { content: "\f34f"; }
.la-tripadvisor:before { content: "\f350"; }
.la-trophy:before { content: "\f351"; }
.la-truck:before { content: "\f352"; }
.la-try:before { content: "\f353"; }
.la-tty:before { content: "\f354"; }
.la-tumblr:before { content: "\f355"; }
.la-tumblr-square:before { content: "\f356"; }
.la-turkish-lira:before { content: "\f357"; }
.la-twitch:before { content: "\f358"; }
.la-twitter:before { content: "\f359"; }
.la-twitter-square:before { content: "\f35a"; }
.la-umbrella:before { content: "\f35b"; }
.la-underline:before { content: "\f35c"; }
.la-undo:before { content: "\f35d"; }
.la-university:before { content: "\f35e"; }
.la-unlink:before { content: "\f35f"; }
.la-unlock:before { content: "\f360"; }
.la-unlock-alt:before { content: "\f361"; }
.la-upload:before { content: "\f362"; }
.la-usd:before { content: "\f363"; }
.la-user:before { content: "\f364"; }
.la-user-md:before { content: "\f365"; }
.la-user-plus:before { content: "\f366"; }
.la-user-secret:before { content: "\f367"; }
.la-user-times:before { content: "\f368"; }
.la-users:before { content: "\f369"; }
.la-venus:before { content: "\f36a"; }
.la-venus-double:before { content: "\f36b"; }
.la-venus-mars:before { content: "\f36c"; }
.la-viacoin:before { content: "\f36d"; }
.la-video-camera:before { content: "\f36e"; }
.la-vimeo:before { content: "\f36f"; }
.la-vimeo-square:before { content: "\f370"; }
.la-tertiary:before { content: "\f371"; }
.la-vk:before { content: "\f372"; }
.la-volume-down:before { content: "\f373"; }
.la-volume-off:before { content: "\f374"; }
.la-volume-up:before { content: "\f375"; }
.la-warning:before { content: "\f376"; }
.la-wechat:before { content: "\f377"; }
.la-weibo:before { content: "\f378"; }
.la-weixin:before { content: "\f379"; }
.la-whatsapp:before { content: "\f37a"; }
.la-wheelchair:before { content: "\f37b"; }
.la-wifi:before { content: "\f37c"; }
.la-wikipedia-w:before { content: "\f37d"; }
.la-windows:before { content: "\f37e"; }
.la-won:before { content: "\f37f"; }
.la-wordpress:before { content: "\f380"; }
.la-wrench:before { content: "\f381"; }
.la-xing:before { content: "\f382"; }
.la-xing-square:before { content: "\f383"; }
.la-y-combinator:before { content: "\f384"; }
.la-y-combinator-square:before { content: "\f385"; }
.la-yahoo:before { content: "\f386"; }
.la-yc:before { content: "\f387"; }
.la-yc-square:before { content: "\f388"; }
.la-yelp:before { content: "\f389"; }
.la-yen:before { content: "\f38a"; }
.la-youtube:before { content: "\f38b"; }
.la-youtube-play:before { content: "\f38c"; }
.la-youtube-square:before { content: "\f38d"; }
/* End external import from resources/assets/themes/vendor/line-awesome.css */
/* External import from resources/assets/themes/vendor/font-awesome.css */
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}
.fa-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}
.fa-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.85714286em;
}
.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  -webkit-border-radius: .1em;

  -moz-border-radius: .1em;

  border-radius: .1em;
}
.fa-pull-left {
  float: left;
}
.fa-pull-right {
  float: right;
}
.fa.fa-pull-left {
  margin-right: .3em;
}
.fa.fa-pull-right {
  margin-left: .3em;
}
/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.fa.pull-left {
  margin-right: .3em;
}
.fa.pull-right {
  margin-left: .3em;
}
.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  -webkit-animation: fa-spin 2s infinite linear;

  -moz-animation: fa-spin 2s infinite linear;

  -ms-animation: fa-spin 2s infinite linear;

  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  -webkit-animation: fa-spin 1s infinite steps(8);

  -moz-animation: fa-spin 1s infinite steps(8);

  -ms-animation: fa-spin 1s infinite steps(8);

  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);

    -moz-transform: rotate(359deg);

    -ms-transform: rotate(359deg);

    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);

    -moz-transform: rotate(359deg);

    -ms-transform: rotate(359deg);

    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  transform: rotate(90deg);
}
.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);

  -moz-transform: rotate(180deg);

  -ms-transform: rotate(180deg);

  transform: rotate(180deg);
}
.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);

  -moz-transform: rotate(270deg);

  -ms-transform: rotate(270deg);

  transform: rotate(270deg);
}
.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);

  -moz-transform: scale(-1, 1);

  -ms-transform: scale(-1, 1);

  transform: scale(-1, 1);
}
.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);

  -moz-transform: scale(1, -1);

  -ms-transform: scale(1, -1);

  transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: #ffffff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-heart:before {
  content: "\f004";
}
.fa-star:before {
  content: "\f005";
}
.fa-star-o:before {
  content: "\f006";
}
.fa-user:before {
  content: "\f007";
}
.fa-film:before {
  content: "\f008";
}
.fa-th-large:before {
  content: "\f009";
}
.fa-th:before {
  content: "\f00a";
}
.fa-th-list:before {
  content: "\f00b";
}
.fa-check:before {
  content: "\f00c";
}
.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}
.fa-search-plus:before {
  content: "\f00e";
}
.fa-search-minus:before {
  content: "\f010";
}
.fa-power-off:before {
  content: "\f011";
}
.fa-signal:before {
  content: "\f012";
}
.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}
.fa-trash-o:before {
  content: "\f014";
}
.fa-home:before {
  content: "\f015";
}
.fa-file-o:before {
  content: "\f016";
}
.fa-clock-o:before {
  content: "\f017";
}
.fa-road:before {
  content: "\f018";
}
.fa-download:before {
  content: "\f019";
}
.fa-arrow-circle-o-down:before {
  content: "\f01a";
}
.fa-arrow-circle-o-up:before {
  content: "\f01b";
}
.fa-inbox:before {
  content: "\f01c";
}
.fa-play-circle-o:before {
  content: "\f01d";
}
.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}
.fa-refresh:before {
  content: "\f021";
}
.fa-list-alt:before {
  content: "\f022";
}
.fa-lock:before {
  content: "\f023";
}
.fa-flag:before {
  content: "\f024";
}
.fa-headphones:before {
  content: "\f025";
}
.fa-volume-off:before {
  content: "\f026";
}
.fa-volume-down:before {
  content: "\f027";
}
.fa-volume-up:before {
  content: "\f028";
}
.fa-qrcode:before {
  content: "\f029";
}
.fa-barcode:before {
  content: "\f02a";
}
.fa-tag:before {
  content: "\f02b";
}
.fa-tags:before {
  content: "\f02c";
}
.fa-book:before {
  content: "\f02d";
}
.fa-bookmark:before {
  content: "\f02e";
}
.fa-print:before {
  content: "\f02f";
}
.fa-camera:before {
  content: "\f030";
}
.fa-font:before {
  content: "\f031";
}
.fa-bold:before {
  content: "\f032";
}
.fa-italic:before {
  content: "\f033";
}
.fa-text-height:before {
  content: "\f034";
}
.fa-text-width:before {
  content: "\f035";
}
.fa-align-left:before {
  content: "\f036";
}
.fa-align-center:before {
  content: "\f037";
}
.fa-align-right:before {
  content: "\f038";
}
.fa-align-justify:before {
  content: "\f039";
}
.fa-list:before {
  content: "\f03a";
}
.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}
.fa-indent:before {
  content: "\f03c";
}
.fa-video-camera:before {
  content: "\f03d";
}
.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}
.fa-pencil:before {
  content: "\f040";
}
.fa-map-marker:before {
  content: "\f041";
}
.fa-adjust:before {
  content: "\f042";
}
.fa-tint:before {
  content: "\f043";
}
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}
.fa-share-square-o:before {
  content: "\f045";
}
.fa-check-square-o:before {
  content: "\f046";
}
.fa-arrows:before {
  content: "\f047";
}
.fa-step-backward:before {
  content: "\f048";
}
.fa-fast-backward:before {
  content: "\f049";
}
.fa-backward:before {
  content: "\f04a";
}
.fa-play:before {
  content: "\f04b";
}
.fa-pause:before {
  content: "\f04c";
}
.fa-stop:before {
  content: "\f04d";
}
.fa-forward:before {
  content: "\f04e";
}
.fa-fast-forward:before {
  content: "\f050";
}
.fa-step-forward:before {
  content: "\f051";
}
.fa-eject:before {
  content: "\f052";
}
.fa-chevron-left:before {
  content: "\f053";
}
.fa-chevron-right:before {
  content: "\f054";
}
.fa-plus-circle:before {
  content: "\f055";
}
.fa-minus-circle:before {
  content: "\f056";
}
.fa-times-circle:before {
  content: "\f057";
}
.fa-check-circle:before {
  content: "\f058";
}
.fa-question-circle:before {
  content: "\f059";
}
.fa-info-circle:before {
  content: "\f05a";
}
.fa-crosshairs:before {
  content: "\f05b";
}
.fa-times-circle-o:before {
  content: "\f05c";
}
.fa-check-circle-o:before {
  content: "\f05d";
}
.fa-ban:before {
  content: "\f05e";
}
.fa-arrow-left:before {
  content: "\f060";
}
.fa-arrow-right:before {
  content: "\f061";
}
.fa-arrow-up:before {
  content: "\f062";
}
.fa-arrow-down:before {
  content: "\f063";
}
.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}
.fa-expand:before {
  content: "\f065";
}
.fa-compress:before {
  content: "\f066";
}
.fa-plus:before {
  content: "\f067";
}
.fa-minus:before {
  content: "\f068";
}
.fa-asterisk:before {
  content: "\f069";
}
.fa-exclamation-circle:before {
  content: "\f06a";
}
.fa-gift:before {
  content: "\f06b";
}
.fa-leaf:before {
  content: "\f06c";
}
.fa-fire:before {
  content: "\f06d";
}
.fa-eye:before {
  content: "\f06e";
}
.fa-eye-slash:before {
  content: "\f070";
}
.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}
.fa-plane:before {
  content: "\f072";
}
.fa-calendar:before {
  content: "\f073";
}
.fa-random:before {
  content: "\f074";
}
.fa-comment:before {
  content: "\f075";
}
.fa-magnet:before {
  content: "\f076";
}
.fa-chevron-up:before {
  content: "\f077";
}
.fa-chevron-down:before {
  content: "\f078";
}
.fa-retweet:before {
  content: "\f079";
}
.fa-shopping-cart:before {
  content: "\f07a";
}
.fa-folder:before {
  content: "\f07b";
}
.fa-folder-open:before {
  content: "\f07c";
}
.fa-arrows-v:before {
  content: "\f07d";
}
.fa-arrows-h:before {
  content: "\f07e";
}
.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}
.fa-twitter-square:before {
  content: "\f081";
}
.fa-facebook-square:before {
  content: "\f082";
}
.fa-camera-retro:before {
  content: "\f083";
}
.fa-key:before {
  content: "\f084";
}
.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}
.fa-comments:before {
  content: "\f086";
}
.fa-thumbs-o-up:before {
  content: "\f087";
}
.fa-thumbs-o-down:before {
  content: "\f088";
}
.fa-star-half:before {
  content: "\f089";
}
.fa-heart-o:before {
  content: "\f08a";
}
.fa-sign-out:before {
  content: "\f08b";
}
.fa-linkedin-square:before {
  content: "\f08c";
}
.fa-thumb-tack:before {
  content: "\f08d";
}
.fa-external-link:before {
  content: "\f08e";
}
.fa-sign-in:before {
  content: "\f090";
}
.fa-trophy:before {
  content: "\f091";
}
.fa-github-square:before {
  content: "\f092";
}
.fa-upload:before {
  content: "\f093";
}
.fa-lemon-o:before {
  content: "\f094";
}
.fa-phone:before {
  content: "\f095";
}
.fa-square-o:before {
  content: "\f096";
}
.fa-bookmark-o:before {
  content: "\f097";
}
.fa-phone-square:before {
  content: "\f098";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}
.fa-github:before {
  content: "\f09b";
}
.fa-unlock:before {
  content: "\f09c";
}
.fa-credit-card:before {
  content: "\f09d";
}
.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}
.fa-hdd-o:before {
  content: "\f0a0";
}
.fa-bullhorn:before {
  content: "\f0a1";
}
.fa-bell:before {
  content: "\f0f3";
}
.fa-certificate:before {
  content: "\f0a3";
}
.fa-hand-o-right:before {
  content: "\f0a4";
}
.fa-hand-o-left:before {
  content: "\f0a5";
}
.fa-hand-o-up:before {
  content: "\f0a6";
}
.fa-hand-o-down:before {
  content: "\f0a7";
}
.fa-arrow-circle-left:before {
  content: "\f0a8";
}
.fa-arrow-circle-right:before {
  content: "\f0a9";
}
.fa-arrow-circle-up:before {
  content: "\f0aa";
}
.fa-arrow-circle-down:before {
  content: "\f0ab";
}
.fa-globe:before {
  content: "\f0ac";
}
.fa-wrench:before {
  content: "\f0ad";
}
.fa-tasks:before {
  content: "\f0ae";
}
.fa-filter:before {
  content: "\f0b0";
}
.fa-briefcase:before {
  content: "\f0b1";
}
.fa-arrows-alt:before {
  content: "\f0b2";
}
.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}
.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}
.fa-cloud:before {
  content: "\f0c2";
}
.fa-flask:before {
  content: "\f0c3";
}
.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}
.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}
.fa-paperclip:before {
  content: "\f0c6";
}
.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}
.fa-square:before {
  content: "\f0c8";
}
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}
.fa-list-ul:before {
  content: "\f0ca";
}
.fa-list-ol:before {
  content: "\f0cb";
}
.fa-strikethrough:before {
  content: "\f0cc";
}
.fa-underline:before {
  content: "\f0cd";
}
.fa-table:before {
  content: "\f0ce";
}
.fa-magic:before {
  content: "\f0d0";
}
.fa-truck:before {
  content: "\f0d1";
}
.fa-pinterest:before {
  content: "\f0d2";
}
.fa-pinterest-square:before {
  content: "\f0d3";
}
.fa-google-plus-square:before {
  content: "\f0d4";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-money:before {
  content: "\f0d6";
}
.fa-caret-down:before {
  content: "\f0d7";
}
.fa-caret-up:before {
  content: "\f0d8";
}
.fa-caret-left:before {
  content: "\f0d9";
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-columns:before {
  content: "\f0db";
}
.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}
.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}
.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}
.fa-envelope:before {
  content: "\f0e0";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}
.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}
.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}
.fa-comment-o:before {
  content: "\f0e5";
}
.fa-comments-o:before {
  content: "\f0e6";
}
.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}
.fa-sitemap:before {
  content: "\f0e8";
}
.fa-umbrella:before {
  content: "\f0e9";
}
.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}
.fa-lightbulb-o:before {
  content: "\f0eb";
}
.fa-exchange:before {
  content: "\f0ec";
}
.fa-cloud-download:before {
  content: "\f0ed";
}
.fa-cloud-upload:before {
  content: "\f0ee";
}
.fa-user-md:before {
  content: "\f0f0";
}
.fa-stethoscope:before {
  content: "\f0f1";
}
.fa-suitcase:before {
  content: "\f0f2";
}
.fa-bell-o:before {
  content: "\f0a2";
}
.fa-coffee:before {
  content: "\f0f4";
}
.fa-cutlery:before {
  content: "\f0f5";
}
.fa-file-text-o:before {
  content: "\f0f6";
}
.fa-building-o:before {
  content: "\f0f7";
}
.fa-hospital-o:before {
  content: "\f0f8";
}
.fa-ambulance:before {
  content: "\f0f9";
}
.fa-medkit:before {
  content: "\f0fa";
}
.fa-fighter-jet:before {
  content: "\f0fb";
}
.fa-beer:before {
  content: "\f0fc";
}
.fa-h-square:before {
  content: "\f0fd";
}
.fa-plus-square:before {
  content: "\f0fe";
}
.fa-angle-double-left:before {
  content: "\f100";
}
.fa-angle-double-right:before {
  content: "\f101";
}
.fa-angle-double-up:before {
  content: "\f102";
}
.fa-angle-double-down:before {
  content: "\f103";
}
.fa-angle-left:before {
  content: "\f104";
}
.fa-angle-right:before {
  content: "\f105";
}
.fa-angle-up:before {
  content: "\f106";
}
.fa-angle-down:before {
  content: "\f107";
}
.fa-desktop:before {
  content: "\f108";
}
.fa-laptop:before {
  content: "\f109";
}
.fa-tablet:before {
  content: "\f10a";
}
.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}
.fa-circle-o:before {
  content: "\f10c";
}
.fa-quote-left:before {
  content: "\f10d";
}
.fa-quote-right:before {
  content: "\f10e";
}
.fa-spinner:before {
  content: "\f110";
}
.fa-circle:before {
  content: "\f111";
}
.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}
.fa-github-alt:before {
  content: "\f113";
}
.fa-folder-o:before {
  content: "\f114";
}
.fa-folder-open-o:before {
  content: "\f115";
}
.fa-smile-o:before {
  content: "\f118";
}
.fa-frown-o:before {
  content: "\f119";
}
.fa-meh-o:before {
  content: "\f11a";
}
.fa-gamepad:before {
  content: "\f11b";
}
.fa-keyboard-o:before {
  content: "\f11c";
}
.fa-flag-o:before {
  content: "\f11d";
}
.fa-flag-checkered:before {
  content: "\f11e";
}
.fa-terminal:before {
  content: "\f120";
}
.fa-code:before {
  content: "\f121";
}
.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}
.fa-location-arrow:before {
  content: "\f124";
}
.fa-crop:before {
  content: "\f125";
}
.fa-code-fork:before {
  content: "\f126";
}
.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}
.fa-question:before {
  content: "\f128";
}
.fa-info:before {
  content: "\f129";
}
.fa-exclamation:before {
  content: "\f12a";
}
.fa-superscript:before {
  content: "\f12b";
}
.fa-subscript:before {
  content: "\f12c";
}
.fa-eraser:before {
  content: "\f12d";
}
.fa-puzzle-piece:before {
  content: "\f12e";
}
.fa-microphone:before {
  content: "\f130";
}
.fa-microphone-slash:before {
  content: "\f131";
}
.fa-shield:before {
  content: "\f132";
}
.fa-calendar-o:before {
  content: "\f133";
}
.fa-fire-extinguisher:before {
  content: "\f134";
}
.fa-rocket:before {
  content: "\f135";
}
.fa-maxcdn:before {
  content: "\f136";
}
.fa-chevron-circle-left:before {
  content: "\f137";
}
.fa-chevron-circle-right:before {
  content: "\f138";
}
.fa-chevron-circle-up:before {
  content: "\f139";
}
.fa-chevron-circle-down:before {
  content: "\f13a";
}
.fa-html5:before {
  content: "\f13b";
}
.fa-css3:before {
  content: "\f13c";
}
.fa-anchor:before {
  content: "\f13d";
}
.fa-unlock-alt:before {
  content: "\f13e";
}
.fa-bullseye:before {
  content: "\f140";
}
.fa-ellipsis-h:before {
  content: "\f141";
}
.fa-ellipsis-v:before {
  content: "\f142";
}
.fa-rss-square:before {
  content: "\f143";
}
.fa-play-circle:before {
  content: "\f144";
}
.fa-ticket:before {
  content: "\f145";
}
.fa-minus-square:before {
  content: "\f146";
}
.fa-minus-square-o:before {
  content: "\f147";
}
.fa-level-up:before {
  content: "\f148";
}
.fa-level-down:before {
  content: "\f149";
}
.fa-check-square:before {
  content: "\f14a";
}
.fa-pencil-square:before {
  content: "\f14b";
}
.fa-external-link-square:before {
  content: "\f14c";
}
.fa-share-square:before {
  content: "\f14d";
}
.fa-compass:before {
  content: "\f14e";
}
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}
.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}
.fa-gbp:before {
  content: "\f154";
}
.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}
.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}
.fa-won:before,
.fa-krw:before {
  content: "\f159";
}
.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}
.fa-file:before {
  content: "\f15b";
}
.fa-file-text:before {
  content: "\f15c";
}
.fa-sort-alpha-asc:before {
  content: "\f15d";
}
.fa-sort-alpha-desc:before {
  content: "\f15e";
}
.fa-sort-amount-asc:before {
  content: "\f160";
}
.fa-sort-amount-desc:before {
  content: "\f161";
}
.fa-sort-numeric-asc:before {
  content: "\f162";
}
.fa-sort-numeric-desc:before {
  content: "\f163";
}
.fa-thumbs-up:before {
  content: "\f164";
}
.fa-thumbs-down:before {
  content: "\f165";
}
.fa-youtube-square:before {
  content: "\f166";
}
.fa-youtube:before {
  content: "\f167";
}
.fa-xing:before {
  content: "\f168";
}
.fa-xing-square:before {
  content: "\f169";
}
.fa-youtube-play:before {
  content: "\f16a";
}
.fa-dropbox:before {
  content: "\f16b";
}
.fa-stack-overflow:before {
  content: "\f16c";
}
.fa-instagram:before {
  content: "\f16d";
}
.fa-flickr:before {
  content: "\f16e";
}
.fa-adn:before {
  content: "\f170";
}
.fa-bitbucket:before {
  content: "\f171";
}
.fa-bitbucket-square:before {
  content: "\f172";
}
.fa-tumblr:before {
  content: "\f173";
}
.fa-tumblr-square:before {
  content: "\f174";
}
.fa-long-arrow-down:before {
  content: "\f175";
}
.fa-long-arrow-up:before {
  content: "\f176";
}
.fa-long-arrow-left:before {
  content: "\f177";
}
.fa-long-arrow-right:before {
  content: "\f178";
}
.fa-apple:before {
  content: "\f179";
}
.fa-windows:before {
  content: "\f17a";
}
.fa-android:before {
  content: "\f17b";
}
.fa-linux:before {
  content: "\f17c";
}
.fa-dribbble:before {
  content: "\f17d";
}
.fa-skype:before {
  content: "\f17e";
}
.fa-foursquare:before {
  content: "\f180";
}
.fa-trello:before {
  content: "\f181";
}
.fa-female:before {
  content: "\f182";
}
.fa-male:before {
  content: "\f183";
}
.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}
.fa-sun-o:before {
  content: "\f185";
}
.fa-moon-o:before {
  content: "\f186";
}
.fa-archive:before {
  content: "\f187";
}
.fa-bug:before {
  content: "\f188";
}
.fa-vk:before {
  content: "\f189";
}
.fa-weibo:before {
  content: "\f18a";
}
.fa-renren:before {
  content: "\f18b";
}
.fa-pagelines:before {
  content: "\f18c";
}
.fa-stack-exchange:before {
  content: "\f18d";
}
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}
.fa-arrow-circle-o-left:before {
  content: "\f190";
}
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}
.fa-dot-circle-o:before {
  content: "\f192";
}
.fa-wheelchair:before {
  content: "\f193";
}
.fa-vimeo-square:before {
  content: "\f194";
}
.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}
.fa-plus-square-o:before {
  content: "\f196";
}
.fa-space-shuttle:before {
  content: "\f197";
}
.fa-slack:before {
  content: "\f198";
}
.fa-envelope-square:before {
  content: "\f199";
}
.fa-wordpress:before {
  content: "\f19a";
}
.fa-openid:before {
  content: "\f19b";
}
.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}
.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}
.fa-yahoo:before {
  content: "\f19e";
}
.fa-google:before {
  content: "\f1a0";
}
.fa-reddit:before {
  content: "\f1a1";
}
.fa-reddit-square:before {
  content: "\f1a2";
}
.fa-stumbleupon-circle:before {
  content: "\f1a3";
}
.fa-stumbleupon:before {
  content: "\f1a4";
}
.fa-delicious:before {
  content: "\f1a5";
}
.fa-digg:before {
  content: "\f1a6";
}
.fa-pied-piper-pp:before {
  content: "\f1a7";
}
.fa-pied-piper-alt:before {
  content: "\f1a8";
}
.fa-drupal:before {
  content: "\f1a9";
}
.fa-joomla:before {
  content: "\f1aa";
}
.fa-language:before {
  content: "\f1ab";
}
.fa-fax:before {
  content: "\f1ac";
}
.fa-building:before {
  content: "\f1ad";
}
.fa-child:before {
  content: "\f1ae";
}
.fa-paw:before {
  content: "\f1b0";
}
.fa-spoon:before {
  content: "\f1b1";
}
.fa-cube:before {
  content: "\f1b2";
}
.fa-cubes:before {
  content: "\f1b3";
}
.fa-behance:before {
  content: "\f1b4";
}
.fa-behance-square:before {
  content: "\f1b5";
}
.fa-steam:before {
  content: "\f1b6";
}
.fa-steam-square:before {
  content: "\f1b7";
}
.fa-recycle:before {
  content: "\f1b8";
}
.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}
.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}
.fa-tree:before {
  content: "\f1bb";
}
.fa-spotify:before {
  content: "\f1bc";
}
.fa-deviantart:before {
  content: "\f1bd";
}
.fa-soundcloud:before {
  content: "\f1be";
}
.fa-database:before {
  content: "\f1c0";
}
.fa-file-pdf-o:before {
  content: "\f1c1";
}
.fa-file-word-o:before {
  content: "\f1c2";
}
.fa-file-excel-o:before {
  content: "\f1c3";
}
.fa-file-powerpoint-o:before {
  content: "\f1c4";
}
.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}
.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}
.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}
.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}
.fa-file-code-o:before {
  content: "\f1c9";
}
.fa-tertiary:before {
  content: "\f1ca";
}
.fa-codepen:before {
  content: "\f1cb";
}
.fa-jsfiddle:before {
  content: "\f1cc";
}
.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}
.fa-circle-o-notch:before {
  content: "\f1ce";
}
.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}
.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}
.fa-git-square:before {
  content: "\f1d2";
}
.fa-git:before {
  content: "\f1d3";
}
.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}
.fa-tencent-weibo:before {
  content: "\f1d5";
}
.fa-qq:before {
  content: "\f1d6";
}
.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}
.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}
.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}
.fa-history:before {
  content: "\f1da";
}
.fa-circle-thin:before {
  content: "\f1db";
}
.fa-header:before {
  content: "\f1dc";
}
.fa-paragraph:before {
  content: "\f1dd";
}
.fa-sliders:before {
  content: "\f1de";
}
.fa-share-alt:before {
  content: "\f1e0";
}
.fa-share-alt-square:before {
  content: "\f1e1";
}
.fa-bomb:before {
  content: "\f1e2";
}
.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}
.fa-tty:before {
  content: "\f1e4";
}
.fa-binoculars:before {
  content: "\f1e5";
}
.fa-plug:before {
  content: "\f1e6";
}
.fa-slideshare:before {
  content: "\f1e7";
}
.fa-twitch:before {
  content: "\f1e8";
}
.fa-yelp:before {
  content: "\f1e9";
}
.fa-newspaper-o:before {
  content: "\f1ea";
}
.fa-wifi:before {
  content: "\f1eb";
}
.fa-calculator:before {
  content: "\f1ec";
}
.fa-paypal:before {
  content: "\f1ed";
}
.fa-google-wallet:before {
  content: "\f1ee";
}
.fa-cc-visa:before {
  content: "\f1f0";
}
.fa-cc-mastercard:before {
  content: "\f1f1";
}
.fa-cc-discover:before {
  content: "\f1f2";
}
.fa-cc-amex:before {
  content: "\f1f3";
}
.fa-cc-paypal:before {
  content: "\f1f4";
}
.fa-cc-stripe:before {
  content: "\f1f5";
}
.fa-bell-slash:before {
  content: "\f1f6";
}
.fa-bell-slash-o:before {
  content: "\f1f7";
}
.fa-trash:before {
  content: "\f1f8";
}
.fa-copyright:before {
  content: "\f1f9";
}
.fa-at:before {
  content: "\f1fa";
}
.fa-eyedropper:before {
  content: "\f1fb";
}
.fa-paint-brush:before {
  content: "\f1fc";
}
.fa-birthday-cake:before {
  content: "\f1fd";
}
.fa-area-chart:before {
  content: "\f1fe";
}
.fa-pie-chart:before {
  content: "\f200";
}
.fa-line-chart:before {
  content: "\f201";
}
.fa-lastfm:before {
  content: "\f202";
}
.fa-lastfm-square:before {
  content: "\f203";
}
.fa-toggle-off:before {
  content: "\f204";
}
.fa-toggle-on:before {
  content: "\f205";
}
.fa-bicycle:before {
  content: "\f206";
}
.fa-bus:before {
  content: "\f207";
}
.fa-ioxhost:before {
  content: "\f208";
}
.fa-angellist:before {
  content: "\f209";
}
.fa-cc:before {
  content: "\f20a";
}
.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}
.fa-meanpath:before {
  content: "\f20c";
}
.fa-buysellads:before {
  content: "\f20d";
}
.fa-connectdevelop:before {
  content: "\f20e";
}
.fa-dashcube:before {
  content: "\f210";
}
.fa-forumbee:before {
  content: "\f211";
}
.fa-leanpub:before {
  content: "\f212";
}
.fa-sellsy:before {
  content: "\f213";
}
.fa-shirtsinbulk:before {
  content: "\f214";
}
.fa-simplybuilt:before {
  content: "\f215";
}
.fa-skyatlas:before {
  content: "\f216";
}
.fa-cart-plus:before {
  content: "\f217";
}
.fa-cart-arrow-down:before {
  content: "\f218";
}
.fa-diamond:before {
  content: "\f219";
}
.fa-ship:before {
  content: "\f21a";
}
.fa-user-secret:before {
  content: "\f21b";
}
.fa-motorcycle:before {
  content: "\f21c";
}
.fa-street-view:before {
  content: "\f21d";
}
.fa-heartbeat:before {
  content: "\f21e";
}
.fa-venus:before {
  content: "\f221";
}
.fa-mars:before {
  content: "\f222";
}
.fa-mercury:before {
  content: "\f223";
}
.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}
.fa-transgender-alt:before {
  content: "\f225";
}
.fa-venus-double:before {
  content: "\f226";
}
.fa-mars-double:before {
  content: "\f227";
}
.fa-venus-mars:before {
  content: "\f228";
}
.fa-mars-stroke:before {
  content: "\f229";
}
.fa-mars-stroke-v:before {
  content: "\f22a";
}
.fa-mars-stroke-h:before {
  content: "\f22b";
}
.fa-neuter:before {
  content: "\f22c";
}
.fa-genderless:before {
  content: "\f22d";
}
.fa-facebook-official:before {
  content: "\f230";
}
.fa-pinterest-p:before {
  content: "\f231";
}
.fa-whatsapp:before {
  content: "\f232";
}
.fa-server:before {
  content: "\f233";
}
.fa-user-plus:before {
  content: "\f234";
}
.fa-user-times:before {
  content: "\f235";
}
.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}
.fa-viacoin:before {
  content: "\f237";
}
.fa-train:before {
  content: "\f238";
}
.fa-subway:before {
  content: "\f239";
}
.fa-medium:before {
  content: "\f23a";
}
.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}
.fa-optin-monster:before {
  content: "\f23c";
}
.fa-opencart:before {
  content: "\f23d";
}
.fa-expeditedssl:before {
  content: "\f23e";
}
.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}
.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}
.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}
.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}
.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}
.fa-mouse-pointer:before {
  content: "\f245";
}
.fa-i-cursor:before {
  content: "\f246";
}
.fa-object-group:before {
  content: "\f247";
}
.fa-object-ungroup:before {
  content: "\f248";
}
.fa-sticky-note:before {
  content: "\f249";
}
.fa-sticky-note-o:before {
  content: "\f24a";
}
.fa-cc-jcb:before {
  content: "\f24b";
}
.fa-cc-diners-club:before {
  content: "\f24c";
}
.fa-clone:before {
  content: "\f24d";
}
.fa-balance-scale:before {
  content: "\f24e";
}
.fa-hourglass-o:before {
  content: "\f250";
}
.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}
.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}
.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}
.fa-hourglass:before {
  content: "\f254";
}
.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}
.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}
.fa-hand-scissors-o:before {
  content: "\f257";
}
.fa-hand-lizard-o:before {
  content: "\f258";
}
.fa-hand-spock-o:before {
  content: "\f259";
}
.fa-hand-pointer-o:before {
  content: "\f25a";
}
.fa-hand-peace-o:before {
  content: "\f25b";
}
.fa-trademark:before {
  content: "\f25c";
}
.fa-registered:before {
  content: "\f25d";
}
.fa-creative-commons:before {
  content: "\f25e";
}
.fa-gg:before {
  content: "\f260";
}
.fa-gg-circle:before {
  content: "\f261";
}
.fa-tripadvisor:before {
  content: "\f262";
}
.fa-odnoklassniki:before {
  content: "\f263";
}
.fa-odnoklassniki-square:before {
  content: "\f264";
}
.fa-get-pocket:before {
  content: "\f265";
}
.fa-wikipedia-w:before {
  content: "\f266";
}
.fa-safari:before {
  content: "\f267";
}
.fa-chrome:before {
  content: "\f268";
}
.fa-firefox:before {
  content: "\f269";
}
.fa-opera:before {
  content: "\f26a";
}
.fa-internet-explorer:before {
  content: "\f26b";
}
.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}
.fa-contao:before {
  content: "\f26d";
}
.fa-500px:before {
  content: "\f26e";
}
.fa-amazon:before {
  content: "\f270";
}
.fa-calendar-plus-o:before {
  content: "\f271";
}
.fa-calendar-minus-o:before {
  content: "\f272";
}
.fa-calendar-times-o:before {
  content: "\f273";
}
.fa-calendar-check-o:before {
  content: "\f274";
}
.fa-industry:before {
  content: "\f275";
}
.fa-map-pin:before {
  content: "\f276";
}
.fa-map-signs:before {
  content: "\f277";
}
.fa-map-o:before {
  content: "\f278";
}
.fa-map:before {
  content: "\f279";
}
.fa-commenting:before {
  content: "\f27a";
}
.fa-commenting-o:before {
  content: "\f27b";
}
.fa-houzz:before {
  content: "\f27c";
}
.fa-vimeo:before {
  content: "\f27d";
}
.fa-black-tie:before {
  content: "\f27e";
}
.fa-fonticons:before {
  content: "\f280";
}
.fa-reddit-alien:before {
  content: "\f281";
}
.fa-edge:before {
  content: "\f282";
}
.fa-credit-card-alt:before {
  content: "\f283";
}
.fa-codiepie:before {
  content: "\f284";
}
.fa-modx:before {
  content: "\f285";
}
.fa-fort-awesome:before {
  content: "\f286";
}
.fa-usb:before {
  content: "\f287";
}
.fa-product-hunt:before {
  content: "\f288";
}
.fa-mixcloud:before {
  content: "\f289";
}
.fa-scribd:before {
  content: "\f28a";
}
.fa-pause-circle:before {
  content: "\f28b";
}
.fa-pause-circle-o:before {
  content: "\f28c";
}
.fa-stop-circle:before {
  content: "\f28d";
}
.fa-stop-circle-o:before {
  content: "\f28e";
}
.fa-shopping-bag:before {
  content: "\f290";
}
.fa-shopping-basket:before {
  content: "\f291";
}
.fa-hashtag:before {
  content: "\f292";
}
.fa-bluetooth:before {
  content: "\f293";
}
.fa-bluetooth-b:before {
  content: "\f294";
}
.fa-percent:before {
  content: "\f295";
}
.fa-gitlab:before {
  content: "\f296";
}
.fa-wpbeginner:before {
  content: "\f297";
}
.fa-wpforms:before {
  content: "\f298";
}
.fa-envira:before {
  content: "\f299";
}
.fa-universal-access:before {
  content: "\f29a";
}
.fa-wheelchair-alt:before {
  content: "\f29b";
}
.fa-question-circle-o:before {
  content: "\f29c";
}
.fa-blind:before {
  content: "\f29d";
}
.fa-audio-description:before {
  content: "\f29e";
}
.fa-volume-control-phone:before {
  content: "\f2a0";
}
.fa-braille:before {
  content: "\f2a1";
}
.fa-assistive-listening-systems:before {
  content: "\f2a2";
}
.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}
.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}
.fa-glide:before {
  content: "\f2a5";
}
.fa-glide-g:before {
  content: "\f2a6";
}
.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}
.fa-low-vision:before {
  content: "\f2a8";
}
.fa-viadeo:before {
  content: "\f2a9";
}
.fa-viadeo-square:before {
  content: "\f2aa";
}
.fa-snapchat:before {
  content: "\f2ab";
}
.fa-snapchat-ghost:before {
  content: "\f2ac";
}
.fa-snapchat-square:before {
  content: "\f2ad";
}
.fa-pied-piper:before {
  content: "\f2ae";
}
.fa-first-order:before {
  content: "\f2b0";
}
.fa-yoast:before {
  content: "\f2b1";
}
.fa-themeisle:before {
  content: "\f2b2";
}
.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}
.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}
.fa-handshake-o:before {
  content: "\f2b5";
}
.fa-envelope-open:before {
  content: "\f2b6";
}
.fa-envelope-open-o:before {
  content: "\f2b7";
}
.fa-linode:before {
  content: "\f2b8";
}
.fa-address-book:before {
  content: "\f2b9";
}
.fa-address-book-o:before {
  content: "\f2ba";
}
.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}
.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}
.fa-user-circle:before {
  content: "\f2bd";
}
.fa-user-circle-o:before {
  content: "\f2be";
}
.fa-user-o:before {
  content: "\f2c0";
}
.fa-id-badge:before {
  content: "\f2c1";
}
.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}
.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}
.fa-quora:before {
  content: "\f2c4";
}
.fa-free-code-camp:before {
  content: "\f2c5";
}
.fa-telegram:before {
  content: "\f2c6";
}
.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}
.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}
.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}
.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}
.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}
.fa-shower:before {
  content: "\f2cc";
}
.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}
.fa-podcast:before {
  content: "\f2ce";
}
.fa-window-maximize:before {
  content: "\f2d0";
}
.fa-window-minimize:before {
  content: "\f2d1";
}
.fa-window-restore:before {
  content: "\f2d2";
}
.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}
.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}
.fa-bandcamp:before {
  content: "\f2d5";
}
.fa-grav:before {
  content: "\f2d6";
}
.fa-etsy:before {
  content: "\f2d7";
}
.fa-imdb:before {
  content: "\f2d8";
}
.fa-ravelry:before {
  content: "\f2d9";
}
.fa-eercast:before {
  content: "\f2da";
}
.fa-microchip:before {
  content: "\f2db";
}
.fa-snowflake-o:before {
  content: "\f2dc";
}
.fa-superpowers:before {
  content: "\f2dd";
}
.fa-wpexplorer:before {
  content: "\f2de";
}
.fa-meetup:before {
  content: "\f2e0";
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

/* End external import from resources/assets/themes/vendor/font-awesome.css */
/* External import from node_modules/font-awesome/css/font-awesome.min.css */
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}

/* End external import from node_modules/font-awesome/css/font-awesome.min.css */

/* Cropper */
/* External import from node_modules/cropperjs/dist/cropper.css */
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          -webkit-user-select: none;

          -moz-user-select: none;

          -ms-user-select: none;

          user-select: none;
}

.cropper-container img {
    backface-visibility: hidden;
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
  }

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
  }

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
  }

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
  .cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
  }

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
  }

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
  }

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
  }

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
  }

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
  }

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
  }

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
  }

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
  }

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
  }

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
  }

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
  }

@media (min-width: 768px) {

.cropper-point.point-se {
      height: 15px;
      width: 15px;
  }
    }

@media (min-width: 992px) {

.cropper-point.point-se {
      height: 10px;
      width: 10px;
  }
    }

@media (min-width: 1200px) {

.cropper-point.point-se {
      height: 5px;
      opacity: 0.75;
      width: 5px;
  }
    }

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
  }

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

/* End external import from node_modules/cropperjs/dist/cropper.css */

/* Custom Editor Styles */
/* External import from public/css/vahara-editor-custom.css */

/* End external import from public/css/vahara-editor-custom.css */
/*# sourceMappingURL=app-base.css.map */