/* HERE ARE DS LGI CUSTOM CSS  */
/* GENERAL ELEMENT */
/*=========================================== tami ===================================================*/
.product-interest .box-form input[type=text], .product-interest .box-form input[type=email]{
  width: 100% !important;
  padding: 0 15px !important;
  height: 40px !important;
  font-size: 14px !important;
}

.tami-maskot{
  width:30%;
  float:left;
  margin-right:20px;
}

.tami-maskot-wording{
  float:left;
  margin:4% 10px 10px 10px;
}

.tami-maskot-wording h3{
  color:#525252;
  font-size:28px;
  padding:10px;
}

.tami-maskot-wording-sub{
  background:#e92024;
  margin-right: 20%;
  border-radius: 15px;
  padding: 10px 10px 1px 10px;
  font-size: 27px;
  line-height: 0px;
  color:white;
}



.ds-button-tami-product a{
   width:70px;
   height:30px;
   border:3px solid #ea2027;
   font-size:12px;
   font-weight:bold;
   color:white;
   background: #ea2027;
   line-height: 33px;
   text-align:center;
   display:block;
   border-radius:30px;
   -webkit-border-radius:30px;
   -moz-border-radius:30px;
   -ms-border-radius:30px;
   -o-border-radius:30px;
   text-transform:uppercase;
}

.ds-button-maskot a{
  height: 24px;
  border:3px solid #ea2027;
  font-size:28px;
  font-weight:600;
  color:white;
  background: #ea2027;
  line-height: 46px;
  text-align:center;
  display:block;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -ms-border-radius:30px;
  -o-border-radius:30px;
  margin-top: 5px;
  padding:5px;
}

.ds-button-maskot a:hover{
  border:3px solid #ea2027;
  color: #ea2027;
  background: white;
}

.ds-tag{
  text-align: center;
  font-weight:600;
}

.ds-tag h3{
  color:#ea2027;
}

.ds-tag p{
  font-size: 15px;
}

.ds-button-tami-product a:hover{
  border:3px solid #ea2027;
  color: #ea2027;
  background: white;
}

.ds-button-tami-fase-1 input{
   width:200px;
   height:50px;
   border:3px solid white;
   font-size:14px;
   font-weight:bold;
   color:white;
   background: #ea2027;
   line-height: 28px;
   text-align:center;
   display:block;
   border-radius:30px;
   -webkit-border-radius:30px;
   -moz-border-radius:30px;
   -ms-border-radius:30px;
   -o-border-radius:30px;
   text-transform:uppercase;
}

.ds-button-tami-special a{
   width:425px;
   height:33px;
   border:3px solid white;
   font-size:14px;
   font-weight:bold;
   color:white;
   background: #ea2027;
   line-height: 36px;
   text-align:center;
   display:inline-block;
   border-radius:30px;
   -webkit-border-radius:30px;
   -moz-border-radius:30px;
   -ms-border-radius:30px;
   -o-border-radius:30px;
   text-transform:uppercase;
}

.ds-button-tami-special a:hover , .ds-button-tami-fase-1 input:hover, .ds-button-tami-2 a:hover{
  border:3px solid #ea2027;
  color:#ea2027;
  background: white;
}

/* Slideshow container */
.tami-2 .slideshow-container {
  position: relative;
  background: white;
}

/* Slides */
.tami-2 .mySlides {
  display: none;
  padding: 5px;
  text-align: center;
}

.ds-button-tami-2 a{
   width:165px;
   height:27px;
   border:3px solid white;
   font-size:14px;
   font-weight:bold;
   color:white;
   background: #ea2027;
   line-height: 28px;
   text-align:center;
   display:inline-block;
   border-radius:30px;
   -webkit-border-radius:30px;
   -moz-border-radius:30px;
   -ms-border-radius:30px;
   -o-border-radius:30px;
   text-transform:uppercase;
}

.tami-select{
  display: inline-flex;
  height: 30px;
  width: 425px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 30px;
  padding: 20px 15px;
}

.tami-select .option{
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 10px;
  border-radius: 30px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}

.tami-select .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}

.tami-select .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #ea2027;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}

input[type="radio"]{
  display: none;
}

#option-2a:checked:checked ~ .option-2a,
#option-2b:checked:checked ~ .option-2b{
  border-color: #ea2027;
  background: #ea2027;
}

#option-3a:checked:checked ~ .option-3a,
#option-3b:checked:checked ~ .option-3b{
  border-color: #ea2027;
  background: #ea2027;
}

#option-4a:checked:checked ~ .option-4a,
#option-4b:checked:checked ~ .option-4b{
  border-color: #ea2027;
  background: #ea2027;
}

#option-5a:checked:checked ~ .option-5a,
#option-5b:checked:checked ~ .option-5b{
  border-color: #ea2027;
  background: #ea2027;
}

#option-2a:checked:checked ~ .option-2a span,
#option-2b:checked:checked ~ .option-2b span{
  color: #fff;
}

#option-3a:checked:checked ~ .option-3a span,
#option-3b:checked:checked ~ .option-3b span{
  color: #fff;
}

#option-4a:checked:checked ~ .option-4a span,
#option-4b:checked:checked ~ .option-4b span{
  color: #fff;
}

#option-5a:checked:checked ~ .option-5a span,
#option-5b:checked:checked ~ .option-5b span{
  color: #fff;
}

.tami-select .option span{
  font-size: 16px;
  color: #808080;
}

.notification {
  text-decoration: none;
  position: relative;
}

.notification .badge {
  position: absolute;
  top: -50px;
  right: -40px;
  padding: 11px 4px;
  border-radius: 50%;
  background: #ea2027;
  border: 5px solid #ea2027;
  color: white;
}

.ds-article-list p{
  color: #666;
  font-weight:40px;
}

.ds-article-list p:hover, .ds-article-list li:hover{
  color: #ec1e24;
}

.ds-article-list li {
    font-size: 20px;
    list-style-type: circle;
    /* display:inline; */
}

.ds-tami-fase-1-result li {
    list-style-type: circle;
    /* display:inline; */
}
/*=========================================== tami ===================================================*/
/*=========================================== body ===================================================*/
body{
  background: white;
  /* background: #fce62e; */
}

header{
  background: white !important;
}

footer .middle{
  background: white !important;
}

.home img{
  margin-left:10px;
}

.alert-ds-popup{
text-align: center;
}

.modal-content .box-form .row {
margin : 0 0 20px !important;
}

.modal-content .ds-button input{
  width : 220px !important;
}

.transaction .box-form .row{
  text-align: left;
}

.health-card-centered {
   position: absolute;
   top: 56%;
   left: 37%;
   transform: translate(-50%, -50%);
 }

 .health-card-text{
   color: white !important;
   font-size: 24px !important;
   text-align : left;
 }

 .ds-wrapper-new{
   width : auto;
   position : relative;
   margin : 0 auto;
 }

  #buttonHover
  {
    color: black;
    width: auto; /* SET COLOR IN WHITE */
  }

  #buttonHover:hover
  {
    background-color: black;
    color: white; /* SET COLOR IN BLACK */
  }

  .Row
  {
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
  }

  .Column2
  {
    display: table-cell; /*Optional*/
  }
  .Column
  {
    display: table-cell; /*Optional*/
  }
  .scrollx{
    overflow-x: scroll;
  }


/*=====================================================================================================*/
/*=========================================== swal ===================================================*/
.swal-button {
  background-color: #efefef !important;
  color:#333 !important;
}
.swal-button:hover {
  background-color: #333 !important;
  color:#efefef !important;
}

.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    right: -2px;
    width: 35px;
    background: red;
}
.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 50%;
}
/*=====================================================================================================*/
/*=========================================== swal ===================================================*/
header h2{
  font-size: 16px;
  font-weight: 700;
}
.swal-button {
  background-color: #efefef !important;
  color:#333 !important;
}
.swal-button:hover {
  background-color: #333 !important;
  color:#efefef !important;
}

.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    right: -2px;
    width: 35px;
    background: red;
}
.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 50%;
}
/*=====================================================================================================*/

/*=========================================== footer ===================================================*/
footer .middle h4:hover {
  color:#ec1e24;
}

footer .ds-footer-margin{
  padding-left: 60px;
  padding-right: 50px;
}

footer .ds-footer-margin .address{
  font-size:15px;
  font-weight:800;
  color:#666;
  padding: 30px 20px;
  max-width: 25%;
}

footer .ds-footer-margin .ojk{
  padding: 20px;
}

footer .middle .left .ds-footer a{
  float:left;
  width:220px;
  padding:0px;
  position:relative;
  font-size:14px;
  color:#666;
  margin:0px;
}
footer .middle .left .ds-footer a:before{
  position:absolute;
  display:block;
  /* content:""; */
  width:4px;
  height:4px;
  /* border:2px solid #CCC; */
  top:3px;
  left:0;
}
footer .middle .left .ds-footer a:hover{
  color:#ca262d;
}

/* .ds-image-center-footer {
  margin-left: -100px;
  width:117% !important;
} */
/*======================================================================================================*/

/*=========================================== slider ===================================================*/
#new-slide{
	width:100%;
	}

.mySlides {
	display: none;
}

.mySlides img{
  max-width:100%;
  margin-left:20px;
}

.slideshow-container {
	position: relative;
}

.ds-article{
  width:32%;
  float: left;
  padding-left:10px;
}

.ds-article p{
	font-size: 16px;
  text-align:center;
  padding: 5px;
  color: #333;
}

.article-title h3{
    font-size: 30px;
    color:#ec1e24;
    font-weight: bold;
    margin: 10px 0 30px;
    text-align: center;
}

/* Next & previous buttons */
.ds-prev, .ds-next {
	cursor: pointer;
	position: absolute;
	width: auto;
	margin-top: 100px;
	color: #333;
	font-size: 30px;
	transition: 0.6s ease;
	border-radius: 10px;
}
/* Position the "next button" to the right */
.ds-next {
	right: 0;
	border-radius: 10px;
}
/* On hover, add a black background color with a little bit see-through */
.ds-prev:hover, .ds-next:hover {
	color: #666;
}
/* Caption text */
/* .ds-text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
} */

/* The dots/bullets/indicators */
.ds-dot{
  text-align:center;
  width: 63%;
}

.dot {
	cursor: pointer;
	height: 10px;
	width: 10px;
  margin-top:3px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.dot:hover, .ds-dot .active {
	background-color: #333;
}
/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 2s;
	animation-name: fade;
	animation-duration: 2s;
}

.slide {
    background: white;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}
/*================================================================================================*/

/*=========================================== button ===================================================*/
.ds-cari{
  margin-top: 12px !important;
}

.ds-button input:hover, .ds-button a:hover, .ds-button-2 input:hover, .ds-button-3 input:hover, .ds-button-4 input:hover, td .ds-button:hover, .ds-button-inner .ds-button:hover{
  background:#333;
  color:#FFF!important;
}

td .ds-button-cart:hover{
background: #fce62e;
}

.ds-button input{
  width:184px;
  height:54px;
  border:3px solid #333;
  font-size:14px;
  font-weight:600;
  color:#333;
  background: #efeff1;
  text-align:center;
  display:block;
  margin:0 auto;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -ms-border-radius:30px;
  -o-border-radius:30px;
  text-transform:uppercase;
}

.ds-button-2 input{
  width:184px;
  height:54px;
  border:3px solid #333;
  font-size:14px;
  font-weight:600;
  color:#333;
  background: #efeff1;
  text-align:center;
  margin:0 auto;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -ms-border-radius:30px;
  -o-border-radius:30px;
  text-transform:uppercase;
}

.ds-button-3 input{
  width:184px;
  height:54px;
  border:3px solid #333;
  font-size:14px;
  font-weight:600;
  color:#333;
  background: #efeff1;
  text-align:center;
  display:block;
  margin:10px auto;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -ms-border-radius:30px;
  -o-border-radius:30px;
  text-transform:uppercase;
}

.ds-button-4 input{
  width:184px;
  height:54px;
  font-size:14px;
  font-weight:600;
  color:#fefefe;
  background: #ec1e24;
  text-align:center;
  display:block;
  margin:10px auto;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -ms-border-radius:30px;
  -o-border-radius:30px;
  text-transform:uppercase;
}

.ds-button a{
  width:190px;
  height:46px;
  border:3px solid #333;
  font-size:14px;
  font-weight:600;
  color:#333;
  background: #efeff1;
  line-height: 46px;
  text-align:center;
  display:block;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -ms-border-radius:30px;
  -o-border-radius:30px;
  text-transform:uppercase;
  margin: 10px 0 0 30px;
}

.ds-button-inner .ds-button{
  width:190px;
  height:46px;
  border:3px solid #333;
  font-size:14px;
  font-weight:600;
  color:#333;
  background: #efeff1;
  line-height: 46px;
  text-align:center;
  display:block;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -ms-border-radius:30px;
  -o-border-radius:30px;
  text-transform:uppercase;
  margin: 10px 0 0 30px;
  float:left;
  left:40%;
  position: relative;
}

td .ds-button {
  width:105px;
  height:28px;
  border:3px solid #333;
  font-size:12.5px;
  font-weight:600;
  color:#333;
  background: #efeff1;
  line-height: 28px;
  text-align:center;
  display:block;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -ms-border-radius:30px;
  -o-border-radius:30px;
  text-transform:uppercase;
  /* margin: 10px 0 0 30px; */
}

td .ds-button-cart {
  width:100px;
  height:54px;
  font-size:12.5px;
  font-weight:600;
  color:#fff;
  background: #ec1e24;
  line-height: 28px;
  text-align:center;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -ms-border-radius:30px;
  -o-border-radius:30px;
  text-transform:uppercase;
  /* margin: 10px 0 0 30px; */
}
/*================================================================================================*/

/*==================================image and banner =============================================*/
/* ::selection {
  background: #ec1e24;
}
::-moz-selection {
  background: #ec1e24;
} */

/* select option ,select option:hover,select option:active ,select option:focus,select option:visited, ,select option:focus-within{
  background-color: #ec1e24;
  color: #333;
}

option:checked ,select option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
    background-color: #333;
} */

header .left a img{
  height: 45px;
  margin-bottom: -1px !important;
}
header .right a img{
 height: 45px;
}
.wrapper .banner{
  margin-top:5px;
  overflow: hidden;
}

.ds-banner-product img{
  width: 1170px;
  border-radius:10px;
}

.ds-menu{
  margin-left:40px !important;
  margin-right:-20px !important;
}

.line-white .wrapper{
border-top: 3px solid white;
border-radius:2px;
margin: 20px auto;
}

.ds-image-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius:5px;
  width:1170px;
}

.ds-image-center .ds-copy-right img {
  width: 25%;
}

.wapper .ds-copy-right{
  text-align: center;
}
.ds-menu-member {
  position: relative;
  text-align: center;
}

.ds-centered {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ds-centered p{
  color:white;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}

.ds-centered p:hover{
  color:#333;
}

.ds-nav-dashboard{
  margin:60px 0 100px;
  text-align:center
}

.ds-benefits{
  margin:50px 0 60px;
  text-align:center
}

.ds-benefits img{
  margin: 10px;
}

.ds-nav-dashboard a{
  display:inline-block;
  width: 152px;
  height: 184px;
  margin:0 20px;
}

/* .ds-box{
  border-bottom: 1px solid #ec1e24;
  line-height: 10px;
} */

.ds-box:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 40%;
    float:left;
    border-bottom: 1px solid #ec1e24;
}

.ds-image-nav {
    /* position: relative; */
}
.ds-image-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -10;
}
/*================================================================================================*/

/*======================================ds-custom new==================================================*/
.ds-claim {
  margin-right:150px !important;
  margin-left:150px !important;
}

.ds-claim-2 {
  /* margin-right:300px !important;
  margin-left:300px !important; */
}

.ds-health-card {
  margin-top:20px;
}
/*================================================================================================*/

/*======================================ds-custom==================================================*/
.table-product-title{color:#ca262d;font-size:20px;}
.table-product-list li{
  font-size: 14px;
  color: black;
  margin-left: 12px;
}
.transaction .box-form .nopolice input[type=text] {padding-left: 36.5px;}
#police_number-error{font-size: 14px;z-index: 1;}
.currency:before{content:"Rp"!important}
.alert-affinity{
  background: #efeff1;
  border: 1px solid #666;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  /* box-shadow: 2.5px 2.5px #c3c1c1; */
}
/* .potongan-evoucher td:last-child:before{content:"eVoucher"!important}
.potongan-discount td:last-child:before{content:"Diskon"!important} */
.mycart{border-collapse: unset!important}
.accessories_more_btn{margin-bottom: 60px !important;}
.transaction .mycart tbody .promocode input[type=password] {
    font-size: 16px;
    height: 50px;
    width: 280px;
    padding: 0 10px;
}
.eyeRemovedPass{position:relative;}
.eyeRemovedPass span{
  position: absolute;
  top: 13px;
  left: 10px;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}
.promotion_code{text-indent:30px}
.alert-ref-code{
  background: #bf2b32;
  border: 1px solid #c12c34;
  font-size: 17px;
  color: #fdfbfb;
  padding: 5px;
  padding-left: 55px;
  border-radius: 0;
}
.obla_slider {
  background: url(../images/material/loader.gif) center no-repeat;
}
.ds-transaction-box{
  padding: 0px;
}
.paywithOvoMessage{display:none}

.col-1{
  width: 100%;
}

.ds-hyperlink{
  color: #2495ce;
}
  .ds-hyperlink:hover{
    opacity: 0.8;
  }

.title-red{
  color:#c8353b;
}

.title-blue{
  color:#2674a3;
}

.transaction .opt a.info{
  border-bottom: none;
  margin: -3px 0 -1px 8px;
  position: relative;
  bottom: -2px;
  left: 0;
  top: 2.5px;
}

.ds-info-static{
  position: static !important;
}

.ds-info-custom{
  top:0 !important;
  right:0 !important;
  left:100px !important;
}

.select2-container{
  width: 100% !important;/*SET DEFAULT WIDTH OF select2 IS 100%*/
}

.addAcc{
  margin:0px 150px 0px 0px !important;/* BUTTON ADD, REMOVE ACCESORIES CAR*/
}

.removeAcc{
  margin:0px 100px 0px 0px !important;/* BUTTON ADD, REMOVE ACCESORIES CAR*/
}

/* COLUMN SIZE AT SUMMARY / MY DATA PAGE */
.summary .ds-form-box .row.c3 .col {
    width: 32%;/*DEFAULT SIZE*/
}
.summary .ds-form-box .row.c4 .col {
    width: 23.5%;/*DEFAULT SIZE*/
}
.summary .ds-form-box .row.c5 .col {
    width: 16.8%;/*DEFAULT SIZE*/
}
  .col25 {
      width: 25% !important;
  }
.summary .ds-form-box .row.c6 .col {
    width: 14%;/*DEFAULT SIZE*/
}
  .col20 {
      width: 20% !important;
  }
/* END OF COLUMN SIZE AT SUMMARY / MY DATA PAGE */
.mendatory{
  color: red;
}

.forgotPasswordBtn{
  float: right !important;
}

.transaction label .opt{
  margin-top: 10px;
}

.ds-opt-summary{
  font-size: 16px;
  line-height: 18px;
  position: relative;
  padding: 0 0px 0 30px !important;
  text-align: unset !important;
  margin: 0 !important
}

.transaction .box-form .nopolice #police_number-error{
    top: 45px;
    color: #fff
}

.identity_number{
  text-transform:uppercase;
}
/* END OF GENERAL ELEMENT */

/* CUSTOM HOME CSS */
.home .h-product .product .box {
    position: relative;
    float: left;
    /* margin:17px; */
    width: 25%;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: transform .2s;
    -moz-transition: transform .2s;
    -o-transition: transform .2s;
    transition: transform .2s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.home .h-product .product .boxsecond {
    position: relative;
    float: left;
    margin:17px;
    width: 30.4%;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: transform .2s;
    -moz-transition: transform .2s;
    -o-transition: transform .2s;
    transition: transform .2s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
  /* .home .h-product .product .box:nth-of-type(2) {
      width: 40%;
  }
    .home .h-product .product .box:nth-of-type(2) img{
      height: 400px;
    }
    .home .h-product .product .box .child_home_product{
      height: 200px;
    } */
  .home .h-product .product .box:hover {
    z-index: 5;
    box-shadow: 0 0 11px rgb(171, 172, 171);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform: translateZ(1.1);
    -moz-transform: translateZ(1.1);
    -o-transform: translateZ(1.1);
    transform: translateZ(1.1);
  }

  .home .h-product .product .boxsecond:hover {
    z-index: 5;
    box-shadow: 0 0 11px rgb(171, 172, 171);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform: translateZ(1.1);
    -moz-transform: translateZ(1.1);
    -o-transform: translateZ(1.1);
    transform: translateZ(1.1);
  }

.home .h-product .product .box .text {
    position: absolute;
    z-index: 2;
    top: unset;
    bottom: 0;
    left: 0;
    color: #FFF;
    height: 40%;
    width: 100%;
}

.home .h-product .product .boxsecond .text {
    position: absolute;
    z-index: 2;
    top: unset;
    bottom: 0;
    left: 0;
    color: #FFF;
    height: 40%;
    width: 100%;
}
.home .h-product .product .box .text .inner-text {
  transform: translate(0, 60%);
}
.home .h-product .product .boxsecond .text .inner-text {
  transform: translate(0, 60%);
}

.home .h-product .product .box .text .inner-text-long {
  transform: translate(0, 25%);
}
.home .h-product .product .boxsecond .text .inner-text-long {
  transform: translate(0, 25%);
}

.home .h-product .product .box .text h4 {
  font-size: 50px;
  line-height: unset;
  margin: 0;
}
.home .h-product .product .boxsecond .text h4 {
  font-size: 50px;
  line-height: unset;
  margin: 0;
}

.home .h-product .product .box .text h6 {
  line-height: unset;
  color: #fff;
}
.home .h-product .product .boxsecond .text h4 {
  font-size: 50px;
  line-height: unset;
  margin: 0;
}

.home .h-product .product .box .text p.h4ProductHome {
    line-height: 16px;
    font-size: 20px;
}
.home .h-product .product .boxsecond .text p.h4ProductHome {
    line-height: 16px;
    font-size: 20px;
}

.home .h-product .product .box .text p.h6ProductHome {
    line-height: 16px;
    font-size: 14px;
}
.home .h-product .product .boxsecond .text p.h6ProductHome {
    line-height: 16px;
    font-size: 14px;
}

/* END OF CUSTOM HOME CSS */

/* POPUP */
.ds-modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  display: none;
  /*opacity: 0;*/
  z-index: 1;
}
.ds-modal-overlay:target {
  visibility: visible;
  opacity: 1;
}

.ds-modal-popup {
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    min-width: 30%;
    max-width: fit-content;
    position: relative;
    transition: all 5s ease-in-out;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    max-height: 90%;
    overflow-y: auto;
}

.ds-modal-popup h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 25px;
}
.ds-modal-popup img{
  position: absolute;
  height: 50px;
  width: 187px;
  right: 10px;
  top: 0;
}
.ds-modal-popup .ds-modal-close {
    position: absolute !important;
    top: 1px !important;
    left: 10px !important;
    transition: all 200ms;
    font-size: 30px !important;
    font-weight: bold !important;
    text-decoration: none;
    color: #333 !important;
}
.ds-modal-popup .ds-modal-close:hover {
  color: #111;
}
.ds-modal-popup .ds-modal-content {
  font-size: 15px;
  font-weight: bold;
}

.ds-modal-button-group{
  display: inline-flex;
}

.ds-modal-button{
  margin: 10px;
  padding: 10px;
  background: #2495ce;
  min-width: 75px;
  border-radius: 5px;
}
  .ds-modal-button:hover{
    opacity: 0.8;
    cursor: pointer;
  }
  .ds-modal-button a{
    color: white;
    font-size: 15px;
    font-weight: bold;
  }

.ds-button-button-red{
  background: #c01617 !important;
  color: white;
  cursor: pointer;
}
  .ds-button-button-red:hover{
    opacity: 0.8;
  }

.ds-modal-button-general {
    padding: 10px;
    background: #2495ce;
    border-radius: 5px;
    color: white;
    font-size: 20px;
    width: 100%;
    cursor: pointer;
}
  .ds-modal-button-general:hover {
      opacity: 0.8;
  }

@media screen and (max-width: 700px){
  .ds-modal-popup{
    width: 70%;
  }
}
/* END OF POPUP */

/* GROUP INPUT BUTTON */
.ds-input-group{
  display: inline-flex;
}

.ds-input-group-text{
    width: 70%;
    font-size: 15px;
    border: 1px solid #757575;
}
.ds-input-group-button{
    width: 30%;
    font-size: 15px;
    font-weight: bold;
}
/* END OF GROUP INPUT BUTTON */

/* DS MATERIAL ICONS CUSTOM*/
.ds-material-icon{
    position: absolute;
    margin-top: -7px;
    font-size: 28px;
}
/* END OF DS MATERIAL ICONS CUSTOM*/

/* CSS FOR CART PAGE */
.choosesInsuranceButton, .memberProfileButton, .policyHolderInfoButton, .polisAddressButton, .insurancePurposeButton, .benefitProductBox{
  cursor: pointer;
}

.productTitle{
  margin:10px 0 0 0 !important;
}
/* END OF CSS FOR CART PAGE */

/* CSS FOR PRODUCT PAGE */
.MhdProductPageButton{
  cursor:pointer;
}

.packageProductBox, .benefitProductBox, .contentProductBox{
  display: none;
}

.packageProductBox h3{
  font-size: 18px !important;
  height: 30px !important;
  line-height: 30px !important;
  background: #ffffff !important;
  color: black !important;
  cursor: pointer;
}

.ds-material-icon-product{
  top: -25px !important;
  color: black;
  position: absolute;
}

.benefitProductBox h3{
  font-size: 12px !important;
  height: 30px !important;
  line-height: 30px !important;
  background: #ffffff !important;
  color: #999 !important;
}

.contentProductBox p, .contentProductBox strong{
  font-size: 14px;
  color: black;
  line-height: 20px;
  margin: 0;
}

.contentProductPrimaBox p, .contentProductPrimaBox strong{
font-size: 14px;
color: black;
line-height: 20px;
margin: 0;
}
/* END OF CSS FOR PRODUCT PAGE */

/* DS FORM UI */
.ds-form-box{
  width:auto !important;
  margin: 0 !important;
  font-size: 14px;
}

.ds-form-row{
  margin: 10px 0 0px !important;
}

.ds-form-col-full{
  width: 100%;
  margin: 0 !important;
  text-align: left;
}

.ds-form-col-left{
  width: 35%;
  margin: 0 !important;
  text-align: left;
}

.ds-form-col-right{
  width: 65%;
  float: right;
  margin: 0 !important;
}

.ds-form-single-input{
  border: none !important;
  border-bottom: 1px solid #c7c7c7 !important;
}
/* END OF DS FORM UI */

/* FORM REGISTER CSS */
#formRegister{
  width: auto;
  margin: 0;
}

#formRegister .c2 .col{
  width: 200px;
}

#formRegister .row{
  margin: 0;
}
/* END OF FORM REGISTER CSS */

/* DS WIZARD FORM */
.ds-wizard-form-second{
  display: none;
}

.ds-wizard-form-btn-next{
  margin-top: 10px !important;
  float: right;
}

.ds-wizard-form-btn-last{
  margin-top: 10px !important;
}
/* END OF DS WIZARD FORM */

/* CSS FOR CART MHD */
.ds-box-form{
  width:auto !important;
}

.ds-col-left{
  width: 62.5%;
  font-size: 15px;
}

.ds-col-right{
  width: 35%;
  font-size: 15px;
  float: right;
}

#sama_alamat_lengkap{
  height: 155px;
}

/*CUSTOM CSS FOR TOOLTIP*/
.ui-tooltip, .arrow:after {
  background: #ec1e24;
}
.ui-tooltip {
  padding: 10px 20px;
  color: white;
  font: 12px "Helvetica Neue", Sans-Serif;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: bold;
  border: none !important;
  z-index: 1 !important;
}
.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}
.arrow.top {
  top: -16px;
  bottom: auto;
}
.arrow.left {
  left: 80%;
}
.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  tranform: rotate(45deg);
}
.arrow.top:after {
  bottom: -20px;
  top: auto;
}
/*END OF CUSTOM CSS FOR TOOLTIP*/

/* LOADING ANIMATION */
.backGroundLoading{display:none;position:fixed;opacity:0.7;width:100%;height:100%;top:0;left:0;background-color:#fff;z-index:10000}
.backGroundLoading img{display:none;overflow:auto;top:50%;left:50%;transform:translate(-50%,-50%);position:fixed;z-index:10001}
.backGroundLoading span{display:none;color:black;font-size:15px;font-weight: bold;top:55%;left:50%;transform:translate(-50%,-50%);position:fixed;z-index:10001}
.backGroundLoadingSelectBox {
    background:url(../images/material/loader.gif) right center no-repeat !important;
    background-size: 25px 25px !important;
    background-position: 97% !important;
}
.backGroundLoading .ovoPaymentTitle{display:none;color:red;font-size:15px;font-weight: bold;top:50%;left:50%;transform:translate(-50%,-100%);position:fixed;z-index:10001}
.backGroundLoading .ovoPaymentContent{display:none;color:red;font-size:15px;font-weight: bold;top:50%;left:50%;transform:translate(-50%,25%);position:fixed;z-index:10001}
.backGroundLoading .timerCountdownLoading{display:none;color:white;font-size:25px;font-weight: bold;top:50%;left:50%;transform:translate(-50%,-150%);position:fixed;z-index:10001;border-radius: 5px;padding: 10px;}
/* END OF LOADING ANIMATION */

/* SUMMARY CART CSS */
/* .headerSummaryCart{
  width: 550px;
  cursor: pointer;
  border: none !important;
} */

.headerSummaryCart h3{
  line-height: 35px !important;
  height: 35px !important;
}

.headerSummaryCart a{
  top: 12px !important;
}

.summaryCartContent{
  display: none;
  font-size: 14px;
  line-height: 15px;
}
/* END OF SUMMARY CART CSS */

/* WEBARQ CSS CUSTOM */
.transaction .box-form .data-anggota .col:nth-child(1) {
    width: 185px
}

.transaction .box-form .data-anggota .col:nth-child(2) {
    width: 120px
}

.transaction .box-form .data-anggota .col:nth-child(3) {
    width: 160px
}

.transaction .box-form .data-anggota .col:nth-child(4) {
    width: 150px
}

.transaction .box-form .data-anggota .col:nth-child(5) {
    width: 120px
}

.transaction .box-form .data-anggota .col:nth-child(6) {
    width: 180px;
}
/* END OF WEBARQ CSS CUSTOM */

/* TABLE MY CART */
.table-my-cart{
  width: 100% !important;
}

.table-my-cart td{
  font-size: 14px !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
  .table-my-cart td:nth-child(1){
    width: 45% !important;
  }
  .table-my-cart td:nth-child(2){
    float: left;
    padding-right:5px !important;
  }
  .table-my-cart td:nth-child(3){
    float: left;
  }
/* END OF TABLE MY CART */

/* BUTTON ADD REMOVE PESERTA */
.transaction .box-form .add-more a {
  margin: 0px -77px 0px -100px !important;
}
.transaction .box-form .add-more a:nth-child(2) {
  margin: 0px -122px 0px 0px !important;
}
/*================================================================================================*/

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

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #efeff1;
  margin: auto;
  padding: 10px 10px 0px 10px;
  border: 1px solid #888;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  border-radius: 10px;
}

.popupLogin .modal-content {
  width: 40%;
}

.popupRegister .modal-content {
  width: 60%;
}

.popupOtp .modal-content {
  width: 40%;
}

.popupProfile .modal-content {
  width: 60%;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close-popup {
  color: black;
  float: right;
  font-size: 40px;
  padding-right :10px;
  font-weight: bold;
}

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

/* =========================The Modal (background)============================================ */

/* ===================================================================== */
                              /* MEDIA QUERY */
/* ===================================================================== */
@media screen and (min-width: 1300px){/*RESOLUSI SCREEN DIATAS L*/
  /*============================ new ds responsive =============================*/
  .ds-menu{
  /* margin-left:40px !important; */
  margin-right:-20px !important;
  }

  /* ========================================================================== */

  .kotak-kode-promo-mobile{
    display: none;
  }
  .kotak-kode-promo-desktop{
    display: block;
  }

  .tami-maskot-wording-sub {
    margin-right:34% !important;
  }

  .tami-maskot-wording {
    margin : 6% 10px 10px 10px;
  }


}

@media screen and (max-width: 1300px){/*RESOLUSI SCREEN DIBAWAH L*/

  /* tami */
  .ds-article img {
    height:165px !important;
  }

  .ds-prev, .ds-next {
    margin-top:65px !important;
    font-size: 26px !important;
  }

  .mySlides img{
    margin-left:10px !important;
  }

  /* fase 1 result */
  .tami-fase-1-box{
    width: 26% !important;
  }

  .tami-fase-1-outbox{
    margin-left:70px !important;
  }

  /* fase 2 result */
  .tami-fase-2-outbox {
    margin-left:34% !important;
  }

  .tami-fase-2-box {
    width: 28% !important;
  }

  /* tami home page */
  .tami-maskot{
    width:26%;
  }
  .tami-maskot-wording h3{
    font-size:26px;
  }
  .ds-button-maskot a{
    font-size:26px;
  }

  section.tami-page{
    width: 90% !important;
  }

  .tami-maskot-wording span{
    font-size:34px !important;
  }
  /* tami */

  /*============================ new ds responsive =============================*/
  .ds-menu{
  margin-left:20px !important;
  }

  .popupLogin .modal-content{
  width:50% !important;
  }

  footer .left {
  display : none;
  }

  footer .address {
  padding: 10px 20px !important;
  max-width: 35% !important;
  }

  footer .ojk {
  padding:0px !important;
  float:left !important;
  }

  header .right a img{
  max-height: 40px !important;
  }

  header .left .about{
  display:none !important;
  }

  /* ========================================================================== */

  .summary .box-form .row.c6 .col, .summary .box-form .row.c5 .col, .summary .box-form .row.c4 .col {
      width: 30%;
      margin-top: 5px;
  }

  .col20 {
      width: 30% !important;
  }
  .col25 {
      width: 30% !important;
  }

  .transaction .summary h3 {
    margin: 0 -55px 0px;
    margin-right: -21px;
    margin-left: -50px;
  }
  /*KOTAK KODE PROMO MYCART*/
  .kotak-kode-promo-mobile{
    display: none;
  }
  .kotak-kode-promo-desktop{
    display: block;
  }

  .ds-sosmed-facebook {
     height: 35px !important;
     width: 35px !important;
  }

  .ds-sosmed-instagram {
     left: 60% !important;
     height: 35px !important;
     width: 35px !important;
  }

}

@media screen and (max-width: 1024px){/*RESOLUSI SCREEN DIBAWAH L*/

  /*============================ new ds responsive =============================*/
  .dot {
    cursor: pointer;
    height: 8px !important;
    width: 8px !important;
    margin-top:2px !important;
  }

  .close-popup {
    color: black;
    float: right;
    font-size: 30px;
    padding-right :7px;
    font-weight: bold;
  }

  .popupLogin .modal-content{
  width:55% !important;
  }

  /* tami */
  /* fase 1 */
  .ds-tami-fase-1-result {
    font-size: 16px !important;
    line-height: 18px !important;
  }
  /* tami */

  header .right a img{
   /* max-height: 38px !important; */
  }

  /* ========================================================================== */

  .home .h-product .product .box .text .inner-text {
    transform: translate(0% ,20%);
  }
  .home .h-product .product .box .text .inner-text-long{transform:translate(0% ,20%);}
  .home .h-product .product .box:nth-of-type(2) img{
    height: unset;
  }
  .home .h-product .product .box .child_home_product{
    height: unset;
  }
  .transaction .summary {
    padding-left: 50px;
    padding-right: 20px;
  }

  .table-my-cart td:nth-child(2){
    padding-right:0px !important;
  }

  .transaction .mycart td:last-child{
    text-align:left !important;
  }

  .transaction .summary a{
    right: 65px !important;
  }
}

@media only screen and (min-width: 980px){/*RESOLUSI SCREEN DIBAWAH L*/

  /*============================ new ds responsive =============================*/
  .ds-menu{
  /* margin-left:40px !important; */
  margin-right:-20px !important;
  }
  /* .member-login{
    display:none !important;
  } */
  /* ========================================================================== */

  .headerSummaryCart{
    padding: 0 !important;
  }
  .headerSummaryCart h3{
    margin: 0!important;
  }
  .summaryCartContent{
    padding: 0 50px;
  }
}

@media only screen and (max-width: 980px) and (min-width: 0px){/*RESOLUSI SCREEN DIBAWAH L*/

  /* tami */
  /* home */
  .banner .slideshow-container img {
    border-radius:20px !important;
  }

  .article-title .article-tami h3{
    font-size: 25px !important;
  }

  .ds-article img {
    height:150px !important;
  }

  .ds-prev, .ds-next {
    margin-top:60px !important;
    font-size: 24px !important;
  }

  .mySlides img{
    margin-left:5px !important;
  }

  .tami-maskot-wording{
    margin:8% 1px 1px 1px !important;
  }

  .tami-maskot-wording h3{
    font-size:20px !important;
    padding:8px !important;
  }

  .tami-maskot-wording-sub{
    border-radius: 13px !important;
    font-size: 22px !important;
    margin-right: 16%;
  }

  .ds-button-maskot a{
    font-size: 16px !important;
  }

  /* fase 1 */
  .fase-1-maskot {
    width:30% !important;
    margin:20px !important;
  }

  .fase-1-form .row {
    margin:30px !important;
    font-size:14px !important;
  }

  .fase-1-form .col input, .fase-1-form .col select {
    font-size:12px !important;
  }

  /* fase 1 result */
  .tami-fase-1-box{
    width: 28% !important;
  }

  .tami-fase-1-outbox{
    margin-left:10px !important;
  }

  /* fase 2 result */
  .tami-fase-2-box .notification{
    font-size: 26px !important;
  }

  /* footer */
  .ds-sosmed-facebook {
     top: 69% !important;
     height: 30px !important;
     width: 30px !important;
  }

  .ds-sosmed-instagram {
     top: 69% !important;
     left: 60% !important;
     height: 30px !important;
     width: 30px !important;
  }


  /*============================ new ds responsive =============================*/
  .banner-content {
    width: 30% !important;
    margin: 7px !important;
  }

  .ds-menu{
  margin-left:15px !important;
  margin-right:-20px !important;
  }

  .popupLogin .modal-content{
  width:60% !important;
  }

  .new-menu{
    margin-right: 5px !important;
  }

  .member-login{
    display:none !important;
  }

  header .right .cc{
  float : left !important;
  margin : 0px !important;
  }

  .dot {
    cursor: pointer;
    height: 7px !important;
    width: 7px !important;
    margin-top:1px !important;
  }

  footer .ds-footer-margin {
  padding-left: 0px !important;
  padding-right: 0px !important;
  }

  footer .ds-footer-margin .left a{
  font-size: 11px !important;
  }

  footer .ds-footer-margin .right img{
    float:none !important;
    display:block;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  footer .address {
  font-size:12.5px !important;
  padding: 10px 20px !important;
  max-width: 35% !important;
  }

  footer .ojk {
  padding:0px !important;
  float:left !important;
  max-width: 55% !important;
  }

  .sub-nav .ds-button a{
    margin:10px 50px 0 0px !important;
  }

  /* header .right a.cart span{
    font-size: 11px !important;
    bottom: -1px !important;
    left: 26px !important;
  } */

  header .right a img, header .left a {
    margin:0px !important;
  }

  .banner .sub-nav .toggle-nav{
    border-bottom-right-radius: 10px;
  }
  .ds-banner-product img {
    border-bottom-right-radius: 0px !important;
  }
  .banner .sub-nav{
    height:68px !important;
    border-bottom-right-radius: 10px! important;
  }
  /* ========================================================================== */

  .transaction .summary {
    /*margin: 0 -20px 0px;*/
    margin-bottom: 0;
  }

  .transaction .summary{
    padding: 0 18px 0px !important;
  }

  .addAcc{
    margin:0px 50px 0px 0px !important;/* BUTTON ADD, REMOVE ACCESORIES CAR*/
  }

  .headerSummaryCart{
    width: 100%;
  }

  .transaction .summary a {
    right: 35px;
    top: 24px;
  }

  /* TABLE PRODUK */
  .std-content .table-responsive thead th {
    display: table-cell !important;
  }

  .std-content .table-responsive tbody td {
    display: table-cell !important;
  }

  .std-content .table-responsive.prod td:before{
    display: none !important;
  }

  /* CUSTOM HOME PRODUCT */
  .home .h-product .product .box {
    width: 33.33%;
  }
    .home .h-product .product .box:nth-of-type(2) {
        width: 33.33%;
    }

  .home .h-product .product .box .text {
    height: 100%;
  }

  .home .h-product .product .box .text .inner-text {
    transform: unset;
  }
  .home .h-product .product .box .text .inner-text-long{transform:unset;}

  .home .h-product .product .box .text h4 {
    font-size: 18px;
    line-height: unset;
    margin-top: 65%;
  }

  .home .h-product .product .box .text h6 {
    font-size: 18px;
    line-height: unset;
    margin-top: 65%;
  }

  .home .h-product .product .box .text p.h4ProductHome {
    line-height: 16px;
    font-size: 20px;
  }

  .home .h-product .product .box .text p.h6ProductHome {
      line-height: 16px;
      font-size: 14px;
  }
  /* end of CUSTOM HOME PRODUCT */

  /*KOTAK KODE PROMO MYCART*/
  .kotak-kode-promo-mobile{
    display: none;
  }
  .kotak-kode-promo-desktop{
    display: block;
  }

  .transaction .summary {
    border: none
  }
}

@media screen and (max-width: 768px){/*RESOLUSI SCREEN m KEBAWAH*/
  /* footer */
  .ds-sosmed-facebook {
     height: 21px !important;
     width: 21px !important;
  }

  .ds-sosmed-instagram {
     left: 60% !important;
     height: 21px !important;
     width: 21px !important;
  }

  /* tami home page */
  .tami-maskot{
    width:26%;
  }
  .tami-maskot-wording h3{
    font-size:26px;
  }
  .ds-button-maskot a{
    font-size:26px;
  }

  section.tami-page{
    width: 70% !important;
  }

  .tami-maskot-wording span{
    font-size:26px !important;
  }

  /* tami */
  .banner .slideshow-container img {
    border-radius:15px !important;
  }

  .banner-content {
    width: 30% !important;
    margin: 5px !important;
  }

  .ds-article {
    width: 30% !important;
  }

  .article-title .article-tami h3{
    font-size: 20px !important;
  }

  .ds-article img {
    height:120px !important;
  }

  .ds-prev, .ds-next {
    margin-top:60px !important;
    font-size: 24px !important;
  }

  .ds-article p {
    font-size: 12px !important;
  }

  .tami-maskot {
    margin-right: 5px !important;
  }

  .tami-maskot-wording h3{
    font-size:16px !important;
    padding:2px !important;
  }

  .tami-maskot-wording-sub span {
    font-size: 24px !important;
  }

  .tami-maskot-wording-sub{
    border-radius: 13px !important;
    font-size: 16px !important;
    margin-right: 35% !important;
    padding: 2px 7px !important;
  }

  .tami-maskot-wording-sub p{
    margin: 0px !important;
  }

  .ds-button-maskot a{
    font-size: 16px !important;
    height: 20px !important;
    padding: 0px !important;
    width: 76% !important;
  }

  .ds-tag h3{
    font-size: 16px !important;
  }

  .ds-tag p{
    font-size: 10px !important;
  }

  /* fase 1 */
  .fase-1-header-1{
    font-size: 24px !important;
  }

  .fase-1-header p{
    font-size: 8px !important;
  }

  .fase-1-maskot {
    width:30% !important;
    margin:5px !important;
  }

  .fase-1-form {
    width:60% !important;
  }

  .fase-1-form .row {
    margin:2px !important;
    font-size:10px !important;
  }

  .fase-1-form .col input, .fase-1-form .col select {
    font-size:8px !important;
  }

  .ds-button-tami-fase-1 input{
    width: 110px;
    height: 30px;
    border: 3px solid white;
    font-size: 12px;
    background: #ea2027;
    line-height: 5px;
  }

  /* fase 2 */
  .fase-2-header{
    font-size: 24px !important;
  }

  .fase-2-result-header{
    font-size: 20px !important;
  }

  .fase-2-result-header p{
    font-size: 14px !important;
    line-height: 15px !important;
  }

  .fase-2-result-header-1{
    font-size: 7px !important;
    line-height: 8px !important;
  }

  .fase-2-question label, .fase-2-question input, .fase-2-question select, .fase-2-question span{
    font-size: 12px !important;
  }

  .tami-select{
    width: 280px !important;
  }

  .ds-button-tami-2 a {
    width: 120px;
    height: 24px;
    border: 3px solid white;
    font-size: 10px;
    font-weight: bold;
    line-height: 25px;
  }

  /* tami fase 2 result */
  .tami-fase-2-outbox {
    margin-left:20% !important;
  }

  .tami-fase-2-box{
    width: 50% !important;
    margin-top: 20px !important;
  }

  .tami-fase-2-box .notification{
    font-size: 22px !important;
  }

  .tami-fase-2-box .badge{
    top: -44px !important;
  }

  /* tami */

  /*KOTAK KODE PROMO MYCART*/
  .popupLogin .modal-content{
  width:70% !important;
  }

  .close-popup {
    color: black;
    float: right;
    font-size: 28px;
    padding-right :4px;
    font-weight: bold;
  }

  .modal-content .ds-image-center img{
    display: none;
  }

  .transaction .mycart tbody .promocode input[type=text] {
    width: 60%;
    float: left;
  }

  .transaction .mycart tbody .promocode{
   float: none;
  }

  .transaction .mycart tbody .promocode input[type=button]{
    float: right;
  }

  /*============================ new ds responsive =============================*/
  .toggle-menu{
  padding-right:1px !important;
  /* margin-right:-20px !important; */
  }

  header .left a,header .right a, header .left a img{
  padding:1px !important;
  margin:1px !important;
  }

  header .left{
  float:none !important;
  }

  .left .new-menu, .left .logo-word{
  margin-top: 7px !important;
  }

 .left a{
  max-width: 34% !important;
  height: auto !important;
  }

  footer .ds-footer-margin .right{
    float:none !important;
  }

  footer .address {
  text-align:center !important;
  max-width: 35% !important;
  }

  footer .address img{
  max-width: 50% !important;
  }

  footer .ojk {
  padding:0px !important;
  float:left !important;
  max-width: 55% !important;
  }

  header .right .cart{
  float : right !important;
  }

  .sub-nav .ds-button a{
    margin:7px 50px 0 0px !important;
  }

  .type-2 .ds-button{
    display:none !important;
  }

  .ds-button input, .ds-button a, .ds-button-2 input, .ds-button-3 input, .ds-button-4 input,td .ds-button, .ds-button-inner .ds-button{
  width: 190px !important;
  margin:0px !important;
  margin:2px !important;
  height: 40px !important;
  /* line-height: 40px !important; */
  }

  .pernyataan .ds-button input{
    width: 160px !important;
    height: 46px !important;
    line-height: 24px !important;
  }

  .pernyataan .ds-button a{
    width: 160px !important;
    height: 40px !important;
    line-height: 40px !important;
  }

  .ds-nav-dashboard{
    margin:20px 0 20px !important;
  }

  .ds-nav-dashboard a{
    margin:0 5px;
  }

  .banner .sub-nav{
    height: 57px !important;
  }
  /* ========================================================================== */

  .kotak-kode-promo-mobile{
    display: none;
  }
  .kotak-kode-promo-desktop{
    display: block;
  }
  .transaction .summary {
    padding: 0 24px 0px !important;
    overflow:hidden;
    border: none
  }
    .summaryCartHeader h3 {
      width: 100%;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .summaryCartHeader a .ds-material-icon{
      margin-top: -8px;
    }
  .summaryCartContent {
    text-indent: 10px;
  }
  .table-my-cart tbody td:last-child:before{
    display: none !important
  }
  .table-my-cart tbody td:last-child:after{
    display: none !important
  }
  .table-my-cart td:after{
    display: none !important
  }
  .transaction .mycart tbody .desc-prod {
    width: 100%;
  }
  .table-my-cart td:nth-child(1) {
    width: 45% !important;
    float: left;
  }
  .table-my-cart td:nth-child(3) {
    width: 45% !important;
    /* float: right; */
  }

  .transaction .summary h3 {
    margin-left: -19px;
    margin-right: -19px;
    padding-left: 20px;
  }

  .summary a span{
    display: none;
  }

  .about img{
    display: none
  }

  .alert-ref-code{
    padding-left: 5px;
  }

  .backGroundLoading .ovoPaymentContent{
    transform:translate(-50%,25%);
  }

  .home .h-product .product .boxsecond img{
    width:70%;margin-top:0px;margin-left:40px
  }
  .health-card-text{
    font-size: 23px !important;
  }
  .ds-image-bottom {
    position: inherit;
    left: 0;
    bottom: 0;
    z-index: -10;
  }

}

@media screen and (max-width: 550px){
  /* footer */
  .ds-sosmed-facebook {
     top: 68% !important;
     height: 17px !important;
     width: 17px !important;
  }

  .ds-sosmed-instagram {
     top: 68% !important;
     left: 61% !important;
     height: 17px !important;
     width: 17px !important;
  }

  .tami-maskot-wording-sub {
    font-size: 11px !important;
    margin-right: 20% !important;
  }

  .tami-maskot-wording-sub span {
    font-size: 16px !important;
  }

  .tami-maskot-wording h3{
    font-size: 16px !important;
  }

  /* tami home page */
  .tami-maskot{
    width:26%;
  }

  .ds-button-maskot a{
    font-size: 16px !important;
  }

  section.tami-page{
    width: 100% !important;
  }

  .tami-maskot-wording span{
    font-size:18px !important;
  }


@media screen and (max-width: 425px){/*RESOLUSI SCREEN S KEBAWAH*/
  /* footer */
  .ds-sosmed-facebook {
     top: 68% !important;
     height: 14px !important;
     width: 14px !important;
     border: 0px solid #f8e326 !important;
  }

  .ds-sosmed-instagram {
     top: 68% !important;
     left: 61% !important;
     height: 14px !important;
     width: 14px !important;
     border: 0px solid #f8e326 !important;
  }

  /* tami */
  .banner .slideshow-container img {
    border-radius:10px !important;
  }

  .ds-article {
    width: 30% !important;
    padding-left: 7px !important;
  }

  .article-title .article-tami h3{
    font-size: 18px !important;
  }

  .ds-article img {
    height:90px !important;
  }

  .ds-prev, .ds-next {
    margin-top:42px !important;
    font-size: 16px !important;
  }

  .ds-article p {
    font-size: 10px !important;
  }

  .tami-maskot-wording h3 {
    font-size: 12px !important;
    padding: 5px !important;
  }

  .tami-maskot-wording-sub span {
    font-size: 16px !important;
  }

  .tami-maskot-wording p{
    line-height: 14px !important;
  }

  .tami-maskot-wording-sub {
    font-size: 10px !important;
    margin-right: 18% !important;
  }

  .tami-maskot-wording-sub {
    line-height: 12px !important;
  }

  .ds-button-maskot a {
    font-size: 9px !important;
    height: 15px!important;
    width: 40% !important;
  }

  .ds-article p, .ds-tag p {
    line-height: 10px !important;
  }

  .tami-maskot-wording {
    margin:2% 1px 1px 1px !important;
  }

  /* fase 1 */
  .fase-1-maskot img{
    display: none !important;
  }

  .fase-1-form {
    width:100% !important;
    margin:20px !important;
  }

  .ds-button-tami-fase-1 {
    width: 76% !important;
    float: right !important;
  }

  /* fase-1-result */
  .fase-1-result-banner img{
    margin-top : 50px;
  }

  .tami-fase-1-box{
    width: 60% !important;
    margin-bottom: 25px !important;
  }

  .tami-fase-1-box-1 {
    border-radius: 30px !important;
  }

  .tami-fase-1-outbox{
    margin-left:60px !important;
  }

  .fase-1-footer-1{
    font-size: 20px !important;
  }

  .ds-button-tami-special a{
    width: 300px;
    height: 30px;
    border: 3px solid white;
    font-size: 12px;
    line-height: 32px;
  }

  /* tami fase 2 result */
  .tami-fase-2-outbox {
    margin-left:20% !important;
  }

  .tami-fase-2-box{
    width: 50% !important;
    margin-top: 20px !important;
  }
  /* tami */

  /*============================ new ds responsive =============================*/
  .transaction .mycart tbody .promocode input[type=text] {
    width: 59%;
  }

  .health-card-text{
    font-size: 18px !important;
  }

  .dot {
    cursor: pointer;
    height: 5px !important;
    width: 5px !important;
  }

  header .left, header .right{
  float:none;
  }

  header .right .cc{
  max-width: 38% !important;
  float:right !important;
  }

  .right .cc img {
  padding-top: 7px;
  height: auto;
  }

  .left .logo-word{
  margin-top:4px !important;
  }

  .left .logo-word img{
  height: auto;
  }

  footer .address img{
  max-width: 50% !important;
  }

  .pernyataan .ds-button input{
    width: 140px !important;
    height: 46px !important;
    line-height: 24px !important;
  }

  .pernyataan .ds-button a{
    width: 140px !important;
    height: 40px !important;
    line-height: 40px !important;
  }

  .pernyataan .wrap-button .ds-button a{
    width: 180px !important;
    height: 40px !important;
    line-height: 40px !important;
  }
  /* .left span a img{
    display:none !important;
  } */
  /* ========================================================================== */


  .transaction .summary h3 {
      margin: 0 -19px 0px;
  }

  .wrapper .banner{
    border-radius: 10px;
    margin-top:5px;
  }

  /* CUSTOM HOME PRODUCT 1*/
  .home .h-product .product .box {
    width: 100%;
    height: 140px;
  }
  .home .h-product .product .box:nth-of-type(2) {
    width: 100%;
  }

  .home .h-product .product .box .text {
    height: 100%;
  }

  .home .h-product .product .box .text .inner-text {
    transform: translate(0, 225%);
  }
  .home .h-product .product .box .text .inner-text-long{transform:translate(0% ,225%);}

  .home .h-product .product .box .text h4 {
    font-size: 18px;
    line-height: unset;
    margin-top: unset;
  }

  .home .h-product .product .box .text h6 {
    font-size: 18px;
    line-height: unset;
    margin-top: unset;
  }

  .home .h-product .product .box .text p {
      display: none;
  }

  /* CUSTOM HOME PRODUCT 2*/
  .home .h-product .product .boxsecond {
    width: 100%;
    height: 115px;
  }
  .home .h-product .product .boxsecond:nth-of-type(2) {
    width: 100%;
  }

  .home .h-product .product .boxsecond .text {
    height: 100%;
  }

  .home .h-product .product .boxsecond .text .inner-text {
    transform: translate(0, 225%);
  }
  .home .h-product .product .boxsecond .text .inner-text-long  {
    transform:translate(0% ,225%);
  }

  .home .h-product .product .boxsecond .text h4 {
    font-size: 18px;
    line-height: unset;
    margin-top: unset;
  }

  .home .h-product .product .boxsecond .text h6 {
    font-size: 18px;
    line-height: unset;
    margin-top: unset;
  }

  .home .h-product .product .boxsecond .text p {
      display: none;
  }
  /* END OF CUSTOM HOME PRODUCT */

  .table-product-title {
    font-size: 13px;
  }

  /* BUTTON ADD REMOVE PESERTA */
  .transaction .box-form .add-more a {
    margin: -55px 20px 0px 0px !important;
  }
  .transaction .box-form .add-more a:nth-child(2) {
    margin: -55px -25px 0px 0px !important;
  }

  .list-prod > .box{
    width: 100% !important;
  }

  .result-benefit-summary {
    margin-left: -30px;
    margin-right: -30px;
  }

  .transaction .mycart tbody .promocode input[type=password] {
    font-size: 16px;
    height: 50px;
    max-width: 150px;
    padding: 0 10px;
  }

  .backGroundLoading .ovoPaymentContent {
    transform:translate(-50%,5%);
  }


  .transaction .mycart tbody .desc-prod {
    width: 102.5%
  }

}

@media screen and (max-width: 375px){/*RESOLUSI SCREEN S KEBAWAH*/
    /* footer */
    .ds-sosmed-facebook {
       top: 68% !important;
       height: 14px !important;
       width: 14px !important;
       border: 0px solid #f8e326 !important;
    }

    .ds-sosmed-instagram {
       top: 68% !important;
       left: 61% !important;
       height: 14px !important;
       width: 14px !important;
       border: 0px solid #f8e326 !important;
    }

    /* tami */
    .tami-maskot-wording h3 {
      font-size: 9px !important;
      padding: 5px !important;
    }

    .tami-maskot-wording-sub {
      margin-right: 14% !important;
    }

    .tami-maskot-wording-sub span {
      font-size: 14px !important;
    }

    .banner .slideshow-container img {
      border-radius:5px !important;
    }

    .ds-article img {
      height:80px !important;
    }

    .ds-prev, .ds-next {
      margin-top:35px !important;
      font-size: 12px !important;
    }

    .ds-article p {
      font-size: 8px !important;
    }

    .tami-maskot-wording-sub {
      font-size: 9px !important;
    }

    .ds-button-maskot a {
      font-size: 8px !important;
      height: 12px!important;
    }

    .ds-tag h3 {
      font-size: 14px !important;
    }

    .tami-maskot-wording {
      margin: 5% 1px 1px 1px !important;
    }

    .ds-article p{
      line-height: 10px !important;
    }

    .banner-content {
      margin:3px !important;
    }

    /* tami fase 2 result */
    /* tami fase 2 result */
    .tami-fase-2-outbox {
      margin-left:10% !important;
    }

    .tami-fase-2-box{
      width: 70% !important;
    }

    /* tami */

    /*============================ new ds responsive =============================*/
    .transaction .mycart tbody .promocode input[type=text] {
      width: 50%;
    }

    .close {
      color: black;
      float: right;
      font-size: 24px;
      padding-right :2px;
      font-weight: bold;
    }

    .right .cc img {
    padding-top: 8px;
    height: auto;
    }

    .left .logo-word{
    margin-top:1px !important;
    }

    .health-card-text{
      font-size: 14px !important;
    }

    .banner .sub-nav .ico img{
        display:none !important;
      }

    header .left span img, header .right a{
      margin: 0 0 -5px 0 !important;
    }
    header .left a img,header .right a img{
      max-height: 24px;
    }

    .pernyataan .ds-button input{
      width: 110px !important;
      height: 46px !important;
      line-height: 24px !important;
    }

    .pernyataan .ds-button a{
      width: 110px !important;
      height: 40px !important;
      line-height: 40px !important;
    }

    .pernyataan .wrap-button .ds-button a{
      width: 180px !important;
      height: 40px !important;
      line-height: 40px !important;
    }
  /* ========================================================================== */

  .benefitProductBox h3, .packageProductBox h3 {
    padding: 0px 70px 0px 20px !important;
  }

  footer .address {
  font-size:10px !important;
  }

  footer .address img{
  max-width: 80% !important;
  }

  .ds-modal-popup{
    padding: 25px;
  }

  .ds-wizard-form-second .ds-form-row .ds-wizard-form-btn-back-second{
    width: 100%
  }

  .ds-wizard-form-second .ds-form-row .right{
    float: none;
  }

  .ds-wizard-form-second .ds-form-row .right #btn-register{
    width: 100%;
    margin-top: 10px;
  }

  .forgotPasswordBtn{
    float: left !important;
  }

  .summaryCartHeader h3{
    margin: 0 !important;
  }

  .headerSummaryCart a{
    right: 50px !important;
    top: 28px !important;
  }

  /* TABLE MY CART */
  .table-my-cart{
    width: 100% !important;
  }

  .table-my-cart td{
    display: unset !important;
  }
  .table-my-cart td:before{
    content: none !important;
  }
  .table-my-cart td:after{
    content: none !important;
  }
    .table-my-cart td:nth-child(1){
      width: 45% !important;
    }
    .table-my-cart td:nth-child(2){
      float: unset;
    }
    .table-my-cart td:nth-child(3){
      float: unset;
    }
  /* END OF TABLE MY CART */
  /* CUSTOM HOME PRODUCT */
  .home .h-product .product .box {
    width: 100%;
  }
    .home .h-product .product .box:nth-of-type(2) {
        width: 100%;
    }

  .home .h-product .product .box .text {
    height: 100%;
  }

  .home .h-product .product .box .text .inner-text {
    transform: translate(0, 225%);
  }
  .home .h-product .product .box .text .inner-text-long{transform:translate(0% ,225%);}

  .home .h-product .product .box .text h4 {
    font-size: 18px;
    line-height: unset;
    margin-top: unset;
  }

  .home .h-product .product .box .text h6 {
    font-size: 18px;
    line-height: unset;
    margin-top: unset;
  }

  .home .h-product .product .box .text p {
      display: none;
  }

  .packageProductBox h3{
    width: 225px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ca262d !important;
  }
  /* END OF CUSTOM HOME PRODUCT */

  .backGroundLoading .ovoPaymentContent{transform:translate(-50%,5%);}

  .transaction .summary {
    padding: 0 23px 0px !important;
    border: none
  }
    .summaryCartHeader h3 {
      width: 100%;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .summaryCartHeader a .ds-material-icon{
      margin-top: -23px;
      left: 25px;
    }
  .summaryCartContent {
    text-indent: 10px;
  }
  .transaction .summary h3 {
    margin-left: -19px;
    margin-right: -19px;
    padding-left: 20px;
  }
  .transaction .mycart tbody .desc-prod {
    width: unset
  }
  .table-my-cart td:nth-child(1) {
    width: unset !important;
    float: unset;
  }
  .table-my-cart td:nth-child(2) {
    width: unset !important;
    float: unset;
  }
  .table-my-cart td:nth-child(3) {
    width: unset !important;
    float: unset;
  }
}

@media screen and (max-width: 800px){
  .Column
  {
    display: none; /*Optional*/
  }
  .scrollx{
    overflow-x: visible;
  }
}