:root {
    --color-white: #ffffff;
    --color-dark: #000000;
    --color-dark30: #303030;
    --color-1d: #1D1D1B;
    --color-76: #767676;
    --color-61: #616161;
    --color-6a: #6A7889;
    --color-af: #AFAFAF;
    --color-ae: #AEB7BE;
    --color-eb: #EBE7FF;
    --color-96: #969696;
    --color-4f: #4F80CA;
    --color-3d: #3D5CC2;
    --color-84: #847EC6;
    --color-b3: #B3B3B3;

    --color-accent: #6153FB;

    --bg-white: #ffffff;
    --bg-primary: #F5F7FF;
    --bg-primary-c7: #C7C7C7;
    --bg-f8: #f8f8f8;
    --bg-ed: #EDE7F9;
    --bg-2e: #2E4294;
    --bg-62: #62A8D0;
    --bg-ee: #EEF0F1;
    --transparent-bg: rgb(97 83 251 / 15%);
    --bg-accent: #6153FB;
    --bg-gradient: linear-gradient(359.68deg, #354bae, #63acd7);
    --bg-gradient-login: linear-gradient(180deg, #F5F7FF 0%, #F5F7FF 69.67%);

    --border-dd: #DDDDE2;
    --border-separate-color: #DDDDE2;
    --border-input-color: #CECED8;
    --border-color-d3: #D3D0DF;
    --border-61: #615361;
    --broder-accent: #6153FB;
    --broder-85: #8547F8;



    --poppins: 'Poppins', sans-serif;
    --Public: 'Public Sans', sans-serif;
    --Mulish: 'Mulish', sans-serif;

    --3s: all 0.3s ease-in-out;
}












/* ==========================================================================

HEADER

==========================================================================*/

#main-header {
    background: white;
    border-bottom: 0.5px solid var(--border-separate-color);
}

.headerWrapper {
    justify-content: space-between;
    height: 90px;
}

/*Brand elements*/
.brand-wrapper {
    height: 26px;
    padding-left: 30px;
    transition: all 0.25s ease;
    margin-right: 40px;
}

.brand-wrapper .logo {
    height: 26px;
}

.brand-wrapper .breadcrumb {
    display: block;
    margin: 0 0 0 60px;
}

.brand-wrapper .breadcrumb ul {
    margin-bottom: 0px;
}

.brand-wrapper .breadcrumb li {
    display: inline-block;
    color: var(--color-61);
    font-weight: 300;
    position: relative;
    margin-right: 7px;
    font-size: 14px;
}

.brand-wrapper .breadcrumb li a {
    color: var(--color-61);
    color: 14px;
    text-decoration: none;
}

.brand-wrapper .breadcrumb li:after {
    content: "/";
    color: var(--color-61);
    font-size: 16px;
    position: absolute;
    top: 0px;
    right: -8px;
    line-height: 22px;
}

.brand-wrapper .breadcrumb li:last-child::after {
    display: none;
}

 .addDealerBtn {
    background: var(--transparent-bg);
    height: 90px;
    display: flex;
    align-items: center;
    padding: 0 21px 0 16px;
}

.addDealerBtn button {
    background: var(--bg-accent);
    color: var(--color-white);
    border: none;
    height: 48px;
    line-height: 48px;
    padding: 0 10px 0px 15px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--Public);
}

.addDealerBtn button i {
    height: 20px;
    width: 20px;
    background: var(--bg-white);
    color: var(--color-accent);
    line-height: 21px;
    border-radius: 10px 10px 10px 0px;
    margin-left: 6px;
    font-size: 13px;
}

/*Main menu trigger, help buttons and Search bar*/

.header-nav-wrapper ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-right: solid 1px var(--border-dd);
}

.header-nav-wrapper ul:last-child {
    border-right: none;
}

.header-nav-wrapper ul li {
    height: 34px;
    line-height: 30px;
    padding: 0px 15px;
    text-align: center;
}

.header-nav-wrapper ul li p {
    height: auto;
    line-height: 150%;
    font-size: 15px;
}

.header-nav-wrapper ul li a,
.header-nav-wrapper ul li button {
    background: transparent;
    border: 0;
    font-size: 20px;
    color: var(--color-ae);
    position: relative;
}

.header-nav-wrapper ul a.bellOption {
    position: relative;
}

.header-nav-wrapper ul a.bellOption {
    position: relative;
}

.notificationCount {
    position: absolute;
    top: 0;
    right: -5px;
    width: 13px;
    height: 13px;
    line-height: 13px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 8px;
    border-radius: 50%;
}

.header-nav-wrapper .dropdown-menu {
    width: 200px;
}
.header-nav-wrapper .dropdown-menu img {
    height: 50px;
}
.no-caret:after {
    display: none;
}

/*Search bar*/
ul.searchOption {
    padding-right: 15px;
}

#header-search-bar {
    box-sizing: border-box;
    padding: 0 15px 0 0;
    margin-left: calc(100% - 420px);
    width: 200px;
    border-right: rgba(0, 0, 0, 0.1) solid 1px;
    height: 75px;
}

#header-search-bar button {
    width: 15%;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#header-search-bar button:hover {
    color: #67a5e6;
}

#header-search-bar input[type="text"] {
    width: 80%;
    height: 30px;
    border: 0;
    color: #8798ad;
    font-weight: 300;
    font-size: 15px;
}

/*User*/
.user-wrapper {
    padding: 0 15px;
    position: relative;
}

.mobileMenuOption {
    position: absolute;
    top: 100%;
    right: 0;
    border: 1px solid var(--border-separate-color);
    padding: 10px 15px;
    background: var(--bg-white);
    min-width: 390px;
    border-radius: 4px;
    display: none;
    z-index: 99;
}
.mobileMenuOption  ul li {
    height: 34px;
    line-height: 30px;
    padding: 0 8px;
    text-align: center;
}
.mobileMenuOption ul li a img{
    border: none;
    height: auto;
    width: auto;
    margin: 0;
}
.mobileMenuOption ul {
    margin-right: 10px;
    padding: 0;
    list-style-type: none;
    border-right: solid 1px var(--border-dd) !important;
}
.mobileMenuOption ul:first-child {
    padding-right: 10px;
    
}
.mobileMenuOption ul:first-child li{
    padding-left: 0;
}
.marketingSalesTitle h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark30);
    margin: 0;
}

.mobileMenucontrolEdit{
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border-separate-color);
}
.NoticontrolTitle {
    line-height: 140%;
    font-size: 14px;
    padding-right: 7px;
    color: var(--color-6a);
    font-family: var(--Mulish);
    display: flex;
    align-items: center;
}
.mobileMenuArea {
    padding-left: 15px;
}
.mobileMenuRight {
    display: flex;
    align-items: center;
}
.mobileMenucontrolEdit span {
    background: var(--bg-accent);
    height: 14px;
    width: 14px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 8px !important;
    color: var(--color-white) !important;
    justify-content: center;
    padding: 0 !important;
    line-height: 14px !important;
    margin-left: 5px;
}
.mobileMenucontrolEdit a img{
    width: 10px;
    border: none;
    margin-right: 0;
}
.mobileBottomHeadre{
    display: none;
}
.mobileHeaderWrapper {
    border-top: 1px solid var(--border-separate-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mobileMenuArea .menuIconBtn {
    background: var(--bg-accent);
    display: inline-block;
    height: 29px;
    line-height: 27px;
    padding: 0 9px;
    border-radius: 4px;
    color: white;
}
.mobileMenuArea .menuIconBtn span {
    font-size: 14px;
    font-weight: 700;
}
.mobileMenuArea .menuIconBtn span i {
    padding-right: 10px;
    border-right: 1px solid var(--border-separate-color);
    margin-right: 5px;
    top: 1px;
    position: relative;
}
.mobileSearchandAddDealer .addDealerBtn button {
    height: 33px !important;
    line-height: 33px  !important;
    padding: 0 10px 0px 10px  !important;
    font-size: 14px !important;
}
.mobileSearchandAddDealer .addDealerBtn {
    height: 60px  !important;
    padding: 0 15px 0 15px  !important;
}
.addDealerBtn button i {
    height: 16px  !important;
    width: 16px !important;
    line-height: 17px !important;
    font-size: 9px !important;
}

.phoneSearchBtn span {
    padding: 0 15px;
    border-left: 1px solid var(--border-separate-color);
    height: 40px;
    line-height: 40px;
    display: block;
}



.mobileMenuModalWrapper .modal-content{
background: linear-gradient(49.28deg, #334bb0, #64abd4 79.6%);
}
.mobileMenuModalWrapper .modal-content span.btnCloseIcon {
    height: 30px;
    width: 30px;
    display: flex;
    border-radius: 50%;
    margin-top: 20px;
    margin-right: 20px;
    background: var(--bg-white);
}
.mobileMenuModalWrapper .sidebar-dropdown a span{
    position: relative
}
.mobileMenuModalWrapper .sidebar-dropdown a span:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0d7";
    font-style: normal;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: -12px;
    top: 0px;
    color: var(--color-white);
    font-size: 11px;
}
.mobileMenuModalWrapper .modal-content span.btnCloseIcon img {
    width: 12px;
    margin-left: 9px;
}

.mobileMenuModalWrapper ul.modalMenuItem {
    column-count: 2;
    padding: 100px 20px;
    max-width: 450px;
    margin: 0px auto;
}
.mobileMenuModalWrapper ul.modalMenuItem li {
    margin-bottom: 20px;
    line-height: 17px;
}
.mobileMenuModalWrapper ul.modalMenuItem li a{
    font-size: 14px;
    color: var(--color-white);
}
.mobileMenuModalWrapper .sidebar-submenu ul {
    padding: 10px 010px 0 10px;
    border: 1px solid var(--border-color-d3);
    margin-top: 10px;
    border-radius: 4px;
}
.mobileMenuModalWrapper ul.modalMenuItem li{
    margin-bottom: 20px;
}
.mobileMenuModalWrapper ul.modalMenuItem li a.active {
    background: #2E4294;
    display: block;
    height: 29px;
    line-height: 29px;
    border-radius: 4px;
    padding-left: 10px;
}
.mobileMenuModalWrapper .sidebar-submenu li {
    margin-bottom: 10px !important;
}

.mobileMenuModalWrapper .sidebar-footer {
    width: 100%;
    display: flex;
    margin-bottom: 50px;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
}

.user-wrapper img {
    height: 45px;
    margin-right: 8px;
    width: 45px;
    border: 3px solid var(--color-eb);
}

.user-wrapper span {
    line-height: 140%;
    font-size: 12px;
    padding-right: 7px;
    color: var(--color-6a);
    font-family: var(--Mulish);
}

.user-wrapper button {
    display: flex;
    align-items: center;
    background: transparent;
    border: 0;
    white-space: normal;
    word-wrap: break-word;
    padding: 0;
    text-align: left;
    height: 67px;
}

.user-wrapper .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0;
    vertical-align: 0.255em;
    content: "";
    border-top: 5px solid;
    border-right: 5px solid transparent;
    border-bottom: 0;
    border-left: 5px solid transparent;
    color: var(--color-accent);
}

.dropdown-menu {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.13);
    border: 1px solid rgba(182, 182, 182, 0.3);
    font-weight: 300;
    border-radius: 3px;
}

.dropdown-menu a {
    font-size: 14px !important;
    font-weight: 300;
    line-height: 150%;
    white-space: normal;
    color: var(--color-61);
    transition: var(--3s);
}
.dropdown-menu a:hover{
    color: var(--color-accent);
    background: transparent;
}

.dropdown-menu .badge {
    font-size: 12px;
}



























/* ======================================
          Login Page Style
====================================== */
.actionPage {
    display: flex;
    height: 100vh;
}
.loginBackBtn {
    position: absolute;
    top: 30px;
    left: 50px;
    z-index: 9;
}
.loginBackBtn a {
    background: #8ac1ee;
    height: 30px;
    padding: 0 15px;
    display: block;
    line-height: 29px;
    color: #ffffff;
    border-radius: 4px;
    transition: var(--3s);
}
.loginBackBtn a i{
    font-size: 12px;
    margin-right: 6px;
}
.loginBackBtn a:hover{
    background: var(--bg-accent);
}
.actionPage .loginRight {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    position: relative;
    mix-blend-mode: normal;
    background-color: #000000;
}



.actionPage .loginRight .loginPageLogo {
    z-index: 9;
}





.actionPage .login {
    max-height: 100vh;
    overflow-y: auto;
    margin: 0 auto;
    width: 50%;
    justify-content: center;
    background: var(--bg-gradient-login);
    position: relative;
    z-index: 1;
 
}

.actionPage .login img.shape1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    z-index: -1;
}

.actionPage .login img.shape2 {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
}

.actionPage .login img.shape3 {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
}





.actionPage .login h1.loginHeading {
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    line-height: 30px;
    font-family: var(--poppins);
}

.actionPage .login p.loginSubHeading {
    font-weight: 400;
    font-size: 17px;
    line-height: 30px;
    font-family: var(--Public);
    color: var(--color-76);
    margin: 0;
    padding: 0;
}



.actionPage .actionForm form .form-group {
    margin-bottom: 23px;
}

.actionPage .actionForm form .form-group.passItem {
    margin-bottom: 5px;
}

.actionPage .actionForm form label {
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    font-family: var(--poppins);
    padding-left: 17px;
}

.actionPage .actionForm form .form-control {
    height: 50px;
    padding: 0 17px;
    font-weight: 400;
    font-size: 15px;
    color: var(--color-af);
    border: 0.5px solid var(--border-color-d3);
    border-radius: 8px;
}

.actionPage .actionForm form .form-control:focus {
    color: var(--color-af);
    background-color: #fff;
    border: 0.5px solid var(--color-accent);
    box-shadow: 0px 0px 4px rgba(79, 26, 148, 0.25);
    outline: 0;
}

.actionPage .actionForm form .form-control::-webkit-input-placeholder {
    font-weight: 300;
    font-size: 15px;
    color: var(--border-color-d3);
}

.actionPage .actionForm form .form-control:-ms-input-placeholder {
    font-weight: 300;
    font-size: 15px;
    color: var(--border-color-d3);
}

.actionPage .actionForm form .form-control::-ms-input-placeholder {
    font-weight: 300;
    font-size: 15px;
    color: var(--border-color-d3);
}

.actionPage form .form-control::placeholder {
    font-weight: 300;
    font-size: 15px;
    color: var(--border-color-d3);
}

.actionPage .ckeckandForgetPass {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.actionPage .form-check {
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;

}

.actionPage .form-check-input[type=checkbox] {
    border-radius: .25em;
    height: 11px;
    width: 11px;
    margin-left: -15px;
    margin-bottom: 4px;
    box-shadow: none;
    cursor: pointer;
}

.actionPage .form-check-input:checked {
    background-color: var(--bg-accent);
    border-color: var(--border-accent);
}

.actionPage .actionForm .form-check label {
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    color: var(--color-af);
    padding: 0 0 0 4px;
    cursor: pointer;
}

.actionPage .login .container .forget-pass a {
    position: relative;
    color: var(--color-76);
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    font-family: var(--Public);
    text-decoration: none;
}

.actionPage .login .container .forget-pass a::before,
.actionPage .login .container .forget-pass a::after {
    position: absolute;
    content: "";
    background-color: var(--color-76);
    height: 1px;
    width: 100%;
    bottom: -2px;
    left: 0;
}

.actionPage .login .container .forget-pass a::after {
    width: 0%;
    transition: var(--3s);
    background-color: var(--bg-accent);
}

.actionPage .login .container .forget-pass a:hover::after {
    width: 100%;
}

.actionPage .login button {
    border: none;
    height: 50px;
    line-height: 50px;
    background-color: var(--bg-accent);
    color: var(--color-white);
    letter-spacing: 0.05em;
    font-weight: 700;
    font-size: 18px;
    font-family: var(--Public);
    margin-top: 27px;
    width: 100%;
    border-radius: 8px;
}

.actionPage .login button i {
    font-size: 15px;
    margin-left: 15px;
}




.actionPage .loginOptions ul {
    display: flex;
    align-items: center;
    padding: 0;
}

.actionPage .loginOptions ul li a {
    background: rgba(245, 245, 245, 0.8);
    box-shadow: 4px 4px 7px 2px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    width: 90px;
    height: 77.28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    margin: 0 6px;

    border-image-source: linear-gradient(265.88deg, #FFFFFF 1.74%, #C5C5C5 11.99%, #FFFFFF 23.32%, rgba(219, 219, 219, 0.5) 92.81%);
}

.actionPage .loginOptions ul li a span {
    background: #FFFFFF;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
}


.actionPage .loginOptions .shape img {
    position: absolute;
    z-index: 0;
}

.actionPage .loginOptions img.round_dot {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.actionPage .loginOptions img.robot {
    max-width: 600px;
    margin: 0px auto;
    width: 100%;
}






/*======================================
        DashBoard Body Design
======================================= */
.dasBodyMainhNavWRapper{
position: relative;
}
.dasBodyMainhNav {
    background: var(--bg-primary);
    height: 63px;
    display: flex;
    border-bottom: 0.5px solid var(--border-separate-color);
   
}

.dasBodyMainhNav ul {
    display: flex;
    align-items: center;
    padding-left: 40px;
}

.dasBodyMainhNav ul li {
    margin-right: 60px;
    height: 100%;
    width: max-content;
    line-height: 63px;
    height: 63px;
}

.dasBodyMainhNav ul li.active {
    border-bottom: 2px solid var(--broder-accent);

}

.dasBodyMainhNav ul li.active a {
    color: var(--color-accent);
    font-weight: 700;
}

.dasBodyMainhNav ul li a {
    font-weight: 400;
    font-size: 15px;
    
    color: var(--color-dark30);
    font-family: var(--poppins);
    height: 63px;
    display: block;
    padding: 0 27px;
}

.dasBodyMainhNav ul li a:hover {
    color: var(--color-accent);
}
.massageRightToggle {
    position: absolute;
    right: 0;
    top: 0;
    background: #f5f7ff;
    height: 100%;
    padding: 0px 15px;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
}
.massageRightToggle .button {
    font-size: 18px;
}
.rightSideNotifications.complatedTaskNotification.rightSideMassage, .rightSideNotifications.addMassageToggleClass.rightSideMassage {
    position: fixed;
    width: 100%;
    z-index: 999;
    background: var(--bg-white);
    top: 0;
    width: 344px !important;
    right: 0;
    height: 100vh;
    overflow-y: scroll;
}

.closeRightMassage{
    padding: 15px;
}
.closeRightMassage .close_M_R {
    background: var(--bg-accent);
}
.closeRightMassage img{
    height: 20px;
}
.closeRightMassage {
    padding: 15px;
    background:#f5f7ff;
    display: inline-table;
    text-align: right;
    float: right;
}
.button.massageToggleBtn {
    padding-top: 0;
    padding-left: 15px;
}
.button.massageToggleBtn {
    display: none;
    color: var(--color-accent);
}








.filterOptionWrapper {
    justify-content: space-between;
    padding: 30px 41px;
}

.locatorMenu .pageTitle {
    color: var(--color-1d);
    font-weight: 700;
    font-size: 20px;
    font-family: var(--poppins);
    margin: 0;
    padding-top: 4px;
}

.locatorMenu {
    display: flex;
}



.locatorMenuitems {
    position: relative;
    margin-left: 40px;
}
.locatorMenuitems .itemPosition{
    height: 33px;
    display: block;
    width: 162px;
}
.menuMoreItems .menuMoreItem{
        border: 0.5px solid var(--broder-85);
        box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.12);
        border-radius: 5px;
        background: var(--bg-white);
        width: 162px;
        transition: var(--3s);
        position: absolute;
        top: 0;
        left: 0;
        padding: 2px;
        height: 33px;
        overflow: hidden;
}

.menuMoreItems:hover .menuMoreItem {
    height: unset;
    overflow: unset;
}
.menuMoreItems a.active {
    background: var(--bg-ed);
    border-radius: 2px;
}

.menuMoreItems a {
    font-weight: 500;
    font-size: 12px;
    line-height: 27px;
    color: var(--color-61);
    padding: 0px 7px;
    display: block;
    transition: var(--3s);
}












.dashBodyFilter .filter_title {
    font-weight: 600;
    font-size: 12px;
    font-family: var(--Public);
    color: var(--color-61);
    margin-right: 11px;
}

.dashBodyFilter .form-check {
    display: flex;
    min-height: 33px;
    padding-right: 9px;
    padding-left: 32px;
    margin-bottom: -3px;
    background: var(--bg-white);
    margin-right: 11px;
    border-radius: 5px;
    box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.03);
    align-items: center;
}

.dashBodyFilter .form-check-input[type=checkbox] {
    border-radius: 50%;
    margin-top: -2px;
    height: 10px;
    width: 10px;
}

.dashBodyFilter label.form-check-label {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-61s);
    padding-left: 6px;
    font-family: var(--Public);
}



.exportOption {
    margin-left: 47px;
}

.exportOption .exportTitle {
    font-weight: 600;
    font-size: 12px;
    font-family: var(--Public);
    color: var(--color-61);
    margin-right: 11px;
}

.exportBtnWrapper button {
    margin-right: 11px;
}

.exportBtn {
    background: rgba(97, 83, 251, 0.07);
    border: 0.5px solid var(--broder-accent);
    color: var(--color-accent);
    height: 33px;
    line-height: 33px;
    margin: 0;
    font-weight: 400;
    font-size: 11px;
    font-family: var(--Public);
    padding: 0 7px;
    border-radius: 5px;
}

.exportBtn img {
    margin-right: 6px;
    height: 19px;
    margin-top: -3px;
}











.locatorArea {
    display: grid;
    grid-gap: 14px;
    grid-template-columns: 2fr 2fr 3fr;
    padding: 0 41px 120px 41px;
}

.dealerOptionHeader{
    margin-bottom: 9px;
}
.dealerName span.name{
    display: inline-block;
    height: 38px;
    line-height: 38px;
    background: var(--bg-f8);
    border-radius: 10px;
    padding: 0 12px ;
    min-width: 220px;
    font-weight: 600;
    font-size: 14px;
    font-family: var(--Public);
    color: var(--color-61);
    margin-bottom: 20px;
}

.brandName{
    margin-top: 17px;
}
.brandName .addList {
    margin-bottom: 16px;
}
.cityName {
    margin-top: 21px;
}
.cityName .addList {
    margin-bottom: 6px;
}
.addItemListTitle {
    font-weight: 600;
    font-size: 12px;
    font-family: var(--Public);
    color: var(--color-61);
    min-width: 60px;
}

.dealerOptionFooter {
    margin-top: 14px;
}
.dealerOptionBtns a{
    margin-right: 2px;
}
.dealerOptionBtns a:last-child {
    margin-right: 0px;
}
.dealerOptionFooter .boxItemSeparator {
    margin-top: 21px;
    margin-bottom: 14px;
}




.locatorInfoArea .boxItemSeparator {
    margin-bottom: 14px;
    margin-top: 14px;
}
.searchInBtns {
    display: flex;
    padding-top: 15px;
}

.locatorInfoArea ul li span .icon{
    margin-right: 10px;
}

.locatorInfoArea ul li,
.locatorInfoArea ul li strong{
    font-weight: 700;
    font-size: 12px;
    color: var(--color-61);
    font-family: var(--Public);
}
.locatorInfoArea ul li strong{
    padding-right: 2px;
}
.locatorInfoArea ul li {
    font-weight: 400;
    margin-bottom: 15px;
}
.locatorInfoArea ul li:last-child {
    margin-bottom: 0px;
}
.locatorInfoArea .dealerOptionFooter .boxItemSeparator {
    margin-top: 21px;
    margin-bottom: 21px;
}
.locatorInfoArea ul li img.checkActive {
    margin-left: 4px;
}







.locatormapWrapper{
    border-radius: 5px;
    overflow: hidden;
}
.locatormapWrapper .mapArea{
    position: relative;
}
.locatormapWrapper .mapArea {
    position: relative;
    z-index: 1;
}
.locatormapWrapper .mapArea:before{
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(70, 132, 209, 0) 0%, #21428F 100%);
    height: 218px;
    z-index: 0;
} 
.locatormapWrapper .mapArea .map{
    min-height: 800px;
}
.locatorMapAddress {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    padding: 0 20px 20px 20px;
}
.locatorMapAddress h4 {
    font-weight: 600;
    font-size: 14px;
    font-family: var(--Public);
    background: var(--bg-accent);
    color: var(--color-white);
    margin: 0;
    display: inline-block;
    padding: 6px 15px 2px 14px;
    border-radius: 4px 4px 0 0;
}
.locatorMapAddress ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    padding: 12px 20px;
    border-radius: 0px 4px 4px 4px;
}
.locatorMapAddress ul li h5{
    font-weight: 600;
    font-size: 14px;
    font-family: var(--poppins);
    color: var(--color-dark30);
    margin: 0;
    display: block;
}
.locatorMapAddress ul li span.mapIcon {
    padding-right: 5px;
}
.locatorMapAddress ul li span{
    font-weight: 400;
    font-size: 12px;
    font-family: var(--Public);
    color: var(--color-61);
}

.loactionNumber {
    background: #8547F8;
}
.loactionNumber span.activeItemCheck{
    font-weight: 400;
    font-size: 12px;
    font-family: var(--poppins);
    color: var(--bg-accent);
}
.loactionNumber {
    background: rgb(133 71 248 / 7%);
    padding: 0 10px;
    border-radius: 50px;
    height: 23px;
    line-height: 23px;
    display: flex;
    align-items: center;
}
.loactionNumber .icon {
    margin-top: -4px;
}
.leftLocation{
    margin-right: 9px;
}
.RightLocation{
    margin-left: 9px;
}
.wrapper {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}




.video-main {
    position: relative;
    display: inline-block;
}

.video {
    height: 43px;
    width: 43px;
    line-height: 38px;
    text-align: center;
    border-radius: 100%;
    background: transparent;
    color: #fff;
    display: inline-block;
    background: var(--bg-accent);
    z-index: 999;
}

@keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    50% {
        opacity: 0.9;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }

    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}


.waves {
    position: absolute;
    width: 180px;
    height: 180px;
    background: var(--bg-accent);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    border-radius: 100%;
    right: -69px;
    bottom: -69px;
    z-index: -1;
    -webkit-animation: waves 3s ease-in-out infinite;
    animation: waves 3s ease-in-out infinite;
}
.wave-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.wave-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.wave-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}


.contractFilter {
    justify-content: space-between;
    padding: 19px 40px;
}
.filterOptionWrapper {
    justify-content: space-between;
    padding: 30px 41px;
}
.contractFilterOptions .addSearchlistBtn {
    background: var(--bg-f8);
    border-radius: 15px;
    height: 29px;
    line-height: 28px;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-accent);
    border: 1px solid var(--broder-accent);
    padding: 0 10px;
    display: flex;
    align-items: center;
    display: flex;
    font-family: var(--Public);
    margin: 3px 8px 3px 0;
    min-width: 81px;
    justify-content: space-between;
}
.contractFilterOptions a.addFilterBtn.addSearchlistBtn {
    background: var(--bg-accent);
    color: var(--color-white);
    min-width: 124px;
    font-weight: 400;
}
.contractFilterOptions a.addFilterBtn.addSearchlistBtn .icon {
    margin-left: 10px;
    margin-top: -2px;
    filter: brightness(0) invert(1);
}








.contactCountSignle {
    width: 88px;
    padding: 0 14px;
    text-align: center;
    position: relative;
}
.contactsPageArea {
    padding-bottom: 120px;
}
.contactCountSignle::before {
    position: absolute;
    content: "";
    top: 6px;
    right: 0;
    background: var(--border-color-d3);
    height: 40px;
    width: 0.5px;
}
.contactCountSignle span{
font-weight: 400;
font-size: 12px;
line-height: 16px;
    font-family: var(--Public);
    display: block;
    color: var(--color-61);
}
.contactCountSignle .contactCount{
    font-weight: 400;
    font-size: 15px;
    line-height: 16px;
    margin-bottom: 5px;
}


.contactCountWrapper{
    padding: 10px 0;
    border-top:0.5px solid var(--border-input-color);
    border-bottom: 0.5px solid var(--border-input-color);
}
.swiper-slide:first-child .contactCountSignle span{
    color: var(--bg-accent);
}
.swiper-slide:first-child .contactCountSignle span.contactCountName {
    margin-top: 10px;
}

.swiper-button-disabled {
    display: none;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 14px;
    color: var(--color-accent);
    font-weight: 600;
}









/*.datatableArea {
    padding: 35px 41px;
}*/
select.form-control {
    display: inline;
    width: 200px;
    margin-left: 25px;
}
.dataTables_wrapper .dataTables_scroll {
    clear: both;
    padding-top: 19px;
}
table {
    background-color: transparent;
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0 7px;
}
table.dataTable tbody tr {
    background-color: transparent;
}
table.dataTable tbody tr {
    border: none;
}
table.dataTable tbody th,
table.dataTable tbody td {
    padding: 5px 15px;
    border-top: 3px solid #F8F8F8;
    border-bottom: 3px solid #F8F8F8;
    background: var(--bg-white);
    font-weight: 400;
    font-size: 11px;
    color: var(--color-61);
    font-family: var(--Public);
    height: 45px;
}
table.dataTable tbody td:first-child {
    border-radius: 8px 0px 0px 8px !important;
}
table.dataTable tbody td:last-child {
    border-radius: 0px 8px 8px 0px !important;
}
table.dataTable thead th{
    padding: 5px 18px;
    border-bottom: none;
}
table.dataTable thead th{
    font-weight: 600;
    font-size: 11px;
    color: var(--color-61);
    font-family: var(--Public);
}
table.dataTable img {
    margin-right: 6px;
    margin-top: -1px;
}
.ratingCity {
    display: inline-flex; 
    align-items: center;
    margin-right: 6px;
}
td .ratingCity span,
td .ratingCity span.check {
    display: block;
    height: 10px;
    width: 2px;
    background: var;
    background: var(--bg-accent);
    margin-right: 2px;
    min-width: auto !important;
}
td .ratingCity span {
    background: #D9D9D9;
}
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--broder-accent);
    border-radius: 4px;
    padding: 5px;
    background-color: transparent;
    margin-left: 5px;
    height: 29px;
}
div#dtStatusSent_length label, div#dtStatusSent_filter, div#dtStatusSent_info {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-61);
}

/*table.dataTable thead .sorting {
    background-image: url("../img/icons/up-down-arrow.svg");
}
table.dataTable thead .sorting_asc {
    background-image: url("../img/icons/arrow-up.svg");
}
table.dataTable thead .sorting_desc {
    background-image: url("../img/icons/arrow-down.svg");
}
table.dataTable thead th.sorting:first-child {
    background-image: unset;
}
table.dataTable thead th.sorting_asc:first-child {
    background-image: unset;
}
table.dataTable thead th.sorting_desc:first-child {
    background-image: unset;
}*/
div#filterTable_length, div#filterTable_filter{
    margin-bottom: 21px;
}
div#filterTable_length label, div#filterTable_info, .paginate_button {
    font-size: 14px;
    color: var(--color-61);
    font-family: var(--Public);
    font-weight: 400;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none;
}
dataTables_scrollBody {
  width: 100px !important;
  margin-left: -325px !important;
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  background-color: transparent;
  padding: 2px;
  font-size: 12px;
}
.dataTables_wrapper .paginate_button {
    border: none !important;
    width: auto;
    padding: 0 10px !important;
}
.dataTables_wrapper .paginate_button:hover{
    background: var(--bg-accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: var(--color-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    pointer-events: none;
}
select#categoryFilter {
    display: none;
}

















/* ================================================================
                            My Week Page Area
================================================================== */
.myWeekPageArea {
    display: flex;
}
.dealerWeekInfoWrapper {
    display: flex;
    padding: 0px 38px 34px 41px;
}
.myWeekcontent .contractFilter {
    padding: 19px 38px 19px 41px;
}
.myWeekcontent .contractFilterOptions ul li a{
    margin: 0;
}
.WCDstatus{
    padding-bottom: 120px;
}
.dealerWeekInfoWrapper {
    display: flex;
}
.myWeekcontent {
    width: 75%;
    margin-bottom: 0px;
}
.dayTaskPage .myWeekcontent {
    width: 75%;
    margin-bottom: 0px;
    background: url('../img/illustrations/shapes/dots-bg.png');
    padding-bottom: 120px;
}
.rightSideNotifications {
    border-left: 0.5px solid var(--border-separate-color);
    width: calc(100% - 75%);
    background: var(--bg-white);
    padding-bottom: 100px;
}


.dealerWeekInfo.sigleBox {
    padding: 26px 34px;
    margin-right: 14px;
    width: 45%;
}
.dWinfoHeader {
    display: flex;
    justify-content: space-between;
    padding-right: 40px;
}

.dealerWeekInfo .dWinfoHeader h4{
    margin-bottom: 0;
    font-weight: 600;
    font-size: 14px;
    font-family: var(--poppins);
    color: var(--color-dark30);
}
.dealerWeekInfo .dWinfoHeader p {
    margin: 0;
    font-weight: 400;
    font-size: 12px;
    color: var(--color-96);
    font-family: var(--Public);
}
.dWinfoHeader .dInfoLogo img{
    max-width: 150px;
}
ul.DWinfoStep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    padding: 0;
    border-radius: 0px 4px 4px 4px;
    flex-wrap: wrap;
}
ul.DWinfoStep li {
    width: 50%;
    padding-top: 40px;
    display: flex;
    align-items: center;
}

ul.DWinfoStep li h5 {
    font-weight: 700;
    font-size: 12px;
    font-family: var(--poppins);
    color: var(--color-dark30);
    margin: 0;
    display: block;
}
ul.DWinfoStep li span.mapIcon {
    padding-right: 20px;
    margin-top: 5px;
}

ul.DWinfoStep li span {
    font-weight: 400;
    font-size: 12px;
    font-family: var(--poppins);
    color: var(--color-96);

}
.dealerWeekInfo .dWContent p {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    font-family: var(--Public);
    color: var(--color-61);
    margin: 0;
    padding-top: 30px;
}
.dealerWeekInfo .dWContent p a{
    color: var(--color-6a);
}





.chartBox.sigleBox {
    width: calc(100% - 45%);
}
.chartBox canvas {
    max-width: 700px !important;
    max-height: 240px !important;
}
.scheduleEmails{
    justify-content: space-between;
}
.scheduleEmails .sEmailsTitle h4, .scheduleEmails .sEmailsTitle span.dayResultShow{
font-weight: 600;
font-size: 14px;
font-family: var(--poppins);
color: var(--color-30);
margin: 0;
}
.scheduleEmails .sEmailsTitle span.dayResultShow {
    color: var(--color-96);
    font-weight: 400;
    margin-left: 15px;
}
.scheduleEmails .sEmailsTitle span.smcalculate {
    font-weight: 500;
    font-size: 12px;
    color: var(--bg-accent);
    font-family: var(--Public);
    margin-left: 20px;
}









.progressStatements {
    display: flex;
    justify-content: space-between;
    background: var(--bg-white);
    padding: 25px 38px 50px 41px;
}
.ProStatementSingleBox h4 {
    font-weight: 700;
    font-size: 14px;
    font-family: var(--poppins);
    color: var(--color-30);
    margin: 0;
    margin-bottom: 13px;
}
.ProStatementSingleBox ul {
    display: flex;
}
.ProStatementSingleBox ul li {
    width: 91px;
    height: 116px;
    border-radius: 4px;
    border: 0.5px solid var(--border-input-color);
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    border-bottom: 4px solid var(--color-accent);
    margin-right: 8px;
}
.ProStatementSingleBox ul li:last-child{
    margin-right: 0;
}
.ProStatSingleItem span{
    font-weight: 500;
    font-size: 25px;
    font-family: var(--poppins);
    color: var(--color-30);
}
.ProStatSingleItem p{
    font-weight: 400;
    font-size: 12px;
    color: var(--poppins);
    color: var(--color-96);
    margin: 0;
}
.separetorBorder span {
    display: inline-grid;
    width: 5px;
    background: #969696;
    height: 1px;
    margin-right: -2px;
}


.contactScheduleWrapper {
    background: var(--bg-white);
}
.schedulHeading {
    padding: 12px 38px 12px 41px;
    background: var(--bg-primary);
    border-top: 0.5px solid var(--border-separate-color);
    border-bottom: 0.5px solid var(--border-separate-color);
}
.swiper.scheduleToday {
    padding: 12px 0 12px 12px;
}





.notificationMainHeading {
    background: var(--bg-white);
    height: 60px;
    padding: 0 5px 0 29px;
}
.notificatioHeading {
    padding: 0 38px 0px 29px;
    background: var(--bg-primary);
    border-top: 0.5px solid var(--border-separate-color);
    border-bottom: 0.5px solid var(--border-separate-color);
    height: 32px;
    display: flex;
    align-items: center;
}
.notificatioHeading h5{
    font-weight: 700;
    font-size: 12px;
    font-family: var(--poppins);
    color: var(--color-30);
    margin: 0;
}

.massageContentBox {
    padding-right: 15px;
}
.notificaitonWrapper ul li {
    font-weight: 400;
    font-size: 12px;
    font-family: var(--Public);
    color: var(--color-61);
    border-bottom: 1px solid var(--border-separate-color);
    padding: 10px 24px 10px 27px;
    background: var(--bg-white);
}
.notificaitonWrapper ul li a{
    color: var(--color-4f);
}
.notificaitonWrapper ul li p{
    margin: 0;
}
.notificaitonWrapper ul li span.notificationTime {
    padding-bottom: 3px;
    display: block;
}
.notificaitonWrapper ul li span.notificationTime .icon {
    margin-right: 5px;
}
.notificaitonWrapper ul li .name {
    padding-bottom: 3px;
}
.massageOptions .icon{
    color: var(--color-84);
    font-size: 10px;
}
.MSGOption {
    position: relative;
    height: 20px;
    width: 20px;
    text-align: right;
    cursor: pointer;
}
.MSGOption ul {
    position: absolute;
    top: 100%;
    right: 0;
    border: 1px solid var(--broder-accent);
    min-width: 104px;
    padding: 6px;
    background: var(--bg-white);
    border-radius: 4px 0 4px 4px;
}
.MSGOption ul li {
    border: none;
    padding: 0;
    background: transparent;
    text-align: left;
}
.MSGOption ul li a {
    color: var(--color-61);
    width: 100%;
    display: inline-block;
    font-size: 12px;
}
.MSGOption ul li a:hover{
    color: var(--color-accent);
}

ul.toggleBTNItem {
    display: none;
    transition: var(--3s);
}

.massageOption.ItemShow .toggleBTNItem{
    display: block;
}
.massageStyle5 p{
    font-weight: 400;
    font-size: 10px;
    color: var(--color-96);
    line-height: 18px;
    margin-top: 5px !important;
}
.massageStyle5 p a{
    font-weight: 400;
    font-size: 12px;
    color: var(--color-accent);
}
.notificationMainHeading .select .selectBtn {
    color: var(--color-61);
    border: none;
    line-height: 29px;
}
.notificationMainHeading .select .selectBtn:after {
    border: none;
    background-image: url('../img/icons/notification/notification-filter.svg');
    transform: unset;
    height: 12px;
    width: 11px;
    top: 12px;
}

.notificaitonWrapper {
    background: var(--bg-white);
}

.rightSideNotifications.complatedTaskNotification .massageContentBox {
    display: flex;
    width: 100%;
    padding-right: 0;
    border-left: 0.5px solid var(--border-separate-color)
}
.rightSideNotifications.complatedTaskNotification .notificaitonWrapper ul li {
    padding: 0;
    margin-left: 38px;
    border: none;
}

.rightSideNotifications.complatedTaskNotification .massageContent {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.5px solid var(--border-separate-color);
    margin-left: 20px;
    padding: 16px 20px 16px 14px;
}
.rightSideNotifications.complatedTaskNotification .notificationIcon span {
    background: var(--bg-primary);
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 27px;
    display: block;
    border-radius: 50%;
    margin-top: 14px;
    margin-left: -15px;
}
.rightSideNotifications.complatedTaskNotification .notificationIcon span img {
    width: 15px;
}
.rightSideNotifications.complatedTaskNotification .notificaitonWrapper ul li span.notificationTime {
    padding-bottom: 3px;
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: var(--color-61);
}
.rightSideNotifications.complatedTaskNotification  ul.toggleBTNItem li {
    padding: 0;
    margin-left: 0;
    border: none;
}
.rightSideNotifications.complatedTaskNotification p{
    font-weight: 400;
    font-size: 12px;
    font-family: var(--Public);
    color: var(--color-96);
}
.rightSideNotifications .massageStyle2 .notificationTime, .rightSideNotifications .massageStyle2 .AcomplatedTalk{
    font-weight: 400;
    font-size: 12px;
    font-family: var(--Public);
    color: var(--color-61);
}
.rightSideNotifications .massageStyle2 .AcomplatedTalk {
    padding: 2px 0 3px 0;
    font-weight: 700;
}
.rightSideNotifications .massageStyle2 .notificationIcon span {
    background: var(--bg-ee);
}
.rightSideNotifications .massageStyle2 .notificationIcon span {
    line-height: 28px;
}
.rightSideNotifications .massageStyle2 .notificationIcon span img {
    max-width: 16px;
    width: auto;
}











.taskFilterWrapper {
    background: var(--bg-white);
    border-bottom: 0.5px solid var(--border-separate-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.taskFilterWrapper .taskCountItems {
    display: flex;
    align-items: center;
    padding: 19px 0;
}

.taskFilterWrapper .taskCountItems .taskCountSinlge {
    padding: 0 14px;
    text-align: center;
    position: relative;
    width: 104px;
}
.taskFilterWrapper .taskCountItems .taskCountSinlge::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    background: var(--border-color-d3);
    height: 40px;
    width: 0.5px;
    transform: translateY(-50%);
}
.taskFilterWrapper .taskCountItems .taskCountSinlge:last-child::before{
    display: none;
}
.taskFilterWrapper .taskCountItems .taskCountSinlge:first-child span {
    color: var(--bg-accent);
}
.taskFilterWrapper .taskCountItems .taskCountSinlge span {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    font-family: var(--Public);
    display: block;
    color: var(--color-61);
}
.taskFilterWrapper .smBtn{
    color: var(--color-accent);
}
.taskFilterWrapper .addSearchlistBtn{
    font-weight: 400;
    font-family: var(--Public);
}
.taskFilterWrapper .addBrandList li{
    margin-right: 15px;
}
.taskFilterWrapper .addBrandList li:last-child{
    margin-right: 0;
}
.taskFilterWrapper .stepUpdate{
    margin-left: 10px;
}
.taskFilterWrapper {
    padding: 0 38px 0 10px;
}



.allDayTask {
    padding: 41px 41px 120px 41px;
    overflow-y: scroll;
    height: 100vh;
}
.allDayTask::-webkit-scrollbar {
    display: none;
}
.allDayTask .taskSingleDay {
    text-align: center;
}
.allDayTask .taskSingleDay .dayStepName {
    align-items: center;
    height: 21px;
    margin-bottom: 29px;
    margin-top: 18px;
    position: relative;
    z-index: 2;
}
.allDayTask .taskSingleDay .dayStepName span{
    background: var(--bg-white);
    display: inline-block;
    border-radius: 15px;
    line-height: 21px;
    padding: 0 8px;
    color: var(--color-accent);
    font-weight: 600;
    font-size: 12px;
    font-family: var(--poppins);
}
.allDayTask .taskSingleDay .dayStepName.stepOne::before,
.allDayTask .taskSingleDay .dayStepName.stepTwo::before {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    height: 18px;
    width: 1px;
    z-index: 0;
    border-right: 0.5px solid var(--border-input-color);
}
.allDayTask .taskSingleDay .dayStepName.stepTwo::after {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    top: 11px;
    height: 18px;
    width: 180px;
    z-index: 0;
    border-top: 0.5px solid var(--border-input-color);
    border-left: 0.5px solid var(--border-input-color);
    border-right: 0.5px solid var(--border-input-color);
    z-index: -1;
}
.taskItems{
        display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.taskItem{
    background: var(--bg-white);
    padding:  22px 22px 15px 14px;
    border: 0.5px solid var(--border-input-color);
    box-shadow: 0px 0px 10px 4px rgba(52, 38, 145, 0.12);
    border-radius: 6px;
    margin-bottom: 14px;
    width: 100%;
}
.taskItem:nth-child(odd) {
    margin-right: 1%;
}
.taskItem:last-child {
    margin-right: 0;
}
.allDayTask .taskItem .titleAndAction .icon{
    margin-right: 8px;
}
.allDayTask .taskItem .titleAndAction h4{
font-weight: 700;
font-size: 14px;
font-family: var(--poppins);
color: var(--color-dark30);
}


.allDayTask .addAndEditOptionBtn{
    border: 0.5px solid var(--bg-accent);
    color: var(--color-accent);
    font-weight: 500;
    font-size: 12px;
    font-family: var(--Public);
    transition: var(--3s);
}
.allDayTask .addAndEditOptionBtn:hover {
    background: var(--bg-accent);
    color: var(--color-white);
}
.allDayTask .addAndEditOptionBtn .icon {
    margin-left: 7px;
    margin-top: -1px;
    transition: var(--3s);
}
.allDayTask .addAndEditOptionBtn:hover .icon{
filter: brightness(0) invert(1);
}
.allDayTask .taskOption {
    display: flex;
    align-items: center;
}
.taskHeader {
    border-bottom: 0.5px solid var(--border-separate-color);
    padding-bottom: 15px;
}
.taskHeader .item-header img {
    margin-right: 10px;
    margin-top: -3px;
}
.taskTeamDrag {
    height: 28px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: left;
    cursor: grab;
}
.allDayTask .MSGOption {
    position: relative;
    height: 20px;
    width: 20px;
    text-align: right;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: right;
}
.allDayTask a.status {
    background: rgb(255 194 122 / 30%);
    height: 20px;
    line-height: 19px;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 15px;
    color: #F57B36;
    font-weight: 500;
    margin-left: 14px;
}
.allDayTask a.status.accepted{
    background: rgb(255 194 122 / 30%);
    color: #F57B36;
}
.allDayTask a.status.due {
    background: rgb(97 83 251 / 30%);
    color: var(--color-accent);
}

.allDayTask a.status.active {
    background: #D6FEC1;
    color: #418D5A;
}



.taskList{
    text-align: left;
    padding-top: 15px;
}
.taskList .switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
    margin-right: 15px;
}
.taskList .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.taskList .slider {
    position: absolute;
    content: '';
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #5EC980; 
    transition: 0.4s;
}

.taskList .slider:before {
    position: absolute;
    content: "";
    height: 9px;
    width: 9px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

.taskList input:checked+.slider {
    background-color: var(--bg-accent);
}

.taskList input:focus+.slider {
    box-shadow: none;
    outline: none;
}

.taskList input:checked+.slider:before {
    transform: translateX(14px);
}
.taskList .slider.round {
    border-radius: 34px;
}

.taskList .slider.round:before {
    border-radius: 50%;
}
.taskList li{
    padding-left: 29px;
}
.taskList li h4{
    font-family: var(--poppins);
}

.taskList li h4 span {
    font-weight: 600;
    font-size: 12px;
    color: var(-);
    color: var(--color-b3);
}

.taskList li h4 a {
    font-weight: 400;
    color: var(--color-4f);
    margin-left: 10px;
}







.notificationtabBtn{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 30px;
}
.notificationtabBtn span{
    width: 50%;
    color: var(--color-dark30);
    font-family: var(--poppins);
    font-weight: 400;
    font-size: 13px;
    text-align: center;
    border-bottom: 2px solid transparent;
    padding-bottom: 8px;
}
.notificationtabBtn span.active{
    border-bottom: 2px solid var(--broder-85);
    color: var(--color-accent);
    font-weight: 700;
    font-size: 13px;

}

ul.headNotificationSingle {
    display: inline-grid;
}
li.HNcountbox {
    display: flex;
    justify-content: space-between;
    
}
span.HNcount {
    font-weight: 600;
    font-size: 11px;
    margin-right: 10px;
}
span.HNcount.active {
    font-weight: 600;
    font-size: 11px;
    color: var(--color-accent);
}
.headNotificationSingle img {
    height: auto;
    width: 13px;
    margin-top: -2px;
    margin-right: 8px;
}
.headNotificationSingle li {
    padding: 0 !important;
    margin-right: 0px;
    font-size: 14px;
    margin-bottom: 11px;
    font-weight: 400;
    font-size: 11px;
    color: var(--color-96);
    border: none !important;
    display: flex;
    align-items: center;
}
.headNotificationSingle li:last-child {
    margin-bottom: 0px;
}
.headNotificationSingle ul.userList{
    margin-right: 10px;
}
.headNotificationSingle ul.userList li img {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 1px solid white;
    margin: 0;
}
ul.notificationList li {
    border-bottom: 0.5px solid var(--border-separate-color);
    padding: 18px 26px;
}
ul.notificationList li:last-child {
    border-bottom: none !important;
}
.notificationList .HNItemSignle{
    display: flex;
    justify-content: space-between;
}
.HNItemSignle .labels{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    display: inline-block;
}
.HNItemSignle .labels span {
    background: rgba(97, 83, 251, 0.07);
    color: var(--bg-accent);
    padding: 0px 7px 2px;
    border-radius: 17px;
    margin-right: 5px;
}






.taskNotificationModal2 {
    padding: 26px 28px 21px 28px;
}


.Mstyle1 .modalBodyWrapper {
    border-top: 0.5px solid var(--border-separate-color);
    padding-top: 19px;
}
.notificationModal1 .modalHeader {
    text-align: center;
    padding: 0 28px;
}
.notificationModal1 .greenNotification {
    margin-top: 10px;
}

.Mstyle1 .modal-body {
    padding: 14px 28px;
}
.Mstyle1 .select {
    height: 33px;
}
.Mstyle1 .select .selectBtn {
    background: var(--bg-white);
    border-radius: 4px;
    height: 33px;
    line-height: 33px;
    font-weight: 400;
    font-size: 11px;
    color: var(--color-96);
    border: 0.5px solid var(--border-separate-color);
    padding: 0 15px 0 10px;
    display: flex;
    align-items: center;
    display: inline-block;
    font-family: var(--Public);
    margin: 0px 12px 0px 0;
    min-width: 100%;
}
.Mstyle1 .modalClose{
    font-weight: 700;
    font-size: 12px;
    color: var(--color-61);
}
.Mstyle1 .modalClose span{
    color: var(--color-accent);
    cursor: pointer;
}


.Mstyle1 .dashBodyFilter .form-check {
    min-height: 33px;
    padding-right: 9px;
    padding-left: 32px;
    margin-bottom: -3px;
    margin-right: 11px;
    border-radius: 4px;
    box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.07);
    width: 49%;
}
.Mstyle1 .dashBodyFilter label.form-check-label {
    font-weight: 400;
    font-size: 12px;
    width: 100%;
    height: 33px;
    line-height: 31px;
}
#addDealerLocation .modal-body, #addProspect .modal-body, #addStep .modal-body{
    padding-top: 21px !important;
}



.prospectHeader {
    background: var(--bg-primary);
    height: 63px;
    display: flex;
    border-bottom: 0.5px solid var(--border-separate-color);
    padding: 0 21px 0 30px;
}
.ProspectHleft span{
    font-weight: 700;
    font-size: 15px;
    color: var(--color-accent);
}
.prospectBtn li a {
    height: 26px;
    padding: 0 15px;
    background: var(--bg-white);
    display: block;
    line-height: 23px;
    border-radius: 15px;
    font-weight: 400;
    font-size: 12px;
    border: 0.5px solid var(--broder-accent);
    margin-left: 10px;
    transition: var(--3s);
}
.prospectBtn li a.active, .prospectBtn li a:hover{
    background: var(--bg-accent);
    color: var(--color-white);
}


.prospectFrom form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.prospectFrom {
    height: 100vh;
    padding-bottom: 150px;
    overflow-y: scroll;
}
.prospectFrom .locatorArea {
    padding: 40px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
}
.PFHeader {
    border-bottom: 1px solid var(--border-separate-color);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.prospectFrom .smBtn{
    margin-top: 15px;
}
.proHighlishtItem input {
    background: #F5F7FF;
    border-radius: 4px;
    border: none;
    width: auto;
    margin-right: 10px;
}
.inputWithCloseIcon {
    position: relative;
    width: max-content;
}
.iWCicon {
    position: absolute;
    top: 13px;
    right: 19px;
    cursor: pointer;
    opacity: 0.8;
    width: 8px;
}


.prospectControl {
    box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.07);
    height: 33px;
    line-height: 33px;
    padding: 0 15px;
    border-radius: 4px;
    margin-left: 30px;
}
.prospectControl span{
    font-size: 12px;
    font-weight: 400;
    color: var(--color-6a);
    margin-right: 5px;
    cursor: pointer;
}
.prospectControl span:hover{
    color: var(--color-accent);
}


ul.userList {
    display: flex;
    margin-left: 9px;
}
ul.userList li {
    margin-left: -7px;
    margin-bottom: 0;
}
ul.userList li:first-child{
    margin-left: 0;
}
ul.userList li img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 1px solid white;
    margin: 0;
}
agm-map {
  height: 300px !important;
  width: 100%; /* This is really important*/
}