* {
  font-family: "Open Sans", sans-serif !important;
  font-weight: 500;
  font-size: 16px;
}

body {
  background: rgb(42, 35, 45);
  color: white;
}

.top-bar nav {
  display: flex !important;
  width: 100vw !important;
  align-items: center !important;
  background-color: inherit !important;
  justify-content: space-between;
}

.logo {
  flex: 1;
  display: flex;
  align-items: center;
}

.logo a {
  display: flex !important;
  width: 50px !important;
  height: 50px !important;
}

.center {
  justify-self: center;
  background-color: rgb(25, 27, 31);
  width: fit-content;
  padding: 1px;
  border-radius: 16px;
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
  overflow: auto;
  -webkit-box-align: center;
  align-items: center;
}

.input-card-top2 {
  display: flex;
  margin-top: 10px;
}

.input-card-top {
  background: gray !important;
}

.input-img {
  width: 30px;
  height: 30px;
}

.center ul li {
  gap: 10px;
  background: inherit !important;
}

.center ul li a {
  background: none !important;
  color: white !important;
  gap: 50px;
}

.right {
  flex: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.eth-button {
  background: rgb(25, 27, 31) !important;
  border-radius: 10px;
}

.eth-button .ethereum-coin {
  background: rgb(25, 27, 31) !important;
  border-radius: 10px;
  color: inherit !important;
  font-weight: 600 !important;
}

.ethereum-coin1 {
  border-radius: 40% !important;
  border: none;
}

.ethereum-coin1:hover {
  opacity: 0.8;
}

.ethereum-coin1 a {
  color: inherit !important;
  align-items: center !important;
  justify-content: center !important;
}

.eth-button span img {
  width: 30px;
  height: 30px;
}

.right .ethereum-coin {
  display: flex !important;
  align-items: center !important;
  justify-content: start !important;
}

.top-connect button {
  background: rgb(23, 41, 65) !important;
  color: white;
  font-weight: 600;
  opacity: 0.6;
}

.top-connect button:hover {
  opacity: 0.9;
}

.right .ethereum-coin span {
  margin-right: 5px;
}

.main-boby {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 100px;
  left: 200px;
}

.main-boby .swap-contents .swap-contents-card {
  border-radius: 20px;
  height: 300px !important;
  width: 500px;
  background: rgb(25, 27, 31) !important;
}

.card-input input {
  background: rgb(33, 36, 41) !important;
  font-weight: 500;
  font-size: 28px;
  border: none;
}

.input-card-below {
  display: flex !important;
  width: 100% !important;
}

.input-card-below input {
  margin-top: 10px;
  width: 100% !important;
}

.card-input input:focus {
  background: inherit !important;
  outline: none;
  border: none;
}

.card-arrow {
  display: flex;
  width: 100%;
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 40%;
  top: 35%;
  background: rgb(173, 173, 173);
  width: 35px;
  height: 35px;
  color: white;
  border-radius: 50% !important;
  border: 5px solid rgb(24, 26, 30) !important;
  z-index: 99 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 2px;
}

.card-arrow:hover {
  background: rgb(33, 36, 41);
  opacity: 0.5;
}

.connect-wallet-down {
  width: 100% !important;
  height: 50px !important;
  background: rgb(23, 41, 65);
  border-radius: 20px;
  font-weight: 500 !important;
  align-items: center !important;
  cursor: pointer;
  color: rgb(80, 144, 234);
  border: none !important;
  margin-top: 20px;
}

.connect-wallet-down:hover {
  background-color: rgba(19, 54, 98, 0.44);
}

.btn-wallet {
  border-radius: 20px;
  font-weight: 500 !important;
  background-color: rgba(109, 163, 229, 0.44) !important;
  border: 3spx solid rgba(21, 61, 111, 0.44) !important;
  color: rgb(80, 144, 234) !important;
  border: none !important;
  margin-top: 5px;
  padding: 10px;
  cursor: pointer;
}

.input-card-top {
  display: flex;
  background: rgb(33, 36, 41) !important;
  font-weight: 500;
  align-items: center;
  font-size: 28px;
  border: none;
  border-radius: 20px;
  width: 100% !important;
}

.input-card-top input {
  outline: none !important;
  outline-style: none !important;
}

.input-card-top button {
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  padding: 18px;
}

.ethereum-coin1 {
  background: rgb(25, 27, 31) !important;
}

.swap-head {
  display: flex;
}

.input-card-top {
  margin-bottom: 10px;
}

.input-eth div button {
  background-color: rgb(64, 68, 79);
  border-radius: 10px;
}

.input-eth div button img {
  margin-right: 5px;
}

.input-card-top div button {
  height: 30px !important;
  font-weight: 600 !important;
  color: white;
  font-size: 20px;
}

/* pool page style */
.pool-container {
  width: 800px !important;
}

.pool-card-head {
  background: rgb(42, 35, 45) !important;
  display: flex !important;
  width: 100% !important;
}

.pool-card-head {
  width: 100% !important;
  display: flex !important;
  background: rgb(42, 35, 45) !important;
  justify-content: space-between !important;
}

.pool-card-head-left {
  display: flex;
  gap: 10px;
}

.pool-card {
  background: rgb(42, 35, 45) !important;
}

.pool-card2 {
  background: rgb(25, 27, 31) !important;
  display: flex !important;
  border-radius: 5px !important;

  height: 250px !important;
  padding-bottom: 30px !important;
  align-items: center !important;
  justify-content: space-between !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 5px;
  background: rgb(34, 35, 42) !important;
}

.pool-card2 img {
  padding: 20px;
  width: 100px;
  height: 100px;
  align-items: center;
  justify-content: space-between;
}

.card-text {
  max-width: 200px !important;
  margin-bottom: 5px !important;
  text-align: center;
}

.eth-search-modal {
  background: rgb(33, 36, 41) !important;
  border-bottom: none !important;
  margin-top: 100px;
  border-radius: 12px !important;
  width: 400px;
}

.eth-search-modal .modal-body {
  border-bottom: none !important;
  border: none !important;
}

.eth-search-modal .modal-body .modal-search {
  border: 1px solid rgb(106, 103, 103);
  padding: 0px 10px;
  margin-top: 0 !important;
  border-radius: 10px;
}

.eth-search-modal .modal-body .modal-search input {
  color: gray;
  border-radius: 20px;
  width: 100%;
  text-align: center;
}

.search-coin ul {
  display: flex !important;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 15px;
  gap: 5px;
}

.search-coin ul li {
  background: rgb(64, 68, 79);
  border-radius: 5px;
  width: 100px;
  padding: 5px 0 0 0;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-coin ul li img {
  width: 20px;
  display: flex;
  margin-right: 5px;
  align-items: center;
  height: 20px;
}

.search-coin ul li:hover {
  opacity: 0.8;
}

.all-coin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  margin: 0px 0;
  position: relative;
  padding-top: 20px;
  overflow-y: scroll;
}

.all-coin ul {
  width: 100%;
  gap: 10px;
  padding-top: 20px;
  list-style: none;
  display: flex;
  justify-content: start;
  flex-direction: column;
}

.all-coin ul li {
  transition: all 300sm ease;
  display: flex;
  justify-content: start;
  width: 100% !important;
  height: 50px;
  align-items: center;
  padding: 0 5px;
  border-radius: 10px;
}

.all-coin ul li:hover {
  opacity: 0.6;
  cursor: pointer;
  background: rgb(128, 128, 128);
}

.all-coin ul li img {
  width: 20px;
  display: flex;
  margin-right: 5px;
  align-items: center;
  height: 20px;
}

.line-divider {
  color: white;
  background: white;
}

/* pool page style */
.pool-container {
  width: 900px !important;
}

.pool-container .pool-container-card {
  background: none !important;
  border: none;
}

.pool-container .pool-container-card .pool-container-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.pool-container-head .left {
  display: flex !important;
  gap: 10px;
}

.pool-container-head .left div {
  border-radius: 20px !important;
}

.pool-container-body {
  background: rgb(25, 27, 31) !important;
  height: 250px;
  border-radius: 10px;
  padding: 20px;
  justify-content: center !important;
  display: flex;
  width: 100% !important;
}

.pool-container-body div {
  width: 300px;
  display: flex;
  font-weight: 600;
  flex-direction: column;
  justify-content: space-between;
}

.pool-container-body div div {
  display: flex !important;
  width: 100% !important;
  justify-content: center;
  text-align: center;
}

.pool-container-body div div div {
  width: 100% !important;
  justify-content: center;
  align-items: center;
}

.pool-container-body div div div img {
  width: 70px;
}

/* Pool footer */
.pool-footer {
  margin-top: 10px;
}

.pool-footer-card {
  background: rgb(42, 35, 45) !important;
  border: 0.1px solid rgb(216, 212, 212);
  height: 100px;
  opacity: 0.3;
  transition: all 300ms ease;
}

.pool-footer-card:hover {
  opacity: 0.7;
  box-shadow: 0px 0px 16px -10px rgba(0, 0, 0, 1);
  -webkit-box-shadow: 0px 0px 16px -10px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 16px -10px rgba(0, 0, 0, 1);
}

.pool-footer-card .card-body a {
  text-decoration: none;
  font-weight: 600;
  color: white;
}

/* Vote */
.vote-containter {
  display: flex;
}

.vote-containter .vote-containter-card {
  background: url("img/banner.png");
  width: 600px;
  border-radius: 20px;
  height: 140px;
  background-repeat: no-repeat;
}

.vote-body {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  width: 100% !important;
  background: red !important;
  background: transparent !important;
}

.vote-body .vote-body-head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.vote-body .vote-body-head .vote-body-list {
  display: flex !important;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
}

.vote-body-list div {
  display: flex !important;
  width: 100% !important;
  align-items: center;
  justify-content: space-between;
  padding: 9 5px;
  margin-top: 20px;
  transition: all 300sm ease;
}

.vote-body-list div:hover {
  opacity: 0.7;
  cursor: pointer;
}

.token-image {
  width: 30px;
}