*, html {font-family:Arial, Helvetica, sans-serif}
* {webkit-box-sizing:border-box; box-sizing:border-box}
body {margin:0; padding:0; position:relative}
#loginbox {opacity:0.8; background-color:white; border:1px solid #ccc; border-radius:15px; font-size:20px; position:absolute; left:50%; transform:translate(-50%, 10%);padding:50px; width:314px; webkit-box-sizing:content-box; box-sizing:content-box}
#loginbox h2 {margin:0; padding:0; text-align:center}
#loginbox h2 img {width:100%}
#loginbox input {font-size:20px; margin:10px 0 0 0; width:308px}
#loginbox input#remember {width:auto}
#loginbox label.remember {display:block; font-size:16px; text-align:center}
#loginbox p {text-align:center}
#loginbox p a {color:#999; font-size:12px; text-decoration:none}
#loginbox p a:hover {text-decoration:underline}
#loginbox input.submit {border:1px solid #ccc; border-radius:10px; color:#fff; font-size:20px; padding:8px 0; margin:4px 0}
#loginbox .back {font-size:12px; text-align:center; padding-top:10px}
#loginbox .back a {color:#999; text-decoration:none}
#loginbox .back a:hover {text-decoration:underline}
.fs-ver {position:fixed; right:0; bottom:0; opacity:.5}
.form-control-feedback {top:10px; right:3px; cursor:pointer; pointer-events:unset;}

#header {position:fixed; top:0; left:0; width:100%; z-index:3}
#header h1 {margin:0; padding:10px 0 10px 20px}
#header h1 img {height:48px; float:left; margin:-4px 0 6px 0}
#header .acc {color:#999; float:right; font-size:14px; margin:0; padding:4px 10px 0 0; text-align:right}
#header .acc a {color:#999; text-decoration:none}
#header .acc a:hover {text-decoration:underline}
#menu {height:calc(100% - 97px); list-style-type:none; position:fixed; margin-top:2px; padding:0; top:58px; width:160px; overflow:auto; z-index:30; -ms-overflow-style:none; scrollbar-width:none}
#menu::-webkit-scrollbar {display:none}
#menu li a {border-top:1px solid #fff; float:left; margin:0px; padding:8px 0 8px 20px; text-decoration:none; width:160px}
#menu li a.finalmenu {border-bottom:1px solid #fff; margin-bottom:100px!important}
#content {margin:52px 0 32px 160px; padding:20px}
#content h2 {margin:0}
#content h2 a {text-decoration:none}
#content h3 {margin-bottom:0}
#content label {clear:both; float:left; font-weight:normal; margin:3px 0; width:300px}
#content label input {font-size:16px; margin:-21px 0 0 100px}
#content label select {font-size:16px; margin:-21px 0 0 62px}
#content #daftar label select {font-size:16px; margin:unset; float:right; width:198px}
#content small {margin:0; padding:0; color:#999}
#content small .redbold {color:#f00; font-weight:bold}
#content label.radio {float:none; font-size:12px; margin:0 6px 0 0; display:initial}
#content label.radio input {margin:0; position:initial}
#content #rw {border:1px solid #eee; float:right; width:240px; margin:0 0 0 10px; padding:10px}
#content #vouc {border:1px solid #eee; float:right; width:320px; margin:0 0 0 10px; padding:10px}
#content #rw h3 {margin:0; padding:0; text-align:center}
#content #vouc h3 {margin:0; padding:0; text-align:center}
#content #rw ul {height:460px; overflow-x:hidden; overflow-y:auto; margin:10px 0 0 0; padding:0}
#content #vouc ul {height:460px; overflow-x:hidden; overflow-y:auto; margin:10px 0 0 0; padding:0}
#content #rw ul li {font-size:12px; list-style-type:none; text-align:center}
#content #vouc ul li {font-size:12px; list-style-type:none; text-align:center}
#content #rw ul li a {background:#f8f8f8; border:1px solid #eee; color:#333; display:block; padding:5px; margin:1px; text-decoration:none; width:220px}
#content #vouc ul li a {background:#f8f8f8; border:1px solid #eee; color:#333; display:block; padding:5px; margin:1px; text-decoration:none; align-content: center}
#content #rw ul li a:hover {background:#eee; color:#000; text-decoration:underline}
#content #vouc ul li a:hover {background:#eee; color:#000; text-decoration:underline}
#content #rw2 {border:1px solid #eee; float:right; width:360px; margin:0 0 0 10px; padding:10px}
#content #rw2 h3 {margin:0; padding:0; text-align:center}
#content #rw2 ul {height:446px; overflow-x:hidden; overflow-y:scroll; margin:10px 0 0 0; padding:0}
#content #rw2 ul li {font-size:12px; list-style-type:none}
#content #rw2 ul li a {background:#f8f8f8; border:1px solid #eee; color:#333; display:block; padding:5px; margin:1px; text-decoration:none; width:348px}
#content #rw2 ul li a:hover {background:#eee; color:#000; text-decoration:underline}
#content #penyata p {font-family:"Lucida Console", Monaco, monospace; font-size:12px}
#content #penyata p a {color:#666; font-family:"Lucida Console", Monaco, monospace; font-size:12px; text-decoration:none}
#content #penyata p a:hover {color:#999; text-decoration:underline}
#letterhead {display:none}
table#fbtable tr th {text-align:right}
table.table tr td a.actbtn {float:right; opacity:0}
table.table tr:hover td a.actbtn {opacity:1}
table.table tr:hover td a.actbtn:hover, table.table tr:hover td a.actbtn:focus {text-decoration:none}
.fbth {background:#cde}
.fbth, .fbtd {color:#468; font-size:14px}
.fbtd {background:#def}
.fbtd:hover {background:#cde}
.fbtd a {color:#468; text-decoration:none}
.fbtd a:hover {color:#68a; text-decoration:underline}
.fbmsg {color:#000; font-size:12px; text-decoration:none}
.fbmsg:hover {color:#48c}
.fbcb {background:#f6f7f8; border:1px solid #e9eaee; font-size:12px; margin:10px -13px -13px -13px; padding:13px}
.fbcb0 {background:#f6f7f8; border:1px solid #e9eaee; font-size:12px; margin:10px -13px -13px -13px}
.fbcbc {border-bottom:1px solid #eee; padding-bottom:6px; margin-bottom:6px; min-height:29px}
a.fb {background:#def; color:#06C; display:block; margin:0; padding:7px; text-decoration:none; width:120px; overflow:hidden}
a:hover.fb {background:#cde}
tr.top {vertical-align:top}
tr.a {cursor:pointer}
tr.a:hover {background:#e6e6e6}
tr.w {background:#fff}
th, td {padding:2px 10px}
tr.l th, th.l, td.l {text-align:left}
tr.c, th.c, td.c {text-align:center}
tr.r, th.r, td.r {text-align:right}
tr.nobr, th.nobr, td.nobr {white-space:nowrap}
.titbox {float:left; margin:0 20px 0 0}
.tutbox {border:1px solid #666; background:#f5f5f5; font-size:12px; height:300px; overflow:scroll; padding:0 10px; width:300px}
.tutbox ul {margin-top:-10px}
.tutbox ul li {margin-left:-20px}
.sent {border:1px solid #090; background:#efe; padding:0 10px; margin:10px 0; color:#080; font-size:14px}
a.trial {color:#fff; font-weight:bold; border:2px solid #a00; background:#f00; border-radius:3px; padding:3px; float:right; text-decoration:none}
a.trial:hover {border:2px solid #f00}
.kl {float:left; margin:10px 10px 0 0}
.kd {float:right; border:6px solid #e9eaee; padding:12px; width:470px}
.kdk {cursor:pointer; float:right; border:6px solid #e9eaee; padding:12px; width:470px}
.pesanan li {cursor:pointer; padding:10px}
.pesanan li:hover {background:#e6f0ff}
.produk {float:left; width:240px; border:1px solid #ccc; border-radius:10px; margin:20px 20px 0 0; padding:0 10px 10px 10px}
.produk h3 {text-align:center; padding-bottom:16px}
.produk input {width:auto}
.produk label {width:auto}
.produk a img {width:240px; height:180px}
#result {font-weight:normal; clear:both}
#result h4 {color:#080}
blockquote {margin:0 20px}
a.anchor {display:block; position:relative; top:-62px; visibility:hidden}
.container {margin-top:-42px; margin-bottom:140px}
.container h2 {margin-top:0}
#footer {border-top:1px solid #fff; font-size:12px; margin:0; padding:10px; position:fixed; bottom:0; left:0; text-align:center; width:100%; width:calc(100% - 20px); z-index:31}
#footer a {text-decoration:none}
#footer a:hover {text-decoration:underline}
#list {height:calc(100vh - 165px); overflow:auto}
.glyphicon-lock {color:#5ad}
.glyphicon-ok {color:#0a0}
.glyphicon-remove {color:#f00; cursor:pointer}
.glyphicon-edit {color:#090}
h4.termhead{padding-top:16px;text-align:justify;text-decoration:underline}
h4.kategori{border-bottom:1px solid #eee;clear:both;color:#337ab7;cursor:pointer;padding-bottom:8px; margin-left:15px}
ol.terms,ol.terms li ol,ol.terms li ul {padding-left:20px}
ol.terms li,ol.terms p{margin-bottom:8px;text-align:justify}
tr.ringkasan td {border-top:3px solid #ddd!important}
td.noborder {border:none!important}
.proceed:not(.btn) {color:#337ab7;cursor:pointer}
.up, .down, .display, .link {color:#337ab7; cursor:pointer}
#summary {position:fixed; background:#fff; z-index:1; padding:21px 38px 11px 38px; margin:-32px 0 0 -22px; width:100%}
.facebook-responsive {overflow:hidden;padding-bottom:56.25%;position:relative;height:0; margin-top:50px}
.facebook-responsive iframe {left:0;top:0;height:100%;width:100%;position:absolute}
.colorpick {box-sizing:content-box}
.skema span {border:1px dotted #999; border-left:none; float:left; width:0.9vw}
.libtext {position:relative}
.copyshuffle {float:right}
.libcontent {position:relative; font-size:14px}
.libadminpanel {float:right}

ul.tree {
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: relative;
}
ul.tree li {
  list-style-type: none;
  border-left: 2px solid #000;
  margin-left: 1em;
}
ul.tree li:nth-of-type(even) {
  background: #fff;
}
ul.tree li:nth-of-type(odd) {
  background: #eee;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
ul.tree li div {
  padding-left: 1em;
  position: relative;
}
ul.tree li div::before {
  content:'';
  position: absolute;
  top: 0;
  left: -2px;
  bottom: 50%;
  width: 0.75em;
  border: 2px solid #000;
  border-top: 0 none transparent;
  border-right: 0 none transparent;
}
ul.tree > li:last-child {
  border-left: 2px solid transparent;
}

.menu-toggle:before {
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font: normal 16px/1 Genericons;
	text-decoration: inherit;
	vertical-align: text-bottom;
}

.menu-toggle {
	border-radius: 0;
	cursor: pointer;
	height: 37px;
	margin: 0;
	overflow: hidden;
	padding: 6px;
	position: fixed;
	top: 0;
	right: 0;
	text-align: center;
	width: 46px;
	z-index: 20;
	font-size:10px; 
}

.change-language-selection {position: absolute; top:26px; font-size: 10px; right: 65px; border-radius: 0; stroke: none;}

.menu-toggle:before {
	color: #000;
	padding: 14px;
}

@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

table#fbtable {width:430px}
.grid-item {margin:10px 10px 0 0; float:left}
.fbwindow {float:right; border:6px solid #e9eaee; padding:12px; text-overflow:ellipsis; word-wrap:break-word; width:470px}
.fbwindow img.imej {margin:6px -10px 0 -10px; width:490px; max-width:calc(100% + 20px)}
.fbname {color:#384ea4; font-weight:bold}
.fbdate {font-size:12px; color:#a0969f; margin-top:4px}
.paparpenyata {text-align:right}
.paparpenyata input {margin:6px 1px 0 1px; width:110px}
.adminbox {float:left; margin:0 20px 0 0; width:100%; max-width:300px; text-align:right}
.adminbox h3 {text-align:left}
.adminbox input[type="text"] {width:50%; max-width:150px}
.adminbox textarea {border:1px solid #ccc; width:255px; height:40px; margin:1px 0 -4px 0}
.adminbox sup.delete {float:right; color:#999; cursor:pointer!important}
.adminbox sup.delete:hover {color:#f00; text-decoration:underline}
small.saved {color:#080!important; display:none; float:left}
small.unsaved {color:#f00!important; display:none; float:left}
.penyata_btn {border-radius:0; -webkit-appearance:none; padding:4px}
a.item_btn, a.itempakej_btn, a.web_btn, a.pelanggan_btn {color:#fff; display:block; margin:6px 0 0 0; padding:4px; text-align:center; text-decoration:none}
a.item_btn {background:#4a8}
a.item_btn:hover {background:#4d8}
a.itempakej_btn {background:#aa4}
a.itempakej_btn:hover {background:#dd4}
a.web_btn {background:#47a}
a.web_btn:hover {background:#48d}
a.pelanggan_btn {background:#a47}
a.pelanggan_btn:hover {background:#d48}
.disabled {cursor:not-allowed; filter:alpha(opacity=65); -webkit-box-shadow:none; box-shadow:none; opacity:.65}
.submenu {margin-bottom:12px}
.submenu a {text-decoration:none}
.submenu a:hover {text-decoration:underline}
.submenu a.current {font-weight:bold}
#tutorial {font-size:12px; font-weight:normal; cursor:pointer}
#tutorial:hover {text-decoration:underline}
#appid, #appsecret {max-width:100%}
#appid {font-size:16px; width:150px; max-width:100%}
#appsecret {font-size:16px; width:300px; max-width:100%}
#link try {cursor:pointer; color:#fff; background:#0C3; font-size:12px; padding:4px 10px; border-radius:5px}
.byzone, .bydelivery {cursor:pointer}
.byzone:hover, .bydelivery:hover {text-decoration:underline}
.padded_cbox {clear:both; display:block; margin-right:130px}
.padded_cbox:after {clear:both; display:block; content:''}
.topright {float:right; margin-right:10px}
.dialogfull {position:absolute; top:0}
.ui-dialog {z-index:1}
.ui-dialog-titlebar {background:#fff; padding:10px}
.ui-dialog-titlebar-close {float:right; padding:0; margin:0}
.nobr{white-space:nowrap}
.hideoverflow{overflow:hidden}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px!important;
  height: 17px;
  float:right!important;
  margin-top:2px!important;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Tooltip */
.more_info {
	position: relative;
	text-align: left;
	cursor: pointer;
}
.title {
	position: absolute;
	top: 20px;
	background: #eee;
	color: #000;
	font-size: 12px;
	border-radius: 8px;
	padding: 10px;
	left: 0;
	z-index: 1;
}
.filter_box {
	position: relative;
	text-align: left;
	background: #FAFAD2;
	font-size: 16px;
	border-radius: 5px;
	padding: 3px;	
}

/* newsfeed start */
.imgbuletin {width:100%;height:auto}
.imgbaucar {width:100%;height:auto}
.BuletinWindow {border:1px solid #e9eaee; border-radius: 6px; padding:12px; margin-bottom: 10px; text-overflow:ellipsis; word-wrap:break-word; width:525px}
.NewBuletin {border:1px solid #e9eaee; border-radius: 6px; padding:12px; margin-bottom: 10px; text-overflow:ellipsis; word-wrap:break-word; width:525px}
.EditBuletin {border:1px solid #e9eaee; border-radius: 6px; padding:12px; margin-bottom: 10px; text-overflow:ellipsis; word-wrap:break-word; width:525px}
.BaucarWindow {border:1px solid #e9eaee; border-radius: 6px; padding:12px; margin-bottom: 10px; text-overflow:ellipsis; word-wrap:break-word; width:525px}
.TopSaleDeskWindow1 {position: absolute;top: 231px;right: 185px;border:1px solid #e9eaee; border-radius: 6px; padding:12px; text-overflow:ellipsis; word-wrap:break-word; width:233px}
.TopSaleDeskWindow2 {position: absolute;top: 131px;right: 185px;border:1px solid #e9eaee; border-radius: 6px; padding:12px; text-overflow:ellipsis; word-wrap:break-word; width:233px}
.bilvou {position: relative;text-align: center;color:black;font-size: 100px}
.top-right {position: absolute;top: 60px;right: 80px;}
.nav {float:right;cursor:pointer;color:grey;}
.nav li a:hover, .nav li a.dropdown-toggle.active {background-color: #289dcc;color: #fff;}
.nav li .dropdown-menu {display: none;padding: 0;text-align: left;font-size: 12px;z-index:1;margin-left: -146px;}
.nav li .dropdown-menu.active {display: block}
.buletin-responsive {overflow:hidden;padding-bottom:56.25%;position:relative;height:0}
.buletin-responsive iframe {left:0;top:0;height:100%;width:100%;position:absolute}
.carousel-inner .item{height:400px;background-size:cover;background-position: center center;}
.carousel-inner img {margin: auto;}
.carousel-inner {margin-bottom:30px;}
.carousel-indicators {bottom:-40px; z-index: 0;}
.carousel-indicators .active {width:7px;height:7px;margin:0px;background-color:grey;}
.carousel-indicators li {background-color:#fff;border:1px solid #000;border-radius:10px;width:7px;height:7px;margin:0px;}
.carousel-control.left, .carousel-control.right {background-image:none !important;filter:none !important;}
/* newsfeed end */

@media screen and (max-width: 735px) {
	
	body {line-height:normal}

	#loginbox input {width:100%}
	#loginbox input.login {width:calc(100% - 20px); padding:8px; box-sizing:content-box}
	.form-control-feedback {top:14px; right:6px}

	#liveview {display:none}
	#menu {display:none}
	#header h1 img {height:32px; margin:-6px 0 6px 0}
	table {width:100%; max-width:100%}
	table#fbtable {width:auto}
	th, td {padding:0}
	.produk {margin:20px auto; float:none; width:93%; width:88vw}
	.produk a img {width:100%; height:100%}
	a.item_btn, a.web_btn, a.itempakej_btn, a.pelanggan_btn {width:40vw; margin-top:6px; float:left}
	a.item_btn, a.itempakej_btn {margin-right:6px}
	.paparpenyata {clear:both}
	.paparpenyata input {width:90px}
	.grid-item {border-top:10px solid #f6f6f6; margin:0 -5vw 20px -5vw; padding:0 5vw; max-width:initial}
	.fbwindow {float:none; border:none; padding:20px 0 0 0; width:91vw}
	.fbwindow img.imej {margin:6px -10px 0 -8px; width:97vw}
	.fbname {color:#000}
	.fbdate {font-size:11px}
	.upload {height:80px; margin-left:-80px; width:100%}
	.search {max-width:45%}
	.search_btn {max-width:45%}
	.plus {width:50px}
	input[type=checkbox] {width:auto}
	.topright {float:right; margin:-18px -8px 0 0}
	.submenu {font-size:11px}
	#list, .table {height:100%; overflow:auto; -webkit-overflow-scrolling:touch}
	.switch {margin-top:0!important}

	.BuletinWindow {border:1px solid #e9eaee; border-radius: 6px; padding:12px; text-overflow:ellipsis; word-wrap:break-word; width:auto}
	.NewBuletin {border:1px solid #e9eaee; border-radius: 6px; padding:12px; text-overflow:ellipsis; word-wrap:break-word; width:auto}
	.EditBuletin {border:1px solid #e9eaee; border-radius: 6px; padding:12px; text-overflow:ellipsis; word-wrap:break-word; width:auto}
	.BaucarWindow {border:1px solid #e9eaee; border-radius: 6px; padding:12px; text-overflow:ellipsis; word-wrap:break-word; width:auto}
	.TopSaleMobileWindow {border:1px solid #e9eaee; border-radius: 6px; padding:12px; margin-bottom: 12px; text-overflow:ellipsis; word-wrap:break-word; width:auto;}
	.TopSaleDeskWindow1 {display: none;}
	.TopSaleDeskWindow2 {display: none;}
	.bilvou {position: relative;text-align: center;color:black;font-size: 70px}
	.top-right {position: absolute;top: 35px;right: 40px;}
	.BuletinWindow img.imej {margin:0 -10px; width:auto}
}

@media screen and (max-width: 735px) {
	#loginbox {border:none}
	#morefootmenu .userimg {width:100vw!important}
	#header h1 {font-size:22px; margin-top:1px}
	#content {border:none; padding:10px; margin:54px 0 42px 0}
	#header .acc {display:none}
	.tutbox {border:none; background:#fff; font-size:12px; height:auto; overflow:hidden; padding:0 10px; width:100%}
	input:not[type="button"] {width:220px}
	select.i140 {max-width:140px}
	input[type="radio"] {width:13px}
	textarea {width:320px}
	#content label.radio input {width:auto}
	table {overflow:hidden}
	#setuju,#taksetuju {margin-top:0px}
	#teruskan {margin-top:16px}
	.col-xs-3 h3,.col-xs-4 h3,.col-xs-5 h3,.col-xs-6 h3,.col-xs-3 h5,.col-xs-4 h5,.col-xs-5 h5,.col-xs-6 h5,.col-xs-3 p,.col-xs-4 p,.col-xs-5 p,.col-xs-6 p{font-size:inherit;margin:0px}
	.tabulator {height:calc(90vh - 20vw); padding-bottom:10vw}
	.change-language-icon {position: absolute;top: 6px;right: 72px;background-color: white;padding: 2.5px;border-radius: 4px;box-shadow: 0px; stroke: none;}
}

@media screen and (min-width: 736px) {
	.menu-toggle, .userimg {display:none; margin:0; padding:0}
	.plus, .minus {-webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; -ms-user-select:none}
	.TopSaleMobileWindow {display: none;}
	.tabulator {height:88vh; padding-bottom:0}
	.change-language-selection {display: none;}
	.change-language-icon {display: none;}
}

@media screen {.printonly {display: none}}

@media print
{    
    #header, .menu-toggle, #menu, .submenu, .container h2, .noprint, .change-language-icon, .change-language-selection, .container div {display:none!important} .pagebreak {page-break-after:always; display:block!important} .pagetopmargin {margin-top:60px; display:block} .pageleftmargin {margin-left: -160px;} .pagebreak:last-child {page-break-after:auto;}
    #letterhead {display:block; position:absolute; top:-36px; right:0px; text-align:left; font-size: 16px}
	#app h1 {position:absolute; z-index:4; top:-20px; left:10px; width:400px}
	pre {border:none; font-size:16px!important; position:absolute; z-index:4; top:80px; left:0; right:0; background:#fff!important}
	a[href]:after {content: none !important;} /*hide href value*/
	#footer {margin-bottom:-10px; border:none}
	.printarea {margin-top: 100px;}
}

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}

#footmenu, #morefootmenu {display:none}
@media screen and (max-width: 735px) and (orientation:portrait){
	#footmenu, #morefootmenu {display:block; position:fixed; line-height:normal; max-width:100vw}
	#footmenu {background:#fff; text-align:center; bottom:0; height:18vw; overflow:hidden; font-size:10px; z-index:20; width:100vh}
	.fm-main, .fm-genealogi, .fm-order, .fm-account, .fm-penyata, .fm-attendance {display:block; position:fixed; text-align:center; bottom:0; height:calc(18vw - 1px); width:20vw!important; overflow:hidden; font-size:10px}
	.fm-main {left:0}
	.fm-genealogi {left:20vw}
	.fm-attendance {left:20vw}
	.fm-order {left:40vw}
	.fm-account {left:60vw}
	.fm-penyata {left:80vw}
	#morefootmenu {bottom:-84vw; z-index:19; max-height:80vw; overflow-y:auto}
	#morefootmenu .userimg {padding:5px}
	#morefootmenu .userimg .img-circle {height:20vw; width:20vw; margin:auto; display:block}
	#morefootmenu a {text-align:center; display:block; float:left; height:20vw; width:20vw!important; overflow:hidden; font-size:10px; position:relative}
	#morefootmenu a .badge {position:absolute; top:2vw; left:10vw}
	#morefootmenu .bottom {border-top:none; overflow-x:auto; overflow-y:hidden; width:100vw; height:20vw}
	#morefootmenu .bottom .inner {border-top:none; height:20vw}
	#footmenu .glyphicon, #morefootmenu .glyphicon {font-size:2.5em; padding:4vw 0 3px 0}
	#footer {display:none}
}

::selection {text-shadow:none}