#settings {
  margin: 0;
  display: none;
  flex-direction: column;
  width: 100%;
  gap: 20px;
  overflow: visible;
  font-size: var(--font-size-3);
  align-items: center;
  flex: 1;
}
#settings.open {
  display: flex;
}
#settings .settings-header {
  width: 100%;
  justify-content: space-between;
  height: fit-content;
}
#settings .settings-header,
#settings .settings-header > p,
#settings .settings-body .restaurant-settings .content .setting .head > p {
  display: flex;
  align-items: center;
}
#settings .settings-header .pagination {
  justify-content: flex-start;
}
#settings .settings-body {
  height: calc(100vh - 194px);
  overflow-y: scroll;
}
#settings .settings-body .header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}
#settings .settings-body .header > label {
  gap: 10px;
  font-size: var(--font-size-2);
  align-items: center;
  color: var(--gray-4);
  flex-direction: row-reverse;
}
#settings .settings-body .header > label input ~ span {
  color: var(--gray-4);
}
#settings .settings-body .header > label input:checked ~ span {
  color: var(--black);
}
#settings .restaurant-settings,
#settings .cuisines,
#settings .payment-settings,
#settings .location {
  display: none;
}
#settings .restaurant-settings.show,
#settings .cuisines.show,
#settings .payment-settings.show,
#settings .location.show {
  display: flex;
}
#settings .settings-body,
#settings .settings-body .restaurant-settings .content .setting,
#settings .settings-body .restaurant-settings .content .setting .head,
#settings .settings-body .restaurant-settings .content .setting .body {
  width: 100%;
}
#settings .toggle-container.enabled,
#settings .toggle-container.setting.enabled .floating-controls input + label,
#settings .cuisine-container button.enabled {
  background-color: var(--green-1);
}
#settings .restaurant-settings {
  flex-direction: column;
}
#settings .settings-body .restaurant-settings .content .setting .head > p {
  gap: 10px;
}
#settings
  .settings-body
  .restaurant-settings
  .content
  .setting.enabled
  .head
  > p {
  color: var(--blue-2);
  gap: 10px;
}
#settings .toggle-container.disabled,
#settings .toggle-container.disabled .floating-controls input + label,
#settings .cuisine-container button.disabled {
  background-color: var(--gray-1);
}
#settings .settings-body .restaurant-settings .content {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
#settings .settings-body .restaurant-settings .content .setting {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
#settings .settings-body .restaurant-settings .content .setting:nth-child(1),
#settings .settings-body .restaurant-settings .content .setting:nth-child(4),
#settings .settings-body .restaurant-settings .content .setting:nth-child(5) {
  grid-column: 1 / span 2;
}
#settings .settings-body .restaurant-settings .content .setting .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#settings .settings-body .restaurant-settings .content .setting .head img {
  cursor: pointer;
}
#settings .settings-body .restaurant-settings .content .setting .head .time {
  color: var(--blue-2);
  border: 1px solid #c6e0fc;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: var(--font-size-2);
}
#settings .settings-body .restaurant-settings .content .setting .body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-top: 20px;
}
#settings .settings-body .restaurant-settings .body .floating-controls button,
#settings .settings-body .restaurant-settings .body .floating-controls input,
#settings .settings-body .restaurant-settings .body .floating-controls .hint {
  margin: 0;
}
#settings .settings-body .restaurant-settings .body .floating-controls .hint {
  margin-top: 5px;
}
#settings
  .settings-body
  .restaurant-settings
  .body
  .floating-controls
  input
  + label {
  top: -6px;
  font-size: var(--font-size-1);
}
#settings > .settings-body.hide-scrollbar > div.restaurant-settings.show .floating-controls .right-arrow{
  width: 13px!important;
  height: auto;
}
#settings .cuisines,
#settings .cuisine-container {
  width: 100%;
}
#settings .cuisine-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border: 1px solid var(--gray-3);
  padding: 20px;
  border-radius: 20px;
  justify-content: space-between;
}
#settings .cuisine-container button {
  width: 130px;
  padding-block: 10px;
  justify-content: space-between;
  color: var(--gray-7);
}
#settings .payment-settings,
#settings .payment-settings .payment-container {
  width: 100%;
}
#settings .payment-settings .payment-container {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding-block: 30px;
}
#settings .payment-settings .payment-container .payment-type {
  display: flex;
  flex-direction: column;
  width: 50%;
  gap: 40px;
}
#settings .payment-type .online,
#settings .payment-type .online > p {
  display: flex;
  align-items: center;
}
#settings .payment-type .online {
  width: 100%;
  justify-content: space-between;
}
#settings .payment-type .online > p {
  gap: 10px;
  color: var(--black);
}
#settings .payment-type .online > button {
  color: var(--blue-2);
  font-size: var(--font-size-2);
}
#settings .payment-type img {
  border-radius: 10px;
  width: 40px;
}
#settings .payment-type .online img {
  padding: 10px 5px;
  background-color: var(--red-1);
  height: 40px;
}
#settings .payment-type .cash img {
  background-color: var(--gray-2);
  height: 35px;
  padding: 10px;
}
#settings .payment-type .cash {
  display: flex;
  gap: 10px;
}
#settings .payment-type .cash > div,
#settings .payment-terms .content {
  display: flex;
  flex-direction: column;
  color: var(--gray-5);
  gap: 3px;
}
#settings .payment-type .cash > div > p,
#settings .payment-terms .content > p {
  font-size: var(--font-size-2);
  width: 80%;
}
#settings .payment-settings .payment-container .payment-terms {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin-block: 80px;
}
#settings .location {
  width: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  padding-block: 30px;
}
#settings .location.show {
  display: flex;
}
#settings .location .location-content,
#settings .location .location-content form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#settings .location .location-content #map2 {
  margin-bottom: 20px;
  width: 800px !important;
}
#settings .location .location-content form {
  width: 100%;
}
#settings > .update-button {
  display: none;
  margin-bottom: 30px;
}
#settings .settings-header .pagination.mobile {
  display: none;
}
@media (max-width: 1002px) {
  #settings
    .settings-body
    .restaurant-settings
    .content
    .setting:nth-child(4)
    .body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 840px) {
  #settings {
    padding-inline: 20px;
  }
  #settings .settings-body .restaurant-settings .content .setting:nth-child(2),
  #settings .settings-body .restaurant-settings .content .setting:nth-child(3) {
    grid-column: 1 / span 2;
  }
}
@media (max-width: 760px) {
  #settings > .settings-header > .update-button {
    display: none;
  }
  #settings > .update-button {
    display: flex;
  }
  #settings .settings-body {
    height: calc(100vh - 266px);
    overflow-y: scroll;
  }
  #settings .location .location-content #map2 {
    margin-bottom: 20px;
    width: calc(100vw - 60px) !important;
  }
}
@media (max-width: 600px) {
  #settings .settings-body .restaurant-settings .content .setting {
    padding-inline: 0;
  }
  #settings
    .settings-body
    .restaurant-settings
    .content
    .setting:nth-child(1)
    .body,
  #settings
    .settings-body
    .restaurant-settings
    .content
    .setting:nth-child(2)
    .body,
  #settings
    .settings-body
    .restaurant-settings
    .content
    .setting:nth-child(3)
    .body,
  #settings
    .settings-body
    .restaurant-settings
    .content
    .setting:nth-child(4)
    .body,
  #settings
    .settings-body
    .restaurant-settings
    .content
    .setting:nth-child(5)
    .body {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  #settings .toggle-container.enabled,
  #settings .toggle-container.disabled {
    background-color: var(--white);
  }
  #settings .settings-header .pagination:first-child {
    display: none;
  }
  #settings .settings-header .pagination.mobile {
    display: flex;
    gap: 15px;
  }
  #settings .settings-body .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  #settings .settings-body .header > label {
    width: 200px;
    justify-content: space-between;
  }
  #settings .payment-settings .payment-container {
    flex-direction: column;
    gap: 38px;
  }
  #settings .payment-settings .payment-container .payment-type,
  #settings .payment-settings .payment-container .payment-terms,
  #settings .payment-type .cash > div > p,
  #settings .payment-terms .content > p {
    width: 100%;
  }
  #settings .payment-settings .payment-container .payment-terms {
    margin-block: 0;
  }
  #settings .location .location-content #map2 {
    height: 250px;
  }
}
@media (max-width: 370px) {
  #settings .cuisine-container button {
    width: 100%;
  }
}