:root {
  --color-primary-background: rgb(var(--color-primary-background-rgb));
  --color-secondary: rgb(var(--color-secondary-rgb));
  --color-primary: rgb(var(--color-primary-rgb));
  --color-primary-varian: rgb(var(--color-primary-varian-rgb));
  --color-secondary-color: rgb(var(--color-secondary-color-rgb));
  --color-text: rgba(var(--color-text-rgb), 1);

  --base-font-color: var(--color-text);
  --app-primary: var(--color-primary);

  --navbar-height: 56px;
  --footer-height: 56px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--color-text);
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px inherit;
}

html,
body {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  height: 100% !important;
  font-weight: 400;
  line-height: 25px !important;
  color: var(--base-font-color);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.wrapper {
  display: flex;
  align-items: stretch;
}

.content {
  width: 100%;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0 !important;
  min-height: calc(100vh - 50px);
  overflow-y: hidden !important;
}

.page-header {
  font-size: 2rem;
  font-weight: 400;
}

footer {
  background: #FFF;
  border-top: 0.5px solid #EAE9F7;
}

.entry_logo {
  height: 40px;
}

.profile-image-large {
  height: 80px;
}

.error-invalid-page {
  position: relative;
  top: 30%;
}

.vue-notification-group {
  margin-top: 5rem !important;
  z-index: 50001 !important;
}

.vue-notification-template {
  background: #E5EFF5 !important;
}

.n-light {
  margin: 10px;
  margin-bottom: 0;
  border-radius: 1px;
  font-size: 12px;
  padding: 10px 20px;
  background: #E5EFF5;
  border: 1px solid #E5EFF5;
}

.n-light>.notification-title {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10px;
  color: #2589F3;
}

.company-logo-image {
  height: 35px;
}

.filter-card {
  border-radius: 2px !important;
}

.notification-profile {
  height: 40px;
}

hr {
  margin-left: -30px;
  margin-right: -30px;
  border-top: 0.5px solid rgba(0, 0, 0, .1);
}

.cursor {
  cursor: pointer;
}

.timer-circle {
  border: 1px solid #eee;
  padding: 3px;
  border-radius: 10px;
}

.notification-unread {
  background-color: #007eff14;
}

.custom-border-light {
  border: 0.5px solid var(--color-secondary);
}

.font-inter-normal {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

.h-body {
  height: calc(100vh - 57.5391px - 62px);
  overflow: auto;
}

.text-primary {
  color: var(--app-primary);
}

.bg-primary {
  background-color: var(--app-primary) !important;
}

.border-primary {
  border-color: var(--app-primary) !important;
}

.text-color {
  color: var(--color-text) !important;
}

.bg-background-primary {
  background-color: var(--color-primary-background);
}

.border-background-primary {
  border-color: var(--color-primary-background) !important;
}

.bg-secondary {
  background-color: var(--color-secondary);
}

input.bg-secondary:focus {
  background-color: var(--color-secondary);
}

.nabtabs-container {
  display: flex;
  justify-content: space-between;
  align-items: end;
  overflow: hidden;
  background-color: var(--color-primary-background);
  width: 100%;
  padding: 2rem;
  flex: 1;
}

.border-secondary {
  border-color: var(--color-secondary) !important;
}

.table-responsive {
  border-color: var(--color-secondary) !important;
  color: var(--color-text) !important;
}

.border-color {
  border-color: var(--color-border) !important;
}

body {
  background-color: var(--color-primary-background);
  color: var(--color-text) !important;
}

.dropdown-menu {
  background-color: var(--color-primary-background);
  color: var(--color-text);
  border: 1px solid var(--color-border) !important;
}

.dropdown-menu .dropdown-item {
  color: var(--color-text);
}

.dropdown-menu .dropdown-item:hover,
.custom-dropdown .dropdown-menu .dropdown-item:hover {
  background-color: var(--color-secondary) !important;
  border-radius: 0 !important;
}

.btn-primary {
  background-color: var(--color-primary) !important;
  color: white !important;
}

.btn-light {
  background-color: var(--color-secondary) Im !important;
  color: var(--color-text);
  border: 1px solid var(--color-border) !important;
}

.btn-light:hover {
  color: var(--color-text);
}

.custom-keypad.numeric-keypad {
  background-color: inherit !important;
}

.border {
  border-color: var(--color-border) !important;
}

.text-error {
  color: var(--color-error) !important;
}

.navbar {
  height: var(--navbar-height);
}

.scrollbar-hide {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox, Safari 18.2+, Chromium 121+ */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
  /* Older Safari and Chromium */
}

.h-app {
  height: calc(100vh - var(--navbar-height) - var(--footer-height));
}