@import url("utama.css");
/* html {
    scroll-behavior: smooth;
} */
/* COLOR============================================================================================ */
/* to top */
/* CEKBOX
*/
.pin-number {
    height: 15px;
    width: 15px;
    font-size: 9px;
    position: absolute;
    top: -5px;
    right: -3px;
}

.cat {
    margin: 4px;
    background-color: var(--lightgrey);
    border-radius: 9px;
    /* border: 1px solid var(--grey); */
    /* overflow: hidden; */
    /* float: left; */
}
.text-justify {
    text-align: justify;
}

.modal {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.modal-header {
    border-bottom: none !important;
}
.cat label {
    /* float: left; */
    line-height: 2em;
    width: 100%;
    height: 2em;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 155, 155, 0.5) transparent; /* adjust the color as needed */
}

/* WebKit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 6px; /* adjust the width as needed */
}

.cat label span {
    text-align: center;
    padding: 3px 0;
    display: block;
}

.cat label input {
    position: absolute;
    display: none;
    color: var(--color2) !important;
}

/* selects all of the text within the input element and changes the color of the text */
.cat label input + span {
    color: var(--color2);
    border-radius: 9px;
    cursor: pointer;
}

/* This will declare how a selected input will look giving generic properties */
.cat input:checked + span {
    color: #ffffff;
    /* text-shadow: 0 0 6px rgba(0, 0, 0, 0.8); */
}

/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.action input:checked + span {
    background-color: var(--green);
}

.comedy input:checked + span {
    background-color: var(--red);
}

.crime input:checked + span {
    background-color: #d9d65d;
}

.history input:checked + span {
    background-color: #82d44e;
}

.reality input:checked + span {
    background-color: #f3a4cf;
}

.news input:checked + span {
    background-color: #8c1b1b;
}

.scifi input:checked + span {
    background-color: #ac9bd1;
}

.sports input:checked + span {
    background-color: #214a09;
}

#button {
    display: inline-block;
    background-color: #ff9800;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

a {
    color: #4a4a4a;
    text-decoration: none !important;
}
.bg-header {
    background: rgb(58, 123, 213);
    background: linear-gradient(
        159deg,
        rgba(58, 123, 213, 1) 0%,
        rgba(255, 66, 255, 1) 100%
    );
}

.bg-sidebar {
    background: rgb(58, 123, 213);
    background: linear-gradient(
        180deg,
        rgba(58, 123, 213, 1) 0%,
        rgba(0, 210, 255, 1) 100%
    );
}

#daftar-isi {
    min-height: 100vh;
}

/* Sidebar***************************************************************************************** */

#sidebar {
    color: white;
    margin: 0;
    padding: 0;
    width: 300px;
    /* background: rgb(58, 123, 213);
    background: linear-gradient( 180deg, rgba(58, 123, 213, 1) 0%, rgba(0, 210, 255, 1) 100%); */
    /* background-color: var(--color5); */
    background-color: var(--mblue2);
    position: fixed;
    max-height: 100%;
    overflow: auto;
    border-radius: 0px;
    top: 0px;
    bottom: 0px;
    overflow: visible;
    overflow-y: auto;
    padding-top: 10px;
}

#sidebar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */

#sidebar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#sidebar .menu {
    transition: 0.5s;
}

#sidebar .menu:hover {
    background-color: var(--yblue1);
    color: white;
    border-radius: 10px;
}

#sidebar a {
    display: block;
    color: var(--light);
    padding: 16px;
    text-decoration: none;
}

#sidebar .menu-isi:hover {
    background-color: #0d56bb;
    color: white;
    border-radius: 10px;
}

/* Typografi************************************************************************************** */

.judul-daftar {
    font-size: 16px;
}

.text-normal {
    font-size: 20px;
    /* font-family: "Nunito", sans-serif; */
    text-align: justify;
    text-justify: inter-word;
}

.text-icon {
    font-size: 9px;
}

.line-card {
    overflow: hidden;
    background-color: white;
    border-radius: 7px;
    border: solid 1px lightgrey;
}
.line-card-dark {
    overflow: hidden;
    background-color: white;
    border-radius: 7px;
    border: solid 1px lightgrey;
}

.line-card > div:first-child {
    background: var(--blue-alpha);
    padding: 0.4em;
    padding-left: 0.8em;
    font-weight: bolder;
    color: var(--blue);
    font-size: 15px;
}

.line-card-dark > div:first-child {
    background: var(--mblue2);
    padding: 0.4em;
    padding-left: 0.8em;
    font-weight: bolder;
    color: var(--white);
    font-size: 15px;
}

.menu-bawah .menu-utama.active .text-icon {
    font-weight: bolder;
}

.text-daftarisi {
    font-size: 20px;
}

.text-tahukah {
    font-size: 16px;
}

.text-menu {
    /* margin-top: 10px; */
    font-size: 13px;
}

.mapel {
    width: 100%;
    outline: none;
    font-size: 20px;
}

.judulbab {
    font-size: 18px;
}

.judul-header {
    font-size: 24px;
    font-weight: 550;
    font-family: sans-serif;
}

.sub-judul-header {
    font-size: 14px;
    font-style: italic;
}

.header-1 {
    font-size: 32px;
}

.header-2 {
    font-size: 24px;
}

.katex {
    /* text-rendering: auto;
    font: normal 5em;
    font-family: serif;
    line-height: 1.2;
    text-indent: 0; */
    /* Setting default */
    text-rendering: auto;
    font: normal 1.1em KaTeX_Main, Times New Roman, serif;
    line-height: 1.2;
    text-indent: 0;
}

.img-tahukah {
    width: 200px;
    margin-right: 10px;
}

.overlay {
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
    background: linear-gradient(
            180deg,
            rgba(144, 218, 255, 0.8752451664259454) 0%,
            rgba(204, 238, 255, 0.7716037098433124) 100%
        ),
        url("../img/lab.jpeg") no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
}

/* MENU dan BUTTON================================================================================================== */

.icon-bawah {
    font-size: 1.2rem;
}

.btn-nav {
    /* margin-left: 310px; */
    margin-left: 20px;
}

.menu.active {
    background-color: var(--oblue2);
    color: white;
    border-radius: 10px;
}

.menu-utama {
    text-decoration: none;
    transition: 0.3s;
}

.menu-isi {
    text-decoration: none;
    transition: 0.3s;
}

#sidebar .menu-utama.active {
    /* background-color: #0d56bb; */
    background-color: var(--mblue1);
    color: white;
    border-radius: 10px;
}

.menu-bawah .menu-utama.active,
.menu-bawah .menu-utama.active .bi {
    color: #0d56bb;
    font-weight: bold;
}

#sidebar .menu-utama:hover {
    /* background-color: #0d56bb; */
    background-color: var(--mblue1);
    color: white;
    border-radius: 10px;
}

.collapsebab .menu-utama:hover {
    background-color: #0d56bb;
    color: white;
    border-radius: 10px;
}

.lyr-ajax-page {
    height: 100%;
}

.collapsebab {
    background: rgb(58, 123, 213);
    background: linear-gradient(
        100deg,
        rgba(58, 123, 213, 1) 0%,
        rgba(0, 208, 255, 1) 100%
    );
}

@media screen and (max-width: 768px) {
    #sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    .mapel {
        font-size: 16px;
    }
    .judul-header {
        font-size: 20px;
    }
    .sub-judul-header {
        font-size: 12px;
    }
    .judulbab {
        font-size: 16px;
    }
    #sidebar,
    .head-side {
        display: none;
    }
}

/* END MODEL BARU */

/*CUSTOMISASI OL*/

ol.custom-marker {
    counter-reset: list;
    margin-left: -12px;
}

.naskah ol,
.naskah ul {
    margin-left: -20px;
}

ol.custom-marker > li {
    list-style: none;
    counter-increment: list;
}

/*List satu kurung*************************************/

ol.custom-marker.parens-after.decimal > li::marker {
    content: counter(list, decimal) ")\a0";
}

ol.custom-marker.parens-after.lower-alpha > li::marker {
    content: counter(list, lower-alpha) ")\a0";
}

ol.custom-marker.parens-after.upper-alpha > li::marker {
    content: counter(list, upper-alpha) ")\a0";
}

ol.custom-marker.parens-after.lower-roman > li::marker {
    content: counter(list, lower-roman) ")\a0";
}

ol.custom-marker.parens-after.upper-roman > li::marker {
    content: counter(list, upper-roman) ")\a0";
}

/******************************************************/

/*List dua kurung+++++++++++++++++++++++++++++++++++++++++*/

ol.custom-marker.parens-around.decimal > li::marker {
    content: "(" counter(list, decimal) ")\a0";
}

ol.custom-marker.parens-around.lower-alpha > li::marker {
    content: "(" counter(list, lower-alpha) ")\a0";
}

ol.custom-marker.parens-around.upper-alpha > li::marker {
    content: "(" counter(list, upper-alpha) ")\a0";
}

ol.custom-marker.parens-around.lower-roman > li::marker {
    content: "(" counter(list, lower-roman) ")\a0";
}

ol.custom-marker.parens-around.upper-roman > li::marker {
    content: "(" counter(list, upper-roman) ")\a0";
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/***********************/

.judul-session {
    font-size: 22px;
    font-weight: bold;
    color: var(--oblue2);
    margin-bottom: 20px;
}

.kecil-hilang {
    visibility: visible;
    display: block;
}

.kecil-muncul {
    visibility: hidden;
    display: none;
}

/*Posisi center dengan wrapping kalau overflow*/

.card-bayang {
    box-shadow: 5px 5px 5px lightgrey;
}

.h-scroll {
    white-space: nowrap;
    overflow-x: auto;
}

.info-img {
    margin-top: 15px;
    margin-bottom: 20;
    font-size: 14px;
    color: grey;
    text-align: center;
}

.tombol-layang {
    background-image: url("../img/menu.svg");
    /*background-color: darkred;*/
    opacity: 0.5;
    background-size: cover;
    width: 60px;
    height: 60px;
    position: fixed;
    z-index: 100;
    bottom: 25px;
    right: 20px;
    border-radius: 50% 50%;
    cursor: pointer;
}
.table td {
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}
.img-menu {
    height: 45px;
}

#btn_daftarisi {
    width: 40px;
    height: 40px;
    position: fixed;
    background-color: var(--yellow2);
    opacity: 0.6;
    right: 20px;
    bottom: 20px;
    display: none;
    z-index: 10;
}
/*CARD*/

/*CARD*/

.card-mn {
    border-radius: 8px;
    border: 1px solid lightgrey;
    /* display: flex; */
    align-items: center;
    align-content: center;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: grey;
    background-color: white;
    /* width: 120px;
  height: 120px; */
    /* padding-top: 30px;;
    padding-bottom: 30px; */
}

.card-image img {
    max-height: 100%;
    max-width: 100%;
    height: 80px;
    border-radius: 8px 8px 0px 0;
}

.card-action {
    position: relative;
    float: right;
    margin-top: -25px;
    margin-right: 20px;
    z-index: 2;
    color: #e26d5c;
    background: #fff;
    border-radius: 100%;
    padding: 10px;
    font-size: 12px;
}

.card-action:hover {
    color: #fff;
    background: #e26d5c;
    /* -webkit-animation: pulse 1.5s infinite; */
}

.card-heading {
    font-size: 18px;
    font-weight: bold;
    background: #fff;
    padding-top: 30px;
}

.card-text {
    padding-bottom: 20px;
    background: #fff;
    font-size: 12px;
    color: #636262;
}

.card-button {
    display: flex;
    font-size: 10px;
    font-weight: bold;
    justify-content: center;
    /* padding: 10px 0; */
    width: 100%;
    /* background-color: var(--yblue1); */
    color: var(--mblue2);
    border-radius: 0 0 8px 8px;
}

.card-button2 {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    width: 100%;
    background-color: var(--yellow2);
    color: #fff;
    border-radius: 0 0 8px 8px;
}

.card-button3 {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    width: 100%;
    background-color: var(--oblue2);
    color: #fff;
    border-radius: 0 0 8px 8px;
}

/*END CARD*/

.judul-menu {
    font-size: 20px;
    font-weight: bold;
    padding: 0px;
    margin: 0px;
}

@media screen and (max-width: 576px) {
    .text-menu {
        font-size: 12px;
    }
    .card-button,
    .card-button2,
    .card-button3 {
        font-size: 12px;
    }
    /* .card-image {
    padding: 2px;
  } */
    .text-daftarisi {
        font-size: 16px;
    }
    .judul-menu {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .sembunyi {
        display: none;
    }
    .judul-naskah {
        font-size: 16px;
    }
    .overlay {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .nomor-bab {
        font-size: 28px;
    }
    .btn-nav {
        margin-left: 10px;
    }
}

.judul-modul {
    font-size: 60px;
    font-weight: bold;
    line-height: 50px;
}

.subjudul-modul {
    font-size: 20px;
    font-weight: bold;
    color: grey;
    /*line-height: 1px;*/
}

.judul-subbab {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    display: inline-block;
    color: var(--oblue2);
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    /*width: 100%;*/
}

#sidebar .btn-daftar-isi {
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.menu-bawah a {
    color: grey;
    margin: 0px;
}

.menu-bawah .btn-daftar-isi {
    position: fixed;
    bottom: 50px;
    font-size: 20px;
    background-color: white;
    right: 5px;
    z-index: 100;
    color: rgb(228, 228, 228);
    border-radius: 10px 0px 0px 10px;
}
.caption-group {
    font-size: 17px;
}
.tombol-menu {
    border-radius: 20px;
    height: 140px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.bg-card {
    background-position: right bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../img/bg/bg-card-big.svg");
}
.menu-siswa .tombol-menu {
    height: 110px;
    overflow: hidden;
}
.tombol-menu:hover,
.tombol-menu:active {
    /* background-color:#DAE6F9; */
    background-color: var(--blue-alpha);
    /* border: solid lightgrey 1px; */
}
.naskah p,
.naskah ul,
.naskah div {
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 30px;
    text-align: justify;
    /*justify-content: flex-start;*/
    font-family: "Nunito", sans-serif;
    /*margin-left: 20px;*/
}

.naskah-soal p,
.naskah-soal ul,
.naskah-soal div {
    font-size: 17px;
}

.naskah-materi p,
.naskah-materi ul,
.naskah-materi div {
    font-size: 15px;
}

.img-header-nf {
    height: 150px;
    margin-top: -10px;
    margin-right: -10px;
    transform: rotate(20deg);
}

.katex-html {
    line-height: 2.3 !important;
}
.naskah p {
    line-height: 25px;
}

.judul-subbab:focus {
    outline: none !important;
}

/*TOMBOL DI HOME*/

/*Small devices (landscape phones, 576px and up)*/

@media (max-width: 576px) {
    .naskah-soal p,
    .naskah-soal ul,
    .naskah-soal div {
        font-size: 13px;
    }

    .judul-subbab {
        font-size: 16px;
        margin-bottom: 15px;
        font-weight: bold;
        display: inline-block;
        color: var(--oblue2);
        font-family: "Roboto", sans-serif;
        text-decoration: none;
        /*width: 100%;*/
    }
    .img-menu {
        height: 33px;
    }
    .lyr-home {
        margin-bottom: 100px;
    }
    /* .text-menu {
        padding-left: 4px;
        padding-right: 4px;
    } */
    .card-image img {
        height: 40px;
    }
    /* .menu-wrapper {
    height: 300px;
  } */
    .card-sl {
        height: 80px;
        width: 80px;
        /* background: none; */
        /* border: none; */
    }
    .text-kecil {
        font-size: 14px;
    }
    .text-tahukah {
        font-size: 13px;
    }
    .tombol-layang {
        height: 45px;
        width: 45px;
    }
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }

    .naskah {
        margin-bottom: 28px;
        font-size: 13px;
        line-height: 25px;
        text-align: left;
        /*justify-content: flex-start;*/
        font-family: "Nunito", sans-serif;
        margin-left: 0px;
    }
}

@media (min-width: 576px) {
    #btn_daftarisi {
        right: 10px;
    }

    .daftar-isi {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/*Medium devices (tablets, 768px and up)*/

@media (max-width: 768px) {
    .naskah-soal p,
    .naskah-soal ul,
    .naskah-soal div {
        font-size: 15px;
    }

    .judul-modul {
        font-size: 35px;
    }
    .tombol-menu {
        height: 80px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    .kecil-hilang {
        visibility: hidden;
        display: none;
    }
    .card-bayang {
        box-shadow: none;
    }
    .kecil-muncul {
        visibility: visible;
        display: block;
    }
    .subjudul-modul {
        font-size: 14px;
        margin-left: 20px;
        margin-right: 20px;
        /*font-weight: normal;*/
        color: grey;
    }
    .text-normal {
        font-size: 16px;
    }
    .text-judul1 {
        font-size: 28px;
    }
    .text-judul2 {
        font-size: 24px;
    }
    .text-judul3 {
        font-size: 22px;
    }
}

/*Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {
}

/*.naskah{
	margin-left: 20px;
	}*/

/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
}

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */

/* TAMPILAN SOPEL===================================================================================== */