:root {
    --active-gradient: url('/Common/Assets/media/patterns/bg-blue-light-blue.jpg') center -45px / cover no-repeat;
    --white-rgb: 255, 255, 255;

    --border-gray: #D7DBEC;
    --border-light: #DBDFE9;

    --google-blue: #476694;
    --google-green: #64AD00;
    --google-gray: #9D9D9D;

    --green-rgb: 0,126,96;
    --green: rgb(var(--green-rgb));
    --green-hover: #006D53;
    --green-bg: #f6faf9;
    --green-medium: #63BE1E;
    --green-light: #94BD94;

    --petrol: #0D7AA0;
    --petrol-hover: #2B99BF;

    --gray: #464646;
    --gray-hover: #7A7A7A;
    --gray-3: #333;
    --gray-6: #666;
    --gray-6e-rgb: 110, 110, 110;
    --gray-8: #888;
    --gray-9: #999;
    --gray-70: #707070;
    --gray-a: #AAA;
    --gray-b: #BBB;
    --gray-c: #CCC;
    --gray-d: #DDD;
    --gray-e: #EEE;
    --gray-e-rgb: 249, 249, 249;
    --gray-ec: #ECECEC;
    --gray-ec-rgb: 236, 236, 236;
    --gray-dark: #131523;
    --gray-darklight: #F1F1F2;
    --gray-light: #F3F3F3;
    --gray-f9: #F9F9F9;
    --gray-49: #494949;
    --dark: #071437;

    --orange-rgb: 255, 153, 0;
    --orange: #FF9900;
    --orange-bg: rgba(255, 153, 0, .04);
    --orange-hover: #DF6F00;

    --red-rgb: 151, 30, 0;
    --red: #971E00;
    --red-bg: rgba(151, 30, 0, .1);
    --red-hover: #6A1500;
    --red-10pct: rgba(151, 30, 0, .1);

    --red-medium: #C00000;
    --red-medium2: #E54004;

    --yellow-rgb: 255, 199, 0;
    --yellow: #FFC700;
    --yellow-light: #FFFF99;

    --blue-rgb: 0,36,89;
    --blue: #002459;
    --blue-light: rgba(215, 225, 234, .5);

    --blue-medium: #7E84A3;
    --blue-medium-light: #479ff9;
    --blue-medium-light-rgb: 0, 158, 247;
    --blue-medium-light-bg: rgba(var(--blue-medium-light-rgb), .04);
    --bg-blue-light: rgba(var(--blue-medium-light-rgb), .1);

    --blue-new-rgb: 40, 101, 191;
    --blue-new: #2865BF;
    --blue-new-hover-rgb: 54, 131, 220;
    --blue-new-hover: #3683DC;
    --blue-new-light: #009EF7;
    --blue-new-light-bg: rgba( var(--blue-new-rgb), .04);

    --blue-new-ultralight: #70CBFF;

    --purple: #5d06d5;

    --text: #131523;

    --border-radius-first: 4px 0 0 4px;
    --border-radius-last: 0 4px 4px 0;

    /* custom modal styles */
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1.75rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 0.475rem;
    --bs-modal-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --bs-modal-inner-border-radius: 0.475rem;
    --bs-modal-header-padding-x: 1.75rem;
    --bs-modal-header-padding-y: 1.75rem;
    --bs-modal-header-padding: 1.75rem 1.75rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: 1px;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: 1px;

    --bs-rating-color-default: #C4CADA;

    --bs-page-bg: #F0F0F0;
}

/* override default color definitions */
.btn-white.disabled,
.btn-white:disabled {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

.btn-white {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}

.btn.btn-success,
.btn.btn-green {
    color: #fff;
    border-color: var(--green);
    background-color: var(--green);
}

/* primary active color */
.btn-check:active + .btn.btn-active-color-primary,
.btn-check:checked + .btn.btn-active-color-primary,
.btn.btn-active-color-primary.active,
.btn.btn-active-color-primary.show,
.btn.btn-active-color-primary:active:not(.btn-active),
.btn.btn-active-color-primary:focus:not(.btn-active),
.btn.btn-active-color-primary:hover:not(.btn-active),
.show > .btn.btn-active-color-primary {
    color: var(--green);
}

.btn-check:active + .btn.btn-active-color-primary .svg-icon,
.btn-check:active + .btn.btn-active-color-primary i,
.btn-check:checked + .btn.btn-active-color-primary .svg-icon,
.btn-check:checked + .btn.btn-active-color-primary i,
.btn.btn-active-color-primary.active .svg-icon,
.btn.btn-active-color-primary.active i,
.btn.btn-active-color-primary.show .svg-icon,
.btn.btn-active-color-primary.show i,
.btn.btn-active-color-primary:active:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:active:not(.btn-active) i,
.btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:focus:not(.btn-active) i,
.btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon,
.btn.btn-active-color-primary:hover:not(.btn-active) i,
.show > .btn.btn-active-color-primary .svg-icon,
.show > .btn.btn-active-color-primary i {
    color: var(--green);
}

.btn.btn-primary {
    background-color: var(--green);
}

.btn-check:active + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.show > .btn.btn-primary,
.btn-check:active + .btn.btn-success,
.btn-check:checked + .btn.btn-success,
.btn.btn-success.active,
.btn.btn-success.show,
.btn.btn-success:active:not(.btn-active),
.btn.btn-success:focus:not(.btn-active),
.btn.btn-success:hover:not(.btn-active),
.show > .btn.btn-success,
.btn-check:active + .btn.btn-green,
.btn-check:checked + .btn.btn-green,
.btn.btn-green.active,
.btn.btn-green.show,
.btn.btn-green:active:not(.btn-active),
.btn.btn-green:focus:not(.btn-active),
.btn.btn-green:hover:not(.btn-active),
.show > .btn.btn-green {
    border-color: var(--green-hover) !important;
    background-color: var(--green-hover) !important;
}

.btn.btn-outline.btn-outline-prim§ary,
.btn.btn-outline.btn-outline-success,
.btn.btn-outline.btn-outline-green {
    outline-color: var(--green) !important;
    color: var(--green);
}

.btn-outline-primary:hover,
.btn-outline-green:hover,
.btn-outline-success:hover {
    background: var(--green-bg) !important;
}

.btn-check:active + .btn.btn-outline.btn-outline-success,
.btn-check:checked + .btn.btn-outline.btn-outline-success,
.btn.btn-outline.btn-outline-success.active,
.btn.btn-outline.btn-outline-success.show,
.btn.btn-outline.btn-outline-success:active:not(.btn-active),
.btn.btn-outline.btn-outline-success:focus:not(.btn-active),
.btn.btn-outline.btn-outline-success:hover:not(.btn-active),
.show > .btn.btn-outline.btn-outline-success {
    background-color: var(--green);
    outline-color: var(--green) !important;
}

.btn.btn-outline.btn-outline-secondary {
    color: #e4e6ef;
    outline-color: #e4e6ef !important;
}

.btn.btn-outline.btn-outline-secondary .svg-icon,
.btn.btn-outline.btn-outline-secondary i {
    line-height: 1;
    font-size: 1rem;
    color: #a1a5b7;
}

.btn.btn-danger,
.btn.btn-red,
.btn.btn-active-red {
    color: #fff;
    border-color: var(--red) !important;
    background-color: var(--red) !important;
}

.btn-check:active + .btn.btn-danger,
.btn-check:checked + .btn.btn-danger,
.btn.btn-danger.active, .btn.btn-danger.show,
.btn.btn-danger:active:not(.btn-active),
.btn.btn-danger:focus:not(.btn-active),
.btn.btn-danger:hover:not(.btn-active),
.show > .btn.btn-danger,
.btn-check:active + .btn.btn-red,
.btn-check:checked + .btn.btn-red,
.btn.btn-red.active, .btn.btn-red.show,
.btn.btn-red:active:not(.btn-active),
.btn.btn-red:focus:not(.btn-active),
.btn.btn-red:hover:not(.btn-active),
.show > .btn.btn-red {
    border-color: var(--red-hover) !important;
    background-color: var(--red-hover) !important;
}

.btn.btn-outline.btn-outline-danger,
.btn.btn-outline.btn-outline-red {
    outline-color: var(--red) !important;
    color: var(--red);
}

.btn-check:active + .btn.btn-outline.btn-outline-danger,
.btn-check:checked + .btn.btn-outline.btn-outline-danger,
.btn.btn-outline.btn-outline-danger.active,
.btn.btn-outline.btn-outline-danger.show,
.btn.btn-outline.btn-outline-danger:active:not(.btn-active),
.btn.btn-outline.btn-outline-danger:focus:not(.btn-active),
.btn.btn-outline.btn-outline-danger:hover:not(.btn-active),
.show > .btn.btn-outline.btn-outline-danger,
.btn-check:active + .btn.btn-outline.btn-outline-red,
.btn-check:checked + .btn.btn-outline.btn-outline-red,
.btn.btn-outline.btn-outline-red.active,
.btn.btn-outline.btn-outline-red.show,
.btn.btn-outline.btn-outline-red:active:not(.btn-active),
.btn.btn-outline.btn-outline-red:focus:not(.btn-active),
.btn.btn-outline.btn-outline-red:hover:not(.btn-active),
.show > .btn.btn-outline.btn-outline-red {
    color: #d9214e;
    background-color: #fff5f8 !important;
    outline-color: var(--red) !important;
}

.btn.btn-outline.btn-outline-danger .svg-icon,
.btn.btn-outline.btn-outline-danger i,
.btn.btn-outline.btn-outline-red .svg-icon,
.btn.btn-outline.btn-outline-red i {
    color: var(--red)
}

.btn-check:active + .btn.btn-active-color-danger,
.btn-check:checked + .btn.btn-active-color-danger,
.btn.btn-active-color-danger.active,
.btn.btn-active-color-danger.show,
.btn.btn-active-color-danger:active:not(.btn-active),
.btn.btn-active-color-danger:focus:not(.btn-active),
.btn.btn-active-color-danger:hover:not(.btn-active),
.show > .btn.btn-active-color-danger,
.btn-check:active + .btn.btn-active-color-red,
.btn-check:checked + .btn.btn-active-color-red,
.btn.btn-active-color-red.active,
.btn.btn-active-color-red.show,
.btn.btn-active-color-red:active:not(.btn-active),
.btn.btn-active-color-red:focus:not(.btn-active),
.btn.btn-active-color-red:hover:not(.btn-active),
.show > .btn.btn-active-color-red {
    color: var(--red) !important;
}

.btn-check:active + .btn.btn-active-color-danger .svg-icon,
.btn-check:active + .btn.btn-active-color-danger i,
.btn-check:checked + .btn.btn-active-color-danger .svg-icon,
.btn-check:checked + .btn.btn-active-color-danger i,
.btn.btn-active-color-danger.active .svg-icon,
.btn.btn-active-color-danger.active i,
.btn.btn-active-color-danger.show .svg-icon,
.btn.btn-active-color-danger.show i,
.btn.btn-active-color-danger:active:not(.btn-active) .svg-icon,
.btn.btn-active-color-danger:active:not(.btn-active) i,
.btn.btn-active-color-danger:focus:not(.btn-active) .svg-icon,
.btn.btn-active-color-danger:focus:not(.btn-active) i,
.btn.btn-active-color-danger:hover:not(.btn-active) .svg-icon,
.btn.btn-active-color-danger:hover:not(.btn-active) i,
.show > .btn.btn-active-color-danger .svg-icon,
.show > .btn.btn-active-color-danger i,
.btn-check:active + .btn.btn-active-color-red .svg-icon,
.btn-check:active + .btn.btn-active-color-red i,
.btn-check:checked + .btn.btn-active-color-red .svg-icon,
.btn-check:checked + .btn.btn-active-color-red i,
.btn.btn-active-color-red.active .svg-icon,
.btn.btn-active-color-red.active i,
.btn.btn-active-color-red.show .svg-icon,
.btn.btn-active-color-red.show i,
.btn.btn-active-color-red:active:not(.btn-active) .svg-icon,
.btn.btn-active-color-red:active:not(.btn-active) i,
.btn.btn-active-color-red:focus:not(.btn-active) .svg-icon,
.btn.btn-active-color-red:focus:not(.btn-active) i,
.btn.btn-active-color-red:hover:not(.btn-active) .svg-icon,
.btn.btn-active-color-red:hover:not(.btn-active) i,
.show > .btn.btn-active-color-red .svg-icon,
.show > .btn.btn-active-color-red i {
    color: var(--red) !important;
}

.btn.btn-outline.btn-outline-orange {
    outline-color: var(--orange) !important;
    color: var(--orange) !important;
}

.btn.btn-outline.btn-outline-orange:hover {
    background: var(--orange-bg) !important;
}

.btn.btn-outline.btn-outline-blue-medium {
    outline-color: var(--blue-medium) !important;
    color: var(--blue-medium) !important;
}

.btn.btn-outline.btn-outline-blue-new {
    outline-color: var(--blue-new) !important;
    color: var(--blue-new) !important;
}

.btn.btn-outline.btn-outline-blue-medium:hover {
    background: var(--blue-light) !important;
}

.btn.btn-white_10 {
    color: #fff;
    outline: 1px solid rgba(var(--white-rgb), .1) !important;
    background-color: rgba(var(--white-rgb), .1);
}

.btn-check:active + .btn.btn-white_10,
.btn-check:checked + .btn.btn-white_10,
.btn.btn-white_10.active,
.btn.btn-white_10.show,
.btn.btn-white_10:active:not(.btn-active),
.btn.btn-white_10:focus:not(.btn-active)
{
    background-color: rgba(var(--white-rgb), .2);
    outline-color: white !important;
}

.btn.btn-white_10:hover:not(.btn-active)
{
    background-color: rgba(var(--white-rgb), .15);
}

.btn.btn-light-dark {
    color: #000;
    border-color: var(--border-gray);
    background-color: var(--border-gray);
}

.btn.btn-outline.btn-outline-light-dark {
    outline-color: var(--border-gray) !important;
    color: var(--border-gray);
}

.btn.btn-gray {
    background-color: var(--gray);
}

.btn.btn-gray-light {
    border: 1px var(--gray-b) solid !important;
    background-color: var(--gray-f9) !important;
}

.btn.btn-gray-6 {
    color: #fff;
    border-color: var(--gray-6);
    background-color: var(--gray-6);
}

.btn.btn-outline.btn-outline-gray-6 {
    outline-color: var(--gray-6) !important;
    color: var(--gray-6);
}

.btn.btn-gray-9 {
    color: #fff;
    border-color: var(--gray-9);
    background-color: var(--gray-9);
}

.btn.btn-outline.btn-outline-gray-9 {
    outline-color: var(--gray-9) !important;
    color: var(--gray-9);
}

.btn.btn-blue-new {
    color: #fff;
    border-color: var(--blue-new);
    background-color: var(--blue-new);
}

.btn.btn-outline.btn-blue-new {
    outline-color: var(--blue-new) !important;
    background-color: transparent !important;
    color: var(--blue-new) !important;
}

.btn.btn-blue-new-light {
    color: #fff;
    border-color: var(--blue-new-light);
    background-color: var(--blue-new-light);
}

.btn.btn-outline.btn-blue-new-light {
    outline-color: var(--blue-new-light) !important;
    background-color: transparent !important;
    color: var(--blue-new-light) !important;
}

.btn:not(.btn-outline,.btn-icon):disabled, .btn:not(.btn-outline,.btn-icon).disabled, .btn:not(.btn-outline,.btn-icon):disabled i, .btn:not(.btn-outline,.btn-icon).disabled i {
    color: #fff !important;
    background-color: var(--gray-6);
}

.btn.btn-outline:disabled, .btn.btn-outline.disabled {
    color: var(--gray-6) !important;
    outline-color: var(--gray-6) !important;
}

.btn.btn-outline.disabled i {
    color: var(--gray-6) !important;
}

.btn.btn-icon:disabled i {
    color: var(--gray-6) !important;
}

/* BADGEs */
.badge-green,
.badge-primary {
    color: #fff;
    background-color: var(--green);
}
.badge-green-light {
    color: #fff;
    background-color: var(--green-light);
}

.badge-red,
.badge-danger {
    color: #fff;
    background-color: var(--red);
}

.badge-outline.badge-dark {
    color: var(--dark) !important;
    outline: 1px solid var(--dark) !important;
    background: transparent !important;
}

.badge-outline.badge-red {
    color: var(--red);
    outline: 1px solid var(--red);
    background: transparent;
}
.badge-stacked .badge-red:not(.badge-outline) {
    position: relative;
    outline: 1px solid var(--red);
}
.badge-outline.badge-red.border-dotted {

    border-color: var(--red);
}

.badge-red-medium {
    color: #fff;
    background-color: var(--red-medium);
}
.badge-outline.badge-red-medium {
    color: var(--red-medium);
    outline: 1px solid var(--red-medium);
    background: transparent;
}
.badge-stacked .badge-red-medium:not(.badge-outline) {
    position: relative;
    outline: 1px solid var(--red-medium);
}

.badge-red-medium2 {
    color: #fff;
    background-color: var(--red-medium2);
}
.badge-outline.badge-red-medium2 {
    color: var(--red-medium2);
    outline: 1px solid var(--red-medium2);
    background: transparent;
}
.badge-stacked .badge-red-medium2:not(.badge-outline) {
    position: relative;
    outline: 1px solid var(--red-medium2);
}

.badge-orange, .badge-warning {
    color: #fff;
    background-color: var(--orange);
}

.badge-outline.badge-orange {
    color: var(--orange);
    outline: 1px solid var(--orange);
    background: #fff;
}

.badge-orange-hover {
    color: #fff;
    background-color: var(--orange-hover) !important;
}

.badge-petrol {
    color: #fff;
    background-color: var(--petrol) !important;
}

.badge-petrol-hover {
    color: #fff;
    background-color: var(--petrol-hover) !important;
}

.badge-outline.badge-orange-hover {
    color: var(--orange-hover);
    outline: 1px solid var(--orange-hover);
    background: transparent !important;
}

/* Dark orange — subnetwork / sub-publisher badges */
.badge-orange-dark {
    color: #fff;
    background-color: var(--orange-hover);
}
.badge-outline.badge-orange-dark {
    color: var(--orange-hover);
    outline: 1px solid var(--orange-hover);
    background: transparent;
}

/* Composed badge helpers — flat inner corners for touching badge pairs */
.badge-start { border-radius: 6px 0 0 6px !important; }
.badge-end   { border-radius: 0 6px 6px 0 !important; }
.badge-flat  { border-radius: 0 !important; }

/* Composed badge: outlined end piece uses border instead of outline to avoid gaps */
.badge.badge-end.badge-outline {
    outline: none !important;
    border: 1px solid currentColor !important;
    margin-left: -1px;
    /* Match solid badge height: line-height + padding must equal solid badge total */
    padding-top: calc(0.3em - 0.5px);
    padding-bottom: calc(0.3em - 0.5px);
}

.badge-yellow {
    color: #1e1e2d;
    background-color: var(--yellow);
}

.badge-blue {
    color: #fff;
    background-color: var(--blue);
}

.badge-purple {
    color: #fff;
    background-color: var(--purple);
}

.badge-blue-medium {
    color: #fff;
    background-color: var(--blue-medium);
}

.badge-outline.badge-blue-medium {
    color: var(--blue);
    outline: 1px solid var(--blue-medium);
    background: transparent;
}

.badge-blue-new {
    color: #fff;
    background-color: var(--blue-new);
}

.badge-outline.badge-blue-new {
    color: var(--blue-new);
    outline: 1px solid var(--blue-new) !important;
    background: transparent;
}

.badge-blue-new-hover {
    color: #fff;
    background-color: var(--blue-new-hover);
}

.badge-outline.badge-blue-new-hover {
    color: var(--blue-new-hover);
    outline: 1px solid var(--blue-new-hover) !important;
    background: transparent;
}

.badge-blue-new-light {
    color: #fff;
    background-color: var(--blue-new-light);
}

.badge-outline.badge-blue-new-light {
    color: var(--blue-new-light);
    outline: 1px solid var(--blue-new-light) !important;
    background: transparent;
}

.badge-blue-medium-light, .badge-lightblue {
    color: #fff;
    background-color: var(--blue-medium-light);
}

.badge-gray-darklight {
    color: #071437;
    background-color: var(--gray-darklight);
}

.badge-light-dark {
    color: #071437;
    background-color: #f1f1f2;
}

.badge-gray-a, .badge-grey {
    color: #fff;
    background-color: var(--gray-a);
}

.badge-gray-9 {
    color: #fff;
    background-color: var(--gray-9);
}

.badge-gray-6 {
    color: #fff;
    background-color: var(--gray-6);
}

.badge-outline.badge-gray-9 {
    color: var(--gray-9);
    outline: 1px solid var(--gray-9);
    background: transparent;
}

.badge-outline.badge-gray-6 {
    color: var(--gray-6);
    outline: 1px solid var(--gray-6);
    background: transparent;
}

.badge-outline.badge-gray-a {
    color: var(--gray-a);
    outline: 1px solid var(--gray-a);
    background: transparent;
}

.badge-outline.badge-gray-a:hover {
    color: var(--gray-9);
    outline-color: var(--gray-9) !important;
}

.badge-gray-b, .badge-grey {
    color: #fff;
    background-color: var(--gray-b);
}

.badge-outline.badge-gray-b {
    color: var(--gray-b);
    outline: 1px solid var(--gray-b);
    background: transparent;
}

.badge-outline.badge-gray-b:hover {
    color: var(--gray-b);
    outline-color: var(--gray-b) !important;
}

.badge-gray-c {
    color: #fff;
    background-color: var(--gray-c);
}

.badge-outline.badge-gray-c {
    color: var(--gray-c);
    outline: 1px solid var(--gray-c);
    background: transparent;
}

.badge-outline.badge-gray-c:hover {
    color: var(--gray-b);
    outline-color: var(--gray-b);
}

.badge-gray-e {
    color: #fff;
    background-color: var(--gray-e);
}

.badge-outline.badge-gray-e {
    color: var(--gray-e);
    outline: 1px solid var(--gray-e);
    background: transparent;
}

.badge-outline.badge-gray-e:hover {
    color: var(--gray-d);
    outline-color: var(--gray-d);
}

.badge-outline.badge-green {
    color: var(--green);
    outline: 1px solid var(--green);
    background: transparent;
}

.badge-outline.badge-green-light {
    color: var(--green-light);
    outline: 1px solid var(--green-light);
    background: transparent;
}

.badge-outline.badge-green:hover {
    color: var(--green-hover);
    outline-color: var(--green-hover);
}

/* BGs */
.bg-white_10 {
    background-color: rgba(var(--white-rgb), .1) !important;
}

.bg-gray-70 {
    background-color: var(--gray-70);
    color: #fff;
}

.bg-gray-a {
    background-color: var(--gray-a);
    color: #fff;
}

.bg-gray-b {
    background-color: var(--gray-b);
    color: #fff;
}

.bg-gray-d {
    background-color: var(--gray-d) !important;
}

.bg-gray-f9 {
    background-color: var(--gray-f9) !important;
}

.bg-gray-ec {
    background-color: var(--gray-ec) !important;
}
.bg-gray-ec_45 {
    background-color: rgba(var(--gray-ec-rgb), .45) !important;
}

.bg-gray-e {
    background-color: var(--gray-e) !important;
}
.bg-gray-e_45 {
    background-color: rgba(var(--gray-e-rgb), .45) !important;
}
.bg-gray-6e-light {
    background-color: rgba(var(--gray-6e-rgb), .04) !important;
}

.bg-gray-f9 {
    background-color: var(--gray-f9) !important;
}

.bg-gray-49 {
    background-color: var(--gray-49) !important;
}

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

.bg-green_2 {
    background-color: rgba(var(--green-rgb), .2) !important;
    box-shadow: none !important;
}

.bg-green-light {
    background-color: rgba(var(--green-rgb), .04) !important;
    box-shadow: none !important;
}

.bg-red,
.bg-danger {
    background-color: var(--red) !important;
}

.bg-red_40 {
    background-color: rgba(var(--red-rgb), .4) !important;
}

.bg-red-light,
.bg-danger-light {
    background-color: rgba(var(--red-rgb), .1) !important;
}

.bg-orange,
.bg-warning {
    background-color: var(--orange) !important;
    color: #fff;
}

.bg-orange_60 {
    background-color: rgba(var(--orange-rgb), .6) !important;
}

.bg-orange-light,
.bg-warning-light {
    background-color: rgba(var(--orange-rgb), .04) !important;
}

.yellow
{
    background-color: #FFFFCC;
}
.bg-yellow
 {
    background-color: var(--yellow);
}

.bg-yellow-light {
    background-color: rgba(var(--yellow-rgb), .04) !important;
}

.bg-blue {
    background-color: var(--blue) !important;
}

.bg-blue-light, .bg-lightblue {
    background-color: var(--blue-medium-light) !important;
}
.bg-blue-medium-light {
    background-color: var(--blue-medium-light-bg) !important;
}

.bg-blue-light {
    background-color: var(--bg-blue-light) !important;
}

.bg-blue-new {
    background-color: var(--blue-new) !important;
}

.bg-blue-new-light {
    background-color: var(--blue-new-light-bg) !important;
}

.bg-white {
    background-color: #fff;
}

tr[data-bs-toggle=collapse][aria-expanded=true], .table-hover > tbody tr[data-bs-toggle=collapse][aria-expanded=true]:hover > * {
    background-color: var(--gray-e) !important;
    --bs-table-bg-state: var(--gray-e);
}

/* ALERTs */
.alert-green, .alert-success {
    border-color: var(--green);
    background-color: var(--green-bg);
}

.alert-yellow {
    color: var(--yellow);
    border-color: var(--yellow);
    background-color: var(--yellow-light);
}

.alert-orange {
    color: var(--orange);
    border-color: var(--orange);
    background-color: var(--orange-bg);
}

.alert-blue-new {
    color: var(--blue-new);
    border-color: var(--blue-new);
    background-color: var(--blue-new-light-bg);
}

/* custom nav line-tabs styles */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
.nav-line-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--green);
}

.nav-line-tabs .nav-link.active,
.nav-line-tabs .text-active-primary.active {
    color: var(--green) !important;
}

.nav-line-tabs .nav-item .text-active-red.active,
.nav-line-tabs .nav-item .text-active-red:hover:not(.disabled),
.nav-line-tabs .nav-item.show .text-active-red {
    border-bottom-color: var(--red);
}
.nav-line-tabs .text-active-red.active {
    color: var(--red) !important;
}

.nav-line-tabs .nav-item .text-active-blue.active,
.nav-line-tabs .nav-item .text-active-blue:hover:not(.disabled),
.nav-line-tabs .nav-item.show .text-active-blue {
    border-bottom-color: var(--blue-new);
}
.nav-line-tabs .text-active-blue.active {
    color: var(--blue-new) !important;
}

/* TEXTs */
.text-dark {
    color: var(--dark) !important;
}
.text-muted {
    color: var(--gray-6) !important;
}
.text-green,
.text-success,
.text-primary {
    color: var(--green) !important;
}

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

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

.text-red,
.text-danger {
    color: var(--red) !important;
}

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

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

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

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

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

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

.text-blue-new-light {
    color: var(--blue-new-light) !important;
}

.text-blue-new-ultralight {
    color: var(--blue-new-ultralight) !important;
}

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

.text-google-green {
    color: var(--google-green);
}

.text-gray-3 {
    color: var(--gray-3);
}

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

.text-gray-9 {
    color: var(--gray-9);
}

.text-gray-a {
    color: var(--gray-a);
}

/* BORDERs */
.border-default {
    border-color: var(--border-light);
}
.border-light-dark {
    border-color: #f1f1f2;
}

.border-red {
    border-color: var(--red) !important;
}

.border-orange {
    border-color: var(--orange) !important;
}

.border-yellow {
    border-color: var(--yellow) !important;
}

.border-green, .border-success {
    border-color: var(--green) !important;
}

.border-gray-6 {
    border-color: var(--gray-6) !important;
}

.border-gray-b {
    border-color: var(--gray-b) !important;
}

.border-gray-d {
    border-color: var(--gray-d) !important;
}

.border-gray-e {
    border-color: var(--gray-e) !important;
}

.border-blue-new {
    border-color: var(--blue-new) !important;
}

.border-blue-medium-light_35 {
    border-color: rgba(var(--blue-medium-light-rgb), .35) !important;
}

tr.activeRow, tr[data-class=activeRow] {
    background-color: var(--gray-ec) !important;
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover),.075);
}

.hover:hover {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .075);
}

.hover-green:hover {
    box-shadow: inset 0 0 0 9999px rgba(var(--green-rgb), .075);
}

.hover-border-green:hover {
    border-color: var(--green) !important;
}

.hover-border-orange:hover {
    border-color: var(--orange) !important;
}

/* TOASTR custom styles */
.toastr.toastr-success {
    background-color: var(--green);
}
.toastr.toastr-info {
    background-color: var(--blue-medium-light);
}
.toastr.toastr-warning {
    background-color: var(--orange);
}
.toastr.toastr-error {
    background-color: var(--red);
}

table.dataTable.table-hover>tbody>tr:hover>* {
    box-shadow: inset 0 0 0 9999px rgba(var(--blue-new-rgb), .04);
}

label {
    color: var(--gray-6);
}

.form-select.form-select-solid, .form-control.form-control-solid {
    color: var(--gray-dark) !important;
    font-weight: 500 !important;
}

form  .select2-search__field::placeholder {
    color: var(--gray-dark) !important;
}

.EmployeeOnlyAccess {
    opacity: .5;
}

.DeveloperOnlyAccess {
    opacity: .5;
    color: #6ea8fe !important;
}

/* ============================================
   Affiliate Type Color Classes (col-*)
   Universal: badges, text, borders, backgrounds
   ============================================ */

/* CSS variables for affiliate type colors */
:root {
    --col-adhijacker: #971e00;
    --col-brandbidder: #CD4C1E;
    --col-bx: #BA7FD9;
    --col-typosquatter: #FDB538;
    --col-mixed: #971e00;
    --col-potential: #971e00;
    --col-authorized: #0D820D;
    --col-irrelevant: #BBBBBB;
    --col-unrelated: #BBBBBB;
    --col-undefined: #CCCCCC;
}

/* Base color classes — set text color */
.col-adhijacker    { --col-hex: var(--col-adhijacker);    color: var(--col-adhijacker); }
.col-brandbidder   { --col-hex: var(--col-brandbidder);   color: var(--col-brandbidder); }
.col-bx            { --col-hex: var(--col-bx);            color: var(--col-bx); }
.col-typosquatter  { --col-hex: var(--col-typosquatter);  color: var(--col-typosquatter); }
.col-mixed         { --col-hex: var(--col-mixed);         color: var(--col-mixed); }
.col-potential     { --col-hex: var(--col-potential);      color: var(--col-potential); }
.col-authorized    { --col-hex: var(--col-authorized);    color: var(--col-authorized); }
.col-irrelevant    { --col-hex: var(--col-irrelevant);    color: var(--col-irrelevant); }
.col-unrelated     { --col-hex: var(--col-unrelated);     color: var(--col-unrelated); }
.col-undefined     { --col-hex: var(--col-undefined);     color: var(--col-undefined); }

/* Solid badges — dark colors get white text, light colors get dark text */
.badge.col-adhijacker   { background-color: var(--col-adhijacker);   color: #fff; }
.badge.col-brandbidder  { background-color: var(--col-brandbidder);  color: #fff; }
.badge.col-bx           { background-color: var(--col-bx);           color: #fff; }
.badge.col-typosquatter { background-color: var(--col-typosquatter); color: #333; }
.badge.col-mixed        { background-color: var(--col-mixed);        color: #fff; }
.badge.col-potential    { background-color: var(--col-potential);    color: #fff; }
.badge.col-authorized   { background-color: var(--col-authorized);   color: #fff; }
.badge.col-irrelevant   { background-color: var(--col-irrelevant);   color: #333; }
.badge.col-unrelated    { background-color: var(--col-unrelated);    color: #333; }
.badge.col-undefined    { background-color: var(--col-undefined);    color: #333; }

/* Outline badges */
.badge-outline.col-adhijacker,   .badge.badge-outline.col-adhijacker   { background-color: transparent; color: var(--col-adhijacker);   outline: 1px solid var(--col-adhijacker); }
.badge-outline.col-brandbidder,  .badge.badge-outline.col-brandbidder  { background-color: transparent; color: var(--col-brandbidder);  outline: 1px solid var(--col-brandbidder); }
.badge-outline.col-bx,           .badge.badge-outline.col-bx           { background-color: transparent; color: var(--col-bx);           outline: 1px solid var(--col-bx); }
.badge-outline.col-typosquatter, .badge.badge-outline.col-typosquatter { background-color: transparent; color: var(--col-typosquatter); outline: 1px solid var(--col-typosquatter); }
.badge-outline.col-mixed,        .badge.badge-outline.col-mixed        { background-color: transparent; color: var(--col-mixed);        outline: 1px solid var(--col-mixed); }
.badge-outline.col-potential,    .badge.badge-outline.col-potential    { background-color: transparent; color: var(--col-potential);    outline: 1px solid var(--col-potential); }
.badge-outline.col-authorized,   .badge.badge-outline.col-authorized   { background-color: transparent; color: var(--col-authorized);   outline: 1px solid var(--col-authorized); }
.badge-outline.col-irrelevant,   .badge.badge-outline.col-irrelevant   { background-color: transparent; color: var(--col-irrelevant);   outline: 1px solid var(--col-irrelevant); }
.badge-outline.col-unrelated,    .badge.badge-outline.col-unrelated    { background-color: transparent; color: var(--col-unrelated);    outline: 1px solid var(--col-unrelated); }
.badge-outline.col-undefined,    .badge.badge-outline.col-undefined    { background-color: transparent; color: var(--col-undefined);    outline: 1px solid var(--col-undefined); }

/* Background utilities */
.bg-col-adhijacker   { background-color: var(--col-adhijacker) !important; }
.bg-col-brandbidder  { background-color: var(--col-brandbidder) !important; }
.bg-col-bx           { background-color: var(--col-bx) !important; }
.bg-col-typosquatter { background-color: var(--col-typosquatter) !important; }
.bg-col-mixed        { background-color: var(--col-mixed) !important; }
.bg-col-potential    { background-color: var(--col-potential) !important; }
.bg-col-authorized   { background-color: var(--col-authorized) !important; }
.bg-col-irrelevant   { background-color: var(--col-irrelevant) !important; }
.bg-col-unrelated    { background-color: var(--col-unrelated) !important; }
.bg-col-undefined    { background-color: var(--col-undefined) !important; }

/* Border utilities */
.border-col-adhijacker   { border-color: var(--col-adhijacker) !important; }
.border-col-brandbidder  { border-color: var(--col-brandbidder) !important; }
.border-col-bx           { border-color: var(--col-bx) !important; }
.border-col-typosquatter { border-color: var(--col-typosquatter) !important; }
.border-col-mixed        { border-color: var(--col-mixed) !important; }
.border-col-potential    { border-color: var(--col-potential) !important; }
.border-col-authorized   { border-color: var(--col-authorized) !important; }
.border-col-irrelevant   { border-color: var(--col-irrelevant) !important; }
.border-col-unrelated    { border-color: var(--col-unrelated) !important; }
.border-col-undefined    { border-color: var(--col-undefined) !important; }

/* Keyword Distribution colors — reusable across all keyword interfaces */
.kw-dist-combo    { background-color: var(--blue-new); }
.kw-dist-affiliate { background-color: var(--red); }
.kw-dist-typo     { background-color: var(--yellow); }
.kw-dist-seasonal { background-color: #2DB88A; }