/* Video player - Layouts, display and borders are done with Bootstrap */
.k-video.modal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: auto; */
    padding: 0 !important;
}
.k-video .modal-dialog {
    /* max-height: 90vh; */
}
.k-video {
    /*max-height: 100vh;*/
}
.modal .k-video {
    /*height: 80vh;*/
}
.k-video .border-dark {
    border-color: #e7e7e8 !important;
}
.k-video .k-video-title,
.k-video .k-tab-name {
    font-weight: 400;
    color: #fff;
}
.k-tab-name.en {
    font-size: 16px;
    margin-bottom: -2px;
}

.k-tab-sidebar-listing .col-1 {
	font-size: 16px;
	max-width: 30%;
}

.k-tab-sidebar-listing-title {
    font-size: 16px;
}
.k-tab-sidebar-listing-title.jp {
    font-size: 15px;
}
.k-video .k-tabs {
    /*margin-bottom: 1em;*/
}
.k-video .k-tabs .col-6:first-of-type {
    padding-right: 0;
}
.k-video .k-tabs .col-6:last-of-type {
    padding-left: 0;
}
.k-video .k-tab {
    cursor: pointer;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #606b73 !important;
    border-left: 1px solid #606b73 !important;
}

.k-video .k-tab-selected {
	border: 1px solid #e7e7e8 !important;
}

.k-video .k-tab.k-tab-selected,
.k-video .k-tab-sidebar-listing:hover {
    color: #fff;
    background-color: #2a2f33;
}
.k-video .k-tab-sidebar-listing.row {
    margin-left: 0;
    margin-right: 0;
}
.k-video .k-tab-sidebar-listing {
    padding: 1em;
    cursor: pointer;
}
.k-video .k-tab-sidebar-listing div.col-3 {
    font-size: 16px;
}
.k-video .k-tab-sidebar-listing-title {
    text-align: start;
}
.k-video .k-tab-sidebar-listing-link {
    margin-right: 1em;
    color: #fff !important;
    font-size: 15px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Chrome, Edge, Opera and Firefox */
}
.k-video .k-tab-sidebar-listing-link:hover {
    color: #0056b3 !important;
}
.k-video .k-video-titles {
    text-align: center;
    padding: 10px;
    width: 100%;
    font-size: 14px;
}
.k-video .k-video-title,
.k-video #k-video-container {
    font-size: 18px;
}

.en.k-video-title {
	text-transform: uppercase;
	letter-spacing: 1px;
}

.jp.k-video-title {
    font-size: 14px;
    padding-bottom: 10px;
}
.k-video #k-video-container .en,
.k-video #k-video-container .jp {
    /*  Language specific styling within video  */
}


#k-video-container + .col-12.my-4 {
  margin-top: 5rem !important;
}


.k-dialog .k-dialog-title,
.k-dialog .k-dialog-body {
    text-align: left;
    color: #383838 !important;
}
.k-video .vjs-custom-button {
    text-decoration: none !important;
}
.k-video .vjs-custom-button:before {
    font-size: 1.8em;
}
.k-video .vjs-subs-caps-button {
    display: block !important;
}

.vjs-tech {
    background-color: #2a2f33;
}

/* ##### Captions ##### */

/* Base container overrides (position, margin reset) */
.vjs-text-track-display,
.vjs-text-track-display > div {
    bottom: 0 !important;
    margin: 0 !important;
}

/* Caption container */
div.vjs-text-track-cue[style] {
    /* Stick captions on the bottom */
    top: auto !important;
    bottom: 0 !important;
    min-height: inherit !important;
    height: 46px !important;
    padding-bottom: 32px;
    /* Align to center */
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 576px) {
    div.vjs-text-track-cue[style] {
	height: 56px !important;
    }
}

@media (min-width: 768px) {
    div.vjs-text-track-cue[style] {
	height: 48px !important;
    }
}

@media (min-width: 992px) {
  div.vjs-text-track-cue[style] {
	  height: 60px !important;
  }

  body.videos div.vjs-text-track-cue[style] {
    height: 56px !important;
  }
  .video-js .vjs-control {
    width: 4em;
  }
}

.vjs-text-track-cue > div {
    /* Remove default black background */
    background: 0 !important;
}

/* ##### Adjust captions below (Please add a '!important' property to each rule)##### */

/* Caption container */
.vjs-text-track-cue {
    /* Height */
    min-height: 18% !important;

    /* Background color and opacity, (default #2A2F32) */
    background-color: rgba(42, 47, 50, 1) !important;
}

/* English */
.vjs-text-track-display[data-lang="English"] .vjs-text-track-cue[style] > div {
    font-size: .85em !important;
    font-weight: 300;
    padding-top: 30px;
    /*line-height: 1em !important;*/
    /*letter-spacing: 1em !important;*/
}

/* Japanese */
.vjs-text-track-display[data-lang="Japanese"] .vjs-text-track-cue[style] > div {
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif !important;
    font-size: .75em !important;
    padding-top: 30px;
    /*line-height: 1em !important;*/
    /*letter-spacing: 1em !important;*/
}

.video-js i {
	font-size: 11px;
}

.vjs-menu li {
	text-transform: capitalize;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder::before {
  content: '' !important;
}

.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder::before {
  content: "\e60f" !important;
  font-family: "Font Awesome 6 Sharp" !important;
  font-weight: 100;
  font-size: 1.7em;
}

.vjs-icon-audio::before, .video-js .vjs-audio-button .vjs-icon-placeholder::before {
  content: "\f075" !important;
  font-family: "Font Awesome 6 Sharp" !important;
  font-weight: 100;
  font-size: 1.7em;
}

.vjs-icon-volume-high::before, .video-js .vjs-mute-control .vjs-icon-placeholder::before {
  content: "\f6a8" !important;
  font-family: "Font Awesome 6 Sharp" !important;
  font-weight: 100;
  font-size: 1.7em;
}

.bi.bi-bookmark-fill::before,
[class*="bi-"]::before {
  font-weight: 100 !important;
}
.bi-bookmark-fill::before {
  content: "\f02e" !important;
  font-family: "Font Awesome 6 Sharp" !important;
  font-size: 1.7rem;
}

.vjs-icon-fullscreen-enter::before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder::before {
  content: "\f065" !important;
  font-family: "Font Awesome 6 Sharp" !important;
  font-weight: 100;
  font-size: 1.7em;
}

.vjs-subs-caps-button .vjs-menu-item:last-of-type .vjs-menu-item-text {
  visibility: collapse;
}

.vjs-subs-caps-button .vjs-menu-item:last-of-type .vjs-menu-item-text:before {
  content: "Off";
  visibility: visible;
  margin-right: -60px;
}
.video-js .vjs-control-bar {
    flex-wrap: wrap; /* コントロールバー内のアイテムを複数行に分ける */
}


@media (max-width: 767px) {

  #k-video-container {
    padding-left: 0;
    padding-right: 0;
  }

  .video-js .vjs-control {
    width: 4em;
  }

}

@media (max-width: 575px) {

  .k-video {
    margin-bottom: 7rem;
  }

  .video-js .vjs-control-bar {
    bottom: -6em;
    height: 6em;
    justify-content: center;
  }
 
  #k-video-container + .col-12.my-4 {
    margin-top: 10rem !important;
  }

  .video-js .vjs-control.vjs-volume-panel {
    order: 0;
    margin-left: calc((100% - 240px) / 2);
    height: 3em;
  }

  .video-js .vjs-control.vjs-mute-control {
    height: 3em;
  }

  .video-js .vjs-control.vjs-custom-button[title="New Bookmark"] {
    order: 1;
    height: 3em;
  }

  .video-js .vjs-control.vjs-subs-caps-button {
    order: 2;
    height: 3em;
  }

  .video-js .vjs-control.vjs-audio-button {
    order: 3;
    height: 3em;
  }

  .video-js .vjs-control.vjs-playback-rate {
    order: 4;
    height: 3em;
  }

  .video-js .vjs-control.vjs-fullscreen-control {
    order: 5;
    margin-right: calc((100% - 200px) / 2);
    height: 3em;
  }

  .vjs-icon-previous-item {
    order: 6;
    top: -2em;
  }

  .vjs-custom-button[title="Rewind 10 seconds"] {
    order: 7;
    top: -1.9em;
  }

  .vjs-play-control {
    order: 8;
    top: -.5em;
  }

  .vjs-custom-button[title="Fast-forward 10 seconds"] {
    order: 9;
    top: -1.9em;
  }

  .vjs-icon-next-item {
    order: 10;
    top: -2em;
  }

  .vjs-progress-control {
    order: 11;
    top: -2em;
  }

  .vjs-remaining-time {
    order: 12;
    top: -.5em;
  }

  .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    /* vertical-align: 1.8em; */
  }

  .chapter-container {
    margin-top: 4em;
  }

}