body{min-height:-webkit-fill-available;font-family:'Poppins',Arial,sans-serif;background:#fff}html{height:-webkit-fill-available}.b-example-divider{width:100%;height:100vh;overflow-y:scroll;background-color:#f8f9fa;border:solid rgb(0 0 0 / .15);border-width:1px 0;box-shadow:inset 0 .5em 1.5em rgb(0 0 0 / .1),inset 0 .125em .5em rgb(0 0 0 / .15)}.bi{vertical-align:-.125em;poPoppins-events:none;fill:currentColor}.dropdown-toggle{outline:0}.nav-flush .nav-link{border-radius:0}.btn-toggle{display:inline-flex;align-items:center;padding:.25rem .5rem;font-weight:600;color:rgb(0 0 0 / .65);background-color:#fff0;border:0}.btn-toggle:hover,.btn-toggle:focus{color:rgb(0 0 0 / .85);background-color:#d2f4ea}.btn-toggle::before{width:1.25em;line-height:0;content:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");transition:transform .35s ease;transform-origin:.5em 50%}.btn-toggle[aria-expanded="true"]{color:rgb(0 0 0 / .85)}.btn-toggle[aria-expanded="true"]::before{transform:rotate(90deg)}.btn-toggle-nav a{display:inline-flex;padding:.1875rem .5rem;margin-top:.125rem;margin-left:1.25rem;text-decoration:none}.btn-toggle-nav a:hover,.btn-toggle-nav a:focus{background-color:#d2f4ea}.scrollarea{overflow-y:auto}.fw-semibold{font-weight:600}.lh-tight{line-height:1.25}.nav-pills .nav-link{margin:4px 0}#mynavbar{background:#1f2937!important}#mynavbar a.nav-link.active{background:#111827;color:#fff}#mynavbar a.nav-link{color:#eee!important;font-size:15px}#mynavbar .nav-pills a.nav-link:hover{background:rgb(255 255 255 / 7%)}#mynavbar img.logonavbar{height:30px;margin:10px 0 0}.dashboard .card-body .bi{font-size:40px;width:70px;height:70px;display:inline-block;border-radius:15px;margin:0 0 15px;color:#6366f1;background:rgb(99 102 241 / 9%);border:5px solid #f1f1fe}button.btn.btn-default i.bi{font-size:18px;width:auto;height:auto;color:#fff;margin:0}button.btn.btn-default{background:#6366f1;color:#fff;font-weight:500;padding:10px 25px}button.btn.btn-dark,a.btn.btn-dark{background:#0f172a;color:#fff;font-weight:500;padding:10px 25px}span.input-group-addon{background:#eee;padding:5px 10px;border:1px solid #ddd;border-top-left-radius:7px;border-bottom-left-radius:7px}button.btn.btn-default i{padding:0 5px 0 0}.userdropdown{background:#374151;margin:-15px;padding:20px}.userdropdown a.dropdown-toggle{color:#fff;font-size:15px}#mynavbar a.nav-link i{font-size:20px;margin:0 10px 0 0}table.table thead tr th{background:#f9fafb;border:none;padding:12px 7px;font-size:13px}table.table tbody tr td{font-size:14px;border:none;padding:15px .5rem;border-bottom:1px solid #eee}table.table{border:none;border-radius:10px}.form-group label{font-size:14px;font-weight:500;margin:0 0 10px}.card{border:none;box-shadow: 0 10px 15px -3px rgb(0 0 0 / 5%), 0 4px 6px -2px rgb(0 0 0 / 5%);margin:0 0 15px}.blockquote i.bi{background:#6366f1;color:#fff;font-size:25px;padding:5px 10px;border-radius:10px;margin:0 10px 10px 0}.table i.icons{background:#1f2937;color:#fff;padding:5px 8px;border-radius:5px;margin:0 10px 0 0}.header-colored{background:#fff;color:#222;padding:0;min-height:70px;height:90px;border-bottom:1px solid #eee}.header-colored img.logoheader{width:150px;height:40px;position:absolute;top:25px;left:20px}a.show-navbar.btn,button.show-notif.btn{color:#222;background:#eff3f7;font-size:30px;position:absolute;top:20px;right:20px;padding:0 10px}button.show-notif.btn{right:80px}.b-example-divider{box-shadow:none;border:none}main{display:block!important}.row.dashboard .col-sm-6{padding:0;margin:0 0 -15px!important}.dashboard h5.card-title{font-size:15px;font-weight:700}.dashboard a{color:#222;text-decoration:none}.header-content h3{font-size:18px}#mynavbar{opacity:0;visibility:hidden;transition:all .4s ease-in-out;position:fixed;z-index:999;top:0;bottom:0;left:-300px}#mynavbar.show{opacity:1;visibility:visible;left:0}.close-navbar{background:#111827;display:none;opacity:.7;position:fixed;z-index:998;top:0;bottom:0;left:0;right:0}.row.dashboard .col-sm-6{transform:scale(.90)}.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:#689ee8}.btn-style.female.active{background:#f36992}.btn-style.female.active i,.btn-style.male.active i,ul.list-tugas i{color:#fff}.menu-desktop{display:block;overflow:hidden;margin:10px;position:absolute}.menu-desktop li{list-style:none;float:left;display:inline-block}.menu-desktop li a.nav-link{padding:0 10px;display:block;font-size:14px;font-weight:500}.menu-desktop i.bi{float:left;margin:0 10px 0 0}.menu-desktop li a.nav-link:hover{background:rgb(255 255 255 / 15%)}.notif-dropdown .dropdown-toggle::after{display:none}.komentar-kelas{overflow:hidden;padding:15px 5px;margin:5px 0;border-radius:10px;position:relative;background:#fff}.profil-komentar{position:relative;margin:5px 5px 15px;display:flex;align-items:center}.profil-komentar img{width:45px;height:45px;border-radius:100%;object-fit:cover;margin:0 10px 0 0}.profil-komentar span.nama-profil{font-weight:600;margin:0 10px 0 0}.isi-komentar{line-height:1.5em;background:#f8f9fa;padding:15px;color:#444;border:2px dashed #e1e8ed;border-radius:10px;font-size:15px}#comments h3 i.bi,ul.list-tugas .tugas-komentar i,.header-content .float-start i.bi{border-radius:10px;display:inline-block;text-align:center;margin:0 10px 0 0}#comments{margin:0}#comments h3{font-weight:600;font-size:20px;margin:25px 0}#comments h3 i.bi,.header-content .float-start i.bi{background:linear-gradient(to right bottom,#38bdf8,#6366f1);color:#fff;width:40px;height:40px;line-height:40px}#comments .btn-reply{margin:10px 2px;font-size:15px;padding:3px 12px;color:#222;background:#fff}#comments form button.btn-green{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:#f8f9fa}.profil-komentar .badge{background-color:#00b894!important;font-weight:500;font-size:13px}.tugas-komentar{display:block;overflow:hidden;width:100%;padding:10px 0 0;margin:50px 0 0;border-top:1px solid #ddd;font-size:15px;display:flex;align-items:center}ul.list-tugas .tugas-komentar i{color:#111;background:#eee;font-size:18px;width:30px;height:30px;line-height:35px}#comments .komentar-kelas a.btn-green{background:#f8f9fa;color:#00b894;float:right;transform:scale(.9);position:absolute;right:40px;top:0}#comments .komentar-kelas button.btn-green{transform:scale(1);position:relative;background:#00b894;color:#fff}.dashboard{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}.dashboard .col-sm-6{width:100%}.notif-count{position:absolute;right:70px;top:10px;background:#198754;font-weight:700;display:inline-block;padding:2px 8px;border-radius:100%;border:1px solid #fff;font-size:14px}.menu-desktop{right:80px}.header-colored img.logoheader{width:auto;border-radius:10px;background:#fff;padding:5px}.card a,a{text-decoration:none}.kategori-menu ul li a{padding:8px 15px;display:inline-block;font-size:15px;font-weight:600;color:#fff;background:#535fd7;margin:0 5px;border-radius:7px;transition:all .2s ease-in-out}.kategori-menu ul li a:hover{opacity:.8;text-decoration:none}.kategori-menu ul{display:flex;list-style:none;justify-content:center}.card-title a{font-size:18px;color:#222}.container-small{max-width:480px;margin:0 auto 50px}a.btn-buy i{margin:0 10px 0 0;float:left}a.btn-buy{margin:20px 0 0;padding:10px;font-weight:600}.mystars div{display:inline-block}.mystars a{cursor:pointer;font-size:30px;color:#ddd}.mystars a.active{color:orange}#star-1:hover a.star-1{color:orange}#star-2:hover a.star-2{color:orange}#star-3:hover a.star-3{color:orange}#star-4:hover a.star-4{color:orange}#star-5:hover a.star-5{color:orange}.stars i{color:#ddd;font-size:20px}.stars i.active{color:orange}::-moz-selection{background:rgba(0 0 0 / 7.5%)}::selection{background:rgba(0 0 0 / 7.5%)}

/* NEW CSS */
.opening .container{padding:0}.opening h3{font-size:24px;text-align:center;margin:15px 0 25px;background:linear-gradient(to right bottom,#38bdf8,#6366f1);color:#fff;padding:25px;border-radius:10px;line-height:1.7}@media screen and (max-width:768px){.opening h3{font-size:20px}}#main-content,#footer-content{position:relative;z-index:50}#professional-navbar{position:relative;z-index:60}img.logonavbar{max-width:180px}#professional-navbar .container{height:90px;line-height:60px;padding:0}#main-content .container{padding:10px;box-sizing:border-box}.navbar li a{font-size:15px;font-weight:500;line-height:1.7;margin:0 7px}.navbar li ul a{margin:0;font-size:14px}.header-illustration img{position:absolute;top:0;right:0;left:0;opacity:.9;width:100%}.hero-media-illustration img{position:absolute;top:100px;right:0;opacity:.9}.navbar form input{font-size:15px;padding:10px 20px;border:none;box-shadow:0 10px 15px -3px rgb(0 0 0 / 7%),0 -1px 6px -2px rgb(0 0 0 / 5%)}.navbar form button{background:#6366f1;color:#fff;border-color:#6366f1;outline:none;box-shadow:none;font-size:14px}.cta{position:relative;overflow:hidden;border-radius:20px;background:#f1fcfe}.cta::before{content:'';position:absolute;bottom:-32px;left:calc(50% - 720px);height:263px;width:1440px;bottom:0;background-image:url(/public/landing/dist/images/cta-illustration-light.svg)}.cta .container-sm{position:relative;z-index:1}.container-sm{max-width:848px}.section-inner{padding:70px 0}.text-center{text-align:center}.cta h2,h2.section-title{font-size:32px;line-height:48px;letter-spacing:-.1px;margin-bottom:15px;font-weight:600}.hero-paragraph,p.section-paragraph{font-size:16px;line-height:1.6;opacity:.8;margin:0 0 20px}.cta-cta{max-width:400px;margin-left:auto;margin-right:auto}.button{display:inline-flex;font-family:"Poppins",sans-serif;font-size:14px;letter-spacing:0;font-weight:600;line-height:16px;text-decoration:none!important;text-transform:uppercase;background-color:#E9EDF3;color:#535FD7!important;border:none;border-radius:5px;cursor:pointer;justify-content:center;padding:16px 32px;height:48px;text-align:center;white-space:nowrap}.button.button-primary{color:#fff!important;background-color:#535FD7!important}.cta-cta .button{min-width:170px}.dashboard .card{box-shadow:0 10px 15px -3px rgb(0 0 0 / 7%),0 -1px 6px -2px rgb(0 0 0 / 5%);border-radius:10px}#myshop .card{box-shadow:none}#myshop img.card-img-top{background:#ddd;height:280px;object-fit:cover;border-radius:10px;box-shadow:0 10px 15px -3px rgb(0 0 0 / 5%),0 4px 6px -2px rgb(0 0 0 / 5%)}#myshop .card-title a{font-size:15px;color:#222;text-decoration:none}#myshop span.price{color:#00b894}#myshop .d-flex .btn,#myshop .d-flex form button{font-size:13px;display:block}#myshop .d-flex{justify-content:center;grid-gap:10px}button.btn,a.btn{font-size:14px}.product-dashed{background:#fff;margin:20px 0 0;border:3px dashed #ddd;border-radius:15px;font-size:15px;line-height:1.7}.comments-form .card{box-shadow:none}.card-product img.card-img-top{border-radius:15px;background:#eee}img.confirm-pay{background:#eee;width:100px;height:100px;object-fit:cover;border-radius:7px}.table tbody td span.badge{font-size:13px;font-weight:500}button.navbar-toggler{background:#fff}section.credit-section{text-align:center;margin:50px 0 0;font-size:14px;background:#182538;color:#fff;padding:30px;border-top-left-radius:20px;border-top-right-radius:20px}.card-body label.form-label{font-size:14px;font-weight:500}input.form-control,textarea.form-control,select.form-control,select.form-select{border:1px solid #eee;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);font-size:15px;padding:10px 15px}.form-control:disabled{background:#f7f7f7}.navbar-nav .dropdown-menu{box-shadow:0 10px 20px 0 rgb(8 0 42 / .08);border:none}.navbar-nav .dropdown-divider{border-color:#eee}.card-product .form-label{display:grid;grid-template-columns:.5fr 1.5fr;margin:15px 0}hr{border-top:2px dashed}.btn-success{background:#00b894;border-color:#00b894}.btn-success:hover{background:#008268;border-color:#008268}.card-product span.price{color:#00b894;font-size:20px}.pagination .page-item.active .page-link{background:#535fd7;color:#fff}.pagination .page-item .page-link{border:none;margin:0 5px;border-radius:5px;background:#f4f6f6;color:#222;font-size:16px;font-weight:500;padding:7px 15px}ul.pagination{margin:0}img.profile-image{width:120px;height:120px;object-fit:cover;border-radius:100%;margin-top:-60px;padding:5px;background:#fff}.this-product strike{opacity:.6}.xml .card.mt-3.p-2,.xml .card.mt-3.p-3{border-radius:15px}a.whatsapp-chat{background:#009756;display:inline-block;padding:10px;border-radius:100%;position:fixed;z-index:99;bottom:20px;right:20px}.this-product .card-text:last-child{margin-bottom:0;display:flex;align-items:center}.this-product img.card-img-top{border-radius:10px}table.transaksi{background:#f9fafb;border:2px dashed #eee}tr.tambahan-paket{background:#fffad2}table td.empty-note{background:#fffad2;text-align:center;font-weight:500;padding:10px;font-size:14px}.moderasi a{color:#222}
    
/* RESPONSIVE MEDIA MOBILE APP */
@media screen and (max-width:768px){
.features img.card-img-top{height:auto!important}.responsive.text-left td{font-size:13px}.tambah-produk .row .col{margin:0 0 15px}.tambah-produk .row{display:block}.heading-invoice{display:block}tr.boxeds{background:#f9fafb;margin:0 0 20px;border:2px dashed #ddd}.button-flex-custom a,.button-flex-custom button{display:block;width:100%;margin:5px 0}.click-group a.clickpicker{margin:5px 0;display:block}.card-product .form-label{display:block}.blockquote i.bi{display:none}.card-body figure .blockquote{font-size:15px}.card-body.card-product{padding:0}.product-dashed{font-size:13.5px}#myshop span.price{font-sie:14px}.dashboard .card-body .bi{font-size:20px;width:50px;height:50px;line-height:40px}.navbar-collapse{background:#fff;padding:15px;box-shadow:0 10px 15px -3px rgb(0 0 0 / 7%),0 -1px 6px -2px rgb(0 0 0 / 5%);border-radius:15px}#myshop .col img{height:auto}#myshop{display:grid;grid-template-columns:1fr 1fr;justify-content:center;padding:30px 0}#myshop .col{padding:5px}#professional-navbar .container{height:80px;line-height:50px}img.logonavbar{max-width:120px}.dashboard h5.card-title,section.credit-section{font-size:12px}.header-content h3{font-size:15px}#myshop .card-title a{font-size:13px}.cta h2,h2.section-title{font-size:22px}.hero-paragraph,p.section-paragraph{font-size:14px}.row.dashboard .col-sm-6{transform:scale(1)}.row.dashboard{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;margin:5px}.b-example-divider{padding:10px!important}table.responsive{width:100%}.responsive thead,.menu-desktop{display:none}.responsive td{display:block;text-align:right;border-right:1px solid #e1edff}.responsive.text-left td{text-align:left}.responsive td::before{float:left;text-transform:uppercase;font-weight:700;content:attr(data-header);font-size:13px}.responsive tr{display:block}
}