@import '_content/PowerPlan.Shared/PowerPlan.Shared.j4hf2m2oj8.bundle.scp.css';

/* _content/PowerPlan/Components/AccountHead.razor.rz.scp.css */
.account-head-container[b-a6nia3l85b] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: auto;
	background: var(--card-bg);
	border-radius: 16px;
	padding: 4px;
	color: var(--text-dark);
	z-index: 6;
	border: 1px solid var(--card-border);
	transition: background ease .2s, color ease .2s, border-color ease .2s;
	animation: header-b-a6nia3l85b .3s cubic-bezier(0.49, 0.77, 0.69, 1.07) forwards 1;
}
@keyframes header-b-a6nia3l85b {
	from {
		transform: translateY(1rem);
		opacity: .8;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.account-head-container div[b-a6nia3l85b]{
	display: flex;
	align-items: center;
}

	.account-head-container div .notification-bell[b-a6nia3l85b], .account-head-container div .messages[b-a6nia3l85b] {
		margin: 0 .5rem;
		opacity: 1;
		position: relative;
		height: 1.8rem;
		width: 1.8rem;
		padding: .3rem;
		border-radius: 50%;
		cursor: pointer;
		transition: background cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s, opacity cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s, color cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s, background cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s;
	}

	.notification-bell:active[b-a6nia3l85b], .notification-bell:focus[b-a6nia3l85b]{
		outline: none;
	} 
		.account-head-container div .notification-bell img[b-a6nia3l85b], .account-head-container div .messages img[b-a6nia3l85b]{
			height: 1.8rem;
			filter: invert(var(--nav-invert-filter)) opacity(0.5);
			margin: auto;
		}

		.account-head-container div .messages[b-a6nia3l85b] {
			margin: 0rem;
			margin-right: 1rem;
		}
			.account-head-container div .notification-bell:hover[b-a6nia3l85b],
			.account-head-container div .messages:hover[b-a6nia3l85b] {
				background: var(--bg-dark);
			}

			.account-head-container div .notification-bell:hover img[b-a6nia3l85b], 
			.account-head-container div .messages:hover img[b-a6nia3l85b]{
				filter: var(--primary-filter);

			}

			.account-head-container div div.dot[b-a6nia3l85b] {
				position: relative;
			}

				.account-head-container div div.dot[b-a6nia3l85b]:before {
					content: attr(number);
					position: absolute;
					color: var(--text-light);
					font-size: .55rem;
					min-width: .3rem;
					height: .7rem;
					line-height: .7rem;
					text-align: center;
					padding: 0 .20rem;
					font-family: var(--font-mono);
					margin-top: -1.4rem;
					margin-left: 1.2rem;
					border-radius: 1rem;
					background: var(--alert);
					outline: var(--alert50) .2rem solid;
					z-index: 2;
				}

.account-head-container div span[b-a6nia3l85b]{
	font-size: 2rem;
	opacity: .3;
	cursor: pointer;
	transition: opacity .2s ease;
}

.account-head-container div .personal-greeting[b-a6nia3l85b] {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text-dark);
	font-weight: 500;
}

.panel[b-a6nia3l85b] {
	position: absolute;
	width: 20rem;
	border: .1rem solid var(--card-border);
	background: var(--card-bg);
	padding: .5rem;
	padding-left: 0.5rem;
	padding-top: 1rem;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	align-items: initial !important;
	z-index: 8;
	opacity: 0;
	top: 5rem;
	right: 0;
	max-height: 5rem;
	animation: hide-b-a6nia3l85b .5s cubic-bezier(0.49, 0.77, 0.69, 1.07) 1;
	transition: opacity cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s, 
		width cubic-bezier(0.49, 0.77, 0.69, 1.07) .2s, 
		top cubic-bezier(0.49, 0.77, 0.69, 1.07) .25s, 
		right cubic-bezier(.54,1.61,.89,1) .4s, 
		max-height cubic-bezier(0.49, 0.77, 0.69, 1.07) .4s;
	box-sizing: border-box;
}

.panel.Notifications[b-a6nia3l85b] {
	right: 6rem;
}
	.panel.Messages[b-a6nia3l85b] {
		right: 3.5rem;
	}
	.panel.Profile[b-a6nia3l85b] {
		right: 0rem;
		width: 16rem;
	}

	.panel.show[b-a6nia3l85b] {
		opacity: 1;
		top: calc(16px + 3rem);
		max-height: min(calc(100vh - 3rem - 6rem), 40rem);
		animation: show-b-a6nia3l85b .5s cubic-bezier(0.49, 0.77, 0.69, 1.07) 1;
	}


.chat-component[b-a6nia3l85b] {
	position: relative;
	display: flex;
	flex-direction: row;
	border-radius: .5rem;
	background: var(--card-bg-top);
	width: calc(100% - 1.4rem);
	padding: .3rem;
	transition: box-shadow cubic-bezier(0.44, -0.07, 0.15, 0.9) .15s, outline cubic-bezier(0.44, -0.07, 0.15, 0.9) .15s;
	margin: .15rem 0;
	border: .1rem solid var(--card-border);
	outline: .0rem solid var(--primary);
	cursor: pointer;
}

.chat-component:not(.unread)[b-a6nia3l85b]{
	border: none;
}

	.chat-component .chat-details[b-a6nia3l85b] {
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: center;
		align-items: start;
		width: calc(100% - 3.5rem);
		margin-left: .5rem;
	}

		.chat-component .chat-details p[b-a6nia3l85b] {
			margin: 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 100%;
		}

		.chat-component .chat-details .name[b-a6nia3l85b] {
			font-family: var(--font-body);
			font-size: 10px;
			font-weight: 700;
			color: var(--text-dark);
		}

		.chat-component .chat-details .prev[b-a6nia3l85b] {
			font-family: var(--font-body);
			font-size: 12px;
			color: var(--text-dark);
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.chat-component .chat-details .timespan[b-a6nia3l85b] {
			font-family: var(--font-body);
			font-size: 10px;
			font-weight: 500;
			color: var(--text-dark-accent);
		}

	.chat-component .unread[b-a6nia3l85b] {
		position: absolute;
		top: 0rem;
		right: 0rem;
		margin: .5rem;
		transition: all cubic-bezier(0.44, -0.07, 0.15, 0.9) .15s;
		color: var(--text-light);
		font-size: .55rem;
		min-width: .3rem;
		height: .7rem;
		line-height: .7rem;
		text-align: center;
		padding: 0 .20rem;
		font-weight: 500;
		font-family: var(--font-mono);
		border-radius: 1rem;
		background: var(--alert);
		outline: var(--alert50) .2rem solid;
	}

	.chat-component:hover[b-a6nia3l85b] {
		outline: .2rem solid var(--primary);
	}

	.chat-component.selected[b-a6nia3l85b] {
		background: var(--card-bg-top);
		border-color: var(--bg-dark);
		box-shadow: var(--shadow-medium);
	}

@keyframes show-b-a6nia3l85b {
	0% {
		opacity: 0;
		top: 3rem;
		max-height: 5rem;
	}

	50% {
		opacity: 1;
		top: calc(16px + 3rem);
	}

	100% {
		max-height: min(calc(100vh - 3rem - 6rem), 40rem);
	}
}

@keyframes hide-b-a6nia3l85b {
	0% {
		max-height: min(calc(100vh - 3rem - 6rem), 40rem);
		opacity: 1;
		top: calc(16px + 3rem);
	}

	50% {
		opacity: 0;
		top: 3rem;
	}

	100% {
		max-height: 5rem;
	}
}

.panel.hide .notification-list[b-a6nia3l85b], .panel.hide .messages-list[b-a6nia3l85b] {
	overflow: hidden !important;
	transition: opacity cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s;
}
	.panel .head[b-a6nia3l85b], .panel .head[b-a6nia3l85b] {
		font-family: var(--font-header);
		font-weight: 900;
		color: var(--text-dark);
		padding-left: 0.5rem;
		margin: .5rem;
	}

	.panel .notification-list[b-a6nia3l85b], .panel .messages-list[b-a6nia3l85b] {
		overflow-y: auto;
		padding-left: .5rem;
		transition-delay: .35s;
		display: flex;
		flex-direction: column;
	}

		.panel .messages-list[b-a6nia3l85b]{
			padding-left: 0;
		}

		.panel .empty[b-a6nia3l85b] {
			width: calc(100% - 32px);
			border-radius: 8px;
			display: flex;
			justify-content: center;
			text-align: center !important;
			margin: 0;
			padding: 16px;
			background: var(--bg-dark);
			color: var(--text-dark-accent);
		}

			.panel .empty h2[b-a6nia3l85b] {
				margin: 0;
				font-family: var(--font-header);
				color: var(--input-text);
				font-weight: 900;
				font-size: 1rem;
			}

		.panel .foot[b-a6nia3l85b], .panel .foot[b-a6nia3l85b] {
			padding-left: .5rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.panel .foot .action[b-a6nia3l85b], .panel .foot .action[b-a6nia3l85b] {
			font-family: var(--font-header);
			font-weight: 800;
			color: var(--input-text);
			margin: .5rem;
			font-size: .8rem;
			cursor: pointer;
		}
			.panel .foot .action:hover[b-a6nia3l85b], .panel .foot .action:hover[b-a6nia3l85b] {
				text-decoration: underline;
				text-decoration-thickness: 2px;
			}
.chat-component.unread[b-a6nia3l85b] {
	box-shadow: var(--shadow-low);
}

	.chat-component.unread .prev[b-a6nia3l85b] {
		color: var(--primary);
	}

	.chat-component.unread .name[b-a6nia3l85b] {
		font-weight: 900;
	}

.profile-container[b-a6nia3l85b]{
	display: flex;
	flex-direction: column;
	align-items: center;
}

	.profile-container[b-a6nia3l85b]  .profilePicture,
	.profile-container .content[b-a6nia3l85b]{
		--s: 8rem;
	}

	.profile-container .content[b-a6nia3l85b] {
		position: relative;
		background: var(--bg-dark);
		padding: 1rem;
		padding-top: calc(1rem + (var(--s)/2));
		width: 100%;
		box-sizing: border-box;
		border-radius: .5rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.profile-container[b-a6nia3l85b]  .tooltip-container:has(button:not(.PrimaryMute)) {
		position: absolute;
		--m: 0.5rem;
		top: var(--m);
		z-index: 1;
	}

	.profile-container[b-a6nia3l85b]  .tooltip-container:has(button.opencard) {
		position: absolute;
		--m: 0.5rem;
		top: var(--m);
		left: var(--m);
		z-index: 1;
	}

	.profile-container[b-a6nia3l85b]  .tooltip-container:has(button.WarningMute) {
		right: var(--m);
	}

	.profile-container[b-a6nia3l85b]  button.PrimaryMute:not(.opencard) {
		--m: 0.5rem;
		background: var(--card-bg);
		color: var(--primary50);
		margin-top: .5rem;
		margin-bottom: 0;
		border-radius: 2rem;
	}

body[data-theme='dark'] .profile-container[b-a6nia3l85b]  button.PrimaryMute {
	color: var(--primary);
}

.profile-container .content h2[b-a6nia3l85b] {
	margin: .25rem;
	max-width: 100%;
	margin-top: 0.8rem;
	margin-bottom: 0;
	overflow: hidden;
	font-weight: 900;
	text-overflow: ellipsis;
	white-space: nowrap;
}

	.profile-container .content p[b-a6nia3l85b] {
		margin: .25rem;
		margin-top: 0;
		margin-bottom: .5rem;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.profile-container[b-a6nia3l85b]  .profilePicture {
		--bdr: 1rem;
		--m: 0.7rem;
		margin-bottom: calc((var(--s)/2)*-1);
		outline: 1rem solid var(--card-bg);
		transition: transform ease .2s, outline ease .2s;
	}
	.profile-container[b-a6nia3l85b]  .profilePicture:hover {
		outline: .5rem solid var(--card-bg);
	}

.tag-holder[b-a6nia3l85b] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 0.4rem;
	gap: 0.5rem;
	padding: 0.5rem;
	background: var(--card-bg);
	border-radius: 0.7rem;
}
/* _content/PowerPlan/Components/AdvancedEmployeeSelect.razor.rz.scp.css */
.select-employee[b-jvsov0urcr] {
    position: relative;
    display: flex;
    flex-direction: column;
}

p:not(.position)[b-jvsov0urcr] {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-dark80);
    height: 2.5rem;
    display: flex;
    align-items: center;
    background: var(--card-bg-top);
    padding: 0px 0.8rem;
    margin: 0px;
    border-radius: 0.6rem;
}

.controlls .buttons label[b-jvsov0urcr] {
    font-weight: 800;
    font-family: var(--font-header);
    font-size: 0.7rem;
    top: 0px;
    position: absolute;
    color: var(--input-text);
}

.action-label[b-jvsov0urcr],
[b-jvsov0urcr] .input-component label {
    position: relative;
    font-size: 10px;
    font-weight: 400;
    font-family: var(--font-body);
    display: none;
}

.select-employee .selected-employee[b-jvsov0urcr] { 
    gap: 8px;
    font-size: 1rem;
    border: .1rem solid var(--card-border);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-dark80);
    height: 2.5rem;
    display: flex;
    align-items: center;
    background: var(--card-bg-top);
    padding: 0px 0.8rem 0 4px;
    margin: 0px;
    border-radius: 0.6rem;
}

    .select-employee.disabled .selected-employee[b-jvsov0urcr] {
        opacity: 0.6;
    }

    .select-employee .selected-employee span.material-icons[b-jvsov0urcr] {
        margin-left: 8px;
        font-size: 1.2rem;
    }

    .select-employee .selected-employee span.open[b-jvsov0urcr] {
        border-radius: 50%;
        padding: 4px;
        margin: 0 -4px;
        transition: ease .2s background, ease .2s color;
    }

    .select-employee .selected-employee:hover span.open[b-jvsov0urcr] {
        background: var(--bg-dark50);
    }

    .select-employee .select-employee-lookup[b-jvsov0urcr] {
        --main: var(--label-text);
        --mx: 15rem;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 30rem;
        padding: .25rem;
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: var(--card-bg-top80);
        backdrop-filter: blur(8px);
        border-radius: .75rem;
        border: .1rem solid var(--card-bg);
        box-shadow: var(--shadow-medium);
        pointer-events: none;
    }

        .select-employee .select-employee-lookup label[b-jvsov0urcr] {
            position: relative;
            margin: 6px 0 0 1.8rem;
            color: var(--main);
        }

        .select-employee .select-employee-lookup.show[b-jvsov0urcr] {
            animation: employee-lookup-in-b-jvsov0urcr .2s ease-in 1 forwards;
        }

        .select-employee .select-employee-lookup.hide[b-jvsov0urcr] {
            animation: employee-lookup-out-b-jvsov0urcr .2s ease-in 1 forwards;
        }

        .select-employee .select-employee-lookup .lookup-list[b-jvsov0urcr] {
            overflow-y: scroll;
            max-height: var(--mx);
            display: flex;
            flex-direction: column;
        }

            .select-employee .select-employee-lookup .lookup-list .lookup-list-position[b-jvsov0urcr] {
                display: flex;
                flex-direction: column;
                background: var(--bg-dark50);
                border-radius: .5rem;
            }

@keyframes employee-lookup-in-b-jvsov0urcr {
    0% {
        transform: translateY(-2rem);
        opacity: 0;
        filter: blur(8px);
        z-index: 0;
        pointer-events: none;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
        filter: blur(0px);
        z-index: 10;
        pointer-events: unset;
    }
}

@keyframes employee-lookup-out-b-jvsov0urcr {
    0% {
        transform: translateY(0rem);
        opacity: 1;
        z-index: 10;
        filter: blur(0px);
        pointer-events: unset;
    }

    30% {
        z-index: 0;
    }

    100% {
        transform: translateY(-2rem);
        opacity: 0;
        filter: blur(8px);
        z-index: 0;
        pointer-events: none;
    }
}

.select-employee .select-employee-lookup .line[b-jvsov0urcr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: ease .2s background;
}

.select-employee.disabled .line[b-jvsov0urcr] {
    cursor: not-allowed;
}

.select-employee:not(.disabled) .select-employee-lookup .line:not(.header):not(.problem):hover[b-jvsov0urcr] {
    background: var(--bg-dark50);
}

.select-employee:not(.disabled) .select-employee-lookup .line:not(.header):hover[b-jvsov0urcr]  .checkbox:not(.checked):not(.disabled) span {
    opacity: .25;
    font-size: calc((var(--height) / 5) * 4);
    color: var(--primary);
}

.select-employee .select-employee-lookup .line.header[b-jvsov0urcr] {
    cursor: unset;
    padding: 0 2px;
    align-items: end;
    margin-right: 8px;
}

    .select-employee .select-employee-lookup .line.header[b-jvsov0urcr]  .checkbox {
        --height: 13px;
        opacity: 0;
        cursor: unset;
    }

.select-employee .select-employee-lookup .line p[b-jvsov0urcr] {
    border-radius: unset;
    background: unset;
    font-size: .8rem;
    padding: 0;
    margin: 4px 0;
    height: 0;
}

.select-employee .select-employee-lookup .line.header p[b-jvsov0urcr] {
    font-family: var(--font-header);
    font-weight: 800;
    font-size: .65rem;
}

    .select-employee .select-employee-lookup .line.header p.sortable[b-jvsov0urcr] {
        cursor: pointer;
        z-index: 1;
    }

        .select-employee .select-employee-lookup .line.header p.sortable span[b-jvsov0urcr] {
            font-size: 1rem;
        }

.select-employee .select-employee-lookup .line:has(.checkbox.checked) p[b-jvsov0urcr],
.select-employee .select-employee-lookup .line:has(.checkbox.partially-checked) p[b-jvsov0urcr] {
    font-weight: 800;
}

.select-employee .select-employee-lookup .line p.name[b-jvsov0urcr] {
    flex: 3;
}

.select-employee .select-employee-lookup .line p.position[b-jvsov0urcr] {
    flex: 2;
}

.select-employee .select-employee-lookup .line p.hours[b-jvsov0urcr] {
    flex: 2;
}

.select-employee .select-employee-lookup .line p.reason[b-jvsov0urcr] {
    flex: 4;
    display: unset;
    white-space: normal;
    height: unset;
}

.select-employee .select-employee-lookup .line[b-jvsov0urcr]  .position-tag {
    font-size: .6rem;
    padding: .2rem .35rem;
}

.select-employee .select-employee-lookup .line .reason.expand[b-jvsov0urcr] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.select-employee .select-employee-lookup .line .reason span[b-jvsov0urcr] {
    cursor: pointer;
}

    .select-employee .select-employee-lookup .line .reason span:hover[b-jvsov0urcr] {
        background: var(--card-bg);
        border-radius: .5rem;
    }

    .select-employee .select-employee-lookup .line .reason span.hide[b-jvsov0urcr] {
    }

.select-employee .select-employee-lookup .line.problem[b-jvsov0urcr] {
    padding-left: 2rem;
}


.select-employee .select-employee-lookup .lookup-list .unavailable-employees[b-jvsov0urcr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    padding: 5px 10px;
    margin: 0 0px;
    cursor: pointer;
    opacity: .8;
}

    .select-employee .select-employee-lookup .lookup-list .unavailable-employees:hover[b-jvsov0urcr] {
        opacity: 1;
        background: Var(--card-bg-top);
    }

    .select-employee .select-employee-lookup .lookup-list .unavailable-employees p[b-jvsov0urcr] {
        background: none;
        margin: 0;
        padding: 0;
        height: unset;
        font-size: 0.8rem;
        color: var(--text-dark);
    }

    .select-employee .select-employee-lookup .lookup-list .unavailable-employees span[b-jvsov0urcr] {
        font-size: 1rem;
        color: var(--text-dark);
    }
/* _content/PowerPlan/Components/BlockComponent.razor.rz.scp.css */
.block[b-5mg9mq0q3b] {
    flex: 1;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    margin: .25rem;
    padding: .5rem;
    border-radius: 1rem;
    min-width: 10rem;
    max-width: 15rem;
    height: auto;
    background: var(--bg-dark50);
    opacity: 1; 
    overflow: hidden;
    transition: .2s ease box-shadow;
}

    .block:hover[b-5mg9mq0q3b] {
        box-shadow: var(--shadow-low)
    }

    .block p[b-5mg9mq0q3b] {
        font-family: var(--font-body);
        font-weight: 400;
        color: var(--text-dark);
        margin: 0;
        flex: 1;
        border-radius: .5rem;
        margin: .5rem 0 0 0 !important;
        padding: 1rem;
        background: var(--card-bg-top);
    }

    .block b[b-5mg9mq0q3b] {
        font-weight: 900;
        font-size: 1.1rem;
        font-family: var(--font-header);
        text-transform: capitalize;
        margin: .5rem .75rem 0rem;
        color: var(--text-dark-accent);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }

    .block.deactivated b[b-5mg9mq0q3b],
    .block.deactivated p[b-5mg9mq0q3b] {
        opacity: 0.5;
    }

    .block p.date[b-5mg9mq0q3b] {
        background: unset;
        font-style: italic;
        margin: 0;
        padding: .25rem 1rem 0;
        opacity: .3;
    }

    .block .block-actions[b-5mg9mq0q3b] {
        position: absolute;
        right: -3rem;
        top: .5rem;
        transition: cubic-bezier(0.49, 0.77, 0.69, 1.07) .2s right;
    }

        .block .block-actions[b-5mg9mq0q3b]  button {
            margin-bottom: .25rem;
        }

    .block:hover .block-actions[b-5mg9mq0q3b] {
        right: .5rem;
    }
/* _content/PowerPlan/Components/BottomSheets/PunchesBottomSheet.razor.rz.scp.css */
.header[b-q6vo0pgfjf]{
    display: flex;
    flex-direction: row;
    gap: 16px; 
}

.col[b-q6vo0pgfjf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header .col[b-q6vo0pgfjf] {
    flex: 1;
    gap: 0;
}

    .header .col p[b-q6vo0pgfjf] {
        flex: 1;
        margin: 0;
        font-family: var(--font-mono);
    }

    .header .col h2[b-q6vo0pgfjf] {
        flex: 1;
        margin: 0;
    }

.list[b-q6vo0pgfjf]{
    display: flex;
    flex-direction: column;
    width: min(100%);
    gap: 4px;
    margin: 32px auto;
}

    .list .shift[b-q6vo0pgfjf],
    .list .list-header[b-q6vo0pgfjf] {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 8px 8px 8px 12px;
        box-sizing: border-box;
    }

    .list .list-header[b-q6vo0pgfjf] {
        color: var(--input-text);
        padding-bottom: 0;
    }

        .list .list-header p[b-q6vo0pgfjf] {
            color: var(--input-text);
            margin: 0;
        }

.list .shift[b-q6vo0pgfjf]{
    background: var(--card-bg-top);
    border: 1px solid var(--card-border);
    align-items: center;
    border-radius: 16px;
}

    .list p.day[b-q6vo0pgfjf],
    .list p.planned[b-q6vo0pgfjf],
    .list p.duration[b-q6vo0pgfjf],
    .list p.punched[b-q6vo0pgfjf],
    .list p.actions[b-q6vo0pgfjf] {
        flex: 3;
        margin: 0;
    }

    .list p.status[b-q6vo0pgfjf] {
        width: 64px;
        margin: 0;
    }

    .list p.actions[b-q6vo0pgfjf] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        opacity: 0;
        transition: ease .2s opacity;
        height: 28px;
    }
    .list .shift:hover p.actions[b-q6vo0pgfjf] {
        opacity: 1;
    }

    .list .shift .is-edit[b-q6vo0pgfjf] {
        flex: 7;
        height: 28px;
        background: var(--bg-dark);
        outline: 8px solid var(--bg-dark);
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .list .shift .is-edit .fields[b-q6vo0pgfjf]{
        flex: 6;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

        .list .shift .is-edit .fields .in-out[b-q6vo0pgfjf] {
            flex: 3;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }

        .list .shift .is-edit .fields .punched-duration[b-q6vo0pgfjf] {
            flex: 3;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }

        .list .shift .is-edit .actions[b-q6vo0pgfjf] {
            opacity: 1;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 4px;
            flex: 1;
        }


        .list .shift .is-edit[b-q6vo0pgfjf]  .input-display {
            padding: 0.425rem 0.6rem 0.425rem 1.4rem;
            margin: 0;
        }

        .list .shift .is-edit[b-q6vo0pgfjf]  .input-container .icon {
            top: 0.5rem;
        }

/* _content/PowerPlan/Components/ColorComponent.razor.rz.scp.css */
.color-component[b-e3m1hhthbb]{
    --height: 4rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    zoom: 2;
}
.color-container[b-e3m1hhthbb] {
    display: flex;
    flex-direction: row;
}
    .color-container div[b-e3m1hhthbb] {
        border-radius: .25rem;
        margin: .1rem;
        width: calc(var(--height) / 3);
        height: calc((var(--height) / 3)*2);
        cursor:  pointer;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    }
        .color-container div:first-of-type[b-e3m1hhthbb] {
            border-radius: .8rem .25rem .25rem .25rem !important;
        }
    .color-container div:last-of-type[b-e3m1hhthbb] {
        border-radius: .25rem .8rem .25rem .25rem !important;
    }
.gradient[b-e3m1hhthbb] {
    border-radius: .25rem .25rem .8rem .8rem;
    height: 1.5rem;
    margin: .1rem;
    margin-top: 0;
    width: calc(var(--height) + .4rem);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

    .gradient:hover[b-e3m1hhthbb], .color-container div:hover[b-e3m1hhthbb], .active[b-e3m1hhthbb] {
        outline: .15rem solid var(--primary50);
        outline-offset: .1rem;
        z-index: 1;
    }
/* _content/PowerPlan/Components/ContractFromTemplateComponent.razor.rz.scp.css */
.create-template[b-2muztdewrh] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

    .create-template.modal[b-2muztdewrh] {
        --m: 32px;
        --p: 32px;
        position: fixed;
        inset: var(--m);
        margin: auto;
        padding: var(--p);
        border-radius: var(--p);
        background: var(--card-bg-top80);
        backdrop-filter: blur(8px);
        z-index: 21;
        width: fit-content;
        box-shadow: inset 0 0 calc(var(--p) * 2) var(--card-bg-top), var(--shadow-large);
    }

.scrim[b-2muztdewrh] {
    z-index: 20;
}
.col[b-2muztdewrh] {
    display: flex;
    flex-direction: column;
}
.row[b-2muztdewrh] {
    display: flex;
    flex-direction: row;
}

.header[b-2muztdewrh]{
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
}

.header .col[b-2muztdewrh] {
    flex: 1;
    gap: 4px;
}
    .header .col h3[b-2muztdewrh] {
        margin: 0;
        font-weight: 900;
        font-size: 2rem;
    }
    .header .col p[b-2muztdewrh] {
        margin: 0;
    }
    .header .col p[b-2muztdewrh]  span{
        margin: 0;
        color: Var(--primary);
    }

.loading-container[b-2muztdewrh] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32px 0;
}

.content[b-2muztdewrh]{
    display: flex;
    flex-direction: row;
    gap: 32px;
    height: 100%;
    max-height: 100%;
    overflow: auto;
}
    .content .content-col[b-2muztdewrh] {
        flex: 1;
        min-width: 250px;
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 100%;
        max-width: 49em;
    }
    .content .data-list[b-2muztdewrh] {
        display: flex;
        flex-direction: column;
        overflow: auto;
    }
    .content .data-list h3[b-2muztdewrh] {
    }
    .content .data-list .variable[b-2muztdewrh]{
    }

.footer[b-2muztdewrh] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    margin: auto 0 0;
}
.footer .row[b-2muztdewrh]{
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
    .footer .buttons[b-2muztdewrh] {
        display: flex;
        gap: 8px;
        margin: 0 1rem 1rem calc(1rem + 8px);
    }

    .footer .row[b-2muztdewrh]  span.material-icons {
        font-size: 23px;
        line-height: 0.5;
        margin-top: 10px;
        color: var(--input-text);
    }
    .footer p[b-2muztdewrh] {
        margin: 0;
    }
    .footer[b-2muztdewrh]  button {
        margin: 0;
        width: fit-content;
    }

    .footer p.digital-signature-error[b-2muztdewrh] {
        margin-top: 8px;
        color: var(--warning);
    }
    .footer .row.disabled p[b-2muztdewrh],
    .footer .row.disabled[b-2muztdewrh]  span.material-icons {
        cursor: unset;
        opacity: 0.5;
    }

.preview-document-container[b-2muztdewrh]{ 
}

    .preview-document-container .header[b-2muztdewrh] {
        position: relative;
        margin: 0;
    }

    [b-2muztdewrh] .back-to-editor {
        position: absolute;
        top: 16px;
        left: 16px;
    }

.template-preview[b-2muztdewrh] {
    background: var(--card-bg-top);
    width: 49em;
    min-width: 49em;
    padding: 5em 4em;
    border: 1px solid var(--card-border);
    border-radius: var(--br, 24px);
}


@media (max-width: 1200px) {
    .create-template.modal[b-2muztdewrh] {
        --m: 0px;
        --p: 32px;
        border-radius: 0;
        box-shadow: inset 0 0 calc(var(--p) * 2) var(--card-bg-top);
    }
}
/* _content/PowerPlan/Components/CreateOrganization.razor.rz.scp.css */

/* _content/PowerPlan/Components/CronBlockComponent.razor.rz.scp.css */

.block-component[b-qwww2wl71r] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    padding: 1rem;
    width: calc(100% - 2rem);
    border-radius: .8rem;
    align-items: end;
}

    .block-component[b-qwww2wl71r]  .create-button {
        width: auto;
        margin: .5rem;
    }

.save[b-qwww2wl71r]  button {
    width: auto;
    margin: 8px 16px 16px;
}

.block-component > div[b-qwww2wl71r] {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.block-component h2[b-qwww2wl71r] {
    font-size: 1.1rem;
    margin: 0 .1rem .5rem;
}

.block-component .nav[b-qwww2wl71r] {
    width: 10rem;
    display: flex;
    flex-direction: column;
}

    .block-component .nav .list[b-qwww2wl71r] {
        position: relative;
    }

    .block-component h1[b-qwww2wl71r] {
        font-family: var(--font-header);
        font-weight: 800;
        width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
    }
[b-qwww2wl71r] .input-component:has(#block-input) label {
    color: var(--text-dark); 
}

[b-qwww2wl71r] .input-component:has(#block-input) input { 
    width: calc(100% - 1.9rem);
}

.block-component .nav .list-item[b-qwww2wl71r] {
    font-family: var(--font-header);
    color: var(--text-dark);
    margin: .2rem .2rem;
    margin-right: 2rem;
    padding: .6rem .8rem;
    font-size: 1.2rem;
    border-radius: .8rem;
    transition: all cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s;
    transition: margin cubic-bezier(0.49, 0.77, 0.69, 1.07) .4s;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: none;
    background: var(--card-bg);
}

    .block-component .nav .list-item p[b-qwww2wl71r] {
        margin: 0;
        margin: 0 .25rem !important;
        font-weight: 800;
        color: var(--input-text);
        transition: all cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s;
    }

        .block-component .nav .list-item:hover[b-qwww2wl71r] {
            color: var(--primary);
        }

            .block-component .nav .list-item:hover p[b-qwww2wl71r] {
                color: var(--primary);
            }

        .block-component .nav .list-item.active[b-qwww2wl71r] {
            color: var(--primary);
            background: var(--element-bg);
            font-weight: 900;
            border: .1rem solid  var(--card-border);
        }

            .block-component .nav .list-item.active p[b-qwww2wl71r] {
                color: var(--primary);
            }

            .block-component .nav .list-item.active span[b-qwww2wl71r] {
                color: var(--primary);
            }

.block-content[b-qwww2wl71r] {
    flex: 1;
    margin-left: 1rem;
    display: flex;
    height: auto;
    flex-direction: column;
}

    .block-content[b-qwww2wl71r]  > .input-component {
        margin: 0 !important; 
    }

        .block-content[b-qwww2wl71r]  > .input-component input {
            border: none !important;
            margin: .5rem 0 !important;
            box-shadow: none !important;
        }

.timestamps[b-qwww2wl71r] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .5rem;
}

    .timestamps[b-qwww2wl71r]  .input-component {
        margin: 0 !important;
        width: unset;
        min-width: 9rem;
        flex: 1;
    }

.block-tabs[b-qwww2wl71r] {
    padding: 1rem;
    background: var(--card-bg-top);
    border-radius: .8rem;
}


.days[b-qwww2wl71r] {
    display: flex;
    width: 100%;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.day[b-qwww2wl71r] {
    font-family: var(--font-header);
    font-weight: 800;
    color: var(--text-dark);
    background: var(--default);
    text-align: center;
    border-radius: .5rem;
    padding: .4rem 3%;
    font-size: 14px;
    margin: .3rem 0;
    cursor: pointer;
    border: none;
}

    .day:hover[b-qwww2wl71r] {
        background: var(--bg-dark);
    }

    .day.active[b-qwww2wl71r] {
        color: var(--primary);
        background: var(--bg-dark);
    }

.options[b-qwww2wl71r] {
    display: flex;
    flex-direction: row;
}

    .options .day[b-qwww2wl71r] {
        margin-right: .5rem;
    } 

.activation[b-qwww2wl71r]{
    align-items: start;
    box-sizing: border-box;
    padding: 0 .5rem .5rem;
    gap: 4px;
}

.activation .row-a[b-qwww2wl71r] {
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
}
.activation .col[b-qwww2wl71r] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.activation label[b-qwww2wl71r]{
    font-family: var(--font-header);
    font-weight: 800;
    color: var(--text-dark);
    font-size: 1.2rem;
    opacity: .8;
}

.activation .sub-setting[b-qwww2wl71r]{
    padding: .5rem .75rem .5rem 0.5rem;
    border-radius: .75rem;
    gap: 8px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background: var(--bg-dark50); 
}
    .activation .error .sub-setting[b-qwww2wl71r] {
        background: var(--card-bg-warning);
    }
    .activation .sub-setting .row-a[b-qwww2wl71r] {
        gap: 8px;
        flex: unset;
    }
    .activation .sub-setting label[b-qwww2wl71r] {
        font-family: var(--font-body);
        font-weight: 400;
        color: var(--text-dark);
        font-size: 1rem;
        opacity: .8;
    }
    .activation .sub-setting label.active[b-qwww2wl71r] {
        font-weight: 600;
        opacity: 1;
    }
    .activation .sub-setting .col[b-qwww2wl71r]{
        gap: .5rem;
    }


    .error label[b-qwww2wl71r] {
        color: var(--warning);
    }
/* _content/PowerPlan/Components/DetailedShiftComponent.razor.rz.scp.css */
.nextshift[b-xt9v1l8o6a] {
    width: 17rem;
    background: var(--card-bg);
    border: .1rem solid var(--card-border);
    padding: 1.5rem;
    border-radius: 1.5rem;
    position: relative;
    font-family: var(--font-header);
    color: var(--text-dark);
    margin: 0;
    cursor: pointer;
    box-shadow: none;
    transition: all .2s ease, box-shadow .2s ease;
    min-width: 15rem;
    max-height: 4rem;
    max-height: 9.5rem;
    min-height: 9.5rem;
    min-width: 15rem;
    min-width: 15rem;
    flex-grow: 1;
    margin-top: .5rem;
    display: flex;
    flex-direction: column; 
}

    .nextshift:hover[b-xt9v1l8o6a] {
        transform: translateY(-4px);
        box-shadow: inset 0 0 4vmin -1.5vmin var(--card-bg-top), var(--shadow-float);
    }

    .nextshift:not(.shadow-medium):not(.now):hover[b-xt9v1l8o6a] {
        background: var(--card-bg) !important;
    }

    .nextshift:not(.shadow-medium):hover[b-xt9v1l8o6a] {
        transform: translateY(-.2rem);
        box-shadow: var(--shadow-low);
        z-index: 1;
    }

    .nextshift.small[b-xt9v1l8o6a] {
        margin: 0;
        height: fit-content;
        min-height: calc(6.25rem - 2px);
        padding: 11px 8px 10px 14px !important;
        flex: 1;
        width: unset;
        min-width: 12rem !important;
        border-radius: 1rem;
        border: .1rem solid var(--card-border);
        box-sizing: border-box;
    }

        .nextshift.small.freed[b-xt9v1l8o6a] {
            padding: .9rem 1rem .5rem .9rem;
            min-width: 12rem !important;
            justify-content: space-between;
        }

    .nextshift.now[b-xt9v1l8o6a] {
        border: none;
        background: var(--primary-gradient);
        background: linear-gradient(155deg, var(--primary-gradient-color) 8%, var(--primary) 100%);
        box-shadow: inset var(--bg-dark2) 0 0 3rem -0.5rem, var(--shadow-low);
    }

        .nextshift.now:hover[b-xt9v1l8o6a] {
            box-shadow: inset var(--bg-dark2) 0 0 1.5rem, var(--shadow-medium);
        }

        .nextshift.now:not(.small)[b-xt9v1l8o6a] {
            padding: 1.6rem;
        }

        .nextshift.now .date-container[b-xt9v1l8o6a],
        .nextshift.now .time-container[b-xt9v1l8o6a],
        .nextshift.now .time-container span[b-xt9v1l8o6a],
        .nextshift.now .names[b-xt9v1l8o6a] {
            color: var(--text-light);
            opacity: 1;
        }

            .nextshift.now .date-container:not(.day)[b-xt9v1l8o6a],
            .nextshift.now .time-container[b-xt9v1l8o6a],
            .nextshift.now .time-container span[b-xt9v1l8o6a],
            .nextshift.now .names[b-xt9v1l8o6a] {
                font-weight: 700;
            }


.tag-container[b-xt9v1l8o6a] {
    width: auto;
    overflow: visible;
    position: absolute;
    display: flex;
    flex-direction: row;
    top: -0.5rem;
    left: .7rem;
    z-index: 1;
}

    .nextshift .date-container[b-xt9v1l8o6a] {
        color: var(--text-dark);
        display: flex;
        flex-direction: row;
    }

        .nextshift .date-container .date-container-text[b-xt9v1l8o6a] {
            display: flex;
            flex-direction: column;
        }

        .nextshift .date-container .date[b-xt9v1l8o6a] {
            font-family: var(--font-body);
            display: flex;
            flex-direction: column;
            font-weight: 500;
        }

        .nextshift .date-container .day[b-xt9v1l8o6a] {
            font-weight: 900;
            font-size: 1.5rem;
            text-transform: capitalize;
        }

    .nextshift.small .date-container .date[b-xt9v1l8o6a] {
        font-size: 12px;
        margin: 0;
    }

.nextshift.small .date-container .day[b-xt9v1l8o6a] {
    font-size: 18px;
    margin-bottom: 0px;
}

    .nextshift.small.freed .date-container .day[b-xt9v1l8o6a] {
        font-size: 1.1rem;
        margin: 0rem 0 .3rem;
    }

    .nextshift .timeuntill[b-xt9v1l8o6a] {
        position: absolute;
        top: 3rem;
        right: .6rem;
        background: var(--tag-bg);
        color: var(--text-dark);
        padding: .3rem .8rem;
        font-size: .8rem;
        font-weight: 600;
        font-family: var(--font-body);
        border-radius: 16px;
        transition: cubic-bezier(0.49, 0.77, 0.69, 1.07) .2s all;
    }

    .nextshift.small .timeuntill[b-xt9v1l8o6a] {
        font-size: .6rem;
        top: .5rem;
        right: 0.5rem !important;
        padding: .25rem .6rem;
    }

    /*with position*/
    .nextshift.small .position-tag + .date-container .timeuntill[b-xt9v1l8o6a] {
        top: 0.4rem;
    }

    .nextshift.soon .timeuntill[b-xt9v1l8o6a] {
        color: var(--text-dark);
        background: transparent;
        border-width: 0;
        padding: .35rem 0;
        font-weight: 700;
        right: 1rem;
    }

    .nextshift.now .timeuntill[b-xt9v1l8o6a] {
        display: none;
    }

    .nextshift:not(.small)[b-xt9v1l8o6a]  .position-tag {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .nextshift.small[b-xt9v1l8o6a]  .position-tag {
        position: absolute;
        top: 2rem;
        right: .4rem;
    }

.duration-bar-container[b-xt9v1l8o6a] {
    width: 100%;
    position: relative;
    height: .5rem;
    border-radius: .5rem;
    background: var(--bg-darker50);
    margin-top: 1rem;
}

.duration-bar[b-xt9v1l8o6a] {
    height: 100%;
    width: 0%;
    min-width: .5rem;
    border-radius: .5rem;
    transition: ease .2s width;
    background: var(--card-bg);
    background: linear-gradient(-45deg, var(--card-bg) 0%, var(--card-bg) 5%,var(--card-bg50) 5%, var(--card-bg50) 10%, var(--card-bg) 10%, var(--card-bg) 15%, var(--card-bg50) 15%, var(--card-bg50) 20%, var(--card-bg) 20%, var(--card-bg) 25%, var(--card-bg50) 25%, var(--card-bg50) 30%, var(--card-bg) 30%, var(--card-bg) 35%, var(--card-bg50) 35%, var(--card-bg50) 40%, var(--card-bg) 40%, var(--card-bg) 45%, var(--card-bg50) 45%, var(--card-bg50) 50%, var(--card-bg) 50%, var(--card-bg) 55%, var(--card-bg50) 55%, var(--card-bg50) 60%, var(--card-bg) 60%, var(--card-bg) 65%, var(--card-bg50) 65%, var(--card-bg50) 70%, var(--card-bg) 70%, var(--card-bg) 75%, var(--card-bg50) 70%, var(--card-bg50) 80%, var(--card-bg) 80%, var(--card-bg) 85%, var(--card-bg50) 85%, var(--card-bg50) 90%, var(--card-bg) 90%, var(--card-bg) 95%, var(--card-bg50) 95%);
    background-size: 6em 6em;
    animation: AnimateBG-b-xt9v1l8o6a 9s linear infinite, AnimateScale 1s ease 2, shiftAppear .15s ease-in 1 forwards;
}

@keyframes AnimateBG-b-xt9v1l8o6a {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 6em 50%;
    }
}

.nextshift .time-container[b-xt9v1l8o6a] {
    position: relative;
    font-family: var(--font-mono);
    margin-top: 0rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-dark);
    opacity: .8;
    width: 100%;
    text-align: left;
}

.nextshift.small .time-container[b-xt9v1l8o6a] {
    margin: 0;
    margin-top: 0rem;
    font-size: .8rem;
    bottom: .8rem;
    position: unset;
    width: calc(100%);
}

.nextshift.small.freed .time-container[b-xt9v1l8o6a] {
    width: calc(100% - 1.2rem);
}

.nextshift .duration-text[b-xt9v1l8o6a] {
    font-size: .8rem;
    display: flex;
    align-items: center;
    color: var(--text-dark-mute);
    font-family: var(--font-mono);
}

.nextshift.now .duration-text[b-xt9v1l8o6a] {
    display: none;
}

.nextshift .duration-text span[b-xt9v1l8o6a],
.nextshift[b-xt9v1l8o6a]  .punch,
.nextshift[b-xt9v1l8o6a]  .comment {
    font-size: .7rem;
    margin-right: .2rem;
    margin-top: .2rem;
}

    .nextshift[b-xt9v1l8o6a]  .punch,
    .nextshift[b-xt9v1l8o6a]  .comment {
        background: var(--bg-dark);
        color: var(--input-text);
        padding: 3px;
        margin: 0;
        border-radius: 4px;
    }

.nextshift[b-xt9v1l8o6a]  .comment {
    color: var(--primary);
}

.nextshift .badges[b-xt9v1l8o6a] {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.nextshift.small .duration-text[b-xt9v1l8o6a] {
    font-size: 10px;
}

.nextshift:not(.small) .date-container[b-xt9v1l8o6a]  .profilePicture {
    margin-right: 8px;
}

.small .date-container[b-xt9v1l8o6a]  .profilePicture {
    --s: 33px;
    --bdr: 7px;
}

.nextshift[b-xt9v1l8o6a]  .take-shift {
    font-size: 12px; 
    font-weight: 700;
    justify-content: start;
    flex-direction: row-reverse;
    z-index: 2;
}

.nextshift[b-xt9v1l8o6a]  .tooltip-container:has(.take-shift) {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
} 

    .nextshift[b-xt9v1l8o6a]  .take-shift span {
        font-size: 16px;
        font-weight: 900;
        margin-left: .4rem;
        pointer-events: none;
    }

.nextshift.small[b-xt9v1l8o6a]  .take-shift { 
    padding: 4px; 
}
.nextshift.small[b-xt9v1l8o6a]  .tooltip-container:has(.take-shift) {
    right: 0.5rem;
    bottom: 0.5rem;
}

    .nextshift.small[b-xt9v1l8o6a]  .take-shift span {
        font-size: 14px;
        margin-left: 0rem;
    }

.nextshift .co-workers-container[b-xt9v1l8o6a] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: .5rem;
    position: absolute;
    bottom: 8px;
    left: 8px;
    height: 30px;
    padding: 8px;
    border-radius: 16px;
    width: calc(100% - 32px);
    background: var(--bg);
}

    .nextshift .co-workers-container .empty-message[b-xt9v1l8o6a] {
        font-size: 0.9rem;
        font-weight: 800;
        color: var(--input-text);
        margin: 0 1rem;
        text-align: center;
        flex: 1;
    }

        .now.nextshift .co-workers-container .empty-message[b-xt9v1l8o6a]{
            color: var(--card-bg-top80);
        }

        .nextshift.freed .co-workers-container[b-xt9v1l8o6a] {
            height: 2.5rem;
        }

            .nextshift.freed .co-workers-container[b-xt9v1l8o6a]  .picture-list {
                flex: 1;
            }

.nextshift.now .co-workers-container[b-xt9v1l8o6a] {
    background: var(--bg-dark3);
}
.nextshift.now .co-workers-container[b-xt9v1l8o6a]  .names {
    color: var(--text-light);
}

[b-xt9v1l8o6a] .tooltip-container:has(.onclicktext) {
    position: absolute;
    top: -3rem;
    right: 0;
    transition: cubic-bezier(0.49, 0.77, 0.69, 1.07) .2s all;
}

.onclicktext[b-xt9v1l8o6a] { 
    opacity: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 800;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 12px;
    background: var(--card-bg-top);
    border: .1rem solid var(--card-border);
    padding: .5rem .7rem;
    border-radius: .3rem;
    margin: .5rem;
    transition: cubic-bezier(0.49, 0.77, 0.69, 1.07) .2s all;
    pointer-events: none;
    z-index: 3;
}

.small .onclicktext[b-xt9v1l8o6a] {
    padding: .4rem;
}

.onclicktext span[b-xt9v1l8o6a] {
    margin-right: .4rem;
    font-size: 1rem;
}

.small .onclicktext span[b-xt9v1l8o6a] {
    margin: 0;
}

.onclicktext:hover[b-xt9v1l8o6a] {
    background: var(--bg);
}

.nextshift:hover .onclicktext[b-xt9v1l8o6a] { 
    opacity: 1;
}
.nextshift:hover[b-xt9v1l8o6a]  .tooltip-container:has(.onclicktext) {
    top: 0rem;
}

.now[b-xt9v1l8o6a]  .more-employees {
    outline: none;
    margin-left: 0;
}

[b-xt9v1l8o6a] .tooltip-container:has(.site-tag) {
    position: absolute;
    right: 0.5rem;
    bottom: 4rem;
}
.small[b-xt9v1l8o6a]  .tooltip-container:has(.site-tag) { 
    right: 0.5rem;
    bottom: 0.5rem;
}
    .small[b-xt9v1l8o6a]  .tooltip-container:has(.site-tag) .site-tag {
        --s: 1.3rem; 
    }
.small[b-xt9v1l8o6a]  .tooltip-container:has(.site-tag) .site-tag .icon {
    font-size: 12px;
}

.small.freed[b-xt9v1l8o6a]  .tooltip-container:has(.site-tag) {
    right: 2.5rem; 
}
/* _content/PowerPlan/Components/DevBar.razor.rz.scp.css */
.devbar[b-495udtspl8] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--devbar-height);
    min-height: var(--devbar-height);
    background: var(--bg-dark2);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    gap: 8px;
    z-index: 100;
}

    .devbar.hide *[b-495udtspl8],
    .devbar.hide[b-495udtspl8]  *{
        opacity: 0; 
    }

    .devbar.hide a[b-495udtspl8] { 
        pointer-events: none;
    }

.devbar .row[b-495udtspl8] {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.devbar .button[b-495udtspl8]{
    font-size: 12px;
    background: var(--bg-dark3);
    color: var(--text-light);
    padding: 4px 8px;
    border-radius: 16px;
}

    .devbar a[b-495udtspl8] {
        font-family: var(--font-body);
        text-decoration: none;
    }

    .devbar span.button[b-495udtspl8] {
        font-size: 12px;
        font-weight: 900;
        padding: 6px;
        cursor: pointer;
    }

    .devbar.hide span.button.show[b-495udtspl8] {
        position: absolute;
        right: 1rem;
        top: calc(1rem - 14px);
        z-index: 10;
    }
        .devbar.hide span.button.show:hover[b-495udtspl8]{
            opacity: 1;
        }
    .devbar.hide .row:has(span.button.show:hover)[b-495udtspl8]{
        opacity: 1;
    }

    .devbar[b-495udtspl8]  .input-component input {
        font-size: 12px;
        background: var(--bg-dark3);
        color: var(--text-light);
        padding: 4px 8px 4px 14px;
        font-weight: 400;
        border-radius: 16px;
        border: none;
        margin: 0;
        width: 128px;
        text-overflow: ellipsis;
    }

    .devbar[b-495udtspl8]  .input-component span.arrow {
        padding: 4px;
        top: 0;
        right: 0;
        font-size: 16px;
        color: var(--bg);
    }
/* _content/PowerPlan/Components/DocumentsFileComponent.razor.rz.scp.css */
/* Inspired by PostsPage.razor.css for a consistent look and feel */
.documents-page-container[b-jmbciinsyz] {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 7rem - var(--devbar-height));
    padding: 1rem;
}

.file-tree-panel[b-jmbciinsyz] {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--card-bg);
    border: .1rem solid var(--card-border);
    border-radius: 1rem;
}

.tree-header[b-jmbciinsyz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: .1rem solid var(--card-border);
}

    .tree-header h3[b-jmbciinsyz] {
        margin: 0;
        font-size: 1.1rem;
        color: var(--text-dark);
    }

    .tree-header[b-jmbciinsyz]  .new-button button {
        padding: .4rem .8rem;
    }

.tree-content[b-jmbciinsyz] {
    overflow-y: auto;
    padding: .5rem;
}

/* Individual File Tree Item Styling */
.file-tree-item-wrapper[b-jmbciinsyz] {
    display: flex;
    flex-direction: column;
}

.file-tree-item[b-jmbciinsyz] {
    display: flex;
    align-items: center;
    padding: .4rem .5rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color .2s ease;
    user-select: none;
    gap: .5rem;
}

    .file-tree-item:hover[b-jmbciinsyz] {
        background-color: var(--bg-darker50);
    }

    .file-tree-item.selected[b-jmbciinsyz] {
        background-color: var(--primary20);
    }

        .file-tree-item.selected .item-name[b-jmbciinsyz] {
            font-weight: 600;
            color: var(--primary);
        }

    .file-tree-item .drag-handle[b-jmbciinsyz] {
        cursor: grab;
        color: var(--input-text);
        opacity: 0.5;
    }

    .file-tree-item:hover .drag-handle[b-jmbciinsyz] {
        opacity: 1;
    }

    .file-tree-item .icon-folder[b-jmbciinsyz],
    .file-tree-item .icon-file[b-jmbciinsyz] {
        color: var(--primary);
    }

    .file-tree-item .item-name[b-jmbciinsyz] {
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-dark);
    }

    .file-tree-item .kebab-menu[b-jmbciinsyz] {
        margin-left: auto;
        opacity: 0;
        transition: opacity .2s ease;
    }

    .file-tree-item:hover .kebab-menu[b-jmbciinsyz] {
        opacity: 1;
    }

    .file-tree-item .rename-input[b-jmbciinsyz] {
        flex-grow: 1;
        padding: .2rem .4rem;
        border-radius: .3rem;
        border: 1px solid var(--primary);
        outline: none;
        background: var(--element-bg);
    }

.sub-items[b-jmbciinsyz] {
    padding-left: 1.5rem; /* Indentation for children */
    border-left: 1px solid var(--card-border);
    margin-left: 1rem;
}

/* Right Panel Viewer Styling */
.content-panel[b-jmbciinsyz] {
    flex: 3;
    overflow: hidden; /* Important for containing the viewer */
}

.viewer-container[b-jmbciinsyz] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0; /* Let the children handle padding */
}

.empty-state[b-jmbciinsyz], .folder-state[b-jmbciinsyz] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    color: var(--input-text);
}

    .empty-state .empty-icon[b-jmbciinsyz] {
        font-size: 5rem;
        color: var(--bg-darker);
    }

    .empty-state h1[b-jmbciinsyz] {
        margin: 1rem 0 .5rem;
        color: var(--text-dark);
    }

.preview-header[b-jmbciinsyz], .editor-header[b-jmbciinsyz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
    background: var(--card-bg-top);
}

    .preview-header h2[b-jmbciinsyz], .editor-header h2[b-jmbciinsyz] {
        display: flex;
        align-items: center;
        gap: .75rem;
        margin: 0;
        font-size: 1.2rem;
    }

.preview-content[b-jmbciinsyz], .editor-instance[b-jmbciinsyz] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

    /* Use the editor styles from PostsPage */
    .editor-instance[b-jmbciinsyz]  .ql-toolbar {
        background: var(--bg);
        border-radius: .8rem;
        margin-bottom: 8px;
        border: none;
    }

    .editor-instance[b-jmbciinsyz]  .ql-container {
        background: var(--card-bg-top);
        border: none !important;
        height: calc(100% - 60px) !important;
    }

/* Loading Ghost Animation */
.ghost-item[b-jmbciinsyz] {
    height: 2.2rem;
    width: 90%;
    margin: .5rem;
    border-radius: .5rem;
    animation: skeleton-loading 1s linear infinite alternate;
}


.unsupported-preview[b-jmbciinsyz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: var(--input-text);
    background-color: var(--bg-darker50);
    border-radius: .8rem;
}

    .unsupported-preview .material-icons-round[b-jmbciinsyz] {
        font-size: 3rem;
    }


.unsupported-preview a[b-jmbciinsyz]{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
    .unsupported-preview a span.material-icons-round[b-jmbciinsyz] {
        font-size: 2rem;
    }

.image-preview[b-jmbciinsyz] {
    max-width: 100%;
    display: flex;
}

    .image-preview img[b-jmbciinsyz] {
        max-width: 100%;
        margin: 0 auto;
        border-radius: 8px;
    }

.pdf-preview .preview-iframe[b-jmbciinsyz] {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: .5rem;
}

.uploadedBy[b-jmbciinsyz]{
    margin: 16px auto;
    text-align: center;
    opacity: .3;
}


[b-jmbciinsyz] span.ql-TemplateMarker {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    font-weight: 600;
    border-radius: 0.4rem;
    user-select: none;
    cursor: default;
    line-height: 1.5;
    font-weight: inherit;
    font: inherit;
    text-decoration: inherit;
}

    [b-jmbciinsyz] span.ql-TemplateMarker[data-color="secondary"] {
        background-color: var(--mute, #e9ecef);
        color: var(--primary, #0d6efd);
        border: 1px solid var(--card-border, #ced4da);
    }

    [b-jmbciinsyz] span.ql-TemplateMarker[data-color="primary"] {
        background-color: var(--primary, #0d6efd);
        color: var(--text-light);
    }

    [b-jmbciinsyz] span.ql-TemplateMarker[data-color="warning"] {
        background-color: var(--bad, #dc3545);
        / color: var(--text-light);
    }

    [b-jmbciinsyz] span.ql-TemplateMarker[data-color="danger"] {
        background-color: var(--bad, #dc3545);
        color: var(--light-text, #fff);
    }

    [b-jmbciinsyz] span.ql-TemplateMarker[data-color="blue"] {
        background-color: var(--bg-darker);
        color: var(--primary);
    }

    [b-jmbciinsyz] span.ql-TemplateMarker[data-color="purple"] {
        background-color: var(--admin-bg);
        color: var(--admin-hover);
    }

    [b-jmbciinsyz] span.ql-TemplateMarker[data-color="orange"] {
        background-color: var(--bad);
        color: var(--bad-text);
    }

[b-jmbciinsyz] button.ql-add-custom-var {
    background: none;
    border: none;
    padding: 3px 8px;
    margin: 0 4px;
    cursor: pointer;
    width: auto;
    height: 24px;
    vertical-align: middle;
}

    [b-jmbciinsyz] button.ql-add-custom-var .material-icons {
        font-size: 18px;
        color: #444;
        vertical-align: middle;
        line-height: 1;
    }

    [b-jmbciinsyz] button.ql-add-custom-var:hover .material-icons {
        color: #06c;
    }

[b-jmbciinsyz] .custom-variable-wrapper {
    position: relative;
    display: inline-block;
    float: left;
}

[b-jmbciinsyz] .custom-var-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark-accent, #6c757d);
    padding: 0 4px;
    margin-bottom: 4px;
    display: block;
}

[b-jmbciinsyz] .custom-var-validation {
    font-size: 12px;
    color: var(--bad, #dc3545);
    padding: 4px 4px 0 4px;
    display: block;
}

[b-jmbciinsyz] .btn-insert-custom {
    background: var(--primary, #0d6efd);
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: ease .2s opacity;
}

    [b-jmbciinsyz] .btn-insert-custom:hover {
        opacity: 0.9;
    }


[b-jmbciinsyz] span.ql-TemplateMarker-manual {
    position: relative;
    border: 1px solid var(--primary);
    box-sizing: border-box;
    color: var(--primary);
    padding-left: 21px;
    background: var(--bg-dark);
    border-radius: 12px;
    font-weight: inherit;
    font: inherit;
}

    [b-jmbciinsyz] span.ql-TemplateMarker-manual::before {
        content: " ";
        position: absolute;
        --s: 8px;
        height: var(--s);
        min-height: var(--s);
        max-height: var(--s);
        width: var(--s);
        min-width: var(--s);
        max-width: var(--s);
        border-radius: 50%;
        background: var(--primary);
        top: 7px;
        left: 6px;
    }
/* _content/PowerPlan/Components/DocumentViewer.razor.rz.scp.css */

/* Right Panel Viewer Styling */
.content-panel[b-8n4ryg746m] {
    flex: 3;
    overflow: hidden; /* Important for containing the viewer */
}

.viewer-container[b-8n4ryg746m] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0; /* Let the children handle padding */
    background: var(--card-bg);
    box-sizing: border-box;
    border: none;
    border-radius: 16px;
}

.empty-state[b-8n4ryg746m], .folder-state[b-8n4ryg746m] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    color: var(--input-text);
}

    .empty-state .empty-icon[b-8n4ryg746m] {
        font-size: 5rem;
        color: var(--bg-darker);
    }

    .empty-state h1[b-8n4ryg746m] {
        margin: 1rem 0 .5rem;
        color: var(--text-dark);
    }

.header[b-8n4ryg746m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
    box-sizing: border-box;
    background: var(--card-bg-top);
    border-radius: 12px;
    margin: 4px;
    box-sizing: border-box;
    width: calc(100% - 8px);
}

    .header h2[b-8n4ryg746m] {
        display: flex;
        align-items: center;
        gap: .75rem;
        margin: 4px 0;
        font-size: 1.2rem;
    }

    .header[b-8n4ryg746m]  button {
        flex-direction: row-reverse;
        padding: 0.45rem 1rem;
    }

    .preview-content[b-8n4ryg746m], .editor-instance[b-8n4ryg746m] {
        flex-grow: 1;
        overflow-y: auto;
        padding: 1.5rem;
    }

    /* Use the editor styles from PostsPage */
    .editor-instance[b-8n4ryg746m]  .ql-toolbar {
        background: var(--bg);
        border-radius: .8rem;
        margin-bottom: 8px;
        border: none;
    }

    .editor-instance[b-8n4ryg746m]  .ql-container {
        background: var(--card-bg-top);
        border: none !important;
        height: calc(100% - 60px) !important;
    }

/* Loading Ghost Animation */
.ghost-item[b-8n4ryg746m] {
    height: 2.2rem;
    width: 90%;
    margin: .5rem;
    border-radius: .5rem;
    animation: skeleton-loading 1s linear infinite alternate;
}

.editor-actions[b-8n4ryg746m]{
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.icon[b-8n4ryg746m] {
    color: var(--primary);
}

.header h2[b-8n4ryg746m]  .tooltip-container span.access {
    color: var(--primary);
    background: var(--bg-dark);
    font-size: 1rem;
    padding: .25rem;
    border-radius: .5rem;
    margin: auto 0;
}

.folder-state[b-8n4ryg746m]{
    height: auto;
    width: 100%;
} 

.all-access[b-8n4ryg746m], .not-all-access[b-8n4ryg746m] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    padding: 1rem;
    box-sizing: border-box;
    margin: 1rem;
    width: calc(100% - 4rem);
    border-radius: 1rem;
    gap: 16px;
}

.folder-state h3[b-8n4ryg746m] {
    display: flex;
    gap: 8px;
    color: var(--input-text);
    text-align: center;
}

.not-all-access[b-8n4ryg746m] {
    flex-direction: column;
    gap: 0px;
}

    .sites[b-8n4ryg746m] {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

.sites .site[b-8n4ryg746m] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    background: var(--card-bg);
    padding: 8px;
    border-radius: 32px;
}
        .sites .site p[b-8n4ryg746m] {
            margin: 0 12px 0 0;
        }
/* _content/PowerPlan/Components/EditShiftComponent.razor.rz.scp.css */
.shift[b-lwmg9oixui] {
    position: relative;
    padding: .3rem;
    border-radius: 12px;
    background: var(--shift-bg);
    min-height: 2.5rem;
    border: .1rem solid var(--card-border);
    min-width: 3.5rem;
    cursor: pointer;
    transition: background ease .1s, outline ease .1s, border .1s ease, box-shadow .1s ease;
    /* --- ADD THESE LINES --- */
    -webkit-user-select: none; /* Prevents selection in Safari */
    -webkit-touch-callout: none; /* Disables the callout menu in iOS */
    user-select: none; /* Standard syntax */
}

    .shift.past:not(.template)[b-lwmg9oixui] {
        box-shadow: none;
        background: var(--shift-bg20);
    }


    .shift.selected[b-lwmg9oixui] {
        outline: .1rem solid var(--primary) !important;
        border-color: var(--primary);
        box-shadow: var(--primary50) 0 0 10px 0 inset;
    }

    .shift:not(.sortable-fallback):hover[b-lwmg9oixui]  { 
        background: var(--shift-bg50);
        border: .1rem solid var(--card-border50);
    }

    .shift.selected:hover[b-lwmg9oixui]  {
        outline: .1rem solid var(--primary) !important;
        border-color: var(--primary);
        box-shadow: var(--primary50) 0 0 10px 0 inset;
    }


    .shift.highlighted[b-lwmg9oixui] {
        background-color: var(--card-bg-top);
        box-shadow: inset var(--position-color) 0 0 2rem -0.5rem;
        outline: 0.2rem solid var(--position-color);
        -webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
        animation: shake-top-b-lwmg9oixui 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
        z-index: 2;
    }
    .shift.highlight[b-lwmg9oixui] {
        background: var(--bg-dark);
        border-color: var(--bg-dark);
    }

    .shift.selected[b-lwmg9oixui]:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: inherit;
        outline: var(--position-color) 0 solid;
        /*animation: ease-out pulsate 1.2s infinite;*/
    }

@-webkit-keyframes shake-top {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

@keyframes shake-top-b-lwmg9oixui {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}

.shift.is-holding[b-lwmg9oixui] {
    outline: 0.2rem solid var(--position-color) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    background-color: var(--card-bg-top80) !important;
    backdrop-filter: blur(6px);
    transform: scale(1.03);
    transition: background ease .1s, outline ease .1s, border .1s ease, box-shadow .1s ease, transform ease-out .1s;
}
 
.shift p[b-lwmg9oixui] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.shift-flex[b-lwmg9oixui] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.shift .info[b-lwmg9oixui] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--font-body);
    margin: 2px 0 4px 8px;
    min-width: 0;
    min-height: 2.7rem;
    width: 100%;
}

    .shift .info p[b-lwmg9oixui] {
        margin: 0;
        color: var(--text-dark);
    }

        .shift .info p.name[b-lwmg9oixui] {
            justify-content: space-between;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100% - 1.3rem);
            font-family: var(--font-body);
            font-weight: 700;
            font-size: 14px;
            color: var(--text-dark-accent);
        }

.shift.locked .info[b-lwmg9oixui] {
    opacity: 0.5;
}

.shift.locked .lock[b-lwmg9oixui] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: var(--text-dark-accent);
    transition: ease .2s color, ease .2s opacity;
}
    .shift.locked:hover .lock[b-lwmg9oixui]{
        opacity: 0.3;
    }

    body[data-theme='dark'] .shift .info p.name[b-lwmg9oixui] {
        color: var(--text-dark);
    }

.own[b-lwmg9oixui] { 
}

.own .info p.name[b-lwmg9oixui] {
    font-weight: 900;
    color: var(--text-dark);
}


.shift .info .timespan[b-lwmg9oixui] {
    font-weight: 400;
    white-space: normal;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-dark);
    opacity: 1;
}

.top-row[b-lwmg9oixui] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

[b-lwmg9oixui] .settings {
    align-self: start;
    position: absolute;
    right: 0.2rem;
    top: 0.4rem;
    z-index: 50;
}

    [b-lwmg9oixui] .settings .menu {
        top: 2rem !important;
        z-index: 50;
    }

    [b-lwmg9oixui] .settings span {
        width: 1.3rem;
        height: 1.3rem;
        padding: .1rem;
        font-size: 1.3rem;
    }

.tag-container[b-lwmg9oixui] {
    width: auto;
    max-width: 100%;
    overflow: visible;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: -0.5rem;
    right: 0.5rem;
    flex-direction: row-reverse;
    z-index: 1;
    pointer-events: none;
}

[b-lwmg9oixui] .settings {
    display: none;
    opacity: 1;
    transition: opacity ease .2s;
}

.shift .top-row p.name[b-lwmg9oixui] {
    max-width: calc(100% - .2rem);
    transition: ease .2s max-width;
}

.problem[b-lwmg9oixui] {
    position: absolute;
    bottom: 0.15rem;
    right: 0.15rem;
    font-size: 20px;
    z-index: 1;
    color: var(--warning);
}

@media (max-width: 1800px) {
    .timespan[b-lwmg9oixui] {
        font-size: 12px;
    }
}

@media (max-width: 1600px) {
    .shift[b-lwmg9oixui] {
        min-height: .5rem;
    }

        .shift.own[b-lwmg9oixui] {
            outline-width: .15rem;
        }

        .shift .info[b-lwmg9oixui] {
            margin: 0 0rem 0 0.5rem;
            min-height: 1.5rem;
        }

        .shift .top-row[b-lwmg9oixui] {
            margin: 0;
        }

        .shift .name[b-lwmg9oixui] {
            max-width: unset;
        }

        .shift .info p.timespan[b-lwmg9oixui] {
            font-size: 11px;
        }

        .shift .top-row p.name[b-lwmg9oixui] {
            font-size: 12px;
        }

    .tag-container[b-lwmg9oixui] {
        top: -12px;
    }

    [b-lwmg9oixui] .settings {
        right: 0rem;
        top: 0rem;
    }
}

@media (max-width: 1300px) {
    .shift[b-lwmg9oixui] {
        padding: .25rem;
        border-radius: .5rem;
    }

        .shift .info p.name[b-lwmg9oixui] {
            font-size: 12px;
        }

        .shift .info p.timespan[b-lwmg9oixui] {
            font-size: 12px;
        }
}


@media (max-width: 1000px) {
    .collapsable:not(.noresize)[b-lwmg9oixui] {
        display: none;
    }

    .shift[b-lwmg9oixui] {
        padding: .35rem .5rem;
        border-radius: .3rem;
    }

        .shift .info[b-lwmg9oixui] {
            margin: 0rem;
            min-height: 1.5rem;
        }

    [b-lwmg9oixui] .settings span {
        width: .8rem;
        height: .8rem;
        font-size: .8rem;
    }

    .own[b-lwmg9oixui] {
        outline-width: 0.1rem;
    }

    .shift.highlight[b-lwmg9oixui] {
        outline-width: 0.1rem;
    }
}
/* _content/PowerPlan/Components/EmployeeComponent.razor.rz.scp.css */
.employee-container[b-yczxn0273k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    min-width: 8rem;
    max-width: 12rem;
    border-radius: 1rem;
    background: var(--card-bg-top);
    margin: .5rem;
}

    .employee-container .header[b-yczxn0273k] {
        background-image: radial-gradient(circle farthest-side at center bottom, var(--c50) 0%, var(--c) 100%);
        background-size: auto;
        background-position: 0% 0%;
        background-repeat: repeat;
        background-color: var(--c);
        width: calc(100% - 0.6rem);
        position: relative;
        height: 3.6rem;
        margin: 0.3rem;
        border-radius: 0.7rem;
    }
        .employee-container .header span[b-yczxn0273k]{
            position: absolute;
            top: 0;
            right: 0;
            margin: .5rem;
            border-radius: .5rem;
            padding: .3rem .5rem;
            background: var(--card-bg);
            color: var(--text-dark);
        }

    .employee-container .body[b-yczxn0273k] {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1.5rem;
        padding-top: 0.5rem;
        padding-bottom: 1rem;
        position: relative;
    }

    .employee-container .body[b-yczxn0273k]  .profilePicture {
        position: absolute;
        top: -2.5rem;
    }

    .employee-container .body label[b-yczxn0273k] {
        color: var(--text-dark);
        margin: .5rem 0;
        text-align: center;
        font-weight: 800;
        font-size: 1rem;
    }
    .employee-container .body p[b-yczxn0273k] {
        color: var(--text-dark);
        margin: 0;
        opacity: .5;
        text-align: center;
        font-size: 12px;
    }
/* _content/PowerPlan/Components/FileTreeItem.razor.rz.scp.css */

.file-tree-item-wrapper[b-fgkqh1wia4] {
    display: flex;
    flex-direction: column;
}

.file-tree-item[b-fgkqh1wia4] {
    display: flex;
    align-items: center;
    padding: .0rem .5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease;
    user-select: none;
    gap: .5rem;
    min-height: 2.2rem;
}

    .file-tree-item.folder[b-fgkqh1wia4] { 
        margin: 4px 0;
    }

    .file-tree-item:hover[b-fgkqh1wia4] {
        background-color: var(--bg-darker50);
    }

    .file-tree-item.selected:not(.folder)[b-fgkqh1wia4] {
        background-color: var(--primary20);
    }

        .file-tree-item.selected .item-name[b-fgkqh1wia4] {
            font-weight: 600;
            color: var(--primary);
        }

    .file-tree-item:has(.drag-handle)[b-fgkqh1wia4] {
        min-height: 1.5rem;
        padding: 0.35rem .5rem 0.35rem 0.2rem;
    }

    .file-tree-item .drag-handle[b-fgkqh1wia4] {
        cursor: grab;
        color: var(--input-text);
        opacity: 0.5;
    }

    .file-tree-item:hover .drag-handle[b-fgkqh1wia4] {
        opacity: 1;
    }
     
    .file-tree-item .icon-file[b-fgkqh1wia4] {
        color: var(--primary);
    }
    .file-tree-item .icon-folder[b-fgkqh1wia4] {
        color: var(--bg-dark2);
    }

    .file-tree-item.contact_page .icon-file[b-fgkqh1wia4] { 
    }

    .file-tree-item .item-name[b-fgkqh1wia4] {
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-dark);
    }

    .file-tree-item[b-fgkqh1wia4]  .kebab-menu {
        opacity: 0;
        transition: opacity .2s ease;
    }

    .file-tree-item:hover[b-fgkqh1wia4]  .kebab-menu {
        opacity: 1;
    }

    .file-tree-item .rename-input[b-fgkqh1wia4] {
        flex-grow: 1;
        padding: .2rem .4rem;
        border-radius: .3rem;
        border: 1px solid var(--primary);
        outline: none;
        background: var(--element-bg);
    }

.sub-items[b-fgkqh1wia4] {
    padding-left: .5rem;
    border-left: 1px solid var(--card-border);
    margin-left: 1rem;
}

[b-fgkqh1wia4] .menu-container span {
    font-size: 1.6rem !important;
    height: 1.6rem !important;
    width: 1.6rem !important;
}

[b-fgkqh1wia4] .empty-folder-drop-zone,
[b-fgkqh1wia4] .empty-state {
    background: var(--bg-dark50);
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    margin-right: 1.5rem;
    border: .1rem solid transparent;
}

    [b-fgkqh1wia4] .empty-folder-drop-zone p,
    [b-fgkqh1wia4] .empty-state p {
        margin: 0;
        color: var(--text-dark50);
    }

[b-fgkqh1wia4] .empty-folder-drop-zone {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: .1rem solid var(--bg-dark2);
    transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
}
 
    [b-fgkqh1wia4] .empty-folder-drop-zone:hover {
        border: .1rem solid var(--primary);
        background-color: var(--bg-dark);
    }

.restrict .file-tree-item[b-fgkqh1wia4] {
    cursor: not-allowed;
    opacity: 0.8;
}
    .restrict .file-tree-item span:not(.item-name)[b-fgkqh1wia4] {
    }
    .restrict .file-tree-item span.item-name[b-fgkqh1wia4]{
    }
/* _content/PowerPlan/Components/Floaters/EditShiftErrorList.razor.rz.scp.css */
.problem-list[b-nfpn8scfmp] {
    position: absolute;
    background: var(--card-bg50);
    box-shadow: var(--shadow-medium);
    padding: .5rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    backdrop-filter: blur(8px);
    animation: ease .2s in-b-nfpn8scfmp forwards 1;
}

@keyframes in-b-nfpn8scfmp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.problem-list p[b-nfpn8scfmp]{
    margin: 0;
    padding: .5rem;
    border-radius: 0.5rem;
    background: var(--card-bg)
}
/* _content/PowerPlan/Components/Floaters/PublishFloater.razor.rz.scp.css */
.publish[b-4gn6t4x0xn]
{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 15rem;
    height: auto;
    padding: 0rem;
    background: var(--card-bg80);
    backdrop-filter: blur(6px);
    border: .1rem solid var(--card-border);
    border-radius: 1rem;
    box-shadow: Var(--shadow-medium);
    gap: .5rem;
    animation: ease .5s in-b-4gn6t4x0xn forwards 1;
}

@keyframes in-b-4gn6t4x0xn {
    from {
        opacity: 0;
        filter: blur(16px);
    }
    to {
        opacity: 1;
        filter: blur(0px);
    }
}

    .publish .header[b-4gn6t4x0xn] {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        margin: .2rem;
        gap: .2rem;
        border-radius: .8rem;
        background: Var(--card-bg-top);
    }
        .publish .header p[b-4gn6t4x0xn] {
            margin: 0;
            font-size: 12px;
        }
        .publish .header h2[b-4gn6t4x0xn] {
            margin: 0;
            font-weight: 900;
            font-size: 18px;
        }

    .publish .col[b-4gn6t4x0xn] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 2rem 2rem 2rem;
    }
    .publish[b-4gn6t4x0xn]  label {
        color: var(--input-text);
    }
    .publish[b-4gn6t4x0xn]  .input-container input:not(.minutes),
    .publish[b-4gn6t4x0xn]  .duration-picker {
        width: calc(100% - 2.2rem);
        margin-bottom: 0;
    }

    .publish[b-4gn6t4x0xn]  .datepicker-container-container{
        right: .4rem;
    }
/* _content/PowerPlan/Components/Floaters/TemplateDropdownFloater.razor.rz.scp.css */

.menu[b-lfiim38uvt] {
    position: absolute;
    right: 0;
    top: 3rem;
    height: fit-content;
    border-radius: 1rem;
    overflow: auto;
    border: .1rem solid var(--card-border);
    width: fit-content;
    max-width: min(16rem, 80vw);
    max-height: 60vh;
    padding: .3rem;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    opacity: 1;
    transform: scale(1);
    z-index: 10;
    transition: transform cubic-bezier(0.35, 0.07, 0.2, 1) .5s, margin cubic-bezier(0.26, 0.18, 0.25, 1) .5s, opacity cubic-bezier(0.43, 0.12, 0.18, 1.01) .3s;
    animation: open-b-lfiim38uvt .1s ease-in forwards 1;
}


    .menu.closed[b-lfiim38uvt] {
        margin-top: 2rem;
        opacity: 0;
        pointer-events: none;
        transform: scale(.9);
    }

@keyframes open-b-lfiim38uvt {
    from {
        transform: translateY(.5rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.actions[b-lfiim38uvt] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .2rem;
}

.menu label[b-lfiim38uvt] {
    font-family: var(--font-header);
    font-weight: 800;
    font-size: .8rem;
    color: var(--bg-dark2);
    margin: 0 0.5rem 0;
    flex: 1;
}

body[data-theme='dark'] .menu label[b-lfiim38uvt] {
    color: var(--text-dark-accent);
}

.menu .actions button[b-lfiim38uvt] {
    box-shadow: none !important;
    outline: none;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    padding: 4px 12px !important;
    font-family: var(--font-header);
    color: var(--input-text) !important;
    background: var(--bg-dark);
    cursor: pointer;
}
/* _content/PowerPlan/Components/Floaters/TimePeriodFloater.razor.rz.scp.css */
.select-timerange[b-qbvdsht92y] {
    position: absolute;   
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    z-index: 50;
    background: var(--card-bg80);
    backdrop-filter: blur(6px);
    border: 2px solid var(--card-border);
    padding: 8px;
    border-radius: 1rem;
    box-shadow: var(--shadow-large);
    width: 15rem;
    gap: 8px;
    animation: ease .2s forwards select-timerange-in-b-qbvdsht92y;
}

@keyframes select-timerange-in-b-qbvdsht92y {
    from {
        opacity: 0;
        filter: blur(16px);
        transform: translate(0%, 10%);
    }

    to {
        opacity: 1;
        filter: blur(0px);
        transform: translate(0%, 0%);
    }
}

.select-timerange h2[b-qbvdsht92y] {
    margin: 8px 8px 0;
    font-size: 1rem;
    font-weight: 900;
    color: var(--input-text);
}

.select-timerange .timerange[b-qbvdsht92y] {
    margin: 0;
    background: var(--card-bg-top);
    border-radius: 8px;
    padding: 4px 8px;
    text-align: center;
}
/* _content/PowerPlan/Components/InvoiceComponent.razor.rz.scp.css */
.invoice[b-ds4czj9q2e] {
    position: relative;
    background: var(--card-bg-top);
    padding: 4rem 4rem 2rem;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-medium);
    border: 2px solid var(--card-border);
    min-width: min(30rem, 100%);
    box-sizing: border-box;
    max-width: 45rem;
    width: 100%;
    margin-bottom: 1rem;
}
    .invoice.list-item[b-ds4czj9q2e] {
        gap: 0.2rem;
        background: var(--card-bg-top);
        padding: 1.5rem;
        border: none;
        border-radius: 1rem;
        box-shadow: none;
        min-width: 20rem;
        max-width: unset;
        margin: 0;
    }

        .invoice.list-item.due[b-ds4czj9q2e] {
            border: 1px solid var(--bg-dark2);
            border-bottom: .25rem solid var(--bg-dark2);
            background-image: radial-gradient(60% 100% at 100% 100%, var(--bg-dark2) -75%, transparent);
        }
        .invoice.list-item.unpaid[b-ds4czj9q2e] {
            background-image: radial-gradient(60% 100% at 100% 100%, var(--warning-mute), transparent);
            border: 1px solid var(--warning-hover);
            border-bottom: .25rem solid var(--warning-hover);
        }


    .invoice .header[b-ds4czj9q2e] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

        .invoice .header img[b-ds4czj9q2e] {
            max-height: 40px;
        }

        .invoice .header .col[b-ds4czj9q2e] {
            text-align: right;
        }

            .invoice .header .col p[b-ds4czj9q2e] {
                margin: 0;
            }

    .invoice .period[b-ds4czj9q2e] {
        font-size: 0.8rem;
        margin: 0.5rem 0 0;
    }

    .invoice hr[b-ds4czj9q2e] {
        border: 0;
        height: 1px;
        background: var(--text-dark);
        opacity: 0.1;
        width: calc(100% - 0rem);
        margin: 0.5rem 0rem;
    }

    .invoice p[b-ds4czj9q2e] {
        margin: 0.5rem 0;
    }

        .not-paid[b-ds4czj9q2e],
        .invoice p.not-paid[b-ds4czj9q2e] {
            color: var(--warning);
            font-weight: bold; 
        }
        .invoice p.not-paid[b-ds4czj9q2e] { 
            text-align: center;
            padding: 10px;
            border-radius: 16px;
            margin: 8px -16px 0;
            background: var(--card-bg-warning);
        }

    .invoice h4[b-ds4czj9q2e] {
        font-family: var(--font-header);
        font-size: 1.2rem;
        margin: 1rem 0 0;
        font-weight: 900;
    }

    .invoice .subtotal-table[b-ds4czj9q2e] {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
    }
        .invoice .subtotal-table tr[b-ds4czj9q2e]{
            display: flex !important;
        }

        .invoice .subtotal-table th[b-ds4czj9q2e] {
            text-align: left;
            font-family: var(--font-body);
            padding-bottom: 0rem;
            font-size: 0.8rem;
            opacity: 0.5;
            flex: 4;
        }

        .invoice .subtotal-table td[b-ds4czj9q2e] {
            padding: 0.5rem 0;
            font-size: 1rem;
            color: var(--text-dark);
            flex: 4;
        }
         
            .invoice .subtotal-table td.count[b-ds4czj9q2e],
            .invoice .subtotal-table th.count[b-ds4czj9q2e] {
                flex: 1;
            }

        .invoice .subtotal-table .o5[b-ds4czj9q2e] {
            opacity: 0.5;
        }

        .invoice .subtotal-table td p[b-ds4czj9q2e] {
            margin: 0;
            font-size: 0.85rem;
            opacity: 0.6;
        }

        .invoice .subtotal-table:not(.totals) tr:last-child[b-ds4czj9q2e] {
            opacity: 0.5;
            font-weight: 400;
        }

.count[b-ds4czj9q2e] {
    text-align: center !important;
}
.total[b-ds4czj9q2e] {
    text-align: right !important;
}


    .o5[b-ds4czj9q2e] {
        opacity: 0.5;
    }

    .w9[b-ds4czj9q2e]{
        font-weight: 900 !important; 
    }

.us-footer[b-ds4czj9q2e] {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 100%;
    opacity: 0.4;
}
        .us-footer p[b-ds4czj9q2e]{
            margin: 0;
            text-align: center;
            font-size: 0.8rem;
        }

        h3[b-ds4czj9q2e] {
            margin-bottom: 15px;
        }

h4[b-ds4czj9q2e] {
    margin-top: 20px;
    margin-bottom: 10px;
}

.list-item h2[b-ds4czj9q2e] {
    margin: 0;
    margin-bottom: .25rem;
    text-transform: capitalize;
    font-size: 1.35rem;
    line-height: 1.35rem;
    font-weight: 900;
}

    .list-item.unpaid h2[b-ds4czj9q2e]{
        color: Var(--warning-text)
    }

    .list-item p[b-ds4czj9q2e] {
        margin: 0;
    }
.list-item p span[b-ds4czj9q2e]{
    font-weight: 900;
}

.list-item[b-ds4czj9q2e]  button {
    position: absolute;
    top: 0;
    right: 0;
    margin: .5rem;
    border-radius: 1rem;
    padding: .3rem .8rem;
}

.invoice .discount[b-ds4czj9q2e] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.invoice .discount p[b-ds4czj9q2e] {
    margin: 0;
}

/* _content/PowerPlan/Components/NewsFeed/NewsEmployee.razor.rz.scp.css */
.body[b-hpjjq88cfe] {
    position: relative;
    --h:5rem;
    width: calc(100% - 16px);
    min-height: var(--h);
    max-height: 8rem;
    display: flex;
    border-radius: 20px;
    padding: 8px;
    background: var(--card-bg);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}
content[b-hpjjq88cfe] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 16px;
    width: calc(100% - var(--h) - 64px);
} 

.placeholder[b-hpjjq88cfe] {
    background: var(--card-bg50);
}

.profile[b-hpjjq88cfe] {
    position: absolute;
    top: 0;
    right: 0;
    height: calc(100% - 16px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin: 8px;
    box-sizing: border-box;
    border: .5rem solid var(--card-bg50);
}

    .profile[b-hpjjq88cfe]  .profilePicture {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(0%, 0%) scale(1.3);
        transition: linear all 0.5s;
    } 

    content h1[b-hpjjq88cfe] {
        font-size: .9rem;
        font-weight: 800;
        color: var(--primary);
        display: flex;
        margin: 0;
        margin-top: 1rem;
        flex-direction: column;
    }

        content h1 span[b-hpjjq88cfe] {
            color: var(--text-dark);
            font-weight: 900;
            font-size: 1.2rem;
        }

content p[b-hpjjq88cfe] {
    margin: 0;
    text-align: left;
    margin-bottom: 16px;
}
    content p[b-hpjjq88cfe]  .position-tag {
        display: inline;
    } 

    content p label[b-hpjjq88cfe], content p a[b-hpjjq88cfe] {
        background: var(--bg-dark);
        padding: 4px 8px;
        font-family: var(--font-body);
        border-radius: 8px;
        font-weight: 800;
        color: var(--text-dark);
    }

        content p a:hover[b-hpjjq88cfe] {
            padding-right: 25px !important;
        }

p.subtitle[b-hpjjq88cfe] {
    margin-top: .2rem;
    margin-bottom: 0;
    font-size: 12px;
    font-family: var(--font-header);
    font-weight: 800;
    opacity: .8;
}
/* _content/PowerPlan/Components/NoResultsComponent.razor.rz.scp.css */

.noresult-container[b-gj17hxp6jh] {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 7rem;
    border: .1rem solid var(--card-border);
    background: var(--card-bg);
    border-radius: .5rem;
}

    .noresult-container .text[b-gj17hxp6jh] {
        margin: .8rem 0;
        margin-left: 1rem;
    }

        .noresult-container .text h1[b-gj17hxp6jh] {
            margin: 0;
        }

        .noresult-container .text h5[b-gj17hxp6jh] {
            margin: 0;
            margin-top: .5rem;
            color: var(--text-dark-accent);
            font-weight: 700;
        }

    .noresult-container img[b-gj17hxp6jh] {
        height: calc(100% - 1rem);
        margin: 0 1rem;
        margin-top: 1rem;
    }
/* _content/PowerPlan/Components/PictureUploadComponent.razor.rz.scp.css */

.profilePicture[b-iisgpcqbl8] {
    --size: 250px;
    position: relative;
    height: var(--size);
    width: var(--size);
    position: relative;
    overflow: hidden;
    border-radius: 1.6rem;
    transition: transform ease .2s, box-shadow ease .2s;
    z-index: 1;
}

.tags[b-iisgpcqbl8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

.profilePicture .update-pic[b-iisgpcqbl8] {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    bottom: -3rem;
    opacity: 0;
    transition: bottom .2s cubic-bezier(0.49, 0.77, 0.69, 1.07), opacity .2s cubic-bezier(0.49, 0.77, 0.69, 1.07);
}

.picture .profilePicture h1[b-iisgpcqbl8] {
    position: absolute;
    top: -2.5rem;
    text-align: center;
    font-size: 1rem !important;
    font-family: var(--font-body) !important;
    z-index: 2;
    color: var(--text-light) !important;
    opacity: 0;
    text-shadow: 0px 4px 10px rgba(60,60,60,0.24), 0px 0px 1px rgba(60,60,60,1);
    transition: top .2s cubic-bezier(0.49, 0.77, 0.69, 1.07), opacity .2s cubic-bezier(0.49, 0.77, 0.69, 1.07) !important;
}

.picture:not(.view-only) .profilePicture:hover[b-iisgpcqbl8],
.picture:not(.view-only) .profilePicture.active[b-iisgpcqbl8] {
    box-shadow: var(--shadow-float);
}

.picture:not(.view-only) .profilePicture:hover h1[b-iisgpcqbl8],
.picture:not(.view-only) .profilePicture.active h1[b-iisgpcqbl8] {
    top: 0.5rem;
    opacity: 1;
}

.picture:not(.view-only) .profilePicture:hover .update-pic[b-iisgpcqbl8],
.picture:not(.view-only) .profilePicture.active .update-pic[b-iisgpcqbl8] {
    bottom: 1rem;
    opacity: 1;
}

.update-pic[b-iisgpcqbl8]  button {
    margin-left: 1rem;
}

    .update-pic[b-iisgpcqbl8]  button.delete {
        transition: all .2s cubic-bezier(0.49, 0.77, 0.69, 1.07) !important;
    }

        .update-pic[b-iisgpcqbl8]  button.delete:hover {
            background: var(--warning);
            border-color: var(--warning);
            color: var(--default);
        }


.file-input-zone[b-iisgpcqbl8] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    align-items: center;
    padding: .5rem 1.5rem;
    border: none;
    font-family: var(--font-header);
    font-weight: 800;
    font-size: 1rem !important;
    background: var(--default);
    color: var(--text-dark);
    border-radius: .5rem;
    border: .1rem solid var(--card-border);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, 0px 1.5px 1.3px -1.4px hsl(var(--shadow-color) / 0.44);
    transition: background .2s ease, box-shadow .2s ease;
    cursor: pointer;
    width: auto;
    height: 1.5rem;
    font-size: 1rem;
}

    .file-input-zone:hover[b-iisgpcqbl8] {
        background: var(--bg-dark);
        border-color: var(--bg-dark);
        color: var(--primary);
    }

.picture:not(.view-only) .file-input-zone[b-iisgpcqbl8]  input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.profilePicture img[b-iisgpcqbl8] {
    height: calc(var(--size) * 0.75);
    width: calc(var(--size) * 0.75);
    z-index: 1;
}


.profilePicture.pic img[b-iisgpcqbl8] {
    object-fit: cover;
    height: calc(var(--size) * 0.9);
    width: calc(var(--size) * 0.9);
    border-radius: 1rem;
    z-index: 1;
    transition: height .2s cubic-bezier(0.49, 0.77, 0.69, 1.07), width .2s cubic-bezier(0.49, 0.77, 0.69, 1.07), border-radius .2s cubic-bezier(0.49, 0.77, 0.69, 1.07);
}
.profilePicture img:not(.profile-pic-svg):not(.selected)[b-iisgpcqbl8] {
    filter: invert(var(--invert-flip));
} 

.picture:not(.view-only) .profilePicture.pic:hover img[b-iisgpcqbl8],
.picture:not(.view-only) .profilePicture.pic.active img[b-iisgpcqbl8] {
    height: calc(var(--size) * 0.95);
    width: calc(var(--size) * 0.95);
    border-radius: 1.25rem;
}

.profilePicture img.default[b-iisgpcqbl8] {
    height: calc(var(--size) * 0.65);
    width: calc(var(--size) * 0.65);
    opacity: .5;
    z-index: 1;
    filter: var(--primary-filter);
}

.picture:not(.view-only) .profilePicture.pic:hover img.default[b-iisgpcqbl8] {
    height: calc(var(--size) * 0.7);
    width: calc(var(--size) * 0.7);
}

.profilePicture:has(.default) h1[b-iisgpcqbl8] {
    color: var(--text-dark) !important;
}

.no-image[b-iisgpcqbl8] {
    position: absolute;
    background: var(--card-bg80);
    backdrop-filter: blur(8px);
    border: 2px solid var(--card-border);
    padding: 11px 16px;
    border-radius: 16px;
    z-index: 2;
    color: var(--text-dark);
}

.profilePicture[b-iisgpcqbl8]:before {
    content: " ";
    position: absolute;
    height: inherit;
    width: inherit;
    background: inherit;
    border-radius: .3rem;
    filter: blur(.4rem);
    transition: filter ease .2s;
}

.picture:not(.view-only) .profilePicture:hover[b-iisgpcqbl8]:before {
    filter: blur(.3rem);
}
/* _content/PowerPlan/Components/PlannerWalkthrough/PlannerWalkthrough.razor.rz.scp.css */
.walkthrough-container[b-gvo416l1kf] {
    --margin: 24px;
    position: fixed;
    bottom: var(--margin);
    right: var(--margin);
    height: auto;
    max-height: calc(100vh - var(--margin) - var(--margin));
    width: min(25rem, 25vw);
    animation: animate-in-b-gvo416l1kf forwards 1 ease .5s;
    z-index: 5;
    will-change: transform;
}

    .walkthrough-container[b-gvo416l1kf]::before {
        content: " ";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 0;
        background: var(--primary);
        border-radius: 2rem;
        transform: rotate(-20deg) translate(3rem, 3rem);
        filter: blur(128px);
        transition: ease 0.5s height, ease 2s width;
    }

#walkthrough-drag-handle[b-gvo416l1kf] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background-color: var(--bg-dark);
    touch-action: none; 
}
#walkthrough-drag-handle:active[b-gvo416l1kf] {
    cursor: grabbing; 
}
        .walkthrough-container.next[b-gvo416l1kf]::before{
            height: 8rem;
        }

        @keyframes animate-in-b-gvo416l1kf {
            from {
        filter: blur(16px);
        opacity: 0;
        transform: translateY(5rem);
    }

    to {
        filter: blur(0px);
        opacity: 1;
        transform: translateY(0rem);
    }
}
.walkthrough[b-gvo416l1kf] {
    position: relative;
    height: auto;
    width: auto;
    padding: 0;
    border-radius: 1rem;
    border: .1rem solid var(--card-border);
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-large);
    display: flex;
    flex-direction: column;
    transition: ease .2s all;
    z-index: 5;
}
.left[b-gvo416l1kf], .right[b-gvo416l1kf] {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: .5rem;
}

.left[b-gvo416l1kf] {
    flex: 1;
    justify-content: space-between;
    max-width: 100%;
    order: 1;
}

.indicator[b-gvo416l1kf] {
    margin: calc(var(--margin) / 1.5);
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .5rem;
}

    .indicator .progress[b-gvo416l1kf] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        flex: 1;
        gap: .25rem;
        margin-top: 0px;
        margin-bottom: 4px;
    }

        .indicator .progress .bar[b-gvo416l1kf] {
            height: 8px;
            flex: 1;
            border-radius: 4px;
            background: var(--bg-dark2);
            transition: ease .2s
        }

            .indicator .progress .bar.active[b-gvo416l1kf] {
                transform: translateY(-3px);
                background: var(--primary);
                box-shadow: var(--primary50) 0px 3px 8px, var(--primary50) 0px 1px 3px, var(--primary50) 0px 0px 1px;
            }

            .indicator .progress .bar.done[b-gvo416l1kf] {
                background: var(--primary);
            }

    .indicator h3[b-gvo416l1kf] {
        margin: 0;
        font-weight: 400;
        opacity: 1;
        font-size: 12px;
    }

        .indicator h3 span[b-gvo416l1kf] {
            opacity: 1;
            font-weight: 800;
        }

.body[b-gvo416l1kf] {
    flex: 1;
    margin: 0 0.5rem;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.5rem 0.5rem;
    background: var(--card-bg-top);
    border-radius: .5rem;
    transition: ease .2s margin, ease .2s min-width, ease .2s flex;
}

    .body:has(.right-layout)[b-gvo416l1kf] {
        margin-left: calc(0rem + var(--margin)) !important;
        margin-right: calc(var(--margin) + 4rem) !important;
    }

.footer[b-gvo416l1kf] {
    margin: 0.5rem;
    margin-top: 0;
    margin-left: 1.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

    .footer h3[b-gvo416l1kf] {
        margin: 0;
        font-weight: 400;
        opacity: 1;
        font-size: 14px;
        flex: 1;
    }

        .footer h3 span[b-gvo416l1kf] {
            opacity: 1;
            font-weight: 800;
        }

    .footer[b-gvo416l1kf]  .prev {
        margin-right: 16px;
    }

    .footer[b-gvo416l1kf]  .next {
        font-size: 1rem;
        padding: .7rem 1rem;
    }

path:has(fill:rgb(175,211,255))[b-gvo416l1kf] {
    background: black;
}

[b-gvo416l1kf] h1 {
    font-size: 1.5rem;
    font-weight: 900;
    font-family: var(--font-header);
    color: var(--text-dark);
    margin: 0.75rem;
    margin-bottom: 0;
}


[b-gvo416l1kf] h3 {
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--font-body);
    color: var(--text-dark);
    margin-left: 20px;
}

[b-gvo416l1kf] p {
    margin: .5rem 0.75rem;
}
[b-gvo416l1kf] p.note {
    margin: .25rem 0.75rem;
    padding: .5rem .8rem;
    border-radius: .5rem;
    background: var(--bg-dark);
    width: fit-content;
    color: var(--input-text);
    font-family: var(--font-header);
    font-weight: 800;
}
[b-gvo416l1kf] i {
    color: var(--label-text);
}

[b-gvo416l1kf] p span{
    font-size: 16px;
    font-weight: 900;
    transform: translateY(2px);
}

[b-gvo416l1kf] b {
    font-weight: 700;
    color: inherit;
}

    [b-gvo416l1kf] b b {
        font-weight: 900;
    }

[b-gvo416l1kf] .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

[b-gvo416l1kf] .col {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-wrap: wrap;
    min-width: 200px;
    margin: 0 20px;
}

[b-gvo416l1kf] label {
    font-family: var(--font-header);
    font-weight: 700;
    color: var(--label-text);
    font-size: .8rem;
}

[b-gvo416l1kf] p.invalid {
    font-weight: 500;
    margin: 0;
    color: var(--warning);
    background: var(--warning-mute);
    width: fit-content;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    border: none;
}

[b-gvo416l1kf] .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--bg-dark);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.6rem;
}

    [b-gvo416l1kf] .info span {
        color: var(--input-text);
        font-size: 1.5rem;
        margin-right: 0.75rem;
    }


    [b-gvo416l1kf] .info p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-dark80);
    }

[b-gvo416l1kf] .hint {
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
    border-radius: 0.5rem;
    padding: 1rem;
    gap: .2rem;
    margin-bottom: 0rem;
}

[b-gvo416l1kf] .hint .row{
    align-items: center;
    gap: .25rem;
}
    [b-gvo416l1kf] .hint p {
        margin: 0;
    }
    [b-gvo416l1kf] .hint .row span {
        color: var(--input-text);
        font-weight: 800;
        font-size: 14px;
    }
    [b-gvo416l1kf] .hint .row p {
        color: var(--input-text);
        font-family: var(--font-header);
        font-weight: 800;
        opacity: 1;
    }
    [b-gvo416l1kf] .hint p {
        color: var(--text-dark);
        opacity: .8;
        font-size: 12px;
    }
[b-gvo416l1kf] .float-right { 
    display: inline-block;
    margin-left: 10px; /* Optional: to add space between text and tag */
}

[b-gvo416l1kf] .rows {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .5rem;
}
    [b-gvo416l1kf] .rows .row {
        gap: inherit;
    }

    [b-gvo416l1kf] .rows .row .row {
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        background: var(--bg);
        border-radius: .5rem;
        padding: .25rem;
        gap: .5rem;
    }

        [b-gvo416l1kf] .rows .row .row p{
            margin: 0;
            opacity: .8;
        }
/* _content/PowerPlan/Components/PlannerWalkthrough/Steps/PWSFirstShift.razor.rz.scp.css */
/* _content/PowerPlan/Components/PlannerWalkthrough/Steps/PWSMoreShifts.razor.rz.scp.css */
.list[b-qwrnwt5y1e]{
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

    .list .step[b-qwrnwt5y1e] {
        color: var(--text-dark);
        opacity: .5;
        padding: 0.4rem 0.75rem;
        background: var(--bg);
        border-radius: .5rem;
        transition: ease .2s opacity;
    }
        .list .step p[b-qwrnwt5y1e] {
            margin: 0;
            color: inherit;
        }
        .list .step.ready[b-qwrnwt5y1e] {
            opacity: 1;
        }
        .list .step.done[b-qwrnwt5y1e] {
        }
        .list .step.done[b-qwrnwt5y1e] {
            color: var(--primary);
        }
/* _content/PowerPlan/Components/PlannerWalkthrough/Steps/PWSPickPositions.razor.rz.scp.css */
.position-container[b-nkfbbaz4ur] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0.25rem 0.75rem 0rem;
}
/* _content/PowerPlan/Components/PlannerWalkthrough/Steps/PWSPublishDay.razor.rz.scp.css */
.rows .row .row[b-pwcwwrkx5j] {
    display: flex; 
    flex-direction: column;
    align-items: center;
    padding: .5rem .2rem;
}

    .rows .row .row p[b-pwcwwrkx5j] {
        text-align: center;
    }

    .rows .row .row span[b-pwcwwrkx5j] {
        font-size: 1.3rem;
        padding: .5rem;
        border-radius: .5rem;
    }
    .rows .row .row:nth-child(1) span[b-pwcwwrkx5j] {
        color: var(--primary);
        background: var(--card-bg-top);
    }
    .rows .row .row:nth-child(2) span[b-pwcwwrkx5j] {
        color: var(--primary);
        background: var(--card-bg-top);
        opacity: .6;
    }
    .rows .row .row:nth-child(3) span[b-pwcwwrkx5j] {
        opacity: .6;
    }
/* _content/PowerPlan/Components/PlanningSidePanel.razor.rz.scp.css */
.flow-container[b-lcl6vc3rp9] {
    position: sticky;
    top: 0;
    width: fit-content;
    height: calc(100%);
    min-height: 35rem;
    display: flex;
    margin-bottom: 1rem;
    transition: top ease .2s;
}

.sidebar-container[b-lcl6vc3rp9] {
    --w: 20rem;
    width: var(--w);
    height: 100%;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.2s ease-out;
}

    .sidebar-container.infopane[b-lcl6vc3rp9] {
        --w: 16rem;
    }

    .sidebar-container.show[b-lcl6vc3rp9] {
        /*animation: sidebar-in ease-out .2s forwards 1;*/
        max-width: var(--w);
    }

    .sidebar-container.hide[b-lcl6vc3rp9] {
        pointer-events: none;
        max-width: 0;
        /*animation: sidebar-out ease-out .2s forwards 1;*/
    }

@keyframes sidebar-in-b-lcl6vc3rp9 {
    from {
        max-width: 0;
    }

    to {
        max-width: var(--w);
    }
}

@keyframes sidebar-out-b-lcl6vc3rp9 {
    from {
        max-width: var(--w);
    }

    to {
        max-width: 0;
    }
}

.sidebar[b-lcl6vc3rp9] {
    height: 100%;
    width: var(--w);
    box-sizing: border-box;
    padding: 1rem .7rem;
    background: var(--card-bg);
    border-radius: 1rem;
    gap: 0.75rem;
    display: flex;
    flex-direction: column;
}


.sidebar-container.infopane .sidebar[b-lcl6vc3rp9] {
    --spacing: 0.75rem;
    --br: calc(1rem);
    gap: 0.5rem;
    padding: var(--spacing);
    background: var(--bg-dark);
    border-radius: 1.5rem;
}

    .sidebar-container.infopane .sidebar .row[b-lcl6vc3rp9] {
        display: flex;
        flex-direction: row;
        gap: inherit;
        padding: 0;
    }
    .sidebar-container.infopane .sidebar .row .col[b-lcl6vc3rp9]{
        display: flex;
        flex-direction: column;
        gap: inherit;
    }

    .sidebar-container.infopane .sidebar .box[b-lcl6vc3rp9] {
        background: var(--bg-dark2-50);
        border-radius: var(--br);
        padding: 0.5rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: fit-content;
        box-sizing: border-box;
    }

        .sidebar-container.infopane .sidebar .box .row[b-lcl6vc3rp9] {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: .2rem .5rem;
        }


            .sidebar-container.infopane .sidebar .box .row p[b-lcl6vc3rp9] {
                margin: 0;
                font-size: 12px;
            }

                .sidebar-container.infopane .sidebar .box .row p.planned[b-lcl6vc3rp9] {
                    color: var(--primary);
                }

        .sidebar-container.infopane .sidebar .box .percent[b-lcl6vc3rp9] {
            width: 100%;
            box-sizing: border-box;
            padding: .2rem;
            display: flex;
            flex-direction: row;
            background: var(--bg-dark);
            box-shadow: inset var(--bg-dark3) 0 0 1rem -0.5rem;
            border-radius: .5rem;
            overflow: hidden;
        }


            .sidebar-container.infopane .sidebar .box .percent div.planned[b-lcl6vc3rp9],
            .sidebar-container.infopane .sidebar .box .percent div.unplanned[b-lcl6vc3rp9] {
                width: var(--w);
                height: 2rem;
                border-radius: 0.4rem;
                transition: ease .2s width, ease .2s background;
            }

            .sidebar-container.infopane .sidebar .box .percent div.planned[b-lcl6vc3rp9] {
                background: var(--bg-dark3);
                box-shadow: inset var(--card-bg) 0 0 1.5rem -0.4rem;
            }

            .sidebar-container.infopane .sidebar .box .percent div.unplanned[b-lcl6vc3rp9] {
                background: transparent;
            }

        .sidebar-container.infopane .sidebar .box.unplanned-count[b-lcl6vc3rp9] {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            width: fit-content;
            height: auto;
            padding: 0.5rem 1rem;
            background: var(--card-bg-warning);
            box-shadow: inset var(--warning) 0 0 4rem -2.5rem;
        }

            .sidebar-container.infopane .sidebar .box.unplanned-count h3[b-lcl6vc3rp9] {
                margin: 0;
                font-size: 2.5rem;
                font-weight: 900;
                color: var(--warning);
            }

            .sidebar-container.infopane .sidebar .box.unplanned-count label[b-lcl6vc3rp9] {
                margin: 0;
                font-size: 12px;
                color: var(--text-dark);
                font-family: var(--font-body);
                font-weight: 400;
            }

        .sidebar-container.infopane .sidebar .box.unplanned-distribution[b-lcl6vc3rp9],
        .sidebar-container.infopane .sidebar .box.position-distribution[b-lcl6vc3rp9] {
            position: relative;
            aspect-ratio: 1/1;
            overflow: visible;
            height: -webkit-fill-available;
            width: 130%;
            max-width: 60%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-dark350);
        }
            .sidebar-container.infopane .sidebar .box.position-distribution[b-lcl6vc3rp9]{
                max-width: 50%;
            }

            .sidebar-container.infopane .sidebar .col .box[b-lcl6vc3rp9] {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                width: fit-content;
                height: unset;
                flex: 1;
                padding: 0.5rem 1rem;
            }
        .sidebar-container.infopane .sidebar .col .box h3[b-lcl6vc3rp9] {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-dark);
        }
        .sidebar-container.infopane .sidebar .col .box label[b-lcl6vc3rp9] {
            margin: 0;
        }


p.label[b-lcl6vc3rp9] {
    margin: 0;
    font-size: 11px;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    margin: 0.75rem;
    font-weight: 900;
    color: var(--input-text);
    font-family: var(--font-header);
}

.sidebar-container.infopane .sidebar .box.unplanned-distribution p.label[b-lcl6vc3rp9] {
    bottom: 0;
    left: 0;
}

.sidebar-container .sidebar[b-lcl6vc3rp9]  .apexcharts-series path {
    stroke: var(--bg-dark2);
    stroke-width: 5px;
}


.sidebar-container.infopane .sidebar .box.employee-distribution[b-lcl6vc3rp9] {
    position: relative;
    height: 200px;
}

.sidebar-container.infopane .sidebar .box.employee-distribution p.label[b-lcl6vc3rp9] {
    bottom: unset;
    top: -0.25rem;
    left: unset;
    right: 0;
}

.y-axis[b-lcl6vc3rp9] {
    position: absolute;
    left: 0;
    top: 1.9rem;
    bottom: 0;
    width: 0px;
    margin-bottom: 0px;
    height: calc(100% - 4.2rem);
}

.y-axis-label[b-lcl6vc3rp9] {
    position: absolute;
    left: 0;
    transform: translateY(50%);
    width: 30px;
    text-align: right;
    margin-right: 5px;
    font-size: 12px;
    color: var(--input-text);
    font-family: var(--font-body);
    font-weight: 400;
}

.chart-content[b-lcl6vc3rp9] {
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-x: auto;
}

.bars[b-lcl6vc3rp9] {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.bar-container[b-lcl6vc3rp9] {
    position: relative;
    width: 20px;
    margin: 0 5px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 1.5rem);
    align-items: center;
    justify-content: end;
}

.bar[b-lcl6vc3rp9] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.bar-value[b-lcl6vc3rp9] {
    position: relative;
    width: 100%;
    background: var(--primary-gradient-color);
    border-radius: 5px;
    font-size: 12px;
    box-shadow: inset var(--card-bg) 0 0px 1.5rem -0.5rem;
}

    .bar-value p[b-lcl6vc3rp9] {
        position: absolute;
        transform: translate(-50%, 0);
        bottom: 100%;
        left: 50%;
        margin: 0;
        margin-bottom: 0px;
        text-align: center;
        color: var(--text-dark);
        font-size: 10px;
        font-weight: 400;
        font-family: var(--font-body);
        opacity: 0;
        filter: blur(8px);
    }

.bar-container:hover p[b-lcl6vc3rp9] {
    margin-bottom: 2px;
    opacity: .5;
    filter: blur(0);
}

.x-label[b-lcl6vc3rp9] {
    margin-top: 2px;
}

    .x-label[b-lcl6vc3rp9]  .profilePicture {
        transform: scale(0.8);
    }

        .x-label[b-lcl6vc3rp9]  .profilePicture:hover,
        .bar-container:hover[b-lcl6vc3rp9]  .profilePicture {
            transform: scale(0.9);
        }



.sidebar .flex h3[b-lcl6vc3rp9] {
    margin-top: 1rem;
    margin: 1rem 1rem .5rem;
    font-family: var(--font-header);
    font-weight: 900;
    color: var(--input-text);
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar .flex span.close[b-lcl6vc3rp9] {
    cursor: pointer;
    color: var(--text-dark);
    transition: ease .2s opacity;
    margin: 0;
    padding: 0;
}

    .sidebar .flex span.close:hover[b-lcl6vc3rp9] {
        opacity: .5;
    }

.sidebar .body[b-lcl6vc3rp9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

label[b-lcl6vc3rp9] {
    font-family: var(--font-header);
    font-weight: 800;
    margin-left: .5rem;
    color: var(--input-text);
    font-size: .8rem;
}

.advanced-edit[b-lcl6vc3rp9] {
    z-index: 5;
}

.sidebar .row[b-lcl6vc3rp9] {
    position: relative;
    display: flex;
    padding: .2rem .5rem;
    margin: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
}

[b-lcl6vc3rp9] .action {
    margin: 0 !important;
    top: .35rem;
    right: .35rem;
    padding: .25rem;
    opacity: 1;
    pointer-events: unset;
    transform: translateX(0rem);
    transition: ease .2s all;
}

.row form[b-lcl6vc3rp9] {
    flex: 1; 
}

form .row[b-lcl6vc3rp9] {
    align-items: center;
}

.sidebar-container .sidebar[b-lcl6vc3rp9]  .start-time .input-display,
.sidebar-container .sidebar[b-lcl6vc3rp9]  .end-time .input-display {
    width: 100%;
    padding-right: 0rem;
}

.sidebar-container .sidebar[b-lcl6vc3rp9]  .duration .input-display {
    width: calc(100% - 1.5rem);
    padding-right: 0rem;
    margin: 0;
    padding-top: .64rem;
    padding-bottom: .64rem;
    border-radius: 0.6rem;
}

.sidebar-container .sidebar[b-lcl6vc3rp9]  .start-time:not(.no-action),
.sidebar-container .sidebar[b-lcl6vc3rp9]  .end-time:not(.no-action) {
    width: calc(100% - 1.8rem);
    padding-right: 1.8rem;
}

.sidebar-container .sidebar[b-lcl6vc3rp9]  .duration:not(.no-action) .input-display {
    width: calc(100% - 3.5rem);
    padding-right: 2rem;
}

.sidebar-container .sidebar[b-lcl6vc3rp9]  .action {
    margin: 0 !important;
    top: .35rem;
    right: -0.75rem;
    padding: .25rem;
    opacity: 1;
    pointer-events: unset;
    transform: translateX(0rem);
    transition: ease .2s all;
}

.sidebar-container .sidebar[b-lcl6vc3rp9]  .input-container:has(.no-action) .action {
    opacity: 0;
    pointer-events: none;
    transform: translateX(1rem);
}

.sidebar-container .sidebar[b-lcl6vc3rp9]  .input-container:has(.duration) .action {
    right: 0.8rem !important;
}

[b-lcl6vc3rp9] .mode-switch.container {
    margin: 0.5rem auto;
}

[b-lcl6vc3rp9] .mode-switch .tabs {
    background: var(--card-bg-top);
}

[b-lcl6vc3rp9] .mode-switch .glider,
[b-lcl6vc3rp9] .mode-switch .tab { 
    font-size: .8rem;
}

form .row[b-lcl6vc3rp9]  .input-component {
    flex: 1;
}

[b-lcl6vc3rp9] .toggle-container {
    margin: 0 !important;
}

.sidebar-container .sidebar[b-lcl6vc3rp9]  .duration.disabled .input-display{
    background: Var(--card-bg-top);
}

.update-time[b-lcl6vc3rp9] {
    background: var(--bg-dark);
    border-radius: .5rem;
    padding: .5rem;
    margin-top: .5rem;
    padding-bottom: 1rem;
}

    .update-time[b-lcl6vc3rp9]  .mode-switch.container {
        box-shadow: none;
    }

    .update-time[b-lcl6vc3rp9]  .input-component {
        width: calc(100% - 2rem);
        margin-left: 0.5rem;
    }

    .update-time h3[b-lcl6vc3rp9] {
        margin: 0.5rem 1rem 0rem !important;
    }


body[data-theme='dark'] .sidebar-container.infopane .sidebar[b-lcl6vc3rp9] {
    background: var(--card-bg)
}

    body[data-theme='dark'] .sidebar-container.infopane .sidebar .box .percent[b-lcl6vc3rp9] {
        background: var(--card-bg-top);
    }

        body[data-theme='dark'] .sidebar-container.infopane .sidebar .box .percent div.planned[b-lcl6vc3rp9] {
            background: var(--primary50);
            box-shadow: inset var(--card-bg) 0 -2px 1.2rem 0rem;
        }

body[data-theme='dark'] .bar-value[b-lcl6vc3rp9] {
    box-shadow: inset var(--card-bg) 0 -2px 1rem -0.1rem;
}
/* _content/PowerPlan/Components/RevenueFooter.razor.rz.scp.css */
.date-container.revenue-footer[b-nktloaw16f] {
    --lc: 0.5rem;
    position: sticky;
    bottom: 0.5rem;
    margin-left: calc(var(--lc)*-1);
    width: calc(100% - 2.5rem + var(--lc));
    z-index: 1;
    border-radius: 16px;
    background: var(--card-bg-top80);
    backdrop-filter: blur(6px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: all 0.3s var(--ease);
    margin-top: auto; 
    cursor: pointer; 
}

.revenue-footer.is-floating[b-nktloaw16f] {
    box-shadow: var(--shadow-large);
}

    .date-container.revenue-footer.expanded[b-nktloaw16f] {
        padding-bottom: 1.5rem;
    }

    .date-container.revenue-footer:hover[b-nktloaw16f] {
        background: var(--card-bg-top);
    }

    /* The Handle */
    .footer-handle[b-nktloaw16f] {
        position: absolute;
        top: -0.5rem;
        left: 50%;
        transform: translate(-50%, 0%);
        background: var(--card-bg-top);
        border-radius: 1rem;
        border: 1px solid var(--card-border);
        padding: 0.2rem 0.75rem 0.2rem 0.5rem;
        height: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-dark-mute);
        font-size: 0.7rem;
        font-weight: 700;
        gap: 4px;
        box-shadow: none;
        opacity: 0;
        z-index: 1;
        transition: ease .2s opacity, ease .2s transform, ease .2s box-shadow;
    }

.date-container.revenue-footer:hover .footer-handle[b-nktloaw16f] {
    opacity: 1;
    transform: translate(-50%, 50%);
    box-shadow: var(--shadow-small);
}

.footer-handle span.material-icons[b-nktloaw16f] {
    font-size: 1rem;
}

    .date-container.revenue-footer .footer-col.date[b-nktloaw16f] {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0 0.5rem; 
        min-width: 100px;
    }

.metrics-container[b-nktloaw16f] {
    width: 100%;
}

.primary-metric[b-nktloaw16f] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
    .primary-metric[b-nktloaw16f]  .tooltip-container:has(.alert) {
        position: absolute;
        top: 0;
        right: 0;
    }
    .primary-metric[b-nktloaw16f]  .tooltip-container .alert {
        color: var(--warning);
        font-size: 1.2rem;
    }

    .percent[b-nktloaw16f] {
        font-weight: 900;
        font-size: 1rem;
        font-family: var(--font-header);
    }

    .percent:not(.text-good):not(.text-bad)[b-nktloaw16f] {
        color: var(--text-dark-accent);
    }

    .mini-target[b-nktloaw16f] {
        font-size: 0.7rem;
        color: var(--text-dark-mute);
        display: flex;
        gap: 4px;
    }

/* Expanded Details */
.expanded-details[b-nktloaw16f] {
    margin-top: 0.8rem;
    border-top: 1px dashed var(--card-border);
    padding-top: 0.5rem;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fade-in-b-nktloaw16f 0.3s ease forwards;
    max-height: 0;
}

.detail-row[b-nktloaw16f] {
    display: flex;
    justify-content: space-between;
    color: var(--text-dark);
}

    .detail-row label[b-nktloaw16f] {
        color: var(--text-dark-accent);
    }

    .detail-row.salary > span[b-nktloaw16f] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }
        .detail-row.salary > span[b-nktloaw16f]  span {
            font-size: 0.85rem;
            color: var(--warning);
        }

.edit-group[b-nktloaw16f] {
    display: flex;
    flex-direction: column;
    margin-top: 0.4rem;
}

    .edit-group label[b-nktloaw16f] {
        font-size: 0.65rem;
        color: var(--text-dark-accent);
        margin-bottom: 2px;
    }

.theme-input[b-nktloaw16f] {
    background: var(--card-bg-top);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-dark);
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

    .theme-input:focus[b-nktloaw16f] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary10);
    }

.footer-input.theme-input[b-nktloaw16f] {
    padding: 2px 4px;
    font-size: 0.8rem;
    text-align: right;
    background: var(--bg);
}

@keyframes fade-in-b-nktloaw16f {
    from {
        opacity: 0; 
        max-height: 0;
    }

    to {
        opacity: 1; 
        max-height: calc(16px + 2.5rem);
    }
}
/* _content/PowerPlan/Components/RosterComponent.razor.rz.scp.css */
.roster-component[b-blmzpyihyg] {
    margin: 2rem;
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: unset !important;
}

    .roster-component.nodate[b-blmzpyihyg] {
        padding-top: 6.9rem;
    }

.date-list[b-blmzpyihyg] {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: row;
    margin-left: 0rem;
    width: calc(100% - 2rem);
    padding: 0.1rem 1rem;
    border-radius: 1rem;
    z-index: 3;
    background: var(--card-bg50);
    backdrop-filter: blur(8px);
    border: 1px solid var(--card-bg);
    box-shadow: inset var(--card-bg) 0 0 1rem 0;
}

    .date-list .date-container[b-blmzpyihyg] {
        display: flex;
        flex-direction: column;
        flex: 1;
        border-radius: 1rem;
        cursor: pointer;
    }

        .date-list .date-container:hover[b-blmzpyihyg] {
            background: var(--card-bg-top);
            outline: 1px solid var(--primary20);
        }

            .date-list .date-container[b-blmzpyihyg]  .menu-container {
                position: absolute;
                top: 0.2rem;
                right: 0.2rem;
                opacity: 0;
                transition: ease .2s opacity;
            } 

                .date-list .date-container[b-blmzpyihyg]  .menu-container span {
                    font-size: 1.3rem;
                    height: 1.3rem;
                    width: 1.3rem;
                    padding: .2rem;
                }

        .date-list .date-container:hover[b-blmzpyihyg]  .menu-container {
            opacity: 1;
        }

        .date-list .date-container:hover .daily-hours[b-blmzpyihyg] {
            right: 2.5rem;
        }

        .site-roster-container[b-blmzpyihyg] {
            position: relative;
            display: flex;
            flex-direction: column;
        }

    .site-roster-container .date-list[b-blmzpyihyg] {
        top: 7.25rem;
        z-index: 10;
    }

    .date-list .date-container .date-note[b-blmzpyihyg] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 3px 16px;
        padding: 3px 16px;
        border-radius: 8px;
        font-size: 0.8rem;
        cursor: pointer;
        background: var(--card-bg-top80);
        transition: ease .2s max-height;
    }

    .date-list .date-container .date-note:focus[b-blmzpyihyg] {
        display: unset;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: hidden auto;
        max-height: 64px;
        white-space: pre-line;
    }

        .date-list .date-container .date-note span[b-blmzpyihyg] {
            font-size: 12px;
            padding: 2px 3px 0px 0px;
            float: left;
            color: var(--text-dark-mute);
            opacity: .8;
        }

        .date-list .date-container .date-note:focus span[b-blmzpyihyg] {
            padding: 16px 3px 0px 0px;
        }

    .date-list .date-container.past .date-note[b-blmzpyihyg] {
        opacity: .5;
    }
    .date-list .date-container.today .date-note[b-blmzpyihyg] {
        opacity: 1;
        font-weight: 400;
    }
    .date-list .date-container.today .date-note span[b-blmzpyihyg]{
        opacity: 1;
        font-weight: 400;
        color: var(--primary);
    }

.date-list .date[b-blmzpyihyg] {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 1rem 1.5rem;
    position: relative;
}

.date .daily-hours[b-blmzpyihyg] {
    position: absolute;
    right: .75rem;
    top: .5rem;
    display: flex;
    align-items: flex-start;
    font-family: var(--font-header);
    font-size: 10px;
    font-weight: 800;
    opacity: .75;
    color: var(--text-dark);
    transition: ease .2s right;
}

.date-list .date .daily-hours p[b-blmzpyihyg] {
    margin: 0rem;
}

.date .daily-hours span[b-blmzpyihyg] {
    font-size: 13px;
    margin-right: .3rem;
}

.date-list .date .date-string[b-blmzpyihyg] {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-dark);
    opacity: 0.8;
    margin: 0;
    margin-top: .5rem;
}

.date-list .date .day[b-blmzpyihyg] {
    font-family: var(--font-header);
    font-size: 1.5rem;
    color: var(--text-dark);
    margin: 0;
    margin-top: 0.2rem;
    text-transform: capitalize;
    font-weight: 800;
}

.date-list .today .date[b-blmzpyihyg]{
    border-radius: 16px;
    border: .1rem solid var(--card-border);
    background: var(--card-bg-top);
    box-shadow: var(--shadow-medium);
}

.date-list .past .date[b-blmzpyihyg] {
    opacity: .5;
}

.date-list .today .day[b-blmzpyihyg], .date-list .today .date-string[b-blmzpyihyg] {
    color: var(--primary);
    font-weight: 900;
} 

.roster-header[b-blmzpyihyg] { 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    margin: 1rem 1rem 0.5rem;
    gap: .5rem;
}

    .roster-header h2[b-blmzpyihyg] {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 900;
    } 

.message[b-blmzpyihyg] {
    width: calc(100% - 2rem);
    margin: 1rem 0 .5rem;
    padding: 1.5rem 0;
    --x-bg: var(--bg-dark);
    --x-color: var(--bg-darker);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .message h2[b-blmzpyihyg] {
        font-family: var(--font-header);
        font-weight: 900;
        font-size: 1.6rem;
        text-align: center;
        color: var(--primary-accent);
    }

.message-button[b-blmzpyihyg] {
    margin: 0 0 1rem;
}

.load.date-list[b-blmzpyihyg] {
    background: var(--primary10);
    margin: .5rem 1rem .5rem 1rem;
    padding: 0 1rem;
    height: 9rem;
    width: calc(100% - 3rem);
}

    .load.date-list .today .date[b-blmzpyihyg] {
        background: var(--primary20);
        border: none;
        box-shadow: none;
        margin: .5rem 0;
    }

.load-container[b-blmzpyihyg] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1700px) {
    .date-list .date[b-blmzpyihyg] {
        padding: .8rem 1rem;
        border-radius: .8rem;
    }

        .date-list .date .daily-hours[b-blmzpyihyg] {
            font-weight: 400;
            font-family: var(--font-body)
        }

            .date-list .date .daily-hours span[b-blmzpyihyg] {
                opacity: .8;
                margin-right: 0.1rem;
            }

            .date-list .date .daily-hours p[b-blmzpyihyg] {
                display: none;
            }

        .date-list .date .day[b-blmzpyihyg] {
            font-size: 1rem;
            margin: 0;
        }

        .date-list .date .date-string[b-blmzpyihyg] {
            font-size: .75rem;
        }
}

@media (max-width: 1100px) {
    .date-list .date[b-blmzpyihyg] {
        padding: .7rem .7rem;
        border-radius: .5rem;
    }

        .date-list .date .daily-hours[b-blmzpyihyg] {
            font-size: 8px;
        }

            .date-list .date .daily-hours span[b-blmzpyihyg] {
                font-size: 10px;
            }

        .date-list .date .day[b-blmzpyihyg] {
            font-size: .8rem;
        }

        .date-list .date .date-string[b-blmzpyihyg] {
            font-size: .5rem;
        }
}
/* _content/PowerPlan/Components/RosterDayActions.razor.rz.scp.css */

.actions[b-5vrbcg185o] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 8px;
    width: 100%;
}

    .actions.floater[b-5vrbcg185o] {
        padding: 0.15rem 0.5rem 0.15rem 0.3rem;
    } 

    .actions > div[b-5vrbcg185o],
    .actions[b-5vrbcg185o]  .publish {
        cursor: pointer;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    .actions[b-5vrbcg185o]  .publish {
        border-radius: .2rem;
        justify-content: flex-end;
        flex: 1;
        margin-left: -.3rem;
    }

    .actions[b-5vrbcg185o]  .tooltip-container:has(.publish) {
        flex: 1;
    }

    .actions .note[b-5vrbcg185o] {
        border-radius: .3rem;
    }

    .actions > div[b-5vrbcg185o]  span,
    .actions[b-5vrbcg185o]  .publish span {
        font-size: 16px;
        color: var(--text-dark-mute);
        opacity: .4;
        padding-bottom: 0;
        padding: .2rem;
        border-radius: .3rem;
        background: var(--card-bg-top);
        transition: ease .2s box-shadow;
    }

        .actions > div[b-5vrbcg185o]  span:hover,
        .actions[b-5vrbcg185o]  .publish span:hover {
            box-shadow: var(--shadow-small);
        }

    .actions > div[b-5vrbcg185o]  p,
    .actions[b-5vrbcg185o]  .publish p {
        margin: 0;
        font-size: 12px;
        color: var(--text-dark-mute);
        opacity: .4;
    }

    .actions > div.filled[b-5vrbcg185o] {
    }

        .actions > div.filled[b-5vrbcg185o]  span,
        .actions[b-5vrbcg185o]  .publish.filled span {
            color: var(--primary);
            opacity: .8;
        }
/* _content/PowerPlan/Components/RosterPositionComponent.razor.rz.scp.css */
[b-sv5dv0qdla] .drag-item-wrapper {
    display: block;
}

.roster-position-component-container[b-sv5dv0qdla] {
    --main: var(--primary);
    --main20: var(--primary20);
    --main50: var(--primary50);
    --soft: var(--bg-dark);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-bottom: .5rem;
}

.roster-position-component[b-sv5dv0qdla] {
    background: var(--main20);
    padding: .5rem;
    border-radius: .25rem 1.3rem 1.3rem .25rem;
    border-left: .5rem solid var(--main);
    display: flex;
    flex-direction: row;
    margin-left: 0rem;
    width: calc(100% - 2rem);
    flex-shrink: 0;
}

    .roster-position-component-container .label[b-sv5dv0qdla] {
        font-family: var(--font-header);
        font-weight: 800; 
        transform-origin: 0 0;
        color: var(--main); 
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
        cursor: pointer;
    }

.roster-position-component .day[b-sv5dv0qdla] {
    height: auto;
    border-radius: 16px;
    min-width: 5.5rem;
    gap: 8px;
    padding: 4px;
    background: transparent;
}
    .roster-position-component .day.today[b-sv5dv0qdla] {
        background: var(--main50);
    }

    .day[b-sv5dv0qdla]  .sortable-list {
        height: 100%;
        gap: inherit;
        display: flex;
        flex-direction: column;
    }

        .day[b-sv5dv0qdla]  .sortable-list:has(.new-shift-draggable-button) p.empty-text {
            display: none;
        }

        .position-actions[b-sv5dv0qdla] {
            display: flex;
            justify-content: space-between;
            margin: 0 .5rem;
            height: 1.5rem;
            overflow: hidden;
            transition: cubic-bezier(0.44, -0.07, 0.15, 0.9) .2s height;
            transition-delay: .3s;
        }

.roster-position-component .flex-c:hover .position-actions[b-sv5dv0qdla] {
    height: 1.5rem;
}

.position-actions div[b-sv5dv0qdla] {
    display: flex;
}

.position-actions span[b-sv5dv0qdla] {
    font-size: 1rem;
    padding: .2rem;
    color: var(--text-dark);
    opacity: .6;
    transition: .1s ease opacity, .1s ease color, .1s ease background;
    cursor: pointer;
    border-radius: .2rem;
}

    .position-actions span:hover[b-sv5dv0qdla],
    .add-icon:hover .add-expanded[b-sv5dv0qdla] {
        opacity: .8;
    }

.delete:hover[b-sv5dv0qdla] {
    color: var(--text-light) !important;
    background: var(--warning);
}

.roster-position-component .flex-c p.empty-text[b-sv5dv0qdla] {
    --x-bg: var(--bg-darker);
    --x-color: var(--bg);
    position: relative;
    padding: .5rem .5rem .3rem;
    border-radius: .7rem;
    background: var(--shift-bg20);
    color: var(--main);
    font-family: var(--font-header);
    font-weight: 800;
    font-size: 0.8rem;
    min-height: 1.5rem;
    min-width: 3.5rem;
    line-height: 1.1rem;
    text-align: center;
    margin: auto .5rem;
    opacity: .5;
    transition: background ease .1s, outline ease .1s;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.add-expanded[b-sv5dv0qdla] {
    margin: 0;
    margin-top: .2rem;
    font-size: .8rem;
    font-weight: 700;
    font-family: var(--font-header);
    color: var(--text-dark);
    opacity: .6;
    cursor: pointer;
}

.day:nth-last-of-type(1)[b-sv5dv0qdla]  .shift {
    animation-delay: .24s;
}

.day:nth-last-of-type(2)[b-sv5dv0qdla]  .shift {
    animation-delay: .20s;
}

.day:nth-last-of-type(3)[b-sv5dv0qdla]  .shift {
    animation-delay: .16s;
}

.day:nth-last-of-type(4)[b-sv5dv0qdla]  .shift {
    animation-delay: .12s;
}

.day:nth-last-of-type(5)[b-sv5dv0qdla]  .shift {
    animation-delay: .08s;
}

.day:nth-last-of-type(6)[b-sv5dv0qdla]  .shift {
    animation-delay: .04s;
}
/* _content/PowerPlan/Components/RosterTemplateComponent.razor.rz.scp.css */
.roster-component[b-25jr0nqrzk] {
    display: flex;
    flex-direction: column;
}

.publish-backdrop[b-25jr0nqrzk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.scroll-offset[b-25jr0nqrzk] {
    scroll-margin-top: calc( var(--b) + var(--ch) + var(--selected-shifts-offset) + var(--select-template-offset) + var(--date-container-constant) + var(--date-action-container-constant));
}

[b-25jr0nqrzk] .date-container,
.date-container[b-25jr0nqrzk],
.date-action-container[b-25jr0nqrzk] {
    position: sticky;
    display: flex;
    flex-direction: row;
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    margin: 0 .1rem;
    padding: 0rem 0.5rem 0rem 1rem;
    border-radius: 16px;
    background: var(--card-bg80);
    backdrop-filter: blur(6px);
    z-index: 3;
    transition: ease .2s background, ease .2s top, ease .2s color;
}

.date-action-container[b-25jr0nqrzk] {
    background: transparent;
    border-radius: 0;
    z-index: 2;
    backdrop-filter: blur(8px);
    margin: 0rem;
    padding: 0 1rem 0 1rem;
    width: calc(100% - 2rem);
    max-width: calc(100% - 1.2rem);
}

    .date-action-container[b-25jr0nqrzk]  .tooltip-container:has(.site-tag) {
        position: absolute;
        left: -0.5rem;
    }

.date .cost[b-25jr0nqrzk] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: -2px 0 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-dark);
}

.cost[b-25jr0nqrzk]  span.material-icons {
    color: var(--warning);
    font-size: 0.9rem;
    margin: 0.1rem 0.1rem 0 0;
}

.site-header[b-25jr0nqrzk] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0.5rem;
    cursor: pointer;
}

    .site-header h3[b-25jr0nqrzk] {
        font-weight: 800;
        margin: 0;
        opacity: .8;
        transition: ease .2s color, ease .2s font-weight, ease .2s opacity;
    }

    .site-header.roster-selected h3[b-25jr0nqrzk] {
        font-weight: 900;
        opacity: 1;
    }

.load-container[b-25jr0nqrzk] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

[b-25jr0nqrzk] .date-container,
.date-container[b-25jr0nqrzk] {
    width: calc(100% - 2.5rem);
    padding: 0rem 1rem 0rem 1.5rem;
}

    [b-25jr0nqrzk] .date-container .date,
    .date-container .date[b-25jr0nqrzk] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 0.5rem 0.5rem 0.5rem 1rem;
        position: relative;
        margin: 4px 0; 
    }

        [b-25jr0nqrzk] .date-container .date.slim,
        .date-container .date.slim[b-25jr0nqrzk] {
            padding: 0.15rem 0.5rem 0.15rem 1rem;
        }


.date .daily-hours[b-25jr0nqrzk] {
    position: absolute;
    right: .75rem;
    top: .5rem;
    display: flex;
    align-items: flex-start;
    font-family: var(--font-header);
    font-size: 10px;
    font-weight: 800;
    opacity: .75;
    color: var(--text-dark);
}

.date-container .date .daily-hours p[b-25jr0nqrzk] {
    margin: 0rem;
}

.date .daily-hours span[b-25jr0nqrzk] {
    font-size: 13px;
    margin-right: .3rem;
}

.date-container .date .date-string[b-25jr0nqrzk] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-dark);
    opacity: 0.8;
    margin: 0.3rem 0 0;
}

.date-container .date .day[b-25jr0nqrzk] {
    font-family: var(--font-header);
    font-size: 1.4rem;
    color: var(--text-dark);
    margin: 0 0 0.2rem;
    text-transform: capitalize;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.date-container:not(.is-template) .date:not(.published) .date-string[b-25jr0nqrzk],
.date-container:not(.is-template) .date:not(.published) .day[b-25jr0nqrzk] {
    opacity: .5;
}

.date-container:not(.is-template) .today[b-25jr0nqrzk] {
    border-radius: 16px;
    background: var(--card-bg-top80);
}

.date-container:not(.is-template) .past[b-25jr0nqrzk] {
    opacity: .5;
}

.date-container:not(.is-template) .today .day[b-25jr0nqrzk] {
    color: var(--primary);
    font-weight: 900;
}

.date-container.is-template[b-25jr0nqrzk]  .day {
    background: transparent !important;
}

.roster-component[b-25jr0nqrzk] {
    transition: ease .2s margin, ease .2s padding, ease .2s background;
    border-radius: 1rem;
}

    .roster-component.roster-selected[b-25jr0nqrzk] {
        background: var(--card-bg-top);
    }
        .roster-component.roster-selected:not(:has(.revenue-footer))[b-25jr0nqrzk] {
            padding-bottom: 0.5rem;
        }

    .roster-component:not(:has(.message))[b-25jr0nqrzk] {
        margin-bottom: 0.5rem;
    }

.site-row[b-25jr0nqrzk] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

    .site-row h2[b-25jr0nqrzk] {
        flex: 1;
        margin: 0;
    }

.message[b-25jr0nqrzk] {
    width: calc(100% - 2rem);
    margin: 0.1rem 1rem 0.5rem;
    padding: 1.5rem 0;
    background: var(--bg-dark);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .message:last-of-type[b-25jr0nqrzk] {
    }

    .message h2[b-25jr0nqrzk] {
        font-family: var(--font-header);
        font-weight: 900;
        font-size: 1.6rem;
        text-align: center;
        color: var(--primary-accent);
    }

    .message h3[b-25jr0nqrzk] {
        font-family: var(--font-header);
        font-weight: 900;
        font-size: 1.6rem;
        margin: 0;
        text-align: center;
        color: var(--primary-accent);
    }

    .message p[b-25jr0nqrzk] {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 1rem;
        margin: 0;
        text-align: center;
        color: var(--text-dark-accent);
    }

    .message .row[b-25jr0nqrzk] {
        display: flex;
        margin-top: 1rem;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

        .message .row label[b-25jr0nqrzk] {
            font-family: var(--font-body);
            font-weight: 400;
            font-size: 1rem;
            margin: 0;
            text-align: center;
            color: var(--text-dark-accent);
        }

        .message .row .choice-container[b-25jr0nqrzk] {
            position: relative;
            display: flex;
            flex-direction: column;
        }

            .message .row .choice-container .notice[b-25jr0nqrzk] {
                position: absolute;
                top: 100%;
                font-size: 12px;
                text-align: left;
                margin-left: 1rem;
            }

        .message .row .choice[b-25jr0nqrzk] {
            background: var(--card-bg);
            border: .2rem solid var(--card-border);
            border-radius: 1rem;
            gap: 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: .3rem;
            overflow: hidden;
        }

            .message .row .choice.disabled[b-25jr0nqrzk] {
                filter: saturate(0);
                pointer-events: none;
            }

            .message .row .choice p[b-25jr0nqrzk] {
                font-family: var(--font-header);
                font-weight: 800;
                font-size: 1.1rem;
                margin: .5rem;
                text-align: left;
                color: var(--primary-accent);
                flex: 1;
            }

.empty-template[b-25jr0nqrzk] {
    width: 20rem;
    margin: 1rem auto;
    padding: .5rem 3rem 1.5rem;
    background: var(--bg-dark);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .empty-template h2[b-25jr0nqrzk] {
        font-family: var(--font-header);
        font-weight: 900;
        font-size: 1.6rem;
        text-align: center;
        margin-bottom: 0rem;
        color: var(--primary-accent);
    }

    .empty-template .positions[b-25jr0nqrzk] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 1rem 0;
    }

        .empty-template .positions > div[b-25jr0nqrzk] {
            padding: .4rem .8rem .4rem .4rem;
            background: var(--card-bg);
            margin: .1rem;
            border: .1rem solid var(--card-border);
            border-radius: .8rem;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: ease .2s box-shadow;
        }

            .empty-template .positions > div:hover[b-25jr0nqrzk] {
                box-shadow: var(--shadow-medium);
            }

            .empty-template .positions > div > span[b-25jr0nqrzk] {
                height: 1.2rem;
                width: 1.2rem;
                border-radius: .4rem;
                margin-right: .4rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .empty-template .positions > div > span > span[b-25jr0nqrzk] {
                    font-weight: 900;
                    color: var(--text-light);
                    font-size: .9rem;
                    opacity: 0;
                    transition: ease opacity .2s;
                }

                .empty-template .positions > div > span.checked > span[b-25jr0nqrzk] {
                    opacity: 1;
                }

.edit-note-backdrop[b-25jr0nqrzk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(6px);
    z-index: 10;
    animation: backdrop-in-b-25jr0nqrzk ease .3s forwards 1;
}

    .edit-note-backdrop .edit-note-container[b-25jr0nqrzk] {
        height: auto;
        width: 40rem;
        max-width: 90%;
        background: var(--card-bg);
        padding: 1rem;
        border-radius: 1rem;
        box-shadow: var(--shadow-medium);
        transform: translateY(10rem);
        opacity: 0;
        animation: note-in-b-25jr0nqrzk ease .5s forwards 1;
        animation-delay: .1s;
    }

        .edit-note-backdrop .edit-note-container .header[b-25jr0nqrzk] {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

            .edit-note-backdrop .edit-note-container .header p[b-25jr0nqrzk] {
                font-family: monospace;
                color: var(--text-dark-mute);
                padding: 0.5rem 1rem;
                margin: 0;
                background: var(--card-bg-top);
                border-radius: .2rem;
            }

        .edit-note-backdrop .edit-note-container .body[b-25jr0nqrzk]  .textarea-component textarea {
            width: calc(100% - 2.6rem);
            margin-bottom: 0;
        }

        .edit-note-backdrop .edit-note-container .body p[b-25jr0nqrzk] {
            margin: 1rem 1rem .5rem;
        }

@keyframes backdrop-in-b-25jr0nqrzk {
    from {
        backdrop-filter: blur(0px);
    }

    to {
        backdrop-filter: blur(6px);
    }
}

@keyframes note-in-b-25jr0nqrzk {
    from {
        transform: translateY(10rem);
        opacity: 0;
    }

    to {
        transform: translateY(0rem);
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    [b-25jr0nqrzk] .date-container .date,
    .date-container .date[b-25jr0nqrzk] {
        padding: 1rem .7rem;
    }
        .date-container .date .day[b-25jr0nqrzk] {
            font-size: .8rem;
        }

        .date-container .date .date-string[b-25jr0nqrzk] {
            font-size: .5rem;
        }
}
.compact[b-25jr0nqrzk]  .date-container,
.compact .date-container[b-25jr0nqrzk] {
    padding: 0;
    width: calc(100% - 1rem);
    margin-bottom: 4px;
}
    .compact[b-25jr0nqrzk]  .date-container .date,
    .compact .date-container .date[b-25jr0nqrzk] { 
        padding: 8px 16px;
        border-radius: 12px;
    }

    .compact .date-container .date-string[b-25jr0nqrzk] {
        font-size: 12px;
    }

    .compact .date-container .day[b-25jr0nqrzk] {
        font-size: 20px;
    }

.roster-position-component-container .roster-position-component:nth-of-type(0)[b-25jr0nqrzk] {
    margin-top: 0;
}

.compact[b-25jr0nqrzk]  .roster-position-component {
    margin: 0 0 0 8px;
    border-radius: 0;
    padding: 0 0 0 4px;
    width: calc(100% - 12px - 0.5rem);
}

    .compact[b-25jr0nqrzk]  .roster-position-component .day {
        border-radius: 0;
        gap: 4px;
        padding: 8px 4px;
    }

.compact[b-25jr0nqrzk]  .position-actions span {
    font-size: 12px;
}

.compact[b-25jr0nqrzk]  .add-expanded {
    font-size: 12px;
    font-family: var(--font-body);
    font-weight: 400;
}

.compact[b-25jr0nqrzk]  .shift {
    box-shadow: none;
    border-radius: 8px;
    padding: 4px;
}

    .compact[b-25jr0nqrzk]  .shift .shift-flex p.name {
        font-size: 12px;
    }

    .compact[b-25jr0nqrzk]  .shift .shift-flex p.timetext {
        font-size: 12px;
    }
/* _content/PowerPlan/Components/SelectOrganizationComponent.razor.rz.scp.css */

.org-select-list[b-1aghmhp0bz] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--card-bg-top);
    padding: .5rem;
    border-radius: 1.3rem;
    width: calc(100% - 2rem);
}

    .org-select-list p.instruction[b-1aghmhp0bz] {
        width: 100%;
        margin: 0;
        opacity: .5;
        font-size: 12px;
        text-align: center;
    }

    .org-select-list button[b-1aghmhp0bz] {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        padding: .3rem;
        background: var(--card-bg);
        border-radius: .8rem;
        border: none;
        overflow: hidden;
        transition: ease .2s background;
    }

        .org-select-list button:hover[b-1aghmhp0bz],
        .org-select-list button:focus[b-1aghmhp0bz] {
            outline: none;
            background: var(--bg-dark);
        }


            .org-select-list button:hover[b-1aghmhp0bz]  .picture,
            .org-select-list button:focus[b-1aghmhp0bz]  .picture {
                box-shadow: var(--shadow-small);
            }

        .org-select-list button .col[b-1aghmhp0bz] {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: .0rem;
            height: 100%;
            overflow: hidden;
            transition: ease .2s opacity;
        }

            .org-select-list button .col p[b-1aghmhp0bz] {
                margin: 0;
                font-size: 1rem;
                font-weight: 600;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

                .org-select-list button .col p.description[b-1aghmhp0bz] {
                    font-size: 0.8rem;
                    font-weight: 400;
                }

    .org-select-list:has(button:hover) button:not(:hover)[b-1aghmhp0bz]  .picture,
    .org-select-list:has(button:hover) button:not(:hover) .col[b-1aghmhp0bz],
    .org-select-list:has(button:focus) button:not(:focus)[b-1aghmhp0bz]  .picture,
    .org-select-list:has(button:focus) button:not(:focus) .col[b-1aghmhp0bz] {
        opacity: .5;
    }

.org-select-list.dropdown[b-1aghmhp0bz] { 
    background: none;
    padding: 0;
    border-radius: 0;
    width: 100%;
}
    .org-select-list.dropdown .current-org[b-1aghmhp0bz] {
        width: calc(100% - 2rem);
        margin: 0 0.75rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        padding: .25rem;
        border-radius: .7rem;
        gap: 0.75rem;
        background: var(--card-bg-top);
    }

        .org-select-list.dropdown .current-org.expandable[b-1aghmhp0bz]{
            cursor: pointer;
        }
         
        .org-select-list.dropdown .current-org p[b-1aghmhp0bz] {
            flex: 1;
            margin: 0;
            font-size: .9rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }
    .org-select-list.dropdown .current-org span[b-1aghmhp0bz]{
        overflow: hidden;
        max-width: 0;
        opacity: .2;
        transition: ease .2s opacity, ease .2s max-width;
    }
        .org-select-list.dropdown .current-org.expandable:hover span[b-1aghmhp0bz] {
            max-width: 2rem;
            opacity: .5;
        }

.org-list[b-1aghmhp0bz] {
    position: absolute;
    top: 100%;
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    background: var(--card-bg-top50);
    backdrop-filter: blur(8px);
    margin: 0 .5rem;
    border-radius: .8rem;
    z-index: 5;

    max-height: 0;
    overflow: hidden;
    padding: 0;
    box-shadow: none;

    transition: ease .2s padding, ease .2s box-shadow, ease .2s max-height;
}

.open .org-list[b-1aghmhp0bz] {
    max-height: 15rem;
    padding: .3rem;
    box-shadow: var(--shadow-large);
}
    .org-list button[b-1aghmhp0bz] {
        width: 100%;
        background: var(--card-bg-top);
        border: 1px solid var(--card-border);
        gap: .35rem;
        padding: .2rem;
        border-radius: .65rem;
    }
    .org-list button p[b-1aghmhp0bz]{
        margin: 0;
        font-weight: 400 !important;
    }
/* _content/PowerPlan/Components/ShiftComponent.razor.rz.scp.css */
.shift[b-4b5x5803wc] {
    position: relative;
    padding: .3rem;
    border-radius: 12px;
    background: var(--shift-bg);
    min-height: 2.5rem;
    border: .1rem solid var(--card-border);
    min-width: 3.5rem;
    transition: background ease .1s, outline ease .1s, transform .2s cubic-bezier(0.49, 0.77, 0.69, 1.07);
}

    .shift.past[b-4b5x5803wc] {
        box-shadow: none;
        background: var(--shift-bg20);
    }

    /*
.shift.selected {
	background: linear-gradient(45deg, var(--bg-darker) 0%, var(--bg-darker) 5%,transparent 5%, transparent 10%, var(--bg-darker) 10%, var(--bg-darker) 15%,transparent 15%,transparent 20%, var(--bg-darker) 20%, var(--bg-darker) 25%,transparent 25%,transparent 30%, var(--bg-darker) 30%, var(--bg-darker) 35%,transparent 35%,transparent 40%, var(--bg-darker) 40%, var(--bg-darker) 45%,transparent 45%,transparent 50%, var(--bg-darker) 50%, var(--bg-darker) 55%,transparent 55%,transparent 60%, var(--bg-darker) 60%, var(--bg-darker) 65%,transparent 65%,transparent 70%, var(--bg-darker) 70%, var(--bg-darker) 75%,transparent 70%,transparent 80%, var(--bg-darker) 80%, var(--bg-darker) 85%,transparent 85%,transparent 90%, var(--bg-darker) 90%, var(--bg-darker) 95%,transparent 95%);
	background-size: 6em 6em;
	background-color: var(--shift-bg);
	animation: AnimateBG 3s linear infinite, AnimateScale 1s ease 2, shiftAppear .15s ease-in 1 forwards;
	z-index: 2;
	transform: scale(1.05);
}
*/
    .shift.selected[b-4b5x5803wc]:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: inherit;
        outline: var(--position-color) 0 solid;
        animation: ease-out pulsate-b-4b5x5803wc 1.2s infinite;
    }

.badges[b-4b5x5803wc] {
    --size: 20px;
    display: flex;
    flex-direction: row;
    width: fit-content;
    gap: 4px;
    position: absolute;
    right: 8px;
    bottom: 4px;
}

    .awaiting[b-4b5x5803wc] {
        color: var(--primary);
    }

@keyframes pulsate-b-4b5x5803wc {
    0%, 20% {
        outline-width: 0;
        opacity: .8;
    }

    100% {
        outline-width: 1rem;
        opacity: 0;
    }
}

@keyframes AnimateBG-b-4b5x5803wc {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 6em 50%;
    }
}

@keyframes AnimateScale-b-4b5x5803wc {
    0% {
        transform: scale(1.05);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1.05);
    }
}

.shift p[b-4b5x5803wc] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shift[b-4b5x5803wc]  .profilePicture {
    --bdr: 7px;
}
.shift:hover[b-4b5x5803wc]  .profilePicture {
    transform: scale(1.1);
}

.shift-flex[b-4b5x5803wc] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.shift .info[b-4b5x5803wc] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: var(--font-body);
    margin: 2px 0 0px 8px;
    min-width: 0;
    min-height: 2.7rem;
    width: 100%;
}

    .shift .info p[b-4b5x5803wc] {
        margin: 0;
        color: var(--text-dark);
    }

        .shift .info p.name[b-4b5x5803wc] {
            justify-content: space-between;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: calc(100% - 1.3rem);
            font-family: var(--font-body);
            font-weight: 800;
            font-size: 14px;
            color: var(--text-dark-accent);
        }

.own[b-4b5x5803wc] {
    outline: .2rem solid var(--position-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    z-index: 1;
}

.shift.highlight[b-4b5x5803wc] {
    background: var(--bg-dark);
    border-color: var(--bg-dark);
    outline: 0.2rem solid var(--primary) !important;
}

.own .info p.name[b-4b5x5803wc] {
    font-weight: 900;
    color: var(--text-dark);
}


.shift .info .timespan[b-4b5x5803wc] {
    font-weight: 400;
    white-space: normal;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-dark);
    opacity: 1;
}

.top-row[b-4b5x5803wc] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

[b-4b5x5803wc] .settings {
    align-self: start;
    position: absolute;
    right: 0.2rem;
    top: 0.4rem;
    z-index: 50;
}

    [b-4b5x5803wc] .settings .menu {
        top: 2rem !important;
        z-index: 50;
    }

    [b-4b5x5803wc] .settings span {
        width: 1.3rem;
        height: 1.3rem;
        padding: .1rem;
        font-size: 1.3rem;
    }

.tag-container[b-4b5x5803wc] {
    width: auto;
    max-width: 100%;
    overflow: visible;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: -0.5rem;
    right: 0.5rem;
    flex-direction: row-reverse;
    z-index: 2;
    pointer-events: none;
}

[b-4b5x5803wc] .settings {
    opacity: 0;
    pointer-events: none;
    transition: opacity ease .2s;
}

    .shift:focus[b-4b5x5803wc]  .settings,
    .shift:hover[b-4b5x5803wc]  .settings,
    [b-4b5x5803wc] .settings.expanded {
        pointer-events: unset;
        opacity: 1;
    }

.shift .top-row p.name[b-4b5x5803wc] {
    max-width: calc(100% - .2rem);
    transition: ease .2s max-width;
}

.shift:focus .top-row p.name[b-4b5x5803wc],
.shift:hover .top-row p.name[b-4b5x5803wc] {
    max-width: calc(100% - 1.3rem);
}


@media (max-width: 1800px) {
    .timespan[b-4b5x5803wc] {
        font-size: 12px;
    }
}

@media (max-width: 1600px) {
    .shift[b-4b5x5803wc] {
        min-height: .5rem;
    }

        .shift.own[b-4b5x5803wc] {
            outline-width: .15rem;
        }

        .shift .info[b-4b5x5803wc] {
            margin: 0 0rem 0 0.5rem;
            min-height: 1.5rem;
        }

        .shift .top-row[b-4b5x5803wc] {
            margin: 0;
        }

        .shift .name[b-4b5x5803wc] {
            max-width: unset;
        }

        .shift .info p.timespan[b-4b5x5803wc] {
            font-size: 11px;
        }

        .shift .top-row p.name[b-4b5x5803wc] {
            font-size: 12px;
        }

    .badges[b-4b5x5803wc] { 
        right: 6px;
        bottom: 2px;
    }

        .badges[b-4b5x5803wc]  span{
            --size: 16px;
        }
        .tag-container[b-4b5x5803wc] {
            top: -6px;
        } 

    [b-4b5x5803wc] .settings {
        right: 0rem;
        top: 0rem;
    }
}

@media (max-width: 1300px) {
    .shift[b-4b5x5803wc] {
        padding: .25rem;
        border-radius: .5rem;
    }

        .shift .info p.name[b-4b5x5803wc] {
            font-size: 12px;
        }

        .shift .info p.timespan[b-4b5x5803wc] {
            font-size: 12px;
        }
}


@media (max-width: 1000px) {
    .collapsable:not(.noresize)[b-4b5x5803wc] {
        display: none;
    }

    .shift[b-4b5x5803wc] {
        padding: .35rem .5rem;
        border-radius: .3rem;
    }

        .shift .info[b-4b5x5803wc] {
            margin: 0rem;
            min-height: 1.5rem;
        }

    [b-4b5x5803wc] .settings span {
        width: .8rem;
        height: .8rem;
        font-size: .8rem;
    }

    .own[b-4b5x5803wc] {
        outline-width: 0.1rem;
    }

    .shift.highlight[b-4b5x5803wc] {
        outline-width: 0.1rem;
    }
}
/* _content/PowerPlan/Components/ShiftSwapComponent.razor.rz.scp.css */

.row[b-7absf9i8zh] {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 8px;
}

.card[b-7absf9i8zh] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border: none;
    background: var(--card-bg);
    border-radius: 14px;
    padding: .5rem;
    gap: 14px;
    flex: 1;
    cursor: pointer;
    box-shadow: var(--shadow-low);
    border: .1rem solid var(--card-border);
    transition: ease .2s box-shadow, ease .2s transform;
    text-decoration: none;
}

    .card.active[b-7absf9i8zh] {
        background: var(--card-bg-top);
        box-shadow: var(--shadow-small), inset var(--bg) 0 -8px 1rem 0rem;
    }
        .card:hover[b-7absf9i8zh] {
            box-shadow: var(--shadow-small);
            transform: translateY(-2px)
        }

        .card.active:hover[b-7absf9i8zh] {
            box-shadow: var(--shadow-float), inset var(--bg) 0 -8px 1rem 0rem;
            transform: translateY(-2px)
        }

.count[b-7absf9i8zh] {
    --s: 3rem;
    --p: 1rem;
    height: var(--s);
    min-width: calc(var(--s) - (2 * var(--p)));
    width: fit-content;
    padding: 0 var(--p);
    border-radius: .5rem;
    background: var(--bg-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    font-weight: 800;
    font-size: 1.8rem;
    font-family: var(--font-header);
}

h2[b-7absf9i8zh] {
    font-weight: 800;
    margin: 0;
    font-size: 1rem;
    flex: 1;
    display: inline-flex;
    align-items: flex-end;
}

.active h2[b-7absf9i8zh]{
    font-weight: 900;
}
/* _content/PowerPlan/Components/TakeableShiftComponent.razor.rz.scp.css */
.tabeable-shift[b-h1j5496joc] 
{
    position: relative;
    height: 11rem;
    width: 15.5rem;

}

.tabeable-shift svg[b-h1j5496joc] 
{
    position: absolute;
    height: 11rem;
    width: auto;
}

.bg-card[b-h1j5496joc]{
    position: absolute;
    height: 5rem;
    width: 10rem;
    bottom: .5rem;
    left: .5rem;
    background: var(--card-bg);
    z-index: 3;
}

.tabeable-shift[b-h1j5496joc]  .profilePicture {
    position: absolute;
    border-radius: .5rem;
}

.tabeable-shift .employee[b-h1j5496joc]{
    display: flex;
    flex-direction: row;
}

.employee .info[b-h1j5496joc] {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 1;
    top: 4.5rem;
    margin: 0 0.9rem;
}

    .employee .info p[b-h1j5496joc] {
        margin: 0;
        font-family: var(--font-body);
        font-weight: 800;
        color: var(--text-light);
    }
.employee .info p.position[b-h1j5496joc] {
    font-weight: 400;
}

.type[b-h1j5496joc] {
    position: absolute;
    font-size: 1.4rem;
    color: var(--text-light);
    font-family: var(--font-header);
    font-weight: 600;
    width: 9rem;
    left: 5rem;
    top: 1rem;
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;
}
    .type.no-employee[b-h1j5496joc] {
        width: 13rem;
        left: 1rem;
    }

    .type div[b-h1j5496joc] {
        font-size: .7rem;
        line-height: .5rem;
        font-weight: 800;
    }

.takeable-shift-body[b-h1j5496joc] {
    position: absolute;
    width: 100%;
    height: 5rem;
    display: flex;
    flex-direction: column;
    z-index: 1;

    top: 4.5rem;
}
[b-h1j5496joc] .take-shift-button {
    width: calc(100% - 2rem);
    margin: .5rem 1rem;

    text-align: center;
    display: flex;
    justify-content: center;
    transition: transform ease .2s;
}
    [b-h1j5496joc] .take-shift-button:hover{
        transform: scale(1.02)
    }

    .info-container[b-h1j5496joc] {
        width: calc(100% - 2rem);
        margin: 0 1rem;
        display: flex;
        justify-content: space-between;
    }
.info-container .info-blob[b-h1j5496joc]{
    display: flex;
    flex-direction: column;
}
.info-container .info-blob .more-info[b-h1j5496joc]{
    font-size: .7rem;
    font-weight: 700;
    font-family: var(--font-header);
    color: var(--text-light);
    text-align: center;
    width: 100%;
}
    .info-container .info-blob .blob[b-h1j5496joc] {
        height: 2.2rem;
        width: 6.5rem;
        border-radius: .5rem;
        background: var(--card-bg);
        line-height: 2.2rem;
        text-align: center;
        font-family: var(--font-body);
        font-size: .9rem;
        color: var(--text-dark);
        font-weight: 500;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }

.info-container .info-blob .blob .date[b-h1j5496joc], .info-container .info-blob .blob .day[b-h1j5496joc] {
    line-height: normal;
    font-weight: 500;
}

    .info-container .info-blob .blob .day[b-h1j5496joc] {
        font-size: .6rem;
        font-weight: 700;
        font-family: var(--font-header);
    }
/* _content/PowerPlan/Components/TemplateComponent.razor.rz.scp.css */
.template-component[b-xt2hbv8pym] {
    margin: 0;
    border-radius: 0.5rem;
    background: var(--card-bg-top);
    border: 0rem solid var(--card-bg-top);
    padding: .5rem;
    cursor: pointer;
    position: relative;
    transition: outline ease .1s;
}
.isDropdown[b-xt2hbv8pym] {
    background: var(--card-bg-top) !important;
    padding: 0.5rem;
}

[b-xt2hbv8pym] .tooltip-container:has(.edit-template) {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

[b-xt2hbv8pym] .edit-template {
    height: 1.5rem;
    width: 1.5rem;
    padding: .2rem;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transition: ease .2s background, ease .2s opacity;
}
.template-component:hover[b-xt2hbv8pym]  .edit-template {
    opacity: 0.5;
}

    .template-component:hover[b-xt2hbv8pym]  .edit-template:hover {
        background: var(--bg);
        opacity: 1;
    }

    [b-xt2hbv8pym] .edit-template span {
        font-size: 1rem;
        height: 1.1rem;
        width: 1.1rem;
        color: var(--input-text);
    }

    .template-component:hover[b-xt2hbv8pym]  .template-menu {
        opacity: 1;
    }

.template-component.active[b-xt2hbv8pym] {
    background: var(--bg-darker);
    outline: .2rem solid var(--primary);
}

.template-component:not(.isDropdown):hover[b-xt2hbv8pym] {
    outline: .2rem solid var(--primary);
}

.template-name[b-xt2hbv8pym]{
    font-family: var(--font-header);
    font-weight: 900;
    color: var(--text-dark);
    margin-right: 2rem;
    margin: 0.5rem 2rem 0 0.5rem;
}
.template-component .row[b-xt2hbv8pym]{
    margin: 0 0.5rem;
}
.template-component .days[b-xt2hbv8pym] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    background: var(--bg);
    border-radius: .75rem;
    transition: height .2s cubic-bezier(0.44, -0.07, 0.15, 0.9);
}

    .template-component .days[b-xt2hbv8pym]  button:not(.no-text) {
        padding: 4px 0 !important;
        border: none !important;
        background: var(--bg-dark) !important;
        width: calc(100% - 16px);
        box-shadow: none !important;
        margin: 0px 8px 8px !important;
        justify-content: center;
        color: var(--input-text);
        font-weight: 400;
        font-family: var(--font-body);
    }

        .template-component .days[b-xt2hbv8pym]  button:not(.no-text) b,
        .template-component .days[b-xt2hbv8pym]  button:not(.no-text) p {
            transition: .2s color ease;
        }

        .template-component .days[b-xt2hbv8pym]  button:not(.no-text) b {
            font-weight: 800;
            color: var(--input-text);
        }
        .template-component .days[b-xt2hbv8pym]  button:not(.no-text):hover,
        .template-component .days[b-xt2hbv8pym]  button:not(.no-text):hover b {
            background: var(--bg-dark2) !important;
            color: var(--text-light);
        }

.days .day-list[b-xt2hbv8pym] {
    position: relative;
    padding: .2rem;
    box-sizing:border-box;
    display: flex;
    flex-direction: row;
    gap: .2rem;
    margin: 0 4px;
}

.isDropdown .days[b-xt2hbv8pym] {
    height: 0 !important;
    overflow: hidden;
}
    .isDropdown .days .day[b-xt2hbv8pym] {
        position: relative;
        margin: 0rem;
        padding: .4rem .6rem !important;
        text-align: center;
    }

.active.isDropdown:not(.empty) .days[b-xt2hbv8pym],
.isDropdown:not(.empty):hover .days[b-xt2hbv8pym] {
    height: 5rem !important;
}

.template-component .days .day[b-xt2hbv8pym] {
    font-family: var(--font-header);
    font-size: .6rem;
    padding: .3rem .5rem;
    color: var(--text-dark-mute);
    background: var(--card-bg);
    text-align: center;
    border-radius: .5rem;
    margin: 0;
    font-weight: 700;
    flex: 1;
    text-transform: capitalize;
}
.template-component.isDropdown .days .day[b-xt2hbv8pym] {
    min-width: 0rem;
    width: 0.5rem;
}
    .template-component .days .day.active[b-xt2hbv8pym] {
        background: var(--bg-dark2);
        color: var(--input-text);
        font-weight: 900;
    } 
    .template-component .days .day.start-date[b-xt2hbv8pym] {
        outline: .2rem solid var(--primary50);
    }

.template-component.active .days .day[b-xt2hbv8pym],
.template-component:hover .days .day[b-xt2hbv8pym] {
    background: var(--bg-dark);
}

.dropdown-helper-text[b-xt2hbv8pym]{
    font-size: .6rem;
    font-weight: 800;
    font-family: var(--font-header);
    color: var(--input-text);
    margin: 8px 8px 0px 10px;
}

.template-component.active .days .day.active[b-xt2hbv8pym],
.template-component:hover .days .day.active[b-xt2hbv8pym] {
    background: var(--primary);
    color: var(--text-light);
}


.template-component .positions[b-xt2hbv8pym]{
    display: flex;
    flex-direction: row;
}

.template-component .position[b-xt2hbv8pym]{
    height: 1rem;
    width: 1rem;
    border-radius: .5rem;
    margin: .2rem;
    box-sizing: border-box;
    border: .3rem solid black;
}

.template-component .row[b-xt2hbv8pym] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

    .template-component .row .info[b-xt2hbv8pym] {
        color: var(--text-dark-accent);
        font-family: var(--font-body);
        font-size: 1rem;
        margin: .5rem 0;
    }
/* _content/PowerPlan/Components/TemplateDropdown.razor.rz.scp.css */
.template-dropdown-container[b-gsfbr3ep28] {
    z-index: 2;
    position: relative;
}

    .template-dropdown-container[b-gsfbr3ep28]  button {
        font-family: var(--font-header);
        font-weight: 700;
        background: var(--default);
        padding: .5rem;
        border: .1rem solid var(--card-border);
        color: var(--text-dark) !important;
        border-radius: 0.5rem;
        opacity: 1;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, 0px 1.5px 1.3px -1.4px hsl(var(--shadow-color) / 0.44);
        transition: background .2s ease, box-shadow .2s ease;
        cursor: pointer;
        width: fit-content;
        height: fit-content;
        -webkit-font-smoothing: antialiased;
        margin: 0 .5rem;
    } 
/* _content/PowerPlan/Components/TemplateShiftComponent.razor.rz.scp.css */
.shift[b-njumrovllt] {
    position: relative;
    padding: 8px;
    border-radius: 12px;
    border: .1rem solid var(--card-border);
    background: var(--shift-bg);
    min-height: 2.5rem;
    min-width: 3.5rem;
    transition: background ease .1s, outline cubic-bezier(0.44, -0.07, 0.15, 0.9) .2s, cubic-bezier(0.44, -0.07, 0.15, 0.9) border .2s, cubic-bezier(0.44, -0.07, 0.15, 0.9) .2s box-shadow;
}

    .shift.selected[b-njumrovllt] {
        outline: .1rem solid var(--primary) !important;
        border-color: var(--primary);
        box-shadow: var(--primary50) 0 0 10px 0 inset;
    }

    .shift[b-njumrovllt]  .checkbox {
        position: absolute;
        top: .5rem;
        left: .5rem;
        transform: scale(.8);
        z-index: 1;
    }

.own[b-njumrovllt] {
    outline: .2rem solid;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.shift:hover .top-row[b-njumrovllt]  .checkbox::after {
    opacity: 1;
}

.shift-flex[b-njumrovllt] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 4px 0;
}

    .shift-flex div[b-njumrovllt] {
        align-items: center;
    }

    .shift-flex > p[b-njumrovllt] {
        margin: 0;
        color: var(--text-dark);
        font-family: var(--font-body);
        margin-left: .5rem;
        font-size: 0.9rem;
        width: fit-content;
    }

.name[b-njumrovllt] {
    margin: 0;
    margin-left: .5rem;
    font-weight: 900;
    font-family: var(--font-body);
    font-size: 14px;
}

    .shift-flex .actions[b-njumrovllt] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        overflow: hidden;
        width: calc(100% - 1.5rem);
        min-width: 8rem;
        height: 0rem;
        margin-left: .5rem;
        transition: cubic-bezier(0.44, -0.07, 0.15, 0.9) .2s height;
        transition-delay: .5s;
    }

.shift:not(:has(.shift-form)):hover .actions[b-njumrovllt] {
    height: 1.5rem;
}

.shift-form:hover .actions[b-njumrovllt] {
    height: 0;
}

.shift-flex .actions[b-njumrovllt] {
    display: flex;
    flex-wrap: nowrap;
}

.actions[b-njumrovllt]  span {
    font-size: 1rem;
    padding: .2rem;
    color: var(--text-dark);
    opacity: .6;
    transition: .1s ease opacity, .1s ease color, .1s ease background;
    cursor: pointer;
    border-radius: .2rem;
}

    .actions[b-njumrovllt]  span:hover {
        opacity: .8;
    }
     

.shift .content[b-njumrovllt]{
    display: flex;
    width: 100%;

}

    .shift .content[b-njumrovllt]  .profilePicture{
        position: absolute;
        top: 8px;
        right: 8px;
    } 

.shift .name[b-njumrovllt] {
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-row[b-njumrovllt] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.tag-container[b-njumrovllt] {
    width: auto;
    max-width: 100%;
    overflow: visible;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: -0.9rem;
    right: 0;
    flex-direction: row-reverse;
    z-index: 2;
}

.shift-form[b-njumrovllt] {
    border-radius: 1.2rem;
    background: var(--card-bg-top80);
    backdrop-filter: blur(6px);
    padding: 1rem;
    position: absolute;
    margin-left: -0.5rem;
    margin-top: 0.9rem;
    min-width: 12rem;
    width: fit-content;
    max-width: 15rem;
    z-index: 5;
    border: .1rem solid var(--card-border);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    text-align: left;
}

    .shift-form[b-njumrovllt]  input[type=time] {
        padding: .4rem .6rem;
        border-radius: .5rem;
        width: calc(100% - .4rem);
        background: var(--card-bg-top);
        margin: 0.35rem 0 0.5rem;
    }

    .shift-form[b-njumrovllt]  .input-component {
        margin-right: 1rem;
    }

        .shift-form[b-njumrovllt]  .input-component label {
            color: var(--text-dark);
            opacity: .8;
        }

    .shift-form .time-input[b-njumrovllt]  .profilePicture {
        margin-right: 1rem;
    }

    .shift-form[b-njumrovllt]  .dropdown-container {
        width: 13rem;
    }

        .shift-form[b-njumrovllt]  .dropdown-container .input-component {
            margin-right: 0rem;
        }

    .shift-form label[b-njumrovllt] {
        font-family: var(--font-header);
        font-size: 1rem;
        font-weight: 800;
        text-align: left;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .shift-form label div[b-njumrovllt] {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

.position-color[b-njumrovllt] {
    height: 1.2rem;
    width: 1.2rem;
    border-radius: .3rem;
    margin-right: .5rem;
}

.shift-form .seperator[b-njumrovllt] {
    width: 100%;
    margin: .5rem 0;
    min-height: 0.2rem;
    background: var(--element-bg);
    border-radius: 0.5rem;
}

.shift-form .time-input[b-njumrovllt] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .shift-form .time-input[b-njumrovllt]  .input-component {
    }

        .shift-form .time-input[b-njumrovllt]  .input-component input {
        }

.buttons[b-njumrovllt] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    gap: 8px;
    margin-top: .25rem;
}

.delete:hover[b-njumrovllt] {
    color: var(--text-light) !important;
    background: var(--warning);
}

.tags-container[b-njumrovllt] {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .tags-container[b-njumrovllt]  > div {
    }

@media (max-width: 1800px) {
    .shift[b-njumrovllt] {
        padding: .2rem .2rem;
    } 

    .shift-flex > p[b-njumrovllt] {
        font-size: 12px;
    }

    .shift .top-row[b-njumrovllt] {
        margin: 0;
        width: 85%;
    } 

    .top-row[b-njumrovllt]  .checkbox {
        margin-right: .2rem;
        margin-left: -.2rem;
        transform: scale(.6);
    }

    .actions[b-njumrovllt] {
        min-width: 5.5rem !important;
        margin-right: .5rem;
    }

        .actions[b-njumrovllt]  span {
            font-size: 12px;
            padding: .1rem;
        }
}

@media (max-width: 1500px) {
    .shift[b-njumrovllt] {
        padding: .2rem .2rem;
        min-height: .5rem;
    } 

    [b-njumrovllt] .checkbox {
        transform: scale(.5);
    }

    .tag-container[b-njumrovllt] {
        top: -0.5rem;
    }

        .tag-container[b-njumrovllt]  .tag {
            font-size: .4rem;
            height: 0.5rem;
            text-align: center;
            padding: 0.1rem 0.3rem;
            padding-top: 0.15rem;
        }

    .shift-flex[b-njumrovllt]  .profilePicture {
        display: none;
    }

    .actions[b-njumrovllt]  span {
        font-size: 10px;
    }
}
/* _content/PowerPlan/Components/TODOListComponent.razor.rz.scp.css */
.todo-list[b-geupr930xb]{
    display: flex;
    flex-direction: column;
    background: var(--card-bg-top);
    margin: 4px;
    padding: 4px;
    border-radius: 12px;
}

    .todo-list .header[b-geupr930xb] {
        display: flex;
        position: relative;
        flex-direction: column;
        padding: 8px 8px;
    }

        .todo-list .header h3[b-geupr930xb] {
            margin: 0;
            font-weight: 900;
            font-size: .9rem;
        }

        .todo-list .header h4[b-geupr930xb] {
            margin: 0;
            opacity: .8;
            font-family: var(--font-body);
            font-weight: 400;
            font-size: .8rem;
        }

        .todo-list .header label[b-geupr930xb] {
            margin: 0;
            font-size: 12px;
            font-family: var(--font-body);
            position: absolute;
            right: 0;
            top: 0;
            background: var(--bg);
            color: var(--input-text);
            padding: 4px 8px;
            border-radius: 8px;
        }


.todo-list .list[b-geupr930xb]{
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

    .todo-list .list .empty[b-geupr930xb] {
        background: var(--bg-dark);
        padding: 8px 12px;
        border-radius: 8px;
        margin: 8px;
        margin-top: 0;
    }
    .todo-list .list .empty h2[b-geupr930xb]{
        font-weight: 900;
        font-size: 1rem;
        color: var(--input-text);
        margin: 0;
    }


    .todo-list .list .todo[b-geupr930xb] {
        display: flex;
        flex-direction: row;
        align-items: start;
        border-radius: 8px;
        background: var(--card-bg);
        gap: 8px;
        padding: 2px;
    }

        .todo-list .list .todo .info[b-geupr930xb]{
            display: flex;
            flex-direction: column;
            overflow: hidden;
            flex:1;
        }


        .todo-list .list .todo p[b-geupr930xb] {
            position: relative;
            margin: 0;
            margin-top: 3px;
            font-size: 0.9rem;
            width: fit-content;
        }
            .todo-list .list .todo p[b-geupr930xb]:after {
                content: " ";
                --m: 2px;
                height: 2px;
                width: 0%;
                position: absolute;
                background: var(--text-dark-mute);
                top: calc(50% - 1px);
                left: 0;
                transition: ease-out .3s width;
            }

            .todo-list .list .todo p.description[b-geupr930xb] {
                margin-top: 4px;
                margin-right: 16px;
                font-size: 0.8rem;
                color: var(--text-dark-mute);
                width: 100%;
                white-space: pre-wrap;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

        .todo-list .list .todo:hover p.description[b-geupr930xb] { 
            -webkit-line-clamp: 10; 
        }

        .todo-list .list .todo[b-geupr930xb]  .profilePicture{
            --s: 1.3rem;
            margin: 2px
        }

        .todo-list.Today .list .todo[b-geupr930xb] {
            cursor: pointer;
        }
        .todo-list.Today .list .todo:hover[b-geupr930xb] {
            background: var(--card-bg-top);
        }

            .todo-list.Today .list .todo:hover[b-geupr930xb]  .checkbox:not(.checked) span {
                opacity: .25;
                font-size: calc((var(--height) / 5) * 4);
                color: var(--primary);
            }

             
    .todo-list.Future .header h3[b-geupr930xb] { 
        margin: 4px 8px;
    }
    .todo-list.Future .list .todo[b-geupr930xb] {
        padding: 4px 8px;
    }

            .todo-list.Future .list .todo[b-geupr930xb]  .checkbox{
                display: none;
            }

    .todo-list .todo.completed[b-geupr930xb] {
        background: inherit;
    }
        .todo-list .todo.completed p:not(.description)[b-geupr930xb] {
            color: var(--text-dark50);
        }
    .todo-list .list .todo.completed p:not(.description)[b-geupr930xb]:after {
        width: calc((var(--m) * 2) + 100%);
    }
        .todo-list.Historic .todo.completed[b-geupr930xb]  .checkbox {
            opacity: 1;
            box-shadow: none;
            --primary: var(--bg-dark3)
        }
        .todo-list .todo.completed[b-geupr930xb]  .profilePicture {
            opacity: .6; 
        }
/* _content/PowerPlan/Components/WeatherComponent.razor.rz.scp.css */
.weather-container[b-ywmi13fh1w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    max-width: 50%;
    height: calc(16px + 1.5rem);
    border-radius: 16px;
    padding: 8px;
    color: var(--text-dark);
    border: 1px solid var(--card-border);
    background-color: var(--card-bg);
    animation: header-b-ywmi13fh1w .3s cubic-bezier(0.49, 0.77, 0.69, 1.07) forwards 1;
    animation-delay: .2s;
    z-index: 2;
}
#weatherComponent.hidden[b-ywmi13fh1w]{
    display: none;
}
.weather[b-ywmi13fh1w] {
    display: flex;
    flex-direction: column;
    min-width: 7rem;
    margin-left: .5rem;
}
.weather-container .icon[b-ywmi13fh1w]{
    height: 2.25rem;
}
.weather-container .weather-info[b-ywmi13fh1w]{
    display: flex;
    flex-direction: column;
    margin-left: .5rem;
}
    .weather-container .weather-info .temperature[b-ywmi13fh1w] {
        color: var(--text-dark);
        font-size: 1.1rem;
        font-family: var(--font-body);
        font-weight: 700;
    }
    .weather-container .weather-info .weather-description[b-ywmi13fh1w] {
        color: var(--text-dark);
        font-size: .7rem;
        opacity: .8;
        font-family: var(--font-body);
        overflow: hidden;
        text-overflow: ellipsis;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        max-width: 7rem;
    }
.weather-container .address[b-ywmi13fh1w] {
    color: var(--text-dark);
    font-size: .6rem;
    opacity: .5;
    margin-top: .1rem;
    font-family: var(--font-body);
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-left: .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weather-container .day-container[b-ywmi13fh1w]{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5rem;
}

.weather-container .time[b-ywmi13fh1w] {
    font-size: 16px;
    font-family: var(--font-mono);
    font-weight: 800;
}

.weather-container .day-container .day[b-ywmi13fh1w] {
    font-weight: 500;
    font-size: 10px;
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

.weather-container .day-container .date[b-ywmi13fh1w] {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    @keyframes header-b-ywmi13fh1w {
        from {
            transform: translateY(1rem);
            opacity: .8;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
/* _content/PowerPlan/Components/WorkplacePage/WorkplaceHome.razor.rz.scp.css */
.wph-container[b-6rf1lzvkw8]
{
    position: relative;
    display: flex;
    flex-direction: row;

    width: 100%;
    height: auto;
}

.wph-container-col[b-6rf1lzvkw8] {
    display: flex;
    flex-direction: column;

    width: 50%;
    flex: 1;
    height: auto;
}

.wph-container-row[b-6rf1lzvkw8]{
    display: flex;
    flex-direction: row;
    width: calc(100% - 2rem);
    align-items: end;
    overflow-x: auto;
    height:auto;
    padding: 1rem;
}

.element[b-6rf1lzvkw8] {
    min-height: 20rem;
    flex: 1;
    width: calc(100% - 1rem);
    outline: solid .1rem var(--card-border);
    outline-offset: -.1rem;
    border-radius: .8rem;
    background: var(--card-bg);
    margin: .5rem;
}

.news-card[b-6rf1lzvkw8] {
    position: relative;
    height: 9rem;
    width: 18rem;
    flex-shrink: 0;
    border-radius: .8rem;
    background: var(--card-bg);
    margin-right: 1rem;
    z-index: 1;
    background: var(--primary);
    background: linear-gradient(155deg, var(--primary-gradient-color) 0%, var(--primary) 53%, var(--primary-hover) 100%);
    display: flex;
    outline: solid .1rem var(--card-bg50);
    outline-offset: -.1rem;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .2s cubic-bezier(0.35, 0.07, 0.2, 1), box-shadow .2s cubic-bezier(0.35, 0.07, 0.2, 1), background .2s cubic-bezier(0.35, 0.07, 0.2, 1);
}

    .news-card:hover[b-6rf1lzvkw8] {
        transform: translateY(-.2rem);
        z-index: 2;
        box-shadow: 0px 0.7px 0.6px hsl(var(--shadow-color) / 0.54), 0px 1.5px 1.3px -1.4px hsl(var(--shadow-color) / 0.44), 0.1px 12.6px 11.2px -4.1px hsl(var(--shadow-color) / 0.23);
    }

    .news-card h1[b-6rf1lzvkw8] {
        color: var(--text-light);
        font-size: 1.1rem;
        text-shadow: 0px 1px 5px rgba(124,124,124,0.85);
        margin: 1.3rem;
    }

.news-card .remove[b-6rf1lzvkw8]{
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 14px;
    color: var(--text-light);
    opacity: .8;
    cursor: pointer;
}

    .news-card img.profile-pic[b-6rf1lzvkw8] {
        height: 3rem;
        min-height: 3rem;
        width: 3rem;
        min-width: 3rem;
        object-fit: cover;
        border-radius: .6rem;
        outline: .2rem solid var(--primary-accent);
        margin-left: 1rem;
    }
    .news-card div.text[b-6rf1lzvkw8] {
        flex: 1;
        font-size: 14px;
        height: auto;
        color: white;
        font-weight: 400;
        margin: .5rem;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-card.event[b-6rf1lzvkw8]{
        background: var(--primary20);
    }

    .card-content[b-6rf1lzvkw8]{
        height: calc(100% - 3.2rem);
        width: calc(100% - 2rem);
        margin: 1rem;
        margin-bottom: 0;
        border-radius: .5rem;
        background: var(--card-bg-top);
    }


.event h1[b-6rf1lzvkw8] {
    margin: .8rem;
    margin-bottom: .5rem;
    color: var(--text-dark);
    text-shadow: none;
    opacity: 1;
}

.event .event-line[b-6rf1lzvkw8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 14px;
    margin-bottom: .2rem;
    opacity: .8;
}

    .event .event-line span[b-6rf1lzvkw8]{
        font-size: 16px;
        margin-right: .5rem;
        margin-left: 1.2rem;
    }

    .card-actions[b-6rf1lzvkw8] {
        position: absolute;
        bottom: 0.5rem;
        right: 1rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

.card-actions[b-6rf1lzvkw8]  button{
    margin: .2rem;
    padding: .4rem !important;
}

    .card-actions[b-6rf1lzvkw8]  button span{
        font-size: 1rem;
    }

    .event > .wph-container-row[b-6rf1lzvkw8] {
        padding-top: 0;
    }

.event-p[b-6rf1lzvkw8] {
    margin: 0;
    width: calc(100% - 7rem);
    font-size: 12px;
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-dark);
    opacity: .7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/PowerPlan/Components/WorkplacePage/WorkplacePosts.razor.rz.scp.css */
.bulletin-header[b-2pcxhlz1nj]{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin-top: 1rem;
}

.bulletin-header-row[b-2pcxhlz1nj] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 70rem;
    max-width: calc(100% - 2rem);
}

.bulletin-header-row section[b-2pcxhlz1nj]{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

    .bulletin-header-row section[b-2pcxhlz1nj]  button{
        margin: 0 .2rem;
    }

    .bulletins-container[b-2pcxhlz1nj] {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        padding-left: 0;
    }

.bulletin-list[b-2pcxhlz1nj] {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 70rem;
    max-width: calc(100% - 2rem);
    padding: 0 1rem;
    height: auto;
}

.bulletin-list p.nomore[b-2pcxhlz1nj]{
    width: 100%;
    text-align: center;
    opacity: .8;
    font-style: italic;
    font-size: 12px;
    margin-bottom: 1.5rem;
}

    .bulletin-list[b-2pcxhlz1nj]  .bulletin{
        margin-bottom: .5rem;
    }

    .create-bulletin-container[b-2pcxhlz1nj] {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: var(--cardbg50);
        backdrop-filter: blur(4px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.create-bulletin[b-2pcxhlz1nj] {
    min-width: 20rem;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem
}

.create-bulletin-header[b-2pcxhlz1nj] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    padding: 1rem 0;
    width: 70rem;
    max-width: calc(100% - 2rem);
}

.create-bulletin-page[b-2pcxhlz1nj] {
    min-width: 10rem;
    width: calc(100% - 6rem);
    height: fit-content;
    background: var(--default);
    border-radius: .5rem;
    padding: 2rem;
    padding-top: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: hsl(var(--shadow-color) / 0.2) 0px 12px 28px 0px, hsl(var(--shadow-color) / 0.1) 0px 2px 4px 0px, hsl(var(--shadow-color) / 0.1) 0px 0px 0px 1px inset;
}
    .create-bulletin-page[b-2pcxhlz1nj]  .input-component > label{
        color: var(--text-dark);
        margin-left: 1rem;
    }

    .create-bulletin-page[b-2pcxhlz1nj]  .ql-editor.ql-blank::before {
        color: var(--text-dark-accent);
    }

.bulletin-ghost[b-2pcxhlz1nj] {
    position: relative;
    width: calc(100% - 2.6rem);
    height: auto;
    border: .1rem solid var(--card-border);
    padding: 1.3rem;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
}

.bulletin-ghost-row[b-2pcxhlz1nj]{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: fit-content;
}

    .bulletin-ghost-row section div[b-2pcxhlz1nj] {
        border-radius: .3rem;
        width: 16rem;
        max-width: calc(100% - 5rem);
        height: 1rem;
        min-height: 1.3rem;
        margin: .2rem .5rem;
    }
    .bulletin-ghost-row section div:last-of-type[b-2pcxhlz1nj]{
        height: 12px;
        min-height: 12px;
        width: 10rem;
    }

.profile-ghost[b-2pcxhlz1nj] {
    height: 3rem;
    width: 3rem;
    min-height: 3rem;
    min-width: 3rem;
    max-height: 3rem;
    max-width: 3rem;
    border-radius: .5rem;
}

.bulletin-body-ghost[b-2pcxhlz1nj]{
    height: 5rem;
    width: 100%;
    margin-top: .5rem;
    border-radius: .3rem;
}
/* _content/PowerPlan/Pages/ChatPage.razor.rz.scp.css */
.chatpage[b-63hu2xgcub] {
    width: 100%;
    height: calc(100vh - 8.5rem);
    position: relative;
    display: flex;
    flex-direction: row;
}

.chats-container[b-63hu2xgcub] {
    margin: 0 1rem 0 0;
    width: 15rem;
    display: flex;
    position: relative;
    flex-direction: column;
}

    .chats-container .empty[b-63hu2xgcub] {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--bg-dark);
        border-radius: 16px;
        padding: 16px;
        margin-top: 8px;
    }

        .chats-container .empty h3[b-63hu2xgcub] {
            margin: 16px 0;
            text-align: center;
            color: var(--input-text);
        }

        .chats-container .empty p[b-63hu2xgcub] {
            margin: 0 16px 16px;
            text-align: center;
            font-size: 1rem;
        }

            .chats-container .empty p span[b-63hu2xgcub] {
                font-size: 0.7rem;
                font-weight: 900;
                background: var(--primary20);
                padding: 0.3rem;
                border-radius: 50%;
            }

.chat[b-63hu2xgcub] {
    border-radius: 1.1rem;
    background: var(--card-bg);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    flex: 1;
    border: 1px solid var(--card-border);
    min-width: 15rem;
    box-shadow: var(--shadow-float);
    transition: ease .2s box-shadow;
}

    .chat .chat-head[b-63hu2xgcub] {
        background: var(--card-bg-top);
        border-radius: .5rem;
        margin: .5rem;
        margin-bottom: 0;
        width: calc(100% - 2rem);
        height: 4rem;
        border: 1px solid var(--card-border);
        display: flex;
        align-items: center;
        padding: 0 .5rem;
        box-shadow: var(--shadow-medium);
        transition: ease .2s box-shadow;
    }

    .chat.no-chats[b-63hu2xgcub], .chat.no-chats .chat-head[b-63hu2xgcub] {
        box-shadow: none;
    }

    .chat .chat-head h2[b-63hu2xgcub] {
        margin: 0;
        font-size: 1.2rem;
        white-space: nowrap;
        flex: 1;
        font-family: var(--font-body);
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat .chat-head[b-63hu2xgcub]  .add-button {
        background: transparent;
        font-size: 1.8rem;
        border-radius: 50%;
        line-height: 1.8rem;
        width: 1.8rem;
        height: 1.8rem;
        padding: .6rem;
        color: var(--text-dark);
        margin: 0;
        margin-right: .5rem;
    }

    .chat .chat-head[b-63hu2xgcub]  .dropdown {
        right: 0;
    }

[b-63hu2xgcub] .dropdown .profilePicture {
    margin-left: -0.5rem;
    margin-right: 0.5rem;
}

.cc-head[b-63hu2xgcub] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

    .cc-head[b-63hu2xgcub]  .add-button {
        background: transparent;
        font-size: 1.5rem;
        border-radius: 50%;
        line-height: 1.8rem;
        width: 1.8rem;
        height: 1.8rem;
        padding: .2rem;
        color: var(--text-dark);
        opacity: .7;
        margin: 0; 
    }

.chat-side-label[b-63hu2xgcub] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dark-mute);
    opacity: .7;
    margin: .3rem 0 .2rem .25rem;
}

    .chat-side-label[b-63hu2xgcub]:before {
        content: " ";
        min-height: 1px;
        min-width: calc(100% - 4rem);
        position: absolute;
        background: var(--text-dark-mute);
        right: 0;
        left: unset;
        margin-top: 0.4rem;
        z-index: -1;
        opacity: .2;
    }

.chat:not(.empty) .search-container input:active[b-63hu2xgcub],
.chat:not(.empty) .search-container input:focus[b-63hu2xgcub],
.chat:not(.empty) .input-container:not(.archived) input:active[b-63hu2xgcub],
.chat:not(.empty) .input-container:not(.archived) input:focus[b-63hu2xgcub] {
    background: var(--card-bg-top);
    box-shadow: 0px 0.2px 0.2px hsl(var(--shadow-color) / 0.32), 0px 2.4px 2.7px -0.7px hsl(var(--shadow-color) / 0.32), -0.2px 11.8px 24.5px -2.5px hsl(var(--shadow-color) / 0.32);
    outline: .2rem solid var(--primary50);
}

.search-container[b-63hu2xgcub], .input-container[b-63hu2xgcub] {
    position: relative;
}
 
    .input-container form[b-63hu2xgcub] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

        .input-container form[b-63hu2xgcub]  button.submit { 
            height: 2.6rem;
            width: 2.6rem;          
            align-items: center;
            justify-content: center;
        }

            .input-container form[b-63hu2xgcub]  button.submit span {
                font-size: 1.1rem; 
            } 

    .search-container input[b-63hu2xgcub], .input-container input[b-63hu2xgcub] {
        border: none;
        font-size: 1.2rem;
        width: calc(100% - 3rem);
        display: flex;
        align-items: center;
        flex-direction: row;
        background: var(--element-bg);
        color: var(--text-dark);
        font-family: var(--font-header);
        font-weight: 700;
        padding: .8rem 1.5rem;
        border-radius: .5rem;
        border: .1rem solid var(--card-border);
        transition: box-shadow cubic-bezier(0.44, -0.07, 0.15, 0.9) .15s;
    }

.input-container[b-63hu2xgcub] {
    margin-bottom: 0rem;
    width: calc(100% - 2rem);
    padding: 1rem;
    padding-top: 0;
    display: flex;
    flex-direction: column;
}

.search-container input[b-63hu2xgcub] {
    padding: .5rem 1rem;
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.input-container input[b-63hu2xgcub] {
    background: var(--card-bg-top);
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 400;
}

    .search-container input[b-63hu2xgcub]::placeholder, .input-container input[b-63hu2xgcub]::placeholder {
        color: var(--input-text);
        font-weight: 600;
    }

    .input-container input[b-63hu2xgcub]::placeholder {
        font-weight: 400;
    }

.input-container .archived[b-63hu2xgcub] {
    margin: 6px 8px;
    font-style: italic;
    opacity: .8;
}

.archived.input-container[b-63hu2xgcub] {
    filter: grayscale(1);
    opacity: 0.8;
}

.chat-component[b-63hu2xgcub] {
    position: relative;
    display: flex;
    flex-direction: row;
    border-radius: .9rem;
    background: var(--card-bg);
    width: calc(100% - 1.4rem);
    padding: .3rem;
    transition: box-shadow cubic-bezier(0.44, -0.07, 0.15, 0.9) .15s, outline cubic-bezier(0.44, -0.07, 0.15, 0.9) .15s;
    margin: .3rem 0;
    border: .1rem solid var(--card-border);
    outline: .0rem solid var(--primary);
    cursor: pointer;
}

    .chat-component .chat-details[b-63hu2xgcub] {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        width: calc(100% - 3.5rem);
        margin-left: .5rem;
    }

        .chat-component .chat-details p[b-63hu2xgcub] {
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .chat-component .chat-details .name[b-63hu2xgcub] {
            font-family: var(--font-body);
            font-size: 10px;
            font-weight: 700;
            color: var(--text-dark);
        }

        .chat-component .chat-details .prev[b-63hu2xgcub] {
            font-family: var(--font-body);
            font-size: 12px;
            color: var(--text-dark);
        }

        .chat-component .chat-details .timespan[b-63hu2xgcub] {
            font-family: var(--font-body);
            font-size: 10px;
            font-weight: 500;
            color: var(--text-dark-accent);
        }

    .chat-component .unread[b-63hu2xgcub] {
        position: absolute;
        top: 0rem;
        right: 0rem;
        margin: .5rem;
        transition: all cubic-bezier(0.44, -0.07, 0.15, 0.9) .15s;
        color: var(--text-light);
        font-size: .55rem;
        min-width: .3rem;
        height: .7rem;
        line-height: .7rem;
        text-align: center;
        padding: 0 .20rem;
        font-weight: 500;
        font-family: var(--font-mono);
        border-radius: 1rem;
        background: var(--alert);
        outline: var(--alert50) .2rem solid;
    }

    .chat-component:hover[b-63hu2xgcub] {
        outline: .2rem solid var(--primary);
    }

    .chat-component.selected[b-63hu2xgcub] {
        background: var(--card-bg-top);
        border-color: var(--bg-dark);
        box-shadow: 0px 0.2px 0.2px hsl(var(--shadow-color) / 0.32), 0px 2.4px 2.7px -0.7px hsl(var(--shadow-color) / 0.32), -0.2px 11.8px 24.5px -2.5px hsl(var(--shadow-color) / 0.32);
    }

.message-list[b-63hu2xgcub] {
    flex: 1;
    width: 100%;
    overflow-y: scroll;
}

.message-list-content[b-63hu2xgcub] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-top: auto;
    padding: 1rem 0;
}

.message-list .chat-date[b-63hu2xgcub] {
    width: 100%;
    position: relative;
    text-align: center;
    font-family: var(--font-body);
    color: var(--text-dark80);
    opacity: 0.6;
    font-size: 10px;
    margin-top: .8rem;
    z-index: 1;
}
    .message-list .chat-date.action[b-63hu2xgcub] {
        margin: 0 1rem;
        margin-top: .3rem;
        font-size: 12px;
        max-width: calc(100% - 2rem);
    }

.message-list .profile[b-63hu2xgcub] {
    margin-left: 1.5rem;
    margin-bottom: -.4rem;
    margin-top: .5rem;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: row;
}

    .message-list .profile .name[b-63hu2xgcub] {
        font-family: var(--font-header);
        font-weight: 700;
        font-size: .8rem;
        color: var(--text-dark);
        margin-left: .5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.message[b-63hu2xgcub] {
    --radius-l: 20px;
    --radius-m: 8px;
    --radius-s: 1px;
    position: relative;
    padding: .6rem .9rem;
    font-family: var(--font-body);
    color: var(--text-dark);
    border: .1rem solid var(--card-border);
    border-radius: var(--radius-l) var(--radius-l) var(--radius-l) var(--radius-m);
    background: var(--card-bg-top);
    max-width: 30rem;
    align-self: flex-start;
    margin: 1px 1rem;
    white-space: pre-line; 
    animation: message-b-63hu2xgcub .2s ease-in forwards 1;
}

*:not(.message:not(.sent)) + .message:not(.sent)[b-63hu2xgcub] {
    border-radius: var(--radius-l) var(--radius-l) var(--radius-l) var(--radius-m);
}

.message.sent[b-63hu2xgcub] {
    color: var(--text-light);
    background: var(--primary);
    border-color: var(--primary);
    text-align: right;
    align-self: flex-end;
    border-radius: var(--radius-l) var(--radius-m) var(--radius-m) var(--radius-l);
}

*:not(.message.sent) + .message.sent[b-63hu2xgcub] {
    border-radius: var(--radius-l) var(--radius-l) var(--radius-m) var(--radius-l);
}

.message.lastseen[b-63hu2xgcub] {
    margin-bottom: 10px;
}

.message .message-timestamp[b-63hu2xgcub] {
    height: 0;
    overflow: hidden;
    transition: .2s height cubic-bezier(0.49, 0.77, 0.69, 1.07);
    transition-delay: .5s;
    font-size: .7rem;
    font-weight: 600;
    opacity: .7;
}

.message:hover .message-timestamp[b-63hu2xgcub] {
    height: .7rem;
}

.message .last-seen-list[b-63hu2xgcub] {
    position: absolute;
    display: flex;
    flex-direction: row;
    top: calc(100% - 6px);
    left: 4px;
}

    .message .last-seen-list[b-63hu2xgcub]  .profilePicture {
        margin-left: -4px;
    }

.message.sent .last-seen-list[b-63hu2xgcub] {
    flex-direction: row-reverse;
    left: unset;
    right: 4px;
}


    .message.sent .last-seen-list[b-63hu2xgcub]  .profilePicture {
        margin-left: 0;
        margin-right: -4px;
    }

.message.Image[b-63hu2xgcub] {
    padding: 0px;
}

    .message.Image img[b-63hu2xgcub] {
        height: auto;
        max-height: 50dvh;
        max-width: 100%;
        border-radius: inherit;
        object-fit: contain;
        border-radius: inherit;
        margin-bottom: -0.2rem;
    }

    .message.Image .message-timestamp[b-63hu2xgcub] {
        padding-right: 8px;
    }

    .message.Image:hover .message-timestamp[b-63hu2xgcub] {
        height: 1.2rem;
    }

.message.File[b-63hu2xgcub] {
    padding: 0px;
}

    .message.File .file[b-63hu2xgcub] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        border-radius: inherit;
        background: var(--bg-dark2);
        padding: 16px;
    }

    .message.File span[b-63hu2xgcub] {
        color: var(--primary);
    }

    .message.File .col[b-63hu2xgcub] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    .message.File p[b-63hu2xgcub] {
        margin: 0;
        text-align: left;
        color: var(--primary);
    }

        .message.File p.filename[b-63hu2xgcub] {
            font-size: 12px;
            font-weight: 400;
            color: var(--text-dark80);
        }

.chat-head:not(.skeleton) > div[b-63hu2xgcub] {
    margin-left: 1rem;
}

.online-indicator[b-63hu2xgcub] {
    display: flex;
    align-items: center;
}

    .online-indicator .indicator[b-63hu2xgcub] {
        position: relative;
        height: 8px;
        width: 8px;
        z-index: 1;
        border-radius: 50%;
        margin-right: 5px;
        background-color: var(--green);
    }

        .online-indicator .indicator[b-63hu2xgcub]:after {
            content: " ";
            position: absolute;
            z-index: 0;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            filter: blur(2px);
            background-color: var(--green);
        }

    .online-indicator p[b-63hu2xgcub] {
        margin: 0;
        font-size: 12px;
    }

.skeleton.profilePicture[b-63hu2xgcub] {
    height: 3rem;
    width: 3rem;
    border-radius: .5rem;
    margin-right: .5rem;
    margin-left: 0 !important;
}

.skeleton .row[b-63hu2xgcub] {
    margin: .1rem 0;
}

    .skeleton .row:nth-of-type(1)[b-63hu2xgcub] {
        border-radius: .2rem;
        height: .7rem;
        width: 40%
    }

    .skeleton .row:nth-of-type(2)[b-63hu2xgcub] {
        border-radius: .2rem;
        height: 1rem;
        width: 80%
    }

    .skeleton .row:nth-of-type(3)[b-63hu2xgcub] {
        border-radius: .2rem;
        height: .6rem;
        width: 2rem
    }

.chat-head .row:nth-of-type(1)[b-63hu2xgcub] {
    border-radius: .2rem;
    height: 1.6rem;
    width: min(15rem, 75%);
}

.chat-head .row:nth-of-type(2)[b-63hu2xgcub] {
    border-radius: .2rem;
    height: .6rem;
    width: 5rem;
    margin-top: .3rem;
}

}

@keyframes message-b-63hu2xgcub {
    from {
        transform: translateY(1rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 800px) {
    .chats-container[b-63hu2xgcub] {
        width: 4.4rem;
        margin: 0;
    }

    .chat-component .chat-details[b-63hu2xgcub] {
        display: none;
    }

    .search-container[b-63hu2xgcub] {
        display: none;
    }

    [b-63hu2xgcub] .add-button {
        margin: 0 !important;
    }

    .chat-component.selected[b-63hu2xgcub] {
        outline: .2rem solid var(--primary);
    }
}
/* _content/PowerPlan/Pages/ColleaguesPage.razor.rz.scp.css */

.tabel-header[b-f90c4b51po] {
    padding: 0 1rem !important;
    padding-right: 4rem !important;
    font-family: var(--font-header);
    font-weight: 800;
}

.list[b-f90c4b51po]{
    margin-top: 1rem;
}

.item[b-f90c4b51po] {
    margin: .3rem 0 !important;
    padding: .5rem;
}

.name[b-f90c4b51po] {
    display: flex;
    align-items: center;
}

    .name[b-f90c4b51po]  .profilePicture {
        margin-right: 1rem;
    }

.name[b-f90c4b51po] {
    flex: 2;
    transition: cubic-bezier(0.44, -0.07, 0.15, 0.9) .2s flex;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .name span[b-f90c4b51po] {
        font-size: .8rem;
        opacity: .8;
        margin-left: .5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.number[b-f90c4b51po], .email[b-f90c4b51po], .type[b-f90c4b51po], .position[b-f90c4b51po], .sites[b-f90c4b51po] {
    flex: 1;
    transition: cubic-bezier(0.44, -0.07, 0.15, 0.9) .2s flex;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} 
    .position p[b-f90c4b51po] {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.sites[b-f90c4b51po] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .2rem;
}

.sites[b-f90c4b51po], .email[b-f90c4b51po], .name[b-f90c4b51po] {
    flex: 2;
}

.open .type[b-f90c4b51po], .open .email[b-f90c4b51po] {
    flex: 0;
}

.color-swatch[b-f90c4b51po] {
    height: 1rem;
    width: 1rem;
    border-radius: .2rem;
    margin: .2rem 0;
    margin-right: .5rem;
}

.employee-item h3[b-f90c4b51po], .employee-item p[b-f90c4b51po] {
    margin: 0;
}

.search-container[b-f90c4b51po] {
    position: relative;
}

    .search-container span[b-f90c4b51po] {
        font-size: 1.4rem;
        color: var(--input-text);
        position: absolute;
        margin: 1rem;
    }

    .search-container input[b-f90c4b51po] {
        border: none;
        font-size: 1.2rem;
        width: calc(100% - 5.2rem);
        display: flex;
        align-items: center;
        flex-direction: row;
        background: var(--card-bg);
        color: var(--text-dark);
        font-family: var(--font-header);
        font-weight: 700;
        padding: .8rem 1.5rem;
        padding-left: 3.5rem;
        border-radius: 1rem;
        border: .1rem solid var(--card-border);
        transition: box-shadow cubic-bezier(0.44, -0.07, 0.15, 0.9) .15s;
    }

        .search-container input[b-f90c4b51po]::placeholder {
            color: var(--input-text);
            font-weight: 600;
            font-size: 1rem;
        }

        .search-container input:active[b-f90c4b51po],
        .search-container input:focus[b-f90c4b51po] {
            box-shadow: 0px 0.2px 0.2px hsl(var(--shadow-color) / 0.32), 0px 2.4px 2.7px -0.7px hsl(var(--shadow-color) / 0.32), -0.2px 11.8px 24.5px -2.5px hsl(var(--shadow-color) / 0.32);
            outline: none;
        }
/* _content/PowerPlan/Pages/ComponentsPage.razor.rz.scp.css */
/* ============================================
   COMPONENTS PAGE - MODERN REDESIGN
   ============================================ */

/* Page Container */
.docs-page[b-jr69m28ze5] {
	position: relative;
	width: 100%;
	height: calc(100vh - var(--devbar-height, 0px) - 80px);
	overflow: hidden;
}

/* ============================================
   GRID BACKGROUND PATTERN
   ============================================ */
.grid-background[b-jr69m28ze5] {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	--c: var(--primary50);
	background-image: linear-gradient(var(--c) 1px, transparent 1px), linear-gradient(90deg, var(--c) 1px, transparent 1px);
	background-size: 40px 40px;
	background-position: center center;
	mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
	opacity: 0.25;
}

/* ============================================
   QUICK NAVIGATION (Right Side Dots)
   ============================================ */
.quick-nav[b-jr69m28ze5] {
	position: fixed;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	padding: 0.75rem 0.5rem;
	background: var(--card-bg-top80);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 2rem;
	border: 1px solid var(--card-border);
	box-shadow: var(--shadow-medium);
}

.quick-nav-inner[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
}

.quick-nav-dot[b-jr69m28ze5] {
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--thumb-color);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.25s var(--ease);
}

	.quick-nav-dot:hover[b-jr69m28ze5] {
		background: var(--primary50);
		transform: scale(1.2);
	}

	.quick-nav-dot.active[b-jr69m28ze5] {
		background: var(--primary);
		box-shadow: 0 0 0 4px var(--primary20);
		transform: scale(1.1);
	}

.quick-nav-tooltip[b-jr69m28ze5] {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	padding: 0.5rem 0.75rem;
	background: var(--card-bg-top);
	border: 1px solid var(--card-border);
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-family: var(--font-body);
	font-weight: 500;
	color: var(--text-dark);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	box-shadow: var(--shadow-small);
	pointer-events: none;
}

.quick-nav-dot:hover .quick-nav-tooltip[b-jr69m28ze5] {
	opacity: 1;
	visibility: visible;
}

/* ============================================
   MAIN LAYOUT
   ============================================ */
.docs-container[b-jr69m28ze5] {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 0;
	height: 100%;
	overflow: hidden;
}

/* ============================================
   SIDEBAR
   ============================================ */
.docs-sidebar[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	height: calc(100% - 0.5rem);
	padding: 1rem;
	background: var(--card-bg-top);
	border-right: 1px solid var(--card-border);
	overflow-y: auto;
	border-radius: 20px;
	box-sizing: border-box;
}

.sidebar-header[b-jr69m28ze5] {
	display: flex;
	align-items: center;
	gap: 0.75rem; 
	margin-bottom: 1.25rem; 
}

.sidebar-logo[b-jr69m28ze5] {
	font-size: 2rem;
	color: var(--primary);
	background: var(--primary10);
	padding: 0.5rem;
	border-radius: 0.75rem;
}

.sidebar-title h1[b-jr69m28ze5] {
	font-family: var(--font-header);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--text-dark);
	margin: 0;
	line-height: 1.2;
}

.sidebar-subtitle[b-jr69m28ze5] {
	font-size: 0.75rem;
	color: var(--text-dark-accent);
	font-weight: 500;
}

/* Search Box */
.sidebar-search[b-jr69m28ze5] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 0.75rem;
	margin-bottom: 1.25rem;
	transition: all 0.2s ease;
}

	.sidebar-search:focus-within[b-jr69m28ze5] {
		border-color: var(--primary50);
		box-shadow: 0 0 0 3px var(--primary10);
	}

	.sidebar-search span[b-jr69m28ze5] {
		font-size: 1.25rem;
		color: var(--text-dark-accent);
	}

	.sidebar-search input[b-jr69m28ze5] {
		flex: 1;
		border: none;
		background: transparent;
		font-family: var(--font-body);
		font-size: 0.875rem;
		color: var(--text-dark);
		outline: none;
	}

		.sidebar-search input[b-jr69m28ze5]::placeholder {
			color: var(--text-dark-mute);
		}

/* Navigation Links */
.sidebar-nav[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

.docs-nav-link[b-jr69m28ze5] {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-dark-accent);
	text-decoration: none;
	border-radius: 0.75rem;
	transition: all 0.2s ease;
	overflow: hidden;
}

	.docs-nav-link:hover[b-jr69m28ze5] {
		background: var(--bg-dark);
		color: var(--text-dark);
	}

	.docs-nav-link.active[b-jr69m28ze5] {
		background: var(--primary10);
		color: var(--primary);
	}

.nav-indicator[b-jr69m28ze5] {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: var(--primary);
	border-radius: 0 2px 2px 0;
	transition: height 0.2s ease;
}

.docs-nav-link.active .nav-indicator[b-jr69m28ze5] {
	height: 60%;
}

.nav-icon[b-jr69m28ze5] {
	font-size: 1.25rem;
	color: var(--primary50);
	transition: color 0.2s ease;
}

.docs-nav-link:hover .nav-icon[b-jr69m28ze5],
.docs-nav-link.active .nav-icon[b-jr69m28ze5] {
	color: var(--primary);
}

.nav-text[b-jr69m28ze5] {
	flex: 1;
}

.nav-count[b-jr69m28ze5] {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.2rem 0.5rem;
	background: var(--bg-dark);
	border-radius: 1rem;
	color: var(--text-dark-mute);
}

.docs-nav-link.active .nav-count[b-jr69m28ze5] {
	background: var(--primary20);
	color: var(--primary);
}

/* Sidebar Footer */
.sidebar-footer[b-jr69m28ze5] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	margin-top: 1rem;
	border-top: 1px solid var(--card-border);
}

.version-badge[b-jr69m28ze5] {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	background: var(--primary10);
	color: var(--primary);
	border-radius: 0.5rem;
}

.footer-text[b-jr69m28ze5] {
	font-size: 0.7rem;
	color: var(--text-dark-mute);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.docs-content[b-jr69m28ze5] {
	position: relative;
	overflow-y: auto;
	scroll-behavior: smooth;
	padding: 2rem 3rem 4rem;
	padding-right: 5rem; /* Space for quick nav */
}

/* Page Header */
.docs-header[b-jr69m28ze5] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 2.5rem; 
}

.header-content h1[b-jr69m28ze5] {
	font-family: var(--font-header);
	font-size: 2.5rem;
	font-weight: 900;
	color: var(--text-dark);
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
}

.header-content p[b-jr69m28ze5] {
	font-size: 1rem;
	color: var(--text-dark-accent);
	margin: 0;
}

.header-actions[b-jr69m28ze5] {
	display: flex;
	gap: 0.75rem;
}

/* ============================================
   SECTIONS
   ============================================ */
.docs-section[b-jr69m28ze5] {
	margin-bottom: 3rem;
	scroll-margin-top: 2rem;
}

.section-header[b-jr69m28ze5] {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.section-icon[b-jr69m28ze5] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: linear-gradient(135deg, var(--primary), var(--primary-accent));
	border-radius: 0.875rem;
	flex-shrink: 0;
	box-shadow: 0 3px 8px var(--primary20), inset 0 0 16px var(--bg-dark2);
}

	.section-icon span[b-jr69m28ze5] {
		font-size: 1.5rem;
		color: var(--text-light);
	}

.section-info h2[b-jr69m28ze5] {
	font-family: var(--font-header);
	font-size: 1.75rem;
	font-weight: 900;
	color: var(--text-dark);
	margin: 0 0 0.25rem;
}

.section-info p[b-jr69m28ze5] {
	font-size: 0.9rem;
	color: var(--text-dark-accent);
	margin: 0;
}

/* ============================================
   COMPONENT GROUPS & CARDS
   ============================================ */
.component-group[b-jr69m28ze5] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
	gap: 1.25rem;
}

.component-card[b-jr69m28ze5] {
	background-color: var(--card-bg-top);
	background-image: radial-gradient(var(--bg-dark2) 0.65px, var(--card-bg-top) 0.65px);
	background-size: 13px 13px;
	border-radius: 1.25rem;
	overflow: hidden;
	box-shadow: inset 0 0 600px 30px var(--card-bg-top); 
	transition: all 0.25s ease;
}

	.component-card.full-width[b-jr69m28ze5] {
		grid-column: 1 / -1;
	}
	.component-card.half-width[b-jr69m28ze5] {
		grid-column: span 1;
	}

.card-header[b-jr69m28ze5] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	background: linear-gradient(180deg, var(--card-bg-top), transparent);
}

	.card-header h3[b-jr69m28ze5] {
		font-family: var(--font-header);
		font-size: 1rem;
		font-weight: 800;
		color: var(--input-text);
		margin: 0;
	}

.component-count[b-jr69m28ze5] {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-dark-accent2);
	background: var(--bg-dark);
	padding: 0.25rem 0.625rem;
	border-radius: 1rem;
}

.card-content[b-jr69m28ze5] {
	padding: 2.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}

	.card-content.row[b-jr69m28ze5] {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.card-content.centered[b-jr69m28ze5] {
		align-items: center;
		justify-content: center;
	}

	.card-content.column[b-jr69m28ze5] {
		flex-direction: column;
		gap: 1.5rem;
		align-items: center;
	}

/* ============================================
   INPUT SPECIFIC LAYOUTS
   ============================================ */
.input-grid[b-jr69m28ze5] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
}

.datetime-grid[b-jr69m28ze5] {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: start;
}

.datetime-inputs[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.calendar-preview[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--card-bg);
	border-radius: 1rem;
	padding: 0.5rem;
}

.textarea-demo[b-jr69m28ze5] {
	max-width: 400px;
}

.selection-grid[b-jr69m28ze5] {
	display: flex;
	gap: 3rem;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}

.selection-item[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.selection-label[b-jr69m28ze5] {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-dark-accent);
}

.selection-controls[b-jr69m28ze5] {
	display: flex;
	gap: 1rem;
	align-items: center;
}

/* ============================================
   ADVANCED INPUT LAYOUTS
   ============================================ */
.pin-demo[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.hint-text[b-jr69m28ze5] {
	font-size: 0.875rem;
	color: var(--text-dark-accent);
	margin: 0;
}

	.hint-text strong[b-jr69m28ze5] {
		font-family: var(--font-mono);
		color: var(--primary);
		background: var(--primary10);
		padding: 0.125rem 0.375rem;
		border-radius: 0.25rem;
	}

.success-indicator[b-jr69m28ze5] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--accept-text);
	font-weight: 600;
	font-size: 0.9rem;
}

	.success-indicator span[b-jr69m28ze5] {
		font-size: 1.25rem;
	}

.language-grid[b-jr69m28ze5] {
	display: flex;
	gap: 3rem;
	flex-wrap: wrap; 
	justify-content: center;
}

.language-item[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: relative;
}

.item-label[b-jr69m28ze5] {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-dark-mute); 
	letter-spacing: 0.5px;
}

.dropdown-demo[b-jr69m28ze5] {
	max-width: 300px;
}

/* ============================================
   AVATAR LAYOUTS
   ============================================ */
.avatar-grid[b-jr69m28ze5] {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.avatar-item[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.avatar-label[b-jr69m28ze5] {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-dark-mute);
	letter-spacing: 0.5px;
}

.personal-card-demo[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
}

.hue-control[b-jr69m28ze5] {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

	.hue-control label[b-jr69m28ze5] {
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--text-dark-accent);
	}

/* Help Icon */
.help-icon[b-jr69m28ze5] {
	font-size: 2rem;
	color: var(--text-dark-mute);
	cursor: help;
	transition: color 0.2s ease;
}

	.help-icon:hover[b-jr69m28ze5] {
		color: var(--primary);
	}

/* ============================================
   COLOR PALETTE
   ============================================ */
.color-palette[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
}

.color-set[b-jr69m28ze5] {
	background: var(--card-bg);
	border-radius: 1rem;
	padding: 1rem;
	border: 1px solid var(--card-border);
}

.color-header[b-jr69m28ze5] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}

.color-name[b-jr69m28ze5] {
	font-weight: 700;
	font-size: 1rem;
	color: var(--main);
}

.color-id[b-jr69m28ze5] {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--text-dark-mute);
	background: var(--bg-dark);
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
}

.color-swatches[b-jr69m28ze5] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}

.swatch[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem 0.5rem;
	border-radius: 0.75rem;
	min-height: 4rem;
	text-align: center;
}

	.swatch span[b-jr69m28ze5] {
		font-weight: 600;
		font-size: 0.75rem;
		margin-bottom: 0.25rem;
	}

	.swatch code[b-jr69m28ze5] {
		font-family: var(--font-mono);
		font-size: 0.65rem;
		opacity: 0.8;
	}

	.swatch.main[b-jr69m28ze5] {
		color: var(--text-light);
	}

	.swatch.soft[b-jr69m28ze5] {
		color: var(--text-dark);
	}

	.swatch.glow[b-jr69m28ze5] {
		background: var(--soft);
		color: var(--main);
		box-shadow: 0 4px 20px var(--main);
	}

	.swatch.gradient[b-jr69m28ze5] {
		color: var(--text-light);
	}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.back-to-top[b-jr69m28ze5] {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 99;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: var(--text-light);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: var(--shadow-medium);
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
	transition: all 0.3s ease;
}

	.back-to-top:hover[b-jr69m28ze5] {
		background: var(--primary-hover);
		transform: translateY(-2px);
		box-shadow: var(--shadow-large);
	}

	.back-to-top.visible[b-jr69m28ze5] {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.back-to-top span[b-jr69m28ze5] {
		font-size: 1.5rem;
	}

/* ============================================
   UTILITY CLASSES (Preserved)
   ============================================ */
.gap-1[b-jr69m28ze5] {
	gap: 0.5rem;
}

.gap-2[b-jr69m28ze5] {
	gap: 1rem;
}

.flex[b-jr69m28ze5] {
	display: flex;
	flex-wrap: wrap;
}

.flex-c[b-jr69m28ze5] {
	display: flex;
	flex-direction: column;
}

.w-20[b-jr69m28ze5] {
	width: 20rem;
	flex: unset;
}

/* Color Preview (for dropdown) */
.color[b-jr69m28ze5] {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: 2px solid;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1200px) {
	.component-group[b-jr69m28ze5] {
		grid-template-columns: 1fr;
	}

	.quick-nav[b-jr69m28ze5] {
		display: none;
	}

	.docs-content[b-jr69m28ze5] {
		padding-right: 2rem;
	}

	.back-to-top[b-jr69m28ze5] {
		right: 2rem;
	}
}

@media (max-width: 900px) {
	.docs-container[b-jr69m28ze5] {
		grid-template-columns: 1fr;
	}

	.docs-sidebar[b-jr69m28ze5] {
		display: none;
	}

	.docs-content[b-jr69m28ze5] {
		padding: 1.5rem;
	}

	.datetime-grid[b-jr69m28ze5] {
		grid-template-columns: 1fr;
	}

	.color-swatches[b-jr69m28ze5] {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
.docs-content[b-jr69m28ze5]::-webkit-scrollbar,
.docs-sidebar[b-jr69m28ze5]::-webkit-scrollbar {
	width: 8px;
}

.docs-content[b-jr69m28ze5]::-webkit-scrollbar-track,
.docs-sidebar[b-jr69m28ze5]::-webkit-scrollbar-track {
	background: transparent;
}

.docs-content[b-jr69m28ze5]::-webkit-scrollbar-thumb,
.docs-sidebar[b-jr69m28ze5]::-webkit-scrollbar-thumb {
	background: var(--thumb-color);
	border-radius: 4px;
}

	.docs-content[b-jr69m28ze5]::-webkit-scrollbar-thumb:hover,
	.docs-sidebar[b-jr69m28ze5]::-webkit-scrollbar-thumb:hover {
		background: var(--thumb-color-active);
	}
/* _content/PowerPlan/Pages/Confirmations.razor.rz.scp.css */
/* Layout */
.page-container[b-t8fze6qy1q] {
    padding: 0;
    padding-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.full-height[b-t8fze6qy1q] {
    min-height: 60vh;
}

/* Controls / Header */
.controlls[b-t8fze6qy1q] {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    z-index: 25;
}

    .controlls .sep[b-t8fze6qy1q] {
        width: 1px;
        height: 2rem;
        background: var(--bg-darker);
        margin: 0 0.5rem;
    }

    .controlls .buttons[b-t8fze6qy1q] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

/* Text Utilities */
.text-good[b-t8fze6qy1q] {
    color: var(--accept-text);
}

.text-bad[b-t8fze6qy1q] {
    color: var(--warning-text);
}

.text-warning[b-t8fze6qy1q] {
    color: var(--accent-text);
}

.sub-text[b-t8fze6qy1q] {
    font-size: 0.8rem;
    color: var(--text-dark-mute);
    display: block;
}

.bold[b-t8fze6qy1q] {
    font-weight: 700;
    color: var(--text-dark);
}

[b-t8fze6qy1q] .truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: normal;
}

/* Flex Utilities */
.flex-row[b-t8fze6qy1q] {
    display: flex;
    flex-direction: row;
}

.flex-col[b-t8fze6qy1q] {
    display: flex;
    flex-direction: column;
}

.gap-1[b-t8fze6qy1q] {
    gap: 0.5rem;
}

.gap-2[b-t8fze6qy1q] {
    gap: 1rem;
}

.align-center[b-t8fze6qy1q] {
    align-items: center;
}

.align-end[b-t8fze6qy1q] {
    align-items: flex-end;
}

[b-t8fze6qy1q] .smart-table .st-row {
    padding: 0.4rem 0rem;
    cursor: pointer; /* Interaction Cue */
    overflow: unset;
}
[b-t8fze6qy1q] .smart-table .st-cell {
    overflow: unset;
}
[b-t8fze6qy1q] .smart-table .theme-input{


}
[b-t8fze6qy1q] .smart-table .profilePicture:not(.small) {
    --s: 2.8rem;
    --bdr: .5rem;
    --m: .4rem;
}
     
    [b-t8fze6qy1q] .st-row:hover:not(.editing) {
        background: var(--bg-dark50);
    }
     
    [b-t8fze6qy1q] .st-header {
        background: var(--bg);
        border: none;
    }

[b-t8fze6qy1q] .smart-table .st-group-header {
    margin-bottom: 0;
    margin-left: 1rem;
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0;
}

    [b-t8fze6qy1q] .bold {
        font-family: var(--font-header);
    }

[b-t8fze6qy1q] .actions-col {
    justify-content: flex-end;
}
/* Badges */
.delta-badge[b-t8fze6qy1q] {
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 800;
}

    .delta-badge.more[b-t8fze6qy1q] {
        background: var(--bg-dark);
        color: var(--text-dark);
    }

    .delta-badge.less[b-t8fze6qy1q] {
        background: var(--card-bg-warning);
        color: var(--warning-text);
    }

.type-badge[b-t8fze6qy1q] {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--bg-dark);
}
    /* Specific Badge Colors based on Enum.ToString().ToLower() */
    .type-badge.sick[b-t8fze6qy1q] {
        background: #ffebee;
        color: #c62828;
    }

    .type-badge.vacation[b-t8fze6qy1q] {
        background: #e8f5e9;
        color: #2e7d32;
    }

    [b-t8fze6qy1q] span.warning{
        color: var(--warning);
        font-size: 1rem;
    }

/* History Banner */
.history-header-banner[b-t8fze6qy1q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    color: var(--text-dark);
    border-radius: 1.5rem;
    background: var(--card-bg-top);
    margin-bottom: 1rem;
}
    .history-header-banner .row[b-t8fze6qy1q] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .history-header-banner .material-icons[b-t8fze6qy1q] {
        color: var(--primary);
        font-size: 1.5rem;
        padding: .5rem;
        border-radius: 50%;
        background: var(--bg-dark);
    }

    .history-header-banner h2[b-t8fze6qy1q] {
        margin: 0;
        font-size: 1.8rem;
        font-weight: 800;
    }

    .history-header-banner p[b-t8fze6qy1q] {
        margin: 0;
        font-size: 1rem;
        font-weight: 400;
        color: var(--text-dark-mute);

    }

/* Status Pills for History */
.status-pill[b-t8fze6qy1q] {
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
}

    .status-pill.approved[b-t8fze6qy1q] {
        background: #e8f5e9;
        color: #2e7d32;
        border: 1px solid #c8e6c9;
    }

    .status-pill.rejected[b-t8fze6qy1q] {
        background: #ffebee;
        color: #c62828;
        border: 1px solid #ffcdd2;
    }

/* Ensure Profile Pictures in small variant look correct */
[b-t8fze6qy1q] .profilePicture.small {
    --s: 2rem;
    --bdr: 0.2rem;
}

.pause[b-t8fze6qy1q] {
    font-family: var(--font-mono);
}
.pause.zero[b-t8fze6qy1q] {
    opacity: 0.5;
}

.time-off-visualization[b-t8fze6qy1q] {
    padding: 0rem;
    border-radius: 1.5rem;
    background: var(--card-bg-top);
    margin-bottom: 1rem;
    z-index: 1;
}
    .time-off-visualization .header[b-t8fze6qy1q] {
        padding: 1rem;
        padding-bottom: 0rem;
        margin-bottom: 0.5rem;
        font-weight: 900;
        font-family: var(--font-header);
        color: var(--input-text);
        display: flex;
    }
    .time-off-visualization[b-t8fze6qy1q]  .timeoff-viz-container {
        padding-top: 0rem;
        margin-bottom: 0rem;
    }

.timeOffVizPage[b-t8fze6qy1q] {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.timeOffVizPage[b-t8fze6qy1q]  button {
    color: var(--text-dark-accent3);
}

.pending-employee-text[b-t8fze6qy1q]{
    color: green;
    margin: auto 0;
    font-family: var(--font-header);
    font-weight: 800;
    color: var(--text-dark-accent);
}
/* _content/PowerPlan/Pages/DailyOverview.razor.rz.scp.css */
.empty-label-container[b-ngmsxai8u2] {
    --x-bg: var(--bg-dark);
    --x-color: var(--bg-dark);
    height: 8rem;
}

.row[b-ngmsxai8u2] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

[b-ngmsxai8u2] .expand {
    transform: rotate(45deg);
}

.card.daily-roster[b-ngmsxai8u2] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: fit-content;
    flex: unset;
    max-height: calc(100% - 11rem);
    border: none;
    background: var(--bg-dark);
    min-width: min(calc(100% - 8rem), 25rem);
    overflow: hidden;
    padding: 16px 32px;
    border: .1rem solid transparent;
    transition: ease .2s box-shadow, ease .2s margin, ease .2s padding, ease .2s max-height, ease .2s background, ease .2s height, ease .2s width;
}

.card.expanded[b-ngmsxai8u2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    max-height: 100%;
    margin: 8px 16px 16px;
    border-radius: 24px;
    background: var(--card-bg);
    border: .1rem solid var(--card-border);
    box-shadow: var(--shadow-large);
}

    .card.expanded.page[b-ngmsxai8u2] {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 5;
        max-height: unset;
        margin: 0;
        border-radius: 0;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }

.card .content[b-ngmsxai8u2] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card.expanded .content[b-ngmsxai8u2] {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.card .message-container[b-ngmsxai8u2] {
    background: var(--bg-dark);
    border-radius: 1rem;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: ease .2s margin, ease .2s max-height;
}

.card.expanded .message-container[b-ngmsxai8u2] {
    max-height: 25rem;
    margin-bottom: 8px;
    min-height: 5rem;
}

.card .message-container .message[b-ngmsxai8u2] {
    margin: 1rem;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    max-height: 100%;
}

    .card .message-container .message span[b-ngmsxai8u2] {
        font-size: 1.3rem;
        padding: 0px;
        margin-right: 4px;
        opacity: .8;
    }

    .card .message-container .message h2[b-ngmsxai8u2] {
        margin: 0;
        margin-top: 14px;
        margin-bottom: 4px;
        font-size: 1.4rem;
        font-weight: 900;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: var(--primary50);
    }

    .card .message-container .message p[b-ngmsxai8u2] {
        white-space: pre-line;
        margin: 0;
    }

body[data-theme='dark'] .card .message-container .message h2[b-ngmsxai8u2] {
    color: var(--thumb-color2);
}

body[data-theme='dark'] .card .message-container .message span[b-ngmsxai8u2] {
    color: var(--primary);
}

.daily-roster .card-head[b-ngmsxai8u2] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 2.4rem;
    transition: ease .5s height;
}

.daily-roster.expanded .card-head[b-ngmsxai8u2] {
    height: 3rem;
}

.daily-roster .card-head h4[b-ngmsxai8u2] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--bg-dark3);
    transition: ease .5s all;
}

body[data-theme='dark'] .daily-roster .card-head h4[b-ngmsxai8u2] {
    color: var(--text-dark-accent);
}

.daily-roster.expanded .card-head h4[b-ngmsxai8u2] {
    margin: 12px 8px 12px 0;
    font-size: 1.7rem;
    font-weight: 900;
}

.daily-roster.expanded.page .card-head h4[b-ngmsxai8u2] {
    margin: 12px 8px 12px 0;
}

.daily-roster .card-head a[b-ngmsxai8u2] {
    color: var(--text-dark-accent);
    font-size: 14px;
    font-family: var(--font-body);
}

.daily-roster .card-head[b-ngmsxai8u2]  button {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: .2rem;
    outline-width: 2px;
}

    .daily-roster .card-head[b-ngmsxai8u2]  button span {
        color: var(--bg-dark3);
        margin: auto;
        font-weight: 900;
    }

    .daily-roster .card-head[b-ngmsxai8u2]  button:hover {
        background: var(--bg-dark2);
    }

    .daily-roster .card-head[b-ngmsxai8u2]  button.today span {
        font-size: .9rem;
        padding: 0.15rem;
        font-weight: 600;
    }

.daily-roster .card-head p[b-ngmsxai8u2] {
    margin: 0;
    margin-left: .5rem;
    color: var(--text-dark);
    opacity: .5;
    font-family: var(--font-header);
    font-weight: 800;
    font-size: 12px;
}


.daily-roster[b-ngmsxai8u2]  .site {
    transition: ease .2s all;
}
    .daily-roster[b-ngmsxai8u2]  .site h3 {
        transition: ease .2s font-size, ease .2s color;
    }
.daily-roster[b-ngmsxai8u2]  .site-tag {
    transition: ease .2s all;
}
    .daily-roster[b-ngmsxai8u2]  .site-tag .icon {
        transition: ease .2s font-size, ease .2s color;
    }


.daily-roster:not(.expanded)[b-ngmsxai8u2]  .site {
    margin-bottom: 0.2rem;
}
.daily-roster:not(.expanded)[b-ngmsxai8u2]  .site h3 {
    font-size: 1rem;
}
.daily-roster:not(.expanded)[b-ngmsxai8u2]  .site-tag {
    --s: 1.4rem;
}
.daily-roster:not(.expanded)[b-ngmsxai8u2]  .site-tag .icon{
    font-size: 12px;
}

.daily-roster:not(.expanded)[b-ngmsxai8u2]  .timeslot-container,
.daily-roster:not(.expanded)[b-ngmsxai8u2]  .timeslot-container-bg {
    --bc: var(--bg-dark2-50);
}

.toolbar[b-ngmsxai8u2] {
    display: flex;
    flex-direction: row;
    gap: 4px;
    overflow: hidden;
    max-height: 0;
    animation: none;
}

.expanded .toolbar[b-ngmsxai8u2] {
    max-height: 32px;
    animation: ease .5s toolbar-open-b-ngmsxai8u2 forwards 1;
    z-index: 15;
}

@keyframes toolbar-open-b-ngmsxai8u2 {
    0% {
        max-height: 0rem;
        overflow: hidden;
    }

    99% {
        overflow: hidden;
    }

    100% {
        max-height: 2rem;
        overflow: visible;
    }
}

h3.tasks-header[b-ngmsxai8u2] {
    font-size: 1rem;
    font-weight: 800;
    margin: 8px;
    margin-top: 16px;
    transition: ease .2s all;
    color: var(--input-text);
}

body[data-theme='dark'] h3.tasks-header[b-ngmsxai8u2] {
    color: var(--text-dark50);
}

.expanded h3.tasks-header[b-ngmsxai8u2] {
    font-size: 1.2rem;
    font-weight: 900;
}

.task-overview[b-ngmsxai8u2] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    max-height: 2rem;
    gap: 16px;
    transition: ease .2s max-height;
}

.expanded .task-overview[b-ngmsxai8u2] {
    max-height: 0rem;
}

.task-overview .tasks-div[b-ngmsxai8u2] {
    display: flex;
    gap: 8px;
    max-height: 2rem;
    align-items: center;
    background: var(--bg);
    border-radius: 1rem;
    padding: 0rem .3rem 0rem .8rem;
}

    .task-overview .tasks-div span[b-ngmsxai8u2] {
        background: var(--bg-darker);
        color: var(--input-text);
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1.60rem;
        min-width: 1.6rem;
        font-size: 0.9rem;
        border-radius: 1rem;
    }

body[data-theme='dark'] .task-overview .tasks-div span[b-ngmsxai8u2] {
    background: var(--card-bg-top);
    color: var(--text-dark-accent);
}

.task-overview .tasks-div.past span[b-ngmsxai8u2] {
    color: var(--warning) !important;
    background-color: var(--warning-mute) !important;
}

.tasks[b-ngmsxai8u2] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    transition: ease .5s max-height;
}

.card.expanded.page .tasks[b-ngmsxai8u2] {
    margin: 0 16px 0 0;
}

.expanded .tasks[b-ngmsxai8u2] {
    overflow: visible;
    max-height: 60%;
}

.tasks .empty-label-container[b-ngmsxai8u2] {
    border-radius: 16px;
    margin-top: 12px;
}

.tasks .task-lists[b-ngmsxai8u2] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
}

    .tasks .task-lists .earlier-tasks[b-ngmsxai8u2],
    .tasks .task-lists .next-tasks[b-ngmsxai8u2] {
        display: flex;
        flex-direction: column;
        background: var(--bg);
        padding: 4px;
        border-radius: 16px;
        flex: 1;
        height: fit-content;
        max-width: 40%;
        min-width: 15rem;
    }

    .tasks .task-lists .active-tasks[b-ngmsxai8u2] {
        display: flex;
        flex-direction: column;
        flex: 2;
        min-width: 15rem;
    }

.active-tasks-done[b-ngmsxai8u2] {
    --m: 32px;
    --h: 180px;
    height: calc(var(--h) - (2 * var(--m)));
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--bg-dark);
    padding: 0;
    padding-right: 1rem;
    border-radius: 1rem;
    overflow: visible;
    margin-bottom: 0.5rem;
}

    .active-tasks-done lottie-player[b-ngmsxai8u2] {
        min-height: var(--h);
        min-width: var(--h);
        margin-left: calc(-1 * var(--m));
        margin-right: calc(-1 * var(--m));
    }

    .active-tasks-done h2[b-ngmsxai8u2] {
        font-size: 1.2rem;
        font-weight: 900;
        color: var(--text-dark-accent);
    }
        .active-tasks-done h2 span[b-ngmsxai8u2] {
            font-weight: 700;
            color: var(--input-text);
            opacity: 0.8;
        }

    .tasks .task-lists h4[b-ngmsxai8u2] {
        margin: 0;
        font-weight: 900;
        margin: 8px 8px 0;
        color: var(--input-text);
    }


    .tasks .task-lists .todos[b-ngmsxai8u2] {
        display: flex;
        flex-direction: column;
    }

        .tasks .task-lists .todos h5[b-ngmsxai8u2] {
            color: var(--primary);
            margin: 0;
            margin: 4px 8px 0;
        }

.tasks .historic-status[b-ngmsxai8u2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: var(--warning-mute);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 8px;
}

    .tasks .historic-status .icon[b-ngmsxai8u2] {
        padding: 7px;
        border-radius: 8px;
        background: var(--warning20);
        display: flex;
    }

        .tasks .historic-status .icon img[b-ngmsxai8u2] {
            height: 14px;
        }

    .tasks .historic-status .info[b-ngmsxai8u2] {
        flex: 1;
    }

        .tasks .historic-status .info p[b-ngmsxai8u2] {
            margin: 0;
            font-size: 0.8rem;
        }

            .tasks .historic-status .info p span[b-ngmsxai8u2] {
                color: var(--worse);
                font-weight: 800;
                font-family: var(--font-header);
            }

    .tasks .historic-status.all-complete[b-ngmsxai8u2] {
        background: var(--card-bg-top);
    }

        .tasks .historic-status.all-complete .icon[b-ngmsxai8u2] {
            background: var(--accept-mute);
        }

.tasks .task-lists .position-tasks[b-ngmsxai8u2] {
    flex: 1;
}
/* _content/PowerPlan/Pages/Debug.razor.rz.scp.css */
.elm[b-f7pyh8dedg]{
    display: flex;
    flex-direction: column;
    padding: .7rem;
    gap: 0.2rem;
    border-radius: 1rem;
    background: var(--bg-dark)
}
.elm .row[b-f7pyh8dedg]{
    display: flex;
    flex-direction: row;
    gap: 6px;
}
label[b-f7pyh8dedg]{
    font-family: var(--font-header);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--input-text);
}
/* _content/PowerPlan/Pages/DocumentsPage.razor.rz.scp.css */
.documents-page-container[b-7vqjti8mqc] {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 7rem - var(--devbar-height));
    padding: 1rem;
}

.file-tree-panel[b-7vqjti8mqc] {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--bg-dark);
    border: none;
    border-radius: 16px; 
}



.tree-header[b-7vqjti8mqc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem 0rem 1rem;
}

    .tree-header h3[b-7vqjti8mqc] {
        margin: 0;
        font-size: 1rem;
        color: var(--text-dark);
        font-weight: 900;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .tree-header h3 span[b-7vqjti8mqc] {
            --s: 20px;
            height: var(--s);
            width: var(--s);
            max-height: var(--s);
            max-width: var(--s);
            min-height: var(--s);
            min-width: var(--s) !important;
            background: var(--primary50);
            color: var(--text-light);
            border-radius: 50%;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .tree-header[b-7vqjti8mqc]  .new-button button {
        padding: .4rem .8rem;
    }
    .tree-header[b-7vqjti8mqc]  button.add-button {
        padding: .4rem .8rem;
        background: var(--bg-dark350);
    }

.tree-header.actions[b-7vqjti8mqc] { 
    justify-content: flex-start;
    gap: 0.2rem;
    padding-top: 0;
}

    .tree-header.actions[b-7vqjti8mqc]  .hurtig_button.Small.Default {
        background: var(--bg-dark2-50);
        padding: 4px 10px 4px 8px;
        color: var(--input-text);
    }

    .tree-content[b-7vqjti8mqc] {
        overflow-y: auto;
        padding: 0rem 4px 4px;
        margin: 8px;
        border-radius: 8px;
        background: var(--card-bg-top);
    }

[b-7vqjti8mqc] .add-button {
    gap: 4px;
    padding: 8px 15px 8px 10px;
    font-weight: 800;
}

    [b-7vqjti8mqc] .add-button span {
        font-weight: inherit;
    }

[b-7vqjti8mqc] .search {
    padding: 0.425rem 0rem 0.425rem 2.5rem !important;
    margin: 0.2rem 0.6rem 0 !important;
    width: calc(100% - 3.8rem) !important;
}
[b-7vqjti8mqc] .input-container:not(.search) span {
    top: 0.7rem;
    left: 1.2rem;
}

    /* Individual File Tree Item Styling */
    .file-tree-item-wrapper[b-7vqjti8mqc] {
        display: flex;
        flex-direction: column;
    }

.file-tree-item[b-7vqjti8mqc] {
    display: flex;
    align-items: center;
    padding: .4rem .5rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color .2s ease;
    user-select: none;
    gap: .5rem;
}

    .file-tree-item:hover[b-7vqjti8mqc] {
        background-color: var(--bg-darker50);
    }

    .file-tree-item.selected[b-7vqjti8mqc] {
        background-color: var(--primary20);
    }

        .file-tree-item.selected .item-name[b-7vqjti8mqc] {
            font-weight: 600;
            color: var(--primary);
        }

    .file-tree-item .drag-handle[b-7vqjti8mqc] {
        cursor: grab;
        color: var(--input-text);
        opacity: 0.5;
    }

    .file-tree-item:hover .drag-handle[b-7vqjti8mqc] {
        opacity: 1;
    }

    .file-tree-item .icon-folder[b-7vqjti8mqc],
    .file-tree-item .icon-file[b-7vqjti8mqc] {
        color: var(--primary);
    }

    .file-tree-item .item-name[b-7vqjti8mqc] {
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-dark);
    }

    .file-tree-item .kebab-menu[b-7vqjti8mqc] {
        margin-left: auto;
        opacity: 0;
        transition: opacity .2s ease;
    }

    .file-tree-item:hover .kebab-menu[b-7vqjti8mqc] {
        opacity: 1;
    }

    .file-tree-item .rename-input[b-7vqjti8mqc] {
        flex-grow: 1;
        padding: .2rem .4rem;
        border-radius: .3rem;
        border: 1px solid var(--primary);
        outline: none;
        background: var(--element-bg);
    }

.sub-items[b-7vqjti8mqc] {
    padding-left: 1.5rem; /* Indentation for children */
    border-left: 1px solid var(--card-border);
    margin-left: 1rem;
}

/* Right Panel Viewer Styling */
.content-panel[b-7vqjti8mqc] {
    flex: 3;
    overflow: hidden; /* Important for containing the viewer */
}

.viewer-container[b-7vqjti8mqc] {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0; /* Let the children handle padding */
}

.empty-state[b-7vqjti8mqc] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    color: var(--input-text);
}

    .empty-state .empty-icon[b-7vqjti8mqc] {
        font-size: 5rem;
        color: var(--bg-darker);
    }

    .empty-state h1[b-7vqjti8mqc] {
        margin: 1rem 0 .5rem;
        color: var(--text-dark);
    }

.preview-header[b-7vqjti8mqc], .editor-header[b-7vqjti8mqc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
    background: var(--card-bg-top);
}

    .preview-header h2[b-7vqjti8mqc], .editor-header h2[b-7vqjti8mqc] {
        display: flex;
        align-items: center;
        gap: .75rem;
        margin: 0;
        font-size: 1.2rem;
    }

.preview-content[b-7vqjti8mqc], .editor-instance[b-7vqjti8mqc] {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

    /* Use the editor styles from PostsPage */
    .editor-instance[b-7vqjti8mqc]  .ql-toolbar {
        background: var(--bg);
        border-radius: .8rem;
        margin-bottom: 8px;
        border: none;
    }

    .editor-instance[b-7vqjti8mqc]  .ql-container {
        background: var(--card-bg-top);
        border: none !important;
        height: calc(100% - 60px) !important;
    }

/* Loading Ghost Animation */
.ghost-item[b-7vqjti8mqc] {
    height: 2.2rem;
    width: 90%;
    margin: .5rem;
    border-radius: .5rem;
    animation: skeleton-loading 1s linear infinite alternate;
}


.custom-menu-container[b-7vqjti8mqc] {
    position: relative;
    display: inline-block;
}

    /* The dropdown panel */
    .custom-menu-container .menu-content[b-7vqjti8mqc] {
        position: absolute;
        top: calc(100% + 8px); /* Position below the button with a small gap */
        right: 0;
        z-index: 1001; /* Ensure it's above other content */
        min-width: 220px;
        background: var(--card-bg-top);
        border-radius: .8rem;
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow-medium);
        padding: .5rem;
        display: flex;
        flex-direction: column;
        /* Animation */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }

        /* The class that shows the menu */
        .custom-menu-container .menu-content.open[b-7vqjti8mqc] {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

    /* Individual items in the dropdown */
    .custom-menu-container .menu-item[b-7vqjti8mqc] {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .7rem .8rem;
        border-radius: .5rem;
        cursor: pointer;
        font-size: .9rem;
        font-family: var(--font-body);
        color: var(--text-dark);
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        transition: background-color .2s ease, color .2s ease;
    }

        .custom-menu-container .menu-item:hover[b-7vqjti8mqc] {
            background-color: var(--bg-darker50);
            color: var(--primary);
        }

        .custom-menu-container .menu-item .material-icons-round[b-7vqjti8mqc] {
            color: var(--input-text);
            transition: color .2s ease;
        }

        .custom-menu-container .menu-item:hover .material-icons-round[b-7vqjti8mqc] {
            color: var(--primary);
        }

    /* The divider line */
    .custom-menu-container .menu-divider[b-7vqjti8mqc] {
        height: 1px;
        background: var(--card-border);
        margin: .5rem 0;
    }

/* Overlay for clicking away to close */
.scrim-overlay[b-7vqjti8mqc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 1000;
}

/* Utility class to visually hide the file input */
.visually-hidden[b-7vqjti8mqc] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


.menu-divider[b-7vqjti8mqc] {
    height: 1px;
    background: var(--card-border);
    margin: .5rem;
}

.btn-component[b-7vqjti8mqc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-header);
    font-weight: 700;
    padding: .6rem 1.2rem;
    border-radius: .6rem;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    user-select: none;
    text-decoration: none !important;
}

    .btn-component .material-icons[b-7vqjti8mqc],
    .btn-component .material-icons-round[b-7vqjti8mqc] {
        font-size: 1.2rem;
    }

/* Primary Style */
.btn-style-primary[b-7vqjti8mqc] {
    background: var(--primary);
    color: var(--text-light);
    box-shadow: var(--shadow-low);
}

    .btn-style-primary:hover[b-7vqjti8mqc] {
        background: var(--primary-hover);
        box-shadow: var(--shadow-medium);
    }

/* Primary Mute Style */
.btn-style-primarymute[b-7vqjti8mqc] {
    background: var(--primary20);
    color: var(--primary);
}

    .btn-style-primarymute:hover[b-7vqjti8mqc] {
        background: var(--primary50);
        color: var(--text-light);
    }

/* Warning Mute Style */
.btn-style-warningmute[b-7vqjti8mqc] {
    background: var(--warning20);
    color: var(--warning);
}

    .btn-style-warningmute:hover[b-7vqjti8mqc] {
        background: var(--warning50);
        color: var(--text-light);
    }

/* Default Style */
.btn-style-default[b-7vqjti8mqc] {
    background: var(--card-bg-top);
    color: var(--text-dark-accent);
    border: 1px solid var(--card-border);
}

    .btn-style-default:hover[b-7vqjti8mqc] {
        background: var(--bg-darker50);
        border-color: var(--bg-darker);
    }

/* Loading State */
.btn-component.is-loading[b-7vqjti8mqc] {
    pointer-events: none;
    opacity: 0.7;
}

.menu-component[b-7vqjti8mqc] {
    position: relative;
    display: inline-block;
}

    .menu-component > .btn-component[b-7vqjti8mqc] { /* The button that triggers the menu */
        padding: .5rem;
        min-width: 40px; /* Ensure circle shape for icon-only buttons */
        min-height: 40px;
    }

.menu-content[b-7vqjti8mqc] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    min-width: 200px;
    background: var(--card-bg-top);
    border-radius: .8rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-medium);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.menu-component:focus-within .menu-content[b-7vqjti8mqc] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu Item Styling */
.menu-item[b-7vqjti8mqc] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .8rem;
    border-radius: .5rem;
    cursor: pointer;
    font-size: .9rem;
    color: var(--text-dark);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

/* Add this to DocumentsPage.razor.css */

.tree-empty-state[b-7vqjti8mqc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--input-text);
    font-size: 0.9rem;
    gap: 0.5rem;
}

    .tree-empty-state .material-icons[b-7vqjti8mqc] {
        font-size: 2.5rem;
        color: var(--bg-darker);
    }

[b-7vqjti8mqc] #file-upload-input {
    display: none;
}


.header-actions[b-7vqjti8mqc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.move-mode-toggle[b-7vqjti8mqc] {
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .move-mode-toggle:hover[b-7vqjti8mqc] {
        background-color: var(--bg-darker50);
    }

    .move-mode-toggle .material-icons-round[b-7vqjti8mqc] {
        color: var(--input-text);
    }

.tree-content.move-mode-active .move-mode-toggle[b-7vqjti8mqc] {
    background-color: var(--primary20);
}

    .tree-content.move-mode-active .move-mode-toggle .material-icons-round[b-7vqjti8mqc] {
        color: var(--primary);
    }

#root-drop-zone[b-7vqjti8mqc] {
    min-height: 300px; /* Or 100% of parent */
    padding-bottom: 50px; /* huge padding at bottom to catch "Root" drops */
}

/* Hide drag handles by default */
.file-tree-item .drag-handle[b-7vqjti8mqc] {
    display: none;
}

/* Show drag handles only in move mode */
.move-mode-active .file-tree-item .drag-handle[b-7vqjti8mqc] {
    display: block;
    cursor: grab;
    color: var(--input-text);
    opacity: 0.6;
}

.move-mode-active .file-tree-item:hover .drag-handle[b-7vqjti8mqc] {
    opacity: 1;
}

/* Style for drop targets */
.file-tree-item.drop-target[b-7vqjti8mqc] {
    background-color: var(--primary20);
    outline: 2px solid var(--primary);
}
 
/* Update: Header Actions Layout */
.tree-header.actions[b-7vqjti8mqc] {
    justify-content: space-between; /* push toggle to right */
    gap: 0.2rem;
    padding-top: 0;
}

.action-buttons-left[b-7vqjti8mqc] {
    display: flex;
    gap: 0.2rem;
}

/* Hide Mobile Toggle by default (Desktop) */
.mobile-tree-toggle[b-7vqjti8mqc] {
    display: none;
}

/* --- MOBILE OPTIMIZATIONS --- */
@media (max-width: 900px) {

    .documents-page-container[b-7vqjti8mqc] {
        flex-direction: column;
        height: calc(100vh - var(--devbar-height) - 4rem);
        padding: 0.5rem;
        gap: 0.5rem;
    }

    /* 1. File Tree Panel Header */
    .file-tree-panel[b-7vqjti8mqc] {
        flex: 0 0 auto;
        min-width: 100%;
        max-width: 100%;
        max-height: 60vh;
        border-radius: 12px;
        transition: all 0.3s ease;
    }

    .documents-page-container:not(.mobile-tree-expanded) .tree-header.actions[b-7vqjti8mqc],
    .documents-page-container:not(.mobile-tree-expanded)[b-7vqjti8mqc]  .custom-menu-container {
        display: none;
    }

    .documents-page-container:not(.mobile-tree-expanded) .file-tree-panel[b-7vqjti8mqc]{
        padding-bottom: 0.75rem;
    }

    /* Show Buttons when expanded */
    .mobile-tree-expanded .mobile-collapsible-action[b-7vqjti8mqc] {
        display: flex !important;
        animation: fadeIn-b-7vqjti8mqc 0.3s ease-in-out;
    }

    /* 3. The Toggle Button */
    .mobile-tree-toggle[b-7vqjti8mqc] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-dark2-50);
        border: none;
        border-radius: 6px;
        color: var(--text-dark);
        padding: 4px;
        cursor: pointer;
        height: 32px;
        width: 32px;
        margin-left: auto; /* Push to the right */
    }

        .mobile-tree-toggle:hover[b-7vqjti8mqc] {
            background: var(--bg-darker);
        }

    /* 4. Collapsible Body Wrapper */
    .tree-body-wrapper[b-7vqjti8mqc] {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
    }

    .mobile-tree-expanded .tree-body-wrapper[b-7vqjti8mqc] {
        max-height: 50vh;
        opacity: 1;
        border-top: 1px solid var(--card-border);
        margin-top: 0.5rem;
    }

    .mobile-tree-expanded .tree-content[b-7vqjti8mqc] {
        max-height: 48vh;
    }

    /* 5. Disable desktop-specifics */
    .desktop-only-action[b-7vqjti8mqc] {
        display: none;
    }

    .file-tree-item .drag-handle[b-7vqjti8mqc] {
        display: none !important;
    }

    /* 6. Content Panel */
    .content-panel[b-7vqjti8mqc] {
        flex: 1;
        min-height: 0;
        background: var(--card-bg-top);
        border-radius: 12px;
    }

    /* Animation for buttons appearing */
    @keyframes fadeIn-b-7vqjti8mqc {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Ensure header height transitions smoothly if needed */
    .tree-header.actions[b-7vqjti8mqc] {
        min-height: 32px; /* Ensure toggle has space */
    }

    /* Adjust "New" button padding on mobile */
    [b-7vqjti8mqc] .add-button span {
        display: none;
    }

    [b-7vqjti8mqc] .add-button {
        padding: 6px;
    }
}
/* _content/PowerPlan/Pages/EmployeePage.razor.rz.scp.css */
.flex[b-c63n3xsa8c] {
    --panel-width: 20rem;
}

p.error[b-c63n3xsa8c] {
    margin: 0.5rem 1rem;
    color: var(--warning-text);
    font-size: 14px;
}

[b-c63n3xsa8c] .input-component:has(~p.error) input {
    margin-bottom: 0;
}

.tabs[b-c63n3xsa8c] {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 0rem;
    margin-bottom: 1rem;
}

.site-top[b-c63n3xsa8c] {
    display: none;
}

[b-c63n3xsa8c] .add-employee {
    z-index: 1;
    transition: right cubic-bezier(0.44, -0.07, 0.15, 0.9) .2s;
}

    [b-c63n3xsa8c] .add-employee span {
    }

.add-employee-form[b-c63n3xsa8c] {
    height: auto;
    width: 20rem;
    max-width: 80vw;
    background: var(--card-bg);
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
}

.add-employee-container[b-c63n3xsa8c] {
    height: 100%;
    min-height: calc(100vh - 6rem);
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.add-employee-form h3[b-c63n3xsa8c] {
    margin-top: 0rem;
}

.add-employee-form[b-c63n3xsa8c]  button {
    margin: 1rem;
    margin-bottom: 0;
}

.employee-list[b-c63n3xsa8c] {
    position: relative;
    width: auto;
    min-width: 20rem;
    flex: 1;
    height: fit-content;
}

    .employee-list.open[b-c63n3xsa8c] {
        min-width: 2rem;
    }


    .employee-list.employees[b-c63n3xsa8c]  .smart-table .st-row {
        padding: 0.3rem 0;
    } 

        .employee-list[b-c63n3xsa8c]  .smart-table .st-row .col-name {
            padding: 0 0.3rem;
        }

.employee-tabel[b-c63n3xsa8c] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.employee-tabel-header[b-c63n3xsa8c] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1rem;
    padding-right: 1rem;
    font-family: var(--font-header);
    font-weight: 700;
}

    .employee-tabel-header p[b-c63n3xsa8c] {
        font-weight: 800;
        color: var(--text-dark-mute);
        margin-bottom: 0;
    }

    .employee-tabel-header div[b-c63n3xsa8c] {
        display: flex;
        align-items: center;
        overflow: hidden;
    }

        .employee-tabel-header div.sortable[b-c63n3xsa8c]{
            cursor: pointer;
        }

        .employee-tabel-header span.sort[b-c63n3xsa8c] {
            display: none;
            font-size: 1rem;
            margin-top: auto;
            margin-bottom: .2rem;
        }

    .employee-tabel-header .sort span.sort[b-c63n3xsa8c],
    .employee-tabel-header .desc span.sort[b-c63n3xsa8c] {
        display: inline;
    }


    .employee-tabel-header .desc span.sort[b-c63n3xsa8c] {
        transform: rotate(180deg);
    }

.employee-section[b-c63n3xsa8c] {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 4px;
    border-radius: 16px;
}

    .employee-section:last-of-type[b-c63n3xsa8c] {
        margin-bottom: 64px;
    }

    [b-c63n3xsa8c] .smart-table .header {
        display: flex;
        align-items: center;
        flex: 1;
    }

        [b-c63n3xsa8c] .smart-table .header ::deep button.Primary {
            margin: 0 0.2rem 0 auto;
        }

[b-c63n3xsa8c] .smart-table .header lottie-player {
    position: relative;
    width: 48px;
    height: 48px;
    margin-right: 8px;
}

    [b-c63n3xsa8c] .smart-table .header lottie-player::before {
        --s: 20px;
        content: " ";
        position: absolute;
        top: 14px;
        left: 14px;
        border-radius: 8px;
        height: var(--s);
        width: var(--s);
        background: var(--bg-darker);
        margin: auto;
    }

[b-c63n3xsa8c] .smart-table .header h2 {
    color: var(--input-text);
    font-size: 1.2rem;
    margin: 0;
    flex: 1;
}

[b-c63n3xsa8c] .smart-table .Created h2 {
    animation: header-in-b-c63n3xsa8c ease-in .5s forwards;
}

@keyframes header-in-b-c63n3xsa8c {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }

    to {
        opacity: 1;
        transform: translateX(1px);
    }
}

[b-c63n3xsa8c] .smart-table .Created {
    gap: 0px;
    background: var(--bg-dark);
    padding: 0 8px 8px;
    border-radius: 24px;
}

    [b-c63n3xsa8c] .smart-table .Created .st-row {
        border: none;
    }
    [b-c63n3xsa8c] .smart-table .Created .st-group-header {
        padding: 0;
        padding-right: 0.1rem;
    }


[b-c63n3xsa8c] .smart-table .Disabled h2 {
    color: var(--text-dark);
    opacity: 0.5 !important;
}

[b-c63n3xsa8c] .smart-table .Disabled ::deep .profilePicture,
[b-c63n3xsa8c] .smart-table .Disabled ::deep .position-tag,
[b-c63n3xsa8c] .smart-table .Banned ::deep .profilePicture,
[b-c63n3xsa8c] .smart-table .Banned ::deep .position-tag {
    filter: grayscale(1);
}

[b-c63n3xsa8c] .smart-table .Banned {
    background: var(--warning-mute);
}

    [b-c63n3xsa8c] .smart-table .Banned h2 {
        color: var(--warning);
        margin-left: 8px;
    }

[b-c63n3xsa8c] .smart-table :not(.Banned, .Created) {
}

.employee-item[b-c63n3xsa8c] {
    position: relative;
    display: flex;
    flex-direction: row;
    transition: border ease .2s, background ease .2s, box-shadow ease .2s;
    cursor: pointer;
    padding: .5rem;
    border-radius: 16px;
    background: var(--card-bg);
    font-family: var(--font-body);
    font-weight: 400;
    align-items: center;
    border: .1rem solid var(--card-border);
    color: var(--text-dark);
    min-width: 3rem;
    min-height: 2rem;
} 

[b-c63n3xsa8c] .tooltip-container:has(.active-state-change-icon) {
    display: flex;
}

[b-c63n3xsa8c] .active-state-change-icon {
    margin: auto 0;
    color: var(--primary);
    font-size: 1rem;
    background: var(--bg-dark);
    padding: 0.2rem;
    border-radius: 0.3rem;
    margin-right: 0.4rem;
}
    [b-c63n3xsa8c] .active-state-change-icon.deactivate {
        color: var(--warning);
        background: var(--warning-mute);
    } 

p[b-c63n3xsa8c] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.open[b-c63n3xsa8c]  .col-email,
.open[b-c63n3xsa8c]  .col-num {
    flex: 0;
}

[b-c63n3xsa8c] .color-swatch {
    height: 1rem;
    width: 1rem;
    min-height: 1rem;
    min-width: 1rem;
    max-height: 1rem;
    max-width: 1rem;
    border-radius: .2rem;
    margin: .2rem 0;
    margin-right: .5rem;
}


.search-container[b-c63n3xsa8c] {
    position: relative;
}

    .search-container span[b-c63n3xsa8c] {
        font-size: 1.4rem;
        color: var(--input-text);
        position: absolute;
        margin: 1rem;
    }

    .search-container input[b-c63n3xsa8c] {
        border: none;
        font-size: 1.2rem;
        width: calc(100% - 5.2rem);
        display: flex;
        align-items: center;
        flex-direction: row;
        background: var(--card-bg);
        color: var(--text-dark);
        font-family: var(--font-header);
        font-weight: 700;
        padding: .8rem 1.5rem;
        padding-left: 3.5rem;
        border-radius: 1rem;
        border: .1rem solid var(--card-border);
        transition: box-shadow cubic-bezier(0.44, -0.07, 0.15, 0.9) .15s;
    }

        .search-container input[b-c63n3xsa8c]::placeholder {
            color: var(--input-text);
            font-weight: 600;
            font-size: 1rem;
        }

        .search-container input:active[b-c63n3xsa8c],
        .search-container input:focus[b-c63n3xsa8c] {
            box-shadow: 0px 0.2px 0.2px hsl(var(--shadow-color) / 0.32), 0px 2.4px 2.7px -0.7px hsl(var(--shadow-color) / 0.32), -0.2px 11.8px 24.5px -2.5px hsl(var(--shadow-color) / 0.32);
            outline: none;
        }

.panel[b-c63n3xsa8c] {
    width: var(--panel-width);
    min-width: var(--panel-width);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    transition: width .2s cubic-bezier(0.44, -0.07, 0.15, 0.9);
    padding: 16px;
    padding-bottom: 16px;
    height: fit-content;
    border-radius: 24px !important;
    min-height: calc(((1 / var(--zoom)) * 100%) - 3.5rem);
    max-height: calc(((1 / var(--zoom)) * 100%) - 3.5rem - var(--devbar-height));
    position: sticky;
    top: 0.5rem;
    z-index: 5;
}

    .panel.open[b-c63n3xsa8c] {
        min-width: calc(var(--panel-width) - 6rem);
    }

.flex:has(.panel.open)[b-c63n3xsa8c] {
    --panel-width: clamp(20rem,calc(50% + 2rem),60rem);
}

.panel .widget[b-c63n3xsa8c] {
    min-width: 20rem;
    width: 20rem;
    margin-right: 0;
    flex-direction: column;
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transition: ease .2s width, ease .2s min-width, ease .2s max-width;
}

    .panel .widget h2[b-c63n3xsa8c] {
        margin: 0.75rem 1rem 0;
        font-weight: 900;
        font-size: 1.6rem;
    }

    .panel .widget .tag-holder[b-c63n3xsa8c] {
        display: flex;
        flex-direction: row;
        gap: .3rem;
        margin: 0.25rem 1rem 1rem;
    }

    .panel .widget[b-c63n3xsa8c]  .site-list {
        margin: 0 1rem;
    }

    .panel .widget .site-sub[b-c63n3xsa8c] {
        margin: .0rem auto 0rem;
        font-size: 0.9rem;
        color: var(--input-text);
    }

.create .header[b-c63n3xsa8c] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .5rem;
    width: 100%;
    z-index: 10;
}

    .create .header .tabs[b-c63n3xsa8c] {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
        height: 100%;
        overflow: visible;
        margin-bottom: 0;
    }

    .create .header[b-c63n3xsa8c]  .collapse-widget {
        background: var(--bg-darker);
    }

        .create .header[b-c63n3xsa8c]  .collapse-widget span {
            font-size: 1.8rem;
        }

.panel.open.hide-widget .widget[b-c63n3xsa8c] {
    min-width: 0;
    width: 0;
    max-width: 0;
}

.panel.open.hide-widget .create[b-c63n3xsa8c] {
    margin: 0 !important;
}

.employee-site-list[b-c63n3xsa8c] {
    display: flex;
    flex-direction: column;
    width: calc(100% - 2rem);
    box-sizing: border-box;
    margin: 0.5rem 1rem 0;
    gap: .3rem;
    background-color: var(--card-bg-top);
    border-radius: 1rem;
    padding: .5rem;
}

    .employee-site-list .site[b-c63n3xsa8c] {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: .5rem;
        width: 100%;
        transition: ease .2s background, ease .2s opacity;
    }

        .employee-site-list .site p[b-c63n3xsa8c] {
            flex: 1;
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .employee-site-list .site .material-icons[b-c63n3xsa8c] {
            --s: 1.4rem;
            height: var(--s);
            width: var(--s);
            max-height: var(--s);
            max-width: var(--s);
            min-height: var(--s);
            min-width: var(--s);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--bg-dark);
            font-size: 1rem;
        }

            .employee-site-list .site .material-icons.isadmin[b-c63n3xsa8c],
            .employee-site-list .site .material-icons.isdefault[b-c63n3xsa8c] {
                color: var(--primary);
                font-size: 1.3rem;
            }

            .employee-site-list .site .material-icons.isdefault[b-c63n3xsa8c] {
                color: var(--bad);
                font-size: 1.5rem;
            }

.create-content .create-content-header[b-c63n3xsa8c]{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.create-content .employee-site-list[b-c63n3xsa8c] {
    margin: 0;
    width: 100%;
    background: var(--card-bg);
    padding: .3rem;
    gap: 0;
}

.create-content .site[b-c63n3xsa8c] {
    padding: .2rem;
    border-radius: .7rem;
    box-sizing: border-box;
}

.create-content .employee-site-list .site:hover[b-c63n3xsa8c] {
    background: var(--card-bg-top);
}

.create-content .employee-site-list:has(.site:hover) .site:not(:hover)[b-c63n3xsa8c] {
    opacity: .3;
}

.create-content .employee-site-list[b-c63n3xsa8c]  button {
    padding: 0.55rem;
}

    .create-content .employee-site-list[b-c63n3xsa8c]  button span {
        font-size: 1rem;
    }

.create-content .employee-site-list[b-c63n3xsa8c]  .notdefault,
.create-content .employee-site-list[b-c63n3xsa8c]  .notadmin {
    color: var(--bg-dark);
}

.create-content .employee-site-list[b-c63n3xsa8c]  button:not(.disabled).notdefault:hover {
    color: var(--bad);
}

.create-content .employee-site-list[b-c63n3xsa8c]  button:not(.disabled).notadmin:hover {
    color: var(--primary);
}

.create-content .employee-site-list[b-c63n3xsa8c]  .isdefault {
    color: var(--bad);
    padding: 0.3rem;
}

    .create-content .employee-site-list[b-c63n3xsa8c]  .isdefault span {
        font-size: 1.5rem;
    }

.create-content .employee-site-list[b-c63n3xsa8c]  .isadmin {
    color: var(--primary);
    padding: 0.4rem;
}

    .create-content .employee-site-list[b-c63n3xsa8c]  .isadmin span {
        font-size: 1.3rem;
    }

.create-content .employee-site-list[b-c63n3xsa8c]  .WarningMute {
    background: var(--warning-mute50);
}


.create-content .employee-site-list[b-c63n3xsa8c]  button.hidden {
    opacity: 0;
    pointer-events: none;
}

.create-content .employee-site-list.not-assigned[b-c63n3xsa8c] {
    background: transparent;
    padding: 0;
    gap: .3rem;
}

    .create-content .employee-site-list.not-assigned label[b-c63n3xsa8c] {
        margin: 0 0.5rem;
    }

    .create-content .employee-site-list.not-assigned .site[b-c63n3xsa8c] {
        background: var(--card-bg);
        padding-left: .5rem;
    }

    .create-content .employee-site-list.not-assigned .empty[b-c63n3xsa8c] {
    }

        .create-content .employee-site-list.not-assigned .empty p[b-c63n3xsa8c] {
        }

.create-content .employee-site-list[b-c63n3xsa8c]  button.add-site span {
    font-weight: 800;
}


.widget[b-c63n3xsa8c]  .profilePicture {
    --size: 20rem;
}

.panel .create[b-c63n3xsa8c] {
    position: relative;
    width: 0;
    display: none;
}


.panel.open .create[b-c63n3xsa8c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0 16px;
    padding: 16px 16px 128px 16px;
    border-radius: 16px;
    position: relative;
    background: var(--bg-dark);
    transition: ease .2s background, .2s ease margin;
    overflow: auto;
}
[data-theme='dark'] .panel.open .create[b-c63n3xsa8c] {
    background: var(--card-bg-top);
}

    .create .row[b-c63n3xsa8c] {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

.row.number[b-c63n3xsa8c]  input[type=number] {
    margin-bottom: 0;
}

.create .row .collapse[b-c63n3xsa8c] {
    font-size: 1.2rem;
    font-family: var(--font-mono);
    font-weight: 800;
    background: var(--element-bg);
    border: var(--card-border) solid .1rem;
    border-radius: .3rem;
    line-height: 1.5rem;
    height: 1.8rem;
    width: 1.8rem;
    text-align: center;
}

    .create .row .collapse span[b-c63n3xsa8c] {
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.8rem;
    }

.create > .row > label[b-c63n3xsa8c] {
    margin: 0;
    font-weight: 800;
}

.create .create-content[b-c63n3xsa8c] {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 24px 16px 0;
    width: calc(100% - 32px);
    gap: 12px;
}

.create-content > .col[b-c63n3xsa8c] {
    display: flex;
    flex-direction: column;
}

    .create .create-content > .row:not(.superadmin)[b-c63n3xsa8c],
    .create-content > .col > .row:not(.superadmin)[b-c63n3xsa8c] {
        justify-content: space-between;
        gap: 16px;
    }

.superadmin.row[b-c63n3xsa8c] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

    .superadmin.row[b-c63n3xsa8c]  .tooltip-container span.material-icons {
        color: var(--bg-dark3);
        font-size: 1.4rem;
    }

.superadmin[b-c63n3xsa8c]  .checkbox:not(.checked) {
    background: var(--card-bg)
}

.permissions-container[b-c63n3xsa8c] {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    padding: 8px;
    padding-top: 16px;
    border-radius: 20px;
    background: var(--bg-dark2-50);
}
    .permissions-container .permissions-header[b-c63n3xsa8c] {
        margin: 0 8px 8px;
        font-family: var(--font-header);
        font-weight: 800;
        color: var(--text-dark-accent3);
        font-size: 16px;
    }
    .permissions-container .permissions-body[b-c63n3xsa8c] {
        display: flex;
        flex-direction: column;
        gap: 4px; 
    }
    .permissions-container .permissions-body .row[b-c63n3xsa8c]{
        display: flex;
        flex-direction: row;
        gap: inherit;
        flex-wrap: wrap;
    }
        .permissions-container .permissions-body label[b-c63n3xsa8c] {
            margin-bottom: 0 !important;
            margin-top: 4px;
        }

        .permissions-container .permissions-body .permission.hr[b-c63n3xsa8c] {
            --main: #E24A54;
        }

        .permissions-container .permissions-body .permission.payroll[b-c63n3xsa8c] {
            --main: #4CAF50;
        }

        .permissions-container .permissions-body .permission.planner[b-c63n3xsa8c] {
            --main: var(--primary);
        }

        .permissions-container .permissions-body .permission.approveswaps[b-c63n3xsa8c] {
            --main: #F5A623;
        }

        .permissions-container .permissions-body .permission.approvetimeoff[b-c63n3xsa8c] {
            --main: #4DB6AC;
        }

        .permissions-container .permissions-body .permission.approvepunches[b-c63n3xsa8c] {
            --main: #8E44AD;
        }

        .permissions-container .permissions-body .permission[b-c63n3xsa8c] {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 4px;
            flex-wrap: nowrap;
            flex: 1;
            min-width: 120px;
            width: 33%;
            padding: 8px;
            border-radius: 12px;
            background: var(--card-bg50);
            border: 1px solid transparent;
        }

            .permissions-container .permissions-body .permission span[b-c63n3xsa8c] {
                color: var(--text-dark);
                opacity: 0.5;
            }
            .permissions-container .permissions-body .permission p[b-c63n3xsa8c] {
                margin: 0;
                flex: 1;
            }

            .permissions-container .permissions-body .permission.selected[b-c63n3xsa8c] {
                background: var(--card-bg);
                border: 1px solid var(--card-border);
            }
                .permissions-container .permissions-body .permission.selected span[b-c63n3xsa8c] {
                    color: var(--main);
                    opacity: 1;
                }

    .permissions-container.none[b-c63n3xsa8c] {
        background: var(--warning-mute50);
        margin-top: 8px;
        border: 1px solid var(--warning10);
    }
        .permissions-container.none .permissions-header[b-c63n3xsa8c],
        .create .create-content .permissions-container.none label[b-c63n3xsa8c] {
            color: var(--text-dark80);
        }

.create .create-content > .row[b-c63n3xsa8c]  .input-component,
.create .create-content > .row[b-c63n3xsa8c]  .language-dropdown {
    flex: 1;
}

    .create .create-content > .row[b-c63n3xsa8c]  .language-dropdown .language-select {
        margin: 0.2rem 0 0;
        border-radius: 0.7rem;
        padding: 0.33rem 0.55rem;
        width: calc(100% - 1.7rem);
    }

    .create .create-content label[b-c63n3xsa8c] {
        font-family: var(--font-header);
        font-weight: 700;
        color: var(--input-text);
        font-size: .8rem;
        margin: 0;
        opacity: 1;
        margin-bottom: .5rem;
    }

.create .create-content[b-c63n3xsa8c]  .input-component label,
.create .create-content[b-c63n3xsa8c]  .textarea-component label,
.create .create-content label[b-c63n3xsa8c] {
    font-family: var(--font-header);
    font-weight: 800;
    margin-left: .5rem;
    color: var(--input-text);
    font-size: .8rem;
}

.create .create-content[b-c63n3xsa8c]  .sub-positions.dropdown-container {
    flex: unset;
    width: fit-content;
}

    .create .create-content[b-c63n3xsa8c]  .sub-positions.dropdown-container .add-button {
        height: 2rem;
        width: 2rem;
        line-height: 2rem;
        margin: 0.5rem 0 0.5rem 0.25rem;
    }

        .create .create-content[b-c63n3xsa8c]  .sub-positions.dropdown-container .add-button:hover {
            background: var(--bg-darker) !important;
        }

.create .create-content .position-header label[b-c63n3xsa8c] {
    margin: 0;
}


.create-content .sub-positions[b-c63n3xsa8c] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

[b-c63n3xsa8c] .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}



    .create-content .sub-positions > label[b-c63n3xsa8c] {
        margin-bottom: .5rem !important;
    }

    .create-content .sub-positions .sub-position-list[b-c63n3xsa8c] {
        display: flex;
        flex-direction: row;
        background: var(--bg-darker);
        flex: 1;
        border-radius: .75rem;
        border: .1rem solid var(--bg-darker);
        overflow: auto;
    }

        .create-content .sub-positions .sub-position-list .none[b-c63n3xsa8c] {
            margin: 0.75rem 1rem;
            color: var(--input-text);
        }

        .create-content .sub-positions .sub-position-list:not(:has(.none))[b-c63n3xsa8c] {
            background: var(--card-bg-top);
            padding: .6rem;
            gap: .5rem;
            border: .1rem solid var(--card-border);
        }

.create-content .col[b-c63n3xsa8c]{
    display: flex;
    flex-direction: column;
}

.salary-row[b-c63n3xsa8c] {
    align-items: flex-start !important;
}

.create-content .row.worklimit[b-c63n3xsa8c] {
    align-items: flex-start;
    justify-content: space-between;
    background: var(--bg-dark2-50);
    border-radius: 1rem;
    padding: 2px 4px;
}

    .create-content .row.worklimit[b-c63n3xsa8c]  .input-component {
        max-width: 256px;
        margin: auto 0;
    }

    .create-content .row.worklimit[b-c63n3xsa8c]  .input-display span {
        margin: auto 0 auto auto;
    }

    .create-content .row.worklimit .col[b-c63n3xsa8c] {  
        margin: 4px 0px 0px;
    }
        .create-content .row.worklimit .col label[b-c63n3xsa8c] {
            margin-top: 0px;
            margin-bottom: 0px;
        }
    .create-content .row.worklimit .col:last-of-type[b-c63n3xsa8c] {
        align-items: flex-end;
        margin: 4px 8px 0px;
    }
        .create-content .row.worklimit .col:last-of-type p[b-c63n3xsa8c] {
            width: fit-content;
            font-size: 1.25rem;
            font-family: var(--font-body);
            text-align: right;
            margin: 0;
            color: var(--text-dark80);
            margin-top: 0.6rem;
        } 

.create-content h2[b-c63n3xsa8c],
.create-content h3[b-c63n3xsa8c] {
    font-weight: 900;
    color: var(--input-text);
    font-size: 1.2rem;
    margin: 0 0 0 0.5rem;
}

.create-content h3[b-c63n3xsa8c] {
    font-size: 1rem;
    margin: 0 0 0.5rem 0.5rem;
}

.position-header[b-c63n3xsa8c] {
    background: var(--bg);
    border-radius: 1rem;
    padding: 2rem;
    margin: -2rem -1rem 1rem;
    display: flex;
    flex-direction: column;
}

    .position-header label[b-c63n3xsa8c] {
        margin: 0;
    }

    .position-header h2[b-c63n3xsa8c] {
        margin: 0;
        font-weight: 900;
    }

.block-content[b-c63n3xsa8c] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 2rem;
}

.blocks[b-c63n3xsa8c] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1;
    padding: 0rem 2rem;
}

.setting-title[b-c63n3xsa8c] {
    font-family: var(--font-header);
    font-weight: 900;
    color: var(--text-dark);
    margin: 2rem 5.5rem 1rem;
}

.setting-subtitle[b-c63n3xsa8c] {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-dark);
    margin: 1rem;
    margin-top: 0;
}

.block-list-container[b-c63n3xsa8c] {
    display: flex;
    border-radius: 1rem;
    background: var(--bg-dark2);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 0.5rem 0 1rem 0;
}

    .block-list-container .block-list[b-c63n3xsa8c] {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .block-list-container p.block-list-empty[b-c63n3xsa8c] {
    }

.empty-label-container[b-c63n3xsa8c] {
    --x-bg: var(--bg-dark2);
    --x-color: var(--bg-darker);
    height: 10rem;
}

.blocks[b-c63n3xsa8c] >  .hurtig_button {
    margin: .5rem 1.5rem;
}

.panel .info[b-c63n3xsa8c] {
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
}

.panel h1[b-c63n3xsa8c] {
    margin: 1rem 1.5rem;
    margin-bottom: 0;
}

.panel .butt[b-c63n3xsa8c] {
    display: flex;
    justify-content: center;
    margin-top: auto;
    margin-top: 1rem;
}

.panel .reset[b-c63n3xsa8c] {
    display: flex;
    justify-content: center;
    margin: 1rem
}

label[b-c63n3xsa8c] {
    font-family: var(--font-header);
    font-weight: 800;
    opacity: .8;
    font-size: 1.2rem;
    margin: .5rem;
    color: var(--text-dark);
}

.info-tabel[b-c63n3xsa8c] {
    border-spacing: 0;
}

    .info-tabel td[b-c63n3xsa8c] {
        color: var(--text-dark);
        padding: .4rem 1.2rem .4rem .25rem;
        width: 100%;
        border-radius: 0 .5rem.5rem 0;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0.8rem;
        text-overflow: ellipsis;
    }

    .info-tabel tr[b-c63n3xsa8c] {
        border-radius: .5rem;
        display: flex;
        width: calc(100% - 1rem);
    }

    .info-tabel td:nth-of-type(1)[b-c63n3xsa8c] {
        font-weight: 600;
        width: 8rem;
        opacity: .8;
        border-radius: .5rem 0 0 .5rem;
        padding: .4rem .25rem .4rem .7rem;
    }

    .info-tabel.stats td[b-c63n3xsa8c] {
        font-weight: 600;
        opacity: .8;
        width: unset;
        border-radius: .5rem 0 0 .5rem;
        flex: 1;
    }


    .info-tabel td span[b-c63n3xsa8c] {
        background: var(--bg-dark50);
        padding: .0rem .4rem;
        border-radius: 1rem;
        color: var(--input-text);
    }

    .info-tabel.stats td:nth-of-type(1)[b-c63n3xsa8c] {
        font-weight: 600;
        width: 9rem;
        opacity: .8;
        flex: unset;
        border-radius: .5rem 0 0 .5rem;
    }

    .info-tabel tr:nth-of-type(2n+1)[b-c63n3xsa8c] {
        background: var(--element-bg);
    }

.work-limits[b-c63n3xsa8c] {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    margin: 8px 0;
}

    .work-limits .card[b-c63n3xsa8c] {
        border: none;
        aspect-ratio: 1/1;
        background: var(--card-bg-top);
        display: flex;
        flex-direction: column;
        justify-content: end;
        padding: 0;
        margin: 0;
        flex: 1;
        padding: 8px;
    }

        .work-limits .card p[b-c63n3xsa8c] {
            margin: 0;
            font-size: 12px;
            white-space: break-spaces;
        }

        .work-limits .card label[b-c63n3xsa8c] {
            margin: 0;
            color: var(--input-text);
            font-size: 1.5rem;
        }


.seperator[b-c63n3xsa8c] {
    min-height: 0.1rem;
    background: var(--card-border);
    width: calc(100% - 2rem);
    margin: 1rem 1rem;
    border-radius: 0.1rem;
}

.actions[b-c63n3xsa8c] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    z-index: 0;
    margin: 1rem 0 .5rem;
}

.widget .actions[b-c63n3xsa8c]  button.hurtig_button:not(.Primary) {
    background: var(--bg-dark);
}

    .widget .actions[b-c63n3xsa8c]  button.hurtig_button:not(.Primary):hover {
        background: var(--primary);
    }

.widget .actions[b-c63n3xsa8c]  button.hurtig_button.Primary {
    background: var(--primary);
}

    .widget .actions[b-c63n3xsa8c]  button.hurtig_button.Primary:hover {
        background: var(--primary-hover);
    }

.create-actions[b-c63n3xsa8c] {
    position: fixed;
    right: 56px;
    transform: translateX(-0%);
    top: calc(100vh - 56px - 4.5rem);
    gap: 1rem;
    background: var(--card-bg50);
    backdrop-filter: blur(6px);
    border: .1rem solid var(--card-border);
    box-shadow: var(--shadow-medium);
    padding: 12px;
    display: flex;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    margin-bottom: .5rem;
    z-index: 10;
}


.actions button[b-c63n3xsa8c] {
    height: 3rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .5rem;
    background: var(--primary);
    margin: 0 .5rem;
    border: none;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
    box-shadow: var(--shadow-glow) 0px 0.2rem 0.3rem, var(--primary) 0px 0.2rem .6rem 0px;
}

    .actions button:hover[b-c63n3xsa8c] {
        background: var(--primary-hover);
        box-shadow: var(--shadow-glow) 0px 0rem 0rem, var(--primary-hover) 0px 0.1rem 0.5rem 0px;
    }

    .actions button:active[b-c63n3xsa8c], .actions button:focus[b-c63n3xsa8c] {
        outline: rgba(0,0,0,.8) solid .2rem;
    }

    .actions button img[b-c63n3xsa8c] {
        height: 1.3rem;
        width: auto;
        filter: invert(1);
    }

.active-state-change[b-c63n3xsa8c] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    color: var(--primary);
    background: var(--bg-dark2-50);
    border-radius: 1.5rem;
    backdrop-filter: blur(8px);
    box-shadow: rgba(0, 0, 0, 0.03) 0px 2px 1px, 
                rgba(0, 0, 0, 0.03) 0px 4px 2px, 
                rgba(0, 0, 0, 0.03) 0px 8px 4px, 
                rgba(0, 0, 0, 0.03) 0px 16px 8px, 
                rgba(0, 0, 0, 0.03) 0px 32px 16px, 
                inset 0px -0.5rem 2rem -0.8rem var(--primary50);
}
    .active-state-change span[b-c63n3xsa8c] {
        color: inherit;
        margin-right: 0.4rem;
        background: var(--card-bg20);
        padding: 0.2rem;
        border-radius: 0.3rem;
    }
    .active-state-change p[b-c63n3xsa8c] {
        font-size: 1.15rem;
        margin: 1rem 0;
        font-family: var(--font-header);
        font-weight: 800;
        color: white;
    }

    .active-state-change.deactivate[b-c63n3xsa8c] {
        color: var(--warning);
        background: var(--warning20); 
        
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, 
                rgba(0, 0, 0, 0.06) 0px 4px 2px, 
                rgba(0, 0, 0, 0.06) 0px 8px 4px, 
                rgba(0, 0, 0, 0.06) 0px 16px 8px, 
                rgba(0, 0, 0, 0.06) 0px 32px 16px, 
                inset 0px -0.5rem 2rem -0.7rem var(--warning);
    }

.position-color-container[b-c63n3xsa8c] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

    .position-color-container[b-c63n3xsa8c]  .dropdown-container {
        width: 50%;
        min-width: 10rem;
        max-width: calc(100% - 3rem);
    }

.position-color[b-c63n3xsa8c] {
    height: 2.6rem;
    width: 2.6rem;
    border-radius: .5rem;
    margin: .2rem;
    margin-left: .5rem;
}

.open .tabs[b-c63n3xsa8c], .open .search-container[b-c63n3xsa8c], .open .result-count[b-c63n3xsa8c], .open .employee-tabel-header[b-c63n3xsa8c] {
    transition: linear .2s all;
}

.create-content .dangerzone[b-c63n3xsa8c] {
    background: var(--warning-mute);
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .5rem;
}

    .create-content .dangerzone .row[b-c63n3xsa8c] {
        width: calc(100% - 16px);
        display: flex;
        justify-content: space-between;
        margin: 0px 16px 0 0;
        padding: 8px 0;
        border-bottom: 2px solid var(--warning20);
    }

        .create-content .dangerzone .row:last-of-type[b-c63n3xsa8c] {
            border: none;
        }

        .create-content .dangerzone .row > h5[b-c63n3xsa8c] {
            margin: 0;
            font-weight: 400;
            font-size: 14px;
            font-family: var(--font-body);
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 4px;
        }

        .create-content .dangerzone .row h5 span[b-c63n3xsa8c] {
            margin-top: 4px;
            color: var(--warning50);
        }

.create-content label.danger[b-c63n3xsa8c] {
    color: var(--warning);
    font-weight: 900;
    width: 100%;
    margin: 0 8px;
    font-size: 1.2rem;
}

.slider-container[b-c63n3xsa8c] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.pin-div[b-c63n3xsa8c] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .pin-div[b-c63n3xsa8c]  input {
        font-size: 1.2rem !important;
        padding: .5rem;
        margin: 0 !important;
    }

    .pin-div[b-c63n3xsa8c]  .pin-code-input {
        gap: .2rem;
        margin-top: .5rem;
    }

    .pin-div label[b-c63n3xsa8c] {
        margin: 0 0.5rem !important;
    }

    .pin-div p.error[b-c63n3xsa8c] {
        margin: .2rem 0.5rem;
    }

.create .row[b-c63n3xsa8c]  .dropdown-container {
    flex: 1;
}

[b-c63n3xsa8c] #position-chat-participants {
    width: fit-content;
    margin: auto 8px 12px auto;
}

.position-chat-employee-list[b-c63n3xsa8c] {
    background: var(--bg-dark2-50);
    padding: 8px;
    border-radius: 32px;
    margin: -12px 8px 0;
}

    .position-chat-employee-list p.empty[b-c63n3xsa8c] {
        margin: 0;
        text-align: center;
        width: 100%;
        font-weight: 700;
        color: var(--input-text);
        font-size: 13px;
    }

    @media (max-width: 1800px) {
        .open .employee-item[b-c63n3xsa8c] {
        margin: .15rem 0;
        padding: .3rem .6rem;
    }

    .open.employees .employee-item[b-c63n3xsa8c] {
        margin: .15rem 0;
        padding: .3rem;
    } 
    .open .employee-item p[b-c63n3xsa8c],
    .employee-item .color-td[b-c63n3xsa8c] {
        font-size: 1rem;
    }
}

@media (max-width: 1625px) {
    .flex:has(.panel.open.positions-view)[b-c63n3xsa8c] {
        --panel-width: clamp(20rem,calc(100% - 10rem),60rem);
    }

    .open .employee-section.Created .header[b-c63n3xsa8c]  button {
        display: none;
    }

    .employee-list.open[b-c63n3xsa8c] {
        width: auto;
        min-width: 5rem !important;
        max-width: 100% !important;
        overflow-x: hidden;
        padding: 0 .5rem;
        flex: unset;
    }

    .employee-list.employees.open[b-c63n3xsa8c] {
        width: auto;
        min-width: 3.8rem !important;
        max-width: 12rem !important;
    }

    .open.panel:not(:has(.positions-view))[b-c63n3xsa8c] {
        flex: 1;
    }

    .flex:has(.positions) .panel.open[b-c63n3xsa8c] {
        flex: 1;
    }

    .open .number[b-c63n3xsa8c], .open .position[b-c63n3xsa8c], .open .sites[b-c63n3xsa8c] {
        flex: 0;
    }

    .open .tabs[b-c63n3xsa8c], 
    .open .employee-tabel-header[b-c63n3xsa8c] {
        height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
    }
    
    .open .search-container[b-c63n3xsa8c],
    .open .result-count[b-c63n3xsa8c]{

    }

    .open .employee-tabel:not(.p) .employee-item > div[b-c63n3xsa8c] {
        flex: unset;
        width: 100%;
    }
    .open .employee-tabel.p .employee-item > div[b-c63n3xsa8c] {
        flex: 0;
    }
    
    .open .create .tabs[b-c63n3xsa8c] {
        margin-bottom: 1rem;
    }

    .site-top[b-c63n3xsa8c] {
        display: flex;
    }
    .employee-item[b-c63n3xsa8c]
    {
        overflow: hidden;
    }

    .employee-item.selected[b-c63n3xsa8c] {
        border: .1rem solid var(--primary) !important;
    }
}

.p .employee-tabel-header[b-c63n3xsa8c] {
    padding-right: 1rem;
}

.file-upload-container[b-c63n3xsa8c] {
    margin-bottom: 0rem;
}

    .file-upload-container.disabled[b-c63n3xsa8c]{
        cursor: not-allowed;
        filter: blur(5px);
    }

h3.notice[b-c63n3xsa8c] {
    font-weight: 800;
    color: var(--text-dark-mute);
    text-align: center;
    position: absolute;
    top: 5rem;
    z-index: 1;
    margin: 0 2rem;
}

    .file-drop-zone[b-c63n3xsa8c] {
        border: 2px dashed var(--bg-dark2-50);
        border-radius: 16px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        background-color: var(--bg-darker);
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        margin: 0.5rem .5rem 0 0 !important;
        box-sizing: border-box;
    }

[data-theme="dark"] .file-drop-zone[b-c63n3xsa8c] {
    border: 2px dashed var(--card-bg);
    background-color: var(--bg);
}

.file-drop-zone *[b-c63n3xsa8c] {
    pointer-events: none;
}

.file-drop-zone p[b-c63n3xsa8c] {
    color: var(--text-dark-accent);
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
}

.file-drop-zone span[b-c63n3xsa8c] {
    color: var(--text-dark-accent);
}

.file-drop-zone svg[b-c63n3xsa8c] {
    color: var(--card-bg);
    stroke: var(--card-bg);
}

.file-drop-zone.drag-over[b-c63n3xsa8c] {
    background-color: var(--card-bg);
    border-color: var(--primary);
}

.loading-spinner[b-c63n3xsa8c] {
    border: 4px solid var(--card-bg);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin-b-c63n3xsa8c 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-c63n3xsa8c {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.documents-list-header[b-c63n3xsa8c] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: .5rem;
}

    .documents-list-header span[b-c63n3xsa8c] {
        margin: 0 .5rem 0.5rem;
        color: var(--text-dark-accent);
        font-size: 14px;
    }

.documents-list[b-c63n3xsa8c] {
    margin-top: 1rem;
}

.documents-title[b-c63n3xsa8c] {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.documents-grid[b-c63n3xsa8c] { 
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.document-card[b-c63n3xsa8c] {
    background: var(--card-bg-top);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

    .document-card:not(.empty):hover[b-c63n3xsa8c] {
        box-shadow: var(--shadow-small);
        background: var(--card-bg);
    }

.document-card p[b-c63n3xsa8c]{
    white-space: unset;
    line-break: unset;
    text-overflow: unset;
}

    .document-card.empty[b-c63n3xsa8c] {
        
    }

    .document-card.empty p[b-c63n3xsa8c]{

    }


    .document-info[b-c63n3xsa8c] {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        flex: 1;
        overflow: hidden;
    }

.document-icon[b-c63n3xsa8c] {
    color: var(--bg-dark3);
    flex-shrink: 0;
}

[data-theme="dark"] .document-icon[b-c63n3xsa8c] {
    color: var(--text-light);
    opacity: 0.4;
}

.document-icon span[b-c63n3xsa8c] {
    font-size: 32px;
}

.document-details[b-c63n3xsa8c] {
    flex: 1;
}
.doc-header[b-c63n3xsa8c] {
    display: flex;
    flex-direction: row;
    gap: 4px;
}
    .doc-header .contract-status[b-c63n3xsa8c],
    .doc-header[b-c63n3xsa8c]  .contract-status {
        font-size: 0.8rem;
        padding: .15rem 0.5rem;
        border-radius: 0.5rem;
        background: var(--card-bg);
        color: var(--input-text);
        display: flex;
        flex-direction: row;
        align-items: center;
    }
        .doc-header .contract-status span[b-c63n3xsa8c],
        .doc-header[b-c63n3xsa8c]  .contract-status span{
            font-size: 0.8rem;
            margin-right: 4px;
        }

        .doc-header .contract-status.warning[b-c63n3xsa8c],
        .doc-header[b-c63n3xsa8c]  .contract-status.warning {
            color: var(--warning);
            background: var(--card-bg-warning);
        }

        .document-title[b-c63n3xsa8c] {
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-dark);
            margin: 0 0 0.25rem 0;
        }

.document-meta[b-c63n3xsa8c] {
    font-size: 0.875rem;
    color: var(--text-dark-accent);
    margin: 0 0 0.25rem 0;
}

.document-uploader[b-c63n3xsa8c] {
    font-size: 0.75rem;
    color: var(--text-dark-accent);
    margin: 0;
}

.document-actions[b-c63n3xsa8c] {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 0.5rem;
    width: fit-content;
}
    .document-actions[b-c63n3xsa8c]  .delete-button {
        display: none;
    }
    .document-card:hover .document-actions[b-c63n3xsa8c]  .delete-button {
        display: flex;
    }


.document-card[b-c63n3xsa8c]  .menu-container {
    margin: 0;
    opacity: 0;
    max-width: 0;
    transition: ease all.2s;
}
.document-card:hover[b-c63n3xsa8c]  .menu-container {
    margin-left: 0.5rem;
    opacity: 1;
    max-width: 2rem;
    transition: ease all.2s;
}

[b-c63n3xsa8c] .create-new-employee-contract {
    width: fit-content;
    margin-left: auto;
    border-radius: 2rem;
}

.contract-templates-container[b-c63n3xsa8c]{
    position: relative;
}

.contract-templates-dialog[b-c63n3xsa8c] {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
    max-width: 350px;
    background: var(--card-bg-top50);
    padding: 8px;
    border-radius: 16px;
    backdrop-filter: blur(6px);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-large);
}
    .contract-templates-dialog label[b-c63n3xsa8c] {
        margin-top: 4px;
    }
.contract-templates-dialog p[b-c63n3xsa8c]{
}
    .contract-templates-dialog .contract-template[b-c63n3xsa8c] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        margin: 0 4px 4px;
        background: var(--card-bg);
        padding: 6px 16px 6px 6px;
        border-radius: 12px;
    }
        .contract-templates-dialog .contract-template span[b-c63n3xsa8c] {
            color: var(--primary-gradient-color);
        }
    .contract-templates-dialog .contract-template p[b-c63n3xsa8c]{
        flex: 1;
        margin: 0;
    }
        .contract-templates-dialog .contract-template[b-c63n3xsa8c]  button {
            display: none;
        }
        .contract-templates-dialog .contract-template:hover[b-c63n3xsa8c] {
            background: var(--card-bg-top);
        }
        .contract-templates-dialog .contract-template:hover[b-c63n3xsa8c]  button {
            display: flex;
        }

        .contract-templates-dialog .contract-template.no-template[b-c63n3xsa8c] {
            margin-top: 4px;
            outline: 2px solid var(--primary50);
        }


@media (max-width: 768px) {
    .file-upload-zone[b-c63n3xsa8c] {
        padding: 2rem 1rem;
    }

    .upload-actions[b-c63n3xsa8c] {
        flex-direction: column;
    }

    .document-card[b-c63n3xsa8c] { 
        gap: 1rem;
        align-items: flex-start;
    }

    .document-info[b-c63n3xsa8c] {
        width: 100%;
    }
}

@media (max-width: 1400px) {
    .col-email[b-c63n3xsa8c], .col-position[b-c63n3xsa8c] {
        flex: 0;
    } 
}

@media (max-width: 1100px) {
    .employee-list:not(.open) .employee-item[b-c63n3xsa8c] {
        margin: .15rem 0;
        padding: .3rem;
    }

    .employee-item p[b-c63n3xsa8c] {
        font-size: 12px;
    }

    .open .widget[b-c63n3xsa8c] {
        display: none !important;
    }

    .panel.open .create[b-c63n3xsa8c] {
        margin: 0;
    }

    [b-c63n3xsa8c] .tooltip-container:has(.collapse-widget) {
        display: none;
    }
}

@media (max-width: 900px) {
    .panel:not(.open)[b-c63n3xsa8c] {
        border: none;
        margin: 0;
        padding: 1rem 0;
    }

    .employee-list[b-c63n3xsa8c] {
        margin-right: 0rem !important;
    }
}
/* _content/PowerPlan/Pages/FreeShiftsPage.razor.rz.scp.css */

.next-shifts[b-u4p23cofo2] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--bg-dark);
    padding: 0.6rem;
    border-radius: 2rem;
    gap: 8px;
}

    .next-shifts .row[b-u4p23cofo2] {
        display: flex;
        flex-direction: row;
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        gap: 8px;
    }

    .next-shifts h2[b-u4p23cofo2] {
        color: var(--input-text);
        font-weight: 900;
        margin-bottom: 0;
    }

body[data-theme='dark'] .next-shifts h2[b-u4p23cofo2] {
    color: var(--text-dark-accent);
}

.next-shifts .help-dialog[b-u4p23cofo2] {
    position: relative;
    max-height: 9.5rem;
    min-height: 9.5rem;
    margin-top: .5rem;
    aspect-ratio: 1/1;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: var(--bg-dark2);
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    flex-direction: column;
    border-bottom: 4px solid var(--primary);
    box-shadow: inset 0 -1rem 3rem -1.6rem var(--primary);
    overflow: hidden;
}

        .next-shifts .help-dialog[b-u4p23cofo2]:after {
            content: " ";
            position: absolute;
            right: -4rem;
            width: 104%;
            height: 30%;
            transform: rotate(9deg);
            border-radius: 40%;
            background: var(--bg-dark3);
            filter: blur(1.5rem);
            opacity: .8;
        }

        .next-shifts .help-dialog[b-u4p23cofo2]:before {
            content: " ";
            position: absolute;
            left: -3rem;
            bottom: -3rem;
            width: 110%;
            height: 75%;
            transform: rotate(9deg);
            border-radius: 40%;
            background: var(--primary);
            filter: blur(3rem);
            opacity: .7;
            z-index: 1;
        }

        .next-shifts .help-dialog h2[b-u4p23cofo2] {
            color: var(--primary-variable);
            margin: 0.5rem 0 0;
            z-index: 2;
        }

    .next-shifts .help-dialog p[b-u4p23cofo2] {
        z-index: 2;
        overflow: unset;
        white-space: unset;
        color: var(--text-light);
        margin-top: 0;
        margin-bottom: auto;
    }

            .next-shifts .help-dialog p b[b-u4p23cofo2] {
                color: inherit;
                font-weight: 900;
            }

        .next-shifts .help-dialog span[b-u4p23cofo2]{
            position: absolute;
            top: 0;
            right: 0;
            margin: 1rem;
            background: var(--card-bg20);
            color: var(--text-light);
            font-weight: 900;
            font-size: 1rem;
            padding: .25rem;
            border-radius: 50%;
            cursor: pointer;
            z-index: 3;
        }

        [data-theme='dark'] .next-shifts .help-dialog[b-u4p23cofo2] {
            border-color: var(--primary-variable);
        }

    [data-theme='dark'] .next-shifts .help-dialog h2[b-u4p23cofo2] {
        color: var(--text-dark);
    }

body[data-theme='dark'] .next-shifts .help-dialog[b-u4p23cofo2]:after {
    background: var(--card-bg);
}  

.next-shifts[b-u4p23cofo2]  .nextshift {
    height: 9rem;
}

.date-cell[b-u4p23cofo2], .timespan-cell[b-u4p23cofo2], .type-cell .freed-wrapper[b-u4p23cofo2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .timespan-cell .punch[b-u4p23cofo2] {
        font-size: 1rem;
        background: var(--bg-dark);
        color: var(--input-text);
        padding: 5px;
        border-radius: 8px;
    }

.action-buttons[b-u4p23cofo2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}
/* _content/PowerPlan/Pages/Generate.razor.rz.scp.css */
.flex-c[b-7a9efp35s0] {
    --ch: 4.4rem; /*controlls height*/
    --ct: 7.5rem; /*select-template height*/
    --b: -.5rem;
    --selected-shifts-offset: 0rem;
    --select-template-offset: 0rem;
    --flow-container-constant: 0.4rem;
    --date-container-constant: 0.1rem;
    --select-template-constant: -0.1rem;
    --date-action-container-constant: 4.6rem;
    position: relative;
    margin-top: -8px;
}

    .flex-c.show-cost[b-7a9efp35s0] {
        /*--date-action-container-constant: 5.4rem;*/
    }

    .planning-container[b-7a9efp35s0] {
        gap: .5rem;
        display: flex;
        position: relative;
    }

.controlls[b-7a9efp35s0] {
    position: sticky;
    top: var(--b);
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 4px;
    z-index: 10;
    box-sizing: border-box;
    overflow: auto hidden;
    overscroll-behavior: contain;
    transition: ease .2s top, ease .2s background, ease .2s margin, ease .2s max-height !important;
}

    .controlls[b-7a9efp35s0]::-webkit-scrollbar {
        height: 7px;
    }

    .controlls[b-7a9efp35s0]::-webkit-scrollbar-thumb { 
        border: 2px solid var(--bg);
    }
        .controlls[b-7a9efp35s0]::-webkit-scrollbar-thumb:hover { 
            border: 0px solid var(--bg);
        }


    .controlls:not(.selected-shifts):not(.select-template)[b-7a9efp35s0] {
        padding-top: 0.8rem;
    }

.card[b-7a9efp35s0] {
    border-radius: 1rem;
    border: none;
    background: transparent;
    padding: 0rem 0rem 0rem 0rem;
}

/* When .selected-shifts is visible */
.flex-c:has(.controlls.selected-shifts:not(.hide))[b-7a9efp35s0] {
    --selected-shifts-offset: var(--ch);
    --flow-container-constant: 0.9rem;
    --date-container-constant: -0.85rem;
    --select-template-constant: 0rem;
}

/* When .select-template is visible */
.flex-c:has(.controlls.select-template:not(.hide))[b-7a9efp35s0] {
    --select-template-offset: var(--ct);
}

/* For .flow-container */
.flex-c[b-7a9efp35s0]  .flow-container {
    top: calc( var(--b) + var(--ch) + var(--selected-shifts-offset) + var(--select-template-offset) + var(--flow-container-constant) );
}

/* For .date-container */
.flex-c[b-7a9efp35s0]  .date-container:not(.buttons) {
    top: calc( var(--b) + var(--ch) + var(--selected-shifts-offset) + var(--date-container-constant) );
}
/* For .date-container container */
.flex-c[b-7a9efp35s0]  .date-action-container {
    top: calc( var(--b) + var(--ch) + var(--selected-shifts-offset) + var(--select-template-offset) + var(--date-container-constant) + var(--date-action-container-constant));
}

/* For .select-template */
.flex-c .select-template[b-7a9efp35s0] {
    top: calc( var(--b) + var(--ch) + var(--selected-shifts-offset) + var(--select-template-constant));
}


.roster-container[b-7a9efp35s0] {
    transition: ease .2s background;
    margin-bottom: 1rem;
}

.row[b-7a9efp35s0] {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.controlls .sep[b-7a9efp35s0] {
    min-width: 0.1rem;
    min-height: 2rem;
    background: var(--bg-darker);
    border-radius: .2rem;
    height: 100%;
    margin: 0 .5rem;
}

[b-7a9efp35s0] .saved {
    background: var(--bg);
}

[b-7a9efp35s0] .undo {
    background: var(--bg);
}


.controlls .buttons[b-7a9efp35s0]  button {
    margin: 0 !important;
}

.controlls .buttons[b-7a9efp35s0] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    background: var(--card-bg);
    border: 0.1rem solid var(--card-border50);
    padding: .3rem;
    border-radius: 1rem;
    flex: 1;
    gap: 8px;
    height: 100%;
}

    .controlls .buttons[b-7a9efp35s0]:before {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 0.1rem);
        left: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-dark-mute);
    }


    .controlls .buttons.sites[b-7a9efp35s0],
    .controlls .buttons.template[b-7a9efp35s0],
    .controlls .buttons.template-save[b-7a9efp35s0] {
        flex: unset;
        width: auto;
    }
        .controlls .buttons.sites[b-7a9efp35s0]{
            padding-right: .5rem;
        }

        .controlls .buttons.publishing[b-7a9efp35s0],
        .controlls .buttons.date-container[b-7a9efp35s0] {
            flex: unset;
        }

    .controlls .buttons.root[b-7a9efp35s0] {
        left: 0;
        z-index: 1;
        position: sticky;
        box-shadow: 0 0 16px 8px var(--bg);
    }

    .controlls .buttons[b-7a9efp35s0]  .saved {
        margin: 0 1rem;
    }

        .controlls .buttons[b-7a9efp35s0]  .saved.no-glow,
        .controlls .buttons[b-7a9efp35s0]  .publish:not(.WarningMute) {
            background: transparent;
            margin: 0;
            box-shadow: none;
            border: none;
        }

            .controlls .buttons[b-7a9efp35s0]  .publish:not(.WarningMute):hover {
                background: var(--bg-dark2);
                color: var(--primary);
            }

    .controlls .buttons[b-7a9efp35s0]  .publish.WarningMute {
        margin: 0;
        --shadow-color: 337deg 43% 67%;
        --shadow-low: 0px 1px 1px hsl(var(--shadow-color) / 0.52), 0px 1px 1px -2px hsl(var(--shadow-color) / 0.38), 0px 2.5px 2.2px -4.1px hsl(var(--shadow-color) / 0.25);
        box-shadow: var(--shadow-low);
        border: .1rem solid var(--warning20);
        border-bottom: 2px solid var(--warning20);
    }

body[data-theme='dark'] .controlls .buttons[b-7a9efp35s0]  .publish.WarningMute {
    --shadow-color: 337deg 43% 12%;
}

.controlls .buttons p[b-7a9efp35s0] {
    color: var(--text-dark);
    white-space: nowrap;
}

.controlls .buttons[b-7a9efp35s0]  button {
    box-shadow: 0px 0.7px 0.6px hsl(var(--shadow-color) / 0.52), 0px 1px 0.9px -2px hsl(var(--shadow-color) / 0.38), 0px 2.5px 2.2px -4.1px hsl(var(--shadow-color) / 0.25);
}

    .controlls .buttons[b-7a9efp35s0]  button:not(.no-text) {
        padding: 0.4rem 1rem;
    }

    .controlls .buttons[b-7a9efp35s0]  button.DefaultMute {
        border: none;
    }

    .controlls .buttons[b-7a9efp35s0]  button .title {
        height: 1.5rem;
        line-height: 1.5rem;
    }

.controlls .buttons label[b-7a9efp35s0] {
    font-weight: 800;
    font-family: var(--font-header);
    font-size: .7rem;
    top: 0;
    position: absolute;
    color: var(--input-text);
}

.controlls .buttons .positions[b-7a9efp35s0] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .controlls .buttons .positions .positions-list[b-7a9efp35s0] {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        padding: 0 .5rem;
        height: 2.5rem;
        border-radius: .6rem;
        background: var(--card-bg-top);
        gap: 4px;
    }

        .controlls .buttons .positions .positions-list p:not(.position)[b-7a9efp35s0] {
            margin: 0;
            margin-right: .5rem;
        }

.controlls .buttons .position div[b-7a9efp35s0] {
    width: unset;
    height: unset;
    min-width: unset;
    min-height: unset;
    max-width: unset;
    max-height: unset;
    width: fit-content;
    position: relative;
    padding: 0.3rem 0.8rem;
    border-radius: 0.2rem;
    box-sizing: border-box;
    font-weight: 900;
    border: 0.1rem solid black;
    z-index: 1;
    transition: background .2s cubic-bezier(0.44, -0.07, 0.15, 0.9);
    margin: 0;
    padding: .3rem .5rem;
    font-size: .8rem;
}

.controlls .buttons p:not(.position)[b-7a9efp35s0] {
    background: var(--card-bg-top);
    padding: 0 0.8rem;
    margin: 0;
    border-radius: 0.6rem;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-dark80);
    height: 2.5rem;
    display: flex;
    align-items: center;
}

.controlls .buttons .positions .positions-list[b-7a9efp35s0]  span {
    background: transparent;
    color: var(--text-dark);
    font-size: 1.2rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: cubic-bezier(0.44, -0.07, 0.15, 0.9) .1s background;
    margin: unset;
}

    .controlls .buttons .positions .positions-list[b-7a9efp35s0]  span:hover {
        background: var(--card-border);
    }

.controlls .buttons[b-7a9efp35s0]  .clear {
    border: none;
    box-shadow: none;
    padding: 0.3rem;
    margin: auto 0;
}

    .controlls .buttons[b-7a9efp35s0]  .clear span {
        font-weight: 900;
        color: var(--text-dark);
        font-size: 1rem !important;
    }

.controlls.selected-shifts .buttons .action-label[b-7a9efp35s0],
.controlls.selected-shifts .buttons[b-7a9efp35s0]  .input-component label {
    position: relative;
    font-size: 10px;
    font-weight: 400;
    font-family: var(--font-body);
    display: none;
}

[b-7a9efp35s0] .new-shift-draggable-button {
    padding-left: .5rem !important;
    gap: 5px;
    cursor: grab;
}
[b-7a9efp35s0] .new-shift-draggable-button span {
    opacity: .4;
}

.controlls.selected-shifts[b-7a9efp35s0] {
    max-height: 5rem;
    top: calc(var(--b) + var(--ch));
    transition: ease .2s max-height, ease .2s background, ease .2s border;
    z-index: 7;
    overflow: unset;
}

    .controlls.selected-shifts.hide[b-7a9efp35s0] {
        max-height: 0rem;
        margin: 0;
        overflow: hidden;
    }

.buttons[b-7a9efp35s0]  .input-component .template-name-action,
.controlls.selected-shifts[b-7a9efp35s0]  input.add-tag,
.controlls.selected-shifts[b-7a9efp35s0]  input.add-comment,
[b-7a9efp35s0] .start-time .input-display,
[b-7a9efp35s0] .end-time .input-display {
    margin: 0;
    padding-top: .64rem;
    padding-bottom: .64rem;
    border-radius: 0.6rem;
    width: 4rem;
    padding-right: 2.5rem;
}
.controlls.selected-shifts[b-7a9efp35s0]  input.add-comment {
    width: 8rem;
    padding-right: 0;
}

        .controlls.selected-shifts[b-7a9efp35s0]  input.add-tag:focus {
            width: 4rem;
        }

        .controlls.selected-shifts[b-7a9efp35s0]  input.add-comment:focus {
            width: 8rem;
        }

.buttons[b-7a9efp35s0]  .input-component .template-name-action,
[b-7a9efp35s0] .start-time .input-display,
[b-7a9efp35s0] .end-time .input-display {
    width: 6rem;
    padding-right: 0rem;
}

.buttons[b-7a9efp35s0]  .input-component .template-name-action {
    width: 10rem;
}

    .buttons[b-7a9efp35s0]  .input-component .template-name-action:not(.no-action),
    .controlls.selected-shifts[b-7a9efp35s0]  .start-time:not(.no-action) .input-display,
    .controlls.selected-shifts[b-7a9efp35s0]  .end-time:not(.no-action) .input-display {
        width: 5rem;
        padding-right: 1.8rem;
    }

    .buttons[b-7a9efp35s0]  .input-component .template-name-action:not(.no-action) {
        width: 9rem;
        padding-right: 1.8rem;
    }

.buttons[b-7a9efp35s0]  .input-component:has(.template-name-action) .tooltip-container {
    top: 0;
    right: 0;
}

.buttons[b-7a9efp35s0]  .clone-to-template {
    margin-left: auto;
}

.controlls.selected-shifts[b-7a9efp35s0]  .input-component:has(input.add-tag) .max-length-display,
.controlls.selected-shifts[b-7a9efp35s0]  .input-component:has(input.add-comment) .max-length-display {
    position: absolute;
    margin: 0;
    top: calc(100% + 0rem);
    right: 0;
    left: unset;
}

.controlls .buttons[b-7a9efp35s0]  .action {
    margin: 0 !important;
    top: .35rem;
    right: .35rem;
    padding: .25rem;
    opacity: 1;
    pointer-events: unset;
    transform: translateX(0rem);
    transition: ease .2s all;
}

.controlls .buttons[b-7a9efp35s0]  .input-container:has(input:placeholder-shown) .action,
.controlls .buttons[b-7a9efp35s0]  .input-container:has(.no-action) .action {
    opacity: 0;
    pointer-events: none;
    transform: translateX(1rem);
}

.select-template[b-7a9efp35s0] {
    max-height: 9rem; 
    z-index: 1;
    position: relative;
    top: 0 !important;
}

    .select-template.hide[b-7a9efp35s0] {
        max-height: 0;
        margin: 0;
    }

.roster-container[b-7a9efp35s0] {
    min-width: 50rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.error-container[b-7a9efp35s0] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: var(--card-bg);
    border-radius: 1rem;
    padding: .5rem;
    z-index: 1;
}

    .error-container .error-summery[b-7a9efp35s0] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        overflow-x: auto;
    }


        .error-container .error-summery .error-card[b-7a9efp35s0] {
            position: relative;
            flex: 1;
            max-width: 15rem;
            min-width: 8rem;
            background: var(--card-bg-top);
            border-radius: .5rem;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            outline: 0rem solid var(--primary);
            cursor: pointer;
            transition: ease .2s background, ease .2s color;
        }

            .error-container .error-summery .error-card:not(.total):not(:has(.button:hover)):hover[b-7a9efp35s0],
            .error-container .error-summery .error-card.selected[b-7a9efp35s0] {
                background: var(--bg-dark)
            }

                .error-container .error-summery .error-card:not(.total):not(:has(.button:hover)):hover span[b-7a9efp35s0],
                .error-container .error-summery .error-card.selected span[b-7a9efp35s0] {
                    color: var(--bg-dark2)
                }

[data-theme='dark'] .error-container .error-summery .error-card:not(.total):not(:has(.button:hover)):hover span[b-7a9efp35s0],
[data-theme='dark'] .error-container .error-summery .error-card.selected span[b-7a9efp35s0] {
    color: var(--default-hover);
}

.error-container .error-summery .error-card.selected h3[b-7a9efp35s0] {
    color: var(--primary);
}

.error-container .error-summery .error-card h3[b-7a9efp35s0] {
    margin: 0;
    font-size: 1.5rem;
    transition: ease .2s color;
}

.error-container .error-summery .error-card label[b-7a9efp35s0] {
    margin: 0;
    color: var(--text-dark);
    z-index: 1;
    cursor: unset;
    transition: ease .2s color;
}

.error-container .error-summery .error-card span[b-7a9efp35s0] {
    position: absolute;
    font-size: 5rem;
    right: -0.5rem;
    bottom: -.75rem;
    font-weight: 400;
    transition: ease .2s color;
    color: var(--bg-dark)
}

.error-container .error-summery .error-card .employees[b-7a9efp35s0] {
    position: absolute;
    right: 1.5rem;
    bottom: .5rem;
}

.error-container .error-summery .error-card.total[b-7a9efp35s0] {
    max-width: 5rem;
    min-width: 4rem;
    background: var(--card-bg-warning);
    box-shadow: inset var(--warning) 0 0 4rem -2.5rem;
    transition: ease .2s background, ease .2s color, ease .2s box-shadow;
}

    .error-container .error-summery .error-card.total:not(:has(.button:hover)):hover[b-7a9efp35s0] {
        background: var(--card-bg-warning);
        box-shadow: inset var(--warning) 0 0 6rem -.5rem;
    }

        .error-container .error-summery .error-card.total:not(:has(.button:hover)):hover h3[b-7a9efp35s0] {
            color: var(--card-bg-warning);
        }

    .error-container .error-summery .error-card.total h3[b-7a9efp35s0] {
        color: var(--warning);
        font-size: 2rem;
    }

.error-container .error-summery .button[b-7a9efp35s0] {
    position: absolute;
    top: 0;
    right: 0;
    margin: 4px;
    font-size: 12px;
    background: var(--bg-dark);
    padding: 2px 6px;
    border-radius: 16px;
    cursor: pointer;
    transition: ease .2s background;
}

    .error-container .error-summery .button:hover[b-7a9efp35s0] {
        background: var(--bg-dark2);
    }

.error-container .error-summery .error-card.total .button[b-7a9efp35s0] {
    background: var(--warning20);
}

    .error-container .error-summery .error-card.total .button:hover[b-7a9efp35s0] {
        background: var(--warning50);
    }

.error-container:not(.collapse) .error-summery .button.expand[b-7a9efp35s0] {
    display: none;
}

.error-container .error-summery .button.expand[b-7a9efp35s0] {
    position: relative;
    margin: 0;
    padding: 0.1rem .15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .error-container .error-summery .button.expand span[b-7a9efp35s0] {
        color: var(--bg-dark3)
    }

.error-container.collapse .error-summery .error-card span[b-7a9efp35s0],
.error-container.collapse .error-summery .error-card .employees[b-7a9efp35s0],
.error-container.collapse .error-summery .error-card .button[b-7a9efp35s0] {
    display: none;
}

.error-container.collapse .error-summery .error-card[b-7a9efp35s0] {
    flex-direction: row;
    align-items: center;
    padding: .5rem 1rem;
    gap: .5rem;
    min-width: 5rem;
    width: fit-content;
}

    .error-container.collapse .error-summery .error-card h3[b-7a9efp35s0] {
        font-size: 1rem;
        order: 1;
    }

    .error-container.collapse .error-summery .error-card label[b-7a9efp35s0] {
        font-size: 0.9rem;
        order: 2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .error-container.collapse .error-summery .error-card.total[b-7a9efp35s0] {
        min-width: unset;
        width: fit-content;
        max-width: unset;
        flex: unset;
    }

.error-container .error-list[b-7a9efp35s0] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    max-height: 10rem;
    overflow: auto;
}

    .error-container .error-list .error-list-item[b-7a9efp35s0] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: .2rem;
        border-radius: .5rem;
        background: var(--card-bg-top);
    }

        .error-container .error-list .error-list-item[b-7a9efp35s0]  .profilePicture {
            transform: scale(0.8);
        }

        .error-container .error-list .error-list-item p:not(.type)[b-7a9efp35s0] {
            margin: 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .error-container .error-list .error-list-item .name[b-7a9efp35s0] {
            flex: 2;
        }

        .error-container .error-list .error-list-item .date[b-7a9efp35s0] {
            flex: 1;
        }

        .error-container .error-list .error-list-item .reason[b-7a9efp35s0] {
            flex: 4;
        }

        .error-container .error-list .error-list-item .type[b-7a9efp35s0] {
            margin: 0;
            min-width: 7rem;
            width: fit-content;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }

.select-site[b-7a9efp35s0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    background: var(--bg-dark);
    padding: 1.5rem 0 2rem;
    border-radius: .5rem;
}
.select-site h2[b-7a9efp35s0] {
    margin: 0;
    color: var(--input-text);
}
    .select-site .site-list[b-7a9efp35s0] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .5rem;
    }

.card:has(.select-site)[b-7a9efp35s0]{
    padding: 1rem;
}

.onboarding-container[b-7a9efp35s0] {
    position: fixed;
    top: 0;
    left: 0px;
    height: 100%;
    max-height: 100vh;
    width: calc(100% - 8px);
    z-index: 150;
    background: transparent;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dialog-c-in-onboarding-b-7a9efp35s0 .5s ease 1 forwards;
}

[data-theme='dark'] .onboarding-container[b-7a9efp35s0] {
    animation: dialog-c-in-onboarding-dark-b-7a9efp35s0 .5s ease 1 forwards;
}

@keyframes dialog-c-in-onboarding-b-7a9efp35s0 {
    0% {
        backdrop-filter: blur(0px);
        background: transparent;
    }

    100% {
        backdrop-filter: blur(4px);
        background: var(--bg-dark350);
    }
}

@keyframes dialog-c-in-onboarding-dark-b-7a9efp35s0 {
    0% {
        backdrop-filter: blur(0px);
        background: transparent;
    }

    100% {
        backdrop-filter: blur(4px);
        background: #000000aa;
    }
}

.onboarding-container .onboarding-dialog[b-7a9efp35s0] {
    position: relative;
    background: var(--card-bg);
    padding: 1rem 2rem;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: translateY(5rem);
    opacity: 0;
    filter: blur(16px);
    max-width: calc(100% - 6rem);
    border: .1rem solid var(--card-border);
    overflow: hidden;
    box-shadow: var(--shadow-large);
    animation: dialog-in-onboarding-b-7a9efp35s0 .5s ease 1 forwards;
}


@keyframes dialog-in-onboarding-b-7a9efp35s0 {
    0% {
        transform: translateY(5rem);
        opacity: 0;
        filter: blur(16px);
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
        filter: blur(0px);
    }
}

.onboarding-container .onboarding-dialog .guide-icon[b-7a9efp35s0] {
    position: absolute;
    top: -4rem;
    right: 0.5rem;
    fill: url(#gradient) #fff;
    width: 180px;
    opacity: .3;
}

#gradient[b-7a9efp35s0] {
    --color-stop: var(--input-text);
    --color-start: var(--bg-dark2-50);
}

.onboarding-container .onboarding-dialog h2[b-7a9efp35s0] {
    margin: 1rem 2rem 0.5rem;
    color: var(--input-text);
}

.onboarding-container .onboarding-dialog h4[b-7a9efp35s0] {
    margin: 0 1rem 0rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-body);
    opacity: .8;
}

.onboarding-container .onboarding-dialog h2[b-7a9efp35s0] {
    margin: 0rem 2rem 1rem;
    color: var(--input-text);
    font-size: 2rem;
    text-align: left;
    width: calc(100% - 2rem);
}

.onboarding-container .onboarding-dialog h4[b-7a9efp35s0] {
    margin: 2rem 2rem 0rem;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-body);
    opacity: .8;
    width: calc(100% - 2rem);
}

.onboarding-container .onboarding-dialog .onboarding-option[b-7a9efp35s0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    background: var(--bg-dark);
    border-radius: .5rem;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: ease .2s all;
}

    .onboarding-container .onboarding-dialog .onboarding-option.done[b-7a9efp35s0] {
        opacity: .5;
    }

    .onboarding-container .onboarding-dialog .onboarding-option .check[b-7a9efp35s0] {
        --s: 1.5rem;
        height: var(--s);
        width: var(--s);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--card-bg);
        border-radius: .25rem;
    }

    .onboarding-container .onboarding-dialog .onboarding-option.done .check[b-7a9efp35s0] {
        background: var(--primary);
    }

    .onboarding-container .onboarding-dialog .onboarding-option .check span[b-7a9efp35s0] {
        font-size: 110%;
        font-weight: 900;
        color: Var(--input-text);
        opacity: .25;
        transition: ease .2s all;
    }

    .onboarding-container .onboarding-dialog .onboarding-option.done .check span[b-7a9efp35s0] {
        color: var(--text-light);
        opacity: 1;
        box-shadow: var(--primary) 0 0 16px 2px;
    }

    .onboarding-container .onboarding-dialog .onboarding-option .col[b-7a9efp35s0] {
        flex: 1;
    }

        .onboarding-container .onboarding-dialog .onboarding-option .col h3[b-7a9efp35s0] {
            color: var(--input-text);
            margin: 0;
            transition: ease .2s color;
        }

    .onboarding-container .onboarding-dialog .onboarding-option.done .col h3[b-7a9efp35s0] {
        color: var(--primary);
        margin: 0;
    }

    .onboarding-container .onboarding-dialog .onboarding-option .col p[b-7a9efp35s0] {
        margin: 0;
    }

    .onboarding-container .onboarding-dialog .onboarding-option img[b-7a9efp35s0] {
        height: 3rem;
        filter: invert(57%) sepia(63%) saturate(287%) hue-rotate(181deg) brightness(97%) contrast(102%);
        transition: ease .2s filter;
    }


    .onboarding-container .onboarding-dialog .onboarding-option:not(.done):hover img[b-7a9efp35s0] {
        filter: invert(39%) sepia(62%) saturate(7497%) hue-rotate(207deg) brightness(92%) contrast(106%);
    }

    .onboarding-container .onboarding-dialog .onboarding-option:not(.done):hover[b-7a9efp35s0] {
        transform: scale(1.02);
        cursor: pointer;
        background: var(--bg-dark2-50);
    }

        .onboarding-container .onboarding-dialog .onboarding-option:not(.done):hover .col h3[b-7a9efp35s0] {
            color: var(--primary);
        }

        .onboarding-container .onboarding-dialog .onboarding-option:not(.done):hover .check span[b-7a9efp35s0] {
            box-shadow: var(--primary) 0 0 16px 2px;
        }

.onboarding-container .onboarding-dialog .info-box[b-7a9efp35s0] {
    background: var(--bg-dark50);
    display: flex;
    gap: 3px;
}


body[data-theme='dark'] .onboarding-container .onboarding-dialog h2[b-7a9efp35s0] {
    color: var(--label-text);
}

body[data-theme='dark'] .onboarding-container .onboarding-dialog .onboarding-option .col h3[b-7a9efp35s0] {
    color: var(--label-text);
}

body[data-theme='dark'] #gradient[b-7a9efp35s0] {
    --color-stop: var(--bg-dark3);
    --color-start: var(--bg-dark2);
}


.planner-walkthrogh[b-7a9efp35s0]  .date {
    opacity: 1 !important;
}
.planner-walkthrogh[b-7a9efp35s0]  .today {
    background: unset;
}


[b-7a9efp35s0] .roster-component {
    width: calc(100% - 0.5rem);
    margin: 0;
    padding: 0 0 0 0.5rem;
}
/* _content/PowerPlan/Pages/Index.razor.rz.scp.css */
.dashboard-content[b-mwqyq460ig] {
    position: relative;
    width: 100%;
    height: calc(100vh - 8rem);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .dashboard-content .row[b-mwqyq460ig] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: inherit;
    }

        .dashboard-content .row > .col[b-mwqyq460ig] {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            flex: 3;
            max-width: 100%;
            gap: 8px;
        }

        .dashboard-content .row .card[b-mwqyq460ig] {
            flex: 1;
            position: relative;
            height: 16rem;
            background: var(--bg);
            border-width: .15rem;
            border-style: dashed;
            border-color: var(--text-dark-accent);
            border: none;
            background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='%23ADB9C2FF' stroke-width='2' stroke-dasharray='12%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
            border-radius: 16px;
        }


    .dashboard-content .card.hidden-scrollbar[b-mwqyq460ig] {
        --thumb-color: var(--thumb-color50);
    }

        .dashboard-content .card.hidden-scrollbar:hover[b-mwqyq460ig] {
            --thumb-color: var(--thumb-color2);
        }

    .dashboard-content .row .card .row[b-mwqyq460ig] {
        display: flex;
        flex-direction: row;
    }

    .dashboard-content .row .card h6[b-mwqyq460ig] {
        margin: 0;
        color: var(--text-dark-mute);
        opacity: .7;
    }

    .dashboard-content .row .card.freed .empty-label-container[b-mwqyq460ig] {
        --x-bg: var(--bg-dark);
        --x-color: var(--bg-dark);
        height: 8rem;
    } 

    .dashboard-content .row .card.freed .empty-label-container[b-mwqyq460ig] {
        height: 100%;
    }

.row .nextshifts .empty-label-container[b-mwqyq460ig] {
    margin: 0 1rem;
    width: calc(100% - 2rem);
}

.dashboard-content .card.freed[b-mwqyq460ig] {
    display: flex;
    flex-direction: column;
    height: auto;
    border: none;
    background: var(--bg-dark);
    min-width: 30rem;
}

    .dashboard-content .card.freed .collumns[b-mwqyq460ig] {
        display: flex;
        flex-direction: row;
        flex: 1;
        gap: 4px;
    }

    .dashboard-content .card.freed .col[b-mwqyq460ig] {
        display: flex;
        flex-direction: column;
    }

        .dashboard-content .card.freed .col:last-of-type[b-mwqyq460ig] {
            flex: 1;
            overflow: hidden;
            min-width: 12rem;
        }

    .dashboard-content .card.freed[b-mwqyq460ig]  .nextshift.freed:not(.small) {
        border: var(--primary) .2rem solid;
        max-height: 8.5rem;
    }

    .dashboard-content .card.freed[b-mwqyq460ig]  .nextshift.freed .date-container .profilePicture {
        margin-right: .5rem;
    }

.dashboard-content .row.first .card[b-mwqyq460ig] {
    max-height: 20.9rem;
    margin-bottom: 0;
}

    .dashboard-content .row.first .card.nextshifts[b-mwqyq460ig] {
        padding: 0rem;
        border: none;
        background: none;
        display: flex;
        flex-direction: column;
    }

.dashboard-content .row .card h4[b-mwqyq460ig] {
    font-size: 1.4rem;
    font-weight: 900;
    margin: .5rem 0 .5rem 0;
    margin-right: 1rem;
    color: var(--bg-dark3);
}

body[data-theme='dark'] .dashboard-content .row .card h4[b-mwqyq460ig] {
    color: var(--text-dark-accent);
}

    .card .card-head[b-mwqyq460ig] {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }

    .card .card-head a[b-mwqyq460ig] {
        color: var(--default);
        background: var(--bg-dark2);
        font-size: 12px;
        font-family: var(--font-body);
        font-weight: 600;
        padding: 2px 5px;
        border-radius: 4px;
        text-decoration: none;
        transition: ease .2s background;
    }

body[data-theme='dark'] .card .card-head a[b-mwqyq460ig] {
    background: var(--bg-dark3);
    color: var(--label-text);
}


        .card .card-head a:hover[b-mwqyq460ig] {
            background: var(--bg-dark3);
        }

        .dashboard-content .next-shifts[b-mwqyq460ig] {
            display: flex;
            flex-direction: row;
            gap: 4px;
        }

.dashboard-content .next-shift-small[b-mwqyq460ig] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    max-height: 12.5rem;
    overflow-y: scroll;
    overflow-x: hidden;
    align-content: flex-start;
    gap: 4px;
    padding-top: .5rem;
}

    .dashboard-content .next-shift-small[b-mwqyq460ig]  .nextshift:first-of-type {
        display: none !important;
    }


.dashboard-content .row .card[b-mwqyq460ig]  .nextshift.now .profilePicture {
    background: var(--bg-darker);
}

.dashboard-content .row .card.news[b-mwqyq460ig] {
    background: var(--primary-gradient);
    background: linear-gradient(155deg, var(--primary-gradient-color) 0%, var(--primary) 53%, var(--primary-hover) 100%);
    border: none;
}

    .dashboard-content .row .card.news h4[b-mwqyq460ig] {
        color: var(--text-light);
    }

    .dashboard-content .row .card.news[b-mwqyq460ig]:before {
        content: " ";
        position: absolute;
        margin: 0;
        top: 4px;
        left: 0;
        z-index: -1;
        border-radius: .7rem;
        height: 100%;
        width: 100%;
        background: var(--primary-gradient);
        background: linear-gradient(110deg, var(--primary-gradient-color) 8%, var(--primary) 100%);
        opacity: .8;
        filter: blur(8px);
    }



.dashboard-content .actions[b-mwqyq460ig] {
    display: flex;
    flex-direction: row;
    gap: 16px;
    background: var(--bg-dark);
    padding: 12px;
    border-radius: 16px;
    height: fit-content;
    margin: auto 0;
}

.dashboard-content .col:has( > .actions)[b-mwqyq460ig] {
    flex: 4;
}

.dashboard-content .actions .action-title[b-mwqyq460ig] {
    flex: 1;
}

.dashboard-content .actions .action[b-mwqyq460ig] {
    border-radius: 8px;
    min-width: 8.8rem;
    max-height: 2.5rem;
    height: auto;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .4rem;
    background: var(--card-bg);
    cursor: pointer;
    border: .1rem solid var(--card-border);
    transition: transform .2s cubic-bezier(0.44, -0.07, 0.15, 0.9), box-shadow .2s cubic-bezier(0.44, -0.07, 0.15, 0.9);
    box-shadow: var(--shadow-low);
    text-decoration: none;
}

    .dashboard-content .actions .action:hover[b-mwqyq460ig] {
        transform: translateY(-.2rem);
        box-shadow: var(--shadow-float);
    }

    .dashboard-content .actions .action p[b-mwqyq460ig] {
        font-size: 14px;
        font-weight: 600;
        margin: 0 .5rem;
    }

    .dashboard-content .actions .action .icon[b-mwqyq460ig] {
        height: auto;
        display: flex;
        align-content: center;
        justify-content: center;
        border-radius: .7rem;
        border: .1rem solid transparent;
        transform: rotate(0);
        position: relative;
        transition: .1s linear transform, filter ease .2s;
        z-index: 2;
        border-color: var(--bg-dark);
        background: var(--bg-dark);
    }

    .dashboard-content .actions .action:hover .icon[b-mwqyq460ig] {
        transform: rotate(45deg);
    }

    .dashboard-content .actions .action .icon[b-mwqyq460ig]:after {
        content: " ";
        position: absolute;
        height: 100%;
        width: 100%;
        top: -.1rem;
        left: -.1rem;
        border-radius: .3rem;
        padding: .1rem;
        background: inherit;
        transition: .1s linear transform;
        transform: rotate(0);
        z-index: -2;
    }

    .dashboard-content .actions .action:hover .icon[b-mwqyq460ig]:after {
        transform: rotate(-45deg);
    }

    .dashboard-content .actions .action .icon img[b-mwqyq460ig] {
        height: 1.2rem;
        margin: .5rem;
        transform: rotate(0);
        filter: var(--primary-filter);
        z-index: 1;
        transition: .1s linear transform;
    }

    .dashboard-content .actions .action:hover .icon img[b-mwqyq460ig] {
        transform: rotate(-45deg);
    }

    .dashboard-content .actions .action.documents-to-sign[b-mwqyq460ig] {
        order: -1;
        border-color: var(--warning20);
        background: var(--card-bg-top);
    }
        .dashboard-content .actions .action.documents-to-sign .icon[b-mwqyq460ig] {
            background: var(--warning-mute);
            border-color: var(--warning10);
        }
            .dashboard-content .actions .action.documents-to-sign .icon img[b-mwqyq460ig] {
                filter: var(--warning-filter);
            }


    .free-shift-container[b-mwqyq460ig] {
        display: flex;
        flex-direction: column;
        align-items: end;
        background: var(--card-bg);
        width: 100%;
        padding-top: 1rem;
        border-radius: .7rem;
        border: .1rem solid var(--card-border);
        min-width: 10rem;
        overflow: hidden;
    }

    .free-shift-container label[b-mwqyq460ig] {
        font-family: var(--font-header);
        font-weight: 800;
        font-size: 1rem;
        padding-left: 2rem;
        color: var(--text-dark);
        width: calc(100% - 1.5rem);
        overflow: hidden
    }

    .free-shift-container p[b-mwqyq460ig] {
        font-family: var(--font-body);
        font-weight: 400;
        margin-left: 1rem;
    }

.free-shifts[b-mwqyq460ig] {
    width: fit-content;
    display: flex;
    margin-left: 1rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.free-shift-list[b-mwqyq460ig] {
    width: 100%;
    overflow-x: scroll;
}

.free-shifts[b-mwqyq460ig]  .tabeable-shift {
    margin: 1rem;
}

.load-more[b-mwqyq460ig] {
    width: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: .5rem;
    cursor: pointer;
    margin-left: 1rem;
}

    .load-more:hover svg[b-mwqyq460ig] {
        transform: translate(5%,0%);
    }

    .load-more:active[b-mwqyq460ig], .load-more:focus[b-mwqyq460ig] {
        outline: .2rem solid #bdcad2;
    }

    .load-more svg[b-mwqyq460ig] {
        width: 4rem;
        height: auto;
        margin: .5rem 0;
        margin-bottom: 0;
        transition: transform ease .2s;
    }

    .load-more p[b-mwqyq460ig] {
        font-size: 1rem;
        text-align: center;
        font-family: var(--font-header);
        font-weight: 800;
        color: #bdcad2;
        margin-top: 0;
        margin-left: 0;
    }

.nextshifts[b-mwqyq460ig] {
    flex: 5 !important;
}

    .nextshifts.card .card-head h4[b-mwqyq460ig],
    .requests.card .card-head h4[b-mwqyq460ig] {
        margin: 0.5rem 1rem 0.25px;
    }

    .nextshifts.card .card-head a[b-mwqyq460ig],
    .requests.card .card-head a[b-mwqyq460ig] {
        margin: 0.5rem 0 0.25px;
    }

.freed[b-mwqyq460ig] {
    flex: 4 !important;
}

.shift-list[b-mwqyq460ig] {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    min-width: 9rem;
    height: 13rem;
    margin-top: 0.5rem;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
}


.dashboard-content .card.requests[b-mwqyq460ig] {
    display: flex;
    flex-direction: column;
    height: unset;
    flex: 0;
    max-height: 25rem;
    padding: 0rem;
    border: none;
    background: none;
    min-width: min(calc(100% - 2rem), 40rem);
    margin-bottom: 1rem;
}

.dashboard-content .card.bulletins[b-mwqyq460ig] {
    display: flex;
    flex-direction: column;
    height: 20rem;
    padding: 0rem;
    border: none;
    background: none;
    min-width: min(calc(100% - 2rem), 30rem);
    z-index: 3;
    flex: 0;
}

.bulletins[b-mwqyq460ig]  .ql-container {
    height: 7rem;
}

.bulletin-ghost[b-mwqyq460ig] {
    position: relative;
    width: calc(100% - 2.6rem);
    height: auto;
    border: .1rem solid var(--card-border);
    padding: 1.3rem;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
}

.bulletin-ghost-row[b-mwqyq460ig] {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: fit-content;
}

    .bulletin-ghost-row section div[b-mwqyq460ig] {
        border-radius: .3rem;
        width: 16rem;
        max-width: calc(100% - 5rem);
        height: 1rem;
        min-height: 1.3rem;
        margin: .2rem .5rem;
    }

        .bulletin-ghost-row section div:last-of-type[b-mwqyq460ig] {
            height: 12px;
            min-height: 12px;
            width: 10rem;
        }

.profile-ghost[b-mwqyq460ig] {
    height: 3rem;
    width: 3rem;
    min-height: 3rem;
    min-width: 3rem;
    max-height: 3rem;
    max-width: 3rem;
    border-radius: .5rem;
}

.bulletin-body-ghost[b-mwqyq460ig] {
    height: 5rem;
    width: 100%;
    margin-top: .5rem;
    border-radius: .3rem;
}

.ghost-detailed-shift-large[b-mwqyq460ig], .ghost-detailed-shift-small[b-mwqyq460ig] {
    min-width: 15rem;
    height: 10rem;
    background: var(--card-bg);
    border: .1rem solid var(--card-border);
    padding: 1.5rem;
    border-radius: .7rem;
    position: relative;
    font-family: var(--font-header);
    margin-right: 1rem;
    margin: .2rem;
    margin-top: .6rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.ghost-detailed-shift-small[b-mwqyq460ig] {
    position: relative;
    margin: .5rem;
    margin-bottom: 0;
    padding: .5rem;
    flex: 1;
    width: unset;
    height: 5rem;
    min-width: 6rem !important;
}

.ghost-detailed-shift-large .row[b-mwqyq460ig] {
    height: 1.5rem;
    min-height: 1.5rem;
    width: 7rem;
    min-width: 7rem;
    max-width: calc(100% - .4rem);
    margin: .2rem;
    border-radius: .3rem;
}

    .ghost-detailed-shift-large .row.first[b-mwqyq460ig] {
        height: 1rem;
        min-height: 1rem;
        width: 4rem;
        min-width: 4rem;
    }

    .ghost-detailed-shift-large .row:nth-of-type(3)[b-mwqyq460ig] {
        height: 1rem;
        min-height: 1rem;
        width: 8rem;
        min-width: 8rem;
    }

.ghost-detailed-shift-large section[b-mwqyq460ig] {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
}

.ghost-detailed-shift-large .p-long[b-mwqyq460ig] {
    height: 3rem;
    min-height: 3rem;
    width: 6rem;
    min-width: 6rem;
    border-radius: .3rem;
    margin: .2rem;
}

.ghost-detailed-shift-small .row[b-mwqyq460ig] {
    height: 1.3rem;
    min-height: 1.3rem;
    width: 5rem;
    min-width: 5rem;
    max-width: calc(100% - 3rem);
    margin: .2rem;
    border-radius: .3rem;
}

    .ghost-detailed-shift-small .row.first[b-mwqyq460ig] {
        height: .8rem;
        min-height: .8rem;
        width: 3rem;
        min-width: 3rem;
    }

    .ghost-detailed-shift-small .row:last-of-type[b-mwqyq460ig] {
        height: .8rem;
        min-height: .8rem;
        width: 4rem;
        min-width: 4rem;
        position: absolute;
        bottom: .5rem;
        left: .5rem;
    }

.text-ghost[b-mwqyq460ig] {
    height: 1.3rem;
    flex: 1;
    margin: .5rem;
    border-radius: .3rem;
}

.action-ghost[b-mwqyq460ig] {
    height: 2rem;
    width: 2rem;
    min-height: 2rem;
    min-width: 2rem;
    margin: .5rem;
    border-radius: .3rem;
}

@media (max-width: 800px) {
    .dashboard-content .actions[b-mwqyq460ig] {
        max-width: unset;
        flex-direction: row;
        margin-top: 0rem;
        margin-bottom: 0rem;
        margin-left: 1rem;
        flex: 1;
    }

        .dashboard-content .actions .action[b-mwqyq460ig] {
            border-radius: .5rem;
            min-width: 5rem;
            flex: 1;
            height: auto;
            min-height: 2.5rem;
        }

            .dashboard-content .actions .action.posts[b-mwqyq460ig] {
                margin: 0rem .5rem;
            }
}

.newsfeed[b-mwqyq460ig] {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 2;
    max-width: 100%;
    background: var(--bg-darker);
    padding: 24px;
    border-radius: 16px;
    opacity: 1
}

    .newsfeed h4[b-mwqyq460ig] {
        margin: 0;
        font-weight: 900;
        font-size: 1.8rem;
        color: var(--bg-dark3);
        font-style: italic;
    }

body[data-theme='dark'] .newsfeed h4[b-mwqyq460ig] {
    color: var(--label-text);
}

        .newsfeed .content[b-mwqyq460ig] {
            width: 100%;
            flex: 1;
            margin-top: .5rem;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 8px;
        }

    .newsfeed .no-news[b-mwqyq460ig] {
        background: var(--bg-dark2);
        margin: auto;
        border-radius: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        padding: 16px;
    }

body[data-theme='dark'] .newsfeed .no-news[b-mwqyq460ig] {
    background: var(--card-bg80);
}
 
 .newsfeed .no-news p[b-mwqyq460ig] {
    font-family: var(--font-header);
    font-weight: 800;
    color: Var(--text-light);
    font-size: 1.3rem;
    text-align: right;
    max-width: 13rem;
}
body[data-theme='dark'] .newsfeed .no-news p[b-mwqyq460ig] {
    color: var(--label-text);
}

    .newsfeed .no-news iframe[b-mwqyq460ig] {
    }

.alerts-container[b-mwqyq460ig] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.missed-shifts[b-mwqyq460ig] {
    position: relative;
    display: flex;
    flex-direction: row;
    min-width: 26rem;
    gap: 8px;
    flex: 1;
    background: var(--card-bg-warning);
    padding: 1rem;
    border-radius: 1rem;
    color: var(--warning-text);
}

    .missed-shifts.admin[b-mwqyq460ig] {
        padding-bottom: 0rem;
    }

    .missed-shifts .col[b-mwqyq460ig] {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .missed-shifts[b-mwqyq460ig]  b {
        font-family: var(--font-header);
        font-weight: 800;
        color: var(--warning-text);
    }

    .missed-shifts[b-mwqyq460ig]  .tooltip-container:has(.close){ 
    }

    .missed-shifts[b-mwqyq460ig]  .close {
        border-radius: 50%;
        margin-top: .1rem;
        padding: .3rem;
        cursor: pointer;
        transition: ease .2s background;
    }

    .missed-shifts .close:hover[b-mwqyq460ig] {
        background: var(--warning20);
    }

    .missed-shifts .fix[b-mwqyq460ig] { 
        height: fit-content;
        background: var(--warning10);
        font-weight: 800;
        color: var(--warning-text);
        padding: 2px 8px;
        margin: auto 0;
        border-radius: 6px;
    }

        .missed-shifts .fix:hover[b-mwqyq460ig]{
            color: var(--warning-text) !important;
            background: var(--warning20);
        }

    .missed-shifts .shifts[b-mwqyq460ig] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: .5rem;
        padding-top: 0.25rem;
        padding-bottom: 0.75rem;
        width: fit-content;
        max-width: 100%;
        overflow: auto;
    }
    .missed-shifts .shifts .col[b-mwqyq460ig] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .5rem;
    }
        .missed-shifts .shifts .shift[b-mwqyq460ig] {
            padding: .4rem .5rem .4rem 1rem;
            border-radius: 1rem;
            background: var(--warning20);
            display: flex;
            width: fit-content;
            flex-direction: row;
            align-items: center;
            gap: .5rem;
            text-decoration: none;
            cursor: pointer;
            transition: background .2s ease;
        }

            .missed-shifts .shifts .shift:hover[b-mwqyq460ig] {
                background: var(--warning50);
            }
            .missed-shifts .shifts .shift span[b-mwqyq460ig] {
                color: var(--warning);
                font-weight: 900;
                transform: rotate(45deg);
                font-size: 1.2rem;
                transition: color .2s ease;
            }
            .missed-shifts .shifts .shift:hover span[b-mwqyq460ig] {
                color: var(--text-light);
            }
            .missed-shifts .shifts .shift p[b-mwqyq460ig] {
                margin: 0;
                font-size: 1rem;
                font-family: var(--font-header);
                font-weight: 800;
                color: var(--text-light);
                white-space: nowrap;
            }
            .missed-shifts .shifts .shift .col span[b-mwqyq460ig] {
                margin: 0;
                transform: unset;
                font-size: 0.9rem;
                font-family: var(--font-body);
                font-weight: 400;
                color: var(--text-light);
                opacity: .8;
                white-space: nowrap;
            }

        .missed-shifts .shifts div.shift[b-mwqyq460ig] {
            cursor: default;
        }
            .missed-shifts .shifts div.shift:hover[b-mwqyq460ig] {
                background: var(--warning20);
            }

            .missed-shifts .shifts div.shift .col[b-mwqyq460ig] {
                flex-direction: row;
                flex-wrap: nowrap;
            }
            .missed-shifts .shifts div.shift p[b-mwqyq460ig] {
                white-space: nowrap;
            }


.dashboard-content .row .card.action-required-section[b-mwqyq460ig] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.5rem;
    padding-bottom: 0;
    background: var(--card-bg-warning);
    border-radius: 2rem;
    height: fit-content;
    flex: unset;
    border: none;
}

    .dashboard-content .row .card.action-required-section .section-header[b-mwqyq460ig] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding-left: 0.5rem;
    }

    .dashboard-content .row .card.action-required-section .warning-icon[b-mwqyq460ig] {
        font-size: 2.5rem;
        color: var(--warning);
        background: var(--warning20);
        padding: 0.5rem;
        border-radius: 1rem;
    }

    .dashboard-content .row .card.action-required-section .section-header .text h2[b-mwqyq460ig] {
        font-family: var(--font-header);
        font-weight: 800;
        font-size: 1.5rem;
        color: var(--text-dark);
        margin: 0;
        line-height: 1.2;
    }

    .dashboard-content .row .card.action-required-section .section-header .text p[b-mwqyq460ig] {
        font-family: var(--font-body);
        color: var(--text-dark-mute);
        font-size: 0.95rem;
        margin: 0;
    }
    .dashboard-content .row .card.action-required-section .correction-list-container[b-mwqyq460ig] {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        padding-bottom: 1rem;
        overflow-x: scroll;
        flex: 999 0 400px;
        min-width: 0;
    }

        .dashboard-content .row .card.action-required-section .correction-list-container[b-mwqyq460ig]  .correction-card:first-of-type {
            margin-left: auto;
        }

        @media (max-width: 600px) {
            .dashboard-content .row.first .card[b-mwqyq460ig] {
                min-width: 15rem;
            }

            .newest-shift[b-mwqyq460ig] {
                display: none !important;
            }

            .dashboard-content .card.freed .col.newest[b-mwqyq460ig] {
                display: none !important;
            }

            .dashboard-content .next-shift-small[b-mwqyq460ig]  .nextshift:first-of-type {
                display: block !important;
                padding: 1rem 0.8rem !important;
                margin-left: 0.2rem !important;
            }

            .dashboard-content .next-shift-small[b-mwqyq460ig]  .nextshift:last-of-type {
                display: none !important;
            }

            .dashboard-content .row .card[b-mwqyq460ig]  .nextshift:not(.small) {
                margin-right: 0rem;
            }

            .dashboard-content .actions .action p[b-mwqyq460ig] {
                font-size: 10px;
            }


            .dashboard-content .card.freed[b-mwqyq460ig] {
                min-width: unset !important;
            }
        }
/* _content/PowerPlan/Pages/Insights.razor.rz.scp.css */
.page[b-99eqlt22v4] {
    display: flex;
    flex-direction: column;
}


.controlls[b-99eqlt22v4] {
    position: sticky;
    top: 8px;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 4px;
    z-index: 10;
    box-sizing: border-box;
    overscroll-behavior: contain;
    transition: ease .2s top, ease .2s background, ease .2s margin, ease .2s max-height !important;
}

    .controlls[b-99eqlt22v4]::-webkit-scrollbar {
        height: 7px;
    }

    .controlls[b-99eqlt22v4]::-webkit-scrollbar-thumb {
        border: 2px solid var(--bg);
    }

        .controlls[b-99eqlt22v4]::-webkit-scrollbar-thumb:hover {
            border: 0px solid var(--bg);
        }

    .controlls .sep[b-99eqlt22v4] {
        min-width: 0.1rem;
        min-height: 2rem;
        background: var(--bg-darker);
        border-radius: .2rem;
        height: 100%;
        margin: 0 .5rem;
    }

    .controlls .buttons[b-99eqlt22v4] {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        background: var(--card-bg);
        border: 0.1rem solid var(--card-border50);
        padding: .3rem;
        border-radius: 1rem;
        flex: 1;
        gap: 8px;
        height: 100%;
    }

        .controlls .buttons.no-flex[b-99eqlt22v4] {
            flex: unset;
        }

        .controlls .buttons[b-99eqlt22v4]:before {
            content: attr(title);
            position: absolute;
            bottom: calc(100% + 0.1rem);
            left: 0.5rem;
            font-size: 0.8rem;
            color: var(--text-dark-mute);
        }

        .controlls .buttons p[b-99eqlt22v4] {
            white-space: nowrap;
            background: var(--card-bg-top);
            padding: 0 0.8rem;
            margin: 0;
            border-radius: 0.6rem;
            font-family: var(--font-body);
            font-weight: 400;
            color: var(--text-dark80);
            height: 2.5rem;
            display: flex;
            align-items: center;
        }

        .controlls .buttons[b-99eqlt22v4]  button {
            box-shadow: 0px 0.7px 0.6px hsl(var(--shadow-color) / 0.52), 0px 1px 0.9px -2px hsl(var(--shadow-color) / 0.38), 0px 2.5px 2.2px -4.1px hsl(var(--shadow-color) / 0.25);
        }

            .controlls .buttons[b-99eqlt22v4]  button:not(.no-text) {
                padding: 0.4rem 1rem;
            }

            .controlls .buttons[b-99eqlt22v4]  button.DefaultMute {
                border: none;
            }

            .controlls .buttons[b-99eqlt22v4]  button .title {
                height: 1.5rem;
                line-height: 1.5rem;
            }

        .controlls .buttons label[b-99eqlt22v4] {
            font-weight: 800;
            font-family: var(--font-header);
            font-size: .7rem;
            top: 0;
            position: absolute;
            color: var(--input-text);
        }

.action-row[b-99eqlt22v4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: calc(100% - 64px);
    margin: 0px 32px 8px;
}

    .action-row .view[b-99eqlt22v4] {
        display: flex;
        justify-content: start;
        align-items: center;
        flex-direction: row;
        gap: 4px;
    }

    .action-row p[b-99eqlt22v4] {
        margin: 0;
        margin-right: 8px;
        font-size: .8rem;
    }

    .action-row[b-99eqlt22v4]  .checkbox {
        transform: scale(.9);
    }

.content[b-99eqlt22v4] {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 8px;
}

.dataarea[b-99eqlt22v4] {
    flex: 1;
    background: var(--card-bg-top);
    box-sizing: border-box;
    overflow: hidden auto;
    padding: 6px 6px 24px;
    border-radius: 40px;
    margin-bottom: 1rem;
    height: fit-content;
}

    .dataarea .row[b-99eqlt22v4] {
        display: flex;
        flex-direction: row;
    }

    .dataarea .table .row.site-row[b-99eqlt22v4] {
        gap: 8px;
        align-items: center;
        padding: 6px 0px 0;
        margin: 4px 18px;
        width: calc(100% - 36px);
        flex-direction: row-reverse;
    }

    .dataarea .row.site-row h3[b-99eqlt22v4] {
        margin: 0;
    }

    .dataarea .col[b-99eqlt22v4] {
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .dataarea .insightsheader[b-99eqlt22v4] {
        margin: 16px 46px 0;
        gap: 16px;
    }

    .dataarea h1[b-99eqlt22v4] {
        margin: 0;
        font-size: 2.2rem;
        margin-bottom: -0.35rem;
        font-weight: 900;
    }

    .dataarea .col p[b-99eqlt22v4] {
        margin: 0;
        font-size: 0.8rem;
    }

.timerange-container[b-99eqlt22v4] {
    position: relative;
}

    .timerange-container .select-timerange[b-99eqlt22v4] {
        position: absolute;
        left: 0%;
        top: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 8px;
        z-index: 100;
        background: var(--card-bg80);
        backdrop-filter: blur(6px);
        border: 2px solid var(--card-border);
        padding: 8px;
        border-radius: 1rem;
        box-shadow: var(--shadow-large);
        width: 15rem;
        gap: 8px;
        animation: ease .2s forwards select-timerange-in-b-99eqlt22v4;
    }

@keyframes select-timerange-in-b-99eqlt22v4 {
    from {
        opacity: 0;
        filter: blur(16px);
        transform: translate(0%, 10%);
    }

    to {
        opacity: 1;
        filter: blur(0px);
        transform: translate(0%, 0%);
    }
}

.timerange-container .select-timerange h2[b-99eqlt22v4] {
    margin: 8px 8px 0;
    font-size: 1rem;
    font-weight: 900;
    color: var(--input-text);
}

.timerange-container .select-timerange .timerange[b-99eqlt22v4] {
    margin: 0;
    background: var(--card-bg-top);
    border-radius: 8px;
    padding: 4px 8px;
    text-align: center;
}

.controlls .buttons .timerange-texts[b-99eqlt22v4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    align-items: flex-start;
}

    .controlls .buttons .timerange-texts span[b-99eqlt22v4] {
        margin: 0;
        font-size: 11px;
        text-align: left;
    }

        .controlls .buttons .timerange-texts span:last-of-type[b-99eqlt22v4] {
            font-weight: 800;
        }

.dataarea .table[b-99eqlt22v4],
.dataarea .site-tabel[b-99eqlt22v4] {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

    .dataarea .table .row[b-99eqlt22v4] {
        --br: 16px;
        --time-width: 160px;
        --time-bg: var(--card-bg);
        position: relative;
        width: calc(100% - 32px);
        padding: 0px 8px;
        margin: 0 8px;
        border-radius: 8px;
    }

.dataarea .row[b-99eqlt22v4] {
    background: var(--card-bg-top);
}

    .dataarea .row:not(.header, .insightsheader, .footer, .site-row):hover[b-99eqlt22v4] {
        --time-bg: var(--bg-dark);
        background: var(--bg-dark50);
    }

    .dataarea .row.cell-row[b-99eqlt22v4] {
        display: flex;
        flex-direction: column;
    }

    .dataarea .row .content[b-99eqlt22v4] {
        display: flex;
        flex-direction: row;
        gap: 0;
        width: auto;
        cursor: pointer;
    }

    .dataarea .row .employee-detail[b-99eqlt22v4] {
/*        display: flex;
        flex-direction: row;*/
        overflow: hidden;
        max-height: 0px;
        transition: ease .2s max-height;
    }

    .dataarea .row.expanded .employee-detail[b-99eqlt22v4] {
        max-height: 150px;
    }

    .dataarea .row .day-lists[b-99eqlt22v4] {
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .dataarea .row .day-lists .cell[b-99eqlt22v4] {
            display: flex;
            flex-direction: row;
            padding-left: 44px;
            gap: 8px;
            flex: 1;
            min-width: fit-content;
        }

            .dataarea .row .day-lists .cell span[b-99eqlt22v4] {
                --s: 20px;
                height: var(--s);
                min-height: var(--s);
                max-height: var(--s);
                width: var(--s);
                min-width: var(--s);
                max-width: var(--s);
                background: var(--bg-dark50);
                text-align: center;
                align-content: center;
                border-radius: 4px;
                font-size: 14px;
                margin-right: 4px;
            }

            .dataarea .row .day-lists .cell.value span[b-99eqlt22v4] {
                background: var(--bg-dark);
                color: var(--input-text);
            }


            .dataarea .row .day-lists .cell b[b-99eqlt22v4],
            .dataarea .row .day-lists .cell p[b-99eqlt22v4] {
                margin: 0;
            }

            .dataarea .row .day-lists .cell:not(.value) b[b-99eqlt22v4],
            .dataarea .row .day-lists .cell:not(.value) p[b-99eqlt22v4] {
                opacity: .4;
            }

            .dataarea .row .side-panel[b-99eqlt22v4] {
                display: flex;
                flex-direction: column;
                width: var(--time-width);
                background: var(--time-bg);
            }

        .dataarea .row .side-panel.wide[b-99eqlt22v4] {
            width: calc(var(--time-width) * 2);
        }


    .dataarea .row .absence-values[b-99eqlt22v4] {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        position: relative;
        transition: ease .2s max-height;
        max-height: 32px;
        margin-top: -6px;
        padding-bottom: 4px;
    }

    .dataarea .row.expanded .absence-values[b-99eqlt22v4] {
        max-height: 0;
    }

    .dataarea .row .absence-values .absence-lists[b-99eqlt22v4] {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        width: 100%;
        margin: 0px 0 0 76px;
        z-index: 1;
        gap: 8px;
    }

        .dataarea .row .absence-values .absence-lists .pill[b-99eqlt22v4] {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            padding: 2px 8px 2px 6px;
            background: var(--bg-dark50);
            border-radius: 16px;
            gap: 2px;
            color: var(--input-text);
        }

            .dataarea .row .absence-values .absence-lists .pill span[b-99eqlt22v4] {
                font-size: 14px;
                margin-right: 4px;
            }

    .dataarea .row .absence-values .side-panel[b-99eqlt22v4] {
        position: absolute;
        height: 100%;
        right: 0px;
    }

.box[b-99eqlt22v4] {
    position: relative;
    margin: .5rem;
    background: var(--card-bg50);
    border-radius: var(--br);
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: calc(100% - 1rem);
    box-sizing: border-box;
    border-radius: 1.5rem;
}
 
.box .percent[b-99eqlt22v4] {
    width: 100%;
    box-sizing: border-box;
    padding: .2rem;
    display: flex;
    flex-direction: row;
    background: var(--bg-dark);
    box-shadow: inset var(--bg-dark3) 0 0 1rem -0.5rem;
    border-radius: .5rem;
    overflow: hidden;
} 
    .box .percent div.planned[b-99eqlt22v4],
    .box .percent div.punched[b-99eqlt22v4] { 
        width: var(--w);
        height: 2rem;
        border-radius: 0.4rem;
        transition: ease .2s width, ease .2s background;
    }
     
.box .percent div.planned[b-99eqlt22v4] {
    background: var(--bg-dark2);
} 
.box .percent div.punched[b-99eqlt22v4] {
    background: var(--primary);
    box-shadow: inset var(--card-bg) 0 0 1.5rem -0.4rem;
} 
.box .percent.exact div.punched[b-99eqlt22v4] {
    background: var(--success);
}
 
.box .percent.more div.punched[b-99eqlt22v4] {
    background: var(--warning);
}
 
.box .percent.empty div.planned[b-99eqlt22v4],
.box .percent.empty div.punched[b-99eqlt22v4] {
    background: transparent;
}
 
.box .row[b-99eqlt22v4] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .2rem .5rem;
}

.box .row p[b-99eqlt22v4] {
    margin: 0;
    font-size: 12px;
}

    .box .row p.planned[b-99eqlt22v4] {
        color: var(--text-dark); /* Using a more neutral color for planned text */
    }

    /* Default color for punched text */
    .box .row p.punched[b-99eqlt22v4] {
        color: var(--primary);
    }

/* Match the punched text color to the bar's state for consistency */
.box .percent.exact + .row p.punched[b-99eqlt22v4] {
    color: var(--success, #4CAF50);
}

.box .percent.more + .row p.punched[b-99eqlt22v4] {
    color: var(--warning, #FF9800);
}

    .box[b-99eqlt22v4]  button.Small{
        position: absolute;
        bottom: 8px;
        right: 8px;
        z-index: 1;

    }

    .box h2[b-99eqlt22v4]{
        font-weight: 900;
        font-size: 18px;
        margin: 8px 8px 0;
        text-align: center;
        color: var(--input-text);
    }

    .dataarea .row .cell[b-99eqlt22v4] {
        --br1: 0;
        --br2: 0;
        --br3: 0;
        --br4: 0;
        border-radius: var(--br1) var(--br2) var(--br3) var(--br4);
        flex: 1;
        flex-shrink: 1;
        padding: 2px;
        display: flex;
        align-items: center;
        min-width: 3rem;
    }

        .dataarea .row .cell span[b-99eqlt22v4] {
            color: var(--thumb-color);
            font-size: 1.2rem;
        }

        .dataarea .row .cell.name[b-99eqlt22v4] {
            flex: 3;
            min-width: 7rem;
            position: sticky;
            left: 0;
            z-index: 5;
            margin-left: 8px;
            background-color: inherit;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .dataarea .row.header .cell.name[b-99eqlt22v4] {
            justify-content: flex-start;
        }

        .dataarea .row .cell[b-99eqlt22v4]  .punches {
            color: var(--input-text);
            flex-direction: row-reverse;
        }

        .dataarea .row .cell.front[b-99eqlt22v4] {
            gap: 8px;
            width: 64px;
            flex: unset;
            min-width: unset;
        }

    .dataarea .row.header .cell.front[b-99eqlt22v4] {
        justify-content: flex-end;
    }

        .dataarea .row.header .cell.front[b-99eqlt22v4]  buttton {
        }

    .dataarea .row .cell.front[b-99eqlt22v4]  .profilePicture {
        --s: 32px;
        --bdr: 0.3rem;
    }

.dataarea .arrow[b-99eqlt22v4] {
    cursor: pointer;
}

.dataarea .row.expanded .arrow[b-99eqlt22v4] {
    transform: rotate(180deg);
}

.dataarea .arrow:hover[b-99eqlt22v4] {
    color: var(--text-dark-mute);
}

.dataarea .row .cell:last-of-type[b-99eqlt22v4] {
    min-width: 4rem;
}

.dataarea .row .cell.time[b-99eqlt22v4] {
    background: var(--time-bg);
    padding: 8px 16px;
    flex: unset;
    width: var(--time-width);
    box-sizing: border-box;
}

.dataarea .row .cell.time[b-99eqlt22v4] {
    justify-content: flex-end;
}

    .dataarea .row[b-99eqlt22v4]  .cell.time.exempt-employee {
        height: 100%;
    }
    .dataarea .row[b-99eqlt22v4]  .cell.time.exempt-employee p {
        opacity: 0.5;
    }


.dataarea .row.header .cell.time:nth-of-type(3)[b-99eqlt22v4] {
    --br1: var(--br);
}
.dataarea .row.header .cell.time:last-of-type[b-99eqlt22v4] {
    --br2: var(--br);
}
.dataarea .table .row:not(:has(.absence-values)):not(.site-row):not(.expanded):last-child .cell.time:nth-of-type(3)[b-99eqlt22v4] {
    --br4: var(--br);
}
.dataarea .table .row:not(:has(.absence-values)):not(.site-row):not(.expanded):last-child .cell.time:last-of-type[b-99eqlt22v4] {
    --br3: var(--br);
}
.dataarea .table .row.expanded:last-child .side-panel[b-99eqlt22v4],
.dataarea .table .row:not(.expanded):last-child .absence-values .side-panel[b-99eqlt22v4] {
    border-radius: 0 0 var(--br) var(--br);
}

.dataarea .row.header .cell.time p span[b-99eqlt22v4] {
    opacity: 1;
    font-size: 14px;
    color: var(--text-dark50);
    font-family: var(--font-body);
    font-weight: 400;
    margin-right: 5px;
}

.dataarea .table .header[b-99eqlt22v4] {
    border-radius: 0px;
}

    .dataarea .table .header p[b-99eqlt22v4] {
        text-align: left;
        color: var(--text-dark);
        opacity: .6;
        font-weight: 800;
        opacity: .7;
        font-size: 0.9rem;
        font-family: var(--font-header);
    }

.dataarea .table .footer p[b-99eqlt22v4] {
    font-weight: 600;
}

.dataarea .table p[b-99eqlt22v4] {
    text-align: left;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    margin: 0;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

    .dataarea .table p[b-99eqlt22v4]  span, .dataarea .table b[b-99eqlt22v4]  span {
        opacity: 0.4;
    }

.dataarea .table .zero p[b-99eqlt22v4] {
    opacity: .4;
    font-weight: 400;
}

    .dataarea .table .zero p[b-99eqlt22v4]  span {
        opacity: 1;
    }

.dataarea .table.loading .row:not(.header) .cell p[b-99eqlt22v4], .dataarea .table.loading .row:not(.header) .cell b[b-99eqlt22v4] {
    min-height: 16px;
    min-width: 32px;
    min-width: 32px;
    border-radius: 8px;
    animation: skeleton-loading 1s linear infinite alternate;
    opacity: .5;
}

.dataarea .table.loading .row:not(.header) .cell b[b-99eqlt22v4] {
    opacity: 1;
}

.dataarea .table.loading .row:not(.header) .cell.name p[b-99eqlt22v4] {
    opacity: 1;
    width: 80%;
}

.metrics[b-99eqlt22v4] {
    position: sticky;
    top: 64px;
    width: calc(200px + 32px);
    min-height: 250px;
    height: fit-content;
    max-height: calc(100vh - 72px - var(--devbar-height));
    background: var(--bg-dark);
    border-radius: 2rem;
    box-shadow: var(--shadow-medium);
}

@media print {
    @page {
        size: landscape;
        margin: 0;
    }

    body[b-99eqlt22v4] {
        --scale: 0.5;
        transform: scale(var(--scale));
        transform-origin: top left;
        width: calc(100% / var(--scale));
    }

    .date-picker-container[b-99eqlt22v4],
    .action-row[b-99eqlt22v4] {
        display: none;
    }

    .dataarea[b-99eqlt22v4] {
        min-width: fit-content;
        width: 100%;
        overflow: unset;
    }
}

.reload-required[b-99eqlt22v4] {
    display: flex;
    flex-direction: row;
    gap: 16px;
    background: var(--card-bg-warning);
    border-radius: 2rem;
    padding: 16px 16px 16px 32px;
}
    .reload-required .col[b-99eqlt22v4] {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
        .reload-required .col h2[b-99eqlt22v4] {
            margin: 0;
            color: var(--warning-text);
            font-weight: 900;
        }
    .reload-required .col p[b-99eqlt22v4] {
    }
/* _content/PowerPlan/Pages/Login.razor.rz.scp.css */
/*Login*/
.login-form[b-offh532b6t] {
    position: relative;
    height: auto;
    width: 22rem;
    max-width: 80vw;
    background: var(--card-bg);
    border: .1rem solid var(--card-border);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    padding-bottom: 32px;
}

    .login-form .more[b-offh532b6t] {
        position: absolute;
        width: calc(80% - 32px);
        height: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        border-radius: 16px 16px 0 0;
        bottom: calc(100%);
        z-index: -1;
        font-family: Roboto, sans-serif;
        font-size: .8rem;
        text-decoration: none;
        padding: 12px 12px;
        background: var(--bg-dark3);
        box-shadow: var(--bg-dark) inset 0 0 64px -8px, var(--shadow-large);
        border: 0px solid var(--primary20);
    }

        .login-form .more h4[b-offh532b6t] {
            margin: 0;
            font-weight: 700;
            font-size: .8rem;
            color: var(--text-light);
        }

        .login-form .more p[b-offh532b6t] {
            margin: 0;
            color: var(--text-dark-accent);
        }

        .login-form .more span[b-offh532b6t] {
            background: var(--primary-hover);
            color: var(--bg);
            font-weight: 500;
            font-size: 14px;
            padding: 6px;
            opacity: .8;
            border-radius: 50%;
        }
            .login-form .more span svg[b-offh532b6t] {
                height: 14px;
                width: 14px;
                stroke-width: 3px;
            }

    .login-form form[b-offh532b6t] {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(100% - 32px);
        gap: 1rem;
    }

form[b-offh532b6t]  .input-component {
    width: inherit;
}

.login-container[b-offh532b6t] {
    margin: auto 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

h3[b-offh532b6t] {
    margin: 0rem;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-dark-accent);
    width: calc(100% - 4.5rem);
}

form h3[b-offh532b6t] {
    text-align: center;
    width: 100%;
}

.ego-container[b-offh532b6t] {
    position: relative;
    width: calc(100%);
    height: 12rem;
    min-height: 250px; 
    margin-bottom: 3rem;
    background: var(--primary-variable);
    box-shadow: inset 0 0px 4rem -1rem var(--card-bg-top);
    border-radius: 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: ease .2s all;
}

    .ego-container[b-offh532b6t]::before {
        content: " ";
        position: absolute;
        min-height: 80%;
        min-width: 80%;
        transform: translate(-50%, -50%);
        top: calc(50% + 2.5rem);
        left: 50%;
        border-radius: 16px;
        background: var(--primary-variable);
        filter: blur(20px);
        opacity: .8;
        z-index: 0;
    }

    .ego-container .img-container[b-offh532b6t] {
        height: 80%;
        max-height: 100%;
        transition: ease .2s all;
        z-index: 1;
        animation: idle-b-offh532b6t ease-in-out 3s infinite;
    }

        .ego-container .img-container img[b-offh532b6t] {
            height: 100%;
            transition: ease .2s all;
        }

            .ego-container .img-container img.wobble[b-offh532b6t] {
                animation: wobble-b-offh532b6t 0.8s both;
            }

            .ego-container .img-container img.wobblea[b-offh532b6t] {
                animation: wobblea-b-offh532b6t 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) both;
            }

.destination-org[b-offh532b6t] {
    background: var(--card-bg-top);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    width: calc(100% - 4rem);
    padding: .4rem;
    border-radius: 1rem;
    border: 1px solid var(--card-border50);
    box-shadow: var(--shadow-medium);
}

    .destination-org p[b-offh532b6t] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

.not-this[b-offh532b6t] {
    margin: 0;
    margin-left: auto;
    margin-right: 2.5rem;
    margin-top: .25rem;
    font-size: .8rem;
    opacity: .5;
    text-decoration: underline;
    cursor: pointer;
}

.remember-me[b-offh532b6t] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 16px;
    font-family: var(--font-header);
    font-size: .7rem;
    font-weight: 800;
    color: var(--text-dark-accent);
}

    .remember-me[b-offh532b6t]  .checkbox {
        margin-right: 8px;
    }

.signup[b-offh532b6t] {
    display: flex;
    flex-direction: row;
    color: var(--text-dark-mute);
    margin-top: 1rem;
}

    .signup span[b-offh532b6t] {
        font-style: italic;
        cursor: pointer;
        margin-left: 8px;
        font-weight: 700;
    }

.reset-password[b-offh532b6t] {
    cursor: pointer;
    font-family: var(--font-header);
    font-size: .7rem;
    font-weight: 800;
    color: var(--text-dark-mute);
    margin-top: -0.5rem;
    border-radius: .35rem;
    padding: .25rem 0.75rem;
    transition: ease .2s background;
}

    .reset-password:hover[b-offh532b6t] {
        background: var(--bg-dark);
    }

@keyframes idle-b-offh532b6t {
    0% {
        transform: translateY(0px);
    }

    35% {
        transform: translateY(-8px);
    }

    90%, 100% {
        transform: translateY(0px);
    }
}

@keyframes wobblea-b-offh532b6t {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(-20px) rotate(-6deg);
    }

    30% {
        transform: translateX(10px) rotate(6deg);
    }

    45% {
        transform: translateX(-10px) rotate(-3.6deg);
    }

    60% {
        transform: translateX(6px) rotate(2.4deg);
    }

    75% {
        transform: translateX(-4px) rotate(-1.2deg);
    }
}

@keyframes wobble-b-offh532b6t {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(30px) rotate(6deg);
    }

    30% {
        transform: translateX(-15px) rotate(-6deg);
    }

    45% {
        transform: translateX(15px) rotate(3.6deg);
    }

    60% {
        transform: translateX(-9px) rotate(-2.4deg);
    }

    75% {
        transform: translateX(6px) rotate(1.2deg);
    }
}
 
@media (max-width: 768px) {
    .login-form[b-offh532b6t] {
        max-width: 100%;
        margin: 0 1rem;
        box-sizing: border-box;
    }

    .ego-container[b-offh532b6t] { 
        min-height: 180px;
        height: 10rem;
        margin-bottom: 1.5rem;
    }

        .ego-container[b-offh532b6t]::before { 
            min-height: 70%;
            min-width: 70%;
            top: calc(50% + 2rem);
        }

    h3[b-offh532b6t] { 
        width: 100%;
        text-align: center;
        padding: 0 0.5rem;
        box-sizing: border-box;
    }

    .login-form form[b-offh532b6t] { 
        width: 100%;
        gap: 0.75rem;
    }

    .not-this[b-offh532b6t] { 
        margin-right: 1.5rem;
    }

    .signup[b-offh532b6t] { 
        margin-bottom: 2rem;
    }
}
/* _content/PowerPlan/Pages/Onboarding.razor.rz.scp.css */
.onboarding-container[b-p2f3o8qdeq]{
    --margin: 50px;
    height: 98vh;
    width: 99vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card[b-p2f3o8qdeq] {
    min-height: 80%;
    width: 77rem;
    max-width: calc(100% - 2rem);
    max-height: calc(100% - 1rem);
    padding: 0;
    border-radius: 3.5rem;
    border: .25rem solid var(--card-border);
    background: var(--card-bg);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 90px;
    position: relative;
    display: flex;
    flex-direction: row;
    transition: ease .2s all;
    overflow: hidden;
}
.left[b-p2f3o8qdeq], .right[b-p2f3o8qdeq]{
    display: flex;
    flex-direction: column;
    height: auto;
}

.left[b-p2f3o8qdeq] {
    flex: 1;
    justify-content: space-between;
    max-width: calc(100% - 280px - 4rem);
    order: 1;
}

.panel[b-p2f3o8qdeq] {
    display: flex;
    position: relative;
    flex-direction: column;
    height: auto;
    max-height: calc(100% - 70px);
    width: 50%;
    overflow: hidden;
    min-width: calc(350px - 70px);
    margin: 35px;
    border-radius: calc(3.5rem - 35px);
    background: var(--bg-dark);
    order: 2;
}


.panel[b-p2f3o8qdeq]  .page-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 32px;
}

    .panel[b-p2f3o8qdeq]  .page-list label {
        margin: 0 8px;
        color: var(--text-dark-accent);
        font-weight: 400;
        font-family: var(--font-body);
        font-size: 1rem;
    }

    .panel[b-p2f3o8qdeq]  .page-list .page {
        background: var(--card-bg80);
        backdrop-filter: blur(6px);
        padding: 5px 5px;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

        .panel[b-p2f3o8qdeq]  .page-list .page p {
            margin: 0;
            font-size: 1rem;
            flex: 1;
        }

.indicator[b-p2f3o8qdeq] {
    margin: var(--margin);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

    .indicator .progress[b-p2f3o8qdeq] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        max-width: min(calc(100% - var(--margin) - var(--margin)), 23rem);
    }

    .indicator .progress .bar[b-p2f3o8qdeq] {
        height: 8px;
        width: 2rem;
        margin-right: 8px;
        border-radius: 4px;
        background: var(--bg-dark2);
        transition: ease .2s 
    }
        .indicator .progress .bar.active[b-p2f3o8qdeq] {
            transform: translateY(-3px);
            background: var(--primary);
            box-shadow: var(--primary50) 0px 3px 8px, var(--primary50) 0px 1px 3px, var(--primary50) 0px 0px 1px;
        }
        .indicator .progress .bar.done[b-p2f3o8qdeq] {
            background: var(--primary);
        }

    .indicator h3[b-p2f3o8qdeq] {
        margin-left: 16px;
        font-weight: 600;
        opacity: .7;
    }

            .indicator h3 span[b-p2f3o8qdeq] {
                opacity: 1;
                font-weight: 800;
                opacity: 1;
            }

.body[b-p2f3o8qdeq] {
    flex: 1;
    margin: 0;
    margin-left: var(--margin);
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
    overflow: auto;
}

    .body:has(.right-layout)[b-p2f3o8qdeq] {
        margin-left: calc(0rem + var(--margin)) !important;
        margin-right: calc(var(--margin)) !important;
    }

.footer[b-p2f3o8qdeq] {
    margin: var(--margin);
    margin-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .footer div img[b-p2f3o8qdeq] {
        height: 3rem;
        margin: 0 6px;
        margin-right: 42px;
    } 

    .footer[b-p2f3o8qdeq]  .prev {
        margin-right: 16px;
    }

    .footer[b-p2f3o8qdeq]  .next {
        font-size: 1rem;
        padding: .7rem 1rem;
    }


.login-button[b-p2f3o8qdeq] { 
    margin: 16px;
    cursor: pointer;
    display: none;
    flex-direction: row;
    align-items: center;
    opacity: .6;
    color: var(--text-dark);
    transition: ease .2s opacity;
    z-index: 1;
}

    .login-button p[b-p2f3o8qdeq] {
        margin: 0;
        font-family: var(--font-header);
        color: inherit;
        font-weight: 900;
    }

    .login-button span[b-p2f3o8qdeq] {
        margin: 0;
        margin-right: 3px;
        font-size: 1.4rem;
        font-weight: 600;
        color: inherit;
        display: none;
    }

    .login-button:hover[b-p2f3o8qdeq] {
        opacity: 1;
    }

path:has(fill:rgb(175,211,255))[b-p2f3o8qdeq]{
    background: black;
}

[b-p2f3o8qdeq] h1 {
    font-size: 3rem;
    font-weight: 900;
    font-family: var(--font-header);
    color: var(--text-dark);
}


[b-p2f3o8qdeq] h3 {
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--font-body);
    color: var(--text-dark);
    margin-left: 20px;
}

[b-p2f3o8qdeq] .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
[b-p2f3o8qdeq] .col {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-wrap: wrap;
    min-width: 200px;
    margin: 0 10px;
    gap: 0.75rem;
}

[b-p2f3o8qdeq] label {
    font-family: var(--font-header);
    font-weight: 700;
    color: var(--input-text);
    font-size: .8rem;
}

[b-p2f3o8qdeq] p.invalid {
    font-weight: 500;
    margin: 0;
    color: var(--warning);
    background: var(--warning-mute);
    width: fit-content;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    border: none;
}

[b-p2f3o8qdeq] .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--bg-dark);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.6rem;
}
    [b-p2f3o8qdeq] .info .material-icons {
        color: var(--input-text);
        font-size: 2rem;
        margin-right: 1rem;
    }


    [b-p2f3o8qdeq] .info p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-dark80);
    }

    [b-p2f3o8qdeq] input{
        padding: 0.85rem 1rem;
    }

[b-p2f3o8qdeq] .input-component .datepicker-container-container {
    right: 0.7rem;
    top: 0.45rem;
}

[b-p2f3o8qdeq] .more-info {
    background: var(--bg-dark);
    padding: 16px;
    border-radius: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
    [b-p2f3o8qdeq] .more-info p {
        margin: 0 !important;
        flex: 1;
    }

    [b-p2f3o8qdeq] .more-info .info {
        --s: 30px;
        font-family: var(--font-mono);
        font-weight: 900;
        min-height: var(--s);
        max-height: var(--s);
        height: var(--s);
        min-width: var(--s);
        max-width: var(--s);
        width: var(--s);
        border-radius: var(--s);
        background: var(--card-bg);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: var(--primary);
        margin: 0;
        padding: 8px;
        border: 2px solid var(--primary);
        box-sizing: border-box;
    }

@media (max-width: 900px) {
    .panel[b-p2f3o8qdeq]{
        display: none;
    }
    .left[b-p2f3o8qdeq] { 
        max-width: calc(100% - 0rem); 
    }
}

@media (max-width: 630px) {
    .onboarding-container[b-p2f3o8qdeq] {
        --margin: 32px;
        margin: 1vh 0.5vw;
    }

    .footer div img[b-p2f3o8qdeq] {
        display: none;
        margin-right: 0;
    }

    .footer[b-p2f3o8qdeq]  .prev {
        margin-left: 0px;
        margin-right: 16px;
    }

    .card[b-p2f3o8qdeq] {
        height: calc(100% - 16px);
        width: calc(100% - 16px);
        padding: 0;
        border-radius: 2rem;
    }

    .body[b-p2f3o8qdeq] {
        margin: 0 var(--margin);
        min-width: calc(100% - var(--margin) - var(--margin));
        overflow-y: auto;
    }

    .right[b-p2f3o8qdeq] {
        display: none;
    }

    .indicator h3[b-p2f3o8qdeq]{
        display: none;
    }

    [b-p2f3o8qdeq] h1 {
        font-size: 2rem;
        margin: 1rem 1rem 0;
    }

    [b-p2f3o8qdeq] h3 {
        margin: 0.5rem 1rem 1rem;
    }

    .login-button[b-p2f3o8qdeq]{
        display: flex;
        justify-self: flex-start;
        position: absolute;
        left: 28px;
    }

    .footer[b-p2f3o8qdeq] {
        justify-content: flex-end;
    }
}
/* _content/PowerPlan/Pages/OnboardingScreens/Panels/PanelDefault.razor.rz.scp.css */
.page-list[b-ak0pzx9n6q]{
    z-index: 1;
    margin: auto 0;
}

.circles[b-ak0pzx9n6q] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

    .circles li[b-ak0pzx9n6q] {
        --size: 8px;
        --m: 1;
        position: absolute;
        display: block;
        list-style: none;
        width: calc(var(--size) * var(--m));
        height: calc(var(--size) * var(--m));
        border-radius: 100%;
        background: var(--label-text);
        animation: animate-b-ak0pzx9n6q 25s ease-in infinite;
        bottom: calc(var(--size) * var(--m) * -2);
    }

        .circles li:nth-child(1)[b-ak0pzx9n6q] {
            --m: 5;
            left: 52%;
            animation-delay: 0s;
        }


        .circles li:nth-child(2)[b-ak0pzx9n6q] {
            --m: 6;
            left: 10%;
            animation-delay: 2s;
            animation-duration: -12s;
        }

        .circles li:nth-child(3)[b-ak0pzx9n6q] {
            --m: 2;
            left: 70%;
            animation-delay: 4s;
        }

        .circles li:nth-child(4)[b-ak0pzx9n6q] {
            --m: 4;
            left: 40%;
            animation-delay: 0s;
            animation-duration: 18s;
        }

        .circles li:nth-child(5)[b-ak0pzx9n6q] {
            --m: 2;
            left: 81%;
            animation-delay: 0s;
            animation-duration: 17s;
        }

        .circles li:nth-child(6)[b-ak0pzx9n6q] {
            --m: 8;
            left: 75%;
            animation-delay: 5s;
        }

        .circles li:nth-child(7)[b-ak0pzx9n6q] {
            --m: 8;
            left: 35%;
            animation-delay: 7s;
        }

        .circles li:nth-child(8)[b-ak0pzx9n6q] {
            --m: 3;
            left: 50%;
            animation-delay: 15s;
            animation-duration: 45s;
        }

        .circles li:nth-child(9)[b-ak0pzx9n6q] {
            --m: 1;
            left: 20%;
            animation-delay: -2s;
            animation-duration: 35s;
        }

        .circles li:nth-child(10)[b-ak0pzx9n6q] {
            --m: 2;
            left: 25%;
            animation-delay: -2.5s;
            animation-duration: 13s;
        }

        .circles li:nth-child(11)[b-ak0pzx9n6q] {
            --m: 1;
            left: 65%;
            animation-delay: 0s;
            animation-duration: 11s;
        }

        .circles li:nth-child(12)[b-ak0pzx9n6q] {
            --m: 1;
            left: 50%;
            animation-delay: 1s;
            animation-duration: 20s;
        }

        .circles li:nth-child(13)[b-ak0pzx9n6q] {
            --m: 2;
            left: 62%;
            animation-delay: 2.5s;
            animation-duration: 19s;
        }

        .circles li:nth-child(14)[b-ak0pzx9n6q] {
            --m: 4;
            left: 21%;
            animation-delay: 4s;
            animation-duration: 11s;
        }



@keyframes animate-b-ak0pzx9n6q {

    0% {
        transform: rotate(0deg) scale(2);
        opacity: 1;
        filter: blur(0px);
        bottom: calc(var(--size) * var(--m) * -2);
    }
    40%{
        opacity: 1;
    }
    80% {
        filter: blur(0px);
    }
    100% {
        transform: rotate(720deg) scale(.8  );
        background: var(--primary-gradient-color);
        opacity: 0.2;
        filter: blur(4px);
        bottom: 100%;
    }
}
/* _content/PowerPlan/Pages/OnboardingScreens/Panels/PanelStart.razor.rz.scp.css */
h2[b-6q50jdisyl] {
    font-size: 44px;
    font-weight: 900;
    text-align: center;
    color: var(--bg-dark3);
    margin: 32px 24px 0px;
}
h3[b-6q50jdisyl] {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin: 0 32px;
}

.onboarding-panel-animation[b-6q50jdisyl] {
    margin-top: auto;
    margin-bottom: 16px;

}
/* _content/PowerPlan/Pages/OnboardingScreens/Panels/PanelWelcome.razor.rz.scp.css */
.onboarding-panel-content[b-wb66lxouq3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h2[b-wb66lxouq3] {
    color: var(--input-text);
    font-size: 2rem;
    text-align: center;
    margin: 1rem;
}
h4[b-wb66lxouq3] {
    text-align: center;
    margin: 0 5rem;
    color: var(--text-dark-accent);
}
p[b-wb66lxouq3] {
    text-align: center;
    margin: 2rem 5rem 0;
    color: var(--text-dark-accent);
}
.onboarding-panel-animation[b-wb66lxouq3]{
    flex: 1;
}


@media (max-width: 1150px) {

    h4[b-wb66lxouq3] {
        margin: 0 1rem;
    }

    p[b-wb66lxouq3] {
        margin: 2rem 1rem 0;
    }
}
/* _content/PowerPlan/Pages/OnboardingScreens/Screens/OnboardingBasicInfo.razor.rz.scp.css */
.col.welcome[b-jaji8uojpj] {
    flex: unset;
    gap: .5rem;
}

.allow-contact[b-jaji8uojpj] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 1.5rem;
}

.allow-contact span[b-jaji8uojpj],
.row p[b-jaji8uojpj]{
    margin: 7px;
    margin-left: 8px;
    color: var(--text-dark);
    font-size: .9rem;
    opacity: .8;
}

[b-jaji8uojpj] .checkbox{
    margin: 6px 2px;
}

.no-wrap[b-jaji8uojpj] {
    flex-wrap: nowrap !important;
}

.discount[b-jaji8uojpj] {
    margin: 1.5rem 0 0;
    padding: 1rem;
    border-radius: 1.1rem;
    background: var(--primary50);
    backdrop-filter: blur(16px);
    border: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    --shadow-color: 222deg 102% 120%;
    box-shadow: var(--shadow-small);
}

[data-theme='dark'] .discount[b-jaji8uojpj] {
    background: var(--primary-gradient-color);
    border-color: var(--primary-gradient-color);
}

.discount .heading[b-jaji8uojpj] {
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    color: var(--text-light);
    font-size: 2rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 1rem;
}

.discount .discount-text[b-jaji8uojpj] {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    color: var(--text-light);
    font-size: .9rem;
    flex: 1;
    margin: 0 1rem;
    min-width: 7rem;
}

.discount .discount-label[b-jaji8uojpj] {
    background: var(--card-bg20);
    padding: 0.25rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 0.7rem;
    text-align: center;
    width: fit-content;
    color: var(--text-light);
    margin: 0 auto;
    backdrop-filter: blur(6px);
}


[data-theme='dark'] .discount .discount-label[b-jaji8uojpj] {
    background: var(--bg50);
}

.discount .col[b-jaji8uojpj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
}

.discount .bg[b-jaji8uojpj] {
    position: absolute;
    top: 0rem;
    width: 100%;
    left: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    color: var(--card-bg-top);
    font-size: 6.9rem;
    margin-top: -1rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-style: italic;
    opacity: .1;
    word-break: break-all;
    line-height: 6.9rem;
    text-align: center;
    pointer-events: none;
    z-index: -1;
}

[data-theme='dark'] .discount .bg[b-jaji8uojpj] {
    opacity: .2;
    color: var(--primary);
}

@media (max-width: 768px) {
    .discount[b-jaji8uojpj]{
        display: none;
    }
}
/* _content/PowerPlan/Pages/OnboardingScreens/Screens/OnboardingColleauges.razor.rz.scp.css */
.employee-row[b-5g1m4vlcfv] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow: auto;
    padding: 1.5rem 1rem 1rem;
    padding-top: 0;
}

.account[b-5g1m4vlcfv] {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

    .account .employee-row-inner[b-5g1m4vlcfv] {
        display: flex;
        flex-direction: row;
    }

    .account:first-of-type[b-5g1m4vlcfv] {
        margin-right: .5rem;
        flex: unset;
    }

        .account:first-of-type[b-5g1m4vlcfv]  .employee-container {
        }

    .account > label[b-5g1m4vlcfv], .new-employee form > label[b-5g1m4vlcfv] {
        font-family: var(--font-header);
        color: var(--label-text);
        font-size: 1.2rem;
        font-weight: 900;
        font-style: italic;
    }

.new-employee[b-5g1m4vlcfv] {
    position: relative;
    background: var(--bg-darker50);
    flex: 0;
    padding: 1rem;
    border-radius: 2.3rem;
}

    .new-employee form[b-5g1m4vlcfv] {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

        .new-employee form > label[b-5g1m4vlcfv] {
            margin: 1.5rem;
            margin-top: .7rem;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

    .new-employee[b-5g1m4vlcfv]  .create {
        position: absolute;
        top: 8px;
        right: 8px;
        margin: 16px;
    }

.col[b-5g1m4vlcfv] {
    gap: 0.45rem;
}

[b-5g1m4vlcfv] .usertype {
    --max: 20rem;
}

    [b-5g1m4vlcfv] .usertype span {
        font-size: 20px;
    }
/* _content/PowerPlan/Pages/OnboardingScreens/Screens/OnboardingFinalSetup.razor.rz.scp.css */
.col p[b-4tekcjjp1e]{
    text-align: left;
    margin: 0.25rem 0 0.5rem;
}

.row.label[b-4tekcjjp1e] {
    display: flex;
    flex-direction: row;
    align-items: normal;
    gap: .5rem;
    margin: 1rem 1rem -0.4rem;
}
.row.label span[b-4tekcjjp1e]{
    font-size: 1.2rem;
    color: var(--input-text);
}
[b-4tekcjjp1e] .container{
    margin-top: .5rem;
}
[b-4tekcjjp1e] .tab h1 {
    font-size: 1.3rem;
    margin: 0;
    text-align: left;
    width: 100%;
}
[b-4tekcjjp1e] .tab p {
    text-align: left;
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
}
[b-4tekcjjp1e] .tab span {
    position: absolute;
    bottom: -1rem;
    right: 0;
    font-size: 5rem;
    font-weight: 900;
    color: var(--bg-dark);
    transition: ease .2s color;
}
[b-4tekcjjp1e] .tab-container:has(input:checked) span {
    color: var(--bg-dark2-50);
}
[b-4tekcjjp1e] .tab .recommended {
    background: var(--bg-dark);
    width: fit-content;
    padding: .25rem 0.75rem;
    border-radius: 1rem;
    font-size: 12px;
    font-weight: 800;
    margin-left: auto;
    color: var(--input-text);
    transition: ease .2s background, ease .2s color;
}
[b-4tekcjjp1e] .tab-container:has(input:checked) .recommended {
    background: var(--bg-dark2-50);
    color: var(--bg-dark3);
}

.threshold-container[b-4tekcjjp1e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
    .threshold-container .threshold[b-4tekcjjp1e] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 10rem;
    }
/* _content/PowerPlan/Pages/OnboardingScreens/Screens/OnboardingPayment.razor.rz.scp.css */
.row:last-of-type[b-gopcfmvdgr]{
    align-items: center;

}

.row:last-of-type p[b-gopcfmvdgr]{
    margin: 8px 16px;
}

.cardnumber[b-gopcfmvdgr] {
    position: relative;
    align-items: center;
    flex-direction: row;
}
    .cardnumber[b-gopcfmvdgr]  .input-component{
        flex: 1;
    }

.card-type[b-gopcfmvdgr] {
    position: absolute;
    right: 1.5rem;
    width: 2rem;
    margin-top: 1.1rem;
    animation: card-appear-b-gopcfmvdgr .2s ease-in forwards;
}
.verified[b-gopcfmvdgr] {
    position: absolute;
    left: calc(100% - .3rem);
    height: 2.6rem;
    margin-top: 1rem;
    animation: verified-appear-b-gopcfmvdgr .2s ease-in forwards;
}
@keyframes verified-appear-b-gopcfmvdgr {
    from {
        opacity: 0;
        transform: scale(.5) rotate(-20deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
@keyframes card-appear-b-gopcfmvdgr {
    from {
        opacity: 0;
        transform: scale(.9) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0px);
    }
}

.discount[b-gopcfmvdgr]{
    position: relative;
    margin: 1.2rem;
    padding: 1rem;
    border-radius: 1.1rem;
    background: var(--primary);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    align-items: center;
}

    .discount .heading[b-gopcfmvdgr] {
        font-family: var(--font-header);
        font-weight: 800;
        color: var(--card-bg-top);
        font-size: 2rem;
        width: fit-content;
        margin: 0 1rem;
    }

    .discount .discount-text[b-gopcfmvdgr] {
        font-family: var(--font-body);
        font-weight: 500;
        color: var(--card-bg-top);
        font-size: .9rem;
        flex: 1;
        margin: 0 1rem;
    }
    .discount .bg[b-gopcfmvdgr] {
        position: absolute;
        top: 0rem;
        width: 100%;
        left: 0;
        font-family: var(--font-header);
        font-weight: 900;
        color: var(--card-bg-top);
        font-size: 6.4rem;
        width: fit-content;
        font-style: italic;
        opacity: .05;
        word-break: break-all;
        line-height: 72px;
        text-align: center;
    }
/* _content/PowerPlan/Pages/OnboardingScreens/Screens/OnboardingPositions.razor.rz.scp.css */
.positions-row[b-11cjnrgdzt] {
    align-content: flex-start;
    width: 100%;
    flex: 1; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 1rem;
    gap: .5rem;
}

    .position-card[b-11cjnrgdzt] {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        padding: 0rem 0.5rem;
        border-radius: 1rem;
        background: var(--card-bg-top);
        border: 0.1rem solid var(--c);
        box-sizing: border-box; 
        height: fit-content;
        box-shadow: none;
        transform: translateY(-.2rem);
        transition: ease .2s box-shadow, ease .2s transform;
    } 

        .position-card p[b-11cjnrgdzt] {
            font-weight: 500;
            color: var(--text-dark80);
            margin: 0 0.6rem;
            font-size: 1rem;
        }

        .position-card .actions[b-11cjnrgdzt] {
            max-width: 0;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            transition: ease .2s max-width;
            max-width: 30px;
        }

            .position-card .actions span[b-11cjnrgdzt] {
                cursor: pointer;
                font-size: 1.2rem;
                padding: .3rem;
                border-radius: .5rem;
                font-weight: 800;
                color: var(--text-dark);
                margin: .1rem;
            }

                .position-card .actions span:hover[b-11cjnrgdzt] {
                    background: var(--card-bg);
                }


                 .position-card .actions span.delete[b-11cjnrgdzt] {
                    color: var(--warning-hover);
                }
                    .position-card .actions span.delete:hover[b-11cjnrgdzt] {
                        background: var(--warning10);
                    }

.color-prev[b-11cjnrgdzt] {
    --size: 1.75rem;
    background: var(--c);
    height: var(--size);
    width: var(--size);
    min-width: var(--size);
    min-height: var(--size);
    max-height: var(--size);
    border-radius: .5rem;
    cursor: pointer;
    margin: 0.5rem 0;
    transition: ease .2s transform;
}
            .color-prev:hover[b-11cjnrgdzt] {
                transform: scale(1.1);
            }

            form[b-11cjnrgdzt]{
                display: flex;
                flex-direction: row;
                align-items: end;
                gap: .5rem;
            }
.position-card .color-prev[b-11cjnrgdzt] {
    --size: 1.25rem;
    margin: 0;
}
    .position-card .color-prev:hover[b-11cjnrgdzt] {
        transform: scale(1.1);
    }


.no-positions[b-11cjnrgdzt] {
    background: var(--bg-dark);
    padding: 1rem 1.7rem;
    border-radius: 0.7rem;
    font-weight: 900;
    color: var(--input-text);
}

label[b-11cjnrgdzt] {
    color: var(--input-text);
    font-weight: 800;
    margin: 0 1.7rem 0.5rem;
}

.example-list[b-11cjnrgdzt]{
    display: flex;
    flex-direction: row;
    gap: .5rem;
    flex-wrap: wrap;
    background: var(--card-bg-top);
    padding: 1rem;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
}

.positions-row .position-card[b-11cjnrgdzt] {
    padding: 0.3rem 0.6rem;
}
    .positions-row .position-card .color-prev[b-11cjnrgdzt] {
        --size: 1.5rem;
        margin: 0;
    }
.positions-row .position-card p[b-11cjnrgdzt]{
    font-size: 1.2rem;
}
/* _content/PowerPlan/Pages/OnboardingScreens/Screens/OnboardingWelcome.razor.rz.scp.css */
.container[b-8kowodp60m]{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

    .container p[b-8kowodp60m] {
        margin-bottom: 3rem;
    }

.row[b-8kowodp60m]{
    display: flex;
    flex-direction: row;
    flex: 0;
    flex-wrap: nowrap;
    margin-bottom: 8px;
}

.row p[b-8kowodp60m]{
    margin: 2px 16px 2px;
}
/* _content/PowerPlan/Pages/PostsPage.razor.rz.scp.css */
.bulletin-header[b-g00eb5r4r9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin-top: 1rem;
}

.page-content[b-g00eb5r4r9] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

    .page-content .sidebar[b-g00eb5r4r9] {
        width: auto;
        height: fit-content; 
        padding: .5rem;
        border-radius: 1rem;
        background: var(--card-bg);
        display: flex;
        flex-direction: column;
    }

        .page-content .sidebar label[b-g00eb5r4r9] {
            font-family: Montserrat, sans-serif;
            font-weight: 800;
            color: var(--input-text);
            margin: .75rem 1rem .5rem;
        }
        .page-content .sidebar .list[b-g00eb5r4r9] {
            margin: 0;
            padding: 0;
        }

        .page-content .sidebar .list .tags[b-g00eb5r4r9]{
            display: flex;
            flex-direction: column;
            gap: .2rem;
        }

            .page-content .sidebar .list .tags .sep[b-g00eb5r4r9]{
                width: 90%;
                height: .1rem;
                margin: .2rem auto;
                background: var(--bg-dark);
            }
                .page-content .sidebar .list .tags .sep:not(:has(+.item))[b-g00eb5r4r9]{
                    display: none;
                }
                .page-content .sidebar .list .item[b-g00eb5r4r9] {
                    --light: var(--bg-dark);
                    position: relative;
                    border: none;
                    background: var(--bg);
                    width: 8rem;
                    margin: 0 .5rem;
                    padding: .5rem .5rem .5rem .75rem;
                }
            .page-content .sidebar .list .item  span[b-g00eb5r4r9] {
                color: var(--primary);
                font-size: 16px;
                margin-right: .5rem;
                margin-top: 2px;
                margin-bottom: auto;
            }

                .page-content .sidebar .list .item p[b-g00eb5r4r9] {
                    flex: 1;
                    color: var(--input-text);
                }
                .page-content .sidebar .list .item.selected[b-g00eb5r4r9] {
                    background: var(--light);
                }

                body[data-theme='dark'] .page-content .sidebar .list .item.selected[b-g00eb5r4r9] {
                    background: var(--dark);
                }

                    .page-content .sidebar .list .item.selected p[b-g00eb5r4r9],
                    .page-content .sidebar .list .item.selected span[b-g00eb5r4r9] {
                        font-weight: 600;
                        color: var(--primary);
                    }

                .page-content .sidebar .list .item div.count[b-g00eb5r4r9]{
                    padding: 2px 6px;
                    background: var(--light);
                    font-size: 12px;
                    font-weight: 900;
                    color: var(--primary);
                    border-radius: 8px;
                    margin-bottom: auto;
                }

                body[data-theme='dark'] .page-content .sidebar .list .item div.count[b-g00eb5r4r9] {
                    background: var(--dark);
                }

.page-content .sidebar .list .tags .new-tag[b-g00eb5r4r9] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--text-dark-mute);
    padding: .5rem .5rem .5rem .75rem;
    cursor: pointer;
    border-radius: .5rem;
    transition: ease background .2s, ease outline .2s;
}

    .page-content .sidebar .list .tags .new-tag:hover[b-g00eb5r4r9] {
        background: var(--bg);
    }
    .page-content .sidebar .list .tags .new-tag:focus[b-g00eb5r4r9] {
        outline: .1rem solid var(--bg-darker);
    }
    .page-content .sidebar .list .tags .new-tag span[b-g00eb5r4r9] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .5rem;
        font-size: 0.8rem;
        font-weight: 900;
        background: var(--bg-darker);
        color: var(--input-text);
        padding: .1rem;
        border-radius: 50%;
        transition: transform ease .2s;
    }

.page-content .sidebar .list .tags .create-new-tag[b-g00eb5r4r9] {
    background: var(--bg-dark);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 4px;
}
    .page-content .sidebar .list .tags .create-new-tag label[b-g00eb5r4r9]{
        margin: .75rem .75rem 0;
    }

    .page-content .sidebar .list .tags .create-new-tag .colors[b-g00eb5r4r9] {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 8rem;
        margin: .5rem;
        margin-bottom: 0;
        padding: .5rem;
        border-radius: .5rem;
        gap: 4px;
        background: var(--card-bg-top)
    }
    .page-content .sidebar .list .tags .create-new-tag .colors .color[b-g00eb5r4r9] {
        --size: 20px;
        height: var(--size);
        width: var(--size);
        margin: 5px;
        border-radius: 2px;
        outline: 5px solid var(--light);
        background: var(--light);
        transition: ease .2s outline, ease .2s background;
        cursor: pointer;
    }
body[data-theme='dark'] .page-content .sidebar .list .tags .create-new-tag .colors .color[b-g00eb5r4r9] {
    outline: 5px solid var(--dark);
    background: var(--dark);
}
        .page-content .sidebar .list .tags .create-new-tag .colors .color.selected[b-g00eb5r4r9] {
            background: var(--primary);
        }

        .page-content .sidebar .list .tags .create-new-tag[b-g00eb5r4r9]  .input-component {
            margin: 8px auto;
        }

.page-content .sidebar .list .tags .create-new-tag[b-g00eb5r4r9]  input {
    width: 7.4rem;
    border: none;
    padding: 0.6rem .8rem;
    margin: 0;
    border-radius: .5rem;
}
.page-content .sidebar .list .tags .create-new-tag .actions[b-g00eb5r4r9] {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    gap: 4px;
}

.page-content .bulletins-container[b-g00eb5r4r9] {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    max-width: 50rem;
}

.bulletin-header-row[b-g00eb5r4r9] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .bulletin-header-row div[b-g00eb5r4r9]{
        display: flex;
        flex-direction: row;
        gap: .5rem;
    }

    .bulletin-header-row .col[b-g00eb5r4r9]{
        display: flex;
        flex-direction: column;
    }
        .bulletin-header-row .col label[b-g00eb5r4r9] {
            background: var(--card-bg);
            width: fit-content;
            padding: .3rem .75rem;
            border-radius: .5rem;
            margin-left: 0.5rem;
            font-weight: 800;
            color: var(--input-text);
            font-size: .8rem;
        }

.bulletin-list[b-g00eb5r4r9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
    height: auto;
    gap: .5rem;
}

    .bulletin-list .create-post-container[b-g00eb5r4r9] {
        width: calc(100% - 32px);
        display: flex;
        justify-content: left;
        padding: 0px 16px 16px;
        z-index: 1;
    }

    .bulletin-list p.nomore[b-g00eb5r4r9] {
        width: 100%;
        text-align: center;
        opacity: .8;
        font-style: italic;
        font-size: 12px;
        margin-bottom: 1.5rem;
    }

    .bulletin-list[b-g00eb5r4r9]  .bulletin {
        border: none;
    }


.create-bulletin[b-g00eb5r4r9] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.create-bulletin-header[b-g00eb5r4r9] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    padding: 1rem 0;
}

.create-bulletin .actions[b-g00eb5r4r9] {
    display: flex;
    flex-direction: row;
    justify-content: right;
    width: calc(100% - 32px);
    gap: 8px;
    padding: 8px 0 16px;
}

.create-bulletin-page[b-g00eb5r4r9] {
    width: calc(100% - 1rem);
    height: fit-content;
    background: var(--bg-dark);
    border-radius: 1.6rem;
    padding: .5rem;
    padding-top: 1.5rem;
    margin: 0 1rem;
}

.bullet-title[b-g00eb5r4r9] {
    display: flex;
    flex-direction: row;
    align-items: end;
    width: 100%;
    padding: 0 .5rem .5rem;
}
    .bullet-title[b-g00eb5r4r9]  .input-component {
        flex: 1;
    }

        .bullet-title[b-g00eb5r4r9]  .input-container input {
            margin: 0;
            margin-top: .5rem;
        }
        .bullet-title[b-g00eb5r4r9]  button{
            margin: 0.3rem;
        }
.create-bulletin-page > h2[b-g00eb5r4r9]{
    margin: 0 1rem 1rem;
    font-size: 2rem;
    font-weight: 900;
    color: var(--input-text)
}
.create-bulletin-page .bullet-title[b-g00eb5r4r9]  .input-component label,
.create-bulletin-page[b-g00eb5r4r9]  .dropdown-container label {
    background: var(--card-bg);
    width: fit-content;
    padding: .3rem .75rem;
    border-radius: .5rem;
    margin-left: 0.5rem;
    font-weight: 800;
    color: var(--input-text);
}
.editor-content[b-g00eb5r4r9]{
    background: var(--card-bg-top);
    padding: .4rem;
    border-radius: 1.2rem;
}
.create-bulletin-page[b-g00eb5r4r9]  .input-component > label {
    color: var(--text-dark);
    margin-left: 1rem;
}
    .create-bulletin-page[b-g00eb5r4r9]  .ql-toolbar {
        background: var(--bg);
        border-radius: .8rem;
        margin-bottom: 8px;
    }
.create-bulletin-page[b-g00eb5r4r9]  .ql-container {
    background: var(--card-bg-top);
    border: none;
}
    .create-bulletin-page[b-g00eb5r4r9]  .ql-editor.ql-blank::before {
        color: var(--text-dark-accent);
    }

.bulletin-ghost[b-g00eb5r4r9] {
    position: relative;
    width: calc(100% - 2.6rem);
    height: auto;
    border: .1rem solid var(--card-border);
    padding: 1.3rem;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
}

.bulletin-ghost-row[b-g00eb5r4r9] {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: fit-content;
}

    .bulletin-ghost-row section div[b-g00eb5r4r9] {
        border-radius: .3rem;
        width: 16rem;
        max-width: calc(100% - 5rem);
        height: 1rem;
        min-height: 1.3rem;
        margin: .2rem .5rem;
    }

        .bulletin-ghost-row section div:last-of-type[b-g00eb5r4r9] {
            height: 12px;
            min-height: 12px;
            width: 10rem;
        }

.profile-ghost[b-g00eb5r4r9] {
    height: 3rem;
    width: 3rem;
    min-height: 3rem;
    min-width: 3rem;
    max-height: 3rem;
    max-width: 3rem;
    border-radius: .5rem;
}

.bulletin-body-ghost[b-g00eb5r4r9] {
    height: 5rem;
    width: 100%;
    margin-top: .5rem;
    border-radius: .3rem;
}

.no-posts[b-g00eb5r4r9] {
    background: var(--bg-dark);
    width: calc(100% - 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 1rem;
}

.no-posts h2[b-g00eb5r4r9]{
    color: var(--input-text);
}

.site-col[b-g00eb5r4r9] {
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
}
.site-col[b-g00eb5r4r9]  button{
    width: fit-content !important;
}
    .site-col[b-g00eb5r4r9]  .site-wrapper {
        margin: 8px 0px;
    }
/* _content/PowerPlan/Pages/ResetPassword.razor.rz.scp.css */
/*Login*/
.layout[b-xabml7io95]{
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-form[b-xabml7io95] {
    height: auto;
    width: 22rem;
    max-width: 80vw;
    background: var(--card-bg);
    border: .1rem solid var(--card-border);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    padding-bottom: 32px;
}

    .login-form form[b-xabml7io95] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(100% - 32px);
    }

form[b-xabml7io95]  .input-component {
    width: inherit;
}

.login-container[b-xabml7io95] {
    margin: auto 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

h3[b-xabml7io95] {
    margin: 0rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--input-text);
    width: calc(100% - 5rem);
}

p[b-xabml7io95] {
    width: calc(100% - 4.5rem);
    margin-top: 0;
}

.ego-container[b-xabml7io95] {
    position: relative;
    width: calc(100%);
    height: 12rem;
    min-height: 250px;
    margin-bottom: 2rem;
    background: var(--primary-variable);
    box-shadow: inset 0 0px 4rem -1rem var(--card-bg-top);
    border-radius: 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: ease .2s all;
}

    .ego-container[b-xabml7io95]::before {
        content: " ";
        position: absolute;
        min-height: 80%;
        min-width: 80%;
        transform: translate(-50%, -50%);
        top: calc(50% + 2.5rem);
        left: 50%;
        border-radius: 16px;
        background: var(--primary-variable);
        filter: blur(20px);
        opacity: .8;
        z-index: 0;
    }

    .ego-container .img-container[b-xabml7io95] {
        height: 80%;
        max-height: 100%;
        transition: ease .2s all;
        z-index: 1;
        animation: idle-b-xabml7io95 ease-in-out 3s infinite;
    }

        .ego-container .img-container img[b-xabml7io95] {
            height: 100%;
            transition: ease .2s all;
        }

            .ego-container .img-container img.wobble[b-xabml7io95] {
                animation: wobble-b-xabml7io95 0.8s both;
            }

            .ego-container .img-container img.wobblea[b-xabml7io95] {
                animation: wobblea-b-xabml7io95 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) both;
            }

.remember-me[b-xabml7io95] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 24px;
    font-family: var(--font-header);
    font-size: .7rem;
    font-weight: 800;
    color: var(--text-dark-accent);
}

    .remember-me[b-xabml7io95]  .checkbox {
        margin-right: 8px;
    }

.signup[b-xabml7io95] {
    display: flex;
    flex-direction: row;
    color: var(--text-dark-mute);
    margin-top: 1rem;
}

    .signup span[b-xabml7io95] {
        font-style: italic;
        cursor: pointer;
        margin-left: 8px;
        font-weight: 700;
    }

label[b-xabml7io95] {
    font-family: var(--font-header);
    font-weight: 800; 
    color: var(--input-text);
    font-size: .8rem;
    text-align: left;
    width: calc(100% - 3rem);
    margin: 0.5rem 0 0 0.5rem;
}

@keyframes idle-b-xabml7io95 {
    0% {
        transform: translateY(0px);
    }

    35% {
        transform: translateY(-8px);
    }

    90%, 100% {
        transform: translateY(0px);
    }
}

@keyframes wobblea-b-xabml7io95 {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(-20px) rotate(-6deg);
    }

    30% {
        transform: translateX(10px) rotate(6deg);
    }

    45% {
        transform: translateX(-10px) rotate(-3.6deg);
    }

    60% {
        transform: translateX(6px) rotate(2.4deg);
    }

    75% {
        transform: translateX(-4px) rotate(-1.2deg);
    }
}

@keyframes wobble-b-xabml7io95 {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(30px) rotate(6deg);
    }

    30% {
        transform: translateX(-15px) rotate(-6deg);
    }

    45% {
        transform: translateX(15px) rotate(3.6deg);
    }

    60% {
        transform: translateX(-9px) rotate(-2.4deg);
    }

    75% {
        transform: translateX(6px) rotate(1.2deg);
    }
}

.person[b-xabml7io95] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .5rem;
    border-radius: 1rem;
    background: var(--card-bg-top50);
    box-shadow: inset var(--card-bg-top) 0 0 16px, var(--shadow-small);
    gap: 0.75rem;
    height: fit-content;
    width: calc(100% - 3.5rem);
    max-width: calc(100% - 3.5rem);
    box-sizing: border-box;
    margin-bottom: 0.3rem;
    overflow: hidden;
    z-index: 1;
}
    .person h2[b-xabml7io95] {
        font-weight: 800;
        margin: 0;
        font-size: 1.35rem;
        color: var(--text-dark-accent);
    }
    .person[b-xabml7io95]  .profilePicture{
        --s: 2.5rem;
    }

.not-me[b-xabml7io95] {
    margin: 0 0 1.5rem;
    padding: 0 0.25rem;
    box-sizing: border-box;
    color: var(--text-dark-mute);
    font-size: 0.9rem;
    opacity: .7;
}
    .not-me a[b-xabml7io95]{
        opacity: .8;
        cursor: pointer;
        color: inherit;
        text-decoration: underline;
        font-size: inherit;
    }

[b-xabml7io95] .hurtig_button.Primary.Big {
    margin-top: 0.5rem;
}
 
@media (max-width: 768px) {
    .login-form[b-xabml7io95] {  
        max-width: 100%;
        margin: 0 1rem; 
        box-sizing: border-box;
    }

    .ego-container[b-xabml7io95] { 
        min-height: 180px;
        height: 10rem;
        margin-bottom: 1.5rem;
    }

        .ego-container[b-xabml7io95]::before { 
            min-height: 70%;
            min-width: 70%;
            top: calc(50% + 2rem);
        }

    h3[b-xabml7io95] { 
        width: 100%;
        padding: 0 1.5rem;
        box-sizing: border-box; 
    }

    p[b-xabml7io95] { 
        width: 100%;
        padding: 0 0.5rem;
        box-sizing: border-box;
    }

    .login-form form[b-xabml7io95] { 
        width: 100%;
        padding: 16px;
        gap: 0.75rem;
        box-sizing: border-box;
    }

    .person[b-xabml7io95] { 
        width: 100%;
        max-width: 100%;
        padding: 0.5rem;
    }

    .not-me[b-xabml7io95] {
        width: 100%;
        padding: 0 1.5rem;
        box-sizing: border-box;
        margin-bottom: 1rem;
    }
}
/* _content/PowerPlan/Pages/RevenuePage.razor.rz.scp.css */
/* Layout Containers */
.page-container[b-0p7efu3qu1] {
    padding: 0;
    padding-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.header-row[b-0p7efu3qu1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.subtitle[b-0p7efu3qu1] {
    color: var(--text-dark-accent);
    font-weight: 500;
    margin: 0;
    margin-top: 0.25rem;
}

.controlls[b-0p7efu3qu1] {
    position: sticky;
    top: 8px;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 4px;
    z-index: 10;
    box-sizing: border-box;
    overscroll-behavior: contain;
    transition: ease .2s top, ease .2s background, ease .2s margin, ease .2s max-height !important;
}

    .controlls[b-0p7efu3qu1]::-webkit-scrollbar {
        height: 7px;
    }

    .controlls[b-0p7efu3qu1]::-webkit-scrollbar-thumb {
        border: 2px solid var(--bg);
    }

        .controlls[b-0p7efu3qu1]::-webkit-scrollbar-thumb:hover {
            border: 0px solid var(--bg);
        }

    .controlls .sep[b-0p7efu3qu1] {
        min-width: 0.1rem;
        min-height: 2rem;
        background: var(--bg-darker);
        border-radius: .2rem;
        height: 100%;
        margin: 0 .5rem;
    }

    .controlls .buttons[b-0p7efu3qu1] {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        background: var(--card-bg);
        border: 0.1rem solid var(--card-border50);
        padding: .3rem;
        border-radius: 1rem;
        flex: 1;
        gap: 8px;
        height: 100%;
    }

        .controlls .buttons.no-flex[b-0p7efu3qu1] {
            flex: unset;
        }

        .controlls .buttons[b-0p7efu3qu1]:before {
            content: attr(title);
            position: absolute;
            bottom: calc(100% + 0.1rem);
            left: 0.5rem;
            font-size: 0.8rem;
            color: var(--text-dark-mute);
        }

        .controlls .buttons p[b-0p7efu3qu1] {
            white-space: nowrap;
            background: var(--card-bg-top);
            padding: 0 0.8rem;
            margin: 0;
            border-radius: 0.6rem;
            font-family: var(--font-body);
            font-weight: 400;
            color: var(--text-dark80);
            height: 2.5rem;
            display: flex;
            align-items: center;
        }

        .controlls .buttons[b-0p7efu3qu1]  button {
            box-shadow: 0px 0.7px 0.6px hsl(var(--shadow-color) / 0.52), 0px 1px 0.9px -2px hsl(var(--shadow-color) / 0.38), 0px 2.5px 2.2px -4.1px hsl(var(--shadow-color) / 0.25);
        }

            .controlls .buttons[b-0p7efu3qu1]  button:not(.no-text) {
                padding: 0.4rem 1rem;
            }

            .controlls .buttons[b-0p7efu3qu1]  button.DefaultMute {
                border: none;
            }

            .controlls .buttons[b-0p7efu3qu1]  button .title {
                height: 1.5rem;
                line-height: 1.5rem;
            }

        .controlls .buttons label[b-0p7efu3qu1] {
            font-weight: 800;
            font-family: var(--font-header);
            font-size: .7rem;
            top: 0;
            position: absolute;
            color: var(--input-text);
        }

        .controlls .buttons .timerange-texts[b-0p7efu3qu1] {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: left;
            align-items: flex-start;
        }

            .controlls .buttons .timerange-texts span[b-0p7efu3qu1] {
                margin: 0;
                font-size: 11px;
                text-align: left;
            }

                .controlls .buttons .timerange-texts span:last-of-type[b-0p7efu3qu1] {
                    font-weight: 800;
                }

.week-nav[b-0p7efu3qu1] {
    display: flex;
    gap: 0.5rem;
    background: var(--card-bg);
    padding: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--card-border);
}

/* Dashboard Grid */
.dashboard-grid[b-0p7efu3qu1] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.performance-card[b-0p7efu3qu1] {
    flex: 2;
    min-width: min(100%, 45rem);
    padding: 0; /* Let children handle padding for full-width lists */
    overflow: hidden;
    border-radius: 24px;
}

.settings-card[b-0p7efu3qu1] {
    position: absolute;
    flex: 1;
    min-width: 20rem;
    padding: 1.5rem;
    min-width: fit-content;
    border-radius: 24px;
    z-index: 2;
    background: var(--card-bg80);
    backdrop-filter: blur(6px);
    animation: settings-card-in-b-0p7efu3qu1 0.3s ease forwards 1;
}

@keyframes settings-card-in-b-0p7efu3qu1{
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}

.card-header[b-0p7efu3qu1] {
    padding: 1.5rem 1.5rem 1rem 1.5rem;  
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-card .card-header[b-0p7efu3qu1] {
    padding: 0rem 0rem 1rem 0rem;
}

.card-header h3[b-0p7efu3qu1] {
    margin: 0;
    font-size: 1.2rem;
}

    .card-header .desc[b-0p7efu3qu1] {
        color: var(--text-dark-accent);
        font-size: 0.85rem;
        margin: 0.25rem 0 0 0;
    }

/* Header Stats */
.stat-pill[b-0p7efu3qu1] {
    background: var(--bg);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: 1px solid var(--card-border);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9rem;
}

    .stat-pill .label[b-0p7efu3qu1] {
        color: var(--text-dark-accent);
    }

    .stat-pill .value[b-0p7efu3qu1] {
        color: var(--primary);
        font-weight: 800;
    }

/* List / Table Styling */
.tabel[b-0p7efu3qu1] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tabel-header[b-0p7efu3qu1] {
    padding: 0.75rem 1.5rem;
    background: var(--bg-dark80); /* Slight contrast for header */
}

/* Column Definitions */
.col-date[b-0p7efu3qu1] {
    flex: 1.5;
    min-width: 100px;
}

.col-money[b-0p7efu3qu1] {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.col-status[b-0p7efu3qu1] {
    flex: 1;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.col-badge[b-0p7efu3qu1] {
    flex: 0.8;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.text-end[b-0p7efu3qu1] {
    text-align: right;
    align-items: flex-end !important;
}

/* List Item Styling overrides from style.css .item */
.item[b-0p7efu3qu1] {
    border: none;
    margin: 0;
    border-radius: 0;
    padding: 0.5rem 1.5rem;
    background: transparent;
    color: var(--text-dark);
}

    .item p:not(.text-bad):not(.text-good)[b-0p7efu3qu1] {
        color: inherit;
    }

    .item:last-child[b-0p7efu3qu1] {
        border-bottom: none;
    }

    .item:hover[b-0p7efu3qu1] {
        background: var(--bg);
        border: none;
    }

    .item.today-item .day-name[b-0p7efu3qu1] {
        color: var(--primary) !important;
    }

    .item.footer-item[b-0p7efu3qu1] {
        background: var(--bg-dark50);
        color: var(--text-404);
        border-top: 2px solid var(--card-border);
        border-radius: 1.7rem;
        overflow: hidden;
        padding: 0.8rem 1.3rem;
        margin: 0.1rem;
        border: none;
        color: var(--primary);
    }

    .tabel-header[b-0p7efu3qu1], .item.footer-item[b-0p7efu3qu1] {
        padding-right: 5rem;
    }


    .item.future:not(.today-item)[b-0p7efu3qu1] {
        color: var(--text-dark-accent2);
    }
    .item[b-0p7efu3qu1]  .menu-container {
        z-index: 1;
        opacity: 0.2;
    }
    .item:hover[b-0p7efu3qu1]  .menu-container {
        opacity: 1;
    }
    /* Typography in List */
    .day-name[b-0p7efu3qu1] {
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--text-dark);
        text-transform: capitalize;
    }

.day-date[b-0p7efu3qu1] {
    font-size: 0.75rem;
    color: var(--text-dark-mute);
}

.target-sub[b-0p7efu3qu1] {
    font-size: 0.7rem;
    color: var(--text-dark-accent);
}

.text-goal[b-0p7efu3qu1] {
    opacity: 0.7;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
.text-goal span[b-0p7efu3qu1]{
    color: var(--text-dark-mute);
    font-size: 0.9rem;
}

/* Status Badges */
.status-pill[b-0p7efu3qu1] {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    display: inline-block;
}

    .status-pill.hit[b-0p7efu3qu1] {
        background: var(--accept-mute);
        color: var(--accept-text);
    }

    .status-pill.miss[b-0p7efu3qu1] {
        background: var(--warning-mute);
        color: var(--warning-text);
    }

    .status-pill.pending[b-0p7efu3qu1] {
        background: var(--bg-darker);
        color: var(--text-dark-accent);
    }

/* Settings / Goals Styling */
.goals-list[b-0p7efu3qu1] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.goal-row[b-0p7efu3qu1] {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-radius: 0.75rem;
    padding: 1rem;
    flex: 1;
}

.goal-label[b-0p7efu3qu1] {
    margin-bottom: 0.5rem;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.goal-inputs[b-0p7efu3qu1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.input-group[b-0p7efu3qu1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .input-group label[b-0p7efu3qu1] {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--text-dark-accent); 
    }

/* Custom Input Styling to match Theme */
.theme-input[b-0p7efu3qu1] {
    background: var(--card-bg-top);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-dark);
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

    .theme-input:focus[b-0p7efu3qu1] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary10);
    }

.item .theme-input[b-0p7efu3qu1] {
    width: calc(100% - 32px);
    margin-left: 32px;
}

.actions[b-0p7efu3qu1] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Skeleton Loading */
.skeleton-item[b-0p7efu3qu1] {
    pointer-events: none;
}

.ghost-line[b-0p7efu3qu1] {
    height: 0.8rem;
    border-radius: 0.4rem;
    width: 60%;
    margin: 0.2rem 0;
}

.ghost-pill[b-0p7efu3qu1] {
    height: 1.5rem;
    border-radius: 1rem;
    width: 3rem;
}

.skeleton-goal[b-0p7efu3qu1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* METRICS ROW */
.metrics-row[b-0p7efu3qu1] {
    display: flex;
    gap: 0.5rem; 
    flex-wrap: wrap;
    width: 100%;
}

.metric-card[b-0p7efu3qu1] {
    flex: 1;
    min-width: 20rem;  
    padding: 0;  
    display: flex;
    flex-direction: row;
    position: relative;
    background: var(--card-bg-top);
    border: none;
    border-radius: 1.5rem; 
    height: auto;
}

.metric-header[b-0p7efu3qu1] {
    padding: 1rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 9rem;
    width: fit-content;
}

    .metric-header h5[b-0p7efu3qu1] {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--text-dark);
    }

    .metric-header small[b-0p7efu3qu1] {
        font-size: 0.75rem;
        color: var(--text-dark-accent);
        line-height: 1;
    }

.chart-container[b-0p7efu3qu1] {
    flex: 1;
    padding: 0rem;
    min-height: 120px;
    display: flex;
    align-items: center; /* Pushes bars to bottom if chart is small */
}

.donut-container[b-0p7efu3qu1] {
    align-items: center;
    justify-content: flex-end; 
}

/* SKELETONS FOR CHARTS */
.ghost-chart[b-0p7efu3qu1] {
    width: 100%;
    height: 80%;
    border-radius: 0.5rem;
    margin-top: auto;
    opacity: 0.5;
}

    .ghost-chart.circle[b-0p7efu3qu1] {
        height: 5rem;
        width: 5rem;
        border-radius: 50%;
        margin: auto;
    }

.item .total[b-0p7efu3qu1] {
    --p: 0.3rem;
    --pw: 0.5rem;
    --s: 0.8rem;
    --color: var(--primary);
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .item .total[b-0p7efu3qu1]  .live {
        font-size: 0.8rem;
        padding: var(--p) var(--pw) var(--p) calc(var(--p) + var(--s) + var(--p));
        border-radius: 1rem;
        background: var(--bg-dark2-50);
        color: var(--primary50);
        margin-right: 0.5rem;
    }

        .item .total[b-0p7efu3qu1]  .live::before,
        .item .total[b-0p7efu3qu1]  .live::after {
            content: " ";
            border-radius: 50%;
            background: var(--color);
            height: var(--s);
            width: var(--s);
            max-height: var(--s);
            max-width: var(--s);
            min-height: var(--s);
            min-width: var(--s);
            position: absolute;
            z-index: 1;
            left: var(--p);
            top: 50%;
            transform: translateY(-50%) scale(1);
            animation: live-pulse-b-0p7efu3qu1 3s infinite ease-out;
        }

            .item .total[b-0p7efu3qu1]  .live::after{
                animation-delay: 1s;
            }

            @keyframes live-pulse-b-0p7efu3qu1 {
                0% {
                    transform: translateY(-50%) scale(0);
                    opacity: 1;
                }

                100% {
                    transform: translateY(-50%) scale(1.5);
                    opacity: 0;
                }
            }

        .pill[b-0p7efu3qu1] {
            font-size: 0.8rem;
            padding: 0.2rem 0.6rem;
            border-radius: 0.8rem;
            font-family: var(--font-header);
            font-weight: 700;
            color: var(--input-text);
            --stripe-width: 10px;
            background-image: repeating-linear-gradient( 45deg, var(--bg-dark) 0, var(--bg-dark) var(--stripe-width), var(--bg-dark2) var(--stripe-width), var(--bg-dark2) calc(var(--stripe-width) * 2) );
            background-size: 28.28px 28.28px;
            animation: scroll-stripes-b-0p7efu3qu1 2s linear infinite;
        }

@keyframes scroll-stripes-b-0p7efu3qu1 {
    0% {
        background-position: 0 0;
    }

    100% { 
        background-position: 28.28px 0;
    }
}

/* Responsive Tweaks */
@media (max-width: 1100px) {
    .dashboard-grid[b-0p7efu3qu1] {
        flex-direction: column;
    }

    .performance-card[b-0p7efu3qu1], .settings-card[b-0p7efu3qu1] {
        min-width: 100%;
        flex: unset;
    }

    .settings-card[b-0p7efu3qu1] {
        position: static;
    }
}

@media (max-width: 600px) {
    .col-badge[b-0p7efu3qu1] {
        display: none;
    }
    /* Hide badge on mobile to save space */
    .item[b-0p7efu3qu1] {
        padding: 1rem 0.75rem;
    }
}
/* _content/PowerPlan/Pages/RosterPage.razor.rz.scp.css */
.controlls[b-urqpuhpqrc] {
    margin: 1rem 0rem;
    margin-top: 0.6rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.roster[b-urqpuhpqrc] {
    padding-bottom: 1.5rem;
    border-radius: 20px;
    background: var(--card-bg);
}


.controlls .buttons[b-urqpuhpqrc] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 0.1rem solid var(--card-border50);
    margin: 0;
    padding-right: 0.5rem;
    border-radius: 1rem;
    width: fit-content;
}

[b-urqpuhpqrc] #togglesiteselector{
    margin-right: 0.1rem;
}

.controlls .buttons p[b-urqpuhpqrc] {
    background: var(--card-bg-top);
    padding: 0.8rem;
    margin: 0;
    border-radius: 0.6rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-dark80);
}

[b-urqpuhpqrc] .roster-component {
    margin: 0rem 1rem;
    margin-right: 0rem;
}

.controlls .buttons[b-urqpuhpqrc]  button {
    margin: .5rem;
    border: .1rem solid var(--card-border);
    box-shadow: 0px 0.7px 0.6px hsl(var(--shadow-color) / 0.52), 0px 1px 0.9px -2px hsl(var(--shadow-color) / 0.38), 0px 2.5px 2.2px -4.1px hsl(var(--shadow-color) / 0.25);
}

    .controlls .buttons[b-urqpuhpqrc]  button:not(.no-text) {
        padding: 0.4rem 1rem;
    }

.controlls .buttons[b-urqpuhpqrc]  button .title {
    height: 1.5rem;
    line-height: 1.5rem;
}

.controlls .buttons[b-urqpuhpqrc]  button.realign {
    margin-left: 0;
}

.controlls .buttons[b-urqpuhpqrc]  button.realign span {
    margin-left: 0.3rem !important;
    margin-right: -0.3rem !important;
}
/* _content/PowerPlan/Pages/RosterTemplatePage.razor.rz.scp.css */
.template-page[b-azqaxdfcms] {
    display: flex;
    flex-direction: column;
}

.editor[b-azqaxdfcms] {
    display: flex;
    flex-direction: column;
}

    .editor .actions[b-azqaxdfcms] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.5rem 1rem;
    }

.template-list[b-azqaxdfcms] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: .8rem;
    padding: 16px;
}

    .template-list .row[b-azqaxdfcms] {
        display: flex;
        flex-direction: row;
    }

    .template-list .templates[b-azqaxdfcms] {
        display: flex;
        flex-direction: row;
        overflow-y: auto;
        gap: 8px;
        padding: .2rem;
    }

[b-azqaxdfcms] .add-button {
    margin-bottom: 1rem;
}

.roster-container[b-azqaxdfcms] {
    border-radius: 20px;
    margin: 0.8rem 0;
    padding: 1rem 1rem 1rem 2rem;
    background: var(--card-bg);
    width: fit-content;
}

.title[b-azqaxdfcms] {
    display: flex;
    align-items: center;
}

    .title h1[b-azqaxdfcms] {
        border-bottom: solid .3rem transparent;
    }

    .title .edit[b-azqaxdfcms] {
        cursor: pointer;
        font-size: 2rem;
        color: var(--text-dark);
    }

    .title input[b-azqaxdfcms] {
        font-family: var(--font-header);
        font-size: 2rem;
        margin: .5rem;
        font-weight: 500;
        color: var(--text-dark);
        background: transparent;
        border: none;
        outline: none;
        padding: 0;
        border-bottom: dashed .3rem var(--text-dark);
        width: auto;
    }

.sep[b-azqaxdfcms] {
    min-width: .2rem;
    min-height: 3rem;
    background: var(--autofilled);
    border-radius: .2rem;
    height: 100%;
    margin: 0 1rem;
}

.info .positions[b-azqaxdfcms] {
    display: flex;
    flex-direction: column;
    width: fit-content;
}

    .info .positions .positions-list[b-azqaxdfcms] {
        display: flex;
        flex-direction: row;
        padding: 0 .5rem;
        height: 2.5rem;
        border-radius: .4rem;
        background: var(--card-bg-top);
    }

        .info .positions .positions-list p:not(.position)[b-azqaxdfcms] {
            margin: 0;
            margin-top: .6rem;
            margin-right: .5rem;
        }

.info .position[b-azqaxdfcms] {
    flex: 1;
}

    .info .position div[b-azqaxdfcms] {
        height: unset;
        min-width: unset;
        min-height: unset;
        max-height: unset;
        width: fit-content;
        max-width: 250px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        padding: 0.3rem 0.8rem;
        border-radius: 0.2rem;
        box-sizing: border-box;
        font-weight: 900;
        border: 0.1rem solid black;
        z-index: 1;
        transition: background .2s cubic-bezier(0.44, -0.07, 0.15, 0.9);
        margin: 0;
        margin-right: .5rem;
        padding: .3rem .5rem;
        font-size: .8rem;
    }

    .info .position:not(:first-of-type):last-of-type div[b-azqaxdfcms] {
        margin-right: 0;
    }

.info[b-azqaxdfcms] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 0.1rem solid var(--card-border50);
    padding: .5rem;
    padding-left: 0rem;
    border-radius: 1rem;
    width: fit-content;
}

    .info[b-azqaxdfcms]  .input-component {
        position: relative;
    }

        .info[b-azqaxdfcms]  .input-component input {
            margin: 0;
            padding: 0.6rem 0.8rem;
        }

        .info[b-azqaxdfcms]  .input-component .max-length-display {
            position: absolute;
            top: 100%;
            display: none;
            width: calc(100% - 2rem);
            text-align: center;
            margin: .2rem .5rem;
        }

        .info[b-azqaxdfcms]  .input-component:has(input:focus) .max-length-display {
            display: unset;
        }

    .info label[b-azqaxdfcms] {
        font-family: var(--font-header);
        font-weight: bolder;
        color: var(--input-text);
    }

    .info[b-azqaxdfcms] >  button {
        margin: 0 .5rem;
    }

    .info .info-col[b-azqaxdfcms] {
        display: flex;
        flex-direction: column;
    }

        .info .info-col label[b-azqaxdfcms] {
            font-size: 12px;
            margin-left: .2rem;
        }

        .info .info-col div[b-azqaxdfcms] {
            display: flex;
            flex-direction: row;
        }

            .info .info-col div[b-azqaxdfcms]  button {
                margin: .1rem;
                padding: .3rem;
            }

                .info .info-col div[b-azqaxdfcms]  button.disabled {
                    box-shadow: none;
                }

                .info .info-col div[b-azqaxdfcms]  button span {
                    font-weight: 900;
                }

                .info .info-col div[b-azqaxdfcms]  button.disabled span {
                    color: var(--thumb-color50);
                }

[b-azqaxdfcms] .roster-position-component .day {
    min-width: 10rem;
}
/* _content/PowerPlan/Pages/ScanpaySubscribe.razor.rz.scp.css */
.subscribe-container[b-6ukvxs1teo] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 2rem;
    box-sizing: border-box;
    background: var(--bg);
}

.state-card[b-6ukvxs1teo] {
    background: var(--card-bg-top);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    max-width: 500px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-large);
    transition: all 0.3s ease;
}

.icon-container[b-6ukvxs1teo] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .icon-container .material-icons-round[b-6ukvxs1teo] {
        font-size: 48px;
        color: var(--text-light);
    }

    .icon-container.pulse[b-6ukvxs1teo] {
        background: var(--primary);
        animation: pulse-b-6ukvxs1teo 2s ease-in-out infinite;
    }

    .icon-container.waiting[b-6ukvxs1teo] {
        background: var(--primary-accent);
        animation: rotate-b-6ukvxs1teo 2s linear infinite;
    }

    .icon-container.success[b-6ukvxs1teo] {
        background: var(--accept);
        animation: scaleIn-b-6ukvxs1teo 0.5s ease;
    }

    .icon-container.error[b-6ukvxs1teo] {
        background: var(--warning);
    }

@keyframes pulse-b-6ukvxs1teo {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes rotate-b-6ukvxs1teo {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes scaleIn-b-6ukvxs1teo {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.state-card h1[b-6ukvxs1teo] {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    color: var(--text-dark);
}

.description[b-6ukvxs1teo] {
    color: var(--text-dark-mute);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.error-list[b-6ukvxs1teo] {
    text-align: left;
    background: var(--card-bg-warning);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem 1.25rem 2.5rem;
    margin: 1.5rem 0;
    list-style: none;
}

    .error-list li[b-6ukvxs1teo] {
        color: var(--warning-text);
        margin: 0.5rem 0;
        position: relative;
        line-height: 1.5;
    }

        .error-list li[b-6ukvxs1teo]::before {
            content: "•";
            font-family: unset;
            position: absolute;
            left: -1rem;
            font-weight: bold;
        }

.status-indicator[b-6ukvxs1teo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--bg-darker);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
}

.status-dot[b-6ukvxs1teo] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--secondary);
}

    .status-dot.pulsing[b-6ukvxs1teo] {
        animation: dotPulse-b-6ukvxs1teo 1.5s ease-in-out infinite;
    }

@keyframes dotPulse-b-6ukvxs1teo {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.status-indicator span[b-6ukvxs1teo] {
    color: var(--text-dark);
    font-weight: 500;
}

.help-text[b-6ukvxs1teo] {
    color: var(--text-dark-mute);
    font-size: 0.9rem;
    margin: 1rem 0 1.5rem;
}

.button-group[b-6ukvxs1teo] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.countdown-container[b-6ukvxs1teo] {
    margin: 2rem 0;
}

.countdown-circle[b-6ukvxs1teo] {
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
    position: relative;
}

.countdown-svg[b-6ukvxs1teo] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.countdown-bg[b-6ukvxs1teo] {
    fill: none;
    stroke: var(--bg-darker);
    stroke-width: 8;
}

.countdown-progress[b-6ukvxs1teo] {
    fill: none;
    stroke: var(--accept);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    transition: stroke-dashoffset 1s linear;
}

.countdown-text[b-6ukvxs1teo] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    font-family: var(--font-header);
}

.countdown-label[b-6ukvxs1teo] {
    color: var(--text-dark-mute);
    font-size: 0.95rem;
    margin: 0;
}

.success-state[b-6ukvxs1teo] {
    animation: slideUp-b-6ukvxs1teo 0.5s ease;
}

@keyframes slideUp-b-6ukvxs1teo {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/PowerPlan/Pages/Settings/SettingsPageBilling.razor.rz.scp.css */
/* --- BANNER STYLES (Adapted for Settings Page) --- */
.banner[b-iwmy43zw1d] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: var(--card-bg);
    transition: all 0.2s ease;
    margin-bottom: 2rem;
    border: 1px solid transparent;
}

    .banner .material-icons[b-iwmy43zw1d] {
        font-size: 1.5rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
    }

    .banner .text-content[b-iwmy43zw1d] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

        .banner .text-content h4[b-iwmy43zw1d] {
            margin: 0;
            font-size: 1rem;
            font-weight: 800;
            font-family: var(--font-header);
            color: inherit;
        }

        .banner .text-content p[b-iwmy43zw1d] {
            margin: 0;
            font-size: 0.9rem;
            line-height: 1.5;
            opacity: 0.9;
        }

    .banner[b-iwmy43zw1d]  a {
        color: inherit;
        text-decoration: underline;
        font-weight: 600;
    }

    /* Banner Variations */
    .banner.error[b-iwmy43zw1d] {
        background: var(--warning-mute);
        border-color: var(--warning20);
        color: var(--warning-text);
    }

        .banner.error .material-icons[b-iwmy43zw1d] {
            color: var(--warning);
        }

    .banner.warning[b-iwmy43zw1d] {
        background: var(--card-bg-top);
        border-color: var(--secondary50);
        color: var(--text-dark);
    }

        .banner.warning .material-icons[b-iwmy43zw1d] {
            color: var(--secondary);
        }

    .banner.info[b-iwmy43zw1d] {
        background: var(--card-bg-top);
        border-color: var(--primary50);
        color: var(--text-dark);
    }

        .banner.info .material-icons[b-iwmy43zw1d] {
            color: var(--primary);
        }


/* --- PAYMENT CARD WIDGET --- */
.payment-card-widget[b-iwmy43zw1d] {
    background: var(--card-bg-top);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    transition: box-shadow 0.2s;
}

    .payment-card-widget:hover[b-iwmy43zw1d] {
        box-shadow: var(--shadow-small);
    }

.card-visual[b-iwmy43zw1d] {
    width: 48px;
    height: 32px;
    background: var(--bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
}

    .card-visual img[b-iwmy43zw1d] {
        max-height: 24px;
        max-width: 40px;
    }

.card-details[b-iwmy43zw1d] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .card-details .top-row[b-iwmy43zw1d] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 2px;
    }

    .card-details .brand-name[b-iwmy43zw1d] {
        font-weight: 700;
        font-size: 0.95rem;
    }

    .card-details .last-4[b-iwmy43zw1d] {
        font-family: var(--font-mono);
        font-size: 0.9rem;
        color: var(--text-dark-mute);
    }

    .card-details .meta-row[b-iwmy43zw1d] {
        display: flex;
        gap: 12px;
        font-size: 0.75rem;
        color: var(--text-dark-mute);
    }

.card-actions[b-iwmy43zw1d] {
    margin-left: auto;
}

.empty-payment-state[b-iwmy43zw1d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.5rem;
}

    .empty-payment-state p[b-iwmy43zw1d] {
        margin: 0;
        color: var(--text-dark-mute);
        font-style: italic;
    }

.invoice-container[b-iwmy43zw1d] {
    padding: 1rem;
    background: var(--bg-dark);
    border-radius: 3rem;
}

    .invoice-container[b-iwmy43zw1d]  .invoice {
        margin: 0 auto;
    }

    /* --- INVOICE HISTORY LIST --- */
    .history-list[b-iwmy43zw1d] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

.load-more-container[b-iwmy43zw1d] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
    .payment-card-widget[b-iwmy43zw1d] {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-actions[b-iwmy43zw1d] {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: -2rem; /* Move up to align with text on mobile if space permits */
    }
}
/* _content/PowerPlan/Pages/Settings/SettingsPageIntegrations.razor.rz.scp.css */
.payroll-item[b-1n7hrkom3r] {
    display: flex; 
    align-items: center;
    justify-content: start;
    gap: 8px;
}
.payroll-item img[b-1n7hrkom3r]{
    max-height: 32px;
    border-radius: 4px;
    overflow: hidden;
}
/* _content/PowerPlan/Pages/Settings/SettingsPageOrganizationGeneral.razor.rz.scp.css */
.settings-panel[b-uub28901xy] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.panel-section[b-uub28901xy] {
    background: var(--card-bg-top);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-small);
}

    .panel-section h2[b-uub28901xy] {
        font-size: 1.2rem;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--card-border);
    }

.form-group[b-uub28901xy] {
    margin-bottom: 1.2rem;
    max-width: 500px;
}

    .form-group label[b-uub28901xy] {
        display: block;
        margin-bottom: 0.4rem;
        font-weight: 600;
        color: var(--text-dark-accent);
    }

@keyframes fadeIn-b-uub28901xy {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/PowerPlan/Pages/Settings/SettingsPageSalary.razor.rz.scp.css */
/* --- Header Utilities --- */
.group-header-row[b-rhx8jub1yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

/* --- Supplements List Container --- */
.supplements-list[b-rhx8jub1yx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Supplement Card (Base) --- */
.supplement-card[b-rhx8jub1yx] {
    background: var(--card-bg-top);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    transition: all 0.2s ease;
    overflow: hidden;
}

    .supplement-card:hover[b-rhx8jub1yx] {
        border-color: var(--primary-mute);
    }

    .supplement-card.is-edit[b-rhx8jub1yx] {
        border-color: var(--primary);
        box-shadow: var(--shadow-float);
        background: var(--bg); /* Slightly distinct background for editor */
    }

/* --- Read Only View --- */
.card-content[b-rhx8jub1yx] {
    padding: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.card-header[b-rhx8jub1yx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .card-header .name[b-rhx8jub1yx] {
        font-weight: 700;
        font-size: 1rem;
        color: var(--text-dark);
    }

    .card-header .badge[b-rhx8jub1yx] {
        background: var(--bg-dark);
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 0.75rem;
        color: var(--text-dark-mute);
    }

.card-details[b-rhx8jub1yx] {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-dark-accent);
}

.detail[b-rhx8jub1yx] {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .detail .material-icons[b-rhx8jub1yx] {
        font-size: 1.1rem;
        opacity: 0.7;
    }

    .detail.muted[b-rhx8jub1yx] {
        margin-left: auto;
        color: var(--text-dark-mute);
    }

/* --- Editor View --- */
.editor-container[b-rhx8jub1yx] {
    padding: 1.5rem;
    animation: fadeIn 0.2s ease;
}

    .editor-container h3[b-rhx8jub1yx] {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        font-weight: 900;
        padding-bottom: 0.5rem;
    }

.editor-row[b-rhx8jub1yx] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

    .editor-row .field-group[b-rhx8jub1yx] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .editor-row .field-group label[b-rhx8jub1yx] {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-dark-mute);
        }

.editor-section[b-rhx8jub1yx] {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.section-label[b-rhx8jub1yx] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark-mute);
    margin-bottom: 0.5rem;
}
/* _content/PowerPlan/Pages/Settings/SettingsPageSites.razor.rz.scp.css */
/* --- EMPTY STATE (Large version for full page) --- */
.empty-state-panel.large[b-mecpqpwbpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--card-bg-top);
    border-radius: 1.5rem;
    border: 1px dashed var(--card-border);
    margin: 2rem;
}

    .empty-state-panel.large span.material-icons[b-mecpqpwbpv] {
        font-size: 4rem;
        color: var(--text-dark-mute);
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-state-panel.large h2[b-mecpqpwbpv] {
        font-family: var(--font-header);
        margin-bottom: 0.5rem;
    }

    .empty-state-panel.large p[b-mecpqpwbpv] {
        max-width: 500px;
        color: var(--text-dark-mute);
        margin-bottom: 2rem;
    }

.settings-page-header .text p[b-mecpqpwbpv]{
    margin: 0.5rem 0 0;
}

.enable-action[b-mecpqpwbpv] {
    margin-bottom: 2rem;
}

.docs-link a[b-mecpqpwbpv] {
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}
h1[b-mecpqpwbpv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-badge[b-mecpqpwbpv] {
    background: var(--primary);
    height: fit-content;
    padding: 3px 12px 3px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 800;
    font-family: var(--font-header);
    color: var(--text-light);
    box-shadow: inset 0 0 20px -8px var(--bg);
}

/* --- HORIZONTAL SITES TRACK --- */
.sites-track[b-mecpqpwbpv] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem;
    margin: 0 -0.5rem 2rem; /* Pull out to align with scrollbar */
    flex-shrink: 0;
}

    .sites-track:not(:hover)[b-mecpqpwbpv]::-webkit-scrollbar {
        display: none;
    }

    .site-card[b-mecpqpwbpv] {
        --site-color: var(--primary);
        --site-soft: var(--primary10);
        position: relative;
        min-width: 14rem;
        max-width: 14rem;
        background: var(--card-bg-top);
        border: 1px solid var(--card-border);
        border-radius: 1.25rem;
        padding: 1.25rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .site-card:hover[b-mecpqpwbpv] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-small);
    }

    .site-card.selected[b-mecpqpwbpv] {
        background: var(--bg-dark);
        border-color: var(--site-color);
        box-shadow: 0 0 0 2px var(--site-soft);
    }

    .site-card .row[b-mecpqpwbpv]{
        display: flex;
    }

    .site-indicator[b-mecpqpwbpv] {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--site-color);
        opacity: 0.3;
    }

.site-card.selected .site-indicator[b-mecpqpwbpv] {
    opacity: 1;
    box-shadow: 0 0 0 4px var(--site-soft);
}
.meta[b-mecpqpwbpv] {
    flex: 1;
}
.meta h2[b-mecpqpwbpv] {
    font-size: 1rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
}

.meta p[b-mecpqpwbpv] {
    font-size: 0.8rem;
    margin: 0;
    color: var(--text-dark-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats[b-mecpqpwbpv] {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-dark);
    background: var(--bg);
    width: fit-content;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-weight: 600;
}

.add-site-btn[b-mecpqpwbpv] {
    min-width: 5rem;
    border-radius: 1.25rem;
    border: 2px dashed var(--card-border);
    background: transparent;
    color: var(--text-dark-mute);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 0.8rem;
}

    .add-site-btn:hover[b-mecpqpwbpv] {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary10);
    }

/* --- READ VALUES --- */
.read-value[b-mecpqpwbpv] {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-dark);
}

    .read-value.address[b-mecpqpwbpv] {
        white-space: pre-line;
    }

/* --- CUSTOM CONTROLS --- */
.icon-picker-row[b-mecpqpwbpv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.current-icon[b-mecpqpwbpv] {
    width: 3rem;
    height: 3rem;
    background: var(--bg);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    border: 1px solid var(--card-border);
}

.icon-option[b-mecpqpwbpv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-dot[b-mecpqpwbpv] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    margin-right: 0.5rem;
}

/* --- CLOCK WIDGETS --- */
.clock-grid[b-mecpqpwbpv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    width: 100%;
}

.clock-widget[b-mecpqpwbpv] {
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.clock-icon[b-mecpqpwbpv] {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--card-bg-top);
    color: var(--text-dark);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clock-info[b-mecpqpwbpv] {
    flex: 1;
}

    .clock-info h4[b-mecpqpwbpv] {
        margin: 0;
        font-size: 0.9rem;
    }

    .clock-info span[b-mecpqpwbpv] {
        font-size: 0.75rem;
        font-family: var(--font-mono);
        opacity: 0.6;
    }

.clock-edit-btn[b-mecpqpwbpv] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dark-mute);
    padding: 0.4rem;
    border-radius: 50%;
}

    .clock-edit-btn:hover[b-mecpqpwbpv] {
        background: var(--card-bg-top);
        color: var(--primary);
    }

/* --- TEAM MANAGEMENT --- */
.group-header-row[b-mecpqpwbpv] {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding-bottom: 0.5rem;
    margin-bottom: 0rem;
}

    .group-header-row h2[b-mecpqpwbpv] {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

.search-box.inline[b-mecpqpwbpv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--card-bg-top);
    border: 1px solid var(--card-border);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    width: 100%;
}

    .search-box.inline input[b-mecpqpwbpv] {
        border: none;
        background: transparent;
        outline: none;
        width: 100%;
        color: var(--text-dark);
    }

/* Transfer UI */
.transfer-ui[b-mecpqpwbpv] {
    display: flex;
    gap: 1rem;
    height: 400px; /* Fixed height for scrollable areas */
    width: 100%;
}

.transfer-panel[b-mecpqpwbpv] {
    flex: 1;
    background: var(--bg);
    border-radius: 0.75rem;
    border: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .transfer-panel h4[b-mecpqpwbpv] {
        padding: 0.75rem;
        margin: 0;
        text-align: center;
        background: var(--card-bg-top); 
        font-size: 0.8rem;
        color: var(--text-dark-mute);
    }

.panel-list[b-mecpqpwbpv] {
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.transfer-divider[b-mecpqpwbpv] {
    color: var(--text-dark-mute);
    display: flex;
    align-items: center;
}

/* People List Items */
.person-item[b-mecpqpwbpv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: 0.5rem;
    background: transparent;
    transition: background 0.1s;
}

    .person-item.clickable:hover[b-mecpqpwbpv] {
        background: var(--card-bg-top);
    }

.p-info[b-mecpqpwbpv] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .p-info .name[b-mecpqpwbpv] {
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.badge-admin[b-mecpqpwbpv] {
    font-size: 0.6rem;
    background: var(--primary);
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    width: fit-content;
}

.actions[b-mecpqpwbpv] {
    display: flex;
    gap: 0.2rem;
}

.mini-btn[b-mecpqpwbpv] {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-dark-mute);
    padding: 0.2rem;
    border-radius: 0.3rem;
}

    .mini-btn:hover[b-mecpqpwbpv] {
        background: var(--card-bg-top);
        color: var(--text-dark);
    }

    .mini-btn.active[b-mecpqpwbpv] {
        color: var(--primary);
    }

    .mini-btn.remove:hover[b-mecpqpwbpv] {
        color: var(--warning);
        background: var(--warning-mute);
    }

.add-icon[b-mecpqpwbpv] {
    color: var(--accept-text);
}

.empty-text[b-mecpqpwbpv] {
    text-align: center;
    padding: 2rem;
    font-size: 0.8rem;
    color: var(--text-dark-mute);
    font-style: italic;
}

/* Read Only People Grid */
.ro-people-list[b-mecpqpwbpv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.person-card[b-mecpqpwbpv] {
    background: var(--bg);
    padding: 0.6rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--card-border);
}

    .person-card .details[b-mecpqpwbpv] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 1;
    }

    .person-card .name[b-mecpqpwbpv] {
        font-weight: 700;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .person-card .role[b-mecpqpwbpv] {
        font-size: 0.7rem;
        color: var(--text-dark-mute);
    }

.role-badge[b-mecpqpwbpv] {
    color: var(--primary);
}

.empty-selection-state[b-mecpqpwbpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--text-dark-mute);
    gap: 1rem;
}

    .empty-selection-state span[b-mecpqpwbpv] {
        font-size: 3rem;
        opacity: 0.3;
    }

@media (max-width: 900px) {
    .transfer-ui[b-mecpqpwbpv] {
        flex-direction: column;
        height: auto;
    }

    .transfer-panel[b-mecpqpwbpv] {
        min-height: 250px;
    }

    .transfer-divider[b-mecpqpwbpv] {
        transform: rotate(90deg);
        justify-content: center;
        margin: 0.5rem 0;
    }
}
/* _content/PowerPlan/Pages/Settings/SettingsPageTimeAttendance.razor.rz.scp.css */
/* --- HEADER UTILS --- */
.group-header-row[b-vb013h9hn4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

[b-vb013h9hn4] .settings-group .group-header-row h2 {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.all-punch-clocks[b-vb013h9hn4] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    padding: .5rem;
    gap: .5rem;
    border-radius: 1.5rem;
}

    .all-punch-clocks .punch-clock[b-vb013h9hn4] {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding: .5rem;
        border-radius: 1rem;
        background: var(--card-bg-top);
        transition: ease .2s box-shadow;
    }

        .all-punch-clocks .punch-clock.isEdit[b-vb013h9hn4] {
            box-shadow: var(--shadow-float);
            z-index: 1;
        }

        .all-punch-clocks .punch-clock h3[b-vb013h9hn4] {
            margin: 0;
            margin-left: 0.5rem;
            height: fit-content;
            flex: 1;
        }

        .all-punch-clocks .punch-clock.isEdit h3[b-vb013h9hn4] {
            font-weight: 900;
            margin: 0.5rem 0.5rem 0.2rem;
        }

        .all-punch-clocks .punch-clock label[b-vb013h9hn4] {
            margin: 0.5rem 0.5rem 0;
            color: var(--input-text);
        }

        .all-punch-clocks .punch-clock .p-row[b-vb013h9hn4] {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex: 1;
            gap: .5rem;
        }

        .all-punch-clocks .punch-clock .sites[b-vb013h9hn4] {
            flex: 1;
            height: fit-content;
            display: flex;
            flex-direction: row;
            align-items: center;
            overflow: auto;
            padding: 8px;
            gap: .2rem;
            background: var(--card-bg);
            border-radius: 16px;
        }

            .all-punch-clocks .punch-clock .sites .empty[b-vb013h9hn4] {
                background: var(--bg-dark50);
                padding: 4px 12px;
                border-radius: 8px;
                color: var(--input-text);
            }

        .all-punch-clocks .punch-clock .code[b-vb013h9hn4] {
            background: var(--card-bg);
            margin: 8px 8px 8px 0px;
            height: calc(100% - 16px);
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            padding-left: 12px;
            border-radius: 16px;
            gap: 8px;
        }

        .all-punch-clocks .punch-clock .key-generator[b-vb013h9hn4] {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 100%;
        }

        .all-punch-clocks .punch-clock .code p[b-vb013h9hn4] {
            margin: 0;
            font-family: var(--font-mono);
            color: var(--text-dark);
            font-size: 1rem;
        }

        .all-punch-clocks .punch-clock .code span:hover[b-vb013h9hn4] {
            opacity: 1;
        }

[b-vb013h9hn4] .input-component:has(.name-input){
    flex: 1;
}

[b-vb013h9hn4] .WarningMute.edit-punchclock {
    width: fit-content;
}

.punchclocks-row[b-vb013h9hn4] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

[b-vb013h9hn4] .tab h1 {
    margin: 0 0 0.5rem !important;
    font-size: 1.2rem !important;
}

[b-vb013h9hn4] .tab p {
    font-size: .9rem !important;
}

[b-vb013h9hn4] .edit-punchclock {
    opacity: 0;
    transition: all ease .2s;
}

.punch-clock:hover[b-vb013h9hn4]  .edit-punchclock,
.punch-clock.isEdit[b-vb013h9hn4]  .edit-punchclock {
    opacity: 1;
}

/* --- EMPTY STATE (Retained) --- */
.empty-state-container[b-vb013h9hn4] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--card-bg-top);
    border-radius: 1.5rem;
    border: 1px solid var(--card-border);
    overflow: hidden;
    margin-top: 2rem;
}

span.icons[b-vb013h9hn4] {
    position: absolute;
    top: -1rem;
    right: 0;
    font-size: 12rem;
    font-weight: 900;
    color: var(--bg-dark);
    opacity: 0.5;
    pointer-events: none;
}

.empty-state-container h2[b-vb013h9hn4] {
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-dark);
    position: relative;
}

.empty-state-container p[b-vb013h9hn4] {
    max-width: 600px;
    color: var(--text-dark-mute);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    position: relative;
}

.benefits-list.wide[b-vb013h9hn4] {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}

.benefit-item[b-vb013h9hn4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 200px;
}

    .benefit-item .material-icons[b-vb013h9hn4] {
        font-size: 2.5rem;
        color: var(--primary);
        margin-bottom: 0.75rem;
    }

    .benefit-item h4[b-vb013h9hn4] {
        margin: 0 0 0.5rem 0;
        font-size: 1.1rem;
        color: var(--text-dark);
        font-weight: 700;
    }

    .benefit-item p[b-vb013h9hn4] {
        margin: 0;
        font-size: 0.9rem;
    }

.docs-link[b-vb013h9hn4] {
    margin-top: 2rem;
}

    .docs-link a[b-vb013h9hn4] {
        color: var(--text-dark-mute);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.9rem;
    }

        .docs-link a:hover[b-vb013h9hn4] {
            color: var(--primary);
            text-decoration: underline;
        }
/* _content/PowerPlan/Pages/ShiftsPage.razor.rz.scp.css */
[b-jp37v4ks58] .site-wrapper {
    justify-content: flex-start;
}

p[b-jp37v4ks58] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
}

.action-required-section[b-jp37v4ks58] {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    padding-bottom: 0;
    margin: 1rem var(--page-side-margin);
    background: var(--card-bg-warning);
    border-radius: 2rem;
    animation: fadeIn-b-jp37v4ks58 0.4s var(--ease);
}

.section-header[b-jp37v4ks58] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-left: 0.5rem;
}

.warning-icon[b-jp37v4ks58] {
    font-size: 2.5rem;
    color: var(--warning);
    background: var(--warning20);
    padding: 0.5rem;
    border-radius: 1rem;
}

.section-header .text h2[b-jp37v4ks58] {
    font-family: var(--font-header);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.2;
}

.section-header .text p[b-jp37v4ks58] {
    font-family: var(--font-body);
    color: var(--text-dark-mute);
    font-size: 0.95rem;
    margin: 0;
}

.correction-list-container[b-jp37v4ks58] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1.5rem;
}

.next-shifts[b-jp37v4ks58] {
    --p: 1.5rem;
    border-radius: calc(var(--p) + 1rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-dark);
    padding: 0.6rem var(--p);
    margin: 0 calc(var(--page-side-margin) - var(--p));
    margin-bottom: 1rem;
}

    .next-shifts h2[b-jp37v4ks58] {
        color: var(--text-dark-accent3);
        font-family: var(--font-header);
        font-size: 1.2rem;
        font-weight: 800;
        margin-bottom: 0rem;
        margin-left: 1.5rem;
    }

    .next-shifts .row[b-jp37v4ks58] {
        display: flex;
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        gap: 1rem;
        padding-bottom: 1rem;
        scrollbar-width: none;
    }

        .next-shifts .row[b-jp37v4ks58]::-webkit-scrollbar {
            display: none;
        }

.shift-list-wrapper[b-jp37v4ks58] {
    width: auto;
    flex: 1;
    margin: 0 var(--page-side-margin);
    display: flex;
    flex-direction: column;
}

.list-title[b-jp37v4ks58] {
    color: var(--text-dark);
    font-size: 1.2rem;
    font-weight: 800;
    margin: 1rem 0 0.5rem 0.5rem;
    text-transform: capitalize;
    font-family: var(--font-header);
}

[b-jp37v4ks58] .status-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-jp37v4ks58] .status-text {
    margin: 0;
    font-weight: 500;
    color: var(--text-dark-accent);
}

[b-jp37v4ks58] .status-cell .material-icons-round {
    padding: 6px;
    border-radius: 50%;
    font-size: 1.1rem;
}

[b-jp37v4ks58] .status-cell .rejected {
    background: var(--warning10);
    color: var(--warning);
}

[b-jp37v4ks58] .status-cell .awaiting {
    background: var(--primary10);
    color: var(--primary);
}

[b-jp37v4ks58] .status-cell .approved {
    background: var(--accept-mute);
    color: var(--accept-text);
}

[b-jp37v4ks58] .date-cell {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4px;
}

[b-jp37v4ks58] .date-text {
    font-weight: 700;
    color: var(--text-dark);
    text-transform: capitalize;
}

[b-jp37v4ks58] .tag-container {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

[b-jp37v4ks58] .timespan-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dark);
}

[b-jp37v4ks58] .punch {
    font-size: 1rem;
    color: var(--primary);
    background: var(--primary10);
    padding: 4px;
    border-radius: 6px;
}

[b-jp37v4ks58] span.missing {
    background: var(--warning10);
    color: var(--warning);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
}

@keyframes fadeIn-b-jp37v4ks58 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body[data-theme='dark'] .action-required-section[b-jp37v4ks58] {
    background: var(--bg-dark);
    border-color: var(--bg-dark2);
}
/* _content/PowerPlan/Pages/ToDoPage.razor.rz.scp.css */
.days-select[b-xsoxitsmd5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 16px;
    border-radius: 24px;
    background: var(--bg-dark);
}

    .days-select .day[b-xsoxitsmd5] {
        background: var(--card-bg);
        border-radius: 8px;
        padding: 10px 16px;
        flex: 1;
        cursor: pointer;
        outline: var(--primary) 0px solid;
        transition: ease .2s all;
    }

    .days-select:has(.selected) .day[b-xsoxitsmd5] {
        opacity: .75;
    }

    .days-select .day:hover[b-xsoxitsmd5] {
        box-shadow: var(--shadow-medium);
        opacity: 1;
    }

    .days-select .day.selected[b-xsoxitsmd5] {
        background: var(--card-bg-top);
        box-shadow: var(--shadow-medium);
        opacity: 1;
        outline-width: 2px;
    }

    .days-select .day h2[b-xsoxitsmd5] {
        margin: 0;
        text-transform: capitalize;
        font-weight: 900;
        font-size: 1.2rem;
    }

    .days-select .day .count[b-xsoxitsmd5] {
        margin: 0;
        font-size: 0.9rem;
        color: Var(--text-dark-mute)
    }

.select-day[b-xsoxitsmd5] {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .select-day h2[b-xsoxitsmd5] {
        color: Var(--input-text);
    }

.header[b-xsoxitsmd5] {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    margin: 16px;
}

    .header > div[b-xsoxitsmd5] {
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center;
    }

    .header h5[b-xsoxitsmd5] {
        margin: 0;
        font-weight: 900;
        font-size: 1.2rem;
        text-transform: capitalize;
    }

    .header button[b-xsoxitsmd5] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        background: Var(--bg-dark2);
        border-radius: 2rem;
        padding: 4px;
        padding-right: 12px;
        border: none;
        cursor: pointer;
    }

        .header button:hover[b-xsoxitsmd5] {
            background: Var(--bg-darker);
        }

        .header button span[b-xsoxitsmd5] {
            color: Var(--text-light);
            font-size: .9rem;
        }

        .header button p[b-xsoxitsmd5] {
            color: Var(--text-light);
            font-size: .8rem;
            margin: 0;
        }

.new-list[b-xsoxitsmd5] {
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
    padding: 16px;
    border-radius: 16px;
    margin: 16px;
    margin-top: 0;
}

    .new-list h2[b-xsoxitsmd5] {
        color: var(--input-text);
        margin: 16px 24px 0;
        font-weight: 900;
        font-style: italic;
    }

    .new-list[b-xsoxitsmd5]  .input-component:has(.newlistname) {
        flex: 1;
    }

    .new-list .actions[b-xsoxitsmd5] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        justify-content: flex-end;
    }

    .new-list[b-xsoxitsmd5]  .add {
        width: fit-content;
    }

    .new-list .content[b-xsoxitsmd5] {
        display: flex;
        flex-direction: row;
        gap: 16px;
        margin: 1rem;
    }

    .new-list[b-xsoxitsmd5]  .dropdown-container label,
    .edit-todo[b-xsoxitsmd5]  .dropdown-container label {
        margin-bottom: 0.15rem;
    }
    .new-list[b-xsoxitsmd5]  .dropdown-container input,
    .edit-todo[b-xsoxitsmd5]  .dropdown-container input {
        padding: 0.75rem 1rem;
    }

    .position-cols[b-xsoxitsmd5] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex-wrap: nowrap;
    }

    .position-cols.rows[b-xsoxitsmd5] {
        flex-direction: column;
    }

    .position-cols.columns[b-xsoxitsmd5] {
        flex-direction: row;
        overflow-x: auto;
    }

    .position-cols .position[b-xsoxitsmd5] {
        display: flex;
        flex-direction: column;
        align-items: start;
        flex: 1;
        max-width: 50%;
    }

        .position-cols .position h2[b-xsoxitsmd5] {
            margin: 0;
            color: var(--primary);
            font-weight: 900;
            margin-left: 16px;
            margin-bottom: 4px;
        }

        .position-cols .position .todo-lists[b-xsoxitsmd5] {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 8px;
            width: calc(100% - 32px);
            min-width: 20rem;
            background: var(--card-bg);
            padding: 16px;
            border-radius: 24px;
            overflow-y: hidden;
            overflow-x: auto;
        }

    .position-cols.rows .position .todo-lists[b-xsoxitsmd5] {
        flex-direction: row;
    }

    .position-cols.columns .position .todo-lists[b-xsoxitsmd5] {
        flex-direction: column;
    }

    .position-cols .position .todo-list[b-xsoxitsmd5] {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--card-bg-top);
        padding: 8px;
        border-radius: 14px;
        height: fit-content;
        min-width: 300px;
        width: 25rem;
        max-width: 100%;
    }

    .position-cols.rows .position .todo-list[b-xsoxitsmd5] {
        width: 25rem;
    }

    .position-cols.columns .position .todo-list[b-xsoxitsmd5] {
        width: unset;
    }

    .position-cols.rows .position .todo-list > label[b-xsoxitsmd5] {
        margin: 8px 8px 0;
    }

    .position-cols .position .todo-list:has(.edit-todo)[b-xsoxitsmd5],
    .position-cols .position .todo-list:has(.new-item)[b-xsoxitsmd5],
    .position-cols .position .todo-list:has(.move)[b-xsoxitsmd5] {
        box-shadow: var(--shadow-medium);
    }

    .position-cols .position .todo-list .empty[b-xsoxitsmd5] {
        background: var(--bg-dark);
        padding: 16px 0;
        border-radius: 8px;
        text-align: center;
        width: 100%;
        font-family: var(--font-header);
        font-weight: 800;
        color: var(--input-text);
    }

    .position-cols .position .todo-list[b-xsoxitsmd5]  div:has(.todo.sortable-chosen) .empty {
        display: none;
    }

    .position-cols .position .todo-list .new-item[b-xsoxitsmd5] {
        background: var(--bg-dark);
        padding: 8px 8px;
        border-radius: 8px;
        font-family: var(--font-header);
    }

    .position-cols .position .todo-list h3[b-xsoxitsmd5] {
        color: var(--input-text);
        font-weight: 900;
        margin: 4px 8px 0;
    }

    .position-cols .position .todo-list .new-item[b-xsoxitsmd5]  .input-component input {
        margin-bottom: 0;
    }

    .position-cols .position .todo-list .new-item[b-xsoxitsmd5]  .input-component .action {
        padding: 0.3rem;
        top: -.2rem;
    }

    .position-cols .position .todo-list .new-item[b-xsoxitsmd5]  .textarea-component {
        display: flex;
        flex-direction: column;
    }

        .position-cols .position .todo-list .new-item[b-xsoxitsmd5]  .textarea-component textarea {
            width: calc(100% - 2rem - 16px)
        }

        .position-cols .position .todo-list .new-item[b-xsoxitsmd5]  .textarea-component label {
            margin: 4px 0 0 8px;
            color: var(--input-text);
            font-weight: 800;
        }

    .position-cols .position .todo-list .new-item[b-xsoxitsmd5]  .max-length-display {
        margin: 0;
        margin-right: 8px
    }

    .position-cols .position .todo-list .new-item[b-xsoxitsmd5]  button.small {
        padding: 4px 8px;
        margin: 0px;
        margin-bottom: -8px;
        font-weight: 400;
        font-family: var(--font-body);
        color: var(--primary);
        gap: 2px;
    }

        .position-cols .position .todo-list .new-item[b-xsoxitsmd5]  button.small span {
            font-weight: 400;
            font-size: 14px;
        }

    .position-cols .position .todo-list .actions[b-xsoxitsmd5] {
        position: absolute;
        top: 0;
        right: 0;
        margin: 8px;
        display: flex;
        flex-direction: row;
        gap: 4px;
    }

    .position-cols .position .todo-list:has(.edit-todo) .actions[b-xsoxitsmd5] {
        margin: 16px;
    }

    .position-cols .position .todo-list .actions[b-xsoxitsmd5]  button {
        padding: 2px;
    }

        .position-cols .position .todo-list .actions[b-xsoxitsmd5]  button:not(.public) span {
            font-weight: 900;
        }

    .position-cols .position .todo-list[b-xsoxitsmd5]  button.edit {
        opacity: 0;
        filter: blur(8px);
        padding: 4px;
        transition: ease .2s all;
    }

    .position-cols .position .todo-list .actions[b-xsoxitsmd5]  button.edit span {
        font-weight: 400;
        font-size: 15px;
    }

    .position-cols .position .todo-list:hover[b-xsoxitsmd5]  button.edit {
        opacity: 1;
        filter: blur(0px);
    }

    .position-cols .position .todo-list .move[b-xsoxitsmd5] {
        margin: 0 0px 12px;
        padding: 4px;
        background: var(--card-bg);
        border-radius: 8px;
    }

        .position-cols .position .todo-list .move label[b-xsoxitsmd5] {
            margin: 0;
            margin-left: 8px;
        }
        .position-cols .position .todo-list .move label[b-xsoxitsmd5]:after {
            content: ":";
        }

        .position-cols .position .todo-list .move .day-list[b-xsoxitsmd5] {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: 4px;
        }

            .position-cols .position .todo-list .move .day-list .day[b-xsoxitsmd5] {
                background: var(--bg-dark);
                flex: 1;
                border-radius: 4px;
                cursor: pointer;
                overflow: hidden;
                padding: 4px;
            }

                .position-cols .position .todo-list .move .day-list .day p[b-xsoxitsmd5] {
                    width: fit-content;
                    margin: 0 auto;
                    text-transform: capitalize;
                    font-size: 12px;
                    font-family: var(--font-header);
                    font-weight: 800;
                    color: var(--bg-dark3);
                }

    .position-cols .position .todo-list h3[b-xsoxitsmd5] {
        margin: 8px 0 0 8px;
        font-weight: 900;
    }

    .position-cols .position .todo-list h4[b-xsoxitsmd5] {
        margin: 0 0 8px 8px;
        opacity: .8;
        font-family: var(--font-body);
        font-weight: 400;
    }

    .position-cols .position .todo-list label[b-xsoxitsmd5] {
        margin: 0 8px;
        font-size: 12px;
    }

    .position-cols .position .todo-list:has(.new-item) label[b-xsoxitsmd5],
    .position-cols .position .todo-list:has(.edit-todo) label[b-xsoxitsmd5] {
        margin: 8px 8px 0;
    }

    .position-cols .position .todo-list .edit-todo[b-xsoxitsmd5] {
        display: flex;
        flex-direction: column;
        background: var(--bg-dark);
        padding: 8px;
        border-radius: 8px;
    }

li[b-xsoxitsmd5] {
    animation: ease .2s li-in-b-xsoxitsmd5 forwards 1;
}

@keyframes li-in-b-xsoxitsmd5 {
    from {
        opacity: 0;
        filter: blur(8px);
    }

    to {
        opacity: 1;
        filter: blur(0px);
    }
}

.position-cols .position .todo-list .edit-todo h2[b-xsoxitsmd5] {
    margin: 8px;
    color: Var(--input-text);
}

.position-cols .position .todo-list .edit-todo .row[b-xsoxitsmd5] {
    display: flex;
    flex-direction: row;
    width: 100%;
}

    .position-cols .position .todo-list .edit-todo .row[b-xsoxitsmd5]  .input-component:has(.newlistname) {
        flex: 1;
    }

.position-cols .position .todo-list .edit-todo .action-row[b-xsoxitsmd5] {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: end;
    margin-top: .3rem;
}

.position-cols .position .todo-list .item-list[b-xsoxitsmd5] {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    gap: 4px;
}

    .position-cols .position .todo-list .item-list[b-xsoxitsmd5]  > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .position-cols .position .todo-list .item-list .todo[b-xsoxitsmd5] {
        display: flex;
        flex-direction: row;
        align-items: start;
        background: var(--card-bg);
        padding: 8px 12px;
        border-radius: 12px;
        transition: ease .2s background, ease .2s backdrop-filter, ease .2s box-shadow;
    }

        .position-cols .position .todo-list .item-list .todo .col[b-xsoxitsmd5] {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            max-width: calc(100%);
        }

            .position-cols .position .todo-list .item-list .todo .col form[b-xsoxitsmd5] {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

        .position-cols .position .todo-list .item-list .todo span[b-xsoxitsmd5] {
            font-size: 0.9rem;
            cursor: pointer;
            color: var(--input-text);
            margin-top: 2px;
            transition: ease .2s all;
        }

            .position-cols .position .todo-list .item-list .todo span.drag-handle[b-xsoxitsmd5] {
                color: var(--text-dark);
                opacity: .25;
                margin-right: 4px;
                cursor: grab;
            }

            .position-cols .position .todo-list .item-list .todo span.drag-handle[b-xsoxitsmd5] {
                color: var(--text-dark);
                opacity: .25;
                margin-right: 4px;
                cursor: grab;
            }

            .position-cols .position .todo-list .item-list .todo span.edit[b-xsoxitsmd5] {
                opacity: 0;
                filter: blur(12px);
            }

        .position-cols .position .todo-list .item-list .todo:hover span.edit[b-xsoxitsmd5] {
            opacity: 1;
            filter: blur(0px);
        }

        .position-cols .position .todo-list .item-list .todo span.edit:hover[b-xsoxitsmd5] {
            color: var(--primary-accent);
        }

        .position-cols .position .todo-list .item-list .todo span.close:hover[b-xsoxitsmd5] {
            color: var(--warning);
        }

        .position-cols .position .todo-list .item-list .todo p[b-xsoxitsmd5] {
            margin: 0;
            font-size: 0.9rem;
        }

            .position-cols .position .todo-list .item-list .todo p.title[b-xsoxitsmd5] {
                margin: 0;
                font-size: 0.9rem;
            }

            .position-cols .position .todo-list .item-list .todo p.description[b-xsoxitsmd5] {
                overflow: hidden;
                margin-top: 4px;
                margin-right: 16px;
                font-size: 0.8rem;
                color: var(--text-dark-mute);
            }

        .position-cols .position .todo-list .item-list .todo .action-row[b-xsoxitsmd5] {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: .3rem;
        }

        .position-cols .position .todo-list .item-list .todo.edit[b-xsoxitsmd5] {
            background: var(--bg-dark);
        }

            .position-cols .position .todo-list .item-list .todo.edit[b-xsoxitsmd5]  input {
                font-size: .9rem;
                font-weight: 400;
                border: none;
                padding: 8px 12px;
                border-radius: 8px;
                margin: 0;
                margin-top: 4px;
                width: calc(100% - 24px);
            }

            .position-cols .position .todo-list .item-list .todo.edit[b-xsoxitsmd5]  button.small {
                padding: 4px 8px;
                margin: 0;
                margin-bottom: -8px;
                font-weight: 400;
                font-family: var(--font-body);
                color: var(--primary);
                gap: 2px;
            }

                .position-cols .position .todo-list .item-list .todo.edit[b-xsoxitsmd5]  button.small span {
                    font-weight: 400;
                    font-size: 14px;
                }

            .position-cols .position .todo-list .item-list .todo.edit[b-xsoxitsmd5]  .textarea-component {
                margin-top: 4px;
            }

                .position-cols .position .todo-list .item-list .todo.edit[b-xsoxitsmd5]  .textarea-component textarea {
                    width: calc(100% - 24px);
                    font-size: .9rem;
                    font-weight: 400;
                    border: none;
                    padding: 8px 12px;
                    border-radius: 8px;
                    margin: 2px 0;
                }

        .position-cols .position .todo-list .item-list .todo .actions[b-xsoxitsmd5] {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 4px;
            width: 100%;
            margin-top: 4px;
        }

            .position-cols .position .todo-list .item-list .todo .actions[b-xsoxitsmd5]  button {
                padding: 0.5rem;
                background: inherit;
            }
/* _content/PowerPlan/Pages/VacationPage.razor.rz.scp.css */
.absence-container[b-a9w4ppwhof] {
    padding: 0 0 2rem;
    margin: 0;
    box-sizing: border-box;
}
.absence-container .header[b-a9w4ppwhof]{

}

    .absence-container .absence-list[b-a9w4ppwhof] {
        display: flex;
        flex-direction: column;
        margin: 1rem var(--page-side-margin);
    }

.absence-list .empty-label-container[b-a9w4ppwhof] {
    --x-bg: var(--bg-dark);
    --x-color: var(--bg);
    height: 5.5rem;
    border-radius: 1rem;
}

.absence-container .absence-list .header[b-a9w4ppwhof] {
    width: 100%;
    padding: .5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

            .absence-container .absence-list .header .icon[b-a9w4ppwhof] {
                width: 3rem;
                margin-right: .7rem;
            }

    .absence-container .absence-list .header p[b-a9w4ppwhof] {
        margin: 0;
        font-family: var(--font-header);
        font-weight: 800;
        color: var(--input-text);
        font-size: 1rem;
    } 
            .absence-container .absence[b-a9w4ppwhof] {
                width: 100%;
                padding: .5rem;
                box-sizing: border-box;
                background: var(--card-bg);
                border: .1rem solid var(--card-border);
                display: flex;
                flex-direction: row;
                align-items: center;
                flex-wrap: nowrap;
                margin-bottom: 4px;
                border-radius: 1.2rem;
            }

[b-a9w4ppwhof] .absence-type .input-component {
    margin: .5rem 0;
    cursor: pointer;
}

.absence-container .absence:last-of-type[b-a9w4ppwhof] {
    margin: 0;
}

        .absence-container .absence p[b-a9w4ppwhof] {
            margin: 0;
        }
        .absence-container .absence p[b-a9w4ppwhof]  i {
            opacity: .5;
        }
            .absence-container p.status[b-a9w4ppwhof] {
                flex: 1;
            }
            .absence-container p.type[b-a9w4ppwhof] {
                flex: 1;
            }
            .absence-container p.details[b-a9w4ppwhof] {
                flex: 3;
            }

        .absence-container .absence .icon[b-a9w4ppwhof] {
            height: 3rem;
            width: 3rem;
            border-radius: .5rem;
            background: var(--bg-darker);
            margin-right: .7rem;
            background-size: contain;
            padding: .7rem;
            background-origin: content-box;
            background-repeat: no-repeat;
            box-sizing: border-box;
        }

        .absence-container .absence[b-a9w4ppwhof]  .hurtig_button {
            margin-right: .5rem;
        }

            .absence-container .absence .icon.Accepted[b-a9w4ppwhof] {
                background-color: #cdffc1;
                background-image: url(../img/icons/Success.png);
            }

            .absence-container .absence .icon.Rejected[b-a9w4ppwhof] {
                background-color: #ffc1c1;
                background-image: url(../img/icons/Reject.png);
            }

            .absence-container .absence .icon.Pending[b-a9w4ppwhof] {
                background-color: #c1d5ff;
                background-image: url(../img/icons/pending.png);
            }

.absence-container .footer[b-a9w4ppwhof] {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 1.1rem;
}
        .absence-container .footer[b-a9w4ppwhof]  .new-request {
            position: absolute;
            left: 0rem;
        }
        .absence-container .footer p[b-a9w4ppwhof] {
            margin: 0 1rem;
        }

.block-content[b-a9w4ppwhof] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 var(--page-side-margin);
    gap: 1rem;
}

.blocks[b-a9w4ppwhof] {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1;
    padding: 0rem 0rem;
}

.setting-title[b-a9w4ppwhof] {
    font-family: var(--font-header);
    font-weight: 900;
    color: var(--text-dark);
    margin: 1rem calc(var(--page-side-margin) + 1.5rem) 1rem;
}
.setting-subtitle[b-a9w4ppwhof] {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-dark);
    margin: 1rem;
    margin-top: 0;
}
.block-list-container[b-a9w4ppwhof] {
    display: flex;
    border-radius: 1.5rem;
    background: var(--bg-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

    .block-list-container .block-list[b-a9w4ppwhof] {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .block-list-container p.block-list-empty[b-a9w4ppwhof] {
    }

.blocks[b-a9w4ppwhof] >  .hurtig_button{
    margin: .5rem 1.5rem;
    width: fit-content;
}

.new-blocks[b-a9w4ppwhof] {
    min-width: 600px;
}

    .new-blocks[b-a9w4ppwhof]  .block-component {
        border-radius: 1rem;
        background: var(--bg-dark2);
    }

        .new-blocks[b-a9w4ppwhof]  .block-component .nav .list-item:not(.active) {
            background: var(--bg-dark2);
        }
            .new-blocks[b-a9w4ppwhof]  .block-component .nav .list-item:not(.active):hover {
                background: var(--bg-darker50);
            }
        .new-blocks[b-a9w4ppwhof]  .block-component .nav .list-item.active {
            color: var(--card-bg);
        }
        .new-blocks[b-a9w4ppwhof]  .block-component .nav .list-item:not(.active) p{
            color: var(--card-bg);
        }

    .new-blocks[b-a9w4ppwhof]  .block-tabs {
        background: var(--bg-dark);
    }
        .new-blocks[b-a9w4ppwhof]  .block-tabs .day {
            background: var(--bg-dark);
        }
            .new-blocks[b-a9w4ppwhof]  .block-tabs .day:hover {
                background: var(--card-bg);
            }
            .new-blocks[b-a9w4ppwhof]  .block-tabs .day.active {
                background: var(--card-bg);
            }

        .new-blocks[b-a9w4ppwhof]  .block-tabs .input-component label{
            color: var(--primary);
        }
.block-list-container:has(.empty-label-container)[b-a9w4ppwhof] {
    padding: .5rem;
    overflow: hidden;
}

.block-list-container .empty-label-container[b-a9w4ppwhof] {
    --x-bg: var(--bg-dark);
    --x-color: var(--bg);
    height: 10rem;
} 
/* _content/PowerPlan/Pages/Workplace.razor.rz.scp.css */
.header-container[b-n8c744la6h] {
    position: relative;
    margin: 0;
    margin-top: -6rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 30vh;
    min-height: 11rem;
    max-height: 31rem;
}

.header[b-n8c744la6h] {
    position: relative;
    margin: 0;
    flex: 1;
    height: auto;
    width: calc(100% - 2.5rem);
    margin: 1rem;
    border-radius: .8rem;
    background: linear-gradient(45deg, var(--primary50) 0%, var(--primary50) 25%,var(--card-bg-top) 25%, var(--card-bg-top) 50%, var(--primary50) 50%, var(--primary50) 75%,var(--card-bg-top) 75%,var(--card-bg-top) 100%, var(--primary50) 100%);
    background-size: 7em 7em;
    background-color: var(--card-bg-top);
    z-index: 0;
}

.header .bottom[b-n8c744la6h]{
    position: absolute;
    bottom: 0;
    height: fit-content;
    width: calc(100% - 11rem);
    padding-left: 11rem;
    padding-top: .5rem;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    border-radius: 0 0 .8rem .8rem;
    background: linear-gradient(0deg, #00000099 0%, #00000000 100%)
}

.header .org-logo[b-n8c744la6h]{
    position: absolute;
    top: calc(100% - 4rem);
    left: 3rem;
    height: 8rem;
    width: 8rem;
    background: white;
    border-radius: .5rem;
    outline: .2rem solid #00000010;
    outline-offset: -.2rem;

}

.header h1[b-n8c744la6h]{
    color: var(--text-light);
    margin: .3rem 1rem;
    margin-left: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .header a[b-n8c744la6h] {
        color: var(--text-light);
        font-size: 12px;
        margin: .3rem 1rem;
        cursor:  pointer;
    }

    .header a:hover[b-n8c744la6h]{
        text-decoration: solid underline var(--text-light);
    }

        .header a span[b-n8c744la6h] {
            color: var(--text-light);
            font-size: 12px;
            margin-top: .2rem;
        }

.org-nav[b-n8c744la6h] {
    height: fit-content;
    width: calc(100% - 14rem);
    padding: .3rem;
    margin-left: 12.5rem;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}

    .org-nav .admin-controlls[b-n8c744la6h] {
        display: flex;
        flex-direction: row;
        padding: .5rem 0;
        border-radius: .5rem;
        background: var(--admin-bg);
    }

    .org-nav[b-n8c744la6h]  button {
        margin: 0 .5rem;
        width: auto;
        flex-shrink: 0;
    }

.org-page[b-n8c744la6h]{
    width: calc(100% - 2rem);
    height: auto;
    margin: 0 1rem;
}
/* _content/PowerPlan/SharedComponents/Background.razor.rz.scp.css */

/*Background*/
.background[b-ne5vdx4ztk] {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	position: absolute;
	background: var(--bg);
	overflow: hidden;
	transition: ease-in .2s background, ease-in .2s box-shadow;
	box-shadow: none;
}

	.background.signup[b-ne5vdx4ztk] {
		background: var(--primary-variable);
		box-shadow: inset 0 0 20vmin -1vmin var(--bg-dark2);
	}
	.background.login[b-ne5vdx4ztk] {
		background: var(--bg-darker);
		box-shadow: inset 0 0 20vmin 0vmin var(--bg-dark2);
	}

	.background.org-settings[b-ne5vdx4ztk] {
		background: var(--bg);
		box-shadow: inset 0 0 20vmin 0vmin var(--bg-dark350);
	}
/* _content/PowerPlan/SharedComponents/FeedbackComponent.razor.rz.scp.css */
.feedback-component[b-4goe5e86gf] {
    position: absolute;
    width: 30rem;
    max-width: calc(100% - 10rem);
    max-height: calc(100% - 17rem);
    background: var(--card-bg-top);
    border: 0.1rem solid var(--card-border);
    padding: 3rem;
    padding-right: 4rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    bottom: 0rem;
    opacity: 0;
    transition: ease .2s all;
    overflow: hidden;
    box-shadow: none;
    pointer-events: none;
}

[b-4goe5e86gf] .dropdown-container {
    margin-bottom: .6rem;
}

    .feedback-component.show[b-4goe5e86gf] {
        bottom: 5rem;
        opacity: 1;
        box-shadow: var(--shadow-large);
        pointer-events: auto;
    }

    .feedback-component h1[b-4goe5e86gf] {
        font-size: 1.4rem;
        font-family: var(--font-header);
        font-weight: 800;
        color: var(--text-dark);
        opacity: 0.9;
        text-align: center;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .feedback-component.thanks[b-4goe5e86gf] {
        padding: 2rem 3rem 1.2rem;
    }

    .feedback-component.thanks h1[b-4goe5e86gf] {
        font-size: 1.7rem;
        font-weight: 800;
        opacity: 1;
    }
        .feedback-component.thanks p[b-4goe5e86gf] {
            width: 100%;
            text-align: center;
            margin-top: 0;
        }

        .feedback-component.thanks p span[b-4goe5e86gf]{
            background: var(--bg-dark);
            padding: 0.3rem 0.5rem;
            border-radius: 0.5rem;
        }

    .feedback-component > span[b-4goe5e86gf] {
        position: absolute;
        top: 2rem;
        right: 2rem;
        cursor: pointer;
        padding: 0.4rem;
        border-radius: 50%;
        color: var(--text-dark-mute); 
        font-weight: bolder;
        transition: ease .2s background;
    }

        .feedback-component > span:hover[b-4goe5e86gf] {
            background: var(--bg);
        }

        .row[b-4goe5e86gf] {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .row > div[b-4goe5e86gf] {
            font-family: var(--font-header);
            font-weight: 800;
            color: var(--input-text);
            opacity: 0.9;
            text-align: center;
            margin-bottom: .5rem;
            margin-top: 0;
            margin-right: 1.5rem;
        }

        .row > p[b-4goe5e86gf] {
            margin: 0;
            margin-left: 1rem;
            opacity: 0.7;
            font-weight: 600;
        }

    .row[b-4goe5e86gf]  .dropdown-container{
         flex: 1;
    }

.submit-row[b-4goe5e86gf] {
    justify-content: flex-end;
}
/* _content/PowerPlan/SharedComponents/MainLayout.razor.rz.scp.css */
.page[b-bxke0i2urs] {
    position: relative;
    display: flex;
    flex-direction: row;
    transition: ease .5s filter;
    flex: 1;
    width: 100%;
    max-height: calc(100vh - var(--devbar-height));
    overflow: visible;
}

    .page:has(.devbar)[b-bxke0i2urs] {
        max-height: calc(100vh - var(--devbar-height));
    }


.blur[b-bxke0i2urs] {
    filter: blur(5px);
    pointer-events: none; 
    height: 100vh;
}

main[b-bxke0i2urs], .main[b-bxke0i2urs] {
    flex: 1;
    padding: 0px 8px 0 16px;
    display: flex;
    flex-direction: column;
    height: calc(((1 / var(--zoom))* 100%) + 1px);
    overflow-y: auto;
    position: relative;
    transition: ease .2s all;
    width: 100%;
}

.learnmore[b-bxke0i2urs] {
    position: relative;
    height: auto;
    background: var(--primary);
    opacity: 1;
    color: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 32px;
    text-decoration: none;
    font-family: var(--font-header);
    font-weight: 800;
    font-size: 1.5rem;
    margin: 8px;
    border-radius: 16px;
    box-shadow: inset var(--bg-dark2) 0 0 3rem -0.5rem, var(--shadow-medium);
    transition: ease .2s font-size, ease .2s box-shadow;
}

    .learnmore:hover[b-bxke0i2urs] {
        font-size: 1.7rem;
    }

    .learnmore span[b-bxke0i2urs] {
        margin-left: 1rem;
        font-weight: 900;
        font-size: 2rem;
    }

    .learnmore[b-bxke0i2urs]:after {
        content: " ";
        position: absolute;
        background: var(--shift-bg20);
        height: 4px;
        margin-top: 2.3rem;
        box-shadow: inset 0px 0px 0.6rem -0.2rem var(--card-bg);
        width: 0;
        transition: ease width .2s;
    }

    .learnmore:hover[b-bxke0i2urs]::after {
        width: 35rem;
    }

.main[b-bxke0i2urs] {
    padding: 0;
    height: calc(((1 / var(--zoom)) * 100vh));
}

.sidebar[b-bxke0i2urs] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-bxke0i2urs] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-bxke0i2urs]  a, .top-row .btn-link[b-bxke0i2urs] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-bxke0i2urs] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.highly-important[b-bxke0i2urs] {
    position: sticky;
    top: 0.5rem;
    width: 100%;
    margin-bottom: 20px;
    padding: 24px 24px 24px 35px;
    background: var(--warning80);
    backdrop-filter: blur(8px);
    box-sizing: border-box;
    z-index: 50;
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    box-shadow: inset 0 0 3rem -0.8rem var(--warning-mute), var(--shadow-large);
    border: 0.2rem solid var(--card-border2);
}

    .highly-important .bottom[b-bxke0i2urs]{
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

    .highly-important h2[b-bxke0i2urs] {
        color: var(--text-light);
        font-weight: 900;
        margin: 0;
    }
    .highly-important p[b-bxke0i2urs] {
        margin: 0.2rem 0;
        color: var(--text-light);
        flex: 1;
    }
    .highly-important span[b-bxke0i2urs] {
        color: var(--warning-mute);
        font-size: 1.2rem;
        opacity: 1;
    }

    .highly-important[b-bxke0i2urs]  .tooltip-container {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .highly-important[b-bxke0i2urs]  button { 
        font-weight: 900; 
    }
    .highly-important[b-bxke0i2urs]  button .title {
        font-size: 1rem;
    }

    .header[b-bxke0i2urs] {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 20;
    }

    .header > div:not(.crumbs)[b-bxke0i2urs] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
    }

    .header .crumbs[b-bxke0i2urs] {
        display: flex;
        flex-direction: row;
        align-items: center;
        background: var(--bg-dark);
        border-radius: 8px;
        padding: 4px;
        gap: 4px;
    }

        .header .crumbs .node[b-bxke0i2urs] {
            border-radius: 4px;
            padding: 4px 6px;
            height: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

            .header .crumbs .node:not(:first-child)[b-bxke0i2urs] {
                cursor: unset;
            }

            .header .crumbs .node:first-child:hover[b-bxke0i2urs] {
                background-color: var(--bg-dark2);
            }

            .header .crumbs .node span[b-bxke0i2urs] {
                font-size: 14px;
                color: var(--label-text);
                margin: 0;
            }

            .header .crumbs .node:first-child:hover span[b-bxke0i2urs] {
                color: var(--input-text);
            }

            .header .crumbs .node h3[b-bxke0i2urs] {
                margin: 0;
                font-size: 12px;
                color: var(--label-text);
            }

            .header .crumbs .node:last-child h3[b-bxke0i2urs] {
                color: var(--input-text);
            }

            .header .crumbs .node:first-child:hover h3[b-bxke0i2urs] {
                color: var(--input-text);
            }


        .header .crumbs .seperator[b-bxke0i2urs] {
            color: var(--label-text);
            font-size: 12px;
            font-weight: 700;
            font-family: var(--font-header);
        }

    .header .work[b-bxke0i2urs] {
        height: fit-content;
        padding: 8px;
        border-radius: 16px;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .header .work.soon[b-bxke0i2urs] {
            background: var(--card-bg);
            border: 0.1rem solid var(--card-border);
            overflow: hidden;
            box-shadow: var(--shadow-medium);
        }

        .header .work h3[b-bxke0i2urs] {
            font-family: var(--font-body);
            font-size: 12px;
            color: var(--text-dark);
            margin: 0;
            margin-right: 16px;
            font-weight: 400;
            opacity: 0.5;
        }

        .header .work .workaction[b-bxke0i2urs] {
            border: none;
            background: var(--bg-dark);
            height: fit-content;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
        }

            .header .work .workaction h4[b-bxke0i2urs] {
                margin: 0;
                color: var(--input-text);
            }

        .header .work.soon .workaction[b-bxke0i2urs] {
            background: var(--primary);
            box-shadow: var(--primary) 0 0px 8px -2px, var(--primary) 0 2px 36px -8px, inset var(--bg-dark2) 0 0 .5rem;
        }

            .header .work.soon .workaction h4[b-bxke0i2urs] {
                color: var(--text-light);
            }

        .header .work.ongoing .workaction[b-bxke0i2urs] {
            background: var(--warning-mute);
        }

            .header .work.ongoing .workaction h4[b-bxke0i2urs] {
                color: var(--warning-text);
            }

.content[b-bxke0i2urs] {
    height: 100%;
    padding: 8px 0 0;
}

    .content:has(.settings-layout)[b-bxke0i2urs] {
        --ac-height: calc(32px + 1.5rem + 9px);
        height: calc(100% - 1.2rem - var(--ac-height) - var(--devbar-height));
        margin-bottom: 0;
        min-height: calc(((1 / var(--zoom)) * 100%) - 1rem - var(--ac-height));
        max-height: calc(((1 / var(--zoom)) * 100%) - 1rem - var(--devbar-height) - var(--ac-height));
    }

    .restricted .content[b-bxke0i2urs] {
        opacity: 0.7;
        filter: blur(2px);
    }

    .restricted .content a[b-bxke0i2urs],
    .restricted .content button[b-bxke0i2urs],
    .restricted .content[b-bxke0i2urs]  button,
    .restricted .content[b-bxke0i2urs]  a
    {
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

.main:has(.onboarding-container):not(:has(.welcome))[b-bxke0i2urs]  .language {
    display: none;
}

.login-button[b-bxke0i2urs] {
    position: absolute;
    top: 0;
    left: 0;
    margin: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    opacity: .6;
    color: var(--card-bg-top);
    transition: ease .2s opacity;
    z-index: 1;
}

    .login-button p[b-bxke0i2urs] {
        margin: 0;
        font-family: var(--font-header);
        color: inherit;
        font-weight: 900;
    }

    .login-button span[b-bxke0i2urs] {
        margin: 0;
        margin-right: 3px;
        font-size: 1.4rem;
        font-weight: 600;
        color: inherit;
    }

    .login-button:hover[b-bxke0i2urs] {
        opacity: 1;
    }

.personal-card[b-bxke0i2urs] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

    .personal-card[b-bxke0i2urs]  .card-scene {
        transform: translate(0, 50%) scale(0.5);
        opacity: 0;
        filter: blur(8px);
        z-index: 5;
        animation: cubic-bezier(0.16, 1, 0.3, 1) .5s personal-card-in-b-bxke0i2urs forwards 1;
    }

@keyframes personal-card-in-b-bxke0i2urs {
    from {
        transform: translate(0, 50%) scale(0.5);
        opacity: 0;
        filter: blur(8px);
    }

    to {
        transform: translate(0, 0%) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}

@media (max-width: 630px) {
    .login-button[b-bxke0i2urs] {
        display: none;
    }
}

@media (max-width: 600px) {
    h2[b-bxke0i2urs] {
        font-size: 1.5rem !important;
    }
}

@media print {
    .header[b-bxke0i2urs] {
        display: none;
    }
}

/* _content/PowerPlan/SharedComponents/NavMenu.razor.rz.scp.css */
/*Nav bar*/
.navbar[b-lhuaj5bsbv] {
    background: var(--card-bg);
    margin: .5rem;
    margin-right: 0;
    width: var(--navbar-width);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 1.2rem - var(--devbar-height));
    margin-bottom: 0;
    min-height: calc(((1 / var(--zoom)) * 100%) - 1rem);
    max-height: calc(((1 / var(--zoom)) * 100%) - 1rem - var(--devbar-height));
    overflow-y: auto;
    overflow-x: hidden; 
    animation: navbar-b-lhuaj5bsbv .3s cubic-bezier(0.49, 0.77, 0.69, 1.07) forwards 1;
    border: 0.1rem solid var(--card-border);
    transition: background ease .2s, color ease .2s, border-color ease .2s, width ease .2s;
    z-index: 1;
}

    .navbar[b-lhuaj5bsbv]::-webkit-scrollbar-track {
        margin: .5rem;
    }

    .navbar:not(:hover)[b-lhuaj5bsbv]::-webkit-scrollbar {
        display: none;
    }

@keyframes navbar-b-lhuaj5bsbv {
    from {
        transform: translateX(-2rem);
        opacity: .8;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.nav-logo[b-lhuaj5bsbv] {
    transition: transform cubic-bezier(.47,1.64,.41,.8) .3s;
    cursor: pointer;
}

    .nav-logo:hover[b-lhuaj5bsbv] {
        transform: scale(1.03);
    }

    .nav-logo img[b-lhuaj5bsbv] {
        height: 1.1rem;
        margin: 1.3rem 0 .5rem 0;
    } 

.navbar nav[b-lhuaj5bsbv] {
    margin-top: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: calc(((1 / var(--zoom)) * 100%) - 7rem);
    max-height: calc(((1 / var(--zoom)) * 100%) - 10rem);
    min-height: unset;
    max-height: unset;
}

    .navbar nav[b-lhuaj5bsbv]  .nav-elm {
        width: 10rem;
        margin: 0rem 0rem;
        font-size: .9rem;
        color: var(--text-dark);
        border-radius: .5rem;
        font-family: var(--font-body) !important;
        display: flex;
        font-weight: 400;
        align-items: center;
        padding: .6rem 1rem;
        transition: background cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s, width ease .2s;
    }
    .navbar nav .admin[b-lhuaj5bsbv]  .nav-elm {
        width: 9rem;
    }

.navbar nav[b-lhuaj5bsbv]  .nav-elm {
    color: var(--text-dark) !important;
    text-decoration: none !important;
}

    .navbar nav[b-lhuaj5bsbv]  .nav-elm span:not(.material-icons) {
        overflow: hidden;
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 7rem;
        transition: max-width ease .15s;
    }


.navbar nav[b-lhuaj5bsbv]  .nav-elm span.material-icons {
    transition: .2s ease-in-out transform, ease .2s color;
    color: inherit;
}

.navbar nav[b-lhuaj5bsbv]  .nav-elm.dot {
    position: relative;
}

    .navbar nav[b-lhuaj5bsbv]  .nav-elm.dot:before {
        content: attr(number);
        position: absolute;
        color: var(--text-light);
        font-size: .55rem;
        min-width: .3rem;
        height: .7rem;
        line-height: .7rem;
        text-align: center;
        padding: 0 .20rem;
        font-weight: 800;
        font-family: var(--font-mono);
        margin-top: -1.4rem;
        margin-left: .8rem;
        border-radius: 1rem;
        background: var(--alert);
        outline: var(--alert50) .2rem solid;
        z-index: 2;
    }

.navbar nav[b-lhuaj5bsbv]  .nav-elm img {
    height: 1.1rem;
    margin-right: 1rem;
    filter: var(--default-filter);
    transition: transform ease .15s;
}

.navbar nav[b-lhuaj5bsbv]  .nav-elm:hover {
    color: var(--primary-hover) !important;
    background: var(--primary10);
}

.navbar nav[b-lhuaj5bsbv]  .nav-elm.active {
    background: var(--bg-dark) !important;
}

.navbar nav[b-lhuaj5bsbv]  .nav-elm:hover img {
    transform: scale(1.1);
    filter: var(--primary-filter);
}

.navbar nav[b-lhuaj5bsbv]  .nav-elm.active img {
    transform: scale(1.1);
    filter: var(--primary-filter) drop-shadow(0 .1rem 0.5rem var(--primary));
}

nav .nav-footer[b-lhuaj5bsbv] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center; 
    margin-bottom: 1rem;
}

    nav .nav-footer .nav-version[b-lhuaj5bsbv] {
        margin: .3rem 0 1rem 0;
        color: var(--text-dark);
    }

nav label[b-lhuaj5bsbv] {
    width: calc(100% - 2.1rem);
    font-family: var(--font-header);
    font-weight: 800;
    color: var(--admin-text);
    height: 1.3rem;
    transition: all cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s;
}


nav .admin[b-lhuaj5bsbv], nav .dev[b-lhuaj5bsbv] {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: .8rem 0 .6rem 0;
    width: calc(100% - 1.3rem);
    height: auto;
    min-height: fit-content;
    flex-shrink: 0;
    background: var(--admin-bg);
    border-radius: .5rem;
    transition: ease .2s width;
    overflow: hidden;
}

nav .admin[b-lhuaj5bsbv] {
    margin: 1rem 0;
}

.navbar nav .admin[b-lhuaj5bsbv]  .nav-elm.active {
    background: var(--admin-bg-secondary) !important;
}

.navbar nav .admin[b-lhuaj5bsbv]  .nav-elm:hover {
    color: var(--admin-text) !important;
    background: var(--admin-text20);
}

    .navbar nav .admin[b-lhuaj5bsbv]  .nav-elm:hover img {
        transform: scale(1.1);
        filter: invert(.5) sepia(1) saturate(60) hue-rotate(263deg);
    }

.navbar nav .admin[b-lhuaj5bsbv]  .nav-elm.active img {
    transform: scale(1.1);
    filter: invert(.5) sepia(1) saturate(60) hue-rotate(263deg) drop-shadow(0 .1rem 0.5rem var(--admin-bg));
}

nav .dev label[b-lhuaj5bsbv] {
    color: var(--dev-text);
}

nav .dev[b-lhuaj5bsbv] {
    background: var(--dev-bg);
    margin-top: -0.4rem;
}

.navbar nav .dev[b-lhuaj5bsbv]  .nav-elm.active {
    background: var(--dev-bg-secondary) !important;
}

.navbar nav .dev[b-lhuaj5bsbv]  .nav-elm:hover {
    color: var(--dev-text) !important;
    background: var(--dev-text20);
}

    .navbar nav .dev[b-lhuaj5bsbv]  .nav-elm:hover img {
        transform: scale(1.1);
        filter: invert(0.5) sepia(1) saturate(3) hue-rotate(55deg);
    }

.navbar nav .dev[b-lhuaj5bsbv]  .nav-elm.active img {
    transform: scale(1.1);
    filter: invert(0.5) sepia(1) saturate(3) hue-rotate(55deg) drop-shadow(0 .1rem 0.5rem var(--dev-bg));
}


.navbar nav[b-lhuaj5bsbv]  .nav-elm.feedback.active {
    background: var(--warning10) !important;
}

.navbar nav[b-lhuaj5bsbv]  .nav-elm.feedback:hover {
    color: var(--warning-text) !important;
    background: var(--warning10);
}

    .navbar nav[b-lhuaj5bsbv]  .nav-elm.feedback:hover img {
        transform: scale(1.1);
        filter: invert(0.5) sepia(1) saturate(4) hue-rotate(301deg);
    }

.navbar nav[b-lhuaj5bsbv]  .nav-elm.feedback.active img {
    transform: scale(1.1);
    filter: invert(0.5) sepia(1) saturate(3) hue-rotate(55deg) drop-shadow(0 .1rem 0.5rem var(--dev-bg));
}

.navbar nav .dev[b-lhuaj5bsbv]  .nav-elm.feedback,
.navbar nav .admin[b-lhuaj5bsbv]  .nav-elm,
.navbar nav .dev[b-lhuaj5bsbv]  .nav-elm {
    margin: 0rem 1.5rem;
    padding: .6rem .7rem;
}

.nav-elm.collapse-elm[b-lhuaj5bsbv] {
    cursor: pointer;
}

.tip-card[b-lhuaj5bsbv] {
    position: relative;
    width: calc(100% - 4rem);
    border-radius: .5rem;
    background: var(--bg-dark);
    padding: 1rem;
    margin: .5rem 0 1rem;
}

    .tip-card .close[b-lhuaj5bsbv] {
        position: absolute;
        right: .5rem;
        top: .5rem;
        font-size: 16px;
        font-weight: 900;
        color: var(--text-dark);
        opacity: .2;
        cursor: pointer;
        transition: ease .1s opacity;
    }

        .tip-card .close:hover[b-lhuaj5bsbv] {
            opacity: .7;
        }

    .tip-card .tip-card-divider[b-lhuaj5bsbv] {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 12px;
        position: relative;
    }

    .tip-card img[b-lhuaj5bsbv] {
        width: 40px;
        margin-right: 1rem;
        animation: float-b-lhuaj5bsbv ease-in-out infinite 5s; 
    } 

.tip-card-divider[b-lhuaj5bsbv]::after {
    content: " ";
    position: absolute;
    bottom: -10px;
    left: 6px;
    min-height: 5px;
    min-width: 30px;
    border-radius: 50%;
    background: black;
    animation: shrink-b-lhuaj5bsbv ease-in-out infinite 5s;
}

.tip-card h1[b-lhuaj5bsbv] {
    font-size: 15px;
    text-align: left;
    margin: 0;
    color: var(--primary); 
    margin-bottom: .5rem;
}

.tip-card p[b-lhuaj5bsbv] {
    font-size: 11px;
    text-align: left;
    margin: 0;
    color: var(--text-dark-accent);
}

.tip-card a[b-lhuaj5bsbv]{
    color: var(--primary);
}

@keyframes float-b-lhuaj5bsbv {
    0% {
        transform: translateY(3px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(3px);
    }
}

@keyframes shrink-b-lhuaj5bsbv {
    0% {
        transform: scale(.9);
        opacity: .5;
    }

    50% {
        transform: scale(.6);
        opacity: .2;
    }

    100% {
        transform: scale(.9);
        opacity: .5;
    }
}



@media print {
    .navbar[b-lhuaj5bsbv] {
        display: none;
    }
}
/*@media (max-width: 800px) {
	.navbar{
		width: 8rem;
		margin: 0;
		border-radius: 0;
		height: 100%;
	}
}*/

.navbar.collapsed[b-lhuaj5bsbv] {
    box-shadow: var(--shadow-small);
}

.collapsed .nav-logo img[b-lhuaj5bsbv] {
    height: 1.7rem;
    margin: 1.1rem 0 .1rem 0;
}

.navbar.collapsed nav[b-lhuaj5bsbv]  .nav-elm span:not(.material-icons) {
    max-width: 0;
}

.navbar.collapsed nav[b-lhuaj5bsbv]  .nav-elm {
    width: 1.1rem;
}

.collapsed nav label[b-lhuaj5bsbv] {
    height: 0;
    opacity: 0;
    width: 0rem;
}

.collapsed[b-lhuaj5bsbv]  .nested-nav-link .sub-items {
    margin: 0;
    max-height: 8rem;
}

.collapsed[b-lhuaj5bsbv]  .nested-nav-link .root .nav-elm span.material-icons  {
    display: none;
}

.collapsed .admin[b-lhuaj5bsbv],
.collapsed .dev[b-lhuaj5bsbv] {
    width: calc(100% - 0.7rem);
}
/* _content/PowerPlan/SharedComponents/SettingsComponent.razor.rz.scp.css */
.settings-container[b-enj0tnr8wx] {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

    .settings-container.closed[b-enj0tnr8wx]{
        pointer-events: none;
    }

.settings[b-enj0tnr8wx] {
    background: var(--card-bg);
    border-radius: 32px;
    border: .1rem solid var(--card-border);
    position: relative;
    padding: 26px;
    padding-left: 10px;
    margin: calc(var(--devbar-height) + 32px) auto 32px;
    height: calc(100% - 128px - var(--devbar-height));
    width: fit-content;
    max-width: calc(100% - 128px);
    display: flex;
    flex-direction: row;
    transform: scale(1);
    opacity: 1;
    transition: transform cubic-bezier(0.35, 0.07, 0.2, 1) .4s, background cubic-bezier(0.35, 0.07, 0.2, 1) .2s, border cubic-bezier(0.35, 0.07, 0.2, 1) .2s,margin cubic-bezier(0.26, 0.18, 0.25, 1) .4s, height cubic-bezier(0.26, 0.18, 0.25, 1) .4s, width cubic-bezier(0.26, 0.18, 0.25, 1) .4s, padding cubic-bezier(0.26, 0.18, 0.25, 1) .4s, opacity cubic-bezier(0.43, 0.12, 0.18, 1.01) .25s;
}

    .settings.closed[b-enj0tnr8wx] {
        margin-top: 4rem;
        opacity: 0;
        transform: scale(.9);
        pointer-events: none;
    }

    .settings .nav[b-enj0tnr8wx]{
        width: 15rem;
        display: flex;
        flex-direction: column;
    }

    .settings .nav .list[b-enj0tnr8wx]{
        position: relative;
    }

        .settings .nav h1[b-enj0tnr8wx] {
            font-family: var(--font-header);
            font-size: 1.7rem;
            font-weight: 900;
            margin: 0.5rem 1.8rem 0.2rem;
        }

        .settings .nav .list-item[b-enj0tnr8wx] {
            font-family: var(--font-body);
            width: calc(100% - 2.5rem);
            color: var(--text-dark);
            margin: 0rem .2rem;
            margin-right: 2rem;
            padding: .6rem .8rem;
            font-size: 1rem;
            border-radius: .8rem;
            font-weight: 400; 
            cursor: pointer;
            display: flex;
            align-items: center;
            border: none;
            background: inherit;
            transition: opacity cubic-bezier(0.35, 0.07, 0.2, 1) .2s, background cubic-bezier(0.35, 0.07, 0.2, 1) .2s, color cubic-bezier(0.35, 0.07, 0.2, 1) .2s;
        }

        .settings .close[b-enj0tnr8wx] {
            --primary: var(--warning-text);
            position: absolute;
            bottom: 0;
            width: calc(100% - 4rem);
        }

            .settings .close:hover[b-enj0tnr8wx] {
                background: var(--warning-mute);
            }

            .settings .nav .list-item p[b-enj0tnr8wx] {
                margin: 0;
                margin-left: .5rem;
                transition: all cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s;
                text-align: left;
            }

    .settings .nav .list-item:not(:hover):not(.active) span[b-enj0tnr8wx] {
        opacity: 0.8;
    }
body[data-theme='dark'] .settings .nav .list-item:not(:hover):not(.active) span[b-enj0tnr8wx] {
    opacity: .3;
}

.settings .nav .list-item:hover[b-enj0tnr8wx] {
    color: var(--primary);
    background: var(--bg-dark50);
}
            .settings .nav .list-item:hover p[b-enj0tnr8wx] {
                color: var(--primary);
            }

            .settings .nav .list-item.active[b-enj0tnr8wx] {
                background: var(--element-bg);
                font-weight: 900;
            }

            .settings .nav .list-item.active span[b-enj0tnr8wx]{
                color: var(--primary);
            } 

    .settings .nav .admin[b-enj0tnr8wx] {
        background: var(--admin-bg);
        padding: .5rem;
        border-radius: 1rem;
        margin-left: -.5rem;
        margin-top: .5rem;
        display: flex;
        flex-direction: column;
    }

        .settings .nav .admin label[b-enj0tnr8wx] {
            width: 9.5rem;
            margin: 0.5rem 1rem 0;
            font-family: var(--font-header);
            font-weight: 800;
            color: var(--admin-text); 
            transition: all cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s;
        }

        .settings .nav .admin .list-item[b-enj0tnr8wx] {
            width: calc(100% - .5rem);
        }

            .settings .nav .admin .list-item span[b-enj0tnr8wx] {
                color: var(--admin-text);
            }
        .settings .nav .admin .list-item:hover[b-enj0tnr8wx],
        .settings .nav .admin .list-item:hover p[b-enj0tnr8wx],
        .settings .nav .admin .list-item.active span[b-enj0tnr8wx] {
            color: var(--admin-text);
        }

            .settings .nav .admin .list-item.active span[b-enj0tnr8wx] {
                color: var(--admin-hover);

            }

            .settings .nav .admin .list-item.active[b-enj0tnr8wx] {
                background: var(--admin-bg-secondary);
            }

            .settings .nav .admin .list-item:hover[b-enj0tnr8wx] { 
                background: var(--admin-text20);
            }


    .settings .settings-content[b-enj0tnr8wx] {
        flex: 1;
        position: relative;
        border-radius: .5rem;
        padding: 2rem;
        height: calc(100% - 4rem);
        min-width: 20rem;
        width: 600px;
        background: var(--card-bg-top);
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: smooth;
        transition: background ease .2s, color ease .2s, border-color ease .2s;
    }

[b-enj0tnr8wx] .row.owerflowvisible{
    overflow: visible !important;
}

.settings .settings-content[b-enj0tnr8wx]  .row:not(.no-hover):hover {
}

.settings .settings-content[b-enj0tnr8wx]  > label, .settings .settings-content[b-enj0tnr8wx]  .label {
    font-family: var(--font-header);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-dark);
}

    .settings .settings-content[b-enj0tnr8wx]  .setting-title {
        font-family: var(--font-header);
        font-size: .8rem;
        margin: .3rem;
        margin-left: .7rem;
        padding: .3rem .8rem;
        width: fit-content;
        border-radius: .4rem;
        font-weight: 700;
        color: var(--primary);
        background: var(--bg-dark);
        position: relative;
    }

        .settings .settings-content[b-enj0tnr8wx]  .setting-title:before {
            position: absolute;
            content: " ";
            height: .6rem;
            width: .6rem;
            margin-top: .4rem;
            margin-left: -1rem;
            border-radius: 50%;
        }

[b-enj0tnr8wx] .small-space{
    min-height: 48px;
}

[b-enj0tnr8wx] input {
    margin: 0rem !important;
}
[b-enj0tnr8wx] .input-component {
    width: calc(100%);
}

[b-enj0tnr8wx] .dropdown-container .input-component {
    width: fit-content;
    align-items: end
}

[b-enj0tnr8wx] .date {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0 .5rem;
}

[b-enj0tnr8wx] .date p{
    margin: 0 1rem;
}

[b-enj0tnr8wx] .row.no-hover{
    flex-direction: row;
}

[b-enj0tnr8wx] .flex .row{
    flex: 1;
}

.settings .settings-content[b-enj0tnr8wx]  h1 {
    font-family: var(--font-header);
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-dark);
    margin-left: 1rem;
}

[b-enj0tnr8wx] .rows {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

[b-enj0tnr8wx] .rows.wide {
    max-width: 1600px;
}

    [b-enj0tnr8wx] .rows h2 {
        font-weight: 800;
        color: var(--input-text);
        margin-bottom: .75rem;
        margin-left: 1rem;
        font-size: 1.2rem;
    }

    [b-enj0tnr8wx] .rows .row {
        --t: 0;
        --b: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background: var(--card-bg);
        padding: 0 8px 0 16px;
        transition: ease .2s background;
        border-radius: var(--t) var(--t) var(--b) var(--b);
    }

        [b-enj0tnr8wx] .rows .row .tabs {
            background: var(--element-bg);
        }
        [b-enj0tnr8wx] .rows .row.single{
            padding: .5rem 0;
        }

    [b-enj0tnr8wx] .rows h2 + .row {
        --t: 16px;
    }

    [b-enj0tnr8wx] .rows .row:first-of-type {
        --t: 16px;
    }

    [b-enj0tnr8wx] .rows .row:not(:has( +.row)) {
        --b: 16px;
    }

    [b-enj0tnr8wx] .rows.profile .row,
    [b-enj0tnr8wx] .rows.blocks .row,
    [b-enj0tnr8wx] .rows.admin .row {
        flex-direction: column;
        align-items: start;
        padding: 0;
        background: none;
        margin-bottom: 8px;
    }
        [b-enj0tnr8wx] .profile-row{
            margin-bottom: 32px;
        }

[b-enj0tnr8wx] .rows:not(.p) p:not(.unit) {
    color: var(--text-dark);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.9rem;
    margin: 20px 0;
}

    [b-enj0tnr8wx] .rows .row.nested {
    }

        [b-enj0tnr8wx] .rows .row.nested p {
            opacity: 0.5;
            font-weight: 600;
            margin-left: 16px;
        }

    [b-enj0tnr8wx] .rows .row.nested {
    }

[b-enj0tnr8wx] section {
    display: flex;
    flex-direction: column;
    margin: 2rem;
}

    [b-enj0tnr8wx] section.danger {
        background: var(--warning-mute);
        padding: 1rem 2rem 1.5rem;
        margin: 2rem 4rem;
        border-radius: 1.5rem;
    }

        [b-enj0tnr8wx] section.danger .row {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: .8rem;
            border-top: .2rem solid var(--warning20);
        }

            [b-enj0tnr8wx] section.danger .row:first-of-type {
                border-top: none;
            }

            [b-enj0tnr8wx] section.danger .row:last-of-type {
                border-bottom: none;
            }

            [b-enj0tnr8wx] section.danger .row p {
                margin: 0;
                color: var(--text-dark);
            }

    [b-enj0tnr8wx] section h2:first-of-type {
        font-family: var(--font-header);
        color: var(--text-dark);
        font-weight: 800;
        margin-bottom: 0;
    }

[b-enj0tnr8wx] .blocks .save button{
    box-shadow: none;
}

[b-enj0tnr8wx] .row-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 0.7rem;
    position: sticky;
    top: -2rem;
    padding-top: 1rem;
    z-index: 2;
    backdrop-filter: blur(2px);
    background: linear-gradient(180deg, var(--card-bg-top), transparent);
}

    [b-enj0tnr8wx] .row-top label {
        margin: 0 !important;
    }

    [b-enj0tnr8wx] .row-top button {
        margin-right: 1rem;
    }

    [b-enj0tnr8wx] .row.key{

    }

    [b-enj0tnr8wx] .key-generator{
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100%;
    }

[b-enj0tnr8wx] .code {
    background: var(--card-bg-top);
    margin: 8px 8px 8px 0px;
    height: calc(100% - 16px);
    padding: 0 0.75rem 0 1rem;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    [b-enj0tnr8wx] .code p {
        margin: 0;
        font-family: var(--font-mono);
        color: var(--text-dark);
        font-size: 1rem;
    }

        [b-enj0tnr8wx] .code span:hover{
            opacity: 1;
        }

        [b-enj0tnr8wx] .code p.empty {
        }

[b-enj0tnr8wx] .input-component:has(.threshold) {
    max-width: 8rem;
} 
[b-enj0tnr8wx] .invoice.list-item {
    background: var(--card-bg-top);
}

[b-enj0tnr8wx] .url{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem .5rem 0.5rem 0.75rem;
    margin: .5rem;
    margin-left: 0;
    border-radius: 0.5rem;
    background: var(--card-bg-top);
}
    [b-enj0tnr8wx] .url p{
        flex: 1;
        margin: 0 !important;
        white-space: nowrap;
        overflow: auto;
    }

    [b-enj0tnr8wx] .row:has(.url){
        padding-left: 8px;
    }

[b-enj0tnr8wx] p.notice{
    margin: 0.2rem 1rem !important;
    color: var(--text-dark-mute) !important;
}

@media (max-width: 800px) {
    .settings .nav .list-item p[b-enj0tnr8wx], h1[b-enj0tnr8wx], label[b-enj0tnr8wx]{
        display: none;
    }
    .settings .nav[b-enj0tnr8wx] {
        width: unset;
    }
        .settings .nav .admin[b-enj0tnr8wx] {
            width: 56px;
        }
}

@media (max-width: 700px) {
    .settings[b-enj0tnr8wx] {
        margin: calc(var(--devbar-height) + 16px) auto 16px;
        height: calc(100% - 7rem);
        width: calc(100% - var(--devbar-height) - 32px);
    }
}

@media (max-width: 575px) {
    .settings[b-enj0tnr8wx] {
        margin: 0;
        margin-top: var(--devbar-height);
        border-radius: 0;
        height: calc(100% - var(--devbar-height) - 32px);
        width: calc(100% - 32px);
        max-width: 100%;
        padding: 16px;
    }
        .settings .nav .list-item[b-enj0tnr8wx] {
            margin-right: 1rem;
        }
}

/* _content/PowerPlan/SharedComponents/SettingsLayout.razor.rz.scp.css */
.settings-layout[b-ujv63yvhgr] {
    display: flex;
    flex-direction: row;
    height: calc(100% - 8px);
    width: 100%;
    gap: 0;
    background: var(--card-bg-top50);
    border-radius: 24px;
    padding: 8px;
    box-sizing: border-box;
}

/* --- SIDEBAR --- */
.settings-sidebar[b-ujv63yvhgr] {
    width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--card-border); 
    padding: 1rem;
    overflow-y: auto;
    flex-shrink: 0; 
    z-index: 1;
}

.search-box[b-ujv63yvhgr] {
    position: relative; 
}

    .search-box input[b-ujv63yvhgr] {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 10px 10px 36px;
        border-radius: 8px;
        border: 1px solid var(--card-border);
        background: var(--element-bg);
        font-family: var(--font-body);
    }

    .search-box .material-icons-round[b-ujv63yvhgr] {
        position: absolute;
        left: 8px;
        top: 9px;
        color: var(--text-dark-mute);
    }

.settings-nav[b-ujv63yvhgr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.group-title[b-ujv63yvhgr] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400; 
    color: var(--text-dark-mute);
    margin: 16px 0 0px 12px;
}

[b-ujv63yvhgr] .nav-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-dark);
    transition: background 0.2s ease;
    cursor: pointer;
}

    [b-ujv63yvhgr] .nav-item:hover {
        background: var(--card-bg-top);
    }

    [b-ujv63yvhgr] .nav-item.active {
        background: var(--bg-dark); /* Or your primary accent color mostly transparent */
        color: var(--primary);
    }

    [b-ujv63yvhgr] .nav-item.disabled {
        opacity: 0.5;
        cursor: default;
        pointer-events: none;
    }

    [b-ujv63yvhgr] .nav-item > .material-icons-round {
        font-size: 24px;
        margin-right: 12px;
        color: var(--text-dark-accent);
    }

    [b-ujv63yvhgr] .nav-item.active > .material-icons-round {
        color: var(--primary);
    }
    [b-ujv63yvhgr] .nav-item > .material-icons-round:not(.arrow) {
        margin-bottom: auto;
    }

    [b-ujv63yvhgr] .nav-item .text {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    [b-ujv63yvhgr] .nav-item .title {
        font-weight: 900;
        font-size: 0.95rem;
    }
    [b-ujv63yvhgr] .nav-item:hover .title,
    [b-ujv63yvhgr] .nav-item:hover span {
        color: var(--primary);
    }

    [b-ujv63yvhgr] .nav-item .subtitle {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 0.8rem;
        color: var(--text-dark-mute);
        margin-top: 2px;
    }

    [b-ujv63yvhgr] .nav-item .arrow {
        font-size: 18px;
        color: var(--thumb-color);
    }

/* --- CONTENT --- */
.settings-content[b-ujv63yvhgr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.content-wrapper[b-ujv63yvhgr] {
    flex: 1;
    overflow-y: auto;
    padding: 0 2rem;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.mobile-header[b-ujv63yvhgr] {
    display: none; /* Hidden on desktop */
    padding: 1rem;
    border-bottom: 1px solid var(--card-border); 
}

.back-btn[b-ujv63yvhgr] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

/* --- SETTINGS LIST FRAMEWORK --- */
[b-ujv63yvhgr] .settings-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 0rem;
    position: sticky;
    top: 0; 
    backdrop-filter: blur(4px);
    z-index: 10;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

    [b-ujv63yvhgr] .settings-page-header h1 {
        font-size: 1.8rem;
        margin: 0;
        font-family: var(--font-header);
        color: var(--text-dark);
        font-weight: 900;
    }

[b-ujv63yvhgr] .settings-group {
    margin-bottom: 3rem;
    animation: fadeIn 0.3s ease;
}

    [b-ujv63yvhgr] .settings-group .invoice:not(.list-item) h2,
    [b-ujv63yvhgr] .settings-group > h2 {
        font-size: 0.9rem;
        color: var(--text-dark-mute);
        margin-bottom: 0rem;
        font-weight: 800;
        letter-spacing: 0.5px;
        border-bottom: 1px solid var(--card-border);
        padding-bottom: 0.5rem;
    }

/* The List Item */
[b-ujv63yvhgr] .settings-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* Centers inputs vertically with text */
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--card-border);
    gap: 2rem;
}

    [b-ujv63yvhgr] .settings-item:last-child {
        border-bottom: none;
    }

    /* Left side: Info */
    [b-ujv63yvhgr] .settings-item .info {
        flex: 1;
        max-width: 400px;
        display: flex;
        flex-direction: column;
    }

        [b-ujv63yvhgr] .settings-item .info label {
            font-family: var(--font-header);
            font-weight: 900;
            font-size: 1rem;
            color: var(--text-dark);
            margin-bottom: 0.25rem;
        }

        [b-ujv63yvhgr] .settings-item .info .desc {
            font-size: 0.85rem;
            color: var(--text-dark-mute);
            line-height: 1.4;
        }

    /* Right side: Control */
    [b-ujv63yvhgr] .settings-item .control {
        flex: 1;
        max-width: 400px; /* Or unset if you want full width */
        display: flex;
        justify-content: flex-end;
    }

        [b-ujv63yvhgr] .settings-item .control.wide {
            max-width: 100%;
        }

    /* For items that need to stack (like the big Detailed Tabs) */
    [b-ujv63yvhgr] .settings-item.column-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

        [b-ujv63yvhgr] .settings-item.column-layout .control {
            width: 100%;
            justify-content: flex-start;
        }

/* Helper for Zip/City */
[b-ujv63yvhgr] .double-input {
    display: flex;
    gap: 0.5rem;
}

/* --- GLOBAL SETTINGS FRAMEWORK --- */
    [b-ujv63yvhgr] .settings-page-header .actions {
        display: flex;
        gap: 0.5rem;
        animation: slideInRight-b-ujv63yvhgr 0.2s ease;
    }

@keyframes slideInRight-b-ujv63yvhgr {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
} 

/* Standard List Item */
[b-ujv63yvhgr] .settings-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--card-border);
    gap: 2rem;
}

    [b-ujv63yvhgr] .settings-item:last-child {
        border-bottom: none;
    }

    /* Left side: Text Context */
    [b-ujv63yvhgr] .settings-item .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        max-width: 500px;
    }

        [b-ujv63yvhgr] .settings-item .info label {
            font-family: var(--font-header);
            font-weight: 900;
            font-size: 1rem;
            color: var(--text-dark);
            margin: 0;
        }

        [b-ujv63yvhgr] .settings-item .info .desc {
            font-size: 0.85rem;
            color: var(--text-dark-mute);
            line-height: 1.4;
        }

            /* Tooltip/Icon helper in description */
            [b-ujv63yvhgr] .settings-item .info .desc .material-icons-round {
                font-size: 1rem;
                vertical-align: text-bottom;
                margin-right: 4px;
                opacity: 0.7;
            }

    /* Right side: Input Controls */
    [b-ujv63yvhgr] .settings-item .control {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        max-width: 400px; /* Limits input width */
    }

        /* Full width control for Tabs/Textareas */
        [b-ujv63yvhgr] .settings-item .control.wide {
            max-width: 100%;
        }

    /* Column Layout (Vertical Stack) */
    [b-ujv63yvhgr] .settings-item.column-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

        [b-ujv63yvhgr] .settings-item.column-layout .control {
            width: 100%;
            justify-content: flex-start;
        }

/* Danger Zone Styling */
[b-ujv63yvhgr] .settings-group.danger h2 {
    color: var(--warning-text);
    border-color: var(--warning20);
}

[b-ujv63yvhgr] .settings-group.danger .settings-item {
    border-color: var(--warning20);
}

/* Empty States within Panels */
[b-ujv63yvhgr] .empty-state-panel {
    background: var(--card-bg-top);
    border: 1px dashed var(--card-border);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    color: var(--text-dark-mute);
}

[b-ujv63yvhgr] .settings-intro {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}

    [b-ujv63yvhgr] .settings-intro p {
        color: var(--text-dark-mute);
        font-size: 1rem;
        line-height: 1.5;
        margin: 0;
        max-width: 700px;
    }

/* Site Label Container */
[b-ujv63yvhgr] .site-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

    /* Override default label margin since we have the tag next to it */
    [b-ujv63yvhgr] .site-label label {
        margin: 0 !important;
        font-size: 1rem;
    }

/* Nested items for future expansion (e.g. API Keys below the dropdown) */
[b-ujv63yvhgr] .settings-item.nested {
    background: var(--bg);
    padding-left: 2rem;
    border-bottom: 1px solid var(--card-border);
    margin-top: -1px; /* Overlap border */
}

/* Ensure Dropdowns in controls fill the available space nicely */
[b-ujv63yvhgr] .settings-item .control .dropdown-container {
    width: 100%;
    min-width: 200px;
}

[b-ujv63yvhgr] .settings-item .control .input-component {
    width: 100%;
}

/* --- MOBILE RESPONSIVENESS (iPad Style Split) --- */
@media (max-width: 800px) {
    /* If viewing list (root), hide content */
    .settings-layout.viewing-list[b-ujv63yvhgr] {
        overflow: hidden;
        margin: 0.5rem;
    }
    .settings-layout.viewing-list .settings-content[b-ujv63yvhgr] {
        display: none;
    }

        .settings-layout.viewing-list .settings-sidebar[b-ujv63yvhgr] {
            width: 100%;
            box-sizing: border-box;
            border-right: none;
        }

    /* If viewing content (child page), hide sidebar */
    .settings-layout.viewing-content .settings-sidebar[b-ujv63yvhgr] {
        display: none;
    }

    .settings-layout.viewing-content .settings-content[b-ujv63yvhgr] {
        display: flex;
        width: 100%;
    }

    .mobile-header[b-ujv63yvhgr] {
        display: flex;
    }

    .content-wrapper[b-ujv63yvhgr] {
        padding: 1rem;
    }
}
/* _content/PowerPlan/SharedComponents/Settings/SettingsAdmin.razor.rz.scp.css */

[b-k0zm6kmhy2] .tab h1 {
    font-size: 1.3rem;
    text-align: left;
    width: 100%;
}

[b-k0zm6kmhy2] .tab p {
    text-align: left;
    margin-top: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
}
/* _content/PowerPlan/SharedComponents/Settings/SettingsAdminPlanning.razor.rz.scp.css */
.threshold-container[b-o2lh4ua98c] {
    display: flex;
    flex-direction: row;
}

    .threshold-container .threshold[b-o2lh4ua98c] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 10rem;
    }

    .threshold-container[b-o2lh4ua98c]  .tooltip-container {
        float: left;
        width: fit-content;
    }

        .threshold-container[b-o2lh4ua98c]  .tooltip-container span {
            margin-right: 0.3rem;
            margin-top: 0.15rem;
            font-size: 1.2rem;
            opacity: .5;
        }

    .threshold-container[b-o2lh4ua98c]  .input-component {
        width: 6rem;
        margin: 5px -16px 0 0 !important;
    }

        .threshold-container[b-o2lh4ua98c]  .input-component input {
            padding: 0.525rem 0.8rem;
        }

    .threshold-container[b-o2lh4ua98c]  p.unit {
        margin-left: 0;
        margin-right: 24px;
        text-align: right;
    }

    .threshold-container p[b-o2lh4ua98c] {
        margin: 0 !important;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .rows > p[b-o2lh4ua98c]{
        margin: 0 1rem 0.5rem !important;
    }
/* _content/PowerPlan/SharedComponents/Settings/SettingsDocuments.razor.rz.scp.css */

.documents-list-header[b-zm37tgoqou] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: .5rem;
}

    .documents-list-header span[b-zm37tgoqou] {
        margin: 0 .5rem 0.5rem;
        color: var(--text-dark-accent);
        font-size: 14px;
    }

.documents-list[b-zm37tgoqou] {
    margin-top: 1rem;
}

.documents-title[b-zm37tgoqou] {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.documents-grid[b-zm37tgoqou] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.document-card[b-zm37tgoqou] {
    background: var(--card-bg-top);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 16px 0px var(--card-bg);
}

    .document-card:hover[b-zm37tgoqou] {
        box-shadow: var(--shadow-small);
        background: var(--card-bg);
    }

    .document-card p[b-zm37tgoqou] {
        white-space: unset;
        line-break: unset;
        text-overflow: unset;
    }

.document-info[b-zm37tgoqou] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex: 1;
    overflow: hidden;
}

.document-icon[b-zm37tgoqou] {
    color: var(--bg-dark3);
    flex-shrink: 0;
}

[data-theme="dark"] .document-icon[b-zm37tgoqou] {
    color: var(--text-light);
    opacity: 0.4;
}

.document-icon span[b-zm37tgoqou] {
    font-size: 32px;
}

.document-details[b-zm37tgoqou] {
    flex: 1;
}

.document-title[b-zm37tgoqou] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 0.25rem 0;
}

.document-meta[b-zm37tgoqou] {
    font-size: 0.875rem;
    color: var(--text-dark-accent);
    margin: 0 0 0.25rem 0;
}

.document-uploader[b-zm37tgoqou] {
    font-size: 0.75rem;
    color: var(--text-dark-accent);
    margin: 0;
}

.document-actions[b-zm37tgoqou] {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-left: 0.5rem;
    width: fit-content;
}
    .signed .document-actions[b-zm37tgoqou]{
        flex-direction: row-reverse;
    }

    .document-actions[b-zm37tgoqou]  .delete-button {
        display: none;
    }

.document-card:hover .document-actions[b-zm37tgoqou]  .delete-button {
    display: flex;
}

.document-card.Employee:not(.signed)[b-zm37tgoqou] {
    box-shadow: inset 0 0 16px 0px var(--card-bg), inset 0 -7px 38px -27px var(--primary), var(--shadow-medium);
    z-index: 1;
}

.sign-document-container[b-zm37tgoqou]  {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    background: transparent;
    backdrop-filter: blur(0px);
    display: flex;
    flex-direction: column;
    animation: ease .2s doc-container-in-b-zm37tgoqou forwards 1;
}
@keyframes doc-container-in-b-zm37tgoqou{
    from {
        backdrop-filter: blur(0px);
        background: transparent;
    }
    to {
        backdrop-filter: blur(4px);
        background: var(--card-bg-top50);
    }
}

.sign-document-container .sign-document-modal[b-zm37tgoqou] {
    margin: auto;
    width: 100%;
    max-width: 28rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-small);
    border-radius: 32px;
    padding: 32px;
    opacity: 0;
    transform: translateY(-50px);
    z-index: 1;
    animation: ease-out .3s doc-modal-in-b-zm37tgoqou forwards 1;
}

@keyframes doc-modal-in-b-zm37tgoqou {
    from {
        opacity: 0;
        transform: translateY(50px);
        box-shadow: var(--shadow-small);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
        box-shadow: var(--shadow-medium);
    }
}

        .sign-document-container .sign-document-modal p[b-zm37tgoqou] {
        }
        .sign-document-container .sign-document-modal .actions[b-zm37tgoqou]{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 16px;
        }

    .sign-document-container .bg-click[b-zm37tgoqou]{
        height: 100%;
        width: 100%;
        position: absolute; 
    }

[b-zm37tgoqou] .signed-verified {
    color: var(--primary);
    margin-top: 0.3rem;
}
/* _content/PowerPlan/SharedComponents/Settings/SettingsProfileComponent.razor.rz.scp.css */
.profile-row[b-r8ak6ly6z9] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
    
    .profile-row .profile[b-r8ak6ly6z9] {
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .profile-row .col[b-r8ak6ly6z9] {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
    }

.row[b-r8ak6ly6z9]{
    margin: 0 16px;
    width: calc(100% - 32px);
}

[b-r8ak6ly6z9] .input-component .datepicker-container-container {
    right: 0.8rem;
    top: 0.3rem;
}


.pin-div p.error[b-r8ak6ly6z9] {
    margin: .2rem 0.75rem;
    color: var(--warning);
}
.pin-div[b-r8ak6ly6z9]  input {  
    margin-bottom: 0 !important;
}
/* _content/PowerPlan/SharedComponents/Settings/SettingsShiftsComponent.razor.rz.scp.css */
body[b-5xqhh3zrb5] {
}
.block-component[b-5xqhh3zrb5]{
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    padding: 1rem;
    width: calc(100% - 2rem);
    border-radius: .8rem;
    align-items: end;
}

    .block-component[b-5xqhh3zrb5]  .create-button {
        width: auto;
        margin: .5rem;
    }

    .save[b-5xqhh3zrb5]  button{
        width: auto;
        margin: 8px 16px 16px;
    }

.block-component > div[b-5xqhh3zrb5] {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.block-component h2[b-5xqhh3zrb5]{
    font-size: 1.1rem;
    margin: 0 .1rem .5rem;
}
    .block-component .nav[b-5xqhh3zrb5] {
        width: 10rem;
        display: flex;
        flex-direction: column;
    }

        .block-component .nav .list[b-5xqhh3zrb5] {
            position: relative;
        }

        .block-component .nav h1[b-5xqhh3zrb5] {
            font-family: var(--font-header);
            font-size: 1.3rem;
            font-weight: 800;
        }

        .block-component .nav .list-item[b-5xqhh3zrb5] {
            font-family: var(--font-header);
            color: var(--text-dark);
            margin: .2rem .2rem;
            margin-right: 2rem;
            padding: .6rem .8rem;
            font-size: 1.2rem;
            border-radius: .8rem;
            font-weight: 400;
            transition: all cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s;
            transition: margin cubic-bezier(0.49, 0.77, 0.69, 1.07) .4s;
            cursor: pointer;
            display: flex;
            align-items: center;
            border: none;
            background: var(--card-bg);
        }
            .block-component .nav .list-item p[b-5xqhh3zrb5] {
                margin: 0;
                margin-left: .5rem;
                transition: all cubic-bezier(0.49, 0.77, 0.69, 1.07) .15s;
            }

            .block-component .nav .list-item:hover[b-5xqhh3zrb5] {
                color: var(--primary);
            }

                .block-component .nav .list-item:hover p[b-5xqhh3zrb5] {
                    color: var(--primary);
                }

            .block-component .nav .list-item.active[b-5xqhh3zrb5] {
                color: var(--primary);
                background: var(--element-bg);
                font-weight: 700;
            }
            .block-component .nav .list-item.active p[b-5xqhh3zrb5] {
                color: var(--primary);
            }

                .block-component .nav .list-item.active span[b-5xqhh3zrb5] {
                    color: var(--primary);
                }

                .block-content[b-5xqhh3zrb5]{
                    flex: 1;
                    margin-left: 1rem;
                    display: flex;
                    height: auto;
                    flex-direction: column;
                }

                    .block-content[b-5xqhh3zrb5]  > .input-component
                    {
                        margin: 0 !important;
                        margin-bottom: .5rem !important;
                    }

                        .block-content[b-5xqhh3zrb5]  > .input-component input{
                            border: none !important;
                            margin: .5rem 0 !important;
                        }

                        .block-tabs[b-5xqhh3zrb5] {
                            padding: 1rem;
                            background: var(--card-bg-top);
                            border-radius: .5rem;
                        }


                .days[b-5xqhh3zrb5]{
                    display: flex;
                    width: 100%;
                    position: relative;
                    flex-direction: row;
                    justify-content: space-between;
                    flex-wrap: wrap;
                }

.day[b-5xqhh3zrb5] {
    font-family: var(--font-header);
    font-weight: 800;
    color: var(--text-dark);
    background: var(--default);
    text-align: center;
    border-radius: .5rem;
    padding: .4rem 3%;
    font-size: 14px;
    margin: .3rem 0;
    cursor: pointer;
    border: none;
}
                .day:hover[b-5xqhh3zrb5]{
                    background: var(--bg-dark);
                }
                    .day.active[b-5xqhh3zrb5] {
                        color: var(--primary);
                        background: var(--bg-dark);
                    }

.options[b-5xqhh3zrb5]{
    display: flex;
    flex-direction: row;
}
.options .day[b-5xqhh3zrb5]{
    margin-right: .5rem;
}

.block-tabs[b-5xqhh3zrb5]  .input-component {
    margin: 1rem !important;
}

.block-list-container[b-5xqhh3zrb5] {
    width: calc(100% - 2rem);
    display: flex;
    border-radius: .6rem;
    background: var(--card-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

            .block-list-container .block-list[b-5xqhh3zrb5] {
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }

.block-list-container p.block-list-empty[b-5xqhh3zrb5]{

}