:root {
  --color_main1: #E40473;
  --color_main2: #4E107C;
  --auth_modal_opacity: 0.9;
  --auth_modal_bg_color: #FFFFFF;
  --grad_main1: #FCE4EF;
  --grad_revert1: #1bfb8c;
  --studio-text-color: #313131;
}

/* Font Awesome 4 webfont (S3). Tailwind/Proxima set font-family on * and steal FA glyphs. */
@font-face {
  font-family: "FontAwesome";
  src: url("https://mfe-assets-common-bucket.s3.af-south-1.amazonaws.com/v2-assets/common/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"),
       url("https://mfe-assets-common-bucket.s3.af-south-1.amazonaws.com/v2-assets/common/font-awesome/fonts/fontawesome-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://mfe-assets-common-bucket.s3.af-south-1.amazonaws.com/v2-assets/common/fonts/proxima-nova-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://mfe-assets-common-bucket.s3.af-south-1.amazonaws.com/v2-assets/common/fonts/proxima-nova-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://mfe-assets-common-bucket.s3.af-south-1.amazonaws.com/v2-assets/common/fonts/proxima-nova-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://mfe-assets-common-bucket.s3.af-south-1.amazonaws.com/v2-assets/common/fonts/proxima-nova-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://mfe-assets-common-bucket.s3.af-south-1.amazonaws.com/v2-assets/common/fonts/proxima-nova-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://mfe-assets-common-bucket.s3.af-south-1.amazonaws.com/v2-assets/common/fonts/material-icons.woff2") format("woff2");
}

.material-icons,
.MuiIcon-root {
  font-family: "Material Icons" !important;
  font-weight: normal !important;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

html,
body,
#root,
.app,
.admin {
  font-family: "Proxima Nova", Helvetica, Arial, sans-serif !important;
}

.MuiTypography-root,
.MuiButton-root,
.MuiButtonBase-root,
.MuiInputBase-root,
.MuiInputBase-input,
.MuiFormLabel-root,
.MuiMenuItem-root,
.MuiTab-root,
.MuiListItemText-root,
.MuiTableCell-root,
.MuiCssBaseline-root {
  font-family: "Proxima Nova", Helvetica, Arial, sans-serif !important;
}

a:hover,
html body #root .sidebar a:hover {
  text-decoration: none !important;
  color: var(--pgn-color-link-hover) !important;
}

.fa::before,
.fas::before,
.far::before,
.fab::before,
[class*="fa-"]::before {
  font-family: "FontAwesome" !important;
  font-weight: normal !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Verawood / Paragon 23: brand tokens (Teak used Django + SFE classes) */
html,
html[data-paragon-theme-variant],
html[data-paragon-theme-variant="light"],
html[data-paragon-theme-variant="dark"],
[data-paragon-theme-variant],
[data-paragon-theme-variant="light"],
:root,
#root {
  --pgn-color-primary: var(--color_main1) !important;
  --pgn-color-link-hover: var(--color_main1) !important;
  --pgn-color-action-default-primary-500: var(--color_main1) !important;
  --pgn-color-primary-base: var(--color_main1) !important;
  --pgn-color-primary-300: var(--color_main1) !important;
  --pgn-color-primary-400: var(--color_main1) !important;
  --pgn-color-primary-500: var(--color_main1) !important;
  --pgn-color-primary-600: var(--color_main1) !important;
  --pgn-color-primary-700: var(--color_main1) !important;
  --pgn-color-brand: var(--color_main2) !important;
  --pgn-color-brand-base: var(--color_main2) !important;
  --pgn-color-brand-400: var(--color_main2) !important;
  --pgn-color-brand-500: var(--color_main2) !important;
  --pgn-color-brand-600: var(--color_main2) !important;
  --pgn-color-accent-a: var(--color_main2) !important;
  --primary: var(--color_main1) !important;
  --pgn-color-bg-active: var(--color_main1) !important;
  --pgn-color-form-control-indicator-checked-base: var(--color_main1) !important;
  --pgn-color-form-control-indicator-checked-bg-base: var(--color_main1) !important;
  --pgn-color-form-control-indicator-checked-border-base: var(--color_main1) !important;
  --pgn-color-form-control-checkbox-indicator-indeterminate-bg: var(--color_main1) !important;
  --pgn-color-search-field-border-base: #d1d5db !important;
  --pgn-color-search-field-border-focus: var(--color_main1) !important;
  --pgn-color-search-field-border-interaction: var(--color_main1) !important;
  --pgn-size-search-field-border-width-focus: 0 !important;
  --pgn-color-input-focus: var(--color_main1) !important;
  --pgn-color-form-input-focus-border: var(--color_main1) !important;
  --pgn-elevation-form-input-focus: none !important;
  --pgn-elevation-form-input-focus-color: var(--color_main1) !important;
  --pgn-elevation-form-input-focus-spread: 0 !important;
  --pgn-elevation-form-input-focus-blur: 0 !important;
  --pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M10 17l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z'/%3E%3C/svg%3E") !important;
  --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 11h10v2H7z'/%3E%3C/svg%3E") !important;
}

/* Utility-style classes */
.color-main1 { color: var(--color_main1) !important; }
.stroke-main1 { stroke: var(--color_main1) !important; }
.fill-main1 { fill: var(--color_main1) !important; }
.border-main1 { border-color: var(--color_main1) !important; }
.bg-main1 { background-color: var(--color_main1) !important; }

.color-main2 { color: var(--color_main2) !important; }
.border-main2 { border-color: var(--color_main2) !important; }
.bg-main2 { background-color: var(--color_main2) !important; }

.vt-auth-opacity { opacity: var(--auth_modal_opacity); }
.vt-auth-modal-bg-color { background-color: var(--auth_modal_bg_color) !important; }

body.app, body.admin { 
    background: linear-gradient(233.56deg, var(--grad_main1) -21.9%, #FFF5E0 46.72%, #F8F8F8 115.74%); 
}

.dark body.app, .dark body.admin { 
    background: linear-gradient(233.56deg, var(--grad_revert1) -21.9%, #202225 46.72%, #453232 115.74%);
}

.v-sidenav .v-bg-side-active .MuiListItemIcon-root,
.v-sidenav .v-bg-side-active .v-side-symbol > span {
    color: var(--color_main1) !important;
}

/* Buttons */
.btn, .btn:hover, .button, .button:hover {
  box-shadow: none !important;
}

.subsection-header-actions .action-actions-menu li.nav-item {
  background-color: #ffffff !important;
}

.outline-complex .outline-subsection.is-ready,
.subsection-card {
  border-left-color: var(--color_main1) !important;
}

/* Primary buttons */
.v-button-primary,
.wrapper-mast .nav-actions ul > li.nav-item:first-child > a.button,
.content-primary .inner-wrapper a.button,
#page-prompt nav.nav-actions button.action-primary,
.view-textbooks .content-primary .no-textbook-content .button,
.view-textbooks .content-primary .textbook .edit-textbook .actions .action-primary,
.course-handouts .edit-button, 
.view-container .content-supplementary .unit-tags .wrapper-tags .action-primary,
.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit,
.view-group-configurations .content-primary .wrapper-collection .collection-details .actions .action .edit,
.view-textbooks .content-primary .textbook .view-textbook .actions .action .view,
.view-textbooks .content-primary .textbook .view-textbook .actions .action .edit,
.form-create .actions .action-primary,
.wrapper-xblock .xblock-header-secondary .btn-primary,
[class*="view-"] .modal-window .modal-chin .action-primary,
[class*="view-"] .modal-window .xblock-actions .action-primary,
[class*="view-"] .modal-window .modal-actions .action-primary,
.poll-block-form-wrapper form button.submit,
.openassessment .list--actions .action--submit,
.openassessment .openassessment_student_info_form .action--submit-username,
[class*="view-"] .xblock-visibility_view .is-not-configured .button, 
.view-outline .content-primary .no-content .button, 
.view-static-pages .content-primary .add-pages .button, 
.view-container .content-primary .no-container-content .button, 
.view-textbooks .content-primary .no-textbook-content .button, 
.view-group-configurations .content-primary .no-content .button, 
.view-certificates .content-primary .no-content .button, 
[class*="view-"] .xblock-visibility_view .is-not-configured .action, 
.view-outline .content-primary .no-content .action, 
.view-static-pages .content-primary .add-pages .action, 
.view-container .content-primary .no-container-content .action, 
.view-textbooks .content-primary .no-textbook-content .action, 
.view-group-configurations .content-primary .no-content .action, 
.view-certificates .content-primary .no-content .action, 
.add-xblock-component .new-component .new-component-type .add-xblock-component-button, 
.wrapper-mast .mast.has-actions .nav-actions .button.new-button, 
.wrapper-mast .mast.has-actions .nav-actions .button.button-new, 
.notification.has-actions .action-primary.new-button, 
.notification.has-actions .action-primary.button-new, 
.notice-create.has-actions .list-actions .action-primary, 
.view-uploads .no-asset-content .new-button, 
.view-dashboard .content .notice-incontext.has-actions .list-actions .action-create-course, 
.view-dashboard .content .notice-incontext.has-actions .list-actions .action-create-library, 
.view-dashboard .content .notice-incontext.list-notices .notice-item.has-actions .list-actions .action-create-course, 
.view-dashboard .content .notice-incontext.list-notices .notice-item.has-actions .list-actions .action-create-library, 
.view-import .action-choose-file, 
.view-import .wrapper-file-name .submit-button, 
.view-settings .group-settings.assignment-types .actions .new-button, 
.view-settings .group-settings.course-learning-info .actions .new-button, 
.view-settings .group-settings.instructor-types .actions .new-button, 
.view-team .content .notice-create.has-actions .list-actions .action-primary, 
.wrapper-xblock .xblock-message.no-container-content.xblock-message.no-container-content .button, .wrapper-xblock .xblock-message.no-container-content.xblock-message.no-container-content .action
{
  box-shadow: none !important;
  text-decoration: none;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;

  background-color: var(--color_main1) !important;
  background-image: none !important;
  color: #ffffff !important;

  border-radius: 5px !important;
  min-height: 3.5rem;

  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--color_main1) !important;

  font-weight: 400 !important;

  /* Note: this overrides px above as in your original */
  padding: initial;

  transition-property: all !important;
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.v-button-primary:hover,
.wrapper-mast .nav-actions ul > li.nav-item:first-child > a.button:hover,
.content-primary .inner-wrapper a.button:hover,
#page-prompt nav.nav-actions button.action-primary:hover,
.view-textbooks .content-primary .no-textbook-content .button:hover,
.view-textbooks .content-primary .textbook .edit-textbook .actions .action-primary:hover, 
.course-handouts .edit-button:hover, 
.view-container .content-supplementary .unit-tags .wrapper-tags .action-primary:hover,
.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit:hover,
.view-group-configurations .content-primary .wrapper-collection .collection-details .actions .action .edit:hover,
.view-textbooks .content-primary .textbook .view-textbook .actions .action .view:hover,
.view-textbooks .content-primary .textbook .view-textbook .actions .action .edit:hover,
.form-create .actions .action-primary:hover,
.wrapper-xblock .xblock-header-secondary .btn-primary:hover,
[class*="view-"] .modal-window .modal-chin .action-primary:hover,
[class*="view-"] .modal-window .xblock-actions .action-primary:hover,
[class*="view-"] .modal-window .modal-actions .action-primary:hover,
.poll-block-form-wrapper form button.submit:hover,
.openassessment .list--actions .action--submit:hover,
.openassessment .openassessment_student_info_form .action--submit-username:hover,
[class*="view-"] .xblock-visibility_view .is-not-configured .button:hover, 
.view-outline .content-primary .no-content .button:hover, 
.view-static-pages .content-primary .add-pages .button:hover, 
.view-container .content-primary .no-container-content .button:hover, 
.view-textbooks .content-primary .no-textbook-content .button:hover, 
.view-group-configurations .content-primary .no-content .button:hover, 
.view-certificates .content-primary .no-content .button:hover, 
[class*="view-"] .xblock-visibility_view .is-not-configured .action:hover, 
.view-outline .content-primary .no-content .action:hover, 
.view-static-pages .content-primary .add-pages .action:hover, 
.view-container .content-primary .no-container-content .action:hover, 
.view-textbooks .content-primary .no-textbook-content .action:hover, 
.view-group-configurations .content-primary .no-content .action:hover, 
.view-certificates .content-primary .no-content .action:hover, 
.add-xblock-component .new-component .new-component-type .add-xblock-component-button:hover, 
.wrapper-mast .mast.has-actions .nav-actions .button.new-button:hover, 
.wrapper-mast .mast.has-actions .nav-actions .button.button-new:hover, 
.notification.has-actions .action-primary.new-button:hover, 
.notification.has-actions .action-primary.button-new:hover, 
.notice-create.has-actions .list-actions .action-primary:hover, 
.view-uploads .no-asset-content .new-button:hover, 
.view-dashboard .content .notice-incontext.has-actions .list-actions .action-create-course:hover, 
.view-dashboard .content .notice-incontext.has-actions .list-actions .action-create-library:hover, 
.view-dashboard .content .notice-incontext.list-notices .notice-item.has-actions .list-actions .action-create-course:hover, 
.view-dashboard .content .notice-incontext.list-notices .notice-item.has-actions .list-actions .action-create-library:hover, 
.view-import .action-choose-file:hover, 
.view-import .wrapper-file-name .submit-button:hover, 
.view-settings .group-settings.assignment-types .actions .new-button:hover, 
.view-settings .group-settings.course-learning-info .actions .new-button:hover, 
.view-settings .group-settings.instructor-types .actions .new-button:hover, 
.view-team .content .notice-create.has-actions .list-actions .action-primary:hover, 
.wrapper-xblock .xblock-message.no-container-content.xblock-message.no-container-content .button, .wrapper-xblock .xblock-message.no-container-content.xblock-message.no-container-content .action:hover
{
  opacity: 0.9;
  color: #ffffff !important;
}

#root .btn-primary,
#root .btn-brand,
#root .pgn__btn.btn-primary,
#root .pgn__stateful-btn.btn-primary {
    color: #fff !important;
    background-color: var(--color_main1) !important;
    border-color: var(--color_main1) !important;
}

#root .btn-secondary,
#root .btn-tertiary,
#root .pgn__btn.btn-secondary,
#root .pgn__btn.btn-outline-primary {
    color: var(--studio-text-color) !important;
    background-color: transparent !important;
    border-color: var(--color_main1) !important;
}

/* Secondary buttons */
.v-button-secondary,
.wrapper-mast .nav-actions ul > li.nav-item:first-child ~ li.nav-item > a.button,
.content-supplementary .external-help a.button,
.content-primary .inner-wrapper li.component button.btn-default,
#page-prompt nav.nav-actions a.action-secondary,
#root .btn-outline-primary:not(.search-btn),
.view-group-configurations .content-primary .wrapper-collection .collection-details .actions .action .delete,
.view-textbooks .content-primary .textbook .view-textbook .actions .action .delete,
.view-textbooks .content-primary .textbook .edit-textbook .actions .action-secondary,
.form-create .actions .action-secondary,
[class*="view-"] .modal-window .modal-chin .openassessment_cancel_button,
[class*="view-"] .modal-window .xblock-actions .openassessment_cancel_button,
[class*="view-"] .modal-window .modal-actions .openassessment_cancel_button,
[class*="view-"] .modal-window .modal-chin .cancel-button,
[class*="view-"] .modal-window .xblock-actions .cancel-button,
[class*="view-"] .modal-window .modal-actions .cancel-button,
[class*="view-"] .modal-window .modal-chin .action-button,
[class*="view-"] .modal-window .xblock-actions .action-button,
[class*="view-"] .modal-window .modal-actions .action-button,
.add-xblock-component .new-component-templates .cancel-button {
  text-decoration: none;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;

  background-color: transparent !important;
  background-image: none !important;
  color: #333333 !important;

  border-radius: 5px !important;
  min-height: 3.5rem;

  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-color: #ced0d0 !important;

  font-weight: 400 !important;

  /* Note: this overrides px above as in your original */
  padding: initial;

  transition-property: all !important;
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.wrapper-comp-settings .file-uploader .upload-setting,
.wrapper-comp-settings .list-input.settings-list .metadata-list-enum .create-setting,
.wrapper-comp-settings .list-input.settings-list .metadata-dict .create-setting,
.paste-component .paste-component-button,
.bit .external-help-button,
.view-outline .new-subsection-item,
.view-outline .new-unit-item,
.view-outline .outline-complex .outline-subsection .subsection-header-actions .actions-list .proctoring-configuration-button,
.view-settings .group-settings #field-course-image .wrapper-input .action-upload-image,
.view-settings .group-settings #field-banner-image .wrapper-input .action-upload-image,
.view-settings .group-settings #field-video-thumbnail-image .wrapper-input .action-upload-image,
.view-settings .group-settings.instructor-types .field-group .wrapper-input .action-upload-instructor-image,
.view-textbooks .content-primary .textbook .edit-textbook .chapters-fields .field-group .field .action-upload,
.view-textbooks .content-primary .textbook .edit-textbook .textbook-fields .field-group .field .action-upload,
.view-textbooks .content-primary .textbook .edit-textbook .action-add-chapter,
.view-group-configurations .content-primary .wrapper-collection .action-add-item,
.view-group-configurations .content-primary .action-add,
.view-certificates .wrapper-collection .collection-edit .action-add-signatory,
.view-certificates .wrapper-collection .action-add-item,
.view-certificates .action-add,
.view-certificates .certificates .signatory-edit .field .signature-upload-wrapper .action-upload-signature,
.xmodule_VideoBlock .wrapper-comp-settings .list-input.settings-list .metadata-video-translations .create-setting,
.xmodule_VideoBlock .wrapper-comp-settings .list-input.settings-list .metadata-video-translations .upload-setting
{
	text-decoration: none;
	display: inline-flex !important;
	justify-content: center;
	align-items: center;

	background-color: transparent !important;
	color: #333333 !important;

	border-radius: 5px !important;

	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;

	border-width: 1px !important;
	border-style: solid !important;
	border-color: #ced0d0 !important;

	font-weight: 400 !important;

	/* Note: this overrides px above as in your original */
	padding: initial;

	transition-property: all !important;
	transition-duration: 150ms !important;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.v-button-secondary:hover,
.v-icon-btn:hover,
.wrapper-mast .nav-actions ul > li.nav-item:first-child ~ li.nav-item > a.button:hover,
.content-supplementary .external-help a.button:hover,
.content-primary .inner-wrapper li.component button.btn-default:hover,
#page-prompt nav.nav-actions a.action-secondary:hover,
#root .btn-outline-primary:hover,
.wrapper-comp-settings .file-uploader .upload-setting:hover,
.wrapper-comp-settings .list-input.settings-list .metadata-list-enum .create-setting:hover,
.wrapper-comp-settings .list-input.settings-list .metadata-dict .create-setting:hover,
.paste-component .paste-component-button:hover,
.bit .external-help-button:hover,
.view-outline .new-subsection-item:hover,
.view-outline .new-unit-item:hover,
.view-outline .outline-complex .outline-subsection .subsection-header-actions .actions-list .proctoring-configuration-button:hover,
.view-settings .group-settings #field-course-image .wrapper-input .action-upload-image:hover,
.view-settings .group-settings #field-banner-image .wrapper-input .action-upload-image:hover,
.view-settings .group-settings #field-video-thumbnail-image .wrapper-input .action-upload-image:hover,
.view-settings .group-settings.instructor-types .field-group .wrapper-input .action-upload-instructor-image:hover,
.view-textbooks .content-primary .textbook .edit-textbook .chapters-fields .field-group .field .action-upload:hover,
.view-textbooks .content-primary .textbook .edit-textbook .textbook-fields .field-group .field .action-upload:hover,
.view-textbooks .content-primary .textbook .edit-textbook .action-add-chapter:hover,
.view-group-configurations .content-primary .wrapper-collection .action-add-item:hover,
.view-group-configurations .content-primary .action-add:hover,
.view-certificates .wrapper-collection .collection-edit .action-add-signatory:hover,
.view-certificates .wrapper-collection .action-add-item:hover,
.view-certificates .action-add:hover,
.view-certificates .certificates .signatory-edit .field .signature-upload-wrapper .action-upload-signature:hover,
.xmodule_VideoBlock .wrapper-comp-settings .list-input.settings-list .metadata-video-translations .create-setting:hover,
.xmodule_VideoBlock .wrapper-comp-settings .list-input.settings-list .metadata-video-translations .upload-setting:hover,
.view-textbooks .content-primary .textbook .edit-textbook .actions .action-secondary:hover,
.view-textbooks .content-primary .textbook .view-textbook .actions .action .delete:hover,
.view-group-configurations .content-primary .wrapper-collection .collection-details .actions .action .delete:hover,
.form-create .actions .action-secondary:hover,
[class*="view-"] .modal-window .modal-chin .openassessment_cancel_button:hover,
[class*="view-"] .modal-window .xblock-actions .openassessment_cancel_button:hover,
[class*="view-"] .modal-window .modal-actions .openassessment_cancel_button:hover,
[class*="view-"] .modal-window .modal-chin .cancel-button:hover,
[class*="view-"] .modal-window .xblock-actions .cancel-button:hover,
[class*="view-"] .modal-window .modal-actions .cancel-button:hover,
[class*="view-"] .modal-window .modal-chin .action-button:hover,
[class*="view-"] .modal-window .xblock-actions .action-button:hover,
[class*="view-"] .modal-window .modal-actions .action-button:hover,
.add-xblock-component .new-component-templates .cancel-button:hover
{
  opacity: 0.9;
  border-color: var(--color_main1) !important;
}

.view-static-pages .wrapper-actions-list .actions-list .action-item.action-visible .toggle-checkbox:hover ~ .action-button {
  background-color: var(--color_main1);
}

/* Boxes */
.v-box-primary,
.view-dashboard .list-courses,
.studio-home .card-item,
.studio-home .pgn__card
{
  border: 1px solid #d1d5db !important;
  border-color: #d1d5db !important;
  border-radius: 5px !important;
  overflow: hidden;
}

.section-card,
.subsection-card,
.unit-card {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.v-box-primary-left,
.view-updates .main-column {
  border: 1px solid #d1d5db !important;
  border-color: #d1d5db !important;

  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.v-box-primary-right,
.view-updates .course-handouts {
  border: 1px solid #d1d5db !important;
  border-color: #d1d5db !important;

  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.view-updates .course-handouts {
  border-left: 0 !important;
}

/* Static pages */
.view-static-pages .content-primary .add-pages {
  background-color: #ffffff;
  box-shadow: none;
}

/* Supplementary content bit */
.content-supplementary .bit,
.help-sidebar
{
  border: 1px solid #d1d5db !important;
  border-color: #d1d5db !important;
  border-radius: 5px;
  padding: 20px;
  overflow: auto;
  padding-bottom: 20px !important;
}

/* Studio text color */
.studio-default-black,
#root .status-link,
#root .pgn__hyperlink,
.view-outline .highlights-button,
.item-card-header__title-btn {
  color: var(--studio-text-color) !important;
}

.view-outline .number-highlights {
  background-color: var(--studio-text-color) !important;
}

/* SFE wrapper */
/* SFE / Files table wrapper (Teak SFE → Verawood Paragon DataTable) */
#root .SFE-wrapper,
#root .pgn__data-table-wrapper,
#root .pgn__data-table-container,
#root .pgn__card {
  background-color: #ffffff !important;
}

#root .page-item.active .page-link,
#root .pagination .page-item.active .page-link {
  color: var(--studio-text-color) !important;
  background: transparent !important;
}

#root .table thead th,
#root .pgn__data-table thead th {
  border-bottom: 0 !important;
}

#root .form-group .search-field.focused,
#root .form-control:focus,
#root .pgn__form-control-decorator-group:focus-within {
  border-color: var(--color_main1) !important;
  box-shadow: none !important;
}

/* Static pages toggles + modal close */
.view-static-pages .wrapper-actions-list .actions-list .action-item.action-visible .toggle-checkbox:hover ~ .action-button,
.view-static-pages .wrapper-actions-list .actions-list .action-item.action-visible .toggle-checkbox:checked:hover ~ .action-button {
  background-color: var(--color_main1) !important;
}

.content-modal .action-modal-close:hover,
.content-modal .action-modal-close:active,
.pgn__modal-close-container:hover button,
.pgn__modal-header .btn-icon:hover {
  background: var(--color_main1) !important;
}

/* Remove box shadows in many views */
[class*="view-"] .xblock-visibility_view .is-not-configured,
.view-outline .content-primary .no-content,
.outline-empty-placeholder,
.view-static-pages .content-primary .add-pages,
.view-container .content-primary .no-container-content,
.view-textbooks .content-primary .no-textbook-content,
.view-group-configurations .content-primary .no-content,
.view-certificates .content-primary .no-content,
.ui-loading,
.notice-incontext,
.view-uploads .no-asset-content,
.view-import .wrapper-file-name,
.view-group-configurations .content-primary .notice-moduledisabled,
.view-certificates .content-primary .notice-moduledisabled,
.view-textbooks .content-primary .textbook .edit-textbook .actions {
  box-shadow: none !important;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
.view-settings .group-settings.advanced-policies .CodeMirror,
textarea.text,
#root .form-control,
#root .pgn__form-control,
.pgn__form-group .form-control {
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
.view-settings .group-settings.advanced-policies .CodeMirror.CodeMirror-focused,
textarea:focus,
textarea.text:focus,
textarea.form-control:focus,
select:focus,
select.form-control:focus,
html body .form-control:focus,
html body .form-control:focus-visible,
html body .pgn__form-control:focus,
html body .pgn__form-control:focus-visible,
html body .pgn__form-group .form-control:focus,
html body .pgn__form-control-decorator-group:focus-within .form-control {
  border-color: var(--color_main1) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Studio SearchField → Univo outlined VInput */
#root {
  --pgn-color-search-field-border-base: #d1d5db !important;
  --pgn-color-search-field-border-focus: var(--color_main1) !important;
  --pgn-color-search-field-border-interaction: var(--color_main1) !important;
  --pgn-size-search-field-border-radius: 5px !important;
  --pgn-size-search-field-border-width-focus: 0 !important;
}

#root .pgn__searchfield,
#root .search-field {
  border: 1px solid #d1d5db !important;
  border-radius: 5px !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

#root .pgn__searchfield .pgn__searchfield_wrapper,
#root .pgn__searchfield .pgn__searchfield-form,
#root .pgn__searchfield .pgn__form-control-decorator-group {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html body .pgn__searchfield.has-focus:after,
html body .pgn__searchfield.has-focus::after,
html body .pgn__searchfield.has-focus:not(.pgn__searchfield--external):after,
html body .pgn__searchfield.has-focus:not(.pgn__searchfield--external)::after,
html body .pgn__searchfield .pgn__searchfield_wrapper:after,
html body .pgn__searchfield .pgn__searchfield_wrapper::after,
html body .pgn__searchfield.pgn__searchfield--external.has-focus .pgn__searchfield_wrapper:after,
html body .pgn__searchfield .btn:focus-visible:after,
html body .pgn__searchfield .btn:focus-visible::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body .pgn__searchfield.has-focus:not(.pgn__searchfield--external) .pgn__searchfield_wrapper {
  box-shadow: none !important;
}

#root .pgn__searchfield.has-focus,
#root .pgn__searchfield:focus-within,
#root .pgn__searchfield:hover,
#root .search-field.focused,
#root .search-field:focus-within {
  border-color: var(--color_main1) !important;
  box-shadow: none !important;
}

#root .pgn__searchfield .form-control,
#root .pgn__searchfield input,
#root .search-field input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 5px !important;
  min-height: 40px !important;
  height: 40px !important;
}

#root .pgn__searchfield .pgn__form-control-decorator-trailing {
  inset-inline-end: auto !important;
  inset-inline-start: 0 !important;
}

#root .pgn__searchfield .pgn__form-control-decorator-group.has-appended-node .form-control {
  padding-inline-end: 0.75rem !important;
  padding-inline-start: 2.5rem !important;
}

#root .pgn__searchfield .btn-icon,
#root .pgn__searchfield .pgn__searchfield__iconbutton-submit,
#root .pgn__searchfield .pgn__searchfield__iconbutton-reset,
#root .pgn__searchfield .pgn__form-control-decorator .btn-icon,
#root .search-field .btn-icon,
#root .search-field button {
  color: #6b7280 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#root .pgn__searchfield .btn-icon:hover,
#root .pgn__searchfield .pgn__form-control-decorator .btn-icon:hover,
#root .pgn__searchfield button:hover,
#root .search-field .btn-icon:hover {
  color: var(--color_main1) !important;
  background: transparent !important;
}

#root .pgn__searchfield svg,
#root .pgn__searchfield .pgn__icon,
#root .search-field svg {
  color: inherit !important;
  fill: currentColor !important;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color_main1) !important;
}

.view-textbooks .content-primary .textbook .edit-textbook .chapters-fields .field-group .action-close,
.view-textbooks .content-primary .textbook .edit-textbook .textbook-fields .field-group .action-close {
  color: #6b7280 !important; /* gray */
}


.view-textbooks .content-primary .textbook .edit-textbook .chapters-fields .field-group .action-close:hover, .view-textbooks .content-primary .textbook .edit-textbook .textbook-fields .field-group .action-close:hover {
    color: var(--color_main1) !important;
}

.view-textbooks .content-primary .textbook .edit-textbook .action-add-chapter {
	height: 4rem !important;
}

#root input:focus,
.wrapper-xblock.level-element:hover {
	border-color: var(--color_main1) !important;
	box-shadow: none !important;
}


.view-dashboard #course-index-tabs li.active,
.studio-home-tabs .nav-link.active,
.pgn__tabs .nav-link.active {
  border-bottom: 4px solid var(--color_main1) !important;
}

.view-dashboard #course-index-tabs li a,
.studio-home-tabs .nav-link,
.pgn__tabs .nav-link {
  color: var(--studio-text-color) !important;
}

.view-dashboard #course-index-tabs li:not([class]) {
  display: none !important;
}

.view-settings .group-settings .list-input .field label.is-focused {
  color: #4c4c4c !important;
}

.view-group-configurations .content-primary .wrapper-collection .collection-header .title .toggle:hover, .view-group-configurations .content-primary .wrapper-collection .collection-header .title .toggle:focus {
  color: var(--color_main1) !important;
}

#root .search-btn.btn-outline-primary, #root .search-btn.btn-outline-primary:hover {
  border-color: var(--color_main1) !important;
  color: #333333 !important;
}

.view-outline .outline-complex .outline-section.is-collapsible .ui-toggle-expansion:hover,
.view-outline .outline-complex .outline-subsection.is-collapsible .ui-toggle-expansion:hover,
.view-outline .outline-complex .outline-section.is-collapsible .ui-toggle-expansion:active,
.view-outline .outline-complex .outline-subsection.is-collapsible .ui-toggle-expansion:active,
.jump-nav .nav-item .title:hover,
.jump-nav .nav-item .title:active
{
  color: var(--color_main1) !important;
}

.item-card-header__title-btn,
.item-card-header__title-btn:hover,
.item-card-header__title-btn:focus,
.section-card-title,
.section-card-title:hover,
.subsection-card-title,
.subsection-card-title:hover,
.unit-card-title,
.unit-card-title:hover {
  color: #000000 !important;
}


.view-outline .outline-complex .outline-section .section-header .is-editable .incontext-editor-input:focus, .view-outline .outline-complex .outline-subsection .subsection-header .is-editable .incontext-editor-input:focus, .view-outline .outline-complex .outline-unit .unit-header .is-editable .incontext-editor-input:focus{
  color: var(--studio-text-color) !important;
}

.add-xblock-component .new-component .new-component-type .add-xblock-component-button {
  display: inline-block !important;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused,
.xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover,
.xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active,
.xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active,
.xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused,
.xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover,
.xmodule_display.xmodule_SequenceBlock .sequence-nav button:active,
.xmodule_display.xmodule_SequenceBlock .sequence-nav button.active,
.sequence-navigation .nav-link.active,
.sequence-navigation .nav-link:hover,
.sequence-navigation .btn.active,
.sequence-navigation .unit-button.active,
.sequence-navigation .unit-button:hover {
  border-bottom-color: var(--color_main1) !important;
}

.wrapper-xblock .wrapper-xblock .header-actions .actions-list .action-item .action-button:hover,
.wrapper-xblock .wrapper-xblock-message .xblock-message-actions .actions-list .action-item .action-button:hover,
.wrapper-message .message-actions .actions-list .action-item .action-button:hover,
[class*="view-"] .modal-window .modal-section-content .list-actions .action-item .action-button:hover,
.view-uploads .actions-list .action-item .action-button:hover,
.view-outline .course-status .status-actions .action-item .action-button:hover,
.view-outline .outline-complex .outline-section .section-header-actions .actions-list .action-item .action-button:hover,
.view-outline .outline-complex .outline-subsection .subsection-header-actions .actions-list .action-item .action-button:hover,
.view-outline .outline-complex .outline-unit .unit-header-actions .actions-list .action-item .action-button:hover,
.view-video-uploads .assets-library .actions-list .action-item .action-button:hover,
.item-card-header .btn-icon:hover,
.item-card-button-icon:hover,
html body #root .pgn__icon-button:hover,
html body #root button.pgn__icon-button:hover,
html body #root .pgn__icon-button:hover .pgn__icon,
html body #root .pgn__icon-button:hover svg {
  background-color: var(--color_main1) !important;
  background: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
}

.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus+label,
.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus+label,
.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover+label,
.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover+label {
  border-color: var(--color_main1) !important;
}

.add-xblock-component,
.course-unit .new-component-type {
  border: none !important;
  box-shadow: none !important;
}

.sequence-nav ol li .dropdown-main-button {
  border-right: none !important;
}

.course-status .status-studio-frontend .SFE .SFE-wrapper .d-block.status-value {
  margin-top: 12px !important;
}

.status-manage-tags .course-manage-tags-container .status-course-manage-tags-info {
  margin-top: 7px !important;
}

#page-alert:has(.wrapper.wrapper-alert.wrapper-alert-announcement.is-shown) {
  display: none !important;
}

.react-course-listing .list-courses .course-item a,
.studio-home .card-item-title,
.studio-home .pgn__card-header-title-md,
.studio-home .pgn__card-header-title-md a,
.bit .list-actions .action-item a,
.help-sidebar-about-link,
.sidebar-link {
  color: var(--studio-text-color) !important;
}

.react-course-listing .list-courses .course-item a:hover,
.studio-home .card-item-title:hover,
.studio-home .pgn__card-header-title-md a:hover,
.bit .list-actions .action-item a:hover,
.help-sidebar-about-link:hover,
.sidebar-link:hover {
  color: var(--color_main1) !important;
}

.view-dashboard .course-item:hover,
.studio-home .card-item:hover {
  background-color: transparent !important;
}

[class*="view-"] .modal-window .modal-actions ul {
  display: flex !important;
}

[class*="view-"] .modal-window .modal-section .settings-tabs-header li.settings-tab-buttons .settings-tab-button:hover{
  color: var(--color_main1) !important;
}

[class*="view-"] .modal-window .modal-section .settings-tabs-header li.settings-tab-buttons .settings-tab-button.active {
  border-bottom-color: var(--color_main1) !important;
  color: var(--color_main1) !important;
}

.incontext-editor.is-editable .incontext-editor-open-action:hover, 
.incontext-editor.is-editable .access-button:hover, 
.view-group-configurations .content-primary .wrapper-collection .collection-details .actions .action .edit:hover, 
.view-certificates .wrapper-collection .collection-details .actions .action .edit:hover, 
.view-certificates .wrapper-collection .collection-details .actions .action .edit-signatory:hover, 
.incontext-editor.is-editable .incontext-editor-open-action:focus, 
.incontext-editor.is-editable .access-button:focus, 
.view-group-configurations .content-primary .wrapper-collection .collection-details .actions .action .edit:focus, 
.view-certificates .wrapper-collection .collection-details .actions .action .edit:focus, 
.view-certificates .wrapper-collection .collection-details .actions .action .edit-signatory:focus {
  background-color: var(--color_main1) !important;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav-button {
  border-color: var(--border-color, #e7e7e7) !important;
  border-width: 1px;
}

.view-static-pages .course-nav-item .course-nav-item-actions {
  position: relative;
  top: -5px;
}

#root .btn-link,
#root .pgn__hyperlink.standalone {
  color: var(--studio-text-color) !important;
}

#root .btn-link:hover,
#root .btn-link:hover span,
#root .pgn__hyperlink.standalone:hover {
  background-color: var(--color_main1) !important;
  color: white !important;
}

.course-unit .sub-header-breadcrumbs .dropdown-toggle:after {
  display: none !important;
}

.pgn__dropdown.pgn__dropdown-light button {
  padding-left: 3px !important;
}

[class*="view-"] .modal-window .modal-chin .action-primary.disabled,
[class*="view-"] .modal-window .modal-chin .action-primary.is-disabled,
[class*="view-"] .modal-window .xblock-actions .action-primary.disabled,
[class*="view-"] .modal-window .xblock-actions .action-primary.is-disabled,
[class*="view-"] .modal-window .modal-actions .action-primary.disabled,
[class*="view-"] .modal-window .modal-actions .action-primary.is-disabled,
.form-create .actions .action-primary.is-disabled
{
  border: none !important;
  background: var(--color_main1) !important;
  opacity: 0.7;
}

.view-textbooks .content-primary .textbook:hover .actions{
  display: flex !important;
}

.v-unit-wrapper .incontext-editor .xblock-string-field-editor input.xblock-field-input {
  position: relative;
  top: 3px;
  border: 0;
  color: var(--studio-text-color);
  font-size: 35px;
}

.wrapper-comp-settings .list-input.settings-list .wrapper-comp-setting input[type="number"],
.wrapper-comp-settings .list-input.settings-list .wrapper-comp-setting input[type="text"],
.wrapper-comp-settings .list-input.settings-list .wrapper-comp-setting select,
.wrapper-comp-settings .list-input.settings-list .wrapper-comp-setting textarea {
  border: 1px solid #b2b2b2;
  width: 45% !important;
  color: var(--studio-text-color) !important;
}

.wrapper-comp-settings .list-input.settings-list .wrapper-comp-setting input[type="number"]:focus,
.wrapper-comp-settings .list-input.settings-list .wrapper-comp-setting input[type="number"]:focus-visible,
.wrapper-comp-settings .list-input.settings-list .wrapper-comp-setting input[type="text"]:focus,
.wrapper-comp-settings .list-input.settings-list .wrapper-comp-setting select:focus,
.wrapper-comp-settings .list-input.settings-list .wrapper-comp-setting textarea:focus {
  border: 1px solid var(--color_main1) !important;
  background-color: transparent !important;
  outline: none !important;
}

.wrapper-comp-settings .list-input.settings-list input[type="number"]:active {
  background-color: transparent !important;
}

.wrapper-comp-settings .list-input.settings-list .action.setting-clear {
  border: none;
}

.wrapper-comp-settings .list-input.settings-list .action.setting-clear:hover {
  background-color: var(--color_main1) !important;
  border: none;
}

.add-xblock-component .new-component-template .button-component:hover {
  background-color: var(--color_main1) !important;
}

.xblock--drag-and-drop .btn-default,
.modal-editor .btn-default {
  color: var(--color_main1) !important;
}

.xblock--drag-and-drop .btn-default:hover,
.modal-editor .btn-default:hover {
  border: 1px solid var(--color_main1) !important;
}

.wrapper-xblock .wrapper-xblock .header-actions .actions-list .action-item .action-button:focus,
.xblock--drag-and-drop .btn-default:focus,
.modal-editor .btn-default:focus
{
  border-color: transparent !important;
}

.wrapper-xblock .xblock-header-secondary .actions-list .action-item .action-button:hover {
  background-color: var(--color_main1) !important;
}

.add-xblock-component .problem-type-tabs {
  background-color: #ffffff !important;
  background-image: none !important;
}

.add-xblock-component .problem-type-tabs li {
  background-color: #ffffff !important;
  box-shadow: none !important;
}

.add-xblock-component .problem-type-tabs li:hover, .add-xblock-component .problem-type-tabs li.ui-state-active {
  border-bottom: 3px solid var(--color_main1) !important;
}

[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .editor-button.is-set,
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .settings-button.is-set,
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .plugins-button.is-set,
#openassessment-editor #openassessment_editor_header .editor_tabs .ui-state-active.ui-state-default.oa_editor_tab:hover,
#openassessment-editor #openassessment_editor_header .editor_tabs .ui-state-active.oa_editor_tab {
  background-color: var(--color_main1) !important;
  border: 0;
}

[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .editor-button.is-set:hover,
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .settings-button.is-set:hover,
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .plugins-button.is-set:hover {
  opacity: 0.9;
}

[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .editor-button:hover,
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .settings-button:hover,
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .plugins-button:hover,
[class*="view-"] .modal-lg.modal-type-video .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:hover,
.view-dashboard .wrapper-creationrights .ui-toggle-control:hover,
.view-group-configurations .content-primary .wrapper-collection .collection-edit .actions .action-secondary:hover,
.view-certificates .wrapper-collection .collection-edit .actions .action-secondary:hover,
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .editor-button:active,
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .settings-button:active,
[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .plugins-button:active,
[class*="view-"] .modal-lg.modal-type-video .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:active,
.view-dashboard .wrapper-creationrights .ui-toggle-control:active,
.view-group-configurations .content-primary .wrapper-collection .collection-edit .actions .action-secondary:active,
.view-certificates .wrapper-collection .collection-edit .actions .action-secondary:active,
#openassessment-editor #openassessment_editor_header .editor_tabs .ui-state-default.oa_editor_tab:hover, #openassessment-editor #openassessment_editor_header .editor_tabs .ui-state-default.oa_editor_tab:hover a {
  background-color: var(--color_main1) !important;
  opacity: 0.75;
  color: #ffffff !important;
}

#openassessment-editor .openassessment_container_add_button {
  color: var(--color_main1) !important;
  border-color: var(--color_background) !important;
}

#openassessment-editor .openassessment_container_add_button:hover {
  background-color: var(--color_main1) !important;
  color: #ffffff !important;
}

#poll-question-editor,
#poll-feedback-editor {
  box-shadow: none;
}

#poll-question-editor:focus,
#poll-feedback-editor:focus,
#poll-question-editor:focus-visible,
#poll-feedback-editor:focus-visible {
  border: 1px solid var(--color_main1) !important;
  outline: none !important;
}

.view-dashboard .courses-processing .wrapper-course {
  border: none !important;
}
.view-dashboard .wrapper-course.has-status .status-message {
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* Verawood authoring / learning MFE (replaces Teak Django Studio + SFE DOM) */
/* -------------------------------------------------------------------------- */

.studio-home,
.course-outline,
.course-unit {
  color: var(--studio-text-color);
}

.studio-home-tabs .nav-link.active,
.pgn__tabs .nav-link.active,
.pgn__tabs .nav-link[aria-selected="true"] {
  color: var(--color_main1) !important;
  border-bottom-color: var(--color_main1) !important;
}

.outline-empty-placeholder {
  box-shadow: none !important;
}

.outline-empty-placeholder .btn-primary,
.sub-header .btn-primary,
.pgn__action-row .btn-primary,
.pgn__modal-footer .btn-primary,
.pgn__data-table-actions-left .btn-primary {
  background-color: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
  color: #ffffff !important;
}

.outline-empty-placeholder .btn-outline-primary,
.sub-header .btn-outline-primary,
.pgn__modal-footer .btn-outline-primary,
.pgn__modal-footer .btn-tertiary,
.pgn__action-row .btn-outline-primary {
  color: var(--studio-text-color) !important;
  border-color: #ced0d0 !important;
  background-color: transparent !important;
}

.outline-empty-placeholder .btn-outline-primary:hover,
.sub-header .btn-outline-primary:hover,
.pgn__modal-footer .btn-outline-primary:hover,
.pgn__action-row .btn-outline-primary:hover {
  border-color: var(--color_main1) !important;
}

.add-component-button,
.add-component-button.btn-primary {
  border-color: var(--color_main1) !important;
}

.add-component-button:hover {
  background-color: var(--color_main1) !important;
  color: #ffffff !important;
  border-color: var(--color_main1) !important;
}

.add-component-modal-radio .pgn__form-radio-input,
.pgn__form-radio-input,
.pgn__form-checkbox-input {
  accent-color: var(--color_main1) !important;
}

.pgn__modal-header .nav-link.active,
.pgn__modal-body .nav-link.active,
.pgn__tabs [role="tab"][aria-selected="true"] {
  color: var(--color_main1) !important;
  border-bottom-color: var(--color_main1) !important;
}

.pgn__menu-item:hover,
.pgn__menu-item:focus {
  color: var(--color_main1) !important;
}

.pgn__dropzone,
.pgn__form-control:focus,
.pgn__form-control-decorator-group:focus-within .form-control,
.pgn__selectable_box-active {
  border-color: var(--color_main1) !important;
  box-shadow: none !important;
}

#root .search-btn.btn-outline-primary,
#root .pgn__data-table .btn-outline-primary {
  border-color: var(--color_main1) !important;
  color: #333333 !important;
}

.pgn__form-switch .form-switch-input:checked,
.form-switch .form-check-input:checked {
  background-color: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
}

.sequence-navigation .nav-item.active .nav-link,
.sequence-navigation-tabs .nav-link.active,
.unit-button.current,
.unit-button.active {
  border-bottom-color: var(--color_main1) !important;
  color: var(--color_main1) !important;
}

.pgn__breadcrumb .pgn__hyperlink:hover,
.course-unit .pgn__breadcrumb a:hover,
.sub-header-breadcrumbs .pgn__hyperlink:hover,
.parents-breadcrumb a:hover {
  background-color: var(--color_main1) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.pgn__card-status,
.unit-header-status-bar .badge {
  border-color: transparent;
}

.pgn__modal-body .settings-tab-button.active,
.pgn__modal-body .nav-tabs .nav-link.active {
  border-bottom-color: var(--color_main1) !important;
  color: var(--color_main1) !important;
}

/* -------------------------------------------------------------------------- */
/* Studio QA screenshots (bugs/) — Verawood authoring MFE                      */
/* -------------------------------------------------------------------------- */

/* 1. Course card kebab: fade hover instead of instant fill */
.studio-home .pgn__card-header-actions .btn,
.studio-home .pgn__icon-button,
.studio-home .pgn__card-header-actions .pgn__icon-button,
.item-card-button-icon,
.pgn__icon-button {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease !important;
}

/* 2. Studio home tabs: hover underline uses brand color */
.studio-home-tabs .nav-link:hover,
.studio-home-tabs .nav-link:focus,
.pgn__tabs .nav-link:hover,
.pgn__tabs .nav-item:hover .nav-link {
  border-bottom-color: var(--color_main1) !important;
  color: var(--color_main1) !important;
}

/* 3. All Studio alerts: light grey (not brand yellow) */
#root .alert,
#root .alert-info,
#root .alert-warning,
#root .alert-success,
#root .alert-danger,
#root .pgn__alert,
#root .pgn__alert-info,
#root .pgn__alert-warning,
.course-unit__alert {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* 4 + 5. Outline/unit chrome is black except the active tab/button */
.course-unit-sidebar-header-title,
.course-unit-sidebar-header-icon,
.course-unit-sidebar-header,
.course-unit-sidebar,
.course-unit-sidebar a,
.course-unit-sidebar .pgn__icon,
.unit-header-title,
.tags-sidebar,
.tags-sidebar-taxonomy,
.tags-sidebar .pgn__icon,
.icon-with-border,
.icon-with-border-unit,
.icon-with-border-section,
.icon-with-border-subsection,
.item-card-header__title-btn,
.section-card-title,
.subsection-card-title,
.unit-card-title,
.outline-status-bar,
.outline-status-bar__item {
  color: #000000 !important;
  fill: currentColor !important;
}

.unit-header .nav-link.active,
.unit-header .nav-link[aria-selected="true"],
.course-unit-sidebar button.active,
.course-unit-sidebar [aria-selected="true"],
.course-unit-sidebar .pgn__icon-button[aria-pressed="true"] {
  color: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
}

/* 5 (round 2). Highlights pill + Info dropdown: no border */
html body #root .btn-tertiary,
html body #root .btn-inline,
html body #root .dropdown-toggle.btn-tertiary,
html body #root .dropdown-toggle.btn-inline,
html body #root .section-card .btn-tertiary,
html body #root .section-card .btn-link,
html body #root .section-card .pgn__btn.btn-outline-primary,
html body #root .sub-header .dropdown-toggle,
html body #root .sub-header-actions .dropdown-toggle,
html body #root .course-unit-sidebar-header .dropdown-toggle,
html body #root .course-unit-sidebar-header .btn:not(.btn-primary),
html body #root .course-unit-sidebar-header .pgn__btn.btn-outline-primary {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 6–7. Drag handle hover — beat later Paragon CSS with higher specificity */
html body #root .pgn__icon-button:hover,
html body #root button.pgn__icon-button:hover,
html body #root .btn-icon:hover,
html body #root .item-card-header .pgn__icon-button:hover {
  background-color: var(--color_main1) !important;
  background: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
  color: #ffffff !important;
}

html body #root .pgn__icon-button:hover svg,
html body #root .btn-icon:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* 6 + 8. Outline titles stay black on hover (do not invert to white) */
html body #root .item-card-header__title-btn,
html body #root .item-card-header__title-btn:hover,
html body #root .item-card-header__title-btn:focus,
html body #root .section-card-title,
html body #root .section-card-title:hover,
html body #root .subsection-card-title,
html body #root .subsection-card-title:hover,
html body #root .unit-card-title,
html body #root .unit-card-title:hover,
html body #root .section-card .btn-tertiary:hover,
html body #root .section-card .btn-link:hover {
  color: #000000 !important;
  background-color: transparent !important;
}

/* 7. Tab click/focus ring */
html body #root .studio-home-tabs .nav-link:focus,
html body #root .studio-home-tabs .nav-link:focus-visible,
html body #root .studio-home-tabs .nav-link:active,
html body #root .pgn__tabs .nav-link:focus,
html body #root .pgn__tabs .nav-link:focus-visible,
html body #root .pgn__tabs .nav-link:active,
html body #root .nav-tabs .nav-link:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 8. Hide Studio help strip + legal footer */
#root footer.footer,
#root .footer-wrapper,
#root .wrapper-footer,
.wrapper-footer.wrapper,
#root [data-testid="helpToggleButton"],
#root .row:has([data-testid="helpToggleButton"]),
#root .pgn__action-row.pt-3.x-small,
#root .pgn__action-row.mt-3.pb-4.x-small {
  display: none !important;
}

/* 9 + 12. Page titles match outline heading */

.sub-header-title,
.studio-home-sub-header h2,
#root header h2:not(section h2),
#root .sub-header h2,
#root .container h3,
#root .sub-header h1 {
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #111827 !important;
  margin-bottom: 40px;
}

.sub-header-title-subtitle {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin-bottom: 0.25rem !important;
}

/* 10. View live (and similar action links) have no underline */
.sub-header-actions a,
.sub-header-actions .btn,
.sub-header a.btn,
.sub-header-actions .pgn__hyperlink {
  text-decoration: none !important;
}

.sub-header-actions a:hover,
.sub-header-actions .pgn__hyperlink:hover {
  text-decoration: none !important;
}

/* 11. Studio checkboxes */
.pgn__form-checkbox-input,
.pgn__data-table input[type="checkbox"],
.form-check-input,
.custom-control-input,
input[type="checkbox"] {
  border-color: var(--color_main1) !important;
  accent-color: var(--color_main1) !important;
}

.pgn__form-checkbox-input:checked,
.pgn__data-table .form-check-input:checked,
.pgn__data-table input[type="checkbox"]:checked,
.form-check-input:checked,
.custom-control-input:checked,
input[type="checkbox"]:checked {
  background-color: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
  accent-color: var(--color_main1) !important;
}

.pgn__form-checkbox-input:checked,
.pgn__data-table input[type="checkbox"]:checked,
.form-check-input:checked,
.custom-control-input:checked {
  background-image: var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-base) !important;
}

.pgn__form-checkbox-input:indeterminate,
.pgn__data-table input[type="checkbox"]:indeterminate,
.form-check-input:indeterminate {
  background-color: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
  background-image: var(--pgn-other-content-form-control-checkbox-indicator-indeterminate-icon) !important;
}

.pgn__form-checkbox-input,
.pgn__form-checkbox-input:hover,
.pgn__form-checkbox-input:focus,
.pgn__form-checkbox-input:focus-visible,
.pgn__form-checkbox-input:active,
.pgn__form-checkbox-input:checked,
.pgn__data-table input[type="checkbox"],
.pgn__data-table input[type="checkbox"]:hover,
.pgn__data-table input[type="checkbox"]:focus,
.pgn__data-table input[type="checkbox"]:focus-visible,
.pgn__data-table input[type="checkbox"]:active,
.form-check-input:focus,
.form-check-input:focus-visible,
.custom-control-input:focus,
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="checkbox"]:active,
.pgn__form-checkbox:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* 13. Other course settings links stay black on hover */
.setting-sidebar-supplementary-other-link,
.setting-sidebar-supplementary-other-links a,
.setting-sidebar-supplementary-other-link:hover,
.setting-sidebar-supplementary-other-links a:hover {
  color: #000000 !important;
  text-decoration: none !important;
}

/* 14. Sidebar cards need a gap */
.course-team-sidebar > * + *,
.help-sidebar > * + *,
.setting-sidebar-supplementary > * + * {
  margin-top: 1.25rem !important;
}

/* 15. Space headings away from horizontal rules */
.help-sidebar hr,
.setting-sidebar-supplementary hr,
.help-sidebar .border-top,
.setting-sidebar-supplementary .border-top {
  margin: 1.5rem 0 !important;
}

.help-sidebar-about-title,
.help-sidebar-other-title,
.setting-sidebar-supplementary-about-title,
.setting-sidebar-supplementary-other-title {
  margin-top: 1rem !important;
  padding-top: 0.25rem !important;
  font-weight: bold;
}

/* 16. Header icon links never underline */
.v-header a,
.v-header a:hover,
.v-header a:focus,
.v-icon-btn,
.v-icon-btn:hover {
  text-decoration: none !important;
  box-shadow: none !important;
}

.v-icon-btn:hover {
  color: var(--color_main1) !important;
}

.v-icon-btn,
.btn-icon {
  transition-property: all !important;
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.v-icon-btn {
  border: 1px solid #CB4239;
}

/* 17. Checklist incomplete icons use brand color */
#root [class*="checklist"] .pgn__icon,
#root [class*="checklist"] svg,
.checklist-item-complete .pgn__icon,
[class*="checklist"] .pgn__form-checkbox-input {
  color: var(--color_main1) !important;
  accent-color: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
}

/* 18. Click/focus rings off buttons */
#root button:focus,
#root button:focus-visible,
#root .btn:focus,
#root .btn:focus-visible,
#root .pgn__icon-button:focus,
#root .pgn__icon-button:focus-visible,
#root a.btn:focus,
#root .dropdown-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 19. Collapse / kebab: white glyph on brand hover (icons only, not titles) */
.item-card-header .pgn__icon-button:hover,
.item-card-header .pgn__icon-button:active,
.item-card-button-icon:hover,
.item-card-button-icon:active,
.item-card-header .btn-icon:hover,
.item-card-header .btn-icon:active {
  background-color: var(--color_main1) !important;
  color: #ffffff !important;
}

.item-card-header .pgn__icon-button:hover svg,
.item-card-button-icon:hover svg,
.item-card-header .btn-icon:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

#root div.row:has(>div>div.outline-card-selected) {
  box-shadow: 1px 0.5px 3px 0 var(--pgn-color-primary-500) !important;
}

/* 9 (round 2). Selected card: slight grey shadow, not a red glow */
div.row:has(.outline-card-selected),
div.row.row:has(> div>div.outline-card-selected),
.subsection-card.outline-card-selected,
.unit-card.outline-card-selected {
  outline: none !important;
  /* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12) !important; */
}

.subsection-card__units {
  padding-right: 5px;
}

/* 21. Ellipsis buttons sit above the divider (unit editor only) */
.unit-header .pgn__icon-button,
.course-unit-sidebar-header .pgn__icon-button {
  margin-bottom: 0.5rem !important;
}

/* 22. Action button row uses a consistent gap */
.sub-header-actions,
.sub-header-actions .btn-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.sub-header-actions .btn-group .btn,
.sub-header-actions .btn-group a {
  margin: 0 !important;
  border-radius: 0.25rem !important;
}

/* 23–24. Breadcrumb hover: white label + white caret */
.pgn__breadcrumb .pgn__hyperlink:hover,
.pgn__breadcrumb .dropdown-toggle:hover,
.sub-header-breadcrumbs .pgn__hyperlink:hover,
.sub-header-breadcrumbs .dropdown-toggle:hover,
.parents-breadcrumb a:hover,
.parents-breadcrumb .dropdown-toggle:hover {
  background-color: var(--color_main1) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.pgn__breadcrumb .pgn__hyperlink:hover::after,
.pgn__breadcrumb .dropdown-toggle:hover::after,
.sub-header-breadcrumbs .dropdown-toggle:hover::after,
.parents-breadcrumb .dropdown-toggle:hover::after {
  border-top-color: #ffffff !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.pgn__breadcrumb .pgn__hyperlink:hover .pgn__icon,
.pgn__breadcrumb .dropdown-toggle:hover .pgn__icon,
.pgn__breadcrumb .dropdown-toggle:hover svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.pgn__breadcrumb .dropdown-toggle::after,
.sub-header-breadcrumbs .dropdown-toggle::after,
.parents-breadcrumb .dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 0.35rem !important;
  vertical-align: 0.15em !important;
  opacity: 1 !important;
}

/* 25. XBlock edit / kebab hover */
.xblock-item .pgn__icon-button:hover,
.xblock-item .btn:hover,
.xblock-items-container .pgn__icon-button:hover,
.wrapper-xblock .action-button:hover {
  background-color: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
  color: #ffffff !important;
}

.xblock-item .pgn__icon-button:hover svg,
.xblock-items-container .pgn__icon-button:hover svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* 26. Account menu matches tools dropdown */
.v-header .nav-sub a,
.v-header .wrapper-nav-sub a,
.v-header .v-dd-menu a {
  color: #313131 !important;
  text-decoration: none !important;
  display: block !important;
  padding: 0.5rem 0.75rem !important;
}

.v-header .nav-sub a:hover,
.v-header .wrapper-nav-sub a:hover,
.v-header .v-dd-menu a:hover {
  background: #f9fafb !important;
  color: var(--color_main1) !important;
  text-decoration: none !important;
}

/* 27. Caret sits in from the account-button edge */
.v-header .fa-caret-down,
.v-header .ui-toggle-dd {
  margin-right: 12px !important;
}

#v-header-user {
  padding-right: 16px !important;
  border-color: #E5E7EB;
  border-radius: 0.75rem;
}

/* -------------------------------------------------------------------------- */
/* Studio QA round 3 — unit sidebar colors + outline nested widths            */
/* -------------------------------------------------------------------------- */

/* Details/Settings: black chrome except the active tab/icon; no click outline */
html body #root .sidebar,
html body #root .sidebar h1,
html body #root .sidebar h2,
html body #root .sidebar h3,
html body #root .sidebar h4,
html body #root .sidebar p,
html body #root .sidebar a,
#root .sidebar button:not(.btn-icon-primary-active) .pgn__icon
html body #root .sidebar .pgn__hyperlink,
html body #root .sidebar .btn-link,
html body #root .sidebar .nav-link:not(.active),
html body #root .sidebar .pgn__icon-button:not([aria-pressed="true"]):not(.active),
html body #root .unit-header-title,
html body #root .header-title,
html body #root .course-unit-sidebar-header-title {
  color: #000000 !important;
  fill: currentColor !important;
}

html body #root .sidebar .pgn__icon-button:not([aria-pressed="true"]):not(.active) {
  border-color: #000000 !important;
}

html body #root .sidebar .nav-link.active,
html body #root .sidebar .nav-link.active *,
html body #root .sidebar .nav-link[aria-selected="true"],
html body #root .sidebar .nav-link[aria-selected="true"] *,
html body #root .sidebar [aria-pressed="true"],
html body #root .sidebar [aria-pressed="true"] .pgn__icon,
html body #root .sidebar [aria-pressed="true"] svg,
html body #root .sidebar .pgn__icon-button[aria-pressed="true"],
html body #root .sidebar .pgn__icon-button.active {
  color: var(--color_main1) !important;
  border-color: var(--color_main1) !important;
  fill: currentColor !important;
}

html body #root .sidebar .pgn__tabs .nav-link,
html body #root .sidebar .pgn__tabs .nav-link:focus,
html body #root .sidebar .pgn__tabs .nav-link:focus-visible,
html body #root .sidebar .pgn__tabs .nav-link:active,
html body #root .sidebar .pgn__tabs .nav-link.active,
html body #root .sidebar .nav-item:focus,
html body #root .sidebar .nav-item:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Nested outline cards fill the parent; keep left accent bar */
html body #root .section-card,
html body #root .subsection-card,
html body #root .unit-card {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

html body #root .section-card__content,
html body #root .section-card__subsections,
html body #root .subsection-card__content,
html body #root .subsection-card__units {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 5px;
}

html body #root .item-card-header,
html body #root .item-card-header__title-btn,
html body #root .section-card-title,
html body #root .subsection-card-title,
html body #root .unit-card-title {
  max-width: none !important;
  flex: 1 1 auto !important;
}

html body #root .subsection-card__units > .d-flex,
html body #root .subsection-card__content > .d-flex,
html body #root .subsection-card .pgn__action-row {
  width: 100% !important;
  display: flex !important;
  gap: 0.5rem !important;
}

/* New unit / library actions use brand color */
html body #root .subsection-card a.btn,
html body #root .subsection-card .pgn__btn {
  border-color: var(--color_main1) !important;
}

html body #root .subsection-card .btn-primary,
html body #root .subsection-card .pgn__btn.btn-primary {
  background-color: var(--color_main1) !important;
  color: #ffffff !important;
}

html body #root .subsection-card .btn-tertiary,
html body #root .subsection-card .pgn__btn.btn-outline-primary {
  color: var(--color_main1) !important;
}

html body #root .unit-card .pgn__chip,
html body #root .unit-card .badge,
html body #root .subsection-card .pgn__chip,
html body #root .subsection-card .badge {
  border-color: var(--color_main1) !important;
  color: var(--color_main1) !important;
}

/* Unit box + Unit label border matches the action buttons */
html body #root .unit-card {
  border-color: var(--color_main1) !important;
}

html body #root .unit-card .unit-card-title,
html body #root .unit-card .item-card-header__title-btn {
  /* border: 1px solid var(--color_main1) !important; */
  color: #000000 !important;
}

.sidebar .sidebar-toggle .rounded-iconbutton.btn-icon-primary-active span {
  color: var(--pgn-color-primary) !important
}

/* Menus/modals: do not clip kebab or Account dropdowns under cards/header/alerts */
html body #root .section-card,
html body #root .subsection-card,
html body #root .unit-card,
html body #root .item-card-header,
html body #root .item-card-header__actions,
html body #root .pgn__card,
html body .studio-home .card-item,
html body .studio-home .pgn__card {
  overflow: visible !important;
}

html body .v-header {
  position: relative;
  z-index: 1040 !important;
}

html body .v-header .v-dd-menu,
html body .v-header .wrapper-nav-sub,
html body .v-header .nav-sub,
html body #v-header-menu {
  z-index: 1060 !important;
  overflow: visible !important;
}

html body #root .pgn__alert,
html body #root .alert,
html body #root [role="alert"] {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}

/* Dropdowns / anchored popups only — do NOT clamp full-page ModalDialog layers
   (problem-type picker, add-component, Section Highlights). */
html body .pgn__dropdown-menu,
html body .dropdown-menu,
html body .pgn__menu,
html body .pgn__modal-popup:not(.pgn__modal):not([role="dialog"]),
html body [data-radix-popper-content-wrapper]:not(:has([role="dialog"])) {
  z-index: 2000 !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  max-height: min(320px, 60vh);
}

/* Studio unit modals (exercise type, add component) sit above the sidebar
   and scroll instead of being clipped at 320px. */
html body .pgn__modal-layer,
html body .pgn__modal-backdrop,
html body [data-radix-dialog-overlay],
html body .pgn__overlay:has([role="dialog"]),
html body .pgn__overlay:has(.pgn__modal) {
  position: fixed !important;
  inset: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: auto !important;
  z-index: 5000 !important;
}

html body .pgn__modal {
  position: relative !important;
  z-index: 5001 !important;
  max-height: calc(100vh - 2rem) !important;
  overflow: auto !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

html body #root .course-unit-sidebar,
html body #root .sidebar {
  z-index: 2 !important;
}

/* Section Highlights ModalPopup: keep arrow visible and prefer room above the row */
html body .highlights-modal.pgn__modal-popup,
html body .highlights-modal .pgn__modal-popup__tooltip,
html body .pgn__modal-popup.highlights-modal-popup {
  max-height: min(70vh, 36rem) !important;
  overflow-y: auto !important;
  z-index: 2100 !important;
}

html body .highlights-modal-popup .pgn__modal-popup__arrow,
html body .highlights-modal-popup .pgn__modal-popup__arrow:after {
  visibility: visible !important;
}

/* Course language / long option lists must scroll instead of painting over the page */
html body #root [role="listbox"],
html body #root .pgn__form-autosuggest__dropdown,
html body #root .pgn__form-control-decorator .dropdown-menu,
html body #root .form-group .dropdown-menu.show,
html body #root select[multiple],
html body #root select[size] {
  max-height: min(280px, 50vh) !important;
  overflow-y: auto !important;
  z-index: 2100 !important;
}

/* Studio home: hide edX “Getting started” help link */
html body .help-sidebar a[href*="getting-started"],
html body .help-sidebar a[href*="docs.openedx.org"],
html body .help-sidebar-about-links a[href*="getting-started"],
html body a.help-sidebar-about-link[href*="getting-started"],
html body .sidebar-link[href*="getting-started"] {
  display: none !important;
}

.nav-tabs .nav-link.active:focus:before,
.btn:not(:disabled,.disabled,.btn-link):focus:before,
.pgn__form-checkbox-input:focus:before,
.nav-tabs .nav-link:focus:before {
  border-width: 0 !important;
}

.sidebar-content hr {
  margin-bottom: 10px;
}
.vt-auth-bg {
  background-image: url(https://mfe-assets-custom-bucket.s3.af-south-1.amazonaws.com/ampela/image/auth_bg.png);
  background-size: cover;
  background-position: center;
}