:root {
/* Warna Utama */
--primary-purple: #694a9d;
--secondary-purple: #7d5faf;
--bg-light: #f1e9ff;
--primary-dark: #5e428d;
--primary-muted: #896fb6;
--primary-bright: #9777cd;
--primary-accent: #a1a5ff;
--primary-soft: #ba9fe7;
--primary-deep: #54328c;
--primary-pale: #ded1f4;
}
/* Font Face */
@font-face {
font-family: 'Fugaz One';
src: url('../fonts/FugazOne-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('../fonts/PlusJakartaSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('../fonts/PlusJakartaSans-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('../fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('../fonts/PlusJakartaSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('../fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal
}
body {
background: var(--bg-light);
}
/* GLOBAL CSS BY RIO ILHAM HADI */
.form-label,
.navbar .nav-item a {
font-size: 15px;
font-weight: 500;
border-radius: 10px;
border-bottom: 2px solid transparent
}
body {
font-family: 'Plus Jakarta Sans', Arial, sans-serif
}
img {
image-rendering: crisp-edges
}
.hidden,
span.ck-file-dialog-button {
display: none !important
}
.alert p {
margin: 0
}
.container-small {
max-width: 900px;
margin: 0 auto
}
.navbar .container {
position: relative
}
.navbar .nav-item a {
padding: 8px 14px !important;
display: block
}
nav.navbar {
padding: 20px
}
#navbarSupportedContent {
position: absolute;
right: 0
}
.alert.alert-information {
background: #dbedff;
color: #053153;
font-size: 15.5px
}
.navbar .dropdown i.bi {
background: #eee;
color: #555;
padding: 5px 8px;
border-radius: 100%
}
.nav-item a img {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 100%;
margin: 0 5px 0 0
}
.badge.bg-primary {
font-weight: 500;
font-size: 14px;
padding: 12px 20px;
margin: 0 5px;
background: #efefef !important;
color: #222
}
.list-group-item {
border: none;
border-bottom: 1px solid #ddd;
border-radius: 0 !important
}
.list-group-item:last-child {
border-bottom: 0
}
.ck.ck-content {
min-height: 200px
}
a.nav-link:hover,
#navbar-navigation li.active a.nav-link {
background: #f8f9fa;
border-bottom: 2px solid #FFC107
}
.form-group input,
.form-group select,
.form-group textarea,
input.form-control,
select.form-control,
textarea.form-control {
background: #f4f5f9;
border: none;
border-radius: 15px;
padding: 10px 15px
}
.fugaz-font,
.fugaz,
.newfont {
font-family: 'Fugaz One', Arial, sans-serif
}
.myquest-mission::-webkit-scrollbar,
.scroll-container::-webkit-scrollbar,
#profile-box .matpel-style::-webkit-scrollbar {
width: 10px
}
.myquest-mission::-webkit-scrollbar-track,
.scroll-container::-webkit-scrollbar-track,
#profile-box .matpel-style::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #fff
}
.myquest-mission::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-thumb,
#profile-box .matpel-style::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid transparent;
background-clip: content-box;
background-color: var(--secondary-purple)
}
.profil-komentar img.guild-house,
img.guild-house {
width: 25px;
height: 25px;
transform: translateY(-3px);
margin: 0 0 0 5px;
border-radius: 5px
}
.onegrid {
grid-column: 1 / -1
}
body.bg-game {
background-image: url(/images/vector-game.svg);
background-size: cover;
background-position: bottom;
background-attachment: fixed
}
/* HALAMAN KELAS */
.card-shadow,
.card.kelas-card,
.create-kelas {
box-shadow: 0 5px 10px 4px rgb(95 112 146 / 8%)
}
.kelas-card a {
color: #333;
text-decoration: none
}
.kelas-card form {
margin: 0;
display: inline-block
}
.kelas-card .btn {
color: #fff;
padding: 7px 12px
}
.kelas-card .btn:hover {
opacity: .85
}
.kelas-card {
transition: .2s ease-in-out
}
.card.kelas-card {
border: none;
padding: 10px;
box-sizing: border-box;
transform: scale(.95)
}
.card.kelas-card:hover {
transform: scale(.97)
}
.header-content {
margin: 0 0 22px
}
.header-content h2 {
font-family: 'Fugaz One', Arial, sans-serif;
text-transform: uppercase;
font-size: 22px;
margin: 10px 0
}
.kelas-card img {
background: #eee;
transform: scale(.92);
border-radius: 10px;
height: 170px;
object-fit: cover;
page-break-after: always
}
.card-shadow,
.create-kelas {
padding: 20px;
border: none
}
.create-kelas button.btn {
padding: 10px 25px
}
.btn-green,
.btn-green:hover,
.btn-green:disabled {
background: var(--primary-purple);
color: #fff
}
.btn-purple,
.btn-purple:hover {
background: #6c5ce7;
color: #fff
}
.btn-blue,
.btn-blue:hover {
background: #2196F3;
color: #fff
}
.btn-orange,
.btn-orange:hover {
background: #ff9e4e;
color: #fff
}
.btn-red,
.btn-red:hover {
background: #d63031;
color: #fff
}
.btn-pink,
.btn-pink:hover {
background: #e84393;
color: #fff
}
.kelas-card p.card-text {
font-size: 14px
}
.kelas-card p.nama-guru i {
margin: 0 5px 0 0
}
.kelas-card p.nama-guru {
font-size: 14px;
background: #f5f7f8;
padding: 5px 15px;
border-radius: 10px
}
.kelas-card h5.card-title {
font-weight: 600
}
a.big-plus-button {
background: var(--bg-light);
display: block;
padding: 10px;
font-size: 40px;
text-align: center;
color: var(--primary-purple);
border-radius: 15px;
border: 5px dotted
}
.send-project-button {
background: var(--bg-light);
display: block;
padding: 10px;
font-size: 40px;
text-align: center;
color: var(--primary-purple);
border-radius: 15px;
border: 5px dotted
}
/* FORUM KELAS */
#forum-kelas {
margin: 30px 0
}
.header-kelas {
background: #eee;
position: relative;
border-radius: 10px;
overflow: hidden
}
.header-kelas img {
background: #eee;
width: 100%;
height: 300px;
object-fit: cover
}
.header-title {
position: absolute;
bottom: 20px;
left: 40px;
color: #fff;
text-shadow: 0 1px 3px rgb(55 55 55), 0 1px 2px rgb(0 0 0 / 30%)
}
.header-kelas:before {
background: linear-gradient(rgba(32, 33, 36, 0) 30%, rgba(32, 33, 36, .8));
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
.header-button {
position: absolute;
top: 10px;
right: 10px
}
.header-button form {
display: inline-block
}
/* HALAMAN PROFILE */
.profile-image {
min-width: 150px;
min-height: 150px;
max-width: 150px;
max-height: 150px;
object-fit: cover;
border-radius: 100%;
background: #fff;
padding: 10px;
margin: 0 0 20px
}
.content-learning,
ul.list-tugas li.link-tugas {
background: #f4f5f9;
border-radius: 15px;
overflow: hidden
}
#profile-box .card-body {
position: relative;
text-align: center;
margin: -100px 0 0
}
#profile-box .card-img-top {
background: #eee;
height: 220px;
object-fit: cover;
border-top-left-radius: 20px;
border-top-right-radius: 20px
}
#profile-box h5.card-title,
.tugas-details h2 {
font-weight: 700
}
.gender-style label {
display: block
}
a.btn-style {
text-decoration: none;
font-weight: 600;
color: #222;
font-size: 30px;
box-shadow: 0 1px 5px 2px rgb(130 140 159 / 16%);
margin: 0 20px 0 0;
width: 60px;
height: 60px;
line-height: 60px;
display: inline-block;
text-align: center;
border-radius: 5px;
transition: .2s ease-in-out
}
a.btn-style:hover {
transform: scale(1.1)
}
.btn-style span {
font-size: 13px;
margin: -10px 0 0;
display: block
}
.btn-style.male i {
color: #65aedf
}
.btn-style.female i {
color: #f36992
}
.btn-style.male.active {
background: #65aedf
}
.btn-style.female.active {
background: #f36992
}
.btn-style.female.active i,
.btn-style.male.active i,
ul.list-tugas i {
color: #fff
}
ul.list-tugas {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column-reverse
}
ul.list-tugas span.deadline {
font-size: 12px;
opacity: .7;
float: right;
padding: 5px 15px;
margin: 0 10px;
border-radius: 10px
}
ul.list-tugas li.link-tugas a {
text-decoration: none;
color: #222;
float: left;
max-width: 85%;
display: flex;
align-items: center
}
ul.list-tugas li.link-tugas {
position: relative;
padding: 20px;
display: block;
margin: 0 0 20px
}
ul.list-tugas .box-flex i {
font-size: 22px;
float: left;
margin: 0 10px 0 0;
background: var(--primary-purple);
color: #fff;
min-width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 10px
}
.kirim-tugas,
.link-tugas form {
float: right
}
.link-tugas form a {
margin: 0 5px
}
.link-tugas a b {
max-width: 100%
}
.content-learning {
background: #f4f5f9;
white-space: pre-wrap;
padding: 25px;
margin: 20px 0;
color: #111;
line-height: 2
}
.content-learning blockquote p {
margin: 0
}
.content-learning blockquote {
border-left: 4px solid #ddd;
padding: 10px
}
.start-learning span.deadline,
.start-learning span.posted {
font-size: 14px;
padding: 8px 20px;
margin: 0 10px 0 0;
display: inline-block;
border-radius: 8px;
font-weight: 600
}
.header-learning {
margin: 0 15px;
overflow: hidden
}
.start-learning span.posted {
border: 2px solid var(--primary-purple);
background: #fff;
color: var(--primary-purple)
}
.start-learning span.deadline {
background: #fff;
color: #d63031;
border: 2px solid #d63031
}
.content-learning.box-modul {
white-space: inherit
}
.box-modul a {
background: #fff;
color: var(--primary-purple);
border: 1px solid #ddd;
padding: 20px;
display: inline-block;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
text-align: center
}
.box-modul a i {
display: block;
font-size: 30px
}
ul.nilai-page li.link-tugas a {
float: none;
max-width: 100%
}
li.topic span {
font-weight: 700;
padding: 5px 10px;
margin: 10px 0 20px;
border-left: 5px solid var(--primary-purple);
display: block;
background: #f8f9fa;
border-radius: 5px
}
.link-tugas span.box-flex {
display: flex;
align-items: center
}
.header-fugaz h2 span {
font-size: 15px;
display: block
}
#profile-box h5.card-title {
font-family: 'Fugaz One', sans-serif;
text-transform: uppercase;
font-weight: 500
}
#profile-box {
border-radius: 20px
}
#profile-box span.round-level {
display: inline-block;
background: linear-gradient(to right bottom, #ffc107, #ff5722);
border: 3px solid #fff;
font-size: 17px;
width: 40px;
height: 40px;
line-height: 34px;
color: #fff;
border-radius: 100%;
position: absolute;
top: 120px;
transform: translateX(20px)
}
.profile-content li.topic span {
font-family: 'Fugaz One', sans-serif;
text-transform: uppercase
}
.myactivity .box-post img {
height: 170px;
object-fit: cover;
background: #111;
margin: 15px 0 0
}
.profile-content .bagian-tengah {
z-index: 1;
margin: 20px 0 50px;
height: auto;
position: sticky;
top: 0
}
a.edit-profile {
background: #fff;
color: #222;
padding: 8px 12px;
border-radius: 10px;
position: absolute;
right: 10px;
top: 50px
}
.send-gift-gcoin input {
padding: 8px 12px;
border-radius: 10px;
border: none;
font-size: 15px;
width: 100px;
font-weight: 700;
float: left;
margin: 0 5px 0 0
}
.send-gift-gcoin {
position: absolute;
right: 10px;
top: 50px
}
.send-gift-gcoin button.btn {
background: #ff9d4f;
color: #fff;
padding: 8px 12px;
border-radius: 10px;
font-size: 14px;
font-weight: 500
}
#profile-box .matpel-style {
overflow: hidden;
overflow-y: scroll;
max-height: 500px;
border-radius: 20px
}
#profile-box .matpel-content {
min-width: 150px
}
#profile-box .matpel-col {
justify-content: start;
display: grid;
grid-template-columns: 1fr 1fr 1fr
}
.location-profile {
border-radius: 20px
}
#exp-level {
background: #FFF1BF;
margin: 0 0 25px;
border-radius: 20px;
padding: 20px
}
#exp-level h2 {
font-size: 20px;
font-family: 'Fugaz One', sans-serif;
text-transform: uppercase;
margin: 0 0 10px
}
#exp-level .progress {
height: 30px;
background: #fff;
border-radius: 25px
}
.exp-level-footer {
display: flex;
justify-content: space-between;
font-size: 14px;
margin: 10px 0 0;
font-weight: 500
}
.profile-grid-left {
min-width: 240px
}
.profile-grid-right {
width: 100%;
overflow: hidden
}
#profile-box p.card-text {
font-size: 14px
}
#exp-level .progress-bar {
border-radius: 20px
}
.matpel-col.with-border {
border: 2px solid var(--primary-purple)
}
/* KOMENTAR FORUM */
.komentar-kelas {
overflow: hidden;
padding: 15px;
margin: 5px 0;
border-radius: 15px;
position: relative;
background: #f4f5f9;
}
.profil-komentar {
position: relative;
margin: 5px 5px 15px;
display: flex;
align-items: center
}
.profil-komentar img {
width: 35px;
height: 35px;
border-radius: 100%;
object-fit: cover;
margin: 0 10px 0 0
}
.profil-komentar span.nama-profil {
font-weight: 600;
margin: 0 1px 0 0
}
.isi-komentar {
line-height: 1.5em;
background: #fff;
padding: 15px;
color: #444;
border-radius: 10px;
font-size: 15px;
}
#comments h3 i.bi,
ul.list-tugas .tugas-komentar i,
.header-content .float-start i.bi {
border-radius: 12px;
display: inline-block;
text-align: center;
margin: 0 10px 0 0
}
#comments {
margin: 0
}
#comments h3 {
font-family: 'Fugaz One', sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 20px;
margin: 25px 0
}
#comments h3 i.bi,
.header-content .float-start i.bi {
background: var(--primary-purple);
color: #fff;
width: 40px;
height: 40px;
line-height: 40px
}
#comments .btn-reply {
margin: 10px 2px;
font-size: 14px;
padding: 5px 15px;
color: #222;
background: #fff;
}
#comments form button.btn-green {
background: #fff;
color: var(--primary-purple);
font-weight: 600;
font-size: 15px;
padding: 7px 25px
}
#comments span.date {
font-size: 13px;
opacity: .7;
margin: 0 0 0 10px
}
#comments .balasan {
transform: scale(.92);
background: #fff;
border-radius: 20px;
padding: 20px
}
#comments .balasan .btn-reply {
display: none
}
#comments .komentar-kelas button.btn {
transform: scale(.9);
position: absolute;
right: 0;
top: 0;
color: #d63031;
background: #fff;
}
.profil-komentar .badge {
background-color: var(--primary-purple) !important;
font-weight: 500;
font-size: 13px
}
.tugas-komentar {
display: block;
overflow: hidden;
width: 100%;
padding: 10px 0 0;
margin: 50px 0 0;
font-size: 15px;
display: flex;
align-items: center
}
ul.list-tugas .tugas-komentar i {
color: #fff;
background: #ff9d4f;
font-size: 18px;
width: 30px;
height: 30px;
line-height: 35px
}
#comments .komentar-kelas a.btn-green {
background: #fff;
color: var(--primary-purple);
float: right;
transform: scale(.9);
position: absolute;
right: 40px;
top: 0
}
#comments .komentar-kelas button.btn-green {
transform: scale(1);
position: relative;
background: #fff;
color: var(--primary-purple)
}
.event-information .isi-komentar {
background: #ffedd5
}
.emoji {
margin: 0 0 20px
}
.emoji b {
font-size: 13px
}
.emoji .box-emoji {
background: var(--bg-light);
border: 1px solid var(--bg-light);
padding: 5px;
border-radius: 10px;
font-size: 22px
}
.emoji .copy-button {
cursor: pointer;
padding: 0 5px
}
.comments-form textarea.form-control {
background: #fff;
}
label.custom-file-upload {
cursor: pointer;
padding: 5px 10px;
background: #fff;
border: 1px solid #fff;
color: var(--primary-purple);
border-radius: 5px;
position: absolute;
bottom: 33px;
left: 135px
}
.comments-form .card,
.komentar-kelas form .card {
background: var(--primary-purple);
color: #fff;
border-radius: 15px
}
.komentar-kelas form .badge.bg-secondary {
background: #fff !important;
color: var(--primary-purple)
}
/* NILAI */
.nilai-anggota {
margin: 15px 0 0;
padding: 15px 0 0;
overflow: hidden;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.list-anggota .nama-anggota {
font-size: 15px
}
.list-anggota {
overflow: hidden;
padding: 10px;
background: #fff;
border-radius: 10px;
border: 1px solid #eee;
margin: 5px;
box-sizing: border-box;
text-align: center
}
.img-anggota {
margin: 0 0 10px
}
.list-anggota img {
width: 30px;
height: 30px;
border-radius: 100%
}
.file-anggota .form-label a {
color: #fff !important
}
.file-anggota .form-label {
background: var(--primary-purple);
color: #fff;
padding: 5px 15px;
border-radius: 7px;
margin: .5rem 0
}
.file-anggota {
min-height: 50px;
overflow: hidden
}
.file-anggota .dikirimkan {
display: inline-block;
margin: 5px 0 10px;
font-size: 14px;
opacity: .7;
overflow: hidden
}
.dikirimkan.telat-late {
color: #f44336;
opacity: 1
}
.input-nilai input {
margin: 0 auto
}
.link-tugas .input-nilai form {
float: none;
display: flex
}
.input-nilai .form-label {
margin: 0 !important;
display: flex;
align-items: center
}
.list-group-numbered>.list-group-item::before {
float: left;
margin: 0 10px 0 0
}
.thisanggota form {
float: right
}
.materi-buttons a {
margin: 0 3px
}
.materi-buttons {
float: right;
display: flex
}
.link-tugas .box-flex {
display: flex !important
}
.file-anggota .point-style {
display: flex;
align-items: center;
justify-content: center
}
.file-anggota .btn-style {
display: block !important;
width: 40px;
height: 40px;
line-height: 40px;
margin: 2px;
box-shadow: none
}
.file-anggota .btn-style i {
color: #777
}
.file-anggota .btn-style:hover i {
color: #ff9d4f
}
.file-anggota a.btn-style:hover {
background: #fff !important
}
.file-anggota .point-style a.btn-style.active {
background: #fff
}
.file-anggota .point-style a.btn-style.active i {
color: #ffa500
}
/* BARU */
.float-left {
float: left
}
.float-right {
float: right
}
.toast.position-fixed {
z-index: 99999
}
.murid-imgbox img,
img.sm-profile {
width: 40px;
height: 40px;
border: 4px solid var(--primary-purple);
object-fit: cover;
border-radius: 100%;
border: 3px solid var(--primary-purple);
margin: 0 10px 0 0
}
.thisanggota .list-group-item::before {
display: none
}
.thisanggota .fw-bold span {
font-weight: 600
}
ul.list-tugas.nilai-page li.link-tugas {
overflow: inherit;
box-shadow: 1px 2px 6px 4px #eef0f1;
padding-bottom: 100px
}
.submit-nilai {
position: sticky;
bottom: 0;
left: 0;
right: 0;
background: #fff;
width: 100%;
padding: 10px;
margin: 20px 0 0;
border: 1px solid #edeff0;
border-radius: 15px;
text-align: right
}
ul.list-tugas.nilai-page {
display: block
}
a.nav-link.nav-notif {
margin: 3.5px;
background: #fff;
border: 1px solid #ddd
}
#loader-app {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease;
}
.loader-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.spinner-modern {
position: relative;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.spinner-ring {
position: absolute;
width: 100%;
height: 100%;
border: 4px solid rgba(105, 74, 158, 0.1);
border-top: 4px solid var(--primary-purple, #694a9e);
border-radius: 50%;
animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loader-text {
color: var(--primary-purple, #694a9e);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
margin-top: 10px;
}
.loader-logo-pulse {
width: 40px;
height: 40px;
background: url('../images/aktificon2.png') no-repeat center;
background-size: contain;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
@keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.menu-mobile {
display: none;
max-width: 100%;
margin: 0 auto;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
text-align: center;
font-size: 11px;
background: var(--primary-purple);
box-shadow: -3px -5px 20px 0 rgb(0 0 0 / 9%);
position: fixed;
z-index: 9999;
bottom: 0;
left: 0;
right: 0
}
.menu-mobile a {
color: #fff;
padding: 5px 0 7px;
display: block;
text-decoration: none
}
.menu-mobile i {
font-size: 18px;
padding: 5px 0;
display: block;
font-weight: 700;
color: #fff;
position: relative
}
.menu-mobile .menu-nav i::before {
background: rgb(255 255 255 / 14%);
color: #fff;
width: 35px;
height: 35px;
line-height: 35px;
position: relative;
border-radius: 10px
}
.menu-mobile span {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 10px;
font-weight: 500;
color: #fff;
opacity: .7
}
.loader-app {
display: none
}
#loader-app.hidden {
display: none !important
}
/* NEW NAVBAR AND NAVIGATION */
#navbar-navigation {
position: relative;
box-shadow: 0 2px 8px 0 rgb(128 128 128 / 35%);
background: #fff
}
#navbar-navigation nav.navbar {
padding: 5px 0;
border-top: 2px solid #eee;
margin: 30px 0 0;
text-transform: uppercase
}
#navbar-navigation li a {
color: #333;
font-size: 12.5px;
font-weight: 700
}
#navbar-navigation li a:focus {
background: transparent;
color: #000
}
.new-navbar .container {
position: relative;
font-weight: 700;
padding: 0 20px
}
.new-navbar .container:before {
content: '';
background: var(--primary-purple);
position: absolute;
top: 0;
left: 0;
right: 0;
height: 105px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px
}
.new-navbar .container:after {
content: 'LIFEBOOK ACADEMY';
position: absolute;
right: 40px;
top: 60px;
font-size: 17px;
font-weight: 500;
color: #fff;
opacity: .5;
font-family: 'Fugaz One', sans-serif;
letter-spacing: .5px
}
.new-navbar .navbal-col {
position: relative;
display: flex;
align-items: center;
grid-gap: 20px;
padding: 20px 0 0;
top: 15px
}
.new-navbar .rounded-content {
display: flex;
align-items: center
}
.new-navbar .round-profile img {
width: 130px;
height: 130px;
object-fit: cover;
border-radius: 100%;
background: var(--primary-purple);
border: 7px solid #fff;
margin: 0 10px 0 0
}
.new-coins span.round-level,
.new-navbar span.round-level {
position: relative;
font-weight: 700;
font-size: 30px;
background: linear-gradient(to right bottom, #ffc107, #ff5722);
color: #fff;
width: 80px;
height: 80px;
line-height: 65px;
border: 7px solid #fff;
display: inline-block;
border-radius: 100%;
text-align: center
}
.new-coins span.round-level:before,
.new-navbar span.round-level:before {
content: 'Level';
position: absolute;
font-size: 11px;
top: -15px;
left: 18px
}
.new-coins .round-level b,
.new-navbar .round-level b {
display: inline-block;
transform: translateY(5px)
}
.bagian-atas a.navbar-notif,
.new-navbar a.navbar-btn {
text-decoration: none;
font-size: 13px;
padding: 5px 15px;
border-radius: 25px;
border: 3px solid #fff;
background: linear-gradient(to right bottom, #E91E63, #9C27B0);
color: #fff
}
.new-navbar .navbar-buttons {
position: absolute;
right: 0;
top: 0
}
.bagian-atas a.navbar-notif,
.new-navbar a.navbar-notif {
background: #fff;
color: #222
}
.new-navbar .namepoint-content {
font-size: 18px
}
.new-navbar .navbar-point {
color: #fff;
margin: 10px 0
}
.new-navbar .navbar-point span {
font-size: 12px;
padding: 5px 10px;
background: #fff;
color: var(--primary-purple);
margin: 0 10px 0 0;
border-radius: 25px;
float: left
}
.new-navbar .navbar-name {
color: #222;
text-transform: uppercase;
font-weight: 500
}
.navbar .dropdown .dropdown-menu a {
text-transform: none
}
.navbar .dropdown i.bi {
margin-right: 10px
}
#navbar-navigation li a.leaderboard {
font-size: 12.5px;
background: linear-gradient(to right bottom, #ffc107, #ff5722) !important;
color: #fff
}
#navbar-navigation li a.modul {
font-size: 12.5px;
background: var(--primary-purple) !important;
color: #fff;
margin: 0 5px
}
#navbar-navigation li a.dropdown-item {
border-radius: 0
}
.bagian-atas a.navbar-notif {
padding: 3.5px 15px
}
.nav-item ul.dropdown-menu {
border: 1px solid #eee;
box-shadow: 4px 8px 24px rgb(0 0 0 / .1)
}
.nav-item .dropdown-divider {
border-color: #eee
}
@media (min-width:992px) {
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
right: 0;
left: inherit
}
}
/* NEW SEMESTER + CUSTOM SELECT2 */
.kegiatan .teachers img {
width: 70px;
height: 70px;
border-radius: 100%;
border: 7px solid #fff;
background: var(--primary-purple)
}
.kegiatan h5.card-title {
background: #f4f5f9;
padding: 15px;
text-align: center;
border-radius: 25px;
font-size: 15px
}
.kegiatan .card-title span {
max-width: 220px;
display: inline-block;
line-height: 1.7
}
.kegiatan .card-header {
border: none;
background: #fff
}
.kegiatan .teachers span {
font-size: 13px;
font-weight: 500
}
.kegiatan .teachers {
margin-top: -40px;
margin-left: 10px;
display: flex;
align-items: flex-end;
position: relative
}
.kegiatan .teachers .jadwal {
position: absolute;
right: 0
}
.info-kegiatan .box-show {
background: #f4f5f9;
font-size: 15px;
padding: 10px 20px;
border-radius: 20px;
margin: 0 0 10px;
overflow: hidden
}
.info-kegiatan .box-flex {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 500
}
.info-kegiatan .box-show:hover {
opacity: .8
}
.info-kegiatan i {
font-size: 18px;
display: inline-block;
float: left;
margin: 0 15px 0 0
}
.info-kegiatan p {
font-size: 14px;
opacity: .9
}
.box-kegiatan {
background: #f4f5f9;
padding: 15px;
border-radius: 10px
}
.info-kegiatan a.box-show {
background: var(--primary-purple);
margin: 15px 0;
display: block;
text-align: center;
font-weight: 600;
color: #fff;
text-transform: uppercase
}
.alert-event b {
margin: 0 15px
}
#event-information button.dropdown-toggle {
position: absolute;
right: 0;
top: -5px;
font-size: 12px;
padding: 5px 10px;
background: #fff;
color: #000
}
#event-information span.date {
font-size: 13px;
opacity: .5;
margin: 0 10px
}
.profil-komentar a {
text-decoration: none;
color: #222
}
.profil-icon i {
background: #000;
color: #fff;
padding: 10px 12px;
border-radius: 10px;
margin: 0 10px 0 0
}
.profil-icon i.bi-info-circle-fill {
background: #2196f3 !important
}
.profil-icon i.bi-star-fill {
background: #ff9d4f !important
}
.alert-event a {
color: #222;
text-decoration: none
}
.profil-icon .bi-envelope-open-fill {
background: linear-gradient(to right bottom, #ffc107, #ff9800)
}
.profil-icon .bi-people-fill {
background: linear-gradient(to right bottom, #2196f3, #00bcd4)
}
.profil-icon .bi-tablet {
background: linear-gradient(to right bottom, #f44336, #b700b8)
}
.search-class {
border-radius: 10px;
width: 300px;
max-width: 100%
}
.search-class input {
background: #f4f5f9;
border-radius: 10px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
font-size: 15px
}
.search-class .btn {
background: var(--primary-purple);
border: none;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1)
}
.col.search-class a {
padding: 8.5px 20px
}
.col.search-class {
width: auto
}
.input-upload label.full-icon:hover {
border: 2px solid #555
}
.input-upload label.full-icon {
display: block;
font-size: 40px;
text-align: center;
background: #f4f5f9;
border: 2px solid #f4f5f9;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding: 10px;
cursor: pointer
}
.input-upload input#banner {
border-top-left-radius: 0;
border-top-right-radius: 0;
font-size: 13px
}
.gallery-card a {
text-decoration: none
}
#gallery-school .gallery-card {
border: none;
background: #fff;
padding: 12px 12px 25px;
border-radius: 15px;
box-shadow: none;
border-bottom: 4px solid var(--primary-purple)
}
.gallery-card .btn {
display: block;
width: 100%;
font-size: 14px;
font-weight: 500;
padding: 7px 12px !important
}
.gallery-card form {
display: block
}
.gallery-card .col {
padding: 0 5px
}
.gallery-image img {
border-radius: 10px;
width: 100%;
height: 240px;
object-fit: cover
}
.gallery-card .card-text {
font-size: 15px;
color: #000;
opacity: .6
}
.gallery-card h5.card-title {
font-size: 16px;
line-height: 1.7;
color: #000;
font-weight: 600
}
.form-arrow {
position: relative
}
span.select2-selection.select2-selection--multiple:before,
.form-arrow:before {
content: "\f229";
font-family: bootstrap-icons !important;
line-height: 1;
position: absolute;
z-index: 9;
bottom: 15px;
right: 15px;
color: #555
}
.pagination li.page-item span,
.pagination li.page-item a {
background: #f1f5f9;
color: #333;
font-weight: 600;
margin: 5px;
border: none;
border-radius: 5px
}
.pagination li.page-item.active span,
.pagination li.page-item a:hover {
background: var(--primary-purple);
color: #fff
}
#game-gallery .search-class input {
background: #fff;
font-size: 14px
}
.point-style a.btn-style.active,
.point-style a.btn-style:hover {
background: #ffa500;
color: #fff
}
.point-style a.btn-style {
color: #ffa500;
border-radius: 100%
}
a.special-home {
position: absolute;
left: 0;
background: var(--primary-purple);
color: #fff;
font-size: 20px;
padding: 10px 17px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px
}
.myactivity .info-kegiatan p {
margin: 15px 0
}
.select2-container--default .select2-search--inline .select2-search__field {
min-width: 200px;
font-size: 15px !important;
padding: 0 10px !important
}
.select2-results__option {
font-size: 14px
}
.gallery-icon i {
color: var(--primary-purple);
font-size: 60px
}
.gallery-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 240px;
background: #f9f6ff;
border-radius: 10px
}
.gallery-icon:before {
content: 'E-Book';
position: absolute;
top: 10px;
left: 10px;
font-size: 13px;
background: #9777ce;
color: #fff;
font-weight: 600;
padding: 5px 10px;
border-radius: 5px
}
.gallery-btn a.btn {
display: block;
font-size: 15px;
font-weight: 500;
padding: 10px 25px;
margin: 20px 0 0
}
.custom-gamemenu li a {
text-decoration: none;
padding: 5px 15px;
display: flex;
align-items: center;
font-size: 13px;
color: var(--primary-purple);
font-weight: 500;
background: #f2e9ff;
border-radius: 5px
}
.custom-gamemenu li a:hover {
background: var(--primary-purple);
color: #fff
}
.custom-gamemenu ul,
.raport-gamemenu {
position: relative;
margin: 0;
padding: 10px;
list-style: none;
display: flex;
gap: 5px;
background: #fff;
border-radius: 10px
}
.custom-gamemenu i {
font-size: 17px;
margin: 0 5px 0 0
}
.custom-gamemenu li a.active {
background: var(--primary-purple);
color: #fff
}
/* NEW CSS */
a.special-button,
btn.special-button {
position: relative;
border-top: 3px solid rgb(0 0 0 / 18%) !important;
padding-left: 40px !important;
padding-right: 20px !important;
border-radius: 30px
}
a.special-button:hover,
btn.special-button:hover {
border-color: rgb(0 0 0 / 18%) !important;
opacity: .9 !important
}
.btn.special-button i {
position: absolute;
font-size: 30px;
left: -10px;
top: -3px;
background: #fff;
border-radius: 100%;
width: 40px;
height: 40px;
line-height: 42px
}
.special-name {
display: block;
font-size: 14px;
text-transform: uppercase
}
.btn.special-button i:before {
margin: 5px 0 0
}
.btn.special-button.btn-green i {
color: var(--primary-bright)
}
.btn.special-button.btn-red i {
color: #d63031
}
span.label-beta {
background: #e91e63;
font-size: 18px;
padding: 5px 10px;
border-radius: 10px;
color: #fff;
margin: 0 10px
}
.fugaz-font,
.fugaz,
.newfont {
font-family: 'Fugaz One', Arial, sans-serif
}
.btn.special-button.btn-purple i {
color: #6c5ce7
}
.btn.special-button.btn-blue i {
color: #2196F3
}
.header-fugaz h2,
.header-fugaz h3 {
font-family: 'Fugaz One', 'Plus Jakarta Sans', sans-serif;
text-transform: uppercase;
display: block;
text-align: center;
width: 100%;
background: var(--primary-purple);
color: #fff;
padding: 20px;
border-radius: 20px
}
.header-fugaz h3 {
font-size: 20px
}
.murid-imgbox img,
img.sm-profile {
border: 2px solid var(--primary-purple)
}
#event-information .input-search .btn {
background: var(--primary-purple);
border-radius: 10px
}
#box-game .murid-imgbox img {
margin: 0
}
.rapor-mbox {
position: relative;
text-align: center;
background: linear-gradient(135deg, var(--secondary-purple), var(--primary-purple));
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
height: 100%;
width: 100%;
padding: 25px 15px;
color: #ffffff;
margin: 0 0 20px;
box-shadow: 0 12px 30px rgba(105, 74, 157, 0.2);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: visible;
}
.rapor-mbox:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
.murid-imgbox img {
background: rgba(255, 255, 255, 0.1);
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.rapor-mbox:hover .murid-imgbox img {
transform: scale(1.05);
}
.murid-titlebox h4 {
font-size: 15px;
text-transform: capitalize;
font-weight: 700;
margin: 15px 0 10px;
height: auto;
min-height: 40px;
max-height: 44px;
line-height: 1.3;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
word-break: break-word;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.list-rapor-murid a {
color: #ffffff;
text-decoration: none
}
.list-rapor-murid a:hover {
opacity: .8
}
.rapor-mbox button {
font-size: 12px;
font-weight: 600;
border-radius: 10px;
padding: 5px 12px;
margin-top: 10px;
}
#box-game .col {
position: relative;
margin: 0 0 20px
}
.new-secondary-nav a i {
font-size: 25px !important
}
.new-secondary-nav a {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 600
}
.new-secondary-nav {
margin: 15px 0 0;
text-align: right
}
@media screen and (max-width: 768px) {
.new-secondary-nav {
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.new-secondary-nav .btn {
width: 100%;
margin: 0 !important;
}
}
#box-game .row {
justify-content: center
}
#list-role-users li {
background: var(--primary-bright);
border-bottom: 2px solid rgb(255 255 255 / 27%)
}
#list-role-users {
background: var(--primary-bright);
border-radius: 25px
}
#list-role-users a span {
color: #fff
}
#list-role-users .badge {
background: var(--secondary-purple) !important;
color: #fff
}
#list-role-users i.bi-check-circle-fill {
background: #fff;
padding: 4px 8px;
border-radius: 100%;
display: inline-block
}
.game-empty-notif i {
font-size: 50px
}
.game-empty-notif {
text-align: center;
background: var(--primary-pale);
padding: 50px 20px;
border-radius: 25px
}
.game-empty-notif h4 {
font-size: 20px;
font-weight: 700
}
.game-back-button a {
position: fixed;
z-index: 999;
bottom: 90px;
padding: 15px 17px;
background: var(--primary-purple);
text-decoration: none;
font-family: 'Fugaz One', sans-serif;
color: #fff;
text-transform: uppercase
}
.game-back-button a.game-back {
left: 0;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px
}
.game-back-button a.game-next {
right: 0;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px
}
.box-pengajar {
display: inline-block;
background: var(--primary-purple);
font-family: 'Fugaz One', sans-serif;
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 10px 25px;
margin: 0;
border-radius: 20px
}
.box-pengajar b {
font-weight: 500
}
.send-project-button a.btn-blue {
background: var(--primary-purple);
border-radius: 20px;
padding: 8px 25px;
font-size: 15px;
font-weight: 600;
margin: -10px 0 0
}
.murid-mylevel {
font-weight: 800;
position: absolute;
bottom: -12px;
right: -12px;
background: var(--primary-purple);
color: #fff;
border: 3px solid #fff;
width: 44px;
height: 44px;
line-height: 38px;
border-radius: 50%;
font-size: 15px;
box-shadow: 0 4px 10px rgba(108, 92, 231, 0.4);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
#notif-wrapper .notif-pesan {
display: block;
background: #f2f5f6;
margin: 10px 0 20px;
padding: 10px;
border-radius: 10px;
width: 100%
}
button.delete-mystudent {
position: absolute;
top: -5px;
right: 0;
background: #ff7675 !important;
color: #fff !important;
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #fff;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(255, 118, 117, 0.3);
z-index: 5;
padding: 0;
transition: all 0.3s ease;
}
button.delete-mystudent:hover {
transform: scale(1.1) rotate(90deg);
background: #d63031 !important;
}
/* COIN DUST */
.coins-dust {
position: fixed;
top: 50%;
left: 50%;
overflow: hidden;
transform: translate(-50%, -50%) scale(0);
text-align: center;
background: linear-gradient(135deg, var(--secondary-purple) 0%, var(--primary-deep) 100%);
padding: 30px 40px;
border-radius: 20px;
box-shadow: 0 20px 60px rgb(102 126 234 / .5);
z-index: 9999;
transition: transform 0.4s cubic-bezier(.68, -.55, .265, 1.55);
border: 2px solid rgb(255 255 255 / .2);
min-width: 380px
}
.dust-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
background: rgba(0, 0, 0, 0.1)
}
.dust-progress-bar {
height: 100%;
background: rgba(255, 255, 255, 0.8);
width: 100%;
transition-timing-function: linear;
}
.coins-dust:not(.hidden) {
transform: translate(-50%, -50%) scale(1);
}
.flex-dust {
display: flex;
align-items: center;
gap: 20px;
justify-content: center;
flex-direction: column
}
.flex-dust img {
width: 60px;
height: 60px;
object-fit: contain;
animation: rotate-coin 2s ease-in-out infinite;
filter: drop-shadow(0 4px 12px rgb(255 215 0 / .7))
}
@keyframes rotate-coin {
0%,
100% {
transform: rotateY(0deg)
}
50% {
transform: rotateY(180deg)
}
}
.flex-dust h5 {
margin: 0;
color: #fff;
font-size: 18px;
font-weight: 500;
line-height: 1.6;
text-shadow: 0 2px 4px rgb(0 0 0 / .3)
}
.flex-dust h5 b {
color: gold;
font-size: 45px;
font-weight: 700;
text-shadow: 0 2px 8px rgb(255 215 0 / .8);
display: block;
text-align: center
}
.coins-dust::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(0 0 0 / .5);
z-index: -1;
backdrop-filter: blur(4px);
display: none;
}
.coins-dust:not(.hidden)::before {
display: block;
}
@media (max-width:768px) {
.coins-dust {
min-width: 300px;
padding: 25px 30px
}
.flex-dust img {
width: 50px;
height: 50px
}
.flex-dust h5 {
font-size: 16px
}
.flex-dust h5 b {
font-size: 20px
}
}
.flex-dust img.silvereffect {
filter: drop-shadow(0 4px 12px rgb(255 255 255 / 70%))
}
/* SUPER QUEST */
.super-quest .green-icon i.bi,
.super-quest .red-icon i.bi {
transform: scale(1.35);
display: block
}
.super-quest {
position: relative;
margin: 40px 0
}
.super-quest-box {
background: #f4f5f9;
margin: 0 0 20px;
padding: 10px 20px;
border-radius: 20px;
border-bottom: 5px solid var(--primary-purple)
}
.myquest-header {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 15px;
align-items: center;
margin: 0 0 20px
}
.myquest-header h2 {
background: var(--primary-purple);
color: #fff;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0 -20px;
padding: 10px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px
}
.myquest-mission {
display: flex;
overflow: hidden;
overflow-x: scroll;
padding: 0 0 10px
}
.myquest-list:nth-child(odd) {
background: var(--primary-accent)
}
.myquest-list:nth-child(2n) {
background: var(--primary-soft)
}
.myquest-list {
min-width: 120px;
text-align: center;
border-radius: 15px;
padding: 10px;
font-size: 13px;
font-weight: 700;
margin: 0 10px 0 0
}
.myquest-box {
background: #fff;
font-size: 30px;
padding: 5px;
margin: 10px 0;
border-radius: 10px;
height: 55px
}
.myquest-date {
font-size: 10.5px;
font-weight: 500
}
@keyframes example {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.5)
}
}
.myquest-box a.add-reading {
display: block;
color: var(--primary-bright);
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out
}
.myquest-box button.green-icon {
background: 0 0;
border: none
}
.green-icon i.bi {
color: #00b894
}
.red-icon i.bi {
color: #dc5656
}
.myquest-header-right {
display: flex;
justify-content: flex-end
}
.myquest-box .modal-body {
font-size: 15px;
text-align: left;
font-weight: 400;
line-height: 1.7;
margin: 10px;
background: #ffedd5;
border-radius: 10px
}
.myquest-box .modal {
font-size: 17px
}
.myquest-box:nth-child(3) {
display: none
}
.myquest-box .modal-footer,
.myquest-box .modal-header {
border: none
}
@media screen and (max-width:680px) {
.myquest-header {
display: block
}
.myquest-header-right {
justify-content: center;
margin: 10px 0
}
.super-quest-box {
padding: 15px
}
.myquest-header h2 {
margin: 0 0 0 -15px
}
#mission-model .header-content h2 {
background: transparent;
justify-content: center
}
.myquest-list {
min-width: 120px
}
#mission-model .header-content .float-start .bi {
display: none !important
}
.myquest-header {
margin: 0
}
}
.super-quest.super-margin {
margin: 40px 0 90px;
min-height: 10px
}
.myquest-box .badge.bg-danger {
background: #ffd3dc !important;
color: #af2828
}
.myquest-box .badge {
margin: 10px 10px 0;
padding: 10px
}
.myquest-box .badge.bg-success {
background: #e4ffec !important;
color: #11433d
}
.reading-mystudent {
position: relative
}
.reading-wrapper h3 {
background: var(--primary-purple);
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
color: #fff;
display: inline-block;
padding: 10px 25px;
border: 5px solid #fff;
position: absolute;
top: -25px;
left: -25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px
}
#reading-mystudent h3 {
top: -60px
}
#reading-mystudent h3 a {
color: #fff;
text-decoration: none
}
/* NEW CUSTOM LEADERBOARD */
.header-content h2.disflex {
display: flex
}
.thisanggota .leaderboard-points {
font-size: 17px;
font-weight: 700 !important;
float: right;
padding: 10px
}
.new-leaderboard li:first-child .leaderboard-points:before {
content: '\F5E6';
font-family: bootstrap-icons;
margin: 0 7px 0 0;
float: left
}
.new-leaderboard .me-auto:before {
content: '';
width: 40px;
height: 40px;
line-height: 40px;
color: #fff;
float: left;
border-radius: 100%;
text-align: center;
font-weight: 700
}
.new-leaderboard li:first-child .fw-bold span,
.new-leaderboard li:nth-child(2) .fw-bold span,
.new-leaderboard li:nth-child(3) .fw-bold span {
color: #fff
}
.new-leaderboard li:first-child {
border-radius: 10px !important
}
.new-leaderboard li:nth-child(n+11) {
display: none !important
}
.leaderboard-column h3 {
background: #f4f5f9;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
padding: 10px 20px;
border-radius: 10px;
text-align: center
}
.new-leaderboard .fw-bold i.bi-palette-fill {
color: #111;
background: #eee;
font-size: 22px;
margin: 0 10px 0 0;
width: 40px;
height: 40px;
line-height: 40px;
display: inline-block;
text-align: center;
border-radius: 100%
}
.header-content .float-start i.bi-trophy-fill {
background: linear-gradient(to right bottom, #ffc107, #ff5722)
}
.leaderboard-column ul {
position: relative;
overflow: hidden
}
#categorySelect {
background: #fff;
border-radius: 10px;
margin: 0;
text-align: center;
font-size: 15px;
font-family: 'Fugaz One', Arial, sans-serif
}
.leaderboard-column ul li:nth-child(4) {
border-top-right-radius: 20px !important;
border-top-left-radius: 20px !important
}
.leaderboard-column ul li:nth-child(n+4) {
background: var(--primary-bright);
margin: 0;
border-bottom: 2px solid rgb(255 255 255 / 27%)
}
.new-leaderboard li .me-auto:before {
counter-increment: section;
content: counter(section)
}
.leaderboard-column .thisanggota a {
color: #fff
}
.leaderboard-column img.sm-profile {
width: 50px;
height: 50px;
border: 3px solid var(--primary-deep)
}
.new-leaderboard li:last-child a {
text-decoration: none;
display: block;
width: 100%;
text-align: center;
font-weight: 700;
padding: 10px;
background: rgb(255 255 255 / 20%);
border-radius: 20px
}
.new-leaderboard li:last-child a:hover {
background: var(--primary-purple)
}
.new-leaderboard li:last-child {
display: block !important;
border-bottom-left-radius: 20px !important;
border-bottom-right-radius: 20px !important
}
.new-leaderboard li.allactive:nth-child(n+4) {
display: block !important
}
.superhidden {
visibility: hidden !important;
height: 0;
padding: 0;
margin: 0
}
.custom-tabs {
margin: 10px 0;
border-radius: 10px;
overflow: hidden
}
a.custom-collapse {
display: block;
font-family: 'Fugaz One', 'Plus Jakarta Sans', sans-serif;
text-decoration: none;
text-align: center;
background: #fff;
color: #212529;
border-bottom: 4px solid rgb(0 0 0 / 10%);
padding: 10px
}
a.custom-collapse.active {
background: var(--primary-purple);
color: #fff
}
.leaderboard-row {
display: none
}
.leaderboard-row.active {
display: block
}
.leaderboard-column .new-leaderboard li.smid {
background: var(--primary-purple)
}
@media screen and (max-width:680px) {
.leaderboard-column.p-3 {
padding: 0 !important
}
.new-leaderboard li .fw-bold {
display: flex;
align-items: center;
justify-content: space-between
}
.leaderboard-column .list-username {
font-size: 14px
}
.list-username {
width: 60%;
display: block
}
.new-leaderboard li:nth-child(n+4) .me-auto:before {
display: none
}
}
/* TOP 3 LEADERBOARD */
.leaderboard-top3 {
margin: 15px 0 0
}
.container-top3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
max-width: 75%;
margin: 0 auto;
align-items: end
}
.top3-content {
position: relative
}
.top3-profile-data {
background: var(--secondary-purple);
padding: 40px 25px;
min-width: 130px;
color: #fff;
font-weight: 700;
border-top-left-radius: 50px;
border-top-right-radius: 50px
}
.top3-poin {
font-size: 30px
}
.leaderboard-top3 .top3-content:nth-child(1) .top3-poin {
margin: 15px 0
}
.leaderboard-top3 .top3-content:nth-child(2) .top3-poin {
margin: 40px 0
}
.leaderboard-top3 .top3-content:nth-child(1) .top-3-number {
background: #A9A9A9
}
.leaderboard-top3 .top3-content:nth-child(3) .top-3-number {
background: #D46F0C
}
.leaderboard-top3 .top3-content:nth-child(1) .top3-profile-data {
height: 220px
}
.leaderboard-top3 .top3-content:nth-child(2) .top3-profile-data {
background: var(--primary-bright);
height: 270px
}
.leaderboard-top3 .top3-content:nth-child(3) .top3-profile-data {
height: 190px
}
.top3-profile-image img.top3-image {
background: #fff;
border: 6px solid var(--primary-deep);
border-radius: 100%;
width: 110px;
height: 110px;
object-fit: cover;
margin-bottom: -20px
}
.top-3-number {
display: block;
position: relative;
margin: 10px auto -30px;
background: #DCAC00;
color: #fff;
font-weight: 700;
font-size: 15px;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 5px
}
.top3-content img.top3-crown {
display: flex;
margin: 5px auto;
text-align: center
}
.top3-name {
font-size: 17px;
text-transform: uppercase;
margin: 0 0 10px
}
form.form-paksa {
float: right;
position: absolute;
bottom: 84px;
right: 35px
}
#edit-reward form button {
font-size: 15px !important;
font-weight: 600 !important
}
@media screen and (max-width:680px) {
.container-top3 {
transform: scale(.8);
margin: -20px 0 -42px
}
.top3-profile-data {
padding: 40px 15px
}
}
/* From Modul Index */
.header-fugaz {
position: relative
}
.header-fugaz a.btn {
position: absolute;
right: 30px;
top: 15px;
background: #fff;
color: #000;
border-radius: 15px
}
.modul-lists {
font-family: 'Fugaz One', Arial, sans-serif
}
.modal-header {
font-family: 'Fugaz One', Arial, sans-serif;
text-transform: uppercase;
border: none;
padding-bottom: 5px
}
.modul-grid3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0 25px;
margin: 0
}
.modul-lists h3 {
text-transform: uppercase;
font-size: 24px;
margin: 0
}
.modul-col {
margin: 20px 0 0
}
.modul-title {
background: var(--primary-purple);
box-shadow: 2px 3px 4px #d7d7d7;
color: #fff;
font-size: 16px;
padding: 10px 30px;
border-radius: 30px
}
.modul-levels {
position: absolute;
background: #ff9e4e;
border: 4px solid #ffca9e;
font-size: 22px;
color: #fff;
width: 60px;
height: 60px;
line-height: 55px;
text-align: center;
border-radius: 100%;
margin: -7px;
box-shadow: inset 2px 3px 4px rgb(0 0 0 / 22%)
}
.modul-content {
margin: 25px 0 5px;
text-align: center;
background: #f4f5f9;
padding: 20px 15px;
border-radius: 20px
}
.modul-content a {
color: #fff;
text-decoration: none
}
.modul-content a:hover {
opacity: .8
}
@media screen and (max-width:768px) {
.modul-grid3 {
display: block
}
.header-fugaz a.btn {
top: 14px;
right: 20px
}
}
.modul-matpel {
color: var(--primary-purple);
text-transform: uppercase
}
.box-modul-home {
overflow: hidden;
margin: 10px
}
.box-modul-home .owl-stage {
display: flex
}
.box-modul-home .modul-content {
margin: 0;
padding: 10px 2px
}
.modul-content {
position: relative
}
.modul-content .btn-red {
position: absolute;
top: 5px;
right: 5px;
background: #fff;
color: #d63031;
border-radius: 15px
}
#level-saya {
background: #f4f5f9;
margin: 20px 0 35px;
padding: 20px;
border-radius: 20px;
border-bottom: 4px solid var(--primary-purple)
}
#level-saya .modul-content {
background: #fff
}
#level-saya .game-empty-notif h3 {
font-weight: 700;
margin: 0 0 10px
}
#level-saya .game-empty-notif {
font-family: 'Plus Jakarta Sans', sans-serif;
margin: 20px 0;
border: 4px solid var(--primary-purple)
}
button.remove-pinned:before {
content: '';
width: 20px;
height: 1.5px;
position: absolute;
top: 15px;
left: 10px;
background: #d63030;
transform: rotate(30deg)
}
/* Owl Carousel Slide Design by www.idblanter.com */
.owl-carousel,
.owl-carousel .owl-item {
-webkit-tap-highlight-color: transparent;
position: relative
}
.owl-carousel {
display: none;
width: 100%;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
display: flex;
-ms-touch-action: pan-Y;
touch-action: manipulation;
-moz-backface-visibility: hidden
}
.owl-carousel .owl-stage:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
width: 100%;
padding: 15px 0
}
.owl-carousel .owl-item,
.owl-carousel .owl-wrapper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0)
}
.owl-carousel .owl-item {
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
transition: all .4s ease-in-out
}
.owl-carousel .owl-item img {
background: #eee;
display: block;
width: 100%;
border-radius: 15px;
height: 320px;
object-fit: cover
}
.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
display: none
}
.no-js .owl-carousel,
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
background: 0 0;
color: inherit;
border: none;
padding: 0 !important;
font: inherit
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel.owl-refresh .owl-item {
visibility: hidden
}
.owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-grab {
cursor: move;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.owl-height {
transition: height .5s ease-in-out
}
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity .4s ease
}
.owl-carousel .owl-item .owl-lazy:not([src]),
.owl-carousel .owl-item .owl-lazy[src^=''] {
max-height: 0
}
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d
}
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(owl.video.play.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform .1s ease
}
.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
display: none
}
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity .4s ease
}
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%
}
.owl-item .blanter-owl-image {
transition: all .3s ease-in-out
}
.owl-item.active .blanter-owl-image {
opacity: 1
}
.owl-item .blanter-desc {
transform: translate(0, 40px);
opacity: 0
}
.owl-item.active .blanter-desc {
transform: translate(0, 0);
opacity: 1
}
.owl-dots {
display: none
}
.blanter-owl-image {
z-index: 1
}
.owl-carousel .owl-dots button {
background: #ddd;
width: 11px;
height: 11px;
border-radius: 10px;
margin: 0 5px
}
.owl-carousel .owl-dots button.active {
background: #438dff;
width: 20px
}
.sliderbanner.container {
position: relative;
margin: 0 auto;
padding: 20px 0;
overflow: hidden
}
.owl-item.active.center {
opacity: 1
}
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
position: absolute;
z-index: 1;
font-size: 40px;
top: 40%;
background: #fff;
border: 1px solid #eee
}
.owl-nav button.owl-prev {
left: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px
}
.owl-nav button.owl-next {
right: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px
}
@media screen and (max-width:768px) {
.owl-carousel .owl-stage-outer {
transform: scale(1);
padding: 10px 0
}
.owl-nav {
display: none
}
}
.box-kegiatan .owl-stage-outer {
padding: 0
}
/* NEW HOME GAME STYLE */
.bagian-tengah,
.kotak-image,
.person-center {
position: relative
}
.bagian-tengah {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
z-index: -1
}
.person-center img {
max-width: 120px;
position: relative;
z-index: 2
}
.person-center:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 0;
width: 100%;
background: 0 0;
box-shadow: 2px 1px 100px 18px #555
}
.kotak-profile {
display: flex;
align-items: center;
margin: -20px 10px 0 20px
}
.kotak-level,
a.pil-button {
display: inline-block;
text-align: center
}
.kotak-image {
padding: 8px;
margin: 0 10px 0 0;
background: #fff;
border-radius: 100%;
z-index: 1
}
.kotak-image img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 100%
}
.kotak-nama {
text-transform: uppercase;
font-size: 16px
}
.kotak-nama a {
text-decoration: none
}
.kotak-nama img.rank-badge {
display: inline-block;
margin: -6px 2px 0
}
.kotak-level {
position: absolute;
bottom: -5px;
left: 0;
border: 2px solid #fff;
background: linear-gradient(to right bottom, #ffc107, #ff5722);
color: #fff;
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 100%
}
@keyframes anim-infinite-rotation {
100% {
transform: rotate(360deg)
}
}
.school-image__decoration::before {
height: 240px;
right: -33px;
position: absolute;
bottom: 0;
width: 160%;
background: var(--primary-purple);
border: 2px solid var(--primary-purple);
border-radius: 50%;
box-shadow: 0 0 30px 0 var(--primary-purple);
transform: rotateX(75deg) translateY(180%);
content: "";
opacity: 1
}
.school-image__decoration-tech {
left: 0;
bottom: 5%;
position: absolute;
z-index: 1;
transform: rotateX(75deg) translateY(220%);
width: 130%;
transition-duration: 1s
}
.school-image__decoration-tech::before {
animation: 7s linear infinite anim-infinite-rotation;
background: url(/images/lightpokemon.svg) center/cover no-repeat;
content: "";
display: block;
padding-bottom: 100%;
right: 22px;
bottom: 10px;
position: relative
}
.bagian-atas {
position: fixed;
z-index: 9;
top: 0;
left: 0;
right: 0
}
.header-home-title {
display: block;
text-align: center;
background: var(--primary-purple);
color: #fff;
font-size: 24px;
padding: 10px;
margin: 0 1%;
box-sizing: border-box;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px
}
.bagianatas-grid {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-gap: 10px;
margin: 10px 0;
align-items: center
}
.bagian-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center
}
.bagian-menu li a {
text-decoration: none;
padding: 10px;
margin: 0 2px;
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--primary-purple);
border-radius: 5px;
transition: all .2s ease-in-out
}
.bagian-menu li a:hover {
background: var(--primary-purple);
color: #fff;
box-shadow: inset 0 -4px 0 0 rgb(0 0 0 / 18%)
}
.bagian-points .points-boxed {
background: var(--primary-purple);
color: #fff;
display: inline-block;
padding: 7px 20px;
border-radius: 30px;
float: right;
margin-right: 30px
}
.point-gcoin:before {
content: '';
background: url(/images/gcoin.svg)no-repeat;
display: inline-block;
background-size: 20px;
width: 20px;
height: 20px;
float: left;
margin: 1px 5px
}
.point-mcoin:before {
content: '';
background: url(/images/silvercoin.svg)no-repeat;
display: inline-block;
background-size: 20px;
width: 20px;
height: 20px;
float: left;
margin: 1px 5px;
transform: scale(.95)
}
.points-boxed span {
display: inline-block
}
.bagian-konten {
position: fixed;
top: 170px;
left: 0;
right: 10px;
bottom: 0
}
.bagian-konten-grid {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-gap: 10px;
margin: 10px 25px
}
.note-boxed {
background: var(--primary-purple);
padding: 10px;
margin: 0 0 20px;
border-radius: 10px
}
.note-boxed h4 {
position: relative;
font-size: 17px;
text-align: center;
color: #fff
}
.leaderboard-button a {
position: relative
}
.note-boxed h4:before,
.leaderboard-button a:before {
content: '';
display: inline-block;
float: left;
margin: 1px 5px;
position: absolute
}
.achievement h4:before {
background: url(/images/achievement.svg) no-repeat;
background-size: 30px;
width: 30px;
height: 40px;
left: 0;
top: -20px
}
.myevent h4:before {
background: url(/images/event.svg) no-repeat;
background-size: 30px;
width: 30px;
height: 40px;
right: 0;
top: -7px
}
.mymission h4:before {
background: url(/images/mission.svg) no-repeat;
background-size: 30px;
width: 30px;
height: 40px;
right: 0;
top: -7px
}
.leaderboard-button a:before {
background: url(/images/leaderboard.svg) no-repeat;
background-size: 30px;
width: 30px;
height: 40px;
left: 10px;
top: 1px
}
.note-boxed p,
.note-boxed .p-box {
margin: 0;
background: var(--bg-light);
padding: 10px;
border-radius: 10px;
font-family: 'Plus Jakarta Sans', Arial, sanser-fi;
font-size: 14px;
font-weight: 500;
color: #111
}
.note-boxed .p-box {
max-height: 180px;
overflow: hidden;
overflow-y: scroll
}
.note-button a span {
display: block;
font-size: 14px
}
.note-button a {
background: var(--primary-purple);
color: #fff;
text-decoration: none;
display: block;
text-align: center;
padding: 10px;
border-radius: 10px;
font-size: 30px;
transition: all .3s ease-in-out
}
.note-button a:hover {
transform: scale(1.03);
color: #fff;
box-shadow: inset 0 -7px 0 0 rgb(0 0 0 / 18%)
}
.leaderboard-button a span {
font-size: 17px
}
.note-boxed .p-box a {
display: block;
transition: all .3s ease-in-out;
font-size: 14px;
text-decoration: none;
color: #222;
margin: 2px 0;
padding: 5px 10px;
border-radius: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.note-boxed .p-box a:hover {
background: var(--primary-purple);
color: #fff
}
.bagian-atas .navbar-logout {
background: linear-gradient(to right bottom, #E91E63, #9C27B0);
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
text-decoration: none;
color: #fff;
font-size: 12px;
padding: 5px 15px;
border-radius: 20px;
border: 3px solid #fff
}
.bagian-atas .navbar-buttons {
position: absolute;
top: 15px;
right: 10px
}
.mobile-vs {
display: none
}
.note-button-mobile .nbm-image {
height: 80px;
display: flex;
align-items: center;
justify-content: center
}
.note-button-mobile a {
text-decoration: none
}
.note-button-mobile span {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
color: var(--primary-purple);
font-weight: 700;
text-transform: uppercase
}
.note-button-mobile img {
width: 50px
}
.note-button-mobile {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
text-align: center;
margin: 0 0 25px
}
.close-note-boxed {
background: var(--secondary-purple);
border-radius: 10px;
text-align: center;
margin: 10px 0;
padding: 10px;
color: #fff;
text-decoration: none;
text-transform: uppercase
}
@media screen and (max-width:768px) {
.bagian-points {
float: none;
display: block
}
.bagian-points span {
display: block;
margin: 0 0 10px;
text-align: center
}
.bagian-kananatas {
right: 10px;
text-align: right
}
.bagian-kanantengah {
right: 10px;
top: 200px
}
.kotak-image img {
width: 60px;
height: 60px
}
.kotak-profile {
margin-bottom: 15px;
float: none
}
.tombol-kiribawah .slanted-button,
.tombol-kananbawah .slanted-button {
display: block;
margin-top: 10px;
text-align: center
}
.start-button {
position: fixed;
bottom: 60px;
left: 0;
right: 0
}
.header-home-title {
margin: 0;
font-size: 17px;
text-transform: uppercase
}
.bagian-points .points-boxed span {
margin: 0
}
.bagianatas-grid {
grid-template-columns: 30% 65%
}
.bagian-points .points-boxed {
margin: -40px 0 0;
width: 100%;
display: flex;
justify-content: center
}
.leaderboard-button {
margin: 0 0 20px
}
.bagian-tengah,
.bagian-menu,
.mobile-vh {
display: none
}
.bagian-konten-grid,
.mobile-vs {
display: block
}
.bagian-konten-grid {
margin: 10px
}
.bagian-konten {
right: 0;
top: 150px
}
.bagian-konten .note-boxed {
position: fixed;
z-index: 9;
top: inherit;
left: 0;
right: 0;
bottom: -100%;
padding-bottom: 40px;
transition: all .4s ease-in-out
}
.note-boxed.shows {
bottom: 20px;
box-shadow: -3px -5px 20px 0 rgb(0 0 0 / 22%)
}
.start-button a {
background: var(--secondary-purple);
padding-bottom: 30px;
border-radius: 15px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
.note-button .grid-2 a::before {
display: none
}
.note-button .grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 10px 0;
grid-gap: 10px
}
}
.game-search .btn {
border-radius: 10px !important;
background: var(--primary-purple)
}
.game-search {
padding: 5px;
border-radius: 10px;
margin: -10px 5px 0
}
.new-navbar .points-boxed span {
background: transparent;
margin: 10px 0;
padding: 0;
color: #fff;
display: flex;
align-items: center;
font-size: 14px
}
.points-boxed {
overflow: hidden
}
.note-boxed .p-box a.admin-nbtn {
text-align: center;
border: 3px dotted var(--primary-purple);
margin: 5px 0 2px;
font-weight: 600
}
.birthday-information {
font-family: 'Plus Jakarta Sans', sans-serif;
position: absolute;
top: 150px;
padding: 4px 0 1px;
background: rgb(0 0 0 / 5%);
border-radius: 20px;
max-width: 400px;
width: 100%
}
.birthday-information a {
text-decoration: none;
font-size: 12px;
color: #333;
font-weight: 500
}
/* Custom New Kegiatan CSS */
.box-kegiatan {
background: var(--primary-purple);
padding: 5px;
overflow: hidden;
position: relative
}
.kegiatan h5.card-title {
background: var(--primary-purple);
color: #fff
}
.kegiatan .card-header {
padding: 5px
}
.card.kelas-card {
border-radius: 15px
}
.owl-stage {
display: flex
}
.kegiatan .teachers .label-score {
width: 60px;
height: 60px;
border-radius: 100%;
border: 5px solid #fff;
background: var(--primary-purple)
}
.input-kegiatan button {
display: block;
width: 100%;
font-weight: 500
}
.card.kegiatan {
height: auto;
min-height: 100%
}
.box-label-score {
display: grid;
grid-template-columns: repeat(6, 1fr);
text-align: center;
grid-gap: 5px;
background: #f4f5f9;
border-radius: 10px;
overflow: hidden;
overflow-x: scroll
}
.box-label-score a {
padding: 10px 0;
border-radius: 10px
}
.box-label-score a:hover {
background: #eee
}
.box-label-score span {
width: 30px;
height: 30px;
display: inline-block;
background: #000;
margin: 5px 0 0
}
.box-label-score a:nth-child(1) span {
background: url('data:image/svg+xml,');
background-repeat: no-repeat
}
.box-label-score a:nth-child(2) span {
background: #DC5656;
border-radius: 100%;
transform: scale(.95)
}
.box-label-score a:nth-child(3) span {
background: url('data:image/svg+xml,');
background-repeat: no-repeat
}
.box-label-score a:nth-child(4) span {
background: url('data:image/svg+xml,');
background-repeat: no-repeat
}
.box-label-score a:nth-child(5) span {
background: #47B53D;
border-radius: 100%;
transform: scale(.95)
}
.box-label-score a:nth-child(6) span {
background: url('data:image/svg+xml,');
background-repeat: no-repeat
}
.box-label-score a.active {
background: #ddd
}
.input-score {
display: none
}
.kegiatan .teachers .label-score.label-color-0 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
background-size: 60px;
border: none
}
.kegiatan .teachers .label-score.label-color-1 {
background: #dc5656
}
.kegiatan .teachers .label-score.label-color-2 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
background-size: 60px;
border: none
}
.kegiatan .teachers .label-score.label-color-3 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
background-size: 60px;
border: none
}
.kegiatan .teachers .label-score.label-color-4 {
background: #46b53c
}
.kegiatan .teachers .label-score.label-color-5 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
background-size: 60px;
border: none
}
#box-kegiatan .box-kegiatan {
margin: 0 0 30px
}
#box-kegiatan h2.game-date {
font-size: 15px;
font-weight: 600
}
#box-kegiatan .info-kegiatan form .btn {
margin: 0 0 10px;
transform: scale(.9);
float: right
}
form.hapus-kegiatan {
position: absolute;
bottom: 16px;
right: 15px
}
.navs-tabs {
margin: 0 0 15px;
display: flex
}
.navs-tabs button.btn {
font-size: 13px;
text-transform: uppercase;
font-family: 'Fugaz One', Arial;
background: #f4f5f9;
width: 100%
}
.navs-tabs button.btn.active {
background: var(--primary-purple);
color: #fff
}
/* NEW CUSTOM GAME GALLERY */
#game-gallery #button-addon2 {
border-radius: 10px;
padding: 0 15px
}
#game-gallery .btn.special-button i {
top: 0
}
#box-game .input-search button {
border-radius: 10px;
padding: 0 15px
}
.pop-kegiatan .form-select,
.pop-kegiatan .form-control,
#box-kegiatan .form-select,
#box-kegiatan .form-control {
font-size: 15px
}
.navbar-point b {
display: block;
height: 15px
}
#game-gallery .search-class {
margin: 10px 0
}
#game-gallery .create-kelas {
border-radius: 15px
}
#game-gallery .pagination li.page-item span,
#game-gallery .pagination li.page-item a {
background: #fff
}
#game-gallery .pagination li.page-item.active span,
#game-gallery .pagination li.page-item a:hover {
background: var(--primary-purple)
}
.create-kelas {
border-radius: 10px
}
#gallery-school .yes-like {
font-weight: 600
}
#gallery-school .no-like {
background: #fff;
border-color: #2196f3;
color: #2196f3;
font-weight: 600
}
/* NEW HALAMAN MATPEL LIST LEVEL */
.matpel-lists {
font-family: 'Fugaz One', Arial, sans-serif;
display: flex;
justify-content: space-around;
flex-wrap: wrap
}
.matpel-lists h3 {
text-transform: uppercase;
font-size: 20px;
margin: 0 0 20px
}
.matpel-content {
position: relative;
display: inline-block;
text-align: center;
margin: 10px;
max-width: 250px
}
.matpel-levels span {
display: block;
background: var(--primary-purple);
font-size: 35px;
width: 90px;
height: 90px;
line-height: 80px;
border-radius: 100%;
border: 5px solid var(--primary-bright);
box-shadow: inset 2px 3px 4px rgb(0 0 0 / 22%);
margin: 0 auto
}
.matpel-title span {
display: block;
background: var(--primary-purple);
font-size: 14px;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 20px;
border: 5px solid var(--primary-bright);
box-shadow: inset 2px 3px 4px rgb(0 0 0 / 22%);
margin: -5px 0 0
}
.matpel-stars {
color: #555;
font-size: 35px;
margin: 0 0 -40px
}
.matpel-stars i {
margin: 0 -2px;
text-shadow: 2px 4px 4px rgb(0 0 0 / 25%)
}
.matpel-stars i:nth-child(2) {
transform: translateY(-15px);
display: inline-block
}
.matpel-style {
margin: 15px 0
}
.matpel-content a {
color: #fff;
text-decoration: none
}
.matpel-content a:hover {
opacity: .8
}
.matpel-col {
background: var(--bg-light);
display: flex;
justify-content: center;
text-align: center;
padding: 20px;
border-radius: 20px;
flex-wrap: wrap
}
.matpel-stars i.active {
color: #FFC107
}
.full-stars .matpel-levels span,
.full-stars .matpel-title span {
background: #E5BA1E;
border-color: #FFD43D
}
.full-stars .matpel-levels {
box-shadow: 0 0 20px 8px #FFEB3B;
border-radius: 100%;
width: 90px;
height: 90px;
margin: 0 auto
}
.matpel-guru {
background: #ff9d4f;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
font-weight: 600;
border-radius: 10px;
padding: 2px;
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
transition: all .3s ease-in-out
}
.matpel-content a:hover .matpel-guru {
top: -27px;
visibility: visible;
opacity: 1
}
.matpel-content .btn-red {
background: #fff;
color: #d63031;
border-radius: 10px;
margin: 0
}
.admin-level-buttons {
display: flex;
justify-content: center;
margin: 10px 0 0;
}
.admin-level-buttons a.btn-green,
.admin-level-buttons button.btn-green {
margin: 0 3px;
background: #fff;
color: var(--primary-purple);
border-radius: 10px
}
.admin-level-buttons a.btn-orange {
margin: 0 3px;
background: #fff;
color: #ff9e4e;
border-radius: 10px
}
.admin-level-buxttons {
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0 -5px
}
.admin-level-buttons a.btn-level-guru,
.admin-level-buttons button.btn-level-guru {
text-transform: uppercase;
font-size: 12px;
padding: 3px 10px;
position: relative;
}
.admin-level-buttons button.remove-pinned:before {
top: 10px;
left: 6px
}
.admin-level-buttons button.remove-pinned {
color: #d63030
}
/* NEW MODUL BELAJAR */
.modul-lists {
font-family: 'Fugaz One', Arial, sans-serif
}
.modal-header {
font-family: 'Fugaz One', Arial, sans-serif;
text-transform: uppercase;
border: none;
padding-bottom: 5px
}
.modul-grid3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0 25px;
margin: 0
}
.modul-lists h3 {
text-transform: uppercase;
font-size: 24px;
margin: 0
}
.modul-col {
margin: 20px 0 0
}
.modul-title {
background: var(--primary-purple);
box-shadow: 1px 2px 3px rgb(0 0 0 / 5%);
color: #fff;
font-size: 18px;
padding: 10px 30px;
border-radius: 30px
}
.modul-levels {
position: absolute;
background: #ff9e4e;
border: 4px solid #ffca9e;
font-size: 25px;
color: #fff;
width: 60px;
height: 60px;
line-height: 55px;
text-align: center;
border-radius: 100%;
margin: -7px;
box-shadow: inset 2px 3px 4px rgb(0 0 0 / 22%)
}
.modul-content {
margin: 25px 0 5px;
text-align: center;
background: var(--bg-light);
padding: 20px 15px;
border-radius: 20px
}
.modul-image img {
max-width: 90px;
margin: 0 0 15px
}
.modul-content a {
color: #fff;
text-decoration: none;
display: block;
transition: all .3s ease-in-out
}
.modul-content a:hover {
opacity: .8;
transform: scale(1.05)
}
.header-fugaz a.btn-notxt i {
transform: scale(2);
display: inline-block
}
.level-stars {
text-align: center;
font-size: 30px;
margin: -30px 0 0
}
.header-fugaz .level-stars i {
color: #555
}
.level-stars i.active {
color: #FFC107
}
.video-container {
text-align: center;
margin: 15px 0 25px;
background: #f4f5f9;
border: 1px solid #eee;
padding: 20px;
border-radius: 15px
}
.video-container .box-iframe {
max-width: 768px;
margin: 0 auto 15px;
background: #fff;
padding: 10px;
border-radius: 10px;
box-shadow: 10px 10px 25px rgb(40 42 53 / 15%)
}
.box-iframe iframe {
background: #000;
border-radius: 10px;
width: 100%;
height: 420px
}
.modul-content a.modul-leaderboard,
.modul-content a.btn-edit {
color: #ff9d4f;
position: absolute;
z-index: 10;
top: 5px;
left: 5px;
background: #fff;
padding: 6px 11px;
border-radius: 15px;
border: 1px solid #fff
}
.modul-content a.modul-leaderboard:hover {
border-color: #ff9d4f
}
#level-saya .matpel-lists {
display: block
}
#level-saya .matpel-col {
background: #9F9F9F;
flex-wrap: wrap
}
#level-saya .matpel-content {
transform: scale(.9)
}
.form-pin-modul button.btn:hover {
border-color: var(--primary-purple)
}
.form-pin-modul button.btn {
color: var(--primary-purple);
position: absolute;
z-index: 10;
top: 5px;
right: 5px;
background: rgb(255 255 255 / 48%);
padding: 6px 11px;
border-radius: 15px;
border: 1px solid rgb(255 255 255 / 48%)
}
.modul-content a.btn-edit {
color: #009688;
left: inherit;
right: 5px
}
.modul-content a.btn-edit:hover {
border-color: #009688
}
/* NEW PRIZE POOL */
#prize-pool {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 25px
}
.box-pool {
background: #FFF1BF;
padding: 20px;
border-radius: 15px;
text-align: center;
position: relative;
margin: 0 0 15px
}
.header-prizepool {
background: #FED854;
color: #000;
font-weight: 700;
padding: 15px;
border-radius: 10px;
margin: 0 0 20px
}
.counter-pool {
background: #ff9d4f;
color: #fff;
display: inline-block;
padding: 8px 20px;
margin: 0 0 10px;
border-radius: 10px;
font-size: 22px
}
.box-prize img {
width: 100%;
height: 140px;
object-fit: cover;
max-width: 100%;
border-radius: 10px
}
.content-prizepool {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px
}
#prize-pool .full-width-box {
grid-column: span 3;
display: flex;
justify-content: center
}
.this-prize {
background: #fed854;
padding: 10px;
border-radius: 15px;
max-width: 100%;
box-shadow: 2px 3px 5px 0 rgb(0 0 0 / 26%)
}
.price-gift {
background: #fff;
margin: 5px 0 0;
border-radius: 10px;
font-weight: 700;
font-size: 13px;
padding: 5px
}
.box-prize a.btn {
margin: 5px 0 0;
display: block;
font-size: 12px;
font-weight: 500;
background: #fff;
color: var(--primary-purple);
padding: 4px;
border-radius: 10px
}
.box-prize a.btn-green {
color: var(--primary-purple)
}
.box-prize a.btn-orange {
color: #ff9d4f
}
.price-gift .point-gcoin {
display: flex;
justify-content: center
}
.add-prize a {
font-size: 40px;
padding: 5px;
display: block;
margin: 20px 0 0;
border: 5px dotted #fed854;
border-radius: 15px;
color: var(--primary-purple)
}
.kotak-hadiah .title-hadiah {
font-weight: 700;
color: #000;
font-size: 20px
}
.kotak-hadiah img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 10px;
margin: 0 15px 0 0
}
.kotak-hadiah {
display: flex;
align-items: center;
margin: -25px 0 20px
}
#list-role-users button.btn,
#list-role-users a.btn {
border-radius: 10px
}
.notif-pesan a {
font-weight: 700;
color: var(--primary-purple) !important
}
/* NEW CSS AND LAYOUT HELP BY CHAT GPT */
.scroll-container {
overflow-x: auto;
white-space: nowrap
}
.week-container {
display: inline-block;
margin-right: 20px;
padding: 30px 0 20px
}
.date-list,
.number-list,
.text-list {
list-style-type: none;
padding: 0;
margin: 0;
display: flex
}
.date-list li,
.number-list li,
.text-list li {
padding: 10px 0;
width: 45px;
text-align: center
}
.date-list li {
position: relative;
font-size: 7px;
height: 45px
}
.text-list li {
background: var(--primary-bright);
font-size: 13px;
color: #fff;
font-weight: 600;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
padding-bottom: 5px
}
.number-list li {
font-size: 14px;
color: #111;
font-weight: 700;
border-top-left-radius: 25px;
border-top-right-radius: 25px
}
.number-list li:nth-child(even) {
background: var(--primary-soft)
}
.number-list li:nth-child(odd) {
background: var(--primary-accent)
}
.date-list1 li:nth-child(even),
.date-list2 li:nth-child(odd) {
background: #e0e0e0
}
.date-list1 li:nth-child(odd),
.date-list2 li:nth-child(even) {
background: #eee
}
ul.number-list {
background: var(--primary-bright)
}
.week-container .lr-tooltip {
cursor: pointer;
transition: all .3s ease-in-out
}
.week-container .lr-tooltip:hover {
transform: scale(1.5)
}
.week-container .label-rapor {
width: 22px;
height: 22px;
display: inline-block;
border-radius: 100%
}
.week-container .label-rapor.lr-x {
background: #fff;
box-shadow: inset 1px 2px 4px rgb(0 0 0 / 15%)
}
.week-container .label-rapor.lr-0 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
background-size: 22px
}
.week-container .label-rapor.lr-1 {
background: #DC5656
}
.week-container .label-rapor.lr-2 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
background-size: 22px
}
.week-container .label-rapor.lr-3 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
background-size: 22px
}
.week-container .label-rapor.lr-4 {
background: #47B53D
}
.week-container .label-rapor.lr-5 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
background-size: 22px
}
.date-list span.mytoday i {
display: block
}
.date-list span.mytoday {
position: absolute;
top: -110px;
left: 5px;
font-size: 12px;
font-weight: 700
}
.kategori-kegiatan {
position: relative;
float: left;
min-width: 200px;
height: 190px
}
.this-kategori-kegiatan div {
background: #fff;
color: #111;
font-size: 13px;
padding: 12.5px 25px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
font-weight: 700;
text-transform: uppercase
}
.this-kategori-kegiatan {
position: absolute;
bottom: -5px;
right: 0
}
.this-kategori-kegiatan div.kategori1 {
background: var(--primary-accent)
}
.this-kategori-kegiatan div.kategori2 {
background: var(--primary-soft)
}
.tooltips {
position: absolute;
z-index: 9;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 10px;
display: none;
font-size: 14px
}
#ujian-level .kategori-kegiatan {
height: 111px
}
#ujian-level ul.number-list {
background: transparent
}
.toast.position-fixed {
background: #10ac84 !important;
padding: 0 10px;
font-weight: 500
}
.button-primary-admin a {
background: var(--bg-light);
border-radius: 20px;
text-align: center;
padding: 15px;
text-decoration: none
}
.button-primary-admin a:hover {
opacity: .8
}
.button-primary-admin {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
margin: 25px 0 0
}
.button-primary-admin span {
display: block;
background: var(--primary-purple);
color: #fff;
font-family: 'Fugaz One', 'Plus Jakarta Sans', sans-serif
}
.button-primary-admin img {
width: 70px;
height: 70px;
object-fit: contain
}
.button-primary-admin span {
display: block;
background: var(--primary-purple);
color: #fff;
font-family: 'Fugaz One', 'Plus Jakarta Sans', sans-serif;
padding: 10px;
margin: 10px 0 0;
border-radius: 25px
}
@media screen and (max-width:768px) {
.button-primary-admin {
grid-template-columns: repeat(2, 1fr)
}
.button-primary-admin span {
font-size: 12px
}
.button-primary-admin img {
width: 50px;
height: 50px
}
}
.content-learning h3 {
font-size: 20px;
padding: 15px 0;
border-top: 1px solid #ddd
}
/* NEW CSS HALAMAN MISSIONS */
.missions-row {
display: none
}
.missions-row.active {
display: block
}
.missions-row h3 {
font-size: 18px;
padding: 10px 0;
display: block;
font-weight: 700
}
.mission-list {
background: #fff;
border-bottom: 4px solid #ddd;
color: #333;
padding: 15px;
border-radius: 15px;
overflow: hidden;
margin: 0 0 15px
}
.mission-title {
display: flex;
align-items: center;
float: left
}
.mission-list .mission-title i {
background: var(--primary-purple);
color: #fff;
font-size: 20px;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0 10px 0 0;
border-radius: 10px
}
.mission-action {
float: right;
margin: 5px 0;
display: flex;
grid-gap: 15px
}
.mission-title h5 {
font-size: 16px;
font-weight: 700
}
.mission-title a {
color: #333;
text-decoration: none
}
.mission-title h5 span {
background: #009688;
color: #fff;
font-weight: 500;
font-size: 12px;
padding: 2px 8px;
border-radius: 10px
}
.mission-list a.btn {
font-weight: 500;
font-size: 15px
}
.mission-reward {
font-size: 12px;
opacity: .8
}
.mission-reward b {
font-weight: 500
}
.my-achievement .mission-title h5 {
margin: 0
}
.my-achievement .mission-title {
align-items: center
}
.mission-count {
margin: 7px 0
}
.form-claim-mission button {
font-size: 14px;
font-weight: 500;
margin: 2px 0
}
.my-achievement .mission-reward {
margin: 5px 0 0
}
span.achievement-date {
font-size: 13px;
font-weight: 500;
margin: 8px 0
}
.form-claim-mission button.btn-green,
.mission-list {
cursor: default
}
.form-claim-mission button.btn-green {
background: #eee;
color: #111
}
.mission-list img {
width: 50px;
height: 50px;
padding: 10px;
margin: 0 10px 0 0;
background: var(--bg-light);
border-radius: 10px
}
.missions-section.misi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px
}
/* NEW CSS HALAMAN RAPORT MATPEL */
#box-rapor {
background: #f4f5f9;
padding: 20px;
border-radius: 15px
}
#box-rapor tbody tr.table-break td {
padding: 5px
}
#box-rapor tbody tr.table-break {
border: none
}
#box-rapor .rapor-container {
background: #fff;
padding: 15px;
border-radius: 15px
}
#box-rapor table {
width: 100%
}
#box-rapor img.profil-rapor {
width: 45px;
height: 45px;
border-radius: 100%;
object-fit: cover;
margin: 10px 10px 10px 0
}
#box-rapor .profil-title {
font-weight: 700;
font-size: 15px
}
#box-rapor a.btn {
display: block;
font-size: 14px;
font-weight: 500
}
#box-rapor thead th {
padding: 10px 0;
font-size: 14px
}
#box-rapor tbody tr {
border-top: 1px solid #eee
}
#box-rapor tbody tr.level-lists {
border: none;
border-bottom: 1px solid #fff;
transition: .4s ease-in-out
}
#box-rapor .level-lists td {
background: var(--bg-light);
font-size: 14px;
padding: 15px;
border-radius: 10px
}
#box-rapor .level-lists .myflex .level-materi {
text-align: center;
padding: 10px;
background: #fff;
border-radius: 10px;
font-size: 13px;
font-weight: 500
}
#box-rapor .level-lists .myflex {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 15px;
margin: 10px 0 0
}
#box-rapor .lm-stars .stars i.active {
color: #ff9800
}
#box-rapor .lm-stars .stars i {
color: #999;
font-size: 18px
}
#box-rapor .lm-score {
font-size: 18px;
font-weight: 600
}
#box-rapor thead {
position: sticky;
top: 0;
background: #fff
}
#box-rapor .rata-rata {
margin: 10px 0 0
}
#box-rapor .lm-comen {
font-weight: 400
}
#box-rapor tr.table-send {
border: none
}
#box-rapor .table-send .form-group input {
border-radius: 7px;
margin: 0 10px 0 0
}
#box-rapor .table-send .form-group button {
width: 120px
}
#box-rapor .table-send .form-group {
display: flex;
max-width: 500px;
margin: 0 auto
}
#box-rapor .table-send label {
font-size: 14px;
font-weight: 500;
padding: 10px;
text-align: center;
display: block
}
@media screen and (max-width:768px) {
#box-rapor td:nth-child(2),
#box-rapor td:nth-child(3),
#box-rapor td:nth-child(4),
#box-rapor thead {
display: none
}
#box-rapor tbody tr {
border: none;
border-bottom: 5px solid #f4f5f9
}
#box-rapor .level-lists .myflex .level-materi,
#box-rapor a.btn {
margin: 0 0 10px
}
#box-rapor {
padding: 5px
}
#box-rapor .level-lists .myflex,
#box-rapor td {
display: block
}
}
#box-rapor a.btn-download-rapor {
max-width: 250px;
margin: 0 auto
}
.full-desc {
display: none;
-webkit-user-select: all;
user-select: all;
background: #fff;
padding: 15px;
font-size: 15px;
max-width: 900px;
margin: 35px auto 10px;
border-radius: 20px;
border: 4px dashed var(--primary-accent)
}
.full-desc:focus {
animation: .1s step-end forwards select
}
@keyframes select {
to {
-webkit-user-select: text;
user-select: text
}
}
.rapor-wrapper a.show-desc {
position: absolute;
right: 0;
top: -20px;
color: #fff;
font-size: 22px;
background: var(--primary-purple);
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 10px
}
.rapor-wrapper h3 span {
position: absolute;
top: -3px;
right: -65px;
background: var(--primary-purple);
padding: 9px 20px;
border-radius: 20px;
border: 4px solid #fff
}
.rapor-wrapper {
position: relative;
margin: 30px 0
}
.rapor-wrapper h3 {
background: var(--primary-purple);
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
color: #fff;
display: inline-block;
padding: 10px 25px;
border: 4px solid #fff;
position: absolute;
top: -20px;
left: -25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px
}
.rapor-log {
text-align: center
}
.rapor-log .label-rapor.lr-1 {
background: #DC5656
}
.rapor-log .label-rapor.lr-2 {
background: #FF7A7A
}
.rapor-log .label-rapor.lr-3 {
background: #67DA5D
}
.rapor-log .label-rapor.lr-4 {
background: #47B53D
}
.rapor-log .label-rapor.lr-5 {
background: #F9CE37
}
.rapor-log .label-rapor {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 100%
}
.tooltips {
max-width: 300px
}
.rapor-wrapper .scroll-container {
overflow: hidden
}
.rapor-wrapper .scroll-container:hover {
overflow-x: auto
}
/* TABLE */
.content-learning table {
width: 100%;
overflow-x: auto
}
.content-learning iframe,
.content-learning img {
border-radius: 10px;
max-width: 100%;
height: auto
}
.content-learning .table td {
white-space: nowrap;
padding: .5rem;
text-align: center
}
.content-learning .table tr:nth-child(2n) td {
background-color: #f2f2f2
}
.content-learning .table tr:nth-child(odd) td {
background-color: #fff
}
.content-learning .table td,
.content-learning .table th {
border: 1px solid #ddd
}
.content-learning .table th {
background-color: #f0f0f0;
font-weight: 700
}
.ck.ck-powered-by {
display: none !important
}
.content-learning figure.image {
text-align: center
}
@media only screen and (max-width:768px) {
.content-learning .table td {
display: block;
padding: 0
}
.content-learning .table td:before {
content: attr(data-label);
display: block;
font-weight: 700;
padding: .5rem;
background-color: #f0f0f0
}
}
#semesterForm select {
font-size: 14px;
padding: 10px;
margin: 5px 0;
border-radius: 10px;
border: 1px solid #ddd
}
/* HOUSE */
#house-fight {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
text-align: center
}
.house-column {
background: var(--bg-light);
padding: 60px 25px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative
}
.house-column img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 15px
}
.house-column:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
opacity: .2
}
.house-column.bgnusa:before {
background: #000;
background-image: url(/images/bgnusa2.png);
background-size: cover;
background-position: center
}
.house-column.bggaru:before {
background: #000;
background-image: url(/images/bggaru2.png);
background-size: cover;
background-position: center
}
.house-content {
position: relative;
z-index: 1
}
.house-column h4 {
font-family: 'Fugaz one', Arial, sans-serif;
font-size: 20px;
margin: 20px 0
}
.house-content input {
text-align: center;
font-weight: 700;
background: #fff
}
#house-fight .versus {
position: absolute;
font-family: 'Fugaz one', sans-serif;
font-size: 25px;
background: var(--primary-purple);
color: #fff;
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 100%;
left: 0;
right: 0;
margin: 0 auto;
margin-top: 120px;
z-index: 2
}
.house-footer button {
margin: 20px 0;
float: right;
font-weight: 600
}
.house-score {
font-size: 25px;
font-weight: 900;
background: rgb(255 255 255 / 34%);
padding: 10px 0;
border-radius: 20px
}
@media screen and (max-width:768px) {
.house-column img {
width: 50px;
height: 50px;
border-radius: 7px
}
.house-column {
padding: 25px 5px
}
.house-column h4 {
font-size: 16px
}
.house-score {
font-size: 20px;
padding: 5px 0
}
#house-fight .versus {
font-size: 20px;
width: 40px;
height: 40px;
line-height: 40px;
margin-top: 55px
}
}
/* POPUP LOGOUT */
.popup-logout {
background-color: rgb(0 0 0 / .6);
backdrop-filter: blur(4px);
position: fixed;
z-index: 99999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
font-family: 'Plus Jakarta Sans', sans-serif;
transition: all 0.3s ease
}
.popup-logout.show {
opacity: 1;
visibility: visible
}
.popup-logout.show .logout-box {
transform: scale(1);
opacity: 1
}
.logout-box {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 16px;
padding: 32px 24px;
text-align: center;
width: 400px;
max-width: 90%;
box-shadow: 0 20px 60px rgb(0 0 0 / .15);
transform: scale(.9);
opacity: 0;
transition: all 0.3s cubic-bezier(.34, 1.56, .64, 1);
border: 1px solid rgb(255 255 255 / .8)
}
.logout-box i {
font-size: 56px;
color: #f39c12;
margin-bottom: 16px;
display: inline-block;
animation: iconPulse 2s ease-in-out infinite
}
@keyframes iconPulse {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
}
.logout-box h5 {
font-weight: 700;
margin: 12px 0;
font-size: 22px;
color: #1a1a1a;
letter-spacing: -.5px
}
.logout-box p {
margin-bottom: 28px;
font-size: 15px;
color: #666;
line-height: 1.5
}
.logout-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px
}
.logout-buttons a {
display: block;
padding: 13px 20px;
border-radius: 10px;
text-align: center;
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer
}
.logout-buttons a:nth-child(1) {
background: var(--primary-purple);
color: #fff;
box-shadow: 0 4px 12px rgb(105 74 157 / .3)
}
.logout-buttons a:nth-child(1):hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgb(105 74 157 / .4)
}
.logout-buttons a:nth-child(1):active {
transform: translateY(0)
}
.logout-buttons a:nth-child(2) {
background-color: #f2f5f6;
color: #1a1a1a;
border: 1px solid #e0e4e7
}
.logout-buttons a:nth-child(2):hover {
background-color: #e8ecef;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgb(0 0 0 / .08)
}
.logout-buttons a:nth-child(2):active {
transform: translateY(0)
}
.question-number,
.quiz-header {
background: var(--primary-purple);
}
@media (max-width:480px) {
.logout-box {
padding: 28px 20px
}
.logout-box i {
font-size: 48px
}
.logout-box h5 {
font-size: 20px
}
.logout-box p {
font-size: 14px
}
.logout-buttons {
gap: 10px
}
.logout-buttons a {
padding: 12px 16px;
font-size: 14px
}
}
/* MVP HOUSE */
.history-list {
padding: 30px 0
}
.history-column {
background: #fff;
box-shadow: 0 5px 10px 4px rgb(95 112 146 / 8%);
border-radius: 10px;
margin: 10px 0;
padding: 25px
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
padding: 0 0 15px;
border-bottom: 1px solid #eee
}
.history-detail p {
background: #f4f5f9;
padding: 15px;
border-radius: 7px;
font-size: 14px
}
.history-jumlah {
text-align: right;
font-size: 18px
}
.history-date,
.history-title {
display: flex;
align-items: center
}
.history-header i {
margin: 0 10px 0 0
}
.history-title i {
font-size: 22px;
color: var(--primary-purple)
}
.history-header button {
background: 0 0 !important
}
.history-header button i {
margin: 0;
color: #d63030
}
.house-mvp {
margin: 20px 0 0;
font-size: 14px;
font-weight: 700
}
.house-mvp i {
color: #ff9d4f;
background: rgb(255 255 255 / 62%);
padding: 5px 7px;
margin: 0 5px 0 0;
border-radius: 10px
}
a.lapor-house:before {
display: none
}
.list-players .data-players {
box-shadow: 0 5px 10px 4px rgb(95 112 146 / 8%);
font-size: 14px;
padding: 10px 15px;
border-radius: 8px
}
.list-player-house,
.list-players.list-guru {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
margin: 20px 0
}
.list-player-house .data-players {
margin: 0 0 10px
}
.modal-dialog-scrollable .modal-content {
max-height: 70vh;
overflow-y: scroll
}
#page-house .list-player-house .data-players,
#page-house .list-players.list-guru .data-players {
background: #fff
}
/* GLOBAL GAME MENU (NEW RAPOR) */
.global-gamemenu small b {
font-weight: 600
}
.global-gamemenu small {
font-size: 13px
}
.global-gamemenu i {
display: block;
font-size: 20px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 5px auto;
background: var(--primary-purple);
color: #fff;
border-radius: 10px
}
.global-gamemenu {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 15px
}
.global-gamemenu.thats-grid-2 {
grid-template-columns: repeat(2, 1fr)
}
.global-gamemenu .btn-download-rapor {
background: var(--bg-light);
color: #111;
border-radius: 15px
}
.box-raporschool {
background: var(--bg-light);
margin: 15px 0;
padding: 20px;
border-radius: 15px;
position: relative;
overflow: hidden
}
.box-raporschool .owl-nav.disabled {
display: none
}
.box-raporschool span.numberof {
padding: 2px 7px;
background: linear-gradient(to right bottom, #ffc107, #ff5722) !important;
display: inline-block;
border-radius: 20px;
border: 2px solid #fff;
margin-left: 5px
}
.box-raporschool h3 {
font-family: 'Fugaz One', Arial, sans-serif;
text-transform: uppercase;
font-size: 16px;
background: var(--primary-purple);
color: #fff;
display: inline-block;
position: relative;
padding: 8px 25px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
left: -20px;
margin: 0 0 20px
}
.box-newkegiatan h4 {
font-size: 13px;
color: #fff;
padding: 12px;
margin: 0;
font-weight: 700;
line-height: 1.6
}
.box-newkegiatan {
background: var(--primary-bright);
border-radius: 20px;
text-align: center
}
.box-datekegiatan {
background: var(--primary-accent);
border-top-right-radius: 20px;
border-top-left-radius: 20px;
font-size: 12px;
padding: 10px 10px 30px;
color: #000;
font-weight: 500
}
.box-infokegiatan {
background: #F0F0F0;
position: relative;
margin-top: -20px;
bottom: 0;
padding: 15px;
font-size: 14px;
border-radius: 18px;
text-align: left
}
.box-infokegiatan .edit-kegiatan {
background: #009688;
text-decoration: none;
font-size: 10px
}
.box-infokegiatan .edit-kegiatan:hover {
background: #000;
color: #fff
}
.tombol-infokegiatan {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 15px;
margin: 15px 0 0
}
.tombol-infokegiatan a {
text-decoration: none;
color: #000;
font-size: 11px;
font-weight: 600;
background: #fff;
padding: 8px;
border-radius: 20px;
text-align: center;
box-shadow: inset 1px 2px 4px rgb(0 0 0 / 15%)
}
.header-infokegiatan {
position: relative
}
.penanda-kegiatan {
position: absolute;
right: 0;
top: -35px
}
.custom-newkegiatan {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
position: relative
}
.header-infokegiatan b {
font-size: 12px
}
.box-raporschool .owl-stage {
gap: 15px
}
#custom-raporschool .label-score.label-color-0 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
border: none
}
#custom-raporschool .label-score.label-color-1 {
background: #dc5656;
border-radius: 100%;
border: 4px solid #fff
}
#custom-raporschool .label-score.label-color-2 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
border: none
}
#custom-raporschool .label-score.label-color-3 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
border: none
}
#custom-raporschool .label-score.label-color-4 {
background: #46b53c;
border-radius: 100%;
border: 4px solid #fff
}
#custom-raporschool .label-score.label-color-5 {
background: url('data:image/svg+xml,')no-repeat;
border-radius: 0;
border: none
}
.box-newkegiatan .label-score {
width: 50px;
height: 50px;
display: inline-block;
background-size: 50px !important
}
.box-staticlabel .label-score {
width: 20px;
height: 20px;
display: inline-block;
background-size: 20px !important
}
.box-staticlabel .label-score.label-color-4,
.label-score.label-color-1 {
width: 18px;
height: 18px;
display: inline-block;
background-size: 18px !important;
border: none !important
}
.box-staticlabel .label-score {
margin: 0 5px 0 0
}
.box-staticlabel {
margin: 20px 0;
gap: 10px;
display: flex
}
.box-staticlabel span.label-staticolor {
display: flex;
float: left;
font-size: 12px;
align-items: center;
font-weight: 600;
padding: 5px 14px;
border: 1px solid #eee;
background: #fff;
border-radius: 20px
}
.box-customloader .progress-bar {
background-color: #FF9800 !important;
border-radius: 30px !important
}
.box-customloader.progress {
height: 25px;
border-radius: 30px;
background: #fff;
}
.box-infokegiatan .collapse,
.box-infokegiatan .collapsing {
font-size: 13px;
margin: 10px 0
}
@media screen and (max-width:768px) {
.global-gamemenu {
grid-template-columns: repeat(2, 1fr)
}
.global-gamemenu small,
.box-newkegiatan h4,
.header-infokegiatan b,
.box-datekegiatan,
.box-staticlabel span.label-staticolor {
font-size: 11px
}
.box-raporschool h3 {
font-size: 14px
}
.box-staticlabel {
overflow: hidden;
overflow-x: scroll
}
.box-staticlabel span.label-staticolor {
min-width: 150px;
justify-content: center
}
}
/* RANKED */
.ranked-feature {
background: var(--primary-purple) url(/images/rank/ranked-bg.jpg) no-repeat;
color: #fff;
padding: 30px;
border-radius: 10px;
margin: 0 0 20px;
background-blend-mode: luminosity;
background-size: cover;
background-position: bottom;
position: relative;
overflow: hidden
}
.ranked-grid {
position: relative;
display: grid;
grid-template-columns: .5fr 1.5fr;
align-items: center;
margin: 0 0 20px
}
.ranked-badge {
position: relative;
text-align: center
}
.ranked-feature img {
max-width: 100px
}
.ranked-information h4 {
font-size: 20px;
text-transform: uppercase;
font-family: 'Fugaz One', Arial, sans-serif;
text-shadow: 1px 2px 3px #000
}
.ranked-feature #exp-level {
margin: 0;
background: var(--primary-dark)
}
.ranked-feature #exp-level .progress {
height: 20px;
background: var(--primary-muted)
}
.ranked-feature #exp-level .progress-bar {
background-color: #ff8607 !important
}
.ranked-information .locked-rank {
background: rgb(0 0 0 / 42%);
display: inline-block;
font-size: 13px;
padding: 5px 15px;
border-radius: 20px;
margin: 0
}
.ranked-feature img.badge-locked {
opacity: .5
}
.ranked-feature .owl-nav span {
transform: translateY(-5px);
display: inline-block
}
.ranked-feature .owl-nav button.owl-prev,
.ranked-feature .owl-nav button.owl-next {
top: 20%;
background: rgb(255 255 255 / 22%);
color: #fff;
border: none
}
.ranked-feature .ranked-up img {
max-width: 130px
}
.locked .ranked-badge:before {
content: "\f47a";
font-family: 'bootstrap-icons';
position: absolute;
font-size: 70px;
left: 0;
right: 0;
top: -15px;
bottom: -15px;
line-height: 2;
opacity: .5;
color: #fff;
background: #000;
width: 80%;
margin: 0 auto;
border-radius: 20px
}
img.rank-badge {
height: 30px
}
.home-ranked.ranked-feature {
padding: 20px
}
.home-ranked.ranked-feature img {
max-width: 50px
}
.home-ranked .ranked-information h4 {
font-size: 15px;
margin: 0
}
.home-ranked .ranked-information .locked-rank {
font-size: 10px
}
.home-ranked .ranked-grid {
margin: 0
}
@media screen and (max-width:768px) {
.ranked-grid {
gap: 15px
}
.ranked-feature img {
max-width: 70px
}
.ranked-feature #exp-level {
padding: 15px
}
.ranked-feature .ranked-up img {
max-width: 100px
}
.locked .ranked-badge:before {
top: -5px;
bottom: -5px;
line-height: 1.6;
width: 100%;
font-size: 50px
}
.ranked-information .locked-rank {
font-size: 12px
}
.home-ranked.ranked-feature {
display: none
}
}
/* NEW FEATURE */
.activity-text {
font-size: 14px
}
.generate-quiz {
margin: 20px 0;
text-align: center;
background: #f4f5f9;
padding: 25px;
border-radius: 15px;
border: 5px dotted #2791ed
}
.generate-quiz .gen-quiz-desc {
font-size: 13.5px;
opacity: .9;
margin: 10px 0 0
}
.generate-quiz .gen-quiz-desc.more-smaller {
font-size: 12px;
opacity: .8
}
.generate-quiz button:hover,
button.gemini-btn:hover {
transform: scale(1.05);
opacity: .9
}
.generate-quiz button,
button.gemini-btn {
background: linear-gradient(to right bottom, #2196F3, var(--primary-purple)) !important;
border-radius: 30px;
font-weight: 700;
border: none;
font-size: 15px;
transition: all .3s ease-in-out
}
button.gemini-btn {
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 5px 15px;
margin: 0 10px
}
button.gemini-btn i.bi {
padding: 0;
background: #fff0;
font-size: 12px;
margin: 0;
width: auto;
height: auto;
line-height: 1
}
div#quizOutput {
text-align: center
}
/* AI Notification */
.ai-notification-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / .5);
backdrop-filter: blur(4px);
z-index: 99998;
display: none;
animation: fadeIn 0.3s ease
}
.ai-notification-overlay.active {
display: block
}
.ai-notification-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
background: #fff;
text-align: center;
border-radius: 16px;
box-shadow: 0 20px 60px rgb(0 0 0 / .3);
padding: 32px;
max-width: 420px;
width: 90%;
z-index: 99999;
display: none;
animation: slideUp 0.3s ease
}
.ai-notification-box.active {
display: block;
transform: translate(-50%, -50%) scale(1)
}
.ai-notification-box i {
font-size: 48px;
color: #4F46E5;
margin-bottom: 20px;
display: block;
animation: bounce 0.6s ease
}
.ai-notification-box h3 {
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
color: #1f2937
}
.ai-notification-box p {
font-size: 13px;
color: #6b7280;
margin: 0 0 24px 0;
line-height: 1.6
}
.ai-btn-group {
display: flex;
gap: 12px
}
.ai-btn-group button {
flex: 1;
padding: 12px 24px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease
}
.ai-btn-submit {
background: linear-gradient(to right bottom, #2196F3, var(--primary-purple)) !important;
color: #fff;
box-shadow: 0 4px 12px rgb(79 70 229 / .3)
}
.ai-btn-submit:hover {
transform: translateY(-2px)
}
.ai-btn-submit:active {
transform: translateY(0)
}
.ai-btn-close {
background: #f3f4f6;
color: #374151;
border: 2px solid #e5e7eb
}
.ai-btn-close:hover {
background: #e5e7eb;
border-color: #d1d5db
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translate(-50%, -40%) scale(.9)
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1)
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-10px)
}
}
.show-ai-notif {
padding: 12px 24px;
background: #4F46E5;
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s
}
.show-ai-notif:hover {
background: #4338CA;
transform: translateY(-2px)
}
.ai-btn-group button {
box-shadow: none
}
.ai-btn-group button.ai-btn-close {
background: #eee !important
}
#all-tugas .learn-evaluation i {
font-size: 48px !important;
width: auto;
height: auto;
background: #fff0;
margin-bottom: 20px;
color: #4F46E5
}
@media screen and (max-width:480px) {
.ai-notification-box {
padding: 15px
}
.ai-notification-box {
width: 95%
}
}
/* House Statistic Players */
.player-stats-container * {
margin: 0;
padding: 0;
box-sizing: border-box
}
.player-stats-section {
margin: 2rem 0 1.5rem
}
.player-stats-header {
display: flex;
align-items: center;
gap: .75rem;
padding-bottom: 1rem;
border-bottom: 2px solid #e9d5ff;
background: #faf5ff;
padding: 1rem 1.25rem;
border-radius: 12px;
margin-bottom: .5rem
}
.player-stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem
}
.player-stats-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 8px rgb(168 85 247 / .08);
overflow: hidden;
transition: all 0.3s ease;
border: 2px solid #e5e7eb;
border-top: 4px solid #fff0
}
.player-stats-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgb(168 85 247 / .15)
}
.player-stats-nusa {
border-top-color: #10b981
}
.player-stats-garu {
border-top-color: #f97316
}
.player-stats-card-header {
background: #faf5ff;
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid #e9d5ff
}
.player-stats-nusa .player-stats-card-header {
background: #f0fdf4;
border-bottom: 1px solid #d1fae5
}
.player-stats-garu .player-stats-card-header {
background: #fff7ed;
border-bottom: 1px solid #fed7aa
}
.player-stats-badge {
width: 52px;
height: 52px;
background: #fff;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgb(164 164 164 / 15%)
}
.player-stats-guild-icon {
width: 36px;
height: 36px;
object-fit: contain;
border-radius: 7px
}
.player-stats-card-title {
font-family: 'Fugaz One', Arial, sans-serif;
font-size: 1.125rem;
font-weight: 500;
color: #047857;
margin: 0;
text-transform: uppercase;
letter-spacing: .5px
}
.player-stats-garu .player-stats-card-title {
color: #c2410c
}
.player-stats-list {
padding: .75rem;
max-height: 500px;
overflow-y: auto;
background: #fdfbff
}
.player-stats-list::-webkit-scrollbar {
width: 8px
}
.player-stats-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px
}
.player-stats-list::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px
}
.player-stats-list::-webkit-scrollbar-thumb:hover {
background: #94a3b8
}
.player-stats-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: .8rem;
margin: .375rem 0;
background: #fff;
border-radius: 12px;
transition: all 0.25s ease;
border: 1px solid #e5e7eb;
border-left: 3px solid #fff0
}
.player-stats-item:hover {
background: #f8fafc;
border-color: #cbd5e1;
border-left-color: #a855f7;
transform: translateX(4px);
box-shadow: 0 2px 8px rgb(168 85 247 / .1)
}
.player-stats-info {
display: flex;
align-items: center;
gap: .75rem;
flex: 1;
min-width: 0
}
.player-stats-name {
font-weight: 600;
color: #1e293b;
font-size: .9375rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.player-stats-small-badge {
width: 22px;
height: 22px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgb(0 0 0 / .1));
border-radius: 7px
}
.player-stats-points {
display: flex;
align-items: baseline;
gap: .3rem;
background: #f3e8ff;
padding: .5rem 1rem;
border-radius: 20px;
box-shadow: 0 2px 6px rgb(168 85 247 / .12);
flex-shrink: 0;
border: 1px solid #e9d5ff
}
.player-stats-points-value {
font-weight: 700;
color: #9333ea;
font-size: 1.0625rem
}
.player-stats-points-label {
font-size: .75rem;
color: #a855f7;
font-weight: 600;
text-transform: uppercase
}
@media (max-width:768px) {
.player-stats-container {
grid-template-columns: 1fr;
gap: 1.25rem
}
.player-stats-header h3 {
font-size: 1.25rem
}
.player-stats-card-header {
padding: 1.25rem
}
.player-stats-card-title {
font-size: 1rem
}
.player-stats-name {
font-size: .875rem
}
.player-stats-points-value {
font-size: 1rem
}
}
@media (max-width:480px) {
.player-stats-list {
display: none
}
.player-stats-card.player-fixed .player-stats-list {
max-height: 83%
}
.player-stats-card.player-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
border-radius: 0
}
.player-stats-card.player-fixed .player-stats-card-header:after {
content: '\F659';
font-family: 'BOOTSTRAP-ICONS';
position: absolute;
top: 20px;
right: 20px;
font-size: 25px
}
.player-stats-section {
margin: 1.5rem 0 1rem
}
.player-stats-header {
gap: .5rem;
padding: .875rem 1rem
}
.player-stats-icon {
width: 24px;
height: 24px
}
.player-stats-badge {
width: 44px;
height: 44px
}
.player-stats-guild-icon {
width: 30px;
height: 30px
}
.player-stats-item {
padding: .875rem 1rem
}
.player-stats-points {
padding: .4rem .8rem
}
}
@keyframes playerStatsFadeIn {
from {
opacity: 0;
transform: translateY(15px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.player-stats-card {
animation: playerStatsFadeIn 0.5s ease-out backwards
}
.player-stats-nusa {
animation-delay: 0.1s
}
.player-stats-garu {
animation-delay: 0.2s
}
.player-stats-nusa .player-stats-item:hover {
border-left-color: #10b981
}
.player-stats-garu .player-stats-item:hover {
border-left-color: #f97316
}
.player-stats-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgb(255 255 255 / .4), transparent);
transition: left 0.5s
}
.player-stats-card {
position: relative;
overflow: hidden
}
.player-stats-card:hover::before {
left: 100%
}
/* House Statistic Teachers */
.guru-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .875rem;
max-width: 100%
}
.guru-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
background: #fff;
border-radius: 12px;
border-left: 4px solid #6366f1;
box-shadow: 0 2px 8px rgb(0 0 0 / .06);
transition: all 0.3s ease
}
.guru-item:hover {
transform: translateX(4px);
box-shadow: 0 4px 12px rgb(99 102 241 / .15);
border-left-color: #4f46e5
}
.guru-name {
font-size: .9375rem;
font-weight: 600;
color: #1e293b;
flex: 1
}
.guru-badge {
display: inline-flex;
align-items: center;
padding: .375rem .875rem;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #fff;
border-radius: 20px;
font-size: .8125rem;
font-weight: 500;
white-space: nowrap
}
.player-stats-item:first-child .player-stats-info:after,
.guru-item:first-child .guru-name:after {
content: 'MVP';
font-size: 12px;
font-weight: 700;
background: linear-gradient(to right bottom, #ffc107, #ff5722) !important;
color: #fff;
padding: 5px 10px;
border-radius: 25px;
text-shadow: 1px 1px 3px rgb(0 0 0 / 31%)
}
.guru-item:first-child .guru-name:after {
margin-left: 5px
}
@media (max-width:640px) {
.guru-item {
flex-direction: column;
align-items: flex-start;
gap: .625rem;
padding: .875rem 1rem
}
.guru-badge {
align-self: flex-end
}
.guru-item {
flex-direction: row
}
.guru-container {
grid-template-columns: 1fr
}
}
.important-note {
margin: 15px 0;
font-size: 15px;
font-weight: 500;
padding: 20px;
background: #fff0c4;
border-radius: 10px;
border: 3px dashed #e7d190;
}
/* RESPONSIVE AND MOBILE SCREEN */
@media screen and (min-width:768px) {
.navbar li.nav-item.dropdown {
position: absolute;
right: 0
}
}
@media screen and (max-width:1200px) {
.box-prize img {
height: 85px
}
.price-gift .point-gcoin {
font-size: 11px
}
}
@media screen and (max-width:768px) {
.raport-gamemenu i {
display: block;
}
.raport-gamemenu {
display: grid;
grid-template-columns: 1fr 1fr;
}
.content-prizepool .box-prize {
margin: 10px 0
}
.content-prizepool br {
display: none
}
.isi-komentar {
font-size: 13px
}
#semesterForm select {
width: 100%;
box-sizing: border-box;
text-align: center
}
.house-mvp {
font-size: 13px
}
.history-list {
padding: 50px 0 25px
}
.history-date span,
a.lapor-house,
.custom-gamemenu {
display: none
}
.history-header {
font-size: 12px
}
.rapor-wrapper .scroll-container {
overflow-x: auto;
padding-top: 30px
}
.rapor-wrapper #ujian-level {
padding-top: 0
}
.thisanggota .leaderboard-points {
font-size: 14px
}
.container.can-disable {
padding: 0 10px
}
.missions-section.misi-grid {
display: block
}
a.custom-collapse {
font-size: 14px
}
.modul-levels {
font-size: 18px
}
.modul-title {
font-size: 15px
}
.modul-lists h3,
.matpel-lists h3 {
font-size: 18px
}
.modul-image img {
max-width: 70px
}
.modul-levels {
width: 55px;
height: 55px;
line-height: 50px
}
#profile-box .matpel-col {
flex-wrap: nowrap;
display: flex
}
#profile-box .matpel-style {
overflow-x: scroll
}
.matpel-col {
flex-wrap: wrap
}
.mission-list .mission-title i {
font-size: 17px;
width: 35px;
height: 35px;
line-height: 35px
}
.mission-list .mission-title img {
width: 35px;
height: 35px
}
.mission-title h5 span {
display: block;
margin: 10px 0
}
.price-gift .point-gcoin {
font-size: 13px
}
.new-navbar a.navbar-notif,
.bagian-atas a.navbar-notif {
position: fixed;
z-index: 99;
top: 90px;
right: 0;
border-radius: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
font-size: 18px;
box-shadow: 2px 3px 5px 0 rgb(0 0 0 / 26%)
}
#list-role-users li {
padding: 10px 0
}
#list-role-users .badge {
margin-top: 10px;
display: block
}
.box-prize img {
height: auto
}
.profile-content .bagian-tengah {
display: flex
}
.points-boxed {
display: flex;
align-items: center;
justify-content: center
}
.game-back-button a {
padding: 10px 18px;
font-size: 13px
}
.video-container {
padding: 0;
background: transparent;
border: none
}
.new-secondary-nav a {
font-size: 12px;
display: flex;
align-items: center
}
.new-secondary-nav {
display: grid;
grid-template-columns: 1fr .1fr 1fr
}
#navbar-navigation li a.modul {
margin: 0
}
#box-game .murid-imgbox img {
width: 80px;
height: 80px;
margin: 0
}
#box-game .murid-titlebox h4 {
margin-top: 0 !important;
top: 120px;
font-size: 14px;
line-height: 1.7
}
.header-content h2 {
display: block !important;
font-size: 16.5px !important
}
.header-content h2 i,
.header-content h2 .label-beta {
display: none !important
}
#game-gallery .header-content h2 {
margin: 10px 0
}
#game-gallery .create-kelas {
background: transparent
}
a.special-home {
display: none
}
#navbar-navigation {
box-shadow: none
}
.new-coins span.round-level:before,
.new-navbar span.round-level:before,
.leaderboard-points i {
display: none
}
.new-coins .round-level b,
.new-navbar .round-level b {
transform: none
}
.new-navbar span.round-level {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 15px;
border: none;
position: absolute;
top: 45px
}
.new-navbar .rounded-content {
position: absolute;
bottom: -30px;
z-index: 1
}
#navbar-navigation button.navbar-toggler {
background: var(--primary-dark);
display: block;
width: 50px;
position: absolute;
z-index: 50;
top: -80px;
right: 5px;
padding: 12px 0;
border-radius: 15px
}
#navbar-navigation button.navbar-toggler svg {
width: 20px;
height: 20px;
fill: #fff
}
.new-navbar .navbar-name {
color: #fff;
margin: 0 auto;
overflow: hidden;
width: 100%;
text-align: center
}
.header-fugaz h2,
.header-fugaz h3 {
font-size: 17px
}
.box-modul-home .modul-content {
background: #f4f5f9;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 2px
}
.header-content .float-end a.btn {
margin: 0 0 7px
}
.alert.alert-event .alert-title {
display: block;
text-align: center;
background: #fff;
padding: 5px;
border-radius: 5px;
margin: 0 0 15px
}
.alert.alert-event {
display: block !important
}
.header-content .float-start,
.header-content .float-end {
float: none !important
}
.header-content .float-end a.btn {
display: block;
width: 100%
}
.header-content h2 {
font-size: 17px;
display: block;
text-align: center;
margin: 0 0 10px;
padding: 10px;
background: #fff;
border-radius: 10px
}
.leaderboard-row .col,
.list-rapor-murid .col,
.rapor-murid .col,
.box-kegiatan .col {
width: 100%
}
.leaderboard-row.row,
.rapor-murid,
.box-kegiatan .row {
display: block
}
.list-rapor-murid.row {
display: grid;
grid-template-columns: 50% 50%
}
#navbarSupportedContent {
position: relative
}
.search-class {
width: 100%;
margin: 0 0 10px
}
.search-row .col {
margin: 0;
padding: 0;
width: 100%;
display: block
}
.row.search-row {
display: block;
float: none !important;
margin: 0;
width: 100%
}
.col.search-class a {
display: block
}
#comments span.date,
#forum-kelas .link-tugas form,
.postedat {
display: none
}
.kirim-tugas a.btn,
.nilai-anggota,
.tugas-details .header-content h2,
ul.list-tugas .box-flex {
display: block
}
.card.kelas-card {
width: 100%;
box-sizing: border-box;
margin: 0 0 20px !important
}
ul.list-tugas a span.deadline {
margin: 15px auto;
width: 100%;
text-align: center
}
.link-tugas a b {
max-width: 100%;
display: block
}
.header-learning span {
display: block;
width: 100%;
margin: 5px 0 !important
}
ul.list-tugas.nilai-page span.deadline {
display: block;
overflow: hidden;
width: 100%;
margin: 10px 0;
text-align: center
}
.container-small .list-group-item {
display: block !important
}
ul.list-tugas li.link-tugas a {
max-width: 100%;
float: none
}
ul.list-tugas {
margin: 15px 0
}
.m-hidden {
display: none
}
a.nav-link.nav-notif {
position: absolute;
right: 0;
z-index: 2
}
.app-spinner {
left: 35.5%
}
body nav.navbar {
background: var(--primary-purple) !important;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px
}
.navbar .nav-item a,
.navbar-brand {
color: #fff
}
.navbar-brand img {
border-radius: 100%
}
button.navbar-toggler {
background: #fff;
border: none
}
a.nav-link.nav-notif,
.start-learning span.posted {
display: none
}
a.nav-link:hover {
background: rgb(248 249 250 / 18%)
}
.navbar .nav-item .dropdown-menu a {
color: #222
}
.navbar-nav .dropdown-menu {
position: relative;
z-index: 9999
}
.menu-mobile {
display: grid
}
.loader-app {
display: block
}
.new-navbar .navbar-buttons {
right: 10px
}
.new-navbar .container:after {
display: none
}
.new-navbar .container:before {
height: 100%
}
#navbar-navigation ul.navbar-nav li a {
height: 50px;
background: #fff;
border: 1px solid var(--primary-purple);
color: #222;
display: flex;
align-items: center;
justify-content: center
}
#navbar-navigation ul.navbar-nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
text-align: center
}
#navbar-navigation .navbar-nav .dropdown-menu {
top: 0
}
#navbar-navigation ul.dropdown-menu li a {
background: #fff;
border: none;
display: block;
height: auto
}
.new-navbar .round-profile img {
width: 70px;
height: 70px;
border: 5px solid #fff
}
.new-navbar .navbal-col {
top: 0;
display: block;
padding: 0
}
.new-navbar .namepoint-content {
font-size: 15px;
display: flex;
align-items: center;
flex-direction: row-reverse;
justify-content: center
}
#navbar-navigation nav.navbar {
border-radius: 0;
border: none;
background: transparent !important;
margin: 10px 0 0
}
.navbar .nav-item a,
.navbar-brand {
color: #222
}
.container-top3 {
max-width: 90%
}
.top3-name {
font-size: 15px
}
.top3-poin {
font-size: 20px
}
#navbar-navigation {
background: transparent
}
}
@media screen and (max-width:680px) {
.my-achievement .mission-list .mission-title i {
min-width: 35px
}
.myquest-header h2 {
font-size: 13px
}
#reading-mystudent h3,
.reading-wrapper h3 {
font-size: 14px
}
.rapor-wrapper a.show-desc {
display: none
}
.rapor-wrapper h3,
.myquest-header-right button {
font-size: 12px
}
.my-achievement .mission-list {
margin: 0 0 10px
}
.container.mobile-rapor-container {
padding: 0 5px
}
#prize-pool,
.content-prizepool {
display: block
}
.container-top3 {
max-width: 100%
}
#box-game .col {
padding: 0 5px;
margin: 0 0 5px
}
#box-game .list-rapor-murid .col {
width: 100%;
}
.profil-komentar a,
.box-modul-home .modul-matpel,
.full-desc {
font-size: 14px
}
.link-tugas a b,
.content-learning {
font-size: 15px
}
.bagian-konten {
height: 58vh;
padding: 5px 0 20px;
overflow-y: scroll
}
.box-iframe iframe {
height: 220px
}
.tugas-komentar {
margin: 15px 0 0
}
.materi-buttons {
position: absolute;
display: flex;
bottom: 15px;
right: 10px
}
#profile-box .card-img-top {
height: 150px
}
.emoji b {
display: none
}
#notif-wrapper .notif-pesan {
font-size: 13px
}
.game-empty-notif p {
font-size: 12.5px
}
}
/* GALLERY MONTH FILTER */
.gallery-date-filter {
background: #fff;
border-radius: 20px;
padding: 10px;
margin: 25px 0;
display: flex;
justify-content: center;
border: 2px solid var(--bg-light);
}
.gallery-date-filter .filter-container {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
justify-content: space-between;
max-width: 400px;
}
.gallery-date-filter .filter-btn {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-light);
border-radius: 15px;
color: var(--primary-purple);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 20px;
}
.gallery-date-filter .filter-btn:hover {
background: var(--primary-purple);
color: #fff;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(105, 74, 157, 0.2);
}
.gallery-date-filter .current-month {
text-align: center;
flex-grow: 1;
}
.gallery-date-filter .month-name {
display: block;
font-weight: 700;
font-size: 18px;
color: var(--primary-purple);
text-transform: uppercase;
font-family: 'Fugaz One', sans-serif;
line-height: 1.2;
}
.gallery-date-filter .year-name {
display: block;
font-size: 13px;
color: #888;
font-weight: 600;
letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
.gallery-date-filter {
padding: 8px;
}
.gallery-date-filter .month-name {
font-size: 16px;
}
}
/* MODERN GALLERY REDESIGN v2 */
.custom-gamemenu-scroller {
overflow-x: auto;
white-space: nowrap;
padding: 10px 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.custom-gamemenu-scroller::-webkit-scrollbar {
display: none;
}
.custom-gamemenu-scroller ul {
display: flex;
gap: 12px;
padding: 0;
margin: 0;
list-style: none;
}
.custom-gamemenu-scroller ul li {
display: inline-block;
}
.custom-gamemenu-scroller ul li a {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #fff;
border: 2px solid var(--bg-light);
border-radius: 50px;
color: #666;
font-weight: 600;
font-size: 13px;
transition: all 0.3s ease;
text-decoration: none;
}
.custom-gamemenu-scroller ul li a i {
font-size: 16px;
}
.custom-gamemenu-scroller ul li a:hover,
.custom-gamemenu-scroller ul li a.active {
background: var(--primary-purple);
color: #fff;
border-color: var(--primary-purple);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(105, 74, 157, 0.2);
}
.gallery-container-v2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
@media (max-width: 576px) {
.gallery-container-v2 {
grid-template-columns: 1fr;
gap: 20px;
}
}
.gallery-card-v2 {
background: #fff;
border-radius: 24px;
overflow: hidden;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.gallery-card-v2:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(105, 74, 157, 0.15);
}
.gallery-card-v2 .card-image-wrapper {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
}
.gallery-card-v2 .card-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.gallery-card-v2:hover .card-image-wrapper img {
transform: scale(1.1);
}
.gallery-card-v2 .category-badge {
position: absolute;
top: 15px;
right: 15px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(5px);
border-radius: 12px;
font-size: 11px;
font-weight: 700;
color: var(--primary-purple);
text-transform: uppercase;
z-index: 2;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.gallery-card-v2 .card-body-content {
padding: 20px;
flex-grow: 1;
}
.gallery-card-v2 .card-title-v2 {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: #2d3436;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.gallery-card-v2 .author-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 15px;
}
.gallery-card-v2 .author-meta i {
color: var(--primary-purple);
opacity: 0.7;
}
.gallery-card-v2 .author-meta span {
font-size: 13px;
color: #636e72;
font-weight: 500;
}
.gallery-card-v2 .date-meta {
font-size: 12px;
color: #b2bec3;
display: flex;
align-items: center;
gap: 6px;
}
.gallery-card-v2 .card-footer-v2 {
padding: 15px 20px;
background: #fdfcff;
border-top: 1px solid var(--bg-light);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.gallery-card-v2 .action-group {
display: flex;
gap: 8px;
}
.btn-gallery-action {
padding: 8px 15px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
border: none;
transition: all 0.3s ease;
}
.btn-like-v2 {
background: #eef2ff;
color: #6366f1;
}
.btn-like-v2.yes-like {
background: #6366f1;
color: #fff;
}
.btn-vote-v2 {
background: #fff4ed;
color: #f97316;
}
.btn-vote-v2.voted {
background: #00b894;
color: #fff;
}
.gallery-admin-tools {
position: absolute;
top: 15px;
left: 15px;
display: flex;
gap: 5px;
z-index: 3;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.gallery-card-v2:hover .gallery-admin-tools {
opacity: 1;
transform: translateX(0);
}
.btn-admin-v2 {
width: 35px;
height: 35px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.btn-admin-edit {
background: #00b894;
}
.btn-admin-delete {
background: #ff7675;
}
.ebook-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-purple) 0%, #a29bfe 100%);
display: flex;
align-items: center;
justify-content: center;
}
.ebook-placeholder i {
font-size: 60px;
color: rgba(255, 255, 255, 0.8);
}
/* MODERN GALLERY SHOW REDESIGN */
.gallery-detail-wrapper {
background: #fff;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
margin-top: 30px;
border: 1px solid var(--bg-light);
}
.gallery-detail-image {
width: 100%;
position: relative;
background: #f8f9fa;
}
.gallery-detail-image img {
width: 100%;
height: auto;
max-height: 600px;
object-fit: contain;
display: block;
}
.gallery-detail-ebook {
padding: 100px 20px;
background: linear-gradient(135deg, var(--primary-purple) 0%, #a29bfe 100%);
text-align: center;
color: #fff;
}
.gallery-detail-ebook i {
font-size: 80px;
margin-bottom: 20px;
display: block;
opacity: 0.9;
}
.gallery-detail-content {
padding: 40px;
}
@media (max-width: 768px) {
.gallery-detail-content {
padding: 25px;
}
}
.gallery-detail-header {
margin-bottom: 25px;
}
.gallery-detail-category {
display: inline-block;
padding: 6px 16px;
background: var(--bg-light);
color: var(--primary-purple);
border-radius: 50px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 15px;
letter-spacing: 0.5px;
}
.gallery-detail-title {
font-family: 'Fugaz One', sans-serif;
font-size: 28px;
color: #2d3436;
margin-bottom: 15px;
line-height: 1.3;
}
.gallery-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 25px;
border-bottom: 2px dashed var(--bg-light);
}
.gallery-meta-item {
display: flex;
align-items: center;
gap: 10px;
color: #636e72;
font-size: 14px;
font-weight: 600;
}
.gallery-meta-item i {
width: 35px;
height: 35px;
background: #fdfcff;
border: 1px solid var(--bg-light);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-purple);
}
.gallery-detail-description {
font-size: 16px;
line-height: 1.8;
color: #4b4b4b;
margin-bottom: 30px;
}
.gallery-nav-back {
margin-bottom: 20px;
}
.btn-nav-back {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-purple);
font-weight: 700;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
}
.btn-nav-back:hover {
color: #533b7d;
transform: translateX(-5px);
}
.btn-download-v2 {
background: var(--primary-purple);
color: #fff;
padding: 14px 30px;
border-radius: 15px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(105, 74, 157, 0.2);
}
.btn-download-v2:hover {
background: #533b7d;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(105, 74, 157, 0.3);
}
/* GALLERY STATUS BADGES */
.status-badges {
position: absolute;
top: 15px;
left: 15px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 3;
}
.badge-v2 {
padding: 6px 12px;
border-radius: 12px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4px);
}
.badge-newest {
background: linear-gradient(135deg, #ff7675 0%, #d63031 100%);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.badge-weekly {
background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.badge-v2 i {
font-size: 12px;
}
/* TOP 3 GALLERY SECTION */
.top-gallery-section {
margin-bottom: 40px;
padding: 0 10px;
}
.section-title-v2 {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
}
.section-title-v2 h3 {
font-size: 20px;
font-weight: 800;
margin: 0;
color: #2d3436;
}
.section-title-v2 .badge-top {
background: #ffeaa7;
color: #d63031;
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.top-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.top-card-v2 {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
border: 1px solid #f1f2f6;
display: flex;
flex-direction: column;
}
.top-card-v2:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.top-card-image {
width: 100%;
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
}
.top-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rank-indicator {
position: absolute;
top: 10px;
left: 10px;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 14px;
color: var(--primary-purple);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.rank-indicator.rank-1 {
background: #ffeaa7;
color: #d35400;
border: 2px solid #fdcb6e;
}
.rank-indicator.rank-2 {
background: #dfe6e9;
color: #2d3436;
border: 2px solid #b2bec3;
}
.rank-indicator.rank-3 {
background: #fab1a0;
color: #c0392b;
border: 2px solid #e17055;
}
.top-card-body {
padding: 15px;
flex-grow: 1;
}
.top-card-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #2d3436;
}
.top-card-owner {
font-size: 12px;
color: #636e72;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 5px;
}
.top-card-stats {
display: flex;
gap: 12px;
border-top: 1px solid #f1f2f6;
padding-top: 10px;
}
.stat-item-v2 {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
}
.stat-like {
color: #fd79a8;
}
.stat-vote {
color: #f97316;
}
@media screen and (max-width: 992px) {
.top-gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 600px) {
.top-gallery-grid {
grid-template-columns: 1fr;
}
.top-card-v2 {
flex-direction: row;
height: 100px;
}
.top-card-image {
width: 120px;
height: 100%;
aspect-ratio: auto;
}
.top-card-body {
padding: 10px 15px;
}
.top-card-stats {
border-top: none;
padding-top: 0;
}
}
/* RESPONSIVE FOR MY STUDENT / RAPOR LIST */
@media screen and (max-width: 1200px) {
.list-rapor-murid.row-cols-5>* {
flex: 0 0 auto;
width: 25%;
}
}
@media screen and (max-width: 992px) {
.list-rapor-murid.row-cols-5>* {
width: 33.333333%;
}
}
@media screen and (max-width: 768px) {
.list-rapor-murid.row-cols-5>* {
flex: 0 0 auto;
width: 50%;
}
}
@media screen and (max-width: 480px) {
.list-rapor-murid.row-cols-5 {
margin-left: -6px;
margin-right: -6px;
row-gap: 15px;
}
.list-rapor-murid.row-cols-5>* {
padding-left: 6px;
padding-right: 6px;
width: 50%;
flex: 0 0 50%;
}
.rapor-mbox {
padding: 20px 10px 25px;
/* Extra bottom padding for badge space */
border-radius: 18px;
min-height: 100%;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
justify-content: center;
}
.murid-imgbox img {
width: 75px;
height: 75px;
border-width: 3px;
margin-bottom: 5px;
}
.murid-titlebox {
flex: unset;
width: 100%;
}
.murid-titlebox h4 {
font-size: 13px;
margin: 10px 0 0;
min-height: auto;
max-height: none;
-webkit-line-clamp: 2;
text-align: center;
line-height: 1.35;
white-space: normal;
/* Ensure wrapping */
}
.murid-mylevel {
width: 34px;
height: 34px;
line-height: 30px;
font-size: 12px;
border-width: 2px;
bottom: -10px;
right: -5px;
position: absolute;
}
}
.modal-header.premium-header {
background: var(--primary-purple);
color: white;
padding: 12px 20px;
border-bottom: none;
}
.project-item.premium-card {
border: 1px solid #eef2f6;
border-radius: 10px;
background: #ffffff;
transition: all 0.2s ease;
border-left: 4px solid var(--primary-bright);
margin-bottom: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.coin-converter-container {
max-width: 600px;
margin: 0 auto;
}
.coin-balance-card {
background: linear-gradient(135deg, var(--primary-purple) 0%, var(--secondary-purple) 100%);
border-radius: 20px;
padding: 30px;
color: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
margin-bottom: 30px;
}
.coin-balance-card h3 {
font-size: 16px;
font-weight: 600;
opacity: 0.9;
margin-bottom: 15px;
}
.coin-balance-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
.coin-balance-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.coin-balance-item i {
font-size: 32px;
margin-bottom: 10px;
display: block;
}
.coin-balance-item .coin-icon {
width: 48px;
height: 48px;
margin-bottom: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}
.coin-balance-item .coin-label {
font-size: 13px;
opacity: 0.85;
margin-bottom: 5px;
}
.coin-balance-item .coin-amount {
font-size: 28px;
font-weight: 700;
display: block;
}
.converter-card {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.converter-card h4 {
font-size: 20px;
font-weight: 700;
margin-bottom: 25px;
color: #333;
}
.conversion-rate {
background: var(--bg-light);
border-radius: 12px;
padding: 15px 20px;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 600;
color: var(--primary-purple);
}
.conversion-rate i {
font-size: 20px;
}
.coin-input-group {
margin-bottom: 20px;
}
.coin-input-group label {
font-weight: 600;
margin-bottom: 10px;
display: block;
color: #555;
}
.coin-input-wrapper {
position: relative;
}
.coin-input-wrapper input {
width: 100%;
padding: 15px 50px 15px 20px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
transition: all 0.3s ease;
}
.coin-input-wrapper input:focus {
border-color: var(--primary-purple);
outline: none;
box-shadow: 0 0 0 4px rgba(105, 74, 157, 0.1);
}
.coin-input-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--primary-purple);
font-size: 20px;
}
.quick-amounts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 25px;
}
.quick-amount-btn {
padding: 10px;
border: 2px solid var(--primary-purple);
background: white;
color: var(--primary-purple);
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.quick-amount-btn:hover {
background: var(--primary-purple);
color: white;
transform: translateY(-2px);
}
.conversion-preview {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
border-left: 4px solid var(--primary-purple);
}
.conversion-preview-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.conversion-preview-item:last-child {
margin-bottom: 0;
padding-top: 10px;
border-top: 2px dashed #ddd;
font-weight: 700;
color: var(--primary-purple);
}
.conversion-preview-label {
font-weight: 600;
color: #666;
}
.conversion-preview-value {
font-weight: 700;
font-size: 18px;
}
.btn-convert {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, var(--primary-purple) 0%, var(--secondary-purple) 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(105, 74, 157, 0.3);
}
.btn-convert:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(105, 74, 157, 0.4);
}
.btn-convert:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.info-box {
background: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
}
.info-box i {
color: #2196f3;
margin-right: 8px;
}
.info-box p {
margin: 0;
font-size: 14px;
color: #555;
}
#comments h3.no-data-yet {
font-size: 17px;
font-weight: 500;
text-align: center;
background: var(--bg-light);
padding: 40px 0;
margin: 0;
border-radius: 20px
}
@media screen and (max-width: 768px) {
.quick-amounts {
grid-template-columns: repeat(2, 1fr);
}
.coin-balance-card {
padding: 20px;
}
.converter-card {
padding: 20px;
}
}
/* REWARD SYSTEM UNIQUE STYLES BY BLANTER */
.bl-reward-item {
position: relative;
padding: 10px;
}
.bl-stock-badge {
position: absolute;
top: -5px;
right: -5px;
background: #ff4757;
color: #fff !important;
min-width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
border: 2px solid #fff;
z-index: 10;
}
.bl-btn-claim {
background: #e7a23a;
color: #fff !important;
border-radius: 8px;
padding: 10px 15px;
border: none;
font-weight: 700;
transition: all 0.3s;
display: block;
width: 100%;
text-align: center;
text-decoration: none;
font-size: 13px;
margin-top: 10px;
}
.bl-btn-claim:hover {
background: #000;
color: #fff !important;
}
.bl-btn-claim.disabled {
background: #e5e7eb;
color: #9ca3af !important;
cursor: not-allowed;
pointer-events: none;
}
.bl-status-waiting {
display: block;
background: #fef3c7;
color: #92400e;
padding: 8px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
margin-top: 10px;
text-align: center;
border: 1px dashed #f59e0b;
}
.bl-admin-claims {
background: #f9fafb;
padding: 20px;
border-radius: 12px;
margin-bottom: 30px;
border: 1px solid #e5e7eb;
}
.bl-gcoin-info {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
color: #fff;
padding: 10px 20px;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
/* PENDING REWARD CLAIMS TABLE IMPROVEMENT */
.bl-admin-claims {
background: #ffffff;
padding: 25px;
border-radius: 16px;
margin-bottom: 35px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border: 1px solid #f0f0f0;
}
.bl-admin-claims h4 {
font-weight: 800;
color: #2d3436;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
}
.bl-admin-claims h4 i {
color: #6c5ce7;
}
.bl-table-custom {
border-collapse: separate;
border-spacing: 0 8px;
width: 100%;
}
.bl-table-custom thead th {
background: #f8f9fa;
border: none;
padding: 12px 15px;
font-size: 13px;
color: #636e72;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
}
.bl-table-custom tbody tr {
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
transition: transform 0.2s;
}
.bl-table-custom tbody tr:hover {
transform: scale(1.005);
background: #fdfdfd;
}
.bl-table-custom tbody td {
padding: 15px;
border-top: 1px solid #f1f2f6;
border-bottom: 1px solid #f1f2f6;
font-size: 14px;
color: #2d3436;
}
.bl-table-custom tbody td:first-child {
border-left: 1px solid #f1f2f6;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.bl-table-custom tbody td:last-child {
border-right: 1px solid #f1f2f6;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.bl-user-badge {
display: flex;
flex-direction: column;
}
.bl-user-name {
font-weight: 700;
color: #2d3436;
}
.bl-user-role {
font-size: 11px;
color: #b2bec3;
text-transform: uppercase;
}
.bl-price-badge {
background: #fff3e0;
color: #e67e22;
padding: 4px 10px;
border-radius: 20px;
font-weight: 700;
font-size: 12px;
}
@media (max-width: 768px) {
.bl-admin-claims {
padding: 15px;
}
.bl-table-custom thead {
display: none;
}
.bl-table-custom tbody tr {
display: block;
margin-bottom: 15px;
border: 1px solid #f1f2f6;
border-radius: 12px;
padding: 10px;
}
.bl-table-custom tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
border: none !important;
text-align: right;
}
.bl-table-custom tbody td::before {
content: attr(data-label);
font-weight: 700;
text-align: left;
color: #636e72;
font-size: 12px;
}
.bl-table-custom tbody td:last-child {
border-top: 1px solid #f1f2f6 !important;
margin-top: 5px;
padding-top: 12px;
}
}