:root {
  --theme-cl: #e95f29;
  --theme-dbcl:#a2d4ff;
  --white: #ffffff;
}
.btn.btn-primary{background-color: #e95f29; border-color: #e95f29}

.csBtn{padding: 5px 10px; font-size: 14px; border-radius: 2px; font-weight: 500; text-decoration: none; cursor:pointer;}
.csBtn.md{padding: 5px 20px; font-size: 15px;}
.csBtn.lg{padding: 5px 20px; font-size: 16px;}
.csBtn.block{width:100%}
.csBtn.sm{padding: 2px 5px; font-size: 12px; border-radius: 4px; font-weight: 500;}
.csBtn.primary{border:1px solid  var(--theme-cl); background: var(--theme-cl);  color: #fff} 
.csBtn.primary:disabled{background:var(--theme-dbcl) !important;border-color: var(--theme-dbcl) !important}
.csBtn.success{border:1px solid  #1ba208; background: #1ba208;  color: #fff}
.csBtn.success:disabled{border:1px solid  var(--theme-dbcl); background: var(--theme-dbcl);  color: #fff}
.csBtn.basic{border: 1px solid #dfdfdf;background: #f0f0f0;color: #6a6a6a;}
.csBtn.basic:hover{border: 1px solid #d0cfcf;}
.csBtn.warning{border: 1px solid #ffc107;background: #ffc107;color: #fff;}
.csBtn.info{border: 1px solid #58c8e1;background: #58c8e1;color: #fff;}
.csBtn.default{border: 1px dashed #444;background: #fff;color: #6a6a6a;}
.csBtn.danger{border: 1px solid #ff5252;background: #fff;color: #ff5252;}
.csBtn.dark{border: 1px dashed #444;background: #444;color: #fff;}
.csBtn.navy{background:#001f3f; border: 1px dashed #001f3f;color: #fff;}
.csBtn i{font-size:12px}
.cursor{cursor:pointer}

.cs_card{padding:15px 15px 15px 15px; background:#fff; border-radius:5px; box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%);}
.cs_card_2{padding:0px; background:#fff; border-radius:5px; box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%);}
.cs_card_2 .head{padding:8px 15px 8px 15px; border: 1px solid #ccc; border-radius: 5px 5px 0px 0px; background:#eee}
.cs_card_2 .body{padding:15px 15px 15px 15px; border: 1px solid #ccc; border-radius: 0px 0px 5px 5ddpx}
form.custom label, .custom_form label {display: inline-block; /*text-transform: uppercase*/;font-size: 13px;color: #484242; font-weight:600 } 
form.custom label.no{font-weight:500}
form.custom input:not([type=radio]):not([type=checkbox]), .custom_form input:not([type=radio]):not([type=checkbox]){font-size:13px; height:35px; padding-left:10px;border-radius: 2px; box-shadow: 0 0px .8px rgba(0, 0, 0, 0.18); border-color: #cecece;}
form.custom select, .custom_form select {font-size:13px; height:35px; border-radius: 2px; appearance: menulist !important; box-shadow: 0 0px .8px rgba(0, 0, 0, 0.18); border-color: #cecece; padding:4px 10px} 

form.custom textarea, .custom_form textarea {font-size:13px; border-radius: 2px; box-shadow: 0 0px .8px rgba(0, 0, 0, 0.18); border-color: #cecece;}
select.form-control {font-size:13px; height:35px; }
form.custom input[type=date] { padding:4px 7px !important}
.form-control:focus{box-shadow:none !important; outline:none !important; border:1px solid #666 !important}
form.custom .form-control:focus{box-shadow:none !important; outline:none !important; border:1px solid #666 !important}
form.custom input.small, .custom_form input.small, select.form-control.small{height:30px !important}
span.add_more{font-size:13px; color: var(--theme-cl); cursor: pointer}
span.add_more.lg{font-size:15px}
.add_product_price_table{border:1px solid #eee; width:100%}
.add_product_price_table thead th{font-weight:600; background: #673782; color: #fff; padding:5px 10px; border:1px solid #fff; font-size: 13px}
.add_product_price_table td{padding:6px 10px 6px 10px; vertical-align:top}
.add_product_variation_price_table{border:1px solid #eee; width:100%}
.add_product_variation_price_table thead th{font-weight:600; background: #6659a3; color: #fff; padding:4px 10px; font-size:13px; vertical-align: bottom; border:1px solid #fff}
.add_product_variation_price_table td{padding:5px 8px 5px 8px;}

.view_sub_table{border:1px solid #eee; width:100%}
.view_sub_table thead th{font-weight:600; background: #6d5197; color: #fff; padding:5px 10px; border:1px solid #fff; font-size: 13px}
.view_sub_table td{padding:6px 10px 6px 10px; vertical-align:top} 
.pull-right{float: right}
.hide{display:none;}

.cs_table th{font-weight:600; font-size: 13px;}
.cs_table td{color:#444; font-size:14px}

.scrollable{max-width:100%; overflow:auto;}
.scrollable table{border-collapse:collapse!important ;background: #fff;}
.scrollable thead th{position:-webkit-sticky!important;position:sticky!important;top:0!important} 
.scrollable thead th:first-child{left:0!important;z-index:1!important; border-left: 1px solid #dee2e6;  }
.scrollable thead th:last-child{left:0!important;z-index:1!important; border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6;}
.scrollable thead th{background:#f8f8f8 !important;color:#444 !important;white-space: nowrap;font-family: arial;letter-spacing: 1px;font-weight: 600;font-size: 12px!important; font-family:Roboto,sans-serif;/*text-transform: uppercase;*/ padding: 8px 10px; border-top: 2px solid #dee2e6;z-index: 2;}
.scrollable tbody th{position:-webkit-sticky!important;position:sticky!important;left:0!important}
.scrollable tbody th{background:#fff!important;border-right:1px solid #ccc!important; padding: 6px 10px !important;} 
.scrollable table td{padding: 6px 8px !important; padding-bottom: 6px !important; font-size: 13px; border: 1px solid #dee2e6; color: #495057;}

.select2-container{width:100% !important; min-width:120px}
.modal .select2-container{z-index: 1050}
.select2-container .select2-selection--single{height:35px !important; font-size:13px; border-radius: 0px; border-color: #cecece; box-shadow: 0 0px .8px rgba(0, 0, 0, 0.18);}
.select2-container .select2-selection--single .select2-selection__rendered{font-size:13px; padding-top: 3px;}
.select2-results__option{font-size:13px; }
.select2-search--dropdown .select2-search__field{font-size:13px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:33px}

.font10{font-size: 10px !important}
.font11{font-size: 11px !important}
.font12{font-size: 12px !important}
.font13{font-size: 13px !important}
.font14{font-size: 14px !important}
.font15{font-size: 15px !important}
.font16{font-size: 16px !important}
.font17{font-size: 17px !important}
.font18{font-size: 18px !important}
.font19{font-size: 19px !important}
.font20{font-size: 20px !important}
.font25{font-size: 25px !important}
.font30{font-size: 30px !important}
.font35{font-size: 35px !important}
.font40{font-size: 40px !important}
.br0{border-radius: 0px !important}
.br2{border-radius: 3px !important}
.br3{border-radius: 3px !important}
.br5{border-radius: 5px !important}
.br8{border-radius: 8px !important}
.br10{border-radius:10px !important}
.br20{border-radius:20px !important}
.fw400{font-weight:400 !important}
.fw500{font-weight:500 !important}
.fw600{font-weight:600 !important}
.fw700{font-weight:700 !important}
.txt_undl{text-decoration:underline;}

.nav_filter input{font-size:13px; height:35px; border-radius: 2px}
.nav_filter select{appearance:menulist; border-radius: 2px}
.nav_filter label{font-size:12px; margin-bottom: 2px}
.sidebar{padding:20px 4px 20px 5px;}
.sidebar-nav .nav-link{font-size:12px; padding: 7px 5px 7px 10px; color: var(--theme-cl); background: #ffd6c642;}
.sidebar-nav .nav-link i{color: var(--theme-cl);}
.sidebar-nav .nav-link:hover i {
  color: var(--theme-cl);
}
.sidebar-nav .nav-link:hover {
  color: #e95f29;
  background:#ffd6c642;
}
.sidebar-nav .nav-content a:hover, .sidebar-nav .nav-content a.active {
  color: #4154f1;
}
.sidebar-nav .nav-content a {font-size: 12px; font-weight: 500; padding: 7px 0 7px 20px; }
p.page_desc{color: #919191;font-size: 14px;}

.sidebar-nav .nav-link{}

td .dropdown.action ul{
  padding: 2px 0px;
}
td .dropdown.action a{
  padding: 5px 15px; font-size: 14px; color; #444
}
td .dropdown.action a i{font-size:12px; width:12px}

.icon-input{display:flex;}
.icon-box{width:40px; border:1px solid #cecece; text-align: center; padding-top:5px ; box-shadow: 0 0px .8px rgba(0, 0, 0, 0.18);}
.button-box{width:40px; border:1px solid #cecece; text-align: center; padding-top:0px; box-shadow: 0 0px .8px rgba(0, 0, 0, 0.18);}
.button-box button {border-radius:0px; width: 100%;height: 100%; background: #eee; border: #eee; }
.button-box button:hover{background:#c4c4c4}
.input-box{width:100%}

.suggestionArea{position:absolute; background:#fff; box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%); min-width: 350px; z-index:99; max-height: 350px; overflow-y: auto}
.suggestionArea ul{padding-left:0px; margin-left: 0px; padding-top:10px}
.suggestionArea ul li{list-style: none; padding:5px 10px; font-size: 13px; cursor: pointer}
.suggestionArea ul li:hover{background:#f8dfcc}
.suggestionArea ul li.disabled{color:#ccc}

.form-control::placeholder {
  color: rgba(133, 135, 138, 0.75); 
  opacity: 1; 
}

.page-item a{color:#777}
.page-item.active a{background-color:var(--theme-cl);border-color:var(--theme-cl); color: #fff}
 
.view_product_price_table{border:1px solid #eee; width:100%}
.view_product_price_table thead th{font-weight:600; background: #5cb85c; color: #fff; padding:5px 10px; border:1px solid #fff; font-size: 12px}
.view_product_price_table td{padding:6px 10px 6px 10px; vertical-align:top; font-size: 13px; border:1px solid #eee;}
.view_product_price_table tfoot th{padding:6px 10px 6px 10px; vertical-align:top; font-size: 13px; border:1px solid #eee;}
.table_price_overview tr td:first-child(font-weight:600)
.table_price_overview td{padding:6px 10px 6px 10px; vertical-align:top; font-size: 13px; border-bottom:1px solid #eee;} 

.pos_product_table thead th{font-weight:600; font-size: 13px;background: #673782;color: #fff;}

.pos_product_table .quantity_area .icon-box{padding-top:2px; }
.pos_product_table .quantity_area i{font-size:12px}
.pos_product_table .quantity_area .minus{color:red}
.pos_product_table .quantity_area .plus{color:green}
.pos_product_table .quantity_area input{border-radius:0px !important}

.pos-total {display: inline-block;padding: 5px 10px;vertical-align: middle;margin-left: 5px;margin-right: 5px;}
.pos-total span.text {font-weight: 600;display: inline-block;width: 60px;vertical-align: middle; font-size:12px;}
.bg-navy {background-color: #001f3f !important;}
.text-white {color: #fff !important;}
.pos-total span.number {font-size: 26px;vertical-align: middle;font-weight: bolder; min-width: 80px;}

.pos_button{padding:7px 15px; font-size: 14px; border:1px solid; border-radius: 2px; font-weight: 500; text-decoration: none; cursor:pointer;}
.pos_button.cash{background :#2dce89; border-color :#2dce89; color: #fff}
.pos_button.bcard{background :#d81b60; border-color :#d81b60; color: #fff}
.pos_button.multiple{background :#1e5893; border-color :#1e5893; color: #fff}
.pos_button.cancel{background :#f5365c; border-color :#f5365c; color: #fff; padding: 1px 8px; }

.pos_discount_box{position:absolute; width: 350px; height: 180px; background: #fff; bottom: 122px;padding: 10px 15px; box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%); display: none}
.pos_tax_box{position:absolute; width: 300px; height: 180px; background: #fff; bottom: 122px;padding: 10px 15px; box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%); display: none}
.pos_promocode_box{position:absolute; width: 300px; height: 200px; background: #fff; bottom: 122px;padding: 10px 15px; box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%); display: none}
.pos_post_promocode_box{position:relative; border: 1px dashed #828282;border-radius: 5px;padding: 2px 10px 2px; display:none}
.pos_post_promocode_box .remove_active_promocode{position: absolute;top: 10px; right: 10px; color: red; cursor:pointer;}
.pos_suggested_products{overflow-y:auto}
.pos_suggested_products .inner{background:#fff; padding: 10px 5px; text-align:center; margin-bottom: 10px; font-size: 12px;  min-height: 120px; cursor:pointer}
.pos_suggested_products .inner.disabled{color:#bdbdbd}
.pos_suggested_products .inner img{width:50px; height:50px; object-fit: cover; margin: auto ; margin-bottom: 5px; display: block;}

.pd_sp_tag{background:#eee; border-radius: 20px; padding: 5px 5px 5px 10px; display: inline; font-size: 13px; margin-right:5px; cursor:pointer;}
.pd_sp_tag .remove{background:red; color: #fff;display: inline-block;height: 20px;width: 20px;border-radius: 50%;margin-left: 8px;text-align: center;}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}
.nav-tabs{ }
.nav-tabs a.active {
  border-bottom: 2px solid #55c57a; border-radius:0px;
}

.nav-tabs .nav-link {
  color: rgb(110, 110, 110);
  font-weight: 500; border-radius:0px; border: 1px solid transparent; font-size:14px;
} 

.nav-tabs .nav-link:hover {
   border-radius:1px solid transparent;
}
.nav-link:hover {color: #55c57a;}
.nav-tabs .nav-link.active {color: black;background-color: white; font-size:14px; font-weight: 600;}
.tab-content.tab-border{border-left:1px solid #eee; border-right:1px solid #eee; border-bottom:1px solid #eee; padding-bottom: 0px}
.tab-content.tab-border .tab-pane{padding:0px}

#dateRangefilter{font-size:13px;  min-width: 130px; height: 34px;border: 1px solid #c6c6c6 !important;padding: 6px 10px;background: #fff;cursor: pointer;border-radius: 3px;border-radius: 3px; text-align:left}
.pos_open_body{width:100%; height:100vh; background:#eee; top: 0px; left:0px; position:fixed; z-index: 999; display:none; overflow-y:auto} 
.add_product_price_table .view_img img{width:40px; height:40px; object-fit:cover}
.suggestionArea img{width:35px; height:35px; object-fit:cover; margin-right: 10px;}
.list_view_img img:hover{width:80px; height:80px; position:absolute; margin-left:-20px ; margin-top: -20px; z-index: 9;  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1); border-radius: 3px} 

.tagify__tag > div > :only-child{font-size:13px}
.tagify { /*height: 35px;*/}
.tagify__tag > div{padding:2px 5px 2px 5px}
.tagify__input{font-size:13px; padding:2px 5px 2px 5px}
 
.view_modal_table{border:1px solid #eee; width:100%}
.view_modal_table thead th{font-weight:600; background: #a3a3a3; color: #fff; padding:5px 10px; border:1px solid #fff; font-size: 12px}
.view_modal_table tfoot th{font-weight:600; background: #e0e0e0; padding:5px 10px; border:1px solid #fff; font-size: 12px ; border:1px solid #eee}
.view_modal_table td{padding:6px 10px 6px 10px; vertical-align:top; font-size: 13px; border:1px solid #eee;}
.pd_item_checked{width:16px; height: 16px}

.sidebar-nav .nav-content a i.bi-plus{font-size: 14px;margin-right: 4px;margin-left: -4px;}

span.action_info {position:relative; }
span.action_info.left text{left: -250px}
span.action_info i { cursor:pointer; color: #1e7dac;}
span.action_info text{background:#666; padding: 5px 8px; font-size: 12px; border-radius: 5px; color:#fff; position: absolute; display: none;  width: 250px; min-height: 50px; z-index: 9999; top:-40px; text-align: left}
span.action_info:hover text{display:inline-block;}
.wd40p{width:40px;}.wd50p{width:50px;}.wd60p{width:60px;}.wd70p{width:70px;}.wd80p{width:80px;}.wd90p{width:90px;}.wd100p{width:100px;}.wd120p{width:120px;}.wd150p{width:150px;}.wd160p{width:160px;}.wd180p{width:180px;}.wd200p{width:200px;}

.add_pj_step_box{display: inline-block;}
.add_pj_step_box .icon{width: 30px; float: left;  text-align: center; padding-top: 5px;}
.add_pj_step_box .remove{width: 30px; float: left;  text-align: center; padding-top: 5px;}
.add_pj_step_box .input{width:170px; float: left;}
.add_pj_step_box .input input{ font-size: 12px !important}


.lead_detail .header-card{padding:12px 15px 15px 15px; background:#fff; border-radius: 2px}
.lead_detail .left-card{padding:10px 15px; background:#fff; border-radius: 5px}
.lead_detail .right-card{padding:10px 15px; background:#fff; border-radius: 5px}
.lead_detail .left-card .header .title{font-weight: 600}
.lead_detail .left-card table td{padding-bottom: 8px; font-size: 13px; vertical-align: top;}
.lead_detail .left-card table td:first-child{padding-right: 10px; text-transform: uppercase; font-size: 12px; color: #757272;}
.lead_detail .left-card table td:nth-child(2){padding-right: 10px}
.lead_detail .left-card table td:nth-child(3){color:#444}
.lead_detail .left-card table td:nth-child(4){text-align:right; color: #777;}

.add_data_button button{margin-right:10px;  background: #fff; padding: 4px 10px; border: 1px dashed; border-radius: 5px; font-size: 13px;color: #666;}
.add_data_section .form_area{background:#fff; padding:10px 15px 15px 15px; border-radius:6px; display: none}
.add_data_section .form_area .title{font-weight: 600}
.add_data_section .form_area .add_description{color:var(--theme-cl); font-size: 12px; cursor:pointer}
.add_data_section .form_area.activity .description{display:none}
  
.lead_detail .header .detail li{list-style:none}
.lead_detail .select_pipestage {display: inline-block;width: 100%}
.lead_detail .select_pipestage .pointer input[type=radio]{opacity:0;width:1px;height:1px}
.lead_detail .select_pipestage .pointer{width:10%;height:24px;position:relative;background:#e6e6e6;float:left;display:inline;margin-right:5px;width:15%; cursor:pointer; font-size: 12px;padding-left: 12px;color: #444;padding-top: 2px; } 
.lead_detail .select_pipestage .pointer:after{content:"";position:absolute;left:0;bottom:0;width:0;height:0;border-left:5px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.lead_detail .select_pipestage .first:after{border-left:5px solid #e6e6e6}
.lead_detail .select_pipestage .first:before{content:"";position:absolute;right:-5px;bottom:0;width:0;height:0;border-left:5px solid #e6e6e6;border-top:12px solid transparent;border-bottom:12px solid transparent;z-index:111}
.lead_detail .select_pipestage .pointer:before{content:"";position:absolute;right:-5px;bottom:0;width:0;height:0;border-left:5px solid #e6e6e6;border-top:12px solid transparent;border-bottom:12px solid transparent;z-index:111}
.lead_detail .select_pipestage .pointer.active{background:#326fca; color:#fff; background-position: left bottom;}
.lead_detail .select_pipestage .pointer.active:before{border-left:5px solid #326fca}
.lead_detail .select_pipestage .first.active:after{border-left:5px solid #326fca}
.lead_detail .extra_action_box{width:33px; height: 33px; background: #fff; text-align: center; border-radius: 5px; border: 1px solid #ccc; cursor: pointer; padding-top: 3px}
.lead_status_button .dropdown-menu{box-shadow: 0 8px 3rem rgb(0 0 0 / 18%); border: 0px ; border-radius: 3px}
.lead_status_button .dropdown-menu li a{font-size:14px; color: #555}

.csDropDown{position: fixed; background: #fff; width:300px; min-height: 100px; display:none; border-radius:5px; box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%); padding: 10px 15px 15px 15px}
.csDropDown .label{font-size:13px ; text-transform: uppercase; color: #555}
.csDropDown input{font-size:13px}

.note-type-list .inner{background:#fffef4; margin-bottom: 10px; border-radius: 4px; padding:10px}
.note-type-list .inner .text{font-size:14px; display: block; color: #444; margin-bottom: 5px; word-break:break-all;}
.note-type-list .inner .text a{color:#444}
.note-type-list .inner .date{font-size:12px;  color:#777}
.note-type-list .inner .date i{margin-right:5px;}
.note-type-list .inner .date .owner i{margin-left:15px;}
.note-type-list .inner .delete{font-size:12px; color:#ff5353; float: right; cursor:pointer}
.note-type-list .inner .delete_opp{font-size:12px; color:#ff5353; float: right; cursor:pointer}
.note-type-list .inner .delete_visit{font-size:12px; color:#ff5353; float: right; cursor:pointer}
.note-type-list .inner .delete_visit_note{font-size:12px; color:#ff5353; float: right; cursor:pointer}
.sessions,li{position:relative}
.timeline h1,.timeline p{font-family:sans-serif}
.timeline li, .timeline ul{list-style:none;padding:0}
.timeline .container{display:flex;justify-content:center;align-items:center;padding:3rem 0;background:linear-gradient(45deg,#209cff,#68e0cf)}
.timeline .wrapper{background:#eaf6ff;padding:2rem;border-radius:15px}
.timeline h1{font-size:1.1rem}
.timeline .sessions{ border-radius:12px}
.timeline li{padding-bottom:10px;border-left:1px solid #abaaed;padding-left:20px;margin-left:10px}
.timeline li:last-child{border:0;padding-bottom:0}
.timeline li:before{content:"";width:15px;height:15px;background:#fff;border:1px solid #4e5ed3;box-shadow:3px 3px 0 #bab5f8;border-radius:50%;position:absolute;left:-10px;top:0}
.timeline .user{ font-size: 13px; font-weight: 500;}
.timeline .user a{color:#444}
.timeline .status_icon{ float:left; margin-right:10px}
.timeline .status_title{padding-top:6px ; display: block}
.timeline .status_title .text{float:left; font-size: 13px}
.timeline .status_icon .completed{color:#09a909; font-size: 20px; line-height: 0px;}
.timeline .status_icon .mark_complete{border-radius:50%;  border:1px solid #919191; width:20px; height: 20px; display: inline-block; cursor: pointer; background: #fff}
.timeline .status_icon .mark_complete_opp{border-radius:50%;  border:1px solid #919191; width:20px; height: 20px; display: inline-block; cursor: pointer; background: #fff}
.timeline .user .icon{ width: 20px; display: inline-block}
.timeline .change{ font-size: 13px; }
.timeline .change b{font-weight:400 !important; color: #6674d9;}
.timeline .delete{font-size: 12px;color: #ff5353;float: right;cursor: pointer;}
.timeline .time{color:#8e8c9d;font-family:Poppins,sans-serif;font-weight:500; font-size: 12px; display:inline-block; margin-top: 4px; clear: both}
.timeline .by{color:#8e8c9d; font-size: 12px; display:inline-block; margin-left: 15px}
.timeline .by i{font-size:11px; margin-right: 3px}
@media screen and (min-width:601px){
  .timeline .time{font-size:12px}
}
.timeline p{color:#4f4f4f;line-height:1.5;margin-top:2px; margin-bottom:5px; font-size: 13px; clear:both}
@media screen and (max-width:600px){
  .timeline .time{margin-bottom:.3rem;font-size:.85rem}
  p{font-size:.9rem}
}

.pipeline_area .stage-header .inner{position:relative; background:#eee; padding:5px}
.pipeline_area .stage-header .inner .drag{margin-left: 8px; margin-right: 4px; color: #666; cursor: grab}
.pipeline_area .stage-header .stage_in{border:0px;   padding: 5px 10px; font-size: 13px ; width:220px; color: #444}
.pipeline_area .stage-header .stage_in:focus{border:0px !important;  }
.pipeline_area .stage-header .delete {  cursor:pointer; position: absolute; right: -10px;top: -10px; color: #444; background: #fff; height: 23px; border-radius: 50%; width: 23px; display: block; text-align: center;}

.status_icon .mark_complete{border-radius:50%;  border:1px solid #919191; width:20px; height: 20px; display: inline-block; cursor: pointer; background: #fff}
.status_icon .completed{color:#09a909; font-size: 20px; line-height: 0px;}

.project_room_toggle{width:30px; height:27px; background:#eee; padding: 1px; text-align: center; display: inline-block; border-radius: 3px; margin-right: 15px; cursor: pointer; border:1px solid #ccc}

.cs_stock_dropdown{position:fixed; background:#fff;   z-index:9; box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%); display:none;}
.cs_stock_dropdown.show{display:block;}

@keyframes progress {
  0% { --percentage: 0; }
  100% { --percentage: var(--value); }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="progressbar-circle"] {
  --percentage: var(--value);
  --primary: #369;
  --secondary: #adf;
  --size: 30px;animation: progress 2s 0.5s forwards;width: var(--size);aspect-ratio: 1;border-radius: 50%;position: relative;overflow: hidden;display: grid;place-items: center;
}

[role="progressbar-circle"]::before {
  content: ""; position: absolute; top: 0;left: 0; width: 100%;height: 100%; background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);  mask: radial-gradient(white 55%, transparent 0); mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="progressbar-circle"]::after { counter-reset: percentage var(--value); content: counter(percentage) '%'; font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: var(--primary);
}

.status-label .status_change{font-weight:600; font-size:12px}
.status-label .clr1{ }
.status-label .clr2{color:#fdab3d; }
.status-label .clr3{color:#e2445c; }
.status-label .clr4{color:#646260;  }
.status-label .clr5{color:#4da22e; }
.status-label .clr6{color:#335726; }
.status-label .clr7{color:#dbc759; }

.description-area{position:relative;}
.edit-description-form{background:#eee; padding:8px 10px; border-radius: 4px; display: none ; position:absolute; width: 96%; z-index: 9999}
.add_edit_desc_btn{font-size:12px; color: var(--theme-cl);cursor :pointer}
.add_edit_desc_btn.right{float:right; margin-top: 10px; }
.def-task-description p{font-size:13px; margin-bottom: 5px}
.def-task-description ul, .def-task-description ol{font-size:13px; margin-left:15px; padding-left: 0px}

#task-detail-modal .nav-tabs .nav-link{color:#828282;font-size:13px; border: 0px !important; border-bottom: 2px solid transparent  !important}
#task-detail-modal .nav-tabs .nav-link.active{color:var(--theme-cl); border: 0px !important; border-bottom: 2px solid var(--theme-cl) !important;}
#task-detail-modal .nav-tabs .nav-link:hover{border: 0px !important; border-bottom: 2px solid inherit  !important}
#task-detail-modal .nav-tabs .nav-link.active:hover{color:var(--theme-cl); border: 0px !important; border-bottom: 2px solid var(--theme-cl) !important;}

#task-detail-modal .main, #project-detail-modal .main{padding:2px 15px}
#task-detail-modal .header, #project-detail-modal .header{ background: #eee;  padding:4px  0px; font-size: 13px; border-radius: 5px 5px 0px 0px;}
#task-detail-modal .task-detail-table td, #project-detail-modal .task-detail-table td{padding-bottom: 10px; vertical-align: top; padding-left: 10px}
#task-detail-modal .description, #project-detail-modal .description{font-size:13px; color: #555; width: 90%;float: left;}
.note-area{position:relative;}
.add-note-form{background:#eee; padding:8px 10px; border-radius: 4px; display: none; position:absolute; width: 100%; border: 1px dashed #473ea8;}
.def-task-title{display: ;}
.title-edit-input{display:none; float: right;width: 90%;}

.addNoteBtn{color:var(--theme-cl); font-size: 13px; cursor:pointer}
.note-list-area {overflow-y:auto; height: 400px;}
.note-list-area::-webkit-scrollbar {width: 10px}
.note-list-area::-webkit-scrollbar-track {background: #f1f3f8; border-radius: 5px;}
.note-list-area::-webkit-scrollbar-thumb {border-radius: 5px; background: #d7d7d7;}
.note-list-area .inner{background:#fffde5; margin-bottom: 10px; border-radius: 4px; padding:10px}
.note-list-area .inner .text{font-size:14px; display: block; color: #444; margin-bottom: 5px; word-break:break-all;}
.note-list-area .inner .date{font-size:12px;  color:#666}
.note-list-area .inner .delete{font-size:12px; color:#ff5353; float: right; cursor:pointer}

.file-area{position:relative;}
.add-file-form{background:#eee; padding:8px 10px; border-radius: 4px; display: none; position:absolute; width: 100%; border: 1px dashed #473ea8;}  
.addFileBtn{color:var(--theme-cl); font-size: 13px; cursor:pointer}
.file-list-area {overflow-y:auto; height: 400px;}
.file-list-area::-webkit-scrollbar {width: 10px}
.file-list-area::-webkit-scrollbar-track {background: #f1f3f8; border-radius: 5px;}
.file-list-area::-webkit-scrollbar-thumb {border-radius: 5px; background: #d7d7d7;}
.file-list-area .inner{background:#fffde5; margin-bottom: 10px; border-radius: 4px; padding:10px}
.file-list-area .inner .text{font-size:14px; display: block; color: #444; margin-bottom: 5px; word-break:break-all;}
.file-list-area .inner .text a{color:#444}
.file-list-area .inner .date{font-size:12px;  color:#666}
.file-list-area .inner .delete{font-size:12px; color:#ff5353; float: right; cursor:pointer}
.log-list-area{overflow-y:auto; height: 440px; padding:0px 10px}
.log-list-area::-webkit-scrollbar {width: 10px}
.log-list-area::-webkit-scrollbar-track {background: #f1f3f8; border-radius: 5px;}
.log-list-area::-webkit-scrollbar-thumb {border-radius: 5px; background: #d7d7d7;}
.editInPriority{float: right; cursor: pointer; color:var(--theme-cl)}
.priorityInEdit{display:none;}
.add_sub_task_btn{color:var(--theme-cl); font-size: 13px; cursor:pointer}
.sub-task-area{position:relative;}
.sub-task-add-area{background:#fff; padding:8px 10px; border-radius: 4px; display: none ; position:absolute; width: 94%; border: 1px dashed #473ea8;} 
.sub-task-add-area input{font-size:13px}
.sub-task-list-area .inner{background:#fff; padding: 5px 10px; margin-bottom: 7px; cursor: pointer}
.sub-task-list-area .inner .title{font-size:13px; color: #4d4d4d;}

.timeline .sessions {  margin-top: 2rem; border-radius: 12px;}
.sub-task-cn { display: inline-block;background: #dedeff;padding: 0px 5px;font-size: 12px;border-radius: 4px;margin-top: 4px;}

.sv_loader .fa{font-size:13px; margin-left: 5px; display: none}

table td.sale_editable_input{padding:0px !important}
.sale_editable_input input{border:1px solid #000 ; padding:4px 2px; border-radius:0px; width:130px; display:inline-block; display:none;  font-size:12px}
.sale_editable_input input:disabled {color:#ccc; background:#eee; border:1px solid transparent }
.sale_editable_input input.active:disabled {color:#444; background:#fff}
.sale_editable_input span.text{margin-top: 8px; display: inline-block;} 
.sale_editable_input span.edit{float: right; padding:5px 5px; cursor:pointer }
.sale_editable_input span.save{cursor:pointer}
.sale_editable_input .date{width:110px;}
.sale_editable_input .time{width:76px; padding: 4px 2px !important;}
.fms_body .status select{border:1px solid #eee; border-radius: 10px;padding:2px 7px;}
.step_status_1{background:#67c367; color: #fff}
.step_status_2{background:#fa5e5e; color: #fff}

.ticketOpContentArea{position: fixed;width: 90%;bottom: 0; z-index: 1041;right: 0;background: #f8f9fa; box-shadow: rgba(76, 78, 79, 0.65) 0px 2px 5px} 
.closeTicketDetail2{position: absolute; margin-left: 0px;margin-top: -1px;background:#fb4444;color: #fff;border-radius: 0%;padding: 1px 10px 3px 10px;z-index: 1;font-size: 16px;cursor: pointer;left: -15px; border-radius: 50%}


.ticket_desk_area .shtname{background-color: #cdebc4;width: 40px;height: 40px;text-align: center;padding-top: 9px;display: inline-block; border-radius:5px;font-size: 14px;color:#0000006e}
.ticket_desk_area .postBy{font-size: 14px;display: inline-block;margin-bottom: 6px}
.ticket_desk_area  .date{font-size: 12px;color: grey}
.ticket_desk_area .middleSide label{font-size: 12px;margin-bottom: 2px;}
.ticket_desk_area .middleSide select{font-size: 13px;padding: 5px 10px;}
.ticket_desk_area .bootstrap-tagsinput{width: 100%}
.ticket_desk_area .bootstrap-tagsinput .label-info {color: #444 !important; background:#eee ;/* display: flex !important; */border-radius: 5px !important;padding: 0px 10px !important; margin-top: 2px;align-items: center !important;border: 1px solid #c7c7c7;border-radius: 20px !important;}
.ticket_desk_area .ui-menu.ui-widget{z-index: 111111}
.ticket_desk_area .ticketRow{margin: 0px 0px 15px 0px;padding: 10px 5px;border-radius: 5px}
.ticket_desk_area .replyrow{background: #ffff4b29;border: 1px solid #b8b8152b}
.ticket_desk_area .notebox{background: #ff4b4b29;border: 1px solid #b8b8152b}
.ticket_desk_area .notebox.techn{background:#b9e2ff29;border: 1px solid #1599b82b}
.ticket_desk_area .tkAttachment{ }
.ticket_desk_area .tkAttachment a{border: 1px solid #ccc;padding: 4px 10px;display: block;border-radius:5px;color: grey;font-size: 13px;text-decoration: none;width: 370px;background-color: rgba(247,247,247,.8); margin-bottom: 5px}
.ticket_desk_area .tkAttachment a img{width: 30px;display: inline;margin-right: 10px}
.ticket_desk_area .greyBtn{background: #eee;  height: 30px !important;text-align: center;display: inline-block;border-radius: 4px;padding : 2px 8px; border:1px solid #ccc;cursor: pointer;outline: 0; font-size:13px}
.ticket_desk_area .greyBtn:active, .greyBtn:focus{outline: 0;}
.ticket_desk_area .replyCc{float: right;color: grey;font-size: 13px;cursor: pointer;}
.ticket_desk_area .rpType{font-size: 12px;color: grey;margin-left:10px;}

.ticket_desk_area .leftSide{width: 60%;float: left;padding: 10px 0px}
.ticket_desk_area .middleSide{width: 20%;float: left;padding: 10px 0px 10px 15px}
.ticket_desk_area .rightSide{width: 20%;float: left;padding:10px  0px 10px 15px}

.ticket_desk_area::-webkit-scrollbar { width: 6px;  }
.ticket_desk_area::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
.ticket_desk_area::-webkit-scrollbar-thumb { background-color: #d1d1d1;outline: 1px solid #d1d1d1;}