/* ===== START: GLOBAL ===== */	

	body, input {
		 font-family: Inter, Arial, sans-serif;
	}
	
	.error-message {
		color: red;
		font-size: 0.875em;
	}
	
	
	.masked-input {
	  -webkit-text-security: disc; /* For WebKit browsers (Chrome, Safari) */
	  text-security: disc; /* Non-standard but could work in some browsers */
	}
	
	.ai-model-notice {
		color: darkgray;
		font-style: italic;
		font-size: small;
	}

  .sxr-new-badge {
    position: absolute;
    top: 0;
    left: -34px;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    padding: 10px 4px;
    width: 34px;
    border-radius: 0 6px 6px 0;
    background: #1c8c6b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    transform-origin: center;
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
  }

  .dashboard-row.is-newly-imported {
    position: relative;
    overflow: visible;
  }

	
	/* ===== START: shareable-post.css ===== */	

    /* --------------------------------------------------
       SSE Form Container
    -------------------------------------------------- */

	
	.single-shareable main > div {
		height: 100%;
		display: flex;
		align-items: center;
	}
	
	.nav-buttons {    
		display: flex;
		justify-content: space-between;
		margin-top: 12px;
	}
	
	.nav-buttons button {
		background: #2DA782;
	}
	
	#td_topic_btn_holder{
		display: flex;
		gap: 16px;
	}
	
	
    .sse-form-container {
        max-width: 1200px;
        margin: 0 auto;
        background: #fff;
        padding: 0;
        border-radius: 8px;
		font-family: Inter,Arial,sans-serif;
    }
    .sse-form-container input,
    .sse-form-container textarea,
    .sse-form-container select { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
    .sse-form-container h2 { margin-bottom: 20px; color: #333; font-size: 24px; }
    
	.sse-form-container #sse_content_editor_ifr {
		min-height: 250px;
		border: 1px solid #dbdbdb;
	}
	
	.sse-mode-selector .mode-label {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 6px;
		padding: 20px;
		font-weight: 600;
		font-size: 17px;
		cursor: pointer;
		color: #fff;
		transition: background .2s;
		justify-content: space-between;
		background-color: #1c8c6b;
		background-image: linear-gradient(135deg, #1c8c6b 50%, #26b38a 100%);
	}
	
    .sse-form-container .sse-buttons { display: flex; justify-content: space-between; margin-top: 24px; }
    
	.sse-form-container .sse-buttons input[type="submit"], 
	.sse-form-container .sse-buttons button[type="submit"]
	{ width: 32%; padding: 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
	
	
	.sse-form-container .sse-buttons .sse-btn-wrap
	{ width: 32%; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
	
	.sse-form-container .sse-buttons .sse-btn-wrap input[type="submit"] {
		width: 100%;
		margin-bottom: 0;
	}
	
    .sse-publish { background: #2DA782; color: #fff; }
    .sse-publish:hover { background: #1e7259; }

    .sse-draft, .sse-cancel { background: #959595 !important; color: #fff; }
    .sse-draft:hover, .sse-cancel:hover { background: #8a8a8a !important; }

    /* Style-lock: visually disabled, cursor indicates it's blocked, title tooltip explains why */
    .sse-form-container .sse-buttons .sse-publish.sxr-style-locked,
    .sse-form-container .sse-buttons .sse-draft.sxr-style-locked { opacity: 0.45; cursor: not-allowed !important; }

	#shareable_prompt_span { margin-top: 24px; }
	.sxr-defence-customisation {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sxr-defence-custom-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 14px 18px;
		background: #e8f5f0 !important;
		border: 1.5px solid rgba(20,160,133,.2) !important;
		border-radius: 8px;
		color: #1b6b4b !important;
		box-shadow: none !important;
		transform: none !important;
		text-align: left;
	}

	.sxr-defence-custom-toggle:hover {
		background: #d6efe7 !important;
		border-color: #1a8464 !important;
	}

	.sxr-customise-arrow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		background: #1a8464;
		color: #fff;
		border-radius: 50%;
		font-size: 14px;
		font-weight: 700;
		transition: transform .25s ease;
		flex-shrink: 0;
	}

	.sxr-customise-arrow.open {
		transform: rotate(90deg);
	}

	.sxr-customise-label {
		font-size: 14px;
		font-weight: 600;
	}

  .sxr-task-customise-toggle-row {
    max-width: 1000px;
    width: 100%;
    margin: 0px auto;
}

	.sxr-defence-custom-optional {
		font-weight: 400;
		color: #7ca89a;
		margin-left: 6px;
	}

	.sxr-defence-custom-panel {
		padding: 0;
	}

	.sxr-defence-custom-help {
		margin: 0 0 12px;
		font-size: 12px;
		color: #1f2937;
	}

	.sxr-entry-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sxr-ghost-examples {
		display: flex;
		flex-direction: column;
		gap: 10px;
		transition: opacity .2s ease, transform .2s ease;
	}

	.sxr-ghost-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		width: fit-content;
		padding: 4px 0;
		border: 0;
		background: transparent;
		color: #1a8464;
		font-size: 12px;
		font-weight: 500;
		cursor: pointer;
		box-shadow: none !important;
		transform: none !important;
	}

	.sxr-ghost-toggle-arrow {
		transition: transform .2s ease;
		font-size: 15px;
		font-weight: 700;
	}

	.sxr-ghost-toggle-arrow.open {
		transform: rotate(90deg);
	}

	.sxr-ghost-rows {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sxr-ghost-row {
		display: flex;
		align-items: center;
		gap: 8px;
		text-align: left;
		padding: 10px 14px;
		background: #fff !important;
		border: 1px dashed #e2e8f0 !important;
		border-radius: 6px;
		color: #7ca89a !important;
		box-shadow: none !important;
		transform: none !important;
		cursor: pointer;
	}

	.sxr-ghost-row:hover {
		border-color: #1a8464 !important;
		background: rgba(20,160,133,.03) !important;
	}

	.sxr-ghost-number {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #e2e8f0;
		color: #7ca89a;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		font-weight: 700;
		flex-shrink: 0;
	}

	.sxr-ghost-row:hover .sxr-ghost-number {
		background: #1a8464;
		color: #fff;
	}

	.sxr-ghost-text {
		font-size: 13px;
		font-style: italic;
		color: #7ca89a;
	}

	.sxr-real-entries {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sxr-entry-row {
		display: flex;
		gap: 8px;
		align-items: center;
	}

	.sxr-entry-number {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #1a8464;
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 11px;
		font-weight: 600;
		flex-shrink: 0;
	}

	.sxr-entry-input {
		flex: 1;
		padding: 10px 14px !important;
		border: 1px solid #e2e8f0 !important;
		border-radius: 6px !important;
		font-size: 13px !important;
	}

	.sxr-entry-input:focus {
		outline: none;
		border-color: #1a8464 !important;
		box-shadow: 0 0 0 3px rgba(20,160,133,.1) !important;
	}

	.sxr-entry-remove {
		width: 28px;
		height: 28px;
		border: 0;
		background: none !important;
		color: #7ca89a !important;
		border-radius: 4px;
		font-size: 18px;
		cursor: pointer;
		box-shadow: none !important;
		transform: none !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.sxr-entry-remove:hover {
		color: #e74c5e !important;
		background: #fef2f2 !important;
	}

	.sxr-btn-start {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 8px 14px !important;
		border-radius: 6px !important;
		border: 1.5px solid #1a8464 !important;
		background: #e8f5f0 !important;
		color: #1a8464 !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		box-shadow: none !important;
		transform: none !important;
		width: fit-content;
	}

	.sxr-btn-start:hover {
		background: #1a8464 !important;
		color: #fff !important;
	}

	.sxr-btn-start.subsequent {
		background: transparent !important;
		border: 1.5px dashed #e2e8f0 !important;
		color: #7ca89a !important;
	}

	.sxr-btn-start.subsequent:hover {
		border-color: #1a8464 !important;
		color: #1a8464 !important;
		background: transparent !important;
	}
    .editor-section { border-radius: 4px; margin-bottom: 32px; margin-top: 32px;}
	
    #rubric_preview_container .rubric-container { padding: 0 !important; background: none;}
    #rubric_preview_container .rubric-container button { margin-top: 16px; }
    .access-code { font-size: larger; text-align: center; margin: 36px 0; }
    .hidden { display: none !important; }
    .sse-hidden { display: none; opacity: 0; transition: opacity .5s ease-in; }
    .sse-visible { display: block; opacity: 1; transition: opacity .5s ease-in; }
	
	#sse_ai_suggest_button i {margin-right: 10px;}

    /* --------------------------------------------------
       Mode Selector
    -------------------------------------------------- */
    .sse-mode-selector { display: flex; gap: 32px; margin: 16px 0; }
    .sse-mode-selector input[type="radio"] { display: none; }

    .mode-label:hover { 
		background: #115843; 
		background-image: linear-gradient(135deg, #0f513d 50%, #17765a 100%);
	}
	
    .mode-label.selected {
        background: #115843;	
		pointer-events: none;
    }
    .mode-label.disabled {
        pointer-events: none;
    }
	.selector-btn-label {
		color: white;
		display: block;
		font-size: 26px;
		margin-top: 16px;
		text-align: center;
		line-height: 1.2;
	}

    .selector-btn-desc, .selector-btn-usage {
		color: white;
        overflow: hidden;
        transition: opacity .3s ease, max-height .3s ease;
        opacity: 1;
        max-height: 200px;
        text-align: center;
		min-height: fit-content;
	}
	
	.selector-btn-desc {
		font-weight: 400;
		margin-top: 16px;
		height: 120px;
		display: flex;
		align-items: center;
    }
	
	.selector-btn-usage {
		font-weight: 700;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
    .fade-out { opacity: 0; max-height: 0; min-height: 0; padding: 0; margin: 0; }
    .mode-label.coming-soon { position: relative; overflow: visible; }
    .mode-label.coming-soon::before {
        content: "COMING SOON";
        position: absolute;
        top: 24px; right: -54px;
        background: #602545; color: #fff;
        padding: 2px 8px; font-size: 24px; font-weight: 700;
        transform: rotate(45deg); transform-origin: center;
        border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.2);
        white-space: nowrap; pointer-events: none;
    }
	
	.usage-label {
		padding: 10px 16px;
		background: #ffffff24;
		border-radius: 24px;
		font-weight: 600;
		margin-top: 20px;
	}
	
	.mode-label .img-div img {
		height: 60px;
		width: 60px;
		object-fit: contain;
	}
	
	.mode-label .img-div {
		background: #ffffff24;
		border-radius: 50%;
		display: flex;
		width: 90px;
		height: 90px;
		justify-content: center;
		align-items: center;
	}


    /* --------------------------------------------------
       Task-Editor Tabs
    -------------------------------------------------- */
    .task-editor * { box-sizing: border-box; }
    .task-editor .popup { display: flex; border-radius: 6px; min-height: 480px; }
    .task-editor .tabs { display: flex; flex-direction: column; justify-content: flex-start; padding: 20px 0; gap: 8px; }
    .task-editor .tabs label {
        display: block; text-align: right; font-size: 18px; font-weight: 600;
        cursor: pointer; color: #1c8c6b; opacity: .4;
        transition: opacity .4s, transform .2s;
        padding: 8px 16px; border-radius: 16px 0 0 16px; background: #ebf7f3; user-select: none;
    }
	.task-editor h4 {margin-top:8px;}
	.task-editor h5 { width: fit-content;  margin-top: 25px; font-family: 'Inter', Arial, sans-serif; /*margin: 20px auto;*/ }
    .task-editor input[type="radio"] { display: none; }
    .task-editor .tabs input[type="radio"]:checked + label,
    .task-editor .tabs label:hover {
        opacity: 1; background: #fff; border: 1px solid #ebf7f3; border-right: 0; transform: translateX(3px);
    }
    .task-editor .body { flex: 1; background: #fff; border: 1px solid #ebf7f3; border-radius: 6px; padding: 16px; }
	.task-editor .tab-body {display: flex;  flex-direction: column; height: 100%;}
	
	.prompt-tab { 
		padding:12px 24px; 
		cursor:pointer; 
		border-bottom:none; 
		margin-right:4px;
		border-radius: 8px 8px 0 0;
		background: #f7fcfa;
		font-weight: 700;
		color: #1c8c6b;
		display: flex;
		align-items: center;
	}
	
	.prompt-tab .fa-solid {
		margin-left: 16px;
	}
	
	.prompt-tab div {
		text-align: center;
	}
	
	.prompt-tab.active {
		background: #daeee6;
	}
	
	
	.tab-list {
		display:flex; 
		list-style:none; 
		padding:0;     
		margin: 0 0 20px 0;
		border-bottom:2px solid #1c8c6b;
	}
	
	.task-editor #td-add-idea {
		height: fit-content;
	}
	
	.task-editor .coming-soon {
		text-align: center;
		width: fit-content;
		padding: 8px 16px;
		background: #602545;
		color: white;
		border-radius: 8px;
		font-weight: 700;
		margin: auto;
	}
	
	.sse-finalise-summary {
		width: 100%;
		margin: auto;
		background: #f7fcfa;
	}
	
	.sse-finalise-summary h4 {
		font-weight: 600;
	}

  .sse-finalise-summary .td-idea-item {
    background: none;
    padding: 5px 0px;
    margin: 0px;
    border-radius: 0px;
    border: none;
}

/* Usually the td-idea-text is black. But the sse-finalise-summary elements actually have a grey text colour, which we want to keep for consistency */
.sse-finalise-summary .td-idea-text {
  color: inherit;
}

  /* We want a line between each idea, but not after the last one */
  .sse-finalise-summary .td-idea-item:last-child {
    border-bottom: none;
  }
  /* Some ideas are in the first ul (td-curriculum-idea) and some are in the second ul (td-idea-list) */
  /* Either of the ul elements could be empty, so we need to target the last-child of the td-idea-item elements */
  /* We also want to make sure that if there are multiple ul elements, we only add the border to the last td-idea-item in each ul, except for the last ul */
  .sse-finalise-summary ul:not(:last-child) .td-idea-item:last-child,
  .sse-finalise-summary .td-idea-item {
    border-bottom: 1px solid #e8f2ec;
  }
	
/**************************************/


#shareable-access-error {
	color: #dc3545;
}

#shareable-access-shortcode {
	margin: 10px 0 10px 10px;
    display: flex;
	flex-direction: row;
    gap: 4px;
	padding: 8px 10px;
    border-radius: 30px;
    background: #1c8c6b;	
    align-items: center;
}

#shortcode_access_code {
	padding:5px;
}

#open-access-modal { 	
    padding: 5px;
    font-weight: 700;
    font-size: large;
    color: white;
	height: 40px;
}


#open-access-modal .btn-icon {
	width: 24px;
	height: 24px;
}

#shareable-access-shortcode input {
	border-radius: 25px;
    font-family: Inter, sans-serif;
    border: 0;
    font-size: 16px;
    text-align: center;
    padding: 10px 20px;
	
    width: 140px;
	height: 40px;
    box-sizing: border-box;
	
    background: white;
}




.share-code-form input[type="text"] {
    width: 100px;
    padding: 4px;
}

/* Base banner: hidden by default, shown via JS */
.sxr-seat-banner {
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin-bottom: 20px;
	
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.sxr-seat-banner__content {
	font-family: Inter, Arial, sans-serif;
}

.sxr-seat-banner__title-container {
    display: flex;
	flex-direction: row;
    justify-content: center;
    margin-bottom: 0.6rem;	
	gap: 6px;
}

/* State colours */
.sxr-seat-banner--warning {
  background: #f7cd84; /*#eaecea;*/
}
.sxr-seat-banner--danger {
  background: #e18888;
}

.sxr-seat-banner__icon { font-size: 1.1rem; }
.sxr-seat-banner__title { display:block; margin:0 0 .15rem;
    text-align: center;
    font-size: large; }
.sxr-seat-banner__text { text-align:center; }


#limit-close-btn {
    margin: auto;
    font-size: medium;
}



#shareable-access-shortcode input:focus,
#shareable-access-shortcode input:focus-visible,
#shareable-access-shortcode button:focus,
#shareable-access-shortcode button:focus-visible {
	outline: none;
}

.share-code-form form {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#shareable-access-form button,
#shareable-access-form input {
	font-size: medium;
    padding: 8px;
    text-align: center;
}

#shareable-access-form input[type=submit],
#shareable-access-form button[type=submit],
#shareable-access-form #shareable-back-button {
    border: 0;
    border-radius: 4px;
    padding: 12px 24px;
    font-weight: 500;
}

#shareable-access-form input[type=submit],
#shareable-access-form button[type=submit] {
    color: white;
    background: #2DA782
}

#shareable-access-form input[type=submit]:hover,
#shareable-access-form button[type=submit]:hover {
    background: #248769;
}


.share-code-form input[type="text"] {
    width: 100px;
    padding: 4px;
}

#shareable-access-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* full viewport width */
  height: 100vh; /* full viewport height */
  z-index: 9999;
  overflow: hidden; /* prevents inner scrolling */
  display: flex;
  align-items: center;
  justify-content: center;
}

#shareable-access-modal .modal-content {
	display: none;
    text-align: center;
}

body.modal-open {
  overflow: hidden;
}

.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* For Safari support */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-background::after {
  content: '\f110';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 60px;
  color: #22cd99;
  animation: sxr-spin 0.9s linear infinite;
}

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

.modal-content {
  position: relative;
  z-index: 2;
  background: white;
  margin: 20px;
  padding: 0 30px 20px;
  border-radius: 4px;
}

/* Style for the modal welcome message */
#shareable-access-modal .welcome-message {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

#shareable-access-modal .welcome-instructions {
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
}


/* Optional: Center the modal content */
#shareable-access-modal button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	height: 45px;
}

#shareable_enter button[type="submit"] {
    margin: auto;
    margin-bottom: 24px;
}

#shareable_enter  #shareable-back-button {
    box-shadow: none;
}

#shareable_spinner .spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #1c8c6b;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

#shareable_spinner {
	margin: 24px auto 0;
}

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


.tab-body h5 {
    font-size: 16px;
    font-weight: 500;
    margin-top: 16px;
    margin-bottom: 8px;
}

.prompt-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
}

.prompt-selector > label,
.prompt-selector .subject-year label,
.sxr-tf-field > label,
.td-field > label,
.td-key-ideas > label,
.td-preview-prompt > label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 6px;
    margin-top: 14px;
}

.prompt-selector .subject-year label {
    margin-top: 0;
}

#shareable_subject,
#shareable_year {
    width: 100%;
}

.subject-year {
    margin-bottom: 0;
}

#shareable_topic {
    margin-bottom: 16px;
}

.subject-year {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}

.subject-year div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/*******/

button {
    text-decoration: none;
    background-color: #1c8c6b;
    color: white;
    padding-top: 12px;
    padding-right: 16px;
    padding-bottom: 12px;
    padding-left: 16px;
    border-radius: .33rem;
    border: 0;
    font-weight: 500;
    cursor: pointer;
    font-family: Inter, sans-serif;
}

button:hover {
    box-shadow: rgb(0 0 0 / .1) 0 4px 12px;
    transform: translateY(-1px);
}

/*************/
#history-container {
    max-width: 1200px;
    margin: auto;
    margin-top: 80px;
	width: 90%;
}

#history-container button {
	background: #2da782 !important;
}

#history-container button:hover {
	background: #1f735a !important;
}

.page-account div.um-account.uimob800 .um-account-meta a {
	border: 0;
}

/* Transcript review page */
.task-student-header form {
    display: flex;
    margin-top: 18px;
    margin-bottom: 48px;
    justify-content: flex-end;
}

.task-student-header form button {
	margin-top: 18px;
}

.task-header-details {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

table.transcript-table {
	border-collapse: collapse;
    max-width: min(90%, 1200px);
    margin: auto;
    margin-top: 20px;
    box-sizing: border-box;
}


.behaviour-readmitted {
	font-weight:bold;
	color:#e7863e;
}

.behaviour-fullscreen {}

.behaviour-prevented {
	color:#c60909; 
	font-weight:bold;
}

.behaviour-access,
.behaviour-ended {
	color:#2da782; 
	font-weight:bold;	
}

h3.transcript-heading,
h3.behaviour-log {
    font-weight: 600;
}

table.transcript-table td,
table.transcript-table th {
	/*border: 1px solid black;*/
	margin-top: 20px; 
	padding: 12px 5px;
}

table.transcript-table .role-title {
	min-width: 100px;
	text-align: center;
	font-weight: 600;
	vertical-align: text-top; 
}

table.transcript-table p {
	margin: auto;
	margin-bottom: 12px;
}

/* Prompt Builder and Let's Discuss Page */

.letsdiscuss .input-holder {
	display: flex;
    justify-content: space-between;
}

.letsdiscuss .input-holder input {
    width: 100%;
    box-sizing: border-box;
}

.letsdiscuss select {
	font-family: Inter, sans-serif;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
}

.letsdiscuss input {
	font-family: Inter, sans-serif;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    width: 600px;
	max-width: 95%;
}

#history-container button,
.letsdiscuss button {
    padding: 14px;
    font-size: 16px;
    background-color: #2DA782;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.letsdiscuss .send-msg-holder {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.letsdiscuss .input-holder {
	display: flex;
	flex-direction: column;
}

.letsdiscuss .button-holder {
	margin-top: 16px;
	display: flex;
	gap: 8px;
}

.letsdiscuss .button-holder button {
	width: 100%;
}

.letsdiscuss div.input-holder button {
	min-width: 150px;
    padding: 12px;
    font-size: 14px;
	
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	flex: 1;
}

.sendBtn {
    display: flex;
    flex-direction: column;
    gap: 8px;	
}

.helpBtn {
    flex-wrap: wrap;
    gap: 8px;
    align-content: center;
}

.letsdiscuss button.end-btn,
.letsdiscuss button.reset-btn {
	background-color: #602545;
	color: white;
}

div.wp-block-button,
button {
  transition: all 350ms;
  	box-shadow: rgba(0, 0, 0, 0.02) 0 4px 2px;
}

div.wp-block-button:hover,
button:hover {
	/*opacity: 0.9;*/
  	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  	transform: translateY(-1px);
}

div.wp-block-button:active,
button:active {
  box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
  transform: translateY(0);
}



.letsdiscuss button.end-btn:hover,
.letsdiscuss button.reset-btn:hover {
	/*background-color: #602545;*/
	color: white;
}

.letsdiscuss button.sysprompt-toggle {
	background-color: #c6c8c7;
    padding: 6px 8px;
    font-size: 14px;
}

#prompt-ul > li > a,
#topic-ul > li > a {
	color: #2DA782;
}

/* Global */
footer {
    margin: 24px 16px;
}

.footer-bulb {
	display: flex;
    justify-content: flex-end;
}

/* Main Form Container */
.form-container {
    margin: 0 auto;
}

.form-container #subjects-form > input[type=submit] {
	font-size: 16px;
    color: white;
    background: #2DA782;
    border: 0;
    border-radius: 8px;
    padding: 8px 24px;
}

.form-container #subjects-form,
.form-container .dropdown-container {
	width: 100%;
	display: flex;
    flex-direction: row;
    gap: 16px;
}



/* Form Title */
.form-container h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

/* Flex container for the form fields */
.form-container .form-fields {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* Style for each select dropdown */
.form-container select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fafafa;
    color: #333;
    transition: border-color 0.3s;
}

/* Focus State for Selects */
.form-container select:focus {
    border-color: #4CAF50;
    outline: none;
}

/* Submit Button */
.form-container button[type="submit"] {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Hover Effect for Button */
.form-container button[type="submit"]:hover {
    background-color: #45a049;
}



/* Mobile Responsiveness */
@media (max-width: 768px) {
	
	.letsdiscuss .send-msg-holder,
	.letsdiscuss .button-holder,
	.letsdiscuss .help-button-holder {
		flex-direction: column;
		gap: 8px;
	}
	
	.letsdiscuss div.input-holder {
		display: flex;
		flex-direction: column;
	}

	.letsdiscuss div.input-holder * {
		box-sizing: border-box;
		width: 100%;
		max-width: unset;
		flex-direction: column;
	}

    .form-container {
        padding: 20px;
    }

.form-container #subjects-form,
.form-container .dropdown-container  {
        flex-direction: column; /* Stack the fields vertically on smaller screens */
    }
	
	.form-container .dropdown-container {
		flex-direction: column;
	}

    .form-container select, 
    .form-container button[type="submit"] {
        font-size: 14px;
        padding: 10px;
    }
}

/* Mobile Optimized Layout for Small Screens */
@media (max-width: 480px) {
    .form-container h2 {
        font-size: 20px;
    }

    .form-container select, 
    .form-container button[type="submit"] {
        font-size: 12px;
        padding: 8px;
    }
}


.transcript-help-btn {
	color: #ab3644;
    font-style: italic;
}


.feedback-btn a{
	display: flex;
    flex-direction: row;
    gap: 8px;
}


.transcript-table .assistant-role {
	background: #E3F8EF;
}

.transcript-table thead {
	background: #9AD5C3;	
}




/* General chatbox and input styling */
#chatbox {
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    height: 300px;
    overflow-y: auto;
    box-sizing: border-box;
	text-align: left;
}

.input-holder {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.input-holder input {
    flex: 1;
    padding: 8px;
}

/* Styles for help buttons */
.letsdiscuss .help-button-holder {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.letsdiscuss .helpBtn {
    width: 100%;
    color: #2da782;
    background: #E3F8EF;
    font-size: 14px;
}

.letsdiscuss .helpBtn i {
    margin-right: 8px;
    transition: transform 0.5s ease, opacity 0.5s ease;
	width: fit-content;
}

.letsdiscuss .helpBtn:hover i {
    transform: rotate(0deg) scale(1.2);
    animation: wobble 1s ease-in-out infinite;
}

@keyframes wobble {
    0% { transform: rotate(0deg) scale(1.2); }
    25% { transform: rotate(-10deg) scale(1.2); }
    50% { transform: rotate(10deg) scale(1.2); }
    75% { transform: rotate(-5deg) scale(1.2); }
    100% { transform: rotate(0deg) scale(1.2); }
}

#sysprompt-container {
	border: 1px solid #ccc; 
	padding: 10px; 
	margin-top: 20px;
}

/* Additional styles for fullscreen/assessment UI */
#progressBarToast {
    text-align: center;
    margin: 10px 0;
}
#progressBarToast b {
    margin-right: 5px;
}
#progressBar {
    width: 100%;
    background-color: #eee;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}
#progressBarFill {
    display: block;
    height: 100%;
    width: 0;
    background-color: #2da782;
}

.lockout {
    border: 1px solid #333;
    padding: 20px;
    background: #f2f2f2;
    margin-top: 0;
    font-size: larger;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.invigilation {
    top: 0;
    left: 0;
    position: absolute;
    background: white;
    z-index: 9999;
    border: 6px solid #602545;
    box-sizing: border-box;
    overflow: hidden;
}

.fillavailable {
    width: 100vw; /* Most widely supported fallback */
    width: stretch; /* Modern CSS standard */
    width: -moz-available; /* Firefox-specific */
    width: -webkit-fill-available; /* Safari/Chrome-specific */
    
    height: 100vh; /* Most widely supported fallback */
    height: stretch; /* Modern CSS standard */
    height: -moz-available; /* Firefox-specific */
    height: -webkit-fill-available; /* Safari/Chrome-specific */
}

.invigilation #history-container {
	display: none;
}

.lockout {
	position: fixed;
	background-color: #fdfbfa;
	top: 0;
	left: 0;
	z-index: 99999;
	pointer-events: all; /* Prevent interactions behind it */
	border: 6px solid #602545;
	box-sizing: border-box;
	overflow: hidden;
}

.targetDiv {
	width: 100vw;
	height: 100vh;
	position: absolute;
	background-color: #add8e670;
	top: 0;
	left: 0;
	user-select: none;
	visibility: hidden;
}

.meter {
  box-sizing: content-box;
  height: 20px; /* Can be anything */
  position: relative;
  margin: 60px 0 20px 0; /* Just for demo spacing */
  background: #555;
  border-radius: 25px;
  padding: 10px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43, 194, 83);
  background-image: linear-gradient(
    center bottom,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.meter > span:after,
.animate > span > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

.animate > span:after {
  display: none;
}



    #progressBarToast {
      position: fixed;
      top: 20px;
      left: 20px;
      width: 300px;
      padding: 10px;
      background-color: rgba(28, 60, 71, 0.85); /* rgba(0, 0, 0, 0.7); */
      color: white;
      border-radius: 5px;
      font-size: 15px;
      display: none;  /* Initially hidden */
      z-index: 9999;
    }

    #progressBar {
      width: 100%;
      height: 10px;
      background-color: #1C3C47; /* #E3F8EF; */
      border-radius: 5px;
      overflow: hidden;
      
		padding: 0;
		margin: 8px 0 0 0;
    }

    #progressBarFill {
      height: 100%;
      background-color: #2DA782;
      width: 0;
      transition: width 1s linear;
    }


@media (max-width: 768px) {
	
	#lockoutDiv {
        padding: 16px;
		overflow: auto;
	}
}


/* ===== END: shareable-post.css ===== */

/* ===== START: letsdiscuss-style.css ===== */
.invigilation  > div > div
{
	display: flex;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

.intro-info h1, 
.intro-info p {
	text-align: center;
}

.intro-info li {
	margin-bottom:16px;
}

.invigilation .intro-info {
	display: none;
}

.intro-info > div {
	margin: 40px; 
	padding: 20px; 
	border: 1px solid #2da782; 
	border-radius: 8px;
}



.invigilation .intro-title {
	margin-bottom: 40px;
    margin-top: 80px;
}

#history-container button {
	background: #2da782 !important;
}

#history-container button:hover {
	background: #1f735a !important;
}

.page-account div.um-account.uimob800 .um-account-meta a {
	border: 0;
}
/* Prompt Builder and Let's Discuss Page */

.letsdiscuss .input-holder {
	display: flex;
    justify-content: space-between;
}

.letsdiscuss .input-holder input {
    width: 100%;
    box-sizing: border-box;
}

.letsdiscuss select {
	font-family: Inter, sans-serif;
    padding: 8px;
    font-size: 16px;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
}

.letsdiscuss input {
	font-family: Inter, sans-serif;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    width: 600px;
	max-width: 95%;
}

#history-container button, .letsdiscuss button {
    padding: 14px;
    font-size: 16px;
    background-color: #2DA782;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.letsdiscuss .send-msg-holder {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.letsdiscuss .input-holder {
	display: flex;
	flex-direction: column;
}

.letsdiscuss .button-holder {
	margin-top: 16px;
	display: flex;
	gap: 8px;
}

.letsdiscuss .button-holder button {
	width: 100%;
}

.helperBtnHolder {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.letsdiscuss button.end-btn,
.letsdiscuss button.reset-btn {
	background-color: #602545;
	color: white;
}

#loginForm > p {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: fit-content;
    margin: 0 auto;
    gap: 16px;
}

div.wp-block-button,
button {
  transition: all 350ms;
  	box-shadow: rgba(0, 0, 0, 0.02) 0 4px 2px;
}

div.wp-block-button:hover,
button:hover {
	/*opacity: 0.9;*/
  	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  	transform: translateY(-1px);
}

div.wp-block-button:active,
button:active {
  box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
  transform: translateY(0);
}



.letsdiscuss button.end-btn:hover,
.letsdiscuss button.reset-btn:hover {
	/*background-color: #602545;*/
	color: white;
}

.letsdiscuss button.sysprompt-toggle {
	background-color: #c6c8c7;
    padding: 6px 8px;
    font-size: 14px;
}

#prompt-ul > li > a,
#topic-ul > li > a {
	color: #2DA782;
}


/* Main Form Container */
.form-container {
    margin: 0 auto;
}

.form-container #subjects-form > input[type=submit] {
	font-size: 16px;
    color: white;
    background: #2DA782;
    border: 0;
    border-radius: 8px;
    padding: 8px 24px;
}

.form-container #subjects-form,
.form-container .dropdown-container {
	width: 100%;
	display: flex;
    flex-direction: row;
    gap: 16px;
}



/* Form Title */
.form-container h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

/* Flex container for the form fields */
.form-container .form-fields {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* Style for each select dropdown */
.form-container select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fafafa;
    color: #333;
    transition: border-color 0.3s;
}

/* Focus State for Selects */
.form-container select:focus {
    border-color: #4CAF50;
    outline: none;
}

/* Submit Button */
.form-container button[type="submit"] {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Hover Effect for Button */
.form-container button[type="submit"]:hover {
    background-color: #45a049;
}



/* Mobile Responsiveness */
@media (max-width: 768px) {
	
	.intro-info > div {
		margin: 20px;
	}
	
	.letsdiscuss .send-msg-holder,
	.letsdiscuss .button-holder,
	.letsdiscuss .help-button-holder {
		flex-direction: column;
		gap: 8px;
	}
	
	.letsdiscuss div.input-holder{
		display: flex;
		flex-direction: column;
	}

	.letsdiscuss div.input-holder * {
		box-sizing: border-box;
		width: 100%;
		flex-direction: column;
	}

    .form-container {
        padding: 20px;
    }

.form-container #subjects-form,
.form-container .dropdown-container  {
        flex-direction: column; /* Stack the fields vertically on smaller screens */
    }
	
	.form-container .dropdown-container {
		flex-direction: column;
	}

    .form-container select, 
    .form-container button[type="submit"] {
        font-size: 14px;
        padding: 10px;
    }
}

/* Mobile Optimized Layout for Small Screens */
@media (max-width: 480px) {
    .form-container h2 {
        font-size: 20px;
    }

    .form-container select, 
    .form-container button[type="submit"] {
        font-size: 12px;
        padding: 8px;
    }
}


.transcript-help-btn {
	color: #ab3644;
    font-style: italic;
}


.feedback-btn a{
	display: flex;
    flex-direction: row;
    gap: 8px;
}


.transcript-table .assistant-role {
	background: #E3F8EF;
}

.transcript-table thead {
	background: #9AD5C3;	
}


/* General chatbox and input styling */
#chatbox {
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    height: 300px;
    overflow-y: auto;
    box-sizing: border-box;
	text-align: left;
}

.input-holder {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.input-holder input {
    flex: 1;
    padding: 8px;
}


/* Styles for help buttons */
.letsdiscuss .help-button-holder {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.letsdiscuss .helpBtn {
    width: 100%;
    color: #2da782;
    background: #E3F8EF;
    font-size: 14px;
}

.letsdiscuss .helpBtn i {
    margin-right: 8px;
    transition: transform 0.5s ease, opacity 0.5s ease;
	width: fit-content;
}

.letsdiscuss .helpBtn:hover i {
    transform: rotate(0deg) scale(1.2);
    animation: wobble 1s ease-in-out infinite;
}

@keyframes wobble {
    0% { transform: rotate(0deg) scale(1.2); }
    25% { transform: rotate(-10deg) scale(1.2); }
    50% { transform: rotate(10deg) scale(1.2); }
    75% { transform: rotate(-5deg) scale(1.2); }
    100% { transform: rotate(0deg) scale(1.2); }
}

#sysprompt-container {
	border: 1px solid #ccc; 
	padding: 10px; 
	margin-top: 20px;
}

/* Additional styles for fullscreen/assessment UI */
#progressBarToast {
    text-align: center;
    margin: 10px 0;
}
#progressBarToast b {
    margin-right: 5px;
}
#progressBar {
    width: 100%;
    background-color: #eee;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}
#progressBarFill {
    display: block;
    height: 100%;
    width: 0;
    background-color: #2da782;
}

.lockout {
    border: 1px solid #333;
    padding: 20px;
    background: #f2f2f2;
}

.invigilation {
    top: 0;
    left: 0;
    position: absolute;
    background: white;
    z-index: 9999;
    border: 6px solid #602545;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 0 !important;
}

.fillavailable {
    width: 100vw; /* Most widely supported fallback */
    width: stretch; /* Modern CSS standard */
    width: -moz-available; /* Firefox-specific */
    width: -webkit-fill-available; /* Safari/Chrome-specific */
    
    height: 100vh; /* Most widely supported fallback */
    height: stretch; /* Modern CSS standard */
    height: -moz-available; /* Firefox-specific */
    height: -webkit-fill-available; /* Safari/Chrome-specific */
}

.invigilation #history-container {
	display: none;
}


.lockout {
	position: fixed;
	background-color: #fdfbfa;
	top: 0;
	left: 0;
	z-index: 99999;
	pointer-events: all; /* Prevent interactions behind it */
	border: 6px solid #602545;
	box-sizing: border-box;
	overflow: hidden;
}

.targetDiv {
	width: 100vw;
	height: 100vh;
	position: absolute;
	background-color: #add8e670;
	top: 0;
	left: 0;
	user-select: none;
	visibility: hidden;
}


.meter {
  box-sizing: content-box;
  height: 20px; /* Can be anything */
  position: relative;
  margin: 60px 0 20px 0; /* Just for demo spacing */
  background: #555;
  border-radius: 25px;
  padding: 10px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.animate > span:after {
  display: none;
}



    #progressBar {
      width: 100%;
      height: 10px;
      background-color: #1C3C47; /* #E3F8EF; */
      border-radius: 5px;
      overflow: hidden;
      
		padding: 0;
		margin: 8px 0 0 0;
    }

    #progressBarFill {
      height: 100%;
      background-color: #2DA782;
      width: 0;
      transition: width 1s linear;
    }


@media (max-width: 768px) {
	#loginForm tr {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: auto;
	}
	
	#loginForm td {
		text-align: center !important;
	}
	
	#lockoutDiv {
        padding: 16px;
		overflow: auto;
	}
}

.send-msg-holder {
    height: 40px;
    min-height: fit-content;
}

#userInput-preview,
#user_input {
    font-family: Inter, sans-serif;
    font-size: 16px;
    border-radius: 4px;
    padding: 8px;
	min-height: 40px;
    max-height: 120px;
}

#userInput-preview {
    height: 70px;
}

/* ===== END: letsdiscuss-style.css ===== */

/* ===== START: global.css ===== */

.wp-block-site-title {
	font-weight: 600;
    font-size: x-large;
}

.um-cover-add-i {
	background-image: url(https://tm-media-storage.s3.ap-southeast-2.amazonaws.com/shareable-img/pattern_waves_repeat.png);
}

nav {
    font-weight: 500;
}

#menu-main {
	margin-left: auto;
}


/* ===================
   DROP ZONE & OUTPUT
   =================== */

#ctext-app {
	max-width: 600px;
	margin: 1em auto;
}

#drop-zone {
	border: 2px dashed #2DA782;
	padding: 30px 20px;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.2s ease;
	color: #2DA782;
	font-size: 14px;
	line-height: 1.6;
	background-color: #f9fafb;
}

#drop-zone:hover {
	border-color: #1f735a;
	background-color: #f4fbf7;
}

#drop-zone.hover {
	border-color: #1f735a;
	background-color: #f4fbf7;
}

#output {
	margin-top: 1em;
	white-space: pre-wrap;
	background: #fafafa;
	border: 1px solid #ddd;
	padding: 1em;
	border-radius: 8px;
}

/* ===================
   BUTTONS
   =================== */

button,
input[type="submit"],
.reset-btn {
	text-decoration: none;
	background-color: #1c8c6b;
	color: white;
	padding: 12px 16px;
	border-radius: 0.33rem;
	border: 0;
	font-weight: 500;
	font-family: Inter, sans-serif;
	cursor: pointer;
	transition: all 350ms;
	box-shadow: rgba(0, 0, 0, 0.02) 0 4px 2px;
}

button:hover,
input[type="submit"]:hover {
	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
	transform: translateY(-1px);
}

button:active,
input[type="submit"]:active {
	box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
	transform: translateY(0);
}

/* Spinner */
#shareable_spinner .spinner {
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color: #1c8c6b;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

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

/* ===================
   RUBRIC BUILDER
   =================== */

.rubric-container {
	max-width: min(100%, 1200px);
	margin: auto;
	border-radius: 5px;
	color: #1C3C47;
}

.rubric-row,
.rubric-header,
.rubric-cell {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.rubric-header {
    color: #1f3d2b;
    background: #e3f8ef;
	padding: 10px;
}

.rubric-cell {
	background: #E3F8EF;
	border: 3px solid #E3F8EF;
	text-align: center;
	transition: background 0.3s;
}

.rubric-cell:hover {
	background: #d2efe3;
	border-color: #d2efe3;
}

.rubric-cell.selected {
	border-color: #9dc5b4;
}

.criterion-hr {
	margin: 24px 0;
	border: 0.5em solid #ededed;
}


/*************/

.rubric-container .inner-label {
    max-width: 350px;
    margin: auto
}

.rubric-container button {
	font-size: 14px;
}

.rubric-container .rubric-score {
    display: flex;
    flex-direction: column;
	font-weight: 600;
}

.rubric-container .rubric-total {
	font-weight: 400;
	
}

@media (max-width: 1000px) {
	.rubric-container .rubric-title {
		display: none;
	}
	
	.rubric-container .rubric-row {
		flex-wrap: wrap;
	}
	.rubric-container .rubric-criterion {
		width: 768px;
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	.rubric-container .rubric-header {
		display: none;
	}
	
	.rubric-container .rubric-cell {
		flex: auto;
		width: 768px;
	}
}

.rubric-container {
    font-size: smaller;
}

.rubric-container.read-only .rubric-cell {
	pointer-events: none;
    cursor: pointer;
}

.read-only .rubric-score {
	font-size: larger;
}

.criterion-hr {
	margin: 24px 0;
    border: 0.5em solid #ededed;
	width: 100%;
}

.rubric-container button{
    padding: 8px 14px;
    font-size: 14px;
    background-color: #2DA782;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 8px;
}

.rubric-container button:hover{
	background: #1f735a !important;
}

.button-container {
    padding: 12px 12px 0 12px;
	display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.rubric-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-weight: 500;	
    
    color: #1f3d2b;
    background: #e3f8ef;
    margin-bottom: 10px;	
    padding: 10px;
	
	border-radius: 12px 12px 0 0;
}

.rubric-title {
    width: 220px;
}

.rubric-level-header {
    flex: 1;
    text-align: center;
}

.rubric-body {
    display: flex;
    flex-direction: column;
}

.rubric-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	align-items: stretch;
    padding: 10px;
    border-bottom: 1px solid #d1e7db;
    background: white;
    gap: 8px;
}

/*.rubric-row:last-child {
    border-bottom: none;
}*/

#rubric-builder #add-header {
	font-weight: 500;
    margin-top: 10px;
    margin-left: 22px;
}

#rubric-builder .criteria-heading {
	font-weight: 500;
	font-size: 14px;
}

#rubric-builder .rubric-header-container{
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#rubric-builder .rubric-header {
	margin: 0;
}


.drag-handle::before,
.drag-indicator::before {
	content: '=';
    font-size: large;
	cursor: grab;
}

.criteria-drag-indicator::before{
	content: '⋮⋮';
    font-size: 20px;
    line-height: 1.8;
	cursor: grab;
}

#rubric-builder .rubric-criterion .criterion-name {
	width: 100%
}

#rubric-builder .rubric-criterion .criterion-description {
	width: 100%;
    font-weight: 400;
	margin-bottom: 16px;
}

#rubric-builder .criteria-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

#rubric-builder .rubric-criterion {
    width: 100%;
    flex-direction: row;
}

#rubric-builder .rubric-levels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 400;
    width: 100%;
}

#rubric-builder .rubric-level {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
}

#rubric-builder .level-label {
	flex-grow: 1;
}

#rubric-builder .level-score {
	width: 80px
}

#rubric-builder .criterion-title {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 10px;
}

#rubric-builder #add-criterion {	
    font-weight: 500;
}

.rubric-criterion {
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.rubric-container .rubric-criterion {
	width: 180px;
    flex-direction: column;
}

.rubric-criterion-header {
	display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.rubric-criterion-header .title{
    width: 100%;
    text-align: center;
}

/*.rubric-criterion-header .arrow::before {
	content: '▼';
}

.expanded .rubric-criterion-header .arrow::before {
	content: '▲';
}*/

.rubric-cell {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    background: #f4fcf9;
    cursor: pointer;
    transition: background 0.3s;
    border: 3px solid #f4fcf9;
}

.rubric-cell:hover {
    background: #d2efe3;
    border: 3px solid #d2efe3;
}

.rubric-cell.selected {
    border: 3px solid #9dc5b4;
}

.inner-score {
    font-size: 1.2em;
}

.rubric-criterion-description,
.inner-label {
    display: none;
    color: #1C3C47;
	font-size: smaller;
	font-weight: 400;
}

.expanded .rubric-criterion-description,
.expanded .inner-label {
	display: block;
}

.ai-heading,
.rubric-heading {
    margin: 32px auto 8px;
    font-weight: 600;
}

.ai-heading,
.rubric-heading  {
    width: min(100%, 1200px);
}

#rubric-score-container {
    max-width: 90%;
    margin: auto;	
}

/* ===================
   DISCUSSION/LET'S DISCUSS PAGE
   =================== */


/* make all H1s breathe a bit more */
.intro-title h1 {
  /* increase the line‑height so wrapped lines don’t overlap */
  line-height: 1.3 !important;
  /* add space below so the next block doesn’t sit on top */
  margin-bottom: 1rem !important;
}

#assessment-ui{
	width:100%;
}

.letsdiscuss .input-holder,
.letsdiscuss .send-msg-holder,
.letsdiscuss .button-holder,
.letsdiscuss .help-button-holder {
	display: flex;
	gap: 8px;
}

.letsdiscuss .helpBtn {
	background: #E3F8EF;
	color: #2DA782;
    width: fit-content;
    box-sizing: content-box;
}

.letsdiscuss button.end-btn {
    width: 100%;
    margin-top: 24px;
    justify-content: space-between;
}


.letsdiscuss button.end-btn,
.letsdiscuss button.reset-btn {
	background: #602545;
	height: 60px;
}


.letsdiscuss .send-msg-holder {
  display: flex;
  flex-wrap: wrap;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  
  gap: 0.5rem;            /* optional spacing */
  /*align-items: center;     vertically center top row */
  align-items: stretch;
}


/* 1. Input fills remaining space */
.letsdiscuss #user_input {
  flex: 1 1 0;            /* grow & shrink, no base width */
  -webkit-flex: 1 1 0;            /* grow & shrink, no base width */
  min-width: 0;           /* allow it to shrink below its content width */
}

/* 2. Buttons each take ~15% (→ 30% combined) */
/*    bump to ~17.5% each for 35% combined */
.letsdiscuss .helpBtn,
.letsdiscuss #sendBtn {
  flex: 0 0 15%;          /* no grow/shrink, fixed 15% of container */
  -webkit-flex: 0 0 15%;          /* no grow/shrink, fixed 15% of container */
}

/* 3. Last element jumps to its own row at 100% */
.letsdiscuss #end-btn {
  flex: 0 0 100%;         /* no grow/shrink, full width */
  -webkit-flex: 0 0 100%;         /* no grow/shrink, full width */
  /* optionally: order: 1; if you ever reorder things */
}


.transcript-table {
	width: 100%;
	border-collapse: collapse;
	font-family: Inter, sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
}

.transcript-table td,
.transcript-table th {
	/*border: 1px solid black;*/
	padding: 5px;
}

.transcript-table .assistant-role {
	background: #E3F8EF;
}

.transcript-table thead {
	background: #9AD5C3;
}


/* ===================
   INVIGILATION / LOCKOUT
   =================== */

.invigilation,
.lockout,
.targetDiv {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	background: white;
	/*border: 6px solid #602545;*/
	overflow: hidden;
}

.lockout {
	background: #fdfbfa;
	pointer-events: all;
}

.targetDiv {
	background: #add8e670;
	user-select: none;
	visibility: hidden;
}

/* ===================
   RESPONSIVE
   =================== */
   
   

@media (max-width: 600px) {
	.logo-div {
		float: left;
		position: absolute;
		left: 12px;
		top: 12px;
	}
	
	#menu-main > nav > button {
		box-shadow: none;
	}
	
	#menu-main > nav > button > svg {
		width: 35px;
		height: 35px;
	}
	
	.admin-submenu {
		margin-top: 16px !important;
	}
}

@media (max-width: 768px) {

  .letsdiscuss .send-msg-holder,
  .letsdiscuss .input-holder {
    /* stack instead of wrap */
    flex-direction: column;
    flex-wrap: nowrap;
	
    -webkit-flex-direction: column;
    -webkit-flex-wrap: nowrap;
	
	margin-bottom: 250px; /* fall back so there's room for the keyboard to open */
  }
  
  .letsdiscuss .send-msg-holder > *,
  .letsdiscuss .input-holder > * {
    flex: 0 0 100% !important;
    width: 100% !important;
	
    /* if you want a little breathing room: */
    margin-bottom: 0.5rem;
  }


	.letsdiscuss .send-msg-holder,
	.letsdiscuss .button-holder,
	.letsdiscuss .help-button-holder,
	.form-container #subjects-form,
	.form-container .dropdown-container {
		flex-direction: column;
	}

	.form-container select,
	.form-container button[type="submit"] {
		font-size: 14px;
		padding: 10px;
	}
}

@media (max-width: 480px) {
	.form-container h2 {
		font-size: 20px;
	}

	.form-container select,
	.form-container button[type="submit"] {
		font-size: 12px;
		padding: 8px;
	}
}

/* ===================
   ANIMATIONS
   =================== */

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

@keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 50px 50px;
	}
}

/************************/
h1.highlight,
.home h1.wp-block-post-title {
	transform: translateY(-800px);
	animation: slideUp .8s ease forwards .5s;
}

@keyframes slideUp {
	0% {
		transform: translateY(300px);
	}

	100% {
		transform: translateY(0px);
	}
}

@media screen and (max-width: 781px) {
	.flipcols>div {
		flex-direction: column-reverse;
	}
}

/* Base overlay styling */
/*.home .overlay {
	position: fixed;
	top: -10%;
	left: 0;
	width: 100%;
	height: 110%;
}*/

/* Three separate layers with different colors and staggered animations */
/*.home .overlay-1 {
	background-color: #602545;
	z-index: 3;
	animation: swipeAway 0.8s ease-in-out forwards 0.1s;
}

.home .overlay-2 {
	background-color: #1C3C47;
	z-index: 2;
	animation: swipeAway 0.8s ease-in-out forwards 0.2s;
}

.home .overlay-3 {
	background-color: #2DA782;
	z-index: 1;
	animation: swipeAway 0.8s ease-in-out forwards 0.3s;
}*/

/* Smooth, faster swipe-up animation */
@keyframes swipeAway {
	0% {
		transform: translateY(0);
	}

	70% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(100%);
		visibility: hidden;
	}
}


/* === Styling social login === */
#wp--skip-link--target form p.um-notice.err>a {
	color: white !important;
}

.um-notice.err {
	margin-right: 10px !important;
}

div.um-field.um-social-login-btns a {
	box-shadow: #00000021 0 1px 4px;
	border: 1px solid #8C8C8C !important;
	border-radius: 0 !important;
	width: 100%;
}

.um-button-social.um-button-google span {
	width: auto;
}

.um-button-social.um-button-google {
	display: flex;
	justify-content: center;
}

.um-col-alt {
	display: flex;
	flex-wrap: wrap;
}

.um-field.um-field-c {
	flex-basis: 100%;
	padding: 10px;
}

.um-field.um-field-shortcode {
	padding: 0;
}


.wpo365-mssignin-wrapper {
	padding: 0 !important;
	margin-bottom: 24px;
}

.wpo365-mssignin-spacearound .wpo365-mssignin-button {
	max-height: unset;
	height: auto;
}

.wpo365-mssignin-button .wpo365-mssignin-label {
	font-family: Inter, sans-serif;
	font-weight: 400;
	color: black;
	white-space: break-spaces;
	max-height: unset;
	height: auto;
}

div.um-field.um-social-login-btns>div>div.um-left.um-half>a:hover,
div.um-field.um-social-login-btns a:hover {
	transform: scale(1.05);
	background-color: white !important;
}


div.um-field.um-social-login-btns div.um-left.um-half {
	width: 100%;
	max-width: 400px;
}

.um-col-alt {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

div.um a:not(.button, .um-button, .um-modal-btn) {
	color: white !important;
	font-weight: 600;
}

div.um a:not(.button, .um-button, .um-modal-btn):hover {
	color: white !important;
	text-decoration: underline;
}

/* === Theme colours to fluent forms and general site CSS === */
#menu-item-upload {
	color: black;
}

#fluentform_7 .ff-el-group.ff_list_buttons .ff-el-form-check label>span {
	border: 1px solid lightgrey !important;
	margin: 4px;
	border-radius: 8px;
}

#fluentform_7 .ff-el-group.ff_list_buttons .ff-el-form-check label>span:hover {
	color: #2da782 !important;
	border: 1px solid #2da782 !important;
}

#fluentform_7 .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label>span {
	background: #2da782 !important;
	border: 1px solid #2da782 !important;
}

#fluentform_7 .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label>span:hover {
	color: white !important;
}

@media (max-width: 768px) {
	.wp-container-core-group-is-layout-5 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	body>div.wp-site-blocks>header>div>div>div.wp-block-group.is-layout-flex.wp-container-core-group-is-layout-2.wp-block-group-is-layout-flex>div.wp-block-group.is-layout-flow.wp-container-core-group-is-layout-1.wp-block-group-is-layout-flow {
		display: none;
	}

	.wp-container-core-group-is-layout-5 {
		justify-content: space-between;
	}
}

.page-register .entry-content {
	text-align: center;
}

.no-gap {
	gap: 0;
}

.admin-submenu {
	gap: 0;
	margin-top: 8px !important;
}

/** ULTIMATE MEMBER FIXES **/
.um-register a,
.um-login a {
	box-shadow: none;
}

.um_request_name {
	display: none;
}

/** FLUENT FORMS **/

#wp--skip-link--target .um-form a {
	color: black !important;
}

#fluentform_7 .ff_submit_btn_wrapper>button {
	background: #2da782 !important;
}

#fluentform_7 .ff_submit_btn_wrapper>button:hover {
	background: #1f735a !important;
}

#fluentform_7 input,
#fluentform_7 textarea {
	font-family: 'Inter', sans-serif;
	font-size: medium;
}

/** MAIN **/

.admin-submenu a {
	font-weight: 700;
	color: #2da782 !important;
}

.admin-submenu a:hover {
	color: #1f735a !important;
	text-decoration: none !important;
}

.green-spacer {
	height: 3px;
	margin-bottom: 36px !important;
}

.text-center {
	text-align: center;
}

.margin-center {
	margin: auto !important;
	justify-content: center;
}

.line-spacing-wider {
	line-height: 1.5;
}

/* === Feedback Form CSS === */
.ff_conv_app_9 .f-enter .f-enter-desc,
.ff_conv_app_9 span.f-key-hint,
.ff_conv_app_9 .f-key-hint,
.ff_conv_app_9 .footer-inner-wrap .f-nav {
	display: none !important;
}

#ffc_app_instance_1 div.vff-animate.f-fade-in.f-enter button {
	font-weight: 500;
}

#ffc_app_instance_1>div>div>div.f-container>div>div.vff-animate.q-form.f-fade-in-up.field-sectionbreak>div>div>div.ffc_question.f-section-wrap>div>div.f-answer.f-full-width {
	color: #1c3c47 !important;
}

#ffc_app_instance_1>div>div>div.f-container>div>div.vff-animate.q-form.f-fade-in-up.field-sectionbreak>div>div>div.ffc_question.f-section-wrap {
	margin-bottom: 80px;
}

#ffc_app_instance_1>div>div>div.f-container>div>div.vff-animate.q-form.f-fade-in-up>div>div,
#ffc_app_instance_1>div>div>div.f-container>div>div.vff-animate.q-form.f-fade-in-up.field-multiplechoice>div>div,
#ffc_app_instance_1>div>div>div.f-container>div>div.vff-animate.q-form.f-fade-in-up.field-sectionbreak .ff_conv_input.q-inner,
#ffc_app_instance_1 div.f-container div.vff-animate.q-form.f-fade-in-up.field-sectionbreak .ff_conv_app .ff_conv_input,
#ffc_app_instance_1 div.f-container div.vff-animate.q-form.f-fade-in-up.field-sectionbreak .ff_conv_section_wrapper.ff_conv_layout_default {
	padding-top: 0 !important;
}

#ffc_app_instance_1>div>div>div.f-container>div>div.vff-animate.q-form.f-fade-in-up.f-has-value.field-multiplechoice>div>div>div.ffc_question>div>div.f-answer.f-full-width>div>ul li.f-selected span.f-key {
	background-color: #258769 !important;
}


#ffc_app_instance_1 .f-label-wrap .f-key {
	border-color: #258769 !important;
}

#ffc_app_instance_1 div.f-container div.vff-animate.q-form.f-fade-in-up.field-multiplechoice div.ffc_question div.f-answer.f-full-width ul>li>div,
#ffc_app_instance_1 .f-label-wrap .f-label {
	color: #258769 !important;
}


#ffc_app_instance_1 .f-container div.ffc_question div.f-answer.f-full-width .f-radios-wrap ul li:hover {
	background-color: #25876955 !important;
}

#ffc_app_instance_1 .f-container div.ffc_question div.f-answer.f-full-width .f-radios-wrap ul li,
.ff_conv_app_9 .f-answer .f-radios-wrap ul li {
	background-color: #25876911 !important;
	border: 1px solid #258769 !important;
}

.ff_conv_app_9 .vff-footer .f-progress-bar-inner {
	background-color: #258769 !important;
}

.ff_conv_app_9 .vff-footer .f-progress-bar {
	background-color: #25876955 !important;
}

#ffc_app_instance_1 .f-container div.ffc_question div.ffc_q_header span>svg,
.ff_conv_app_9 .ffc-counter-div .counter-icon-span svg {
	fill: #258769 !important;
}

#ffc_app_instance_1 div.ff_conv_input.q-inner,
.ff_conv_app_9 .ffc-counter-div span {
	color: #258769 !important;
}

#ffc_app_instance_1 div.f-answer.f-full-width>span>textarea::placeholder,
#ffc_app_instance_1 div.f-answer.f-full-width input[type=email]::placeholder,
#ffc_app_instance_1 div.f-answer.f-full-width input[type=text]::placeholder {
	color: #258769 !important;
}


#ffc_app_instance_1 div.f-answer.f-full-width>span>textarea,
#ffc_app_instance_1 div.f-answer.f-full-width input[type=email],
#ffc_app_instance_1 div.f-answer.f-full-width input[type=email]:focus,
#ffc_app_instance_1 div.f-answer.f-full-width input[type=text],
#ffc_app_instance_1 div.f-answer.f-full-width input[type=text]:focus,
.ff_conv_app_9 .f-answer input,
.ff_conv_app_9 .f-answer textarea {
	color: #258769 !important;
	box-shadow: #258769 0 1px !important;
}

.ff_conv_app_9 .q-inner .o-btn-action:hover {
	background: #258769 !important;
}

.ff_conv_app_9 .q-inner .o-btn-action {
	background: #2DA782 !important;
}

.ff_conv_app_9 button {
	background: #2DA782 !important;
}

.wp-editor-tabs {
	display: none;
}


/*****************************/

.send-msg-holder-preview {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	width: 100%;
	gap: 12px;
	margin-bottom: 32px;
}

.send-msg-holder-preview button {
	padding: 12px 16px;
	/*height: fit-content;*/
	white-space: nowrap;
	
    display: flex;
	flex-direction: row;
    align-items: center;
	
	
    width: 100px;
    text-align: center;
    justify-content: center;
}

.send-msg-holder-preview button.disabled {
	pointer-events: none;
	opacity: 0.5;
}

#clearChatBtn-preview {
    background: #E3F8EF;
    color: #2DA782;
}

.send-msg-holder-preview #userInput-preview {
	font-size: medium;
	margin: 0;
}

#chatbox-preview {
	height: 350px;
	border: 1px solid lightgrey;
	border-radius: 8px;
	margin-bottom: 24px;
	padding: 0 18px;
	overflow-y: scroll;
	overflow-x: hidden;
}

#finalise-desc {
	display: block;
}


table.shareable-dashboard {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

table.shareable-dashboard th,
table.shareable-dashboard td {
	border: 1px solid #ccc;
	padding: 8px;
}

table.shareable-dashboard th {
	background-color: #f9f9f9;
	text-align: center;
}

.action-icons {
	width: 70px;
}

.action-icons span {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 0 12px;
}

.action-icons span a {
	text-decoration: none;
}

.log-subject,
.log-year,
.access-count,
.access-code {
	text-align: center;
	font-size: inherit;	
    white-space: nowrap;
}

/*.toggle-status {
	cursor: pointer;
	font-weight: bold;
}*/


.toggle-icon {
	border: 1px solid #ccc;
	padding: 8px 16px;
	text-align: center;
}

.toggle-icon i {
	font-size: 32px;
}

.delete-post {
	cursor: pointer;
}

.view-logs a,
.view-post a {
	color: #2da782;
}

.view-logs a:hover,
.view-post a:hover {
	color: #238467;
}

.view-logs {
	text-align: center;
}

.action-icons {
	padding-right: 20px;
}

.gap {
	width: 16px;
	border: 0 !important;
	visibility: hidden;
}


.page-dashboard .wp-block-post-title {
	display: none !important;
}

.transcript-button {
	text-decoration: none;
    background-color: white;
    /*color: #1c8c6b;
    fill: #1c8c6b;
    stroke: #1c8c6b;
    padding: 4px 8px;
    border: 1px solid #c0dfd6 !important;*/
	color: rgb(119 138 145);
    fill: rgb(119 138 145);
    stroke: rgb(119 138 145);
    padding: 4px 12px;
    border: 1px solid #d6d6d6 !important;
	/**/
    border-radius: .33rem;
    border: 0;
    font-weight: 500;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 13px;
    transition: all 350ms;
    box-shadow: none;
    /*height: 20px;*/
}

.transcript-button > svg {
	height: 18px;
}
.transcript-button.visibility-icon {
    opacity: 0.6;
	border: 0 !important;	
    padding: 4px 4px 0;
	background: transparent !important;
    margin-bottom: -4px;
}

.transcript-button.visibility-icon.active {
    opacity: 1;
	color: #1c8c6b;
    fill: #1c8c6b;
    stroke: #1c8c6b;
}

.transcript-button > i {
	margin-right: 8px;
}

.transcript-button:hover {
	box-shadow: rgb(0 0 0 / .1) 0 4px 12px;
	transform: translateY(-1px);
}

.settings-links {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.settings-links .light-btn {
	border-radius: 8px;
}

.new-returning-container .button:hover,
.settings-links .light-btn:hover,
.settings-links .red-btn:hover {
	box-shadow: rgb(0 0 0 / .1) 0 4px 12px;
	transform: translateY(-1px);
}

.settings-links .red-btn {
	background: #602545;
	color: white;
	border-radius: 8px;
	padding: 12px 15px;
	
    display: flex;
    align-items: center;
}

.new-returning-container .green-btn {
	background: #2DA782;
	border: none;
	color: white;
	padding: 12px 15px;
}

h3.task-list-title {
	margin-top: 40px;
}

h3.settings-title {
	margin-top: 80px;
}

.sortable-header {
	cursor: pointer;
	user-select: none;
}

.sort-arrow {
	margin-left: 5px;
	font-size: 12px;
	color: #999;
}

.sortable-header.active .sort-arrow {
	color: #000;
}

.class-section-filter {
  font-size: inherit;
  font-family: inherit;
  border: none;
  cursor: pointer;
  color: #1c8c6b;
  background: none;
}


.new-returning-container {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	gap: 16px;
	margin-top: 32px;
}


.new-returning-container .button {
	border-radius: 4px;
	width: 100%;
	cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#shareable_enter .button {
	border-radius: 8px;
	cursor: pointer;
}

#shareable_enter {
	margin-top: 24px;
}

.fade-in {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.fade-in.show {
	opacity: 1;
}

.close-button {
	position: absolute;
	top: 12px;
	right: 16px;
	font-size: 24px;
	cursor: pointer;
	color: #555;
	transition: color 0.3s;
}

.close-button:hover {
	color: #000;
}


.dashboard-table .center {
	text-align: center;
}

.dashboard-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin-bottom: 1.5em;
}

.dashboard-table th,
.dashboard-table td {
	padding: 0.5em;
	border: 1px solid #ddd;
	text-align: left;
}

.dashboard-table col.date-col {
	width: 150px;
}

.dashboard-table col.actions-col {
	width: 120px;
}

.dashboard-table .date-cell,
.dashboard-table .action-cell {
	text-align: center;
}

.icon-btn {
	padding: 6px;
	border: none;
	cursor: pointer;
	margin: 0 6px;
	width: 36px;
	height: 36px;
}

.title-input {
	width: 100%;
	box-sizing: border-box;
}

.icon-btn .fa, 
.icon-btn .fas {
	font-weight: 500;
}

/** SAFETY CENTER **/
input.search, .selector {
	height: 36px;
	border-radius: 6px;
	border: 1px lightgrey solid;
	width: 250px;
	font-family: Inter, sans-serif;
	font-size: 14px;
    margin-bottom: 8px;
}

.sc-log-table-wrapper {
	background: #f9f9f9;
}

input[type="file"] {
	margin: 8px 0;
	padding: 8px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: Inter, sans-serif;
}

.safety-button {
	text-align: center;
	display: block;
	margin: 8px 0;
	white-space: nowrap;
	text-decoration: none;
	background-color: #1c8c6b;
	color: #fff;
	padding: 12px 16px;
	border-radius: .33rem;
	border: 0;
	font-weight: 500;
	cursor: pointer;
	font-family: Inter, sans-serif;
	font-size: 13px;
	transition: all 350ms;
	box-shadow: rgb(0 0 0 / .02) 0 4px 2px;
}

.safety-button:hover {
	box-shadow: rgb(0 0 0 / .1) 0 4px 12px;
	transform: translateY(-1px);
}

.viewwords {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}

.viewwords div {
	display: flex;
	gap: 8px;
}

summary {
	margin-top: 16px;
}

.splitter {
	margin-top: 50px;
}

h5 {
	margin-bottom: 14px;
}

.uploads {
	display: flex;
	gap: 8px;
}


.task-mode {
	text-align: center;
}

.mode-icon {
    max-width: 24px;
    opacity: 0.5;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-box {
  background: #fff;
  padding: 20px;
    margin: 20px;
  max-width: 500px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.modal-box button {
  margin: 0 10px;
  padding: 8px 16px;
}

#continue-processing.light-btn,
.light-btn {
	background: white;
	color: #1c8c6b;
	border: 2px solid #1c8c6b;
	padding: 12px 15px;
	display: flex;
    align-items: center;
}

#sense-check-message button {
	font-size: 16px;
}

#sense-check-message ul,
#defence-error-output ul {
    width: fit-content;
    margin: 12px auto;
}

#sense-check-message li {
	text-align: left;
}

/**************/

/* ── Year level pills ── */

.sxr-year-pills {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #FFF;
}

.sxr-year-pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 36px;
    padding: 4px 12px;
    border: 1.5px solid transparent;
    border-radius: 6px;
    background: #edf6f3;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sxr-year-pill:hover {
    box-shadow: rgb(0 0 0 / .1) 0 4px 12px;
    transform: translateY(-1px);
}

.sxr-year-pill.is-selected {
    background: #1c8c6b;
    color: #ffffff;
    border-color: #1c8c6b;
}

.sxr-year-selected-label {
    font-size: 13px;
    color: #2DA782;
    font-weight: 500;
    min-height: 18px;
}

/* ── Status banners (success / error) ── */

.sxr-status-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    /*width: fit-content;
    margin: 24px auto;*/
}

.sxr-status-banner--success {
    background: #dff3ed;
    border: 1px solid #b7e3d8;
}

.sxr-status-banner--error {
    background: #fff3f3;
    border: 1px solid #ebccd1;
    color: #a94442;
}

.sxr-status-banner-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.sxr-status-banner--success .sxr-status-banner-icon {
    border: 3px solid #2DA782;
    color: #2DA782;
    background: #f5fbf9;
}

.sxr-status-banner--error .sxr-status-banner-icon {
    border: 3px solid #a94442;
    color: #a94442;
    background: #FFF;
    font-weight: 800;
}

.sxr-status-banner--loading {
    background: #f0faf7;
    border: 1px solid #b7e3d8;
}

.sxr-status-banner--loading .sxr-status-banner-icon {
    border: 3px solid #2DA782;
    color: #2DA782;
    background: #f5fbf9;
}

#sse_ai_regenerate_button {
  margin-left: auto;
  display: none;
  flex-shrink: 0;
}

/**************/

.shareable-dashboard {
    min-width: 300px;
    margin: auto;
}

.dashboard-header,
.dashboard-row {
	display: grid;
	grid-template-columns:
		70px /* status */
		minmax(200px, 1fr) /* title, grows to fill space but can shrink */
		70px /* status toggle */
		150px /* actions */
		16px /* gap */
		130px /* subject */
		90px /* year */
		16px /* gap */
		130px /* access code */
		90px /* students */
		80px; /* preview */
	align-items: stretch;
}

.dashboard-header{
    font-weight: 600; 
    justify-content: space-between;
}
.dashboard-row {
	flex-direction: row;
	align-items: stretch; 
    justify-content: space-between;
}

.cell {
  display: flex;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-bottom: 0;
  border-right: 0;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
  flex: initial; /* Changed from fixed 100px */
  min-width: 0; /* Prevent overflow cutoff */
  width: 100%; /* in table mode, it is set by grid-template-columns */
}

.transcript-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.transcript-nav a {
    border-radius: .33rem;
    transition: all 350ms;
    box-shadow: rgb(0 0 0 / .02) 0 4px 2px;
    border: 2px solid #1c3c47;
    background: #fff;
    color: #1c3c47;
    padding: 6px 12px;
    font-size: 16px;
}

.transcript-nav a:hover {
    box-shadow: rgb(0 0 0 / .1) 0 4px 12px;
    transform: translateY(-1px);
}

.dashboard-row:last-child .cell {
  border-bottom: 1px solid #ddd;
}


.cell.action-icons,
.cell.log-year,
.cell.view-logs {
    border-right: 1px solid #ddd;	
}


.cell[data-label]::before {
  content: attr(data-label);
  font-weight: bold;
  display: none;
}

.gap {
	flex: 0 0 16px;
}

.cell.access-code {
	margin: unset;
}

.cell.view-post {
  flex: 1 1 auto !important;
  min-width: 200px;
  justify-content: flex-start;
  padding: 12px;
}

.cell.access-code,
.cell.log-subject {
	flex: 0 0 130px;
}

.cell.view-logs {
	flex: 0 0 80px;
}

.cell.access-count {
	flex: 0 0 90px;
}


.cell.last-seen,
.status-cell.last-seen {
	flex: 0 0 90px;
	font-size: 15px;
}

.cell.log-year {
	flex: 0 0 90px;
	padding: 0;
}

.cell.action-icons {
	flex: 0 0 150px;
	padding: 0;
}

.cell.status {
	flex: 0 0 70px;
	padding: 0;
}

.task-mode {
	flex: 0 0 70px;
}

.table-header {
	text-align: center;
    background: #f9f9f9;
}

.combined-cells {
	display: contents;
}

.mode-title.combined-cells {
	flex: 1 1 auto;
    box-sizing: border-box;
}

@media (max-width: 768px) {
	
.letsdiscuss .helpBtn {
	width: 100%;
}
	
  .dashboard-row {
    flex-direction: column;
  }

  .cell[data-label]::before {
    display: inline;
  }

  .gap {
    display: none;
  }
}


/* Force horizontal scroll on small screens if needed */
@media screen and (max-width: 1150px) {
	.gap {
		display: none;
	}
	
	.shareable-dashboard {
		max-width: 760px;
	}
	.dashboard-header {
		display: none;
	}
	
  .dashboard-table-wrapper {
    overflow-x: auto;
    width: 100%;
  }

  .dashboard-row {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    margin-bottom: 40px;
    border-radius: 8px;
  }

  .cell {
	width: auto;
	justify-content: flex-start;
	border: 1px solid #eee !important;
	padding: 10px !important;
  }

  .cell:last-child {
    border-bottom: none;
  }

  .cell[data-label]::before {
	display: inline-block;
	margin-right: 8px;
	font-weight: 600;
	color: #1C3C47;
	text-align: start;
  }


  .combined-cells {
    /*display: inline-flex;
    flex-direction: row;*/
	
	
	display: grid;
    grid-template-columns: auto auto;
  }

  
.cell[data-label]::before {
  content: attr(data-label) ': ';
  white-space: nowrap;
}
  .mode-title .cell[data-label]::before {
	content: '';	  
	width: 0;
  display: none;
  }
  
  .status-actions .cell {
    display: flex;
    justify-content: center;
    gap: 12px;
	}
  
  .combined-cells .cell {
    flex: unset !important;
    /*width: 100%;*/
    max-width: unset;
    display: block;
	
  }

  .cell.status,
  .cell.action-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
  }

  .cell.action-icons {
	white-space: nowrap;
  }

  .cell.log-year,
  .cell.log-subject {
	white-space: nowrap;
  }
	
  .task-mode {
	max-width: 100%;
	text-align: left;
	width: 160px !important;
	border-right: 0 !important;
	display: flex;
	justify-content: center;
  }
  
  .view-post {
    border-left: 0 !important;	  
  }
  
  
  .cell.action-icons a {
	font-size: x-large;
  }

  .mode-title {
    flex-direction: row;
    padding: 18px !important;
    font-size: large;
    border: 1px solid #ddd;
  }
  
  .mode-title .cell {
	  border: 0 !important;	
    justify-content: center; 
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
   .combined-cells.students-code, .combined-cells.subject-year {
    border: 1px solid #ddd;
    margin-bottom: 0px;
	}
  
  .students-code .cell,
  .subject-year .cell {
	  /*width:30% !important;*/
	  border: 0 !important;
      justify-content: center;	  
	  
        box-sizing: content-box;
  }
  
  .students-code {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
	}
  
  .task-mode {
       width: 60px !important;
  }
  .mode-title { 
    justify-content: center;
	}
  
  .mode-title .view-post{
	  width: fit-content;
  }
  
}

/* Extra tweaks for very narrow screens */
@media screen and (max-width: 480px) {
  .cell {
    font-size: 14px;
    padding: 8px;
  }

  .cell.view-post {
    width: 100%;
  }

  .cell.action-icons span {
    justify-content: flex-start;
    gap: 12px;
  }

  .dashboard-header {
    display: none;
  }
  
  .cell.action-icons a {
	  font-size: large;
	  margin: 0 !important;
  }
  
  .status-actions .cell {
	  gap: 12px;
  }
  
  .students-code .access-code {
    width: 100% !important;
	}

  .students-code {
	grid-template-columns: 1fr;
  }
  
}

#text-extractor-success {
	display: flex;
    flex-direction: column;
    align-items: center;
}

#fullscreen-btn {
	font-size: large;
}

#text-extractor-success .light-btn {
	background: white;
	color: #1c8c6b;
	border: 2px solid #1c8c6b;
	padding: 12px 15px;
	display: flex;
    align-items: center;
}

#text-extractor-success .button-holder {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
    margin-bottom: 36px;
    margin-top: -16px;
}

#text-extractor-success .button-holder button {
    font-size: smaller;
    justify-content: center;
    width: fit-content;
}

#reupload-assignment:disabled {
    color: #ccc;
    border: solid 2px #ccc;
    cursor: not-allowed;
	
}

.download-btns {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:flex-end;
	align-items: flex-end;
}

#text-extractor-success #extracted-text {
    width: 600px;
    margin-bottom: 32px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 250px;
}


/* accessibility on small screens */
@media screen and (max-width: 768px) {
	.button,
	button[type="button"],
	button {
		min-height: 40px !important;
		gap: 6px;
	}
	
	button[type="button"].sse-tip-icon {
		min-height: unset !important;
	}
	
	textarea, input {
		min-height: 36px !important;
	}
}

/******************/
#ctext-app {
  max-width: 600px;
  margin: 1em auto;
  font-family: sans-serif;
}

#drop-zone {
  border: 2px dashed #2DA782;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.3s;
  margin-bottom: 12px;
  color: #2DA782;
}

#drop-zone.hover {
  border-color: #1f735a;
  background: #f4fbf7;
}

#output {
  margin-top: 1em;
  white-space: pre-wrap;
  background: #fafafa;
  border: 1px solid #ddd;
  padding: 1em;
  border-radius: 8px;
}


#defence-mode-upload {
	max-width: 800px;
    margin: auto;
    text-align: center;
}

.progress-wrapper {
	display: flex;
    align-items: center;
    gap: 12px;
    font-family: sans-serif;
    font-size: 14px;
    color: #444;
    justify-content: center;
    margin: 24px;
    flex-direction: column;
}

.progress-bar {
  position: relative;
    width: 250px;
    height: 24px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c5ded6, #2da782);
  border-radius: 10px;
  animation: fillProgress 10s infinite ease-in-out;
}

@keyframes fillProgress {
  0%   { width: 0; }
  50%  { width: 80%; }
  100% { width: 0; }
}

.progress-text {
    white-space: nowrap;
    position: absolute;
    font-weight: 500;
    color: white;
}

#fullscreen-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ccc;
  color: #666;
}



/*****************/
.progress-loader {
	margin: auto;
}

.progress-loader {
  width: 64px;
  height: 48px;
  position: relative;
  animation: split 1s ease-in infinite alternate;
}
.progress-loader::before , .progress-loader::after {
  content: '';
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  left: 0;
  top: 0;
  transform: translateX(10px);
  background: #2da782;
  opacity: 0.85;
  backdrop-filter: blur(20px);
}

.progress-loader::after {
  left: auto;
  right: 0;
  background: #1c3c47;
  transform: translateX(10px);
}

@keyframes split {
 0% , 25%{ width: 64px }
 100%{ width: 148px }
}

	  .progress-checklist {
		list-style: none;
		padding-left: 0;
		font-family: sans-serif;
		font-size: 16px;
		text-align: left;
	  }

	  .progress-checklist li {
		margin: 8px 0;
		transition: opacity 0.3s ease;
		display: none;
	  }
	  
	  .progress-checklist li.progress {
		margin: 8px 0;
		transition: opacity 0.3s ease;
		display: block;
	  }

	  .progress-checklist li.done {
		display: block;
	  }
	  
	  .progress-checklist li.failed {
		color: #b83242;
		font-weight: bold;
		display: block;
	  }

/******************/

/* Container */
.td-designer-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Title */
.td-title {
  font-size: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #333;
}

/* Mode buttons */
.td-modes {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.td-mode-btn {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  transition: background 0.2s, color 0.2s;
}
/* Force design button active */
.td-mode-btn.active {
  background: #1c8c6b;
  border-color: #1c8c6b;
  color: #fff;
}

/* Fields row */
.td-fields-row {
  display: flex;
  gap: 32px;
  margin-bottom: 16px;
}
.td-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  gap: 8px;
}

#td-topic-select {
	margin-bottom: 24px;
}

#td-topic-new {
    margin-top: -16px;
    margin-bottom: 16px;
}

.td-field input,
.td-field select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
}

/* Key ideas */
.td-key-ideas {
  margin-bottom: 8px;
}

.td-key-ideas label {
  /* label styles unified in .prompt-selector rule above */
}
.td-ideas-list, .td-curriculum-ideas-list {
  list-style: none;
  padding: 0;
  margin: 0px;
}

.td-idea-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 8px;
  background: #fafafa;
  gap: 16px;
}
.td-idea-text {
  font-size: 14px;
  color: #333;
  white-space: pre-wrap;
}
.td-idea-text p {
  display: inline;
  margin: 0;
  padding: 0;
}
.td-idea-actions {
  display: flex;
  gap: 12px;
}

.td-idea-actions i:hover {
	color: #602545;
}

.td-hint-text {
	font-size: smaller;
	font-weight: 600;
}

.td-generate-ideas-container {
	display: flex;
    flex-direction: column;
    color: #602545;
    /*min-height: 80px;*/
    align-items: baseline;
    justify-content: flex-start;
    margin: 12px 0;    
}

.td-error-message {
	padding: 12px 0;
	color: rgb(174 8 8);
	-webkit-font-smoothing: antialiased;
	font-weight: 600;
	font-size: 14px;
}


.td-generate-ai-btn {
    width: fit-content;
	font-size: 14px;
    white-space: nowrap;
	gap: 6px;
}

.td-generate-ai-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

#td-generate-ideas {
	height: 45px;
}

.td-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  cursor: pointer;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

/* Add idea row */
.td-add-idea-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
#td-new-idea {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
#td-add-idea {
  padding: 10px 16px;
  background: #1c8c6b;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

/* AI ideas button */
.td-ai-ideas-btn {
  display: inline-block;
  margin-top: 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

/* Edit input full width */
.td-edit-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  line-height: inherit;
  margin-bottom: 8px;
}

textarea.td-edit-input {
  resize: vertical;
}

/* Preview questions */
.td-preview-prompt label {
  /* label styles unified in .prompt-selector rule above */
  margin-top: 22px;
}

/* Hide discussion focus, as it is now a read-only prompt for internal use */
.td-preview-prompt {
  display: none;
}

#td-add-topic {
    max-height: 40px;
}

#td-add-topic > i,
#td-generate-ideas > i,
#td-generate-prompt > i,
#td-generate-questions > i,
#td-save-prompt > i,
#sse_ai_regenerate_button > i,
.td-curriculum-search-again > i {
	margin-right: 8px;
}


#td-preview-content {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 0!important;
    min-height: 80px;
    color: #1f2937;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    margin-top: 0
}

#td-preview-content:focus {
    outline: none;
    border-color: #2DA782
}

#td-generate-focus-container {
	display: flex;
    justify-content: flex-start;
    gap: 20px;
}


#td-sample-questions {
    margin: 12px; /*8px 24px 32px;*/
    font-size: 16px;
}

#td-sample-questions li {
	margin-bottom: 6px;
}

#td-prompt-preview-container {
	margin-top: 12px;
}

#td-discussion-btn-holder {
	display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: flex-start;
    margin: 16px 0;
}

#td-preview-content-container {
  transition: background 0.2s, color 0.2s;
}

.speech-bubble-left,
.speech-bubble {
    background: #e9e7e7;
    border-radius: 20px;
    padding: 8px 14px;
    color: black;
    font-size: 14px;
    width: fit-content;
    margin-top: 12px;
	position: relative;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 15%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #e9e7e7;
	border-top: 0;
	margin-left: -10px;
	margin-top: -10px;
}

.speech-bubble-left:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 15%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #e9e7e7;
	border-bottom: 0;
	margin-left: -10px;
	margin-bottom: -10px;
}

#td-speech-bubble-prompt {
	margin-top:24px;
	white-space: normal;
}
/******************/
#chatbox-preview,
#chatbox{
	resize: vertical;
    padding-top: 40px;
}

.speech-name-user, 
.speech-name-assistant
{
    border-radius: 9px;
    position: absolute;
    margin-top: -40px;
    color: white;
    padding: 4px 8px;
    margin-left: -3px;
}

.speech-name-user {
    background: #1c8c6b;
	right: 16px;
}

.speech-name-assistant {
	background: #778482;
}

.speech-bubble-user,
.speech-bubble-assistant {
	position: relative;
	border-radius: .4em;
    padding: 12px;
    margin-bottom: 48px;
    width: fit-content;
    min-width: 300px;
	max-width: 90%;
}

.speech-bubble-user {
	background: #E3F8EF;
    margin-left: auto;
}

.speech-bubble-assistant {
	background: #f4f4f4;
}

#chatbox .speech-bubble-user.student-editable {
	padding: 8px 12px 40px 12px;
}

#chatbox .speech-bubble-user.student-editable .student-edit-btn {
	position: absolute;
	right: 10px;
	bottom: 8px;
	margin: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 999px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.85;
	transition: opacity 0.15s ease, transform 0.15s ease;
	color: #f2fbf7;
	/*
	border: 1px solid #7ca89a;
	background: #f2fbf7;
	color: #2f7760;
	*/
}

.student-edit-btn:hover {
	opacity: 1;
	transform: translateY(-1px);
}

.student-edit-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.student-edit-save, .student-edit-cancel {
  padding: 10px !important;
}

.student-edit-note {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: #3a6b5a;
}

.student-edit-input {
	display: block;
	width: 100%;
	min-height: 70px;
	margin-top: 10px;
	border: 1px solid #b7c6bf;
	border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
  resize: none;
  font-size: inherit;
  font-family: inherit;
  background: white;
}

.student-edit-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	justify-content: flex-end;
}

.student-editable {
  padding-bottom: 20px;
}

.student-editable.is-editing {
  width: 100%;
}

.student-edit-save,
.student-edit-cancel {
	border: 1px solid #1c8c6b;
	background: #ffffff;
	color: #1c8c6b;
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}

.student-edit-save.is-loading {
	min-width: 92px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	opacity: 0.8;
}

.student-edit-cancel {
	border-color: #7c8b85;
	color: #7c8b85;
}

#thinking-indicator .body-text{
    animation: blink 1s infinite;
}


#test-mode-init {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    justify-content: center;
	
    width: 400px;
    margin: auto;
    flex-wrap: wrap;
}

#fullscreen-btn,
#reset-chat-btn
{
	width: 48%;
}

#prev-transcript-btn{
	background: white;
    color: #2DA782;
    border: 2px solid #2DA782;
    padding: 12px;
}


.task-student-header {
  font-size: 1.5rem;
  /*background: #f3fcf8;*/
  padding: 20px;
  border-radius: 12px;
    background: #f9f9f9;
    max-width: 1200px;
    box-sizing: border-box;
}

.task-student-header .tag {
    background: white; /*#e6f4ea;*/
	color: #1c8c6b;
    border: 2px solid #1c8c6b; /*1px solid #b6dfc1;*/
    border-radius: 6px;
    padding: 2px 8px;
    /*margin-left: .5em;*/
    font-size: 1.2rem;
    font-family: monospace;
    font-weight: 100;
}
.task-info{
    margin-bottom: 18px;
}

.student-info,
.task-info {
    column-gap: 12px;
    row-gap: 6px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
}

.copy-btn {
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
}

.copy-btn:hover {
  box-shadow: none;
}

.tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tooltip.show {
  opacity: 1;
}


grammarly-extension,
grammarly-desktop-integration,
div[contenteditable][data-gramm_id] {
  display: none !important;
}

.um-terms-links {
  margin-bottom: 1em; /* adjust to taste */
}

.end-task-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.end-task-modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.end-task-modal-buttons button {
	width: 45%;
}

.end-task-modal-buttons {
  margin-top: 20px;
  display: flex; justify-content: space-around;
}

#confirmEndBtn {
	background-color: #602545;
}

#cancelEndBtn {
	background: white;
	color: #1c8c6b;
	border: 2px solid #1c8c6b;
}

/******************************/
.wp-2fa-user-profile-form tr,
.wp-2fa-user-profile-form td,
.wp-2fa-user-profile-form th {
	display: flex;
	margin-bottom: 8px;
}

table[id="2fa-user-global-configuration"] th {
	align-items: center;
}

.wp-2fa-user-profile-form th {
	margin-right: 12px;
}

.wp-2fa-user-profile-form a {
	margin-right: 12px;
    padding: 8px 12px;
    border-radius: 4px;
}

.wp-2fa-user-profile-form .qr-btn {
	margin-top:0;
}

.wp-2fa-user-profile-form .app-key-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    margin-bottom: 40px;
}

#modal-1-content > div.wizard-step.active a,
#modal-1-content > div.wizard-step.active button {
	text-decoration: none;
	background-color: #1c8c6b !important;
	color: white !important;
	padding: 12px 16px;
	border-radius: 0.33rem;
	border: 0;
	font-weight: 500;
	font-family: Inter, sans-serif;
	cursor: pointer;
	transition: all 350ms;
	box-shadow: rgba(0, 0, 0, 0.02) 0 4px 2px;
}

#configure-2fa button:hover,
a.button.wp-2fa-button-primary:hover,
.enable_styling .wp-2fa-button-secondary:hover,
.enable_styling .wp-2fa-button-primary:hover {
	background: white !important;
}

.enable_styling .wizard-custom-counter li::before {
	background-color: #1c8c6b;
}

.click-to-copy {
	border-color: #1c8c6b;
}

.wfls-btn.wfls-btn-default,
#wfls-deactivate,
#wfls-activate,
#wfls-recovery,
#wfls-recovery-download {
	border: 1px solid black !important;
    padding: 10px 16px !important;
    display: flex;
    width: fit-content;
    margin: auto;
}

#wfls-activate-field,
#wfls-qr-code-text,
.wfls-center {
    margin: auto !important;
}

.cb-carousel-block .cb-wrapper.swiper-wrapper img{
	max-height: 150px;
	object-fit: contain !important;
    background-color: transparent !important;
}

.cb-carousel-block.greyscalefilter .cb-wrapper.swiper-wrapper img {
    filter: grayscale(1) saturate(1) contrast(0.5) brightness(1.3);
}

.cb-carousel-block .cb-wrapper.swiper-wrapper img:hover {
    filter: grayscale(0);
}

.cb-slide.swiper-slide figure {
	display: flex;
	justify-content: center;
}


/* ===== END: global.css ===== */


/* Toggle variables & base */
.sxr-toggle {
	--w: 42px;
	--h: 24px;
	--pad: 2px;             /* inner padding for knob track */
	--on: #2DA782;          /* ON color (your green) */
	--off: #cfd8dc;         /* OFF color */
	--knob: #fff;           /* knob color */

  display: inline-block;
  width: var(--w);
  height: var(--h);
  background: var(--off);
  border-radius: 9999px;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  transition: background .2s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* The native checkbox: keep it focusable for a11y, just hide visually */
.sxr-toggle-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0; height: 0;
  margin: 0; padding: 0;
}

/* Knob */
.sxr-toggle::after {
  content: "";
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: calc(var(--h) - (var(--pad) * 2));
  height: calc(var(--h) - (var(--pad) * 2));
  background: var(--knob);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .2s ease;
}

/* ON state */
.sxr-toggle-input:checked + .sxr-toggle {
  background: var(--on);
}
.sxr-toggle-input:checked + .sxr-toggle::after {
  transform: translateX(calc(var(--w) - var(--h)));
}

/* Disabled state (optional) */
.sxr-toggle-input:disabled + .sxr-toggle {
  opacity: .6;
  cursor: not-allowed;
}

.sxr-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sxr-toggle-text {
  font-weight: 400;
  color: #555;
  user-select: none;
}

/* Default label text */
.sxr-toggle-input:not(:checked) ~ .sxr-toggle-text::after {
  content: "Lock-out off";
}

/* Checked label text */
.sxr-toggle-input:checked ~ .sxr-toggle-text::after {
  content: "Lock-out on";
}

/* Hide the initial span content if you're using ::after instead */
.sxr-toggle-text {
  position: relative;
  color: #333;
}
.sxr-toggle-text::after {
  content: attr(data-off);
}


/*****************/
.reentry-details{width: fit-content; margin: auto;}
.sxr-reentry-card{border:1px solid #e5e7eb; border-radius:12px; padding:14px 16px; background:#fff; margin: 0 auto 40px;}
.sxr-reentry-row{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0}
.sxr-reentry-row+ .sxr-reentry-row{border-top:1px dashed #e5e7eb}
.sxr-reentry-label{font-weight:600;color:#111827}
.sxr-reentry-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px}
.sxr-reentry-actions{display:flex;gap:8px}
.sxr-btn-copy{border-radius:8px;padding:6px 10px;cursor:pointer}
.sxr-btn-copy:disabled{opacity:.6;cursor:default}

.reentry-details h4 {
    margin: 10px 0 20px;
    text-align: center;
}

.reentry-details p {
    max-width: 350px;
    text-align: center;
}

/*********************/

#sxr_lockout_enabled {
	width: auto;
	margin: auto 0;
}

#sse-settings,
.sse-finalise-summary {
	width: 100%;
	margin: auto;
	max-width: 800px;
	padding: 12px;
	border-radius: 8px;
}

.sse-finalise-summary {
	background: #f7fcfa;
	border: 1px solid #e0efe9;
	border-radius: 12px;
	padding: 20px 24px;
}

#sse-settings{
	margin-top: 40px;
}

#sse-settings h4,
.sse-finalise-summary h4 {
	font-weight: 600;
	margin-bottom: 12px;
}

.sse-summary-list {
	margin: 0;
	padding: 0;
}

.sse-summary-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #e8f2ed;
}

.sse-summary-row:last-child {
	border-bottom: none;
}

.sse-summary-row dt {
	flex: 0 0 130px;
	font-weight: 600;
	color: #1f2937;
	font-size: 14px;
}

.sse-summary-row dd {
	flex: 1;
	margin: 0;
	padding: 0;
	color: #4b5563;
	font-size: 14px;
	min-width: 0;
}

.finalise-curriculum-ideas-list, .finalise-ideas-list {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
}

.sse-tip-wrapper { position: relative; display: inline-block; }
.sse-tip-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:9999px; border:1px solid #888;
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:#f7f7f7; color:#444; cursor:help; padding:0;
    margin-left: 4px;
}
.sse-tip-icon:focus { outline: 2px solid #2271b1; outline-offset: 2px; }

.sse-tip-bubble {
  position:absolute; left: calc(100% + .5rem); top: 50%; transform: translateY(-50%);
  min-width:265px; max-width:340px; padding:0.25rem .75rem 0; border-radius:.5rem;
  background:#111; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18);
  font-size:12.5px; line-height:1.35; z-index:1000;
  opacity:0; visibility:hidden; transition:opacity .12s ease, visibility .12s ease;
}
.sse-tip-bubble p { margin-bottom:1rem; }
.sse-tip-bubble::after {
  content:""; position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  border-width:6px; border-style:solid; border-color:transparent #111 transparent transparent;
}

/* Show on hover/focus or when toggled via JS */
.sse-tip-wrapper:hover .sse-tip-bubble,
.sse-tip-wrapper:focus-within .sse-tip-bubble,
.sse-tip-wrapper[data-open="true"] .sse-tip-bubble {
  opacity:1; visibility:visible;
}

#user_input {
	min-height: 60px;	
}


#clear-lang-log, #clear-pii-log, #clear-defence-upload-log, #clear-wellbeing-log {
	background: white;
    border: 2px solid #602545;
    color: #602545;
}

#clear-lang-filter, #clear-pii-filter, #clear-defence-upload-filter, #clear-wellbeing-filter {
	background: white;
    border: 2px solid #1c8c6b;
    color: #1c8c6b;
}

.no-transcript{
    margin: 24px auto 60px;
    max-width: 1200px;
    width: 90%;
    text-align: center;
    font-style: italic;
}

.sxr-single-download-btn.disabled {
  opacity: 0.6;
  cursor: wait;
}


.sxr-loading {
    opacity: 0.6;
    cursor: wait !important;
    position: relative;
}

.sxr-loading::after {
    content: "";
    position: absolute;
    right: -25px;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: sxr-spin 0.8s linear infinite;
    transform: translateY(-50%);
}

@keyframes sxr-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}

#manual-refresh, #post-transcripts-lms {
	box-shadow: none;
	border: 1px solid #1c3c47; 
	color: #1c3c47; 
	background:#fff; 
	cursor:pointer;
    border-radius:4px; 
	padding:6px 10px; 
	display:inline-flex; 
	align-items:center; 
	gap:8px;
}

/***************************/
.tm-modal-open {
    overflow: hidden;
}

.tm-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.tm-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.tm-modal {
    box-sizing: border-box;
    background: #fff;
    color: #000;
    padding: 22px 28px;
    width: 360px;
    max-width: 90%;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 24px rgba(0,0,0,0.2);
    transform: translateY(15px);
    transition: transform 0.2s ease;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.tm-modal-overlay.visible .tm-modal {
    transform: translateY(0);
}

/* Variants */
.tm-modal.tm-success { border-top: 6px solid #1c7d4d; }
.tm-modal.tm-error   { border-top: 6px solid #b51818; }
.tm-modal.tm-info    { border-top: 6px solid #1c3c47; }
.tm-modal.tm-truncate-modal { width: 720px; text-align: left; }
.tm-see-more { font-style: italic; white-space: nowrap; text-decoration: underline; }

.tm-modal-message {
    font-size: 16px;
    margin-bottom: 18px;
    overflow-y: auto;
    overflow-x: hidden;
}

.tm-modal-btn {
    background: #1c3c47;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: opacity 0.15s ease;
}
.tm-modal-btn:hover {
    opacity: 0.9;
}

.tm-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.tm-btn-secondary {
    background: #999 !important;
}

/* Curriculum search modal */
.td-curriculum-modal {
    width: 700px;
    max-width: 95vw;
    max-height: 85vh;
    text-align: left;
}

.td-curriculum-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}


#wp--skip-link--target div.um-account-tab.um-account-tab-billings > div.um-stripe-billing-account-tab > a.um-button {
	color: #fff !important;
    background: #2da782;
    font-weight: 600 !important;
    margin: auto;
    display: block !important;
    margin-bottom: 32px;
}

.um-page .um-stripe-button.um-button {
    background: #2da782;
    padding: 10px 18px !important;
    margin-left: 6px;	
}


/** NEW LANDING **/
.home .has-global-padding {
	padding: 0 !important;
}
.home header .has-global-padding {
	padding: 20px !important;
}

/*.page-editor div.wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained > h1 {
	display: none;
}*/

.sse-btn-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


.sse-buttons button {
    align-items: center;
	padding: 12px 4px !important;
}

.sse-buttons .sse-btn-wrap{
    align-items: stretch;
}


.sse-spinner {
  display: none;
  opacity: 0.8;
}

.sse-btn-wrap.is-working .sse-spinner {
  display: inline-block;
}

#td-save-prompt.is-working {
  cursor: wait;
  opacity: 0.75;
}

#td-save-prompt i {
  margin-right: 6px;
}

.noseats-returning-container {
	display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

#limit-close-btn, 
#limit-returning-button {
    font-size: 16px;
	margin: 0;
}

.access-code-container {
	margin-bottom: 18px;
}

/*****************/
.student-status-table {
  width: 100%;
}

.release-results {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 12px;
}

.release-results-inner {
    display: flex;
    gap: 8px;
}

.status-row {
  display: grid;
  grid-template-columns:
    70px            			/* select */
    minmax(96px,1fr)			/* student */
    100px           			/* code */
    175px           			/* status */
    130px  						/* last seen */
    130px           			/* transcript */
    minmax(150px,210px)      	/* results */
    minmax(100px,160px)         /* actions */
    90px                        /* end */
}

.results-inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.results-actions {
	display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
}

.status-cell.results {
	display: flex;
	flex-direction: row;
    gap: 16px;
    padding-left: 16px;
}

.status-cell.actions {
	gap: 16px;
}

.visibility-icons {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

.status-cell {
	border: 0px solid #ccc;
	padding: 8px;
	display: flex;
	align-items: center;
    justify-content: center;
	text-align: center;

	border-color: #ddd;
	border-style: solid;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	font-size: 15px;
}

/* When any LMS-linked student exists, left-align the status cell so LMS text stacks neatly */
/* .sxr-has-lms .status-cell.status {
  justify-content: flex-start;
} */

/* and set unlock-btn to be all the way on the right */
.sxr-has-lms .status-cell.status .unlock-btn {
  margin-left: auto !important;
}

.sxr-has-lms .status-cell.status .lms-status {
  margin-top: 2px;
  margin-left: 2px;
}

.status-cell:last-child {
    border-right-width: 1px;	
}

.status-header .status-cell {
	border-top-width: 1px;
}

.status-cell.header {
  font-weight: 600;
  background: #f9f9f9;
  font-size: 16px;
    line-height: 1.1;
    padding: 10px 4px;
}

.status-body .status-row:hover {
  background: #fafafa;
}

.status-cell-submission-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sxr-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: .33rem;
}

.sxr-action-btn--icon {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background: #1c8c6b;
  color: #fff;
  font-size: 16px;
}

.sxr-action-btn--icon:hover {
  background: #248769;
}


@media (max-width: 900px) {
  .status-header {
    display: none;
  }

  .status-row {
    grid-template-columns: 1fr;
    border: 1px solid #ccc;
    margin-bottom: 12px;
  }

  .status-cell {
    white-space: normal;
    border: none;
    justify-content: space-between;
  }

  .status-cell::before {
    content: attr(data-label);
    font-weight: 600;
  }
  
}

/*************************/

/* -------------------------------------------------- */
/* MOBILE + MID SIZE LAYOUT (stack into cards)        */
/* -------------------------------------------------- */
@media (max-width: 1200px) {

  /* Convert body into a grid so rows can flow */
  .status-body {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr; /* phones default to 1 card per row */
  }
  
  .status-cell.results {
    padding-left: 0;
}

.results-inner {
    justify-content: flex-end;
}

.results-inner .result-stack {
	width: 75%;
    align-items: flex-end;
}

  /* Each row becomes a card */
  .status-row {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px 10px;
    background: #fff;
  }

  .status-cell {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    white-space: normal;
    border: none;
  font-size: 15px;
  }

  .status-cell::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 6px;
	text-align: left;
  }
  
  .timeago {
	  text-align: right;
  }
  
  /* Hide the desktop header */
  .status-header {
    display: none;
  }
  
  #no-student-data > div,
  #no-live-data > div,
  #no-completed-data > div {
	  border: 0 !important;
	  text-align: left !important;
  }

}

/* -------------------------------------------------- */
/* MID SIZE: ALLOW 2 CARDS PER ROW                   */
/* -------------------------------------------------- */
@media (min-width: 720px) and (max-width: 1000px) {
  .status-body {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) and (max-width: 1200px) {
  .status-body {
	font-size: smaller;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
	
	.transcript-table {
		font-size: smaller;
	}
	
	.single-shareable  .intro-info {
		font-size: smaller;
	}
	
	h1.wp-block-post-title {
		font-size: xx-large;
	}
	
	.speech-bubble-user, .speech-bubble-assistant {
		min-width: 100px;
		font-size: smaller;
	}
	
	#extracted-text {
		width: 98%;
		height: 300px
	}
	
	.single-shareable main > div { 
		display: block;
	}
	
	.task-student-header {
		flex-direction: column !important;
		align-items: center !important;		
        gap: 40px !important;
	}
	
	.task-access-transcript {
		margin-left: 0 !important;
	}
	
	.sse-mode-selector {
		flex-direction: column;
	}
	
	.sse-segmented label,
	.sse-form-container .sse-buttons button[type="submit"] {
		font-size: 14px;
	}
	
	.task-editor .popup {
		flex-direction: column;		
	}
	
	.task-editor .popup .tabs {
		padding-bottom: 0;	
	}
	
	.task-editor .tabs {
		flex-direction: row;
	}
	
	.task-editor .tabs label {
		border-bottom: 0;
		border-right: 1px solid #ebf7f3;
		border-radius: 24px 24px 0 0;
		text-align: center;
        display: flex;
        align-items: center;
	}
	
	.task-editor .tabs input[type="radio"]:checked+label {
		transform: translateX(0) translateY(1px);
		border-right: 1px solid #ebf7f3;
	}
	
	  
	  .rubric-container .rubric-criterion-name {
		width: 100%;
		font-weight: 600;
		font-size: larger;
	  }
	  
	  .rubric-container .rubric-cell {
        text-align: left;
	   }
	   
	   .sse-tip-icon {
		   width: 30px;
			height: 30px;
			min-height: unset !important;
	   }
	   	   
	
}

@media (max-width: 500px) {
    .task-editor .tabs {
        flex-direction: column;
		margin-bottom: 12px;
	}
		
	.task-editor .tabs label {
		border-radius: 8px;
	}
	
	.prompt-tab {
		justify-content: center;
	}
	
	.tab-list,
	#td_topic_btn_holder,
	.subject-year { 
		flex-direction: column;
	}
	
	#td-discussion-btn-holder {
		justify-content: center;
		flex-wrap: wrap;
	}
	
	#td-preview-content {
		font-size: smaller;
	}
	
	.send-msg-holder-preview {
		flex-direction: column;
		align-items: stretch;
	}
	
	.send-msg-holder-preview button {
		justify-content: center;
	}
	
}

/************************/

.page-dashboard main > div > .wp-block-spacer,
.home > div.wp-site-blocks > div > div > div.wp-block-spacer {
	display: none;
}

#sxr_download_all_transcripts {
	margin-top: 24px;
}

#sxr_download_all_transcripts:disabled {
    opacity: 0.5;
    pointer-events: none;
}


#ff_7_country-list {
    font-family: Inter, Arial, sans-serif;
    font-size: medium;
}

.ff-el-tooltip svg > path {
	fill: #2da782 !important
}

.contact-email {
    min-width: fit-content;
}

.contact-email a {
    white-space: nowrap;
}

/* Only show the "Post transcripts to LMS" button when there are students to post */
#post-transcripts-lms {
  display: none ;
}
body.sxr-has-students-to-post #post-transcripts-lms {
  display: inline-flex;
}

.sxr-lms-post-confirm-list,
.sxr-lms-post-confirm-list li {
  text-align: left;
}
.sxr-lms-post-confirm-list {
  margin: 8px 0 0 0;
  padding-left: 1.2em;
  list-style-position: outside;
}
/**************************/
.ai-eval-heading {
	
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: .75rem 1rem;
    gap: 2rem;
	
	
	/*display: grid;
	grid-template-columns: 60px 2fr 2fr 120px 40px;
	gap: 12px;
	padding: 10px 16px;*/
	
	font-size: 0.85rem;
	font-weight: 600;
	color: #1f3d31;
	border-bottom: 1px solid #d1e7db;
    border-radius: 8px 8px 0 0;
	background: #e3f8ef;
	position: sticky;
	top: 0;
	z-index: 2;
    border-radius: 8px 8px 0 0;
}

.ai-eval-heading .ai-eval-expand {
	visibility: hidden;
}


.truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* number of visible lines */
  overflow: hidden;
}

.ai-eval-card.open .truncate {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

#ai-eval-container {
    /*max-width: min(90%, 1200px);*/
    box-sizing: border-box;
	margin: auto;	
    padding: 12px;
	margin-bottom: 60px;	
}

#ai-eval-output-container{
    max-width: min(1200px,90%);
    margin: 3rem auto 1rem;
}

.ai-eval-list {
	display: flex;
	flex-direction: column;
	/*gap: 1rem;
	max-width: min(90%, 1200px);*/
	margin: auto;
}

.ai-eval-card {
  /*border-radius: 12px;*/
  border: 1px solid #d1e7db;
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
      padding: 10px 0px;
}

.ai-eval-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.ai-eval-card.good    { border-left: 6px solid #1A8464; }
.ai-eval-card.basic   { border-left: 6px solid #F2C94C; }
.ai-eval-card.limited { border-left: 6px solid #B23A48; }

.good .ai-eval-category 	{ color: #1A8464; }
.basic .ai-eval-category 	{ color: #c6a53e; }
.limited .ai-eval-category	{ color: #B23A48; }

.ai-eval-header {
  display: flex;
    align-items: flex-start;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  gap: 2rem;
    font-size: 14px;
}

.ai-eval-q {
  font-size: 1rem;    
  font-weight: 600;
    width: 50px;
}

.ai-eval-category {
  font-size: 0.85rem;
  opacity: 0.8;    
  font-weight: 600;
  text-align: center;
	width: 100px;
}


.ai-eval-expand {
  font-size: 0.9rem;
  opacity: 0.6;
  transition: transform 0.2s ease;
  color: #1c8c6b;
}

.ai-eval-card.open .ai-eval-expand {
  transform: rotate(180deg);
}

.ai-eval-body {
  padding: 0 1rem 1rem;
  display: none;
    font-size: 14px;
}

.ai-eval-card.open .ai-eval-body {
  display: block;
}
.ai-eval-heading .ai-eval-field,
.ai-eval-header .ai-eval-field {
  width: 50%;
}

.ai-eval-heading .ai-eval-category {
	text-align: left;
	opacity: 1;
}

.ai-eval-justification {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #1f3d31;
  margin-bottom: 0.25rem;
    margin-top: 16px;
}

.ai-eval-field p {
  margin: 0;
  line-height: 1.4;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .ai-eval-header {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .ai-eval-category {
    width: 100%;
  }
}

.ai-eval-status {
  max-width: 1200px;
  margin: 1.5rem auto 2.5rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

.ai-eval-status-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
}

.ai-eval-status-icon {
  font-size: 1.4rem;
  line-height: 1;
  color: #1c8c6b; /* amber */
}

.ai-eval-status-content {
  flex: 1;
}

.ai-eval-status-content h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.ai-eval-status-content p {
  margin: 0;
  font-size: 0.95rem;
  color: #1c8c6b;
}

.ai-eval-status-action {
  flex-shrink: 0;
}


.ai-eval-status.needs-regeneration {
	background: #fcf7f2;
	border-left: 4px solid #cb6d0f;
    margin: 1rem auto !important;
    padding: 4px 8px !important;
}

/*
#ai-eval-container.individual,
#ai-eval-container.individual h4 {
	color: #cb6d0f;
}*/

#ai-eval-container.individual {
    margin: 3rem auto 3rem !important;
}

.sxr-hide-regen-forever,
.run-eval,
#run-eval,
#regenerate-all {
	background: #cb6d0f;
    margin: 0 8px;
}

.needs-regeneration .ai-eval-status-inner {
	padding: 1rem !important;
	gap: 0 !important;
}

.needs-regeneration .ai-eval-status-icon {
	margin-right: 18px;
}

.needs-regeneration .hide-banner {
	background: transparent;
	color: #cb6d0f;
    box-shadow: none;
    margin: 0 0 0 16px;
    padding: 0;
	font-size: 20px;
}

.needs-regeneration .hide-banner:hover {
	transform: none;
}

.needs-regeneration .ai-eval-status-icon,
.needs-regeneration .ai-eval-status-content p {
	color: #cb6d0f;
}


/* Small screens */
@media (max-width: 640px) {
  .ai-eval-status-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-eval-status-action {
    width: 100%;
  }

  .ai-eval-status-action .button {
    width: 100%;
  }
}
/*******************************************************/

.transcript-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid #d1e7db;          /* green-tinted neutral */
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
}

/* Header */
.transcript-table thead th {
  background: #E3F8EF;               /* soft green wash */
  color: #1f3d2b;                    /* dark green-gray */
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #d1e7db;
}

/* Rows */
.transcript-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid #d1e7dc;
}

/* Role column */
.transcript-table td.role-title {
  width: 140px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14px;
  color: #2f5f46;
  background: #f6fcf9;
  border-right: 1px solid #d1e7db;
}

/* Content column */
.transcript-table td.content {
  padding: 14px 16px;
  color: #1f2937;
  background: #ffffff;
}

/* Assistant */
.transcript-table td.assistant-role.role-title {
  color: #1f2937;                    /* confident but muted */
}

.transcript-table td.assistant-role.content {
  background: #e3f8ef61;               /* subtle distinction */
}

/* User */
.transcript-table td.user-role.role-title {
  color: #1f2937;            
  background: #ffffff;        /* neutral green-gray */
}

.transcript-table td.user-role.content {
  background: #ffffff;
}

/* Emphasis */
.transcript-table b,
.transcript-table strong {
  font-weight: 600;
  color: #1f4d3a;
}

/* Spacing rhythm */
.transcript-table br + br {
  display: block;
  margin-top: 0.6em;
}

/* Responsive */
@media (max-width: 720px) {
  .transcript-table {
    font-size: 13px;
  }

  .transcript-table td.role-title {
    width: 70px;
        min-width: unset;
  }
}

/**** HEADER *****/
/* --------------------------------------------------
   Task / Student Header
-------------------------------------------------- */

.task-student-header {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
  border-left: 4px solid #e5e7eb;  
  padding: 18px 22px;
}

/* Two main columns */
.task-header-cols {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  align-items: stretch;
}

/* Left: task + student info */
.task-header-details {
  display: flex;
  flex-direction: column;
}

.task-header-details strong {
  font-weight: 600;
  color: #1f4d3a;
}

.task-header-details span {
  font-size: 18px;
  color: #1f2937;
}

/* Right: codes + actions */
.task-header-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  text-align: right;
    justify-content: space-between;
}

.code-container{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Code rows */
.task-header-actions .code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  white-space: nowrap;
}

.task-header-actions .code-label {
  font-weight: 500;
  color: #365f50;
}

/* Code pill */
.task-header-actions .copy-btn.tag {
  background: #fff;
  border: 1px solid #dedede;
  color: #1b6b4b;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.task-header-actions .copy-btn.tag:hover {
  background: #f4fbf7;
}

.sxr-task-created {
    width: fit-content;
}

/* View task button */
.sxr-view-task-btn {
  border: 1px solid #dedede;
  background: #ffffff;
  color: #1b6b4b;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.sxr-view-task-btn:hover {
  background: #f4fbf7;
}

/* Download button */
.sxr-submission-download-btn,
.sxr-single-download-btn {
  background: #1f4d3a;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: white;
  line-height: normal;
}

.sxr-submission-download-btn:hover,
.sxr-single-download-btn:hover {
  background: #183f30;
  transform: translateY(-1px);
}

.rubric-buttons {
	width: 100%; 
	text-align:center; 
	height: 56px;
}
/* Responsive */

@media (max-width: 660px) {
  .ai-eval-summary-cards {
	  flex-direction: column;
  }
  .summary-card{
	  flex: unset !important;
  }
}

@media (max-width: 900px) {
	.assistant-role.role-title,
	.behaviour-event.behaviour-time {
		width: 30%;
	}
	
	.rubric-buttons {
		margin-bottom: 40px;
		}
	
	.button-container {
		margin-bottom: 40px;
	}
	
  .task-header-cols {
    flex-direction: column;
    gap: 20px;
  }
  
  .task-student-header {
    min-width: 300px;
}

.task-header-details span {
	font-size: 16px;
}

  .task-header-actions {
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    margin-top: 24px;
  }
  .results-visibility {
    margin-top: 16px;
  }
  
  
  
}

.transcript-container,
.behaviour-log-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    max-width: 1200px;
    margin: auto;
    gap: 12px;
}

.transcript-table,
.behaviour-transcript-table {
	display: none;
}

.transcript-table.open,
.behaviour-transcript-table.open {
	display: table;
}


/************/
/* --------------------------------------------------
   Collapsible Section Headers
-------------------------------------------------- */

.transcript-container,
.behaviour-log-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3efe8;
    max-width: min(90%, 1200px);
}

/* Headings */
.transcript-heading,
.behaviour-log {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f4d3a;
}

/* Toggle buttons */
#show-transcript,
#show-behaviour-log,
#show-ai-eval-container {
    white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: #1b6b4b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
    box-shadow: none;
}
.ai-eval-container {
	display: none;
}

.ai-eval-container.open {
	display: block;
}

#show-transcript:hover,
#show-behaviour-log:hover {
  text-decoration: underline;
}

/* Optional: arrow animation */
#show-transcript .arrow,
#show-behaviour-log .arrow {
  transition: transform 0.15s ease;
}


/****************/
/* --------------------------------------------------
   AI Evaluation – Summary + Scoring Key
-------------------------------------------------- */

/* Summary cards */
.ai-eval-summary-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  justify-content: center;
}

.summary-card {
  flex: 0 0 140px;
  padding: 24px;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18);
  color: #fff;
}

.summary-count {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 6px;
}

.summary-label {
  font-size: 16px;
}

/* Card variants */
.summary-card.good {
    background: #1A8464;
}

.summary-card.basic {
    background: #F2C94C;
	color: #1c3c47;
}

.summary-card.limited {
  background: #B23A48;
}

/* Scoring key */
.scoring-key {
  border: 1px solid #e3efe8;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 32px;
}

.scoring-key-toggle {
  width: 100%;
background: #f9fafb;
    color: #1c3c47;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.scoring-key-toggle .arrow{
	color: #778a91;
}

.scoring-key-toggle .arrow {
  transition: transform 0.15s ease;
}

.scoring-key-toggle.is-open .arrow {
  transform: rotate(180deg);
}

.scoring-key-content {
  display: none;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #1f2937;
}

.scoring-key-content p {
  margin: 0 0 8px 0;
}

.scoring-key-content p:last-child {
  margin-bottom: 0;
}

/* Open state */
.scoring-key.open .scoring-key-content {
  display: block;
}

.ai-eval-md .rendered-markdown,
td.ai-eval-md .rendered-markdown {
  margin: 0;
}

.ai-eval-md .rendered-markdown p,
td.ai-eval-md .rendered-markdown p {
  margin: 0;
}

#menu-main .wp-block-navigation-item a {
	color: #1a8464 !important;
	font-size: 18px !important;
}

footer .wp-block-navigation-item a {
	color: #1a8464 !important;
	font-size: 16px !important;
}

/**********************//* ============================= */
/* Segmented radio control */
/* ============================= */
.sse-segmented {
	display: flex;
	border: 1px solid #cfd6d9;
	border-radius: 10px;
	overflow: hidden;
	background: #f9fbfb;
	min-height: 48px;
}
.sse-segmented label {
	flex: 1;
	display: flex;
	align-items: stretch;
	cursor: pointer;
	position: relative;
}
/* Visually hide the radio */
.sse-segmented input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
/* Segment content */
.sse-segmented span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-weight: 500;
	color: #5b6770;
	user-select: none;
	background: transparent;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}
/* Selected state */
.sse-segmented input:checked + span {
	background: #9bd5c3;
	color: #1f2d33;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
/* Hover only when not selected */
.sse-segmented label:hover input:not(:checked) + span {
	background: #eef6f4;
}
/* Disabled radios (e.g. AI off → student off) */
.sse-segmented input:disabled + span {
	background: #f1f3f4;
	color: #9aa6ac;
	cursor: not-allowed;
}
/* Two-option variant (Lock-out) */
.sse-segmented--2 {
	max-width: 320px;
}

/* ============================= */
/* Settings layout tweaks */
/* ============================= */
.sse-setting-group {
	margin-bottom: 24px;
}

/* First setting group (Lock-out) - standalone */
.sse-setting-group:first-of-type {
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 2px solid #e8ecee;
}

/* AI settings container - visual grouping */

.sse-setting-group {
	background: #fff;
	border: 1px solid #e1e8ea;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 24px;
	margin-top: -12px;
	padding-top: 16px;
	position: relative;
}

/* Add subtle separator between AI settings */


/* Optional: Add "AI Settings" label */
.sse-setting-group::before {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #7a8a93;
	margin-top: -4px;
}

#general-settings-group::before {
	content: 'General Settings';
}

#ai-settings-group::before {
	content: 'AI Evaluation';
}


.sse-setting-group:last-of-type {
	margin-bottom: 16px;
}

.sse-setting-group h5 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	font-size: 15px;
	color: #1f2d33;
}

/* ============================= */
/* Access code */
/* ============================= */
#sse-settings .access-code {
	font-size: larger;
	margin-top: 40px;
}

/* ============================= */
/* AI combo hint (one-liner) */
/* ============================= */
.sxr-ai-hint {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.4;
}
.sxr-ai-hint--ok {
	background: #f0f9f6;
	color: #0f3d37;
	/*border: 1px solid #ddebe4;*/
}
.sxr-ai-hint--warn {
	background: #fff7eb;
	color: #6b4a12;
	/*border: 1px solid #f2ddbe;*/
}
.sxr-ai-hint--neutral {
	background: #f9fbfb;
	color: #5b6770;
	/*border: 1px solid #e1e6e9;*/
}

.student-info.done span {
	color: #1c8c6b;
}

.student-info.incomplete span {
	color: #c85905;
}

.student-info.in-progress span {
	color: #999;
}


#ai-eval-container ul {
	font-size: smaller;
}

.result-stack {
  display: flex;
  flex-direction: column;
    align-items: center;
	width: 100%;
}

.rubric-score {
    text-align: center;
}

.results-inner .rubric-score {
    margin-bottom: -4px;
}

.ai-microbar {
  display: flex;
  width: 80%;
  height: 12px;
  border-radius: 4px;
  overflow: hidden;
  background: #e5e7eb;
}

.ai-microbar span {
  height: 100%;
}

.ai-microbar .good    { background: #16a34a; }
.ai-microbar .basic   { background: #eab308; }
.ai-microbar .limited { background: #dc2626; }


.ai-beta-note {
  background: #f0f9f6;
  /*border: 1px solid #cceee3;
  border-left: 4px solid #4fb3a2;*/
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #0f3d37;
    margin-top: 12px;
}

.ai-beta-note strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.ai-beta-note p {
  margin: 0;
  line-height: 1.4;
}

.ai-beta-note i {
    margin-right: 4px;
    color: #4fb3a2;
}

/*****************/

.table-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 16px;
  flex-direction: column;
}

.table-actions select,
.table-actions button {
  height: 40px;
  border-radius: 6px;
}

.select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/********************/
.ai-eval-list .transcript-container{
    width: 100%;
    max-width: 1200px;
}

.visibility-title {
	font-weight: 600;
    margin-top: 22px;
    margin-bottom: 4px;
    font-size: 18px;
}

.visibility-title .sse-tip-bubble {
    min-width: 320px;
}


.visibility-title ul {
  padding-left: 10px;
  margin-left: 10px;
}

.results-visibility {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.selector-toggle {
  position: relative;
  display: inline-flex;
  gap: 6px;
  /*padding: 4px;*/
  border: 1px solid #cfd8dc;
  border-radius: 999px;
  cursor: pointer;
}

.selector-toggle .option {
  position: relative;
  display: inline-flex;           /* content-sized */
  align-items: center;
  justify-content: center;         /* centre text */
  padding: 0px 8px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 1;
}


.selector-toggle .slider {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 999px;
  background: #eee;
  transition: transform 0.5s ease, width 0.5s ease;
  z-index: 0;
}


.selector-toggle[data-state="visible"] .slider {
  background: #a7dcc9;
  }

.selector-toggle .label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
    font-size: 15px;
}

/* Normal fade-in */
.selector-toggle .label {
  transition: opacity 0.5s ease;
}

/* Kill text immediately when toggling */
.selector-toggle.text-off .label {
  opacity: 0 !important;
  transition: none;
}


.selector-toggle .sizer {
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}

/* IMPORTANT: only active option's sizer affects width */
.selector-toggle .option:not(.active) .sizer {
  width: 70px;
}


.selector-toggle[data-state="hidden"] .right .long,
.selector-toggle[data-state="hidden"] .left .short {
  opacity: 0;
}

.selector-toggle[data-state="visible"] .left .long,
.selector-toggle[data-state="visible"] .right .short {
  opacity: 0;
}

#bulk-action {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background-color: #fff;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
    width: 200px;
}

#bulk-action optgroup {
  font-weight: 600;
  color: #374151;
}

#bulk-action option[value="delete-selected"] {
  color: #b91c1c;
  font-weight: 600;
}
#bulk-action option[disabled] {
  color: #eee;
  font-size: 12px;
  pointer-events: none;
}

.sxr-ai-warning {
	display: flex;
	gap: 6px;
	font-size: 13px;
    color: grey;
    margin-top: 16px;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

.sxr-ai-warning > i {
    margin-top: 4px;
    font-size: 14px;
    color: #959595;
	}

#run-eval:disabled {
	background: #cecece;
    pointer-events: none;
}


.ai-expander {
    background: none;
    color: #1c3c47;
    padding: 0;
}

.ai-expander-holder {
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: flex-end;
}

.ai-expander::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid rgb(119 138 145);
  border-bottom: 2px solid rgb(119 138 145);
  transform: rotate(45deg);
  transition: transform 0.4s ease;
}

.ai-microbar {
  transition: opacity 0.4s ease;
  opacity: 1;
  margin-top: 12px;
  }
  
.ai-microbar.hidden {
	opacity: 0;
	display: flex !important;
	height: 0;
    margin-top: 0;
}

.ai-expander.expanded::before {
  transform: rotate(-135deg);
}

.transcript-button,
.transcript-button:focus-visible,
.transcript-button:focus,
.transcript-button:active,
.ai-expander:focus-visible,
.ai-expander:focus,
.ai-expander:active,
.ai-expander {
  border: none;
  outline: none;
  box-shadow: none;
}

.visibility-icons.row {
	flex-direction: row;
	gap: 16px;
}

.status-cell.header.select {
	display: flex;
	flex-direction: column;
	gap: 4px;
}



/* AI Sparkle Indicator */
.ai-indicator {
	margin-top: 8px;
	width: 32px;
	height: 32px;
	position: relative;
	cursor: help;
	animation: pulse 2s ease-in-out infinite;
}

.ai-indicator svg {
	fill: #1c8c6b;
	width: 100%;
	height: 100%;
}

/* Pulsing animation */
@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.25);
		opacity: 0.8;
	}
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%) rotate(45deg);
	}
	100% {
		transform: translateX(100%) rotate(45deg);
	}
}

.ai-indicator:hover::after {
	animation-play-state: paused;
}

.unlock-btn{
    box-shadow: none;
}

.unlock-btn:hover{
    box-shadow: rgb(0 0 0 / .1) 0px 3px 12px;
}

/* Mobile layout */
@media (max-width: 768px) {
	
	.ai-eval-heading {
		display: none;
	}

  .ai-eval-header {
    display: block;
        position: relative;
  }

  .ai-eval-q {
    font-weight: 600;
    margin-bottom: 6px;
  }

  .ai-eval-field {
    display: block;
    width: 100% !important;
    margin-bottom: 8px;
  }
  
  .ai-eval-field.question {
	  font-weight: 600;
  }

  /* Remove desktop truncation */
  .ai-eval-field.truncate {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .ai-eval-category {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
        box-sizing: border-box;
  }

  .ai-eval-card.good .ai-eval-category {
    background: #e6f4ec;
    color: #1f6b4c;
  }

  .ai-eval-card.basic .ai-eval-category {
    background: #fff6dc;
    color: #9a7b00;
  }

  .ai-eval-card.limited .ai-eval-category {
    background: #fde8ea;
    color: #a62d39;
  }

  .ai-eval-expand {
	position: absolute;
	top: 10px;
	right: 15px;
	color: black;
  }

  .ai-eval-body {
    margin-top: 12px;
  }

  .ai-eval-body span {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
  }

  .ai-eval-body p {
    margin: 0;
    line-height: 1.5;
  }
}


/** ULTIMATE MEMBER BLOCK PROFILE FEATURES **/
div.um-account-side a.um-account-link.current span.um-account-icontip{
	background-color:#1c8c6b;
}

.um-cover-add-i .um-icon-plus,
.um-account-profile-link {
	display: none;
}

.um-cover,
.um-profile-edit,
.um-profile-photo,
.um-account-meta {
    pointer-events: none;	
}


/*********** FOR STUDENT TRANSCRIPT PAGE *****************/
.rubric-heading {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
}

.rubric-pdf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 16px;
}

.rubric-pdf-table th,
.rubric-pdf-table td {
    border: 1px solid #cccccc;
    padding: 8px;
    vertical-align: top;
}

.rubric-pdf-table th {
    background: #9dd0be;
    font-weight: bold;
    text-align: center;
}

.rubric-criterion-col {
    width: 20%;
    text-align: left;
}

.rubric-level-col {
    width: 14%;
}

.rubric-criterion-cell strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.rubric-criterion-desc {
    font-size: 13px;
    color: #555555;
}

.rubric-selected {
    background-color: #eaf8f3;
}

.rubric-score-value {
    font-weight: bold;
    text-align: center;
}

.rubric-level-label {
    font-size: 11px;
    margin-top: 4px;
}

.rubric-total-score {
    font-size: 16px;
    margin-top: 12px;
}



/* ── Role Modal ── */
:root {
  --rm-primary: #2DA782;
  --rm-foreground: #1C3C47;
  --rm-muted: #E3F8EF;
  --rm-muted-fg: #4a6e7a;
  --rm-border: #c8e8d9;
}

#role-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
    position: fixed;
    z-index: 999999;
}

#role-modal-overlay.active { display: flex; }

#role-modal {
  background: #fff;
  border-radius: 12px;
  padding: 40px 32px 32px;
  max-width: min(90%, 520px);
  width: 90%;
  box-sizing: border-box;
  margin: auto;
  position: relative;
  box-shadow: 0 16px 48px -8px rgba(28, 60, 71, 0.2);
  animation: modalIn 0.2s ease;
  
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#role-modal h2 {
	letter-spacing: -.025em;
    font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	color: var(--rm-foreground);
	margin: 0 0 6px;
	font-family: 'Alexandria', Inter, Arial, sans-serif;
}

#role-step-2 > p,
#role-modal > p {
  text-align: center;
  color: var(--rm-muted-fg);
  margin: 0 0 28px;
}

/* Close button */
#role-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  font-size: 1.4rem;
  color: var(--rm-foreground);
  line-height: 1;
  padding: 0;
}
#role-modal-close:hover { opacity: 1; }

/* Step 1 — role cards */
#role-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.role-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 16px;
  border: 2px solid var(--rm-border);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: center;
}

.role-btn:hover {
  border-color: var(--rm-primary);
  box-shadow: 0 8px 24px -4px rgba(28, 60, 71, 0.12);
}

.role-btn:hover .role-icon {
  background: var(--rm-primary);
}

.role-btn:hover .role-icon svg {
  stroke: #fff;
}

.role-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rm-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.role-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--rm-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s;
}

.role-btn-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--rm-foreground);
}

.role-btn-sub {
  font-size: 0.8rem;
  color: var(--rm-muted-fg);
  line-height: 1.3;
}

/* Step 2 — access code */
#role-step-2 h2 { 
	font-family: Inter, Arial, sans-serif;
	margin-bottom: 6px; 
}

#role-back {
  background: none;
  border: none;
  color: var(--rm-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
  display: block;
    box-shadow: none;
}

#student-access-form {
  display: flex;
  border: 2px solid var(--rm-primary);
  border-radius: 50px;
  overflow: hidden;
  margin-top: 20px;
  background: #2da782;
    padding: 12px;
    justify-content: flex-end;
    max-width: 300px;
    margin: auto;
}

#modal-access-code {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 18px;
  font-size: 1rem;
  color: var(--rm-foreground);
  background: #fff;
  border-radius: 25px;
  min-width: 0;
}

#modal-access-code::placeholder {
  color: #999;
}

#modal-access-submit {
  background: var(--rm-primary);
  border: none;
  padding: 13px 22px;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
#modal-access-submit:hover { opacity: 0.88; }

#modal-access-error {
  color: #e53935;
  font-size: 0.8rem;
  margin-top: 8px !important;
  display: none;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  #modal-access-code {
    padding: 12px 16px;
  }
}

#role-step-1 p {
    text-align: center;
    margin: 12px 0;
  color: var(--rm-muted-fg);
}

.faq-content-inner ol {
	list-style: num;
	margin: 24px;
}

.faq-content-inner ol li::marker {
  margin-right: 1em; 
}



/* Network Check Shortcode */
.sxr-network-check-container {
	max-width: 1000px;
	margin: 20px 0;
}

.sxr-network-check-container h2 {
	color: #333;
	margin-top: 0;
	margin-bottom: 15px;
}

.sxr-network-check-section {
	margin-top: 40px;
}

.sxr-network-check-section h3 {
	color: #1c8c6b;
	margin: 0 0 8px 0;
	font-size: 16px;
	font-weight: 600;
}

.sxr-network-check-section-desc {
	color: #666;
	margin: 0 0 15px 0;
	font-size: 13px;
}

.sxr-network-check-summary {
	padding: 15px;
	background: #f5f5f5;
	border-left: 4px solid #1c8c6b;
	margin-bottom: 20px;
	border-radius: 4px;
}

.sxr-network-check-summary p {
	margin: 0;
	font-weight: 500;
}

.sxr-network-check-button {
	background: #1c8c6b;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 20px;
	transition: background 0.2s;
}

.sxr-network-check-button:hover {
	background: #2DA782;
}

.sxr-network-check-button:disabled {
	background: #959595;
	cursor: not-allowed;
}

.sxr-network-check-button-group {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.sxr-network-check-button-secondary {
	background: #f0f0f0;
	color: #333;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid #ddd;
}

.sxr-network-check-button-secondary:hover {
	background: #e0e0e0;
	border-color: #999;
}

.sxr-network-check-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sxr-network-check-table th {
	background: #f9f9f9;
	padding: 12px;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid #ddd;
	font-size: 13px;
	color: #333;
}

.sxr-network-check-table td {
	padding: 12px;
	border-bottom: 1px solid #eee;
	font-size: 13px;
}

.sxr-network-check-table tbody tr:last-child td {
	border-bottom: none;
}

.sxr-network-check-table tbody tr:hover {
	background: #f9f9f9;
}

.sxr-network-check-domain {
	font-family: monospace;
	font-size: 12px;
	color: #1c8c6b;
	word-break: break-all;
}

.sxr-network-check-result {
	min-width: 120px;
	text-align: center;
	font-weight: 500;
}

.sxr-network-check-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 12px;
}

.sxr-network-check-status.pending {
	color: #999;
}

.sxr-network-check-status.testing {
	color: #1c8c6b;
}

.sxr-network-check-status.success {
	color: #1c8c6b;
	background: #e6f5f0;
}

.sxr-network-check-status.error {
	color: #c60909;
	background: #ffe6e6;
}

.sxr-network-check-status.skipped {
	color: #999;
	background: #f0f0f0;
}

.sxr-network-check-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid #1c8c6b;
	border-top: 2px solid transparent;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

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

.sxr-network-check-tooltip {
	position: relative;
	cursor: help;
}

.sxr-network-check-tooltip:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: white;
	padding: 6px 8px;
	border-radius: 3px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 1000;
	pointer-events: none;
}

.sxr-network-check-tooltip:hover::before {
	content: "";
	position: absolute;
	bottom: 115%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #333;
	z-index: 1000;
	pointer-events: none;
}

.sxr-network-check-section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 15px;
}

.sxr-network-check-section-button {
	background: #1c8c6b;
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	transition: background 0.2s;
	white-space: nowrap;
	margin-top: 2px;
}

.sxr-network-check-section-button:hover {
	background: #2DA782;
}

.sxr-network-check-section-button:disabled {
	background: #959595;
	cursor: not-allowed;
}


#s3-warning-banner {
	background-color: #fff3cd;
	border: 1px solid #ffc107;
	color: #856404;
	padding: 12px 16px;
	border-radius: 4px;
	display: flex;
	align-items: flex-start;
	gap: 12px;	
    margin: 0 auto 16px;
    width: fit-content;
}

#s3-warning-banner a{
    color: #856404;
    font-weight: 600;
}

#s3-warning-banner a:hover{
    text-decoration: underline;
}

#sxr-num-questions-slider {
	border: none !important;
}

.td-extra-details > div {
	margin-bottom: 40px;
}

#add-instructions-body label {
	font-size: 15px;
	font-weight: 600;	
}

#td-topic-new::placeholder,
#td-subtopic::placeholder {
    color: #a3a3a3;
}

/* Curriculum */


.td-field.td-curriculum-field {
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.td-curriculum-intro {
  margin: 0 0 12px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
}

.td-curriculum-mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 16px;
}

.td-curriculum-mode-card {
  display: flex;
  align-items: center;
  border-radius: 10px;
  text-align: left;
  white-space: normal;
  width: 100%;
}

.td-curriculum-mode-icon {
  font-size: 20px;
  margin-right: 13px;
}

.td-curriculum-mode-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.td-curriculum-mode-text strong {
  font-size: 14px;
}

.td-curriculum-mode-text span {
  font-size: 12px;
  color: #6b7280;
}

.td-curriculum-badge--manual {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #d97706;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.td-curriculum-item--manual {
  border-left: 3px solid #d97706;
}

#td-curriculum-manual-panel {
  margin-bottom: 4px;
}

#td-curriculum-suggest {
  margin-bottom: 12px;
}

#td-curriculum-new-item {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

#td-curriculum-add-item {
  padding: 10px 16px;
  background: #1c8c6b;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

@media (max-width: 700px) {
  .td-curriculum-mode-picker {
    grid-template-columns: 1fr;
  }
}

.td-curriculum-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  min-height: 40px;
  padding: 4px;
}

#td-curriculum-select {
  flex: 1;
  min-width: 220px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}

#td-curriculum-result, .sxr-ac-results {
  margin-top: 24px;
}

.td-curriculum-search-again {
  background: #1c8c6b;
  color: #fff;
  border: none;
}

.td-curriculum-search-context-box {
  background: #f7fcfa;
  border: 2px solid #1c8c6b;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.td-curriculum-search-context-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1c8c6b;
  width: 100%;
  margin-bottom: 2px;
}

.td-curriculum-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.td-curriculum-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 13px;
  color: #1c8c6b;
  font-weight: bold;
}

.td-curriculum-chip-label {
  margin-right: 3px;
  font-weight: normal;
}

.td-curriculum-found-count {
  font-size: 13px;
  color: #1c8c6b;
  font-weight: 500;
  margin-bottom: 16px;
}

.td-curriculum-found-count i {
  margin-right: 5px;
}

.td-curriculum-no-results {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin: 8px 0 0;
}

.td-curriculum-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.td-curriculum-item--selectable {
  display: block;
  padding: 0;
  overflow: hidden;
}

.td-curriculum-item-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}

.td-curriculum-cb {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px !important;
  height: 16px;
  cursor: pointer;
  accent-color: #1c8c6b;
}

.td-curriculum-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.td-curriculum-notation {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e2f1eb;
  color: #1c8c6b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}


.td-curriculum-ideas-list .td-curriculum-notation {
  padding: 2px 8px 0;
}

.td-curriculum-item.is-selected .td-curriculum-notation {
  background: #1c8c6b;
  color: #fff;
}

.td-curriculum-expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #4b5563;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 1px;
}

.td-curriculum-expand:hover {
  border-color: #1c8c6b;
  color: #1c8c6b;
}

.td-curriculum-found-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.td-curriculum-muted-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: none;
}

.td-curriculum-muted-btn:hover {
  color: #6b7280;
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
  transform: none;
}

.td-curriculum-clear-btn {
  font-size: 12px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.td-curriculum-show-more {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

.td-curriculum-show-more-btn {
  font-size: 13px;
  padding: 6px 12px;
}

.td-curriculum-elaborations-section {
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
  padding: 12px 16px 12px 42px;
}

.td-curriculum-elaborations-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4b5563;
  margin-bottom: 10px;
}

.td-curriculum-elab-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.td-curriculum-elab-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.td-curriculum-elab-cb {
  margin-top: 0;
}

.td-curriculum-elab-text {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
  cursor: pointer;
}

.td-curriculum-elab-text .rendered-markdown p {
  margin-bottom: 5px;
  margin-top: 5px;
}

.td-curriculum-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.td-curriculum-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
}

.td-curriculum-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.td-curriculum-elab-selected-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #1c8c6b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto
}

.td-curriculum-elab-item.is-selected {
  background: #f7fcfa;
}

.td-curriculum-item--selectable.is-selected .td-curriculum-item-main {
  background: #eaf6f1;
}

.td-curriculum-item.is-selected {
  border-color: #1c8c6b;
  outline: 1px solid #1c8c6b;
}

.td-curriculum-substrand {
  display: inline-flex;
  align-items: center;
  color: #999;
  font-size: 11px;
}

.td-curriculum-title {
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
}

.td-curriculum-description {
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
}

.td-curriculum-description p {
  margin-bottom: 0px;
}

.td-curriculum-remove {
  color: #9ca3af;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  padding: 2px;
  transition: color 0.15s;
}

.td-curriculum-remove:hover {
  color: #a94442;
}

@media (max-width: 700px) {
  .td-curriculum-row {
    flex-direction: column;
  }

  #td-fetch-curriculum {
    width: 100%;
  }
}


#sentry-feedback {
  --trigger-background: #105440; /* Button background */
  --trigger-foreground: #ffffff; /* Button text/icon color */
  --submit-background: #105440;  /* Submit button in form */
}


#um-terms-and-conditions {
    padding-top: 0;
    padding-bottom: 12px;
}

.sxr-bill-school-card {
	border: 0 !important;
}

#sxr-billing-ui > div.sxr-bill-card.sxr-bill-card--ok {
    background: #f8f8f8;	
}

#sxr-billing-ui .sxr-bill-school-card .sxr-bill-school-btn {	
    margin-top: 32px;
    color: white !important;
}

.page-complete-sso p {
	text-align: center;
}