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

/* AU Branding Fonts - use sparingly */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

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

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

/* :root {
    --dt-color-primary: #0374B5;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #0374B5;
    --dt-color-secondary: #2D3B45;
    --dt-color-secondary-contrast: #FFFFFF;
    --dt-color-secondary-dark-text: #2D3B45;
    --dt-color-accent: #707070;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #474747;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
} */

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


:root {
    /*--- DESIGNPLUS ---*/
    --dt-color-primary: #140F50;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #080620;
    --dt-color-secondary: #1448FF;
    --dt-color-secondary-contrast: #FFFFFF;
    --dt-color-secondary-dark-text: #081D66;
    --dt-color-accent: #836BFF;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #4F4099;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;

    /*--- AU Theme ---*/

    /*--- COLORS ---*/
    /* Neutrals */
    --white: #FFFFFF;
    --neutral-lighter: #fafafb;
    --neutral-light: #d4dade;
    --neutral: #93a2ac;
    --neutral-dark: #586167;
    --neutral-darker: #3b4145;
    --black: #000000;
    /* Primary (Dark Blue) */
    --primary-lightest: #F3F3F6;
    --primary-lighter: rgba(200, 199, 212, 0.64);
    --primary-light: #433F73;
    --primary: #140F50;
    --primary-dark: #0C0930;
    --primary-darker: #080620;
    /*  Secondary (Bright Blue)  */
    --secondary-lightest: #F3F6FF;
    --secondary-lighter: rgba(199, 209, 245, 0.53);
    --secondary-light: #436DFF;
    --secondary: #1448FF;
    --secondary-dark: #0C2B99;
    --secondary-darker: #081D66;
    /* Tertiary (Limestone) */
    --tertiary-lighter: #f4f4f3;
    --tertiary-light: #F9F2E6;
    --tertiary: #F8EFE0;
    --tertiary-dark: #958F86;
    --tertiary-darker: #63605A;
    --tertiary-darkest: #31302e;
    /* Accent (Jacaranda) */
    --accent-lighter: #E6E1FF;
    --accent-light: #9C89FF;
    --accent: #836BFF;
    --accent-dark: #6956CC;
    --accent-darker: #4F4099;

    /* Other Colours */
    --info-500: #0672d8;
    --info-50: #dbe9f5;
    --success-500: #0db009;
    --success-50: #def5df;
    --warning-500: #f18a2a;
    --warning-50: #f3d7bc;
    --error-500: #cb2461;
    --error-50: #f4e0e8;

    /* Cue colours */
    --content-warning: #fff9f1;
    --content-warning-body: #f18a2a;
    /*    */
    --rads: 4px;
}


/* Datacamp Light */
[data-datacamp-exercise] { visibility: hidden; } /* new version of DCL only */
.datacamp-exercise { position: relative; z-index: 1; }
.datacamp-exercise a.external .ui-icon-extlink { display: none; }
.datacamp-exercise a[class*="githubLink"] { display: none; }


.dcl-skip-link:focus {
    clip: unset;
    width: auto;
    height: auto;
    clip-path: none;
    top: -26px;
    left: 5px;
    z-index: 2;
    background: #fff;
    border: 1px solid #000;
    padding: 0 5px;
    border-radius: 1px;
}
/* end Datacamp Light */



.show-content h1,
.show-content h2,
.show-content h3,
.show-content h4,
.show-content h5,
.show-content h6,
.dp-wrapper h1,
.dp-wrapper h2,
.dp-wrapper h3,
.dp-wrapper h4,
.dp-wrapper h5 {
    margin-bottom: 1rem;
}


.show-content h5,
.dp-wrapper h5 {
    font-size: 1.25rem;
}

h1.page-title {
    font-weight: 700 !important;
    color: #140f50 !important;
}

#content:has(.show-content), #content:has(.edit-content) {
    max-width: 1100px !important;
}


/* dp-embed overrides */
.dp-embed-wrapper iframe {
    background: white; /* ALI-173 - add white background for different embed locations */
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 4px;
    padding: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 15px -3px, rgba(0, 0, 0, 0.08) 0px 4px 6px -2px;
    max-width: 80%;
    border: 1px solid var(--primary-lightest);
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    margin-bottom: 1em;

}

.dp-embed-wrapper iframe[data-frame-resize-ok],
.dp-embed-wrapper iframe[data-media-type='video'] {
    padding: 0;
    box-shadow: none;
    border: none;
    max-width: 100%;
}

.dp-embed-wrapper:has(iframe[data-frame-resize-ok]),
.dp-embed-wrapper:has(iframe[data-media-type='video']) {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 4px;
    padding: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 15px -3px, rgba(0, 0, 0, 0.08) 0px 4px 6px -2px;
    max-width: 80%;
    border: 1px solid var(--primary-lightest);
}


img.dp-embed-wrapper {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 4px;
    padding: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 15px -3px, rgba(0, 0, 0, 0.08) 0px 4px 6px -2px;
    max-width: 80%;
    border: 1px solid var(--primary-lightest);
}

.embed-wrapped {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 4px;
    padding: 0.5em;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 15px -3px, rgba(0, 0, 0, 0.08) 0px 4px 6px -2px;
    max-width: 80%;
    border: 1px solid var(--primary-lightest);
}


/* 
   Date: 29/04/2025
   Author: Tim Churchward
   Description: Fix hyperlink styles when editing pages
   Testing: https://learn.adelaide.edu.au/courses/1502/pages/link-style-testing/edit
   Hyperlinks should appear the same regardless of whether or not they are within a .dp-wrapper, and look the same when editing a page.
   Ticket: ALI-405
*/

/* ALI-405 */
#tinymce a:not(.btn),
.show-content a:not(.btn),
.dp-wrapper a:not(.btn) {
    color: var(--secondary);
    text-decoration: underline;
    font-weight: 700;
}

#tinymce .show-content a:not(.btn):hover,
.show-content a:not(.btn):hover,
.dp-wrapper a:not(.btn):hover {
    color: var(--secondary-dark);
}

/* END ALI-405 */

.show-content h2,
.mce-content-body h2,
.dp-wrapper h2 {
    font-weight: 700 !important;
    color: var(--primary);
    font-size: 36px;
    line-height: 42px;
}

.show-content h3,
.dp-wrapper h3 {
    font-weight: 700 !important;
}


.show-content h2:not(.dp-heading):after,
#tinymce h2:not(.dp-heading):after,
.mce-content-body h2:not(.dp-heading):after,
.user_content h2:not(.dp-heading):after,
.dp-wrapper h2:not(.dp-heading):after {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    margin-top: 6px;
    background-color: var(--accent);
}

/*
   Date: 24/03/2025
   Author: Tim Churchward
   Description: Style level 3 headings that are inside a title bar callout.
   Testing: https://learn.adelaide.edu.au/courses/1502/pages/title-bar-callout-with-snippets-inside
   The Level 3 heading at the bottom of the title bar callout should look identical to the one at the end of the page (outside of the callout).
   Ticket: ALI-175
*/
.show-content h3:not(.dp-panel-heading),
#tinymce h3:not(.dp-panel-heading),
.mce-content-body h3:not(.dp-panel-heading),
.user_content>h3:not(dp-panel-heading),
.dp-wrapper h3:not(.dp-panel-heading),
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar h3:not(:first-child)

/* ALI-175 */
    {
    font-weight: 500;
    color: var(--white);
    background-color: var(--primary);
    font-size: 28px;
    line-height: 28px;
    padding: 12px;
}

.show-content .dp-callout h3, #tinymce .dp-callout h3 {
    padding: 0;
    background-color: unset;
}

.show-content h4,
.dp-wrapper h4 {
    font-weight: 500;
    color: var(--primary);
    font-size: 24px;
    line-height: 24px;
}

p {
    color: var(--primary);
}

/* override for Speedgrader */
.assignmentDetails h2,
.assignmentDetails p {
    color: white;
}

/* DP Navigation */
.dp-module-list {
    font-size: 1.2em;
    font-weight: 500 !important;
}

.dp-module-list {
    margin: 4px;
}

.dp-module-list nav ul {
    gap: 4px;
}

.dp-module-list nav li a {
    color: var(--primary) !important;
    background: var(--white);
    padding: 1em !important;
    border: none !important;
    border-radius: var(--rads) !important;
    transition: all .1s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    font-size: 1rem !important;
}

.dp-module-list nav li a:hover {
    color: var(--secondary-darker) !important;
    background: var(--secondary-lightest) !important;
    transform: translateY(-2px);

}

.dp-module-list nav.dp-nav-grid ul li {
    width: 48%;

}

.dp-module-list nav li a i {
    margin-bottom: 1.3em !important;
}


/* DP Callout overrides*/

.dp-callout-type-default {
    background: var(--primary-lightest) !important;
    border: none !important;
    border-radius: var(--rads) !important;
    margin-bottom: 2em;
    padding: 1em;
}

.dp-callout-type-default h3 {
    border: none;
    font-weight: 500 !important;
    font-size: 1.3em !important;
    color: var(--primary) !important;
}

.dp-callout-type-default p,
.dp-callout-type-default li {
    color: var(--primary) !important;
}


.dp-callout-type-info {
    background: var(--tertiary-lighter) !important;
    border: none !important;
    border-radius: var(--rads) !important;
    margin-bottom: 1em !important;
    padding: 1em;
}

.dp-callout-type-info h3 {
    border: none;
    font-weight: 500 !important;
    font-size: 1.3em !important;
    color: var(--tertiary-darkest) !important;
}

/*
   Date: 21/05/2025
   Author: Tim Churchward
   Description: Use --primary text colour for migrated ADX callouts
   Testing: https://learn.adelaide.edu.au/courses/1502/pages/migration-direction-box-testing
   Text colour should be --primary for these ADX callouts but --tertiary-darker for all other generic callouts.
   Ticket: ALI-880
*/

.dp-callout-type-info p,
.dp-callout-type-info li {
    color: var(--tertiary-darker); /* Previously had !important. Seeing if this breaks anything. */
}

.dp-callout-type-info.migrated-content p,
.dp-callout-type-info.migrated-content li,
.dp-callout-type-info.migrated-content h1,
.dp-callout-type-info.migrated-content h2,
.dp-callout-type-info.migrated-content h3,
.dp-callout-type-info.migrated-content h4,
.dp-callout-type-info.migrated-content h5,
.dp-callout-type-info.migrated-content h6 {
    color: var(--primary) !important;
}

/* END ALI-880 */

.dp-callout-side-emphasis {
    background: none !important;
    border: none !important;
    color: var(--tertiary-darkest) !important;
    justify-content: start !important;
    margin-top: 16px;
    margin-left: 5px;
}

.dp-callout-type-info.dp-content-warning {
    background: var(--content-warning) !important;
    border: 1px solid !important;
    border-color: var(--warning-500) !important;
}

.dp-callout-type-info.dp-content-warning p,
.dp-callout-type-info.dp-content-warning li {
    color: var(--content-warning-body) !important;
}

.dp-callout-type-info.dp-content-warning h3 {
    color: var(--warning-500) !important;
}

.dp-content-warning .dp-callout-side-emphasis {
    background: none !important;
    border: none !important;
    color: var(--warning-500) !important;
}

.dp-callout-assignment {
    background: #fdfaf5 !important;
    border-left: 10px solid #f3e4cc !important;
    border-radius: var(--rads) !important;
    margin-bottom: 1em !important;
    padding: 1em;
}

.dp-callout-assignment h3,
.dp-callout-assignment i {
    background: none !important;
    border: none;
    font-weight: 500 !important;
    font-size: 1.3em !important;
    color: #6f562f !important;
}

.dp-callout-assignment i {
    font-size: 16px !important;
}

.dp-callout-assignment p,
.dp-callout-assignment li {
    color: #6f562f !important;
}


/* dp override for accordions */

#dp-tools-wrapper .dp-tabs-buttons>.nav-tabs a.nav-link.active,
.dp-wrapper .dp-tabs-buttons>.nav-tabs a.nav-link.active {
    background-color: var(--primary);
    color: #fff;
}


/* Blockquotes */
blockquote {
    border-top: 2px solid var(--accent-dark);
    border-bottom: 2px solid var(--accent-dark);
    border-left: none !important;
    padding: 1em;
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

blockquote p {
    font-weight: 700;
    line-height: 1.8;
    font-family: "Roboto Serif", serif;
    margin-bottom: 1em;
}


blockquote cite {
    font-weight: 400;
    font-size: .8em;
    font-family: "Roboto Serif", serif;
    color: var(--primary);
    font-style: italic;
}

/* Lists */

 .dp-wrapper ol li, .dp-wrapper ul li {
    color: var(--primary);
} 

.nav-tabs li {
    margin: initial !important;
}

/*Fancy Lists*/
ul.fancy-ul {
    background: var(--tertiary-lighter);
    border-radius: var(--rads);
    max-width: 90ch;
    margin: 1.5rem auto !important;
}

ul.fancy-ul li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #B9C0C6;
    margin: 1rem 3rem 1rem 3rem;
}

ul.fancy-ul li:last-child {
    border-bottom: none;
}

ol.fancy-ol {
    list-style-type: none !important;
    background: var(--tertiary-lighter);
    border-radius: var(--rads);
    font-size: 1rem;
    max-width: 90ch;
    margin: 1rem auto !important;
}

ol.fancy-ol.inside {
    background: none !important;
}

ol.fancy-ol.broken-list:first-of-type {
    counter-reset: mycounter;
}

ol.fancy-ol.broken-list li::before {
    counter-increment: mycounter;
    content: counter(mycounter) " ";
}

/* START ALI-852: Fix spacing for fancy lists */

ol.fancy-ol li {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #dddddd;
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
    counter-increment: step-counter;
    padding-left: 5.5em;
    position: relative;
    text-indent: 0;
}

ol.fancy-ol li:last-child {
    border-bottom: none;
}

ol.fancy-ol li::before {
content: counter(step-counter);
  font-weight: 500;
  background: var(--primary);
  padding: 0.5rem 0.7rem;
  color: #fff;
  border-radius: var(--rads);
  position: absolute;
  left: 0;
  transform: translateX(20px) translateY(-9px);
}

ol.fancy-ol li::before p {
    margin-left: 1rem;
}

ol.fancy-ol li p {
    margin-top: 1rem;
}

ol.step-list {
    list-style-type: none !important;
    max-width: 90ch;
    background: var(--tertiary-lighter);
    border-radius: var(--rads);
    font-size: 1rem;
    margin: 1rem auto !important;
    /* override for CIDIlabs */
}

ol.step-list>li {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #dddddd;
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
    counter-increment: step-counter;
    padding-left: 5.5em;
    position: relative;
    text-indent: 0;
}

ol.step-list>li:last-child {
    border-bottom: none;
}

ol.step-list>li:before {
    content: "Step " counter(step-counter);
    font-weight: 500;
    font-size: 0.8rem;
    background: var(--accent);
    border-radius: var(--rads);
    color: #fff;
    padding: 0.7rem;
    margin-right: 2em;
    position: absolute;
    left: 0;
    transform: translateX(10px) translateY(-9px);
}

ol.step-list>li:before {
    background: var(--secondary);
}


ol.step-list>li>ul,
.step-list>li>ol {
    text-indent: 0;
}

/* END ALI-852 */


/* Tables */

table.aux {
    min-width: 80%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--neutral-light) !important;
    background: #FFF;
}

table.aux tr {
    background: var(--white);
    transition: background 0.1s linear;
}

table.aux td {
    padding: 0.8em 0.5em !important;
    border-left: 1px solid var(--neutral-light);
    border-right: 1px solid var(--neutral-light)
}

table.aux tr:nth-child(even) {
    background: var(--neutral-lighter);
}

table.aux tr:hover {
    background: var(--neutral-lighter);
}

/* ALI-883 - added th rule, kept thead tr for legacy and Canvas table additions not always adding th reliably */

table.aux thead tr {
    background: var(--primary) !important;
    color: var(--white);
    font-weight: 700;
}

table.aux th {
    background: var(--primary) !important;
    color: var(--white);
    font-weight: 700;
}

table.aux thead tr td {
    border: none;
}

/* Buttons */

.show-content .btn:not(.dp-expander-controls > .btn), #tinymce .btn:not(.dp-expander-controls > .btn) {
    padding: 0.8em 1.5em !important;
    border-radius: var(--rads) !important;
    cursor: pointer;
    font-weight: 700 !important;
}

.show-content .btn.btn-primary, #tinymce .btn.btn-primary {
    background: var(--secondary);
    color: var(--white);

}

.show-content .btn.btn-primary:hover, #tinymce .btn.btn-primary:hover {
    background: var(--secondary-dark);
}

.show-content .btn.btn-secondary, #tinymce .btn.btn-secondary {
    color: var(--secondary);
    background: var(--white);
    border: 2px solid var(--secondary);

}

.show-content .btn.btn-secondary:hover, #tinymce .btn.btn-secondary:hover {
    color: var(--secondary-dark);
    background: var(--secondary-lightest);
    border: 2px solid var(--secondary-dark);
}

.show-content .btn.btn-tertiary, #tinymce .btn.btn-tertiary {
    background: none;
    color: var(--accent);
}

.show-content .btn.btn-tertiary:hover, #tinymce .btn.btn-tertiary:hover {
    background: var(--accent-lighter);
    color: var(--accent-darker);

}

/* Images and figures */


.dp-wrapper figcaption {
    font-size: 14px;
    color: var(--tertiary-darkest);
    width: 100%;
    text-align: center;
}

.dp-wrapper figcaption a {
    color: var(--secondary);
    font-weight: 400 !important;
}

/* Videos and Multimedia */

.aux-video {
    margin: 1em auto;
    max-width: 80%;
    border-radius: var(--rads);
    background: var(--white);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.aux-vid {
    margin: auto;
    width: 100%;
    padding: 1em;
}

.vid-footer {
    display: flex;
    background: var(--neutral-lighter);
    justify-content: space-between;
    align-items: center;
    margin-top: 1em;
}

.vid-footer div {
    width: 50%;
    font-weight: 500;
    border-top: 1px solid var(--primary-lighter)
}

.vid-footer div a {
    padding: 1em 1.8em;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    color: var(--primary) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

.vid-footer div a:hover {
    background: var(--primary-lighter);
}

.vid-footer div:first-child {
    border-right: 1px solid var(--primary-lighter)
}



/*
   Date: 01/04/2025
   Author: Aaron Honson
   Description: Module Key Concepts Icons
   Fixing up some icons for the Key Concepts and Key Events module titles and fixing up the margins for these h3s inherited from
   the priamry content

   Testing: https://learn.adelaide.edu.au/courses/1469/modules
   Ticket: ALI-844
*/



/*adds a key icon to any module titled "Key Concepts", "Key concepts", "key concepts", "Key Concept", "Key concept" or "key concept"*/

.module-item-title {
    margin: initial;
}

h3.module-item-title span[title^="Key Concept"] {
    padding: 10px 32px;
    margin-left: 10px;
    color: #140F50;
}

h3.module-item-title span[title^="Key Concept"]:before {
    content: '';
    background-image: url('https://learn.adelaide.edu.au/files/5418/download?download_frd=1');
    background-size: 27px 27px;
    height: 27px;
    width: 27px;
    margin-left: -35px;
    margin-top: 4px;
    position: absolute;
    background-repeat: no-repeat;
}

h3.module-item-title span[title^="Key concept"] {
    padding: 10px 32px;
    margin-left: 10px;
    color: #140F50;
}

h3.module-item-title span[title^="Key concept"]:before {
    content: '';
    background-image: url('https://learn.adelaide.edu.au/files/5418/download?download_frd=1');
    background-size: 27px 27px;
    height: 27px;
    width: 27px;
    margin-left: -35px;
    margin-top: 4px;
    position: absolute;
    background-repeat: no-repeat;
}

h3.module-item-title span[title^="key concept"] {
    padding: 10px 32px;
    margin-left: 10px;
    color: #140F50;
}

h3.module-item-title span[title^="key concept"]:before {
    content: '';
    background-image: url('https://learn.adelaide.edu.au/files/5418/download?download_frd=1');
    background-size: 27px 27px;
    height: 27px;
    width: 27px;
    margin-left: -35px;
    margin-top: 4px;
    position: absolute;
    background-repeat: no-repeat;
}


/*adds a calendar icon to any module titled "Key Events", "Key events", "key events", "Key Event", "Key event" or "key event"*/

h3.module-item-title span[title^="Key Event"] {
    padding: 10px 32px;
    margin-left: 10px;
    color: #140F50;
}

h3.module-item-title span[title^="Key Event"]:before {
    content: '';
    background-image: url('https://learn.adelaide.edu.au/files/5417/download?download_frd=1');
    background-size: 27px 27px;
    height: 27px;
    width: 27px;
    margin-left: -35px;
    margin-top: 4px;
    position: absolute;
    background-repeat: no-repeat;
}

h3.module-item-title span[title^="Key event"] {
    padding: 10px 32px;
    margin-left: 10px;
    color: #140F50;
}

h3.module-item-title span[title^="Key event"]:before {
    content: '';
    background-image: url('https://learn.adelaide.edu.au/files/5417/download?download_frd=1');
    background-size: 27px 27px;
    height: 27px;
    width: 27px;
    margin-left: -35px;
    margin-top: 4px;
    position: absolute;
    background-repeat: no-repeat;
}

h3.module-item-title span[title^="key event"] {
    padding: 10px 32px;
    margin-left: 10px;
    color: #140F50;
}

h3.module-item-title span[title^="key event"]:before {
    content: '';
    background-image: url('https://learn.adelaide.edu.au/files/5417/download?download_frd=1');
    background-size: 27px 27px;
    height: 27px;
    width: 27px;
    margin-left: -35px;
    margin-top: 4px;
    position: absolute;
    background-repeat: no-repeat;
}

/* END ALI-844 */

/* Pofile Card */

.aux-profile {
    margin: 1rem auto;
    display: grid;
    grid-template-columns: 200px 2fr;
    border: 1px solid #d5d9dd;
    border-radius: 0.5ch;
    padding: 0.833rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    background: #F3F3F6;
    max-width: 75ch;
}

.aux-profile img {
    grid-column: 1;
    object-fit: cover;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.aux-profile section {
    grid-column: 2;
    padding: 0.694rem;
}

.aux-profile section>* {
    color: #080620;
    margin: 0.579rem;
}

.aux-profile section .name {
    background: none !important;
    border: none !important;
    color: initial !important;
    padding: 0;
}

.aux-profile section .title {
    text-transform: uppercase;
    color: #82868b;
    font-weight: bold;
}

.aux-profile section .location::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2382868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.7,10.8L12,22.9L6.3,10.8c-1.9-4.1,0.7-9,5.2-9.4c0.2,0,0.4,0,0.6,0s0.4,0,0.6,0C17.1,1.8,19.7,6.7,17.7,10.8z'/%3E%3Ccircle class='st0' cx='12' cy='7.8' r='2.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    content: "";
    vertical-align: text-top;
    margin-right: 0.5ch;
}

.aux-profile section .contact::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2382868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'%3E%3C/circle%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    content: "";
    vertical-align: text-top;
    margin-right: 0.5ch;
}

.aux-profile section .availability {
    border-bottom: 1px solid #d5d9dd;
    padding-bottom: 0.833rem;
    margin-bottom: 1rem;
}

.aux-profile section .availability::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2382868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    content: "";
    vertical-align: text-top;
    margin-right: 0.5ch;

}

/* specialised callout boxes */

.dp-callout-type-info.dp-content-warning {
    background: #fff8ed !important;
    border: 1px solid !important;
    border-color: #ffa423 !important;
}

.dp-callout-type-info.dp-content-warning p,
.dp-callout-type-info.dp-content-warning li {
    color: #f95f04 !important;
}

.dp-callout-type-info.dp-content-warning h3 {
    color: #f95f04 !important;
}

.dp-content-warning .dp-callout-side-emphasis {
    background: none !important;
    border: none !important;
    color: #f95f04 !important;
}

.dp-alert-box {
    background: #fcefee !important;
    border: 1px solid #d4322c !important;
}


/* ALI-848 - side-emphasis icon styles specified to not override content */


.dp-alert-box .dp-callout-side-emphasis i,
.dp-alert-box p,
.dp-alert-box h3,
.dp-alert-box li {
    color: #d4322c !important;
}

.dp-action-box.dp-watch {
    border-left: 10px solid #436DFF !important;
    background: #F3F6FF !important;
}

.dp-watch .dp-callout-side-emphasis i,
.dp-watch p,
.dp-watch h3,
.dp-watch li {
    color: #0C2B99 !important;
}


.dp-action-box.dp-read {

    border-left: 10px solid #052A8A !important;
    background: #eff3f8 !important;

}

.dp-read .dp-callout-side-emphasis i,
.dp-read p,
.dp-read h3,
.dp-read li {
    color: #433F73 !important;
}

.dp-action-box.dp-discuss {

    border-left: 10px solid #836BFF !important;
    background: #F9F8FF !important;

}

.dp-discuss .dp-callout-side-emphasis i,
.dp-discuss p,
.dp-discuss h3,
.dp-discuss li {
    color: #4F4099 !important;
}


.dp-action-box.dp-action {
    border-left: 10px solid #958F86 !important;
    background: #F3F3F6 !important;
}




.dp-example-box {
    background: #F9F2E6 !important;

}

.dp-example-box p,
.dp-example-box li {
    color: #63605A !important;
}

.dp-example-box h3 {
    color: #958F86 !important;
    text-align: right;
    font-size: 0.8em !important;
    font-weight: bold !important;
    letter-spacing: 2pt;
    text-transform: uppercase;
    margin-top: -18px !important;

}


.dp-summary-box {
    background: #edf7f1 !important;

}

.dp-summary-box p,
.dp-summary-box li {
    color: #186937 !important;
}

.dp-summary-box h3 {
    color: #22964f !important;
    text-align: right;
    font-size: 0.8em !important;
    font-weight: bold !important;
    letter-spacing: 2pt;
    text-transform: uppercase;
    margin-top: -18px !important;

}


.dp-references-box {
    background: #F3F6FF !important;

}

.dp-references-box p,
.dp-references-box li {
    color: #0C2B99 !important;
}

.dp-references-box h3 {
    color: #0C2B99 !important;
    font-size: 0.8em !important;
    font-weight: bold !important;
    letter-spacing: 2pt;
    text-transform: uppercase;
    margin-top: -18px !important;
    border-bottom: 1px solid #D0DAFF;

}


/* pre code styling */
.dp-code-box pre {
    background: #f9fafa;
    padding: 1rem;
    min-width: 60%;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: pre-wrap !important;
    margin-bottom: 2em !important;
    border: none;
    font-family: 'Courier New', monospaced;
    font-size: 1em;
}


/* `kl_box` overrides for UoA -> AU migration */
#kl_wrapper_3.kl_box_left_1 h3:not(.ui-state-default),
#kl_wrapper_3.kl_box_left_2 h3:not(.ui-state-default),
#kl_wrapper_3.kl_box_left_3 h3:not(.ui-state-default),
#kl_wrapper_3.kl_box_left h3:not(.ui-state-default),
#kl_wrapper_3.kl_box_left h3 {
    color: var(--white);
    background-color: var(--primary);
    font-size: 28px;
    line-height: 28px;
    padding: 12px;
}

#kl_wrapper_3.kl_box_left h2 {
    border: none;
}

/* Migration override for MCE preview of iFrames after DesignPlus 'upgrade' function is used */
.mce-object-iframe iframe {
    max-width: initial !important;
}

/* Migration override to support legacy direction boxes */
div.adx-direction,
div.adx-direction-assess,
div.adx-direction-inform,
div.adx-direction-ib,
div.adx-direction-hsm,
div.adx-direction-write,
div.adx-direction-watch,
div.adx-direction-reflect,
div.adx-direction-reading,
div.adx-direction-practice,
div.adx-direction-investigate,
div.adx-direction-interactive,
div.adx-direction-extra,
div.adx-direction-discussion,
div.adx-direction-assessment,
div.adx-direction-negative,
div.adx-direction-positive,
div.adx-direction-warning,
div.adx-direction-question,
div.adx-direction-info,
div.adx-direction-listen,
div.adx-direction-university {
    background: var(--tertiary-lighter) !important;
    border: none !important;
    border-radius: var(--rads) !important;
    margin: 1em 1em 2em 1em !important;
    padding: 1em;
}

/*
   Date: 24/03/2025
   Author: Tim Churchward
   Description: Leganto embed styling overrides
   These rules target the inline styles used by Leganto when embedding a citation.
   The Leganto embed code has no classes or IDs, so instead we target them using the value of the style attributes, or part of that attribute.
   When writing selectors, consider that the style attribute value may differ in the following contexts:
       1. At the time of embedding for a single reading.
       2. At the time of embedding for multiple readings.
       3. After saving the page for a single reading.
       4. After saving the page for multiple reading.
   Sometimes they will be exactly the same as each other, but be sure to check.
   The most robust approach is to write selectors that check the the attribute contains a substring: `[style*="example"]`.
   Testing: https://learn.adelaide.edu.au/courses/1502/pages/leganto-embed-testing
   Ticket: ALI-172
*/

/* Reading item, not including the 'View item' link */
[style*="color: #333333; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;"] {
    color: var(--primary) !important;
    font-family: unset !important;
}

/* Resource type + Title */
[style*="font-size: 1.1em; line-height: 1.4em; padding: 0px 1.5em 0 0; margin: -0.2em 0 0 0;"] {
    color: var(--primary) !important;
    background-color: initial !important;
}

/* Cover thumbnail */
/* Disabled for now as Leganto SVGs seem to be loading now. Keeping this rule in case we need it later on. */
/* [style="width: 60px; padding-top: 0; height: auto; display: inline-block; max-height: 90px;  min-height: 70px; font-size: 0.1em;"],
[style="width: 60px; padding-top: 0; height: auto; display: inline-block; max-height: 90px; min-height: 70px; font-size: 0.1em;"],
[style="width: 60px; padding-top: 0; height: auto; display: inline-block; max-height: 90px; transition: all 0.3s ease; min-height: 70px; font-size: 0.1em;"] {
    background-color: lightgrey;
    border: none;
    color: rgb(0,0,0,0);
} */

/* Resource type */
[style*="font-size: .75em; color: #797276; display: inline-block; margin: 0 0.2em 0 0 !important;"] {
    color: var(--primary-light) !important;
}

/* Gap and horizontal rule below each item */
[style*="border-bottom: 1px solid rgba(43, 116, 188, 0.2);"] {
    border-bottom: 1px solid var(--primary-lighter) !important;
}

/* Parent container div, excluding subsequent nested divs */
div:has(> [style*="padding: 0.5em 0; margin: 0 1em 0 0; color: #333333; font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;"]):first-of-type {
    margin-bottom: 2em;
}

/* 'View item', but padding and margin isn't affecting items below. Used for button styling. */
div>[title="View item"],
/* If a different title was specified, instead use this very silly selector */
/* Hopefully nobody both removes the line AND changes the button text... */
div>[href*="external_tools/retrieve?display=borderless&resource_link_lookup_uuid"]:has(+ [style*='border-bottom: 1px solid rgba(43, 116, 188, 0.2)']) {
    padding: 0.6em;
    border-radius: var(--rads);
    border: 1px solid var(--secondary);
    background-color: white !important;
    color: var(--secondary) !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

div>[title="View item"]:hover,
div>[href*="external_tools/retrieve?display=borderless&resource_link_lookup_uuid"]:has(+ [style*='border-bottom: 1px solid rgba(43, 116, 188, 0.2)']):hover {
    color: white !important;
    background-color: var(--secondary) !important;
}



/* Resource info, including notes */
[style*="position: relative; padding: 0 20px 0 1.5em; flex-direction: column; flex: 1 1 auto; width: calc(100% - 60px); margin: 0; vertical-align: top; zoom: 1;"] {
    padding-left: 0.5em !important;
}

/* Note text, but not the word 'Note:' */
[style*="color: #444; display: block; font-style: italic; margin: 0 0 3px 0; position: relative;"]>p {
    display: inline;
}

/* Fix the whacky padding */
[style*="padding: 0.5em 0.5em; width: calc(100% + 20px); display: flex; flex-wrap: nowrap; text-align: left; white-space: normal; border-radius: 3px;"] {
    padding: 0.8em 0.3em !important;
}

/* END ALI-172 */

/*
   Date: 24/03/2025
   Author: Tim Churchward
   Description: Fix heading styles inside title bar callouts
   Testing: https://learn.adelaide.edu.au/courses/1502/pages/title-bar-callout-with-snippets-inside
   The headings inside the title bar callout should look identical to the headings below the callout.
   Ticket: ALI-175
*/

/* Undo Cidilab's rule */
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar h1,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar h2,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar h3,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar h4,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar h5,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar h6 {
    background-color: initial;
    color: var(--primary);
    padding: initial;
    margin-left: initial;
}

/* Do it again but target only the first title */
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar>.card-body>h1.card-title,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar>.card-body>h2.card-title,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar>.card-body>h3.card-title,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar>.card-body>h4.card-title,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar>.card-body>h5.card-title,
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar>.card-body>h6.card-title {
    background-color: var(--dt-color-primary);
    color: var(--dt-color-primary-contrast);
    margin-left: calc(var(--bs-card-spacer-x)*-1);
    padding: .5rem var(--bs-card-spacer-x);
}

/* Fix the margin on the profile card when inside a title bar callout */
.dp-callout.card.dp-callout-color-dp-primary.dp-callout-type-title-bar .aux-profile section>* {
    margin: 0.579rem;
}

/* END ALI-175 */

/*
   Date: 01/01/2025
   Author: Tim Churchward
   Description: Fix text colour in callouts
   Testing: https://adelaideuni.test.instructure.com/courses/1502/pages/css-testing-lists
   Ticket: ALI-214
*/

.dp-callout-type-solid p {
    color: var(--dt-color-primary-contrast);
}

.dp-callout-type-title-bar ul,
.dp-callout-type-title-bar ol,
.dp-callout-type-title-bar li {
    color: var(--dt-color-primary);
}

/* END ALI-214 */

/*
   Date: 29/04/2025
   Author: Tim Churchward
   Description: Fix text colour in accordions
   Testing: https://learn.adelaide.edu.au/courses/2653/pages/perspective-and-techniques-mixed-media-technique-concept-page
   Go to Industrial Design > Marker Rendering. Lists should be navy not grey.
   Ticket: ALI-854
*/

.dp-wrapper .dp-accordion-default>.dp-panel-content {
    color: inherit;
}

/* END ALI-854 */

/*
   Date: 05/05/2025
   Updated: 08/05/2024
   Author: Tim Churchward
   Description: Fix active state for 'vertical outlined pill tab' expanders.
   Testing: https://learn.adelaide.edu.au/courses/4724/pages/workshop-1-dot-1-classes?module_item_id=367450
   The pill tab 'Getting started with VS Code' should be clearly readable.
   Ticket: ALI-850
*/

.dp-tabs-pills-group-vertical .nav-link.dp-panel-heading.active {
    color: var(--dt-color-primary-contrast) !important;
  }

/* END ALI-850 */

/*
   Date: 26/05/2025
   Author: Tim Churchward
   Description: Change text colour for <code> elements.
   Testing: https://learn.adelaide.edu.au/courses/4724/pages/constructor-default-4?module_item_id=482082
   Inline code example (in the 'Definition' expander) should have --primary coloured text.
   Ticket: ALI-882
*/

.dp-wrapper code {
    color: var(--primary);
  }

/* END ALI-882 */

/*
   Date: 17/06/2025
   Author: Tim Churchward
   Description: Styling for roadmap and assignment summary tables
   Testing: https://learn.adelaide.edu.au/courses/5867/pages/course-roadmap
   Ticket: ALI-884
*/

table.roadmap-table {
    border-collapse: separate;
}

.assignment-summary-table,
.assignment-summary-table th,
.assignment-summary-table td,
.roadmap-table,
.roadmap-table th,
.roadmap-table td {
    border: 2px solid var(--white) !important;
    padding: 1rem 0.5rem !important;
}

.assignment-summary-table th,
.roadmap-table th {
    background: var(--accent-lighter);
}

.assignment-summary-table tr:nth-child(even)

/* .roadmap-table tr:nth-child(even) */
    {
    background: var(--primary-lightest);
}

.assignment-summary-table tr:nth-child(odd)
/* .roadmap-table tr:nth-child(odd)  */
    {
    background: var(--white);
}

.roadmap-table tr {
    background: var(--primary-lightest);
}

.assignment-summary-table td p,
.roadmap-table td p {
    margin: 0 0 0.5rem 0 !important;
}

.assignment-summary-table td p:last-of-type,
.roadmap-table td p:last-of-type {
    margin-bottom: 0 !important;
}

/* END ALI-884 */

/* ALI-855 - add nav-tabs background with spacing - except for the #myTab id used in the Learning Centre */

.dp-wrapper .nav-tabs:not(#myTab) .nav-link {
  background: #F3F3F6;
  margin-right: 4px;
}

/* ALI-888 - Helper class to enforce 16:9 aspect ratio on Panopto videos (add this class to the iframe and remove the hardcoded height in the RCE) */

.panopto-aspect {
  aspect-ratio: 16/9;
}

/* ALI-887 - Fix hover of dp-embed-wrapper iframes which was occuring inside of the editor only */

.dp-editor:not(.dp-no-outline-label) div.dp-embed-wrapper:hover, .dp-editor:not(.dp-no-outline-label) div.dp-embed-wrapper iframe:hover {
  padding: initial !important;
}


/* START ALI-846 */

.aux-audio-player {
    display: flex;
    width: 100%;
    gap: 1.2rem;
    padding: 1em;
    background: #F3F6FF;
    border-radius: 8px;
    margin: 1rem;
}

.aux-audio-player .meta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.aux-audio-player .meta {
    width: 100%;
}

.aux-audio-player .meta h3 {
    font-size: 1.5em;
    padding-left: 0;
    background: none;
    color: #0C2B99;
    margin-bottom: -1em;
}

.aux-audio-player .meta p {
    color: #0C2B99;
}

.aux-audio-player img {
    border-radius: 4px;
}

/* END ALI-846 */