.background,
.ui.inverted.fixed.menu {
  background-image     : url(../img/bg.png) !important;
  background-position  : center center !important;
  background-repeat    : no-repeat  !important;
  background-attachment: fixed  !important;
  background-size      : cover  !important;
}

.ui.header,
.ui.modal .content,
.ui.modal .ui.header {
  font-family: 'Exo 2' !important
}

body {
  background-color: #ebeef0
}

.ui.segment {
  border-radius: 9px;
  border       : none !important;
  box-shadow   : none !important
}

.ui.padded.vertical.segment {
  padding-top   : 50px;
  padding-bottom: 50px
}

.background {
  width     : 100%;
  height    : 100%;
  position  : absolute;
  top       : 0;
  left      : 0;
  background: #0075B9
}

@media only screen and (min-width:1700px) {
  .ui.main.container {
    max-width: 1700px !important;
    width    : 100%
  }
}

@media only screen and (max-width:1700px) {
  .ui.main.container {
    max-width: 90% !important;
    width    : 100%
  }
}

.ui.label {
  white-space: nowrap
}

@font-face {
  font-family: 'Exo 2' !important;
  src        : local("Exo 2") !important
}

@font-face {
  font-family: Arial !important;
  src        : local("Exo 2") !important
}

.ui.header {
  font-weight: 700 !important
}

.ui.table {
  border-radius: 9px
}

.ui.table thead {
  border-radius: 9px 9px 0 0
}

.ui.table thead tr:first-child>th:first-child {
  border-top-left-radius: 9px
}

.ui.table thead tr:first-child>th:last-child {
  border-top-right-radius: 9px
}

.ui.steps {
  border-radius: 9px;
  border       : none
}

.ui.steps .step:first-child {
  border-radius: 9px 0 0 9px !important
}

.ui.steps .step:last-child {
  border-radius: 0 9px 9px 0 !important
}

.ui.modal {
  border-radius: 12px !important;
  overflow     : hidden !important;
  text-align   : center
}

.intro-screen .form,
.scanning-screen .form {
  text-align: left
}

.ui.modal .ui.header {
  font-weight: 600 !important;
  font-size  : 32px
}

.ui.modal .content {
  font-weight: 400 !important
}

.ui.inverted.fixed.menu {
  z-index   : 9000;
  background: #0075B9
}

[data-ui-view],
[ui-view] {
  height: 100%
}

body,
html {
  width     : 100%;
  min-height: 100%;
  margin    : 0
}

.intro-screen {
  width                : 100%;
  height               : 100%;
  background-image     : url(../img/bg.png) !important;
  background           : #0075B9;
  background-position  : center center;
  background-repeat    : no-repeat;
  background-attachment: fixed;
  background-size      : cover;
}

.intro-screen .grid {
  height: 100%;
  margin: 0
}

.complaintpage .masthead,
.contractpage .masthead,
.todopage .masthead {
  margin-bottom: 30px !important
}

.complaintpage .masthead .logo.item img,
.contractpage .masthead .logo.item img,
.invoicepage .masthead .logo.item img,
.offerpage .masthead .logo.item img,
.orderpage .masthead .logo.item img,
.todopage .masthead .logo.item img {
  margin-right: 1em
}

.complaintpage .masthead .ui.menu .ui.button,
.contractpage .masthead .ui.menu .ui.button,
.invoicepage .masthead .ui.menu .ui.button,
.offerpage .masthead .ui.menu .ui.button,
.orderpage .masthead .ui.menu .ui.button,
.todopage .masthead .ui.menu .ui.button {
  margin-left: .5em
}

.intro-screen .column {
  max-width: 450px
}

.intro-screen .segment {
  background: rgba(0, 0, 0, .3)
}

.intro-screen .mlogo.container {
  display: none
}

@media only screen and (min-width:1024px) {
  .ui.main.container {
    padding-left : 20px;
    padding-right: 20px
  }

  .intro-screen .mlogo.container {
    display : block;
    width   : 60vw;
    height  : 60vw;
    position: absolute;
    overflow: hidden;
    bottom  : 0;
    right   : 0
  }

  .intro-screen .mlogo.container img {
    position: absolute;
    width   : 60vw;
    right   : -30vw;
    bottom  : -25vw
  }
}

.mybusiness {
  color: #fff
}

.voucher {
  padding-top   : 3em;
  padding-bottom: 3em
}

.scanning-screen {
  width : 100%;
  height: 100%
}

.scanning-screen .mybusiness {
  padding-top: 1em;
  color      : #AAA
}

.scanning-screen .logo {
  font-family: 'Exo 2', sans-serif;
  font-size  : 40px;
  font-weight: 300
}

.scanning-screen .logo b {
  font-weight: 500
}

.scanning-screen .logo.small {
  font-size: 20px
}

.scanning-screen .grid {
  height: 100%
}

.scanning-screen .message {
  text-align       : left !important;
  position         : absolute;
  width            : 600px !important;
  bottom           : 20px;
  left             : 50%;
  transform        : translateX(-50%);
  -webkit-transform: translateX(-50%)
}

.complaintpage .masthead .ui.title.header,
.complaintpage .masthead .ui.title.sub.header,
.contractpage .masthead .ui.title.header,
.contractpage .masthead .ui.title.sub.header,
.invoicepage .masthead .ui.title.header,
.invoicepage .masthead .ui.title.sub.header,
.offerpage .masthead .ui.title.header,
.orderpage .masthead .ui.title.header,
.orderpage .masthead .ui.title.sub.header,
.todopage .masthead .ui.title.header,
.todopage .masthead .ui.title.sub.header {
  width     : 100%;
  padding   : 2em 0;
  position  : absolute;
  text-align: center
}

.scanning-screen .message.center {
  position         : absolute;
  bottom           : auto;
  top              : 50%;
  font-size        : 2em;
  transform        : translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%)
}

.complaintpage .masthead.segment {
  min-height: 450px
}

.complaintpage .masthead.small.segment {
  min-height: 250px
}

.complaintpage .masthead .ui.title.header {
  font-size: 3.5em
}

.complaintpage .masthead .ui.title.sub.header {
  font-size: 2em
}

.invoicepage .masthead.segment {
  min-height: 450px
}

.invoicepage .masthead.small.segment {
  min-height: 250px
}

.invoicepage .masthead .ui.title.header {
  font-size: 3.5em
}

.invoicepage .masthead .ui.title.sub.header {
  font-size: 2em
}

.offerpage .masthead.segment {
  min-height: 450px
}

.offerpage .masthead.small.segment {
  min-height: 250px
}

.offerpage .masthead .ui.title.header {
  font-size: 3.5em
}

.offerpage .masthead .ui.title.sub.header {
  text-align: center;
  width     : 100%;
  padding   : 2em 0;
  font-size : 2em;
  position  : absolute
}

.orderpage .masthead.segment {
  min-height: 450px
}

.orderpage .masthead.small.segment {
  min-height: 250px
}

.orderpage .masthead .ui.title.header {
  font-size: 3.5em
}

.orderpage .masthead .ui.title.sub.header {
  font-size: 2em
}

.contractpage .masthead.segment {
  min-height: 450px
}

.contractpage .masthead.small.segment {
  min-height: 250px
}

.contractpage .masthead .ui.title.header {
  font-size: 3.5em
}

.contractpage .masthead .ui.title.sub.header {
  font-size: 2em
}

.todopage .masthead.segment {
  min-height: 450px
}

.todopage .masthead.small.segment,
.todopage .ql-editor {
  min-height: 250px
}

.todopage .masthead .ui.title.header {
  font-size: 3.5em
}

.todopage .masthead .ui.title.sub.header {
  font-size: 2em
}

.todopage .ui.comments {
  max-width : 100%;
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: scroll
}

.todopage .ui.comments .comment {
  display: inline-block;
  padding: 0 10px 0 0
}

.todopage .ui.comments .comment img {
  max-width: 400px
}

.todopage .ui.comments .comment .header {
  line-height: 1.3em
}

.todopage .ui.comments .comment p {
  line-height   : 1.3em;
  padding-bottom: 0;
  margin-bottom : 10px
}

.todopage .ui.comments .anchor {
  overflow-anchor: auto;
  height         : 1px
}

.todopage .ui.comments .divider {
  text-align: center;
  padding   : 10px 0
}

.todopage .ui.comments .divider .header {
  font-weight: 600;
  line-height: 1.3em;
  font-size  : 12px;
  opacity    : .4
}

.todopage .ui.comments .divider .description {
  line-height: 1.3em;
  font-size  : 10px;
  opacity    : .4
}

.todopage .ui.comments .divider .time {
  line-height: 1.3em;
  font-size  : 9px;
  opacity    : .4
}

.todopage .todotype1-select {
  border-top-right-radius   : 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right              : none !important;
  min-width                 : 180px !important
}

.todopage .todotype2-select {
  min-width: 180px !important
}

.todopage .todotype2-select.has-input {
  border-radius: none !important;
  border-right : none !important
}

.todopage .todotype2-input {
  min-width                : 180px !important;
  border-top-left-radius   : 0 !important;
  border-bottom-left-radius: 0 !important
}

p.productspec.show {
  padding-bottom: 2em
}

p.productspec.show.less {
  overflow: hidden;
  height  : 100px
}

p.productspec.show.more {
  height: auto
}