/* Fields Education Inc. Branding */

/* Fonts */
@font-face {
  font-family: "Noto-Sans";
  src: local("Noto-Sans"), local("Noto-Sans"), local("Noto Sans"), url("https://cdn.kytelearning.com/fields/branding/fonts/noto-sans/cd3a89de-e723-4e6d-83ef-fd6a34219f4e.woff2") format("woff2"), url("https://cdn.kytelearning.com/fields/branding/fonts/noto-sans/cd3a89de-e723-4e6d-83ef-fd6a34219f4e.woff") format("woff"), url("https://cdn.kytelearning.com/fields/branding/fonts/noto-sans/cd3a89de-e723-4e6d-83ef-fd6a34219f4e.ttf") format("truetype"), url("https://cdn.kytelearning.com/fields/branding/fonts/noto-sans/cd3a89de-e723-4e6d-83ef-fd6a34219f4e.otf") format("opentype");
  font-weight: 100 1000;
  font-stretch: 0% 200%;
}

@font-face {
  font-family: "Noto-Sans-SC-Thin";
  src: local("Noto-Sans-SC-Thin"), local("Noto-Sans-SC-Thin"), local("Noto Sans SC Thin"), url("https://cdn.kytelearning.com/fields/branding/fonts/noto-sans-sc-thin/4aafc02f-0b79-43f6-b62f-f0425c8dd641.woff2") format("woff2"), url("https://cdn.kytelearning.com/fields/branding/fonts/noto-sans-sc-thin/4aafc02f-0b79-43f6-b62f-f0425c8dd641.woff") format("woff"), url("https://cdn.kytelearning.com/fields/branding/fonts/noto-sans-sc-thin/4aafc02f-0b79-43f6-b62f-f0425c8dd641.ttf") format("truetype"), url("https://cdn.kytelearning.com/fields/branding/fonts/noto-sans-sc-thin/4aafc02f-0b79-43f6-b62f-f0425c8dd641.otf") format("opentype");
  font-weight: 100 1000;
  font-stretch: 0% 200%;
}

/* ***** */
/* CSS Variables */
:root {
  --color-font: rgba(10,31,68,1);
  --color-black: #000000;
  --color-white: #ffffff;
  --color-border: #b9c6e0;
  --color-status-info: #36a3f7;
  --header-color-text: rgba(10,31,68,1);
  --color-status-error: #f4516c;
  --color-brand-primary: rgba(255,184,34,1);
  --font-family-primary: 'Noto-Sans';
  --color-brand-tertiary: rgba(255,184,34,1);
  --color-status-success: #34bfa3;
  --color-status-warning: #ffb822;
  --color-brand-secondary: rgba(73,153,237,1);
  --color-page-background: #f5f5f5;
  --font-family-secondary: 'Noto-Sans';
  --header-background-color: rgba(255,255,255,1);
}
/* ************* */

/* Custom CSS */
kyte-header header.logged-out {
  display: none !important;
}
header kyte-logo svg,
header kyte-logo img {
  max-height: 42px !important;
  min-height: 0 !important;
}

/** Hidden Elements **/
kyte-navigation-drawer li.library {
  display: none;
}
kyte-navigation-drawer li.my-learning {
  display: none;
}

/* kyte-login,
kyte-forgot,
kyte-join,
kyte-signup-from-token {
  background-image: url(https://cdn.kytelearning.com/kruger-demo/org-0/page-3/db63b8b1-b5a7-5431-9af6-e347454cf705.jpg);
  background-size: cover;
} */

#login-container {
  max-width: 480px;
  width: 100%;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 14px;
}

.hide-tenant {
  display: none !important;
}

[ng-reflect-name="courseType"],
kyte-content-manager-course-builder-info #course-type {
  display: none !important;
}

button.sign-in-btn {
  background-color: white !important;
}

header.masquerade {
  background-color: white !important;
}



@media screen and (orientation: portrait) and (max-width: 768px),
screen and (orientation: landscape) and (max-width: 1024px) {

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  h4 {
    font-size: 1.2rem;
  }

  h5 {
    font-size: 1.1rem;
  }

  h6 {
    font-size: 1rem;
  }
}

/*font overides*/
*:not(.monaco-editor):not(i):not(h1, h2, h3, h4, h5, h6, mat-icon):not(button.modern) {
  font-family: var(--font-family-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
  font-family: var(--font-family-primary) !important;
 /* text-transform: uppercase !important;*/
}

.empty,
#empty-state,
#empty-state .container .empty {
  padding-top: unset !important;
  background-image: unset !important;
}

kyte-header h1 {
  margin-left:  -8px !important;
}
 table a,
 table a:hover {
   color: var(--color-font) ! important;
 }

 table tbody tr td:first-of-type * {
   max-width: 25vw !Important;
 }

/* Base */
#login-container button,
button.modern:not(.fab),
a.button.modern:not(.fab),
kyte-course-card button:not(.fab),
kyte-course-card a.button:not(.fab),
kyte-profile-in-progress button[routerlink="/library"]:not(.fab) {
background-color: #FFB822 !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  border: none !important;
  height: auto !important;
  min-height: unset !important;
  box-shadow:
    0 4px 0 #d99c1d,
    0 6px 12px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  transition: background-color .2s ease, transform .1s ease, box-shadow .1s ease !important;
}

/* Hover */
#login-container button:hover,
button.modern:not(.fab):hover,
a.button.modern:not(.fab):hover,
kyte-course-card button:not(.fab):hover,
kyte-course-card a.button:not(.fab):hover,
kyte-profile-in-progress button[routerlink="/library"]:not(.fab):hover {
  background-color: #f59e0b !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 3px 0 #cc861b,
    0 10px 18px rgba(0, 0, 0, 0.18) !important;
}

/* Active */
#login-container button:active,
button.modern:not(.fab):active,
a.button.modern:not(.fab):active,
kyte-course-card button:not(.fab):active,
kyte-course-card a.button:not(.fab):active,
kyte-profile-in-progress button[routerlink="/library"]:not(.fab):active {
  background-color: #d97706 !important;
  transform: translateY(0) !important;
  box-shadow:
    0 1px 0 #cc861b,
    0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Focus-visible */
#login-container button:focus-visible,
button.modern:not(.fab):focus-visible,
a.button.modern:not(.fab):focus-visible,
kyte-course-card button:not(.fab):focus-visible,
kyte-course-card a.button:not(.fab):focus-visible,
kyte-profile-in-progress button[routerlink="/library"]:not(.fab):focus-visible {
  outline: 0 !important;
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, .35),
    0 2px 0 #cc861b,
    0 6px 12px rgba(0, 0, 0, .15) !important;
}

/* Disabled */
#login-container button:disabled,
button.modern:not(.fab):disabled,
a.button.modern:not(.fab)[aria-disabled="true"],
kyte-course-card button:not(.fab):disabled,
kyte-course-card a.button:not(.fab)[aria-disabled="true"],
kyte-profile-in-progress button[routerlink="/library"]:not(.fab):disabled {
  opacity: .6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow:
    0 2px 0 #cc861b,
    0 6px 12px rgba(0, 0, 0, 0.10) !important;
  filter: grayscale(10%) brightness(.98) !important;
}
/* Inputs and textareas with .modern */
input.modern,
textarea.modern,
select.modern {
  border-radius: 14px !important;
  /* force 14px radius */
}

/* Override radius for combobox triggers */
button[role="combobox"],
.brnselecttrigger,
button[role="combobox"].brnselecttrigger {
  border-radius: 14px !important;
}

/* Global override for all elements using borderRadius-s */
.borderRadius-s {
  border-radius: 14px !important;
}

/* remove the entire Assignments tab item */
.desktop-nav .tab:has(> a[href="/dashboard/assigned"]) {
  display: none !important;
}

/* Side drawer items: base transition + rounding */
#side-drawer .list-group a {
  border-radius: 14px;
  transition: background-color .2s ease, color .2s ease, border-radius .2s ease;
}

/* Active state */
#side-drawer .list-group a.active {
  --amber-600: #d97706;
  --active-bg: rgba(255, 184, 34, 0.15);
  /* light brand highlight */
  color: var(--amber-600) !important;
  background-color: var(--active-bg) !important;
  border-radius: 14px !important;
}

/* Ensure nested label and icons inherit amber-600 when active */
#side-drawer .list-group a.active .tooltip-base,
#side-drawer .list-group a.active .text,
#side-drawer .list-group a.active svg,
#side-drawer .list-group a.active kyte-nav-icon-renderer,
#side-drawer .list-group a.active kyte-nav-icon-renderer svg,
#side-drawer .list-group a.active .icon {
  color: #d97706 !important;
  /* amber-600 */
  fill: #d97706 !important;
  /* for SVGs that use fill */
}

/* Optional: lighter hover for any item */
#side-drawer .list-group a:hover {
  background-color: #f8fafc !important;
  /* slate-50 */
  border-radius: 14px !important;
}
/* theme tokens */
:root {
  --nav-hover-bg: #f1f5f9;
  /* slate-100 */
  --nav-active-bg: rgba(255, 184, 34, .15);
  --nav-active-text: #d97706;
  /* amber-600 */
  --nav-radius: 14px;
}

/* base item */
#side-drawer .list-group li>a {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--nav-radius);
  transition: color .2s ease;
  z-index: 0;
}

/* the blob behind the item */
#side-drawer .list-group li>a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nav-hover-bg);
  border-radius: var(--nav-radius);
  transform: scale(.96) translateX(-6px);
  opacity: 0;
  transition:
    transform .28s cubic-bezier(.22, .8, .4, 1),
    opacity .18s ease;
  z-index: -1;
}

/* show blob on hover or when active */
#side-drawer .list-group li>a:hover::before,
#side-drawer .list-group li>a.active::before {
  transform: scale(1) translateX(0);
  opacity: 1;
}

/* active text and left emphasis */
#side-drawer .list-group li>a.active {
  color: var(--nav-active-text) !important;
}

#side-drawer .list-group li>a.active::before {
  background: var(--nav-active-bg);
}

/* the “tail” that pulls from the previous item */
#side-drawer .list-group li>a::after {
  content: "";
  position: absolute;
  right: 100%;
  /* sits to the left of the item */
  top: 50%;
  width: 0;
  height: 22px;
  background: var(--nav-hover-bg);
  border-radius: 9999px;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  transition: width .28s cubic-bezier(.22, .8, .4, 1),
    transform .28s cubic-bezier(.22, .8, .4, 1);
  z-index: -1;
}

/* when the NEXT item is hovered or active, extend a tail from this one */
#side-drawer .list-group li:has(+ li > a:hover)>a::after,
#side-drawer .list-group li:has(+ li > a.active)>a::after {
  width: 14px;
  transform: translateY(-50%) scaleX(1);
}

/* optional, a tiny lift on hover */
#side-drawer .list-group li>a:hover {
  transform: translateX(1px);
}

.lesson-link.active {
  color: #d97706  !important;
  /* Tailwind amber-500 */
}

a:hover {
  cursor: pointer;
  color: #d97706 !important;
  text-decoration: none;
}