[stempel=support-manajemen-cms] {
	background-image:url(support-manajemen-cms.png);
	background-repeat:no-repeat;
	background-position:right, top;
	background-attachment:scroll;
	background-size: 75px;
}

/* Bootstrap Start */
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
/* Bootstrap End */

body    { font-family: Arial, Helvetica, sans-serif; margin:0px;
background: #fcfcfc url(body_bg.jpg) top repeat-x; }

body>aside{
	visibility:hidden;
}

.panel-top {
	height: 125px; width:100%; background: rgba(0,0,0,0.5);
	z-index:200; position:fixed; top:0; display:none;
}

.panel-right {
    color: #FFF;
	visibility:hidden;
    background: rgba(0,0,0,0.5);
    z-index: 201;    position: fixed;    right: 0;    width: 250px;    height: 100%;
    overflow-y: auto; transform: translateX(250px);
    -webkit-transition: all 0.4s ease 0s;    -moz-transition: all 0.4s ease 0s;    -ms-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;
}
.panel-right.active {
	visibility:visible;
    right: 250px; width: 260px;
    -webkit-transition: all 0.4s ease 0s;     -moz-transition: all 0.4s ease 0s;    -ms-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;
}

ul li.seprator{ border-bottom: 1px solid  #DDDDDD; }

.transform-to-circle { border-radius: 50%; height: 128px; width: 128px; display: inline-block; background-color: #FFFFFF; position:absolute;  left:0;  z-index:-1; }
[css-before-content]::before { content: attr(css-before-content); }
[css-after-content]::before  { content: attr(css-after-content);  }

header h4 { color:#8dab3b; font-size:14px; font-family: Arial, Helvetica, sans-serif; }
article { text-shadow: 0 0.5px 0 #F3F3F3; font-size:13.5px;
padding: 1em; margin-top: 0px; border-top: 0; float: none; clear: both;
border: #060 solid 1px;
-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
-moz-box-shadow: 1px 1px 2px #fff inset;  -webkit-box-shadow: 1px 1px 2px #fff inset;  box-shadow: 1px 1px 2px #fff inset;
}
a, [href-popup], href-dialog { cursor:pointer; }
blockquote { font-family:GABRIOLA; }
pre{ font-size:11px; } 
fieldset{
-webkit-box-shadow: #26FF2D;
        box-shadow: #26FF2D;
}

i {
  font-family:VIJAYA;
}

main article content table td {
	padding-bottom:10px;
}


        label { display: block; float:left; padding-top:5px; }
article label { display: block; float:left; padding-top:5px; padding-bottom:6px;  font-weight:bold; color:#000; }
article label[for] { text-transform: capitalize; }
article label[for]+sub { left:0; bottom:0; position:absolute;
font-size:10.5px;
}
aside form label{
	padding-bottom:7px;
}

nav form table {
	margin-left:0.1px;
}
nav form table caption[align=bottom] {
border-radius: 0px 0px 3px 3px;  
background: #ECE9D8;
padding: 7px 10px 10px 0;  
}

input[type="text"] + datalist {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 999;
}

input[type=color], input[type=datetime-local], input[type=directory], input[type=email], input[type=search], input[type=text], input[type=url], input[type=tel], input[type=number], input[type=password], input[type=date], input[type=datetime], input[type=time], input[list], 
select  {
	width:100%;
    padding: 6px 0px 6px 0px; text-indent:6px; margin:0px;
    text-shadow: 0px 1px 0px #fff;
    border: 1px solid #717171;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 1px 1px 0px #efefef;
       -moz-box-shadow: 1px 1px 0px #efefef;
            box-shadow: 1px 1px 0px #efefef;
}

select  {
    padding: 5px 0px 5px 0px; text-indent:2px; margin:0px;
}
select[readonly] {
	pointer-events: none; 
}

input[type=text]:focus {
    -webkit-box-shadow: 0px 0px 5px #007eff;
       -moz-box-shadow: 0px 0px 5px #007eff;
            box-shadow: 0px 0px 5px #007eff;
}

input[type=color] {
   padding: 0px 0px 0px 0px; text-indent:0px; margin:0px;
 }

input[type=submit], input[type=button], .navigasi  {
	cursor:pointer;
	text-decoration:none;	font-weight:bold;
	color:#666;
	overflow:visible;
	margin:0px; padding:7px 15px 7px 15px;
	border-color:#090; border-style:solid; border-width:1px;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
}
input[type=submit]:hover {
	color:#333333;
	border-color:#090; border-style:solid; border-width:1px;
}

input[name=kembali] {
	color:#666;
	border-color:#F00; border-style:solid; border-width:1px;
}
input[name=kembali]:hover {
	color:#333;
	border-color:#F00; border-style:solid; border-width:1px;
}

textarea {
	margin:0px;
    padding: 6px 0px 6px 0px; text-indent:0px;
	width:100%;
	border-color:#ccc; border-style:solid; border-width:1px;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
}
textarea[expandify=true] {
  min-height:50px;
}

[data-type="number"] {
	text-align:right;
}

[role=error] {
    display: block;
    margin: auto; margin-top:80px; margin-bottom:100px;
	padding:20px 75px 50px 75px;
    width: 45%;
	letter-spacing:2px;
}

td[role=aside] { vertical-align:top; width:250px; }

aside nav { text-shadow: 0 0.5px 0 #F3F3F3;
padding: 1em; margin-top: 0px; border-top: 0; float: none; clear: both;
border: #060 solid 1px;
-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
-moz-box-shadow: 1px 1px 2px #fff inset;  -webkit-box-shadow: 1px 1px 2px #fff inset;  box-shadow: 1px 1px 2px #fff inset;
}

aside          { padding-left:5px; text-shadow: 0 0.5px 0 #F3F3F3; font-size:14px; width:250px;}
aside section ol {
	padding-left:20px;
}
aside section, aside>nav, td[role=aside] section { color: #000000;
                 float: none; clear: both; padding: 1em; margin-top:6px;

border: #060 solid 1px;
-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
-moz-box-shadow: 1px 1px 2px #fff inset; -webkit-box-shadow: 1px 1px 2px #fff inset; box-shadow: 1px 1px 2px #fff inset;
}
aside section:nth-child(1), aside>nav:nth-child(1) {
	margin-top:0px;
}

aside section img {
	max-width:100%;
}

aside section ul, ol[data-transition="fade"] {
	list-style-type:none;
	padding:0px;
}

aside section left, aside nav left  {
    position:relative;
    padding:2px 25px;
	margin:-22px;
    line-height:40px;
    background:#87A800;
    /* css3 extras */
    text-shadow:0 1px 1px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.2);
}

aside section left:before, aside nav left:before /* , aside left:after */ {
    content:"";
    position:absolute;
    z-index:1;
    top:100%;
    left:0;
    border-width:0 7px 7px 0;
    border-style:solid;
    border-color:transparent #647D01;
}

aside section left:after, aside nav left:after {
    left:auto;
    right:0;
    border-width:0 0 7px 7px;
}

aside section center {
    position:relative;	left:-22px;
	width:118%;
	margin-top:10px; margin-bottom:10px;
	padding: 2px; 
    /* css3 extras */
    text-shadow:0 1px 1px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.2);
    background:#87A800;
    /* See "NOTE 1" */
}

aside section center:before, aside  section center:after {
    content:"";
    position:absolute;
    /* See "NOTE 2" */
    z-index:1;
    top:100%;
    left:0;
    border-width:0 7px 7px 0;
    border-style:solid;
    border-color:transparent #647D01;
}

aside section center:after {
    left:auto;
    right:0;
    border-width:0 0 7px 7px;
}

aside section center a, aside section left a, aside nav left a {
	text-decoration:none;
	color:#FFFFFF;
}

section[role="preview"] {
    display: inline-block;
    margin: auto 3px;
}

section[role="preview"] img{
    max-width: 100%;
    height: auto;
}

ol[data-transition="fade"] li {
	padding: 7px 0px 0px 7px;
}

aside>section>ul>li {
	margin-left:-7px; margin-right:-7px;
	padding: 5px 0px 5px 7px;
    border-radius:5px;
	vertical-align:top;
	font-size:13px;
}

aside>section>ul>li:hover {
	padding: 4px 0px 4px 6px;
    border:1px solid #91b41a; border-radius:5px;
	background-color: #91b41a;
}

aside>section>ul>li.active {
	padding: 4px 0px 4px 6px;
    border:1px solid #91b41a; border-radius:5px;
	background-color: #91b41a;
}
aside>section>ul>li.active a {
    color:#FFFFFF;
}

aside>section>ul>li img {
	margin-right:5px;
	vertical-align:middle;
}

aside>section>ul>li p {
	font-size:9px;
}

aside>section>ul>li a {
	text-decoration:none; /* text-transform: capitalize; */
	color:#666666;
    width:100%;
}
aside>section>ul>li a:hover {
    color:#FFFFFF;
}
aside>section>ul>li[file-exist="true"]>a { color:#03F; }
aside>section>ul>li[exist="false"]>a { font-style: italic; }
aside>section>ul>li[exist=""]>a { }
aside>section>ul>li[exist="true"]>a { color: #8B0000; }

aside section ul[role=description] li:nth-child(odd) {
    background: #CCC;
}

aside nav ul{
	padding:0px;

}
aside nav ul>li {
	list-style-type:none;
	margin-right:-7px;
    border-radius:5px;
	vertical-align:top;
	font-size:13px;
	padding:1px 1px;
}
aside nav ul>li>details>sumary {
	display:inline-block; width:100%;
	padding: 0px 0px 3px 5px;
	text-decoration:none;
	color:#666666;
    width:100%;
	font-weight:bold;
}

aside nav ul>li>details>ul {
	padding-top: 5px;
}
aside nav ul>li>details>ul>li {
	display:inline-block; width:100%;
	padding: 0px;
	text-decoration:none;
	color:#666666;
    width:100%;
}

aside nav ul>li>details>ul>li>a {
	display:inline-block; width:100%;
	padding: 0px 0px 4px 14px;
	text-decoration:none;
	color:#666666;
    width:100%;
	font-weight:normal;
}

aside nav ul>li>details>ul>li>a:hover {
	color:#FFF;
}
aside nav ul>li>details>ul>li.hovered {
	background:#693;
}


aside > nav > a {
    backface-visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  background: #952;
  border-radius: 6px;
  border: 0px solid #444;
  border-width: 0px 0px 0px 0px;
  padding: 10px 20px 10px 20px;
    color: #fff;
  font-size: 16px;
  font-family: Helvetica Neue;
  font-weight: 900;
  font-style: normal
  }
aside > nav > a > div {
    color: #999;
  font-size: 10px;
  font-family: Helvetica Neue;
  font-weight: initial;
  font-style: normal;
  text-align: center;
  margin: 0px 0px 0px 0px
  }
aside > nav > a > i {
    font-size: 1em;
  border-radius: 6px;
  border: 1px dashed #fff;
  border-width: 1px 1px 1px 1px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px
  }

footer {
  text-shadow: 0 1px 0 #fff;

padding: 1em;
padding-bottom:0px;
margin-top: 5px; border-top: 0;
float: none; clear: both;

border: #060 solid 1px;
-webkit-border-radius: 7px;
   -moz-border-radius: 7px;
        border-radius: 7px;

-webkit-box-shadow: 1px 1px 2px #fff inset;
   -moz-box-shadow: 1px 1px 2px #fff inset;
        box-shadow: 1px 1px 2px #fff inset;
}

footer ul {
	padding:0px;
	list-style:none;
}
footer ul li{
	padding: 0px 0px 2px 0px;
	list-style:none;
	color:#CCC;
}
footer ul li:hover{
	background-color:#F9F9F9;
}

[role=deskripsi] { position: relative; overflow: hidden; cursor: pointer; padding: 1em; color: #f5f5f5; background-color: #97C02F; font-size: 12px; z-index: 0;

	background-image: 
	  radial-gradient(circle at 2px 2px, rgba(255,255,255,0.09) 2px, transparent 0),
	  radial-gradient(circle at 7px 7px, rgba(255,200,200,0.09) 2px, transparent 0);
	background-size: 10px 10px;
}
[role=deskripsi]:hover {
background: #616247
}
[role=deskripsi]:before {
content: "";
position: absolute;
top: 0; right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
/* Firefox 3.0 damage limitation */
display: block; width: 0;
}

article>section>h1 {
 position: relative;margin: 1em auto 1em; padding: 1em 2em;  width:80%;
 background: #ba89b6; color: #fff; text-align: center;
}
article>section>h1::before,
article>section>h1::after {
  content: ''; position: absolute; z-index: -1;
  left: -70px;
  top: 24px;
  width: 40px;
  height: 0px;
  border: 30px solid #9b2;
  border-right: 20px solid #791;
  border-bottom-color: #94b81e;
  border-left-color: transparent;
  transform: rotate(-5deg);
}
article>section>h1::after {
  left: auto;
  right: -70px;
  border-left: 20px solid #791;
  border-right: 30px solid transparent;
  transform: rotate(5deg);
}
ul[role=tablist] a[no-href] img {
	margin-top:3px;
	margin-left:3px;
}
[role=tabs] h1 {
 position: relative; margin: 1em -23px 1em; padding: 1em 2em; 
 background: #ba89b6; color: #fff; text-align: center;
}
[role=tabs] h1:before, 
[role=tabs] h1:after {
 content: ""; position: absolute; border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
[role=tabs] h1:before { left: 0; border-width: 1em 0 0 1em; }
[role=tabs] h1:after { right: 0; border-width: 1em 1em 0 0;
}
[role=mail] {
background: (135deg,#4fa8ed,#4fa8ed 10px,#fff 10px,#fff 20px,#f84d3b 20px,#f84d3b 30px,#fff 30px,#fff 40px);
}

article h2:before {  /* h2:before untuk efek bayangan disamping h2;  */
	content: ''; position: absolute; z-index: -1; height: 0;
    top: 14px; left: -4.81%; width:109.7%;      /* top = font-size -2 */
	border: 28px solid rgba(0, 0, 0, 0);
}
article h2 {
	position: relative;	text-shadow: 0 0 1px #758890; text-align:center;
	margin-bottom:18px;
	margin-left: 4%; margin-right: 4%;  /* margin-top-botom=bebas; margin left-right mempengaruhi :before */
	font-size: 16px; padding: 17px 0px;
	box-shadow: 
		0 0 30px 0 rgba(0, 0, 0, 0.1), 
		0 36px 0 -18px #F3F3F3;
}
article h2:after { /* h2:after untuk efek kaki dibawah h2 */
	content: ''; width: 100%; height: 0; position: absolute; top: 100%; left: 0; z-index: -1;
	border-top: 18px solid #99acb2;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
}

article h2, article h2:before {
	/*Some cool multi-background - we will use a combination of 4 backgrounds to create a cool effect*/
	background-image: 
		/*2 grey borders*/
		linear-gradient(
			transparent 8%, 
			rgba(0, 0, 0, 0.1) 8%, 
			rgba(0, 0, 0, 0.1) 14%, 
			transparent 14%, 
			transparent 86%, 
			rgba(0, 0, 0, 0.1) 86%, 
			rgba(0, 0, 0, 0.1) 92%, 
			transparent 92%
		), 
		/*white gloss gradient*/
		linear-gradient(
			rgba(255, 255, 255, 0.75), 
			rgba(255, 255, 255, 0) 
		), 
		/*thin stripes*/
		linear-gradient(
			45deg, 
			transparent 40%, 
			rgba(0, 0, 0, 0.1) 40%, 
			rgba(0, 0, 0, 0.1) 60%, 
			transparent 60%
		), 
		/*white base*/
		linear-gradient(white, white); 
	background-size: 
		cover, /*borders*/
		cover, /*white gloss*/
		4px 4px, /*thin stripes*/
		cover; /*base white*/
}

article h2, article h2:before, article h2:after {
	box-sizing: border-box;	/*Fix to make the borders appear on the ribbon ends also*/
	background-origin: border-box;
}

article h3, aside h3, article details summary {
  font-family: "Playfair Display", MINGLIU, simsun, GABRIOLA;
  font-size:1.2em; color:#005432;;
  text-decoration:none;  text-transform:uppercase;
  padding-top:5px;  padding-bottom:15px;
  margin-bottom:10px;
  border-bottom-style:double;  border-bottom-color:#999999;
}

article h3 a, aside h3 a {
  color:#778e18; text-decoration:none; 
}

article h3 select {
	width:auto; 
	text-transform: uppercase;
	text-indent: 0px;
	padding:0px; margin:0px; 
	border:none; background:none; box-shadow:none 
}

h3>input[type=submit] {
	-moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
	-webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
	box-shadow:inset 0px 1px 0px 0px #9acc85;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
	background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b', GradientType=0);
	background-color:#74ad5a;
	border:1px solid #3b6e22;
	display:inline-block;
	cursor:pointer;
    color:#ffffff;
	font-family:Arial;
    font-size: 11px;
    font-weight:bold;
    padding:6px 12px;
    text-decoration:none;
	float:right;
}
h3>input[type=submit]:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a54b), color-stop(1, #74ad5a));
	background:-moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:-ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
	background:linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a', GradientType=0);
	background-color:#68a54b;
}
h3>input[type=submit]:active {
	position:relative;
	top:1px;
}

article h4, aside h4 {
  font-family: simsun, MINGLIU, gulim, gisha, tunga;
  font-size:18px; color:#8dab3b;
  margin:0px; padding-bottom:8px; padding-top:12px;
  text-decoration:none;  text-transform:uppercase;
}
h4:has(+ sub) {
  padding-bottom: 15px;
}

article nav>a {
	padding:3px;
	background-color:#09C; color:#FFF; border-radius: 5px;
	color:#FFF; text-decoration:none; 
	//box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

caption[align=bottom]>button[type=submit],
form td input[type=submit][value=""],
form td input[type=submit][value="go"],
form td input[type=submit][value="save"],
form td input[type=submit][value="simpan"],
form td input[type=submit][value="submit"] {
	box-shadow:inset 0px 1px 0px 0px #d9fbbe;
	background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
	background-color:#b8e356;
	border-radius:6px;
	border:1px solid #83c41a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #86ae47;
}
form td input[type=submit][value=""],
form td input[type=submit][value="go"],
form td input[type=submit][value="save"],
form td input[type=submit][value="simpan"],
form td input[type=submit][value="submit"] {
	padding:6px 5px;
}
caption[align=bottom]>button[type=submit]:hover {
	background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%);
	background-color:#a5cc52;
}
caption[align=bottom]>button[type=submit]:active {
	position:relative;
	top:1px;
}

caption[align=bottom]>nav a {
	-moz-box-shadow:inset 0px 0px 14px -3px #f2fadc;
	-webkit-box-shadow:inset 0px 0px 14px -3px #f2fadc;
	box-shadow:inset 0px 0px 14px -3px #f2fadc;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbe6c4), color-stop(1, #9ba892));
	background:-moz-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
	background:-webkit-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
	background:-o-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
	background:-ms-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
	background:linear-gradient(to bottom, #dbe6c4 5%, #9ba892 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbe6c4', endColorstr='#9ba892',GradientType=0);
	background-color:#dbe6c4;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #b2b8ad;
	display:inline-block;
	cursor:pointer;
	color:#757d6f;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ced9bf;
}

aside form caption[align=bottom], [role="aside"] caption[align=bottom] {
	padding-top:11px;
}

main>table, form>table, form>table table, [role="tabpanel"] table:first-child,
footer>table {
	font-family:Tahoma, Geneva, sans-serif;
	width:100%;
}

th[align=left] {
text-align:left;	
}

thead tr td {
text-align:center;
}

tbody tr td {
	vertical-align:top;
}

table[border=1] {
    border-radius: 8px;
	border-collapse: collapse;
}
table[frame=above]{
    border: 1px solid #CCC;
    border-top: 7px solid #97C02F;
	padding: 3px;
	border-radius: 6px;
}
table[frame=below]{
    border: 1px solid #CCC;
    border-bottom: 7px solid #97C02F;
	padding: 3px;
	border-radius: 6px;
}
table[frame=lhs]{
    border: 1px solid #CCC;
    border-left: 7px solid #97C02F;
	padding: 3px;
	border-radius: 6px;
}
table[frame=rhs]{
    border: 1px solid #CCC;
    border-right: 7px solid #97C02F;
	padding: 3px;
	border-radius: 6px;
}
table[frame=hsides]{
    border: 1px solid #CCC;
    border-top: 7px solid #97C02F;
    border-bottom: 7px solid #97C02F;
	padding: 3px;
	border-radius: 6px;
}
table[frame=vsides]{
    border: 1px solid #CCC;
    border-left: 7px solid #97C02F;
    border-right: 7px solid #97C02F;
	padding: 3px;
	border-radius: 6px;
}

table[frame=hsides] thead tr th {
	padding: 5px;
    vertical-align:middle; text-align:center;
	background-color:#4B889B; /* #ECE9D8; /* #648C56; */
	font-family: SYLFAEN, Arial, Helvetica, sans-serif;
}

table[frame=border] {
	    border:3px solid #90BDA8;
}
table[frame=border] tr th {
    padding: 3px; vertical-align: middle; text-align: center;
    background-color: #91b41a; color: #FFFFFF;
    font-family: Consolas;
}

table[frame=box] {
	padding:0px; border:2px solid #90BDA8;
	background-color:#FFFFFF;
	font-family: Consolas;

   -webkit-border-radius: 3px 3px 0px 0px; -moz-border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;
   -moz-box-shadow: 1px 1px 2px #fff inset;  -webkit-box-shadow: 1px 1px 2px #fff inset;  box-shadow: 1px 1px 2px #fff inset;
}
table[frame=box] thead tr th {
	padding: 5px; vertical-align:middle; text-align:center; color:#FFFFFF;
	background-color:#648C56; /* #4B889B; /* #648C56; /* #97C02F /* #DA8954; /* #ECE9D8; */
	background-image: linear-gradient(#648C56 80%, #e9e9e9);
	font-family: Consolas, Helvetica, Arial, sans-serif, SYLFAEN;
}
table[frame=box] thead tr td {
	background-color:#ECE9D8; text-align:center; padding: 3px; font-weight:bold; }

table[frame=box]>tbody {
	background-color:#FFFFFF;
}

table[frame=box]>tbody th {
 	padding: 0px; border:3px solid #90BDA8; vertical-align:middle;
	background-color:#91b41a; color:#FFF;
	font-family: Consolas, Helvetica, Arial, sans-serif, SYLFAEN;
}
table[frame=box]:has(> thead) tbody th {
	border: none; padding-left:5px; padding-right:5px;   
  	background-color: #648C56;
	border-radius: 2px;
}

table[frame=box] tbody td {
	text-shadow:#666;
	vertical-align:middle;
	font-family: Consolas, Helvetica, Arial, sans-serif, SYLFAEN;
}
table[frame=box] tbody td[valign=top] {
	text-shadow:#666;
	vertical-align:top;
}

table[frame=box] tbody input:not([type=checkbox]) { /* text-transform: uppercase; */
	width:100%;
}

aside table[frame=box] {
	font-size:11px;
}

tr td h4, tr td h4 a {
	color:#606062;
	text-decoration:none;
	margin-top:0px;
}

th {
	text-transform: uppercase;
}

table[frame=vsides] {
background: #eee;
border-left: #aaa solid 1px;
border-right: #aaa solid 1px;

   -moz-box-shadow: 1px 1px 2px #fff inset;
-webkit-box-shadow: 1px 1px 2px #fff inset;
box-shadow: 1px 1px 2px #fff inset;
}

table+caption[align=top]{
	padding:500px;
}
table[rules=all][frame="void"] {
	padding-top:0px;
}
table[rules=all]>tbody>tr>td {
	padding-left:10px;
	padding-right:10px;
}
table[rules=all]>tbody>tr>td:first-child {
	padding-left:0px;
	padding-right:10px;
}
table[rules=all]>tbody>tr>td:last-child {
	padding-left:10px;
	padding-right:0px;
}
table[rules=all]>tbody>tr>td:hover {
    background: #FEFEFE;
    border:1px solid #91b41a; border-radius:-5px;
    text-shadow: 0 1px 0 #CCC;
}
table[rules="all"] tbody tr td p{
	margin-top:0px;
}

table[cols="3"] tr td, table[cols="4"] tr td, table[cols="5"] tr td  {
	padding-left:10px;
	padding-right:10px;
}
table[cols="2"] tr td {
	padding-top:15px;
	padding-bottom:15px;
}
table[cols="2"] tr:nth-child(1) td {
	padding-top:0px;
}
table[cols="2"] tr td:nth-child(1), table[cols="3"] tr td:nth-child(1), table[cols="4"] tr td:nth-child(1) {
	padding-left:0px;
	padding-right:10px;
}
table[cols="2"] tr td:nth-child(2), table[cols="3"] tr td:nth-child(3), table[cols="4"] tr td:nth-child(4) {
	padding-left:10px;
	padding-right:0px;
}

article caption[align=bottom] { float: none; clear: both;

font-weight: normal;
background: #94a2652b;
background-color:#e9e9e9;

margin-top: 0;
margin-bottom: 0.5em;
border-top: 0;

border: #aaa solid 1px;
-webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
        border-radius: 0 0 4px 5px;

padding: 1em;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 1px 1px 2px #fff inset;
   -moz-box-shadow: 1px 1px 2px #fff inset;
        box-shadow: 1px 1px 2px #fff inset;
}
caption[align=bottom]>input[type=submit]{
  background: #97C02F;
  background-image: -webkit-linear-gradient(top, #97C02F, #8dab3b);
  background-image:    -moz-linear-gradient(top, #97C02F, #8dab3b);
  background-image:     -ms-linear-gradient(top, #97C02F, #8dab3b);
  background-image: -o-linear-gradient(top, #97C02F, #8dab3b);
  background-image:    linear-gradient(to bottom, #97C02F, #8dab3b);
  -webkit-border-radius: 20%;
     -moz-border-radius: 20%;
          border-radius: 20%px;
  color: #ffffff;
  border: solid #d3dce3 3px;
  text-decoration: none;
}

caption[align=bottom]>input[type=submit]:hover {
  background: #72fa3c;
  background-image: -webkit-linear-gradient(top, #72fa3c, #09730d);
  background-image: -moz-linear-gradient(top, #72fa3c, #09730d);
  background-image: -ms-linear-gradient(top, #72fa3c, #09730d);
  background-image: -o-linear-gradient(top, #72fa3c, #09730d);
  background-image: linear-gradient(to bottom, #328942, #aecc4a);
  text-decoration: none;
}
caption[align=bottom]>nav>input[type=submit] {
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
	background-color:#768d87;
	border-radius:5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 25px;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
	}
caption[align=bottom]>nav>input[type=submit]:hover {
	background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
	background-color:#6c7c7c;
}
caption[align=bottom]>nav>input[type=submit]:active {
	position:relative;
	top:1px;
}
caption[align=bottom]>input[name=kembali] {
  background: #97C02F;
  background-image: -webkit-linear-gradient(top, #97C02F, #8dab3b);
  background-image:   linear-gradient(to bottom, #97C02F, #8dab3b);
  background-image: -moz-linear-gradient(top, #97C02F, #8dab3b);
  background-image: -ms-linear-gradient(top, #97C02F, #8dab3b);
  background-image: -o-linear-gradient(top, #97C02F, #8dab3b);
  -webkit-border-radius: 40%;
  -moz-border-radius: 40%;
  border-radius: 40%px;
  color: #ffffff;
  border: solid #d3dce3 5px;
  text-decoration: none;
}

caption[align=bottom]>input[name=kembali]:hover {
  background: #72fa3c;
  background-image: -webkit-linear-gradient(top, #72fa3c, #09730d);
  background-image: -moz-linear-gradient(top, #72fa3c, #09730d);
  background-image: -ms-linear-gradient(top, #72fa3c, #09730d);
  background-image: -o-linear-gradient(top, #72fa3c, #09730d);
  background-image: linear-gradient(to bottom, #328942, #aecc4a);
  text-decoration: none;
}
caption[align=bottom]>input[name=keluar] {
  background: #97C02F;
  background-image: -webkit-linear-gradient(top, #97C02F, #8dab3b);
  background-image: -moz-linear-gradient(top, #97C02F, #8dab3b);
  background-image: -ms-linear-gradient(top, #97C02F, #8dab3b);
  background-image: -o-linear-gradient(top, #97C02F, #8dab3b);
  background-image: linear-gradient(to bottom, #97C02F, #8dab3b);
  -webkit-border-radius: 40%;
  -moz-border-radius: 40%;
  border-radius: 40%px;
  color: #ffffff;
  border: solid #d3dce3 5px;
  text-decoration: none;
}

caption[align=bottom]>input[name=keluar]:hover {
  background: #72fa3c;
  background-image: -webkit-linear-gradient(top, #72fa3c, #09730d);
  background-image: -moz-linear-gradient(top, #72fa3c, #09730d);
  background-image: -ms-linear-gradient(top, #72fa3c, #09730d);
  background-image: -o-linear-gradient(top, #72fa3c, #09730d);
  background-image: linear-gradient(to bottom, #328942, #aecc4a);
  text-decoration: none;
}

.button{
    display: inline-block;
    text-decoration: none;
    font: bold 12px/12px HelveticaNeue, Arial;
    padding: 8px 11px;
    color: #555;
    border: 1px solid #dedede;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.button.green{
    background: #b7d770;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr="#cae285", endColorstr="#9fcb57"); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#cae285), to(#9fcb57)); /*  WebKit */
    background: -moz-linear-gradient(top,  #cae285, #9fcb57);
    border-color: #adc671 #98b65b #87aa4a;
    color: #5d7731;
    text-shadow: 0 1px 0 #cfe5a4;
}
.button.green:hover{
    background: #b9d972;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr="#b8d872", endColorstr="#b9d972"); /*  IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#b8d872), to(#b9d972)); /*  WebKit */
    background: -moz-linear-gradient(top,  #b8d872, #b9d972);
    border-color: #8bb14d #83a648 #7d9e45;
    text-shadow: 0 1px 0 #d5e8aa;
}
aside button {
margin-top:15px; margin-bottom:7px; padding: 5px 15px 5px 15px; 
color:#FFF; background: linear-gradient(0deg, #797B3A, rgba(50, 56, 34, 0.76)); border: solid #99C624 1px; cursor: pointer;
        border-radius: 20px;
   -moz-border-radius: 20px;
-webkit-border-radius: 20px;
        box-shadow: 1px 1px 2px 0px #000000;
   -moz-box-shadow: 1px 1px 2px 0px #000000;
-webkit-box-shadow: 1px 1px 2px 0px #000000;
}

[rules="rows"] tr:nth-child(even) {
background-color: #f1f1f1;
}
[rules="rows"] tr:hover {
	background-color:#d4ffaa;
}


form summary, caption[align=top] {
background: #D3DCE3; color: #000000; font-weight: normal;
margin-top: 0;
float: none;
clear: both;

border: #aaa solid 1px;
-webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
        border-radius: 4px 5px 0 0;

padding: 1.5em;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 1px 1px 2px #fff inset;
   -moz-box-shadow: 1px 1px 2px #fff inset;
      box-shadow: 1px 1px 2px #fff inset;
}

form[name=smart-search]{
	margin-top:-15px;  padding-bottom:10px;

	        border-radius: 0 0px 10px 0px;
	   -moz-border-radius: 0 0px 10px 0px;
	-webkit-border-radius: 0 0px 10px 0px;
  
         box-shadow:inset 0px 0px 1px 0px #edf9ff;
    -moz-box-shadow:inset 0px 0px 1px 0px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px 0px #edf9ff;

}

img[align=left] {
	margin:0px 10px 10px 0px;
}

img[data-inset=true] {
	padding:5px;
    background: linear-gradient(#CCC -200%, #FFF);
    border:1px solid #CCC; border-radius:5px;
}

header img[align=left][data-inset=true]{
	padding:5px;
    background: linear-gradient(#CCC -200%, #FFF);
    border:1px solid #CCC; border-radius:5px;
	width:60px;
}
article img[data-inset=true][align=left]:hover{
	width:128px;
	border:1px solid #060; border-radius:5px;
}
article img[data-inset=true][align=left]{
	width:128px;
}
form[name=smart-search] td {
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
}
form[name=smart-search] td:nth-child(odd) {
	padding-left:10px;
}

form img[data-inset=true][align=left]{
	padding:5px;
    background: linear-gradient(#CCC -200%, #FFF);
    border:1px solid #CCC; border-radius:5px;
	width:20px;
}

article input[type=text], article input[type=url] {
   min-width:30%;
}

tfoot input[type=text], aside input[type=text] {
	width:100%;
}

form[method=post] table tbody tr td {
	padding-bottom: 5px;
}

form[method=post] table tfoot tr td {
text-align:center;
}

nav[data-limit=static] a {
 border:1px solid #d7dada; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;
 font-size:10px; font-family:arial, helvetica, sans-serif; text-align:center;
 padding: 0px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #f4f5f5; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
 background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
 background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
 background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
 background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
 background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f5f5, endColorstr=#dfdddd);
}
nav[data-limit=static] a:hover {
 border:1px solid #718c14;
 background-color: #95b91a; background-image: -webkit-gradient(linear, left top, left bottom, from(#95b91a), to(#8bb41d));
 background-image: -webkit-linear-gradient(top, #95b91a, #8bb41d);
 background-image: -moz-linear-gradient(top, #95b91a, #8bb41d);
 background-image: -ms-linear-gradient(top, #95b91a, #8bb41d);
 background-image: -o-linear-gradient(top, #95b91a, #8bb41d);
 background-image: linear-gradient(to bottom, #95b91a, #8bb41d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#95b91a, endColorstr=#8bb41d);
 }

nav table {
 margin-left:-2px;
 margin-right:-2px;
}

nav input[type=text], nav input[type=password] {
width:180px;
}

nav table tfoot tr td {
text-align:center;
}

table[frame]>tbody>tr>td>nav {
	position:absolute;
	bottom:0; right:0;
	padding-right:10px;
	width:100%;
	padding-bottom:10px;
}
table[frame]>tbody>tr>td>nav>a {
	position:relative; float:right; margin-left:5px;

	-moz-box-shadow:inset 0px 1px 0px 0px #9acc85;
	-webkit-box-shadow:inset 0px 1px 0px 0px #9acc85;
	box-shadow:inset 0px 1px 0px 0px #9acc85;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #74ad5a), color-stop(1, #68a54b));
	background:-moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:-ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
	background:linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
	background-color:#74ad5a;
	border:1px solid #3b6e22;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	padding:3px 10px;
	text-decoration:none;

}

.required{
 color:#990000;
}

ul[rule=code] li {
	padding:0px;
	margin:0px;
}

.error, .success, .information {
font-size:15px; 

margin:0px 0px 10px 0px;
padding:15px; font-weight: normal;  

-webkit-border-radius: 4px 4px 4px 4px;
   -moz-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 5px 4px 4px;

-webkit-box-shadow: 1px 1px 2px #fff inset;
   -moz-box-shadow: 1px 1px 2px #fff inset;
        box-shadow: 1px 1px 2px #fff inset;

border-radius:5px;
}

.information {
text-shadow: 0 1px 0 #fff;
background: #9FF;  
border: #aaa solid 1px;
}

.error {
font-family: Verdana, CORBEL, Arial, sans-serif;
color:#FFF; background: #f44336!important; border:1px solid #91b41a; 
}

.success {
text-shadow: 0 1px 0 #fff;
background: #9CF; color: #036; 
border: #aaa solid 1px;
}

ul.drop-container {
  list-style-type: none;
}
ul.drop-container>li {
	position:relative;
}
ul.drop-container>li>ul {
    display:none;
}
ul.drop-container>li.active [dropright] {
    display:block; position:absolute; top:0; left:0; transform: translate3d(112px, 0px, 0px);
}
ul.drop-container>li.active [dropleft] {
    display:block; position:absolute; top:0; left:0; transform: translate3d(-112px, 0px, 0px);
}

.shared_important_center{
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, 0) !important;
}
.shared_important_right{
	right:0;
}

ul.drop-container>li.active [drop-control] {
  background-color: #2980B9;
}
ul.drop-container>li        [dropup] {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;  
}
ul.drop-container>li.active [dropup] {
  background-color: #ccc;
  display: block;
}
ul.drop-container>li.active [dropup] a {
  color: black;
  padding: 10px 16px;
  display: block;  text-decoration: none;
}

  [right=0] { right:0; }
ul[right=0], ul[float=right] { float:right; }

ul[column] { list-style: none; }
ul[column] li { list-style: none; padding-bottom:10px; }
ul[column="2"] { width:100%; overflow:hidden; padding:0px; }
ul[column="2"] li { float:left; display:inline; width:50%;}
ul[column="3"] { width:100%; overflow:hidden; list-style: none; padding:0px; }
ul[column="3"] li { float:left; display:inline; width:33%; }
ul[column="4"] { width:100%; overflow:hidden; list-style: none; padding:0px; }
ul[column="4"] li { display:inline;  float:left;  width:25%; }
ul[column="5"] { width:100%; overflow:hidden; list-style: none; padding:0px; }
ul[column="5"] li { display:inline; float:left; width:20%;  white-space:inherit; margin:0px; }
ul[column="5"] li img { width:200px; max-width:100%; }
ul[column="6"] { width:100%; overflow:hidden; list-style: none; padding:0px; }
ul[column="6"] li { display:inline; float:left; width:16.6%;  white-space:inherit; margin:0px; }
ul[column="6"] li img { width:200px; max-width:100%; }
ul[column="7"] { width:100%; overflow:hidden; list-style: none; padding:0px; }
ul[column="7"] li { display:inline; float:left; width:14.28%;  white-space:inherit; margin:0px; }
ul[column="7"] li img { width:200px; max-width:100%; }
ul[column="8"] { width:100%; overflow:hidden; list-style: none; padding:0px; }
ul[column="8"] li { display:inline; float:left; width:12.5%;  white-space:inherit; margin:0px; }
ul[column="8"] li img { width:64px; max-width:100%; }

/* LEVEL ONE */
ul[role=dropdown]                         { position: relative; }
ul[role=dropdown] li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul[role=dropdown] a:hover		          { color: #000; }
ul[role=dropdown] a:active                { color: #ffa500; }
ul[role=dropdown] li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333; color: #222; }
ul[role=dropdown] li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul[role=dropdown] li.hover,
ul[role=dropdown] li:hover                { background: #F3D673; color: black; position: relative; }
ul[role=dropdown] li.hover a              { color: black; }
/* LEVEL TWO */
ul[role=dropdown] ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul[role=dropdown] ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; float: none; }
/* IE 6 & 7 Needs Inline Block */
ul[role=dropdown] ul li a					{ border-right: none; width: 100%; display: inline-block; }
/* LEVEL THREE */
ul[role=dropdown] ul ul 					{ left: 100%; top: 0; }
ul[role=dropdown] li:hover > ul 			{ visibility: visible; }


ul[role=horizontal-accordion] {
list-style: none; overflow: hidden;
background: #7d8d96; padding-left:0px;

}
ul[role=horizontal-accordion] li {
float: left; border-left: display: block;overflow: hidden; text-decoration: none;
font-size: 16px; color: #fff; height: 170px; width: 50px; margin:0 0;
border-left: 1px solid #fff; background:#003; left:0px;
}
 
ul[role=horizontal-accordion] li svg {
float: left; border-right: 1px solid #fff;
}

[data-transition] {
  position: relative;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: left top;
  border-radius: 5px;
}

[data-transition] p, [data-transition] h3, [data-transition] h4, [data-transition] h5, [data-transition] h6 {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: -100%;
  text-align: center;
  transition: 
    top .5s ease,
    opacity .5s ease,
    bottom .5s ease;
  opacity: 0;
}

[data-transition] h3,[data-transition] h4,[data-transition] h5,[data-transition] h6 {
  top: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
}

[data-transition]:hover h3, [data-transition]:hover h4, [data-transition]:hover h5, [data-transition]:hover h6 {
  opacity: 0;
}

[data-transition]:hover p {
  top: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
}

[role=flip] {
	min-height:250px;
    position: relative;
    border: 1px solid #ccc;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
[role=flip]>content {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}
[role=flip]>content div, [role=flip]>content form {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
[role=flip]>content div:last-child, [role=flip]>content form:last-child {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
[role=flip]>content.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

article div[align=bottom], nav[align=bottom], p[align=bottom], span[align=bottom], table[align=bottom], bottom {
   bottom:0; right:1;
   border-bottom-left-radius:2px;
   border-bottom-right-radius:2px;
}

aside table {
  border-spacing: 0;
}

.panel-left {
  background: rgba(0,0,0,0.5);
  width: 285px;  height: 100%;
  position: fixed;  left: -285px;  z-index:100;
}


.panel-right>form { margin:15px; }
.panel-right>form input { width:90%; }
.panel-right>ul a{ color:#FFF;
}
.panel-right>h3 { z-index:0; text-decoration: none; text-transform: uppercase;
    font-family:Geneva, sans-serif;
    font-size: 1.2em;
    padding-top: 5px;
    padding-bottom: 15px;
	padding-left:15px;
    margin-bottom: 10px;
    border-bottom-style: double;
    border-bottom-color: #999999;
}
#panel-menu-bottom-left {
	height: 200px; width: 285px; 
    background: rgba(0,0,0,0.5);
	z-index:102; bottom:0%; left:0%; 
    position: fixed; display:none;  
}
#panel-menu-bottom-left-inner {
    position: absolute;
    width:100%;
    top: 0px;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
#panel-menu-bottom-center {
	height: 200px; width: 100%; 
    background: rgba(0,0,0,0.5);
	z-index:101;
	bottom:0%; left:0%; 
    position: fixed; display:none; 
}

label[control-toggle] { display: block !important; cursor: pointer; display: none;
    height: 15px; padding-left: 30px; padding-top:0px;
}

table[design=accurdion_horizontal] { min-height: 200px; }
table[design=accurdion_horizontal] th { height: 200px; width:20px;    background-color: #95a5a6; border: 1px solid #7f8c8d; cursor: pointer; vertical-align:middle; }
table[design=accurdion_horizontal] td {	padding:10px; color: #222; background-color: #ecf0f1; height: 200px; width:100%; display: none; }
table[design=accurdion_horizontal] td .active { color: #ecf0f1;	background-color: #2c3e50; border-left: 15px solid #34495e; }

[design=description-border-left]       { background-color:#ffffff; padding:10px; border-left: 5px solid green; border-radius: 5px; }
[design=description-border-left]:hover { background-color:#F2F2F2; padding:10px; border-left: 5px solid green; border-radius: 5px; }

[design=description-image-circle-basic]    { min-height:150px; width:100%; padding:0px; position:relative; display:table; }
[design=description-image-circle-basic] h4 { color:#FFF; }
[design=description-image-circle-basic] [role=description] { background-color:#274158; color:#ffffff; border-top: 15px solid #A8CE09; min-height:100px; margin-left:75px; padding-left:90px; }

ul[list-transform-for-select]    { padding:0px; list-style-type:none; }
ul[list-transform-for-select] li {  border:#CCC 1px solid; padding:5px; margin-bottom:5px; }
ul[list-transform-for-select] li[selected=selected] { background-color:#007fff; color:#FFFFFF; }

[transform-to-thumbnail=accordion-horizontal] { display: flex; box-sizing: border-box; width: 100%; }
[transform-to-thumbnail=accordion-horizontal] img { height: calc(100% - 10vh); width: 200%; object-fit: cover; transition: .5s; }
[transform-to-thumbnail=accordion-horizontal] figcaption { height: 10vh; font-size: 3.8vh; line-height: 2.6;  display: block;  text-align: center; }
[transform-to-thumbnail=accordion-horizontal] figure {  margin: 0 1%;  box-shadow: 0 20px 30px rgba(0,0,0,.1); flex: 1; overflow: hidden; line-height: 0; transition: .5s; }
[transform-to-thumbnail=accordion-horizontal] figure:hover { flex: 1 1 50%; }
[transform-to-thumbnail=accordion-horizontal] figure:hover > img { width: 100%; height: 100%; }

table[td-onfocus-animate] td.focus {
  box-shadow: 0px 0px 5px 15px rgba(0, 0, 0, 0.3);
  position:absolute;
  padding:5px 5px 0px 5px;
  border-radius: 5px;
  background-color:white;
}

.bubble {
  padding: 15px; font-size: 15px; border-radius: 20px;  text-align: center; max-width:500px;
  font-weight:600; color: #330; background: rgba(151, 192, 47, 0.6);
  border: 2px solid #fff; /* Tambahkan border */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* Tambahkan shadow */
}

.bubble-bottom-left:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: 12px solid transparent; border-bottom: 20px solid transparent;
  border-left: 24px solid #030; border-top: 12px solid #030;
  left: 32px;
  bottom: -34px;
}

.bubble-top-left:before { content: "";  width: 0px; height: 0px; position: absolute;
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 0;
  border-bottom: 20px solid #030; /* Mengubah border-bottom */
  left: 32px; top: -22px;
}

.draggable-handle-for-svg-element {
	cursor:move; border-radius: 10px; 
	border:3px solid #97C02F;
}
table.suffix-prefix .suffix div {
  font-weight: bold;
  padding: 5px;
  background-color: #CCC;
  border-top-right-radius: 5px; /* Garis melengkung di sisi kanan (suffix) */
  border-bottom-right-radius: 5px; /* Garis melengkung di sisi kanan (suffix) */
}

table.suffix-prefix .prefix div {
  font-weight: bold;
  padding: 5px;
  background-color: #CCC;
  border-top-left-radius: 5px; /* Garis melengkung di sisi kiri (prefix) */
  border-bottom-left-radius: 5px; /* Garis melengkung di sisi kiri (prefix) */
}