/* ===================================== APLIKASI ========================================= */
/* ====================================== C S S =========================================== */
/* ======================================================================================== */
#body{
	border-left: 3px outset;
	border-right: 3px outset;
	border-bottom: 4px outset;
	border-radius: 0px 0px 20px 20px;
	padding: 10px;
}
/* ================================================== HEADER ================================================ */
header {
	position: fixed;
	width: 100%;
}
#top-option {
	float: left;
	padding: 5px;
}
#top-option img {
	padding: 5px;
	opacity: 0.7;
}
#top-option:hover {
	cursor: pointer;
}
#top-option img:hover {
	opacity: 1;
}
.top-option {
	display: none;
}
#top-option:hover .top-option {
	display: inherit;
	position: absolute;
	width: 250px;
}
.top-option div {
	padding: 5px;
	border-bottom: 2px solid;
}
.top-option div:hover {
}
#small-show, .small-show{
	display: none;
}
#top-desc {
	overflow: hidden;
	padding: 10px 0px;
}
#top-info {
	float: right;
	padding: 4px 4px 5px 4px;
}
#date {
	font-weight: bold;
}
#clock {
	font-size: 12pt;
}
#top-separator{
	margin-bottom: 10px;
}
#kop{
}
#kop-logo{
	width: 120px;
	height: 120px;
	padding: 10px;
	text-align: center;
}
#kop-logo img{
	max-width: 100%;
	max-height: 100%;
}
#kop-judul{
	overflow: hidden;
	padding: 15px 5px;
}
/* ================================================== MENU ================================================ */
#menu{}
#menu-box{
	width: 25%;
	float: left;
}
#menu-item, #selected{
	border-bottom: 3px inset;
	text-align: center;
	padding: 10px 5px;
	transition: all ease-in-out 0.5s;
}
#selected{
	border-top: 3px outset;
	border-right: 3px outset;
	border-left: 3px outset;
	border-bottom: none;
	border-radius: 15px 15px 0px 0px;
}
#menu-item:hover{
	border-bottom: 3px solid;
	transition: all ease-in-out 0.5s;
}
#menu a:link, #menu a:visited{
}
#menu a:link #selected, #menu a:visited #selected{
}
#menu a:hover #menu-item{
	transition: all ease-in-out 0.5s;
}
#menu a:hover #selected{
	cursor: default;
}

/* ================================================== SIDEBAR ================================================ */
#sidebar{
	width: 300px;
	border: 3px outset;
	border-radius: 12px;
	padding-bottom: 10px;
}
#side_logo{
	padding: 20px;
}
#side_logo img{
	max-width: 100%;
}
#side_box{
	border: 3px outset;
	border-radius: 7px;
	margin: 10px 15px;
	background:url(../images/white-soss-logo-256.png) no-repeat;
	background-position: right bottom;
}
#side_judul{
	border-radius: 4px 4px 0px 0px;
	padding: 10px;
	font-weight: bold;
}
#side_isi{
	border-radius: 0px 0px 5px 5px;
	padding: 10px;
}
#side_footer{
	border-radius: 0px 0px 7px 7px;
	padding: 10px;
	font-weight: bold;
}

/* ===== SIDEBAR KHUSUS ==
 * Sidebar pada halaman Notifikasi
 * 
 */
#ek_note_sidebox{
	float: left;
	margin-right: 10px;
}
#ek_note_side{
	float: none;
}
#ek_note_header{
	float: left;
	margin-right: 10px;
	text-align: justify;
	text-transform: none;
}

/* ================================================== ISI ================================================ */
#isi{
	padding: 10px 10px 10px 10px;
	border: 3px outset;
	border-radius: 12px;
	overflow: hidden;
}
#isi-box{
	margin: 10px;
}
.fifty{
	min-width: 282px;
}
#download-app{
	margin: 10px auto;
	width: 256px;
}
#download-app img{
	width: 100%;
}
#logo_pancasila{
	width: 150px;
	margin: 10px auto;
}
#logo_pancasila img{
	width: 100%;
}
#home_fifty{
	width: 50%;
	float: left;
}
#home_twinty{
	width: 20%;
	float: left;
}

/* === INPUT === */
#logo_input{
	width: 150px;
	padding: 10px;
	margin: 0px auto;
	float: left;
}
#logo_input img{
	width: 100%;
}
#ket_input{
	text-align: justify;
}

#boxpart{
	padding: 0px 0px 10px; 
}
#boxpart-left{
	float: left;
	padding: 5px 0px;
}
#boxpart-left #nama{
	min-width: 200px;
}
#boxpart-left #titikdua{
	float: right;
	padding: 0px 5px;
}
#boxpart-right{
	overflow: hidden;
	min-width: 300px;
}
#boxpart-right #input{
	
}
#informasi{
	width: 50%;
	float: right;
}

/* ===== SETTING =======
 *
 */
#set_logo_box{
	width: 25%;
	float: left;
}
#set_logo{
	padding: 10px;
	margin: 10px;
	border: 2px outset; 
	border-radius: 10px;
}
#set_logo_img{
	
}
#set_logo_img div img{
	width: 100%;
}
#set_logo_img div{
	border: 2px inset;
	border-radius: 7px;
	padding: 10px;
}
#set_logo_kat{
	text-align: center;
}
#set_logo_input{
	
}
#tembusan_check input[type='radio']{
	display: none;
}
#tembon{
	border: 3px outset;
	padding: 2px 13px;
	border-radius: 10px 0px 0px 10px;
	cursor: pointer;
}
#temboff{
	border: 3px outset;
	padding: 2px 10px;
	border-radius: 0px 10px 10px 0px;
	cursor: pointer;
}
#tembusan_check input[type='radio']:checked ~ label div{
	border: 3px inset;
}
#tembusan_check input[type='radio']:checked ~ label div{
	border: 3px inset;
}

/* CBA LINK CSS */
#cba-produk{
	float: left;
	width: 25%;
	height: 350px;
}
#cba-gambar{
	height:200px;
	margin-right: 7px;
	border-radius: 10px; 
}

/* ======================================= F O O T E R =======================================
 *
 */
footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
}
#footer {
	text-align: center;
}
.footer {
	text-align: center;
}
.footer img {
	padding: 5px 25px;
}
.footer img:hover {
	cursor: pointer;
}
#copyright {
	font-size: 10pt;
	padding: 5px 10px;
}
#fmenu{}
#fmenu-box{
	float: left;
	width: 20%;
	text-align: center;
}
#fmenu-link{
	padding: 10px;
	color: #fff;
	text-shadow: 1px 1px 3px #000;
}
#fmenu-link:hover{
	background: rgba(255,255,255,0.2);
	cursor: pointer;
}
#fmenu-link img{
	width: 16px;
	height: 16px
}
.ek_note_autosum{
	background: #f00;
	padding: 0px 5px 2px;
	border-radius: 15px;
	font-size: 10pt;
	position: absolute;
}
/* =========================== */
/* =========================== HOMEPAGE =========================== */
#ek_bg{
}
#ek-home{
	float: left;
	width: 33.3%;
}
#sdk_logo{
	width: 150px;
}
#sdk_logo img{
	width: 100%;
}
#ek-home-box{
	margin: 10px;
}
#ek-home-box-side{
	border: 2px outset;
	border-radius: 10px;
	box-shadow: 3px 3px 9px #000;
	padding: 10px;
	height: 500px;
}
#sdk_login_box{
	border: 3px outset;
	border-radius: 12px;
	width: 400px;
	margin: 20px auto 50px;
	overflow: hidden;
	border-color: #e5e5e5;
	box-shadow: 7px 12px 12px #000;
	background: linear-gradient(to right bottom, rgba(255,255,255,0.3), rgb(227, 224, 224));
}
#sdk_login_header{
	padding: 10px 10px 10px 10px;
	border-radius: 12px 12px 0px 0px;
	color: #fff;
	font-weight: bold;
	background: #000;
}
#sdk_login_isi{
	padding: 10px 10px 10px 10px;
	
}
/* JENIS DATA
 * Query = ek_datajenis 
 */
#ek_dj{
	margin: 0px auto;
	width: 400px;
	text-align: center;
}
#ek_dj_box{
	background: linear-gradient(rgba(255,255,255,03),rgba(0,0,0,0.3));
	border: 5px outset #fff;
	border-radius: 25px;
	box-shadow: 5px 5px 15px #000;
	padding: 10px;
	margin: 15px;
	font-size: 30px;
	font-weight: bold;
}
#ek_dj_box:hover{
	background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.1));
	border: 5px inset #fff;
	box-shadow: 1px 1px 3px #000;
	color: #fff;
	text-shadow: 2px 2px 6px #000;
	transition: all ease-in-out 0.5s;
}
#ek-ket{
	height: 0px;
	overflow: hidden;
	transition: all ease-in-out 1s;
}
input[type='checkbox']:checked ~ #ek-ket{
	height: 210px;
	transition: all ease-in-out 1s;
}
#ek-ket-isi{
	background: rgba(0,0,0,0.1);
	border: 3px inset #c0c0c0;
	height: 160px;
	margin: 10px;
	padding: 10px;
}