:root {
  --bghitam: #35404f;
  --warnadefault: #1dbb90;
  --warnaorange: #dc9d00;
  --fontdefault: 'Arimo', sans-serif;
  --fontstyle: 'Berkshire Swash', sans-serif;
  --fontsize: 1.2rem;
}
.loader{
  position:fixed; border-radius:30px; display:none;z-index:200003;left:50%;top:50%;
  background-color: #fff;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.loader img{
  width: 100px !important;
}
input[type=text], input[type=password], label{
  display: inline-block;
}
input[type="checkbox"] + label::before {
	margin-left: auto !important;
}
select{
  padding: 5px 8px;
  display: inline-block;
}
input[type=text], input[type=password], select, textarea{
  width: 100% !important;
  line-height:none;
  height:32px !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.tombol { width:calc(100% - 12px) !important; }
.tombol, input[type=submit], input[type=file], input[type=reset], table .tombol {
  padding: 2px 8px;
}
.tombol, input[type=submit], input[type=file], input[type=reset], button, table .tombol {
  height:32px !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color:#FFF!important;
  border:#006666 1px solid !important; min-height:24px;
  display:inline-table; line-height:24px;  min-width:10px; padding-right:6px;padding-left:6px; text-align:center;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0088b2+0,006699+100 */
  background: #0088b2; /* Old browsers */
  background: -moz-linear-gradient(top,  #0088b2 0%, #006699 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #0088b2 0%,#006699 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #0088b2 0%,#006699 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088b2', endColorstr='#006699',GradientType=0 ); /* IE6-9 */
}
input[type=file] { height:auto !important; }
input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,input[type=datetime]:focus,input[type=number]:focus,
input[type=search]:focus,input[type=time]:focus,input[type=url]:focus,input[type=email]:focus,textarea:focus,
select:focus{
  -moz-box-shadow: 0 0 8px #88D5E9;
  -webkit-box-shadow: 0 0 8px #88D5E9;
  box-shadow: 0 0 8px #88D5E9;
  border: 1px solid #88D5E9;
}
.drag {
  display:none;
  position:fixed;/*
  border-bottom-right-radius : 6px;
  border-bottom-left-radius:6px;*/
  cursor:move;
  top:50%;
  left:50%;
  margin:0;
  z-index:2000002;
  /*padding:2px 6px 6px 6px;*/
  padding : 0;
  margin-right: -50%;
  transform: translate(-50%, -50%) !important;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  /*box-shadow: 0 5px 15px rgba(0, 0, 0, .5);*/
  /*border: 1px solid rgba(0, 0, 0, .2);*/
  border-radius: 6px;
  /*height: 70%;*/
}
.drag .head{
  cursor:move;
  min-height:24px;
  font-weight:bold;
  padding:10px 4px 10px 10px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2e1ff+0,66b6fc+100;Blue+3D+%236 */
  background: rgb(178,225,255); /* Old browsers */
  background: -moz-linear-gradient(top,  #008fe2 0, #00b29c 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #008fe2 0, #00b29c 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(154deg, #008fe2 0, #00b29c 100%);
  color: #FFF;
  border-radius: 6px 6px 0 0;
}
.drag .head .close:before{
  float:right;
  position:absolute;
  top:8px;
  right:8px;
  /*background-image:url(../images/Close_Circle_Blue.png);*/
  content: "\f00d";
  font-family: FontAwesome;
  color: red;
  width:24px;
  height:24px;
  cursor:pointer;
}
.drag .konten{
  background:#FFF;
  cursor:default;
  padding:2px 10px 6px 10px;
  border-radius: 0 0 6px 6px;
}
.dialogboxcenter{ display: none; position: fixed; top: 0px; left: 0px; height:100%; width: 100%; z-index: 200004; padding-top:200px; }
.dialogboxoverlay{ display: none; opacity: .8; position: fixed; top: 0px; left: 0px; background: #000; height:100%; width: 100%; z-index: 200001; }
.dialogbox{ background: #006687; border-radius:7px; z-index:200005; width:90%; max-width:500px; max-height:580px; padding:1px; }
.dialogbox > div{ margin:0px; border-radius:5px; }
.dialogbox > div > .dialogboxhead{ background: -moz-linear-gradient(#00CCCC, #009999);
  border-top-left-radius:5px; border-top-right-radius:5px; font-size:14px; font-weight:bold; padding:4px; color:#FFF; }
.dialogbox > div > .dialogboxheadsalah{ background: -moz-linear-gradient(top, rgba(255,231,227,1) 0%, rgba(196,47,13,1) 86%);
  border-top-left-radius:5px; border-top-right-radius:5px; font-size:14px; font-weight:bold; padding:4px; color:#FFF; }
.dialogbox > div > .dialogboxbody{ background: #00CCC0; padding:10px; color:#000; overflow:auto; max-height:500px;}
.dialogbox > div > .dialogboxfoot{ background: #00CCC0; padding:2px; padding-right:4px; text-align:right; }
.tombol:hover, input[type=submit]:hover, input[type=file]:hover, input[type=reset]:hover, button:hover, table .tombol:hover {
  color:#036!important;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffff+0,84cfed+100 */
  background: #feffff; /* Old browsers */
  background: -moz-linear-gradient(top,  #feffff 0%, #84cfed 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #feffff 0%,#84cfed 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #feffff 0%,#84cfed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#84cfed',GradientType=0 ); /* IE6-9 */
}

/* For mobile phones: */
.abrow .input { height: auto !important;
  padding:0px !important;
  margin:auto !important;
  border:0px;
}
.abrow [class*="col-"] {
  width: 100%;
}

@media only screen and (max-width: 460px) {
  .panel .panel-body .row .col-sm-3{
    text-align: left !important;
    line-height: 0px !important;
  }
  .row.form-row label{
    text-align: left !important;
  }
}

@media only screen and (max-width: 650px) {
  /* For tablets: */
  .abrow .col-p-1 {width: 8.33%;}
  .abrow .col-p-2 {width: 16.66%;}
  .abrow .col-p-3 {width: 25%;}
  .abrow .col-p-4 {width: 33.33%;}
  .abrow .col-p-5 {width: 41.66%;}
  .abrow .col-p-6 {width: 50%;}
  .abrow .col-p-7 {width: 58.33%;}
  .abrow .col-p-8 {width: 66.66%;}
  .abrow .col-p-9 {width: 75%;}
  .abrow .col-p-10 {width: 83.33%;}
  .abrow .col-p-11 {width: 91.66%;}
  .abrow .col-p-12 {width: 100%;}
  .td1 { display:none; }
  .td2 { display:none; }
  .td3 { display:table-cell; }
  .abrow .label { display:inline-block; float:left; text-align:left  }
  .abrow .samadengan { display:inline-block; float:left; padding:6px 0px; text-align:left }
  .abrow .input { width:calc(100% - 16px) !important; padding:0px 8px; display:inline-block; text-align:left}
  .menuweb { display:none; }
}
@media only screen and (min-width: 651px) {
  /* For tablets: */
  .abrow .col-m-1 {width: 8.33%;}
  .abrow .col-m-2 {width: 16.66%;}
  .abrow .col-m-3 {width: 25%;}
  .abrow .col-m-4 {width: 33.33%;}
  .abrow .col-m-5 {width: 41.66%;}
  .abrow .col-m-6 {width: 50%;}
  .abrow .col-m-7 {width: 58.33%;}
  .abrow .col-m-8 {width: 66.66%;}
  .abrow .col-m-9 {width: 75%;}
  .abrow .col-m-10 {width: 83.33%;}
  .abrow .col-m-11 {width: 91.66%;}
  .abrow .col-m-12 {width: 100%;}
  .td1 { display:none; }
  .td2 { display:table-cell; }
  .td3 { display:table-cell; }
  .abrow .label { width:calc(23% - 16px) !important; display:inline-block; float:left; text-align:left; margin:4px 0px;}
  .abrow .samadengan { width:2% !important; display:inline-block; float:left; padding:6px 0px; margin:4px 0px; }
  .abrow .input { width:75% !important; display:inline-block; text-align:left; margin:4px 0px; }
  .menuweb { display:block; }
}
@media only screen and (min-width: 1000px) {
  /* For desktop: */
  .abrow .col-1 {width: 8.33%;}
  .abrow .col-2 {width: 16.66%;}
  .abrow .col-3 {width: 25%;}
  .abrow .col-4 {width: 33.33%;}
  .abrow .col-5 {width: 41.66%;}
  .abrow .col-6 {width: 50%;}
  .abrow .col-7 {width: 58.33%;}
  .abrow .col-8 {width: 66.66%;}
  .abrow .col-9 {width: 75%;}
  .abrow .col-10 {width: 83.33%;}
  .abrow .col-11 {width: 91.66%;}
  .abrow .col-12 {width: 100%;}
  .td1 { display:table-cell; }
  .td2 { display:table-cell; }
  .td3 { display:table-cell; }
}
.abrow div{
  margin-bottom:4px;
}
.abrow::after {
  content: "";
  clear: both;
  display: block;
}
.abrow [class*="col-"] {
  float: left;
  padding: 0px;
}



.menutab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

.menutab li {
  float: left;
  cursor:pointer;
}

.menutab li a {
  display: block;
  color: #003;
  text-align: center;
  font-size:12px;
  text-transform:uppercase;
  padding: 10px 12px;
  text-decoration: none;
}

.menutab li a:hover:not(.active) {
  background-color: #ddd;
}

.menutab li a.active {
  color: white;
  background-color: #008CD0;
}
.divlistsearch {
	border: 1px solid #999999;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	background-color: #F9F9F9;
	border-top: 0px;
	padding: 6px;
	display: none;
	position: absolute;
	z-index: 2000;
	background-color: rgba(253, 253, 253, 1.0);
	width: calc(100%) !important;
}

.divlistbox {
	position: relative;
	font-size: 10px;
}

.divlistbox button {
	min-height: 32px;
	background: url(../images/arrowdownsmall.png) no-repeat whitesmoke right !important;
	background-position: right 6px bottom 50% !important;
	border-radius: 2px 2px 0 0 !important;
	cursor: pointer;
	opacity: 0.8;
	font-size: 11px;
	color: #036 !important;
	border: 1px solid #A2A2A2 !important;
}

.divlistbox button:hover {
	background-color: transparent !important;
}

.inputfilter {
	/*padding-left: 28px !important;*/
	height: 24px;
	width: calc(100% - 16px) !important;
	background: url(../images/search-white.png) no-repeat 10px 6px #FFFFFF;
	margin-bottom: 10px;
}

#divlistdata {
	overflow: auto;
	max-height: 300px;
	background-color: whitesmoke;
}

#divlistdata ul {
	margin-top: 0px;
}

#divlistdata li {
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 4px;
	min-height: 16px;
	border-bottom: solid 1px whitesmoke;
	cursor: pointer;
}

.divlistload {
	overflow: auto;
	max-height: 300px;
	background-color: #F9F9F9;
	/*padding-right: 20px;*/
	border-top: 1px solid whitesmoke;
	border-bottom: 1px solid whitesmoke;
}

.divlistload ul {
	margin-top: 0px;
}

.divlistload li {
	list-style: none;
	margin: 0px 0px 0px -10px;
	/*padding: 4px;*/
	min-height: 16px;
	border-bottom: solid 1px whitesmoke;
	cursor: pointer;
	background-color: white;
}
.container{
  width:100% !important;
}
/*===================
====top header=======
===================*/
.topBar {
  background-color: transparent !important;
  position: fixed;
  z-index: 1001;
  right: 10%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px; }
  .topBar ul {
    margin: 0; }
    .topBar ul li {
      line-height: 42px; }
      .topBar ul li a {
        display: block; }
    .topBar ul.topBarNav {
      margin: 0;
      padding: 0;
      list-style-type: none; }
      .topBar ul.topBarNav li {
        position: relative;
        display: inline-block;
        margin-right: -4px;
        border-right: 1px solid rgba(0, 0, 0, 0.08); }
        .topBar ul.topBarNav li:last-child {
          border-right: none; }
        .topBar ul.topBarNav li a {
          display: block;
          padding-left: 12px;
          padding-right: 12px; }
        .topBar ul.topBarNav li ul {
          background-color: #ffffff;
          position: absolute;
          top: 28px;
          left: auto;
          right: 4px;
          margin: 0;
          margin-top: 10px;
          margin-right: -4px;
          padding: 0;
          list-style-type: none;
          z-index: 10001;
          visibility: hidden;
          opacity: 0;
          -webkit-transition: all 0.1s ease-in-out;
          -moz-transition: all 0.1s ease-in-out;
          -ms-transition: all 0.1s ease-in-out;
          -o-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
          -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
          -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
          -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08); }
          .topBar ul.topBarNav li ul li {
            display: block;
            line-height: 30px;
            width: 100%;
            border: none; }
            .topBar ul.topBarNav li ul li a {
              background-color: inherit; }
              .topBar ul.topBarNav li ul li a:hover, .topBar ul.topBarNav li ul li a:active, .topBar ul.topBarNav li ul li a:focus {
                background-color: rgba(0, 0, 0, 0.02); }
            .topBar ul.topBarNav li ul li.active a {
              background-color: rgba(0, 0, 0, 0.02);
              color: #35404f; }
            .topBar ul.topBarNav li ul li.divider {
              height: 1px;
              background-color: rgba(0, 0, 0, 0.05); }
          .topBar ul.topBarNav li ul.w-100 {
            width: 100px; }
          .topBar ul.topBarNav li ul.w-150 {
            width: 150px; }
          .topBar ul.topBarNav li ul.w-200 {
            width: 200px; }
          .topBar ul.topBarNav li ul.w-250 {
            width: 250px; }
          .topBar ul.topBarNav li ul.w-300 {
            width: 300px; }
          .topBar ul.topBarNav li ul.cart {
            background-color: #ffffff;
            padding: 0; }
            .topBar ul.topBarNav li ul.cart p {
              margin: 0; }
            .topBar ul.topBarNav li ul.cart .cart-items {
              padding: 10px;
              height: 200px;
              overflow: auto; }
              .topBar ul.topBarNav li ul.cart .cart-items .items {
                margin: 0;
                padding: 0;
                list-style-type: none; }
                .topBar ul.topBarNav li ul.cart .cart-items .items li {
                  overflow: hidden;
                  clear: left;
                  padding-bottom: 10px;
                  margin-bottom: 10px;
                  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
                  .topBar ul.topBarNav li ul.cart .cart-items .items li .product-image {
                    width: 60px;
                    float: left; }
                    .topBar ul.topBarNav li ul.cart .cart-items .items li .product-image img {
                      width: 100%; }
                  .topBar ul.topBarNav li ul.cart .cart-items .items li a {
                    margin: 0;
                    padding: 0;
                    line-height: normal;
                    background-color: transparent;

                    display: inline; }
                  .topBar ul.topBarNav li ul.cart .cart-items .items li .product-details {
                    position: relative;
                    margin-left: 60px;
                    padding: 0 15px 0 10px; }
                    .topBar ul.topBarNav li ul.cart .cart-items .items li .product-details .close-icon {
                      position: absolute;
                      top: 0;
                      right: 0;
                      font-size: 10px;
                      line-height: normal; }
                    .topBar ul.topBarNav li ul.cart .cart-items .items li .product-details .product-name {
                      font-size: 14px;
                      line-height: 20px;
                      margin-bottom: 0px; }
                  .topBar ul.topBarNav li ul.cart .cart-items .items li:last-child {
                    padding-bottom: 0;
                    margin-bottom: 0;
                    border-bottom: none; }
            .topBar ul.topBarNav li ul.cart .cart-footer {
              overflow: hidden;
              background-color: rgba(0, 0, 0, 0.02); }
              .topBar ul.topBarNav li ul.cart .cart-footer a {
                text-align: center;
                padding: 10px 20px;
                margin: 0;
                background-color: transparent; }
        .topBar ul.topBarNav li.linkdown:hover ul {
          visibility: visible;
          opacity: 1;
          margin-top: 0; }
      @media (max-width: 767px) {
        .topBar ul.topBarNav > li > a .mr-5 {
          margin-right: 0; } }
  .topBar a {
    color: #fffff; }
    .topBar a:hover, .topBar a:active, .topBar a:focus {
      color: #35404f; }
  .topBar.inverse {
    background-color: #35404f; }
    .topBar.inverse a {
      color: #878c94; }
      .topBar.inverse a:hover, .topBar.inverse a:active, .topBar.inverse a:focus {
        color: #0cd4d2; }
    .topBar.inverse ul.topBarNav li {
      border-color: rgba(255, 255, 255, 0.08); }
      .topBar.inverse ul.topBarNav li a:hover, .topBar.inverse ul.topBarNav li a:active, .topBar.inverse ul.topBarNav li a:focus {
        color: #f7f7f7; }
      .topBar.inverse ul.topBarNav li ul li a:hover, .topBar.inverse ul.topBarNav li ul li a:active, .topBar.inverse ul.topBarNav li ul li a:focus {
        color: #35404f; }
.breadcrumbs {
  margin: 0;
  background-color: #f7f7f7;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  .breadcrumbs ul {
    margin: 0;
    padding: 0;
    list-style-type: none; }
    .breadcrumbs ul li {
      display: inline-block;
      font-size: 14px; }
      .breadcrumbs ul li:after {
        font-family: "FontAwesome";
        content: '\f105';
        margin: 0 4px 0 8px; }
      .breadcrumbs ul li:last-child:after {
        display: none; }