/* CAS - temp, for instruction blurbs */
.tut-blurb {
	background-color: rgb(248, 245, 235);
	font-weight: 600;
	border-radius: 10px;
	border-width: 2px;
	border-color: rgb(74, 85, 65);
	border-style: solid;
	width: auto;
	height: auto;
	padding: 25px 30px 25px 30px;
	margin-bottom: 15px;
	font-size: 18px;
}

p.price {
	color: darkgreen;
}

p.warning {
	color: crimson;
	font-weight: bolder;
}

/* pagination */
.pagination-arrow {
	padding-bottom: 3px;
	filter: brightness(0) saturate(100%) invert(10%) sepia(100%) saturate(6492%) hue-rotate(247deg) brightness(82%) contrast(137%);
}

/* to change SVG icon colours */
.filter-green {
	filter: brightness(0) saturate(100%) invert(33%) sepia(27%) saturate(7137%) hue-rotate(140deg) brightness(86%) contrast(80%);
}
.filter-red {
	filter: invert(37%) sepia(61%) saturate(4115%) hue-rotate(337deg) brightness(100%) contrast(89%);
}

.button-disabled {
	opacity: 0.3 !important;
}

.save-indicator {
	opacity: 0;
	transition: opacity 200ms ease-out;
}

.item-card {
	transition: filter 200ms;
}
.item-card:hover {
	filter: brightness(94%);
}
.item-card-fixed-body {
	height: 100px;
}
.item-card-title {
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3; /* truncate at 3 lines */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* for elements _on top_ of stretched link */
.item-card-ontop {
	z-index: 2;
	position: relative;
	transition: filter 200ms;
}
.item-card-ontop:hover {
	filter: brightness(94%);
}

/* heart on ItemList items */
.hoverheart.wanted > .heart-on {
	display: initial;
	z-index: 3;
	position: relative;
	cursor: pointer;
}
.hoverheart > .heart-off {
	cursor: pointer;
}
.hoverheart.wanted > .heart-off {
	display: none;
}
.hoverheart:not(.wanted) > .heart-on {
	display: none;
}
.hoverheart > .heart-disabled {
	pointer-events: none;
}
@media (pointer: fine) {
	.hoverheart:not(.wanted):not(:hover) > .heart-off {
		opacity: 0;
	}
	.heart-off {
		transition: opacity 500ms;
	}
}

/* big heart on ItemView */
.bigheart.wanted > .heart-on {
	display: initial;
	cursor: pointer;
}
.bigheart > .heart-off {
	cursor: pointer;
}
.bigheart.wanted > .heart-off {
	display: none;
}
.bigheart:not(.wanted) > .heart-on {
	display: none;
}
.bigheart > .heart-disabled {
	pointer-events: none;
}

.item-list {
	height: 216px;
	white-space: pre;  /* no wordwrap */
	overflow-wrap: normal;
	overflow-x: auto;
}

.notice-table {
	height: 99px;
}

.single-line-clamp {
	display: -webkit-box;
	line-clamp: 1;
	-webkit-line-clamp: 1; /* truncate at 1 lines */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nottraded-result {
	height: 56px;
}

/* don't scale img */
.img-no-scale {
	display: block;
	object-fit: cover;
}

/* fit to vertical content */
.fit-vertically {
	height: fit-content !important;
}

.bigcheckbox {
	transform : scale(4);
	transform-origin: top left 0;
}

/* navbar */
#navuser, #navlogin {
	color: rgb(101, 176, 165);
}
#navlogin {
	text-decoration: underline;
}

.icon-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	font-size: 1.5rem;
	border-radius: .75rem;
	background-color: hsl(63, 17%, 74%) !important;
}

/* carousel (carousel gets its height from contained img, but width from container col setting)*/
.carousel-img {
	height: 268px;
	object-fit: cover;
}
@media (min-width: 576px) {
	.carousel-img { height: 393px; }
}
@media (min-width: 768px) {
	.carousel-img { height: 530px; }
}
@media (min-width: 992px) {
	.carousel-img { height: 408px; }
}
@media (min-width: 1200px) {
	.carousel-img { height: 488px; }
}
@media (min-width: 1400px) {
	.carousel-img { height: 569px; }
}

footer {
	box-shadow: 0 50vh 0 50vh var(--bs-body-bg);  /* trick to run footer colour off page bottom */
}

.main-image-col {
	height: 240px;
}
.featurette-main-image {
	position: absolute;
	z-index: -1;
	height: 206px;  /* base size/pos for xs size */
	width: 370px;
	top: 2rem;
	left: 0rem;
}
@media (min-width: 576px) {
	.main-image-col { height: 300px; }
	.featurette-main-image { height: 278px; width: 500px; top: 2rem; left: 0rem; }
}
@media (min-width: 768px) {
	.main-image-col { height: 350px; }
	.featurette-main-image { height: 390px; width: 700px; top: -2rem; left: 1rem; }
}
@media (min-width: 992px) {
	.main-image-col { height: 540px; }
	.featurette-main-image { height: 446px; width: 800px; top: 6rem; left: -13rem; }
}
@media (min-width: 1200px) {
	.main-image-col { height: 501px; }
	.featurette-main-image { height: 501px; width: 900px; top: 0rem; left: -13rem; }
}
@media (min-width: 1400px) {
	.main-image-col { height: 540px; }
	.featurette-main-image { height: 557px; width: 1000px; top: -1rem; left: -17rem; }
}
/* CAS - could change Bootstrap font sizes on smaller devices ...
@media (max-width: 576px) {
	html {
		font-size: 10px;
	}
}
*/
.featurette-divider {
	margin: 3rem 0; /* Space out the Bootstrap <hr> more */
	opacity: 0.3;
	background: url('/static/tradeapp/images/logo32bw.png') no-repeat top center;
	background-size: contain;
	display: block;
	height: 32px;
	border: 0;
	position: relative;
}
.featurette-divider:before,
.featurette-divider:after {
	content: '';
	display: block;
	position: absolute;
	height: 2px;
	top: 15px;
}
.featurette-divider:before {
	left: 0;
	right: 50%;
	margin-left: 5%;
	margin-right: 30px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}
.featurette-divider:after {
	right: 0;
	left: 50%;
	margin-right: 5%;
	margin-left: 30px;
	background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}

.fancy-list ul {
	list-style-type: none;
	padding-left: 0rem;
	margin-top: 15px;
}
.fancy-list li {
	margin-top: 10px;
	padding-left: 25px;
	background-image: url('/static/tradeapp/images/plus_sign.png');
	background-repeat: no-repeat;
	background-size: auto auto;
	background-position-y: 0.3rem;
}

/* SweetAlert2 textarea fix */
.swal2-modal-textarea {
	height: 200px !important;
	resize: none;
}

/* Dropzone (image uploader) */
.dropzone {
	border-style: dashed !important;
	border-radius: 10px !important;
}
/* Dropzone thumbnail size (CAS - will need different sizes for different types of images: Item, Trader, etc.) */
.dropzone#item-image-dropzone .dz-preview .dz-image {
	width: 200px !important;
	height: 150px !important;
}
.dropzone#trader-image-dropzone .dz-preview .dz-image {
	width: 400px !important;
	height: 400px !important;
}
.dropzone#event-image-dropzone .dz-preview .dz-image {
	width: 400px !important;
	height: 400px !important;
}

input[type="search"]::-webkit-search-cancel-button {

	/* Remove default */
	-webkit-appearance: none;
	  
	/* Now your own custom styles */
	height: 10px;
	width: 10px;
	background: red;
	/* Will place small red box on the right of input (positioning carries over) */
}

/* Hide scroll buttons in number input boxes */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Firefox */
input[type=number] {
	appearance: textfield;
	-moz-appearance: textfield;
}