/* PILOT BUILD - production theme; beta-only features run only for the Canvas users in pilot-users.txt. Generated by build.ps1. */

/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */

/*** Legacy Sidebar ***/
/* For Main CSS file */
@import url(https://designtools.ciditools.com/css/themes.css);
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/* Institution color customizations */
@import url(https://designtools.ciditools.com/css/inst_theme_overrides.css);

/*** New Sidebar ***/
/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);

/* Poppins is opt-in only (.poppins-* classes); Canvas's default font applies everywhere else. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/
/*
:root {
    --dt-color-primary: #A91523;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #A91523;
    --dt-color-secondary: #ACAEB0;
    --dt-color-secondary-contrast: #000000;
    --dt-color-secondary-dark-text: #4D5254;
    --dt-color-accent: #680D15;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #680D15;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
    --dt-color-graybg: #E6E6E6;
    --dt-color-graybg-contrast: #000000;
    --ms-fc-size: 350px;
    --ms-fc-editsize: 702px;
}
*/
:root {
    --dt-color-primary: #291e47;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #291e47;
    --dt-color-secondary: #ece8e1;
    --dt-color-secondary-contrast: #000000;
    --dt-color-secondary-dark-text: #4D5254;
    --dt-color-accent: #017b84;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #017b84;
    --dt-color-gray: #e5e0d9;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
    --dt-color-graybg: #E6E6E6;
    --dt-color-graybg-contrast: #000000;
    --ms-fc-size: 350px;
    --ms-fc-editsize: 702px;
}

/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/

/*

/* Custom CSS for removing external links 
- M.Seaman 5.2.24 */

.external_link_icon {
    display: none !important;
}

/* Usage Containers */

.entUsageCalloutContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dt-color-gray);
    border-radius: 5px;
    height: 50px;
    margin: 2px;
}

.entUsageCalloutIconContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 20%;
    background: var(--dt-color-primary);
    color: var(--dt-color-primary-contrast);
    border-radius: 5px 0px 0px 5px;

}

.entUsageCalloutIcon {
    font-size: 20px;
}

.entUsageCalloutText {
    font-size: 12px;
    vertical-align: middle;
    text-align: center;
    padding-left: 5px;
    width: 80%;
    line-height: 1.3;

}

/* Custom CSS for We Statement Callouts */
/*We Statement chip*/
.ent-we-chip-container {
    margin-left: auto;
    margin-right: auto;
    width: max-content;
}

.ent-we-chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
    margin: 5px;
}

.ent-we-chip img {
    float: left;
    /* margin: 0 10px 0 -25px; */
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 5px;
    transform: translate(-10%, -25%);
}

.ms-fc-box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    --ms-fc-size: 350px;
    --ms-fc-editsize: 702px;
}

.ms-fc-sm {
    --ms-fc-size: 200px;
    --ms-fc-editsize: 402px;

    .ms-flip-card-back-text {
        font-size: 15px;
        line-height: 1.5;
    }

}

.ms-fc-md {
    --ms-fc-size: 270px;
    --ms-fc-editsize: 542px;

    .ms-flip-card-back-text {
        font-size: 15px;
        line-height: 1.5;
    }

}

.ms-fc-lg {
    --ms-fc-size: 300px;
    --ms-fc-editsize: 602px;

    .ms-flip-card-back-text {
        font-size: 15px;
        line-height: 1.5;
    }

}

.ms-flip-card-container {
    position: relative;
    width: var(--ms-fc-size);
    height: var(--ms-fc-size);

    display: inline-block;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    margin: 5px;

}

.ms-flip-card-container-edit {
    position: relative;
    width: var(--ms-fc-editsize);
    height: var(--ms-fc-size);
    margin: 5px;
    border: 1px dotted purple;
    padding: 2px;
    display: flex;
    flex-direction: row;
}

.ms-flip-card-front {
    position: absolute;
    width: var(--ms-fc-size);
    height: var(--ms-fc-size);
    backface-visibility: hidden;
    background: white;
    border: 1px solid var(--dt-color-gray);
    border-top: 2px solid var(--dt-color-primary);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ms-flip-card-front-text {
    font-weight: 900;
    font-style: normal;
    font-size: 30px;
    color: var(--dt-color-primary);
}

.ms-flip-card-back {
    position: absolute;
    width: var(--ms-fc-size);
    height: var(--ms-fc-size);
    backface-visibility: hidden;
    background: var(--dt-color-graybg);
    border: 1px solid var(--dt-color-gray);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: rotateY(180deg);
}

.ms-flip-card-back-edit {
    position: absolute;
    left: var(--ms-fc-size);
    width: var(--ms-fc-size);
    height: var(--ms-fc-size);
    backface-visibility: hidden;
    background: var(--dt-color-graybg);
    border: 1px solid var(--dt-color-gray);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.ms-flip-card-back-text {
    margin: 5px;
    font-size: 22px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.3;
}

.ms-flip-card-info-container {
    position: absolute;
    width: var(--ms-fc-size);
    bottom: 0;
    display: flex;
    /*Ensures that the text and icon are side by side*/
    justify-content: flex-end;
    /*Makes the content go to the far right of the container*/
    align-items: center;
    margin: 2px;
    margin-bottom: 0px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.3;

}

.ms-fc-ic-bg {
    background-color: rgba(255, 255, 255, 0.5);
}

.ms-flip-card-info-text {
    font-size: 12px;
    margin-right: 5px;
}

.ms-flip-card-info-icon {
    margin-right: 5px;
    font-size: medium;
}

.ms-flip-card-flip {
    transform: rotateY(180deg);
}

.ms-flip-card-img {
    width: 100%;
    height: 100%;
}
.ig-info{
    display: flex; 
    justify-content: space-between;
    margin-right: 0px;

}
.ig-admin{
    align-self: flex-end !important;
}

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}

/* ── Canvas Attendance Grid ─────────────────────────────────────────────── */

/* Design tokens */
:root {
  --cag-primary: #017b84;
  --cag-primary-dark: #00a492;
  --cag-white: #FFFFFF;
  --cag-bg: #F5F5F5;
  --cag-border: #C7CDD1;
  --cag-text: #2D3B45;
  --cag-text-light: #6B7780;
  --cag-radius: 4px;
  --cag-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  --cag-font: 'Lato', 'LatoWeb', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cag-danger: #D0021B;
}

/* ── Launch button (injected into Canvas header bar) ──────────────────── */
#cag-launch-btn,
#cag-take-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 34px;
  font-family: var(--cag-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--cag-white);
  background: var(--cag-primary);
  border: 1px solid var(--cag-primary-dark);
  border-radius: var(--cag-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

#cag-launch-btn:hover,
#cag-take-btn:hover {
  background: var(--cag-primary-dark);
}

#cag-launch-btn:focus,
#cag-take-btn:focus {
  outline: 2px solid var(--cag-primary);
  outline-offset: 2px;
}

/* ── Full-screen overlay ──────────────────────────────────────────────── */
#cag-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background: var(--cag-bg);
  font-family: var(--cag-font);
  color: var(--cag-text);
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
#cag-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--cag-white);
  border-bottom: 1px solid var(--cag-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

#cag-toolbar h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--cag-text);
  flex: 1;
}

.cag-concluded-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-family: var(--cag-font);
  color: var(--cag-text-light);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.cag-concluded-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--cag-primary);
  flex-shrink: 0;
  cursor: pointer;
}

#cag-toolbar .cag-status {
  font-size: 13px;
  color: var(--cag-text-light);
  min-width: 120px;
  text-align: right;
}

/* ── Shared button base ───────────────────────────────────────────────── */
.cag-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 32px;
  font-family: var(--cag-font);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--cag-radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.cag-btn:focus {
  outline: 2px solid var(--cag-primary);
  outline-offset: 2px;
}

.cag-btn--primary {
  background: var(--cag-primary);
  border-color: var(--cag-primary-dark);
  color: var(--cag-white);
}

.cag-btn--primary:hover {
  background: var(--cag-primary-dark);
}

.cag-btn--secondary {
  background: var(--cag-white);
  border-color: var(--cag-border);
  color: var(--cag-text);
}

.cag-btn--secondary:hover {
  background: var(--cag-bg);
}

.cag-btn--danger {
  background: var(--cag-white);
  border-color: var(--cag-danger);
  color: var(--cag-danger);
}

.cag-btn--danger:hover {
  background: #fce8eb;
}

/* ── Grid container ───────────────────────────────────────────────────── */
#cag-grid-container {
  flex: 1;
  overflow: hidden;
  padding: 0 12px 12px;
}

#cag-grid {
  height: 100%;
}

/* ── Tabulator overrides — match Canvas UI ────────────────────────────── */
#cag-grid .tabulator {
  border: 1px solid var(--cag-border);
  border-radius: 0 0 var(--cag-radius) var(--cag-radius);
  font-family: var(--cag-font);
  font-size: 13px;
}

#cag-grid .tabulator-header {
  background: var(--cag-white);
  border-bottom: 2px solid var(--cag-border);
}

#cag-grid .tabulator-col-title {
  font-weight: 700;
  color: var(--cag-text);
}

#cag-grid .tabulator-row:nth-child(even) {
  background: #FAFAFA;
}

#cag-grid .tabulator-row:hover {
  background: #EEF7FF !important;
}

#cag-grid .tabulator-cell {
  border-right: 1px solid var(--cag-border);
  padding: 4px 8px;
}

#cag-grid .tabulator-cell.tabulator-editing {
  border: 2px solid var(--cag-primary) !important;
  padding: 2px 6px;
}

/* Unsaved (dirty) cells get a subtle yellow tint */
#cag-grid .tabulator-cell.cag-dirty {
  background: #fffbe6 !important;
}

/* ── Grade badge (click-to-cycle) ────────────────────────────────────── */
.cag-grade-badge {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-width: 28px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: 0.03em;
}

.cag-grade--P {
  background: #d4edda;
  color: #1a5c2a;
}

.cag-grade--T {
  background: #fff3cd;
  color: #7d5a00;
}

.cag-grade--A {
  background: #f8d7da;
  color: #7d1a20;
}

.cag-grade--empty {
  color: var(--cag-text-light);
  font-weight: 400;
}

#cag-grid .tabulator-cell[data-grade-col="true"] {
  cursor: pointer;
  text-align: center;
}

/* ── Column header: compact padding; let Tabulator size grouped headers ── */
#cag-grid .tabulator-col .tabulator-col-content {
  padding: 4px 8px;
  box-sizing: border-box;
}

/* ── Bulk-Mark button inside column header ────────────────────────────── */
.cag-bulk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--cag-border);
  border-radius: 3px;
  background: var(--cag-white);
  color: var(--cag-text-light);
  cursor: pointer;
}

.cag-bulk-btn:hover {
  background: var(--cag-bg);
  color: var(--cag-text);
}

/* ── Expand/collapse detail columns arrow button ─────────────────────── */
.cag-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 10px;
  border: 1px solid var(--cag-border);
  border-radius: 3px;
  background: var(--cag-white);
  color: var(--cag-text-light);
  cursor: pointer;
  line-height: 1;
}

.cag-expand-btn:hover {
  background: var(--cag-bg);
  color: var(--cag-primary);
  border-color: var(--cag-primary);
}

/* ── Grade column: center the P/T/A badge in the cell ─────────────────── */
#cag-grid .tabulator-cell.cag-grade-col {
  text-align: center;
}

/* ── Assignment group header (spans the assignment's columns) ─────────── */
#cag-grid .tabulator-col.tabulator-col-group .tabulator-col-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cag-grid .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
  border-top: 1px solid var(--cag-border);
}

/* ── Per-assignment banding: make adjacent assignments distinguishable ── */
#cag-grid .tabulator-col.cag-assign-odd,
#cag-grid .tabulator-cell.cag-assign-odd {
  background: #f2f6fa;
}
#cag-grid .tabulator-col.cag-assign-even,
#cag-grid .tabulator-cell.cag-assign-even {
  background: var(--cag-white);
}
/* Boundary line at the start (grade column) of each assignment block */
#cag-grid .tabulator-col.cag-assign-start,
#cag-grid .tabulator-cell.cag-assign-start {
  border-left: 2px solid var(--cag-primary);
}

/* ── Take Attendance mode: make the single attendance column stand out ── */
.cag-take-mode #cag-grid .tabulator-col.cag-grade-col,
.cag-take-mode #cag-grid .tabulator-cell.cag-grade-col {
  background: #eef4fb;
  border-left: 2px solid var(--cag-primary);
  border-right: 2px solid var(--cag-primary);
}

/* ── Assignment Picker Modal ──────────────────────────────────────────── */
#cag-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

#cag-picker-modal {
  background: var(--cag-white);
  border-radius: 6px;
  box-shadow: var(--cag-shadow);
  width: min(520px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#cag-picker-modal header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--cag-border);
  display: flex;
  align-items: center;
}

#cag-picker-modal header h3 {
  margin: 0;
  flex: 1;
  font-size: 17px;
  font-weight: 700;
}

#cag-picker-search {
  width: 100%;
  margin: 10px 0 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--cag-font);
  border: 1px solid var(--cag-border);
  border-radius: var(--cag-radius);
  box-sizing: border-box;
}

#cag-picker-search:focus {
  outline: 2px solid var(--cag-primary);
}

#cag-picker-list-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 8px;
}

.cag-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid #F0F0F0;
  font-size: 13px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.cag-picker-item:last-child {
  border-bottom: none;
}

.cag-picker-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--cag-primary);
  flex-shrink: 0;
}

.cag-picker-item input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--cag-primary);
  flex-shrink: 0;
}

.cag-picker-item label {
  cursor: pointer;
  line-height: 1.3;
}

.cag-picker-item label .cag-assign-due {
  display: block;
  font-size: 11px;
  color: var(--cag-text-light);
  margin-top: 1px;
}

#cag-picker-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--cag-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Footer action pinned to the left (e.g. "New attendance assignment" / "Back") */
#cag-picker-footer .cag-picker-footer__left {
  margin-right: auto;
}

/* ── Create attendance assignment form ────────────────────────────────── */
#cag-create-body {
  padding: 14px 20px 4px;
  overflow-y: auto;
}

.cag-create-field {
  display: block;
  margin: 0 0 16px;
  border: none;
  padding: 0;
}

.cag-create-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--cag-text);
  margin-bottom: 5px;
  padding: 0;
}

#cag-create-name {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--cag-font);
  border: 1px solid var(--cag-border);
  border-radius: var(--cag-radius);
  box-sizing: border-box;
}

#cag-create-name:focus {
  outline: 2px solid var(--cag-primary);
}

.cag-create-variant {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cag-radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--cag-border);
  border-radius: var(--cag-radius);
  cursor: pointer;
  font-size: 13px;
}

.cag-radio-row:hover {
  border-color: var(--cag-primary);
}

.cag-radio-row input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--cag-primary);
  flex-shrink: 0;
}

.cag-radio-row strong {
  display: block;
  line-height: 1.3;
}

.cag-radio-hint {
  display: block;
  font-size: 11px;
  color: var(--cag-text-light);
  margin-top: 2px;
}

.cag-create-error {
  margin: 0 0 14px;
  padding: 9px 11px;
  border: 1px solid var(--cag-danger);
  border-radius: var(--cag-radius);
  background: #FDECEE;
  color: var(--cag-danger);
  font-size: 12px;
  line-height: 1.4;
}

/* ── Loading / empty states ───────────────────────────────────────────── */
.cag-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 15px;
  color: var(--cag-text-light);
  gap: 10px;
}

.cag-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--cag-border);
  border-top-color: var(--cag-primary);
  border-radius: 50%;
  animation: cag-spin 0.7s linear infinite;
}

@keyframes cag-spin {
  to {
    transform: rotate(360deg);
  }
}

.cag-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--cag-text-light);
  font-size: 14px;
}

/* ── Wings University DesignPLUS theme ─────────────────────────────────── */
/* Applies only to pages whose DesignPLUS wrapper carries .wings-theme (set by the "Wings University"
   row in the Primary course [Themes] page). Spec: documentation/06-wings-theme-spec.md.
   The scope :is(#dp-wrapper, .dp-wrapper).wings-theme always has ID specificity, so these rules beat
   DesignPLUS theme rules (e.g. the 500 heading weight that overrode .poppins-extrabold). */

:root {
  --wings-indigo: #291e47;
  --wings-purple: #3c306d;
  --wings-coral: #f15f56;
  --wings-teal-dark: #017b84;
  --wings-teal: #00a4a2;
  --wings-teal-light: #44c0b8;
  --wings-stone: #e5e0d9;
  --wings-sand: #ece8e1;
  --wings-cream: #f8f5ec;
  --wings-text: #3d3d3f;
  --wings-divider: #c9c1b3;

  --wings-block-a: #ffffff;
  --wings-block-b: var(--wings-cream);
  /* Content column width inside full-bleed blocks; matches DesignPLUS's 1100px readable width. */
  --wings-measure: 1052px;
  --wings-gutter: 24px;
  --wings-font-head: "Poppins", sans-serif;
  /* Brand tracking -15 to -25 (thousandths of an em). */
  --wings-tracking: -0.02em;
}

/* ── Wrapper and blocks ──────────────────────────────────────────────── */

:is(#dp-wrapper, .dp-wrapper).wings-theme {
  max-width: none;
  color: var(--wings-text);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme > .dp-content-block {
  margin: 0;
  padding: 36px max(var(--wings-gutter), calc((100% - var(--wings-measure)) / 2)) 28px;
  background: var(--wings-block-a);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme > .dp-content-block:nth-child(even of .dp-content-block) {
  background: var(--wings-block-b);
}

/* DesignPLUS clips blocks (overflow: hidden), which cuts off section icons in blocks nested in columns;
   flow-root still contains floats. */
:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-content-block {
  overflow: visible;
  display: flow-root;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-content-block > :last-child {
  margin-bottom: 0;
}

/* Teal links fail AA on the stone block, so content links use the lighter purple. */
:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-content-block a:not(.btn, .dp-link-grid a) {
  color: var(--wings-purple);
  text-decoration: underline;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-content-block a:not(.btn, .dp-link-grid a):is(:hover, :focus-visible) {
  color: var(--wings-indigo);
}

/* ── Headings (brand: headlines Poppins ExtraBold, subheads Poppins SemiBold) ── */

:is(#dp-wrapper, .dp-wrapper).wings-theme :is(h2, h3):not(.dp-heading, .dp-panel-heading, .card-title, .dp-ignore-theme) {
  font-family: var(--wings-font-head);
  font-weight: 800;
  letter-spacing: var(--wings-tracking);
  line-height: 1.15;
  color: var(--wings-indigo);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme h2:not(.dp-heading, .dp-panel-heading, .card-title, .dp-ignore-theme) {
  font-size: 32px;
}

/* Section header: divider line, 46px icon circle on the line, centred headline. */
:is(#dp-wrapper, .dp-wrapper).wings-theme h3:not(.dp-heading, .dp-panel-heading, .card-title, .dp-ignore-theme) {
  font-size: 28px;
  text-align: center;
  margin: 10px 0 16px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--wings-divider);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme h3:not(.dp-heading, .dp-panel-heading, .card-title, .dp-ignore-theme) > i:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: -23px auto 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wings-indigo);
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
}

/* Headings without an icon still need clearance below the divider. */
:is(#dp-wrapper, .dp-wrapper).wings-theme h3:not(.dp-heading, .dp-panel-heading, .card-title, .dp-ignore-theme):not(:has(> i:first-child)) {
  padding-top: 20px;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme :is(h4, h5, h6):not(.dp-heading, .dp-panel-heading, .card-title, .dp-ignore-theme) {
  font-family: var(--wings-font-head);
  font-weight: 600;
  letter-spacing: var(--wings-tracking);
  line-height: 1.2;
  color: var(--wings-indigo);
  border: 0;
  padding: 0;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme h4:not(.dp-panel-heading, .card-title, .dp-ignore-theme) {
  font-size: 22px;
  margin: 24px 0 10px;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme h5:not(.dp-panel-heading, .card-title, .dp-ignore-theme) {
  font-size: 18px;
  margin: 20px 0 8px;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme h6:not(.dp-panel-heading, .card-title, .dp-ignore-theme) {
  font-size: 16px;
  margin: 16px 0 6px;
}

/* ── Banner image ────────────────────────────────────────────────────── */

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-banner-image {
  margin: 0;
  padding: 0;
  line-height: 0;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-banner-image img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

/* ── Banner title: home (centred title + team-name pill on white) ────── */

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-home {
  margin: 0;
  padding: 28px var(--wings-gutter) 30px;
  background: #ffffff;
  color: var(--wings-indigo);
  text-align: center;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-home .dp-heading {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--wings-font-head);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: var(--wings-tracking);
  line-height: 1.1;
  color: var(--wings-indigo);
  text-align: center;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-home .dp-header-pre {
  display: none;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-home .dp-header-subtitle {
  display: inline-block;
  margin: 12px auto 0;
  padding: 3px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--wings-purple);
  color: #ffffff;
  font-family: var(--wings-font-head);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
}

/* ── Banner title: module/content pages (compact indigo bar) ─────────── */
/* Prefix 1 = short module title, Prefix 2 = page number (shown first, in a teal circle). */

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-page {
  margin: 0;
  padding: 22px max(var(--wings-gutter), calc((100% - var(--wings-measure)) / 2));
  background: var(--wings-indigo);
  border-bottom: 4px solid var(--wings-teal);
  color: #ffffff;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-page .dp-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  text-align: left;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-page .dp-header-pre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wings-sand);
  font-family: var(--wings-font-head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-page .dp-header-pre-2 {
  order: -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--wings-teal-dark);
  color: #ffffff;
  font-weight: 800;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-page .dp-header-pre-2:empty {
  display: none;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-page .dp-header-title {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--wings-font-head);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: var(--wings-tracking);
  line-height: 1.1;
  color: #ffffff;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-header.wings-header-page .dp-header-subtitle {
  margin: 8px 0 0;
  color: var(--wings-sand);
  font-size: 16px;
}

/* ── Link grid (advanced home) ───────────────────────────────────────── */

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-link-grid.wings-link-grid {
  margin: 0;
  padding: 0;
  background: var(--wings-indigo);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-link-grid.wings-link-grid > ul.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin: 0;
  padding: 0;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-link-grid.wings-link-grid > ul > li {
  margin: 0;
  padding: 0;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-link-grid.wings-link-grid > ul > li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 14px 10px;
  border: 1px solid var(--wings-purple);
  border-bottom-width: 4px;
  border-bottom-color: var(--wings-indigo);
  background: var(--wings-indigo);
  color: #ffffff;
  font-family: var(--wings-font-head);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
}

/* Brand triangle replaces per-link icons so every grid looks the same. */
:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-link-grid.wings-link-grid > ul > li a::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: var(--wings-teal);
  clip-path: polygon(0 8%, 100% 50%, 0 92%, 28% 50%);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-link-grid.wings-link-grid > ul > li a i {
  display: none;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-link-grid.wings-link-grid > ul > li a:is(:hover, :focus-visible, [aria-current="page"]) {
  background: var(--wings-purple);
  border-bottom-color: var(--wings-sand);
  color: var(--wings-sand);
  text-decoration: none;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-link-grid.wings-link-grid > ul > li a:is(:hover, :focus-visible, [aria-current="page"])::before {
  background: var(--wings-sand);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-link-grid.wings-link-grid > ul > li a:focus-visible {
  outline: 2px solid var(--wings-teal-light);
  outline-offset: -4px;
}

/* ── Date / time card ────────────────────────────────────────────────── */

:is(#dp-wrapper, .dp-wrapper).wings-theme .card.wings-date-card {
  background: #ffffff;
  border: 1px solid rgba(41, 30, 71, 0.15);
  border-top: 5px solid var(--wings-indigo);
  border-radius: 8px;
  box-shadow: none;
  color: var(--wings-indigo);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .card.wings-date-card .card-body {
  padding: 16px 20px;
}

/* h-100 (Bootstrap, !important) is only meant for cards filling a column; outside one it would
   stretch the card to its block's full height. */
:is(#dp-wrapper, .dp-wrapper).wings-theme :not([class*="col-"]) > .card.wings-date-card.h-100 {
  height: auto !important;
  margin-bottom: 12px;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .card.wings-date-card .card-title {
  margin: 0 0 8px;
  font-family: var(--wings-font-head);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: var(--wings-tracking);
  color: var(--wings-indigo);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .card.wings-date-card .card-text {
  margin: 0 0 4px;
  color: var(--wings-indigo);
}

/* ── Call-to-action button ───────────────────────────────────────────── */

:is(#dp-wrapper, .dp-wrapper).wings-theme a.btn.wings-cta {
  display: block;
  width: 100%;
  padding: 14px 10px;
  border: 0;
  border-radius: 0;
  background: var(--wings-indigo);
  color: #ffffff;
  font-family: var(--wings-font-head);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: var(--wings-tracking);
  text-align: center;
  text-decoration: none;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme a.btn.wings-cta:is(:hover, :focus-visible) {
  background: var(--wings-purple);
  color: #ffffff;
}

/* ── Tables ──────────────────────────────────────────────────────────── */

:is(#dp-wrapper, .dp-wrapper).wings-theme table.table {
  background: #ffffff;
  color: var(--wings-text);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme table.table :is(th, td) {
  padding: 10px 12px;
  border-color: var(--wings-stone);
  vertical-align: top;
}

:is(#dp-wrapper, .dp-wrapper).wings-theme table.table th {
  color: var(--wings-indigo);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme table.table:not(.wings-card-table) caption {
  caption-side: top;
  padding: 0 0 8px;
  color: var(--wings-text);
  font-size: 0.9rem;
}

/* Card table: opt-in via the "Wings card table" Quick Style, matching .wings-date-card.
   Works on any DesignPLUS page. Tables can't clip their own rounded corners, so the
   .dp-table-scroll wrapper carries the card frame when present. */
:is(#dp-wrapper, .dp-wrapper) .dp-table-scroll:has(> table.wings-card-table) {
  background: #ffffff;
  border: 1px solid rgba(41, 30, 71, 0.15);
  border-top: 5px solid var(--wings-indigo);
  border-radius: 8px;
  overflow: auto;
}

:is(#dp-wrapper, .dp-wrapper) .dp-table-scroll > table.wings-card-table {
  margin: 0;
  border: 0;
}

:is(#dp-wrapper, .dp-wrapper) :not(.dp-table-scroll) > table.wings-card-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(41, 30, 71, 0.15);
  border-top: 5px solid var(--wings-indigo);
  border-radius: 8px;
}

:is(#dp-wrapper, .dp-wrapper) table.wings-card-table caption {
  caption-side: top;
  padding: 12px 12px 4px;
  color: var(--wings-text);
  font-size: 0.9rem;
}

/* ── Columns: align column content with the block's text edge ────────── */

:is(#dp-wrapper, .dp-wrapper).wings-theme .dp-column-container.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* ── Resources module list (wings-modules.js hides this page's own row) ── */
/* DesignPLUS marks the viewer's current item .dp-current, so the CSS hides it before the script runs. */

:is(#dp-wrapper, .dp-wrapper) .wings-module-resources :is([data-wings-hidden], li.context_module_item.dp-current) {
  display: none !important;
}

/* ── Trainer note (template guidance, deleted before publishing) ─────── */

:is(#dp-wrapper, .dp-wrapper).wings-theme .wings-trainer-note {
  margin: 16px var(--wings-gutter);
  padding: 12px 16px;
  border: 2px dashed var(--wings-coral);
  border-radius: 8px;
  background: #ffffff;
  color: var(--wings-text);
}

:is(#dp-wrapper, .dp-wrapper).wings-theme .wings-trainer-note > :last-child {
  margin-bottom: 0;
}

/* ── Inside the portal content card ──────────────────────────────────── */
/* Blocks run edge to edge, so the card's padding moves onto the wrapper's children and the
   wrapper clips to the card's rounded corners. */

/* !important beats the inline padding-top DesignPLUS sets on the page body. */
html.cportal-has-banner #wiki_page_show > .show-content:has(> .wings-theme) {
  padding: 0 !important;
}

html.cportal-has-banner #wiki_page_show > .show-content:has(> .wings-theme) > h1.page-title:not(.screenreader-only) {
  margin: 24px 30px;
}

html.cportal-has-banner #wiki_page_show > .show-content > :is(#dp-wrapper, .dp-wrapper).wings-theme {
  border-radius: calc(var(--cportal-card-radius) - 1px);
  overflow: clip;
}