/* /////////////////// EXAMPLE /////////////////// */
*{
	font-family: "Poppins", sans-serif;
	font-size: 16px;
}

.fs-normal{
	font-size: 12px;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

.overflow-scroll-x{
	overflow-x: scroll;
	overflow-y: hidden;
}

/* MOBILE SIVE CSS */
@media (max-width: 574px){
	.d-xs-none {
    	display: none!important;
	}
	.btn-xs-idvet{
		width: 10vh !important;
	}
	.logo-header{
		width: 10vh;
	}

	.nav-pills-lesen {
		display: flex !important;
		flex-direction: column;
		width: auto;
	}

	.nav-pills-lesen .w-20 {
		width: auto !important;
	}

	.nav-pills-lesen .nav-item {
		margin-bottom: 20px;
	}
	.w-mb-100{
		width:100% !important;
	}
	.w-mb-50{
		width:50% !important;
	}
	.text-mb-center{
		text-align: center !important;
	}
	.w-sm-100{
		width:100vh !important;

	}
}

/* MOBILE SIVE CSS */


/* MEDIUM SIVE CSS */

@media (max-width: 991.98px) {

	.sidebar-staff{
		margin-top: 0;
		position:relative;
		min-height:30% !important;
		min-width: 100% !important;
		border-radius:0px;
		background-color: #FFFFFFB2;
		border: 0px;
	}

	.w-md-10 {
		width: 10%!important;
	}

	.w-md-5 {
		width: 5%!important;
	}
	.w-md-25 {
		width: 25%!important;
	}
	.w-mb-100{
		width:100% !important;
	}
	.w-mb-50{
		width:50% !important;
	}
	.text-mb-center{
		text-align: center !important;
	}
}

/* MEDIUM SIVE CSS */

/* BIGGER SIVE CSS */
@media (min-width: 992px){
	.w-lg-10 {
		width: 10%!important;
	}
	.w-lg-15 {
		width: 15%!important;
	}

	.w-lg-5 {
		width: 5%!important;
	}
}
/* BIGGER SIVE CSS */

@media (min-width: 992px){
	[data-kt-app-header-minimize=on] .app-header {
		background-color: transparent;
	}
}

/* LOADER CUSTOM */
.darksoul-layout
{
	margin: auto;
	display: flex;
	width: 250px;
}
.darksoul-grid
{
	margin: auto;
	margin-right: 1px;
	width: 50px;
	height: 50px;
	display: grid;
	gap: 0px;
	grid-template-columns: auto auto;
	animation: rotate 2s linear 0s infinite;
}
.item1
{
	margin: auto;
	width: 15px;
	height: 15px;
	border-radius: 0%;
	background-color: black;
}
.item2
{
	margin: auto;
	width: 15px;
	height: 15px;
	border-radius: 0%;
	background-color: black;
}
.item3
{
	margin: auto;
	width: 15px;
	height: 15px;
	border-radius: 0%;
	background-color: black;
}
.item4
{
	margin: auto;
	width: 15px;
	height: 15px;
	border-radius: 0%;
	background-color: black;
}
@keyframes rotate
{
	0%{rotate: 0deg; transform: scale(0.6);}
	50%{ rotate: 100deg; transform: scale(0.4);}
	100%{rotate: 360deg; transform: scale(0.6);}
}
.darksoul-loader-h
{
	margin: auto;
	margin-left: 5px;
}

/* END LOADER CUSTOM */

.btn-darkblue{
	background: #326DA8 !important;
	color:white;
}

.btn-darkblue:hover{
	background: #326DA8;
	color:white;
}
.btn-circle-full{
	height: 80px;
	line-height: 50px;
	width: 80px;
	border-radius: 50%;
	color: white;
	text-align: center;
	cursor: pointer;
}

.table-border {
	border-color: black;
}

.btnSubmit {
}

.btnSubmit:hover {
}

.btnSubmit.active {
}

/* /////////////////// COLOR /////////////////// */
.vksb-primary-color {
	--primary-bg-color: #1BB1E6; /* Define the variable for primary color */
	/* color: #1BB1E6; */
  }

.vksb-hover-color{
	--primary-hover-color: #ECFEFF; /* Define the variable for primary color */
}

.text-cyan{
	color: #1BB1E6 !important;
}

.btn-vksb{
	background-color: #1BB1E6;
	color: white !important;
}

.btn-vksb:hover{
	background-color: white;
	color: #1BB1E6 !important;
	/* border: 1px solid #1BB1E6 !important; */
}

/* /////////////////// TYPOGRAPHY /////////////////// */
.vksb-placeholder {
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	color: #000;
	}

.vksb-placeholder-sm {
	font-family: Poppins;
	font-size: 11px;
	font-style: normal;
	color: #000;
	}

/* //////////////////////// COLUMN ///////////////////////////////// */
/* .WIDTH input box, .caption input text*/
.vksb-width {
	width: 500px;
	height: 48px;
	border-radius: 4px;
	border: 1px solid;
	color: #707070;
	background: #fff;
	}

/* .WIDTH:click input box, .Scaption input text*/
.vksb-width:click {
	width: 500px;
	height: 48px;
	border-radius: 4px;
	border: 2px solid;
	color: #707070;
	background: #fff;
}

/* .WIDTH-SM input box, .caption input text*/
.vksb-width-sm {
	width: 245px;
	height: 48px;
	border-radius: 4px;
	border: 1px solid;
	color: #707070;
	background: #fff;
	}

/* .WIDTH-SM:click input box, .Scaption input text*/
.vksb-width-sm:click {
	width: 245px;
	height: 48px;
	border-radius: 4px;
	border: 2px solid;
	color: #707070;
	background: #fff;
	}

/*//////////////////////////// btn /////////////////////////////////*/

.vksb-btn-lg {
  background-color: #1BB1E6;
  border: none;
	width: 350px;
	height: 60px;
	padding: 14px 120px;
	text-align: center;
	font-family: Poppins;
	font-size: 21px;
	font-style: normal;
	color: #fff;
	font-weight: 400;
	line-height: normal;
}

.vksb-btn-lg.hover {
	background-color: var(--primary-hover-color);
	border-radius: 4px;
	border-color: #1BB1E6;
	border: 2px solid;
	width: 350px;
	height: 60px;
	padding: 14px 120px;
	text-align: center;
	font-family: Poppins;
	font-size: 21px;
	font-style: normal;
	color: #1BB1E6;
	font-weight: 400;
	line-height: normal;
}

.vksb-btn {
	background-color: #1BB1E6;
	width: 213px;
	height: 40px;
	padding: 7px 78px;
	text-align: center;
	font-style: normal;
	color: #fff;
	font-weight: 400;
	line-height: normal;
}

.vksb-btn:hover {
	background-color: #1BB1E6;
  	border-radius: 4px;
	border-color: #1BB1E6;
	border: 2px solid;
	width: 213px;
	height: 40px;
	padding: 7px 78px;
	text-align: center;
	font-style: normal;
	color: white;
	font-weight: 400;
	line-height: normal;
}

.btn-cyan{
	background-color: #1BB1E6;
}


.vksb-btn-sm {
	background-color: #1BB1E6;
	border: none;
	width: 160px;
	height: 40px;
	padding: 7px 30px;
	text-align: center;
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	color: #fff;
	font-weight: 400;
	line-height: normal;
}

.vksb-btn-sm:hover {
	background-color:  var(--primary-hover-color);
  	border-radius: 4px;
	border-color: #1BB1E6;
	border: 2px solid;
	width: 160px;
	height: 40px;
	padding: 7px 30px;
	text-align: center;
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	color: #1BB1E6;
	font-weight: 400;
	line-height: normal;
}

.vksb-btn-dark {
	background-color: #252525;
	border: none;
	width: 160px;
	height: 40px;
	padding: 7px 35px;
	text-align: center;
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	color: #fff;
	font-weight: 400;
	line-height: normal;
}

.vksb-btn-dark:hover {
	background-color: #707070;
	border: none;
	width: 160px;
	height: 40px;
	padding: 7px 35px;
	text-align: center;
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	color: #fff;
	font-weight: 400;
	line-height: normal;
}


/*//////////////////////////// Dropdown /////////////////////////////////*/

.vksb-dropdown.active{
	background-color: #fff;
	padding: 12px;
	width: 245px;
	height: 48px;
	font-family: Poppins;
	font-size: 16px;
	color: #000;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	border-radius: 4px;
	border: 1px solid #707070;

}

.vksb-dropdown-content{
	display: none;
	position: absolute;
	background-color: #fff;
	min-width: 160px;
	overflow: auto;
}

.vksb-dropdown-content a:hover {
	color: #707070;
	padding: 12px 16px;
	width: 245px;
	color: #014C78;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	height: 48px;
	text-decoration: none;
	display: block;
}

.vksb-dropdown-export.active{
	background-color: #fff;
	padding: 12px;
	width: 245px;
	height: 48px;
	font-family: Poppins;
	font-size: 16px;
	color: #000;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	border-radius: 4px;
	border: 1px solid #707070;

}

.vksb-dropdown-export-content{
	display: none;
	position: absolute;
	background-color: #fff;
	min-width: 160px;
	overflow: auto;
}

.vksb-dropdown-export-content a:hover {
	color: #707070;
	padding: 12px 16px;
	width: 245px;
	color: #014C78;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	height: 48px;
	text-decoration: none;
	display: block;
}

/*//////////////////////////// SIDE NAVIGATION /////////////////////////////////*/

.vksb-sidebar-menu {
	display: flex;
	width: 360px;
	height: 55px;
	padding: 10px 53px 12px 20px;
	align-items: center;
	gap: 46px;
	flex-shrink: 0;
	color: #36414F;
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.vksb-sidebar-menu:hover {
	background-color: #1BB1E6;
	border: none;
	width: 360px;
	height: 55px;
	padding: 13px;
	text-align: center;
	color: #FFF;
	font-family: Poppins;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;

}

/*//////////////////////////// LOGO /////////////////////////////////*/

.vksb-logo{
}

.vksb-logo-lg{
}

.vksb-logo-sm{
}

/*//////////////////////////// TAB /////////////////////////////////*/

.vksb-tab-horizontal{
}

.vksb-btn-trans{
	border: 1px solid #FFFFFF !important;
	border-radius: 5px;
	background-color: transparent;

}

.btn-external-exit{
	border: 1px solid white !important;
	border-radius: 5px;
	background-color: transparent;
}

.card-cert-digital{
	background: #012060;
	color: white !important;
	padding: 10px !important;
}

.card-cert-digital .cert-icon{
	max-width: 100%;
	max-height: 100%;
}
.card .cert-header{
	display: block;
	padding: unset !important;
	min-height: 0;
	border-bottom: 0px;
}
.card .cert-content{
	padding: 0;
}
.card .cert-footer{
	padding: 0;
	border-top: 0px;
	color: white;
}

.card-frasa{
	padding:0px !important;
}
.frasa-img{
	width: 100%;
}

/* LOGIN */

.logo-jpm{
	width: 100px;


}
.logo-dbkl{
	width: 70px;

}
.header-nav{
	padding-top:2%;
}
.container-dxl {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	width: 100%;
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
	margin-right: auto;
	margin-left: auto;
}

.selected-card {
	border: 5px solid #1BB1E6 !important;
}
.unselected-card {
	font-weight: bold;
	border: 5px solid transparent !important;
}
.no-border-input{
	border:0px;
}
.forgot-text:hover{
	text-decoration: underline;
}
.text-justify {
	text-align: justify;
	text-justify: inter-word;
}

.text-grey{
	color: grey;
}

.border-show{
    border: 1px solid;
}

.bg-grey{
	background-color: grey;
}

.form-select-menu{
	padding: 1rem;
	font-size:5spx !important;
}

.small-font{
	font-size: 12px;

}

.bg-transparent{
	background: transparent !important;
}

.bg-white-trans{
	background: #ffffff8a !important;
}

.card-no-border{
	box-shadow: none;
	border: 0px solid transparent !important;

}

.bg-menu-profile{
	background: #FFFFFF7D;
	/* border-left: 1px solid #000000; */
	padding-left:1rem !important;
	padding-right:1rem !important;

}

.sidebar-staff{
	margin-top: 0;
	position:fixed;
	min-height:100% !important;
	border-radius:0px;
	background-color: #FFFFFFB2;
	border: 0px;
}

.bg-cyan{
	background-color: #1BB1E6;
}

.btn-cyan:hover{
	background-color: #1BB1E6 !important;
}

.bg-cyan:hover{
	background-color: #1BB1E6 !important;
}

.bg-content-card{
	background: #FFFFFFB2;
}
.bg-kelabu{
	background: #CCD4D4;

}
.border-circle{
	border-radius: 45%;
}
.h-80vh{
	height: 80vh;

}
.h-100vh{
	height: 100vh;

}
.h-auto{
	height: auto !important;

}

.bg-search-card{
	background: #FFFFFFB2;

}

.no-border-radius{
	border-radius: 0px;
}

.btn-icon-login{
	border-radius: 10px;
}

.btn-submit-login{
	border-radius: 0 10px 10px 0;
}

.btn-submit-login:hover{
	background-color: #1BB1E6 !important;
}

.bg-merchant-card{
	background: #00000024;
}

.bg-log-card{
	background: #FFFFFF66;
}

.card .no-padding-header{
	display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    min-height: 70px;
    padding: 1rem 1rem;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: 1px solid var(--bs-card-border-color);
}

.no-padding-btn{
	padding: 0 !important;
}

.bg-sidebar-admin{
	background: #FFFFFFB2;

}

.cursor-pointer{
	cursor: pointer;
}

.card .card-service{

	display: flex;
	justify-content: center;
	align-items: center;
	height: 18vh;

}

.bg-gray {
	background: #d1d1d1;
}

.gap-8 {
	gap: 8rem !important;
}

.drawer-on{
	background-color: white !important;
}

.btn-daun{
	background: #238443;
}

.btn-daun:hover{
	background: #238443 !important;
	background-color: #238443 !important;
}

.btn-send{
	background: #1BB1E6;
}

.btn-jana{
	background: #C3242F;
}

.bg-light-gray {
	background: #A2A0A0;
}

.w-20 {
	width: 20% !important;
}

.w-25 {
	width: 25% !important;
}

.w-10 {
	width: 10% !important;
}

.w-5 {
	width: 5% !important;
}

.border-none{
	border: 0 !important;
	border-color: transparent !important;
}

.elesen-table tbody tr:nth-child(odd) {
    background-color: #F8F8F8 !important;
}
.elesen-table tbody tr:nth-child(even) {
    background-color: white !important;
}
.elesen-table thead,
.elesen-table tfoot {
    background-color: #A2A0A0 !important;
}

.code-panel-load {
	white-space: pre-line;
}

.form-control[readonly] {
    color: var(--bs-gray-500) !important;
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-300) !important;
    opacity: 1 !important;
}

.form-select[readonly] {
    color: var(--bs-gray-500) !important;
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-300) !important;
    opacity: 1 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

.w-80{
	width: 80% !important;
}

label::after{
	background-color: transparent !important;
}

.form-check-input[type=radio] {
    border-radius: 50%;
    border-color: black;
}

.form-floating>.form-textarea {
    height: auto !important;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 5px #f68003af, 0 0 10px #f68003af, 0 0 20px #f68003af;
    }
    50% {
        box-shadow: 0 0 10px #f68003af, 0 0 20px #f68003af, 0 0 30px #f68003af;
    }
    100% {
        box-shadow: 0 0 5px #f68003af, 0 0 10px #f68003af, 0 0 20px #f68003af;
    }
}

/* Apply the glowing effect to the input field */
.must-fill {
    border-color: #f68103fe;
    padding-right: calc(1.5em + 1.55rem);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .3875rem) center;
    background-size: calc(.75em + .775rem) calc(.75em + .775rem);
    animation: glow 1.5s infinite alternate; /* Apply the glow animation */
}

@keyframes glowError {
    0% {
        box-shadow: 0 0 5px #ec6a6aa4, 0 0 10px #ec6a6aa4, 0 0 20px #ec6a6aa4;
    }
    50% {
        box-shadow: 0 0 10px #ec6a6aa4, 0 0 20px #ec6a6aa4, 0 0 30px #ec6a6aa4;
    }
    100% {
        box-shadow: 0 0 5px #ec6a6aa4, 0 0 10px #ec6a6aa4, 0 0 20px #ec6a6aa4;
    }
}
.error-fill {
    border-color: #ec6a6aa4;
    padding-right: calc(1.5em + 1.55rem);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .3875rem) center;
    background-size: calc(.75em + .775rem) calc(.75em + .775rem);
    animation: glowError 1.5s infinite alternate; /* Apply the glow animation */
}

.btn-equal {
    width: 220px;
    height: 80px;
    display: inline-block;
    text-align: center;
}

.box-shadow-bold{
    box-shadow: 0px 3px 4px 7px rgba(0, 0, 0, 0.03);
}

.flex-column-fluid-quater {
    flex: 0.25 0 auto;
}

.btn-dark-purple{
	background: #1A027C !important;
}