Mold Regulation System 1.05

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Mold Regulation System</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      /* Primary Colors */
      --primary-blue: #0a446d;
      --secondary-blue: #1C7ED6;
      --primary-green: #2e7d32;
      /* Accent Colors */
      --accent-green: #31ad4c;
      --accent-red: #e93b4c;
      --accent-orange: #E08000;
      --accent-teal: #17A2B8;
      /* Background Colors */
      --bgc-body: #ffffff;
      --bgc-modal: #ffffff;
      --bgc-table: #9bc2e0;
      --bgc-table-border: #03203a;
      --bgc-section: #6b9ac2;
      --bgc-input: #ffffff;
      --bgc-input-focus: rgb(180, 243, 251);
      --bgc-input-hover: rgb(255, 252, 209);
      --background-section-light: #e6f2f9;
      /* Border Colors & Radius */
      --border-light: #E9ECEF;
      --border-medium: #CED4DA;
      --border-radius: calc(0.25rem + 0.1vw);
      --border-color-section: #4a4a4a;
      --border-focus: var(--secondary-blue);
      /* Text Colors */
      --font-color-base: #212529;
      --font-color-unit: #1d1d1d;
      --font-color-label: #000000;
      --font-color-muted: #6C757D;
      /* Font Sizes */
      --font-size-root: calc(0.9rem + 0.3vw);
      --font-size-header: calc(0.95rem + 0.2vw);
      --font-size-label: calc(0.85rem + 0.2vw);
      --font-size-input: calc(0.8rem + 0.2vw);
      --font-size-unit: calc(0.65rem + 0.1vw);
      /* Gaps */
      --gap-input-content: calc(1rem + 0.4vw);
      --gap-xxs: 2px;
      --gap-xs: calc(3px + 0.2vw);
      --gap-sm: calc(4px + 0.3vw);
      --gap-md: calc(6px +...