@font-face {font-family: 'Cuprum';font-style: normal;font-weight: 400;src: local('Cuprum'), local('Cuprum-Regular'), url(cyrillic.woff2) format('woff2');unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Cuprum';font-style: normal;font-weight: 400;src: local('Cuprum'), local('Cuprum-Regular'), url(latin-ext.woff2) format('woff2');unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Cuprum';font-style: normal;font-weight: 400;src: local('Cuprum'), local('Cuprum-Regular'), url(latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}
::-webkit-scrollbar {width: 9px; height:3px;}
::-webkit-scrollbar-track {    background-color: rgba(255,255,255,0.41);    border-left: 0px solid rgba(255,255,22255,0.11);}
::-webkit-scrollbar-thumb {    background-color: rgba(39,61,68,0.89); border-radius:0px;}
::-webkit-scrollbar-thumb:hover {	background-color:rgba(39,61,68,0.99);}
a,a:hover{text-decoration:none; cursor:pointer; color:#777;}

body{padding:0; margin:0; overflow-x:hidden; font-family: 'Cuprum' !important; position:relative; background-color: #fafafa; color: #777;}


.bg-gray{ color: #333; background-color: #DADADA !important;}



h1,h2,h3,h4,h5,h6{font-family: 'Cuprum' !important; }
.wrapper{width:100%; min-width:313px; text-align:center; position:relative; z-index:1;}
.container{width:100%; max-width:none; margin:0 auto; text-align:left; position:relative; z-index:2;}
.content-wrapper > section > .container{padding:61px 313px 191px 65px; overflow: hidden;}
body.welcome .content-wrapper > section > .container{padding:79px 0 191px 71px;}


.slidebox{padding:11px 0 !important;}
.slidebox ul,.slidebox ul li{padding:0; list-style:none;}


.rightAside{background:rgba(181,204,0,.71); position:fixed; bottom:0; overflow-x:hidden; overflow-y:scroll; padding:71px 9px; right:-333px; top:0; width:313px; transition:all .41s; z-index:2; box-shadow:0 -5px 9px rgba(0,0,0,.41);}
.rightAside.open{ right:-1px;}
.rightAside .btnClose{position:fixed; top:9px; right:9px; z-index:9;}

.alamat{z-index:11;}
.list-autocomplate{position:absolute; bottom:37px; right:5px; padding:0; z-index:9; left:5px; border-radius:4px 4px 0 0; background-color:#fff; box-shadow:0 0 3px rgba(0,0,0,.21); margin:0 !important; padding:0 !important; border:none !important;}
.list-autocomplate > button{border-radius:0; margin:0; border:none;text-align:left;}
.list-autocomplates{position:relative; padding:2px 3px; border:solid 1px #ccc; border-radius:4px;}


form #proses { display:none; border: 1px solid #25bdef;    padding: 3px;	z-index:9;    position:absolute;	bottom:49px; left:0; right:0;    border-radius: 3px;    margin: 10px;    text-align: left;    background: #fff; z-index:9;}
form #proses .progress-bar{    height: 9px;    border-radius: 3px; width:0;}
form #proses .status{ font-size:9px; line-height:9px;   top:3px;    left:50%;    position:absolute;    display:inline-block;    color:#25bdef;}
form:after{position:absolute; top:0; left:0; right:0; bottom:0; content:''; border-radius:3px; z-index:7; background-color:rgba(255,255,255,.41); display:none; }
form.proses:after,form.proses #proses{ display:block;}


.bg-online{background-color:#42B72A !important;}
.text-online{color:#42B72A !important;}
.border-online{border-color:#42B72A !important;}



.menuQ{display:none;}
.NUmenu{position:fixed; top:0; left:0; right: 0; z-index:3;}
.NUmenu > .top{ position: relative; background-color: #F2F2F2; box-shadow: 0 3px 5px rgba(0,0,0,.21); height: 49px; z-index: 1;}
.NUmenu > .top img{width: 41px; height: 41px; margin: 4px 9px;}
.NUmenu > .top .logo{float: left;}
.NUmenu > .top .user,
.NUmenu > .top .icon{display: inline-block; width: 41px; text-align: center; position: relative; vertical-align: top; margin-right: 15px;}
.NUmenu > .top .icon .btn-lg{ width: 41px; height: 49px; padding: 11px 3px; font-size: 21px; }
.NUmenu > .top .user .photo{ width: 41px; height: 41px; display: inline-block; background-size: cover; border: solid 1px #fafafa; background-position: top center; margin: 4px 0 0 0; box-shadow: 0 0 7px 0px rgba(0,0,0,.11); border-radius: 50%;}
.NUmenu > .top .icon .dropdown-menu,
.NUmenu > .top .user .dropdown-menu{min-width: 313px; max-height: 333px; padding: 0; overflow-y: scroll; overflow-x: hidden; }
.NUmenu > .top h3{margin: 0; font-size: 21px; line-height: 19px; margin-top: 15px;}
.NUmenu > .top h6{margin: 0; font-size: 11px; line-height: 9px; color: #999;}
.NUmenu > .top .input-group{ margin-top: 9px;}

.NUmenu > .top .icon .dropdown-menu li.pad{font-size: 11px; padding: 1px 9px;}
.NUmenu > .top .icon .dropdown-menu li.pad small{float: right;}

.NUmenu > .top .search{padding: 7px 0 0 0; position: relative;}
.NUmenu > .top .search input{border-radius: 3px; margin: 0; width: 100%; position: relative; z-index: 1; border: solid 1px #ededed;}
.NUmenu > .top .search button{position: absolute; top: 9px; right: 2px; background-color: #fafafa; z-index: 2;}
.NUmenu > .top .search .progress{position: absolute; top: 41px; height: 1px; left: 0; width: 0%; border-left: solid 3px #F2F2F2; border-right: solid 3px #F2F2F2; background-color: #999; z-index: 3; margin-top: 1px;}
.NUmenu > .top .search ul{ position: absolute; top: 5px; left: -2px; right: -2px; padding-top: 38px; z-index: 0; background-color: #F2F2F2; max-height: 313px; border-radius: 4px; overflow-y: scroll; overflow-x: hidden; margin: 0; box-shadow: 0 0 3px 0 rgba(0,0,0,.11);}

.NUmenu > .top .search ul li.pad{padding: 3px 9px; font-size: 9px; color: #999 !important;}


.NUmenu > .left,.NUmenu > .right{position: fixed; box-shadow: 1px 0 3px rgba(0,0,0,.07); left: 0; top: 41px; padding: 9px 0 0 0; margin: 0; bottom: 0; overflow-y: scrool; background-color: #F2F2F2; border-right: solid 1px #DFDFDF; z-index: 0;}
.NUmenu > .left li{position: relative; margin:0; padding:0;}
.NUmenu > .left li a{min-height:42px; width: 71px; display: block; transition: width .11s; padding: 9px 21px 9px 9px; white-space: nowrap; line-height: 21px; border-bottom:solid 1px #DFDFDF; overflow: hidden;}
.NUmenu > .left:hover li a{width:auto;}
.NUmenu > .left li:hover > a,.NUmenu > .left li.online > a{ background-color: #DFDFDF;}
.NUmenu > .left li a span{display: inline-block;}
.NUmenu > .left li a b.fa{font-size: 17px; width: 49px; margin-right: 9px; display: inline-block;}
.NUmenu > .left li a b.fi{font-size: 17px; text-align: center; width: 49px; margin-right: 9px; display: inline-block;}
.NUmenu > .left li a b.fi small{font-size: 9px; line-height: 9px; display: inline-block; text-align: center;}
.NUmenu > .left li a b.fi small small{display: block;}
.NUmenu > .left li a b.fi .badge{position: absolute; top: 3px; left: 0; font-size: 9px; padding:2px 3px 2px 2px; border-radius:0 2px 2px 0;}
.NUmenu > .left li a b.fi .badge+.badge{ top: 21px;}
.NUmenu > .left li.online a b.fi:after,
.NUmenu > .left li.kuliahOn a b.fi:after{content: ''; position: absolute; top: 9px; z-index: 99; right: -11px; border: solid 2px #DFDFDF; background-color: #42B72A; width: 21px; height: 21px; border-radius: 50%;}
.NUmenu > .left li.kuliahOn a b.fi:after{background-color: red !important;}
.NUmenu > .left li a i.fa.fa-chevron-right{ position: absolute; top: 15px; right: 5px; color: #999; font-size: 7px;}
.NUmenu > .left li:hover > a{background-color:rgba(0,0,0,.09);}
.NUmenu > .left li ul{display:none; box-shadow:inset 1px 0 3px rgba(0,0,0,.07); border:solid 1px #DFDFDF; border-left: none; background-color: #ededed;  border-bottom: none; border-left: none; position: absolute; left: 100%; top:-1px; margin:0 0 0 1px; list-style: none; padding: 0;}
.NUmenu > .left li:hover > ul{display:block;}
.NUmenu > .left:hover ul a{width: auto;}
.NUmenu > .left ul li a b{display: inline-block; min-width:71px; font-weight: normal;}
.NUmenu > .left ul li a .badge{font-size: 11px; font-weight: normal; border-radius: 3px;}
.NUmenu > .left li ul.ul{top:auto; bottom:0px;}





.NUmenu > .right{ max-width: 313px; width: 313px; left: auto; padding-bottom: 49px; right: 0; transition: all ease-in .41s;border-left: solid 1px #F2F2F2; box-shadow: 0 -1px 1px rgba(0, 0, 0, .05); overflow-y: scroll; overflow-x: hidden; background-color: #fff;}
.NUmenu > .right li{padding: 0; margin: 0;}
.NUmenu > .right li a{ opacity: .71; transition: all ease-in .41s; margin: 0; position: relative; color: #555; white-space: nowrap; padding: 3px 1px; border-bottom: solid 1px #fafafa;}
.NUmenu > .right li a .photo{margin:0 15px 0px 9px; width: 41px; height: 41px; transition: all ease-in .41s; float: left; display: inline-block; background-size: cover; border: solid 2px #F2F2F2; background-position: top center; border-radius: 50%; vertical-align: top;}
.NUmenu > .right li a > b{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-weight: normal; font-size: 12px; padding: 11px 0 1px 0; line-height: 11px;}
.NUmenu > .right li a > span{ display: block; font-size: 10px; height: 21px; overflow: hidden; padding: 3px 0 5px 0; line-height: 11px;}
.NUmenu > .right li a small{bottom: 3px; left: 39px; display: block; position: absolute; width: 15px; height: 15px; border-radius: 50%; background-color:#999; border: solid 2px #fff; }
.NUmenu > .right li a small b{ background-color: red; color: #fff; display: block; padding: 0px 5px; border-radius: 3px; position: absolute; top: -1px; right: 33px; font-size: 9px;}
.NUmenu > .right li.online a,.NUmenu > .right li:hover a{opacity:1;}
.NUmenu > .right li.online a small{background-color:#42B72A;}
.NUmenu > .right .devider{ cursor: default; min-width: 191px; padding: 0; height: 11px; margin: 21px 11px; font-weight: bold; position: relative; text-align: center; border-bottom:solid 1px #DFDFDF; z-index: 1;}
.NUmenu > .right .devider a{ opacity: 1; border: none; cursor: pointer; display: inline-block; border-radius: 5px; padding: 0 9px; margin-bottom: -11px; background-color: #fff;}
.NUmenu > .right .devider a strong{display: inline-block; position: absolute; top: 0; right: 0; background-color: #fff; padding: 0 5px 0 21px; border-radius: 5px;}
.NUmenu > .right .devider.kuliahOn a strong:after{top: 0px; left: 3px; display: block; position: absolute; width: 15px; height: 15px; border-radius: 50%; background-color:#42B72A; border: solid 2px #fff; content: ''; }
.NUmenu > .right .info{cursor:pointer; border-top:solid 1px #DFDFDF;  padding:0 5px 3px 9px; margin:11px; font-size: 12px; position: relative; background-color: #efefef; border-radius: 0 0 5px 5px; z-index: 0;}
.NUmenu > .right .info a{ display: block; text-align:left; opacity: 1;  border-radius: 5px; margin: -11px 71px 3px -5px; padding: 0 11px; background-color: #fff;}
.NUmenu > .right .info > strong{font-size: 15px; width: 49px; position: absolute; display: block; line-height: 11px; font-weight: normal; bottom: 9px; right: 9px; text-align: center;}
.NUmenu > .right .info > strong small{font-size: 11px; line-height: 11px;}
.NUmenu > .right .info > b{display: inline-block; min-width: 41px;}

.NUmenu > .right b.fi{font-size: 17px; text-align: center; width: 53px; margin-right: 9px; display: inline-block;}
.NUmenu > .right b.fi small{font-size: 9px; line-height: 9px; display: inline-block; text-align: center;}
.NUmenu > .right b.fi small small{display: block;}
.NUmenu > .right li a{}

.NUmenu > .right.onlineOnly li{display: none;}
.NUmenu > .right.onlineOnly li.online{display: block;}

.NUmenu > .right.pesanOnly li{display: none;}
.NUmenu > .right.pesanOnly li.pesanOn{display: block;}

.NUmenu > .right.kuliahOn li, .NUmenu > .right.kuliahOn .devider{display: none;}
.NUmenu > .right.kuliahOn li.kuliahOn, .NUmenu > .right.kuliahOn .devider.kuliahOn{display: block;}
.NUmenu > .right.kuliahOn.onlineOnly li{display: none;}
.NUmenu > .right.kuliahOn.onlineOnly li.online.kuliahOn{display: block;}


.NUmenu .quicksearch{ width: 313px; padding: 0 3px; position: fixed; transition: all ease-in .41s; bottom: 0; right: 0; height: 41px; cursor: pointer; }
.NUmenu .quicksearch input{border: solid 1px #F2F2F2; border-radius: 4px 4px 0 0; padding:11px 0 11px 49px; height: 41px;}
.NUmenu .quicksearch i{position: absolute; padding: 9px; cursor: pointer; top: 1px; left: 11px; font-size: 19px; color: #999;}
.NUmenu .quicksearch i.fa-toggle-on{color:#42B72A !important;}





.NUmenu .inbox{ position: fixed; bottom: 0px; right:0px; width: 50px; height: 41px; text-align: center; border-top:solid 1px #F2F2F2; padding:9px 0; z-index: 9; background-color: #fff;}
.NUmenu .inbox .pesan{ position: absolute; top: -3px; right: 5px; font-size: 9px; border-radius: 3px; padding: 3px 5px;}
.NUmenu .inbox i.fa{font-size: 21px;}

.NUmenu .chat{ position: fixed; bottom: 0px; right: 333px; width: 313px; padding: 0; z-index: 9;}
.NUmenu .chat .box{margin: 0; border-bottom: none; border-radius: 4px 4px 0 0;}

.content-wrapper > section > .container #pageViewer,
.content-wrapper > section > .container #pageAside{padding:0 9px;}

@media (max-width: 1141px) {
    .NUmenu > .right li a .photo{margin:0 9px 0px 0; }
    .NUmenu > .right li a small{bottom: 3px; left: 29px; }
    .NUmenu > .right,.NUmenu .quicksearch{max-width: 199px; }
    .NUmenu .chat{right: 201px;}
    .content-wrapper > section > .container{padding:71px 199px 191px 71px;}
    body.welcome .content-wrapper > section > .container{padding:63px 0px 191px 69px;}
    .content-wrapper > section > .container #pageViewer,
    .content-wrapper > section > .container #pageAside{padding:0 7px;}
}



@media (max-width: 999px) {
    .NUmenu > .right,.NUmenu .quicksearch{max-width: 51px; }
    .NUmenu .chat{right: 53px; width: 292px;}
    .NUmenu > .right:hover,.NUmenu > .right.open,.NUmenu:hover .quicksearch,.NUmenu .quicksearch.open{ max-width: 51px; width: 51px; }
    .content-wrapper > section > .container{padding:63px 55px 191px 73px;}
    body.welcome .content-wrapper > section > .container{padding:63px 0px 191px 69px;}
    .content-wrapper > section > .container #pageViewer,
    .content-wrapper > section > .container #pageAside{padding:0;}
}


.NUmenu > .top .search ul::-webkit-scrollbar,
.NUmenu > .right::-webkit-scrollbar,
.NUmenu > .top .icon .dropdown-menu::-webkit-scrollbar,
.NUmenu > .top .user .dropdown-menu::-webkit-scrollbar{width: 0px; height:0px;}



.simpleView .widget-user-image{top: 11px; margin-left: -71px;}
.simpleView .widget-user-image .profile-user-img{ border-radius: 9%; border: solid 1px #DADADA; box-shadow:inset 0 0 21px 3px rgba(0,0,0,.21); background-color: #fff; background-position: top center; background-size:cover; width:141px; height:141px;}
.simpleView .identitas{position:relative; margin: 11px 0; font-size: 14px; text-align: left;}
.simpleView .identitas div{padding: 0 0 0 111px; position: relative; min-height: 21px;}
.simpleView .identitas div b{display: inline-block; width: 101px; position: absolute; top: 0; left: 0; font-weight: normal;}
.simpleView .identitas div b i{float: right; font-style: normal;}
.simpleView .tab-content .identitas{font-size: 12px;}
.simpleView .admbtn,.admbtn:hover{margin-top: -71px; background-color: #fff; border:none;}
.simpleView .admbtn.online b{display:none;}
.simpleView .admbtn.online i{ color: #42B72A; margin-right: 7px;}
.simpleView .admbtn.offline strong{display:none;}
.simpleView .admbtn.offline i{ color: #999;}

.A4{ text-align:center;}
.A4 .page{display:block; padding:0; page-break-after:always; box-shadow:11px 11px 3px rgba(0,0,0,.11); width:676px; margin:0 auto; margin-bottom:21px; text-align:left; position:relative;}
.A4 .page.blank{min-height:969px; padding:21px 0 0 0; background:#FFF url(../images/logobg.jpg) no-repeat center center; background-size:99% auto; }
.A4 .page .kop{display:block; position:relative; border-bottom:solid 1px #999; margin:0 0 9px 0; padding:0 11px 9px 11px; text-shadow: 0 0 3px rgba(0,0,0,0.11); }
.A4 .page .kop h2{font-family:georgia !important; line-height:100%; letter-spacing:17px;}
.A4 .page .kop .logo{width:89px; margin-right:11px;}
.A4 .page > .data{ padding-top:11px; padding-bottom:11px !important; clear:both;}
.A4 .page > .data > .col-xs-12{margin:0; padding:5px 0px; line-height:17px;}
.A4 .page > .data > .col-xs-12 > span > span{ border-bottom:solid 1px rgba(0,0,0,.09);}
.A4 .page > .data > .col-xs-12 > span > span >span{border:none;}
@media print {
    .A4 .page{ box-shadow:none; margin:0 auto; }
	.NUmenu{display:none;}
}