/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
#yui3-css-stamp__-qvAy.cssreset__HrQQR{display:none}
/* below from normalize.css 7.0.0
   https://github.com/necolas/normalize.css/blob/master/normalize.css
   ==========================================================================
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/** Animations **/
/** global keyframes workaround
 * https://github.com/css-modules/css-modules/issues/115 */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
.spinSlow {
    -webkit-animation: spin 1.5s infinite linear;
            animation: spin 1.5s infinite linear;
  }
.spinFast {
    -webkit-animation: spin 2s infinite linear;
            animation: spin 2s infinite linear;
  }
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
@-webkit-keyframes SlideUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@keyframes SlideUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@-webkit-keyframes SlideUpOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
}
@keyframes SlideUpOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
}
@-webkit-keyframes SlideDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@keyframes SlideDownIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@-webkit-keyframes SlideDownOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
}
@keyframes SlideDownOut {
  0% {
    opacity: 1;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  100% {
    opacity: 0;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
}
/* cross fade */
.crossfade-appear {
    opacity: 0.01;
  }
.crossfade-appear.crossfade-appear-active {
    opacity: 1;
    -webkit-transition: all .4s ease-in;
    transition: all .4s ease-in;
  }
.crossfade-enter {
    opacity: 0.01;
  }
.crossfade-enter.crossfade-enter-active {
    opacity: 1;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
  }
.crossfade-leave {
    opacity: 1;
  }
.crossfade-leave.crossfade-leave-active {
    opacity: 0.01;
    -webkit-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
  }
/* fadeIn */
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
  }
.fade-appear, .fade-enter, .fade-leave {
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
  }
.fade-appear.fade-appear-active, .fade-enter.fade-enter-active {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    pointer-events: none
  }
.fade-leave.fade-leave-active {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    pointer-events: none
  }
.fade-appear, .fade-enter {
    opacity: 0
  }
.fade-appear, .fade-enter, .fade-leave {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
  }
@-webkit-keyframes zoomBigIn {
  0% {
      opacity: 0;
      -webkit-transform: scale(.8);
      transform: scale(.8)
  }

  to {
      -webkit-transform: scale(1);
      transform: scale(1)
  }
}
@keyframes zoomBigIn {
  0% {
      opacity: 0;
      -webkit-transform: scale(.8);
      transform: scale(.8)
  }

  to {
      -webkit-transform: scale(1);
      transform: scale(1)
  }
}
@-webkit-keyframes zoomBigOut {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1)
  }

  to {
      opacity: 0;
      -webkit-transform: scale(.8);
      transform: scale(.8)
  }
}
@keyframes zoomBigOut {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1)
  }

  to {
      opacity: 0;
      -webkit-transform: scale(.8);
      transform: scale(.8)
  }
}
.zoom-big-appear, .zoom-big-enter, .zoom-big-leave {
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
  }
.zoom-big-appear.zoom-big-appear-active, .zoom-big-enter.zoom-big-enter-active {
    -webkit-animation-name: zoomBigIn;
    animation-name: zoomBigIn;
    -webkit-animation-play-state: running;
    animation-play-state: running
  }
.zoom-big-leave.zoom-big-leave-active {
    -webkit-animation-name: zoomBigOut;
    animation-name: zoomBigOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    pointer-events: none
  }
.zoom-big-appear, .zoom-big-enter {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(.08,.82,.17,1);
    animation-timing-function: cubic-bezier(.08,.82,.17,1)
  }
.zoom-big-leave {
    -webkit-animation-timing-function: cubic-bezier(.78,.14,.15,.86);
    animation-timing-function: cubic-bezier(.78,.14,.15,.86)
  }
.zoom-big-fast-appear, .zoom-big-fast-enter, .zoom-big-fast-leave {
    -webkit-animation-duration: .1s;
    animation-duration: .1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-play-state: paused;
    animation-play-state: paused
  }
.zoom-big-fast-appear.zoom-big-fast-appear-active, .zoom-big-fast-enter.zoom-big-fast-enter-active {
    -webkit-animation-name: zoomBigIn;
    animation-name: zoomBigIn;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    pointer-events: none
  }
.zoom-big-fast-leave.zoom-big-fast-leave-active {
    -webkit-animation-name: zoomBigOut;
    animation-name: zoomBigOut;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    pointer-events: none
  }
.zoom-big-fast-appear, .zoom-big-fast-enter {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1);
    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
  }
.zoom-big-fast-leave {
    -webkit-animation-timing-function: cubic-bezier(.78, .14, .15, .86);
    animation-timing-function: cubic-bezier(.78, .14, .15, .86)
  }
/**
 * 1. html set by pure, reset back
 * 2. form fields set by normalize, reset back
 */
html .pure-g,
html .pure-g [class*="pure-u"],
[class^="ant-"],
button,
input,
optgroup,
select,
textarea {
  font-family: FreeSans,
Arimo,
"Droid Sans",
Arial,
Helvetica,
sans-serif,
"Microsoft JhengHei";
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
html {
  background: #EAECF0;
  font-size: 16px;
  font-size: 1rem;

  /* follow normalize.css 7.0.0 */
  line-height: 1.15;
  /* normalize line height in all browsers */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
body {
  font-family: FreeSans,
Arimo,
"Droid Sans",
Arial,
Helvetica,
sans-serif,
"Microsoft JhengHei";
  background-color: rgba(0, 0, 0, 0);
}
/* for showing scrollbar by default */
body ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }
body ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
a,
a:hover,
a:visited {
  -webkit-text-decoration: none;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-weight: normal;
}
em,
i {
  font-style: normal;
}
input[type="number"],
input[type="text"],
input[value] {
  /* fix iOS input shadow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="number"]::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[value]::-webkit-input-placeholder {
    font-size: 16px !important;
    font-size: 1rem !important;
    color: #b9bdc5 !important;
  }
input[type="number"]::-moz-placeholder, input[type="text"]::-moz-placeholder, input[value]::-moz-placeholder {
    font-size: 16px !important;
    font-size: 1rem !important;
    color: #b9bdc5 !important;
  }
input[type="number"]:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[value]:-ms-input-placeholder {
    font-size: 16px !important;
    font-size: 1rem !important;
    color: #b9bdc5 !important;
  }
input[type="number"]::-ms-input-placeholder, input[type="text"]::-ms-input-placeholder, input[value]::-ms-input-placeholder {
    font-size: 16px !important;
    font-size: 1rem !important;
    color: #b9bdc5 !important;
  }
input[type="number"]::placeholder, input[type="text"]::placeholder, input[value]::placeholder {
    font-size: 16px !important;
    font-size: 1rem !important;
    color: #b9bdc5 !important;
  }
.clearfix__tDuI8:before,
.clearfix__tDuI8:after {
  content: "";
  display: table;
}
.clearfix__tDuI8:after {
  clear: both;
}
.clearfix__tDuI8 {
  zoom: 1;
  /* ie 6/7 */
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.nothing__O3HCk {
  padding-top: 150px;
  text-align: center;
}
.nothing__O3HCk span {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 500;
    text-align: left;
    color: #979ba7;
  }
.nothing__O3HCk [data-role="y-icon"] {
    display: block;
    margin: 0 auto;
    margin-bottom: -5px;
  }
.nothing__O3HCk [data-role="y-icon"] >svg {
      fill: #E0E4E9 !important;
      -webkit-transform: scale(1.1, 1);
              transform: scale(1.1, 1);
    }
/*
.title, .yCardItem {
  padding-left: 20px;
  padding-right: 20px;
}
*/
.title__y8Rr6 {
  margin-bottom: 4px;
  line-height: 44px;
  line-height: 2.75rem;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: bold;
  color: #4a4a4a;
  background-color: #f7f8f9;
  padding-left: 20px;
  padding-right: 20px;
}
.yCard__HM--w {
  position: relative;
  display: inline-block;
  max-width: 330px;
  width: 330px;
  min-height: 85px;
  height: auto;
  vertical-align: top;
}
.yCard__HM--w .wrapper__uaTDj {
    padding: 0px 20px;
    padding-bottom: 4px;
    border-radius: 8px;
    border: solid 1px #E0E4E9;
  }
.yCard__HM--w.fluid__ECESC .wrapper__uaTDj {
      padding-left: 0px;
      padding-right: 0px;
    }
.yCard__HM--w.fluid__ECESC .title__y8Rr6 {
      margin: 0px 20px;
    }
.yCard__HM--w.collapsable__r-9xd .wrapper__uaTDj {
      padding-bottom: 0px;
    }
.yCard__HM--w .collapse__B2TdC {
    cursor: pointer;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    color: #4990e2;
    margin-top: 4px;
    height: 20px;
    text-align: center;
    background-color: #F4F8FD;

  }
.yCard__HM--w .collapse__B2TdC:before {
      content: '展開';
    }
.yCard__HM--w .collapse__B2TdC.collapse-active__JsclB:before {
        content: '收合';
      }
.yCard__HM--w .collapse__B2TdC.collapse-disabled__rtti- {
      pointer-events: none;
      background-color: #F8F9F9;
      color: #979ba7;
    }
.yCardItem__VxKVc {
  height: 28px;
  font-size: 14px;
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 28px;
  line-height: 1.75rem;
  border-bottom: solid 1px #EFEFEF;
}
.yCardItem__VxKVc:first-child {
    margin-top: 4px;
  }
.yCardItem__VxKVc:last-of-type {
    border-bottom: none;
  }
.yCardItem__VxKVc.disabled__rNYiv {
    cursor: not-allowed;
    pointer-events: none;
  }
.yCardItem__VxKVc.disabled__rNYiv >a,
    .yCardItem__VxKVc.disabled__rNYiv span {
      color: #979ba7;
    }
.yCardItem__VxKVc a {
    color: #4a4a4a;
    cursor: pointer;
  }
.yCardItem__VxKVc a:hover {
      color: #5478fc;
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }
.yCardItem__VxKVc a:hover span {
        -webkit-text-decoration: underline;
        text-decoration: underline;
      }
.yCardItem__VxKVc a span {
      float: right;
      font-size: 14px;
      font-size: 0.875rem;
      font-weight: 500;
      text-align: right;
      color: #f2695b;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.todoList__HLnKW [data-role='y-card']:nth-child(2n) {
      /* 第二個物件開始 */
      margin-left: 12px;
    }
.todoList__HLnKW [data-role='y-card']:nth-child(n + 3) {
      /* 第三個物件開始才margin-top */
      margin-top: 12px;
    }
.todoList__HLnKW [data-role='y-card'] [data-role='y-card--item']{
      cursor: pointer;
      pointer-events: initial;
      padding-left: 20px;
      padding-right: 20px;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
/**
 * shared styles to be composes
 */
.lineClamp__nXFfT {
  position: relative;
  display: block;
  font-size: 0.938em;
  line-height: 1.33;
  max-height: 2.66em;
  overflow: hidden;
}
.lineClamp__nXFfT:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 1.33em;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(80%, rgba(255, 255, 255, 1)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}
@supports (-webkit-line-clamp: 2) {
  .lineClamp__nXFfT {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .lineClamp__nXFfT:after {
    display: none;
  }
}
/* allocation */
.fullWidth__ks-jM {
  width: 100%;
}
.center__XCuMM {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* make element size relative to content */
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* vertical alignment of contents */
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}
.flexAlignCenter__GndC6 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* make element size relative to content */
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* vertical alignment of contents */
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}
.pullLeft__0yhlS {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.pullRight__2ZlJG {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.overflowEllipsis__8ri1t {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.typeMark__Yh2da {
  background-color: #fff;
  border-radius: 2px;
  font-size: 0.750em;
  line-height: 1;
  padding: 0.250em 0.333em;
}
.typeMarkBasic__QX7um,
.typeMarkBargain__wUksJ {
  border: 1px solid #0078ff;
  color: #0078ff;
}
.typeMarkBidding__-0XuH {
  border: 1px solid #fe8c13;
  color: #fe8c13;
}
.typeMarkInactive__0lNKn {
  border: 1px solid #9f9f9f;
  color: #9f9f9f;
}
/**
 * button: compose size & type to construct your button
 * https://app.zeplin.io/project/58cf9738292af10e391ceb34/screen/5938c144da4506e406f641f7
 * 1. base button
 * 2. size class
 * 3. type class
 * 4. composed button
 */
/* 1. base */
.button__ahhrb {
  border: 1px solid transparent;
  border-radius: 3px;
  font-weight: 500;
  line-height: 1;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.button__ahhrb:disabled {
  cursor: not-allowed;
}
.button__ahhrb:focus {
  outline: none;
}
.button__ahhrb+.button__ahhrb {
  margin-right: 12px;
}
/* 2. size */
.actionButton__FIqS6 {
  font-size: 1.000em;
  padding: 0.875em 0;
  text-align: center;
  width: 100%;
}
.largeButton__cao1c {
  font-size: 16px;
  font-size: 1rem;
  padding: 0.688em 2.000em 0.688em 2.000em;
}
.mediumButton__h8loG {
  font-size: 0.875em;
  padding: 0.688em 2.000em 0.688em 2.000em;
}
.smallButton__9BKCt {
  font-size: 0.750em;
  padding: 0.167em 1.000em 0.083em 1.000em;
}
/* 3. type: primary */
.primaryButtonType1__vvbXi {
  background-color: #ffffff;
  color: #3abfba;
}
.primaryButtonType1__vvbXi:hover {
  background-color: #32a7a3;
}
.primaryButtonType2__PinRQ {
  background-color: #fcda19;
  color: #000000;
}
.primaryButtonType2__PinRQ:hover {
  background-color: #f1c920;
}
.primaryButtonTypeBlue__TIg54 {
  background-color: #5478fc;
  color: #fff;
}
.primaryButtonTypeBlue__TIg54:hover {
  background-color: #4868DB;
}
.primaryButtonTypePurple__tapvT {
  background-color: #ab8cc1;
  color: #fff;
}
.primaryButtonTypePurple__tapvT:hover {
  background-color: #a669df;
}
.primaryButtonTypeBid__erNzh {
  background-color: #ff8a00;
  color: #fff;
}
.primaryButtonTypeBid__erNzh:hover {
  background-color: #e17700;
}
.primaryButtonType1__vvbXi:disabled,
.primaryButtonType2__PinRQ:disabled {
  background-color: #b9bdc5;
  color: #ffffff;
}
/* 3. type: secondary */
.secondaryButtonType1__KiXiI {
  border: 1px solid #3abfba;
  background-color: #ffffff;
  color: #3abfba;
}
.secondaryButtonType1__KiXiI:hover {
  border-color: #32a7a3;
  color: #39aba7;
}
/* OUTLINED button */
.outlinedButtonType__7aEqm {
  border: solid 1px #5478fc;
  border-radius: 3px;
  background-color: #ffffff;
  color: #5478fc;
}
.outlinedButtonType__7aEqm:hover {
  background-color: #ffffff;
  border-color: #4868db;
  color: #4868db;
}
.secondaryButtonType1__KiXiI:disabled,
.outlinedButtonType__7aEqm:disabled {
  background-color: #b9bdc5;
  color: #ffffff;
}
/* page composes */
/* dashboard workspace fixed height */
.dashboardFixedHeight__0DoDr {
  min-height: 691px;
  height: auto;
}
/* fixed proposal content */
.proposalContent__o4P6i {
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.proposalButtonType__ZMytL {
  font-size: 14px;
  font-size: 0.875rem;
  border: solid 1px #e0e4e9;
  border-radius: 2px;
  background-color: #ffffff;
  color: #979ba7;
  padding: 8px 30px;
}
.proposalButtonType__ZMytL:hover {
  background-color: rgba(224, 228, 233, 0.5);
}
.proposalButtonType__ZMytL:disabled,
.proposalButtonType__ZMytL:disabled {
  background-color: #E0E4E9;
  color: #E0E4E9;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.root__rVNYS {

}
.section__d04DP {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.sectionRight__9c-jR {
  width: 292px;
}
.sectionLeft__M2Ban {
  width: calc(100% - 292px - 20px);
  margin-right: 20px;
  /* margin-bottom: 20px; */
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.root__xcYNb {
  position: relative;
  display: inline-block;
  min-width: 292px;
  max-width: 292px;
  width: auto;
}
.root__xcYNb a {
  display: inline;
  font-weight: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;

  -webkit-transition: color .2s, border-bottom .2s;

  transition: color .2s, border-bottom .2s;

  color: #5478fc;
      border-bottom: 1px solid #5478fc;
  }
.root__xcYNb a[disabled] {
    pointer-events: none;
    color: #979ba7;
  }
.root__xcYNb a.active__-Bsea, .root__xcYNb a:hover {
    color: #4285F4;
      border-bottom: 1px solid #4285F4
  }
.advertisement__TcuAH {
  margin-top: 16px;
  width: 292px;
}
.advertisement__TcuAH img {
    width: 292px;
  }
.wrapper__Skejc {
  position: relative;
  padding: 16px 20px;
  font-size: 14px;
  font-size: 0.875rem;
  border: solid 1px #EFF1F4;
}
.title__DVVvl {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: bold;
  color: #26282a;
}
.title__DVVvl [data-role="y-icon"]>svg {
    margin-right: 8px;
  }
.more__y6xOf {
  position: absolute;
  right: 20px;
  bottom: 16px;
  line-height: 20px;
  line-height: 1.25rem;
}
.noAnnouncement__kn4no {
  padding-top: 50px;
  text-align: center;
}
.noAnnouncement__kn4no span {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 500;
    color: #979ba7;
  }
.noAnnouncement__kn4no [data-role="y-icon"] {
    display: block;
    margin: 4px auto;
  }
.noAnnouncement__kn4no [data-role="y-icon"] svg {
      fill: #E0E4E9 !important;
      -webkit-transform: scale(1.1, 1);
              transform: scale(1.1, 1);
    }
.list__C3ind {
  min-height: 235px;
  height: auto;
  margin-top: 10px;

}
.list__C3ind .item__H6rQl {
    position: relative;
    padding: 4px 0px;
    border-bottom: solid 1px #F1F1F1;
  }
.list__C3ind .item__H6rQl >div {
      position: relative;
      display: inline-block;
      padding-left: 20px;
    }
.list__C3ind .item__H6rQl:last-of-type {
      border-bottom: none;
    }
.list__C3ind .item__H6rQl [data-role="y-icon"] {
      padding-left: 0px;
      position: absolute;
      top: 25px;
    }
.list__C3ind .item__H6rQl [data-role="y-icon"] >svg {
        fill: #5478fc !important;
      }
.list__C3ind .item__H6rQl time,
    .list__C3ind .item__H6rQl span {
      text-align: left;
    }
.list__C3ind .item__H6rQl time {
      display: block;
      line-height: 18px;
      line-height: 1.125rem;
      color: #979ba7;
    }
.list__C3ind .item__H6rQl span {
      line-height: 20px;
      line-height: 1.25rem;
      color: #5478fc;
    }
/* .item {
  height: 28px;
  font-size: 14px;
  line-height: 28px;
  border-bottom: solid 2px rgba(151, 151, 151, 0.15);

  &:last-child {
    border-bottom: none;
  }

  &.disabled {
    cursor: not-allowed;
    pointer-events: none;
    > a, span {
      color: $color-secondry-text;
    }
  }

  a {
    color: #4a4a4a;
    cursor: pointer;

    &:hover {
      color: $color-link;
      text-decoration: underline;

      span {
        text-decoration: underline;
      }
    }

    span {
      float: right;
      font-size: 14px;
      font-weight: 500;
      text-align: right;
      color: #f2695b;
      cursor: pointer;
    }
  }
} */

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.promotion__jRTYx {
}
.wrapper__hyn4G {
  margin: 0px;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.reminder__J8NCy {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 16px;
  line-height: 1rem;
  border: solid 1px #E0E4E9;
  padding: 12px;
  margin-top: 40px;
}
.reminder__J8NCy a {
  display: inline;
  font-weight: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;

  -webkit-transition: color .2s, border-bottom .2s;

  transition: color .2s, border-bottom .2s;

  color: #5478fc;
      border-bottom: 1px solid #5478fc;
  }
.reminder__J8NCy a[disabled] {
    pointer-events: none;
    color: #979ba7;
  }
.reminder__J8NCy a.active__YRm5-, .reminder__J8NCy a:hover {
    color: #4285F4;
      border-bottom: 1px solid #4285F4
  }
.reminder__J8NCy a {
    font-weight: inherit;
}
.reminder__J8NCy > p {
  width: 100%;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.section__CT7ib {
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.wrapper__iOzQB {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.NoData__lnEsa,
.Error__-KCym,
.Loading__0as3i {
  margin: 14px 0;
  text-align: center;
}
.NoData__lnEsa span, .Error__-KCym span, .Loading__0as3i span {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: left;
    color: #979ba7;
  }
.NoData__lnEsa [data-role="y-icon"], .Error__-KCym [data-role="y-icon"], .Loading__0as3i [data-role="y-icon"] {
    display: block;
    margin: 0 auto;
    margin-bottom: 16px;
  }
.NoData__lnEsa [data-role="y-icon"] >svg, .Error__-KCym [data-role="y-icon"] >svg, .Loading__0as3i [data-role="y-icon"] >svg {
      fill: #E0E4E9 !important;
      -webkit-transform: scale(1.1, 1);
              transform: scale(1.1, 1);
    }
.clickable__Akl5R [data-role="y-icon"]>svg {
    cursor: pointer;
  }
.clickable__Akl5R [data-role="y-icon"]>svg:hover {
      fill: #5478fc !important;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.tabList__6REiP {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.tab__-DPtO {
  width: 50%;
  background-color: rgba(43, 31, 158, 0.1);
  border-bottom: 4px solid #E1E0E1;
}
.tab__-DPtO:focus {
    outline:0;
  }
.tab__-DPtO:hover {
    border-bottom-color: #BDBEBF;
  }
.tab__-DPtO.tabSelected__2erJi {
    border-bottom-color: #554CB1;
  }
.tab__-DPtO.tabSelected__2erJi a {
      font-weight: bold;
      color: #000;
      background-color: #E9E8F5;
    }
.tab__-DPtO:last-of-type a {
      border-left: 0px;
    }
.tab__-DPtO a {
    cursor: pointer;
    font-size: 16px;
    font-size: 1rem;
    font-weight: normal;
    color: #979ba7;
    height: 38px;
    line-height: 38px;
    line-height: 2.375rem;
    background-color: #fff;
    display: block;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    border: none;
    border: solid 1px #E0E4E9;
    border-bottom: none;
    -webkit-transition: border-color ease-in 80ms, background-color ease-in 80ms;
    transition: border-color ease-in 80ms, background-color ease-in 80ms;
  }
.tab__-DPtO a:focus,
    .tab__-DPtO a:hover {
      border-bottom-color: #E9E8F5;
    }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.cardList__N4wny {
  margin-top: 12px;
}
.cardList__N4wny .title__5apqf, .cardList__N4wny .item__pUpYV {
    padding-left: 20px;
    padding-right: 20px;
  }
.cardList__N4wny .item__pUpYV a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
    }
/* 第二個物件開始 */
.cardList__N4wny [data-role='y-card']:nth-child(2n) {
      margin-left: 12px;
    }
/* 第三個物件開始才margin-top */
.cardList__N4wny [data-role='y-card']:nth-child(n + 3) {
      margin-top: 12px;
    }
.switchToSetting__10-bF {
  font-size: 18px;
  font-size: 1.125rem;
  color: #5478fc;
  margin-top: 10px;
}
.switchToSetting__10-bF a {
    cursor: pointer;
  }
.switchToSetting__10-bF a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.root__pOGXh {
  margin-top: 12px;
}
.cardList__uoWPK {
  margin-top: 12px;
}
/* 第二個物件開始 */
.cardList__uoWPK [data-role='y-card']:nth-child(2n) {
      margin-left: 12px;
    }
/* 第三個物件開始才margin-top */
.cardList__uoWPK [data-role='y-card']:nth-child(n + 3) {
      margin-top: 12px;
    }
.settingCardTitle__GBpWY, .settingCardItem__U2U0D {
  padding-right: 0px;
  padding-left: 20px;
  padding-right: 20px;
}
.switchSetting__IQ-wr {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
}
.switchSetting__IQ-wr [data-role='switch'] {
    float: right;
    top: 2px;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
/* controls margin of handle ring */
.switch__UEV4j.switch-default__21ZhJ {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 40px;
  height: 22px;
  background-color: transparent;
  cursor: pointer;
}
.switch__UEV4j.switch-default__21ZhJ .switch-input__BOfQg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
.switch__UEV4j.switch-default__21ZhJ .switch-label__QMZ32 {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
      background-color: #E0E4E9;
    border: 1px solid #cfd8dc;
    border-radius: 2px;
    -webkit-transition: opacity .15s ease-out, background-color .15s ease-out;
    transition: opacity .15s ease-out, background-color .15s ease-out;
  }
.switch__UEV4j.switch-default__21ZhJ .switch-input__BOfQg:checked ~ .switch-label__QMZ32 {
    /* background: $gray-lightest; */
  }
.switch__UEV4j.switch-default__21ZhJ .switch-input__BOfQg:checked ~ .switch-label__QMZ32::before {
    opacity: 0;
  }
.switch__UEV4j.switch-default__21ZhJ .switch-input__BOfQg:checked ~ .switch-label__QMZ32::after {
    opacity: 1;
  }
.switch__UEV4j.switch-default__21ZhJ .switch-handle__bFc19 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(22px - 0px * 2);
    height: calc(22px - 0px * 2);
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 1px;
    -webkit-transition: left .15s ease-out;
    transition: left .15s ease-out
  }
.switch__UEV4j.switch-default__21ZhJ .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(40px - 22px + 0px);
  }
/* size variations */
.switch__UEV4j.switch-default__21ZhJ.switch-lg__LaAC2 {
  width: 54px;
  height: 22px;
    }
.switch__UEV4j.switch-default__21ZhJ.switch-lg__LaAC2 .switch-label__QMZ32 {
    font-size: 12px;
    font-size: 0.75rem;
  }
.switch__UEV4j.switch-default__21ZhJ.switch-lg__LaAC2 .switch-handle__bFc19 {
    width: calc(22px - 0px * 2);
    height: calc(22px - 0px * 2);
  }
/* -2px to make it fit the actual parent width */
.switch__UEV4j.switch-default__21ZhJ.switch-lg__LaAC2 .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(54px - 22px + 0px);
  }
.switch__UEV4j.switch-default__21ZhJ.switch-sm__bySiB {
  width: 32px;
  height: 20px;
    }
.switch__UEV4j.switch-default__21ZhJ.switch-sm__bySiB .switch-label__QMZ32 {
    font-size: 8px;
    font-size: 0.5rem;
  }
.switch__UEV4j.switch-default__21ZhJ.switch-sm__bySiB .switch-handle__bFc19 {
    width: calc(20px - 0px * 2);
    height: calc(20px - 0px * 2);
  }
/* -2px to make it fit the actual parent width */
.switch__UEV4j.switch-default__21ZhJ.switch-sm__bySiB .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(32px - 20px + 0px);
  }
.switch__UEV4j.switch-default__21ZhJ.switch-xs__duiU0 {
  width: 24px;
  height: 16px;
    }
.switch__UEV4j.switch-default__21ZhJ.switch-xs__duiU0 .switch-label__QMZ32 {
    font-size: 7px;
    font-size: 0.4375rem;
  }
.switch__UEV4j.switch-default__21ZhJ.switch-xs__duiU0 .switch-handle__bFc19 {
    width: calc(16px - 0px * 2);
    height: calc(16px - 0px * 2);
  }
/* -2px to make it fit the actual parent width */
.switch__UEV4j.switch-default__21ZhJ.switch-xs__duiU0 .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(24px - 16px + 0px);
  }
.switch__UEV4j.switch-default__21ZhJ > .switch-input__BOfQg:checked ~ .switch-label__QMZ32 {
    background: #9538d7 !important;
     /* darken */
    border-color: color(#9538d7 shade(15%));
  }
.switch__UEV4j.switch-default__21ZhJ > .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
     /* darken */
    border-color: color(#9538d7 shade(15%));
  }
.switch__UEV4j.switch-text__rRsn1 {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 48px;
  height: 24px;
  background-color: transparent;
  cursor: pointer;
}
.switch__UEV4j.switch-text__rRsn1 .switch-input__BOfQg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
.switch__UEV4j.switch-text__rRsn1 .switch-label__QMZ32 {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
      background-color: #E0E4E9;
    border: 1px solid #cfd8dc;
    border-radius: 2px;
    -webkit-transition: opacity .15s ease-out, background-color .15s ease-out;
    transition: opacity .15s ease-out, background-color .15s ease-out;
  }
.switch__UEV4j.switch-text__rRsn1 .switch-label__QMZ32::before,
    .switch__UEV4j.switch-text__rRsn1 .switch-label__QMZ32::after {
      position: absolute;
      top: 50%;
      width: 50%;
      margin-top: -.5em;
      line-height: 1;
      text-align: center;
      -webkit-transition: inherit;
      transition: inherit;
    }
.switch__UEV4j.switch-text__rRsn1 .switch-label__QMZ32::before {
      right: 1px;
      color: gray;
      content: attr(data-off);
    }
.switch__UEV4j.switch-text__rRsn1 .switch-label__QMZ32::after {
      left: 1px;
      color: #fff;
      content: attr(data-on);
      opacity: 0;
    }
.switch__UEV4j.switch-text__rRsn1 .switch-input__BOfQg:checked ~ .switch-label__QMZ32 {
    /* background: $gray-lightest; */
  }
.switch__UEV4j.switch-text__rRsn1 .switch-input__BOfQg:checked ~ .switch-label__QMZ32::before {
    opacity: 0;
  }
.switch__UEV4j.switch-text__rRsn1 .switch-input__BOfQg:checked ~ .switch-label__QMZ32::after {
    opacity: 1;
  }
.switch__UEV4j.switch-text__rRsn1 .switch-handle__bFc19 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(24px - 0px * 2);
    height: calc(24px - 0px * 2);
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 1px;
    -webkit-transition: left .15s ease-out;
    transition: left .15s ease-out
  }
.switch__UEV4j.switch-text__rRsn1 .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(48px - 24px + 0px);
  }
/* size variations */
.switch__UEV4j.switch-text__rRsn1.switch-lg__LaAC2 {
  width: 56px;
  height: 28px;
    }
.switch__UEV4j.switch-text__rRsn1.switch-lg__LaAC2 .switch-label__QMZ32 {
    font-size: 12px;
    font-size: 0.75rem;
  }
.switch__UEV4j.switch-text__rRsn1.switch-lg__LaAC2 .switch-handle__bFc19 {
    width: calc(28px - 0px * 2);
    height: calc(28px - 0px * 2);
  }
/* -2px to make it fit the actual parent width */
.switch__UEV4j.switch-text__rRsn1.switch-lg__LaAC2 .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(56px - 28px + 0px);
  }
.switch__UEV4j.switch-text__rRsn1.switch-sm__bySiB {
  width: 40px;
  height: 20px;
    }
.switch__UEV4j.switch-text__rRsn1.switch-sm__bySiB .switch-label__QMZ32 {
    font-size: 8px;
    font-size: 0.5rem;
  }
.switch__UEV4j.switch-text__rRsn1.switch-sm__bySiB .switch-handle__bFc19 {
    width: calc(20px - 0px * 2);
    height: calc(20px - 0px * 2);
  }
/* -2px to make it fit the actual parent width */
.switch__UEV4j.switch-text__rRsn1.switch-sm__bySiB .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(40px - 20px + 0px);
  }
.switch__UEV4j.switch-text__rRsn1.switch-xs__duiU0 {
  width: 32px;
  height: 16px;
    }
.switch__UEV4j.switch-text__rRsn1.switch-xs__duiU0 .switch-label__QMZ32 {
    font-size: 7px;
    font-size: 0.4375rem;
  }
.switch__UEV4j.switch-text__rRsn1.switch-xs__duiU0 .switch-handle__bFc19 {
    width: calc(16px - 0px * 2);
    height: calc(16px - 0px * 2);
  }
/* -2px to make it fit the actual parent width */
.switch__UEV4j.switch-text__rRsn1.switch-xs__duiU0 .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(32px - 16px + 0px);
  }
.switch__UEV4j.switch-3d__y3Wmg {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 40px;
  height: 22px;
  background-color: transparent;
  cursor: pointer;
}
.switch__UEV4j.switch-3d__y3Wmg .switch-input__BOfQg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
.switch__UEV4j.switch-3d__y3Wmg .switch-label__QMZ32 {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
      background-color: gray;
    border: 1px solid #cfd8dc;
    border-radius: 2px;
    -webkit-transition: opacity .15s ease-out, background-color .15s ease-out;
    transition: opacity .15s ease-out, background-color .15s ease-out;
  }
.switch__UEV4j.switch-3d__y3Wmg .switch-input__BOfQg:checked ~ .switch-label__QMZ32 {
    /* background: $gray-lightest; */
  }
.switch__UEV4j.switch-3d__y3Wmg .switch-input__BOfQg:checked ~ .switch-label__QMZ32::before {
    opacity: 0;
  }
.switch__UEV4j.switch-3d__y3Wmg .switch-input__BOfQg:checked ~ .switch-label__QMZ32::after {
    opacity: 1;
  }
.switch__UEV4j.switch-3d__y3Wmg .switch-handle__bFc19 {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(22px - 0 * 2);
    height: calc(22px - 0 * 2);
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 1px;
    -webkit-transition: left .15s ease-out;
    transition: left .15s ease-out;
      border: 0;
      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
              box-shadow: 0 2px 5px rgba(0, 0, 0, .3)
  }
.switch__UEV4j.switch-3d__y3Wmg .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(40px - 22px + 0);
  }
/* size variations */
.switch__UEV4j.switch-3d__y3Wmg.switch-lg__LaAC2 {
  width: 54px;
  height: 22px;
    }
.switch__UEV4j.switch-3d__y3Wmg.switch-lg__LaAC2 .switch-label__QMZ32 {
    font-size: 12px;
    font-size: 0.75rem;
  }
.switch__UEV4j.switch-3d__y3Wmg.switch-lg__LaAC2 .switch-handle__bFc19 {
    width: calc(22px - 0 * 2);
    height: calc(22px - 0 * 2);
  }
/* -2px to make it fit the actual parent width */
.switch__UEV4j.switch-3d__y3Wmg.switch-lg__LaAC2 .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(54px - 22px + 0);
  }
.switch__UEV4j.switch-3d__y3Wmg.switch-sm__bySiB {
  width: 32px;
  height: 20px;
    }
.switch__UEV4j.switch-3d__y3Wmg.switch-sm__bySiB .switch-label__QMZ32 {
    font-size: 8px;
    font-size: 0.5rem;
  }
.switch__UEV4j.switch-3d__y3Wmg.switch-sm__bySiB .switch-handle__bFc19 {
    width: calc(20px - 0 * 2);
    height: calc(20px - 0 * 2);
  }
/* -2px to make it fit the actual parent width */
.switch__UEV4j.switch-3d__y3Wmg.switch-sm__bySiB .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(32px - 20px + 0);
  }
.switch__UEV4j.switch-3d__y3Wmg.switch-xs__duiU0 {
  width: 24px;
  height: 16px;
    }
.switch__UEV4j.switch-3d__y3Wmg.switch-xs__duiU0 .switch-label__QMZ32 {
    font-size: 7px;
    font-size: 0.4375rem;
  }
.switch__UEV4j.switch-3d__y3Wmg.switch-xs__duiU0 .switch-handle__bFc19 {
    width: calc(16px - 0 * 2);
    height: calc(16px - 0 * 2);
  }
/* -2px to make it fit the actual parent width */
.switch__UEV4j.switch-3d__y3Wmg.switch-xs__duiU0 .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    left: calc(24px - 16px + 0);
  }
/* pills style */
.switch-pill__E9VBT .switch-label__QMZ32,
  .switch-pill__E9VBT .switch-handle__bFc19 {
    border-radius: 50em !important;
  }
.switch-pill__E9VBT .switch-label__QMZ32::before {
    right: 2px !important;
  }
.switch-pill__E9VBT .switch-label__QMZ32::after {
    left: 2px !important;
  }
/* normal style */
.switch-primary__Y3VIA > .switch-input__BOfQg:checked ~ .switch-label__QMZ32 {
    background: #007bff !important;
     /* darken */
    border-color: color(#007bff shade(15%));
  }
.switch-primary__Y3VIA > .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
     /* darken */
    border-color: color(#007bff shade(15%));
  }
/* outline style */
.switch-primary-outline__ImubO > .switch-input__BOfQg:checked ~ .switch-label__QMZ32 {
    background: #fff !important;
    border-color: #007bff;
  }
.switch-primary-outline__ImubO > .switch-input__BOfQg:checked ~ .switch-label__QMZ32::after {
      color: #007bff;
    }
.switch-primary-outline__ImubO > .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    border-color: #007bff;
  }
/* outline alternative style */
.switch-primary-outline-alt__oDdZX > .switch-input__BOfQg:checked ~ .switch-label__QMZ32 {
    background: #fff !important;
    border-color: #007bff;
  }
.switch-primary-outline-alt__oDdZX > .switch-input__BOfQg:checked ~ .switch-label__QMZ32::after {
      color: #007bff;
    }
.switch-primary-outline-alt__oDdZX > .switch-input__BOfQg:checked ~ .switch-handle__bFc19 {
    background: #007bff !important;
    border-color: #007bff;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.YSelect__pqqda {
  width: 225px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.YSelect__pqqda .Select-control {
      height: 26px;
      font-weight: normal;
      line-height: 26px;
      line-height: 1.625rem;
      border-radius: 2px;
      border: solid 1px #e0e4e9;
    }
.YSelect__pqqda .Select-control .Select-input {
        height: 26px;
      }
.YSelect__pqqda .Select-control .Select-value, .YSelect__pqqda .Select-control .Select-placeholder {
        line-height: inherit;
        padding-left: 14px;
        color: #54546f;
      }
.YSelect__pqqda .Select-control .Select-value-label {
        color: #54546f!important;
      }
/* arrow down */
.YSelect__pqqda .Select-control .Select-arrow-zone {
        padding-right: 0px;
        width: 28px;
      }
.YSelect__pqqda .Select-option {
      font-weight: normal;
      color: #54546f;
      padding: 0px 12px;
    }
.YSelect__pqqda .Select-option.is-disabled {
        color: #ccc;
        cursor: default
      }
.YSelect__pqqda.small__NJcAv {
    max-width: 80px;
  }
.YSelect__pqqda.small__NJcAv .Select-control {
      height: 20px;
      line-height: normal;
    }
.YSelect__pqqda.small__NJcAv .Select-control .Select-input {
        height: 20px;
      }
.YSelect__pqqda.small__NJcAv .Select-control .Select-arrow-zone {
        padding-right: 0px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        line-height: 1.25rem;
      }
.PickerArrow__Ng8Gd {
  cursor: pointer;
  display: table-cell;
  text-align: center;
  padding-right: 0px;
  width: 34px;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

  .PickerArrow__Ng8Gd.isOpen__O4TWx {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  .PickerArrow__Ng8Gd .arrow__zMNkM {}

.InputPicker__W287d {
  position: relative;
  min-width: 250px;
}

.InputPicker__W287d:focus {
    outline: none;
  }

.InputPicker__W287d.disabled {
    pointer-events: none;
  }

.InputPicker__W287d.disabled .selection__fuYIk {
      color: #979ba7;
      cursor: not-allowed;
      background-color: #f5f5f5;
    }

.InputPicker__W287d.disabled [data-role="y-icon"]>svg {
      fill: #979ba7 !important;
    }

.InputPicker__W287d .selection__fuYIk {
    font-size: 16px;
    font-size: 1rem;
    height: 40px;
    line-height: 40px;
    line-height: 2.5rem;
    width: inherit;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px #e0e4e9;
    cursor: pointer;
    display: table;
    border-spacing: 0;
    border-collapse: separate;
    outline: 0;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

.InputPicker__W287d .selection__fuYIk .selectedValue__mQL4l {
      padding-left: 12px;
    }

.InputPicker__W287d .selection__fuYIk .placeholder__IcBrF {
      color: #979ba7;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.WrappedFlatpickr__-pu3s {
  display: inline-block;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.WrappedFlatpickr__-pu3s input {
    color: #4a4a4a;
    width: 100%;
  }
.WrappedFlatpickr__-pu3s input:disabled {
    color: #979ba7;
    background-color: #f1f1f5;
    cursor: not-allowed;
  }
.clearBtn__Kn-Ry {
  border-radius: 50%;
  position: absolute;
  top: 1px;
  right: 3px;
  -webkit-text-decoration: none;
  text-decoration: none;
  padding: 2.5px;
  padding-left: 3px;
  cursor: pointer;
}
.clearBtn__Kn-Ry:hover {
    background-color: #eee;
    color: red;
  }
.calenderBtn__pwk3- {
  position: absolute;
  top: 4px;
  right: 6px;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  fill: #7a00a7 !important;
}
.calenderBtn__pwk3-:hover,
  .calenderBtn__pwk3-:focus {
    fill: #9e39fb !important;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.HyperLink__ALpQP {
  color: #5478fc;
  display: inline;
  font-weight: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;

  -webkit-transition: color .2s, border-bottom .2s;

  transition: color .2s, border-bottom .2s;

  color: #5478fc;
      border-bottom: 1px solid transparent;
}
.HyperLink__ALpQP[disabled] {
    pointer-events: none;
    color: #979ba7;
  }
.HyperLink__ALpQP.active__-IEKl, .HyperLink__ALpQP:hover {
    color: #4285F4;
      border-bottom: 1px solid #4285F4
  }
.HyperLink__ALpQP.isButton__D9HVK {
    -webkit-text-decoration: none;
    text-decoration: none;
    border-bottom: none;
  }
.HyperLink__ALpQP.isButton__D9HVK:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
      border-bottom: none;
    }
.HyperLink__ALpQP.isButton__D9HVK button {
      margin: 0;
    }
.inputShared__tg-C2 {
  font-size: 14px;
  font-size: 0.875rem;
}
.inputShared__tg-C2 input[type="radio"],
  .inputShared__tg-C2 input[type="checkbox"] {
    display: none;
  }
.inputShared__tg-C2 input[type="radio"]+label, .inputShared__tg-C2 input[type="checkbox"]+label {
      position: relative;
      display: inline-block;
      padding-left: 1.4em;
      margin-right: 8px;
      font-weight: normal;
      font-weight: initial;
      cursor: pointer;
      line-height: 14px;
      line-height: 0.875rem;
      -webkit-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }
.inputShared__tg-C2 input[type="radio"]+label:before,
      .inputShared__tg-C2 input[type="radio"]+label:after,
      .inputShared__tg-C2 input[type="checkbox"]+label:before,
      .inputShared__tg-C2 input[type="checkbox"]+label:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 14px;
        height: 14px;
        text-align: center;
        color: #54546f;
        -webkit-box-shadow: 0 0 0 1px;
                box-shadow: 0 0 0 1px;
        border-radius: 50px;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
      }
.checkButton__X0gk6 {
}
.radioButton__YEg15 {
}
.radioButton__YEg15 input[type="radio"]+label:before {
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      -webkit-box-shadow:
        inset 0 0 0 0.2em white,
        inset 0 0 0 1em white;
              box-shadow:
        inset 0 0 0 0.2em white,
        inset 0 0 0 1em white;
    }
.radioButton__YEg15 input[type="radio"]+label:hover:before {
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      -webkit-box-shadow:
        inset 0 0 0 0.3em white,
        inset 0 0 0 1em #c6c6c6;
              box-shadow:
        inset 0 0 0 0.3em white,
        inset 0 0 0 1em #c6c6c6;
    }
.radioButton__YEg15 input[type="radio"]:checked+label:before {
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      -webkit-box-shadow:
        inset 0 0 0 0.2em white,
        inset 0 0 0 1em #54546f;
              box-shadow:
        inset 0 0 0 0.2em white,
        inset 0 0 0 1em #54546f;
    }
.radioButton__YEg15 input[type="checkbox"]+label:before {
      content: '✗';
      border-radius: 4px;
      background-color: white;
      color: white;
    }
.radioButton__YEg15 input[type="checkbox"]+label:hover:before {
      color: #f0f0f0;
    }
.radioButton__YEg15 input[type="checkbox"]:checked+label:before {
      background-color: white;
      color: #54546f;
    }
.radioButton__YEg15.orange__t8-NG input[type="radio"]:checked+label:before {
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        -webkit-box-shadow:
          inset 0 0 0 0.2em white,
          inset 0 0 0 1em rgb(247, 148, 32);
                box-shadow:
          inset 0 0 0 0.2em white,
          inset 0 0 0 1em rgb(247, 148, 32);
      }
.radioButton__YEg15.orange__t8-NG input[type="checkbox"]:checked+label:before {
        color: rgb(247, 148, 32);
      }
/** redux-form components **/
.FormLabel__rM6p0 {
  position: relative;
}
.FormLabel__rM6p0.withIcon__HCUUS {
    left: 18px;
  }
.FormLabel__rM6p0 .icon__bFqN2 [data-role="y-icon"] {
      display: inline-block;
      margin-left: 4px;
    }
.FormRow__rtHx0 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: auto;
  font-size: 16px;
  font-size: 1rem;
}
.FormRow__rtHx0+.FormRow__rtHx0 {
    margin-top: 30px;
  }
.FormRow__rtHx0+.FormRow__rtHx0.withTopTip__x-u7a {
      margin-top: 2px;
    }
.FormRow__rtHx0.withInputCountPaddingBottom__HkP8f {
    padding-bottom: calc(30px - 10px);
  }
.FormRow__rtHx0 [class*="Disclaimer"] ol {
    list-style-type: decimal;
  }
.FormRow__rtHx0 >label {
    position: relative;
    font-size: 16px;
    font-size: 1rem;
    text-align: right;
    color: #26282a;
  }
.FormRow__rtHx0 >label:not(.withoutPaddingRight__DISuP) {
      padding-right: 56px;
    }
.FormRow__rtHx0 >label:not(.FormRow__rtHx0 >label.withoutMargin__48N3N) {
      min-width: 204px;
      width: 204px;
      margin-left: 30px;
    }
.FormRow__rtHx0 >label .title__DEmeY {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      height: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      line-height: 40px;
      line-height: 2.5rem;
    }
/* label alignment */
.FormRow__rtHx0 >label .title__DEmeY.top__7A9aP {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        line-height: 20px;
        line-height: 1.25rem;
      }
.FormRow__rtHx0 >label .title__DEmeY.top__7A9aP .subTitle__FXjwO {
          line-height: 20px;
          line-height: 1.25rem;
        }
.FormRow__rtHx0 >label .title__DEmeY.bottom__fVPIA {
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        line-height: 20px;
        line-height: 1.25rem;
      }
.FormRow__rtHx0 >label .title__DEmeY.bottom__fVPIA .subTitle__FXjwO {
          line-height: 20px;
          line-height: 1.25rem;
        }
.FormRow__rtHx0 >label .title__DEmeY.center__IFj8c {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
.FormRow__rtHx0 >label .title__DEmeY.center__IFj8c .subTitle__FXjwO {
          line-height: 20px;
          line-height: 1.25rem;
        }
.FormRow__rtHx0 >label .subTitle__FXjwO {
      font-size: 12px;
      font-size: 0.75rem;
      text-align: right;
      color: #979ba7;
      line-height: 0px;
      line-height: 0;
    }
.FormRow__rtHx0 >label .subTitle__FXjwO.blue__JccnF {
        color: #6371ff;
      }
.FormRow__rtHx0 >.content__peL5- {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row;
        -ms-flex-flow: row;
            flex-flow: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    position: relative;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
.FormRow__rtHx0 >.content__peL5- >* {
      border-radius: 2px;
      -webkit-box-shadow: none;
              box-shadow: none;
    }
.FormRow__rtHx0 .Select {
      line-height: 40px;
      line-height: 2.5rem;
    }
.FormRow__rtHx0 .Select .Select-control {
        height: 40px;
        line-height: 40px;
        line-height: 2.5rem;
        border-radius: 2px;
        border: solid 1px #e0e4e9;
      }
.FormRow__rtHx0 .Select .Select-control .Select-value-label {
          font-size: 16px;
          font-size: 1rem;
          color: #26282a !important;
        }
.InputNumber__Zjx9s {
  display: inline-block;
  border-color: #e0e4e9;
}
.InputNumber__Zjx9s .ant-input-number {
    border-radius: 2px;
    border-color: #e0e4e9;
    height: 40px;
    line-height: 40px;
    line-height: 2.5rem;
  }
.InputNumber__Zjx9s .ant-input-number input {
      font-size: 16px;
      font-size: 1rem;
      color: #26282a;
      padding: 0;
      text-indent: 8px;
    }
.InputNumber__Zjx9s .ant-input-number.ant-input-number-disabled input {
        color: #979ba7;
      }
.InputField__RvqLp.disabled__NdEJp input[type=text],
    .InputField__RvqLp.disabled__NdEJp input[type=number] {
      background-color: #f1f1f5;
    }
.InputField__RvqLp input[type=text],
  .InputField__RvqLp input[type=number] {
    width: 220px;
    color: #26282a;
    height: 40px;
    border-radius: 2px;
    background-color: #ffffff;
    border: solid 1px #e0e4e9;
    padding-left: 12px;
    -webkit-box-shadow: none;
            box-shadow: none;
    font-size: 16px;
    font-size: 1rem;
  }
.InputField__RvqLp input[type=text]::-webkit-input-placeholder, .InputField__RvqLp input[type=number]::-webkit-input-placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.InputField__RvqLp input[type=text]::-moz-placeholder, .InputField__RvqLp input[type=number]::-moz-placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.InputField__RvqLp input[type=text]:-ms-input-placeholder, .InputField__RvqLp input[type=number]:-ms-input-placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.InputField__RvqLp input[type=text]::-ms-input-placeholder, .InputField__RvqLp input[type=number]::-ms-input-placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.InputField__RvqLp input[type=text]::placeholder, .InputField__RvqLp input[type=number]::placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.InputField__RvqLp .ant-input-group-wrapper {
      top: 0px;
    }
.TimePicker__pW1xv .ant-time-picker {
      width: 230px;
    }
.TimePicker__pW1xv .ant-time-picker-icon {
      width: 18px;
      height: 18px;
      margin-top: -10px;
    }
.TimePicker__pW1xv .ant-time-picker-icon .anticon {
        color: #979ba7;
      }
.TimePicker__pW1xv .ant-time-picker-icon .anticon >svg {
          width: 18px !important;
          height: 18px !important;
        }
.TimePicker__pW1xv .ant-time-picker-input {
      width: 230px;
      color: #26282a;
      font-size: 16px;
      font-size: 1rem;
      border-radius: 3px;
      border-color: #e0e4e9;
      height: 40px;
    }
.TimePicker__pW1xv .TimePickerContainer__ElHqs .ant-time-picker-panel {
        width: 230px;
        max-width: 230px;
        top: 0px !important;
      }
.TimePicker__pW1xv .TimePickerContainer__ElHqs .ant-time-picker-panel .ant-time-picker-panel-input-wrap {
          font-size: 16px;
          font-size: 1rem;
          width: 230px;
          max-width: 230px;
        }
.TimePicker__pW1xv .TimePickerContainer__ElHqs .ant-time-picker-panel .ant-time-picker-panel-select {
          font-size: 16px;
          font-size: 1rem;

        }
.TimePicker__pW1xv .TimePickerContainer__ElHqs .ant-time-picker-panel .ant-time-picker-panel-select:first-child:nth-last-child(2),
          .TimePicker__pW1xv .TimePickerContainer__ElHqs .ant-time-picker-panel .ant-time-picker-panel-select:first-child:nth-last-child(2)~.ant-time-picker-panel-select {
            width: 50%;
          }
.helpBlock__ZiQwy {
  width: 100%;
  font-size: 12px;
  font-size: 0.75rem;
  margin-top: 4px;
}
.helpBlock__ZiQwy.emptyBlock__V5k0i {
    display: inline-block;
  }
.helpBlock__ZiQwy.absolute__rHREf {
    position: absolute;
    top: 42px;
  }
.helpBlock__ZiQwy.list__hG5n6 {
    display: list-item;
    list-style-position: inside;
    line-height: 20px;
    line-height: 1.25rem;
  }
.helpBlock__ZiQwy.inline__7TXb6 {
    width: auto;
    width: initial;
    margin: 0px 8px;
    float: right;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
  }
.helpBlock__ZiQwy.withErrors__WeCBH {
    color: #fa1229;
  }
.has-form-error {
  color: #fa1229;
}
.has-form-error input,
  .has-form-error textarea {
    border-radius: 3px;
    border: solid 1px #fa1229 !important;
  }
.has-form-error [data-role="selection"] {
    border-radius: 3px;
    border: solid 1px #fa1229 !important;
  }
.has-form-error.ant-picker{
  border: solid 1px #fa1229;
}
.has-form-error.ant-picker input{
    border: inherit !important;
  }
.RFSelectInput__KIUAN {
  line-height: 40px;
  line-height: 2.5rem;
}
.RFSelectInput__KIUAN .Select-control {
      height: 40px;
      line-height: 40px;
      line-height: 2.5rem;
      border-radius: 2px;
      border: solid 1px #e0e4e9;
    }
.RFSelectInput__KIUAN .Select-control .Select-value-label {
        font-size: 16px;
        font-size: 1rem;
        color: #26282a !important;
      }
.TextareaInputField__IV9ej textarea {
    border-radius: 2px;
    background-color: #ffffff;
    border: solid 1px #e0e4e9;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding: 10px 12px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 16px;
    font-size: 1rem;
  }
.TextareaInputField__IV9ej textarea:disabled {
      background-color: #f1f1f5;
    }
.TextareaInputField__IV9ej textarea::-webkit-input-placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.TextareaInputField__IV9ej textarea::-moz-placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.TextareaInputField__IV9ej textarea:-ms-input-placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.TextareaInputField__IV9ej textarea::-ms-input-placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.TextareaInputField__IV9ej textarea::placeholder {
      font-size: 16px;
      font-size: 1rem;
      color: #979ba7;
      font-weight: normal;
      font-style: normal;
    }
.TextareaInputField__IV9ej textarea:focus {
      outline: none;
    }
.WrappedFlatpickrInput__wjEtJ input, .FlatpickrInput__12PC0 input {
    font-size: 16px;
    font-size: 1rem;
    text-indent: 12px;
    height: 40px !important;
    border-radius: 2px !important;
    border: solid 1px #e0e4e9;
  }
.WrappedFlatpickrInput__wjEtJ [data-role="calendar-button"], .FlatpickrInput__12PC0 [data-role="calendar-button"] {
    top: 8px;
    right: 8px;
  }
.WrappedFlatpickrInput__wjEtJ [data-role="calendar-button"] [data-icon="calendar"], .FlatpickrInput__12PC0 [data-role="calendar-button"] [data-icon="calendar"] {
      fill: #979ba7 !important;
    }
.FlatpickrTimeInput__7hrXO input, [data-role='flatpickr-time-input'] input {
    text-indent: 12px;
    width: 96px;
    height: 40px;
    border-radius: 2px;
    border: solid 1px #e0e4e9;
    font-size: 16px;
    font-size: 1rem;
  }
/* arrow up when opening */
.FlatpickrTimeInput__7hrXO.isOpen__F9Gel .arrowZone__MYjul .arrow__kh4NN, [data-role='flatpickr-time-input'].isOpen__F9Gel .arrowZone__MYjul .arrow__kh4NN {
      border-color: transparent transparent #ab8cc1;
      border-width: 0 7px 10px;
    }
.FlatpickrTimeInput__7hrXO .arrowZone__MYjul, [data-role='flatpickr-time-input'] .arrowZone__MYjul {
    cursor: pointer;
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 28px;
    height: 40px;
    line-height: 40px;
    line-height: 2.5rem;
    float: right;
    background-color: #e0e4e9;
  }
.FlatpickrTimeInput__7hrXO .arrowZone__MYjul .arrow__kh4NN, [data-role='flatpickr-time-input'] .arrowZone__MYjul .arrow__kh4NN {
      border-color: #ab8cc1 transparent transparent;
      border-width: 10px 7px 1px;
      border-style: solid;
      display: inline-block;
      height: 0;
      width: 0;
      position: relative;

    }
.WithInputCount__maABM {
  position: relative;
}
.WithInputCount__maABM .count__7QGdp {
    color: #9b98ae;
    line-height: 20px;
    line-height: 1.25rem;
    font-size: 12px;
    font-size: 0.75rem;
    position: absolute;
    right: 0;
    text-align: right;
    letter-spacing: 1px;
    letter-spacing: 0.0625rem;
    margin-top: 4px;
  }
.WithInputCount__maABM .count__7QGdp.exceedLimit__ysD-H {
      color: #fa1229;
    }
.WithInputCount__maABM.fullWidth__I4NI4 {
    width: 100%;
  }
.WithInputCount__maABM.fullWidth__I4NI4 input {
      width: 100%;
    }
.WithInputCount__maABM.countError__G6EtD input {
      border-color: #fa1229;
    }
.WithInputCount__maABM.inlineCount__eCQto {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
.WithInputCount__maABM.inlineCount__eCQto .count__7QGdp {
      position: relative;
      margin-left: 8px;
    }
.withInputPlaceholder__Nokur {
  position: relative;
}
.withInputPlaceholder__Nokur .subPlaceholder__NP9ii {
    font-weight: 600;
    color: #9b9b9b;
    width: 24px;
    height: 40px;
    line-height: 40px;
    line-height: 2.5rem;
    position: absolute;
    right: 0px;
    display: inline-block;
  }
.withInputPlaceholder__Nokur .subPlaceholder__NP9ii:hover {
      display: none;
    }
.RadioGroup__-A5Wq {
  font-size: 16px;
  font-size: 1rem;
}
.RadioGroup__-A5Wq .ant-radio-wrapper {
      margin-right: 20px;
      font-size: 16px;
      font-size: 1rem;
      line-height: 1;
      color: #4a4a4a;
    }
.RadioGroup__-A5Wq .ant-radio-wrapper+.RadioGroup .ant-radio-wrapper {
        margin-right: 8px;
      }
.RadioGroup__-A5Wq .ant-radio-group-outline .ant-radio-wrapper:not(.ant-radio-wrapper-disabled):hover .ant-radio-inner, .RadioGroup__-A5Wq .ant-radio-group-outline .ant-radio-wrapper-focused .ant-radio-inner {
            border-color: #5478fc !important;
            color: #26282a;
          }
.RadioGroup__-A5Wq .ant-radio-group-outline .ant-radio-wrapper-checked:not(.ant-radio-wrapper-disabled) .ant-radio-inner {
          border-color: #5478fc !important;
          color: #26282a;
        }
.RadioGroup__-A5Wq .ant-radio-group-outline .ant-radio-wrapper-checked:not(.ant-radio-wrapper-disabled) .ant-radio-inner:after {
            background-color: #5478fc !important;
            width: 6px !important;
            height: 6px !important;
            left: 4px !important;
            top: 4px !important;
          }
.RadioGroup__-A5Wq .ant-radio-group-outline .ant-radio-inner {
        width: 18px;
        height: 18px;
        border: solid 2px #b9bdc5 !important;
      }
.RadioGroup__-A5Wq .ant-radio-group-outline .ant-radio-inner:after {
          -webkit-transition-property: opacity;
          transition-property: opacity;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        background: #e0e4e9;
        border-color: #e0e4e9;
        color: #26282a;
      }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover,
        .RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
          border-color: #e0e4e9;
          background: #e0e4e9;
          color: #26282a;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper {
        color: #26282a;
        border-color: #e0e4e9;
        font-size: 16px;
        font-size: 1rem;
        height: 40px;
        line-height: 40px;
        line-height: 2.5rem;
        margin: 0;
        padding: 0px 12px;
      }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper a {
          color: #e0e4e9;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper >.ant-radio-button {
          color: #e0e4e9;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper:first-child,
        .RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper+.ant-radio-button-wrapper:not(:last-child) {
          border-right: none;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper:first-child {
          border-radius: 2px 0 0 2px;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper:last-child {
          border-radius: 0 2px 2px 0;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper:first-child:last-child {
          border-radius: 2px;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper:hover,
        .RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper-focused {
          border-color: #e6ebf1;
          background: #e6ebf1;
          color: #26282a;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper-checked {
          background: #e0e4e9;
          border-color: #e0e4e9;
          color: #26282a;
          -webkit-box-shadow: -1px 0 0 0 #e0e4e9;
                  box-shadow: -1px 0 0 0 #e0e4e9;
          z-index: 0;
        }
.RadioGroup__-A5Wq .ant-radio-group-solid .ant-radio-button-wrapper-checked::before {
            background-color: #e0e4e9 !important;
            opacity: 0.1;
          }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio {
        top: .11em;
      }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper:hover {
          color: #5478fc !important;
        }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
          color: #5478fc !important;
        }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
          color: #5478fc !important;
        }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper-checked:not(.ant-radio-button-wrapper-disabled) .ant-radio-inner {
          background-color: #5478fc !important;
        }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper-checked:not(.ant-radio-button-wrapper-disabled) .ant-radio-inner:after,
          .RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper-checked:not(.ant-radio-button-wrapper-disabled) .ant-radio-inner:before {
            border-color: #fff !important;
            background-color: #fff !important;
          }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-checked:after {
          border-radius: 2px;
        }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-inner {
        width: 20px;
        height: 20px;
        background-color: #fff !important;
        border-radius: 2px;
        border: 1px solid #e0e4e9 !important;
      }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-inner:after {
          width: 10px;
          height: 2px;
          top: 8px;
          left: 4px;
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          border-color: #5478fc !important;
        }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-inner:before {
          position: absolute;
          height: 10px;
          top: 4px;
          left: 8px;
          border: 2px solid #5478fc;
          border-top: 0;
          border-left: 0;
          content: ' ';
          -webkit-transition: all .3s cubic-bezier(.78, .14, .15, .86);
          transition: all .3s cubic-bezier(.78, .14, .15, .86);
          opacity: 1;
        }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper:focus .ant-radio-inner,
      .RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper:hover .ant-radio-inner {
        background-color: #5478fc !important;
      }
.RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper:focus .ant-radio-inner:after,
        .RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper:focus .ant-radio-inner:before,
        .RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper:hover .ant-radio-inner:after,
        .RadioGroup__-A5Wq .ant-radio-group-plus .ant-radio-wrapper:hover .ant-radio-inner:before {
          border-color: #fff !important;
          background-color: #fff !important;
        }
.CheckboxGroup__457Rm,
.AntdCheckbox__BQPrB {
  display: inline-block;
  font-size: 16px;
  font-size: 1rem;
}
.CheckboxGroup__457Rm.plus__RIk2k .ant-checkbox-checked .ant-checkbox-inner:after,
          .CheckboxGroup__457Rm.plus__RIk2k .ant-checkbox-checked .ant-checkbox-inner:before,
          .CheckboxGroup__457Rm.plus__RIk2k .ant-checkbox-indeterminate .ant-checkbox-inner:after,
          .CheckboxGroup__457Rm.plus__RIk2k .ant-checkbox-indeterminate .ant-checkbox-inner:before,
          .AntdCheckbox__BQPrB.plus__RIk2k .ant-checkbox-checked .ant-checkbox-inner:after,
          .AntdCheckbox__BQPrB.plus__RIk2k .ant-checkbox-checked .ant-checkbox-inner:before,
          .AntdCheckbox__BQPrB.plus__RIk2k .ant-checkbox-indeterminate .ant-checkbox-inner:after,
          .AntdCheckbox__BQPrB.plus__RIk2k .ant-checkbox-indeterminate .ant-checkbox-inner:before {
            border-color: #fff !important;
          }
/* making background to turn blue on hover */
.CheckboxGroup__457Rm.plus__RIk2k .ant-checkbox-wrapper:hover .ant-checkbox-inner, .AntdCheckbox__BQPrB.plus__RIk2k .ant-checkbox-wrapper:hover .ant-checkbox-inner {
        background-color: #5478fc !important;
        border-color: #5478fc !important;
      }
.CheckboxGroup__457Rm.plus__RIk2k .ant-checkbox-wrapper:hover .ant-checkbox-inner:after,
        .CheckboxGroup__457Rm.plus__RIk2k .ant-checkbox-wrapper:hover .ant-checkbox-inner:before,
        .AntdCheckbox__BQPrB.plus__RIk2k .ant-checkbox-wrapper:hover .ant-checkbox-inner:after,
        .AntdCheckbox__BQPrB.plus__RIk2k .ant-checkbox-wrapper:hover .ant-checkbox-inner:before {
          border-color: #fff !important;
        }
.CheckboxGroup__457Rm.plus__RIk2k .ant-checkbox-inner:after, .AntdCheckbox__BQPrB.plus__RIk2k .ant-checkbox-inner:after {
          width: 10px;
          height: 2px;
          top: 7px;
          left: 3px;
          -webkit-transform: none;
                  transform: none;
          opacity: 1;
          border-color: #5478fc !important;
        }
.CheckboxGroup__457Rm.plus__RIk2k .ant-checkbox-inner:before, .AntdCheckbox__BQPrB.plus__RIk2k .ant-checkbox-inner:before {
          position: absolute;
          height: 10px;
          top: 3px;
          left: 7px;
          border: 2px solid #5478fc;
          border-top: 0;
          border-left: 0;
          content: ' ';
          -webkit-transition: all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s;
          transition: all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s;
          opacity: 1;
        }
.CheckboxGroup__457Rm .ant-checkbox-input:focus+.ant-checkbox-inner,
    .CheckboxGroup__457Rm .ant-checkbox-wrapper:hover .ant-checkbox-inner,
    .CheckboxGroup__457Rm .ant-checkbox:hover .ant-checkbox-inner,
    .AntdCheckbox__BQPrB .ant-checkbox-input:focus+.ant-checkbox-inner,
    .AntdCheckbox__BQPrB .ant-checkbox-wrapper:hover .ant-checkbox-inner,
    .AntdCheckbox__BQPrB .ant-checkbox:hover .ant-checkbox-inner {
      border-color: #5478fc;
    }
.CheckboxGroup__457Rm .ant-checkbox-wrapper, .AntdCheckbox__BQPrB .ant-checkbox-wrapper {
      font-size: 16px;
      font-size: 1rem;
      margin: 0px 20px 0px 0px;
    }
.CheckboxGroup__457Rm .ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-disabled)~span, .AntdCheckbox__BQPrB .ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-disabled)~span {
          color: #5478fc !important;
        }
.CheckboxGroup__457Rm .ant-checkbox-wrapper .ant-checkbox~span, .AntdCheckbox__BQPrB .ant-checkbox-wrapper .ant-checkbox~span {
        color: #26282a;
        line-height: 20px;
        line-height: 1.25rem;
      }
.CheckboxGroup__457Rm .ant-checkbox-wrapper .ant-checkbox-disabled~span, .AntdCheckbox__BQPrB .ant-checkbox-wrapper .ant-checkbox-disabled~span {
        color: #979ba7;
      }
.CheckboxGroup__457Rm .ant-checkbox-wrapper .ant-checkbox-disabled~span:hover, .AntdCheckbox__BQPrB .ant-checkbox-wrapper .ant-checkbox-disabled~span:hover {
          color: #979ba7 !important;
        }
.CheckboxGroup__457Rm .ant-checkbox-inner, .AntdCheckbox__BQPrB .ant-checkbox-inner {
      width: 20px;
      height: 20px;
      border-radius: 2px;
      border: 2px solid #b9bdc5;
    }
.CheckboxGroup__457Rm .ant-checkbox-inner:after, .AntdCheckbox__BQPrB .ant-checkbox-inner:after {
        width: 6px;
        height: 12px;
        left: 3px;
      }
.CheckboxGroup__457Rm .ant-checkbox, .AntdCheckbox__BQPrB .ant-checkbox {
      margin-top: 1px;
    }
.CheckboxGroup__457Rm :not(.ant-checkbox-disabled).ant-checkbox-checked~span, .CheckboxGroup__457Rm :not(.ant-checkbox-disabled).ant-checkbox-indeterminate~span, .AntdCheckbox__BQPrB :not(.ant-checkbox-disabled).ant-checkbox-checked~span, .AntdCheckbox__BQPrB :not(.ant-checkbox-disabled).ant-checkbox-indeterminate~span {
          color: #5478fc !important;
        }
.CheckboxGroup__457Rm :not(.ant-checkbox-disabled).ant-checkbox-checked .ant-checkbox-inner, .CheckboxGroup__457Rm :not(.ant-checkbox-disabled).ant-checkbox-indeterminate .ant-checkbox-inner, .AntdCheckbox__BQPrB :not(.ant-checkbox-disabled).ant-checkbox-checked .ant-checkbox-inner, .AntdCheckbox__BQPrB :not(.ant-checkbox-disabled).ant-checkbox-indeterminate .ant-checkbox-inner {
          background-color: #5478fc;
          border-color: #5478fc;
        }
.CheckboxGroup__457Rm :not(.ant-checkbox-disabled).ant-checkbox-checked .ant-checkbox-inner:after, .CheckboxGroup__457Rm :not(.ant-checkbox-disabled).ant-checkbox-indeterminate .ant-checkbox-inner:after, .AntdCheckbox__BQPrB :not(.ant-checkbox-disabled).ant-checkbox-checked .ant-checkbox-inner:after, .AntdCheckbox__BQPrB :not(.ant-checkbox-disabled).ant-checkbox-indeterminate .ant-checkbox-inner:after {
            border-color: #fff;
          }
.RangePicker__kmpqw.ant-picker-range.ant-picker {
    border-radius: 3px;
    height: 40px;
    padding: 9px 12px;
    width: 100%;
  }
.RangePicker__kmpqw .ant-picker-range-separator {
      width: 27px;
      background-color: #26282a;
      height: 1px;
      vertical-align: middle;
      margin: 0 16px;
    }
.RangePicker__kmpqw .ant-picker-input input {
      width: 33%;
      font-size: 1rem;
    }
.RangePicker__kmpqw .ant-calendar-picker-clear,
    .RangePicker__kmpqw .ant-calendar-picker-icon {
      width: 16px;
      height: 18px;
    }

.SingleLineText__WSko6 {
  line-height: 40px;
  line-height: 2.5rem;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.CheckboxMenuSelect__Y2-KQ {
  width: 544px;
}
.CheckboxMenuSelectPopup__Wb-cd {
  width: 544px;
}
.CheckboxMenuSelectPopup__Wb-cd .y-menu {
      margin-top: 20px;
      margin-bottom: 20px;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-align-content: baseline;
          -ms-flex-line-pack: baseline;
              align-content: baseline;
    }
.CheckboxMenuSelectPopup__Wb-cd .y-menu {
      padding-left: 24px;
      padding-right: 45px;
      min-height: auto;
      height: auto;
    }
.CheckboxMenuSelectPopup__Wb-cd .y-menu-item {
      max-height: 40px;
      padding: 0;
      width: 148px;
      margin-right: 8px;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
          -ms-flex-align: start;
              align-items: flex-start;
    }
.CheckboxMenuSelectPopup__Wb-cd .y-menu-item:not(.y-menu-item-disabled):hover {
        color: #5478fc;
        background: #fff;
      }
.CheckboxMenuSelectPopup__Wb-cd .y-menu-item .ant-checkbox-wrapper span.ant-checkbox+* {
          padding: 0;
        }
.CheckboxMenuSelectPopup__Wb-cd .y-menu-item .ant-checkbox-wrapper >span.ant-checkbox {
          float: left;
        }
.CheckboxMenuSelectPopup__Wb-cd .y-menu-item .ant-checkbox-wrapper >span:not(.ant-checkbox) {
          float: left;
          top: 4px;
          left: 28px;
          position: absolute;
  /* Fallback for non-webkit browsers.
  Fallback does not render ellipsis. */
  overflow: hidden;
  max-height: 40px;
  white-space: normal;

  /* Webkit solution for multiline ellipsis */
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* Solution for Opera */
  text-overflow: -o-ellipsis-lastline;
        }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.MassiveMenuSelect__HP-r7 {
  width: 544px;
}
.MassiveMenuSelectPopup__EH-eG {
  width: 544px !important;
}
.MassiveMenuSelectPopup__EH-eG .y-menu {
      display: block !important;
      padding-top: 10px;
    }
.MassiveMenuSelectPopup__EH-eG .y-menu {
      padding-left: 24px;
      padding-right: 14px;
      min-height: auto;
      height: auto;
    }
.MassiveMenuSelectPopup__EH-eG .y-menu-item {
      display: block !important;
      -webkit-transition: none !important;
      transition: none !important;
      float: left;
      max-height: 40px;
      padding: 0;
      width: 148px;
      margin-right: 8px;
  /* Fallback for non-webkit browsers.
  Fallback does not render ellipsis. */
  overflow: hidden;
  max-height: 40px;
  white-space: normal;

  /* Webkit solution for multiline ellipsis */
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* Solution for Opera */
  text-overflow: -o-ellipsis-lastline;
    }
.MassiveMenuSelectPopup__EH-eG .y-menu-item:not(.y-menu-item-disabled):hover {
        color: #5478fc;
        background: #fff;
      }
.MassiveMenuSelectFilter__5cbOr {
  padding: 0 20px;
  margin: 4px 0px 8px 0px;
}
.MassiveMenuSelectFilter__5cbOr [data-role="y-icon"]>svg {
    fill: #000000 !important;
  }
.MassiveMenuSelectFilter__5cbOr .ant-input-group-wrapper {
      border-bottom: solid 2px #e0e4e9;
    }
.MassiveMenuSelectFilter__5cbOr .ant-input-group-wrapper input {
        border: 0;
        padding: 0;
        outline: 0;
        -webkit-box-shadow: none !important;
                box-shadow: none !important;
        text-indent: 8px;
        font-size: 14px;
        font-size: 0.875rem;
        height: 32px;
      }
.MassiveMenuSelectFilter__5cbOr .ant-input-group-wrapper input::-webkit-input-placeholder {
          font-size: 14px !important;
          font-size: 0.875rem !important;
          font-weight: 400;
          color: #9b9b9b;
        }
.MassiveMenuSelectFilter__5cbOr .ant-input-group-wrapper input::-moz-placeholder {
          font-size: 14px !important;
          font-size: 0.875rem !important;
          font-weight: 400;
          color: #9b9b9b;
        }
.MassiveMenuSelectFilter__5cbOr .ant-input-group-wrapper input:-ms-input-placeholder {
          font-size: 14px !important;
          font-size: 0.875rem !important;
          font-weight: 400;
          color: #9b9b9b;
        }
.MassiveMenuSelectFilter__5cbOr .ant-input-group-wrapper input::-ms-input-placeholder {
          font-size: 14px !important;
          font-size: 0.875rem !important;
          font-weight: 400;
          color: #9b9b9b;
        }
.MassiveMenuSelectFilter__5cbOr .ant-input-group-wrapper input::placeholder {
          font-size: 14px !important;
          font-size: 0.875rem !important;
          font-weight: 400;
          color: #9b9b9b;
        }
.MassiveMenuSelectFilter__5cbOr .ant-input-group-addon {
      background: none;
      border: 0;
      padding: 0;
    }
.MassiveMenuSelectFooter__1gEM9 {
  background-color: #F8F8FA;
  padding: 12px 24px 0;
}
.MassiveMenuSelectFooter__1gEM9 :hover {
      background-color: #F8F8FA !important;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.dashboardArea__TZkwF {
  position: relative;
}
.operatingDashboard__QSDXH {
}
.hightlightIcon__ZM8Km {
  position: absolute;
  margin-left: -26px;
  margin-top: -38px;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.DashboardReminder__5SHYS {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 20px;
  line-height: 1.25rem;
  border: dashed 1px #E0E4E9;
  padding: 10px 19px 10px 19px;
  background-color: #fff7f5;
}
.DashboardReminder__5SHYS > p {
  width: 100%;
}
.title__l-l6D {
  display: inline-block;
  border-left: 3px solid #26282a;
  padding-left: 8px;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 500;
  margin: 16px 0;
}

.title__l-l6D,
.title__l-l6D:hover {
  color: #27282b;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-bottom: none;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.noPermission__wh89s {
  padding-top: 0px;
  margin: 70px 0;
  overflow: hidden;
}
.noPermission__wh89s span {
    font-size: 20px;
    font-size: 1.25rem;
  }
.noPermission__wh89s [data-role="y-icon"] {
    margin-bottom: 20px;
  }
.noPermission__wh89s [data-role="y-icon"] >svg {
      width: 120px !important;
      height: 120px !important;
    }
.noPermission__wh89s.updateListingInfo__W2Kq2 p {
      margin: 0 40px;
      text-align: left;
    }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.info__GeOOs {
  margin: 16px;
}
.rankingLoader__N4lWx {
  min-height: 0;
  min-height: initial;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.statCard__ep45S {
  width: 216px;
  text-align: center;
}
/* reset yCard setting */
.statCard__ep45S:nth-child(2n) {
    margin-left: 0px;
  }
.statCard__ep45S:nth-child(n + 3) {
    margin-top: 0px;
  }
/* custom settings */
.statCard__ep45S:not(:nth-child(4n+1)) {
    margin-left: 40px;
  }
.statCard__ep45S:nth-child(n + 5) {
    margin-top: 20px;
  }
.statCardTitle__6rRIQ {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: normal;
  margin-bottom: 0px;
  padding: 0px 0px;
}
.statCardItem__f94Tl {
  font-size: 36px;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 50px;
  line-height: 3.125rem;
  color: #26282a;
}
.statCardItem__f94Tl a,
  .statCardItem__f94Tl a:visited {
    color: #26282a;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.statCard__9PWhN {
  width: 205px;
  text-align: center;
  margin-bottom: 24px;
}
.statCard__9PWhN>div {
    border-radius: 3px !important;
  }
.statCard__9PWhN:not(:nth-child(4n+1)) {
    margin-left: 24px;
  }
.statCardTitle__xFwNL {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: normal;
  margin-bottom: 0px;
  padding: 0px 0px;
  background-color: #ffffff;
}
.statCardItem__qGC10 {
  font-size: 28px;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 40px;
  line-height: 2.5rem;
  color: #26282a;
}
.statCardItem__qGC10 a,
  .statCardItem__qGC10 a:visited {
    color: #26282a;
  }
/* overriding css from y-tooltip */
  .SPTooltip__JkAy9 .ant-tooltip-arrow {
      border-top-color: #ab8cc1;
    }
  .SPTooltip__JkAy9 .ant-tooltip-inner {
      font-size: 13px;
      font-size: 0.8125rem;
      min-height: 0;
      min-height: initial;
      background-color: #ab8cc1;
      -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
    }

.period__P6HKn {
  font-size: 14px;
  font-size: 0.875rem;
  padding: 16px 0px 16px 12px;
  color: #979ba7;
}

  .period__P6HKn.noPaddingTop__GL5yA {
    padding-top: 0;
  }
.sectionBody__hWh9K {
  padding: 0px 40px;
}
.chartNoData__4M3ii {
  width: 100%;
  text-align: center;
  margin: 24px 0 54px;
}

div.rankingTableTip__A39kJ {
  margin-top: 8px;
  font-size: 14px;
  font-size: 0.875rem;
}

.moveToMobileLink__CTfIr {
  position: absolute;
  left: 100px;
  margin-top: -41px;
  font-size: 11pt;
}

.Block__oz0MD {
  padding: 30px 24px;
  margin: 16px 0 20px;
  border: 1px solid transparent;
  color: #26282a;
}

  .Block__oz0MD.noMarginTop__dMn3V {
    margin-top: 0;
  }

  .Block__oz0MD.noMarginBottom__z-qbR {
    margin-bottom: 0;
  }

.border__77f26 {
  border-radius: 4px;
  border-color: #e9ebee;
}

.dashboardTabs__oil9Z .ant-tabs-nav {
      border: none;
      margin-bottom: -1px;
    }

      .dashboardTabs__oil9Z .ant-tabs-nav .ant-tabs-tab {
        padding: 8px 16px 7px;
      }

      .dashboardTabs__oil9Z .ant-tabs-nav .ant-tabs-tab [role="tab"] {
          color: #979ba7;
        }

      .dashboardTabs__oil9Z .ant-tabs-nav .ant-tabs-tab-active [role="tab"], .dashboardTabs__oil9Z .ant-tabs-nav .ant-tabs-tab:hover [role="tab"] {
          color: #5478fc;
        }

      .dashboardTabs__oil9Z .ant-tabs-nav .ant-tabs-ink-bar {
        background-color: #5478fc;
        height: 3px;
        border-radius: 1px;
      }
.Divider__A5Fr- {
  margin: 20px 0 10px;
  border: none;
  height: 1px;
  background-color: #f1f1f5;
}
.block__v9AOy {
  position: relative;
  padding: 10px 20px;
  background-color: #f2f5fe;
  font-size: 14px;
  font-size: 0.875rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 4px;
  margin-bottom: 28px;
  color: #464e56;
}

  .block__v9AOy.inline__gALQw {
    display: inline-block;
    margin: 0 16px 24px 0;
    min-width: 150px;
    text-align: center;
  }

  .block__v9AOy.inline__gALQw.withTitle__RKCqR {
      margin-top: 18px;
    }

  .block__v9AOy .title__FiJ3x {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-size: 0.75rem;
    color: #979ba7;
  }

  .block__v9AOy .itemLabel__vOigV {
    line-height: 20px;
    line-height: 1.25rem;
    vertical-align: text-bottom;
  }

  .block__v9AOy .itemValue__YRlfN {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: bold;
    margin-left: 8px;
  }

  .block__v9AOy .itemValue__YRlfN:not(:last-child):after {
      content: '';
      display: inline-block;
      width: 1px;
      height: 30px;
      background-color: #979ba7;
      margin: 0 16px;
      vertical-align: bottom;
    }


.sortByRadioGroup__RNk94 {
  text-align: right;
  font-size: 14px;
  font-size: 0.875rem;
}

  .sortByRadioGroup__RNk94.margin__odokj {
    margin-bottom: 14px;
  }

  .sortByRadioGroup__RNk94 .divider__J6Xa5 {
    margin: 0 12px;
  }

  .sortByRadioGroup__RNk94 input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  .sortByRadioGroup__RNk94 input[type="radio"]+label {
      cursor: pointer;
      color: #464e56;
    }

  .sortByRadioGroup__RNk94 input[type="radio"]:checked+label {
      color: #5478fc;
    }
.PartNotFound__ArTz0 {
  display: inline-block;
  width: 100%;
  background-color: #f6f8ff;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 16px 0;
}
.NoData__KIqPM {
  width: 100%;
  text-align: center;
}
  .NoData__KIqPM img {
    height: 160px;
    width: auto;
  }
  .NoData__KIqPM p {
    text-align: center;
    margin-top: 8px;
    color: #979ba8;
    font-size: 16px;
    font-size: 1rem;
  }

.row__dJJMx:not(:first-child) {
    margin-top: 24px;
  }
  .row__dJJMx > label {
    margin-left: 0;
    padding-right: 40px;
    min-width: 180px;
    width: 180px;
  }
.DateTimeRange__-xbKN {
  display: inline-block;
  width: 20px;
  height: 1px;
  vertical-align: middle;
  margin: 0 8px;
  border: none;
  background-color: #26282a;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
/**
 * shared styles to be composes
 */
.lineClamp__RNPE0 {
  position: relative;
  display: block;
  font-size: 0.938em;
  line-height: 1.33;
  max-height: 2.66em;
  overflow: hidden;
}
.lineClamp__RNPE0:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 1.33em;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(80%, rgba(255, 255, 255, 1)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}
@supports (-webkit-line-clamp: 2) {
  .lineClamp__RNPE0 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .lineClamp__RNPE0:after {
    display: none;
  }
}
/* allocation */
.fullWidth__RqMin {
  width: 100%;
}
.center__RRBwW {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* make element size relative to content */
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* vertical alignment of contents */
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}
.flexAlignCenter__PZVJK {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* make element size relative to content */
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* vertical alignment of contents */
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}
.pullLeft__vrJ7F {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.pullRight__XWJmy {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.overflowEllipsis__ytp3O {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.typeMark__CaOnl {
  background-color: #fff;
  border-radius: 2px;
  font-size: 0.750em;
  line-height: 1;
  padding: 0.250em 0.333em;
}
.typeMarkBasic__oFzIE,
.typeMarkBargain__WZhDb {
  border: 1px solid #0078ff;
  color: #0078ff;
}
.typeMarkBidding__CTDZN {
  border: 1px solid #fe8c13;
  color: #fe8c13;
}
.typeMarkInactive__gpisO {
  border: 1px solid #9f9f9f;
  color: #9f9f9f;
}
/**
 * button: compose size & type to construct your button
 * https://app.zeplin.io/project/58cf9738292af10e391ceb34/screen/5938c144da4506e406f641f7
 * 1. base button
 * 2. size class
 * 3. type class
 * 4. composed button
 */
/* 1. base */
.button__1NVVP {
  border: 1px solid transparent;
  border-radius: 3px;
  font-weight: 500;
  line-height: 1;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.button__1NVVP:disabled {
  cursor: not-allowed;
}
.button__1NVVP:focus {
  outline: none;
}
.button__1NVVP+.button__1NVVP {
  margin-right: 12px;
}
/* 2. size */
.actionButton__BBCvt {
  font-size: 1.000em;
  padding: 0.875em 0;
  text-align: center;
  width: 100%;
}
.largeButton__jk3xm {
  font-size: 16px;
  font-size: 1rem;
  padding: 0.688em 2.000em 0.688em 2.000em;
}
.mediumButton__kLwyI {
  font-size: 0.875em;
  padding: 0.688em 2.000em 0.688em 2.000em;
}
.smallButton__i7YtY {
  font-size: 0.750em;
  padding: 0.167em 1.000em 0.083em 1.000em;
}
/* 3. type: primary */
.primaryButtonType1__LbVrt {
  background-color: #ffffff;
  color: #3abfba;
}
.primaryButtonType1__LbVrt:hover {
  background-color: #32a7a3;
}
.primaryButtonType2__emYwD {
  background-color: #fcda19;
  color: #000000;
}
.primaryButtonType2__emYwD:hover {
  background-color: #f1c920;
}
.primaryButtonTypeBlue__o7dkD {
  background-color: #5478fc;
  color: #fff;
}
.primaryButtonTypeBlue__o7dkD:hover {
  background-color: #4868DB;
}
.primaryButtonTypePurple__QQlHr {
  background-color: #ab8cc1;
  color: #fff;
}
.primaryButtonTypePurple__QQlHr:hover {
  background-color: #a669df;
}
.primaryButtonTypeBid__pqSTg {
  background-color: #ff8a00;
  color: #fff;
}
.primaryButtonTypeBid__pqSTg:hover {
  background-color: #e17700;
}
.primaryButtonType1__LbVrt:disabled,
.primaryButtonType2__emYwD:disabled {
  background-color: #b9bdc5;
  color: #ffffff;
}
/* 3. type: secondary */
.secondaryButtonType1__wLs9Z {
  border: 1px solid #3abfba;
  background-color: #ffffff;
  color: #3abfba;
}
.secondaryButtonType1__wLs9Z:hover {
  border-color: #32a7a3;
  color: #39aba7;
}
/* OUTLINED button */
.outlinedButtonType__DNLhH {
  border: solid 1px #5478fc;
  border-radius: 3px;
  background-color: #ffffff;
  color: #5478fc;
}
.outlinedButtonType__DNLhH:hover {
  background-color: #ffffff;
  border-color: #4868db;
  color: #4868db;
}
.secondaryButtonType1__wLs9Z:disabled,
.outlinedButtonType__DNLhH:disabled {
  background-color: #b9bdc5;
  color: #ffffff;
}
/* page composes */
/* dashboard workspace fixed height */
.dashboardFixedHeight__xQYIU {
  min-height: 691px;
  height: auto;
}
/* fixed proposal content */
.proposalContent__Pyhml {
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.proposalButtonType__ry82v {
  font-size: 14px;
  font-size: 0.875rem;
  border: solid 1px #e0e4e9;
  border-radius: 2px;
  background-color: #ffffff;
  color: #979ba7;
  padding: 8px 30px;
}
.proposalButtonType__ry82v:hover {
  background-color: rgba(224, 228, 233, 0.5);
}
.proposalButtonType__ry82v:disabled,
.proposalButtonType__ry82v:disabled {
  background-color: #E0E4E9;
  color: #E0E4E9;
}
.dateTimeRangeWrapper__3twiL > div {
  width: 100%;
}
.datetimeRangeArea__PDuSx {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.datetimeRangeArea__PDuSx .datetimeRange__HpQYu {
    vertical-align: top;
    margin: 0 8px;
  }
.datetimeRangeArea__PDuSx .dateTimeDropdown__ACqWm {
    min-width: inherit;
  }
.listingIdRow__EnUAB {
  position: relative;
}
.listingIdRow__EnUAB .listingId__Sp3h- textarea {
      width: 540px;
      height: 86px;
      resize: none;
    }
.searchBtn__0rhPe {
  width: 128px;
}

div.tooltipBlock__BHrY3 {
  display: inline-block !important;
  background-color: rgba(255, 255, 255, .95);
  text-align: left;
  -webkit-box-shadow: 
    0 9px 28px 8px rgba(0, 0, 0, 0.05),
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12);
          box-shadow: 
    0 9px 28px 8px rgba(0, 0, 0, 0.05),
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 7.5px 12px;
  color: #505860;
}

.title__7o-si {
  color: #979ba7;
}
.item__kyCPq {
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 30px;
  line-height: 1.875rem;
}
.Legend__0Vi3O .tag__FKnfj {
    margin-right: 16px;
    font-size: 14px;
    font-size: 0.875rem;
  }
    .Legend__0Vi3O .tag__FKnfj.vertical__u-9S2 {
      margin-bottom: 10px;
    }
.chartBlock__JMoHd {
  padding-top: 37px;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.info__5qfXr {
  float: right;
}
.listing__xqhGP {
  -webkit-flex-basis: 324px;
      -ms-flex-preferred-size: 324px;
          flex-basis: 324px;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}
.col__iQOzx {
  margin-left: 32px;
}
.lastCol__jAubl {
  padding-right: 32px !important;
}
.listingAndNameCol__KDWjS {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: 40px;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.yTable__jZz3X .paginationArrow__f2a1w {
    vertical-align: text-top !important;
  }
.yTable__jZz3X .tableLoader__2H6Ur {
    position: static;
    position: initial;
    min-height: 0;
    min-height: initial;
  }
.yTable__jZz3X .ReactTable {
      border: none;
    }
.yTable__jZz3X .ReactTable .rt-thead,
      .yTable__jZz3X .ReactTable .rt-td {
        -webkit-user-select: auto;
           -moz-user-select: auto;
            -ms-user-select: auto;
                user-select: auto;
      }
.yTable__jZz3X .ReactTable .rt-thead.-header {
        -webkit-box-shadow: none;
                box-shadow: none;
        background-color: #f7f8f9;
        margin-bottom: 4px;
        color: #26282a;
        padding: 7px 0px;
      }
.yTable__jZz3X .ReactTable .rt-thead.-header .rt-tr {
          font-weight: 500;
        }
.yTable__jZz3X .ReactTable .rt-thead.-header .rt-th {
          border-right: none;
        }
.yTable__jZz3X .ReactTable .rt-tbody .rt-tr-group {
          border-bottom: solid 1px #F7F7F7;
        }
.yTable__jZz3X .ReactTable .rt-tbody .rt-tr-group:last-of-type {
            border-bottom: 0;
          }
.yTable__jZz3X .ReactTable .rt-tbody .rt-td {
          color: #26282a;
          text-align: center;
          border-right: none;
          padding: 14px 5px;
        }
.yTable__jZz3X .ReactTable .-pagination {
        margin: 10px 0px;
        -webkit-box-shadow: none;
                box-shadow: none;
        border-top: none;
      }
.yTable__jZz3X .ReactTable .-pagination button {
          width: auto;
          width: initial;
        }
.yTable__jZz3X .ReactTable .-pagination .-previous>button {
          float: right;
        }

.tableSection__N4tNO {
  max-width: 100%;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #f1f1f5;
}
  .tableSection__N4tNO.noBorder__VUwhD {
    border: none;
  }
  .tableSection__N4tNO .table__n4dwR.noDataRow__qAVGc div.ReactTable .rt-tbody {
            height: 240px;
          }
  /* 有 readmore 時資料表格最後一列底邊顏色不同 */
  .tableSection__N4tNO .table__n4dwR.hasReadmore__4OpyA div.ReactTable .rt-tbody .rt-tr-group:last-child {
              border-bottom: 1px solid #e0e4e9;
            }
  .tableSection__N4tNO .table__n4dwR.noStripe__kqtHx div.ReactTable div.rt-tr.-even[role="row"] {
            background-color: transparent;
            background-color: initial;
          }
  .tableSection__N4tNO .table__n4dwR div.ReactTable .rt-table {
          overflow: visible;
        }
  .tableSection__N4tNO .table__n4dwR div.ReactTable .rt-noData {
          padding: 0;
        }
  .tableSection__N4tNO .table__n4dwR div.ReactTable .rt-thead.-header {
          min-height: 46px;
          padding: 0px 0px;
          background-color: #f1f1f5;
          border-bottom: 2px solid #e0e4e9;
        }
  .tableSection__N4tNO .table__n4dwR div.ReactTable .rt-thead.-header .rt-tr .rt-th {
              padding: 2px 5px;
              font-weight: normal;
            }
  .tableSection__N4tNO .table__n4dwR div.ReactTable .rt-thead.-header .rt-tr .rt-th:first-child {
                padding: 2px;
              }
  .tableSection__N4tNO .table__n4dwR div.ReactTable .rt-tr.-even {
          background-color: #f8f8fa
        }
  .tableSection__N4tNO .table__n4dwR div.ReactTable .rt-tbody .rt-tr-group {
            border-bottom: 1px solid #F7F7F7;
          }
  .tableSection__N4tNO .table__n4dwR div.ReactTable .rt-tbody .rt-td {
            color: #26282a;
            text-align: right;
          }
  .tableSection__N4tNO .table__n4dwR div.ReactTable .rt-tbody .rt-td:first-child {
              text-align: left;
            }
  .tableSection__N4tNO + div .ant-pagination {
        margin: 15px;
        text-align: center;
      }
  .tableSection__N4tNO + div .ant-pagination .ant-pagination-item:hover a, .tableSection__N4tNO + div .ant-pagination .ant-pagination-item.ant-pagination-item-active a {
              color: #5478FC;
            }
  .tableSection__N4tNO + div .ant-pagination .ant-pagination-item:hover,
          .tableSection__N4tNO + div .ant-pagination .ant-pagination-item.ant-pagination-item-active {
            border-color: #5478FC;
}

.NoData__bUly9 {
  height: 130px;
}

.NoData__bUly9 img {
    height: 160px;
    width: auto;
  }

.NoData__bUly9 p {
    text-align: center;
    margin-top: 8px;
    color: #979ba8;
    font-size: 16px;
    font-size: 1rem;
  }

.Readmore__GH9dK {
  /* border-top: solid 1px #E0E4E9; */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px;
}

  .Readmore__GH9dK a {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #5478fc;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.termHeader__tQ1ZW {
  overflow: visible;
  margin-left: 28px;
}
.ranking__YGakj {
  border-radius: 3px;
}

.FilledRanking__-Ppjw {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 24px;
  height: 24px;
}

.filled__YAAUY {
  color: #fff;
  background-color: #5478fc;
}

.rankingValue__v27Ic {
  font-weight: 500;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.comparisonTableTitle__SvpZR {
  font-size: 16px;
  font-size: 1rem;
  margin-bottom: 12px;
  font-weight: 600;
}
.periodComparison__w9chK {
  margin-bottom: 24px;
  max-width: 100%;
  width: 100%;
  min-height: 140px;
}
.periodComparison__w9chK .ReactTable {
      border: solid 1px #e0e4e9;
      min-height: 114px;
      height: auto;
    }
.periodComparison__w9chK .ReactTable .rt-noData {
        -webkit-transform: translate(-50%, -10px);
                transform: translate(-50%, -10px);
      }
.periodComparison__w9chK .ReactTable .rt-thead.-header {
        -webkit-box-shadow: none;
                box-shadow: none;
        background-color: #f7f8f9;
        margin-bottom: 4px;
        color: #26282a;
        padding: 7px 0px;
      }
.periodComparison__w9chK .ReactTable .rt-thead.-header .rt-tr {
          font-weight: 400;
        }
.periodComparison__w9chK .ReactTable .rt-thead.-header .rt-tr .rt-th {
            text-align: right;
            border-right: none;
          }
.periodComparison__w9chK .ReactTable .rt-thead.-header .rt-tr .rt-th:first-child {
              padding-left: 36px;
              text-align: left;
              font-size: 16px;
              font-size: 1rem;
            }
.periodComparison__w9chK .ReactTable .rt-thead.-header .rt-th {
          border-right: none;
        }
/* 修正表格最右邊一欄靠右問題 */
.periodComparison__w9chK .ReactTable .rt-tr:last-of-type {
          padding-right: 16px;
        }
.periodComparison__w9chK .ReactTable .rt-tbody .rt-tr-group {
          height: 0px;
          border-bottom: solid 1px #F7F7F7;
        }
.periodComparison__w9chK .ReactTable .rt-tbody .rt-tr-group:last-of-type {
            border-bottom: 0;
          }
.periodComparison__w9chK .ReactTable .rt-tbody .rt-td {
          padding: 7px 5px;
          color: #26282a;
          text-align: right;
          border-right: none;
        }
.periodComparison__w9chK .ReactTable .rt-tbody .rt-td:first-child {
            padding-left: 36px;
            text-align: left;
          }
.cascaderPicker__bbV-1 {
  width: 100%;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.CascaderContainer__hgZMc {
  position: relative;
  z-index: 1002;
}
.CascaderContainer__hgZMc .y-cascader-menu {
      min-width: 282px;
      width: 282px;
      min-height: 280px;
      height: 280px;
    }
.y-cascader {
    font-size: 14px;
    font-size: 0.875rem;
  }
.y-cascader-menu {
    height: 280px;
  }

.activeArrow__b7PEA {
  fill: #5478fc !important;
}
.col__xE3Hm {
  margin: 0 8px;
}
  .col__xE3Hm.start__woIb7 {
    margin: 0 8px 0 16px;
  }
  .col__xE3Hm.end__PBfTB {
    margin: 0 16px 0 8px;
  }

.lastCol__2WCRv {
  padding-right: 20px !important;
}

.resultTable__hiJod div.ReactTable .rt-thead.-header .rt-tr div.rt-th[role="columnheader"],
          .resultTable__hiJod div.ReactTable .rt-thead.-header .rt-tr div.rt-th[role="columnheader"]:first-child {
            padding: 5px 0;
          }

.resultTable__hiJod div.ReactTable .rt-tbody {
        max-height: 340px;
        overflow-y: scroll;
      }

.resultTable__hiJod div.ReactTable .rt-tbody .rt-td[role="gridcell"] {
          padding: 14px 0;
        }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.customizedLegend__LsDUs .categoryLegendItem__IDkmQ {
    text-align: left;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
.customizedLegend__LsDUs .ReactTable div.rt-tbody {
        max-height: 250px;
      }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.saleAnalysis__9QrKj {
  border-radius: 3px;
  border: solid 1px #e0e4e9;
}
.cascaderInputPicker__4n2z6 {
  width: 600px;
}
.chartContainer__SGaqg {
  padding-right: 36px;
  min-height: 50px;
}
.radioButtonGroup__Gp3IR {
  margin-left: 39px;
}
.customLengend__yNS-D {
  top: 36px;
}
.saleAnalysisTitle__NOuA4 {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
}
.optionRow__-pMSf {
  background-color: #f1f1f5;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 57px;
  padding: 9px 36px;
}
.categoryIdSelect__SQCuB {
  width: 500px;
}
.periodText__AX26l {
  padding-left: 0px;
}
.periodText__AX26l:hover{
    color:#5478fc;
  }
.mainRange__uzNNE {
  width: 308px;
  font-size: 16px;
  font-size: 1rem;
}
.tips__Gay2M {
  margin-top: 4px !important;
}
.queryBtn__4pku9 {
  background-color: #5478fc !important;
  width: 128px;
  border-radius: 2px;

}
.queryBtn__4pku9:hover{
    background-color: #4868db !important;
  }
.flexRow__RkwaM {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.chartBlock__TpkUQ {
  position: relative;
  padding: 37px 0 15px;
}

  .chartBlock__TpkUQ .infoTip__npqjT{
    z-index: 1;
    position: absolute;
    top: 0;
    left: 23.8%;
    margin-top: -3px;
  }

.TooltipIcon__XsD0X {
  margin-left: 5px;
}
.summaryBanner__JJi3s {
  margin-bottom: 0;
}

.loader__QrepW {
  background-color: #fff;
  width: 100%;
  z-index: 100000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 1;
  text-align: center;
}

.wrapper__yqQbB {
  width: 100px;
  height: 100px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

.inner__JwQ7C {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  text-indent: -12345px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  z-index: 100001;
}

.text__5HtA7 {
  width: 100px;
  height: 20px;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  letter-spacing: 1px;
  letter-spacing: 0.0625rem;
  color: #000;
}

.hidden__1LOtJ {
  z-index: -1;
  opacity: 0;
  -webkit-transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
  transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
}

.Collapse__j93ip {
  margin-top: 4px;
}

  .Collapse__j93ip.isOpened__305o- {
    margin-top: 0;
  }

  .Collapse__j93ip.isOpened__305o- .actionAndTips__kzzqr {
      margin-top: 4px;
    }

  .Collapse__j93ip .actionAndTips__kzzqr {
    position: relative;
    display: block;
    text-align: right;
  }

  .Collapse__j93ip .actionAndTips__kzzqr input[type="checkbox"] {
      display: none;
    }

  .Collapse__j93ip .actionAndTips__kzzqr label {
      font-size: 14px;
      font-size: 0.875rem;
      cursor: pointer;
      color: #5478fc;
    }

  .Collapse__j93ip .actionAndTips__kzzqr .tips__xlPeB {
      line-height: 12px;
      line-height: 0.75rem;
    }

  .Collapse__j93ip .actionAndTips__kzzqr .action__-FtOV {
      position: relative;
      top: -5px;
    }

  .Collapse__j93ip .content__YAO01 {
    width: 100%;
  }
.ExportButton__0dWzI {
  width: 90px;
  height: 20px;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: normal;
  color: #ffffff;
  padding: 0px;
}

.IconExportButton__zBRVK {
  cursor: pointer;
  font-size: 14px;
  font-size: 0.875rem;
  color: #5478fc;
  font-weight: 500;
}

.disabledIconExportButton__qjls9 {
  cursor: not-allowed;
  color: #979ba7;
}
.searchForm__-stQY [data-role="mainRange"],
  .searchForm__-stQY [data-role="comparisonRange"] {
    width: 350px;
  }
  .searchForm__-stQY div.comparisonRangePickerRow__TgGFk {
    margin-top: 0;
  }
  .searchForm__-stQY div.comparisonRangePickerRow__TgGFk .comparisonRangePicker__sXMVj {
      margin-top: 8px;
    }
  .searchForm__-stQY div.comparisonRangePickerRow__TgGFk .actionClassName__3hani {
      position: relative;
      top: 4px;
    }
  .searchForm__-stQY div.listingIdRow__8kWKH {
    margin-top: 16px;
  }
  .searchForm__-stQY div.listingIdRow__8kWKH .listingId__yISPK {
      width: 220px;
    }
  .searchForm__-stQY .searchBtn__wR3HL {
    width: 128px;
  }
  .searchForm__-stQY .exportButton__0WIea {
    margin: 8px 22px;
  }

.groupBtnsArea__K61wX {
  /* 升圖層否則會被圖表的圖例擋住 */
  z-index: 1;
  text-align: right;
  position: absolute;
  right: 24px;
}
.RadioGroup__eDPQi .ant-radio-button-wrapper {
      border: solid 1px #979ba7;
      background-color: #fff;
      color: #464e56;
    }
      
      .RadioGroup__eDPQi .ant-radio-button-wrapper:hover {
        outline: none;
      }
      
      .RadioGroup__eDPQi .ant-radio-button-wrapper:not(:last-child) {
        border-right: none;
      }
      
      .RadioGroup__eDPQi .ant-radio-button-wrapper:not(:first-child) {
        border-left: none;
      }
      
      .RadioGroup__eDPQi .ant-radio-button-wrapper:not(:first-child):before {
          background-color: #979ba7;
        }
      
      .RadioGroup__eDPQi .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
        border: solid 1px #5478fc;
        background-color: rgba(84, 120, 252, 0.1);
        color: #5478fc;
        -webkit-box-shadow: none;
                box-shadow: none;
      }
      
      .RadioGroup__eDPQi .ant-radio-button-wrapper.ant-radio-button-wrapper-checked + .ant-radio-button-wrapper {
          border-left: none;
        }
      
      .RadioGroup__eDPQi .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:before {
          background-color: transparent;
        }
.Legend__M66Gy {
  position: relative;
  top: 8px;
  left: -10px;
  height: 98px;
}

  .Legend__M66Gy:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
  }

  .Legend__M66Gy .centered__GsnA3 {
    display: inline-block;
    vertical-align: middle;
  }

  .Legend__M66Gy .itemName__798gA {
    display: inline-block;
    min-width: 64px;
    margin-right: 16px;
  }

  .Legend__M66Gy .item__93gm6 {
    display: inline-block;
  }

  .Legend__M66Gy .item__93gm6 .icon__j3G22 {
      display: inline-block;
      width: 12px;
      height: 2px;
      line-height: 14px;
      line-height: 0.875rem;
      margin: 0 8px;
      vertical-align: middle;
    }

  .Legend__M66Gy .item__93gm6.firstItem__z6T2g .icon__j3G22 {
      margin: 0 8px 0 0;
    }
.item__5d-Dj {
  white-space: nowrap;
}

.searchForm__Rn03r [data-role="mainRange"],
  .searchForm__Rn03r [data-role="comparisonRange"] {
    width: 350px;
  }
  .searchForm__Rn03r div.comparisonRangePickerRow__qs1UT {
    margin-top: 0;
  }
  .searchForm__Rn03r div.comparisonRangePickerRow__qs1UT .comparisonRangePicker__xiu8X {
      margin-top: 8px;
    }
  .searchForm__Rn03r div.comparisonRangePickerRow__qs1UT .actionClassName__RlPF2 {
      position: relative;
      top: 4px;
    }
  .searchForm__Rn03r div.listingIdRow__tGHJh {
    margin-top: 16px;
  }
  .searchForm__Rn03r div.listingIdRow__tGHJh .listingId__VFiGA {
      width: 220px;
    }
  .searchForm__Rn03r .searchBtn__Qeju5 {
    width: 128px;
  }
  .searchForm__Rn03r .exportButton__8c5JN {
    margin: 8px 22px;
  }

.itemName__3CaZh {
  color: #464e56;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.SaleStat__KiFtN,
.SearchSaleStat__4YsyW {
  position: relative;
}
.SaleStat__KiFtN .mainRange__LqxeQ, .SearchSaleStat__4YsyW .mainRange__LqxeQ {
    width: 308px;
    font-size: 16px;
    font-size: 1rem;
  }
.SaleStat__KiFtN .tips__GnPNt, .SearchSaleStat__4YsyW .tips__GnPNt {
    margin-top: 4px;
  }
.SaleStat__KiFtN .queryBtn__495dW, .SearchSaleStat__4YsyW .queryBtn__495dW {
    background-color: #5478fc;
    width: 128px;
    border-radius: 2px;
  }
.SaleStat__KiFtN .queryBtn__495dW:hover,.SearchSaleStat__4YsyW .queryBtn__495dW:hover{
      background-color: #4868db;
    }
.SaleStat__KiFtN .exportButton__uRqtY,.SearchSaleStat__4YsyW .exportButton__uRqtY{
    margin: 8px 22px;
  }
.ant-calendar-range-picker-input {
    font-size: 16px;
    font-size: 1rem;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.ant-radio-button-wrapper {
    border: solid 1px #5478fc;
    color: #5478fc;
  }
.ant-radio-button-wrapper:first-child {
    border: solid 1px #5478fc;
  }
.ant-radio-button-wrapper-checked, .ant-radio-button-wrapper-checked:hover, .ant-radio-button-wrapper:first-child.ant-radio-button-wrapper-checked {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #26282a;
    border: solid 1px #e0e4e9;
    background-color: #f8f8fa;
  }
.Bestseller__HhAYZ {
  padding-left: 12px;
}
.info__ZMNa5 {
  float: right;
}
.bestsellerCard__omDVJ {
  margin-top: 12px;
  max-width: 100%;
  width: 100%;
  border-radius: 3px;
  border: solid 1px #e0e4e9;
}
.bestsellerCard__omDVJ .termHeader__-mBTf {
    overflow: visible;
    margin-left: 28px;
  }
.bestsellerCard__omDVJ .ReactTable .rt-table {
        overflow: visible;
      }
.bestsellerCard__omDVJ .ReactTable .rt-noData {
        -webkit-transform: translate(-50%, 10px);
                transform: translate(-50%, 10px);
        padding: 0;
      }
.bestsellerCard__omDVJ .ReactTable .rt-thead.-header {
        min-height: 46px;
        padding: 0px 0px;
      }
.bestsellerCard__omDVJ .ReactTable .rt-thead.-header .rt-tr .rt-th {
            padding: 2px 5px;
            font-weight: normal;
          }
.bestsellerCard__omDVJ .ReactTable .rt-thead.-header .rt-tr .rt-th:first-child {
              padding: 2px;
            }
.bestsellerCard__omDVJ .ReactTable .rt-tr.-even {
        background-color: #f8f8fa
      }
.bestsellerCard__omDVJ .ReactTable .rt-tbody .rt-tr-group {
          border-bottom: solid 1px #F7F7F7;
        }
.bestsellerCard__omDVJ .ReactTable .rt-tbody .rt-td {
          color: #26282a;
          text-align: right;
        }
.bestsellerCard__omDVJ .ReactTable .rt-tbody .rt-td:first-child {
            text-align: left;
          }
.listingId__bXiRk {
  width: 100%;
  text-align: left;
}
.listingName__xFwyO {
  -webkit-flex-basis: 324px;
      -ms-flex-preferred-size: 324px;
          flex-basis: 324px;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}
.iconExplanationSec__Jl9Co {
  margin-top: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.tableFooter__-dNrG {
  border-top: solid 1px #E0E4E9;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px;
}
.tableFooter__-dNrG a {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #5478fc;
  }
.optionsRow__RY49q {
  margin-top: 12px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.resultTotal__46bVg {
  display: block;
  color: #979ba7;
}
.sortTab__kPKlO{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.bestsellerTitle__mbH8g {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 500;
  color: #26282a;
}
.period__FrxOs {
  letter-spacing: 1px;
  letter-spacing: 0.0625rem;
  font-size: 14px;
  font-size: 0.875rem;
  color: #979ba7;
}
.col__fdBIw {
  margin-left: 32px;
}
.lastCol__iVBlo {
  margin-right: 40px;
}
.listingAndNameCol__92xF0 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: 40px;
}
.checkbox__gnkZw label {
    margin: 0 !important;
  }
.checkbox__gnkZw span {
    padding-right: 0;
  }
.filterBlock__NoKfJ {
  margin: 10px 0 10px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}
.TrendIcon__5gUIC {
  display: inline-block;
  margin: 5px;
}

.trendIconExplanation__bKJql {
  color: #979ba7;
}
.BestsellerPagination__PGRni {
  width: calc(100% - 30px);
  text-align: center;
  margin: 15px;
}

  .BestsellerPagination__PGRni .ant-pagination {
      margin: 15px;
      text-align: center;
    }

  .BestsellerPagination__PGRni .ant-pagination .ant-pagination-item:hover a, .BestsellerPagination__PGRni .ant-pagination .ant-pagination-item.ant-pagination-item-active a {
            color: #5478FC;
          }

  .BestsellerPagination__PGRni .ant-pagination .ant-pagination-item:hover,
        .BestsellerPagination__PGRni .ant-pagination .ant-pagination-item.ant-pagination-item-active {
          border-color: #5478FC;
}
.searchForm__xhJme .rangePicker__MSRQO {
    width: 308px;
  }
  .searchForm__xhJme .tips__cDzN3 {
    margin-top: 4px;
  }
  .searchForm__xhJme .searchBtn__-gxw5 {
    width: 128px;
  }

.StatsContainer__2-MOb .ant-tabs-tab + .ant-tabs-tab {
      margin: 0;
    }

.NewFeaturePromo__r0NRS {
  color: blue;
  font-weight: bold;
  position: absolute;
  right: 400px;
}

.TableAction__2jiiL {
  margin: 2px 0 12px;
  position: relative;
}
  .TableAction__2jiiL .leftContent__t7UjJ {
    position: absolute;
    left: 0;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.listing__CSklN {
  -webkit-flex-basis: 324px;
      -ms-flex-preferred-size: 324px;
          flex-basis: 324px;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}
.listingAndNameCol__rUB2o {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: 40px;
}
.specInfo__Dqgpf{
  color: purple !important;
}
.lastCol__gh0Oe {
  padding-right: 32px !important;
}
.eCouponIcon__ZkB7o{
  padding-left: 5px;
  cursor: pointer;
}
.modal__ndTp- .y-modal-body {
    padding: 0;
  }

  .modal__ndTp- .y-modal-footer {
    padding: 16px 24px;
  }

  .modal__ndTp- [data-role='modal-body']:nth-child(2n) label {
        margin-top: 4px;
      }

  .modal__ndTp- .resetFormMargin__eGwIL {
    margin-top: 20px !important;
  }

  .modal__ndTp- .defaultSpacing__Wr579 {
    padding: 0 5px;
  }

  .modal__ndTp- [data-role='help-block'] {
    position: absolute;
    width: 150px;
  }

  .modal__ndTp- .listingInfo__Njk-K {
    background-color: #F2F5FE;
    padding: 5px 0;
  }

  .modal__ndTp- .listingInfo__Njk-K .img__uyOa- {
      width: 100%;
      height: 100px;
      padding-left: 48px;
    }

  .modal__ndTp- .listingInfo__Njk-K .name__k5nZ- {
      width: 100%;
      font-size: 14px;
      font-size: 0.875rem;
    }

  .modal__ndTp- .listingInfo__Njk-K .name__k5nZ- .paragraph__OSDxe {
        margin-bottom: 4px;
      }

  .modal__ndTp- .listingInfo__Njk-K .halfWidth__j53Un {
      width: 50%;
      font-size: 14px;
      font-size: 0.875rem;
    }

  .modal__ndTp- .listingInfo__Njk-K .cost__YQsge {
      color: red;
    }

  .modal__ndTp- .listingInfo__Njk-K .flag__QmTxT {
      border: 1px solid #f26591;
      color: #f26591;
      width: 40px;
      font-size: 12px;
      font-size: 0.75rem;
      text-align: center;
      margin-top: 10px;
    }

  .modal__ndTp- .listingInfo__Njk-K .promotions__oVxDY {
      margin: 10px 0 0 10px;
    }

  .modal__ndTp- .listingInfo__Njk-K .promotions__oVxDY .title__zJIJ- {
        font-size: 14px;
        font-size: 0.875rem;
        font-weight: bold;
      }

  .modal__ndTp- .listingInfo__Njk-K .promotions__oVxDY .promotionEndTs__bFm8v {
        font-size: 12px;
        font-size: 0.75rem;
        color: #979BA7;
      }

  .modal__ndTp- .titleField__Hy93r input[type=text] {
      width: 300px;
      height: 30px;
    }

  .modal__ndTp- .durationBlock__mRx3v [data-role='help-block'] {
      position: absolute;
      width: 300px;
    }

  .modal__ndTp- .discountCountField__eGVne input[type=text], .modal__ndTp- .durationField__e-VoY input[type=text] {
      width: 100px;
      height: 30px;
    }

  .modal__ndTp- .discountRuleField__EUls->div {
    line-height: 47px;
    line-height: 2.9375rem;
  }

  .modal__ndTp- .discountBlock__yxfKD {
    margin-bottom: 20px;
  }

  .modal__ndTp- .discountThresholdField__M2OQT input[type=text], .modal__ndTp- .discountAmountField__f5uX5 input[type=text] {
      width: 100px;
      height: 30px;
    }

  .modal__ndTp- .dollarTotal__vTRoG {
    font-size: 14px;
    font-size: 0.875rem;
    margin-top: 5px;
    color: red;
  }

  .modal__ndTp- .isAllowedActivityText__onESL {
    margin: 5px 0 10px 0;
    padding: 5px;
    background: #F1F1F5;
  }

  .modal__ndTp- .footerBlock__PAHZn {
    height: 100%;

  }

  .modal__ndTp- .footerBlock__PAHZn .footerTextBlock__Cqj2V {
      margin-top: 10px;
    }

  .modal__ndTp- .footerBlock__PAHZn .footerTextBlock__Cqj2V .footerText__QejcZ {
        color: #f26591;
      }

  .modal__ndTp- .content__6SabM {
    text-align: center;
  }

  .modal__ndTp- .content__6SabM .customImage__buPIM {
      width: 300px;
      height: 200px;
      margin: 16px 0 10px 0;
    }

  .modal__ndTp- .content__6SabM .normalImage__JXHhT {
      width: 300px;
      height: 200px;
      margin: 28px 0;
    }

  .modal__ndTp- .content__6SabM .titleText__oI40e {
      font-size: 20px;
      font-size: 1.25rem;
    }

  .modal__ndTp- .content__6SabM .paddingBottomSpace__KMpJd {
      margin-bottom: 15px;
    }

  .modal__ndTp- .content__6SabM .boldText__A-eV-{
      font-weight: bold;
    }

  .modal__ndTp- .content__6SabM .link__Tx5T-{
      margin-bottom: 28px;
    }
.SearchKeywords__Whd3r .tableBlock__SDzu- {
    padding: 0;
  }

.modal__XRTas .ant-modal-title {
      color: #999aa9;
      font-size: 16px;
      font-size: 1rem;
      font-weight: 400;
    }
    .modal__XRTas .ant-modal-content {
      border-radius: 6px;
    }
.spinnerArea__BKysh {
  width: 100%;
  text-align: center;
}
.LoadingSpinner__-AY5q {
  display: inline-block;
  position: relative;
  -webkit-transform: translateY(25%);
          transform: translateY(25%);
}
.LoadingSpinner__-AY5q.small__OIX0D {
    height: 25px;
  }
.LoadingSpinner__-AY5q.medium__y-8qy {
    height: 50px;
  }
.LoadingSpinner__-AY5q.large__pluCL {
    height: 100px;
  }
.LoadingSpinner__-AY5q .spinnerItem__GmIc8 {
    -webkit-animation: spinner__rTL-f 1.2s linear infinite;
            animation: spinner__rTL-f 1.2s linear infinite;
  }
.LoadingSpinner__-AY5q .spinnerItem__GmIc8:after {
      content: " ";
      display: block;
      position: absolute;
      border-radius: 20%;
      background: #979BA7;
    }
.LoadingSpinner__-AY5q .spinnerItem__GmIc8.small__OIX0D {
      -webkit-transform-origin: 10px 10px;
              transform-origin: 10px 10px;
    }
.LoadingSpinner__-AY5q .spinnerItem__GmIc8.small__OIX0D:after {
        top: 0.75px;
        left: 9.25px;
        width: 1.5px;
        height: 4.5px;
      }
.LoadingSpinner__-AY5q .spinnerItem__GmIc8.medium__y-8qy {
      -webkit-transform-origin: 20px 20px;
              transform-origin: 20px 20px;
    }
.LoadingSpinner__-AY5q .spinnerItem__GmIc8.medium__y-8qy:after {
        top: 1.5px;
        left: 18.5px;
        width: 3px;
        height: 9px;
      }
.LoadingSpinner__-AY5q .spinnerItem__GmIc8.large__pluCL {
      -webkit-transform-origin: 40px 40px;
              transform-origin: 40px 40px;
    }
.LoadingSpinner__-AY5q .spinnerItem__GmIc8.large__pluCL:after {
        top: 3px;
        left: 37px;
        width: 6px;
        height: 18px;
      }
.LoadingSpinner__-AY5q div:nth-child(1) {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
  }
.LoadingSpinner__-AY5q div:nth-child(2) {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
  }
.LoadingSpinner__-AY5q div:nth-child(3) {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
  }
.LoadingSpinner__-AY5q div:nth-child(4) {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
  }
.LoadingSpinner__-AY5q div:nth-child(5) {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
  }
.LoadingSpinner__-AY5q div:nth-child(6) {
    -webkit-transform: rotate(150deg);
            transform: rotate(150deg);
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
  }
.LoadingSpinner__-AY5q div:nth-child(7) {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
  }
.LoadingSpinner__-AY5q div:nth-child(8) {
    -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
  }
.LoadingSpinner__-AY5q div:nth-child(9) {
    -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
  }
.LoadingSpinner__-AY5q div:nth-child(10) {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
  }
.LoadingSpinner__-AY5q div:nth-child(11) {
    -webkit-transform: rotate(300deg);
            transform: rotate(300deg);
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
  }
.LoadingSpinner__-AY5q div:nth-child(12) {
    -webkit-transform: rotate(330deg);
            transform: rotate(330deg);
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }
@-webkit-keyframes spinner__rTL-f {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
@keyframes spinner__rTL-f {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
.KeywordsListingDialog__Eon6W .ant-modal-content {
      width: 680px;
    }
  .KeywordsListingDialog__Eon6W .infiniteScrollArea__L20pM {
    overflow-y: scroll;
    max-height: 500px;
    position: relative;
    left: -24px;
    width: 680px;
    padding: 0 24px;
  }
  .KeywordsListingDialog__Eon6W .table__99E0C div.ReactTable .rt-thead.-header {
          margin-bottom: 0;
        }
  .KeywordsListingDialog__Eon6W .table__99E0C div.ReactTable .rt-thead.-header .rt-tr div.rt-th[role="columnheader"],
            .KeywordsListingDialog__Eon6W .table__99E0C div.ReactTable .rt-thead.-header .rt-tr div.rt-th[role="columnheader"]:first-child {
              padding: 5px 0;
            }
  .KeywordsListingDialog__Eon6W .table__99E0C div.ReactTable .rt-tbody div.rt-tr-group[role="rowgroup"] {
            border-bottom: 1px solid #e0e4e9;
          }
  .KeywordsListingDialog__Eon6W .table__99E0C div.ReactTable .rt-tbody div.rt-td[role="gridcell"] {
            padding: 8px 5px;
          }
  .KeywordsListingDialog__Eon6W .table__99E0C .col__DMdjp {
      margin: 0 15px;
    }
  .KeywordsListingDialog__Eon6W .table__99E0C .col__DMdjp.start__IJ9WC {
        margin: 0 15px 0 30px;
      }
  .KeywordsListingDialog__Eon6W .table__99E0C .col__DMdjp.end__5PKrA {
        margin: 0 30px 0 15px;
      }
  .KeywordsListingDialog__Eon6W .table__99E0C .col__DMdjp.flexWrap__fnZ5l {
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
      }
  .KeywordsListingDialog__Eon6W .table__99E0C .col__DMdjp .listingId__lSIn0 {
        margin-bottom: 4px;
      }
  .KeywordsListingDialog__Eon6W .table__99E0C .col__DMdjp .listingId__lSIn0,
      .KeywordsListingDialog__Eon6W .table__99E0C .col__DMdjp .listingName__EfIZ2 {
        width: 100%;
      }
  .KeywordsListingDialog__Eon6W .table__99E0C .col__DMdjp .listingName__EfIZ2 {
        white-space: pre-wrap;
      }
.tips__okU21 {
  line-height: 21px;
  line-height: 1.3125rem;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.keyword__64zok {
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}
.lastCol__qq1YO {
  padding-right: 32px !important;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.information__t7SJJ {
  font-size: 14px;
  font-size: 0.875rem;
  color: #54546f;
}

.barChart__J1DQL {
  margin: 11px;
  border: 1px solid #e5e5e5;
  padding: 11px;
  width: 50%;
  float: left;
}
  .barChart__J1DQL p {
    text-align: center;
    font-weight: bolder;
    margin-top: 14px;
  }

.chartBlock__qrAw8 {
  position: relative;
  padding: 30px 0 15px;
}

.cardList__-rjcG {
  margin: 11px;
  -webkit-column-gap: 11px;
     -moz-column-gap: 11px;
          column-gap: 11px;
}

.counties__3xZwE:hover {
  fill: #ddd;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.county-borders__TXeV9 {
  fill: none;
  stroke: #fff;
  stroke-width: 0.5px;
}
.countyLabel__JMBG2 {
  font-size: 10px;
  font-size: 0.625rem;
  font-weight: bold;
  fill: #000;
  text-shadow: 0 0 2px #fff;
  z-index: 9;
}
.floatLeft__8vPV7 {
  float: left
}

.searchForm__q3vQF .rangePicker__lvGK2 {
    width: 308px;
  }
  .searchForm__q3vQF .tips__IdQJ2 {
    margin-top: 4px;
  }
  .searchForm__q3vQF .searchBtn__-pUH- {
    width: 128px;
  }
.chartBlock__kT8oZ {
  padding-top: 55px;
}
.memberAnalysis__5AvgV {
  font-size: 16px;
  font-size: 1rem;
}

  .memberAnalysis__5AvgV .hightlightIcon__xL853 {
    margin-top: -8px;
    margin-left: -8px
  }

  .memberAnalysis__5AvgV .ant-tabs-content {
      padding: 10px 0;
    }

  .memberAnalysis__5AvgV .ant-tabs-tab + .ant-tabs-tab {
      margin: 0;
    }

.barChart__4B-ZP {
  width: 50%;
  float: right;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.brandAnalysis__fv7bh .panel__diACb {
    font-size: 16px;
    font-size: 1rem;
  }
.brandAnalysis__fv7bh .panel__diACb .ant-tabs-card>.ant-tabs-content {
        margin-top: -16px;
      }
.brandAnalysis__fv7bh .panel__diACb .ant-tabs-card>.ant-tabs-nav {
        border-color: #f1f1f5;
      }
.brandAnalysis__fv7bh .panel__diACb .ant-tabs-card>.ant-tabs-nav .ant-tabs-tab {
        border-color: transparent;
        background: transparent;
        color: #5478fc;
      }
.brandAnalysis__fv7bh .panel__diACb .ant-tabs-card>.ant-tabs-nav .ant-tabs-tab-active {
        border-color: #f1f1f5;
        background: #f1f1f5;
      }
.brandAnalysis__fv7bh .panel__diACb .ant-tabs-card>.ant-tabs-nav .ant-tabs-tab-active [role="tab"] {
          color: #26282a;
        }
.brandAnalysis__fv7bh .panel__diACb .ant-tabs-nav-container [role="tab"], .brandAnalysis__fv7bh .panel__diACb .ant-tabs [role="tab"] {
          font-size: 1rem;
        }
.brandAnalysis__fv7bh .chart__SugjK {
    max-width: 100%;
    width: 100%;
  }
.brandAnalysis__fv7bh .chart__SugjK .title__vT0MR {
      font-size: 16px;
      font-size: 1rem;
      padding-left: 36px;
    }
.brandIdSelect__lILKl {
  width: 225px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;

  /* remove border color after selected */
}
/* arrow up when opening */
.brandIdSelect__lILKl.is-open .Select-control .Select-arrow-zone .Select-arrow {
        border-color: transparent transparent #ab8cc1;
        border-width: 0 7px 10px;
      }
/*
  &:global(.is-focused:not(.is-open)) {
   :global{
     .Select-control {
        border-color: #e0e4e9;
        box-shadow: none;
      }
    }
  }*/
.brandIdSelect__lILKl .Select-control {
      height: 26px;
      font-weight: normal;
      line-height: 26px;
      line-height: 1.625rem;
      border-radius: 2px;
      border: solid 1px #e0e4e9;
    }
.brandIdSelect__lILKl .Select-control .Select-input {
        height: 26px;
      }
.brandIdSelect__lILKl .Select-control .Select-value,
      .brandIdSelect__lILKl .Select-control .Select-placeholder {
        line-height: inherit;
        padding-left: 14px;
        color: #54546f;
      }
.brandIdSelect__lILKl .Select-control .Select-value-label {
        color: #54546f !important;
      }
/* arrow down */
.brandIdSelect__lILKl .Select-control .Select-arrow-zone {
        padding-right: 0px;
        width: 28px;
        background-color: #e0e4e9;
      }
.brandIdSelect__lILKl .Select-control .Select-arrow-zone .Select-arrow {
          border-color: #ab8cc1 transparent transparent;
          border-width: 10px 7px 1px;
        }
.brandIdSelect__lILKl .Select-option {
      font-weight: normal;
      color: #54546f;
      padding: 0px 8px;
    }
.radioButtonGroup__M5qe3 {
  margin-left: 75px;
}
.customLengend__L1zW6 {
  top: 36px;
}
.noData__jUiYL {
  padding-top: 0px;
}
.noData__jUiYL span {
    font-size: 20px;
    font-size: 1.25rem;
  }
.noData__jUiYL [data-role="y-icon"] {
    display: block;
    margin: 0px auto;
    margin-bottom: 10px;
  }
.noData__jUiYL [data-role="y-icon"] >svg {
      width: 120px !important;
      height: 120px !important;
    }
.allBrandSection__OESoe {
  border-radius: 3px;
  border: solid 1px #e0e4e9;
}
.optionRow__f4Dby {
  padding-left: 36px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 57px;
  background-color: #f1f1f5;
}
.brandSelectSection__UOzg8 {
  padding-left: 12px;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.brandChart__2WizH {
  padding: 16px 12px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
}
.divLeft__QncBm {
  display: inline-block;
  width: 470px;
  margin-right: 24px;
}
.divRight__tonb5 {
  display: inline-block;
  width: calc(100% - 470px);
}
.brandStatCard__g8rc2 {
  text-align: center;
  border-radius: 3px;
  border: solid 1px #e0e4e9;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

}
.brandStatCard__g8rc2:not(:nth-child(2n+1)) {
    /* margin-left: 24px; */
  }
.brandStatCardTitle__Zz5Ef {
  background-color: #ffffff;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: normal;
  margin-bottom: 0px;
}
.brandStatCardItem__mmpDd {
  font-size: 36px;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 50px;
  line-height: 3.125rem;
  color: #26282a;
  display: inline-block;
  max-width: 110%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chartCard__neVfx {
  width: 100%;
  max-width: 100%;
  border-radius: 3px;
  border: solid 1px #e0e4e9;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.chartCard__neVfx .chartCardTitle__yRPX2 {
    background-color: #ffffff;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-size: 0.875rem;
  }
.legend__sk0XV {
  text-align: center;
  margin-bottom: 18px;
}
.legend__sk0XV .legendItem__quqDA {
    text-align: left;
    margin-right: 8px;
  }
.legend__sk0XV .legendItem__quqDA .legendItemText__rjaY4 {
      font-size: 14px;
      font-size: 0.875rem;
      font-weight: 500;
      color: #26282a;
    }
.chartContainer__-YTcd {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 430px;
  margin: 20px 0px;
}
.axisLabel__jlSw9 {
  font-size: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}
.labelText__w7Uji {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 500;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.labelText__Cl7f6 {
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 500;
}
.customizedLegend__IIKdw .categoryLegendItem__Llx7o {
    text-align: left;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
.customizedLegend__IIKdw div.ReactTable div.rt-tbody {
        max-height: 250px;
      }
.searchForm__LJiGM .rangePicker__Ok47c {
      width: 308px;
    }
    .searchForm__LJiGM .tips__181vm {
      margin-top: 4px;
    }
    .searchForm__LJiGM .searchBtn__Q7eGR {
      width: 128px;
    }


.searchForm__HCU47 .rangePicker__ni7o0 {
    width: 308px;
  }
  .searchForm__HCU47 .tips__EB7pF {
    margin-top: 4px;
  }
  .searchForm__HCU47 div.listingIdRow__1Ta1D {
    margin-top: 16px;
  }
  .searchForm__HCU47 div.listingIdRow__1Ta1D .listingIds__vMFT8 {
      width: 220px;
    }
  .searchForm__HCU47 .searchBtn__jB07O {
    width: 128px;
  }
.chartBlock__U6pRT {
  padding-top: 37px;
}
.tips__p1XVj {
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
}
.ReturnDetailDialog__W6rZr .ant-modal-content {
      width: 680px;
    }
  .ReturnDetailDialog__W6rZr .reason__qgJpd {
    color: #27282a;
    font-size: 16px;
    font-size: 1rem;
    margin-bottom: 16px;
  }
  .ReturnDetailDialog__W6rZr .infiniteScrollArea__xZ64N {
    overflow-y: scroll;
    max-height: 500px;
    position: relative;
    left: -24px;
    width: 680px;
    padding: 0 24px;
  }
  .ReturnDetailDialog__W6rZr .table__qSBEs div.ReactTable .rt-thead.-header {
          margin-bottom: 0;
        }
  .ReturnDetailDialog__W6rZr .table__qSBEs div.ReactTable .rt-thead.-header .rt-tr div.rt-th[role="columnheader"],
            .ReturnDetailDialog__W6rZr .table__qSBEs div.ReactTable .rt-thead.-header .rt-tr div.rt-th[role="columnheader"]:first-child {
              padding: 5px 0;
            }
  .ReturnDetailDialog__W6rZr .table__qSBEs div.ReactTable .rt-tbody div.rt-tr-group[role="rowgroup"] {
            border-bottom: 1px solid #e0e4e9;
          }
  .ReturnDetailDialog__W6rZr .table__qSBEs div.ReactTable .rt-tbody div.rt-td[role="gridcell"] {
            padding: 8px 5px;
          }
  .ReturnDetailDialog__W6rZr .table__qSBEs .col__RPcTV {
      margin: 0 15px;
    }
  .ReturnDetailDialog__W6rZr .table__qSBEs .col__RPcTV.start__-yw2r {
        margin: 0 15px 0 30px;
      }
  .ReturnDetailDialog__W6rZr .table__qSBEs .col__RPcTV.end__tuREX {
        margin: 0 30px 0 15px;
      }
  .ReturnDetailDialog__W6rZr .table__qSBEs .col__RPcTV.flexWrap__FisL0 {
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
      }
  .ReturnDetailDialog__W6rZr .table__qSBEs .col__RPcTV .listingId__wjEdG {
        margin-bottom: 4px;
      }
  .ReturnDetailDialog__W6rZr .table__qSBEs .col__RPcTV .listingId__wjEdG,
      .ReturnDetailDialog__W6rZr .table__qSBEs .col__RPcTV .listingName__fFS0F {
        width: 100%;
      }
  .ReturnDetailDialog__W6rZr .table__qSBEs .col__RPcTV .listingName__fFS0F {
        white-space: pre-wrap;
      }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.warehouseOverview__W1jU4 [data-role='y-card'] a {
  display: inline;
  font-weight: normal;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;

  -webkit-transition: color .2s, border-bottom .2s;

  transition: color .2s, border-bottom .2s;

  color: #5478fc;
      border-bottom: 1px solid #5478fc;
  }
.warehouseOverview__W1jU4 [data-role='y-card'] a[disabled] {
    pointer-events: none;
    color: #979ba7;
  }
.warehouseOverview__W1jU4 [data-role='y-card'] a.active__2U8ai, .warehouseOverview__W1jU4 [data-role='y-card'] a:hover {
    color: #4285F4;
      border-bottom: 1px solid #4285F4
  }
.warehouseOverview__W1jU4 [data-role='y-card'] a {
    color: #5478fc;
    font-weight: 600;
}
.info__ErTqy {
  margin: 16px;
}
.loader__HiUB- {
  min-height: 0;
  min-height: initial;
}
.info__2voaV {
  margin-bottom: 10px;
}

.card__I-u3k {
  padding: 5px;
  height: 340px;
}

.card__I-u3k img {
    width: 95px;
    height: 95px;
  }

.card__I-u3k .spacing__UUlAU {
    margin-top: 10px;
  }

.card__I-u3k .btn__4EQTA {
    width: 90px;
    height: 35px;
    font-size: 14px;
    font-size: 0.875rem;
  }

.card__I-u3k .spacing__UUlAU {
    margin-top: 10px;
  }

.modal__zk8bB .y-modal-header {
    border-bottom: none !important;
  }

.modal__zk8bB .y-modal-title {
    font-size: 20px !important;
    font-size: 1.25rem !important;
  }

.modal__zk8bB .y-modal-footer {
    border-top: none !important;
  }

.modal__zk8bB .y-modal-footer button {
      width: 130px;
    }
.dropdown__XJc8E {
  position: relative;
}

.dropdown-edge {
  right: 0;
}

.show__4yUiE > .dropdownContent__DzrTA,
.show__4yUiE > .y-dropdown-content__AqmN6 {
  display: block;
}

.show__4yUiE > a {
  outline: 0;
}

.dropdownContent__DzrTA {
  position: absolute;
  top: 100%;
  /* left: 0; */
  z-index: 2;
  /* z-index: 1000; */
  display: none;
  float: left;
  min-width: 154px;
  padding: 0 0;
  /* margin: 0.125rem 0 0; */
  font-size: 14px;
  font-size: 0.875rem;
  color: #263238;
  text-align: left;
  list-style: none;
  background-color: #fff;
  /* background-clip: padding-box; */
  border: 1px solid #cfd8dc;
}

.dropdownContentLarge__CDbSW {
  width: 250px;
}

.dropdown-toggle__JPTG5::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.3em;
  vertical-align: middle;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle__JPTG5:focus {
  outline: 0;
}

.dropup__gbbs3 .dropdown-toggle__JPTG5::after {
  border-top: 0;
  border-bottom: 0.3em solid;
}

.dropdown-divider__HNONr {
  height: 1px;
  margin: 0.5rem 0;
  overflow: hidden;
  background-color: #eceff1;
}

.dropdown-item__l7KmF {
  display: block;
  width: 100%;
  padding: 3px 1.5rem;
  clear: both;
  font-weight: normal;
  color: #263238;
  text-align: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
}

.dropdown-item__l7KmF:focus,
.dropdown-item__l7KmF:hover {
  color: #1c2429;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: #eceff1;
}

.dropdown-item__l7KmF.active__yc2cz,
.dropdown-item__l7KmF:active {
  color: #fff;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: #20a8d8;
}

.dropdown-item__l7KmF.disabled__EFKxE,
.dropdown-item__l7KmF:disabled {
  color: #b0bec5;
  cursor: not-allowed;
  background-color: transparent;
}

.dropdown-menu-right__XyOH4 {
  right: 0;
  left: auto;
}

.dropdown-menu-left__mfgXn {
  right: auto;
  left: 0;
}

.dropdown-header__g-hSK {
  display: block;
  padding: 0 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #b0bec5;
  white-space: nowrap;
}

.dropdown-backdrop__i161e {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
}

.dropdown-item__l7KmF {
  position: relative;
  padding: 10px 20px;
  border-bottom: 1px solid #cfd8dc;
}

.dropdown-item__l7KmF:last-of-type {
  border-bottom: 0;
}

.dropdown-item__l7KmF i {
  display: inline-block;
  width: 20px;
  margin-right: 10px;
  margin-left: -10px;
  color: #cfd8dc;
  text-align: center;
}

.dropdown-item__l7KmF .badge__5ofpc {
  position: absolute;
  right: 10px;
  margin-top: 2px;
}

.dropdown-header__g-hSK {
  padding: 8px 20px;
  background: #eceff1;
  border-bottom: 1px solid #cfd8dc;
}

.dropdown-header__g-hSK .btn__vvDjI {
  margin-top: -7px;
  color: #b0bec5;
}

.dropdown-header__g-hSK .btn__vvDjI:hover {
  color: #263238;
}

.dropdown-header__g-hSK .btn__vvDjI.pull-right__qrEVI {
  margin-right: -20px;
}


/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.nav__Xpvn1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  min-height: 62px;
  max-height: 62px;
  height: auto;
  width: 100%;
  background-color: #EAECF0;
}
.navLink__iFs2E {
  display: block;
  text-align: center;
  padding: 20px;
  letter-spacing: 0.5px;
  letter-spacing: 0.03125rem;
  color: #979ba7;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.navLink__iFs2E:focus,
.navLink__iFs2E:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.navLink__iFs2E:hover {
  cursor: pointer;
}
.navLink__iFs2E.disabled {
  color: #b0bec5;
  cursor: not-allowed;
}
.navTabs__DFS9M {
}
.navTabs__DFS9M .navItem__Sh2-N {
}
.navTabs__DFS9M .navLink__iFs2E {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 500;
  position: relative;
  border: 2px solid transparent;
}
.navTabs__DFS9M .navLink__iFs2E:focus {
}
.navTabs__DFS9M .navLink__iFs2E.active {
  color: #000000;
  background-color: #fff;
  cursor: default;
  /* border-color: none; */
}
.navTabs__DFS9M .navLink__iFs2E.active:hover {
  background-color: #fff;
  /* border-color: transparent; */
  /* border-color: none; */
}
.navTabs__DFS9M .navLink__iFs2E.disabled {
  color: #b0bec5;
  background-color: transparent;
}
.navPills__kHVSB .navLink__iFs2E.active,
.navPills__kHVSB .navItem__Sh2-N.show .navLink__iFs2E {
  color: #fff;
  cursor: default;
  background-color: #20a8d8;
}
.navFill__K7waY .navItem__Sh2-N {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: center;
}
.navJustified__pYyyW .navItem__Sh2-N {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  text-align: center;
}
/* control dropdown under top navigation */
.decoration__IchUm {
  height: 0px;
  width: calc(100% - 4px);
  border-top: 4px solid #fff;
  display: none;
  top: 0px;
  position: relative;
  z-index: 8;
  left: 2px;
  background: white;
  overflow: hidden;
  white-space: nowrap;
}
.navContent__Ef2wc {
  border: 2px solid #d8d8d8;
  padding-top: 12px;
  padding-bottom: 6px;
}
.section-column-2 {
  min-width: 340px;
}
.navContent__Ef2wc .navSection__VOzHt {
  font-size: 13px;
  font-size: 0.8125rem;
  min-width: 154px;
}
.navContent__Ef2wc .navSection__VOzHt a {
  display: block;
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #000000;
  padding: 6px 12px 6px 12px;
}
.navContent__Ef2wc .navSection__VOzHt a:hover {
  background-color: #f4f4f4;
}
.caption__-R-ra {
  color: #ab8cc1;
  padding: 0px 12px 6px 12px;
}
.break__56xyt {
  height: 0;
  border-top: 1px solid #d8d8d8;
  display: block;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 6px;
  margin-bottom: 12px;
}
.sepLine__oKk8U {
  position: absolute;
  left: -1px;
  top: 0;
  width: 50%;
  height: 100%;
  display: block;
  z-index: 1;
  text-indent: -10000px;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid #d8d8d8;
}
.flat__J-cH- {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row;
      -ms-flex-flow: row;
          flex-flow: row;
}
.flatSeperate__Y0oeN {
  content: '';
  position: absolute;
  left: -1;
  z-index: 1;
  border-right: 1px solid #d8d8d8;
  height: 100%;
  top: 0;
}
.wrap__svRFI {
  -webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
}
.wrapSeperate__fz-kZ:before {
  content: '';
  position: absolute;
  left: -1;
  z-index: 1;
  border-right: 1px solid #d8d8d8;
  height: 100%;
  top: 0;
  margin-left: calc(50% - 2px);
}
.navTabs__DFS9M .navItem__Sh2-N .y-dropdown{
  /* margin-top: -4px; */
}
.nav__Xpvn1 .navItem__Sh2-N.hover {
  background-color: #fff;
  padding-bottom: 0;
  /* z-index: 4; */
}
.navTabs__DFS9M .navItem__Sh2-N.noSection__G80DS.hover .navLink__iFs2E {
  color: #000000;
  padding-bottom: 20px;
  border-bottom-width: 2px;
  border-color: transparent;
}
.navTabs__DFS9M .navItem__Sh2-N.hover .decoration__IchUm {
  display: block;
}
.navTabs__DFS9M .navItem__Sh2-N.hover .navLink__iFs2E {
  color: #26282a;
  /* background-color: #fff; */
  z-index: 5;
  /* make navItem poisition upper */
  padding-bottom: 12px;
  border: 2px solid #d8d8d8;
  border-bottom-width: 0px;
}
.navTabs__DFS9M .navItem__Sh2-N .y-dropdown-content{
  border: none;
  z-index: 7;
  margin-top: -4px;
}
.navTabs__DFS9M .navItem__Sh2-N .y-dropdown-content.dropdown-edge{
}
/*
  Navigation Custom Class defined in navgiationConf.js
  not wrapped in CSS-module
*/
ul .item {
      min-width: 530px;
    }
ul .warehouse {
      min-width: 360px;
    }
ul .shipment {

    }
ul .refund {

    }
ul .accounting {
      min-width: 530px;
    }
ul .tool {
      min-width: 360px;
    }
ul .help {
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.footer__Be8Ug {
  /* display: flex;
  flex-direction: column; */
  float: right;
  margin-top: 10px;
  margin-bottom: 20px;
}
.divide__0gD9I {
  height: 0.063em;
  background-color: #E0E4E9;
}
.catFooterTitle__JcaS1 {
  height: 1.000em;
  font-size: 1.125em;
  color: #26282a;
  margin: 1.333em 0;
}
.catTitle__teKeG {
  height: 1.000em;
  font-size: 0.938em;
  font-weight: 500;
  line-height: 1.0;
  color: #979ba7;
  margin-bottom: 0.533em;
  display: inline-block;
}
.partCat__Ivzvi {
  height: 22.250em;
  overflow: hidden;
}
.catList__3zGA9 {
  width: calc(33.33% - 1.000em);
  display: inline-block;
  margin-right: 1.000em;
  margin-bottom: 1.500em;
  vertical-align: top;
}
.childCatList__5f5UG {
  height: 2.500em;
  overflow: hidden;
}
.childCat__Huuge {
  height: 1.615em;
  font-size: 0.813em;
  line-height: 1.62;
  color: #979ba7;
  margin-right: 0.923em;
}
.fullCatButton__YPWcz {
  width: 8.889em;
  height: 2.222em;
  font-size: 1.125em;
  border-radius: 1.111em;
  background-color: #E0E4E9;
  margin: 0 auto 1.778em auto;
  text-align: center;
  color: #26282a;
  cursor: pointer;
}
.fullCatButton__YPWcz::after {
  height: 100%;
  content: '';
  display: inline-block;
  vertical-align: middle;
}
.chevron__5an8Z {
  width: 0.444em;
  height: 0.444em;
  border-left: 0.111em solid black;
  border-bottom: 0.111em solid black;
  vertical-align: middle;
  display: inline-block;
}
.chevronDown__yRPbU {
  -webkit-transform: rotate(-45deg) translate(0.4em, 0.1em);
          transform: rotate(-45deg) translate(0.4em, 0.1em);
}
.chevronUp__6s4b6 {
  margin-left: 0.278em;
  -webkit-transform: rotate(135deg) translate(0, -0.1em);
          transform: rotate(135deg) translate(0, -0.1em);
}
.pageFooter__X0-3f {
}
.footerBadges__PgRsG {
  display: inline-block;
}
.appBadge__AnNcS {
  width: 8.175em;
  height: 2.500em;
  border-radius: 0.250em;
  display: inline-block;
  margin-right: 0.513em;
}
.facebookBadge__3mt0b {
  height: 2.500em;
  width: 2.500em;
  border-radius: 0.250em;
}
.pageFooterText__rD2d- {
  float: right;
  text-align: right;
}
.copyrights__0vEB4 {
  height: 1.000em;
  font-size: 0.750em;
  font-size: 12px;
  font-size: 0.75rem;
  color: #4a4a4a;
}
.copyrightLink__HWSei {
  margin-top: 0.615em;
  height: 1.000em;
  font-size: 0.813em;
  color: #979ba7;
}
.footerListItem__N2L-f {
  border-right: 0.063em solid #979ba7;
  display: inline-block;
  margin-right: 0.688em;
  padding-right: 0.625em;
}
.footerListItem__N2L-f:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}
.link__JhUKC,
.link__JhUKC:visited {
  color: #979ba7;
}
.catList__3zGA9 a:hover,
.link__JhUKC:hover {
  color: #26282a;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .footerBadges__PgRsG {
    display: block;
    text-align: center;
    margin-bottom: 1.438em;
  }

  .pageFooterText__rD2d- {
    float: none;
    text-align: center;
  }

  .pageFooter__X0-3f {
    /* padding-bottom: pxToEm(20px); */
  }

  .fullCatButton__YPWcz {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .footer__Be8Ug {
    padding: 0;
    margin-top: 0px;
    margin-bottom: 12px;
  }

  .footerBadges__PgRsG,
  .divide__0gD9I {
    display: none;
  }

  .pageFooterText__rD2d- {
    float: none;
    text-align: center;
  }

  /* .pageFooter {
    padding-top: pxToEm(0px);
    padding-bottom: pxToEm(12px);
  } */
}

.header__9INEj .navbar-wrapper {
    position: inherit;
  }

    .header__9INEj .navbar-wrapper [data-role="logo-link"] {
      position: absolute;
      left: 20px;
    }
  .header__9INEj [class*="functionWrapper"] {
    position: absolute;
    right: 20px;
  }
.mobileHeader__mbL3t .navbar-wrapper [data-role="brand-logo"] {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
.mobileHeader__mbL3t .navbar-wrapper [data-role="brand-logo"] img {
      height: 20px;
    }
.mobileHeader__mbL3t .navbar-wrapper [data-role="brand-logo"] label {
      width: 100%;
      font-size: 12px;
      font-size: 0.75rem;
      margin: 6px 0;
    }
.mobileHeader__mbL3t .navbar-wrapper [class*="functionWrapper"] {
    margin-right: 0;
    right: 0;
  }
/* 登入/登出模組縮小保留 */
.mobileHeader__mbL3t .navbar-wrapper [class*="functionWrapper"] li:first-child {
        -webkit-transform: scale(0.9);
                transform: scale(0.9);
      }
/* 代辦隱藏，TopSideBar 有同樣功能 */
.mobileHeader__mbL3t .navbar-wrapper [class*="functionWrapper"] li:last-child {
        display: none;
      }
.mainArea__0kXFp {
  background-color: #fff;
}
.leftContent__TW8IU {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
}
.leftContent__TW8IU.collapsed__CI9UK {
    z-index: 3;
  }
.leftContent__TW8IU .supplierInfo__pD-MK {
    min-height: 62px;
    max-height: 62px;
    height: auto;
    width: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
.rightContent__-vpOv {
  min-width: 1100px;
}
.workspace__xe8V6 {
  padding: 0 48px 48px;
  margin: 0;
}
.workspace__xe8V6.withSubSideBar__gF7H3 {
    position: relative;
    top: 0;
    left: -210px;
    background: transparent;
    padding: 0 0 0 2px;
    width: calc(100% + 210px);
    min-width: 0;
  }
.sidebar__fESwz {
  border: none;
}
.sidebar__fESwz .hightlightIcon__YxFra {
    position: absolute;
    margin-left: -10px;
    margin-top: -38px;
  }
.sidebar__fESwz .ant-menu-submenu-arrow {
      left: 20px;
    }
.sidebar__fESwz .ant-menu-item,
    .sidebar__fESwz .ant-menu-submenu {
      margin: 0 auto;
      font-size: 1rem;
    }
/* prevent hyperlink default style */
.sidebar__fESwz .ant-menu-item a, .sidebar__fESwz .ant-menu-item a:visited, .sidebar__fESwz .ant-menu-item a:hover, .sidebar__fESwz .ant-menu-submenu a, .sidebar__fESwz .ant-menu-submenu a:visited, .sidebar__fESwz .ant-menu-submenu a:hover {
        border-bottom: none;
        color: inherit;
      }
.sidebar__fESwz .ant-menu-item a:visited, .sidebar__fESwz .ant-menu-item a:hover, .sidebar__fESwz .ant-menu-submenu a:visited, .sidebar__fESwz .ant-menu-submenu a:hover {
        font-weight: bolder;
      }
/* custom menu item style */
.sidebar__fESwz .ant-menu-item.ant-menu-item-active {
      color: inherit;
      background-color: transparent;
      font-weight: bolder;
    }
.sidebar__fESwz .ant-menu-item:hover {
      font-weight: bolder;
    }
.sidebar__fESwz .ant-anchor-link {
      padding: 0 46px;
    }
.sidebar__fESwz .ant-menu-item.ant-menu-item-selected,
    .sidebar__fESwz .ant-anchor-link.ant-anchor-link-active {
      color: #5478fc;
      background-color: rgba(84, 120, 252, 0.15);
    }
.sidebar__fESwz .ant-menu-item.ant-menu-item-selected a, .sidebar__fESwz .ant-anchor-link.ant-anchor-link-active a {
        color: #5478fc !important;
        font-weight: bolder;
      }
.sidebar__fESwz .ant-menu-item:not(:last-child) {
      margin-bottom: 0;
    }
.sidebar__fESwz .ant-menu-item:last-child {
      margin-bottom: 8px;
    }
.sidebar__fESwz .ant-menu-sub {
      background: none;
    }
.sidebar__fESwz .ant-menu-sub .ant-menu-item {
        margin-bottom: 0;
      }
.sidebar__fESwz .ant-anchor-link.ant-anchor-link-active {
      line-height: 40px;
      line-height: 2.5rem;
    }
.sidebar__fESwz .ant-menu-submenu-title,
    .sidebar__fESwz .ant-menu-item.ant-menu-item-only-child {
      padding: 0 !important;
    }
.sidebar__fESwz .ant-menu.ant-menu-sub.ant-menu-inline >li a{
      padding-left: 16px;
    }
.topNavOffset__6edsp {
  height: 62px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.subSideBar__9UfHJ {
  position: -webkit-sticky;
  position: sticky;
  top: 62px;
  left: 0;
  width: calc(210px - 2px);
  border-right: 2px solid #EAECF0;
  height: calc(100vh - 62px);
  overflow-y: auto;
  z-index: 2;
  background: #fff;
}
.subSideBar__9UfHJ .ant-anchor-wrapper {
      max-height: inherit !important;
      overflow-x: hidden;
    }
.subSideBar__9UfHJ .ant-menu-item {
      padding: 0;
    }
/* simulate menu item */
.subSideBar__9UfHJ .ant-menu-item .ant-anchor-link {
        line-height: 40px;
        line-height: 2.5rem;
      }
.subSideBar__9UfHJ .ant-menu-item .ant-anchor-link.ant-anchor-link-active {
          color: #5478fc;
          background-color: rgba(84, 120, 252, 0.15);
        }
.subSideBar__9UfHJ .ant-anchor.ant-anchor-fixed {
      padding-left: 0;
    }
.subSideBar__9UfHJ .ant-anchor-ink {
      display: none;
    }
.rightContent__-vpOv {
  background: #fff;
  overflow-x: auto;
}
.rightContent__-vpOv .horizontalScroll__DyJb- {
    min-width: 1100px;
  }
.rightContent__-vpOv .mainContent__S-MYJ {
    padding: 0 48px;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.pageHeader__HJqUA {
  /* padding-bottom: 20px;
  padding-top: 20px;
  padding: 30px;
  border-top: solid 10px #9538d7;
  border-bottom: solid 2px #9538d7;
  display: flex; */
  background-color: #fff;
  border-bottom-color: rgba(151, 151, 151, 0.26);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: -1px;
  position: relative;
  z-index: 100;
}
/* Navbar */
.navbar__WWQYS {
  width: auto;
  margin: 0 auto;
}
.navbarColor__37071 {
  background-color: #fff;
  width: 100%;
  /* line-height: 90px; */
}
.navbarWrapper__JPZSy {
  position: relative;
  height: 100%;
  margin-left: 32px;
  height: 90px;
}
.logoWrapper__50Lpx {
  float: left;
  padding: 24px 0px 0px 0px;
}
.logoWrapper__50Lpx >a {
    color: #53546e
  }
.badgeApplier__HOarP {
  /* top: -22px!important; */
}
.functionWrapper__3ZhWU {
  float: right;
  margin-right: 14px;
  width: auto;
  height: 100%;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 500;

  /* padding: 36px 0px 0px 0px; */
  /* display: inline-flex; */
  /* align-items: flex-end; */
}
/* min-width: 424px; */
.functionWrapper__3ZhWU >li {
    height: 100%;
    float: left;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
.functionWrapper__3ZhWU >li+li {
      padding-left: 32px;
    }
.functionWrapper__3ZhWU >li:hover .y-dropdown-content {
        display: block;
      }
.functionName__aiyxd {
  margin-left: 6px;
  color: #54546f;
}
.functionLogin__D0Otc {
  color: #54546f;
  margin-left: 8px;
}
.functionLogin__D0Otc a {
  color: #54546f;
}
.functionLoginName__eAdae {
  vertical-align: text-bottom;
  /* max-width: 100px; */
  width: auto;
}
/* .functionModule { */
/* } */
.popQrcode__khm4T {
  width: 220px;
  padding: 0 10px;
}
.qrcodeImage__3KoyW {
  width: 100%;
  margin-bottom: 5px;
}
.qrcodetext__bHjiX {
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  color: #2C1F9E;
}
/* 上稿版位 */
.adWrapper__6uZ5P {
  float: left;
  margin: 13px 30px 0px 30px;
  width: 400px;
}
.adWrapper__6uZ5P a {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    line-height: 60px;
    line-height: 3.75rem;
    color: #54546f;
  }
.adWrapper__6uZ5P img {
    width: 100%;
  }
@media screen and (min-width: 0px) and (max-width: 1150px) {
  .adWrapper__6uZ5P {
    display: none;
  }
}
@media screen and (max-width: 1270px) {
  .adWrapper__6uZ5P {
    margin: 16px 10px 0px 10px;
    width: 350px;
  }
}

.badge__RdmFh {
  position: relative;
  display: inline;
}
  .badge__RdmFh > .wrapper__mwCJa {
    position: absolute;
    top: -30px;
    left: -10px;
    font-size: 14px;
    font-size: 0.875rem;
    width: 30px;
    height: 28px;
    display: inline-block;
    background-color: #6C9CE3;
  }
  /* &.square {} */
  .badge__RdmFh > .wrapper__mwCJa.circle__j3MyX {
      border-radius: 50%;
    }
  .badge__RdmFh > .wrapper__mwCJa.red__L-R6d {
      color: #ffffff;
      background-color: #f2695b;
    }
  .badge__RdmFh > .wrapper__mwCJa > span {
      text-align: center;
      line-height: 30px;
      line-height: 1.875rem;
      display: block;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.toastBox__khOM0 {
  position: fixed;
  top: 7.500em;
  width: 100%;
  text-align: center;
  z-index: 9;
}
.toast-active {
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -webkit-transform: translate(0, 1.000em);
          transform: translate(0, 1.000em);
  will-change: transfrom;
}
.toast__nBhoz {
  display: inline-block;
  background: #fff;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,.5);
          box-shadow: 0px 0px 10px 0px rgba(0,0,0,.5);
  text-align: left;
  padding-left: 2.000em;
  border-radius: 2px;
}
.type__rpxAP,
.content__FdKVi,
.closeButton__u0sFr {
  display: inline-block;
  vertical-align: top;
}
.type__rpxAP {
  border-radius: 2px 0 0 2px;
  width: 2.000em;
  height: 2.000em;
  margin-left: -2.000em;
  text-align: center;
}
.toastIcon__YmbA- {
  width: 2.000em;
  height: 2.000em;
  line-height: 2.000em;
  color: #fff;
  font-weight: bold;
}
.normal__mQOLS {
  background-image: linear-gradient(46deg, #22d3b5, #15d399 51%, #07d17c);
}
.advisory__NpnoG {
  background-image: linear-gradient(46deg, #fdcb00, #ffb100 51%, #ff9600);
}
.warning__OCn6m {
  background-image: linear-gradient(46deg, #ff333a, #e61a63 51%, #cc008c);
}
.content__FdKVi {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 2.000em;
  line-height: 2.000em;
  padding-left: 0.750em;
}
.closeButton__u0sFr {
  border: none;
  background: none;
  margin: 0;
  padding: 0;
  width: 2.000em;
  height: 2.000em;
  line-height: 2.000em;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.SupplierInfo__w4X9- {
  color: #54546f
}
.SupplierInfo__w4X9- [data-role="y-icon"]>svg {
    /* scale to make it fit the spec */
    -webkit-transform: scale(0.9, 1);
            transform: scale(0.9, 1);
  }
.info__NjaZt {
  margin-left: 4px;
}
.id__1Iij6 {
  font-size: 14px;
  font-size: 0.875rem;
  text-align: center;
}
.name__v56Yy {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding-bottom: 5px;
}

.workspace__F8AZL {
  /* min-height: 883px; */
}


.card__7J491 {
  margin: 0 0 10px;
  border: 0;
  background: #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

.hasShadow__VHz8u {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
          box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.hasPadding__alPXv {
  padding: 15px
}

.sidebar__-nAPI {
  border: none;
}

  .sidebar__-nAPI .hightlightIcon__IgPgn {
    position: absolute;
    margin-left: -10px;
    margin-top: -38px;
  }

  .sidebar__-nAPI .ant-menu-submenu-arrow {
      left: 20px;
    }

  .sidebar__-nAPI .ant-menu-item,
    .sidebar__-nAPI .ant-menu-submenu {
      margin: 0 auto;
      font-size: 1rem;
    }

  /* prevent hyperlink default style */

  .sidebar__-nAPI .ant-menu-item a, .sidebar__-nAPI .ant-menu-item a:visited, .sidebar__-nAPI .ant-menu-item a:hover, .sidebar__-nAPI .ant-menu-submenu a, .sidebar__-nAPI .ant-menu-submenu a:visited, .sidebar__-nAPI .ant-menu-submenu a:hover {
        border-bottom: none;
        color: inherit;
      }

  .sidebar__-nAPI .ant-menu-item a:visited, .sidebar__-nAPI .ant-menu-item a:hover, .sidebar__-nAPI .ant-menu-submenu a:visited, .sidebar__-nAPI .ant-menu-submenu a:hover {
        font-weight: bolder;
      }

  /* custom menu item style */

  .sidebar__-nAPI .ant-menu-item.ant-menu-item-active {
      color: inherit;
      background-color: transparent;
      font-weight: bolder;
    }

  .sidebar__-nAPI .ant-menu-item:hover {
      font-weight: bolder;
    }

  .sidebar__-nAPI .ant-anchor-link {
      padding: 0 46px;
    }

  .sidebar__-nAPI .ant-menu-item.ant-menu-item-selected,
    .sidebar__-nAPI .ant-anchor-link.ant-anchor-link-active {
      color: #5478fc;
      background-color: rgba(84, 120, 252, 0.15);
    }

  .sidebar__-nAPI .ant-menu-item.ant-menu-item-selected a, .sidebar__-nAPI .ant-anchor-link.ant-anchor-link-active a {
        color: #5478fc !important;
        font-weight: bolder;
      }

  .sidebar__-nAPI .ant-menu-item:not(:last-child) {
      margin-bottom: 0;
    }

  .sidebar__-nAPI .ant-menu-item:last-child {
      margin-bottom: 8px;
    }

  .sidebar__-nAPI .ant-menu-sub {
      background: none;
    }

  .sidebar__-nAPI .ant-menu-sub .ant-menu-item {
        margin-bottom: 0;
      }

  .sidebar__-nAPI .ant-anchor-link.ant-anchor-link-active {
      line-height: 40px;
      line-height: 2.5rem;
    }

  .sidebar__-nAPI .ant-menu-submenu-title,
    .sidebar__-nAPI .ant-menu-item.ant-menu-item-only-child {
      padding: 0 !important;
    }

  .sidebar__-nAPI .ant-menu.ant-menu-sub.ant-menu-inline >li a{
      padding-left: 16px;
    }
.header__YjI2U .navbar-wrapper {
    position: inherit;
  }

    .header__YjI2U .navbar-wrapper [data-role="logo-link"] {
      position: absolute;
      left: 20px;
    }
  .header__YjI2U [class*="functionWrapper"] {
    position: absolute;
    right: 20px;
  }
.mobileHeader__5oS7P .navbar-wrapper [data-role="brand-logo"] {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
.mobileHeader__5oS7P .navbar-wrapper [data-role="brand-logo"] img {
      height: 20px;
    }
.mobileHeader__5oS7P .navbar-wrapper [data-role="brand-logo"] label {
      width: 100%;
      font-size: 12px;
      font-size: 0.75rem;
      margin: 6px 0;
    }
.mobileHeader__5oS7P .navbar-wrapper [class*="functionWrapper"] {
    margin-right: 0;
    right: 0;
  }
/* 登入/登出模組縮小保留 */
.mobileHeader__5oS7P .navbar-wrapper [class*="functionWrapper"] li:first-child {
        -webkit-transform: scale(0.9);
                transform: scale(0.9);
      }
/* 代辦隱藏，TopSideBar 有同樣功能 */
.mobileHeader__5oS7P .navbar-wrapper [class*="functionWrapper"] li:last-child {
        display: none;
      }
.mainArea__q4YbY {
  background-color: #fff;
}
.leftContent__9Xd-B {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
}
.leftContent__9Xd-B.collapsed__vQlD6 {
    z-index: 3;
  }
.leftContent__9Xd-B .supplierInfo__ns71n {
    min-height: 62px;
    max-height: 62px;
    height: auto;
    width: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
.rightContent__1Bzw1 {
  min-width: 1100px;
}
.workspace__V8hgz {
  padding: 0 48px 48px;
  margin: 0;
}
.workspace__V8hgz.withSubSideBar__AxdXd {
    position: relative;
    top: 0;
    left: -210px;
    background: transparent;
    padding: 0 0 0 2px;
    width: calc(100% + 210px);
    min-width: 0;
  }
.sider__K0qIt {
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - 62px - 48px) !important;
  -webkit-box-shadow: #e0e0e0 4px 0 10px;
          box-shadow: #e0e0e0 4px 0 10px;
}
.sider__K0qIt.mobileSider__Y3-zI {
    height: 100vh !important;
  }
.sider__K0qIt .menu__lY7op {
    border: none;
    min-width: 0;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
        -ms-flex: auto;
            flex: auto;
  }
.sider__K0qIt .trigger__0nrum {
    padding: 0.5rem;
    background-color: #e0e0e0;
    width: 85%;
  }
.sider__K0qIt.ant-layout-sider-collapsed {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
.sider__K0qIt:not(.collapsed__vQlD6) .ant-layout-sider-trigger {
    -webkit-box-shadow: #e0e0e0 4px 5px 10px;
            box-shadow: #e0e0e0 4px 5px 10px;
  }
.sider__K0qIt .ant-layout-sider-trigger {
    background: #fff;
  }
.header__Vkut7 .navbar-wrapper {
    position: inherit;
  }

    .header__Vkut7 .navbar-wrapper [data-role="logo-link"] {
      position: absolute;
      left: 20px;
    }
  .header__Vkut7 [class*="functionWrapper"] {
    position: absolute;
    right: 20px;
  }
.mobileHeader__2XPV6 .navbar-wrapper [data-role="brand-logo"] {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
.mobileHeader__2XPV6 .navbar-wrapper [data-role="brand-logo"] img {
      height: 20px;
    }
.mobileHeader__2XPV6 .navbar-wrapper [data-role="brand-logo"] label {
      width: 100%;
      font-size: 12px;
      font-size: 0.75rem;
      margin: 6px 0;
    }
.mobileHeader__2XPV6 .navbar-wrapper [class*="functionWrapper"] {
    margin-right: 0;
    right: 0;
  }
/* 登入/登出模組縮小保留 */
.mobileHeader__2XPV6 .navbar-wrapper [class*="functionWrapper"] li:first-child {
        -webkit-transform: scale(0.9);
                transform: scale(0.9);
      }
/* 代辦隱藏，TopSideBar 有同樣功能 */
.mobileHeader__2XPV6 .navbar-wrapper [class*="functionWrapper"] li:last-child {
        display: none;
      }
.mainArea__lD906 {
  background-color: #fff;
}
.leftContent__PVNGm {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
}
.leftContent__PVNGm.collapsed__yC6Qe {
    z-index: 3;
  }
.leftContent__PVNGm .supplierInfo__-A6qN {
    min-height: 62px;
    max-height: 62px;
    height: auto;
    width: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
.rightContent__JAGV2 {
  min-width: 1100px;
}
.workspace__ltquv {
  padding: 0 48px 48px;
  margin: 0;
}
.workspace__ltquv.withSubSideBar__eTpcR {
    position: relative;
    top: 0;
    left: -210px;
    background: transparent;
    padding: 0 0 0 2px;
    width: calc(100% + 210px);
    min-width: 0;
  }

.dashboard__EJkJr {
  position: relative;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.main__DZtuh {
  min-width: 1212px;
  max-width: 1212px;
  width: auto;
  margin: 0 auto;
}
.navWrapper__Zegv7 {
  background-color: #EAECF0;
}
.navContainer__Q-c-x {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-width: 1200px;
  max-width: 1200px;
  width: auto;
  margin: 0 auto;
}
.sidebarWrapper__6iBQf {
  float: left;
  width: 208px;
}
.workspaceWrapper__hqCYu {
  float: left;
  width: calc(100% - 208px);
}
.supplierInfo__1UX0V {
  min-height: 62px;
  max-height: 62px;
  height: auto;
  width: 220px;
  margin-left: 32px;
}
.mainWorkspace__zhTut {
  margin: 0;
}
.mainWorkspace__zhTut:before {
  content: '';
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-color: white;
}

.container__GU8Gu {
  position: relative;
  width: auto;
  padding-top: 24px;
  padding-left: 20px;
}

.sidebar__TBS1e {
  /* padding-left: 24px; */
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.sidePane__aLz7U {
  position: relative;
  max-width: 208px;
  min-width: 208px;
  width: auto;
}
.cardBase__hpXvR {
  font-size: 14px;
  font-size: 0.875rem;
  margin-right: 16px;
  margin-bottom: 16px;
}
.cardBase__hpXvR [data-role="y-icon"]>svg {
    margin-right: 8px;
  }
.cardCaption__ArSpA {
  color: #000000;
  font-weight: bold;
}
.cardCaption__ArSpA a {
    color: #000000;
  }
/* links section */
.dashboardLinks__8C1oS {
  display: block;
  margin-right: 0px;
  padding: 24px 0px 24px 40px;
  border-radius: 8px 0px 0px 8px;
}
.dashboardLinks__8C1oS li {
    padding-bottom: 8px;
  }
.dashboardLinks__8C1oS li:last-of-type {
      padding-bottom: 0.000em;
    }
.dashboardLinks__8C1oS li a {
      color: #464E56;
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      /* make element size relative to content */
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      /* vertical alignment of contents */
      -webkit-align-content: center;
          -ms-flex-line-pack: center;
              align-content: center;
    }
/** motion binding**/
.dashboardLinks__8C1oS li a:hover span {
          -webkit-text-decoration: underline;
          text-decoration: underline;
        }
.dashboardLinks__8C1oS li a.active {
        color: #5478fc;
      }
.dashboardLinks__8C1oS li a.active span {
          font-weight: bold;
        }
.dashboardLinks__8C1oS li a.active [data-role="y-icon"]>svg {
          fill: #5478fc !important;
        }
.dashboardLinks__8C1oS li [data-role="y-icon"]>svg {
      fill: #464E56 !important;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.noPermission__hmiC1 {
  padding-top: 0px;
  margin: 70px 0;
  overflow: hidden;
}
.noPermission__hmiC1 span {
    font-size: 20px;
    font-size: 1.25rem;
  }
.noPermission__hmiC1 [data-role="y-icon"] {
    margin-bottom: 20px;
  }
.noPermission__hmiC1 [data-role="y-icon"] >svg {
      width: 120px !important;
      height: 120px !important;
    }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.sidePane__UOsHN {
  position: relative;
  max-width: 208px;
  min-width: 208px;
  width: auto;
}
.cardBase__dnAKR {
  font-size: 14px;
  font-size: 0.875rem;
  margin-right: 16px;
  margin-bottom: 16px;
}
.cardBase__dnAKR [data-role="y-icon"]>svg {
    margin-right: 8px;
  }
.cardCaption__ImFEf {
  color: #000000;
  font-weight: bold;
}
.cardCaption__ImFEf a {
    color: #000000;
  }
/* contribution section*/
.sideSection__awR2Q {
  padding: 20px 40px 10px 40px;
}
.sideSection__awR2Q .cardCaption__ImFEf {
    margin-bottom: 8px;
  }
.sideSection__awR2Q >p {
    line-height: 20px;
    line-height: 1.25rem;
    padding-left: 5px;
    color: #4a4a4a;
  }
.sideSection__awR2Q >p span {
      float: right;
      font-size: 14px;
      font-size: 0.875rem;
      font-weight: 500;
      text-align: right;
      color: #f2695b;
    }
/* links section */
.links__RFWs5 {
  display: block;
  margin-right: 0px;
  padding: 24px 0px 24px 40px;
  border-radius: 8px 0px 0px 8px;
}
.links__RFWs5 li {
    padding-bottom: 0.625em;
  }
.links__RFWs5 li:last-of-type {
      padding-bottom: 0.000em;
    }
.links__RFWs5 li a {
      color: #464E56;
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      /* make element size relative to content */
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      /* vertical alignment of contents */
      -webkit-align-content: center;
          -ms-flex-line-pack: center;
              align-content: center;
    }
/** motion binding**/
.links__RFWs5 li a:hover span {
          -webkit-text-decoration: underline;
          text-decoration: underline;
        }
.links__RFWs5 li a.active {
        color: #5478fc;
      }
.links__RFWs5 li a.active span {
          font-weight: bold;
        }
.links__RFWs5 li a.active [data-role="y-icon"]>svg {
          fill: #5478fc !important;
        }
.links__RFWs5 li [data-role="y-icon"]>svg {
      fill: #464E56 !important;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.sidebarRoute__iUkJL {
  height: 100%;
  width: auto;
  float: right;
}

.tableBlock__Guqrk {
  font-size: 13pt;
  padding: 0;
}

.tabs__T3fc- .ant-tabs-nav .ant-tabs-tab {
        padding: 14px 28px;
      }

.tabs__T3fc- .ant-tabs-nav .ant-tabs-tab [role="tab"] {
          color: #979ba7;
          font-size: 18px;
          font-size: 1.125rem;
        }

.tabs__T3fc- .ant-tabs-nav .ant-tabs-tab-active [role="tab"], .tabs__T3fc- .ant-tabs-nav .ant-tabs-tab:hover [role="tab"] {
          color: #000;
          background: rgba(58, 191, 186, 0.2);
        }

.tabs__T3fc- .ant-tabs-nav .ant-tabs-ink-bar {
        background-color: #3abfba;
        height: 3px;
        border-radius: 1px;
      }

.resultTable__eLEM5 div.ReactTable .rt-thead.-header {
        min-height: 50px !important;
        background: #f4f7ff !important;
      }

.resultTable__eLEM5 div.ReactTable .rt-thead.-header .rt-tr div.rt-th[role="columnheader"],
          .resultTable__eLEM5 div.ReactTable .rt-thead.-header .rt-tr div.rt-th[role="columnheader"]:first-child {
            padding: 5px 30px;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: center;
            -webkit-align-items: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-align-self: center;
                -ms-flex-item-align: center;
                    align-self: center;
          }

.resultTable__eLEM5 div.ReactTable .rt-thead,
      .resultTable__eLEM5 div.ReactTable .rt-tbody {
        overflow-x: auto;
      }

.resultTable__eLEM5 div.ReactTable .rt-thead .rt-td:first-child,
        .resultTable__eLEM5 div.ReactTable .rt-thead .rt-th:first-child,
        .resultTable__eLEM5 div.ReactTable .rt-tbody .rt-td:first-child,
        .resultTable__eLEM5 div.ReactTable .rt-tbody .rt-th:first-child {
          width: 40%;
        }

.resultTable__eLEM5 div.ReactTable .rt-thead .rt-td,
        .resultTable__eLEM5 div.ReactTable .rt-thead .rt-th,
        .resultTable__eLEM5 div.ReactTable .rt-tbody .rt-td,
        .resultTable__eLEM5 div.ReactTable .rt-tbody .rt-th {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: right;
          -webkit-justify-content: right;
              -ms-flex-pack: right;
                  justify-content: right;
          -webkit-flex-wrap: wrap;
              -ms-flex-wrap: wrap;
                  flex-wrap: wrap;
        }

.resultTable__eLEM5 div.ReactTable .rt-thead .rt-td, .resultTable__eLEM5 div.ReactTable .rt-tbody .rt-td {
          padding: 8px 22px;
        }

.resultTable__eLEM5 div.ReactTable .rt-thead .rt-td:first-child, .resultTable__eLEM5 div.ReactTable .rt-tbody .rt-td:first-child {
          font-size: 11pt;
          line-height: 9pt;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column;
        }

.resultTable__eLEM5 div.ReactTable .rt-thead .rt-td:first-child span, .resultTable__eLEM5 div.ReactTable .rt-tbody .rt-td:first-child span {
            padding: 0 3px;
          }

@media screen and (min-width: 576px) {
          .resultTable__eLEM5 div.ReactTable .rt-thead .rt-td, .resultTable__eLEM5 div.ReactTable .rt-tbody .rt-td {
            padding: 8px 80px;
          }
}

.backToPCLink__FAia3 {
  position: absolute;
  z-index: 10;
  right: 14px;
  top: 16px;
  font-size: 13pt;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.header__VqkUA {
  width: 100%;
  height: 72px;
  padding: 16px;
  -webkit-box-shadow: 0 2px 8px 0 #f1f1f5;
          box-shadow: 0 2px 8px 0 #f1f1f5;
  background-image: -webkit-gradient(linear, right top, left top, from(#5478fc), to(#843fd1));
  background-image: linear-gradient(to left, #5478fc, #843fd1);
  font-size: 21px;
  font-size: 1.3125rem;
  font-weight: 600;
  color: #f8f8fa;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}



.warehouse__rpHeF {
  position: relative;
}

.Item__mxdI1 {
  position: relative;
}

.SecretDashboard__yOGWq {
  position: relative;
}

  .SecretDashboard__yOGWq .supplierInfo__0-g3D {
    margin-bottom: 24px;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.topContainer__EzgU8 {
    padding-top: 40px;
    margin-bottom: 66px;
}
.queryPagination__CPbSH {
    text-align: right;
    margin-bottom: 12px;
}
.proposalSection__Eky7P {
    margin-top: 16px !important;
}
.container__N7Ngq {
    color: #26282a;
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.1);
            box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.1);
}
.container__N7Ngq button {
        margin-right: 16px;
    }
.container__N7Ngq li:before {
        font-size: 120px;
        font-size: 7.5rem;
        vertical-align: middle;
        line-height: 20px;
        line-height: 1.25rem;
    }
.container__N7Ngq .row1__q0WMH {
        position: relative;
        font-size: 16px;
        font-size: 1rem;
        margin: auto;
    }
.container__N7Ngq .row2__aIw-q {
        position: relative;
        margin-top: 20px;
        margin-bottom: 40px;
    }
.container__N7Ngq .listing__MewVZ {
        padding: 31px 0 31px 32px;
        list-style-type: disc;
        list-style-position: inside;
        font-size: 16px;
        font-size: 1rem;
        line-height: 34px;
        line-height: 2.125rem;
    }
.introduction__DTgAY {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 74px;
}
.introduction__DTgAY .moreMargin__d4OAN {
        margin-top: 32px;
    }
.introduction__DTgAY img {
        width: 360px;
        height: 200px;
        -webkit-box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.5);
                box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.5);
        margin-left: 10px;
    }
.introduction__DTgAY img:first-child {
        margin-left: 0;
    }


/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.CommonPage__QLIrv {

}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.Header__0bgeL {
  z-index: 32;
  height: 90px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 2px 8px 0 #f1f1f5;
          box-shadow: 0 2px 8px 0 #f1f1f5;
  background-image: -webkit-gradient(linear, right top, left top, from(#5478fc), to(#843fd1));
  background-image: linear-gradient(to left, #5478fc, #843fd1);
  color: white;
}
.container__otDGV {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify !important;
  -webkit-justify-content: space-between !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
}
.headerBrand__xQFEU h1 {
    font-weight: 100;
  }
.badgeApplier__VyqyU {
  top: -16px !important;
  width: 24px !important;
  height: 20px !important;
  font-size: 12px !important;
  font-size: 0.75rem !important;
  color: #fff !important;
  background-color: #ff4d52 !important;
}
.badgeApplier__VyqyU >span {
    line-height: 20px !important;
    line-height: 1.25rem !important;
  }
.module__4ZNrh {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.module__4ZNrh [data-role="y-icon"]>svg {
    width: 22px !important;
    height: 22px !important;
    fill: #ffffff !important;
  }
.HeaderMenu__bV2Zb {
  font-size: 13px;
  font-size: 0.8125rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.HeaderMenu__bV2Zb >li {
    height: 100%;
    float: left;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
.HeaderMenu__bV2Zb >li+li {
      padding-left: 32px;
    }
.HeaderMenu__bV2Zb >li:hover .y-dropdown-content {
        display: block;
      }
.loginModule__qwM8x {
  cursor: pointer;
}
.loginName__p-oCA {
  font-size: 13px;
  font-size: 0.8125rem;
  margin-left: 8px;
  color: #ffffff;
  font-weight: 500;
  width: auto;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
div.UserInfoTop__Fe6jg {
  color: #5478fc;
  padding: 10px 10px 10px 10px;
  padding-bottom: 5px;
}
div.UserInfoTop__Fe6jg span {
    margin-left: 8px;
  }
div.UserInfoTop__Fe6jg [data-role="y-icon"]>svg {
    fill: #5478fc !important;
  }
p.InfoTip__MdeUm {
  width: 240px;
  height: 40px;
  font-family: FreeSans,
Arimo,
"Droid Sans",
Arial,
Helvetica,
sans-serif,
"Microsoft JhengHei";
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #26282a;
}
div.UserInfoLabel__R9-4k Button {
    background-color: white;
    color: #979ba7;
    font-size: 14px;
    font-size: 0.875rem;
    height: 10px;
    margin-top: -15px;
    text-align: left
  }
div.UserInfoLabel__R9-4k div.scm__iDR26 {
    float: left;
    margin-left: -5px;
    text-align: left;
  }
div.UserInfoLabel__R9-4k div.logout__fCmu3 {
    margin-right: -5px;
    text-align: right;
  }
div.UserInfoLabel__R9-4k Button:hover {
    background-color: white;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.Footer__dZ7qw div {
    font-size: 14px;
    font-size: 0.875rem;
    color: #979ba7;
  }
.pageFooter__yTfQq {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px 0;
}
.breakLine__f7xWM {
  border: solid 1px #dfe3e8;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.HeadingWithId__jpRTc {
  font-weight: 500;
  color: #26282a;
}
.HeadingWithId__jpRTc h2 {
    font-size: 24px;
    font-size: 1.5rem;
  }
.HeadingWithId__jpRTc .subtitleWithId__-qGZX {
    margin: 5px 0px;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.topContainer__n52UB {
    padding-top: 40px;
    margin-bottom: 66px;
}
.querySection__k-XcL {
    margin-bottom: 20px;
}
.actionBtns__4d3Qd button, .actionBtns__4d3Qd a {
        margin: 0 6px 12px;
    }
.pagination__dJ9gA {
}
.resultsListTable__hkRnG {
    background-color: #fff;
}
.resultsListHeader__F-mZV {
    padding: 0 48px;
    font-size: 14px;
    font-size: 0.875rem;
    color: #667094;
    border-bottom: 3px solid #e0e4e9;
    height: 46px;
}
.resultsPaginationSection__zY95B {
    margin: 10px 0px;
}
.resultsPaginationSection__zY95B > div > div:first-child {
            margin-right: 16px;
            color: #979ba7;
        }
.resultsListPagination__wvOY3 {
    margin-left: 5px;
}
.resultsListBody__IR2rz {
    padding: 0 24px;
}
.resultRow__ndPoX {
    border-bottom: 1px solid #e0e4e9;
    padding: 0px 24px;
    word-break: break-all;
    word-wrap: break-word;
}
.resultRow__ndPoX.resultRow__ndPoX:hover {
        background-color: #fafafc;
    }
.btnModalsRow__nwsTk {
    margin-top: 9px;
}
.pullRightCol__ebb0w {
    text-align: right;
}
.actionsCol__1R5Me {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 4px 0;
}
.newQueryPromo__OOnHc {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
.newQueryDescription__mr3ZG {
    margin: 25px 0px 60px 0px;
    color: #979ba7;
    font-size: 18px;
    font-size: 1.125rem;
}
.additionalProductModalBtn__iZpUx {
    margin-right: 12px;
}
.additionalProductTable__0e3a7 .ant-table-thead > tr > th {
            font-size: 12px;
            font-size: 0.75rem;
            background-color: #fafafa;
        }
.additionalProductTable__0e3a7 .ant-table-thead > tr > th:first-child {
                text-align: left;
            }
.additionalProductTable__0e3a7 .ant-table-tbody > tr.ant-table-row.ant-table-row-level-0 {
                background-color: #ffffff;
            }
.additionalProductTable__0e3a7 .ant-table-tbody > tr.ant-table-row.ant-table-row-level-1 {
                background-color: #e9e9e9;
            }
.additionalProductTable__0e3a7 .ant-table-tbody > tr > td {
                font-size: 12px;
                font-size: 0.75rem;
                border-bottom: 1px solid #e8e8e8;
                background-color: inherit;
            }
.additionalProductTable__0e3a7 .ant-table-tbody > tr > td:first-child {
                    text-align: left;
                }
.listingId__J5VGh {
    padding-left: 78px;
}
.hoverNoUnderLine__2msOE {
    border: 0 !important;
}
.thumbnail__vKaYx {
    width: 86px;
    height: 86px;
    padding-right: 8px;
}
.thumbnail__vKaYx img {
        width: 70px;
        height: 70px;
    }
.thumbnailEmpty__nrZAz {
    padding-right: 78px;
}
.productName__WxWRW {
    width: 90%;
}
.batchDropdown__UrX-3 .ant-dropdown-menu-item {
            padding: 5px 0;
            background-color: #fff;
        }
.batchDropdown__UrX-3 .ant-dropdown-menu-item:hover {
                background-color: #ffffff;
            }
.batchDropdown__UrX-3 button {
        width: 100%;
        height: 100%;
        padding: 0 12px !important;
        text-align: left;
    }
.batchDropdownIcon__Q9bcY {
    margin-left: 12px;
}
div.labelWithIcon__fiIyd {
    /* fix default form label with icon will have left px */
    left: 0 !important;
}
.subStationIdSelect__Co1d7 {
    width: 100%;
}

.idTypeSelect__A0As2 {
    width: 100%;
    text-align: center;
}

.fullWithTextarea__IAFVk > div {
    width: 100%;
}

.fullWithTextarea__IAFVk > div textarea {
        width: 100%;
        height: 100px;
    }

.fullWithInput__Rqsou [data-role="with-input-count"] {
        width: 100%;
    }

.fullWithInput__Rqsou .ant-input[data-role="input-field"] {
            width: 100%;
        }

.info__VCd9h {

    margin-left: 12px;
}

.info__VCd9h li {
        font-size: 12px;
        font-size: 0.75rem;
        color: #979ba7;
        line-height: 18px;
        line-height: 1.125rem;
    }

.contactWindow__jxHbP {
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
}


/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.copyAll__EjahY,
.items__M8RFj,
.productNo__o63wA {
  font-size: 14px;
  font-size: 0.875rem;
  border-bottom: solid 3px #e0e4e9;
  top: 0;
  left: 0;
}
.copyAll__EjahY {
  color: #5478fc;
}
.copyButton__g1htc {
  width: 80px;
  height: 32px;
  font-size: 14px;
  font-size: 0.875rem;
  padding: 0px;
}
.itemsInfo__YU-rL,
.productNoInfo__vTZmg {
  font-size: 16px;
  font-size: 1rem;
}
.modelSpec__GG45E {
  margin-bottom: 6px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
  line-height: 1.5rem;
  color: #26282a;
}
.itemSpec__fra1d {
  line-height: 16px;
  line-height: 1rem;
  font-size: 12px;
  font-size: 0.75rem;
  color: #7a00a7;
}
.productDetailTable__17szN td {
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal !important; /* be hardcoded by rc-table */
  }

.BtnModal__7wtSM button[type="primary"] {
        padding: 6px 12px;
        margin-right: 12px;
    }
.modal__cINDg [class="y-modal-body"]{
  max-height: 500px;
}

.hint__UpS6e {
  font-size: 16px;
  font-size: 1rem;
  color: #000;
}

.hint__UpS6e.title__IAq3Y {
    color: #979ba7;
  }

.checkbox__WV3V5 {
  margin: 4px 0;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
.listingId__1aQx3 {
  font-size: 24px;
  font-size: 1.5rem;
  color: #5478fc;
}
.fileInput__4Ro68 {
  width: 100%;
}
ul li .subListing__PLPnH {
  color: #555;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.green__4Kbni {
  color: #3DC350;
}
.red__V9EHJ {
  color: red;
}
.container__-Lyev {
  padding: 30px 30px;
}
.container__-Lyev .uploaderLabel__AtXAn {
    display: block;
    margin-bottom: 20px;
  }
.container__-Lyev .biggerFont__lKq-8 {
    font-size: 18px;
    font-size: 1.125rem;
  }
.container__-Lyev input[type=file] {
    display: block;
  }
.container__-Lyev .tableWrapper__WCnde {
    overflow-x: scroll;
    padding-bottom: 12px;
    margin-bottom: 20px;
  }
.container__-Lyev .newPageBtn__RW6qZ {
    margin-right: 16px;
  }
.container__-Lyev [data-currentStep="3"] {
      max-height: 380px;
      overflow: auto;
    }
.container__-Lyev .ant-table-thead th {
      min-width: 130px;
    }
/* customize some column width */
.container__-Lyev .ant-table-thead th:first-child {
      min-width: 70px;
    }
.container__-Lyev .ant-table-thead th:nth-child(6),
    .container__-Lyev .ant-table-thead th:nth-child(7) {
      min-width: 90px;
    }
.stepIndicator__Wn8ih {
  counter-reset: step;
  margin-bottom: 20px;
}
.stepIndicator__Wn8ih span {
    margin-right: 26px;
    font-size: 13pt;
  }
.stepIndicator__Wn8ih span::before {
    counter-increment: step; /* Increment the value of section counter by 1 */
    content: counter(step); /* Display counter value in default style (decimal) */
    border-radius: 50%;
    padding: 5px;
    display: inline-block;
    width: 34px;
    height: 34px;
    text-align: center;
    background-color: #d8d8d8;
    color: #fff;
    margin-right: 8px;
  }
.stepIndicator__Wn8ih [data-role="active-step"] {
    color: #5479FC;
  }
.stepIndicator__Wn8ih [data-role="active-step"]::before {
      background-color: #5479FC;
    }
.updatedListingsTableCard__4tcEK {
  width: 100%;
}
.finalActions__RV5vp {
  margin-top: 30px;
  text-align: center;
}
.noPadding__px9rY {
  padding: 0;
}
.batchTime__Ib8xn {
  display: block;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-size: 16px;
  font-size: 1rem;
  padding: 4px 8px;
  margin: 3px 0;
  width: 180px;
}
.paddingLeft__8h-Yw {
  padding-left: 8px;
}
.pink__V5jkc {
  color: #d85084 !important;
}
.checkbox__e1aEV {
  color: #000000;
}
.checkbox__e1aEV .ant-checkbox-disabled + span {
      color: #000000;
    }
.batchCard__SvwW0 .ant-card-body {
      max-height: 100px;
      overflow: auto;
    }

.collapseRow__gUx1q {
    margin-bottom: 30px;

}

    .collapseRow__gUx1q div.ant-collapse-header {
            border-left: solid 4px #5478fc;
            -webkit-box-shadow: 0 1px 0 0 #eff1f4;
                    box-shadow: 0 1px 0 0 #eff1f4;
        }
.ProposalCompletion__r5h0d {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  color: #26282a;
}
  .ProposalCompletion__r5h0d:before {
    /* conver the background with white */
    margin-top: -100px;
    background-color: #fff;
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: -1;
  }
  .ProposalCompletion__r5h0d .imgContainer__OwTKX {
    text-align: center;
  }
  .ProposalCompletion__r5h0d .imgContainer__OwTKX img {
      width: 400px;
      height: 300px;
    }
  .ProposalCompletion__r5h0d .titleSection__XFeKS {
    margin: 20px;
  }
  .ProposalCompletion__r5h0d .titleSection__XFeKS h1 {
      font-size: 24px;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 40px;
      line-height: 2.5rem;
    }
  .ProposalCompletion__r5h0d .titleSection__XFeKS h2 {
      font-size: 16px;
      font-size: 1rem;
      font-weight: 500;
    }
.batchInfo__Gg9WC {
  background-color: #f8f8fa;
  border-bottom: 1px solid #e8e8e8;

}

  .batchInfo__Gg9WC .subTitle__d-iBY {
    font-size: 12px;
    font-size: 0.75rem;
    color: #979ba7;
  }

  .batchInfo__Gg9WC .subTitle__d-iBY.counter__4QyEe {
      margin-left: 8px;
    }

  .batchInfo__Gg9WC .highlight__smqF5 {
    color: rgba(136, 59, 198);
    font-weight: bold;
  }

  .batchInfo__Gg9WC .following__0Cok7 {
    color: #3DC350;
  }

.updateListingTable__ribOh {
  width: 360px;
  margin: .2rem auto;
}

.updateListingTable__ribOh .ant-card-body {
      padding: 0;
    }

.updateListingTable__ribOh .ant-row {
      padding: 12px 24px;
      max-height: 150px;
      overflow-y: auto;
    }

.updateListingTable__ribOh .ant-col-8 {
      text-align: right;
    }

.listingQueryBlock__MMWbr {
  text-align: center;
  margin: 1rem;
}

.distinctSizeModal__oEDXE .y-modal-body {
        overflow: scroll;
    }

.tableBody__MaEQ9 {
    padding: 12px 24px;
}

.imgRow__c8jyD {
    border-bottom: 1px solid #e0e4e9;
}

.imageSizeCell__2b3nm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.imageSizeDimension__xj00k {
    font-size: 16px;
    font-size: 1rem;
}

.actionRow__1ufcN {
    height: 100%;
}

.uploadBtnArea__WJn5R {
    position: relative;
    background: #F7F7F9;
    padding: 20px 38px;
}

.uploadBtn__IQXnB {
    position: absolute;
    z-index: 100;
}
.productsTableBody__GaCwb {
    padding: 12px 24px;
}

.imageFunctionRow__lNwMO {
    border-bottom: 1px solid #e0e4e9;
    padding: 24px 0px;
}

.imageFunctionRow__lNwMO.imageFunctionRow__lNwMO.customImageFunctionRow__DzDPa {
        border-top: 0;
        border-bottom: 0;
    }

.imageFunctionRow__lNwMO.imageFunctionRow__lNwMO.customImageFunctionRow__DzDPa:not(:first-child) {
            border-top: 1px solid #e0e4e9;
        }

.imageFunctionRow__lNwMO.imageFunctionRow__lNwMO.customImageFunctionRow__DzDPa.specFirstRow__-elvt:not(:first-child) {
            border-top: 3px solid #e0e4e9;
        }

.imageFunctionRow__lNwMO.imageFunctionRow__lNwMO.customImageFunctionRow__DzDPa:last-child {
            border-bottom: 1px solid #e0e4e9;
        }

.imageFunctionRow__lNwMO.imageFunctionRow__lNwMO:hover {
        background-color: #fafafc;
    }

.uploaderRow__TpREx {
    position: relative;
    border-bottom: 1px solid #e0e4e9;
}

.uploaderRow__TpREx:after,
    .uploaderRow__TpREx:before {
        bottom: 100%;
        left: 236px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

.uploaderRow__TpREx:after {
        border-bottom-color: #f8f8fa;
        border-width: 13px;
        margin-left: -1px;
    }

.uploaderRow__TpREx:before {
        border-bottom-color: #e9e9e9;
        border-width: 16px;
        margin-left: -4px;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.info__gNgBD {
  display: inline-block;
  margin-left: 6px;
}
.TableTitle__cJJF- {
  font-size: 14px;
  font-size: 0.875rem;
  color: #26282a;
}
.TableTitle__cJJF-+.TableTitle__cJJF- {
    margin-top: 6px;
  }
.TableTitle__cJJF- .sub__K8wD6,
  .TableTitle__cJJF- .imageSub__l0cdG {
    font-size: 14px;
    font-size: 0.875rem;
    color: #989ba8;
    font-weight: 500;
  }
.TableTitle__cJJF- .sub__K8wD6 {
    margin-left: 4px;
  }
.ExpandImageButton__yLm7Y {
  width: 84px;
  cursor: pointer;
}
.ExpandImageButton__yLm7Y .figure__tPlzi {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 84px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: rgba(84, 120, 252, 0.1);
    border: dashed 1px #4A6DFB;
    color: #5478fc;
    position: relative;
  }
.ExpandImageButton__yLm7Y .figure__tPlzi:hover {
      -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
              box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    }
.ExpandImageButton__yLm7Y .figure__tPlzi:hover .tag__WUhts {
        opacity: 0.7;
      }
.ExpandImageButton__yLm7Y .figure__tPlzi.preview__2-leu {
      border: solid 1px #DCE0E6;
    }
.ExpandImageButton__yLm7Y .figure__tPlzi.invalid__bA6CL {
      pointer-events: none;
      border: dashed 1px #ff4d52;
    }
.ExpandImageButton__yLm7Y .figure__tPlzi img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
.ExpandImageButton__yLm7Y .figure__tPlzi .tag__WUhts {
      width: 84px;
      height: 26px;
      text-align: center;
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 28px;
      line-height: 1.75rem;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      background-color: #000000;
      color: #fff;
      left: -1px;
      bottom: -1px;
      position: absolute;
      opacity: 0;
      border: solid 1px black;
      -webkit-transition: opacity .3s ease;
      transition: opacity .3s ease;
    }
.ExpandImageButton__yLm7Y .figure__tPlzi .tag__WUhts.expandHint__IqxQK {
        opacity: 0.7;
      }
.ExpandImageButton__yLm7Y .figure__tPlzi .tag__WUhts [data-role="y-icon"] {
        margin-right: 8px;
      }
.ExpandImageButton__yLm7Y .figure__tPlzi .tag__WUhts [data-role="y-icon"] >svg {
          fill: #fff !important;
        }
.ExpandImageButton__yLm7Y .indicator__3t-nq {
    font-size: 12px;
    font-size: 0.75rem;
    text-align: right;
    display: block;
    color: #989ba8;
    margin-top: 4px;
    letter-spacing: 1px;
    letter-spacing: 0.0625rem;
    margin-bottom: 12px;
  }
.ExpandImageButton__yLm7Y .indicator__3t-nq.valid__zRW7y {
      color: #5478fc;
    }
.ExpandImageButton__yLm7Y .indicator__3t-nq.invalid__bA6CL {
      color: #ff4d52;
    }
.ImageFunction__vGHqZ {
  padding-bottom: 24px;
}
.ImageFunction__vGHqZ a {
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.2px;
    letter-spacing: -0.0125rem;
  }
.ImageFunction__vGHqZ .ant-checkbox-wrapper {
      margin: 0px;
    }
.ImageFunction__vGHqZ .ant-checkbox-wrapper .ant-checkbox~span {
        font-size: 12px;
        font-size: 0.75rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: -0.2px;
        letter-spacing: -0.0125rem;
        color: #979ba7;
      }
.AttributeTable__BKdyN .rowModelTop__AywQO {
    height: 155px;
  }
.AttributeTable__BKdyN .rowModelTop__AywQO~.rowModelItem__TJRDR~.rowModelTop__AywQO td {
        border-top: 3px solid #e9e9e9;
      }
.AttributeTable__BKdyN .rowModelTop__AywQO+.rowModelItem__TJRDR .images__iPRsI {
        border-top: 1px solid #e9e9e9;
      }
.AttributeTable__BKdyN .rowModelItem__TJRDR {
    height: 155px;
  }
.AttributeTable__BKdyN .rowModelItem__TJRDR .images__iPRsI {
      border-top: none;
    }
.AttributeTable__BKdyN .rowInform__TVU65 {
    height: 116px;
    background-color: #F1F1F5;
    border-top: 0;
  }
.AttributeTable__BKdyN .rowInform__TVU65:hover {
      background-color: #F1F1F5;
    }
.AttributeTable__BKdyN .rowInform__TVU65 >span {
      vertical-align: middle;
    }
.AttributeTable__BKdyN .specs__MYyfx {
    max-width: 88px;
    white-space: normal;
    word-wrap: break-word;
  }
.AttributeTable__BKdyN .stock__Vx6sz >a {
      outline: 0;
      display: block;
      font-size: 12px;
      font-size: 0.75rem;
      font-weight: 500;
      color: #5478fc;
      margin-top: 4px;
    }
.AttributeTable__BKdyN .stock__Vx6sz input {
      min-width: 121px;
    }
.AttributeTable__BKdyN .warehouseBarcodeRadio__6G8uV {
    margin-bottom: 8px;
  }
.AttributeTable__BKdyN .warehouseBarcodeRadio__6G8uV .ant-radio-wrapper {
        display: block;
        font-size: 16px;
        font-size: 1rem;
      }
.AttributeTable__BKdyN .warehouseBarcodeRadio__6G8uV .ant-radio-wrapper+.ant-radio-wrapper {
          margin-top: 10px;
        }
.AttributeTable__BKdyN .barcode__Jrh7Y {}
.AttributeTable__BKdyN .barcodeAndPartNoField__ltxhb {
    margin-top: 16px;
  }
.AttributeTable__BKdyN td.barcodeAndPartNo__CVmN3 {
    padding-bottom: 34px;
  }
.AttributeTable__BKdyN td.barcodeAndPartNo__CVmN3 input {
      min-width: 189px;
    }
.AttributeTable__BKdyN .primarySpec__5ZcPV,
  .AttributeTable__BKdyN [data-role='single-line-text'] {
    margin-bottom: 6px;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    color: #26282a;
  }
.AttributeTable__BKdyN .secondarySpec__1ajHx {
    line-height: 16px;
    line-height: 1rem;
    font-size: 12px;
    font-size: 0.75rem;
    color: #7a00a7;
  }
.AttributeTable__BKdyN .partNo__BeZiZ[data-role="single-line-text"] {
    word-break: break-all;
  }
.AttributeTable__BKdyN input[data-role="input-field"] {
      width: 100%;
      height: 40px;
    }
.AttributeTable__BKdyN input::-webkit-input-placeholder {
      font-size: 16px !important;
      font-size: 1rem !important;
      color: #b9bdc5 !important;
    }
.AttributeTable__BKdyN input::-moz-placeholder {
      font-size: 16px !important;
      font-size: 1rem !important;
      color: #b9bdc5 !important;
    }
.AttributeTable__BKdyN input:-ms-input-placeholder {
      font-size: 16px !important;
      font-size: 1rem !important;
      color: #b9bdc5 !important;
    }
.AttributeTable__BKdyN input::-ms-input-placeholder {
      font-size: 16px !important;
      font-size: 1rem !important;
      color: #b9bdc5 !important;
    }
.AttributeTable__BKdyN input::placeholder {
      font-size: 16px !important;
      font-size: 1rem !important;
      color: #b9bdc5 !important;
    }
.AttributeTable__BKdyN .ant-input-number {
      width: 100%;
      height: 40px;
      line-height: 40px;
      line-height: 2.5rem;
    }
.AttributeTable__BKdyN tr.attribute-table-expanded-row td {
        border-top-width: 2px;
        -webkit-box-shadow: 0 2px 4px 0 #EBEFF1;
                box-shadow: 0 2px 4px 0 #EBEFF1;
        padding: 0px 2px 0px 2px;
        position: relative;
      }
.AttributeTable__BKdyN tr.attribute-table-expanded-row td:after,
        .AttributeTable__BKdyN tr.attribute-table-expanded-row td:before {
          bottom: 100%;
          left: 52px;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
        }
.AttributeTable__BKdyN tr.attribute-table-expanded-row td:after {
          border-bottom-color: #f8f8fa;
          border-width: 13px;
          margin-left: -1px;
        }
.AttributeTable__BKdyN tr.attribute-table-expanded-row td:before {
          border-bottom-color: #e9e9e9;
          border-width: 16px;
          margin-left: -4px;
        }
.AttributeTable__BKdyN tr.attribute-table-expanded-row:last-of-type td {
          padding: 0px 2px 4px 2px;
        }
.attribute-table {
    font-size: 14px;
    font-size: 0.875rem;
    color: #4a4a4a;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    position: relative;
    line-height: 1.5;
    overflow: hidden;
  }
.attribute-table .attribute-table-scroll {
    overflow: auto;
  }
.attribute-table .attribute-table-scroll table {
    width: auto;
    min-width: 100%;
  }
.attribute-table .attribute-table-header {
    overflow: hidden;
    background: #f1f1f5;
  }
.attribute-table-thead tr th {
    border-bottom: solid 3px #e0e4e9;
  }
.attribute-table-fixed-header .attribute-table-body {
    background: #fff;
    position: relative;
  }
.attribute-table-fixed-header .attribute-table-body-inner {
    height: 100%;
    overflow: scroll;
  }
.attribute-table-fixed-header .attribute-table-scroll .attribute-table-header {
    overflow-x: scroll;
    padding-bottom: 20px;
    margin-bottom: -20px;
    overflow-y: scroll;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
.attribute-table-fixed-columns-in-body {
    visibility: hidden;
    pointer-events: none;
  }
.attribute-table .attribute-table-title {
    padding: 12px;
    border-top: 1px solid #E0E4E9;
  }
.attribute-table .attribute-table-content {
    position: relative;
  }
.attribute-table .attribute-table-footer {
    padding: 12px;
    border-bottom: 1px solid #E0E4E9
  }
.attribute-table .attribute-table-placeholder {
    padding: 12px;
    background: #fff;
    border-bottom: 1px solid #E0E4E9;
    text-align: center;
    position: relative;
  }
.attribute-table .attribute-table-placeholder-fixed-columns {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: transparent;
    pointer-events: none;
  }
.attribute-table table {
    width: 100%;
    border-collapse: separate;
    text-align: left;
  }
.attribute-table th {
    background: #f1f1f5;
    font-weight: bold;
    -webkit-transition: background .3s ease;
    transition: background .3s ease;
  }
.attribute-table td {
    border-top: 1px solid #e9e9e9;
  }
.attribute-table td:empty:after {
    content: '.';
    visibility: hidden;
  }
.attribute-table tr {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
  }
.attribute-table tr:hover {
    background: #F6F8FF;
  }
.attribute-table tr.attribute-table-row-hover {
    background: #eaf8fe;
  }
.attribute-table th, .attribute-table td {
    padding: 12px;
    white-space: nowrap;
  }
.attribute-table th:first-child, .attribute-table td:first-child {
      padding-left: 24px;
    }
.attribute-table th:last-of-type, .attribute-table td:last-of-type {
      padding-right: 24px;
    }
.attribute-table tbody td {
    white-space: normal;
    word-wrap: break-word;
  }
.attribute-table tbody tr:last-child td {
      border-bottom: 1px solid #e9e9e9;
    }
.attribute-table td {
    vertical-align: top;
    padding-top: 20px;
  }
.attribute-table-expand-icon-col {
    width: 34px;
  }
.attribute-table-row-expand-icon, .attribute-table-expanded-row-expand-icon {
    cursor: pointer;
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    line-height: 1rem;
    border: 1px solid #e9e9e9;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: #fff;
  }
.attribute-table-row-spaced, .attribute-table-expanded-row-spaced {
    visibility: hidden;
  }
.attribute-table-row-spaced:after, .attribute-table-expanded-row-spaced:after {
    content: '.';
  }
.attribute-table-row-expanded:after, .attribute-table-expanded-row-expanded:after {
    content: '-';
  }
.attribute-table-row-collapsed:after, .attribute-table-expanded-row-collapsed:after {
    content: '+';
  }
tr.attribute-table-expanded-row {}
tr.attribute-table-expanded-row:hover {}
.attribute-table-column-hidden {
    display: none;
  }
.attribute-table-prev-columns-page, .attribute-table-next-columns-page {
    cursor: pointer;
    color: #666;
    z-index: 1;
  }
.attribute-table-prev-columns-page:hover, .attribute-table-next-columns-page:hover {
    color: #2db7f5;
  }
.attribute-table-prev-columns-page-disabled, .attribute-table-next-columns-page-disabled {
    cursor: not-allowed;
    color: #999;
  }
.attribute-table-prev-columns-page-disabled:hover, .attribute-table-next-columns-page-disabled:hover {
    color: #999;
  }
.attribute-table-prev-columns-page {
    margin-right: 8px;
  }
.attribute-table-prev-columns-page:before {
    content: '<';
  }
.attribute-table-next-columns-page {
    float: right;
  }
.attribute-table-next-columns-page:before {
    content: '>';
  }
.attribute-table-fixed-left, .attribute-table-fixed-right {
    position: absolute;
    top: 0;
    overflow: hidden;
  }
.attribute-table-fixed-left table, .attribute-table-fixed-right table {
    width: auto;
    background: #fff;
  }
.attribute-table-fixed-left {
    left: 0;
    -webkit-box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
            box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
  }
.attribute-table-fixed-left .attribute-table-body-inner {
    margin-right: -20px;
    padding-right: 20px;
  }
.attribute-table-fixed-header .attribute-table-fixed-left .attribute-table-body-inner {
    padding-right: 0;
  }
.attribute-table-fixed-right {
    right: 0;
    -webkit-box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);
            box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);
  }
.attribute-table-fixed-right .attribute-table-expanded-row {
    color: transparent;
    pointer-events: none;
  }
.attribute-table.attribute-table-scroll-position-left .attribute-table-fixed-left {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
.attribute-table.attribute-table-scroll-position-right .attribute-table-fixed-right {
    -webkit-box-shadow: none;
            box-shadow: none;
  }

.ImageBackgroundHolder__2Ld-6 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-clip: padding-box;
}

.productName__ZPKko, .seoUrl__MA4-h, .shortDescription__J4HTM {
  display: inline-block;
  width: 100%;
}
  .productName__ZPKko input[type=text], .productName__ZPKko [data-role="textarea-field"], .seoUrl__MA4-h input[type=text], .seoUrl__MA4-h [data-role="textarea-field"], .shortDescription__J4HTM input[type=text], .shortDescription__J4HTM [data-role="textarea-field"] {
    width: 100%;
  }
.seoUrl__MA4-h input[type=text] {
    width: 686px;
  }
.suffix__xtSP- {
  font-size: 16px;
  font-size: 1rem;
  text-indent: 10px;
  color: #27282b;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.shortDescription__J4HTM [data-role="textarea-field"] {
    height: 72px;
  }
.ShortDescriptionField__nDRrp {
  width: 100%;

}

  .ShortDescriptionField__nDRrp li {
    position: relative;
    margin-top: 32px;
  }

  .ShortDescriptionField__nDRrp li::before {
      content: '•';
      color: #b9bdc5;
      position: absolute;
      left: -14px;
      top: 12px;
    }

  .ShortDescriptionField__nDRrp li:first-child {
      margin-top: 0px;
    }

  .ShortDescriptionField__nDRrp li > div {
      display: inline-block;
    }

  .ShortDescriptionField__nDRrp li > div [data-role='input-field'] {
        width: 472px;
      }

  /* 唯讀時 列表點要內縮 */

  .ShortDescriptionField__nDRrp.readOnly__CYmV5 {
    margin-bottom: -20px;
  }

  .ShortDescriptionField__nDRrp.readOnly__CYmV5 li {
      margin-top: -10px;
      margin-left: 14px;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.Warn__M0dxK {
  color: #ff333a;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 12px;
  line-height: 0.75rem;
  padding: 12px 12px 0px 12px;
  word-break: break-all;
  white-space: normal;
}
.uploadInlineList__T5erx .ant-upload-list {
      margin: 12px 0px;
    }
.uploadInlineList__T5erx .ant-upload-list-item {
      float: left;
      width: 200px;
      margin-right: 8px;
    }
.uploadContent__dZ4bB {
  height: auto;
  background-color: #F7F7F9;
}
.ImageUploader__tEcgU {
  border-radius: 4px;
  position: relative;
  background-color: #ffffff;
  -webkit-box-shadow: 0 2px 4px 0 #E8ECEF;
          box-shadow: 0 2px 4px 0 #E8ECEF;
}
.ImageUploader__tEcgU .ant-upload.ant-upload-drag {
      border-radius: 0;
      padding: 0;
      border: solid 1px #D7DBE2 !important;
      background-color: #FAFAFA;
      width: 146px;
      height: 146px;
    }
.ImageUploader__tEcgU .ant-upload-disabled {
      cursor: auto;
      cursor: initial;
    }
.ImageUploader__tEcgU .ant-upload-drag-hover {
      background-color: #EDF1FE !important;

      -webkit-transition: background-color .2s ease-in-out;

      transition: background-color .2s ease-in-out;
    }
.ImageUploader__tEcgU .ant-upload-drag-hover .ant-upload-drag-container {
        background-color: #EDF1FE !important;
        -webkit-transition: background-color .2s ease-in-out;
        transition: background-color .2s ease-in-out;
      }
.ImageUploader__tEcgU.error__5ygBq:not(.disabled__FjIFD) {
    border: dashed 1px #ff4d52;
  }
.ImageUploader__tEcgU .dragUploader__pQ5Uc.ant-upload.ant-upload-drag {
    position: relative;
    margin-bottom: 12px;
    min-height: 350px;
    height: 350px;
    width: 100%;
    border: none !important;
  }
.ImageUploader__tEcgU .dragUploader__pQ5Uc.ant-upload.ant-upload-drag.hide__rfShs {
      display: none;
    }
.ImageUploader__tEcgU .dragUploader__pQ5Uc.ant-upload.ant-upload-drag .uploadButton__kqnkP {
      font-size: 18px;
      font-size: 1.125rem;
      color: #5478FC;
      margin-bottom: 4px;
    }
.ImageUploader__tEcgU .dragUploader__pQ5Uc.ant-upload.ant-upload-drag .uploadButton__kqnkP [data-role="y-icon"]>svg {
        margin-right: 8px;
      }
.ImageUploader__tEcgU .dragUploader__pQ5Uc.ant-upload.ant-upload-drag .ant-progress-inner {
        border-radius: 0;
      }
.ImageUploader__tEcgU .dragUploader__pQ5Uc.ant-upload.ant-upload-drag .ant-progress-inner .ant-progress-bg {
          height: 5px !important;
        }
.ImageUploader__tEcgU .uploadStatus__qux-E {
    font-size: 16px;
    font-size: 1rem;
    text-align: center;
    color: #4a4a4a;
  }
.ImageUploader__tEcgU .info__8LFZc {
    font-size: 12px;
    font-size: 0.75rem;
    color: #9b98ae;
  }
.ImageUploader__tEcgU .info__8LFZc .em__GAysj {
      color: #27272b;
      font-weight: bold;
    }
.ImageUploader__tEcgU .panel__uji-t {
    padding: 12px 24px;
  }
.ImageUploader__tEcgU .panel__uji-t ul {
      list-style-type: disc;
      list-style-position: inside;
    }
.ImageUploader__tEcgU .panel__uji-t ul li {
        line-height: 20px;
        line-height: 1.25rem;
      }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.UploadButton__d6cFB,
.ErrorUploadButton__FE6ed {
  background-color: #ffffff !important;
  cursor: pointer !important;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  width: 100%;
}
.ErrorUploadButton__FE6ed .message__0MyJA {
    padding: 10px 12px 0px 12px;
    text-align: center;
    line-height: 18px;
    line-height: 1.125rem;
  }
.ErrorUploadButton__FE6ed [data-role="y-icon"]>svg {
    fill: #ff4d52 !important;
  }
.UploadButton__d6cFB {
  border: dashed 1px #b9bdc5;
}
.UploadButton__d6cFB [data-role="y-icon"]>svg {
    fill: #5478fc !important;
  }
.UploadList__XeHr4 {
  display: block;
  overflow: auto;
  padding: 38px;
  padding-bottom: calc(38px - 8px);
}
.UploadListItem__-FUnC {
  position: relative;
  width: 146px;
  height: 146px;
  border: solid 1px #D7DBE2;
  margin-right: 8px;
  margin-bottom: 8px;
  float: left;
}
/* 第五個去除margin-right以符合邊界 */
.UploadListItem__-FUnC:nth-child(5n) {
    margin-right: 0px;
  }
.UploadListItem__-FUnC:hover,
  .UploadListItem__-FUnC.is-dragging {
    cursor: move;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  }
.UploadListItem__-FUnC.hide {
    display: none;
  }
.UploadListItem__-FUnC.is-disabled {
    cursor: not-allowed;
  }
.UploadListItem__-FUnC.is-dragging .deleteButton__hltc2 {
      opacity: 0;
    }
.UploadListItem__-FUnC.upload-list-item-error {
    border-color: #ff4d52;
  }
.UploadListItem__-FUnC .progress__iWWrY {
    position: absolute;
    bottom: -8px;
    width: 100%;
    z-index: 1;
  }
.UploadListItem__-FUnC .progress__iWWrY .ant-progress-inner {
        background-color: #d8d8d8 !important;
        border-radius: 0px !important;
      }
.UploadListItem__-FUnC .progress__iWWrY .ant-progress-bg,
      .UploadListItem__-FUnC .progress__iWWrY .ant-progress-success-bg {
        background-color: #4062FC !important;
      }
.UploadListItem__-FUnC .deleteButton__hltc2 {
    position: absolute;
    width: 30px;
    height: 30px;
    padding: 0px;
    right: 8px;
    bottom: 8px;
    opacity: 0.5;
    border-radius: 2px;
    background-color: #000000 !important;
    color: #fff !important;
  }
.UploadListItem__-FUnC .deleteButton__hltc2:hover {
      opacity: 0.4;
    }
.UploadListItem__-FUnC .deleteButton__hltc2 [data-role="y-icon"]>svg {
      fill: #fff !important;
    }
.UploadListItemInfo__T3TrA {
  width: 100%;
  height: 100%;
}
.UploadListItemInfo__T3TrA .infoTag__O0zib {
    position: absolute;
    left: 12px;
    top: 12px;
    color: #fff;
    border-radius: 11px;
    z-index: 10;
    cursor: auto;
    cursor: initial;
  }
.UploadListItemInfo__T3TrA .thumbnail__oLNWA {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
.UploadListItemInfo__T3TrA .uploadStatus__Gdzfd {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: -0.3px;
    letter-spacing: -0.01875rem;
    color: #4a4a4a;
  }

.productsTable__Tj2K2 {
    padding: 8px;
}

.productsTableHeader__9uXro {
    padding: 12px 24px;
    background-color: #f4f7ff;
    -webkit-box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.1);
            box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.1);
}

.productsTableBody__uiMEt {
    padding: 12px 24px;
}

.avatarUploader__sm4Hd .ant-upload.ant-upload-select.ant-upload-select-picture-card {
        margin-top: 8px;
    }
.datepicker__KIQDh div[data-role="help-block"] {
    top: 44px;
  }

.disclaimerContent__0f7OL {
  list-style-type: disc;
}
.antdDatePicker__DhGTw {
  width: 230px;
}

  .antdDatePicker__DhGTw .anticon {
      color: #979ba7;
    }

  .antdDatePicker__DhGTw .anticon >svg {
        width: 18px !important;
        height: 18px !important;
      }
.panelHeader__QedfR {
  padding: 4px;
  font-size: 12px;
  font-size: 0.75rem;
}

.iconHolder__qfUzs {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #5478fc;
  padding: 8px;
  border-radius: 50%;
}

.title__NEqFk {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 500;
  margin-left: 12px;
}

.formArea__63cEw {
  margin: 12px 0;
}

.formArea__63cEw input.ant-input {
      width: 100%;
    }

.formArea__63cEw div[data-role="y-menu-select-picker"] {
    min-width: 0;
  }

.formArea__63cEw div[data-role="help-block"] {
    top: 58px;
  }

div.labelWithIcon__vqt0b {
  /* fix default form label with icon will have left px */
  left: 0 !important;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.pageErrorWrap__fh9VM {
  padding: 3.000em;
  text-align: center;
}
.contentImg__UeJ9n {
  width: 300px;
  height: 300px;
  display: block;
  background-image: url(https://s.yimg.com/ja/ap/supplier/shp_maintenance.gif);
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin: 30px auto 0px auto;
}
.contentTitle__hRtAL {
  text-align: center;
  font-size: 32px;
  font-size: 2rem;
  color: #3f3f3f;
  margin-top: 32px;
  font-weight: bold;
  padding: 0px 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.contentSubTitle__OaDP7 {
  text-align: center;
  font-size: 24px;
  font-size: 1.5rem;
  color: #3f3f3f;
  margin-top: 12px;
  padding: 0px 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.ExpiringItems__9BAOR {

}
.info__gICRi {
  float: right;
}
.exportButton__Fmq8- {
  margin-left: 24px;
}
.header__qtd0F {
  padding: 4px 20px 4px;
  font-size: 14px;
  font-size: 0.875rem;
  color: #26282a;
}
.paginationArrow__5x--X {
  font-size: 18px;
  font-size: 1.125rem;
  vertical-align: text-top;
}
.pageCount__SPsFW {
  display: inline-block;
}
.availableDaysInfo__HQrAc {
  display: inline-block;
  margin-left: 4px;
  cursor: help;
}
.availableDaysImg__IXf-8 {
  width: 500px;
}
.productList__46J9t {
  max-width: 100%;
  width: 100%;
}
.productList__46J9t .productName__Hg9Cp {
    font-weight: 500;
    text-align: left;
    white-space: normal;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.UnsalableItems__oC8la {

}
.info__kBOIP {
  float: right;
}
.paginationArrow__h077O {
  font-size: 18px;
  font-size: 1.125rem;
  vertical-align: text-top;
}
.pageCount__QZWgz {
  padding: 4px 20px 4px;
  font-size: 14px;
  font-size: 0.875rem;
  color: #26282a;
}
.sellAvblDaysInfo__vimOO {
  display: inline-block;
  margin-left: 4px;
}
.sellAvblDaysImg__ISOW9 {
  width: 500px;
}
.productList__cQxKz {
  max-width: 100%;
  width: 100%;

}
.productList__cQxKz .productName__lCDnl {
    font-weight: 500;
    text-align: left;
    white-space: normal;
  }
.UnsalableThresholdSelect__UFzmG {
  display: inline-block;
  margin-left: 48px;
}
.UnsalableThresholdSelect__UFzmG > span {
    vertical-align: middle;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #26282a;
  }
.exportButton__reQ1m {
  margin-left: 24px;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.BestSelling__T8bjW .info__OMSKH {
    float: right;
  }
.BestSelling__T8bjW .tips__HHPB5 {
    margin-left: 4px;
    color: #979ba7;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: normal;
  }
.BestSelling__T8bjW .pageCount__5AS3- {
    width: 124px;
    display: inline-block;
  }
.BestSelling__T8bjW .Select .Select-control .Select-value,
        .BestSelling__T8bjW .Select .Select-control .Select-placeholder {
          padding-left: 10px;
          padding-right: 10px;
          line-height: 20px;
          line-height: 1.25rem;
        }
.BestSelling__T8bjW .exportButton__M9gT5 {
    margin-left: 24px;
  }
.bestSellingTitle__lwOkF {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.bestSellingExportBtn__uANjn {
  margin-left: 15px;
}
.customTips__mQ7Bj,
.customBestSellingExportBtn__fWhXA {
  position: relative;
  top: 200px;
  left: 29.5%;
  z-index: 1;
}
.tableAction__ICkOt {
  margin: 16px 0 14px;
}
  .tableAction__ICkOt .tips__9JG6r {
    font-size: 14px;
    font-size: 0.875rem;
  }
.Section__rgXwD {
  margin: 0 12px;
}
  .Section__rgXwD .title__ocIOd {
    margin-bottom: 12px;
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 500;
    color: #26282a;
  }
.exportBtn__oLKL- {
  display: inline-block;
  margin: 0 4px 0 24px;
}

.tips__gZcmq {
  font-size: 14px;
  font-size: 0.875rem;
  display: inline;
}

.tableAction__qmteT {
  margin: 16px 0 14px;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
/* alter html background-color */
.FlowController__3h4y6 {
  margin-top: 20px;
  margin-bottom: 40px;
}
.CTA__lbbcn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding-top: 20px;
}
.CTA__lbbcn .saveAsDraftBtn__h3TUB {
    margin-right: 12px;
  }
.CTA__lbbcn .CTATip__p4FJC {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    text-align: right;
    margin-top: 10px;
  }
.FormFixedTop__4ZRNF {
  z-index: 500;
  background-color: #EAECF0;
}
.FormFixedTop__4ZRNF .fixedSecTop__3ly7m {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
            align-content: stretch;
  }
.FormFixedTop__4ZRNF .fixedSecTop__3ly7m:last-child {
      padding-bottom: 10px;
    }
.FormFixedTop__4ZRNF .fixedSecTop__3ly7m+ul {
      margin-top: 10px;
    }
.FormFixedTop__4ZRNF .fixedSecButtons__u309U button+button {
      margin-left: 12px;
      margin-right: 0px;
    }
.FormFixedTop__4ZRNF ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.1);
            box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.1);
    border: solid 1px #D7DBE2;
    background-color: #ffffff;
  }
.FormFixedTop__4ZRNF li {
    min-height: 50px;
    height: 50px;
    position: relative;
    padding: 14px;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    -webkit-transition: 0.2s all linear;
    transition: 0.2s all linear;
    min-width: 200px;
    width: auto;
    cursor: pointer;
    text-align: center;
  }
.FormFixedTop__4ZRNF li a {
      color: #999aaa;

    }
.FormFixedTop__4ZRNF li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 4px solid #D7DBE2;
    -webkit-transition: 0.2s all linear;
    transition: 0.2s all linear;
  }
.FormFixedTop__4ZRNF li:hover a {
      color: #26282a;
    }
.FormFixedTop__4ZRNF li.active {
    background: #DDE5FE;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    z-index: 1;
  }
.FormFixedTop__4ZRNF li.active a {
      color: #26282a;
    }
.FormFixedTop__4ZRNF li.active:before {
      border-bottom-color: #5478fc;
    }
.ProductListingCompletion__05NNl .completionContent__XePQs {
    text-align: center;
    color: #26282a;
  }
    .ProductListingCompletion__05NNl .completionContent__XePQs .proposalIdSection__4kF-i {
      margin: 20px;
    }
    .ProductListingCompletion__05NNl .completionContent__XePQs .proposalIdSection__4kF-i h1 {
        font-size: 24px;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 40px;
        line-height: 2.5rem;
      }
    .ProductListingCompletion__05NNl .completionContent__XePQs .proposalIdSection__4kF-i h2 {
        font-size: 16px;
        font-size: 1rem;
        font-weight: 500;
      }
    .ProductListingCompletion__05NNl .completionContent__XePQs p {
      color: #9999ab;
      font-size: 16px;
      font-size: 1rem;
      line-height: 1.63;
      font-weight: normal;
      margin: 20px;
    }
    .ProductListingCompletion__05NNl .completionContent__XePQs .expireDate__xtvRz {
      color: #26282a;
      font-weight: 600;
    }
    .ProductListingCompletion__05NNl .completionContent__XePQs .hyperlink__cu7Ra {
      color: #5478fc;
      font-weight: 500;
    }
  .ProductListingCompletion__05NNl [data-role="will-clone-proposal-checkbox"] {
    margin: 20px;
  }
  .ProductListingCompletion__05NNl [data-role="will-clone-proposal-checkbox"] span {
      font-size: 16px !important;
      font-size: 1rem !important;
      color: #9999ab !important;
    }
  .ProductListingCompletion__05NNl .composeNewProposal__Xg3Ms {
    background-color: #5478fc;
    margin: 0 auto;
    display: block;
  }
  .ProductListingCompletion__05NNl .clipBoardBlock__6FDe6 {
    display: inline-block;
    margin-top: 48px;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.ItemIdClipBoard__HRTPB {
  width: 400px;
  height: 211px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px 0 #e0e4e9;
          box-shadow: 0 1px 2px 0 #e0e4e9;
  background-color: #ffffff;
}
.titleRegion__EQFTp {
  width: 400px;
  height: 52px;
  background-color: #f8f8fa;
  border-radius: 4px;
  position: relative;
}
.titleName__Ajzpd {
  display: inline-block;
  position: absolute;
  left: 24px;
  top: 16px;
  font-family: FreeSans,
Arimo,
"Droid Sans",
Arial,
Helvetica,
sans-serif,
"Microsoft JhengHei";
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #464e56
}
.totalInfo__nK58k {
  display: inline-block;
  position: absolute;
  left: -195px;
  color: #979ba7;
  font-size: 14px;
  font-size: 0.875rem;
}
.detailInfoTitle__OATZ0 {
  display: inline-block;
  position: absolute;
  right: 24px;
  top: 18px;
  font-family: FreeSans,
Arimo,
"Droid Sans",
Arial,
Helvetica,
sans-serif,
"Microsoft JhengHei";
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #5478fc;
}
.productContent__xy0PK {
  width: 400px;
  height: 120px;
  position: relative;
}
.copyButton__3zpq5 {
  display: inline-block;
  position: absolute;
  top: 96%;
  left: 48%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.multipleItemIds__SHrNV {
  width: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  word-break: break-all;
  font-size: 16px;
  font-size: 1rem;
  position: relative;
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
}
.singleItemId__T5BGy {
  width: 106px;
  height: 26px;
  font-size: 24px;
  font-size: 1.5rem;
  display: inline-block;
  position: absolute;
  top: 42%;
  left: 48%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.itemIdWrapper__2H0zZ {
  display: inline-block;
  text-align: left;
}
.tableTitle__RRaff {
  width: 108px;
  height: 20px;
  font-size: 16px;
  font-size: 1rem;
  color: #979ba7;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.anchorLink__YaJQ0 {}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.Basic__BhGPG {}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.ProposalInfo__XGr0P .applicant__Bx4Re {
    width: 220px;
    height: 40px;
    border-radius: 3px;
    background-color: #ffffff;
  }
.ProposalInfo__XGr0P .subStationIdSelect__u8Sn5 {
    width: 100%;
  }
.ProposalInfo__XGr0P .deadlineLabel__7qNzn {
    font-size: 16px;
    font-size: 1rem;
    color: #27282a;
  }
.ProposalInfo__XGr0P .deadlinePickr__1tjnI {
    width: 230px;
    margin: 0px 10px;
  }
.ProposalInfo__XGr0P .deadlinePickr__1tjnI input {
      border-radius: 2px;
      -webkit-box-shadow: none;
              box-shadow: none;
      border: solid 1px #e0e4e9;
    }
.ProposalInfo__XGr0P .centerAlignContent__nk43w {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
.ProposalInfo__XGr0P .centerAlignContent__nk43w.readOnly__T275e {
      line-height: 40px;
      line-height: 2.5rem;
    }
.ProposalInfo__XGr0P .note__rjNs5 {
    display: block;
    width: 100%;
  }
.ProposalInfo__XGr0P .note__rjNs5 [data-role="textarea-field"] {
      width: 100%;
      height: 110px;
    }
.ProposalInfo__XGr0P .disclaimerButton__h9JgG {
    color: #d0021b;
  }
.ProposalInfo__XGr0P .disclaimer__7IeiI {
    width: 950px;
    margin: auto 0px 0px auto;
    background-color: #FFF0F1;
    padding: 12px 24px;
    font-size: 12px;
    font-size: 0.75rem;
    color: #989ba8;
  }
.ProposalInfo__XGr0P .disclaimer__7IeiI >p {
      margin-top: 4px;
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 1.58;
    }
.ProposalInfo__XGr0P .disclaimer__7IeiI .collapseButton__QpSY- {
      min-width: 70px;
      width: auto;
      color: #fa1229;
    }
.ProposalInfo__XGr0P .disclaimer__7IeiI .collapseButton__QpSY-[class*='disabled'] [data-role='selection'] {
          background-color: transparent;
        }
.ProposalInfo__XGr0P .disclaimer__7IeiI .collapseButton__QpSY- [data-role='selection'] {
        border: none;
        height: inherit;
        background-color: #FFF0F1;
        line-height: inherit;
      }
.ProposalInfo__XGr0P .disclaimer__7IeiI .collapseButton__QpSY- [data-role='selected-value'] {
        font-size: 12px !important;
        font-size: 0.75rem !important;
        padding: 0px !important;
        line-height: 20px;
        line-height: 1.25rem;
      }
.ProposalInfo__XGr0P .disclaimer__7IeiI .collapseButton__QpSY- [data-role='arrow-zone'] {
        line-height: 20px;
        line-height: 1.25rem;
        width: 20px !important;
      }
.ProposalInfo__XGr0P .disclaimer__7IeiI .collapseButton__QpSY- [data-role='arrow-zone'] [data-role="y-icon"]>svg {
          width: 14px !important;
          height: 14px !important;
        }

.MultiLineText__FnNMJ {
  word-break: break-word;
  list-style-type: disc;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
/**
 * shared styles to be composes
 */
.lineClamp__PJtAS {
  position: relative;
  display: block;
  font-size: 0.938em;
  line-height: 1.33;
  max-height: 2.66em;
  overflow: hidden;
}
.lineClamp__PJtAS:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 1.33em;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(80%, rgba(255, 255, 255, 1)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}
@supports (-webkit-line-clamp: 2) {
  .lineClamp__PJtAS {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .lineClamp__PJtAS:after {
    display: none;
  }
}
/* allocation */
.fullWidth__-6PQn {
  width: 100%;
}
.center__T8PrS {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* make element size relative to content */
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* vertical alignment of contents */
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}
.flexAlignCenter__4Pol- {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* make element size relative to content */
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* vertical alignment of contents */
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}
.pullLeft__-88O8 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.pullRight__hMnqo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.overflowEllipsis__YwI9S {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.typeMark__2wAwU {
  background-color: #fff;
  border-radius: 2px;
  font-size: 0.750em;
  line-height: 1;
  padding: 0.250em 0.333em;
}
.typeMarkBasic__NsAcb,
.typeMarkBargain__UOINY {
  border: 1px solid #0078ff;
  color: #0078ff;
}
.typeMarkBidding__qLDyI {
  border: 1px solid #fe8c13;
  color: #fe8c13;
}
.typeMarkInactive__OwSr- {
  border: 1px solid #9f9f9f;
  color: #9f9f9f;
}
/**
 * button: compose size & type to construct your button
 * https://app.zeplin.io/project/58cf9738292af10e391ceb34/screen/5938c144da4506e406f641f7
 * 1. base button
 * 2. size class
 * 3. type class
 * 4. composed button
 */
/* 1. base */
.button__F9Bew {
  border: 1px solid transparent;
  border-radius: 3px;
  font-weight: 500;
  line-height: 1;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.button__F9Bew:disabled {
  cursor: not-allowed;
}
.button__F9Bew:focus {
  outline: none;
}
.button__F9Bew+.button__F9Bew {
  margin-right: 12px;
}
/* 2. size */
.actionButton__MPzQV {
  font-size: 1.000em;
  padding: 0.875em 0;
  text-align: center;
  width: 100%;
}
.largeButton__DT5KX {
  font-size: 16px;
  font-size: 1rem;
  padding: 0.688em 2.000em 0.688em 2.000em;
}
.mediumButton__mf-D- {
  font-size: 0.875em;
  padding: 0.688em 2.000em 0.688em 2.000em;
}
.smallButton__oeW3W {
  font-size: 0.750em;
  padding: 0.167em 1.000em 0.083em 1.000em;
}
/* 3. type: primary */
.primaryButtonType1__aIWrr {
  background-color: #ffffff;
  color: #3abfba;
}
.primaryButtonType1__aIWrr:hover {
  background-color: #32a7a3;
}
.primaryButtonType2__Ynw3- {
  background-color: #fcda19;
  color: #000000;
}
.primaryButtonType2__Ynw3-:hover {
  background-color: #f1c920;
}
.primaryButtonTypeBlue__2bIvD {
  background-color: #5478fc;
  color: #fff;
}
.primaryButtonTypeBlue__2bIvD:hover {
  background-color: #4868DB;
}
.primaryButtonTypePurple__0ciDL {
  background-color: #ab8cc1;
  color: #fff;
}
.primaryButtonTypePurple__0ciDL:hover {
  background-color: #a669df;
}
.primaryButtonTypeBid__YN0Xo {
  background-color: #ff8a00;
  color: #fff;
}
.primaryButtonTypeBid__YN0Xo:hover {
  background-color: #e17700;
}
.primaryButtonType1__aIWrr:disabled,
.primaryButtonType2__Ynw3-:disabled {
  background-color: #b9bdc5;
  color: #ffffff;
}
/* 3. type: secondary */
.secondaryButtonType1__1ZTqv {
  border: 1px solid #3abfba;
  background-color: #ffffff;
  color: #3abfba;
}
.secondaryButtonType1__1ZTqv:hover {
  border-color: #32a7a3;
  color: #39aba7;
}
/* OUTLINED button */
.outlinedButtonType__vp0wr {
  border: solid 1px #5478fc;
  border-radius: 3px;
  background-color: #ffffff;
  color: #5478fc;
}
.outlinedButtonType__vp0wr:hover {
  background-color: #ffffff;
  border-color: #4868db;
  color: #4868db;
}
.secondaryButtonType1__1ZTqv:disabled,
.outlinedButtonType__vp0wr:disabled {
  background-color: #b9bdc5;
  color: #ffffff;
}
/* page composes */
/* dashboard workspace fixed height */
.dashboardFixedHeight__Dpq-c {
  min-height: 691px;
  height: auto;
}
/* fixed proposal content */
.proposalContent__xoAI6 {
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.proposalButtonType__dlpDo {
  font-size: 14px;
  font-size: 0.875rem;
  border: solid 1px #e0e4e9;
  border-radius: 2px;
  background-color: #ffffff;
  color: #979ba7;
  padding: 8px 30px;
}
.proposalButtonType__dlpDo:hover {
  background-color: rgba(224, 228, 233, 0.5);
}
.proposalButtonType__dlpDo:disabled,
.proposalButtonType__dlpDo:disabled {
  background-color: #E0E4E9;
  color: #E0E4E9;
}
.resetMargin__ZU1JD {
  margin-top: 4px !important;
}
.contentLabel__cqY-r {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  line-height: 40px;
  line-height: 2.5rem;
  height: 40px;
  width: 144px;
  font-size: 16px;
  font-size: 1rem;
  color: #28272d;
}
.onShelvedTs__R-wAw,
.offShelvedTs__nEbvz {
  width: 230px;
  height: 40px;
}
.onShelvedTsTimepicker__G0HDP,
.offShelvedTsTimepicker__gADpi {
  margin-left: 12px;
}
.onShelvedTsTimepicker__G0HDP input:disabled, .offShelvedTsTimepicker__gADpi input:disabled {
    color: #979ba7;
    background-color: #f1f1f5;
    cursor: not-allowed;
  }
.hyperLink__EUMRe {
  margin-left: 12px;
}
.largeVolumeCheckboxGroup__WIHBX {
  margin: 8px 0px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.largeVolumeCheckboxGroup__WIHBX [data-role="help-block"] {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    -webkit-box-ordinal-group: 100;
    -webkit-order: 99;
        -ms-flex-order: 99;
            order: 99;
  }
.largeVolumeLabel__P3RPq .appendix__K9i8Y {
    font-size: 12px;
    font-size: 0.75rem;
    text-align: right;
    color: #9b9b9b;
  }
.preserveDaysTips__YHz9C {
  margin-bottom: 4px;
}
.advanceInput__Yb8f- input[name="listing.featureTitle"] {
    width: 540px;
  }
.customizedOrderShipDateAfterPlacedBlock__0TJNn,
.preOrderExpectedShipDateBlock__zPmiG {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #26282a;
}
.customizedOrderShipDateAfterPlacedBlock__0TJNn .customizedOrderShipDateAfterPlaced__uF0eH {
    margin: 0px 12px;
  }
.customizedOrderShipDateAfterPlacedBlock__0TJNn .customizedOrderShipDateAfterPlaced__uF0eH .ant-input {
      width: 50px;
    }
.ProductInfo__iRGTZ .installTips__adsHr {
    color: #4a4a4a;
    width: 100%;
    background-color: #f6f8ff;
    padding: 1rem 2rem;
    margin-top: 8px;
  }
.ProductInfo__iRGTZ .installTips__adsHr >p {
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 1.58;
      color: #979ba7;
    }
.ProductInfo__iRGTZ .isNeedRecycleFormRow__0FxQh {
    margin-top: 2px;
  }
.inputField__D2OKd input[type=text] {
    width: 433px;
  }
.productShipType__Xx5b0 label {
    margin-right: 15px !important;
  }
.dateField__2KvSs.ant-picker{
  width: 433px;
}
.eVoucherFieldFormRow__AuhDV{
  width: 100%;
}
.endDateTime__oPa5i [class^=content] {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
  }
.timeTip__lV1kO {
  font-size: 14px;
  font-size: 0.875rem;
  padding-left: 15px;
  color: #fa1229;
}
.ProductSizeFields__kPn1G {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

    .ProductSizeFields__kPn1G input[type=text] {
        width: 250px;
    }

    .ProductSizeFields__kPn1G .ant-input-number {
            width: 144px;
        }

    .ProductSizeFields__kPn1G .ant-input-number+.ant-input-number:not(:hover) {
                border-left-color: transparent;
            }
.PreserveDaysFields__3woyY {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;


}

  .PreserveDaysFields__3woyY input[type=text] {
      width: 80px;
  }

  .PreserveDaysFields__3woyY [class^="InputField"]:not([data-role="product-preserve-days"]) .ant-input-group-addon {
        border-radius: 0;
        border-right: none;
      }
.resetMargin__WMgdg {
    margin-top: 4px !important;
}

.preserveDaysBlock__Td8r9 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    color: #26282a;
    font-size: 14px;
    font-size: 0.875rem;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.Spec__tXPBe .imageBlock__araUD {
    padding-right: 40px;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.AttributeInfo__bUhio {}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.ProductAttribute__EESdm {
  width: 100%;
}
.info__d9IEs {
  display: inline-block;
  margin-left: 6px;
}
.tableHead__TXby- {
  font-size: 14px;
  font-size: 0.875rem;
  color: #26282a;
}
.tableHead__TXby-+.tableHead__TXby- {
    margin-top: 6px;
  }
.tableHead__TXby- .sub__pLWzL {
    margin-left: 4px;
    color: #979ba7;
  }
.withSpecLevelRadio__1F4Xg {
  margin-bottom: 16px;
}
.withSpecLevelRadio__1F4Xg .ant-radio-wrapper {
      font-size: 16px;
      font-size: 1rem;
      margin-right: 24px;
    }
.withSpecLevelRadio__1F4Xg .ant-radio-wrapper .ant-radio {
        vertical-align: text-bottom;
      }
.linkButton__NWO6E {
  height: 20px;
  margin: 12px 0px 0px 0px;
  padding: 0;
}
.linkButton__NWO6E:disabled [data-role="y-icon"]>svg {
      fill: #979ba7 !important;
    }
.linkButton__NWO6E [data-role="y-icon"]>svg {
    fill: #5478fc !important;
  }
.AttributeSpecSelector__EqVKc {}
.SpecMenuSelectorArrayField__bCo-B {
  position: relative;
  margin-bottom: 24px;
}
.uploadImgTip__QkfNb[class*="label"] {
  margin: 8px 0;
  color: #fa1229;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.SpecMenuSelector__IXBY7 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  position: relative;
}
.SpecMenuSelector__IXBY7+.SpecMenuSelector__IXBY7 {
    margin-top: 12px;
  }
.SpecMenuSelector__IXBY7 .paddingRight__k1VwS {
    margin-right: 38px;
  }
.SpecMenuSelector__IXBY7 .settingButton__nlv-E {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 4px;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
.SpecMenuSelector__IXBY7 .settingButton__nlv-E button {
      padding: 0;
      margin: 0;
      color: #5478fc;
      background-color: #fff;
    }
.SpecMenuSelector__IXBY7 .attributeSelectBlock__9abdE {}
.SpecMenuSelector__IXBY7 .attributeItemSelectBlock__WWl-d {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-left: 12px;
  }
.SpecMenuSelector__IXBY7 .attributeItemSelectBlock__WWl-d [data-role='y-menu-select'] {
      width: 100%;
    }
.SpecMenuSelector__IXBY7 [data-role='y-menu-select-picker'] {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
.deleteButton__5s-DI {
  color: #979ba7 !important;
  bottom: 0px;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  border: solid 1px #e0e4e9;
  background-color: #fff;
  margin: 6px;
  padding: 0px;
}
.deleteButton__5s-DI:hover {
    border-color: #e0e4e9;
  }
.deleteButton__5s-DI [data-role="y-icon"]>svg {
    fill: #979ba7 !important;
  }
.attributeSelect__Y8Bg- {
  width: 250px;
}
.attributeSelectPopup__uLTTq {
  width: 250px;
}
.attributeItemSelect__HQaPx {
  width: 100%;
  min-width: 0;
  min-width: initial;
}
.attributeItemSelect__HQaPx [data-role='y-menu-select-picker'] {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
.attributeItemSelect__HQaPx [data-role='y-menu-select-picker'][data-is-disabled="true"]>[data-role="selection"] {
      background-color: #fff;
    }
.attributeItemSelectPopup__na5lU {
  width: 100%;
}
.attributeItemSelectPopup__na5lU .y-menu {
      margin-top: 12px;
      margin-bottom: 8px;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-align-content: baseline;
          -ms-flex-line-pack: baseline;
              align-content: baseline;
    }
.attributeItemSelectPopup__na5lU .y-menu,
    .attributeItemSelectPopup__na5lU .y-menu-filter {
      padding-left: 24px;
      padding-right: 45px;
    }
.attributeItemSelectPopup__na5lU .y-menu-item {
      min-height: 23px;
      max-height: 40px;
      height: 40px;
      padding: 0;
      width: 148px;
      margin-right: 8px;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
          -ms-flex-align: start;
              align-items: flex-start;
    }
.attributeItemSelectPopup__na5lU .y-menu-item:hover {
        color: #5478fc !important;
        background: none !important;
      }
.attributeItemSelectPopup__na5lU .y-menu-item [data-role='attribute-item-checkbox'] {
        min-height: 23px;
        height: 40px;
      }
.attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-group .ant-checkbox-inner, .attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-wrapper .ant-checkbox-inner {
          border-width: 1px;
        }
.attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-group .ant-checkbox-inner:before, .attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-wrapper .ant-checkbox-inner:before {
            top: 4px;
            left: 8px;
          }
.attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-group .ant-checkbox-inner:after, .attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-wrapper .ant-checkbox-inner:after {
            top: 8px;
            left: 4px;
          }
.attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-group span.ant-checkbox+*, .attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-wrapper span.ant-checkbox+* {
          padding: 0;
        }
.attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-group >span.ant-checkbox, .attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-wrapper >span.ant-checkbox {
          float: left;
        }
.attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-group >span:not(.ant-checkbox), .attributeItemSelectPopup__na5lU .y-menu-item .ant-checkbox-wrapper >span:not(.ant-checkbox) {
          width: 126px;
          float: left;
          top: 4px;
          left: 28px;
          position: absolute;
  /* Fallback for non-webkit browsers.
  Fallback does not render ellipsis. */
  overflow: hidden;
  max-height: 40px;
  white-space: normal;

  /* Webkit solution for multiline ellipsis */
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* Solution for Opera */
  text-overflow: -o-ellipsis-lastline;
        }
.linkButton__AOzLg {
  height: 20px;
  margin: 12px 0px 0px 0px;
  padding: 0;
}
.linkButton__AOzLg [data-role="y-icon"]>svg {
    fill: #5478fc !important;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.SpecSettingModal__BnJJJ .y-modal-body {
      padding: 32px 40px 24px 40px;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.editorSection__CyC3V {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-bottom: 24px;
  padding-left: 30px;
}
.editorSection__CyC3V .header__pEW45 ul {
    list-style-type: disc;
  }
.editorSection__CyC3V .tip__Xywmq {
    color: #27282a;
    margin-bottom: 8px;
    font-size: 14px;
    font-size: 0.875rem;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
.editorSection__CyC3V .info__X9G6Q {
    position: absolute;
    left: -10px;
    fill: #ff4d52 !important;
    margin-right: 8px;
  }
.editButton__Q4tt5 {
  width: 105px;
  color: #6371ff;
}
.editButton__Q4tt5[class*='disabled'] [data-role='selection'] {
      background-color: #fff;
    }
.editButton__Q4tt5 [data-role='selection'] {
    border: none;
    height: inherit;
    line-height: inherit;
  }
.editButton__Q4tt5 [data-role='selected-value'] {
    font-size: 14px !important;
    font-size: 0.875rem !important;
  }
.editButton__Q4tt5 [data-role='arrow-zone'] {
    line-height: 20px;
    line-height: 1.25rem;
  }
.productName__J-gK3 input {
    width: 100%;
  }
.modalInputField__olxe0 {
  width: 450px;
}
.modalInputField__olxe0 input[type='text'] {
    width: 100%;
    height: 40px;
    outline: 0;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.List__J1NWn {
  max-height: 50vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.Item__CXlF- {
  outline: 0;
  position: relative;
  width: 100%;
  padding: 8px 0px;
  padding-left: 30px;
  cursor: all-scroll !important;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.Item__CXlF- input[type='text'] {
    width: 450px;
  }
.Item__CXlF- .mover__Oqa-O {
    position: absolute;
    left: 4px;
    top: 16px;
    opacity: 1;
  }
.Item__CXlF-:hover .mover__Oqa-O {
      opacity: 0.7;
    }
.Item__CXlF-.dragging__-H3XQ {
    width: 593px !important;
    -webkit-user-select: 'none';
       -moz-user-select: 'none';
        -ms-user-select: 'none';
            user-select: 'none';
    background-color: #f8f8fa;
    -webkit-box-shadow: 0 1px 2px 0 #E0E4E9;
            box-shadow: 0 1px 2px 0 #E0E4E9;
    border: solid 1px #E0E4E9;
    padding: 8px 8px 8px 46px;
  }
.Item__CXlF-.dragging__-H3XQ .mover__Oqa-O {
      opacity: 1;
      left: 16px;
    }
.Item__CXlF-.dragging__-H3XQ .deleteButton__MOHHR {
      margin-left: 8px;
    }
.Item__CXlF-.resettable__0z4vU .modalInputField__aj5r8 input[type='text'] {
      padding-right: calc(60px + 12px);
    }
.Item__CXlF- .resetButton__Ip8jP,
  .Item__CXlF- .deleteButton__MOHHR {
    width: 30px;
    height: 30px;
    padding: 0px;
    top: 12px;
    background-color: #fff;
  }
.Item__CXlF- .resetButton__Ip8jP {
    width: 60px;
    position: absolute;
    left: 408px;
    background-color: transparent;
  }
.Item__CXlF- .deleteButton__MOHHR {
    color: #979ba7 !important;
    border-radius: 2px;
    border: solid 1px #e0e4e9;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    left: 540px;
    margin-left: 0px;
  }
.Item__CXlF- .deleteButton__MOHHR [data-role="y-icon"]>svg {
      fill: #979ba7 !important;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.textInputTag__J5J9J {
  font-size: 16px;
  font-size: 1rem;
  height: 40px;
  line-height: 40px;
  line-height: 2.5rem;
  width: 100%;
  border-radius: 3px;
  background-color: #ffffff;
  border: solid 1px #e0e4e9;
  display: table;
  border-spacing: 0;
  border-collapse: separate;
  outline: 0;
  overflow: hidden;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 12px;
}
.textInputTag__J5J9J.disabled {
    pointer-events: none;
    margin-right: 38px;
    color: #979ba7;
    background-color: #f5f5f5;
  }
.textInputTag__J5J9J.disabled [data-role="y-icon"]>svg {
      fill: #979ba7 !important;
    }
.tagsList__VA8bz {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.tagsList__VA8bz .lastTagsListItem__dXCA4 {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-flex-basis: 300px;
        -ms-flex-preferred-size: 300px;
            flex-basis: 300px;
  }
.tagInput__yoVm1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  line-height: 2.5rem;
  border: 0;
  outline: none;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.CategorySelector__51wx- {
  width: 100%;
}
.categoryPath__5rplf,
.fullCategoryPath__qCtF6 {
  font-size: 16px;
  font-size: 1rem;
  color: #26282a;
}
.categoryPath__5rplf .path__AC6I9, .fullCategoryPath__qCtF6 .path__AC6I9 {
    height: 22px;
    line-height: 22px;
    line-height: 1.375rem;
  }
.categoryPath__5rplf .path__AC6I9 span+[data-role="y-icon"], .fullCategoryPath__qCtF6 .path__AC6I9 span+[data-role="y-icon"] {
      margin: 0px 2px;
    }
.fullCategoryPath__qCtF6 {
  margin-bottom: 12px;
}
.recentlyCategoryRadio__u5zRI {
  margin-top: 10px;
}
.recentlyCategoryRadio__u5zRI .ant-radio-wrapper {
      display: block;
    }
.recentlyCategoryRadio__u5zRI .ant-radio-wrapper+.ant-radio-wrapper {
        margin-top: 12px;
      }
.rencentlyCategory__H89Mq {
  margin: 24px 0px 0px 0px;
}
.rencentlyCategory__H89Mq .rencentlyCategoryCheck__Rg7P1:hover .rencentlyCategoryPath__6fn37 {
        color: #5478fc;
      }
.rencentlyCategory__H89Mq .rencentlyCategoryCheck__Rg7P1 .ant-checkbox-checked~span>.rencentlyCategoryPath__6fn37 {
    color: #5478fc;
  }
.rencentlyCategory__H89Mq .rencentlyCategoryPath__6fn37 {
    display: inline-block;
    font-size: 14px;
    font-size: 0.875rem;
    top: -3px;
    position: relative;
  }
.rencentlyCategory__H89Mq .rencentlyCategoryPath__6fn37 [data-role="y-icon"]>svg {
      vertical-align: -3px !important;
    }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.SpecInfo__v-SE0 {
  width: 100%;
}
.info__8-s-k {
  display: inline-block;
  margin-left: 6px;
}
.tableHead__Hd9ji {
  font-size: 14px;
  font-size: 0.875rem;
  color: #26282a;
}
.tableHead__Hd9ji+.tableHead__Hd9ji {
    margin-top: 6px;
  }
.tableHead__Hd9ji .sub__b19QP {
    margin-left: 4px;
    color: #979ba7;
  }
.withSpecLevelRadio__9ETCT {
  margin-bottom: 16px;
}
.withSpecLevelRadio__9ETCT .ant-radio-wrapper {
      font-size: 16px;
      font-size: 1rem;
      margin-right: 24px;
    }
.withSpecLevelRadio__9ETCT .ant-radio-wrapper .ant-radio {
        vertical-align: text-bottom;
      }
.linkButton__jPhZD {
  height: 20px;
  margin: 12px 0px 0px 0px;
  padding: 0;
}
.deleteButton__8j2xD {
  position: absolute;
  color: #979ba7 !important;
  bottom: 0px;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  border: solid 1px #e0e4e9;
  background-color: #fff;
  margin: 6px;
  right: calc(-36px - 8px);
  padding: 0px;
}
.AttributeSpecSelector__SWifN {}
.SpecMenuSelectorArrayField__YRQdj {
  position: relative;
  margin-bottom: 24px;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.SpecList__3sjey {
  width: 100%;
}
.attributeItemSelect__4La8k,
.attributeItemSelectPopup__SR6hQ {
  width: 280px;
}
.attributeItemInput__SMZbc, .fixedWidth__ZoYxS {
  width: 280px;
}
.attributeItemInput__SMZbc [data-role="input-field"], .fixedWidth__ZoYxS [data-role="input-field"] {
    width: 280px !important;
  }
.customSpecRow__BSRw- {
  margin-top: 12px !important;
}
.customFieldsWrap__mMegr {
  padding: 24px 0px 24px 70px;
  margin-left: -70px;
  width: 543px;
  background-color: #f8f8fa;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
      -webkit-box-direction: normal;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
.customFieldsWrap__mMegr .customFieldsWrapItem__b1V7l {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
        -webkit-box-direction: normal;
        /* autoprefixer: ignore next */
        -webkit-box-orient: horizontal;
	-moz-flex-direction: row;
	-webkit-flex-direction: row;
	    -ms-flex-direction: row;
	        flex-direction: row;
  }
.customButtonWrap__ueGrr {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
        -webkit-box-direction: normal;
        /* autoprefixer: ignore next */
        -webkit-box-orient: horizontal;
	-moz-flex-direction: row;
	-webkit-flex-direction: row;
	    -ms-flex-direction: row;
	        flex-direction: row;
  margin-top: 12px;
}
.customButtonWrap__ueGrr button {
    background-color: transparent !important;
  }
.customSpecInputName__TUlz7,
.customSpecInputValues__DDASG {
  position: relative;
  height: 100%;
}
.customSpecInputName__TUlz7 [data-role="input-field"], .customSpecInputValues__DDASG [data-role="input-field"] {
    width: 200px !important;
  }
.customSpecInputName__TUlz7 [data-role="paragraph-text"], .customSpecInputValues__DDASG [data-role="paragraph-text"] {
    width: 200px !important;
    height: 100%;
    line-height: 24px;
    line-height: 1.5rem;
    background-color: #f1f1f5;
    border: solid 1px #e0e4e9;
    padding: 4px 11px 4px 12px;
    border-radius: 2px;
  }
.customSpecInputName__TUlz7 {
  margin-right: 12px;
}
.customSpecInputName__TUlz7 [data-role="input-field"] {
    width: 160px !important;
  }
.deleteButton__a6P0M {
  width: 30px;
  height: 30px;
  padding: 0px;
  top: 5px;
  right: calc(-30px - 8px);
  background-color: #fff;
  color: #979ba7;
  border-radius: 2px;
  border: solid 1px #e0e4e9;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
}
.deleteButton__a6P0M [data-role="y-icon"]>svg {
    fill: #979ba7 !important;
  }
.linkButton__6M6Wu [data-role="y-icon"]>svg {
    fill: #5478fc !important;
  }
.info__LRHKJ {
  margin-left: 12px;
}
.info__LRHKJ p {
    font-size: 12px;
    font-size: 0.75rem;
    color: #979ba7;
    line-height: 40px;
    line-height: 2.5rem;
  }
.valuesPatchFlexOrder__rWid6 :first-child {
    -webkit-box-ordinal-group: -9;
    -webkit-order: -10;
        -ms-flex-order: -10;
            order: -10;
  }
.valuesPatchFlexOrder__rWid6 .info__LRHKJ {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
        -ms-flex-order: -1;
            order: -1;
  }

.ParagraphText__555H7 {
  word-wrap: break-word
}
.bsmi__Gb2P5 {
  color: #fa1229;
  font-size: 12px;
  font-size: 0.75rem;
}

.alginBrandIdButton__PDJMe {
  height: 40px;
  margin-top: 1px;
  margin-left: 11px;
}

.flexContainer__RAqLe {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.flexItem__IGNds {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.tip__uh736 {
  margin-bottom: 7px;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.copySection__3GFgD {
  margin-top: 60px;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.Editor__292Tr .info__Bq41z {
    margin-bottom: 12px;
  }
.Editor__292Tr .info__Bq41z p {
      font-size: 12px;
      font-size: 0.75rem;
      font-weight: normal;
      color: #979ba7;
      line-height: 18px;
      line-height: 1.125rem;
    }
.Editor__292Tr .info__Bq41z .formLabel__5IkF5{
      left: 0;
    }
.Editor__292Tr .EditorResult__VCBiA {
    width: 800px;
    padding: 40px 60px;
    border: solid 1px #e0e4e9;
  }
.Editor__292Tr div[data-role="help-block"] {
    color: #979ba7;
  }
.hideImageListBtn__sT-fe div[class*="mce-image-list-btn"] {
    display: none;
  }

.showImageListBtn__UnZS- div[class*="mce-image-list-btn"] {
    display: inline-block;
  }

.isNotCompliantBtn__ndomj {
  cursor: not-allowed;
}

  .isNotCompliantBtn__ndomj svg {
    display: none;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.Video__LLnMs .productModalVideo__KMqg1 {
  }
.lazyloadThumbnail__I8hfn {
  height: 250px;
  margin: auto;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.Warranty__uzLAV {
  margin-top: 30px;
}
.Warranty__uzLAV .productWarrantyStatusRadio__4DBhV,
  .Warranty__uzLAV .productWarrantyScopeRadio__P7Ues {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
.Warranty__uzLAV .productWarrantyScope__J7pLv input {
    margin-top: 12px;
    width: 540px;
  }
.Warranty__uzLAV .productWarrantyDesc__ceewQ textarea {
      width: 540px;
      height: 86px;
    }
.Warranty__uzLAV .productWarrantyDesc__ceewQ.readOnly__kgmvK {
      margin: 6px 0;
    }
.Warranty__uzLAV .isNeedRecycleFormRow__9C6a3 {
    margin-top: 2px;
  }
.Warranty__uzLAV .productWarrantyPeriodSelect__ju9M7 {
    min-width: 220px;
  }
.Warranty__uzLAV .productWarrantyPeriodSelect__ju9M7 [data-role="selection"] {
      min-width: 220px;
      height: 38px;
      line-height: 38px;
      line-height: 2.375rem;
    }
.productWarrantyPeriodSelectMenu__N2mZr .y-menu-container {
      width: 220px;
    }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.ProductDetail__ie8ra {}

.Limitation__R8fto .ant-input-number {
      width: 229px;
    }
  .Limitation__R8fto .highlight__uYvrR {
    font-weight: 500;
    color: #f2695b;
  }
  .Limitation__R8fto .applyLowGpm__-LKO1 {
    line-height: 40px;
    line-height: 2.5rem;
    margin-left: 40px;
  }

.costTooltip__phyqq .ant-tooltip-inner {
    width: 300px;
  }
.moreInfoArea__F0-i8 .moreInfo__cogA0 div[class*="title"] {
    margin-top: 30px;
    color: #979ba7;
  }
  .moreInfoArea__F0-i8 .advanceInput__SMdm4 input[name="listing.featureTitle"] {
      width: 540px;
    }

.isThresholdFreebieTip__EF6Xz {
  font-size: 14px;
  font-size: 0.875rem;
}

div.ProposalConsent__XMZt2 {
  margin-top: 20px;

}

  div.ProposalConsent__XMZt2 h4::before {
    content: none;
  }

  div.ProposalConsent__XMZt2 p {
    font-size: 16px;
    font-size: 1rem;
    line-height: 26px;
    line-height: 1.625rem;
    letter-spacing: 0px;
    letter-spacing: 0;
    color: #979ba7;
    font-weight: 500;
  }

  div.ProposalConsent__XMZt2 .consentInfo__KJpzT {
    padding: 30px 40px;
    max-height: 450px;
    overflow-y: scroll;
  }

.shopInfoConsent__Zhltu {
  margin-top: 20px;
}

.shopInfoConsent__Zhltu h4 {
    line-height: 40px;
    line-height: 2.5rem;
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 500;
  }

.shopInfoConsent__Zhltu span {
    font-size: 14px;
    font-size: 0.875rem;
    color: #989ba8;
  }
.ProposalStatusBar__QyAxh {
  padding: 25px 80px 25px 0px;
}

  .ProposalStatusBar__QyAxh .contentWithExtraPadding__QfToj {
    padding-left: 80px;
  }

  .ProposalStatusBar__QyAxh .resetMargin__i--fZ {
    margin-top: 4px !important;
  }

  .ProposalStatusBar__QyAxh .badWord__1k5lK label {
    min-width: 0 !important;
    min-width: initial !important;
    width: 400px !important;
  }

  .ProposalStatusBar__QyAxh .statusTitle__bNgmk {
    text-align: left;
    font-size: 14px;
    font-size: 0.875rem;
    color: #979ba8;
  }

  .ProposalStatusBar__QyAxh .executeStatus__-lJL0 {
    line-height: 40px;
    line-height: 2.5rem;
  }

  .ProposalStatusBar__QyAxh .executeStatus__-lJL0 [data-role="y-icon"]>svg {
      margin-right: 5px;
    }

  .ProposalStatusBar__QyAxh .executeStatus__-lJL0 [data-icon="ec-check"] {
      fill: #5478fc !important;
    }

  .ProposalStatusBar__QyAxh .executeStatus__-lJL0 [data-icon="decline"] {
      fill: #fa1229 !important;
    }

  .ProposalStatusBar__QyAxh .executeStatus__-lJL0 .verticalBar__9haHG {
      color: #979ba8;
      margin: 0px 10px;
    }

  .ProposalStatusBar__QyAxh .executeStatus__-lJL0 .checkItemId__7GkKD {
      color: #5478fc;
      cursor: pointer;
      font-size: 14px;
      font-size: 0.875rem;
    }

  .ProposalStatusBar__QyAxh .executeStatus__-lJL0 .listingPreviewLink__uQP3u {
      font-size: 14px;
      font-size: 0.875rem;
      margin-left: 5px;
    }

  .ProposalStatusBar__QyAxh .executeStatus__-lJL0 .listingNotFound__kP-pO {
      color: #fa1229;
      margin-left: 9px;
    }

  .ProposalStatusBar__QyAxh .executeStatus__-lJL0 small[data-role="execute-result-desc-text"] {
      display: inline-block;
      word-break: break-all;
    }

  .ProposalStatusBar__QyAxh .reviewStatusLabel__8XoQu {
    text-align: left;
  }

  .ProposalStatusBar__QyAxh .reviewStatusLabel__8XoQu .checkDeclineReason__x6QgF {
      color: #5478fc;
      cursor: pointer;
      margin-left: 5px;
      font-size: 14px;
      font-size: 0.875rem;
    }
.declineReasonModal__FVHdx .declineReasons__D8QQv {
    color: #000000;
    list-style-type: disc;
    list-style-position: inside;
  }
.declineReasonModal__FVHdx .declineDetailTitle__ZNd5l {
    color: #979ba8;
    margin: 24px 0px 4px 0px;
  }
.declineReasonModal__FVHdx .declineDetail__QiMs- {
    color: #000000;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
/* alter html background-color */
.UpdateListingForm__vSHo7 {
  margin-top: 20px;
  margin-bottom: 40px;
}
.UpdateListingForm__vSHo7 .headTop__tKdHd {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
            align-content: stretch;
  }
.UpdateListingForm__vSHo7 .subStationId__K8UZA {
    margin-right: 10px;
  }
.UpdateListingForm__vSHo7 .centerAlignContent__KU2IY {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
.UpdateListingForm__vSHo7 .tipLabel__A8SjL {
    font-size: 16px;
    font-size: 1rem;
    color: #27282a;
  }
.UpdateListingForm__vSHo7 .backToEditBtn__YO1OG {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
  }
.CTA__jMDSk {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding-top: 20px;
}
.CTA__jMDSk .submitBtn__3f-Bv {
    background-color: #5478fc;
    border: solid 1px #5478fc;
    color: #ffffff;
    margin-left: 12px;
  }
.CTA__jMDSk .CTATip__baFKu {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    text-align: right;
    margin-top: 10px;
  }
.completionContent__XRpmA {
  color: #9999ab;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.63;
  font-weight: normal;
  margin: 20px;
}
.isUpdateWithWarranty__6-w2C .ant-checkbox-disabled~span {
      pointer-events: none;
      color: inherit !important;
    }

.panelHeader__Qbf-w {
    padding: 4px;
    font-size: 12px;
    font-size: 0.75rem;
}

.listingId__zvfqD {
    font-size: 24px;
    font-size: 1.5rem;
    color: #5478fc;
    line-height: 1.5rem;
}

.listingName__hqZR1 {
    font-size: 16px;
    font-size: 1rem;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
.prefixBlock__r4E27 {
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #eef1f4;
}
.prefixBlock__r4E27.info__fRSM- {
    border-left: 4px solid #5478fc;
  }
.prefixBlock__r4E27.error__JS55k {
    color: #ff4d52;
    border-left: 4px solid #ff4d52;
  }
.headerRow__-PiC8 {
    padding: 4px;
    font-size: 12px;
    font-size: 0.75rem;
}

.headerTitle__3ftGj {
    font-size: 24px;
    font-size: 1.5rem;
    color: #5478fc;
}

.headerSubTitle__VHpq0 {
    font-size: 16px;
    font-size: 1rem;
}
.block__lpX0P {
  padding: 16px 24px 20px 24px;
}

.attrSelector__S6Tj4 {
  padding: 16px 12px;
  width: 50%;
}

.attrSelector__S6Tj4 [data-role="selection"] {
    width: 100%;
  }

.listingBlock__0dTAP {
  padding: 30px 40px;

}

.tableBlock__mmK0O {
  position: relative;
}

.tableBlock__mmK0O .tableTip__anlWF {
    position: relative;
    height: 30px;
    line-height: 30px;
    line-height: 1.875rem;
    font-size: 16px;
    font-size: 1rem;
    margin-bottom: 30px;
  }

.tableBlock__mmK0O .tableTip__anlWF.batchRemoveMode__yG9BD::before {
      position: absolute;
      left: -20px;
      top: -15px;
      content: '';
      width: calc(100% + 40px);
      height: 60px;
      background-color: #f8f8fa;
      border-radius: 4px;
      border: 1px solid #e0e4e9;
      z-index: -1;
    }

.block__lpX0P,
.listingBlock__0dTAP {
  margin-bottom: 39px;
}

.condition__y80ht {
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  margin-bottom: 8px;
}

h4.removedTitle__QBZLe:before {
    background-color: #fa1229;
  }

.importRuleModal__-So7P [class="y-modal-body"] {
    color: #26282a;
    font-size: 16px;
    font-size: 1rem;
  }

.importRuleModal__-So7P [class="y-modal-footer"] {
    text-align: center;
  }

.infiniteScroll__EBxUs {
  padding: 4px;
}

.infiniteScrollArea__klXhu {
  display: block;
  width: 100%;
  margin: 2px;
}

.allowLoadmoreBtnArea__hpqvB {
  text-align: center;
}

.allowLoadmoreBtnArea__hpqvB button[type="button"] {
    margin: 16px 0;
    width: 150px;
  }

button.actionBtn__tA1e7[type="button"] {
  padding: 6px;
  -webkit-transition: none;
  transition: none;
  visibility: hidden;
  margin-right: 0;
  margin-right: initial;
}

button.actionBtn__tA1e7[type="button"]:not(:last-child) {
    margin-right: 4px;
  }

button.actionBtn__tA1e7[type="button"].deleteBtn__wcFwG.visible__H-Mo2.alwaysVisible__JLNwo,
    button.actionBtn__tA1e7[type="button"].deleteBtn__wcFwG.visible__H-Mo2:hover {
      visibility: visible;
      visibility: initial;
      border-color: #e0e4e9;
    }

button.actionBtn__tA1e7[type="button"].visibleBtn__2ewD3.invisibleStatus__S0sWZ,
    button.actionBtn__tA1e7[type="button"].visibleBtn__2ewD3:hover:not(.disableBtn__-RuOQ) {
      visibility: visible;
      visibility: initial;
      border-color: #e0e4e9;
    }

button.actionBtn__tA1e7[type="button"].disableBtn__-RuOQ {
    pointer-events: none;
  }

.ant-table-thead th span.ant-table-header-column {
      height: 24px;
    }

.ant-table-tbody tr:hover td button[class*="deleteBtn"][class*="visible"]:not([class*="disableBtn"]), .ant-table-tbody tr:hover td button[class*="visibleBtn"]:not([class*="disableBtn"]) {          
          visibility: visible;          
          visibility: initial;
          border-color: #e0e4e9;
        }

.ant-table-tbody input.ant-input[data-role="input-field"] {
      width: 100%;
    }

.listingId__KcnTK {
  width: 600px;
  height: 120px;
  border-radius: 3px;
  border: 1px solid #e0e4e9;
}

  .listingId__KcnTK textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
  }

.separator__5-JCb {
  display: block;
  margin: 24px 0 20px;
  height: 1px;
  width: calc(100% + 48px);
  background-color: #e0e4e9;
  -webkit-transform: translateX(-24px);
          transform: translateX(-24px);
}

.importBtn__Z2AmH {
  width: 108px;
  height: 32px;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 6px 10px;
}
.sortableTable__N0jQu {
  position: relative;
  background: white;
}

  .sortableTable__N0jQu .ant-checkbox-wrapper {
    margin: 0px -4px 0px 0px;
  }

  .sortableTable__N0jQu div[data-role="single-line-text"] {
    line-height: 21px;
    line-height: 1.3125rem;
  }

.ignoreSortingAnimation__VVGgJ .ant-table-tbody tr {
      -webkit-transition: none;
      transition: none;
    }

.noLastBorder__BfPOK .ant-table-tbody tr:last-child td {
      border-bottom: none;
    }

.ant-table table {
    table-layout: fixed;
  }

td div.ant-typography {
    margin-bottom: 0;
  }

.ant-table-thead tr th, .ant-table-tbody tr:hover td {
    background: transparent !important;
  }

.ant-table-tbody tr td {
    background: transparent !important;
  }

/* 拖曳時會 clone 整個 tr node，但是不會有前面的 parentNode，所以需要獨立出來設定 */

tr.sortableHelper td {
    background: white !important;
  }

tr.sortableHelper {
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    -webkit-box-sizing: initial;
            box-sizing: initial;
    /* 在 share component modal 中使用時沒有設定 z-index 會因為圖層太低導致拖曳項目消失 */
    z-index: 1000;
  }

tr.sortableHelper td {
      padding: 16px;
      vertical-align: middle;
    }

tr.sortableHelper div[data-role="single-line-text"] {
      line-height: 21px;
      line-height: 1.3125rem;
    }

.dragHandlerArea__sQxE6 {
  position: relative;
  display: inline-block;
  padding: 8px;
  cursor: move;
}

.dragHandlerArea__sQxE6.disabled__EKQqS {
    pointer-events: none;
  }

.dragHandlerArea__sQxE6 .sortableIcon__FWlCG {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 22px;
    height: 1px;
    background-color: #979ba7;
  }

.dragHandlerArea__sQxE6 .sortableIcon__FWlCG:before,
    .dragHandlerArea__sQxE6 .sortableIcon__FWlCG:after {
      content: '';
      position: absolute;
      left: 0;
      display: inline-block;
      width: 22px;
      height: 1px;
      background-color: #979ba7;
    }

.dragHandlerArea__sQxE6 .sortableIcon__FWlCG:before {
      bottom: 4px;
    }

.dragHandlerArea__sQxE6 .sortableIcon__FWlCG:after {
      bottom: 8px;
    }

.sortableArea__BM9sE {
  display: inline-block;
  border: 4px dotted orange;
  border-radius: 4px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  z-index: 1;
}

.sortableArea__BM9sE.hidden__sGJH5 {
    -webkit-transition: none;
    transition: none;
    opacity: 0;
  }

.updateProductSpec__AINWX {
  cursor: pointer;
}

.newRowPrefix__VThuV {
  display: inline-block;
  margin-right: 8px;
  color: #ec457d;
}

.newRowPrefix__VThuV.isUpdate__Hu7DF svg {
      margin: 2px 6px;
    }

.isDuplicated__tQxaq {
  color: #fa1229;
}

.attributesTip__HXKN5 {
  position: absolute;
  width: 300px;
}

.modelTableRow__OK0WE {
  position: relative;
  -webkit-transition: background-color .5s;
  transition: background-color .5s;
}

.modelTableRow__OK0WE.isUpdatedCollection__IeZ9Q {
    background-color: rgba(255, 165, 0, .4);
  }

.modelTableRow__OK0WE .updatedProductName__YQV4L {
    background-color: #f1f1f5;
    border: solid 1px #e0e4e9;
    color: #26282a;
    padding: 4px 12px;
    border-radius: 2px;
    word-break: break-all;
  }

.modelTableRow__OK0WE .updateField__eyxPJ {
    margin-bottom: 20px;
  }

.modelTableRow__OK0WE .isAttributeUpdateOnly__Qx9E7 {
    top: -20px;
    position: relative;
  }

.modelTableRow__OK0WE .isSelectedValueUpdateOnly__wGcgo {
    top: 10px;
    position: relative;
  }

.modelTableRow__OK0WE .isSelectedValueUpdateOnly__wGcgo + div[data-role="spec-menu-select"],
    .modelTableRow__OK0WE .isSelectedValueUpdateOnly__wGcgo + div[data-role="with-input-count"] {
      top: 12px;
    }

.attrs__DpC-N,
.specSelectedValue__ZP3wZ,
.itemSpecSelectedValue__rs3u6 {
  width: 100%;
  min-width: 0;
  min-width: initial;
}

.attrs__DpC-N div[data-role="selection"] [data-role="selected-value"], .specSelectedValue__ZP3wZ div[data-role="selection"] [data-role="selected-value"], .itemSpecSelectedValue__rs3u6 div[data-role="selection"] [data-role="selected-value"] {
    width: 180px;
    margin-right: -16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(0, 0, 0);
  }

.attrs__DpC-N input[data-role="input-field"], .specSelectedValue__ZP3wZ input[data-role="input-field"], .itemSpecSelectedValue__rs3u6 input[data-role="input-field"] {
    width: inherit;
  }

.newProductBtn__Q-JSQ {
  margin: 12px 0;
  display: inline-block;
}

.popupContainer__xKswi {
  display: inline-block;
}
.listingImg__-20ID {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-color: #e0e4e9;
  vertical-align: top;
}

  .listingImg__-20ID img {
    width: 120px;
    height: 120px;
  }

.listingInfo__mOzqZ {
  display: inline-block;
  width: calc(100% - 120px);
  height: 120px;
  padding: 8px 16px;
  vertical-align: top;
}

.listingInfo__mOzqZ .listingId__ISF2W,
  .listingInfo__mOzqZ .listingName__IBzO0 {
    color: #26282a;
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
  }

.listingInfo__mOzqZ .listingId__ISF2W {
    margin-bottom: 16px;
    line-height: 19px;
    line-height: 1.1875rem;
  }

.listingInfo__mOzqZ .listingName__IBzO0 {
    line-height: 22px;
    line-height: 1.375rem;
  }

.listingInfo__mOzqZ .title__FPuWj {
    color: #464e56;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    margin-bottom: 4px;
  }
.table__WQIV5 {
  max-height: 60vh;
}

.editableOffset__px2-p {
  margin-bottom: 20px;
}

.productSpecInput__ja0xe {
  width: 100%;
}

.emptyBtn__Zb-vW {
  display: inline-block;
  width: 30px;
  height: 25px;
}
.productsInfo__oE4v9 {
  max-height: 200px;
  overflow-y: auto;
}

.row__lJ1iJ {
  font-size: 16px;
  font-size: 1rem;
  color: #26282a;
}

.tip__wBKmf,
.title__qe76S {
  font-size: 14px;
  font-size: 0.875rem;
  color: #979ba7;
}

.info__4XaOz {
  display: inline-block;
  margin-left: 6px;
}

.sub__fFs2J {
  font-size: 14px;
  font-size: 0.875rem;
  color: #989ba8;
  font-weight: 500;
  margin-left: 4px;
}

.customCol__4dFQi {
  padding-right: 8px;
}

.customCol__2tFI9 {
  position: relative;
}

  .customCol__2tFI9.colOffset__T1Kcm {
    padding-right: 3%;
  }

  .customCol__2tFI9 input[data-role="input-field"] {
    width: 100%;
  }

  .customCol__2tFI9 div[data-role="y-menu-select-picker"] {
    min-width: 0;
    min-width: initial;
    width: 100%;
  }

  .customCol__2tFI9 .menu__WSsXB {
    top: 0 !important;
  }

  .customCol__2tFI9 div[data-role="help-block"] {
    top: 58px;
  }

  .customCol__2tFI9.colOffset__T1Kcm div[data-role="help-block"] {
    top: 42px;
  }

.deleteBtn__dS0eL {
  margin: 46px 12px;
}

.info__-XprD {
  display: inline-block;
  margin-left: 6px;
}

.sub__u989- {
  font-size: 14px;
  font-size: 0.875rem;
  color: #989ba8;
  font-weight: 500;
  margin-left: 4px;
}

.fullScreenModal__06TOV {
  top: 5vh;
  height: 90vh;
}

.fullScreenModal__06TOV div[class="y-modal-body"] {
    height: 75vh;
  }

.fullScreenModal__06TOV div[data-role="upload-list-item"]:nth-child(5n) {
    margin-right: 8px;
  }

.addNewProductBtn__QDOhX {
  display: inline-block;
  margin: 12px 24px 96px;
  border-bottom: none;
}

.addNewProductBtn__QDOhX:hover {
    border-bottom: none;
  }

.productNameTitle__XvMmn {
  display: inline-block;
  left: 0 !important;
}

.listingId__CMo8F {
  border-radius: 3px;
  border: 1px solid #e0e4e9;
  height: 120px;
}

  .listingId__CMo8F textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.tableTipErrorMsg__AHCt- {
  color: #fa1229 !important;
  width: 85%;
  display: block;
  width: 85%;
  word-break: break-all;
  display: inline-block;
}
.separator__LuHFW {
  margin: 0 4px;
}
.tableTipErrorMsg__AHCt-,
.tableTip__-vODD {
  z-index: 0;
}
.tableTipErrorMsg__AHCt- div, .tableTip__-vODD div {
    vertical-align: top;
  }
.tableActions__K3naF {
  position: absolute;
  right: 0;
  top: 0;
  padding: 30px 40px;
  z-index: 0;
}
.tableActions__K3naF .batchRemoveByIdBtn__8mIfv,
  .tableActions__K3naF .batchRemoveConfirmBtn__eUoop,
  .tableActions__K3naF .batchRemoveModelCancelBtn__XcGaM {
    width: auto;
    margin-left: 12px;
    margin-right: 0;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.table__VMQBX .ant-typography div[data-role="single-line-text"] {
      min-height: 42px;
    }
.table__VMQBX div[data-role="single-line-text"] {
    display: inline;
  }
.table__VMQBX div > [data-role="y-icon"] + span {
    color: #ec457d;
    margin-right: 8px;
  }
.ant-table-row [data-role="y-menu-select-picker"] {
    width: 100%;
    min-width: 0;
  }
.ant-table-row [data-role="y-menu-select-picker"] [data-role="selected-value"] {
      color: #000;
      color: initial;
    }
.ant-table-row .cost__OqnbZ,
  .ant-table-row .grossMargin__V3ScZ {
    color: #fa1229;
  }
.verticalAlignTop__Ql1F5 {
  vertical-align: top;
}
.tableRow__uOitZ {
  position: relative;
}
.tableRow__uOitZ.isUpdatedCollection__SLBDd {
    -webkit-animation: updateCollection__Nxzyu 600ms ease-in-out;
            animation: updateCollection__Nxzyu 600ms ease-in-out;
  }
@-webkit-keyframes updateCollection__Nxzyu {
  0%, 100% {
    background-color: transparent;
  }

  20%, 80% {
    background-color: rgba(255, 165, 0, .4);
  }
}
@keyframes updateCollection__Nxzyu {
  0%, 100% {
    background-color: transparent;
  }

  20%, 80% {
    background-color: rgba(255, 165, 0, .4);
  }
}
.selectComplimentaryMinQtyArea__amOAI {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.selectComplimentaryMinQtyArea__amOAI > span {
    display: inline-block;
    margin: 0 4px;
  }
.selectComplimentaryMinQtyArea__amOAI div[data-role="y-menu-select"] {
    display: inline-block;
  }
.selectComplimentaryMinQtyArea__amOAI div[data-role="y-menu-select-picker"] {
    min-width: 60px;
  }
.portal__rU71y.withoutTitle__CLbf0 [data-role="modal-body"] {
    margin-top: 28px;
  }
.portal__rU71y [data-role="modal-body"] [class*="Tip"] {
    font-size: 14px;
    font-size: 0.875rem;
  }
.shortTitle__NgI5L {
  display: inline-block;
  left: 0 !important;
}

.specTable__38Bke .ant-table-thead {
    display: none;
  }
  .specTable__38Bke .ant-table-tbody tr:last-child td {
    border-bottom: none;
  }
.modal__3A-ej .formRow__POf9r {
    padding-bottom: 12px;
  }

    .modal__3A-ej .formRow__POf9r label {
      padding-right: 24px;
    }

    .modal__3A-ej .formRow__POf9r + [class*="FormRow"] {
      margin-top: 0;
    }
  .modal__3A-ej .attrModelsArea__ksl35 {
    overflow-y: scroll;
    height: 350px;
  }
  .modal__3A-ej .noAttrModelsArea__5YL0W {
    margin-top: 30px;
  }
  .modal__3A-ej .actionArea__NCDbb {
    text-align: right;
  }
  .modal__3A-ej .ruleHint__Cnd47 {
    font-size: 14px;
    font-size: 0.875rem;
    margin-bottom: 4px;
  }
  .modal__3A-ej .ruleHint__Cnd47.withMargin__-U0BU {
      margin: 10px 120px;
    }
  .modal__3A-ej textarea {
    resize: none;
  }
  .modal__3A-ej input,
  .modal__3A-ej textarea {
    width: 100% !important;
  }
  .modal__3A-ej [data-role="help-block"] {
    top: auto;
    top: initial;
  }
  .modal__3A-ej [data-role="with-input-count-counting"] {
    margin-top: 2px;
  }
  .modal__3A-ej [data-role="name-picker"],
  .modal__3A-ej [data-role="y-menu-select-picker"] {
    width: 100%;
    min-width: 0;
    padding-bottom: 6px;
  }
.modal__xqzuG [class="y-modal-body"] {
    color: #26282a;
  }
  .modal__xqzuG .tip__VOtFJ,
  .modal__xqzuG [class="y-modal-body"] {
    font-size: 16px;
    font-size: 1rem;
  }
  .modal__xqzuG [class="y-modal-footer"] {
    text-align: center;
  }
.anchorContainer__-ZUk2 {
  display: inline-block;
  width: 100%
}

.Anchor__-21j3 {
  position: relative;
  left: 0;
  margin-left: 0;
  padding: 0;
  border: 1px solid #e0e4e9;
  border-bottom: 4px solid #e0e4e9;
  border-radius: 4px;
  overflow: visible;
  overflow: initial;
}

.Anchor__-21j3.selectedStartItem__A230S .ant-anchor-link.ant-anchor-link-active:before {
            width: 100%;
          }

.Anchor__-21j3.selectedStartItem__A230S .ant-anchor-link.ant-anchor-link-active:first-child {
            border-bottom-left-radius: 4px;
          }

/* anchor 非 fixed 狀態第一個項目不會有 active className，需要自己另外設定樣式 */

.Anchor__-21j3.selectedStartItem__A230S .ant-anchor-link:nth-child(2) {
          border-bottom: 0;
          background-color: rgba(84, 120, 252, 0.15);
        }

.Anchor__-21j3.selectedStartItem__A230S .ant-anchor-link:nth-child(2) .ant-anchor-link-title {
            color: #26282a;
            border-left: 1px solid transparent;
          }

.Anchor__-21j3.selectedStartItem__A230S .ant-anchor-link:nth-child(2) + div .ant-anchor-link-title {
            border-left: 1px solid transparent;
          }

.Anchor__-21j3.selectedStartItem__A230S .ant-anchor-link:nth-child(2):before {
            background-color: #5478fc;
          }

.Anchor__-21j3.center__qBIBL .ant-anchor {
        text-align: center;
      }

.Anchor__-21j3.center__qBIBL .ant-anchor .ant-anchor-link.ant-anchor-link-active:first-child {
              border-bottom-left-radius: 0;
            }

.Anchor__-21j3.center__qBIBL .ant-anchor .ant-anchor-link:before {
            border-bottom-left-radius: 0 !important;
          }

.Anchor__-21j3.mainMenuOnly__aMTHR .ant-anchor-link:last-child {
        position: absolute;
        right: -1px;
      }

.Anchor__-21j3.mainMenuOnly__aMTHR .ant-anchor-link:last-child .ant-anchor-link-title {
          padding: 2px 1.3rem 2px calc(1.3rem - 2px);
        }

.Anchor__-21j3.mainMenuOnly__aMTHR .ant-anchor-link:last-child:before {
          border-bottom-right-radius: 4px;
        }

.Anchor__-21j3 .ant-anchor {
      padding: 0;
      line-height: 0;
    }

.Anchor__-21j3 .ant-anchor-ink {
      display: none;
    }

.Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]) {
      position: relative;
      display: inline-block;
      padding: 10px 0;
      width: calc(100% / 9);
    }

.Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]) .ant-anchor-link-title {
        padding: 2px 0;
        font-size: 16px;
        font-size: 1rem;
        font-weight: 500;
        color: #979ba7;
        border-left: 1px solid #e0e4e9;
        text-align: center;
      }

.Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]):nth-child(2):before {
          border-bottom-left-radius: 4px;
        }

.Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]):nth-child(2) .ant-anchor-link-title {
          border-left: 1px solid transparent;
        }

.Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]).ant-anchor-link-active {
        border-bottom: 0;
      }

.Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]).ant-anchor-link-active .ant-anchor-link-title {
          border-left: 1px solid transparent;
        }

/* 目前選擇的項目和相鄰的下一個項目都要清掉 border */

.Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]).ant-anchor-link-active + div .ant-anchor-link-title,
        .Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]).ant-anchor-link-active + div[class*="subMenuArea"] [class*="subMenuBtn"] {
          border-left: 1px solid transparent;
        }

.Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]).ant-anchor-link-active:before {
          background-color: #5478fc;
        }

.Anchor__-21j3 .ant-anchor-link:not([class*="subLink"]):before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 4px;
        width: 100%;
        background-color: #e0e4e9;
        -webkit-transition: all .35s;
        transition: all .35s;
      }

.Anchor__-21j3 .ant-anchor-link.ant-anchor-link-active {
        background-color: rgba(84, 120, 252, 0.15);
      }

.Anchor__-21j3 .ant-anchor-link.ant-anchor-link-active .ant-anchor-link-title {
          color: #26282a;
        }

.Anchor__-21j3 .ant-anchor-link:hover .ant-anchor-link-title {
          color: #26282a;
        }

.subMenuArea__5QNDe {
  position: absolute;
  display: inline-block;
  right: 0;
  height: 42px;
  cursor: pointer;
}

.subMenuArea__5QNDe .subMenuBtn__1YHJY {
    line-height: 42px;
    line-height: 2.625rem;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    color: #979ba7;
    margin: 10px 0;
    padding: 2px 17px 2px 16px;
    border-left: 1px solid #e0e4e9;
  }

.subMenuArea__5QNDe:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    /* 左邊 0 的位置有區隔項目的 border */
    left: 1px;
    bottom: -4px;
    height: 46px;
    width: 100%;
    border-bottom: 4px solid #e0e4e9;
    border-bottom-right-radius: 4px;
    background-color: transparent;
    -webkit-transition: all .35s;
    transition: all .35s;
  }

.subMenuArea__5QNDe.active__wwNmL .subMenuBtn__1YHJY {
      border-left: 1px solid transparent;
    }

.subMenuArea__5QNDe.active__wwNmL:before {
      right: -1px;
      width: 100%;
      border-bottom-right-radius: 4px;
      background-color: rgba(84, 120, 252, 0.15);
      border-bottom: 4px solid #5478fc;
    }

.subMenuArea__5QNDe.hover__ab5NX .subMenuBtn__1YHJY, .subMenuArea__5QNDe.active__wwNmL .subMenuBtn__1YHJY {
      color: #26282a;
    }

.linksDropDown__gdVfU {
  position: absolute;
  top: 46px;
  right: -1px;
  display: inline-block;
  border: 1px solid #e0e4e9;
  border-radius: 4px;
  -webkit-transition: all .35s;
  transition: all .35s;
}

.linksDropDown__gdVfU.hidden__9xWWS {
    display: none;
  }

.linksDropDown__gdVfU li {
    width: 160px;
    height: 40px;
    background-color: #fff;
  }

.linksDropDown__gdVfU li .subLink__35ZWX {
      padding: 0;
      height: 100%;
    }

.linksDropDown__gdVfU li .subLink__35ZWX a {
        display: block;
        padding: 12px 24px;
        font-size: 14px;
        font-size: 0.875rem;
        line-height: 14px;
        line-height: 0.875rem;
        width: 100%;
        height: 100%;
        color: #979ba7;
        border-left: none !important;
        -webkit-transition: all .35s;
        transition: all .35s;
      }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
/* alter html background-color */
.contentLayout__MeLt8 {
  margin-top: 20px;
  margin-bottom: 40px;
}
.contentLayout__MeLt8.success__-C0QA::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.actionHeader__MX4eT {
  font-weight: 500;
  color: #26282a;
  position: relative;
}
.actionHeader__MX4eT .backToEditBtn__1VJZS {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
  }
.actionFooter__MK3pO {
  text-align: right;
  padding-top: 20px;
}

  .actionFooter__MK3pO .saveAsDraftBtn__AXAAi {
    margin-right: 12px;
  }

  .actionFooter__MK3pO .tip__6FOcA {
    margin-top: 10px;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.title__mJxlX {
  font-size: 24px;
  font-size: 1.5rem;
}
.description__P8xQ8 {
  color: #979ba7;
  font-size: 12px;
  font-size: 0.75rem;
  margin: 4px 0 12px;
}
.subProposalsStatusBar__BY4Is {
  margin: 12px 0;
}

  .subProposalsStatusBar__BY4Is .subProposalBlock__ZG1Bx {
    margin-top: 8px;
  }

.customCol__jlTBR {
  position: relative;
}

  .customCol__jlTBR.selectedValues__PSqKu {
    margin-right: 8px;
  }

  .customCol__jlTBR > div[data-role="with-input-count"] {
    margin-bottom: 36px;
  }

  .customCol__jlTBR > span {
    font-size: 12px;
    font-size: 0.75rem;
  }
.resetMargin__CDfUs {
    margin-top: 4px !important;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.panelHeader__VqZ0d {
  padding: 4px 32px;
  font-size: 12px;
  font-size: 0.75rem;
}
.listingId__Ao-Lp {
  font-size: 24px;
  font-size: 1.5rem;
  color: #5478fc;
}
.listingName__G2ClO {
  font-size: 16px;
  font-size: 1rem;
  word-break: break-all;
  /* FormLabel with icon will add left 18px */
  margin-left: 18px;
}

.model__22NN7 div[data-role="with-input-count"] {
    margin-bottom: 36px;
  }
  .model__22NN7 .selectedValueInput__hHL-U {
    position: relative;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.updateImageBlock__CKEFj {
  padding: 24px 38px;
}
.updateImageBlock__CKEFj + .updateImageBlock__CKEFj {
    margin-top: 4px;
  }
/* 調整 updateImage 跟下一列(上傳圖片/商品名稱)的間距 */
.updateImageBlock__CKEFj [data-role="image-function"] {
    padding-bottom: 0;
  }
.customColHeader__cQHO3 > div {
    left: 0 !important;
  }
.customColHeader__cQHO3 .partNoTitleSuffix__vDebB {
    margin: 0 4px;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.imageDesc__I6MZJ {
  /* 數字 list */
  list-style-type: decimal;
  font-size: 10px;
  font-size: 0.625rem;
  margin-left: 12px;
}
.imageDesc__I6MZJ > li {
    color: #979ba7;
  }
.imageDesc__I6MZJ > li.highlight__irA3T {
      color: #fa1229;
    }
.path__Y9l7b {
  display: inline-block;
  line-height: normal;
  line-height: initial;
  margin-bottom: 12px;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
.newPathSelectError__KOkuY {
  position: absolute;
  color: #fa1229;
  font-size: 12px;
  font-size: 0.75rem;
  margin-top: 4px;
}
.CascaderWithSelectedPath__6sbjU .y-cascader-menus {
      position: absolute;
      top: 42px !important;
      height: 338px;
      z-index: 1002;
    }

.hasSpecLevel__lReyb {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.layerModel__Q27iJ {
  width: 100%;
  margin-bottom: 16px;
}

.layerModel__Q27iJ .specSelect__3YRYk,
  .layerModel__Q27iJ .selectedValueSelect__MoMLu {
    width: 100%;
  }

.layerModel__Q27iJ .specSelect__3YRYk {
    padding-right: 16px;
  }

.specList__6of0a {
  margin: 20px 0 40px;
}

  /*
    需要重選規格表時會隱藏舊的規格項目，
    這時候卡片高度變很低，但選單是 position: absolute，
    如果沒有撐開卡片會擋到規格表選單
  */

  .specList__6of0a:empty {
    margin: 20px 0 180px;
  }

  .specList__6of0a .customFieldRow__Wtqrb,
  .specList__6of0a .newRowBtnArea__VFf-R {
    padding-top: 12px;
  }

  .specList__6of0a .customFieldRow__Wtqrb {
    margin-top: 0;
  }

  .specList__6of0a .customFieldRow__Wtqrb + .newRowBtnArea__VFf-R {
      margin-top: 0;
    }

  .specList__6of0a .customFieldRow__Wtqrb .deleteCustomSpecBtn__ecJVy {
      width: 30px;
      height: 30px;
      background-color: #fff;
      color: #979ba7;
      border-radius: 2px;
      border: solid 1px #e0e4e9;
      margin-left: 12px;
    }

  .specList__6of0a .customFieldRow__Wtqrb .deleteCustomSpecBtn__ecJVy [data-role="y-icon"]>svg {
        fill: #979ba7 !important;
      }

  /* 自訂規格名稱的錯誤訊息 */

  .specList__6of0a .customFieldRow__Wtqrb div[data-role="help-block"] {
      padding-right: 44px;
    }

  .specList__6of0a .newRowBtnArea__VFf-R {
    padding-bottom: 12px;
  }

  .specList__6of0a [class*="FormRow"]:not(.customFieldRow__Wtqrb) + .customFieldRow__Wtqrb {
    margin-top: 24px;
    padding-bottom: 12px;
  }

.inputField__i57bG input[data-role="input-field"],
.customSpecContentTextareaField__YM45r textarea[data-role="textarea-field"],
.menuSelectField__HJdOw div[data-role="selection"],
.fixedWidth__tMo90 {
  width: 280px;
}

.customSpecTitleInputField__5o4mW input[data-role="input-field"] {
  width: 108%;
  text-align: right;
}

/* 自訂規格值的錯誤訊息 */

.customSpecContentTextareaField__YM45r + [data-role="help-block"] {
    top: 58px;
  }

.customSpecContentTextareaField__YM45r textarea[data-role="textarea-field"] {
    resize: none;
  }

.info__AnuKW {
  display: inline-block;
  margin-left: 12px;
  font-size: 12px;
  font-size: 0.75rem;
  color: #979ba7;
  line-height: 40px;
  line-height: 2.5rem;
}

.customSpecBtn__eyt2M {
  height: 20px;
  margin-top: 12px;
  padding: 0;
  text-align: right;
}

.customSpecBtn__eyt2M [data-role="y-icon"]>svg {
    fill: #5478fc !important;
  }

.custom__pgdgB {
  width: 102%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
.appendBlock__l-bvb {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.panelHeader__BsAiu {
  padding: 4px;
  font-size: 12px;
  font-size: 0.75rem;
}
.listingId__y8QYr {
  font-size: 24px;
  font-size: 1.5rem;
  color: #5478fc;
}
.listingName__QR-lb {
  font-size: 16px;
  font-size: 1rem;
  word-break: break-all;
}
.title__j-WzZ {
  margin: 12px 0;
  font-weight: 500;
  font-size: 16px;
  font-size: 1rem;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
.fullCategoryPath__xbt2- {
  position: relative;
  font-size: 16px;
  font-size: 1rem;
  color: #26282a;
  width: 100%;
}
.tableTip__9bgfA {
  position: relative;
  width: 100%;
  margin-top: 10px !important;
  height: 45px;
  line-height: 45px;
  line-height: 2.8125rem;
  font-size: 16px;
  font-size: 1rem;
  margin-bottom: 45px;

}
.tableTip__9bgfA.batchApplyMode__XCK2-::before {
    position: absolute;
    left: -16px;
    top: 0;
    content: '';
    width: calc(100% + 32px);
    height: 80px;
    background-color: #f8f8fa;
    z-index: 0;
  }
.labelMode__Qjlgd {
  position: relative;
  top: 55%;
  left: 0;
  z-index: 1;
}
.batchApplyBtn__7UtiH:disabled {
    pointer-events:none;
  }
.divider__ECJY1 {
  position: absolute;
  width: 100%;
  right: 0;
  margin-top: 0 !important;
  background: #EAECF0;
  height: 10px;
}
.attributeDisplayMode__w0owv {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: relative;
}
.attributeDisplayMode__w0owv .checkbox__rGjbT {
    position: absolute;
    top: 0;
    right: 43.5%;
  }
.tableActions__QNRPo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}

  .tableActions__QNRPo .batchApplyConfirmBtn__-bpdK,
  .tableActions__QNRPo .batchApplyModelCancelBtn__cvi1A {
    position: relative;
    top: 50%;
    margin: 0 auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 0 0 0 30px;
    padding: 10px;
    font-size: 16px;
    font-size: 1rem;

  }

  .tableActions__QNRPo .tipMsg__N8Zi- {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
        -ms-flex: 6;
            flex: 6;
    position: relative;
    top: 0;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    width: 100%;
    line-height: 1.5;
    margin: 15px auto;
  }

  .tableActions__QNRPo .tipMsg__N8Zi- .tipErrorMsg__xRGXl {
      color: #fa1229;
      font-size: 18px;
      font-size: 1.125rem;
      display: inline-block;
   
    }

  .tableActions__QNRPo .tipMsg__N8Zi- .tipNormalMsg__N6NAe {
      color: #26282a;
      font-size: 14px;
      font-size: 0.875rem;
      display: inline-block;
    }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
.fullCategoryPath__TB5Sf {
  position: relative;
  font-size: 16px;
  font-size: 1rem;
  color: #26282a;
  width: 100%;
}

[name="updateVideo"] div.sectionTitle__jwisu {
    display: inline-block;
    left: 0;
  }
  [name="updateVideo"] [data-role="video-uploader"] {
    margin: 0 auto;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.updateBrandIdBlock__OY6Q4 {
  margin: 20px 0 60px;
}


.alginBrandIdButton__KH7vy {
  height: 40px;
  margin-top: 1px;
  margin-left: 11px;
}

.flexContainer__Hf3qg {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.flexItem__Sd47E {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.tip__AiEk0 {
  margin-bottom: 7px;
}

/* 調整 checkbox 讓 section title 不會離 description 太遠 */
    .sectionToggle__YkPi2 .ant-checkbox-wrapper {
      margin: 0;
    }
.updateFailedListingsCard__JHJ8d {
  margin: .2rem auto;
  text-align: center;
  width: 360px;
}

.batchInfo__0fTeQ {
  background-color: #f8f8fa;
  border-bottom: 1px solid #e8e8e8;

}

  .batchInfo__0fTeQ .subTitle__5YW11 {
    font-size: 12px;
    font-size: 0.75rem;
    color: #979ba7;
  }

  .batchInfo__0fTeQ .subTitle__5YW11.counter__o-M35 {
      margin-left: 8px;
    }

  .batchInfo__0fTeQ .highlight__TKnR7 {
    color: rgba(136, 59, 198);
    font-weight: bold;
  }

  .batchInfo__0fTeQ .following__rCOsC {
    color: #3DC350;
  }

.updateListingTable__k-0HD {
  width: 700px;
  margin: .2rem auto 1.5rem;
}

.updateListingTable__k-0HD .ant-card-body {
      padding: 0;
    }

.updateListingTable__k-0HD .ant-row {
      padding: 12px 24px;
      max-height: 150px;
      overflow-y: auto;
    }

.updateListingTable__k-0HD .ant-col-8 {
      text-align: center;
    }

.batchContent__pswfX {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.failed__ljU-H {
  color: #fa1229;
}

.timeTip__ApVv- {
  font-size: 12px;
  font-size: 0.75rem;
  color: #5BB88F
}

.listingQueryBlock__jUOVv {
  text-align: center;
  margin: 1rem;
}

.notFoundIds__eA5rY {
  word-break: break-all;
}
.checkbox__FTfEY label.ant-checkbox-wrapper {
      font-size: 14px;
      font-size: 0.875rem;
    }
    .checkbox__FTfEY span.ant-checkbox-inner,
    .checkbox__FTfEY span.ant-checkbox-inner::after {
      width: 14px;
      height: 14px;
    }
    .checkbox__FTfEY span.ant-checkbox-inner::after {
      width: 6px;
      height: 10px;
      left: 1px;
    }
.batchTime__WD4al {
  display: block;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-size: 16px;
  font-size: 1rem;
  padding: 4px 8px;
  margin: 3px 0;
  width: 180px;
}
.executeStatus__Q16u1 > p {
    line-height: 40px;
    line-height: 2.5rem;
  }
.executeStatus__Q16u1 [data-role="y-icon"]>svg {
    margin-right: 5px;
  }
.executeStatus__Q16u1 [data-icon="ec-check"] {
    fill: #5478fc !important;
  }
.executeStatus__Q16u1 [data-icon="decline"] {
    fill: #fa1229 !important;
  }
.linkContent__-wRTX {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 15px;
}
.panelHeader__vu5fq {
  padding: 4px;
  font-size: 12px;
  font-size: 0.75rem;
}

.iconHolder__GT5u7 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #5478fc;
  padding: 8px;
  border-radius: 50%;
}

.title__Ry5qU {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 500;
  margin-left: 12px;
}

.content__jme0M {
  margin: 1rem 0;
}

.content__jme0M .composeTip__0uK-M {
    color: #a669df;
  }

.content__jme0M .centerArea__mfiIq {
    margin: 0 auto;
  }

.content__jme0M .imageUploaderArea__Wtm2m{
    max-width: 50rem;
    margin-bottom: 1rem;
  }

.content__jme0M .errorArea__D9Hxm {
    margin: 1rem 0;
  }

.content__jme0M .composeBtnArea__3-qzW {
    text-align: center;
  }

.videoBox__N-Zgs {
  padding: 36px 82px 24px 82px;
}

[data-role="video-uploader"] {
  margin: 0 auto;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
.copyArea__NQAMR {
  position: relative;
}
.copyArea__NQAMR .copy__TQFkC [data-role="wysiwyg-iframe"] {
      overflow: auto;
      height: 631px;
    }
.isUpdateWithWarranty__-e1iH {
  margin: 20px 0 10px;
}
.isUpdateWithWarranty__-e1iH .ant-checkbox-disabled~span {
      pointer-events: none;
      color: inherit !important;
    }
.warrantyArea__6dJ-2 {
  border: solid 1px #E0E4E9;
  border-radius: 2px;
  padding-bottom: 20px;
}
.warrantyArea__6dJ-2 .updateWarrantyBtn__PoGv6 {
    margin: 30px 0 0 0;
  }
.panelHeader__0TyAd {
  padding: 4px;
  font-size: 12px;
  font-size: 0.75rem;
}

.iconHolder__HK-Ky {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #5478fc;
  padding: 8px;
  border-radius: 50%;
}

.title__puDEJ {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 500;
  margin-left: 12px;
}


.content__R9X-z {
  margin: 35px 50px 0 50px;
}

  .content__R9X-z .copy__JHut3 .mce-tinymce .mce-edit-area {
        height: 300px;
      }

  .content__R9X-z .copy__JHut3 iframe {
        height: 250px !important;
      }

  .content__R9X-z .copy__JHut3 [class*="info"] p {
      display: none;
    }

  .content__R9X-z .operate__X6Wvy {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100px;
    margin-top: 18px;
    background-color: #f1f1f5;
    padding: 15px;   
  }

  .content__R9X-z .operate__X6Wvy .radio__IsMpD {
      width: 80px;
    }

  .content__R9X-z .operate__X6Wvy .radio__IsMpD label {
        margin: 8px 0;
      }

  .content__R9X-z .operate__X6Wvy .optionsBlock__TaFqi{
      line-height: 35px;
      line-height: 2.1875rem;
      font-size: 16px;
      font-size: 1rem;
    }

  .content__R9X-z .operate__X6Wvy .optionsBlock__TaFqi .addTypeSelect__ev838 {
          width: 140px;
          height: 35px;
        }

  .content__R9X-z .operate__X6Wvy .optionsBlock__TaFqi .text__ZUeTG {
          margin-top: 3px;
          color: #fa1229;
        }

  .content__R9X-z .buttonBlock__BDbku {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-align-content: flex-end;
        -ms-flex-line-pack: end;
            align-content: flex-end;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    width: 100%;
    margin-top: 20px;
    font-size: 16px;
    font-size: 1rem;
  }

  .content__R9X-z .buttonBlock__BDbku p {
      color: #979ba7;
    }
.info__0-cCZ {
  display: inline-block;
  max-width: 500px;
  word-wrap: break-word;
}
.allowLoadmoreBtnArea__zwJZt {
  text-align: center;
}

  .allowLoadmoreBtnArea__zwJZt button[type="button"] {
    margin: 16px 0;
    width: 150px;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
.listingIds__cuwM8 textarea {
      width: 100%;
      height: 100px;
    }
.defaultSpacing__Rr8UW {
  padding: 0 5px;
}
.listingInfo__hpn6x {
  background-color: #F2F5FE;
  padding: 5px 0;
}
.listingInfo__hpn6x .img__Q6dca {
    width: 100%;
    height: 100px;
    /* padding-left: 38px; */
  }
.listingInfo__hpn6x .name__UvoX2 {
    width: 100%;
    font-size: 14px;
    font-size: 0.875rem;
  }
.listingInfo__hpn6x .name__UvoX2 .paragraph__hBEI6 {
      margin-bottom: 4px;
      max-width: 360px;
    }
.listingInfo__hpn6x .halfWidth__HegfJ {
    width: 50%;
    font-size: 14px;
    font-size: 0.875rem;
  }
.listingInfo__hpn6x .cost__cZOx- {
    color: red;
  }
.listingInfo__hpn6x .flag__dV9io {
    border: 1px solid #f26591;
    color: #f26591;
    width: 40px;
    font-size: 12px;
    font-size: 0.75rem;
    text-align: center;
    margin-top: 10px;
  }
.listingInfo__hpn6x .promotions__E2WqR {
    margin: 10px 0 0 10px;
  }
.listingInfo__hpn6x .promotions__E2WqR .title__9-STt {
      font-size: 14px;
      font-size: 0.875rem;
      font-weight: bold;
    }
.listingInfo__hpn6x .promotions__E2WqR .promotionEndTs__-JrOy {
      font-size: 12px;
      font-size: 0.75rem;
      color: #979BA7;
    }
.listingInfo__hpn6x label {
    width: 100px !important;
    min-width: 100px !important;
    padding: 10px 0 0 !important;
    margin: 0 50px !important;
  }
.footerTextBlock__3uut5 {
  margin: 20px 0;
  text-align: center;
  color: #f26591;
}
.submitBtn__ln2E2 {
  margin-right: 22px;
}
.titleField__sM1gY input[type=text] {
    width: 300px;
    height: 30px;
  }
.durationBlock__8-RcC [data-role='help-block'] {
    position: absolute;
    width: 300px;
  }
.discountCountField__tA15- input[type=text], .durationField__t0ePH input[type=text] {
    width: 100px;
    height: 30px;
  }
.discountRuleField__Z4V9f>div {
  line-height: 47px;
  line-height: 2.9375rem;
}
.discountBlock__uKjVW {
  margin-bottom: 20px;
}
.discountThresholdField__aDblK input[type=text], .discountAmountField__scaU4 input[type=text] {
    width: 100px;
    height: 30px;
  }
.dollarTotal__hJOaD {
  font-size: 14px;
  font-size: 0.875rem;
  margin-top: 5px;
  color: red;
}
.isAllowedActivityText__NW-gH {
  margin: 5px 0 10px 0;
  padding: 5px;
  background: #F1F1F5;
}
.footerBlock__-lcGg {
  height: 100%;

}
.footerBlock__-lcGg .footerTextBlock__3uut5 {
    margin-top: 10px;
  }
.footerBlock__-lcGg .footerTextBlock__3uut5 .footerText__OOtRm {
      color: #f26591;
    }
.content__B7kz6 {
  text-align: center;
}
.content__B7kz6 .customImage__XKMbC {
    width: 300px;
    height: 200px;
    margin: 16px 0 10px 0;
  }
.content__B7kz6 .normalImage__8H6Vz {
    width: 300px;
    height: 200px;
    margin: 28px 0;
  }
.content__B7kz6 .titleText__Wd5Kv {
    font-size: 20px;
    font-size: 1.25rem;
  }
.content__B7kz6 .paddingBottomSpace__9kbDK {
    margin-bottom: 15px;
  }
.content__B7kz6 .boldText__8TETu{
    font-weight: bold;
  }
.content__B7kz6 .link__ql4rJ{
    margin-bottom: 28px;
  }
.container__eAPae {
  padding: 30px 30px;
}
.importDescription__9QsRm {
  margin: 10px 0;
  color: red;
}
.resetFormMargin__gre6V {
  margin-top: 20px !important;
}
.resetFormMargin__gre6V label {
    margin-left: 0 !important;
  }
.gridContainer__KcUys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin: 10px 0 64px;
}
.gridItem__EMYwU {
  border: 1px solid #E1E1E6;
  padding: 10px;
  background: #FFF;
  -webkit-box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.1);
          box-shadow: 0 1px 2px 0 rgba(38, 40, 42, 0.1);
  min-width: 0; /**
   * This is needed to prevent the grid items from overflowing their container.
   * It ensures that the items shrink to fit their content if necessary.
   */
}
.targetAudience__h4SrI {
  min-width: 365px;
}
.finalActions__d--c- {
  text-align: center;
  margin: 50px;
  font-size: 16px;
  font-size: 1rem;
}
.results__JDnpw {
  margin-top: 40px;
}
.results__JDnpw div {
    margin: 20px 0;
    padding: 15px 30px;
    text-align: left;
    background: #F4F7FF;
  }
.results__JDnpw h4 {
    font-size: 16px;
    font-size: 1rem;
    font-weight: bold;
  }
.results__JDnpw .badResult__qGrR9 h4 {
    color: red;
  }

.keywordBlock__ADGo- {
  margin: 0 2rem;
  min-height: 76vh;
  /* overflow-y: auto; */
}

.keywordDesc__ak4hd {
  width: 100%;
}

.keywordDesc__ak4hd pre {
    word-break: break-all;
    white-space: pre-wrap;
    font-size: 1.5rem;
  }
.footer__RgMNh {
  background-color: #f8f8f8;
  padding: 16px;
}
  .footer__RgMNh > div {
    text-align: center;
    float: none;
  }

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.pageHeader__aHNcN {
  background-color: #fff;
  border-bottom-color: rgba(151, 151, 151, 0.26);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: -1px;
  position: relative;
}
/* Navbar */
.navbar__Jj0aY {
  width: auto;
  margin: 0 auto;
}
.navbarColor__CG21o {
  background-color: #fff;
  width: 100%;
}
.navbarWrapper__2qo4W {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  margin: 0 32px;
  height: 90px;
}
.logoWrapper__bOFxj a {
  color: #53546e;
}
.functionWrapper__4m21s {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 500;
}
.functionWrapper__4m21s >li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 12px;
  }
.functionWrapper__4m21s >li:hover .y-dropdown-content {
        display: block;
      }
.functionWrapper__4m21s >li:not(:first-child) {
      border-left: 1px solid #e5e5e5;
    }
.functionWrapper__4m21s a {
    color: #54546f;
  }

.layout__rXKBD {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

.errorLayout__kBqeu,
.mainLayout__Uu-nI {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.errorLayout__kBqeu {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.mainLayout__Uu-nI {
  background-color: #fff;
}
.sticky__cPB64 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  /* header 90 + footer 44 */
  max-height: calc(100dvh - 134px);
  overflow-y: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

  .sticky__cPB64 .topItems__hP7k4 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .sticky__cPB64 .bottomItems__jBWSY {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
  }

.subHeader__k2os- {
  height: 62px;
  width: 100%;
  background-color: #eaecf0;
  padding: 0 32px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}

  .subHeader__k2os- > span {
    text-align: center;
  }

  .subHeader__k2os- .subHeaderTextTitle__yd4EI {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }

  .subHeader__k2os- .subHeaderTextSubTitle__nve7q {
    font-size: 14px;
    font-size: 0.875rem;
  }

.main__zakV6 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  border-left: 2px solid #eaecf0;
  overflow: auto;
  width: 800px;
}

  .main__zakV6 .mainContent__WwtxJ {
    padding: 0 48px;
  }
.sidebar__PxvzD {
  width: 280px;
  background-color: #f0f0f0;
}

  .sidebar__PxvzD .ant-anchor-wrapper {
    overflow-x: hidden;
  }
.chartBlock__BXTuZ {
  position: relative;
  padding: 37px 0 15px;
}

.infoTip__JwPh0 {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 23.8%;
  margin-top: -3px;
}
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.saleStat__pKO5c .mainRange__BEBXV {
    width: 308px;
    font-size: 16px;
    font-size: 1rem;
  }
.saleStat__pKO5c .tips__-Ia6m {
    margin-top: 4px;
  }
.saleStat__pKO5c .queryBtn__6TGpk {
    background-color: #5478fc;
    width: 128px;
    border-radius: 2px;
  }
.saleStat__pKO5c .queryBtn__6TGpk:hover {
      background-color: #4868db;
    }
.saleStat__pKO5c .exportButton__h1qe8 {
    margin: 8px 22px;
  }
.ant-calendar-range-picker-input {
    font-size: 16px;
    font-size: 1rem;
  }
/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.ant-radio-button-wrapper {
    border: solid 1px #5478fc;
    color: #5478fc;
  }
.ant-radio-button-wrapper:first-child {
    border: solid 1px #5478fc;
  }
.ant-radio-button-wrapper-checked, .ant-radio-button-wrapper-checked:hover, .ant-radio-button-wrapper:first-child.ant-radio-button-wrapper-checked {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #26282a;
    border: solid 1px #e0e4e9;
    background-color: #f8f8fa;
  }
.Bestseller__D3H8L {
  padding-left: 12px;
}
.info__jw1OI {
  float: right;
}
.bestsellerCard__DMAqh {
  margin-top: 12px;
  max-width: 100%;
  width: 100%;
  border-radius: 3px;
  border: solid 1px #e0e4e9;
}
.bestsellerCard__DMAqh .termHeader__EYDva {
    overflow: visible;
    margin-left: 28px;
  }
.bestsellerCard__DMAqh .ReactTable .rt-table {
        overflow: visible;
      }
.bestsellerCard__DMAqh .ReactTable .rt-noData {
        -webkit-transform: translate(-50%, 10px);
                transform: translate(-50%, 10px);
        padding: 0;
      }
.bestsellerCard__DMAqh .ReactTable .rt-thead.-header {
        min-height: 46px;
        padding: 0px 0px;
      }
.bestsellerCard__DMAqh .ReactTable .rt-thead.-header .rt-tr .rt-th {
            padding: 2px 5px;
            font-weight: normal;
          }
.bestsellerCard__DMAqh .ReactTable .rt-thead.-header .rt-tr .rt-th:first-child {
              padding: 2px;
            }
.bestsellerCard__DMAqh .ReactTable .rt-tr.-even {
        background-color: #f8f8fa
      }
.bestsellerCard__DMAqh .ReactTable .rt-tbody .rt-tr-group {
          border-bottom: solid 1px #F7F7F7;
        }
.bestsellerCard__DMAqh .ReactTable .rt-tbody .rt-td {
          color: #26282a;
          text-align: right;
        }
.bestsellerCard__DMAqh .ReactTable .rt-tbody .rt-td:first-child {
            text-align: left;
          }
.listingId__0LAdA {
  width: 100%;
  text-align: left;
}
.listingName__O7a83 {
  -webkit-flex-basis: 324px;
      -ms-flex-preferred-size: 324px;
          flex-basis: 324px;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
}
.iconExplanationSec__htBv- {
  margin-top: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.tableFooter__5aI2H {
  border-top: solid 1px #E0E4E9;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px;
}
.tableFooter__5aI2H a {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #5478fc;
  }
.optionsRow__AO07q {
  margin-top: 12px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.resultTotal__FqUsp {
  display: block;
  color: #979ba7;
}
.sortTab__1HMug{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.bestsellerTitle__IJa-1 {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 500;
  color: #26282a;
}
.period__z-Nqw {
  letter-spacing: 1px;
  letter-spacing: 0.0625rem;
  font-size: 14px;
  font-size: 0.875rem;
  color: #979ba7;
}
.col__3kvtL {
  margin-left: 32px;
}
.lastCol__bsUsz {
  margin-right: 40px;
}
.listingAndNameCol__4UQJ7 {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: 40px;
}
.checkbox__2vqc3 label {
    margin: 0 !important;
  }
.checkbox__2vqc3 span {
    padding-right: 0;
  }

.sidebar__RgThm {
  width: 280px;
  background-color: #fff;
  overflow-x: hidden;
}

  .sidebar__RgThm .sidebarItem__HWiLi {
    display: block;
    line-height: 2.5rem;
    padding: 0 46px;
    color: rgba(0, 0, 0, 0.65);
    -webkit-text-decoration: none;
    text-decoration: none;
    font-size: 1rem;
    border-bottom: none;
  }

  .sidebar__RgThm .sidebarItem__HWiLi.active {
      color: #5478fc;
      background-color: rgba(84, 120, 252, 0.15);
    }

  .sidebar__RgThm .sidebarItem__HWiLi:hover, .sidebar__RgThm .sidebarItem__HWiLi.active {
      font-weight: bolder;
      border-bottom: none;
    }
.errorLayout__n3XH3 {
  margin: 0 auto;
}

/**
 * media queries
 *
 * 1. sm: <=767
 * 2. md: >=768 && <=1023
 * 3. lg: >=1024 && <=1231 (default)
 * 4. xl: >= 1232
 */
/**
 * variables
 */
/* font */
/* background */
/* dashboard 右邊區塊寬度 */
/* Text overflow
Requires inline-block or block for proper styling */
/* Example of usage:
@include text-ellipsis 2em, 2; */
/* Flexbox Mixins
http://philipwalton.github.io/solved-by-flexbox/
https://github.com/philipwalton/solved-by-flexbox

This is a set of mixins for those who want to mess around with flexbox
using the native support of current browsers. For full support table
check: http://caniuse.com/flexbox

Basically this will use:

* Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
* Final standards syntax (FF, Safari, Chrome, IE11, Opera)

This was inspired by:

* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

With help from:

* http://w3.org/tr/css3-flexbox/
* http://the-echoplex.net/flexyboxes/
* http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
* http://css-tricks.com/using-flexbox/
* http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
* https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes */
/* ---------------------------------------------------------------------- */
/* Flexbox Containers

The 'flex' value causes an element to generate a block-level flex
container box.

The 'inline-flex' value causes an element to generate a inline-level
flex container box.

display: flex | inline-flex

http://w3.org/tr/css3-flexbox/#flex-containers

(Placeholder selectors for each type, for those who rather @extend) */
/* ---------------------------------- */
/* ---------------------------------------------------------------------- */
/* Flexbox Direction

The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.

Values: row | row-reverse | column | column-reverse
Default: row

http://w3.org/tr/css3-flexbox/#flex-direction-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Wrap
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
Values: nowrap | wrap | wrap-reverse
Default: nowrap
http://w3.org/tr/css3-flexbox/#flex-wrap-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Flow (shorthand)

The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.

Values: <flex-direction> | <flex-wrap>
Default: row nowrap

http://w3.org/tr/css3-flexbox/#flex-flow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Order

The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.

Default: 0

http://w3.org/tr/css3-flexbox/#order-property */
/*---------------------------------------------------------------------- */
/* Flexbox Grow

The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.

Default: 0

http://w3.org/tr/css3-flexbox/#flex-grow-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Shrink

The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.

Default: 1

http://w3.org/tr/css3-flexbox/#flex-shrink-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Basis

The 'flex-basis' property sets the flex basis. Negative lengths are invalid.

Values: Like "width"
Default: auto

http://www.w3.org/TR/css3-flexbox/#flex-basis-property */
/* ---------------------------------------------------------------------- */
/* Flexbox "Flex" (shorthand)

The 'flex' property specifies the components of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.

Values: none | <flex-grow> <flex-shrink> || <flex-basis>
Default: See individual properties (1 1 0).

http://w3.org/tr/css3-flexbox/#flex-property */
/* ---------------------------------------------------------------------- */
/* Flexbox Justify Content

The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.

Note: 'space-*' values not supported in older syntaxes.

Values: flex-start | flex-end | center | space-between | space-around
Default: flex-start

http://w3.org/tr/css3-flexbox/#justify-content-property */
/* Shorter version: */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Items

Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)

Values: flex-start | flex-end | center | baseline | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-items-property */
/* ---------------------------------- */
/* Flexbox Align Self

Values: auto | flex-start | flex-end | center | baseline | stretch
Default: auto */
/* ---------------------------------------------------------------------- */
/* Flexbox Align Content

The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.

Values: flex-start | flex-end | center | space-between | space-around | stretch
Default: stretch

http://w3.org/tr/css3-flexbox/#align-content-property */
.BestSelling__HBP1W {
  padding-top: 30px;
}
.BestSelling__HBP1W .info__jJ0ba {
    float: right;
  }
.BestSelling__HBP1W .tips__gTEGg {
    margin-left: 4px;
    color: #979ba7;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: normal;
  }
.BestSelling__HBP1W .pageCount__hRcpW {
    width: 124px;
    display: inline-block;
  }
.BestSelling__HBP1W .Select .Select-control .Select-value,
        .BestSelling__HBP1W .Select .Select-control .Select-placeholder {
          padding-left: 10px;
          padding-right: 10px;
          line-height: 20px;
          line-height: 1.25rem;
        }
.BestSelling__HBP1W .exportButton__RG9X- {
    margin-left: 24px;
  }
.bestSellingTitle__cM4YK {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.bestSellingExportBtn__G1yOE {
  margin-left: 15px;
}
.customTips__i-HyI,
.customBestSellingExportBtn__KijQ9 {
  position: relative;
  top: 200px;
  left: 29.5%;
  z-index: 1;
}