html, body{
    width:100%;
    height:100%;
}

button:focus{
    outline:none;
}

button{
    cursor:pointer;
    border:none;
}

input:focus{
    outline:none;
}

textarea:focus{
    outline:none;
}

.center-y{
    position:relative;
    top:50%;
    transform:translate(0,-50%);
}

.dis-flex{
    display:flex;
}

.color-blue{
    color:#BDF5EC;
}

.bg-blue{
    background-color:#BDF5EC;
}

.color-yellow{
    color:#fbffc3;
}

.bg-yellow{
    background-color:#fbffc3;
}

.color-purple{
    color:#B696CA;
}

.bg-purple{
    background-color:#B696CA;
}

.color-pink{
    color:#F7CEC7;
}

.bg-pink{
    background-color:#F7CEC7;
}

.bg-black{
    background-color:black;
}

.invert{
    filter: invert(100%);
}

.hover-color:hover{
    background-color:grey;
    color:white;
}

.hover-color-smooth:hover{
    background-color:#eaeaea;
}

.click-color:active{
    transition:.2s;
    background-color:grey;
}

.click-color-smooth:active{
    transition:.2s;
    background-color:#eaeaea;
}

.click-color-yellow:active{
    transition:.2s;
    background-color:#fbffc3;
    color:black;
}



.o-hidden{
    overflow:hidden;
}

.but-sm{
    padding:5px 15px 7px 15px;
    font-size:.8rem;
    border:none;
}

.but-md{
    padding:8px 15px;
    font-size:1rem;
    border:none;
    width:100%;
    max-width:300px;
}

.but-lg{
    padding:10px;
    font-size:1.2rem;
    border:none;
    width:100%;
    max-width:400px;
}

.text-bold{
    font-weight:bold;
}

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

.bor-10{
    border-radius:10px;
}
.bor-15{
    border-radius:15px;
}
.bor-20{
    border-radius:20px;
}
.bor-50{
    border-radius:50%;
}

.pointer{
    cursor:pointer;
}

.click-scale:active{
    transition:.2s;
    transform:scale(.95);
    -webkit-transform:scale(.95);
    -ms-transform : scale(.95);
}

.abs{
    position:absolute;
}

.abs-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.rel{
    position:relative;
}

.rel-center{
    position:relative;
    left:50%;
    transform:translate(-50%);
}

.center-x-y{
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    
}

.shadow{
    box-shadow:0 0 10px rgba(0,0,0,.2);
}

.input-box{
    margin-bottom:20px;
    position:relative;
}
.input-box input{
    background-color:transparent;
    border:none;
    border-bottom:1px solid white;
    padding:5px 0 5px 30px;
}
.input-box img{
    width:20px;
    position:absolute;
    top:5px;
}
.input-box label{
    position:absolute;
    top:3px;
    left:30px;
    opacity:.7;
    transition:.2s;
    pointer-events:none;
    width:100%;
}
.input-box input:focus ~ label{
    top:-15px;
    left:0;
    font-size:.7rem;
}
.input-box input:valid ~ label{
    top:-15px;
    left:0;
    font-size:.7rem;
}

.input-box-kotak{
    margin-bottom:35px;
    position:relative;
    margin-top:25px;
}
.input-box-kotak input{
    width:100%;
    background-color:transparent;
    border:none;
    border:1px solid grey;
    padding: 5px;
    max-width:700px;
}
.input-box-kotak textarea{
    width:100%;
    background-color:transparent;
    border:none;
    border:1px solid grey;
    padding: 5px;
    max-width:700px;
    min-height:150px;
}
.input-box-kotak img{
    width:20px;
    position:absolute;
    top:5px;
}
.input-box-kotak label{
    width:100%;
    transition:.2s;
    pointer-events:none;
    font-size:.8rem;
    position:absolute;
    top:-25px;
    left:0;
}
.input-box-kotak input:focus{
    border:1px solid black;
    box-shadow:0 0 5px rgba(0,0,0,.1);
}
.input-box-kotak textarea:focus{
    border:1px solid black;
    box-shadow:0 0 5px rgba(0,0,0,.1);
}
.input-box-kotak input:focus ~ label {
    font-weight:bold;
}
.input-box-kotak textarea:focus ~ label {
    font-weight:bold;
}

.input-box-radio{
    position:relative;
    width:100%;
    max-width:700px;

}

.input-box-radio #label{
    position:absolute;
    top:-25px;
    font-size:.8rem;
}

.couple-input{
    display:flex;
    width:100%;
    max-width:700px;
    margin-top:-10px;
}

.couple-input-box-1{
    width:50%;
    padding-right:10px;
}

.couple-input-box-2{
    width:50%;
    
}

.box-radio{
    position:relative;
}



.text-sm{
    font-size:.8rem;
}

.text-xs{
    font-size:.6rem;
}

.text-md{
    font-size:.9rem;
}

.text-lg{
    font-size:1.2rem;
}
.text-xl{
    font-size:1.4rem;
}

.data-beetween{
    position:relative;
    padding:5px 0;
}



.data-beetween-2{
    position:absolute;
    right:0;
    top:4px;
}

@keyframes background{
    0%{opacity:0;}
    100%{opacity:1;}
}

@keyframes dialog{
    0%{top:-10px;opacity:0;}
    70%{top:20px;opacity:.8;}
    100%{top:15px;opacity:1;}
}

@keyframes alert{
    0%{transform:translate(-50%,-50%) scale(.5);opacity:0;}
    70%{transform:translate(-50%,-50%) scale(1.1);opacity:.7;}
    100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
}