/*!
* PT. IMAJIKU CIPTA MEDIA
* Copyright 2019-2024 IMAJIKU.
*/

/* = TOM SELECT
------------------------------------------------------------ */
/* global */
.hc-form-select-control .ts-control{
	padding-right: 35px !important;
}
.hc-form-select-control .ts-control>input{
	min-width: 30px !important;
}

/* Custom styling untuk avatar di demo custom rendering */
.avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
}

/* Styling gambar bendera */
.hc-select-phone .flag-icon {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 10px;
	border: 1px solid #dee2e6;
}

.hc-form-select-control.hc-select-phone {
	width: auto;
}

.hc-form-select-control.hc-select-phone .ts-dropdown {
	width: 140%;
	font-size: 14px;
}

.hc-form-select-control.hc-select-phone .ts-control {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding-bottom: 6.3px;
}

/* tom select phone */
.hc-form-select-control.hc-select-phone .ts-control {
	padding-bottom: 9.4px;
}

.hc-form-control {
	font-size: 14px;
}

.hc-select-phone .ts-control .item {
	font-size: 14px;
}

.hc-select-phone .ts-dropdown .option {
	font-size: 14px;
}

.hc-select-phone .ts-wrapper.single .ts-control,
.hc-select-phone .ts-wrapper.single .ts-control input {
	font-size: 14px;
	border: 1px solid #dee2e6;
}

.hc-select-phone .flag-icon {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 10px;
	border: 1px solid #dee2e6;
}

.hc-form-select-control.hc-select-phone {
	width: auto !important;
}

.hc-form-select-control.hc-select-phone .ts-dropdown {
	min-width: 120px;
	font-size: 14px;
}

.hc-form-select-control.hc-select-phone .ts-control {
	min-height: calc(1.5em + .75rem + 2px);
	padding: 8px 30px 7.2px 10px !important;
	text-align: left;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	background-size: 10px 12px !important;
}


/* = FILEPOND
------------------------------------------------------------ */

a.filepond--credits {
	display: none;
}

.hc-pond-upload {
	position: relative;
	margin-bottom: 5px;
}

.hc-pond-upload .filepond--root {
	margin-bottom: 8px;
}

.hc-pond-upload.hc-pond-image .filepond--drop-label {
	width: 100%;
	height: 200px;
	background-color: #F8FAFC;
	border: 1px solid var(--hc-color-gray-100);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	cursor: pointer;
}

/* .filepond--drip {
    background: rgb(248 250 252);
    opacity: 1;
} */

.hc-pond-upload .filepond--file .filepond--file-status {
	font-size: 14px
}

.hc-pond-upload .filepond--file-info {
	display: grid;
}

.form-group .hc-pond-upload .error {
	position: absolute;
	bottom: -26px;
}

.hc-pond-upload label span {
	color: var(--hc-color-gray-500);
}

/*.filepond--file {
    display: flex;
    flex-direction: column;
    position: relative;
    flex-wrap: wrap;
}*/

.hc-pond-upload .filepond--drop-label.filepond--drop-label label {
	color: var(--hc-color-gray-500);
	font-weight: 400;
	font-size: 13px;
}

.hc-pond-info {
	position: relative;
	margin-top: 5px;
}

.hc-pond-info p {
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
	margin-bottom: 0;
	padding: 2px 5px 2px;
	color: var(--hc-color-gray-700);
}

.profile-extra-info {
	text-align: left;
	margin: 0;
}

.profile-extra-info p {
	color: var(--hc-color-text-2);
	font-weight: 400;
	font-size: 12px;
}

.hc-pond-upload.hc-pond-image .filepond--drop-label {
	display: block;
	padding: .5em;
	text-indent: -99999px;
	background: #f8fafc url('../images/resources/frame-filepond.png') no-repeat center center;
	background-size: contain;
	width: 100%;
	height: 200px;
	opacity: 1;
}

.hc-pond-upload.hc-pond-file .filepond--drop-label {
	height: auto;
	background-color: transparent;
}

.hc-pond-info-big {
	position: relative;
	border: 1px solid #ECECEC;
	background-color: #F7F7F7;
	padding: 15px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.hc-pond-info-big h4 {
	color: #90A1B9;
	font-size: 14px;
	font-weight: 600;
}

.hc-pond-info-big ol {
	margin-bottom: 0;
}

.hc-pond-info-big ol li {
	color: #90A1B9;
	font-size: 12px;
	font-weight: 400;
}

.filepond--panel-root {
	background-color: #f1f5f9;
}

/* style tambahan jika filepond circle */
.hc-pond-upload.hc-pond-image .filepond--assistant {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	width: 54%;
	height: 100%;
	align-items: center;
	text-align: center;
	clip: unset;
	clip-path: unset;
	white-space: unset;
	font-size: 12px !important;
	color: red;
}

/* style upload file dengan gambar background */
.hc-pond-file-bg {
	cursor: pointer;
}

.hc-pond-file-bg .filepond--drop-label {
	background-color: var(--hc-color-white);
	justify-content: flex-start;
	padding-left: 16px;
	border-radius: 8px;
	border: 1px solid var(--hc-color-gray-300);
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.hc-pond-file-bg .filepond--drop-label.filepond--drop-label label {
	color: transparent;
	font-size: 0;
	display: flex;
}

.hc-pond-file-bg .filepond--drop-label.filepond--drop-label label::after {
	content: 'Upload File';
	display: block;
	position: relative;
	opacity: 1;
	visibility: visible;
	color: black;
	font-size: 16px;
}

.hc-pond-file-bg .filepond--drop-label.filepond--drop-label label::before {
	content: url('../images/resources/upload-icon.png');
	display: inline-flex;
	vertical-align: middle;
	padding-right: 5px;
}

.hc-pond-file-bg .filepond--panel-root {
	background-color: #ffffff !important;
	border: 1px solid var(--hc-color-gray-300);
}

.hc-pond-file-bg:not(:has(.filepond--list .filepond--item)) .filepond--drop-label {
	border-bottom: 1px solid var(--hc-color-gray-300);
	border-radius: 8px;
}