html {
    overflow-y: scroll;
}

/* ================================
   DxGrafik Font Family Import
   ================================ */

/* ================================
   Thin (100)
   ================================ */
   @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-Thin.16b71638d320.woff2") format("woff2"),
         url("../fonts/DxGrafik-Thin.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-Thin.b649e6aeed7e.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-ThinItalic.254d3f83d93c.woff2") format("woff2"),
         url("../fonts/DxGrafik-ThinItalic.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-ThinItalic.fbd1e57915ab.ttf") format("truetype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
  }

  /* ================================
     Extra Light (200)
     ================================ */
  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-ExtraLight.507d710d481c.woff2") format("woff2"),
         url("../fonts/DxGrafik-ExtraLight.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-ExtraLight.c6b2769623b1.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-ExtraLightItalic.92d1940e1959.woff2") format("woff2"),
         url("../fonts/DxGrafik-ExtraLightItalic.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-ExtraLightItalic.a3a191dd49a6.ttf") format("truetype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
  }

  /* ================================
     Light (300)
     ================================ */
  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-Light.73f775c690d7.woff2") format("woff2"),
         url("../fonts/DxGrafik-Light.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-Light.8eea369a8caa.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-LightItalic.4830b315c1f4.woff2") format("woff2"),
         url("../fonts/DxGrafik-LightItalic.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-LightItalic.55fecd50b377.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }

  /* ================================
     Regular (400)
     ================================ */
  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-Regular.c1236de687b7.woff2") format("woff2"),
         url("../fonts/DxGrafik-Regular.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-Regular.915b1123b007.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-Italic.28771aa7d989.woff2") format("woff2"),
         url("../fonts/DxGrafik-Italic.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-Italic.3bbc41ae81e3.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  /* ================================
     Medium (500)
     ================================ */
  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-Medium.70623868753f.woff2") format("woff2"),
         url("../fonts/DxGrafik-Medium.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-Medium.858acbead9cd.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-MediumItalic.bab085f5c765.woff2") format("woff2"),
         url("../fonts/DxGrafik-MediumItalic.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-MediumItalic.5cb31d6e0cc5.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  /* ================================
     Semi Bold (600)
     ================================ */
  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-SemiBold.76942af7b3d7.woff2") format("woff2"),
         url("../fonts/DxGrafik-SemiBold.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-SemiBold.36989787c3da.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-SemiBoldItalic.3a3fe7d052ce.woff2") format("woff2"),
         url("../fonts/DxGrafik-SemiBoldItalic.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-SemiBoldItalic.9a06f300ee8a.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  /* ================================
     Bold (700)
     ================================ */
  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-Bold.d0e4593c43ef.woff2") format("woff2"),
         url("../fonts/DxGrafik-Bold.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-Bold.52dc45a5e196.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-BoldItalic.ae37b98b31a5.woff2") format("woff2"),
         url("../fonts/DxGrafik-BoldItalic.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-BoldItalic.0089b0b38fcd.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  /* ================================
     Extra Bold (800)
     ================================ */
  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-ExtraBold.5e34ef27ff9c.woff2") format("woff2"),
         url("../fonts/DxGrafik-ExtraBold.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-ExtraBold.0887311b2912.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-ExtraBoldItalic.6f407d15368a.woff2") format("woff2"),
         url("../fonts/DxGrafik-ExtraBoldItalic.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-ExtraBoldItalic.aeff28abd935.ttf") format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  /* ================================
     Black (900)
     ================================ */
  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-Black.25497a1ea8bf.woff2") format("woff2"),
         url("../fonts/DxGrafik-Black.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-Black.c21ed0cba25e.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  @font-face {
    font-family: "DxGrafik";
    src: url("../fonts/DxGrafik-BlackItalic.a042b2a9d2b6.woff2") format("woff2"),
         url("../fonts/DxGrafik-BlackItalic.d41d8cd98f00.woff") format("woff"),
         url("../fonts/DxGrafik-BlackItalic.27846c9d34cc.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-2018, U+201A-FFFF; /* Exclude U+2019 */
  }

  /* Define a fallback font specifically for U+2019 (’ - right single quotation mark) */
@font-face {
  font-family: "ApostropheFallback";
  src: local("Arial"); /* Use a system font like Arial */
  unicode-range: U+2019;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "DxGrafik", "ApostropheFallback", Arial, serif;
}

/* Apply the custom font globally */
body {
  font-family: "DxGrafik", "ApostropheFallback", Arial, sans-serif;
}

body .btn {
  font-family: sans-serif;
}

.text-thin {
  font-family: "DxGrafik", "ApostropheFallback", Arial, serif;
  font-weight: 100;
}

.text-family-black {
  font-family: "DxGrafik", "ApostropheFallback", Arial, serif;
  font-weight: 900;
}


/* .vh-75 {
  height: 75vh !important;
}

.vh-70 {
  height: 70vh !important;
}

.vh-65 {
  height: 65vh !important;
}

.vh-60 {
  height: 60vh !important;
}

.vh-55 {
  height: 55vh !important;
}

.vh-50 {
  height: 50vh !important;
}
 */

 /* Custom styling for the auth screens */
.login-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="39" height="39" rx="3.5" fill="white" fill-opacity="0" stroke="%23E5E7EB"/></svg>') repeat;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%), linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 90%), linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
}

.login-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  max-height: none;
}

/* Custom styling for active link in the navbar */
.nav-link.active {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  border-left: 3px solid var(--bs-primary);
  font-weight: 500;
}

.nav-link.active:hover {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

/* Dark theme overrides for active nav items */
[data-bs-theme="dark"] .nav-link.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--bs-light);
  border-left: 3px solid var(--bs-light);
}

[data-bs-theme="dark"] .nav-link.active:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--bs-light);
}

.content-margin {
  margin-left: 0;
}

@media (min-width: 768px) {
  .content-margin {
    margin-left: 280px;
  }
}