/* Pincho University Branding */

/* Fonts */
@font-face {
  font-family: "Barlow-Semi-Condensed-SemiBold";
  src: local("Barlow-Semi-Condensed-SemiBold"), local("Barlow-Semi-Condensed-SemiBold"), local("Barlow Semi Condensed SemiBold"), url("https://cdn.kytelearning.com/pincho/branding/fonts/barlow-semi-condensed-semibold/a2177db9-6e6d-4424-90bd-5a79e20dde28.woff2") format("woff2"), url("https://cdn.kytelearning.com/pincho/branding/fonts/barlow-semi-condensed-semibold/a2177db9-6e6d-4424-90bd-5a79e20dde28.woff") format("woff"), url("https://cdn.kytelearning.com/pincho/branding/fonts/barlow-semi-condensed-semibold/a2177db9-6e6d-4424-90bd-5a79e20dde28.ttf") format("truetype"), url("https://cdn.kytelearning.com/pincho/branding/fonts/barlow-semi-condensed-semibold/a2177db9-6e6d-4424-90bd-5a79e20dde28.otf") format("opentype");
  font-weight: 100 1000;
  font-stretch: 0% 200%;
}

@font-face {
  font-family: "Barlow-Condensed";
  src: local("Barlow-Condensed"), local("Barlow-Condensed"), local("Barlow Condensed"), url("https://cdn.kytelearning.com/pincho/branding/fonts/barlow-condensed/22685f23-f64d-41d8-8494-578d7a45327d.woff2") format("woff2"), url("https://cdn.kytelearning.com/pincho/branding/fonts/barlow-condensed/22685f23-f64d-41d8-8494-578d7a45327d.woff") format("woff"), url("https://cdn.kytelearning.com/pincho/branding/fonts/barlow-condensed/22685f23-f64d-41d8-8494-578d7a45327d.ttf") format("truetype"), url("https://cdn.kytelearning.com/pincho/branding/fonts/barlow-condensed/22685f23-f64d-41d8-8494-578d7a45327d.otf") format("opentype");
  font-weight: 100 1000;
  font-stretch: 0% 200%;
}

@font-face {
  font-family: "Balmy";
  src: local("Balmy"), local("Balmy"), local("Balmy"), url("https://cdn.kytelearning.com/pincho/branding/fonts/balmy/d9af3dc8-0ea0-4691-af9c-3da2a4629b34.woff2") format("woff2"), url("https://cdn.kytelearning.com/pincho/branding/fonts/balmy/d9af3dc8-0ea0-4691-af9c-3da2a4629b34.woff") format("woff"), url("https://cdn.kytelearning.com/pincho/branding/fonts/balmy/d9af3dc8-0ea0-4691-af9c-3da2a4629b34.ttf") format("truetype"), url("https://cdn.kytelearning.com/pincho/branding/fonts/balmy/d9af3dc8-0ea0-4691-af9c-3da2a4629b34.otf") format("opentype");
  font-weight: 100 1000;
  font-stretch: 0% 200%;
}

/* ***** */
/* CSS Variables */
:root {
  --color-font: rgba(0,0,0,1);
  --color-black: #000000;
  --color-white: #ffffff;
  --color-border: #b9c6e0;
  --color-status-info: #36a3f7;
  --header-color-text: rgba(255,255,255,1);
  --color-status-error: #f4516c;
  --color-brand-primary: rgba(255,222,0,1);
  --font-family-primary: 'Barlow-Semi-Condensed-SemiBold';
  --color-brand-tertiary: rgba(255,222,0,1);
  --color-status-success: rgba(34,178,76,1);
  --color-status-warning: #ffb822;
  --color-brand-secondary: rgba(255,222,0,1);
  --color-page-background: #f5f5f5;
  --font-family-secondary: 'Barlow-Condensed';
  --header-background-color: rgba(0,0,0,1);
  --forced-brand-color: rgba(255,222,0,1);
}
/* ************* */

/* Custom CSS */
kyte-header header.logged-out {
  display: none !important;
}

span.version {
  color: white;
}

/* Globally make the whole login container white */
#login-container {
  background-color: #fff !important;
  /* white background */
}

kyte-login,
kyte-forgot,
kyte-join,
kyte-signup-from-token {
  background-image: url(https://i0.wp.com/pincho.com/wp-content/uploads/2024/03/Header-Image.png);
  background-size: cover;
}


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

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

:root {
  --header-logo-padding-left: 24px;
  --font-size-m: 1.25rem;
  --branded-list-background-image: url('https://cdn.kytelearning.com/southblock/org-31896/branding/51842849-996b-5733-a65e-419555ee8a9c.png');
  --branded-list-background-size: 30px;
  --perch-toggle-handle-color: var(--color-white);
  --perch-toggle-track-color: var(--color-black);
  /* --branded-list-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='12' fill='white' viewBox='0 0 384 512'%3E%3Cpath d='M224 0H211.5l-3 12.1L179.5 128H16 0v32H16 368h16V128H368 212.5l24-96H272h16V0H272 224zM37.3 192L64 512H320l26.7-320H314.6l-4.2 50c-36.2 3.7-61.4 12.6-80.6 24.9c-19.3 12.3-31.7 27.6-42.5 41l-2 2.5c-11.5 14.1-22 26.3-39.1 36.1c-14 8-33.3 14.9-62.3 18.6L69.4 192H37.3zM86.5 397c32.9-4.1 56.8-12 75.5-22.8c22.6-13 36.2-29.2 48-43.7l1.4-1.7c11.3-13.9 20.7-25.5 35.5-35c13.2-8.5 31.7-15.7 60.7-19.4L290.6 480H93.4l-6.9-83z'/%3E%3C/svg%3E"); */
}

/* Set player background/overlay color */
kyte-plyr-video-backend .kyte-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

button.sign-in-btn {
  background-color: var(--color-brand-primary) !important;
}

.ql-font-RockwellExtraBold {
  text-transform: uppercase;
}

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


/* Updated font assignment logic */
body {
  font-family: var(--font-family-secondary);
}

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

h1.brandedHeader {
  font-size: 1.75rem;
  line-height: 1.75rem;
}

h1.brandedHeader {
  font-size: 1.375rem !important;
  line-height: 1.375rem;
}

table tbody kyte-table-cell {
  border-bottom: 1px solid var(--color-border) !important;
}


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

/*.ql-editor img[style*="float: left"],
.ql-editor img[style*="float:left"] {
  margin-right: 40px;
}*/

html body .brandedHeader {
  color: black !important;
  margin-bottom: 20px !important;
}

/*.ql-editor img {
  margin-left: 40px !important;
  margin-right: 40px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}*/

div.ql-editor {
  --blot-align-right-margin: 0 0 2.2rem 2.4rem;
  --blot-align-left-margin: 0 2.4rem 2.4rem 0;
  --blot-align-center-margin: 0 auto 2.4rem auto;
}

/** Quick fix for text editor not wrapping **/
/* div.ql-container {
  word-wrap: break-word;
}

/** Quick fix for rendering of text editor not wrapping, only applies to custom pages */
/*
kyte-custom-page-view-renderer-column,
kyte-custom-page-builder .column {
  width: 100%;
  overflow: hidden;
}
*/
.tooltip-base {
  font-size: .95rem !important;
}

kyte-text[message="profile.inProgress.emptyState"] button {
  display: none;
}

kyte-custom-page-view-renderer .sections {
  gap: unset !important;
}

kyte-custom-page-view-renderer-section {
  padding-bottom: 20px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

kyte-custom-page-view-renderer-module-text .ql-editor {
  margin: 0 !important;
  padding: 0 !important;
}

kyte-lesson-viewer-v2-evaluation .description {
  padding-top: 5px !important;
  overflow: hidden;
}

/* Don't show the course time on the user in progress section */
course-capsule-assignment-card kyte-hours-mins-seconds,
capsule-card kyte-hours-mins-seconds {
  display: none !important;
}

.error-message {
  color: red !important;
}

#header-container {
  padding-left: 15px !important;
}

/* Add this CSS to your stylesheet */
@media (max-width: 768px) {

  /* Adjust max-width as needed for your mobile breakpoint */
  ul#user-info-details {
    padding-left: 20px !important;
  }
}

/* Disable help icon */
#secondary-nav-items li:first-of-type {
  display: none !important;
}

/* Disable Achivements Tabs */
kyte-navigation-tabs div.tab:has([title="Achievements"]) {
  display: none !important;
}

/* Round out the loading container */
#loading-img,
kyte-spinner img {
  border-radius: 16px;
}

/*Side Nav*/
:root {

  --sidebar-background-color: #000;
  --sidebar-item-color: white;
}

button,
kyte-button {
  color: black !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  border-radius: 0px !important;
}

/* if you want it globally, put in styles.scss */

mat-chip.kyte-chip {
  /* force square corners */
  border-radius: 0 !important;

  /* ensure the chip’s internal cell also has no rounding */
  --mdc-shape-small: 0 !important;
}

mat-chip.kyte-chip .mdc-evolution-chip__cell {
  border-radius: 0 !important;
}

mat-chip.kyte-chip .mdc-evolution-chip__text-label {
  /* force the text to black */
  color: #000 !important;
}

kyte-text span {
  color: black !important;
  text-transform: uppercase !important;
}

.user-role {
  color: black !important;
  text-transform: uppercase !important;
}

@media screen and (min-width: 768px) {
  #content-container.content-wrapper:has(>.content) {
    margin-left:275px !important;
  }
}