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;
}
