{"version":3,"file":"./style-index.css","mappings":";;;AAAA;AACA;EACI;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;AACJ;;AAGA;AACA;;EAEI;EACA;EACA;EACA;EACA;EACA;AAAJ;;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAAJ;;AAGA;EACI;IACI;EAAN;EAGE;IACI;EADN;AACF;AAIA;EACI;EACA;AAFJ;;AAKA;EACI;EACA;AAFJ;;AAKA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;KAAA;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAFJ;;AAKA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAFJ;;AAKA;EAEI;IAEI;IACA;EAJN;EAOE;IACI;IACA;EALN;AACF;AAQA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AANJ;;AASA;EACI;EACA;AANJ;;AAWA;AACA;EACI;EACA;EACA;EACA;EACA;AARJ;;AAWA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AARJ;;AAWA;EACI;EACA;AARJ;;AAWA;EACI;EACA;AARJ;;AAWA;;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AARJ;;AAWA;EACI;AARJ;;AAWA;EACI;AARJ;;AAWA;EACI;EACA;EACA;EACA;AARJ;;AAWA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AARJ;;AAWA;EACI;EACA;EACA;AARJ;;AAWA;EACI;AARJ;;AAWA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AARJ;;AAWA;EACI;AARJ;;AAWA;EACI;EACA;AARJ;;AAWA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AARJ;;AAWA;EACI;EACA;AARJ;;AAWA;EACI;AARJ;;AAWA;EACI;EACA;AARJ;;AAWA;EACI;AARJ;;AAWA;AACA;EACI;AARJ;;AAWA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AARJ;;AAWA;EACI;EACA;EACA;AARJ;;AAWA;EACI;EACA;EACA;EACA;KAAA;EACA;EACA;AARJ;;AAWA;EACI;AARJ;;AAWA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AARJ;;AAWA;EACI;AARJ;;AAWA;AACA;EACI;IACI;EARN;EAWE;IACI;IACA;EATN;EAYE;IACI;EAVN;EAaE;IACI;EAXN;AACF;AAcA;AACA;;EAEI;AAZJ;;AAeA;;EAEI;AAZJ;;AAeA;;EAEI;EACA;AAZJ;;AAeA;;EAEI;AAZJ;;AAiBA;AACA;EACI;EACA;EACA;EACA;AAdJ;AAgBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAdR;;AAkBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAfJ;;AAkBA;EACI;EACA;EACA;AAfJ;;AAkBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAfJ;;AAkBA;EACI;EACA;AAfJ;;AAkBA;AACA;EACI;EACA;EACA;AAfJ;;AAkBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAfJ;;AAkBA;EACI;EACA;EACA;AAfJ;;AAkBA;EACI;EACA;EACA;EACA;AAfJ;;AAkBA;;;EAGI;AAfJ;;AAkBA;EACI;EACA;EACA;AAfJ;;AAkBA;EAEI;IAEI;EAjBN;EAoBE;IACI;EAlBN;AACF;AAqBA;EACI;EACA;AAnBJ;;AAsBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAnBJ;;AAsBA;EACI;EACA;AAnBJ;;AAsBA;EACI;AAnBJ;;AAsBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAnBJ;;AAsBA;EAEI;IAEI;EArBN;EAwBE;IACI;EAtBN;AACF;AAyBA;EACI;EACA;EACA;EACA;EACA;AAvBJ;;AA0BA;EACI;EACA;EACA;AAvBJ;;AA0BA;EACI;EACA;EACA;EACA;AAvBJ;;AA0BA;AACA;EACI;EACA;EACA;EACA;EACA;AAvBJ;;AA0BA;EACI;EACA;EACA;EACA;EACA;AAvBJ;;AA0BA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAvBJ;;AA0BA;EACI;EACA;EACA;EACA;EACA;AAvBJ;;AA0BA;EACI;EACA;EACA;AAvBJ;;AA0BA;AACA;EACI;EACA;EACA;EACA;EACA;AAvBJ;;AA0BA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,6KACI;EAEJ;AAzBJ;;AA4BA;EACI;EACA;EACA;EACA;EACA;EACA;AAzBJ;;AA4BA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAzBJ;;AA4BA;EACI;EACA;EACA;EACA;AAzBJ;;AA4BA;EACI;EACA;EACA;EACA;AAzBJ;;AA4BA;EACI;IACI;IACA;EAzBN;EA4BE;IACI;IACA;EA1BN;AACF;AA6BA;EACI;AA3BJ;;AA8BA;EACI;EACA;EACA;EACA;KAAA;EACA;EACA;EACA;AA3BJ;;AA8BA;EACI;AA3BJ;;AA8BA;EACI;AA3BJ;;AA8BA;EACI;EACA;EACA;EACA;AA3BJ;;AA8BA;EACI;AA3BJ;;AA8BA;EACI;EACA;EACA;AA3BJ;;AA8BA;EACI;EACA;AA3BJ;;AA8BA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AA3BJ;;AA8BA;EACI;EACA;EACA;AA3BJ;;AA8BA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA3BJ;;AA8BA;EACI;EACA;EACA;EACA;AA3BJ;;AA8BA;EACI;EACA;EACA;EACA;EACA;EACA;AA3BJ;;AA8BA;EACI;EACA;AA3BJ;;AA8BA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA3BJ;;AA8BA;EACI;EACA;AA3BJ;;AA8BA;EACI;EACA;EACA;EACA;AA3BJ;;AA8BA;EACI;AA3BJ;;AA8BA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AA3BJ;;AA8BA;EACI;EACA;EACA;AA3BJ;;AA8BA;;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA3BJ;;AA8BA;;EAEI;EACA;EACA;AA3BJ;;AA8BA;;EAEI;AA3BJ;;AA8BA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA3BJ;;AA8BA;EACI;IACI;IACA;EA3BN;EA8BE;IACI;IACA;EA5BN;AACF;AA+BA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7BJ;;AAgCA;EACI;AA7BJ;;AAgCA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7BJ;;AAgCA;EACI;EACA;KAAA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7BJ;;AAgCA;EACI;EACA;EACA;EACA;AA7BJ;;AAgCA;EACI;EACA;AA7BJ;;AAgCA;EACI;EACA;AA7BJ;;AA2BA;EACI;EACA;AA7BJ;;AAgCA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7BJ;;AAgCA;EACI;EACA;AA7BJ;;AAgCA;EACI;AA7BJ;;AAgCA;EACI;EACA;EACA;EACA;AA7BJ;;AAgCA;AACA;EACI;IACI;IACA;EA7BN;EAgCE;;;IAGI;IACA;IACA;EA9BN;EAiCE;IACI;IACA;EA/BN;AACF;AAmCA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;AAjCJ;;AAoCA;EACI;EACA;EACA;EACA;EACA;EACA;EACA,6KACI;EAEJ;AAnCJ;;AAsCA;EACI;EACA;EACA;EACA;AAnCJ;;AAsCA;EACI;EACA;EACA;EACA;AAnCJ;;AAsCA;EAEI;IAEI;EArCN;EAwCE;IACI;EAtCN;AACF;AAyCA;EACI;EACA;EACA;EACA;AAvCJ;;AA0CA;EACI;EACA;AAvCJ;;AA0CA;AACA;EACI;IACI;EAvCN;EA0CE;IACI;EAxCN;AACF;AA2CA;EACI;IACI;IACA;EAzCN;EA6CE;IACI;IACA;IACA;IACA;IACA;IACA;IACA;EA3CN;EA8CE;IACI;EA5CN;EA+CE;IACI;EA7CN;EAgDE;IACI;EA9CN;EAiDE;IACI;EA/CN;EAkDE;IACI;EAhDN;EAmDE;IACI;EAjDN;EAoDE;IACI;EAlDN;AACF;AAqDA;EACI;IACI;EAnDN;EAsDE;IACI;EApDN;EAuDE;IACI;EArDN;EAwDE;IACI;IACA;EAtDN;AACF;AAyDA;AACA;;EAEI;AAvDJ;;AA0DA;;EAEI;EACA;AAvDJ;;AA0DA;;EAEI;EACA;EACA;AAvDJ;;AA0DA;;EAEI;AAvDJ;;AA0DA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAvDJ;;AA0DA;EACI;EACA;AAvDJ;;AA0DA;EACI;IACI;EAvDN;AACF;AA0DA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAxDJ;;AA2DA;EACI;EACA;EACA;EACA;EACA;AAxDJ;;AA2DA;EACI;AAxDJ;;AA2DA;EACI;AAxDJ;;AA2DA;EAEI;IAGI;EA3DN;EA8DE;IACI;EA5DN;AACF;AA+DA;AAIA;AACA;EACI;EAEA;EACA;AAjEJ;;AAqEA;EACI;EACA;EACA;EACA;EACA;AAlEJ;AAoEI;EACI;EACA;EACA;EACA;AAlER;AAqEI;EACI;AAnER;AAqEQ;EACI;EACA;EACA;EACA;AAnEZ;AAsEQ;EACI;EACA;EACA;AApEZ;AAsEY;EACI;EACA;AApEhB;AAwEQ;EACI;EACA;EACA;EACA;AAtEZ;AAwEY;EACI;AAtEhB;AA0EQ;EACI;EACA;EACA;AAxEZ;AA0EY;EACI;EACA;AAxEhB;AA0EgB;EACI;AAxEpB;AA8EI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5ER;AA+EI;EACI;EACA;AA7ER;AA+EQ;EACI;AA7EZ;;AAkFA;EACI;EACA;EACA;AA/EJ;AAiFI;EACI;EACA;EACA;AA/ER;AAkFI;EACI;EACA;EACA;AAhFR;;AAoFA;EACI;EACA;EACA;EACA;EACA;EACA;AAjFJ;AAmFI;EACI;EACA;EACA;AAjFR;AAmFQ;EACI;EACA;AAjFZ;AAmFY;EACI;EACA;EACA;EACA;EACA;AAjFhB;AAoFY;EACI;EACA;EACA;EACA;EACA;EACA;AAlFhB;AAoFgB;EACI;EACA;EACA;AAlFpB;AAqFgB;EACI;AAnFpB;AAkFgB;EACI;AAnFpB;AAuFY;EACI;EACA;EACA;AArFhB;AAyFQ;EACI;EACA;AAvFZ;AAyFY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAvFhB;AAyFgB;EACI;EACA;AAvFpB;AA0FgB;EACI;EACA;AAxFpB;AA0FoB;EACI;AAxFxB;AA4FgB;EACI;EACA;AA1FpB;AA4FoB;EACI;AA1FxB;;AAkGA;EACI;EACA;EACA;EACA;EACA;AA/FJ;AAiGI;EACI;EACA;EACA;EACA;AA/FR;AAkGI;EACI;EACA;EACA;AAhGR;AAkGQ;EACI;EACA;AAhGZ;AAoGI;EACI;EACA;AAlGR;AAoGQ;EACI;AAlGZ;AAsGI;EACI;EACA;EACA;EACA;EACA;AApGR;AAsGQ;EACI;EACA;AApGZ;AAuGQ;EACI;AArGZ;AAwGQ;EACI;EACA;EACA;EACA;AAtGZ;AAwGY;EACI;AAtGhB;;AA6GA;EACI;IACI;EA1GN;EA6GE;IACI;EA3GN;EA8GE;IACI;EA5GN;EA+GE;IACI;EA7GN;EAgHE;IACI;EA9GN;EAgHM;IACI;EA9GV;AACF;AAkHA;AAEA;AACA;EA+DI;AA/KJ;AAiHI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/GR;AAkHI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhHR;AAmHI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjHR;AAoHI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAlHR;AAqHI;EACI;EACA;EACA;EACA;EACA;EACA;AAnHR;AAwHI;EACI;IACI;EAtHV;EAyHM;IACI;EAvHV;AACF;AA0HI;EACI;IACI;EAxHV;EA2HM;IACI;EAzHV;EA4HM;IACI;EA1HV;AACF;;AAkIA;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EAqDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAAA;AAzHJ;AAsEI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AApER;AAsEQ;EACI;EACA;EACA;EACA;EACA;AApEZ;AAuEQ;EACI;EACA;EACA;EACA;AArEZ;AAyEI;EACI;EACA;EACA;EACA;EACA;AAvER;AAyEQ;EACI;EACA;EACA;AAvEZ;AA0EQ;EACI;EACA;EACA;AAxEZ;AA2EQ;EACI;EACA;EACA;AAzEZ;AA2II;EACI;EACA;EACA;EACA;AAzIR;AA2IQ;EACI;EACA;EACA;EACA;EACA;AAzIZ;AA2IY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzIhB;AA2IgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzIpB;AA4IgB;EACI;EACA;EACA;EACA;AA1IpB;AA4IoB;EACI;AA1IxB;AA8IgB;EACI;EACA;EACA;EACA;AA5IpB;AA8IoB;EACI;AA5IxB;AAgJgB;EACI;EACA;AA9IpB;AAiJgB;EACI;EACA;AA/IpB;AAoJQ;EACI;EACA;AAlJZ;AAuJI;EACI;EACA;AArJR;AAuJQ;EACI;EACA;EACA;EACA;AArJZ;AAwJQ;EACI;EACA;EACA;EACA;AAtJZ;AA2JI;EACI;EACA;EACA;EACA;AAzJR;AA2JQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAzJZ;AA2JY;EACI;EACA;AAzJhB;AA4JY;EACI;EACA;EACA;EACA;EACA;AA1JhB;AA6JY;EACI;EACA;EACA;AA3JhB;AA+JgB;EACI;EACA;AA7JpB;AAkKgB;EACI;EACA;AAhKpB;AAsKI;EACI;EACA;EACA;EACA;EACA;AApKR;AAsKQ;EACI;EACA;EACA;AApKZ;AAsKY;EACI;AApKhB;AAsKgB;EACI;EACA;EACA;EACA;EACA;AApKpB;AAyKgB;EACI;EACA;AAvKpB;AAyKoB;EACI;EACA;AAvKxB;AA0KoB;EACI;AAxKxB;AA4KgB;EACI;EACA;AA1KpB;AAgLI;EACI;EACA;EACA;AA9KR;AAgLQ;EACI;EACA;EACA;EACA;KAAA;EACA;AA9KZ;AAiLQ;EACI;EACA;AA/KZ;AAoLQ;EACI;EACA;AAlLZ;AAsLI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AApLR;AAsLQ;EACI;EACA;EACA;AApLZ;AAuLQ;EACI;EACA;AArLZ;AAuLY;EACI;EACA;AArLhB;AAyLQ;EACI;EACA;AAvLZ;AAyLY;EACI;AAvLhB;AA4LI;EACI;EACA;EACA;EACA;EACA;AA1LR;AA4LQ;EACI;EACA;AA1LZ;AA6LQ;EACI;EACA;AA3LZ;AA+LI;EACI;EACA;AA7LR;AAgMI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA9LR;AAgMQ;EACI;EACA;AA9LZ;AAgMY;EACI;EACA;AA9LhB;AAkMQ;EACI;EACA;AAhMZ;AAkMY;EACI;EACA;AAhMhB;AAqMI;EACI;EACA;EACA;AAnMR;AAqMQ;EACI;EACA;EACA;AAnMZ;AAsMQ;EACI;EACA;EACA;AApMZ;AAuMQ;EACI;EACA;AArMZ;AAyMI;EACI;EACA;EACA;EACA;EACA;EACA;AAvMR;AA2MI;EACI;EACA;EACA;EACA;EACA;EACA;AAzMR;AA2MQ;EACI;EACA;EACA;EACA;AAzMZ;AA6MI;EACI;EAGA;AA7MR;AAgNI;EACI;EACA;EACA;EACA;EACA;AA9MR;AAgNQ;EACI;EACA;AA9MZ;AAiNQ;EACI;EACA;AA/MZ;AAiNY;EACI;EACA;EACA;EACA;AA/MhB;AAkNY;EACI;EACA;EACA;EACA;AAhNhB;AAoNQ;EAEI;EACA;EACA;AAnNZ;AAwNI;EACI;EACA;EACA;EACA;AAtNR;AAwNQ;EACI;EACA;EACA;AAtNZ;AAyNQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAvNZ;AAyNY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAvNhB;AA2NQ;EACI;AAzNZ;AA4NQ;EACI;AA1NZ;AA8NI;;;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;AA5NR;AA8NQ;;;EACI;EACA;EACA;AA1NZ;AA8NI;EACI;EACA;AA5NR;AA+NI;EACI;EACA;EACA;AA7NR;AA+NQ;EACI;EACA;EACA;EACA;EACA;EACA;AA7NZ;AA+NY;EACI;AA7NhB;AAgOY;EACI;EACA;AA9NhB;AAkOQ;EACI;EACA;EACA;EACA;EACA;EACA;AAhOZ;AAqOI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAnOR;AAqOQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAnOZ;AAsOQ;EACI;AApOZ;AAuOQ;EACI;EACA;AArOZ;AAuOY;EACI;EACA;AArOhB;AAwOY;EACI;EACA;EACA;AAtOhB;AA0OQ;EACI;EACA;AAxOZ;AA4OI;EACI;EACA;EACA;EACA;AA1OR;AA8OI;EACI;EACA;EACA;EACA;EACA;AA5OR;AA8OQ;EACI;EACA;EACA;EACA;AA5OZ;AA+OQ;EACI;EACA;AA7OZ;AAgPQ;EACI;EACA;AA9OZ;AAiPQ;EACI;EACA;EACA;EACA;EACA;AA/OZ;AAiPY;EACI;EACA;EACA;AA/OhB;AAkPY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAhPhB;AAsPI;EACI;EACA;EACA;EACA;AApPR;AAsPQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AApPZ;AAsPY;EACI;EACA;AApPhB;AAuPY;EACI;EACA;AArPhB;AAyPgB;EACI;EACA;EACA;EACA;EACA;AAvPpB;AA0PgB;EACI;EACA;EACA;AAxPpB;AA8PI;EACI;AA5PR;AA8PQ;EACI;EACA;EACA;EACA;EACA;AA5PZ;AA8PY;EACI;EACA;EACA;EACA;AA5PhB;AA+PY;EACI;EACA;EACA;AA7PhB;AAgQY;EACI;EACA;EACA;AA9PhB;AAgQgB;EACI;EACA;AA9PpB;AAoQI;EACI;EACA;AAlQR;AAsQI;EACI;IACI;IACA;EApQV;EAuQM;IACI;IACA;EArQV;AACF;AAwQI;EACI;IACI;EAtQV;EAyQM;IACI;EAvQV;AACF;AA0QI;EACI;IACI;IACA;EAxQV;EA2QM;IACI;IACA;EAzQV;EA4QM;IACI;IACA;EA1QV;AACF;AA8QI;EAEQ;IACI;EA7Qd;EA+Qc;IACI;EA7QlB;EAkRM;IACI;EAhRV;AACF;AAmRI;EAh3BJ;IAi3BQ;EAhRN;EAkRM;IACI;IACA;EAhRV;EAkRU;IACI;EAhRd;EAoRM;IACI;IACA;EAlRV;EAoRU;IACI;IACA;EAlRd;EAsRM;IACI;EApRV;EAuRM;IACI;EArRV;EAwRM;IACI;EAtRV;EAyRM;IACI;IACA;EAvRV;EAyRU;IACI;IACA;EAvRd;EA2RM;IACI;EAzRV;AACF;AA4RI;EAEQ;IACI;IACA;EA3Rd;EAgSU;IACI;EA9Rd;AACF,C","sources":["webpack://admin-chat-box/./src/style.scss"],"sourcesContent":["/*  Chat Box Settings Styles */\r\n.acb-chat-container {\r\n    display: flex;\r\n    height: calc(100vh - 50px);\r\n    background: rgba(255, 255, 255, 0.95);\r\n    backdrop-filter: blur(10px);\r\n    border-radius: 5px;\r\n    margin: 12px;\r\n    overflow: hidden;\r\n    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.1);\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n\r\n/* Loading and Error States */\r\n.acb-loading,\r\n.acb-error {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 100vh;\r\n    text-align: center;\r\n}\r\n\r\n.acb-spinner {\r\n    width: 40px;\r\n    height: 40px;\r\n    border: 4px solid #f3f3f3;\r\n    border-top: 4px solid #2196f3;\r\n    border-radius: 50%;\r\n    animation: spin 1s linear infinite;\r\n    margin-bottom: 16px;\r\n}\r\n\r\n@keyframes spin {\r\n    0% {\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    100% {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n\r\n.acb-error h3 {\r\n    color: #f44336;\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.acb-error p {\r\n    color: #666;\r\n    margin-bottom: 16px;\r\n}\r\n\r\n/* User Sidebar */\r\n.acb-user-sidebar {\r\n    width: 350px;\r\n    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);\r\n    border-right: 1px solid rgba(226, 232, 240, 0.8);\r\n    display: flex;\r\n    flex-direction: column;\r\n    position: relative;\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.acb-user-header {\r\n    padding: 24px 20px;\r\n    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.acb-user-header::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);\r\n    pointer-events: none;\r\n}\r\n\r\n.acb-current-user {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.acb-user-avatar {\r\n    width: 48px;\r\n    height: 48px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n    border: 1px solid #dddddd;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n}\r\n\r\n.acb-user-avatar:hover {\r\n    transform: scale(1.05);\r\n    border-color: rgba(255, 255, 255, 0.6);\r\n}\r\n\r\n.acb-user-info h4 {\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    color: white;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.acb-online-status {\r\n    font-size: 13px;\r\n    color: #10b981;\r\n    font-weight: 500;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n\r\nspan.acb-online-status.online {\r\n    font-size: 13px;\r\n    color: rgba(255, 255, 255, 0.9);\r\n    font-weight: 500;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n\r\nspan.acb-online-status.offline {\r\n    font-size: 13px;\r\n    color: rgba(255, 255, 255, 0.9);\r\n    font-weight: 500;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n\r\nspan.acb-online-status.online::before {\r\n    content: '';\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    background: #10b981;\r\n    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);\r\n    animation: pulse 2s infinite;\r\n}\r\n\r\nspan.acb-online-status.offline::before {\r\n    content: '';\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    background: #64748b;\r\n    box-shadow: 0 0 0 2px #64748b;\r\n    animation: pulse 2s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n\r\n    0%,\r\n    100% {\r\n        transform: scale(1);\r\n        opacity: 1;\r\n    }\r\n\r\n    50% {\r\n        transform: scale(1.1);\r\n        opacity: 0.8;\r\n    }\r\n}\r\n\r\n.acb-signout-btn {\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border: none;\r\n    color: white;\r\n    cursor: pointer;\r\n    padding: 12px;\r\n    border-radius: 12px;\r\n    transition: all 0.3s ease;\r\n    backdrop-filter: blur(10px);\r\n}\r\n\r\n.acb-signout-btn:hover {\r\n    background: rgba(255, 255, 255, 0.2);\r\n    transform: translateY(-2px);\r\n}\r\n\r\n\r\n\r\n/* Authentication login page Styles */\r\n.acb-auth-container {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 100vh;\r\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n}\r\n\r\n.acb-auth-box {\r\n    background: #fff;\r\n    padding: 40px;\r\n    border-radius: 12px;\r\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\r\n    text-align: center;\r\n    max-width: 400px;\r\n    width: 90%;\r\n}\r\n\r\n.acb-auth-box h2 {\r\n    margin-bottom: 8px;\r\n    color: #333;\r\n}\r\n\r\n.acb-auth-box p {\r\n    color: #666;\r\n    margin-bottom: 24px;\r\n}\r\n\r\n.acb-google-btn,\r\n.acb-email-btn {\r\n    width: 100%;\r\n    padding: 12px 16px;\r\n    border: 1px solid #e0e0e0;\r\n    border-radius: 8px;\r\n    background: #fff;\r\n    color: #333;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    transition: background-color 0.2s;\r\n    margin-bottom: 12px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n}\r\n\r\n.acb-google-btn:hover {\r\n    background: #f5f5f5;\r\n}\r\n\r\n.acb-email-btn:hover {\r\n    background: #f5f5f5;\r\n}\r\n\r\n.acb-divider {\r\n    position: relative;\r\n    text-align: center;\r\n    margin: 20px 0;\r\n    color: #666;\r\n}\r\n\r\n.acb-divider::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    right: 0;\r\n    height: 1px;\r\n    background: #e0e0e0;\r\n}\r\n\r\n.acb-divider span {\r\n    background: #fff;\r\n    padding: 0 16px;\r\n    font-size: 12px;\r\n}\r\n\r\n.acb-email-form {\r\n    margin-top: 20px;\r\n}\r\n\r\n.acb-email-form input {\r\n    width: 100%;\r\n    padding: 12px 16px;\r\n    border: 1px solid #e0e0e0;\r\n    border-radius: 8px;\r\n    font-size: 14px;\r\n    margin-bottom: 12px;\r\n    outline: none;\r\n    transition: border-color 0.2s;\r\n}\r\n\r\n.acb-email-form input:focus {\r\n    border-color: #2196f3;\r\n}\r\n\r\n.acb-form-actions {\r\n    display: flex;\r\n    gap: 8px;\r\n}\r\n\r\n.acb-form-actions button {\r\n    flex: 1;\r\n    padding: 12px 16px;\r\n    border: none;\r\n    border-radius: 8px;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    transition: background-color 0.2s;\r\n}\r\n\r\n.acb-form-actions button:first-child {\r\n    background: #2196f3;\r\n    color: #fff;\r\n}\r\n\r\n.acb-form-actions button:first-child:hover {\r\n    background: #1976d2;\r\n}\r\n\r\n.acb-form-actions button:last-child {\r\n    background: #f5f5f5;\r\n    color: #333;\r\n}\r\n\r\n.acb-form-actions button:last-child:hover {\r\n    background: #e0e0e0;\r\n}\r\n\r\n/* Profile Image Upload Styles */\r\n.acb-profile-image-section {\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.acb-upload-profile-btn {\r\n    width: 100%;\r\n    padding: 12px;\r\n    border: 2px dashed #ddd;\r\n    border-radius: 8px;\r\n    background: #f9f9f9;\r\n    color: #666;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    font-size: 14px;\r\n}\r\n\r\n.acb-upload-profile-btn:hover {\r\n    border-color: #2196f3;\r\n    background: #f0f8ff;\r\n    color: #2196f3;\r\n}\r\n\r\n.acb-profile-preview {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n    border: 2px solid #fff;\r\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.acb-upload-profile-btn i {\r\n    font-size: 18px;\r\n}\r\n\r\n.acb-retry-btn {\r\n    background: #2196f3;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 20px;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    margin-top: 15px;\r\n    transition: background-color 0.2s;\r\n}\r\n\r\n.acb-retry-btn:hover {\r\n    background: #1976d2;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 768px) {\r\n    .acb-chat-container {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .acb-user-sidebar {\r\n        width: 100%;\r\n        height: 200px;\r\n    }\r\n\r\n    .acb-message-content {\r\n        max-width: 80%;\r\n    }\r\n\r\n    .acb-emoji-picker {\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n}\r\n\r\n/* Scrollbar Styling */\r\n.acb-users-list::-webkit-scrollbar,\r\n.acb-messages-container::-webkit-scrollbar {\r\n    width: 6px;\r\n}\r\n\r\n.acb-users-list::-webkit-scrollbar-track,\r\n.acb-messages-container::-webkit-scrollbar-track {\r\n    background: #f1f1f1;\r\n}\r\n\r\n.acb-users-list::-webkit-scrollbar-thumb,\r\n.acb-messages-container::-webkit-scrollbar-thumb {\r\n    background: #c1c1c1;\r\n    border-radius: 3px;\r\n}\r\n\r\n.acb-users-list::-webkit-scrollbar-thumb:hover,\r\n.acb-messages-container::-webkit-scrollbar-thumb:hover {\r\n    background: #a8a8a8;\r\n}\r\n\r\n// Auth login page end \r\n\r\n/* Search Container */\r\n.acb-search-container {\r\n    padding: 20px;\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: center;\r\n\r\n    input.acb-search-input {\r\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        -webkit-appearance: none;\r\n        -moz-appearance: none;\r\n        appearance: none;\r\n        background-color: white;\r\n        border: 1px solid #b9b9b9;\r\n        border-radius: 5px;\r\n        box-sizing: border-box;\r\n        color: #000000;\r\n        flex-grow: 1;\r\n        font-size: 12px;\r\n        font-weight: 400;\r\n        line-height: 1.3;\r\n        outline: 0;\r\n        padding: 8px 3px 10px 12px;\r\n        width: 100%;\r\n    }\r\n}\r\n\r\n.acb-search-input {\r\n    flex: 1;\r\n    padding: 14px 20px;\r\n    border: 2px solid transparent;\r\n    border-radius: 16px;\r\n    font-size: 14px;\r\n    outline: none;\r\n    background: white;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.acb-search-input:focus {\r\n    border-color: #4f46e5;\r\n    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.2);\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.acb-refresh-users-btn {\r\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\r\n    color: white;\r\n    border: none;\r\n    padding: 14px;\r\n    border-radius: 12px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);\r\n}\r\n\r\n.acb-refresh-users-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);\r\n}\r\n\r\n/* Users List */\r\n.acb-users-list {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: 0 12px;\r\n}\r\n\r\n.acb-user-item {\r\n    display: flex;\r\n    align-items: center;\r\n    padding: 16px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    border-radius: 16px;\r\n    margin-bottom: 8px;\r\n    position: relative;\r\n    background: white;\r\n    border: 2px solid transparent;\r\n}\r\n\r\n.acb-user-item:hover {\r\n    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\r\n    transform: translateX(4px);\r\n    border-color: rgba(79, 70, 229, 0.2);\r\n}\r\n\r\n.acb-user-item.active {\r\n    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\r\n    color: white;\r\n    border-color: #4f46e5;\r\n    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);\r\n}\r\n\r\n.acb-user-item.active .acb-user-details h5,\r\n.acb-user-item.active .acb-user-status,\r\n.acb-user-item.active .acb-last-message-time {\r\n    color: white;\r\n}\r\n\r\n.acb-user-item.has-new-message {\r\n    background: linear-gradient(135deg, #fef3c7 0%, #f6cdff 100%);\r\n    border-color: #ffffff;\r\n    animation: notification-glow 2s infinite;\r\n}\r\n\r\n@keyframes notification-glow {\r\n\r\n    0%,\r\n    100% {\r\n        box-shadow: 0 0 0 rgba(245, 158, 11, 0.4);\r\n    }\r\n\r\n    50% {\r\n        box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);\r\n    }\r\n}\r\n\r\n.acb-user-avatar-container {\r\n    position: relative;\r\n    margin-right: 16px;\r\n}\r\n\r\n.acb-online-indicator {\r\n    position: absolute;\r\n    bottom: 2px;\r\n    right: 2px;\r\n    width: 12px;\r\n    height: 12px;\r\n    border-radius: 50%;\r\n    border: 2px solid white;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.acb-online-indicator.online {\r\n    background: #10b981;\r\n    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);\r\n}\r\n\r\n.acb-online-indicator.offline {\r\n    background: #94a3b8;\r\n}\r\n\r\n.acb-new-message-indicator {\r\n    position: absolute;\r\n    top: -8px;\r\n    right: -8px;\r\n    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\r\n    color: white;\r\n    border-radius: 50%;\r\n    width: 24px;\r\n    height: 24px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 12px;\r\n    font-weight: bold;\r\n    border: 2px solid white;\r\n    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);\r\n    animation: bounce 1s infinite;\r\n}\r\n\r\n@keyframes bounce {\r\n\r\n    0%,\r\n    100% {\r\n        transform: scale(1);\r\n    }\r\n\r\n    50% {\r\n        transform: scale(1.1);\r\n    }\r\n}\r\n\r\n.acb-user-details h5 {\r\n    font-size: 15px;\r\n    font-weight: 600;\r\n    color: #1e293b;\r\n    margin-bottom: 4px;\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n.acb-user-status {\r\n    font-size: 13px;\r\n    color: #64748b;\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n.acb-last-message-time {\r\n    font-size: 12px;\r\n    color: #94a3b8;\r\n    margin-top: 4px;\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n/* Chat Area */\r\n.acb-chat-area {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);\r\n    position: relative;\r\n}\r\n\r\n.acb-chat-header {\r\n    padding: 24px 32px;\r\n    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);\r\n    color: white;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.acb-chat-header::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);\r\n    pointer-events: none;\r\n}\r\n\r\n.acb-chat-user-info {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.acb-chat-user-info h4 {\r\n    font-size: 18px;\r\n    font-weight: 600;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n/* Messages Container */\r\n.acb-messages-container {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: 24px 32px;\r\n    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);\r\n    position: relative;\r\n}\r\n\r\n.acb-messages-container::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background:\r\n        radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.05) 0%, transparent 50%),\r\n        radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);\r\n    pointer-events: none;\r\n}\r\n\r\n.acb-date-divider {\r\n    text-align: center;\r\n    margin: 32px 0;\r\n    color: #64748b;\r\n    font-size: 13px;\r\n    font-weight: 500;\r\n    position: relative;\r\n}\r\n\r\n.acb-date-divider::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    right: 0;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, #cbd5e1, transparent);\r\n}\r\n\r\n.acb-date-divider span {\r\n    background: #f8fafc;\r\n    padding: 0 16px;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.acb-message {\r\n    display: flex;\r\n    margin-bottom: 24px;\r\n    gap: 16px;\r\n    animation: fadeInUp 0.3s ease;\r\n}\r\n\r\n@keyframes fadeInUp {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(20px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n.acb-message.own {\r\n    flex-direction: row-reverse;\r\n}\r\n\r\n.acb-message-avatar {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n    flex-shrink: 0;\r\n    border: 2px solid rgba(255, 255, 255, 0.8);\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.acb-message-content {\r\n    max-width: 70%;\r\n}\r\n\r\n.acb-message.own .acb-message-content {\r\n    text-align: right;\r\n}\r\n\r\n.acb-message-header {\r\n    margin-bottom: 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n\r\n.acb-message.own .acb-message-header {\r\n    justify-content: flex-end;\r\n}\r\n\r\n.acb-message-sender {\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: #828282;\r\n}\r\n\r\n.acb-message-time {\r\n    font-size: 12px;\r\n    color: #94a3b8;\r\n}\r\n\r\n.acb-message-body {\r\n    background: white;\r\n    padding: 16px 20px;\r\n    border-radius: 20px;\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n    word-wrap: break-word;\r\n    position: relative;\r\n    border: 1px solid rgba(226, 232, 240, 0.8);\r\n    backdrop-filter: blur(10px);\r\n}\r\n\r\n.acb-message.own .acb-message-body {\r\n    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\r\n    color: white;\r\n    border-color: #4f46e5;\r\n}\r\n\r\n.acb-message-body::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);\r\n    border-radius: 20px;\r\n    pointer-events: none;\r\n}\r\n\r\n.acb-message-body p {\r\n    margin: 0;\r\n    line-height: 1.5;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.acb-message-image {\r\n    max-width: 280px;\r\n    max-height: 280px;\r\n    border-radius: 16px;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.acb-message-image:hover {\r\n    transform: scale(1.02);\r\n    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.acb-message-file {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    padding: 12px 16px;\r\n    background: #f1f5f9;\r\n    border-radius: 12px;\r\n    border: 1px solid #e2e8f0;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.acb-message-file:hover {\r\n    background: #e2e8f0;\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.acb-message-file a {\r\n    color: #4f46e5;\r\n    text-decoration: none;\r\n    font-weight: 500;\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n.acb-message-file a:hover {\r\n    color: #7c3aed;\r\n}\r\n\r\n/* Message Input */\r\n.acb-message-input {\r\n    padding: 16px 20px;\r\n    background: #ffffff;\r\n    border-top: 1px solid #e5e7eb;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    position: relative;\r\n    backdrop-filter: blur(10px);\r\n}\r\n\r\n.acb-input-actions {\r\n    display: flex;\r\n    gap: 8px;\r\n    align-items: center;\r\n}\r\n\r\n.acb-emoji-btn,\r\n.acb-attach-btn {\r\n    background: #f9fafb;\r\n    border: 1px solid #e5e7eb;\r\n    padding: 10px;\r\n    border-radius: 10px;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n    color: #6b7280;\r\n    transition: all 0.2s ease;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 40px;\r\n    height: 40px;\r\n}\r\n\r\n.acb-emoji-btn:hover,\r\n.acb-attach-btn:hover {\r\n    background: #f3f4f6;\r\n    border-color: #d1d5db;\r\n    color: #4b5563;\r\n}\r\n\r\n.acb-emoji-btn:active,\r\n.acb-attach-btn:active {\r\n    transform: scale(0.95);\r\n}\r\n\r\n.acb-emoji-picker {\r\n    position: absolute;\r\n    bottom: 100%;\r\n    left: 0;\r\n    margin-bottom: 8px;\r\n    background: #ffffff;\r\n    border: 1px solid #e5e7eb;\r\n    border-radius: 12px;\r\n    padding: 12px;\r\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n    display: grid;\r\n    grid-template-columns: repeat(6, 1fr);\r\n    gap: 4px;\r\n    z-index: 1000;\r\n    animation: slideUp 0.2s ease-out;\r\n}\r\n\r\n@keyframes slideUp {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n.acb-emoji-picker .acb-emoji-btn {\r\n    font-size: 20px;\r\n    padding: 8px;\r\n    background: transparent;\r\n    border: none;\r\n    border-radius: 6px;\r\n    width: 36px;\r\n    height: 36px;\r\n    transition: background-color 0.15s ease;\r\n}\r\n\r\n.acb-emoji-picker .acb-emoji-btn:hover {\r\n    background: #f3f4f6;\r\n}\r\n\r\n.acb-message-text {\r\n    flex: 1;\r\n    padding: 14px 18px;\r\n    border: 2px solid #f1f5f9;\r\n    border-radius: 24px;\r\n    font-size: 15px;\r\n    outline: none;\r\n    resize: none;\r\n    min-height: 20px;\r\n    max-height: 120px;\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    background: #f8fafc;\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n    line-height: 1.5;\r\n    color: #1e293b;\r\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\ninput.acb-message-text {\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n    appearance: none;\r\n    background-color: #ffff;\r\n    border: 1px solid #b9b9b9;\r\n    border-radius: 10px;\r\n    box-sizing: border-box;\r\n    color: #000000;\r\n    flex-grow: 1;\r\n    font-size: 14px;\r\n    font-weight: 400;\r\n    line-height: 1.3;\r\n    outline: 0;\r\n    padding: 11px 5px 11px 12px;\r\n    width: 100%;\r\n}\r\n\r\n.acb-message-text:focus {\r\n    border-color: #3b82f6;\r\n    background: #ffffff;\r\n    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08), inset 0 1px 3px rgba(0, 0, 0, 0.05);\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.acb-message-text:hover:not(:focus) {\r\n    border-color: #e2e8f0;\r\n    background: #ffffff;\r\n}\r\n\r\n.acb-message-text::placeholder {\r\n    color: #64748b;\r\n    font-weight: 400;\r\n}\r\n\r\n.acb-send-btn {\r\n    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\r\n    color: white;\r\n    border: none;\r\n    padding: 0;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    transition: all 0.2s ease;\r\n    width: 40px;\r\n    height: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);\r\n    font-size: 14px;\r\n}\r\n\r\n.acb-send-btn:hover:not(:disabled) {\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n.acb-send-btn:active:not(:disabled) {\r\n    transform: translateY(0);\r\n}\r\n\r\n.acb-send-btn:disabled {\r\n    background: #d1d5db;\r\n    cursor: not-allowed;\r\n    transform: none;\r\n    box-shadow: none;\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 768px) {\r\n    .acb-message-input {\r\n        padding: 16px 20px;\r\n        gap: 8px;\r\n    }\r\n\r\n    .acb-emoji-btn,\r\n    .acb-attach-btn,\r\n    .acb-send-btn {\r\n        width: 36px;\r\n        height: 36px;\r\n        font-size: 14px;\r\n    }\r\n\r\n    .acb-message-text {\r\n        font-size: 16px;\r\n        /* Prevent zoom on iOS */\r\n    }\r\n}\r\n\r\n\r\n/* No Chat Selected */\r\n.acb-no-chat-selected {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);\r\n    position: relative;\r\n}\r\n\r\n.acb-no-chat-selected::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background:\r\n        radial-gradient(circle at 30% 30%, rgba(79, 70, 229, 0.05) 0%, transparent 50%),\r\n        radial-gradient(circle at 70% 70%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);\r\n    pointer-events: none;\r\n}\r\n\r\n.acb-welcome-message {\r\n    text-align: center;\r\n    color: #64748b;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.acb-welcome-message i {\r\n    font-size: 64px;\r\n    color: #cbd5e1;\r\n    margin-bottom: 24px;\r\n    animation: float 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes float {\r\n\r\n    0%,\r\n    100% {\r\n        transform: translateY(0px);\r\n    }\r\n\r\n    50% {\r\n        transform: translateY(-10px);\r\n    }\r\n}\r\n\r\n.acb-welcome-message h3 {\r\n    font-size: 28px;\r\n    margin-bottom: 12px;\r\n    color: #1e293b;\r\n    font-weight: 600;\r\n}\r\n\r\n.acb-welcome-message p {\r\n    font-size: 16px;\r\n    color: #64748b;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 1024px) {\r\n    .acb-user-sidebar {\r\n        width: 300px;\r\n    }\r\n\r\n    .acb-message-content {\r\n        max-width: 80%;\r\n    }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .acb-chat-container {\r\n        margin: 0;\r\n        border-radius: 0;\r\n        // height: 100vh;\r\n    }\r\n\r\n    .acb-user-sidebar {\r\n        width: 100%;\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        z-index: 1000;\r\n        transform: translateX(-100%);\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .acb-user-sidebar.open {\r\n        transform: translateX(0);\r\n    }\r\n\r\n    .acb-chat-area {\r\n        width: 100%;\r\n    }\r\n\r\n    .acb-chat-header {\r\n        padding: 16px 20px;\r\n    }\r\n\r\n    .acb-messages-container {\r\n        padding: 16px 20px;\r\n    }\r\n\r\n    .acb-message-input {\r\n        padding: 16px 20px;\r\n    }\r\n\r\n    .acb-message-content {\r\n        max-width: 85%;\r\n    }\r\n\r\n    .acb-emoji-picker {\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .acb-user-header {\r\n        padding: 16px;\r\n    }\r\n\r\n    .acb-search-container {\r\n        padding: 16px;\r\n    }\r\n\r\n    .acb-message-content {\r\n        max-width: 90%;\r\n    }\r\n\r\n    .acb-message-image {\r\n        max-width: 200px;\r\n        max-height: 200px;\r\n    }\r\n}\r\n\r\n/* Scrollbar Styling */\r\n.acb-users-list::-webkit-scrollbar,\r\n.acb-messages-container::-webkit-scrollbar {\r\n    width: 8px;\r\n}\r\n\r\n.acb-users-list::-webkit-scrollbar-track,\r\n.acb-messages-container::-webkit-scrollbar-track {\r\n    background: rgba(248, 250, 252, 0.8);\r\n    border-radius: 10px;\r\n}\r\n\r\n.acb-users-list::-webkit-scrollbar-thumb,\r\n.acb-messages-container::-webkit-scrollbar-thumb {\r\n    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);\r\n    border-radius: 10px;\r\n    border: 2px solid rgba(248, 250, 252, 0.8);\r\n}\r\n\r\n.acb-users-list::-webkit-scrollbar-thumb:hover,\r\n.acb-messages-container::-webkit-scrollbar-thumb:hover {\r\n    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);\r\n}\r\n\r\n/* Mobile Menu Toggle */\r\n.acb-mobile-menu-toggle {\r\n    display: none;\r\n    position: fixed;\r\n    top: 20px;\r\n    left: 20px;\r\n    z-index: 1001;\r\n    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\r\n    color: white;\r\n    border: none;\r\n    padding: 12px;\r\n    border-radius: 12px;\r\n    cursor: pointer;\r\n    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.acb-mobile-menu-toggle:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .acb-mobile-menu-toggle {\r\n        display: block;\r\n    }\r\n}\r\n\r\n/* Loading Animation */\r\n.acb-typing-indicator {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n    padding: 16px 20px;\r\n    background: white;\r\n    border-radius: 20px;\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n    margin-bottom: 24px;\r\n}\r\n\r\n.acb-typing-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    background: #94a3b8;\r\n    animation: typing 1.4s infinite;\r\n}\r\n\r\n.acb-typing-dot:nth-child(2) {\r\n    animation-delay: 0.2s;\r\n}\r\n\r\n.acb-typing-dot:nth-child(3) {\r\n    animation-delay: 0.4s;\r\n}\r\n\r\n@keyframes typing {\r\n\r\n    0%,\r\n    60%,\r\n    100% {\r\n        transform: translateY(0);\r\n    }\r\n\r\n    30% {\r\n        transform: translateY(-10px);\r\n    }\r\n}\r\n\r\n/*  END of Chat Box Settings Styles */\r\n\r\n\r\n\r\n/* Settings Page Styles */\r\n.settings-container {\r\n    max-width: 1024px;\r\n    // margin: 0 auto;\r\n    padding: 24px;\r\n    background-color: #ffffff;\r\n}\r\n\r\n\r\n.setup-guide {\r\n    margin-bottom: 32px;\r\n    background-color: #f9fafb;\r\n    border-radius: 8px;\r\n    padding: 24px;\r\n    text-align: left;\r\n\r\n    .setup-guide-title {\r\n        font-size: 24px;\r\n        font-weight: 600;\r\n        color: #1f2937;\r\n        margin-bottom: 16px;\r\n    }\r\n\r\n    .setup-step {\r\n        margin-bottom: 24px;\r\n\r\n        .step-title {\r\n            font-size: 18px;\r\n            font-weight: 600;\r\n            color: #374151;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .step-list {\r\n            list-style: decimal;\r\n            list-style-position: inside;\r\n            color: #6b7280;\r\n\r\n            li {\r\n                margin-bottom: 8px;\r\n                line-height: 1.5;\r\n            }\r\n        }\r\n\r\n        .sub-step-list {\r\n            list-style: disc;\r\n            list-style-position: inside;\r\n            margin-left: 16px;\r\n            margin-top: 8px;\r\n\r\n            li {\r\n                margin-bottom: 4px;\r\n            }\r\n        }\r\n\r\n        .troubleshooting-list {\r\n            list-style: disc;\r\n            list-style-position: inside;\r\n            color: #6b7280;\r\n\r\n            li {\r\n                margin-bottom: 8px;\r\n                line-height: 1.5;\r\n\r\n                strong {\r\n                    color: #1f2937;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .code-block {\r\n        background-color: #1f2937;\r\n        color: #10b981;\r\n        padding: 16px;\r\n        border-radius: 8px;\r\n        overflow-x: auto;\r\n        font-size: 14px;\r\n        margin-top: 8px;\r\n        white-space: pre-wrap;\r\n        font-family: 'Courier New', monospace;\r\n    }\r\n\r\n    .external-link {\r\n        color: #2563eb;\r\n        text-decoration: none;\r\n\r\n        &:hover {\r\n            text-decoration: underline;\r\n        }\r\n    }\r\n}\r\n\r\n.message-alert {\r\n    margin-bottom: 24px;\r\n    padding: 16px;\r\n    border-radius: 8px;\r\n\r\n    &.message-success {\r\n        background-color: #d1fae5;\r\n        color: #047857;\r\n        border: 1px solid #a7f3d0;\r\n    }\r\n\r\n    &.message-error {\r\n        background-color: #fee2e2;\r\n        color: #dc2626;\r\n        border: 1px solid #fca5a5;\r\n    }\r\n}\r\n\r\n.config-form {\r\n    background-color: #ffffff;\r\n    border: 1px solid #e5e7eb;\r\n    border-radius: 8px;\r\n    padding: 24px;\r\n    margin-bottom: 32px;\r\n    text-align: left;\r\n\r\n    .form-fields {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 24px;\r\n\r\n        .field-group {\r\n            display: flex;\r\n            flex-direction: column;\r\n\r\n            .field-label {\r\n                display: block;\r\n                font-size: 14px;\r\n                font-weight: 500;\r\n                color: #374151;\r\n                margin-bottom: 8px;\r\n            }\r\n\r\n            .field-input {\r\n                width: 100%;\r\n                padding: 8px 12px;\r\n                border: 1px solid #d1d5db;\r\n                border-radius: 6px;\r\n                font-size: 14px;\r\n                transition: all 0.2s ease;\r\n\r\n                &:focus {\r\n                    outline: none;\r\n                    border-color: #3b82f6;\r\n                    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);\r\n                }\r\n\r\n                &::placeholder {\r\n                    color: #9ca3af;\r\n                }\r\n            }\r\n\r\n            .field-help {\r\n                color: #6b7280;\r\n                font-size: 12px;\r\n                margin-top: 4px;\r\n            }\r\n        }\r\n\r\n        .button-group {\r\n            display: flex;\r\n            gap: 16px;\r\n\r\n            .btn {\r\n                padding: 8px 16px;\r\n                border: none;\r\n                border-radius: 6px;\r\n                cursor: pointer;\r\n                font-size: 14px;\r\n                font-weight: 500;\r\n                transition: all 0.2s ease;\r\n\r\n                &:disabled {\r\n                    opacity: 0.5;\r\n                    cursor: not-allowed;\r\n                }\r\n\r\n                &.btn-primary {\r\n                    background-color: #2563eb;\r\n                    color: #ffffff;\r\n\r\n                    &:hover:not(:disabled) {\r\n                        background-color: #1d4ed8;\r\n                    }\r\n                }\r\n\r\n                &.btn-secondary {\r\n                    background-color: #6b7280;\r\n                    color: #ffffff;\r\n\r\n                    &:hover:not(:disabled) {\r\n                        background-color: #4b5563;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n.info-box {\r\n    background-color: #eff6ff;\r\n    border: 1px solid #bfdbfe;\r\n    border-radius: 8px;\r\n    padding: 24px;\r\n    text-align: left;\r\n\r\n    .info-title {\r\n        font-size: 18px;\r\n        font-weight: 600;\r\n        color: #1e40af;\r\n        margin-bottom: 16px;\r\n    }\r\n\r\n    .info-list {\r\n        list-style: decimal;\r\n        list-style-position: inside;\r\n        color: #1e40af;\r\n\r\n        li {\r\n            margin-bottom: 8px;\r\n            line-height: 1.5;\r\n        }\r\n    }\r\n\r\n    .external-link {\r\n        color: #2563eb;\r\n        text-decoration: none;\r\n\r\n        &:hover {\r\n            text-decoration: underline;\r\n        }\r\n    }\r\n\r\n    .note-box {\r\n        margin-top: 16px;\r\n        padding: 16px;\r\n        background-color: #fef3c7;\r\n        border: 1px solid #fcd34d;\r\n        border-radius: 6px;\r\n\r\n        .note-title {\r\n            color: #92400e;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .note-text {\r\n            color: #92400e;\r\n        }\r\n\r\n        .note-list {\r\n            list-style: disc;\r\n            list-style-position: inside;\r\n            margin-top: 8px;\r\n            color: #92400e;\r\n\r\n            li {\r\n                margin-bottom: 4px;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n// Responsive Design\r\n@media (max-width: 768px) {\r\n    .settings-container {\r\n        padding: 16px;\r\n    }\r\n\r\n    .setup-guide {\r\n        padding: 16px;\r\n    }\r\n\r\n    .config-form {\r\n        padding: 16px;\r\n    }\r\n\r\n    .info-box {\r\n        padding: 16px;\r\n    }\r\n\r\n    .button-group {\r\n        flex-direction: column;\r\n\r\n        .btn {\r\n            width: 100%;\r\n        }\r\n    }\r\n}\r\n\r\n/*  END of Chat Box Settings Styles */\r\n\r\n/* Loading Spinner CSS - Add this to your stylesheet */\r\n#acb_admin_chat_box_users {\r\n    .loading-container {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100vw;\r\n        height: 100vh;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n        z-index: 9999;\r\n        color: #4a5568;\r\n    }\r\n\r\n    .loading-container .spinner {\r\n        width: 60px;\r\n        height: 60px;\r\n        border: 6px solid #e2e8f0;\r\n        border-top: 6px solid transparent;\r\n        border-radius: 50%;\r\n        animation: spin 1s linear infinite;\r\n        margin-bottom: 24px;\r\n        position: relative;\r\n    }\r\n\r\n    .loading-container .spinner::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -6px;\r\n        left: -6px;\r\n        width: 60px;\r\n        height: 60px;\r\n        border: 6px solid transparent;\r\n        border-top: 6px solid #667eea;\r\n        border-radius: 50%;\r\n        animation: spin 1.5s linear infinite reverse;\r\n    }\r\n\r\n    .loading-container .spinner::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 6px;\r\n        left: 6px;\r\n        width: 36px;\r\n        height: 36px;\r\n        border: 4px solid transparent;\r\n        border-top: 4px solid #764ba2;\r\n        border-radius: 50%;\r\n        animation: spin 0.8s linear infinite;\r\n    }\r\n\r\n    .loading-container p {\r\n        font-size: 1.2rem;\r\n        margin: 0;\r\n        font-weight: 500;\r\n        text-align: center;\r\n        animation: pulse 2s ease-in-out infinite;\r\n        color: #667eea;\r\n    }\r\n\r\n\r\n    /* Animation keyframes */\r\n    @keyframes spin {\r\n        0% {\r\n            transform: rotate(0deg);\r\n        }\r\n\r\n        100% {\r\n            transform: rotate(360deg);\r\n        }\r\n    }\r\n\r\n    @keyframes pulse {\r\n        0% {\r\n            opacity: 1;\r\n        }\r\n\r\n        50% {\r\n            opacity: 0.5;\r\n        }\r\n\r\n        100% {\r\n            opacity: 1;\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\r\n// END \r\n\r\n/*  Users Management Styles  */\r\n// Users Management Component SCSS\r\n.users-management-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 20px;\r\n    background: #f8fafc;\r\n    min-height: 100vh;\r\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n\r\n    .page-header {\r\n        text-align: center;\r\n        margin-bottom: 40px;\r\n        padding: 30px 0;\r\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        border-radius: 16px;\r\n        color: white;\r\n        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);\r\n\r\n        h1 {\r\n            font-size: 2.5rem;\r\n            font-weight: 700;\r\n            margin: 0 0 10px 0;\r\n            color: aliceblue;\r\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        p {\r\n            font-size: 1.1rem;\r\n            margin: 0;\r\n            opacity: 0.9;\r\n            font-weight: 300;\r\n        }\r\n    }\r\n\r\n    .message-alert {\r\n        padding: 16px 20px;\r\n        border-radius: 12px;\r\n        margin-bottom: 24px;\r\n        border: 1px solid;\r\n        animation: slideIn 0.3s ease-out;\r\n\r\n        &.success {\r\n            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);\r\n            color: #155724;\r\n            border-color: #c3e6cb;\r\n        }\r\n\r\n        &.error {\r\n            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);\r\n            color: #721c24;\r\n            border-color: #f5c6cb;\r\n        }\r\n\r\n        .message-content {\r\n            display: flex;\r\n            align-items: center;\r\n            font-weight: 500;\r\n        }\r\n    }\r\n\r\n    /* .loading-container {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100vw;\r\n        height: 100vh;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n        z-index: 9999;\r\n        color: #4a5568;\r\n\r\n        .spinner {\r\n            width: 60px;\r\n            height: 60px;\r\n            border: 6px solid #e2e8f0;\r\n            border-top: 6px solid transparent;\r\n            border-radius: 50%;\r\n            animation: spin 1s linear infinite;\r\n            margin-bottom: 24px;\r\n            position: relative;\r\n\r\n            &::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: -6px;\r\n                left: -6px;\r\n                width: 60px;\r\n                height: 60px;\r\n                border: 6px solid transparent;\r\n                border-top: 6px solid #667eea;\r\n                border-radius: 50%;\r\n                animation: spin 1.5s linear infinite reverse;\r\n            }\r\n\r\n            &::after {\r\n                content: '';\r\n                position: absolute;\r\n                top: 6px;\r\n                left: 6px;\r\n                width: 36px;\r\n                height: 36px;\r\n                border: 4px solid transparent;\r\n                border-top: 4px solid #764ba2;\r\n                border-radius: 50%;\r\n                animation: spin 0.8s linear infinite;\r\n            }\r\n        }\r\n\r\n        p {\r\n            font-size: 1.2rem;\r\n            margin: 0;\r\n            font-weight: 500;\r\n            text-align: center;\r\n            animation: pulse 2s ease-in-out infinite;\r\n            color: #667eea;\r\n        }\r\n    } */\r\n\r\n    // Tabs Navigation\r\n    .tabs-container {\r\n        background: white;\r\n        border-radius: 16px;\r\n        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);\r\n        overflow: hidden;\r\n\r\n        .tabs-nav {\r\n            display: flex;\r\n            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n            border-bottom: 1px solid #e2e8f0;\r\n            padding: 8px;\r\n            gap: 4px;\r\n\r\n            .tab-button {\r\n                flex: 1;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                gap: 8px;\r\n                padding: 10px 15px;\r\n                background: transparent;\r\n                border: none;\r\n                border-radius: 12px;\r\n                cursor: pointer;\r\n                transition: all 0.3s ease;\r\n                font-weight: 500;\r\n                color: #64748b;\r\n                position: relative;\r\n                overflow: hidden;\r\n\r\n                &::before {\r\n                    content: '';\r\n                    position: absolute;\r\n                    top: 0;\r\n                    left: -100%;\r\n                    width: 100%;\r\n                    height: 100%;\r\n                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n                    transition: left 0.5s ease;\r\n                }\r\n\r\n                &:hover {\r\n                    background: rgba(255, 255, 255, 0.7);\r\n                    color: #475569;\r\n                    transform: translateY(-2px);\r\n                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n\r\n                    &::before {\r\n                        left: 100%;\r\n                    }\r\n                }\r\n\r\n                &.active {\r\n                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                    color: white;\r\n                    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);\r\n                    transform: translateY(-1px);\r\n\r\n                    .tab-icon {\r\n                        transform: scale(1.1);\r\n                    }\r\n                }\r\n\r\n                .tab-icon {\r\n                    font-size: 1.2rem;\r\n                    transition: transform 0.3s ease;\r\n                }\r\n\r\n                .tab-label {\r\n                    font-size: 0.95rem;\r\n                    white-space: nowrap;\r\n                }\r\n            }\r\n        }\r\n\r\n        .tabs-content {\r\n            padding: 32px;\r\n            min-height: 500px;\r\n        }\r\n    }\r\n\r\n    // Tab Content Headers\r\n    .tab-header {\r\n        margin-bottom: 32px;\r\n        text-align: center;\r\n\r\n        h2 {\r\n            font-size: 1.8rem;\r\n            font-weight: 600;\r\n            color: #1e293b;\r\n            margin: 0 0 8px 0;\r\n        }\r\n\r\n        p {\r\n            color: #64748b;\r\n            font-size: 1rem;\r\n            margin: 0 0 24px 0;\r\n            line-height: 1.5;\r\n        }\r\n    }\r\n\r\n    // Users Tab Styles\r\n    .users-stats {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n        gap: 20px;\r\n        margin-bottom: 32px;\r\n\r\n        .stat-card {\r\n            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);\r\n            padding: 24px;\r\n            border-radius: 16px;\r\n            text-align: center;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            border: 1px solid #e2e8f0;\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n\r\n            &:hover {\r\n                transform: translateY(-4px);\r\n                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n            }\r\n\r\n            .stat-number {\r\n                display: block;\r\n                font-size: 2.5rem;\r\n                font-weight: 700;\r\n                color: #667eea;\r\n                margin-bottom: 8px;\r\n            }\r\n\r\n            .stat-label {\r\n                font-size: 0.9rem;\r\n                color: #64748b;\r\n                font-weight: 500;\r\n            }\r\n\r\n            &.firebase {\r\n                .stat-icon {\r\n                    font-size: 2rem;\r\n                    margin-bottom: 12px;\r\n                }\r\n            }\r\n\r\n            &.wordpress {\r\n                .stat-icon {\r\n                    font-size: 2rem;\r\n                    margin-bottom: 12px;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .users-table-container {\r\n        background: white;\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n        border: 1px solid #e2e8f0;\r\n\r\n        .users-table {\r\n            width: 100%;\r\n            border-collapse: collapse;\r\n            font-size: 0.95rem;\r\n\r\n            thead {\r\n                background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n\r\n                th {\r\n                    padding: 18px 16px;\r\n                    text-align: left;\r\n                    font-weight: 600;\r\n                    color: #374151;\r\n                    border-bottom: 2px solid #e2e8f0;\r\n                }\r\n            }\r\n\r\n            tbody {\r\n                tr {\r\n                    transition: all 0.3s ease;\r\n                    border-bottom: 1px solid #f1f5f9;\r\n\r\n                    &:hover {\r\n                        background: linear-gradient(135deg, #fefeff 0%, #f8fafc 100%);\r\n                        transform: scale(1.01);\r\n                    }\r\n\r\n                    &:last-child {\r\n                        border-bottom: none;\r\n                    }\r\n                }\r\n\r\n                td {\r\n                    padding: 16px;\r\n                    vertical-align: middle;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .user-info {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n\r\n        .user-avatar {\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 50%;\r\n            object-fit: cover;\r\n            border: 2px solid #e2e8f0;\r\n        }\r\n\r\n        .user-name {\r\n            font-weight: 500;\r\n            color: #1e293b;\r\n        }\r\n    }\r\n\r\n    .user-contact {\r\n        .user-email {\r\n            color: #64748b;\r\n            font-size: 0.9rem;\r\n        }\r\n    }\r\n\r\n    .status-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        padding: 6px 12px;\r\n        border-radius: 20px;\r\n        font-size: 0.85rem;\r\n        font-weight: 500;\r\n\r\n        .status-dot {\r\n            width: 8px;\r\n            height: 8px;\r\n            border-radius: 50%;\r\n        }\r\n\r\n        &.online {\r\n            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);\r\n            color: #155724;\r\n\r\n            .status-dot {\r\n                background: #28a745;\r\n                animation: pulse 2s infinite;\r\n            }\r\n        }\r\n\r\n        &.offline {\r\n            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);\r\n            color: #721c24;\r\n\r\n            .status-dot {\r\n                background: #dc3545;\r\n            }\r\n        }\r\n    }\r\n\r\n    .role-badge {\r\n        display: inline-block;\r\n        padding: 6px 12px;\r\n        border-radius: 20px;\r\n        font-size: 0.85rem;\r\n        font-weight: 500;\r\n\r\n        &.admin {\r\n            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);\r\n            color: #856404;\r\n        }\r\n\r\n        &.regular {\r\n            background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);\r\n            color: #0c5460;\r\n        }\r\n    }\r\n\r\n    .last-seen {\r\n        color: #64748b;\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    .action-btn {\r\n        padding: 8px 16px;\r\n        border: none;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-size: 0.85rem;\r\n        font-weight: 500;\r\n        transition: all 0.3s ease;\r\n\r\n        &.make-admin {\r\n            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);\r\n            color: white;\r\n\r\n            &:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);\r\n            }\r\n        }\r\n\r\n        &.remove-admin {\r\n            background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);\r\n            color: white;\r\n\r\n            &:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);\r\n            }\r\n        }\r\n    }\r\n\r\n    .empty-state {\r\n        text-align: center;\r\n        padding: 80px 20px;\r\n        color: #64748b;\r\n\r\n        .empty-icon {\r\n            font-size: 4rem;\r\n            margin-bottom: 20px;\r\n            opacity: 0.6;\r\n        }\r\n\r\n        h3 {\r\n            font-size: 1.5rem;\r\n            margin: 0 0 12px 0;\r\n            color: #374151;\r\n        }\r\n\r\n        p {\r\n            margin: 0;\r\n            font-size: 1rem;\r\n        }\r\n    }\r\n\r\n    .error-message {\r\n        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);\r\n        color: #721c24;\r\n        padding: 20px;\r\n        border-radius: 12px;\r\n        border: 1px solid #f5c6cb;\r\n        margin-bottom: 24px;\r\n    }\r\n\r\n    // Settings Cards\r\n    .settings-card {\r\n        background: white;\r\n        border-radius: 16px;\r\n        padding: 32px;\r\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n        border: 1px solid #e2e8f0;\r\n        margin-bottom: 24px;\r\n\r\n        h3 {\r\n            font-size: 1.3rem;\r\n            font-weight: 600;\r\n            color: #1e293b;\r\n            margin: 0 0 24px 0;\r\n        }\r\n    }\r\n\r\n    .settings-grid {\r\n        display: grid;\r\n        // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n        // gap: 24px;\r\n        margin-bottom: 32px;\r\n    }\r\n\r\n    .setting-item {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: flex-start;\r\n        padding: 20px 0;\r\n        border-bottom: 1px solid #f1f5f9;\r\n\r\n        &:last-child {\r\n            border-bottom: none;\r\n            padding-bottom: 0;\r\n        }\r\n\r\n        .setting-info {\r\n            flex: 1;\r\n            margin-right: 20px;\r\n\r\n            label {\r\n                display: block;\r\n                font-weight: 500;\r\n                color: #374151;\r\n                margin-bottom: 4px;\r\n            }\r\n\r\n            p {\r\n                color: #64748b;\r\n                font-size: 0.9rem;\r\n                margin: 0;\r\n                line-height: 1.4;\r\n            }\r\n        }\r\n\r\n        .setting-control {\r\n            // flex-shrink: 0;\r\n            flex: 1;\r\n            text-align: right;\r\n            margin: auto;\r\n        }\r\n    }\r\n\r\n    // Form Controls\r\n    .toggle-switch {\r\n        position: relative;\r\n        display: inline-block;\r\n        width: 60px;\r\n        height: 34px;\r\n\r\n        input {\r\n            opacity: 0;\r\n            width: 0;\r\n            height: 0;\r\n        }\r\n\r\n        .toggle-slider {\r\n            position: absolute;\r\n            cursor: pointer;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: #ccc;\r\n            transition: 0.4s;\r\n            border-radius: 34px;\r\n\r\n            &::before {\r\n                position: absolute;\r\n                content: \"\";\r\n                height: 26px;\r\n                width: 26px;\r\n                left: 4px;\r\n                bottom: 4px;\r\n                background: white;\r\n                transition: 0.4s;\r\n                border-radius: 50%;\r\n                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\r\n            }\r\n        }\r\n\r\n        input:checked+.toggle-slider {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        input:checked+.toggle-slider::before {\r\n            transform: translateX(26px);\r\n        }\r\n    }\r\n\r\n    .form-select,\r\n    .form-input,\r\n    .form-textarea {\r\n        width: 100%;\r\n        padding: 12px 16px;\r\n        border: 2px solid #e2e8f0;\r\n        border-radius: 8px;\r\n        font-size: 0.95rem;\r\n        transition: all 0.3s ease;\r\n        background: white;\r\n\r\n        &:focus {\r\n            outline: none;\r\n            border-color: #667eea;\r\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\r\n        }\r\n    }\r\n\r\n    .form-textarea {\r\n        resize: vertical;\r\n        min-height: 80px;\r\n    }\r\n\r\n    .color-picker {\r\n        display: flex;\r\n        gap: 12px;\r\n        align-items: center;\r\n\r\n        .color-input {\r\n            width: 50px;\r\n            height: 40px;\r\n            border: 2px solid #e2e8f0;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            background: none;\r\n\r\n            &::-webkit-color-swatch-wrapper {\r\n                padding: 0;\r\n            }\r\n\r\n            &::-webkit-color-swatch {\r\n                border: none;\r\n                border-radius: 4px;\r\n            }\r\n        }\r\n\r\n        .color-text {\r\n            flex: 1;\r\n            padding: 10px 12px;\r\n            border: 2px solid #e2e8f0;\r\n            border-radius: 8px;\r\n            font-family: 'Courier New', monospace;\r\n            font-size: 0.9rem;\r\n        }\r\n    }\r\n\r\n    // Buttons\r\n    .btn {\r\n        padding: 12px 24px;\r\n        border: none;\r\n        border-radius: 8px;\r\n        font-size: 0.95rem;\r\n        font-weight: 500;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        position: relative;\r\n        overflow: hidden;\r\n\r\n        &::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n            transition: left 0.5s ease;\r\n        }\r\n\r\n        &:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        &.btn-primary {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n            color: white;\r\n\r\n            &:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);\r\n            }\r\n\r\n            &:disabled {\r\n                opacity: 0.6;\r\n                cursor: not-allowed;\r\n                transform: none;\r\n            }\r\n        }\r\n\r\n        &.btn-large {\r\n            padding: 16px 32px;\r\n            font-size: 1.1rem;\r\n        }\r\n    }\r\n\r\n    .setting-actions {\r\n        display: flex;\r\n        justify-content: flex-end;\r\n        padding-top: 24px;\r\n        border-top: 1px solid #e2e8f0;\r\n    }\r\n\r\n    // Shortcode Section\r\n    .shortcode-section {\r\n        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n        padding: 32px;\r\n        border-radius: 16px;\r\n        margin-bottom: 32px;\r\n        border: 1px solid #e2e8f0;\r\n\r\n        h3 {\r\n            font-size: 1.3rem;\r\n            font-weight: 600;\r\n            color: #1e293b;\r\n            margin: 0 0 12px 0;\r\n        }\r\n\r\n        p {\r\n            color: #64748b;\r\n            margin: 0 0 24px 0;\r\n        }\r\n\r\n        .shortcode-examples {\r\n            display: grid;\r\n            gap: 16px;\r\n        }\r\n\r\n        .shortcode-example {\r\n            background: white;\r\n            padding: 16px 20px;\r\n            border-radius: 8px;\r\n            border-left: 4px solid #667eea;\r\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n\r\n            strong {\r\n                color: #374151;\r\n                display: block;\r\n                margin-bottom: 8px;\r\n            }\r\n\r\n            code {\r\n                background: #f1f5f9;\r\n                padding: 8px 12px;\r\n                border-radius: 6px;\r\n                font-family: 'Courier New', monospace;\r\n                font-size: 0.9rem;\r\n                color: #667eea;\r\n                border: 1px solid #e2e8f0;\r\n            }\r\n        }\r\n    }\r\n\r\n    // Sync Tab Styles\r\n    .sync-stats {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n        gap: 24px;\r\n        margin-bottom: 32px;\r\n\r\n        .stat-card {\r\n            background: white;\r\n            padding: 32px;\r\n            border-radius: 16px;\r\n            text-align: center;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            border: 1px solid #e2e8f0;\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n\r\n            &:hover {\r\n                transform: translateY(-4px);\r\n                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n            }\r\n\r\n            .stat-icon {\r\n                font-size: 25px;\r\n                margin-bottom: 16px;\r\n            }\r\n\r\n            .stat-info {\r\n                .stat-number {\r\n                    display: block;\r\n                    font-size: 2.5rem;\r\n                    font-weight: 700;\r\n                    color: #667eea;\r\n                    margin-bottom: 8px;\r\n                }\r\n\r\n                .stat-label {\r\n                    font-size: 1rem;\r\n                    color: #64748b;\r\n                    font-weight: 500;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .sync-info {\r\n        margin-bottom: 32px;\r\n\r\n        .info-card {\r\n            background: white;\r\n            padding: 32px;\r\n            border-radius: 16px;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            border: 1px solid #e2e8f0;\r\n\r\n            h3 {\r\n                font-size: 1.3rem;\r\n                font-weight: 600;\r\n                color: #1e293b;\r\n                margin: 0 0 16px 0;\r\n            }\r\n\r\n            p {\r\n                color: #64748b;\r\n                margin: 0 0 20px 0;\r\n                line-height: 1.6;\r\n            }\r\n\r\n            ul {\r\n                margin: 0;\r\n                padding-left: 20px;\r\n                color: #64748b;\r\n\r\n                li {\r\n                    margin-bottom: 8px;\r\n                    line-height: 1.5;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .sync-actions {\r\n        display: flex;\r\n        justify-content: center;\r\n    }\r\n\r\n    // Animations\r\n    @keyframes slideIn {\r\n        from {\r\n            opacity: 0;\r\n            transform: translateY(-20px);\r\n        }\r\n\r\n        to {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n\r\n    @keyframes spin {\r\n        0% {\r\n            transform: rotate(0deg);\r\n        }\r\n\r\n        100% {\r\n            transform: rotate(360deg);\r\n        }\r\n    }\r\n\r\n    @keyframes pulse {\r\n        0% {\r\n            transform: scale(1);\r\n            opacity: 1;\r\n        }\r\n\r\n        50% {\r\n            transform: scale(1.1);\r\n            opacity: 0.7;\r\n        }\r\n\r\n        100% {\r\n            transform: scale(1);\r\n            opacity: 1;\r\n        }\r\n    }\r\n\r\n    // Responsive Design\r\n    @media (max-width: 1024px) {\r\n        .tabs-nav {\r\n            .tab-button {\r\n                padding: 12px 16px;\r\n\r\n                .tab-label {\r\n                    font-size: 0.9rem;\r\n                }\r\n            }\r\n        }\r\n\r\n        .settings-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        padding: 16px;\r\n\r\n        .page-header {\r\n            padding: 20px;\r\n            margin-bottom: 24px;\r\n\r\n            h1 {\r\n                font-size: 2rem;\r\n            }\r\n        }\r\n\r\n        .tabs-nav {\r\n            flex-wrap: wrap;\r\n            gap: 8px;\r\n\r\n            .tab-button {\r\n                flex: 1 1 45%;\r\n                min-width: 140px;\r\n            }\r\n        }\r\n\r\n        .tabs-content {\r\n            padding: 20px;\r\n        }\r\n\r\n        .users-stats {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .users-table-container {\r\n            overflow-x: auto;\r\n        }\r\n\r\n        .setting-item {\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n\r\n            .setting-info {\r\n                margin-right: 0;\r\n                margin-bottom: 16px;\r\n            }\r\n        }\r\n\r\n        .sync-stats {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .tabs-nav {\r\n            .tab-button {\r\n                flex: 1 1 100%;\r\n                margin-bottom: 4px;\r\n            }\r\n        }\r\n\r\n        .page-header {\r\n            h1 {\r\n                font-size: 1.8rem;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n// End "],"names":[],"sourceRoot":""}