@mainColor: #cd3a3a;
@linkColor: #07d;

@import "./../../../../../resources/assets/lib/css/pager";
@import "./../../../../../resources/assets/lib/css/widget";

html, body {
  background: #f6f7f7;
  font-size: 10px;
  color: #666;
  a:hover, a:focus, a:link {
    text-decoration: none;
  }
  * {
    text-shadow: none !important;
  }
  &.lock {
    overflow: hidden;
  }
  input[type=checkbox] {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    outline: none;
    background-size: 20px;
    background-repeat: no-repeat;
    border: 1px solid #EEE;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABd0RVh0Q3JlYXRpb24gVGltZQAyMDEzLjMuMjGwYsOPAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAUdJREFUWIXt2DGKAjEUxvEv8TnBgDOF2FjbCN5obmDnSax2bzAnUvAGNk4ThEic8LLFknI33SRF/jB1fjwyKZ4IIexvt9vZGNM3TdMREebMe4/P52O6rhuOx+NFXK/XL2vtabvdYrVaQUoJIcQsmBACmBnv9xvP5xNa628yxvS73Q6bzQbL5RJSylkwMWaG1hoA8Hg8elJKdVprNE0zOwYAFosFhBDQWkMp1UkigpQyCyYWzyciSACz3Zn/ioZ8Y/mj4kAkhED8chYNxU2oglIVB6qXOlUFpaqgVPUvS1VBqYoDEYBiLjVQ4IQqKFVxoPpSp5LA7xYid9EgvfdgZjBzNkw833sP6Zwz1lpM05QFxcyYpgnWWjjnDLVtO4zjeIorkRwLK2stxnFE27aDCCHs7/f7+fV69UqpLCs955xZr9fD4XC4/ACVpIRnNSXuBQAAAABJRU5ErkJggg==);
    &:checked {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAA3NCSVQICAjb4U/gAAAAbFBMVEX///////+BNAB8MgDBTQDiv6jNWQv/////7OD/49Dx3dD/xqDoxq//vJDkvKL/oGD/cBDvch/kbh//ZgD6ZAD3YgD0YgDvYADVYBPlXADjWwDcWADSVgO8WBXQUwDMUgDLUQDEUQTATwW3TAUdI1+DAAAAJHRSTlMAVVVV3e7u//////////////////////////////////////9Cu2rsAAAACXBIWXMAAAsSAAALEgHS3X78AAAAF3RFWHRDcmVhdGlvbiBUaW1lADIwMTMuMy4yMbBiw48AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAA3klEQVQ4jaXU2wKCIAwG4FUaKZYnhEQrzfd/xw4KIjG46L9k3w1sDOAQDcMDzTBEB4D9vZOtJ7K77+EoBW884UIeoROs9oaJDiT3m7rmEtomhJr2T1QkNIiKhBAaQB+zKBTNZlYYUoaccKRNekXRam5PDBlmZAiyjYFojpkVUUJyxGhEP8e52yhE58LZaRRSJeoyCl1TssnGKDTeLrhRiI3TBTX6dqxflW2Mx9Tqx5htWdSv2fTuqxxm2+C3chlrCvppchh7VHqX+f9zmqgKL4wK4vDqiWGXlf4lVma7F6e4XXE4+7PHAAAAAElFTkSuQmCC);
    }
  }
}

.page-rich-content {
  p {
    padding: 0;
    margin: 0;
    line-height: 2em;
  }
  img, iframe {
    max-width: 99% !important;
    height: auto;
  }
}

.uk-button-primary {
  background: @mainColor;
  &:hover, &:focus, &:link {
    background: darken(@mainColor, 5%);
  }
}

.uk-form {
  line-height: 2em;
  h1 {
    font-size: 20px;
    color: @mainColor;
    line-height: 50px;
    margin: 0;
    padding: 0;
  }
  .line {
    padding: 0px 0 20px 0;
    .label {
      color: #666;
    }
    .field {
      padding: 2px 0 0 0;
      .help {
        color: #999;
        padding: 5px 0 0 0;
      }
    }
  }
}

.page-block {
  margin: 10px 0;
  border-radius: 2px;
  &.page-block-full {
    padding: 0;
  }
  & > .head {
    color: #999;
    line-height: 30px;
    border-bottom: 1px solid #EEE;
    padding: 0 10px;
    .btn {
      display: inline-block;
      line-height: 24px;
      color: #333;
      padding: 0 5px;
      border-radius: 3px;
      &.primary {
        background: @mainColor;
        color: #FFF;
      }
      &.cur {
        background: #FFF;
      }
    }
    .more {
      float: right;
    }
    .tab {
      a {
        &.cur {

        }
      }
    }
  }
  & > .body {
    padding: 10px;
    color: #666;
    background: #FFF;
  }
}

header {
  background: @mainColor;
  height: 40px;
  z-index: 1000;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  .left {
    a {
      padding: 0 0 0 10px;
      color: #FFF;
      line-height: 40px;
      font-size: 20px;
    }
  }
  .right {
    text-align: right;
    a {
      padding: 0 10px 0 0;
      color: #FFF;
      line-height: 40px;
    }
  }
  .title {
    color: #FFF;
    overflow: hidden;
    width: 100%;
    display: block;
    line-height: 40px;
    text-align: center;
    font-size: 12px;
  }
}

footer {
  height: 40px;
  background: #FFF;
  border-top: 1px solid #EEE;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  a {
    display: block;
    text-align: center;
    color: #999;
    padding: 5px 0 0 0;
    &:link, &:focus, &:hover {
      color: #999;
    }
    &.cur {
      color: @mainColor;
    }
    span {
      &.icon {
        font-size: 16px;
        line-height: 16px;
        height: 16px;
        &.small {
          font-size: 14px;
        }
      }
      display: block;
    }
  }
}

.page-container {
  .pages {
    a:hover {
      color: @mainColor;
      border-color: @mainColor;
    }
  }
}

.page-block-banner {
  background: none;
  padding: 0 !important;
  width: 100%;
  height: 180px;
  overflow: hidden;
  margin: 0 !important;
  .swiper-slide {
    height: 180px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #FFF;
    background-position: center;
  }
  .swiper-pagination {
    .swiper-pagination-bullet-active {
      background: @mainColor;
    }
  }
}

.member-profile-nav {
  background: #FFF;
  width: 320px;
  height: 42px;
  .swiper-slide {
    height: 40px;
    line-height: 40px;
    padding: 0;
    color: #333;
    text-align: center;
    border-bottom: 2px solid #FFF;
    &.active {
      border-bottom: 2px solid @mainColor;
    }
  }
}

.member-message-list {
  background: #FFF;
  .time {
    color: #999;
  }
  .message {
    p {
      margin: 0;
      padding: 0;
      line-height: 1.5em;
    }
  }
  .empty {
    color: #999;
    line-height: 200px;
    text-align: center;
  }
}

.home-event-category {
  padding: 10px 0;
  color: #999;
  margin: 10px auto 0 auto;
  h2 {
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 12px;
    color: @mainColor;
  }
  .desc {
    text-align: center;
    color: #999;
    line-height: 1.5em;
    margin: 5px auto 0 auto;
    width: 80%;
  }
  .list {
    padding: 0px 0 0 0;
    .item {
      background: #FFF;
      display: block;
      color: #666;
      margin: 10px;
      box-shadow: 0 0 5px #CCC;
      position: relative;
      &:hover {
        box-shadow: 0 0 5px #666;
      }
      .cover {
        padding-top: 61%;
        background: #EEE no-repeat center;
        background-size: cover;
        :after {
          content: '';
          width: 100%;
        }
      }
      .title {
        text-align: left;
        line-height: 28px;
        background: rgba(0, 0, 0, 0.5);
        color: #FFF;
        position: absolute;
        bottom: 1px;
        left: 1px;
        right: 1px;
        padding: 0 10px;
      }
    }
  }
}

.category-list {
  .filter {
    a {
      line-height: 30px;
      display: inline-block;
      color: @mainColor;
      padding: 0 10px;
      border-radius: 3px;
      &.active {
        background: @mainColor;
        color: #FFF;
      }
    }
  }
}

.category-event-list {
  .list {
    margin: 0 -10px;
    .empty {
      text-align: center;
      color: #999;
      line-height: 200px;
      background: #FFF;
    }
    .item {
      background: #FFF;
      display: block;
      color: #666;
      margin: 10px;
      box-shadow: 0 0 5px #CCC;
      position: relative;
      &:hover {
        box-shadow: 0 0 5px #666;
      }
      .cover {
        padding-top: 61%;
        background: #EEE no-repeat center;
        background-size: cover;
        :after {
          content: '';
          width: 100%;
        }
      }
      .title {
        line-height: 28px;
        background: rgba(0, 0, 0, 0.5);
        color: #FFF;
        position: absolute;
        bottom: 1px;
        left: 1px;
        right: 1px;
        padding: 0 10px;
      }
    }
  }
}

.page-block-event-basic {
  box-shadow: none;
  padding: 0;
  .images {
    background: none;
    padding: 0;
    width: 100%;
    height: 180px;
    overflow: hidden;
    margin: 0;
    box-shadow: none;
    .swiper-slide {
      height: 180px;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #FFF;
      background-position: center;
    }
    .swiper-pagination {
      .swiper-pagination-bullet-active {
        background: @mainColor;
      }
    }
  }
  .basic {
    background: #FFF;
    padding: 10px;
    h1 {
      font-size: 14px;
      line-height: 14px;
      margin: 0;
      padding: 20px 0 0 0;
      height: 20px;
      overflow: hidden;
    }
    .info {
      .attr {
        padding: 5px 0 5px 80px;
        color: #999;
        border-bottom: 1px solid #EEE;
        &:last-child {
          border-bottom: none;
        }
        .name {
          line-height: 20px;
          float: left;
          margin: 0 0 0 -80px;
        }
        .value {
          .price {
            color: @mainColor;
            font-size: 14px;
          }
        }
      }
    }
    .action {
      text-align: center;
      padding: 20px 0 0 0;
      .submit {
        line-height: 30px;
        background: @mainColor;
        color: #FFF;
        padding: 0 30px;
        font-size: 14px;
        border-radius: 3px;
        display: inline-block;
      }
      .disabled {
        line-height: 30px;
        background: #CCC;
        color: #FFF;
        padding: 0 30px;
        font-size: 14px;
        border-radius: 3px;
        display: inline-block;
      }
    }
  }
}

.page-block-event-info {
  box-shadow: none;
  .attr {
    padding: 0 0 10px 80px;
    color: #666;
    .name {
      line-height: 20px;
      float: left;
      margin: 0 0 0 -80px;
    }
    .value {
      .price {
        color: @mainColor;
      }
    }
  }
  .summary {
    border-top: 1px solid #EEE;
    padding: 10px 0 0 0;
    color: #999;
    line-height: 2em;
  }
}

#submitDialog {
  .uk-modal-header {
    padding: 10px;
  }
  h2 {
    font-size: 12px;
  }
  .uk-form {
    .line {
      .label {

      }
      .field {
        input, select {
          width: 100%;
        }
      }
    }
  }
}

.member-order-pay {
  margin: 10px 0;
  .container {
    background: #FFF;
    & > div {
      padding: 20px 0;
    }
  }
  .pay-summary {
    font-size: 12px;
    color: #333;
    text-align: center;
    span {
      color: @mainColor;
    }
  }
  .pay-list {
    padding: 20px 0 0 0;
    text-align: center;
    a {
      display: inline-block;
      line-height: 30px;
      border: 2px solid #EEE;
      padding: 0 10px;
      border-radius: 3px;
      text-align: left;
      width: 80px;
      color: #333;
      margin: 0 10px;
      &.cur {
        border-color: @mainColor;
      }
      img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
    }
  }
  .pay-submit {
    padding: 30px 0 0 0;
    text-align: center;
    a {
      height: 30px;
      line-height: 30px;
      background: @mainColor;
      color: #FFF;
      padding: 0 25px;
      text-decoration: none;
      font-size: 12px;
      display: inline-block;
      border-radius: 3px;
    }
  }
}

.member-event-list {
  .list-box {
    .empty {
      line-height: 100px;
      color: #999;
      text-align: center;
    }
    table {
      background: #FFF;
      thead {
      }
      td {
        border-color: #F3F3F3;
      }
      th {
        color: #999;
        border-color: #F3F3F3;
      }
    }
    .status {
      float: right;
    }
    .event {
      display: block;
      overflow: hidden;
      padding: 0 0 0 70px;
      .cover {
        width: 60px;
        height: 60px;
        float: left;
        border-radius: 3px;
        border: 1px solid #EEE;
        margin: 0 0 0 -70px;
        background: #EEE no-repeat center;
        background-size: contain;
      }
      .buyInfo {
        color: #999;
      }
    }
    .fee {
      color: @mainColor;
    }
    .action {
      text-align: right;
      float: right;
      a {
        display: inline-block;
        overflow: hidden;
        text-align: center;
        background: #FFF;
        border-radius: 3px;
        color: #666;
        border: 1px solid #999;
        line-height: 24px;
        margin: 0 0 10px 0;
        padding: 0 10px;
        &:last-child {
          margin: 0;
        }
        &:hover {
          background: #EEE;
        }
        &.main {
          border: 1px solid @mainColor;
          color: @mainColor;
        }
        &.remove {
          border: none;
          color: #999;
          float: left;
          font-size: 12px;
        }
      }
    }
  }
}

.page-block-oauth {
  .oauth {
    padding: 10px 0 0 0;
    text-align: center;
    .item {
      display: inline-block;
      color: @mainColor;
      font-size: 12px;
      line-height: 30px;
      padding: 0 10px;
      background: #EEE;
      border-radius: 3px;
      margin: 0 10px;
    }
  }
}

















