/* ========================================================================== REFINED EDITORIAL DESIGN SYSTEM A sophisticated light theme with warm cream tones & teal accents Premium magazine aesthetic with elegant typography 🌙 DARK MODE: Add class "dark-theme" to or element ========================================================================== */ /* GOOGLE FONTS IMPORT */ @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); /* CSS CUSTOM PROPERTIES - LIGHT THEME (Default) */ :root { --font-display: 'Crimson Pro', Georgia, serif; --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --bg-body: #faf8f5; --bg-primary: #ffffff; --bg-secondary: #f5f2ed; --bg-tertiary: #ebe7e0; --bg-elevated: #ffffff; --bg-input: #fcfbf9; --accent-primary: #1a7a6c; --accent-primary-hover: #15635a; --accent-primary-light: #e8f4f2; --accent-primary-soft: rgba(26, 122, 108, 0.1); --accent-secondary: #c4653a; --accent-secondary-hover: #a8522d; --accent-secondary-light: #fdf4f0; --accent-gold: #d4a847; --accent-gold-light: #fdf8eb; --accent-gold-soft: rgba(212, 168, 71, 0.15); --success: #2d8a5f; --success-bg: #eef7f2; --success-border: #b8dcc8; --error: #c53d3d; --error-bg: #fdf2f2; --error-border: #f5c6c6; --warning: #b8860b; --warning-bg: #fdf8eb; --warning-border: #f0dca0; --info: #3a7ca5; --info-bg: #f0f7fb; --info-border: #b8d4e8; --text-primary: #2c2825; --text-secondary: #5c5652; --text-muted: #8a8480; --text-inverse: #ffffff; --text-link: #1a7a6c; --text-link-hover: #15635a; --border-light: #e8e4de; --border-default: #d4cfc7; --border-dark: #b8b2a8; --shadow-xs: 0 1px 2px rgba(44, 40, 37, 0.04); --shadow-sm: 0 2px 4px rgba(44, 40, 37, 0.06), 0 1px 2px rgba(44, 40, 37, 0.04); --shadow-md: 0 4px 12px rgba(44, 40, 37, 0.08), 0 2px 4px rgba(44, 40, 37, 0.04); --shadow-lg: 0 8px 24px rgba(44, 40, 37, 0.1), 0 4px 8px rgba(44, 40, 37, 0.06); --shadow-xl: 0 16px 48px rgba(44, 40, 37, 0.12); --shadow-inner: inset 0 2px 4px rgba(44, 40, 37, 0.06); --shadow-glow: 0 0 20px rgba(26, 122, 108, 0.15); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); } /* DARK THEME OVERRIDES */ .dark-theme { --bg-body: #16191d; --bg-primary: #1e2227; --bg-secondary: #252a30; --bg-tertiary: #2d333a; --bg-elevated: #333a42; --bg-input: #252a30; --accent-primary: #3db9a7; --accent-primary-hover: #4fc9b7; --accent-primary-light: #1e3330; --accent-primary-soft: rgba(61, 185, 167, 0.15); --accent-secondary: #e8845a; --accent-secondary-hover: #f09670; --accent-secondary-light: #2e251f; --accent-gold: #e8c05a; --accent-gold-light: #2e2a1f; --accent-gold-soft: rgba(232, 192, 90, 0.2); --success: #4ade80; --success-bg: #1a2e22; --success-border: #2d5a3d; --error: #f87171; --error-bg: #2e1f1f; --error-border: #5a2d2d; --warning: #fbbf24; --warning-bg: #2e2a1a; --warning-border: #5a4a1d; --info: #60a5fa; --info-bg: #1a2530; --info-border: #2d4a6a; --text-primary: #f0ede8; --text-secondary: #b8b4ad; --text-muted: #7a7670; --text-inverse: #16191d; --text-link: #3db9a7; --text-link-hover: #4fc9b7; --border-light: #333a42; --border-default: #3d454e; --border-dark: #4a535e; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-glow: 0 0 30px rgba(61, 185, 167, 0.2); } /* BASE STYLES */ *, *::before, *::after { box-sizing: border-box; } body { font-family: "Raleway", sans-serif; background: var(--bg-body); color: black; line-height: 1.6; font-size: 11px; -webkit-font-smoothing: antialiased; transition: background-color var(--transition-slow), color var(--transition-slow); } /* MENU & NAVIGATION */ .menuHead { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-hover) 100%); color: var(--text-inverse); border-top: none !important; border-bottom: 3px solid var(--accent-gold); padding: 12px 20px; box-shadow: var(--shadow-md); } .subTitle { color: var(--accent-primary); font-family: "Raleway", sans-serif; } /* FORM INPUTS */ input[type=text], input[type=datetime-local], input[type=file], input[type=number], input[type=date], input[type=time], input[type=search], input[type=tel], input[type=email], input[type=password], input[type=button], input[type=submit], input[type=datetime-local], textarea, .w3-input, button { background-color: #f5fff2; border: 1px solid var(--border-default); color: var(--text-primary); width: 100%; border-radius: 5px; margin-bottom: 12px; padding: 10px 14px; font-family: "Raleway", sans-serif; font-size: 11px; transition: all var(--transition-base); outline: none; } input[type=text]:focus, input[type=datetime-local]:focus, input[type=file]:focus, input[type=number]:focus, input[type=date]:focus, input[type=time]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=datetime-local]:focus, input[type=password]:focus, textarea:focus, .w3-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-soft), var(--shadow-sm); background-color: var(--bg-primary); } input[type=file], input[type=text], input[type=datetime-local], input[type=date], input[type=time], input[type=number], input[type=tel], input[type=email], input[type=password], input[type=button], input[type=datetime-local] { height: 31px; } input[type=search] { width: auto; height: 30px; margin-right: 12px; border-radius: var(--radius-full); padding: 8px 18px; } /* BUTTONS */ input[type=submit], input[type=button], button, .button { font-size: 11px; letter-spacing: 0.06em; margin-bottom: 1em; background-color: #ffd400; border: none; color: green; padding: 10px 24px; cursor: pointer; box-shadow: var(--shadow-sm); font-weight: 800; height: 35px; } input[type=submit]:hover, input[type=button]:hover, button:hover, .button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--shadow-glow); } input[type=submit]:active, input[type=button]:active, button:active, .button:active { transform: translateY(0); box-shadow: var(--shadow-xs); } input[type=submit]:disabled, input[type=button]:disabled, button:disabled { background: var(--bg-tertiary) !important; color: var(--text-muted) !important; cursor: not-allowed; box-shadow: none; transform: none; } input[type=text]:read-only, input[type=file]:read-only, input[type=date]:read-only, input[type=time]:read-only, input[type=number]:read-only, input[type=tel]:read-only, input[type=email]:read-only, input[type=password]:read-only { border-color: var(--border-light); color: var(--text-muted); background-color: var(--bg-secondary); } input[type=file] { padding: 8px 10px; cursor: pointer; padding-top: 0; padding-left: 0; } input[type=file]::file-selector-button { background: var(--accent-primary); color: var(--text-inverse); border: none; padding: 6px 14px; border-radius: var(--radius-sm); margin-right: 12px; cursor: pointer; font-weight: 500; } input[type=number] { text-align: right; font-family: "Raleway", sans-serif; } input[type=text]:required, input[type=datetime-local]:required, input[type=number]:required, textArea:required, input[type=date]:required, input[type=time]:required, input[type=datetime]:required { border-color: var(--accent-gold); border-left: 3px solid var(--accent-gold); background-color: var(--accent-gold-light); } /* SELECT */ select, .select { width: 100%; border-radius: 5px; background-color: var(--bg-input); color: var(--text-primary); margin-bottom: 12px; min-height: 30px; border: 1px solid var(--border-default); padding: 10px 40px 10px 14px; font-family: "Raleway", sans-serif; font-size: 11px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a7a6c' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; transition: all var(--transition-base); } .dark-theme select, .dark-theme .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233db9a7' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } select:focus, .select:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-soft); outline: none; } ::placeholder { font-style: italic; color: var(--text-muted); opacity: 1; } select[aria-controls] { width: auto; } form { margin: 0px !important; } /* TABLE COMPONENTS */ .tableTitleParts { color: var(--accent-gold); font-family: "Raleway", sans-serif; } .w3-bar-item:hover { background-color: var(--accent-primary-light); color: var(--accent-primary); } @media (max-width: 992px){ .w3-threequarter{ width: 100%; } } .submenu { border-top: 0; background: var(--bg-secondary); } .bentSubmenu { color: var(--accent-secondary); box-shadow: 0 1px 0 0 var(--border-light); padding: 12px 16px; transition: all var(--transition-base); border-left: 3px solid transparent; } .bentSubmenuSelected { color: var(--accent-primary); background: var(--accent-primary-light); border-left-color: var(--accent-primary); } .bentSubmenu:hover { background-color: var(--accent-primary-light) !important; color: var(--accent-primary) !important; border-left-color: var(--accent-primary); } .tableLink { color: dodgerblue; text-decoration: none; font-weight: 500; transition: all var(--transition-fast); } .tableLink:hover { color: var(--text-link-hover); } .tableTitle { color: var(--accent-secondary); font-size: 18px; font-family: "Raleway", sans-serif; padding: 0.5em 16px; } .tdTitle { color: var(--accent-primary); font-weight: 500; } .tdNavigator{ background-color: #ffd400; font-weight: bold; text-align: center; } .tdDottedBottom { border-bottom: 1px dashed var(--border-light); } input[type=checkbox], [type=radio] { vertical-align: middle; width: 15px; height: 15px; accent-color: var(--accent-primary); cursor: pointer; margin: 5px 8px 5px 0px; } .searchBox { width: 180px !important; font-size: 11px; float: right; background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-default); box-shadow: var(--shadow-inner); border-radius: var(--radius-full); padding-left: 16px; } .uploadIcon { margin-top: 7px; float: right; color: var(--accent-primary); } /* CONTENT CONTAINERS */ .divWithContent { background-color: var(--bg-primary); color:black; margin-right: 15px; margin-bottom: 15px; padding: 0px 15px; border: 1px solid var(--border-light); font-size: 11px; overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: all var(--transition-base); } .divWithContent:hover { box-shadow: var(--shadow-lg); } .divWithTable { background-color: var(--bg-primary); color:black; border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow-x: auto; font-size: 11px; margin-bottom: 1em; box-shadow: var(--shadow-md); } .divHalf { width: 40%; } .sunkenDiv { background-color: var(--bg-secondary); padding: 1em; box-shadow: var(--shadow-inner); border-radius: var(--radius-md); border: 1px solid var(--border-light); } .raisedDiv { overflow-y: auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-md); margin-bottom: 20px; background: var(--bg-primary); } .listTitle2 { margin-top: 10px; margin-bottom: 10px; font-size: 20px; color: var(--accent-primary) !important; font-family: "Raleway", sans-serif; } a { color: dodgerblue; text-decoration: none; font-size: 11px; } a:hover { color: var(--text-link-hover); text-decoration: underline; } /* NOTIFICATIONS */ .hasError { color: white; background-color: #ff0000; margin-bottom: 16px; font-size: 12px; border-radius: 5px; padding: 5px 10px; clear: both; box-shadow: 2px 2px 6px #f38080; font-weight: 800; } .hasNotice { color: white; background-color: #4CAF50; margin-bottom: 16px; font-size: 11px; border-radius: 5px; padding: 5px 10px; clear: both; box-shadow: 2px 2px 6px #bbb; font-weight: 800; } .hasInfo { color: white; background-color: deepskyblue; margin-bottom: 16px; font-size: 11px; border-radius: 5px; padding: 5px 10px; clear: both; box-shadow: 2px 2px 6px #bbb; font-weight: 800; } .hasAlert { color: white; background-color: orange; margin-bottom: 16px; font-size: 11px; border-radius: 5px; padding: 5px 10px; clear: both; box-shadow: 2px 2px 6px #bbb; font-weight: 800; } /* TOOLTIPS */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted var(--accent-primary); cursor: help; } .tooltip .tooltiptext { visibility: hidden; opacity: 0; width: auto; min-width: 200px; max-width: 300px; background-color: var(--bg-primary); color:black; text-align: left; padding: 14px 16px; border-radius: var(--radius-md); position: absolute; z-index: 100; border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); transition: all var(--transition-base); } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } ul, ol { margin-left: -3em; font-size: 11px; clear: both; color:black; } .cross { color: red; text-decoration: none; text-align: center; font-size: 14px; padding: 4px 8px; cursor: pointer; border-radius: var(--radius-sm); } .cross:hover { background-color: var(--error-bg); } .sectionSeparator { color: var(--accent-primary); background: linear-gradient(90deg, var(--accent-primary-light), var(--bg-secondary)); border-radius: var(--radius-sm); margin-bottom: 0.5em; width: 100%; margin-left: auto; margin-right: auto; margin-top: 1em; padding: 8px 16px; font-weight: 500; border-left: 3px solid var(--accent-primary); } /* TABLES */ table { border-collapse: collapse; border-spacing: 0; width: 100%; display: table; border-radius: var(--radius-md); font-size: 11px; margin-bottom: 1em; overflow: hidden; } thead { background-color: cadetblue; } thead td, thead th { text-align: center; page-break-inside: avoid; vertical-align: middle; font-weight: 800; color: white; } tr { height: auto; border-bottom: 1px solid var(--border-light); transition: background-color var(--transition-fast); } tbody tr:hover { background-color: var(--accent-primary-soft); } tbody tr:nth-child(even) { background-color: var(--bg-secondary); } td { padding: 8px; display: table-cell; text-align: left; vertical-align: top; color:black; } tfoot { background: var(--bg-tertiary); font-weight: 600; color:black; } tfoot td { padding: 14px 12px; border-top: 2px solid var(--accent-primary); } /* PANELS */ .panelHeader { background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); margin-bottom: 16px; padding: 16px 20px; border: 1px solid var(--border-default); color: var(--accent-secondary); font-size: 18px; font-family: "Raleway", sans-serif; font-weight: 600; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: center; } .panelTitle1 { color: var(--accent-secondary); font-size: 18px; font-family: "Raleway", sans-serif; padding: 0.5em 0px; } .panelTitle2 { color: var(--accent-secondary); font-size: 14px; font-family: "Raleway", sans-serif; font-weight: 500; margin-top: 14px; margin-bottom: 10px; } .panelTitle3 { color: var(--accent-secondary); display: block; font-size: 12px; font-weight: 500; } .panelSubTitle { color: var(--accent-gold); font-weight: 500; } .panelTitleArrows { color: var(--accent-gold); padding-top: 4px; float: right; transition: transform var(--transition-fast); } .panelSectionTitle { color: orange; display: block; font-size: 11px; border-bottom: 1px solid orange; margin-bottom: 1em; margin-top: 1em; padding-bottom: 0px; font-weight: 600; } panelLabel, .panelLabel { color: var(--accent-primary); font-weight: 500; } .panelColHeader { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-hover) 100%); padding: 10px 14px; color: var(--text-inverse); text-align: center; width: 100%; border-radius: var(--radius-sm); font-weight: 600; font-size: 12px; text-transform: uppercase; } .panelBar { padding: 10px 16px; color: var(--text-inverse); background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-hover) 100%); border-radius: var(--radius-sm); font-weight: 500; } .logo { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 3px solid var(--bg-primary); transition: all var(--transition-base); } .logo:hover { transform: scale(1.02); } @media (max-width: 600px) { .panel_hide_small { display: none; } } .a4 { width: 210mm; min-height: 100%; margin-left: auto; margin-right: auto; background: var(--bg-primary); box-shadow: var(--shadow-xl); padding: 20mm; } .label50by30{ width: 50mm; height: 30mm; border-radius: 5px; text-align: center; } /* PROGRESS */ .divProgress { display: none; height: auto; background-color: var(--bg-primary); border: 1px solid orange; color: orange; padding: 12px 16px; box-shadow: var(--shadow-md); border-radius: var(--radius-md); border-left: 4px solid orange; } .progressBar { height: 24px; border-radius: var(--radius-full); margin: 10px 0; background-color: var(--bg-tertiary); text-align: center; overflow: hidden; box-shadow: var(--shadow-inner); } /* DROPDOWNS */ .menuItem { background-color: var(--bg-primary); color:black; font-size: 11px; font-weight: 500; border: none; text-decoration: none; display: block; width: auto; float: left; padding: 12px 18px; transition: all var(--transition-fast); } .menuItem:hover { background-color: var(--accent-primary-light); color: var(--accent-primary); } .dropdown { position: relative; display: inline-block; float: left; width: 175px; border-right: 1px solid var(--border-light); border-radius: var(--radius-sm); } .dropdown-content { display: none; position: fixed; background-color: var(--bg-primary); min-width: 200px; box-shadow: var(--shadow-lg); z-index: 1000; top: 80px; font-size: 11px; border-radius: var(--radius-md); border: 1px solid var(--border-light); overflow: hidden; } .dropdown-content a, .dropdown-contentSm a { color:black; padding: 12px 18px; text-decoration: none; display: block; z-index: 4; transition: all var(--transition-fast); border-left: 3px solid transparent; } .dropdown-content a:hover { color: var(--accent-primary); background-color: var(--accent-primary-light); border-left-color: var(--accent-primary); } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .menuItem { color: var(--accent-primary); background-color: var(--accent-primary-light); } .dropdownSm { position: relative; clear: both; width: 175px; border-right: 1px solid var(--border-light); border-radius: var(--radius-sm); } .dropdown-contentSm { display: none; position: fixed; background-color: var(--bg-primary); min-width: 180px; box-shadow: var(--shadow-lg); z-index: 1000; top: 80px; font-size: 11px; margin-left: 170px; padding: 8px; border-radius: var(--radius-md); border: 1px solid var(--border-light); } .sysCombobox { display: none; position: absolute; background-color: var(--bg-primary); min-width: 280px; border: 1px solid var(--border-default); z-index: 1000; margin-top: -11px; margin-left: 0px; border-radius: 5px; box-shadow: var(--shadow-lg); } .sysCombobox label { color:black; padding: 10px 14px; text-decoration: none; display: block; font-size: 11px; cursor: pointer; transition: all var(--transition-fast); } .sysCombobox label:hover { background-color: var(--accent-primary-light); color: var(--accent-primary); } label { font-weight: normal !important; color: var(--text-secondary); } .show { display: block !important; } .hide { display: none !important; } /* TABS */ .tabHeader { background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%); display: block; overflow: auto; margin-left: -15px; margin-right: -15px; border-bottom: 2px solid var(--border-default); } .tabTitle { color: white; padding: 14px 20px; display: block; float: left; background-color: cadetblue; height: auto; font-size: 12px; font-weight: 600!important; border-left: 1px solid var(--border-light); border-bottom: 3px solid transparent; transition: all var(--transition-base); cursor: pointer; } .tabTitle:hover { color: var(--accent-primary); background-color: var(--accent-primary-light); } .taskTab { background-color: var(--bg-primary); display: block; overflow-x: auto; } .taskTabSection1, .tabSection { padding-left: 16px; padding-right: 16px; } .tabHeader:hover { color: var(--accent-primary); } .tabTitleSelected { border-left: 1px solid var(--border-default); border-right: 1px solid var(--border-default); border-bottom: 3px solid cadetblue!important; color: var(--accent-primary) !important; background-color: var(--bg-primary) !important; font-weight: 600; } .closeButton { position: fixed; right: 8px; top: 8px; text-align: center; border-radius: var(--radius-full); height: 40px; width: 40px; padding: 10px; background: linear-gradient(135deg, var(--error) 0%, #a32d2d 100%); color: var(--text-inverse); font-weight: bold; cursor: pointer; box-shadow: var(--shadow-md); border: none; font-size: 16px; line-height: 1; } .closeButton:hover { transform: scale(1.1); } /* REPORTS */ .graph_tile { padding-bottom: 16px; float: left; } .graph_panel { border: 1px solid var(--border-light); box-shadow: var(--shadow-md); height: 100%; padding: 20px; max-width: 100%; margin-right: auto; margin-left: auto; border-radius: var(--radius-lg); background: var(--bg-primary); } .textarea { border: 1px solid var(--border-default); padding: 12px 14px; border-radius: var(--radius-md); margin: 8px; margin-right: 0; background: var(--bg-input); color: var(--text-primary); } .input_orange { font-style: italic; border-color: var(--accent-gold); color: var(--text-secondary); background-color: var(--accent-gold-light); } .div_disabled { pointer-events: none; opacity: 0.4; filter: grayscale(30%); } .divAlert { display: none; height: auto; background-color: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); padding: 12px 16px; box-shadow: var(--shadow-md); border-radius: var(--radius-md); border-left: 4px solid var(--warning); } /* LOADER */ .loader { border: 4px solid var(--bg-tertiary); border-top: 4px solid var(--accent-primary); border-radius: 50%; width: 48px; height: 48px; animation: spin 1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite; margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .boldRed { font-size: larger; color: var(--accent-gold); font-weight: 700; } .boldRedLink { font-size: larger; color: var(--accent-gold); text-decoration: underline; font-weight: 700; } /* MESSAGING */ .msg_container { border: 1px solid var(--border-light); background-color: var(--bg-secondary); border-radius: var(--radius-lg); padding: 14px 16px; margin: 12px; max-width: 75%; width: fit-content; clear: both; box-shadow: var(--shadow-sm); } .msg_outgoing { border-color: var(--accent-primary); background: linear-gradient(135deg, var(--accent-primary-light) 0%, #d8f0ec 100%); margin-left: auto; float: right; } .msg_incoming { border-color: var(--border-default); background-color: var(--bg-primary); margin-right: auto; } .msg_container::after { content: ""; clear: both; display: table; } .msg_container img { float: left; max-width: 48px; width: 100%; margin-right: 14px; border-radius: 50%; border: 2px solid var(--border-light); } .msg_container img.right { float: right; margin-left: 14px; margin-right: 0; } .msg_status { float: right; padding: 4px 10px; background-color: var(--bg-primary); border-radius: var(--radius-full); border: 1px solid var(--border-light); font-size: 11px; color: var(--text-muted); margin-left: 10px; } .msg_time { color: var(--text-muted); float: left; padding: 4px 10px; background-color: var(--bg-primary); border-radius: var(--radius-full); border: 1px solid var(--border-light); font-size: 11px; } /* THEME TOGGLE BUTTON */ .theme-toggle { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background: var(--accent-primary); color: var(--text-inverse); border: none; cursor: pointer; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all var(--transition-base); z-index: 9999; } .theme-toggle:hover { transform: scale(1.1); } .dark-theme .theme-toggle { background: var(--accent-gold); } /* SCROLLBAR */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: var(--radius-full); border: 2px solid var(--bg-secondary); } ::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); } * { scrollbar-width: thin; scrollbar-color: var(--border-dark) var(--bg-secondary); } /* PRINT */ @media print { body { background: white !important; color: black !important; } .menuHead, .theme-toggle, .closeButton { display: none !important; } .divWithContent, .divWithTable { box-shadow: none !important; border: 1px solid #ccc !important; } } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ background-color: rgba(0,0,0,0.5); /* Black background with opacity */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ max-width: 500px; position: relative; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } /*Scheduling*/ .tsPast{ border: 1px solid #eee; background-color: lightgray; } .tsAvailable{ border: 1px solid #eee; background-color: white; } .tsUnAvailable{ border: 1px solid #eee; background-color: lightgray; } .tsBooked{ border: 1px solid #eee; background-color: limegreen; } .tsBookedByTeam{ border: 1px solid #eee; background-color: greenyellow; } .tsBookedByOther{ border: 1px solid #eee; background-color: purple; color: white; font-weight: bolder; } .tsPendingPayment{ border: 1px solid #eee; background-color: orange; } .tsSelected{ border: 1px solid #eee; background-color: yellow; } .tsError{ border: 1px solid red; background-color: red; color: white; } .bowlingCell{ margin-bottom: 0!important; text-align: center; background-color: white!important; padding: 0px!important; border-color: limegreen!important; color: black!important; } .bowlingCell:read-only{ border-color: orange!important; } .bowlingTd{ padding: 5px; } .tree_caret{ cursor: pointer; user-select: none; } .tree_caret::before { content: "\25B6"; color: black; display: inline-block; margin-right: 6px; } .tree_caret-down::before { transform: rotate(90deg); } .tree_nested{ padding-left: 15px; display: none; } .tree_active{ display: block; }