@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');
 
:root {
  --theme-color: #355973;
  --theme-heading-text:#ffffff;
  --sidebar-selected-color: #ffffff;
  --chart-primary-color: #355973;
  --chart-secondary-color: #355973;
  --chart-accent-color: #355973;
  --global-color-primary: #355973;
  --global-color-secondary: #355973;
  --delete-button-color: #ffffff;
  --delete-button-hover-color: #ffffff;
  --delete-button-text-color: #355973;
}
 
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
button {
  /* font-family: "DM Sans", sans-serif; */
  font-family: "Arimo", sans-serif !important;
}
 
body {
  background: var(--theme-color) !important;
  color: var(--chakra-colors-black) !important;
}
 
option {
  color: black;
}

.chakra-button__icon {
  margin: 0 !important;
}
 
button.primary-button.chakra-button,
button.primary-button.chakra-button:focus,
button.primary-button.chakra-button:hover {
  background: var(--theme-color) !important;
  color: var(--chakra-colors-white) !important;
  border: 1.5px solid var(--theme-color) !important;
  border-radius: '50%' !important;
  height: 50px;
  transition: all ease-in 0.3s;
  font-style: normal;
  font-weight: 400 !important;
  font-size: 15px !important;
}
 
button.primary-button.chakra-button:hover {
  color: var(--chakra-colors-white) !important;
  /* background: transparent !important; */
}

button.primary-button.delete-button.chakra-button,
button.primary-button.delete-button.chakra-button:focus,
button.primary-button.delete-button.chakra-button:hover {
  background: var(--delete-button-color) !important;
  color: var(--delete-button-text-color) !important;
  border: 2px solid var(--delete-button-text-color) !important;
  border-radius: '50%' !important;
  height: 50px;
  transition: all ease-in 0.3s;
  font-style: normal;
  font-weight: 400 !important;
  font-size: 15px !important;
}

button.primary-button.delete-button.chakra-button:hover {
  background: var(--delete-button-hover-color) !important;
}
 
/* Specific styling for registration form buttons (Apply, Proceed) */
.signup-page .form-section button.primary-button.chakra-button,
.signup-page .form-section button.primary-button.chakra-button:focus,
.signup-page .form-section button.primary-button.chakra-button:hover {
  background: var(--chakra-colors-white) !important;
  color: var(--theme-color) !important;
  border: 1.5px solid var(--theme-color) !important;
}
.section-heading {
  font-family: var(--section-heading-font) !important;
  font-weight: var(--section-heading-font-weight) !important;
  color: var(--section-heading-color) !important;
}
/* Specific styling for Forgot Password page - Reset Password button */
.forgot-password-page button.primary-button.chakra-button[type="submit"],
.forgot-password-page button.primary-button.chakra-button[type="submit"]:focus,
.forgot-password-page button.primary-button.chakra-button[type="submit"]:hover {
  background: var(--chakra-colors-white) !important;
  color: var(--theme-color) !important;
  border: 1.5px solid var(--theme-color) !important;
}
 
/* Specific styling for Change Password page */
body:has([data-page="change-password"]) button.primary-button.chakra-button[type="submit"],
body:has([data-page="change-password"]) button.primary-button.chakra-button[type="submit"]:focus,
body:has([data-page="change-password"]) button.primary-button.chakra-button[type="submit"]:hover {
  background: var(--chakra-colors-white) !important;
  color: var(--theme-color) !important;
  border: 1.5px solid var(--theme-color) !important;
}
 
/* button.secondary-button.chakra-button,
button.secondary-button.chakra-button:focus,
button.secondary-button.chakra-button:hover {
  background: var(--theme-color) !important;
  color: var(--chakra-colors-white) !important;
  border: 1.5px solid var(--chakra-colors-white) !important;
  border-radius: '50%' !important;
  height: 50px;
  transition: all ease-in 0.2s;
  font-style: normal;
  font-weight: 400 !important;
  font-size: 15px !important;
 
} */
 
button.secondary-button.chakra-button,
button.secondary-button.chakra-button:focus,
button.secondary-button.chakra-button:hover {
  background: var(--theme-color) !important;
  color: var(--chakra-colors-white) !important;
  border: 1.5px solid var(--chakra-colors-white) !important;
  border-radius: '50%' !important;
  height: 50px;
  transition: all ease-in 0.2s;
  font-style: normal;
  font-weight: 400 !important;
  font-size: 15px !important;
 
}
.promocode {
color: var(--theme-heading-text) !important;
}
 
button.secondary-button.chakra-button:hover {
  /* color: var(--chakra-colors-white) !important; */
  background: var(--chakra-colors-white) !important;
  color: var(--theme-color) !important;
  font-weight: 600 !important;
  /* background: transparent !important; */
}
 
 
 
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--chakra-colors-black) !important;
  font-weight: 600;
}
 
p,
span {
  font-family: 'Roboto', sans-serif !important;
  color: var(--chakra-colors-gray-900) !important;
  /* font-size: 16px;
  line-height: 26px; */
  font-style: normal;
  font-weight: 400;
}
 
a,
a:visited,
a:active {
  color: var(--chakra-colors-gray-900) !important;
  font-weight: 600;
}
 
a:hover {
  color: var(--chakra-colors-gray-900) !important;
  font-size: inherit;
}
 
.dropdown-menulist {
  background: #355973 !important;
  border: 0 !important;
  box-shadow: 14px 17px 40px 4px var(--chakra-colors-blackAlpha-900) !important;
}
 
.dropdown-menulist button,
.dropdown-menulist button:focus,
.dropdown-menulist button:hover {
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--chakra-colors-gray-200) !important;
}
 
.dropdown-menulist button:hover {
  background: var(--chakra-colors-gray-800) !important;
}
 
 
.chakra-modal__body {
  background: var(--chakra-colors-white) !important;
}
 
.chakra-form-control label {
  font-size: 14px;
}
 
.tab-text {
  color: var(--chakra-colors-white) !important;
}
 
.chakra-tabs__tablist button.chakra-tabs__tab {
  border-radius: 0 !important;
  margin-right: 5px;
  background: var(--chakra-colors-white);
  border: 1.5px solid var(--chakra-colors-black);
  border-radius: 12px !important;
 
}
 
.chakra-tabs__tablist button.chakra-tabs__tab svg {
  color: var(--chakra-colors-black);
}
 
.chakra-tabs__tablist button.chakra-tabs__tab[aria-selected="true"],
.chakra-tabs__tablist button.chakra-tabs__tab:hover {
  color: var(--chakra-colors-white);
  background: var(--theme-color);
  border-color: var(--theme-color);
}
 
.chakra-tabs__tablist button.chakra-tabs__tab[aria-selected="true"] svg,
.chakra-tabs__tablist button.chakra-tabs__tab[aria-selected="true"] p,
.chakra-tabs__tablist button.chakra-tabs__tab:hover svg,
.chakra-tabs__tablist button.chakra-tabs__tab:hover p {
  color: var(--chakra-colors-white) !important;
}
 
.chakra-tabs__tablist button.chakra-tabs__tab:hover {
  transform: scale(1.01);
}
 
.chakra-form-control {
  margin-bottom: 15px;
}
 
.drawerBody {
  background-color: var(--theme-color) !important;
  box-shadow:'none' !important;
}
 
/* Sidebar selected menu styling for NaviOwl */
.sidebar-link-section .chakra-stack .chakra-box:first-child {
  background: var(--sidebar-selected-color) !important;
}
 
/* Enhanced sidebar styling for NaviOwl */
.sidebar-area {
  background-color: var(--theme-color) !important;
}
 
/* Sidebar box shadow for NaviOwl theme */
.sidebar-area > div {
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.8) !important;
}
 
/* Hover effects for sidebar links in NaviOwl */
.sidebar-link-section:hover .chakra-text {
  color: var(--sidebar-selected-color) !important;
  transition: color 0.3s ease !important;
}
 
/* Chart and analytics styling for NaviOwl */
.chart-container canvas {
  filter: brightness(1.1) !important;
}
 
/* Button styling for analytics */
.chakra-button[data-active="true"] {
  background: var(--chart-primary-color) !important;
  color: var(--theme-color) !important;
}
 
/* Tab styling for analytics */
.chakra-tabs__tab[aria-selected="true"] {  
  background: var(--chart-primary-color) !important;
  color: var(--theme-color) !important;
}
 
/* Navbar hover effects for NaviOwl theme */
.navbar-area .notification-InnerBox:hover {
  background: var(--theme-color) !important;
  color: var(--chakra-colors-white) !important;
}
 
/* Ensure navbar menu items use NaviOwl theme colors */
.navbar-area .chakra-menu__menulist {
  background: var(--chakra-colors-white) !important;
}
 
.navbar-area .chakra-menu__menuitem:hover,
.navbar-area .chakra-menu__menuitem:focus {
  background: var(--theme-color) !important;
  color: var(--chakra-colors-white) !important;
}
 
/* Chat box hover effects for NaviOwl theme */
.assistant-box:hover {
  border-color: var(--theme-color) !important;
  transform: scale(1.02);
}
 
.start-chat-btn:hover,
.assistant-box:hover .start-chat-btn {
  border-color: var(--theme-color) !important;
  background-color: var(--theme-color) !important;
  transform: scale(1.02);
}
 
.start-chat-btn:hover svg path,
.assistant-box:hover .start-chat-btn svg path {
  fill: var(--chakra-colors-white) !important;
}
 
.start-chat-btn:hover h5,
.assistant-box:hover .start-chat-btn h5 {
  color: var(--chakra-colors-white) !important;
}
th.table-heading {
  font-weight : bold !important;
  font-size : 15px;
  background-color : var(--table-heading-color);
  color: var(--chakra-colors-white) !important;
}
 
/* Forgot Password page styling for NaviOwl theme */
.forgot-password-page h1,
.forgot-password-page h2,
.forgot-password-page h3,
.forgot-password-page h4,
.forgot-password-page h5,
.forgot-password-page h6 {
  color: var(--chakra-colors-white) !important;
}
 
.forgot-password-page p,
.forgot-password-page span {
  color: var(--chakra-colors-white) !important;
}
 
.forgot-password-page .chakra-form-control label {
  color: var(--chakra-colors-white) !important;
}
 
.forgot-password-page .chakra-text {
  color: var(--chakra-colors-white) !important;
}
 
/* Scroll to bottom button styling for NaviOwl theme */
.scrollToBottom-btn {
  background: var(--theme-color) !important;
}
 
/* Welcome section styling for NaviOwl theme */
.welcome-section h1,
.welcome-section h2,
.welcome-section h3,
.welcome-section h4,
.welcome-section h5,
.welcome-section h6 {
  color: var(--chakra-colors-white) !important;
}
 
.welcome-section span {
  color: var(--chakra-colors-white) !important;
}
 
td.naviowl-td-value{
  color: white !important;
}
.naviowl-td-value {
  color: white !important;
}
 
/* button.naviowl-button.chakra-button {
  color: black !important;
}
 
button.naviowl-button.chakra-button:hover {
  background-color: #204460;
  color: white !important;
}
 
button.naviowl-button.chakra-button:hover.icon {
  color: white !important;
} */
 
button.naviowl-button.chakra-button,
button.naviowl-button.chakra-button:focus,
button.naviowl-button.chakra-button:hover {
  background:#204460 !important;
  color: white !important;
  height: 50px;
  transition: all ease-in 0.3s;
  font-style: normal;
  font-weight: 400 !important;
  font-size: 15px !important;
}
 
 
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
 
:root {
  --theme-color-1: #257C53;
  --theme-color-100: #EAF5ED;
  /* Lightest */
  --theme-color-200: #C2E2CF;
  --theme-color-300: #9ACDB1;
  --theme-color-400: #73B993;
  --theme-color-500: #4BA675;
  /* Slightly lighter than main */
  --theme-color-600: var(--theme-color-1);
  /* Main Color */
  --theme-color-700: #1E6644;
  --theme-color-800: #164F34;
  --theme-color-900: #0F3925;
  /* Darkest */
 
  --primary-gradient: linear-gradient(135deg, var(--theme-color-1) 0%, var(--theme-color-500) 100%);
  --primary-gradient: linear-gradient(139deg, rgba(0, 0, 0, 0.00) 31.94%, rgba(0, 0, 0, 0.45) 97.24%), var(--theme-color-1);
  --hover-gradient: linear-gradient(135deg, var(--theme-color-500) 0%, var(--theme-color-1) 100%);
  --theme-box-shadow: 45px 76px 113px 7px rgba(112, 144, 176, 0.08);
 
  --lightMode-font-color: #1A202C;
  --lightMode-body-bg: #F4F7FE;
  --lightMode-box-bg: #ffffff;
  --lightMode-subtitle-font-color: #2D3748;
  --lightMode-activeIcon-color: var(--theme-color-500);
 
 
  --lightMode-placeholder-color: #718096;
  --lightMode-icon-color: #A0AEC0;
  --lightMode-sidebar-color: var(--lightMode-box-bg);
  --lightMode-input-border-color: #e2e8f0;
  --lightMode-ModalBG-color: #ffffff;
  --lightMode-FooterBg-color: var(--lightMode-body-bg);
  --lightMode-sliderBoxBG-color: #ffffff;
 
  --color-success: #10be85;
  --color-error: #ee4337;
  --color-pending: #f1c40f;
  --color-info: #3498db;
 
 
 
  --darkMode-font-color: #ffffffeb;
  --darkMode-font-chart-color: #0b0a0aeb;
  --darkMode-body-bg: #0b1437;
  --darkMode-box-bg: #111c44;
  --darkMode-subtitle-font-color: #A3AED0;
  --darkMode-placeholder-color: #454c67;
  --darkMode-icon-color: ;
  --darkMode-sidebar-color: var(--d#ffffffarkMode-box-bg);
  --darkMode-activeIcon-color: var(--theme-color-500);
  --darkMode-input-border-color: #ffffff;
  --darkMode-ModalBG-color: #0d0434;
  --darkMode-FooterBg-color: var(--darkMode-body-bg);
  --darkMode-sliderBoxBG-color: #042254;
 
  --table-heading-color: #204460;
 
  --whiteAlpha-400: rgb(255 255 255 / 24%);
 
  --main-heading-size: 2.5rem;
  --main-heading-font-weight: 600;
 
  --label-size: 14px;
  --label-font-weight: 600;
  --label-mb: 8px;
 
  --submit-btn-border-radius: 50px;
  --submit-btn-font-size: 14px;
  --submit-btn-font-weight: 600;
  --submit-btn-bg: var(--primary-gradient) !important;
  --submit-btn-font-color: var(--chakra-colors-white) !important;
  --submit-btn-max-width: 200px;
  --submit-btn-box-shadow: var(--theme-box-shadow);
  --submit-btn-hover-bg: var(--hover-gradient) !important;
 
  --input-font-size: 14px;
  --input-border-radius: 6px;
  --input-padding: 1rem;
  --input-border-style: 1px solid !important;
  --input-font-weight: 500;
  --input-bg: transparent;
 
  --main-font-family: "DM Sans";
  --sidebar-font: Inter, sans-serif;
 
 
  --section-heading-font: "DM Sans", sans-serif;
  --section-heading-font-weight: 600;
  --section-heading-color: var(--theme-heading-text);
 
}