html, body {
  height: 100%;
}

body.blank {
  display: flex;
  padding: 40px 0;
}

.wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -60px;
  padding: 0 0 60px;
}

body.blank .wrap {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin: -40px auto;
  padding: 15px;
}

body.blank .wrap > div {
  width: 100%;
}

.wrap > .container {
  padding: 70px 15px 20px;
}


/* .main-content {
  margin-left: 210px;
  padding: 20px;
} */

.footer {
  height: 60px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

.jumbotron {
  text-align: center;
  background-color: transparent;
}

.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

.not-set {
  color: #c55;
  font-style: italic;
}


/* add sorting icons to gridview sort links */

a.asc:after, a.desc:after {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  padding-left: 5px;
}

a.asc:after {
  content: /*"\e113"*/
  "\e151";
}

a.desc:after {
  content: /*"\e114"*/
  "\e152";
}

.sort-numerical a.asc:after {
  content: "\e153";
}

.sort-numerical a.desc:after {
  content: "\e154";
}

.sort-ordinal a.asc:after {
  content: "\e155";
}

.sort-ordinal a.desc:after {
  content: "\e156";
}

.grid-view th, .grid-view td:last-child {
  white-space: nowrap;
}

.grid-view .filters input, .grid-view .filters select {
  min-width: 50px;
}

.hint-block {
  display: block;
  margin-top: 5px;
  color: #999;
}

.error-summary {
  color: #a94442;
  background: #fdf7f7;
  border-left: 3px solid #eed3d7;
  padding: 10px 20px;
  margin: 0 0 15px 0;
}


/* align the logout "link" (button in form) of the navbar */

.nav li > form > button.logout {
  padding: 15px;
  border: none;
}

@media (max-width: 767px) {
  .nav li > form > button.logout {
    display: block;
    text-align: left;
    width: 100%;
    padding: 10px 15px;
  }
}

.nav > li > form > button.logout:focus, .nav > li > form > button.logout:hover {
  text-decoration: none;
}

.nav > li > form > button.logout:focus {
  outline: none;
}


/* carl test */


/* h3 {
    color: red;
} */

.test_button {
  display: flex;
  align-items: flex-end;
  justify-content: end;
  margin-right: 10px;
}

.card__right {
  border: rgb(204, 229, 252) solid;
  padding: 25px;
  height: 300px;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 150px 10px 13px #ededed, -15px -10px 13px #ffffff;
  /* display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; */
}

.cards__middle {
  display: flex;
  justify-content: space-between;
}

.card__middle {
  border: rgb(204, 229, 252) solid;
  padding: 25px;
  height: 300px;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 150px 10px 13px #ededed, -15px -10px 13px #ffffff;
}

.details-form-field {
  display: flex;
  justify-content: space-between;
}

#detailsForm > div.details-form-field {
  margin: 15px 0;
}

#inner-criteria-container, .inner-input-field {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}

.inner-input-field {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}

#fields {
  width: 200px;
}

#criteria {
  /* width: 200px; */
}

#text-input {
  width: 200px;
}

#field, #number-input, #criteria, #detailsDialog input:not([type="checkbox"]), #detailsDialog select, #detailsDialog .ui.calendar {
  width: 50%;
}

#detailsDialog .ui.calendar > .ui.input {
  width: 100%;
}

#inner-submit-button {
  display: flex;
  justify-content: flex-end;
}

div.ui.progress {
  height: 10px;
}

div.ui.progress .bar {
  min-width: auto;
  border-radius: 5px;
  height: 100%;
}


/* page-5; �见ê̌�𤩎���啹�睸撠齿�� */

.ui.green.label.product-labels {
  margin: 1px;
}


/* home-page; to remove card border of 180憭拇�擃㗛啹�睸�𤩎�� */

.ui.card.product-sales-ranking {
  max-width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  /* min-height: 0; */
  background: transparent;
  border: none;
  border-radius: 0.28571429rem;
  -webkit-box-shadow: none;
  box-shadow: none;
  /* -webkit-transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; */
  /* transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; */
  /* transition: box-shadow 0.1s ease, transform 0.1s ease; */
  /* transition: box-shadow 0.1s ease, transform 0.1s ease,
    -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; */
  z-index: unset;
  word-wrap: break-word;
}


/* home-page; to avoid overlapping of datePicker & cards */

@media screen and (max-width: 770px) {
  .ui.four.doubling.cards {
    /* margin-top: 10rem; */
  }
}


/* home-page; background color */

.page-title {
  color: #BD7D52;
  margin-bottom: 2.5rem;
}

.ui.cards > .card.sales-summary, .ui.card.sales-summary {
  /* background: linear-gradient( #E4995F, #e2c4ad); */
  background: linear-gradient(#e4995f, #e06f19);
}

.ui.card, .ui.cards > .card {
  background: #F9F2E3;
  border: none;
  box-shadow: 0 6px 12px 0 #ccc;
}


/* home-page; text color */

.main-home .ui.feed > .event > .content .summary, .main-home .ui.card > .content > .header, .main-home .ui.cards > .card > .content > .header {
  color: white;
}

#product-sales-container > .event > .content .summary, #product-sales-ranking > .content > .header, .ui.cards > .card > .content > .header.region-sales-headers {
  color: black;
}


/* page-2; Charts */

.paymentMethodChartAccWrapper, .paymentMethodChartPeriodWrapper {
  /* height: 200px; */
}


/* page-3; cards' headers */

.region-sales-headers {
  border-bottom: 0.5px rgb(212, 212, 213) solid !important;
}


/* page-3; map image*/

.main-region .map {
  margin-bottom: 10px;
}

#map-hong-kong {
  max-height: 300px;
  object-fit: contain;
}


/* page-3; cards rows padding*/

#hk-island-districts, #kowloon-districts, #new-territories-districts > .event.row {
  padding-left: 1rem;
}


/* page-6; rows padding */

#coupon-container {
  padding-left: 3rem;
  margin-top: 1rem;
}

.ui.grid > .row > .column.coupon-card {
  margin-top: 2rem;
}

.coupon-card .ui.card {
  min-height: 270px;
}

.ui.card.coupon-card-even {
  background-color: #f3f3f3;
  max-width: 320px;
}

.ui.card.coupon-card-odd {
  background-color: #faf3e5;
  max-width: 320px;
}

.highlight-text, .highlight-text * {
  color: #BE7D4E;
  font-weight: bold;
}


/* button color */

.ui.button {
  background: #c66c27;
  color: white;
}

.ui.button:hover, .ui.button:focus {
  background: #e8b792;
  color: white;
}


/* responsive */

.ui.container.center.aligned.sales-trend-container, .ui.container.center.aligned.payment-method-container, .ui.container.center.aligned.member-analysis-container {
  width: 100%;
}


/* page-1; criteria dialog; datePickers */

#inner-criteria-container > .three.fields {
  width: 100%;
}

#inner-criteria-container > .three.fields > .field {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}


/* page-5; amend sales-form-container*/

.product-sales-form-container {
  /* margin: 3rem; */
}

.product-sales-container, .product-sales-form-container {
  margin: 2rem;
}


/* page-1; style filter/export data buttons */

.ui.button.filter-data-button, .ui.button.export-data-buttons {
  /* font-family: "Roboto"; */
  /* font-weight: 30; */
  /* background-color: #d7cad2; */
  /* padding-top: 1px; */
  /* padding-right: 1px; */
  /* padding-bottom: 1px; */
  /* padding-left: 1px; */
  /* color: #fff; */
  /* border: none; */
  /* cursor: pointer; */
  width: 100%;
  /* height: 50px; */
  margin-bottom: 3px;
}


/* responsive */

@media (min-width: 320px) {
  .ui.grid > .row > [class*="wide"].column.sales-trend {
    width: 100% !important;
  }
  .ui.grid > .row > [class*="five wide"].column.coupon-card {
    width: 100% !important;
  }
  /* .ui.grid > .row > [class*="eight wide"].column.region-sales {
    width: 100% !important;
    margin-left: 2rem !important;
  } */
}

@media (min-width: 641px) {
  .ui.grid > .row > [class*="five wide"].column.coupon-card {
    width: 50% !important;
  }
  .topnav {
    display: none;
  }
  .ui.secondary.vertical.white.menu.sidebar.left.fixed.visible {
    display: inline-block;
  }
  .main-content {
    margin-left: 210px;
    padding: 20px;
  }
}

@media (min-width: 961px) {
  .ui.grid > .row > [class*="five wide"].column.coupon-card {
    width: 31.25% !important;
  }
}

@media screen and (max-width: 961px) {
  .ui.grid > .row > [class*="eight wide"].column.payment-method {
    width: 100% !important;
  }
  .ui.grid > .row > [class*="wide"].column.product-sales {
    width: 100% !important;
  }
}

@media screen and (max-width: 770px) {
  .ui.grid > .row > [class*="four wide"].column.total-sales-figure {
    margin-top: 10rem !important;
  }
  .ui.grid > .row > [class*="four wide"].column.total-sales-figure {
    width: 100% !important;
    margin-left: 1rem;
    padding-right: 0;
  }
  .ui.grid > .row > [class*="twelve wide"].column.sales-figure {
    margin-bottom: 5rem !important;
    width: 100% !important;
  }
  .ui.card.sales-summary {
    width: 100%;
  }
  .ui.grid > .row > [class*="wide"].column.member-analysis {
    width: 100% !important;
    margin-bottom: 1rem;
    margin-left: 1rem;
  }
  .ui.grid > .row > [class*="eight wide"].column.region-sales {
    width: 100% !important;
    margin-left: 2rem !important;
  }
  .ui.grid > .row > [class*="eight wide"].map-hong-kong {
    width: 100% !important;
  }
}

@media screen and (max-width: 641px) {
  .ui.column.card.sales-summary {
    width: 100% !important;
  }
  .top-sales-products > .ui.grid > .row > [class*="wide"].column {
    width: 100% !important;
    margin: auto 1rem;
    overflow: hidden;
  }
  .topnav {
    width: 100%;
    display: inline-block;
  }
  .ui.secondary.vertical.white.menu.sidebar.left.fixed.visible {
    display: none;
  }
  .main-content {
    margin-left: 0px;
    padding: 20px;
  }
}


/* navbar */

.topnav {
  overflow: hidden;
  background-color: #eee;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav .site-title {
      color: white;
      padding: 14px 16px;
      font-size: 17px;
      display: block;
      background-color: #bd7d52;
}

.topnav a {
  color: #333;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  /* background: black; */
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  color: white;
}

.topnav a:hover, .topnav a:focus {
  /* background-color: #ddd; */
  color: #ccc;
}

.topnav .active {
  background-color: #bd7d52;
  color: white;
}

.topnav > .ui.small.circular.image {
  /* height: 1rem; */
}

.ui.menu.fixed.sidebar {
  z-index: 1;
}

.map-hong-kong > div {
  margin-top: -40px;
}

#filter_display {
  margin-bottom: 1em;
}

#filter_display .filter_string {
  display: inline-block;
  margin-right: 1em;
}

.filter_display_title {
  display: none;
}