/* You can add global styles to this file, and also import other style files */
@import "https://fonts.googleapis.com/icon?family=Material+Icons";
/** CSS Variables **/
:root {
  --myg-sans: "OpenSans";
  --myg-montserrat: "Montserrat";
  /** color **/
  --myg-white: #ffffff;
  --myg-black: #000000;
  --myg-black-200: #333333;
  --myg-black-300: #ccd1d6;
  --myg-dark-400: #37424b;
  --myg-cyan-blue: #edf2f8;
  --myg-semi-transparent-black: #00000029;
  --myg-cobalt: #0051a3;
  --myg-light-gray: #535e67;
  --myg-dusty-grey-opacity: rgba(151, 151, 151, 0.5);
  --myg-grey: #a3a3a39e;
  --myg-light-border-gray: #ddd;
  --myg-bule-400: #4B8FE2;
  --myg-mint-green: #2BCC8D;
  --myg-carrot-orange: #ef8f2f;
  --myg-tan-hide: #f98e4e;
  --myg-porcelain: #ebeced;
  --myg-bright-orange: #f8ba41;
  --myg-semi-gray:#B8B4C4;
  --myg-red-carnation: #F46360;
  --myg-jaffa: #ed8d37;
  --myg-shamrock: #2bcc8d;
  --myg-lighty-blue: #0072bc;
  --myg-lightly-blue: #1AA9EB;
  --myg-light-white: #f2f4f8;
  --myg-simple-gray: #37424B;
  --myg-grayish-white: #e0e0e0;
  --myg-grid-gray: #bbb;
  --myg-light-orange: #ed8e36;
  --myg-light-sky-blue: #a0c4f2;
  --myg-dark-blue-lighty: #0056b3;
  --myg-white-gray: #DFE1E6;
  --myg-light-neem-green: #e1fdf2;
  --myg-gloss-gray: #f5f9ff;
  --myg-steel-blue: #4682b4;
  --myg-medium-gray: #7F7F7F;
  --myg-creamy-white: #e4e5eb;
  --myg-buttermilk: #FFEBB5;
  --myg-peach-schnapps: #FFD8D1;
  --myg-flamingo: #ED6136;
  --myg-flango-light: #ED8E36;
  --myg-cinnabar: #EA4335;
  --myg-dark-burgundy: #740805;
  --myg-suggestion-panel-count-color: var(--myg-black-200);
  --myg-suggestion-panel-icon: var(--myg-tan-hide);
  --myg-suggestion-panel-action-font: var(--myg-tan-hide);
  --myg-suggestion-panel-title: var(--myg-carrot-orange);
  --myg-suggestion-border: var(--myg-porcelain);
  --myg-suggestion-panel-slider: var(--myg-gray-400);
  --myg-suggestion-panel-slider-option: var(--myg-white);
  --myg-teacher-suggestion-text: var(--myg-white);
  --myg-teacher-suggestion-icon: var(--myg-bright-orange);
  --myg-teacher-suggestion-color: var(--myg-tundora);
  --myg-ai-blue-100: #f2f9ff;
  --myg-ai-blue-200: #e5f4ff;
  --myg-ai-blue-300: #bde3ff;
  --myg-ai-blue-400: #80caff;
  --myg-ai-blue-500: #0d99ff;
  --myg-ai-blue-600: #007be5;
  --myg-ai-blue-700: #0768cf;
  --myg-ai-blue-800: #034ac1;
  --myg-ai-blue-900: #093077;
  --myg-ai-blue-1000: #0d193f;
  --myg-ai-light-100: #f5f5f5;
  --myg-ai-light-200: #e6e6e6;
  --myg-ai-light-300: #d9d9d9;
  --myg-ai-light-400: #b3b3b3;
  --myg-ai-light-500: #757575;
  --myg-ai-light-600: #444444;
  --myg-ai-light-700: #383838;
  --myg-ai-light-800: #2c2c2c;
  --myg-ai-black-100: #0000000d;
  --myg-ai-black-200: #0000001a;
  --myg-ai-black-300: #00000033;
  --myg-ai-black-400: #0000004d;
  --myg-ai-black-500: #00000080;
  --myg-ai-black-600: #000000cc;
  --myg-ai-black-700: #000000d9;
  --myg-ai-black-800: #000000e5;
  --myg-ai-black-900: #000000f2;
  --myg-ai-grey-100: #f1f3f7;
  --myg-ai-orange-200: #ffe0c2;
  --myg-ai-green-200: #daecdf;
  --myg-ai-pink-200: #f2e3ee;
  --myg-ai-red-200: #f3cfc9;
  --myg-ai-white: #ffff;
  --myg-ai-light-white-blue: #ececf9;
  --myg-ai-white-light-blue: #F2F8FF;
  --myg-ai-heavy-blue: #3224FF;
  --myg-ai-dark-gray: #4B8FE21A;
  --myg-ai-light-gray: #2BCC8D1A;
  --myg-ai-gray-lighter: #F463601A;
  --myg-ai-gray-icon: #969696;
  --myg-dark-sky-blue: #4b8fe2;
  --myg-mediumpurple: #9370db;
  --myg-peachpuff: #ffdab9;
  --myg-inactive-bg: var(--myg-dark-400);
  --myg-blue-40: #edf4fc;
  --myg-approx-mint-cream: #E6FFF6;
  --myg-approx-old-lace: #fff8e6;
  --myg-atc-bg-black: #202e32;
  --myg-link-water: #E5F1F8;
  --myg-brides-maid: #FEF3E9;
  --myg-polar: #EAFAF4;
  --myg-orange-white: #FEF8EC;
  --myg-hawkes-blue: #DDECFD;
  --myg-light-blue: #F0EFFE;
  --myg-light-pink: #FFF0F0;
  --myg-oeq-prompt-bg1: #EEF6FF;
  --myg-oeq-prompt-bg2: #EDFFF8;
  --myg-oeq-prompt-bg3: #FFF8E9;
  --myg-oeq-prompt-bg4: #FFECEC;
  --myg-thumbs-up: url("https://cdn.stage.gooru.org/assets/icons/thumbs-up.svg");
  --myg-thumbs-down: url("https://cdn.stage.gooru.org/assets/icons/thumbs-down.svg");
  --myg-default-profile: url('https://cdn.stage.gooru.org/assets/icons/default-profile.png');
  --myg-my-gooru: url('https://cdn.stage.gooru.org/assets/images/my-gooru-white-logo.svg');
  --myg-arrow-left-top: url('https://cdn.stage.gooru.org/assets/icons/arrow-left-top.svg');
  --myg-something-went-wrong: url('https://cdn.stage.gooru.org/assets/icons/something-went-wrong.svg');
  --myg-assessment-default: url('https://cdn.stage.gooru.org/assets/icons/assessment-default.png');
  --myg-lesson-default: url('https://cdn.stage.gooru.org/assets/icons/lesson-default.png');
  --myg-question-icon: url('https://cdn.stage.gooru.org/assets/images/question.svg');
  --myg-nav-mygooru-icon: url("https://cdn.stage.gooru.org/assets/icons/mygooru-nav-icon.svg");
  --myg-nav-uparrow-icon: url("https://cdn.stage.gooru.org/assets/icons/uparrow-icon.svg");
  --myg-my-gooru-bg-white: url('https://cdn.stage.gooru.org/assets/images/my-gooru-white-logo.svg');
  --myg-mastered-competency-icon: url('https://cdn.stage.gooru.org/assets/images/competency-mastered.svg');
  --myg-inprogress-competency-icon: url('https://cdn.stage.gooru.org/assets/images/competency-inprogress.svg');
  --myg-total-competency-icon: url('https://cdn.stage.gooru.org/assets/images/competency-total.svg');
  --myg-arrow-forward: url('https://cdn.stage.gooru.org/assets/icons/arrow-forward-black.svg');
  --myg-collection-icon: url('https://cdn.stage.gooru.org/assets/icons/collection.svg');
  --myg-icon-play-icon: url('https://cdn.stage.gooru.org/assets/images/play-circle.svg');
  --ai-profile-logo: url('https://cdn.stage.gooru.org/assets/images/my-gooru-white-logo.svg');
  --ai-user-profile-logo: url('https://cdn.stage.gooru.org/assets/images/ai-defalut-profile.svg');
  --ai-resource-text: url('https://cdn.stage.gooru.org/assets/images/resource-text.png');
  --ai-resource-video: url('https://cdn.stage.gooru.org/assets/images/resource-video.png');
  --myg-my-gooru-chatbot-logo: url('https://cdn.stage.gooru.org/assets/images/chat-mygooru-logo.png');
  --myg-reroute-suggestion-transparent-img: url("https://cdn.stage.gooru.org/assets/images/reroute-suggestion-transparent.png");
  --myg-kangaroo-animation-img: url("https://cdn.stage.gooru.org/assets/images/kangaroo-animation.svg");
  --myg-competency-icon: url("https://cdn.stage.gooru.org/assets/icons/competency-icon.png");
}

.myg-expanded {
  animation: expand 0.3s ease-in-out forwards;
}

.myg-collapsed {
  animation: expand 0.3s ease-in-out reverse forwards;
}

@keyframes expand {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes genie-effect-up {
  0% {
    width: 20px;
    height: 20px;
    border-radius: 16px;
  }
}

@keyframes genie-effect-down {
  100% {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }
}

.myg-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myg-multi-line-ellipsis {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.myg-disabled {
  pointer-events: none;
}

.myg-visible {
  opacity: 1;
}

.myg-invisible {
  opacity: 0;
  pointer-events: none;
}

.myg-inactive-btn {
  background: var(--myg-private-gray) !important;
  color: var(--myg-white) !important;
}

.myg-disabled-btn {
  pointer-events: none;
  background: var(--myg-private-gray) !important;
  color: var(--myg-white) !important;
}

.myg-hidden {
  display: none !important;
}

.dummy-div {
  flex: 1 1 auto;
}

.myg-widget {
  font-family: var(--myg-montserrat);
}

[data-theme="light-theme"] {
  --myg-dark-sky-blue: #4b8fe2;
  --myg-dark-mint-green: #2bcc8d;
  --myg-private-gray: #b8b4c4;
}

[data-theme="dark-theme"] {
  --myg-dark-sky-blue: #0000ff;
  --myg-dark-mint-green: #32642b;
  --myg-private-gray: #433f50;
}

/* ---start external icons--- */
ion-icon.audio_resource {
  mask-image: var(--myg-audio-resource-icon);
}

ion-icon.video_resource {
  mask-image: var(--myg-video-resource-icon);
}

ion-icon.webpage_resource {
  mask-image: var(--myg-webpage-resource-icon);
}

ion-icon.text_resource {
  mask-image: var(--myg-text-resource-icon);
}

ion-icon.interactive_resource {
  mask-image: var(--myg-interactive-resource-icon);
}

ion-icon.image_resource {
  mask-image: var(--myg-image-resource-icon);
}

ion-icon[class*="myg-icon-"] {
  width: 24px;
  height: 24px;
  mask-size: contain;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  background: var(--myg-inactive-bg);
  cursor: pointer;
}

ion-icon[class*="thumbs-up"] {
  mask-image: var(--myg-thumbs-up);
  -webkit-mask-image: var(--myg-thumbs-up);
  width: 20px !important;
  height: 20px !important;
}

ion-icon[class*="thumbs-down"] {
  mask-image: var(--myg-thumbs-down);
  -webkit-mask-image: var(--myg-thumbs-down);
  width: 20px !important;
  height: 20px !important;
}

ion-icon[class*="arrow-forward"] {
  mask-image: var(--myg-arrow-forward);
  -webkit-mask-image: var(--myg-arrow-forward);
}

ion-icon[class*="play-icon"] {
  mask-image: var(--myg-icon-play-icon);
  -webkit-mask-image: var(--myg-icon-play-icon);
}

/* ---end external icons--- */
@media print {
  .myg-print-hide {
    display: none;
  }
}

.myg-print {
  display: none;
}

@media print {
  .myg-print {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 11111;
  }
}

svg.myg-progress {
  height: 100%;
}

.myg-inner-html p {
  margin-bottom: 0;
}

.myg-inner-html img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 250px;
}

#myg-widget-container::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: var(--myg-tick) var(--wrong) var(--myg-radio-btn) var(--myg-performance-score-fill-bg) var(--myg-image-resource-icon) var(--myg-interactive-resource-icon) var(--myg-text-resource-icon) var(--myg-video-resource-icon) var(--myg-webpage-resource-icon) var(--myg-assessment) var(--myg-collection) var(--myg-arrow-back) var(--myg-arrow-down) var(--myg-arrow-up) var(--myg-info) var(--myg-explore) var(--myg-clock) var(--myg-edit) var(--myg-volume-up) var(--myg-close) var(--myg-audio-resource-icon) var(--myg-question) var(--myg-offline) var(--myg-feature-lesson-icon) var(--myg-play-icon) var(--myg-arrow-left-top) var(--myg-thumbs-up) var(--myg-thumbs-down) var(--myg-arrow-forward) var(--myg-collection-icon) var(--myg-icon-play-icon) var(--ai-profile-logo) var(--ai-user-profile-logo);
}

#myg-widget-container .grade-range-0-59.myg-ai-performance-summary-score-text,
#myg-widget-container .grade-range-60-69.myg-ai-performance-summary-score-text,
#myg-widget-container .grade-range-70-79.myg-ai-performance-summary-score-text,
#myg-widget-container .grade-range-80-89.myg-ai-performance-summary-score-text,
#myg-widget-container .grade-range-90-100.myg-ai-performance-summary-score-text {
  color: var(--myg-white);
  background-color: transparent;
}

#myg-widget-container .myg-ai-performance-summary-score-text.grade-range-0-59 {
  color: var(--myg-red);
}

#myg-widget-container .myg-ai-performance-summary-score-text.grade-range-not-started {
  color: var(--myg-white);
}

#myg-widget-container .myg-ai-performance-summary-score-text.grade-range-60-69 {
  color: var(--myg-grade-range-60-69);
}

#myg-widget-container .myg-ai-performance-summary-score-text.grade-range-70-79 {
  color: var(--myg-grade-range-70-79);
}

#myg-widget-container .myg-ai-performance-summary-score-text.grade-range-80-89 {
  color: var(--myg-grade-range-80-89);
}

#myg-widget-container .myg-ai-performance-summary-score-text.grade-range-90-100 {
  color: var(--myg-shamrock);
}

.myg-custom-snack-bar {
  position: fixed !important;
  z-index: 11111;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  right: 14px !important;
  bottom: 7px !important;
}

.myg-custom-snack-bar.myg-mygooru-ai.mat-mdc-snack-bar-container .mdc-snackbar__surface {
  width: 520px;
}

.myg-custom-snack-bar.mat-mdc-snack-bar-container .mdc-snackbar__surface {
  background-color: var(--myg-white);
  width: 400px;
  box-shadow: none;
  border-radius: 16px 16px 16px 0px;
  box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.08);
  padding-right: 0px;
}

.myg-custom-snack-bar.mat-mdc-snack-bar-container .mdc-snackbar__surface .mat-mdc-snack-bar-label {
  padding: 0;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/*# sourceMappingURL=_my-gooru.css.map */