:root {
      --input-transition-duration: 0.3s;
      --button-transition-duration: 0.3s;
      --loading-overlay-duration: 2s;
      --background-color: #ecf0f3;
      --overlay-color: rgba(255, 255, 255, 0.9);
      --button-background: #40A9FF;
      --button-text: #fff;
      --button-disabled: #ccc;
      --input-hover-background: #e0e0e0;
      --input-focus-background: #d3ffd3;
      --input-border: 1px solid var(--Daybreak-Blue-blue-6, #1890ff);
      --input-background: var(--Gray-gray-1, #fff);
      --input-box-shadow: 2px 3px 4px 0px rgba(24, 144, 255, 0.5);
    }

    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-image: url(./image.jpg);

    }

    .input-field {
      position: relative;
      display: flex;
      width: 170px;
      padding: 8px 12px;
      align-items: center;
      gap: 10px;
      margin-right: 10px;
      border-radius: 2px;
      border: var(--input-border);
      background: var(--input-background);
      box-shadow: var(--input-box-shadow);
      transition: background-color var(--input-transition-duration) ease;
    }

    .input-field:hover {
      background-color: var(--input-hover-background);
    }

    .input-field:focus-within {
      background-color: var(--input-focus-background);
    }

    .input-popup {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--overlay-color);
      padding: 8px;
      border-radius: 4px;
      font-size: 14px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0s linear 0.3s;
      z-index: 1;
    }

    .input-field:hover .input-popup[data-tippy-content="hover"],
    .input-field:focus-within .input-popup[data-tippy-content="focused"] {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s, visibility 0s;
    }

    .input-field input:placeholder-shown + .input-popup[data-tippy-content="typing"] {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0s linear 0.3s;
    }

    .input-field input:not(:placeholder-shown) + .input-popup[data-tippy-content="typing"] {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s, visibility 0s;
    }

    .button {
      padding: 10px;
      background-color: var(--button-background);
      color: var(--button-text);
      border: none;
      border-radius: 2px;
      cursor: pointer;
      transition: all var(--button-transition-duration) ease;
      display: inline-flex;
      padding: 8px 16px;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .button:disabled {
      background-color: var(--button-disabled);
      cursor: not-allowed;
    }

    #loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--overlay-color);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--loading-overlay-duration) ease,
        visibility 0s var(--loading-overlay-duration) step-end;
      z-index: 2;
    }

    .loading .input-field,
    .loading .button {
      opacity: 0.5;
    }

    .loading #loading-overlay {
      opacity: 1;
      visibility: visible;
    }