@font-face {
	font-family:mainFont;
	src:url('Fonts/default.ttf');
}
@keyframes loading {
	0% {
		transform: rotate(405deg);
	}
	25%{
		border-style: dotted;
	}
	30%{
		border-top-color: #f2d200;
		border-bottom-color: #70ca5c;
	}
	50%{
		border-style: dashed;
	}
	100% {
		transform: rotate(45deg);
	}
}
@keyframes loading-o {
	0% {
		transform: rotate(45deg);
	}
	25%{
		border-style: dotted;
	}
	30%{
		border-left-color: #f63a99;
		border-right-color: #30dcf6;
	}
	50%{
		border-style: dashed;
	}
	100% {
		transform: rotate(405deg);
	}
}
.loader, .loader-dom, .loader-tra{
  background-color: rgba(0,0,0,0.2) !important;
}
.loader:before, .loader-dom:before, .loader-tra:before, .loader:after, .loader-dom:after, .loader-tra:after{
	content: ' ';
	width: 31px;
	height: 31px;
	position:absolute;
	left: calc(50% - 22px);
	top: calc(50% - 22px);
	border-radius: 50%;
	border: 6.5px solid transparent;
	padding: 0px;
}
.loader:before, .loader-dom:before, .loader-tra:before{
	border-top-color: #f63a99;
	border-bottom-color: #30dcf6;
	animation: loading 2s infinite ease;
}
.loader:after, .loader-dom:after, .loader-tra:after{
	border-left-color: #f2d200;
	border-right-color: #70ca5c;
	animation: loading-o 2s infinite ease;
}
.loader *, .loader-dom *{
	display: none;
}
#nav, .login-body{
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
body{
	font-family: mainFont;
	margin: 0px;
	background-color: #FFFFFF;
	overflow: hidden;
	color: #2f3a4c;
}
a{
	color: #fff;
}
h1, h4{
	margin: 0px;
}
img{
	display: block;
}
button{
	margin: 0px;padding: 0px;
	line-height: 30px;
	padding-right: 15px;
	margin: 0px 10px 10px 0px;
	position: relative;
	border-radius: 5px;
	border:none;
	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
	background-color: tomato;
	color: white;
	cursor: pointer;
  overflow: hidden;
  outline: none;
}
button:before{
	content: ' ';
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.05);
}
button:after {
  content: ' ';
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  border: 50vh solid rgba(0, 0, 0, 0.2);
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 15px;
  left: 15px;
  z-index: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
button:active:after, button:focus:after {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
button i{
	margin-right: 10px;
	width: 30px;
}
button.fa{
	font-family: mainFont !important;
	padding: 0px 10px;
	padding-left: 40px;
	line-height: 30px;
	font-size: 14px;
}
button.fa:before{
	font-family: fontAwesome !important;
	height: 100%;
	font-weight: normal;
}
button.fa:hover:before{
}

pre{
	float: left;
	width: calc(100% - 22px);
	border: 1px dashed #CCC;
	border-right: none;
	border-left: none;
	padding: 10px;
	overflow-x: auto;
}
input, textarea, select, option{
	float: left;
	font-family: mainFont !important;
	margin: 0px;
	padding: 10px;
	width: calc(100% - 22px);
	background-color: #FFF;
	cursor: pointer;
	font-size: 14px;
	outline: none;
	border: 1px solid #CCC;
}
input:focus, textarea:focus, select:focus, option:focus{
	border: 1px solid tomato;
}
select{
	width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat;
  background-position: right;
}
select[multiple]{
	background-image: none !important;
	padding: 0px;
}
select[multiple] option{
	border-top: none;
	border-right: none;
	border-left: none;
	padding-left: 40px;
  background-repeat: no-repeat;
  background-position: 10px center;
}
select[multiple] option:last-child{
	border-bottom: none;
}
textarea{
	resize:vertical;
	min-height: 200px;
}
input[type="color"], input[type="range"]{
	padding: 0px;
	margin: 0px;
	border: none;
}
input[type="color"]{
	width: 50px;
}
input[type="file"].button{
	width: 100%;
	height: 100%;
	position: absolute !important;
	left: 0px;
	top: 0px;
	z-index: 9999;
	opacity: 0;
	padding: 0px !important;
}
.rs-inp-2 input, .rs-inp-2 textarea, .rs-inp-2 select{
	width: calc(50% - 20px);
}
input::placeholder, textarea::placeholder{
	font-style: italic;
}
input[type="radio"], input[type="checkbox"]{
	width: 20px;
	margin: 2.5px 10px;
}
.input.error{
	width: calc(100% - 52px);
	padding-left: 40px;
  background-size: 20px auto !important;
	background-position: 10px !important;
	background-repeat: no-repeat; 
}
select.input.error{
	width: calc(100% - 2px);
}

.form{
	float: left;
	width: 100%;
	background-color: #FFF;
}
.form > h1, .form > .row > h3{
	text-align: center;
	margin: 10px 0px;
	padding: 0px;
	float: left;
	width: 100%;
	font-size: 24px;
}
.form input, .form textarea, .form select{
	margin-top: 5px;
}
.row{
	padding: 10px;
	width: calc(100% - 20px);
	float: left;
	overflow: hidden;
	position: relative;
}
.row.input_captcha{
	padding-top: 190px !important;
}
.row.input_captcha > img.input_captcha{
	position: absolute;
	left: 20px;
	top: 20px;
	max-height: 180px;
	width: auto;
	max-width: calc(100% - 40px);

}
.form .row{
	padding: 10px 20px;
	width: calc(100% - 40px);
	margin-bottom: 0px;
	border-bottom: 1px solid #CCC;
	background-color: #FFF;
}
.form .row:nth-child(even){
	background-color: #f4f3f3;
}
.row h6{
	margin-top: 5px;
	margin-bottom: 0px;
	float: left;
	width: 100%;
}
.row i.icon, .icon-input{
	position: absolute;
	right: 20px;
	bottom: 22px;
}
.row div.icon{
	float: left;
	width: 100%;
	position: relative;
}
.row div.icon i.fa{
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 30px;
	line-height: 30px;
	text-align: center;
}
.row div.icon i.fa.left{
	left: 5px;
}
.row.pro{
	
}
.row.pro > img{
	float: left;
	width: 100px;
}
.row.pro > div{
	float: left;
	margin-left: 10px;
	width: calc(100% - 120px);
}
.row.pro > div > span{
	float: left;
	width: 100%;
	line-height: 18px;
	position: relative;
	font-size: 14px;
}
.row.pro > div > span.space, .row.pro > div > span.plus{
	line-height: 30px;
}
.row.pro > div > span.space:before, .row.pro > div > span.plus:before{
	content: ' ';
	position: absolute;
	left: 0px;
	top: 14px;
	width: 100%;
	border-top: 2px solid #2f3a4c;
}
.row.pro > div > span.plus:before{
	content: ' ';
	width: calc(100% - 20px);
}
.row.pro > div > span.plus:after{
	position: absolute;
	font-family: fontAwesome;
	content: '\f067';
	width: 20px;
	line-height: 30px;
	text-align: right;
	top: 0px;
	right: 0px;
	color: #2f3a4c;
}
.row.pro > div > span > b{
	float: right;
	width: calc(100% - 80px);
	position: relative;
}
.row.pro > div > span > b:before{
	position: absolute;
	left: -10px;
	top: 0px;
	content: ':';
}

.row.pro > div.rs-col-12{
	float: left;
	margin-left: 0px;
	width: 100%;
}
.row.pro > div.rs-col-12 > span > b{
	width: calc(100% - 140px);
}
.row.pro > div i{
	font-size: 12px;
	color: tomato;
}

.group{
  display: table;
  border-collapse: collapse;
  width:100%;
}
.group > div{
  display: table-cell;
  border: 1px solid #CCC;
  vertical-align: middle; 
}
.group .embed{
  background:#eee;
  color: #777;
  padding: 0 12px
}
.group .embed > .rs-checkbox{
	padding-left: 35px !important;
}
.group .area *{
	margin: 0px;
}
.group .area{
	width: 100%;
}
.group .area h4{
	white-space: nowrap;
	width: auto;
	float: left;
}
.group input{
	border-color: transparent; 
}

.row i.button.fa{
	padding: 5px;
	background-color: tomato;
	margin: 5px 5px 0px 0px;
	border-radius: 5px;
}

i.line-input{
	position: relative;
	width: 100%;
	float: left;
}
i.line-input:after{
	content: ' ';
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 6px;
	width: 0%;
	background-color: tomato;
	background-size: auto 6px;
	background-repeat: repeat; 
	transition: ease 1s;
	background-color: #edeef2;
}
i.line-input.active:after{
	transition: ease 1s;
	width: 100% !important;
}

.row.v2{
  position: relative;
  padding-bottom: 10px !important;
}
.row.v2 > .input,
.row.v2 > .input::placeholder{
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  position: relative;
  z-index: 2;
  border: none;
  background-color: transparent !important;
  margin-top: 15px;
  color: transparent !important;
}
.row.v2 > select.input[multiple]{
	margin-top: 27px;
	float: right;
	width: calc(100% - 5px);
}
.row.v2 > select.input[multiple] > option{
	color: #2f3a4c !important;
}
.row.v2 > .input:focus, 
.row.v2 > .input:valid{
  color: #2f3a4c !important;
}
.row.v2 > .input:focus::placeholder, 
.row.v2 > .input:valid::placeholder{
  font-weight: bold;
  font-style: normal;
  color: #999 !important;
}
.row.v2 > label{
  position: absolute;
  top: 35px;
  left: 30px;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
}
.row.v2 > .input.error ~ label,
.row.v2 > .input.rs-icon ~ label{
  left: 60px;
}
.row.v2 > .input:focus ~ label, 
.row.v2 > .input:valid ~ label{
  top: 15px;
  left: 30px;
  font-size: 10px;
}
.row.v2 > .bar{
  position: relative;
  background-color: #AAA;
  float: left;
  width: calc(100% - 10px);
  margin-left: 5px;
  margin-bottom: 5px;
  height: 2px;
  overflow: hidden;
}
.row.v2 > .bar:after{
  content: ' ';
  height: 50%;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: #FFF;
  position: absolute;
  z-index: 2;
  border-radius: 1px;
}
.row.v2 > .bar:before{
  content: ' ';
  height: 100%;
  width: 0;
  left: 25%;
  top: 0px;
  position: absolute;
  background: #337ab7;
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 3;
}
.row.v2 > .input:focus ~ .bar:before,
.row.v2 > .input:valid ~ .bar:before{
  width: 100%;
  left: 0;
}
.row.v2 > h6{
  margin-left: 5px;
  margin-top: 5px;
  font-family: mainFont;
  width: calc(100% - 10px);
  line-height: 20px;
  font-size: 12px;
  font-weight: bold;
}
.row.v2 > h6.fa{
  position: relative;
  padding-left: 20px;
  width: calc(100% - 30px);
}
.row.v2 > h6.fa:before{
  font-size: 12px;
  font-weight: normal;
  font-family: fontAwesome;
  position: absolute;
  left: 5px;
  top: 0px;
}
.row.v2 > .input:focus ~ h6.fa:before{
  color: tomato;
}
.input.rs-icon{
  width: calc(100% - 52px);
  padding-left: 40px;
  background-size: 20px auto !important;
  background-position: 10px !important;
  background-repeat: no-repeat;
}
.input.rs-icon ~ i.rs-icon.fa{
  position: absolute;
  left: 30px;
  top: 30px;
  line-height: 25px;
  width: 25px;
  text-align: center;
}
.row.v2 > .input.error.rs-icon ~ i.rs-icon.fa{
  display: none;
}

label{
	font-size: 13px;
	font-weight: bold;
	float: left;
	width: 100%;
	margin-bottom: 5px;
}
label.error{
	color: tomato;
	margin-left: 20px;
	position: relative;
}
label.error:before{
	position: absolute;
	left: -20px;
	line-height: 20px;
	content: '\f071';
	font-family: fontawesome;
	width: 20px;
	text-align: center;
}



table{
	width: 100%;
	border-collapse: collapse;
}

td, th{
	padding: 5px;
	border: 1px solid #BBB;
	cursor: pointer;
	white-space: nowrap;
	vertical-align: top;
}
table.wrap td, table.wrap th{
	white-space: normal !important;
}
tr td:first-child{
	border-left: none !important;
}
tr td:last-child{
	border-right: none !important;
}
tr.disable td{
  border: 1px solid #999;
  background-color: #ccc;
  color: #666;
  cursor: no-drop !important;
}
table.field td, td.field{
	padding: 0px;
	border: none;
}
table.field td input, td.field input{
	border: 1px solid #CCC;
	width: calc(100% - 22px);
	padding: 5px 10px;
	margin: 0px;
}
table.field td input:focus, td.field input:focus{
	background-color: rgb(255, 255, 255, 1) !important;
}
table.field td i.fa, td.field i.fa{
	padding: 5px;
	margin: 0px;
	width: 20px;
	float: left;
	text-align: center;
	line-height: 20px;
}
thead{
	background-color: #DDD;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
}
tbody tr{
	background-color: #FFF;
}
tbody tr:nth-child(even){
	background-color: #EEE;
}
tbody td{
	font-size: 12px;
}
tbody td:hover{
	background-color: rgba(0, 0, 0, 0.1);
	font-weight: bold;
}
tbody tr:hover{
	background-color: rgba(0, 0, 0, 0.15);
}
tbody tr:hover td{
	border-color: #FFF;
}
tfoot tr td{
	background-color: #DDD;
	font-size: 13px;
}
thead tr td, tfoot tr td{
	vertical-align: middle;
}
tfoot tr td:last-child{
	background-color: #CCC;
	font-weight: bold;
}
td.cur{
	position: relative;
	padding-left: 30px;
}
td.cur:before{
	width: 25px;
	text-align: center;
	line-height: 25px;
	position: absolute;
	left: 0px;
	top: 0px;
	content: 'Rp.';
	font-weight: bold;
}
thead td{
	padding-right: 20px;
	padding-left: 20px;
	position: relative;
}
thead td.up:before, thead td.down:before{
	width: 15px;
	text-align: center;
	line-height: 15px;
	position: absolute;
	right: 0px;
	top: 0px;
	font-family: fontAwesome;
	content: '\f0d8';
	font-weight: bold;
}
thead td.down:before{
	content: '\f0d7';
	top: 5px;
}
tfoot td.setting{
	content: ' ';
	padding: 0px;
}
thead td:first-child{
	padding-left: 30px;
}
tfoot td.setting:before{
	font-family: fontAwesome;
	content: '\f013';
	position: absolute;
	left: 1px;
	top: 1px;
	font-weight: bold;
	width: 28px;
	text-align: center;
	line-height: 28px;
	font-weight: normal;
}
tfoot td.setting:hover:before{
	color: #FFF;
	z-index: 99;
}

.board{
	background-image: url('../Images/board.png') !important;
	background-repeat: repeat-x;
	background-size: auto 150px;
	background-color: #edeef2 !important;
}
#nav, #content, #header, #logo, #footer, #search, .slide{
	position: fixed;
	overflow: hidden;
}
.mobile > #footer{
	display: none;
}
.mobile > #content, .mobile > #nav{
	height: calc(100% - 50px) !important;
}
#header{
	background-color: #FFF;
	width: calc(100% - 250px);
	top: 0px;
	right: 0px;
	overflow: hidden;
	height: 50px;
	z-index: 9;
}
#header #header-nav:before{
	content: '\f060';
}
#rs-input-search-header{
	width: calc(100% - 40px);
	position: fixed;
	left: 0;
	top: 0;
	height: 0px;
	padding: 0 20px !important;
	background-color: #FFF;border-radius: 0px;
}
#rs-input-search-header.show{
	padding: 5px 20px !important;
	height: 40px;
}
#rs-input-search-header-button{
	width: 0px;
	position: fixed;
	right: 10px;
	top: 10px;
	height: 0px;
	padding: 0 !important;
	margin: 0 !important;
	background-color: #CCC !important;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	outline: none;
}
#rs-input-search-header-button i{
	padding: 0 !important;
	margin: 0 !important;
	color: #FFF !important;
}
#rs-input-search-header-button:before{
	background-color: transparent;
}
#rs-input-search-header-button.show{
	height: 30px;
	width: 30px;
}
#header i{
	margin: 10px 5px;
	padding: 5px;
	width: 20px;
	height: 20px;
	line-height: 20px !important;
	text-align: center;
	color: #CCC;
	border-radius: 50%;
}

#header i:first-child{
	margin-left: 10px;
}
#header i.right{
	float: right;
}

#content{
	right: 0;
	width: calc(100% - 250px);
	top:50px;
	height: calc(100% - 75px);
	overflow-y: auto !important;
	background-color: #edeef2;
}
#content-main{
	float: left;
	width: calc(100% - 50px);
	margin: 25px;
	min-height: 200px;
}
#content-main h4{
	color: #CCC;
}
#content-main .content-main-paragraf{
	margin-bottom: 30px;
}
#content-main p{
	padding: 15px !important;
	margin: 0px;
	text-align: justify;
}

#footer{
	right: 0;
	width: calc(100% - 250px);
	bottom: 0px;
	height: 25px;
	background-color: tomato;
	color:#FFF;
	text-align: center;
	font-size: 12px;
	line-height: 25px;
}

#logo{
	background-color: tomato;
	left: 0;
	top:0px;
	width: 250px;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 40px;
}
#logo.ui-resizable-resizing{
	z-index: 999999;
}





#search{
	background-color: #FFF;
	left: 0;
	top:50px;
	width: 0px;
	height: calc(100% - 50px);
	overflow-y: auto !important;
}
.search-close{
	position: absolute;
	left: 230px;
	top:10px;
}
.search-input{
	border-bottom: 1px solid tomato;
}



#nav, .slide{
	background-color: #2f3a4c;
	left: 0;
	top:50px;
	width: 250px;
	height: calc(100% - 50px);
	overflow-y: auto !important;
	color: #FFF;
}
#nav ul, .slide ul{
	padding: 0px;
	width: 100%;
	margin: 0px;
	margin-bottom: 10px;
	float: left;
}
#nav ul li, .slide ul li{
	float: left;
	list-style-type: none;
	padding: 0;
	color: #FFF !important;
	width: 100%;
	cursor: pointer;
	font-size: 14px;
	padding: 10px 0px;
}
#nav ul li:first-child, .slide ul li:first-child{
	margin-top: 10px;
}
#nav ul li i.fa{
	font-family: mainFont;
	margin-left: 50px;
	position: relative;
}
#nav ul li i.fa:before{
	font-family: fontawesome;
	width: 50px;
	text-align: center;
	left: -50px;
	position: absolute;
}
#nav ul .sub{
	display: none;
	margin-top: 10px;
	margin-bottom: 0px;
}
#nav ul li:hover, #nav ul .sub li, #nav ul li.active{
	background-color: rgba(0, 0, 0, 0.4);
}
#nav ul .sub li:hover{
	background-color: tomato;
}
#nav ul li i{
	margin-right: 10px;
}
#nav img{
	height: 50px;
	padding: 0px 21px;
	background-color: tomato;
}
#nav hr{
	border-bottom: none;
	width: calc(100% - 40px);
	margin: 20px;
}

.slide.hide{
	width: 0px;
}
.slide ul{
	padding: 0px;
	width: 100%;
	margin: 0px;
	float: left;
}

.slide ul li{
	float: left;
	list-style-type: none;
	padding: 0;
	width: 100%;
	cursor: pointer;
	font-size: 14px;
	padding: 10px 0px;
}
.slide ul li i.fa{
	font-family: mainFont;
	margin-left: 50px;
	position: relative;
}
.slide ul li i.fa:before{
	font-family: fontawesome;
	width: 50px;
	text-align: center;
	left: -50px;
	position: absolute;
}
.slide ul .sub{
	display: none;
	margin-top: 10px;
	margin-bottom: 0px;
}
.slide ul li:hover, .slide ul .sub li, .slide ul li.active{
	background-color: rgba(0, 0, 0, 0.2);
}
.slide ul .sub li:hover{
	background-color: tomato;
}
.slide ul li i{
	margin-right: 10px;
}








@media(min-width: 640px){
	.desktop .scrollCustom::-webkit-scrollbar,
	.desktop .i-panel-content::-webkit-scrollbar,
	.desktop #nav::-webkit-scrollbar{
	  width: 5px;
	}
	.desktop .scrollCustom::-webkit-scrollbar-track,
	.desktop .i-panel-content::-webkit-scrollbar-track,
	.desktop #navit-scrollbar-track{
	  background-color: transparent;
	}
	.desktop .scrollCustom:hover::-webkit-scrollbar-track,
	.desktop .i-panel-content:hover::-webkit-scrollbar-track,
	.desktop #navit-scrollbar-track{
	  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
	}
	.desktop .scrollCustom::-webkit-scrollbar-thumb:hover,
	.desktop .i-panel-content::-webkit-scrollbar-thumb:hover,
	.desktop #navar-thumb:hover{
	  background-image: -webkit-linear-gradient(
	    45deg,
	    rgba(255, 255, 255, .2) 25%,
	    transparent 25%,
	    transparent 50%,
	    rgba(255, 255, 255, .2) 50%,
	    rgba(255, 255, 255, .2) 75%,
	    transparent 75%,
	    transparent
	  )
	}
}







.header-toggle, .content-toggle, .footer-toggle{
	width: calc(100%) !important;
}
.search-toggle{
	width: 250px !important;
}
#disableContent{
	position: fixed;
	top: 50px;
	right: 0px;
	width: calc(100% - 250px);
	height: calc(100% - 75px);
	background-color: rgba(0, 0, 0, 0.5);
	cursor: no-drop;
}

@keyframes animateZoomIn{
	from{
		transform:scale(0);
	}to{
		transform:scale(1);
	}
}
@keyframes animateZoomOut{
	from{
		transform:scale(1);
	}to{
		transform:scale(0);
	}
}
@-webkit-keyframes rotating{
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating-before:before {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
.animateZoomIn{
	animation: animateZoomIn 1s;
}
.animateZoomOut{
	animation: animateZoomOut 1s;
}
.transSize, #nav ul li{
  transition: ease 1s !important;
}
.transNone, .transNone > li{
  transition: none !important;
  animation: none !important;
}
.rotate90{
  transform: rotate(90deg);
}
.rotate180{
  transform: rotate(180deg);
}
.rotate270{
  transform: rotate(270deg);
}
.rotate360{
  transform: rotate(360deg);
}


iframe.fullSize{
	border: 0px;
	width: 100%;
	height: 100%;
	position: absolute;
}



.rs-table-responsif{
	overflow-x: scroll !important;
	position: absolute;
	width: 100%;
	height: calc(100% - 30px);
	margin-top: 30px;
}
.rs-table-responsif.y{
	overflow-y: hidden;
	height: auto;
}
.rs-table-responsif.no-absolute{
	position: static;
}
.rs-table-responsif.fullSize{
	overflow: auto !important;
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: #FFF;
	z-index: 99999;
	width: 100%;
	height: 100%;
}

.panel{
	position: absolute;
	left: 0px;
	top: 0px;
	padding: 0px 5px;
	background-color: tomato;	
	width: calc(100% - 10px);
	box-shadow: 0px 0px 5px 0px #999;
}
.panel.fullSize{
	position: fixed;
	z-index: 99999;
}

.panel i{
	position: relative;
	float: right;
	line-height: 20px;
	width: 20px;
	text-align: center;
	margin: 5px 0px;
	font-size: 12px;
	background-color: rgba(0, 0, 0, 0.2);
	color: #FFF;
}
.panel i:hover{
	background-color: rgba(0, 0, 0, 0.4);
}
.panel i.left{
	float: left;
}
.panel i.text{
	width: auto;
	background-color: transparent;
	margin: 5px 10px;
}

.panel .i-panel-title, .panel .i-panel-title:hover, .panel .fa-spin{
	width: auto;
	background-color: transparent;
	font-style: normal;
	font-weight: bold;
}
.panel .fa-spin{
	margin: 0px;
	float: none;
	margin-right: 10px;
}
.i-panel-content{
	display: none;
	background-color: #FFF;
	position: absolute;
	right: 0px;
	top: 19px;
	width: 200px;
	max-height: 200px;
	overflow: hidden;
	overflow-y: auto;
	z-index: 9999;
	border: 1px solid #EEE;
}
#header .i-panel-content{
	right: -20px;
	top: 50px;
}
.ino-detail-panel i:hover .i-panel-content, .panel i:hover .i-panel-content{
	display: block;
}
.i-panel-content i:hover:after{
	border: none !important;
}
.i-panel.left .i-panel-content{
	right: auto !important;
	left: -10px !important;
}
.i-panel.left .i-panel-content:after{
	left: 10px !important;
	right: auto !important;
	top: 0px;
}
.panel .i-panel-content i.fa{
	padding-left: 30px !important;
	position: relative !important;
	margin: 0px !important;
	font-family: mainFont;
	font-weight: bold;
	float: left;
	width: 160px;
	padding: 10px 10px;
	cursor: pointer;
	background-color: #FFF;
	color: #2f3a4c;
	text-align: left;
	line-height: 15px;
	font-size: 12px;
}
.panel .i-panel-content i.fa:before{
	font-family: fontawesome !important;
	position: absolute;
	left: 0px;
    top: 50%;
    margin-top: -0.6em;
	width: 30px;
	text-align: center;
	font-weight: normal;
}
.panel .i-panel-content i.fa:hover{
	background-color: tomato;
	color: #FFF;
}
.i-panel-content > *{
	font-size: 14px !important;
	border: none;
	border-bottom: 1px solid #EEE;
}
.i-panel-content > *:last-child{
	margin-bottom: 5px !important;
	border-bottom: none !important;
}
.i-panel-content > input{
	border: 1px solid #EEE !important;
	width: 177px;
}
.i-panel-content > input:focus{
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

@media(max-width: 1080px){
}
@media(max-width: 920px){
}
@media(max-width: 720px){
}
@media(max-width: 640px){
	#header, #content, #footer{
		width: 100%;
	}
	.header-toggle{
		width: calc(100% - 250px) !important;
		right: 0px;
	}
	#header #header-nav:before{
		content: '\f061';
	}
	#nav{
		width: 0px;
		height: calc(100% - 75px);
	}
	.nav-toggle{
		width: 250px !important;
		z-index: 2 !important;
	}
}


.ui-datepicker-calendar tr:hover,
.ui-datepicker-calendar td:hover,
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover{
	background-color: #FFF !important;
}
.ui-datepicker-calendar tr{
	background-color: #FFF !important;
}
.ui-datepicker-prev, .ui-datepicker-next{
	margin: 2px;
}
.ui-datepicker-prev .fa, .ui-datepicker-next .fa{
	display:block;
	text-align:center;
	line-height:28px;
	color: #FFF;
}
.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon{
	display:none !important;
}
.ui-datepicker{
	padding: 0px
}
.ui-datepicker-header{
	border: 0px;border-radius: 0px;
	color: #FFF;
}
.ui-datepicker-calendar thead{
	background-color: #FFF;border-bottom: 2px solid;
}
.ui-datepicker-calendar tbody tr td{
	border: 0px;
}
.ui-state-default{
	text-align: center !important;
	border: 0px !important;
	margin: 5px;
	background-color: #FFF !important;
	line-height: 20px;
	border-radius: 50%;
}
.ui-state-hover{
	background-color: #EEE !important;
}
.ui-state-highlight{
	background-color: #DDD !important;
}
.ui-state-disabled .ui-state-default{
	color: #FFF !important;
}

.ui-selected{
	background-color: yellow !important;
}
.ui-datepicker-title select{
	font-size: 14px !important;
	padding: 5px 10px !important;
	background-position: right middle;
}


.marquee {
  height: 25px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;
  position: absolute;
  overflow: hidden;
  animation: marquee 10s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

li.rs-badge{
	position: relative;
	margin: 0px;
	position: absolute;
	right: 5px;
	top: 5px;
}
span.rs-badge{
	background-color: tomato;
	padding: 2.5px 5px;
	border-radius: 5px;
	font-size: 10px;
	margin: 0px 5px;
	color: #FFF;
	line-height: 14px;
}
#navUlSub .rs-badge, .rs-badge.right{
	float: right;
	margin-right: 20px;
}
._tableFixedThead{
	position: absolute;
	width: 100%;
	height: calc(100% - 30px);
}
._tableFixedThead th{
	border: none;
}
#_fixedThead i{
	border: 1px solid #AAA;
	text-align: center;
	position: absolute;
	padding: 6px;
	background-color:#CCC;
	font-style: normal;
	font-weight: bold;
	font-size: 13px;
	overflow:hidden;
	cursor: pointer;
}

.rs-checkbox{
	float: left;
	position: relative;
	padding-left: 50px;
	width: calc(100% - 30px);
	text-align: left;
	min-height: 15px;
	line-height: 15px;
	font-size: 15px;
}
.rs-checkbox > input[type="checkbox"]{
	z-index: 100;
	position: absolute;
	top: 3px;
	left: 10px;
	padding: 0px !important;
	margin: 0px !important;
	transform: scale(3, 2);
	opacity: 0;
}
i.checked{
}
.rs-checkbox > input[type="checkbox"] ~ i.checked{
	font-style: normal;
	position: absolute;
	top: 0px;
	left: 0px;
	color: #CCC;
}

.rs-checkbox > input[type="checkbox"] ~ i.checked:before{
	font-family: fontAwesome;
	font-size: 30px;
	content: '\f204';
	width: 40px !important;
	height: 40px !important;
}
.rs-checkbox > input[type="checkbox"]:checked ~ i.checked:before{
	content: '\f205';
}
.rs-checkbox > input[type="checkbox"] ~ p{
	margin: 0;
	padding: 4px 0 0 40px;
	text-align: left !important;
}

.row button{
	margin-right: 2px;
	margin-bottom: 5px;
}
i.col-fa{
	padding: 5px;
	margin: 5px;
	border: 1px solid #CCC;
	border-radius: 5px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 21px;
	cursor: pointer;
}

ul.fa{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
	float: left;
}
ul.fa > li{
	position: relative;
	font-family: mainFont !important;
  transition: ease 1s !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	font-size: 12px;
	line-height: 18px;
	margin: 0px;
	padding: 10px;
	padding-left: 40px;
	width: calc(100% - 50px);
	float: left;
  cursor: pointer;
  overflow: hidden;
  background-color: #FFF;
}
ul.fa > li:nth-child(even){
  background-color: #EEE;
}
ul.fa > li.disable{
	background-color: red;
}
ul.fa > li.tab{
	padding-left: 70px;
	width: calc(100% - 80px);
}
ul.fa > li:hover{
	background-color: rgba(0, 0, 0, 0.1);
}
ul.fa > li:before{
	font-family: fontAwesome !important;
	position: absolute;
	left: 10px;
	width: 20px;
	text-align: center;
}
ul.fa > li.tab:before{
	left: 40px;
}
ul.fa > li.process{
	padding-left: 10px;
	width: calc(100% - 20px);
	padding-bottom: 20px;
	background-color: rgba(0, 0, 0, 0.15);
}
ul.fa > li.process > .fa-spin{
	width: 20px;
	text-align: center;
}
ul.fa > li.process > .bar{
	content: ' ';
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 10px;
	width: 0%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.1);
}
ul.fa > li.process > .bar:before{
	content: ' ';
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 200%;
	overflow: hidden;
	background-size: auto 25px;
	background-repeat: repeat;
  animation: marquee-i 10s linear infinite;
}
@keyframes marquee-i {
  0% { left: -100%; }
  100% { left: 0; }
}

@media(max-width: 150px){
	body *{
		display: none;
	}
	body #footer{
		display: block !important;
	}
	body:before, body:after{
		position:absolute;
		left:0px;
		padding: 0px 10px;
		width:calc(100% - 20px);
		text-align: center;
		line-height: 20px;
	}
	body:before{
		content: 'Maaf. Namun Resolusi Lebar Minimal Untuk Sistem Ini 350 pixel.';
		bottom:0px;
		height:50%;
	}
	body:after{
		font-family: fontAwesome;
		font-size: 150px;
		content: '\f119';
		bottom: 50%;
		height: 100px;
	}
}