/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/index.css ***!
  \*****************************************************************/
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/habits2/habits2.css ***!
  \***************************************************************************/
:root {
	--theme1-color1: #8ecae6;
	--theme1-color2: #219ebc;
	--theme1-color3: #023047;
	--theme1-color4: #ffb703;
	--theme1-color5: #fb8500;
	--theme1-font-background: white;
	--theme1-font-foreground: black;

	--theme2-color1: red;
	--theme2-color2: orange;
	--theme2-color3: cyan;
	--theme2-color4: white;
	--theme2-color5: black;
	--theme2-font-background: white;
	--theme2-font-foreground: black;

	--topbar-y: 10px;
	--topbar-margin-top: 10px;
	--topbar-margin-bottom: 10px;
	--topbar-height-title: 50px;
	--topbar-height-actions: 50px;
	--scoreboard-height: calc(var(--topbar-margin-top) + var(--topbar-margin-bottom) + var(--topbar-height-title) + var(--topbar-height-actions));
	--scoreboard-width: 200px;
	--spacer-height: calc(var(--topbar-margin-top) + var(--topbar-height-title) + var(--topbar-height-actions) + var(--topbar-y));
}

.habits2-theme1-root {
	background-color: var(--theme1-color1);
}

.habits2-theme1-topBarRoot {
	top: var(--topbar-y);
	position: fixed;
	width: 100%;
}


.habits2-theme1-topBarTitle, .habits2-theme2-topBarTitle {
	align-items: center;
	width: 100%;
	height: var(--topbar-height-title);
	display: flex;
	flex-direction: row;
	font-family: Russo One, Arial, 'Courier New', Courier, monospace;
	font-size: 1.3rem;
	margin-top: var(--topbar-margin-top); 
	padding-left: 5px;
}

.habits2-theme1-topBarTitle {
	background-color: var(--theme1-color2);
}

.habits2-theme2-topBarTitle {
	background-color: var(--theme2-color2);
}


.habits2-theme1-topBarActions, .habits2-theme2-topBarActions {
	width: 100%;
	height: var(--topbar-height-actions);
	display: flex;
	flex-direction: row;
	margin-bottom: var(--topbar-margin-bottom); 
	align-items: center;
	padding-left: 5px;
}

.habits2-theme1-topBarActions {
	background-color: var(--theme1-color3);
}

.habits2-theme2-topBarActions {
	background-color: var(--theme2-color3);
}


.habits2-theme1-scoreboardRoot, .habits2-theme2-scoreboardRoot {
	background-color: var(--theme1-color4);
	position: fixed;
	right: 0px;
	top: 0px;
	width: var(--scoreboard-width);
	height: var(--scoreboard-height);
	margin-right: 20px;
	border-radius: 10px;
	top: var(--topbar-y);
}


.habits2-theme1-scrollViewRoot, .habits2-theme2-scrollViewRoot {
	background-color: "red";
	overflow-y: scroll;
	width: 100%;
}


.habits2-scrollViewSpacer {
	height: var(--spacer-height);
	width: 100%;
}

.habits2-scrollViewBody {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.habits2-theme1-taskEditorRoot, .habits2-theme2-taskEditorRoot {
	width: 100%;
	height: 44px;

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
}

.habits2-theme1-taskEditorRootOpening, .habits2-theme2-taskEditorRootOpening {
	width: 100%;
	height: 44px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.habits2-theme1-taskLine, .habits2-theme2-taskLine {
	background-color: var(--theme1-font-background);
	color: var(--theme1-font-foreground);
	border-radius: 7;
	margin: 4px;
	margin-left: 10px;
	width: calc(100% - 16px);
	height: 40px;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	cursor: pointer;
	padding-left: 5px;
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.habits2-theme1-taskLine:hover, .habits-theme2-taskLine:hover {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;
	background: linear-gradient(90deg, var(--theme1-color5), white);
	border-width: 4px;
	border-color: var(--theme1-font-foreground);
	border-style: solid;
	margin-left: 5px;
	padding-left: 10px;
}

.habits-theme2-taskLine:hover {
	background: linear-gradient(90deg, var(--theme2-color5), white);
	border-color: var(--theme2-font-foreground);
}

.habits2-theme1-taskEditorBody, .habits2-theme2-taskEditorBody {
	background-color: var(--theme1-font-background);
	color: var(--theme1-font-foreground);
	border-radius: 7;
	margin: 4px;
	width: calc(100% - 16px);
	height: 40px;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;
	background: linear-gradient(90deg, var(--theme1-color5), white);
	border-width: 4px;
	border-color: var(--theme1-font-foreground);
	border-style: solid;
	margin-left: 5px;
	padding-left: 10px;
}

.habits2-theme2-taskEditorBody {
	color: var(--theme2-color5-fontforeground);
	background: linear-gradient(90deg, var(--theme2-color5), white);
	border-color: var(--theme2-font-foreground);
}

.habits2-theme1-taskNameInput, .habits2-theme2-taskNameInput {
	background: linear-gradient(90deg, var(--theme1-color5), white);
	color: var(--theme1-font-foreground);
	width: calc(100% - 16px);
	height: 40px;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;

	border-width: 4px;
	border-color: var(--theme1-font-foreground);
	border-style: solid;
	margin-left: 5px;
	padding-left: 10px;
}

.habits2-theme2-taskNameInput {
	background: linear-gradient(90deg, var(--theme2-color5), white);
}

.habits2-theme1-actionButton, .habits2-theme2-actionButton {
	background-color: var(--theme1-color4);
	color: var(--theme1-font-foreground);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	height: 30px;
	font-size: 0.9rem;
	cursor: pointer;
	padding-left: 3px;
	padding-right: 3px;
	margin-left: 5px;
	margin-right: 5px;
	width: 75px;
}

.habits2-theme2-actionButton {
	background-color: var(--theme2-color4);
	color: var(--theme2-font-foreground)
}

.habits2-theme1-toggleButton, .habits2-theme2-toggleButton, .habits2-theme1-toggleButtonNotSelected, .habits2-theme2-toggleButtonNotSelected {
	background-color: var(--theme1-color4);
	color: var(--theme1-font-foreground);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	height: 30px;
	font-size: 0.9rem;
	cursor: pointer;
	padding-left: 3px;
	padding-right: 3px;
	margin-left: 5px;
	margin-right: 5px;
	width: 75px;
}

.habits2-theme1-toggleButton {
	background-color: var(--theme1-color5);
	color: var(--theme1-font-foreground)
}

.habits2-theme2-toggleButton {
	background-color: var(--theme2-color4);
	color: var(--theme2-font-foreground)
}

.habits2-theme2-toggleButtonNotSelected {
	background-color: var(--theme2-color4);
	color: var(--theme2-font-foreground)
}

.habits2-theme1-actionButton:hover {
	background-color: var(--theme1-color5);
	color: var(--theme1-font-foreground)
}

.habits2-theme2-actionButton:hover {
	background-color: var(--theme2-color5);
	color: var(--theme2-font-foreground)
}

.habits2-theme1-actionButton:active {
	background-color: var(--theme1-color5);
	color: var(--theme1-font-foreground)
}

.habits2-theme2-actionButton:active {
	background-color: var(--theme2-color5);
	color: var(--theme2-font-foreground)
}

.habits2-theme1-taskNest, .habits2-theme2-taskNest {
	background-color: white;	
	margin-left: 30px;
	margin-right: 10px;
	border-width: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-style: solid;
	padding: 10px;
}

.habits2-theme1-editLabel, .habits2-theme2-editLabel{
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 0.8rem;
}

.habits2-metrics-predictions {
	display: flex;
	flex-direction: row;
}

.habits2-theme1-metricButton, .habits2-theme2-metricButton {
	background-color: var(--theme1-color4);
	color: var(--theme1-font-foreground);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	height: 30px;
	font-size: 0.9rem;
	cursor: pointer;
	padding-left: 3px;
	padding-right: 3px;
	margin-left: 5px;
	margin-right: 5px;
	width: 75px;
}

.habits2-theme2-metricButton {
	background-color: var(--theme2-color4);
	color: var(--theme2-font-foreground)
}

.habits2-metrics-recordList {
	display: flex;
	flex-wrap: wrap;
}
/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/website.css ***!
  \***********************************************************************/
:root {
    --website-theme1-background: #333333;
	--website-theme1-color1: #8ecae6;
	--website-theme1-color2: #219ebc;
	--website-theme1-color3: #023047;
	--website-theme1-color4: #ffb703;
	--website-theme1-color5: #fb8500;
	--website-theme1-font-background: white;
	--website-theme1-font-foreground: black;


    --website-theme2-background: #333333;
	--website-theme2-color1: #8ecae6;
	--website-theme2-color2: #219ebc;
	--website-theme2-color3: #023047;
	--website-theme2-color4: #ffb703;
	--website-theme2-color5: #fb8500;
	--website-theme2-font-background: white;
	--website-theme2-font-foreground: black;

    --website-titleFontFamily: 'Roboto', sans-serif;
    --website-h3FontSize: 1.50rem;

    --website-paragraphFontFamily: 'Georgia', serif;
}

.website-theme1-background, .website-theme2-background {
    background-color: var(--website-theme1-background);
}

.website-theme2-background {
    background-color: var(--website-theme2-background);
}

.website-theme1-devToolsStrip, .website-theme2-devToolsStrip {
    background-color: var(--website-theme1-background);
    margin: 10px;
}

.website-theme1-devToolsStrip a, .website-theme2-devToolsStrip a {
    color: var(--website-theme1-color5);
    font-family: var(--website-h3FontFamily);
    font-size: var(--website-h3FontSize);
    padding-right: 10px;
}

.website-theme1-popupRoot, .website-theme2-popupRoot {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it stays on top of other elements */
}

.website-theme1-popupBody, .website-theme2-popupBody {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1001; /* Ensure it stays on top of the overlay */
}

.website-theme2-popupBody {
   background-color: var(--website-theme2-background);
}

.website-theme1-root, .website-theme2-root {
    background-color: var(--website-theme1-background);
    display: flex;
    flex-direction: column;
}

.website-theme2-root {
    background-color: var(--website-theme2-background);
}

.website-theme1-scrollBody, .website-theme2-scrollBody {
    background-color: var(--website-theme1-background);
    flex-grow: 1;
    overflow: auto;
}

.website-theme2-scrollBody {
    background-color: var(--website-theme2-background);
}

.website-theme1-searchRoot, .website-theme2-searchRoot {
    background-color: white; 
    border: 1px solid black; /* 1px width, solid style, black color */
    padding: 10px; /* Optional: Add some padding inside the border */
    margin: 10px; /* Optional: Add some margin outside the border */
}

.website-theme1-searchBody, .website-theme2-searchBody {
    display: flex;
    flex-direction: row; 
    justify-content: flex-start;
    align-items: center;
}

.website-theme1-searchInput, .website-theme2-searchInput {
    border: none; /* Remove the border */
    outline: none; /* Remove the outline */
    padding: 5px; /* Optional: Add some padding */
    margin-left: 5px; /* Optional: Add some space between the icon and the input */
    flex-grow: 1; /* Optional: Allow the input to grow */
}

.website-theme1-titleBarMenuButton, .website-theme2-titleBarMenuButton {
    width: 40px;
    height: 40px; 
}

.website-theme1-topBarRoot {
	top: var(--topbar-y);
	position: fixed;
	width: 100%;
}

.website-theme1-topBarTitle, .website-theme2-topBarTitle {
	align-items: center;
	background-color: var(--theme1-color2);
	width: 100%;
	height: var(--topbar-height-title);
	display: flex;
	flex-direction: row;
	font-family: Russo One, Arial, 'Courier New', Courier, monospace;
	font-size: 1.3rem;
	padding-left: 5px;
    position: fixed;
    z-index: 1000;
}

.website-theme2-topBarTitle {
	background-color: var(--theme2-color2);
}


.button-like {
    display: inline-block; /* Make the div behave like an inline element */
    padding: 10px 20px; /* Add padding for a button-like appearance */
    background-color: #ffffff; /* Button background color */
    color: #000000; /* Button text color */
    border: 2px solid #000000; /* Simple black border */
    border-radius: 4px; /* Rounded corners */
    text-align: center; /* Center the text */
    cursor: pointer; /* Change cursor to pointer */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Font weight */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and text color */
}

.button-like:hover {
    background-color: #f0f0f0; /* Light grey background color on hover */
    color: #000000; /* Text color on hover */
}

.button-like:active {
    background-color: #e0e0e0; /* Slightly darker grey background color on active */
    color: #000000; /* Text color on active */
}

.combo2 {
	position: relative;
}

.combo2Text {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 3px 3px;
	border: 1px solid #888;
	border-radius: 3px;
	background-color: white;
	height: 24px;
	box-sizing: border-box;
	width: 100%;
	font-size: 12px;
}

.combo2Item {
	display: flex;
	align-items: left;
	padding: 8px;
	cursor: pointer;
	background-color: transparent;
	/*border-bottom: vIndex < newValueSet.length - 1 ? '1px solid #eee' : 'none';*/
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.combo2Item:hover {
	background-color: #f9f9f9;
}

.combo2ItemSelected {
	background-color: '#f0f0f0';
	/* border-bottom: vIndex < newValueSet.length - 1 ? '1px solid #eee' : 'none'; */
	font-size: 14px;
}

.combo2List {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	width: max-content;
	border: 1px solid #ccc;
	border-radius: 0 0 4px 4px;
	background-color: white;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	max-height: 200px;
	/*min-height: 200px;*/
	overflow-y: auto;
	box-sizing: border-box;
	z-index: 10;
}

   

.image-container {
    display: inline-block; /* Ensure the container fits the image size */
}

/* Initial image styles */
.image-container img {
    width: 100px;
    height: 100px;
    transition: transform 0.1s ease-in-out; /* Smooth transition */
}

/* Hover effect */
.image-container:hover img {
    transform: scale(1.3); /* Scale the image to 110% */
}

.minimum-components {
    display: flex;
    flex-direction: row;
}

.old-input-root {
    width: 100%;
}

.old-input-select {
    width: 100%;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it stays on top of other elements */
}

.popup-content {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1001; /* Ensure it stays on top of the overlay */
}

.simpleLineEdit {
    width: 100%;
}

.topScrollBumper {
    height: var(--topbar-height-title);
}


/*!**************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/css/lewismanor.css ***!
  \**************************************************************************/
:root {
	--lewismanor-color1: #8ecae6;
	--lewismanor-color2: #219ebc;
	--lewismanor-color3: #023047;
	--lewismanor-color4: #ffb703;
	--lewismanor-color5: #fb8500;
	--lewismanor-font-background: white;
	--lewismanor-font-foreground: black;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

	background-color: "#333333";
}

  
code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
}

.mode-button {
	display: flex;
	flex-direction: column;
	padding: 2px;
}

.mode-button-button {
	display: flex;
	align-items: center;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-size: 30px;
	justify-content: center;
	width: 90px;
	height: 90px;
	margin-left: 3px;
	margin-right: 3px;
}

.mode-button-indicator {
	width: 90px;
	height: 5px;
	border-radius: 2.5px;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 2px;
}

.lewismanor-h1 {
	font-size: 1.5rem;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.lewismanor-button-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}
   
.app-bar-spacer {
	height: 20px;
	width: 100%;
}

.habits-line {
    background-color: lightgray;
    color: darkslategray;
    display: flex;
    flex-direction: row;
    font-size: 1.2rem;
	justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 3px;
}

.habits-line:focus-within {
    background-color: darkorange;
    color: white;
    display: flex;
    flex-direction: row;
    font-size: 1.2rem;
    font-weight: bold;
	justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 3px;
}

.habits-line .habits-line-button {
    visibility: hidden;
}

.habits-line:focus-within .habits-line-button {
    visibility: visible;
}

.bigcheck, .habits-checkbox {
	width: 30px;
	height: 30px;
}

.habits-checkbox-text {
	align-items: center;
	display: flex;
	font-size: 1rem;
	justify-content: flex-start;
	margin-left: 5px;
}

.scanner-root {
	display: flex;
	flex-direction: column;
	background-color: black;
	width: 100%;
	height: calc(100vh - 60px);
}

.scanner-button-bar {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background: linear-gradient(#fff, #aaa);
	width: 100%;
	height: 120px;
}

.two-column-parent {
    display: flex;
    flex-direction: row;
}

.two-column-child {
    width: 50%;
}

.scanner-button {
	display: flex;
	align-items: center;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-size: 30px;
	justify-content: center;
	width: 90px;
	height: 90px;
	margin-left: 3px;
	margin-right: 3px;
}

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

.camera-column-line {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.camera-name {
	color: white;
	font-size: 24px;
	text-shadow: 1px 1px 2px black, 0 0 25px orange, 0 0 5px darkorange;
}

.camera-status-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 75px;
	margin-top: 10px;
	width: 150px;
	height: 150px;
}

.camera-ready-dot {
	border-radius: 45px;
	width: 90px;
	height: 90px;
}

.camera-property-name {
	color: white;
	font-size: 24px;
	margin-top: 20px;
	margin-right: 5px;
	width: 50%;
	text-align: right;
}

.camera-property-value {
	width: 50%;
	margin-top: 20px;
	background-color: #222222;
	border-radius: 10px;
	border-style: none;
	color: white;
	font-size: 24px;
	margin-right: 20px;
	padding: 5px;
}

.camera-property-value:focus-within {
	background-color: white;
	border: 0;
	border-color: transparent;
	border-radius: 10px;
	border-style: none;
	color: black;
	font-size: 24px;
	margin-top: 20px;
	margin-right: 20px;
	outline: 0;
	padding: 5px;
	width: 50%;
}

.camera-preview {
	border-radius: 8px;
	margin-left: auto;
	margin-right: auto;
	max-width: 40%;
	height: auto;
}

.line-edit {
	margin-top: 20px;
	background-color: #222222;
	border-radius: 10px;
	border-style: none;
	color: white;
	font-size: 24px;
	margin-right: 20px;
	padding: 5px;
}

.line-edit:focus-within {
	background-color: white;
	border: 0;
	border-color: transparent;
	border-radius: 10px;
	border-style: none;
	color: black;
	font-size: 24px;
	margin-top: 20px;
	margin-right: 20px;
	outline: 0;
	padding: 5px;
}

.scanner-editor {
	background: linear-gradient(white, #aaaaaa);
	margin: 20px;
	border-radius: 5px;
	padding: 10px;
}

.master-text-field-root {
	margin-top: 20px;
}

.feedback-entry-root {
	background: linear-gradient(white, #aaaaaa);
	border-radius: 2px;
	display: flex;
	flex-direction: row;
	padding: 10px;
}

.feedback-entry-img {
	height: 100px;
	object-fit: contain;
	width: 300px;
}

.feedback-entry-props {
	display: flex;
	flex-direction: column;
}

.feedback-entry-prop {
	color: black;
}

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

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

.sub-editor-item {
	padding: 4px;
	background: purple;
}

.sub-editor-root {
	padding: 20px;
	background: orange;
	border-radius: 10px; 
}

.text-list-title {
	align-items: center;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	width: 100%;
}

.text-list-title-text {
	font-size: x-small;
	font-weight: bolder;
	color: black;
	background-color: darkorange;
	border-radius: 4px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
}


.text-list-expanded {
	align-items: center;
	border-radius: 5px;
	border-color: grey;
	border-width: 2px;
	justify-content: center;
	overflow-x: auto;
	overflow-y: scroll;
	width: 100%;
}

.text-list-select-body {
	width: 100%;	
}

.text-list-item {
	align-items: center;
	background-color: white;
	color: black;
	cursor: pointer;
	display: flex;
	height: 50px;
	justify-content: center;
	width: 100%;
}

.text-list-item:hover {
	align-items: center;
	background-color: orangered;
	color: black;
	cursor: pointer;
	display: flex;
	height: 50px;
	justify-content: center;
	width: 100%;
}

.text-list-item-current {
	align-items: center;
	background-color: darkorange;
	color: black;
	cursor: pointer;
	display: flex;
	height: 50px;
	justify-content: center;
	width: 100%;
}

.text-list-item {
	align-items: center;
	background-color: white;
	color: black;
	cursor: pointer;
	display: flex;
	height: 50px;
	justify-content: center;
	width: 100%;
}


.filter-row {
	width: 100%;
}

.filter-row:focus-within {
	background-color: purple;
	width: 100%;
}

.filter-row-input {
	border: 0;
	border-width: 0px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
	margin-top: 10px;
	outline: none;
	width: 100%;
}

.max-width {
	width: 100%;
}

.icon-left-decoration {
	margin: 10px;
}

.component-background {
	background: linear-gradient(#888, #558);
	border-radius: 5px;	
}

.component-background:focus-within {
	background: linear-gradient(#fff, #888);
	border-radius: 5px;	
}

.habits-todo {
	width: 100%;
}

.habits-todo-checkbox {
	align-self: center;
}

.habits-todo-row {
	display: grid;
	grid-template-columns: 60px auto;

}

.habits-todo-row:hover {
	background-color: #eeeeee;
}

.landing-page-root {
	background-color: #333333;
	height: 100vh;
	overflow-y: scroll;
	width: 100%;
}

.landing-page-body {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.landing-page-tile {
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: auto;
	padding: 20px;
	margin: 20px;
	width: 260px;
}

.landing-page-child {
	width: 250px;
	height: 100px;
}

.landing-page-tile:hover {
	background-color: #666666;
}

.landing-page-tile-entry {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}

.landing-page-tile-image {
	width: 300px;
	height: 300px;
}

.landing-page-tile-image {
	width: 300px;
	height: 300px;
}

.landing-page-tile-title {
	color: white;
	font-family: Russo One, Arial, 'Courier New', Courier, monospace;
	font-size: 1.2rem;
	padding-top: 20px;
	padding-bottom: 5px;
}

.landing-page-tile-text {
	color: white;
	font-family: 'Times New Roman', Times, serif;
	overflow-wrap: break-word;
	font-size: 0.80rem;
	margin-bottom: 10px;
}

.landing-page-tile-h2 {
	color: white;
	font-family: Russo One, Arial, 'Courier New', Courier, monospace;
	font-size: 0.75rem;
	padding-top: 10px;
}

.landing-page-tile-input {
	font-size: 0.75rem;
	padding-top: 10px;
	width: 90%;
}


/* Arrow Styles */
:root {
	--arrowcolor: yellow;
	--arrowsize: 20px;
	--arrowsizehover: 25px;

	--toolbarheight: 40px;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: var(--arrowsize) solid transparent;
	border-bottom: var(--arrowsize) solid transparent; 
	
	border-right: var(--arrowsize) solid var(--arrowcolor);
	cursor: pointer;
}           

.arrow-left:hover {
	width: 0; 
	height: 0; 
	border-top: var(--arrowsizehover) solid transparent;
	border-bottom: var(--arrowsizehover) solid transparent; 
	
	border-right: var(--arrowsizehover) solid var(--arrowcolor);
}           

.arrow-left:active {
	width: 0; 
	height: 0; 
	border-top: var(--arrowsize) solid transparent;
	border-bottom: var(--arrowsize) solid transparent; 
	
	border-right: var(--arrowsize) solid var(--arrowcolor);
} 

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: var(--arrowsize) solid transparent;
	border-bottom: var(--arrowsize) solid transparent; 
	
	border-left: var(--arrowsize) solid var(--arrowcolor);
	cursor: pointer;
}           

.arrow-right:hover {
	width: 0; 
	height: 0; 
	border-top: var(--arrowsizehover) solid transparent;
	border-bottom: var(--arrowsizehover) solid transparent; 
	
	border-left: var(--arrowsizehover) solid var(--arrowcolor);
}           

.arrow-right:active {
	width: 0; 
	height: 0; 
	border-top: var(--arrowsize) solid transparent;
	border-bottom: var(--arrowsize) solid transparent; 
	
	border-left: var(--arrowsize) solid var(--arrowcolor);
} 

.arrow-root {
	align-items: center;
	display: flex;
	justify-content: center;	
}

.arrow-root-sample {
	width: 100px;
	height: 200px;
	background: purple;
}

/* ButtonBar Styles */

.button-bar-root {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background: linear-gradient(#fff, #aaa);
	width: 100%;
	height: 120px;
	overflow-x: scroll;
}

.button-bar-body {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background: linear-gradient(#fff, #aaa);
	width: 100%;
	height: 120px;
}


/* ComboBox Styles */

.combobox-deluxe-root {
	display: flex;
	flex-direction: column;
}

.combobox-internal-select {
	width: 100%;
}

.combobox-label-root {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	font-size: 0.85rem;
}

.combobox-root {
	width: 100%;
}

.combobox-root-custom {
	margin-left: 20px;
	margin-right: 20px;
	width: calc(100% - 40px);
}

.combobox-title {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	font-size: 0.5rem;
}

/* CycleControls Styles */

.cyclecontrol-arrow {
	width: 30px;
}

.cyclecontrol-root {
	display: flex;
	flex-direction: row;
	overflow-x: hidden;
	overflow-y: hidden;
	border-radius: 30px;
}

.editablelabel-root {
	background: transparent;
}

.editablelabel-text {
	background: transparent;
	cursor: text;
	font-weight: bold;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	outline: none;
	border-style: none;
}

.page-root {
	background-color: var(--lewismanor-color1);
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 500px;
}

.page-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.page-title-text {
	align-items: center;
	font-family: Russo One, Arial, 'Courier New', Courier, monospace;
	font-size: 1.3rem;
	padding-left: 5px;
}

.page-body {
	background-color: white;
	box-shadow: 10px 10px;
	margin: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
}

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

.propertyValueEditor-root {
	display: flex;
	flex-direction: row;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.propertyValueEditor-name {
	border: none;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-weight: bold;
	min-width: 10px;
	max-width: 200px;
	outline-width: 0;
	outline: none;
	text-align: right;
}

.propertyValueEditor-value {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.simpleMultiLineEdit-root {
	align-items: stretch;
	background: black;
	display: flex;
	justify-content: center;
	height: 100px;
	width: 100%;
}

.simpleMultiLineEdit-input {
	margin-left: 10px;
	margin-right: 10px;
	width: 100%;
	white-space: pre-wrap;
}


/* ToolBar Styles */
.toolbar-label-divider {
	border-left: 6px solid green;
	height: var(--toolbarheight);
	margin-top: 2px;
	margin-bottom: 2px;
	width: 10px;
	padding-left: 20px;
	padding-right: 20px;
}

.toolbar-label-root {
	padding-left: 20px;
	padding-right: 20px;
}

.toolbar-root { 
	align-items: center;
	display: inline-flex;
	flex-direction: row;
	height: var(--toolbarheight);
	border-radius: calc(var(--toolbarheight) / 2);
	background-color: white;
	border-width: 4px;
	border-style: solid;
	justify-content: space-evenly;
	width: fit-content;
}

/*!*******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/version-browser/version-browser.css ***!
  \*******************************************************************************************/
.versionBrowser-body {
    align-items: center;
    border-color: #333333;
    border-radius: 5px;
    border-style: solid;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    margin: 5px;
    justify-content: space-between;
    min-height: 50px;
}

.versionBrowser-project {
    margin-left: 10px;
    padding-left: 10px;
    width: 300;
}

.versionBrowser-projectAndVersion {
    align-items: center;
    display: flex; 
    flex-direction: row;
    justify-content: flex-start;
}

.versionBrowser-root {
    margin: 5px;
    padding: 5px;
}

.versionBrowser-version {
    width: 100px;
}

/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/cafe90s/cafe90s.css ***!
  \***************************************************************************/
:root {
    --webchat-theme1-background: #dbe8e1;
	--webchat-theme1-color1: #151B25;
	--webchat-theme1-color2: #034687;
	--webchat-theme1-color3: #e10032;
	--webchat-theme1-color4: #ffb703;

    --webchat-theme2-background: #3f3f3f;
	--webchat-theme2-color1: #998f8c;
	--webchat-theme2-color2: #ff4323;
	--webchat-theme2-color3: #e10032;
	--webchat-theme2-color4: #ffb703;

    --webchat-titleFontFamily: 'Roboto', sans-serif;
    --webchat-h3FontSize: 1.50rem;

    --webchat-roomTitleHeight: 54px;
    --webchat-roomTitleHeight2: 80px;
    --webchat-postControlsHeight: 300px;

    --webchat-paragraphFontFamily: 'Georgia', serif;

	--webchat-postControls-wide: 600px;
}

body.theme1, body.theme2 {
	background-color: var(--webchat-theme1-background);
    margin: 0;
    font-family: var(--webchat-titleFontFamily);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.theme2 {
	background-color: var(--webchat-theme2-background);
}

.roomTitleBarBumper {
	height: var(--webchat-roomTitleHeight2);
}

.postControlsBarBumper {
	background-color: transparent;
	height: var(--webchat-postControlsHeight);
}

.webchat-boringPage {
	display: flex;
	flex-direction: column;
	height: 290px;
	width: 100%;
	word-wrap: break-word;
}

.webchat-boringPage p{
	color: white;
	font-family: var(--webchat-paragraphFontFamily);
	font-size: 1.0rem;
}

.webchat-theme1-bottomTab, .webchat-theme2-bottomTab {
    position: fixed; /* Fix the div at a specific position */
    bottom: 0; /* Align it to the bottom */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Adjust the position to center it */
    background-color: #333333; /* Background color */
    color: #ffffff; /* Text color */
    padding: 10px 20px; /* Add padding */
    border-radius: 8px 8px 0 0; /* Rounded corners at the top */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow for depth */
    transition: bottom 0.3s ease; /* Smooth transition for opening and closing */
    z-index: 1000; /* Ensure it stays on top of other elements */
    cursor: pointer; /* Change cursor to pointer */	
}

.webchat-theme1-bottomTab.open, .webchat-theme2-bottomTab.open {
    bottom: 300px; /* Align it to the bottom */
}

/* Drawer styles */
.webchat-theme1-bottomTabDrawer, .webchat-theme2-bottomTabDrawer {
    position: fixed;
    bottom: -100%; /* Initially hidden */
    left: 0;
    width: 100%;
    height: 300px; /* Height of the drawer */
    background-color: var(--webchat-theme1-color2);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    transition: bottom 0.3s ease; /* Smooth transition for opening and closing */
    z-index: 999; /* Ensure it stays on top of other elements */
}

.webchat-theme2-bottomTabDrawer {
    background-color: var(--webchat-theme2-color2);
}

.webchat-theme1-bottomTabDrawer.open, .webchat-theme2-bottomTabDrawer.open {
    bottom: 0; /* Slide up to the bottom of the viewport */
}	

.webchat-cafeRoot {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.webchat-edition {
	font-family: var(--webchat-titleFontFamily);
	font-size: 1.0rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 900;
}

.webchat-errorMessage {
    background-color: var(--website-theme1-color3);
    color: var(--website-theme1-color5);
    font-family: var(--website-h3FontFamily);
    font-size: var(--website-h3FontSize);
    max-width: 400px;
    padding: 10px;
}

.webchat-errorMessageRoot {
    background-color: transparent;
    display: flex;
    justify-content: center;
    width: 100%;
}


.webchat-notes {
	font-family: var(--webchat-h3FontSize);
	font-size: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 900;
	margin: 20px;
}

.webchat-featureAndPMControls {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 600px;
	height: 30px;
	background-color: var(--webchat-theme1-color1);
}

.webchat-features {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-left: 10px;
	height: 30px;
}

.webchat-featuresAndPMGo {
	align-items: center;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	width: 50px;
	height: 26px;
	border-width: 2px;
	border-style: solid;
	margin-left: 3px;
}

.webchat-fieldEditorHolder {
	margin-bottom: 10px;
	width: 100%;
}

.webchat-fieldTitle {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	font-size: 0.9rem;
	margin-top: 3px;
}

.webchat-theme1-handleText, .webchat-theme2-handleText {
    font-family:'Times New Roman', Times, serif;
	color: var(--webchat-theme1-color1);
}

.webchat-theme2-handleText {
	color: var(--webchat-theme2-color1);
}

.webchat-headlineBody {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 5px;
}

.webchat-theme1-headlineRoot, .webchat-theme2-headlineRoot {
	background-color: var(--webchat-theme1-background);
	width: 100%;
	min-height: 400px;
	padding: 5px;
}

.webchat-theme2-headlineRoot {
	background-color: var(--webchat-theme2-background);
}

.webchat-simpleLineEdit {
	width: calc(100% - 20px);
}

.webchat-imagePreview {
	width: 100%;
	height: auto;
	margin: 10px;
}

.webchat-imagePreview img {
    width: 100%; /* Ensure the image takes up the full width of the container */
    height: 100%; /* Ensure the image takes up the full height of the container */
    object-fit: contain; /* Scale the image to fit within the container */
}

.webchat-theme1-loginBody, .webchat-theme2-loginBody {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background-color: var(--webchat-theme1-color2);
	border-radius: 4px;
}

.webchat-theme2-loginBody {
	background-color: var(--webchat-theme2-color2);
}

.webchat-theme1-loginButton, .webchat-theme2-loginButton {
	height: 40px;
	margin-top: 3px;
	font-size: 1.2rem;
}

.webchat-theme1-loginHandleInput, .webchat-theme2-loginHandleInput {
    width: 100%; /* Make the input take up all the space in the div */
    border: none; /* Remove the default border */
    outline: none; /* Remove the default outline */
    font-size: 16px; /* Optional: Set the font size */    
}

.webchat-theme1-loginRoot, .webchat-theme2-loginRoot{
	display: flex;
	align-items: center;
	justify-content: center;
    width: 100%; /* Make the input take up all the space in the div */
}

.webchat-theme1-logoRoot, .webchat-theme2-logoRoot {
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.webchat-theme1-messagesRoot, .webchat-theme2-messagesRoot {
	flex-grow: 1;
	margin: 5px;
}

.webchat-theme1-privateMessageWrapper, .webchat-theme2-privateMessageWrapper {
	background: linear-gradient(orange, rgb(139, 81, 9));
	border-radius: 5px;
	padding: 10px;
}

.webchat-theme1-mutedMessageWrapper, .webchat-theme2-mutedMessageWrapper {
	background: linear-gradient(red, darkred);
	border-radius: 5px;
	padding: 10px;
}

.webchat-theme1-ghostMessageWrapper, .webchat-theme2-ghostMessageWrapper {
	background: linear-gradient(grey, #333333);
	border-radius: 5px;
	padding: 10px;
}

.webchat-theme1-relayMessageWrapper, .webchat-theme2-relayMessageWrapper {
	background: linear-gradient(#006994, #678dc6);
	border-radius: 5px;
	padding: 10px;
}

.webchat-theme1-messageWrapper, .webchat-theme2-messageWrapper {
	padding: 3px;
	cursor: pointer;
	color: var(--webchat-theme1-color1);
	background-color: var(--webchat-theme1-background);
}

.webchat-theme2-messageWrapper {
	padding: 3px;
	cursor: pointer;
	color: var(--webchat-theme2-color1);
	background-color: var(--webchat-theme2-background);
}

.webchat-theme1-messageWrapper:hover, .webchat-theme2-messageWrapper:hover {
	background-color: #eeeeee;
	padding: 3px;
	cursor: pointer;
}

.webchat-theme1-messageWrapper:active, .webchat-theme2-messageWrapper:active {
	background-color: grey;
	padding: 3px
}

.webchat-popup {
	width: 600px;
}

.webchat-theme1-postArea, .webchat-theme2-postArea {
	align-items: stretch;
	background: var(--webchat-theme1-color1);
	display: flex;
	justify-content: center;
	height: 100px;
	width: 100%; /*var(--webchat-postControls-wide);*/
}

.webchat-theme2-postArea {
	background: var(--webchat-theme2-color1);
}

.webchat-theme1-postButton, .webchat-theme2-postButton {
    align-items: flex-start;
    justify-content: center;
    display: flex;
    background: linear-gradient(#990000, red);
    width: 100%;
    height: 50px;
    margin: 3px;
    margin-right:5px;
    margin-left:5px;
    border-radius: 4px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 88% 76%, 73% 86%, 27% 86%, 12% 76%, 0% 65%, 0% 0%);
    cursor: pointer;
    font-family: Russo One, Arial;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: bolder;
    color: white;
    user-select: none;
}

.webchat-theme1-postButton:active, .webchat-theme2-postButton:active {
	background: linear-gradient(#330000, #880000);
}

.webchat-theme1-postButtonPrivate, .webchat-theme2-postButtonPrivate {
	background: linear-gradient(orange, darkorange);
}

.webchat-theme1-postControlsRoot, .webchat-theme2-postControlsRoot {
    z-index: 1000; /* Ensure it stays on top of other elements */
    background-color: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.webchat-theme1-postControlsTopCap, .webchat-theme2-postControlsCap {
    background-color: var(--webchat-theme1-color1);
	width: var(--webchat-postControls-wide);
	height: 5px;
	clip-path: polygon(0% 100%, 2% 0%, 98% 0%, 100% 100%, 0% 100%);
}

.webchat-theme2-postControlsTopCap {
    background-color: var(--webchat-theme2-color1);
}

.webchat-postControlsOutline {
	display: flex;
	width: var(--webchat-postControls-wide);
	height: 50px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 88% 90%, 73% 100%, 27% 100%, 12% 90%, 0% 80%, 0% 0%)
}

.webchat-theme1-postOtherTools, .webchat-theme2-postOtherTools {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: "100%";
    height: 30px;
    background: var(--webchat-theme1-color1);
}

.webchat-theme2-postOtherTools {
    background: var(--webchat-theme2-color1);
}

.webchat-postTopRoot {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 5px 5px 0px 0px;
}

.webchat-theme1-privateMessages, .webchat-theme2-privateMessages{
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-right: 20px;
	height: 30px;
}

.webchat-theme1-quoteArea, .webchat-theme2-quoteArea {
    align-items: stretch;
    background: var(--webchat-theme1-color1);
    display: flex;
    justify-content: center;
    height: 100px;
    width: 100%;
}

.webchat-theme2-quoteArea {
    background: var(--webchat-theme2-color1);
}

.webchat-theme1-roomRowContent, .webchat-theme2-roomRowContent {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    margin-left: 0.4rem;
	cursor: pointer;
}

.webchat-roomRowContentTitle {
    color: var(--webchat-theme1-color1);
    font-family: var(--webchat-titleFontFamily);
    font-size: var(--webchat-h3FontSize);
    margin-bottom: 0.4rem;
	cursor: pointer;
}

.webchat-roomRowContentDescription {
    color: var(--webchat-theme1-color1);
    font-family: var(--webchat-paragraphFontFamily);
    font-size: 1rem;
	cursor: pointer;
}

.webchat-theme1-roomsRoot, .webchat-theme2-roomsRoot {
    display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-top: 20px;
	height: 100vh;
}

.webchat-roomsRowLeftAlign {
    display: flex;
    flex-direction: column;
	justify-content: flex-start;
}

.webchat-theme1-roomRowRoot, .webchat-theme2-roomRowRoot {
    background-color: transparent;
    display: flex;
    flex-direction: row;
}

.webchat-theme1-roomTitleHeadlineText, .webchat-theme2-roomTitleHeadlineText {
	color: var(--webchat-theme1-color4);
	overflow: hidden;
	white-space: nowrap;
}

.webchat-theme2-roomTitleHeadlineText {
	color: var(--webchat-theme2-color4);
}

.webchat-theme1-roomTitleRoot, .webchat-theme2-roomTitleRoot {
   	position: fixed; /* Fix the bar at the top of the page */
    top: 0; /* Align it to the top */
    left: 0; /* Align it to the left */
    width: 100%; /* Make it span the full width of the page */
    height: var(--webchat-roomTitleHeight); /* Set the height of the bar */
    background-color: var(--webchat-theme1-color1);
    color: var(--webchat-theme1-background); /* Text color */
    display: flex; /* Use flexbox for layout */
	flex-direction: row;
    padding: 0 20px; /* Add some padding */
    z-index: 1000; /* Ensure it stays on top of other elements */
}

.webchat-theme2-roomTitleRoot {
    background-color: var(--webchat-theme2-color1);
    color: var(--webchat-theme2-background); /* Text color */
}

.webchat-theme1-roomTitleTextStack, .webchat-theme2-roomTitleTextStack {
	display: flex;
	flex-direction: column;
}

.webchat-theme1-roomTitleText, .webchat-theme2-roomTitleText {
	font-family: var(--webchat-titleFontFamily);
	font-size: var(--webchat-h3FontSize);
	color: var(--webchat-theme1-color4);
	overflow: hidden;
	white-space: nowrap;
}

.webchat-theme2-roomTitleText {
	color: var(--webchat-theme2-color4);
}

.webchat-theme1-roomTitleImageContainer, .webchat-theme2-roomTitleImageContainer {
	margin-top: 2px;
	margin-right: 5px;
    display: inline-block; /* Ensure the container fits the image size */
	cursor: pointer;
}

/* Initial image styles */
.webchat-theme1-roomTitleImageContainer img, .webchat-theme2-roomTitleImageContainer img {
    width: 50px;
    height: 50px;
    transition: transform 0.1s ease-in-out; /* Smooth transition */
}

/* Initial image styles */
.webchat-theme1-roomTitleImageContainer div, .webchat-theme2-roomTitleImageContainer div {
    width: 50px;
    height: 50px;
    transition: transform 0.1s ease-in-out; /* Smooth transition */
}


/* Hover effect */
.webchat-theme1-roomTitleImageContainer:hover img, .webchat-theme2-roomTitleImageContainer:hover img {
    transform: scale(1.3); /* Scale the image to 110% */
}

.webchat-rulesBody {
	display: flex;
	flex-direction: column;

}

.webchat-theme1-scrollMessagesRoot, .webchat-theme2-scrollMessagesRoot {
	overflow-y: scroll;
	height: calc(100vh - var(--webchat-postControlsHeight) - var(--webchat-roomTitleHeight));
}

.webchat-securityBody {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.scrollControlButton {
	cursor: pointer;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.1s ease-in-out;
}

.scrollControlButton:hover {
	transform: scale(1.2);
}

.scrollControlButton:active {
	transform: scale(0.9);
}

.webchat-theme1-scrollControls, .webchat-theme2-scrollControls {
	background-color: yellow;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 999999;
	padding: 10px;
}

.webchat-theme1-scrollControlsBody, .webchat-theme2-scrollControlsBody {
	display: flex;
	flex-direction: row;
}

.tbd { 
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.webchat-theme1-h2, .webchat-theme2-h2{
	color: var(--webchat-theme1-color4);
	font-family: Russo One, Arial, 'Courier New', Courier, monospace;
	font-size: 1.2rem;
}

.webchat-theme2-h2{
	color: var(--webchat-theme2-color4);
}

.website-theme1-userSettingsRoot, .website-theme2-userSettingsRoot {
	width: 100px;
	height: 100px;
	background-color: red;
}

.webchat-theme1-webchat9429LandingPageRoot, .website-theme2-webchat9429LandingPageRoot {
    background-color: var(--webchat-theme2-background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.webchat-theme2-webchat9429LandingPageRoot {
    background-color: var(--webchat-theme1-background);
}

.webchat-pmCombo {
	position: relative;
}



.webchat-pmComboText {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 3px 3px;
	border: 1px solid #888;
	border-radius: 3px;
	background-color: white;
	height: 24px;
	box-sizing: border-box;
	width: 100%;
	font-size: 12px;
}

.webchat-pmComboItem {
	display: flex;
	align-items: left;
	padding: 8px;
	cursor: pointer;
	background-color: transparent;
	/*border-bottom: vIndex < newValueSet.length - 1 ? '1px solid #eee' : 'none';*/
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.webchat-pmComboItem:hover {
	background-color: #f9f9f9;
}

.webchat-pmComboItemSelected {
	background-color: '#f0f0f0';
	/* border-bottom: vIndex < newValueSet.length - 1 ? '1px solid #eee' : 'none'; */
	font-size: 14px;
}

.webchat-pmImg {
	width: 20px;
	height: 20px;
}

.webchat-pmList {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	width: max-content;
	border: 1px solid #ccc;
	border-radius: 0 0 4px 4px;
	background-color: white;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	max-height: 200px;
	/*min-height: 200px;*/
	overflow-y: auto;
	box-sizing: border-box;
	z-index: 10;
}

.webchat-pmPic {
	border-radius: 10px;
    cursor: pointer;
	height: 20px;
	margin-right: 8px;
	object-fit: cover;
	width: 20px;
}

.cafe-single-column {
	display: flex;
	flex-direction: column;
}

.cafe-single-row {
	display: flex;
	flex-direction: row;
}

.cafe-vip-title {
    align-items: center;
	background-color: black;
    background-image: linear-gradient(gold, brown);
	background-clip: text;
	background-size: 100%;
	font-family: Arial, 'Courier New', Courier, monospace;
	font-size: 1rem;
	font-weight: bolder;
    display: flex;
    height: 25px;
    justify-content: center;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.cafe-topbanner-root {
	background: linear-gradient(grey, white);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 30px;
	width: 100%;
}


.cafe-rooms-list {
    display: grid;
}

.cafe-room {
    width: 400px;
    height: 400px;
}

.circular-image {
	border-radius: 40%;
	object-fit: cover;
    cursor: pointer;
}

.old-input-scroll-right {
	width: calc(100% - 10px);
}

.webchat-theme1-postButtonGo, .webchat-theme2-postButtonGo {
	align-items: center;
	color: black;
	cursor: pointer;
	display: flex;
	width: 28px;
	height: 28px;
	border-radius: 15px;
	background: linear-gradient(grey, white);
	justify-content: center;
	font-style: italic;
	font-size: 0.75rem;
	font-weight: bold;
	margin-left: 5px;
	margin-right: 10px;
	user-select: none;
}

.webchat-theme1-postButtonGo:active {
	background: linear-gradient(#444444, grey);
}

.reply-to-button {
	align-items: center;
	background: linear-gradient(grey, white);
	border-radius: 15px;
	color: black;
	cursor: pointer;
	display: flex;
	height: 20px;
	justify-content: center;
	font-size: 0.60rem;
	margin-left: 5px;
	margin-right: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, width 0.2s ease, height 0.2s ease;
	user-select: none;
	width: 20px;
}

.reply-to-button:active {
	background: linear-gradient(#444444, grey);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.reply-to-button:hover {
    /* Grow the button when hovered */
    transform: scale(1.3);
    /* Add a subtle glow effect */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
	animation: pulse 1.5s infinite ease-in-out;
}

@media only screen and (max-width: 480px) {

	.cafe-settings-body {
		display: grid;
		grid-template-columns: 20%, 20%, 20%, 20%, 20%;
		grid-template-rows: 14px, 25px, 14px, 25px, 14px, 25px;
		width: 100%;
		padding-bottom: 30px;
	}

	.webchat-theme1-postArea, .webchat-theme2-postArea {
		align-items: stretch;
		background: black;
		display: flex;
		justify-content: center;
		height: 100px;
		width: 100%;
	}

	.extended-section {
		background: black;
		width: 100%;
		overflow-y: scroll;
	}

	.extended-body {
		background-color: white;
		margin: 5px;
		width: calc(100% - 20px);
		overflow-x: hidden;
	}

	.post-bottom-root {
		display: flex;
		background: black;
		width: 100%;
		height: 50px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 88% 90%, 73% 100%, 27% 100%, 12% 90%, 0% 80%, 0% 0%)
	}

	.webchat-theme1-postButton, .webchat-theme2-postButton {
		align-items: flex-start;
		justify-content: center;
		display: flex;
		background: linear-gradient(#990000, red);
		width: 100%;
		height: 50px;
		margin: 3px;
		margin-right:5px;
		margin-left:5px;
		border-radius: 4px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 88% 76%, 73% 86%, 27% 86%, 12% 76%, 0% 65%, 0% 0%);
		cursor: pointer;
		font-family: Russo One, Arial;
		font-size: 1.5rem;
		font-style: italic;
		font-weight: bolder;
		color: white;
		user-select: none;
	}

	.webchat-postControlsBody {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.webchat-postControlsOutline {
		width: 100%;
	}

	.post-controls-decoderring {
		visibility: hidden;
		width: 0px;
	};

	.scroll-back-line {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 25px;
	}

	.chat-image {
		max-width: 320px;
	}

	.embedded-youtube {
		width: 320px;
		height: 200px;
	}

	.webchat-featuresAndOptions {
		width: 100px;
	}

	.webchat-theme1-privateMessageBox, .webchat-theme2-privateMessageBox {
		width: 100px;
		margin-left: 10px;
	}

	.webchat-featureAndPMControls {
		width: 100%;
	}

}

@media only screen and (min-width: 480px) {

	.cafe-settings-body {
		display: grid;
		grid-template-columns: 20%, 20%, 20%, 20%, 20%;
		grid-template-rows: 14px, 25px, 14px, 25px, 14px, 25px;
		width: 560px;
		padding-bottom: 30px;
	}

	.webchat-theme1-postArea, .webchat-theme2-postArea { 
		align-items: stretch;
		background: black;
		display: flex;
		justify-content: center;
		height: 100px;
		width: 100%;
	}

	.webchat-postControlsOutline {
		width: 100%;
	}

	.extended-section {
		background: black;
		width: 600px;
		overflow-y: scroll;
	}

	.extended-body {
		background-color: white;
		margin: 5px;
		width: calc(100% - 20px);
		overflow-x: hidden;
	}

	.post-bottom-root {
		display: flex;
		background: black;
		width: 600px;
		height: 50px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 88% 90%, 73% 100%, 27% 100%, 12% 90%, 0% 80%, 0% 0%)
	}

	.webchat-theme1-postButton, .webchat-theme2-postButton {
		align-items: flex-start;
		justify-content: center;
		display: flex;
		background: linear-gradient(#990000, red);
		width: 600px;
		height: 50px;
		margin: 3px;
		margin-right:5px;
		margin-left:5px;
		border-radius: 4px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 88% 76%, 73% 86%, 27% 86%, 12% 76%, 0% 65%, 0% 0%);
		cursor: pointer;
		font-family: Russo One, Arial;
		font-size: 1.5rem;
		font-style: italic;
		font-weight: bolder;
		color: white;
		user-select: none;
	}

	.webchat-postControlsBody {
		display: flex;
		flex-direction: column;
	}

	.post-controls-decoderring {
		visibility: visible;
		width: 100px;
	};

	.post-top-root {
		display: flex;
		background: black;
		width: 600px;
		height: 5px;
		clip-path: polygon(0% 100%, 2% 0%, 98% 0%, 100% 100%, 0% 100%)
	}

	.quote-area {
		align-items: stretch;
		background: black;
		display: flex;
		justify-content: center;
		height: 100px;
		width: 600px;
	}

	.scroll-back-line {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 25px;
		padding-left: 10px;
	}

	.chat-image {
		max-width: 800px;
		max-height: 800px;
	}

	.embedded-youtube {
		width: 320px;
		height: 200px;
	}

	.webchat-featuresAndOptions {
		width: 170px;
	}

	.webchat-theme1-privateMessageBox, .webchat-theme2-privateMessageBox {
		width: 170px;
		margin-left: 10px;
	}

	.webchat-featureAndPMControls {
		width: 100%;
	}
}

.webchat-postInput {
	margin-left: 10px;
	margin-right: 10px;
	width: 100%;
	white-space: pre-wrap;
}

.webchat-theme1-postButton:active, .webchat-theme2-postButton:active {
	background: linear-gradient(#330000, #880000);
}

.webchat-theme1-postButtonPrivate, .webchat-theme2-postButtonPrivate {
	background: linear-gradient(orange, darkorange);
}

.post-controls-root {
    display: flex;
    justify-content: center;
	padding-top: 30px;
    width: 100%;
}

.cafe-messages-root {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cafe-messages-inner {
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 10px;
}

.cafe-message {
	display: flex;
	flex-direction: column;
    font-family:'Times New Roman', Times, serif;
}

.cafe-settings-root {
    display: flex;
	width: 100%;
	justify-content: center;
}

.cafe-settings-title {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	font-size: 12px;
}

.cafe-settings-link {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
}

.cafe-link {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	cursor: pointer;
}

.cafe-settings-fonts-title {
	grid-row: 1 / 1;
	grid-column: 1;
}

.cafe-settings-tagline-title {
	grid-row: 1;
	grid-column: 3 / span 2;
}

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

.cafe-settings-padding {
	padding-top: 10px;
}

.break {
	flex-basis: 100%;
	height: 0;
}

.cafe-root {
	height: auto;
	width: 100%;
}

.scroll-back-input {
	margin-left: 5px;
	margin-right: 5px;
	width: 50px;
}

.quote-body {
	background-color: #cccccc;
	border-radius: 4px;
	width: 100%;
	display: flex;
	flex-direction: row;
	margin: 10px;
	overflow-x: hidden;
	overflow-y: hidden;
}

.cafe-quote-slice {
	min-width: 10px;
	width: 10px;
	margin-right: 5px;
	min-height: 10px;
}

.quote-message {
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: hidden;
	max-width: 550px;
}

.webchat-theme1-whosIgnoredRoot, .webchat-theme2-whosIgnoredRoot {
	margin-left: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.whos_ignored_check {
	width: 50px;
	height: 30px;
}

.whos_ignored_header {
	font-size: 0.75rem;
	font-weight: bold;
	text-decoration: underline;
}

.whos_ignored_handle {
	display: flex;
	align-items: center;
	font-size: 1.5rem;
	width: 400px;
	height: 30px;
}

.whos_on_row {
	display: flex;
	flex-direction: row;
	padding: 3px;
}

.whos_on_row:hover {
	background-color: #eeeeee;
	border-radius: 5px;
}

.image-cache {
	display: flex;
	flex-direction: column;
}

.pic-line {
	display: flex;
	flex-direction: row;
	height: 40px;
	align-items: center;
	cursor: pointer;
}

.pic-line-checkbox {
	width: 30px;
	height: 30px;
}

.pic-line-preview {
	width: 30px;
	height: 30px;
}

.pic-line-text {
	white-space: nowrap;
	text-wrap: nowrap;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	overflow-x: hidden;
	max-width: calc(100% - 60px);
}

.whos-who-root {
	display: flex;
	flex-direction: column;
}

.whos-who-line {
	display: flex;
	flex-direction: row;
	height: 40px;
	align-items: center;
}

.whos-profile-pic {
	width: 40px;
	height: 40px;
}

.last-read-line {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	width: 100%;
	height: 20px;
	border-bottom: 4px solid black;
	font-size: 0.5rem;
	font-family: Russo One, Arial, 'Courier New', Courier, monospace;
}

.handle-prefix {
	margin-right: 3px;
}

.cafe-landingpage-body {
	display: flex;
	flex-direction: column;
	background-color: white;
}

.cafe-landingpage-title {
    align-items: center;
	background-color: black;
    background-image: linear-gradient(blue, green);
	background-clip: text;
	background-size: 100%;
	font-family: Russo One, Arial, 'Courier New', Courier, monospace;
	font-size: 3.4rem;
    display: flex;
    justify-content: center;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
	margin-left: 10px;
	margin-right: 10px;
}

.cafe-loginbox {
	min-width: 400px;
	background-color: #333333;
	margin: 10px;
	padding: 10px;
	border-radius: 10px;
}

.cafe-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.cafe-landing-page-tile-h2 {
	color: white;
	font-family: Russo One, Arial, 'Courier New', Courier, monospace;
	font-size: 1.2rem;
	padding-top: 10px;
}

.host-message {
	align-items: center;
	background-color: yellow;
	display: flex;
	height: 60px;
	justify-content: center;
	margin-left: -20px;
	margin-right: -20px;
	width: 120%;
}

.host-arrival {
	display: flex;
	flex-direction: row;
}

.host-text {
	display: flex;
	align-items: center;
	font-family: var(--website-h3FontFamily); 
	font-size: var(--website-h3FontSize);
	margin-left: 5px;
	min-width: 250px;
  color: white; /* Text color */
  text-shadow: 
    -1px -1px 0 #000,  /* Top left */
    1px -1px 0 #000,   /* Top right */
    -1px 1px 0 #000,   /* Bottom left */
    1px 1px 0 #000;    /* Bottom right */	
	white-space: nowrap;
}

.full-width {
	width: 100%;
}

.horizontal-list {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.list-label {
	margin-top: 5px;
}

.pointable {
	cursor: pointer;
}

.vertical-list {
	display: flex;
	flex-direction: column;
}
/*!*******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/cafe90s/message/cafe90s-message.css ***!
  \*******************************************************************************************/

.cafe-message-profile-pic {
	max-width: 200px;
	max-height: 200px;
}

.cafe-relay-message-profile-pic {
	max-width: 64px;
	max-height: 64px;
}

.cafe-message-line {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.cafe-relay-message-line {
	display: flex;
	flex-wrap: wrap;
	font-size: 1.0rem;
	font-style: italic;
	width: 100%;
}
/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/campaigns/campaigns.css ***!
  \*******************************************************************************/
@media only screen and (max-width: 480px) {
    .flock-number {
        align-items: center;
        background-color: brown;
        border-radius: 10px;
        color: white;
        display: flex;
        font-size: 0.4rem;
        height: 20px;
        justify-content: center;
        margin-right: 5px;
        width: 20px;
    }
    .turkey-title {
        align-items: center;
        background-color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 20px;
        width: 100%;
    }

    .turkey-title-text {
        font-size: 0.4rem;
    }

    .turkey-timer {
        font-size: 0.4rem;
    }

    .turkey-scroll-body {
        height: calc(100vh - 20px);
        overflow-y: scroll;
        width: 100%;
    }

    .turkeyline {
        display: flex;
        flex-direction: row;
        height: 40px;
    }

    .turkeycheck {
        height: 40px;
        width: 40px;
    }

    .turkey-line-text {

    }
}

@media only screen and (min-width: 480px) {
    .flock-number {
        align-items: center;
        background-color: brown;
        border-radius: 25px;
        color: white;
        display: flex;
        font-size: 1.5rem;
        height: 50px;
        justify-content: center;
        margin: 5px;
        width: 50px;
    }

    .turkey-scroll-body {
        height: calc(100vh - 50px);
        overflow-y: scroll;
        width: 100%;
    }
    .turkey-title {
        align-items: center;
        background-color: #aaaaaa;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 50px;
        width: 100%;
    }

    .turkey-title-text {
        font-size: 1.5rem;
    }

    .turkey-timer {
        font-size: 1.5rem;
    }


    .turkeyline {
        height: 25px;
        display: flex;
        flex-direction: row;
    }

    .turkeycheck {
        height: 25px;
        width: 25px;
    }

    .turkey-line-text {

    }
}

.turkey-root {
    background-color: black;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-x:hidden;
    overflow-y: hidden;
    width: 100%;
}

.turkey-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.flockview {
    background-color: #222222;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    margin: 5px;
    width: 100%;
}

.flockview:hover {
    background-color: #444444;
}

.flocktop-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
}

.turkey-line-edit {
    background-color: white;
    color: black;
}