/* öl haccp tab CSS */

.tab-pill{white-space:nowrap;padding:.4rem .7rem;border:1px solid #e5e7eb;border-radius:.75rem;background:#fff;font-size:.875rem}
.tab-pill.active{background:#eef2ff;border-color:#6366f1}
.yn{display:inline-flex;border:1px solid #e5e7eb;border-radius:.6rem;overflow:hidden}
.yn button{padding:.45rem .8rem;font-size:.9rem}
.yn .on{background:#ecfdf5}
.yn .off{background:#fff}
.yn button.active{background:#10b981;color:#fff}
.input-sm{padding:.35rem .5rem;border:1px solid #e5e7eb;border-radius:.5rem}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 640px) {
  #page-training .rounded-\[32px\] {
    border-radius: 0 !important;
  }

  #trainingHeaderProgressBar {
    width: 100%;
    overflow-x: auto;
  }

  #trainingTopTabs > div {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #trainingTopTabs button {
    justify-content: center;
  }
}