#back{
	width: 5%;
	position: fixed;
	left: 4vw;
	top:7.5vw;
}
#title{
	width: 60%;
	position: fixed;
	left: 20vw;
	top:6vw;
}
#add, #profile{
	width: 8%;
	position: fixed;
	right: 8vw;
	top:7vw;
    border-radius: 50%;
} 
#BG{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -100;
    background-image: linear-gradient(#05b7fa, #4975e4);
	background-repeat: no-repeat;
	background-size: 100vw 100vh;  
}
#beli_tiket_container{
	width: 80%;
	height: 70%;
	position: absolute;
	left: 10%;
	top: 20vh;
	border-radius: 30px;
	background-image: linear-gradient(#05b7fa, #4975e4);
	box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
}
#titleclass, #titleclass1{
	font-family: 'Rubik Mono One', monospace;
	color: white;
	text-shadow: 2px 3px 5px rgba(0,0,0,0.5);
	background-image: url("https://fun-plays.com/img/nepi_learn/title_add_class.png");
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	width: 84%;
	height: 16vw;
	left: 8%;
	top: -12.5vw;
	text-align: center;
	font-size: 5vw;
	padding: 9vw 0vw 0vw 0vw;
}


#form_kelas{
    position: absolute ;
    left: 8%;
    top: 15vw;
    width: 84%;
    height: 85%;
    align-content: center ;
   font-family: 'Rubik', sans-serif;
    color: white ; 
    font-size: 2.5vw;
    overflow-y: auto ;
    
}
.inpt{
    width: 100%;
    height: 5vw;
    border-radius: 50px;
    border: none ;
    margin-top: 1vw;
    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
    font-size: 2vw;
    padding-left: 5%;
}
.inpt3{
    width: 43%;
    height: 5vw;
    border-radius: 50px;
    border: none ;
    margin-top: 1vw;
    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
    font-size: 2w;
    padding-left: 5%;
}
.inpt2{
    width: 100%;
    height: 5vw;
    border-radius: 50px;
    border: none ;
    margin-top: 1vw;
    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
    font-size: 2vw;
    padding-left: 2vw;
    font-size: 2vw;
}
.inpt_tgl{
    width: 70%;
    height: 5vw;
    border-radius: 50px;
    border: none ;
    margin-top: 1vw;
    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
    font-size: 2vw;
    padding-left: 2vw;
}
#tgl{
    position: sticky ; 
    width: 60%;
    height: 10vw;
    float: left ;
}
#jam{
    float: left ;
    width: 40%;
    height: 10vw;
    
}
.thumnail{
    position: relative ;
     float: left ;
    width: 50%;
    height: 22vw;
    
}
.logo{
    position: relative ;
     float: left ;
    width: 40%;
    height: 22vw;
    padding-left: 0%;
     
    margin-left: 10%;
}
.custom-file-input { 
   opacity: 0;
    width: 80%;
   background-color: red;
    height: 17vw;
    
    }

    .custom-file {
        background-color: #3498db;
        color: #fff;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
        display: inline-block;
        
    }

    .custom-file:hover {
        background-color: #2980b9;
    }
#dummy_thumbnail{
    background-color: white ;
    position: absolute ;
     width: 80%;
    background-color: whit;
    height: 15vw;
    top: 4vw;
    border-radius: 7px;
    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
      z-index: -100;
    background-image: url("https://fun-plays.com/img/nepi_learn/add_gambar.png");
    background-size: 30% 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#dummy_logo{
    background-color: white ;
    position: absolute ;
     width: 100%;
    background-color: whit;
    height: 15vw;
    top: 4vw;
    border-radius: 7px;
    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
     z-index: -100;
    background-image: url("https://fun-plays.com/img/nepi_learn/add_gambar.png");
    background-size: 30% 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.image_preview
{
    width: 100%;
    max-height: 15vw;
    border-radius: 7px;
}
#btn_selesai{
    width: 50%;
    margin-left: 25%;
    margin-top: 2vw;
    height: 11vw;
    border: none;
    background: none;
   background-image: url("https://fun-plays.com/img/nepi_learn/selesai.png");
    background-size: 100% 100%; 
    background-repeat: no-repeat;
}
#login{
    
    
    width: 100%;
    height: 8vw; 
    padding-top:2vw; 
    color: white;
    margin-top: 1vw;
    margin-bottom:7vw;
    font-family: 'Rubik', sans-serif;
    font-size: 3.8vw;  
}
#google_login{
   
}

.hidden{ 
}
.g_id_signin{
	 
}
#btnWrap{
	position:fixed;
	height:4%;
	bottom: 0%;
 left: 50%;
 transform: translate(-50%, -50%);
    z-index: 102;
}
#create_cr_1
{
	position:absolute;
	background-color:red;
	width:88%;
	height:90vw;
	z-index:102;
	left:6%;
	top:40vw;
	border-radius: 30px;
	background-image: linear-gradient(#05b7fa, #4975e4);
	box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
}
.indikator_class{
	width:30%;
	margin-top:20vw;
}
.pesan{
	width:85%;
	color:white;
	font-family: 'Rubik Mono One', monospace;
	font-size:2.5vw;
	margin-top:5vw;
}
#login-section{
    background-color: white;
    position: fixed;
    bottom: 0%;
    width: 84%;
    left: 0%;
    height: 35%;
    min-height: 68vw;
    max-height: 70vw;
    padding: 3vw 8vw 8vw 8vw;
    border-radius: 10% 10% 0% 0%;
}
#landing_page{
    position: fixed;
    bottom: 0%;
    width: 100%;
    left: 0%;
    height: 100%;
    z-index: 200;
}
#scover{
   position: fixed;
    bottom: 25%;
    width: 150%;
    left: -25%; 
}
.title{
    color: #3377D2;
   font-family: 'Rubik', sans-serif;
    font-size: 4.5vw;
    width: 75%; 
}
.diskripsi{
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5vw;
    width: 95%;
}
#btn_mulai{
    background-image: url("https://fun-plays.com/img/nepi_learn/btn_mulai.png");
    background-size: 100% 100%;
    background-position: 50% 40%;
    background-repeat: no-repeat;
    width: 35%;
    height: 8vw;
    
    padding-top:2vw; 
    color: white;
    margin-top: 7vw;
    margin-bottom: 10vw;
    font-family: 'Rubik', sans-serif;
    font-size: 3.8vw;
}
#privasi{
    color: #78D635;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5vw;    
}
#tos{
     color: #4975E4;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5vw;   
}
#classroom-list{     
    position: absolute;
    width: 76%;
    left: 12%;
    top: 22vw;         
}
.class-item{   
    width :100%;
    height: 47.6vw;  
    background-image: linear-gradient(#ffeb96, #edab23);
	background-repeat: no-repeat; 
    border-radius: 15px;
    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
    margin-bottom: 5vw;
}
.class-wrap{  
    width :100%;
    height: 43.5vw;  
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 15px;
    padding-top:2vw;
}
.page_thumbnail{
    width: 72vw;
    border-radius: 15px;
    margin-left: 2%;
    height: 26.67vw;
    background-image: url("https://fun-plays.com/img/thumbnail/Group 1457.png");
    background-size: cover;
    background-position: 50% 40%;
    background-repeat: no-repeat;
   box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
}
.author_name{
      margin-top: 21vw;
    margin-left: 3vw;
   background-color:#FF8C22;
    border-radius: 2vw;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5vw;   
    color: white;
    text-align: center;
    padding: 0.5vw 3vw 0.5vw 3vw;
}
.jam{
      margin-top: -6.2vw;
    margin-left: 56vw;
   background-color:#FF8C22;
    border-radius: 2vw;
    display: inline-block;
    font-family: 'Rubik', sans-serif;
    font-size: 3vw;   
    color: white;
    text-align: center;
    padding: 0.5vw 3vw 0.5vw 3vw;
}
.title_class_list{
    font-family: 'Montserrat', sans-serif;
    font-size: 4vw;
    font-weight: bold;
    margin-left: 3vw;
    margin-top: 0.55vw;
    white-space: nowrap;       
  overflow: hidden;            
  text-overflow: ellipsis;     
  width: 73vw;
    color: white; 
}
.tanggal_class{
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 2vw; 
    width: 20%;
    margin-left: 3vw;
    margin-top: 0.5vw;
    padding: 0.5vw 0vw 0.5vw 6vw ;
    background-image: url("https://fun-plays.com/img/nepi_learn/tanggal_icon.png");
    background-size: 20% 100%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    float: left;
}
.biaya_class{
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 2vw;   
    margin-top: 0.5vw;
    margin-left: 22vw; 
    padding: 0.5vw 0vw 0.5vw 6vw ;
    background-image: url("https://fun-plays.com/img/nepi_learn/price_tag.png");
    background-size: 8% 90%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}
.like_class{
     background-image: url("https://fun-plays.com/img/nepi_learn/like_button.png");
    background-size: 35% 90%;
    background-position: 0% 0%;
    background-repeat: no-repeat; 
    width: 10%;
    margin-top: 2vw;
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5vw;
    font-weight: bold;
    color: white;
    margin-left: 3vw;
    padding:  0vw 0vw 0.5vw 6vw;    
     float: left; 
    
}
.btn_follow{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8vw;
    float: left;
    background-color: white;
    border-radius: 3vw;
    color: #289DED;
    padding:  0.8vw 3vw 0.8vw 3vw;   
    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
    margin-top:2vw;
}
.btn_join{
     font-family: 'Montserrat', sans-serif;
    font-size: 2vw;
    float: left;
    background-color: white;
    border-radius: 3vw;
    color: #289DED;
    padding:  0.8vw 3vw 0.8vw 3vw;  
    box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
    margin-top:2vw;
    margin-left: 31vw;
}
.btn_cari{
    width: 5%;
    position: fixed;
    z-index: 101;
    left:70%;
    top:8vw;
}
.search{
    background-color: #13ACF7;
    border-style: solid;
    border-color: #FCDD55;
    border-radius: 4vw;
    border-width: 2;
    padding-left: 5vw;
    padding-right: 12vw;
    color: white;
     font-family: 'Montserrat', sans-serif;
}
#pencarian{
    position: fixed;
    z-index: 101;
    width: 60%;
    height: 9vw;
    left: 20%;
    top: 6vw;
    font-size: 3vw;
}
#profile-section{
    position: fixed; 
    width: 85%;
    height: 29.6vw;
    left: 9%;
    z-index: 201;
    top: 6vw;
    background-image: url("https://fun-plays.com/img/nepi_learn/banner.jpg");
    background-size: 100% 101%;
    background-position: 0% 0%;
    border-radius:9vw;
}