/*
    This file contains additional CSS styles for the default trellispark theme.
    There are also some styles that override some styles produced from the ThemeBuilder.

    Changes to this file are not recommended as they could be overwritten by future updates.
    If styles in this file need to be changed, styles can be overwritten from using an app.css file.

    File Date: 2026-03-19 (YYYY-MM-DD)
*/

/*The styles below are component specific*/
/*AUTH-SA/Shared/MainLayout.razor*/
/*UX-WASM-Component/AuthenticatedLayout.razor*/
/*AUTH-AAD/Shared/MainLayout.razor*/
.PopupNotification {
    z-index: 19000;
}

/*AUTH-SA/Index.razor*/
.IndexPageSATopAlignment {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.IndexPageSABottomAlignment {
	display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
}

.IndexPageSALeftAlignment {
	display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.IndexPageSARightAlignment {
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
}

.IndexSAChildAlignment {
    align-items: center;
}

/*AUTH-AAD/Index.razor*/
.IndexPageAADTopAlignment {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.IndexPageAADBottomAlignment {
	display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
}

.IndexPageAADLeftAlignment {
	display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.IndexPageAADRightAlignment {
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
}

.IndexAADSignInAlignment {
    text-align: center;
}

.IndexAADSignInUpButton {
    background-color: #50B748;
    border-radius: 12px;
    color: white !important;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

/*AUTH-SA/SignIn.razor*/
.SignInPage {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.37);
    padding: 30px 40px;
    width: 20vw;
    margin: auto;
}

/*Styles specific for mobile size screens*/
@media only screen and (max-width: 768px) {
	.SignInPage {
		width: 80vw;
	}
}

.SignInPageTopAlignment {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.SignInPageBottomAlignment {
	display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
}

.SignInPageLeftAlignment {
	display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.SignInPageRightAlignment {
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
}

.SignInContentContainer {
    width: 100%;
}

.SignInFieldsContainer {
    width: 100%;
}

.SignInFieldAlignment {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}

.SignInLabelSize {
    width: 20%;
}

.SignInUsernameTextBox {
    height: 2.5rem;
}

.SignInPasswordTextBox {
    height: 2.5rem;
}

.SignInSignInButton {
    width: 100%;
    border-radius: 20px;
}

.SignInSignUpButton {
    cursor: pointer;
    color: var(--kendo-color-primary, #4A6797);
    font-weight: bold;
}

.SignInResetPasswordButton {
    cursor: pointer;
    color: var(--kendo-color-primary, #4A6797);
    font-weight: bold;
}

.SignInTitleContainer {
    text-align: center;
}

.SignInTitle {
    margin: 0;
}

.SignInResetPasswordContainer {
    padding-bottom: 20px;
}

.SignInOrDivider {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

    .SignInOrDivider:after,
    .SignInOrDivider:before {
        content: "";
        display: block;
        background: #000000;
        width: 30%;
        height: 1px;
        margin: 0 10px;
    }

.SignInSignUpContainer {
    text-align:center;
}

/*AUTH-SA/SignUp.razor*/
.SignUpPage {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.37);
    padding: 30px 40px;
    width: 20vw;
    margin: auto;
}

/*Styles specific for mobile size screens*/
@media only screen and (max-width: 768px) {
	.SignUpPage {
		width: 80vw;
	}
}

.SignUpPageTopAlignment {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.SignUpPageBottomAlignment {
	display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
}

.SignUpPageLeftAlignment {
	display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.SignUpPageRightAlignment {
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
}

.SignUpContentContainer {
    width: 100%;
}

.SignUpFieldsContainer {
    width: 100%;
}

.SignUpFieldAlignment {
    width: 100%;
    display: flex;
    align-items: center;
}

.SignUpLabelSize {
    width: 20%;
}

.SignUpSpacing {
    padding-bottom: 10px;
}

.SignUpEmailTextboxContainer {
	width: inherit;
    flex: 1;
}

.SignUpEmailTextBox {
    height: 2.5rem;
}

.SignUpMFAValidateEmailButton {
	width: 100%;
    margin-top: 10px;
}

.SignUpConfirmEmailTextBox {
    height: 2.5rem;
}

.SignUpMFAEmailVerifiedContainer {
    font-size: small;
    padding-bottom: 10px;
}

.SignUpPasswordBlock {
    padding-top: 10px;
}

.SignUpPasswordTextBox {
    height: 2.5rem;
}

.SignUpConfirmPasswordTextBox {
    height: 2.5rem;
}

.SignUpFirstNameBlock {
    padding-top: 10px;
}

.SignUpFirstNameTextBox {
    height: 2.5rem;
}

.SignUpLastNameTextBox {
    height: 2.5rem;
}

.SignUpSecurityQuestionBlock {
    padding-top: 10px;
}

.SignUpSecurityQuestionTextBox {
    height: 2.5rem;
}

.SignUpSecurityAnswerTextBox {
    height: 2.5rem;
}

.SignUpTOSContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    margin: 20px 0px;
}

.SignUpTOSCheckBox {
    border-radius: 3px;
}

.SignUpTOSShowButton {
    cursor: pointer;
    font-weight: bold
}

.SignUpSignUpButton {
    flex: 1;
}

.SignUpSignInExistingUserButtonBlock {
    text-align: center;
    font-size: small;
    padding-top: 20px;
}

.SignUpSignInExistingUserButton {
    cursor: pointer;
    color: var(--kendo-color-primary, #4A6797);
    font-weight: bold;
}

.SignUpMFAYesButton {
    width: 100%;
}

.SignUpMFANoButton {
    width: 100%;
}

.SignUpTitleContainer {
    text-align: center;
}

.SignUpTitle {
    margin: 0;
}

.SignUpSecondaryMFAButtonsContainer {
    display: flex;
    gap: 5px;
}

.SignUpConfirmEmailTextboxContainer {
    flex: 1;
}

.SignUpPasswordTextboxContainer {
    flex: 1;
}

.SignUpPasswordValidationList {
    margin-top: 0;
}

.SignUpConfirmPasswordTextboxContainer {
    flex: 1;
}

.SignUpPasswordsTextboxButtonAlignment {
    display: flex;
    gap:5px;
}

.SignUpFirstNameTextboxContainer {
    flex: 1;
}

.SignUpLastNameTextboxContainer {
    flex: 1;
}

.SignUpSecurityQuestionTextboxContainer {
    flex: 1;
}

.SignUpSecurityAnswerTextboxContainer {
    flex: 1;
}

.SignUpPrivacyPolicyShowButton {
    cursor: pointer;
    font-weight: bold;
}

/*AUTH-SA/ResetPassword.razor*/
.ResetPasswordPage {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.37);
    padding: 30px 40px;
    width: 20vw;
    margin: auto;
}

/*Styles specific for mobile size screens*/
@media only screen and (max-width: 768px) {
	.ResetPasswordPage {
		width: 80vw;
	}
}

.ResetPasswordPageTopAlignment {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.ResetPasswordPageBottomAlignment {
	display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
}

.ResetPasswordPageLeftAlignment {
	display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.ResetPasswordPageRightAlignment {
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
}

.ResetPWContentContainer {
    width: 100%;
}

.ResetPWFieldsContainer {
    width: 100%;
}

.ResetPWSecurityAnswerTextBox {
    height: 2.5rem;
    width:100%;
}

.ResetPWNewPasswordTextBox {
    height: 2.5rem;
    width:100%;
}

.ResetPWConfirmPasswordTextBox {
    height: 2.5rem;
    width:100%;
}

.ResetPWResetPasswordButton {
    margin-top: 10px;
    width: 100%;
}

.ResetPWEmailLabel {
    text-align: center;
}

.ResetPWEmailTextBox {
    height: 2.5rem;
    width:100%;
}

.ResetPWVerifyEmailButton {
    width: 100%;
}

.ResetPWVerifyEmailSignInButton {
    cursor: pointer;
    color: var(--kendo-color-primary, #4A6797);
    font-weight: bold;
}

.ResetPWTitleContainer {
    text-align: center;
}

.ResetPWTitle {
    margin: 0;
}

.ResetPWSecurityQuestionContainer {
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ResetPWNewPasswordContainer {
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ResetPWPasswordsTextboxButtonAlignment {
    display: flex;
    gap: 5px;
}

.ResetPWPasswordValidationList {
    margin-top: 0;
}

.ResetPWConfirmPasswordContainer {
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ResetPWNonVerifiedContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ResetPWEmailTextboxContainer {
    width: 100%;
}

.ResetPWVerifyEmailSignInContainer {
    text-align: center;
    font-size: small;
    padding-top: 20px;
}

/*AIEnhance/AIEnhance.razor*/
.AIEnhanceChatContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
    gap: 10px;
    min-height: 0;
}

.AIFeedbackPromptAlignment {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
}

.AIFeedbackSubmitSpacing {
    padding-top: 8px;
}

/*AIEnhance/SpecificAction.razor*/
.AISpecificActionContainer {
    margin: 10px 0px;
}

/*AIEnhance/TextChat.razor*/
/*AI Chat requires additional styles to parent container*/
.AIEnhanceContainer:has(.AIChatContainer) {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 80vh;
}

.AIChatContainer {
	min-width: 50%;
	max-width: 100%;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.AIChatHeader {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--kendo-color-base-emphasis, #e0e0e0);
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	border-radius: 11px;
}

.AIChatMessagesContainer {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	scroll-behavior: smooth;
}

.AIChatMessageContainer {
	display: flex;
	align-items: flex-start;
	position: relative;
	max-width: 80%;
}

.AIChatMessage {
	max-width: 80%;
	padding: 0px 14px;
	border-radius: 8px;
	font-size: 14px;
	word-break: auto-phrase;
}

/*This is used to make images responsive within chat messages*/
.AIChatMessage img {
    max-width: 100%;
    height: auto;
    display: block;
}

.AIChatMessageBot {
	align-self: flex-start;
	background-color: var(--kendo-color-base-active, #e0e0e0);
	position: relative;
}

.AIChatMessageUser {
	align-self: flex-end;
	background-color: var(--kendo-color-primary, #007bff);
	color: white;
	max-width: 80%;
}

.AIChatMessageContainer:hover .AIChatCopyMessageButton {
	opacity: 1;
}

.AIChatCopyMessageButton {
	opacity: 0;
	transition: opacity 0.3s ease;
	top: 5px;
	right: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	margin: auto 5px;
}

.AIChatCopyMessageButtonIcon {
	font-size: 16px;
	color: #333;
}

.AIChatTypingLoader {
	display: flex;
	align-self: flex-start;
	gap: 5px;
	padding: 10px;
	background-color: #e0e0e0;
	border-radius: 11px;
}

.AIChatTypingLoader span {
	width: 8px;
	height: 8px;
	background-color: #555;
	border-radius: 50%;
	animation: AIChatBlinkAnimation 1.5s infinite ease-in-out;
}

.AIChatTypingLoader span:nth-child(2) {
	animation-delay: 0.2s;
}

.AIChatTypingLoader span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes AIChatBlinkAnimation {
	0% { opacity: 0.3; }
	50% { opacity: 1; }
	100% { opacity: 0.3; }
}

.AIChatPromptContainer {
	display: flex;
	padding: 10px;
	gap: 10px;
}

.AIChatPromptTextbox {
    max-height: 200px;
    overflow-y: auto !important;
}

/*AIEnhance/TextCompletion.razor*/
.AITextInfoAndButtonAlignment {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.AITextLoadingResponse {
    display: flex;
    justify-content: center;
}

.AITextCopyResponseSpacing {
    padding-top: 8px;
}

/*AIEnhance/TextToSpeech.razor*/
.AITTSInfoAndButtonAlignment {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.AITTSLoadingResponse {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.AITTSAudioControl {
    width: 100%;
}

/*AIEnhance/WritingTools.razor*/
.AIWritingToolsContainer {
	height: 100%;
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-left: 1px solid rgba(0, 0, 0, .08);
	padding-left: 10px;
}

.AIWritingToolsHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--kendo-color-base-emphasis, #e0e0e0);
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 11px;
}

.AIWritingToolsLoaderContainer {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}

.AIWritingToolsEditorContainer {
	position: relative;
	overflow-y: auto;
}

.AIWritingToolsUndoButton {
	position: absolute;
	z-index: 3;
	right: 15px;
	top: 1px;
	background-color: var(--kendo-color-app-surface) !important;
}

.AIWritingToolsTextbox {
	max-height: 100%;
	overflow-y: auto !important;
	padding: 25px 0px 10px 0px;
}

.AIWritingToolsPromptButtons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

.AIWritingToolsPromptButtons > button {
	flex: 1 1 0px;
	min-width: fit-content;
}

.AIWritingToolsAddToFieldButton {
	margin: auto 0px 10px 0px;
}

.AIWritingToolsCustomPromptWindowContainer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.AIWritingToolsCustomPromptContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.AIWritingToolsCustomPromptTextbox {
	max-height: 200px;
	overflow-y: auto !important;
}

.AIWritingToolsCustomPromptSubmitButton {
	width: 25%;
	min-width: fit-content;
}

/*Fields/GI_Address.razor*/
.AddressAlignment {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 3px;
}

.AddressContainerSpacing {
    display: flex;
    width: 100%;
    gap: 3px;
}

.AddressChildSpacing {
    flex-grow: 1;
    width: 50%;
}

.AddressMap {
    height: 100%;
    width: 100%;
}

.AddressHalfSize {
    width: 50%;
    float: left;
}

/*Styling for autocomplete dropdown 
    https://developers.google.com/maps/documentation/javascript/place-autocomplete#style-autocomplete
*/
.pac-container { 
    display: flex;
    flex-direction: column;
}

/*Fields/GI_Avatar.razor*/
.AvatarImage {
    position: absolute;
    opacity: 0;
}

.AvatarUploadWindow {
    text-align: center;
}

.AvatarProfilePic {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #111;
}

    .AvatarProfilePic:hover .AvatarContent {
        opacity: 1;
    }

    .AvatarProfilePic:hover .AvatarImageEnabled {
        opacity: .5;
    }

.AvatarImageEnabled, .AvatarImageDisabled {
    object-fit: cover;
    opacity: 1;
    transition: opacity .2s ease-in-out;
    width: 100%;
    height: 100%;
}

.AvatarContent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    cursor: pointer;
}

/*Fields/GI_Card.razor*/
.CardAutoCardSizing {
    width: min-content;
}

.CardEmptyContentText {
    text-align: center;
    background-color: var(--kendo-color-base, #f5f5f5);
    border-radius: var(--kendo-border-radius-md, 0.25rem);
    border-width: 1px;
    border-color: var(--kendo-color-base-subtle, #ebebeb);
    border-style: solid;
    padding: 10px 0px;
    margin: 10px 0px;
}

/*Allows the card deck to wrap instead of having all cards on one line*/
.k-card-deck {
    flex-wrap: wrap;
}

/*Fields/GI_Carousel.razor*/
.CarouselContent{
    position: relative;
}
 
.CarouselContentBasic{
    display: flex;
    justify-content: center;
    background-color: black;
}

/*Fields/GI_ChildList.razor*/
.ChildListColumn {
    vertical-align: middle;
}

.ChildListToolbarExportButtons {
    display: none;
}

/*Fields/GI_ChildList_Settings.razor*/
.ChildListSettingsBottomText {
    text-align: center;
}

.ChildListGridSettingsFields {
    display: flex;
    justify-content: space-between;
}

.ChildListGridSettingsFieldsPhone {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ChildListShowColumns {
    display: flex;
    flex-direction: column;
    padding: 25px;
}

.ChildListShowColumnsLabel {
    width: 12rem;
    display: inline-block;
    padding-bottom: 10px;
}

.ChildListOtherSettings {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 85%;
    padding: 25px;
}

.ChildListOtherSettingsLabel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

.ChildListGridSettingsButtons {
    display: flex;
    justify-content: space-between;
}

/*Fields/GI_Compound.razor*/
.CompoundGridSearch {
	flex: 1;
}

/*Fields/GI_Contact.razor*/
.ContactAlignment {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 3px;
}

.ContactContainerFull {
    display: flex;
    width: 100%;
}

.ContactContainerSpacing {
    display: flex;
    width: 100%;
    gap: 3px;
}

.ContactIconContainer {
    width: 100%;
}

.ContactSMSWindowContent {
    text-align: center;
}

/* enable absolute position for the icon */
.ContactIconContainer {
    position: relative;
}

    /* position icon over textbox */
    .ContactIconContainer .fa-light {
        position: absolute;
        z-index: 1;
        top: 0.5em;
        left: 0.5em;
    }

    /* add space to textbox and masked textbox */
    .ContactIconContainer .k-textbox input {
        padding-left: 2em;
    }

    .ContactIconContainer .k-maskedtextbox input {
        padding-left: 2em;
    }

.ContactChildSpacing {
    flex-grow: 1;
    width: 50%;
}

.ContactFixedLabelContainer {
    width: 100%;
}

.ContactFixedIconContainer {
    position: relative;
}

.ContactFixedIconContainer .fa-light {
    position: absolute;
    z-index: 1;
    top: 2em;
    left: 0.5em;
}

.ContactFixedIconContainer .k-textbox input {
    padding-left: 2em;
}

.ContactFixedIconContainer .k-maskedtextbox input {
    padding-left: 2em;
}

.ContactFloatingContainer {
    display: flex;
    gap: 3px;
    flex-grow: 1;
}

.ContactFloatingIcon {
    border: solid 1px;
    border-radius: 10px;
    margin-top: 1.4em;
    padding: 0.5em;
    cursor: pointer;
}

.ContactAltSendEmailButton {
    margin-top: 1.2em;
    margin-bottom: 0.6em;
}

/*Fields/GI_Dictionary.razor*/
.DictionaryTopContent {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

/*Fields/GI_Document.razor*/
.DocumentEmailPDFWindowContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/*Fields/GI_Frequency.razor*/
.FrequencyContent {
    display: flex;
}

.FrequencyHRdivider {
    margin-left: 2em;
    margin-right: 2em;
}

/*Fields/GI_Gauge.razor*/
.GaugeLabel {
    font-weight: bold;
}

/*Fields/GI_GUID.razor*/
.GUIDComboboxLayout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/*REMOVE AFTER 05-23-2025 BUILD*/
.GUIDMultiSelectLabel {
    width: 12rem;
    display: inline-block;
    padding-bottom: 10px;
}

/*Fields/GI_GUIDLoadOnDemand.razor*/
.GUIDLoadOnDemandComboboxLayout {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/*Fields/GI_NumericRange.razor*/
.NumericRangeContent {
    padding-right: 5px;
}

.NumericRangeLabel {
    margin: auto 5px;
}

.NumericRangeValidation {
    padding-right: 15px;
}

.NumericRangeDisplay {
    display: flex;
    flex-direction: row;
}

/*Fields/GI_PanelBar.razor*/
.PanelBarAdvancedChildContent {
    cursor: pointer;
}

/*Fields/GI_Period.razor*/
.PeriodContent {
    padding-right: 5px;
}

.PeriodLabel {
    margin: auto 5px;
}

.PeriodValidation {
    padding-right: 15px;
}

.PeriodRangeDisplay {
    display: flex;
    flex-direction: row;
}

/*This style is used to make the period component inputs take the whole space instead of leaving a bunch of empty space between the inputs*/
.k-daterangepicker > .k-floating-label-container,
.k-daterangepicker > .k-floating-label-container > span,
.k-daterangepicker > .k-floating-label-container > span > input {
	width: 100%;
}

/*Fields/GI_PowerBI.razor*/
.PowerBIContent {
    position: relative;
    width: 1200px;
    height: 600px;
    margin-bottom: 25px;
}

/*Fields/GI_PublicPage*/
.PublicPageContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.PublicPageButton {
	margin-top: 1rem;
}

/*Fields/GI_QuestionsAndAnswers.razor*/
.QuestionsAndAnswersContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}

/*Fields/GI_ReadonlyContent.razor*/
.ReadonlyContentAccordionContainer{
    position: relative;
    z-index: 0;
}

.ReadonlyContentAccordionContainer h2 i {
    margin-right: 10px;
}
 
.ReadonlyContentAccordionContainer h2 {
    margin: 15px;
    font-size: 20px;
    cursor: default;
}
 
.ReadonlyContentAccordionContainer p {
    line-height: 25px;
    font-size: 18px;
}
 
.ReadonlyContentAccordionSubtitle {
    background-color: var(--kendo-color-base, #f5f5f5);
    border-radius: 10px;
    border: var(--kendo-color-border-alt, rgba(0,0,0,0.16)) 1px solid;
    display: flex;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    z-index: 2;
}

.ReadonlyContentAccordionSubtitle h2, .ReadonlyContentAccordionSubtitle i {
    cursor: pointer;
}
 
.ReadonlyContentAccordionCollapsibleIcons {
    margin: 20px;
    display: flex;
    align-items: center;
}
 
.ReadonlyContentAccordionCollapsedContent {
    display: none;
    height: 0px;
    transition: all 0.3s ease;
    background-color: var(--kendo-color-base, #f5f5f5);
    border-radius: 0 0 10px 10px;
    padding: 40px 35px;
    margin-top: -10px;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
}
 
.ReadonlyContentAccordionCollapsedContent.ReadonlyContentAccordionExpandedContent {
    display: block;
    height: auto;
    padding-bottom: 40px;
}
 
.ReadonlyContentAccordionSubtitle.ReadonlyContentAccordionSubtitleExpanded {
    background-color: var(--kendo-color-base-active, #d8d8d8);
}

.ReadonlyContentIFrame {
    height: 100%;
    width: 100%;
}

/*Fields/GI_RunCalculations.razor*/
.RunCalculationsContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
}

.RunCalculationsRunButton {
    word-break: auto-phrase;
}

/*Fields/GI_Scheduler.razor*/
.SchedulerEvent {
    height: 100%;
    width: 100%;
    padding-right: 8px;
}

.SchedulerAllDayEvent {
    height: 100%;
    width: 100%;
    padding-right: 8px;
}

.SchedulerEventTypeWindowContent {
    display: flex;
    flex-direction: column;
}

/*Fields/GI_Search.razor*/
.SearchLayout {
	display: flex;
	align-items: center;
}

/*Fields/GI_SelectItem.razor*/
.SelectItemContainer {
    display: flex;
    gap: 8px;
}

.SelectItemContainerMobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.SelectItemAvailableContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

.SelectItemAvailableTitle {
    font-weight: bold;
}

.SelectItemAvailableFilterTextbox {
    width: 75%;
}

.SelectItemAvailableItems {
    flex: 1;
    width: 100%;
}

.SelectItemSelectedContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

.SelectItemSelectedTitle {
    font-weight: bold;
}

.SelectItemSelectedFilterTextbox {
    width: 75%;
}

.SelectItemSelectedItems {
    flex: 1;
    width: 100%;
}

.SelectItemSwitchesContainer {
	/*This class is also used by the Multi-Select Switches*/
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.SelectItemSwitchItemContainer {
	/*This class is also used by the Multi-Select Switches/Checkboxes*/
	/*The flex % is overridden in the SelectItem components code*/
	/*To enforce the value here or somewhere else use !important*/
	/*The -px is to account for the gap px value defined above*/
    flex: 0 0 calc(25% - 10px);
    display: flex;
    word-break: auto-phrase;
    gap: 10px;
}

@media only screen and (max-width: 768px) {
	/*This foces there to only be one column so data is more visible*/
	/*The -px is to account for the gap px value defined above*/
    .SelectItemSwitchItemContainer {
        flex: 0 0 calc(100% - 10px) !important;
        display: flex;
        word-break: auto-phrase;
        gap: 10px;
    }
}

.SelectItemAutoCardSizing {
    width: min-content;
}

.SelectItemCardViewContainer {
	margin-bottom: 10px;
}

/*Fields/GI_SignedByOn.razor*/
.SignedByOnContent {
    width: 100%;
}

/*Fields/GI_Spreadsheet.razor*/
.SpreadsheetToolbarAdvToolContainer {
    display: flex;
    gap: 20px;
}

.SpreadsheetToolbarAdvItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.SpreadsheetToolbarAdvSeparator {
    height: -webkit-fill-available !important;
    margin: 0 1em;
}

.SpreadsheetDropZoneOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Ensures it's on top of other content */
    display: flex;
    justify-content: center;
    align-items: center;
    background: color-mix(in srgb, var(--kendo-color-inverse, #3d3d3d) 50%, transparent);
    color: var(--kendo-color-on-inverse, #ffffff);
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* Allows clicks to pass through when hidden */
}

    .SpreadsheetDropZoneOverlay.SpreadsheetDropZoneOverlayVisible {
        opacity: 1;
        pointer-events: auto; /* Makes the drop zone interactive when visible */
    }

.SpreadsheetDropZoneInput {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; 
}

.SpreadsheetDropZoneText {
    text-align: center;
    display: flex;
    flex-direction: column;
    text-shadow: 0px 0px 5px var(--kendo-color-inverse, #3d3d3d);
}

/*Fields/GI_String.razor*/
.StringAlignment {
    display: flex;
}

.StringSMSWindowContent {
	text-align: center;
}

/*Fields/GI_UploadFile.razor*/
.UploadFileDropZone { 
	background-color: var(--kendo-color-base, #f5f5f5);
	border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
	border-style: dashed;
	padding-top: 10px;
	border-width:2px;
	padding-bottom: 10px;
	display: grid;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease-in-out;
}

.UploadFileDropZoneHover{
	background-color: var(--kendo-color-base-hover, #A0ADC5);
}

.UploadFileInput {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.UploadFileThumbnailImage {
    width: auto;
    height: auto;
}

.UploadFileAudioControl {
    width: 100%;
}

.UploadFileOptionsWindowContent {
    text-align: center;
}

.UploadFileImageControls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.UploadFileImageViewer {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 100%;
    width: 100%
}

/*Fields/GI_UploadFile_Import.razor*/
.UploadFileImportUndoLoaderAlignment,
.UploadFileImportLoaderAlignment {
    display: flex;
    justify-content: center;
}

.UploadFileImportUndoContainer,
.UploadFileImportContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.UploadFileImportUndoButtonContainer,
.UploadFileImportButtonContainer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

.UploadFileImportErrorButtonAlignment,
.UploadFileImportSupportButtonAlignment,
.UploadFileImportUndoButtonAlignment,
.UploadFileImportButtonAlignment {
    width: 100%;
}

/*Layout/AccessControl.razor*/
/*AccessControl now uses the SelectItem styles*/
.AccessControlContent {
    width: 100%;
    display: flex;
}

.AccessControlContentLayout {
    width: 50%;
    display: flex;
    flex-direction: column;
}

/*Layout/Banner.razor*/
.BannerContainer {
    position: relative;
}
 
.BannerCloseIcon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    color: #f2f2f2;
}

/*Layout/Bookmarks.razor*/
.BookmarksStaticOption {
	margin: 0 auto;
	font-weight: bold;
}

.BookmarksDeleteAllBookmarksOption {
	color: red;
}

.BookmarksItemLabel {
	width: 100%;
}

/*This removes the whitespace to the right of each menu item*/
.k-menu-link:has(> .BookmarksItemLabel) {
    padding-inline: var(--kendo-spacing-2, 0.5rem);
}

/*This configures the arrow styling for a category*/
.k-menu-link:has(> .BookmarksItemLabel) > .k-menu-expand-arrow {
    /*margin: unset;*/ /*Use this if you're showing the arrow, otherwise it will display outside the menu*/
    display: none; /*Use this to hide the arrow*/
}

/*Layout/Breadcrumbs.razor*/
.BreadcrumbsDefaultStatus {
    background-clip: content-box;
    border-radius: 25px;
    border: 2px solid #73AD21;
    margin-left: 4px;
    padding: 2px;
    line-height: normal;
    font-size: small;
}

/*Layout/CommandBar.razor*/
.CommandBarPosition {
    display: inline-flex;
    align-items: center;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
	position: sticky;
	top: 0;
	z-index: 9999;
    padding: 3px 8px;
    /*Make the command bar slightly transparent/blurred*/
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 70%, transparent);
}

.CommandBarFormName {
    margin-left: 20px;
    font-weight: bold;
    font-size: 17px;
}

.CommandBarContent {
    margin-left: 20px;
    display: flex;
    justify-content: flex-end;
    flex: 1;
    border: none;
}

.CommandBarDelete {
    border: 1px solid darkred !important;
}

/*Layout/Copy.razor*/
.CopyContent {
    text-align: center;
}

/*Layout/DeleteConfirm.razor*/
.DeleteConfirmNotProcessingContainer{
    text-align: center;
}

.DeleteConfirmNotProcessingRecordName {
    margin-top: 0;
    font-weight: bold;
    font-size: medium;
}

/*Style the top banner of the window*/
.DeleteConfirmWindow .k-window-titlebar {
    background-color: darkred;
    color: white;
}

.DeleteConfirmNotProcessingContainer {
	display: flex;
    flex-direction: column;
}

/*Layout/DeletePrompt.razor*/
/*Style the top banner of the window*/
.DeletePromptWindow .k-window-titlebar {
    background-color: darkred;
    color: white;
}

.DeletePromptNotProcessingContainer {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.DeletePromptNotProcessingText {
    margin-bottom: 0;
}
.DeletePromptNotProcessingRecordName {
    margin-top: 0;
    font-weight: bold;
    font-size: medium;
}

/*Layout/Export.razor*/
.ExportContent {
    text-align: center;
}

/*Layout/Feedback.razor*/
.FeedbackHeight {
    height: 200px;
}

.FeedbackHead {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12px;
    gap: 10%;
}

.FeedbackRating {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.FeedbackButtons {
    display: flex;
    justify-content: center;
    gap: 10%;
    padding-top: 12px;
}

/*Layout/Field.razor*/
.FieldContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.FieldLabelContainer {
    display: flex;
    align-items: center;
    gap: 5px;
}

.FieldLabel {
    font-size: 16px;
    color: var(--kendo-color-primary);
}

.FieldContentAlignment {
    display: flex;
    align-items: center;
    gap: 5px;
}

.FieldContentFieldAlignment {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.FieldSubformDisplay {
    flex: 1;
    max-width:100%;
}

/*Layout/FieldGridLayout.razor*/
/*This style is also being used in the FieldSectionLayout and GI_Compound components*/
.FieldGridLayoutItem {
    padding: 10px;
}

/*Layout/FieldSectionLayout.razor & Layout/FieldTileLayout.razor (SHARED STYLES)*/
/*This style is to add a scrollbar when the tile content is too big for the row height*/
.k-tilelayout-item-body {
    overflow: auto; 
}
.FieldTileLayoutTileHeader,
.FieldSectionLayoutTileHeader {
    display: flex;
    align-items: center;
}

.FieldTileLayoutTileHeaderIcon,
.FieldSectionLayoutTileHeaderIcon {
    margin-right: 10px;
}

.FieldTileLayoutTileCloseButton,
.FieldSectionLayoutTileCloseButton {
    margin-left: auto;
}

.FieldTileLayoutLayoutSettingsWindow_TileDescription,
.FieldSectionLayoutLayoutSettingsWindow_TileDescription {
    text-align: center;
}

.FieldTileLayoutLayoutSettingsWindow_TileFieldSet,
.FieldSectionLayoutLayoutSettingsWindow_TileFieldSet {
    padding: 25px;
}

.FieldTileLayoutLayoutSettingsWindow_TileFieldSetContentItem,
.FieldSectionLayoutLayoutSettingsWindow_TileFieldSetContentItem {
    width: 12rem;
    display: inline-block;
    padding-bottom: 10px;
}

.FieldTileLayoutLayoutSettingsWindow_ButtonContainer,
.FieldSectionLayoutLayoutSettingsWindow_ButtonContainer {
    display: flex;
    justify-content: center;
}

/*Layout/FieldSectionLayout.razor*/
.FieldSectionLayoutAccordionContainer {
	position: relative;
    z-index: 0;
}

.FieldSectionLayoutAccordionIcon {
	margin-right: 10px;
	cursor: pointer;
}

.FieldSectionLayoutAccordionIconTitle {
    margin: 15px;
    font-size: 20px;
    cursor: pointer;
}

.FieldSectionLayoutAccordionSubtitle {
	background-color: var(--kendo-color-base, #f5f5f5);
    border-radius: 10px;
    border: var(--kendo-color-border-alt, rgba(0,0,0,0.16)) 1px solid;
    display: flex;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    z-index: 2;
}

.FieldSectionLayoutAccordionCollapsibleIcons {
	margin: 20px;
    display: flex;
    align-items: center;
}

.FieldSectionLayoutAccordionCollapsedContent {
	display: none;
    height: 0px;
    transition: all 0.3s ease;
    background-color: var(--kendo-color-base, #f5f5f5);
    border-radius: 0 0 10px 10px;
    padding: 40px 35px;
    margin-top: -10px;
    margin-bottom: 10px;
    z-index: 1;
    position: relative;
}

.FieldSectionLayoutAccordionCollapsedContent.FieldSectionLayoutAccordionExpandedContent {
    display: block;
    height: auto;
    padding-bottom: 40px;
}

.FieldSectionLayoutAccordionSubtitle.FieldSectionLayoutAccordionSubtitleExpanded {
    background-color: var(--kendo-color-base-active, #d8d8d8);
}

/*Layout/GenericActions.razor*/
.GenericActionsItemText {
    font-weight: normal;
}

/*Layout/GenericSearch.razor*/
.GenericSearchResultsWindowContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.GenericSearchResultsWindowSearchContainer {
    display: flex;
    align-items: center;
    gap: 5px;
}

.GenericSearchTextbox {
    width: 10em;
}

/*Layout/Header.razor*/
.HeaderContainer {
	display: flex;
    align-items: center;
}

/* When there is no logo in header, update the breadcrumbs to fill empty space. */
.HeaderContainer:not(:has(.HeaderLogoContainer)) .HeaderBreadcrumbsContainer {
    flex-basis: 90%;
}

/* When the logo is on right side update the style to remove empty space. */
.HeaderContainer:has(.HeaderLogoContainer.HeaderRightLogoContainer) .HeaderLogoContainer {
    flex-basis: 10%;
}

/* When the logo is on right side update the style to remove empty space. */
.HeaderContainer:has(.HeaderLogoContainer.HeaderRightLogoContainer) .HeaderBreadcrumbsContainer {
    flex-basis: 80%;
}

.HeaderLogoContainer {
	flex-basis: 15%;
}

.HeaderLogo {
    display: block;
    height: 60px;
}

.HeaderBreadcrumbsContainer {
	flex-basis: 75%;
    display: inline-flex;
    gap: 10px;
}

.HeaderAIContainer {
    white-space: nowrap;
    flex: 0 0 auto;
}

.HeaderProfileContainer {
	flex-basis: 5%;
}

/*Layout/ImportChild.razor*/
.ImportChildContent {
    text-align: center;
}

/*
 * ImportChild shares the same styles as UploadFile.
 * Specifically UploadFileDropZone, UploadFileInput, and UploadFileDropZoneHover classes.
*/

/*Layout/InstanceWindow.razor*/
.InstanceWindow > .k-window-content > .CommandBarPosition {
    position: sticky;
    top: 16px; /*This should match the padding size on the window content in the telerik theme*/
    z-index: 9999;
}

.InstanceWindow > .k-window-content {
    padding-top: 0;
	overflow-y: scroll;
}

.InstanceWindowTopSpacer {
    height: 16px; /*This should match the padding size on the window content in the telerik theme*/
    position: sticky;
    top: 0;
    background-color: var(--kendo-color-app-surface, #fbfbfb); /*This should match the window content background color in the telerik theme*/
    z-index: 9999;
}

/*Layout/Loader.razor*/
.LoaderAnimatedContainer {
    display: flex;
    justify-content: center;
}

.LoaderAnimatedDefaultContainer {
    display: flex;
    justify-content: center;
	align-items: center;
	height: 68px;
}

/*Layout/Move.razor*/
.MoveWorkspaceContent {
    display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.MovePeerContent {
    display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.MoveAnywhereContent {
    display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

/*Layout/Notifications.razor*/
.NotificationsType {
    color: #ffffff;
}

.NotificationBadgeContainer {
    position: relative; 
    overflow: visible; 
    display: inline-block;
}

/*Layout/TabBar.razor*/
/*These properties are to enable transition animations for the linear gradient background.*/
/*The initial color values don't matter, they're set in the classes that use them.*/
@property --primaryColor {
    syntax: '<color>';
    initial-value: #2448a5;
    inherits: false;
}

@property --secondaryColor {
    syntax: '<color>';
    initial-value: #4faf37;
    inherits: false;
}

.TabBarAIEnhanceButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 60px;
    color: white;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 20px;
	/*This is to give a gradient background that can animate on hover.*/
	--primaryColor: var(--kendo-color-primary, #2448a5);
    --secondaryColor: var(--kendo-color-secondary, #4faf37);
    background: linear-gradient(145deg, var(--primaryColor), var(--secondaryColor));
    transition: --primaryColor 0.3s, --secondaryColor 0.3s;
}

	/*Only apply styles when there is no text for the AI button.*/
	.TabBarAIEnhanceButton:hover:has(span:only-child) {
		--primaryColor: var(--kendo-color-secondary, #4faf37);
		--secondaryColor: var(--kendo-color-primary, #2448a5);
	}

    .TabBarAIEnhanceButton .TabBarAIEnhanceButtonIcon {
        font-size: 18px;
    }

    .TabBarAIEnhanceButton .TabBarAIEnhanceButtonText {
        opacity: 0;
        transition: all 0.3s ease-out;
        font-size: 0;
    }

    .TabBarAIEnhanceButton:hover .TabBarAIEnhanceButtonText {
        opacity: 1;
        margin-left: 10px;
        font-size: 16px;
    }

/*Layout/Wizard.razor*/
.WizardFinishPopupContainer {
	display: flex;
    flex-direction: column;
    align-items: center;
}

/*Pages/Instance.razor*/
.InstanceIconFromURL {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 13px;
    padding-right: 16px;
    height: 14px;
    width: 14px;
    box-sizing: content-box;
}

.InstanceIconFromClass {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 13px;
    padding-right: 16px;
}

.InstanceItemText {
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.InstanceApplicationChevron {
    margin: auto 0px auto auto;
}

.InstanceItemWithChildren,
.InstanceContainer {
    display: inherit;
    width: -webkit-fill-available;
}

.InstanceAppBarContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    gap: 2rem;
}
 
.InstanceAppBarItem {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 
.InstanceAppBarItem:hover {
    opacity: 0.8;
}
 
.InstanceAppBarIcon {
    font-size: 1.5rem;
}

/*The drawer content class cannot be accessed in the ThemeBuilder, so this is needed*/
.k-drawer-content {
    width: 100%; /*Make the content take up all available space*/
    overflow: visible; /*This is required to make the command bar sticky*/
    min-width: 0; /*This is required to prevent the tab strip control extending past the screen*/
}

/*This is to add indentation to left nav items that are within a category*/
.k-drawer-item.k-level-1 {
    padding-left: 2rem !important;
}

/*Pages/Workspace.razor*/
.WorkspaceTopAlignment {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.WorkspaceBottomAlignment {
	display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
}

.WorkspaceLeftAlignment {
	display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.WorkspaceRightAlignment {
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
}

.WorkspaceJoinWorkspaceContainer {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.37);
    padding: 30px 40px;
    width: 20vw;
    margin: auto;
}

/*Styles specific for mobile size screens*/
@media only screen and (max-width: 768px) {
	.WorkspaceJoinWorkspaceContainer {
		width: 80vw;
	}
}

.WorkspaceJoinWorkspaceTitleContainer {
    text-align: center;
}

.WorkspaceJoinWorkspaceTitle {
    margin: 0;
}

.WorkspaceWorkspacesTitleContainer {
    text-align: center;
}

.WorkspaceWorkspacesTitle {
    margin: 0;
}

.WorkspaceWorkspacesContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/*UserProfile/ChangeMFATargets.razor*/
.ChangeMFATargetsContainer {
	width: 100%;
}

.ChangeMFATargetsSpacing {
	display: flex; 
	align-items: center;
}

.ChangeMFATargetsPasswordLabel {
	width: 35%;
}

.ChangeMFATargetsPasswordBoxButtonContainer {
	width: 65%;
}

.ChangeMFATargetsVerifyContainer {
	margin-left: auto; 
	margin-right: auto;
}

.ChangeMFATargetsEnableMFAContainer {
	display: flex; 
	justify-content: flex-end; 
	align-items: center;
	gap: 5px;
}

.ChangeMFATargetsMFATargetContainer {
	display: inline-flex;
	align-items: center;
	padding: 5px 0px;
	width: 100%;
}

.ChangeMFATargetsMFATargetContainerMask {
	width: 50%;
}

.ChangeMFATargetsMFATargetContainerActions {
	width: 50%;
	display: flex;
	gap: 5px;
}

.ChangeMFATargetsMFATargetDefaultLabel {
	font-weight: bold;
}

.ChangeMFATargetsMFATargetDeleteTargetButton {
	border: 1px solid darkred !important;
}

.ChangeMFATargetsDeleteWindowLabel {
	padding-bottom: 5px;
}

.ChangeMFATargetsDeleteWindowTextBox {
	width: 45%;
}

.ChangeMFATargetsDeleteWindowDeleteButton {
	border: 1px solid darkred !important;
}

/*UserProfile/ChangePassword.razor*/
.ChangePWContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ChangePWAlignment {
	display: flex;
	align-items: center;
}

.ChangePWLabelSpacing {
	width: 30%;
}

/*UserProfile/ChangeSecurityQuestion.razor*/
.ChangeSQContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ChangeSQAlignment {
	display: flex;
	align-items: center;
}

.ChangeSQLabelSpacing {
	width: 30%;
}

/*UserProfile/ChangeUserTopics.razor*/
.ChangeUserTopicsSpacing {
    padding: 4px;
}

/*UserProfile/GetAdditionalMFAInformation.razor*/
.GetAdditionalMFAInformationContainer {
	display: flex; 
	align-items: center;
	padding: 15px 0;
    flex-direction: column;
    gap: 20px;
}

.GetAdditionalMFAInformationSignUpTitleContainer {
	text-align: center;
}

.GetAdditionalMFAInformationSignUpTitle {
	margin: 0;
}

.GetAdditionalMFAInformationTextBox {
    width: 100%;
    height: 2.5rem;
}

.GetAdditionalMFAInformationVerifyButton {
    width: 100%;
}

.GetAdditionalMFAInformationSignInSkipContainer {
    text-align: center;
    font-size: small;
}

.GetAdditionalMFAInformationSignInSkipButton {
    cursor: pointer;
    color: var(--kendo-color-primary, #4A6797);
    font-weight: bold;
}

/*UserProfile/JoinWorkspace.razor*/
.JoinWorkspaceJoinKeyContainer {
    display: flex;
    flex-direction: column;
}

.JoinWorkspaceJoinKeyLabel {
    display: none;
}

.JoinWorkspaceJoinKeyInput { 
    height: 2.5rem;
}

.JoinWorkspaceValidateKeyButton {
    width: 100%;
    margin-top: 20px;
}

.JoinWorkspaceValidatedKeyContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.JoinWorkspacePortalFieldTextbox {
    height: 2.5rem;
}

.JoinWorkspaceMarketingCheckboxContainer {
    display: flex;
    gap: 5px;
}

.JoinWorkspaceJoinButton {
    width: 100%;
    margin-top: 10px;
}

.JoinWorkspaceWorkspacesButtonBlock {
    text-align: center;
    font-size: small;
    padding-top: 20px;
    width: inherit;
    display: block;
    padding-bottom: unset;
}

.JoinWorkspaceWorkspacesButton {
    cursor: pointer;
    color: var(--kendo-color-primary, #4A6797);
    font-weight: bold;
}

/*UserProfile/LanguageSwitcher.razor*/
.LanguageSwitcherContainer {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1100; /* above most content, below modals */
}

.LanguageSwitcherButton {
    padding-inline: 14px;
    height: 40px;
    box-shadow: 0 10px 30px rgba(16,24,40,.16);
}
    
    /*Applied to the button contents*/
    .LanguageSwitcherButton .k-button-text {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .LanguageSwitcherButton .LanguageSwitcherLanguageCode {
        font-size: var(--kendo-font-size-sm, 12px);
        color: var(--kendo-color-subtle, #666666);
        border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08));
        border-radius: var(--kendo-border-radius-lg, 6px);
        padding: 2px 6px;
        /*This is to give emphasis but also blend in when button is hovered*/
        background: color-mix(in srgb, var(--kendo-color-base, #f5f5f5) 15%, transparent); 
    }

.LanguageSwitcherPopup {
    padding: 8px 0px 8px 8px;
    right: 16px;
    width: 220px !important;
}

    .LanguageSwitcherPopup .k-popup {
        border-radius: var(--kendo-border-radius-xxl, 11px);
    }

.LanguageSwitcherPopupHeader {
    padding: 6px 8px 10px;
    font-size: 12px;
    color: var(--kendo-color-subtle, #666666);
}

.LanguageSwitcherPopupList {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 280px;
    overflow: auto;
}

.LanguageSwitcherPopupListItem {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--kendo-border-radius-xxl, 11px);
    cursor: pointer;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    font: inherit;
}

    .LanguageSwitcherPopupListItem:hover, .LanguageSwitcherPopupListItem:focus-visible {
        background: var(--kendo-color-base-hover, #a0adc5);
        outline: none;
    }

    .LanguageSwitcherPopupListItem .LanguageSwitcherPopupListItemEnglishName {
        color: var(--kendo-color-subtle, #666666);
        font-size: var(--kendo-font-size-sm, 12px);
    }

    .LanguageSwitcherPopupListItem .LanguageSwitcherPopupListItemSpacer {
        flex: 1;
    }

    .LanguageSwitcherPopupListItem .LanguageSwitcherPopupListItemCheckmark {
        color: var(--kendo-color-primary, #4A6797);
        visibility: hidden;
    }

    .LanguageSwitcherPopupListItem.LanguageSwitcherPopupListItemCurrentLanguage .LanguageSwitcherPopupListItemCheckmark {
        visibility: visible;
    }

/*UserProfile/MultiFactorAuthentication.razor*/
.MultiFactorAuthenticationContainer {
	display: flex; 
	align-items: center;
    flex-direction: column;
}

.MultiFactorAuthenticationOptionsContainer {
	gap: 5px;
	padding: 5px 0;
}

.MultiFactorAuthenticationCodeLabel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 10px 0px;
}

.MultiFactorAuthenticationCodeContainer {
	gap: 5px;
	padding: 5px 0;
}

.MultiFactorAuthenticationSignupTextbox {
    height: 2.5rem;
}

.MultiFactorAuthenticationSubmitCodeButton {
    width: 100%;
}

.MultiFactorAuthenticationCodeEditButton {
	cursor: pointer;
    color: var(--kendo-color-primary, #4A6797);
    font-weight: bold;
}

.MultiFactorAuthenticationFullContainer {
    width: 100%;
}

.MultiFactorAuthenticationResetPWTextbox {
    height: 2.5rem;
}

.MultiFactorAuthenticationResendCodeButtonContainer {
    text-align: left;
    width: 100%;
    padding-bottom: 20px;
}

.MultiFactorAuthenticationResendButton {
    cursor: pointer;
    color: var(--kendo-color-primary, #4A6797);
    font-weight: bold;
}

.MultiFactorAuthenticationCodeEditButtonContainer {
    text-align: center;
    font-size: small;
    padding-top: 20px;
}

/*UserProfile/ProfileMenu.razor*/
.ProfileMenuIcon {
    width: 1em;
    height: 1em;
    font-size: 16px;
    vertical-align: middle;
}

.ProfileMenuItemText {
    margin-left: 5px;
}

.ProfileMenuHeaderRootItemIcon {
    margin-left: 20px;
}

.InstanceProfileHR {
    margin: 30px auto;
    border: 0;
    height: 1px;
    background: linear-gradient(to left, var(--kendo-color-app-surface, #fff), var(--kendo-color-on-app-surface, #a3a3a3), var(--kendo-color-app-surface, #fff));
    width: 90%;
}

.InstanceProfileContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.InstanceProfileContainerCollapsed {
    justify-content: center;
}

.InstanceProfileUserIcon {
    border-width: 2px;
    transition: all 200ms ease-in-out;
}

.InstanceProfileUserIcon.k-avatar-lg {
    width: 3rem;
    height: 3rem;
    flex-basis: 3rem;
    font-size: large;
}

.InstanceProfileUserIcon.k-avatar-sm {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
    font-size: small;
}

.InstanceProfileUserIcon.k-avatar-lg > .k-avatar-text {
    font-size: large;
}

.InstanceProfileUserIcon.k-avatar-sm > .k-avatar-text {
    font-size: small;
}

.InstanceProfileUsernameContainer {
    display: flex;
    flex-direction: column;
}

.InstanceProfileUsernameName {
    font-weight: bold;
}

.InstanceProfileUsernameInvitationName {
    font-size: smaller;
}

.InstanceProfileMenu {
    margin-left: auto;
}

.InstanceProfileMenuCollapsed {
    position: absolute;
    opacity: 0;
}

/*UserProfile/ProfileSettings.razor*/
.ProfileSettingsWindow {
    z-index: 44444;
}

.ProfileSettingsAppearanceTabContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ProfileSettingsAppearanceTabAlignment {
	display: flex;
    align-items: center;
}

.ProfileSettingsAppearanceTabPosition {
	flex-basis: 50%;
}

.ProfileSettingsWorkspaceSettingsTabContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ProfileSettingsWorkspaceSettingsTabAlignment {
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.ProfileSettingsWorkspaceSettingsTabLeftPosition {
	flex-basis: 50%;
}

.ProfileSettingsWorkspaceSettingsTabRightPosition {
	flex-basis: unset;
}

.ProfileSettingsWorkspaceSettingsTabImageSettings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ProfileSettingsWorkspaceSettingsTabAvatar{
    width: 6rem;
    height: 6rem;
    flex-basis: 6rem;
}

/*UserProfile/Workspaces.razor*/
.WorkspacesPage  {
    width: 90vw;
}

.WorkspacesListContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.WorkspacesGrid {
    padding: 10px;
}

.WorkspacesCardsButtonsContainer {
    display: flex;
}

.WorkspacesCardCursorPointer {
    cursor: pointer;
	border-radius: 15px;
}

.WorkspacesCardCursorDisabled {
    cursor: not-allowed;
	border-radius: 15px;
}

.WorkspacesCardContainer {
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 355px;
    border-radius: 15px;
    border: solid var(--kendo-color-primary, #4A6797) 1px;
    box-shadow: 2px 1px 2px #e3e3e3;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0;
    transition: transform .2s;
}

.WorkspacesCardBanner {
    background: linear-gradient(to bottom, var(--kendo-color-primary, #4A6797), var(--kendo-color-secondary, #5a9f52));
    width: 200px;
    height: 90px;
    margin-top: -35px;
}

.WorkspacesCardIconContainer {
    height: 85px;
    width: 85px;
    border-radius: 50%;
    display: flex;
    box-shadow: 1px 1px 7px #e3e3e3;
    margin-top: -35px;
    background-color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 35px;
}

.WorkspacesCardIconBorder {
    height: 93px;
    width: 93px;
    border-radius: 50%;
    display: inline-block;
    border: 0.5px white solid;
    margin-top: -90px;
}

.WorkspacesCardName {
    font-size: 20px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 15px;
    width: 180px;
    line-height: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.WorkspacesCardNameContainer {
    height: 50px;
}

.WorkspacesCardSeperator {
    width: 120px;
    border-bottom: solid black 1px;
    /* margin-bottom: 5px; */
	margin: 5px 0px;
}

.WorkspacesCardInfo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 80%;
    text-align: left;
    font-weight: bold;
}

    .WorkspacesCardInfo p {
        margin: 0;
        font-size: 14px;
    }

.WorkspacesCardRow {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 40px;
}

	/*Styles the PortalName Container on the default card*/
    .WorkspacesCardRow:last-child {
        margin-top: 15px;
        margin-bottom: 10px;
		width: 100%;
    }

	/*Styles the PortalName <p> on the default card*/
    .WorkspacesCardRow:last-child p {
        text-align: center;
		width: 100%;
		margin: auto 0px;
    }

    .WorkspacesCardRow p {
        line-height: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

	/*Styles the WorkspaceName Container on the default card*/
    .WorkspacesCardRow:nth-child(1) {
        width: 100%;
        display: flex;
        justify-content: center;
    }

	/*Styles the WorkspaceName <p> on the default card*/
    .WorkspacesCardRow:nth-child(1) p {
        text-align: center;
        font-size: 20px;
        line-height: 22px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        height: 45px;
    }

.WorkspacesCardEnterBtn {
    background-color: var(--kendo-color-primary, #4A6797);
    color: white;
    padding: 10px 15px;
    width: 165px;
    border-radius: 20px;
    border: solid var(--kendo-color-primary, #4A6797) 1px;
    transition: all .5s ease;
    cursor: pointer;
    z-index: 1;
}

    .WorkspacesCardEnterBtn:hover {
        background-color: var(--kendo-color-primary-hover, #7e90b0);
    }

.WorkspacesCardIconContainer > img {
    width: 85px;
    height: 85px;
    border-radius: 50%;
}

.WorkspacesCardDisabledMsg {
    color: var(--kendo-color-error, #AF2655);
    line-height: 10px;
    width: 85%;
    font-size: 13px;
    margin-top: 5px;
}

.WorkspacesCardPinnedContainer {
    position: relative;
}

.WorkspacesCardPinned {
    /* Ribbon generator: https://css-generators.com/ribbon-shapes/ */
    --f: .2em; /* control the folded part*/
    --r: .4em; /* control the ribbon shape */
    position: absolute;
    right: 10px;
    top: calc(-1*var(--f));
    padding: 10px;
    background: #ffc000;
    border-right: var(--f) solid #0005;
    border-bottom: var(--r) solid #0000;
    clip-path: polygon(calc(100% - var(--f)) 0,0 0,0 100%,calc(50% - var(--f)/2) calc(100% - var(--r)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) var(--f),100% var(--f));
	font-size: 20px;
    color: #fff;
    z-index: 1;
}

	.WorkspacesCardPinned i {
        margin-top: 5px;
    }

.WorkspacesCardNew {
  --f: .3em; /* control the folded part */
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
  background-color: #ffc000; /* the main color  */
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  z-index: 1;
}

/*The styles below are not component specific and are generally used throughout the application*/
html {
    font-family: var(--kendo-font-family, sans-serif);
	overflow-y: scroll;
}

body{
    margin: 0px !important;
    background-color: var(--kendo-color-app-surface, #fff);
    color: var(--kendo-color-on-app-surface, #F5F5F5);
}

/*Ensures that all <style> tags containing CSS are not visible
Sometimes tags within components might be affected by other CSS styles that make the <style> tag visible.*/
style {
	display: none !important;
}

/*The styles applied to the * icon when a field is required*/
.FieldRequired {
    color: darkred;
    font-weight: bold;
}

/*Grid Row hover styles*/
.ClickableDataRow:hover {
    cursor: pointer !important;
}

/*Grid Refresh button styles*/
.RefreshButton {
    display: flex;
    margin-left: auto;
}

/*Remove vertical scrollbar on Grids - pt.1*/
.k-grid .k-grid-content {
    overflow-y: auto;
}

/*Remove vertical scrollbar on Grids - pt.2*/
.k-grid .k-grid-header,
.k-grid .k-grid-footer {
    padding-right: 0;
}

/*Remove vertical scrollbar on Grids - pt.3*/
.k-grid .k-grid-header-wrap,
.k-grid .k-grid-footer-wrap {
    border-right-width: 0;
}

/*Auto-Postback field styles*/
.AutoPostBackField {
    box-shadow: 0 0 3px #5cbe5a;
}
.AutoPostBackFieldSaving {
    box-shadow: 0 0 3px darkred;
}

/*Validation specific*/
.ValidationMessage {
    color: red;
}

.ValidationError {
    box-shadow: 0 0 3px red;
}

/*Applied to LoaderContainers (for Childlists, Cards, etc.) to prevent the loader styles from overlapping any popup windows*/
.LoaderContainer {
	z-index: 9999 !important;
}

/*Landing Page specific styles*/
/*Configure a solid background with everything center aligned*/
.WorkspacePage,
.IndexPageAAD,
.IndexPageSA {
    background-color: #ffffff; 
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/*Make all <a> (hyperlink) elements within the landing pages use the loaded theme colour*/
.WorkspacePage a,
.IndexPageAAD a,
.IndexPageSA a {
    color: var(--kendo-color-primary, #4A6797);
}

/*Override default styles for Cards only on the Workspace Page - Applicable when using workspace cards*/
.WorkspacePage .k-card-body {
    padding: 0;
}

.WorkspacePage .k-card {
    transition: transform .2s;
}

    .WorkspacePage .k-card:hover {
        transform: scale(1.1);
    }

.WorkspacePage .k-card-deck {
    justify-content: center;
    gap: 20px;
}

/*Properly center the floating labels in inputs on landing pages*/
.WorkspacePage .k-floating-label-container,
.IndexPageAAD .k-floating-label-container,
.IndexPageSA .k-floating-label-container {
    padding-top: 1rem;
}

/*Blazor's error UI Styles*/
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 3rem;
        top: 0.5rem;
    }

/*Blazor's initial website loading UI Styles*/
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }