@import url("./root.css");
@import url("./variable.css");
@import url("./circular.css");

.main-content-wrapper, .auto-hide-scroll {
	scrollbar-width: none;
	scrollbar-color: #1e90ff;
}

.sidebar-main-controller {
	scrollbar-width: none;
}

.auto-add-bg-image {
	position: relative;
	z-index: 10;
}

.auto-add-bg-image::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.9)),url("/bank_images/bank_logo.png");
	background-size: 20% 45px;
	background-repeat: repeat;
	background-position-x: left;
	background-position-y: 40%;
	z-index: -10;
}

.auto-add-b-bg:nth-child(odd) {
	background-color: #f9f9f9;
	padding-top: 7px;
	padding-bottom: 7px;
}

.hide-card-details {
	display: none !important;
}

.show-card-details {
	display: flex !important;
}

.mobile-menu-h{
	--open-mobile-menu: -100%;
	transform: translateX(var(--open-mobile-menu));
	transition: all 300ms linear;
}

.gt_switcher-popup.glink.nturl.notranslate img {
	width: 20px !important;
	height: 20px !important;
}

.gt_switcher-popup.glink.nturl.notranslate img ~ span {
	font-size: 13px !important;
	font-weight: 550;
}

.bank-card-holder[data-active] {
	--activate-view-mode: 999;
	--activate-scale-mode: 1;
	z-index: var(--activate-view-mode);
	transform: scale(var(--activate-scale-mode));
}

.remove-outer-inner-icon {
	-moz-appearance: textfield;
} 

input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

label[for='attach-file'] {
	--after-content-val: "";
	--after-opa-val: 0;
	--before-opa-val: 0;
}

label[for='attach-file']::after {
	content: var(--after-content-val);
	width: max-content;
	opacity: var(--after-opa-val);
	background-color: white;
	padding: 4px 7px;
	font-weight: 550;
	font-size: 13px;
	transition: all 300ms linear;
	position: absolute;
	top: -165%;
	left: -150%;
	box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
}

label[for='attach-file']::before {
	content: "";
	position: absolute;
	opacity: var(--before-opa-val);
	top: -100%;
	left: -20%;
	width: 18px;
	transition: all 1000ms linear;
	height: 18px;
	background-color: #1e90ff;
	transform: rotate(45deg);
}

/* .main-content-wrapper::-webkit-scrollbar {
	width: 10px;
	height: 100%;
	background-color: #1e90ff80;
}

.main-content-wrapper::-webkit-scrollbar-thumb {
	width: 100%;
	height: 50%;
	background-color: #1e90ff;
} */