.reply-box {
          margin-top: 10px;
          background-color: #f8f9fa;
          padding: 10px;
          border-radius: 5px;
        }

        @keyframes fadeSlideIn {
          0% {
            opacity: 0;
            transform: translateX(-30px);
          }

          100% {
            opacity: 1;
            transform: translateX(0);
          }
        }

        .qyafyugvkjnbn-item,
        .flagged-bridge-item {
          opacity: 0;
          background-color: #343a40;
          color: #fff;
          padding: 15px;
          margin-bottom: 10px;
          border-radius: 8px;
          transition: box-shadow 0.3s ease;
          animation: fadeSlideIn 0.5s forwards;
        }

        .qyafyugvkjnbn-item a,
        .flagged-bridge-item a {
          color: #ffffff;
          text-decoration: none;
          font-family: 'Sawarabi Mincho', serif;
          font-weight: 700;
        }

        .qyafyugvkjnbn-item a:hover,
        .flagged-bridge-item a:hover {
          text-decoration: underline;
        }

        .qyafyugvkjnbn-item:hover,
        .flagged-bridge-item:hover {
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

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

        .outerframe {
          min-height: 100%;
          position: relative;
        }

        .outerframe>.container {
          padding-bottom: 10rem;
        }

        .outerframe>footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 8rem;
        }

        @import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');

        .recent-posts-container,
        .top-users-container,
        .pending-reviews-container,
        .qyafyugvkjnbns-container,
        .flagged-bridges-container {
          max-height: 600px;
          overflow-y: auto;
          border-radius: 10px;
          padding: 10px;
          background-color: #f8f9fa;
          width: 100%;
          margin-bottom: 20px;
        }

        .recent-posts-container ul,
        .top-users-container ul,
        .pending-reviews-container ul,
        .qyafyugvkjnbns-container ul,
        .flagged-bridges-container ul {
          list-style: none;
          padding: 0;
        }

        .recent-posts-container li,
        .top-users-container li,
        .pending-reviews-container li,
        .qyafyugvkjnbns-container li,
        .flagged-bridges-container li {
          padding: 10px;
          border-bottom: 1px solid #c7bbbb;
        }

        .recent-posts-container li:last-child,
        .top-users-container li:last-child,
        .pending-reviews-container li:last-child,
        .qyafyugvkjnbns-container li:last-child,
        .flagged-bridges-container li:last-child {
          border-bottom: none;
        }

        .recent-posts-container a,
        .pending-reviews-container a,
        .qyafyugvkjnbns-container a,
        .flagged-bridges-container a {
          color: #ffffff;
        }

        .recent-posts-header,
        .pending-reviews-header {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          text-align: center;
          font-family: 'Sawarabi Mincho', serif;
          font-weight: 700;
        }

        .recent-posts-header img,
        .pending-reviews-header img {
          width: 32px;
          height: 32px;
          margin: 0 10px;
        }

        .top-users-container {
          text-align: center;
          font-family: 'Sawarabi Mincho', serif;
          font-weight: 700;
        }

        .top-users-container li {
          opacity: 0;
        }

        @keyframes slideInDelayed {
          0% {
            transform: translateY(20px);
            opacity: 0;
          }

          100% {
            transform: translateY(0);
            opacity: 1;
          }
        }

        .slide-in {
          animation: slideInDelayed 0.5s forwards;
        }

        .gold,
        .silver,
        .bronze {
          background-color: #343a40;
          padding: 10px;
          border-radius: 5px;
          margin-bottom: 10px;
        }

        .user-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          color: #fff;
        }

        .user-card strong {
          font-size: 1.2em;
        }

        .user-card span {
          font-size: 1em;
        }

        .filter-container {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 10px;
          background-color: #343a40;
          border-radius: 5px;
          color: #fff;
          margin-bottom: 20px;
        }

        .filter-buttons {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
        }

        .filter-button {
          background-color: #495057;
          color: #fff;
          border: none;
          padding: 10px;
          border-radius: 5px;
          cursor: pointer;
          margin: 5px;
          font-family: 'Sawarabi Mincho', serif;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .filter-button:hover {
          background-color: #6c757d;
        }

        .filter-button.active {
          background-color: #0056b3;
        }

        .filter-button.rgytsdagf-button {
          margin-left: auto;
          background-color: #dc3545;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .filter-button.rgytsdagf-button:hover {
          background-color: #c82333;
        }

        .rgytsdagf-button i {
          margin-right: 5px;
        }

        #map-container {
          width: 100%;
          margin-bottom: 20px;
        }

        #map {
          width: 100%;
          height: 500px;
          background-color: #f0f0f0;
        }

        .ruegaiuhyb-container {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          flex-wrap: nowrap;
        }

        .ruegaiuhyb {
          padding: 10px 20px;
          cursor: pointer;
          background-color: #343a40;
          color: white;
          border: none;
          font-family: 'Sawarabi Mincho', serif;
          border-radius: 5px;
          font-size: 1rem;
        }

        .ruegaiuhyb.active {
          background-color: #0056b3;
        }

        @media (max-width: 768px) {
          #map {
            height: 400px;
          }

          .recent-posts-container,
          .top-users-container,
          .pending-reviews-container,
          .qyafyugvkjnbns-container,
          .flagged-bridges-container {
            max-height: none;
            overflow-y: visible;
          }

          .form-group {
            margin: 0 auto;
          }

          .input-group {
            width: 100%;
          }

          .ruegaiuhyb-container {
            justify-content: space-around;
          }

          .ruegaiuhyb {
            font-size: 0.9rem;
            padding: 8px 16px;
          }
        }

        @media (max-width: 576px) {
          .filter-button {
            font-size: 0.8rem;
            padding: 8px;
          }

          .ruegaiuhyb-container {
            justify-content: space-between;
          }

          .ruegaiuhyb {
            font-size: 0.8rem;
            padding: 6px 12px;
          }
        }

        @media (max-width: 400px) {
          .filter-button {
            font-size: 0.7rem;
            padding: 6px;
          }

          .ruegaiuhyb-container {
            justify-content: space-between;
          }

          .ruegaiuhyb {
            font-size: 0.7rem;
            padding: 4px 8px;
          }
        }

        .section-title {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .section-title img {
          width: 32px;
          height: 32px;
          margin: 0 10px;
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
          }

          to {
            opacity: 1;
          }
        }

        @keyframes fadeOut {
          from {
            opacity: 1;
          }

          to {
            opacity: 0;
          }
        }

        .fade-in {
          animation: fadeIn 0.5s forwards;
        }

        .fade-out {
          animation: fadeOut 0.5s forwards;
        }

        @keyframes slideIn {
          from {
            transform: translateY(20px);
            opacity: 0;
          }

          to {
            transform: translateY(0);
            opacity: 1;
          }
        }

        .agytgcayegiy-1 {
          color: green !important;
        }

        .agytgcayegiy-2-3 {
          color: orange !important;
        }

        .agytgcayegiy-4 {
          animation: blink 1s infinite;
        }

        @keyframes blink {
          0% {
            color: red;
          }

          50% {
            color: black;
          }

          100% {
            color: red;
          }
        }

        .modal {
          display: none;
          position: fixed;
          z-index: 1000;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0, 0, 0, 0.4);
          padding-top: 100px;
        }

        .modal-content {
          background-color: #fefefe;
          margin: 5% auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
          max-width: 500px;
          text-align: center;
          z-index: 1100;
          border-radius: 10px;
          font-family: 'Sawarabi Mincho', serif;
        }

        .modal-header h2 {
          margin: 0;
          font-size: 1.5rem;
        }

        .modal-footer {
          padding-top: 10px;
          text-align: center;
        }

        .close {
          color: #aaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
        }

        .close:hover,
        .close:focus {
          color: black;
          text-decoration: none;
          cursor: pointer;
        }

        .modal-button {
          background-color: #343a40;
          color: white;
          border: none;
          padding: 10px 20px;
          margin: 10px;
          cursor: pointer;
          border-radius: 5px;
          font-family: 'Sawarabi Mincho', serif;
        }

        .modal-button:hover {
          background-color: #0056b3;
        }