:root {
/*COLORS*/
--primary-color: rgb(0, 0, 0);
--secondary-color: #b42626;
--tertiary-color: #ece3e3;
--icu-green:#053c39cc;
--icu-green-light:#053c394d;
--background-color: rgba(123, 166, 149, 0.235);
--card-color: white ;
--main-background-color: #a0b8ba26;
--top-bar-color: #ffffff;
--bottom-bar-color: #840c0c;
--bottom-bar-color: #113c4d;
--bar-text: rgb(0, 0, 0);
--sidebar-bg: #fefefe;
/*SIZES*/
}
* {
box-sizing: border-box;
}
body {
background-color:var(--main-background-color);
text-align: center;
font-size: 16px; /* Set a base font size to be used by other relative units */
--navheight: 60px;
width: 100%;
margin:0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
@media screen and (max-width: 800px) and (orientation: landscape) {
--navheight: 60px;
}
}
body p {
@media screen and (max-width: 800px) {
max-width: 57ch;
margin: auto;
}
}
.lesser_detail {
@media screen and (max-width: 450px) {
display: none;
}
}
.topbar {
background-color: var(--top-bar-color);
height: var(--navheight);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
padding: 15px;
box-shadow: 0 0 10px #2f312568;
}
.topbarspace {
height: var(--navheight);
}
.side-space {
margin-left: var(--navheight) !important;
@media screen and (max-width: 800px) {
margin-left: 0px !important;
}
}
.topbar-controls {
height: var(--navheight);
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
flex-wrap: nowrap;
padding: 2px;
gap:5px;
}
.menu-toggle {
height: 100%;
aspect-ratio: 1/2;
background-color:transparent;
border: none;
color:black;
justify-content: left;
}
.menu-toggle:hover {
cursor: pointer;
}
.topbar .logo {
font-size: 1.8em;
color:var(--bar-text)
}
.topbar-profile {
height: var(--navheight);
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
flex-wrap: nowrap;
padding: 5px;
gap:10px;
}
.topbar-profile img {
width:40px;
height:40px;
border-radius:50%;
}
.topbar_menu_close {
position: absolute;
right:0px;
height: calc(100% - var(--navheight)*2);
display:none;
flex-direction: row;
align-items:center;
justify-content: center;
text-align: left;
background-color: transparent;
width: 1.5em;
color: #888383;
}
.topbar_menu {
display: grid;
grid-template-columns: 1fr;
background-color:rgba(230, 230, 230, 0.521);
transition: all 0.3s ease;
position: fixed;
top:150px;
z-index: 150;
height: auto;
font-size: 14px;
width:var(--navheight);
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
.side-menu-text {
width:0px;
overflow: hidden;
}
@media screen and (max-width: 800px) {
display:none;
}
}
.topbar_menu.show {
grid-template-columns: 1fr;
box-shadow: 0 0 20px #2f3125;
width: 200px;
background-color:var(--sidebar-bg);
top:var(--navheight);
border-top-right-radius: 0px;
height: 100%;
.side-menu-text {
width:auto;
word-wrap: none;
}
.topbar_menu_close {
display: flex;
}
@media screen and (max-width: 800px) {
display:grid;
}
}
.topbar_menu_close:hover {
background-color: #20202010;
color: #2c2a2a;
cursor: pointer;
}
.topbar_menu > div {
overflow: hidden;
}
.topbar_menu ul {
width:200px;
padding-inline: 1em;
text-align: justify;
list-style-type:none;
}
.topbar_menu li {
height:3em;
border-radius: 10px;
padding:5px;
a, button {
display:flex;
flex-direction: row;
align-items: center;
justify-content: left;
gap:10px;
}
}
.topbar_menu li:hover svg {
background-color: rgba(46, 46, 46, 0.096);
cursor: pointer;
border-radius: 5px;
transform: scale(1.3);
padding: 3px;
}
.topbar_menu:not(.show) .menu-option[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
font-size:0.9rem;
font-weight: 500;
background-color: #202020;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 5px;
white-space: nowrap;
font-family:Arial, Helvetica, sans-serif;
transition-duration: 200ms;
opacity: 0.7;
visibility: visible;
z-index: 200;
transform: translateX(50px);
parent:has('.show') {
opacity: 0;
visibility: hidden;
}
}
.topbar_menu .menu-option.active svg {
background-color: var(--tertiary-color);
border-radius: 5px;
transform: scale(1.3);
padding: 3px;
}
.footbar {
display: none;
box-sizing: border-box;
@media screen and (max-width: 800px) {
background-color: var(--bottom-bar-color);
height: var(--navheight);
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
padding-inline: 10px;
}
button {
width: 100%;
height: 100%;
background-color:transparent;
border: none;
}
button:focus {
border-bottom: solid 2px rgba(255, 255, 255, 0.579)
}
button.footbar-selected {
border-bottom: solid 2px rgba(255, 255, 255, 0.877);
font-weight: 550;
}
}
.footbarspace {
height: 0;
@media screen and (max-width: 800px) {
height: var(--navheight);
}
}
.footbar button > div {
color: #ddd;
display: grid;
grid-template-rows: 2fr 1fr;
gap:0px;
align-items: center;
img {
margin:auto;
}
svg {
margin:auto;}
}
.footbar-button-text {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 0.9em;
line-height: 0.9em;
margin-top: 0px;
font-weight: 200;
}
.footbar button:hover {
background-color:rgba(0, 0, 0, 0.345);
cursor: pointer;
}
.header {
width:80%;
margin: auto;
text-align: center;
padding: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.623);
}
.main {
max-width:1000px;
margin: auto;
@media screen and (max-width: 800px) {
width: 100%;
}
}
.vertical-container {
display: flex;
flex-direction: column;
gap: 5px;
padding: 5px;
align-items: center;
width: 100%;
}
.main.vertical-container {
gap: 20px;
padding: 20px;
}
.program-container.vertical-container {
align-items: start;
transition: all 0.3s ease;
gap: 0px;
height: fit-content;
}
.form.vertical-container {
gap: 5px;
padding: 20px;
width:80%;
img {
width: 100%;
max-width: 200px;
}
}
.vertical-container.my-logbook {
justify-content: center;
overflow-x: scroll;
}
.warning {
background-color: #f2f399;
height: 80px;
line-height: 80px;
margin-bottom: 20px;
}
.warning > span,
.warning > a
{
font-size: 1.5em;
}
.line {
border-bottom: 1px dotted rgba(0, 0, 0, 0.623);
width: 60%;
margin: auto;
margin-block: 50px;
}
.footer {
width:60%;
margin: auto;
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.384);
margin-bottom: 50px;
font-size: 10px;
}
.page-title {
color: var(--primary-color);
font-weight: 600;
letter-spacing: -1px;
font-size: 24px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.logo {
color: var(--primary-color);
font-weight: 650;
letter-spacing: -2px;
width: 100px;
position: relative;
.logo-ed {
color: var(--secondary-color);
}
.logo-x {
font-size: 1em;
margin:2px;
scale : 1.2;
}
.logo-x-construct {
font-size: 1em;
margin-left:5px;
scale : 1.2;
color: rgb(0, 0, 0);
transition-duration: 800ms;
}
.logo-x-construct {
position: relative;
font-size: 0.7em;
}
.logo-x-construct::before {
content: '';
position: absolute;
top: 50%;
right: -50%;
width: 10px;
height: 2px;
background-color: rgb(0, 0, 0);
transition-duration: 800ms;
}
}
.logo:hover > .logo-x-construct {
color: rgb(0, 0, 0);
transform: scale(1.5);
margin-left:12px;
}
.logo.centered {
margin: auto;
margin-block: 20px;
width:300px;
}
.logo:hover > .logo-x-construct::before {
width: 22px;
}
.welcome {
font-size: 1.5em;
font-family: 'Caveat', cursive;
text-align: left;
}
.user_name {
font-size: 1.2em;
color: rgb(0, 0, 0);
font-weight: 600;
letter-spacing: -1px;
}
/*GENERAL RULES*/
a,
a:hover {
text-decoration: none;
color: var(--primary-color);
}
.title {
font-size: 1.4em;
font-weight: 600;
@media screen and (max-width: 800px) {
font-size: 1.1em;
}
}
.subtitle {
font-size: 1.1em;
font-weight: 600;
color: #636363;
@media screen and (max-width: 800px) {
font-size: 1em;
}
}
.paragraph {
font-size: 0.9em;
font-weight: 300;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 200,
'GRAD' 0,
'opsz' 24,;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
.alert {
margin:auto;
}
.alert-red {
color:red;
}
.profile_picture {
object-fit: cover;
border-radius:50%;
aspect-ratio: 1/1;
}
.center-horizontal {
display: flex;
align-items: center;
gap:5px;
}
.corner_top_right {
position: absolute !important;
top: 0px;
right: 0px;
translate: 20% -20%;
}
/*ICONS*//*ICONS*//*ICONS*//*ICONS*//*ICONS*//*ICONS*//*ICONS*//*ICONS*/
.icon {
text-align: center;
line-height: 1;
}
.icon.nrml {
font-size: 24px;
font-weight: 200;
}
.icon.light {
color: #f7f2f2;
}
.r45 {
transform: rotate(45deg);
}
.r270 {
transform: rotate(270deg);
}
/*GLOBAL TOOLS*//*GLOBAL TOOLS*//*GLOBAL TOOLS*//*GLOBAL TOOLS*/
.snaps-block {
scroll-snap-type: block mandatory;
scroll-padding: 15px;
}
.snaps-block > * {
scroll-snap-align: start;
}
.snaps-inline {
scroll-snap-type: inline mandatory;
scroll-padding: 15px;
}
.snaps-inline > * {
scroll-snap-align: start;
}
/*Tooltip*/
.tooltip-container {
position: relative;
display: inline-block;
padding: 0;
}
.tooltip-text {
position: absolute;
font-size:0.8rem;
font-weight: 500;
background-color: #202020;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 5px;
top:0;
left:50%;
white-space: nowrap;
font-family:Arial, Helvetica, sans-serif;
transition-duration: 400ms;
opacity: 0;
visibility: hidden;
z-index: 200;
transform: translate(-50%, -100%);
}
.tooltip-container:hover .tooltip-text {
opacity:0.7;
transform: translate(-50%, -100%);
visibility: visible;
}
.tooltip-text:hover {
opacity: 0;
visibility: hidden;
}
.tooltip-on-hover {
position: relative;
}
.tooltip-on-hover[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
font-size:0.9rem;
font-weight: 500;
background-color: #202020;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 5px;
top:0;
white-space: nowrap;
font-family:Arial, Helvetica, sans-serif;
transition-duration: 200ms;
opacity: 0;
visibility: hidden;
z-index: 200;
transform: translateY(-2px);
}
.tooltip-on-hover[data-tooltip]:hover::after {
opacity:0.7;
transform: translateY(-8px);
visibility: visible;
}
.profile-pic-add-initials {
position: relative;
border-radius: 50%;
overflow: hidden;
aspect-ratio: 1/1;
width: 100%;
img {
width: 100%;
aspect-ratio: 1/1;
object-fit:cover;
background-color: #000;
}
}
.profile-pic-add-initials[data-initials]::after {
content: attr(data-initials);
color: rgba(255, 255, 255, 0.619);
font-weight: bold;
position: absolute;
bottom: 3%;
left:30%;
transform: translate(-50%, -0%); /* Centers the initials */
z-index: 1; /* Ensures it appears above the background */
pointer-events: none;
font-family:Arial, Helvetica, sans-serif;
padding:1px;
}
/*Hover*/
.hover-effect:hover {
box-shadow: 4px 2px rgba(85, 91, 94, 0.5);
color: black;
text-decoration: none;
transform: translateY(-2px);
}
.hover-effect:hover > a {
color: black;
}
.hover-effect2:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
transition: all 0.1s ease;
color: black;
}
.hover-effect2:hover > a {
color: black;
}
.hover-effect3 {
transition: all 200ms;
position: relative;
}
.hover-effect3:active {
transform: scale(0.95);
}
.hover-effect3:hover::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent overlay */
z-index: 1;
}
/*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*//*BUTTONS*/
.btn {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 5px;
background-color: var(--card-color);
padding-block: 10px;
padding-inline: 10px;
border-radius: 10px;
border: outset 1px black;
font-size: 12px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
align-self: center;
justify-self: center;
}
.btn.btn-lone {
margin:auto;
}
.btn.btn-text-adjacent {
display: inline;
margin: 5px;
}
.btn.btn-text-below {
display: flex;
flex-direction: column;
gap: 5px;
}
.btn-green {
background-color: rgba(0, 128, 0, 0.534);
color: white;
}
.btn-red {
background-color: rgba(212, 18, 18, 0.678);
color: white;
}
.btn-blue {
background-color: rgba(18, 31, 212, 0.637);
color: white;
}
.btn-grey {
background-color: rgba(128, 128, 128, 0.534);
color: black;
border: none;
}
.btn:hover {
cursor: pointer;
}
.btn:active {
cursor: pointer;
border-style: inset;
}
.btn:focus {
border: outset 2px var(--icu-green-light);
}
.btn:hover::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent overlay */
z-index: 1;
}
.standard-button {
background-color: var(--card-color);
border-radius: 10px;
border: solid 1px black;
padding:20px;
margin:auto;
font-size: 100%;
text-align: center;
color: #373833;
width: 30%;
min-width: 200px;
}
.new_log_button {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
color: black;
border-radius: 10px;
margin: auto;
width: 55px;
height: 55px;
font-size: 1em;
border-radius: 50%;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 4px 2px rgba(1, 1, 1, 0.438);
}
.new_log_button:hover {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transform: scale(1.2);
}
.go_to_logbook_button {
background-color: var(--card-color);
border-radius: 10px;
border: solid 1px black;
padding:10px;
margin-inline:auto;
margin-block: 20px ;
font-size: 80%;
text-align: center;
color: #373833;
}
.logbook button {
display: flex;
justify-content: center;
align-items: center;
gap:5px;
background-color: var(--icu-green-light);
border: none;
padding: 15px;
font-size: 0.9em;
margin-block: 2px;
border-radius: 10px;
}
.logbook button:hover {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
cursor: pointer;
}
.logbook button:active {
background-color: var(--icu-green);
}
.clear-button {
background-color: transparent;
border: none;
font-family: inherit;
font-size: inherit;
padding: 2px;
color:#373833;
transition: all 0.8s ease;
position: relative;
border-radius: 5px;
}
.clear-button.withtext {
display: flex;
justify-content: center;
align-items: center;
gap:5px;
}
.clear-button.withtextbelow {
display: flex;
flex-direction: column;
gap:0px;
}
.clear-button:hover {
cursor: pointer;
color: black;
}
.button-container-horizontal {
display:flex;
margin:auto;
max-width: 80%;
flex-direction: row;
align-items: center;
justify-content: center;
gap:10px;
flex-wrap: wrap;
}
.btn-small {
padding: 2px;
font-size: 0.8em;
border-radius: 5px;
width: 30px;
float:right;
}
.dt-button {
border-radius: 10px;
}
/*REGISTRATION*//*REGISTRATION*//*REGISTRATION*//*REGISTRATION*//*REGISTRATION*//*REGISTRATION*//*REGISTRATION*/
.registration-forms {
display:flex;
margin:auto;
max-width: 80%;
flex-direction: column;
align-items: center;
justify-content: center;
gap:10px;
li {
list-style-type: none;
margin-block: 10px;
}
button {
margin:auto;
margin-block: 10px;
padding: 10px;
border-radius: 5px;
}
input {
margin:auto;
padding: 5px;
border-radius: 5px;
}
p {
display:flex;
flex-direction: column;
align-items: center;
justify-content: left;
}
label {
text-align: left;
width: 100%;
margin-bottom: 5px;
}
}
/*TABLES*//*TABLES*//*TABLES*//*TABLES*//*TABLES*//*TABLES*//*TABLES*//*TABLES*//*TABLES*//*TABLES*//*TABLES*/
.table {
width: var(--common-length);
font-size: 0.7em;
background-color: #ffffff;
padding: 2px;
border-radius: 5px;
border-collapse: collapse;
margin: auto;
margin-block: 10px;
border: solid 1px rgba(128, 128, 128, 0.493);
.profile_picture {
width: 50px;
}
@media screen and (max-width:800px) {
max-width:98vw;
overflow:scroll;
font-size: 0.6em;
}
}
.table.tbl-lg {
font-size: 0.9em;
padding: 10px;
@media screen and (max-width:800px) {
font-size: 0.8em;
}
}
.table th, .table td {
padding:0.2rem;
text-align: left;
}
.table th {
padding-left: 5px;
background-color: var(--theme-color);
color: white;
}
.table td {
padding-left: 10px;
}
.table .end-column {
border-right: solid 1px rgba(128, 128, 128, 0.493);
padding-right: 5px;
}
.table tr:nth-of-type(2n) {
background: hsla(0, 0%, 33%, 0.034);
}
.table caption {
text-align: center;
caption-side: bottom;
}
.cpd-table {
font-size: 12px;
max-width: 800px;
border-radius: 15px;
overflow: hidden;
border: none;
margin-block: 20px;
}
/*FORMS*//*FORMS*//*FORMS*//*FORMS*//*FORMS*//*FORMS*//*FORMS*//*FORMS*//*FORMS*//*FORMS*/
.form-group {
margin:auto;
margin-bottom: 20px;
width:100%;
max-width: 400px;
table {
background-color: white;
padding: 10px;
margin:auto;
border-radius: 10px;
}
tr {
border-bottom: solid 2px grey;
padding: 2px;
gap:2px;
}
td {
padding: none;
margin-inline: none ;
}
.profile_picture {
width: 70px;
height: 80px;
border-radius: 10%;
}
}
.form-group.responsive {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
font-size:clamp(8px,1vw,12px);
gap:10px;
.table_container {
width: 100vw;
overflow-x: scroll;
padding-inline: 55px;
}
}
.form-group.desktop {
max-width:100vw;
.profile_picture {
width: 80px;
}
td.date-group {
background-color: rgb(215, 215, 215);
font-size: 20px;
text-align: left;
padding: 10px;
}
td.date-group.monday {
border-top: white solid 50px;
background-color: rgb(241, 193, 193);
}
td.date-group.tuesday {
background-color: rgb(193, 241, 193);
}
td.date-group.wednesday {
background-color: rgb(193, 193, 241);
}
td.date-group.thursday {
background-color: rgb(241, 241, 193);
}
td.date-group.friday {
background-color: rgb(241, 193, 241);
}
}
.profile-page .form-group {
display:grid;
grid-template-columns: 1f;
}
.form-group-label {
font-size:0.9em;
text-align: center;
}
.form-control {
padding: 2px;
width: 220px;
max-width: 80%;
border-radius: 5px;
border: solid 1px black;
margin-bottom: 10px;
}
.form-control.frm-sm {
width:120px;
margin-bottom: 2px;
font-size: 10px;
max-height: 20px;
overflow-y: scroll;
}
.form-control.frm-m {
width:200px;
}
.form-control.frm-lg {
width:200px;
font-size: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.form-control.frm-time {
width:80px;
font-size: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.form-control.frm-date {
width:200px;
font-size: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
letter-spacing: -1px;
}
.form-control.frm-number {
width:60px;
font-size: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.custom-checkbox-list {
text-align: left;
width:300px;
font-size: 1.2em;
}
.custom-checkbox-list [type="checkbox"]{
width: 20px;
}
.custom-checkbox-list label{
position:relative;
padding-left: 30px;
cursor: pointer;
display: inline-block;
color: #972c2c;
}
.invite-card {
max-width: 430px;
background: var(--icued-bg);
border: 1px solid var(--icued-border);
border-radius: var(--icued-radius);
box-shadow: var(--icued-shadow);
overflow: hidden;
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.invite-card__header {
background: var(--bottom-bar-color);
color: #fff;
padding: 1rem 1.25rem;
font-weight: 600;
text-align: left;
}
.invite-card__body {
padding: 1.25rem;
}
.form-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr;
}
.invite-card label {
display: block;
font-size: .875rem;
margin-bottom: 0.25rem;
color: #374151;
text-align: left;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
appearance: none;
border: 1px solid #b5bac193;
border-radius: 0.5rem;
padding: .5rem .75rem;
font-size: .95rem;
}
.delivery-row {
margin-top: 1.25rem;
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.delivery-option {
display: flex;
align-items: center;
gap: .45rem;
cursor: pointer;
font-size: .9rem;
}
.delivery-option input {
accent-color: var(--icued-primary);
}
.invite-card__actions {
margin-top: 1.5rem;
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
.btn {
padding: .55rem 1.2rem;
font-size: .95rem;
border-radius: 0.5rem;
border: none;
cursor: pointer;
font-weight: 500;
}
.btn.invite {
background: var(--bottom-bar-color);
color: #fff;
}
.btn.invite:hover {
background: var(--icued-primary-light);
}
.btn.cancel {
background: #e5e7eb;
}
/*IMAGES*//*IMAGES*//*IMAGES*//*IMAGES*//*IMAGES*//*IMAGES*//*IMAGES*//*IMAGES*//*IMAGES*//*IMAGES*/
.banner {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 10px;
overflow: hidden;
}
.banner img {
width: 100vw;
height: 300px;
object-fit: cover;
object-position:center;
}
.banner p {
position: absolute;
color: white;
font-size: 24px;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
background-color: #202020a0;
border-radius: 10px;
padding: 10px;
max-width: 90%;
}
.simple-header {
height:100px; width:100%; background-color: white; display:flex;align-items: center; margin-bottom: 20px;
}
/*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*//*DIALOG*/
.dlg {
border: solid 1px gray;
border-radius: 10px;
padding: 30px;
gap:5px;
width: 80%;
max-width: 500px;
p {
width:100%;
text-align: center;
padding-inline: 30px;
}
button {
min-width: 100px;
margin-inline:auto;
margin-block: 10px;
}
}
.dlg-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
margin: auto;
}
.closebox {
background-color: var(--tertiary-color);
}
/*REUSABLE-DESIGNS*//*REUSABLE-DESIGNS*//*REUSABLE-DESIGNS*//*REUSABLE-DESIGNS*//*REUSABLE-DESIGNS*//*REUSABLE-DESIGNS*/
.badge {
display:flex;
align-items: center;
justify-content: center;
padding:1px;
border-radius: 50%;
width: 0.9rem;
aspect-ratio: 1/1;
line-height: 1;
font-weight: 700;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: var(--arrow-size) solid transparent;
border-bottom: var(--arrow-size) solid transparent;
border-left: var(--arrow-size) solid var(--arrow-color);
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
.side-by-side {
display: flex;
flex-direction: row;
gap: 10px;
padding: 5px;
justify-content: center;
align-items:flex-start;
}
.svg-badge {
width: 25px;
height: 25px;
/* background-attachment: fixed | scroll; */
/* background-size: auto | cover | contain | 500px 250px; */
background-position: center;
background-repeat: no-repeat;
/* background-origin: border-box | padding-box | content-box; */
/* background-clip: border-box | padding-box | content-box; */
/* background-blend-mode: multiply | screen | overlay; */
}
.svg-complete {
background-image: url('data:image/svg+xml,');
width: 16px;
height: 16px;
}
.svg-pending {
background-image:url('data:image/svg+xml,');
width: 16px;
height: 16px;
}
.svg-ticked {
width: 15px;
height: 15px;
background-image: url('data:image/svg+xml,');
position:absolute;
bottom:0;
right:0;
translate: 50% 20%;
}
/*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*//*HOME*/
.home-main {
display: grid;
height: 90%;
grid-template-rows: auto auto;
max-width: 800px;
margin: auto;
}
.home-navigation {
display:flex;
gap: 10px;
justify-content: center;
margin-inline: auto;
margin-block: 15px;
max-width: 100vw;
overflow-x: auto;
}
.home-navigation button {
width: 200px;
max-width: 30vw;
aspect-ratio: 3/5;
color: #f7f2f2;
font-size: 20px;
font-weight: 500;
letter-spacing: -1px;
border-radius: 15px;
display: grid;
grid-template-rows: 4fr 1fr;
padding: 0;
padding-bottom: 15px;
overflow: hidden;
border: none;
box-shadow: 1px 1px rgba(128, 128, 128, 0.662);
}
.home-navigation button:hover {
cursor: pointer;
}
.home-navigation button > div {
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: center;
border-top: 1px solid rgba(254, 254, 254, 0.623);
height: 100%;
}
.home-navigation button img {
min-height: 100%;
min-width: 100%;
object-fit: cover;
transition-duration: 600ms;
}
.home-navigation button:hover img {
min-height: 105%;
min-width: 105%;
object-fit: cover;
}
.home-logbook {
background-color: rgb(54, 54, 54);
}
.home-courses {
background-color: rgb(26, 26, 59);
}
.home-workplace {
background-color: rgb(59, 26, 26);
}
.home-messages {
display:flex;
flex-direction: column;
gap: 0px;
justify-content: flex-start;
overflow-y:hidden;
padding: 20px;
transition-duration: 800ms;
@media screen and (max-width: 400px) {
width: 100%;
padding: 0px;
padding-bottom: 20px;
}
}
.home-message {
background-color: white;
border-radius: 10px;
box-shadow: 1px 1px 1px rgba(128, 128, 128, 0.662);
position: relative;
display: flex;
flex-direction: column;
padding: 10px;
gap: 5px;
transition-duration: 800ms;
overflow: hidden;
margin-block: 8px;
hr {
height: 1px;
border: none;
width: 80%;
margin-inline: auto;
margin-block: 5px;
background-color: rgba(192, 204, 214, 0.32);
}
@media screen and (max-width: 400px) {
width: 100%;
border-radius:0px;
}
}
.home-message-header {
width: 100%;
display: flex;
justify-content: start;
padding: 5px;
gap: 10px;
text-align: left;
}
.home-message-close-button {
background-color: transparent;
border: none;
position: absolute;
top:5px;
right: 5px;
font-size: 1.5em;
color: rgb(54, 54, 54);
rotate: 45deg;
}
.home-message-close-button:hover {
cursor: pointer;
}
.home-message-img-small {
height: 45px;
aspect-ratio: 1/1;
border-radius: 50%;
overflow: hidden;
display:flex;
justify-content: center;
align-items: center;
background-color: rgba(128, 128, 128, 0.5);
}
.home-message .img_small {
height: 55px;
aspect-ratio: 1/1;
object-fit:scale-down;
}
.home-message .img_large {
width:100%;
height: auto;
object-fit: cover;
}
.home-message-title {
font-size: 1em;
font-weight: 600;
color: rgb(0, 0, 0);
}
.home-message-subtitle {
font-size: 0.7em;
font-weight: 500;
color: rgb(112, 111, 111);
}
.home-message-content {
max-width: 55ch;
text-align: left;
margin-inline: 15px;
font-size: 0.9em;
line-height: 1.5;
}
.home-message-action {
display: flex;
width: 100%;
justify-content: end;
}
/*DASHBOARD*//*DASHBOARD*//*DASHBOARD*//*DASHBOARD*//*DASHBOARD*//*DASHBOARD*//*DASHBOARD*//*DASHBOARD*//*DASHBOARD*//*DASHBOARD*/
.dashboard_container {
display: grid;
justify-content: center;
gap: 20px;
padding: 50px;
width: 95%;
max-width: 800px;
margin: auto;
--common-length:300px;
@media screen and (max-width: 800px) {
gap: 10px;
margin: auto;
padding:10px;
}
}
.dashboard_container[data-dashboard="trainee"] {
grid-template-areas:
'icuedx icuedx icuedx icuedx'
'sessions sessions logbook logbook'
'profile unit logbook logbook'
'courses courses courses supervisor';
@media screen and (max-width: 800px) {
grid-template-areas:
'icuedx icuedx'
'logbook logbook'
'sessions sessions'
'courses courses'
'profile unit'
'supervisor supervisor';
}
}
.dashboard_container[data-dashboard="supervisor"] {
grid-template-areas:
'icuedx icuedx icuedx icuedx'
'supervisor supervisor supervisor supervisor'
'sessions sessions courses courses'
'profile unit courses courses'
'profile logbook logbook logbook';
@media screen and (max-width: 800px) {
grid-template-areas:
'icuedx icuedx'
'supervisor supervisor'
'sessions sessions'
'courses courses'
'profile unit'
'logbook logbook';
}
}
.dashboard_box_main {
display: grid;
justify-content: center;
grid-template-rows: auto 0fr;
grid-template-columns: 1fr;
transition: grid-template-rows 500ms;
padding: 0px;
width: 100%;
background-color: rgba(238, 238, 238, 0.486);
border-left: 8px solid var(--theme-color);
box-shadow: 0 0 4px 2px rgba(85, 91, 94, 0.5);
}
.dashboard_box_main:hover {
grid-template-rows: auto 1fr;
}
.dashboard_box_main.show {
grid-template-rows: auto 1fr;
}
.dashboard_header {
position: relative;
font-family: 'Fredericka the Great', cursive;
text-align: justify;
padding-left: 1em;
font-weight: 100;
color: rgb(48, 47, 47);
}
.dashboard_header_info {
display: flex;
justify-content: center;
align-items: center;
position:absolute;
top: 0;
right: 0;
translate: translate(50%, 50%);
background-color: #ffffff67;
padding: 5px;
border-radius: 50%;
width: 30px;
height: 30px;
}
.dashboard_header_info[data-tooltip]:hover::after, button[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
font-size: 12px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
bottom:100%;
white-space: nowrap;
font-family:Arial, Helvetica, sans-serif;
opacity: 0.9;
z-index: 200;
}
.dashboard_body {
overflow: hidden;
display: grid;
justify-content: center;
gap: 10px;
padding: 5px;
}
#icuedx_header {
grid-area: icuedx;
--theme-color: var(--tertiary-color);
border-right: 8px solid var(--theme-color);
border-top: 8px solid var(--theme-color);
border-bottom: 8px solid var(--theme-color);
background-color: white;
}
#icuedx_header .dashboard_header {
max-height: 20px;
text-align: right;
box-sizing: border-box;
padding-right: 25px;
padding-block: 0px ;
display: grid;
align-items: center;
grid-template-columns: 20px auto 20px;
}
#icuedx_header .dashboard_body {
max-height: 400px;
overflow-y: scroll;
}
#my_courses {
grid-area: courses;
--theme-color: rgb(77, 77, 163);
}
#my_unit {
grid-area: unit;
--theme-color: rgb(230, 231, 129);
}
#my_logbook {
grid-area: logbook;
--theme-color: hsla(123, 31%, 35%, 0.418);
}
#my_profile {
grid-area: profile;
--theme-color: rgb(134, 85, 160);
}
#my_sessions {
grid-area: sessions;
--theme-color: rgba(255, 0, 0, 1);
}
#supervisor_roles {
grid-area: supervisor;
--theme-color: hsla(263, 86%, 27%, 0.178);
}
.dashboard-notification-container {
display: flex;
flex-direction: column;
gap: 5px;
}
.dashboard-notification {
background-color: var(--theme-color);
font-size: 0.8em;
text-align: left;
padding: 10px;
border-radius: 5px;
}
.dashboard_page .session {
display: grid;
justify-content:left;
align-items: top;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr;
background-color: var(--card-color);
padding: 0;
gap: 0 ;
width: var(--common-length);
border-radius: 10px;
overflow: hidden;
margin: auto;
z-index: 10;
height: 70px;
font-size: 0.9em;
}
.dashboard_page .session > img {
width: 100%;
height: 70px;
object-fit:cover;
}
.dashboard_page .session-text {
text-align: left;
text-indent: 3px;
width: 100%;
display: flex;
align-content: flex-start;
flex-direction: column;
max-height: 100%;
margin-top: 0;
}
.dashboard_page .session-text .course-title {
font-size: 0.7em;
font-weight: 700;
color: var(--course-colour2);
background-color: var(--course-colour1);
padding: 3px;
}
.dashboard-course-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 45%;
gap:10px;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding:10px;
width: var(--common-length);
margin: auto;
max-width: 600px;
}
.dashboard-course-container.courses-page {
max-width: 400px;
}
.dashboard-course {
position:relative;
max-width: 150px;
height: 200px;
font-size: 0.8em;
box-shadow: 1px 1px 1px 1px #d8d8d88a ;
border-radius: 10px;
overflow: hidden;
background-color: white;
display: flex;
flex-direction: column;
}
.dashboard-course.courses-page {
max-width: 200px;
height: 250px;
font-size: 0.9em;
}
.dashboard-course > img {
inline-size: 100%;
height: 60%;
object-fit:cover;
}
.dashboard-course p {
max-width: 15ch;
margin: auto;
}
.dashboard-course.completed > img {
opacity: 0.5;
}
.dashboard-course.completed .dashboard-course-buttons {
position: absolute;
top: 0;
margin: auto;
width: 100%;
height: 60%;
display: grid;
grid-auto-flow: row;
grid-auto-rows: 50%;
gap:2px;
padding: 15px;
}
.procedure-progress-container {
display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
width: 90%;
margin-bottom: 20px;
padding: 10px;
background-color: rgba(179, 179, 179, 0.202);
border-radius: 10px;
position: relative;
@media screen and (max-width: 800px) {
width: 97%;
}
}
.procedure-progress-container-section {
min-height: 100px;
text-align: left;
display:flex; flex-direction: column; gap:5px; justify-content: start; align-items: start;
background-color: white;
padding: 5px;
border-radius: 5px;
font-size: 11px;
position: relative;
@media screen and (max-width: 800px) {
width:40vw !important;
}
}
.procedure-progress-badges {
display:flex; gap:1px; flex-wrap: wrap; width:100%;
}
.procedure-progress-image-section {
@media screen and (max-width: 800px) {
width:100%;
}
}
.procedure-progress-badge-section {
@media screen and (max-width: 800px) {
position:absolute;
top:10px;
right:10px;
}
}
.procedure-progress {
position: relative;
width: 50px;
height: 50px;
}
.procedure-progress > img {
width: 90%;
height: 90%;
border-radius: 5px;
}
.procedure-progress[data-logbook-count]::after {
content: attr(data-logbook-count);
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background-color: rgba(240, 240, 240, 0.89);
border: solid 0.5px rgba(0, 0, 0, 0.63);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.7em;
font-family: Arial, Helvetica, sans-serif;
}
.table-logbook {
background-color: #ffffff;
padding: 2px;
border-radius: 10px;
margin: auto;
position: relative;
width:100%;
border:none;
font-size: 12px;
text-align: left;
thead {
background-color: var(--bottom-bar-color);
color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
@media screen and (max-width:800px) {
overflow:visible;
font-size: 9px;
td {
padding: 0px;
}
th {
padding: 5px !important;
}
}
}
.table-logbook tr:nth-of-type(2n) {
background: hsla(0, 0%, 33%, 0.055);
}
.table-logbook tr.unsigned td[data-cell="date"]::before, .table-logbook caption::before{
content: "*";
color: #b42626;
}
.table-logbook caption {
text-align: center;
caption-side: bottom;
}
.dashboard-profile {
width:var(--common-length)/2;
font-size: 0.8em;
}
.dashboard-profile img {
height: 80px;
width: 80px;
border-radius: 50%;
margin:auto;
z-index: 1;
}
.dashboard-profile-list-container {
background-color: rgba(0, 0, 0, 0.534);
color: white;
z-index: 10;
transform: translate(0, -10px);
padding: 5px;
border-radius: 5px;
}
.dashboard-profile ul {
padding-left: 2px;
text-align: justify;
list-style-type:none;
}
.dashboard-profile li {
margin-bottom: 2px;
}
.dashboard-profile ol {
padding-left: 12px;
text-align: left;
list-style-type:disc;
}
.dashboard-workplace {
display:flex;
flex-direction: column;
align-items: center;
font-size: 0.8em;
text-wrap:balance;
background-color: white;
border-radius: 5px;
overflow: hidden;
}
.dashboard-workplace p {
max-width: 15ch;
}
.dashboard-workplace img {
height: 40px;
width: 100%;
object-fit: cover;
}
.dashboard_container[data-dashboard="supervisor"] #supervisor_roles .table-dashboard-logbook {
font-size: 0.9em;
width: auto;
@media screen and (max-width: 800px) {
font-size: 0.7em;
}
}
.dashboard_container[data-dashboard="supervisor"] #supervisor_roles .table-dashboard-logbook td {
padding-left: 10px;
}
#supervisor_roles .dashboard-course {
max-width: 200px;
height: 160px;
background-color: white;
}
#supervisor_roles .dashboard-course > img {
inline-size: 100%;
height: 40%;
object-fit:cover;
}
#supervisor_roles .dashboard-course p {
max-width: 25ch;
margin: auto;
}
/*PROFILE*//*PROFILE*//*PROFILE*//*PROFILE*//*PROFILE*//*PROFILE*//*PROFILE*//*PROFILE*//*PROFILE*//*PROFILE*//*PROFILE*/
.profile_page_container {
}
.profile_page_container .action-button {
padding: 10px;
background-color: #202020;
color: white;
border: none;
border-radius: 5px;
}
.profile_page_container .action-button:hover {
cursor: pointer;
background-color: #202020de;
}
.coffee-icon {
aspect-ratio: 1/1;
border-radius: 50%;
background-color: #ffffff;
overflow: hidden;
box-shadow: 0 0 2px 2px rgba(85, 91, 94, 0.326);
display: flex;
justify-content: center;
align-items: center;
padding: 2px;
img {
height: 100%;
object-fit:contain;
}
}
.coffee-icon:hover {
cursor: pointer;
transform: scale(1.1);
}
.coffee-form {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
background-color: rgba(128, 128, 128, 0.24);
margin: auto;
border-radius: 10px;
width: 95%;
max-width: 400px;
}
.img_profile_page {
width: 220px;
min-width: 210px;
border: 4px solid white;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
translate: 0px -50px;
> img {
width: 100%;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
}
.coffee-icon {
width: 50px;
position: absolute;
bottom: 0;
right: 0;
transform: translate(10%, 0%);
z-index: 100;
}
}
.profile_page_header {
display: flex;
justify-content: space-between;
align-items:center;
gap: 20px;
padding: 20px;
padding-inline: 80px;
padding-bottom: 0px;
text-align: left;
width: 100%;
margin: auto;
margin-bottom: 0px;
font-size: 18px;
font-weight: 700;
box-shadow: 0 0 2px 2px rgba(85, 91, 94, 0.326);
background-color: white;
flex-wrap: wrap;
> * {
translate: 0px -50px;
}
@media screen and (max-width: 900px) {
flex-direction: column;
justify-content: center;
text-align: center;
margin-bottom: 20px;
align-items: center;
padding-inline: 10px;
}
}
.profile_head_group {
display: flex;
gap: 30px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
@media screen and (max-width: 900px) {
flex-direction: column;
gap: 5px;
}
}
.profile_page_header_text {
@media screen and (min-width: 900px) {
padding-top:40px;
display: flex;
gap:5px;
width: auto;
flex-direction: column;
justify-content: center;
text-align: left;
}
}
#header-line {
width:80%;
@media screen and (min-width: 900px) {
display:none;
}
}
.profile-page-nav {
display:flex;
gap: 10px;
justify-content: center;
align-items: center;
margin:auto;
}
.img_profile_page_workplace {
width: 40px;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
border: 2px solid white;
}
.img_profile_page_workplace.primary {
width: 60px;
}
.profile_page_body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
margin: auto;
@media screen and (max-width: 800px) {
padding:0px;
}
}
.profile_page_content {
padding-block: 30px;
padding-inline: 50px;
width: 95%;
margin: auto;
margin-bottom: 20px;
border-radius: 5px;
background-color: var(--card-color);
box-shadow: 0 0 1px 1px rgba(85, 91, 94, 0.169);
overflow: hidden;
overflow-x: auto;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: start;
align-items: start;
max-width: 1000px;
@media screen and (max-width: 800px) {
width:100%;
border-radius: 0px;
padding-block: 20px;
padding-inline: 10px;
justify-content: center;
align-items: center;
text-align: center;
}
}
.profile_page_content.about {
text-align: left;
p {margin-inline: 15px;}
}
.about-info {
@media screen and (max-width: 800px) {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
text-align: center;
}
}
.vertical-container.my-logbook {
justify-content: center;
}
.about-section {
display: flex;
flex-direction: column;
margin:auto;
padding:5px;
position: relative;
gap:5px;
width: 100%;
background-color: rgba(128, 128, 128, 0);
border-radius: 15px;
ul {
margin-block: 0;
background-color: rgba(128, 128, 128, 0.128);
border-radius: 10px;
}
button {
justify-self: right;
}
dialog {
width: 100%;
max-width: 300px;
border: 1px solid black;
border-radius: 5px;
position:fixed;
> div {
padding: 10px;
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
align-items: center;
position: relative;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 100%;
}
}
}
.placements-profile {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: start;
align-items: start;
width: 100%;
}
.placement-card {
width: 100%;
display: grid;
grid-template-columns: 80px auto;
gap: 10px;
padding: 10px;
border-radius: 5px;
background-color: white;
box-shadow: 0 0 2px 2px rgba(85, 91, 94, 0.326);
overflow: hidden;
position: relative;
text-align: left;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.procedure-progress-card {
width: 100%;
display: grid;
grid-template-columns: 80px 250px 80px;
gap: 10px;
padding: 10px;
border-radius: 5px;
background-color: white;
overflow: hidden;
position: relative;
text-align: left;
font-size: 12px;
img {
height: 50px;
width: 50px;
object-fit:contain;
}
}
.profile_page_content.courses {
background-color: rgb(24, 24, 24);
color: white;
}
.courses-profile {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: space-evenly;
}
.procedures-profile {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: space-evenly;
}
.progress-card {
display: grid;
justify-content: center;
align-items: center;
width: 100px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.progress-card ul {
padding-left: 2px;
list-style-type:none;
}
.progress-card li {
padding-left: 5px;
text-align: justify;
display: flex;
gap:3px;
font-size: 0.9em;
margin: 1px;
}
.progress-card .course-progress-bar {
background-color: #a52e1e;
height: 1em;
}
.progress-card img {
width: 100%;
height: 100%;
object-fit: cover;
grid-area: 1 / 1 / 4 / 4;
justify-self: center;
align-self: start;
}
.progress-card.procedure {
height: 250px;
width:150px;
overflow:visible;
}
.progress-card.courses {
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.507);
height: 200px;
}
.complete-badge {
position: absolute;
top:5px;
right:5px;
transform: translate(100% 100%);
z-index: 50;
background-color: rgba(255, 255, 255, 0.274);
border-radius: 50%;
padding: 2px;
}
.progress-card.courses .bottom-bar {
background: #bbbbbb;
grid-area: 4 / 1 / 5 / 4;
}
.progress-card.procedure img {
width: 110px;
height: 110px;
object-fit:contain;
grid-area: 1 / 1 / 3 / 4;
transition-duration: 500ms;
}
.progress-card.procedure:hover img {
transform:translateY(-10px);
}
.progress-card .bkg {
padding: 3px;
grid-area: 2 / 1 / 4 / 4;
height: 100%;
overflow: hidden;
z-index: 1;
}
.progress-card.procedure .bkg {
border-radius: 5px;
}
.progress-card.courses .bkg {
grid-area: 3 / 1 / 4 / 4;
}
.progress-card .light.bkg {
background: #ffffff;
}
.progress-card .light-opaque.bkg {
background: #fffef9fa;
box-shadow: 0 0 1px 1px rgba(85, 91, 94, 0.326);
}
.progress-card .dark.bkg {
background: #1313136e;
color: rgb(233, 233, 233);
}
/*TIMELINE 2*//*TIMELINE 2*//*TIMELINE 2*//*TIMELINE 2*//*TIMELINE 2*//*TIMELINE 2*/
.timeline2 {
display: flex;
justify-content: center;
}
.timeline2-profile {
display:flex;
position: relative;
overflow-x: auto;
overflow-y: hidden;
max-width: 100%;
transition-duration: 1s;
gap:4px;
padding-inline:20px ;
}
.timeline2:hover .timeline2-profile {
gap: var(--timeline-gap);
}
.timeline2-profile:hover {
gap: var(--timeline-gap);
}
.timeline2-card::before {
content: ""; /* Necessary for the pseudo-element to display */
position: absolute;
top: 50%; /* Positions the line in the middle */
right:0;
width: var(--timeline-gap); /* Line spans the full width of the container */
height: 1px; /* Adjust thickness of the line here */
background-color: rgb(92, 92, 92); /* Color of the line */
transform: translateY(-50%);
transform: translateX(100%);
}
.timeline2-card.end::before {
width: 0;
}
.timeline2-card {
height: 200px;
display: flex;
align-items: center;
position: relative;
}
.timeline2-card-image {
height: 200px;
display: flex;
align-items: center;
overflow: visible;
position: relative;
transform: scale(1);
transition-duration: 1s;
translate: 0 0;
& img {
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
border: solid 1px #000000;
}
}
.timeline2-card:hover .timeline2-card-image {
transform: scale(1.1);
translate: 0 -5px;
}
.timeline2-card-date {
position: absolute;
top:0;
left:0;
}
.timeline2-card-text {
position: absolute;
bottom:20px;
left:0;
font-size: 8px;
}
.timeline2-card-image-2 {
position: absolute;
top:-30%;
right:-30%;
}
.timeline2-card.event-procedure .timeline2-card-image-1 {
& img {
border:none;
aspect-ratio: 1/1;
border-radius: 5px;
object-fit:contain;
}
}
/*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*//*ROSTER*/
.roster-top-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2px;
padding: 10px;
background-color: var(--bottom-bar-color);
color: white;
margin: auto;
.btn {
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding-block: 5px;
padding-inline: 5px;
border-radius: 5px;
}
button:hover {
cursor: pointer;
}
input[type="date"] {
letter-spacing: -2;
padding-block: 5px;
padding-inline: 15px;
font-size: 16px;
}
}
.roster-second-row {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
padding: 2px;
background-color: rgba(128, 128, 128, 0.386);
color: white;
margin: auto;
.btn {
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding-block: 5px;
padding-inline: 5px;
}
button:hover {
cursor: pointer;
}
}
.date-change-group {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.date-change-arrow {
font-size: 20px;
margin-inline: 2px;
color: white;
font-stretch: narrower;
border-radius: 5px;
padding: 3px;
}
.date-change-arrow:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.269);
}
#roster-tabs {
display: flex;
align-items: start;
justify-content: start;
max-width: 500px;
margin: auto;
border-radius: 10px;
position: sticky;
z-index: 0;
button {
padding: 15px;
padding-left: 10px;
background-color: #e4e4e4;
border: none;
font-size: 14px;
border-top-right-radius: 10px;
box-shadow: 1px 1px 1px 1px rgba(85, 91, 94, 0.5);
z-index: 1;
svg.icon-outlined {
display:block;
}
svg.icon-solid {
display:none;
}
}
button:hover {
cursor: pointer;
}
button.active {
background-color: #ededed;
border: none;
z-index: 2;
svg.icon-outlined {
display:none;
}
svg.icon-solid {
display:block;
}
}
}
.roster-tab-icon {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
transition: all 300ms ease-in-out;
.icon-icon {
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 450px) {
.icon-text.first-to-go {
display: none;
}
}
@media screen and (max-width: 380px) {
.icon-text {
display: none;
}
}
.text-on-hover {
transform: scaleX(0); /* Collapsed state */
transform-origin: right; /* Animate from left to right */
white-space: nowrap; /* Prevent text wrapping */
overflow: hidden; /* Hide overflowing content */
transition: transform 300ms ease-in-out; /* Smooth animation */
span {
display:none;
}
}
}
.roster-tab-icon:hover .text-on-hover {
transform: scaleX(1); /* Fully expanded */
span {
display: flex;
align-items: start;
justify-content: start;
}
}
/*Attendance*//*Attendance*//*Attendance*/
.button-icon {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
padding-inline:5px;
transition: all 300ms ease-in-out;
background-color: #ffffff;
border-radius: 10px;
background-repeat: no-repeat;
background-position: 3px center;
border:1px solid #000000;
gap:2px;
text-align: center;
}
.button-icon:hover {
cursor: pointer;
padding-inline:15px;
}
.button-icon.dynamic-text {
width:34px;
.dynamic-text-content {
transform:scaleX(0);
}
}
.button-icon.dynamic-text:hover {
width:auto;
.dynamic-text-content {
transform:scaleX(1);
}
}
.button-icon.no-text {
background-color: transparent;
background-position: center;
border:none;
}
.button-icon-spacer {
width:24px;
aspect-ratio: 1/1;
}
.attendance-online {
background-image: url('data:image/svg+xml, ');
/* background-attachment: fixed | scroll; */
/* background-size: auto | cover | contain | 500px 250px; */
background-position: 5px center;
background-repeat: no-repeat;
/* background-origin: border-box | padding-box | content-box; */
/* background-clip: border-box | padding-box | content-box; */
/* background-blend-mode: multiply | screen | overlay; */
}
.attendance-in-person {
background-image:url('data:image/svg+xml, ');
}
.attendance-maybe {
background-image:url('data:image/svg+xml, ');
background-repeat: no-repeat;
}
.attendance-no {
background-image:url('data:image/svg+xml, ');
background-repeat: no-repeat;
}
.add-person {
background-image:url('data:image/svg+xml,')
}
.confirm-attendance {
background-image: url('data:image/svg+xml,');
border: none;
background-color: #00b38a;
color: white;
padding-block: 0px;
padding-inline:5px;
margin:3px;
font-size: 10px;
}
.download-item {
background-image:url('data:image/svg+xml,');
background-color: transparent;
color: white;
border:none;
}
.add-item {
background-image: url('data:image/svg+xml,');
}
.edit-item {
background-image: url('data:image/svg+xml,');
}
.request-review {
background-image: url('data:image/svg+xml,');
}
.roster_container {
display: flex;
align-items: start;
justify-content: start;
flex-direction: column;
background-color: #ededed;
max-width: 500px;
margin: auto;
text-indent: 10px;
position: relative;
z-index: 1;
border-top-right-radius: 10px;
box-shadow: 1px 0px 0px 0px rgba(85, 91, 94, 0.5);
b {
text-align: left;
color: var(--icu-green);
}
.table {
width: 100%;
font-size: 16px;
border: none;
margin-bottom: 20px;
tr {
display: grid;
grid-template-columns: 65px auto 85px;
padding: 10px;
gap: 10px;
background: white;
border-bottom: 1px solid #e8e8e8;
align-items: center;
}
td {
padding-left: 1px;
height: 100%;
}
.coffee-icon {
width: 25px;
background-color: transparent;
box-shadow: none;
}
.staff_info {
display: flex;
flex-direction: column;
gap: 10px;
align-items: end;
justify-content: right;
text-align: right;
}
.profile_picture_container {
position: relative;
.profile_picture {
width:60px;
}
.shift-icon {
position: absolute;
bottom:0;
right:0;
background-color: white;
border-radius: 5px;
translate: 25% 15%;
}
}
}
}
.roster_container.unit_rosters {
width:100%;
max-width:800px;
overflow-x:scroll;
.roster-table {
width:100%;
font-size: 10px;
overflow:scroll;
.today {
font-weight: 700;
}
td {
min-width:50px;
border:none;
}
.first-column {
width: 100px;
}
.roster-row.S {
color:rgb(183, 119, 2);
}
.roster.M {
td {
border-top:50px;
}
}
}
}
#roster-today {
background-color: #ededed;
b {
text-align: left;
color: var(--icu-green);
}
}
#roster-tonight {
background-color: #ededed;
b {
text-align: left;
color: rgb(14, 37, 105);
}
}
#roster-education {
background-color: #ededed;
table {
background-color: transparent;
}
tr {
border:none;
background-color: white;
grid-template-columns: 65px auto 145px;
}
tr.session_details_container {
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px;
background-color: white;
text-align: left;
justify-content: start;
align-items: start;
border-bottom: solid 20px #ededed;
}
}
#roster-personal {
background-color: #ececec;
.calendar {
display:grid;
gap: 0px;
grid-template-columns: repeat(7, 1fr);
margin:auto;
background-color: #cbcbcb;
border-radius: 5px;
overflow: hidden;
box-shadow: 1px 1px 1px 1px #b8b8b88a ;
}
.day {
max-width: calc((100vw/7) - 1px) ;
height: 100px;
background-color: #ffffff;
display:flex;
flex-direction: column;
gap: 2px;
justify-content: start;
align-items: start;
border:#cbcbcb 1px solid;
.shift {
background-color: #f00;
color:white;
width: 100%;
height: 20px;
text-align: center;
font-size: 12px;
font-weight: 600;
padding: 2px;
text-indent: 0;
border-radius: 3px;
}
.education {
font-weight: 400;
font-size: 10px;
}
}
.extra {
background-color: transparent;
}
.today {
font-weight: 700;
}
.header {
background-color: var(--bottom-bar-color);
color: white;
font-weight: 700;
height:30px;
width: 100%;
}
}
.coffee-people {
background:white;
border-radius: 5px;
padding: 5px;
margin:5px;
text-align: left;
font-size: 12px;
transition-duration: 300ms;
ul {
list-style-type: none;
padding-inline: 0;
}
}
#coffee-list {
list-style: none;
padding-inline: 5px;
text-align: left;
padding-bottom:5px;
font-family:'Courier New', Courier, monospace;
font-size:14px;
margin-inline: 5px;
color:#000000e0;
ul {
padding-inline: 2px;
font-size:11px;
margin:2px;
animation-duration: 300ms;
}
li {
padding-inline: 2px;
margin:2px;
animation-duration: 300ms;
}
}
.coffee-list {
animation-duration: 300ms;
background-color: #fdf8c8ff ;
box-shadow: 1px 1px 1px 1px #d8d8d88a ;
min-width: 150px;
min-height: 150px;
border-radius: 1px;
}
.verticalLines {
width: 2px;
float: left;
height: 100%;
margin-left: 35px;
border-left: 1px solid red;
border-right: 1px solid red;
}
/*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*//*UNIT*/
.staff_profile_container {
display: flex;
flex-wrap: wrap;
gap:5px;
padding: 5px;
background-color: #aaa9a927;
margin-inline:auto;
margin-bottom: 20px;
border-radius: 10px;
max-width: 800px;
justify-content: center;
}
.staff_profile_header {
width: 100%;
}
.staff_profile_body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap:10px;
justify-content:center;
padding: 5px;
font-size: 0.9em;
width: 100%;
}
.align-horizontally {
display: flex;
justify-content: left;
align-items: center;
gap: 5px;
}
.staff_profile {
display: flex;
gap: 5px;
width: 180px;
height: 70px;
box-shadow: 1px 1px 1px 1px #d8d8d88a ;
border-radius: 10px;
background-color: white;
padding: 5px;
padding-right: 2px;
align-items: center;
position: relative;
.profile-name {
font-size: 1em;
font-weight: 700;
}
.profile-role {
font-size: 0.9em;
font-weight: 400;
color: gray;
}
.coffee-icon {
width:30px;
box-shadow: none;
position: absolute;
bottom: 5px;
right: 5px;
border-radius: 0px;
padding: 5px;
}
.staff_profile_image_container {
position: relative;
font-size: 8px;
.activity-indicator {
position: absolute;
bottom: 2px;
right: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: transparent;
}
}
.staff_profile_selector {
position: absolute;
top: 2px;
right: 5px;
display:flex;
gap: 1px;
flex-direction: column;
}
@media screen and (max-width: 400px) {
width: 160px;
gap: 5px;
height: 65px;
}
}
.staff_profile.attendance-confirmed {
width:80px;
}
.staff_profile img {
width: 50px; /* Make the image responsive */
aspect-ratio: 1/1; /* Maintain aspect ratio */
border-radius: 50%;
object-fit: cover;
}
.staff_profile img.procedure-image {
object-fit: contain;
border-radius: 0px;
}
.staff_profile_text {
text-align: left;
font-size: 0.8em;
width:200px;
overflow: hidden;
padding: 2px;
}
.unit-description {
max-width: 80ch;
padding: 45px;
margin: auto;
margin-bottom: 20px;
text-align: center;
text-wrap: pretty;
background-color: white;
p {
text-align: center;
font-size: 14px;
}
ul {
padding: 25px;
padding-inline: 45px;
text-align: justify;
/* list-style-type:none; */
margin-top: 2px;
background: #e6e6e64e;
border-radius: 10px;
width:70%;
margin: auto;
}
li {
margin-left: 25px;
font-size: 12px;
}
@media screen and (max-width: 400px) {
padding: 10px;
p {
font-size: 12px;
}
ul {
padding: 10px;
}
li {
font-size: 10px;
}
}
}
/*PLACEMENTS*//*PLACEMENTS*//*PLACEMENTS*//*PLACEMENTS*//*PLACEMENTS*//*PLACEMENTS*//*PLACEMENTS*/
.placement-container {
position: relative;
.staff_profile_body {
width: 100%;
max-width: 1100px;
margin: auto;
}
.staff_profile {
width: 220px;
height: 80px;
padding: 5px;
font-size: 14px;
@media screen and (max-width: 400px) {
width: 160px;
height: 80px;
font-size: 10px;
}
}
.staff_profile.selected-staff {
border:solid 2px var(--bottom-bar-color);
background-color: #ededed;
}
}
/*UNIT PROCEDURE*//*UNIT PROCEDURE*//*UNIT PROCEDURE*//*UNIT PROCEDURE*//*UNIT PROCEDURE*//*UNIT PROCEDURE*/
.tap-to-scroll-outer {
margin: auto;
margin-block: 20px;
width: 80%;
max-width: 400px;
border-radius: 10px;
gap:0px;
background-color: white;
padding: 0px;
overflow: hidden;
button {
padding: 10px;
border: none;
background-color: #2020200e;
color: rgb(19, 19, 19);
font-size: 16px;
height: 100px;
}
button:hover {
cursor: pointer;
background-color: #2020202d;
}
}
.tap-to-scroll-inner {
box-shadow: inset 1px 1px 1px rgba(128, 128, 128, 0.384);
background-color: rgb(255, 255, 255);
height: 100px;
margin-block:0px;
overflow-x: auto;
padding:10px;
justify-content: center;
}
.procedure-card {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
width:50px;
}
.selected-procedure {
background-color: #5eede93b;
border-radius: 5px;
border: 2px black solid;
}
.unit-procedure-timeline {
display: flex;
flex-wrap: nowrap;
gap: 10px;
justify-content: center;
align-items: center;
padding: 20px;
background-color: #aaa9a927;
border-radius: 10px;
width: 95%;
max-width: 800px;
margin: auto;
}
.level-of-supervision {
background:#20202005;
border-radius: 50%;
width: 60%;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
padding: 5px;
position: relative;
}
.level-of-supervision.circle-1 {
background: #ff6f0030;
}
.level-of-supervision.circle-2 {
background: #04ff0034;
width: 80%;
padding: 10px;
}
.level-of-supervision.circle-next {
background: #000000;
color:white;
width: 30px;
height: 30px;
padding: 10px;
}
.level-of-supervision.circle-2-options {
background: white;
border: solid 3px ;
width: 100%;
height: 50px;
border-radius: 10px;
padding: 10px;
margin-block: 5px;
position:relative;
}
.timeline2-card.end-2-options {
display: flex;
flex-direction: column;
width: 100px;
align-items: center;
justify-content: center;
gap: 5px;
}
.timeline2-card.end-2-options::after {
width: 0;
}
.level-of-supervision.circle-2-options::after {
content:"";
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 1px;
background-color: #000000;
z-index: -1;
}
.level-of-supervision.circle-2-options.top::after {
translate: -95% 35px;
rotate:-20deg;
}
.level-of-supervision.circle-2-options.bottom::after {
rotate:20deg;
translate: -95% 15px;
}
.level-of-supervision.circle-final {
width: 80%;
padding: 10px;
background: white;
border: solid 3px #000000;
position: relative;
z-index: 1000;
}
.timeline2-card-image-unit-procedure {
position: absolute;
bottom: 40%;
left: 50%;
width: 30%;
-webkit-text-stroke: 1px rgb(255, 255, 255); /* 1px thickness, black color */
font-weight: 700;
font-size: 30px;
translate: -50% 0;
z-index: 1000;
}
.overlay-symbol {
position: absolute;
top: 0;
left: 50%;
-webkit-text-stroke: 1px rgb(255, 255, 255);
width: 30%;
translate: -50% 0;
}
.college-img {
width: 100px;
height: 100px;
object-fit:contain;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.538);
background-color: white;
}
.default_procedure_container {
display: grid;
grid-template-columns: 1fr 4fr;
gap: 10px;
padding: 20px;
background-color: #aaa9a927;
border-radius: 10px;
width: 95%;
max-width: 800px;
margin: auto;
margin-block: 20px;
}
.default_procedure_container ul {
padding-left: 25px;
text-align: left;
list-style-type:disc;
margin-top: 2px;
background: #20202005;
border-radius: 2px;
}
.default_procedure_container li {
margin-left: 25px;
}
.procedure_default_container {
margin-block: 20px;
}
.procedure-default-form {
display: flex;
flex-wrap: wrap;
max-width: 95vw;
margin: auto;
}
.procedure-default-form > div {
width: 50%;
padding: 10px;
}
.procedure-default-form > div:first-child {
width: 100%;
height: 100px;
}
/*SOT*//*SOT*//*SOT*//*SOT*//*SOT*//*SOT*//*SOT*//*SOT*//*SOT*//*SOT*//*SOT*//*SOT*//*SOT*//*SOT*/
.trainee_profile_container {
display: flex;
flex-wrap: wrap;
justify-content:center;
align-items: start;
padding-inline:55px;
gap:20px;
}
.trainee_profile {
display: grid;
justify-content: center;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 1fr;
padding: 10px;
background: white;
border-radius: 25px;
width:500px;
max-width: 97vw;
height: 600px;
gap:5px;
}
.trainee_profile > div {
border: none;
}
.trainee_profile_image img {
width:150px;
height: auto;
max-height:250px;
border-radius: 5px;
}
.trainee_profile_text {
text-align: left;
font-size: 0.9em;
padding: 5px;
overflow:auto;
}
.trainee_profile_text ul {
padding: 5px;
text-align: justify;
list-style-type:none;
margin-top: 0;
background: #20202005;
border-radius: 2px;
}
.trainee_profile_text li {
margin-bottom: 4px;
font-size: 14px;
display:flex; gap:5px; flex-wrap: wrap;
background: #e1e0e06c;
border-radius: 5px;
padding: 5px;
}
.trainee_profile_image {
grid-area: 1 / 1 / 2 /2;
align-self: start;
justify-self: start;
}
.trainee_profile_text.courses {
grid-area: 1 / 2 / 2 / 3;
border-bottom: dotted 1px #252525e4;
}
.trainee_profile_text.procedures {
grid-area: 2 / 1 / 3 / 3;
}
/*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*//*COURSES*/
.all_courses_container {
display: grid;
grid-auto-flow: row;
grid-auto-rows: 380px;
gap:15px;
padding: 15px;
height: 65vh;
overflow-y: auto;
overscroll-behavior-block: contain;
background-color: whitesmoke;
border-radius: 15px;
border: solid 1px rgba(0, 0, 0, 0.623);
border-style: inset;
@media screen and (max-width: 800px) {
grid-auto-rows: 57vh;
gap:5px;
}
}
.course_card {
display: grid;
grid-template-areas:
'course_card_header course_card_header course_card_header'
'course_card_image course_card_text course_card_select';
justify-content: left;
background-color: var(--card-color);
gap: 0px;
padding: 0;
padding-bottom: 5px;
border-radius: 15px;
margin: 0;
width: 100%;
overflow: hidden;
max-width: 1000px;
margin: auto;
grid-template-columns: 2fr 3fr 1fr;
grid-template-rows: 30px 320px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
font-size: 0.9em;
@media screen and (max-width: 800px) {
grid-template-areas:
'course_card_header course_card_header'
'course_card_image course_card_image'
'course_card_text course_card_select';
grid-template-columns: 2fr 1fr;
grid-template-rows: 20px 160px auto;
height: 55vh;
font-size: 0.8em;
}
}
.course_card.inactive {
opacity: 0.5;
}
.course_card_header {
grid-area: course_card_header;
height: 30px;
padding: 5px;
font-size: 1.2em;
line-height: 30px;
}
.course_card_image {
grid-area: course_card_image;
overflow: hidden;
}
.course_card_image img {
object-fit: cover;
object-position: center;
min-height: 100%;
min-width: 100%;
max-height: 100%;
}
.course_card_text {
text-align: left;
text-decoration: none;
padding-inline: 10px;
padding-block: 0;
grid-area: course_card_text;
display: flex;
flex-direction: column;
gap:0px;
}
.course_card_select {
grid-area: course_card_select;
text-align: left;
text-decoration: none;
border-left: solid 1px #2f312523;
padding-inline: 10px;
padding-block: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.course_card_select_buttons .btn {
width:80%;
margin-block: 5px;
}
.course-container {
background-color: rgba(195, 195, 208, 0.223);
display: flex;
flex-direction: column;
border-radius: 5px;
width:95%;
max-width: 600px;
margin: auto;
margin-top: 20px;
padding: 10px;
gap: 15px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.215);
h3 {
margin-block: 0;
}
hr {
height: 1px;
border: none;
background-color: #3c444573;
width: 80%;
}
}
.course-row {
display:flex;
border-left:solid 8px var(--course-colour1);
margin-inline: auto;
border-radius: 10px;
width:99%;
min-width: 300px;
max-width: 600px;
overflow: hidden;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.215);
background-color: white;
height: 150px;
position: relative;
img {
height: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.complete-badge {
left:5px;
top:5px;
transform: translate(100% 100%);
background-color: var(--course-colour2);
width: 55px;
height: 55px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.215);
}
button {
font-size: clamp(8px, calc(8px + 0.5vw), 12px);
width: 100%;
min-height: 20px;
}
.course-row-content {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
text-align:start;
align-content:space-between;
width: 100%;
height: 100%;
font-size: calc(10px + 0.1vw) ;
gap: 1px;
.course-row-text {
width: 60%;
display: flex;
flex-direction: column;
justify-content:space-between;
}
.button-group {
display: flex;
flex-direction: column;
align-content: right;
gap: 5px;
padding: 5px;
width: 35%;
span {
margin-block:1px;
width: 100%;
}
}
> div {
padding: 5px;
}
}
.course-expired {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(228, 228, 228, 0.493);
}
}
.course-row.available-course {
font-size: calc(10px + 0.5vw) ;
height: 240px;
width: 100%;
img {
width: 35vw;
max-width: 210px;
aspect-ratio: 1/1;
}
.course-row-content {
height: 100%;
align-content:space-between;
}
}
.course-row.superuser-course-view {
font-size: calc(10px + 0.5vw) ;
height: 100px;
img {
width: 35vw;
max-width: 210px;
aspect-ratio: 1/1;
}
.course-row-content {
align-content:flex-start;
}
}
.course-row.expired-course {
font-size: calc(10px + 0.5vw) ;
height: 100px;
}
.course-row.course-admin {
font-size: calc(11px + 0.5vw) ;
height: 270px;
width: 100%;
img {
width: 210px;
aspect-ratio: 1/1;
}
.course-row-content {
height: 270px;
align-content:start;
}
}
.course-row.rolling-course {
height: 120px;
font-size: clamp(8px, calc(7px + 0.5vw), 14px);
.button-group {
width: 45%;
}
.course-row-text {
width: 45%;
}
}
/*PROGRAM*//*PROGRAM*//*PROGRAM*//*PROGRAM*//*PROGRAM*//*PROGRAM*//*PROGRAM*//*PROGRAM*//*PROGRAM*//*PROGRAM*/
.course-details {
display: flex;
justify-content: space-between;
align-items: center;
gap:4px;
padding: 5px;
margin: 0px auto;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
background-color: var(--course-colour2);
line-height: 1.2;
width: 100%;
position: sticky;
top: var(--navheight);
z-index: 90;
@media screen and (max-width:800px) {
font-size: 10px;
}
}
.course-details.navigate {
justify-content: start;
.course-navigation {
border-radius:10px;
padding-block:5px;
padding-inline: 8px;
text-align: left;
}
.previous-page {
background-color: #b0b0b067;
}
.previous-page:hover {
background-color: #5f5f5f3a;
}
.current-page {
font-weight: 600;
padding-left:2px;
}
}
.session_link_internal {
text-decoration: none;
color: black;
--card-height:200px;
font-size: 11px;
width:100%;
margin-bottom: 15px;
transition: all 0.3s ease;
transform-origin: center top;
@media screen and (max-width:450px) {
--card-height:130px;
font-size: 9px;
color:red;
}
.session_card_link {
width:100%;
}
.session_card {
display: grid;
justify-content: stretch;
background-color: var(--card-color);
padding: 0;
border-left: 10px solid var(--course-colour1);
border-right: 10px solid var(--course-colour2);
width: 90%;
margin: auto;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
overflow: hidden;
height: var(--card-height);
gap: 0px;
text-decoration: none;
align-items: top;
border-radius: 5px;
max-width: 800px;
}
}
.session_variable {
font-size: 1.2em;
font-weight: 600;
}
.session_live {
.session_card {
grid-template-columns: var(--card-height) 3fr 1fr 1fr;
grid-template-rows: 60px 140px;
grid-template-areas:
"image date date date "
"image text_area session_details session_card_progress";
@media screen and (max-width:600px) {
grid-template-columns: 150px 2fr 1fr 1fr;
.session_image img {
height:var(--card-height);
width: 150px;
}
.lesser_detail {
font-size: 10px;
}
}
@media screen and (max-width:450px) {
grid-template-columns: var(--card-height) 2fr 2fr;
grid-template-rows: 40px 90px;
.session_image img {
height:var(--card-height);
width: var(--card-height);
}
grid-template-areas:
"image date date "
"image session_details session_card_progress";
.lesser_detail {
display:none;
}
}
}
}
.session_not_live {
.session_card {
grid-template-columns: var(--card-height) 2fr 1fr;
grid-template-rows: 50px 150px;
grid-template-areas:
"image date date"
"image text_area session_card_progress";
.session_details {
display:none;
}
@media screen and (max-width:450px) {
grid-template-columns: var(--card-height) 2fr 1fr;
grid-template-rows: 40px 90px;
.session_details {
display:block;
}
grid-template-areas:
"image date date"
"image session_details session_card_progress";
}
}
}
.session_elapsed {
margin-bottom: 0px;
height: 0px;
transform: scaleY(0.0);
}
.session_elapsed_display {
transform: scale(0.9);
margin-bottom: 5px;
}
.session_card:not(.disabled):hover {
transform: translateY(-1px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.session_card > div {
overflow: hidden;
}
.session_card_link.disabled {
cursor: default;
opacity: 0.5;
}
.session_card.disabled {
cursor: default;
}
.session_image {
margin: auto;
grid-area: image;
}
.session_image img {
height:var(--card-height);
width: var(--card-height);
object-fit: cover;
object-position: 50% 0%;
}
.session_date {
text-align: left;
padding: 5px;
grid-area: date;
background-color: rgba(170, 169, 169, 0.336);
position: relative;
.rsvp_info {
position: absolute;
top: 0;
right: 0;
padding: 5px;
font-size: 0.8em;
}
}
.session_card_text {
text-align: left;
padding: 3px 3px;
grid-area: text_area;
max-width: 45ch;
@media screen and (max-width:450px) {
position: absolute;
font-size: 14px;
color:rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0.4);
width: var(--card-height);
padding-right: 30px;
}
}
.session_details {
text-align: left;
padding: 8px 2px;
grid-area: session_details;
@media screen and (max-width:450px) {
padding: 8px 5px;
font-size: 0.8em;
}
}
.session_details ul {
padding-left: 8px;
margin: 1px;
}
.session_details li {
list-style:square;
margin-left: 2px;
padding-left: 0px;
}
.progress_bar {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 100%;
height:var(--card-height);
gap: 0;
margin: 0;
padding: 0;
border: none;
background-color: var(--tertiary-color);
grid-area: progress-bar;
}
.session_card_progress {
text-align: right;
padding: 4px;
display:flex;
gap:3px;
flex-direction: column;
grid-area: session_card_progress;
@media screen and (max-width:450px) {
padding: 3px 5px;
margin: 0;
font-size: 0.7em;
}
}
.session_card.not_live .session_card_progress {
padding: 8px;
}
.session_card_progress ul {
padding-left: 4px;
}
.session_card_progress li {
list-style: none;
}
.session_links_container {
display: flex;
flex-wrap: wrap;
justify-content: right;
gap: 2px;
padding: 5px;
margin: auto;
background-color: rgb(238, 238, 238);
border-radius: 10px;
width:100%;
}
/*Course Details*/
.course_details_sessions {
display: flex;
flex-direction: row;
justify-content: right;
flex-flow: row wrap;
padding: 5px;
border-radius: 15px;
max-width: 800px;
margin: auto;
gap:5px;
}
.session_box {
display:grid;
grid-template-rows: 120px 30px;
width: 120px;
border: solid 1px grey;
font-size: 0.6em;
text-wrap:balance;
}
.session_box img {
max-width: 105%;
min-height: 120px;
object-fit: cover;
}
.session_box > div {
overflow: hidden;
}
.session_box span {
margin: 5px;
}
/**/
.topic_q a,
.topic_q a:hover {
color: var(--primary-color);
text-decoration: none;
display: inline-grid;
grid-template-columns: auto auto;
justify-content: center;
}
.topic_quiz {
width: 250px;
background-color:var(--background-color);
padding: 15px;
border-style: outset;
border-radius: 15px;
margin: 5px auto;
}
.overview {
background-color: white;
padding: 35px;
border: solid;
border-radius: 25px;
width: 70%;
margin: 25px auto;
}
.scenario {
display: none;
margin:auto;
}
.scenario_form {
display: grid;
justify-content: center;
grid-template-columns: auto;
gap: 1vw;
background-color: white;
border-radius: 15px;
padding: 2px;
margin: auto;
width: 100%;
}
.scenario_text {
text-align: justify;
margin: auto;
width: 60%;
}
.scenario_questions {
text-align: left;
margin-inline: auto;
margin-block: 0;
width: 50%;
}
.simulation-container {
width: 100%
}
.scenario > div {
margin: auto;
}
.scenario_response, .scenario_image {
max-width:100%;
max-height: 700px;
margin: auto;
}
.scenario button {
margin: auto;
}
.mcq {
display: block;
background-color: white;
padding: 50px;
border: solid;
border-radius: 25px;
width: 85%;
margin: 25px auto;
text-align: justify;
}
.mcq form,
input {
text-align: left;
}
.topic_container_2 {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid layout */
border-radius: 15px;
width: 70%;
gap: 20px;
padding:40px;
margin: auto;
color: var(--primary-color);
text-decoration: none;
}
.topic_box_2 {
color: var(--primary-color);
max-width: 300px;
height:450px;
margin: auto;
text-decoration: none;
padding-bottom: 10px;
text-align: center;
background-color: var(--card-color);
border-bottom: solid 10px var(--icu-green-light);
border-top: solid 10px var(--icu-green);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.topic_box_2 > a > h3 {
margin:15px;
}
.topic_box_2 > a > div {
padding: 15px;
text-align: center;
margin-bottom: 5px;
margin-top: 5px;
}
.topic_box_2 > a > img {
width: 100%; /* Make the image responsive */
height: auto; /* Maintain aspect ratio */
margin: auto;
padding: 0;
border-radius: 5px 5px 0 0;
}
.topic_box_2 > a {
color: var(--primary-color);
text-decoration: none;
}
.topic_box_2:hover {
box-shadow: 0 0 4px 2px rgba(85, 91, 94, 0.5);
color: #2f3125;
text-decoration: none;
}
.resources_container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap:20px;
padding: 15px;
width: 90%;
margin: auto;
}
.resources {
display: grid;
justify-content: center;
grid-template-rows: 2fr 0.1fr 0fr;
background-color:var(--card-color);
margin: auto;
padding:0;
gap:0;
align-items: top;
width:200px;
border-bottom: solid 10px var(--course-colour2);
border-top: solid 10px var(--course-colour1);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
transition: grid-template-rows 500ms;
}
.resources:hover {
grid-template-rows: 2fr 0.1fr 1fr;
}
.resources > div {
overflow: hidden;
}
.resources-image {
position: relative;
}
.resources-image-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
padding: 5px;
}
.resources img {
height:200px;
width: 200px;
margin: 0;
object-fit: cover;
}
.course-progress-bar {
position:relative;
height: 20px;
background-color: rgba(153, 205, 50, 0.301);
margin: 0;
}
.course-progress-bar[data-course-progress]::after {
content: attr(data-course-progress)"%";
display: inline;
position: absolute;
top: -0.25em;
right: -0.25em;
font-size: 0.8em;
font-weight: 600;
}
.resources-text-active {
max-height: 50px;
}
/*MCQs*//*MCQs*//*MCQs*//*MCQs*//*MCQs*//*MCQs*//*MCQs*//*MCQs*//*MCQs*/
.radio-option.mcq_answers {
display:flex;
gap:10px;
}
.feedback-container {
display:none;
}
.feedback-container.show-feedback {
display:grid;
gap:10px;
}
.mcq-info-all {
table {
padding: 0%;
overflow: hidden;
thead {
background-color: var(--bottom-bar-color);
color: white;
}
}
}
/*CERTIFICATE*//*CERTIFICATE*//*CERTIFICATE*//*CERTIFICATE*//*CERTIFICATE*/
.get_certificate {
display: grid;
justify-content: left;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr ;
gap: 1vw;
background-color: var(--card-color);
padding: 15px;
border-radius: 15px;
margin: auto;
width: 60%;
height: 70%;
}
.get_certificate > div > img {
width:25vw;
border-radius: 15px;
opacity: 50%;
}
.certificate {
padding: 15px;
border-radius: 15px;
margin: auto;
width: 90%;
position: relative;
overflow: hidden;
aspect-ratio: 3/4;
font-size: 2vw;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.certificate-image-1 {
height: 100px;
border-radius: 50%;
margin: 20px;
}
.certificate-image-2 {
height: 40vw;
aspect-ratio: 1/1;
border-radius: 50%;
opacity:0.1;
border: 10px solid var(--course-colour2);
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.credentials {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 0.8em;
text-align: center;
display: flex;
justify-content:space-evenly;
align-items: top;
flex-direction: row;
z-index: 10;
}
.outer-border {
border: 2px solid var(--course-colour1);
height: 99%;
width: 98%;
padding: 6px;
margin: 0 auto;
}
.mid-border {
border: 6px solid var(--course-colour1);
height: 100%;
width: 100%;
padding: 6px;
margin: auto;
}
.inner-border {
position: relative;
border: 2px solid var(--course-colour1);
height: 100%;
width: 100%;
margin: auto;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content:space-evenly;
}
.certificate-decoration {
width: 30%;
padding: 30vw;
position: absolute;
opacity: 0.3;
z-index: 0;
border-radius: 50%;
background-color: var(--course-colour2);
}
.certificate-decoration.top {
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
.certificate-decoration.bottom {
bottom:0;
right: 0;
transform: translate(50%, 50%);
}
.certificate-id {
position: absolute;
bottom: 0;
left:50%;
transform: translate(-50%, 0px);
}
/*PROFILE PAGE*//*PROFILE PAGE*//*PROFILE PAGE*//*PROFILE PAGE*//*PROFILE PAGE*//*PROFILE PAGE*//*PROFILE PAGE*/
.profile-page .dashboard-profile {
width:80%;
max-width:800px;
font-size: 0.9em;
position:relative;
height: 150px;
margin:auto;
margin-block:30px;
display: flex;
align-items: center;
justify-content: left;
}
.profile-page .dashboard-profile img {
height: 120px;
width: 120px;
border-radius: 50%;
position:relative;
z-index: 1;
}
.profile-page .dashboard-profile-list-container {
background-color: rgba(0, 0, 0, 0.534);
color: white;
z-index: 10;
padding: 5px;
border-radius: 5px;
width:70%;
transform: translate( -15px, 0);
position:relative;
}
.profile-page .dashboard-profile ul {
padding-left: 15px;
text-align: left;
list-style-type:none;
}
.profile-page .dashboard-profile li {
margin-bottom: 2px;
}
.profile-page .dashboard-profile ol {
padding-left: 20px;
text-align: left;
list-style-type:disc;
}
.profile {
display: grid;
justify-content: left;
grid-template-columns: 2fr 3fr;
gap: 60px;
background-color: var(--card-color);
padding: 15px;
border-radius: 15px;
width: 800px;
margin: auto;
border-top: 28px solid var(--secondary-color);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
@media screen and (max-width:800px) {
grid-template-columns: 1fr;
gap: 5px;
width: 90%;
}
}
.profile_1 {
display: grid;
justify-content: center;
gap:10px;
padding: 2px;
}
.profile_image_container {
position: relative;
}
.profile img {
width: 100%; /* Make the image responsive */
height: auto; /* Maintain aspect ratio */
border-radius: 50%;
margin:auto
}
#edit_profile_mobile {
display:none;
@media screen and (max-width:800px) {
display: flex;
align-items: center;
justify-content: left;
padding-left: 20px;
font-size: 1.2em;
cursor: pointer;
background-color: var(--tertiary-color);
border:none;
border-left: 8px solid var(--secondary-color);
line-height: 50%;
padding-block: 15px;
width: 90%;
}
}
#edit_profile {
display: flex;
align-items: center;
justify-content: center;
padding-left: 20px;
font-size: 1.2em;
cursor: pointer;
background-color: var(--tertiary-color);
border:none;
border-left: 8px solid var(--secondary-color);
line-height: 50%;
padding-block: 15px;
transition: all 0.3s ease;
@media screen and (max-width:800px) {
display: none;
}
}
#edit_profile:hover {
border-left: 16px solid var(--secondary-color);
transition: all 0.3s ease;
}
.profile_image_update {
display: grid;
justify-content: center;
font-size: 2em;
cursor: pointer;
background-color: var(--tertiary-color);
border-radius: 50%;
width: 60px;
height: 60px;
position: absolute;
bottom: 10px;
right: 10px;
border: 1px solid white;
}
.profile_image_update:hover {
border: 2px solid white;
}
.profile_details {
text-align: left;
}
.profile_details > label {
cursor: pointer;
}
.update_profile {
display: grid;
justify-content: center;
grid-template-columns: 1fr;
gap: 5px;
background-color: var(--card-color);
padding: 5px;
border-radius: 15px;
margin: auto;
width: 400px;
max-width: 100%;
@media screen and (max-width:800px) {
font-size: 0.9em;
}
}
.update_profile > div {
background-color: var(--tertiary-color);
padding: 15px;
}
.name_entry {
display: grid;
justify-content: left;
grid-template-columns: 1fr 1fr;
gap: 5px;
background-color: var(--card-color);
padding: 15px;
}
.changed {
background-color: #efdfdf;
font-weight: 600;
}
.required_field::after {
content: "*";
color: red;
}
.course_supervisor::after {
content: "*";
color: red;
}
.profile_page_attributes {
display: flex;
flex-direction: row-reverse;
transition: all 0.5s ease;
.profile-pic-add-initials {
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
margin-left: -10px;
z-index: 1;
border: 1px solid rgb(255, 255, 255);
font-size: 6px;
transition: all 0.3s ease;
img {
border:none;
background-color: transparent;
}
}
}
.profile_page_attributes:hover .profile-pic-add-initials {
margin-left:0px;
}
/*SESSION*/ /*SESSION*/ /*SESSION*/ /*SESSION*/ /*SESSION*/ /*SESSION*/
.topic_summary_header {
background-color: var(--card-color);
grid-column: 1 / 4;
text-align: center;
padding: 1vh;
border-radius: 8px 8px 0 0;
}
#quiz h3 {
background-color: var(--tertiary-color);
border-left: solid 8px var(--secondary-color);
text-align: left;
padding: 8px;
margin-block: 10px;
}
.topic_summary_content {
text-align: left;
padding: 1vh;
}
.session_presenters_container {
max-width: 500px;
margin: auto;
li {
list-style-type: none;
margin: 0;
padding: 0;
}
}
.session_image {
max-height: 500px;
margin: auto;
}
.topic_summary_buttons {
padding: 1vh;
}
.topic_content {
text-align: left;
padding:10px;
overflow-y: auto;
img {
max-width:95%;
object-fit: contain;
height: auto !important;
}
iframe {
max-width: 100%;
}
ul {
padding-left: 8px;
text-align: left;
margin-left: 0.5em;
margin-bottom: 20px;
margin-top: 5px;
}
li {
margin-bottom: 8px;
margin-left: 0.5em;
}
ol {
padding-left: 12px;
text-align: left;
margin-bottom: 16px;
margin-left: 0.5em;
}
p:has(strong) {
padding-top: 20px;
}
p:has(cite) {
padding-bottom: 20px;
font-size: 12px;
}
table {
max-width: 95% !important;
font-size: 10px;
}
div:has(table) {
overflow: auto;
max-width: 100% !important;
max-height: 80vh;
}
}
.topic_button {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
background-color: var(--tertiary-color);
border:none;
border-left: solid 8px var(--secondary-color);
text-align: left;
padding: 8px;
font-size: 0.8em;
margin-block: 10px;
}
.topic_button.inactive {
border-left: none;
}
.topic_summary > div > img {
width: 100%; /* Make the image responsive */
height: auto; /* Maintain aspect ratio */
}
.topic_summary > div > p {
font-size: 1em;
padding-left: 2vw;
margin: 0;
}
.topic_summary > div > h3 {
padding: 1vh;
margin: 0;
color: var(--primary-color);
}
.next_arrow {
position: fixed;
top: 40vh;
right: 0.5vw;
font-size: 10vh;
color: transparent;
text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.back_arrow {
position: fixed;
top: 40vh;
left: 0.5vw;
font-size: 10vh;
color: transparent;
text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.next_arrow:hover,
.back_arrow:hover {
color: black;
text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.home > a {
font-size: 3vh;
padding: 10px;
color: var(--primary-color);
text-decoration: none;
}
.presentation {
color: var(--primary-color);
text-decoration: none;
font-size: 2vw;
text-align: left;
background-color: whitesmoke;
border-radius: 15px;
padding:15px 50px;
margin: 60px auto;
}
.radio-option {
display: block;
padding-left: 15px;
position: relative;
margin-bottom: 5px;
}
.radio-option input[type="radio"] {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.radio-option span {
display: inline-block;
padding-left: 5px;
}
.disabled-link {
pointer-events: none;
cursor: default;
opacity: 0.5;
}
.attendance-selection-group {
display:flex;
align-items: center;
justify-content: right;
margin-inline: auto;
margin-bottom: 10px;
border-radius: 10px;
padding: 5px;
width: 234px;
gap:10px;
animation-duration: 400ms;
select, button {
border:none;
background-color:transparent;
font-size: 1em;
width: 190px;
padding: 0%;
}
button:hover {
cursor: pointer;
}
select:hover {
cursor: pointer;
}
}
.attendance-selection-group.loading {
scale:1.2;
}
.attendance-selection-group-small {
border-radius: 10px;
padding: 4px;
width: 140px;
gap:2px;
color:white;
background-color: blue;
form {
display: flex;
align-items: center;
justify-content: center;
padding: 0%;
}
select, button {
font-size: 12px;
width: 110px;
padding: 0%;
margin: 0;
color:white;
}
option {
color: black;
}
}
.small-label {
font-size: 0.8em;
text-align: left;
width: 234px;
}
.create-attendance {
background-color: var(--secondary-color);
}
.attending_group {
display:flex;
margin: auto;
max-width:300px ;
align-items: center;
justify-content: center;
margin-block: 10px;
.staff_profile_image_container {
position: relative;
width:25px;
height: 25px;
}
.profile-pic-add-initials {
width:25px;
}
.activity-indicator {
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
bottom: 25%;
right: 25%;
}
img {
width: 25px;
height: 25px;
border-radius: 50%;
}
}
/*PreReading*//*PreReading*//*PreReading*//*PreReading*//*PreReading*//*PreReading*/
.prereading-iframe {
width: 100%;
aspect-ratio: 1/1.4;
border: none;
}
.prereading-sbs {
align-items: start;
gap:0px;
background-color: rgb(244, 244, 244);
border-top: 8px solid var(--course-colour1);
padding: 0px;
justify-content: left;
.vertical-container {
padding: 0px !important;
width:20vw;
font-size: 12px;
}
.topic_button {
width: 100%;
padding-right: 15px;
}
.topic_button:hover {
cursor: pointer;
transform: scale(1.01);
}
.prereading-header {
text-align: left;
background-color: white;
width: 100%;
padding: 5px;
}
.prereading-container {
width:80vw;
}
}
.prereading-container.single-file {
border: #000 solid 1px;
background-color: white;
padding: 0px;
border-radius: 10px;
overflow: hidden;
margin:auto;
.prereading-header {
display:flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: var(--course-colour2);
img {
height: 20px;
width: 20px;
}
}
}
/*SUPERVISOR COURSE VIEW*//*SUPERVISOR COURSE VIEW*//*SUPERVISOR COURSE VIEW*/
.course-staff-view-table {
max-width: 98%;
margin: auto;
overflow: scroll;
}
.fixed-column {
position: sticky;
left: 0;
z-index: 1;
background-color: white;
box-shadow: 1px 0px 0.5px rgba(0, 0, 0, 0.3);
}
/*STAFF VIEW*//*STAFF VIEW*//*STAFF VIEW*//*STAFF VIEW*//*STAFF VIEW*//*STAFF VIEW*/
.vertical-header {
height: 120px;
background-color: var(--tertiary-color);
border-bottom: solid 8px var(--secondary-color);
margin: auto;
}
.topic-title {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
font-size: 1.2em;
padding: auto;
}
.sub-header {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.8em;
font-weight: 300;
width: 30px; /* Adjust as needed */
height: 50px; /* Adjust as needed */
line-height: 1; /* Adjust as needed */
white-space: nowrap;
padding: 6px 2px;
color:#888383;
background-color: var(--tertiary-color);
}
.final {
background-color: #fdfafa;
width: 3px;
margin: 0;
padding: 0;
}
.tickbox {
width: 20px;
margin: 0;
padding: 0;
}
.user_column {
display:flex;
align-items: center;
justify-content: left;
width: 200px;
gap: 10px;
overflow: hidden;
}
.user_row {
border-radius: 15px;
}
.user_row:nth-child(even) {
background-color: var(--tertiary-color);/* Your preferred color for even rows */
}
.user_row:nth-child(odd) {
background-color: #e6e6e6; /* Your preferred color for odd rows */
}
.supervisors {
background-color: #e6e6e6;
}
.requests {
background-color: #fc9e6057;
}
.small_profile {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 15px;
border-radius: 15px;
width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
background-color: var(--card-color);
position: relative;
overflow: hidden;
}
.small_profile:hover {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
}
.small_profile:before,
.small_profile:after {
content: '';
position: absolute;
width: 50%;
height: 100%;
background-color: var(--card-color);
z-index: -1;
}
.small_profile:before {
left: -25%;
transform: skew(25deg);
}
.small_profile:after {
right: -25%;
transform: skew(-25deg);
}
.small_profile > div {
text-align: left;
background-color: whitesmoke;
padding: 1vw;
border-radius: 10px;
}
.small_profile div p {
padding-left: 1vw;
}
.small_profile h2,
.small_profile h3 {
color: var(--primary-color);
}
.small_profile b {
color: var(--primary-color);
font-weight: 600;
}
.links {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: wheat;
padding: 15px;
border-radius: 15px;
width: 60%;
margin-block: 10px;
margin-inline: auto;
}
.links:hover {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
cursor: pointer;
}
.course_progress {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 70%;
margin:auto;
position: relative;
}
.course_progress button {
width: 100%;
text-align: center;
background-color: var(--tertiary-color);
border: none;
border-left: solid 8px var(--secondary-color);
padding: 8px;
font-size: 0.8em;
margin-block: 10px;
}
.course_progress button:hover {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
.course_progress table {
width: 95%;
border-collapse: collapse;
margin-bottom: 50px;
}
.course_progress table,
.course_progress th,
.course_progress td {
border: 1px solid #ccc;
}
.course_progress th,
.course_progress td {
padding: 10px 15px;
text-align: center;
}
.course_progress th {
background-color: #f5f5f5;
color: #333;
font-weight: bold;
}
.course_progress tr:nth-child(odd) {
background-color: #f9f9f9;
}
.topic_box > a,
.topic_box_2 > a,
.home > a,
.topic_q a,
.topic_link a {
text-decoration: none;
color:var(--primary-color);
}
.two-tables {
display:flex;
align-items: start;
justify-content: center;
flex-direction: row;
background:rgba(128, 128, 128, 0.226);
border-radius: 15px;
max-width: 600px;
margin: auto;
}
/* LOGBOOK *//* LOGBOOK *//* LOGBOOK *//* LOGBOOK *//* LOGBOOK *//* LOGBOOK *//* LOGBOOK *//* LOGBOOK */
.new_log_entry {
position: fixed; /* Fixed position relative to the viewport */
bottom: 80px; /* 20 pixels from the bottom */
right: 20px; /* 20 pixels from the right */
z-index: 1000; /* Ensure it's above other items */
}
.go_to_logbook {
display:grid;
justify-content: center;
align-items: center;
grid-template-columns: 1fr 2fr;
text-align: left;
gap:10px;
}
.logbook {
display: grid;
grid-template-columns: 1fr;
gap: 5px;
padding: 0px;
margin:auto;
width: 400px;
height: auto;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 3s ease;
background-color: var(--card-color);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.logbook_accordian_content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.8s;
}
.logbook_accordian_content.show {
grid-template-rows: 1fr;
}
.logbook_accordian_content > div {
overflow: hidden;
}
.logbook_header {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--icu-green);
color: rgb(231, 231, 231);
padding: 20px;
}
.categories_container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap:4px;
padding: 5px;
padding-top: 45px;;
transition: all 0.3s ease;
}
.procedures_box {
display: none;
transition: all 3s ease;
}
.procedures_container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap:4px;
padding: 5px;
transition: all 0.3s ease;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 90%;
margin:auto;
}
.logbook_form {
display: none;
}
.logbook_form_inputs {
display: grid;
grid-template-columns: 1fr;
gap: 5px;
padding: 5px;
margin:auto;
}
.logbook_form_inputs > label {
text-align: left;
font-size: 0.7em;
font-weight: 600;
}
.logbook-input-fields {
display: grid;
grid-template-columns: 1fr;
gap: 5px;
padding: 10px;
margin:auto;
margin-block:5px;
background-color: #ebebeb;
border-radius: 10px;
border: 1px solid #ccc;
align-items: start;
}
.findings {
tr {
display: grid;
gap:5px;
grid-template-columns: 1fr 3fr;
text-align: justify;
font-size:14px;
}
li {
list-style-type: none;
font-size: 12px;
text-align: left;
}
}
.logbook-input-fields > label {
text-align: left;
font-size: 0.7em;
font-weight: 600;
max-height: 30px;
}
.logbook-input-fields > select, textarea, input[type="date"], input[type="time"] {
background-color: whitesmoke;
padding: 10px;
font-size: 1rem;
border:none;
border-radius:5px;
font-family: Arial, Helvetica, sans-serif;
}
.logbook-features > select {
background-color: whitesmoke;
padding: 10px;
font-size: 1rem;
border:inset;
border-radius:12px;
font-family: Arial, Helvetica, sans-serif;
height:300px;
margin-block:12px;
}
.logbook-input-field-title {
text-align: left;
font-size: 0.7em;
font-weight: 600;
}
.side_choice {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap:4px;
padding: 5px;
}
.radio {
display:none;
}
.radio_label {
background-color: var(--icu-green-light);
padding: 10px;
border-radius: 10px;
margin-inline: 5px;
margin-bottom: 0;
width: 100px;
}
.radio_label:hover {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
cursor: pointer;
}
#male:checked ~ .male,
#female:checked ~ .female,
#left:checked ~ .left,
#right:checked ~ .right
{
background-color: var(--icu-green);
color: white;
}
.logbook_selection_container {
background-color: var(--icu-green-light);
padding: 10px;
border-radius: 10px;
margin-inline: 5px;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.8s;
}
.logbook_selection_container.show {
grid-template-rows: 1fr;
}
.logbook_selection_container > div {
overflow: hidden;
}
.procedure-attributes {
display: grid;
grid-template-columns: auto 50px;
gap: 5px;
font-size: 0.7em;
text-align: left;
}
.patient_profile {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 5px;
}
.picker {
position: relative;
padding: 5px;
border-radius: 24px;
box-sizing: border-box;
display: grid;
grid-template-areas:
"left age right"
"slider slider slider";
/* grid-template-columns: 30px 1fr 30px;
grid-template-rows: 1fr 60px; */
}
/* ====== central numeric input ====== */
#age-input {
grid-area: age;
width: 100%;
height: 100%;
font-size: 2.5rem;
text-align: center;
border: none;
background: transparent;
outline: none;
}
#year-of-birth {
grid-area: year-of-birth;
width: 100%;
height: 100%;
font-size: 1.5rem;
text-align: center;
border: none;
background: transparent;
outline: none;
}
/* Chrome, Safari, Edge, Opera */
#age-input::-webkit-outer-spin-button,
#age-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
#age-input[type=number], #year-of-birth[type=number] {
-moz-appearance: textfield;
}
/* The track */
#slider {
-webkit-appearance: none;
width: 100%;
height: 36px;
border-radius: 20px;
background: #ddd;
cursor: pointer;
grid-area: slider;
}
#slider::-moz-range-track {
width: 100%;
cursor: pointer;
background: #ddd;
}
/* The thumb */
#slider::-moz-range-thumb {
width: 12px;
height: 30px;
background: var(--icu-green);
cursor: pointer;
}
.btn-age {
width:40px;
height:36px;
border:5px solid transparent;
color:white;
}
#btn-left {
grid-area: left;
}
#btn-right {
grid-area: right;
}
.sex_choice {
display:grid;
grid-template-rows: 1fr 1fr;
gap: 15px;
padding-top: 15px;
}
.not_on_list {
font-style: italic;
background-color: var(--icu-green-light);
}
/*MY LOGBOOK*//*MY LOGBOOK*//*MY LOGBOOK*//*MY LOGBOOK*//*MY LOGBOOK*//*MY LOGBOOK*//*MY LOGBOOK*//*MY LOGBOOK*/
.my_logbook_page {
--theme-color:var(--icu-green-light);
max-width: 1000px;
margin: auto;
}
.my_logbook_page .procedure-progress-container {
width: 100%;
gap: 20px;
}
.procedures.dashboard-course-container {
grid-auto-columns: 22%;
}
.my_logbook_page .dashboard-profile {
width:150px;
}
.my_logbook_page .dashboard-profile img {
height: 125px;
width: 125px;
border-radius: 10px;
object-fit: contain;
}
.my_logbook_page .dashboard-profile-list-container {
font-size: 1em;
}
.my_logbook_page .dashboard-profile ul {
padding-left: 2px;
text-align: left;
list-style-type:none;
}
.my_logbook_page .dashboard-profile li {
margin-bottom: 2px;
}
.my_logbook_page .dashboard-profile ol {
padding-left: 12px;
text-align: left;
list-style-type:disc;
}
.profile_page_content.content-logbook {
justify-content: center;
}
.table_small_list {
font-size: 0.7em;
}
.entry_row {
cursor: pointer;
}
.entry_row:hover {
background-color: rgba(1, 75, 1, 0.11) !important;
}
.procedure_card_dialog {
width: 90%;
border: none;
background-color: transparent;
max-width: 800px;
& .procedure_card {
width: 100%;
margin-block: 0;
}
}
.procedure_card_close {
position:absolute;
top: 10px;
right: 10px;
border: solid 1px black;
border-radius: 50%;
width: 25px;
height: 25px;
}
.procedure_card_close:hover {
cursor: pointer;
}
.procedure_card {
display:flex;
flex-direction: row;
gap: 5px;
flex-wrap: wrap;
justify-content: center;
background-color: rgb(241, 241, 241);
width: 95%;
max-width: 800px;
margin: auto;
margin-block:5px ;
border-radius: 10px;
padding-bottom: 10px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
& ul {
padding-left: 2px;
text-align: left;
list-style-type:circle;
margin-block: 2px;
margin-left: 0;
}
& li {
margin-bottom: 2px;
margin-left: 1.5em;
}
& img {
max-width: 200px;
}
& div {
padding: 10px;
border-radius: 10px;
text-align: left;
font-size: 14px;
}
}
.procedure_card_header {
display: flex;
background-color: var(--icu-green) !important;
color: white;
padding: 15px;
border-radius: 10px 10px 0 0 !important;
text-align: center;
width: 100%;
height: 100px;
gap: 10px;
align-items: center;
& img {
width: 60px;
height: 60px;
object-fit: fit;
}
}
.procedure_card_body {
width: 45%;
background-color: rgba(208, 207, 207, 0.16);
& img {
width: 80%;
aspect-ratio: 1/1;
border-radius: 10px;
object-fit: cover;
}
}
.procedure_card_body.card-with-image {
background-color: transparent;
display:flex;
align-items: center;
justify-content: center;
}
.procedure_card_comments {
width:100%;
display: flex;
flex-direction: column;
justify-content: center;
& div {
padding: 10px;
border-radius: 10px;
text-align: center;
font-size: 14px;
}
}
.supervisor_review {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 0px;
margin:auto;
}
.review_status {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
transform: rotate(-10deg);
font-weight: 300;
font-size: 0.9em;
opacity: 0.5;
}
.supervisor_review .review_status {
transform: translateY(-10%) rotate(-10deg);
}
.supervisor_buttons {
display: grid;
grid-template-rows: 3fr 1fr;
gap: 10px;
padding: 0px;
margin:auto;
width: 200px;
}
.logbook_entry_review_action_container {
display:flex;
justify-content: center;
gap: 10px;
button {
height:50px;
width: 50px;
}
}
#approve_button {
background-color: var(--icu-green);
color: white;
border-radius: 10px;
border: none;
padding: 10px;
font-size: 1em;
margin-block: 2px;
cursor: pointer;
}
#reject_button {
background-color: rgb(172, 7, 7);
color: white;
border-radius: 10px;
border: none;
padding: 10px;
font-size: 1em;
margin-block: 2px;
cursor: pointer;
}
#approve_button:hover, #reject_button:hover {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
.expandable {
display:grid;
grid-template-rows: auto 0fr;
transition: grid-template-rows 500ms;
}
.expandable > div {
overflow: hidden;
}
.expandable:hover {
grid-template-rows: auto 1fr;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.expandable:active {
grid-template-rows: auto 1fr;
}
.expandable.show {
grid-template-rows: auto 1fr;
}
.expandable .expand-sign.less {
display: none;
}
.expandable.show .expand-sign.more {
display: none;
}
.expandable.show .expand-sign.less {
display: block;
}
.modules {
display:flex;
flex-wrap: wrap;
gap: 10px;
}
.theory_modules {
max-width: 600px;
margin: auto;
border-radius: 10px;
background-color: #eeeeee71;
padding-top: 15px;
}
.theory_modules_buttons {
display: flex;
justify-content: center;
gap: 10px;
margin: 15px;
}
.completed_modules {
display:flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
width: 60%;
margin-inline: auto;
margin-block: 20px;
border-radius: 10px;
padding: 20px;
}
.module-card {
display: grid;
grid-template-columns: 100px 100px;
background-color: white;
border-radius: 10px;
gap:10px;
border: solid 2px #ccc ;
overflow: hidden;
font-size: 0.9em;
}
.module-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.module-card-text {
text-align: left;
padding: 5px;
}
.completed-module-background {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
background-color: var(--course-colour2);
border: 1px double var(--course-colour1);
margin:auto;
}
.completed-module-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
border-radius: 50%;
object-fit: cover;
}
.link_to_review_page {
font-size: 0.8em;
}
/*WORD GAME*//*WORD GAME*//*WORD GAME*//*WORD GAME*//*WORD GAME*//*WORD GAME*//*WORD GAME*/
.letters_container {
width: 300px;
margin: auto;
margin-block: 20px;
display:grid;
grid-template-columns: repeat(3, auto);
gap:10px;
.btn-letter {
width: 90px;
aspect-ratio: 1/1;
font-size: 2em;
}
.btn:disabled {
background-color: #ebe1e1;
cursor: not-allowed;
}
}
.show_word_attempt {
width: 300px;
margin: auto;
font-size: 3em;
line-height: 1em;
text-align: center;
height: 50px;
letter-spacing:3px ;
background-color: #eaeaea;
border-radius: 10px;
margin-bottom: 10px;
}
.solved_by_group {
display:flex;
margin: auto;
max-width:300px ;
align-items: center;
justify-content: center;
margin-block: 10px;
.profile_picture {
width:25px;
}
}
.hover-name[tooltip]:hover::after {
content: attr(tooltip);
position: absolute;
background: #000;
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 12px;
margin-top: 10px;
margin-left: 10px;
z-index: 10;
}
/*SUPERVISOR EDIT COURSE VIEW*//*SUPERVISOR EDIT COURSE VIEW*//*SUPERVISOR EDIT COURSE VIEW*//*SUPERVISOR EDIT COURSE VIEW*/
.edit-sessions-table {
width: 95%;
overflow: hidden;
border: none;
td {
max-width: 150px;
.form-control {
max-width: 100%;
padding:2px;
margin: 0;
min-height: 30px;
max-height: 100%;
border-radius: 3px;
font-size: 12px;
option {
padding: 0;
font-size: 11px;
}
}
input[type="file"] {
padding: 0;
font-size: 9px;
min-height: 0;
max-width: 80px;
}
img {
max-width: 100px;
}
select {
height: 120px;
}
.dropdown {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
font-size: 12px;
height: 30px;
}
}
thead {
background-color: var(--course-colour1);
color: var(--course-colour2);
border-bottom: solid 8px black;
height:40px;
font-size: 12px;
}
th {
padding: 5px;
width: fit-content;
max-width: 200px;
}
tr {
td {
padding: 5px;
}
}
}
/*PHONEBOOK*//*PHONEBOOK*//*PHONEBOOK*//*PHONEBOOK*//*PHONEBOOK*//*PHONEBOOK*//*PHONEBOOK*//*PHONEBOOK*/
.phone-contact-form {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 5px;
background-color: rgb(188, 207, 188);
border-radius: 10px;
.form-group {
width:50%;
min-width:200px;
label {
font-size: 0.8em;
text-align: left;
}
select, input {
min-width: 90%;
padding: 5px;
margin: auto;
font-size: 12px;
}
}
}
.phonebook-table {
width: 100%;
border-collapse: collapse;
margin: auto;
margin-block: 20px;
font-size:12px;
th {
background-color: var(--course-colour1);
color: white;
border-bottom: solid 8px black;
height:40px;
font-size: 12px;
}
th, td {
padding: 5px;
text-align: left;
}
tr {
td {
padding: 5px;
}
}
}
/*MEDIA QUERIES*//*MEDIA QUERIES*//*MEDIA QUERIES*//*MEDIA QUERIES*//*MEDIA QUERIES*//*MEDIA QUERIES*//*MEDIA QUERIES*/
@media screen and (max-width: 1400px) {
.topic_summary {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"header header"
"image buttons"
"topic_summary_content topic_summary_content"
"topic_content topic_content"
;
gap: 2px;
padding: 1px;
width: 100%;
}
.topic_summary_header {
grid-area: header;
}
.topic_summary_image {
grid-area: image;
}
.topic_summary_buttons {
grid-area: buttons;
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
width: 100%;
margin: auto;
padding: 5px;
gap: 4px;
}
.topic_button {
background-color: var(--tertiary-color);
border-left: solid 8px var(--secondary-color);
text-align: left;
padding: 8px;
font-size: 0.8em;
margin: 0;
}
.topic_button:hover {
background-color: #ebe1e1;
}
.topic_summary_content {
grid-area: topic_summary_content;
}
.topic_content {
grid-area: topic_content;
}
.topic_q a,
.topic_q h4,
.topic_q a:hover {
color: var(--primary-color);
text-decoration: none;
font-size: 0.9em;
overflow: hidden;
display: inline-grid;
grid-template-columns: auto auto;
margin:5px;
justify-content: center;
}
.course_table {
width: 100%;
border: none;
}
.vertical-header {
height: 120px;
background-color: var(--tertiary-color);
border-bottom: solid 8px var(--secondary-color);
margin: auto;
}
.user_column {
width: 110px;
}
.table-week {
display: none;
}
.topic-title {
font-size: 1em;
}
.sub-header_row {
display: none;
}
.tickbox {
font-size: 0.5em;
padding: 2px 0px;
width: 10px;
}
}
/* Add a media query for smaller devices */
@media screen and (max-width: 400px) {
.user_name {
font-size: 0.9em;
}
.topic_box_2 {
height: 270px;
}
.topic_box_2 > a > div > p {
display: none;
}
.topic_box_2 > a > img {
width: 100%;
height: auto;
}
.topic_box > div > img {
width: 100%;
height: auto;
}
.profile img {
width: 80%;
height: auto;
}
.course_progress {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
margin:auto;
background-color: var(--card-color);
}
.presentation {
font-size: 4vh;
padding: 15px;
}
.topic_quiz {
width: 150px;
background-color:var(--background-color);
padding: 5px;
border-radius: 15px;
margin: 5px auto;
}
.scenario_form {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
width: 100vw;
margin: auto;
padding: 10px;
background-color: var(--card-color);
border-radius: 15px;
}
.scenario_form > div {
max-width: 95vw;
margin: auto;
min-width: 90vw;
}
.user_name {
display:none;
}
.mcq {
width: 100%;
margin: auto;
border: none;
padding: 40px;
}
.mcq_answers {
background-color: #eeeded;
}
.mcq_answer {
padding: 5px;
font-size: 0.8em;
}
}
@media screen and (max-width: 500px) {
.welcome {
font-size: 1em;
font-family: 'Caveat', cursive;
}
.logbook {
width: 100%;
}
.user_name {
display:none;
}
.logbook-input-fields {
width: 100%;
}
.left, .right {
width: 30%;
}
.resources {
width: 80vw;
}
.resources img {
width: 80vw;
}
}
.centered {
margin: auto !important;
}
/*Flat override rules*//*Flat override rules*//*Flat override rules*//*Flat override rules*//*Flat override rules*//*Flat override rules*/
.roster_container .table .profile_picture_container .profile_picture {
width: 60px !important;
height: 60px !important;
}