/* GENERAL PURPOSE DECLARATIONS */



:root {
    --plain-tx: #3D3D3D;
    --lightergrey: #F5F5F5;
    --lightgrey: #EBEBEB;
    --blue: #4164AF !important;
    --glowblue-bg: #6D62EC14 !important;
    --glowblue-tx: #6D62EC !important;
    --glowgreen-bg: #FCBA3899 !important;
    --glowgreen-tx: #7E5402 !important;
    --green: #36C980 !important;
}


.align-top {
    display: flex;
    align-items: flex-start;
}

.align-middle {
    display: flex;
    align-items: center;
}

.align-bottom {
    display: flex;
    align-items: flex-end;
}

.align-left {
    display: flex;
    justify-content: flex-start;
}

.align-center {
    display: flex;
    justify-content: center;
}

.align-between {
    display: flex;
    justify-content: space-between;
}

.align-right {
    display: flex;
    justify-content: flex-end;
}

.middle-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


.area {
    margin-bottom: 2rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--lightergrey);
}

.pill {
    padding: 3px 6px;
    margin-inline: 1px;
    border-radius: 0.6em;
    width: fit-content;
    white-space: nowrap
}

.iconbutton {
    padding: 0.30em 0.40em;
    margin-inline: 0.33rem;
    border-radius: 0.5em;
    border: 1px solid var(--blue);
}

.home.iconbutton::before {
    content: url(../pix/icons/icon_home_lines.svg)
}

.menu.iconbutton::before {
    content: url(../pix/icons/icon_hamburger_lines.svg)
}

i.faicon {
    font-size: 24px !important;
    margin-inline: 0.25em !important
}


/* HEADER DECLARATIONS */
header.topbar {
    background-color: var(--lightergrey);
    padding-block: 1rem
}

header.topbar [class|="col"] {
    padding: 0 !important;
}

header.topbar picture.logo > img {
    width: 100%
}

header.topbar form #search {
    width: 100%;
    padding-inline: 1rem;
    border-radius: 6px;
    border: 1px solid var(--lightgrey)
}

header.topbar form button[type="submit"] {
    padding: 0.5rem 0.75rem;
    background-color: transparent;
    border: 1px solid transparent
}

header.topbar form #action-search:hover {
    border: 1px solid var(--lightgrey)
}

header.topbar .moodle-action:first-of-type {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    color: var(--lightgrey)
}

header.topbar .moodle-action {
    width: 33%;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lightgrey);
    color: var(--plain-tx) !important
}

header.topbar .moodle-action:not(:last-of-type) {
    margin-right: 1px;
}

header.topbar .moodle-action:last-of-type {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

main > ul.breadcrumb {
    background-color: #FFF;
    margin-block: 3rem;
    padding: 0
}

main > ul.breadcrumb > li.breadcrumb-item.pill {
    background-color: var(--glowblue-bg);
    color: var(--glowblue-tx);
    font-size: 14px
}

main > ul.breadcrumb > li.breadcrumb-item.pill.prev {
    padding-inline: 0.75rem
}

main > ul.breadcrumb > li.breadcrumb-item.active {
    background: none;
    pointer-events: none;
}

main > ul.breadcrumb > li.breadcrumb-item:not(.active) {
    font-weight: 600;
}

main > ul.breadcrumb > li.breadcrumb-item:not(.active):not(:first-of-type)::after {
    content: url(../pix/icons/icon_next_lines.svg);
    padding-left: 6px
}

main > ul.breadcrumb > li.breadcrumb-item::before {
    content: ''
}


/* IDENTIFICATION SECTION */
main #identify > h1 {
    line-height: 1;
    margin-bottom: 1rem
}

main #identify .attribs {
    margin-block: 0.5rem;
    line-height: 2;
}

main #identify .attribs .certified {
    margin-block: 1rem;
}

main #identify .attribs .certified .pill {
    background-color: var(--green);
    color: #FFF;
    font-size: 14px;
}

main #identify .attribs .certified .pill::before {
    content: url(../pix/icons/icon_studies_fill.svg);
    margin-right: 0.5em;
}

main #identify .attribs .properties .pill {
    background-color: var(--glowgreen-bg);
    color: var(--glowgreen-tx);
    font-size: 14px;
}

main #identify .attribs .classification {
    line-height: 2
}

main #identify .attribs .classification .title {
    display: inline;
    font-weight: 600;
    font-size: 14px
}

main #identify .attribs .classification .pill {
    background-color: var(--lightgrey);
    color: var(--plain-tx);
    font-size: 14px;
}

main #identify .attribs .subject {
    line-height: 2
}

main #identify .attribs .subject .title {
    display: inline;
    font-weight: 600;
    font-size: 14px
}

main #identify .attribs .subject .pill {
    background-color: var(--lightgrey);
    color: var(--plain-tx);
    font-size: 14px;
}

main #identify .description > picture > img {
    width: 100%
}

main #identify .description > article > h2 {
    font-size: 24px
}

main #identify .description > article > p {
    font-size: 16px
}

main #identify .description > #keywords {
    padding-inline: 1rem
}

main #identify .description > #keywords a.pill.keyword {
    display: inline-block;
    line-height: 1.5;
    font-size: 14px;
    color: #FFF;
    background-color: #4164AF;
}

/* BUTTON FOLDER DECLARATIONS */
.button-folder {
    padding: 0;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 1rem;
}

.button-folder:has( > button.collapsed) {
    border: none
}

.button-folder:has( > button:not(.collapsed)) {
    border: 1px solid var(--blue)
}

.button-folder > button {
    width: 100%;
    padding: 1rem;
    background-color: var(--lightergrey);
    border: none;
    text-align: left;
    transition: 0.75s all
}

.button-folder > button:not(.collapsed) {
    background-color: var(--blue);
}

.button-folder > button h4 {
    display: flex;
    align-items: center;
    margin: 0;
    text-align: left;
    color: var(--plain-tx)
}

.button-folder > button:not(.collapsed) h4 {
    color: #FFF
}

.button-folder > button h4 > .faicon {
    margin-right: 1em;
    width: 1.75rem;
    display: inline-block;
    text-align: center;
}

.button-folder > button h4 > i.toggle {
    margin-left: auto;
    font-size: 12px;
    transition: 0.5s rotate, 0.5s color
}

.button-folder > button:not(.collapsed) h4 > i.toggle {
    rotate: 180deg;
}


/* COURSE FEATURES BUTTON FOLDER */
main #header-course-features-folder div.row {
    margin: 0.25rem;
}

main #header-course-features-folder div.row > div {
    margin: 0.25rem;
    padding-block: 0.5rem;
    background-color: var(--lightergrey);
    border-radius: 6px
}

main #header-course-features-folder #course-features h5 {
    font-size: 16px;
}

main #header-course-features-folder #course-features p {
    font-size: 16px;
}

/* COURSE FEATURES */
main #header-course-features {
    margin: 2rem 1rem;
}

main #header-course-features [class|="col"] {
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--lightergrey);
}

/* COURSE RESULTS BUTTON FOLDER */
main #header-course-results #course-results div.row {
    margin: 0.25rem;
}

main #header-course-results #course-results div.row > div {
    margin: 0.25rem;
    padding-block: 0.5rem;
    background-color: var(--lightergrey);
    border-radius: 6px
}

main #header-course-results #course-results h5 {
    font-size: 16px;
}

main #header-course-results #course-results p {
    font-size: 16px;
}

/* COURSE EVALUTATION BUTTON FOLDER */
main #header-comments-and-evaluate div.row {
    margin: 0.25rem;
}

main #header-comments-and-evaluate div.row > div {
    margin: 0.25rem;
    padding-block: 0.5rem;
    background-color: var(--lightergrey);
    border-radius: 6px
}

main #header-comments-and-evaluate #comment-and-evaluate button.add-comment {
    display: block;
    margin-block: 1rem;
    margin-left: auto;
    margin-right: 1rem;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: var(--lightergrey);
    border: 1px solid #DDD;
    font-weight: 600;
    color: var(--blue);
}

main #header-comments-and-evaluate #comment-and-evaluate button.add-comment img {
    margin-right: 0.5rem;
    filter: brightness(0);
}

main #header-comments-and-evaluate #comment-and-evaluate button.more-comments {
    display: block;
    margin-block: 1rem;
    margin-inline: auto;
    padding: .5em .75rem;
    border: 1px solid #CCC;
    border-radius: 0.5rem;
    background-color: transparent;
    font-weight: 600;
    color: var(--plain-tx);
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > header {
    padding: 1rem;
    padding-bottom: 0;
    margin: 1rem;
    margin-bottom: 0;
    background-color: var(--lightergrey);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > header > picture {
    padding: 0
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > header > picture > img {
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > header .username {
    margin: 0;
    font-size: 18px;
    color: var(--blue) !important;
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > header .timestamp {
    margin: 0;
    font-size: 16px;
    color: #3D3D3D99 !important;
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > main {
    padding: 0;
    padding-block: 1rem;
    margin: 0;
    margin-inline: 1rem;
    background-color: var(--lightergrey);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > main .evaluation {
    padding-block: 1rem;
    height: fit-content;
    align-self: center;
    border-left: 1px solid #DDD;
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > main .evaluation label {
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-align: left
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > main .evaluation fieldset {
    padding: 0;
    margin: 0;
    border: none;
    text-align: center;
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > main .evaluation fieldset > button {
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent
}

main #header-comments-and-evaluate #comment-and-evaluate div.user > main .evaluation fieldset > button > i.faicon {
    font-size: 1rem !important;
    margin-inline: 0 !important;
    color: var(--blue)
}

/* AUTO-REGISTER SECTION */
main #header-autoregister {
    padding: .5rem;
    margin-block: 1rem;
    border-radius: 1rem;
    background-color: var(--lightergrey)
}

main #header-autoregister #autoregister {
    padding: 1rem;
}

main #header-autoregister button.register {
    padding: .25rem 1.5rem;
    border-radius: 1rem;
    background-color: var(--blue);
    color: #FFF
}


/* ASIDE SECTION */
main .blocktitle {
    text-align: center
}

main .info {
    padding: 1rem;
    background-color: var(--lightergrey);
    border-radius: 1rem
}

main .info picture {
    margin: 0;
    padding: 0.5rem;
}

main .info picture img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

main h6.title {
    color: var(--blue);
    font-weight: 400;
    font-size: 16px
}

main .author {
    font-size: 20px;
    font-weight: 600;
    line-height: .85
}

main .creators {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--lightgrey);
    border-radius: 1rem;
}

main .creators p {
    margin: 0;
}

main .collaborators {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--lightgrey);
    border-radius: 1rem;
}

main .collaborators p {
    margin: 0;
}

main .published {
    margin-top: 1rem;
    padding: 0.25rem 1rem;
    background-color: var(--lightgrey);
    border-radius: 1rem
}

main .published > * {
    display: inline
}

main .lastupdated {
    margin-top: 0.5rem;
    padding: 0.25rem 1rem;
    background-color: var(--lightgrey);
    border-radius: 1rem
}

main .lastupdated > * {
    display: inline
}

main .evaluation {
    text-align: center;
}

main .course-grade > button {
    padding: 0;
    border: none;
    background-color: transparent
}

main .course-grade > button > i.faicon {
    font-size: 1.5rem;
    color: var(--blue)
}

main aside :is(.bookmark,.like) {
    color: var(--blue);
}

main .like .like-counter {
    padding-left: 0.25rem;
    vertical-align: middle;
}

main .actions {
    margin-top: 2rem;
    padding: 1rem;
    background-color: var(--lightergrey);
    border-radius: 1rem;
}

main .actions .action {
    width: 100%;
    padding: 1rem .75rem;
    margin-bottom: 0.25rem;
    border: none;
    background-color: var(--lightgrey);
    text-align: left;
}

main .actions .action:first-of-type {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

main .actions .action:last-of-type {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

main .actions .action i.faicon {
    display: inline-block;
    width: 1.75rem;
    margin-right: 1rem;
    vertical-align: text-bottom;
    text-align: center;
    color: var(--plain-tx);
}

main .files {
    margin-top: 2rem;
    padding: 1rem;
    background-color: var(--lightergrey);
    border-radius: 1rem
}

main .files .filesattached {
    width: 100%;
    margin-bottom: .75rem;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    background-color: var(--glowblue-bg);
    text-align: left;
    font-size: 18px;
    color: var(--plain-tx)
}

main .files .filesattached i.faicon {
    font-size: 18px;
    color: var(--blue)
}

main .files .scenario {
    display: block;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--blue);
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #FFF
}
.page-header-headings h1{
    display:none;
}