.picker {
  position: relative; }
  .picker > .container {
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: 100;
    top: 1px;
    left: -10000px;
    -webkit-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms;
    -moz-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms;
    transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; }
    @media screen and (max-width: 767px) {
      .picker > .container {
        position: fixed;
        top: 0;
        left: -10000px;
        width: 100%;
        height: 100%; } }
    .picker > .container.table {
      display: table; }
    .picker > .container.show {
      left: 0;
      -webkit-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
      -moz-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
      transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
      .picker > .container.show .overlay {
        left: 0; }
    .picker > .container .overlay {
      position: fixed;
      height: 100%;
      width: 100%;
      z-index: 9;
      top: 0;
      left: -10000px;
      opacity: 1;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      will-change: opacity;
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
      -moz-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
      transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; }
      @media screen and (max-width: 767px) {
        .picker > .container .overlay {
          background-color: rgba(0, 0, 0, 0.25); } }
    .picker > .container .cell {
      display: table-cell;
      box-sizing: border-box;
      width: 100%;
      height: 100%; }
    .picker > .container .popup {
      position: absolute;
      box-sizing: border-box;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1);
      -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1);
      transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1);
      margin: 0 auto;
      z-index: 10;
      font-size: 1.2rem;
      opacity: 0; }
      @media screen and (max-width: 767px) {
        .picker > .container .popup {
          bottom: 0;
          width: 100%;
          max-width: 100%;
          height: 23.8rem;
          -webkit-transform: translate3d(0, 23.8rem, 0);
          -moz-transform: translate3d(0, 23.8rem, 0);
          -ms-transform: translate3d(0, 23.8rem, 0);
          -o-transform: translate3d(0, 23.8rem, 0);
          transform: translate3d(0, 23.8rem, 0); } }
      @media screen and (min-width: 768px) {
        .picker > .container .popup {
          height: 23.8rem;
          width: 20rem;
          -webkit-transform: translate3d(0, -64px, 0);
          -moz-transform: translate3d(0, -64px, 0);
          -ms-transform: translate3d(0, -64px, 0);
          -o-transform: translate3d(0, -64px, 0);
          transform: translate3d(0, -64px, 0); } }
      .picker > .container .popup.show {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); }
      .picker > .container .popup:after {
        content: ' ';
        clear: both;
        display: table; }
      .picker > .container .popup .list-wrap {
        float: left;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto; }
        .picker > .container .popup .list-wrap ul, .picker > .container .popup .list-wrap li {
          list-style-type: none;
          margin: 0;
          padding: 0; }
        .picker > .container .popup .list-wrap ul {
          display: block;
          width: 100%;
          margin-top: 10.2rem;
          margin-bottom: 10.2rem; }
          @media screen and (max-width: 767px) {
            .picker > .container .popup .list-wrap ul {
              margin-top: 6.8rem;
              margin-bottom: 13.6rem; } }
        .picker > .container .popup .list-wrap li {
          text-align: center;
          line-height: 3.4rem;
          font-size: 1.32rem;
          cursor: pointer; }
          @media screen and (min-width: 768px) {
            .picker > .container .popup .list-wrap li:hover {
              background-color: rgba(255, 210, 96, 0.33); } }
      .picker > .container .popup > .cover {
        position: absolute;
        left: 0;
        right: 0;
        height: 10.2rem;
        box-sizing: border-box;
        z-index: 12;
        pointer-events: none; }
        .picker > .container .popup > .cover.upper {
          top: 0; }
          @media screen and (max-width: 767px) {
            .picker > .container .popup > .cover.upper {
              height: 6.8rem; } }
        .picker > .container .popup > .cover.lower {
          bottom: 0; }
          @media screen and (max-width: 767px) {
            .picker > .container .popup > .cover.lower {
              height: 13.6rem; } }
      .picker > .container .popup.light {
        color: #666;
        background-color: rgba(255, 255, 255, 0.96); }
        @media screen and (max-width: 767px) {
          .picker > .container .popup.light {
            border-top: 1px solid #ccc;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.08); } }
        @media screen and (min-width: 768px) {
          .picker > .container .popup.light {
            border: 1px solid #ccc;
            box-shadow: 0 1px 5px #ddd; } }
        .picker > .container .popup.light > .cover {
          background-color: rgba(240, 240, 240, 0.7); }
          .picker > .container .popup.light > .cover.upper {
            border-bottom: 1px solid #ccc; }
          .picker > .container .popup.light > .cover.lower {
            border-top: 1px solid #ccc; }
      .picker > .container .popup.dark {
        color: #fff;
        background-color: rgba(50, 50, 50, 0.96); }
        .picker > .container .popup.dark > .cover {
          background-color: rgba(50, 50, 50, 0.72); }
          .picker > .container .popup.dark > .cover.upper {
            border-bottom: 1px solid rgba(85, 85, 85, 0.9); }
          .picker > .container .popup.dark > .cover.lower {
            border-top: 1px solid rgba(85, 85, 85, 0.9); }