@font-face {
    font-family: Poppins-Regular;
    src: url(./Assets/fonts/CORBEL.TTF);
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
    font-size: 14px;
    font-family:  'Segoe UI', Tahoma;
}

body {
    position:relative;
    margin:auto;
    background: #ffffff;
 }

/*BEGIN : Utilities*/
.show {
    display: block;
}

.hide {
    display: none;
}
/*Setting scroll*/

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #558303;
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: grey;
    }

/*END : Setting Scroll*/

/*pembatas*/
.pembatas{
    height:50px;
}

/*Messages*/
.panelpesan {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 400px;
    height: 300px;
    background-color: white;
    z-index: 10;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}
.panelpesan-header{
    position:relative;
    top:0px;
    width:100%;
    height:50px;
    margin:auto;
    background-color:#ffa500;
    align-content:center;
}
.panelpesan-header a{
    position:relative;
    left:5%;
    font-size:14px;
    color:white;
}
.panelpesan-content{
    position:relative;
    top:10px;
    width:90%;
    height:50%;
    background-color:transparent;
    margin:auto;
    align-content:center;
}
.panelpesan-content img{
    position:absolute;
    width:50px;
    height:50px;
    left:5%;
}
.panelpesan-content p{
    position:absolute;
    top:25%;
    left:10%;
    right:0px;
    bottom:0px;
    background-color:transparent;
    width:70%;
    height:90%;
    margin:auto;
    text-align:center;
    align-content:center;
    font-size:16px;
}
.panelpesan-footer{
    position:absolute;
    width:100%;
    bottom:20px;
    margin:auto;
}

/*Loading Bar*/
.loadingbar{
    position:fixed;
    width:70px;
    height:70px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    margin:auto;
    z-index:10;
    text-align:center;
    align-content:center;
    background-color:transparent;
}
.loadingbar img{
    position:relative;
    width:100%;
    animation:animasiloadingbar 1s linear infinite;
}

@keyframes animasiloadingbar{
    from{
        transform:rotate(0deg)
    }
    to{
        transform:rotate(360deg)
    }
}

 

/*BEGIN : Textbox standard*/
.textboxstandard {
    position: relative; 
    width: 90%;
    height: 80px;
    background-color: transparent;
    text-align:center;
    margin:auto;
   
}
.textboxstandard a{
    position:absolute;
    left:8px;
    font-size:13px;
    color:grey;
}
    .textboxstandard input {
        position: relative;
        width: 87%;
        height: 50%;
        top: 40%;
        margin: auto;
        border-radius: 8px;
        border: 1px solid gray;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 17px;
    }
.pembatasantartextbox{
    height:10px;
}
/*END : textbox standard*/

/*BEGIN : tombol standard*/
.tombolstandard {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: transparent; 
    align-content: center;
    /*text-align: center;*/
}
    .tombolstandard button {
        position: relative;
        width: 150px;
        height: 90%;
        border: 0px solid grey;
        border-radius: 20px;
        margin: auto;
        cursor: pointer;
        font-size: 15px;
        background-color: orange;
        color: white;
        font-weight: bold;
    }
/*END : tombol standard*/

/*BEGIN : posisi object*/
.tengah{
    left:0px;
    right:0px;
    text-align:center;
}
.kanan {
    right: 0px;
    text-align: right;
}
/*END : posisi object*/

/*end utilities*/

/*--BEGIN : header--*/
.header {
    position: fixed;
    top: 0%;
    width: 100%;
    height: 200px;
    margin: auto;
    background-color: transparent;
    z-index: 2;
     
}
/*--BEGIN : logo--*/
.logo{
    position:absolute;   
    top:5px;
    left:10%;
    width:300px;
    height:60px;
    margin:auto;
    background-color:transparent;
}
.logo img{
position:relative;
top:120%;
width:100%;
margin:auto;
}
/*--END : logo--*/

/*--BEGIN : nav--*/
.nav {
    position: absolute;
    right: 20%;
    top: 40%;
    margin: auto;
    width: 50%;
    height: 60px;
    background-color: #558303;
    border-radius:50px 0px 0px 50px;
    
}

.navbackground-fill{
    background-color:white;
}

.shadowheader {
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

ul{
    
    padding-left:30px;
    color:white;
    font-size:18px;
    align-content:center;
}

li {
    display: inline-block;
    cursor:pointer;
}

.pembatascontentnav{
    position:absolute;
    top:0px;
    bottom:0px;
    width:2px;
    height:30px;
    margin:auto;
    background-color:white;
    border-radius:10px;
   
}
.jarak{
    width:10px;
}
/*--END : nav--*/


/*--END : header--*/

/*BEGIN : Cover*/
.panelcover{
    position:fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    width:100%;
    height:100%;
    background-color:#9d9d9de6;
    margin:auto;
    z-index:2;
}
/*END : Cover*/

/*BEGIN : login*/
.panellogin {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 400px;
    height: 500px;
    margin: auto;
    background-color: white;
    z-index: 2;
    border-radius:20px;
}
.panellogin-header {
    position: relative;
    width: 100%;
    height: 60px;
    background-color: #ffad23;
    text-align: end;
    align-content: center;
    font-size: 20px;
    border-radius:10px 10px 0px 0px;
    color:grey;
}
.panellogin-header p{
    position:absolute;
    top:0px;
    bottom:0px;
    left:20px;
    font-size:20px;
    text-align:left;    
    align-content:center;
    color:white;
    font-weight:bold;
}
.panellogin-header a{
    position:relative;
    right:20px;
    cursor:pointer;
    color:grey;
}
.panellogin-content{
    position:relative;
    top:10%;
    width:90%;
    height:40%;
    background-color:transparent;
    align-content:center;
    align-items:center;
    margin:auto;
}
.panellogin-ingatkansaya{
    position:relative;
    left:30px;
    width:90%;
    height:40px;
    background-color:transparent;
    align-content:center;
}
.panellogin-ingatkansaya label{
    position:relative;
    top:0px;
} 
.panellogin-ingatkansaya input{
    position:relative;
    top:2px;
  }
.panellogin-lupapassword {
    position:absolute;
    width:40%;
    top:10px;
    right:28px;
    background-color:transparent;
    text-align:right;
}
.panellogin-lupapassword a{
    cursor:pointer;
    color:darkorange;
     
}
.panellogin-footer{
    position:absolute;
    bottom:30px;
    width:100%;
    height:70px;
    background-color:transparent;
    align-content:center;
    text-align:center;
}
.panellogin-footer a{
    color:grey;
}
.panellogin-btndaaftarsekarang {
    color: #238cfe !important;
    cursor:pointer;
}
/*END : login*/

.jarakinputdantombol{
    height:50px;
}

/*BEGIN : daftar*/
.paneldaftar {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 400px;
    height: 600px;
    margin: auto;
    background-color: white;
    z-index: 2;
    border-radius: 20px;    
}

.paneldaftar-header {
    position: relative;
    width: 100%;
    height: 60px;
    background-color: #ffad23;
    text-align: end;
    align-content: center;
    font-size: 20px;
    border-radius: 10px 10px 0px 0px;
    color: grey;
}

    .paneldaftar-header p {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 20px;
        font-size: 20px;
        text-align: left;
        align-content: center;
        color: white;
        font-weight: bold;
    }

    .paneldaftar-header a {
        position: relative;
        right: 20px;
        cursor: pointer;
        color: grey;
    }

.paneldaftar-content {
    position: relative;
    top: 5%;
    width: 90%;
    height: 60%;
    background-color: transparent;
    align-content: center;
    align-items: center;
    margin: auto;
    overflow-y:scroll;
}

.paneldaftar-ingatkansaya {
    position: relative;
    left: 30px;
    width: 90%;
    height: 40px;
    background-color: transparent;
    align-content: center;
}

    .paneldaftar-ingatkansaya label {
        position: relative;
        top: 0px;
    }

    .paneldaftar-ingatkansaya input {
        position: relative;
        top: 2px;
    }

.paneldaftar-lupapassword {
    position: absolute;
    width: 40%;
    top: 10px;
    right: 28px;
    background-color: transparent;
    text-align: right;
}

    .paneldaftar-lupapassword a {
        cursor: pointer;
        color: darkorange;
    }

.paneldaftar-footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
    height: 150px;
    background-color: white;
    align-content: center;
    text-align: center;
}

    .paneldaftar-footer a {
        color: grey;
    }

.paneldaftar-btnloginsekarang {
    color: #238cfe !important;
    cursor: pointer;
}

.garisantarbuttondaftar{
    position:relative;
    top:3px;
    width:80%;
    border-top:0.1px dashed #9393939f;
    margin:auto;
}

.masukdengangoogle{
    position:relative;
    top:5%;
    width:100%;
    height:50px;
    background-color:transparent;
    text-align:center;
    margin:auto;
    align-content:center;
    cursor:pointer;
}
.masukdengangoogle img{
    width:200px;
}
/*END : daftar*/

/*BEGIN : Footer*/
.footer{
    display:flex;
    flex-direction:row;
    gap:10px;
    position:fixed;
    bottom:30px;
    width:100%;
    height:100px;
    background-color:transparent;   

}

.footer-content{
    width:30%;
    text-align:right;
    background-color:transparent;
    align-content:center;
}

.btnwahtsapp{
    position:relative;
    width:300px;
    height:50px;
    background-color:transparent; 
    margin:auto;
    border-radius:20px;
    border:3px solid orange;
    text-align:center;
    align-content:center;
    cursor:pointer; 
    font-size:18px;
    font-weight:bold;
}
.btnwahtsapp img{
    position:absolute;
    top:10px;
    left:7%;
    width:30px;
}
.btnwahtsapp a{
    position:absolute;
    top:15px;
    left:20%;
}
.btndaftarsekarang {
    position: relative;
    width: 300px;
    height: 50px;
    background-color: transparent; 
    margin:auto;
    border-radius: 20px;
    border: 3px solid orange;
    text-align: center;
    align-content: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

    .btndaftarsekarang img {
        position: absolute;
        top: 10px;
        left: 7%;
        width: 30px;
    }

    .btndaftarsekarang a {
        position: absolute;
        top: 15px;
        left: 20%;
    }
/*END : Footer*/