/* ダイアログ */
.ui-dialog-content > div ~ hr{
  margin-top: 30px;
}
.backgroundRow[style*="background: url"][style*=".svg)"],
.backgroundRow[style*="background:url"][style*=".svg)"] {
  background-size: 60px auto !important;/* svgファイルのサムネイル、はみ出し防止 */
}

/* カラーピッカー */
.pickr .pcr-button{
  box-shadow: 0 0 0 1px #ccc;/* 白色選択時見にくい為、線追加 */
}
.pickr .pcr-button.clear{
  visibility:visible !important;/* grid.cssとの競合回避 */
}
.pcr-app .pcr-interaction input {
  order: 1;
}
.pcr-app .pcr-interaction .pcr-save{
  order: 100;
  margin-left: auto;
}
.pcr-app .pcr-interaction .pcr-cancel{
  background-color: gray;
}
.pcr-app .pcr-interaction .pcr-clear{
  ;
}
.pcr-app .pcr-interaction .pcr-result{
  width: calc(80% - .4em);
  flex-basis: calc(80% - .4em);
}
.pcr-app .pcr-interaction .pcr-type{
  width: calc(33% - .4em);
}
.pcr-app .pcr-interaction .pcr-complement{
  order: 0;
  width: calc(20% - .4em);
}
.pcr-app .pcr-interaction .pcr-addition{
  margin-left: auto;
}
.ccm-ui form .input > .pickr{/* 編集ダイアログのfloatずれ修正 */
  float: left;
}

/* 以下、管理画面 */
#controls-colorpalette{
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
#controls-colorpalette .control-label{
  display: none;
}
#controls-colorpalette .pickr ~ .pickr{
  margin-left: 30px;
}

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
.dropdown,.dropleft,.dropright,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty:after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}@media(min-width:576px){.dropdown-menu-sm-left{right:auto;left:0}.dropdown-menu-sm-right{right:0;left:auto}}@media(min-width:768px){.dropdown-menu-md-left{right:auto;left:0}.dropdown-menu-md-right{right:0;left:auto}}@media(min-width:992px){.dropdown-menu-lg-left{right:auto;left:0}.dropdown-menu-lg-right{right:0;left:auto}}@media(min-width:1200px){.dropdown-menu-xl-left{right:auto;left:0}.dropdown-menu-xl-right{right:0;left:auto}}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty:after{margin-left:0}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty:after{margin-left:0}.dropright .dropdown-toggle:after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";display:none}.dropleft .dropdown-toggle:before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty:after{margin-left:0}.dropleft .dropdown-toggle:before{vertical-align:0}.dropdown-menu[x-placement^="bottom"],.dropdown-menu[x-placement^="left"],.dropdown-menu[x-placement^="right"],.dropdown-menu[x-placement^="top"]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#6c757d;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1.5rem;color:#212529}

/* 共通 */
.dropdown-menu .dropdown-item{
  box-sizing: border-box;
}

/* ========== 編集ダイアログ ここから ========== */
.ccm-ui input[type="radio"]{
  margin-top: 0 !important;
  vertical-align: middle;
}
.ccm-picture-rows .d-flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.ccm-picture-rows .flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.ccm-picture-rows h4{
  margin-bottom: 15px;
}

/* タブ */
.ccm-picture-tabs > li + li{
  display: none;
}

/* トリミング */
.ccm-picture-rows .ccm-trimming-field label {
  margin-bottom: 0;
}
.ccm-picture-rows .ccm-trimming-field .input{
  padding-top: 6px;
}
.ccm-picture-rows .ccm-trimming-field .aspect-ratio-w,
.ccm-picture-rows .ccm-trimming-field .aspect-ratio-h,
.ccm-picture-rows .ccm-trimming-field .aspect-ratio-t,
.ccm-picture-rows .ccm-trimming-field .aspect-ratio-l
{
  width: 60px;
}
.ccm-picture-rows .ccm-trimming-field .d-flex > * + * {
  margin-left: 9px;
}
.ccm-picture-rows [data-switch-field="true"]{
  margin-top: 9px;
  padding-top: 9px;
  border-top: solid 1px #ddd;
}
.ccm-picture-rows .ccm-trimming-field .d-flex + .d-flex{
  margin-top: 9px;
}
.ccm-picture-rows [data-switch-field="true"] .d-flex + .d-flex{
  margin-top: 18px;
}
.ccm-picture-rows .ccm-trimming-field .trim_preview_container{
  width: 300px;
  padding: 30px;
  margin-left: auto;
  overflow: hidden;
}
.ccm-picture-rows .ccm-trimming-field .trim_preview{
  position: relative;
}
.ccm-picture-rows .ccm-trimming-field .trim_preview:empty:before{
  content: "トリミングプレビュー";
}
.ccm-picture-rows .ccm-trimming-field .trim_preview .holder {
  display: block;
  height: 0;
}
.ccm-picture-rows .ccm-trimming-field .trim_preview img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  /*-ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;*/
}
.ccm-picture-rows .ccm-trimming-field .trim_preview img:not(.ui-draggable-dragging):not(.ui-draggable-stop) {
  transform: translate(-50%, -50%);
}
.ccm-picture-rows .ccm-trimming-field .trim_preview .cross {
  width:30px;
  height: 1px;
    background-color: #00f;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    margin-left: -15px;
}
.ccm-picture-rows .ccm-trimming-field .trim_preview .cross:after {
    content:"";
    display:block;
    width:100%;
    height:100%;
    transform:rotate(90deg);
    background-color: #00f;
}
.ccm-picture-rows .ccm-trimming-field .trim_preview:after{
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 0 30px rgba(0,0,0,.4);
  position: absolute;
  top: 0;
  left: 0;
  border: solid 1px #00f;
  pointer-events: none;
}

/* ピクセル密度 */
.ccm-picture-rows .ccm-ppi-field ul{
  margin-left: 0;
  margin-bottom: 0;
}
.ccm-picture-rows .ccm-ppi-field ul li{
  display: flex;
}
.ccm-picture-rows .ccm-ppi-field ul li + li{
  margin-top: 9px;
}
.ccm-picture-rows .ccm-ppi-field ul li > label{
  background-color: #f5f5f5;
  margin-bottom: 0;
  display: flex;
  width: 50px;
  justify-content: center;
  border-radius: 4px 0 0 4px;
  border: solid 1px #ccc;
}
.ccm-picture-rows .ccm-ppi-field ul li > label > span{
  align-self: center;
}
.ccm-picture-rows .ccm-ppi-field ul li > label + div{
  width: calc(100% - 50px);
}
.ccm-picture-rows .ccm-ppi-field ul li > label + div div.ccm-file-manager-select,
.ccm-picture-rows .ccm-ppi-field ul li > label + div div.ccm-file-selected-wrapper{
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* ========== 編集ダイアログ ここまで ========== */