:root{
   --autoWidth: 1264px;  
   --family: "Poppins", serif; 

   --transition: all 0.3s ease;
      
   --p_color: #000B08;
   --black: #000; 
   --white: #fff;
   
   --dark_blue: #1f2937;
   --dark_blue2: #111827;
   --dark_blue3: #22324a;
   --dark_navy_blue: #1a2d4a;
   --dark_navy_blue2: #2a4a6a;
   --sky_blue: #8db8e0;
   --dark_sky_blue: #3b82f6;
   --border_color: #374151; 
   --orange_color: #ea580c;
   --orange_color2: #fb923c;
   --orange_color3: #f97316;
   
   --grey: #9ca3af;
   --gray2: #d1d5db;
   --gray3: #4b5563;
   --grey4:  #5b7373;
   --grey5:  #6c757d;
   --gray6: #6b7280;
   --slate_grey: #374151;

   --purple: #2d2e4a;
   --dark_purple: #543a81;
   --purple_color2: #aa58f7;
 
   
   --navy_color: #18202f;

   --green_color: #22c55e;
   --red_color: #ef4444;
   --red_color2: #dc2626;
  
 

 

   --baseFS: 16px;
   --fs16: 1em;
   --fs18: 1.125em;
   --fs20: 1.25em;
   --fs22: 1.375em;
   --fs24: 1.5em;
   --fs26: 1.625em;
   --fs28: 1.75em;
   --fs30: 1.875em;
   --fs38:2.375em;
   --fs58: 3.625em;
   --fs62: 3.875em;
   --fs64: 4em;
   --fs96: 6em;
   --fs106: 6.625em;
   
  --fieldHeight: 3.25em;
}


*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
  font-optical-sizing: auto;
   font-style: normal;
}
a{ text-decoration: none; }
ol, ul{ margin: 0; list-style: none;  margin: 0;}

p, h1, h2, h3, h4, h5, h6, strong, b{ margin: 0; font-weight: normal; }

em{ font-style: normal; }

input, textarea, select, button{ border:0px none; border-radius:0px; background:none; outline:none; -webkit-appearance:none; appearance:none; outline:none; font-family: var(--family); font-weight: 400; }
button{ cursor: pointer; }
img{ display: block; height: auto; outline: none; }

input[type='submit']{  border-radius:0px; -webkit-appearance:none; appearance:none; outline:none; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrow_icons for Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

body.hidden{ overflow: hidden !important;}

textarea{ resize:none; overflow:auto; }

:focus{ outline:none;}

.clearfix:after{content:""; display:block; clear:both; height:0px; visibility:hidden;}

.clearfix{ display:block; zoom:1; }

i, em{ font-style: normal;}

.overflow_hidden{ overflow: hidden !important; }

html{ min-height: 100%;   }

.wrapper{ width: 100%; max-width: 100%;  }
/* overflow-x: hidden;  */

body { width: 100%; font-family: var(--family); color: var(--white); font-size: var(--baseFS); font-weight: 400; overflow-x: hidden; max-width: 100%; letter-spacing: -0.3px; background-color: var(--dark_blue2); }

.mob_menuBtn{ display: none; }


.hamburger-lines {
    border-radius: 50%; 
    cursor: pointer;
    display: none;
    flex-direction: column;
    flex-shrink: 0;
    height: 40px;
    justify-content: space-between;
    padding: 10.9px 8px;
    position: relative;
    width: 40px;
    z-index: 999
  }
  
  .hamburger-lines .line {
    background: var(--dark);
    border-radius: 10px;
    display: block;
    height: 1.4px;
    width: 100%
  }
  
  .hamburger-lines .line1 {
    transform-origin: 0 0;
    transition: all .4s ease-in-out
  }
  
  .hamburger-lines .line2 {
    transition: all .2s ease-in-out
  }
  
  .hamburger-lines .line3 {
    transform-origin: 0 100%;
    transition: all .4s ease-in-out
  }
  
  .hamburger-lines.open .line {
    margin-left: 7px; background-color: #fff;
  }
  
  .hamburger-lines.open .line1 {
    transform: rotate(45deg)
  }
  
  .hamburger-lines.open .line2 {
    transform: scaleY(0)
  }
  
  .hamburger-lines.open .line3 {
    transform: rotate(-45deg)
  }

.autoContent{ max-width: var(--autoWidth); padding: 0px 20px; margin: auto; width: 100%; }



::-webkit-scrollbar {
  width: 5px;  
  height: 5px;  
}
 
::-webkit-scrollbar-track {
  background: var(--grey);  
  border-radius: 3px; 
}

 ::-webkit-scrollbar-thumb {

  border-radius: 3px;  
  background: var(--orange_color); 
}

 ::-webkit-scrollbar-thumb:hover {
  background: var(--orange_color2);  
}
 
.dashboard_main{ width: 100%; display: flex; }
 

.all_btn{ display: inline-flex; align-items: center; cursor: pointer; border-radius: 5px; color: var(--white); padding: 0.5435em 0.75em; gap: 10px; transition: var(--transition); font-size: 14px; font-weight: 600; min-height: 36px; max-height: 36px; border: 1px solid var(--orange_color3); }

.all_btn i{ width: 16px !important; height: 16px !important; display: block !important; }
.all_btn i svg{ width: 16px; height: 16px; display: block;} 

.icon_white i{ color: var(--white) !important; }
.icon_black i{ color: var(--black) !important; }

.btn_orange{ background-color: var(--orange_color); }
.btn_orange:hover{ background-color: #c2410c; }

.btn_white{ background-color: var(--white); border-color: var(--white); color: var(--black); }
.btn_white:hover{ background-color: var(--orange_color); border-color: var(--orange_color); }

.tab_btns .btn_white:hover svg {
  stroke: var(--white);
}

.tab_btns .btn_white.active svg {
  stroke: var(--white);
}
.tab_btns .btn_white svg {
  stroke: var(--black);
}


.tab_btns .btn_white.active{ background-color: #c2410c; border-color: var(--orange_color); }

.orange_border_btn{ background-color: var(--white); color: var(--orange_color); border-color: var(--orange_color); }
.orange_border_btn:hover{ background-color: var(--orange_color); color: var(--white); }


.dark_blue_btn{ background-color: var(--white); color: var(--dark_blue3); border-color: var(--dark_blue3);  } 
.dark_blue_btn:hover{ color: var(--white); background-color: var(--dark_blue3); border-color: var(--dark_blue3); }
.dark_blue_btn i{ color: var(--dark_blue3); }
.dark_blue_btn:hover i{ color: var(--white) !important; }

 
.purple_btn{ background-color: var(--white); color: var(--purple_color2); border-color: var(--dark_purple);  }  
.purple_btn:hover{ color: var(--white); background-color: var(--purple); border-color: var(--purple); }
.purple_btn i{ color: var(--purple_color2); }
.purple_btn:hover i{ color: var(--white) !important; }
 

.white_btn{ background-color: var(--white); color: var(--black); border-color: var(--slate_grey);  }  
.white_btn:hover{ color: var(--white); background-color: var(--slate_grey); border-color: var(--slate_grey); }
.white_btn i{ color: var(--black); }
.white_btn:hover i{ color: var(--white) !important; }
 

.gray_btn{ background-color: var(--slate_grey); color: var(--black); border-color: var(--slate_grey); }  
.gray_btn:hover{ color: var(--white); background-color: var(--gray3); border-color: var(--slate_grey); }
.gray_btn i{ color: var(--white); }
.gray_btn:hover i{ color: var(--white) !important; }

.red_btn{ background-color: var(--red_color2); color: var(--white); border-color: var(--red_color2); }
.red_btn:hover{ background-color: var(--white); color: var(--red_color2); border-color: var(--red_color2); }
 
 
.red_border_btn{ background-color: var(--white); color: var(--red_color2); border-color: var(--red_color2); }
.red_border_btn:hover{ background-color: var(--red_color2); color: var(--white); border-color: var(--red_color2); }



.btn_disabled{ opacity: 0.5; }

 

.side_bar{ width: 256px; background-color: var(--dark_blue); position: fixed; left: 0px; z-index: 2; height: 100vh; border-right: 1px solid var(--border_color); } 
.content{ width: calc(100% + 256px); padding-left: 256px; background-color: var(--dark_blue2); }


/* side bar css start here */
.side_bar_detail{ width: 100%; } 
.side_bar_header{ padding: 24px; border-bottom: 1px solid var(--border_color); }

.logo_inner{ display: flex; align-items: center; gap: 8px; }

.logo_brand_word{ background-color: var(--orange_color); border-radius: 8px; padding: 10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }

.logo_brand_word span{ color: var(--white); font-size: var(--fs18); line-height: 1.2em; font-weight: 700; display: block; }

.logo_name h2{ color: var(--white); font-size: var(--fs20); line-height: 1.2em; font-weight: 700; }

.bussiness_text{ padding: 12px 24px; border-bottom: 1px solid var(--border_color); background-color: var(--navy_color); }
.bussiness_text span{ color: var(--grey); font-size: 12px; font-weight: 400; line-height: 16px; text-transform: uppercase; display: block;   }
.bussiness_text strong{ color: var(--white); font-size: 14px; font-weight: 500; line-height: 20px; text-transform:lowercase ; display: block;  }


.nav_links{ padding: 24px 12px; overflow-y: auto;
    height: calc(100vh - 212px); }
.nav_links ul{ display: flex; flex-wrap: wrap; padding: 0px !important; }

.nav_links ul li{ width: 100%; padding-bottom: 4px; }

.side_bar_link{ padding: 12px; border-radius: 8px; display: block; transition: var(--transition); }

.side_bar_link:hover{ color: var(--orange_color2); background-color: var(--border_color); }

.nav_link_content{ display: flex; align-items: center; gap: 12px; }
.nav_link_icon{ width: 20px; height: 20px; }
.nav_link_icon i{ width: 100%; height: 100%; display: block; color: var(--gray2); }
.nav_link_icon i svg{ width: 100%; height: 100%; display: block; }

.side_bar_link:hover .nav_link_icon i{ color: var(--orange_color2); }

.nav_link_content span{ color: var(--gray2); font-size: var(--fs16); font-weight: 500; line-height: 1.2em; text-transform:capitalize ; display: block;  }

.side_bar_link:hover .nav_link_content span{  color: var(--orange_color2); }

.side_bar_link.active{ background-color: var(--orange_color); }
.side_bar_link.active .nav_link_icon i{ color: var(--dark_blue2); }
.side_bar_link.active .nav_link_content span{  color: var(--dark_blue2); }
 
.side_bar_footer{ padding: 12px; border-top: 1px solid var(--border_color); position: fixed; bottom: 0px; width: 100%; max-width: 256px; }

 

/* side bar css end here */
 
.content_inner{ padding: 32px 12px; }

.page { display: none; }
.page.active { display: block; }


.page_header{ display: flex; align-items: center; justify-content: space-between; }
.page_header_left h1{ color: var(--white); font-size: var(--fs30); font-weight: 700; line-height: 1.2em; text-transform:capitalize; padding-bottom: 5px; }
.page_header_left p{ color: var(--grey); font-size: var(--fs16); font-weight: 400; line-height: 1.7em;  }

.page_header_btns ul{ padding: 0px !important; }

.page_body{ padding-top: 24px; }

.card{ background-color: var(--dark_blue); padding: 24px; border: 1px solid var(--border_color); border-radius: 12px; height: 100%; }

.card_header{ display: flex; align-items: center; justify-content: space-between; }
.card_heading span{ color: var(--grey); font-size: 14px; font-weight: 500; line-height: 1.2em; text-transform:capitalize;}
.card_heading h3{ color: var(--white); font-size: var(--fs20); font-weight: 600; line-height: 1.2em; text-transform:capitalize;}
.card_heading strong{ color: var(--white); font-size: 20px; font-weight: 600; line-height: 1.2em; text-transform:capitalize;}

.card_icon i{ width: 20px; height: 20px; display: block; color: var(--orange_color3); }
.card_icon i svg{ width: 100%; height: 100%; display: block; }

.card_content{ padding-top: 10px; }
.card_content strong{ color: var(--orange_color3); font-size: var(--fs38); font-weight: 700; line-height: 1.2em;  }

.card_content p{ color: var(--grey); font-size: 12px; font-weight: 400; line-height: 1.2em; padding-top: 4px; }

.card_btns ul{ display: flex; align-items: center; gap: 10px; padding-left: 0px; }

.no_job_scheduled{ padding: 48px 0px; text-align: center; }
.no_job_scheduled_icon{ padding-bottom: 8px; }

.no_job_scheduled_icon i{ width: 36px; height: 36px; display: block; margin: auto; color: var(--gray3); }
.no_job_scheduled_icon i svg{ width: 100%; height: 100%; display: block; }

.no_job_scheduled p{ font-size: 16px; }

 
/* form css start here */
 
.form_row{ display: flex; flex-wrap: wrap;width: auto;}
.form_cell{ width: 100%;}

.form_cell.cellCol50{ width: 50%;}

.form_field{ position: relative; }

.form-input { width: 100%; padding: 0.875em 0.938em 0.875em 3.5em; font-size: var(--fs16); line-height: 1.4em; border: 1px solid var(--border_color);  border-radius: 8px; outline: none; background-color: var(--dark_blue);  transition: var(--transition); height:var(--fieldHeight);  color: var(--white) !important;  font-weight: 500 !important; }
 
.has_no_icon{ padding: 0.875em 0.938em 0.875em 0.938em; }

.form-input:not(:placeholder-shown){ border-color: var(--border_color); background-color: var(--dark_blue);} 

.form-input:focus, .form-input.focus{ background-color: var(--dark_blue); border-color: var(--orange_color3); }
  

 ::placeholder { color: var(--grey);  opacity: 1;  }
 
.field_icon{ width: 2.75em; height: 100%; position: absolute; left: 7px; top: 0px; display: flex; align-items: center; justify-content: center; pointer-events: none;}

.field_icon svg{ max-width: 2.45em ;}

.field_icon path { transition: var(--transition);  }

.field_icon_right{ left: initial; right: 0px;}
 
.form-input:focus + .field_icon svg path {
    stroke: #fff;
}
 

/* .search_field_wrapper .field_icon{ width: 20px; height: 20px; } */

.form-label{ color: var(--white); font-size: 14px; font-weight: 500; line-height: 1.2em; display: inline-block; position: relative; }

.required{ position: relative; display: inline-block; }
.required::after{ content: "*"; top: 0px; right: -12px; position: absolute; }

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
 

 
.form-textarea { width: 100%; padding: 0.875em 0.938em 0.875em 0.938em; font-size: var(--fs16); line-height: 1.4em; border: 1px solid var(--border_color);  border-radius: 8px; outline: none; background-color: var(--dark_blue2);  transition: var(--transition);  color: var(--white) !important;  font-weight: 500 !important; resize: vertical; } 
 

.form-textarea:focus, .form-textarea.focus{ border-color: var(--orange_color3); }


.form_desc{ color: var(--gray6); font-size: 12px; font-weight: 400; line-height: 1.2em; padding-top: 4px;}

/* custome dropdown */

.custom_dropdown {
    position: relative;
}

.dropdown_selected { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer; 
}

.arrow_icon {
    font-size: 12px;
    opacity: 0.7;
}

.dropdown_menu {
    position: absolute;
    width: 100%;
    background-color: var(--dark_blue2);
    border: 1px solid var(--border_color);
    border-radius: 8px;
    margin-top: 6px;
    padding: 6px;
    display: none; 
    z-index: 10;
}

.dropdown_item {
    padding: 8px; 
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.dropdown_item:hover {  background-color: var(--grey5);  border-radius: 8px; }

.check_icon {
    opacity: 0;
    color: var(--white);
}

.check_icon{ width: 16px; height: 16px; }
.check_icon i{ width: 100%; height: 100%; display: block; color: var(--white); }
.check_icon i svg{ width: 100%; height: 100%; display: block; }
.check_icon i svg path{ fill: var(--white); }

.dropdown_item.active .check_icon { opacity: 1;}


.dropdown_item_text, .dropdown_selected_text{ color: var(--white); font-size: 14px; font-weight: 500; display: block; }

.custom_dropdown .placeholder{ background-color: transparent; }

/* custom dropdown */
/* form css end here */



/* customers css start here */

.customers_list{ padding-top: 24px; }
.customer_card{ transition: var(--transition); cursor: pointer; }
.customer_card .card_header{ justify-content: normal; gap: 10px;  }
.customer_card:hover{ border-color: var(--orange_color3); }
.customer_card .card_heading span{ color: var(--white); font-size: var(--fs18); font-weight: 600; line-height: 1.6em; }

.card_contact_info{ padding-top: 24px; }
.card_contact_info ul{ display: flex; flex-wrap: wrap; padding-left: 0px; }
.card_contact_info ul li{ width: 100%; padding-bottom: 16px; }
.card_contact_info ul li:last-child{ padding-bottom: 0px; }
 
.card_contact_detail{ display: flex; align-items: center; gap: 14px; } 
.ccd_icon{ width: 16px; height: 16px; display: block; }
.ccd_icon i, .ccd_icon i svg{ width: 100%; height: 100%; display: block; color: var(--grey); } 

.card_contact_detail a{ color: var(--grey); font-size: var(--fs16); font-weight: 400; line-height: 1.2em; display: block; transition: var(--transition); }

.card_contact_detail a:hover{ color: var(--orange_color3); }
 
/* customer css end here */
 
.custom_modal .modal-content{ background-color: var(--dark_blue); border: 1px solid var(--border_color); }

.custom_modal .modal-header{ justify-content: space-between; border-color: var(--border_color); }
.custom_modal .modal-header h5{color: var(--white); font-weight: 600;}


.custom_modal .modal-footer{ border-color: var(--border_color); }

.modal-footer{ display: flex; align-items: center; justify-content: space-between; }

.modal_body_header{ display: flex; align-items: center; gap: 10px; padding-bottom: 24px; } 
.mb_header_icon{ width: 20px; height: 20px; }
.mb_header_icon i{ color: var(--orange_color3); }
.mb_header_icon i, .mb_header_icon i svg{ width: 100%; height: 100%; display: block; } 


.modal_body_header h4{ color: var(--white); font-size: var(--fs16); font-weight: 600; line-height: 1.2em;  }


.custom_modal .form-input { background-color: var(--dark_blue2); color: var(--white) !important; }

.personal_info_sec{  border-bottom: 1px solid var(--border_color); }

.address_sec{ padding: 16px 0px 0px 0px; border-bottom: 1px solid var(--border_color); }
.modal_sub_heading{ color: var(--white); font-size: var(--fs18); font-weight: 600; line-height: 1.2em; padding-bottom: 16px;  }

.modal_sub_desc{ color: var(--grey); font-size: 14px; font-weight: 400; line-height: 1.2em; padding-bottom: 16px; }

.vehicle_information_sec{ padding: 16px 0px 0px 0px; border-bottom: 1px solid var(--border_color); }
.historical_data_sec{ padding: 16px 0px 0px 0px; border-bottom: 1px solid var(--border_color); }
.sms_consent_sec{ padding: 16px 0px; border-bottom: 1px solid var(--border_color); }


.form_switch_wrapper .form-switch{ display: flex; align-items: center; justify-content: space-between; padding-left: 0px; }
.form_switch_wrapper .form-check-label strong{ color: var(--white); font-size: var(--fs16); font-weight: 600; line-height: 1.2em; padding-bottom: 6px; display: block; }
.form_switch_wrapper .form-check-label p{ color: var(--grey); font-size: 14px; font-weight: 400; line-height: 1.2em;   }

.form-switch .form-check-input{ padding: 10px 20px; margin: 0px; }
.form-switch .form-check-input:checked{ background-color: var(--orange_color3); border-color: var(--orange_color3); }

.form-switch .form-check-input:focus {
    border-color: #f97316;      
    box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25); 
    outline: none;  
}


/* .form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f97316'/%3e%3c/svg%3e");
} */

.notes_sec{ padding: 16px 0px; }

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


.textarea_wrapper{ padding-top: 20px; }



/* step panel */


/* Step Panels */
.step-panel { display: none; background-color: var(--dark_blue); border-radius: 12px; padding: 32px; border: 1px solid var(--border_color)}

.step-panel.active { display: flex; flex-direction: column;}

.step-content { flex-grow: 1;}
 
.step_header{ padding-bottom: 24px; } 
.step-title { font-size: var(--fs28); font-weight: 600; padding-bottom: 12px; color: #ffffff;} 
.step-subtitle { font-size: var(--fs16); color: var(--grey);}
 
.info-box { background-color: var(--dark_navy_blue); border: 1px solid var(--dark_navy_blue2); border-radius: 8px; padding: 16px; margin-bottom: 24px; }
.info-box p{ font-size: 14px; font-weight: 400; line-height: 1.2em; color: var(--sky_blue); }
  
.button-group-top { padding-bottom: 32px; }
 
   
.upload-area { border: 2px dashed var(--border_color); border-radius: 8px; padding: 50px 40px; text-align: center; cursor: pointer; transition: var(--transition); margin-bottom: 24px; background-color: var(--dark_blue2);}

.upload-area:hover { border-color: #5a7a9e; background-color: var(--dark_blue);}
 

.upload-icon{ width: 48px; height: 48px; display: flex; justify-content: center; margin: auto; }
.upload-icon i{ width: 100%; height: 100%; display: block; color: var(--grey); }
.upload-icon i svg{ width: 100%; height: 100%; display: block; margin-bottom: 0px !important; }
 
.upload-area-text h3{ color: var(--gray2); font-size: var(--fs16); font-weight: 500; line-height: 1.2em; padding: 4px 0px 10px 0px; }

.upload-area-text p{ color: var(--gray6); font-size: 14px; font-weight: 400; line-height: 1.2em; } 
 

.step-footer{ width: 100%; }
.step-footer .all_btn{ width: 100%; justify-content: center; }


.step2_wrapper .info-box{ background-color: #f973161a; border-color: #f973164d; }
.step2_wrapper .info-box p{  color: var(--orange_color2); }

.steps_table h4{ color: var(--grey); font-size: 14px; font-weight: 400; line-height: 1.2em; padding-bottom: 10px; }

/* .table{ border-color: red; border-collapse: collapse; } */

.table-bordered{ border-color: var(--border_color) !important; }
.table-head th{ background-color: var(--dark_blue2); color: var(--white); padding: 8px 12px; }
.table-body tr td{ color: var(--grey); padding: 8px 12px; background-color: transparent; }


.steps_form .form-input:not(:placeholder-shown){ background-color: var(--dark_blue2); }

.steps_form .dropdown_selected{ height: 38px; }

.completed_icon{ width: 64px; height: 64px; margin: auto; }
.completed_icon i{ width: 100%; height: 100%; display: block; color: var(--green_color); }
.completed_icon i svg{ width: 100%; height: 100%; display: block; }

.completed-detail{ text-align: center; padding: 16px 0px; }
.completed-detail h2{ color: var(--white); font-size: var(--fs24); font-weight: 700; line-height: 1.5em; padding-bottom: 8px; }

.completed-detail p{ color: var(--gray2); font-size: var(--fs16); font-weight: 400; line-height: 1.4em; padding-bottom: 10px; }


.step3_wrapper{ padding: 48px 32px; }

.imported-box{ background-color: var(--dark_blue2); padding: 22px 16px; margin: auto; max-width: 448px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; } 

.imported-box span{ color: var(--grey); font-size: 14px; font-weight: 400; line-height: 1.2em; display: block; }

.imported-box strong{ color: var(--green_color); font-size: var(--fs16); font-weight: 700; line-height: 1.2em; display: block; }


.step3_wrapper .more-customer-btn{ display: flex; align-items: center; justify-content: center; }

/* step panel */
 
/* team css start here */
 
.card_header_email{ padding-top: 12px; }
.team_page .card_header{ align-items: start; }
.team_page .card_content{ padding-top: 24px; }
.badge{ font-size: 12px !important; font-weight: 600 !important; line-height: 1em !important; padding: 4px 10px !important; border-radius: 8px !important; transform: var(--transition); display: inline-flex !important; }

.badge-red{ color: var(--white); background-color: var(--red_color);  }

.badge-red:hover{ background-color: #171717cc; }


.team_performance_box{ background-color: var(--dark_blue2); border-radius: 8px; padding: 18px 16px; }

.tp_box_header{ display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.tp_box_header_icon{ width: 16px; height: 16px; }
.tp_box_header_icon i{ width: 100%; height: 100%; display: block; color: var(--grey); }
.tp_box_header_icon i svg{ width: 100%; height: 100%; display: block; }

.tp_box_header h4{ color: var(--grey); font-size: 14px; font-weight: 400; line-height: 1.2em; }

.team_performance_content ul{ display: flex; align-items: center; flex-wrap: wrap; margin: -10px; padding-left: 0px; }
.team_performance_content ul li{ width: 25%; padding: 8px;  }
.team_performance_detail h5{ color: var(--white); font-size: 18px; font-weight: 700; line-height: 1.2em; }

.team_performance_detail span{ color: var(--grey); font-size: 12px; font-weight: 400; line-height: 1.4em; display: block; } 
.completed{ color: var(--green_color) !important; } 
.in_progress{ color: var(--orange_color3) !important; } 
.scheduled{ color: var(--dark_sky_blue) !important; } 

.assigned_services_box{ background-color: var(--dark_blue2); border-radius: 8px; padding: 16px; }
.assigned_services_box p{ color: var(--grey); font-size: 14px; line-height: 1.2em; font-weight: 400; }

.weekly_availability_sec{ padding-top: 16px; }
.weekly_availability_box{ padding: 16px; background-color: var(--dark_blue2); border-radius: 8px; }

 
 
.day-item { background: var(--dark_blue); border-radius: 10px; padding: 12px 16px; transition: var(--transition); display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
 
  
.day-header { display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; z-index: 2; max-width: 180px; width: 100%;}
 
 
.day-checkbox { width: 16px; height: 16px; cursor: pointer; appearance: none; -webkit-appearance: none; background: var(--white); border: 2px solid var(--white); border-radius: 4px; transition: var(--transition); position: relative; flex-shrink: 0; }

.day-checkbox:checked { background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%); border-color: #ff6b35; }

.day-checkbox:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-size: 10px; font-weight: bold; }

.day-checkbox:hover { box-shadow: 0 0 8px rgba(255, 107, 53, 0.3);}
 
.day-label { font-size: 16px; font-weight: 600; color: var(--white); cursor: pointer; user-select: none; letter-spacing: 0.3px; transition: var(--transition);}

.day-checkbox:checked ~ .day-label,
.day-checkbox:checked + .day-label { color: var(--white); }
 
.time-inputs { display: flex; align-items: center; gap: 12px; display: none; overflow: hidden; transition: var(--transition);}

.time-inputs.active { display: flex;} 
.time-input { background: var(--white); border: none; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--black); cursor: pointer; transition: var(--transition); flex: 1; text-align: center; }
 
.time-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2); }
 
.time-input::-webkit-calendar-picker-indicator { cursor: pointer; } 
.time-separator { color: var(--grey); font-size: 14px; font-weight: 600; user-select: none; }
 
.gap_10px{ gap: 10px; }
 

/* team css end here */


.customers_table{ background-color: var(--dark_blue); border-radius: 10px; border: 1px solid var(--border_color); margin-top: 24px; }

.table_wrapper{  overflow: hidden; overflow-x: auto;  overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.table_wrapper .table{  min-width: max-content;  border-collapse: collapse; }
.customers_table .table{ margin: 0px; width: 100%; }

.customers_table .table-head th{ background-color: var(--dark_blue); border-color: var(--border_color); color: var(--grey);  }
.customers_table .table-head th, .customers_table .table-body td{ padding: 10px 16px; }
.customers_table .table-body td{ border-color: transparent;  vertical-align: middle; }

.all_btn.table-view-btn{ border-color: var(--dark_blue); }
.table-view-btn{ color: var(--orange_color2); transition: var(--transition); padding: 12px 16px; }
.table-view-btn:hover{ background-color: #f5f5f5; color: var(--orange_color2); }


.customers_table .table-body tr{ transition: var(--transition); }
.customers_table .table-body tr:hover{ background-color: #11182780; }



.color_white{ color: var(--white) !important; }
.color_green{ color: var(--green_color) !important; }
.sky_blue_color{ color: var(--dark_sky_blue); }
.color_orange{ color: var(--orange_color3); } 
.red_color{ color: var(--red_color) !important; } 
 
.customer_overview{ padding: 16px 0px; }

.customer_overview_box{ padding: 16px; background-color: var(--dark_blue2); border: 1px solid var(--border_color); border-radius: 8px; }
.co_box_icon{ width: 32px; height: 32px; }
.co_box_icon i{ width: 100%; height: 100%; display: block; }

.co_box_icon i svg{ width: 100%; height: 100%; display: block; }


.co_box_detail span{ color: var(--grey); font-size: 12px; line-height: 1.2em; font-weight: 400; display: block; }
.co_box_detail h3{ color: var(--white); font-size: var(--fs20); line-height: 1.2em; font-weight: 700; display: block; padding-top: 4px; }


.timeOff_dateOverride{ padding: 16px 0px 0px 0px; }

.timeOff_dateOverride_icon{ width: 20px; height: 20px; }
.timeOff_dateOverride_icon i{ width: 100%; height: 100%; display: block; color: var(--red_color); }
.timeOff_dateOverride_icon i svg{ width: 100%; height: 100%; display: block; }

.timeOff_dateOverride_content{ background-color: var(--dark_blue2); padding: 16px; border-radius: 8px; }


.timeOff_dateOverride_content .form-input{ background-color: var(--white) !important; color: var(--black) !important; height: 36px; }

.timeOff_dateOverride_content input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0);
}

.timeOff_dateOverride_content .dropdown_selected_text{ color: var(--black) !important; }
.timeOff_dateOverride_content{ display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.timeOff_dateOverride_left{ width: 100%; flex: 1; }
.timeOff_dateOverride_content .plus_icon{ width: 48px; }
.timeOff_dateOverride_content .plus_icon .all_btn{ width: 100%; display: flex; align-items: center; justify-content: center; }

.active_switch{ border-bottom: none; }

.active_switch .form_switch_wrapper .form-switch{justify-content: flex-start;  }
.active_switch .form_switch_wrapper .form-check-label strong{ padding-bottom: 0px; padding-left: 10px; }



.timeStamp_dateTime{ padding-top: 16px; }

.timeStamp_dateTime_box{ display: flex; align-items: center; gap: 8px; padding: 2px 10px; border-radius: 6px; border: 1px solid #60a5fa; }

.timeStamp_dateTime_box i{ width: 12px; height: 12px; display: block; color: #60a5fa; }
.timeStamp_dateTime_box i svg{ width: 100%; height: 100%; display: block; }

.timeStamp_dateTime_box span{ color: #60a5fa; font-size: 12px; font-weight: 600; line-height: 1.2em; display: block; }



.ss_detail .custom_dropdown{ width: 180px; }
.ss_detail .custom_dropdown .form-input{ background-color: var(--dark_blue2); }

.ss_detail{ margin: -8px; flex-wrap: wrap; }

.ss_detail_li{ padding: 8px; }


.service_specifications .fade:not(.show){ display: none; }


.services_card .card_header{ display: flex; align-items: flex-start; justify-content: space-between; }

.services_card .card_heading span{ color: var(--white); }


.card_header_right_content{ text-align: end; }
.card_header_right_content ul{ display: flex; flex-wrap: wrap; padding-left: 0px; }
.card_header_right_content ul li{ width: 100%; padding-bottom: 6px; }
.card_header_right_content ul li:last-child{ padding-bottom: 0px; }
.badge{ color: var(--white); font-size: 12px; font-weight: 700; padding: 2px 10px; border: 1px solid transparent; border-radius: 6px; transform: var(--transition); }
 
.badge_red {
  background: linear-gradient(to right, #f97316, #ef4444);
}

.badge_blue{ background-color: var(--dark_sky_blue); }
.badge_blue:hover{ background-color: #171717cc; }

.services_card .card_content{ padding-top: 24px; }
.card_desc{ padding-bottom: 12px; }
.card_desc p{ font-size: 14px; font-weight: 400; line-height: 1.2em; }

.card_price_time{ display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border_color); }

.card_price, .card_time{ display: flex; align-items: center; }

.card_price i, .card_time i{ width: 16px; height: 16px; display: flex; color: var(--grey); }
.card_price i svg, .card_time i svg{ width: 100%; height: 100%; display: 100%; }

.card_price span, .card_time span{ color: var(--grey); font-size: 14px; font-weight: 400; display: inline-block; padding-left: 6px; }

.card_footer{ display: flex; align-items: center; gap: 15px; padding-top: 16px; }
.card_footer_left{ flex: 1; }
.card_footer_right{ width: 40px; }

.mobHeader{ display: none; }

.mob_menuBtn{ width: 24px; height: 24px; cursor: pointer; display: none; }
.mob_menuBtn i{ width: 100%; height: 100%; display: block; color: var(--white); }
.mob_menuBtn i svg{ width: 100%; height: 100%; display: block;  }

.crossIcon{ width: 30px; height: 30px;}

.modal_heading p{ color: var(--grey); font-size: var(--fs16); font-weight: 400; line-height: 1.2em; padding-top: 6px;  }


.service_priority_sec{ padding: 16px 0px 16px 0px; border-bottom: 1px solid var(--border_color); }
.service_priority_box{ background-color: var(--dark_blue2); }

.sp_box_header{ padding-bottom: 16px; }
.sp_box_header .form_switch_wrapper .form-switch{ justify-content: flex-start; }
.sp_box_header .form_switch_wrapper .form-check-label strong{ padding-bottom: 0px; padding-left: 16px; }

.sp_box_content .form-input{ background-color: var(--dark_blue); }
 

.vehicle_size_sec{ padding: 16px 0px 16px 0px; }
.vehicle_size_box{ background-color: var(--dark_blue2); }

.vehicle_size_box .card_header{ justify-content: flex-start; gap: 10px; }
.vehicle_size_box .card_heading span{ color: var(--white); }

.card_name{ padding: 16px 0px; }
.card_name h5{ color: var(--grey); font-size: 14px; font-weight: 400; line-height: 1.2em; }
.vehicle_size_content .form-label{ color: var(--grey); }
.vehicle_size_content .form-input {
    background-color: var(--dark_blue);
}

/*  
.filter_box h3{ color: var(--dark_blue2); font-size: var(--fs18); font-weight: 600; line-height: 1.2em; } */

.light_dropdown .form-input:not(:placeholder-shown){ background-color: var(--white); border-color: #e5e7eb; }
.light_dropdown .dropdown_item_text, .light_dropdown .dropdown_selected_text{ color: var(--black); }

.light_dropdown .dropdown_menu{ background-color: var(--white); border-color: #e5e7eb; }
.light_dropdown .check_icon, .light_dropdown .check_icon i{ color: var(--black); }
.light_dropdown .check_icon i svg path{ fill: var(--black); }
.light_dropdown .arrow_icon{ color: var(--black); }

.light_dropdown .form-label{ color: var(--dark_blue2); }


.newAppointmentPopup .field_icon{ color: grey; }
.newAppointmentPopup .form-input:focus + .field_icon svg path{ stroke: grey; }



.added_customers_detail{ background-color: var(--dark_blue2); border-radius: 8px; border: 1px solid var(--border_color); overflow: hidden; }
.added_customers_detail ul{ display: flex; flex-wrap: wrap; padding-left: 0px; }
.added_customers_detail ul li{ width: 100%; border-bottom: 1px solid var(--border_color); }
.added_customers_detail ul li:last-child{ border-bottom: none; }
.added_customers_detail ul li a{ padding: 12px 20px; display: block; transition: var(--transition); }
.added_customers_detail ul li a:hover{ background-color: var(--dark_blue); }


.added_customer_data h4{ color: var(--white); font-size: var(--fs20); font-weight: 700; line-height: 1.2em; padding-bottom: 10px; }
.added_customer_data p{ color: var(--grey); font-size: var(--fs16); font-weight: 500; line-height: 1.2em; }
.added_customer_data span{ width: 4px; height: 4px; background-color: var(--grey); border-radius: 50%; display: block; }
 
  
#addedCustomerFrom { 
    display: none;  
}

.add_oppintment{ background-color: var(--dark_blue2); padding: 10px; border-radius: 8px; border: 1px solid var(--border_color); margin-bottom: 16px; overflow-y: auto; min-height: 200px; overflow-y: auto; max-height: 328px;
height: 100%; overflow-x: hidden; }
.add_oppintment .form-input{ background-color: var(--dark_blue); }

.newAppointmentPopup .modal_body_header{ padding-bottom: 12px; }


/* calender page css start */

 
.calender_page_wrapper{ 
    background: #fff; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
    border: 1px solid #e5e7eb;
}

.calendar-container .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.calendar-container .nav-buttons {
    display: flex;
    gap: 10px;
}

.calendar-container .nav-buttons button {
    background-color: #2c3e50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.calendar-container .nav-buttons button:hover {
    background-color: #34495e;
}

.calendar-container .nav-buttons i{ width: 20px; height: 20px; display: block; }
.calendar-container .nav-buttons i svg{ width: 100%; height: 100%; display: block; }
.calendar-container .nav-buttons i svg path{ stroke: #fff;  }

.calendar-container #nextBtn i svg{ transform: rotate(-180deg); }

.calendar-container .today-btn {
    background-color: #7f8c8d !important;
}

.calendar-container .today-btn:hover {
    background-color: #95a5a6 !important;
}

.calendar-container .current-month {
    font-size: 28px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.calendar-container .view-options {
    display: flex;
    gap: 8px;
}
.calendar-container 
.view-options button {
    background-color: #2c3e50;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s;
}

.calendar-container .view-options button:hover,
.calendar-container .view-options button.active {
    background-color: #3498db;
}

 

.calendar-grid-wrapper{  overflow-x: auto; width: 100%; }
 
.calendar-container .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);  
    gap: 1px;
    background-color: #bdc3c7;
    border: 1px solid #bdc3c7;
    margin-bottom: 20px;
    width: 100%; 
     
}



.calendar-container .day-header {
    background-color: #ecf0f1;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    color: #2c3e50;
    border-right: 1px solid #bdc3c7;
    max-width: 100% !important;
}

.calendar-container .day-header:last-child {
    border-right: none;
}

.calendar-container .calendar-day {
    background-color: white;
    min-height: 120px;
    padding: 8px;
    cursor: pointer;
    overflow-y: auto;
    border-right: 1px solid #bdc3c7;
    position: relative;
}

.calendar-container .calendar-day:last-child {
    border-right: none;
}

.calendar-container .calendar-day.other-month {
    background-color: #f9f9f9;
}

.calendar-container .calendar-day.today {
    background-color: #fffacd;
}

.calendar-container .day-number {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
    font-size: 14px;
}

.calendar-container .calendar-day.other-month .day-number {
    color: #bdc3c7;
}
 
.calendar-container .event {
    background-color: #3498db;
    color: white;
    padding: 3px 6px;
    margin: 2px 0;
    border-radius: 3px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.2s;
}

.calendar-container .event:hover {
    background-color: #2980b9;
}

.calendar-container .event.all-day {
    background-color: #3498db;
}

.calendar-container .event.birthday {
    background-color: #e74c3c;
}

.calendar-container .event.conference {
    background-color: #9b59b6;
}

.calendar-container .event.meeting {
    background-color: #16a085;
}

.calendar-container .event.other {
    background-color: #f39c12;
}

.calendar-container .more-events {
    color: #3498db;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 2px;
    padding: 2px 4px;
}

.calendar-container .more-events:hover {
    text-decoration: underline;
}

 

.calender_modal_wrapper .modal-content { 
    margin: 10% auto; 
    max-width: 400px; 
}
 
.calender_modal_wrapper .event-time { font-weight: 600; color: #3498db; min-width: 50px;
}

.calender_modal_wrapper .event-title { color: #2c3e50;} 

.calender_modal_wrapper .modal-event{ display: flex; align-items: center; gap: 20px; }

.calender_modal_wrapper .event-title{ color: #fff; } 
.filter_box { display: none; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; border: 1px solid #e5e7eb;
} 
.filter_box h3{ color: var(--dark_blue2); font-size: var(--fs18); font-weight: 600; line-height: 1.2em; padding-bottom: 20px; }

 
 /* calender page css end */

.invoices_content .card_content{ padding-top: 6px; }
.invoices_content .card_content strong{ font-size: var(--fs24); }
.invoices_content .card_icon{ width: 32px; height: 32px; }
.invoices_content .card_icon i{ width: 100%; height: 100%; }
 
 
.delete_item span{ width: 16px; height: 16px; display: block; }
.delete_item span svg{ width: 100%; height: 100%; display: block; }
.total_rupees{ color: var(--white); }

.item-row-inner{ background-color: var(--dark_blue); padding: 10px; border-radius: 8px; border: 1px solid var(--border_color); }

.pt-30{ padding-top: 30px; }

.subtotal_sec{ background-color: var(--dark_blue2); }
.subtotal_content ul{ display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; padding-left: 0px; }
.subtotal_content ul li{ width: 100%; }
.subtotal_detail{ display: flex; align-items: center; justify-content: space-between; }
.subtotal_detail span, .subtotal_detail strong{ color: var(--white); font-size: var(--fs16); line-height: 1.2em; display: block; }

.subtotal_footer{ margin-top: 10px; border-top: 1px solid var(--border_color); }

.subtotal_total{ display: flex; align-items: center; justify-content: space-between; padding-top: 10px; }

.subtotal_total span, .subtotal_total strong{ color: var(--white); font-size: var(--fs18); font-weight: 700; line-height: 1.2em; display: block; }
.subtotal_total strong{ color: var(--orange_color) !important; }


.create_appointment_sec{ padding: 16px 0px; } 
.create_appointment_sec .form_switch_wrapper .form-switch{ justify-content: flex-start; }
.create_appointment_sec .form_switch_wrapper .form-switch label{ padding-left: 20px; }

.tax_rate_calculation .form-input{ background-color: var(--dark_blue); }

.appointment_content{ margin-top: 20px; background-color: #1e3a8a33; border-color: #3b82f64d; }
.appointment_content p{ color: #93c5fd; font-size: 14px; font-weight: 400; line-height: 1.2em; padding-bottom: 16px; }


.appointment_content .form-input{ background-color: var(--white); color: var(--black) !important; }
.appointment_content 
.form-input::-webkit-calendar-picker-indicator {
    filter: invert(0); /* black */
}

.appointment_content .dropdown_selected{ background-color: var(--dark_blue2); }
.appointment_content .dropdown_selected .arrow_icon{ color: var(--white); }