* {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
body,
html {
  height: 100%;
  width: 100%;
}
header {
  color: #fff;
  background-color: #ff6b0b;
  height: 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
main {
  height: 94%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
select {
  margin-left: 1%;
  height: 75%;
  border-radius: 0.3rem;
  padding-left: 5px;
  padding-right: 20px;
  font-size: large;
  font-weight: 700;
  height: 80%;
  border: 0;
  box-shadow: 2px 2px 6px #d3d3d3;
}
option {
  font-size: large;
}
ul {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
li {
  background-color: #f5f5f5;
  box-shadow: 2px 2px 8px #a9a9a9;
  width: 100%;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 0.3rem;
}
input {
  cursor: pointer;
}
.liTextCode {
  width: 30%;
  display: flex;
  justify-content: start;
  align-items: center;
  align-self: center;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 1rem !important;
  font-weight: 700;
}
.liTextUses {
  text-align: center;
}
.liTextDateCreated,
.liTextDateExpired {
  align-self: center;
  width: 80%;
  text-align: center;
}
.liTextDateExpired {
  font-weight: 700;
}
.liTextDateCreated::-webkit-calendar-picker-indicator {
  display: none;
}
#apikeySection {
  justify-content: center;
}
#apikeyInput {
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 200px;
  padding: 0.5rem;
}
#apikeyLabel {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: large;
}
#apikeyCheckbox {
  width: 15px;
  height: 15px;
  margin-right: 1rem;
}
#loginButton {
  margin-top: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.cursorDefault {
  cursor: default;
}
#removeCouponCode {
  margin-bottom: 4rem;
}
.liID {
  display: none;
}
.removeButton {
  fill: red;
}
.section {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  overflow-y: scroll;
}
#couponsCount,
#usesCount {
  margin-left: 0.5rem;
}
#listSectionHeader {
  width: 98%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: larger;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 2px 2px 6px #d3d3d3;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
#couponsSort {
  height: 100%;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
#couponsSortContainer {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  margin-right: 1rem;
}
#logoutButton {
  height: 60%;
  font-weight: 700;
}
#modalBackground {
  background-color: #000;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modalContainer {
  position: absolute;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#removeModal {
  height: 35%;
}
#editCouponCode {
  text-align: center;
  font-weight: 700;
  width: 60%;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
#editCouponUses {
  width: 60px;
}
#apikeyText {
  color: #ff6b0b;
}
#configLineButtons {
  justify-content: space-evenly;
}
#pageSection {
  background-color: gray;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#pageConfigs {
  background-color: white;
  height: 100%;
  width: 74%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#pagePreview {
  background-color: #fff;
  width: 26%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.listCouponInput {
  width: 50%;
  padding: 0.5rem;
}
.listContainer {
  width: 98%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.liIcon {
  width: 5%;
  height: 20px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
}
.liTextDateContainer {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 1rem;
  margin-right: 1rem;
}
.liTextUsesContainer {
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-left: 1rem;
  margin-right: 1rem;
}
.liTextDateText {
  display: flex;
  justify-content: center;
  width: 100%;
}
.liTextDate {
  width: 100%;
  font-size: medium;
  display: flex;
  justify-content: center;
}
.liTextBig {
  font-size: larger;
  font-weight: 700;
}
.liContent {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.countContainer {
  display: flex;
  margin-left: 1rem;
  margin-right: 1rem;
}
.arrowIcon {
  height: 20px;
  fill: #696969;
  cursor: pointer;
  align-items: center;
  margin-left: 1rem;
}
.headerText {
  font-size: large;
  font-weight: 700;
}
.defaultButton {
  box-shadow: 2px 2px 6px #d3d3d3;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1rem;
  margin-right: 1rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.3rem;
}
.defaultButton:active {
  transform: translate(0.1rem, 0.1rem);
}
.defaultButton:hover {
  filter: brightness(120%);
}
.cancelButton {
  background-color: gray;
  color: #fff;
}
.saveButton {
  background-color: green;
  color: #fff;
}
.deleteButton {
  background-color: red;
  color: #fff;
}
.primaryButton {
  background-color: #1e90ff;
  color: #fff;
}
.modalWindow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 0.3rem;
  width: 40%;
  height: 50%;
}
.modalText {
  font-size: large;
}
.modalTextCoupon {
  font-size: x-large;
  font-weight: 700;
  margin-bottom: 2rem;
}
.modalLine {
  width: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.modalButtons {
  margin-top: 2rem;
}
.editCouponInput {
  border-color: #d3d3d3;
  font-size: medium;
  text-align: center;
  border-radius: 0.3rem;
  padding: 0.2rem;
  cursor: text;
}
.configContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.configLine {
  font-size: large;
  border-radius: 0.3rem;
  box-shadow: 2px 2px 6px gray;
  width: 60%;
  margin-top: 1rem;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.statisticsLineTop {
  width: 85%;
  font-size: large;
  border-radius: 0.3rem;
  box-shadow: 2px 2px 6px gray;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 1rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.statisticsLineBottom {
  width: 85%;
  font-size: large;
  border-radius: 0.3rem;
  box-shadow: 2px 2px 6px gray;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.statisticsLineItem {
  width: 50%;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
}
.statisticsBlock {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.statisticsColumn {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.configText {
  display: flex;
  justify-content: start;
}
.configInput {
  font-size: large;
  font-weight: 700;
  width: 70px;
  cursor: text;
}
.pagePreviewButton {
  width: 100%;
  height: 30%;
  font-weight: 700;
  font-size: x-large;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  cursor: pointer;
  box-shadow: 2px 2px 8px #d3d3d3;
}
.pagePreviewButton:hover {
  filter: brightness(110%);
}
.pagePreviewButton:active {
  transform: translate(2px, 2px);
}
#pagePreviewContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
#pagePreviewTopImageContainer {
  width: 90%;
  height: 40%;
  border-radius: 0.5rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pagePreviewContentTextContainer {
  width: 90%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 2px 2px 8px lightgray;
  overflow-y: hidden;
  margin-bottom: 0.5rem;
}
#pagePreviewButtonsContainer {
  width: 90%;
  height: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
#pagePreviewContentText {
  width: 90%;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: x-large;
  text-align: center;
  line-height: 1.2;
  flex-wrap: wrap;
}
#pagePreviewGoButton {
  background-color: white;
}
#pagePreviewCodeButton {
  background-color: white;
  border-style: dashed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
#pagePreviewCouponCodeText {
  width: 100%;
  display: flex;
  justify-content: center;
}
#pagePreviewCopyIcon {
  position: absolute;
  right: 0;
  height: 40%;
  margin-right: 1rem;
  fill: gray;
  display: flex;
  justify-content: center;
}
#pagePreviewInstructionText {
  color: #4d4d4d;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: large;
  display: none;
}
#pagePreviewTopImage {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  object-fit: contain;
}
#pageConfigsTitle,
#statisticsTitle {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#statisticsMenu {
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
#pageConfigsImageLine,
#pageConfigsTargetLine {
  background-color: whitesmoke;
  box-shadow: 2px 2px 8px gray;
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}
#pageConfigsBottomContainer {
  width: 90%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#pageConfigsLeftContainer {
  background-color: whitesmoke;
  box-shadow: 2px 2px 8px gray;
  width: 60%;
  align-items: center;
  border-radius: 0.5rem;
}
#pageConfigsRightContainer {
  background-color: whitesmoke;
  box-shadow: 2px 2px 8px gray;
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem;
}
#pageConfigsDefaultTarget {
  width: 75%;
  font-size: medium;
  font-weight: normal;
  text-align: start;
}
#statisticsSection {
  width: 80%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}
#startDateField,
#endDateField {
  margin-left: 1rem;
  margin-right: 1rem;
}
.pageConfigsPadding {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
}
.pageConfigsText {
  text-align: center;
  font-weight: bold;
}
#pageConfigsText {
  width: 90%;
  height: 100%;
  padding: 1rem;
  resize: none;
}
#pageConfigsLineButtons {
  width: 50%;
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.pageConfigsLineTall {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pageConfigsColorPicker {
  width: 100px;
  cursor: pointer;
  margin-bottom: 1rem;
  border-radius: 0.3rem;
}
.highlightCurrent {
  font-size: larger;
}
.highlight {
  background-color: lightgreen;
  filter: brightness(150%);
}
.highlightBackground {
  background-color: white;
  border-color: gray;
  border-width: 2px;
  border-style: dashed;
  box-shadow: 2px 2px 6px lightgray;
}
.textDanger {
  color: red;
}

@media only screen and (max-width: 768px) {
  #listSectionHeader {
    flex-direction: column;
  }
  #pageSection {
    flex-direction: column;
    height: 200%;
  }
  #pagePreview {
    width: 100%;
  }
  #pageConfigsImageLine,
  #pageConfigsTargetLine {
    flex-direction: column;
  }
  .headerText {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .modalWindow {
    width: 95%;
    height: 60%;
  }
  .modalButtons {
    width: 100%;
    justify-content: space-evenly;
  }
  .configLine {
    width: 80%;
  }
  li {
    flex-direction: column;
    margin-bottom: 2rem;
  }
  .liContent {
    flex-direction: column;
    align-items: center;
  }
  .liTextDateText {
    margin-top: 1rem;
  }
  .liTextUsesContainer {
    width: 100%;
  }
  .listCouponInput {
    width: 20%;
  }
  .liTextDateContainer {
    width: 50%;
  }
  .liTextDate {
    width: 100%;
  }
  .liTextCode {
    width: 80%;
    margin-top: 1rem;
    padding: 0.5rem !important;
  }
  .statisticsBlock {
    flex-direction: column;
  }
  .statisticsColumn {
    width: 100%;
  }
  .statisticsLineTop {
    width: unset;
    margin-left: unset;
    margin-right: unset;
  }
  .statisticsLineItem {
    width: 70%;
  }
  svg {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  #statisticsSection {
    width: 90%;
  }
  #statisticsMenu {
    height: 100px;
    flex-direction: column;
    justify-content: space-between;
  }
  #pageConfigs {
    width: 100%;
  }
  #pagePreview {
    width: 100%;
    height: 100vh;
  }
  #pageConfigsText {
    width: 80%;
    text-align: center;
  }
  #pageConfigsRightContainer {
    width: 40%;
  }
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
input[type="number"] {
  appearance: textfield;
}
.hidden {
  display: none !important;
}