@font-face {
    font-family: "ArialRoundedMT";
    src: url("../../Assets/Fonts/arial_rounded_mt_regular-webfont.eot");
    src: url("../../Assets/Fonts/arial_rounded_mt_regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("../../Assets/Fonts/arial_rounded_mt_regular-webfont.woff2") format("woff2"),
    url("../../Assets/Fonts/arial_rounded_mt_regular-webfont.woff") format("woff"),
    url("../../Assets/Fonts/arial_rounded_mt_regular-webfont.ttf") format("truetype"),
    url("../../Assets/Fonts/arial_rounded_mt_regular-webfont.svg#Arial Rounded MT") format("svg");
}

@font-face {
    font-family: "ArialRoundedMT_Bold";
    src: url("../../Assets/Fonts/arial_rounded_mt_std_bold-webfont.eot");
    src: url("../../Assets/Fonts/arial_rounded_mt_std_bold-webfont.eot?#iefix") format("embedded-opentype"),
    url("../../Assets/Fonts/arial_rounded_mt_std_bold-webfont.woff2") format("woff2"),
    url("../../Assets/Fonts/arial_rounded_mt_std_bold-webfont.woff") format("woff"),
    url("../../Assets/Fonts/arial_rounded_mt_std_bold-webfont.ttf") format("truetype"),
    url("../../Assets/Fonts/arial_rounded_mt_regular-webfont.svg#Arial Rounded MT") format("svg");
}
/*-------------- Radio Button ---------------*/
.each-field ul.radio-button {padding: 0; list-style-type: none;}
.each-field ul.radio-button li{float: left;width: 16%;position: relative;}
.each-field ul.radio-button li input[type=radio]{position: absolute;visibility: hidden;}
.each-field ul.radio-button li label { display: block;position: relative;font-weight: 300; padding: 0px 0px;font-size:15px; margin: 0;  z-index: 9;cursor: pointer; -webkit-transition: all 0.25s linear;}
.each-field ul.radio-button li:hover label{color: #555;}
.each-field ul.radio-button li .check{display: block; position: absolute; border:    2px solid #ccc; border-radius: 100%; height: 22px; width: 22px; top: 0; left: 0; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear;}
.each-field ul.radio-button li:hover .check {border: 2px solid #b3b1b1;}
.each-field ul.radio-button li .check::before {display: block;position: absolute;  content: '';border-radius: 100%;height:10px;width: 10px;top: 5px;  left: 5px;margin: auto; transition: background 0.25s linear;  -webkit-transition: background 0.25s linear;}
.each-field ul.radio-button input[type=radio]:checked ~ .check { border: 2px solid #ccc;}
.each-field ul.radio-button input[type=radio]:checked ~ .check::before{ background: #555;}
.each-field ul.radio-button input[type=radio]:checked ~ label{color: #000;}
/*-------------- End of Radio Button ---------------*/


body {overflow-x:hidden; font-family: "ArialRoundedMT";}
h5, h3 {font-family: "ArialRoundedMT_Bold";}
.idm-Clrred {color:#CC3333}
.idm-Clrblue {color:#0079C2}
.idm-Clryellow {color:#FFCC33}
.idm-Clrwhite {color:#ffffff}
.idm-Clrgrey {color:#cccccc !important;}
.idm-Bgred {background:#CC3333}
.idm-Bgblue {background:#162944}
.idm-Bgyellow {background:#FFCC33}
.idm-BgGrey {background:#cccccc}
.idm-BgGrey1{background:#ebebeb}
.idm-borderRed {border-color:#CC3333}
.idm-borderBlue {border-color:#0079C2}
.idm-borderYellow {border-color:#FFCC33}
.idm-fontArialRoundedMTBold {font-family: "ArialRoundedMT_Bold"}
.floatL {float:left}
.floatR {float:right} 
.noPaddingL,.nopaddingL {padding-left:0;}
.text-left { text-align: left !important; }
a:hover {text-decoration:none;color:#0470b1;}
.beforeLog {visibility:hidden}
label {margin:0}
.form-control {border-radius:0;}
.callcenter {font-size: 18px; color: #0079C2; font-family: "ArialRoundedMT_Bold";}
.mL10 {margin-left:10px !important;}
.mT50 {margin-top: 50px !important;}
.mL100 {margin-left:100px !important}
.noMargin {margin:0 !important;}
.edit-item {cursor:pointer;}
.w130 {width:130px;}
.w200 {width:200px;}
.w300 {width:300px;}
.lh18 {line-height:18px;}
.pointer{cursor:pointer}
.pl0{padding-left: 0;}
.pr0{padding-right: 0;}

.mobile-xs{display: block !important;}
.desktop-xs{display: none !important;}
/* Form */
.each-field {
    position:relative;
    margin-bottom:20px;
}
#added-tarif .each-field {
    margin-bottom:4px;
}
.each-field .err-msg{
    /*position:absolute;
    top:0;
    right:0;*/
    font-size:12px;
}
.each-field .err-msg.idm-Clrblue{
    /*background: url(../image/icon_err_success.png) left center no-repeat;
    padding-left: 20px;*/
}
.each-field .err-msg.idm-Clrred,.err-msg.idm-Clrred.active {
    background: url(../image/icon_err_failed.png) left center no-repeat;    
    padding-left: 20px;
}
.each-field  select {
    border-radius: 0;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(../image/icon/bg_select.jpg) right center no-repeat;
    padding: 3px 34px 3px 5px;
    background-size:32px
}
.radio-button {
    height :5%;
    margin-top : 5px;
}
.radio-button li {
    display: inline-block;
    position: relative;
    padding: 0px 25px;
}
/* Radio Button */
.each-field .radio{
    color:#aaaaaa;
    display: block;
    position: relative;
}
.each-field.horizontal .radio {
    float:left;
    margin:0;
    width:33.33%;
}
.each-field .radio input[type=radio]{
    position: absolute;
    visibility: hidden;
}
.each-field .radio label{
    display: block;
    position: relative;    
    z-index: 0;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 30px;
    color: #333;
}
.each-field .radio .check{
    display: block;
    position: absolute;
    border: 2px solid #AAAAAA;
    border-radius: 100%;
    height: 18px;
    width: 18px;
    top: 3px;
    left: 0;
    z-index:-1;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}
.each-field .radio .check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 10px;
    width: 10px;
    top: 2px;
    left: 2px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}
.each-field .radio input[type=radio]:checked ~ .check {
    border: 2px solid #0079c2;
}
.each-field .radio input[type=radio]:checked ~ .check::before{
    background: #0079c2;
}


/* CheckBox */

/* Base for label styling */
.wrp-checkbox [type="checkbox"]:not(:checked),
.wrp-checkbox [type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
.wrp-checkbox [type="checkbox"]:not(:checked) + label,
.wrp-checkbox [type="checkbox"]:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

/* checkbox aspect */
.wrp-checkbox [type="checkbox"]:not(:checked) + label:before,
.wrp-checkbox [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 2px;
    top: -12px;
    width: 17px; height: 17px;
    border: 1px solid #0079c2;
    background: #f8f8f8;
    border-radius: 0 ;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
.wrp-checkbox [type="checkbox"]:not(:checked) + label:after,
.wrp-checkbox [type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    top: -10px;
    left: 4px;
    font-size: 18px;
    line-height: 0.8;
    color: #0079c2;
    transition: all .2s;
    background: #0079c2;
    width: 13px;
    height: 13px;
}
/* checked mark aspect changes */
.wrp-checkbox [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
.wrp-checkbox [type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
.wrp-checkbox [type="checkbox"]:disabled:not(:checked) + label:before,
.wrp-checkbox [type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
.wrp-checkbox [type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
.wrp-checkbox [type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
.wrp-checkbox [type="checkbox"]:checked:focus + label:before,
.wrp-checkbox [type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}

/* hover style just for information */
.wrp-checkbox label:hover:before {
  border: 1px solid #4778d9!important;
}

.wrp-disabled-click.active {
    cursor:not-allowed;
    pointer-events:none;
    opacity:0.2;
}

/* Button */
.def-btn {
    margin:14px 0;

}
.def-btn button {
    min-width: 95px;
    height: 30px;
    padding-left: 14px;
    padding-right: 14px;
    text-transform: uppercase;
    border: 0;
    vertical-align: middle; 
    line-height: 26px;
    font-family: "ArialRoundedMT_Bold";
    margin-right:14px;
    margin-bottom: 6px;
}
.def-btn button.noBg {
    background: white;
    color: #555;
    border: 1px solid #ccc;
}

/* Modal Center */
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.modal-content {
    border-radius:0 !important;
}

/* Cs Section */ 
.cs-section  {padding-right: 85px; padding-top: 20px; padding-bottom: 8px;} 
.cs-section div{font-size:13px; line-height: 17px;}
#forgetPassword  .cs-section .mailFranchise{font-size: 22px;}
.cs-section .mailFranchise{font-size: 18px; color: #0079c2; font-family: "ArialRoundedMT_Bold";margin-top: 4px; }
.cs-section {
    text-align: right;
    line-height: 15px;
    font-size: 12px;
    margin-top: 20px;
    padding-top: 20px;
    margin-right: 0;
    background: url(../image/icon_cs.jpg) right 3px no-repeat;
    background-size: 74px;
}
.cs-section span {
    font-size: 24px;
    line-height: 30px;
    color: #0079C2;
    font-family:"ArialRoundedMT_Bold";
}

/* Pagination */
.pagination {
    text-align:right;
    width:100%;
    margin-top:28px;
}
.wrp-produk .pagination,
.wrp-outlet .pagination {
    margin-top: 20px;
} 
.wrp-produk .pagination #total-row,
.wrp-outlet .pagination #total-row {
    color: #337ab7;
}    
.wrp-produk .pagination ul,
.wrp-outlet .pagination ul {
    margin-top:6px;
}
.pagination ul {
    padding:0;
    list-style-type:none;
    margin-top: 6px;
}
.pagination ul li {
    display:inline-block;
    margin:0 4px;
    color:#0079c2;
}
.pagination ul li input {
    width:30px;
    text-align:center;
}

/* Header */
.list-border-idm span {
    border-width:4px;
    border-style:solid;
}
.wrp-header {
    height:140px;
}
.wrp-header .helped-top {
    padding: 0;
    width: 210px;
    margin-left: auto;
    margin-bottom: 0;
    margin-top: 2px;
}
.wrp-header .helped-top li{
    float: left;
    list-style: none;
    margin: 0 10px;
    position:relative;
    font-size: 12px;
}
.wrp-header .helped-top li:after{
    content:'';
    position:absolute;
    width:1px;
    background: #000;
    top: 2px;
    right: -10px;
    height: 14px;
}
.wrp-header .helped-top li:last-child:after {
    background:transparent;
}
.wrp-header .navigation ul {
    width: 100%;
    display: block;
    height: 90px;
    line-height: 90px;
    padding:0;
    margin:0;
}
.wrp-header .navigation ul li{
    position:relative;
    list-style: none;
    width: 25%;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    line-height: 34px;
    margin: 0 -2px;
    font-family: "ArialRoundedMT_Bold";
}
.wrp-header .navigation ul li a,ul.helped-top  li a{
    position:relative;   
}
.wrp-header .navigation ul li a:hover:before,
.wrp-header .navigation ul li a.Active:before,
ul.helped-top  li a:hover:before,
ul.helped-top  li a.Active:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #0079c2;
    bottom: -7px;
    left: 0;
}
.wrp-header .navigation ul li  .result-welcomingName a:hover:before {
    background:transparent !important;
}
.wrp-header .navigation ul li  .result-welcomingName a > div:hover {
    background:#0079c2;
    color:#fff;
    cursor:pointer;
} 
ul.helped-top li a:hover:before,
ul.helped-top li a.Active:before {
    height:2px;    
}
ul.helped-top li a:focus,.wrp-header .navigation ul li a:focus {
    text-decoration:none;
}
.terwaralaba-title h1{
    width: 200px;
    margin: 0;
    padding-left: 10px;
    height: 90px;
    line-height: 68px;
    position:absolute;
}
.terwaralaba-title h1 span {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
    font-family: "ArialRoundedMT_Bold";
}

/* Form input Header */
.wrp-header.form-input-header {
    height:auto;
    border-top:8px solid #0079C2;
    padding:6px 10px;
}

/* Popup Forget Password */
#forgetPassword .boxitem{
    padding:20px 30px ; 
}
#forgetPassword .boxitem h2{ 
    font-family:"ArialRoundedMT_Bold";
    margin-top: 0;
    font-size:20px !important;
}
#forgetPassword .boxitem .wrp-form {
    position:relative;
}
#forgetPassword .boxitem .wrp-form input {
    padding-right:95px;
}
#forgetPassword .boxitem .wrp-form button{
    position: absolute;
    top: 30px;
    right: 0;
    background: #0079c2;
    color: #fff;
    border: 0;
    padding: 6px 24px;
    border-radius: 4px;
    font-size: 16px;
}
/* Popup Forget Password */
#forgetUsername .boxitem{
    padding:20px 30px ; 
}
#forgetUsername .boxitem h2{ 
    font-family:"ArialRoundedMT_Bold";
    margin-top: 0;
    font-size:20px !important;
}
#forgetUsername .boxitem .wrp-form {
    position:relative;
}
#forgetUsername .boxitem .wrp-form input {
    padding-right:95px;
}
#forgetUsername .boxitem .wrp-form button{
    position: absolute;
    top: 30px;
    right: 0;
    background: #0079c2;
    color: #fff;
    border: 0;
    padding: 6px 24px;
    border-radius: 4px;
    font-size: 16px;
}
    

/* Content */
#site-content {
    min-height:500px;
    padding-bottom: 50px;
    margin-top: 20px;
}

#site-header {

}
.wrp-login .wrp-leftside, .wrp-login .wrp-rightside {
    border:1px solid #ccc;
    padding:20px;
    padding-bottom:0;
}
.wrp-login .wrp-leftside {
    border-top: 3px solid #0079C2;
}
.wrp-login .wrp-rightside h3 {
    margin-top:0;
    font-family:"ArialRoundedMT_Bold";
    margin-bottom:30px;
}
.wrp-login .wrp-rightside label {
    font-family:"ArialRoundedMT_Bold";
}
.wrp-login .wrp-rightside .def-btn button {
    min-width:120px;
    height:36px;
    text-transform:inherit;
    width: 100%;
}



/* Step Registration */

.wrp-step-registration{
    width:800px;
    margin:auto;
    border:1px solid #ccc;
    border-top: 3px solid #0079C2;
    padding:20px;
    min-height: 450px;
}
.wrp-step-company-form {
    padding-top:20px;
}
.wrp-company-form .wrp-btn {
    text-align:right;
    margin-top:50px;
}
.wrp-company-form .each-field .err-msg {
    position: absolute;
    top: 50%;
    right:inherit;
    width: 100%;
    padding-left: 30px;
    font-size: 14px;
    transform: translate(100%,-50%);
}
.wrp-company-form .field-desc {
    font-size: 12px;
    line-height: 14px !important;
    margin-top: 4px;
    color: #bfbebe;
}
.wrp-company-form h4 {
     font-family:"ArialRoundedMT_Bold";
     margin:20px 0 ;  
    font-size: 16px; 
}
.label-lupausername, .label-lupapassword{width: 50%; display: inline-block; margin-right: -2px; text-align: right;}
.label-lupapassword {
    font-size: 14px;
    outline:none;
    text-align: left;
}
.label-lupapassword a,.label-lupapassword a:focus{ 
    outline:none !important;
}




.wrp-step-company-form .step-journey {
    margin-bottom:0 !important;
}
.wrp-header.form-input-header .logo img {
    width:175px;
}
.wrp-step-registration .step-journey,
.wrp-step-company-form .step-journey{
    margin-bottom:40px;
}
.wrp-step-registration .step-journey ul,
.wrp-step-company-form .step-journey ul{
    padding:0;
    list-style-type:none;
    width:100%;
    padding-top: 14px;
    position:relative;
}
.wrp-step-registration .step-journey ul:before,
.wrp-step-company-form  .step-journey ul:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 75%;
    height: 4px;
    background: #cccccc;
    transform: translate(-50%);
}
.wrp-step-registration .step-journey ul li,
.wrp-step-company-form .step-journey ul li {
    float:left;
    width:25%;
    text-align:center;
    position:relative;
    font-family:"ArialRoundedMT_Bold";
    color:#ccc;
}
.wrp-step-registration .step-journey ul li.start,.wrp-step-registration .step-journey ul li.active,
.wrp-step-company-form .step-journey ul li.start,.wrp-step-company-form .step-journey ul li.active {
    color:#0079c2;
}
.wrp-step-registration .step-journey ul li:after,
.wrp-step-company-form .step-journey ul li:after {
    content: '';
    position: absolute;
    top: -18px;
    left: 47%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cccccc;
}
.wrp-step-registration .step-journey ul li.start:after,.wrp-step-registration .step-journey ul li.active:after,
.wrp-step-company-form .step-journey ul li.start:after,.wrp-step-company-form .step-journey ul li.active:after  {
    background: #0079c2;
}
.wrp-step-registration .step-journey ul li.active:before,
.wrp-step-company-form .step-journey ul li.active:before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    width: 100%;
    height: 4px;
    background: #0079c2;
}
.wrp-step-registration .step .headline-text {
    margin:0 15%;
}
.wrp-step-registration .step .wrp-boxform {
    margin:10px 25%;
}
.wrp-step-registration .step .wrp-boxform input{
    padding-right:115px;
}
.wrp-step-registration .wrp-verificationOTP .wrp-boxform button {
    border: 0;
    padding: 6px 0;
    width: 105px;
    position: absolute;
    border-radius: 2px;
    bottom: -1px;
    right: 0;    
    font-family:"ArialRoundedMT_Bold";
}
.wrp-step-registration .wrp-verificationOTP .wrp-boxform button.send-otp {
    color: #fff;
    background: #0079c2;
    border-left: 3px solid #045586;
    border-bottom: 3px solid #045586;
}
button.gold-btn {
    color: #000;
    background: #ffcc33;
    border-left: 3px solid #b7942c !important;
    border-bottom: 3px solid #b7942c !important;
    padding: 6px 24px !important;
    font-family: "ArialRoundedMT_Bold" !important;
    border:0;
    outline:none;
}
.wrp-step-registration .wrp-btn {
    text-align: right;
    margin-right: 50px;
}    
.wrp-company-data .wrp-boxform ul{
    padding:0;
    padding-left:30px;
}
.wrp-company-data .wrp-boxform ul li {
    position:relative;
    list-style-type:none;
}
.wrp-company-data .wrp-boxform ul li:before {
    content:"-";
    position:absolute;
    left:-12px;
}
.wrp-step-registration .wrp-waiting-approval {
    padding:0 30px;
}
.wrp-step-registration .wrp-waiting-approval .wrp-btn {
    text-align:center;
    margin-top:50px;
    margin-right:0
}   

/* End of Step Registration */


.wrp-produk .wrp-tabs .kategori-boxitem .each-boxitem .back-level {
    display:none;
}
.txt-info-merk {
    position: absolute;
    top: 18px;
    left: 210px;
}

table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty {
    border-bottom: 1px solid #ccc;
}
.productImgGallery .modal-content {
    padding: 20px;
    width: 600px;
}
.productImgGallery .boxitem img {
    width:100%;
}
.popup-image {
    cursor:pointer;
}


/* Footer */
#site-footer .copyright {
    font-size: 12px;
    color: #ccc;
    text-align: center;
    padding: 15px 30px;
}

@media (min-width:1200px) {
    /*.container {
        width: 100%;
        max-width: 1366px;
    }*/
}

@media (max-width:1200px) { 
}


@media (max-width:991px) {
    .logo,.merchant-title {
        width:inherit;
    }
    .wrp-header .navigation ul {
        display:none;
    }
    .mobile-xs{display: none !important;}
    .desktop-xs{display: block !important;}
}

@media (min-width: 768px){
    #forgetPassword .modal-dialog {
        width: 520px !important;
        margin: 30px auto;
    }
     
    .modal-dialog.w400{
        width: 400px; 
        padding:20px;
    }
    .modal-dialog.w400 .modal-content {
        padding:30px;
    }
}



/* Input File Type */
.each-upload-file {
    position:relative;
    margin-bottom:20px;
}
.fileUpload {
    overflow: hidden;
    background: #0079C2;
    color: #fff;
    border-bottom: 3px solid #1f648e;
    border-right: 3px solid #1f648e;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0;
    padding-left: 25px;
    padding-bottom: 4px;
    padding-right: 25px;
}
.fileUpload:hover {
    color:#fff;    
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

/* Outlet*/
.wrp-tabs .nav-tabs {
    margin-bottom:20px;
}
.wrp-tabs .nav-tabs>li.active>a:hover { 
    border: 1px solid transparent;
}
.wrp-tabs .nav-tabs > li.active > a, .wrp-tabs .nav-tabs > li.active > a:focus {
    border-bottom:1px solid #ccc !important;
    border:1px solid transparent;
    background: transparent;
}
.wrp-tabs .nav-tabs > li {
    position:relative;
}
.wrp-tabs .nav-tabs > li.active:before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    background: #0079c2;
    width: 65%;
    height: 2px;
    transform: translate(-50%);
}
.wrp-tabs .nav-tabs > li a,.wrp-tabs .nav-tabs > li.active a {
    color:#0079c2;
    font-family: "ArialRoundedMT_Bold" ;
}
.wrp-outlet.add .wrp-tabs .nav-tabs > li a {
    pointer-events: none;
    opacity: .4;
}
.wrp-outlet.add .wrp-tabs .nav-tabs > li.active a {
    opacity: 1;
} 
.wrp-tabs .nav-tabs > li > a:hover,
.wrp-tabs .nav>li>a:focus, .wrp-tabs .nav>li>a:hover {
    border-color:transparent;
    background:transparent;
}
.wrp-outlet.edit .each-field .err-msg,.wrp-outlet.addproduk .each-field .err-msg ,
.wrp-produk.add .each-field .err-msg,.wrp-produk.edit .each-field .err-msg  {
    position: absolute;
    top: 50%;
    right:inherit;
    width: 100%;
    padding-left: 30px;
    font-size: 14px;
    margin-top: 8px;
    transform: translate(100%,-50%);
    background: url(../image/icon/icon_err_failed.png ) 6px center no-repeat;
}
.wrp-outlet.edit .def-btn {
    text-align:right;
}
.wrp-outlet.edit #outlet .floatL {
    float:left;
    width:50%;
}
.wrp-outlet.edit #outlet .floatL label {
    margin-top:6px;
}
.wrp-outlet.edit #outlet .leftside {
    padding-right:8px;
}
.wrp-outlet.edit #outlet .rightside {
    padding-left:8px;
}
.wrp-outlet.edit .def-btn button {
    margin:0;
}
.wrp-outlet.edit .metode-pengiriman .wrp-block-tarif {
    list-style-type:none;
    padding-left:0;
    text-align: right;
    position:relative;
    min-height:34px;
}
.wrp-outlet.edit .metode-pengiriman .wrp-block-tarif li {
    display:inline-block;
    cursor:pointer;
}
.wrp-outlet.edit .metode-pengiriman .wrp-block-tarif li:first-child {
    width:25%;    
    position:absolute;
    left:0;
    top:0
}
.wrp-outlet.add .metode-pengiriman .wrp-block-tarif li:first-child {
    width:20%;    
}
.wrp-outlet.add .metode-pengiriman .wrp-block-tarif li:last-child {
    width: 79%;
    margin: 0;
    text-align: right;  
    margin-top:10px;
}
.wrp-outlet.edit .metode-pengiriman .wrp-block-tarif li select {
    width:130px;    
}
.wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .download,
.wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .upload,
.wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .added {
    margin:8px 2px 0;
    padding: 0 5px;
    color:#0079C2;
}
.wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .download span,
.bg-arrow-down{
    background: url(../image/icon/icon_arrow_bottom.png ) left center no-repeat;
    padding-left:10px;
}
.wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .upload span,
.bg-arrow-up{
    background: url(../image/icon/icon_arrow_top.png ) left center no-repeat;
    padding-left:10px;
}
.wrp-manage .isEdit table td.nominal-edit label {
    font-weight:normal;
    margin-right:5px;
    float: left;
    width: 20px;
    margin-top:6px;
} 
.wrp-manage .isEdit table td div.option-date {
    float:left;
    width:48%;     
    margin-right:12px;
} 

.editPrice { 
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.inputEditPrice,.txtStock{ 
    width: 100%;
    text-align:center;
}
.wStok, .wCheck, .wPublished {
    width:5% !important;
}

.wTampilan, .wStatus, .wHarga  {
    width:10% !important;
}
.wHPromosi {
    width:12% !important;
}
.wPengaturan {
    width:15% !important;
}
.wNProduk {
    width:18% !important;
}

.option-date .inputEditPrice { 
    text-align:left;
} 
.wrp-outlet.edit .isEdit table td div.option-date {
    background:transparent;
}
.wrp-outlet.edit .isEdit table td div.option-date {
    width:100%;
}
.wrp-manage .isEdit table td div.option-date:last-child {
    margin-right:0;    
}
.wrp-manage .isEdit table td div.option-date input {
    width:100% !important;
} 
.wrp-manage .isEdit table td.date-edit {
    position:relative;
}
.wrp-manage .isEdit table td .separate-date {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translate(-50%,-50%);
} 
.wrp-manage .isEdit table td span.edit-stok {
    float:none;
}
.wrp-manage .isEdit table td input.edit-stok  {
    width:100% !important;
    text-align:center;
}
.wrp-manage .isEdit table td .separate-date span{
    float:none;

}
.wrp-manage .isEdit table td .wrp-saveCancel {
    width:145px;
    margin:auto;
}
.wrp-manage .isEdit table td .separate-saveCancel,.wrp-manage .isEdit table td .action-save,.wrp-manage .isEdit table td .action-cancel  {
    float:left;
    padding: 6px;
    margin: 0 !important
}
.wrp-manage .isEdit table td input.row-edit {
    text-align:center;
    width: 100%;
}
.wrp-manage .isEdit table td .option-date input.row-edit {
    text-align:left; 
}
.wrp-manage table thead{
    background:#0079C2;
    color:#fff;
    font-family: "ArialRoundedMT_Bold";
}
.wrp-manage table thead tr td {
    text-align:center !important;
    padding: 10px 0px;
}
.wrp-manage table tbody tr td {
    text-align:center;
    padding:4px   5px;
    position:relative;
}
.wrp-manage.wrp-pesanan table tbody tr td {
    text-align:center;
    padding:6px   5px;
    position:relative;
}
.wrp-manage table tbody tr td.publish-unpublish {
    line-height:12px;
}
.wrp-manage table tbody tr td.publish-unpublish .date{
    font-size:11px;
    color:#c1c1c1;
}
.wrp-manage table tbody tr td.product-name {
    text-align:left;
}
.wrp-manage table tbody tr.odd {
    background:#fff;
}
.wrp-manage table tbody tr.even {
    background:#e5f5ff;
} 

#added-tarif .each-field label {
    margin-top:8px;
}


.wrp-manage .grid1 {
    padding-bottom: 4px;
    border-bottom: 1px solid #ccc;
}
.wrp-manage .grid1.filter-section ul {
    padding:0;
    list-style-type:none;
    margin:0;
}
.wrp-manage .grid1.filter-section .each-field {
    margin:0;
}
.wrp-manage .grid1.filter-section li{
    float:left;
}
.wrp-manage .grid1.filter-section .leftside > li:first-child {
    width:10%
}
.wrp-manage .grid1.filter-section .leftside > li:first-child .wrp-checkbox {
    margin-top:4px;
    text-align: center;
}
.wrp-manage .grid1.filter-section li.filter-option-status {
    width:20%;
}
.wrp-manage .grid1.filter-section li.filter-page {
    width:65%;
}
.wrp-manage .grid1.filter-section li.filter-page label,
.wrp-manage .grid1.filter-section li.filter-page select{
    float:left;
}
.wrp-manage .grid1.filter-section li.filter-page label{
    width: 25%;
    text-align: right;
    margin-right: 10px;
    margin-top: 6px;
}
.wrp-manage .grid1.filter-section li.filter-page label:last-child{
    text-align: left;
    margin-left: 10px; 
}
.wrp-manage .grid1.filter-section li.filter-page select{
    width:15%;
}
.wrp-manage .grid1.filter-section .rightside {
    text-align:right;
    padding-top: 10px;
}
.wrp-manage .grid1.filter-section .rightside .filter-slideclick {
    padding: 10px 30px;
    background: #0079c2;
    color: #fff;
    margin-left: 10px;  
    position:relative;
}
.wrp-manage .grid1.filter-section .rightside .filter-slideclick .caret{
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top:6px dashed;
}
.wrp-manage .grid1.filter-section .rightside .filter-slideclick .caret.active {
    border-bottom:6px dashed;
    border-top:0 dashed;
} 
.wrp-manage .grid1.filter-section .rightside span {
    cursor:pointer;
    margin-left: 10px;
}

.wrp-manage .grid1.filter-section .rightside span span{
    margin-left: 0;
}
.wrp-manage .grid2 {
    border-bottom: 1px solid #ccc;
    padding:20px 10px 0;
    display:none;
    position:relative;
}
.wrp-manage .grid2 label {
    font-weight:bold;
}
.wrp-manage .grid2 .each-field.sales label,
.wrp-manage .grid2 .each-field.price label,
.wrp-manage .grid2 .each-field.option-date label{
    width:100%;
}
.wrp-manage .grid2 .each-field.sales input,
.wrp-manage .grid2 .each-field.price input,
.wrp-manage .grid2 .each-field.price select,
.wrp-manage .grid2 .each-field.option-date input,
.wrp-produk.wrp-manage .grid3.isEdit .each-field.option-date input {
    float:left;
    width:48%;
}
.wrp-manage .each-field.option-date input {
    background:#fff url(../image/icon/icon_calender.jpg) right center no-repeat;
    background-size:32px;
    padding-right: 33px;
}
.wrp-manage .each-field.option-date input[disabled] {
    padding-right:14px; 
} 
.wrp-manage .grid2 .each-field.stock select {
    width:75%;    
}
.wrp-manage .grid2 .each-field.published select {
    width:48%;    
}
.wrp-manage .grid2 .each-field.sales span,
.wrp-manage .grid2 .each-field.price span,
.wrp-manage .grid2 .each-field.option-date span ,
.wrp-produk.wrp-manage .grid3.isEdit .each-field.option-date span{
    float:left;
    width:4%;
    margin-top:6px;
    text-align:center;
}
.wrp-manage .grid2 .def-btn {
    text-align:center;
    margin-top: 22px;
}
.wrp-manage .grid2 .def-btn button {
    margin:0;
    margin-right:-4px;
    margin-bottom: 20px;
}
.ui-widget-header .ui-icon {
    background: #ccc;
    position: relative !important;
    text-indent: inherit !important;
    color: transparent;
}
.ui-widget-header .ui-datepicker-prev .ui-icon:before {
    content: '<';
    position: absolute;
    top: -2px;
    left: 3px;
    width: 10px;
    height: 10px;
    color: #555;
}

.ui-widget-header .ui-datepicker-next .ui-icon:before {
    content: '>';
    position: absolute;
    top: -2px;
    left: 3px;
    width: 10px;
    height: 10px;
    color: #555;
}
.wrp-manage .grid3 .imgbox {
    width: 120px;
    margin: auto;
    padding: 10px;
    height: 74px;
}
.wrp-manage .grid3 .imgbox img{
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    border: 1px solid #ccc;
}
.produk-outlet .wrp-manage .grid2 .def-btn {
    margin-top:22px;
}

.wrp-media-table .boxitem {
    width:90px;
    height:90px; 
    margin:auto;
}
.wrp-media-table .boxitem .item{
    float:left;
    width:28px;
    height:45px;
    border: 1px solid #0079c2;
    margin: 1px; 
    position:relative;
}

.wrp-media-table .boxitem .item img{
    width:100%;
    max-height:100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.var-size span{
    margin:0 3px;
    color:#0079c2;
}
.gallery {
    float:left;
}
.gallery img {
    width:100px;
    height:100px;
}
.gallery .media-boxitem {
    float:left;
    margin:10px;
    text-align:center;
    position:relative;
}
.gallery .media-boxitem .image {
    width:170px;
    height:240px;   
    padding:5px;
    cursor:pointer;
}
.gallery .media-boxitem label {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ccc;
    color: #fff;
    padding: 2px 10px;
}
.gallery .media-boxitem .image img{
    max-width:100%;
    max-height:100%;
    min-height:100%;
    min-width:100%;
    object-fit:cover;  
}
.gallery .media-boxitem.active label {
    color:#fff;    
    background: #0079c2;
}
.gallery .media-boxitem .remove-field-img {
    position: absolute;
    top: 0;
    right: -4px; 
    color:red;
    cursor:pointer;
    padding:0 0 10px 20px;
}
.add-gallery {
    visibility:hidden;
}
.add-gallery-click {
    display: block;
    cursor:pointer;
    float: left;
    width:160px;
    height:230px;
    margin: 0 20px;
    border:1px dashed #ccc;
    margin-bottom:20px;
    background: url(../image/icon/icon_add_gallery.png) center center no-repeat;
}

.wrp-produk .wrp-tabs .kategori-boxitem {
    width:90%;
    height:330px;
    border:1px solid #ccc;
    margin-bottom: 20px;
    overflow:hidden;
}
.wrp-produk .wrp-tabs .kategori-boxitem .each-boxitem{
    width:33.33%;
    float:left;
    overflow-y: scroll;
    height: 300px;
}
.wrp-produk .wrp-tabs .kategori-boxitem .each-boxitem .item {
    padding:20px;
}
.wrp-produk .wrp-tabs .kategori-boxitem .each-boxitem .item ul {
    padding:0;
    list-style-type:none;
}
.wrp-produk .wrp-tabs .kategori-boxitem .each-boxitem .item ul li{
    padding: 4px 10px;
    cursor:pointer;
}
.wrp-produk .wrp-tabs .kategori-boxitem .each-boxitem .item ul li:hover {
    background:#4f6ec1;
    color:#fff;
}
.wrp-produk .wrp-tabs .kategori-boxitem .each-boxitem .item ul li.active {
    background:#4f6ec1;
    color:#fff;   
}

.wrp-produk .wrp-tabs .dimensi-variasi .each-field ul {
    padding:0;
    list-style-type:none;
}
.wrp-produk .wrp-tabs .dimensi-variasi .each-field ul li {
    float:left;
    margin-right:35px;
    width:60px;
    position:relative;
}
.wrp-produk .wrp-tabs .dimensi-variasi .each-field ul li span {
    position:absolute;
    top: 5px;
    right: -23px;
}
.wrp-produk .wrp-tabs .dimensi-variasi .varian input {
    margin-bottom:15px;
}
.wrp-produk .wrp-tabs .dimensi-variasi .add-ukuran-plu span {
    cursor:pointer;
}
.wrp-produk .wrp-tabs .dimensi-variasi .noted {
    font-size: 12px;
    font-style: italic;
    margin-top: -18px;
} 
.leadTime {
    position:relative;
}
.leadTime input {
    width:80%;
}
.leadTime span {
    position:absolute;
    left: 82%;
    top: 30px;
}
#waktu-pengiriman .wrp-checkbox [type="checkbox"]:not(:checked) + label:before,
#waktu-pengiriman .wrp-checkbox [type="checkbox"]:checked + label:before { 
    top: 1px; 
}
#waktu-pengiriman .wrp-checkbox [type="checkbox"]:not(:checked) + label:after, #waktu-pengiriman .wrp-checkbox [type="checkbox"]:checked + label:after {
    top:3px;
}
#waktu-pengiriman .wrp-checkbox [type="checkbox"]:not(:checked) + label,#waktu-pengiriman  .wrp-checkbox [type="checkbox"]:checked + label {
    padding-left: 30px; 
}
#waktu-pengiriman .wrp-checkbox label {
    font-weight:normal;
}

#waktu-pengiriman .holiday {
    padding-left:50px;
}
.each-slot, .each-holiday {
    margin-bottom:10px;
}
.slot-shipping {
    margin-top:20px;
}




/* Checkbox Switch*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 20px;
  margin-top: 6px;
  border-radius: 4px;
}

.switch input {display:none;}

.slider-switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider-switch:before {
    position: absolute;
    content: "ON";
    height: 18px;
    width: 50%;
    left: 26px;
    bottom: 0;
    background-color: #0079c2;
    -webkit-transition: .4s;
    transition: .4s;
    color: #fff;
    padding: 3px;
    font-size: 10px;
}
input:not(:checked) + .slider-switch:before {
    position: absolute;
    content: "OFF";
    height: 18px;
    width: 50%;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    color: #fff;
    padding: 3px;
    font-size: 10px;
}

input:not(:checked) + .slider-switch {
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 0;
    height: 20px;
}
input:checked + .slider-switch {
    background-color: #fff;
    border:1px solid #0079c2;    
    margin: 0;
    height: 20px;
}

input:focus + .slider-switch {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider-switch:before {
  -webkit-transform: translateX(-26px);
  -ms-transform: translateX(-26px);
  transform: translateX(-26px);
}
/* End of Checkbox Switch */

.filter-slideclick.active .caret {
    border-bottom: 4px dashed;
    border-top: 0 dashed;
}


/* Loader */
.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    z-index: 999999;
    display:none;
}
.loader.active {
    display:block;
}
.loader .loader-gif {
    border: 7px solid #18a2f5;
    opacity: 0.8;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border-top: 7px solid #0079C2;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 0.1s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
} 

@-o-keyframes spin{
    100%{
        -webkit-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg)
        }
}
@keyframes spin{
    100%{
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
@-moz-keyframes spin{
    100%{
        -moz-transform:rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
/* End of Loader */


/* Outlet - Add Produk */
.wrp-outlet.addproduk h3 {
    margin-bottom:20px;
}
.wrp-outlet.addproduk .wrp-media .image {
    border: 1px solid #ccc;
    width:100%;
    height:236px;
    padding:15px;
    position:relative;
}
.wrp-outlet.addproduk .rightside {
    margin-left:20px;
}
.wrp-outlet.addproduk .each-field {
    margin-bottom:10px;
}


.isEdit input[disabled] {
    border:none;
    cursor:default !important;
    background: transparent !important;
    box-shadow: none;
    text-align:center;
}
.isEdit .simpan-produk {
    display:none;
}
.isEdit .simpan-produk span {
    margin:0 5px;
}
.isEdit .each-field.option-date {
    margin:0;
}
.isEdit .edit-produk {
    cursor:pointer;
    color:#0079C2;
}
.isEdit .simpan-produk .oke,.isEdit .simpan-produk .cancel{
    cursor:pointer;
    margin:10px;
    color:#0079C2;
}
.edit-display {
    text-align:center;
    background-color: #fff !important;
}

.short-desc-gallery {
    max-width:500px;
}


/* Notification */
.wrp-notification.detail.wrp-manage .grid1.filter-section .leftside > li {
    width:100%;
}
.wrp-notification.detail.wrp-manage .grid1.filter-section li.filter-page label {
    width:inherit;
}
.wrp-notification .unread td{
    font-family: "ArialRoundedMT_Bold";    
}
.icon-notif {
    position:relative;
    padding-right: 20px;
} 
.icon-notif div {
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -1px;
    right: -3px;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;    
}


.nav-tabs-mobile  {
    display:none;
}
.nav-add-tabs li a {
    pointer-events: none;
    opacity: .4;
}
.nav-add-tabs li.active a {
    pointer-events: inherit;
    opacity: 1;
}
.modal-content .boxitem .each-upload-file {
    margin-bottom:0;
}
.next-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: url(../image/icon/icon_next_prev_gallery.png) left top no-repeat;
    background-size:20px;
    height:26px;
    color:transparent;
    cursor:pointer;
}
.btn-prev-image {
    left: 10px;
    background-position: 0 -40px;

}
.btn-next-image { 
    right: 10px; 
    background-position: 0 -4px;
}
 

/* Overide DataTabale */
table.dataTable.no-footer,table.dataTable thead th, table.dataTable thead td {
    border-bottom:0 !important;
}
.wrp-outlet .dataTables_wrapper .dataTables_paginate .paginate_button.current,.wrp-outlet .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0079c2 !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 4px !important;
    color:#fff !important;
}
.wrp-outlet .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    /* color: white !important; */
    border: 0px solid #111;
    background-color: transparent !important;
    background:  #0079c2 !important;
    background: transparent;
    background: -moz-linear-gradient(top, #585858 0%, #111 100%);
    background: -ms-linear-gradient(top, #585858 0%, #111 100%);
    background: -o-linear-gradient(top, #585858 0%, #111 100%); 
}
.wrp-outlet .dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: #333 !important;
    border: 0px solid transparent;
    border-radius: 0;
    background: transparent;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 4px !important;
}
.wrp-outlet .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.wrp-outlet  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.wrp-outlet  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background:transparent !important;
    color: #ccc !important;
}
.wrp-outlet .dataTables_wrapper .dataTables_paginate .paginate_button.next,
.wrp-outlet .dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    padding:0 5px !important;;
}

/* MOBILE VIEW */
@media (min-width: 1200px) {
    .wrp-manage .grid1.filter-section li.filter-page select {
        width: 15% !important;
    }
}
@media (min-width: 992px) and (max-width: 1300px) {
    .filter-section .hidden-xs {
        display:none;
    }
    .wrp-manage .isEdit table td .separate-date {
        position: relative; 
    }
    .wrp-manage .isEdit table td div.option-date {
        width: 100%; 
    }
    #metode-pengiriman .col-md-7 {
        width:85%;
    }
}

@media (min-width: 992px) {
    .wrp-outlet.addproduk .wrp-media .image img {       
        max-height:100%;
        max-width:100%;
        min-height:100%;
        min-width:100%;
        object-fit:cover;
    }
    .wrp-manage .grid1.filter-section li.filter-page label {
        width: 30%;
        text-align: right;
    }
    .wrp-manage .grid1.filter-section li.filter-page label:first-child {
        width: 85px; 
    } 
    .wrp-manage .grid1.filter-section li.filter-page select {
        width: 22%;
    } 
    .wrp-outlet.edit #outlet .rightside .each-field  .err-msg {
        margin-top:0;
    }
}
@media (max-width: 991px) {   
    .wrp-outlet.addproduk .wrp-media .image img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0; 
        margin: auto;
        max-height:100%;
        max-width:100%;
    }
    .wrp-manage .isEdit table td .separate-date {
        position: relative; 
    }
    .wrp-manage .isEdit table td div.option-date {
        width: 100%; 
    } 
    .wrp-login {
        margin-top:30px;
    }
    .wrp-login > div {
        padding:0;    
    }
    .wrp-login .wrp-rightside .def-btn {
        text-align:center;
    }
    .wrp-login .wrp-rightside .def-btn button {
        margin:0;
    }
    .wrp-login .floatR {
        margin-bottom:20px;
        width:100%;
        float:none;
    }       
    .wrp-manage .grid1.filter-section .rightside .filter-slideclick {
        padding: 10px 30px 7px;
    }
    .wrp-outlet.edit .each-field .err-msg, .wrp-outlet.addproduk .each-field .err-msg, .wrp-produk.add .each-field .err-msg, .wrp-produk.edit .each-field .err-msg {
        position: absolute;
        top: -7px !important;
        right: 0 !important;
        font-size: 12px !important;
        left: inherit;
        width: inherit;
        padding-left: 30px;
        font-size: 14px;
        margin-top: 8px;
        transform: none;
        background: url(../image/icon/icon_err_failed.png) 6px center no-repeat;
    }
}
@media (min-width: 769px) and (max-width: 992px) {
    #waktu-pengiriman .col-md-4, #waktu-pengiriman .col-md-8 {
        float:left;
    }
    #waktu-pengiriman .col-md-4 {
        width:40%;
    }
    #waktu-pengiriman .col-md-8 {
        width:60%;
    }    
    .wrp-header .navigation ul {
        display:block;
    }
    .wrp-header {
        height: 180px;
    }    
    .wrp-outlet.edit #outlet .rightside .each-field  .err-msg {
        top:-25px !Important;    
    }

    /* Pesanan */
    
    .wrp-pesanan .grid1.filter-section .col-md-12 > .col-md-6 {
        float:left;
        width:50%;
    }
    .wrp-pesanan .tab-content .hold .expand-pesanan .wrp-expand .grid1 .rightside {
        position:relative !important;
    }
    .wrp-complain-history .wrp-content-history .leftside .boxitem .item > div label{
        font-weight:700 !important;
    }
    .wrp-complain-history .wrp-content-history .leftside .boxitem .item > div label:before {
        content: '' !important;
    }
}
@media (max-width: 768px) {  
    
    .popupUniversal .desc {
        padding:0 !important;
    } 
    .icon-notif { 
        padding-right: 0;
    } 
    .icon-notif div { 
        width: 26px;
        height: 26px; 
        top: 4px;
        right: 4px; 
        padding: 7px 0; 
    }
    .dataTables_wrapper .dataTables_paginate {
        margin-bottom: 20px;
    }
    .wrp-header .navigation ul li a:hover:before,
    .wrp-header .navigation ul li a.Active:before { 
        background: transparent; 
    }
    .wrp-header .navigation ul li a.Active {
        background:#0079c2;
        color:#fff;
    } 
    .productImgGallery .modal-content {
        padding: 20px;
        width: 450px;
    }
    .editPrice { 
        left: 5px; 
    }  
    .wrp-manage .each-field.option-date input[disabled] {
        padding: 0;
        font-size:12px;
    }   
    #waktu-pengiriman .holiday {
        padding-left: 0;
        margin-top:30px;
    }
    table.dataTable.no-footer { 
        width: 1000px !important;
    }
    .wrp-tabs .nav-tabs > li { 
        width: 100%;
    }    
    .tab-content {
        margin-top:20px;
    }
    .wrp-tabs .nav-tabs > li.active:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        background: #d3ebf9;
        width: 100%;
        height: 41px;
        transform:none;
    }
    .nav-tabs {
        display:none;
    }
    .nav-tabs-mobile {
        display:block;
        font-family: "ArialRoundedMT_Bold";
        color: #0079c2;
        padding: 10px 15px;
        border-bottom: 1px solid; 
        background: url(../image/icon/icon_navClick.png) 96% center no-repeat;
        background-size: 7px;
    } 
    
    
    .wrp-tabs .nav-tabs > li.active > a, .wrp-tabs .nav-tabs > li.active > a:focus {
        border-bottom:0px solid #ccc !important; 
    }
    .wrp-manage .isEdit table td .separate-date {
        position: relative; 
    }
    .wrp-manage .isEdit table td div.option-date {
        width: 100%; 
    }
    .modal-content {
        padding: 20px;
    }
    .list-border-idm {
        position:relative;

    }
    .nav-overlay {
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:#000;
        opacity:.8
    }
    .nav-overlay.active {
        display:block;    
    }
    .wrp-header .navigation ul {
        width:80%;
        display:block;    
        background: #fff;
        color: #0079c2;
        padding: 0;
        height: inherit;
        line-height: normal; 
        position: fixed;
        height:100%;
        left:-1000px;
        top: 0;
        z-index: 10;
        transition: .5s all ease-in-out;
        overflow-y: scroll; 
    }
    .wrp-header .navigation ul.active {
        left:0;
    }
    .wrp-header .navigation ul li {
        list-style: none;
        width: 100%;
        text-align: left;
        display: block;
        vertical-align: middle;
        line-height: normal; 
        font-family: "ArialRoundedMT_Bold";
        margin: 0 !important;
    }
    .wrp-header .navigation ul li.top-menu-mobile {
        color: #0079c2;
        font-size: 14px;
        margin: 0;
        border-top: 5px solid;
    }
    .wrp-header .navigation ul li.separate-menu-mobile {
        height:20px;
        position:relative;
    }
    .wrp-header .navigation ul li.separate-menu-mobile:before {
        content:'';
        position:absolute;
        top:10px;;
        left:3%;
        width:94%;
        height:1px;
        background:#ccc;    
    }
    .wrp-header .navigation ul li.profileImg-menu-mobile {
        margin: 0;
        border-bottom: 1px solid #eae9e9;
    }
    .wrp-header .navigation ul li.logout {
        opacity: .4; 
        text-align: center;
        background: #0079c2;
        margin: 0 !important;
    }
    .wrp-header .navigation ul li.logout a {
        color:#fff;    
    }
    .wrp-header .navigation ul li.profileImg-menu-mobile .media .image {
        text-align: center;
        margin: 10px auto 0;  
        position:relative;
        font-size:12px;
    }
    .wrp-header .navigation ul li.profileImg-menu-mobile .media .image img{ 
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        margin:auto;
        border-radius:50%;
        width:100%;
    }
    .wrp-header .navigation ul li.profileImg-menu-mobile .media .username-mobile {
        margin-bottom: 10px;
        margin-top: 5px;
        text-align: center;
    }
        
    .wrp-header .navigation ul li a {
        width: inherit;
        color: #0079c2;
        display: block;
        padding: 10px 20px;
        font-size:12px;
    }
    .burger-menu {
        width: 55px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        padding: 10px 10px;
        transition:.5s all ease-in-out;
    }
    .burger-menu.active {
        top:0;
        transition:.5s all ease-in-out;
        position:fixed;
    }
    .burger-menu div {
        position: relative;
        width: 35px;
        height:4px;
        background:#0079c2;
        margin-bottom: 10px;
    }
    
    .burger-menu div.one {
        transform: rotate(0);
        top: 0;
        transition:.5s all ease-in-out;
    }
    .burger-menu div.two {
        right: 0;
        transition:.5s all ease-in-out;
    }
    .burger-menu div.three {
        transform: rotate(0);
        top: 0; 
        transition:.5s all ease-in-out;
    }
    .burger-menu.active div.one {
        transform: rotate(45deg);
        top: 15px;
        transition:.5s all ease-in-out;
    }
    .burger-menu.active div.two {
        right: -99999px;
        transition:.5s all ease-in-out;
    }
    .burger-menu.active div.three {
        transform: rotate(-45deg);
        top: -13px; 
        transition:.5s all ease-in-out;
    } 
    .table-info {
        font-size: 12px;
        color: #0079c2;
    }
    .wrp-header {
        height: inherit;
    }
    .wrp-header .col-md-12 {
        padding:0;
    }    
    .wrp-header .col-md-12:first-child {
        padding-left: 0;
    }
    .logo,.merchant-title {
        width:inherit;
    }
    .logo img {
        width: 130px;
    } 
    .wrp-header .helped-top { 
        width: 100%; 
        text-align:right
    }
    .wrp-header .helped-top li {
        float: inherit;
        display: inline-block;
        margin: 0 6px; 
        font-size: 10px;
    }
    .merchant-title h1 {
        width: 100px;
        margin: 0; 
        margin-left: 10px;
        height: inherit;
        line-height: normal;
        font-size: 20px;
        padding:0;
    }
    .merchant-title h1 span { 
        line-height: normal; 
    } 
    .wrp-header .helped-top li:after { 
        height: 10px;
    }

    h3 {
        font-size:20px;
    }
    .wrp-table {
        overflow: hidden;
        overflow-x: auto;
        border: 1px solid #0079c2;
    }
    .wrp-table .wrp-table {
        border: 0px solid #0079c2;
    }
    table {
        width:800px; 
    } 
    
    .isEdit table {
        width:1200px; 
    }
    .wrp-outlet.edit .each-field .err-msg, .wrp-outlet.addproduk .each-field .err-msg, .wrp-produk.add .each-field .err-msg, .wrp-produk.edit .each-field .err-msg {
        position: absolute;
        top: inherit !important;
        left: -10px;
        bottom: 0 !important;
        right: inherit; 
        transform: translate(0px,100%); 
        font-size: 12px;
    }
    .each-field.horizontal .radio {
        float: left;
        margin: 0;
        width: 100%;
    }
    
    .wrp-manage .grid1.filter-section .rightside .filter-slideclick {
        padding: 7px 15px 7px 5px;
    }
    .wrp-manage .grid1.filter-section .rightside .filter-slideclick .caret { 
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        border-top: 4px dashed;
        right: 3px;
    }
    .wrp-manage .grid1.filter-section .rightside .filter-slideclick .caret.active {  
        border-bottom: 4px dashed;
    }
    .wrp-manage .grid1.filter-section li.filter-page select {
        width: 22%;
    }
    .wrp-manage .grid1.filter-section li.filter-page label {
        width: 30%;
        text-align: right;
    }
    .wrp-manage .grid1.filter-section li.filter-page label:first-child {
        width: 85px; 
    } 
    .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .download, .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .upload, .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .added {
        margin: 50px 0px 0; 
    }
    .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif {
        min-height: 66px;
   } 
    .wrp-outlet.edit.add .metode-pengiriman .wrp-block-tarif {
        min-height: 34px;
    }
    .wrp-outlet.add .metode-pengiriman .wrp-block-tarif li:last-child {
        margin-top:10px;
    }
    .txt-info-merk {
        position: relative;
        top: inherit;
        left: inherit;
    }

    /* Pesanan */
    .wrp-pesanan .tab-content {
        padding: 0 !important;
        margin-top:0;
    }
    .wrp-pesanan .filter-section .filter-option select { 
        margin: 20px auto;
    }
    .wrp-pesanan .grid1.filter-section .leftside > li:first-child {
        width: 100%;
        float: none;
    }
    .wrp-pesanan .wrp-tabs .nav-tabs > li a div {
        right:0 !important;
    }
    .holdTolak .modal-content .wrp-reason label,
    .holdTolak .modal-content .wrp-reason input {
        float:none !important;
    } 
    .holdTolak .modal-content .leftside label,
    .holdTolak .modal-content .rightside label { 
        width:100% !important;
    }
    .holdTolak .modal-content .leftside input { 
        width:100% !important;
    }
    .holdTolak .modal-content .rightside textarea { 
        width:100% !important;
    }    
    .popup-mediasi .modal-content{
         padding: 20px !important;
    }
    .wrp-complain-history .wrp-content-history .leftside .boxitem,
    .wrp-complain-history .wrp-content-history .rightside .boxitem {
        width: 100% !important;
    }
    .wrp-complain-history .wrp-content-history .leftside .boxitem .item {
        margin-right: 25px !important;
    }
    .wrp-complain-history .wrp-content-history .rightside .boxitem .item{
        margin-left: 25px !important;
    }
    .wrp-complain-history .wrp-content-history .rightside .boxitem .date {
        position: relative !important;
        top: 15px !important;
        left: 0 !important;
        background:#fff;
    }
    .wrp-complain-history .wrp-content-history .leftside .boxitem .date {
        position: relative !important;
        top: 15px !important;
        right: 0 !important;
        background:#fff;
    }
    .wrp-complain-history .wrp-content-history .leftside .boxitem:before,
    .wrp-complain-history .wrp-content-history .rightside .boxitem:before {
        border:0 !Important;
    }
    .wrp-complain-history .wrp-content-history .leftside .boxitem:after,
    .wrp-complain-history .wrp-content-history .rightside .boxitem:after {
        transform: translateY(-118%) !Important;
    }
    .wrp-complain-history .small-txt {
        font-size:12px;
        font-weight:700;
    }   
    .result-mediasi > div {
        margin-bottom:10px;
    }
    .result-mediasi > div label {
        font-weight:700 !Important;
    }
    .result-mediasi > div label:before {
        content: '' !Important;
    }
    .result-mediasi > div > div {
        width:100% !important;
    }
    .wrp-complain-history .wrp-content-history .leftside .boxitem:after,
    .wrp-complain-history .wrp-content-history .rightside .boxitem:after {
        margin-top:7px !important;
    }
}



@media (max-width: 480px) {
    .cs-section div {
        font-size: 11px !important;
        line-height: 15px !important;
    }
    .cs-section .mailFranchise {
        font-size: 12px !important;
    }
    #forgetPassword .cs-section .mailFranchise {
        font-size: 13px !important;
    }
    .wrp-changePassword .error-msg {
        margin-left: 0 !important;
    }
    .productImgGallery .modal-content {
        padding: 20px;
        width: 300px;
    }
    .each-field .err-msg { 
        font-size: 9px;
        top: 6px;
    }
    .form-login .each-field .err-msg {
        font-size: 10px;
        top: inherit;
        left: 0;
        bottom: -15px;
    }
    .form-login .each-field .err-msg.idm-Clrred, .form-login .err-msg.idm-Clrred.active {
        background: url(../image/icon_err_failed.png) left center no-repeat;
        padding-left: 17px;
        background-size: 16px;
    }
    #frmAddOutlet > .col-md-12 .col-md-7 {
        padding:0
    }
    .gallery .media-boxitem {
        margin:0;
    }
    .wrp-manage .grid1.filter-section li.filter-page label:last-child {
        display: none;
    }
    .wrp-manage .grid1.filter-section li.filter-option-status {
        width: 40%;
    }    
    .wrp-manage .grid1.filter-section li.filter-page {
        width: 50%; 
        margin-bottom:20px;
    }    
    .wrp-manage .grid1.filter-section li.filter-page select {
        width: 40%;
    }
    .wrp-manage .grid1.filter-section li.filter-page label { 
        text-align: right;
    }  
    .wrp-manage .grid1.filter-section li.filter-page label:first-child {
        width: 75px !important;
    }
    .wrp-outlet.edit #outlet .floatL {
        float: left;
        width: 100%;
        padding: 0 !important;
    }
    .wrp-outlet.add .metode-pengiriman .wrp-block-tarif li:first-child {
        width: 100%;
    }
    .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif li select {
        width: 100%;
    }
    .wrp-outlet.add .metode-pengiriman .wrp-block-tarif li:last-child {
        width: 100%; 
        margin-top: 50px;
    }
    .modal.fade .modal-dialog {
        width:300px;
    }
    .modal-content {
        padding: 20px;
    }
    .wrp-outlet.edit .def-btn {
        text-align: center !important;
        margin-top:20px;
    } 
    #waktu-pengiriman .holiday {
        padding-left: 0; 
    }
    #waktu-pengiriman .col-md-8 {
        padding:0;
        margin-top:20px;
    }
    #waktu-pengiriman .wrp-checkbox [type="checkbox"]:not(:checked) + label, #waktu-pengiriman .wrp-checkbox [type="checkbox"]:checked + label {
        width:100%;
    }
    .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif li:first-child {
        width:100%;
    }
    .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif {
        margin-bottom:0;
    }
    .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .download, .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .upload, .wrp-outlet.edit .metode-pengiriman .wrp-block-tarif .added {
        padding: 0 0px;
        color: #0079C2;
    }
    .wrp-outlet.edit .def-btn.mL100 {
        margin-left:0 !important;
    }
    .wrp-outlet.edit .produk-outlet {
        margin:0 -15px;
    }
    
    .wrp-manage .grid1.filter-section .rightside span {
        margin-left: 4px;
    }
    .wrp-outlet.addproduk .each-field {
        margin-bottom: 20px;
    }
    .wrp-outlet.addproduk .rightside {
        margin-left: 0px;
    }
    .wrp-manage .grid2 .each-field.published select,
    .wrp-manage .grid2 .each-field.stock select {
        width: 100%;
   } 
    .produk-outlet .wrp-manage .grid2 .def-btn {
        margin-top: 0;
    }
    #waktu-pengiriman .col-xs-6 {
        width:100%;
    }
    
    .gallery .media-boxitem .image {
        width: 100%; 
    }
    .gallery .media-boxitem { 
        width: 100%; 
    }
    .add-gallery-click { 
        width: 100%; 
        margin: 0; 
        margin-bottom: 20px;
    }
    .gallery {
        float:none;
    }
    .wrp-produk .wrp-tabs .kategori-boxitem {
        width: 100%;
        overflow: hidden !important; 
    }
    .w300 {
        width: 100%;
    }
    .deskripsi .def-btn {
        text-align:center;
    }
    .wrp-produk.edit .wrp-tabs > div > .col-md-12,.wrp-outlet.edit .tab-content .col-md-6  {
        padding:0;
    }
    .wrp-each-boxitem {
        width:100%;
        position:relative;
        transition:1s all ease-in-out;
    }
    .wrp-produk .wrp-tabs .kategori-boxitem .wrp-each-boxitem .each-boxitem {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        transition:1s all ease-in-out;
        background:#fff
    }
    .wrp-produk .wrp-tabs .kategori-boxitem .wrp-each-boxitem .each-boxitem.active { 
        left:-100%;
        transition:1s all ease-in-out;
    }
    .wrp-produk .wrp-tabs .kategori-boxitem .wrp-each-boxitem .each-boxitem.level1 { 
        z-index:3;
    }
    .wrp-produk .wrp-tabs .kategori-boxitem .wrp-each-boxitem .each-boxitem.level2 { 
        z-index:2;
    }
    .wrp-produk .wrp-tabs .kategori-boxitem .wrp-each-boxitem .each-boxitem.level3{ 
        z-index:1;
    }
    .wrp-each-boxitem #container-category-level1.active {
        position:relative;
        left:-100%;
        transition:1s all ease-in-out;
    }
    .wrp-produk .wrp-tabs .kategori-boxitem .each-boxitem .back-level {
        display: block;
        padding: 5px 10px;
        position: absolute;
        top: -4px;
        left: 0;
        width: 100%;
    }
    .wrp-produk .wrp-tabs .kategori-boxitem .each-boxitem .item ul {
        margin-top: 5px;
    }
    .deskripsi .col-md-7 {
        padding:0;
    }
}





/* Pesanan */
.wrp-pesanan .filter-section .filter-option select {
    width:235px;
}
.wrp-pesanan .grid2 {
    padding:20px 0 0;
} 
.wrp-pesanan .tab-content .expand-pesanan {
    border:1px solid #ccc;
    background:#fff;    
    text-align:left !important;
    padding:20px;
    display:none;
    padding-bottom:0 !important;
}
.wrp-pesanan .tab-content .open-pesanan .expand-pesanan { 
    display: table-cell;;
    width:100%;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .each-grid {
    display:block;
    border:0;
    margin-bottom: 20px;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .grid1 .leftside label,
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .grid1 .leftside .address-pesanan {
    float:left;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .grid1.leftside .address-pesanan {
    width:50%;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .grid1 .leftside label {
    width:65px;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand.expand-hold .grid1 .leftside label {
    width:100px;
}
.wrp-pesanan .tab-content .hold .expand-pesanan .wrp-expand .grid1 .rightside {
    position: absolute;
    right: 0;
    bottom: 0;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand {
    min-height:200px;    
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand.expand-hold {
    min-height:80px;    
    position:relative;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand.expand-hold .rightside {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 235px;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand.expand-hold .rightside .def-btn {
    margin:0;
    text-align: right;
}
.wrp-pesanan .click-expand div { 
    border: 1px solid;
    border-radius: 50%;
    color: #555;
    font-size: 14px;
    width: 20px;
    height: 20px;
    margin: auto;
    line-height: 16px;
    cursor: pointer;
} 
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-table  {
    padding:0 40px;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-table thead,
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-table tbody {
    background:transparent;
    border:1px solid #ccc;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-table th {
    padding:6px;    
    color:#555;
    text-align:center;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-table tbody tr {
    border-bottom:1px solid #ccc;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-table td {
    padding:10px 6px;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-top-table {
    padding:4px 40px ;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-top-table .leftside{
    width:87%;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-top-table .leftside.invoice input {
    width:25%;
    height:30px;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-top-table .leftside.invoice label {
    margin-right:10px;
    padding-top: 6px;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-top-table .leftside.invoice .def-btn {
    margin-left:6px !important;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-top-table .rightside{
    width:13%;
    text-align: right;
    padding-top: 6px;
}
.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-top-table .rightside span {
    margin:4px;
}
.wrp-pesanan .wrp-txt-qty {
    width: 350px;
    margin-left: auto;
    font-size: 12px;
    border: 2px dashed #ffcc33;
    background: #efeeee;
    padding: 4px 10px;
}
.wrp-pesanan .wrp-txt-qty label,
.wrp-pesanan .wrp-txt-qty div {
    float:left;
}
.wrp-pesanan .wrp-txt-qty div {
    width:160px;
    text-align: left;
    padding-left: 4px;
}
.wrp-pesanan .afterSv {
    padding-top: 6px;
    display:none;
}
.wrp-pesanan .def-btn.active .sv-invAwb {
    display:none;
}
.wrp-pesanan .afterSv.active {
    display:block;
}
.wrp-pesanan .afterSv .sv-invAwb{
    margin-top: -6px !important;
}
.wrp-pesanan .afterSv .sv-invAwb button {
    min-width: 60px;
    background: #fff;
    border: 1px solid #ccc !important;
    margin-right: 4px !important;
}   
.wrp-pesanan .afterSv span,.wrp-pesanan .tab-content .expand-pesanan .wrp-expand .wrp-top-table .rightside span{
    margin:0 4px;
    margin-top:6px;
    color:#0079c2;
    cursor:pointer;
    text-decoration:underline;
    font-size:12px;
}
.wrp-pesanan .afterSv span.text {
    color:inherit;
    cursor:default;
    text-decoration:none;
}
.wrp-pesanan .disabled {
    cursor: default !important;
    opacity: .2; 
}
.wrp-pesanan .disabled.active {
    cursor: pointer !important;
    opacity: 1; 
}
.wrp-pesanan .option-kurir {
    width: 15%;
    height: 30px;
    margin-right: 8px;
}
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty {
    width: 102px;
    margin: auto;
}    
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty input{
    width: 35px;
    height:30px;
    text-align: center;
    padding: 4px;
    margin: auto; 
} 
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty input[disabled]{ 
    border: none;
    cursor: default !important;
    background: transparent !important;
    box-shadow: none;
    text-align: center;
} 
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty label {
    padding: 5px 8px;
    margin: 0 4px;   
    width:25px;
    color:transparent;
    cursor:pointer;
}
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty label.edit {
    background: url(../image/icon/icon_for_editPesanan.png) left center no-repeat;
}
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty.active label.edit,
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty label.ok {
    display:none;
} 
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty.active label.ok {
    display:block;
    background: url(../image/icon/icon_for_editPesanan.png) -31px center no-repeat;
}
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty label.cancel {
    visibility:hidden;
}
.wrp-pesanan .wrp-expand .wrp-table .wrp-qty.active label.cancel {
    visibility:visible;
    background: url(../image/icon/icon_for_editPesanan.png) -54px center no-repeat;
}

.wrp-pesanan .proseskirim .wrp-expand .wrp-table .wrp-qty input,
.wrp-pesanan .selesai .wrp-expand .wrp-table .wrp-qty input,
.wrp-pesanan .batal .wrp-expand .wrp-table .wrp-qty input {
    width:inherit;
}
.wrp-pesanan .noAWB {
    font-size: 11px;
    color: #c1c1c1;    
}
.wrp-pesanan .wrp-jenisKurir {
    text-align: left;
    width: 365px;
    margin-left: auto;
}
.wrp-pesanan .wrp-jenisKurir .tagline {
    font-weight:700;

}
.wrp-pesanan .wrp-jenisKurir .each-field {
    margin-top:10px;
    margin-bottom:0;
}
.wrp-pesanan .wrp-jenisKurir .each-field label,
.wrp-pesanan .wrp-jenisKurir .each-field input {
    float:left;
}
.wrp-pesanan .wrp-jenisKurir .each-field label {
    width: 30%;
    margin-top: 4px;
    font-weight:normal;
} 
.wrp-pesanan .wrp-jenisKurir .each-field input { 
    width:70%;
    height:30px;
}
.wrp-pesanan .wrp-jenisKurir .def-btn {
    text-align:right;
    margin-bottom:0;
}
.wrp-pesanan .wrp-jenisKurir .def-btn button{
    margin-right:0;
}
.wrp-pesanan .wrp-jenisKurir ul {
    padding: 0;
    list-style: none;
    margin-top:10px;
}
.wrp-pesanan .wrp-jenisKurir ul li{
    position:relative;
    display: inline-block;
    width: 48%;
    text-align: center;
    z-index:2;
    vertical-align: top;
}
.wrp-pesanan .wrp-jenisKurir ul li:last-child {
    z-index:1;
}
.wrp-pesanan .wrp-jenisKurir ul li:last-child:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ccc;
    top: 10px;
    left: -50%;
    transform: translateY(-50%);
}
.wrp-pesanan .wrp-jenisKurir ul li:last-child.succeed:before {
    background: #0079c2;
}
.wrp-pesanan .wrp-jenisKurir ul li span {
    padding: 2px 10px;
    background: #0079c2;
    border-radius: 50%;
} 
.wrp-pesanan .wrp-jenisKurir ul li p {
    margin:0;
}
.wrp-pesanan .wrp-jenisKurir .flow-eksKirim ul li:last-child .status {
    display:none;
}
.wrp-pesanan .wrp-jenisKurir .flow-eksKirim ul li:last-child.succeed .status { 
    display:block;
}
.wrp-pesanan .wrp-jenisKurir ul li:last-child span{
    background: #ccc;
}
.wrp-pesanan .wrp-jenisKurir ul li:last-child.succeed span{
    background: #0079c2;
}
.wrp-pesanan .wrp-jenisKurir ul li .status,
.wrp-pesanan .wrp-jenisKurir ul li p {
    font-size:11px;
}
.wrp-pesanan .wrp-tabs .nav-tabs > li a{
    position:relative;
}
.wrp-pesanan .wrp-tabs .nav-tabs > li a.navigation-order-status span{
    cursor:pointer;
}
.wrp-pesanan .wrp-tabs .nav-tabs > li a div {
    background: #0079c2;
    font-size: 10px;
    padding: 4px;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: -8px;
    text-align:center;
}
.wrp-pesanan .tab-content .hold .expand-pesanan .wrp-expand .grid1 .leftside label {
    width: 95px;
    position:relative;
}
.wrp-pesanan .tab-content .hold .expand-pesanan .wrp-expand .grid1 .leftside label:before {
    content:':';
    position:absolute;
    top:0;
    right:10px;
    width:2px;
    height:20px;
}
.wrp-pesanan .tab-content .hold .expand-pesanan .wrp-expand .grid1 .leftside > div {
    margin-bottom:5px;
}
.wrp-pesanan .tab-content .hold .expand-pesanan .wrp-expand .grid1 .leftside > div > div{
    float:left;
    width:80%
}
.wrp-pesanan .tab-content .hold .expand-pesanan .wrp-expand .grid1 {
    margin:0;
}
.wrp-pesanan .tab-content .hold .expand-pesanan .wrp-expand .grid1 .def-btn {
    text-align:right;
    margin-bottom:0;
}
.wrp-pesanan .tab-content .hold .expand-pesanan .wrp-expand {
    min-height: 100px;
}

.hold-popup .modal-content{
    padding:20px 40px;
}
.holdTolak .modal-content h5{
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}   
.holdTolak .modal-content .wrp-reason label,
.holdTolak .modal-content .wrp-reason input {
    float:left;
}
.holdTolak .modal-content .leftside, .holdTolak .modal-content .rightside {
    margin-bottom:20px;
}
.holdTolak .modal-content .leftside label,
.holdTolak .modal-content .rightside label { 
    width:100px
}
.holdTolak .modal-content .leftside input { 
    width:40%;
}
.holdTolak .modal-content .rightside textarea { 
    width:80%;
}

/* Sorting */
.enable-sort span {
    background: url(../image/icon/icon_filter.png) right center no-repeat;
    background-size: 8px;
    padding-right: 14px;
    cursor: pointer;
}

/* Riwayat Komplain */
.wrp-complain-history {
    margin-top:30px;
    border:1px solid #ccc;
    min-height:300px;
    padding:10px 20px;
    position:relative;
}
.wrp-complain-history .leftsideHead,
.wrp-complain-history .rightsideHead {
    float:left;
    width:50%;  
}
.wrp-complain-history .headline {
    text-align:center;
    font-family: "ArialRoundedMT_Bold";
    font-size:16px;
    border-bottom:1px solid #ccc;
    padding-bottom:10px;
}
.wrp-complain-history:before {
    content:'';
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    background:#ccc;
}
.wrp-complain-history .wrp-content-history .leftside {
    text-align:left;
}
.wrp-complain-history .wrp-content-history .leftside .boxitem{
    width:50%;
    margin-right:auto;
    position:relative;
}
.wrp-complain-history .wrp-content-history .leftside .boxitem:after{
    content: '';
    width: 100%;
    height: 20px;
    position: absolute;
    top: 50%;
    right: -17px;
    transform: translateY(-50%); 
    background: url(../image/icon/icon_riwayat_pesanan.png) right 0px no-repeat;
}
.wrp-complain-history .wrp-content-history .leftside .boxitem:before{
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;
    right: -17px;
    transform: translateY(-50%);
    border-bottom: 1px solid #0079C2;
    z-index: -1;
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .item {
    margin-right:120px; 
    padding:10px;
    border-radius:6px;
    background:#fff;
    position:relative;
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .date {
    position: absolute;
    top: 50%;
    right: 16px;
    font-size: 10px;
    text-align: center;
    transform: translateY(-50%);
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .item:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent #fff;
    display: block;
    width: 0;
    z-index: 1;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .item:before 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent #0079C2;
    display: block;
    width: 0;
    z-index: 0;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.wrp-complain-history .wrp-content-history .leftside .boxitem .item > div label,
.wrp-complain-history .wrp-content-history .rightside .boxitem .item > div label{
    float:left;
    width:75px;
    position:relative;
    font-weight:normal;
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .item > div label:before,
.wrp-complain-history .wrp-content-history .rightside .boxitem .item > div label:before{
    content: ':';
    position: absolute; 
    z-index: 0;
    right:6px;
    top: 0; 
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .item > div > div,
.wrp-complain-history .wrp-content-history .rightside .boxitem .item > div > div{
    float:left;
    width:75%;
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .item > .ket,
.wrp-complain-history .wrp-content-history .rightside .boxitem .item > .ket  {
    margin-top:10px;
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .item > .ket span,
.wrp-complain-history .wrp-content-history .rightside .boxitem .item > .ket span {
    position:relative;
    padding:0 6px;
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .item > .ket span:before,
.wrp-complain-history .wrp-content-history .rightside .boxitem .item > .ket span:before {
    content:'"';
    position:absolute;
    top:-4px;
    left:0; 
}
.wrp-complain-history .wrp-content-history .leftside .boxitem .item > .ket span:after,
.wrp-complain-history .wrp-content-history .rightside .boxitem .item > .ket span:after {
    content:'"';
    position:absolute;
    bottom:0;
    right:0; 
}
.wrp-complain-history .wrp-content-history .rightside {
    text-align:right; 
}
.wrp-complain-history .wrp-content-history .rightside .boxitem{
    width:50%;
    margin-left:auto;
    position:relative;
}

.wrp-complain-history .wrp-content-history .rightside .boxitem:after{
    content: '';
    width: 100%;
    height: 20px;
    position: absolute;
    top: 50%;
    left: -17px;
    transform: translateY(-50%); 
    background: url(../image/icon/icon_riwayat_pesanan.png) left 0px no-repeat;
}
.wrp-complain-history .wrp-content-history .rightside .boxitem:before{
    content: '';
    width: 100%;
    height:2px;
    position: absolute;
    top: 50%;
    left: -17px;
    transform: translateY(-50%);
    border-bottom: 1px solid #0079C2;
    z-index: -1;
}
.wrp-complain-history .wrp-content-history .rightside .boxitem .item {
    margin-left:120px; 
    padding:10px;
    border-radius:6px;
    text-align:left;
    background:#fff;
    position:relative;
}
.wrp-complain-history .wrp-content-history .rightside .boxitem .date {
    position: absolute;
    top: 50%;
    left: 16px;
    font-size: 10px;
    text-align: center;
    transform: translateY(-50%);
}
.wrp-complain-history .wrp-content-history .rightside .boxitem .item:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 12px 12px 12px 0;
    border-color: transparent #FFFFFF;
    display: block;
    width: 0;
    z-index: 1;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
}

.wrp-complain-history .wrp-content-history .rightside .boxitem .item:before 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 12px 12px 12px 0; 
    border-color: transparent #0079C2;
    display: block;
    width: 0;
    z-index: 0;    
    left: -13px; 
    top: 50%;
    transform: translateY(-50%);
}
.wrp-complain-history .wrp-content-history .boxitem { 
    margin:20px 0;
}
.wrp-complain-history .wrp-content-history .boxitem .item {
    border:1px solid #0079C2; 
}
.mediasi {
    margin-top:30px;
}
.mediasi span {
    background:#0079C2;
    color:#fff;
    padding:8px 20px;
    cursor:pointer;
}
.popup-mediasi .modal-content{
     padding: 20px 100px;
}
.popup-mediasi .modal-content h5 {
    font-size:20px;
}
.result-mediasi {
    padding: 10px 20px 20px;
    border: 1px solid #ccc;
    border-top: 0 !important;
}
.result-mediasi h5 {
    font-size:20px;
    margin-bottom:20px;
}
.result-mediasi h5 span {
    font-size:12px;
}
.result-mediasi > div label {
    float:left;
    width:105px;
    position:relative;
    font-weight:normal;
} 
.result-mediasi > div label:before{
    content: ':';
    position: absolute; 
    z-index: 0;
    right:6px;
    top: 0; 
}
.result-mediasi > div > div{
    float:left;
    width:75%;
}


/* Print */
.wrp-print{
    margin-top:30px;
} 
.wrp-print .merchant-title h1 {
    padding-left: 0;
    width: 100%;
}
.merchant-title h1 span { 
    vertical-align: -20px; 
}
.wrp-print .printName {
    position:relative;
}
.wrp-print .printName .printNameType {
    position:absolute;
    bottom:0;
    right:0;
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 20px;
    font-family: "ArialRoundedMT_Bold"
}
.wrp-print .content-inline {
    margin-top:50px;
}
.wrp-print .content-inline table {
    width:100%;
    margin-top:20px;
}
.wrp-print .content-inline table thead {
    font-family: "ArialRoundedMT_Bold";
}
.wrp-print .content-inline table thead td {
    border:1px solid #ccc;
    text-align:center;
    padding:6px;
}
.wrp-print .content-inline table tbody {
    border:1px solid #ccc;
}
.wrp-print .content-inline table tbody td{
     padding:10px;
     text-align:center;
     border-left:1px solid #ccc;    
     vertical-align: top;
}
.wrp-print.invoice .content-inline table tbody td,
.wrp-print.invoice .content-inline table thead td,
.wrp-print .content-inline table tbody {
    border:none;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
} 
.wrp-print.picking .content-inline table tbody {
    border:1px solid #ccc;
}
.wrp-print.invoice .content-inline table tbody td {
    border-bottom:1px solid #f1eeee;
} 
.wrp-print.invoice .content-inline table tbody tr:last-child td {
    border-bottom:0px solid #f1eeee;
} 
.wrp-print .content-inline table tbody td.txtProduk {
    text-align:left;
}
.wrp-print.invoice .content-inline h4 {
    font-family: "ArialRoundedMT_Bold";
    text-decoration:underline;
}
.wrp-print.invoice .content-inline h1 {
    font-family: "ArialRoundedMT_Bold";  
    margin-left:20px !important;
    margin:30px 0;
}
.wrp-print .content-inline .leftside,
.wrp-print .content-inline .rightside {
    float:left;
    width:50%;
    padding:10px;
}
.wrp-print .content-inline .wrp-invAddress {
    margin-bottom:30px;
}

.wrp-print.invoice .wrp-total .contentForm .each-row .txtRight {
    width:120px;
    float:left;
    padding-left:10px;
}
.wrp-print.invoice .content-inline .wrp-total{
    width: 275px;
    margin-left: auto;
    margin-top: 20px;
}
.wrp-print.invoice .content-inline .wrp-total .contentForm:first-child {
    border-color: #ccc;
    border-bottom-style: double;   
}
.wrp-print .noted {
    font-size:12px;
    margin-top:35px;
}
.wrp-print.labellist .content-inline .topHead .leftside,
.wrp-print.labellist .content-inline .topHead .rightside{
    float:left;
    width:50%;
    padding:10px;
    position:relative;
}
.wrp-print.labellist .content-inline .topHead .leftside:before {
    content:'';
    position:absolute;
    top:10px;
    right:0;
    width:1px;
    height:70%;
    background:#555;
}
.wrp-print.labellist .content-inline .topHead .txtLeft {
    font-weight:700;
}
.wrp-print.labellist .content-inline .topHead .txtRight.merchantName {
    font-size:18px;
    text-transform:uppercase;
    font-weight:700;
    margin-top: -2px;
}
.wrp-print.labellist .address-penerima {
    padding:10px;
    margin-bottom: 50px;
}
.wrp-print.labellist .address-penerima .name {
    margin:6px 0;
    font-size:18px;
}
.wrp-print.labellist .address-penerima p {
    margin:0;
}
.wrp-print.labellist .icon-barcode > div {
    width:200px;
    margin:auto;
}
.wrp-print.labellist .icon-barcode > div img{
    width:100%;
}
.wrp-print.labellist .merchant-title {
    margin-top:20px;
}
.wrp-print.labellist .no-cs,
.wrp-print.labellist .customerCare {
    padding: 10px 10px 10px 0;
    font-size:16px;
}
.wrp-print.labellist .no-cs { 
    margin-bottom:10px;
}
.wrp-print.labellist .no-cs img{
    width:40px
}
.wrp-print.labellist .customerCare img{
    width:40px
}
.wrp-print.labellist .customerCare a {
    color:#000;    
    padding-left: 8px;
}
 

    

/* For Text Form */
.contentForm .each-row {
    margin-bottom:4px;
}
.contentForm .each-row .txtLeft {
    position:relative;
    width:125px;
    float:left;
}
.contentForm .each-row .txtLeft:before {
    content:':';
    position:absolute;
    top:0;
    right:0;
}
.contentForm .each-row .txtRight {
    width:70%;
    float:left;
    padding-left:10px;
}




/* Print */
.wrp-print{
    max-width:970px;
    width:970px;
    margin:auto;
    margin-top:30px;
    padding-bottom:30px;
}
.wrp-print.labelList{
    max-width:768px;
    width:768px; 
}
.wrp-print .header .rightside {
    position:relative;
    width: 74%;
    padding-left: 15px;
    padding-top: 4px;
}
.wrp-print.labelList {
    font-size: 16px;
    padding: 10px;
    margin-bottom: 30px;
    border: 1px solid #ccc;
}
.wrp-print.labelList .header .leftside,
.wrp-print.labelList .header .rightside {
    width:50%;
    font-size: 18px;
    padding:0 10px;
}
.wrp-print.labelList .header .leftside img,
.wrp-print.labelList .content-inline  .contentForm .each-row .txtRight img {
    width:100%;
}
.wrp-print.labelList .header .rightside {
    padding-top:10px;
}
.wrp-print.labelList .header .rightside img {
    width:30px;
    margin-right:6px !important;
    margin:4px;
}
.wrp-print.labelList .content-inline {
    margin-top:30px;
}
.wrp-print.labelList .content-inline .rightside .contentForm .each-row .txtLeft {
    width: 80px;
}
.wrp-print.labelList .content-inline  .contentForm .each-row .txtRight {
    width: 60%; 
}
.wrp-print.labelList .content-inline .address-penerima {
    margin-top:20px;
    padding: 10px;
}
.wrp-print.labelList .content-inline .contentForm .each-row .txtRight p{
    margin:0;
}
.wrp-print.labelList .content-inline .contentForm .each-row .txtRight img {
    margin-top:-14px;
}
.wrp-print .header .rightside h1{
    color:#0079C2;    
    font-family: "ArialRoundedMT_Bold";
    margin-bottom:0;
    margin-top:30px;x
} 
.wrp-print .header .rightside .printNameType {
    position:absolute;
    right:0;
    bottom:6px;
    font-size: 20px;
    color: #c1c1c1;
}
.wrp-print .list-border-idm span {
    width:33.333%;
    float:left;
}
.wrp-print .wrp-table {
    border:0 !important;
}
.wrp-print.pickingList table {
    border:1px solid #ccc;
}
.pagebreak { page-break-before: always; }
.welcomingName {
    padding-right: 30px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background: url(../image/icon/icon_user.png) right center no-repeat;
    background-size: 26px;
    cursor: pointer;
    text-align: right;
}
.result-welcomingName {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    border: 1px solid;
    border-radius: 4px;
    display:none;  
}
.result-welcomingName.active {
    display:block;
}
.result-welcomingName:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 9px 9px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -9px;
    left: 138px;
}
.result-welcomingName:before 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: #0079C2 transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -10px;
    left: 137px;
}

.popupUniversal .desc {
    padding:20px;
} 
.popupUniversal .desc ul  {
    padding-left:20px;
    margin:0
}
.popupUniversal .desc ul li{
    text-align:left
}
.modal .modal-content {
    position:relative;
    border-top: 4px solid #0079C2;
}
.modal .modal-content:after {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 33.33%;
    height: 4px;
    background: #CC3333;
}
.modal .modal-content:before {
    content: '';
    position: absolute;
    top: -4px;
    right: 0;
    width: 33.33%;
    height: 4px;
    background: #FFCC33;
}
.wrp-table tbody {
    font-size:13px;
}
.wrp-table tbody a{
    text-decoration:underline;
}
.wrp-table tbody a div,.wrp-table tbody a .noAWB{
    text-decoration:underline;
}
.fa.fa-angle-double-left,.fa.fa-angle-double-right {
    font-size: 20px;
    height: 24px;
    vertical-align: middle;
}
.fontBarcode {
    font-family: 'BarcodeFont';
    font-size: 60px;
    line-height: 38px;
}
.w100 {
    width:100px !important;
}
.Msg {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}
.picture-1 { 
    position: relative;
    height: 495px;
    margin-left: 0;
    display: inline-block;
    overflow: hidden;
    width:100%;
    border: 1px solid #fff;
}
.picture-1 img{
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}


.picture-1 .bg-newsOverlay{padding: 50px 30px 20px 30px;}
.picture-1 .bg-newsOverlay{background: rgba(0,0,0,0.4);height: 37%; position: absolute; left: 0; bottom: 0; width: 100%; -webkit-box-shadow: 0px 0 24px 11px rgba(0,0,0,0.42); -moz-box-shadow: 0px 0 24px 11px rgba(0,0,0,0.42); box-shadow: 0px 0 24px 11px rgba(0,0,0,0.42);color:#fff;padding: 35px 15px 0px;}
.picture-1 .bg-newsOverlay h1{font-size: 30px; margin-bottom: 15px; min-height: 70px; max-height: 70px; overflow: hidden;}
.picture-1 .bg-newsOverlay h3{position: absolute;bottom: 10px;left: 0;padding: 0 15px;  min-height: 34px; max-height: 34px; overflow: hidden;}
.picture-1 .bg-newsOverlay .newsDate{font-size: 16px;}

.picture-2 .bg-newsOverlay{padding: 50px 30px 20px 30px;}
.picture-2 .bg-newsOverlay{background: rgba(0,0,0,0.4);height: 36%; position: absolute; left: 0; bottom: 0; width: 100%; -webkit-box-shadow: 0px 0 24px 11px rgba(0,0,0,0.42); -moz-box-shadow: 0px 0 24px 11px rgba(0,0,0,0.42); box-shadow: 0px 0 24px 11px rgba(0,0,0,0.42);color:#fff;padding: 0px;}
.picture-2 .bg-newsOverlay h1{font-size: 30px; margin-bottom: 15px; min-height: 70px; max-height: 70px; overflow: hidden;}
.picture-2 .bg-newsOverlay h3{position: absolute;bottom: 0;left: 0;padding: 0 15px;  min-height:20px; max-height: 52px; overflow: hidden; font-size:15px;    line-height: 17px;}
.picture-2 .bg-newsOverlay .newsDate{font-size: 16px;}

.picture-2 {
    width: 100%;
    height: 165px;
    position:relative;
    overflow:hidden;
    border: 1px solid #fff;
}
.picture-2 img{
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.text-title-headline {
    margin-top: -90px;
    margin-left: 90px;
    color: black;
    font-size: 23px;
    width: 100%;
    position: absolute;
}
.text-date { 
    position: absolute;
    margin-top: -55px;
    margin-left: -295px;
    color: black;
    font-size: 15px;
}

.text-sub-title {
    position: absolute;
    color: black;
    margin-right: 0px;
    margin-left: 28px;
    margin-top: -28px;
}

.title-logo {
    width: 245px; 
    margin-bottom: 12px;
}
.ul-bantuan {
    text-align: right;
    list-style: none;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 0;
}

.ul-bantuan li {
       display: inline-block;
    padding: 0px 10px;
    border-right: 1px solid;
        margin-top: 4px
}

.ul-bantuan li:last-child {
    border: 0;
}
.ul-berita {
    list-style: none;
    text-align: left; 
    padding:0 !important;
    margin-bottom:0
}
.ul-Menu {
    text-align: left;
    list-style: none;
}
.ul-Menu li {
    display: inline-block;
    padding: 0px 30px;
    margin-top: 20px;
    font-size: 17px;
    font-family: "ArialRoundedMT_Bold";
    color: #0079C2;
}

.ul-berita li {
    font-size: 16px;
    border-bottom: 1px solid;
    border-color: silver;
    padding: 10px 20px;
}

.ul-berita li > div{ 
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.ul-berita li:first-child {
    border-bottom: 2px solid;
    border-color: #0079C2;
  
}

.other-news {
    text-align : center;
    padding:10px;
    cursor:pointer;
    border-bottom:1px solid #ccc;
    font-family: "ArialRoundedMT_Bold";
}

.other-news:hover {
    background: #fcfcfc;
}
    
.title-news { 
    font-size:16px;
    color: #000;
    font-family: "ArialRoundedMT_Bold";
}

.date-news {
    font-size: 13px;
    color :#555 !important;
}

.title-detail-news {
    font-size:25px;
    padding-top : 5px;
}
.title-detail-news h4{
    font-size:22px;
    font-family: "ArialRoundedMT_Bold";
    margin-bottom:20px;
}
.title-detail-news img { 
    position: relative; 
    width: 75%;
    margin: auto;
    display: block;
}

.title-detail-news h3 {
    margin-left : 181px;
    width: auto;
}


.ul-date-detail-news {
    list-style: none;
    text-align: left;
    padding-left:0;
}
.ul-date-detail-news li {
    border-bottom : 3px solid;
    border-color : #0079C2;
    list-style : none;
    font-size: 15px;
}
.ul-date-detail li, a{ 
padding: 2px 12px;  
}

.ul-date-news li, a{ 
padding:0  
}
.ul-oth-news {
    border-Bottom : 2px solid;
    border-color: #0079C2;
    list-style: none;
    text-align: left;
    padding: 0px 0px;
    margin-top: 14px;
}
.ul-oth-news p {
    width:24%;
}

.ul-oth-detail {
list-style: none;
text-align: left;
padding: 0px 0px;
}

/*.ul-oth-detail li:first-child {
    border-top : 2px solid;
    border-color: #0079C2
 
}*/
.ul-oth-detail a {
width:24%;
margin-top: 1px;
}   

.ul-oth-detail li {
 padding : 10px 0px 0;       
}

/*.ul-oth-detail span {
    float: right;
    padding-right: 53px;
    padding-top: 26px;

}*/     


.ul-oth-detail img {        
   position: relative;
}
/*.text-oth-news {
    float: right;   
    height: 64px;
    width: 170px;
      margin-top: -70px;
}
.text-oth-news p {
  text-align: left;
  padding-left: 12px;
}*/

.text-oth-news {
    width: 100%;
    height: 100px;
    line-height: 100px;
    padding-left: 10px;
    overflow:hidden;
}
.text-oth-news a,.text-oth-news:hover{color:#000 !important}
.img-oth-news img{
   max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.video-detail-news {
    margin-left:0;
}
.video-wrapper {
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
}

.video-wrapper .video-container {
    position: relative;
    padding-bottom: 48.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-wrapper .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-oth-news span {
    display: inline-block;
    vertical-align: middle;
    line-height: 17px;
    font-family: "ArialRoundedMT_Bold";
} 

.title-list label{
   padding:6px 40px 2px; 
   font-weight:normal;
   font-family: "ArialRoundedMT_Bold";
}

.toko { 
    /*width: 75%;*/
}  
.kontak-toko {
    margin-left: auto;
    margin-top : 30px;
}
.width-auto {
    width : auto;
}
/*Pop Up Detail Toko*/

#Detail-Toko .boxitem {
    padding: 10px 30px 30px;
}
#Detail-Toko .boxitem .wrp-form button{
    position: absolute;
    bottom: 0;
    right: 0;
    background: #0079c2;
    color: #fff;
    border: 0;
    padding: 6px 24px;
    border-radius: 4px;
    font-size: 16px;
}
.ul-btn-simpan {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    margin-top: 20px;
}    

.ul-btn-simpan li{
    display : inline-block

}
.custom-dropdown {
    padding : 0px 0px;
} 
.ul-main-form {
    padding : 10px 0px;
}
.ul-main-form li{
    list-style : none;
    padding-bottom: 35px;
} 
.width-custom {
    width : 25%;
    padding : 0px;
}
.dropdown.open .caret {
    border-top : 0px;
    border-bottom : 3px solid #0079c2;
}
.custom-edit {
    padding : 10px 0px;
}

.other-picture {
position : relative;
padding-left : 10px;
}

.ul-dropdown {
   text-align: left;
    list-style: none;
    margin-left: -110px;
}

    .ul-dropdown li {
   display: inline-block;
    padding: 0px 6px;
    margin-top: 10px;
    font-size: 16px;
    }

.city {
    font-size: 43px;
}

.photo-inprofile {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin: auto;
    overflow: hidden;
}
.custom-padding {
    padding: 0px;
}

.custom-position {
        margin-left: 111px;
    width: 90px;
    margin-top: 14px;
}

.ul-main-form.checkDocument,.ul-main-form.checkPack {
    padding : 0 0 10px 0;
    display : none;
}
.ul-main-form.checkDocument li,.ul-main-form.checkPack li{
    list-style : none;
    padding-bottom: 35px;
    text-align:left;
}
.checkbox-center {
    margin-left: 180px;
}

.btn-masuk {
    width : 100%;
}
.inboxlist {
    height: 100%;
    border-right: 1px solid #7D7D7D;
    overflow-y: auto;
}

.messege-list {
    border-bottom:0 solid #ccc;
}

.margin-custom {
    margin-top : 6px;
}
.kepada {
    width: 150px;
    display: block;
    float: left;
    padding-left: 36px;
    padding-top: 10px;
}
.pd-15 {
    padding-top:15px;
}

.border-new {
       border-bottom: 1px solid;
    width: 50%;
}
.create-message {
     margin-left: 20px;
}
.text-to {
    margin-top: 10px;
}
.text-subject {
    margin-top: 10px;
    width: 50%;
}
.text-area-message {
    width: 24%;
    margin-top: 10px;
    margin-left: 164px;
}
  .custom-width {
        width : 100%;
    }

.title {
      /*padding: 12px 53px;*/
}

.img-oth-news {
    height:100px;
    width: 100%;
    border: 1px solid #ccc;
}

.border-Message {
    position : relative;
    Border-left: 1px solid #ccc; /*Border-left*/ 
    min-height: 450px;
    max-height: 450px;
    margin-top: 10px;
}
/*.border-Message .ul-create-message { 
    overflow-y:auto;    
    min-height: 450px;
    max-height: 450px;
}*/

.ul-create-message {
    text-align: left;
    list-style: none;
 
}

.ul-create-message li {
     display: block;
         padding-bottom: 16px;
             position: relative;
    }

.ul-create-message label {
     width : 50px;
    }

#Message {
    width : 100%;
    height : 100%;
}

.span-style {
    position: absolute;
    display: block;
    width: 100%;
    padding: 10px 15px;
    bottom: 0;
    border-bottom: 1px solid #ccc;
    color: #0079c2;
    cursor: pointer;
}

.ul-message-inbox {
    list-style: none;
    POSITION: relative;
    width: 100%;
    padding: 6px 8px;
    margin-left: -21px;
}

.ul-message-inbox li {
    border-bottom: 1px solid #ccc;
    width: 100%;
    padding: 2px 4px;
}
.BeforeRead {
font-weight :bold;
}
.Read {
    color: silver;
    font-weight :normal; 
}
 

.birth-date {
        margin-left: -40px;
}

.ul-6picture {
    width: 350px;
}

.ul-6picture li { 
    padding: 0px 10px;
}
input[type="file"] {
  display: block;
}
.imageThumb {
    max-height: 75px;
    border: 1px solid #ccc;
    cursor: pointer;
    width: 50px;
}

.detail-gambar {
    display: inline-block;
    width:50px;
}
.gambar {
    position:relative;
    width: 50px;
    display: inline-block;
    margin: 0;     
    margin-top: 14px;
    margin-right: 15px;
}

.gambar.forListImg {
    position:relative;
    width: 350px;
    display: inline-block;
    margin: 0;     
    margin-top: 20px; 
}

.gambar:hover .remove{
     display:block;
}
.gambar .areaClick,.gambar.forListImg .detail-gambar{
    width: 50px;
    height: 35px;
    overflow: hidden;
}
.gambar .areaClick img,.gambar.forListImg .detail-gambar  img{
    max-width:100%;
    max-height:100%;
    min-width:100%;
    min-height:100%;
    object-fit:cover;
}
.pip {
  display: inline-block;
  padding-right: 10px;
}
.remove {
    color: red;
    text-align: center;
    cursor: pointer; 
    background: #fff;
    font-size: 11px;
    border: 1px solid red;
    position: absolute;
    top: -10px;
    right: -12px;
    padding: 0 5px;
    border-radius: 50%;
    display:none;
}
.remove:hover {
  background: white;
  color: black;
}

.myImg { 
    padding-bottom: 10px;
}

.deskripsi-news {
    padding-left: 0;
    width: 100%;
    font-size: 15px !important;
    text-align: inherit !important;
    font-family: "ArialRoundedMT" !important;
}
.deskripsi-news p,.deskripsi-news span{ 
    font-size: 15px !important;
    text-align: inherit !important;
    font-family: "ArialRoundedMT" !important;
    color:#333 !important
}
.hidden {
    display:none;
}
 

.photo-inprofile img {
    max-width: 100%;
    min-width: 100%;
    max-height: 100%;
    min-height: 100%;
    object-fit: cover;
}

@media (max-width:991px) {
    .other-picture {
        position: relative;
        padding-left: 0px;
        width:100%;
    }

    .text-sub-title {
         margin-top: 0px;
    margin-left: 0px;
    padding-bottom: 11%;
    color: black;
    font-size: 16px;
    width: 100%;
    position: relative;
    padding-right: 0px;
    padding-left: 7%;
}

    .terwaralaba-title h1 span {
        display: none;
        line-height: 0px;
    }
     
    .text-title-headline {
     margin-top: 0px;
    margin-left: 0px;
    color: black;
    font-size: 16px;
    width: 100%;
    position: absolute;
    }

   .picture-2 {
    width: 100%;
    height: 32%;
    padding-left: 0px;
    margin-left: 0px;
    border : 1px solid;
}
    .wrp-login .wrp-rightside .def-btn button {
        min-width: 120px;
        height: 36px;
        text-transform: inherit;
        width: 100%;
    }
      .cs-section {
    text-align: right;
    line-height: 15px;
    font-size: 12px;
    margin-top: 0px;
    padding-top: 20px; 
}
   

   
    .terwaralaba-title h1 {
   display : none;
}

    .ul-date-detail-news {
        list-style: none;
        text-align: left;
        padding-left: 0px;
    }
    .img-detail-news {
    margin-left: 0px;
    position: relative;
    width: 100% !important;
    height: 50%;
}
    .deskripsi-news {
    margin-left: 0px;
    width: 100%;
}
    .text-oth-news {
        float: right;
        text-align: left;
        height: 64px;
        width: 170px;
        margin-top: -70px;
    }

    .ul-oth-detail {
        display: none;
    }

    .hidden-mobile {
        display: none;
    } 
    .custom2 {
        float: left;
        width: 28%;
        height: 107%;
    } 
    .ul-dropdown {
        text-align: left;
        list-style: none;
        margin-left: 0px;
    }
.margin-1 {
    margin-left: 0px;
    width : 100%;
}
    .Width-btnsimpan {
        height: auto;
        margin-left: 0;
        text-align: right;
        margin-top: 2px;
        width: 100%;
        border-top: 2px solid;
        border-color: #0079C2;
    }
    .ul-btn-simpan {
        float: none;
        list-style: none;
        margin-top: 0;
    }
    .title-list {
        border-bottom: 3px solid;
        border-color: ##162944;
    }
    .photo-inprofile {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        /* text-align: center; */
        margin: auto !important;
        margin-left: 0;
    }
    .ul-main-form li {
    list-style: none;
    padding-bottom: 5%;
}

    .Mobile-backgorund {
        background: #337ab7;    
    }
    .m-burger-menu {
        position: absolute;
        top: 0;
        z-index: 3;
        left: 0;
        padding: 17px 16px 15px;
        overflow: hidden;
    }
    .m-burger-menu div.one {
    transform: rotate(0);
    top: 0;
    transition: .5s all ease-in-out;
    }
    .m-burger-menu div.two {
    transform: rotate(0);
    top: 0;
    transition: .5s all ease-in-out;
    }
    .m-burger-menu div.three {
    transform: rotate(0);
    top: 0;
    transition: .5s all ease-in-out;
    }
    .desktop-xs {
    display: block !important;
} 
    .floatR {
    float: left;
    min-width: 96%;
}

    .mobile-padding {
        padding-bottom: 54px;
    }

    .ul-berita {
    list-style: none;
    text-align: left;
    padding-left: 0px;
    padding-right: 1px;
    padding-top: 10px;
}  

}





/* Additionanl Alguan */

.mb10{margin-bottom:10px !important;}
.mt10{margin-top:10px !important;}
/* Normal UL LI */
.nopadding{padding:0 !important}
ul.nolisted{padding:0;margin:0;}
ul.nolisted li{list-style-type: none;padding: 2px 0;}

.logo{float:left} 
.wrp-contactStore a{cursor:pointer}
.wrp-contactStore label{font-size: 22px; margin-top: 10px; margin-right: 10px; margin-left: 5px;} 
.wrp-contactStore h3{margin-bottom:0}
.wrp-contactStore .each-grid{padding:0}    
.wrp-each-store{padding:0}
.wrp-each-store .box-item{border:1px solid #ccc;margin:0 5px 10px }
.wrp-each-store .box-item .ul-laporan{padding: 0 0 15px; border-right: 1px solid #ccc; min-height: 153px;}
.wrp-each-store .box-item .custom2:last-child .ul-laporan{border-right: 1px solid transparent;}
.wrp-each-store .box-item .ul-laporan span{display:block; text-align:left; border: 1px solid #ccc; border-left: 0; border-right: 0; font-family: "ArialRoundedMT_Bold"; padding: 5px; margin-bottom: 4px;}
/*.wrp-each-store .box-item .ul-laporan span:last-child{color:#0079c2; text-decoration:underline;    margin-top: 30px;}*/
.wrp-each-store .box-item .ul-laporan a{color:#0079c2 !important;text-decoration:none; padding: 2px 0px; display: block; border-bottom: 1px solid #ccc; margin-right: 15px;}
.wrp-each-store .box-item .noReport{line-height: 15px; text-align: center; margin-top: 50px; font-size: 12px;}
.wrp-each-store .box-item .ul-laporan div div{margin-bottom:4px;background:url(../image/icon_download.png) left 1px no-repeat; padding: 4px 0 4px 24px; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;    font-size: 12px; }
.wrp-each-store .box-item .ul-laporan .taxReport-item{margin-left: 5px;}
.wrp-each-store .box-item .toko{padding: 0 10px;} 
.wrp-each-store .box-item .toko h4{font-size:16px} 
.wrp-each-store .box-item .toko .address{height: 32px; overflow: hidden;line-height: 16px;text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical;  display: -webkit-box;} 
.wrp-each-store .box-item .toko .detailStore{margin-top:14px;margin-bottom: 10px; font-size: 12px; position: absolute; top: 0; right: 15px;} 
.wrp-each-store .box-item .toko .detailStore a{padding:0; text-decoration:underline;cursor:pointer} 
/*.wrp-each-store .box-item .custom2 {padding:0 10px;}*/
.wrp-contactStore .modal-dialog{ width:400px;}
.wrp-contactStore .modal-content{padding:15px 20px;border:0}
.wrp-contactStore .modal-content li{padding:0} 
.wrp-contactStore .modal-content:before, 
.wrp-contactStore .modal-content:after{background:transparent}
.wrp-contactStore .modal-content label{margin:0;font-size:16px;margin-bottom: 5px;}
.wrp-contactStore .modal-content .allReport{margin-top:20px;}
.wrp-contactStore .modal-content .allReport label{font-size:14px;}
.wrp-contactStore .modal-content .allReport ul li a{display:block; border-bottom:1px solid #ccc; font-size: 13px; padding: 3px 3px 3px 20px;background: url(../image/icon_downloadPopup.png) left 1px no-repeat;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrp-contactStore .modal-content .allReport ul li a:hover{background:#fcfcfc  url(../image/icon_downloadPopup.png) left 1px no-repeat;}
.wrp-contactStore .modal-content .wrp-btn{text-align:center; margin-top:20px;}
.wrp-contactStore .modal-content .wrp-btn button{background: #0079c2;color: #fff;border: 0;padding: 6px 30px 4px;}

.ul-dropdown .dropdown-menu.custom-dropdown li { display: block;margin-top: 0; padding: 0;}  
.ul-dropdown .dropdown-menu.custom-dropdown li a{ padding: 4px 10px;color: #0079c2!important;}
.wrp-menu-nav ul { display: inline-block;  width: 100%; height: 84px; line-height: 84px;}
.wrp-menu-nav ul li{display: inline-block;  width: 32.333%; text-align: center; font-family: "ArialRoundedMT_Bold";  font-size: 16px;  vertical-align: middle;  line-height: normal;}
.wrp-menu-nav ul li a:hover,
.wrp-menu-nav ul li a{color:#0079c2 !important}
.wrp-menu-nav ul li.username{position:relative}
.wrp-menu-nav ul li.username span:first-child{display:block;padding: 10px 50px 10px 0px !important; text-overflow: ellipsis !important; overflow: hidden !important; white-space: nowrap !important;background: url('../image/icon.png') right 6px no-repeat; cursor:pointer; text-align:right; position:relative; color: #0079c2;background-size:30px;}
.wrp-menu-nav ul li.username .caret{position:absolute;top:50%; right:36px; color:#0079c2}
.wrp-menu-nav ul li.username ul{ position: absolute;background: #f9f9f9; text-align: left; display: block;z-index: 9;border: 1px solid #cccccc; height:inherit;min-width: 150px;right: 0;top: 40px;}
.wrp-menu-nav ul li.username ul li{display:block; width:inherit; text-align:left; padding:0}
.wrp-menu-nav ul li.username ul li a{display:block; width:inherit; text-align:left; padding:5px 10px; font-size:14px;}
.wrp-menu-nav ul li.username ul li a:hover{color:#ffffff !important; background:#0079c2}
.wrp-menu-nav ul li.username .wrp-user-dropdown{display:none}
.wrp-innerContent{padding:0 30px;padding-top:20px !important;} 
.wrp-message .wrp-innerContent{ padding-top:0 !important;} 
.wrp-innerContent .headline{padding: 15px 0;}
.wrp-innerContent .Tulis_baru{color:#0079c2; cursor:pointer}
.wrp-innerContent .messege-list button{margin:0 -5px 0 0 !important;border-bottom: 0 !important;background: #fff;border: 1px solid #7f7f7f;padding: 4px 15px 4px;font-family: "ArialRoundedMT_Bold";}
.wrp-innerContent .messege-list button:hover{color:#fff; background:#7f7f7f}
.wrp-innerContent .ul-message-inbox{padding:0;color:#7f7f7f;max-height: 450px;overflow-y: auto;margin-top:10px;}
.wrp-innerContent .ul-message-inbox li.active{background:#fafafa}
.wrp-message h3{font-size:20px;margin-top:0}
.wrp-innerContent .ul-message-inbox a{cursor:pointer; font-weight:normal; font-family: "ArialRoundedMT"; display:block;padding:10px;}
.wrp-innerContent .ul-message-inbox a:hover{background:#fafafa}
.wrp-innerContent .ul-message-inbox li {padding: 0 ;}
.wrp-innerContent .ul-message-inbox li.new p {font-family: "ArialRoundedMT_Bold"; color: #000;}
.msgDate{font-size:10px;}
.Navigation .msgDate{font-size:12px;}
.detailmesssage{font-family: "ArialRoundedMT_Bold";color:#7f7f7f !important}
.detailmesssage p{margin:2px}
.detailmesssage .msgUser{color:#000;font-size: 15px;}
.wrp-profile .title{border-bottom:2px solid #0079c2}
.ul-btn-simpan button{border: 0;padding: 6px 50px 6px;}
.wrp-profile  .title-list {border-bottom:0px solid #0079c2}
.title-list {border-bottom:2px solid #162944}
.sectionTop{border-bottom:2px solid #7f7f7f}
.error-msg,#err-forgot-password{color: red; font-size: 11px !important; font-style: italic;}
.error-msg,#err-forgot-Username{color: red; font-size: 11px !important; font-style: italic;}
#success-forgot-password{color: #109e0b; font-size: 11px !important;  }
#success-forgot-Username{color: #109e0b; font-size: 11px !important;  }
.wrp-changePassword .error-msg{margin-left:37%}
.beforeLog li{display:inline-block}
.headline-beforeLog{font-size:16px;}
.wrp-login .def-btn{margin-bottom:0}
.oth-news-tag {padding: 6px 40px;}
.wrp-news-homepage{margin-top:20px;}
.wrp-footer{font-size: 12px; text-align: center; padding: 10px; color: #ccc;}
.nopaddingR{padding-right:0 !important;}
.wrp-formProfile .each-field label,
.wrp-formProfile .each-field .forField{float:left}
.wrp-formProfile .each-field label {width:170px; padding-top: 10px;}
.wrp-formProfile .each-field .forField  {width:77%}
label sup {color: red !important; vertical-align: 0;}
.wrp-formProfile .each-field .leftside,
.wrp-formProfile .each-field .rightside{width:50%; float:left} 
.wrp-formProfile .each-field .rightside label{padding-left:15px;} 
.wrp-formProfile .each-field .leftside .forField,
.wrp-formProfile .each-field .rightside .forField{width:54%; }
.wrp-formProfile .each-field.forDate .rightside label{width:28px; }
.wrp-formProfile .each-field.forDate .rightside .forField{width:91%; }
.wrp-formProfile .each-field.forDate .rightside .forField select{width:32%; float:left; margin-left:1% }
.wrp-formProfile .each-field.forDate .rightside .forField select#DateOfBirthDay{width:20%;}
.wrp-formProfile .each-field.forDate .rightside .forField select#DateOfBirthMonth{width:40.5%;}
.wrp-formProfile .each-field.forDate .rightside .forField select#DateOfBirthYear{width:32%;}

.wrp-formProfile .each-field.forAddress .leftside{width:78.5%; float:left} 
.wrp-formProfile .each-field.forAddress .rightside{width:20%; float:left} 
.wrp-formProfile .each-field.forAddress .leftside .forField{width:68%; }
.wrp-formProfile .each-field.forAddress .rightside label{width:65px; }
.wrp-formProfile .each-field.forAddress .rightside .forField{width:54%; }
/*-------------- Radio Button ---------------*/
.wrp-formProfile ul.cust-radio {padding: 0; list-style-type: none;margin:0;}
.wrp-formProfile ul.cust-radio img {height: 25px; margin-left: 10px;}
.wrp-formProfile ul.cust-radio li{float: left;width: 13%;position: relative;}
.wrp-formProfile ul.cust-radio li.khc{float: left;width: 24%;position: relative;} 
.wrp-formProfile ul.cust-radio > li > ul{list-style-type: none;padding-left: 33px;font-size: 13px;}
.wrp-formProfile ul.cust-radio > li.bank-transfer > ul {list-style-type: disc;padding-left: 50px;}
.wrp-formProfile ul.cust-radio li input[type=radio]{position: absolute;visibility: hidden;}
.wrp-formProfile ul.cust-radio li label { display: block;position: relative;font-weight: 300; padding: 5px 0 1px 25px; margin: 0;  z-index: 9;cursor: pointer; -webkit-transition: all 0.25s linear;}
.wrp-formProfile ul.cust-radio li:hover label{color: #555;}
.wrp-formProfile ul.cust-radio li .check{display: block; position: absolute; border: 2px solid #ccc; border-radius: 100%; height: 20px; width: 20px; top:4px; left: 0; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear;}
.wrp-formProfile ul.cust-radio li:hover .check {border: 2px solid #b3b1b1;}
.wrp-formProfile ul.cust-radio li .check::before {display: block;position: absolute;  content: '';border-radius: 100%;height:10px;width: 10px;top: 3px;  left: 3px;margin: auto; transition: background 0.25s linear;  -webkit-transition: background 0.25s linear;}
.wrp-formProfile ul.cust-radio input[type=radio]:checked ~ .check { border: 2px solid #0079c2;}
.wrp-formProfile ul.cust-radio input[type=radio]:checked ~ .check::before{ background: #0079c2;}
.wrp-formProfile ul.cust-radio input[type=radio]:checked ~ label{color: #000;}
.wrp-formProfile ul.cust-radio li.konghucu { transform:translateX(-15px);width:17%; }
.wrp-formProfile ul.cust-radio li .islam  {width: 66px; }
/*-------------- Checkbox ---------------*/
 
[type="checkbox"]:not(:checked),[type="checkbox"]:checked {position: absolute;left: -9999px;}
[type="checkbox"]:not(:checked) + label,[type="checkbox"]:checked + label {position: relative;padding-left: 25px;cursor: pointer;    padding-top: 1px;}
[type="checkbox"]:not(:checked) + label:before,[type="checkbox"]:checked + label:before {content: ''; position: absolute;left:0; top: 2px;width: 17px; height: 17px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.3)}
[type="checkbox"]:not(:checked) + label:after,[type="checkbox"]:checked + label:after { content: '✔'; position: absolute; top: 3px; left: 4px; font-size: 18px; line-height: 0.8; color: #0079c2; transition: all .2s;}
[type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0);}
[type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1);}
[type="checkbox"]:disabled:not(:checked) + label:before,[type="checkbox"]:disabled:checked + label:before { box-shadow: none; border-color: #bbb; background-color: #ddd;}
[type="checkbox"]:disabled:checked + label:after { color: #999;}
[type="checkbox"]:disabled + label {color: #aaa;}
[type="checkbox"]:checked:focus + label:before,[type="checkbox"]:not(:checked):focus + label:before { border: 1px dotted blue;}
label:hover:before {  border: 1px solid #4778d9!important;}

.leftCheck{margin-left:170px;margin-bottom: 5px;}
.leftCheck label{font-weight:normal}
.tagline{font-size:16px;font-family: "ArialRoundedMT_Bold"; }
.blueClr{color:#0079c2}
.addPhoto-profil{visibility:hidden}
.uploadPhoto{background: #0079c2; color: #fff; padding: 6px 24px; display: block; max-width: 135px; text-align: center; margin: auto; margin-top: -10px;cursor:pointer;font-family: "ArialRoundedMT_Bold"; margin-bottom: 20px;}
.each-field select {border-radius: 0; position: relative; -webkit-appearance: none; -moz-appearance: none; background: url(../image/bg_select.jpg) right center no-repeat; padding: 3px 34px 3px 5px; background-size: 32px;}
.ul-main-form.checkDocument{margin-bottom:20px;}
.wrp-changePassword .box-item{width:400px; margin:auto; padding-left:0; padding-right:0; padding-top:50px;}  
.wrp-changePassword .box-item .item label{float:left;width:40%;padding-top: 8px;}
.wrp-changePassword .box-item .item input{float:left;width:60%}
.wrp-changePassword .box-item .item .each-field{margin-bottom:10px;}
.wrp-changePassword .box-item .item .wrp-btn{text-align:right; margin-top: 30px;}
.wrp-changePassword .box-item .item .wrp-btn button{border:1px solid #ccc; background:transparent; padding: 6px 20px 4px;}
.wrp-changePassword .box-item .item .wrp-btn button.btn-reset{color:#ccc}
.wrp-changePassword .box-item .item .wrp-btn button.btn-simpan{background:#0079c2;color:#fff;padding: 6px 24px 4px; }
.wrp-faq .each-faq{margin-bottom:15px;}
.wrp-faq .each-faq label{float:left;width:30px; font-weight:normal}
.wrp-faq .each-faq .txt{float:left; width:90%}
.wrp-message .tabing.active{background:#7f7f7f; color:#fff}
.wrp-message .tabing,
.wrp-message .tabing:focus{outline:none}
.wrp-message .msgFrom{padding-left:20px; margin-bottom:0;}
.wrp-message .msgFrom label{width:50px !important;}
.wrp-message .Navigation{text-align: right; margin-bottom: 20px;}
.wrp-message .Navigation .fa-long-arrow-right{font-size: 20px; vertical-align: middle;}
.wrp-message .msg-innerContent{max-height: 325px;overflow-y: overlay; padding: 0 40px 0 0;}
.wrp-message .brdr-btm{border-bottom:1px solid #ccc;padding-bottom: 10px;margin-bottom: 30px;}
/*.wrp-message .ul-create-message{margin-top:30px;}*/
.wrp-message .ul-create-message label{width:90px;} 
.wrp-message .ul-create-message .msgTo input{display: inline-block; width: 200px;}
.wrp-message .ul-create-message input{display: inline-block;width: 86.7%;}
#form-Reply #Btn-Send,
#form-Create #Btn-Send{border: 0;padding: 6px 15px;}
    
/* Popup Universal */
.popupUniversal .modal-dialog{max-width:600px !important; min-width:300px !important;width: initial;}
.modal .modal-content:before,
.modal .modal-content:after{ background:none}
.modal .modal-content{border:0;}

.loader > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.loader .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
  background-color: #dc0814;
  left: -45px;
}

.loader .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
    background-color: #0079c2;
}


.loader .bounce3 { 
        background-color: #fdc600;
        left: 45px;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.popupSucceedSend .modal-dialog{max-width:300px;}
.popupSucceedSend .modal-content{padding:10px;}
.popupSucceedSend .modal-content .desc img{width:60px;}
#forgetPassword .list-border-idm {display:none}

@media (max-width:991px) {
    .wrp-login-header > .container { margin-top: 0 !important;}
    #site-header {height: 56px;border-bottom: 1px solid #ccc;position: fixed; width: 100%; top: 0; left: 0; z-index: 999; background: #fff;}
    .m-burger-menu div { position: relative; width: 25px; height: 3px; background: #ccc; margin-bottom: 5px;}
    .m-burger-menu {position: absolute;top: 0;z-index: 3;left: 0;padding:21px 16px 11px;overflow: hidden;}
    #site-header .m-burger-menu div.one {transform: rotate(0); top: 0; transition:.5s all ease-in-out;}
    #site-header .m-burger-menu div.two {right: 0; transition:.5s all ease-in-out;}
    #site-header .m-burger-menu div.three {transform: rotate(0);top: 0;  transition:.5s all ease-in-out;}
    #site-header .m-burger-menu.active div.one {transform: rotate(45deg);top: 6px;transition:.5s all ease-in-out;}
    #site-header .m-burger-menu.active div.two {right: -99999px;transition:.5s all ease-in-out;}
    #site-header .m-burger-menu.active div.three { transform: rotate(-45deg); top: -10px; transition:.5s all ease-in-out;} 
    .wrp-menu-nav.forMobile ul li,.wrp-menu-nav ul li.username span:first-child { display: block; width:100%; text-align:left;}
    .wrp-menu-nav.forMobile ul li.username span:first-child{background:none}
    .wrp-menu-nav.forMobile{position: fixed;background: #fff;z-index: 999;width: 100%;height: 100%;top: 0; left: -1000px; max-width: 300px;    overflow: auto;transition:all 1s ease-in-out}   
    .wrp-menu-nav.forMobile.active{left:0; transition:all 0.5s ease-in-out}   
    .m-nav-overlay{display:none;position: fixed; top: 0;left: 0;z-index: 3; background: #000; max-width: 100%;opacity: 0.7; width: 100%;height: 100%;transition: .5s all ease-in-out; overflow-y: scroll;}
    .m-nav-overlay.active{display: block;}
    .wrp-menu-nav.forMobile .username{color: #fff; padding: 20px !important; font-family: "ArialRoundedMT_Bold"; background: #0079c2 url(../image/icon.png) 11px 13px no-repeat; padding-right: 45px !important; padding-left: 50px !important; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;display:none;background-size: 30px;}     
    .wrp-menu-nav.forMobile ul li{font-family: "ArialRoundedMT";font-size: 14px;}
    .wrp-menu-nav.forMobile ul li.logout{text-align:center;border-bottom:1px solid #ccc; border-top:1px solid #ccc;margin-top: 30px; /*position: fixed; max-width: 300px; bottom: 0; left: 0;*/}
    .wrp-menu-nav.forMobile ul li.logout a{ color:#ccc !important; }
    .wrp-menu-nav.forMobile ul { height: inherit; }
    .wrp-menu-nav ul li a { color: #333 !important;padding: 11px 16px !important; display: block;}
    .wrp-menu-nav ul li.close-slideNav {position: absolute !important; top: -3px;right: 0; color: #fff; font-family: "ArialRoundedMT_Bold" !important; font-size: 22px !important; padding:17px 15px !important; cursor: pointer;    width: 42px !important;}
    .logo.forMobile img{width: 100px;height: auto;position: absolute;left: 56px;margin: 0;top: 16px;}
    .logo.forMobile span{width: 100px;height: auto;position: absolute; left: 165px; margin: 0; top: 16px;line-height: 16px;font-family: "ArialRoundedMT_Bold"}
    
    #site-content {margin-top: 56px;}
    #site-content.wrp-newsDetail > .container > .row{margin:0;}
    .title-list label {padding: 10px 40px 8px; width: 100%;text-align: center; }
    .title-news {font-size: 15px; }
    .ul-berita li { padding: 5px 16px;}
    .other-news {background: #fcfcfc;}
    .date-news {font-size: 11px; }
    .picture-2{display:none}
    .picture-1 {height:auto;border: 0;}
    .picture-1 img{object-fit:contain}
    .picture-1 .bg-newsOverlay {background: none;height: auto;position: relative;left: 0;bottom: 0;width: 100%;-webkit-box-shadow:none; -moz-box-shadow: none;  box-shadow: none; color: #fff; padding: 15px; background: #000;}
    .picture-1 .bg-newsOverlay h1 {font-size: 22px; margin-bottom: 15px; min-height: inherit; max-height: inherit; overflow: inherit; margin-top: 0;}
    .wrp-news-homepage { margin-top: 0;}
    .title-detail-news h4 {font-size: 18px;    margin-bottom: 6px }
    .title-detail-news .date-news { margin-bottom: 10px }
    .deskripsi-news p, .deskripsi-news span { font-size: 14px !important;}
    .wrp-each-store .box-item .toko {float:left; width:70%}
    .wrp-each-store .box-item .custom2{float:left;width:50%}
    .wrp-contactStore label {font-size: 18px; }
    .wrp-each-store .box-item .toko h4 { font-size: 15px;}
    .wrp-each-store .box-item .toko .detailStore{margin: 0;}
    .wrp-innerContent {padding: 0 15px; padding-top: 10px !important; }
    .wrp-profile .wrp-innerContent .col-md-9,
    .wrp-profile .wrp-innerContent .col-md-12{padding:0}
    .wrp-formProfile .each-field .leftside .forField, .wrp-formProfile .each-field .rightside .forField,
    .wrp-formProfile .each-field .forField,
    .wrp-formProfile .each-field.forAddress .leftside .forField,
    .wrp-formProfile .each-field.forAddress .rightside .forField,
    .wrp-formProfile .each-field .leftside, .wrp-formProfile .each-field .rightside,
    .wrp-formProfile .each-field.forDate .rightside .forField { width: 100%;}
    .wrp-formProfile .each-field .rightside label{padding-left:0}
    .wrp-profile .each-field { margin-bottom: 0px;}
    .wrp-formProfile .each-field.forDate .rightside label {display: none;}
    .wrp-formProfile .each-field.forDate .rightside .forField select {margin-left: 0;}
    .wrp-formProfile .each-field.forDate .rightside .forField select#DateOfBirthDay {width: 21%;}
    .wrp-formProfile .each-field.forDate .rightside .forField select#DateOfBirthMonth {width: 47%;}
    .wrp-formProfile .each-field.forDate .rightside .forField select#DateOfBirthYear {width: 32%;}
    .wrp-formProfile .each-field.forDate .rightside .forField{margin-top:20px}
    .wrp-formProfile ul.cust-radio li {width: 100%;}
    .wrp-formProfile .each-field label,.wrp-formProfile ul.cust-radio li.khc,
    .wrp-formProfile .each-field.forAddress .leftside {width: 100%; }
    .wrp-formProfile ul.cust-radio li.konghucu{transform: translateX(0); width: 100%;}
    .wrp-formProfile .each-field.forAddress .rightside {width: 100%;float: left;}
    .leftCheck { margin-left: 0;}
    .wrp-login {padding:15px;}
    .wrp-login-header .logo{width: 100% !important;display: block  !important;text-align: center !important;}
    .wrp-login-header .logo img{width:100px;margin-bottom: 0 !important;margin-top: 6px;}
    .wrp-login > .container .row{margin:0 !important}
    .label-lupapassword { width: 100%; margin-top:4px;}
    .wrp-login .floatR { margin-bottom: 20px; width: 100%; float: none; max-width: 450px !important; min-width: initial; margin: auto;}
    
}

@media (min-width:992px) and (max-width:1200px) {
    .terwaralaba-title h1 span{font-size:30px}
    .wrp-each-store .box-item .custom2 .ul-laporan{font-size:12px;}
    .wrp-formProfile .each-field .leftside .forField, .wrp-formProfile .each-field .rightside .forField {width: 45%;}
    .wrp-formProfile .each-field .forField {width: 72%;}
    .wrp-formProfile .each-field.forAddress .leftside .forField {width: 65%;}
    .wrp-formProfile .each-field.forAddress .rightside .forField { width: 47%;}
    .wrp-each-store .box-item .custom2 { padding: 0 6px;}
    .each-field .err-msg {top: initial;right: initial;font-size: 11px;left: 0; bottom: -18px;}
}

@media (min-width:768px) and (max-width:991px) {
    .wrp-sectionHead .leftside,
    .wrp-sectionHead .rightside{float:left; width:50%}
    .wrp-sectionHead .rightside{text-align:right}
    .wrp-contentMsg .leftside{float:left; width:30%}
    .wrp-contentMsg .rightside{float:left; width:70%}
    .wrp-message .ul-create-message input {width: 79.7%;}
    .wrp-contentMsg .leftside .shortMsg{text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
}


@media (min-width:320px) and (max-width:767px) { 
    .wrp-sectionHead .leftside{float:left; width:60%}
    .wrp-sectionHead .rightside{float:left; width:40%; padding-right:0}
    .wrp-sectionHead .rightside{text-align:right}
    .wrp-innerContent .ul-message-inbox,.wrp-contentMsg{margin:0 !important}
    .wrp-contentMsg p{margin:0 !Important}
    .wrp-contentMsg .leftside .msgDate{font-size:10px;}
    .wrp-contentMsg .leftside .shortMsg{font-size:12px;}
    .wrp-innerContent .ul-message-inbox li {padding: 5px 0;}
    .border-Message{border:0; padding: 0;}
    .wrp-message .ul-create-message .msgTo input,.wrp-message .ul-create-message input { width: 100%;}
    .wrp-contentMsg .leftside{padding-right:0}
    .wrp-message h3 {font-size: 16px;}
    .wrp-message .msgFrom { margin-bottom: 12px;}
    .wrp-message .Navigation {  margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px;font-size: 12px;}
    .wrp-message .msgFrom {padding-left: 0; margin-bottom: 12px; font-size: 13px;}
    .msgDate {font-size: 10px;}
    .wrp-message .brdr-btm {margin-bottom: 20px;}
    .wrp-message .ul-create-message label {width: 100%; font-size: 12px;}
    #forgetPassword .boxitem { padding: 0;}
    #forgetPassword .boxitem h2 {font-size: 20px;}
}

@media (min-width:320px) and (max-width:480px) { 
    .wrp-each-store .box-item .toko {float:none; width:100%;border-right:0;position:relative; padding-bottom:5px;}
    .wrp-each-store .box-item .toko:before {content:'';position:absolute;bottom:0; left:0; background:#ccc; width:98%; height:1px; left:50%; transform:translateX(-50%)    }
    .wrp-each-store .box-item .custom2{float:none;width:100%; padding: 0;}    
    .wrp-each-store .box-item .custom2 .ul-laporan{font-size:12px; border: 0;}
    .wrp-each-store .box-item .custom2 .ul-laporan span{font-family: "ArialRoundedMT_Bold"}
    .wrp-each-store .box-item .ul-laporan li{float:left; width:33%;background: none; text-align: center; padding: 4px;}
    .wrp-faq .each-faq .txt { float: left; width: 88%;}
    .wrp-changePassword .box-item{padding:20px;}
    .wrp-changePassword .box-item,.wrp-changePassword .box-item .item input,.wrp-changePassword .box-item .item label{width:100%}
    .wrp-changePassword .box-item .item .wrp-btn button{float:left; width:50%}
    .tagline {font-size: 14px;}     
    .popupDownload .modal-dialog {width: 100% !important; margin:0} 
    .wrp-each-store .box-item .noReport { margin-top: 10px; margin-bottom: 10px;}
    .wrp-each-store .box-item .ul-laporan div{margin-left: 4px;}
}

.wrp-login-header > .container{margin-top:30px;}
.popupDownload .modal-dialog{width:400px;} 
.popupDownload .modal-content { padding: 20px;}
.popupDownload .modal-dialog .boxitem ul label {font-size:15px;}
.popupDownload .modal-dialog .boxitem ul > li {margin-bottom:10px;}
.popupDownload .modal-dialog .boxitem ul > li span{font-family: "ArialRoundedMT_Bold"}
.popupDownload .modal-dialog .boxitem ul .list-download {padding-left:0;}
/*.popupDownload .modal-dialog .boxitem ul .list-download li{margin-bottom: 0px;background: url(../image/icon_download.png) left 1px no-repeat; padding: 4px 10px 4px 24px;}*/
.popupDownload .modal-dialog .boxitem ul .list-download li{margin-bottom: 0px;  padding: 3px 24px 3px 0; border-bottom:1px solid #ccc;background: url(../image/icon_download.png) right 1px no-repeat}
.popupDownload .modal-dialog .boxitem ul .list-download li {color:#0079c2; cursor:pointer;}
.popupDownload .modal-dialog .boxitem ul .list-download li:hover { background:#fcfcfc url(../image/icon_download.png) right 1px no-repeat}
button.close {position: absolute;right: 0;top: 0;padding:4px 10px;font-size: 15px;outline:none}
.addPhoto-img a{cursor:pointer}

.SetKodeArea{
/*margin-left: -15px;*/
}

.SetTextBox {
/*margin-left: -30px;
width : 137px;*/
}

#errorPage #site-header{border-bottom: 1px solid #0079C2; position: relative;}
#errorPage .logo{text-align: center;}
#errorPage .logo-wrapper, #errorPage .logo.forMobile {padding-top: 10px; float: none;  margin: auto;}
#errorPage .logo.forMobile  img, #errorPage .logo.forMobile  span  {position: relative; left: auto; top: 0; display: inline-block; text-align: left; vertical-align: top;}

.error-body img{display: block; max-width: 200px; margin: 20px auto;}

@media (max-width: 991px){
    .error-body h2 {font-size: 14px;}
}

#panel-form-forget-password{display: none; padding-top: 20px;}
.each-field .fa{position: absolute; right: 10px; bottom: 10px; color: #8f8f8f; cursor: pointer;}

.choose-method{padding: 10px 0;}
.choose-method label{margin-right: 30px; vertical-align: text-bottom; cursor: pointer;}