:root {

    --fc-button-bg-color: var(--primary-700);
    --fc-button-active-border-color: var(--primary-700);
    /* --fc-button-hover-bg-color: #361616; */
    --fc-button-text-color: var(--grey-600);
    --fc-button-bg-color: var(--grey-100);
    --fc-button-border-color: var(--grey-200);
    --fc-button-bg-color: var(--grey-50);
    
    --body-font: 'Inter', sans-serif;
    --body-font-mono: 'Roboto Mono', var(--body-font);

    --base-white: #FFFFFF;
    --base-black: #000000;

    --grey-25: #FCFCFD;
    --grey-50: #F9FAFB;
    --grey-100: #F2F4F7;
    --grey-200: #EAECF0;
    --grey-300: #D0D5DD;
    --grey-400: #98A2B3;
    --grey-500: #667085;
    --grey-600: #475467;
    --grey-700: #344054;
    --grey-800: #1D2939;
    --grey-900: #101828;

    --primary-25: #E6F1FE;
    --primary-50: #DAEAFD;
    --primary-100: #CDE3FD;
    --primary-200: #B4D6FB;
    --primary-300: #9BC8FA;
    --primary-400: #76B3F8;
    --primary-500: #509EF7;
    --primary-600: #0575F3;
    --primary-700: #045EC2;
    --primary-800: #034C9E;
    --primary-900: #02356D;

    --error-25: #FFFBFA;
    --error-50: #FEF3F2;
    --error-100: #FEE4E2;
    --error-200: #FECDCA;
    --error-300: #FDA29B;
    --error-400: #F97066;
    --error-500: #F04438;
    --error-600: #D92D20;
    --error-700: #B42318;
    --error-800: #912018;
    --error-900: #7A271A;

    --warning-25: #FFFCF5;
    --warning-50: #FFFAEB;
    --warning-100: #FEF0C7;
    --warning-200: #FEDF89;
    --warning-300: #FEC84B;
    --warning-400: #FDB022;
    --warning-500: #F79009;
    --warning-600: #DC6803;
    --warning-700: #B54708;
    --warning-800: #93370D;
    --warning-900: #7A2E0E;

    --success-25: #F6FEF9;
    --success-50: #ECFDF3;
    --success-100: #D1FADF;
    --success-200: #A6F4C5;
    --success-300: #6CE9A6;
    --success-400: #32D583;
    --success-500: #12B76A;
    --success-600: #039855;
    --success-700: #027A48;
    --success-800: #05603A;
    --success-900: #054F31;


    --attention-50: #f4f9ff;
    --attention-200: #0575F3;


    --primary-to-grey-240deg: linear-gradient(-120deg,rgba(71, 84, 103, 0.5),rgba(4, 94, 194, 0.8));
    
    --primary-gradient-left-to-right: linear-gradient(to right, var(--primary-500) , var(--primary-700));
    --primary-gradient-600-500-90: linear-gradient(90deg, var(--primary-600) 0%, var(--primary-500) 100%);
    --primary-gradient-800-600-90: linear-gradient(63.44deg, var(--primary-800) 16.72%, var(--primary-600) 83.39%);
    --primary-gradient-700-600-45: linear-gradient(45deg, var(--primary-700) 0%, var(--primary-600) 100%);
    --primary-gradient-900-600-45: linear-gradient(45deg, var(--primary-900) 0%, var(--primary-600) 100%);
    --primary-gradient-800-600-45: linear-gradient(45deg, var(--primary-800) 0%, var(--primary-600) 100%);
    --primary-gradient-800-700-26: linear-gradient(26.57deg, var(--primary-800) 8.33%, var(--primary-700) 91.67%);

    --grey-gradient-600-500-90: linear-gradient(90deg, var(--grey-600) 0%, var(--grey-500) 100%);
    --grey-gradient-800-600-90: linear-gradient(63.44deg, var(--grey-800) 16.72%, var(--grey-600) 83.39%);
    --grey-gradient-700-600-45: linear-gradient(45deg, var(--grey-700) 0%, var(--grey-600) 100%);
    --grey-gradient-900-600-45: linear-gradient(45deg, var(--grey-900) 0%, var(--grey-600) 100%);
    --grey-gradient-800-600-45: linear-gradient(45deg, var(--grey-800) 0%, var(--grey-600) 100%);
    --grey-gradient-800-700-26: linear-gradient(26.57deg, var(--grey-800) 8.33%, var(--grey-700) 91.67%);

    --focus-ring-sm-primary-100: 0px 0px 0px 2px var(--primary-100);
    --focus-ring-primary-100: 0px 0px 0px 4px var(--primary-100);
    --focus-ring-grey-100: 0px 0px 0px 4px var(--grey-100);
    --focus-ring-error-100: 0px 0px 0px 4px var(--error-100);
    --focus-ring-grey-500: 0px 0px 0px 4px var(--grey-500);
    --focus-ring-primary-500: 0px 0px 0px 4px var(--primary-500);

    --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);

    --shadow-focused-xs-primary: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--primary-100);
    --shadow-focused-xs-grey: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--grey-100);
    --shadow-focused-xs-error: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--error-100);

    --shadow-focused-sm-primary: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 0px 0px 4px var(--primary-100);
    --shadow-focused-sm-grey: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 0px 0px 4px var(--grey-100);

    /* Note: backdrop-filter has minimal browser support */
    --background-blur-sm: blur(8px);
    --background-blur-md: blur(16px);
    --background-blur-lg: blur(24px);
    --background-blur-xl: blur(40px);


    /* Brand Logos */
    --login-panel-image:    url('../assets/img/CAR_website_New_HeaderIMG_0615.jpg');
    --nav-brand-logo:       url('../assets/img/cellaride_logo_blue.svg');
    --nav-brand-logo-icon: url('../assets/img/cellaride_logo_icon.ico');
    --login-panel-overlay:  none;
    
    /* User Avatar */
    --avatar-nav-width:     40px;
    --avatar-nav-height:    40px;

    /* Icons */
    
    --icon-wrapper-width:   24px;
    --icon-wrapper-height:  24px;

    --icon-width:           18px;
    
    --icon-dropdown-width:  16px;
    --icon-dropdown-height: 16px;
    
    --icon-arrow-up-right:  url('../assets/icons/arrow-up-right.svg');
    --icon-back-arrow:      url('../assets/icons/back-arrow.svg');
    --icon-calendar:        url('../assets/icons/calendar-nav.svg');
    --icon-car-nav:         url('../assets/icons/car-nav.svg');
    --icon-checkmark:       url('../assets/icons/checkmark.svg');
    --icon-processing:       url('../assets/icons/processing.svg');
    --icon-dashboard:       url('../assets/icons/dashboard.svg');
    --icon-delete:          url('../assets/icons/delete.svg');
    --icon-dealer:          url('../assets/icons/dealer.svg');  
    --icon-data-request:    url('../assets/icons/download-cloud.svg');
    --icon-download:        url('../assets/icons/download.svg');
    --icon-download-cloud:  url('../assets/icons/download-cloud.svg');
    --icon-dropdown:        url('../assets/icons/chevron-down.svg');
    --icon-edit:            url('../assets/icons/edit.svg');
    --icon-email:           url('../assets/icons/email.svg');
    --icon-globe:           url('../assets/icons/globe.svg');
    --icon-email:           url('../assets/icons/email.svg');
    --icon-file-upload:     url('../assets/icons/file-upload.svg');
    --icon-home:            url('../assets/icons/home.svg');
    --icon-info:            url('../assets/icons/info.svg');
    --icon-locate:          url('../assets/icons/locate.svg');
    --icon-logout:          url('../assets/icons/log-out.svg');
    --icon-plus:            url('../assets/icons/plus.svg');
    --icon-projects:        url('../assets/icons/projects.svg');
    --icon-reporting:       url('../assets/icons/reporting.svg');
    --icon-search:          url('../assets/icons/search.svg');
    --icon-shield:          url('../assets/icons/shield.svg');
    --icon-search-primary:  url('../assets/icons/search-primary.svg');
    --icon-send:            url('../assets/icons/send.svg');
    --icon-settings:        url('../assets/icons/settings.svg');
    --icon-support:         url('../assets/icons/support.svg');
    --icon-tasks:           url('../assets/icons/tasks.svg');
    --icon-users:           url('../assets/icons/users.svg');
    --icon-groups:          url('../assets/icons/groups.svg');
    --icon-phone-off:       url('../assets/icons/phone-off.svg');
    --icon-io-form:         url('../assets/icons/add-new.svg');
    --icon-sidebar-close:   url('../assets/icons/x.svg');
    --icon-sidebar-open:    url('../assets/icons/menu.svg');
    --datatable-sort-desc:  url('../assets/icons/chevron-down.svg');
    --datatable-sort-asc:   url('../assets/icons/chevron-up.svg');
    --icon-print:           url('../assets/icons/print.svg');
    --icon-link:            url('../assets/icons/link.svg');
    --icon-customers-targeted: url('../assets/icons/customers_targeted_icon.svg');
    --icon-website-hits:    url('../assets/icons/website_hits_icon.svg');
    --icon-vehicles-aquired: url('../assets/icons/vehicles_aquired_icon.svg');
    --icon-vehicles-resold: url('../assets/icons/vehicles_resold_icon.svg');
    --icon-repairs-matched: url('../assets/icons/repairs_matched_icon.svg');
    --icon-sales-matched: url('../assets/icons/sales_matched_icon.svg');
    --icon-report-clickthrough: url('../assets/icons/report_clickthrough_icon.svg');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--body-font);
    color: var(--grey-700);
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--base-white);
}
::selection {
    /* background: var(--primary-400); WebKit/Blink Browsers */
    background: rgba(199, 0, 43,0.1);
    /* color: var(--grey-100); */
}
::-moz-selection {
    /* background: var(--primary-400);  Gecko Browsers */
    background: rgba(199, 0, 43,0.1);
    /* color: var(--grey-100); */
}
.contanier {
    display: flex;
    padding: 0px;
    margin: 0px;
    position: relative;
}
.main {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0px 48px;
    gap: 32px;
}

.main-content {
    background-color: var(--grey-50);
    margin-left: 250px;
    min-height: 100vh;
    position: relative;
    padding-bottom: 50px;
    overflow: auto;
}
.font-light {
    font-weight: 300;
}
.font-regular {
    font-weight: 400;
}
.font-medium {
    font-weight: 500;
}
.font-semibold {
    font-weight: 600;
}
.font-bold {
    font-weight: 700;
}
.italic {
    font-style: italic;
}
.underlined {
    text-decoration-line: underline;
}
.text-display {
    font-family: 'Inter';
    font-style: normal;
    letter-spacing: -0.02em;
    color: var(--base-black);
}
.text-display-2xl {
    font-size: 72px;
    line-height: 90px;
}
.text-display-xl {
    font-size: 60px;
    line-height: 72px;
}
.text-display-lg {
    font-size: 48px;
    line-height: 60px;
}
.text-display-md {
    font-size: 36px;
    line-height: 44px;
}
.text-display-sm {
    font-size: 30px;
    line-height: 38px;
}
.text-display-sm-italic {
    font-size: 30px;
    line-height: 44px;
}
.text-display-xs {
    font-size: 24px;
    line-height: 32px;
}
.text-display-xs-italic {
    font-size: 24px;
    line-height: 36px;
}
.text-xl {
    font-size: 20px;
    line-height: 30px;
}
.text-lg {
    font-size: 18px;
    line-height: 28px;
}
.text-md {
    font-size: 16px;
    line-height: 24px;
}
.text-sm {
    font-size: 14px;
    line-height: 20px;
}
.text-xs {
    font-size: 12px;
    line-height: 18px;
}
.text-xxs {
    font-size: 10px;
    line-height: 14px;
}


/* Background Color Classes */
.extra-light-primary {
    background-color: var(--primary-100) !important;
}
.light-primary {
    background-color: var(--primary-500) !important;
}
.medium-primary {
    background-color: var(--primary-700) !important;
}
.dark-primary {
    background-color: var(--primary-900) !important;
}



/* Clear table styles */
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align:middle
}


/* Scroll */
/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--grey-400);
    border-radius: 8px;
}


/* Zoho Chat Integration */

.custom_row_container {
    width: 100%!important;
    max-width: 400px!important;
}
.zd_font_icons {
    color: white!important;
}
[data-id="containerComponent"] > svg,
[data-id="icon_menu2"] > svg,
[data-id="icon_close1"] > svg,
[data-id="icon_backArrow"] > svg,
[data-id="icon_search7"] > svg
{
    fill: white;
}
#zohohc-asap-web-button > svg {
    fill: white;
}
#kbDetailScrollCont > div:nth-child(2),
[data-title="Permalink"],
[data-id="icon_permalink1"]
 {
    display:none;
}


#homewidgetsContainer {
    display:flex;
    flex-direction: column-reverse;
    gap: 14px;
}