@font-face {
    font-family: 'Freakshow';
    src: url('../font/Freakshow.ttf') format('truetype');
}

.row {
    margin: 0;
}

.blockquote-custom {
    position: relative;
    font-size: 1.1rem;
    padding: 30px;
}

.blockquote-custom-icon h5 {
    margin-top: 8px;
    color: white;
    font-size: 18px;
    font-weight: 700;
}

.kepala .logo-img img {
    width: 180px;
}

.kepala .profile img {
    width: 80px;
    height: 80px;
}

/* bg-green */
.bg-green {
    background-color: #C4DFB4;
}

.bg-green img {
    width: 120px;
}

.bg-green h1 {
    font-size: 55px;
    font-family: 'Freakshow';
}

.bg-green h2 {
    font-size: 30px;
    font-weight: 700;
}

.bg-green p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 80%;
}

.bg-green a {
    text-decoration: none;
    font-weight: 200;
}

.bg-green .blockquote-custom-icon {
    background-color: #6FAC45;
    width: 150px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    right: 50px;
}

/* bg-yellow */
.bg-yellow {
    background-color: #FFBD06;
    margin-top: 33px;
}

.bg-yellow .blockquote-custom-icon {
    background-color: #C79302;
    width: 200px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50px;
}

.bg-yellow img {
    width: 120px;
}

.bg-yellow h2 {
    font-size: 30px;
    font-weight: 700;
}

.bg-yellow h6 {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 0;
}

.bg-yellow a {
    text-decoration: none;
    font-size: 12px;
    font-weight: 700
}

.bg-yellow .card {
    display: flex;
    flex-direction: column;
    background-color: #5D99D7;
    padding: 10px;
    border-radius: 30px;
    height: 450px;
}

.bg-yellow .hadists .card {
    height: 320px;
}

.bg-yellow .baby .hadists .card {
    height: 200px;
}

.bg-yellow .baby .card {
    height: 330px;
}

.bg-yellow p {
    font-size: 10px;
    background-color: white;
    border-radius: 30px;
    padding: 3px 5px;
}

.bg-yellow h4 {
    font-weight: 500;
    font-size: 12px;
}

.bg-yellow .check,
.bg-yellow .cross {
    width: 20px;
    margin-top: -13px;
}

.bg-yellow .status {
    margin-top: auto;
}

.bg-yellow .status h3 {
    font-size: 14px;
    border-radius: 30px;
    padding: 3px 15px;
    text-align: center;
}

.bg-yellow .status.progress-status h3 {
    background-color: orange;
    color: white;
}

.bg-yellow .status.tuntas-status h3 {
    background-color: #528332;
    color: white;
}

.bg-yellow .yellow-notif {
    margin-top: -15px;
}

.bg-yellow .yellow-notif p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 80px;
}

.bg-yellow .yellow-notif a {
    text-decoration: none;
    font-weight: 200;
    font-size: 14px;
}

/* bg-grey */
.bg-grey {
    background-color: #515151;
    margin-top: 33px;
}

.bg-grey .blockquote-custom-icon {
    background-color: #000000;
    width: 200px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-grey .sub .row {
    background-color: white;
    border-radius: 30px;
    margin: 0px 1px;
}

.bg-grey .sub p {
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 6px;
}

.bg-grey .check,
.bg-grey .cross {
    width: 20px;
    /* margin-top: -8px; */
}

.bg-grey .grey-notif p {
    font-weight: 500;
    font-size: 14px;
    background-color: #FFF1CC;
    padding: 10px;
    border-radius: 10px;
    height: 60px;
}

.bg-grey .grey-notif a {
    text-decoration: none;
    font-weight: 200;
    font-size: 14px;
}

/* bg-darkgreen */
.bg-darkgreen {
    background-color: #528236;
    margin-top: 33px;
}

.bg-darkgreen .blockquote-custom-icon {
    background-color: #9DCA85;
    width: 200px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-darkgreen .blockquote-custom-icon h5 {
    margin-top: 8px;
    color: black;
    font-size: 18px;
    font-weight: 700;
}

.bg-darkgreen .sub .row {
    background-color: white;
    border-radius: 30px;
    margin: 3px 1px;
}

.bg-darkgreen .sub p {
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 6px;
}

.bg-darkgreen .check,
.bg-darkgreen .check-none {
    width: 20px;
}

.bg-darkgreen .darkgreen-catatan p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 180px;
}

.bg-darkgreen .darkgreen-catatan a {
    text-decoration: none;
    font-weight: 200;
    font-size: 14px;
}

/* bg-brown */
.bg-brown {
    background-color: #833B0B;
    height: 232px;
}

.bg-brown .blockquote-custom-icon {
    background-color: #C19300;
    width: 200px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-brown .sub .row {
    background-color: white;
    border-radius: 30px;
    margin: 0px 1px;
}

.bg-brown .sub p {
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 6px;
}

.bg-brown .check,
.bg-brown .cross {
    width: 20px;
    /* margin-top: -8px; */
}

.bg-brown .brown-notif p {
    font-weight: 500;
    font-size: 14px;
    background-color: #FFF1CC;
    padding: 10px;
    border-radius: 10px;
    height: 40px;
}

.bg-brown .brown-notif a {
    text-decoration: none;
    font-weight: 200;
    font-size: 14px;
}

/* bg-blue */
.bg-blue {
    background-color: #006FC0;
}

.bg-blue .blockquote-custom-icon {
    background-color: #041C5C;
    width: 160px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-blue p {
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    padding: 3px 15px;
    font-weight: 700;
}

.bg-blue .check,
.bg-blue .cross {
    width: 20px;
    margin-top: -8px;
}

.bg-blue .card {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 30px;
}

.bg-blue .card p {
    background-color: rgba(255, 255, 255, 0);
    padding: 0px;
}

.bg-blue .card .sub p {
    background-color: white;
    font-weight: 400;
}

.bg-blue .notifikasi p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 100px;
}

.bg-blue a {
    text-decoration: none;
    font-weight: 200;
}

/* bg-orange */
.bg-orange {
    background-color: #C55B11;
    margin-top: 33px;
}

.bg-orange .blockquote-custom-icon {
    background-color: #825F00;
    width: 140px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-orange .menu p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
}

.bg-orange a {
    text-decoration: none;
    font-weight: 200;
}

.bg-orange p {
    font-weight: 500;
    font-size: 14px;
}

.bg-orange .progress {
    margin-top: 5px;
}

.bg-orange .catatan p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 110px;
}

.bg-orange a {
    text-decoration: none;
    font-weight: 200;
}

.bg-orange .sub .row {
    background-color: white;
    border-radius: 30px;
    margin-left: 1px;
    margin-bottom: 3px;
}

.bg-orange .sub p {
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 6px;
}

.bg-orange .check,
.bg-orange .check-none {
    width: 20px;
    /* margin-top: -8px; */
}

.bg-orange .persentase h1 {
    background-color: white;
    border-radius: 30px;
    padding: 35px 5px;
    text-align: center;
    width: 100%;
    font-size: 28px;
}

.bg-orange .gizi {
    margin-bottom: -10px;
}

.bg-orange .gizi p {
    color: white;
}

.bg-orange .orange {
    margin-top: 5px;
}

/* bg-black */
.bg-black {
    background-color: #000000;
    padding: 10px;
    margin-top: 33px;
    height: 232px;
}

.bg-black .blockquote-custom-icon {
    background-color: #ffffff;
    width: 140px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-black .blockquote-custom-icon h5 {
    color: red;
}

.bg-black .youtube {
    margin-top: 40px;
}

/* bg-blackb */
.bg-blackb {
    background-color: #000000;
    padding: 10px;
    margin-top: 20px;
    height: 220px;
}

.bg-blackb .blockquote-custom-icon {
    background-color: #ffffff;
    width: 140px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-blackb .blockquote-custom-icon h5 {
    color: red;
}

.bg-blackb .youtube {
    margin-top: 5px;
}

/* bg-mustard */
.recalling {
    margin-top: -425px;
}

.bg-mustard {
    background-color: #BE9000;
    margin-top: 20px;
}

.bg-mustard .blockquote-custom-icon {
    background-color: #A8D18D;
    width: 150px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50px;
}

.bg-mustard .blockquote-custom-icon h5 {
    margin-top: 8px;
    color: black;
    font-size: 18px;
    font-weight: 700;
}

.bg-mustard img {
    width: 120px;
}

.bg-mustard h1 {
    font-size: 55px;
    color: white;
    font-family: 'Freakshow';
}

.bg-mustard h2 {
    font-size: 30px;
    font-weight: 700;
    color: white;
}

.bg-mustard p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 80%;
}

.bg-mustard a {
    text-decoration: none;
    font-weight: 200;
}

/* bg-purple */
.bg-purple {
    background-color: #d65b5b;
    margin-top: -70px;
}

.bg-purple .blockquote-custom-icon {
    background-color: #B43F3F;
    width: 200px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-purple .sub .row {
    background-color: white;
    border-radius: 30px;
    margin: 0px 1px;
}

.bg-purple .sub p {
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 6px;
}

.bg-purple .check,
.bg-purple .cross {
    width: 20px;
    /* margin-top: -8px; */
}

.bg-purple .vocab {
    margin-bottom: 10px;
}

.bg-purple .aozora img {
    margin-left: -5px;
    width: 130px;
}

.bg-purple .aozora p {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: -40px;
    margin-top: 5px;
}

.bg-purple .aozora a {
    text-decoration: none;
    font-size: 12px;
    font-weight: 700
}

/* bg-tosca */
.bg-tosca {
    background-color: #9af8b9;
}

.bg-tosca img {
    width: 120px;
}

.bg-tosca h1 {
    font-size: 60px;
}

.bg-tosca h2 {
    font-size: 30px;
    font-weight: 700;
}

.bg-tosca p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 80%;
}

.bg-tosca a {
    text-decoration: none;
    font-weight: 200;
}

.bg-tosca .blockquote-custom-icon {
    background-color: #6aa143;
    width: 150px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    right: 50px;
}

/* bg-darkblue */
.bg-darkblue {
    background-color: #2e5495;
    margin-top: 25px;
}

.bg-darkblue .blockquote-custom-icon {
    background-color: #b60a9e;
    width: 200px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50px;
}

.bg-darkblue img {
    width: 120px;
}

.bg-darkblue h2 {
    font-size: 30px;
    font-weight: 700;
    color: white;
}

.bg-darkblue h6 {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 0;
    color: white;
}

.bg-darkblue a {
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.bg-darkblue .card {
    display: flex;
    flex-direction: column;
    background-color: #5D99D7;
    padding: 10px;
    border-radius: 30px;
    height: 450px;
}

.bg-darkblue .hadists .card {
    height: 320px;
}

.bg-darkblue .baby .hadists .card {
    height: 200px;
}

.bg-darkblue .baby .card {
    height: 330px;
}

.bg-darkblue p {
    font-size: 10px;
    background-color: white;
    border-radius: 30px;
    padding: 3px 5px;
}

.bg-darkblue h4 {
    font-weight: 500;
    font-size: 12px;
}

.bg-darkblue .check,
.bg-darkblue .cross {
    width: 20px;
    margin-top: -13px;
}

.bg-darkblue .status {
    margin-top: auto;
}

.bg-darkblue .status h3 {
    background-color: #528332;
    color: white;
    font-size: 14px;
    border-radius: 30px;
    padding: 3px 15px;
    text-align: center;
}

.bg-darkblue .darkblue-notif {
    margin-top: -15px;
}

.bg-darkblue .darkblue-notif p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 110px;
}

.bg-darkblue .darkblue-notif a {
    text-decoration: none;
    font-weight: 200;
    font-size: 14px;
}

/* bg-greyb */
.bg-greyb {
    background-color: #525252;
    margin-top: 25px;
}

.bg-greyb .blockquote-custom-icon {
    background-color: #000000;
    width: 200px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-greyb .blockquote-custom-icon h5 {
    margin-top: 8px;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 700;
}

.bg-greyb .sub .row {
    background-color: white;
    border-radius: 30px;
    margin: 3px 1px;
}

.bg-greyb .sub p {
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 6px;
}

.bg-greyb .check,
.bg-greyb .check-none {
    width: 20px;
}

.bg-greyb .greyb-catatan p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 180px;
}

.bg-greyb .greyb-catatan a {
    text-decoration: none;
    font-weight: 200;
    font-size: 14px;
}

/* bg-brownb */
.bg-brownb {
    background-color: #833b0b;
    margin-top: 10px;
}

.bg-brownb .blockquote-custom-icon {
    background-color: #be9000;
    width: 200px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-brownb .blockquote-custom-icon h5 {
    margin-top: 8px;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 700;
}

.bg-brownb .sub .row {
    background-color: white;
    border-radius: 30px;
    margin: 3px 1px;
}

.bg-brownb .sub p {
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 6px;
}

.bg-brownb .check,
.bg-brownb .check-none {
    width: 20px;
}

.bg-brownb .brownb-catatan p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 68px;
}

.bg-brownb .brownb-catatan a {
    text-decoration: none;
    font-weight: 200;
    font-size: 14px;
}

/* bg-lemon */
.bg-lemon {
    background-color: #c6c60e;
    margin-top: 10px;
}

.bg-lemon .blockquote-custom-icon {
    background-color: #365720;
    width: 140px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-lemon .menu p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
}

.bg-lemon a {
    text-decoration: none;
    font-weight: 200;
}

.bg-lemon p {
    font-weight: 500;
    font-size: 14px;
}

.bg-lemon .progress {
    margin-top: 5px;
}

.bg-lemon .catatan p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 110px;
}

.bg-lemon a {
    text-decoration: none;
    font-weight: 200;
}

.bg-lemon .sub .row {
    background-color: white;
    border-radius: 30px;
    margin-left: 1px;
    margin-bottom: 3px;
}

.bg-lemon .sub p {
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 6px;
}

.bg-lemon .check,
.bg-lemon .check-none {
    width: 20px;
}

.bg-lemon .persentase h1 {
    background-color: white;
    border-radius: 30px;
    padding: 35px 5px;
    text-align: center;
    width: 100%;
    font-size: 28px;
}

.bg-lemon .gizi {
    margin-bottom: -10px;
}

.bg-lemon .gizi p {
    color: white;
}

.bg-lemon .lemon {
    margin-top: 5px;
}

/* bg-pink */
.bg-pink {
    background-color: #f70399;
    margin-top: 10px;
}

.bg-pink .blockquote-custom-icon {
    background-color: #c00000;
    width: 140px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-pink .menu p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
}

.bg-pink a {
    text-decoration: none;
    font-weight: 200;
}

.bg-pink p {
    font-weight: 500;
    font-size: 14px;
}

.bg-pink .progress {
    margin-top: 5px;
}

.bg-pink .catatan p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 110px;
}

.bg-pink a {
    text-decoration: none;
    font-weight: 200;
}

.bg-pink .sub .row {
    background-color: white;
    border-radius: 30px;
    margin-left: 1px;
    margin-bottom: 3px;
}

.bg-pink .sub p {
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 6px;
}

.bg-pink .check,
.bg-pink .check-none {
    width: 20px;
}

.bg-pink .persentase h1 {
    background-color: white;
    border-radius: 30px;
    padding: 35px 5px;
    text-align: center;
    width: 100%;
    font-size: 28px;
}

.bg-pink .gizi {
    margin-bottom: -10px;
}

.bg-pink .gizi p {
    color: white;
}

.bg-pink .pink {
    margin-top: 5px;
}

/* bg-turquoise */
.bg-turquoise {
    background-color: #27b3b4;
    margin-top: 10px;
}

.bg-turquoise .blockquote-custom-icon {
    background-color: #0f8d89;
    width: 150px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50px;
}

.bg-turquoise .blockquote-custom-icon h5 {
    margin-top: 8px;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 700;
}

.bg-turquoise img {
    width: 120px;
}

.bg-turquoise h1 {
    font-size: 60px;
    color: white;
}

.bg-turquoise h2 {
    font-size: 30px;
    font-weight: 700;
    color: white;
}

.bg-turquoise p {
    font-weight: 500;
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    height: 80%;
}

.bg-turquoise a {
    text-decoration: none;
    font-weight: 200;
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1024px) {

    /* bg-green */
    .bg-green img {
        width: 100px;
    }

    .bg-green h1 {
        font-size: 40px;
    }

    .bg-green h2 {
        font-size: 30px;
    }

    /* bg-yellow */
    .bg-yellow .hadists .card {
        height: 325px;
    }

    .bg-yellow .baby .hadists .card {
        height: 200px;
    }

    .bg-yellow p {
        font-size: 8px;
    }

    /* bg-orange */
    .bg-orange {
        height: 525px;
    }

    .bg-orange .persentase h1 {
        border-radius: 30px;
        padding: 35px 5px;
        width: 100%;
        font-size: 16px;
    }

    .bg-orange p {
        font-size: 12px;
    }

    .bg-orange .sub p {
        font-size: 10px;
    }

    .bg-orange .check,
    .bg-orange .check-none {
        width: 20px;
        margin-top: -5px;
    }

    /* bg-black */
    .bg-black {
        height: 230px;
    }

    .bg-black .youtube iframe {
        height: 100%;
        width: 90%;
    }

    /* bg-brown */
    .bg-brown {
        height: 230px;
    }

    .bg-brown .sub p {
        font-size: 12px;
    }

    .bg-brown .check,
    .bg-brown .cross {
        width: 20px;
        margin-top: -5px;
    }

    .bg-brown .brown-notif p {
        font-size: 12px;
        height: 50px;
    }

    .bg-brown .brown-notif a {
        font-size: 12px;
    }

    /* bg-grey */

    .bg-grey .sub p {
        font-size: 12px;
    }

    .bg-grey .check,
    .bg-grey .cross {
        width: 20px;
        margin-top: -5px;
    }

    .bg-grey .grey-notif p {
        font-size: 12px;
        height: 70px;
    }

    .bg-grey .grey-notif a {
        font-size: 12px;
    }

    /* bg-darkgreen */
    .bg-darkgreen .darkgreen-catatan p {
        height: 125px;
    }

    /* bg-mustard */
    .bg-mustard img {
        width: 100px;
    }

    .bg-mustard h1 {
        font-size: 40px;
    }

    .bg-mustard h2 {
        font-size: 30px;
    }

    /* bg-purple */
    .bg-purple {
        margin-top: -35px;
    }
    
    .bg-purple .aozora img {
        margin-left: -15px;
        width: 110px;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    .kepala .logo-img img {
        width: 100px;
    }

    .kepala .profile img {
        width: 50px;
        height: 50px;
    }

    .row.mobile-no-gutters>[class^="col-"],
    .row.mobile-no-gutters>[class*=" col-"],
    .row.mobile-no-gutters>[class^="col"],
    .row.mobile-no-gutters>[class*=" col"] {
        padding-right: 3px;
        padding-left: 3px;
    }

    .row.mobile-no-gutters.hadist>[class^="col-4"] {
        padding-left: 10px;
    }

    .row.mobile-no-gutters.hadist>[class^="col-8"] {
        padding-right: 20px;
    }

    .row.mobile-no-gutters.quran-doa {
        margin-left: -3px;
    }

    .row.mobile-no-gutters.pretem>[class^="col-6 grey"] {
        padding-left: 15px;
    }

    .row.mobile-no-gutters.pretem>[class^="col-6 brown"] {
        padding-right: 15px;
    }

    .row.mobile-no-gutters.orange>[class^="col-7"] {
        padding-left: 10px;
    }

    .row.mobile-no-gutters.orange>[class^="col-5"] {
        padding-right: 10px;
    }

    .row.mobile-no-gutters.pink>[class^="col-7"] {
        padding-left: 10px;
    }

    .row.mobile-no-gutters.pink>[class^="col-5"] {
        padding-right: 10px;
    }

    .row.mobile-no-gutters.lemon>[class^="col-7"] {
        padding-left: 10px;
    }

    .row.mobile-no-gutters.lemon>[class^="col-5"] {
        padding-right: 10px;
    }

    .row.mobile-no-gutters.blue {
        padding-left: 5px;
        padding-right: 5px;
        margin-top: -10px;
        margin-bottom: -3px;
    }

    .row.mobile-no-gutters.blue.sub {
        padding-left: 20px;
        padding-right: 20px;
    }

    .row.mobile-no-gutters.yellow {
        padding-left: 12px;
        padding-right: 12px;
        margin-top: -10px;
    }

    .row.mobile-no-gutters.darkblue {
        padding-left: 12px;
        padding-right: 12px;
        margin-top: -10px;
    }

    .blockquote-custom {
        font-size: 1rem;
        padding: 30px 10px 10px 10px;
    }

    .blockquote-custom-icon h5 {
        font-size: 10px;
    }

    .pretem {
        margin-top: -15px;
    }

    /* bg-green */
    .bg-green img {
        width: 50px;
    }

    .bg-green h1 {
        font-size: 20px;
    }

    .bg-green h2 {
        font-size: 18px;
    }

    .bg-green p {
        font-size: 8px;
        padding: 5px 5px 0px 5px;
        height: 65%;
    }

    .bg-green .blockquote-custom-icon {
        width: 100px;
        top: -10px;
        right: 20px;
    }

    /* bg-yellow */
    .bg-yellow {
        margin-top: 10px;
    }

    .bg-yellow .blockquote-custom-icon {
        width: 160px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-yellow img {
        width: 50px;
    }

    .bg-yellow h2 {
        font-size: 18px;
    }

    .bg-yellow h6 {
        font-size: 8px;
        margin-bottom: -18px;
    }

    .bg-yellow a {
        font-size: 5px;
    }

    .bg-yellow p {
        font-size: 8px;
        padding: 1px;
        margin: 4px 0px 5px 8px;
    }

    .bg-yellow h4 {
        font-size: 10px;
    }

    .bg-yellow .check,
    .bg-yellow .cross {
        width: 15px;
        margin-top: -12px;
    }

    .bg-yellow .status h3 {
        font-size: 8px;
        padding: 2px 10px;
    }

    .bg-yellow .yellow-notif {
        margin-top: -30px;
    }

    .bg-yellow .yellow-notif p {
        font-size: 8px;
        padding: 8px;
        border-radius: 8px;
        margin-left: 0px;
        height: 50px;
    }

    .bg-yellow .yellow-notif a {
        font-size: 8px;
    }

    .bg-yellow .card {
        padding: 0px;
        border-radius: 5px;
        height: 250px;
    }

    .bg-yellow .hadists .card {
        height: 222px;
    }

    .bg-yellow .baby .hadists .card {
        height: 150px;
    }

    .bg-yellow .baby .card {
        height: 178px;
    }

    /* bg-grey */
    .bg-grey {
        margin-top: 10px;
    }

    .bg-grey .blockquote-custom-icon {
        width: 80px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-grey .sub .row {
        margin: 0px;
        border-radius: 20px;
        height: 20px;
    }

    .bg-grey .sub p {
        font-size: 8px;
        margin: 4px 0px 5px 8px;
    }

    .bg-grey .check,
    .bg-grey .cross {
        width: 15px;
        margin-top: -15px;
    }

    .bg-grey .grey-notif p {
        font-size: 8px;
        padding: 8px;
        border-radius: 8px;
        margin-left: 0px;
    }

    .bg-grey .grey-notif a {
        font-size: 8px;
    }

    /* bg-darkgreen */
    .bg-darkgreen {
        margin-top: 10px;
    }

    .bg-darkgreen .blockquote-custom-icon {
        width: 100px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-darkgreen .blockquote-custom-icon h5 {
        font-size: 10px;
    }

    .bg-darkgreen .sub .row {
        margin: 0px 0px 2px 0px;
        border-radius: 20px;
        height: 20px;
    }

    .bg-darkgreen .sub p {
        font-size: 8px;
        margin: 4px 0px 5px 8px;
    }

    .bg-darkgreen .check,
    .bg-darkgreen .check-none {
        width: 15px;
        margin-top: -15px;
    }

    .bg-darkgreen .darkgreen-catatan p {
        font-size: 8px;
        padding: 8px;
        border-radius: 8px;
        margin-left: 0px;
        height: 60px;
    }

    .bg-darkgreen .darkgreen-catatan a {
        font-size: 8px;
    }

    /* bg-brown */
    .bg-brown {
        height: 180px;
    }

    .bg-brown .blockquote-custom-icon {
        width: 80px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-brown .sub .row {
        margin: 0px;
        border-radius: 20px;
        height: 20px;
    }

    .bg-brown .sub p {
        font-size: 8px;
        margin: 4px 0px 5px 8px;
    }

    .bg-brown .check,
    .bg-brown .cross {
        width: 15px;
        margin-top: -15px;
    }

    .bg-brown .brown-notif p {
        font-size: 8px;
        padding: 8px;
        border-radius: 8px;
        margin-left: 0px;
    }

    .bg-brown .brown-notif a {
        font-size: 8px;
    }

    /* bg-blue */
    .bg-blue .blockquote-custom-icon {
        width: 100px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-blue p {
        font-size: 8px;
        padding: 1px;
        margin: 4px 0px 5px 8px;
    }

    .bg-blue .check,
    .bg-blue .cross {
        width: 15px;
        margin-top: -12px;
    }

    .bg-blue .card {
        border-radius: 20px;
    }

    .bg-blue .card p {
        font-size: 8px;
    }

    .bg-blue .notifikasi p {
        font-size: 8px;
        padding: 8px;
        border-radius: 8px;
        margin-top: -25px;
        margin-left: 0px;
        margin-right: 0px;
        height: 70px;
    }

    .bg-blue a {
        font-weight: 300;
    }

    /* bg-orange */
    .bg-orange {
        margin-top: 10px;
    }

    .bg-orange .blockquote-custom-icon {
        width: 80px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-orange .menu p,
    .bg-orange .catatan p {
        font-size: 8px;
        padding: 8px;
    }

    .bg-orange .catatan p {
        height: 70px;
    }

    .bg-orange .menu {
        margin-top: -10px;
    }

    .bg-orange p {
        font-size: 8px;
    }

    .bg-orange .sub .row {
        margin: 0px 0px 2px 0px;
        border-radius: 20px;
        height: 20px;
    }

    .bg-orange .sub p {
        font-size: 8px;
        margin: 4px 0px 5px 10px;
    }

    .bg-orange .check,
    .bg-orange .check-none {
        width: 15px;
        margin-top: -15px;
    }

    .bg-orange .persentase h1 {
        padding: 23px 1px;
        font-size: 14px;
        border-radius: 10px;
    }

    .bg-orange .gizi {
        margin-bottom: -15px;
    }

    .bg-orange .gizi .progress {
        margin-top: 1px;
        height: 10px;
        width: 90%;
        margin-left: 5px;
    }

    /* bg-black */
    .bg-black {
        margin-top: 20px;
        height: 180px;
    }

    .bg-black .blockquote-custom-icon {
        width: 80px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-black .blockquote-custom-icon h5 {
        font-size: 10px;
    }

    .bg-black .youtube {
        margin-top: -10px;
    }

    .bg-black .youtube iframe {
        width: 100%;
        height: 80%;
    }

    /* bg-blackb */
    .bg-blackb {
        margin-top: 10px;
        height: 113px;
    }

    .bg-blackb .blockquote-custom-icon {
        width: 80px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-blackb .blockquote-custom-icon h5 {
        font-size: 10px;
    }

    .bg-blackb .youtube {
        margin-top: -20px;
    }

    .bg-blackb .responsive-iframe {
        width: 100%;
        height: 100px;
    }

    /* bg-mustard */
    .recalling {
        margin-top: -293px;
    }

    .bg-mustard {
        margin-top: 10px;
    }

    .bg-mustard .blockquote-custom-icon {
        width: 100px;
        top: -10px;
        left: 20px;
    }

    .bg-mustard .blockquote-custom-icon h5 {
        margin-top: 8px;
        font-size: 10px;
    }

    .bg-mustard img {
        width: 50px;
    }

    .bg-mustard h1 {
        font-size: 20px;
    }

    .bg-mustard h2 {
        font-size: 18px;
    }

    .bg-mustard p {
        font-size: 8px;
        padding: 5px 5px 0px 5px;
        height: 65%;
    }

    .bg-mustard .emot {
        margin-left: -20px;
    }

    /* bg-purple */
    .bg-purple {
        margin-top: 0px;
    }

    .bg-purple .blockquote-custom-icon {
        width: 80px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-purple .sub .row {
        margin: 0px;
        border-radius: 20px;
        height: 20px;
    }

    .bg-purple .sub p {
        font-size: 8px;
        margin: 4px 0px 5px 8px;
    }

    .bg-purple .check,
    .bg-purple .cross {
        width: 15px;
        margin-top: -15px;
    }

    .bg-purple .vocab {
        margin-bottom: 10px;
    }

    .bg-purple .aozora {
        margin-left: -10px;
    }

    .bg-purple .aozora img {
        margin-left: -13px;
        width: 80px;
    }

    .bg-purple .aozora p {
        font-weight: 500;
        font-size: 8px;
        margin-bottom: -40px;
        margin-top: 5px;
        color: white;
    }

    .bg-purple .aozora a {
        text-decoration: none;
        font-size: 8px;
        font-weight: 700;
        color: white;
    }

    /* bg-tosca */
    .bg-tosca img {
        width: 50px;
    }

    .bg-tosca h1 {
        font-size: 24px;
    }

    .bg-tosca h2 {
        font-size: 18px;
    }

    .bg-tosca p {
        font-size: 8px;
        padding: 5px 5px 0px 5px;
        height: 65%;
    }

    .bg-tosca .blockquote-custom-icon {
        width: 100px;
        top: -10px;
        right: 20px;
    }

    /* bg-darkblue */
    .bg-darkblue {
        margin-top: 10px;
    }

    .bg-darkblue .blockquote-custom-icon {
        width: 160px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-darkblue img {
        width: 50px;
    }

    .bg-darkblue h2 {
        font-size: 12px;
    }

    .bg-darkblue h6 {
        font-size: 8px;
        margin-bottom: -18px;
    }

    .bg-darkblue a {
        font-size: 5px;
    }

    .bg-darkblue p {
        font-size: 8px;
        padding: 1px;
        margin: 4px 0px 5px 8px;
    }

    .bg-darkblue h4 {
        font-size: 10px;
    }

    .bg-darkblue .check,
    .bg-darkblue .cross {
        width: 15px;
        margin-top: -12px;
    }

    .bg-darkblue .status h3 {
        font-size: 8px;
        padding: 2px 10px;
    }

    .bg-darkblue .darkblue-notif {
        margin-top: -30px;
    }

    .bg-darkblue .darkblue-notif p {
        font-size: 8px;
        padding: 8px;
        border-radius: 8px;
        margin-left: 0px;
        height: 50px;
    }

    .bg-darkblue .darkblue-notif a {
        font-size: 8px;
    }

    .bg-darkblue .card {
        padding: 0px;
        border-radius: 5px;
        height: 250px;
    }

    .bg-darkblue .hadists .card {
        height: 222px;
    }

    .bg-darkblue .baby .hadists .card {
        height: 121px;
    }

    .bg-darkblue .baby .card {
        height: 178px;
    }

    /* bg-greyb */
    .bg-greyb {
        margin-top: 10px;
    }

    .bg-greyb .blockquote-custom-icon {
        width: 100px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-greyb .blockquote-custom-icon h5 {
        font-size: 10px;
    }

    .bg-greyb .sub .row {
        margin: 0px 0px 2px 0px;
        border-radius: 20px;
        height: 20px;
    }

    .bg-greyb .sub p {
        font-size: 8px;
        margin: 4px 0px 5px 8px;
    }

    .bg-greyb .check,
    .bg-greyb .check-none {
        width: 15px;
        margin-top: -15px;
    }

    .bg-greyb .greyb-catatan p {
        font-size: 8px;
        padding: 8px;
        border-radius: 8px;
        margin-left: 0px;
        height: 68px;
    }

    .bg-greyb .greyb-catatan a {
        font-size: 8px;
    }

    /* bg-brownb */
    .bg-brownb {
        margin-top: 0px;
    }

    .bg-brownb .blockquote-custom-icon {
        width: 100px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-brownb .blockquote-custom-icon h5 {
        font-size: 10px;
    }

    .bg-brownb .sub .row {
        margin: 0px 0px 2px 0px;
        border-radius: 20px;
        height: 20px;
    }

    .bg-brownb .sub p {
        font-size: 8px;
        margin: 4px 0px 5px 8px;
    }

    .bg-brownb .check,
    .bg-brownb .check-none {
        width: 15px;
        margin-top: -15px;
    }

    .bg-brownb .brownb-catatan p {
        font-size: 8px;
        padding: 8px;
        border-radius: 8px;
        margin-left: 0px;
        height: 60px;
    }

    .bg-brownb .brownb-catatan a {
        font-size: 8px;
    }

    /* bg-lemon */
    .bg-lemon {
        margin-top: 0px;
    }

    .bg-lemon .blockquote-custom-icon {
        width: 80px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-lemon .menu p,
    .bg-lemon .catatan p {
        font-size: 8px;
        padding: 8px;
    }

    .bg-lemon .catatan p {
        height: 70px;
    }

    .bg-lemon .menu {
        margin-top: -10px;
    }

    .bg-lemon p {
        font-size: 8px;
    }

    .bg-lemon .sub .row {
        margin: 0px 0px 2px 0px;
        border-radius: 20px;
        height: 20px;
    }

    .bg-lemon .sub p {
        font-size: 8px;
        margin: 4px 0px 5px 10px;
    }

    .bg-lemon .check,
    .bg-lemon .check-none {
        width: 15px;
        margin-top: -15px;
    }

    .bg-lemon .persentase h1 {
        padding: 23px 1px;
        font-size: 14px;
        border-radius: 10px;
    }

    .bg-lemon .gizi {
        margin-bottom: -15px;
    }

    .bg-lemon .gizi .progress {
        margin-top: 1px;
        height: 10px;
        width: 90%;
        margin-left: 5px;
    }

    /* bg-pink */
    .bg-pink {
        margin-top: 0px;
    }

    .bg-pink .blockquote-custom-icon {
        width: 80px;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .bg-pink .menu p,
    .bg-pink .catatan p {
        font-size: 8px;
        padding: 8px;
    }

    .bg-pink .catatan p {
        height: 70px;
    }

    .bg-pink .menu {
        margin-top: -10px;
    }

    .bg-pink p {
        font-size: 8px;
    }

    .bg-pink .sub .row {
        margin: 0px 0px 2px 0px;
        border-radius: 20px;
        height: 20px;
    }

    .bg-pink .sub p {
        font-size: 8px;
        margin: 4px 0px 5px 10px;
    }

    .bg-pink .check,
    .bg-pink .check-none {
        width: 15px;
        margin-top: -15px;
    }

    .bg-pink .persentase h1 {
        padding: 23px 1px;
        font-size: 14px;
        border-radius: 10px;
    }

    .bg-pink .gizi {
        margin-bottom: -15px;
    }

    .bg-pink .gizi .progress {
        margin-top: 1px;
        height: 10px;
        width: 90%;
        margin-left: 5px;
    }

    /* bg-turquoise */
    .bg-turquoise {
        margin-top: 0px;
    }

    .bg-turquoise .blockquote-custom-icon {
        width: 100px;
        top: -10px;
        left: 20px;
    }

    .bg-turquoise .blockquote-custom-icon h5 {
        margin-top: 8px;
        font-size: 10px;
    }

    .bg-turquoise img {
        width: 50px;
    }

    .bg-turquoise h1 {
        font-size: 25px;
    }

    .bg-turquoise h2 {
        font-size: 18px;
    }

    .bg-turquoise p {
        font-size: 8px;
        padding: 5px 5px 0px 5px;
        height: 65%;
    }

    .bg-turquoise .emot {
        margin-left: -20px;
    }
}


.floating-button {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff0000;
    /* Red background color */
    color: white;
    border: none;
    border-radius: 30px;
    /* Oval shape */
    width: 120px;
    /* Wider width for oval shape */
    height: 40px;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-select-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.custom-select-container img {
    width: 100px;
    height: 100px;
    cursor: pointer;
    margin: 10px;
    transition: transform 0.2s;
}

.custom-select-container img:hover {
    transform: scale(1.1);
}

.hidden-select {
    display: none;
}