/* Redeclaring some of Tailwind's colors so they can be reused here                                 */
/* The colors are the same of the Tailwind palette: https://tailwindcss.com/docs/customizing-colors */
:root {
  --green-100: #dff0d8;
  --green-700: #3c763d;
  --gray-900: #111827;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
}

html {
  overflow-y: scroll;
}

html.no-forced-scroll {
  overflow-y: auto;
}

/* These styles are generated from project.scss. */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  margin: 4px;
  display: flex;
  justify-content: space-between;
}

.alert-success {
  color: var(--green-700);
  background-color: var(--green-100);
  border-color: #d6e9c6;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.7s;
}

a:not([class]),
a:link:not([class]) {
  color: #0e5dff;
  /* blue-600 */
  text-decoration: underline;
}

a:not([class]):hover,
a:link:not([class]):hover {
  color: #1d4ed8;
  /* blue-700 */
  text-decoration: underline;
}

.dark a:not([class]),
.dark a:link:not([class]) {
  color: #6366f1;
  /* indigo-500 */
  text-decoration: underline;
}

.dark a:not([class]):hover,
.dark a:link:not([class]):hover {
  color: #818cf8;
  /* indigo-400 */
  text-decoration: underline;
}

a:visited:not([class]) {
  color: #551a8b;
  text-decoration: underline;
}

ins>u,
del>u {
  text-decoration: underline;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.slide-right-to-left {
  transform: translateX(0px);
  animation-name: slideRightToLeft;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 0.4s;
}

@keyframes slideRightToLeft {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0px);
  }
}

.slide-left-to-right {
  transform: translateX(100%);
  animation-name: slideLeftToRight;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 0.4s;
}

@keyframes slideLeftToRight {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(100%);
  }
}

.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Chrome, Safari and old Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

div.htmx-swapping div {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.fields-section a {
  color: rgb(37 99 235);
  text-decoration-line: underline;
}

.fields-section a:hover {
  color: rgb(30 64 175);
}

.trumbowyg-box,
.trumbowyg-editor {
  min-height: 150px;
}

del,
del * {
  /* bg-red-500 */
  background-color: rgb(239 68 68);
}

ins,
ins * {
  /* bg-green-500 */
  background-color: rgb(34, 197, 94);
  text-decoration: none;
}

/* TODO: Remove these classes and replace them where this has been used */
.my-indicator.list-transition-elements {
  display: none;
}

.htmx-request.my-indicator.list-transition-elements {
  display: inline;
}

.list-transition-elements.htmx-request {
  display: none;
}

.trumbowyg-dark {
  /* tailwind bg-gray-950 */
  background-color: #030712;
  /* tailwind bg-gray-600 */
  border: 1px solid #4b5563;
}

.deletion-diff-dark del,
.deletion-diff-dark del * {
  /* tailwind bg-red-700 */
  background-color: #b91c1c;
}

.addition-diff-dark ins,
.addition-diff-dark ins * {
  /* tailwind bg-green-700 */
  background-color: #4d7c0f;
}

html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Chat Support Expand Style */
.floating-chat.expand {
  max-height: 600px;
  height: 436px;
  border-radius: 12px;
  cursor: auto;
  opacity: 1;
  margin-bottom: 150px;
  margin-right: 12px;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.1);
}

.floating-chat .chat.enter {
  opacity: 1;
  border-radius: 0;
  width: auto;
  height: auto;
}

@media only screen and (max-width: 640px) {
  .floating-chat.expand {
    max-height: 410px;
    margin-bottom: 120px;
  }
}

@media only screen and (max-height: 479px) {
  .floating-chat.expand {
    max-height: 260px;
    margin-bottom: 120px;
  }
}

#message-box::-webkit-scrollbar {
  width: 4px;
}

#message-box::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 4px;
}

/* Onboarding Expand Style */
.floating-onboarding.expand {
  max-height: 584px;
  height: 584px;
  width: 400px;
  border-radius: 8px;
  cursor: auto;
  opacity: 1;
  margin-bottom: 163px;
  margin-right: 84px;
}

.floating-onboarding .onboarding-container.enter {
  opacity: 1;
  border-radius: 0;
  width: auto;
  height: auto;
}

#onboarding-tasks::-webkit-scrollbar {
  width: 4px;
}

#onboarding-tasks::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 4px;
}

@media only screen and (max-width: 640px) {
  .floating-onboarding.expand {
    max-height: 600px;
    max-width: 350px;
    margin-bottom: 120px;
    margin-right: 12px;
  }
}

@media only screen and (max-height: 479px) {
  .floating-onboarding.expand {
    max-height: 300px;
    max-width: 350px;
    margin-bottom: 120px;
    margin-right: 12px;
  }
}

/* Driver.js popover style */
div#driver-popover-item {
  padding: 12px 16px;
  border-radius: 4.5px;
  max-width: 336px;
  box-shadow: 0px 9px 16.5px 2.25px rgba(80, 98, 134, 0.32),
    0px 3px 2.25px -0.75px rgba(106, 124, 160, 0.2),
    0px 0px 0px 0.375px rgba(80, 98, 134, 0.25) inset;
  z-index: 39;
}

/* Driver.js popover style */
div#driver-popover-item .driver-popover-footer button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 67px;
  height: 24px;
  padding: 8px;
  text-shadow: none;
  color: var(--primary-600, #4f46e5);
  font-size: 12px;
  background-color: inherit;
  border-radius: 4px;
  border: 1px solid var(--primary-600, #4f46e5);
  line-height: 16px;
}

/* Driver.js popover style */
div#driver-popover-item .driver-popover-footer .driver-close-only-btn {
  float: left;
}

/* Driver.js overlay style */
div#driver-highlighted-element-stage,
div#driver-page-overlay {
  z-index: 38 !important;
}

/* New loading state control classes */
.fade-in-out-loading-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.htmx-request.transitioned-on-loading.fade-in-out-loading-indicator.fade-in-on-loading {
  opacity: 1;
}

.htmx-request.transitioned-on-loading.fade-out-on-loading {
  opacity: 0;
}

.show-hide-loading-indicator {
  display: none;
  transition: display 500ms ease-in;
}

.htmx-request.transitioned-on-loading.show-hide-loading-indicator.show-on-loading {
  display: block;
}

.htmx-request.transitioned-on-loading.hide-on-loading {
  display: none;
}

/* This prevents a visual bug when tippy tooltips are rendered inside a driver.js highlight */
[data-tippy-root] {
  z-index: 999999 !important;
}

.comments-section::-webkit-scrollbar-thumb,
.deck-wiki-section::-webkit-scrollbar,
.deck-updates-section::-webkit-scrollbar {
  width: 8px;
}

.comments-section::-webkit-scrollbar-thumb,
.deck-wiki-section::-webkit-scrollbar-thumb,
.deck-updates-section::-webkit-scrollbar-thumb {
  background-color: var(--gray-300);
  border-radius: 4px;
}

/* Discourse topic content syles */
.discourse-topic .emoji {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  display: inline-flex;
}

.discourse-topic h1 {
  display: block;
  font-size: 1.5em;
  margin: 30px 0 10px;
  margin-top: 0;
  font-weight: bold;
}

.discourse-topic h2 {
  display: block;
  font-size: 1.3em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.discourse-topic h3 {
  display: block;
  font-size: 1.14em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  margin: 30px 0 10px;
}

.discourse-topic p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.discourse-topic p:first-child {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.discourse-topic ul {
  padding-left: 40px;
  list-style: disc;
}

.discourse-topic ol {
  padding-left: 40px;
  list-style: decimal;
}

.discourse-topic .cooked,
.d-editor-preview {
  word-wrap: break-word;
  line-height: var(--line-height-large);
}

.discourse-topic .md-table {
  overflow-y: auto;
  margin: 1em 0;
}

.discourse-topic table {
  display: table;
  box-sizing: border-box;
  text-indent: initial;
  border-spacing: 2px;
  border-color: gray;
  border-collapse: collapse;
  border-spacing: 0;
}

.discourse-topic thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

.discourse-topic tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
  border-bottom: 1px solid #e9e9e9;
}

.discourse-topic .cooked table thead th,
.d-editor-preview table thead th {
  text-align: left;
  padding-bottom: 2px;
  font-weight: bold;
  color: #222222;
}

.discourse-topic th {
  display: table-cell;
  text-align: left;
}

.discourse-topic tbody {
  border-top: 3px solid #e9e9e9;
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

/* TODO: Replace this card style to tailwind classes */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

.flip-card {
  overflow: hidden;
  perspective: 1000px;
  width: 100%;
}

.flip-card-inner {
  display: grid;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  width: 100%;
}

.flip-card-front,
.flip-card-back {
  grid-area: 1/1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
}

.flip-card-back {
  background-color: red;
  transform: rotateY(180deg);
}

.flip-card-inner.is-flipped {
  transform: rotateY(-180deg);
}

/*** Custom range slider ***/
/* The slider itself */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: #E5E7EB;
  border-radius: 50px;
  height: 0.25rem;
}


/* Track: webkit */
input[type="range"]::-webkit-slider-runnable-track {
  position: relative;
  height: 0.25rem;
  background-color: transparent;
  border-radius: 50px;
}

/* Track: Firefox */
input[type="range"]::-moz-range-track {
  position: relative;
  height: 0.25rem;
  background-color: transparent;
  border-radius: 50px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  appearance: none;
  position: relative;
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #4F46E5;
  width: 16px;
  height: 16px;
  top: 50%;
  translate: 0 -50%;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  appearance: none;
  position: relative;
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #4F46E5;
  width: 16px;
  height: 16px;
}

.ai-slider-tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -3px;
  border-width: 3px;
  border-style: solid;
  border-color: #4F46E5 transparent transparent transparent;
}

/* File uploader drag and drop style */
#file-search-drop-area.dragged-over {
  /* bg-gray-200 */
  background-color: #e5e7eb;
}

/* Checkbox */
input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: white;
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  width: 1rem;
  height: 1rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.25rem;

  display: flex;
  justify-content: space-around;
  align-items: center;

  position: relative;
}

html.dark input[type="checkbox"] {
  background-color: black;
}

input[type="checkbox"]::before {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  transform: scale(0);
  z-index: 1;
}

input[type="checkbox"]::after {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  transform: scale(0);
  border-radius: 0.25rem;
  z-index: 0;
}

input[type="checkbox"]:checked::before {
  background-color: #fff;
  clip-path: path("M12.7074 4.79303C12.8949 4.98056 13.0002 5.23487 13.0002 5.50003C13.0002 5.76519 12.8949 6.0195 12.7074 6.20703L7.70741 11.207C7.51988 11.3945 7.26557 11.4998 7.00041 11.4998C6.73524 11.4998 6.48094 11.3945 6.29341 11.207L4.29341 9.20703C4.11125 9.01843 4.01045 8.76583 4.01273 8.50363C4.01501 8.24143 4.12018 7.99062 4.30559 7.80521C4.491 7.6198 4.74181 7.51463 5.00401 7.51236C5.2662 7.51008 5.5188 7.61087 5.70741 7.79303L7.00041 9.08603L11.2934 4.79303C11.4809 4.60556 11.7352 4.50024 12.0004 4.50024C12.2656 4.50024 12.5199 4.60556 12.7074 4.79303Z");
  transform: scale(1);
}

input[type="checkbox"]:checked::after {
  background-color: #4F46E5;
  transform: scale(1);
}

input[type="checkbox"]:indeterminate::before {
  background-color: #fff;
  clip-path: rect(7px 12px 9px 4px round 1px);
  transform: scale(1);
}

input[type="checkbox"]:indeterminate::after {
  background-color: #4F46E5;
  transform: scale(1);
}

.tags-tree-level-0 {
  padding-left: 20px
}

.tags-tree-level-1 {
  padding-left: 40px
}

.tags-tree-level-2 {
  padding-left: 60px
}

.tags-tree-level-3 {
  padding-left: 80px
}

.tags-tree-level-3 {
  padding-left: 80px;
}

.tags-tree-level-4 {
  padding-left: 100px;
}

.tags-tree-level-5 {
  padding-left: 120px;
}

.tags-tree-level-6 {
  padding-left: 140px;
}

.tags-tree-level-7 {
  padding-left: 160px;
}

.tags-tree-level-8 {
  padding-left: 180px;
}

.tags-tree-level-9 {
  padding-left: 200px;
}

.tags-tree-level-10 {
  padding-left: 220px;
}

.tags-tree-level-11 {
  padding-left: 240px;
}

.tags-tree-level-12 {
  padding-left: 260px;
}

.tags-tree-level-13 {
  padding-left: 280px;
}

.tags-tree-level-14 {
  padding-left: 300px;
}

.tags-tree-level-15 {
  padding-left: 320px;
}

.tags-tree-level-16 {
  padding-left: 340px;
}

.tags-tree-level-17 {
  padding-left: 360px;
}

.tags-tree-level-18 {
  padding-left: 380px;
}

.tags-tree-level-19 {
  padding-left: 400px;
}

.tags-tree-level-20 {
  padding-left: 420px;
}

.tags-tree-level-22 {
  padding-left: 460px;
}

.tags-tree-level-23 {
  padding-left: 480px;
}

.tags-tree-level-24 {
  padding-left: 500px;
}

.tags-tree-level-25 {
  padding-left: 520px;
}

/* Chatbot styles */
.answer-content p {
  margin-bottom: 20px;
}

.answer-content p:not(:is(+ ul, + ol)) {
  margin-bottom: 8px;
}

.answer-content ul,
.answer-content ol {
  margin-left: 24px !important;
}

.answer-content li {
  list-style: disc;
}

#usmle-answer-feedback ul {
  margin-left: 0 !important;
}

#usmle-answer-feedback li {
  list-style: none;
}

.ribbon {
  --f: .5em;
  /* control the folded part*/
  --r: .8em;
  /* control the ribbon shape */

  position: absolute;
  right: calc(-1*var(--f));
  padding-inline: 7px;
  line-height: 1.8;
  background: #15803D;
  border-top: var(--f) solid #052E16;
  border-left: var(--r) solid #15803D;
  box-shadow: 0px 2px 2px 0px #000000;
  clip-path:
    polygon(0 100%, 100% 100%, 100% var(--f), calc(100% - var(--f)) 0,
      calc(100% - var(--f)) var(--f), 0 var(--f),
      var(--r) calc(50% + var(--f)/2));
}


.dark .ribbon {
  background: #86EFAC;
  border-top: var(--f) solid #4ADE80;
  border-left: var(--r) solid #86EFAC;
}

/*
 * This is necessary to override the style of the input placeholder when using tagify in mix mode
 */
.tagify__input[data-placeholder]::before {
  content: attr(data-placeholder);
  /* Tailwind's gray-500 */
  color: var(--gray-500);
  position: absolute;
  pointer-events: none;
}