/************************************************************************************/

/* init */
/* MEMO: preview タブでの view[layouts.default]の初期化 */

/************************************************************************************/
html,
body {
  height: 100%;
}

#backtotop,
#footer,
.navbar {
  display: none !important;
}

#wrap {
  height: 100%;
}

/************************************************************************************/

/* preview */

/************************************************************************************/
#help-tool-preview {
  height: 100%;
}

#help-tool-preview .button-disabled {
  border: solid #B6B6B6 2px;
  color: #B6B6B6;
}

#help-tool-preview .button-close {
    border: solid #2C5871 2px;
    color: #2C5871;
}

#help-tool-preview .preview-header {
  box-shadow: 1px 1px 5px 1px #ddd;
}

#help-tool-preview .help-tool-download {
  text-align: right;
}

#help-tool-preview .button-disabled {
  cursor: default;
}

#help-tool-preview .preview-header .preview-header-col {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

#help-tool-preview .helptool-howto-list li {
    list-style: disc;
    margin-left: 1.1rem;
}

#help-tool-preview .tag-item-sm {
  padding: .25rem .5rem;
  font-size: 0.75rem;
  background-color: #eee;
  color: #777;
  margin: 0;
}

#preview {
    position: relative;
    padding-top: 20px;
    height: 100%;
}

#preview .preview-image {
  /* filter: blur(2px); 「ぼかし」*/
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#preview #appeal-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

#preview .appeal-modal-backdrop {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
}

#appeal-modal .appeal-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
}

@media screen and (max-width: 480px) {

  #preview .preview-image {
    background-position: center 20%;
  }

  #help-tool-preview .help-tool-download {
      text-align: center;
      margin-top: 15px;
  }

  #help-tool-preview .help-tool-dl-wrap,
  #help-tool-preview .help-tool-dl-wrap .help-tool-dl-btn {
    width: 100%;
  }

}