body {
  font-family: Google Sans!important;
}
.body-bg-dashboard {
  background: url("../images/background/background-white.png") repeat;
}
.body-bg-web {
  background: url("../images/background/background-white.png") repeat;
  background-size: auto;
}
.highlight {
  border-color: #009688!important;
  background-color: #009688!important;
  color: white!important;
}
#bg-green {
  position: relative;
  text-align: center;
  overflow: hidden;
  margin: 0;
  min-width: 320px;
  min-height: 125px;
  padding: 0px 0 75px;
  background: url("../images/background/bg-7.png") repeat;
  background-size: 230px 95%;
  margin-bottom: -5px;
  padding-left: 100px;
}

#bg-blue {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-width: 320px;
  min-height: 96px;
  padding: 0 0 15px;
  /*background: #f0f0f0;*/
  background: #f0f0f0 url("../images/background/bg-28.jpg") repeat;
}

#bg-red {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-width: 320px;
  min-height: 145px;
  padding: 0 0 15px;
  /*background: #f0f0f0;*/
  background: #f0f0f0 url("../images/background/background-red.png") repeat;
}

#text-marquee {
  width: 70%; 
  color: #fff; 
  margin-top: 5px;
}

.header-text-one {
  margin-left: 0; 
  color: #fff; 
  font-weight: bold; 
  font-size: 23px;
  text-shadow: 2px 0 0 #093d6b, -2px 0 0 #093d6b, 0 2px 0 #093d6b, 0 -2px 0 #093d6b, 1px 1px #093d6b, -1px -1px 0 #093d6b, 1px -1px 0 #093d6b, -1px 1px 0 #093d6b;
}

.header-text-two {
  margin-left: 0; 
  color: #FFFF00; 
  font-weight: bold; 
  font-size: 17px; 
  margin-top: -10px;
  text-shadow: 2px 0 0 #093d6b, -2px 0 0 #093d6b, 0 2px 0 #093d6b, 0 -2px 0 #093d6b, 1px 1px #093d6b, -1px -1px 0 #093d6b, 1px -1px 0 #093d6b, -1px 1px 0 #093d6b;
}

.header-web {
  margin-left: -50px;
}

.owl-nav{
  display: none;
}

.form-inline-responsive {
  float: right !important;
}

.header-text-three {
  margin-left: 0; 
  color: #ffc600; 
  font-weight: bold; 
  font-size: 15px;
  text-shadow: 1px 0 0 #093d6b, -1px 0 0 #093d6b, 0 1px 0 #093d6b, 0 -1px 0 #093d6b, 1px 1px #093d6b, -1px -1px 0 #093D6C, 1px -1px 0 #093d6b, -1px 1px 0 #093d6b;
}

.header-img {
  width: 60px; 
  margin-top: 15px; 
}

.header-img-left {
  width: 75px; 
  margin-top: 15px; 
}

.header-img-dashboard {
  width: 60px; 
  margin-top: 15px; 
  margin-left: 130px; 
  float: left;
}

.img-detail {
  float:left; 
  width: 100%; 
  border: 2px solid #808080; 
  border-radius: 5px; 
  background: #fff; 
  margin-bottom: 5px;
}

.content-update-detail {
  margin-left: 10px; 
  margin-top: 5px;
}

.market-content {
  font-weight: bold; 
  font-size: 16px;
}

.text-red {
  color: red;
}
.text-green {
  color: green;
}
.text-blue {
  color: blue;
}
.text-black {
  color: black;
}

.content-price {
  margin-top: 8px;
}

.setting-icon {
  color: #009688;
  font-size: 25px;
  text-shadow: 3px 3px 1px #CCCCCC;
}

.col-header {
  margin-top: 5px;
}

.carousel-style {
  border-radius: 100px; 
  
}

#carousel-example-generic .carousel-caption {
  left:0;
  right:0;
  bottom:0;
  text-align:left;
  padding:10px;
  background:rgba(0,0,0,0.7);
  text-shadow:none;
}

.images-carousel {
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100%; 
  height: 500px!important;
}

.footer-style {
  margin-bottom: -180px;
}

.img-column-caraousel {
  float:left; 
  width: 100px !important; 
  /*height: 85px;*/
  height: 98px;
  border: 2px solid #fff; 
  border-radius: 5px; 
  background: #fff;
}

#button-admin {
  text-decoration: none; 
  cursor: pointer;
}

.img-users {
  width: 40px; 
  margin-left: -10px; 
  float: left;
}

.column-users-detail {
  padding-left: 40px;
}

.logo-admin {
  margin-top: 15px;
}

.text-logo-admin-one {
  margin-left: 122px; 
  color: #fff; 
  font-weight: bold; 
  font-size: 23px;
  text-shadow: 2px 0 0 #093d6b, -2px 0 0 #093d6b, 0 2px 0 #093d6b, 0 -2px 0 #093d6b, 1px 1px #093d6b, -1px -1px 0 #093d6b, 1px -1px 0 #093d6b, -1px 1px 0 #093d6b;
}

.text-logo-admin-two {
  margin-left: 122px; 
  color: #fff; 
  font-weight: bold; 
  font-size: 18px;
  text-shadow: 2px 0 0 #093d6b, -2px 0 0 #093d6b, 0 2px 0 #093d6b, 0 -2px 0 #093d6b, 1px 1px #093d6b, -1px -1px 0 #093d6b, 1px -1px 0 #093d6b, -1px 1px 0 #093d6b;
}

.text-marquee-admin {
  margin-top: 20px;
  width: 100%;
  color: #fff; 
  text-shadow: 1px 0 0 #093d6b, -1px 0 0 #093d6b, 0 1px 0 #093d6b, 0 -1px 0 #093d6b, 1px 1px #093d6b, -1px -1px 0 #093d6b, 1px -1px 0 #093d6b, -1px 1px 0 #093d6b;
}

.setting-icon {
  color: #fff; 
  margin-top: 27px; 
  margin-left: -20px;
}

.text-marquee-admin-top {
  display: none;
}

.footer-style-admin {
  padding-bottom: 0px;
  margin-bottom: 0px;
  text-align: center;
}

.description-right {
  float: right
}

.btn {
  border-radius: 4px;
}

.form-control {
  border-radius: 4px;
}

.two-level {
  margin-left: 100%; 
  margin-top: -25px;
}

label{
  position: relative;
  cursor: pointer;
  color: #666;
  margin-bottom: 0px;
}

input[type="checkbox"], input[type="radio"]{
  position: absolute;
  right: 9000px;
}

/*Check box*/
input[type="checkbox"] + .label-text:before{
  content: "\f096";
  font-family: "FontAwesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing:antialiased;
  width: 1em;
  display: inline-block;
  margin-left: 0px;
  top: 1px;
  border: 0px;
  font-size: 19px;
}

input[type="checkbox"]:checked + .label-text:before{
  content: "\f14a";
  /*color: #2980b9;*/
  color: #004eff;
  animation: effect 250ms ease-in;
}

input[type="checkbox"]:disabled + .label-text{
  color: #aaa;
}

input[type="checkbox"]:disabled + .label-text:before{
  content: "\f0c8";
  color: #ccc;
}

/*Radio box*/

input[type="radio"] + .label-text:before{
  content: "\f10c";
  font-family: "FontAwesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing:antialiased;
  width: 1em;
  display: inline-block;
  margin-right: 5px;
  top: 1px;
  border: 0px;
  font-size: 19px;
}

input[type="radio"]:checked + .label-text:before{
  content: "\f192";
  color: #8e44ad;
  animation: effect 250ms ease-in;
}

input[type="radio"]:disabled + .label-text{
  color: #aaa;
}

input[type="radio"]:disabled + .label-text:before{
  content: "\f111";
  color: #ccc;
}

/*Radio Toggle*/

.toggle input[type="radio"] + .label-text:before{
  content: "\f204";
  font-family: "FontAwesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing:antialiased;
  width: 1em;
  display: inline-block;
  margin-right: 10px;
}

.toggle input[type="radio"]:checked + .label-text:before{
  content: "\f205";
  color: #16a085;
  animation: effect 250ms ease-in;
}

.toggle input[type="radio"]:disabled + .label-text{
  color: #aaa;
}

.toggle input[type="radio"]:disabled + .label-text:before{
  content: "\f204";
  color: #ccc;
}


@keyframes effect{
  0%{transform: scale(0);}
  25%{transform: scale(1.3);}
  75%{transform: scale(1.4);}
  100%{transform: scale(1);}
}

.login-responsive {
  display: none;
}

.alert {
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
}

.tooltip > .tooltip-inner {
  border-radius: 4px;
}

.headline {
    margin: 20px 0;
    padding: 5px 0 10px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
}

.headline .line {
    display: block;
    height: 3px;
    background: #3c8dbc;
    margin-top: 7px;
    margin-bottom: -10px;
    width: 350px;
}

.text-middle {
  vertical-align: middle!important;
}

.font-small {
  font-size: 12px;
}

.font-default {
  font-size: 14px;
}

.cursor-pointer{
  cursor: pointer;
}

.button-dph {
  padding-bottom: 15px;
}

td.text-red {
  color: red;
  font-weight: bold;
}

td.text-green {
  color: green;
  font-weight: bold;
}

td.text-blue {
  color: blue;
  font-weight: bold;
}

td.text-black {
  color: black;
  font-weight: bold;
}

.line-style {
  border: 0;
  height: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

#loading-bar {
    position: absolute;
    z-index: 100000;
    width: 100%;
}

.wrapper {
    padding: 25px 50px;
    display: table;
    width: 100%;
}

.wrapper-1 {
    margin-top: 10px;
}

.wrapper-2 {
    margin-top: 20px;
}

.wrapper-3 {
    margin-top: 30px;
}

.wrapper-4 {
    margin-top: 40px;
}

.wrapper-5 {
    margin-top: 50px;
}


/* Navbar Custom */

.navbar-custom {
    background-color: #fff!important
}

.navbar-custom .navbar-nav>li>a {
    color: #55a5b4!important;
    font-size: 16px!important;
}

.navbar-custom .navbar-brand {
    width: 170px;
    padding: 12px 0px;
}

.navbar-custom .navbar-brand img {
    width: 100%;
}


/* Header Menu */

.header-menu {
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    width: 100%;
    height: 100%;
    padding: 10px 0 150px 0;
}

.header-title {
    font-size: 28px;
}

.header-desc {
    font-weight: 300!important;
    width: 28%;
    margin: 14px auto!important;
}

.header-title,
.header-desc {
    text-align: center;
    color: #fff!important
}

.logo {
    width: 85px;
    margin: 0 auto;
}

.logo img {
    width: 100%;
}

.header-menus-wrapper {
    margin-top: 18px;
}

.input-group.input-search {
    width: 535px;
    margin: 0 auto;
    margin-top: 40px;
    box-shadow: 2px 6px 35px rgba(0, 0, 0, 0.3);
    border-radius: 25px;
}

.input-group.input-search input {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    height: 50px;
    border-left: 0!important;
    font-size: 18px;
    font-weight: 300!important;
    color: #b7b7b7!important;
    letter-spacing: 1px!important
}

.input-group.input-search .input-group-addon {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    background-color: #fff;
    color: #8dc63f;
    font-size: 23px;
    padding: 0 5px 0 20px;
}

.menu-wrapper {
    width: 210px;
    margin: 0 auto;
    cursor: pointer;
    display: block;
}

.menu-wrapper:hover {
    text-decoration: none;
}

.menu-wrapper:hover {
    -ms-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    box-shadow: 2px 6px 35px rgba(0, 0, 0, 0.3);
}

.menu-wrapper .menu-img {
    position: relative;
}

.menu-wrapper .menu-img img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%;
}

.menu-wrapper .menu-img .menu-label {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: -19px;
    width: 158px;
    margin: 0 auto;
    color: #fff;
    padding: 10px 0;
    border-radius: 20px;
}

.menu-wrapper .menu-content {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #fff;
    text-align: center;
    font-weight: 300!important;
    color: #959595;
    padding: 35px 15px 20px 15px;
    line-height: 12px;
    font-size: 10px;
}


/* Dataset */

.dataset-wrapper {
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 20px 25px;
    margin-top: 35px;
}

.dataset-wrapper.active {
    background-color: #f6f6f6;
    border-color: #5674b9;
}

.dataset-title {
    padding-top: 25px;
    padding-left: 25px;
}

.dataset-title-line {
    margin-left: 25px;
    width: 47px;
    border: 1px solid #5674b9;
}

.dataset-child-title {
    color: #5674b9!important;
    font-size: 16px;
}

.dataset-content {
    color: #959595!important;
    font-size: 12px
}

.dataset-label {
    background-color: #f7941d;
    width: 50px;
    color: #fff;
    padding: 1px 12px;
    border-radius: 5px;
    margin-top: 16px;
}


/* Goverment */

.goverment-wrapper {
    border-radius: 4px;
    padding: 15px 20px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: 2px dashed;
    border-color: #e1e1e1;
}

.goverment-wrapper.event {
    background-color: #f6f6f6;
}

.goverment-wrapper:first-of-type {
    margin-top: 35px;
    border-top: 1px solid #e1e1e1;
}

.goverment-wrapper:last-of-type {
    border-bottom: 1px solid #e1e1e1;
}

.goverment-dates {
    text-align: center;
}

.goverment-dates .day-month,
.goverment-dates .year {
    margin: 0!important;
    padding: 3px 0;
    font-size: 18px;
}

.goverment-dates .day-month {
    background-color: #8dc63f;
    color: #fff;
}

.goverment-dates .year {
    background-color: #e1e1e1;
    color: #707070;
}

.goverment-content {
    font-size: 16px;
    color: #707070
}


/* Headline */

.headline-row {
    background-color: #f1f2f7;
    padding-bottom: 20px
}

.headline-wrapper {
    margin-top: 25px;
}

.headline-title {
    padding-top: 25px;
}

.headline-title span {
    position: relative;
    top: 5px;
}

.headline-title img {
    width: 25px;
    margin-right: 10px;
}

.headline-child-title {
    color: #5674b9!important;
    font-size: 16px;
    font-weight: 700!important;
    margin-bottom: 0!important;
}

.headline-dates {
    margin-top: 0!important;
}

.headline-dates,
.headline-content {
    color: #959595;
    font-weight: 300!important
}

.headline-content {
    line-height: 1.2;
    margin-bottom: 0!important
}

.headline-read-more {
    font-weight: 300;
    font-style: italic;
}


/* Detail Page */

.detail-wrapper .menu-wrapper {
    box-shadow: 2px 6px 35px rgba(154, 152, 152, 0.3);
}

.detail-wrapper .menu-wrapper:hover {
    -ms-transform: none!important;
    -webkit-transform: none!important;
    transform: none!important;
}

#detail-header {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 68px 0;
}

#detail-header .input-search {
    margin-left: 0
}

.detail-header-title {
    color: #fff!important;
    padding: 0;
    list-style: none;
}

.detail-header-title li {
    display: inline-block;
    vertical-align: middle;
}

.data-counter-wrapper {
    padding: 10px 0;
    list-style: none;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    box-shadow: 2px 6px 35px rgba(154, 152, 152, 0.3);
}

.data-counter-wrapper>li {
    display: inline-block;
    vertical-align: middle;
}

.data-counter-wrapper>li.data-counter {
    padding: 0 10px;
    font-size: 60px;
    font-weight: bold;
}

.data-title {
    padding: 15px 0 15px 20px;
    color: #7c7c7c!important;
}

.data-aplikasi {
    background-color: #fff;
    text-align: left;
}

.data-aplikasi li.data-img {
    padding-left: 10px;
    padding-right: 10px;
}

.data-aplikasi li img {
    width: 100%;
}

.data-aplikasi li h4 {
    color: #7c7c7c!important
}

.jadwal-kegiatan-pendidkan {
    list-style: none;
    padding-left: 60px
}

.jadwal-kegiatan-pendidkan>li {
    position: relative;
    padding: 7px 0
}

.jadwal-kegiatan-pendidkan>li.active:before {
    background: #69c9a8;
}

.jadwal-kegiatan-pendidkan>li:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #69c9a8;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    padding-right: 10px;
    left: -50px;
    top: 20px;
}

.jadwal-kegiatan-pendidkan>li:after {
    content: '';
    height: 50px;
    border: 2px solid #69c9a8;
    display: block;
    width: 1px;
    position: absolute;
    top: 38px;
    left: -42px;
}

.jadwal-kegiatan-pendidkan>li:last-child:after {
    display: none;
}

.jadwal-title {
    color: #69c9a8;
    font-size: 16px;
}

.jadwal-date {
    color: #999999;
    font-weight: 300
}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths,
.col-lg-6ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media(max-width: 560px) {
    .header-desc {
        width: 100%!important;
    }
    .input-group.input-search input {
        font-size: 10px;
    }
}

@media(max-width: 768px) {
    .input-group.input-search {
        width: 100%;
    }
    .header-desc {
        width: 50%;
    }
    .dataset-title {
        padding-left: 0;
    }
    .dataset-title-line {
        margin-left: 0
    }
    .footer-top ul.footer-list>li {
        text-align: center;
        margin: 15px 0;
    }
    .footer-counter {
        margin: 0 auto!important;
    }
    .footer-top .footer-top-logo {
        width: 100%;
    }
    .footer-top .footer-icon-goverment {
        padding: 0!important;
    }
    .wrapper {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        display: block;
    }
    .chart-wrapper canvas {
        width: 100%!important;
    }
    .detail-header-title {
        padding: 15px;
    }
    .detail-wrapper .menu-wrapper{
      margin: 30px 0
    }
    .navbar-custom .container-fluid {
        padding: 0 30px;
    }
    .navbar-custom .navbar-brand {
        padding: 5px 0
    }
    #detail-header {
        background-position: 80% center;
    }
    .datatables-wrapper{
      margin: 15px 0
    }

    .chart-wrapper{
      padding: 15px
    }
}

@media(max-width: 992px) {
    .footer-top {
        padding-left: 0;
        padding-right: 0
    }
    .footer-top ul.footer-list {
        margin: 0
    }
    .footer-top .footer-icon-goverment {
        padding: 0 20px;
    }
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
    .navbar-custom .navbar-nav>li>a {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%!important;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%!important;
        float: left;
    }
    .col-lg-6ths {
        width: 33%!important;
        float: left;
    }
}

.last-update-p {
    color: #737373;
    font-style: italic;
    float: right;
}

.data-icon {
    color: rgba(0,0,0,0.15);
    transition: all .3s linear;
}

.data-label {
    padding: 0px 10px;
}

.goverment-content-new {
    font-size: 16px;
    color: #707070;
    cursor: pointer;
}

.link {
    cursor: pointer;
    text-decoration: underline;
}

.btn-back {
    float: left; margin-left: 35px;
}

.title-kc {
    font-size: 24px;
    font-weight: 500;    
}

.pop-up a {
    position: fixed;
    right: 0px;
    top: 50%;
    z-index: 1;
}

.menu-column-img {
    width: 210px; 
    height: 201px; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px;
}

.img-menu-wrapper {
    width: 72%!important; 
    display: block; 
    margin: 0 auto; 
    padding-top: 10px;
}

.form-input-captcha {
    margin-left: -70px;
}

.column-form-captcha {
    text-align: center; 
    font-weight: bold; 
    font-size: 17px; 
    width: 65%;
}

.table-info-pbb {
  margin-left: 50%;
}

.notes {
  color: red; 
  font-size: 12px;
}

#divLoading
{
    display : none;
}
#divLoading.show
{
    display : block;
    position : fixed;
    z-index: 10000;
    background-image : url('../images/loading/loading-spinner.gif');
    background-color:#eee;
    opacity : 0.4;
    background-repeat : no-repeat;
    background-position : center;
    left : 0;
    bottom : 0;
    right : 0;
    top : 0;
}
.text-loading {
  margin-left : 40%;
  margin-top: 28%;
    color: black;
    font-weight: bold;
}
#loadinggif.show
{
    left : 50%;
    top : 50%;
    position : absolute;
    z-index : 10;
    width : 32px;
    height : 32px;
    margin-left : -16px;
    margin-top : -16px;
}

.testimonial-primary {
    background-color: #ffffff;
    border-left: 4px solid #337ab7;
    font-size: 14.5px;
}
.testimonial-success {
    background-color: #ffffff;
    border-left: 4px solid #5cb85c;
    font-size: 14.5px;
}
.testimonial-info {
    background-color: #ffffff;
    border-left: 4px solid #5bc0de;
    font-size: 14.5px;
}
.testimonial-warning {
    background-color: #ffffff;
    border-left: 4px solid #f0ad4e;
    font-size: 14.5px;
}
.testimonial-danger {
    background-color: #ffffff;
    border-left: 4px solid #d9534f;
    font-size: 14.5px;
}
blockquote {
    padding: 10px 20px;
    margin: 0 0 5px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}
.count-post {
    font-size: 10px;
    float: right;
    padding-top: 4px;
}
.image-description {
    margin-top: 4px;
    border-top: 1px solid #eee;
    text-align: center;
    font-size: 10px;
    font-style: italic;
}

.badge-primary {
  background-color: #337ab7;
}
.badge-success {
  background-color: #5cb85c;
}
.badge-info {
  background-color: #5bc0de;
}
.badge-warning {
  background-color: #f0ad4e;
}
.badge-danger {
  background-color: #d9534f;
}

.line-title-default {
  background-color: #eee; 
  border-radius: 3px;
  text-align: center; 
  padding-top: 5px; 
  padding-bottom: 5px;
}
.line-title-primary {
  background-color: #337ab7; 
  color: #fff;
  border-radius: 3px;
  text-align: center; 
  padding-top: 5px; 
  padding-bottom: 5px;
}
.line-title-success {
  background-color: #5cb85c; 
  color: #fff;
  border-radius: 3px;
  text-align: center; 
  padding-top: 5px; 
  padding-bottom: 5px;
}
.line-title-info {
  background-color: #5bc0de; 
  color: #fff;
  border-radius: 3px;
  text-align: center; 
  padding-top: 5px; 
  padding-bottom: 5px;
}
.line-title-warning {
  background-color: #f0ad4e; 
  color: #fff;
  border-radius: 3px;
  text-align: center; 
  padding-top: 5px; 
  padding-bottom: 5px;
}
.line-title-danger {
  background-color: #d9534f; 
  color: #fff;
  border-radius: 3px;
  text-align: center; 
  padding-top: 5px; 
  padding-bottom: 5px;
}

.swal-text {
  font-weight: bold;
  text-align: center;
}





.shape{    
  border-style: solid; border-width: 0 70px 55px 0; float:right; height: 0px; width: 0px;
  -ms-transform:rotate(360deg); /* IE 9 */
  -o-transform: rotate(360deg);  /* Opera 10.5 */
  -webkit-transform:rotate(360deg); /* Safari and Chrome */
  transform:rotate(360deg);
}
.offer{
  background:#fff; 
  border: 1px solid #ddd; 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
  margin: 15px 0; 
  overflow: hidden;
}
.offer:hover {
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    transform:rotate scale(1.1); 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.offer-non-hover{
  background:#fff; 
  border: 1px solid #ddd; 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
  margin: 15px 0; 
  overflow: hidden;
}
.offer-footer {
  background:#fff; 
  margin-top: 90px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow:hidden;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  padding: 5px 10px;
  color: #FFF;
}
.shape {
  border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-radius{
  border-radius: 6px;
}
.offer-danger { border-color: #d9534f; }
.offer-background-danger { background: #d9534f; }
.offer-danger .shape{
  border-color: transparent #d9534f transparent transparent;
}
.offer-success {  border-color: #5cb85c; }
.offer-background-success { background: #5cb85c; }
.offer-success .shape{
  border-color: transparent #5cb85c transparent transparent;
}
.offer-default {  border-color: #999999; }
.offer-background-default { background: #999999; }
.offer-default .shape{
  border-color: transparent #999999 transparent transparent;
}
.offer-primary {  border-color: #428bca; }
.offer-background-primary { background: #428bca; }
.offer-primary .shape{
  border-color: transparent #428bca transparent transparent;
}
.offer-info { border-color: #5bc0de; }
.offer-background-info { background: #5bc0de; }
.offer-info .shape{
  border-color: transparent #5bc0de transparent transparent;
}
.offer-warning {  border-color: #f0ad4e; }
.offer-background-warning { background: #f0ad4e; }
.offer-warning .shape{
  border-color: transparent #f0ad4e transparent transparent;
}

.offer-up { border-color: #d9534f; }
.offer-background-up { background: #d9534f; }
.offer-up .shape{
  border-color: transparent #d9534f transparent transparent;
}
.offer-down {  border-color: #5cb85c; }
.offer-background-down { background: #5cb85c; }
.offer-down .shape{
  border-color: transparent #5cb85c transparent transparent;
}
.offer-fixed {  border-color: #428bca; }
.offer-background-fixed { background: #428bca; }
.offer-fixed .shape{
  border-color: transparent #428bca transparent transparent;
}

.shape-text{
  color:#fff; font-size:12px; font-weight:bold; position:relative; right:-40px; top:2px; white-space: nowrap;
  -ms-transform:rotate(30deg); /* IE 9 */
  -o-transform: rotate(360deg);  /* Opera 10.5 */
  -webkit-transform:rotate(30deg); /* Safari and Chrome */
  transform:rotate(0deg);
  margin-top: -3px;
  margin-left: -3px;
} 
.offer-content{
  padding-top: 7px;
  padding-left: 7px;
  padding-right: 10px;
  /*height: 20px;*/
  height: 40px;
}
@media (min-width: 487px) {
  .container {
    max-width: 750px;
  }
  .col-sm-6 {
    width: 50%;
  }
}
@media (min-width: 900px) {
  .container {
    max-width: 970px;
  }
  .col-md-4 {
    width: 33.33333333333333%;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
  .col-lg-3 {
    width: 25%;
  }
}

.price-up {
  background: #FF0000;
}
.price-down {
  background: #32CD32;
}
.price-fixed {
  background: #1E90FF;
}

.font-price-up {
  color: #FF0000;
}
.font-price-down {
  color: #32CD32;
}
.font-price-fixed {
  color: #1E90FF;
}

.font-price-up-top {
  color: #FF0000;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.font-price-down-top {
  color: #538654;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.font-price-fixed-top {
  color: #1E90FF;
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.title-page {
  font-size: 18px; 
  font-family: inherit;
  font-weight: 500; 
  line-height: 1.1; 
  color: inherit;
}

.list-group-item:hover {
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    transform:rotate scale(1.1); 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 100;
}

.table-chart-responsive {
  width: 100%;
}

#myCarousel .carousel-caption {
  left:0;
  right:0;
  bottom:0;
  text-align:left;
  padding:10px;
  background:rgba(0,0,0,0.6);
  text-shadow:none;
}

#myCarousel .list-group {
  position:absolute;
  top:0;
  right:0;
}
#myCarousel .list-group-item {
  border-radius:0px;
  cursor:pointer;
}
#myCarousel .list-group .active {
  background-color: #46b8da;  
  border: none;
}

@media (min-width: 992px) { 
  /*#myCarousel {padding-right:33.3333%;}*/
  #myCarousel {padding-right:15px;}
  /*#myCarousel .carousel-controls {display:none;}  */
}
@media (max-width: 991px) { 
  .carousel-caption p,
  #myCarousel .list-group {display:none;} 
}

.images-normal{  
  /*width: 767px; */
  width: 100%;
  height: 440px;
  overflow: hidden;
  margin:0;  
}

.images-normal img{
  display:block;
  /*width: 767px; */
  width: 100%;
  height: 440px;
}

.change-ratio img{
   margin-bottom: -84%;
}

 #pointer {
  width: 140px;
  height: 40px;
  position: relative;
  background: #2887DC;
  z-index: 1;
  color: #fff; 
  font-size: 17px; 
  padding-top: 6px; 
  padding-left: 10px;
}

#pointer:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid #2887DC;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.logo-website {
  text-align:justify; 
  margin-bottom: -45px;
}

.menu-website {
  float: right; 
  margin-top: -10px;
}

.body-slideshow {
  margin-right: -15px;
}

.navbar-website {
  padding-top: 28px; 
  padding-bottom: 18px;
}

.navbar-website-dashboard {
  padding-top: 0px; 
  padding-bottom: 0px;
}

.navbar-login {
  margin-top: -25px; 
  padding-bottom: 5px; 
  padding-top: 5px;
}

.column-navbar-login {
  text-align:justify; 
  margin-left: 10px; 
  float: right;
}

.menu-title-navbar-login {
  cursor: pointer; 
  color: #fff; 
  font-size: 14px; 
  font-weight: bold;
}

.font-navbar-login {
  margin-right: 5px; 
  font-weight: bold;
}

.navbar-logo-small {
  background: #54A0E2; 
  padding-top: 20px; 
  padding-bottom: 18px;
}

.column-navbar-logo {
  text-align:justify; 
  margin-left: 10px;
}

.img-logo {
  float:left; 
  margin:0 8px 4px 0; 
  width: 50px;
}

.padding-img-logo {
  padding-bottom: 5px;
}

.column-navbar-button-menu {
  margin-bottom: -18px; 
  margin-top: 0px;
}

.button-navbar-menu {
  border-radius: 3px!important; 
  margin-left: 8px!important; 
  z-index: 1;
}

.navbar-marquee {
  margin-bottom: -18px; 
  margin-top: 10px;
}

.font-marquee-navbar {
  font-size: 17px; 
  color: #fff; 
  margin-right: -25px;
}

.margin-marquee-navbar {
  margin-right: 30px;
}

.title-carousel {
  font-size: 18px;
  display: block;
  margin-top: 12px;
  margin-bottom: 8px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
}

#box-alert-validate {
  margin-top: 0px;
  margin-left: -14px;
  font-size: 13px;
  color: red;
  font-weight: bold;
  display: none;
}

.title-komoditas {
  color: #fff; 
  font-size: 15px;
}

.price-komoditas {
  color: #fff; 
  font-size: 17px; 
  font-weight: bold;
}

.error{
  color:#eb3b5a;
} 
.valid{
  color:#25a79f;
}
.help-block {
  font-weight: bold;
  margin-bottom: -18px;
  margin-top: 2px;
}

.bg-price-up {
  background: #FF5B5B;
}
.bg-price-down {
  background: #7CC378;
}
.bg-price-fixed {
  background: #51AEFF;
}

.padding-md {
  padding: 15px!important
}

.bg-white {
  background-color: #fff
}

.bg-light {
  background-color: #f1f5fc
}

.bg-dark {
  background-color: #222
}

.bg-grey {
  background-color: #eee;
  text-shadow: 0 1px #fff
}

.bg-primary {
  background-color: #424f63;
  color: #BECFDF
}

.bg-primary a {
  color: #BECFDF
}

.bg-primary a:focus,
.bg-primary a:hover {
  color: #fff
}

.bg-warning {
  background-color: #f3ce85;
  color: #fff
}

.bg-info {
  background-color: #6bafbd;
  color: #fff
}

.bg-success {
  background-color: #65cea7;
  color: #fff
}

.bg-danger {
  background-color: #fc8675!important;
  color: #fff!important
}
.m-left-xs {
  margin-left: 5px
}

.panel-stat3 {
  position: relative;
  overflow: hidden;
  padding: 25px 20px;
  margin-bottom: 20px;
  color: #fff;
  cursor: pointer;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px
}

.panel-stat3 .stat-icon {
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 30px;
  opacity: .3
}

.panel-stat3 .refresh-button {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  color: rgba(0, 0, 0, .3)
}

.panel-stat3 .refresh-button:hover {
  color: #fff;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease
}

.loading-overlay {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .4);
  text-align: center
}

.loading-overlay.active {
  display: block
}

.loading-overlay .loading-icon {
  position: absolute;
  top: 45%;
  left: 50%;
  color: #fff;
  animation: spin .8s infinite linear;
  -webkit-animation: spin .8s infinite linear;
  -moz-animation: spin .8s infinite linear;
  -ms-animation: spin .8s infinite linear;
  -o-animation: spin .8s infinite linear
}

#divLoading
{
  display : none;
}
#divLoading.show
{
  display : block;
  position : fixed;
  z-index: 10000;
  background-image : url('../images/loading/loading-spinner.gif');
  background-color:#eee;
  opacity : 0.4;
  background-repeat : no-repeat;
  background-position : center;
  left : 0;
  bottom : 0;
  right : 0;
  top : 0;
}
.text-loading {
  margin-left : 40%;
  margin-top: 28%;
  color: black;
  font-weight: bold;
}

.title-perbandingan {
  font-weight: bold; 
  font-size: 16px; 
  margin-top: 20px; 
  margin-bottom: 15px; 
  border-top: 1px dotted #cccccc; 
  border-bottom: 1px dotted #cccccc; 
  padding-top: 5px; 
  padding-bottom: 5px;
}

.tgl-jam {
    margin-top: -10px;
    font-weight: 100;
    color: #fff;
    text-transform: uppercase;
}
.tgl-jam .jam {
    font-size: 40px;
    line-height: 52px;
    font-weight: bold;
    height: 58px;
    border-left: 1px solid #fff;
    padding-left: 10px;
    margin-left: 10px;
    width: 160px;
}
.tgl-jam .tgl {
    text-align: right;
    line-height: 1.4;
    font-size: 23px;
}

.maincontent{
  position: fixed; 
  margin-left:auto;
  margin-right: auto;
  overflow: hidden; 
  top: 130px;
  bottom: 30px;
  width: 100%;
}

.column-spacing {
  padding-bottom: 0px!important;
  padding-top: 2px!important;
  font-size: 14px;
}

.video-list-thumbs{}
.video-list-thumbs > li{
    margin-bottom:12px;
}
.video-list-thumbs > li:last-child{}
.video-list-thumbs > li > .href-video{
  display:block;
  position:relative;
  background-color: #111;
  color: #fff;
  padding: 8px;
  border-radius:3px
    transition:all 500ms ease-in-out;
    border-radius:4px
}
.video-list-thumbs > li > .href-video:hover{
  box-shadow:0 2px 5px rgba(0,0,0,.3);
  text-decoration:none
}
.video-list-thumbs h2{
  bottom: 0;
  font-size: 14px;
  height: 33px;
  margin: 8px 0 0;
}
.video-list-thumbs .glyphicon-play-circle{
    font-size: 60px;
    opacity: 0.6;
    position: absolute;
    right: 36%;
    top: 26%;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    transition:all 500ms ease-in-out;
}
.video-list-thumbs > li > a:hover .glyphicon-play-circle{
  color:#fff;
  opacity:1;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.video-list-thumbs .duration{
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  left: 12px;
  line-height: 13px;
  padding: 2px 3px 1px;
  position: absolute;
  top: 12px;
    transition:all 500ms ease;
}
.video-list-thumbs > li > a:hover .duration{
  background-color:#000;
}
@media (min-width:320px) and (max-width: 480px) { 
  .video-list-thumbs .glyphicon-play-circle{
    font-size: 35px;
    right: 36%;
    top: 27%;
  }
  .video-list-thumbs h2{
    bottom: 0;
    font-size: 12px;
    height: 22px;
    margin: 8px 0 0;
  }
}

.bootstrap-datetimepicker-widget tr:hover {
  background-color: #0abde3;
}

.dropdown-href {
  margin-top: 5px!important; 
  padding-top: 5px!important;
  margin-bottom: 2px!important; 
  padding-left: 15px!important;
  padding-right: 15px!important;
  border: none!important;
  text-transform: none!important;
}

.dropdown-href:hover {
  background-color: #eee!important;
  padding-left: 20px!important;
  color: #2383cb!important;
}

.dropdown-ul {
  margin-left: 40px;
}

.breadcrumb-shadow {
  margin-top: 6px; 
  border-bottom: 1px solid #2383cb;
  box-shadow: 0 10px 10px -10px #333;
}

#view-image {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#view-image:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

.twitter-hover {
    background-image: url('../images/icon/twitter-hover.png');
}
.facebook-hover {
    background-image: url('../images/icon/facebook-hover.png');
}
.google-hover {
    background-image: url('../images/icon/google-hover.png');
}
.linkedin-hover {
    background-image: url('../images/icon/linkedin-hover.png');
}
.pinterest-hover {
    background-image: url('../images/icon/pinterest-hover.png');
}
.instagram-hover {
    background-image: url('../images/icon/instagram-hover.png');
}
.tumblr-hover {
    background-image: url('../images/icon/tumblr-hover.png');
}
.reddit-hover {
    background-image: url('../images/icon/reddit-hover.png');
}
.stumbleupon-hover {
    background-image: url('../images/icon/stumbleupon-hover.png');
}
.social-slide {
  height: 48px;
  width: 48px;
  margin: 5px;
  float: left;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  transition: all ease 0.3s;
  border-radius: 3px;
}
.social-slide:hover {
  background-position: 0px -48px;
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.fa-rotate-90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.tabs-menu {
  margin-right: 5px;
  padding: 7px 13px !important; 
  border-radius: 5px !important; 
  border: 1px solid #1574bb;
  color: #2383cb;
}