* {
	box-sizing: border-box;
    font-family: "Raleway", sans-serif;
	letter-spacing:0.05em;
	color:#222;
	font-weight:500;
}
body {
    margin: 0;
    padding: 0;
}
a {
	text-decoration:none;
	color:#666;
}
b,h1,h2,h3,h4,h5,h6 {  font-weight:650; }
hr { 
	border:0px solid #ddd;
	border-top:0; 
}
ul,ol,li { margin:0;padding:0; }
ol { margin-left:5px; }
li { margin-left:0.9em;padding-left:0.3em;line-height:1.4em; }

table { border:0;background:#f5f5f5;padding:2em 0;border-collapse: collapse; }
td { padding:15px;vertical-align:top;border:1px solid #e5e5e5;  }
table box {
	display:block;
	width:100%;
	border:1px solid rgba(255,0,0,0.1);
	padding:1em;
	background:rgba(255,0,0,0.05);
}
table box hr { border-bottom:1px solid rgba(255,0,0,0.1); }
table err { 
	display:block;
	color:#F10101;
	font-size:0.8em;
	line-height:2.5em; 
}
form tr:first-child td { text-align:center;text-transform: uppercase; }
form tr:first-child td, form tr:last-child td { padding-top:30px;padding-bottom:30px; }
form td:first-child { min-width:35%; }
form input[type=text], form input[type=password], form select { 
	padding:0 0.5em;
	width:100%;
	line-height:2.0em;
	border:2px solid #cccccc;
	outline:1px solid #fff;
	border-radius:3px;
	font-size:1em;
	color:#444; 
}
form input[type=text].eye {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 24 24'><path d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 13a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/><circle cx='12' cy='12' r='2.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px 20px;
}
form input[type=password].eye {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-5 0-9.28-3.11-11-7a11 11 0 0 1 2.1-3.41'/><path d='M1 1l22 22'/><path d='M9.53 9.53A3.5 3.5 0 0 0 14.47 14.47'/><path d='M12 5c5 0 9.28 3.11 11 7-1.2 2.83-3.44 5.18-6.24 6.53'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px 20px;
}
form eye { 
	position: absolute;
	top: 50%;
	right:0;
	transform: translateY(-50%);
	width:40px;
	height:35px;
	background-color: transparent;
  	cursor: pointer;
	z-index:1;
}
form select  {
	appearance: none;        /* Untuk menghapus panah default (di Chrome/Edge) */
	-webkit-appearance: none; /* Safari */
	-moz-appearance: none;    /* Firefox */
	background-image: url('data:image/svg+xml;utf8,<svg fill="%23007BFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 9px center;
	background-size: 25px 25px;
	background-color:#fff;
}
form input[type=text]:focus , form input[type=password]:focus , form select:focus{
	border-color:#338CD5;
	box-shadow: 0 0 0 3px rgba(51,140,213, 0.3);
	color:#3474B4;
}
form input[type=submit] { 
	padding:0 2em;
	line-height:2.8em;
	font-weight:650;
	background:#0a9409;
	border:2px solid #0a9409;
	color:#fff;
	border-radius:6px;
	outline:1px solid #fff;
	font-size:1.0em; 
}
form input[type=submit]:hover { 
	background:#20C124;
	border-color:#20C124;
	box-shadow: 0 0 0 3px rgba(32,193,36, 0.3); 
}

b1,b2,b3,b4,b5,b6 { display:block;font-weight:650;width:100%;line-height:1.5em; }
n1,n2,n3,n4,n5,n6 { display:block;font-weight:500;width:100%;line-height:1.5em; }
i1,i2,i3,i4,i5,i6 { display:block;font-weight:500;width:100%;font-style:italic;line-height:1.5em; }
b1, n1, i1 { font-size:1.8em; }
b2, n2, i2 { font-size:1.6em; }
b3, n3, i3 { font-size:1.4em; }
b4, n4, i4 { font-size:1.2em; }
b5, n5, i5 { font-size:1em; }
b6, n6, i6 { font-size:.8em; }

.red { color:#DC0329; }
.blue { color:#0568A3; }
.green { color:#25AC0D; }
.black { color:#222222; }
.white { color:#ffffff; }
.grey { color:#999999; }

/* Latar belakang gelap */
.modal {
  display: none; /* default hidden */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7); /* semi transparan */
}

/* Box modal */
.modal .content {
  background-color: #fff;
  margin: 5% auto;
  padding: 25px 30px;
  border-radius: 4px;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  position: relative;
}

.modal .content a.btn { 
	background: #20c124;
	color: #ffffff;
	padding:2px 8px;
	border-radius: 10px;
	border: 1px solid #158b1b;
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,0.4), /* cahaya atas */
		0 3px 0 #158b1b,                    /* bayangan bawah */
		0 5px 6px rgba(0,0,0,0.3);			/* bayangan luar */
	transition: all 0.15s ease;
	font-size:0.9em;
	line-height:normal; 
	font-weight: 650;
	min-width:100px;
}
.modal .content a.btn:hover {
	background: #3C0;
	transform: translateY(3px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.5),
		0 2px 0 #158b1b,
		0 8px 6px rgba(0,0,0,0.3);
}

/* Tombol close */
.modal .close {
  position: absolute;
  top: 3px;
  right: 12px;
  font-size: 30px;
  cursor: pointer;
}

.modal img { width:100%;text-align:center; }

div.fixed {
	position:fixed;
	top:15px;
	right:15px;
}
div.fixed a {
	display:inline-block;
	width:30px;
	height:30px;	
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	cursor: pointer;
	border: none;
	background-color: #fff;
	border-radius: 20px;
}
.logout {
	background-image: url("data:image/svg+xml,%3csvg%20viewBox%3d%220%200%2024%2024%22%20fill%3d%22none%22%20xmlns%3d%22http%3a//www.w3.org/2000/svg%22%3e%3cg%20transform%3d%22rotate(120%2012%2012)%22%3e%3cpath%20d%3d%22M12%204%20A8%208%200%200%201%2020%2012%20A8%208%200%200%201%2012%2020%20A8%208%200%200%201%206%208%22%20stroke%3d%22black%22%20stroke-width%3d%222%22%20fill%3d%22none%22/%3e%3c/g%3e%3cline%20x1%3d%2210%22%20y1%3d%2212%22%20x2%3d%2223%22%20y2%3d%2212%22%20stroke%3d%22black%22%20stroke-width%3d%222%22/%3e%3cpolyline%20points%3d%2220%2c9%2023%2c12%2020%2c15%22%20stroke%3d%22black%22%20stroke-width%3d%222%22%20fill%3d%22none%22/%3e%3c/svg%3e");
	
}
.editpass {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54A.5.5 0 0 0 13.9 2h-3.8a.5.5 0 0 0-.5.42l-.36 2.54c-.57.23-1.1.53-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.7 8.88a.5.5 0 0 0 .12.64l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94L2.82 15.6a.5.5 0 0 0-.12.64l1.92 3.32c.14.24.44.34.69.22l2.39-.96c.5.41 1.05.73 1.62.94l.36 2.54c.05.28.29.48.58.48h3.8c.29 0 .53-.2.58-.48l.36-2.54c.57-.23 1.1-.53 1.62-.94l2.39.96c.25.1.55.02.69-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z'/></svg>");
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l1.64-1.28a.5.5 0 0 0 .11-.64l-1.55-2.68a.5.5 0 0 0-.61-.22l-1.93.78a6.59 6.59 0 0 0-1.7-.98l-.29-2.04a.5.5 0 0 0-.5-.43h-3.4a.5.5 0 0 0-.5.43l-.29 2.04a6.59 6.59 0 0 0-1.7.98l-1.93-.78a.5.5 0 0 0-.61.22l-1.55 2.68a.5.5 0 0 0 .11.64l1.64 1.28c-.04.32-.07.65-.07.98s.02.66.07.98l-1.64 1.28a.5.5 0 0 0-.11.64l1.55 2.68a.5.5 0 0 0 .61.22l1.93-.78a6.59 6.59 0 0 0 1.7.98l.29 2.04c.04.25.25.43.5.43h3.4c.25 0 .46-.18.5-.43l.29-2.04c.63-.26 1.19-.59 1.7-.98l1.93.78c.23.09.51 0 .61-.22l1.55-2.68a.5.5 0 0 0-.11-.64l-1.64-1.28zM12 16.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/></svg>");
}


.centang {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13L9 17L19 7' stroke='green' stroke-width='2' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.silang {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><line x1='6' y1='6' x2='18' y2='18' stroke='red' stroke-width='2'/><line x1='18' y1='6' x2='6' y2='18' stroke='red' stroke-width='2'/></svg>");
 	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


@media (min-width: 951px) {
	table { width:800px; }
}

@media (min-width: 551px) {
	td:first-child { padding-left:50px; }
	td:last-child { padding-right:50px; }
}

@media (max-width: 950px) {
	table { width:90%; }
}

@media (max-width: 550px) {
	form td { display:block; width:100%;border-color:#eeeeee; }
}