.body-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url('../../assets/player-bg.png') !important;
  background-size: 100%;
}

.player-border{
  position: absolute;
  left: calc((100% - 100vh * 1.36)/ 2);
  top: 5vh;
  right: calc((100% - 100vh * 1.36)/ 2);
  bottom: 5vh;
  text-align: center;
  // box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
  border-radius: 11px;
  border: 20px solid #23b1c2;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: .3s;
}

.player-reading{
  background: url("../../assets/reading/bg_reading.png") 50% 50% no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
//.container{
  //  padding-left: 2.5vh;
  //  padding-right: 2.5vh;
//  .col-6{
    //    padding-left: 2.5vh;
    //    padding-right: 2.5vh;
    //  }
//}
.imgDetailBox{
  width: 50%;
  height: 100%;
  position: absolute;
  display: none;
  z-index: 9999;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 20px 0px #444;
  left: 2vh;
.close-detail-view{
  position: absolute;
  top: 1rem;
  right: 1rem;
  position: absolute;
  font-size: 2rem;
  cursor: pointer;
  opacity: .7;
}
.close-detail-view:hover{
  opacity: 1;
}
.detail-preview-box{
//display: flex;
//justify-content: center;
//align-items: center;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  overflow: hidden;
img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
}
.detail-preview-box.c0{border: 3px solid #4FC200;}
.detail-preview-box.c1{border: 3px solid #00C0FF;}
.detail-preview-box.c2{border: 3px solid #FFDC00;}
.detail-preview-box.c3{border: 3px solid #FF8F00;}
.detail-preview-box.c4{border: 3px solid #CF0000;}
.detail-preview-box.c5{border: 3px solid #8E33D4;}
.detail-preview-box.c6{border: 3px solid #FF0075;}

}
.fill{
  min-height: 100%;
  height: 100%;
}
.bar {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  width: calc(100% - 30px);

  position: absolute;
  z-index: 10;
.parts-wrap{
  display: table;
  height: 100%;
  width: 100%;
.parts{
  display: table-cell;
  vertical-align: middle;
}
}
}
.parts-wrap{

  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
.parts{
//position: absolute;
//width: 100%;
//top: 50%;
//transform: translateY(-50%);
//
//display: grid;
//grid-template-columns: repeat(1, 1fr);
//grid-column-gap: .3rem;
//grid-row-gap: .3rem;
//grid-auto-rows: 16vh;
//.box-row{
  //  position: relative;
  //  display: block;
  //  width: 100%;
  //  overflow: hidden;
  //}

.row{
  max-height: 16vh;
  min-height: 16vh;
  height: 16vh;
}
.word-wrap{
  word-wrap: break-word;
  word-break: break-word;
  position: relative;

//white-space: nowrap;
//display: table;
.word{
//display: table-cell;
//vertical-align: middle;
//margin: 0 auto;
  font-weight: 900;
  font-size: 2.5vh;
  font-family: 'ChalkboardSE-Regular';
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  width: calc( 100% - 30px);
  display: block;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: normal;
//white-space: nowrap;
//white-space: pre-wrap;
  text-align: left;
}
}

.part-pic-box-border{
  cursor: pointer;
  max-width: calc(100% - 1vh);
  overflow: hidden;
  margin: 0 auto;
  border: .5vh solid #333;
  border-radius: 1vh;
  max-height: calc(100% - 1vh);
  position: relative;
  display: block;
  width: calc(100% - 1vh);
  height: 0;
  padding-bottom: 56.25%;
  top: 50%;
  transform: translateY(-50%);
.part-pic-box{
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  overflow: hidden;
}
}

}
}
.pic-preview{
  object-fit: contain;
  position: relative;
//display: initial;
//top: 50%;
//left: 50%;
//transform: translateY(-50%) translateX(-50%);
  max-height: 100%;
  max-width: 100%;

//margin-top: 1rem;
//margin-bottom: 1rem;
//height: calc(100% - 2rem);

//max-width: calc(100% - 30px);

//border: 1px solid #666;
  overflow: hidden;
  box-shadow: 0 0 20px 0px #444;

img{

//object-fit: contain;
//display: flex;

  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 100%;
}
.highlight.c0 {
.t-b,.r-b,.l-b,.b-b{
  background: #4FC200!important;
}
}
.highlight.c1 {
.t-b,.r-b,.l-b,.b-b{
  background: #00C0FF!important;
}
}
.highlight.c2 {
.t-b,.r-b,.l-b,.b-b{
  background: #FFDC00!important;
}
}
.highlight.c3 {
.t-b,.r-b,.l-b,.b-b{
  background: #FF8F00!important;
}
}
.highlight.c4 {
.t-b,.r-b,.l-b,.b-b{
  background: #CF0000!important;
}
}
.highlight.c5 {
.t-b,.r-b,.l-b,.b-b{
  background: #8E33D4!important;
}
}
.highlight.c6 {
.t-b,.r-b,.l-b,.b-b{
  background: #FF0075!important;
}
}
.highlight{
  position: absolute;
  z-index: 100;
.t-b{
  position: absolute;
  width: 100%;
  height: 2px ;
  top: 0;
  background: red;
}
.r-b{
  position: absolute;
  height: calc(100% - 2px);
  width: 2px ;
  right: 0;
  background: red;
}
.b-b{
  position: absolute;
  width: 100%;
  height: 2px ;
  bottom: 0;
  background: red;
}
.l-b{
  position: absolute;
  height: calc(100% - 2px);
  width: 2px ;
  left: 0;
  background: red;
}
}
}
}
