/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*


/*
Helper CSS classes
*/
.cursor-pointer {
  cursor: pointer;
}

.no-text-decoration:hover {
  text-decoration: none;
}

.select2-selection--multiple .select2-search--inline .select2-search__field {
       width: 250px;
}
.select2-container .select2-selection--single {
  height: auto!important;
  padding: 5px 0;
}

.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
  min-width: 250px!important;
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal!important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  white-space: normal!important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  padding: 0 5px;
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  margin-right: 5px;
}


.card {
  display: inline-block;
  text-decoration: none;
  padding: 10px 10px;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
}
.card:hover {
  border-color: black;
}

.time-interval{
  background: #f5f5f5;
  height: 25px;
  text-align: center
}


.space-4 {
  max-height: 1px;
  min-height: 1px;
  overflow: hidden;
  margin: 4px 0 3px;
}

.space-8 {
  max-height: 1px;
  min-height: 1px;
  overflow: hidden;
  margin: 8px 0 3px;
}

.space-12 {
  max-height: 1px;
  min-height: 1px;
  overflow: hidden;
  margin: 12px 0 3px;
}

.space-24 {
  max-height: 1px;
  min-height: 1px;
  overflow: hidden;
  margin: 24px 0 3px;
}

/*
These modal-fs styles are used for full-screen modals
*/
.modal-fs {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.modal-fs .modal-dialog {
  position: fixed;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.modal-fs .modal-dialog .modal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #EFEFEF;
}
.modal-fs .modal-dialog .modal-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  box-shadow: none;
}
.modal-fs .modal-dialog .modal-content .modal-body {
  position: absolute;
  top: 70px;
  bottom: 0;
  font-size: 15px;
  overflow: auto;
  margin-bottom: 60px;
  padding: 0 15px 0;
  width: 100%;
}
.modal-fs .modal-dialog .modal-content .modal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  background: #f1f3f5;
}

/*
Used for the Contents list on the guided_content player
*/
.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
  border-width: 0 0 0 0;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.guided-content-text {
  font-size: 12px;
  font-weight: 550;
  padding-top: 4px;
}

.content-label-box {
  text-align: center;
  border: 1px solid #ccc;
  border-color: #e4e4e4;
  margin-top: 10px;
  width: auto;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  /*border-width: 1px 0 0 0;*/
  border-width: 0 0 0 0 !important;
  padding: 2px 0px 2px 0px;
}

.list-group.list-group-root > .list-group > .list-group-item {
  border-radius: 0;
  /*border-width: 1px 0 0 0;*/

}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  /*padding-left: 30px;*/
  border-width: 0 0 0 0;
  padding: 2px 0px 2px 20px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  border-width: 0 0 0 0;
  padding: 2px 0px 2px 30px;
}

.list-group-item .glyphicon {
  margin-right: 5px;
}

.observe-counter {
  padding: 50px;
}
.observe-correcting {
  float: right;
}
.observe-reinforcing {
  float: left;
}
.field_margin {
  margin-top:5em;
  margin-bottom: 5em;
}
.qcomments {
  width: 100%;
  /*margin-top: 2em;*/
}
.scaleMargin {
  margin: 3px 10px 0 !important;
}
.green {
  color: #82AD28 !important;
}
.blue-soft-cell {
  background: #4c87b93d;
  color: white !important;
}
.answer-required {
  border-left: solid 10px indianred;
}
.validation-message {
  font-size: 1.5em;
}

.progress-bar {
  background-color: #82AD28;
}

.attachment-section {
  margin-left: 11px;
}

.attachment-upload-form {
  margin-bottom: 0;
}

.add-attachment {
  border: 1px dashed #bbb;
  width: 100%;
  height: 30px;
  padding-left: 7px;
  padding-top: 5px;
}

.badge-white {
  background-color: #FFF !important;
  color: #000 !important;
}

.droptarget {
  margin: 1px;
  width: 300px;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
  vertical-align: middle;
}

.highlight {
  background: #f5f5f5;
}

.highlight-rubric {
  background: #4c87b93d;
}

.rubric-hover {
  border: 3px solid #4c87b9;
}

.rubric-badge {
  border: 1px solid #3598dc;
  color: #3598dc;
  background: white;
  padding: 5px;
  font-size: 12px;
}
.badge-superscript{
  padding-left: 5px;
  font-size: 10px;
  vertical-align: super;
}

.full-scroll {
  width: 100% !important;
  height: 500px;
  overflow: scroll;
}

.tbl-header{
  width:calc(100% - 17px);
  width:-webkit-calc(100% - 17px);
  width:-moz-calc(100% - 17px);
}

.table-fixed tbody {
  overflow: auto;
  width: 100%;
}

.table-fixed tbody > tr > td,
.table-fixed thead > tr > th {
  vertical-align: middle;
  text-align: center;

}

.d-flex {
    display:flex;
}
.d-flex>div {
    float: none;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.row, .item-row {
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

.col, .item-label {
  color: #777;
  text-align: right;
}

/*
* Larger Checkboxes and Radios
*/

.checkbox label:after,
.radio label:after {
  content: '';
  display: table;
  clear: both;
}

.checkbox .cr,
.radio .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em;
}

.radio .cr {
  border-radius: 50% !important;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
  position: absolute;
  font-size: .8em;
  line-height: 0;
  top: 50%;
  left: 20%;
}

.radio .cr .cr-icon {
  margin-left: 0.04em;
}

/* Visually hide the native input but keep it focusable; the styled .cr
   sibling is the visual proxy. visibility:visible overrides Metronic
   components.css's `input[type=checkbox|radio] { visibility:hidden }`.
   WCAG 2.1.1 / 2.4.7 / 1.4.11 — see docs/standards/accessibility.md. */
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
  visibility: visible;
  outline: 0;
}

.checkbox label input[type="checkbox"]:focus-visible + .cr,
.radio label input[type="radio"]:focus-visible + .cr {
  outline: 2px solid #4c87b9;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(76, 135, 185, 0.25);
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
  transform: scale(3) rotateZ(-20deg);
  opacity: 0;
  transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
  transform: scale(1) rotateZ(0deg);
  opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
  opacity: .5;
}

/* Exam-question fieldset: group the prompt + answer controls so screen
   readers announce "Q1 ... required, group, radio button, 1 of 3".
   Visual is unchanged from the previous <div><h3>... pattern.
   WCAG 1.3.1 / 3.3.2 — see docs/standards/accessibility.md. */
.exam-question-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.exam-question-fieldset > legend {
  border: 0;
  margin: 0;
  padding: 0;
  width: auto;
  display: block;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 10px;
}

.disable-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}

/*!
 * bootstrap-vertical-tabs - v1.1.0
 * https://dbtek.github.io/bootstrap-vertical-tabs
 * 2014-06-06
 * Copyright (c) 2014 Ä°smail Demirbilek
 * License: MIT
 */
.tabs-left, .tabs-right {
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd;
}
.tabs-right {
  border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
  float: none;
  margin-bottom: 2px;
}
.tabs-left>li {
  margin-right: -1px;
}
.tabs-right>li {
  margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent;
}

.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
  border-bottom: 1px solid #ddd;
  border-left-color: transparent;
}
.tabs-left>li>a {
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  display:block;
}
.tabs-right>li>a {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}
.vertical-text {
  margin-top:50px;
  border: none;
  position: relative;
}
.vertical-text>li {
  height: 20px;
  width: 120px;
  margin-bottom: 100px;
}
.vertical-text>li>a {
  border-bottom: 1px solid #ddd;
  border-right-color: transparent;
  text-align: center;
  border-radius: 4px 4px 0px 0px;
}
.vertical-text>li.active>a,
.vertical-text>li.active>a:hover,
.vertical-text>li.active>a:focus {
  border-bottom-color: transparent;
  border-right-color: #ddd;
  border-left-color: #ddd;
}
.vertical-text.tabs-left {
  left: -50px;
}
.vertical-text.tabs-right {
  right: -50px;
}
.vertical-text.tabs-right>li {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.vertical-text.tabs-left>li {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

/*
  Learn Slick Slider
*/
.slick-slide {
  margin: 10px 10px 10px 10px;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.product {
  height: 150px;
  padding: 10px;
  border-style: solid;
  border-width: thin;
  border-color: lightgray;
  background: white;
  overflow: hidden;
}

/*
  CKEditor Styles
*/
.roomy-list li {
  padding-bottom: 20px;
}

/*
Styles that Master Teacher uses in there HTML pages
*/
.mt-list {
  padding-bottom: 20px;
  margin-left: 45px;
}

.mt-para-gold {
  background-color: gold;
  height: 60px;
}

.mt-para-purple {
  background-color: gold; height: 60px;
}


.mt-img {
  padding: 5px;
}

.padding-5 {
  padding: 5px;
}

.full-width {
  width: 100% !important;
}

.vertical-center {
  min-height: 300px;
  min-height: 300px;

  display: flex;
  align-items: center;
  text-align: center;
}

.highcharts-title, .highcharts-subtitle, .highcharts-axis-title {
  fill: black;
  text-transform: uppercase;
  font-weight: normal;
}

a.white {
  text-shadow: none;
  color: white;
}


div.alwaysbreak { page-break-before: always; }
div.nobreak:before { clear:both; }
div.nobreak{ page-break-inside: avoid; }

div.page-break {
  display: block;
  clear: both;
  page-break-after: always;
}

.p-4 {
  padding: 4px;
}

.p-8 {
  padding: 8px;
}

.pv-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.mb-16 {
  margin-bottom: 16px;
}

.passwordless-login-btn,
.passwordless-login-btn:active,
.passwordless-login-btn:visited {
  color: #E78C42 !important;
  background-color: white;
  border-color: #E78C42;
}

.passwordless-login-btn:hover {
  background-color: #E78C42;
  color: white !important;
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-primary {
  color: #337ab7;
  border-color: #337ab7;
  background-color: transparent;
}

.btn-outline-primary:hover {
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
}

.btn-default {
  background-color: transparent;
}

.vjs-modal-dialog.vjs-text-track-settings {
  color: #000 !important;
}

.disable {
  opacity: 0.25;
  pointer-events: none;
  filter: blur(4px);
}

/* Styles for the saved filters dropdown in the summary report toolbar */
.saved-filters-dropdown {
  max-height: none;
  max-width: 300px; /* Set max width for the entire dropdown */
}

.saved-filters-scroll-container {
  max-height: 225px; /* About 8 items visible */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  padding-right: 8px; /* Add padding inside the scroll container */
}

.saved-filters-scroll-container ul {
  padding: 0;
}

.saved-filter-item {
  display: flex;
  align-items: center;
}

.saved-filter-item:hover {
  background-color: #f5f5f5;
}

.saved-filter-item > a:first-child {
  flex: 1;
  padding: 3px 5px 3px 20px;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 1.42857143;
  font-weight: normal;
}

.saved-filter-action {
  flex-shrink: 0;
  padding: 3px 0px;
  opacity: 0;
  transition: opacity 0.2s ease;
  text-decoration: none;
}

.saved-filter-item:hover .saved-filter-action {
  opacity: 1;
}

/* ── Role Filter Dropdown ── */

.checkbox-filter {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-left: 8px;
}

.checkbox-filter__btn {
  font-size: 13px;
  padding: 6px 12px;
  line-height: 1.42857143;
  border: 1px solid #e4e4e4;
  background: #fff;
  color: #555;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkbox-filter__btn:hover,
.checkbox-filter__btn:focus {
  border-color: #b3b3b3;
  background: #fff;
  color: #333;
}

.checkbox-filter__btn.checkbox-filter--active {
  border-color: #3598dc;
  color: #3598dc;
  background: #f0f7fd;
}

.checkbox-filter__btn.checkbox-filter--active:hover {
  border-color: #2a7ab5;
  color: #2a7ab5;
  background: #e5f0f8;
}

.checkbox-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3598dc;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
}

.checkbox-filter__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  min-width: 220px;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.checkbox-filter__panel.open {
  display: block;
}

.checkbox-filter__options {
  padding: 6px 0;
  max-height: 280px;
  overflow-y: auto;
}

.checkbox-filter__option {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  margin: 0;
  cursor: pointer;
  font-weight: normal;
  font-size: 13px;
  color: #333;
  transition: background-color 0.1s ease;
}

.checkbox-filter__option:hover {
  background: #f5f7fa;
}

.checkbox-filter__option input[type="checkbox"] {
  margin: 0;
  margin-right: 0;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: #3598dc;
}

.checkbox-filter__check {
  display: none;
}

.checkbox-filter__option-text {
  margin-left: 8px;
  line-height: 1.3;
}

.checkbox-filter__footer {
  border-top: 1px solid #eee;
  padding: 6px 14px;
}

.checkbox-filter__clear {
  font-size: 12px;
  color: #999;
  text-decoration: none;
}

.checkbox-filter__clear:hover {
  color: #3598dc;
  text-decoration: none;
}


/*
Discussion & Comment Components
*/
.c-discussion__header {
  margin-bottom: 16px;
}

.c-discussion__count {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.c-discussion__empty {
  font-size: 14px;
  font-style: italic;
  color: #999;
  margin: 0 0 12px 0;
}

.c-discussion__add-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #3598dc;
  text-decoration: none;
}

.c-discussion__add-link:hover {
  color: #2980b9;
  text-decoration: none;
}

.c-discussion__add-link .fa {
  font-size: 15px;
}

.c-discussion__list {
  margin-bottom: 20px;
}

/* Individual comment */
.c-comment {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.c-comment:last-child {
  border-bottom: none;
}

.c-comment__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
  line-height: 1.4;
}

.c-comment__header-left {
  min-width: 0;
}

.c-comment__header-right {
  position: relative;
  flex-shrink: 0;
}

/* Ellipsis menu trigger */
.c-comment__ellipsis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #999;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  transition: all 0.15s ease;
}

.c-comment__ellipsis-btn:hover {
  color: #555;
  border-color: #ddd;
  background: #f8f9fa;
}

/* Dropdown menu */
.c-comment__menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 140px;
  margin-top: 4px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e1e5ec;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.c-comment__menu--open {
  display: block;
}

.c-comment__menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.c-comment__menu-item:hover {
  background: #f5f6f8;
  text-decoration: none;
  color: #333;
}

.c-comment__menu-item .fa {
  width: 16px;
  text-align: center;
  color: #777;
}

.c-comment__menu-item--danger {
  color: #e74c3c;
}

.c-comment__menu-item--danger:hover {
  background: #fdf2f2;
  color: #e74c3c;
}

.c-comment__menu-item--danger .fa {
  color: #e74c3c;
}

/* button_to generates a form wrapper — make it inline in the menu */
.c-comment__menu form {
  margin: 0;
}

.c-comment__author {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.c-comment__time {
  font-size: 13px;
  color: #999;
  margin-left: 8px;
}

.c-comment__body {
  font-size: 14px;
  color: #444;
  line-height: 1.5;
  margin-bottom: 4px;
}

.c-comment__body p {
  margin: 0 0 0.4em 0;
}

.c-comment__body p:last-child {
  margin-bottom: 0;
}

.c-comment__actions {
  margin-top: 2px;
}

.c-comment__reply-link {
  font-size: 12px;
  color: #3598dc;
  text-decoration: none;
}

.c-comment__reply-link:hover {
  text-decoration: underline;
}

/* Nested replies — indented with subtle left border */
.c-comment__replies {
  margin-left: 20px;
  padding-left: 12px;
  border-left: 2px solid #eee;
}

.c-comment__replies:empty {
  display: none;
}

/* Comment form */
.c-comment-form {
  padding-top: 4px;
}

.c-comment-form__actions {
  text-align: right;
  padding-top: 8px;
}

/* Player close-confirmation popover (Chunk I).
   Anchored next to the trigger by player_close_confirm_controller.js.
   Lives inside a .modal so Chunk D's body-level accessible_modal_controller
   handles focus trap + ARIA. data-backdrop="false" on the modal removes
   the greyout overlay; click-outside-to-dismiss is replicated by the
   controller's document mousedown listener. The triangle arrow is
   pseudo-elements on .modal-content; the controller writes
   --popover-arrow-left so the arrow horizontally tracks the trigger,
   and adds .popover-above when the popover flips above the trigger. */
.player-close-confirm-popover .modal-dialog {
  position: absolute;
  margin: 0;
  width: 280px;
  max-width: 90vw;
}

.player-close-confirm-popover .modal-content {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
}

.player-close-confirm-popover .modal-body {
  padding: 12px 14px;
}

.player-close-confirm-popover .player-close-confirm-prompt {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #000;
  text-align: center;
}

.player-close-confirm-popover .player-close-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
}

/* Triangle arrow — pointing UP when popover sits below the trigger. */
.player-close-confirm-popover .modal-content::before,
.player-close-confirm-popover .modal-content::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

.player-close-confirm-popover .modal-content::before {
  top: -10px;
  left: var(--popover-arrow-left, 20px);
  border-width: 0 10px 10px;
  border-color: transparent transparent rgba(0, 0, 0, 0.25);
}

.player-close-confirm-popover .modal-content::after {
  top: -9px;
  left: calc(var(--popover-arrow-left, 20px) + 1px);
  border-width: 0 9px 9px;
  border-color: transparent transparent #fff;
}

/* Flipped variant — popover sits above the trigger; arrow points DOWN. */
.player-close-confirm-popover.popover-above .modal-content::before {
  top: auto;
  bottom: -10px;
  border-width: 10px 10px 0;
  border-color: rgba(0, 0, 0, 0.25) transparent transparent;
}

.player-close-confirm-popover.popover-above .modal-content::after {
  top: auto;
  bottom: -9px;
  border-width: 9px 9px 0;
  border-color: #fff transparent transparent;
}

/* ----------------------------------------------------------------------------
   Global visible focus indicators — Chunk C (WCAG 2.4.7 Focus Visible)
   ----------------------------------------------------------------------------
   Bootstrap 3 and Metronic both ship `outline: 0`/`outline: none` resets on
   buttons, nav items, anchors, and toggler widgets. The rules below
   reinstate a visible focus ring for keyboard users without affecting
   mouse interaction. Color matches Chunk N (radio/checkbox focus ring) so
   the keyboard-focus identity is consistent across the app — see
   docs/standards/accessibility.md "Focus indicators".

   Color #4c87b9 + 2px offset gives ≥3:1 contrast against the app's
   light backgrounds (white, .well grey, .card white). The companion
   4px rgba halo (used on cards + togglers, matches Chunk N) doubles the
   apparent ring on busy backgrounds without making the indicator garish
   on quiet ones.
   ---------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid #4c87b9;
  outline-offset: 2px;
}

/* Bootstrap 3 specificity overrides. `.btn:focus`/`.nav-link:focus` etc.
   are declared with `outline: none` in BS3's stylesheet, which beats our
   element-level `:focus-visible` rule on specificity alone. !important is
   the simplest tool that survives the vendor cascade — limited to focus
   styles so it stays narrowly scoped. */
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #4c87b9 !important;
  outline-offset: 2px !important;
}

/* Cards (dashboard, transcripts, certifications). Smoke test surfaced
   that the current text-darken on focus is too subtle for keyboard
   users — a box-shadow ring around the card body is unmistakable. */
.card:focus-visible,
.card:focus-within {
  outline: 2px solid #4c87b9 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(76, 135, 185, 0.25) !important;
}

/* Chunk E added `role="button" tabindex="0"` to elements that aren't
   `<button>` or `<a>` — the BS3 `.btn` override above doesn't catch
   them. Cover the new tab stops: sidebar toggler in `_page_header.html.erb`,
   chevron toggles in `my_certifications/_rows.html.erb` (and the `ux/`
   sibling). */
[role="button"]:focus-visible {
  outline: 2px solid #4c87b9 !important;
  outline-offset: 2px !important;
}

/* Metronic ships `.menu-toggler>span { outline: 0 !important }` plus
   `.menu-toggler` resets that leak through to the toggler element
   itself. Target the toggler wrappers explicitly so the ring lands on
   the focusable element, not the inner span. */
.menu-toggler.sidebar-toggler:focus-visible,
.menu-toggler.responsive-toggler:focus-visible {
  outline: 2px solid #4c87b9 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(76, 135, 185, 0.25);
}

/* ---- Card-wrapping anchors -------------------------------------------------
   Many tiles in the app wrap a block-level card inside an inline <a>. By
   default the outline traces the anchor's inline line boxes instead of the
   visible card rectangle, producing ragged or partial focus rings. Forcing
   these specific anchors to `display: block` makes the ring trace the card. */
a:has(> .list-group-item),
a:has(> .card) {
  display: block;
}

/* ---- Player sidebar accordion (Chunk I2 markup) ----------------------------
   Sidebar uses tightly stacked .list-group-item rows. Outer offset on the
   focus ring bleeds into adjacent rows; use an inset ring so the indicator
   sits inside the focused row. Force section anchors to block so their ring
   traces a single row instead of inline line boxes. */
.list-group-root .list-group-item > a {
  display: block;
}
.list-group-root .list-group-item:focus-visible,
.list-group-root .list-group-item > a:focus-visible {
  outline: 2px solid #4c87b9 !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* ---- Transcript cards (My Transcripts surface) -----------------------------
   `.mt-element-ribbon` wraps the card body and sets `overflow: hidden`, which
   clips any outline on the inner <a> link — the visible result is a thin band
   where the outline gets cropped. Paint the ring on the wrapper instead and
   suppress the inner anchor ring so only the card outline shows. Inset offset
   keeps the ring visible despite the wrapper's overflow clipping. */
.mt-element-ribbon:has(:focus-visible) {
  outline: 2px solid #4c87b9 !important;
  outline-offset: -2px !important;
  box-shadow: inset 0 0 0 4px rgba(76, 135, 185, 0.25);
}
.mt-element-ribbon:has(:focus-visible) a:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* ---- Dashboard "Continue Content" widget cards -----------------------------
   Slick carousel cards (`[data-slick-target="products"] > .list-group-item`)
   wrap a single inner <a> for the play link. Bubble the focus ring to the
   card wrapper so the whole tile reads as the focus target. */
[data-slick-target="products"] .list-group-item:has(:focus-visible) {
  outline: 2px solid #4c87b9 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(76, 135, 185, 0.25);
}
[data-slick-target="products"] .list-group-item:has(:focus-visible) a:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/*
 * TipTap rich-text editor styles.
 *
 * Two distinct surfaces share this file:
 *
 *   1. tiptap-editor-wrapper -- the full editor used in comments and
 *      observation forms (toolbar with bold/italic/heading/templates/
 *      mentions/colors, floating toolbar, template picker panel,
 *      mention chips and suggestion dropdown). Backed by
 *      app/javascript/controllers/tiptap_editor_controller.js.
 *
 *   2. tiptap-rich-field -- the narrow admin-form editor used by the
 *      email-branding modal (B/I/Link toolbar, link popover, placeholder).
 *      Backed by app/javascript/controllers/tiptap_rich_field_controller.js.
 *
 * Both share TipTap and ProseMirror under the hood, but their toolbars,
 * extension sets, and visual chrome are independent.
 */


/*
 * tiptap-editor-wrapper -- full editor.
 */
.tiptap-editor-wrapper {
  position: relative;
  border: 1px solid #e1e5ec;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.15s ease;
}

.tiptap-editor-wrapper--focused {
  border-color: #3598dc;
}

/* Compact variant for inline comments and replies */
.tiptap-editor-wrapper--compact .tiptap-editor-content {
  padding: 8px 12px;
  min-height: 60px;
}

.tiptap-editor-wrapper--compact .tiptap-editor-content .ProseMirror {
  min-height: 44px;
}

/* Floating toolbar — positioned above the editor, overlapping content above */
.tiptap-toolbar-float {
  position: absolute;
  bottom: 100%;
  left: -1px;
  right: -1px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.tiptap-toolbar--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Allow the floating toolbar to escape the modal's overflow boundary.
   Scoped to modals containing a tiptap editor to avoid affecting other modals.
   Remove the right constraint so the toolbar sizes to its content
   and floats freely above all elements. */
.modal.in:has(.tiptap-editor-wrapper) {
  overflow: visible;
}

.modal .tiptap-toolbar-float {
  right: auto;
}

/* Template picker panel — split layout */

.tiptap-template-panel {
  width: 380px;
  right: 0;
  left: auto;
  padding: 0;
}

.tiptap-template-search {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid #e8e8e8;
  font-size: 12px;
  color: #333;
  outline: none;
  background: #fafbfc;
  border-radius: 4px 4px 0 0;
}

.tiptap-template-search::placeholder {
  color: #aaa;
}

.tiptap-template-body {
  display: flex;
  max-height: 280px;
}

.tiptap-template-sidebar {
  width: 120px;
  flex-shrink: 0;
  border-right: 1px solid #e8e8e8;
  overflow-y: auto;
  padding: 6px;
}

.tiptap-template-filter-group {
  margin-bottom: 6px;
}

.tiptap-template-filter-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: #999;
  letter-spacing: 0.5px;
  padding: 2px 0 4px;
}

.tiptap-template-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  font-size: 10px;
  color: #666;
  cursor: pointer;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiptap-template-chip:hover {
  background: #f0f3f7;
  color: #333;
}

.tiptap-template-chip.active {
  background: #e8f0fe;
  border-color: #3598dc;
  color: #1a73e8;
}

.tiptap-template-chip.active .tiptap-template-sentiment {
  border: 1px solid rgba(26, 115, 232, 0.4);
}

.tiptap-template-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiptap-template-list {
  flex: 1;
  overflow-y: auto;
}

.tiptap-template-separator {
  border-top: 1px solid #e0e0e0;
  margin: 8px 0 4px;
  padding: 4px 12px 0;
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mention chips (inline in editor and show views) */
.mention-chip,
span[data-type="mention"] {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: baseline;
  background: #e8f0fe;
  color: #1a73e8;
}

.mention-chip[data-id="reinforcement"],
span[data-type="mention"][data-id="reinforcement"] {
  background: #e6f4ea;
  color: #1e7e34;
}

.mention-chip[data-id="refinement"],
span[data-type="mention"][data-id="refinement"] {
  background: #fef3e0;
  color: #e65100;
}

/* Mention suggestion dropdown */
.mention-suggestion-popup {
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid #e1e5ec;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
  min-width: 180px;
}

.mention-suggestion-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: #555;
}

.mention-suggestion-item:hover,
.mention-suggestion-item.is-selected {
  background: #f0f3f7;
  color: #222;
}

.mention-suggestion-item--sentiment {
  font-weight: 500;
}

.mention-suggestion-separator {
  border-top: 1px solid #e1e5ec;
  margin: 2px 0;
}

.mention-suggestion-empty {
  padding: 8px 12px;
  color: #999;
  font-size: 12px;
}

.tiptap-template-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiptap-template-item:hover {
  background: #f0f3f7;
  color: #222;
}

.tiptap-template-sentiment {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tiptap-template-sentiment--reinforcement { background: #2f9e44; }
.tiptap-template-sentiment--refinement { background: #e8590c; }
.tiptap-template-sentiment--neutral { background: #adb5bd; }

.tiptap-template-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiptap-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1px;
  padding: 5px 6px;
  background: #fff;
  border: 1px solid #ccd1d9;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.tiptap-toolbar-group {
  display: flex;
  align-items: center;
  gap: 1px;
}

.tiptap-toolbar-separator {
  width: 1px;
  height: 18px;
  background: #e1e5ec;
  margin: 0 4px;
  flex-shrink: 0;
}

.tiptap-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: none;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #555;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.tiptap-toolbar-btn:hover {
  background: #edf0f5;
  color: #333;
}

.tiptap-toolbar-btn .fa {
  font-size: 13px;
}

.tiptap-toolbar-btn--heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.5px;
  width: 26px;
}

/* Dropdown panels (color, size) */
.tiptap-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #ccd1d9;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  padding: 6px;
}

.tiptap-panel--open {
  display: block;
}

.tiptap-panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.tiptap-color-swatch {
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.tiptap-color-swatch:hover {
  border-color: #333;
  transform: scale(1.15);
}

.tiptap-color-swatch--reset {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiptap-panel-list {
  display: flex;
  flex-direction: column;
  min-width: 60px;
}

.tiptap-size-btn {
  display: block;
  width: 100%;
  padding: 3px 10px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  border-radius: 2px;
}

.tiptap-size-btn:hover {
  background: #edf0f5;
  color: #333;
}

/* Editor content area */
.tiptap-editor-content {
  padding: 10px 14px;
  min-height: 100px;
}

.tiptap-editor-content .ProseMirror {
  outline: none;
  min-height: 80px;
}

.tiptap-editor-content .ProseMirror p {
  margin: 0 0 0.5em 0;
}

.tiptap-editor-content .ProseMirror h1 {
  font-size: 1.6em;
  margin: 0.5em 0 0.3em;
}

.tiptap-editor-content .ProseMirror h2 {
  font-size: 1.4em;
  margin: 0.5em 0 0.3em;
}

.tiptap-editor-content .ProseMirror h3 {
  font-size: 1.2em;
  margin: 0.5em 0 0.3em;
}

.tiptap-editor-content .ProseMirror ul,
.tiptap-editor-content .ProseMirror ol {
  padding-left: 1.5em;
  margin: 0.3em 0;
}

.tiptap-editor-content .ProseMirror li {
  margin: 0.1em 0;
}

.tiptap-editor-content .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: #adb5bd;
  pointer-events: none;
  float: left;
  height: 0;
}


/*
 * tiptap-rich-field -- narrow admin-form editor (shared/tiptap/_field partial).
 */
.tiptap-rich-field {
  padding: 0;
  overflow: visible;
  cursor: text;
  background: #fff;
  border: 1px solid #c2cad8;
  border-radius: 2px;
  display: block;
  height: auto;
  min-height: 0;
  position: relative;
}

.tiptap-rich-field--focused {
  border-color: #5b9bd1;
  box-shadow: 0 0 0 1px #5b9bd1;
}

.tiptap-rich-field__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid #eaedf2;
  background: #f7f8fa;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.tiptap-rich-field__toolbar-button {
  min-width: 30px;
  padding: 3px 8px;
}

.tiptap-rich-field__toolbar-button.is-active {
  background: #e1e5ec;
  color: #333;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* "Use starter footer" link styled distinctly from format toolbar buttons. */
.tiptap-rich-field__toolbar-starter {
  margin-left: auto !important;
  color: #5b9bd1;
  text-decoration: none;
}

.tiptap-rich-field__toolbar-starter:hover {
  color: #3478b8;
  text-decoration: underline;
}

.tiptap-rich-field__toolbar-starter .fa {
  margin-right: 4px;
}

/* Two-field link popover (Text + URL) anchored under the link toolbar button. */
.tiptap-rich-field__link-popover {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 10;
  width: 280px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #c2cad8;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.tiptap-rich-field__link-popover-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.tiptap-rich-field__link-popover-label {
  width: 40px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #555;
}

.tiptap-rich-field__link-popover-input {
  flex: 1;
  height: 28px;
  padding: 4px 8px;
  font-size: 13px;
}

.tiptap-rich-field__link-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

.tiptap-rich-field__link-popover-remove {
  margin-right: auto;
}

.tiptap-rich-field__editor {
  padding: 10px 12px;
  min-height: 180px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.tiptap-rich-field__editor .ProseMirror {
  outline: none;
  min-height: 100px;
}

.tiptap-rich-field__editor .ProseMirror p {
  margin: 0 0 8px;
}

.tiptap-rich-field__editor .ProseMirror p:last-child {
  margin-bottom: 0;
}

/* Placeholder text shown when the editor is empty. Absolute-positioned so
   it visually overlays the empty paragraph without consuming layout flow
   -- otherwise the cursor sits below the placeholder and the user can't
   type "into" it. pointer-events: none lets clicks pass through to the
   editor surface so clicking anywhere in the field focuses the cursor.
   white-space: pre-line preserves \n line breaks in multi-line
   placeholders (e.g., the system-default footer). */
.tiptap-rich-field__editor .ProseMirror p.is-editor-empty:first-child {
  position: relative;
}

.tiptap-rich-field__editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #99a0ad;
  pointer-events: none;
  white-space: pre-line;
  font-style: italic;
}

/*
 * Email Branding modal styles -- wider modal-lg, two-column body (form on
 * the left, live preview on the right), label-above-fields layout. Used
 * only by app/views/reseller/email_branding/_modal.html.erb.
 *
 * The form column hosts a TipTap rich-field for the footer; that field's
 * own styles live in _tiptap.css.
 */

.modal-content .email-branding-intro {
  margin-bottom: 18px;
  font-size: 13px;
}

.email-branding-grid {
  margin-left: -10px;
  margin-right: -10px;
}

.email-branding-form,
.email-branding-preview-column {
  padding-left: 10px;
  padding-right: 10px;
}

.email-branding-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
  margin-bottom: 2px;
}

.email-branding-sublabel {
  margin: 0 0 8px;
  color: #888;
  font-size: 12px;
}

.email-branding-logo-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.email-branding-logo-thumb {
  flex: 0 0 64px;
  height: 64px;
  border: 1px solid #e1e5ec;
  border-radius: 3px;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.email-branding-logo-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.email-branding-logo-empty,
.email-branding-logo-missing {
  color: #b9bfc8;
  font-size: 22px;
}

.email-branding-logo-missing {
  color: #d28f37;
}

.email-branding-logo-input {
  flex: 1 1 auto;
  min-width: 0;
}

.email-branding-default {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.email-branding-default strong {
  color: #555;
}

/* Preview column: faint email-frame mock that re-renders on editor update. */
.email-branding-preview-column {
  border-left: 1px solid #eaedf2;
}

.email-branding-preview-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
  margin-bottom: 8px;
}

.email-branding-preview-label .fa {
  margin-right: 4px;
}

.email-branding-preview-frame {
  border: 1px solid #e1e5ec;
  border-radius: 3px;
  background: #fdfdfd;
  padding: 16px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #444;
}

.email-branding-preview-logo {
  margin-bottom: 10px;
  min-height: 24px;
}

.email-branding-preview-logo img {
  max-width: 150px;
  max-height: 50px;
}

.email-branding-preview-logo-placeholder {
  display: inline-block;
  padding: 4px 8px;
  background: #f1f3f6;
  color: #99a0ad;
  font-size: 11px;
  border-radius: 2px;
}

.email-branding-preview-body {
  color: #444;
  margin: 0 0 14px;
}

.email-branding-preview-body p {
  margin: 0 0 8px;
}

.email-branding-preview-body p:last-child {
  margin-bottom: 0;
}

.email-branding-preview-frame hr {
  border: 0;
  border-top: 1px solid #e1e5ec;
  margin: 12px 0;
}

.email-branding-preview-footer p {
  margin: 0 0 6px;
}

.email-branding-preview-footer p:last-child {
  margin-bottom: 0;
}

.email-branding-preview-signoff {
  color: #99a0ad;
  font-size: 11px;
  margin: 10px 0 0;
}

/* Bootstrap 3 modal-lg sometimes needs a nudge for two-column body. */
.modal-dialog.modal-lg {
  width: 90%;
  max-width: 940px;
}

@media (max-width: 991px) {
  .email-branding-preview-column {
    border-left: 0;
    border-top: 1px solid #eaedf2;
    margin-top: 16px;
    padding-top: 16px;
  }
}


/*# sourceMappingURL=application-0b54ff13.css.map*/