.hr-line {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 1px solid #333;
}
.hr-double {
	margin: 20px 0;
	padding: 0;
	height: 1px;
	border: none;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
}
.hr-multiline {
	margin: 20px 0;
	padding: 0;
	height: 20px;
	border: none;
	color: #333;
	background-image: linear-gradient(currentColor, currentColor 33.33%, transparent 33.33%, transparent 100%);
	background-size: 100% 3px;
}
.hr-two-color {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 2px solid var(--hpColor);
	border-bottom: 2px solid var(--hsColor);
}
.hr-three-color {
	margin: 20px 0;
	padding: 0;
	height: 2px;
	border: none;
	border-top: 2px solid var(--hpColor);
	border-bottom: 2px solid var(--hsColor);
	background: var(--htColor);
}
.hr-horizontal-gradient {
	margin: 20px 0;
	padding: 0;
	height: 6px;
	border: none;
	background: linear-gradient(45deg, #333, #ddd);
}
.hr-vertical-gradient {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	background: linear-gradient(180deg, var(--hpColor);, var(--hsColor));
}
.hr-shadow {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	border-top: 1px solid #333;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
.hr-washed {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	box-shadow: 0 0 10px 1px black;
}
.hr-shelf {
	margin: -30px auto 10px;
    padding: 0;
    height: 50px;
    border: none;
    border-bottom: 1px solid #dcdcdc;
    box-shadow: 0 20px 20px -20px #333;
    width: 100%;
}
.hr-dashed {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 2px dashed #ddd;
}
.hr-dashed-bg {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 2px dashed #ddd;
	background: #999;
}
.hr-dashed-gradient {
	margin: 20px 0;
	padding: 0;
	height: 2px;
	border: none;
	background: linear-gradient(to right, transparent 50%, #fff 50%), 
				linear-gradient(to right, blue, red);
	background-size: 16px 2px, 100% 2px;
}
.hr-dotted {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 2px dotted #ddd;
}
.hr-circle {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-width: 0 0 5px;
	border-style: solid;
	border-image: url('data:image/svg+xml,<svg fill="var(--hpColor)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" width="8" height="4"><circle cx="1" cy="0.5" r="0.5"></circle></svg>') 0 0 100% repeat;
	background-position: 50%;
	box-sizing: border-box;
	color: var(--hpColor);
}
.hr-vertical-lines {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	color: var(--hpColor);
	background-image: linear-gradient(90deg, var(--hpColor);, var(--hpColor); 33.33%, transparent 33.33%, transparent 100%);
	background-size: 3px 100%;
}
.hr-sloping-lines {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	box-sizing: border-box;
	background-position: 50%;
	color: var(--hpColor);
	background-image: url('data:image/svg+xml,<svg fill="var(--hpColor)" xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"></polygon><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"></polygon></svg>');
	background-size: 6px 6px;
}
.hr-inclined-right { 
	margin: 25px 0 40px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 1px solid #333;
	transform:rotate(-2deg);
}
.hr-inclined-left { 
	margin: 25px 0 40px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 1px solid #333;
	transform:rotate(2deg);
}