:root
{
	--primary-color: #e25383;
	--primary-color-light: #F9DDE6;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
	font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus
{
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #e25383;
}

html {
  position: relative;
  min-height: 100%;
}

body
{
	margin-bottom: 60px;
}

#my-toast-container
{
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 999999;
}

.license-pack-comment
{
	color: #666;
	display: inline-block;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.beia-logo-navbar
{
	width: 230px;

}

.nav-link
{
	transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

	.nav-link:hover
	{
		background-color: var(--primary-color-light) !important;
	}

.navbar-vertical
{
	xbackground: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(179, 92, 170, 1) 100%) !important;
	xbackground: linear-gradient(270deg, rgba(227, 84, 130, 0.05) 0%, rgba(179, 92, 170, 0.1) 100%)
}

/* The wizard's circle color */
.theme-wizard .nav-item .nav-link.done .nav-item-circle
{
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

/* Text under the wizard cicle (done)*/
.theme-wizard .nav-item .nav-link.done
{
	color: #444 !important;
}

/* Line connecting the circles in the wizard*/
.theme-wizard .nav-item:not(.theme-wizard .nav-item:last-child) .nav-link.complete:before
{
	background: var(--primary-color) !important;
}

.icon-copy::before
{
	content: "";
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-copy' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z'/%3E%3C/svg%3E") center/cover no-repeat;
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
	position: relative;
	top: -2px
}



.flash-bg
{
	animation: flashBackground 1s forwards;
}

@keyframes flashBackground
{
	0%
	{
		background-color: var(--primary-color);
	}

	100%
	{
		background-color: transparent;
	}
}

.pointer-on
{
	cursor: pointer;
}

.user-select-none
{
	user-select: none;
}

/* Custom Leaflet Map Styles */
.custom-map-marker
{
	background: transparent;
	border: none;
}

.marker-content {
	transition: transform 0.2s;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.marker-content:hover {
	transform: scale(1.2);
	z-index: 1000;
}

#realtimeMapContainer 
{
	border-radius: 4px;
	overflow: hidden;
}



.country-lock-container
{
	padding: 10px 0 0 0 !important;
}


.country-lock-floating-label
{
	position: absolute;
	top: -6px;
	left: 0;
	padding: 0 4px;
	font-size: 0.6rem;
	z-index: 10;
	pointer-events: none; /* so it doesn't block clicks */
}



.country-limit-size
{
	max-width: 100%;
}



.comment-td
{
	max-width: 120px;
	width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.comment-box
{
	display: inline-block;
	max-width: 120px;
	max-height: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.comment-button
{
	display: block; /* fill the wrapper */
	width: 100%;
	padding: 0;
	background: transparent;
	border: none;
	text-align: left;
	white-space: normal; /* allow wrapping */
	word-break: break-word; /* break anywhere */
	overflow-wrap: break-word; /* best practice to force-break */
	text-overflow: ellipsis;
}



/*For some reason all buttons in the phoenix theme seem to be not centered on Y. This tries to fix that. */
.btn:not(.btn-icon)
{
	padding-bottom: 8px;
}

/* Same for search boxes, although the btn fix seems to work better */
.search-input
{
	padding-top: 0.5rem;
}

.search-box .search-box-icon
{
	position: absolute;
	top: 47%;
	
}

/* For some reason, search boxes appear clamped. We need this to show the focus rectangle correctly */
.search-box
{
	margin: 5px;
}



.trial-badge-y-adjust
{
	position: relative;
	top: -4px;
}

.search-card
{
	background-color: transparent;
	border-width: 0px;
}

.search-card-header
{
	border-bottom: hidden !important;
}

.country-selection-picker + button
{
	background-color: white !important;
	border-color: #ccc !important;
}

.offcanvas-comments
{
	white-space: normal;
}

.offcanvas-add-note-container
{
	margin: 0 1em;
}

.country-comma-list
{
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* The background of the multiple selection choice (countries) is gray by default in choices.js*/
.choices .choices__list--dropdown .choices__item--selectable
{
	background-color: white !important;
	font-size: 13px !important;
	font-family: var(--phoenix-body-font-family) !important;
}

	.choices .choices__list--dropdown .choices__item--selectable.is-highlighted
	{
		background-color: var(--phoenix-primary) !important;
	}


.hide-text
{
	margin-top: 200px;
	height: 2px !important;
	overflow: hidden;
}


.map-bottom-legend
{
	margin-top: -20px;

}

.pix-up-2
{
	transform: translateY(-2px);
}

.highlighted-license
{
	background-color: var(--primary-color-light);
}