@charset "UTF-8";
/* ----------------------------------------------------------------
    MYCOLOR CONSOLE STYLE
 ---------------------------------------------------------------- */
/* Base
   変数やライブラリの上書き､便利なクラス達をまとめています｡
 --------------------------------------------------------------- */
/* ----------------------------------------------------------------
    VARIABLES

    各SCSSファイルで使う変数たちをまとめています｡現在は色とフォントのみですが､
    今後UIを整えるに従って適宜変数を追加していってください｡
 ---------------------------------------------------------------- */
/* Colors
 --------------------------------------------------------------- */
/* Fonts
 --------------------------------------------------------------- */
/* ----------------------------------------------------------------
    OVERWRITE LIBRARIES

    css/libraries内のファイルを上書きしたものだけ､こちらにまとめています｡
    その他のスタイルはここに追加せず､他ファイルを使用してください｡
 ---------------------------------------------------------------- */
/* primefaces-default.css
 --------------------------------------------------------------- */
root, html, body {
  font-weight: 100 !important;
}

.ui-radiobutton {
  margin-left: 0;
}

.ui-selectoneradio label {
  margin: 4px 16px 0 10px;
}

#form\:post-table .ui-widget-content {
  border-bottom: 1px dotted #CCC !important;
}

.left-submenu-item {
  max-width: 150px;
  height: 40px;
  background-color: #535353 !important;
  color: #FFF !important;
  font-size: 12px !important;
  vertical-align: middle;
}

.category-table table {
  border-color: #FFF !important;
}

.category-table table td {
  border-color: #FFF !important;
}

.edit-table-layout-column1 {
  min-width: 130px;
  padding-right: 30px !important;
}

.ui-state-highlight .ui-icon {
  background-image: url(/javax.faces.resource/images/ui-icons_333333_256x240.png.html?ln=primefaces-bootstrap);
}

.edit-table-layout-4column-column1 {
  width: 10%;
  font-weight: bold;
  text-align: right;
  min-width: 65px;
  padding-right: 15px !important;
}

.edit-table-layout-4column-column2 {
  width: 40%;
}

.edit-table-layout-4column-column3 {
  width: 10%;
  font-weight: bold;
  text-align: right;
  min-width: 65px;
  padding-right: 15px !important;
}

.edit-table-layout-4column-column4 {
  width: 40%;
}

/* smartadmin-production_unminified.css
 --------------------------------------------------------------- */
#logo {
  margin-top: 2px;
}

nav ul span.menu-item-parent {
  max-width: 158px;
  color: #EEE !important;
  vertical-align: top;
}

nav ul li a {
  font-weight: 100;
}

nav ul ul li > a {
  padding-left: 40px !important;
}

.smart-form .ui-widget-content .ui-spinner-input {
  height: 30px;
  border: 1px solid #CCC;
}

/* bootstrap.css
 --------------------------------------------------------------- */
dl {
  margin: 0px !important;
}

/* ----------------------------------------------------------------
    HELPERS

    JSでclassを付与する時や､新しくclassを作るまでもないような､
    ちょっとしたスタイリングを追加したい時に使用してください｡
 ---------------------------------------------------------------- */
/* Display
 --------------------------------------------------------------- */
.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-inline-box {
  display: -webkit-inline-box;
}

.d-table-cell {
  display: table-cell;
}

.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

/* Float
 --------------------------------------------------------------- */
.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

/* Flex
 --------------------------------------------------------------- */
.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

/* Position
 --------------------------------------------------------------- */
.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.t-50 {
  top: 50%;
}

.t-n1px {
  top: -1px;
}

.t-n2px {
  top: -2px;
}

.t-n8px {
  top: -8px;
}

.l-n10px {
  left: -10px;
}

.l-25 {
  left: 25%;
}

.l-45 {
  left: 45%;
}

.l-5px {
  left: 5px;
}

.l-10px {
  left: 10px;
}

.l-20px {
  left: 20px;
}

.l-25px {
  left: 25px;
}

/* Width
 --------------------------------------------------------------- */
.w-auto {
  width: auto;
}

.w-inherit {
  width: inherit;
}

.w-3 {
  width: 3%;
}

.w-5 {
  width: 5%;
}

.w-6 {
  width: 6%;
}

.w-7 {
  width: 7%;
}

.w-15 {
  width: 15%;
}

.w-17 {
  width: 17%;
}

.w-20 {
  width: 20%;
}

.w-23 {
  width: 23%;
}

.w-30 {
  width: 30%;
}

.w-50 {
  width: 50%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-96 {
  width: 96%;
}

.w-99 {
  width: 99%;
}

.w-100 {
  width: 100%;
}

.w-13px {
  width: 13px;
}

.w-15px {
  width: 15px;
}

.w-25px {
  width: 25px;
}

.w-30px {
  width: 30px;
}

.w-35px {
  width: 35px;
}

.w-38px {
  width: 38px;
}

.w-40px {
  width: 40px;
}

.w-46px {
  width: 46px;
}

.w-50px {
  width: 50px;
}

.w-52px {
  width: 52px;
}

.w-54px {
  width: 54px;
}

.w-60px {
  width: 60px;
}

.w-65px {
  width: 65px;
}

.w-67px {
  width: 67px;
}

.w-70px {
  width: 70px;
}

.w-75px {
  width: 75px;
}

.w-80px {
  width: 80px;
}

.w-100px {
  width: 100px;
}

.w-120px {
  width: 120px;
}

.w-125px {
  width: 125px;
}

.w-130px {
  width: 130px;
}

.w-140px {
  width: 140px;
}

.w-150px {
  width: 150px;
}

.w-160px {
  width: 160px;
}

.w-162px {
  width: 162px;
}

.w-170px {
  width: 170px;
}

.w-180px {
  width: 180px;
}

.w-182px {
  width: 182px;
}

.w-195px {
  width: 195px;
}

.w-200px {
  width: 200px;
}

.w-220px {
  width: 220px;
}

.w-240px {
  width: 240px;
}

.w-250px {
  width: 250px;
}

.w-260px {
  width: 260px;
}

.w-274px {
  width: 274px;
}

.w-278px {
  width: 278px;
}

.w-280px {
  width: 280px;
}

.w-300px {
  width: 300px;
}

.w-320px {
  width: 320px;
}

.w-350px {
  width: 350px;
}

.w-400px {
  width: 400px;
}

.w-450px {
  width: 450px;
}

.w-500px {
  width: 500px;
}

.w-550px {
  width: 550px;
}

.w-585px {
  width: 585px;
}

.w-600px {
  width: 600px;
}

.w-640px {
  width: 640px;
}

.w-645px {
  width: 645px;
}

.w-680px {
  width: 680px;
}

.w-900px {
  width: 900px;
}

.w-902px {
  width: 902px;
}

.w-970px {
  width: 970px;
}

.w-980px {
  width: 980px;
}

.w-980px {
  width: 980px;
}

.w-1450px {
  width: 1450px;
}

.minw-300px {
  min-width: 300px;
}

/* Height
 --------------------------------------------------------------- */
.h-auto {
  height: auto;
}

.h-3 {
  height: 3%;
}

.h-4 {
  height: 4%;
}

.h-5 {
  height: 5%;
}

.h-6 {
  height: 6%;
}

.h-8 {
  height: 8%;
}

.h-15 {
  height: 15%;
}

.h-20 {
  height: 20%;
}

.h-30 {
  height: 30%;
}

.h-45 {
  height: 45%;
}

.h-70 {
  height: 70%;
}

.h-95 {
  height: 95%;
}

.h-100 {
  height: 100%;
}

.h-20px {
  height: 20px;
}

.h-25px {
  height: 25px;
}

.h-26px {
  height: 26px;
}

.h-30px {
  height: 30px;
}

.h-40px {
  height: 40px;
}

.h-225px {
  height: 225px;
}

.h-400px {
  height: 400px;
}

.h-450px {
  height: 450px;
}

.h-700px {
  height: 700px;
}

/* Margin
 --------------------------------------------------------------- */
.m-0 {
  margin: 0;
}

.m-10px {
  margin: 10px;
}

.m-12px {
  margin: 12px;
}

.m-0auto {
  margin: 0 auto;
}

.ml-25 {
  margin-left: 25%;
}

.ml-55 {
  margin-left: 55%;
}

.ml-n10px {
  margin-left: -10px;
}

.ml-n5px {
  margin-left: -5px;
}

.ml-n1px {
  margin-left: -1px;
}

.ml-1px {
  margin-left: 1px;
}

.ml-4px {
  margin-left: 4px;
}

.ml-5px {
  margin-left: 5px;
}

.ml-8px {
  margin-left: 8px;
}

.ml-10px {
  margin-left: 10px;
}

.ml-12px {
  margin-left: 12px;
}

.ml-15px {
  margin-left: 15px;
}

.ml-16px {
  margin-left: 16px;
}

.ml-18px {
  margin-left: 18px;
}

.ml-20px {
  margin-left: 20px;
}

.ml-24px {
  margin-left: 24px;
}

.ml-25px {
  margin-left: 25px;
}

.ml-30px {
  margin-left: 30px;
}

.ml-50px {
  margin-left: 50px;
}

.ml-150px {
  margin-left: 150px;
}

.mt-n1px {
  margin-top: -1px;
}

.mt-n15px {
  margin-top: -15px;
}

.mt-n11px {
  margin-top: -11px;
}

.mt-n10px {
  margin-top: -10px;
}

.mt-n7px {
  margin-top: -7px;
}

.mt-n2px {
  margin-top: -2px;
}

.mt-2px {
  margin-top: 2px;
}

.mt-4px {
  margin-top: 4px;
}

.mt-5px {
  margin-top: 5px;
}

.mt-6px {
  margin-top: 6px;
}

.mt-8px {
  margin-top: 8px;
}

.mt-10px {
  margin-top: 10px;
}

.mt-12px {
  margin-top: 12px;
}

.mt-15px {
  margin-top: 15px;
}

.mt-20px {
  margin-top: 20px;
}

.mt-25px {
  margin-top: 25px;
}

.mt-180px {
  margin-top: 180px;
}

.mr-25 {
  margin-right: 25%;
}

.mr-n10px {
  margin-right: -10px;
}

.mr-1px {
  margin-right: 1px;
}

.mr-4px {
  margin-right: 4px;
}

.mr-5px {
  margin-right: 5px;
}

.mr-8px {
  margin-right: 8px;
}

.mr-10px {
  margin-right: 10px;
}

.mr-12px {
  margin-right: 12px;
}

.mr-15px {
  margin-right: 15px;
}

.mr-80px {
  margin-right: 80px;
}

.mb-n23px {
  margin-bottom: -23px;
}

.mb-n20px {
  margin-bottom: -20px;
}

.mb-n13px {
  margin-bottom: -13px;
}

.mb-n12px {
  margin-bottom: -12px;
}

.mb-n11px {
  margin-bottom: -11px;
}

.mb-n8px {
  margin-bottom: -8px;
}

.mb-2px {
  margin-bottom: 2px;
}

.mb-4px {
  margin-bottom: 4px;
}

.mb-5px {
  margin-bottom: 5px;
}

.mb-6px {
  margin-bottom: 6px;
}

.mb-8px {
  margin-bottom: 8px;
}

.mb-10px {
  margin-bottom: 10px;
}

.mb-12px {
  margin-bottom: 12px;
}

.mb-15px {
  margin-bottom: 15px;
}

.mb-24px {
  margin-bottom: 24px;
}

/* Padding
 --------------------------------------------------------------- */
.p-0px {
  padding: 0 !important;
}

.p-1px {
  padding: 1px;
}

.p-6px {
  padding: 6px;
}

.p-12px {
  padding: 12px;
}

.pl-0px {
  padding-left: 0px;
}

.pl-8px {
  padding-left: 8px;
}

.pl-12px {
  padding-left: 12px;
}

.pt-4px {
  padding-top: 4px;
}

.pt-7px {
  padding-top: 7px;
}

.pt-16px {
  padding-top: 16px;
}

.pr-0px {
  padding-right: 0px;
}

.pr-5px {
  padding-right: 5px;
}

.pr-60px {
  padding-right: 60px;
}

.pb-4px {
  padding-bottom: 4px;
}

.pb-6px {
  padding-bottom: 6px;
}

.pb-12px {
  padding-bottom: 12px;
}

/* Backgrounds
 --------------------------------------------------------------- */
.bg-transparent {
  background-color: transparent !important;
}

.bg-lightpink {
  background-color: #FFC0CB !important;
}

.bg-lightcoral {
  background-color: #F08080 !important;
}

.bg-lightgray {
  background-color: #FAFAFA !important;
}

.bg-gray {
  background-color: #CCC !important;
}

.bg-black {
  background-color: #000 !important;
}

.bg-white {
  background-color: #FFF !important;
}

/* Border
 --------------------------------------------------------------- */
.border-none {
  border: none;
}

.gray-border-top {
  border-top: 1px solid #A8A8A8 !important;
}

/* Clear
 --------------------------------------------------------------- */
.clear-both {
  clear: both;
}

/* Column
 --------------------------------------------------------------- */
.column-8 {
  width: 8.1%;
  height: 51px;
}

/* Colors
 --------------------------------------------------------------- */
.color-blue {
  color: #2D64B5 !important;
}

.color-lightblue {
  color: #2A7DC4 !important;
}

.color-red {
  color: #BB2D11 !important;
}

.color-bright-red {
  color: #ff5656 !important;
}

.color-white-gray {
  color: #FAFAFA !important;
}

/* Font
 --------------------------------------------------------------- */
.font-11px {
  font-size: 11px !important;
}

.font-12px {
  font-size: 12px !important;
}

.font-14px {
  font-size: 14px !important;
}

.font-x-small {
  font-size: x-small;
}

.font-large {
  font-size: large;
}

.font-bold {
  font-weight: bold;
}

/* Text Decoration
 --------------------------------------------------------------- */
.text-underline {
  text-decoration: underline;
}

/* Overflow
 --------------------------------------------------------------- */
.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

/* Text Alignment
 --------------------------------------------------------------- */
.text-webkit-center {
  text-align: -webkit-center;
}

/* Vertical Alignment
 --------------------------------------------------------------- */
.valign-middle {
  vertical-align: middle;
}

.valign-super {
  vertical-align: super;
}

.valign-baseline-middle {
  vertical-align: -webkit-baseline-middle;
}

.valign-text-top {
  vertical-align: text-top;
}

/* Visibility
 --------------------------------------------------------------- */
.visibility-visible {
  visibility: visible;
}

.visibility-hidden {
  visibility: hidden;
}

/* White Space
 --------------------------------------------------------------- */
.white-space-pre {
  white-space: pre;
}

/* Z-index
 --------------------------------------------------------------- */
.zindex-1002 {
  z-index: 1002;
}

/* Growl
 --------------------------------------------------------------- */
.ui-growl {
  z-index: 99999 !important;
}

/* Components
   複数のページにまたがって使われているようなコンポーネントをまとめています｡
 --------------------------------------------------------------- */
/* ----------------------------------------------------------------
    CATEGORY
 ---------------------------------------------------------------- */
#mc-category-custom-table .category-selector,
#mc-category-custom-table .subcategory-selector,
#mc-category-custom-table .subsubcategory-selector,
#mc-category-custom-table .category-mc-selector,
#mc-category-custom-table .subcategory-mc-selector,
#mc-category-custom-table .subsubcategory-mc-selector,
#mc-category-custom-table .brand-menu-selector,
#mc-category-custom-table .short-menu-selector,
#category-custom-table .category-selector,
#category-custom-table .subcategory-selector,
#category-custom-table .subsubcategory-selector,
#category-custom-table .category-mc-selector,
#category-custom-table .subcategory-mc-selector,
#category-custom-table .subsubcategory-mc-selector,
#category-custom-table .brand-menu-selector,
#category-custom-table .short-menu-selector,
#edit-category-table .category-selector,
#edit-category-table .subcategory-selector,
#edit-category-table .subsubcategory-selector,
#edit-category-table .category-mc-selector,
#edit-category-table .subcategory-mc-selector,
#edit-category-table .subsubcategory-mc-selector,
#edit-category-table .brand-menu-selector,
#edit-category-table .short-menu-selector,
#wrap-brand-menu .category-selector,
#wrap-brand-menu .subcategory-selector,
#wrap-brand-menu .subsubcategory-selector,
#wrap-brand-menu .category-mc-selector,
#wrap-brand-menu .subcategory-mc-selector,
#wrap-brand-menu .subsubcategory-mc-selector,
#wrap-brand-menu .brand-menu-selector,
#wrap-brand-menu .short-menu-selector,
#wrap-category-subcategory .category-selector,
#wrap-category-subcategory .subcategory-selector,
#wrap-category-subcategory .subsubcategory-selector,
#wrap-category-subcategory .category-mc-selector,
#wrap-category-subcategory .subcategory-mc-selector,
#wrap-category-subcategory .subsubcategory-mc-selector,
#wrap-category-subcategory .brand-menu-selector,
#wrap-category-subcategory .short-menu-selector,
#wrap-category-subcategory-mc .category-selector,
#wrap-category-subcategory-mc .subcategory-selector,
#wrap-category-subcategory-mc .subsubcategory-selector,
#wrap-category-subcategory-mc .category-mc-selector,
#wrap-category-subcategory-mc .subcategory-mc-selector,
#wrap-category-subcategory-mc .subsubcategory-mc-selector,
#wrap-category-subcategory-mc .brand-menu-selector,
#wrap-category-subcategory-mc .short-menu-selector,
.select-220px .category-selector,
.select-220px .subcategory-selector,
.select-220px .subsubcategory-selector,
.select-220px .category-mc-selector,
.select-220px .subcategory-mc-selector,
.select-220px .subsubcategory-mc-selector,
.select-220px .brand-menu-selector,
.select-220px .short-menu-selector {
  float: left;
}

#mc-category-custom-table .subcategory-selector,
#mc-category-custom-table .subsubcategory-selector,
#mc-category-custom-table .subcategory-mc-selector,
#mc-category-custom-table .subsubcategory-mc-selector,
#mc-category-custom-table .short-menu-selector,
#category-custom-table .subcategory-selector,
#category-custom-table .subsubcategory-selector,
#category-custom-table .subcategory-mc-selector,
#category-custom-table .subsubcategory-mc-selector,
#category-custom-table .short-menu-selector,
#edit-category-table .subcategory-selector,
#edit-category-table .subsubcategory-selector,
#edit-category-table .subcategory-mc-selector,
#edit-category-table .subsubcategory-mc-selector,
#edit-category-table .short-menu-selector,
#wrap-brand-menu .subcategory-selector,
#wrap-brand-menu .subsubcategory-selector,
#wrap-brand-menu .subcategory-mc-selector,
#wrap-brand-menu .subsubcategory-mc-selector,
#wrap-brand-menu .short-menu-selector,
#wrap-category-subcategory .subcategory-selector,
#wrap-category-subcategory .subsubcategory-selector,
#wrap-category-subcategory .subcategory-mc-selector,
#wrap-category-subcategory .subsubcategory-mc-selector,
#wrap-category-subcategory .short-menu-selector,
#wrap-category-subcategory-mc .subcategory-selector,
#wrap-category-subcategory-mc .subsubcategory-selector,
#wrap-category-subcategory-mc .subcategory-mc-selector,
#wrap-category-subcategory-mc .subsubcategory-mc-selector,
#wrap-category-subcategory-mc .short-menu-selector,
.select-220px .subcategory-selector,
.select-220px .subsubcategory-selector,
.select-220px .subcategory-mc-selector,
.select-220px .subsubcategory-mc-selector,
.select-220px .short-menu-selector {
  margin-left: 4px;
}

#mc-category-custom-table .category-selector,
#mc-category-custom-table .subcategory-selector,
#mc-category-custom-table .subsubcategory-selector,
#category-custom-table .category-selector,
#category-custom-table .subcategory-selector,
#category-custom-table .subsubcategory-selector,
#edit-category-table .category-selector,
#edit-category-table .subcategory-selector,
#edit-category-table .subsubcategory-selector {
  width: 25%;
}

#wrap-brand-menu .category-selector,
#wrap-brand-menu .subcategory-selector,
#wrap-brand-menu .subsubcategory-selector,
#wrap-brand-menu .category-mc-selector,
#wrap-brand-menu .subcategory-mc-selector,
#wrap-brand-menu .subsubcategory-mc-selector,
#wrap-brand-menu .brand-menu-selector,
#wrap-brand-menu .short-menu-selector,
#wrap-category-subcategory .category-selector,
#wrap-category-subcategory .subcategory-selector,
#wrap-category-subcategory .subsubcategory-selector,
#wrap-category-subcategory .category-mc-selector,
#wrap-category-subcategory .subcategory-mc-selector,
#wrap-category-subcategory .subsubcategory-mc-selector,
#wrap-category-subcategory .brand-menu-selector,
#wrap-category-subcategory .short-menu-selector,
#wrap-category-subcategory-mc .category-selector,
#wrap-category-subcategory-mc .subcategory-selector,
#wrap-category-subcategory-mc .subsubcategory-selector,
#wrap-category-subcategory-mc .category-mc-selector,
#wrap-category-subcategory-mc .subcategory-mc-selector,
#wrap-category-subcategory-mc .subsubcategory-mc-selector,
#wrap-category-subcategory-mc .brand-menu-selector,
#wrap-category-subcategory-mc .short-menu-selector {
  width: 260px;
}

.select-220px .category-selector,
.select-220px .subcategory-selector,
.select-220px .subsubcategory-selector {
  width: 220px;
}

.category-single-panel,
.category-smart-form {
  padding: 7px 14px 15px;
  background: rgba(248, 248, 248, 0.9) !important;
  border-top: 1px solid #000 !important;
}

.category-single-panel {
  display: block;
}

.category-table-search tbody, .category-table-search tbody tr td {
  background-color: transparent !important;
  border: none;
}

.category-custom-table .ui-datatable-tablewrapper td {
  padding: 5px 0 5px 0;
}

/* ----------------------------------------------------------------
    DIALOG
 ---------------------------------------------------------------- */
/* UI Dialog
 --------------------------------------------------------------- */
.ui-confirm-dialog.ui-dialog.ui-widget-content .ui-icon {
  background-image: none !important;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: center;
}

.ui-dialog-layered-images.ui-widget-content .ui-dialog-content {
  padding: 0;
}

.ui-dialog-content {
  height: 95% !important;
}

.ui-dialog-button,
.ui-dialog-footer {
  display: inline-block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ui-dialog-button button,
.ui-dialog-footer button {
  width: 160px;
}

.ui-dialog-button {
  margin-top: 20px;
}

/* Other Dialog
 --------------------------------------------------------------- */
.addFKUDialog,
.addSKUDialog,
.editFKUDialog,
.editSKUDialog,
.helpDialog,
.fkuDialog,
.reservationDialog {
  height: 99% !important;
}

/* ----------------------------------------------------------------
    FORM
 ---------------------------------------------------------------- */
/* Input
 --------------------------------------------------------------- */
.ui-inputnumber > input {
  width: 100%;
}

/* Checkbox
 --------------------------------------------------------------- */
.ui-chkbox-box {
  margin-right: 10px;
}

.ui-selectmanycheckbox label {
  margin: 4px 16px 0 0;
}

.ui-selectcheckboxmenu-panel {
  position: absolute !important;
}

.cke_source {
  font-family: Meiryo UI, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}

/* Dropdown
 --------------------------------------------------------------- */
.ui-autocomplete .ui-autocomplete-dropdown {
  position: absolute;
  width: 22px;
  height: 28px;
}

/* ----------------------------------------------------------------
    GALLERIA
 ---------------------------------------------------------------- */
/* Base
 --------------------------------------------------------------- */
.ui-galleria {
  width: 100% !important;
}

/* Panel
 --------------------------------------------------------------- */
.ui-galleria-panel-wrapper {
  width: 70% !important;
}

.ui-galleria-panel {
  width: 100% !important;
}

/* Navigation
 --------------------------------------------------------------- */
.ui-galleria-nav-prev,
.ui-galleria-nav-next {
  top: 50%;
  background-position-y: -16px !important;
}

.ui-galleria-nav-prev {
  background-position-x: -97px !important;
}

.ui-galleria-nav-next {
  background-position-x: -32px !important;
}

div.ui-galleria-nav-prev.ui-icon.ui-icon-circle-triangle-w,
div.ui-galleria-nav-next.ui-icon.ui-icon-circle-triangle-e {
  top: 0;
  width: 15%;
  height: 300px;
  background-position-x: 50% !important;
  background-position-y: 0 !important;
}

div.ui-galleria-nav-prev.ui-icon.ui-icon-circle-triangle-w {
  left: 0;
}

div.ui-galleria-nav-next.ui-icon.ui-icon-circle-triangle-e {
  left: 85%;
}

/* Other
 --------------------------------------------------------------- */
.ui-galleria-filmstrip-wrapper {
  display: none;
}

/* ----------------------------------------------------------------
    MEDIA
 ---------------------------------------------------------------- */
/* Video
 --------------------------------------------------------------- */
.videos_table_extra_video {
  width: 40%;
}

.videos_table_thumbnail {
  width: 40%;
}

.videos_table_extra_operation {
  width: 16%;
}

/* Images
 --------------------------------------------------------------- */
.images_table_extra_image {
  width: 50%;
}

.images_table_extra_division {
  width: 30%;
}

.images_table_extra_operation {
  width: 20%;
}

.images_table_extra_operation_no_padding {
  width: 20%;
  padding: 0;
}

.image-table-top,
.image-table-bottom {
  display: flex;
  justify-content: flex-end;
  margin-left: 5px;
  padding: 0;
}

.image-table-top {
  margin-bottom: 3px;
}

.image-table-bottom {
  margin-top: 3px;
}

.preview_image_list_fku {
  max-width: 100px;
  max-height: 100px;
}

.homebrew-image {
  padding: 4px;
  border: 1px solid #CCC;
  border-bottom: none;
}

/* Media Width/Height
 --------------------------------------------------------------- */
.media-h-150px,
.media-h-170px,
.media-h-200px,
.media-h-250px {
  display: block;
  position: relative;
  width: 100%;
  text-align: -webkit-center;
}

.media-h-150px {
  height: 150px;
}

.media-h-170px {
  height: 170px;
}

.media-h-200px {
  height: 200px;
}

.media-h-250px {
  height: 250px;
}

.media-max-120px-120px,
.media-max-150px-150px,
.media-max-250px-170px,
.media-max-250px-200px,
.media-max-250px-250px,
.media-max-250px-300px,
.media-max-300px-150px,
.media-max-350px-170px {
  position: relative;
  height: 100%;
}

.media-max-120px-120px {
  max-width: 120px;
  max-height: 120px;
}

.media-max-150px-150px {
  max-width: 150px;
  max-height: 150px;
}

.media-max-250px-170px {
  max-width: 250px;
  max-height: 170px;
}

.media-max-250px-200px {
  max-width: 250px;
  max-height: 200px;
}

.media-max-250px-250px {
  max-width: 250px;
  max-height: 250px;
}

.media-max-250px-300px {
  max-width: 250px;
  max-height: 300px;
}

.media-max-300px-150px {
  max-width: 300px;
  max-height: 150px;
}

.media-max-350px-170px {
  max-width: 350px;
  max-height: 170px;
}

/* Media Command
 --------------------------------------------------------------- */
.media-command-btns {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------------
    PANEL
 ---------------------------------------------------------------- */
/* UI Related
 --------------------------------------------------------------- */
.ui-panel-group {
  display: block;
  text-align: center;
}

.ui-autocomplete-panel {
  position: fixed !important;
}

.ui-selectonemenu-panel {
  z-index: 13000 !important;
}

.ui-selectcheckboxmenu-panel {
  z-index: 13000 !important;
}

.ui-search-panelgrid tr {
  background-color: transparent !important;
}

.panelgrid-user-flags .ui-panelgrid-cell {
  border: 1px dotted #CCC !important;
}

.productclass-list-tab .ui-tabs-panels .ui-tabs-panel {
  padding: 0;
}

/* Save Panel
 --------------------------------------------------------------- */
.save-panel-command,
.save-panel-command-2,
.save-panel-command-3 {
  padding: 1px;
}

.save-panel-command,
.save-panel-command-2 {
  width: 120px;
}

.save-panel-command,
.save-panel-command-3 {
  margin-left: 10px;
  margin-right: 10px;
}

.save-panel-command-2 {
  margin-right: 8px;
}

.save-panel-command-3 {
  width: 200px;
}

.panel-center {
  text-align: center;
}

/* ----------------------------------------------------------------
    TABLE
 ---------------------------------------------------------------- */
/* Default Table
 --------------------------------------------------------------- */
.default-table-panel {
  height: 100%;
  max-width: 350px;
  max-height: 250px;
}

.default-table-selection {
  width: 35px;
  text-align: center;
}

.default-table-report {
  min-width: 1000px;
  max-width: 1800px;
  margin: 12px;
  text-align: right;
}

.default-table-btn {
  margin-left: 25%;
  margin-right: 25%;
  color: #2D64B5 !important;
}

.default-table-header,
.default-table-description {
  display: block;
  text-align: center;
}

.default-table-header {
  height: 20px;
}

.default-table-description {
  height: 30px;
  margin-top: -1px;
  padding: 6px;
}

.default-edit-table {
  min-height: 53px;
}

.default-edit-table-image {
  min-height: 53px;
  text-align: center;
}

.sell_through {
  text-decoration: line-through;
}

.sell_price {
  margin-left: 5px;
  color: #BB2D11 !important;
}

.current,
.future {
  background-image: none !important;
  color: #000 !important;
}

.current {
  background-color: #00ae28 !important;
}

.future {
  background-color: #f1ffa3 !important;
}

/* Edit Table
 --------------------------------------------------------------- */
.edit-table-layout-column2,
.edit-table-layout-subcolumn2 {
  width: 80%;
}

.edit-table-layout-column2-for-sub {
  padding: 0 !important;
}

.edit-table-layout-subcolumn1 {
  width: 20%;
  min-width: 130px;
  font-weight: bold;
}

.edit-table.ui-panelgrid {
  border-width: 0 !important;
}

.edit-table.ui-panelgrid tbody:last-child > tr:last-child {
  border-bottom: 0 !important;
}

.edit-table-command {
  position: relative;
  top: -1px;
  margin-left: 12px;
}

/* Sidebar Table
 --------------------------------------------------------------- */
.sidebar-table {
  height: 80%;
  margin-top: 10px;
  overflow: scroll;
  font-size: 11px !important;
}

/* Sub Table
 --------------------------------------------------------------- */
.subtable {
  margin: -1px;
}

.subtable thead th {
  background: none !important;
  border: none !important;
}

/* Data Table
 --------------------------------------------------------------- */
.datatable-no-header thead {
  display: none;
}

.ui-datatable tbody td {
  border-color: #CCC;
}

.ui-datatable tbody td.w-70 {
  margin: -1px;
  padding: 0;
}

.ui-datatable .ui-datatable-tablewrapper {
  overflow: initial;
}

.ui-datatable .ui-datatable-tablewrapper td,
.ui-datatable .ui-datatable-tablewrapper td span {
  word-break: break-all;
}

.ui-datatable.borderless thead th,
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
  border-style: none;
}

/* Borderless/No Bordered
 --------------------------------------------------------------- */
.inner-borderless tbody,
.inner-borderless tbody tr,
.n-bordered tbody,
.n-bordered tbody tr {
  border: none;
}

.inner-borderless tr:first-child > td,
.n-bordered tr:first-child > td {
  border-top: none;
}

.inner-borderless tr:last-child > td,
.n-bordered tr:last-child > td {
  border-bottom: none;
}

.inner-borderless tr > td:first-child,
.n-bordered tr > td:first-child {
  border-left: none;
}

.inner-borderless tr > td:last-child,
.n-bordered tr > td:last-child {
  border-right: none;
}

.inner-borderless tbody,
.inner-borderless tbody tr {
  border-color: #CCC !important;
}

.inner-borderless div:first-child {
  border-radius: 3px;
}

.n-bordered tbody td {
  height: 59px;
}

/* Other
 --------------------------------------------------------------- */
td.w-70 {
  padding: 0;
}

td.ui-editable-column.ui-state-highlight {
  padding-left: 3px !important;
  background: #FFF !important;
  border: 1px solid #CCC !important;
  color: #333 !important;
}

tr.ui-state-highlight td .ui-chkbox .ui-state-active span {
  background-color: #ffffff;
}

/* ----------------------------------------------------------------
    OTHER COMPONENTS
 ---------------------------------------------------------------- */
/* Ajax Status
 --------------------------------------------------------------- */
.ajax-status {
  position: fixed;
  top: 0px;
  left: 0px;
  color: #BB2D11 !important;
  font-size: 20px !important;
  font-weight: bold !important;
}

/* Blog
 --------------------------------------------------------------- */
.blog-category-label {
  position: relative;
  top: 8px;
  margin-left: 5px;
}

/* Button
 --------------------------------------------------------------- */
.btn {
  font-weight: 200 !important;
}

.ui-button-text-only .ui-button-text {
  text-shadow: none;
}

.field-btn-delete {
  position: relative;
  top: -1px;
  margin-left: 20px;
}

/* Calendar
 --------------------------------------------------------------- */
.ui-calendar input {
  width: 96%;
}

/* Carousel
 --------------------------------------------------------------- */
.ui-carousel-layered-images .ui-carousel-viewport .ui-carousel-items .ui-carousel-item {
  border-width: 0 !important;
}

.carousel-dialog-panel {
  height: 178px;
}

.carousel-dialog-panel-image {
  width: 98%;
  height: 98%;
  padding: 2px;
}

/* Error
 --------------------------------------------------------------- */
.error-message {
  height: 200px;
  font-size: 18px !important;
  font-weight: bold;
  line-height: 11;
  text-align: center;
}

/* Inplace
 --------------------------------------------------------------- */
body .ui-inplace .ui-inplace-display {
  padding: 0.429em;
}

.ui-inplace-editor button {
  width: 20px;
  height: 20px;
  vertical-align: sub;
}

.inplace-spinner input {
  width: 30px;
}

/* Paginator
 --------------------------------------------------------------- */
.ui-paginator .ui-paginator-rpp-options {
  height: 21px;
}

/* Post Header & Footer
 --------------------------------------------------------------- */
.post-header-command,
.post-footer-command {
  width: 120px;
}

/* Report Card
 --------------------------------------------------------------- */
.default-layout-report-card {
  width: 100%;
  margin-top: 8px;
  margin-right: 1px;
  margin-bottom: 8px;
  font-size: 12px !important;
}

.default-layout-report-card .report-card-wrapper,
.default-layout-report-card .report-card-image {
  display: block;
}

.default-layout-report-card .report-card-wrapper {
  height: 250px;
  text-align: center;
}

.default-layout-report-card .report-card-image {
  margin: 0 auto;
  max-width: 250px;
  max-height: 250px;
}

/* Resource
 --------------------------------------------------------------- */
.resource-list-panel {
  left: -10px;
  margin-top: 10px;
}

.resource-list-command {
  top: -1px;
  left: 10px;
  width: 120px;
  vertical-align: middle;
}

/* Ribbon
 --------------------------------------------------------------- */
#ribbon {
  background-color: #535353 !important;
}

#ribbon .breadcrumb {
  color: #EEE !important;
}

/* Search
 --------------------------------------------------------------- */
.search-toolbar .ui-selectonemenu .ui-selectonemenu-trigger,
.search-brand .ui-selectonemenu-trigger {
  width: 40px;
}

.ui-fileupload-content {
  border-bottom: 0px !important;
}

.search-toolbar-panel {
  min-width: 630px;
  margin-left: -10px;
  margin-bottom: 18px;
}

.search-bulk-menu {
  width: 287px;
  vertical-align: middle;
}

.search-command-btn {
  left: 10px;
  width: 120px;
  vertical-align: middle;
}

.ui-search-panelgrid .ui-calendar input,
.input-144px .ui-calendar input {
  width: 144px;
}

/* Simple Grid
 --------------------------------------------------------------- */
.simple-grid div:first-child {
  border-bottom: 0 !important;
}

/* Tabs
 --------------------------------------------------------------- */
.ui-tabs .ui-tabs-nav.ui-widget-header li a {
  color: #000 !important;
}

.ui-tabs-pl0 .ui-tabs-panel {
  padding-left: 0 !important;
  border: none !important;
}

/* Toolbar
 --------------------------------------------------------------- */
.list-toolbar {
  padding: 8px 10px;
}

/* Version
 --------------------------------------------------------------- */
.version-info-sm {
  height: 100%;
  padding-left: 12px;
  padding-right: 12px;
  background-color: transparent !important;
}

.version-info-sm .version {
  color: #EEE !important;
  font-weight: 400;
  line-height: 49px;
  text-decoration-line: none;
  text-decoration-style: initial;
  text-decoration-color: initial;
  vertical-align: middle;
}

/* Widget
 --------------------------------------------------------------- */
.ui-widget-content .ui-datatable-empty-message td {
  padding: 10px;
}

/* Partials
   一箇所のxhtmlでしか使われていないスタイリングをまとめています｡
 --------------------------------------------------------------- */
/* ----------------------------------------------------------------
    Index

    Path: /src/main/webapp/index.xhtml
 ---------------------------------------------------------------- */
html,
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Ｐゴシック", "MS PGothic";
}

.ui-log {
  position: absolute; !important;
  left: auto !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
}

.ui-log .ui-log-header {
  height: 25px;
}

.ui-log .ui-log-header .ui-log-button.ui-log-open-close {
  left: 128px;
  top: 4px;
}

/* Fading Bars
 --------------------------------------------------------------- */
#fadingBarsG {
  position: relative;
  width: 240px;
  height: 29px;
}

.fadingBarsG {
  position: absolute;
  top: 0;
  width: 29px;
  height: 29px;
  background-color: #2D64B5 !important;
  -webkit-animation-name: bounce_fadingBarsG;
  -webkit-animation-duration: 1.3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: linear;
  -webkit-transform: scale(0.3);
  animation-name: bounce_fadingBarsG;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-direction: linear;
  transform: scale(0.3);
}

#fadingBarsG_1 {
  left: 0;
  -webkit-animation-delay: 0.52s;
  animation-delay: 0.52s;
}

#fadingBarsG_2 {
  left: 30px;
  -webkit-animation-delay: 0.65s;
  animation-delay: 0.65s;
}

#fadingBarsG_3 {
  left: 60px;
  -webkit-animation-delay: 0.78s;
  animation-delay: 0.78s;
}

#fadingBarsG_4 {
  left: 90px;
  -webkit-animation-delay: 0.91s;
  animation-delay: 0.91s;
}

#fadingBarsG_5 {
  left: 120px;
  -webkit-animation-delay: 1.04s;
  animation-delay: 1.04s;
}

#fadingBarsG_6 {
  left: 150px;
  -webkit-animation-delay: 1.17s;
  animation-delay: 1.17s;
}

#fadingBarsG_7 {
  left: 180px;
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

#fadingBarsG_8 {
  left: 210px;
  -webkit-animation-delay: 1.43s;
  animation-delay: 1.43s;
}

@-webkit-keyframes bounce_fadingBarsG {
  0% {
    -webkit-transform: scale(1);
    background-color: #2D64B5 !important;
  }
  100% {
    -webkit-transform: scale(0.3);
    background-color: #FFF !important;
  }
}

@keyframes bounce_fadingBarsG {
  0% {
    transform: scale(1);
    background-color: #2D64B5 !important;
  }
  100% {
    transform: scale(0.3);
    background-color: #FFF !important;
  }
}

/* Row / Column
 --------------------------------------------------------------- */
.index-row {
  width: 980px;
  margin: 180px auto 0 150px;
}

.index-col-6 {
  display: table-cell;
  float: none;
  height: 291px;
  vertical-align: middle;
}

/* ----------------------------------------------------------------
    Index

    Path: /src/main/webapp/template/layout.xhtml
 ---------------------------------------------------------------- */
.ui-timepicker-table {
  display: inline-table;
  width: 250px;
}

.ui-timepicker-table td a {
  display: block;
  width: 100%;
  padding: 0.2em 0.3em 0.2em 0.5em;
  cursor: pointer;
  text-align: right;
  text-decoration: none;
}

.default-layout-widget-header {
  padding: 4px 0;
  text-align: center;
}

.default-layout-galleria {
  position: relative;
  height: 100%;
  max-width: 250px;
  max-height: 300px;
  background-position: center;
  background-size: contain;
}

.layout-ajax-status {
  display: block;
  height: 24px;
  margin-bottom: 2em;
}

/* ----------------------------------------------------------------
    Index

    Path: /src/main/webapp/template/smbrand/left.xhtml
 ---------------------------------------------------------------- */
.left-login-info {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0 !important;
  background-color: #FFF !important;
  color: #000 !important;
  font-size: 12px !important;
}

.left-login-info span a span {
  display: inline-block;
  overflow: hidden;
  max-width: 150px;
  font-size: 14px !important;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: capitalize;
  vertical-align: middle;
  white-space: nowrap;
}

.left-menu-item {
  max-width: 150px;
  height: 40px;
  background-color: #A8A8A8 !important;
  color: #FFF !important;
  font-size: 12px !important;
  vertical-align: middle;
}

.login-info-sm {
  height: 100%;
  padding-right: 12px;
  padding-left: 12px;
  background-color: #FFF !important;
  border-top-color: #535353 !important;
  border-top-style: solid;
  border-top-width: 1px;
}

.login-info-sm .username {
  color: #A8A8A8 !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 40px;
  text-decoration-color: initial;
  text-decoration-line: none;
  text-decoration-style: initial;
  vertical-align: middle;
}

.side-navi-login-info {
  background-color: #FFF !important;
}

.side-navi-menu a {
  font-weight: 200;
}

.program-menu-item {
  padding-left: 38px !important;
}

.content-cell {
  background-color: #535353 !important;
  color: #EEE !important;
}

.aside {
  background-image: linear-gradient(to right, #FFF, #FFF) !important;
}

#left-panel {
  width: 230px;
  background-image: linear-gradient(to right, #FFF, #FFF) !important;
}

/* ----------------------------------------------------------------
    Other Partials
 ---------------------------------------------------------------- */
/* Auto Purchase
   Path: /src/main/webapp/seller_sales_order/autopurchase.xhtml
 --------------------------------------------------------------- */
.autopurchase-cart {
  height: 31px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.autopurchase-cart #productnumber {
  height: 31px;
  margin-top: 12px;
}

.autopurchase-cart #productnumber + .command-btn {
  margin-left: 12px;
  margin-top: 12px;
}

/* Body
   Path: /src/main/webapp/template/smbrand/body.xhtml
 --------------------------------------------------------------- */
.jarviswidget-color-darken > header {
  background-color: #535353 !important;
  color: #EEE !important;
}

.body-commands {
  float: right;
  line-height: 30px;
}

/* Delivery Table / Delivery Address Table
   Path: /src/main/webapp/resources/components/field_user_delivery_addresses.xhtml
 --------------------------------------------------------------- */
.delivery-table {
  width: 1000px;
  padding: 10px 0;
}

.delivery-address-table .ui-widget-content {
  width: 540px;
  border: 1px solid #CCC !important;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}

.delivery-address-table .ui-widget-content td {
  padding: 10px 0 10px 0;
}

.delivery-address-table .ui-button {
  width: 90px;
}

.delivery-dialog-panel {
  left: -10px;
  width: 350px;
}

.delivery-dialog-btns {
  display: inline-block;
  width: 100%;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  text-align: right;
}

/* Easy Edit
   Path: /src/main/webapp/brand_page_parts/easy_edit.xhtml
 --------------------------------------------------------------- */
.easy-edit-table table,
.easy-edit-table td {
  border: 1px solid black;
}

.easy-edit-table th {
  text-align: center;
}

/* Field Coupon Expiration
   Path: /src/main/webapp/resources/components/field_coupon_expiration.xhtml
 --------------------------------------------------------------- */
.coupon-table td {
  padding: 10px !important;
}

/* Header
   Path: /src/main/webapp/template/smbrand/header.xhtml
 --------------------------------------------------------------- */
#header > :first-child,
aside {
  width: 150px;
}

.header-bg {
  background-image: linear-gradient(to bottom, #FFF, #FFF) !important;
}

/* Preview
   Path: /src/main/webapp/preview.xhtml
 --------------------------------------------------------------- */
.preview-text img {
  width: 100%;
}

.preview-smart-form {
  display: flex;
  align-items: center;
}

.preview-grid tbody tr > td {
  text-align: -webkit-center;
}

.preview-grid-panel {
  display: block;
  margin-left: 12px;
  margin-top: 20px;
  margin-bottom: 50px;
  padding: 17px;
  border: gray solid 1px !important;
  overflow-y: auto;
  text-align: -webkit-auto;
}

/* User Flag
   Path: /src/main/webapp/resources/components/user_flag.xhtml
 --------------------------------------------------------------- */
.user-flag-radios .select-one-radio {
  margin: 10px 0 10px 30px;
}