.canvas{
    width:80%;
    height:300px;
    border: 1px lightslategrey solid;
    margin: 30px;
}

.steps-listview { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.steps-listview li { margin: 5px 0; padding: 5px; font-size: 1.2em; height: 1.5em; }
.steps-listview li div {  display:inline; margin-left:0px; padding-right: 5px;  }
html>body .steps-listview li { height: 100%; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
input{
    color:black !important;
}

.steps-edit,
.steps-duplicate,
.steps-delete{
    cursor: pointer;
}

.steps-name-js{
    width:150px;
}
.steps-border{
    border: 2px lightblue solid;
}
.steps-name-js:hover{
    cursor:pointer;
}
.gridster * {
    margin:0;
    padding:0;
}

ul {
    list-style-type: none;
}


/*/
/* demo
/*/


body {
    font-size: 16px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #444;
    margin: 30px 40px;
}

.controls {
    margin-bottom: 20px;
}

/*/
/* gridster
/*/

.gridster ul {
    background-color: #EFEFEF;
}

.gridster li {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    line-height: 100%;
}


.gridster {
    margin: 0 auto;

    opacity: .8;

    -webkit-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -o-transition: opacity .6s;
    -ms-transition: opacity .6s;
    transition: opacity .6s;
}

.gridster .gs-w {
    background: #DDD;
    cursor: pointer;
}

.gridster .player {
    background: #BBB;
}


.gridster .preview-holder {
    border: none!important;
    background: red!important;
}

/* === Flip Card ========================================================= */
.flipcard-grid{
  display:flex; 
  flex-wrap:wrap; 
  gap:1.25rem; 
  justify-content:center;
  margin-bottom: 25px;
}

/* container */
.flip-card{
  width:23rem;     /* 320 px */
  max-width:100%;
  height:18rem;    /* 256 px */
  perspective:1000px;
  cursor:pointer;
}

/* inner 3-D frame */
.flip-card-inner{
  position:relative;
  width:100%; height:100%;
  transition:transform .7s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}

/* flip on click – JS toggles .flipped */
.flip-card.flipped .flip-card-inner{transform:rotateY(180deg);}

/* shared face */
.flip-card-face{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem 1.5rem;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  background:#ffffff;
  backface-visibility:hidden;
}

/* back face rotated */
.flip-card-back{transform:rotateY(180deg);}

/* text + hint */
.fc-text{font-size:1.325rem; line-height:1.55; font-weight:500; color:#1f2937; text-align:center;}
.fc-hint{margin-top:3rem; font-size:.8125rem; color:#9ca3af;}

/* responsive tweak */
@media(max-width:768px){
  .flip-card{width:23rem; height:18rem;}
}

/* === smart accordion style ========================================= */
.smart-accordion {
  margin-bottom: 25px;
}

.smart-accordion .acc-card{
  border: 1px solid rgba(147, 117, 241, .15);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.smart-accordion .acc-header{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 18px;
  background: linear-gradient(90deg, #ffffff 0%, #0088cc 100%);
  cursor:pointer;
  transition: background .3s;
}

.smart-accordion .acc-header.open{
  background: linear-gradient(90deg, #ffffff 0%, #0088cc 100%);
}

.coursly-ai .smart-accordion .acc-header{
  background: linear-gradient(90deg, #ffffff 0%, #d2dfff 40%, #a0b9ff 100%);
}

.coursly-ai .smart-accordion .acc-header.open{
  background: linear-gradient(90deg, #ffffff 0%, #d2dfff 40%, #a0b9ff 100%);
}

.smart-accordion .acc-title{
  margin:0; font-size: 18px; font-weight:600; color:#272d4d;
}

.smart-accordion .acc-arrow{
  font-size:16px; color:#3a6dff; transition:transform .3s;
}

.smart-accordion .acc-header.open .acc-arrow{
  transform: rotate(180deg);
}

.smart-accordion .acc-body{
  padding:18px 22px; line-height:1.55; background:#ffffff;
}

/* smooth height transition */
.smart-accordion .acc-collapse{ transition:height .35s ease; }

/* ======== SMART TABS ================================================= */
.smart-tabs{ 
  padding:0 10px 20px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06); 
}

/* STRIP ------------------------------------------------------------- */
.smart-tabs-nav{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;          /* make all children same height */
  /* gap:8px; */
  margin:0; padding:0; list-style:none;
  overflow:visible;             /* let gradient underline show */
}

/* each li becomes a flex box so the <a> can stretch */
.smart-tabs-nav > li{
  flex:1 1 0;
  display:flex;
}

/* kill bootstrap defaults & remove gray box */
.smart-tabs-nav > li > a{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;                  /* stretch to tallest tab */
  padding:12px 14px;
  line-height:1.35;
  text-align:center;
  white-space:normal;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#6b7280;                /* slate-500 */
  position:relative;
  cursor:pointer;
}

/* hover */
.smart-tabs-nav > li > a:hover::before{
  content:"";
  position:absolute; inset:0;
  background: unset;
  border-radius:6px;
  z-index:-1;
}

.coursly-ai .smart-tabs-nav > li > a:hover::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg,#eff3ff 0%, #ffffff 80%);
  border-radius:6px;
  z-index:-1;
}

/* active tab: purple text + gradient underline */
.smart-tabs-nav > li.active > a,
.smart-tabs-nav > li.active > a:focus{
  color:#0088cc !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.coursly-ai .smart-tabs-nav > li.active > a,
.coursly-ai .smart-tabs-nav > li.active > a:focus{
  color:#3a6dff !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.smart-tabs-nav > li.active > a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:3px;
  background: #0088cc;
  border-radius:0 0 3px 3px;
}

.coursly-ai .smart-tabs-nav > li.active > a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:3px;
  background:linear-gradient(180deg,rgba(58, 109, 255, 1) 100%, rgba(58, 109, 255, 1) 100%);
  border-radius:0 0 3px 3px;
}

.smart-tabs-nav > li.active > a:hover::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:3px;
  background: #0088cc;
  border-radius:0 0 3px 3px;
}

.coursly-ai .smart-tabs-nav > li.active > a:hover::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:3px;
  background: linear-gradient(180deg,rgba(58, 109, 255, 1) 100%, rgba(58, 109, 255, 1) 100%);
  border-radius:0 0 3px 3px;
}

/* optional soft wash behind active text (remove if you don't want it) */
.smart-tabs-nav > li.active > a::before{
  content:"";
  position:absolute; inset:0;
  background: unset;
  border-radius:6px;
  z-index:-1;
}

.coursly-ai .smart-tabs-nav > li.active > a::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg,#eff3ff 0%, #ffffff 80%);
  border-radius:6px;
  z-index:-1;
}

/* panel stays the same, minus top border because tabs no longer have one */
.smart-tabs-body{
  border:1px solid #e5e7eb;
  border-top:none;
  border-radius:0 0 8px 8px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  padding:18px 22px;
  line-height:1.55;
}

.smart-tabs-nav.nav::before {
  display: none; /* remove the default border */
}

/* mobile: stack tabs */
@media(max-width:480px){
  .smart-tabs-nav{ 
    flex-direction:column; 
    gap:4px; 
  }

  .smart-tabs-nav li a{ 
    text-align: left;
  }
  .smart-tabs-nav > li > a{
    border-radius:6px;
    height:auto;
  }
  .smart-tabs-nav > li.active > a::after{ display:none; }
}

@media(max-width:768px){
  .smart-tabs-nav{ 
    flex-direction:column; 
    gap:4px; 
  }

  .smart-tabs-nav li a{ 
    text-align: left;
  }
}

.embed-video-wrapper {
  margin-bottom: 25px;
}

.embed-video-responsive{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.embed-video-responsive iframe{
  position:absolute; top:0; left:0; width:100%; height:100%;
}

.coursly-ai .flipcard-grid, .coursly-ai .smart-tabs-wrapper, 
.coursly-ai .smart-accordion-wrapper, .coursly-ai .embed-video-wrapper,
.coursly-ai .smart-table-div {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

.coursly-ai .smart-table-div .smart-table {
  padding-left: 15px;
  padding-right: 15px;
}

.smart-table-wrapper .smart-table-div {
  margin-bottom: 25px;
}

.coursly-ai .smart-table-wrapper .smart-table-div {
  padding-bottom: 0px;
}

/* ═════ MULTI-CHOICE · smart style  (fires only if block has .coursly-ai) ═════ */

/* —— scope helper: any .multiple-choice-display that contains .coursly-ai —— */

/* ── question line -------------------------------------------------- */
.coursly-ai .multiple-choice-display .question-data h3{
  margin:0 0 0;
  font-size:22px;font-weight:700;color:#272d4d;
  padding-bottom:0;
}

/* ── answers list --------------------------------------------------- */
.coursly-ai .multiple-choice-display ul.answers-data{list-style:none;margin:0;padding:0;}
.coursly-ai .multiple-choice-display ul.answers-data li{
  position:relative;padding:0 0 0 36px;border-radius:6px;
  transition:background .25s;
}
.coursly-ai .multiple-choice-display ul.answers-data label{
  display:block;cursor:pointer;color:#374151;line-height:1.45;
}
/* custom checkbox */
/* .coursly-ai .multiple-choice-display ul.answers-data input[type=checkbox]{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:20px;height:20px;margin:0;opacity:0;cursor:pointer;
}
.coursly-ai .multiple-choice-display ul.answers-data label::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border:2px solid #cbd5e1;border-radius:4px;
  transition:background .25s,border-color .25s;
}
.coursly-ai .multiple-choice-display ul.answers-data input[type=checkbox]:checked + label::before{
  border-color:var(--mc-purple);
  background:var(--mc-purple) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3 3 7-7' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/10px;
}
.coursly-ai .multiple-choice-display ul.answers-data input[type=checkbox]:checked + label{
  color:var(--mc-purple);
} */
/* @media (hover:hover){
  .coursly-ai .multiple-choice-display ul.answers-data li:hover{background:#dee6fd;}
} */

/* ── panel body spacing -------------------------------------------- */
.coursly-ai .multiple-choice-display .panel-body,
.coursly-ai .branching-display .panel-body
.coursly-ai .slider-display-template .panel-body,
.coursly-ai .fill-in-dropdown-learner .panel-body,
.coursly-ai .popup-display-template .panel-body,
.coursly-ai .puzzle-display-template .panel-body,
.coursly-ai .drag-drop-display-template .panel-body,
.coursly-ai .switch-image-display-template .panel-body,
.coursly-ai .video-mashup-display .panel-body,
.coursly-ai .dictation-display .panel-body,
.coursly-ai .fill-in-blank-learner .panel-body {
  border:none !important;
  padding:10px 24px 0 24px;
}

/* ── action buttons ------------------------------------------------- */
.coursly-ai .multiple-choice-display .check-js,
.coursly-ai .multiple-choice-display .refresh-js{min-width:120px;font-weight:600;}

.coursly-ai .multiple-choice-display .check-js{
  background:var(--mc-purple);border-color:var(--mc-purple);
}
.coursly-ai .multiple-choice-display .check-js:hover{
  background:#3a6dff;border-color:#3a6dff;
}
.coursly-ai .multiple-choice-display .refresh-js{
  background:#f3f4f6;border-color:#f3f4f6;color:#374151;
}
.coursly-ai .refresh-js:hover{
  background:#e5e7eb;border-color:#e5e7eb;
}

.coursly-ai .multiple-choice-display,
.coursly-ai .branching-display,
.coursly-ai .slider-display-template,
.coursly-ai .fill-in-dropdown-learner,
.coursly-ai .popup-display-template,
.coursly-ai .puzzle-display-template,
.coursly-ai .drag-drop-display-template,
.coursly-ai .switch-image-display-template,
.coursly-ai .video-mashup-display,
.coursly-ai .dictation-display,
.coursly-ai .fill-in-blank-learner {
  --mc-purple:#3a6dff;
  border:none;border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.coursly-ai div:has(> .multiple-choice-display),
.coursly-ai div:has(> .branching-display),
.coursly-ai div:has(> .slider-display-template),
.coursly-ai div:has(> .fill-in-dropdown-learner),
.coursly-ai div:has(> .popup-display-template),
.coursly-ai div:has(> .puzzle-display-template),
.coursly-ai div:has(> .drag-drop-display-template),
.coursly-ai div:has(> .switch-image-display-template),
.coursly-ai div:has(> .video-mashup-display),
.coursly-ai div:has(> .dictation-display),
.coursly-ai div:has(> .fill-in-blank-learner) {
  border: unset;
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
}

/* ── hide authoring-only chrome ------------------------------------ */
.coursly-ai .multiple-choice-display .remove-block-controls,
.coursly-ai .multiple-choice-display i.fa-trash,
.coursly-ai .multiple-choice-display i.fa-pencil,
.coursly-ai .multiple-choice-display i.fa-arrows,
.coursly-ai .multiple-choice-display i.fa-repeat,
.coursly-ai .multiple-choice-display i.fa-rotate-left,
.coursly-ai .multiple-choice-display i.fa-rotate-right,
.coursly-ai .multiple-choice-display i.glyphicon-trash,
.coursly-ai .multiple-choice-display i.glyphicon-pencil,
.coursly-ai .multiple-choice-display i.glyphicon-move,
.coursly-ai .multiple-choice-display i.glyphicon-repeat,
.coursly-ai .multiple-choice-display .panel-heading-icon,
.coursly-ai .multiple-choice-display .panel-heading,
.coursly-ai .multiple-choice-display .panel-title,
.coursly-ai .multiple-choice-display .panel-subtitle,
.coursly-ai .multiple-choice-display .interactive-display-head-title,
.coursly-ai .branching-display .remove-block-controls,
.coursly-ai .branching-display .panel-heading-icon,
.coursly-ai .branching-display .panel-heading,
.coursly-ai .branching-display .panel-title,
.coursly-ai .branching-display .panel-subtitle,
.coursly-ai .branching-display .interactive-display-head-title,
.coursly-ai .slider-display-template .remove-block-controls,
.coursly-ai .slider-display-template .panel-heading-icon,
.coursly-ai .slider-display-template .panel-heading,
.coursly-ai .slider-display-template .panel-title,
.coursly-ai .slider-display-template .panel-subtitle,
.coursly-ai .slider-display-template .interactive-display-head-title,
.coursly-ai .fill-in-dropdown-learner .remove-block-controls,
.coursly-ai .fill-in-dropdown-learner .panel-heading-icon,
.coursly-ai .fill-in-dropdown-learner .panel-heading,
.coursly-ai .fill-in-dropdown-learner .panel-title,
.coursly-ai .fill-in-dropdown-learner .panel-subtitle,
.coursly-ai .fill-in-dropdown-learner .interactive-display-head-title,
.coursly-ai .popup-display-template .remove-block-controls,
.coursly-ai .popup-display-template .panel-heading-icon,
.coursly-ai .popup-display-template .panel-heading,
.coursly-ai .popup-display-template .panel-title,
.coursly-ai .popup-display-template .panel-subtitle,
.coursly-ai .popup-display-template .interactive-display-head-title,
.coursly-ai .puzzle-display-template .remove-block-controls,
.coursly-ai .puzzle-display-template .panel-heading-icon,
.coursly-ai .puzzle-display-template .panel-heading,
.coursly-ai .puzzle-display-template .panel-subtitle,
.coursly-ai .puzzle-display-template .interactive-display-head-title,
.coursly-ai .fill-in-blank-learner .remove-block-controls,
.coursly-ai .fill-in-blank-learner .panel-heading-icon,
.coursly-ai .fill-in-blank-learner .panel-heading,
.coursly-ai .fill-in-blank-learner .panel-title,
.coursly-ai .fill-in-blank-learner .panel-subtitle,
.coursly-ai .fill-in-blank-learner .interactive-display-head-title,
.coursly-ai .dictation-display .remove-block-controls,
.coursly-ai .dictation-display .panel-heading-icon,
.coursly-ai .dictation-display .panel-heading,
.coursly-ai .dictation-display .panel-title,
.coursly-ai .dictation-display .panel-subtitle,
.coursly-ai .dictation-display .interactive-display-head-title,
.coursly-ai .video-mashup-display .remove-block-controls,
.coursly-ai .video-mashup-display .panel-heading-icon,
.coursly-ai .video-mashup-display .panel-heading,
.coursly-ai .video-mashup-display .panel-title,
.coursly-ai .video-mashup-display .panel-subtitle,
.coursly-ai .video-mashup-display .interactive-display-head-title,
.coursly-ai .switch-image-display-template .remove-block-controls,
.coursly-ai .switch-image-display-template .panel-heading-icon,
.coursly-ai .switch-image-display-template .panel-heading,
.coursly-ai .switch-image-display-template .panel-title,
.coursly-ai .switch-image-display-template .panel-subtitle,
.coursly-ai .switch-image-display-template .interactive-display-head-title,
.coursly-ai .drag-drop-display-template .remove-block-controls,
.coursly-ai .drag-drop-display-template .panel-heading-icon,
.coursly-ai .drag-drop-display-template .panel-heading,
.coursly-ai .drag-drop-display-template .panel-title,
.coursly-ai .drag-drop-display-template .panel-subtitle,
.coursly-ai .drag-drop-display-template .interactive-display-head-title {
  display:none !important;
}

.coursly-ai .puzzle-display-template .panel-title {
  font-size: 18px;
}

.coursly-ai .col-md-12.block-custom,
.coursly-ai .three-layout[title="layouts-eight"],
.coursly-ai .three-layout[title="layouts-seven"],
.coursly-ai .three-layout[title="layouts-six"],
.coursly-ai .three-layout[title="layouts-five"],
.coursly-ai .three-layout[title="layouts-four"],
.coursly-ai .three-layout[title="layouts-three"],
.coursly-ai .three-layout[title="layouts-two"] {
  max-width: 1000px;
  margin: 0 auto;
  float: none;
  padding: 20px 15px 10px 15px;
  border: none;
  float: none !important;
}

/* Only from sm and up—keep normal gutters on phones */
@media (min-width: 992px) {
  /* Scope with an opt-in class to avoid touching all rows */
  .coursly-ai .three-layout[title="layouts-two"] > [class*="col-"],
  .coursly-ai .three-layout[title="layouts-three"] > [class*="col-"],
  .coursly-ai .three-layout[title="layouts-four"] > [class*="col-"],
  .coursly-ai .three-layout[title="layouts-five"] > [class*="col-"],
  .coursly-ai .three-layout[title="layouts-six"] > [class*="col-"],
  .coursly-ai .three-layout[title="layouts-seven"] > [class*="col-"],
  .coursly-ai .three-layout[title="layouts-eight"] > [class*="col-"] {
    padding-left: 0;        /* default: left edge flush for the first real col */
    padding-right: 15px;    /* default right gutter */
  }

  /* any column that has a previous column anywhere earlier gets left gutter */
  .coursly-ai .three-layout[title="layouts-two"] > [class*="col-"] ~ [class*="col-"],
  .coursly-ai .three-layout[title="layouts-three"] > [class*="col-"] ~ [class*="col-"],
  .coursly-ai .three-layout[title="layouts-four"] > [class*="col-"] ~ [class*="col-"],
  .coursly-ai .three-layout[title="layouts-five"] > [class*="col-"] ~ [class*="col-"],
  .coursly-ai .three-layout[title="layouts-six"] > [class*="col-"] ~ [class*="col-"],
  .coursly-ai .three-layout[title="layouts-seven"] > [class*="col-"] ~ [class*="col-"],
  .coursly-ai .three-layout[title="layouts-eight"] > [class*="col-"] ~ [class*="col-"] {
    padding-left: 15px;
  }

  /* last element in the row gets no right gutter */
  .coursly-ai .three-layout[title="layouts-two"] > [class*="col-"]:last-child,
  .coursly-ai .three-layout[title="layouts-three"] > [class*="col-"]:last-child,
  .coursly-ai .three-layout[title="layouts-four"] > [class*="col-"]:last-child,
  .coursly-ai .three-layout[title="layouts-five"] > [class*="col-"]:last-child,
  .coursly-ai .three-layout[title="layouts-six"] > [class*="col-"]:last-child,
  .coursly-ai .three-layout[title="layouts-seven"] > [class*="col-"]:last-child,
  .coursly-ai .three-layout[title="layouts-eight"] > [class*="col-"]:last-child {
    padding-right: 0;
  }
}

.smart-tabs-wrapper {
  margin-bottom: 25px;
}

.coursly-ai .block-custom .show-grid-block {
  min-height: unset;
}

.coursly-ai .block-custom .show-grid-block.min-height-js {
  min-height: 80px;
}

.coursly-ai .block-custom blockquote {
  border: none !important;
  padding: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 10px !important;
  font-size: 16px !important;
}

.coursly-ai .block-custom blockquote:hover {
  border: none !important;
}

.coursly-ai .block-custom blockquote p,
.coursly-ai .block-custom h2 {
  margin: 0px !important;
  padding: 0px !important;
}

.coursly-ai .block-custom h2 {
  font-size: 22px;
  font-weight: 700;
  color: #272d4d;
}

.coursly-ai .inlineEditor-js h3 {
  padding-left: 0px !important;
  font-weight: 600 !important;
  font-size: 20px !important;
}

.smart-table{width:100%;border-collapse:collapse; }
.smart-table th,.smart-table td{border:1px solid #e5e7eb;padding:6px 10px;height: 30px;}
.smart-table th{background:#f9fafb;font-weight:600;}
.smart-table-wrapper{overflow-x:auto;max-width:100%;}

.table-development-template .hot-container{
    /* choose a sensible edit area height */
    max-height: 400px;        /* 6–8 rows visible */
    overflow: auto;           /* grid scrolls instead of stretching page */
    min-height: 120px;        /* header + one empty row */
}

/* Tabulator pop-up menu : icons in a single row */
.tabulator-menu      { white-space:nowrap; padding:6px 8px; }
.tabulator-menu-item { display:inline-block !important; padding:6px 10px; }
.tabulator-menu-item:hover{ background:#f3f4f6; }

/* jSuites v4 context-menu → horizontal icon bar */
.jcontextmenu{
    white-space:nowrap;
    padding:6px 8px;
    z-index:99999 !important;
}
.jcontextmenu > div{                 /* every menu item */
    display:inline-block !important;
    padding:6px 10px;
}
.jcontextmenu > div:hover{
    background:#f3f4f6;
}
/* ========================= menu layout ========================== */
#tabulator-combo-menu{
  white-space:nowrap;
  padding:6px 8px;
  background:#fff;
  border:1px solid #d1d5db;           /* tailwind slate-300 */
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  z-index:99999;
  user-select:none;
}

#tabulator-combo-menu a{              /* icon button */
  display:inline-block;
  padding:6px 10px;
  cursor:pointer;
}

#tabulator-combo-menu a:hover{
  background:#f3f4f6;                 /* slate-100 */
}

#tabulator-combo-menu svg{
  width:22px; height:22px;
  stroke:#374151;                     /* slate-700 */
}

#tabulator-combo-menu svg.danger{
  stroke:#e11d48 !important;          /* rose-600 */
}

/* thin vertical separator */
#tabulator-combo-menu span.sep{
  display:inline-block; width:1px; height:20px;
  background:#e5e7eb; margin:0 6px; vertical-align:middle;
}

/* darker background for the first, third, fifth… data rows  */
.tabulator .tabulator-row:nth-child(odd){
    background:#f4f5f7;          /* choose any grey you like */
}

/* keep the even rows white (optional – here just in case)   */
.tabulator .tabulator-row:nth-child(even){
    background:#ffffff;
}

.coursly-ai .widget-profile-info .profile-info .role,
.coursly-ai .widget-profile-info .profile-info .profile-footer {
  display: none !important;
}

.coursly-ai .widget-profile-info .profile-picture img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.coursly-ai .panel-heading.bg-primary {
  background: linear-gradient(270deg, #ffffff 0%, #d2dfff 40%, #a0b9ff 100%);
}

/* .coursly-ai .col-xl-12 {
  padding-right: 0px !important;
  padding-left: 0px !important;
} */

.coursly-ai .block-custom .panel.panel-group .panel-heading {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

.coursly-ai .block-custom .panel.panel-group .panel-accordion,
.coursly-ai .block-custom .panel.panel-group .accordion,
.coursly-ai .block-custom .panel.panel-group .panel-accordion .panel-body {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

.coursly-ai .multiple-choice-display .panel-body blockquote,
.coursly-ai .branching-display .panel-body blockquote{
  border-left: unset !important;
}

.coursly-ai .block-custom .show-grid-block:not(:has(> *)) {
  min-height: 80px;
}

/* IMPORTANT THEME OVERRIDES */