:root  {
      --text-dark:#000;
      --textdark2:rgba(42,53,71);
      --textDisbaled:#a8a8a8;
      --blackMedium:rgba(0,0,0,.77);
      --textGray:#5c5561;
      --textblack7:rgba(0,0,0,.7);
      --textmBlue:#1465bd;
      --textDLight:#6f6f6f;
      --textLight2:#818284;
      --textID:#888;
      --dateField:#5c5561;
      --textTheme:#5a7ce6;


      --AlertsuccessBg:#e6f2ea;
      --AlertsuccessText:#2a562a;
      --Alertsuccess-border:#cae5cd;

      --AlertdangerBg:#f8d7da;
      --AlertdangerText:#721c24;
      --Alertdanger-border:#f5c6cb; 

      --AlertwarningBg:#ED912115;
      --AlertwarningText:#856404;
      --Alertwarning-border:#e2d09b;

      --AlertinfoBg:#d1ecf1;
      --AlertinfoText:#0c5460;
      --Alertinfo-border:#bee5eb;

      --AlertprimaryBg:#cce5ff;
      --AlertprimaryText:#004085;
      --Alertprimary-border:#b8daff;

      --borderLight:#1111110a;
      --sparatorBorder:#eee;   
      --commonBorderColor:#cde6ec;
      --BorderColor2:#ddd; 


      --body-bg-color: #ffffff;
      --body-text-color: #212529; 
      --top-header-bg:linear-gradient(90deg, rgba(244,232,254,1) 0%, rgba(227,228,249,1) 35%, rgba(222,222,248,1) 100%);
      --logoTextColor:#333;
      --header-border:#c4c6dc; 
      --sidebarMenuBg:#fff;
      --SidebarmenuHoverBg:#F0F9FF;
      --SidebarToggleBtnBg:#E2E2F9;
      --menutextColor:#222; 
      --menuPseudoColor:#cde6ec;
      --subMenuBorder:#cde6ec;
      --topBtnBg:#ffffff4d;
      --topBtnColor:#6260a4;
      --subSidebarBg:#fff;
      --subSidebarhoverbg:#F0F9FF;
      --headerSearchBg:#e0e0f8;
      --headerSearchborder:#c4c6dc;
      --contentSectinoBg:#F8FAFD;
      --titletext:#222;

      --btnPrimaryBg:linear-gradient(90deg, rgba(244,232,254,1) 0%, rgba(227,228,249,1) 35%, rgba(222,222,248,1) 100%);
      --btnPrimaryColor:rgb(58, 54, 71);
      --btnPrimaryBorder:#b1abb7;

      --btnSuccessBg: linear-gradient(90deg,  rgb(214, 202, 234) 0%,  rgb(197, 198, 219) 35%,  rgb(182, 182, 218) 100%);
      --btnSuccessColor:rgb(58, 54, 71);
      --btnSuccessBorder:#b1abb7;

      --btnSecondaryBg:#f6f6f6;
      --btnSecondaryColor:rgb(58, 54, 71);
      --btnSecondaryBorder:#b1abb7;

      --customBtnBg1:#c9def4;
      --customBtncolor1:#48404e;
      --customBtnborder1:#abc6e2; 

      --customBtnBg2:#eae5f9;
      --customBtncolor2:rgb(58, 54, 71);
      --customBtnborder2:#b1abb7;

      --customBtnGrayBg:#f2f2f2;
      --customBtnGrayColor:#666;
      --customBtnGrayBorder:#ddd;

      --tableBg:#fff;
      --tableBorder:#eee;
      --thBg:#eef4fc;
      --th-text-color:#212529;
      --tdBg:#fff;
      --tdborderColor:#efefef;
      --tdTextcolor:#48404e;
      --tdHoverBg:#F8FAFD;

      --cardBg:#fff;

      --dropdownBg:#fff;
      --dropdownmenuhoverBg:#F0F9FF;

      --chipBg:#D4EDFF;
      --chipBg2:#e1e1f9;
      --chipBg3:#f9e1e1;
      --chipLightBg:#F0F9FF;
      --lightGrayBg:#eee;
      --gray100:#f9f9f9;
      --gray200:#f6f6f6;
      --CounterBg:#e1ebf2;



      --statusGreenBg:#9dd39094;
      --statusGrayBg:#f2f2f2;
      --statusRedBg:#FBD0D0;
      --statusOrangeBg:#FBDED0;
      --statusBlueBg:#90c3d394;
      --statusyellowBg:#ffe8cb;

      --statusGreentext:#334E2D;
      --statusGraytext:#757475;
      --statusRedtext:#4E2D2D;
      --statusOrangetext:#4E332D;
      --statusbluetext:#2D3A4E;
      --statusyellowtext:#754c2e;

      --checkboxBg:#fff;
      --checkboxBorder:#adb5bd;

      --modalBg:linear-gradient(180deg,rgba(219, 219, 219, 1) 0%, rgba(255, 255, 255, 1) 12%);
      --formControlBg:#f6f6f6;
      --formControlText:#5a6a85;

      --formLabelBg:linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgba(222, 222, 248, 0.67) 100%);

      --collpaseBg:#f2f5f9;

      --switchToggleHandleBg:#fff;

      --filterBg:#EEF4FC;
      --filterBorderColor:#d9dae7;

      --inboundBg:#F7E1FC; 
      --outboundBg:#CCECEF;
      --poolcallBg:#C8D6F8;
      --quickcallBg:#FAE9C2; 

      --textInbound:#6E9B5E;
      --textoutbound:#4A82A4;
      --textPoolCall:#4A82A4;
      --textQuickCall:#4A82A4;
      --clicktocall:#4A82A4;
      --agentcamp:#4A82A4;
      --omitcall:#4A82A4;
      --broadcast:#4A82A4; 

      --progressBg:#2122220f;
      --progressBgActive:#e1e1e1;
      --tableHighlightBg:#E6E7F9;
      --tableHighlightborder:#0000001a;
      --highlightTDBg:#E3E3F9;
      --highlightTdBorder:#ded6f0;
      --highlightCountBg:#d3d5ee;
      --highlighProgresBgActive:#c6c8e7;

      --widgetHeadingColor:rgb(57, 86, 200);

      --obdFormLabelColor:#222;

      --invoiceCardBg:#fff;
      --filterFieldElementBg:#dfdfdf;

      --workflowChartStroke:#ccc;

      --biIconShadow:#ccc;

      --Bgcharcoal:#f2f2f2;

      --dispoBlckBg:#fff;

      --dispoHighBg:#77a677 ;
      --dispoMidBg:#678dbd90 ;
      --dispoLowBg:#c2736c90 ;
      --dispocatgryTotalBg:rgba(230, 200, 156, 0.56) ;
      --dispoParentTotalBg:rgba(196, 173, 206, 0.56) ;

      --themeLightBg:#f0f0fc;
      --activeBg:#6b74c4;


    }

    [data-theme="dark"] {
      --text-dark:#fff;
      --textDisbaled:#6a6a6a;
      --blackMedium:rgba(255,255,255,.67);
      --textGray:#888;
      --textblack7:rgba(255,255,255,.7);
      --textmBlue:#70b0f6;
      --textDLight:#cdcdcd;
      --textdark2:#cdcdcd; 
      --textLight2:#818284; 
      --textID:#6d757c;
      --dateField:#6d757c;
      --textTheme:#5a7ce6;




      --AlertsuccessBg:#43ac5c36;
      --AlertsuccessText:#78b085;
      --Alertsuccess-border:#c3e6cb4d; 

      --AlertdangerBg:#a2485030;
      --AlertdangerText:#ff959f;
      --Alertdanger-border:#e6616f59;

      --AlertwarningBg:#8c7d4e3d;
      --AlertwarningText:#ddbc5b;
      --Alertwarning-border:#776a42;

      --AlertinfoBg:#328c802e;
      --AlertinfoText:#31a9bd;
      --Alertinfo-border:#bee5eb63;

      --AlertprimaryBg:#39638e47;
      --AlertprimaryText:#5f92ca;
      --Alertprimary-border:#b8daff63;

      --borderLight:#f9f9f90d;
      --commonBorderColor:#404040;
      --sparatorBorder:#403f3f;
      --BorderColor2:#4f4f4f ;

      --body-bg-color: #121212;
      --body-text-color: #f2f2f2; 
      --top-header-bg:#27292B;
      --logoTextColor:#fff;
      --header-border:transparent; 
      --sidebarMenuBg:#27292B;
      --SidebarmenuHoverBg:#464646;
      --SidebarToggleBtnBg:#535353;
      --menutextColor:#d2d2d2;
      --menuPseudoColor:#666;
      --subMenuBorder:#404040; 
      --topBtnBg:#353535;
      --topBtnColor:#cdcdcd;
      --subSidebarBg:#121212;
      --subSidebarhoverbg:#333;
      --headerSearchBg:#27292B;
      --headerSearchborder:#555555;
      --contentSectinoBg:#141618;
      --titletext:#EA9108;

      --btnPrimaryBg:linear-gradient( 90deg, rgb(90, 70, 120) 0%, rgb(70, 72, 120) 35%, rgb(60, 60, 110) 100% ) ;
      --btnPrimaryColor:#fff;
      --btnPrimaryBorder:#6d6384f0 ;

      --btnSuccessBg: linear-gradient( 90deg, rgb(90, 70, 120) 0%, rgb(70, 72, 120) 35%, rgb(60, 60, 110) 100% );
      --btnSuccessColor:#fff;
      --btnSuccessBorder:#6d6384f0 ;

      --btnSecondaryBg:#393939;
      --btnSecondaryColor:#cdcdcd;
      --btnSecondaryBorder:#4d4d4d;

      --customBtnBg1:#26282a;
      --customBtncolor1:#cdcdcd;
      --customBtnborder1:#333;

      --customBtnBg2:#393939;
      --customBtncolor2:#cdcdcd;
      --customBtnborder2:#555;

      --customBtnGrayBg:#3e3c3c;
      --customBtnGrayColor:#918f8f;
      --customBtnGrayBorder:#4d4d4d;

      --tableBg:#242628;
      --tableBorder:#ffffff0a;
      --thBg:#202223;
      --th-text-color:#9e9e9e;
      --tdBg:#202223;
      --tdborderColor:#131517ad;
      --tdTextcolor:#ffffff8c;
      --tdHoverBg:#2D2F30;

      --cardBg:#242628;

      --dropdownBg:#2e2e2e; 
      --dropdownmenuhoverBg:#3e3e3e;

      --chipBg:#4A5A6A;
      --chipBg2:#484748;
      --chipBg3:#604d3d;
      --chipLightBg:#7b7b7b5c;
      --lightGrayBg:#444;
      --gray100:#202020;
      --gray200:#373737;
      --CounterBg:#435562;



      --statusGreenBg:#35483080;
      --statusGrayBg:#514f4f;
      --statusRedBg:#4d33338c;
      --statusOrangeBg:#553d3273;
      --statusBlueBg:#53606494;
      --statusyellowBg:#7360464d;

      --statusGreentext:#6FBD5E;
      --statusGraytext:#aca5ac;
      --statusRedtext:#D55656;
      --statusOrangetext:#C87260;
      --statusbluetext:#739BD9;
      --statusyellowtext:#dbb65e;

      --checkboxBg:#353535;
      --checkboxBorder:#5e5e5e;

      --modalBg:#272728;
      --formControlBg:#333;
      --formControlText:#fff; 

      --formLabelBg:linear-gradient(90deg, #242628 0%, #313030 35%, #313131 100%);

      --collpaseBg:#00000036;

      --switchToggleHandleBg:rgb(115, 114, 114);

      --filterBg:#121212;
      --filterBorderColor:#333;

      --inboundBg:#443946; 
      --outboundBg:#2F3E40;
      --poolcallBg:#2D3548;
      --quickcallBg:#463F2C;

      --textInbound:#6E9B5E;
      --textoutbound:#4A82A4;
      --textPoolCall:#4A82A4;
      --textQuickCall:#4A82A4;
      --clicktocall:#4A82A4;
      --agentcamp:#4A82A4;
      --omitcall:#4A82A4;
      --broadcast:#4A82A4;
 

      --progressBg:#464848;
      --progressBgActive:#6c8084;
      --tableHighlightBg:#2B2C3B;
      --tableHighlightborder:#4c4460f0;
      --highlightTDBg:#3A3A53;
      --highlightTdBorder:#706d7524;
      --highlightCountBg:#585a73;
      --highlighProgresBgActive:#6c6e82;
      --widgetHeadingColor:rgb(96, 149, 236);

      --obdFormLabelColor:#a37329;

      --invoiceCardBg:#393939;
      --filterFieldElementBg:#26282a; 

      --workflowChartStroke:#4c5560; 
      --biIconShadow:#666;

      --Bgcharcoal:#3e3b3b;

      --dispoBlckBg:#313130;

      --dispoHighBg:#3e7d3e;
      --dispoMidBg:#3d6497;
      --dispoLowBg:#813731  ;
      --dispocatgryTotalBg:rgba(111, 67, 0, 0.5)   ;
      --dispoParentTotalBg:rgba(135, 87, 157, 0.46)  ; 


      --themeLightBg:#373737;
      --activeBg:#6b74c4;



    }


    :root {
    --theme-red:#BD6563;
    --theme-pink:#B75C7D;
    --theme-purple:#66548A;  
    --theme-yellow:#A2742B;  
    --theme-indigo:#515B99;   
    --theme-blue:#3E74AA;
    --theme-cyan:#0097A7;  
    --theme-teal:#00897B;  
    --theme-green:#388E3C;  
    --theme-orange:#D98858;  
    }

    [data-theme="red"]{ 
      --themeColor:var(--theme-red);
    }

    [data-theme="pink"]{ 
      --themeColor:var(--theme-pink);  
        
    }

    [data-theme="purple"]{ 
      --themeColor:var(--theme-purple);  
 
    }

    [data-theme="yellow"]{ 
      --themeColor:var(--theme-yellow);  
      
    }

    [data-theme="indigo"]{
      --themeColor:var(--theme-indigo);  
 
    }

    [data-theme="blue"]{
    --themeColor:var(--theme-blue);   
 
    }

    [data-theme="cyan"]{
    --themeColor:var(--theme-cyan);  
 
    }

    [data-theme="teal"]{
    --themeColor:var(--theme-teal);   
    }  

    [data-theme="green"]{
    --themeColor:var(--theme-green); 
 
    }
 
    [data-theme="orange"]{
    --themeColor:var(--theme-orange); 
 
    }

    [data-theme="red"], [data-theme="pink"], [data-theme="purple"], [data-theme="yellow"], [data-theme="indigo"], [data-theme="blue"], 
    [data-theme="cyan"], [data-theme="teal"], [data-theme="green"], [data-theme="orange"]{ 

    .nav-capsule-main, .liveBtnNav, .action-capsule-icons{background: #ffffff30; color: #ffffffc2}
    .navbar-nav .nav-link{color:#ffffffc2;}
    .navbar-nav .dropdown-item{color: #ffffffc2}
    .actionHeader .nav-item.active .nav-link, .actionHeader .nav-link:hover, .actionHeader .dropdown:hover > .nav-link{background:var(--themeColor); color:#fff }
    .headerMenuDropdown .dropdown-menu .dropdown-item{color: #fff}
    .headerMenuDropdown .dropdown-menu .dropdown-item:hover, .headerMenuDropdown .dropdown-menu .dropdown-item.active{background:color-mix(in srgb, var(--themeColor) 95%, white); color:#fff}
    .topActionBtn{color: #ffffffc2}
    .topActionBtn:hover{color: #fff}
    .profile-header .info .name{color: #fff}
    .profile-header .info .PuserID{color: #ffffff80}
    .profile-header, .profileMenuDropdwon hr, .Profilemenu li.divider{border-color: #eeeeee2b!important}
    .Profilemenu li a{color: #ffffffc2}
    .Profilemenu li a:hover{color:#fff; background:var(--themeColor)!important;}
    .Profilemenu li i, .profileMenuDropdwon .text-gray{color: #ffffff80} 

    .stringMenu{background: none; color: #ffffffc2!important; -webkit-text-fill-color:inherit}
    .stringMenu:hover{ background: inherit!important; color: #fff!important; -webkit-text-fill-color:inherit!important}

    .sidebar{border-right: transparent;}
    .menuCollpaseBtn{background:var(--themeColor); color:#fff }
    .sidebar .logo-details .logo_name{color: #fff}
    
    .logotext{color: #fff}
    .sidebar .nav-links li i{color:#fff}
    .sidebar .nav-links li .iocn-link a i svg path {stroke:#fff!important;   }
    .sidebar .nav-links li .iocn-link a i svg.formIcon{fill: #fff!important}
    .sidebar .nav-links li:hover .iocn-link{background: #F0F9FF36}
    .sidebar .nav-links li .sub-menu a{color: #fff}

    .sidebar .nav-links li.bottom-li{border-top-color: #ffffff30!important}


    .db_search_bx, .userAvtarDropBtn{background: #fff; border-color: #fff; color: #333}
    .db_search_bx .textbox{color: #333}
    .searchIcon{color: color-mix(in srgb, var(--themeColor) 40%, white)}
    .sidebar .nav-links li a .link_name{color: #f9f6f6cc}
    .sidebar .nav-links li .sub-menu a::before{border-left-color:#cde6ec6e ; border-bottom-color: #cde6ec6e}
    .sidebar .nav-links li .sub-menu::after{background:#cde6ec6e }
    .sidebar.closenavAside .nav-links li .sub-menu .link_name{color: #ffffff82}
    .sidebar.closenavAside .nav-links li .sub-menu a:hover{background: color-mix(in srgb, var(--themeColor) 90%, black);} 
    .userAvtarDropBtn span{background:color-mix(in srgb, var(--themeColor) 80%, black) }

    .actionHeader .btn-success{background:color-mix(in srgb, var(--themeColor) 80%, black); border-color:color-mix(in srgb, var(--themeColor) 80%, black)!important; color:#ffffffd6 !important }
    .actionHeader .btn-success:hover, .actionHeader .btn-success:focus{background:color-mix(in srgb, var(--themeColor) 80%, black)!important; border-color:color-mix(in srgb, var(--themeColor) 80%, black)!important; color: #fff!important}

    .customPagination .page-item.active .page-link{background: var(--themeColor);}

    .collapseIcon{background:color-mix(in srgb, var(--themeColor) 20%, white); }
    .PagrowViewDropdown{ background:color-mix(in srgb, var(--themeColor) 20%, white);}
    .tableSection table tbody tr td{border-color: #ddd}
    .dispostionDatewiseTbl table tr th.dayField, .tableSection table thead tr th{border-color: #ddd}
    .dispostionDatewiseTbl .endDate{border-color: color-mix(in srgb, var(--themeColor) 40%, white)!important }

    .agent_detail_list_2x .nav-tabs .nav-link.active, .fromWizard ul li .nav-link.active::after, .process-step.active .step-circle{background: var(--themeColor); border-color: var(--themeColor);}
    .process-step.completed::after{background: var(--themeColor);}
    .process-step.active .step-circle{background: var(--themeColor); border-color: var(--themeColor);}
    .process-step.completed .step-circle{background:color-mix(in srgb, var(--themeColor) 80%, black); border:color-mix(in srgb, var(--themeColor) 80%, black); }
    .process-step.active .step-label a{color:color-mix(in srgb, var(--themeColor) 90%, white);}
    .process-step.completed .step-label a{color:color-mix(in srgb, var(--themeColor) 80%, black); }

    .dc_tab_info .nav-tabs .nav-link.active{color: color-mix(in srgb, var(--themeColor) 90%, black);}
    .rightPLSection{background: color-mix(in srgb, var(--themeColor) 20%, white);}
    .rightside_extrainfo_Section{background: color-mix(in srgb, var(--themeColor) 30%, white); }

    .switch.switch-primary > input:checked + .switch-slider{ background:var(--themeColor); box-shadow:0 0 3px var(--themeColor) }
    .CallanalysisTable table tfoot tr td, .breakReportTbl table tfoot tr td{background: color-mix(in srgb, var(--themeColor) 20%, white);}
   

 
    --textTheme:var(--themeColor);
    --top-header-bg:var(--themeColor);
    --biIconShadow:color-mix(in srgb, var(--themeColor) 90%, white);
    --sidebarMenuBg:color-mix(in srgb, var(--themeColor) 80%, black); 
    --contentSectinoBg:color-mix(in srgb, var(--themeColor) 5%, white);   
    --commonBorderColor:color-mix(in srgb, var(--themeColor) 15%, white); 
    --filterBg:color-mix(in srgb, var(--themeColor) 10%, white);
    --filterBorderColor:color-mix(in srgb, var(--themeColor) 20%, white); 
    --SidebarmenuHoverBg:color-mix(in srgb, var(--themeColor) 90%, black);
    --subSidebarhoverbg: color-mix(in srgb, var(--themeColor) 10%, white);  
    --thBg:color-mix(in srgb, var(--themeColor) 12%, white);

    --chipBg:color-mix(in srgb, var(--themeColor) 25%, white);
    --chipBg2:color-mix(in srgb, var(--themeColor) 20%, white);

    --customBtnBg1:  color-mix(in srgb, var(--themeColor) 30%, white);
    --customBtnborder1:color-mix(in srgb, var(--themeColor) 60%, white);
    --customBtncolor1:color-mix(in srgb, var(--themeColor) 40%, black);

    --customBtnBg2: color-mix(in srgb, var(--themeColor) 10%, white);
    --customBtnborder2:color-mix(in srgb, var(--themeColor) 60%, white);
    --customBtncolor2:color-mix(in srgb, var(--themeColor) 70%, black);

    --btnPrimaryBg:var(--themeColor);
    --btnPrimaryBorder:var(--themeColor);
    --btnPrimaryColor:#fff;

    --btnSuccessBg:var(--themeColor);
    --btnSuccessBorder:var(--themeColor);
    --btnSuccessColor:#fff;


    --tableHighlightBg:color-mix(in srgb, var(--themeColor) 12%, white);
    --highlightTDBg:color-mix(in srgb, var(--themeColor) 20%, white);
    --highlightCountBg:color-mix(in srgb, var(--themeColor) 30%, white);
    --highlighProgresBgActive:color-mix(in srgb, var(--themeColor) 40%, white);
    --highlightTdBorder:color-mix(in srgb, var(--themeColor) 20%, white);


     --themeLightBg:color-mix(in srgb, var(--themeColor) 15%, white);
      --activeBg:color-mix(in srgb, var(--themeColor) 80%, white);



    }