.font1{font-family: 'Allura', cursive;}
.font2{font-family: 'Mrs Saint Delafield', cursive;}
.font3{font-family: 'Qwigley', cursive;}
.font4{font-family: 'Cookie', cursive;}
.font5{font-family: 'Merriweather', serif;}
.font6{font-family: 'Ubuntu', serif;}
.font7{font-family: 'Economica', serif;}
.font8{font-family: 'Shrikhand', cursive;}
.font9{font-family: 'Andika', serif;}
::-webkit-scrollbar {width: 3px; height:3px;}
::-webkit-scrollbar {width: 3px; 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(49,53,69,0.89); border-radius:3px; cursor: pointer;}
::-webkit-scrollbar-thumb:hover {background-color:rgba(49,53,69,0.99);	}
body{font-family: 'Ubuntu', sans-serif; font-size: 14px; background-color:#F5F5F5; line-height: 21px; padding:0; margin: 0;}
body > .container,body > .container-fluid{position: relative; z-index: 3;}


body #prossessing { display:none; padding:0;	z-index:99999;    position:fixed;	top:2px; left:0; right:0;    border-radius:0;    margin:0;    text-align: right;}
body #prossessing .progress-bar{ position:relative; height: 1px;    border-radius: 0;    background-color: rgba(255,255,255,.71); box-shadow:0 0 3px 1px rgba(255,255,255,.41);    width:21%; transition:width .191s;}
body #prossessing .progress-bar div{position:absolute; top:-2px; right:-2px; height:5px; width:5px; border-radius:5px; background-color:#fff; content:'';}
body #prossessing .progress-bar div:before{position:absolute; top:50%; left:50%; margin-top:-55px; margin-left:-55px; width:111px; height:111px; border-radius:50%; background-color:rgba(255,255,255,.41); content:''; z-index:1;
animation-name: LORJUa;
animation-duration: 1.1s;
animation-iteration-count: infinite;
}
body #prossessing .progress-bar div:after{position:absolute; top:50%; left:50%; margin-top:-49px; margin-left:-49px; width:99px; height:99px; border-radius:50%; background-color:rgba(255,255,255,.21); content:''; z-index:2;
animation-name: LORJUb;
animation-duration: 1.1s;
animation-iteration-count: infinite;}
body #prossessing .status{display: none !important;}
@keyframes LORJUa {
    0%   {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.91); }
    21%  {margin-top:-55px; margin-left:-55px; width:111px; height:111px; background-color:rgba(255,255,255,.0);}
    71%   {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.91); }
    100%  {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.91);}
}
@keyframes LORJUb {
    0%   {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.71); }
    71%  {margin-top:-49px; margin-left:-49px; width:99px; height:99px; background-color:rgba(255,255,255,.0);}
    72%  {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.71);}
    99%  {margin-top:-49px; margin-left:-49px; width:99px; height:99px; background-color:rgba(255,255,255,.41);}
	100%   {margin-top:-0px; margin-left:-0px; width:0px; height:0px; background-color:rgba(255,255,255,.71); }
}
header #prossessing .status{ font-size:11px;   top:3px;    right:0;    position:absolute;    display:none;    color: #999;}

/*body::after{ background:url(dist/images/bg2.jpg) no-repeat center right #fff; z-index: 0; background-size:auto 100%; content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }*/
body > header,body > footer{ background-color:#313545; color:#fff; text-align: center; box-shadow: 0 0 3px rgba(0,0,0,.21); position: relative; z-index: 9;}
body > header{position: fixed; z-index: 9; padding: 0px; top: 0; left: 0; right: 0; text-align: left;}
body > header  a:hover{text-decoration: none;}

body > header .homeMenu{max-width: 313px; position: relative; display: block; height: 50px;}
body > header .homeMenu h3,
body > header .homeMenu h4,
body > header .homeMenu h5{border-bottom: dotted 1px transparent; color: #f9f9f9; padding:0; margin: 0; position: relative; font-weight: normal; }
body > header .homeMenu h5{font-size: 9px; line-height: 11px; height: 11px; }
body > header .homeMenu h3{font-size: 25px; line-height: 25px; height: 25px;font-weight: bold; }
body > header .homeMenu h4{font-size: 17px; line-height: 17px; height: 17px;}


.text-green{color:#5a9413;}
.text-blue{color:#313545;}
.border-green{border-color:#5a9413;}
.border-blue{border-color:#313545;}
.bg-green{background-color:#5a9413; color: #fff;}
.bg-blue{background-color:#313545; color: #fff;}

header > .container > ul{position: absolute; z-index: 11; left: auto; top: 3px; right:15px; width: 111px; padding: 0;}
header > .container > ul li{list-style: none; padding:5px 0; margin: 0; min-width: 49px; display:inline-block; float: right;}
header > .container > ul > li > a.nav-link{ position: relative; z-index: 1; font-size: 25px; font-weight: bold; padding:.5rem 1rem; margin: 0; color: #fff; }
header > .container > ul > li > a.nav-link img{display: block; border:solid 2px rgba(255,255,255,.21); box-shadow: 0 0 5px rgba(0,0,0,.21);   width: 41px; height: 41px; margin: -8px; border-radius: 50%;}
header > .container > ul > li > a.nav-link .user{display: block; width: 41px; height: 41px; box-shadow: 0 0 5px rgba(0,0,0,.21); margin: 2px 9px 0 0; text-align: center; padding: 7px 0 0 0; background-color: #fff; color: #0097ff; font-size: 25px; border-radius: 50%;}
header > .container > ul > li > a.nav-link > span{position: absolute; display: block; top: -3px; right: 3px; border-radius: 3px; font-size: 9px; line-height: 9px; padding: 3px 5px; ;}
header > .container > ul > li > a.nav-link > strong{position: absolute; transition: opacity .41s; opacity: 0; bottom: -7px; background-color:#313545;  right: 3px; left: 3px; border-radius: 3px; font-size: 9px; line-height: 9px; border: 1px solid rgba(255,255,255,.21); text-align: center; color: #fff; padding: 3px 3px 2px 3px;}
header > .container > ul > li > a.nav-link:hover > strong{opacity: 1;}
header > .container > ul > li > a.nav-link.userinfo:hover > strong{display: none; opacity: 0;}
header > .container > ul > li > a.nav-link .user+.ion-arrow-up-b{display: none !important;}
header > .container > ul > li > a.nav-link .ion-arrow-up-b{position: absolute; display: none; color: #F5F5F5; bottom: -18px; left: 50%; margin-left: -7px;}
header > .container > ul > li > a.dropdown-toggle::after{display: none;}
header > .container > ul > li.show{}
header > .container > ul > li.show > a.nav-link{ }
header > .container > ul > li.show > a.nav-link .ion-arrow-up-b{display: block;}
header > .container > ul > li div.dropdown-menu{ z-index: 0; padding: 0; overflow: hidden; margin: 9px -9px 0 0; min-width: 271px; border: none; box-shadow: 0 0 3px rgba(0,0,0,.21);}
header > .container > ul > li div.dropdown-menu h5{padding: 9px 3px 9px 11px; border-left: solid 3px rgba(0, 0, 0, .21); border-radius: 3px 3px 0 0; font-size: 11px; margin: 0; background-color: #F5F5F5;}
header > .container > ul > li div.dropdown-menu h5 b{display: block; font-size: 15px;}
header > .container > ul > li div.dropdown-menu h5 a{display: inline-block; border-radius: 3px; border: solid 1px transparent; font-weight: bold; color: rgba(0, 0, 0, .71);  padding: 5px; width: 33px; height: 33px; margin-right: 5px; text-align: center; float: right; transition: all .41s;}
header > .container > ul > li div.dropdown-menu h5 a:hover{border-color: rgba(0, 0, 0, .21); color: rgba(0, 0, 0, .41);}
header > .container > ul > li div.dropdown-menu h5 a i{display: block; font-size: 21px;}
header > .container > ul > li div.dropdown-menu a.dropdown-item{padding: 9px 9px 9px 21px; color: #555; transition: all .41s;}
header > .container > ul > li div.dropdown-menu a.dropdown-item.active,
header > .container > ul > li div.dropdown-menu a.dropdown-item:hover{background-color: #f5f5f5; color: #777; border-left:solid 3px rgba(0, 0, 0, .21); padding-left: 9px}
header > .container > ul > li div.dropdown-menu a.dropdown-item+a.dropdown-item{border-top: solid 1px #f5f5f5;}
header > .container > ul > li div.dropdown-menu a.dropdown-item:nth-last-child(1){ padding-bottom: 9px;}
header > .container .pull-right{position: relative; z-index: 3;}

header > .container{height: 58px; padding: 3px 15px 5px 15px; position: relative; z-index: 7; position: relative;}

@keyframes pa_pulse{
    0%{     transform:translate(-50%, -50%) scale(0.2); border-width:5px;opacity:1}
    60%{    transform:translate(-50%, -50%) scale(1);   border-width:1px;opacity:0}
    100%{   transform:translate(-50%, -50%) scale(1);   border-width:1px;opacity:0}
}
.brand{display: inline-block; min-width: 11px; margin: 0 11px 0 0; position: relative; float: left; padding: 1px 0;}
.brand img{ z-index: 3; height: 51px; padding: 0; cursor: pointer; position: relative;}
.animasi{position: absolute; top: -9px; left: -9px; right: -9px; bottom: -9px; z-index: 0; }
.animasi__circle{border:2px solid;background:none;position:absolute;border-radius:50%;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%, -50%) scale(0.2);border-width:5px;opacity:1;animation-name:pa_pulse;animation-duration:4s;animation-direction:normal;animation-timing-function:cubic-bezier(0, 0, 0.55, 1);animation-iteration-count:infinite; z-index: 0;}
.animasi__circle:nth-of-type(1){animation-delay:-.2857142857s}
.animasi__circle:nth-of-type(2){animation-delay:-.5714285714s}
.animasi__circle:nth-of-type(3){animation-delay:-.8571428571s}
.animasi .animasi__circle{border-color:#fff;}
.animasi--white .animasi__circle{border-color:#fff}

#poster .fr-box .fr-wrapper> div{opacity: 0;height: 0px; overflow: hidden;}
#poster .fr-box .fr-wrapper> div+div{opacity:1; height: auto; overflow:visible;}
footer{margin: 0;}







    header .nav-menu{z-index: 9;}
    header .container+.nav-menu{z-index: 5;}
    footer .nav-menu{z-index: 3;}
    .nav-menu,
    .nav-menu .container .edited-box,
    .nav-menu .container li ul,
    .nav-menu .container li > b,.nav-menu .container li > strong,
    .nav-menu .container .pilihanWarna{background-color: rgba(0, 0, 0, .71);}
    header > .nav-menu .container, footer > .nav-menu .container{ max-height: 21px;}
    .nav-menu{display: block; position: relative; overflow: visible; transition: height ease-out .11s; color: #fff; height: 33px; line-height: 33px; text-align: left;}
    .nav-menu .container{ white-space: nowrap;}
    .nav-menu .container > a{z-index: 0; text-decoration: none; display: inline-block; opacity: 1; font-size: 13px; transition: all .41s; padding:0 9px 0 0; color: #fff;}
    .nav-menu .container > a:hover{ opacity:.71;}
    .nav-menu .container li{display:block; position: relative; float: left; list-style: none; margin: 0; padding: 0; }
    .nav-menu .container li > a{z-index: 0; position: relative; display: block; text-decoration: none; color: #fff; padding: 0 21px 0 0;}
    .nav-menu .container li > b,.nav-menu .container li > strong{ transition: all .41s; z-index: 1; border: solid 1px #fff; border-color: transparent; position: absolute; width: 17px; height: 17px; border-radius: 2px; color: #fff; font-size: 9px; display: inline-block; padding: 4px 0; text-align: center; top: 5px; right: 3px; cursor: pointer; display: none; }
    .nav-menu .container li > strong{position: absolute; left: 0px; padding: 2px 0 0 1px;}
    .nav-menu .container li > strong input{margin: 0;}
    .nav-menu .container li > b:hover,.nav-menu .container li > strong:hover{color: #333; border-color: #fff;}
    .nav-menu .container li ul{display: none; min-width: 191px; position: absolute; left: -9px; padding:0;}
    header .nav-menu .container li ul{ top:25px; border-radius: 0 0 5px 5px; }
    footer > .nav-menu .container li ul{ bottom: 17px; border-radius: 5px 5px 0 0 ; }
    .nav-menu .container li:hover > ul{display: block;}
    .nav-menu .container li ul li{display: block; width: 100%; text-align: center; margin-top: 9px;}
    .nav-menu .container li ul li+li{border-top: solid 1px rgba(0, 0, 0, .1); margin-top: 0;}
    .nav-menu .container li ul li > a{padding: 1px 11px; white-space: nowrap; display: block; text-align: left;}
    .nav-menu .container li ul li > b,.nav-menu .container li ul li > strong{top: 6px;}
    .nav-menu .container li ul li > strong{left: 11px;}
    .nav-menu .container li > a:hover{opacity: .71;}
    .nav-menu .container li > a i{min-width: 17px; text-align: center; display: inline-block;}
    .nav-menu > div.container > span .MenuAdd,
    .nav-menu > div.container > span >span > li > ul > li{display: none;}
    .nav-menu .container .edited-box{z-index: 1; display: none; position: absolute; border-radius:21px; line-height: 27px; top:2px; bottom: 2px; left: 2px; right: 2px; border: solid 1px #fff;}
    .nav-menu.editContent .container .edited-box{display: block;}
    .nav-menu .container .edited-box-btn{z-index: 0;  background-color: #fff; border-radius: 21px; color:#6E7287;  position: absolute; top: 6px; right: 7px; bottom: 0; height: 21px; padding:5px 9px; text-align: center; cursor: pointer;}
    .nav-menu .container .edited-box .MenuAdd option{padding:9px 9px 9px 21px;}
    .nav-menu .container .edited-box .MenuAdd optgroup{ padding:9px;}
    .nav-menu .container .edited-box li:hover > b,.nav-menu .container .edited-box li:hover > strong{display: block;}
    .nav-menu .container label.edited-box-btn{top: 3px; right: 5px; padding: 4px 9px; min-width: 33px; text-align: center;}
    .nav-menu .container label.edited-box-btn+label.edited-box-btn{right: auto; top: 3px; left: 5px; padding: 4px 9px;}
    .nav-menu .container .pilihanWarna{position: absolute; top: 28px; left: 17px; width: 85px; border-radius: 0 0 11px 11px}
    .nav-menu .container .pilihanWarna+.pilihanWarna{left: auto; right: 17px;}
    .nav-menu .container .pilihanWarna span{padding: 0 3px; border-radius: 0 0 9px 0; background-color: transparent; border: none;}
    .nav-menu .container .pilihanWarna span i{border: solid 3px rgba(0, 0, 0, .21); border-radius: 0 0 9px 0;}
    .nav-menu .container .pilihanWarna input{font-size: 11px; padding: 1px 9px; height: 21px; border-radius: 0 0 0 9px; background-color: transparent;  border: none;}
    .nav-menu .container .edited-box .MenuAdd{background-color:#fff; outline: none; color: #414141; padding: 2px 5px; border: solid 1px #fff; border-radius: 21px; margin: 1px 0 9px 0;}

    .nav-menu.content{border-radius: 5px; padding: 3px; min-height: 33px; transition: all .41s; margin-bottom: 11px; height:auto;}
    .nav-menu.content .container{width: 71%; margin: 0; padding:0; text-align:left !important;}
    .nav-menu.content .container .edited-box{border-radius: 5px; }
    .nav-menu.content .container label.edited-box-btn+label.edited-box-btn{ left: auto; top: 33px; right: 5px;}
    .nav-menu.content .container li{float: none; margin: 0; padding: 0;}
    .nav-menu.content .container li a{display: block; line-height: 27px; padding: 0 9px; margin: 0;}
    .nav-menu.content .container li > b,.nav-menu.content .container li > strong{ top: 4px;}
    .nav-menu.content .container li > strong{left: 9px;}
    .nav-menu.content .container li ul{display: block; position: relative; top: auto; left: auto; right: auto; margin: 0; padding: 0 0 0 21px; background-color: transparent;}
    .nav-menu.content .container .edited-box .MenuAdd{display: block; margin: 3px 0 11px 11px; }
    .nav-menu.content.editContent{padding-bottom: 33px; min-height: 67px;}
    .nav-menu.content.editContent > div.container > span > span > li > ul > li{ height: 38px; display:inline-block;text-align: right;}
    .nav-menu.content > div.container > span >span > li > ul > li .MenuAdd{display: none;}

    header.top > .nav-menu{overflow: hidden; height: 0; min-height: 0; padding: 0 3px;}
    .nav-menu .btn.btn-mobile{display: none; position: fixed; top:61px; left:9px; padding:2px 5px 3px 5px; text-align: center; font-size: 21px; line-height: 21px; height: 25px; cursor: pointer; transition: left ease-in .71s;}
    header .nav-menu .btn.btn-mobile{ }
    header .nav-menu+.container+.nav-menu .btn.btn-mobile{left: 41px;}
    header.top .nav-menu .btn.btn-mobile,
    header.top .nav-menu+.container+.nav-menu .btn.btn-mobile{left: -99px;}
    footer .nav-menu .btn.btn-mobile{display: none;}
    
    @media (max-width: 767px) {
        footer > .nav-menu{display: none;}
        header > .nav-menu{overflow: visible; z-index: 9 !important;}
        header > .container{z-index: 3 !important; height: auto;}
        header .nav-menu{padding: 0; min-height:0; overflow: visible; transition: all .41s; margin-bottom:0; height:0px;}
        header .nav-menu .btn.btn-mobile{display: block;}
        header .nav-menu .container{max-height: 0px; transition:all .41s; overflow-x: hidden; padding:0 9px; position: fixed; top:0; border-radius: 0; left:0; right:0; bottom:0; width:auto; margin: 0; text-align:left !important;}
        header .nav-menu.show .container{max-height: 999px; padding:9px; z-index: 3;}
        header .nav-menu .container li{border-top: solid 1px rgba(0, 0, 0, .1); margin-top: 0; float: none; margin: 0; padding: 0; width: 100%; position: relative; z-index: 0;}
        header .nav-menu .container li a{display: block; line-height: 27px; padding:9px; margin: 0;}
        header .nav-menu .container li > b,
        header .nav-menu .container li > strong{ top: 4px;}
        header .nav-menu .container li > strong{left: 9px;}
        header .nav-menu .container li ul{display: block; position: relative; top: auto; left: auto; right: auto; margin: 0; padding: 0 0 0 21px; background-color: transparent; top:0; bottom: 0; margin:0 !important; background-color: transparent !important;}
        
    }

















    .gridBoxs{position: relative; opacity:.41; border: solid 1px rgba(0, 0, 0, .21); min-height: 52px; overflow: hidden; vertical-align: middle;}
    .gridBoxs.active{opacity:1;}
    .gridBoxs h6{margin: 0; z-index: 1; position: absolute; top:1px; transition: right .41s; right:-125px; cursor: pointer;}
    .gridBoxs h6 .btn-group{ vertical-align: middle; }
    .gridBoxs h6 label{font-size: 12px; padding: 3px 0 0 0; display: inline-block; vertical-align: middle; white-space: nowrap; max-width: 0px; overflow: hidden; transition: max-width .41s;}
    .gridBoxs h6 i{vertical-align: middle; font-size: 11px; min-width: 33px; display: inline-block; border-radius: 21px; height: 25px; padding: 1px 9px; margin: 0 5px; text-align: center;}
    .gridBoxs h6:hover{right: 1px;}
    .gridBoxs h6:hover label{max-width: 191px; margin-left: 5px;}
    .gridBoxs .row{position: relative; z-index: 0;}
    .gridBoxs .row .col{border: solid 1px #fff;}
    .gridBoxs .row .col aside > select{border-radius: 5px 5px 0 0; margin-bottom: 0 !important;}
    .gridBoxs .row .col aside > .row{border-radius: 0 0 5px 5px; padding: 0 2px 0 3px !important; margin-bottom: 3px !important; background-color: #fff;}
    .gridBoxs .row .col aside .row .btn,.gridBoxs .row .col aside .row input{height: 28px; font-size: 12px; padding: 5px; border:none; color:#fff;}
    .gridBoxs .row .col aside .row .input-group-addon{border: none; padding: 0 5px; border-left: solid 1px rgba(0, 0, 0, .71);}
    .gridBoxs .row .col aside .row .input-group-addon i{border: solid 3px rgba(255,255,255,.41); border-radius: 3px;}
    .gridBoxs .row .col aside .row .btn-group input.btn{width:41px;}
    .gridBoxs .row .col aside .row textarea.btn{min-height: 141px; white-space: pre-wrap;}
    .gridBoxs .row .col aside .row > div{padding: 0 1px 0 0;}
    .gridBoxs .row .col .btnGabung{position: absolute; border: solid 1px #fff; bottom: 3px; left: -21px; width: 41px; display: none;}
    .gridBoxs .row .col+.col .btnGabung{display: block;}
    .gridBoxs .row .col,
    .gridBoxs .row .col aside .row input,
    .gridBoxs .row .col aside .row .btn,
    .gridBoxs .row .col aside .row .input-group-addon{background-color:rgba(0, 0, 0, .71);}
    .gridBoxs .row .col aside > select,
    .gridBoxs .row .col aside > .row{background-color: rgba(0, 0, 0, .71) !important; color: #fff;}



.boxWidget{margin:3px; display: block; overflow: hidden;}
.boxWidget .card{overflow: hidden;}
.boxWidget .card-header{padding: 9px 0 21px 11px; text-align: left; border: none; position: absolute; top: 0; left: 0; right: 0; z-index: 1;}
.boxWidget .card-footer{background-color: rgba(0,0,0,.03);  cursor:pointer; text-align: center; height: 17px; padding:1px !important;}
.boxWidget h6{z-index: 1; font-weight: bold;}
.boxWidget .card-body{position: relative; z-index: 0; padding: 21px 0 0 0 !important;}
.boxWidget .postingList{position: relative;}
.boxWidget .postingList .daftar{display: block; height: 131px; overflow: hidden;.daftarst-style: none; transition: all .41s; margin: 0; padding:0; position: relative;}
.boxWidget .postingList .daftar:hover{}
.boxWidget .postingList .daftar a{text-decoration:none;}
.boxWidget .postingList .daftar .img{width: 100%; height: 131px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; z-index: 0;}
.boxWidget .postingList .daftar .img .ion-social-youtube{position: absolute; top: 50%; left: 50%; font-size: 41px; margin: -33px 0 0 -27px; color: #fff; text-shadow: 0px 0px 5px rgba(0,0,0,.21); opacity: .71; z-index: 9; transition: all .41s;}
.boxWidget .postingList .daftar .img .ion-social-youtube:hover{text-shadow: 0px 0px 21px rgba(0,0,0,.71); opacity: .99;}
.boxWidget .postingList .daftar .img::after{content: ''; transition: all ease-in-out .41s; opacity:.99; position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 0;}
.boxWidget .postingList .daftar:hover .img::after{opacity: .71;}
.boxWidget .postingList .daftar a > small{ opacity: .91; font-size: 11px; max-height: 15px; text-align: right; line-height: 11px; padding:0; font-weight: normal; position: absolute; bottom: 3px; right: 0px; display: block; margin: 0 0 3px 0;  overflow: hidden; z-index: 1; }
.boxWidget .postingList .daftar a > small > span{ display:inline-block; white-space: nowrap; padding-right: 9px;}
.boxWidget .postingList .daftar a > small span i{font-size: 13px; display: inline-block; padding: 0 1px 0 1px; text-align: center;}
.boxWidget .postingList .daftar a > strong{ font-size: 13px; font-weight:normal; line-height: 17px; max-height: 33px; position: absolute; bottom: 21px; text-align: right; left: 9px; right: 9px; display: block; margin: 0; padding:0; overflow: hidden; }
.boxWidget .postingList .daftar a > strong i{font-size: 21px; vertical-align:bottom; display: inline-block; margin-right: 3px;}
.boxWidget .postingList .daftar a > strong > small{opacity: .81; font-size: 11px; line-height: 11px; display: block; margin: 0; white-space: nowrap;}
.boxWidget .postingList .daftar a > span{ position: absolute; top: 33px; right: -99px; transition: right ease-in .41s; text-align:right;}
.boxWidget .postingList .daftar+.daftar a{ color: #333 !important;}
.boxWidget .postingList .daftar+.daftar{border-top: solid 1px; height: 71px; padding: 5px 0 0 9px; }
.boxWidget .postingList .daftar+.daftar .img{width: 41px; height: 41px; display:block; margin: 0px 9px 0px 0; float: left; border:solid 1px #dedede; border-radius: 5px; }
.boxWidget .postingList .daftar+.daftar .img .ion-social-youtube{font-size: 21px; margin: -11px 0 0 -11px;}
.boxWidget .postingList .daftar+.daftar:hover .img::after{opacity: .11;}
.boxWidget .postingList .daftar+.daftar a > strong{position: relative; text-align: left; font-weight: normal; padding: 7px 9px 0 0; max-height: 41px; height: 41px; display:block; margin-bottom: 5px; bottom: auto; left: auto; right: auto;}
.boxWidget .postingList .daftar+.daftar a > small{ opacity: .71; position: relative; top: auto; bottom: auto; left: auto; right: auto; text-align: left;}
.boxWidget .postingList .daftar+.daftar a > span{top: 1px;}
.boxWidget .postingList .daftar:hover a >span{z-index: 99; right: -7px; }
.boxWidget .postingList .daftar a >span button{cursor: pointer; display: block; margin-bottom: 1px; padding: 2px 15px 2px 3px; width: 33px;}

.boxWidget .postingList::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,.03);    border-left: 0px solid rgba(0,0,0,.11);}

.boxWidget .postingList .daftar+.daftar,
.boxWidget .card,
.boxWidget .card-header,
.boxWidget .card-body,
.boxWidget .card-footer{
    border-color: rgba(0,0,0,.11);
    }

.widBoxer{ position: relative; margin:3px; display: block; overflow:hidden;}
.widBoxer > div{position: relative; padding:3px; min-height:33px;border-radius: 5px; overflow: hidden;}
.widBoxer > div > div{ position: relative; z-index: 0; }
.widBoxer > div > h5{position:absolute; top:0; right:0; left: 0; height: 0px; padding: 9px 21px; margin: 0; overflow: hidden; text-align: right; opacity:0; transition: all .41s; z-index: 1;}
.widBoxer > div:hover > h5{height:49px; opacity: 1;}


.widBoxer.quote .carousel-item{padding: 9px;}
.widBoxer.quote .carousel-item p img,.boxQuote .carousel-item p a{display:none !important;}

.widBoxer.galeri > div > div .carousel-indicators{bottom: 0; padding: 11px 0; margin: 0 auto;}
.widBoxer.galeri > div > div .carousel-indicators li{cursor: pointer; transition: all ease-in-out .41s;}
.widBoxer.galeri > div > div .carousel-item .ion-social-youtube{position: absolute; top: 50%; left: 50%; font-size: 41px; margin: -25px 0 0 -27px; color: #fff; text-shadow: 0px 0px 5px rgba(0,0,0,.21); opacity: .71; z-index: 9; transition: all .41s;}
.widBoxer.galeri > div > div .carousel-item .ion-social-youtube:hover{text-shadow: 0px 0px 21px rgba(0,0,0,.71); opacity: .99;}


.widBoxer.widget > div > div,
.widBoxer.quote > div > div .carousel-item,
.boxWidget .postingList{ position: relative; z-index: 0;  overflow-x: hidden;}

.widBoxer.widget > div > h5,
.widBoxer.quote > div > h5{top:auto; bottom: 0; padding: 15px 21px 0 21px; }

.widBoxer.headline > div > div .carousel-item small{padding: 0 9px 0 29px; margin-right: 3px; display: inline-block; border-radius: 3px;}
.widBoxer.headline > div > div .carousel-item{white-space: nowrap; overflow: hidden; text-overflow:ellipsis; padding: 3px; text-align: left;}
.widBoxer.headline > div > div .carousel-item span{white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
.widBoxer.headline > div > h5{top:0; text-align: left; bottom: 0; left: -9px; right: auto; opacity: 1; padding:7px 21px 0 13px; height: auto; font-size: 17px; white-space: nowrap; width: 25px; }
.widBoxer.headline > div:hover > h5{width:141px;}

.widBoxer.widget > div > div::-webkit-scrollbar,
.boxWidget .postingList::-webkit-scrollbar,
.widBoxer.quote > div > div .carousel-item::-webkit-scrollbar{width:7px; height:0; transition:width .41s;}

.widBoxer.widget > div > div:hover::-webkit-scrollbar,
.boxWidget .postingList:hover::-webkit-scrollbar,
.widBoxer.quote > div > div .carousel-item:hover::-webkit-scrollbar{width: 7px; height:0;}




.indexBox{margin:3px 3px 11px 3px; padding:3px 9px; height:<?php echo $boxHeight;?>px;}
.pagerBtn{margin: 0; display: inline-block;}
.pagerBtn .btn-group{vertical-align: middle !important; margin: 21px 0;}
.pagerBtn .btn{ vertical-align: middle !important; cursor: pointer;}
.pagerBtn .btn-group .btn{font-size: 12px; padding: 7px 0 0 0; min-width: 33px; height: 33px; position: relative; z-index: 0;}
.pagerBtn .btn-group .btn i{margin-top: 3px;}
.pagerBtn .btn-group .btn .badge{padding: 5px}
.pagerBtn .btn-group .btn.active,
.pagerBtn .btn-group .btn.prev,
.pagerBtn .btn-group .btn.next{position: relative; z-index: 1;}
.pagerBtn .btn-group .btn.active{font-size: 19px; z-index: 3; padding:5px 0; height: 41px; margin-top: -8px; border-radius:3px !important; }
.indexBox aside{position: relative; }
.indexBox aside article{height: 171px; padding:0 9px 0 0; position: relative; border: solid 1px rgba(0,0,0,.11); margin:0 0 21px 0; overflow: hidden; text-align: left; box-shadow: 0 0 0 rgba(0,0,0,.21); transition: all .41s; border-radius:3px;}
.indexBox aside article:hover{box-shadow: 0 0 3px rgba(0,0,0,.21);}
.indexBox aside article a{text-decoration:none; }
.indexBox aside article a .judul{display: block; padding:0; margin-bottom: 9px; font-size: 17px; max-height: 41px; overflow: hidden;}
.indexBox aside article a .img{width:191px; height: 171px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; z-index: 0; display: block; float: left; margin: 0 15px 9px 0;}
.indexBox aside article a .img .ion-social-youtube{position: absolute; top: 50%; left: 50%; font-size: 41px; margin: -21px 0 0 -27px; color: #fff; text-shadow: 0px 0px 5px rgba(0,0,0,.21); opacity: .71; z-index: 9; transition: all .41s;}
.indexBox aside article a .img .ion-social-youtube:hover{text-shadow: 0px 0px 21px rgba(0,0,0,.71); opacity: .99;}
.indexBox aside article a .img::after{content: ''; transition: all ease-in-out .41s; opacity:.99; position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 0;}
.indexBox aside article a:hover .img::after{opacity: .71;}

.indexBox aside article .entry-meta{display: block; padding: 9px 0;}
.indexBox aside article .photoPenulis{width: 41px; height: 41px; border-radius: 50%; margin: 0 9px 0 0; float: left;}
.indexBox aside article .author{font-size: 13px; font-weight: bold; display: block;}
.indexBox aside article .posted-on,
.indexBox aside article .posted-on a,
.indexBox aside article .lead{font-size:11px; opacity: .79;}
.indexBox aside article .lead{font-size:13px; line-height: 17px; height: 49px; overflow: hidden; display: block;}


@media (max-width: 767px) {
    .indexBox{height: auto;}
    .indexBox aside article{height: 99px; }
    .indexBox aside article a .img{width:99px; height: 99px;}
    .indexBox aside article .lead{display:none;}
    .indexBox aside article .photoPenulis{width: 21px; height: 21px;}
    .indexBox aside article a .judul{margin:0;}
    .indexBox aside article .entry-meta{padding: 9px 0 0 0;}
}