/*------- color variables light mode default ----*/
html {
    height: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    --bg: #FCFCFC;
    --bg-panel: white;
    --color-headings: #0077FF;
    --color-text: tomato;
    --color-announcement-card-background: #c2eeff75 !important;
    --color-login-dark-panel-font: #4D7E94;
    --color-text-blue: #080B63;
    --color-bright-blue: #0E90BA !important;
    --color-primary-light: #010811 !important;
    --color-primary-dark: #B2E2F8 !important;
    --color-pagetitle: #010811 !important;
    --color-client-section-input: #FCFCFC !important;
    --color-client-section-input-text: #010811 !important;
    --color-client-section-background: #FCFCFC !important;
    --color-form-label-input: #010811 !important;
    --color-client-section-dropdown: #077398 !important;
    --color-client-section-dropdown-hover: #ffd700 !important;
    --color-client-section-dropdown-text-hover: #010811 !important;
    --color-button-cta: #077398 !important;
    --color-dropdown-border: white !important;
    --color-subclient: #077398 !important;
    --color-dashboard-card-background-split: linear-gradient(to top, #077398 0%, #077398 50%, white 50%, white 100%);
    --color-active-link: #077398 !important;
    --color-active-link-hover: #709CAF !important;
    --color-dashboard-data-frame: white !important;
    --color-frame-header: #077398 !important;
}

    /*------- color variables dark mode ----*/
    html[data-theme=dark] {
        --bg: #010811 !important;
        --bg-panel: #0C1C31 !important;
        --color-headings: #3f465e !important;
        --color-text: #709CAF !important;
        --color-announcement-card-background: #0C1C31 !important;
        --color-login-dark-panel-font: #ADD7EA !important;
        --color-pagetitle: #ADD7EA !important;
        --color-text-blue: #709CAF !important;
        --color-bright-blue: #0eb0e5 !important;
        --color-primary-light: #B2E2F8 !important;
        --color-primary-dark: #010811 !important;
        --color-client-section-input: #2C3E50 !important;
        --color-client-section-input-text: white !important;
        --color-client-section-background: #010811 !important;
        --color-form-label-input: #6991A3 !important;
        --color-client-section-dropdown: #2C3E50 !important;
        --color-client-section-dropdown-hover: #89662F !important;
        --color-client-section-dropdown-text-hover: #ffd700 !important;
        --color-button-cta: #53a3da !important;
        --color-dropdown-border: #709CAF !important;
        --color-subclient: #6991A3 !important;
        --color-dashboard-card-background-split: linear-gradient(to top, #2c3e50 0%, #2c3e50 50%, white 50%, white 100%);
        --color-active-link: #53A3DA !important;
        --color-active-link-hover: #077398 !important;
        --color-dashboard-data-frame: #213140 !important;
        --color-frame-header: rgba(250, 164, 26, 0.4) !important;
    }

/*------- color variables constants ----*/
:root {
    --color-primary-light: #00A5B4;
    --color-primary-dark: #010811;
    --color-secondary-light: #dadada;
    --color-secondary-dark: #121F2D;
    --color-white: #fff;
    --color-offwhite: #dadada;
    --color-black: #000;
    --color-primary-dropdown: white !important;
    --color-frame: #121F2D;
    --color-secondary-darker: #acbc04;
    --color-primary-light-text: #3f465e;
    --color-border: #709CAF;
    --color-info-icon: #53A3DA;
    --color-muted-blue: #709CAF;
    --color-bright-blue: #0eb0e5;
    --color-slate-blue: #2C3E50;
    --color-dk-slate-blue: #213140;
    --color-text-blue: #709CAF;
    --color-dashboard-card-background: #232f3e;
    --color-announcement-card-background: #0C1C31;
    --color-blueviolet: rgba(80, 89, 201, 0.5);
    --color-bullets: #6991A3;
    --color-pagetitle: #6991A3;
    --color-boxshadow: rgba(196, 196, 196, 0.2);
    --color-border-lite: rgba(250, 164, 26, 0.4);
    --color-border-input: #e5e5e5;
    --color-card-bg-dark: rgba(44, 62, 80, 0.42);
    --color-card-bg-light: rgba(184, 208, 217, 0.46);
    --color-login-panel-bg-dark: #08111C;
    --color-login-panel-bg-light: #dadada;
    --color-login-dark-panel: rgba(44, 62, 80, 0.42);
    --color-login-dark-panel-font: rgba(112, 156, 175, 0.92);
    --color-login-input: #6991A3;
    --color-login-glow: #FAA41A;
    --color-login-delighter: #FAA41A;
    --color-active-login: #53A3DA;
    --color-boxshadow-blue: #6991A3;
    --color-golden-border: rgba(250, 164, 26, 0.8);
    --color-gold: #ffd700;
    --color-golden: #89662F;
    --color-goldenrod: #daa520;
    --color-golden-dark: rgba(137, 102, 47, 0.5);
    /* pagination */
    --color-pagination-active: #FAA41A;
    --color-pagination-inactive: #709CAF;
    --color-pagination-border: #709CAF;
    /* side nav colors */
    --color-landing: #077398;
    --color-add-clients: #635BFF !important;
    --color-view-clients: #22D8E4;
    --color-dashboard: #81A91C;
    --color-list-border: rgba(7, 115, 152, 0.25);
    --color-active-page: rgba(7, 115, 152, 0.13);
    --color-active-page-hover: rgba(250, 164, 26, 0.125);
    /* vendor branding colors */
    --color-att: #3F5C99;
    --color-verizon: #1DA0F2;
    --color-tmobile: #DC4A38;
    /* breadcrumb colors */
    --color-inactive-link: #709CAF !important;
    --color-disabled-link: #CBD5E0 !important;
    /* colors alerts*/
    --color-alert-red: rgba(153, 0, 0, 0.5);
    --color-approved-green: #249249;
    /* GRAY range */
    --color-pale-gray: rgba(249, 249, 249, 0.8);
    --color-gray-100: #F7FAFC;
    --color-gray-200: #EDF2F7;
    --color-gray-300: #E2E8F0;
    --color-gray-400: #CBD5E0;
    --color-gray-500: #A0AEC0;
    --color-gray-600: #718096;
    --color-gray-700: #4A5568;
    --color-gray-800: #2D3748;
    --color-gray-900: #1A202C;
    /* misc colors provided for future needs, currently unused */
    --color-red: #e41919;
    --color-orange: #f47631;
    --color-yellow: #ffce02;
    --color-cyan: #27c5c3;
    --color-blue: #43a5de;
    --color-green: #65B044;
}

/*---- END color variables ----*/
/* begin toggle switch for light and dark mode */
.toggle-container {
    position: relative;
    right: 2% !important;
}

    .toggle-container input[type=checkbox] {
        height: 0;
        width: 0;
        visibility: hidden;
    }

    .toggle-container label {
        cursor: pointer;
        text-indent: 64px;
        width: 52px;
        height: 27px;
        background: #709CAF;
        float: right;
        border-radius: 100px;
        position: relative;
    }

        .toggle-container label:after {
            content: " ";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 90px;
            transition: 0.3s;
        }

    .toggle-container input:checked + label {
        background: var(--color-headings);
    }

        .toggle-container input:checked + label:after {
            left: calc(100% - 5px);
            transform: translateX(-100%);
        }

    .toggle-container label:active:after {
        width: 45px;
    }

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
    transition: all 750ms !important;
    transition-delay: 0 !important;
}

.toggleSwitch-position {
    position: relative;
    top: -16px !important;
    right: 32px !important;
}

/* end toggle switch */
/*  login  */
.login-credentials {
    position: relative;
    top: 16px;
    left: calc(60% - 244px);
    padding-left: 
        ;
    color: var(--color-active-login);
    cursor: pointer;
    z-index: 99;
}

a.login-link:hover {
    color: var(--color-gold) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    font-weight: 300 !important;
}

a.login-link {
    color: var(--color-login-link);
    cursor: pointer !important;
}

/* login box content */
.topbar-login {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

body.login-page {
    background-color: #010811 !important;
}

.card-login-dark {
    display: flex;
    background-color: var(--color-login-dark-panel) !important;
    box-sizing: border-box;
    width: 40%;
    min-width: 800px;
    height: 600px;
    padding-bottom: 3em;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 8px var(--color-boxshadow);
}

.bg-dark {
    background-color: #010811 !important;
}

.contact-us {
    margin: 0 20% !important;
}

    .contact-us:hover a {
        color: var(--color-border);
    }

.ccc-card-header {
    color: var(--color-login-dark-panel-font) !important;
}

.login-checkbox label {
    color: var(--color-login-input);
    margin-left: 8px;
}

#RememberMe label {
    color: var(--color-login-input) !important;
    background-color: var(--color-border) !important;
    cursor: pointer;
}

.login-checkbox label:after {
    background: var(--color-gold) !important;
}

.login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 40px;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
    border-radius: 10px;
}

    .login-box form {
        position: absolute;
        left: 20%;
    }

    .login-box h2 {
        margin: 0 0 30px;
        padding: 0;
        color: var(--color-white);
        text-align: center;
    }

    .login-box .user-box {
        position: relative;
    }

        .login-box .user-box input {
            padding: 10px 0;
            font-size: 16px;
            color: var(--color-white);
            margin-bottom: 32px;
            border: none;
            border-bottom: 1px solid var(--color-white);
            outline: none;
            background: transparent;
            width: 360px;
        }

        .login-box .user-box label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 10px 0;
            font-size: 16px;
            color: var(--color-login-input);
            pointer-events: none;
            transition: .5s;
        }

        .login-box .user-box input:focus ~ label,
        .login-box .user-box input:valid ~ label {
            top: -20px;
            left: 0;
            color: var(--color-login-input);
            font-size: 16px;
        }

    .login-box form a {
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        color: var(--color-login-input);
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
        overflow: hidden;
        transition: .5s;
        margin-top: 40px;
        letter-spacing: 4px
    }

    .login-box a:hover {
        background: var(--color-login-glow);
        color: var(--color-white) !important;
        font-weight: 600;
        border-radius: 5px;
        box-shadow: 0 0 5px var(--color-boxshadow-blue), 0 0 25px var(--color-boxshadow-blue), 0 0 50px var(--color-boxshadow-blue), 0 0 100px var(--color-boxshadow-blue);
    }

    .login-box a span {
        position: absolute;
        display: block;
    }

        .login-box a span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--color-login-delighter));
            animation: btn-anim1 3s linear infinite;
        }

@keyframes btn-anim1 {
    0% {
        left: -100%;
    }

    50%, 100% {
        left: 100%;
    }
}

.login-box a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--color-login-delighter));
    animation: btn-anim2 3s linear infinite;
    animation-delay: .55s
}

@keyframes btn-anim2 {
    0% {
        top: -100%;
    }

    50%, 100% {
        top: 100%;
    }
}

.login-box a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, var(--color-login-delighter));
    animation: btn-anim3 3s linear infinite;
    animation-delay: .65s
}

@keyframes btn-anim3 {
    0% {
        right: -100%;
    }

    50%, 100% {
        right: 100%;
    }
}

.login-box a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, var(--color-login-delighter));
    animation: btn-anim4 3s linear infinite;
    animation-delay: .75s
}

@keyframes btn-anim4 {
    0% {
        bottom: -100%;
    }

    50%, 100% {
        bottom: 100%;
    }
}

.contact-us {
    position: relative;
    top: 50%;
    margin: 0 auto;
    color: var(--color-text-blue);
}

    .contact-us a {
        color: var(--color-active-link);
    }

.interior-login-input {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    width: 512px;
    height: 32px;
    background: var(--color-pale-gray);
    border: 1px solid var(--color-gray-300);
    border-radius: 4px;
    margin: 0 auto;
}

.login-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    text-align: center;
    width: 512px;
    height: 34px;
    color: var(--color-offwhite);
    background: var(--color-muted-blue);
    border-radius: 8px;
    flex: none;
    order: 3;
    align-self: stretch;
    margin: 0 auto;
}

.interior-login-panel-bg-dark {
    background-color: var(--color-login-panel-bg-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: center;
    padding: 24px;
    gap: 24px;
    width: 560px;
    height: 440px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.interior-login-panel-bg-light {
    /*background-color:var(--color-login-panel-bg-light);*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    gap: 24px;
    width: 560px;
    height: 366px;
    margin: 0 auto;
}

/* end new login box styles */
/* body, page elements, and main content */
body {
    background-color: var(--bg);
}

.container-fluid {
    background-color: var(--bg);
    display: grid;
    grid-template-columns: 100% auto;
    grid-template-rows: auto auto;
    grid-template-areas: "title switch""content content";
    padding: 0 !important;
}

#body-row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    height: 100%;
    flex: 1;
}

.topbar {
    background-color: var(--color-frame);
    height: 80px;
    border-bottom: var(--color-border) 8px solid;
    float: left;
    display: block;
}

/*  svg sun for light switch - instead of words, used as a small delighter  */
.sun {
    position: relative;
    left: 10%;
    margin-left: 16px;
    z-index: 9;
}

nav.c4 {
    --bs-breadcrumb-divider: '>';
}

li.c3 {
    position: absolute;
    top: -5px;
    right: 0;
}

li.c2 {
    position: relative;
    margin-left: 64px;
    color: var(--color-white);
    font-size: 24px;
    top: 16px;
}

li.c1 {
    margin-left: 80px;
}

.topbar li {
    display: inline;
}

.topbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer {
    background-color: var(--color-frame);
    height: 4em;
    border-top: 8px solid var(--color-border);
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 555;
}

    .footer h5 {
        left: 32px;
        position: relative;
        font-size: 16px;
        margin: 8px;
        padding: .71em;
        color: var(--color-offwhite);
    }

.menu-icon {
    z-index: 100;
    position: absolute;
    left: 24px;
    top: 8px;
    font-size: 24px !important;
    color: var(--color-white);
}

#collapse-icon {
    left: 16px;
    top: 8px;
    height: 32px;
    position: absolute;
    z-index: 101;
    font-size: 24px;
}

.menu-collapsed {
    margin-left: 16px;
}

.landing-icon-color {
    color: var(--color-landing);
    font-size: 32px !important;
}

.addclients-icon-color {
    color: var(--color-add-clients);
    font-size: 32px !important;
}

.viewclients-icon-color {
    color: var(--color-view-clients);
    font-size: 32px !important;
}

.dashboards-icon-color {
    color: var(--color-dashboard);
    font-size: 32px !important;
}

.sidebar {
    background-color: var(--color-frame);
}

#sidebar-container {
    height: 280vh;
    background-color: var(--color-frame);
    padding: 0;
    z-index: 2;
}

.sidebar-expanded {
    width: 230px !important;
}

.sidebar-collapsed {
    width: 88px !important;
}

#sidebar-container .list-group a {
    height: 54px;
    color: var(--color-white) !important;
    margin-left: 8px;
}

.list-group {
    margin-top: 8px;
}

.list-group-item {
    margin-top: 4px;
    border-bottom: 2px solid var(--color-list-border) !important;
}

    .list-group-item.active {
        border-color: var(--color-list-border) !important;
        color: var(--color-white) !important;
    }

        .list-group-item.active .menu-collapsed {
            border-color: var(--color-list-border) !important;
            color: var(--color-white) !important;
        }

/* ----------| Submenu item*/
#sidebar-container a:hover {
    border-left: 8px solid var(--color-border) !important;
    border-radius: 4px;
    background-color: var(--color-active-page-hover) !important;
}

#sidebar-container .active {
    border-left: 8px solid var(--color-border) !important;
    border-radius: 4px;
    background-color: var(--color-active-page) !important;
}

.sidebar-border {
    border-right: 8px solid var(--color-border);
    z-index: 106;
}

#sidebar-container .list-group .sidebar-submenu a:hover {
    border-left: 8px solid var(--color-border);
    border-radius: 4px;
}

#sidebar-container .list-group .sidebar-submenu a {
    height: 54px;
    padding-left: 40px;
}

.sidebar-submenu {
    font-size: 0.9rem;
}

/* ----------| Separators */
.sidebar-separator-title {
    background-color: var(--color-white);
}

.sidebar-separator {
    background-color: var(--color-list-border);
}

.logo-separator {
    background-color: var(--color-frame);
    height: 60px;
}


.landing-page {
    display: flex;
    /* use the flex model */
    min-height: 100%;
    flex-direction: column;
}

.pending-status {
    color: var(--color-border) !important;
    font-weight: 900;
    justify-content: center;
    font-style: italic;
}

.sidebar-container {
    background-color: var(--color-frame) !important;
}

.list-group-item-action {
    color: var(--color-border);
    width: 90% !important;
}

.list-group-item {
    background-color: var(--color-frame) !important;
}

    .list-group-item a:hover {
        opacity: .3;
    }

/*** breadcrumbs ***/
.breadcrumb a {
    text-decoration: none !important;
    color: var(--color-active-link) !important;
    cursor: pointer;
}

.breadcrumb {
    margin-top: 24px;
    margin-left: 48px;
}

    .breadcrumb li.last a {
        color: var(--color-gray-600) !important;
        cursor: default;
    }

.breadcrumb-item li:after {
    padding: 0 0.25em 0 0.5em;
    color: var(--color-gray-500);
}

.breadcrumb li.last:after {
    content: '';
    /*color:var(--color-inactive-link);*/
}

/*** end breadcrumbs ***/
/* page styles */
.landing-page,
.login-page {
    min-height: 80vh;
}

h1 {
    margin-left: 48px;
    color: var(--color-pagetitle);
}

p {
    margin-left: 48px;
}

h3 {
    color: var(--color-bullets);
    font-size: 1.1em;
}

.headline-cta {
    color: var(--color-active-link);
    text-decoration: none;
}

    .headline-cta:hover {
        color: var(--color-active-link-hover);
        text-decoration: none;
    }

    .headline-cta:active {
        color: var(--color-border);
        text-decoration: none;
    }

.fpo-text {
    font-size: 1em;
    font-style: italic;
}

.card {
    z-index: 1 !important;
    /*border: 0!important;*/
}

.card-body {
    box-sizing: border-box;
    width: 95% !important;
    padding-bottom: 3em !important;
    margin: 36px !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: 24px !important;
    flex: 1;
    top: 2%;
    background: var(--color-announcement-card-background) !important;
}

.responsive-width {
    font-size: 3vw;
}

/* spacers */
.spaced-out {
    margin-bottom: 40px;
}

.spacer-account {
    padding-right: 8px !important;
}

.spacer-icon {
    padding-right: 8px !important;
}

.spacer-dashboard {
    padding-right: 40px !important;
}

.spacer-left {
    padding-left: .5em;
    font-size: 32px;
}

hr {
    width: 98%;
    border: 2px solid var(--color-border);
    border-radius: 24px;
}

/* dashboard cta on landing */
#dashboard-cta-shortcut {
    position: absolute;
    width: max-content;
    height: 54px;
    background: var(--color-bright-blue);
    font-size: 1vw;
    color: var(--color-primary-dark);
    border-radius: 8px;
    border: 2px solid var(--color-border) !important;
    font-family: helvetica, arial, sans-serif;
    font-weight: 600;
    right: 8px;
    cursor: pointer;
}

    #dashboard-cta-shortcut:hover {
        background-color: var(--color-golden-dark);
        color: var(--color-white);
        cursor: pointer;
    }

    #dashboard-cta-shortcut:active {
        background-color: var(--color-bright-blue);
        color: var(--color-white);
        cursor: pointer;
    }

.dashboard-shortcut-position {
    margin-top: 16px;
    margin-right: 32px;
}

.dashboard-sizer-icon {
    font-size: 28px;
    margin-right: 8px;
}

.datatable-body {
    margin-left: 36px;
    border: 2px solid var(--color-border);
    border-radius: 24px !important;
    flex: 1;
    border-width: 8px;
}

#max-spam-score,
#spam-score-summary {
    padding-top: 24px;
}

/** landing page **/
.cta-icon-landing {
    font-size: 64px !important;
    margin-top: 12px;
    margin-left: 2em;
}

.landing-subheader {
    margin-left: 28px;
    padding-top: 8px;
    padding-bottom: 16px;
}

.addclients-icon-landing {
    color: var(--color-add-clients);
    cursor: pointer;
}

    .addclients-icon-landing:hover,
    .viewclients-icon-landing:hover,
    .dashboard-icon-landing:hover {
        color: var(--color-landing);
        cursor: pointer;
    }

    .addclients-icon-landing:active,
    .viewclients-icon-landing:active,
    .dashboard-icon-landing:active {
        color: var(--color-border);
        cursor: pointer;
    }

.viewclients-icon-landing {
    color: var(--color-view-clients);
    cursor: pointer;
}

.dashboard-icon-landing {
    color: var(--color-dashboard);
    cursor: pointer;
}

/* bullets created for phase 2 landing page */
.card-body ul {
    color: var(--color-bullets);
}

.card-body.no-bullet {
    list-style-type: none;
}

.card-body ul {
    list-style-type: none;
}

.card-line-item {
    color: var(--color-primary-light) !important;
    margin-left: 2em;
}

.card-line-header {
    color: var(--color-bright-blue) !important;
}

.ccc-card-header {
    color: var(--color-primary-light);
    font-weight: 300 !important;
    font-size: 32px;
    line-height: 37px;
    text-align: center;
    padding-bottom: 1em;
    position: absolute;
    top: 5%;
}

.ccc-landing-header {
    color: var(--color-primary-light);
    font-weight: 400 !important;
    font-size: 32px;
    line-height: 37px;
    text-align: left;
    padding-bottom: 1em;
    margin-left: 36px;
}

.card-subheader {
    color: var(--color-primary-light);
    margin-left: 2em;
}

/************* tool tips css only to not conflict with toggle modes ***************/
/* START TOOLTIP STYLES  - the em here is based on 16px font - all is on an 8pt grid  */
[tooltip] {
    position: relative;
    z-index: 200;
}

    /* Applies to all tooltips */
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        font-size: .9em;
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }

    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        z-index: 1001;
        /* keep it on top */
    }

    [tooltip]::after {
        content: attr(tooltip);
        /* magic! */
        font-family: Helvetica, Arial, sans-serif;
        text-align: center;
        z-index: 2001;
        /* 
Let the content set the size of the tooltips 
*/
        min-width: 3em;
        max-width: 55em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: var(--color-border);
        color: var(--color-white);
        z-index: 9999;
        /* it's good to be on top */
    }

    /* Make the tooltips respond to hover */
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}

/* START TOOLTIP2 -in use for menu toggle - the em here is based on 16px font - all is on an 8pt grid  */
[tooltip2] {
    position: relative;
    top: 16px;
}

    /* Applies to all tooltips */
    [tooltip2]::before,
    [tooltip2]::after {
        text-transform: none;
        font-size: .9em;
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
        z-index: 9999;
    }

    [tooltip2]::before {
        content: '';
        border: 5px solid transparent;
        z-index: 9999;
        /* keep it on top */
    }

    [tooltip2]::after {
        content: attr(tooltip2);
        font-family: Helvetica, Arial, sans-serif;
        text-align: center;
        min-width: 8em;
        max-width: 150em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1ch 1.5ch;
        border-radius: .3ch;
        box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
        background: var(--color-border);
        color: var(--color-white);
        z-index: 9999;
        /* it's good to be on top */
    }

    /* Make the tooltips respond to hover */
    [tooltip2]:hover::before,
    [tooltip2]:hover::after {
        display: block;
        left: 24px;
    }

/* don't show empty tooltips */
[tooltip2='']::before,
[tooltip2='']::after {
    display: none !important;
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: var(--color-border);
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

/* FLOW: DOWN */
[tooltip2][flow^="down"]::before {
    top: 110%;
    right: calc(0em - 5px);
    border-top-width: 0;
    border-bottom-color: var(--color-border);
}

[tooltip2][flow^="down"]::after {
    left: calc(100% + 64px);
}

[tooltip2][flow^="down"]::before,
[tooltip2][flow^="down"]::after {
    right: -8%;
    transform: translate(-50%, .5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

/* tooltips hover for any direction */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip2][flow^="down"]:hover::before,
[tooltip2][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
}

/************* end tool tips css only to not conflict with toggle modes ***************/
.ccc-logo {
    position: relative;
    margin-left: 80px;
    top: 16px;
    z-index: 44;
}

.portal-header {
    position: relative;
    top: -16px;
    margin-left: 32px;
}

/************* toggle light dark modes ***************/
.lightSwitch-position {
    position: absolute;
    top: 8px;
    right: 0;
}

/* used in first design iteration, can be used next to toggle switch to illustrate light/dark mode intentions */
#lightSwitch {
    transform: scale(1.4);
    background-color: var(--color-border) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--color-offwhite) !important;
}

label.form-check-input {
    background-color: var(--color-border)important;
}

    label.form-check-input:checked {
        background-color: var(--color-border) !important;
        border-color: var(--color-border) !important;
    }

.form-check-input:checked {
    background-color: var(--color-offwhite) !important;
    border-color: var(--color-border) !important;
}

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

/*-- ---- ---- DATA CHART CLIENT VIEW  wip ------ ------ --*/
#ccc-datachart {
    border: 2px var(--color-goldenrod) !important;
    border-radius: 24px;
    background-color: var(--color-goldenrod);
    color: white;
    padding: 2em;
}

#client-data table {
    padding-bottom: 3em !important;
    margin: 36px !important;
    flex: 1;
    top: 2%;
    width: 98% !important;
    background-color: var(--color-slate-blue) !important;
    border-radius: 32px !important;
}

table > :not(:first-child) > :first-child > * {
    border-bottom-color: var(--color-goldenrod) !important;
    background-color: var(--color-border) !important;
}

table > :not(caption) > * > * {
    background-color: var(--color-slate-blue) !important;
}

td {
    color: white;
}

#account-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 8px;
    list-style-type: none;
}

#download-cta {
    position: relative;
    height: 100%;
    background: var(--color-golden-dark);
    border-radius: 8px;
    color: var(--color-white);
    padding: 8px 10px 10px 8px;
}

#edit-cta {
    position: relative;
    height: 100%;
    left: 5%;
    top: 0px;
    background: var(--color-blueviolet);
    border-radius: 8px;
    color: var(--color-white);
    padding: 8px 10px 10px 8px;
}

#delete-cta {
    position: relative;
    height: 100%;
    left: 8%;
    top: 0px;
    background: var(--color-alert-red);
    border-radius: 8px;
    color: var(--color-white);
    padding: 8px 10px 10px 8px;
}

.approved-status {
    color: var(--color-approved-green) !important;
    font-weight: 900;
    position: relative;
    justify-content: center;
}

#clients-header tr {
    position: relative;
    height: 54px;
    color: var(--color-white);
    border-radius: 8px;
    background: var(--color-border);
}

.phone-numbers-data {
    max-width: 104px !important;
}

.monthly-call-data {
    max-width: 104px !important;
}

.fladgged-data {
    max-width: 104px !important;
    width: 77px !important;
}

.table > thead {
    border-width: thick;
    border-radius: 8px !important;
}

/*-- custom checkbox  to go around bootstrap fill custom checkbox override --*/
.custom-control.fill-checkbox .fill-control-input {
    display: none;
}

    .custom-control.fill-checkbox .fill-control-input:checked ~ .fill-control-indicator {
        background-color: var(--color-border);
        border-color: var(--color-border);
        background-size: 80%;
    }

.custom-control.fill-checkbox .fill-control-indicator {
    border-radius: 3px;
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    transition: 0.3s;
    top: 1px;
    right: 8px;
    background: transparent;
    background-size: 0%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}

/*-- Add Clients page content  wip --*/
#add-client {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    height: 64px;
    width: 90%;
    background-color: var(--color-border);
    color: var(--color-white);
    position: relative;
    top: 8px;
    margin-left: 32px;
    font-weight: 600;
}

    #add-client:hover {
        background-color: var(--color-gold);
        color: var(--color-dk-slate-blue);
        cursor: pointer;
    }

    #add-client:active {
        background-color: var(--color-bright-blue);
        color: var(--color-white);
        cursor: pointer;
    }

.client-section-intake {
    border: 1.5px solid var(--color-border);
    border-radius: 24px;
    width: 95%;
    /*height: 100%;*/
    background-color: var(--color-client-section-background) !important;
    margin-left: 36px;
    padding-bottom: 40px;
}

.client-section-intake-short-dark {
    position: relative;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-client-section-input) !important;
    height: 44px;
    width: 90%;
    margin-left: 40px;
    color: var(--color-client-section-input-text) !important;
}

.client-section-intake-short-edit {
    position: relative;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    height: 44px;
    width: 90%;
    margin-left: 40px;
    color: var(--color-client-section-input-text) !important;
}

.client-section-input-mini {
    position: relative;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-client-section-input) !important;
    height: 44px;
    width: 80%;
    margin-left: 40px;
    color: var(--color-client-section-input-text) !important;
}

.client-section-input-mini-edit {
    position: relative;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    height: 44px;
    width: 80%;
    margin-left: 40px;
    color: var(--color-client-section-input-text) !important;
}

.client-section-input-label {
    position: relative;
    margin-left: 40px;
    color: var(--color-form-label-input);
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 18px;
}

.client-section-input {
    position: relative;
    border: 1.5px solid var(--color-border) !important;
    border-radius: 8px;
    background-color: var(--color-client-section-input) !important;
    height: 44px;
    width: 95%;
    margin-left: 40px;
    color: var(--color-client-section-input-text) !important;
}

.client-section-input-edit {
    position: relative;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    height: 44px;
    width: 95%;
    margin-left: 40px;
    color: var(--color-client-section-input-text) !important;
}

.client-edit-state {
    color: var(--color-gray-600) !important;
    color: var(--color-client-section-input-text) !important;
}

.client-edit-dropdown {
    list-style: none;
    margin-left: 8px
}

.basic-upload-information {
    position: relative;
    margin-top: 36px;
    margin-left: 40px;
    color: var(--color-form-label-input);
    padding-bottom: 40px;
}

#download-template,
#upload-template {
    background: var(--color-button-cta);
    color: var(--color-white);
    border-radius: 8px;
    width: 160px;
    height: 40px;
    margin-left: 8px;
    position: relative;
    top: -10px;
}

    #download-template:hover,
    #upload-template:hover {
        background-color: var(--color-gold);
        color: var(--color-secondary-dark);
        cursor: pointer;
    }

    #download-template:active,
    #upload-template:active {
        background-color: var(--color-bright-blue);
        color: var(--color-white);
        cursor: pointer;
    }

.download-cta-box {
    border: 2px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-form-label-input);
    padding: 1em;
    width: 90%;
    margin-left: 40px;
}

.upload-cta-box {
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    color: var(--color-form-label-input);
    padding: 1em;
    width: 90%;
    margin-left: 40px;
}

.download-info {
    margin-left: 40px;
    margin-top: 8px;
    width: 88%;
}

.info-icon-color {
    color: var(--color-info-icon);
}

.download-cta-instructions {
    margin-left: 40px;
    width: 300px;
    display: inline-block;
}

.client-section-break {
    position: relative;
    height: 80px;
}

.subclient {
    color: var(--color-subclient);
    font-size: 18px;
    font-weight: 500;
    margin-left: 36px;
}

.formframe-header {
    height: 40px;
    left: 0px;
    top: 0px;
    background: var(--color-border);
    border-bottom: 1.5px solid var(--color-border);
    border-radius: 20px 20px 0px 0px;
}

.formframe-header-text {
    font-weight: 600;
    line-height: 28px;
    color: var(--color-white);
    position: relative;
    margin-left: 36px !important;
    top: 4px !important;
    font-size: 24px;
}

/*-- dropdown menu --*/
.subclient-dropdown > ul {
    list-style: none !important;
    padding: 0;
    margin: 0 0 20px 0;
    position: relative;
}

.subclient-list {
    list-style: none !important;
    margin-left: 36px !important;
}

.dropdown {
    position: relative;
}

    .dropdown a {
        text-decoration: none;
    }

    .dropdown [data-toggle="dropdown"] {
        display: block;
        color: var(--color-white) !important;
        background: var(--color-client-section-dropdown);
        border: 2px solid var(--color-border);
        /* Shadow */
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        padding: 10px;
    }

        .dropdown [data-toggle="dropdown"]:hover {
            background: var(--color-border) !important;
        }

        .dropdown [data-toggle="dropdown"]:before {
            position: absolute;
            display: block;
            content: '\25BC';
            font-size: 0.8em;
            color: var(--color-white);
            top: 16px;
            right: 10px;
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            -moz-transition: -moz-transform 0.6s;
            -o-transition: -o-transform 0.6s;
            -webkit-transition: -webkit-transform 0.6s;
            transition: transform 0.6s;
        }

    .dropdown > .dropdown-menu {
        max-height: 0;
        overflow: hidden;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -moz-transition: max-height 0.6s ease-out;
        -o-transition: max-height 0.6s ease-out;
        -webkit-transition: max-height 0.6s ease-out;
        transition: max-height 0.6s ease-out;
        animation: hideAnimation 0.4s ease-out;
        -moz-animation: hideAnimation 0.4s ease-out;
        -webkit-animation: hideAnimation 0.4s ease-out;
    }

        .dropdown > .dropdown-menu li {
            padding: 0;
            border-bottom: 1px solid var(--color-dropdown-border);
            color: var(--color-primary-dropdown) !important;
        }

            .dropdown > .dropdown-menu li a {
                display: block;
                color: var(--color-primary-dropdown) !important;
                background: var(--color-client-section-dropdown);
                padding: 10px 10px;
            }

                .dropdown > .dropdown-menu li a:hover {
                    background: var(--color-client-section-dropdown-hover) !important;
                    color: var(--color-client-section-dropdown-text-hover) !important;
                }

    .dropdown > input[type="checkbox"] {
        opacity: 0;
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

        .dropdown > input[type="checkbox"]:checked ~ .dropdown-menu {
            max-height: 9999px;
            display: block;
            border: 2px solid var(--color-border);
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            animation: showAnimation 0.5s ease-in-out;
            -moz-animation: showAnimation 0.5s ease-in-out;
            -webkit-animation: showAnimation 0.5s ease-in-out;
            -moz-transition: max-height 2s ease-in-out;
            -o-transition: max-height 2s ease-in-out;
            -webkit-transition: max-height 2s ease-in-out;
            transition: max-height 2s ease-in-out;
        }

        .dropdown > input[type="checkbox"]:checked + a[data-toggle="dropdown"]:before {
            -moz-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
            -moz-transition: -moz-transform 0.6s;
            -o-transition: -o-transform 0.6s;
            -webkit-transition: -webkit-transform 0.6s;
            transition: transform 0.6s;
        }

@keyframes showAnimation {
    0% {
        -moz-transform: scaleY(0.1);
        -ms-transform: scaleY(0.1);
        -webkit-transform: scaleY(0.1);
        transform: scaleY(0.1);
    }

    40% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
    }

    60% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
    }

    100% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -moz-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02);
    }

    100% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@-moz-keyframes showAnimation {
    0% {
        -moz-transform: scaleY(0.1);
        -ms-transform: scaleY(0.1);
        -webkit-transform: scaleY(0.1);
        transform: scaleY(0.1);
    }

    40% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
    }

    60% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
    }

    100% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -moz-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02);
    }

    100% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@-webkit-keyframes showAnimation {
    0% {
        -moz-transform: scaleY(0.1);
        -ms-transform: scaleY(0.1);
        -webkit-transform: scaleY(0.1);
        transform: scaleY(0.1);
    }

    40% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
    }

    60% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
    }

    100% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -moz-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02);
    }

    100% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes hideAnimation {
    0% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }

    60% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -moz-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02);
    }

    100% {
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
}

@-moz-keyframes hideAnimation {
    0% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }

    60% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -moz-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02);
    }

    100% {
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
}

@-webkit-keyframes hideAnimation {
    0% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }

    60% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -moz-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02);
    }

    100% {
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
}

/*-- end Add Clients page content --*/
/* dashboards */
.card-body-dashboard {
    box-sizing: border-box;
    padding-bottom: 3em;
    margin: 36px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    width: 200px;
    height: 120px;
}

.dashboard-frame-header {
    height: 40px;
    left: 0px;
    top: 0px;
    background: var(--color-frame-header);
    /* background: darkgoldenrod;*/
    border-bottom: 1px solid var(--color-border);
    border-radius: 20px 20px 0px 0px;
}

.dashboard-header-text {
    font-weight: 400;
    line-height: 28px;
    color: var(--color-white);
    position: relative;
   /* margin-left: 36px !important;*/
    top: 4px !important;
}

.dashboard-frame-datachart {
    border: 2px solid var(--color-border);
    border-radius: 24px;
    width: 100%;
    height: 100%;
    background-color: var(--color-dashboard-data-frame);
  /*  margin-left: 36px;*/
    padding-bottom: 24px;
}

.dashboard-frame-datachart-flagged {
    border: 2px solid var(--color-border);
    border-radius: 24px;
    width: 100%;
    height: 70%;
    background-color: var(--color-dashboard-data-frame);
    /*background: white;*/
   /* margin-left: 36px;*/
    padding-bottom: 24px;
}

.dashboard-section-break {
    position: relative;
    height: 40px;
}

.dashboard-chart-break {
    position: relative;
    width: 5%;
}

.dashboard-expand-icon-position {
    position: relative;
    margin-left: calc(100% - 32px);
    top: -20px !important;
}

a.dashboard-expand-icon-link {
    color: var(--color-white) !important;
}

    a.dashboard-expand-icon-link:hover {
        color: var(--color-gold) !important;
        cursor: pointer;
    }

.dashboard-data-card-info {
    box-sizing: border-box;
    max-width: 160px;
    background: var(--color-dashboard-card-background-split) !important;
    width: 95%;
    padding-bottom: 3em;
    margin-left: 36px;
    border: 1.5px solid var(--color-border) !important;
    border-radius: 24px;
    flex: 1;
    top: 2%;
}

.dashboard-data-card-header-textstyle {
    margin: 0 auto;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-dashboard-card-background);
}

.dashboard-data-card-data-info-textstyle {
    margin: 0 auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    position: relative;
    top: 32px;
}

.dashboard-data-card-image-fit {
    max-width: 100%;
    max-height: 100%;
    width: 150px !important;
    height: 50px !important;
    object-fit: contain !important;
    margin-left: -8px;
}

.dashboard-data-flagged-source-fpo {
    max-width: 100%;
    max-height: 100%;
    width: 425px;
    height: 540px;
    margin: 0 auto !important;
    object-fit: contain !important;
}

.dashboard-data-flagged-carriers-fpo {
    max-width: 100%;
    max-height: 100%;
    width: 794px !important;
    height: 540px;
    margin: 0 auto !important;
    object-fit: contain !important;
    padding-top: 32px;
}

.dashboard-data-spam-score-summary-fpo {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    width: 540px !important;
    object-fit: contain !important;
}

.dashboard-data-spam-max-score-summary-fpo {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    width: 540px !important;
    object-fit: contain !important;
}

.dashboard-container-height {
    height: 520px;
}

/* ----- ----- view clients wip ------ -------- */
.container {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

@media (max-width: 90em) {
    .login-credentials {
        left: 10% !important;
        padding-right: 24px;
    }
}

@media (min-width: 95em) {
    .container {
        max-width: 95%;
    }

    .login-credentials {
        left: calc(20% - 40px !important);
        padding-left: 24px;
    }
}

.responsive-table {
    width: 100%;
    height: auto;
    border-spacing: 0;
    border-radius: 16px;
}

@media (min-width: 48em) {
    .responsive-table {
        font-size: 0.9em;
    }
}

@media (min-width: 62em) {
    .responsive-table {
        font-size: 1em;
    }

    .login-credentials {
        left: calc(20% - 24px !important);
        padding-right: 24px;
    }
}

.responsive-table thead {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

@media (min-width: 48em) {
    .responsive-table thead {
        position: relative;
        clip: auto;
        height: auto;
        width: auto;
        overflow: auto;
    }
}

.responsive-table thead th {
    background-color: var(--color-border);
    border: 2px solid var(--color-border);
    font-weight: normal;
    text-align: center;
    color: var(--color-white);
}

    .responsive-table thead th:first-of-type {
        text-align: left;
    }

.responsive-table tbody,
.responsive-table tr,
.responsive-table th,
.responsive-table td {
    display: block;
    padding: 0;
    text-align: left;
    white-space: normal;
}

@media (min-width: 48em) {
    .responsive-table tr {
        display: table-row;
    }
}

.responsive-table th,
.responsive-table td {
    padding: 0.5em;
    vertical-align: middle;
}

@media (min-width: 30em) {

    .responsive-table th,
    .responsive-table td {
        padding: 0.75em 0.5em;
    }
}

@media (min-width: 48em) {

    .responsive-table th,
    .responsive-table td {
        display: table-cell;
        padding: 0.5em;
    }
}

@media (min-width: 62em) {

    .responsive-table th,
    .responsive-table td {
        padding: 0.75em 0.5em;
    }
}

@media (min-width: 75em) {

    .responsive-table th,
    .responsive-table td {
        padding: 0.75em;
    }
}

.responsive-table caption {
    margin-bottom: 1em;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

@media (min-width: 48em) {
    .responsive-table caption {
        font-size: 1.5em;
    }
}

.responsive-table tfoot {
    font-size: 0.8em;
    font-style: italic;
    background-color: var(--color-border);
    height: .05em;
}

@media (min-width: 62em) {
    .responsive-table tfoot {
        font-size: 0.9em;
    }
}

@media (min-width: 48em) {
    .responsive-table tbody {
        display: table-row-group;
    }
}

.responsive-table tbody tr {
    margin-bottom: 1em;
}

@media (min-width: 48em) {
    .responsive-table tbody tr {
        display: table-row;
        border-width: 1px;
    }
}

.responsive-table tbody tr:last-of-type {
    margin-bottom: 0;
}

@media (min-width: 48em) {
    .responsive-table tbody tr:nth-of-type(even) {
        background-color: rgba(0, 0, 0, 0.12);
    }
}

.responsive-table tbody th[scope=row] {
    background-color: #121F2D;
    color: white;
}

.responsive-table tbody td {
    background-color: #121F2D;
    color: white;
}

@media (min-width: 30em) {
    .responsive-table tbody th[scope=row] {
        border-left: 2px solid var(--color-border);
        border-bottom: 2px solid var(--color-border);
    }
}

@media (min-width: 48em) {
    .responsive-table tbody th[scope=row] {
        text-align: left;
    }
}

.responsive-table tbody td {
    text-align: right;
}

@media (min-width: 48em) {
    .responsive-table tbody td {
        border-left: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        text-align: center;
    }
}

@media (min-width: 48em) {
    .responsive-table tbody td:last-of-type {
        border-right: 1px solid var();
    }
}

.responsive-table tbody td[data-type=currency] {
    text-align: right;
}

.responsive-table tbody td[data-title]:before {
    content: attr(data-title);
    float: left;
    font-size: 0.8em;
    color: rgba(0, 0, 0, 0.54);
}

@media (min-width: 30em) {
    .responsive-table tbody td[data-title]:before {
        font-size: 0.9em;
    }
}

@media (min-width: 48em) {
    .responsive-table tbody td[data-title]:before {
        content: none;
    }
}

#account-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 16px;
    list-style-type: none;
}

/* pagination wip */
li.page-item,
.pagination {
    color: var(--color-pagination-inactive);
    border-radius: 4px;
    margin-left: 16px;
}

a.page-link {
    color: var(--color-pagination-active) !important;
}

.page-item.active .page-link {
    z-index: 1;
    color: var(--color-pagination-active);
    background-color: transparent;
    border-color: var(--color-pagination-active);
}

.page-link:hover {
    background-color: transparent;
    border-color: var(--color-pagination-active) !important;
}

.page-item .page-link {
    z-index: 1;
    color: var(--color-pagination-inactive);
    background-color: transparent;
    border-color: var(--color-pagination-border);
    margin: 4px;
    border-radius: 4px;
}

.page-item.disabled .page-link {
    background-color: transparent;
    color: var(--color-pagination-inactive);
    border-color: var(--color-pagination-border);
}

.amount-shown {
    position: relative;
    top: 16px;
}