:root {
    --light_blue: #6353D3;
    --super_light_blue: #cdc6ff;
    --dark_blue: #412DA8;
    --my_orange: #febe50;
    --glow_blue: #0ADCD4;
    --my_gray: #4D4D4D;
    --my_gray_light: #00000030;
    --my_pink: #FE5996;
    --light_pink: #ffc7dc;
    --my_red: #F75658;
    --my_green: #49995c;
    --my_dark_orange: #EE6C4D;
    --my_maroon: #D81159;
    --my_yellow: #FFCD24;
}

.openlead, .notcalled{
    background-color:var(--light_blue);
}
.proposalsent, .qualified, .calllater{
    background-color: var(--my_orange);
}
.followup, .meetingscheduled, .leadlost, .notanswered{
    background-color: var(--my_red);
}
.negociation , .wrongnumber{
    background-color: var(--dark_blue);
}
.aggreementsent, .demo , .showinginterest{
    background-color: var(--my_dark_orange);
}
.leadhold, .demo_scheduled , .answered{
    background-color: var(--my_maroon);
}

.leaddone{
    background-color:var(--super_light_blue);
}

.rejected{
    background-color:var(--my_gray);
}

.leadwon{
    background-color:var(--my_green);
}



.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@keyframes card_enter_anim{
    0%{
        transform: scale(0.95);
        opacity: 0;
    }
    40%{
        transform: scale(1.05);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

.scroll_card {
    /*box-shadow: -7px -7px 10px 0px #fbfbfb99, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;*/
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    transition: all ease-in-out 0.3s;
    position: relative;
    opacity: 0;
}

@keyframes card_hide{
    0%{
        margin-bottom: 20px;
        padding: 10px;
        opacity: 1;
        max-height: 1000px;
    }
    99%{
        padding: 10px;
    }
    100%{
        box-shadow: none;
        margin-bottom: 0px;
        padding: 0px;
        opacity: 0;
        max-height: 0px;
    }
}

.scroll_card.hide{
    overflow: hidden;
    animation: 0.5s 0s 1 card_hide forwards;
}

.scroll_card.show{
    overflow: hidden;
    animation: 0.5s ease-in-out 0s 1 reverse card_hide forwards;
}

.search_card {
    /*box-shadow: -7px -7px 10px 0px #fbfbfb99, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;*/
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    position: relative;
}

.static_card {
    /*box-shadow: -7px -7px 10px 0px #fbfbfb99, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;*/
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    position: relative;
}

.b-r{
    border-right: 1px solid #00000020;
}
.b-l{
    border-left: 1px solid #00000020;
}
.b-t{
    border-top: 1px solid #00000020;
}
.b-b{
    border-bottom: 1px solid #00000020;
}

.scroll_card.selected{
    border: 2px solid var(--dark_blue);
    background-color: var(--super_light_blue);
}

.card_container{
    /*background-color: #f0f0f0;*/
    background-color:white;
    margin-top: -40px;
    height:calc(100vh - 84px);
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
    padding: 20px 20px 70px 20px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

.call_prio{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 5px;
    border-radius: 10px 0px 0px 10px;
}

.call_prio.high{
    background-color: var(--my_red);
}

    .call_prio.med {
        background-color: var(--light_blue);
    }

    .call_prio.low {
        background-color: var(--my_green);
    }

.top_status{
    position: absolute;
    top: 0px;
    right: 0px;
    padding:5px 10px;
    font-size: 12px;
    color: white;
    display: inline-block;
    border-radius: 0px 10px 0px 10px;
}

.top_status.red{
    background-color: var(--my_red);
}

.top_status.green{
    background-color: var(--my_green);
}

.top_status.blue{
    background-color: var(--light_blue);
}

.top_status.orange{
    background-color: var(--my_orange);
}

.lead_type{
    position: absolute;
    top: 0px;
    right: 0px;
    padding:5px 10px;
    font-size: 12px;
    color: white;
    border-radius: 0px 10px 0px 10px;
}

    .lead_type.down {
        bottom: 0;
        top: auto;
        border-radius: 5px 5px 10px 5px;
    }

.lead_type.follow{
    background-color: var(--my_dark_orange);
}

.lead_type.new{
    background-color: var(--light_blue);
}

.lead_type.won{
    background-color: var(--my_green);
}

.lead_type.green{
    background-color:var(--my_green);
}

.single_line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.single_line_scroll {
    white-space: nowrap;
    overflow: scroll;
    text-overflow: ellipsis;
}

@keyframes filter_enter_anim{
    0%{
        transform: translateY(-150%);
        opacity: 0;
    }
    100%{
        transform: none;
        opacity: 1;
    }
}

.scroll_filter {
    padding: 5px 10px;
    /*box-shadow: -7px -7px 10px 0px #fbfbfb99, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;*/
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    border-radius: 10px;
    display: inline-block;
    margin-right: 10px;
    transition: all 0.3s;
    opacity: 0;
}

.scroll_filter_new {
    padding: 10px 20px;
    color:white;
    display:inline-block;
    border-bottom:5px solid transparent;
    transition:all ease-in-out 0.3s;
}

.scroll_filter_new.active{
    border-bottom:5px solid white;
}

.filter_btn {
    padding: 5px 10px;
    /*box-shadow: -7px -7px 10px 0px #fbfbfb99, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;*/
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    border-radius: 10px;
    display: inline-block;
    margin-right: 10px;
    transition: all 0.3s;
    margin-bottom: 10px
}

.filter_btn.active {
    background-color: var(--my_green);
    color: white;
}

.scroll_filter.active{
    background-color: var(--my_green);
    color: white;
}

.red_btn {
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    background-color: var(--my_red);
    color:white;
}

.blue_btn{
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid var(--light_blue);
}


.blue_btn.active{
    background-color: var(--light_blue);
    color: white;
}

.green_btn {
    padding: 5px 20px;
    border-radius: 50px;
    display: inline-block;
    color:white;
    background-color:var(--my_green);
}

.show_all_btn {
    padding: 5px 20px;
    border-radius: 50px;
    display: inline-block;
    color: var(--my_gray);
    transition:all ease-in-out 0.3s;
    border:1px solid var(--my_gray);
}

.show_all_btn.active{
    background-color:var(--my_green);
    color:white;
}

.green_btn_rect {
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    color: white;
    background-color: var(--my_green);
}

.modal_option_top{
    padding:5px;
    border-radius:5px;
    transition:all 0.3s;
}

.modal_option_top.active{
    background-color:var(--light_blue);
    color:white;
}

.filter_bar {
    overflow-x: scroll;
    white-space: nowrap;
    padding: 10px 10px 40px 10px;
    margin-bottom: -20px;
    border-radius: 10px;
    background-color:white;
}

.filter_bar::-webkit-scrollbar{
    display: none;
}

.filter_bar.sticky{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: 10px;
    border-radius: 0px 0px 10px 10px;
}

.option_bar {
    overflow-x: scroll;
    white-space: nowrap;
    padding: 10px 10px 40px 10px;
    margin-bottom: -20px;
    border-radius: 10px;
}

    .option_bar::-webkit-scrollbar {
        display: none;
    }

    .option_bar.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #f0f0f0;
        padding: 10px;
        border-radius: 0px 0px 10px 10px;
    }

.small_title{
    font-size: 12px;
    color: var(--my_green);
}

.small_icon{
    background-color: var(--dark_blue);
    color: white;
    padding: 10px;
    border-radius: 50px;
    border:2px solid white;
}

.small_i_icon{
    font-size: 12px;
    padding-right: 5px;
    color: var(--my_dark_orange);
}

.contact_pic{
    width: 80px;
    height: 80px;
}

.back_btn{
    color: white;
    font-size: 24px;
}

.modal_input{
    margin-bottom: 10px;
}

.my_select_btn{
    padding: 5px 10px;
    border-radius: 10px;
    transition: all 0.3s;
}

.my_select_btn.active{
    background-color: var(--light_blue);
    color: white;
}

.addrow{
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    scroll-snap-align: start;
}

.addrow::-webkit-scrollbar{
    display: none;
}

.add_tab_title{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    margin-right: 15px;
    transition: all 0.3s;
}

.add_tab_title.active{
    background-color: var(--my_green);
    color: white;
}

.scroll_col{
    overflow-x: scroll;
    white-space: nowrap;
    padding-bottom: 20px;
    scroll-behavior: smooth;
}

.scroll_col.snap{
    scroll-snap-type:x mandatory;
}

.scroll_col::-webkit-scrollbar{
    display: none;
}

.file_block{
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #00000030;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    overflow: visible;
}

.file_block > img{
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.file_delete{
    position: absolute;
    font-size: 20px;
    top: -10px;
    right: -10px;
    color: var(--my_red);
}

/*New Bottom Menu*/
.bottom_menu_new {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 997;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
    background-color: white;
    box-shadow: 0px -10px 10px #00000030;
}

.bottom_menu_col{
    padding:5px 0px;
}

.bottom_menu_col.active {
    background-color:var(--light_blue);
    color:white;
    border-radius:10px;
}

.bottom_menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
    background-color: white;
    box-shadow: 0px -10px 10px #00000030;
}

.bottom_menu_item{
    color: gray;
    display: inline-block;
    margin-right: 24px;
    border-radius: 50px;
    border: 1px solid #00000000;
    padding: 5px 10px;
    transition: all ease-in-out 0.3s;
}

.bottom_menu_item.active > i{
    margin-right: 5px;
}

.bottom_menu_item > i{
    pointer-events: none;
    font-size: 18px;
}

.bottom_menu_item > div{
    display: inline-block;
    max-width: 0px;
    pointer-events: none;
    overflow: hidden;
    margin-bottom: -5px;
    transition: all ease-in-out 0.3s;
}

.bottom_menu_item.active{
    background-color: var(--super_light_blue);
    border: 1px solid var(--dark_blue);
    color: var(--dark_blue);
    border-radius: 50px;
}

.bottom_menu_item.active > div{
    max-width: 500px;
}

.card_title{
    font-size: 18px;
    line-height: 22px;
    padding-bottom: 5px;
}

.donut_center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.last_month{
    position: absolute;
    bottom: 0px;
}

.done_count{
    font-size: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#loader{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 100;
    overflow: hidden;
}

#loader::-webkit-scrollbar{
    display: none;
}

@keyframes loaderanim{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

#loader > div{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 40px;
    transform: translate(-50%, -50%);
}

#loader > div > i{
    animation: 1s linear 0s infinite loaderanim;
}

.my_canvas_chart{
    border-radius: 50%;
    padding: 5px;
}

.srch_input{
    border-radius: 10px;
}

.hove_plus{
    transition: all 0.3s;
}

.scroll_container{
    position: relative;
    overflow-x: scroll;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    padding-top: 20px;
    scroll-behavior: smooth;
}

.scroll_container::-webkit-scrollbar{
    display: none;
}

.mytabs{
    display: inline-block;
    scroll-snap-align: start;
    padding-inline: 20px;
}

.modal_scroll_menu{
    overflow-x: scroll;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.modal_scroll_menu::-webkit-scrollbar{
    display: none;
}

.task_toggle{
    position: absolute;
    bottom: 0;
    right: 0;
}

.task_toggle > img{
    width: 70px;
    height: 70px;
    pointer-events: none;
}

.light_streak{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    margin-left: -200px;
    transition: all 0.5s;
    opacity:0;
}

.light_streak.active{
    margin-left: 100%;
    opacity:1;
}

.contacts_bottom_value{
    font-size: 30px;
    font-weight: 600;
}

.contacts_bottom_title{
    font-size: 14px;
    padding: 5px;
    border-radius: 10px;
    margin-inline: -5px;
    margin-top: -10px;
    color: white;
}

.contact_box.blue{
    border: 1px solid var(--light_blue);
}

.contact_box.orange{
    border: 1px solid var(--my_dark_orange);
}

.contact_box.green{
    border: 1px solid var(--my_green);
}

.contact_box.blue > .contacts_bottom_title{
    background-color: var(--light_blue);
}

.contact_box.orange > .contacts_bottom_title{
    background-color: var(--my_dark_orange);
}

.contact_box.green > .contacts_bottom_title{
    background-color: var(--my_green);
}

.myframe{
    width: 100%;
    height: 100vh;
}

.lead_card_icon{
    font-size: 20px;
    padding: 10px;
    color: white;
    border-radius: 50px;
}

.lead_card_icon.blue{
    background-color: var(--light_blue);
}

.lead_card_icon.green{
    background-color: var(--my_green);
}

.lead_card_icon.red{
    background-color: var(--my_red);
}

.lead_card_icon.orange{
    background-color: var(--my_orange);
}

.lead_card_icon.light_blue{
    background-color: var(--glow_blue);
}

.lead_count{
    font-size: 30px;
    line-height: 34px;
    font-weight: 600;
}

.lead_card_head{
    padding: 5px 10px;
    color: white;
    display: inline-block;
    border-radius: 5px 5px 0px 0px;
}

.lead_card_head.blue{
    background-color: var(--light_blue);
}

.lead_card_head.green{
    background-color: var(--my_green);
}

.lead_card_head.orange{
    background-color: var(--my_orange);
}

.lead_card_head.light_blue{
    background-color: var(--glow_blue);
}

.lead_card_box{
    border-radius: 0px 0px 5px 5px;
    overflow-x: scroll;
    white-space: nowrap;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.no_item{
    display: inline-block;
    padding: 5px 10px;
}

.lead_card_box::-webkit-scrollbar{
    display: none;
}

.lead_card_box.blue{
    border: 1px solid var(--light_blue);
}

.lead_card_box.green{
    border: 1px solid var(--my_green);
}

.lead_card_box.orange{
    border: 1px solid var(--my_orange);
}

.lead_card_box.light_blue{
    border: 1px solid var(--glow_blue);
}

.my_scroll_card{
    width: 100%;
    scroll-snap-align: center;
    display: inline-block;
    padding: 5px 10px;
}

.round_icon_ring{
    padding: 10px;
    border-radius: 50px;
    font-size: 20px;
}

.round_icon_ring.blue{
    border: 1px solid var(--light_blue);
    color: var(--light_blue);
}

.round_icon_ring.orange{
    border: 1px solid var(--my_dark_orange);
    color: var(--my_dark_orange);
}

.shadow_card {
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 10px;
    transition: all 0.3s;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
}

.shadow_card.selected{
    background-color: var(--super_light_blue);
    border: 1px solid var(--light_blue);
    color: var(--dark_blue);
}

.contact_pic_small{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid white;
}

.action_btn{
    padding: 5px 10px;
    border-radius: 100px;
    color: white;
}

.action_btn.green{
    background-color: var(--my_green);
}

.action_btn.red{
    background-color: var(--my_red);
}

.custom_dropdown{
    position: absolute;
    top: 50px;
    margin-left: -10px;
    width: 100%;
    max-height: 0px;
    overflow-y:hidden;
    overflow-x:hidden;
    transition: all 0.3s;
}

    .custom_dropdown.show {
        max-height: 300px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

#sidemenu_drop {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(0 0 0 / 0.50);
    z-index: 100000;
    opacity:0;
    transition: all ease-out 0.3s;
}

#sidemenu {
    padding: 20px;
    position: fixed;
    left: -90%;
    top: 0;
    bottom: 0;
    width:80%;
    background-color: var(--light_blue);
    z-index: 100000;
    transition:all ease-out 0.3s;
}

#sidemenu_container{
    pointer-events:none;
}

#sidemenu_container.open{
    pointer-events:initial;
}

#sidemenu_container.open > #sidemenu{
    left:0;
}

#sidemenu_container.open > #sidemenu_drop {
    opacity:1;
}

.side_profile_pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid white;
    padding: 3px;
}

.side_user_name{
    font-size:20px;
    color:white;
}

.side_user_des{
    color:white;
    font-size:14px;
}

.sidemenu_icon{
    width:18px;
}

.side_item_row {
    width: 80%;
    margin-bottom: 10px;
    padding: 5px 0px;
    margin-left: -20px;
}

.side_item_row.active {
    background-color: var(--dark_blue);
    border-radius: 0px 50px 50px 0px;
    margin-left:-20px;
    padding-left:10px;
}

    .side_item_row.bottom {
        margin-left: -20px;
        padding-left: 10px;
        position: absolute;
        bottom:0;
    }

.sidemenu_title {
    color: white;
    font-size: 14px;
    line-height: 14px;
}

.sidemenu_title.active{
    font-weight: 600;
}

.date_container {
    overflow-x: scroll;
    width: 100%;
    white-space: nowrap;
    scroll-behavior: smooth;
    padding: 20px 0px;
    margin-top:-20px;
    margin-bottom:-20px;
}

.date_container::-webkit-scrollbar{
    display:none;
}

.dates{
    display:inline-block;
    padding:5px 10px;
    font-size:14px;
    transition:all ease-in-out 0.3s;
}

    .dates > div {
        pointer-events: none;
    }

    .dates > span {
        pointer-events: none;
    }

.dates.active{
    border:1px solid var(--my_gray);
    border-radius:5px;
}

.dates.active > div{
    background-color:var(--light_blue);
    color:white;
    margin-inline:-10px;
    margin-bottom:-5px;
}

.card_title_small{
    font-size:12px;
    color:var(--my_green)
}

.bottom_status{
    padding:5px 10px;
    border-radius:0px 10px 0px 10px;
    display:inline-block;
    position:absolute;
    top:0;
    right:0;
    font-size:12px;
    color:white;
}

.bottom_status.green{
    background-color:var(--my_green);
}

.add_user_pic{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:50%;
}

.contact_row{
    max-height:0px;
    overflow-y:hidden;
    transition:all ease-in-out 0.3s;
}

.contact_row.show{
    max-height:1000px;
}

.drop_angle{
    transition:all ease-in-out 0.3s;
}

.drop_angle.down{
    transform: scaleY(-1)
}

.card_picture{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid white;
}

#warning_message {
    max-height: 0px;
    overflow-y: hidden;
    opacity: 0;
    padding: 0px 0px;
    transition:all ease-in-out 0.3s;
}

@keyframes warning_pop{
    0%{
        max-height:0px;
        opacity:0;
    }
    10%{
        max-height:100px;
        opacity:1;
    }
    90%{
        max-height:100px;
        opacity:1;
    }
    100%{
        max-height:0px;
        opacity:0;
    }
}

#warning_message.show {
    color: var(--my_red);
    padding: 10px 0px;
    padding: 10px 0px;
    animation: 3s ease-in-out 0s 1 warning_pop;
}

.trans_input {
    background-color: transparent;
    border: none;
    pointer-events: none;
    width: 100%;
    -moz-appearance: none;
    /* for Chrome */
    -webkit-appearance: none;
}

.trans_input::-ms-expand {
    display: none;
}

.trans_input:focus{
    border:none;
    outline:none;
}

    .trans_input.edit {
        border-bottom: 1px dashed var(--my_gray);
        pointer-events: initial;
    }

    .trans_input.dot {
        border-bottom: 1px dotted var(--my_gray);
        pointer-events:initial;
    }

    .trans_input.normal{
        pointer-events:initial;
    }

.contact_edit_btn{
    color:white;
    background-color:var(--light_blue);
    padding:10px;
    border-radius:100px;
    border:2px solid white;
    display:inline-block;
    position:absolute;
    top:0;
    right:10px;
}

.contact_edit_btn.save{
    background-color:var(--my_green);
}

.hid_search{
    max-height:0px;
    transition:all linear 0.3s;
    padding:0px 10px;
    margin-bottom:0px;
    overflow:hidden;
    opacity:0;
}

.hid_search.show{
    max-height:1000px;
    padding:10px;
    opacity:1;
    margin-bottom:20px;
}

.name_init{
    position:relative;
    width:100%;
    background-color:var(--light_blue);
    color:white;
    border-radius:100px;
    border:2px solid white;
}

.name_init:after{
    content:"";
    display:block;
    padding-bottom:100%;
}

.name_init > div{
    position:absolute;
    top:50%;
    bottom:0;
    right:0;
    left:50%;
    transform:translate(-50%, -50%);
}

.lead_pic_container {
    position: relative;
    width: 100%;
}

    .lead_pic_container:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

.lead_profile_pic {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius:200px;
    border:2px solid white;
}

.lead_contact_icon{
    font-size:16px;
    padding:10px;
    color:white;
    border-radius:100px;
}

.score_point{
    border-radius:50px;
    padding:2px 10px;
    background-color:var(--my_gray);
    color:white;
    margin-left:5px;
}

.option_btn{
    padding:5px;
    border-radius:5px;
    transition:all ease-in-out 0.3s;
}

.option_btn.active{
    background-color:var(--light_blue);
    color:white;
}

.mytoggle {
    position: absolute;
    top: 0;
    width: 50px;
    height: 22px;
    border-radius: 100px;
    border: 2px solid white;
    background-color: #00000010;
    transition: all ease-in-out 0.3s;
}

.mytoggle > div{
    width:14px;
    height:14px;
    background-color:white;
    border-radius:50%;
    position:absolute;
    left:2px;
    top:2px;
    pointer-events:none;
    transition: all ease-in-out 0.3s;
}

.mytoggle.active {
    position: absolute;
    top: 0;
    width: 50px;
    height: 22px;
    border-radius: 100px;
    border: 2px solid var(--light_blue);
    background-color: white;
}

    .mytoggle.active > div {
        width: 14px;
        height: 14px;
        background-color: var(--light_blue);
        border-radius: 50%;
        position: absolute;
        left: calc(100% - 16px);
        top: 2px;
    }

.custom_pop{
    position:fixed;
    background-color:rgb(0 0 0 / 0.65);
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0;
    z-index:9999999;
    transform:translateY(-100px);
    display:none;
    transition:all ease-in-out 0.3s;
}

    .custom_pop.active {
        display: block;
        opacity:1;
        transform:translateY(0px);
    }

.pop_content{
    max-height:100vh;
    width:calc(100vw - 30px);
    left:15px;
    top:50%;
    transform:translateY(-50%);
    position:absolute;
    background-color:white;
    border-radius:5px;
    padding:20px;
    overflow-y:scroll;
    overflow-x:hidden;
}

.plus_menu {
    position: fixed;
    bottom: 130px;
    right: 55px;
    z-index: 90;
    padding:10px;
    z-index:999999;
    pointer-events:none;
}

.plus_menu > div{
    margin-bottom: 10px;
    margin-right:calc(-100% - 60px);
    display: inline-block;
    opacity: 0;
    transition:all ease-in-out 0.3s;
    pointer-events: none;
}

    .plus_menu > div > span{
        background-color: white;
        padding: 0px 10px;
        border-radius: 5px;
        display: inline-block;
        pointer-events: none;
    }

.plus_menu > div.show {
    pointer-events: initial;
    margin-right:0px;
    opacity:1;
    pointer-events:initial;
}

.plus_menu_backdrop{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:998;
    pointer-events:none;
    opacity:0;
    transition:all ease-in-out 0.3s;
    background-color:rgb(0 0 0 / 0.59);
}

.plus_menu_backdrop.show{
    pointer-events:initial;
    opacity:1;
}

.business_card_add_block{
    border-radius:5px;
    border:1px dashed var(--my_gray);
    margin:5px;
    height:110px;
    padding:5px;
    position:relative;
}

.business_card_add_block > img{
    width:100%;
    height:100px;
    display:none;
    object-fit:contain;
}

.business_card_add_block.done > img{
    display:block;
}

.business_card_add_block > div{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

.business_card_add_block.done > div{
    display:none;
}

.plus_btn {
    transition: all 0.3s;
    font-size: 18px;
    padding: 20px;
    background-color: var(--light_blue);
    color: white;
    border-radius: 50px;
}

.plus_btn.rotate{
    transform:rotate(135deg);
}

.dash_tab_head{
    color:white;
    padding:10px;
    transition:all ease-in-out 0.3s;
}

.dash_tab_head > i{
    font-size:14px;
    pointer-events:none;
}

    .dash_tab_head.active {
        box-shadow: inset 0px -5px 0px white;
    }

.lead_not_bell{
    padding:10px;
    border-radius:100px;
    color:white;
    background-color:var(--my_orange);
}

.plus_menu_item_icon{
    padding:10px;
    border-radius:50px;
    color:white;
    margin-left:10px;
    border:2px solid white;
}

.dash_side_container{
    border-radius:0px 10px 10px 0px;
}

.dash_side_icon {
    padding: 15px 10px;
    font-size: 24px;
    transition:all ease-in-out 0.3s;
}

.dash_side_icon > i{
    pointer-events:none;
}

.dash_side_icon.active{
    background-color:var(--my_green);
    color:white;
}

.color_dot{
    width:12px;
    height:12px;
    margin-right:5px;
    border-radius:2px;
    display:inline-block;
}

.big_block{
    display:inline-block;
    scroll-snap-align:center;
    transform-origin:right;
}

.btab{
    width:100%;
    vertical-align:top;
    scroll-snap-align:center;
    padding-inline:10px;
}

.donut_counting{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:30px;
}

table::-webkit-scrollbar{
    display:none;
}

#main_container{
    scroll-behavior:smooth;
}

.score{
    border-radius:50px;
    font-size:12px;
    padding:3px 10px;
    color:white;
    display:inline-block;
    background-color:var(--my_orange);
}

.taskscroll_item{
    display:inline-block !important;
    width:100%;
    scroll-snap-align:center;
}

.gray_bg{
    background-color:#d1d1d1;
}

.cl-gr_l{
    color:#d1d1d1;
}