.main {
  border-radius: 12px;
  margin-bottom: 12px;
  background: rgba(42, 38, 47);
}

.actions {
  padding: 24px;
}

/* Rent */

.price {
  display: flex;
  flex-direction: column;
}

.price .title,
.periodTitle {
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  color: #736e7d;
}

.periodTitle {
  margin-bottom: 8px;
}

.price .content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-bottom: 24px;
}

.perDay {
  font-size: 15px;
}

.priceInFiat {
  margin-left: 5px;
  font-size: 15px;
  color: #736e7d;
  line-height: 1.5;
}

.priceInMana:global(.ui.header) {
  margin-bottom: unset;
  font-size: 21px;
}

.rent:global(.ui.button) {
  width: 100%;
  margin-top: 24px;
}

/* View selector */

.viewSelector {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  justify-content: space-between;
}

.viewOption {
  flex: 1 1 auto;
  width: 100%;
  background: rgba(31, 27, 35);
  text-align: center;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 0;
  padding-right: 0;
  color: inherit;
  font: inherit;
  outline: inherit;
  cursor: pointer;
  border: none;
  font-weight: 500;
  font-size: 17px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.selectedViewOption {
  background: rgba(42, 38, 47);
  cursor: auto;
}

.upperMessage {
  margin-bottom: 20px;
  font-size: 16px;
}

.upperMessageDescription {
  font-size: 13px;
}

.saleButtons {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.fullWidth > .bid {
  margin-top: 8px !important;
}

.bid {
  background: rgba(115, 110, 125, 0.24) !important;
}

.manage:global(.ui.button) {
  margin-top: 24px;
  background-color: var(--superGray);
}

.manage:global(.ui.button):hover {
  background-color: var(--superGrayHovered);
}

.manage_in_builder:global(.ui.button) {
  margin-bottom: 15px;
}

.bid_manage_in_builder:global(.ui.button.secondary) {
  background-color: var(--superGray);
}

.bid_manage_in_builder:global(.ui.button.secondary):hover {
  background-color: var(--superGrayHovered);
}

.fullWidth {
  width: 100%;
}

.priceValue {
  margin-bottom: 20px;
}

.message {
  text-align: center;
  color: white;
  font-size: 15px;
  background-color: rgba(115, 110, 125, 0.24);
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

.rentedUntil {
  font-weight: 800;
}

.notEnoughMana {
  margin-top: 20px;
  color: var(--sunish);
}
