* {
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 1em 1em 3em 1em;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: linear-gradient(rgba(126, 158, 62, 0.9) 0%, rgba(126, 158, 62, 0.9) 100%), url(/background.jpg);
    
}

body.staff::before {    
    background-image: url(/background.jpg);
    filter: grayscale() contrast(0.1) brightness(1.8);
}

h1, h2, h3, h4, h5 {
    color: #F3FFCC;
    margin-top: 0;
}

header {
    width: min(1720px, 90vw);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2em;
}

header > div {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
}

header > div:first-child {    
    justify-content: flex-start;
}

header > div:last-child {    
    justify-content: flex-end;
}

header .logo {
    height: 100px;
}

header h1 {
    color: white;
    flex-grow: 1;
    text-align: center;
}

.main-menu ul {
    display: flex;
    list-style-type: none;
    padding: 0.5em;
    margin: 0;
    background: #7E9E3E;
    color: #F3FFCC;
    border-radius: 1.5em;
    gap: 1em;
}

.main-menu ul li {
    padding: 0.5em 1em;
    border-radius: 1em;
    display: flex;
    align-items: center;
}

.main-menu ul li.active {
    background: #94B552;
}

.main-menu ul li a {
    color: inherit;
    text-decoration: none;
    text-align: center;
}

.login-info {
    padding: 1em;
    border-radius: 1.5em;
    background: #7E9E3E;
    color: #F3FFCC;
}

.login-type {
    display: inline-flex;
    border: 2px solid currentColor;
    width: 1.5em;
    height: 1.5em;
    margin-right: 1em;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

article {
    display: flex;
    gap: 1em;
    width: min(1720px, 90vw);
    flex-grow: 1;   
    align-items: stretch;
    justify-content: stretch;
}

.main-pane {
    flex-grow: 1;
    background: #7E9E3E;
    padding: 3em;
    border-radius: 25px;
    display: flex;
    align-items: stretch;
    font-size: 19px;
}

aside {
    display: flex;
    flex-direction: column;
    padding-right: 3em;
}

.main-pane aside {
    border-right: 1px solid #94B552;
}

.main-pane aside h4 {
    font-size: 30px;
}

.main-pane aside .filter-list h4 {
    font-size: 23px;
}

.filter-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 1em;
    min-width: min(350px, 20vw);
    overflow: hidden;
}

.filter-list .content {
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 1em;
}

.filter-list .content *:first-child {
    margin-top: 0;
}

.filter-list ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.filter-list .filter {
    display: flex;
    background: #eee;
    padding: 0.5em;
    gap: 0.5em;
    align-items: center;
    border-radius: 5px;
}

.filter-list .filter::before {
    content: '\f002';
    font-weight: bold;
    font-family: 'Font Awesome 6 Free';
    color: #888;
    font-size: smaller;
}

.filter-list .filter input {
    background: none;
    border: none;
    border-bottom: 1px dotted grey;
    outline: none !important;
    flex-grow: 1;
    padding: 0;
    border-radius: 0;
    color: inherit;
}

.filter-list li {
    transition: all 0.5s;
    opacity: 1;
}

.filter-list li.hidden {
    height: 0.001px;
    opacity: 0;
}

button, .button, input[type="submit"] {
    border: none;
    background: #F3FFCC;
    color: #7E9E3E;
    padding: 0.5em 1.5em;
    
    font-size: inherit;

    height: 2.5em;
    border-radius: 1.25em;
    font-weight: 600;

    text-align: center;
    text-decoration: none;

    cursor: pointer;
}

form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.enrolment .main-pane {
    flex-direction: column;
}

th {
    text-align: left;
    color: white;
}

input:not([type="submit"]), textarea {
    width: 100%;
    background: #94B552;
    outline: none;
    border: none;
    border-radius: 25px;
    padding: 1em;
    color: white;
}


.toolbar {
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
}

.enrolment .main-pane {
    flex-direction: column;
}

th {
    text-align: left;
    color: white;
}

input:not([type="submit"]), textarea {
    width: 100%;
    background: #94B552;
    outline: none;
    border: none;
    border-radius: 25px;
    padding: 1em;
    color: white;
}

ol.progress {
    text-align: right;
    list-style-type: none;
    font-weight: 600;
}

ol.progress li {
    padding-bottom: 3em;
    padding-right: 1em;
    color: #7E9E3E; 
    border-right: 2px solid #7E9E3E;
    position: relative;
    line-height: 0;
    white-space: nowrap;
}

ol.progress li:last-child {
    border-color: transparent !important;
}

ol.progress li::before {
    content: counter(list-item) '. ';
}

ol.progress li::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: #7E9E3E;
    translate: 50% -50%;
}

ol.progress li.current::after {
    scale: 1.5;
}

ol.progress li.current ~ li {
    color: black;
}

ol.progress li.current, ol.progress li.current ~ li {
    border-color: black;
}

ol.progress li.current ~ li::after {
    background: black;
}

.flip-checkbox input {
    display: none;   
}

.flip-checkbox {
    position: relative;
    perspective: 5em;
    width: 4em;
    height: 2em;
    display: inline-block;
    text-align: center;
}

.flip-checkbox span {
    display: inline-block;
    position: relative;
    width: 4em;
    border-radius: 5px;
    height: 2em;
    transform: rotateY(0deg);
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.flip-checkbox span::before, .flip-checkbox span::after {
    display: block;
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 2em;
    color: white;
    border-radius: inherit;
    backface-visibility: hidden;
}

.flip-checkbox span::before {
    background: #AF2E2E;
    content: "\f00d";
    transform: rotateY(0deg);
}

.flip-checkbox span::after {
    background: #3E7D51;
    content: "\f00c";
    transform: rotateY(180deg);
}

.flip-checkbox input:checked + span {
    transform: rotateY(180deg);
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1em;
}

.info-header span {
    color: white;
}

.legend {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: white;
    font-size: 18px;
}

.legend h4 {
    margin: 0;
    padding-right: 2em;
    font-size: 1.3em;
    color: #F3FFCC;
}

.legend label {
    margin: 0 1em 0 0.5em;
}

table.availability {
    color: white;
    border-collapse: collapse;
    font-size: 18px;
}

table.availability th, table.availability td {
    border-top: 1px solid #94B552;
    border-left: 1px solid #94B552;
    padding: 1em;
}

table.availability tr:first-child th, table.availability tr:first-child td {
    border-top: none;
}

table.availability tr th:first-child, table.availability tr td:first-child {
    border-left: none;
}

table.availability th {
    width: 17%;
    text-align: center;
}

table.availability th:first-child {
    width: 15%;
    text-align: left;
}

table.availability td:not(:first-child) {
    text-align: center;
}

.period-number {
    display: inline-block;
    color: #e4e4e4;
    padding: 0.25em 0.5em;
    border: 1px solid #e4e4e4;
    vertical-align: center;
    font-size: smaller;
}

.enrolment.step-3 .main-pane {
    flex-direction: row;
}

.enrolment.step-4 .headers {
    display: flex;
}

.enrolment.step-4 .headers > div {
    flex: 1 1 0;
    background: #94B552;
    text-align: center;
    margin: 0 1em;
    padding: 1em;
    border-radius: 25px 25px 0 0;
    color: #F3FFCC;
    font-size: 38px;
    font-weight: bold;
}

.enrolment.step-4 .main-pane {
    flex-direction: row;
    padding: 2em 0;
}

.enrolment.step-4 .main-pane > div {
    flex: 1 1 0;
    padding: 0 2em;
}

.enrolment.step-4 .main-pane > div:not(:last-child) {
    border-right: 1px solid #F3FFCC;
}

.help {
    text-align: center;
    max-width: min(60%, 780px);
    font-size: 19px;
}

.help h4, .help .highlight {
    color: #7E9E3E;
    font-weight: 600;
}

.student .help {
    color: white;
}

.student .help h4, .student .help .highlight {
    color: inherit;
    font-weight: 600;
}

.course-view {
    padding-left: 1em;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.course-view .editable {
    background: #94B552;
    color: #F3FFCC;
    padding: 0.5em 1em;
    border-radius: 1em;
    position: relative;
    min-height: 2em;
}

.course-view .editable::after {
    content: '\f044';
    font-family: 'Font Awesome 6 Free';
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    top: 1em;
    right: 0.5em;
}

.course-section {
    display: flex;
    gap: 1em;
    margin-bottom: 1em;    
}

.course-section > * {
    flex: 1 1 0;
}

::-webkit-scrollbar {
    width: 22px;
}

::-webkit-scrollbar-thumb {
    background: #D2D2D2;
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    background: rgba(210, 210, 210, 0.33);
    border: 3px solid transparent;
    background-clip: content-box;
}

* {
    scrollbar-color: #d2d2d2 rgba(210, 210, 210, 0.3);
    scrollbar-width: thin;
}

input[name="course-name"] {
    color: #F3FFCC;
    font-size: larger;
    font-weight: bold;
}

textarea[name="course-description"] {
    color: #F3FFCC;
}

.editable {
    margin-bottom: 1em;
}

.editable input:not([type="submit"]), .editable textarea {
    padding: 0;
    border-radius: 0;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 10vh;
    align-items: center;
    justify-content: center;
    display: none;
    transition: all 1s;    
}

.modal.active {
    display: flex;
    z-index: 20;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(30px) brightness(115%);
}

.course-renamed {
    color: #F3FFCCA0;
}

.course-renamed::before {
    content: '\f3bf';
    color: #F3FFCC;
    rotate: 90deg;
    display: inline-block;
    margin: 0 0.5em;
    font-family: 'Font Awesome 6 Free';
}

.course-renamed .timetable-name {
    color: #F3FFCC;
}

.gallery, .image-picker {
    background: white;
    border-radius: 25px;
    max-width: 35em;
}

.dialog-header {
    padding: 25px;
    border-bottom: 1px solid #E3E3E3;
    font-size: smaller;
}

.dialog-header h4 {
    color: inherit;
}


.dialog-header p {
    margin: 0;
}

.gallery-content {
    overflow: hidden;
    min-height: 5em;
}

.gallery-content .swiper-wrapper > div {
    padding: 25px 25px 0 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1em;
}

.gallery-content .media[data-id] {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.gallery-content .media.selected {
    border-color: red;
}

.gallery-content .preview .media. {
    filter: grayscale();
}

.gallery-content .wrapper.preview {
    position: relative;
}

.gallery-content .wrapper.preview::after {
    content: '\f252';
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    translate: -50% -50%;
    color: #7E9E3E;
}

.gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    line-height: 0;
    color: #B1B1B1;
}

.gallery-controls .swiper-pagination-bullets.swiper-pagination-horizontal {
    width: auto;
    padding: 0 5px;
}

.gallery-controls .swiper-pagination-bullet {
    border: 2px solid #707070;
    background-color: transparent;
    transition: background-color 0.2s;
}

.gallery-controls .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #707070;
}

.categories {
    background: #94B552;
    color: #F3FFCC;
    padding: 0.5em 0.5em 0 1em;
    font-weight: bold;
    border-radius: 1em;
    margin-bottom: 1em;
    display: flex;
    align-items: flex-start;
}

.categories .add-category {
    padding-top: 0.5em;
}

.categories label {
    margin-top: 0.25em;
    margin-bottom: 0.5em;
}

.categories .category-container {
    flex-grow: 1;
    margin: 0 1em;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style-type: none;
}

.categories .category-container > li {
    color: #94B552;
    background: #F3FFCC;
    padding: 0.25em 0.75em 0.25em 0.25em;
    border-radius: 5px;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    position: relative;
}

.categories .category-container > li > .remove-category {
    position: absolute;
    top: -0.25em;
    right: -0.25em;
    color: #AF2E2E;
}

.course-category-list > li {
    margin-bottom: 1em;
}

.course-category-list > li > h4 {
    margin-bottom: 0.25em;
}

.main-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: max-content;
    line-height: 0;
    gap: 10px;
}

.main-gallery > * {
    background-color: #D2D2D2;
    position: relative;
    overflow: hidden;
}

.main-gallery > *:first-child {
    grid-column: span 3;
}

.main-gallery > * {
    aspect-ratio: 4 / 3;
}

.main-gallery > * .media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-gallery * {
    width: 100%;
}

.main-gallery .add-media {
    aspect-ratio: 4 / 3;
    background: #94B552;
}

.main-gallery .add-media::before {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    content: '+';
    font-size: 80px;
}

.additional .course-section {
    align-items: flex-start;
}

.additional .course-section:nth-child(odd) {
    flex-direction: row-reverse;   
}

.additional .course-section .rich-text {
    min-height: 5em;
}

.additional .course-section .media {
    min-height: 5em;
    background-color: #D2D2D2;
    border-radius: 25px;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.course-section > * {
    flex: 4 0 0;
}

.course-section > *:first-child {
    flex: 6 0 0;
}

.additional .course-section a .media {
    width: 100%;
}

.enrolment .course-section {
    color: #F3FFCC;
}

.enrolment .read-more .content {
    padding-top: 1em;
    border-top: 1px solid #94B552;
}

.enrolment .additional .course-section:nth-child(odd) {
    flex-direction: row-reverse;   
}

.enrolment .additional .course-section:nth-child(even) {
    flex-direction: row;   
}

.read-more:not(.active) .content {
    display: none;
}

.read-more.active button {
    display: none;
}

.course-select {    
    color: white;
}

.course-select {
    display: flex;
    flex-direction: column;
}

.course-select li {
    margin-bottom: 1em;
}

.course-select li input[type="radio"] {
    display: none;
}


.course-select input[type="radio"] + span {
    transition: all 0.3s;
    cursor: pointer;
}

.course-select input[type="radio"]:checked + span {
    font-weight: bold;
}

.enrolment.step-5 .columns {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.enrolment.step-5 .columns > div {
    flex: 1 1 0;
    flex-grow: 1;
    padding: 0 2em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.enrolment.step-5 .columns > div:first-child {
    padding-left: 0;
}

.enrolment.step-5 .columns > div:last-child {
    padding-right: 0;
}

.enrolment.step-5 .columns > div > .spacer {
    flex: 1 0 1em;
}

.enrolment.step-5 .columns > div:not(:last-child) {
    border-right: 1px solid #F3FFCC;
}

dl {
    color: white;
    font-size: smaller;
}

dl dt {
    font-weight: bold;
    margin-bottom: 0.5em;
}

dl dd {
    margin-left: 0;
    margin-bottom: 1em;
    min-height: 1em;
}

.chosen-courses ul {
    color: #F3FFCC;
    list-style-type: none;
    padding-left: 0;
}

.chosen-courses ul > li {
    margin-bottom: 0.5em;
    font-weight: 600;
}

.staff-menu .content {
    justify-content: center;
    align-items: flex-start;
}

.staff-main-menu {
    display: flex;
    flex-grow: 0;
}

.staff-main-menu > a {
    width: min(562px, 40vw);    
    margin: 0.5em;
    display: flex;
    flex-direction: column;
    border-radius: 25px;
    overflow: hidden;
    background: #7E9E3E;
    color: #F3FFCC;
    text-decoration: none;
    text-align: center;
}

.staff-main-menu > a > img {
    background: grey;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}

.staff-main-menu > a > span {
    font-size: 47px;
    padding: 40px;
    font-weight: bold;
}

.student .content {
    flex-direction: column;
}

.student-info {
    flex-grow: 1;
    background: white;
    padding: 2em 0;
    border-radius: 25px;
    display: flex;
    align-items: stretch;
}

.student-info > * {
    flex: 1 1 0;
    padding: 0 2em;
}

.student-info > *:not(:last-child) {
    border-right: 1px solid #E3E3E3;
}

.student-info h4 {
    color: #7E9E3E;
    font-size: 30px;
    font-weight: normal;
}

.student-info dt {
    color: #7E9E3E;
}

.student-info dd {
    color: #919191;   
}

.appointments {
    background: white;
    padding: 1em 0 1em 1em;
    border-radius: 25px;
    display: flex;
    font-size: smaller;
}

.appointments h4 {
    color: #7E9E3E;   
    font-size: 24px;
}

.appointments .info {
    padding: 1em;
}

.appointments .content {
    display: flex;
    flex-direction: row;
    align-items: center;    
    flex-grow: 1;
}

.appointments .content > *:not(:last-child) {
    border-right: 1px solid #E3E3E3;
}

.appointments .appointment {
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: 1em;
}

.appointments .appointment {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1em;
}

.appointments .appointment .date {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #7E9E3E;
}

.appointments .appointment .date .day-of-month {
    font-weight: bold;
    font-size: 30px;
}

.student .courses ul {
    color: #7E9E3E;
    list-style-type: none;
    padding: 0;
    font-size: larger;
    font-weight: bold;
}

.student .courses ul li {
    margin: 1em 0;
}

ul.achievements {
    display: flex;
    flex-direction: column;
    padding: 0;
    list-style-type: none;
    align-items: stretch;
}

ul.achievements li {
    display: flex;
    margin-bottom: 1em;
}

ul.achievements li > * {
    border-radius: 25px;
}

ul.achievements li > .media {
    margin-right: 1em;
    width: min(50%, 20em);
    background-color: #D2D2D2;
}

ul.achievements li > .info {
    flex: 1 1 auto;
    padding: 2em;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: white;
}

ul.achievements li > .info > .description > *:first-child {
    margin-top: 0;
}

ul.achievements li > .info {
    display: flex;
    flex-direction: column;
}

ul.achievements li > .info > .description {
    flex-grow: 1;
}

ul.achievements li > .info > .meta {
    display: flex;
    justify-content: space-between;
}

ul.achievements li > .info > .meta .upload-name, ul.achievements li > .info > .meta .upload-role {
    font-weight: bold;
}

body.achievements .content {
    align-items: center;
}

.student .main-menu ul, .student .login-info {
    background: #9BB566;
    color: white;
}

.student .main-menu ul li.active {
    background: white;
    color: #7E9E3E;
}

.wrapper {
    position: relative;
}

div.progress {
    position: relative;
    border-radius: 5px;
}

.wrapper div.progress {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 10px;
    background: white;
    z-index: 10;
}

div.progress > div {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 5px;
    background: #7E9E3E;
}

.wrapper div.progress > div {
    z-index: 20;
}

.course-list li a {
    color: white;
    text-decoration: none;
}

.course-list li.active a {
    font-weight: bold;
    color: #F3FFCC;
}

.modal-richtext {
    width: 80%;
}

.section-wrapper {
    display: flex;
}

.section-wrapper .tools {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 1em;
}

.section-wrapper .course-section {
    flex-grow: 1;
}

.additional .section-wrapper:nth-child(odd) .course-section {
    flex-direction: row-reverse;
}

.additional .section-wrapper:nth-child(even) .course-section {
    flex-direction: row;
}

.section-wrapper .tools i {
    color: #7E9E3E;
    margin: 0.5em 0;
    background: #F3FFCC;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-wrapper .tools i.delete {
    background: #AF2E2E;
    color: white;
}

.rich-text {
    font-size: 15px;
}

.rich-text > *:first-child {
    margin-top: 0;
}

.section-wrapper {
    margin-bottom: 1em;
}

.section-wrapper .course-section {
    margin-bottom: 0;
}

.modal-achievement .tox.tox-tinymce {
    border-radius: 10px 10px 0 0;
}

.modal-achievement .achievement-file-upload {
    background: white;
    padding: 1em;
    color: #707070;
    border-radius: 0 0 10px 10px;
}

.modal-achievement .achievement-file-upload h3 {
    color: inherit;
}

.modal-achievement .achievement-file-upload ul {
    list-style-type: none;
    font-size: smaller;
    padding-left: 0;
}

.modal-achievement .achievement-file-upload .delete {
    padding-left: 0.5em;
    color: #AF2E2E;
}

.modal-achievement .achievement-file-upload .progress {
    display: inline-block;
    width: 10em;
    height: 0.7em;
    margin-right: 1em;
}

.modal-achievement .achievement-file-upload li:not([data-id="0"]) .progress {
    display: none;
}

ul.achievements li .info {
    padding-bottom: 1em;
}

ul.achievements li .meta {
    align-items: flex-end;
}

ul.achievements li .uploaded-info {
    margin-bottom: 0.5em;
}

ul.achievements li .files {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    font-size: smaller;
}

ul.achievements li .files li {
    display: flex;
    align-items: center;
}

ul.achievements li .files li:last-child {
    margin-bottom: 0;
}

ul.achievements li .files li .button {
    margin-right: 1em;
    background: #5C5656;
    color: white;
}

body.login {
    color: white;
}

body.login .main {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 25px;
    padding: 3em;
    width: 25em;
}

body.login fieldset {
    border: none;
    padding: 0;
}

body.login input {
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    
    background: white;
    color: #707070;

    width: 100%;
}

body.login input[type="submit"] {
    background: #7E9E3E;
    color: white;
    font-weight: normal;
}

body.login form, body.login form fieldset {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.login #MemberLoginForm_LoginForm_Remember_Holder {
    display: flex;
    font-size: smaller;
    align-items: center;
}

body.login #MemberLoginForm_LoginForm_Remember_Holder input {
    width: auto;
    padding: 0;
    margin: 0 1em 0 0;
}

body.login #ForgotPassword {
    margin: 0;
    font-size: smaller;
}

body.login #ForgotPassword a {
    text-decoration: none;
    color: inherit;
}

body.login .content p {
    margin-top: 0;
    text-align: center;
    font-size: smaller;
}

.course-message {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

button.accept, .button.accept, input.accept[type="submit"] {
    background: #7E9E3E;
    color: #F3FFCC;
}

.dialog-main {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 3px 6px #00000029;
}

.dialog .toolbar button, .dialog .toolbar .button, .dialog .toolbar input[type="submit"] {
    box-shadow: 0 3px 6px #00000029;
}

.step-5 table.availability td > div {
    width: 100%;
    aspect-ratio: 1;
    background: #af2e2e;
    border-radius: 5px;
}

.step-5 table.availability td > div.available {
    background: #3e7d51;
}

body.student.timetable .content > div {
    padding: 2em;
    display: flex;
    flex-direction: column;
    
    background: white;
    border-radius: 25px;
}

body.student.timetable .timetable-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #7E9E3E;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 1em;
}

body.student.timetable .help {
    display: none;
}

body.student.timetable h3 {
    color: white;
    font-size: 30px;
    text-align: center;
}

.student-timetable {
    border-collapse: collapse;
    table-layout: fixed;
}

.student-timetable td, .student-timetable th {
    border: 1px solid #7E9E3E;
    color: #7E9E3E;
    text-align: center;
    width: 14%;
}

.student-timetable tr:first-child td:first-child {
    width: 30%;
}

.student-timetable .no-period {
    border: none;
}

.login-info {
    position: relative;
    transition: all 0.3s;
    z-index: 1;
}

.login-info > i {
    margin-left: 0.5em;
}

.login-info:not(:hover) .account-menu {  
    opacity: 0;
    pointer-events: none;
}

.account-menu {
    position: absolute;
    top: 100%;
    margin-top: -1.5em;
    padding: 1.5em 1em 0 1em;
    left: 0;
    right: 0;
    background-color: inherit;
    border-radius: 0 0 1.5em 1.5em;
    transition: inherit;
    z-index: -1;
}

.account-menu ul {
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
}

.account-menu li {
    padding: 1em 0;
}

.account-menu li a {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.student table.availability th, .student table.availability td {
    width: 1em;
    height: 1em;
}

.student table.availability td > div {
    width: 100%;
    aspect-ratio: 1;
    background: #af2e2e;
    border-radius: 5px;
}

.student table.availability td > div.available {
    background: #3e7d51;
}

body.login .welcome {
    max-width: 440px;
    text-align: center;
    font-size: 19px;
}

body.login .main {
    max-width: 450px;
}

.modal-category input {
    min-width: 20em;
    box-shadow: 0 3px 6px #00000029;   
}

button.course-add-section {
    align-self: center;
    position: relative;
    height: 2em;
    display: flex;
    align-items: center;
    padding-left: 3em;
    background: #94B552;
    color: white;
    margin-top: 2em;
}

button.course-add-section::before {
    content: '';
    width: 2em;
    font-size: 1.5em;
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    background: #F3FFCC;
    top: 50%;
    left: 0;
    translate: -50% -50%;
    font-family: "Font Awesome 6 Free";
    content: '\2b';
    color: #7E9E3E;
    display: flex;
    align-items: center;
    justify-content: center;

}

.enrolment.step-1 .main-pane {
    font-size: 25px;
    padding: 1em;
}

.enrolment.step-1 .main-pane h3 {
    font-size: 1.5em;
}

.enrolment .main-pane th {
    font-weight: 500;
}

.enrolment.step-1 .main-pane th:not(:last-child), .enrolment.step-1 .main-pane td:not(:last-child) {
    padding-right: 2em;
}

.enrolment .main-pane th .details {
    font-size: 18px;
    font-weight: normal;
}

.enrolment .main-pane td {
    font-weight: normal;
    font-size: 19px;
}

.enrolment .main-pane td input {
    font-size: 19px;
}

.enrolment .main-pane table:not(:last-of-type) td {
    padding-bottom: 2em;
}

.enrolment .toolbar .button, .enrolment .toolbar button {
    padding-left: 5em;
    padding-right: 5em;
}

.enrolment .course-name {
    font-size: 38px;
}

.enrolment.step-4 .course-select h4 {
    font-size: 38px;
}

.enrolment.step-5 .main-pane h3, .enrolment.step-5 .main-pane h4 {
    font-size: 38px;
}

.enrolment.step-5 dt {
    font-size: 23px;
}

.enrolment.step-5 dd {
    font-size: 19px;
}

.enrolment.step-5 .chosen-courses li {
    font-size: 38px;
}

.student-info table.availability {
    width: 100%;
}

.student-info table.availability tr:first-child th {
    width: 17%;
    color: #707070;
    font-weight: normal;
}

.student-info table.availability th:first-child {
    color: #eee;
}

.student-info table.availability th, .student-info table.availability td {
    border-color: #eee;
}

.student-info table.availability th:first-child {
    text-align: center;
}

.student-info table.availability th:first-child > div {
    border: 1px solid currentColor;
    font-weight: normal;
}

.wrapper {
    position: relative;
}

.wrapper:not(:hover) .gallery-tools {
    opacity: 0;
    pointer-events: none;
}

.gallery-tools {
    transition: all 0.3s;
    position: absolute;
    z-index: 10;
    background: #ffffffa0;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    padding: 0.5em 0;
    border-radius: 5px;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    color: #666;
}

.wrapper:first-child .gallery-tools, .wrapper.single .gallery-tools {
    top: 1em;
    right: 1em;
    left: unset;
    translate: none;
}

.gallery-tools > * {
    margin: 0 0.5em;
    cursor: pointer;
}

.modal-message .dialog-main {
    padding: 1em;
    background: white;
}

.modal-message .toolbar {
    justify-content: flex-end;
}

.timetable-info a {
    text-decoration: none;
    color: inherit;
    font-size: 20px;
    position: relative;
}

.timetable-info a:first-child::before {
    content: '\f0d9';
    font-family: 'Font Awesome 6 Free';
    margin: 0 0.5em;    
    position: relative;
    top: 0.1em;
}

.timetable-info a:last-child::after {
    content: '\f0da';
    font-family: 'Font Awesome 6 Free';
    margin: 0 0.5em;
    position: relative;
    top: 0.1em;
}

.no-appointments {
    flex-grow: 1;
    color: #ccc;
    text-align: center;
}

.wrapper {
    display: flex;
}

.add-media, .wrapper {
    border-radius: 25px;
    box-shadow: 0 3px 6px #00000029;
}

.media {
    border-radius: 25px;
}

.course-category-list > li > h4 {
    padding-left: 25px;
    position: relative;
}

.course-category-list > li > ul {
    padding-left: 25px;
    overflow: hidden;
}

.course-category-list > li:not(.active) > ul {
    height: 0;
}

.course-category-list > li > h4::before {
    content: '\f0d8';
    display: block;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;    
    position: absolute;
    top: 3px;
    padding-top: 3px;
    left: 0;
    transition: rotate 0.5s;
}

.course-category-list > li.active > h4::before {
    rotate: 180deg;
}

/** MT TODO Merge with .gallery? */

.image-picker img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.image-picker .wrapper {
    position: relative;
    padding: 1em;
    box-shadow: none;
}

.image-picker .preview::after {
    content: '\f252';
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    translate: -50% -50%;
    color: #7E9E3E;
}

.image-picker label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.approval .content aside {
    background: white;
    border-radius: 25px;
    padding: 2em;
    flex: 0 0 auto;
}

.approval-queue {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.approval-queue li a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.25em;
}

.approval-queue .uploaded-by {
    font-weight: bold;
    color: #7e9e3e;
}

.approval-queue .upload-date {
    font-size: smaller;
    padding-left: 1em;
}

.approval-queue .rejected {
    color: red;
    text-transform: uppercase;
    padding-left: 1em;
}

.approval .main-pane {
    background: white;
    align-self: flex-start;
}

.approval .approval-select {
    justify-content: center;
}

.approval .main-pane .uploaded-info {
    font-size: smaller;
    margin-bottom: 1em;
}

.approval .main-pane .uploaded-info .upload-name, .approval .main-pane .uploaded-info .upload-role {
    font-weight: bold;
}

.approval .main-pane .content {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-template-rows: max-content 1fr;
    gap: 0 1em;
}

.approval .main-pane .content .media {
    grid-area: 1 / 1 / span 2 / span 1;
    max-width: 100%;
}

.approval .main-pane .content .text {
    grid-area: 1 / 2 / span 1 / span 1;
}

.approval .main-pane .content .files {
    grid-area: 2 / 2 / span 1 / span 1;
}

.approval .main-pane .content .files h3 {
    color: black;
}

.approval .main-pane .content .files ul {
    list-style-type: none;
    padding: 0;
}

.approval .main-pane .content .files li {
    margin: 1.5em 0;
}

.approval .main-pane .content .files .button {
    margin-right: 1em;
}

.approval .approval-status {
    font-size: smaller;
    margin-bottom: 1em;
}

.approval .approval-status.approved {
    color: #7e9e3e;
}

.approval .approval-status.rejected {
    color: red;
}

.approval .approval-status .approval-name, .approval-status .approval-date {
    font-weight: bold;
}

.timetable-link span {
    display: none;
    font-size: small;
    color: #aaa;
}

.enrolment .main-gallery a {
    background: none;
}