.responsive-max-image-container {
    width: 100%;
    max-width: 300px;
    height: auto;
    max-height: 300px;
    overflow: hidden;
}

.responsive-max-image {
    width: 100%;
    height: auto;
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;        /* Keeps the image fully visible */
}

.hcenter {
    text-align: center;
    /*min-height: 32px;*/
}
.styled-box {    
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    background-color: #f9f9f9; /* Light background color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin-bottom: 20px; /* Space below the box */
}
.group-item {
    display: flex; /* Flexbox layout */
    align-items: center; /* Center items vertically */    
    gap: 0.25rem; /* Optional: Add some spacing between rows */
}

.group-name {
    width: 100%;
    text-align: left;    
    font-weight: bold; /* Bold for the group name */
    font-size: 1rem; /* Slightly larger font size */
    display: inline;
}

.group-description {
    color: #666; /* Muted color for description */
    font-size: 0.875rem; /* Slightly smaller font size */
    margin-top: 2px; /* Add spacing below the name */
    width: 100%;
    text-align: left;    
    display: inline;
}

.list-group-item {
    padding: 1rem; /* Adjust padding for better appearance */
}

input[type="checkbox"] {
    cursor: pointer; /* Change cursor to pointer on hover */
}

.row-container div {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 1rem; /* Optional: Add space between rows */
}
.light-yellow-background {
	background-color: rgba(255, 255, 0, 0.25) !important;
}


/* content area of any Telerik dialog */
.k-dialog .k-window-content {
	background-color: #e6f2ff; /* your light-blue */
}
/* title bar of any Telerik dialog */
.k-dialog .k-window-titlebar {
	background-color: #cce6ff;
	color: #004085;
}
/* Target only the predefined dialogs */
.k-dialog .k-window-titlebar .k-window-title::before {
	content: "";
	display: inline-block;
	width: 24px; /* size of your favicon */
	height: 24px;
	margin-right: 0.5rem; /* space between icon and text */
	/* Point to whatever icon you like: */
	background-image: url("/favicon.png");
	background-repeat: no-repeat;
	background-size: contain;
	/* optional vertical alignment tweak */
	vertical-align: middle;
}

/* fix z-index so dialog appears above Telerik grid spinner */
.k-dialog-wrapper {
	z-index: 999999 !important;
}