/* *Body */
.dash-body {
	padding-top: 65px;
	padding-bottom: 20px;
}

/* Select2 */
.select2-selection-alt {
	width: 100%;
	background-color: #fff !important;
	border: 2px solid #020202 !important;
	font-family: 'Figtree', sans-serif !important;
	font-size: 18px !important;
	/* box-shadow: 8px 8px 0px 0px #02020212; */
	padding: 10px 20px 20px 20px !important;
}

.select2-selection-alt-1 {
	width: 100%;
	background-color: #fff !important;
	border: 2px solid #020202 !important;
	font-family: 'Figtree', sans-serif !important;
	/* box-shadow: 8px 8px 0px 0px #02020212; */
	font-size: 12px;
	/* padding: 10px 20px 20px 20px !important; */
}
#hashtag-select .select2-container .select2-search--inline .select2-search__field {
	height: 20px !important;
}
.answer-hashtag-select .select2-container .select2-search--inline .select2-search__field {
	height: 16px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: #000 !important;
	border: 1px solid #000 !important;
	border-radius: 50px !important;
	color: white;
}

.select2-selection__choice__display {
	padding-left: 8px !important;
	padding-right: 10px !important;
	font-weight: bold !important;
}

.ui-state-active {
	border: 1px solid #6c757d !important;
	background: #6c757d !important;
}

.multiple-button,
.required-button,
.update-answer-button {
	background-color: #020202;
	color: #fff;
	border: 2px solid #020202 !important;
	border-radius: 6px;
	font-family: 'Figtree', sans-serif !important;
}

.multiple-button:disabled,
.required-button:disabled,
.update-answer-button:disabled {
	opacity: 70% !important;
}

#sortable-questions,
#sortable-answers {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#sortable-questions:hover,
#sortable-answers:hover {
	cursor: grab;
}
#sortable-questions:active,
#sortable-answers:active {
	cursor: grabbing;
}
#sortable-questions li {
	border: 2px solid#000;
	background-color: #fff;
	border-radius: 6px;
	margin: 0 3px 3px 3px;
	padding: 0.4em;
	font-size: 1rem;
	height: 100%;
	width: 100%;
}

#sortable-questions input[type='text'] {
	margin: 0;
	padding: 0.4em;
	font-size: 1rem;
	width: 100%;
}

#sortable-answers li input[type='text'] {
	margin: 0;
	height: 100%;
	width: 100%;
}

.dash-body-grey {
	background-color: #eef2fa;
}

.dash-body-blue {
	background-color: #0d65ef;
	color: #fff;
}

.dash-a {
	text-decoration: unset;
	font-family: 'dash-dem';
	color: #0d65ef !important;
	cursor: pointer;
}

/* *Container */
.pilihan {
	background: #e9ecfc;
	padding: 168px 24px 15px 24px;
	position: relative;
	text-align: center;
	/* border: 2px solid #020202; */
	border-radius: 6px;
	/* box-shadow: 8px 8px 0px 0px #02020212; */
	transition: 0.3s all ease;
}
.pilihan:hover {
	background: #f8d905;
}
.pilihan img:not(.promo) {
	position: absolute;
	top: 85px;
	height: 120px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.pilihan .judul {
	height: 175px;
	position: absolute;
	background: #fff;
	width: 100%;
	top: 0;
	left: 0;
	border-radius: 6px 6px 0 0;
}

.pilihan .judul-1 {
	height: 144px;
	position: absolute;
	background: #fff;
	width: 100%;
	top: 0;
	left: 0;
	border-radius: 6px 6px 0 0;
}

.pilihan .logo {
	height: 100%;
	position: relative;
	background: #fff;
	width: 100%;
	border-radius: 6px 0px 0 6px;
	border-right: 2px solid;
}
.pilihan .title {
	position: absolute;
	top: 15px;
	font-weight: bold;
	font-size: 20px;
}
.pilihan-2 {
	padding: 200px 24px 24px 24px !important;
	display: flex;
	flex-direction: column;
}

.pilihan-2.anak {
	min-height: 450px !important;
}

.pilihan-2.dewasa {
	min-height: 300px !important;
}

.pilihan-2 b {
	font-size: 1rem;
}
.pilihan-2.small p,
.pilihan-2.small b {
	font-size: 0.9rem;
}
.pilihan-3 {
	padding: 0px !important;
	margin-bottom: 20px;
	width: 100%;
}
.pilihan-3 .circle {
	position: absolute;
	left: 5px;
	z-index: 999;
	top: 5px;
}
.pilihan-3 .col-7 {
	padding: 15px 20px 15px 5px !important;
}
.pilihan-3 p {
	font-size: 20px !important;
}
.pilihan-4 {
	min-height: 340px;
	padding: 144px 10px 24px 10px !important;
}
.pilihan-4 .judul {
	height: 150px;
}
.pilihan.mh300 {
	min-height: 300px;
}
.pill {
	display: inline-block;
	font-size: 14px;
	padding: 0.25em 0.75em;
	border-radius: 50px;
	background-color: #000;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	transition: all 300ms ease-in-out;
}

.pill:hover {
	background-color: #f8d905;
	color: #000;
}

.counter-button {
	font-size: 24px;
	border-radius: 6px;
	/* background-color: #fff; */
}

.card-scroll-area {
	height: 100%;
	max-height: 400px;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.card-scroll-area::-webkit-scrollbar {
	display: none;
}

.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
}
.lds-dual-ring:after {
	content: ' ';
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #000;
	border-color: #000 transparent #000 transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}

.lds-dual-ring.small {
	display: inline-block;
	width: 20px;
	height: 20px;
}
.lds-dual-ring.small:after {
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px;
	border-radius: 50%;
	border: 6px solid #fff;
	border-color: #fff transparent #fff transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.answer-box {
	background-color: transparent;
	color: #4a4a4a;
	display: block;
	padding: 0.6rem;
  }
  
  .answer-box:not(:last-child) {
	border-bottom: 0.25px solid #b1b1b1;
  }
  
  a.answer-box:hover, a.answer-box:focus {
	-webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc;
			box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc;
  }
  
  a.answer-box:active {
	-webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc;
			box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc;
  }
  

.map {
	background: #fff;
	width: calc(100% - 10px);
	height: 100%;
	min-height: 200px;
	position: relative;
	display: block;
	/* border: 2px solid #020202; */
	border-radius: 6px;
	/* box-shadow: 8px 8px 0px 0px #02020212; */
}
.cardku {
	width: 100%;
	margin: 10px auto 20px;
}
.cardku .title {
	font-size: 22px;
	font-weight: 500;
}
.cardku .content {
	margin-top: 20px;
}
.cardku label.box {
	background: #e9ecfc;
	margin-bottom: 20px;
	padding: 10px;
	display: flex;
	border-radius: 5px;
	/* border: 2px solid #020202; */
	cursor: pointer;
	transition: all 0.25s ease;
}
#one:checked ~ label.first,
#two:checked ~ label.second,
#three:checked ~ label.third,
#four:checked ~ label.fourth,
#five:checked ~ label.fifth,
#six:checked ~ label.sixth,
#seven:checked ~ label.seventh,
#eight:checked ~ label.eighth,
#nine:checked ~ label.nineth,
#ten:checked ~ label.tenth,
.one:checked ~ label.first,
.two:checked ~ label.second,
.three:checked ~ label.third,
.four:checked ~ label.fourth,
.five:checked ~ label.fifth,
.six:checked ~ label.sixth,
.seven:checked ~ label.seventh,
.eight:checked ~ label.eighth,
.nine:checked ~ label.nineth,
.ten:checked ~ label.tenth {
	background: #020202;
	border: 2px solid #020202;
	color: #fff;
	/* box-shadow: 8px 8px 0px 0px #02020212; */
}
.cardku label:hover {
	background: #020202;
	color: #fff;
}
.cardku .circle {
	height: 22px;
	width: 22px;
	background: #e9ecfc;
	display: inline-block;
	margin-right: 20px;
	border-radius: 2px;
	transition: all 0.25s ease;
	margin-left: 5px;
	/* margin-top: 8px; */
}
.cardku .radio {
	height: 22px;
	min-width: 22px;
	display: inline-block;
	margin-right: 20px;
	border-radius: 50%;
	transition: all 0.25s ease;
	margin-left: 5px;
	/* margin-top: 8px; */
	background: #fff;
	border: 6px solid #e9ecfc;
}
.cardku label .circle::after {
	content: ' ';
	background: url(../images/svg/cek-putih.svg);
	height: 12px;
	width: 15px;
	display: block;
	background-size: cover;
	margin: 5px 4px;
}
#one:checked ~ label.first .circle,
#two:checked ~ label.second .circle,
#three:checked ~ label.third .circle,
#four:checked ~ label.fourth .circle,
#five:checked ~ label.fifth .circle,
#six:checked ~ label.sixth .circle,
#seven:checked ~ label.seventh .circle,
#eight:checked ~ label.eighth .circle,
#nine:checked ~ label.nineth .circle,
#ten:checked ~ label.tenth .circle,
.one:checked ~ label.first .circle,
.two:checked ~ label.second .circle,
.three:checked ~ label.third .circle,
.four:checked ~ label.fourth .circle,
.five:checked ~ label.fifth .circle,
.six:checked ~ label.sixth .circle,
.seven:checked ~ label.seventh .circle,
.eight:checked ~ label.eighth .circle,
.nine:checked ~ label.nineth .circle,
.ten:checked ~ label.tenth .circle {
	background: #f8d905;
}
#one:checked ~ label.first .radio,
#two:checked ~ label.second .radio,
#three:checked ~ label.third .radio,
#four:checked ~ label.fourth .radio,
#five:checked ~ label.fifth .radio,
#six:checked ~ label.sixth .radio,
#seven:checked ~ label.seventh .radio,
#eight:checked ~ label.eighth .radio,
#nine:checked ~ label.nineth .radio,
#ten:checked ~ label.tenth .radio,
.one:checked ~ label.first .radio,
.two:checked ~ label.second .radio,
.three:checked ~ label.third .radio,
.four:checked ~ label.fourth .radio,
.five:checked ~ label.fifth .radio,
.six:checked ~ label.sixth .radio,
.seven:checked ~ label.seventh .radio,
.eight:checked ~ label.eighth .radio,
.nine:checked ~ label.nineth .radio,
.ten:checked ~ label.tenth .radio {
	border: 6px solid #f8d905;
	background: #020202;
}
#one:checked ~ label.first .circle::after,
#two:checked ~ label.second .circle::after,
#three:checked ~ label.third .circle::after,
#four:checked ~ label.fourth .circle::after,
#five:checked ~ label.fifth .circle::after,
#six:checked ~ label.sixth .circle::after,
#seven:checked ~ label.seventh .circle::after,
#eight:checked ~ label.eighth .circle::after,
#nine:checked ~ label.nineth .circle::after,
#ten:checked ~ label.tenth .circle::after,
.one:checked ~ label.first .circle::after,
.two:checked ~ label.second .circle::after,
.three:checked ~ label.third .circle::after,
.four:checked ~ label.fourth .circle::after,
.five:checked ~ label.fifth .circle::after,
.six:checked ~ label.sixth .circle::after,
.seven:checked ~ label.seventh .circle::after,
.eight:checked ~ label.eighth .circle::after,
.nine:checked ~ label.nineth .circle::after,
.ten:checked ~ label.tenth .circle::after {
	background: url(../images/svg/cek-hitam.svg);
}
#one:checked ~ label.first p,
#two:checked ~ label.second p,
#three:checked ~ label.third p,
#four:checked ~ label.fourth p,
#five:checked ~ label.fifth p,
#six:checked ~ label.sixth p,
#seven:checked ~ label.seventh p,
#eight:checked ~ label.eighth p,
#nine:checked ~ label.nineth p,
#ten:checked ~ label.tenth p,
.one:checked ~ label.first p,
.two:checked ~ label.second p,
.three:checked ~ label.third p,
.four:checked ~ label.fourth p,
.five:checked ~ label.fifth p,
.six:checked ~ label.sixth p,
.seven:checked ~ label.seventh p,
.eight:checked ~ label.eighth p,
.nine:checked ~ label.nineth p,
.ten:checked ~ label.tenth p {
	font-weight: 700;
}
.cardku label .plan {
	display: flex;
	width: 100%;
	align-items: center;
}
.cardku input[type='checkbox'],
.cardku input[type='radio'] {
	display: none;
}
.cardku p {
	margin: 0;
	font-size: 22px;
}
ul.data {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-top: 30px;
}
ul.data a {
	color: #020202;
	font-weight: 700;
	font-family: 'Figtree', sans-serif;
	font-size: 20px;
}
ul.data li {
	border-bottom: 1px solid #020202;
	margin-bottom: 10px;
	padding: 14px 0;
	text-align: left;
}
.f12 {
	font-size: 12px;
}
.f16 {
	font-size: 16px;
}
.f24 {
	font-size: 24px;
}
.f48 {
	font-size: 48px !important;
}

/* *Navigasi */
.dash-navigasi-atas-bar {
	width: 100%;
	height: 80px;
	background-color: #f8d905;
	top: 0;
	display: flex;
	align-items: center;
}

.dash-navigasi-atas-bar-2 {
	width: 100%;
	height: 56px;
	background-color: #f8d905;
	top: 0;
	display: flex;
	align-items: center;
}

.dash-navigasi-atas-bar-blue {
	background-color: #0d65ef;
	border-bottom: none;
	z-index: 400 !important;
}

.dash-navigasi-atas-title {
	font-size: 18px;
	font-family: 'dash-bold';

	text-overflow: ellipsis;
	overflow: hidden;

	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	white-space: normal;
}

.dash-navigasi-atas-title {
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	white-space: normal;
	position: relative;
	padding-top: 10px;
	font-family: 'Figtree';
	font-weight: 700;
	font-size: 20px;
}
.dash-navigasi-atas-title-2 {
}
.dash-navigasi-atas-title img {
	width: 150px;
	margin-top: 65px;
}
.dash-navigasi-atas-title-2 img {
	width: 150px;
	top: 23px;
	position: relative;
}

/* .dash-navigasi-atas-action-box{
    height: 100%;
    display: flex;
    align-items: center;
}

.dash-navigasi-atas-action-left{
    flex: 100%;
    min-height: 10px;
    display: flex;
}

.dash-navigasi-atas-action-right{
    flex: auto;
    min-height: 10px;
    display: flex;
}

.dash-navigasi-atas-action-right .button{
    margin-left: 4px;
} */

.dash-navigasi-bawah-bar {
	width: 100%;
	height: 64px;
	background-color: #fff;
	border-top: 2px solid #eef2fa;
	bottom: 0;
	padding-left: 5%;
	padding-right: 5%;

	display: flex;
	align-items: center;
}

.dash-navigasi-bawah-list {
	flex: 100;
	height: auto;
	min-height: 10px;
	text-align: center;
	cursor: pointer;

	filter: saturate(0%) grayscale(100%) brightness(69%) contrast(1000%);
}

.dash-navigasi-bawah-list-active {
	filter: grayscale(0);
	pointer-events: none;
}

.dash-navigasi-bawah-label {
	margin-top: 4px;
	color: #0d65ef;
}

.navigasi-bawah-pilih-bulan {
	bottom: 24px;
	width: 100%;
}

/* *Button */
.dash-button {
	font-size: 20px;
	font-family: 'Figtree', sans-serif;
	position: relative;
}
.dash-button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.dash-button-kotak {
	width: 44px;
	height: 44px;
	display: block;
}

.dash-button-kotak-kecil {
	width: 36px;
	height: 36px;
	display: block;
}

.dash-button-full {
	width: 100%;
	height: auto;
	display: block;
	text-align: center;
	padding: 11.5px 0;
}

.dash-button-full-pilih-bulan {
	width: 100%;
	height: auto;
	display: block;
	text-align: right;
	padding: 11.5px 0;
}

.dash-button-fix {
	width: 160px;
	height: auto;
	display: block;
	text-align: center;
	padding: 11.5px 0;
}

.dash-button-dinamic {
	width: auto;
	min-width: 100px;
	height: auto;
	display: inline-block;
	text-align: center;
	padding: 11.5px 20px;
}

.dash-button-right {
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
}

.dash-button-right-pilihan {
	/* padding-right: 44px; */
}

.dash-button-kids {
	width: auto;
	height: auto;
	display: block;
	text-align: center;
	padding: 4px 10px;
	display: inline-flex;
}

.dash-button-kids-area {
	margin-top: 12px;
	margin-bottom: 7px;
}

.dash-notifikasi-counter {
	width: auto;
	min-width: 17px;
	height: auto;
	padding: 1px 4px;
	background-color: #f1001d;
	border-radius: 50px;
	position: absolute;
	z-index: 2;
	font-size: 10px;
	font-family: 'dash-dem';
	color: #fff;
	right: 0;
	top: 0;
	text-align: center;
}

.dash-button-action-subtitle {
	width: auto;
	height: auto;
	padding: 4px 10px;
	font-size: 10px;
	font-family: 'dash-dem';
	color: #fff;
	text-align: center;
	display: inline-block;
	border-radius: 30px !important;
}

.dash-button-tambah-fly {
	position: fixed;
	right: 12px;
	bottom: 76px;
}

.dash-button-tambah-pro-fly {
	position: fixed;
	right: 12px;
	bottom: 12px;
}

/* *Button Color */
.dash-button-side-menu-white {
	background-color: rgba(255, 255, 255, 0.4);
	color: #020202;
}

.dash-button-side-menu-white:hover {
	background-color: #fff;
	color: #020202;
	transition: 0.3s;
}

.dash-button-side-menu-white-active {
	background-color: rgba(13, 101, 239, 0.2);
	color: #0d65ef;
	pointer-events: none;
}

.dash-button-action-white {
	background-color: rgba(255, 255, 255, 0.4);
	color: #020202;
}

.dash-button-action-white:hover {
	background-color: rgba(255, 255, 255, 0.8);
	color: #020202;
	transition: 0.3s;
}

.dash-button-action-green {
	background-color: rgba(60, 186, 84, 0.1);
	color: #3cba54;
}

.dash-button-action-green:hover {
	background-color: rgba(60, 186, 84, 0.2);
	color: #3cba54;
	transition: 0.3s;
}

.dash-button-action-red {
	background-color: rgba(241, 0, 29, 0.1);
	color: #f1001d;
}

.dash-button-action-red:hover {
	background-color: rgba(241, 0, 29, 0.2);
	color: #f1001d;
	transition: 0.3s;
}

.dash-button-action-yellow {
	background-color: rgba(255, 199, 0, 0.1);
	color: #ffc700;
}

.dash-button-action-yellow:hover {
	background-color: rgba(255, 199, 0, 0.2);
	color: #ffc700;
	transition: 0.3s;
}

.dash-button-action-blue {
	background-color: rgba(13, 101, 239, 0.1);
	color: #0d65ef;
}

.dash-button-action-blue:hover {
	background-color: rgba(13, 101, 239, 0.2);
	color: #0d65ef;
	transition: 0.3s;
}

/* *Input */
input {
	outline: unset;
	border: unset;
}

::placeholder {
	color: #d5dde9;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dash-input-search-full {
	width: 100%;
	padding: 10px 30px;
	/* padding-right: 30px; */
	background-color: #f6f6f6;
	font-size: 24px;
	/* border: 2px solid #020202; */
	font-family: 'Figtree', sans-serif;
	font-weight: 700;
	/* box-shadow: 8px 8px 0px 0px #02020212; */
}

.dash-input-search:focus {
	outline: 2px solid #0d65ef;
	background-color: #fff;
}

input[type='search']::-webkit-search-cancel-button {
	-webkit-appearance: none;
	cursor: pointer;
	transition: 0.1s;

	height: 32px;
	width: 32px;
	background-image: url(' ../images/svg/icon-box-search-cross.svg ');
	background-position: center;
}

.sticky {
	position: sticky;
	top: 30px;
	height: 100%;
}

.dash-input-form {
	width: 100%;
	min-width: 160px;
	height: 44px;
	padding: 0 15px;
	background-color: #eef2fa;
	font-size: 16px;
	font-family: 'dash-bold';
}

.dash-input-form-big {
	width: 100%;
	min-width: 160px;
	height: 54px;
	font-size: 24px;
}

.dash-input-form-white {
	background-color: #fff;
}

.dash-input-form-fix {
	width: 160px;
}

.dash-input-form:focus {
	outline: 2px solid #0d65ef;
	background-color: #fff;
}

.dash-input-label {
	font-size: 16px;
	margin-bottom: 4px;
	text-align: left;
	font-family: 'Figtree', sans-serif;
	font-weight: 700;
}

.dash-input-allert {
	font-size: 10.5px;
	font-family: 'dash-dem';
	color: #f1001d;
}

.dash-input-info {
	font-size: 10.5px;
	font-family: 'dash-reg';
	margin-top: 4px;
}

.dash-input-info-check {
	width: 100%;
	padding-left: 28px;
}

.dash-textarea {
	min-height: 120px;
	resize: none;
	overflow: hidden;
	display: block;
	border: unset;
	padding: 12px 15px;
}

/* *Box */

/* *Panel */
.dash-panel-master {
	width: 100%;
	height: auto;
	display: block;
	padding: 9.25px 15px;
}

.dash-panel-navigasi {
	display: flex;
	align-items: center;
	justify-content: right;
	margin-top: 5px;
}

.dash-panel-list {
	display: flex;
	align-items: center;
	margin: 3px 0;
}

.dash-panel-list-gap {
	flex-wrap: revert;
	gap: 12px;
}

.dash-panel-list-flex {
	flex: 100%;
}

.dash-panel-list-flex-auto {
	flex: auto;
	display: flex;
}

.dash-panel-list-flex-auto .button {
	margin-left: 4px;
}

.dash-panel-saldo-logo {
	margin-top: 15px;
	margin-bottom: 25px;
}

.dash-panel-label {
	font-size: 12px;
}

.dash-panel-data-01 {
	font-size: 32px;
	font-family: 'dash-bold';
}

.dash-panel-data-02 {
	font-size: 15px;
	font-family: 'dash-dem';
}

.dash-panel-data-03 {
	font-size: 10px;
}

.dash-panel-fly-right {
	padding-right: 66px;
}

.dash-panel-master-left {
	padding-left: 56px;
}

/* *Receipt */

/* *Icon */

/* *Image */

/* *Margin */
.m-info-kit {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* *Color */
.text-black {
	color: #020202;
}

.text-white {
	color: #fff;
}

.text-grey-l {
	color: #aab5c5;
}

.text-grey-ll {
	color: #d5dde9;
}

.text-grey-lll {
	color: #eef2fa;
}

.text-blue {
	color: #0d65ef;
}

.text-red {
	color: #f1001d;
}

.text-yellow {
	color: #ffc700;
}

.text-green {
	color: #3cba54;
}

/* *Font */
@font-face {
	font-family: 'dash-reg';
	src: url('../fonts/WorkSans-Regular.woff2') format('woff2'), url('../fonts/WorkSans-Regular.woff') format('woff');
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'dash-dem';
	src: url('../fonts/WorkSans-SemiBold.woff2') format('woff2'), url('../fonts/WorkSans-SemiBold.woff') format('woff');
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'dash-bold';
	src: url('../fonts/WorkSans-Bold.woff2') format('woff2'), url('../fonts/WorkSans-Bold.woff') format('woff');
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'dash-heavy';
	src: url('../fonts/WorkSans-ExtraBold.woff2') format('woff2'), url('../fonts/WorkSans-ExtraBold.woff') format('woff');
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'dash-rcp';
	src: url('../fonts/ocrf_regular-webfont.woff2') format('woff2'), url('../fonts/ocrf_regular-webfont.woff') format('woff');
	font-style: normal;
	font-display: swap;
}

.dash-reg {
	font-family: 'dash-reg' !important;
}

.dash-dem {
	font-family: 'dash-dem' !important;
}

.dash-bold {
	font-family: 'dash-bold' !important;
}

.dash-heavy {
	font-family: 'dash-heavy' !important;
}

.dash-rcp {
	font-family: 'dash-rcp' !important;
}

/* *Text Custom */
.dash-bantuan-cepat {
	font-size: 10px;
	width: 100%;
	padding-left: 28px;
}

.dash-pop-intro {
	font-size: 16px;
	font-family: 'dash-dem';
}

.dash-rincian-saldo-total {
	margin-bottom: 5px;
}

.dash-rincian-saldo-detail {
	margin-top: 10px;
	margin-bottom: 5px;
}

/* *Media Minimum */
@media (min-width: 320px) {
}

@media (min-width: 410px) {
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
	.dash-tambah-hide-dekstop {
		display: none;
	}
}

@media (min-width: 992px) {
	.dash-navigasi-bawah-bar-hide-dekstop {
		display: none;
	}

	.dash-button-bayar-retribusi-hide-dekstop {
		display: none !important;
	}

	.dash-navigasi-back-to-pengelola-hide-dekstop {
		display: none;
	}
}

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

/* *Media Maximum */
@media (max-width: 410px) {
}

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

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

@media (max-width: 767.5px) {
	.dash-input-search-hide-mobile {
		display: none;
	}
	.dash-navigasi-atas-title img {
		width: 140px;
		margin-top: 75px;
	}
	.dash-navigasi-atas-title-2 img {
		width: 100%;
		top: 30px;
		position: relative;
	}
	a.mr_20.button {
		margin-bottom: 15px;
		margin-right: 0 !important;
	}
	.centered {
		width: 80%;
	}
	.pilihan {
		margin-bottom: 30px;
	}
	.pilihan-3 .col-7 {
		padding: 25px 24px 25px 15px !important;
	}
}

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

@media (max-width: 991.5px) {
	.dash-side-menu-hide-mobile {
		display: none;
	}

	.dash-button-bayar-retribusi-hide-mobile {
		display: none !important;
	}

	.dash-pilih-bulan-hide-mobile {
		display: none !important;
	}
}

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

/* *General */
.dash-round-radius {
	border-radius: 6px;
}

.dash-relative-area {
	position: relative;
}

.img-input-button {
	position: absolute;
	top: 7px;
	right: 10px;
	/* pointer-events: none; */
	cursor: pointer;
}
.selectboxku {
	border: unset !important;
	font-size: 24px;
	padding: 12px;
}
.selectboxku:hover {
	background: #020202 !important;
	color: #fff !important;
}
.no-shadow {
	box-shadow: none !important;
}
.dash-pop-scroll-bottom .dash-button-right-pilihan {
	border-bottom: 2px solid #e9ecfc;
	border-radius: unset;
}

.img-input-button-password {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

.img-input-button-cross-kecil {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
}

.img-bantuan-cepat {
	width: 16px;
	float: left;
}

.img-button-pilih-bulan {
	position: absolute;
	top: 13.5px;
	right: 13.5px;
	pointer-events: none;
}

.img-warga-link {
	margin-top: -4px;
}

.img-icon-info {
	margin-top: -2px;
}

.dash-materi-big {
	width: 100%;
	margin: 12px 0;
	display: inline-block;
}

.dash-materi-midle {
	width: 100%;
	margin-bottom: 10px;
	display: inline-block;
}

.dash-materi-panel {
	width: 100%;
	margin-top: 10px;
	display: inline-block;
}

.dash-materi-logo-utama {
	width: 100%;
	margin: 30px 0;
	display: inline-block;
}

.dash-materi-metode-bayar {
	width: 100%;
	margin-bottom: 10px;
	display: inline-block;
}

.dash-materi-list-pembatalan {
	width: 100%;
	margin-top: 12px;
	display: inline-block;
}

.dash-materi-list-dokumen {
	width: 100%;
	margin-top: 6px;
	margin-bottom: 6px;
	display: inline-block;
}

.dash-materi-subject {
	width: 100%;
	margin-bottom: 10px;
	display: inline-block;
}

.dash-materi-info-statistik {
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	display: inline-block;
}

.dash-button-prokoin-1 {
	position: absolute;
	top: 12px;
	right: 12px;
}

.dash-button-prokoin-2 {
	position: absolute;
	top: 12px;
	right: 62px;
}

.dash-button-listing-rumah {
	position: absolute;
	top: 12px;
	right: 12px;
}

.dash-button-password {
	position: absolute;
	top: 0;
	right: 0;
}

.dash-panel-akun {
	position: absolute;
	top: 5px;
	right: 5px;
}

.dash-background-red-pop-tagihan {
	background-color: #ffdadb;
}

.dash-background-green-pop-tagihan {
	background-color: rgba(60, 186, 84, 0.1);
}

.qris-pay {
	width: 100%;
	max-width: 250px;
}

.zdex-webpay-button {
	z-index: 10002;
}

.webpat-outline-button {
	outline: 2px solid #eef2fa;
}

.dash-rumah-non-aktif {
	pointer-events: none;
	opacity: 0.3;
}

.dash-form-disable {
	pointer-events: none;
	background-color: rgba(241, 0, 29, 0.1);
}

.dash-checkbox-swap-panel {
	position: absolute !important;
	top: 13px;
	left: 12px;
}

/* *Checkbox */
.dash-checkbox {
	cursor: pointer;

	top: 0;
	left: 0;
	height: 18px;
	width: 18px;
	border-radius: 5px;
	background-color: #3cba54;
	float: left;
	margin-right: 10px;

	background-image: url(../images/svg/icon-check-kecil-white.svg);
	background-repeat: no-repeat;
	background-position: center;

	-webkit-appearance: none;
	appearance: none;

	filter: grayscale();
	opacity: 0.2;
}

.dash-checkbox:checked {
	filter: grayscale(0);
	opacity: 1;
	transition: 0.3s;
}

/* *Checkbox Swap */
input.dash-checkbox-swap {
	-webkit-appearance: none;
	appearance: none;
	width: 34px;
	height: 20px;
	background-color: #eef2fa;
	border-radius: 25px;
	transition: background 0.6s;
	cursor: pointer;
	position: relative;
}

.dash-checkbox-swap-active {
	background-color: #ff000f !important;
	pointer-events: none;
}

/* Create the toggle */
input.dash-checkbox-swap::after {
	content: '';
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: #fff;
	display: block;
	position: absolute;
	top: 50%;
	left: 30%;
	transform: translate(-50%, -50%);
	transition: left 0.3s;
}
/* Change the background when it's checked */
input.dash-checkbox-swap:checked {
	background: #0d65ef;
}
/* Change position on checked */
input.dash-checkbox-swap:checked::after {
	left: 70%;
}

/* Swiper */
.swiper-button-next,
.swiper-button-prev {
	width: 16x !important;
	height: 16px !important;
	background-color: rgba(13, 101, 239, 0.2) !important;
	border-radius: 6px !important;
}

.swiper-button-prev {
	background-image: url(../images/svg/icon-swiper-prev.svg);
	background-repeat: no-repeat;
	background-position: center;
}

.swiper-button-next {
	background-image: url(../images/svg/icon-swiper-next.svg);
	background-repeat: no-repeat;
	background-position: center;
}

.swiper-button-prev::after {
	display: none;
}

.swiper-button-next::after {
	display: none;
}

.dash-swiper-image {
	padding-top: 0 !important;
}

.dash-icon-promosi {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 15;
	cursor: pointer;
}

.dash-icon-promosi-transaksi {
	cursor: pointer;
	margin-right: 4px;
}

.dash-img-bantuan {
	width: 16px;
	float: left;
}

/* *V-Counter */
.v-counter {
	width: 72px !important;
	display: flex;
	align-items: center;
	font-family: 'dash-bold';
	font-size: 14px;
	background-color: #eef2fa;
	border-radius: 50px;
	padding: 0 10px;
}

.v-counter-button {
	width: 18px !important;
	height: 26px !important;
	display: inline-block !important;
}

.v-counter-nilai {
	width: 36px !important;
	height: 26px !important;
	border-radius: 6px !important;
	background-color: #eef2fa !important;
	display: inline-block !important;
	text-align: center;
}

.v-counter input[type='button']:hover {
	color: #020202;
	font-weight: bold;
	background-color: transparent;
}

.v-counter span {
	font-size: 13px;
	color: #020202;
}

.v-counter input[type='button'] {
	display: inline-block;
	width: 20px;
	background-color: transparent;
	outline: none;
	border: none;
	text-align: center;
	cursor: pointer;
	padding: 0px;
	color: #020202;
	height: 33px;
}

.v-counter input[type='text'] {
	display: inline-block;
	width: 20px;
	background-color: transparent;
	outline: none;
	border: none;
	text-align: center;
	cursor: pointer;
	padding: 0px;
	color: #020202;
	height: 33px;
}