@font-face {
    font-family: "Helvetica";
    font-weight: normal;
    src: url("[(@{/fonts/Helvetica.ttf})]");
}

* {
    font-family: "Helvetica";
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


 h1 {
    margin: 0px;
 }

 .bodyStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    margin: 0;
    background-color: #000000;
}

 /* Container styles */
 .tracker-container {
    width: 100%;
    height: 95%;
    overflow: auto;
    background-color: #111519;
    padding: clamp(16px, min(3vh, 3vw), 96px);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: clamp(10px, min(2vh, 2vw), 60px);
    margin-right: clamp(10px, min(2vh, 2vw), 60px);
 }

 .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(16px, min(3vh, 3vw), 96px);
    text-align: left;
    width: 100%;

    h1 {
        font-size: clamp(24px, min(4vh, 4vw), 72px);
        color: #FFFFFF;
    }
 }

.location-body {
    background-color: #191F22;
    padding: clamp(16px, min(3vh, 3vw), 96px);
    padding-top: clamp(40px, min(3vh, 3vw), 96px);
    padding-bottom: clamp(40px, min(3vh, 3vw), 96px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(16px, min(3vh, 3vw), 96px);
    border-radius: 5px;
    font-family: "Helvetica";
    color: #5BCB81;
}

 /* Header styles */
 .status-header {
    padding: clamp(16px, min(3vh, 3vw), 96px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(16px, min(3vh, 3vw), 96px);
    border-radius: 5px;
    font-family: "Helvetica";
 }

 .status-header-error {
    background-color: #281616;
    color: #CB5F5B;
 }

 .status-header-success {
    background-color: #162822;
    color: #5BCB81;
  }

 .status-header-grey {
    background-color: #A3A19C;
    color: #3E3C39;
  }

  .status-button-background {
    background-color: rgba(68, 68, 68, 0.1) !important;
  }

.status-header-blank {
  background-color: #191F22;
  color: #fff;
}

 .status-header-warning {
    background-color: #3D3525;
    color: #FDCB63;
 }

 .status-info {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
 }

 .status-icon {
    vertical-align: middle;
 }

 .status-connected {
     font-size: clamp(35px, 4vh, 80px);
     font-weight: 700;
     margin-left: clamp(8px, min(1vh, 1vw), 48px);
     display: inline-block; vertical-align: middle;
     white-space: nowrap;
 }

 .status-time {
     font-size: clamp(16px, min(2.8vh, 2.8vw), 96px);
     opacity: 0.9;
 }

 .device-id {
     font-size: clamp(16px, min(2.8vh, 2.8vw), 96px);
     font-weight: 500;
 }

 /* Content styles */
 .content-container {
     display: flex;
     width: '100%';
     margin-bottom: 10px;
 }

  .button-container {
      width: 100%;
      margin-top: clamp(16px, min(3vh, 3vw), 96px);
  }

 .map-container {
     width: 100%;
     height: 200px;
     background-color: #f2f2f2;
     position: relative;
     border-radius: 5px;
 }

 .map-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 5px;
 }

 .location-marker {
     position: absolute;
     width: 12px;
     height: 12px;
     background-color: #4285F4;
     border-radius: 50%;
     top: 50%;
     left: 40%;
     transform: translate(-50%, -50%);
     border: 2px solid white;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
 }

 .location-info {
     background-color: #3a3f3c;
     width: 100%;
     padding: 16px;
     border-radius: 5px;
     margin-left: 6px;
 }

 .sent-info {
    background-color: #3a3f3c;
     padding: 16px;
     border-radius: 5px;
     margin-left: 6px;
     margin-bottom: 10px;
 }

 .location-section {
     margin-bottom: 12px;
 }

 .location-heading {
     font-size: clamp(24px, min(4.0vh, 4.0vw), 96px);
     font-weight: 700;
     font-family: "Helvetica";
     color: #FFFFFF;
     margin-bottom: clamp(8px, min(1.5vh, 1.5vw), 48px);
}

 .location-city {
     font-size: clamp(24px, min(4.0vh, 4.0vw), 96px);
     font-weight: 400;
     color: #FFFFFF;
     font-family: "Helvetica";
     padding-left: clamp(16px, min(3vh, 3vw), 96px);
 }

 .last-synced {
     font-size: clamp(24px, min(4.0vh, 4.0vw), 96px);
     font-weight: 400;
     color: #FFFFFF;
     font-family: "Helvetica";
 }

 .location-coords {
     font-size: clamp(14px, 2.2vh, 24px);
     color: #fff;
     margin: 0;
     display: flex;
     align-items: center;
 }

 /* For the current location marker */
 .current-location-marker {
     position: absolute;
     width: 12px;
     height: 12px;
     background-color: #f44336;
     border-radius: 50%;
     bottom: 30%;
     right: 30%;
     transform: translate(-50%, -50%);
     border: 2px solid white;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
 }

.container {
    display: flex;
    width: 100%;
}

.column {
    flex: 1;
    width: 100%;
}

.mr {
    margin-right: 10px;
}

.info-label {
  font-size: 14px;
  margin-bottom: 2px;
}

.info-value {
    font-size: clamp(35px, 4vh, 80px);
    font-weight: 400;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-family: "Helvetica";
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.see-all-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px 36px;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 300px;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 400;
    font-size: clamp(35px, 4vh, 80px);
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.uit-text {
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(35px, 4vh, 80px);
    align-items: center;
    text-align: center;
}

.uit-count {
    padding: 4px 8px;
    margin-right: 12px;
    margin-left: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-family: 'Helvetica';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(35px, 4vh, 80px);
    align-items: center;
    text-align: center;
}

.uit-block {
    display: flex;
    align-items: center;
    width: 50%;
    justify-content: space-between;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.btn {
  font-size: clamp(20px, min(4.0vh, 4.0vw), 96px);
  padding: clamp(20px, min(2vh, 2vw), 72px) clamp(20px, min(3vh, 3vw), 96px);
  border-radius: 12px;
  border: none;
  font-weight: 400;
  cursor: pointer;
    font-family: "Helvetica";
  color: white;
  width: 100%;
  margin: clamp(8px, min(1.5vh, 1.5vw), 48px) 0;
}

.btn-help {
  background-color: #3666A6;
}

.btn-settings {
  background-color: #191F22;
}

.btn:hover {
  opacity: 0.9;
}

.vin-container {
     background-color: #3a3f3c;
     padding: 16px;
     border-radius: 5px;
     margin-left: 6px;
     margin-bottom: 10px;
 }

 .input {
     background-color: #1E2023;
     color: white;
     border-radius: 50px;
     font-size: 16px;
     padding: 10px;
     width: calc(100% - 20px);
     margin-bottom: 20px;
     border-width: 0;
 }

 .faq-container {
    max-width: 500px;
    margin: clamp(20px, min(4vh, 4vw), 120px) auto;
    background: #111519;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.3);
    padding: clamp(16px, min(3vh, 3vw), 96px);
    min-height: 300px;
}

.title {
    font-size: clamp(24px, min(4vh, 4vw), 72px);
    color: #FFFFFF;
    font-weight: 700;
    font-family: "Helvetica";
    margin-bottom: clamp(16px, min(3vh, 3vw), 96px);
    text-align: left;
    width: 100%;
}

.faq-title {
    font-size: clamp(20px, min(3.5vh, 3.5vw), 84px);
    font-weight: bold;
    margin: 0 0 clamp(16px, min(3vh, 3vw), 96px) clamp(24px, min(4vh, 4vw), 144px);
    letter-spacing: 1px;
}
.faq-item {
    background: #191F22;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0;
    margin-bottom: clamp(24px, min(4vh, 4vw), 120px);
}
.faq-item:last-child {
    margin-bottom: 0;
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(24px, min(4.0vh, 4.0vw), 96px);
    padding: clamp(20px, min(2vh, 2vw), 72px) clamp(16px, min(3vh, 3vw), 96px);
    cursor: pointer;
    background: none;
    color: #FFFFFF;
    border: none;
    outline: none;
    width: 100%;
    transition: background 0.2s;
}
.faq-answer {
    display: none;
    padding: clamp(16px, min(3vh, 3vw), 96px) clamp(16px, min(3vh, 3vw), 96px) clamp(12px, min(2vh, 2vw), 72px) clamp(24px, min(5vh, 5vw), 144px);
    color: #FFFFFF;
    font-size: clamp(24px, min(4.0vh, 4.0vw), 96px);
}
.faq-item.open .faq-answer {
    display: block;
}
.arrow {
    transition: transform 0.2s;
}
.faq-item.open .arrow {
    transform: rotate(180deg);
}
@media (max-width: 600px) {
    .faq-container {
        max-width: 98vw;
        padding: 0;
    }
    .faq-title, .faq-question, .faq-answer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.language-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.language-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 5px;
    background-color: #191F22;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 4px;
    border: 1px solid #363637;
    border-radius: 4px;
    width: 100%;
    max-height: 40vh;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #3666A6 #191F22;
}

/* Webkit browsers (Chrome, Safari, Edge) - Always visible scrollbar */
.language-dropdown-content::-webkit-scrollbar {
    width: 8px;
    display: block;
}

.language-dropdown-content::-webkit-scrollbar-track {
    background: #191F22;
    border-radius: 4px;
}

.language-dropdown-content::-webkit-scrollbar-thumb {
    background: #3666A6;
    border-radius: 4px;
}

.language-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #3666A6;
}

.language-dropdown-content a {
    color: #FFFFFF;
    padding: clamp(12px, min(2vh, 2vw), 72px) clamp(16px, min(3vh, 3vw), 96px);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: clamp(16px, min(2.8vh, 2.8vw), 96px);
    font-family: "Helvetica";
    width: 100%;
    box-sizing: border-box;
}

.language-dropdown-content a:hover {
    background-color: #191F22;
}

.language-dropdown-content a img {
    display: none;
}

.language-option.selected img {
    display: block;
}

.language-option {
    font-size: clamp(16px, min(2.8vh, 2.8vw), 96px);
    font-family: "Helvetica";
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: clamp(8px, min(1.5vh, 1.5vw), 48px);
}

.language-option .icon-wrapper {
    width: clamp(20px, min(2.5vh, 2.5vw), 60px);
    height: clamp(20px, min(2.5vh, 2.5vw), 60px);
}

.check-mark {
    display: none;
    color: #3666A6;
    margin-left: 8px;
}

.language-option.selected .check-mark {
    display: inline-block;
}

.language-dropdown-content.show {
    display: flex;
    flex-direction: column;
}

.faq-answer li {
    margin-bottom: clamp(12px, min(2vh, 2vw), 72px);
    font-size: clamp(24px, min(4.0vh, 4.0vw), 96px);
    line-height: 1.5;
}

.faq-answer li:last-child {
    margin-bottom: 0;
}

/* Add styles for all lists */
ul, ol {
    list-style-position: inside;
    padding-left: clamp(16px, min(3vh, 3vw), 96px);
}

ul li, ol li {
    margin-bottom: clamp(16px, min(3vh, 3vw), 96px);
    line-height: 1.5;
}

ul li:last-child, ol li:last-child {
    margin-bottom: 0;
}

/* Link styles - make links white */
a {
    color: #FFFFFF;
    text-decoration: none;
}

a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

a:visited {
    color: #FFFFFF;
}

a:active {
    color: #FFFFFF;
}

/* Specific styles for ordered lists */
ol {
    counter-reset: item;
    /* list-style-type: none; */
    padding-left: clamp(24px, min(4vh, 4vw), 120px);
}

ol li {
    position: relative;
    counter-increment: item;
}

ol li::before {
    /* content: counter(item) "."; */
    position: absolute;
    left: clamp(-24px, min(-4vh, -4vw), -120px);
    color: #FFFFFF;
    font-weight: bold;
}

.icon-wrapper {
    width: clamp(40px, min(7vh, 7vw), 72px);
    align-items: center;
    height: clamp(40px, min(7vh, 7vw), 72px);
    justify-content: center;
    display: flex;
}

.icon-wrapper svg {
    width: 35px;
    height: 35px;
}

.icon-wrapper-close {
    width: clamp(24px, min(3vh, 3vw), 72px);
    height: clamp(24px, min(3vh, 3vw), 72px);
    align-items: center;
    justify-content: center;
    display: flex;
}

.icon-wrapper-close svg {
    width: 100%;
    height: 100%;
}

.divider {
    width: 1px;
    height: clamp(32px, min(5vh, 5vw), 96px);
    background-color: #3B4145;
    margin: 0 clamp(16px, min(2.5vh, 2.5vw), 48px);
}

/* UIT Codes Modal Styles */
.uit-codes-container {
    width: 100%;
    margin: clamp(20px, min(4vh, 4vw), 120px) auto;
    background: #111519;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.3);
    padding: clamp(16px, min(3vh, 3vw), 96px);
    min-height: 300px;
    display: none;
}

.uit-codes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(16px, min(3vh, 3vw), 96px);
    width: 100%;
}

.uit-codes-title {
    font-size: clamp(24px, min(4vh, 4vw), 72px);
    color: #FFFFFF;
    font-weight: 700;
    font-family: "Helvetica";
    margin: 0;
}

.uit-codes-list {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: clamp(8px, min(1vh, 1vw), 24px);
    scrollbar-width: thin;
    scrollbar-color: #3B4145 #191F22;
}

/* Webkit browsers (Chrome, Safari, Edge) - Always visible scrollbar */
.uit-codes-list::-webkit-scrollbar {
    width: 8px;
    display: block;
}

.uit-codes-list::-webkit-scrollbar-track {
    background: #191F22;
    border-radius: 4px;
}

.uit-codes-list::-webkit-scrollbar-thumb {
    background: #3B4145;
    border-radius: 4px;
}

.uit-codes-list::-webkit-scrollbar-thumb:hover {
    background: #4A5055;
}

.uit-code-item {
    display: flex;
    align-items: center;
    background: #191F22;
    padding: clamp(16px, min(2.5vh, 2.5vw), 72px) clamp(16px, min(3vh, 3vw), 96px);
    margin-bottom: clamp(12px, min(2vh, 2vw), 48px);
    border-radius: 4px;
    gap: clamp(16px, min(3vh, 3vw), 96px);
    font-family: "Helvetica";
    color: #FFFFFF;
}

.uit-code-item:last-child {
    margin-bottom: 0;
}

.uit-code-number {
    font-size: clamp(20px, min(3.5vh, 3.5vw), 84px);
    font-weight: 400;
    color: #A3A19C;
    min-width: clamp(24px, min(4vh, 4vw), 72px);
}

.uit-code-numeric {
    font-size: clamp(18px, min(3vh, 3vw), 72px);
    font-weight: 400;
    color: #FFFFFF;
    flex: 1;
    letter-spacing: clamp(1px, min(0.2vh, 0.2vw), 4px);
}

.uit-code-alpha {
    font-size: clamp(18px, min(3vh, 3vw), 72px);
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: clamp(1px, min(0.2vh, 0.2vw), 4px);
}