body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: rgba(168, 165, 165, 0.459);
}
.container {
    border: 1px solid rgb(168, 165, 165);
    background-color: white;
    width: 90%;
    height: 40vw;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;  
    z-index: 0;
    overflow-y:auto;
    overflow-x: hidden;
}
.navbar {
    width: 95%;
    align-self:center;
    text-align:end;
    color: rgb(168, 165, 165);
    font-size: 1.5vw;
    margin-bottom: 1.5vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
}
.material-icons {
    font-size: 1.8vw;
    cursor: pointer;
    margin-right: 27vw; 
}
.material-icons:hover {
    color: #2252ff;
}
.fa-bars {
    cursor: pointer;
}
.fa-bars:hover {
    color: #2252ff;
}
.fa-moon-o {
    margin-left: 0.8em;
    cursor: pointer;
}
.fa-moon-o:hover {
    color: #2252ff;
}
.fa-sun-o {
    margin-left: 0.8em;
    cursor: pointer;
}
.fa-sun-o:hover {
    color: #2252ff;
}
/* convert page */
.amount {
    width: 86%;
    height: auto;
    margin-bottom: 1vw;  
    justify-self: center;
    align-self: center;
}
label {
    font-size: 1vw;
    font-family: "robotoregular", Arial, Helvetica, sans-serif;
    color: #9b9b9b;
    padding-left: 0.3vw;
}
form {
    width: 100%;
}
#value {
    width: 93%;
    font-size: 2.1vw;
    border: none;
    outline: none;
    color: #2252ff;
    margin-top: 0.5em;
    padding: 0.3vw;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {  
  -webkit-appearance: none;   
  margin: 0; 
}
.numberInputBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
a {
    color: white;
    margin-top: 2vw;
}
.fa-exchange {
    font-size: 2vw;
    display: inline;
    cursor: pointer;
    color: #2252ff;
    margin-top: 1.5vw;
    margin-right: 0.5vw;
}
.currency {
    width: 112%;
    display: flex;
    flex-direction: column;
}
.turning-into-box {
    margin-bottom: 1.5vw;
    display: flex;
    flex-direction: row;
    justify-content:center;
    margin: 0ch;
    margin-bottom: 1.5vw;
}
#turning-into {
    border: 1px solid rgba(168, 165, 165, 0.548);
    border-radius: 5px;
    color: black;
    width: 85%;
    height: 5vw;
    font-size: 1.5vw;
    font-family: "robotoregular", Arial, Helvetica, sans-serif;
    outline: none;
    align-self: center;
    padding-left: 4.7vw;
    cursor: pointer;
}
.select-currency-img {
    width: 100%; 
    height: 100%;
    border-radius: 15em;
    z-index: 1;
    margin-right:25%;
}
.converted-box {
    margin-bottom: 1.5vw;
    display: flex;
    flex-direction: row;
    justify-content:center;
}
#converted {
    border: 1px solid rgba(168, 165, 165, 0.548);
    border-radius: 5px;
    color: black;
    width: 85%;
    height: 5vw ;
    font-size: 1.5vw;
    font-family: "robotoregular", Arial, Helvetica, sans-serif;
    outline: none;
    z-index: 0;
    align-self: center;
    padding-left: 4.7vw;
    cursor: pointer;
}
hr {
    border:1px solid rgba(168, 165, 165, 0.548);
    width: 97%;
    margin-left: 0.3vw;
}
.transform {
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
}
#convert-btn {
    border: 1px solid #2252ff;
    border-radius: 5px;
    outline: none;
    background-color: #2252ff;
    color: white;
    height: 3.8vw;
    font-size: 2vw;
    cursor: pointer;
    margin-bottom: 1vw;
}
.result {
    width: 85%;
    height: auto;
    color: #2252ff;
    font-size: 1.8vw;
    font-weight:bold;
    text-align: center;
    margin-top: 2.5vw;
    margin-bottom: 1vw;
    align-self: center;
}
p {
    margin: 0vw;
}
span {   
    color: black;
    font-size: 1vw;
}
/* multi-converter */
.multiple-select-box {
    width: 93.5%;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 0;
    margin-bottom: 1.5vw;
}
.select-currency-img {
    width: 3vw;
    height: 3vw;
    border-radius: 16em;
    position:absolute;
    z-index: 1;
    margin-left: 1.2vw;
    margin-top: 1vw;
}
#multiple-select {
    border: 1px solid #cccccc;
    border-radius: 0.2vw;
    /* background-color: white; */
    color: rgb(168, 165, 165);
    width: 100%;
    height: 3.5em;
    font-size: 1.5vw;
    font-family: "robotoregular", Arial, Helvetica, sans-serif;
    outline: none;
    align-self: center;
    cursor: pointer;
    padding-left: 5vw;
    position: relative;
    z-index: 0;
}
#exchange-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.exchange-box {
    background-color: white;
    border: 1px solid #cccccc;
    width: 90.5%;
    height: 9vw;
    display: flex;
    flex-direction: column;
    border-radius: 0.3vw;
    padding: 0.5vw;
    margin-bottom: 1.2vw;
}
.close-icon {
    display: flex;
    flex-direction: column;
    align-items: end;
}
.fa-close {
    color: #7a828c;
    font-size: 1vw;
}
.fa-close:hover {
    color: #2252ff;
    cursor: pointer;
}
#exchange-img {
    width: 3vw;
    height: 3vw;
    border-radius: 5vw;
    margin: 1vw;
}
.currency-symbol {
    color: #2252ff;
    font-size: 2vw;
    margin: 0ch;
}
.info {
    display: flex;
    flex-direction: row;
}
.info1 {
    display: flex;
    flex-direction: row;
    justify-content:center;
}
.info2 {
    width: 80%;
    display: flex;
    flex-direction: column;
    padding-left: 2.5vw;
}
#exchange-input {
    width: 90%;
    border: none;
    border-bottom: 1px solid #cccccc;
    /* background-color: white; */
    font-size: 2vw;
    margin-bottom: 1vw;
    outline: none;
    color: #2252ff;
}
#exchange-input::placeholder {
    color: #2252ff;
}
.currency-info {
    font-size: 1.6vw;
    margin-bottom: 0.7vw;
}
.transform-info {
   font-size: 1.2vw;
}
/*  tooltip */
.tooltip {
    position: relative;
}
.tooltip .tooltiptext {
    visibility: hidden;
    font-size: 1vw;
    font-family: "robotoregular", Arial, Helvetica, sans-serif;
    width: 8vw;
    height: auto;
    background-color: #2252ff;
    color: #fff;
    text-align: center;
    border-radius: 0.5vw;
    padding: 0.8vw 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    margin-left: -5.2vw;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    border-width: 0.3vw;
    border-style: solid;
    border-color: transparent transparent #2252ff transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/*scroll bar */
/* width */
::-webkit-scrollbar {
    width: 0.5vw;
} 
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 1vw; 
} 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #7e7c7c; 
    border-radius: 1vw;  
} 
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #4d4b4b; ;   
}

/*  dark mode */
.dark-mode {
    background-color: #0d1924;
    color: white;
}
.dark-mode-currency {
    background-color: #253d52;
    color: white;
}
.dark-mode-a {
    color: #0d1924;
}
.dark-mode-select {
    background-color: #1a2a38;
}

/* responsive design */
@media only screen and (min-width: 200px) and (max-width: 700px) {
    .container {width: 100%; height: 95vw;}
    .select-currency-img {margin-top: 1.6vw;margin-right:50%;width: 4.5vw;height: 4.5vw;}
    #turning-into {height: 8vw;font-size: 3vw;}
    #converted {height: 8vw;font-size: 3vw;}
    .material-icons {margin-right: 40vw; font-size: 3vw;}
    .currency-info {font-size: 2.7vw;}
    #exchange-input {font-size: 3vw;}
    .currency-symbol {font-size: 3vw;}
    #turning-into {padding-left: 2vw;}
    #converted {padding-left: 6vw;}
    #multiple-select {height: 3.5em;font-size: 2.5vw;padding-left: 6.2vw;}
    #exchange-img {width: 4.5vw;height: 4.5vw;}
    #convert-btn {height: 10vw;font-size: 5vw;}
    .exchange-box {height: 12vw;padding: 0.2vw;margin-bottom: 1.1vw;}
    .navbar {font-size: 2.5vw;}
    .fa-close {font-size: 2vw;}
    label {font-size: 2.3vw;}
    .fa-exchange {font-size: 3.5vw;}
    #value {font-size: 4.5vw;}
    .result {font-size: 3vw;}  
}
@media only screen and (min-width: 700px) and (max-width: 1075px) {
    .container {width: 100%;height: 95vw;}
    .select-currency-img {margin-top: 1.5vw;margin-right:31%;width: 3.5vw;height: 3.5vw;}
    #turning-into {height: 7vw;font-size: 2vw;}
    #converted {height: 7vw;font-size: 2vw;}
    .material-icons {margin-right: 35vw;font-size: 2vw;}
    .currency-info {font-size: 2vw;}
    #exchange-input {font-size: 2vw;}
    .currency-symbol {font-size: 2vw;}
    #turning-into {padding-left: 3vw;}
    #converted {padding-left: 3vw;}
    #multiple-select {height: 3.5em;font-size: 2vw;padding-left: 3vw;}
    #exchange-img {width: 3.5vw;height: 3.5vw;}
    #convert-btn {height: 10vw;font-size: 5vw;}
    .exchange-box {height: 10vw;padding: 0.1vw;margin-bottom: 1vw;}
    .navbar {font-size: 2vw;}
    .fa-close {font-size: 1.5vw;}
    label {font-size: 1vw;}
    .fa-exchange {font-size: 2vw;}
    #value {font-size: 3.5vw;}
    .result {margin-top: 1vw;font-size: 2vw;}
} 
.table-container {
  width: 100%;
  overflow-x: auto; /* ເຮັດໃຫ້ຕາຕະລາງເລື່ອນໄດ້ */
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px; /* ບັງຄັບໃຫ້ມີຄວາມກວ້າງພໍ */
}

.table-container th, .table-container td {
  padding: 6px;
  text-align: center;
  border: 1px solid #ccc;
}
 #convert-btn {
      font-family: "Phetsarath OT", sans-serif;
      font-size: 25px;
      padding: 2px 18px;
      border-radius: 4px;
      border: 1px solid #ccc;
      background: #007bff;
      color: #fff;
      cursor: pointer;
    }