/*
* Please do not remove this
* 7/28/2022 3:55 PM
* Template by CusMeDroid
* IyoRTML
* Suryo DwiJayanto
*/

::-webkit-scrollbar {
    width: 5px;
    height: 4px;
}
::-webkit-scrollbar-thumb {
    background: #fdfdfd;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #fdfdfd;
}

html {
    scroll-behavior: smooth;
}

html body {
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, p {
    padding: 0;
    margin: 0;
}

button {
    background: transparent;
    cursor: pointer;
    border: none;
}

a {
    text-decoration: none;
}

pre {
    overflow: auto;
}

/* Color */
.red {
    color: #f44336 !important; /* Red */
}

.pink {
    color: #e81e63 !important; /* Pink */
}

.purple {
    color: #9c27b0 !important; /* Purple */
}

.deep-purple {
    color: #673ab7 !important; /* Deep Purple */
}

.indigo {
    color: #3f51b5 !important; /* Indigo */
}

.blue {
    color: #2196f3 !important; /* Blue */
}

.light-blue {
    color: #03a9f4 !important; /* Light Blue */
}

.cyan {
    color: #00bcd4 !important; /* Cyan */
}

.teal {
    color: #009688 !important; /* Teal */
}

.green {
    color: #00FF62 !important; /* Green */
}

.light-green {
    color: #8bc34a !important; /* Light Green */
}

.lime {
    color: #cddc39 !important; /* Lime */
}

.yellow {
    color: #ffeb3b !important; /* Yellow */
}

.amber {
    color: #ffeb3b !important; /* Amber */
}

.orange {
    color: #FF6A00 !important; /* Orange */
}

.deep-orange {
    color: #ff5722 !important; /* Deep Orange */
}

.brown {
    color: #795548 !important; /* Brown */
}

.blue-gray {
    color: #607d8b !important; /* Blue Gray */
}

.gold {
    color: #d4af37 !important; /* Gold */
}

.gray {
    color: #777 !important; /* Gray */
}

.white {
    color: #FFF !important; /* White */
}

.black {
    color: #111 !important; /* Black */
}

.violet {
    color: #9921D5 !important; /* Violet */
}

.magenta {
    color: #FF00FF !important; /* Magenta */
}
/* End Color */

/* Fonts */
.Audiowide {
    font-family: "Audiowide", sans-serif;
}

.Sofia {
    font-family: "Sofia", sans-serif;
}

.Trirong {
    font-family: "Trirong", serif;
}

.Arial {
    font-family: "Arial", sans-serif;
}

.Lato {
    font-family: "Lato", sans-serif;
}
/*End Fonts*/

/* Font size */
.size-12 {
    font-size: 12px;
}

.size-14 {
    font-size: 14px;
}

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

.size-18 {
    size: 18px;
    font-size: 18px;
}

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

.size-22 {
    font-size: 22px;
}

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

.size-26 {
    font-size: 26px;
}

.size-28 {
    font-size: 28px;
}

.size-30 {
    font-size: 30px;
}

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

.size-34 {
    font-size: 34px;
}

.size-36 {
    font-size: 36px;
}
/* End Font Size */

/* Background */
.red-bg {
    background: #f44336 !important; /* Red */
}

.pink-bg {
    background: #e81e63 !important; /* Pink */
}

.purple-bg {
    background: #9c27b0 !important; /* Purple */
}

.deep-purple-bg {
    background: #673ab7 !important; /* Deep Purple */
}

.indigo-bg {
    background: #3f51b5 !important; /* Indigo */
}

.blue-bg {
    background: #2196f3 !important; /* Blue */
}

.light-blue-bg {
    background: #03a9f4 !important; /* Light Blue */
}

.cyan-bg {
    background: #00bcd4 !important; /* Cyan */
}

.teal-bg {
    background: #009688 !important; /* Teal */
}

.green-bg {
    background: #00FF62 !important; /* Green */
}

.light-green-bg {
    background: #8bc34a !important; /* Light Green */
}

.lime-bg {
    background: #cddc39 !important; /* Lime */
}

.yellow-bg {
    background: #ffeb3b !important; /* Yellow */
}

.amber-bg {
    background: #ffeb3b !important; /* Amber */
}

.orange-bg {
    background: #FF6A00 !important; /* Orange */
}

.deep-orange-bg {
    background: #ff5722 !important; /* Deep Orange */
}

.brown-bg {
    background: #795548 !important; /* Brown */
}

.blue-gray-bg {
    background: #607d8b !important; /* Blue Gray */
}

.gold-bg {
    background: #d4af37 !important; /* Gold */
}

.gray-bg {
    background: #777 !important; /* Gray */
}

.white-bg {
    background: #FFF !important; /* White */
}

.black-bg {
    background: #111 !important; /* Black */
}

.violet-bg {
    background: #9921D5 !important; /* Violet */
}

.magenta-bg {
    background: #FF00FF !important; /* Magenta */
}

.mybasebg { 
    background: #f4f4f4;
}

/*
* Gradient Main 
* Green 
*/

.green-grad-bg {
    background: linear-gradient(#00FF62, #57CBAB);
}

.green-grad-bg-btn {
    background: linear-gradient(#00FF62, #57CBAB);
    cursor: pointer;
}

.green-grad-bg-btn:hover {
    background: linear-gradient(#57CBAB, #00FF62);
}

/* Orange */
.orange-grad-bg {
    background: linear-gradient(#FF6A00, #CB9557);
}

.orange-grad-bg-btn {
    background: linear-gradient(#FF6A00, #CB9557);
    cursor: pointer;
}

.orange-grad-bg-btn:hover {
    background: linear-gradient(#CB9557, #FF6A00);
}

/* Violet */
.violet-grad-bg {
    background: linear-gradient(#9921D5, #6442A0);
}

.violet-grad-bg-btn {
    background: linear-gradient(#9921D5, #6442A0);
    cursor: pointer;
}

.violet-grad-bg-btn:hover {
    background: linear-gradient(#6442A0, #9921D5);
}

/* magenta */
.magenta-grad-bg {
    background: linear-gradient(#FF00FF, #A346A3);
}

.magenta-grad-bg-btn {
    background: linear-gradient(#FF00FF, #A346A3);
    cursor: pointer;
}

.magenta-grad-bg-btn:hover {
    background: linear-gradient(#A346A3, #FF00FF);
}
/* End Background */

/* More IDK class */
.alks {
    cursor: pointer;
}
.alaau {
    padding: 4px;
}
.imag-rs {
    padding: 8px 16px;
}

/*
* Please do not remove this
* 7/24/2022 6:10 PM
* Template by CusMeDroid
* IyoRTML
* Suryo DwiJayanto
*/

.sp-footers {
    display: none;
}

.lko {
    padding: 4px;
}

.lkoo {
    padding: 4px;
}

.palerto {
    padding: 6px;
    float: left;
    margin: 4px;
}

.patobo {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pato {
    padding-top: 10px;
}

.pabo {
    padding-bottom: 10px;
}

.martobo {
    margin-top: 10px;
    margin-bottom: 10px;
}

.marto {
    margin-top: 10px;
}

.marbo {
    margin-bottom: 10px;
}

.radius-5 {
    border-radius: 5px;
}

.radius-10 {
    border-radius: 10px;
}

.radius-15 {
    border-radius: 15px;
}

.radius-20 {
    border-radius: 20px;
}

.radius-25 {
    border-radius: 25px;
}

.radius-30 {
    border-radius: 30px;
}

.circle {
    border-radius: 50%;
}
/* End More IDK class */

/* Margin */
.marg-4 {
    margin: 4px;
}

.marg-8 {
    margin: 8px;
}

.marg-10 {
    margin: 10px;
}

.marg-16 {
    margin: 16px;
}

.marg-20 {
    margin: 20px;
}

.marg-26 {
    margin: 26px;
}
/* End Margin */

/* Padding */
.padd-4 {
    padding: 4px;
}

.padd-8 {
    padding: 8px;
}

.padd-10 {
    padding: 10px;
}

.padd-16 {
    padding: 16px;
}

.padd-20 {
    padding: 20px;
}

.padd-26 {
    padding: 26px;
}
/* End Padding */

/* Splash load */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    background-color: #fff;
}

.preloader .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font: 14px;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #FF6A00;
    border-right: 16px solid #9921D5;
    border-bottom: 16px solid #FF00FF;
    border-left: 16px solid #00FF62;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* End Splash Load */

/* Background-image */
.green-bg-img {
    background: url(../images/bg/green-bground.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.orange-bg-img {
    background: url(../images/bg/orange-bground.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.violet-bg-img {
    background: url(../images/bg/violet-bground.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.magenta-bg-img {
    background: url(../images/bg/magenta-bground.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}
/* End Background-image */

header {
    padding: 20px;
    padding: 25px;
    height: 500px;
}

nav {
    padding: 10px;
    height: 48px;
}

.logo {
    float: left;
    font-style: bold;
}

.nav {
    float: right;
}

/*
* Please do not remove this
* 7/24/2022 6:10 PM
* Template by CusMeDroid
* IyoRTML
* Suryo DwiJayanto
*/

.nav a {
    color: white;
    padding: 4px 16px;
    margin-right: 6px;
    border: 3px solid white;
    border-radius: 20px;
    transition-duration: 0.5s;
}

.nav a:hover {
    background: #fff;
    color: #222;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #f4f4f4;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 130%;
    left: 50%;
    margin-left: -60px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    color: #000;
}

.tooltip .tooltiptext p {
    padding-top: 6px;
    padding-bottom: 6px;
}

.tooltip .tooltiptext p:hover {
    background: #f4f4f4;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.my-input-text {
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border: 0px;
    border-radius: 20px;
    padding: 12px 16px;
}

.my-input-submit {
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border: 0px;
    border-radius: 20px;
    padding: 12px 16px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    transition-duration: 0.5s;
}

.m1 {
    padding: 50px;
    font-size: 40px;
}

.lkas {
    font-size: 24px;
}

.column0 {
    float: left;
    width: 100%;
    padding: 4px;
}

.column2 {
    float: left;
    width: 50%;
    padding: 4px;
}

.column3 {
    float: left;
    width: 33.33%;
    padding: 4px;
}

.column4 {
    float: left;
    width: 25%;
    padding: 4px;
}

.column-header {
    float: left;
    width: 25%;
    padding: 8px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.main {
    padding: 20px 20px 20px 20px;
    background: #f4f4f4;
    height: 100%;
}

.iimg {
    width: 75%;
}

.iimgssw {
    width: 100%;
    float: left;
}

.iimgofc {
    float: right;
    margin-top: -25%;
    margin-right: 5%;
    background: white;
    padding: 2px 4px;
    border-radius: 50%;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.5s;
    width: 100%;
    border: 1px solid #CCC;
    border-radius: 20px;
    background: white;
    padding: 10px;
}

.card-container {
    padding: 8px;
}

.card-img {
    border-radius: 20px;
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    object-fit: cover;
    transition-duration: 0.5s;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
}

.card-img:hover {
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}

.card-title {
    padding: 8px;
}

.titlehome {
    text-shadow: 2px 2px #CCCCCC;
    margin-top: 0;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 15px;
}

.sukron {
    padding: 20px;
    display: none;
}

.card-img-offic {
    border-radius: 20px;
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    object-fit: cover;
    transition-duration: 0.5s;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
}

.mnskd {
    display: block;
    transition-duration: 0.5s;
}

.mnskd:hover {
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}

.me-ppf {
    padding: 4px;
    margin-top: -40px;
}

.ppfhmn {
    width: 56px;
    height: 56px;
}

.kajlsm {
    margin-left: -20px;
    background: white;
    padding: 2px 4px;
    border-radius: 50%;
}

/*
* Please do not remove this
* 7/24/2022 6:10 PM
* Template by CusMeDroid
* IyoRTML
* Suryo DwiJayanto
*/

footer {
    padding: 30px;
    color: #fff;
    text-align: center;
}

#music-video {display: none;}

#musicpl {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    padding: 10px;
    font-size: 20px;
    top: 45%;
    text-align: center;
    border-radius: 50%;
    z-index: 2;
    cursor: pointer;
    background: #FFF;
    box-shadow: 0 0 13px 1px rgb(184 180 184 / 50%);
}

#musicpa {
    display: none;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    padding: 10px;
    font-size: 20px;
    top: 45%;
    text-align: center;
    border-radius: 50%;
    z-index: 2;
    cursor: pointer;
    color: gray;
    background: #FFF;
    box-shadow: 0 0 13px 1px rgb(184 180 184 / 50%);
}

#musicpa2 {
    display: none;
}

.mus {
    padding: 5px;
}

.denone {
    display:none;
}

/* Animation */
.animate-fading{
    animation:fading 10s infinite;
}
@keyframes fading{
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}
.animate-opacity{
    animation:opac 0.8s;
}
@keyframes opac{
    from{opacity:0;}
    to{opacity:1;}
}
.animate-top{
    position:relative;
    animation:animatetop 0.6s;
}
@keyframes animatetop{
    from{top:-200px;opacity:0;}
    to{top:0;opacity:1;}
}
.animate-left{
    position:relative;
    animation:animateleft 0.6s;
}
@keyframes animateleft{
    from{left:-200px;opacity:0;}
    to{left:0;opacity:1;}
}
.animate-right{
    position:relative;
    animation:animateright 0.6s;
}
@keyframes animateright{
    from{right:-200px;opacity:0;}
    to{right:0;opacity:1;}
}
.animate-bottom{
    position:relative;
    animation:animatebottom 0.6s;
}
@keyframes animatebottom{
    from{bottom:-200px;opacity:0;}
    to{bottom:0;opacity:1;}
}
.animate-zoom {
    animation:animatezoom 0.6s;
}
@keyframes animatezoom{
    from{transform:scale(0);}
    to{transform:scale(1);}
}
/* End Animation */

.header {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #0000007f;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 2;
    font-size: 24px;
    display: none;
}

.me-bottom-bar{
    position: absolute;
    display: flex;
    padding: 16px 36px;
    justify-content: space-between;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 115px;
    font-size: 26px;
    background-image: radial-gradient(circle at 36px 6px,transparent 36px, #ffffff 37px);
    filter: drop-shadow(0px -1px 6px  rgba(0, 0, 0, 0.08)) drop-shadow(0px -2px 12px rgba(0, 0, 0, 0.12));
    transition: cubic-bezier(0.57, 0.23, 0.08, 0.96) .45s;
}

.me-nav-indicator{
    position: absolute;
    width: 56px;
    height: 56px;
    bottom: 80px;
    margin: auto;
    left: 0;
    background-color: #000000;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08), 0px 3px 6px rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    transition: cubic-bezier(0.45, 0.73, 0, 0.59) .3s;
}
.me-menu-item {
    color: rgba(0,0,0,0.65);
    transition: ease-in-out .5s;
    cursor: pointer;
}
.me-menu-items {
    color: rgba(0,0,0,0.65);
    transition: ease-in-out .5s;
    cursor: pointer;
}
.me-current{
    position: relative;
    color: #ffffff;
    z-index: 1;
    transform: translate3d(0px,-22px,0px);
}

.bbtn {
    width: 40px;
    height: 40px;
    padding: 8px;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
}

.memenu {
    cursor: pointer;
    position: fixed;
    top: 5px;
    right: 5px;
    border-radius: 10px;
    background: #ffffff6d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    padding: 10px;
    display: none;
    z-index: 4;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 4px;
    background: #EFEFEF;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-8px, 5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.memenu-content {
    width: 240px;
    cursor: pointer;
    position: fixed;
    top: 70px;
    right: 5px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    padding: 10px;
    z-index: 4;
    display: none;
}

.memenu-content a {
    display: block;
    color: black;
    font-size: 18px;
    padding: 8px 16px;
}

.memenu-content a:hover {
    background: #f4f4f4;
}

.memenupoa {display: none;}

.asdn {
    width: 400px;
    margin-top: 120px;
}
.acsxd {
    border: 2px solid #ECECEC;
    border-radius: 30px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    padding: 10px;
    width: 600px;
    background: #FFF;
}
.axz {
    padding: 4px;
    color: #fff;
    font-size: 20px;
    transition-duration: 0.5s;
}
.axz:hover {
    color: #ccc;
}

.axyz {
    padding: 4px;
    color: #777;
    transition-duration: 0.5s;
}
.axyz:hover {
    color: #111;
}

.acsss {
    border-radius: 20px;
    padding: 4px 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition-duration: 0.5s;
}

.acsss:hover {
    border: 1px solid #111;
    background: #111;
    color: #fff;
}

/* Web Main */
.sidebar {
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f4f4f4;
    position: fixed;
    height: 100%;
    overflow: auto;
}

.sidebar a {
    display: block;
    color: black;
    padding: 16px;
    transition-duration: 0.5s;
}
 
.sidebar a.sdactive {
    background-color: #FF6A00;
    color: white;
}

.sidebar a:hover:not(.sdactive) {
    background-color: #AAA;
    color: white;
}

.docs-content {
    margin-left: 200px;
}

/* Collapse Main */
.collapsible {
    background-color: #FF6A00d0;
    color: white;
    cursor: pointer;
    padding: 16px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition-duration: 0.5s;
}

.clpactive, .collapsible:hover {
    background-color: #FF6A00;
}

.collapsible:after {
    content: '\25BC';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.clpactive:after {
    content: "\25B2";
}

.clp-content {
    max-height: 0;
    height: auto;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}

.clp-content a {
    display: block;
    padding: 16px;
    color: #111;
    transition-duration: 0.5s;
}

.clp-content a.sdactive {
    background-color: #FF6A00;
    color: white;
}

.clp-content a:hover:not(.sdactive) {
    background-color: #AAA;
    color: white;
}

/* Collapse Mobile */
.clp-content-mobile {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
    display: none;
}

.clp-content-mobile a {
    display: block;
    padding: 16px;
    color: #111;
    transition-duration: 0.5s;
}

.clp-content-mobile a.sdactive {
    background-color: #FF6A00;
    color: white;
}

.clp-content-mobile a:hover:not(.sdactive) {
    background-color: #AAA;
    color: white;
}

.aclp {
    display: none;
}
/* End Web Main */
/*
* Please do not remove this
* 7/24/2022 6:10 PM
* Template by CusMeDroid
* IyoRTML
* Suryo DwiJayanto
*/

/* Auto Complete */
.autocomplete {
    width: 90%;
    position: relative;
    display: inline-block;
}

.sww-input-text {
    width: 100%;
    padding: 6px 10px;
    border: none;
    font-size: 16px;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 4;
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
}

.autocomplete-items div:hover {
    background-color: #e9e9e9; 
}

.autocomplete-active {
    background-color: DodgerBlue !important; 
    color: #ffffff; 
}
.maxs {
    width: 32px;
    margin-bottom: -10px;
}
/* End Auto Complete */

/* News css 27/7/22 home */
.home-bottom {
    width: 100%;
    height: auto;
    padding: 16px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.home-btn {
    border-radius: 25px;
    border: 2px solid #FF6A00;
    padding: 4px 12px;
    transition-duration: 0.5s;
    color: #FF6A00;
}

.home-btn:hover {
    background: #FF6A00;
    color: #FFF;
}

.home-btn span {
    display: none;
}

.home-btn:hover span {
    display: inline;
}

/* Roadmap DB csv */
.output me-title h1 {
    font-family: "Audiowide", sans-serif;
    padding: 12px 0px;
}
me-row me-card {
    float: left;
    width: 33.33%;
    padding: 10px;
    border-left: 4px solid #FF6A00;
    background: white;
    margin-bottom: 4px;
    font-family: "Trirong", serif;
}
me-row {
    content: "";
    display: table;
    clear: both;
    padding: 10px;
}
/* End Roadmap DB csv */

/* Blog */
.blog-btn {
    margin-left: 8px;
    background: linear-gradient(#00FF62, #57CBAB);
    margin-bottom: 10px;
    color: #FFF;
    transition-duration: 0.5s;
}

.blog-btn:hover {
    background: linear-gradient(#57CBAB, #00FF62);
}
/* End Blog */

/* WhatsApp */
.fixed-whatsapp{
    position:fixed;
    bottom:30px;
    right:30px;
    width:50px;
    height:50px;
    z-index:3;
}

.fixed-whatsapp:before{
    content:"";
    background-repeat:no-repeat;
    background-size:34px 34px;
    background-position:center center;
    width:50px;
    height:50px;
    background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
    background-color:#00C853;
    position:absolute;
    top:0;
    left:0;
    border-radius:100%;
    box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
}

.fixed-whatsapp:after{
    content:"Can we help you?";
    width:150px;
    padding:5px;
    position:absolute;
    bottom:100%;
    margin-bottom:10px;
    font-size: 14sp;
    right:-150px;
    text-align:right;
    color:#555;
    border:1px solid #dedede;
    background:rgba(255,255,255,.5);
    border-radius:4px;
    opacity:0;
    transition:all .4s ease-in-out;
    font-size:90%;
    line-height:1.1;
}

.fixed-whatsapp:hover:after{
    opacity:1;
    right:0;
}

.column-1 {
    width: 75%;
    float: left;
}
.column-2 {
    width: 25%;
    float: left;
    padding: 6px;
}

/* New Theme */
.main-app {
    background-image: url('..//wallpaper.jpg');
    height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: "Courier New", Courier, monospace;
    font-size: 25px;
}
.sdtxt {
    text-shadow: 2px 2px #222222;
    color: white;
}
.top {
    color: white;
    position: absolute;
    width: 100%;
    top: 0;
}
.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
#mmmain {
    width: 100%;
    border-radius: 20px;
}
.mmaos {
    width: 276px;
    height: 85px;
}
.mcrv {
    width: 56px;
    height: 56px;
    float: left;
    margin: 4px;
    background: #fff;
}
.mcrv:hover {
    background: #ccc;
}
.moimg {
    width: 100%;
}
.bbrtl {
    width: 30%;
}
.bbrtr {
    width: 70%;
}

.card-cc {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.5s;
    width: 100%;
    border: 1px solid #CCC;
    border-radius: 20px;
    background: white;
    padding: 20px;
}

.pl-8 {
    padding-left: 8px;
    padding-bottom: 8px;
}

.main-content {
    width: 100%;
    padding: 10px;
    margin-top: -30px;
}

.main-content2 {
    width: 100%;
    padding: 10px;
}

.ldes {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.m-c-d {
    display: flex;
    align-items: center;
    background: whitesmoke;
    border-radius: 10px;
}

.col-img {
    margin-right: 8px;
    background-size: cover;
    object-fit: cover;
    border-radius: 10px;
}

/* Responsive Tablet */
@media screen and (max-width: 1040px) {
    header {
        height: auto;
        background-size: 100% auto;
        padding: 10px;
    }
    nav {display: none;}
    .mk {display: none;}
    .m1 {padding: 5px;}
    .iimg {width: 100%;}
    .memenu {display: block;}
    .memenupoa {display: block;}
    #musicpa {top: 60%;}
    #musicpl {top: 60%;}
    .column3{width: 100%;padding: 8px 4px;}
}

/*
* Please do not remove this
* 7/24/2022 6:10 PM
* Template by CusMeDroid
* IyoRTML
* Suryo DwiJayanto
*/

/* Responsive Mobile */
@media screen and (max-width: 800px) {
    .m-title{
        font-size: 38px;
    }
    .middle {
        position: relative;
        width: 100%;
        top: 35%;
        left: 0%;
        transform: none;
        text-align: center;
    }
    .column2 {width: 100%;padding: 8px 14px;}
    .column3{width: 100%;padding: 8px 14px;}
    header {
        height: auto;
        background-size: 100% auto;
        padding: 10px;
    }
    .sugesto {
        position: -webkit-sticky;
        position: sticky;
        background: white;
        top: 0;
        padding: 14px 12px;
        z-index: 2;
    }
    nav {display: none;}
    .mk {display: none;}
    .m1 {padding: 5px;}
    .iimg {width: 65%;}
    .titlehome {margin: 0px;}
    .uvh{background: #fff;padding: 10px;}
    .main{padding: 0;}
    .column4{width: 50%;}
    .sukron {display: block;}
    .white-bg-mobile {background: #FFF !important;}
    .mabo {margin-bottom: 8px;}
    .alaau {display: none;}
    .deksmus {display: none;}
    .header {display: block;}
    .sp-footers {display: block;padding: 20px;}
    #wish{margin-bottom: 10px;}
    .lko {padding: 14px;}
    .lkoo {padding: 4px 14px;}
    .memenupoa {display: none;}
    .acsxd {width: 90%;}
    .autocomplete{width: 85%;}
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
    .sidebar a {float: left;}
    .docs-content {margin-left: 0;}
}

@media screen and (max-width: 560px) {
    .card-img {height: 230px;}
    .card-img-offic {height: 230px;}
    .asdn {width: 220px;}
    .autocomplete{width: 82%;}
    .sidebar {display: none;}
    .aclp {display: block;}
    .clp-content-mobile {display: block;}
    me-row me-card {width: 50%;}
    .column-1 {width: 100%;}
    .column-2 {width: 100%; padding: 0px 14px; margin-bottom: 20px;}
}

@media screen and (max-width: 380px) {
    .autocomplete{width: 78%;}
}

@media screen and (max-width: 302px) {
    .autocomplete{width: 73%;}
    .asdn {width: 60%;}
}

@media screen and (max-width: 255px) {
    .autocomplete{width: 60%;}
}