/* Add your custom styles here */

/* Adds a bit of spacing to "Responsive Grid Row" blocks. */
.crx-grid {
  padding-top: 40px;
  padding-bottom: 40px;
}
.crx-grid .crx-grid {
  padding-top: 0;
  padding-bottom: 0;
}

.hero-fg {
  padding-top: 23px;
  padding-bottom: 23px;
}

.btn.rounded-pill {
  --bs-btn-padding-x: 0.3rem;
  --bs-btn-padding-y: 0.0rem;
}

/************************************
** 汎用
************************************/
/* text align */
.text-right{
  text-align: right !important;
}

/* modal lightbox */
#lightboxModalFullscreen .modal-content {background-color:unset;}
#LightboxCanvas{max-width:100%; max-height:100%;}

/************************************
** bootstrap
************************************/
/* container */
@media (min-width: 1600px){
  .container {
      max-width: 1560px;
  }
}
@media (min-width: 1860px){
  .container-xxxl {
      max-width: 1820px;
  }
}
@media (min-width: 2000px){
  .container-xxxl {
      max-width: 1960px;
  }
}
    
/* modal */
.modal-dialog {
  margin-bottom: 100px;
}

@media (min-width: 1600px){
  .modal-xl {
      --bs-modal-width: 1560px;
  }
}
@media (min-width: 1860px){
  .modal-xl {
      --bs-modal-width: 1800px;
  }
}

/* modal */
.chart-modal.show {
  z-index: 10000;
}
.modal-ex{
  max-width: 98%;
  margin: 1rem auto 100px;
}
.modal-ex .modal-content{
  border: none;
}
/* .modal .modal-ex{
  height: calc(100% - 2rem);
} */


/************************************
** plotly
************************************/
/* custom modebar */
.modebar-btn {
  opacity: 0;
}
.plotly:hover .modebar-btn {
  opacity: 1;
}
.modebar-link {
  opacity: 0;
}
.plotly:hover .modebar-link {
  opacity: 1;
}


/************************************
** htmx
************************************/
/* lazy load */
.htmx-indicator {
  position: relative;
}
.lazy-load-indicator {
  position: relative;
}
.bg-wait-svg {
  width: 150px;
  height: 150px;
  background-image: url("/static/website/assets/waiting-circle-gray.5a698096ab2f.svg");
  background-size: 150px;

  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 100;
  display:none;
}
.htmx-request .bg-wait-svg {
  display:block;
}
.lazy-requesting .bg-wait-svg {
  display:block;
}

.htmx-indicator.spinner-border {
  display:none;
}
.htmx-indicator.htmx-request.spinner-border {
  display:inherit;
}

/************************************
** table
************************************/
/* button cell */
td.btn-cell {
  width: 4%;
  border: 0px;
}
td.btn-cell .btn{
  visibility: hidden;
}
tr:hover td.btn-cell .btn{
  visibility: visible;
}
td.btn-cell input{
  visibility: hidden;
}
td.btn-cell:hover input{
  visibility: visible;
}
td.btn-cell input[type="checkbox"]:checked{
  visibility: visible;
}
tr.dragging-down td{
  border-bottom: 2px solid blue;
}
tr.dragging-up td{
  border-top: 2px solid blue;
}


/************************************
** form
************************************/
/*** custom checkboxes ***/
input.pi-check { 
  transform: scale(2) translateX(50%) translateY(16%);
} 
input.form-check-input.pi-switch { 
  float: none;
  transform: scale(1.2) translateY(40%);
} 
input.pi-check:focus {
  outline: none;
}
input.form-check {
  transform: scale(2) translateX(50%) translateY(16%);
}


/************************************
** brand logo
************************************/
.navbar-brand img:hover {
  animation: shake .5s;
}
@keyframes shake {
	10% { transform: scale(1.12); }
	40% { transform: scale(.9); }
	60% { transform: scale(1.04); }
	80% { transform: scale(.98); }
}

/************************************
** Article page
************************************/
article.crx-article{
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  margin-top: 1rem;
  padding: 2%;
}

.crx-article .article-body {
    max-width: 1020px;
}

.crx-article h1 {
    margin-top: 0.5em;
    color: #2c3e50;
}

.crx-article .article-meta-info {
  padding-bottom: 1.0em;
  border-bottom: 3px solid #3498db;
}

.crx-article h2 {
  /* padding-top: 3.4em;
  margin-top: -1.7em;
  margin-bottom: 1rem; */
  font-size: 1.6em;
  margin: 40px 0 20px 0;
  color: #2c3e50;
  font-weight: 600;
  border-left: 4px solid #3498db;
  padding-left: 15px;
  /* background: linear-gradient(90deg, rgba(52, 152, 219, 0.1) 0%, rgba(52, 152, 219, 0) 10%); */
  padding: 8px 0 8px 15px;
  border-radius: 0 4px 4px 0;
}

.crx-article h3 {
  font-size: 1.25em;
  padding-top: 2.6em;
  margin-top: -1.7em;
  margin-bottom: 1rem;
}

.crx-article h4 {
  padding-top: 2.6em;
  margin-top: -1.7em;
  margin-bottom: 1rem;
}

.crx-article strong {
  background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;
}

/* セクション区切り */
.crx-article .section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e1e5e9;
}

.crx-article .section:last-child {
    border-bottom: none;
}

/* 警告ボックス */
.crx-article .warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 0 6px 6px 0;
}

.crx-article .warning p {
    margin: 0;
    color: #856404;
}

/* 注意ボックス */
.crx-article .note {
    background: #e8f4fd;
    border-left: 4px solid #3498db;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 0 6px 6px 0;
}

.crx-article .note p {
    margin: 0;
    color: #2c5aa0;
}

/* 成功/完了ボックス */
.crx-article .success {
    background: #f0f8f0;
    border-left: 4px solid #28a745;
    padding: 15px 25px;
    margin: 20px 0;
    border-radius: 0 6px 6px 0;
}

.crx-article .success p {
    margin: 0;
    color: #155724;
}

/* siblings */
.siblings {
  max-width: 1020px;
  font-size: 1.2em;
}

.siblings .link-deco-muted{
  text-decoration: none;
}

.page-prev {
  position: relative;
  padding-left: 1.6em;
}

.page-prev::before {
  content: "";
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/><path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
  background-repeat: no-repeat;
  background-position: left center;
  position: absolute;
  left: 0;
  height: 2.8em;
  width: 1.6em;
}

.page-next {
  position: relative;
  padding-right: 1.6em;
  text-align: right;
}

.page-next::before {
  content: "";
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/><path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  position: absolute;
  right: 0;
  height: 2.8em;
  width: 1.6em;
}

.emoji-gauge {
  position: relative;
  visibility: hidden;
  --gauge-svg-1: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(231,86,111)" class="bi bi-emoji-dizzy-fill" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM4.146 5.146a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 1 1 .708.708l-.647.646.647.646a.5.5 0 1 1-.708.708L5.5 7.207l-.646.647a.5.5 0 1 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 0-.708zm5 0a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 1 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 0-.708zM8 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>');
  --gauge-svg-2: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(243,152,0)" class="bi bi-emoji-frown-fill" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm-2.715 5.933a.5.5 0 0 1-.183-.683A4.498 4.498 0 0 1 8 9.5a4.5 4.5 0 0 1 3.898 2.25.5.5 0 0 1-.866.5A3.498 3.498 0 0 0 8 10.5a3.498 3.498 0 0 0-3.032 1.75.5.5 0 0 1-.683.183zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/></svg>');
  --gauge-svg-3: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0,153,68)" class="bi bi-emoji-neutral-fill" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm-3 4a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/></svg>');
  --gauge-svg-4: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51,204,255)" class="bi bi-emoji-smile-fill" viewBox="0 0 16 16">  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zM4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/></svg>');
  --gauge-svg-5: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0,104,183)" class="bi bi-emoji-laughing-fill" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM7 6.5c0 .501-.164.396-.415.235C6.42 6.629 6.218 6.5 6 6.5c-.218 0-.42.13-.585.235C5.164 6.896 5 7 5 6.5 5 5.672 5.448 5 6 5s1 .672 1 1.5zm5.331 3a1 1 0 0 1 0 1A4.998 4.998 0 0 1 8 13a4.998 4.998 0 0 1-4.33-2.5A1 1 0 0 1 4.535 9h6.93a1 1 0 0 1 .866.5zm-1.746-2.765C10.42 6.629 10.218 6.5 10 6.5c-.218 0-.42.13-.585.235C9.164 6.896 9 7 9 6.5c0-.828.448-1.5 1-1.5s1 .672 1 1.5c0 .501-.164.396-.415.235z"/></svg>');
}

.emoji-gauge-1::before {
  content: "";
  visibility: visible;
  position: absolute;
  background-image: var(--gauge-svg-1);
  background-repeat: no-repeat;
  background-position: left center;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.emoji-gauge-2::before {
  content: "";
  visibility: visible;
  position: absolute;
  background-image: var(--gauge-svg-1), var(--gauge-svg-2);
  background-repeat: no-repeat, no-repeat;
  background-position: left center, left 1.3rem center;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.emoji-gauge-3::before {
  content: "";
  visibility: visible;
  position: absolute;
  background-image: var(--gauge-svg-1), var(--gauge-svg-2), var(--gauge-svg-3);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left center, left 1.3rem center, left 2.6rem center;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.emoji-gauge-4::before {
  content: "";
  visibility: visible;
  position: absolute;
  background-image: var(--gauge-svg-1), var(--gauge-svg-2), var(--gauge-svg-3), var(--gauge-svg-4);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left center, left 1.3rem center, left 2.6rem center, left 3.9rem center;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.emoji-gauge-5::before {
  content: "";
  visibility: visible;
  position: absolute;
  background-image: var(--gauge-svg-1), var(--gauge-svg-2), var(--gauge-svg-3), var(--gauge-svg-4), var(--gauge-svg-5);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left center, left 1.3rem center, left 2.6rem center, left 3.9rem center, left 5.2rem center;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/************************************
** Article indexes pagenation
************************************/
.article-indexes {
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  margin: 0rem 0.5rem 1.5rem;
  padding: 1.6%;
}

/************************************
** 引用（blockquote）
************************************/
blockquote {
  background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
  border: 1px solid #FFFFFF;
  border-left: .35rem solid #b4d6f5;
  margin: 1em 0;
  padding: 20px 55px;
  position: relative;
}


blockquote::before {
  color: #C8C8C8;
  content: "“";
  font-family: serif;
  font-size: 600%;
  left: 0;
  line-height: 1em;
  position: absolute;
  top: 0;
}

.blockquote-footer {
  text-align: right;
}

/************************************
** code block
************************************/
pre.hlCodeBlock{
  position: relative;
}

#selectPre {
  position: absolute;
  top: 5px;
  right: 8px;
  color: #444;
  background: #fff;
  padding: 2px 5px; 
  border: none;
  border-radius:0.5em;
  cursor: pointer;
  opacity: 0.65;
  transition: 0.3s;
  font-size: smaller;
}
#selectPre:hover {
  opacity: 0.9;
}
#selectPre::before {
  content: "";
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
  background-repeat: no-repeat;
  display: inline-block;
  height: 1.125em;
  width: 1.25em;
  vertical-align: -0.125em;
}

/************************************
** card block
************************************/
a.card-body-link {
  color:inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/*for shine*/
.card-body-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(172, 236, 252, 0) 0%, rgba(172, 236, 252, 0.15) 100%);
  transform: skewX(-25deg);
  z-index: 20;
}

/*hover: shine*/
.card-body-link:hover::before {
  animation: shine 0.6s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

/* pagepreview_card */
img.card-img-left {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

a.card-page-link {
  color:inherit;
  text-decoration: none;
}

/************************************
** Sidebar
************************************/
.hover-cell input{
  visibility: hidden;
}

.hover-cell input:checked{
  visibility: visible;
}

.hover-cell:hover input{
  visibility: visible;
}

/************************************
** Sidebar
************************************/
.sidebar-item {
  margin: 1rem;
}

.sidebar-item:last-child {
  margin-bottom: 0;
}

.sidebar-item-sticky {
  position: sticky;
  top: 80px;
}

#toc {
  border: 2px solid rgba(0,0,0,.1);
  margin: 2em auto;
}

.toc-title {
  color: #444;
  padding: .5em 0;
  font-size: 1.2em;
  font-weight: 400;
}

.toc-container {
  padding: 0 1em 1em;
  margin: 0;
}
.toc-container, .toc-container ul {
  counter-reset: ul-counter;
  list-style: none;
}
.toc-container li a {
  display: flex;
  color: #444;
  text-decoration-line: none;
}
.toc-container li a:before {
  counter-increment: ul-counter;
  content: counters(ul-counter,".");
  color: dodgerblue;
  padding-right: .5em;
  white-space: nowrap;
}

/************************************
** ページトップへ戻るボタン
************************************/
#page-top-nav {
  all: initial;
  position: fixed;
  right: 1em;
  bottom: 130px;
  margin: 0;
  z-index: 9999;
  display: none;  /* Hidden by default */
}

#page-top-nav.fadeUp{
  display: block;
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

a.btn-page-top {
  all: initial;
  align-items: center;
  background-color: #fff;
  border: 2px solid #0000;
  border-radius: 50%;
  box-shadow: 0 0 1px 0 #6bd6e6, 0 1px 10px 0 #6bd6e6b3;
  color: #000;
  cursor: pointer;
  display: flex;
  font-size: 20px;
  height: 2.2em;
  width: 2.2em;
  justify-content: center;
  margin: 0!important;
  overflow: hidden;
  padding: 0!important;
  position: relative;
  text-decoration: none!important;
  transition: 0.3s;
}

.btn-page-top:hover {
  background: linear-gradient(to right, rgba(172, 236, 252, 0) 0%, rgba(172, 236, 252, 0.15) 100%);
}

.floating-user-nav{
  all: initial;
  position: fixed;
  right: 1.5em;
  top: 80px;
  margin: 0;
  z-index: 9999;
}

.floating-user-nav .dropdown-button{
  all: initial;
  align-items: center;
  background-color: #86b0fd;
  border: 2px solid #0000;
  border-radius: 50%!important;
  box-shadow: 0 0 1px 0 #6bd6e6, 0 1px 10px 0 #6bd6e6b3;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 20px;
  height: 2.2em;
  width: 2.2em;
  justify-content: center;
  margin: 0!important;
  overflow: hidden;
  padding: 0!important;
  position: relative;
  text-decoration: none!important;
  transition: 0.3s;

}

.floating-user-nav .dropdown-button:hover {
  background: linear-gradient(to right, rgba(172, 236, 252, 0.6) 0%, rgba(172, 236, 252, 0.8) 100%);
}



/************************************
** footer
************************************/
#main-footer {
  margin-top: 40px;
}

#main-footer .crx-grid {
  padding-top: 0px;
  padding-bottom: 10px;
}

#main-footer i {
  color: gray;
}

#main-footer i:hover {
  color: inherit;
}

#main-footer i.feed:hover {
  color: #fe9900;
}

/************************************
** Fxトレードログ用
************************************/
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 25px 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
  border-left: 4px solid #3498db;
}

.stat-value {
  order: 1;  /* 上に表示 */
  font-size: 2em;
  font-weight: bold;
  color: #2c3e50;
  display: block;
}

.stat-label {
  order: 2;  /* 下に表示 */
  font-size: 0.9em;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 5px;
}

/* パフォーマンス指標 */
.performance-positive {
    color: #28a745;
    font-weight: 600;
}

.performance-negative {
    color: #dc3545;
    font-weight: 600;
}

.performance-neutral {
    color: #6c757d;
    font-weight: 600;
}

.fx-challenge-table h3 {
    font-size: 1.25em;
}

.fx-challenge-table h4 {
    font-size: 1.2em;
}

#trade_challenge h3 {
    font-size: 1.25em;
}

#trade_challenge h4 {
    font-size: 1.2em;
}