#landing-page,
    #title_page,
    #team-editor,
    #agent-editor,
    #data-editor,
    #ui-editor,
    #xConfiguration-editor {
      /*background: rgb(35,76,135);*/
      height: 800px;
    }

    .toolbarPanel img {
      width: 30px;
      height: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    html,
    body {
      height: 100%;
      margin: 0;
    }

    #mapContainer {
      position: relative;
      /*width: 100%;*/
      height: 700px;
      margin: 0;
    }

    #xui-mapContainer {
      position: relative;
      /*width: 100%;*/
      height: 600px;
      margin: 0;
    }

    #konva-overlay {
      /*for scenario editor*/
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      z-index: 500;
    }

    #xui-konva-overlay {
      /*for scenario editor*/
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      z-index: 500;
    }

    #konva-ui-container {
      margin: 0;
      height: 700px;
      padding: 0;
      top: 0;
      left: 0;
      z-index: 500;
    }

    #ui-editor {
      /*position: relative;*/
      width: 100%;
      height: 900px;
      top: 0;
      left: 0;
    }

    .leaflet-container {
      /* pointer-events: none; */
      z-index: 0;
    }

    .grid-stack {
      background-color: #f0f8ff;
    }

    .grid-stack-item-content {
      background-color: #ede0b0ef;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
    }

    /* Frame Container styling */

    #frameListContainer {
      background: #f8f9fa;
      border-top: 1px solid #dee2e6;
      padding: 8px;
      /*height: 50px;*/
      box-sizing: border-box;
      z-index: 500;
    }

    /* Button row */
    #frameBtns .btn {
      font-size: 0.85rem;
      margin-right: 0.5rem;
    }

    /* Thumbnails wrapper */
    #frameThumbWrapper {
      overflow-x: auto;
      white-space: nowrap;
      height: calc(100% - 34px);
      /* button row height + padding */
    }

    /* Frame thumbnail base style */
    .frame-thumb {
      display: inline-block;
      width: 100px;
      margin-right: 8px;
      border: 2px solid #ccc;
      border-radius: 4px;
      background: #979797;
      text-align: center;
      vertical-align: top;
      cursor: pointer;
    }

    .frame-thumb.selected {
      border: 2px solid #317ff3;
      /* Bootstrap primary color */
    }

    /* Thumbnail image placeholder */
    .frame-thumb .thumb-image {
      height: 60px;
      background: #575757;
      overflow: hidden;
    }

    /* Thumbnail label */
    .frame-thumb .thumb-label {
      padding: 4px 0;
      font-size: 0.85rem;
    }

    body {
      background-color: #f8f9fa;
    }

    .logo-container {
      text-align: center;
      margin-bottom: 30px;
    }

    .logo-container img {
      max-width: 400px;
      height: auto;
    }

    .card {
      border-radius: 12px;
    }

    textarea {
      resize: vertical;
    }

    .hidden {
      display: none !important;
    }