@charset "UTF-8";

/* Geologica Variable Font - Local Optimized Version */
/* Greek-first font loading strategy for optimal performance */

/* Primary: Greek characters support (loads first for Greek users) */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/geologica-variable-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Secondary: Latin characters support (fallback for non-Greek text) */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/geologica-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design System Variables */
:root {
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 70px;
  --header-height: 70px;
  --sidebar-transition-duration: 0.4s;
  --transition-timing: 0.4s ease-in-out;
  --color-sidebar-bg: #2D2C40;
  --color-header-shadow: rgba(0, 0, 0, 0.05);
  --color-card-shadow: rgba(40, 34, 32, 0.2);
  --color-muted-gray: #A5A4A4;
  --color-medium-purple: #5A56AF;
  --color-body-bg: #EDEDED;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --default-text-color: #282220;
  --color-text-dark: #43425D;
  --color-bright-pink: #E61464;
  --color-orange: #FF744C;
  --color-yellow: #FFBA45;
  --color-light-gray: #E9E9F0;
  --color-scrollbar-thumb: #D1D1D1;
  --color-light-purple: #A3A0FB;
  --color-light-grey-select-button: #BEBEBE;
  --color-inputs-border: #727272;
  --color-blue: #4017B0;
  --color-labels-dark: #363636;
  --text-muted: #62666Ae3;
  /* Status colors */
  --success: #2E7D32;
  --warning: #FF744C;
  --danger: #C30000;
  --info: var(--color-light-purple);
  --primary: var(--color-blue);
  --secondary: #6c757d;
  --dark: #212529;

  /* Order/Shipment status colors */
  --status-pending: #FFF3E0;
  --status-processing: #E3F2FD;
  --status-shipped: #29BFEC;
  --status-completed: #E8F5E9;
  --status-failed: #FFEBEE;

  /* Alert specific colors */
  --alert-success-bg: inherit;
  --alert-info-bg: inherit;
  --alert-warning-bg: inherit;
  --alert-danger-bg: inherit;
}

/* Order status indicators */
.pending {
  background: var(--status-pending, #FFF3E0);
  color: #c44500;
}

.toconfirm {
  background: #E0F7FA;
  color: #007680;
}

.processing {
  background: var(--status-processing, #E3F2FD);
  color: #1565C0;
}

.completed,
.paid,
.shipped {
  background: var(--status-completed, #E8F5E9);
  color: #2E7D32;
}

.returned {
  background: #F3E5F5;
  color: #6A1B9A;
}

.canceled {
  background: #ECEFF1;
  color: #37474F;
}

.failed,
.refunded,
.unpaid {
  background: var(--status-failed, #FFEBEE);
  color: #C62828;
}

/* Base Styles */
body {
  background-color: var(--color-body-bg);
  font-family: "Geologica", sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: 0px;
  min-height: 100vh;
  margin: 0;
  color: var(--default-text-color);
}

/* Typography */
.h5,
.h6,
h5,
h6{
  text-transform: none;
  letter-spacing: 0px;
  margin-block-start: 0;
  margin-block-end: 0;
}

h1, .h1 {
  font: normal normal normal 28px/35px 'Geologica', sans-serif;
  color: var(--default-text-color);
  margin-top: 0;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0px;
}

h2, .h2 {
  font: normal normal normal 18px/25px 'Geologica', sans-serif;
  color: var(--default-text-color);
  margin-top: 0;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0px;
}

h3, .h3 {
  font: normal normal 600 15px/25px 'Geologica', sans-serif;
  color: var(--default-text-color);
  margin-top: 0;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0px;
}

h4, .h4 {
  font: normal normal 500 15px/25px 'Geologica', sans-serif;
  color: var(--default-text-color);
  margin-top: 0;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0px;
}

p,
span, .span {
  font: normal normal normal 14px/20px 'Geologica', sans-serif;
  text-transform: none;
  letter-spacing: 0px;
  margin-block-start: 0;
  margin-block-end: 0;
}

label {
  font: normal normal 300 13px/16px 'Geologica', sans-serif;
  color: var(--color-labels-dark);
}

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

.text-success {
  color: #2E7D32 !important;
}

.text-danger {
  color: #C62828 !important;
}

.text-info {
  color: #1565C0 !important;
}

/* Layout */
html {
  height: -webkit-fill-available;
}

main {
  height: 100vh;
  height: -webkit-fill-available;
  min-height: 100vh;
  /* overflow-x: auto;
  overflow-y: hidden; */
}

.content-wrapper {
  margin-left: var(--sidebar-collapsed-width);
  /* padding: 100px 95px 58px 75px; */
  padding: 100px 30px 58px 30px;
  -webkit-transition: margin-left var(--transition-timing);
  -o-transition: margin-left var(--transition-timing);
  transition: margin-left var(--transition-timing);
}

/* Cards */
.card {
  -webkit-box-shadow: 0px 2px 6px var(--color-card-shadow);
  box-shadow: 0px 2px 6px var(--color-card-shadow);
  padding: 20px;
  color: var(--default-text-color);
  background-color: var(--color-white);
  border: 0 solid transparent;
}

.card .card-header {
  border-bottom: 1px solid var(--color-light-gray);
}

/* Buttons */
.btn {
  border-radius: 4px;
  font: normal normal normal 15px/19px 'Geologica', sans-serif;
  letter-spacing: 0px;
  text-transform: none;
  padding: 8px 20px;
}

.btn-primary {
  background-color: var(--color-bright-pink);
  border-color: var(--color-bright-pink);
}

.btn-secondary {
  border: 1px solid var(--color-inputs-border);
  background: var(--color-white);
  color: var(--color-labels-dark);
}

.btn-secondary:hover,
.btn-secondary:active {
  color: var(--color-white) !important;
  background-color: var(--color-labels-dark) !important;
  border-color: var(--color-labels-dark) !important;
}

/* Update button focus style to match form inputs */
.btn:focus-visible {
  color: var(--color-labels-dark);
  border-color: var(--color-medium-purple);
  background-color: var(--color-white);
  outline: 0;
  -webkit-box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
  box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
}

.btn-outline-secondary {
  color: var(--color-medium-purple);
  border: 0;
  border-color: var(--color-medium-purple);
  text-decoration: underline;
}

.btn-outline-secondary:not([disabled]):not(.disabled):active,
.btn-outline-secondary:not([disabled]):not(.disabled):focus,
.btn-outline-secondary:not([disabled]):not(.disabled):hover {
  color: var(--color-white);
  background-color: var(--color-medium-purple);
  border-color: var(--color-medium-purple);
}

.btn-outline-secondary:not([disabled]):not(.disabled):focus {
  -webkit-box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
  box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
}

.form-check {
  display: block;
  min-height: 25px;
  padding-left: 35px;
  margin-bottom: 0;
}

.form-check-input {
  --bs-form-check-bg: var(--color-white);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  margin-top: 0;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-white);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 2px solid var(--color-medium-purple);
  border-radius: 6px;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  print-color-adjust: exact;
}

.form-check .form-check-input {
  float: left;
  margin-left: -35px;
  cursor: pointer;
}

.form-check-label {
  margin-top: 4px;
  cursor: pointer;
}

.form-check-input:focus {
  color: var(--color-labels-dark);
  border-color: var(--color-medium-purple);
  outline: 0;
  -webkit-box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
  box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
}

.form-check-input:checked {
  background-color: var(--color-white);
  border-color: var(--color-medium-purple);
}

.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url('/static/media/icons/checkbox-tick.svg');
  background-size: 13px 9px;
}

/* Form input styling to override Bootstrap */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea.form-control,
select.form-select,
input:-internal-autofill-selected {
  border: 1px solid var(--color-inputs-border);
  background-color: var(--color-white);
  border-radius: 4px;
  opacity: 1;
  padding: 10px 16px;
  font: normal normal normal 13px/16px 'Geologica', sans-serif;
  letter-spacing: 0px;
  color: var(--color-labels-dark);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

/* Firefox-specific override */
@-moz-document url-prefix() {
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea.form-control,
  select.form-select {
    border: 1px solid var(--color-inputs-border);
    background-color: var(--color-white);
    background: var(--color-white);
    border-radius: 4px;
    padding: 10px 16px;
    font: normal normal normal 13px/16px 'Geologica', sans-serif;
    color: var(--color-labels-dark);
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
}

.form-select,
select.form-select {
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 8px center, right 24px center !important;
  background-size: 16px 10px, 16px 16px !important;
  padding: 10px 24px 10px 16px;
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
  padding: 10px 40px 10px 16px;
}

select[data-country-select="true"] {
  padding: 10px 24px 10px 40px;
}

.is-valid[data-country-select="true"] {
  padding: 10px 40px 10px 40px !important;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea.form-control:focus,
select.form-select:focus {
  color: var(--color-labels-dark);
  border-color: var(--color-medium-purple);
  font: normal normal normal 13px/16px 'Geologica', sans-serif;
  outline: 0;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
  box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
}

.country-select-flag {
  margin: -58px 0 0 16px !important;
  width: 18px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  margin-bottom: 10px;
  font: normal normal normal 15px/24px 'Geologica', sans-serif;
  letter-spacing: 0px;
  color: var(--color-labels-dark);
}

.form-control::-webkit-input-placeholder {
  color: var(--color-light-grey-select-button);
  font: normal normal normal 13px/13px 'Geologica', sans-serif;
}

.form-control::-moz-placeholder {
  color: var(--color-light-grey-select-button);
  font: normal normal normal 13px/13px 'Geologica', sans-serif;
}

.form-control:-ms-input-placeholder {
  color: var(--color-light-grey-select-button);
  font: normal normal normal 13px/13px 'Geologica', sans-serif;
}

.form-control::-ms-input-placeholder {
  color: var(--color-light-grey-select-button);
  font: normal normal normal 13px/13px 'Geologica', sans-serif;
}

.form-control::placeholder {
  color: var(--color-light-grey-select-button);
  font: normal normal normal 13px/13px 'Geologica', sans-serif;
}

.form-group.errors .form-control,
.form-group.errors .form-select {
  border-color: var(--danger);
}

.form-group.errors .form-control:focus,
.form-group.errors .form-select:focus {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(209, 0, 0, 0.25);
  box-shadow: 0 0 0 0.25rem rgba(209, 0, 0, 0.25);
}

/* Error handling */
.errors .invalid-feedback {
  display: block !important;
  padding: 0.5rem;
  margin-bottom: 0;
  color: var(--bs-danger-text-emphasis);
  background-color: var(--bs-danger-bg-subtle);
  border: 0;
  border-radius: var(--bs-border-radius);
  font-size: 12px;
}

/* Validation animation */
.form-control.is-invalid,
.form-select.is-invalid,
.errors .invalid-feedback {
  -webkit-animation: shake 0.3s ease-in-out;
  animation: shake 0.3s ease-in-out;
  background-size: 16px;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  background-size: 16px;
}

/* Readonly field styling */
.form-control[readonly],
.form-select[readonly] {
  background-color: var(--color-light-gray) !important;
  opacity: 0.8;
  cursor: not-allowed;
  border-color: var(--color-light-gray) !important;
}

.form-control[readonly]:focus,
.form-select[readonly]:focus {
  background-color: var(--color-light-gray) !important;
  opacity: 0.8;
  cursor: not-allowed;
  border-color: var(--color-light-gray) !important;
  outline: 0;
  -webkit-box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
  box-shadow: 0 0 0 4px rgba(90, 86, 175, 0.25);
}

@-webkit-keyframes shake {

  0%,
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }

  90% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes shake {

  0%,
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }

  90% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* Loading Spinner for Buttons */
@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* 
 * Loading spinner implementation using a pseudo-element overlay
 * This approach avoids conflicts with button state styles
 */

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--color-medium-purple);
}

.loading {
  position: relative !important;
  color: transparent !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Hide all children of loading buttons */
.loading>* {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Create a white overlay to hide button content */
.loading::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--color-white) !important;
  opacity: 1 !important;
  z-index: 3 !important;
}

.loading::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  /* Higher than the overlay */
  top: calc(50% - 0.5em) !important;
  left: calc(50% - 0.5em) !important;
  width: 1em !important;
  height: 1em !important;
  border: 3px solid var(--color-medium-purple) !important;
  border-radius: 50% !important;
  border-right-color: transparent !important;
  -webkit-animation: spinner-border 1.00s linear infinite !important;
  animation: spinner-border 1.00s linear infinite !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* Button color-specific styling - make sure buttons of specific colors still show correct spinner colors */
.btn-primary.loading::before,
.btn-secondary.loading::before,
.btn-success.loading::before,
.btn-danger.loading::before {
  background-color: var(--color-white) !important;
}

/* Size variants */
.btn-sm.loading::after {
  width: 0.8em;
  height: 0.8em;
  border-width: 3px;
}

.btn-lg.loading::after {
  width: 1.25em;
  height: 1.25em;
  border-width: 3px;
}

/* Quick view and other buttons with class loading */
a.loading,
button.loading {
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  opacity: 1;
}

/* Button colors - ensure spinner is visible on all button types */
.btn-secondary.loading::after,
.btn-dark.loading::after,
.btn-primary.loading::after {
  border-color: var(--color-medium-purple);
  border-right-color: transparent;
}

.btn-light.loading::after,
.btn-outline-secondary.loading::after,
.btn-outline-primary.loading::after {
  border-color: var(--color-medium-purple);
  border-right-color: transparent;
}

.sidebar-toggle {
  background-color: transparent;
  border: none;
  color: var(--color-text-dark);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  margin-right: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* Desktop sidebar toggle button - same styles as mobile */
.sidebar-toggle-desktop {
  background-color: transparent;
  border: none;
  color: var(--color-text-dark);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  margin-right: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Top navbar styles */
.top-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-width);
  height: var(--header-height);
  padding: 0 25px;
  background-color: var(--color-white);
  z-index: 1020;
  -webkit-box-shadow: 0 1px 10px var(--color-header-shadow);
  box-shadow: 0 1px 10px var(--color-header-shadow);
  -webkit-transition: left var(--transition-timing), width var(--transition-timing);
  -o-transition: left var(--transition-timing), width var(--transition-timing);
  transition: left var(--transition-timing), width var(--transition-timing);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/* User Interface */
.notification-badge {
  position: relative;
  margin-right: 20px;
  cursor: pointer;
}

.notification-badge i,
.notification-badge svg {
  color: var(--color-text-dark);
  font-size: 16px;
}

.notification-badge .badge {
  position: absolute;
  top: -5px;
  right: -7px;
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-size: 9px;
  line-height: 9px;
  width: 17px;
  padding: 2px;
  height: 17px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 2px solid var(--color-white);
  border-radius: 50%;
}

.badge.bg-success {
  background-color: var(--success) !important;
}

.badge.bg-warning {
  background-color: var(--warning) !important;
}

.badge.bg-danger {
  background-color: var(--danger) !important;
}

.badge.bg-info {
  background-color: #F3E5F5 !important;
  color: #6A1B9A;
}

.language-selector {
  color: var(--color-light-grey-select-button);
}

.language-option {
  padding: 5px 10px;
}

.language-option img {
  border-radius: 50%;
  -webkit-box-shadow: 0 0 4px var(--color-light-grey-select-button);
  box-shadow: 0 0 4px var(--color-light-grey-select-button);
  border: 2px solid transparent;
  -webkit-transition: border var(--transition-timing);
  -o-transition: border var(--transition-timing);
  transition: border var(--transition-timing);
}

.language-option.active img,
.language-option:hover img {
  -webkit-box-shadow: 0 0 4px var(--color-medium-purple);
  box-shadow: 0 0 4px var(--color-medium-purple);
  border: 2px solid var(--color-medium-purple);
  -webkit-transition: border var(--transition-timing);
  -o-transition: border var(--transition-timing);
  transition: border var(--transition-timing);
}

.user-profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.user-profile .user-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  -o-object-fit: contain;
  object-fit: contain;
  margin-left: 10px;
}

.user-info {
  color: var(--color-text-dark);
  font-size: 14px;
  font: normal normal 300 13px/20px "Geologica", sans-serif;
  line-height: 1.2;
  letter-spacing: 0px;
  border-left: 1px solid var(--color-light-grey-select-button);
  padding-left: 6px;
}

.user-info .arrow-down {
  width: 11px;
  height: 7px;
  margin-left: 15px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.user-info .arrow-down.rotated {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* User Profile Dropdown */
.user-profile {
  position: relative;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background-color: var(--color-white);
  border-radius: 4px;
  width: 220px;
  z-index: 1030;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  -o-transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  -webkit-box-shadow: 0px 2px 6px var(--color-card-shadow);
  box-shadow: 0px 2px 6px var(--color-card-shadow);
  border: none;
  padding: 0;
}

.user-dropdown.show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/* Override Bootstrap dropdown styles with higher specificity */
.top-navbar .user-profile .user-dropdown .menu-items {
  padding: 10px 0;
}

.top-navbar .user-profile .user-dropdown .nav-link,
.top-navbar .user-profile .user-dropdown button.nav-link {
  padding: 10px 15px;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--default-text-color);
  text-decoration: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  font: normal normal normal 13px/18px 'Geologica', sans-serif;
  text-align: left;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  width: 100%;
}

.top-navbar .user-profile .user-dropdown .nav-link:hover,
.top-navbar .user-profile .user-dropdown button.nav-link:hover {
  background-color: var(--color-light-gray);
}

.top-navbar .user-profile .user-dropdown .menu-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.top-navbar .user-profile .user-dropdown .menu-icon i {
  color: var(--default-text-color);
  font-size: 16px;
  margin-right: auto;
}

/* Notification Dropdown */
.notification-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: -10px;
  background-color: var(--color-white);
  border-radius: 4px;
  width: 320px;
  z-index: 1030;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  -o-transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, -webkit-transform 0.3s ease;
  -webkit-box-shadow: 0px 2px 6px var(--color-card-shadow);
  box-shadow: 0px 2px 6px var(--color-card-shadow);
}

.notification-dropdown.show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.notification-header {
  padding: 12px 15px;
  border-bottom: 1px solid var(--color-light-gray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.notification-header h6 {
  margin: 0;
  font: normal normal bold 14px/18px 'Geologica', sans-serif;
}

.notification-header .rounded-pill {
  position: relative;
  right: auto;
  top: auto;
  background-color: var(--color-yellow);
  padding: 5px 10px;
  font: normal normal normal 14px/18px 'Geologica', sans-serif;
  color: var(--default-text-color);
  border: none;
  width: auto;
  height: auto;
}

.notification-list {
  max-height: 320px;
  overflow-y: auto;
}

.notification-item {
  padding: 12px 15px;
  border-bottom: 1px solid var(--color-light-gray);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
  text-decoration: none;
  color: var(--default-text-color);
}

.notification-item:hover {
  background-color: var(--color-light-gray);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.notification-icon.info {
  background-color: rgba(163, 160, 251, 0.2);
  color: var(--color-medium-purple);
}

.notification-icon.success {
  background-color: rgba(102, 203, 159, 0.2);
  color: var(--success);
}

.notification-icon.warning {
  background-color: rgba(255, 186, 69, 0.2);
  color: var(--warning);
}

.notification-icon.danger,
.notification-icon.error {
  background-color: rgba(230, 20, 100, 0.2);
  color: var(--color-bright-pink);
}

.notification-content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.notification-title {
  font: normal normal bold 13px/18px 'Geologica', sans-serif;
  margin-bottom: 3px;
}

.notification-text {
  font: normal normal 300 12px/16px 'Geologica', sans-serif;
  color: var(--text-muted);
  margin-bottom: 0;
}

.notification-time {
  font: normal normal 300 11px/13px 'Geologica', sans-serif;
  color: var(--text-muted);
  margin-top: 5px;
}

.notification-footer {
  padding: 10px 15px;
  text-align: center;
  border-top: 1px solid var(--color-light-gray);
}

.notification-footer a {
  color: var(--color-medium-purple);
  text-decoration: none;
  font: normal normal normal 13px/18px 'Geologica', sans-serif;
}

.notification-footer a:hover {
  text-decoration: underline;
}

/* Animation effects for dropdowns */
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

.fadeInDown {
  -webkit-animation: fadeInDown 0.3s ease forwards;
  animation: fadeInDown 0.3s ease forwards;
}

.fadeOutUp {
  -webkit-animation: fadeOutUp 0.3s ease forwards;
  animation: fadeOutUp 0.3s ease forwards;
}

/* Alert styles */
.alert-wrapper {
  position: fixed;
  top: calc(var(--header-height) + 20px);
  right: 20px;
  z-index: 1050;
  max-width: 350px;
}

.alert {
  -webkit-box-shadow: 0 5px 15px var(--color-header-shadow);
  box-shadow: 0 5px 15px var(--color-header-shadow);
  -webkit-animation: slideInRight 0.3s ease-in-out;
  animation: slideInRight 0.3s ease-in-out;
}

@-webkit-keyframes slideInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* Button styling */
.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}

.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  -webkit-transition: -webkit-transform var(--transition-timing);
  transition: -webkit-transform var(--transition-timing);
  -o-transition: transform var(--transition-timing);
  transition: transform var(--transition-timing);
  transition: transform var(--transition-timing), -webkit-transform var(--transition-timing);
  -webkit-transform-origin: .5em 50%;
  -ms-transform-origin: .5em 50%;
  transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
}

.btn-toggle[aria-expanded="true"]::before {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--bs-tertiary-bg);
}

.scrollarea {
  overflow-y: auto;
  scrollbar-color: var(--color-medium-purple) var(--color-scrollbar-thumb);
}

/* Custom Global Scrollbar Styling */
* {
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: var(--color-medium-purple) var(--color-scrollbar-thumb);
  /* Firefox */
}

/* Chrome, Edge, and Safari */
::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: var(--color-scrollbar-thumb);
  border-radius: 4px;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-medium-purple);
  border-radius: 4px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-medium-purple);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

::-webkit-scrollbar:horizontal {
  height: 10px;
}

/* Messages Container Styles */
.messages-container {
  position: fixed;
  top: 100px;
  z-index: 1056;
  pointer-events: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 20px;
}

/* Enhanced animations for alert appearance and dismissal */
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

.messages-container .alert {
  pointer-events: auto;
  margin-bottom: 15px;
  -webkit-box-shadow: 0px 4px 12px var(--color-card-shadow);
  box-shadow: 0px 4px 12px var(--color-card-shadow);
  border: none;
  width: 100%;
  padding: 15px 40px 15px 15px;
  border-radius: 4px;
  position: relative;

  /* Animation for appearance */
  -webkit-animation: fadeInDown 0.5s ease forwards;
  animation: fadeInDown 0.5s ease forwards;
}

/* Override Bootstrap's fade class behavior for our alerts */
.messages-container .alert.fade {
  -webkit-transition: opacity 0.5s linear, -webkit-transform 0.5s ease-in-out;
  transition: opacity 0.5s linear, -webkit-transform 0.5s ease-in-out;
  -o-transition: opacity 0.5s linear, transform 0.5s ease-in-out;
  transition: opacity 0.5s linear, transform 0.5s ease-in-out;
  transition: opacity 0.5s linear, transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}

/* When the alert is showing */
.messages-container .alert.fade.show {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/* When the alert is being dismissed */
.messages-container .alert.fade:not(.show) {
  -webkit-animation: fadeOutUp 0.5s ease forwards;
  animation: fadeOutUp 0.5s ease forwards;
  /* This ensures the alert takes up space until the animation completes */
  display: block !important;
  pointer-events: none;
}

/* Button close override - FIX FOR CLOSE BUTTON */
.messages-container .alert .btn-close {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  font-size: 24px;
  z-index: 10;
  border: none;
  opacity: 1;
}

.messages-container .alert .btn-close::after {
  content: "\00d7";
  /* × character */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: var(--default-text-color);
  line-height: 1;
}

.messages-container .alert .btn-close:hover,
.messages-container .alert .btn-close:focus {
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 1;
}

.messages-container .alert-warning .btn-close {
  background-color: transparent;
}

.messages-container .alert-warning .btn-close:hover,
.messages-container .alert-warning .btn-close:focus {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Alert override styles */
.messages-container .alert ul {
  padding-left: 1.5rem;
  margin-bottom: 0;
}

.messages-container .alert p {
  margin-bottom: 0.5rem;
}

.messages-container .alert p:last-child {
  margin-bottom: 0;
}

/* Auto-dismiss animation */
@-webkit-keyframes progress {
  0% {
    width: 100%;
  }

  100% {
    width: 0%;
  }
}

@keyframes progress {
  0% {
    width: 100%;
  }

  100% {
    width: 0%;
  }
}

.messages-container .alert::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: var(--color-light-purple);
  -webkit-animation: progress 12s linear forwards;
  animation: progress 12s linear forwards;
}

.messages-container .alert:hover::after {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* Improved messages styling */
.alert-message-content {
  display: inline-block;
  word-break: break-word;
}

.alert-filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.alert-filter .filter-icon {
  margin-right: 10px;
  font-size: 1.2em;
}

.alert-filter .filter-tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 10px;
}

.alert-filter .filter-tag {
  background-color: rgba(0, 123, 255, 0.1);
  border: 1px solid rgba(0, 123, 255, 0.2);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  white-space: nowrap;
}

/* Modal styles - consistent across application */
.modal {
  background-color: rgba(40, 34, 20, .8);
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}

.modal.fade {
  opacity: 0;
}

.modal.show {
  opacity: 1;
}

.modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  -ms-transform: translate(0, -50px);
  transform: translate(0, -50px);
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -50px);
  -ms-transform: translate(0, -50px);
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.modal-content {
  padding: 1.5rem;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}

.modal-backdrop {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  border: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-light-grey-select-button);
  margin-bottom: 0.5rem;
}

.modal h4 {
  border-bottom: solid 1px var(--color-light-grey-select-button);
  border-top: solid 1px var(--color-light-grey-select-button);
}

.modal-header .close {
  background-color: transparent;
  position: relative;
  right: 0;
  top: 0;
  font-size: 24px;
  width: 36px;
  height: 36px;
  padding: 0;
  z-index: 10;
  border: none;
  opacity: 1;
}

.modal-header .close span {
  position: relative;
  z-index: 1;
}

.modal-header .close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.modal-body {
  padding: 0;
}

.modal-footer {
  border-top: solid 1px var(--color-light-grey-select-button);
  padding: 0;
}

.modal-footer>* {
  margin: 0;
}

/* Tooltip icon styling */
.tooltip-icon {
  margin-top: -7px;
  opacity: 0.7;
  cursor: help;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  -webkit-filter: brightness(0) saturate(100%) invert(16%) sepia(8%) saturate(1349%) hue-rotate(314deg) brightness(95%) contrast(90%);
  filter: brightness(0) saturate(100%) invert(16%) sepia(8%) saturate(1349%) hue-rotate(314deg) brightness(95%) contrast(90%);
}

.tooltip-icon:hover {
  opacity: 1;
}

/* Custom Bootstrap tooltip styling to match your design */
.tooltip {
  font-size: 12px;
}

.tooltip .tooltip-inner {
  max-width: 300px;
  border-radius: 4px;
  text-align: left;
  word-wrap: break-word;
  background-color: rgba(255, 255, 255, 0.9);
  border-color: var(--color-header-shadow);
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  padding: 10px;
  -webkit-box-shadow: 0px 2px 5px var(--color-header-shadow);
  box-shadow: 0px 2px 5px var(--color-header-shadow);
  font-family: "Geologica", sans-serif;
  font-weight: 400;
  ;
  color: var(--default-text-color);
  pointer-events: none;
}

/* Tooltip arrow styling for all directions */
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
  border-top-color: rgba(255, 255, 255, 0.9) !important;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: rgba(255, 255, 255, 0.9) !important;
}

/* Responsive styles */
@media (max-width: 992px) {
  .content-wrapper {
    padding: 100px 25px 50px 25px;
    margin-left: 0 !important;
  }

  .top-navbar {
    left: 0;
    width: 100% !important;
  }

  .messages-container {
    padding: 0 25px;
  }

  /* Base Styles */
  body {
    font-size: 14px;
    line-height: 20px;
  }

  /* Typography */
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  .p,
  .span,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span {
    text-transform: none;
    letter-spacing: 0px;
  }

  h1 {
    font: normal normal normal 22px/28px 'Geologica', sans-serif;
  }

  h2 {
    font: normal normal normal 20px/25px 'Geologica', sans-serif;
  }

  h3 {
    font: normal normal 600 16px/24px 'Geologica', sans-serif;
  }

  h4 {
    font: normal normal 500 16px/22px 'Geologica', sans-serif;
  }

  p,
  span {
    font: normal normal normal 14px/18px 'Geologica', sans-serif;
  }

  label {
    font: normal normal 300 14px/16px 'Geologica', sans-serif;
  }

  .tooltip {
    font-size: 10px;
  }

  /* Cards */
  .card {
    padding: 15px;
  }

  /* Buttons */
  .btn {
    border-radius: 4px;
    font: normal normal normal 14px/18px 'Geologica', sans-serif;
    letter-spacing: 0px;
    padding: 6px 16px;
  }

  /* Form input styling to override Bootstrap */
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea.form-control,
  select.form-select,
  input:-internal-autofill-selected {
    padding: 8px 12px;
    font: normal normal normal 14px/17px 'Geologica', sans-serif;
  }

  .form-select,
  select.form-select {
    background-position: right 6px center;
    background-size: 14px 8px;
    padding: 8px 20px 8px 12px;
  }

  .form-control:focus,
  .form-select:focus,
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  textarea.form-control:focus,
  select.form-select:focus {
    font: normal normal normal 14px/17px 'Geologica', sans-serif;
  }

  select[data-country-select="true"] {
    padding: 8px 20px 8px 40px;
  }

  .is-valid[data-country-select="true"] {
    padding: 8px 40px 8px 40px !important;
  }

  .country-select-flag {
    margin: -56px 0 0 16px !important;
    width: 16px;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .form-group label {
    margin-bottom: 10px;
    font: normal normal normal 14px/21px 'Geologica', sans-serif;
    letter-spacing: 0px;
  }

  .form-control::-webkit-input-placeholder {
    color: var(--color-light-grey-select-button);
    font: normal normal normal 14px/14px 'Geologica', sans-serif;
  }

  .form-control::-webkit-input-placeholder,
  .form-control::-moz-placeholder,
  .form-control:-ms-input-placeholder,
  .form-control::-ms-input-placeholder,
  .form-control::placeholder {
    color: var(--color-light-grey-select-button);
    font: normal normal normal 14px/14px 'Geologica', sans-serif;
  }

  .sidebar-toggle {
    background-color: transparent;
    border: none;
    color: var(--color-text-dark);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    margin-right: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  /* Desktop sidebar toggle button - same styles as mobile */
  .sidebar-toggle-desktop {
    background-color: transparent;
    border: none;
    color: var(--color-text-dark);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    margin-right: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

}

@media (max-width: 768px) {
  .language-option {
    padding: 3px 8px;
  }

  .notification-badge {
    margin-right: 10px !important;
  }

  .notification-dropdown {
    right: -55px;
  }
}