Minjin1050/mn-geocoding-api

1body {2  font-family: sans-serif;3  background-color: #f4f7f6;4  color: #333;5  margin: 0;6  padding: 20px;7  display: flex;8  justify-content: center;9}10 11.container {12  background: #ffffff;13  padding: 30px;14  border-radius: 8px;15  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);16  max-width: 800px;17  width: 100%;18}19 20h1 {21  color: #1a73e8;22  text-align: center;23  border-bottom: 2px solid #e0e0e0;24  padding-bottom: 10px;25}26 27.input-section {28  display: flex;29  gap: 10px;30  margin-bottom: 20px;31}32 33#addressInput {34  flex-grow: 1;35  padding: 10px 15px;36  border: 1px solid #ccc;37  border-radius: 4px;38  font-size: 16px;39}40 41#geocodeButton {42  background-color: #1a73e8;43  color: white;44  border: none;45  padding: 10px 20px;46  border-radius: 4px;47  cursor: pointer;48  font-size: 16px;49  transition: background-color 0.3s;50}51 52#geocodeButton:hover {53  background-color: #1558b3;54}55 56.results-section,57.feedback-section {58  margin-top: 20px;59  padding: 15px;60  border: 1px solid #e0e0e0;61  border-radius: 4px;62}63 64.results-section h2,65.feedback-section h2 {66  color: #333;67  margin-top: 0;68}69 70#loading {71  color: #1a73e8;72  font-weight: bold;73}74 75.hidden {76  display: none;77}78 79.error {80  color: red;81  font-weight: bold;82  margin-top: 10px;83}84 85#resultsOutput p {86  margin: 5px 0;87}88 89#resultsOutput strong {90  min-width: 150px;91  display: inline-block;92}93 94/* Санал хүсэлт */95.feedback-section {96  text-align: center;97}98 99.feedback-btn {100  padding: 8px 15px;101  margin: 5px;102  border: none;103  border-radius: 4px;104  cursor: pointer;105  font-weight: bold;106  transition: opacity 0.3s;107}108 109#correctBtn {110  background-color: #00a65a;111  color: white;112}113 114#incorrectBtn {115  background-color: #dc3545;116  color: white;117}118 119.feedback-btn:disabled {120  opacity: 0.5;121  cursor: not-allowed;122}123.marker-pin {124  width: 24px;125  height: 24px;126  border-radius: 50% 50% 50% 0;127  position: absolute;128  transform: rotate(-45deg);129  left: 50%;130  top: 50%;131  margin: -15px 0 0 -15px;132  display: flex;133  align-items: center;134  justify-content: center;135  color: white;136  font-weight: bold;137  font-size: 12px;138  border: 2px solid white;139}140.marker-pin span {141  transform: rotate(45deg);142}143