:root{
		--status-berhasil: #D5FFC3;
		--status-menunggu-pembayaran: #FFF1A5;
		--status-kedaluarsa: #EBEBEB;
		--status-dibatalkan: #FDD1D1;
		--status-berhasil-text: #3ECD00;
		--status-menunggu-pembayaran-text: #FF7A00;
		--status-kedaluarsa-text: #868686;
		--status-dibatalkan-text: #F71717;
}

@font-face {
  font-family: AvenirNextLTProRegular;
  src: url("fonts/AvenirNextLTPro-Regular.otf");
}

@font-face {
  font-family: AvenirNextLTProMedium;
  src: url("fonts/AvenirNextLTPro-Medium.otf");
}

@font-face {
  font-family: AvenirNextLTProBold;
  src: url("fonts/AvenirNextLTPro-Bold.otf");
}

@font-face {
  font-family: AvenirNextLTProHeavy;
  src: url("fonts/AvenirNextLTPro-Heavy.otf");
}

@font-face {
  font-family: AvenirNextLTProDemi;
  src: url("fonts/AvenirNextLTPro-Demi.otf");
}

@font-face {
  font-family: AvenirNextLTPro;
  src: url("fonts/AvenirNextLTPro-It.otf");
}

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

.ff-demi{
  font-family: 'AvenirNextLTProDemi' !important;
}

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

.ff-medium{
  font-family: 'AvenirNextLTProMedium' !important;
}
.ff-regular{
  font-family: 'AvenirNextLTProRegular' !important;
}
html:has(.ListComponentDefaultForm){
	overflow: hidden !important;
}
body{
	font-family: 'AvenirNextLTProRegular' !important;
}
textarea {
	vertical-align: top;
	padding-top: 6px !important;
}
input[type="text"] {
	padding-left: 8px;
	padding-right: 8px;
}

.dataTable th,.dataTable td{
	padding: 16px;
}

.dataTable th{
	background-color: #d9d9d9;
	color: #000;
}

.div-grow {
	flex-grow: 1;
	flex-basis: 0;
}

.div-grow-xy {
	flex-grow: 1;
	flex-basis: 0;
}
.main:after {
	content: "" !important;
}
*:has(> .div-grow-xy){
	height: 100%;
}
.bg-17 {
	background-color: #176cf7;
}
a:hover{
	color: inherit;
	/*	color: inherit !important; - important dihilangin, karena nabrak yg lain, terlalu global, sebaiknya tidak pakai important - 05/02/24 ~fariz*/
}
/* .btn-primary:hover,
.bg-primary:hover
{
	color: #ffffff !important;
} */
.event-none{
	pointer-events: none;
}
.btn-primary, .btn-primary:focus {
	background-color: #176cf7;
	/* color: #ffffff; */
	/*font-family: 'AvenirNextLTProDemi';*/
	border-radius: 100px;
	height: 32px;
	line-height: 32px;
	font-size: 14px;
	padding: 0 16px;
	border:  none;
}
.main-content{
	margin-top: 64px;
}
.main-content .btn-primary.disabled, .main-content .btn-primary:disabled {
	background-color: #bfbfbf;
	/* color: #ffffff; */
	cursor: default;
	pointer-events: none !important;
}

.btn-primary-outline:hover{
	color: #176cf7 !important;
}
.btn-primary-outline {
	/* background-color: #ffffff; */
	color: #176cf7;
	/*font-family: 'AvenirNextLTProDemi';*/
	border: 1px solid #176cf7;
	border-radius: 100px;
	height: 32px;
	line-height: 32px;
	font-size: 14px;
	padding: 0 16px;
}
.fc-17{
	color: #176cf7;
}
.fc-white{
	color : #fff
}
.lh-normal{
	line-height: normal;
}

.btn-disabled{
	background-color: #d7d7d7;
}
.btn-no-border{
	border: unset !important;
}


.input-standard{
	padding: 0 6px !important;
	height: 30px !important;
	font-size: 14px !important;
	border:1px solid #868686 !important;
}

.checkbox-standard{
	height: 20px !important;
	width: 20px !important;
	margin-top: 0px !important;
}
.checkbox-standard:checked{
	box-shadow: 0px 3px 11px 1px rgb(23, 108, 247) !important;
	background-color: #176cf7 !important;
	border-color: #176cf7 !important;
}

.dataTables_filter input{
	width: 350px !important;
}
.btn-submit{
	padding: 14px 54px !important;
	font-size: 16px;
}
.custom-scroll{
	overflow: auto;
}
.custom-scroll::-webkit-scrollbar {
  width: 6px;
  background-color: white;
  border-radius: 12px;
}

.custom-scroll::-webkit-scrollbar-track-piece {
  /*margin: -6px 0 -6px 0;*/
  background: #ebebeb;
  /*border: 6px solid white;*/
  border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
  /*      border:  6px solid transparent;
  background-clip: content-box;*/
  height: 25px;
}

.bg-red-muda{
	background-color: #ffd2d2;
}
.bg-red-tua{
	background-color: #f71717;
}
.fc-red-muda{
	color: #ffd2d2;
}
.fc-red-tua{
	color: #f71717;
}
.fc-black{
	color: #000;
}
strong{
	color: #1b1b1b;
  font-family: 'AvenirNextLTProBold' !important;
}
.fc-86 {
	color: #868686 !important;
}
.fc-1b {
	color: #1b1b1b;
}
.main-content {
	/*height: 100vh;*/
	height: calc(100vh - 64px);
	overflow: auto;
	padding: 0px 20px 36px !important;
	width: calc(100vw - 250px);
}
.notif-merah{
	font-size: 16px;
	line-height: normal;
	padding: 8px;
	display: block;
	background-color: #ffd2d2;
	color: #f71717;
	border-radius: 5px;
	font-weight: 600;
}

a:focus, button:focus, textarea:focus, input:focus, .customDropdownContainer:focus {
	outline: none !important;
	box-shadow: none !important;
}
.readonly-field {
	line-height: 30px;
}
input, .readonly-field {
	height: 32px;
	border-radius: 4px;
	border: 1px solid #868686;
}
textarea {
	border-radius: 4px;
	border: 1px solid #868686;	
}
.dataTable td {
	vertical-align: middle;
}

.dataTable tbody .datatable-action-btn:not(.disabled):hover {
	color: #176cf7 !important;
}
.dataTable tbody .datatable-action-btn {
	height: 25px;
	padding: 0px 16px;
	line-height: 24px;
	text-align: center;
	vertical-align: middle;
	color: #176cf7;
	border: 1px solid #176cf7;
	border-radius: 32px;
	font-size: 14px;
}

.dataTable tbody .datatable-action-btn.disabled {
	color: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(0, 0, 0, 0.25);
	pointer-events: none !important;
}

.sect-1{
	margin-top: 30px;
	margin-bottom: 30px;
}
.sect-1 h1{
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	padding-left: 8px;
}

.datatable-posisi {
	height: 32px;
	width: 32px;
	text-align: center;
	color: #176cf7;
	border: 1px solid #176cf7;
	border-radius: 4px;
	line-height: 32px;
}

.select2-container{
  height: 32px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
	line-height: 32px !important;
}
.select2-container .select2-selection--single{
  height: 100% !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  left: 50% !important;
  margin-left: -7px !important;
  margin-top: -2px !important;
  position: absolute !important;
  top: 34% !important;
  width: 10px !important;
  height: 10px !important;
  transform: rotate(45deg);
  border: solid #868686 !important;
  display: inline-block !important;
  padding: 3px !important;
  border-width: 0 1px 1px 0 !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  left: 50% !important;
  margin-left: -7px !important;
  margin-top: -2px !important;
  position: absolute !important;
  top: 52% !important;
  width: 10px !important;
  height: 10px !important;
  transform: rotate(-135deg);
  border: solid #868686 !important;
  display: inline-block !important;
  padding: 3px !important;
  border-width: 0 1px 1px 0 !important;
}

.select2-container--default .select2-results__option[aria-disabled="true"] {
	display: none !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #176cf7 !important;
}

.select2-results__options{
	max-height: 160px !important;
}
.select2-container--default .select2-selection--single{
	border: 1px solid #868686 !important;
}
.select2.select2-container {
	width:  100% !important;
}
.customDropdownArrow.flipArrow {
	margin-top: 5px;
  transform: rotate(-135deg);
}
.customDropdownArrow {
	height: 10px;
	margin-top: -5px;
	width: 10px;
  transform: rotate(45deg);
  border: solid #868686 !important;
  display: inline-block !important;
  padding: 3px !important;
  border-width: 0 1px 1px 0 !important;
}
.listDotParent{
	background-color: lightgrey;
}
.dotList{
	height: 5px;
	width: 5px;
	background-color: #000;
	border-radius: 4px;
}

table.dataTable thead > tr > th.sorting{
	/*font-size: 18px !important;*/
}
table.dataTable thead > tr > th.sorting:after{
	font-size: 18px !important;
	opacity: 1 !important;
}
table.dataTable thead > tr > th.sorting:before{
	font-size: 18px !important;
	opacity: 1 !important;
}
table.dataTable thead > tr > th.sorting_asc:after{
	opacity: 0 !important;
}
table.dataTable thead > tr > th.sorting_asc:before{
	opacity: 1 !important;
}
table.dataTable thead > tr > th.sorting_desc:after{
	opacity: 1 !important;
}
table.dataTable thead > tr > th.sorting_desc:before{
	opacity: 0 !important;
}
/*====================form css====================================*/

.row:not(:has(textarea, .customDropdownContainer, .textDropdownPropertyContainer)) {
	align-items: center;
}

.property-input {
	width:  100%;
	padding: 0 8px;
}
.property-list {
	gap: 16px;
	display: grid;
}
.property-label {
	font-size: 16px;
  font-family: 'AvenirNextLTProDemi';
	padding-top: 6px;
	min-height: 32px;
}
#layanan-table .datatable-action-btn {
	max-height: 25px;
	font-size: 12px;
	line-height: 24px;
}

#table .datatable-action-btn {
	max-height: 25px;
	font-size: 14px;
	line-height: 24px;
	display: inline-block;
}

.plusBtn, .minBtn {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.grid-16 {
	display: grid;
	gap: 16px;
}

.flex-middle {
	display: flex !important;
	align-items: center;
}
.flex-center {
	display: flex !important;
	justify-content: center;
}

.remove-selectedDropdownBadge {
	cursor: pointer;
}

input:disabled::placeholder {
	color: lightgrey !important;
}
input:disabled{
	border-color: #868686 !important;
	color: #444;
	background-color: #eee;
}

.radios{
	height: 15px !important;
	width: 15px !important;
}

div.disabled, div.disabled *,
div.disabled .select2-selection--single,
div.disabled .select2-container--default .select2-selection--single .select2-selection__arrow b
{
	color: #bfbfbf !important;
	border-color: #bfbfbf !important;
	pointer-events: none;
}
.custom-readonly .select2-selection--single,
.custom-readonly input
{
	background-color: lightgray !important;
	pointer-events: none;
}
.custom-readonly .select2-container--default .select2-selection--single .select2-selection__arrow b
{
	display: none !important;
}

/*.form-check-input:focus{
	background-image: none !important;
	border: none!important;
	border-color: none !important;
}*/

.text-icon-center{
	display: flex;
	align-items: center;
}


/*====================margin padding heigth width fz====================================*/

.MasterLayanan label{
	font-size: 16px;
	font-family: 'AvenirNextLTProDemi';
}
.ml-14{
	margin-left: 14px !important;
}
.ml-4{
	margin-left: 4px !important;
}
.ml-8{
	margin-left: 8px !important;
}
.p8-24{
	padding: 8px 24px !important;
}
.p6-20{
	padding: 6px 20px !important;
}
.p8-29{
	padding: 8px 29px !important;
}
.px-8{
	padding-left: 8px !important;
	padding-right: 8px !important;
}
.p0-8{
	padding: 0 8px !important;
}
.h-20{
	height: 20px;
}
.h-12{
	height: 12px;
}
.h-32{
	height: 32px !important;
}
.w-20{
	width: 20px;
}
.h-24{
	height: 24px !important;
}
.h-fit{
	height: fit-content;
}
.w-48persen{
	width: 48%;
}

.mb-rem-4{
	margin-bottom: 2rem;
}
.mb-rem-2{
	margin-bottom: 2rem;
}
.mb-rem-1{
	margin-bottom: 1rem;
}
.mb-8 {
	margin-bottom: 8px;
}

.mb-32 {
	margin-bottom: 32px;
}
.mt-rem-1{
	margin-top: 1rem;
}

.mw-38{
	min-width: 38px !important;
}
.ml-5{
	margin-left: 5px;
}
.ml-20{
	margin-left: 20px;
}
.mt-12{
	margin-top: 12px;
}
.p-em2-5{
	padding-left: 2.5rem !important;
}
.fs-12{
	font-size: 12px !important;
}
.fs-14{
	font-size: 14px !important;
}
.fs-16{
	font-size: 16px !important;
}
.fs-18{
	font-size: 18px !important;
}
.fs-28{
	font-size: 28px !important;
}
.fs-30{
	font-size: 30px !important;
}
.fs-50{
	font-size: 50px !important;
}
.mr-52{
	margin-right: 52px !important;
}
.fz-14{
	font-size: 14px;
}
.lh-28{
	line-height: 28px;
}
.lh-18{
	line-height: 18px;
}
/*==================== data table ====================================*/
.dataTable thead tr th:not(.text-left){
	text-align: center !important;
}
.dataTable thead tr th{
	background-color: #176cf7;
	color: #fff;
	font-size: 16px;
}

.dataTable tbody tr:nth-child(odd) td{
	background-color: #f2f2f2;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

.dataTables_scrollHeadInner {
	width: unset !important;
	background-color: #176cf7;
	/*padding-right: 0 !important;*/
}

input.forClearButtonDatatable::-webkit-search-cancel-button{
	opacity: 1;
	pointer-events: auto;
	margin-left: 6px;
}
div.dataTables_wrapper div.dataTables_filter input {
	margin-left: 16px !important;
}

.dataTables_wrapper .row:has(.pagination) {
	margin-top: 16px;
}

/*============================= TYPEHEAD ==================================*/
.has-warning .twitter-typeahead .tt-input, .has-warning .twitter-typeahead .tt-hint {
  border-color: #fff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.has-warning .twitter-typeahead .tt-input:focus, .has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #e6e5e5;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px white;
}

.has-error .twitter-typeahead .tt-input, .has-error .twitter-typeahead .tt-hint {
  border-color: #fff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.has-error .twitter-typeahead .tt-input:focus, .has-error .twitter-typeahead .tt-hint:focus {
  border-color: #e6e5e5;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px white;
}

.has-success .twitter-typeahead .tt-input, .has-success .twitter-typeahead .tt-hint {
  border-color: #fff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.has-success .twitter-typeahead .tt-input:focus, .has-success .twitter-typeahead .tt-hint:focus {
  border-color: #e6e5e5;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px white;
}

.input-group .twitter-typeahead:first-child .tt-input, .input-group .twitter-typeahead:first-child .tt-hint {
  width: 100%;
  border-top-left-radius: .215rem;
  border-bottom-left-radius: .215rem;
}

.input-group .twitter-typeahead:last-child .tt-input, .input-group .twitter-typeahead:last-child .tt-hint {
  width: 100%;
  border-top-right-radius: .215rem;
  border-bottom-right-radius: .215rem;
}

select .input-group.input-group-sm .twitter-typeahead .tt-input, select .input-group.input-group-sm .twitter-typeahead .tt-hint {
  padding-top: 0;
  padding-bottom: 0;
}

.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}

.input-group.input-group-sm .twitter-typeahead:first-child .tt-input, .input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
  border-top-left-radius: .143rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: .143rem;
}

.input-group.input-group-sm .twitter-typeahead:last-child .tt-input, .input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
  border-top-left-radius: 0;
  border-top-right-radius: .143rem;
  border-bottom-right-radius: .143rem;
  border-bottom-left-radius: 0;
}

select .input-group.input-group-lg .twitter-typeahead .tt-input, select .input-group.input-group-lg .twitter-typeahead .tt-hint {
  padding-top: 0;
  padding-bottom: 0;
}

.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}

.input-group.input-group-lg .twitter-typeahead:first-child .tt-input, .input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
  border-top-left-radius: .286rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: .286rem;
}

.input-group.input-group-lg .twitter-typeahead:last-child .tt-input, .input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
  border-top-left-radius: 0;
  border-top-right-radius: .286rem;
  border-bottom-right-radius: .286rem;
  border-bottom-left-radius: 0;
}

.twitter-typeahead {
  float: left;
  width: 100%;
}

.input-group .twitter-typeahead {
  display: table-cell !important;
}

.twitter-typeahead .tt-hint {
  color: #616161;
}

.twitter-typeahead .tt-input {
  z-index: 2;
}

.twitter-typeahead .tt-input[disabled], .twitter-typeahead .tt-input[readonly], fieldset[disabled] .twitter-typeahead .tt-input {
  cursor: not-allowed;
  background-color: #eee !important;
}

.tt-dropdown-menu, .tt-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1200;
  width: 100%;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px !important;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid #e0e0e0;
  border-radius: .215rem;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .05);
}

.tt-dropdown-menu .tt-suggestion, .tt-menu .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 300;
  line-height: 1.57142857;
  color: #757575;
}

.tt-dropdown-menu .tt-suggestion.tt-cursor, .tt-dropdown-menu .tt-suggestion:hover, .tt-menu .tt-suggestion.tt-cursor, .tt-menu .tt-suggestion:hover {
  color: #757575;
  text-decoration: none;
  cursor: pointer;
  background-color: #eee;
  outline: 0;
}

.tt-dropdown-menu .tt-suggestion.tt-cursor a, .tt-dropdown-menu .tt-suggestion:hover a, .tt-menu .tt-suggestion.tt-cursor a, .tt-menu .tt-suggestion:hover a {
  color: #757575;
}

.tt-dropdown-menu .tt-suggestion p, .tt-menu .tt-suggestion p {
  margin: 0;
}

.link_view, .link_view:hover{
	text-decoration: underline !important;
	color: #176cf7 !important;
}
.fc-red71{
		color: #f71717 !important;
}

#table_info{
	font-size: 13px;
}

.datatable-action-btn{
	background: #fff !important;
}

/*=============================== END TYPEHEAD ======================================*/

table.dataTable td.dt-control:before {
  display: inline-block;
  box-sizing: border-box;
  content: "";
  border-top: 7px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.5);
  border-bottom: 7px solid transparent;
  border-right: 0px solid transparent;
  border-radius: unset;
  background-color: unset;
  box-shadow: unset;
  text-indent: unset;
  line-height: unset;
}
table.dataTable tr.dt-hasChild td.dt-control:before {
  border-top: 10px solid rgba(0, 0, 0, 0.5);
  border-left: 7px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 7px solid transparent;
  border-radius: unset;
  background-color: unset;
  box-shadow: unset;
  text-indent: unset;
  line-height: unset;
  content: "";
}