.ref_banner_container {position:relative;}
.ref_banner_container .bg-img {border-radius:1rem 1rem 0 0;}
.ref_banner_container .ref_banner_overlay {
	position:relative;
	margin-top:-10px;
	padding: 1rem;
	border-radius: 0 0 1rem 1rem;
	background: var(--ref-banner-1-main-bg-color);
}
.ref_banner_container .ref_banner_overlay .ref_banner_overlay_content {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:1rem;
}
.ref_banner_container .ref_banner_overlay .text-lg-bold {font-size:24px;font-weight:600;line-height:2rem;color:var(--color2)}
.ref_banner_container .ref_banner_overlay ._text-sm {margin-top:.25rem;font-size:13px;color:var(--color2)}
.ref_banner_container .ref_banner_overlay .text-sm-bottom {color:var(--color2);font-size:15px;margin-top:.6rem;}
.ref_banner_container .ref_banner_overlay .ref_banner_overlay_footer {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .6rem;
}
/* .ref_banner_container .ref_banner_overlay .ref_banner_overlay_footer .link-item {padding-right:5px !important;} */
.ref_banner_container .ref_banner_overlay .ref_banner_overlay_footer .link-item .link-btn{
	display:block;
	padding:6px;
	border-radius:7px;
	background:var(--ref-banner-1-link-btn-bg-color);
	color:var(--ref-banner-1-main-color);
}
#shareModal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    max-width: 100%;
    height: 70% !important;
    min-height:unset !important;
    display: flex;
    align-items: flex-end;
}
#shareModal.show .modal-dialog {
    transform: translateY(0);
}
#shareModal .modal-header {
	padding:7px 22px 0 !important;
	background:transparent !important;
}
#shareModal .modal-header:after {
	content: '';
	border-bottom:none !important;
}
#shareModal .modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding:.89rem !important;
}
#shareModal .modal-content {
    width: 100%;
    height: 100%;
    border-radius: 15px 15px 0 0;
    display: flex;
    flex-direction: column;
    background:var(--color2) !important;
}
#shareModal .modal-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: white;
    padding: 10px;
    display: flex;
    justify-content: space-around;
}
#shareModal ._modal-title {color:var(--color1);font-size:22px;margin-bottom:20px;}
#shareModal .modal-content .share_btn_container {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	gap:10px;
}
#shareModal #qrcodeStyling img {width:180px;margin:auto;}
#shareModal #qrcodeStyling canvas {display:none;}