:root{
	--color-blue:#207fdb;
	--color-green:#45d741;
}

.bg-blue{
	background-color: var(--color-blue);
}
.bg-green{
	background-color: var(--color-green);
}
.text-blue{
	color: var(--color-blue);
}
.text-green{
	color: var(--color-green);
}

.btn-success{
	--bs-btn-bg:var(--color-green);
	--bs-btn-border-color:var(--color-green);
}

.index-banner{
	height: clamp(320px,45vw,520px);
}
.index-banner img{max-width: 100%;}

.text-shadow-blue{
	text-shadow:1px 1px 2px black,0 0 1em var(--color-blue),0 0 0.2em var(--color-blue);
}

#right-tools li{
	--li-size:40px; 
	--icon-size:1.4rem; 
	--li-gap:calc((var(--li-size) - var(--icon-size)) / 2) ;
	--li-width:calc(var(--li-size) + 4em + var(--li-gap) * 3);
	--li-bottom:calc(100vh / 2 - 60px);
	transition:all 0.5s;
	position:fixed;
	width:var(--li-width);
	height: var(--li-size);
	right:calc( var(--li-size) - var(--li-width) );
	color:#fff;
	background:rgba(0,0,0,0.4);
	padding-left:var(--li-gap) ; 
	display:flex;
	align-items:center;
	gap: calc(var(--li-gap) * 2);
	font-size:14px; 
	cursor:pointer;
	z-index:1000;
}

#right-tools li i{
	font-size: var(--icon-size);
}

#right-tools li:nth-last-child(5){
	bottom:calc( var(--li-bottom) + var(--li-size) * 4 + 4px );
}

#right-tools li:nth-last-child(4){
	bottom:calc( var(--li-bottom) + var(--li-size) * 3 + 3px );
}
	
#right-tools li:nth-last-child(3){
	bottom:calc( var(--li-bottom) + var(--li-size) * 2 + 2px);
}
	
#right-tools li:nth-last-child(2){
	bottom:calc( var(--li-bottom) + var(--li-size) + 1px );
}
	
#right-tools li:nth-last-child(1){
	bottom:var(--li-bottom);
}

#right-tools li:is(:hover,.active,[aria-describedby])
{
	right:0px!important;
	background:rgba(0,0,0,0.5);
}