:root {
	--blue-oddity: #346da6;
	--blue-oddity-rgb: 52, 109, 166;
}

.btn-blue-oddity {
	color: white;
	background-color: rgba(var(--blue-oddity-rgb), var(--bs-bg-opacity)) !important;
	border-color: rgba(var(--blue-oddity-rgb), 1) !important;
}
.btn-blue-oddity:active,
.btn-blue-oddity:hover {
	color: white;
	background: linear-gradient(rgb(var(--bs-dark-rgb), .05), rgb(var(--bs-dark-rgb), .05)), linear-gradient(rgba(var(--blue-oddity-rgb), var(--bs-bg-opacity)), rgba(var(--blue-oddity-rgb), var(--bs-bg-opacity))) !important;
	background-color: rgba(var(--blue-oddity-rgb), var(--bs-bg-opacity)) !important;
}
.btn-blue-oddity:focus {
	color: white;
	box-shadow: 0 0 0 0.25rem rgb(var(--blue-oddity-rgb), .5);
}

.blend-mode-difference {
	mix-blend-mode: difference;
}

/* Spinner on buttons while loading */
button:not([disabled]) > span.spinner-border,
button:not([disabled]) > span.sr-only,
button[disabled] > span:not([class]) {
	display: none;
}
.spinner-border.spinner-border-md { /* mid size */
	width: 1.5rem;
	height: 1.5rem;
}

/* index view */
.mask.gradient {
	opacity: 1;
	transition: opacity .5s ease-in-out, bottom 0s .5s;
}
.mask.gradient.opacity-0 {
	bottom: 100vh !important; /* remove the mask */
}
.mask:after {
	content: "";
	position: absolute;
	top: -100vh;
	bottom: 0;
	left: -100vw;
	right: 0;
	z-index: -1;
	transition: top 2s ease-in-out .7s, left 2s ease-in-out .7s;
	background: linear-gradient(165deg, transparent, var(--bs-body-bg) 50%) !important;
}
.mask.gradient:after {
	/* make the gradient fade in */
	top: 0;
	left: 0;
}

.mask .display-4 {
	text-shadow: var(--bs-primary) 0 0 2px;
}

/* home view */
[data-loading="true"] .loading {
	display: block !important;
}

.add-widget {
	padding-bottom: 4rem;
}
.add-widget .card {
	display: inline-block;
	opacity: 0;
	border-radius: 100%;
	transition: opacity .2s,
		width .2s,
		border-radius .2s,
		color .2s,
		background-color .2s;
}
.pages > .page > .column:hover .add-widget .card {
	opacity: 1;
}
.add-widget .card:hover {
	opacity: 1;
	width: 100%;
	border-radius: var(--bs-border-radius);
}
.add-widget .card .card-body {
	display: inline;
	line-height: 1rem;
	padding: 0 !important;
}
@media (max-width: 768px) {
	.add-widget {
		display: none;
	}

	main > footer {
		font-size: .8rem;
	}
}

.widget > .card-header {
	cursor: move;
}
.widget > .card-header > div {
	line-height: 1rem;
}
.widget > .card-header .btn {
	box-shadow: none;
	position: relative;
}
.widget > .card-header .widget-icon i:not(:first-of-type) {
	display: none;
}
.widget > .card-header .widget-icon[data-bs-toggle]:hover i:first-of-type {
	display: none;
}
.widget > .card-header .widget-icon[data-bs-toggle]:hover input:checked ~ i.checked {
	display: inline;
}
.widget > .card-header .widget-icon[data-bs-toggle]:hover input:not(:checked) ~ i.unchecked {
	display: inline;
}
.widget:hover > .card-header .widget-link {
	display: inline-block !important;
}

/* Drag and drop styles */
button.dragover {
	border: .3rem dashed var(--bs-red);
}
main.dragging .add-widget .card,
main.sizing .add-widget .card {
	opacity: 0 !important;
	transition: none !important;
}
.widget.dragging {
	display: none !important;
}
main.dragging .add-widget *,
main.dragging .widget:not(.dragging) * {
	/* Avoid dragging events (mainly dragenter and dragleave) on children of widgets */
	pointer-events: none !important;
}
.add-widget,
.widget {
	transition: margin-top .2s;
}
.add-widget.dragover,
.widget.dragover {
	margin-top: 4.25rem !important;
}
.add-widget:before,
.widget:before {
	content: "";
	position: absolute;
	top: -.25rem;
	height: 0;
	transition: top .2s, height .2s;
}
.add-widget.dragover:before,
.widget.dragover:before {
	content: "";
	top: calc(-1 * (3.5rem + .5rem + 1px)); /* 1px for the widget top border */
	left: 0;
	width: 100%;
	height: 3.5rem;
	border: .3rem dashed var(--bs-red);
	border-radius: var(--bs-border-radius);
}
.add-widget.dragover:after,
.widget.dragover:after {
	content: "";
	position: absolute;
	top: calc(-1 * (.25rem + 3.5rem + .5rem + 1px));
	left: 0;
	width: 100%;
	height: 4.25rem;
	background-color: transparent;
}

/* Sizer, between columns */
@media (min-width: 768px) { /* 768 is for medium (-md) size */
	.pages > .page > .column:not(:last-of-type) > .sizer {
		position: absolute;
		top: 0;
		height: 50vh;
		right: -3px;
		width: 6px;
		border: 2px solid transparent;
		z-index: 99;
		background: linear-gradient(180deg, transparent 0%, rgb(var(--bs-emphasis-color-rgb), .3) 33%, transparent 100%) padding-box;
		cursor: col-resize;
		opacity: 0;
		transition: opacity .2s;
	}
	main:not(.sizing) .pages > .page > .column:not(:last-of-type) > .sizer:hover,
	main.sizing .pages > .page > .column:not(:last-of-type) > .sizer.sizing {
		opacity: 1;
	}
	.pages > .page > .column:not(:last-of-type) > .sizer.limited {
		background: linear-gradient(180deg, transparent 0%, rgb(var(--bs-danger-rgb), .7) 33%, transparent 100%) padding-box;
	}
	main.sizing {
		cursor: col-resize !important;
		user-select: none !important;
	}
	main.sizing .widget .collapse {
		/* Event mousemove on the main document element isn't triggered anymore on iframe (= another document element). This allows the mousemove to work everywhere */
		pointer-events: none !important;
	}
}
@media (max-width: 768px) { /* 768 is for medium (-md) size */
	.pages {
		margin-bottom: 2rem;
	}
	.pages > .page > .column {
		width: 100% !important;
	}
}

/* See https://github.com/twbs/bootstrap/pull/29135 */
.pre-scrollable {
	max-height: 340px;
	overflow-y: scroll;
}

.status {
	border-top-left-radius: var(--bs-border-radius);
	z-index: 1100; /* Above modals */
}
.status i {
	display: none;
}
.status.nointernet i.nointernet,
.status.error i.error,
.status.unsynced i.unsynced,
.status.syncing i.syncing,
.status.synced i.synced {
	display: inline;
}
.status.syncing i.syncing:before {
	animation: rotate 2s linear infinite;
}
@keyframes rotate {
	to {
		transform: rotate(360deg);
	}
}

/* login & signup views */
.form-control-feedback:empty {
	display: none;
}