/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/*a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}*/

/* Provide sufficient contrast against white background */
/*a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}*/

/* Sticky footer styles
-------------------------------------------------- */
/*html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}*/

/* Sticky footer styles
-------------------------------------------------- */
/*html {
  position: relative;
  min-height: 100%;
}

body {*/
/* Margin bottom by footer height */
/*margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;*/ /* Vertically center the text there */
/*}*/

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Custom Styles
-------------------------------------------------- */
/*main {
    margin-top: 1em;
}

.site-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.orange-text {
    color: #eb5f0c;
}

li.nav-item.active a {
    text-decoration: none !important;
    border-bottom: solid #eb5f0c 4px;*/
/* color: #fff !important; */
/*border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}*/

/*li.nav-item.active a:hover, a.nav-link:hover {
        text-decoration: none !important;
        color: #fff !important;
        background: #eb5f0c;
        border-radius: 4px;*/
/*        border-top-left-radius: 4px;
        border-top-right-radius: 4px;*/
/*}*/

/*.card-header {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
    color: #eb5f0c;
    background: var(--bs-dark-bg-subtle);
    border-top: 1px solid;
}

.search-bar {
    margin: 1em 1em 2em;
}

h1 {
    margin: .5em;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.navbar-right span {
    margin-left:.5em;
    margin-right:.5em;
}

.user-settings-button {
    btn btn-secondary btn-sm:pointer;
}*/

/*.highlight-mouseover:hover, .alert, .swal2-popup {
    background: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning-border-subtle);
}
*/
/*.swal2-styled.swal2-confirm {
    background: var(--bs-success)!important;
}

h6.alert-heading {
    color: #fff !important;
}

.btn {
    margin-bottom: 1em;
}

.btn-add::before, .i-add::before {
    color: white;
}
*/
/*.card-footer.card-footer-actions {
    padding-top: 1.5em;
}

.btn-add {
    background: #0d6efd;
}

.btn-edit, .btn-details {
    background: var(--bs-dark-bg-subtle);
}*/

/* Provide sufficient contrast against white background */
/*a {
    color: #0366d6;
}*/

/* Sticky footer styles
-------------------------------------------------- */
/*html {
    font-size: 14px;
}

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

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}*/

/* Sticky footer styles
-------------------------------------------------- */
/*html {
    position: relative;
    min-height: 100%;
}

body {*/
/* Margin bottom by footer height */
/*margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;*/ /* Vertically center the text there */
/*}

footer {
    padding-left: 1em;
    padding-right: 1em;
    background: #232D4B;
}

    footer .my-4 {
        margin-bottom: 0 !important;
    }

    footer .text-body-secondary {
        color: white !important;
    }

#loadingDisplay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    background-color: #000000;
    opacity: 0.3;*/
/*    filter: alpha(opacity=30);*/
/*}

    #loadingDisplay IMG {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 1050;
        overflow: auto;*/
/* this width is your loading img's width */
/*width: 100px;*/
/* please change the margin-top and margin-left here
     * make sure the margin-top equals 1/2 loading img's height
     * and the margin-left equals 1/2 loading img's width */
/*margin: -50px 0 0 -50px;
    }

.loading-el {
    filter: brightness(85%);*/
/*top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
        opacity: 0.3;
    filter: alpha(opacity=30);*/
/*}*/

/*    .loading-el::before {
        content: "Loading...  <div class=\"spinner-grow\" role=\"status\"><span class=\"sr-only\">Loading...</span></div>";
        font-weight: 900;
    }*/

/*.label-left {
    font-weight: 700;
}

.value-right {
    padding-left: 20px;
}

label {
    font-weight: bold;
}

.highlight-mouseover {
    padding-top: 5px;
    padding-bottom: 5px;
}

.swal2-title, .swal2-html-container {
    color: var(--bs-body-color);
}

.swal2-icon.swal2-warning.swal2-icon-show {
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
}

.alert {
    color: var(--bs-light-text-emphasis);
}

.alert-heading {
    color: var(--bs-info-text-emphasis) !important;
}*/
/*.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #effbfd;
}*/
/*.editor-answer {
    margin-left: 10px;
    padding-left: 5px;
    border-left: 1px ridge gray;*/
/*    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px ridge gray;*/
/*}

.tool-tip {
    btn btn-secondary btn-sm: pointer;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

.bottom-space {
    margin-bottom: 20px;
}



th {
    font-weight: 600 !important;
}

.card-header {
    font-weight: 600 !important;
}

.k-grid td a:hover:not(.btn):not(.k-button) {
    text-decoration: overline;
    font-weight: 600;
}*/

ul.validation-errors {
	background-color: #f8d7da !important;
}

	ul.validation-errors li {
		color: #721c24 !important;
		padding-top:5px !important;
		padding-bottom:5px !important;
/*		font-weight: bold !important;
*/	}

.offcanvas {
	width: 75% !important;
}

.field-validation-error {
    color: red;
    font-weight: bold;
}

.input-validation-error {
    background: pink;
    border: 1px solid red;
}

/*.dropdown-item {
    width: auto;
}

.navbar {
    background: var(--bs-primary-bg-subtle);
}

.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
    text-decoration: underline !important;
}

.nav-link {
    color: white !important;
}

.card-header .fa {
    transition: .3s transform ease-in-out;
}

.card-header .collapsed .fa {
    transform: rotate(-90deg);
}

a.btn {
    margin-right: 4px;
}

.btn-primary {
    color: white !important;
}

.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    border: 1px solid #999999 !important;
    background-color: #cccccc !important;
    color: #666666 !important;
}

img.grid-status-icon {
    text-align: center;
    width: 35px;
    height: 35px;
}

.isLate {
    color: lightcoral;
    font-weight: bold;
}

.tooltip-underline {
    border-bottom: 1px dotted black !important;
    btn btn-secondary btn-sm: help !important;
}

input.student-answer {
    margin-right: 3px;
}

tr.answer-missing {
    background-color: lightpink;
    font-weight: 600;
}

tr.answer-missing {
    background-color: lightpink;
    font-weight: 600;
}

tr.answer-wrong {
    color: orangered;
    font-weight: 600;
}

.label-right {
    float: right;
    text-align: right;
}

.field-error, .checkbox-error {
    outline: 2px solid #f52929;
    background-color: lightpink;
}*/
/*https://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout*/
/* reset everything to the default box model */
/**, :before, :after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}*/

/* set a border-box model only to elements that need it */

/*.form-control,*/ /* if this class is applied to a Kendo UI widget, its layout may change */
/*.container,
.flex-grow,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.kendo-grid-column-tooltip > .k-link:after {
    vertical-align: super;
    font-size: 1rem;
    font-weight: bolder;
    btn btn-secondary btn-sm: pointer !important;
    content: " ?";
}*/

.pulse {
    -webkit-animation: pulsate 2.5s ease-out;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(1.1);
        opacity: 0.3;
    }

    50% {
        -webkit-transform: scale(1.2);
        opacity: 1.0;
    }

    100% {
        -webkit-transform: scale(1.1);
        opacity: 0.3;
    }
}



/*li.nav-item.ddlactive .dropdown-toggle {
    text-decoration: none !important;
    border-bottom: solid #eb5f0c 4px;
    color: #fff !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.k-grid-toolbar .row > div {
    padding-top: 17px;*/
/* display: inline-block; 
    vertical-align: middle;
    margin: 0;
    top: 50%;
    */
/*    -ms-transform: translateY(-50%);
    transform: translateY(-50%);*/
/*}

.save-succeeded {
    border: 2px solid green;
}

.save-failed {
    border: 2px solid red;
}

.save-pending {
    border: 2px solid orange;
}

.creates-action {
    background-color: #187bcd;*/ /* A bit darker blue */
/*}

    .creates-action label {
        color: #ADD8E6;*/ /* Light blue */
/*}*/

/* For div with both highlight-mouseover and creates-action classes */
/*.highlight-mouseover.creates-action:hover {
    background-color: #0d4471 !important;*/ /* Slightly brighter than #ADD8E6 */
/*}

.ActivityDetails-label {
    font-weight: bold;
}

.ActivityDetails-value {
    font-weight: normal;
}*/

body {
	background-color: var(--bs-body-bg) !important;
}

.card {
	/* Adjust height as needed */
	max-width: 100%;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Matches Bootstrap's .shadow class */
	padding: 1rem !important; /* Matches Bootstrap's .p-3 */
	margin-bottom: 3rem !important; /* Matches Bootstrap's .mb-5 */
	background-color: var(--bs-body-bg) !important; /* Matches Bootstrap's .bg-body */
	border-radius: 0.375rem !important; /* Matches Bootstrap's .rounded */
	overflow: auto;
}

.custom-checkbox {
	width: 20px !important; /* Adjust width */
	height: 20px !important; /* Adjust height */
	min-width: 20px;
	min-height: 20px;
}

.k-button.k-button-solid-primary {
	background-color: #0d6efd;
}

.k-grid-command.k-button {
	background-color: #5c636a;
	border-color: #5c636a;
	color: white;
}

.swal2-confirm.swal2-styled {
	background-color: #0d6efd;
}

.k-grid.k-icon {
	display: none;
}

.k-button-icon {
	display: none;
}

/*.k-button:hover {
	color: #5c636a;
}*/

.card-header {
	background-color: white !important;
	text-align: left !important;
	font-size: 1.25rem !important; /* fs-5 equivalent */
	font-weight: 600 !important; /* fw-semibold equivalent */
}

.k-table-td .btn {
	margin-bottom: 0px !important;
	color: white !important;
}

footer {
	background-color: #023a4b !important;
	color: white !important;
}

	footer,
	footer a,
	footer p,
	footer .nav-link {
		color: white !important; /* Ensure white text */
	}

		footer a:hover,
		footer .nav-link:hover {
			color: #ccc !important; /* Optional: Light gray on hover */
			text-decoration: underline; /* Optional: Underline on hover */
		}

.k-tabstrip {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Matches Bootstrap's .shadow class */
	padding: 0; /* Matches Bootstrap's .p-3 */
	margin-bottom: 3rem !important; /* Matches Bootstrap's .mb-5 */
	background-color: var(--bs-body-bg) !important; /* Matches Bootstrap's .bg-body */
	border-radius: 0.375rem !important; /* Matches Bootstrap's .rounded */
}


.k-grid.k-column-title {
	font-weight: bold;
}

.k-table-td .btn {
	margin-right: 5px; /* Adds spacing between buttons */
}

	.k-table-td .btn:last-child {
		margin-right: 0; /* Prevents extra margin on the last button */
	}

a.back-to-top {
	display: none;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	color: white;
	position: fixed;
	opacity: .5;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #eb5f0c url("../images/theme/arrow-up-solid.svg") no-repeat center 23%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

a.scroll-to-commands {
	display: none;
	width: 30px;
	height: 30px;
	color: white;
	opacity: .5;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 55px;
	background: #0d6efd url("../images/theme/arrow-down-solid.svg") no-repeat center 23%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.editable-report-item {
	--row-bg-lighten: rgba(255, 255, 255, 0.05); /* Slightly lighter */
	--row-bg-darken: rgba(0, 0, 0, 0.05); /* Slightly darker */
	--row-bg-hover: rgba(0, 0, 139, 0.3); /* Dark blue on hover */
	--border-hover: 2px solid rgba(0, 0, 139, 0.7); /* Dark blue border on hover */
	--shadow-hover: 0 0 5px rgba(0, 0, 139, 0.5); /* Soft glow effect */

	position: relative; /* Ensure it contains child rows */
	padding: 0px 12px 0px 12px; /* Creates space inside for the border */
	margin: 4px 4px; /* Prevents touching adjacent elements */
	border: 2px solid transparent; /* Default transparent border to prevent layout shift */
	transition: box-shadow 0.2s ease-in-out, border 0.2s ease-in-out;
}

	/* Ensure .row allows background layers */
	.editable-report-item .row {
		position: relative;
		overflow: visible;
		z-index: 1;
	}
		/*span.k-input.k-textbox {
    display: none !important;
}*/


		/* Apply alternating background shades without affecting text */
		.editable-report-item .row:nth-child(odd)::before {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--row-bg-darken);
			z-index: -1;
		}

		.editable-report-item .row:nth-child(even)::before {
			content: "";
			position: absolute;
			inset: 0;
			background-color: var(--row-bg-lighten);
			z-index: -1;
		}

		/* Hover effect: Make background slightly darker */
		.editable-report-item .row:hover::before {
			background-color: var(--row-bg-hover);
			transition: background-color 0.2s ease-in-out;
		}

	/* Add border and shadow around entire .editable-report-item on hover */
	.editable-report-item:hover {
		border-color: rgba(0, 0, 139, 0.7); /* Ensure the hover border is visible */
		box-shadow: var(--shadow-hover); /* Adds a subtle outer glow */
	}

.sentinel-value {
	background-color: #fff3cd; /* light yellow background */
	border: 1px solid #ffeeba;
	color: #856404; /* dark yellow/brown text */
	padding: 5px 5px 5px 35px; /* extra left padding for the icon */
	border-radius: 4px;
	position: relative;
	font-weight: bold;
}

	.sentinel-value::before {
		content: "\f071"; /* Unicode for exclamation-triangle in Font Awesome */
		font-family: 'Font Awesome 5 Free'; /* or adjust if using a different FA version */
		font-weight: 900; /* ensures the icon displays in the solid style */
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
		color: #856404;
	}

.fixed-column {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.overflow-auto {
	height: 100vh;
	overflow-y: auto;
}

/* Add spacing between form groups */
.form-group {
	margin-bottom: 15px; /* Adds spacing between inputs */
}

	/* Make labels bold */
	.form-group label {
		font-weight: bold;
	}

	/* Ensure inputs take full width */
	.form-group input,
	.form-group select,
	.form-group textarea {
		width: 100%;
		padding: 8px;
		border-radius: 5px;
	}

/* Style the rich text editor (if applicable) */
.rich-text-editor {
	padding: 10px;
	border-radius: 5px;
}

/* Add padding to buttons */
/*.btn {
    padding: 10px 15px;
    font-weight: bold;
}*/

/* Add spacing for bottom buttons */
.form-buttons {
	margin-top: 20px;
}

.k-dropdown .k-input {
	border: none !important;
	background: transparent !important;
	font-size: 1rem !important;
	padding: 5px 10px !important;
}

.k-dropdown .k-select {
	display: none; /* Hides default dropdown arrow */
}

.kd-image-wrapper > .k-icon {
	font-size: 72px;
}
/* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
@@media (max-width: 678px), (min-width: 838px) and (max-width: 1038px), (min-width: 1241px) and (max-width: 1328px) {
	.kd-image-wrapper {
		display: none !important;
	}

	.kd-actions div {
		width: auto;
		flex-grow: 1;
	}

	.kd-content {
		margin-top: 24px;
	}
}

/* Apply Bootstrap styling to Kendo DropDowns */
.k-widget, .k-dropdownlist, .k-dropdown, .k-input, .k-textarea {
	border-radius: 5px;
	border: 1px solid #ccc;
	padding: 8px;
	height: auto; /* Ensures it matches Bootstrap input height */
	background-color: #fff;
}

/* Ensure sidebar takes full height */
.sidebar {
	width: 280px;
	height: 100%;
	transition: width 0.3s ease-in-out;
	overflow: hidden;
}

	/* Collapsed Sidebar */
	.sidebar.collapsed {
		width: 4.5rem;
	}

		/* Hide sidebar text when collapsed */
		.sidebar.collapsed .sidebar-text {
			display: none;
		}

		/* Center icons when collapsed */
		.sidebar.collapsed .nav-link {
			text-align: center;
			padding: 10px 0;
		}

			.sidebar.collapsed .nav-link i {
				margin-right: 0;
			}

		/* Profile section */
		.sidebar.collapsed .dropdown-toggle {
			justify-content: center;
		}

		.sidebar.collapsed .nav-pills {
			display: none;
		}

.nav-pills .nav-item .nav-link.active {
	background-color: rgba(0,127,166,0.37) !important;
	color: white !important;
}

/* Prevent submenus from getting a blue highlight */
.nav-pills .nav-item ul .nav-link {
	color: white !important;
	background-color: transparent !important;
}

	/* Ensure submenus do NOT inherit the active background */
	.nav-pills .nav-item ul .nav-link:hover {
		background-color: rgba(255, 255, 255, 0.1) !important;
	}

/* Highlight only the parent when a submenu item is selected */
.nav-pills .nav-item .nav-link.active {
	background-color: rgba(255, 255, 255, 0.2);
	font-weight: bold;
}

#loadingDisplay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483647;
	background-color: #000000;
	opacity: 0.3;
	filter: alpha(opacity=30);
}

	#loadingDisplay IMG {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 1050;
		overflow: auto;
		width: 100px;
		margin: -50px 0 0 -50px;
	}

.loading-el {
	filter: brightness(85%);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483647;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
/*
	.loading-el::before {
		content: "Loading...  <div class=\"spinner-grow\" role=\"status\"><span class=\"sr-only\">Loading...</span></div>";
		font-weight: 900;
	}*/

.k-tabstrip .k-item {
	border: 1px solid lightgray; /* Faint border for unselected tabs */
	padding: 0px;
	font-weight: bold;
	margin-right: 2px; /* Space between tabs */
	color: black !important;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
	background-color: lightgray !important;
	border: 2px solid lightgray;
}

[aria-expanded="true"] {
	font-weight: bold;
	text-decoration: underline;
}
.activity-menu-container {
	max-height: 500px; /* Adjust height */
	overflow-y: auto; /* Enables vertical scrolling */
	scrollbar-width: none !important; /* Hide scrollbar in Firefox */
	-ms-overflow-style: none !important; /* Hide scrollbar in IE/Edge */
	position: relative;
}

	/* Hide scrollbar for WebKit browsers (Chrome, Safari) */
	.activity-menu-container::-webkit-scrollbar {
		width: 0px !important;
		height: 0px !important;
		display: none !important;
		background: transparent !important; /* Ensures background remains clean */
	}



.body-container {
	/*max-height: 1200px;*/ /* Adjust height */
	overflow-y: auto; /* Enable scrolling */
	scrollbar-width: thin;
	scrollbar-color: #999 #f5f5f5;	
}

/* Keep the parent title fixed */
/* Fix header at the top */
.activity-menu-header {
	position: sticky; /* Keeps it at the top while scrolling */
	top: 0;
	padding: 10px;
	font-size: 1.1rem;
	z-index: 10; /* Ensures it stays above content */
	background-color: inherit; /* Keeps background consistent */
}

/* Scrollable menu content */
.activity-menu-content {
	max-height: 450px; /* Adjust to prevent overflow */
	overflow-y: auto; /* Enables vertical scrolling */
	padding: 5px;
	/* Hide scrollbar for WebKit (Chrome, Safari) */
	scrollbar-width: none !important; /* Firefox */
	-ms-overflow-style: none !important; /* Internet Explorer/Edge */
}

	/* Hide scrollbar in WebKit browsers (Chrome, Safari) */
	.activity-menu-content::-webkit-scrollbar {
		width: 0px !important;
		height: 0px !important;
		display: none !important;
		background: transparent !important;
	}


.callout {
	padding: 15px;
	position: relative;
	border-left: 4px solid #ccc;
	background-color: #f8f9fa;
	margin-bottom: 1rem;
	border-radius: 4px;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Matches Bootstrap's .shadow class */
	padding: 1rem !important; /* Matches Bootstrap's .p-3 */
	margin-bottom: 1rem !important; /* Matches Bootstrap's .mb-5 */
	background-color: var(--bs-body-bg) !important; /* Matches Bootstrap's .bg-body */
	border-radius: 0.375rem !important; /* Matches Bootstrap's .rounded */
}

	.callout.callout-info {
		border-left-color: #17a2b8; /* Blue */
	}

	.callout.callout-warning {
		border-left-color: #ffc107; /* Yellow */
		background-color: #fff3cd;
	}

	.callout.callout-danger {
		border-left-color: #dc3545; /* Red */
		background-color: #f8d7da;
	}

	.callout.callout-success {
		border-left-color: forestgreen; /* Red */
		background-color: #f8d7da;
	}

.editor-limited {
	padding: 10px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	width: 100%;
	box-sizing: border-box;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for a subtle effect */
	transition: box-shadow 0.3s ease-in-out; /* Smooth transition for hover effect */
}

	.editor-limited:hover {
		box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
	}

.btn-text-white {
	color: white !important;
}

.callout .btn-close {
	position: absolute;
	top: 10px;
	right: 10px;
}

.highlight {
	background-color: yellow;
	font-weight: bold;
}

.btn-group-vertical .btn {
	margin-bottom: 2px !important;
	margin-top: 2px !important;
}


.backgroundSaveFailed {
	background-color: #f8d7da; /* Bootstrap's danger background color */
	color: #842029; /* Bootstrap's danger text color */
	padding: 10px;
	border-radius: 4px;
	animation: flash 1s ease-in-out;
}

.backgroundSaveSuccess {
	background-color: #d1e7dd; /* Bootstrap's success background color */
	color: #0f5132; /* Bootstrap's success text color */
	padding: 10px;
	border-radius: 4px;
	animation: flash 1s ease-in-out;
}
.save-results {
	margin-top: 5px;
	margin-bottom: 5px;
}

html, body {
	height: 100%;
	margin: 0;
}

#sidebar {
	background-image: linear-gradient(180deg, rgb(2, 58, 75) 50%, #034e65 90%);
	min-height: 100vh; /* Full viewport height */
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Optional: keeps nav items top and extras (e.g., footer/logout) at bottom */
}

.removed-subgroup {
/*	opacity: 0.5;
*/}


.restored-subgroup {
	animation: fadeHighlight 1.5s ease-in-out;
}

@keyframes fadeHighlight {
	0% {
		background-color: rgba(255, 255, 255, 0.5);
	}
	100% {
		background-color: transparent;
	}
}