/*  protype styles */
#cart-icon {
color: white;
text-decoration: none;
margin: 5px;
position: relative;
display: inline-block;
border-radius: 2px;
}

#cart-icon:hover {
background: red;
}

#cart-icon #cart-icon-counter {
position: absolute;
display: inline-block;
top: -10px;
right: -10px;
padding: 1px 6px;
border-radius: 100%;
background: red;
color: white;
}


/* ~~final styles~~ */

/* add's an empty block of 60px before the body */
body::before{
	display: block;
	content: '';
	height: 76px;
	background-color: yellow;
}
 
/* color palette */
.pal-dark{
	background-color: #1b1717;
}
.pal-light{
	background-color: #f6f3e9;
}
.pal-red{
	background-color: #ce1212;
}
.pal-darkred{
	background-color: #810000;
}

/* ~~~~~ header and footer ~~~~~ */
.logo-text-pos{
	display: inline; 
	vertical-align: middle;
}
.nav-acct-btn{
	border: solid; 
	border-width: thin; 
	border-radius: 3px;
}


/* ~~~~~ homepage ~~~~~ */
.home-bg-img1{
	/* cant have template tags in css */ 
	
}
.home-btn1{
	background-color: #ce1212; 
	padding: 0.575rem 0.75rem;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
	border: none;
	border-radius: 0.375rem;
}
.home-btn1:hover {
	color: #810000;
	background-color: #810000;
}

/* smaller button for 4 item grids */ 
.home-btn2{
	background-color: #ce1212; 
	padding: 0.380rem 0.65rem;
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
	border: none;
	border-radius: 0.375rem;
}
.home-btn2:hover {
	color: #810000;
	background-color: #810000;
}
.feat-btn-loc{
	background-color: rgba(0,0,0,0);
	height: 4%; 
	width: 20%; 
}
.feat-img-btn{
	position: absolute; 
	top: 0; 
	left: 0; 
	height: 100%; 
	width: 100%;
	font-size: 0.9rem;  
}
.feat-title-banner{
	background-color: rgb(0,0,0,0.6); 
	position: absolute; 
	top: 88%;
	height: 50px; 
}
.feat-title{
	font-weight: bold; 
	position: absolute; 
	top: 10%; 
	left: 33%;
}
.slide-btn{
	height: 10px; 
	width: 20px; 
	border-radius: 5px; 
	border-color: black; 
	background-color: black;
}
.text-border1{
	font-weight: bold;
	border: 1px solid #B1B1B1;
	border-radius: 10px; 
	background-color: rgba(149,9,9,0.8); 
}
.black-outline{
	text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
}
.white-outline{
	text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #000, 0px -1px 0 #fff;
}

/* ~~~~~ gallery ~~~~~ */ 
.gallery-img{
	height: 270px;
	object-fit: cover;
}
.gallery-img2{
	height: 340px;
	object-fit: cover;
}
.gallery-img3{
	height: 255px;
	object-fit: cover;
}
.modal-qty-btn1{
	background-color: #ce1212; 
	padding: 0.425rem 0.95rem;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
	border: none;
	border-radius: 0.375rem;
}
.modal-qty-btn1:hover {
	color: #810000;
	background-color: #810000;
}
.modal-close-btn{
	width: 1.6rem;
	border-radius: 6px;
}
.item-frame{
	position: absolute;
	top: 18.9rem;
	width: 19.9rem;
	height: 80px; /* 80px */
	max-height: 80px;
}
.frame-pos{
	background-repeat: no-repeat; 
	background-size: 100% 100%;
}
.frame-pos.hide-bg{
	background-image: none;
}


/* ~~~~~ item view ~~~~~ */ 
.progress-bar {
	position: relative;
	width: 100%;
	height: 3em;
	background-color: #111;
	border-radius: 0.25em;
	color: white;
}

.progress-bar::before {
	content: attr(data-label);
	display: flex;
	align-items: center;
	position: absolute;
	left: .5em;
	top: .5em;
	bottom: .5em;
	width: calc(var(--width, 0) * 1%); /* 0% - 2000% */
	min-width: 2rem;
	max-width: calc(100% - 1em);
	background-color: #ce1212;
	border-radius: 0.20em;
	padding: 1em;
}
.dash-img-border {
	border: solid white 3px;
}

/* ~~~~~ login/register ~~~~~ */ 
.reg-form > div {
	margin-bottom: .5rem !important;
}
.reg-form-profile > div {
	margin-bottom: .5rem !important;
}
.logout-form > button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
}
/*
.logout-form > button:hover {
	background-color: #BEBEBE;
}
*/

/* ~~~~~~ cart checkout ~~~~~~ */
/* get all elements in last child of tr */
.cart-row > tr:last-child *{
    border: none;
    padding-bottom: 0;
}

/* ~~~~~~ update background ~~~~~~ */
/* thumb image selections need to be inside <label> tag */
.thumb-size1 {
	height: 7rem;
	width: 7rem;
	object-fit: cover;
}
.thumb-field > [type=radio] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.thumb-field > [type=radio] + img {
  cursor: pointer;
}
.thumb-field > [type=radio]:checked + img {
  outline: 2px solid #f00;
}