/*
Site-wide CSS for the Fusen website.

Do not include any CSS rules that are specific to a single page. Those should be
defined in separate CSS file loaded by the {% block styles %}{% endblock %} block of the page.
*/

/* Global CSS variables */
:root {
	--fusen-left-nav-width: 17.375rem;
	--fusen-left-nav-collapsed-width: 4.75rem;
	--fusen-header-height: 5.625rem;
	--fusen-header-font: Raleway;
	--fusen-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
}

/*#region Utilities */

.font-header {
	font-family: var(--fusen-header-font) !important;
}

.vh-75 {
	height: 75vh !important;
}

.min-vh-75 {
	min-height: 75vh !important;
}

.cursor-auto {
	cursor: auto !important;
  }

.cursor-default {
	cursor: default !important;
}

.cursor-pointer {
	cursor: pointer !important;
}

.cursor-grab {
	cursor: grab !important;
}

.sort-handle {
	cursor: move;
	font-size: var(--bs-font-size-3);
	margin-right: var(--bs-spacer-2);
	color: var(--bs-gray-600)
}

.border-between > * {
	border-bottom: 1px solid var(--bs-border-color);
}

.border-between > *:last-child {
	border-bottom: none;
}

.start-80 {
	left: 80% !important;
}

/*#endregion Utilities */

/*#region Alerts */

.alert-dismissible .btn-close {
	padding: 1.6rem 1rem;
}

/*#endregion Alerts */

/*#region Dropdowns */

.no-caret.dropdown-toggle::after {
	display: none;
}

@media (max-width: 767.98px) {
	.dropdown-menu.mobile-full-screen {
		left: 0;
		top: 4rem;
		position: fixed;
		min-width: auto !important;
	}
}

.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
    position: static;
}

/*#endregion Dropdowns */

/*#region Accordions */

.accordion-button {
	font-weight: var(--bs-font-weight-bold);
	font-size: var(--bs-font-size-4);
	font-family: var(--fusen-header-font);
	border-radius: 0.75rem;
}

.accordion-button .fieldset_summary {
	font-weight: var(--bs-font-weight-normal);
	font-size: var(--bs-font-size-5);
	font-family: var(--bs-body-font-family);
	margin-left: var(--bs-spacer-2);
	color: var(--bs-white);
}

.accordion-button.collapsed .fieldset_summary {
	color: var(--bs-gray-500);
}

/*#endregion Accordions */

/*#region Tables */

th {
    font-size: var(--bs-font-size-7);
	color: var(--bs-gray-600) !important;
}

/*#endregion Tables */

/*#region Top Nav */

.nav-link {
    line-height: 1rem;
}

@media (min-width: 768px) {
    .navbar-collapse.d-md-none {
        display: none !important;
    }
}

/*#endregion Top Nav */

/*#region Main Container */

main.container {
	padding-top: var(--fusen-header-height);
}

/* Override the width of the main content container at the medium breakpoint. */
@media (min-width: 576px) and (max-width: 768px) {
    main.container-sm, main.container {
        max-width: 678px;
    }
}

/*#endregion Main Container */

/*#region Quill */

[data-quill-target="container"] {
    width: 100%;
}

[data-quill-target="counter"] {
    text-align: end;
}

.ql-toolbar {
    border-radius: 8px 8px 0 0;
}

.ql-container {
    border-radius: 0 0 8px 8px;
}

/*#endregion Quill */

/*#region Select2 */

[data-controller="select2"] {
	visibility: hidden;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
	border-color: var(--bs-input-focus-border-color);
	box-shadow: var(--bs-input-focus-box-shadow);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
	border-color: var(--bs-input-focus-border-color);
	box-shadow: none;
}

.select2-container--bootstrap-5 .select2-dropdown {
	border-color: var(--bs-input-focus-border-color);
	box-shadow: none;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
	color: var(--bs-white);
	background-color: var(--bs-primary);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
	color: var(--bs-fusen-black) !important;
	font-weight: bold !important;
	line-height: 2.5rem;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above,
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
	border-bottom: 1px solid var(--bs-input-focus-border-color);
	border-top: 1px solid var(--bs-input-focus-border-color);
}

.select2-container--bootstrap-5 .select2-selection--multiple {
	padding-bottom: 0;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search:has(textarea:placeholder-shown) {
	max-height: 0px;
}

.select2-container--bootstrap-5 .select2-selection__choice {
	font-size: var(--bs-font-size-7);
	background: var(--bs-select-background);
	color: var(--bs-select-text) !important;
	border: none;
	padding: .125rem;
	flex-direction: row-reverse !important;
	text-transform: uppercase;
}

.select2-container--bootstrap-5 .select2-selection__choice .select2-selection__choice__remove {
	margin-left: var(--bs-spacer-2) !important;
	width: var(--bs-spacer-2) !important;
	height: var(--bs-spacer-2) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: var(--bs-placeholder-text);
}

.select2-search__field::placeholder {
	color: var(--bs-placeholder-text);
}

.select2-selection__choice__display {
	font-size: var(--bs-font-size-7);
}

/*#endregion Select2 */

/*#region Radio Buttons */

legend {
    margin-bottom: 0;
    font-weight: var(--bs-font-weight-bold);
    color: var(--bs-body-color);
	font-size: var(--bs-body-font-size);;
}

/*#endregion Radio Buttons */

/*#region Modals */

.modal-content hr {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: var(--bs-spacer-5);
	margin-right: var(--bs-spacer-5);
}

.modal-header {
	padding-left: var(--bs-spacer-5);
	padding-right: var(--bs-spacer-5);
	padding-top: var(--bs-spacer-4);
	padding-bottom: var(--bs-spacer-1);
	border-bottom: none;
}

.modal-header .close-button {
	font-weight: normal;
	line-height: 150%;
	padding: 0;
}

.modal-title {
	color: var(--bs-fusen-green);
	line-height: 100%;
	font-size: var(--bs-font-size-2);
}

.modal-body {
	padding-left: var(--bs-spacer-5);
	padding-right: var(--bs-spacer-5);
}

.modal-footer {
	padding-left: var(--bs-spacer-5);
	padding-right: var(--bs-spacer-5);
	padding-bottom: var(--bs-spacer-4);
}

#fullscreen_async_modal .modal-content {
	background-color: var(--bs-body-bg);
}

#fullscreen_async_modal .btn-fs-close {
	background-color: var(--bs-body-bg);
	border: none;
	padding-right: 0;
}

#fullscreen_async_modal .modal-body {
	padding-left: var(--bs-spacer-0);
	padding-right: var(--bs-spacer-0);
}

/*#endregion Modals */

/*#region Left Nav */

#left-nav-wrapper {
	position: sticky;
    top: 0;
	padding-top: var(--fusen-header-height);
    max-height: 100vh;
	flex-shrink: 0;
}

#left-nav {
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	width: var(--fusen-left-nav-width);
	padding-left: 8px;
	padding-bottom: 32px;
	scrollbar-gutter: stable;
}

#left-nav:hover {
	overflow-y: auto;
}

#left-nav .nav-header {
	margin: 0.5rem 0 0.5rem 0.5rem
}

#left-nav .nav-link {
	padding: 0.5rem 1rem;
	font-size: var(--bs-font-size-5);
	padding: var(--bs-spacer-2) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--bs-gray-600)
}

#left-nav .nav-link.active {
	font-weight: var(--bs-font-weight-bold);
	color: var(--bs-white);
	background-color: var(--bs-gray-500);
}

#left-nav .nav-link:hover {
	color: var(--bs-nav-link-hover-color);
}

#left-nav .nav-link .subtitle {
	font-size: var(--bs-font-size-6);
	font-weight: var(--bs-font-weight-normal);
	color: var(--bs-gray-500);
}

#left-nav .nav-link.active .subtitle {
	color: var(--bs-gray-300);
}

.left-nav-icon {
	width: 2rem;
	display: inline-block;
	text-align: center;
	margin-left: var(--bs-spacer-2);
	margin-right: var(--bs-spacer-1);
	font-size: 1.125rem;
}

@media (max-width: 575.98px) {
    #left-nav-wrapper {
		display: none;
	}
}

@media (min-width: 576px) and (max-width: 768px) {
    #left-nav {
        max-width: var(--fusen-left-nav-collapsed-width);
		overflow-y: hidden;
    }

	#left-nav:hover {
        max-width: var(--fusen-left-nav-width);
		transition: max-width 0.25s;
		overflow-y: auto;
    }

	#left-nav:hover .show-on-hover {
		display: block !important;
	}

	#left-nav .nav-header {
		visibility: hidden;
	}

	#left-nav:hover .nav-header {
		visibility: visible;
	}
}

/*#endregion Left Nav */

/*#region Entity Thumbnails */

.accelerator-thumbnail,
.community-thumbnail,
.fund-thumbnail,
.startup-thumbnail,
.university-thumbnail {
	border-radius: 12%;
}

.user-thumbnail {
	border-radius: 50%;
}

.thumbnail-1 {
	width: 8.125rem;
	height: 8.125rem;
}
.thumbnail-2 {
	width: 5.625rem;
	height: 5.625rem;
}
.thumbnail-3 {
	width: 4.5rem;
	height: 4.5rem;
}
.thumbnail-4 {
	width: 3rem;
	height: 3rem;
}
.thumbnail-5 {
	width: 2.25rem;
	height: 2.25rem;
}
.thumbnail-6 {
	width: 1.5rem;
	height: 1.5rem;
}

/*#endregion Entity Thumbnails */

/*#region Entity Headers */

.accelerator-banner-image {
	width: 100%;
    height: 13.75rem;
    background-size: cover;
    background-position: center center;
}

/*#endregion Entity Headers */

/*#region Notification Badges */

.notification-badge {
	color: var(--bs-white);
	border-radius: 50%;
    background-color: var(--bs-highlight);
    display: inline-block;
    width: 1rem;
    height: 1rem;
    line-height: 100%;
    padding: 0.26rem 0.22rem;
    font-size: 0.5rem;
}

/*#endregion Notification Badges */

/*#region Notification Panel */

#notifications_panel_wrapper {
	min-width: 480px;
	padding: 0;
}

@keyframes notificationfadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.notification-listing {
	line-height: 120%;
	opacity: 1;
	animation-name: notificationfadein;
	animation-duration: 0.5s;
}

@keyframes notificationgrow {
	from {
		max-height: 270px;
	}

	to {
		max-height: calc(100vh - 122px);
	}
}

#notification_list {
	max-height: calc(100vh - 122px);
    overflow-y: auto;
    animation-name: notificationgrow;
    animation-duration: 0.5s;
}

#notification_list > .notification-listing + .notification-listing {
	border-top: 1px solid var(--bs-border-color);
	margin-top: 12px;
	padding-top: 12px;
}

.notification-placeholder {
	height: 48px;
}

.notification-placeholder.thumbnail {
	width: 48px;;
}

/*#endregion Notification Panel */

/*#region Fusen Components */

.component-container {
	border-radius: 0.75rem;
	padding: var(--bs-spacer-3) var(--bs-spacer-5);
	background-color: var(--bs-white);
	border: 1px solid var(--bs-border-gray);
	box-shadow: var(--fusen-box-shadow);
	height: 100%;
}

.component-title {
	font-family: var(--fusen-header-font);
	color: var(--bs-fusen-green);
	font-size: var(--bs-font-size-4);
	font-weight: var(--bs-font-weight-bold);
	margin-bottom: var(--bs-spacer-3);
}

.component-edit {
	font-size: var(--bs-font-size-6);
	background-color: rgba(255, 255, 255, 0.8);;
	padding: var(--bs-spacer-2);
	border-width: 1px;
	border-style: solid;
	border-color: var(--bs-gray-200);
	border-radius: 0.375rem;
	margin-right: calc(-1 * var(--bs-spacer-3));
}

.position-top-right {
	position: absolute;
    right: 2rem;
    top: 1rem;
}

.youtube-video {
	width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
	max-height: 26rem;
}

.youtube-placeholder {
	margin-top: -0.4rem;
}

.zoom-component-header {
	border-radius: 0.75rem;
	padding: 0;
	background-color: var(--bs-white);
	border: 1px solid var(--bs-border-gray);
	box-shadow: var(--fusen-box-shadow);
	height: 100%;
}

.zoom-component-header .zoom-frame {
	border-radius: 0.75rem 0.75rem 0 0;
	background-color: var(--bs-black);
	width: 100%;
	padding-top: calc(56.25% + 5.5rem);
}

.zoom-component-header .zoom-frame .zoom-frame-inner {
	margin-top: calc(-56.25% - 5.5rem)
}

.zoom-component-header .meeting-info {
	padding: var(--bs-spacer-3) var(--bs-spacer-5);
	line-height: 160%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

/*#endregion Fusen Components */

/*#region Entity Headers  */

.entity-banner-image {
	aspect-ratio: 5.45;
	background-size: cover;
	background-position: center center;
}

.event-banner-image {
	aspect-ratio: 2.12;
	background-size: cover;
	background-position: center center;
	border-radius: 0.75rem 0.75rem 0 0;
}

[data-controller="image-field"] .event-banner-image {
	width: 50%;
	border-radius: 0;
}

.bar-delimited + .bar-delimited::before {
	content: ' | '
}

.comma-delimited:has(+ .comma-delimited)::after {
	content: ', '
}

.hide-if-first:first-child {
	display: none;
}

.hide-if-last:last-child {
	display: none;
}

/*#endregion Entity Headers */

/*#region Admin Entity Listing */

.admin-entity-listing {
	width: 16.25rem;
	display: flex;
	align-items: center;
}
.admin-entity-listing .description {
	width: 13.375rem;
	color: var(--bs-gray-500);
	font-size: var(--bs-font-size-7);
}

/*#endregion Admin Entity Listing */

/*#region Directories */

.clickable-row:hover {
	background: #eceaea;
	cursor: pointer;
}

.more-count {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: 72px;
	border: 1px solid var(--bs-gray-500, #ADB5BD);
	background: var(--bs-gray-200, #E9ECEF);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

a.more-count-link {
	color: var(--bs-gray-600, #6C757D);
	font-size: 24px;
	font-family: Arial;
	line-height: 120%;
}

a.more-count-linkL:hover {
	color: var(--bs-gray-600, #6C757D);
	font-size: 24px;
	font-family: Arial;
	line-height: 120%;
}

a.more-count-link:visited {
	color: var(--bs-gray-600, #6C757D);
	font-size: 24px;
	font-family: Arial;
	line-height: 120%;
}

.btn-tag-link {
	--bs-btn-color: #666666;
	--bs-btn-bg: #E0E0E0;
	--bs-btn-border-color: #E0E0E0;
	--bs-btn-hover-color: #666666;
	--bs-btn-hover-bg: #bebebe;
	--bs-btn-hover-border-color: #b3b3b3;
	--bs-btn-focus-shadow-rgb: 206, 206, 206;
	--bs-btn-active-color: #666666;
	--bs-btn-active-bg: #E0E0E0;
	--bs-btn-active-border-color: #E0E0E0;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #666666;
	--bs-btn-disabled-bg: #E0E0E0;
	--bs-btn-disabled-border-color: #E0E0E0;
	font-size: 0.625rem;
	font-weight: 400;
	padding: 0.25rem 0.5rem;
  }

  .btn-tag-link:visited {
	color: #666666;
  }

/*#endregion Directories */

/*#region Inbox */

[data-inbox-target="emojiContainer"] {
    position: absolute;
	top: -18.5rem;
}

.inbox-message-buttons {
	bottom: 0.5rem; right: 1rem;
}

em-emoji-picker {
    min-height: 16rem;
    max-height: 18rem;
}

.inbox-message-content {
	padding: var(--bs-spacer-2);
	color: var(--bs-white);
}

.inbox-message-content p {
	margin-bottom: 0;
}

.inbox-message-thread-listing .thread-title {
	font-family: var(--fusen-header-font);
	font-size: var(--bs-font-size-4);
}

.inbox-message-thread-listing.selected {
    padding-right: 0;
    background-color: var(--bs-gray-200);
    border-right: 4px solid var(--bs-border-color);
    font-weight: normal;
}

.inbox-message-thread-listing.new{
	font-weight: bold;
}

.inbox-message-thread-listing .participant-count {
	position: absolute;
	top: 24px;
    left: 32px;
}

.inbox-message-participant-list {
	position: absolute;
	width: 25rem;
}

@media (max-width: 575.98px) {
    .inbox-message-participant-list {
		width: 85vw;
		top: var(--bs-spacer-5);
		left: -10vw;
	}
}

/*#endregion Inbox */

/*#region Events*/
.event-banner {
	width: 164px;
	height: 77px;
}

.accelerator-rank:not(.premium) .premium-only {
	display: none !important;
}

.event-time-bubble {
	position: relative;
	top: 1rem;
	left: 1rem;
}
/*#endregion Events*/

/*#region Wizard*/

#wizard-nav-wrapper {
	position: sticky;
    top: 0;
    max-height: 100vh;
	flex-shrink: 0;
}

.WizardRoleLabel {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-size: 30px;
	line-height: 100%;
	color: #404040;
}

.WizardRoleSubLabel {
	font-family: 'Arial';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 121%;
	color: #9B9B9B;
	margin: 3px 0px 0px 0px;
}

.WizardNavTitle,
a.WizardNavTitle:link,
a.WizardNavTitle:visited,
a.WizardNavTitle:hover,
a.WizardNavTitle:active {
	/* textValue */
	/* leftNavTitleSelected */
	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 120%;
	/* identical to box height, or 29px */
	/* fusenGreen */

	color:var(--bs-fusen-green);
	/* Inside auto layout */

	flex: none;
	order: 0;
	flex-grow: 1;
}

.WizardNavTitleDisabled,
a.WizardNavTitleDisabled:link,
a.WizardNavTitleDisabled:visited,
a.WizardNavTitleDisabled:hover,
a.WizardNavTitleDisabled:active {
	/* text value */
	/* leftNavTitle */

	font-family: 'Arial';
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 120%;
	/* identical to box height, or 29px */
	/* lightGrey */

	color: #9B9B9B;
	/* Inside auto layout */

	flex: none;
	order: 0;
	flex-grow: 1;
}

.WizardNavActive,
a.WizardNavActive:link,
a.WizardNavActive:visited,
a.WizardNavActive:hover,
a.WizardNavActive:active {
	/* text value */
	width: 100%;
	height: 22px;
	/* leftNavStepSelected */

	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 120%;
	padding: 0px 0px 16px 12px;
	/* identical to box height, or 22px */


	color:var(--bs-fusen-green);
	/* Inside auto layout */

	flex: none;
	order: 0;
	flex-grow: 1;
}

a.WizardNavActive.mobile {
	display: none;
}

.WizardNavEnabled,
a.WizardNavEnabled:link,
a.WizardNavEnabled:visited,
a.WizardNavEnabled:hover,
a.WizardNavEnabled:active {
	/* text value */
	width: 100%;
	height: 22px;
	/* leftNavStepSelected */

	font-family: 'Arial';
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 120%;
	padding: 0px 0px 16px 12px;
	/* identical to box height, or 22px */


	color:var(--bs-fusen-green);
	/* Inside auto layout */

	flex: none;
	order: 0;
	flex-grow: 1;
}

.WizardNavDisabled,
a.WizardNavDisabled:link,
a.WizardNavDisabled:visited,
a.WizardNavDisabled:hover,
a.WizardNavDisabled:active {
	width: 100%;
	height: 22px;
	/* leftNavStep */

	font-family: 'Arial';
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 120%;
	padding: 0px 0px 16px 12px;
	/* identical to box height, or 22px */
	/* lightGrey */

	color: #9B9B9B;
	/* Inside auto layout */

	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 0;
}

.WizardNavPrevious,
a.WizardNavPrevious:link,
a.WizardNavPrevious:visited,
a.WizardNavPrevious:hover,
a.WizardNavPrevious:active {
	width: 100%;
	height: 22px;
	/* leftNavStep */

	font-family: 'Arial';
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 120%;
	padding: 0px 0px 16px 12px;

	color: #404040;
}

@media (max-width: 750px) {
	.WizardNavActive,
	a.WizardNavActive:link,
	a.WizardNavActive:visited,
	a.WizardNavActive:hover,
	a.WizardNavActive:active {
		display: none;
		font-size: 18px;
		font-weight: 400;
	}
	a.WizardNavActive.mobile {
		display: initial;
		align-items: flex-start;
		padding-bottom: 30px;
		margin-left: -15px;
	}
	.WizardNavDisabled {
		display: none;
	}
	.WizardNavTitle {
		display: none;
	}
	.WizardNavTitleDisabled {
		display: none;
	}
}

.WizardTitle {
	font-family: var(--fusen-header-font);
	color: var(--bs-fusen-green);
	font-size: var(--bs-font-size-4);
	font-weight: var(--bs-font-weight-bold);
}

.WizardSubTitle {
	font-family: 'Arial';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 19.2px;
	color: var(--bs-gray-500, #ADB5BD);;
	flex: none;
	order: 0;
	flex-grow: 1;
	margin-bottom: var(--bs-spacer-3);
}

.founderHeader {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 0px;

	height: 24px;


	/* Inside auto layout */

	flex: none;
	order: 3;
	align-self: stretch;
	flex-grow: 0;
}

.founderLine {
	height: 2px;

	background: #D9D9D9;

	/* Inside auto layout */

	flex: none;
	order: 4;
	align-self: stretch;
	flex-grow: 0;
}

.aFounder {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 0px;

	height: 27px;


	/* Inside auto layout */

	flex: none;
	order: 6;
	align-self: stretch;
	flex-grow: 0;
}

.inactiveLink {
	pointer-events: none;
	cursor: default;
 }

/*#endregion Wizard*/


.additional_entity_counter {
	background-color: var(--bs-gray-200);
	border-color: var(--bs-gray-600);
	border-width: var(--bs-border-width);
	border-style: solid;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	margin-left: -0.875rem;
}

/*#region ButtonSelect*/

.button-select {
	/* CSS solution for rendering django's RadioSelect widget as buttons */
	--fs-button-select-color: var(--bs-primary);
}

.button-select input[type="radio"] {
	/* Hide radio input while preserve keyboard interaction */
	position: fixed;
	opacity: 0;
	pointer-events: none;
}

.button-select label {
	/* Draw radio label like button */
	border-radius: 6px;
	border: 1px solid var(--fs-button-select-color);
	padding: var(--bs-spacer-1) var(--bs-spacer-2);
	color: var(--fs-select-button-color);
	cursor: pointer;
}

.button-select label:has(> input:checked) {
	/* Highlight label when selected */
	background-color: var(--fs-button-select-color);
	color: white;
}

/*#endregion ButtonSelect*/

/*#region OKRs*/

body {
	--okr-key-result-indent: 24px;
	/* title, <nul>, <nul>, <nul>, due date, <nul>, <nul> */
	--okr-grid-template: 1fr 0 0 0 240px 0 0;
	/* title, <nul>, <nul>, <nul>, due date, <nul>, menu */
	--okr-grid-template-with-menu: 1fr 0 0 0 240px 0 48px;
	/* title, assignees, status, progress bar, due date, last updated, <nul> */
	--okr-grid-template-with-progress: 1fr 56px 96px 160px 120px 120px 0;
	/* title, assignees, status, progress bar, due date, last updated, menu */
	--okr-grid-template-with-menu-and-progress: 1fr 56px 96px 160px 120px 120px 48px;

	--okr-grid-template2: var(--okr-grid-template);
	--okr-grid-template2-with-menu: var(--okr-grid-template-with-menu);
	--okr-grid-template2-with-progress: var(--okr-grid-template-with-progress);
	--okr-grid-template2-with-menu-and-progress: var(--okr-grid-template-with-menu-and-progress);
}

@media(max-width: 1199.98px) {
	body {
		/* reduce width for selected columns */
		--okr-key-result-indent: 16px;
		--okr-grid-template: 1fr 0 0 0 126px 0 0;
		--okr-grid-template-with-menu: 1fr 0 0 0 126px 0 48px;
		--okr-grid-template-with-progress: 1fr 56px 75px 60px 64px 62px 0;
		--okr-grid-template-with-menu-and-progress: 1fr 56px 75px 60px 64px 62px 48px;
	}
}

@media(max-width: 991.98px) {
	body {
		/* title, <nul>, <nul>, <nul>, due date, <nul>, <nul> */
		--okr-grid-template: 1fr 0 0 0 60px 0 0;
		/* title, <nul>, <nul>, <nul>, due date, <nul>, menu */
		--okr-grid-template-with-menu: 1fr 0 0 0 60px 0 48px;
		/* title, assignees, <nul>, <nul>, due date, <nul>, <nul> */
		--okr-grid-template-with-progress: 1fr 56px 0 0 60px 0 0;
		/* title, assignees, <nul>, <nul>, due date, <nul>, menu */
		--okr-grid-template-with-menu-and-progress: 1fr 56px 0 0 60px 0 48px;
		/* custom layout on mobile/portrait display - { { title (span 3), due date, menu }, { progress, percent, assignee + status (span 3) } } */
		--okr-grid-template2: 1fr 1fr 1fr 60px 48px !important;
		--okr-grid-template2-with-menu: var(--okr-grid-template2);
		--okr-grid-template2-with-progress: var(--okr-grid-template2);
		--okr-grid-template2-with-menu-and-progress: var(--okr-grid-template2);
	}
}

.okr-row {
	grid-template-columns: var(--okr-grid-template);
}

.okr-row.with-menu {
	grid-template-columns: var(--okr-grid-template-with-menu);
}

.okr-row.with-progress {
	grid-template-columns: var(--okr-grid-template-with-progress);
}

.okr-row.with-progress.with-menu {
	grid-template-columns: var(--okr-grid-template-with-menu-and-progress);
}

.key-result-row {
	grid-template-columns: var(--okr-grid-template2-with-menu);
}

.key-result-row.with-menu,
.key-result-row:has(.okr-update) {
	grid-template-columns: var(--okr-grid-template2-with-menu);
}

.key-result-row.with-progress {
	grid-template-columns: var(--okr-grid-template2-with-progress);
}

.key-result-row.with-progress.with-menu,
.key-result-row.with-progress:has(.okr-update) {
	grid-template-columns: var(--okr-grid-template2-with-menu-and-progress);
}

.key-result-row .indent {
	 width: var(--okr-key-result-indent);
}

.okr-status {
	padding: 2px 16px;
	background-color: #ACACAC;
}

.okr-status.on-track {
	background-color: var(--bs-fusen-green);
}

.okr-status.at-risk {
	background-color: var(--bs-fusen-orange)
}

.okr-status.off-track {
	background-color: var(--bs-danger);
}

.okr-status.completed {
	background-color: var(--bs-fusen-blue);
}

.okr-more-contributors-icon {
	width: 24px;
	height: 24px;
	background-color: #d9d9d9;
	border: 1px solid;
}

.key-result-progress-bg {
	width: 72px;
	height: 12px;
	background: #E6E6E6;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

.key-result-progress-ind {
	background: #307AA8;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

.key-result-update-button {
	--bs-border-radius: 0.75rem
}

.key-result-form .field:has(input[name="measure_as"][value="1"]:checked) ~ .field:has(.measure-setting) {
	/* Hide start/target values if NONE "Task" is selected as measurement */
	display: none;
}

/*#endregion OKRs*/

/*#region Courses*/

.lesson .sort-handle {
	margin-left: 0.5rem;
	margin-right: 0;
}

.lesson .lesson-type {
	width: 2rem;
}

.lesson div:has(.text-truncate) {
	min-width: 10rem;
}

.lesson-duration::after {
	content: 'Minutes';
}

.lesson-modal-header {
	font-family: Arial;
}

.lesson-body {
	max-height: 500px;
	min-height: 4rem;
}

.week:has(input[name="week_toggle"]:checked) {
	background-color: var(--bs-secondary) !important;
	color: white !important;
}

.week:has(input[name="week_toggle"]:checked) label {
	color: white !important;
}

.week:has(input[name="week_toggle"]:checked) + .lessons {
	display: flex !important;
}

/*#endregion Courses*/

.hide-spin-buttons::-webkit-outer-spin-button,
.hide-spin-buttons::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number].hide-spin-buttons {
	-moz-appearance: textfield;
}

.stars-lg {
	font-size: 3rem;
}

.stars label:has(~ input[type="radio"]:checked) {
	--bs-text-opacity: 1;
	color:rgba(var(--bs-rating-rgb), var(--bs-text-opacity))
}

.stars label:has(~ input[type="radio"]:checked) i {
	font-weight: 900; /* fa-solid */
}

/*#region Batches*/
.batch-modal {
	--bs-modal-width: 1200px;
}

.batch-listing div:has(.text-truncate) {
	min-width: 10rem;
}
/*#endregion Batches*/

.select2-bold-selection + * .select2-selection__rendered {
	font-weight: bold !important;
}

/*#region Batch Progress*/
.batch-progress-bar {
	background-color: #ebebeb;
}

.batch-period-progress .batch-progress-bar,
.batch-period-progress .batch-progress-bar-highlight {
	border-bottom-left-radius: 0 !important;
	border-top-left-radius: 0 !important;
}

.batch-period-progress .batch-progress-bar {
	margin-left: 3.25rem !important;
}

.batch-progress-starting-circle {
	background-color: #D9D9D9;
	color: var(--bs-gray-500);
	width: 3.5rem;
	height: 3.5rem;
}

.batch-progress-starting-circle.started {
	background-color: var(--bs-primary);
	color: var(--bs-white);
}

.batch-progress-ending-circle {
	background-color: #D9D9D9;
	color: var(--bs-gray-500);
	width: 3.5rem;
	height: 3.5rem;
	right: 0;
}

.batch-progress-ending-circle.final-week {
	background-color: #D9D9D9;
	color: var(--bs-gray-500);
}

.batch-progress-ending-circle.ended {
	background-color: var(--bs-primary);
	color: var(--bs-white);
}

.batch-progress-ending-circle.final-week.ended {
	background-color: var(--bs-primary);
	color: #FFC700;
}

.batch-progress-ending-circle i {
	display: none;
}

.batch-progress-ending-circle.ended:not(.final-week) .fa-check {
	display: block;
}

.batch-progress-ending-circle.final-week .fa-star {
	display: block;
}

.batch-progress-ending-circle.ended div {
	display: none;
}

.batch-progress-ending-circle.final-week div {
	display: none;
}

/*#endregion Batch Progress*/

.ql-editor.ql-blank::before {
	color: rgba(0,0,0,0.4);
	line-height: 150%;
}

.field:has(* .disable-field-render) {
	display: none !important;
}

.no-resize {
	resize: none;
}

.hide-if-no-divs:not(:has(div)) {
	display:none
}

/*#region Data Room*/
.data-room-single-file-input > div {
	padding: 0 !important;
}

.data-room-single-file-input [data-upload-target="addButton"] {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

/*#endregion Data Room*/

/*
 * A non-space-occupying element centered with respect to its parent
 *
 * <div class="absolute-centered">
 *   <div>blah</div>
 * </div>
 */
 .absolute-centered-h {
	position: absolute;
	left: calc(50%);
}

.absolute-centered-h > * {
	position: relative;
	left: -50%;
}

.absolute-centered-v {
	position: absolute;
	top: calc(50%);
}

.absolute-centered-v > * {
	position: relative;
	top: -50%;
}

.absolute-centered {
	position: absolute;
	left: calc(50%);
	top: calc(50%);
}

.absolute-centered > * {
	position: relative;
	left: -50%;
	top: -50%;
	transform: translate(0%, -50%);
}