html, body, div, applet, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	line-height: 18px;
	outline: none;
	list-style:none;
	vertical-align: baseline;
}
.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }
* ::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
* ::-webkit-scrollbar-track {
	box-shadow: inset 0 0 1.5px grey;
	border-radius: 10px;
}
* ::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 10px;
}
* ::-moz-scrollbar-thumb:hover {
	background: grey;
}
* ::-moz-scrollbar {
	width: 4px;
	height: 4px;
}
* ::-moz-scrollbar-track {
	box-shadow: inset 0 0 1.5px grey;
	border-radius: 10px;
}
* ::-moz-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 10px;
}
* ::-moz-scrollbar-thumb:hover {
	background: grey;
}
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html body .card{
	border-radius: unset;
}
html body .card-header{
	border-radius: 0 0 0 0 !important;
}
.download_dokumen{
    position: relative;
    float: right;
    width: auto;
    border: 1px solid #66b1fc;
    color: #087efb !important;
    background: #f0f7ff;
    border-radius: 5px;
    padding: .3rem 1rem;
    top: -.5rem;
    transition: all .3s;
}
.download_dokumen:hover{
    background: #087efb;
    color: #fff !important;
}
.btn_flt {
	position: relative;
	float: right;
	width: auto;
	border: 1px solid #66b1fc;
	color: #087efb !important;
	background: #f0f7ff;
	border-radius: 5px;
	padding: .3rem 1rem;
	top: -.0.1rem;
	transition: all .3s;
	height: 60%;
}
.btn_flt:hover{
    background: #087efb;
    color: #fff !important;
}
.download_dokumen_history{
    position: relative;
    float: right;
    width: auto;
    border: 1px solid #66b1fc;
    color: #087efb !important;
    background: #f0f7ff;
    border-radius: 5px;
    padding: .3rem 1rem;
    top: -.5rem;
    transition: all .3s;
    margin: .8rem;
}
.download_dokumen_history:hover{
    background: #087efb;
    color: #fff !important;
}
.foto{
    position: relative;
    float: left;
    width: 75%;
    padding-bottom: 1rem;
    text-align: left !important;
}
.lslide{
	text-align: center;
	height: 300px;
	overflow: auto;
} 
.lslide img{
	display: inline-block;
	width: 80%;
}
.target_name_setting{
	position: absolute;
    top: 5rem;
    left: 10rem;
    width: 170px;
    height: auto;
    text-align: center;
    font-style: italic;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.target_name_input{
	position: absolute;
	border: unset !important;
	top: .1rem;
	left: 10rem;
	width: 170px !important;
	height: auto;
	font-style: italic;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.target_name{
	position: absolute;
	top: 0.85rem;
	left: 10rem;
	width: 170px;
	height: auto;
	font-style: italic;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 100;
}
.lds-ring-wrap{
  position: fixed;
  /*position: absolute;*/
  top: 0;
  right: 0;
  width: 83%;
  height: 100%;
}
.lds-ring {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  margin: 20px;
  border: 3px solid #c3c3c3;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #c3c3c3 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
.lds-ring span{
  position: absolute;
  bottom: -1rem;
  width: 100%;
  text-align: center;
  font-size: 11px;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.pengaturanumum_wrapper{
	background: #fff;
	border-radius: 6px;
	box-shadow: 0px 6px 10px #0000002e;
}
.pengaturanumum_wrapper .sub_formdata{
	max-height: unset !important;
}
.pengaturanumum_wrapper textarea{
	height: 150px;
}
.pengaturanumum_wrapper .button_formdata_wrap{
	position: sticky;
    bottom: 0;
}
.please_wait{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%; 
	height: 20px;
	color: #333;
	font-style: italic;
	text-align: center;
}
button[disabled]{
	cursor: not-allowed;
}
.jconfirm_broadcast{
	width: 60%;
	margin: 0 auto;
}
.broadcast_button{
	position: absolute;
	bottom: .3rem;
	right: 1rem;
	width: 210px;
	height: auto;
	cursor: pointer;
	z-index: 2;
}
.broadcast_button span{
	position: relative;
	float: left;
	width: 100%;
	padding: .5rem;
	padding-right: 75px;
	text-align: right;
	border-radius: 25px;
	top: -.8rem;
	background: #f3545e;
	font-weight: 600;
	z-index: 1;
	box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	color: #fff;
	transition: all .3s;
}
.broadcast_button:hover span{
	background: #e23c46;
}
.icon_broadcast{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 60px;
	height: 60px;
	background: #ffb5b5;
	border: 2px solid #ea696a;
	border-radius: 50%;
	padding: 1rem;
	box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	z-index: 2;
}
.icon_broadcast img{
	width: 100%;
}
.broadcast_wrap{
	position: relative;
	float: left;
	width: 100%;
}
.broadcast_content{
	position: relative;
	float: left;
	width: 100%;
	height: 53vh;
}
.ilustration_broadcast{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 100%;
    opacity: .3;
    background: url(../images/ilustration_broadcast.svg);
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
}
.box_broadcast_content:first-child{
	position: relative;
	float: left;
	width: 50%;
    height: 53vh;
	text-align: center;
	padding: 0 1rem;
}
.image_broadcast{
	display: inline-block;
	width: 100px;
	margin-top: 5rem;
}
.image_broadcast img{
	width: 100%;
}
.caption_broadcast{
	position: relative;
    width: 100%;
    display: inline-block;
    padding: 0 1rem;
}
.caption_broadcast span:first-child{
	position: relative;
	float: left;
	width: 100%;
	font-weight: 700;
	font-size: 14px;
    color: #279df5;
}
.caption_broadcast span:last-child{
	position: relative;
	float: left;
	width: 100%;
	font-size: 14px;
	font-style: italic;
	padding-top: .5rem;
    color: #279df5;
}
.box_broadcast_content:last-child{
	position: relative;
	float: left;
	width: 50%;
	padding: 0 .75rem;
}
.sub_box_broadcast_content{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 1rem;
	border-radius: 5px;
	border: 1px solid #e0e0e0;
	border-top: 3px solid #2196F3;
	padding: .75rem 1rem;
}
.title_broadcast{
	position: relative;
	float: left;
	width: 100%;
	font-size: 18px;
	padding-bottom: .5rem;
	color: #2196F3;
	margin-bottom: .5rem;
	border-bottom: 1px dashed #ccc;
}
.title_broadcast i{
	position: relative;
	margin-right: .3rem;
}
.list_broadcast_wrap{
	position: relative;
	float: left;
	width: 100%;
	height: 40vh;
	overflow: auto;
}
.list_broadcast_wrap ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.list_broadcast_wrap ul li{
	position: relative;
	float: left;
	width: 100%;
	padding-bottom: .5rem;
    padding-left: 2rem;
	cursor: pointer;
}
.list_broadcast_wrap ul li:before{
	content: "";
	position: absolute;
	top: .2rem;
	left: 0;
	width: 10px;
	height: 10px;
	background: #279df5;
	border-radius: 50%;
}
.list_broadcast_wrap ul li:after{
	content: "";
	position: absolute;
	top: .2rem;
	left: 4px;
	width: 1px;
	height: 100%;
	background: #279df5;
}
.list_broadcast_wrap ul li:last-child:after{
	display: none;
}
.list_broadcast{
	position: relative;
	float: left;
	width: 100%;
}
.list_broadcast h1{
	position: relative;
	float: left;
	width: 100%;
	font-size: 14px;
	color: #8c8c8c;
	padding-bottom: .3rem;
    padding-right: 2rem;
	transition: all .3s;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.list_broadcast h1 i{
	position: relative;
	margin-left: .2rem; 
	color: #69bfff;
    right: 0;
}
.list_broadcast h1:hover{
	color: #279df5;
}
.date_list_broadcast{
	position: relative;
	float: left;
	width: 50%;
	text-align: left;
	color: #aaa;
    font-style: italic;
    font-size: 11px;
}
.time_list_broadcast{
    position: relative;
    float: left;
    width: 50%;
    text-align: right;
    color: #aaa;
    font-style: italic;
    font-size: 11px;
}
.label_default{
	padding: .2rem .5rem;
	background: #ebfaff;
	color: #1a7cfb;
	border-radius: 3px;
	margin-left: .3rem;
}
.d-flex{
	display: flex;
}
.justify-content-between{
	justify-content: space-between;
	align-items: center;
}
.w-100{
	width: 100% !important;
}
.w-40{
	width: 40% !important;
}
.w-50{
	width: 50% !important;
}
.text-normal{
	font-weight: 500;
}
.text-bold{
	font-weight: 600;
}
.d-flex input{
	margin-bottom: 0 !important;
}
.text-white{
	color: #fff !important;
}
.text-center{
	text-align: center !important;
}
.mx-auto{
	margin: 0 auto !important;
}
.mt-0{
	margin-top: 0 !important;
}
.mt-10{
	margin-top: 10px !important;
}
body{
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 12px;
	color:#535c68;
	background:#f9fbfd;
}

p{
	margin-bottom: 20px;
	line-height: 1.5em;
}
h3{
}

a{
	text-decoration: none;
	color: #1275ff;
}
a:hover{
	color: #727272;
}
/*svg {
  fill: currentColor;
  height: auto;
  max-width: 66vmin;
  transform-origin: center;
  width: 66%;
}*/
.hide {
	display: none;
}
.wrapper-file-upload{
  position: relative;
  float: left;
  width: 370px;
  height: 29px;
  min-height: 1px;
  margin: 0 0 0 0;
  margin-bottom: 10px;
}

.file-upload-form{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.file-upload-mark-form{
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border: 1px solid #aaa;
  border-radius: 3px;
  /* z-index: 1; */
}

.file-upload-form:hover ~ .file-upload-mark-form{
  border: 1px solid #ccc;
}

.file-upload-mark-form h6{
  font-size: 14px;
  font-weight: 100;
  margin: 0;
  margin-left: 0px;
  padding: 4px 0;
  margin-left: 30px;
}
.icon-upload-files .fa, .icon-upload-files .fas, .icon-upload-files .far {
	position: absolute;
	left: 10px;
	top: 7px;
	font-size: 15px;
	color: #444;
}
.lihatfile{
	color: #fff !important;
}
.lihatfile:hover{
	text-decoration: none !important;
}
.button_formdata_wrap{
	position: relative;
	float: left;
	width: 100%;
	background: #fff;
	padding: 1rem 0;
	padding-bottom: 0;
	margin-top: 0;
	/*position: sticky;
	float: left;
	width: 100%;
	bottom: -.35rem;
	background: #fff;
	padding-top: .5rem;
    padding-bottom: .5rem;
    margin-top: 2rem;*/
}
input[value=Batal]{
    border: 1px solid #1a7cfb !important;
    background: #fff !important;
    color: #1a7cfb !important;
    transition: all .3s;
}
input[value=Batal]:hover{
	background: #1a7cfb !important;
	color: #fff !important;
}
.pure-button {
	display:inline-block;
	*display:inline;
	zoom:1;
	/*line-height:normal;*/
	line-height: 1.30;
	white-space:nowrap;
	vertical-align:baseline;
	text-align:center;
	cursor:pointer;
	-webkit-user-drag:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.pure-button::-moz-focus-inner {
	padding:0;
	border:0
}
.pure-button {
	font-family:inherit;
	/*font-size:100%;*/
	font-size:13px;
	/**font-size:90%;*/
	font-weight: 100;
	padding: .4rem .5rem; 
	/**overflow:visible;*/
	padding:.5em 1em;
	color:#444;
	/*color:rgba(0,0,0,.8);*/
	/**color:#444;*/
	/*border:1px solid rgba(0,0,0,0.2);*/
	/*border:0 rgba(0,0,0,0);*/
	background-color:#E6E6E6;
	text-decoration:none;
	border-radius:3px;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	-webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	-moz-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
}
.pure-button-hover,.pure-button:hover,.pure-button:focus {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#1a000000',GradientType=0);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
	background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
	background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));
	background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
	background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))
}
.pure-button:focus {
	outline:0
}
.pure-button-active,.pure-button:active {
	box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
}
.pure-button[disabled],.pure-button-disabled,.pure-button-disabled:hover,.pure-button-disabled:focus,.pure-button-disabled:active {
	border:0;
	background-image:none;
	filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
	filter:alpha(opacity=40);
	-khtml-opacity:.4;
	-moz-opacity:.4;
	opacity:.4;
	cursor:not-allowed;
	box-shadow:none;
}
.pure-button-hidden {
	display:none;
}
.pure-button::-moz-focus-inner {
	padding:0;
	border:0;
}
.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected {
	background-color: #1a7cfb;
    border: 1px solid #1a7cfb;
	color:#fff;
    border-radius: 4px;
    margin-right: .3rem;
}
.pure-button-red,.pure-button-selected,a.pure-button-red,a.pure-button-selected {
	background-color: #fff;
    color: #4caf50;
    border: 1px solid #4caf50;
    transition: all .3s;
}
.pure-button-red:hover,.pure-button-selected:hover,a.pure-button-red:hover,a.pure-button-selected:hover{
	background-color: #4caf50;
    color: #fff;
    border: 1px solid #4caf50;
}
.pure-button-green,.pure-button-selected,a.pure-button-green,a.pure-button-selected {
	background-color:#10c469;
	color:#fff;
}
.pure-button-yellow,.pure-button-selected,a.pure-button-yellow,a.pure-button-selected {
	background-color:#f9c851;
	color:#fff;
}
.pure-button-blue,.pure-button-selected,a.pure-button-blue,a.pure-button-selected {
	background-color:#35b8e0;
	color:#fff;
}
.pure-button-grey,.pure-button-selected,a.pure-button-blue,a.pure-button-selected {
	background-color:#fff;
	color:#555;
}
.inputWrapper .add {
    right: 60px !important;
    top: 10px !important;
}
.inputWrapper .remove {
    right: 30px !important;
    top: 10px !important;
}
.app_default #formdata input[type=submit]{
    position: absolute;
    left: 0;
	background-color:#6fb374;
	color:#fff;
    border-radius: 4px;
    margin-right: .3rem;
    border: unset;
    margin-top: 1rem;
    transition: all .3s;
}
.app_default #formdata input[type=submit]:hover{
	background-color: #4caf50;
    color: #fff;
}
.red {
	background:linear-gradient(60deg,#f06d6a,#e53935);
	box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(244,67,54,.4);
	-webkit-box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(244,67,54,.4);	
	}
.green {
	background:linear-gradient(60deg,#4BC846,#3DBC38);
	box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(76,175,80,.4);
	-webkit-box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(76,175,80,.4);
	}
.blue {
	background:linear-gradient(60deg,#00aeef,#0089BD);
	box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4);
	-webkit-box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0,188,212,.4);
	}
.yellow {
	background:linear-gradient(60deg,#ffa726,#fb8c00);
	box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(255,152,0,.4);
	-webkit-box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(255,152,0,.4);
	}
.violet {
	background:linear-gradient(60deg,#B507FF,#9400D3);
	box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(122, 28, 137, 0.4);
	-webkit-box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(122, 28, 137, 0.4);
	}
.grey {
	background:linear-gradient(60deg,#BABABA,#A0A0A0);
	box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(138, 138, 138, 0.4);
	-webkit-box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(138, 138, 138, 0.4);
	}
.purple {
	background:linear-gradient(60deg,#E172AE,#CC2F83);
	box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(170, 0, 212, 0.4);
	-webkit-box-shadow:0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(170, 0, 212, 0.4);	
}

/* MENU ================================================*/
#cssmenu {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
#cssmenu {
	/*margin-top:10px;*/
}

#cssmenu ul li img {
    top: 10px;
    left: 9px;
    position: absolute;
    z-index: 5;
    width: 16px;
    height: 16px;
	display:none;
}

#cssmenu ul li img:hover {
    color: #fff
}

#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#cssmenu ul li a{
	margin: 10px 0;
    margin-top: 6px;
	background: #fff url(../images/arsip.png)no-repeat 20px 9px;
	border-radius: 0;
    filter: hue-rotate(80deg);
	/*box-shadow: 4px 4px 10px 0 rgba(0,0,0,.1),4px 4px 15px -5px rgba(21,114,232,.4) !important;
	-webkit-box-shadow: 4px 4px 10px 0 rgba(0,0,0,.1),4px 4px 15px -5px rgba(21,114,232,.4) !important;
	-moz-box-shadow: 4px 4px 10px 0 rgba(0,0,0,.1),4px 4px 15px -5px rgba(21,114,232,.4) !important;*/
}

#cssmenu ul ul {
    display: none;
    margin-top: -.15rem;
}

.align-right {
    float: right;
}

#cssmenu > ul > li > a {
    padding: 9px 32px;
    margin-bottom: 0;
    cursor: pointer;
    z-index: 2;
    font-size: 13px;
	line-height:14px;
    font-weight: normal;
    text-decoration: none;
    color: #515151 !important;
    font-weight: 500;
    text-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);
    border-left: 3px solid #fff;
    padding-left: 2.75rem;
    transition: all .3s;
}

#cssmenu > ul > li > a:hover {
	/*color:#9c9c9c;*/
	background: #f5f5f5 url(../images/arsip.png)no-repeat 20px 9px;
}

#cssmenu > ul > li.active > a,
#cssmenu > ul > li.focus > a,
#cssmenu > ul > li.open > a {
	color:#464646;
}

#cssmenu > ul > li.open > a {
    border-bottom: 0px solid #d9d9d9;
    border-left: 3px solid #00ff95;
    background-color: rgb(0 255 149 / 25%);
}

#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
    border-bottom: 0px solid #232323;
}

.holder {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.holder::after,
.holder::before {
    display: block;
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    right: 15px;
    z-index: 10;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.holder::after {
    top: 13px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
}

#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
    border-color: #eeeeee;
}

#cssmenu > ul > li ul{
	background: #dbf1ff;
}

.holder::before {
    top: 14px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-top-color: inherit;
    border-left-color: inherit;
}

#cssmenu ul ul li img {
    left: 34px;
    top: 13px;
    position: absolute;
    z-index: 5;
    width: 4px;
    height: 7px;
	display:none;
}

#cssmenu ul ul li li img {
    left: 60px;
    top: 10px;
    position: absolute;
    z-index: 5;
    width: 15px;
    height: 15px;
}
#cssmenu ul ul li a:last-child{
	margin-bottom: 1rem;
}
#cssmenu ul ul li a {
    cursor: pointer;
    border-bottom: 0px solid #ccc;
    border-left: 0px solid #ccc;
    border-right: 0px solid #ccc;
    padding: 10px 36px;
    padding-left: 3.5rem;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    border-radius: unset;
    z-index: 1;
    text-decoration: none;
    font-size: 12px;
	line-height:14px;
    color: #575962 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
	border-left:none;
}
#cssmenu ul ul li:first-child a{
	padding-top: .9rem;
    background: rgb(255 255 255 / 68%) url(../images/bullet.png)no-repeat 40px 17px;
}
#cssmenu ul ul li:first-child a:hover{
    background: rgb(255 255 255 / 50%) url(../images/bullet.png)no-repeat 40px 17px;
}
#cssmenu ul ul li:last-child a{
	border-radius: 0 0 5px 5px;
}
#cssmenu ul ul li a {background:rgb(255 255 255 / 68%) url(../images/bullet.png)no-repeat 40px 13px;filter: hue-rotate(16deg);}
#cssmenu ul ul li a:hover {background:rgba(255 255 255 / 50%) url(../images/bullet.png)no-repeat 40px 13px;}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
	background: rgba(255 255 255 / 50%) url(../images/bullet.png)no-repeat 40px 13px;
}

#cssmenu ul ul li:first-child > a {
    box-shadow: none;
    margin-top: 5px;
}

#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
    border-bottom: 0;
}

#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
    border-bottom: 0px solid #32373e;
}

#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
    border-bottom: 0;
}

#cssmenu ul ul li.has-sub > a::after {
    display: block;
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    right: 20px;
    z-index: 10;
    top: 11.5px;
    border-top: 2px solid #eeeeee;
    border-left: 2px solid #eeeeee;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {

}

#cssmenu ul ul ul li a {
    background: #54666F;
    padding-left: 83px;
}

.container{
/*	width: 100%;
	position:relative;
	padding:0px;
	height:100vh;
	float:left;
	overflow:hidden;
	background: #f9fbfd;*/
}
	/* .container:before {
		content: '';
		background:linear-gradient(-45deg,#06418e,#1572e8) !important;
		position:absolute;
		left:0;
		top:57px;
		width:100%;
		height:150px;
		z-index:0;
	} */
.bg-home svg {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 0;
}

.bg-home svg {
  path 
    transition: .1s;
  }

  &:hover path {
    d: path("M 800 300 Q 400 250 0 300 L 0 0 L 800 0 L 800 300 Z");
  }
  
.wrapper {
	width:100%;
	margin:0 auto;
	width: 100%;
	margin: 0 auto;
	height: 100vh;
	overflow: hidden;
}

.header{
	position:fixed;
	width:100%;
	top:0;
	right:0;
	height: 56px;
  padding-right: 0;
	border-bottom:0px solid rgba(0,0,0,.125);
	background:#fff;
	box-shadow: 0 0 5px rgba(18,23,39,.5);
	-moz-box-shadow:0 0 5px rgba(18,23,39,.5);
	-webkit-box-shadow:0 0 5px rgba(18,23,39,.5);
	z-index: 2;
}

	.header h2 {
		width:auto;
		padding:15px;
		float:left;
		font-size:30px;
		line-height:38px;
		font-weight:400;
		color:#fff;
		text-shadow:0 1px 1px rgba(0,0,0,0.4);
	}
.logo {
	width: 16%;
	float: left;	
  padding:.4rem 0;
  padding-left: 1rem;
	overflow: hidden;
	position: absolute;
	display: flex;
	z-index: 4;
}
	
.logo_app{
	position: relative;
	width: 45px;
	height: 45px;
	float: left;
	padding: 0;
	border-radius: 50%;
	background: #fff;
}	
	.logo_app img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 90%;
		height: auto;
		margin: auto;
	    border: 1px solid #aaa;
	    border-radius: 50%;
	}
.logo > span{
	position: relative;
	float: left;
	width: 145px;
	color: #1a7cfb;
	font-size: 12px;
	font-weight: 600;
	padding: .4rem .5rem;
	line-height: 34px;
}
/* Main */
.front_home {
	position: relative;
	float: left;
	width:100%;
}
	.front_home h1 {
		text-align: center;
		font-size: 22px;
		line-height: 24px;
		font-weight: 400;
		color: #666;
	}
	.front_home, .welcome {color: #515151;}
	.front_home p, .welcome p {color: #fff;}
.menu {
	float:right;
	position: absolute;
	top: 57px;
	left: 0;
	/*width: 16%;*/
	width: 220px;
	height: 100vh;
	padding-right: 0;
	padding-left: 0;
  /*width: 83.9%;
  padding-right: 12.5rem;
  padding-left: .5rem;*/
  background: #1a7cfb;
  transition: all .3s;
}
	.wraphead {
		height:57px;
    width: 100%;
		position:relative;
		float:left;
		padding: 0;
	}
	/*.front-title::before {
		position:absolute;
		top:0;
		left:-34px;
		display:block;
		width:40px;
		height:57px;
		content:"";
		transform:skewX(30deg);
		-webkit-transform:skewX(30deg);
		-moz-transform:skewX(30deg);
		-ms-transform:skewX(30deg);
		-o-transform:skewX(30deg);		
	}
	.front-title::after {
		position:absolute;
		top:0;
		right:-34px;
		display:block;
		width:40px;
		height:57px;
		content:"";
		transform:skewX(30deg);
		-webkit-transform:skewX(30deg);
		-moz-transform:skewX(30deg);
		-ms-transform:skewX(30deg);
		-o-transform:skewX(30deg);				
	}*/
	.front-title {
		position:relative;
		color:#455a64;
		font-size:22px;
		line-height:66px;
		padding:0;
		width: 100%;
	}
.avatar_user_wrap{
	position: fixed;
    width: 180px;
    padding-right: 2.75rem;
    margin-left: .75rem;
    /*border-left: 1px solid rgb(255 255 255 / 56%);*/
    top: .7rem;
    right: 2rem;
    z-index: 2;
	/*position: relative;
    float: left;
    width: 100%;
    padding-right: 2.75rem;
    margin-left: .75rem;
    border-left: 1px solid rgb(255 255 255 / 56%);*/
}
.avatar_info{
	position: relative;
	float: right;
	width: 85px;
	max-width: 85px;
    padding-top: 0;
}
.avatar_info span:first-child{
	position: relative;
  float: left;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #515151;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.avatar_info span:last-child{
	position: relative;
  float: left;
  width: 100%;
  font-size: 12px;
  color: #515151;
  text-align: right;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.avatar_image{
	position: absolute;
	top: 0;
	right: 0;
	color: #888;
	font-size: 35px;
	cursor: pointer;
}
.layer_shadow_notif{
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: transparent;
}
.notification_menu{
	display: none;
	position: relative;
	float: right;
	width: auto;
	color: #fff;
	font-size: 18px;
	padding-right: 1rem;
	top: .5rem;
	cursor: pointer;
}
.notification_point{
	position: absolute;
	top: -.2rem;
	right: .6rem;
	width: 8px;
	height: 8px;
	background: #91dc3a;
	border-radius: 50%;
}
.menu ul li a.logout{
	display: none;
	position: fixed !important;
  top: 3.7rem;
  right: 1.5rem;
  width: 110px;
	height: auto;
	background: #fff;
	color: #808080;
	padding: 1rem;
	border-radius: 4px;
	font-size: 14px;
	transition: all .3s;
	box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	z-index: 999;
}
.menu ul li a.logout .icon img {
    filter: brightness(1);
}
.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
}

.menu ul li {
  float: left;
  padding: 1rem .75rem;
	margin: 1px;
	vertical-align: middle;
	margin-right: 0;
	width: 100%;
}
/*.menu ul li:nth-child(6){
	position: fixed;
    top: .7rem;
    right: 0;
    width: 230px;
    padding: 0;
    padding-right: 5%;
    cursor: pointer;
}*/
.menu li a {
	position: relative;
	display: flex;
	font-size: 13px;
  color: #fff !important;
	vertical-align: top;
	text-shadow: 0 7px 10px -5px rgba(0,188,212,.4);
	outline-color: transparent;
}
.menu ul li a:hover {
	text-decoration: none;
	text-shadow:0 7px 10px -5px rgba(0,188,212,.4);
	/*color: #fff;*/
}
.menu ul li a .icon img{
	/*filter: brightness(4);*/
}
.menu li a .fa, .menu li a .fas, .menu li a .far {
	margin-right: 5px;
}
.icon {
	width: 18px;
	height: 18px;
	float: left;
	margin-right: 10px;
	position: relative;
}
.icon img {
	max-width:100%;
}
.wraphead .front-title > ul > li > a.library .label_menu:after,
.wraphead .front-title > ul > li > a.pesantren .label_menu:after,
.wraphead .front-title > ul > li > a.broadcast .label_menu:after,
.wraphead .front-title > ul > li > a.transaksi .label_menu:after, 
.wraphead .front-title > ul > li > a.documentgenerator .label_menu:after,
.wraphead .front-title > ul > li > a.pengaturan .label_menu:after,
.wraphead .front-title > ul > li > a.report .label_menu:after{
    content: '';
    position: absolute;
    top: 5px;
    right: 0;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 3px solid #fff;
}
.menu_slim .wraphead .front-title > ul > li > a{
	position: relative;
}
.menu_slim .wraphead .front-title > ul > li > a.logout .label_menu{
	visibility: unset !important;
	position: relative;
	background: unset;
	border: unset;
	left: 0;
	top: 0;
	display: unset !important;
	padding: 0;
	border-radius: unset;
	box-shadow: unset;
	color: #515151;
}
.menu_slim .wraphead .front-title > ul > li > a.logout .label_menu:before{
	display: none;
}
.menu_slim .wraphead .front-title > ul > li > a .label_menu{
	display: none;
	visibility: hidden !important;
	position: absolute;
  background: #e5f0ff;
  border: 1px solid #a8ceff;
  color: #1a7cfb;
  left: 2.8rem;
  top: -.4rem;
  display: block !important;
  padding: .35rem 1rem;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 25%);
}
.menu_slim .wraphead .front-title > ul > li > a:hover .label_menu{
	visibility: visible !important;
}
.menu_slim .wraphead .front-title > ul > li > a .label_menu:before {
    content: '';
    position: absolute;
    top: 9px;
    left: -14px;
    border-bottom: 5px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid #e5f0fe;
    border-top: 5px solid transparent;
    filter: drop-shadow(0px 0px 0px #1a7cfb);
}
.arrow_sidebar_show{
	display: none;
	position: absolute;
  right: -1.3rem;
  bottom: 4rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f9fbfd;
  color: #1a7cfb;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  cursor: pointer;
  transition: all .3s;
}
.arrow_sidebar_show:hover{
	background: #1a7cfb;
	color: #fff;
}
.arrow_sidebar{
  position: absolute;
  right: -1.3rem;
  bottom: 4rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f9fbfd;
  color: #1a7cfb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  cursor: pointer;
  transition: all .3s;
}
.arrow_sidebar:hover{
	background: #1a7cfb;
	color: #fff;
}

/*layout */
.contentlayout{
	position: relative;
    z-index: 1;
    float: left;
    width: 100%;
    height: 100vh;
    overflow: unset;    
/*	width: 100%;
	position: relative;
	float: left;*/
}
.homepage {
	width:100%;
	height:100vh;
	float:left;
	position:relative;

}

.user{
		width: calc(100% - 12%);
		padding:15px 5px;
		position:relative;
		border-bottom: 1px solid #f1f1f1;
		float: left;
		margin-top:57px;
		margin-left: 6%;
	}
		.userinfo {
			width:100%;
			margin:0 auto;
		}
		.userinfo ul {
			list-style:none;
			margin:0;
			padding:0;
		}
		.userinfo ul li {
			width:100%;
			float: left;
			font-size:11px;
			line-height:normal;
			padding:5px;
			border-radius:100%;
			border:0px solid #d9d9d9;
		}
		.userinfo ul li img{
			max-width:100%;
		}
		.userinfo ul li.nama {
			width:60%;
			height:auto;
			float: left;
			background:none;
			border:0px solid #d9d9d9;
			border-radius:0%;
			padding: 2px;
		}
			.userinfo ul li.nama h4 {
				font-size: 13px;
				font-weight: 400;
				text-align: left;
			}
		.userinfo ul li.pict {
			width:25%;
			height:auto;
			border:0px solid #fff;
			padding:4px;
			float: left;
			overflow:hidden;
			background:none;
		}
		.userinfo ul li.pict img {
			width:40px;
			height:40px;
			border-radius:100%;			
			background:#53585c;
			border:0px solid #171b22;
		}
		.userinfo ul li a:hover {
			text-decoration:none;
			color:#1784c7;
		}
.kiri{
	width: 220px;
	height:91vh;
	border-right: 0px solid rgba(0,0,0,0.3);
	padding: 0;
	margin:0px;
	margin-top: 3.6rem;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	/*background:linear-gradient(185deg,rgb(26 124 251 / 85%) 0,rgb(26 124 251 / 51%) 85%);*/
	background: #fff;
	box-shadow: 0 8px 24px #e5e4e6;
	-webkit-box-shadow: 0 8px 24px #e5e4e6;
	-moz-box-shadow: 0 8px 24px #e5e4e6;
	position:absolute;
	top:0;
	left:2.8rem;
	transition: all .3s;
	z-index: 2;
}
.date_kiri{
	position: relative;
    float: left;
    width: 100%;
    font-size: 13px;
    color: #fff;
    padding: .65rem 1rem;
    padding-bottom: 0;
}
.date_kiri i{
	margin-right: .3rem;
}
.bg_kiri{
	display: none;
	position: absolute;
	bottom: 3rem;
	left: -2rem;
	width: 258px;
	height: 260px;
	opacity: .3;
	background: url(../images/bg_kiri.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: scroll;
}
.kanan{
	width: 100%;
	height: 91vh;
	overflow-y: auto;
	overflow-x: hidden;
	border: 0px solid #dedede;
	margin: 0px;
	float: left;
	position: relative;
	right: 0;
	top: 57px;
	bottom: 0;
	background: transparent;
	z-index: 1;
	border-top-left-radius: 0px;
	padding: 2rem;
	padding-bottom: 0;
	padding-left: 300px;
  padding-right: 30px;
	transition: all .3s;
	/*width: 83%;
    height: 91vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0px solid #dedede;
    margin: 0px;
    float: left;
    position: absolute;
    right: 0;
    top: 57px;
    bottom: 0;
    background: transparent;
    z-index: 1;
    border-top-left-radius: 0px;
    padding: 2rem;
    padding-bottom: 6rem;*/
}
.kanan:before{
	display: none;
	content: "";
	position: fixed;
	bottom: 0;
	right: -6rem;
	width: 414px;
	height: 280px;
	background: url(../images/bg_dashboard.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: scroll;
}
.kanan > h1.juduldata{
	position: absolute;
  top: 4.25rem;
  left: 300px;
  width: auto;
  background: url(../images/files.png) no-repeat 5px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #515151;
  padding: 1.1rem 2rem;
  opacity: .7;
  z-index: -1;
  transition: all .3s;
}
.kanan > .data > .button_input_wrap:before	{
	content: "";
	position: absolute;
	top: .4rem;
	right: 7rem;
	width: 1px;
	height: 38px;
	background: #c3c3c3;
}
.dataTables_paginate{
	position: absolute;
	top: .6rem;
	right: 1rem;
	width: auto;
	height: auto;
}
/*.datatables_search_wrap{
	position: relative;
	float: right;
}*/
.dataTables_filter{
	position: absolute;
    top: -2.65rem;
    right: 6.5rem;
    height: auto;
    width: auto;
}
.dataTables_filter_side_0{
	right: 0rem !important;
}
.dataTables_filter_side_1{
	right: 12.5rem !important;
}
.dataTables_filter_side_2{
	right: 18.3rem !important;
}
.dataTables_filter_side_3 {
    right: 23rem !important;
}
.kanan > .data .juduldata{
	position: relative;
	float: left;
	width: 100%;
	background: url(../images/folder_label.png) #f9fbfd no-repeat 5px 16px;
	padding: 1rem;
	font-size: 16px;
	padding-left: 2rem;
    border-bottom: 1px solid #e6e6e6;
}
	.corner_wrap{
	    position: relative;
	    z-index: 2;
        align-items: center;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: flex-start;
	}
	.opsi_content_wrap{
		position: relative;
	    float: right;
	    width: auto;
	}
	.opsi_content{
		position: relative;
	    float: right;
	    width: auto;
	    background: transparent;
	    border: unset;
	    font-size: 14px;
	    color: #515151;
	    margin: 1.05rem .5rem 0 .5rem;
	    outline: none;
	    transition: all .3s
	}
	.dropdown_opsi_content{
		display: none;
	    position: absolute;
	    top: 3rem;
	    right: 0rem;
	    width: 200px;
	    height: auto;
	    background: #fff;
	    padding: .5rem 1rem;
	    border-radius: 5px;
	    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	    -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	    -moz-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	    z-index: 1;
	}
	.dropdown_opsi_content ul{
		list-style: none;
	}
	.dropdown_opsi_content ul li{
	    position: relative;
	    float: left;
	    width: 100%;
	}
	.dropdown_opsi_content ul li button{
		position: relative;
	    float: left;
	    width: 100%;
	    background: transparent;
	    border: unset;
	    padding: .5rem;
	    font-size: 14px;
	    color: #515151;
	    text-align: left;
	    outline: none;
	    transition: all .3s;
	}
	.dropdown_opsi_content ul li button:hover{
		color: #8a8a8a;
	}
	.dropdown_opsi_content ul li button i{
		position: relative;
		margin-right: .3rem;
	}
	.filter_content{
		position: relative;
	    float: right;
	    width: auto;
	    background: transparent;
	    border: unset;
	    font-size: 14px;
	    color: #515151;
	    margin: 1.05rem .5rem 0 .5rem;
	    outline: none;
	    transition: all .3s
	}
	.opsi_content:hover, .filter_content:hover{
		color: #8a8a8a;
	}
	.inside_button{
		position: relative;
		float: right;
		width: auto;
		padding-top: .75rem;
		margin-left: .5rem;
		margin-right: .5rem;
		z-index: 2;
	}
	.button_export_wrap{
	    line-height: 1.4;
		position: relative;
		float: right;
		width: auto;
		color: #fff;
		border: unset;
		background: #1a7cfb;
		font-family: inherit;
		font-size: 13px;
		padding: .5em 1em;
		margin-left: 1rem;
		border-radius: 4px;
		outline: none;
		box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
		-webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
		-moz-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	}
	.button_filter_wrap{
		line-height: 1.2;
		position: relative;
		float: right;
		width: auto;
		color: #515151;
		border: 1px solid #ccc;
		background: #ffffff;
		font-size: 13px;
		padding: .5em 1em;
		border-radius: 4px;
		outline: none;
		box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
		-webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
		-moz-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	}
	.button_filter_wrap i{
		position: relative;
		margin-left: .2rem;
	}
	.button_option_wrap{
	    line-height: 1.30;
		position: relative;
	    float: right;
	    width: auto;
	    color: #515151;
	    border: 1px solid #ccc;
	    background: #ffffff;
	    font-size: 13px;
	    padding: .5em 1em;
	    border-radius: 4px;
	    outline: none;
	    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	    -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	    -moz-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	}
	.button_option_wrap i{
		position: relative;
		margin-left: .2rem;
	}
	.list_option_wrap{
		display: none;
		position: absolute;
		top: 2rem;
		right: 0;
		width: 182px;
		height: auto;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: .5rem;
		box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
		-webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
		-moz-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07);
	}
	.list_option_wrap ul{
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.list_option_wrap ul li{
		position: relative;
	    float: left;
	    width: 100%;
	    text-align: left;
	    padding: .5rem;
	    transition: all .3s;
        cursor: pointer;
	}
	.list_option_wrap ul li:hover{
		color: #7b7b7b;
	}
	.list_option_wrap ul li i{
		position: relative;
		margin-left: .2rem;
		margin-right: .5rem;
	}
	.data input[type=button]{
        float: right;
		margin-top: 12px;
		margin-right: 0;
	    margin-left: .5rem;
    }
		.data .pencarian{
			position: absolute;right:120px;
			width: 300px;
			margin-top: -2px;
			border: 0px solid #000;
		}
			.data .pencarian input[type=text] {
				width:100%;
				border:1px solid #d9d9d9;
				background:#fafafa;
				padding: 5px;
				font-size: 12px;
			}
	input[type=text] {
			border:1px solid rgba(51,163,236,.2);
			background:#fff;
			padding-right: 1.5rem;
		}
	.data{
		position: relative;
		width:100%;
		float:left;
		border: 0px solid #dedede;
		padding: 0px;
		margin: 0px;
	}
	.data h2 {
		font-size: 15px;
		font-weight: 500;
		padding: 10px;
		padding-left: 35px;
	    color: #5bb0fc;
	    position: relative;
		width: 100%;
		top: 0;
		background: url(../images/7.png) no-repeat;
		background-position: 10px 11px;
	}
	.data .subdata_2 h2{
		text-transform: capitalize;
	    padding-left: 44px !important;
	    background-position: 18px 11px !important;
	    color: #515151 !important;
	    background: url(../images/7.png) #fff no-repeat !important;
        filter: hue-rotate(12deg);
	    background-position: 17px 11px !important;
	    border-top: 3px solid #fff;
	    border-left: 1px solid #eee;
	    border-radius: 6px 6px 0 0;
	    border-bottom: 1px solid #eee;
	    box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	    -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	    -moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	    z-index: 1;
	    /*border-top: 1px solid #ddd;
	    border-right: 1px solid #ddd;*/
	}
	.data .subdata_2 .dataTables_wrapper{
		border-left: 1px solid #eee;
		border-radius: 0 0 0 6px;
		z-index: 2;
	}
	.footer_non_home{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: transparent;
		border-top: 1px solid #ddd;
		padding: .75rem 0;
		font-size: 12px;
	}
	.displaydata {
		position: relative;
		float: left;
		width: 100%;
	    height: auto !important;
        min-height: 72vh;
		border-radius: 5px;
		margin-top: .65rem;
		padding-bottom: 3rem;
		border-bottom: 0px solid #999;
	}
	.displaydata .app_default{
		width:700px;
		height:100%;
		margin-top:0px;
		background:rgb(255 255 255 / 84%);
box-shadow: 0 8px 24px #e5e4e6;
-moz-box-shadow: 0 8px 24px #e5e4e6;
-webkit-box-shadow: 0 8px 24px #e5e4e6;
border: 1px solid rgba(0,0,0,.125);
		padding:20px;
		border-radius: 5px;
	}
	.app_no_button {
		margin-top:52px;
	}
	.app_no_button .app_default{
		position: relative;
		float: left;
	    padding-top: .75rem !important;
	}
	.app_default #formdata{
		height: auto;
		max-height: unset !important;
		min-height: 130px;
	}
	/*.displaydata table thead {
		height:40px;
		vertical-align:middle;
		background: #e5e5e5 url(../images/bg-content-box.gif)repeat-x top left; /* Old browsers */
		/*
		border-bottom:1px solid #ccc;
	}
	.displaydata table tbody td {
		text-align:left;
		}
	.displaydata table tbody tr:nth-child(odd) {
		background:#f8fafc;
		}
	.displaydata table tbody td a:hover {
		color:#777;
		cursor:pointer;
		}
		*/
.bg_dashboard {
	display: none;
	content: "";
    position: fixed;
    bottom: 0;
    right: -1rem;
    width: 240px;
    height: 225px;
    background: url(../images/bg_dashboard.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
}
.welcome_dashboard {
	position: relative;
	float: left;
	width:100%;
	margin-top: 42px;
	height: 100vh;
	overflow: auto;
	padding-bottom: 5rem;
	padding: 4vh 0;
	border: 0px solid #000;
	padding-left: 13.8rem;
	transition: all .3s;
}
.welcome {
	position: relative;
    float: left;
    width: 100%;
    height: auto;
    overflow: auto;
    padding-bottom: 5rem;
    padding: 1rem 0;
    padding-left: 2rem;
}
	.welcome h2 {
		display: none;
		font-size:18px;
		font-weight:500;
		padding:10px;
		color:#333;
	}
.wrap_home {
	width: 92%;
	margin: 0 auto;
}
.home_full {
	width: 100%;
	float: left;	
	padding: 0 .5rem;	
}
.home_left {
	position: relative;
	width: 100%;
	float: left;
	padding: 0 .5rem;
}
.home_right	{
	position: relative;
	width: 100%;
	float: left;
	padding: 0 .5rem;
    padding-bottom: 5rem;
}
.home_right .cart{
	position: relative;
	float: left;
	width: 100%;
	background: #fff;
	border-radius: 0;
    padding: .75rem;
    box-shadow: 3px 5px 7px rgba(0,0,0,.13);
    -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
    -moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
}
.cart section {
  display: none;
  padding: 0;
  border-top: 1px solid #ddd;
  height: auto;
}

.cart input {
  display: none;
}

.cart label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 10px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

.cart label i{
	position: relative;
	padding-right: .3rem;
	font-size: 14px;
	top: .05rem;
}

.cart label:hover {
  color: #888;
  cursor: pointer;
}

.cart input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid #1a7cfb;
  border-bottom: 1px solid #fff;
}

.cart #tab1:checked ~ #content1,
.cart #tab2:checked ~ #content2,
.cart #tab3:checked ~ #content3,
.cart #tab4:checked ~ #content4,
.cart #tab5:checked ~ #content5 {
  display: block;
}

@media screen and (max-width: 650px) {
  .cart label {
    font-size: 0;
  }

  .cart label:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 400px) {
  .cart label {
    padding: 15px;
  }
}

.calendar_wrap{
	position: relative;
	float: left;
	width: 100%;	
	padding: .75rem;
	background: #fff;
	box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
}
.calendar_dashboard{
	position: relative;
	float: left;
	width: 100%;
	/*height: 58.5vh;*/
    height: 370px;
	padding: 0;
}
.calendar-sidebar > .calendar-year {
    padding: 0 20px !important;
}
.calendar-sidebar > .calendar-year > button.icon-button {
    display: inline-block;
    width: 10px !important;
    height: 10px !important;
    overflow: visible;
    position: relative;
    top: -.3rem;
}
.calendar-header-day,.calendar-body td{
	border-bottom: unset !important;
	border-left: unset !important;
}
.month-list{
	overflow: auto;
    height: 50vh;
}
.calendar-sidebar > .calendar-year > p {
    font-size: 25px;
}
.evo-calendar {
    box-shadow: unset !important;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.calendar-inner{
	box-shadow: unset !important;
}
.calendar-events{
	right: -100% !important;
	width: 100% !important;
  background-color: #c5b1ff !important;
  padding: 40px 30px 60px 30px !important;
	z-index: 1 !important;
}
.calendar-events.calendar-events-slide{
	right: 0% !important;
}
.calendar-events > .event-header > p {
    font-size: 14px !important;
    margin: 0 !important;
}
.event-container > .event-icon {
    top: .4rem;
    padding: 6px !important;
    width: 20px !important;
    height: 20px !important;
}
.event-container {
    border-radius: 5px !important;
}
.event-container > .event-info {
    padding: 6px 10px 6px 0 !important;
}
.event-container > .event-info > p.event-title {
    font-size: 14px !important;
}
.event-header{
	position: relative;
	float: left;
	width: 100%;
}
.event-list{
	position: relative;
	float: left;
	width: 100%;	
}
.event-indicator{
	top: 1.3rem !important;
    left: 1.8rem !important;
}
.event-indicator:before {
    display: none;
    content: '';
    position: fixed;
    top: -.35rem;
    left: -1.5rem;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
}
.event-indicator > .type-bullet > div {
    width: 7px !important;
    height: 7px !important;
    float: right;
    position: relative;
    top: 1px;
    right: 1px;
}
/*.calendar-header-day{
	line-height: 12;
}*/
.icon_list_calendar{
	color: #fff;
    font-size: 24px;
    position: relative;
    top: -1px;
}
.icon_close_event{
	color: #fff;
    font-size: 24px;
    position: relative;
    top: -1px;
}
#eventListToggler{
	z-index: 2 !important;	
}
.icon_close_event_layer{
	display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}
.calendar-table tbody tr:first-child th{
    padding: .5rem;
	font-size: 16px;
	margin-bottom: .5rem;
	background: unset !important;
	color: #8773c1 !important;
}
tr.calendar-header .calendar-header-day{
	padding-top: 1rem;	
	font-size: 14px;
}
tr.calendar-body .calendar-day {
    padding: 1px 0 0 0 !important;
}
.sidebar-hide .calendar-inner{
    max-width: 100% !important;
}
tr.calendar-body .calendar-day .day {
    font-size: 14px;
    height: 40px !important;
    width: 40px !important;
    padding: 11px !important;
}
button.icon-button > span.bars::before{
	height: 5px !important;
}
/*.calendar_dashboard .card{
	position: relative;
	float: left;
	width: 100%;
}
.calendar_dashboard .card .card-header{
	padding: .5rem 1rem;
    background: #846dcf;
}
.calendar_dashboard .card .table-responsive{
	position: relative;
	float: left;
	width: 100%;
	height: 52vh;
	overflow: auto;
}
.calendar_dashboard .card .table{
	position: relative;
	float: left;
	width: 100%;
}
.calendar_dashboard .card .table thead.days tr th{
	padding: .2rem 0;
    padding-top: .5rem;
    background: #2196F3; 
}
.calendar_dashboard .card .table thead.days tr th:nth-child(1) span{
	background: #e00000;
}
.calendar_dashboard .card .table thead.days tr th:nth-child(6) span{
	background: #00a900;
}
.calendar_dashboard .card .table thead.days span{
	height: 20px;
	width: 35px;
	line-height: 22px;
	font-size: 10px;
	border-radius: 5px;
}
.calendar_dashboard .card .table tbody.dates tr td{
	padding: .2rem 0;
}
.calendar_dashboard .card .table tbody.dates span{
	height: 35px;
	width: 35px;
	line-height: 37px;
	font-size: 10px;
}
.calendar_area{
	position: relative;
	float: left;
	width: 70%;
}
.event_area{
	position: relative;
	float: left;
	width: 30%;
	display: unset;
}
.event_area .card-body{
	padding: 1rem;
	height: 52vh;
}
.event_area .card#event .card-body .events-today {
    height: 45vh
}*/
.shortcut {
	position: relative;
	float: left;
	width:100%;
	margin-bottom: .75rem;
	z-index: 4;
}
	
	.shortcut ul{
		margin:0;
		padding:0;
		text-align:center;
	}
	.shortcut ul li {
		cursor: pointer;
		width: 16.666666667%;
		float: left;
		position: relative;
		border-radius: 5px;
		margin: 0;
		min-height: 96px;
		padding: .75rem .4rem;
		padding-bottom: 1rem;
		/*cursor: pointer;
		width:31%;
		float: left;
		position:relative;
		background:#fff;
		border-radius:5px;
		box-shadow:3px 5px 7px rgba(0,0,0,.13);
		-webkit-box-shadow:3px 5px 7px rgba(0,0,0,.13);
		-moz-box-shadow:3px 5px 7px rgba(0,0,0,.13);
		margin:5px;
		margin-bottom: 28px;
		min-height: 138px;*/
	}
	.shortcut_pondok ul li{
		width: 16.66666667% !important;
	}
	.notification_shortcut{
	    position: absolute;
	    top: .5rem;
	    right: .5rem;
	    width: 18px;
	    height: 18px;
	    background: #02d846;
	    border-radius: 50%;
	    box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	    -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	    -moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	    z-index: 1;
	}	
	.notification_dropdown_menu{
		display: none;
		position: absolute;
		top: 2.5rem;
		right: 0;
		width: 300px;
		max-height: 300px;
		overflow: auto;
		background: #fff;
		border-radius: 5px;
		border: 1px solid #ddd;
		box-shadow: 3px 5px 7px rgba(0,0,0,.13);
		-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
		-moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	}
	.title_notif_wrap{
	    position: sticky;
	    top: 0;
	    float: left;
	    width: 100%;
	    padding: .5rem 1rem;
	    background: #fff;
	    border-bottom: 1px solid #eee;
	    z-index: 1;
	}
	.title_notif_wrap span{
		position: relative;
		float: left;
		width: 50%;
		color: #888;
		font-size: 12px;
		font-weight: 700;
	}
	.notif_total{
		position: relative;
		float: left;
		width: 50%;
		color: #1a7cfb !important;
		font-size: 12px;
		font-weight: 700;
		text-align: right;
	}
	.list_notif_wrap{
		position: relative;
		float: left;
		width: 100%;
	}
	.list_notif_wrap ul {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	}
	.list_notif_wrap ul li{
		position: relative;
		float: left;
		width: 100%;
		padding: .5rem 1rem;
		margin: 0;
		border-bottom: 1px dashed #eee;
		transition: all .3s;
	}
	.list_notif_wrap ul li:hover{
		background: #f7f7f7;
	}
	.list_notif_menu{
		position: relative;
		float: left;
		width: 100%;
	}
	.icon_list_notif_menu{
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 40px;
	    height: 100%;
	    color: rgb(26 124 251 / 53%);
	    text-align: left;
	    border-right: 1px solid #eee;
	    padding-left: .4rem;
        padding-top: .5rem;
	}
	.content_list_notif_menu{
		position: relative;
		float: left;
		width: 100%;
		padding-left: 3rem;
	}
	.sub_content_list_notif_menu{
		position: relative;
		float: left;
		width: 100%;
		color: #777;
		font-size: 13px;
		font-weight: 700;
	}
	.author_content_list_notif_menu{
		position: relative;
		float: left;
		width: 100%;
		color: #519dff;
		font-size: 12px;
	}
	.time_content_list_notif_menu{
		position: relative;
		float: left;
		width: 100%;
		font-size: 10px;
		color: #aaa;
		font-style: italic;
	}
	/*.circle-wrap {
	  margin: 0 auto;
	  margin-top: 45px; 
	  margin-bottom: 20px;
	  width: 100px;
	  height: 100px;
	  background: #e6e2e7;
	  border-radius: 50%;
	}	
	.circle-wrap .circle .mask,
	.circle-wrap .circle .fill {
	  width: 100px;
	  height: 100px;
	  position: absolute;
	  border-radius: 50%;
	}
		.circle-wrap .circle .mask {
		  clip: rect(0px, 110px, 110px, 50px);
		}
		.circle-wrap .circle .mask .fill {
		  clip: rect(0px, 50px, 110px, 0px);
		  background-color: #9e00b1;
		}
		.circle-wrap .circle .mask.full,
		.circle-wrap .circle .fill {
		  animation: fill ease-in-out 3s;
		  transform: rotate(120deg);
		}
		@keyframes fill {
		  0% {
		    transform: rotate(0deg);
		  }
		  100% {
		    transform: rotate(120deg);
		  }
		}		
		.circle-wrap .inside-circle {
		  width: 90px;
		  height: 90px;
		  border-radius: 50%;
		  background: #fff;
		  line-height: 90px;
		  text-align: center;
		  margin-top: 5px;
		  margin-left: 5px;
		  position: absolute;
		  z-index: 2;
		  font-weight: 700;
		  font-size: 2em;
		}	*/	
	.shortcut ul li .icon {
		border-radius: 100%;
		float: none;
		margin-right: 0;
		position: absolute;
		color: #fff;
		width: auto;
		height: auto;
		font-size: 30px;
		text-align: center;
		padding: 0;
	    top: 3.2rem;
        left: 2rem;
		/*box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	    -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	    -moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);*/
		/*width: 60px;
		height: 60px;
		border-radius: 100%;
		float: none;
		margin-right: 0;
		position: absolute;
		top: -5px;
		right: -15px;
		opacity: .7;
		transform: rotate(7deg);*/
	}
	.shortcut ul li .icon i{
		/*position: absolute;
	    top: 0;
	    right: 5rem;
	    width: auto;
	    height: auto;*/
	}
	.shortcut ul li .icon img {
		max-height:100%;
	}
	.shortcut ul li .judulshortcut{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	    z-index: 1;
		/*width: calc(100% - 10%);
		float: left;
		margin-left: 5%;
		margin-top: -20px;
		padding: 10px;
		border-radius: 5px;
		min-height: 48px;
		max-height: 48px;
		overflow: hidden;
		position: relative;*/
	}
		.blue_color{
			border-left: 5px solid #156fe1 !important;
		}
		.green_color{
			border-left: 5px solid #6fdba9 !important;
		}
		.violet_color{
			border-left: 5px solid #846dcf !important;
		}
		.jingga_color{
			border-left: 5px solid #ffe10e !important;
		}
		.nila_color{
			border-left: 5px solid #c46dcf !important;
		}
		.orange_color{
			border-left: 5px solid #faa532 !important;
		}
		.maroon_color{
			border-left: 5px solid #f3545c !important;
		}

		.maroon_shortcut:hover .content-shortcut{
			background: #fff3f4 !important;
		}
		.jingga_shortcut:hover .content-shortcut{
			background: #fffdef !important;
		}
		.orange_shortcut:hover .content-shortcut{
			background: #fff2e2 !important;
		}
		.green_shortcut:hover .content-shortcut{
			background: #f8fffc !important;
		}
		.blue_shortcut:hover .content-shortcut{
			background: #eef5ff !important;
		}
		.nila_shortcut:hover .content-shortcut{
			background: #fef4ff !important;
		}
		.violet_shortcut:hover .content-shortcut{
			background: #f9efff !important;
		}

		.blue_shortcut .judulshortcut .icon{
			color: #a6c9f5;
			opacity: .8;
		}
		.green_shortcut .judulshortcut .icon{
			color: #b7edd5;
		    opacity: .8;
		}
		.violet_shortcut .judulshortcut .icon{
			color: #c1b5e7;
		    opacity: .8;
		}
		.orange_shortcut .judulshortcut .icon{
			color: #fedbae;
		    opacity: .8;
		}
		.maroon_shortcut .judulshortcut .icon{
			color: #efb1b4;
		    opacity: .8;
		}
		.jingga_shortcut .judulshortcut .icon{
			color: #ead868;
			opacity: .8;
		}
		.nila_shortcut .judulshortcut .icon{
		    color: #dcace2;
		    opacity: .8;
		}

		.blue_color h1{
			color: #156fe1 !important;
		}
		.green_color h1{
			color: #6fdba9 !important;
		}
		.violet_color h1{
			color: #846dcf !important;
		}
		.orange_color h1{
			color: #faa532 !important;
		}
		.maroon_color h1{
			color: #f3545c !important;
		}
		.jingga_color h1{
			color: #ffdb00 !important;
		}

		.nila_color h1{
			color: #c46dcf !important
		}

		.shortcut ul li .judulshortcut h3 {
			font-size:12px;
			font-weight:600;
			line-height:12px;
			text-align:left;
			text-transform: capitalize;
			color: #828282;
			position: absolute;
			top: 1.75rem;
		    left: 2rem;
		}
		.shortcut ul li .prosentasi {
			width:55%;
			float:left;
			margin:10px 0 0 10px;
		}
		.shortcut ul li .prosentasi h3 {
		}
		.shortcut ul li .content-shortcut {
			position: relative;
			float: left;
			width: 100%;
			color: #999;
		    height: 96px;
			padding: 5px 10px;
			border: 1px solid #eee;
			border-radius: 5px;
			overflow: hidden;
			background: #fff;
			transition: all .3s;
			box-shadow: 3px 5px 7px rgba(0,0,0,.13);
			-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
			-moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
		}
		.shortcut ul li .content-shortcut:before{
			content: "";
		    position: absolute;
		    bottom: -.25rem;
		    right: 0;
		    width: 100%;
		    height: 100%;
		    border-radius: 0 0 5px 0;
		    opacity: .5;
		}
		.shortcut ul li .content-shortcut.blue_color:before{
			background: url(../images/bg_shortcut_blue.svg);
			background-size: contain;
		    background-repeat: no-repeat;
		    background-position: right bottom;
		    background-attachment: scroll;
		}
		.shortcut ul li .content-shortcut.green_color:before{
			background: url(../images/bg_shortcut_green.svg);
			background-size: contain;
		    background-repeat: no-repeat;
		    background-position: right bottom;
		    background-attachment: scroll;
		}
		.shortcut ul li .content-shortcut.violet_color:before{
			background: url(../images/bg_shortcut_violet.svg);
			background-size: contain;
		    background-repeat: no-repeat;
		    background-position: right bottom;
		    background-attachment: scroll;
		}
		.shortcut ul li .content-shortcut.orange_color:before{
			background: url(../images/bg_shortcut_orange.svg);
			background-size: contain;
		    background-repeat: no-repeat;
		    background-position: right bottom;
		    background-attachment: scroll;
		}
		.shortcut ul li .content-shortcut.maroon_color:before{
			background: url(../images/bg_shortcut_red.svg);
			background-size: contain;
		    background-repeat: no-repeat;
		    background-position: right bottom;
		    background-attachment: scroll;
		}
		.shortcut ul li .content-shortcut.jingga_color:before{
			background: url(../images/bg_shortcut_jingga.svg);
			background-size: contain;
		    background-repeat: no-repeat;
		    background-position: right bottom;
		    background-attachment: scroll;
		}
		.shortcut ul li .content-shortcut.nila_color:before{
			background: url(../images/bg_shortcut_nila.svg);
			background-size: contain;
		    background-repeat: no-repeat;
		    background-position: right bottom;
		    background-attachment: scroll;
		}
			.content-shortcut h1{
				font-size: 30px;
				font-weight: 600;
				font-style: normal;
				color: #888;
				position: relative;
				float: left;
				width: 100%;
				text-align: left;
				padding: 2.6rem .5rem;
		        padding-left: 2.5rem;
			    padding-bottom: 0;
			    text-shadow: 1px 1px #9c9c9c;
			}

		.content-shortcut ul {
			margin: 0;
			padding: 0;
			list-style: circle;
		}
			.content-shortcut ul li {
				width: 100%;
				float: left;
				padding: 0;
				margin: 0;
				box-shadow: none;
				border-radius: 0;
				text-align: left;
				padding-left: 20px;
				background: url(../images/drag.png)no-repeat left;
				min-height: 10px;
			}
			.content-shortcut ul li span {
				font-size: 13px;
				color: #888;
				font-style: normal;
			}
	.highcharts-title{
		font-size: 13px !important;
	    font-weight: 600;
	    line-height: 14px;
	    text-align: left;
		text-transform: uppercase;
		color: #58d1fd !important;
	    top: -1rem;
	}
		.cart .judulshortcut h3 {
			font-size: 14px;
			font-weight: 400;
			line-height: 14px;
			text-align: left;
			text-transform: uppercase;
			/*font-size:22px;
			font-weight:200;
			line-height:normal;
			color:#fff;
			text-align:right;*/
		}
		.cart .prosentasi {
			width:55%;
			float:left;
			margin:10px 0 0 10px;
		}
		.cart .prosentasi h3 {
		}
		.cart .content-shortcut {
			position: relative;
			float:left;
			width: 100%;
			height: 100%;
			text-align:left;
			padding:10px;
			background: #fff;
		    border: 1px solid #eee;
	        border-top: unset;
		}
		#container_chart_siswa, #container_chart_santri, #container_chart_alumni, #container_chart_transaksi_masuk, #container_chart_transaksi_keluar{
			overflow: hidden;
			position: relative;
			float: left;
			width: 100%;
			/*height: 85.5vh;*/
			height: 515px;
			background: transparent;
		}
		/*#container_chart_siswa .highcharts-container, #container_chart_alumni .highcharts-container, #container_chart_transaksi_masuk .highcharts-container, #container_chart_transaksi_keluar .highcharts-container{
			height: 83vh !important;
		}*/
		.container_chart_resize_small{
			height: 55vh !important;
		}
		.double_chart_resize_small{
			height: 31.5vh !important;
		}
		.container_chart_resize_large{
			height: 69.5vh !important;
		}
		.double_chart_resize_large{
			height: 35vh !important;
		}
.sub_home_welcome{
	position: relative;
	float: left;
	width: 100%;
	padding: .5rem;
	padding-bottom: 1rem;
}
.sub_home_welcome span:first-child{
	position: relative;
	float: left;
	width: 100%;
	text-align: right;
	font-size: 14px;
	color: #e48300;
	padding-bottom: .5rem;
}
.sub_home_welcome span:last-child{
	position: relative;
	float: left;
	width: 100%;
	text-align: right;
	color: #e48300;
	font-size: 14px;
}
.sub_home_left{
	position: relative;
	float: left;
	width: 30%;	
}
.content_sub_home_left{
	position: relative;
	float: left;
	width: 100%;		
}
.content_sub_home_left ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.content_sub_home_left ul li{
	position: relative;
	float: left;
	width: 100%;	
    padding: .5rem;
    padding-top: 0;
    padding-bottom: 1.1rem;
}
.division_area_middle .box_content_sub_home_left{
	border: 1px solid #aaa;
	padding: 1rem;
	background: #ff7878;
	border-radius: 10px 35px 10px 10px;
	padding-top: .5rem;
	overflow: hidden;
}
.division_area_middle .box_content_sub_home_left .bg_division{
	position: absolute;
	top: 0;
	right: 0;
	width: 75%;
	height: 100px;
}
.division_area_middle .box_content_sub_home_left .bg_division img{
	width: 100%;
}
.division_area_middle .box_content_sub_home_left{
	border: unset;
	padding: 1.5rem 1rem;
	background: #ff7070;
	border-radius: 10px 35px 10px 10px;
	height: 26vh;
}
.box_content_sub_home_left_blue{
	background: #78a7ff !important;
}
.box_content_sub_home_left_line_blue{
    border: 3px solid #79a6fc !important;
}
.box_content_sub_home_left_line_blue h3{
	color: #79a6fc !important;	
}
.box_content_sub_home_left_line_blue span{
	color: #79a6fc !important;	
}
.box_content_sub_home_left_line_blue i{
	background: #3a7efb !important;	
}
.division_area_middle .box_content_sub_home_left h3{
	padding-bottom: 3.5rem !important;
	color: #fff;
}
.division_area_middle .box_content_sub_home_left span{
	padding: 0;
	margin: 0;
	color: #fff;
}
.division_area_bottom .box_content_sub_home_left{
	border: 3px solid #ab9cff;
	padding: 1.5rem 1rem;
	background: #fff;
	border-radius: 10px 40px 10px 10px;	
	height: 26vh;
}
.division_area_bottom .box_content_sub_home_left h3{
	padding-bottom: 4rem !important;
	color: #ab9cff;
}
.division_area_bottom .box_content_sub_home_left span{
	padding: 0;
	margin: 0;
	color: #ab9cff;
}
.box_content_sub_home_left{
	position: relative;
	float: left;
	width: 100%;
	padding: 1rem 0;
	padding-top: 0;
    height: 11vh;
}
.box_content_sub_home_left h3{
	position: relative;
	float: left;
	width: 100%;		
	color: #969696;
    padding-bottom: 1.5rem;
}
.box_content_sub_home_left span{
	position: relative;
	float: left;
	width: 100%;
	color: #6f6f6f;		
    font-size: 30px;
    font-weight: 500;
}
.division_area_bottom .box_content_sub_home_left i{
	background: #ab9cff;
}

.box_content_sub_home_left i{
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 70px;
	background: rgb(255 255 255 / 66%);
	border-radius: 50%;
	text-align: center;
	padding-top: 1.1rem;
	font-size: 35px;
	color: #fff;
}

.sub_home_right{
	position: relative;
	float: left;
	width: 40%;	
	padding: 0 .5rem;
}
.sub_home_right:nth-child(2){
	position: relative;
	float: left;
	width: 60%;	
	border-radius: 5px;
}
.title_chart{
	position: relative;
	float: left;
	width: 100%;
}
.subtitle_chart{
	position: relative;
	float: left;
	width: auto;
	padding: .25rem;
    font-size: 14px;
    color: #1a7cfb;
}
.subtitle_chart i{
	position: relative;
	font-size: 15px;
	color: #1a7cfb;
	top: 0;
    margin-right: .25rem;
}
.filter_chart_wrap{
	position: relative;
	float: right;
	width: auto;
	padding-bottom: .5rem;
}
.filter_chart{
    position: relative;
    float: right;
    width: auto;
}
.filter_chart > label{
	position: relative;
	float: left;
	width: auto;
    padding: 0px;
	margin-right: .5rem;
    color: #888;
	top: .25rem;
}
.filter_chart > label i{
	position: relative;
	font-size: 15px;
	color: #1a7cfb;
	top: 0;
}
.filter_chart select{
	position: relative;
	float: left;
	width: 100px;
	border: 1px solid #aaa;
	background: #fff;
	padding: .3rem;
	border-radius: 4px;
	outline: none;
}
.content_sub_home_chat{
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	text-align: left;
	padding: 10px;
	background: #fff;
	border-radius: 5px;
	border: 1px solid #eee;
	box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
}
#chat_pengurus_tabungan{
	position: relative;
	float: left;
	width: 100%;
	height: 65vh;
}

.corner_info_wrap{
	display: none;
	position: absolute;
	bottom: -669px;
	right: 22px;
	width: 651px;
	height: 695px;
	padding: .75rem;
	padding-top: .6rem;
	border-bottom: unset;
	z-index: 5;
	transition: all .3s;
	background: #fff;
	border-radius: 5px;
	box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	border: 1px solid #f1f1f1;
}
.sub_shortcut_wrap{
	position: relative;
	float: left;
	width: 100%;
	padding: 2rem .75rem;
    height: 225px;
	/*height: 34vh;*/
	/*background: #fff;
	box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);*/
}
.sub_shortcut{
	position: relative;
	float: left;
	width: 100%;
}
.sub_shortcut ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.sub_shortcut ul li{
	position: relative;
	float: left;
	width: 25%;	
    padding-bottom: 1rem;
    cursor: pointer;
}
.sub_shortcut ul li:hover .sub_shortcut_icon img{
	filter: drop-shadow(2px 4px 6px #aaa);
}
.sub_shortcut ul li:hover .sub_shortcut_label{
	color: #000;
}
.sub_shortcut_icon_wrap{
	position: relative;
	float: left;
	width: 100%;	
}	
.sub_shortcut_icon{
	position: relative;
	float: left;
	width: 100%;	
	text-align: center;
}
.sub_shortcut_icon img{
	width: 35px;
	transition: all .3s;
}
.sub_shortcut_label{
	position: relative;
	float: left;
	width: 100%;
	text-align: center;
	font-size: 11px;
	transition: all .3s;
}
.showEvent.bg-primary {
    color: #fff !important;
}
.corner_info_wrap_show{
  bottom: -14rem !important;
}
.breadcrumbs_wrap{
    position: relative;
    float: left;
    width: 100%;
    padding: .5rem;
    padding-left: 2.5rem;
    padding-bottom: .5rem;
    background: #d9edf7;
    border: 1px solid #bce8f1;
    border-radius: 5px;
}
.breadcrumbs_wrap:after {
	content: '';
	position: absolute;
	top: 9px;
    left: 10px;
	width: 16px;
	height: 2px;
	background: #616161;
}
.breadcrumbs_wrap:before {
	content: '';
	position: absolute;
	top: 21px;
	left: 10px;
	width: 16px;
	height: 2px;
	background: #616161;
}
.breadcrumbs_wrap ul:before{
	content: '';
	position: absolute;
    top: 15px;
    left: 13px;
	width: 16px;
	height: 2px;
	background: #616161;
}
.breadcrumbs_wrap ul li{
	position: relative;
	float: left;
	width: auto;	
	padding: 0 .3rem;
    padding-left: .8rem;
    font-size: 12px;
    top:  -.05rem;
    cursor: pointer;
    transition: all .3s;
    color: #515151;
}
.breadcrumbs_wrap ul li:hover{
	color: #1a7cfb;
}
.breadcrumbs_wrap ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.breadcrumbs_wrap ul li:first-child{
	padding-left: 0;
}
.breadcrumbs_wrap ul li:first-child:before{
	display: none;
}
.icon_calendar_rotate{
	transform: rotate(180deg);
}
.breadcrumbs_active{
	font-weight: 700;
	color: #1a7cfb !important;
}
.title_calendar{
	position: relative;
	float: left;
	width: 100%;
	padding: .5rem;
	padding-left: 0;
	padding-top: 0;
	z-index: 1;
	font-weight: 400;
	font-size: 14px;
	color: #8773c1;
}
.title_calendar i{
	position: relative;
	margin-right: .3rem;
}
.icon_calendar{
	position: absolute;
	top: -3px;
	right: 35px;
	width: auto;
	height: auto; 
	cursor: pointer;
	color: #fff;
}
.layer_close{
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 2;
  cursor: pointer;
  display: none;
}

/*.icon_down_info{
  display: none;
}*/

.content_info{
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
}
.content_info .container{
	background: unset !important;
}
.box-calendar {
	width:100%;
	height: 322px;
	display:inline-block;
	position:relative;
	background:#fff;
	border-radius:5px;
	box-shadow:2px 6px 15px 0 rgba(69,65,78,.1);
	-webkit-box-shadow:2px 6px 15px 0 rgba(69,65,78,.1);
	-moz-box-shadow:2px 6px 15px 0 rgba(69,65,78,.1);
	z-index: 1;
	border:1px solid rgba(0,0,0,.125);
	margin-top: 10px;	
}
	.box-calendar .icon {
		width:50px;
		height: 50px;
		float:left;
		padding: 10px;
		border-radius: 100%;
		z-index:1;
		position: absolute;
		top: -7%;
		left: 3%;
	}
	.box-calendar .icon img {
		max-height:100%;
	}
	.box-calendar .judulshortcut{
		width: calc(100% - 4%);
		margin-left: 2%;
		float:left;
		padding: 10px;
		padding-left: 2px;
		border-bottom: 1px solid rgba(0,0,0,.125);
		margin-top: -25px;
		border-radius: 5px;		
	}
		.box-calendar .judulshortcut h3 {
			font-size:22px;
			font-weight:200;
			line-height:normal;
			color:#fff;
			text-align:right;
		}
		.box-calendar .prosentasi {
			width:55%;
			float:left;
			margin:10px 0 0 10px;
		}
		.box-calendar .prosentasi h3 {
		}
		.box-calendar .content-shortcut {
			width:100%;
			height: 288px;
			overflow-y: auto;
			float:left;
			margin-top:10px;
			text-align:left;
			padding:10px;
		}
.priv_submenu{
	position: relative !important;
	float: right;
	width: 50% !important;
	height: 243px !important;
	right: unset !important;
	top: unset !important;
	margin-top: 2.1rem;
	scroll-behavior: smooth;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}
.priv_submenu h1{
	position: relative;
	float: left;
	width: 100%;
	padding: 8px !important;
}
.priv_submenu .id_menu{
	position: relative;
	float: left;
	width: 100%;
}
.priv_submenu .id_menu ul li{
	position: relative;
	float: left;
	width: 100%;	
	margin-bottom: 1rem;
}
.priv_submenu .id_menu ul li h2{
	position: relative;
	float: left;
	width: 100%;
	font-size: 12px;
	top: -.1rem;
	transition: all .3s;
}
.priv_submenu .id_menu ul ul h3{
	position: relative;
	float: left;
	width: 100%;
	font-size: 12px;
	font-weight: 100;
	font-style: italic;
	border-bottom: 1px dashed #aaa;
	padding-bottom: .35rem;
    padding-top: 7px;
    transition: all .3s;
}
.priv_submenu .id_menu ul ul li{
	padding-top: .4rem;
	margin-bottom: 0 !important;
}
.priv_submenu .id_menu ul ul li input{
	position: relative;
	top: .17rem;
    margin-bottom: .35rem;
}
.pilihanmenu{
	position: relative;
	float: right;
	width: 50% !important;
    height: 243px !important;
	margin: 0;
	margin-top: .5rem !important;
	scroll-behavior: smooth;
}
.pilihanmenu ul h1{
	position: relative;
    float: left;
    width: 100%;
    padding: 8px !important;
}
.pilihanmenu ul li{
	position: relative;
	float: left;
	width: 100%;
}
.pilihanmenu ul li a{
	position: relative;
	top: -.2rem;
}
.pilihanmenu ul li .id_menu{
	position: relative;
    float: left;
    width: 100%;	
}
.pilihanmenu ul ul{
	padding: 0 5px;
	padding-top: .3rem;
}
.pilihanmenu ul ul li{
    padding: 0 .8rem;
	padding-bottom: .3rem;
}
.pilihanmenu ul ul li input{
	margin-bottom: 8px !important;
}
.pilihanmenu ul ul li b{
	font-weight: 100;
}
.pilihanmenu ul ul ul{
	border-top: unset;
	border-top: 1px dashed #aaa;
    padding-top: .55rem;
}
.pilihanmenu ul ul ul li a{
	font-weight: 100;
}
.pilihanmenu ul ul ul li a:hover{
	font-weight: 100;	
}
.footer{
	clear: both;
	border: 1px solid #dedede;
	padding: 10px;
	margin: 10px;
}
.maskform{
	position:absolute;width:99%;border:0px solid #000;height:100%;left:0;top:0;
    background-color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.4);
		z-index:2;
		display:none;
}
#progress {
	position:absolute;
	width:99%;
	border:1px solid #ddd;
	padding:1px;
	border-radius:3px;
	display:none;
	margin-bottom:5px;
	top:30px;
	left:0;
	z-index:3;
	background-color:#CCFF99;
}
#bar {
	background-color:#B4F5B4;
	width:0%;
	height:20px;
	border-radius:3px;
}
#percent {
	position:absolute;
	display:inline-block;
	top:2px;
	left:45%;
	font-family:Tahoma,Geneva,sans-serif;
	font-weight:bold;
	font-size:13px;
}
.debugger{
	position: absolute;width: 300px;height: 200px;bottom: 10px;border: 1px solid #000;right: 10px;display: none;
}
.rules p{
	margin-bottom: 45px;
}
.ui-dialog{
	border-radius: 5px !important;
}

#input_data{
	overflow: unset !important;
}
#input_data .tombol_opsi{position: absolute;right:10px;top:70px;}
#input_data h1{
	font-size: 16px;
	font-weight:400;
	margin-bottom: 5px;
	background: #65b2ff;
	padding: 10px;
	color: #fff;
	border-bottom:1px solid #e6ebf1;
	text-align:center;
	border-radius: 3px;
	}
.jodit-container{
	margin-top: .5rem;
	position: relative;
	float: left;
	width: 100% !important;
}
.formulir_content{
	font-weight: 600;
	border-bottom: 1px dashed #ddd;
	padding: .3rem 0;
	width: 100% !important;
	margin-bottom: .6rem;
}
.preview_image_slider{
	position: relative;
    float: left;
    width: 100%;
    border: unset;
    border-radius: 3px;
    padding-left: 110px;
}
.preview_image_slider .image_slider{
	position: relative;
    float: left;
    width: 100%;
    max-height: 100px;
    overflow: auto;
    margin-bottom: 1rem;
}
.preview_image_slider .image_slider img{
	width: 100%;
}
.preview_icon{
	position: relative;
    float: left;
    width: 100%;
    padding-top: 1rem;
}
.gantiicon i{
    margin: 0 .4rem;
}
.gantiicon i:last-child{
    color: #1a7cfb;
}
.jodit-container{
	margin-bottom: 1rem;
}
.formulir {
	position: relative;
	width: 25%;
	float: left;
	padding-top: .45rem;
    color: #333;
	/*width:105px;
	float:left;
	margin-right:5px;
    padding-top: .45rem;*/
}
.wrapper_file_upload {
    position: relative;
    float: left;
    width: 72%;
    height: 33px;
    margin-bottom: 10px;
    margin-top: .1rem;
}
.wrapper_file_upload > .file_upload_form{
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
.wrapper_file_upload > .file_upload_mark_form{
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  border: 1px solid #aaa;
  border-radius: 3px;
  text-align: center;
  /* z-index: 1; */
}
.wrapper_file_upload > .file_upload_form:hover ~ .file_upload_mark_form{
  border: 1px solid #ccc;
}
.wrapper_file_upload > .file_upload_mark_form .icon_upload{
    position: relative;
    width: 20px;
    font-size: 14px;
    font-weight: 100;
    display: inline-block;
}
.wrapper_file_upload > .file_upload_mark_form h6{
    position: relative;
    width: 75px;
    font-size: 14px;
    font-weight: 100;
    margin: 0;
    padding: .45rem .3rem .3rem .3rem;
    margin-left: 0;
    display: inline-block;
}
.file_upload_form + .error{
	position: absolute;
    top: -3px;
    left: 10rem;
}
input[name=file_icon] + .error{
	top: 15px !important;
	left: 11rem !important;
}
form input,form select,form textarea {
	margin-bottom:10px;
	vertical-align:middle;
	padding:8px 10px;
	background:#fff;
}
form select option{
	padding-left: 3px;
	padding-right: 3px;
}
form input[type=text],form input[type=password],form select{
    width:100%;
    border:1px solid #d8d8d8;
    vertical-align: middle;
}
form input[type=file]{
	position: relative;
	float: left;
	width: 75%;
}
form textarea{
    width: 100%;
    resize: none;
	border:1px solid #d8d8d8;
    vertical-align: top;
}
.input_wrap{
	position: relative;
	float: left;
	width: 75%;
}
.input_wrap .select2{
	margin-bottom: 10px;
	width: 100% !important;
}
.input_wrap .select2 .select2-selection{
	height: auto;
	border: 1px solid #d8d8d8;
}
.input_wrap .select2 .select2-selection .select2-selection__rendered{
	padding: 8px 10px;
	line-height: normal;
}
.input_wrap_clear{
	position: unset;
	float: unset;
	width: unset;
}
.input_wrap > .input_wrap{
	width: 100% !important;
}
.multiInput{
	position: relative;
	float: left;
	width: 100%;
}
.inputWrapper{
	position: relative;
	float: left;
	width: 100%;	
}
.form_set_statusproject {
	padding:10px;
}
#big-left {
	position: absolute;
	top: 0;
	left: -11%;
	width: 342px;
	height: 372px;
	background: url(../images/big.png)no-repeat;
}
#big-right {
	position: absolute;
	bottom: 0;
	right: -11%;
	width: 342px;
	height: 372px;
	background: url(../images/big.png)no-repeat;
}
.form_login_wrap{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 6rem;
}
.form_login_wrap:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 370px;
    border: unset;
    /*border-left: 5px solid #35b4cf;*/
    background: transparent;
    border-radius: 7px;
/*    box-shadow: 3px 5px 7px rgba(0,0,0,.13);
    -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
    -moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);*/
    z-index: 1;
}
/*.form_login_wrap:after {
    content: "";
    position: absolute;
    top: 5.5rem;
    left: -.55rem;
    width: 105%;
    height: 70px;
    background: linear-gradient(0deg,#35b4cf,#299fc1);
    border-radius: 4px 0 4px 0;
    transform: skewY(-4deg);
    filter: drop-shadow(4px 6px 4px rgba(0,0,0,.13));
    z-index: 2;
}*/
#form_login > label{
	position: relative;
	float: left;
	width: 100%;
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 4rem;
	color: #017cfb;
	text-align: center;
}
#form_login > label:before{
	content: '';
	position: absolute;
	top: 3.5rem;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 35px;
	height: 3px;
	background: #017cfb;
	border-radius: 5px;
}
.caption_login{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 3.5rem;
}
.caption_login span{
	position: relative;
	float: left;
	width: 100%;
	text-align: center;
	color: #1a7cfb;
	font-weight: 600;
	font-size: 13px;
	padding-bottom: .2rem;
}
.bungkuslogin_wrap{
	position: relative;
	height: 100vh;
	width: 100%;
	background: #017cfb;
	overflow: hidden;
}
.bungkuslogin_left{
	position: relative;
	float: left;
	width: 40%;
	height: 100vh;
	background: #007cfb;
	box-shadow: 3px 0px 15px rgb(0 0 0 / 32%);
	z-index: 2;
}
#bungkuslogin {
    position: relative;
    float: left;
    width: 60%;
    height: 100vh;
    background: #fff;
    z-index: 1;
}
#bungkuslogin section {
	width: 100%;
	float: left;
	position: relative;
    padding-top: 2rem;
}
#login-wrap {
	position: relative;
	float: left;
	width: 100%;
}
.center_button_login{
	margin: 0 auto;
	width: 130px;
}
.button_login{
	position: relative;
	float: left;
	width: 100%;
	font-size: 14px;
    background: #01b040;
    border: 1px solid #01b040;
    margin-top: 1.75rem;
    margin-right: 0;
    box-shadow: 3px 5px 7px rgba(0,0,0,.13);
    -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
    -moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
    transition: all .3s;
}
.button_login:hover{
	opacity: .8rem;
}
.formlogin-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 1rem;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 16rem;
    z-index: 2;
	/*transform: rotate(0deg) translate3d(0,0,0);
	background: linear-gradient(-45deg,#f18f00,#f18f00);
	background-size: cover;
	border-radius: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 60%;
	height: 100vh;
	z-index: 1;
	opacity:.8;
	display: flex;
	align-items: center;*/
}
.bg-login {
	position: relative;
    float: left;
    width: 100%;
/*	width: 100%;
	padding: 20px;
	float: left;
	position: relative;
	top: 0;
	left: 0;
	z-index: 2;
	margin: 20px 0;*/
}

	.bg-login h2 {
		position: relative;
		float: left;
		width: 100%;
		font-size: 20px;
		line-height: 10px;
		font-weight: 600;
		color: #fff;
		padding: 1.5rem 0;
		/*font-size: 24px;
		line-height: 32px;
		font-weight: 100;
		margin-bottom: 5px;
		color: #fff;
		text-shadow: 0px 2px 2px rgba(0,0,0,0.5);*/
	}	

.formlogin {
	width: 100%;
	float: right;
	position: relative;
	padding: 10px 30% 0 30%;
	z-index: 1;	
/*	background: #535C68;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);*/
}
.bg_login{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 377%;
    height: 100%;
    background: url(../images/bg_login.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-attachment: scroll;
    z-index: 1;
    /* filter: drop-shadow(10px -12px 0px #8ecee0);*/
}
.bg_login_corner{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/bg_login_corner_.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-attachment: scroll;
	z-index: 1;
	/* filter: drop-shadow(10px -12px 0px #8ecee0);*/	
}
.formlogin .error{color: #f00;}

	.formlogin:before {

	}
	.username {
		width:100%;
		float:left;
		background: url(../images/username.png)no-repeat 12px;
		filter: hue-rotate(35deg);
		margin-bottom:20px;
		border-bottom: 1px solid rgba(172, 172, 172, 0.5);
	    /*border-left: 3px solid #299fc1;*/
		border-radius: 0;
	}
	.usernameinner, .passwordinner {
		margin-left:35px;
		border-left:0px solid #d8d8d8;
	}
	.usernameinner > label, .passwordinner > label{
		top: 1rem;
		right: 0rem;
	}
	.password {
		width:100%;
		float:left;
		background: url(../images/password.png)no-repeat 12px;
		filter: hue-rotate(35deg);
		margin-bottom: 20px;
		border-bottom: 1px solid rgba(172, 172, 172, 0.5);
	    /*border-left: 3px solid #299fc1;*/
		border-radius: 0;
	}
	.logo_login {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		width: 120px;
		height: 120px;
	    border: 2px solid #4c7090;
		border-radius: 50%;
		background: #fff;
		padding: .3rem;
		z-index: 2;
	}
		.formlogin h1 {
			font-size: 24px;
			line-height: 32px;
			font-weight: 600;
			margin-bottom: 10px;
			text-align: center;
			color: #35b4cf;
			padding-bottom: 1rem;
			text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		}
		.logo_login img {
			width: 100%;
			border-radius: 50%;
			background: #fff;
			filter: drop-shadow(4px 6px 4px rgba(0,0,0,.13));
			/*border-radius: 50%;
			background: #fff;
			padding: 1rem;
			width: 100px;*/
		}
		.formlogin input[type=text],
		.formlogin input[type=password] {
			position: relative;
			top: unset;
			right: unset;
			width: 100%;
			padding: 10px;
			border:0px solid rgba(0,0,0,0);
			border-radius: 5px 0 0 5px;
			background: transparent;
			margin-bottom:0px;
			font-size: 13px;
			color: #464646;
		}
		.bg_login_ornament{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

		}
		.formlogin input::placeholder {
		  color: #ccc;
		  opacity: 1; /* Firefox */
		}

		.formlogin input:-ms-input-placeholder { /* Internet Explorer 10-11 */
		 color: #ccc;
		}

		.formlogin input::-ms-input-placeholder { /* Microsoft Edge */
		 color: #ccc;
		}
	.formlogin input[type=submit] {
		width:100%;
		padding:10px;
	}
	#proses_login {
		width:100%;
		float:left;
		margin-bottom:5px;
		text-align:center;
		color:#f00;
		letter-spacing:1px;
		text-transform:uppercase;
	}
	#prosesdata{
		padding: 0 1rem;
		font-style: italic;
	}

.ribbon{
	width:100%;
	color: #fff;
	margin: 5px 0px 15px;
	position: relative;
	text-transform: uppercase;
	background: #009B4A;
	border: 1px solid rgba(0,0,0,.3);
	box-shadow: 0px 1px 3px rgba(0,0,0,.2);
	padding: 10px 15px;
	clear: both;
}
 
div.left_ribbon{
	color: #fff;
	margin-left: -25px;
	float: left;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}
 
div.left_ribbon h2{
	margin: 0 12px;
}
 
div.left_ribbon::before{
	display: block;
	width: 10px;
	height: 0px;
	position: absolute;
	bottom: -10px;
	left: -11px;
	content: "";
	border-bottom: 10px solid transparent;
	border-right: 10px solid #331d0a;
}	

/*progress*/
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran 1080px kebawah */
@media screen and (max-width: 1024px) {

	.container {
		width: 100%;
	}
	.logo {
		width:20%;
	}
	.kiri {
		width:220px;
	}

	.kanan {
		width: 100%;
		top: 74.5px;
	}
	h1.juduldata {
	}
	.data input[type="button"] {
		margin-right:10px;
	}
	#cssmenu {
		top:72px;
	}
	.menu {
		/*top:18px;*/
	}
	.displaydata {
	}
	.container_table {
		height:285px;
	}
}


/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {
	.formlogin {
		width:100%;
	}
	.header,
	.footer{
		text-align: center;
	}
	.logo {
		width:100%;
	}
	.kiri {
		width: 220px;
		float: left;
	}

	.middle {
		width: auto;
		float: none;
	}

	/*.kanan {
		width: auto;
		float: left;
	}*/

}

/*BIG EDIT*/
/*untuk tab form dan tabdata*/
#formdata {
	position: relative;
	float:left;
	width: 100%;
	padding: 15px 15px 5px 15px;
}
#formdata .tabs + br{
    display: none;
}
.sub_formdata{
	position: relative;
	float:left;
	width: 100%;
	overflow: auto;
	min-height: auto;
    max-height: 265px;
}
.content_dialog{
	padding: 15px;
	padding-top: 5px;
	position: relative;
	float: left;
	width: 100%;
}
#formdata > .tabs + .button_formdata_wrap, #formdata > .tabs + br + .button_formdata_wrap{
	margin-top: 0 !important;
}
#formdata #tabdata div.datalabel{
	margin-bottom: 10px;
	border: 0px solid #000;
	width: 300px;
	min-height: 20px;
	float: left;
}
#formdata #tabdata .formulir{
	clear: left;
	float: left;
	width: 150px;
}
#formdata .ui-tabs .ui-tabs-panel{
	padding: 1em 0.4em !important;
	height: 245px;
	overflow: auto;
}

/*table fix header untuk function style_tablefix()*/
.blok_table {position: relative;padding-top: 32px;}
.blok_table .container_table {overflow-y: auto;}
.blok_table table {
  border-spacing: 0;
  width:100%;
	background: #fff;
}
.blok_table th {
	white-space: nowrap;
}
.blok_table th {
  height: 0;line-height: 0;padding-top: 0;padding-bottom: 0;
}
.blok_table th:first-child{
	width: 2%;
}
.blok_table th div{
	padding: 9px 25px;
}
.blok_table th div{
	width: 100%;
	position: absolute;
	padding: 12px 25px;
	padding-left: 10px;
	top: 0;
	margin-left: -13px;
	line-height: normal;
	color: #fff;
	border: 1px solid #ccc;
background: rgba(73,155,234,1);
background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=0 );

}
.blok_table td{padding-right: 5px;padding-left: 5px;}
.double_wrap{
	position: relative;
	float: left;
	width: 100%;
	display: flex;
}
.double_wrap .formulir:first-child{
	width: 59% !important;
}
.double_wrap > .input_wrap + .formulir{
	padding-left: 1rem;
}
.layer_close_dropdown{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #000;
}
/*data double table */
.subdata_1{
	width: 21%;
	float: left;
	border: 0px solid rgba(0,0,0,.125);
	border-radius: 5px;
	-webkit-box-shadow:2px 6px 15px 0 rgba(69,65,78,.1);
	box-shadow:2px 6px 15px 0 rgba(69,65,78,.1);
	-moz-box-shadow:2px 6px 15px 0 rgba(69,65,78,.1);
	background: #fff;
	overflow: hidden;
	position: sticky;
	top: -1rem;
	/*position: relative;*/
    margin-bottom: 2rem;
	/*position: absolute;*/
	/*width: 225px;*/
    /*border-right: 1px solid #ccc;*/
	z-index: 2;
}
.subdata_1 > h2{
    border-bottom: 1px solid #bee1ff;	
    border-top: 3px solid #5bb0fc;
    font-weight: 700;
}
	.subdata_1 .boxes {
		height: 398px;
		border: 1px solid #bce8f1;
		margin-right: 5px;
		position: relative;z-index: 1;
		overflow-y: auto;
		overflow-x:hidden;
		background:#d9edf7;	
	}
.displaydata .subdata_1 > ul {
	padding:10px;
	border:0px solid #ddd;
	background: transparent;
	/*height: 63vh;*/
	height: 80vh;
	/*min-height: 56vh;*/
	/*max-height: 162vh;*/
	overflow-y: auto;
	overflow-x: unset;
}

.displaydata .subdata_1 ul li {
    list-style-type: none;
    margin-bottom: 8px;
    border-bottom: 1px dashed #d0d0d0;
	background:url(../images/lists.png)no-repeat left top;
	position: relative;
	padding-bottom: 4px;
	padding-left: 27px;
}


.displaydata .subdata_1 ul li:last-child {
	margin-bottom: 5px;
}

.displaydata .subdata_1 a {
    cursor: pointer;
	color: #515151;
	transition: all .3s;
}
.displaydata .subdata_1:first-child a {
    cursor: pointer;
    text-transform: capitalize;
}
.displaydata .subdata_1 a:hover {
    color: #5bb0fc;
}
	ul.sublembaga {
		padding: 0 !important;
		margin-left: 19px;
		margin-top: 0 !important;
		height: auto !important;
		overflow: unset !important;
	}
	ul.sublembaga li a {
		color:#028cfb !important;
	}
	ul.sublembaga li a:hover {
		color:#888 !important;
	}	
	ul.sublembaga li:last-child {
		margin-bottom: 10px !important;
	}
	ul.sublembaga li {
		border-bottom: 0 !important;
		border-left:1px solid #028cfb;
		margin-bottom: 0 !important;
		padding-bottom: 5px !important;
		background:none !important;
		padding-left: 10px !important;
	}
	ul.sublembaga li:before {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		top: 5px;
		left: -5px;
		background: #028cfb;
	}
ul.loadsubmenu{
	height: 0;
    padding: 0 10px !important;
    margin-bottom: .5rem;
    border: 0px solid #ddd !important;
    background: #fff !important;
    min-height: 0 !important;
    max-height: 421px !important;
    overflow-y: auto !important;
    overflow-x: unset !important;
    transition: all .3s;
}
ul.subkota{
	height: 0;
    padding: 0 10px !important;
    margin-bottom: .5rem;
    border: 0px solid #ddd !important;
    background: #fff !important;
    min-height: 0 !important;
    max-height: 421px !important;
    overflow-y: auto !important;
    overflow-x: unset !important;
    transition: all .3s;
}
.displaydata .subdata_1 ul ul li{
	background-image: unset;
	border-bottom: unset;
}
.displaydata .subdata_1 ul ul li:before{
	content: '';
	position: absolute;
	background: #fff;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid #aaa;
	top: .2rem;
	left: .4rem;
	z-index: 2;
}
.displaydata .subdata_1 ul ul li:after{
	content: '';
	position: absolute;
	background: #fff;
	width: 1px;
	height: 100%;
	background: #ddd; 
	top: .7rem;
	left: .7rem;
	z-index: 1;
}
.displaydata .subdata_1 ul ul li:last-child:after{
	display: none;
}
.subdata_2{
	width: 78%;
	position: relative;
	float: right;
    /*width: 100%;*/
    /*padding-left: 235px;*/
    /*margin-bottom: 5rem;*/
    max-height: unset;
	border: 0px solid rgba(0,0,0,.125);
	/*-webkit-box-shadow:2px 6px 15px 0 rgba(69,65,78,.1);
	box-shadow:2px 6px 15px 0 rgba(69,65,78,.1);
	-moz-box-shadow:2px 6px 15px 0 rgba(69,65,78,.1);*/
	background: #f9fbfd;
	border-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
    margin-bottom: 2rem;
	z-index: 1;
}
.subdata_2 table{width: 100%;}
.subdata_2 select {padding: 7px !important;}
/*.subdata_2 input[type=search] {padding:6px 10px !important;}*/
/*filterdata*/

.filterdata{
	width: 81%;
	padding:3px;
	position: fixed;
	left: 19%;
	bottom: 0;
	z-index: 2;
	border-top: 1px solid #999;border-bottom: 1px solid #999;
	background: #e5e5e5 url(../images/bg-content-box.gif)repeat-x top left;
}
.filterdata div{padding: 5px;}
.filterdata  select option{
	padding: 3px;
}
.filterdata select {
    width:auto;
	margin-bottom:0;
	vertical-align:middle;
	background:#fff;
	border:1px solid #cbcbcb;
}
.loadfilterdata{
	width: 300px;
	height: 70px;
	/*height: 130px;
	overflow: hidden;*/
	border: 1px solid #ccc;
	position: absolute;
	z-index: 10;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0; /*center absolute*/
	text-align: center;
	padding: 5px;
	background-color: #666;
	color: #fff;
	border-radius: 5px;
}
.loadfilterdata img{width: 40px;}

/*jquery*/
.ui-autocomplete {
	width: 300px;
	max-height: 200px;overflow: auto;
	overflow-x: hidden;
}

.textcenter{
	text-align: center;
	vertical-align: middle;
}
.td_nominal{
	text-align: right;margin-right: 10px;
}
.jodit-container + .input_wrap > .error{
	top: -18.2rem !important;
	right: -8rem !important;
}
.error{
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: auto;
    height: auto;
	color: red;
}
select+.error{
	right: 1.5rem !important;
}
form label.error{margin-left: -18px;margin-top: -8px;}
.errorbox{
	position: absolute;
	top: 0;bottom: 0;left: 0;right: 0;margin: auto; /*center vertikal*/
	height: 40px;
	width: 100%;
}
.errorcontent{
	float: left;
	border: 1px solid #e6db55;
	background-color: #fffbcc;
	width: 100%;
	min-height: 30px;
	text-align: center;
	vertical-align: middle;
}

/*pengaturan*/
.sortmenu{
	padding-top: 0 !important;
}
.sortmenu ul{
	padding: 0;
	margin: 0;
	list-style: none;
	width: 600px;
}
.sortmenu ul li:first-child{
	padding-top: 0 !important;
}
.sortmenu ul li:last-child{
	margin-bottom: 3rem;
}
.sortmenu ul li{
	position: relative;
    float: left;
    width: 555px;
    height: 35px;
    padding: .3rem 0;
    margin-bottom: 1rem;
    border-radius: 4px;
    background: transparent;
    border: unset;
    left: unset !important;
}
.sortmenu ul li:after{
	content: "";
	position: absolute;
	top: .8rem;
	left: .1rem;
	height: 20px;
	width: 20px;
	z-index: 2;
	background-image: url(../images/list.svg);
	background-repeat: no-repeat;
	background-size: contain;
	filter: grayscale(1);
}
.sortmenu .namamenu{
	position: absolute;
	top: .5rem;
	left: 2.5rem;
	width: 200px;
}
.sortmenu .namamenu input[type=text]{
	margin-bottom: 0 !important;
	height: 26px;
	width: 100% !important;
	padding: 0;
	border: unset;
	border-radius: 0;
	border-bottom: 1px dashed #aaa;
}
.sortmenu .iconmenu{
	position: absolute;
	top: .65rem;
	right: 13.5rem;
	border: 1px solid #afafaf;
	width: 35px;
	height: 35px;
	padding: .4rem;
	border-radius: 50%;
    background: #cee1ff;
    text-align: center;
}
.sortmenu .iconmenu img{
	width: 100%;
}
.iconmenu .updatelogo{
    position: absolute;
    top: .3rem;
    right: -5.5rem;
    background-color: #ffffff;
    text-align: center;
    cursor: pointer;
    width: 77px;
    height: auto;
    font-size: 12px;
    color: #0982d0;
    transition: all .3s;
    border: 1px solid #0982d0;
    border-radius: 3px;
    padding: .1rem .3rem;
}
.iconmenu .updatelogo:hover{
	opacity: .8;
	background: #0982d0;
	color: #fff;
}
.iconfa{
	position: relative;
    float: left;
    width: auto;
	padding: .5rem;
	transition: all .3s;
}
.iconfa:hover{
    color: #66b1fc;
}
.simpandata_label_wrap{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 0;
}
.simpandata_wrap{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 3rem;
}
.simpandata{
	position: absolute;
    bottom: .95rem;
    left: 2.8rem;
    width: auto;
    height: auto;
}
/*.sortmenu ul{width: 400px;margin-bottom: 10px;}
.sortmenu ul li{border: 1px solid #999;width: 250px;height: 40px;padding: 3px;margin-bottom: 5px;padding-right: 10px;}
.sortmenu .namamenu{width: 180px;float: left;}
.sortmenu .namamenu input[type=text]{width: 100%;}
.sortmenu .iconmenu{float: left;margin-left: 10px;position: relative;border: 0px solid #000;}
.iconmenu .updatelogo{position: absolute;top:0;margin-top: 5px;right: -70px;z-index: 10;border: 1px solid #999;padding: 2px;
	background-color: #FFFBD0;cursor: pointer;
}
.iconmenu .updatelogo:hover{background-color: #FFCF75;}*/
.previewlogo{
	border: 0px solid #000;width: 100px;height: 100px;
	position: absolute;left: 40%;overflow: hidden;left: 55%;top: 2rem;
}
.previewlogo img{
	width: 100%;
}


.just_desktop{
  display: none;
  position: relative;
  float: left;
  width: 100%;
  height: 100vh;
  min-height: 1px;
  font-size: 20px;
  text-align: center;
}

.device_alert{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 350px;
  height: 140px;
  background: #fff8f0;
  padding: 1rem .5rem;
  border-radius: 10px;
  border: 1px solid #ffd993;
}

.device_alert .image{
  margin: 0 auto;
  width: 60px;
}

.device_alert .image img{
	width: 100%;
}

.device_alert h1{
	font-size: 12px;
}
.messages_resize{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 110px;
	width: 50%;
}
.messages_resize h1{
	position: relative;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #0096e0;
}
.dataTables_wrapper > .ui-widget-header{
	border:  0 !important;
	background: #fff !important;
}
.pure-table{
	border: 0 !important;
}
.pure-table thead{
	white-space: nowrap;
}
table.dataTable tbody th, table.dataTable tbody td {
    padding: 8px;
}
table.dataTable thead th.ui-state-default:first-child, table.dataTable tfoot th.ui-state-default:first-child{
	border-left-width : 0 !important
}
.tabledatapemasukan{
	border: 1px solid #cbcbcb !important;
}
.dataTables_wrapper{
	padding: .5rem 1rem;
	border-radius: 5px;
	background: #fff;
	box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
	-moz-box-shadow: 3px 5px 7px rgba(0,0,0,.13);
}
.dataTables_scroll{
    border: 1px solid #ddd;
    /*max-height: 322px;
    overflow: auto;*/
}
.dataTables_scrollBody{
    /*max-height: 50vh !important;*/
    max-height: unset !important;
}
.subdata_2 .dataTables_scrollBody{
	max-height: unset !important;	
}

/*.displaydata.double .subdata_2 .dataTables_filter{
    position: absolute;
    top: -5.8rem;
    right: 8rem;
    width: auto;
    height: auto;
}
.displaydata .dataTables_filter{
    position: absolute;
    top: -3.4rem;
    right: 8rem;
    width: auto;
    height: auto;
}*/
/*#DataTables_Table_2_filter {
    position: absolute;
    top: -3.4rem;
}*/
.dataTables_filter input{
	padding: 9px !important;
	width: 300px;
	border-radius: 5px;
	border: 1px solid #aaa;
}
.dataTables_length select{
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 5px 10px !important;
	background: unset;
}
table.dataTable thead th.ui-state-default, table.dataTable tfoot th.ui-state-default, table th{
	background: #dbf1ff !important;
	color: #1a7cfb !important;
}
table tbody td:last-child{
	text-align: center;
    padding: 8px 0px !important;
}
table tbody td:last-child .link_editor, table tbody td:last-child a{
	padding: 0 .3rem;
}
.container{
	padding: 0 !important;
	max-width: unset !important;
}
.html body .card{
	border-radius: unset !important;
}
.events-input{
	padding: 0 !important;
	margin: 0 !important;
	height: 40px;
}
select, select.form-control{
	background-image: unset !important;
}
.sub-shortcut{
	position: absolute;
	width: 100%;
	right: -176px;
	top: 25px;
	z-index: 20;
	background-color: #fff;
	box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.4);
	transition: ease 3s;
	border-radius: 5px;
}
.sub-shortcut::before{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	transform: rotate(45deg);
	z-index: -1;
	position: absolute;
	top: 70px;
	left: -8px;
	/*background: #fff;
	box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.4);*/
}
.judul-sub-shortcut{
	color: #fff;
	background: rgb(122, 122, 122);
	font-size: 14px;
	text-align: left;
	padding: 5px;
	border-radius: 5px 5px 0 0;
}
.sub-shortcut ul li{
	text-align: left;
	width: 100%;
	color: #666;
	height: unset;
	min-height: unset;
	margin: 0;
	padding: 5px;
	box-shadow: unset;
	border-bottom: 1px solid #f2f2f2;
}
.bodymask{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	display: none;
}
.search-home{
	position: absolute;
	width: 340px;
	height: auto;
	top: .75rem;
	left: 18rem;
	z-index: 2;
	margin: 0;
}
.search-home i{
	color: rgb(79, 155, 255);
    font-size: 19px !important;
    position: absolute;
    top: .45rem;
    right: 2.5rem;
}
.search-home input{
	width: 92% !important;
	height: 100%;
	margin-bottom: 0;
	border-radius: 4px;
	font-size: 14px;
	border: 1px solid rgba(0, 0, 0, 0) !important;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1) !important;
}
.search-home input:focus{
	background: #fff;
	box-shadow: 2px 2px 10px rgba(0, 81, 255, 0.1) !important;
}
.search-home > form{
	position: relative;
}
.search-home > form > input{
	padding-right: 3rem;
}

.confirm_custom{
	width: 500px;
	margin: 0 auto;
	
}
.export_result{
    position: absolute;
    line-height: 45px;
    padding-left: .9rem;
    right: 0;
    background: #fff;
    z-index: 1;
    font-size: 13px !important;
    width: 100%;
}
.export_result a{
    margin-left: .6rem;
    border: 1px solid #087efb;
    background: #ecf5ff;
    color: #087efb !important;
    padding: .5rem .8rem;
    border-radius: 5px;
    transition: all .3s;
}
.export_result a:hover{
    background: #087efb;
    color: #fff !important;
}
.event-indicator > .type-bullet{
    position: fixed;
    top: -1.05rem;
    left: -1.85rem;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
}
#foto{
    display: flex;
    align-items: center;
    justify-content: center;
}

.tahun_ajaran{
	position: relative;
	float: left;
	width: auto;
	margin-bottom: 1rem;
	margin-top: .5rem;
}

.tahun_ajaran .select_autocomplete{
	float: right;
	border: 1px solid #aaa;
	border-radius: 4px;
  background: #fff;
	padding: .35rem 1rem;
	color: #515151;
}
.button_history_transaksi_masuk,
.input_transaksi{
	border: 1px solid #aaa;
  border-radius: 4px;
  padding: .4rem 1rem;
  position: relative;
  top: -4px;
  background: #fff;
}
.close_submenu{
	display: none;
  position: fixed;
  padding: 5px;
  left: 16.5rem;
  margin-top: 0.35rem;
  font-size: 22px;
  background: #ffffff;
  color: rgb(26 124 251);
  border-radius: 0 50% 50% 0;
  box-shadow: 0px 1px 5px rgb(0 0 0 / 18%);
  cursor: pointer;
}

/*Start responsive*/
@media screen and (max-width: 2560px){

}

@media screen and (max-width: 1920px){
	.subdata_1 {
	    width: 15%;
	}
	.subdata_2 {
	    width: 84%;
	}
	/*.displaydata .subdata_1 ul {
	    max-height: 105vh;
	}*/
}

@media screen and (max-width: 1440px){
	/*.displaydata .subdata_1 ul {
	    max-height: 162vh;
	}*/
	.subdata_1 {
	    width: 21%;
	}
	.subdata_2 {
	    width: 78%;
	}
}

@media screen and (max-width: 1199px){

}

@media screen and (max-width: 1100px){
	.just_desktop{
		display: block;
	}
	.this_desktop{
		display: none;
	}
}

@media screen and (max-width: 1024px){
	.shortcut ul li{
		width: 50%;
	}
	.sub_home_right{
		width: 100%;
	}
	.home_right .calendar_wrap{
		margin-bottom: 2rem;
	}
	.sub_home_right:nth-child(2){
		width: 100%;
	}
}

@media screen and (max-width: 991px){

}

@media screen and (max-width: 768px){
	.welcome_dashboard{
		padding-left: 45px;
	}
	.broadcast_button span > b{
		display: none;
	}
	.broadcast_button{
		width: auto;
	}
	.logo > span {
    width: 120px;
  }
  .menu{
  	z-index: 4;
  }
  .avatar_user_wrap{
  	right: 1rem;
  }
  .sub_shortcut_icon img {
	  width: 25px;
  }
  .sub_shortcut_label {
    font-size: 10px;
    line-height: 12px;
  }
  .sub_shortcut_wrap{
  	padding-left: 0;
  	padding-right: 0;
  	height: auto;
  }
  .wrap_home {
		width: 100%;
  }
  .shortcut ul li{
  	padding-bottom: 0;
  }
  .menu li a .fa, .menu li a .fas, .menu li a .far{
  	margin-right: 0;
  }
  .menu_slim .wraphead .front-title > ul > li > a .icon{
  	margin-right: 0;
  }
  .kanan {
      top: 56.5px;
      padding: 1rem;
      padding-left: 4rem;
  }
  .kanan > h1.juduldata {
      background: url(../images/files.png) no-repeat 5px 17px;
      font-size: 14px;
	}
	.broadcast_button span {
    padding-right: 65px;
  }
  .close_submenu{
  	display: block;
  }
  .data input[type=button]{
  	margin-right: 0;
  }
  .kanan > h1.juduldata {
    top: 2.7rem;
    left: 60px;
  }
  .breadcrumbs_wrap {
    padding-left: 0.5rem;
    padding-bottom: .1rem;
    padding-top: .3rem;
	}
	.breadcrumbs_wrap ul li{
		font-size: 10px;
	}
	.breadcrumbs_wrap ul:before,
	.breadcrumbs_wrap:before,
	.breadcrumbs_wrap:after
	{
		display: none;
	}
 	.dataTables_filter {
    position: unset;
    top: unset;
    right: unset;
    height: unset;
    width: unset;
	}
	.dataTables_paginate {
    position: unset;
    top: unset;
    right: unset;
    width: unset;
    height: unset;
	}
	.subdata_1{
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    display: none; 
	}
	.subdata_2 {
    width: 100%;
	}
	.displaydata .app_default{
		width:  100%;
	}
	.formulir{
		width: 100%;
	}
}

@media screen and (max-width: 425px){
	.calendar-sidebar > .calendar-year{
		padding:  10px 20px !important;
	}
  .arrow_sidebar, .arrow_sidebar_show{
   	display: none !important;
  }
  .dataTables_filter input{
		width: 93%;
		margin-left: 0px !important;	
	}
	.inside_button{
    width: 95%;
    text-align: center;
	}
	.inside_button button{
		float: unset;
		text-align: center;
    margin: 0 .2rem !important;
	}
	.ui-dialog{
		width: 95% !important;
	}
	.sortmenu ul{
		width: 100%;
	}
	.sortmenu ul li{
		width: 100%;
	}
	.sortmenu .iconmenu {
    top: 0.2rem;
    right: 5.5rem;
  }
  .sortmenu .namamenu input[type=text]{
  	border-bottom: unset;
  }
  .previewlogo {
	  border: 0px solid #000;
	  width: 50px;
	  height: 50px;
	  position: absolute;
	  overflow: hidden;
	  left: 31px;
	  top: 1rem;
  }
  .input_wrap .select2 .select2-selection .select2-selection__rendered {
      height: 30px;
  }
  .input_wrap{
  	width: 100%;
  }
  #eventListToggler{
  	display: none;
  }
  .menu_slim .wraphead .front-title > ul > li > a.logout .label_menu{
  	visibility: unset !important;
  	position: relative;
  	border: unset;
  	background: transparent;
  	box-shadow: unset;
  	color: #515151;
  	left: unset;
  	top: unset;
  	border-radius: unset;
  	padding: 0rem;
  }
  .menu_slim .wraphead .front-title > ul > li > a.logout .label_menu:before{
  	display: none;
  }
  .bungkuslogin_left{
  	display: none;
  }
  #bungkuslogin{
  	width: 100%;
  }
  .formlogin {
    padding: 10px 10% 0 10%;
  }
  .logo_login_tmp{
  	display: block !important;
  	position: relative;
    top: -2rem;
  }
  .logo_login_tmp .logo_login {
    width: 70px;
    height: 70px;
  }
  .app_no_button .app_default{
  	min-height: 285px;
  }
}

@media screen and (max-width: 375px){
	.shortcut ul li{
		width: 100%;
	}
}

@media screen and (max-width: 320px){

}
/*End Responsive*/

.data-person-block1{
        padding-left: 1rem;
        padding-bottom: 0.2rem;
        position: relative;
        display: block;
        line-height: 0;
        display: block;
        float: left;
        width: 11%;
        height: auto;
        /*border: 1px solid #000;*/
    }
    .data-person-block2{
        /*padding-left: 0.4rem;*/
        padding-bottom: 0.2rem;
        position: relative;
        display: block;
        line-height: 0;
        display: block;
        float: left;
        width: 19%;
        height: auto;
        /*border: 1px solid #000;*/
    }
    .data-person-data1{
        /*padding-left: 0.4rem;*/
        padding-bottom: 0.2rem;
        position: relative;
        display: block;
        line-height: 0;
        display: block;
        float: left;
        width: 44%;
        height: auto;
        /*border: 1px solid #000;*/
    }

    .data-person-data2{
        /*padding-left: 0.4rem;*/
        padding-bottom: 0.2rem;
        position: relative;
        display: block;
        line-height: 0;
        display: block;
        float: left;
        width: 25%;
        height: auto;
        /*border: 1px solid #000;*/
    }
    .data-person-block1,.data-person-block2, .data-person-data1,.data-person-data2 h4{
        color: #5b5b5b;
    }