/* Attention (Σημαντική πληροφορία) */
.c4l-attention,
.c4lv-attention {
min-width: 200px;
max-width: 99%;
background-color: #fef6ed;
padding: 24px 48px 30px 36px;
border: none;
border-left: 6px solid #f88923;
margin: 36px auto;
position: relative;
border-radius: 0;
}
.c4l-attention p:last-of-type,
.c4lv-attention p:last-of-type {
margin-bottom: 0;
}
.c4l-attention::after,
.c4lv-attention::after {
content: url("data:image/svg+xml;charset=UTF-8,");
position: absolute;
top: 6px;
right: -3px;
}
/* Tip (Το ήξερες ότι) */
.c4l-tip,
.c4lv-tip {
min-width: 200px;
max-width: 99%;
background-color: #fbeffa;
padding: 24px 48px 30px 36px;
border: none;
border-left: 6px solid #b00ca9;
margin: 36px auto;
position: relative;
border-radius: 0;
}
.c4l-tip p:last-of-type,
.c4lv-tip p:last-of-type {
margin-bottom: 0;
}
.c4l-tip::after,
.c4lv-tip::after {
content: url("data:image/svg+xml;charset=UTF-8,");
position: absolute;
top: 6px;
right: -3px;
}
/* Reminder (Επανάληψη) */
.c4l-reminder,
.c4lv-reminder {
min-width: 200px;
max-width: 99%;
background-color: #eff8fd;
padding: 24px 48px 30px 36px;
border: none;
border-left: 6px solid #16b9ff;
margin: 36px auto;
position: relative;
border-radius: 0;
}
.c4l-reminder p:last-of-type,
.c4lv-reminder p:last-of-type {
margin-bottom: 0;
}
.c4l-reminder::after,
.c4lv-reminder::after {
content: url("data:image/svg+xml;charset=UTF-8,");
position: absolute;
top: 6px;
right: -3px;
}
/* Ask help (Πότε να ζητήσετε βοήθεια) */
.c4l-askhelp,
.c4lv-askhelp {
min-width: 200px;
max-width: 99%;
background-color: #e4edd9;
padding: 24px 48px 30px 36px;
border: none;
border-left: 6px solid #42bf31;
margin: 36px auto;
position: relative;
border-radius: 0;
}
.c4l-askhelp p:last-of-type,
.c4lv-askhelp p:last-of-type {
margin-bottom: 0;
}
.c4l-askhelp::after,
.c4lv-askhelp::after {
content: url("data:image/svg+xml;charset=UTF-8,");
position: absolute;
top: 6px;
right: -3px;
}
/* Example (Παραδείγματα) */
.c4l-example,
.c4lv-example {
min-width: 200px;
max-width: 99%;
background-color: #FFF7DB;
padding: 24px 48px 30px 36px;
border: none;
border-left: 6px solid #ffc800;
margin: 36px auto;
position: relative;
border-radius: 0;
}
.c4l-example p:last-of-type,
.c4lv-example p:last-of-type {
margin-bottom: 0;
}
.c4l-example::after,
.c4lv-example::after {
content: url("data:image/svg+xml;charset=UTF-8,");
position: absolute;
top: 6px;
right: -3px;
}
/* Learning Outcomes (Μαθησιακά αποτελέσματα) */
.c4l-learningoutcomes,
.c4lv-learningoutcomes {
min-width: 200px;
max-width: 99%;
background-color: #f2f5fd;
padding: 24px 48px 30px 36px;
border: none;
margin: 36px auto;
position: relative;
border-radius: 0;
}
.c4l-learningoutcomes p:last-of-type,
.c4lv-learningoutcomes p:last-of-type {
margin-bottom: 0;
}
.c4l-learningoutcomes .c4l-learningoutcomes-title,
.c4lv-learningoutcomes .c4l-learningoutcomes-title {
position: relative;
top: -11px;
left: -39px;
padding: 6px 14px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.7px;
color: #fff !important;
background-color: #1748CF;
font-family: inherit;
display: inline-block;
margin-top: 0;
filter: drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 0.07));
}
.c4l-learningoutcomes .c4l-learningoutcomes-list,
.c4lv-learningoutcomes .c4l-learningoutcomes-list {
margin-top: 18px;
margin-bottom: 18px;
padding-left: 32px;
}
.c4l-learningoutcomes .c4l-learningoutcomes-list>li,
.c4lv-learningoutcomes .c4l-learningoutcomes-list>li {
position: relative;
}
.c4l-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child),
.c4lv-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child) {
margin-bottom: 21px;
}
.c4l-learningoutcomes .c4l-learningoutcomes-list li::before,
.c4lv-learningoutcomes .c4l-learningoutcomes-list li::before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIxMSIgdmlld0JveD0iMCAwIDkgMTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMTFWMEw5IDUuNS4wIDExeiIgZmlsbD0iIzQ5N2FlOSIvPjwvc3ZnPg==");
background-size: 9px 11px;
display: inline-block;
width: 9px;
height: 11px;
content: "";
justify-self: center;
position: absolute;
left: -32px;
top: 7px;
}
.c4l-learningoutcomes .c4l-learningoutcomes-list li::marker,
.c4lv-learningoutcomes .c4l-learningoutcomes-list li::marker {
color: transparent;
}
/* Ordered List Variant */
.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list {
counter-reset: section;
}
.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list li::before {
background-image: none;
position: absolute;
left: -32px;
top: 0;
counter-increment: section;
content: counter(section) ". ";
font-weight: 700;
color: #497ae9;
}
/* Figure */
.c4l-figure,
.c4lv-figure {
min-width: 200px;
margin: 48px auto;
}
.c4l-figure img,
.c4lv-figure img {
width: 100%;
max-height: 640px;
/* Set maximum height */
object-fit: contain;
/* Maintains aspect ratio */
}
.c4l-figure figcaption,
.c4lv-figure figcaption {
font-size: 16px;
color: #525760;
margin-top: 7px;
}
.c4l-figure {
max-width: 100%;
}
.c4lv-figure {
max-width: 75%;
}