body {
	color: black;
	font-family: 'Work Sans', sans-serif;
}

.tightfont {
    font-family: 'PT Sans Narrow', sans-serif;
}

.pic-zoom-in {
    cursor:url(/htmlfiles/imfolder/cursor-zoom.png) , pointer!important
}

.upcase {
    text-transform: uppercase;
}

.sticky_and_top {
    position: sticky;
    z-index: 100;
}

.rounded-angle {
    border-radius: 10px;
    padding: 5px 10px 5px 10px
}

.light-highlight-default {
    background-color: #ff5733;
    color: white;
}

.light-highlight-red {
    background-color: #fa979a;
}

.always-white-background {
    background-color: #fff !important;
    color: black;
}

.filter-toolbar {
    background: #f6f7f8;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 2px 4px;
    margin-bottom: 8px;
}

.filter-toolbar:hover {
    background: #eef6ff;
}

.jexcel > thead > tr.jexcel_filter {
    background: #eef6ff !important;
}

.jexcel > thead > tr.jexcel_filter > td {
    background: #eef6ff !important;
}

.jexcel > thead > tr.jexcel_filter > td > input {
    background: transparent !important;
}

.jexcel .jexcel_column_filter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280' width='18px' height='18px'%3E%3Cpath d='M3 5h18l-7 8v5l-4 1v-6L3 5z'/%3E%3C/svg%3E") !important;
    background-position: right 6px center !important;
}

.jexcel > thead > tr > td.arrow-up,
.jexcel > thead > tr > td.arrow-down {
    padding-right: 2px !important;
    background-image: none !important;
    text-decoration: none !important;
}

.jexcel > thead > tr:not(.jexcel_filter) > td {
    position: relative;
    cursor: pointer;
}

.jexcel > thead > tr:not(.jexcel_filter) > td .sort-hint {
    font-size: 0.85em;
    margin-left: 6px;
    opacity: 0.55;
    cursor: pointer;
}

.jexcel > thead > tr:not(.jexcel_filter) > td:hover .sort-hint {
    opacity: 0.9;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
}

.filter-label-text {
    opacity: 0.75;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.filter-label-icon {
    font-size: 0.9rem;
}

.filter-pill {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    font-size: 1rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-option-btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: block;
}

.filter-toolbar .btn {
    background-color: #e5e7eb !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.filter-toolbar .btn:hover,
.filter-toolbar .btn:focus {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.filter-toolbar .btn[class*="btn-primary-"] {
    background-color: #cbd5e1 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.base-default {
    background-color: white;
    color: black;
}

.base-red {
    background-color: white;
    color: black;
}

.base-blue {
    background-color: white;
    color: black;
}

.base-gradientblue {
    background-color: white;
    color: black;
}

.base-gradientred {
    background-color: white;
    color: black;
}

.base-darkgradientblue,
.base-darkgradient {
    background-color: #0d1728;
    color: #e6efff;
}

.base-darkgradientred {
    background-color: #171013;
    color: #ffe9ed;
}

.base-darkgradientgray {
    background-color: #111317;
    color: #edf1f7;
}

.base-dark {
    background-color: #161616;
    color: white;
}

.base-default-font {
    color: black;
}

.base-red-font {
    color: black;
}

.base-blue-font {
    color: black;
}

.base-gradientblue-font {
    color: black;
}

.base-gradientred-font {
    color: black;
}

.base-darkgradientblue-font,
.base-darkgradient-font {
    color: white;
}

.base-darkgradientred-font {
    color: white;
}

.base-darkgradientgray-font {
    color: white;
}

.base-dark-font {
    color: white;
}

.no-highlight-blackonwhite {
    background-color: white;
    color: black;
}

.img_style {
    width:100%;
    border:1px solid black;
    border-radius: 5px;
}

.error-highlight {
    background-color: #ffe2e2;
}

.success-highlight {
    background-color: #d4edda;
}

.small-text {
	font-size: 0.9em;
}

.large-1-text {
	font-size: 1.2em;
}

.large-2-text {
	font-size: 1.3em;
}

.large-3-text {
	font-size: 1.7em;
}

.large-margin-top {
	margin-top: 100px;
}

.large-margin-bottom {
	margin-bottom: 100px;
}

.medium-margin-top {
	margin-top: 70px;
}

.medium-margin-bottom {
	margin-bottom: 70px;
}

.small-margin-top {
	margin-top: 40px;
}

.small-margin-bottom {
	margin-bottom: 40px;
}

.large-padding-bottom {
	padding-bottom: 100px;
}

.medium-padding-bottom {
	padding-bottom: 70px;
}

.small-padding-bottom {
	padding-bottom: 40px;
}

.no-margin {
    margin:0;
}

.no-padding {
    padding:0;
}

.no-x-padding {
    padding-left:0;
    padding-right:0;
}

a:link {
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    text-decoration: underline;
}

a.nodeco:link {
    text-decoration: none;
}

a.nodeco:hover {
    text-decoration: underline;
}

a.nodeco:visited {
    text-decoration: none;
}

/* --- blue --- */

.white-highlight-blue {
    background-color: #fff !important;
    color: black !important;
}

.light-highlight-blue {
    background-color: #eef3fd !important;
    color: black !important;
}

.strong-highlight-blue {
    background-color: #00327d !important;
    color: white;
}

.medium-highlight-blue {
    background-color: #00a4e0 !important;
    color: white !important;
}

.strong-border-blue {
    border: 1px solid #00327d;
}

.medium-border-blue {
    border: 1px solid #00a4e0;
}

.font-strong-highlight-blue {
    color: white;
}

a.link-blue:link, a.link-blue:visited  {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-blue:hover, a.link-blue:active {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-blue:link, a.link-medium-blue:visited  {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-blue:hover, a.link-medium-blue:active {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-blue:link, a.link-strong-blue:visited  {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-blue:hover, a.link-strong-blue:active {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-clear-blue:link, a.link-clear-blue:visited {
    background-color: #d3ddf1 !important;
    border-color: #d3ddf1 !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-clear-blue:hover, a.link-clear-blue:active {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-white-blue:link, a.link-white-blue:visited {
    background-color: #fff !important;
    border-color: #fff !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-white-blue:hover, a.link-white-blue:active {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

.btn-primary-blue {
    background-color: #00327d !important;
    border-color: #00327d !important;
    color: white !important;
}

.btn-secondary-blue {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    color: white !important;
}

/* --- gradientblue --- */

.white-highlight-gradientblue {
    background-color: #fff !important;
    color: black !important;
}

.light-highlight-gradientblue {
    background-color: #eef3fd !important;
    color: black !important;
}

.strong-highlight-gradientblue {
    background-color: #00327d !important;
    color: white;
}

.medium-highlight-gradientblue {
    background-color: #00a4e0 !important;
    color: white !important;
}

.strong-border-gradientblue {
    border: 1px solid #00327d;
}

.medium-border-gradientblue {
    border: 1px solid #00a4e0;
}

.font-strong-highlight-gradientblue {
    color: white;
}

a.link-gradientblue:link, a.link-gradientblue:visited  {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-gradientblue:hover, a.link-gradientblue:active {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-gradientblue:link, a.link-medium-gradientblue:visited  {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-gradientblue:hover, a.link-medium-gradientblue:active {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-gradientblue:link, a.link-strong-gradientblue:visited  {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-gradientblue:hover, a.link-strong-gradientblue:active {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-clear-gradientblue:link, a.link-clear-gradientblue:visited {
    background-color: #d3ddf1 !important;
    border-color: #d3ddf1 !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-clear-gradientblue:hover, a.link-clear-gradientblue:active {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-white-gradientblue:link, a.link-white-gradientblue:visited {
    background-color: #fff !important;
    border-color: #fff !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-white-gradientblue:hover, a.link-white-gradientblue:active {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    text-decoration: none !important;
    color: white !important;
}

.btn-primary-gradientblue {
    background-color: #00327d !important;
    border-color: #00327d !important;
    color: white !important;
}

.btn-secondary-gradientblue {
    background-color: #00a4e0 !important;
    border-color: #00a4e0 !important;
    color: white !important;
}

/* --- gradientred --- */

.white-highlight-gradientred {
    background-color: #fff !important;
    color: black !important;
}

.light-highlight-gradientred {
    background-color: #fdf0f1 !important;
    color: #2f151a !important;
}

.strong-highlight-gradientred {
    background-color: #8e1120 !important;
    color: white;
}

.medium-highlight-gradientred {
    background-color: #d94855 !important;
    color: white !important;
}

.strong-border-gradientred {
    border: 1px solid #8e1120;
}

.medium-border-gradientred {
    border: 1px solid #d94855;
}

.font-strong-highlight-gradientred {
    color: white;
}

a.link-gradientred:link, a.link-gradientred:visited  {
    background-color: #d94855 !important;
    border-color: #d94855 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-gradientred:hover, a.link-gradientred:active {
    background-color: #8e1120 !important;
    border-color: #8e1120 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-gradientred:link, a.link-medium-gradientred:visited  {
    background-color: #d94855 !important;
    border-color: #d94855 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-gradientred:hover, a.link-medium-gradientred:active {
    background-color: #8e1120 !important;
    border-color: #8e1120 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-gradientred:link, a.link-strong-gradientred:visited  {
    background-color: #8e1120 !important;
    border-color: #8e1120 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-gradientred:hover, a.link-strong-gradientred:active {
    background-color: #d94855 !important;
    border-color: #d94855 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-clear-gradientred:link, a.link-clear-gradientred:visited {
    background-color: #f7dce0 !important;
    border-color: #f7dce0 !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-clear-gradientred:hover, a.link-clear-gradientred:active {
    background-color: #d94855 !important;
    border-color: #d94855 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-white-gradientred:link, a.link-white-gradientred:visited {
    background-color: #fff !important;
    border-color: #fff !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-white-gradientred:hover, a.link-white-gradientred:active {
    background-color: #d94855 !important;
    border-color: #d94855 !important;
    text-decoration: none !important;
    color: white !important;
}

.btn-primary-gradientred {
    background-color: #8e1120 !important;
    border-color: #8e1120 !important;
    color: white !important;
}

.btn-secondary-gradientred {
    background-color: #d94855 !important;
    border-color: #d94855 !important;
    color: white !important;
}

/* --- darkgradientblue (legacy alias: darkgradient) --- */

.white-highlight-darkgradientblue,
.white-highlight-darkgradient {
    background-color: #0f1a2b !important;
    color: #eef4ff !important;
}

.light-highlight-darkgradientblue,
.light-highlight-darkgradient {
    background-color: #162438 !important;
    color: #eef4ff !important;
}

.strong-highlight-darkgradientblue,
.strong-highlight-darkgradient {
    background-color: #0b1424 !important;
    color: white;
}

.medium-highlight-darkgradientblue,
.medium-highlight-darkgradient {
    background-color: #1f3a5d !important;
    color: white !important;
}

.strong-border-darkgradientblue,
.strong-border-darkgradient {
    border: 1px solid #0b1424;
}

.medium-border-darkgradientblue,
.medium-border-darkgradient {
    border: 1px solid #1f3a5d;
}

.font-strong-highlight-darkgradientblue,
.font-strong-highlight-darkgradient {
    color: white;
}

a.link-darkgradientblue:link, a.link-darkgradientblue:visited,
a.link-darkgradient:link, a.link-darkgradient:visited  {
    background-color: #294974 !important;
    border-color: #294974 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-darkgradientblue:hover, a.link-darkgradientblue:active,
a.link-darkgradient:hover, a.link-darkgradient:active {
    background-color: #35639d !important;
    border-color: #35639d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-darkgradientblue:link, a.link-medium-darkgradientblue:visited,
a.link-medium-darkgradient:link, a.link-medium-darkgradient:visited  {
    background-color: #1f3a5d !important;
    border-color: #1f3a5d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-darkgradientblue:hover, a.link-medium-darkgradientblue:active,
a.link-medium-darkgradient:hover, a.link-medium-darkgradient:active {
    background-color: #294974 !important;
    border-color: #294974 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-darkgradientblue:link, a.link-strong-darkgradientblue:visited,
a.link-strong-darkgradient:link, a.link-strong-darkgradient:visited  {
    background-color: #0b1424 !important;
    border-color: #0b1424 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-darkgradientblue:hover, a.link-strong-darkgradientblue:active,
a.link-strong-darkgradient:hover, a.link-strong-darkgradient:active {
    background-color: #294974 !important;
    border-color: #294974 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-clear-darkgradientblue:link, a.link-clear-darkgradientblue:visited,
a.link-clear-darkgradient:link, a.link-clear-darkgradient:visited {
    background-color: #24354d !important;
    border-color: #24354d !important;
    text-decoration: none !important;
    color: #eef4ff !important;
}

a.link-clear-darkgradientblue:hover, a.link-clear-darkgradientblue:active,
a.link-clear-darkgradient:hover, a.link-clear-darkgradient:active {
    background-color: #35639d !important;
    border-color: #35639d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-white-darkgradientblue:link, a.link-white-darkgradientblue:visited,
a.link-white-darkgradient:link, a.link-white-darkgradient:visited {
    background-color: #0f1a2b !important;
    border-color: #0f1a2b !important;
    text-decoration: none !important;
    color: #eef4ff !important;
}

a.link-white-darkgradientblue:hover, a.link-white-darkgradientblue:active,
a.link-white-darkgradient:hover, a.link-white-darkgradient:active {
    background-color: #294974 !important;
    border-color: #294974 !important;
    text-decoration: none !important;
    color: white !important;
}

.btn-primary-darkgradientblue,
.btn-primary-darkgradient {
    background-color: #0b1424 !important;
    border-color: #0b1424 !important;
    color: white !important;
}

.btn-secondary-darkgradientblue,
.btn-secondary-darkgradient {
    background-color: #1f3a5d !important;
    border-color: #1f3a5d !important;
    color: white !important;
}

/* --- darkgradientred --- */

.white-highlight-darkgradientred {
    background-color: #1b1316 !important;
    color: #ffe9ed !important;
}

.light-highlight-darkgradientred {
    background-color: #25171c !important;
    color: #ffe9ed !important;
}

.strong-highlight-darkgradientred {
    background-color: #140d10 !important;
    color: white;
}

.medium-highlight-darkgradientred {
    background-color: #3b1f28 !important;
    color: white !important;
}

.strong-border-darkgradientred {
    border: 1px solid #140d10;
}

.medium-border-darkgradientred {
    border: 1px solid #3b1f28;
}

.font-strong-highlight-darkgradientred {
    color: white;
}

a.link-darkgradientred:link, a.link-darkgradientred:visited  {
    background-color: #4d2530 !important;
    border-color: #4d2530 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-darkgradientred:hover, a.link-darkgradientred:active {
    background-color: #673341 !important;
    border-color: #673341 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-darkgradientred:link, a.link-medium-darkgradientred:visited  {
    background-color: #3b1f28 !important;
    border-color: #3b1f28 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-darkgradientred:hover, a.link-medium-darkgradientred:active {
    background-color: #4d2530 !important;
    border-color: #4d2530 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-darkgradientred:link, a.link-strong-darkgradientred:visited  {
    background-color: #140d10 !important;
    border-color: #140d10 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-darkgradientred:hover, a.link-strong-darkgradientred:active {
    background-color: #4d2530 !important;
    border-color: #4d2530 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-clear-darkgradientred:link, a.link-clear-darkgradientred:visited {
    background-color: #2f1a21 !important;
    border-color: #2f1a21 !important;
    text-decoration: none !important;
    color: #ffe9ed !important;
}

a.link-clear-darkgradientred:hover, a.link-clear-darkgradientred:active {
    background-color: #673341 !important;
    border-color: #673341 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-white-darkgradientred:link, a.link-white-darkgradientred:visited {
    background-color: #1b1316 !important;
    border-color: #1b1316 !important;
    text-decoration: none !important;
    color: #ffe9ed !important;
}

a.link-white-darkgradientred:hover, a.link-white-darkgradientred:active {
    background-color: #4d2530 !important;
    border-color: #4d2530 !important;
    text-decoration: none !important;
    color: white !important;
}

.btn-primary-darkgradientred {
    background-color: #140d10 !important;
    border-color: #140d10 !important;
    color: white !important;
}

.btn-secondary-darkgradientred {
    background-color: #3b1f28 !important;
    border-color: #3b1f28 !important;
    color: white !important;
}

/* --- darkgradientgray --- */

.white-highlight-darkgradientgray {
    background-color: #16191d !important;
    color: #edf1f7 !important;
}

.light-highlight-darkgradientgray {
    background-color: #1e2228 !important;
    color: #edf1f7 !important;
}

.strong-highlight-darkgradientgray {
    background-color: #0f1114 !important;
    color: white;
}

.medium-highlight-darkgradientgray {
    background-color: #303742 !important;
    color: white !important;
}

.strong-border-darkgradientgray {
    border: 1px solid #0f1114;
}

.medium-border-darkgradientgray {
    border: 1px solid #303742;
}

.font-strong-highlight-darkgradientgray {
    color: white;
}

a.link-darkgradientgray:link, a.link-darkgradientgray:visited  {
    background-color: #454d5a !important;
    border-color: #454d5a !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-darkgradientgray:hover, a.link-darkgradientgray:active {
    background-color: #596273 !important;
    border-color: #596273 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-darkgradientgray:link, a.link-medium-darkgradientgray:visited  {
    background-color: #303742 !important;
    border-color: #303742 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-darkgradientgray:hover, a.link-medium-darkgradientgray:active {
    background-color: #454d5a !important;
    border-color: #454d5a !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-darkgradientgray:link, a.link-strong-darkgradientgray:visited  {
    background-color: #0f1114 !important;
    border-color: #0f1114 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-darkgradientgray:hover, a.link-strong-darkgradientgray:active {
    background-color: #454d5a !important;
    border-color: #454d5a !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-clear-darkgradientgray:link, a.link-clear-darkgradientgray:visited {
    background-color: #2a3038 !important;
    border-color: #2a3038 !important;
    text-decoration: none !important;
    color: #edf1f7 !important;
}

a.link-clear-darkgradientgray:hover, a.link-clear-darkgradientgray:active {
    background-color: #596273 !important;
    border-color: #596273 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-white-darkgradientgray:link, a.link-white-darkgradientgray:visited {
    background-color: #16191d !important;
    border-color: #16191d !important;
    text-decoration: none !important;
    color: #edf1f7 !important;
}

a.link-white-darkgradientgray:hover, a.link-white-darkgradientgray:active {
    background-color: #454d5a !important;
    border-color: #454d5a !important;
    text-decoration: none !important;
    color: white !important;
}

.btn-primary-darkgradientgray {
    background-color: #0f1114 !important;
    border-color: #0f1114 !important;
    color: white !important;
}

.btn-secondary-darkgradientgray {
    background-color: #303742 !important;
    border-color: #303742 !important;
    color: white !important;
}

/* --- public page gradientblue theme --- */

.landing-test.landing-test-gradientblue {
    --ink: #0f2745;
    --muted: #3f5874;
    --accent: #0b63b6;
    --accent-2: #187ecf;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-soft: rgba(236, 246, 255, 0.9);
    --stroke: rgba(15, 72, 132, 0.2);
    background:
        radial-gradient(1200px 600px at 4% -5%, rgba(144, 204, 255, 0.34), transparent 58%),
        radial-gradient(900px 520px at 96% 0%, rgba(182, 228, 255, 0.24), transparent 56%),
        linear-gradient(165deg, #eaf4ff 0%, #f5f9ff 50%, #ffffff 100%);
    color: var(--ink);
}

.landing-test.landing-test-gradientblue .hero-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    box-shadow: 0 22px 62px rgba(7, 55, 101, 0.1);
}

.landing-test.landing-test-gradientblue .surface-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    box-shadow: 0 14px 36px rgba(7, 55, 101, 0.08);
}

.landing-test.landing-test-gradientblue .surface-soft {
    background: var(--surface-soft);
    border: 1px solid var(--stroke);
}

.solutions-page.solutions-page-gradientblue {
    --ink: #0f2745;
    --muted: #3f5874;
    --accent: #0b63b6;
    --accent-2: #187ecf;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-soft: rgba(236, 246, 255, 0.92);
    --stroke: rgba(15, 72, 132, 0.2);
    background:
        radial-gradient(1200px 600px at 4% -5%, rgba(144, 204, 255, 0.34), transparent 58%),
        radial-gradient(900px 520px at 96% 0%, rgba(182, 228, 255, 0.24), transparent 56%),
        linear-gradient(165deg, #eaf4ff 0%, #f5f9ff 50%, #ffffff 100%);
    color: var(--ink);
}

.solutions-page.solutions-page-gradientblue .solution-bubble {
    background: var(--surface);
    border-color: var(--stroke);
    box-shadow: 0 14px 30px rgba(7, 55, 101, 0.08);
}

.solutions-page.solutions-page-gradientblue img.pic-zoom-in {
    border-color: var(--stroke) !important;
    box-shadow: 0 14px 28px rgba(12, 70, 130, 0.12);
}

.solutions-page.solutions-page-gradientblue-dark,
.solutions-page.solutions-page-gradientblue.solutions-page-dark {
    --ink: #e6f0ff;
    --muted: #b9c8de;
    --accent: #7dc2ff;
    --accent-2: #a6d7ff;
    --surface: rgba(14, 25, 44, 0.84);
    --surface-soft: rgba(18, 34, 58, 0.82);
    --stroke: rgba(149, 198, 250, 0.24);
    background:
        radial-gradient(1200px 620px at 8% -8%, rgba(35, 107, 182, 0.28), transparent 58%),
        radial-gradient(1000px 560px at 92% 2%, rgba(40, 127, 206, 0.24), transparent 58%),
        linear-gradient(168deg, #081325 0%, #0b1c34 52%, #102443 100%);
    color: var(--ink);
}

.solutions-page.solutions-page-gradientblue-dark .solution-bubble,
.solutions-page.solutions-page-gradientblue.solutions-page-dark .solution-bubble {
    background: var(--surface);
    border-color: var(--stroke);
    box-shadow: 0 16px 34px rgba(1, 6, 16, 0.36);
}

.solutions-page.solutions-page-gradientblue-dark img.pic-zoom-in,
.solutions-page.solutions-page-gradientblue.solutions-page-dark img.pic-zoom-in {
    border-color: var(--stroke) !important;
    box-shadow: 0 14px 30px rgba(0, 5, 12, 0.45);
}

/* --- public page gradientred theme --- */

.landing-test.landing-test-gradientred {
    --ink: #3a1217;
    --muted: #6e4a4f;
    --accent: #a72230;
    --accent-2: #d94855;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-soft: rgba(255, 242, 244, 0.92);
    --stroke: rgba(143, 20, 33, 0.2);
    background:
        radial-gradient(1200px 620px at 4% -5%, rgba(242, 163, 175, 0.36), transparent 58%),
        radial-gradient(960px 540px at 96% 0%, rgba(246, 201, 207, 0.26), transparent 56%),
        linear-gradient(165deg, #fff1f3 0%, #fff6f7 48%, #ffffff 100%);
    color: var(--ink);
}

.landing-test.landing-test-gradientred .hero-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    box-shadow: 0 22px 62px rgba(85, 14, 23, 0.1);
}

.landing-test.landing-test-gradientred .surface-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    box-shadow: 0 14px 36px rgba(85, 14, 23, 0.08);
}

.landing-test.landing-test-gradientred .surface-soft {
    background: var(--surface-soft);
    border: 1px solid var(--stroke);
}

.landing-test.landing-test-gradientred-dark,
.landing-test.landing-test-gradientred.landing-test-dark,
.landing-test.landing-test-darkgradientred,
.landing-test.landing-test-darkgradientred-dark,
.landing-test.landing-test-darkgradientred.landing-test-dark {
    --ink: #ffe9ed;
    --muted: #d6afb8;
    --accent: #d48b99;
    --accent-2: #e2a2ae;
    --surface: rgba(29, 15, 20, 0.9);
    --surface-soft: rgba(37, 19, 25, 0.88);
    --stroke: rgba(220, 148, 161, 0.22);
    background:
        radial-gradient(1200px 620px at 8% -8%, rgba(108, 40, 53, 0.22), transparent 58%),
        radial-gradient(1000px 560px at 92% 2%, rgba(90, 30, 41, 0.2), transparent 58%),
        linear-gradient(168deg, #0e0a0b 0%, #161012 52%, #211318 100%);
    color: var(--ink);
}

.solutions-page.solutions-page-gradientred {
    --ink: #3a1217;
    --muted: #6e4a4f;
    --accent: #a72230;
    --accent-2: #d94855;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-soft: rgba(255, 242, 244, 0.92);
    --stroke: rgba(143, 20, 33, 0.2);
    background:
        radial-gradient(1200px 620px at 4% -5%, rgba(242, 163, 175, 0.36), transparent 58%),
        radial-gradient(960px 540px at 96% 0%, rgba(246, 201, 207, 0.26), transparent 56%),
        linear-gradient(165deg, #fff1f3 0%, #fff6f7 48%, #ffffff 100%);
    color: var(--ink);
}

.solutions-page.solutions-page-gradientred .solution-bubble {
    background: var(--surface);
    border-color: var(--stroke);
    box-shadow: 0 14px 30px rgba(85, 14, 23, 0.08);
}

.solutions-page.solutions-page-gradientred img.pic-zoom-in {
    border-color: var(--stroke) !important;
    box-shadow: 0 14px 28px rgba(92, 14, 29, 0.12);
}

.solutions-page.solutions-page-gradientred-dark,
.solutions-page.solutions-page-gradientred.solutions-page-dark,
.solutions-page.solutions-page-darkgradientred,
.solutions-page.solutions-page-darkgradientred-dark,
.solutions-page.solutions-page-darkgradientred.solutions-page-dark {
    --ink: #ffe9ed;
    --muted: #d6afb8;
    --accent: #d48b99;
    --accent-2: #e2a2ae;
    --surface: rgba(29, 15, 20, 0.9);
    --surface-soft: rgba(37, 19, 25, 0.88);
    --stroke: rgba(220, 148, 161, 0.22);
    background:
        radial-gradient(1200px 620px at 8% -8%, rgba(108, 40, 53, 0.22), transparent 58%),
        radial-gradient(1000px 560px at 92% 2%, rgba(90, 30, 41, 0.2), transparent 58%),
        linear-gradient(168deg, #0e0a0b 0%, #161012 52%, #211318 100%);
    color: var(--ink);
}

.solutions-page.solutions-page-gradientred-dark .solution-bubble,
.solutions-page.solutions-page-gradientred.solutions-page-dark .solution-bubble,
.solutions-page.solutions-page-darkgradientred .solution-bubble,
.solutions-page.solutions-page-darkgradientred-dark .solution-bubble,
.solutions-page.solutions-page-darkgradientred.solutions-page-dark .solution-bubble {
    background: var(--surface);
    border-color: var(--stroke);
    box-shadow: 0 16px 34px rgba(14, 2, 4, 0.38);
}

.solutions-page.solutions-page-gradientred-dark img.pic-zoom-in,
.solutions-page.solutions-page-gradientred.solutions-page-dark img.pic-zoom-in,
.solutions-page.solutions-page-darkgradientred img.pic-zoom-in,
.solutions-page.solutions-page-darkgradientred-dark img.pic-zoom-in,
.solutions-page.solutions-page-darkgradientred.solutions-page-dark img.pic-zoom-in {
    border-color: var(--stroke) !important;
    box-shadow: 0 14px 30px rgba(14, 2, 4, 0.44);
}

/* --- public page darkgradientgray theme --- */

.landing-test.landing-test-darkgradientgray,
.landing-test.landing-test-darkgradientgray-dark,
.landing-test.landing-test-darkgradientgray.landing-test-dark {
    --ink: #edf1f7;
    --muted: #bcc3cf;
    --accent: #a4afbf;
    --accent-2: #c2cad5;
    --surface: rgba(20, 24, 30, 0.9);
    --surface-soft: rgba(27, 31, 38, 0.88);
    --stroke: rgba(186, 197, 211, 0.22);
    background:
        radial-gradient(1200px 620px at 8% -8%, rgba(112, 122, 138, 0.22), transparent 58%),
        radial-gradient(1000px 560px at 92% 2%, rgba(94, 103, 117, 0.2), transparent 58%),
        linear-gradient(168deg, #0d0f12 0%, #14181d 52%, #1e232b 100%);
    color: var(--ink);
}

.landing-test.landing-test-darkgradientgray .hero-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    box-shadow: 0 24px 70px rgba(4, 6, 10, 0.4);
}

.landing-test.landing-test-darkgradientgray .surface-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    box-shadow: 0 16px 34px rgba(4, 6, 10, 0.34);
}

.landing-test.landing-test-darkgradientgray .surface-soft {
    background: var(--surface-soft);
    border: 1px solid var(--stroke);
}

.solutions-page.solutions-page-darkgradientgray,
.solutions-page.solutions-page-darkgradientgray-dark,
.solutions-page.solutions-page-darkgradientgray.solutions-page-dark {
    --ink: #edf1f7;
    --muted: #bcc3cf;
    --accent: #a4afbf;
    --accent-2: #c2cad5;
    --surface: rgba(20, 24, 30, 0.9);
    --surface-soft: rgba(27, 31, 38, 0.88);
    --stroke: rgba(186, 197, 211, 0.22);
    background:
        radial-gradient(1200px 620px at 8% -8%, rgba(112, 122, 138, 0.22), transparent 58%),
        radial-gradient(1000px 560px at 92% 2%, rgba(94, 103, 117, 0.2), transparent 58%),
        linear-gradient(168deg, #0d0f12 0%, #14181d 52%, #1e232b 100%);
    color: var(--ink);
}

.solutions-page.solutions-page-darkgradientgray .solution-bubble {
    background: var(--surface);
    border-color: var(--stroke);
    box-shadow: 0 16px 34px rgba(4, 6, 10, 0.36);
}

.solutions-page.solutions-page-darkgradientgray img.pic-zoom-in {
    border-color: var(--stroke) !important;
    box-shadow: 0 14px 30px rgba(3, 5, 8, 0.46);
}

/* --- public page darkgradientblue theme (legacy alias: darkgradient) --- */

.landing-test.landing-test-darkgradientblue,
.landing-test.landing-test-darkgradientblue-dark,
.landing-test.landing-test-darkgradientblue.landing-test-dark,
.landing-test.landing-test-darkgradient,
.landing-test.landing-test-darkgradient-dark,
.landing-test.landing-test-darkgradient.landing-test-dark {
    --ink: #e8f0ff;
    --muted: #b9c7de;
    --accent: #8ec5ff;
    --accent-2: #a7d4ff;
    --surface: rgba(13, 24, 42, 0.86);
    --surface-soft: rgba(18, 33, 56, 0.84);
    --stroke: rgba(149, 198, 250, 0.24);
    background:
        radial-gradient(1200px 620px at 8% -8%, rgba(35, 107, 182, 0.28), transparent 58%),
        radial-gradient(1000px 560px at 92% 2%, rgba(40, 127, 206, 0.24), transparent 58%),
        linear-gradient(168deg, #081325 0%, #0b1c34 52%, #102443 100%);
    color: var(--ink);
}

.landing-test.landing-test-darkgradientblue .hero-card,
.landing-test.landing-test-darkgradient .hero-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    box-shadow: 0 24px 70px rgba(1, 6, 16, 0.36);
}

.landing-test.landing-test-darkgradientblue .surface-card,
.landing-test.landing-test-darkgradient .surface-card {
    background: var(--surface);
    border: 1px solid var(--stroke);
    box-shadow: 0 16px 34px rgba(1, 6, 16, 0.32);
}

.landing-test.landing-test-darkgradientblue .surface-soft,
.landing-test.landing-test-darkgradient .surface-soft {
    background: var(--surface-soft);
    border: 1px solid var(--stroke);
}

.solutions-page.solutions-page-darkgradientblue,
.solutions-page.solutions-page-darkgradientblue-dark,
.solutions-page.solutions-page-darkgradientblue.solutions-page-dark,
.solutions-page.solutions-page-darkgradient,
.solutions-page.solutions-page-darkgradient-dark,
.solutions-page.solutions-page-darkgradient.solutions-page-dark {
    --ink: #e8f0ff;
    --muted: #b9c7de;
    --accent: #8ec5ff;
    --accent-2: #a7d4ff;
    --surface: rgba(13, 24, 42, 0.86);
    --surface-soft: rgba(18, 33, 56, 0.84);
    --stroke: rgba(149, 198, 250, 0.24);
    background:
        radial-gradient(1200px 620px at 8% -8%, rgba(35, 107, 182, 0.28), transparent 58%),
        radial-gradient(1000px 560px at 92% 2%, rgba(40, 127, 206, 0.24), transparent 58%),
        linear-gradient(168deg, #081325 0%, #0b1c34 52%, #102443 100%);
    color: var(--ink);
}

.solutions-page.solutions-page-darkgradientblue .solution-bubble,
.solutions-page.solutions-page-darkgradient .solution-bubble {
    background: var(--surface);
    border-color: var(--stroke);
    box-shadow: 0 16px 34px rgba(1, 6, 16, 0.36);
}

.solutions-page.solutions-page-darkgradientblue img.pic-zoom-in,
.solutions-page.solutions-page-darkgradient img.pic-zoom-in {
    border-color: var(--stroke) !important;
    box-shadow: 0 14px 30px rgba(0, 5, 12, 0.45);
}

/* --- dark --- */

.white-highlight-dark {
    background-color: #121212 !important;
    color: white !important;
}

.light-highlight-dark {
    background-color: #1d1d1d !important;
    color: white !important;
}

.medium-highlight-dark {
    background-color: #001133 !important;
    color: white !important;
}

.strong-border-dark {
    background-color: #1d1d1d !important;
}

.medium-border-dark {
    border: 1px solid #001133;
}

.strong-highlight-dark {
    background-color: #121212 !important;
    color: white;
}

a.link-dark:link {
    background-color: #3e596d !important;
    border-color: #3e596d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-dark:visited {
    background-color: #3e596d !important;
    border-color: #3e596d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-dark:hover {
    background-color: #0565b3 !important;
    border-color: #0565b3 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-dark:link, a.link-medium-dark:visited  {
    background-color: #001133 !important;
    border-color: #001133 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-dark:hover, a.link-medium-dark:active {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-dark:link, a.link-strong-dark:visited  {
    background-color: #121212 !important;
    border-color: #121212 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-dark:hover, a.link-strong-dark:active {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-clear-dark:link, a.link-clear-dark:visited {
    background-color: #000f2e !important;
    border-color: #000f2e !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-clear-dark:hover, a.link-clear-dark:active {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-white-dark:link, a.link-white-dark:visited {
    background-color: #121212 !important;
    border-color: #121212 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-white-dark:hover, a.link-white-dark:active {
    background-color: #00327d !important;
    border-color: #00327d !important;
    text-decoration: none !important;
    color: white !important;
}

.btn-primary-dark {
    background-color: #000 !important;
    border-color: #000 !important;
    text-decoration: none !important;
    color: white !important;
}

.btn-secondary-dark {
    background-color: #00327d !important;
    border-color: #00327d !important;
    color: white !important;
}


/* --- red --- */

.white-highlight-red {
    background-color: #fff !important;
    color: black !important;
}

.light-highlight-red {
    background-color: #eef3fd !important;
    color: black !important;
}

.strong-highlight-red {
    background-color: #d51319 !important;
    color: white;
}

.medium-highlight-red {
    background-color: #dc5055 !important;
    color: white !important;
}

.strong-border-red {
    border: 1px solid #d51319;
}

.medium-border-red {
    border: 1px solid #dc5055;
}

.font-strong-highlight-red {
    color: white;
}

a.link-red:link, a.link-red:visited  {
    background-color: #dc5055 !important;
    border-color: #dc5055 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-red:hover, a.link-red:active {
    background-color: #d51319 !important;
    border-color: #d51319 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-red:link, a.link-medium-red:visited  {
    background-color: #dc5055 !important;
    border-color: #dc5055 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-red:hover, a.link-medium-red:active {
    background-color: #d51319 !important;
    border-color: #d51319 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-red:link, a.link-strong-red:visited  {
    background-color: #d51319 !important;
    border-color: #d51319 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-red:hover, a.link-strong-red:active {
    background-color: #dc5055 !important;
    border-color: #dc5055 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-clear-red:link, a.link-clear-red:visited {
    background-color: #f1d9d3 !important;
    border-color: #f1d9d3 !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-clear-red:hover, a.link-clear-red:active {
    background-color: #dc5055 !important;
    border-color: #dc5055 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-white-red:link, a.link-white-red:visited {
    background-color: #fff !important;
    border-color: #fff !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-white-red:hover, a.link-white-red:active {
    background-color: #dc5055 !important;
    border-color: #00a4e0 !important;
    text-decoration: dc5055 !important;
    color: white !important;
}

.btn-primary-red {
    background-color: #d51319 !important;
    border-color: #d51319 !important;
    color: white !important;
}

.btn-secondary-red {
    background-color: #dc5055 !important;
    border-color: #dc5055 !important;
    color: white !important;
}

/* --- default --- */

.navbar {
    padding: 10px 10px;
    border: none;
    border-radius: 0;
    margin-bottom: 20px;
    box-shadow: none;
}

.navbar.s6-topbar-gradient-gradientblue {
    background: linear-gradient(90deg, #00327d 0%, #00a4e0 100%) !important;
    border-bottom: 1px solid rgba(0, 50, 125, 0.5);
    box-shadow: 0 6px 14px rgba(0, 29, 76, 0.16);
}

.navbar.s6-topbar-gradient-gradientred {
    background: linear-gradient(90deg, #8e1120 0%, #d94855 100%) !important;
    border-bottom: 1px solid rgba(109, 12, 24, 0.52);
    box-shadow: 0 6px 14px rgba(88, 10, 20, 0.18);
}

.navbar.s6-topbar-gradient-darkgradientblue,
.navbar.s6-topbar-gradient-darkgradient {
    background: linear-gradient(90deg, #0b1424 0%, #1f3a5d 100%) !important;
    border-bottom: 1px solid rgba(116, 166, 227, 0.28);
    box-shadow: 0 6px 14px rgba(1, 6, 16, 0.35);
}

.navbar.s6-topbar-gradient-darkgradientred {
    background: linear-gradient(90deg, #140d10 0%, #3b1f28 100%) !important;
    border-bottom: 1px solid rgba(212, 139, 153, 0.24);
    box-shadow: 0 6px 14px rgba(10, 4, 6, 0.42);
}

.navbar.s6-topbar-gradient-darkgradientgray {
    background: linear-gradient(90deg, #0f1114 0%, #303742 100%) !important;
    border-bottom: 1px solid rgba(176, 188, 203, 0.22);
    box-shadow: 0 6px 14px rgba(4, 6, 10, 0.42);
}

.navbar-dark {
    color: white;
}

.navbar-btn {
    box-shadow: none;
    outline: none;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

.hiddenClass {
    visibility: hidden;
}

.noneDisplayedClass {
    display: none;
}

.noneDisplayedClass2 {
    display: none;
}

/* --- default --- */

.white-highlight-default {
    background-color: #fff !important;
    color: black !important;
}

.light-highlight-default {
    background-color: #eef3fd !important;
    color: black !important;
}

.strong-highlight-default {
    background-color: #c70039 !important;
    color: white;
}

.medium-highlight-default {
    background-color: #FF909B !important;
    color: black !important;
}

.strong-border-default {
    border: 1px solid #c70039;
}

.medium-border-default {
    border: 1px solid #FF909B;
}

.font-strong-highlight-default {
    color: white;
}

a.link-default:link, a.link-default:visited  {
    background-color: #FF909B !important;
    border-color: #FF909B !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-default:hover, a.link-default:active {
    background-color: #c70039 !important;
    border-color: #c70039 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-medium-default:link, a.link-medium-default:visited  {
    background-color: #FF909B !important;
    border-color: #FF909B !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-medium-default:hover, a.link-medium-default:active {
    background-color: #c70039 !important;
    border-color: #c70039 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-default:link, a.link-strong-default:visited  {
    background-color: #c70039 !important;
    border-color: #c70039 !important;
    text-decoration: none !important;
    color: white !important;
}

a.link-strong-default:hover, a.link-strong-default:active {
    background-color: #FF909B !important;
    border-color: #FF909B !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-clear-default:link, a.link-clear-default:visited {
    background-color: #d3ddf1 !important;
    border-color: #d3ddf1 !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-clear-default:hover, a.link-clear-default:active {
    background-color: #FF909B !important;
    border-color: #FF909B !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-white-default:link, a.link-white-default:visited {
    background-color: #fff !important;
    border-color: #fff !important;
    text-decoration: none !important;
    color: black !important;
}

a.link-white-default:hover, a.link-white-default:active {
    background-color: #FF909B !important;
    border-color: #FF909B !important;
    text-decoration: none !important;
    color: black !important;
}

.btn-primary-default {
    background-color: #c70039 !important;
    border-color: #c70039 !important;
    color: white !important;
}

.btn-secondary-default {
    background-color: #FF909B !important;
    border-color: #FF909B !important;
    color: black !important;
}

.btn[class*="btn-primary-"],
.btn[class*="btn-secondary-"] {
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.btn[class*="btn-primary-"]:hover,
.btn[class*="btn-primary-"]:focus,
.btn[class*="btn-secondary-"]:hover,
.btn[class*="btn-secondary-"]:focus {
    text-decoration: none !important;
    filter: brightness(1.08) saturate(1.03);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
    transform: translateY(-1px);
}

.btn[class*="btn-primary-"]:active,
.btn[class*="btn-secondary-"]:active {
    text-decoration: none !important;
    filter: brightness(1.02);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    transform: translateY(0);
}

.btn[class*="btn-primary-"]:focus-visible,
.btn[class*="btn-secondary-"]:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(15, 23, 42, 0.18), 0 10px 22px rgba(15, 23, 42, 0.14);
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.caret-off::before {
    display: none;
}

.caret-off::after {
    display: none;
}

.wrapper {
    display: flex;
    width: 100%;
}

#sidebar {
    width: 220px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    color: #000;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -220px;
}

#sidebar .sidebar-header {
    padding: 20px;
    text-align: center;
}

#sidebar ul.components {
    padding: 20px 0;
}

#sidebar ul p {
    color: #000;
    padding: 10px;
}

#sidebar ul li a {
    padding: 7px;
    display: block;
}

#sidebar ul li div {
    padding: 7px;
    display: block;
}

#sidebar ul li a:hover {
    color: #000;
    background-color: #FFC300;;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #000;
    background-color: #FFC300;
}

a[data-bs-toggle="collapse"] {
    position: relative;
}

ul ul a {
    font-size: 0.9em;
    padding-left: 30px;
}

ul.call_to_action {
    padding: 20px;
}

ul.call_to_action a {
    text-align: center;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

/* ---------------------------------------------------
    SIDEBAR COLLAPSE STYLE
----------------------------------------------------- */

#sidebarCollapse {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background-color: #000;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.1s;
}

#sidebarCollapse span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
    transform: none;
    opacity: 1;
    margin: 5px auto;
}


/* ---------------------------------------------------
    TOPBAR COLLAPSE STYLE
----------------------------------------------------- */

#topbarCollapse {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

#topbarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background-color: #000;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.1s;
}

#topbarCollapse span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#topbarCollapse span:nth-of-type(2) {
    opacity: 0;
}
#topbarCollapse span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}

#topbarCollapse.active span {
    transform: none;
    opacity: 1;
    margin: 5px auto;
}

#navbar-baptitle {
    margin-left: 200px;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#contentContainer.active {
    width: 100%;
    min-height: 100vh;
    top: 0;
    right: 0;
}
#contentContainer {
    width: calc(100% - 220px);
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}
#contentMain {
    width: 100%;
    padding: 0 25px 0 25px;
}

/* ---------------------------------------------------
    MEDIA QUERY TO TRIGGER TRANSFORMATION ON MEDIUM WIDTH
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -220px;
        transform: rotateY(90deg);
    }
    #sidebar.active {
        margin-left: 0;
        transform: none;
    }
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }
    #contentContainer {
        width: 100%;
        min-height: 100vh;
        top: 0;
        right: 0;
    }
    #contentContainer.active {
        width: calc(100% - 220px);
        min-height: 100vh;
        transition: all 0.3s;
        position: absolute;
        top: 0;
        right: 0;
    }
}

/* ---------------------------------------------------
    MEDIA QUERY TO TRIGGER TRANSFORMATION ON LARGE WIDTH
----------------------------------------------------- */

@media (max-width: 992px) {
    #navbar-baptitle {
        margin-right: auto;
        margin-left: auto;
    }
}

/* ---------------------------------------------------
    FONTS
----------------------------------------------------- */

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/htmlfiles/fonts/work-sans-v7-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/htmlfiles/fonts/work-sans-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/htmlfiles/fonts/work-sans-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('/htmlfiles/fonts/work-sans-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('/htmlfiles/fonts/work-sans-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/htmlfiles/fonts/work-sans-v7-latin-regular.svg#WorkSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-narrow-regular - latin */
@font-face {
    font-family: 'PT Sans Narrow';
    font-style: normal;
    font-weight: 400;
    src: url('/htmlfiles/fonts/pt-sans-narrow-v11-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('PT Sans Narrow'), local('PTSans-Narrow'),
         url('/htmlfiles/fonts/pt-sans-narrow-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/htmlfiles/fonts/pt-sans-narrow-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('/htmlfiles/fonts/pt-sans-narrow-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('/htmlfiles/fonts/pt-sans-narrow-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/htmlfiles/fonts/pt-sans-narrow-v11-latin-regular.svg#PTSansNarrow') format('svg'); /* Legacy iOS */
}

/* ---------------------------------------------------
    checkbox menu
----------------------------------------------------- */

.checkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}
.checkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}

.checkbox-menu li.active label {
    background-color: #cbcbff;
    font-weight:bold;
}

.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
    background-color: #f5f5f5;
}

.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: #b8b8ff;
}

/* ---------------------------------------------------
    CRM shared styles
----------------------------------------------------- */

.crm-theme {
    --crm-link-hover-bg: rgba(22, 163, 74, 0.1);
    --crm-link-hover-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    --crm-tab-bg: rgba(245, 158, 11, 0.14);
    --crm-tab-hover-bg: rgba(245, 158, 11, 0.18);
    --crm-tab-active-bg: rgba(245, 158, 11, 0.24);
    --crm-tech-hover-bg: rgba(245, 158, 11, 0.18);
    --crm-tech-active-bg: rgba(245, 158, 11, 0.24);
    --crm-tech-border: rgba(217, 119, 6, 0.45);
    --crm-tech-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
    --crm-business-bg: rgba(22, 163, 74, 0.14);
    --crm-business-hover-bg: rgba(22, 163, 74, 0.22);
    --crm-business-active-bg: rgba(22, 163, 74, 0.28);
    --crm-business-border: rgba(22, 163, 74, 0.45);
    --crm-business-shadow: 0 4px 12px rgba(21, 128, 61, 0.2);
    --crm-danger-bg: rgba(220, 38, 38, 0.14);
    --crm-danger-hover-bg: rgba(220, 38, 38, 0.22);
    --crm-danger-active-bg: rgba(220, 38, 38, 0.28);
    --crm-danger-border: rgba(220, 38, 38, 0.45);
    --crm-danger-shadow: 0 4px 12px rgba(153, 27, 27, 0.22);
    --crm-duplicate-bg: rgba(37, 99, 235, 0.14);
    --crm-duplicate-hover-bg: rgba(37, 99, 235, 0.22);
    --crm-duplicate-active-bg: rgba(37, 99, 235, 0.28);
    --crm-duplicate-border: rgba(37, 99, 235, 0.45);
    --crm-duplicate-shadow: 0 4px 12px rgba(30, 64, 175, 0.22);
    --crm-pill-font-size: 13px;
    --crm-pill-line-height: 1.2;
}

.crm-theme-dark {
    --crm-link-hover-bg: rgba(34, 197, 94, 0.24);
    --crm-link-hover-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
    --crm-tab-bg: rgba(251, 191, 36, 0.24);
    --crm-tab-hover-bg: rgba(251, 191, 36, 0.3);
    --crm-tab-active-bg: rgba(251, 191, 36, 0.38);
    --crm-tech-hover-bg: rgba(251, 191, 36, 0.28);
    --crm-tech-active-bg: rgba(251, 191, 36, 0.36);
    --crm-tech-border: rgba(251, 191, 36, 0.58);
    --crm-tech-shadow: 0 5px 14px rgba(146, 64, 14, 0.38);
    --crm-business-bg: rgba(34, 197, 94, 0.22);
    --crm-business-hover-bg: rgba(34, 197, 94, 0.3);
    --crm-business-active-bg: rgba(34, 197, 94, 0.38);
    --crm-business-border: rgba(110, 231, 183, 0.6);
    --crm-business-shadow: 0 5px 14px rgba(20, 83, 45, 0.45);
    --crm-danger-bg: rgba(220, 38, 38, 0.24);
    --crm-danger-hover-bg: rgba(220, 38, 38, 0.34);
    --crm-danger-active-bg: rgba(220, 38, 38, 0.42);
    --crm-danger-border: rgba(248, 113, 113, 0.62);
    --crm-danger-shadow: 0 5px 14px rgba(127, 29, 29, 0.45);
    --crm-duplicate-bg: rgba(59, 130, 246, 0.24);
    --crm-duplicate-hover-bg: rgba(59, 130, 246, 0.34);
    --crm-duplicate-active-bg: rgba(59, 130, 246, 0.42);
    --crm-duplicate-border: rgba(147, 197, 253, 0.62);
    --crm-duplicate-shadow: 0 5px 14px rgba(30, 64, 175, 0.45);
}

.crm-theme .crm-entity-link {
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.crm-theme .crm-entity-link:hover,
.crm-theme .crm-entity-link:focus {
    color: var(--crm-text);
    text-decoration: none !important;
    background: var(--crm-link-hover-bg);
    border-color: var(--crm-ok-border);
    box-shadow: var(--crm-link-hover-shadow);
    transform: translateY(-1px);
}

.crm-theme .crm-entity-link:focus-visible {
    outline: 2px solid var(--crm-ok-border);
    outline-offset: 1px;
}

.crm-theme .crm-entity-link:visited {
    color: var(--crm-text);
    text-decoration: none !important;
}

.crm-theme .crm-entity-link,
.crm-theme .crm-tech-action-btn,
.crm-theme .btn-pill-amber,
.crm-theme .crm-business-action-btn,
.crm-theme .btn-pill-emerald,
.crm-theme .crm-danger-action-btn,
.crm-theme .btn-pill-rose,
.crm-theme .crm-duplicate-action-btn,
.crm-theme .btn-pill-sky,
.crm-theme .nav-tabs .nav-link {
    font-size: var(--crm-pill-font-size);
    line-height: var(--crm-pill-line-height);
}

.crm-theme .crm-tech-action-btn,
.crm-theme .btn-pill-amber,
.crm-theme .crm-business-action-btn,
.crm-theme .btn-pill-emerald,
.crm-theme .crm-danger-action-btn,
.crm-theme .btn-pill-rose,
.crm-theme .crm-duplicate-action-btn,
.crm-theme .btn-pill-sky {
    font-family: inherit;
    cursor: pointer;
    color: var(--crm-text);
    text-decoration: none !important;
}

.crm-theme .crm-business-action-btn,
.crm-theme .btn-pill-emerald {
    background: var(--crm-business-bg);
    border-color: var(--crm-business-border);
    box-shadow: var(--crm-business-shadow);
}

.crm-theme .crm-business-action-btn:hover,
.crm-theme .crm-business-action-btn:focus,
.crm-theme .crm-business-action-btn.active,
.crm-theme .btn-pill-emerald:hover,
.crm-theme .btn-pill-emerald:focus,
.crm-theme .btn-pill-emerald.active {
    color: var(--crm-text);
    text-decoration: none !important;
    background: var(--crm-business-hover-bg);
    border-color: var(--crm-business-border);
    box-shadow: var(--crm-business-shadow);
    transform: translateY(-1px);
}

.crm-theme .crm-business-action-btn:active,
.crm-theme .btn-pill-emerald:active {
    color: var(--crm-text);
    text-decoration: none !important;
    background: var(--crm-business-active-bg);
    border-color: var(--crm-business-border);
    box-shadow: var(--crm-business-shadow);
    transform: translateY(0);
}

.crm-theme .crm-tech-action-btn:hover,
.crm-theme .crm-tech-action-btn:focus,
.crm-theme .crm-tech-action-btn.active,
.crm-theme .btn-pill-amber:hover,
.crm-theme .btn-pill-amber:focus,
.crm-theme .btn-pill-amber.active {
    color: var(--crm-text);
    text-decoration: none !important;
    background: var(--crm-tech-hover-bg);
    border-color: var(--crm-tech-border);
    box-shadow: var(--crm-tech-shadow);
    transform: translateY(-1px);
}

.crm-theme .crm-tech-action-btn:active,
.crm-theme .btn-pill-amber:active {
    color: var(--crm-text);
    text-decoration: none !important;
    background: var(--crm-tech-active-bg);
    border-color: var(--crm-tech-border);
    box-shadow: var(--crm-tech-shadow);
    transform: translateY(0);
}

.crm-theme .crm-tech-action-btn:disabled,
.crm-theme .btn-pill-amber:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
    box-shadow: none;
}

.crm-theme .crm-danger-action-btn,
.crm-theme .btn-pill-rose {
    background: var(--crm-danger-bg);
    border-color: var(--crm-danger-border);
    box-shadow: var(--crm-danger-shadow);
}

.crm-theme .crm-danger-action-btn:hover,
.crm-theme .crm-danger-action-btn:focus,
.crm-theme .crm-danger-action-btn.active,
.crm-theme .btn-pill-rose:hover,
.crm-theme .btn-pill-rose:focus,
.crm-theme .btn-pill-rose.active {
    color: var(--crm-text);
    text-decoration: none !important;
    background: var(--crm-danger-hover-bg);
    border-color: var(--crm-danger-border);
    box-shadow: var(--crm-danger-shadow);
    transform: translateY(-1px);
}

.crm-theme .crm-danger-action-btn:active,
.crm-theme .btn-pill-rose:active {
    color: var(--crm-text);
    text-decoration: none !important;
    background: var(--crm-danger-active-bg);
    border-color: var(--crm-danger-border);
    box-shadow: var(--crm-danger-shadow);
    transform: translateY(0);
}

.crm-theme .crm-duplicate-action-btn,
.crm-theme .btn-pill-sky {
    background: var(--crm-duplicate-bg);
    border-color: var(--crm-duplicate-border);
    box-shadow: var(--crm-duplicate-shadow);
}

.crm-theme .crm-duplicate-action-btn:hover,
.crm-theme .crm-duplicate-action-btn:focus,
.crm-theme .crm-duplicate-action-btn.active,
.crm-theme .btn-pill-sky:hover,
.crm-theme .btn-pill-sky:focus,
.crm-theme .btn-pill-sky.active {
    color: var(--crm-text);
    text-decoration: none !important;
    background: var(--crm-duplicate-hover-bg);
    border-color: var(--crm-duplicate-border);
    box-shadow: var(--crm-duplicate-shadow);
    transform: translateY(-1px);
}

.crm-theme .crm-duplicate-action-btn:active,
.crm-theme .btn-pill-sky:active {
    color: var(--crm-text);
    text-decoration: none !important;
    background: var(--crm-duplicate-active-bg);
    border-color: var(--crm-duplicate-border);
    box-shadow: var(--crm-duplicate-shadow);
    transform: translateY(0);
}

.crm-theme .crm-business-action-btn:disabled,
.crm-theme .btn-pill-emerald:disabled,
.crm-theme .crm-danger-action-btn:disabled,
.crm-theme .btn-pill-rose:disabled,
.crm-theme .crm-duplicate-action-btn:disabled,
.crm-theme .btn-pill-sky:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
    box-shadow: none;
}

.crm-theme .crm-row-action-group,
.crm-theme .btn-round-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.crm-theme .crm-row-action-btn,
.crm-theme .btn-round-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    padding: 2px 7px;
    min-width: 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.crm-theme .crm-row-action-view,
.crm-theme .btn-round-neutral {
    color: var(--crm-text);
    background: var(--crm-section-bg);
    border-color: var(--crm-border);
    box-shadow: none;
}

.crm-theme .crm-row-action-view:hover,
.crm-theme .crm-row-action-view:focus,
.crm-theme .btn-round-neutral:hover,
.crm-theme .btn-round-neutral:focus {
    color: var(--crm-text);
    background: var(--crm-ok-bg);
    border-color: var(--crm-ok-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.crm-theme .crm-row-action-view:active,
.crm-theme .btn-round-neutral:active {
    transform: translateY(0);
}

.crm-theme .crm-row-action-edit,
.crm-theme .btn-round-amber {
    color: var(--crm-text);
    background: var(--crm-tech-hover-bg);
    border-color: var(--crm-tech-border);
    box-shadow: var(--crm-tech-shadow);
}

.crm-theme .crm-row-action-edit:hover,
.crm-theme .crm-row-action-edit:focus,
.crm-theme .btn-round-amber:hover,
.crm-theme .btn-round-amber:focus {
    color: var(--crm-text);
    background: var(--crm-tech-active-bg);
    border-color: var(--crm-tech-border);
    box-shadow: var(--crm-tech-shadow);
    transform: translateY(-1px);
}

.crm-theme .crm-row-action-edit:active,
.crm-theme .btn-round-amber:active {
    background: var(--crm-tech-active-bg);
    transform: translateY(0);
}

.crm-theme .crm-row-action-delete,
.crm-theme .btn-round-rose {
    color: var(--crm-text);
    background: var(--crm-danger-bg);
    border-color: var(--crm-danger-border);
    box-shadow: var(--crm-danger-shadow);
}

.crm-theme .crm-row-action-delete:hover,
.crm-theme .crm-row-action-delete:focus,
.crm-theme .btn-round-rose:hover,
.crm-theme .btn-round-rose:focus {
    color: var(--crm-text);
    background: var(--crm-danger-hover-bg);
    border-color: var(--crm-danger-border);
    box-shadow: var(--crm-danger-shadow);
    transform: translateY(-1px);
}

.crm-theme .crm-row-action-delete:active,
.crm-theme .btn-round-rose:active {
    background: var(--crm-danger-active-bg);
    transform: translateY(0);
}

.crm-theme .crm-row-action-delete:disabled,
.crm-theme .btn-round-rose:disabled,
.crm-theme .btn-round-compact:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.crm-theme .nav-tabs {
    border-bottom: 1px solid var(--crm-border);
    gap: 8px;
    flex-wrap: wrap;
}

.crm-theme .nav-tabs .nav-link {
    border: 1px solid var(--crm-border);
    border-radius: 999px;
    margin-bottom: 8px;
    padding: 6px 14px;
    color: var(--crm-text);
    background: var(--crm-tab-bg);
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.crm-theme .nav-tabs .nav-link:hover,
.crm-theme .nav-tabs .nav-link:focus {
    color: var(--crm-text);
    border-color: var(--crm-tech-border);
    background: var(--crm-tab-hover-bg);
    box-shadow: var(--crm-link-hover-shadow);
    transform: translateY(-1px);
}

.crm-theme .nav-tabs .nav-link.active,
.crm-theme .nav-tabs .nav-item.show .nav-link {
    color: var(--crm-text);
    border-color: var(--crm-tech-border);
    background: var(--crm-tab-active-bg);
    font-weight: 600;
}

.crm-theme .nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--crm-tech-border);
    outline-offset: 1px;
}
#offcanvasRightMenu {
	display: flex;
	flex-direction: column;
	height: 100vh;
	max-height: 100vh;
}

@supports (height: 100dvh) {
	#offcanvasRightMenu {
		height: 100dvh;
		max-height: 100dvh;
	}
}

#offcanvasRightMenu .offcanvas-header {
	flex: 0 0 auto;
}

#offcanvasRightMenu .offcanvas-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	padding-bottom: calc(var(--bs-offcanvas-padding-y, 1rem) + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------
    CLOUDLINK VEHICLE SEARCH
----------------------------------------------------- */

.car-ui-theme {
    --car-text: #1b1720;
    --car-muted: #675e69;
    --car-surface: rgba(255, 255, 255, 0.94);
    --car-surface-soft: rgba(255, 247, 249, 0.96);
    --car-surface-strong: #ffffff;
    --car-border: rgba(82, 32, 48, 0.16);
    --car-accent: #a72230;
    --car-accent-strong: #7f1723;
    --car-accent-soft: rgba(167, 34, 48, 0.1);
    --car-success: #166534;
    --car-success-bg: rgba(22, 101, 52, 0.1);
    --car-error: #a31523;
    --car-error-bg: rgba(185, 28, 28, 0.1);
    --car-shadow: 0 16px 38px rgba(54, 26, 35, 0.09);
    --car-shadow-small: 0 7px 20px rgba(54, 26, 35, 0.08);
    color: var(--car-text);
}

.car-ui-theme-dark {
    --car-text: #fff2f5;
    --car-muted: #d0b9c0;
    --car-surface: rgba(33, 22, 27, 0.94);
    --car-surface-soft: rgba(43, 25, 31, 0.94);
    --car-surface-strong: #2a1a20;
    --car-border: rgba(255, 218, 227, 0.17);
    --car-accent: #ef8796;
    --car-accent-strong: #ffadba;
    --car-accent-soft: rgba(239, 135, 150, 0.14);
    --car-success: #a7f3c3;
    --car-success-bg: rgba(34, 197, 94, 0.14);
    --car-error: #fecaca;
    --car-error-bg: rgba(220, 38, 38, 0.2);
    --car-shadow: 0 18px 44px rgba(0, 0, 0, 0.27);
    --car-shadow-small: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.car-search-page {
    margin-top: 95px !important;
    padding-bottom: 48px;
}

.car-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.car-section-eyebrow {
    margin: 0 0 5px;
    color: var(--car-accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.car-page-title,
.car-price-summary-title,
.car-results-title,
.car-result-title {
    color: var(--car-text);
    margin: 0;
}

.car-page-title {
    font-size: clamp(1.85rem, 4vw, 2.65rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.car-page-subtitle {
    color: var(--car-muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 8px 0 0;
    max-width: 680px;
}

.car-page-heading-icon {
    align-items: center;
    background: linear-gradient(145deg, var(--car-accent), var(--car-accent-strong));
    border-radius: 18px;
    box-shadow: var(--car-shadow-small);
    color: #ffffff;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.55rem;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.car-search-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.car-search-card,
.car-price-summary,
.car-result-card {
    background: var(--car-surface);
    border: 1px solid var(--car-border);
    box-shadow: var(--car-shadow);
}

.car-search-card {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 22px;
}

.car-search-card-header {
    align-items: flex-start;
    display: flex;
    gap: 13px;
    margin-bottom: 20px;
}

.car-search-card-icon {
    align-items: center;
    background: var(--car-accent-soft);
    border-radius: 11px;
    color: var(--car-accent);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.1rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.car-search-card-title {
    color: var(--car-text);
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0;
}

.car-search-card-copy {
    color: var(--car-muted);
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 3px 0 0;
}

.car-search-fields {
    display: grid;
    gap: 14px;
}

.car-search-fields-split {
    grid-template-columns: minmax(0, 1.5fr) minmax(120px, 0.7fr);
}

.car-field {
    min-width: 0;
}

.car-field-label {
    color: var(--car-text);
    display: block;
    font-size: 0.8rem;
    font-weight: 650;
    margin-bottom: 6px;
}

.car-ui-theme .car-field .form-control,
.car-ui-theme .car-field .form-select {
    background-color: var(--car-surface-strong);
    border: 1px solid var(--car-border);
    border-radius: 9px;
    color: var(--car-text);
    min-height: 44px;
}

.car-ui-theme .car-field .input-group-text {
    color: var(--car-muted);
    background: var(--car-surface-soft);
    border-color: var(--car-border);
}

.car-ui-theme-dark .car-field .form-control::placeholder {
    color: #a99199;
}

.car-ui-theme .car-field .form-control:focus,
.car-ui-theme .car-field .form-select:focus {
    border-color: var(--car-accent);
    box-shadow: 0 0 0 0.2rem var(--car-accent-soft);
}

.car-search-submit {
    align-items: center;
    align-self: flex-start;
    border-radius: 9px;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
    min-height: 44px;
    min-width: 150px;
    padding: 9px 18px;
}

.car-search-submit:disabled {
    cursor: wait;
    opacity: 0.72;
}

.car-submit-spinner {
    display: none;
    height: 0.9rem;
    width: 0.9rem;
}

.car-search-submit.is-loading .car-submit-spinner {
    display: inline-block;
}

.car-status {
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--car-muted);
    display: none;
    font-size: 0.9rem;
    margin-top: 18px;
    padding: 11px 14px;
}

.car-status.is-visible {
    display: block;
}

.car-status.is-loading {
    background: var(--car-accent-soft);
    border-color: var(--car-border);
    color: var(--car-text);
}

.car-status.is-success {
    background: var(--car-success-bg);
    border-color: color-mix(in srgb, var(--car-success) 45%, transparent);
    color: var(--car-success);
}

.car-status.is-error {
    background: var(--car-error-bg);
    border-color: color-mix(in srgb, var(--car-error) 45%, transparent);
    color: var(--car-error);
}

.car-results-container {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.car-price-summary {
    border-radius: 16px;
    margin-bottom: 8px;
    overflow: hidden;
    padding: 22px;
}

.car-claim-summary {
    background: var(--car-surface-soft);
    border: 1px solid var(--car-border);
    border-radius: 12px;
    padding: 16px;
}

.car-claim-summary-title {
    color: var(--car-text);
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.car-claim-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.car-claim-item {
    border-left: 3px solid var(--car-border);
    color: var(--car-muted);
    display: flex;
    flex-direction: column;
    font-size: 0.72rem;
    padding: 3px 8px;
}

.car-claim-value {
    color: var(--car-text);
    font-size: 1rem;
}

.car-claim-item.is-alert {
    border-left-color: var(--car-error);
}

.car-claim-item.is-alert .car-claim-value {
    color: var(--car-error);
}

.car-price-summary-header {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 17px;
}

.car-price-summary-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.car-price-sample {
    background: var(--car-accent-soft);
    border-radius: 999px;
    color: var(--car-accent);
    font-size: 0.78rem;
    font-weight: 650;
    padding: 6px 10px;
    white-space: nowrap;
}

.car-price-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.car-price-item {
    background: var(--car-surface-soft);
    border: 1px solid var(--car-border);
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    padding: 13px 15px;
}

.car-price-item-featured {
    background: var(--car-accent-soft);
    border-color: var(--car-accent);
}

.car-price-label {
    color: var(--car-muted);
    font-size: 0.74rem;
    font-weight: 650;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.car-price-value {
    color: var(--car-text);
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
}

.car-results-heading {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: 7px 2px 0;
}

.car-results-title {
    font-size: 1.18rem;
    font-weight: 700;
}

.car-results-hint {
    color: var(--car-muted);
    font-size: 0.8rem;
}

.car-result-card {
    border-radius: 14px;
    overflow: hidden;
    padding: 20px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.car-result-card:hover {
    border-color: color-mix(in srgb, var(--car-accent) 42%, var(--car-border));
    box-shadow: 0 18px 42px rgba(54, 26, 35, 0.13);
    transform: translateY(-1px);
}

.car-plate-history {
    background: var(--car-surface-soft);
    border: 1px solid var(--car-border);
    border-radius: 16px;
    padding: 18px;
}

.car-plate-history-header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 15px;
}

.car-plate-history-title {
    color: var(--car-text);
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0;
}

.car-plate-history-count {
    background: var(--car-accent-soft);
    border: 1px solid color-mix(in srgb, var(--car-accent) 38%, transparent);
    border-radius: 999px;
    color: var(--car-accent);
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 650;
    padding: 5px 9px;
}

.car-plate-history-timeline {
    display: grid;
    gap: 14px;
    padding-left: 22px;
    position: relative;
}

.car-plate-history-timeline::before {
    background: var(--car-border);
    bottom: 12px;
    content: "";
    left: 6px;
    position: absolute;
    top: 12px;
    width: 2px;
}

.car-plate-history-entry {
    min-width: 0;
    position: relative;
}

.car-plate-history-marker {
    background: var(--car-surface-strong);
    border: 3px solid var(--car-accent);
    border-radius: 50%;
    height: 13px;
    left: -22px;
    position: absolute;
    top: 8px;
    width: 13px;
    z-index: 1;
}

.car-plate-history-entry-content {
    min-width: 0;
}

.car-plate-history-entry-label {
    color: var(--car-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 6px 2px;
    text-transform: uppercase;
}

.car-plate-history-entry .car-result-card {
    box-shadow: var(--car-shadow-small);
}

.car-result-header {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.car-result-title-area {
    min-width: 0;
}

.car-result-title {
    font-size: clamp(1.05rem, 2.8vw, 1.3rem);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.car-result-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.car-result-badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
    padding: 5px 9px;
}

.car-result-type-badge {
    background: var(--car-surface-soft);
    border: 1px solid var(--car-border);
    color: var(--car-muted);
}

.car-result-primary-badge {
    background: var(--car-accent-soft);
    border: 1px solid color-mix(in srgb, var(--car-accent) 38%, transparent);
    color: var(--car-accent);
}

.car-result-meta {
    align-items: flex-end;
    color: var(--car-muted);
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    font-size: 0.78rem;
    gap: 5px;
}

.car-result-meta-item {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    white-space: nowrap;
}

.car-result-spec-grid {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.car-result-spec {
    align-items: center;
    background: var(--car-surface-soft);
    border: 1px solid var(--car-border);
    border-radius: 10px;
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 10px 11px;
}

.car-result-spec-icon {
    color: var(--car-accent);
    flex: 0 0 auto;
    font-size: 1rem;
}

.car-result-spec-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.car-result-spec-label {
    color: var(--car-muted);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.2;
    text-transform: uppercase;
}

.car-result-spec-value {
    color: var(--car-text);
    font-size: 0.86rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.car-result-details-wrap {
    border-top: 1px solid var(--car-border);
    margin-top: 17px;
    padding-top: 4px;
}

.car-result-details-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--car-accent);
    display: flex;
    font-size: 0.82rem;
    font-weight: 650;
    gap: 8px;
    justify-content: space-between;
    margin-top: 5px;
    padding: 8px 6px;
    text-align: left;
    width: 100%;
}

.car-result-details-button:hover,
.car-result-details-button:focus-visible {
    background: var(--car-accent-soft);
    color: var(--car-accent-strong);
}

.car-result-details-button:focus-visible {
    outline: 2px solid var(--car-accent);
    outline-offset: 2px;
}

.car-result-details-chevron {
    transition: transform 0.18s ease;
}

.car-result-details-button[aria-expanded="true"] .car-result-details-chevron {
    transform: rotate(180deg);
}

.car-demographics-button[aria-expanded="true"] .car-result-details-chevron {
    transform: rotate(180deg);
}

.car-result-details-grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 4px 0 0;
}

.car-result-detail-pair {
    border-top: 1px solid var(--car-border);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 0.58fr);
    padding: 10px 6px;
}

.car-result-detail-label,
.car-result-detail-value {
    margin: 0;
    overflow-wrap: anywhere;
}

.car-result-detail-label {
    color: var(--car-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.car-result-detail-value {
    color: var(--car-text);
    font-size: 0.82rem;
}

.car-demographics-wrap {
    border-top: 1px solid var(--car-border);
    margin-top: 8px;
    padding: 7px 6px 0;
}

.car-demographics-button {
    align-items: center;
    background: var(--car-surface-soft);
    border: 1px solid var(--car-border);
    border-radius: 9px;
    color: var(--car-text);
    display: flex;
    font-size: 0.82rem;
    font-weight: 650;
    gap: 8px;
    justify-content: space-between;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.car-demographics-button:hover,
.car-demographics-button:focus-visible {
    border-color: var(--car-accent);
    color: var(--car-accent);
}

.car-demographics-button:focus-visible {
    outline: 2px solid var(--car-accent);
    outline-offset: 2px;
}

.car-demographics-panel {
    padding-top: 10px;
}

.car-demographics-content {
    background: var(--car-surface-soft);
    border: 1px solid var(--car-border);
    border-radius: 11px;
    padding: 16px;
}

.car-demographics-header {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.car-demographics-title {
    color: var(--car-text);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.car-demographics-scope {
    background: var(--car-accent-soft);
    border: 1px solid color-mix(in srgb, var(--car-accent) 38%, transparent);
    border-radius: 999px;
    color: var(--car-accent);
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 650;
    padding: 5px 9px;
}

.car-demographics-scope-switch {
    background: var(--car-surface-strong);
    border: 1px solid var(--car-border);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 3px;
}

.car-demographics-scope-pill {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--car-muted);
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 38px;
    padding: 4px 8px;
}

.car-demographics-scope-pill[aria-pressed="true"] {
    background: var(--car-accent);
    color: #ffffff;
}

.car-demographics-scope-pill:focus-visible {
    outline: 2px solid var(--car-accent);
    outline-offset: 2px;
}

.car-demographics-scope-pill:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.car-demographics-facts {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 13px;
}

.car-demographics-fact {
    border-left: 3px solid var(--car-accent);
    display: flex;
    flex-direction: column;
    padding: 3px 9px;
}

.car-demographics-fact-label {
    color: var(--car-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.car-demographics-fact-value {
    color: var(--car-text);
    font-size: 0.9rem;
}

.car-demographics-fallback {
    background: var(--car-accent-soft);
    border-radius: 8px;
    color: var(--car-muted);
    font-size: 0.76rem;
    line-height: 1.4;
    margin: 13px 0 0;
    padding: 9px 10px;
}

.car-demographics-distribution {
    margin-top: 18px;
}

.car-demographics-section-title {
    color: var(--car-text);
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0 0 9px;
}

.car-demographics-rows {
    display: grid;
    gap: 7px;
}

.car-demographics-row {
    align-items: center;
    display: grid;
    gap: 9px;
    grid-template-columns: minmax(76px, 0.22fr) minmax(100px, 1fr) minmax(92px, auto);
}

.car-demographics-row-label,
.car-demographics-row-value {
    color: var(--car-muted);
    font-size: 0.72rem;
}

.car-demographics-row-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.car-demographics-bar-track {
    background: color-mix(in srgb, var(--car-border) 65%, transparent);
    border-radius: 999px;
    height: 9px;
    min-width: 0;
    overflow: hidden;
}

.car-demographics-bar {
    background: linear-gradient(90deg, var(--car-accent), var(--car-accent-strong));
    border-radius: inherit;
    height: 100%;
    min-width: 0;
}

.car-demographics-known-age {
    color: var(--car-muted);
    font-size: 0.74rem;
    margin: 12px 0 0;
}

.car-demographics-state {
    align-items: center;
    background: var(--car-surface-soft);
    border: 1px solid var(--car-border);
    border-radius: 9px;
    color: var(--car-muted);
    display: flex;
    font-size: 0.78rem;
    gap: 8px;
    min-height: 48px;
    padding: 10px 12px;
}

.car-demographics-state.is-error {
    background: var(--car-error-bg);
    color: var(--car-error);
}

.car-demographics-retry {
    border: 1px solid currentColor;
    color: inherit;
    margin-left: auto;
}

.car-result-unavailable {
    color: var(--car-muted);
    font-size: 0.8rem;
    margin: 14px 0 0;
}

.car-results-empty {
    align-items: center;
    background: var(--car-surface);
    border: 1px dashed var(--car-border);
    border-radius: 14px;
    color: var(--car-muted);
    display: flex;
    flex-direction: column;
    padding: 28px 18px;
    text-align: center;
}

.car-results-empty-icon {
    color: var(--car-accent);
    font-size: 1.35rem;
    margin-bottom: 8px;
}

.car-results-empty-title {
    color: var(--car-text);
    margin-bottom: 3px;
}

.car-results-empty-copy {
    font-size: 0.82rem;
}

@media (max-width: 991.98px) {
    .car-search-grid {
        grid-template-columns: 1fr;
    }

    .car-result-spec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .car-search-page {
        margin-top: 82px !important;
        padding-left: 14px;
        padding-right: 14px;
    }

    .car-page-heading-icon {
        display: none;
    }

    .car-search-card,
    .car-price-summary,
    .car-result-card {
        padding: 17px;
    }

    .car-search-fields-split,
    .car-price-grid,
    .car-claim-grid,
    .car-result-spec-grid,
    .car-result-details-grid {
        grid-template-columns: 1fr;
    }

    .car-search-submit {
        align-self: stretch;
        width: 100%;
    }

    .car-price-summary-header,
    .car-results-heading,
    .car-plate-history-header,
    .car-result-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .car-result-meta {
        align-items: flex-start;
    }

    .car-result-detail-pair {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .car-demographics-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .car-plate-history {
        padding: 14px;
    }

    .car-plate-history-timeline {
        padding-left: 18px;
    }

    .car-plate-history-marker {
        left: -18px;
    }

    .car-demographics-facts {
        grid-template-columns: 1fr;
    }

    .car-demographics-row {
        gap: 5px 8px;
        grid-template-columns: minmax(72px, auto) 1fr;
    }

    .car-demographics-bar-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .car-demographics-row-value {
        grid-column: 2;
        grid-row: 1;
    }
}

.s6-multiple-options-header .s6-multiple-options-nav,
.s6-multiple-options-header .s6-multiple-options-actions {
    align-items: center;
    gap: 0.2rem;
}

.s6-multiple-options-header .s6-multiple-options-nav > .nav-item > .nav-link,
.s6-multiple-options-header .s6-multiple-options-actions > .nav-item > .nav-link {
    white-space: nowrap;
}

.s6-multiple-options-header .s6-header-toggle {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
}

.s6-multiple-options-header .s6-header-toggle-track {
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    display: inline-flex;
    height: 1rem;
    padding: 1px;
    transition: background-color 140ms ease;
    width: 1.8rem;
}

.s6-multiple-options-header .s6-header-toggle-thumb {
    background: #fff;
    border-radius: 50%;
    display: block;
    height: 0.75rem;
    transform: translateX(0);
    transition: transform 140ms ease;
    width: 0.75rem;
}

.s6-multiple-options-header .s6-header-toggle.is-enabled .s6-header-toggle-track {
    background: #16803c;
}

.s6-multiple-options-header .s6-header-toggle.is-enabled .s6-header-toggle-thumb {
    transform: translateX(0.75rem);
}

@media (max-width: 1199.98px) {
    .s6-multiple-options-header .s6-multiple-options-nav,
    .s6-multiple-options-header .s6-multiple-options-actions {
        align-items: stretch;
    }

    .s6-multiple-options-header .s6-multiple-options-actions {
        border-top: 1px solid rgba(255, 255, 255, 0.22);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

    .s6-multiple-options-header .s6-header-toggle {
        display: flex;
    }
}