/* Font style for all the text in the system */
body {
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

/* the style for the header */
.minda-header {width: 1024px; margin: 0 auto; height: 136px;}
.minda-banner {margin-left:250px; margin-top: 10px;}
.minda-logo {
	position: absolute;
	width: 145px;
	height: 113px;
}
.bar-line { height: 20px; background-color:#CC0000;}
.wrapper { width: 1024px; margin: 0 auto;}

/* style for all the section titles*/
.tb-title {
	color: #FFFFFF; /* warna tulisan login*/
	font-size: 14px;
	background-color:#CC0000; /* warna kotak tulisan login*/
	padding: 10px;
	margin-top: 3px;
}

.layout-table { margin: 0 auto; padding: 30px; }
.input-txt { padding: 7px;}

/* style for the login button in the login page. */
.btnLogin {
	font-size: 14px;
	padding: 7px 20px;
	border: 1px solid #999999; /* warna garis kotak tombol login*/
  border-radius: 8px;
  background-color:#CC0000; /* warna tombol login*/
	color: white;
	margin-bottom: 30px;
}
.btnLogin:hover {background-color: rgb(255,153,0); cursor: pointer;}
.login {
	border-bottom: 2px solid #999999;
	border-left: 2px solid #999999;
	border-right: 2px solid #999999;
}

.layout-table td { padding: 30px;}

/* styles for the textfield where the user will enter the username and password */
.login-info { font-size: 14px; color: rgb(51,51,51);}
.field-up { padding: 5px; margin: 20px 0px;}
.field-up span {font-size: 11px; color: red;}

/* styles for DTS info in the login page*/
.banner p {
	font-size: 12px;
	color: rgb(51,51,51); /* warna tulisan pembukaan di menu login*/
	text-align: justify;
}

.banner h2 {
	font-size: 16px;
	color:#CC0000;
 }

#banner-dts {width: 507px; margin-top: 3px;}

/* styles for all the footers of the system */
.footer {
	width: 1024px;
	height: 56px;
	background-color: rgb(34,34,34);
	margin: 0 auto;
	margin-top: 40px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.copyright {
	text-align: center;
	color: rgb(255,255,255);
	font-size: 9px;
	padding: 22px;
}

/* styles for the search function of the system*/
.search-div {
	border: 1px solid #FFFFFF ; /* warna garis pencarian*/
  border-radius: 16px;
	width: 400px;
}
.search-div input[type=text] {
	padding: 8px 12px;
	border: 1px solid white;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	width: 350px;
}
.btnSearch {
	padding: 5px 7px;
	background-color: white;
	color:rgb(67,67,67);
	border: 1px solid white;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}
.btnSearch img {
	width: 28px;
	height: 28px;

}

.btnSearch:hover { cursor: pointer; background-color: #efefef;}
.search-menu { margin-top: 30px; } /* JARAK GARIS HEADER*/

/* styles for all the dropdown menu in the system */
.dropbtn {
		background-color: #CC0000;
    color: white;
    padding: 10px 5px 10px 5px;
    font-size: 13px;
    border: none;
    cursor: pointer;
		border-radius: 8px;
		width: 130px;
}

.dropbtn:hover, .dropbtn:focus { background-color: #FF0000;}

.dropdown {
		margin-top: -40px;
		float: right;
		margin-right: 45px; /* posisi tombol nama user */
}

.dropdown-content {
		margin-top: 5px;
    display: none;
    position: absolute;
    background-color: rgb(255,255,255); /* warna menu*/
    min-width: 130px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
		border-radius: 8px;
		border: 1px solid rgb(181,181,181);
}

.dropdown-content a {
		font-size: 13px;
    color: black; /* warna tulisan menu*/
    padding: 8px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1} /* wrna menu dipilih*/
.show {display:block;}

.dash-title {
	font-size: 16px;
	color: rgb(255,153,0);
	background-color: rgb(255,254,159);
	padding: 20px;
	text-transform: uppercase;
	margin: 30px;
	border-radius: 8px;
	font-weight: bold;
}

.contents { margin: 30px;}
.nav-header {
	font-size: 14px;
	color: white; /* wrna tulisan header menu*/
	background-color: #CC0000; /* warna background header menu*/
	padding: 13px;
	text-transform: uppercase;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	margin: 0px;
	font-weight: bold;
}

.admin-menu p, .admin-menu img  { display: inline;}
.admin-menu p {
	padding-left: 30px;
}
.admin-menu img {
	width: 25px;
	height: 25px;
	position: absolute;
	margin-top: -3px;
}

.admin-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: rgb(243,243,243); /* warna menu di dalam*/
}

.admin-menu li a {
    display: block;
    padding: 10px 10px;
    text-decoration: none;
		font-size: 14px;
		color: rgb(255,153,0);
		text-transform: capitalize;
		border-bottom: 1px dashed rgb(153,153,153); /* warna garis putus di menu*/
}
.admin-menu li a.active { background-color: #4CAF50; color: white; }
.admin-menu li a:hover:not(.active) { background-color: #D9D9D9; color: rgb(255,153,0);}
.am-display { width: 748px; padding-left: 15px;}
.menu-display { border: 2px solid rgb(255,254,159);}

.menu-display label {
	font-size: 14px;
	color: rgb(51,51,51);
	font-weight: bold;
}

.menu-display { display: table; width: 100%;}
.create-table { width; 410px; margin: 15px auto 0 auto;}
.create-table tr {padding: 10px 0}
.forms input, .forms select, .forms textarea { margin: 5px;}

.forms input[type=text], .forms .sel-width, .forms input[type=password], .dl, .forms input[type=date] {
	padding: 5px;
	border: 1px solid #ccc;
  border-radius: 4px;
}

.forms input[type=text], .forms input[type=password], .forms input[type=date]{ width: 250px; }
.forms .sel-width { width: 262px;}
.create-label {text-align: right;}

.btnOk, .btnCancel {
	padding: 7px 12px;
	border: 1px solid #ccc; /* warna garis tombol update cancel*/
  border-radius: 16px;
}

.btnOk:hover{ cursor: pointer; background-color: #fffece}
.btnOk { background-color: rgb(255,254,159); color: rgb(255,153,0); font-size: 14px;}
.btnCancel { background-color: white;  width: 50px; margin-top: 0px;}

.btnCancel a {
	text-decoration: none;
	color:rgb(67,67,67);
	font-size: 14px;
}

.btnCancel:hover {background-color: #ccc;}
.update-in-pass {margin-top: 30px;}
.update-in-pass p, .update-in-pass input[text=submit] {
	display: inline;
}

.user-list th, .user-list td {
	font-size: 14px;
	color: rgb(51,51,51);
	padding: 15px 10px;
	text-align: center;
}
.user-data span { padding-left: 10px;}
.user-header, .user-data { border-bottom: 1px solid rgb(67,67,67);}
.user-list { border-collapse: collapse;margin-top: 5px; margin-bottom: 20px;}
.user-list tr:hover {background-color: #f5f5f5;}
.fullname-user { text-transform: capitalize;}

.user-setting-info td {
	font-size: 14px;
	color: rgb(51,51,51); /* warna huruf isisan*/
	padding: 20px 0px 20px 50px;
}

.user-setting-info {
	border-collapse: collapse;
	margin-top: 10px;
	width:100%;
}
.user-setting-info tr {
	border-top: 1px solid rgb(153,153,153);
	border-bottom: 1px solid rgb(153,153,153);
}

.user-setting-info tr:hover {background-color: #f5f5f5;}
.user-name {font-weight: bold; margin-left: 30px;}

.btnUpdate {
	font-size: 14px;
	padding: 7px 12px;
	border: 1px solid #ccc;
  border-radius: 8px;
	margin: 0px 10px 0px 10px;
	background-color: #CC0000;
	color: white;
	width: 150px;
	display: inline;
}
.update-buttons {margin-top: 50px; margin-bottom: 50px;}
.btnUpdate a {text-decoration: none; color: white;}
.btnUpdate:hover {background-color: #FF0000; }


.update-info {
	border-bottom: 1px solid #CCCCCC; /* garis menu didalam*/
	width: 100%;
	padding: 20px 0;
}
.update-td {

	font-size: 14px;
	color: rgb(51,51,51);
	font-weight: bold;
	padding: 10px;
	text-align: right;
}

.update-info input[type=text] {
	padding: 5px;
	border: 1px solid #ccc;
  border-radius: 4px;
	width: 300px;
}

.update-textbox {width: 70%; padding: 10px 10px 10px 30px;}
.update-textbox input[type=password]{
	padding: 5px;
	border: 1px solid #ccc;
  border-radius: 4px;
	width: 300px;
}
.update-info { border-collapse: collapse;}
.curr-pass {
	margin-top: 20px;
	border-bottom: 1px solid rgb(153,153,153);
}
.user-menu {height: 241px;}
.user-menu img { padding: 45px; border: 2px solid #CC0000;}
.user-menu span { font-weight: normal; }

.user-pic-label {
	font-size: 14px;
	color: #FFFFFF;
	background-color: #CC0000;
	padding: 13px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	margin: 0px;
	font-weight: bold;
}

.user-menus {margin-top: 10px;}
.search-document { margin: 10px;}

.docu-code, .docu-setting {display: inline-block;}
.docu-setting {
	float: right;
	margin-top: 20px;
}
.docu-setting h2 {
	background-color: #fd9941; /* WARNA TOMBOL BACK*/
	color: white;
	font-size: 15px;
	padding: 8px 8px;
	display: inline;
	border: 1px solid #ccc;
	border-radius: 8px;
}

.docu-setting a {
	text-decoration: none;
	color: white;
}

.docu-setting h2:hover {
	color: white;
	background-color: rgb(255,153,0);
}

.transact-table {
	width: 98%;
}

.transact-div td {
	text-align: center;
}

a.plus-icon {
	font-size: 25px;
	position: absolute;
	margin-top: 6px;
	margin-left: 250px;
	color: rgb(255,153,0);
	text-decoration: none;
}

.docu-code h2 {
	font-size: 20px;
	margin-left: 5px;
	color: #434343; /* WARNA TULISAN KODE BERKAS*/
}

.docu-code span {
	/* background-color: rgb(255,153,0); /* WARNA KOTAK PROCESING*/
	background-color: #FFFFFF;
	color: white;
	font-size: 15px;
	padding: 4px 8px;
	margin-left: 10px;
}

.docu-detail { width: 550px; height: 100%;}
.view-docu table {margin: 10px; }

.det-br {
	border: 2px solid rgb(255,254,159);
	width: 100%;
	height: 100%;
}

.det-br th { text-align: left;}

.view-docu th {
	text-transform: capitalize;
	color: white;
	background-color: rgb(255,153,0);
	padding: 5px;

	font-size: 13px;
	width: 120px;
}

.view-docu td {
	color: #434343;
	font-size: 13px;
	padding: 5px;
}

.view-docu tr:nth-child(even) {background-color: #f2f2f2;}

.attachment { width: 280px; height: 100%; margin-left: 20px;}

.at-br {
	border: 2px solid rgb(255,254,159);
	width: 100%;
	height: 100%;
}