/*
.container{
	padding-left:16px;
	padding-right:16px;
}

*/

.modal-backdrop
{
	opacity:0.80 !important;
}

.padding16{
	padding: 0 16px 0 16px;
	font-family: Inter;	
	color: #17242A;
}

.header-area {
  background-color: #111e4f;
  height: 55px;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

div.pa-main-container-wrapper-th-1.pa-show-subs-box.pa-th-1-top, div.pa-main-container-wrapper-th-2.pa-show-subs-box.pa-th-2-top {
  top: 0;
  bottom: auto;
  transition: top 500ms cubic-bezier(0.17,0.04,0.03,0.94),bottom 500ms cubic-bezier(0.17,0.04,0.03,0.94);
}

div.pa-main-container-th-1 {
  margin: 0 auto;
  max-width: 420px;
}

div.pa-main-container-wrapper-th-1 {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
</style>

<style>
/* CSS */
.button-19 {
  appearance: button;
  background-color: #000;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-family: din-round,sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 13px 16px;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
}

.button-19:after {
  background-clip: padding-box;
  background-color: #FFF;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  /*bottom: -4px;*/
  bottom: 2px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  color:#000;
}

.button-19,
.button-19:focus {
  user-select: auto;
  color:#000;
}

.button-19:hover:not(:disabled) {
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
  color:#000;
}

.button-19:disabled {
  cursor: auto;
}

.button-19:active {
  border-width: 4px 0 0;
  background: none;
}

/*20*/
.button-20 {
  appearance: button;
  background-color: #e1090a;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: din-round,sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 13px 16px;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
}

.button-20:after {
  background-clip: padding-box;
  background-color: #000;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  /*bottom: -4px;*/
  bottom: 1px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  z-index: -1;
}

.button-20,
.button-20:focus {
  user-select: auto;
}

.button-20:hover:not(:disabled) {
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
}

.button-20:disabled {
  cursor: auto;
}

.button-20:active {
  border-width: 4px 0 0;
  background: none;
}

.menu_notif {
	position: relative;
}

.notification {
  position: absolute;
  right: 0.15em;
  top: -0.5em;
  min-width: 1.6em;
  height: 1.6em;
  border-radius: 0.8em;
  /*border: 1px solid white;*/
  background-color: #CB3838;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Inter';
  font-size: 10px;
  color: white;
  font-weight:500;
}


.accordion_new {
  width: 100%;
  max-width: 360px;
  margin: 10px auto 10px;
  background: #FFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 0px;
  /*height:auto;*/
}

.accordion_new .link {
  cursor: pointer;
  display: block;
  padding: 10px 10px 10px 10px;
  color: #4D4D4D;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #CCC;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion_new li:last-child .link { border-bottom: 0; }

.accordion_new li i {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: 18px;
  color: #595959;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion_new li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
}

.accordion_new li.open .link { color: #b63b4d; }

.accordion_new li.open i { color: #b63b4d; }

.accordion_new li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/


.submenu_mobile {
  display: none;
  background: #FFF;
  font-size: 12px;
  /*left:0;*/
  margin-left: -30px;
  /*padding: 10px 10px 10px 10px;*/
}

.submenu_mobile li { border-bottom: 1px solid #d6d5e1; padding: 0px 0px 0px 0px; }

.submenu_mobile a {
  display: block;
  text-decoration: none;
  color: #d9d9d9;
  padding: 8px;
  padding-left: 0px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.submenu_mobile a:hover {
  background: #b63b4d;
  color: #000;
}

.round {
        display: inline-block;
        position: relative;
        width: 55px;
        height: 55px;
        overflow: hidden;
        border-radius: 50%;
        background-color:blue;
    }

.circular--portrait { position: relative; width: 65px; height: 65px; overflow: hidden; border-radius: 50%; background: #FFF; border:solid 1.2pt #000; }

.img_slides_banner {
	width: 100%; 
	height: 190px !important; 
	object-fit: cover; 
	object-position: center center;
}

    .swipe-container {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 1rem;
      padding: 0rem;
      /*background: white;*/
      /*border-radius: 12px;*/
      /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);*/
      /* Hilangkan scrollbar */
      scrollbar-width: none; /* Firefox */
	  height:25px !important;
	  cursor:pointer;
    }

    .swipe-container::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Edge */
    }

    .swipe-item {
      flex: 0 0 auto;
      scroll-snap-align: start;
      /*background: #007bff;
      color: white;*/
      padding: 0rem 0rem;
      border-radius: 1px;
      white-space: nowrap;
      font-size: 1rem;
    }
	
	.text_swipe{
		gap: 5px; 
		font-family: Inter;
		font-weight: 500;
		font-size: 10px;
		line-height: 100%;
		letter-spacing: 0%;
		text-align: center;
		color: #FAFAFA;
		padding-left:5px;
		padding-right:5px;
	}
	.title_name{
		font-family: Inter;
		font-weight: 600;
		font-size: 16px;
		line-height: 144%;
		color:#000;
		letter-spacing: 0%;
		padding-bottom:5px;
	}

    .bulat-frame {
      width: 60px;
      height: 60px;
      border-radius: 50%;         /* Buat bentuk lingkaran */
      border: 0.5px solid #E0E0E0; /* Warna frame */
      /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
	  padding:6px;
	  flex: 0 0 auto;
    }
	
	.title_brand { 
		padding-top:15px; font-family: Inter;
		font-weight: 500;
		font-size: 10px;
		line-height: 140%;
		letter-spacing: 0%;
		text-align: center;
		color: #17242A;
    }
	.link_detail{
		color:#008DE0; font-family: Inter; font-weight: 500; font-size: 13px; line-height: 143%; letter-spacing: 0%;
	}
	
    .tabs {
      display: flex;
      border-bottom: 1px solid #ddd;
    }


    .tab {
      padding: 0.5rem 0.8rem;
      cursor: pointer;
      text-decoration: none;
      color: #17242A;
      border-bottom: 3px solid transparent;
      transition: all 0.2s ease-in-out;
	  font-family: Inter;
	  font-weight: 400;
	  font-size: 14px;
	  line-height: 143%;
	  letter-spacing: 0%;
    }

    .tab:hover {
      color: #CB3838;
    }

    .tab.active {
      border-bottom: 3px solid red; /* garis bawah merah untuk tab aktif */
      font-weight: 600;
      color: #CB3838;
    }

    .tab-content {
	  padding-top:15px;
      cursor: pointer;
      text-decoration: none;
      color: #17242A;
	  font-family: Inter;
	  font-weight: 400;
	  font-size: 14px;
	  line-height: 143%;
	  letter-spacing: 0%;
	  padding-left:15px; 
	  padding-right:15px;
    }
	
	.p_font{
		font-family: Inter !important;
		color: #17242A;
	}
	
	.p_grey{
		font-family: Inter !important;
		color: #D4D4D4 !important;
	}

	.p_white{
		font-family: Inter !important;
		color: #FFF !important;
	}

	.accordion{
		margin-left:-15px !important;
		margin-right:-15px !important;
		background-color:#171717 !important;
		border-top:solid 1px #333333;
		border-bottom:solid 1px #333333;
	}
	
    .accordion-item {
		height: 20;
		gap: 10px;
		border-top-width: 0px;
		border-bottom-width: 0px;
		padding: 1px;
		border-color: #272727 !important;
		color:#FAFAFA;
		font-weight:600;		
		font-family: Inter;
		font-size: 14px;
		line-height: 150%;
		letter-spacing: 0%;

    }

    .accordion input[type="checkbox"] {
      display: none;
    }

    .accordion label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      cursor: pointer;
      font-weight: bold;
    }

    .accordion svg {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      fill: #666;
    }

    /* Rotasi saat dibuka */
    .accordion input[type="checkbox"]:checked + label svg {
      transform: rotate(180deg);
      fill: red;
    }

    .accordion .content {
      font-family: Inter;
	  max-height: 0;
      overflow: hidden;
      padding: 0 1rem;
      background: #000;
      transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .accordion input[type="checkbox"]:checked ~ .content {
      /*min-height: 670px;*/
	  /*max-height: 800px;*/
      padding: 1rem;
    }

	/*cards *********/
    .card-link {
	  font-family: Inter;
	  font-size:12px;
      display: block;
      max-width: 400px;
      margin: auto;
      text-decoration: none;
    }

    .card-customize {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #171717;
      padding: 0.6rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: box-shadow 0.3s ease;
    }

    .card-customize:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .card-text {
      color: #FFF;
    }

    .card-label {
      font-size: 1.1rem;
      font-weight: 600;
    }

    .card-subtext {
      font-size: 0.9rem;
      color: #777;
      margin-top: 4px;
    }

    .card-icon {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      object-fit: cover;
    }

    .card-pelanggan {
	  font-family: Inter;
	  font-size:12px;
      display: block;
      margin-left: -20px;
	  margin-right:-20px;
      text-decoration: none;
    }

    .card-pelanggan2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #000;
      padding: 1rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: box-shadow 0.3s ease;
	  border-bottom:solid 2px #171717;
	  margin-left:10px;
	  margin-right:10px;
	  color:#D4D4D4;
	  font-weight:500;
	  font-size:13px;
    }

    .card-pelanggan2:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.card_karir{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 10px 10px 5px;
	gap: 24px;
	isolation: isolate;
	width: 350px;
	height: 214px;
	background: linear-gradient(90deg, #0E0E0E 0%, #270C0C 50%, #0E0E0E 100%);
}

.card_karir .img_karir{
	position: absolute;
	width: 167px;
	height: 118px;
	right: 0px;
	opacity: 0.75;
	margin-top:70px;
}

.title_karir{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 144%;
	color: #FAFAFA;
}

.modal-dialog {
  position: fixed !important;
  bottom: 0 !important;
  left: 0% !important;
  right: 0% !important;
  margin-bottom: 0 !important;
}

.text_modal_download_app{
	font-family: Inter;
	font-weight: 600;
	font-size: 10px;
	line-height: 133%;
	letter-spacing: 0%;
	text-align: center;
	color:#17242A;	
}

/* floating menu */
    .bottom-menu {
	  font-family: Inter;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      display: flex;
      /*justify-content: space-around;*/
      align-items: center;
      padding: 6px 0;
      transform: translateY(100%);
      animation: slideInUp 0.4s ease-out forwards;
      z-index: 1000;
	  background: linear-gradient(90deg, #0E0E0E 0%, #270C0C 50%, #0E0E0E 100%);
	  height:64px;
	  text-align:left;
    }
		
	.menu-item-text {
      font-family: Inter;
      align-items: center;
      color: #FFF;
	  font-weight: 400;
	  font-size: 10px;
	  line-height: 140%;
	  letter-spacing: 0% !important;
	}
	
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      color: #888;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .menu-item svg {
      width: 24px;
      height: 24px;
      margin-bottom: 4px;
      fill: currentColor;
    }

    .menu-item.active,
    .menu-item:hover {
      color: #e91e63;
    }

    /* Hanya tampil di layar kecil (mobile) */
    @media (min-width: 768px) {
      .bottom-menu {
        display: none;
      }
    }

    /* Slide in animation */
    @keyframes slideInUp {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(0);
      }
    }


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    /* Tombol hanya tampil di mobile */
    @media (min-width: 768px) {
      .mobile-only {
        display: none !important;
      }
    }

    /* Modal sidebar kiri */
    .modal-left {
      margin: 0;
      position: fixed;
      left: 0;
      top: 0;
      width: 90%;
      height: 100%;
      transform: translateX(-100%);
      transition: transform 0.3s ease-out;
      pointer-events: none;
    }

    .modal.show .modal-dialog.modal-left {
      transform: translateX(0);
      pointer-events: auto;
    }
	
	/* Modal Filter */
	.modal-filter {
      margin: 0;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transform: translateX(-100%);
      transition: transform 0.3s ease-out;
      pointer-events: none;
    }

    .modal.show .modal-dialog.modal-filter {
      transform: translateX(0);
      pointer-events: auto;
    }

    .modal-content {
      height: 100%;
      border-radius: 0;
    }

    .list-group-item.toggle {
      cursor: pointer;
      position: relative;
    }

    .list-group-item.toggle::after {
      content:url(https://topscore.id/upload/svg_icon/icon_right_b.svg);
      position: absolute;
      right: 16px;
      transition: transform 0.2s;
    }

    .list-group-item.toggle[aria-expanded="true"]::after {
      content:url(https://topscore.id/upload/svg_icon/icon_down_b.svg);
    }

    .submenu {
      padding-left: 0.75rem;
    }

    .submenu li {
      border: 0;
      padding-left: 1rem;
    }
	
	.list-group {
		font-family: Inter;
		font-weight: 500;
		font-size: 14px;
		line-height: 150%;
		letter-spacing: 0%;
		color: #17242A;
	}

	.search-box {
      position: relative;
      width: 100%;
      max-width: 412px;
	  /*
	  border-bottom: 0.5px solid #E0E0E0;
	  background:#F1F2F3;
	  border-bottom-width: 0.5px;
	  */
    }

    .search-box input {
	  font-family: Inter;
      width: 100%;
      padding: 8px 8px 8px 36px;
      border: 1px solid #ccc;
      border-radius: 0px;
      font-size: 14px;
	  background:#F1F2F3;
	  border-bottom: 0.5px solid #E0E0E0;
    }

    .search-box .search-icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      font-size: 16px;
      color: #888;
      pointer-events: none;
    }

    .search-box-general {
      display: flex;
      align-items: center;
      background-color: #ffffff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 4px 10px;
      width: 100%;
      max-width: 480px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      position: relative;
    }

    .search-icon-general {
      font-size: 18px;
      color: #333;
      flex-shrink: 0;
    }

    .search-input-general {
      border: none;
      outline: none;
      flex: 1;
      margin: 0 10px;
      font-size: 12px;
      background-color: transparent;
	  font-weight:500;
    }