/* 
* Components 
*   -- custom styles for elements, buttons, cards , filters , form elements
* Layouts
* Utils 
* Reused components/ pages
*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Sora:wght@100;200;300;400;500;600;700;800&display=swap");

:root {
	/* fonts */
	--body-family: "Manrope", sans-serif;
	--heading-family: "Sora", sans-serif;
	/* colors */
	--orange: #ff9900;
	--orange-light: #ffb340;
	--orange-dark: #e68a00;
	--yellow: #ffce00;
	--yellow-light: #ffe133;
	--blue: #3d7dfd;
	--blue-light: #84b6ff;
	--blue-dark: #1a5fc4;
	--red: #fd8a6f;
	--green: #89ce7e;
	--dark: #323232;
	--grey: #dedede;
	--dark-slate-grey: #484746;
	--dark-grey: #312f2d;
	--medium-grey: #9f9f9e;
	--light-slate-grey: #e8e8e8;
	--light-grey: #eeeeee;
	--purple: #907ee8;
	--purple-light: #b1a9ea;
	--purple-dark: #7062d3;
	--whitesmoke-light: #f7f7f7;
	--whitesmoke: #f9f9f9;
	--light: #f4f4f4;

	/* disabled element colors  */
	--grey-disabled: #cfcfcf;
	--purple-disabled: #e2e0f3;
	/* Bidstats colors */
	--business-color: #b5d68d;
	--construction-color: #e2cb78;
	--defence-color: #d7d1a2;
	--environment-color: #b28f64;
	--facility-color: #96cfb7;
	--health-color: #8d88c7;
	--industrial-color: #d78a69;
	--miscellaneous-color: #cb8dd6;
	--professional-color: #6c8398;
	--technology-color: #7bab73;
	--transport-color: #ddb3a9;

	/* box shadows */
	--box-shadow-1: 0px 4px 16px 0px #b0bace66;
	--box-shadow-2: 0px 4px 15px 0px #0000000f;
	--box-shadow-3: 0px 4px 16px 0px #907ee880;
	--box-shadow-4: 0px 16px 16px 0px #00000040;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--body-family);
	color: var(--dark-slate-grey);
	background-color: var(--whitesmoke-light);
	font-size: 14px;
	line-height: 135%;
	font-weight: 400;
	word-break: break-word;
}

.body-lg {
	font-size: 18px;
	line-height: 145%;
}

.body-sm {
	line-height: 125%;
	font-size: 14px;
}

.small-text {
	font-size: small;
}

a {
	color: var(--blue);
	cursor: pointer;
}

a .fa-arrow-up-right-from-square {
	color: var(--dark-grey);
	margin-left: 8px;
	font-size: smaller;
}

p,
h6 {
	margin-bottom: 10px;
}

img,
object {
	max-width: 95%;
}

.container-axiom {
	margin: auto;
	max-width: 1382px;
}

.w-fit {
	width: fit-content !important;
}
img,
object {
	max-width: 100%;
}

/* headings */

h1,
h2,
h3,
h4,
.h1 {
	font-family: var(--heading-family);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1 {
	font-weight: 700;
	color: var(--dark-grey);
}

h1,
.h1 {
	font-size: 39px;
	line-height: 120%;
}

h2 {
	font-size: 30px;
	line-height: 120%;
}

h3 {
	font-size: 28px;
	line-height: 110%;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

details summary::-webkit-details-marker {
	display: none;
}

summary {
	display: flex;
}

.heading-family {
	font-family: var(--heading-family);
}

.body-family {
	font-family: var(--body-family);
}

@media screen and (max-width: 1279px) {
	h1 {
		font-size: 30px;
	}
}

/*************************** Components ************************/

/***************** Buttons *****************/

button {
	border: none;
	outline: none;
	/* font-family: "Sora", sans-serif; */
	font-weight: 500;
	align-items: center;
	padding: 13px 24px;
	border-radius: 8px;
	font-size: inherit;
	max-height: fit-content;
}

button.rounded {
	border-radius: 30px !important;
}

button:not(.text-button):hover {
	filter: brightness(105%);
}

button[disabled]:hover {
	filter: unset;
}

button.primary:hover,
button.primary {
	background-color: var(--orange);
	color: white;
}

button.primary-outlined {
	background-color: transparent;
	border: 1px solid var(--orange);
	color: var(--orange);
}

button.purple {
	background-color: var(--purple);
	color: white;
}

button.purple[disabled] {
	background-color: var(--grey-disabled);
}

.purple-outlined,
button.purple-outlined {
	color: var(--purple);
	border: 1px solid var(--purple);
	background-color: white;
}

.white-outlined,
button.white-outlined {
	color: white;
	background-color: transparent;
	border: 1px solid white;
}

.white-outlined[disabled],
.purple-outlined[disabled] {
	border-color: var(--grey-disabled);
	color: var(--grey-disabled);
}

button.white-outlined[disabled] img,
button.purple-outlined[disabled] img {
	filter: grayscale(90%);
	filter: brightness(150%);
}

.black-outlined,
button.black-outlined {
	background-color: transparent;
	color: var(--dark-grey);
	border: 1px solid var(--dark-grey);
}

button.layout-btn {
	padding: 0;
	display: flex;
	align-items: center;
	height: fit-content;
	gap: 10px;
	background-color: transparent;
}

button.text-button {
	background-color: transparent;
}

/***************** Form Elements *****************/

.form-control,
.form-select {
	border-color: var(--medium-grey);
	border-radius: 8px;
	padding: 10px 24px;
	font-size: 14px;
}

.form-label {
	font-weight: 700;
	color: var(--dark-slate-grey);
}

.form-control[disabled],
.form-select[disabled] {
	border-color: var(--grey-disabled);
	background-color: white;
}

/* custmized switch component */
.switch {
	width: 85px;
	max-width: 85px;
	height: 30px;
	border: 1px solid var(--purple);
	border-radius: 8px;
	display: flex;
	position: relative;
	font-weight: 700;
	background-color: white;
	cursor: pointer;
}

.switch input {
	display: none;
}

.switch-button {
	padding: 4px 8px;
	display: grid;
	place-content: center;
	background-color: var(--red);
	color: white;
	border-radius: 8px;
	-webkit-transition: 500ms ease-out;
	transition: 500ms ease-out;
	width: 42px;
}

.switch-button::before {
	content: "OFF";
}

.switch input:checked + .switch-button {
	background-color: var(--green);
	transform: translate(99%);
}

.switch input:checked + .switch-button::before {
	content: "ON";
}

/***************** Details elements / custom accordion *****************/

#sidebar .axiom-card details {
	margin-bottom: 24px;
}

#sidebar .axiom-card summary {
	gap: 15px;
	font-weight: 700;
	align-items: center;
	/* margin-bottom: 15px; */
}

#sidebar .axiom-card details > * {
	width: 100%;
}

#sidebar .axiom-card details > *:not(summary, :last-child) {
	margin-bottom: 15px;
}

#sidebar .axiom-card summary::before {
	content: url(../media/icons/chevron-right.svg);
}

#sidebar .axiom-card details[open] summary::before {
	content: url(../media/icons/chevron-down.svg);
}

#sidebar .axiom-card details[open] summary {
	margin-bottom: 15px;
}

/************ sidebar - purple outlined checkboxes ***********/

.purple-outlined-custom-checkbox {
	display: block;
}

.purple-outlined-custom-checkbox input {
	visibility: hidden;
}

.purple-outlined-custom-checkbox h6 {
	font-family: var(--heading-family);
}

.purple-outlined-custom-checkbox > div {
	padding: 15px 25px;
	border: 1px solid var(--purple);
	border-radius: 8px;
}

.purple-outlined-custom-checkbox > div > * {
	margin-bottom: 0;
}

.purple-outlined-custom-checkbox input:checked + div > * {
	color: white !important;
}

.purple-outlined-custom-checkbox input:checked + div {
	background-color: var(--blue);
}

/***************** Tags *****************/

.tag-wrapper {
	display: flex;
	gap: 15px;
}

.tag,
.tag-btn {
	border-radius: 8px;
	background-color: var(--purple-light);
	color: white;
	display: flex;
}

.tag {
	font-weight: 700;
	width: 100%;
	padding: 4px 8px;
	justify-content: space-between;
	align-items: center;
}

.small-tag {
	width: fit-content;
	gap: 20px;
}

.tag-btn {
	width: 35px;
	height: 30px;
	font-size: 12px;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.tag-wrapper .filter-tag > *:first-child {
	max-width: 50%;
	word-break: break-word;
}

/***************** Modals *****************/

.custom-modal {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	z-index: 100;
	overflow-y: scroll;
	display: none;
}

.backdrop {
	background-color: #00000050;
	display: grid;
	place-content: center;
	padding: 10px;
	min-height: 100%;
}

.custom-modal-content {
	background-color: white;
	padding: 30px 40px;
	border-radius: 8px;
	box-sizing: border-box;
	max-width: 90vw;
}

@media screen and (min-width: 1280px) {
	.custom-modal-content {
		width: fit-content;
	}

	.backdrop {
		padding: 50px 30px;
	}
}

/***************** Alerts *****************/
.alert {
	background-color: var(--purple-disabled);
	max-width: 1024px;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
}

/***************** Banners *****************/
.warning-banner {
	background-color: var(--yellow-light);
}

.banner .container-axiom,
.banner-desc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.banner .container-axiom {
	padding: 20px 0px;
	column-gap: 40px;
}

.banner .container-axiom p,
.banner-desc p {
	margin-bottom: 0;
}

@media screen and (min-width: 1280px) {
}
/***************** Tender Skeleton *****************/

.tender-skeleton {
	display: contents;
}

.skeleton-row {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
}

.skeleton-group {
	width: 100%;
	padding: 15px;
}

.skeleton-card {
	background: #f1f1f1;
	padding: 30px;
	border-radius: 10px;
	border: 1px solid #ddd;
}

.sk-description .sk-line {
	background: #d9d9d9;
	border-radius: 10px;
	height: 13px;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
}

.sk-description .sk-line-1 {
	width: 85%;
}

.sk-description .sk-line-3 {
	width: 60%;
}

.skeleton-card .sk-btns {
	display: flex;
	margin-top: 30px;
}

.skeleton-card .sk-btns .sk-btn {
	height: 15px;
	width: 100%;
	background: #d9d9d9;
	border-radius: 25px;
	position: relative;
	overflow: hidden;
}

.sk-btns .sk-btn-1 {
	margin-right: 40px;
}

.sk-btns .sk-btn-2 {
	margin-left: 40px;
}

.sk-description .sk-line::before,
.sk-btns .sk-btn::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	background-image: linear-gradient(to right, #d9d9d9 0%, rgba(0, 0, 0, 0.07) 20%, #d9d9d9 40%, #d9d9d9 100%);
	background-repeat: no-repeat;
	background-size: 450px 400px;
	animation: shimmer 1s linear infinite;
}

.sk-details span::before {
	animation-delay: 0.2s;
}

.sk-btns .sk-btn-2::before {
	animation-delay: 0.22s;
}

@keyframes shimmer {
	0% {
		background-position: -450px 0;
	}
	100% {
		background-position: 450px 0;
	}
}

@media only screen and (max-width: 767px) {
	.skeleton-row {
		flex-direction: column;
	}

	.skeleton-group {
		width: calc(100% - 30px);
		padding: 15px;
	}
}

/* used 1279 instead of 1280 to ensure it displays properly on laptops  */
@media screen and (max-width: 1279px) {
	.breadcrumbs {
		width: 100%;
	}
}

/***************** Cards *****************/
.card-wrapper {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

/* plain white card with brand styles */
.axiom-card {
	background-color: white;
	padding: 30px 40px;
	border-radius: 8px;
}

.axiom-card.disabled {
	background-color: var(--purple-disabled);
}

/********************************** Layout **********************************/

/****************** Header ******************/
header {
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
	padding: 15px;
	background-color: white;
	width: 100%;
	z-index: 10;
}

header img {
	height: 45px;
}

header a:hover,
header a:active,
header a:focus,
    /* active nav class */
header a.active {
	color: var(--orange) !important;
}

#grid_btn.disabled,
#list_btn.disabled {
	filter: grayscale(100%);
	color: var(--medium-grey);
}

#grid_btn,
#list_btn {
	color: var(--purple);
}

#top-nav-wrapper {
	font-weight: 700;
	flex-direction: column;
	margin-top: 20px;
	padding: 0;
	display: none;
	width: 100vw;
}

#top-nav-wrapper a {
	text-decoration: none;
	color: inherit;
	border-top: 1px solid var(--grey);
	padding: 30px 24px;
	margin: 0 -15px;
	display: block;
}

#top-nav-wrapper button {
	width: 100%;
	height: 100%;
}

#toggle-nav {
	width: 25px;
	padding: 0;
	background-color: transparent;
}

.header-dropdown {
	display: none;
	background-color: var(--light);
	margin: 0px -15px 0px -15px;
	padding: 0px 30px;
}

.header-dropdown.open {
	display: block;
}

.header-dropdown h6 img {
	max-width: 24px;
	max-height: 24px;
	margin: auto 10px auto 0;
}

@media screen and (min-width: 1279px) {
	header {
		padding: 0px;
		height: 90px;
	}

	#toggle-nav {
		display: none;
	}

	#top-nav-wrapper a {
		margin: unset;
		padding: unset;
		border: unset;
		display: initial;
	}

	#top-nav-wrapper {
		display: flex;
		margin-top: 0;
		flex-direction: row;
		width: auto;
		align-items: stretch;
	}

	#top-nav-wrapper > * {
		display: flex !important;
		align-items: center !important;
		padding: 0 20px !important;
	}

	#top-nav-wrapper button {
		height: fit-content;
	}

	.header-dropdown {
		position: absolute;
		top: 90px;
		left: 0;
		width: 100vw;
		background-color: var(--whitesmoke-light);
		padding: 0 30px;
		margin: 0;
		box-shadow: var(--box-shadow-4);
		z-index: 10;
		color: var(--medium-grey);
		font-weight: 400;
	}

	/* .dropdown-menu.show   .header-dropdown.show*/
	.header-dropdown-wrapper:has(.header-dropdown.open) {
		border-top: 5px solid var(--purple);
		box-sizing: content-box;
		background-color: var(--whitesmoke-light);
	}

	.dropdown-header-menu.open {
		padding: 0;
		left: auto;
		width: 115px;
		border: none;
		border-radius: 0;
		font-size: 14px;
		transform: translate(-17px, 0px);
		font-weight: 700;
	}

	.dropdown-header-menu > li {
		padding: 35px 0;
	}

	.purple-bg-light {
		background-color: var(--purple-disabled);
	}

	.header-dropdown h6 {
		font-family: var(--heading-family);
	}

	.header-dropdown .locked h6 {
		color: var(--medium-grey);
	}

	.header-dropdown > div {
		display: grid;
		grid-template-columns: repeat(auto-fill, [col-start] minmax(240px, 1fr) [col-end]);
	}

	.header-dropdown > div > a:first-of-type {
		padding-left: 10px !important;
	}

	.header-dropdown > div > a {
		min-width: 200px;
		max-width: 285px;
		padding: 33px 18px 37px !important;
		position: relative;
	}

	.header-dropdown > div > a:not(:last-of-type)::after {
		content: "";
		height: 100%;
		max-height: 110px;
		width: 1px;
		background-color: var(--grey);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.header-dropdown > div > a:hover,
	.header-dropdown > div > a:active,
	.header-dropdown > div > a:focus {
		background-color: #ebe9fa;
		color: inherit !important;
	}
}

@media screen and (min-width: 1366px) {
	header img {
		height: 55px;
	}
}

@media screen and (min-width: 1440px) {
	.header-dropdown > div > a {
		padding: 33px 28px 37px !important;
	}
}

/* Footer */

footer {
	background-color: var(--dark);
	color: var(--medium-grey);
	font-weight: 400;
}

footer ul {
	margin-bottom: 50px;
}

footer li,
footer h5 {
	margin-bottom: 18px;
}

footer h5 {
	color: var(--grey);
	font-weight: 700;
	font-size: 14px;
}

footer li a {
	color: inherit;
}

footer a {
	text-decoration: none;
}

footer > * {
	max-width: 1033px;
	margin: auto;
}

@media screen and (max-width: 580px) {
	footer {
		text-align: center;
	}
}

.main-logo {
	height: 30px;
}
/***************** Page Title grid layout *****************/
.title-layout {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 95vw;
	row-gap: 10px;
	column-gap: 30px;
	margin: 0;
}

.title-layout > * {
	width: 100%;
}

@media screen and (min-width: 1279px) {
	.title-layout {
		grid-template-columns: 5fr 2fr;
	}
}

/***************** Filters *****************/
.top-data {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.top-data > * {
	height: fit-content;
}

/* used 1279 instead of 1280 to ensure it displays properly on laptops  */
@media screen and (max-width: 1279px) {
	.top-data h1 {
		width: 100%;
	}
}

@media screen and (max-width: 500px) {
	.top-data > *,
	.top-data select {
		width: 100% !important;
	}
}

/***************** Breadcrumbs *****************/

.breadcrumbs {
	width: auto;
	height: fit-content;
	margin-bottom: 8px;
	order: 1;
}

.breadcrumbs a {
	text-decoration: none;
}

.breadcrumbs:not(.breadcrumbs-timeline) a:last-of-type {
	font-weight: 700;
	color: inherit;
}

.breadcrumbs a:not(:last-of-type)::after {
	content: ">";
	margin: 0 5px 0 10px;
	color: var(--dark-grey);
}

.breadcrumbs-timeline a.active,
.breadcrumbs-timeline a.active::after {
	color: var(--purple);
	font-weight: 700;
}

.breadcrumbs-timeline a {
	color: inherit;
	pointer-events: none;
}

.breadcrumbs-timeline a.active ~ a,
.breadcrumbs-timeline a.active ~ a::after {
	color: var(--medium-grey);
}
/***************** Split screen layout *****************/

.split-layout-container {
	max-width: 95vw;
}

.split-layout-container,
.split-layout-container .main,
.split-layout-container #sidebar {
	gap: 30px;
}

.split-layout-container {
	min-height: 70vh;
}

.split-layout-container .main {
	position: relative;
	min-height: 80vh;
}

.split-layout-container {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 30px;
}

.split-layout-container .main,
.split-layout-container #sidebar {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.split-layout-container .main > *,
.split-layout-container #sidebar > * {
	width: 100%;
}

.sidebar-backdrop {
	display: none;
}

@media screen and (min-width: 1279px) {
	.split-layout-container {
		grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
	}
}

/***************** Sidebar *****************/

@media screen and (min-width: 1280px) {
	.split-layout-container #sidebar > .axiom-card {
		box-shadow: var(--box-shadow-1);
	}
}

@media screen and (max-width: 1279px) {
	.split-layout-container #sidebar {
		max-width: 85%;
		background-color: white;
		gap: 0;
	}

	.sidebar-open > *:not(.sidebar-backdrop) {
		z-index: 10;
	}

	.sidebar-closed > *:not(.sidebar-backdrop) {
		z-index: 9;
	}

	.sidebar-open .axiom-card {
		border-radius: 0px;
	}

	.sidebar-open .sidebar-backdrop {
		background-color: rgba(0, 0, 0, 0.05);
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: block;
		z-index: 9;
	}

	.sidebar-open {
		position: absolute;
		top: initial;
		box-shadow: var(--box-shadow-1);
	}

	.sidebar-closed {
		right: 100%;
		position: fixed;
	}

	#sidebar .toggle-display {
		position: absolute;
		left: calc(100% - 40px);
		top: 10vh;
		transform: rotate(270deg);
		background-color: var(--purple);
		padding: 5px 21px;
		color: white;
		text-transform: uppercase;
		border-radius: 0 0 8px 8px;
		width: 137px;
	}
}

@media screen and (max-width: 500px) {
	.split-layout-container #sidebar .axiom-card {
		padding: 15px;
	}
}

/************ Tender list ************/

.tender-card-wrapper .company {
	text-decoration: none;
}

.tender-card-wrapper:not(.clickable) a {
	pointer-events: none;
}

.tender-card {
	border-width: 1px 1px 1px 10px;
	border-style: solid;
	border-radius: 8px;
	border-color: var(--purple-light);
	background-color: white;
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	position: relative;
}

.tender-list.grid .tender-card-wrapper,
.grid .tender-card {
	max-width: 274px;
}

.tender-list.grid .tender-card {
	margin-top: 10px;
}

.tender-card .type {
	width: 100%;
}

.tender-card .title {
	display: block;
}

.tender-card .content {
	display: flex;
	row-gap: 20px;
	flex-direction: column;
	flex-wrap: wrap;
}

.tender-card .content > *:not(.desc) > *:first-child {
	font-weight: 700;
}

.tender-card .price,
.tender-card .title {
	font-weight: 700;
}

.tender-card .tender-bookmark {
	position: absolute;
	right: 10px;
	top: -3px;
	padding: 0;
}

.tender-bookmark::before {
	content: url(../media/icons/tenders/bookmark-purple-outlined.svg);
}

.tender-bookmark.bookmarked::before {
	content: url(../media/icons/tenders/bookmark-purple.svg);
}

.grid .grid-only {
	display: initial;
}

.list .grid-only,
.grid .list-only,
.list-only {
	display: none;
}

/* scaling adjustments for the tender list */
@media screen and (min-width: 1280px) and (max-width: 1440px) {
	.tender-list .card-wrapper {
		column-gap: 15px;
	}

	.tender-list.grid .tender-card {
		max-width: 240px;
	}
}

@media screen and (min-width: 1366px) {
	/* .tender-list.list .tender-card > *:not(.content) {
      max-width: 330px;
    } */
}

/* List layout styles are only on desktop */
@media screen and (min-width: 1280px) {
	.list .list-only {
		display: initial;
	}

	.list .tender-card {
		padding-right: 50px;
	}

	.list .tender-card .title {
		width: auto;
		grid-column: 2/3;
	}

	.tender-list.list .tender-card-wrapper {
		width: 100%;
	}

	.tender-list.list .tender-card {
		display: grid;
		gap: 10px;
		grid-template-columns: 2fr 5fr 2fr 1fr;
	}

	/* .tender-list.list .tender-card > *:not(.content) {
      max-width: 300px;
    } */
	.tender-list.list .tender-card .content > *:not(.desc) {
		display: grid;
		grid-template-columns: 1fr 2fr;
	}

	.tender-list.list .tender-card .content {
		flex-direction: row;
		order: 2;
		grid-column: 1 / end;
	}

	.tender-list.list .tender-card > .d-flex:has(.tag),
	.tender-list.list .tender-card > #tag_list {
		order: 3;
		grid-column: 1 / end;
	}

	.tender-list.list .tender-card .content .desc {
		width: 100%;
	}

	.tender-list.list .tender-card .content > *:not(.desc) {
		width: 50%;
	}

	.tender-list.list .tender-card .price {
		grid-column: 4/5;
	}
}

/***************** Tender search grid *****************/
.tender-search-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tender-search-grid .tag {
	width: fit-content;
	height: fit-content;
}

@media screen and (min-width: 1280px) {
	.tender-search-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.tender-search-grid .tag {
		width: 100%;
	}
}

@media screen and (min-width: 1366px) {
	.tender-search-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
	}
}

/***************** Tender keydata grid *****************/
.tender-keydata-grid > * {
	display: grid;
	grid-template-columns: 1fr 2fr;
	margin-bottom: 32px;
	gap: 32px;
}

/***************** Buyer - Supplier grid *****************/
.buy-supply-grid {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

.buy-supply-grid .item {
	padding: 15px 25px;
	width: 273px;
	max-width: 90%;
	border: 1px solid var(--light-slate-grey);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.buy-supply-grid .item p {
	margin-bottom: 0;
}

@media screen and (min-width: 1280px) {
	.buy-supply-grid.list .item {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
	}
}

/* scaling adjustments for the buy supply grid */
@media screen and (min-width: 1280px) and (max-width: 1440px) {
	.buy-supply-grid .item {
		width: 230px;
	}
}

/***************** Tender Live icon pulse animation *****************/
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
	}

	50% {
		box-shadow: 0 0 0 5px rgba(51, 217, 178, 0);
	}
}

.live-pulse {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background-color: #89ce7e;
	animation: pulse 2s ease infinite;
}

/********************* Utils *******************/

/****** Text ******/
.orange-highlight {
	color: var(--orange) !important;
}

.purple-highlight {
	color: var(--purple) !important;
}
.red-highlight {
	color: var(--red) !important;
}
.dark-text {
	color: var(--dark-grey);
}

.neutral-text {
	color: var(--medium-grey) !important;
}

/****** backgrounds ******/
.purple-bg {
	background-color: var(--purple);
}

.grey-bg {
	background-color: var(--light-grey);
}

.light-bg-body {
	background-color: var(--whitesmoke-light);
	padding: 15px;
}

@media screen and (min-width: 1024px) {
	.light-bg-body {
		padding-top: 60px;
	}
}

/********** Lists **********/

.check-purple-list li {
	list-style: none;
	list-style-image: url(../media/icons/check-purple.svg);
}
.no-style-list {
	padding-left: inherit;
	padding-right: inherit;
}

.no-style-list li {
	list-style: none;
	padding: 0px;
}

.arrow-blue-list li {
	list-style: none;
	list-style-image: url(../media/icons/arrow-right-blue.svg);
}

/****** Shadows ******/
.shadow-1 {
	box-shadow: var(--box-shadow-1);
}

.shadow-3 {
	box-shadow: var(--box-shadow-3);
}

/****** width and display ******/

/* not yet supported by bootstrap */
.max-vw-100 {
	max-width: 100vw;
}
.block-children > * {
	display: block;
}

.flex-children > * {
	display: flex;
}

.full-width-children > * {
	width: 100%;
}

.rounded {
	border-radius: 8px;
}

.fit-content {
	width: fit-content;
}
@media screen and (max-width: 1279px) {
	.desktop-only {
		display: none !important;
	}
}

@media screen and (min-width: 1280px) {
	.mobile-only {
		display: none !important;
	}
}

/******************* Color Coded Components *******************/

button.business,
.tag.business,
.tag-wrapper.business > * {
	color: white;
	background-color: var(--business-color);
}

button.construction,
.tag.construction,
.tag-wrapper.construction > * {
	color: white;
	background-color: var(--construction-color);
}

button.defence,
.tag.defence,
.tag-wrapper.defence > * {
	color: white;
	background-color: var(--defence-color);
}

button.environmental,
.tag.environmental,
.tag-wrapper.environmental > * {
	color: white;
	background-color: var(--environment-color);
}

button.facility,
.tag.facility,
.tag-wrapper.facility > * {
	color: white;
	background-color: var(--facility-color);
}

button.health,
.tag.health,
.tag-wrapper.health > * {
	color: white;
	background-color: var(--health-color);
}

button.industrial,
.tag.industrial,
.tag-wrapper.industrial > * {
	color: white;
	background-color: var(--industrial-color);
}

button.miscellaneous,
.tag.miscellaneous,
.tag-wrapper.miscellaneous > * {
	color: white;
	background-color: var(--miscellaneous-color);
}

button.professional,
.tag.professional,
.tag-wrapper.professional > * {
	color: white;
	background-color: var(--professional-color);
}

button.technology,
.tag.technology,
.tag-wrapper.technology > * {
	color: white;
	background-color: var(--technology-color);
}

button.transport,
.tag.transport,
.tag-wrapper.transport > * {
	color: white;
	background-color: var(--transport-color);
}

.tender-card.business {
	border-color: var(--business-color);
	--sector-color: var(--business-color);
}

.tender-card.construction {
	border-color: var(--construction-color);
	--sector-color: var(--construction-color);
}

.tender-card.defence {
	border-color: var(--defence-color);
	--sector-color: var(--defence-color);
}

.tender-card.environmental {
	border-color: var(--environment-color);
	--sector-color: var(--environment-color);
}

.tender-card.facility {
	border-color: var(--facility-color);
	--sector-color: var(--facility-color);
}

.tender-card.health {
	border-color: var(--health-color);
	--sector-color: var(--health-color);
}

.tender-card.industrial {
	border-color: var(--industrial-color);
	--sector-color: var(--industrial-color);
}

.tender-card.miscellaneous {
	border-color: var(--miscellaneous-color);
	--sector-color: var(--miscellaneous-color);
}

.tender-card.professional {
	border-color: var(--professional-color);
	--sector-color: var(--professional-color);
}

.tender-card.technology {
	border-color: var(--technology-color);
	--sector-color: var(--technology-color);
}

.tender-card.transport {
	border-color: var(--transport-color);
	--sector-color: var(--transport-color);
}

.sector-color {
	background-color: var(--sector-color) !important;
	color: white !important;
}

/* Overrides */
@media screen and (max-width: 1279) {
	.js-plotly-plot .ploty {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

.chart-aspect-ratio {
	aspect-ratio: 4/3 !important;
}

/* For Sector And Regions Filter Chips, Mostly */
.tag_pointer:hover {
	cursor: pointer;
	filter: brightness(1.1);
}

/* For Tender Query Highlighting */

.highlightedWord {
	color: white;
	background-color: var(--orange-dark);
	padding: 0;
	margin: 0;
}

/****************** Users and Emails section ******************/
/* animation for deleting rows */
tr.htmx-swapping td {
	opacity: 0;
	transition: opacity 1s ease-out;
}

#tenders_information_doc_requests_button {
	display: none;
}

#tenders_information_foi_requests_button {
	display: none;
}

.hide {
	display: none;
}

.avoidcheckbox {
	padding-left: 1.5em;
}

.tab.signupcheck {
	align-self: flex-start;
	margin-bottom: -2.2em;
	padding-left: 1em;
}

.tab .signupcheck {
	align-self: flex-start;
	margin-bottom: -2.2em;
	padding-left: 1em;
}

.signupcheck {
	align-self: flex-start;
	margin-bottom: -2.2em;
	padding-left: 1em;
}

.tender_type_selector {
	min-width: 10em;
}