@charset "utf-8";
/* CSS Document */

body{
	background-color:#FFFFFF;
}

.paragraph{
	font-size:12px;
	letter-spacing:0.8px;
}

.content{
	margin-top:15px;
}

#tab-two{
	display:none;
}

#tab-three{
	display:none;
}


.landing-logo{
	width:100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
}

.landing-copyright{
	margin-bottom:50px;
	text-align:center;
}

.welcome-text h3{
	font-family:'Raleway', sans-serif;
	font-size:20px;
	color:#535353;
	font-weight:300;
	text-align:center;
	text-transform:uppercase;
	margin-top:20px;
}

.welcome-text p{
	text-align:center;
	font-size:14px;
	font-family:'Dosis', sans-serif;
	font-weight:400;
	text-transform:uppercase;
	margin-top:5px;
	margin-bottom:5px;
	color:#ce1a13;
}

.user-text{
	text-align:center;
	font-size:12px;
	font-family:'Dosis', sans-serif;
	font-weight:400;
	margin-top:5px;
	margin-bottom:50px;
	color:#000000;
}

.navigation-icons{
	width:270px;
	margin-left:auto;
	margin-right:auto;	
}


.home-nav{
	background-image: url(../images/icon/misc/home.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.absensi-nav{
	background-image:url(../images/icon/user/user3.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.profil-nav{
	background-image:url(../images/icon/user/user.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.about-nav{
	background-image:url(../images/icon/settings/cog2.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;	
}

.folio-nav{
	background-image:url(../images/icon/media/image2.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.blog-nav{
	background-image:url(../images/icon/tools/pencil.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.video-nav{
	background-image:url(../images/icon/media/film.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.mail-nav{
	background-image:url(../images/icon/misc/mail.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}



/*---------- tambahanku ----------*/

.calendar-nav{
	background-image:url(../images/calendar.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.locked-nav{
	background-image:url(../images/icon/misc/locked2.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.unlocked-nav{
	background-image:url(../images/icon/misc/unlocked.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.checklist-nav{
	background-image:url(../images/checklist.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.logbook-nav{
	background-image:url(../images/icon/misc/notebook.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

.navigation-icons2 {
    width: 300px; /* Set lebar tetap */
    margin: 0 auto; /* Pusatkan di tengah halaman */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.form-center {
    display: grid;
    place-items: center; /* Sama dengan align-items & justify-content center */
    /* height: 100vh; /* Opsional: Buat tengah di seluruh halaman */
}

.nav-icon2 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 36px 36px;
}

.login-container {
    width: 350px; /* Lebar tetap */
    margin: 0 auto; /* Pusatkan horizontal */
    
    display: flex;
    flex-direction: column; /* Susun elemen ke bawah */
    align-items: center; /* Pusatkan secara horizontal */
    gap: 20px; /* Jarak antar elemen */
}

.exit-nav{
	background-image:url(../images/icon/user/exit.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:36px 36px;
}

/*---------- /tambahanku ----------*/

.nav-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 80px; /* Sesuaikan dengan ukuran ikon */
}

.nav-text{
    margin-top: 5px; /* Jarak teks dari ikon */
    font-size: 12px;
    color: gray; /* Ubah warna teks agar terbaca */
    font-family: Arial, sans-serif;
}


.nav-icon{
	float:left;
	border-radius:50px;
	width:60px;
	height:60px;
	margin-left:15px;
	margin-right:15px;
	margin-bottom:25px;
}

.icon-red{
	background-color:#fc5858;
}

.icon-blue{
	background-color:#259780;
}

.icon-dblue{
	background-color:#2f95bf;
}

.icon-magenta{
	background-color:#9b59b6;
}

.icon-green{
	background-color:#2ecc71;
}

.icon-yellow{
	background-color:#f1c40f;
}

.small-navigation-icons{
	margin-top:5px;
	margin-bottom:5px;
	width:300px;
	margin-left:auto;
	margin-right:auto;	
}

.copyright{
	color:#252525;
	display:block;
	text-transform:uppercase;
	float:none;
	text-align:center;
	margin-top:20px;
	font-size:12px;
}

.footer{
	margin-top:-30px;
}

.small-nav-icon{
	width:40px;
	height:40px;
	border-radius:40px;
	margin-left:10px;
	margin-right:10px;
	float:left;
}

.instagram-nav{
    background-image:url(../images/icon/social/_igram.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:24px 24px;
	background-color:#f9588e;
}

.tiktok-nav{
    background-image:url(../images/icon/social/_tiktok.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:24px 24px;
	background-color:#000000;
}

.x-nav{
    background-image:url(../images/icon/social/_xlogo.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:24px 24px;
	background-color:#000000;
}

.youtube-nav{
    background-image:url(../images/icon/social/_youtube.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:24px 24px;
	background-color:#ff0000;
}

.facebook-nav{
	background-image:url(../images/icon/social/_facebook.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:24px 24px;
	background-color:#3a77a1;
}

.phone-nav{
	background-image:url(../images/icon/communication/phonehook.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:24px 24px;
	background-color:#b3d557;
}

.twitter-nav{
	background-image:url(../images/icon/social/twitter.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:24px 24px;
	background-color:#6cd0d9;
}

.up-nav{
	background-image:url(../images/icon/arrows/bendedup.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:24px 24px;
	background-color:#e34e47;
}




.header{
	position:fixed;
	width:100%;
	z-index:9999;
	height:70px;
	background-color:#f9f9f9;
	border-bottom:solid 1px #e9e9e9;
}

.header-clear{
	height:70px;
}


.logo-home{
	margin-left:20px;
	margin-top:15px;
	margin-bottom:15px;
	float:left;
}

.header-text{
	float:right;
	padding-top:17px;
}

.header-text strong{
	letter-spacing:normal;
	font-family:'Lato', sans-serif;
	font-size:18px;
	color:#3b4043;
	font-weight:600;
	display:block;
	text-align:right;
	padding-right:20px;
}

.header-text em{
	font-family:'Dosis', sans-serif;
	font-size:13px;
	letter-spacing:0.8px;
	font-style:normal;
	color:#3b4043;
	display:block;
	padding-right:20px;
}

.heading{
	margin-bottom:20px;
}

.heading em{
	font-family:'Dosis', sans-serif;
	font-style:normal;
	font-size:12px;
	color:#ce1a13;
}

.heading h3{
	color:#252525;
	font-weight:200;	
}

.heading-left{
	float:left;
}

.heading-right{
	float:right;
	margin-top:5px;
}

.thumbs{
	width:110%;
	margin-left:-5%;
}


.thumb{
	width:50%;
	box-sizing:border-box;
	padding-left:10px;
	padding-right:10px;
	float:left;
	margin-bottom:10px;
}

.thumb img{
	width:100%;
	display:block;
}


.left-thumb-text{
	color:#FFFFFF;
	text-align:left;
	padding-left:10px;
	margin-top:-30px;
}

.right-thumb-text{
	color:#FFFFFF;
	text-align:right;
	padding-right:10px;
	margin-top:-30px;
}

.content-tab{
	font-size:14px;
	color:#FFFFFF;
	background-color:#252525;
	width:32%;
	text-transform:uppercase;
	float:left;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	margin-left:2px;
	margin-bottom:20px;
	margin-top:10px;
}