

.editor-reading-wrap{
input.err{
  border-color: red;
}

//::ng-deep .cropper-wrapper {
  //  max-width: 100%!important;
//  ::ng-deep .cropper{
    //
    //    position: relative;
    //    padding-bottom: 56.25%;
    //    height: 0;
    //    overflow: hidden;
    //  }
//}


::ng-deep .cropper-wrapper {
  max-width: 100%!important;
::ng-deep .cropper{
  max-width: 100%!important;
  width: 100%;
> img{
  max-width: 100%!important;
}
}
}

.edit-wrap{
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  position: relative;
img{
  width: 100%;
}
}



.p-progress-bar {
  position: relative;
  width: 100%;
  height: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 1rem;
.p-progress-bg {
  background-color: #1890ff;
  border-radius: 1rem;
  height: 100%;
}
.p-progress-value {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-shadow: 0 0 4px #000;
  color: white;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5rem;
}
}
.parts-box{
.crop-preview-box{
  border: 1px solid #ddd;
  overflow: hidden;
  box-shadow: 0 0 20px 0px gainsboro;
.crop-preview{
  width: 100%;
  padding-bottom: 56.25%;
//border: 1px solid #eee;
  overflow: hidden;
//box-shadow: 0 0 20px 0px gainsboro;
  position: relative;
  margin: 0 auto;
}
}

}
.previewer{
  border: 2px dashed #ddd;
//display: inline-block;
  max-width: 100%;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.previewer img{
  max-width: 100%;
}
.part-view-wrap{

  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  margin-bottom: .5rem;
  border: 1px solid #ddd;
  overflow: hidden;
  box-shadow: 0 0 20px 0px gainsboro;
.part-view{
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
img {
  display: block;
  min-width: 0px !important;
  min-height: 0px !important;
  max-width: none !important;
  max-height: none !important;
}
}
}

.part-item{
  float: none;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 1rem;
//padding-top: 1rem;
//border-top: 1px solid #ddd;
  position: relative;
.part-text-wrap{
  position: relative;
  font-weight: 900;
.text-word{
//height:2.5rem;
  line-height:2.5rem;
  text-align: center;
  word-wrap: break-word;
  word-break: break-word;
  font-size: 2rem;
}
}
.part-text{
  text-align: center;
  font-size: 2rem;
  font-family: 'ChalkboardSE-Regular';
  font-weight: 900;
}
i.anticon-edit, i.anticon-logout{
  cursor: pointer;
  position: absolute;
  top: 4px;
  font-size: 22px;
  color: #1890ff;
  transition: all .3s;
  z-index: 1;
  top: 2rem;
  right: 1rem;
  opacity: .7;
}
i.anticon-close-square{
  cursor: pointer;
  position: absolute;
  top: 4px;
  font-size: 24px;
  color: #f5222d;
  transition: all .3s;
  z-index: 1;
  top: 0rem;
  right: 1rem;
  opacity: .7;
}
i.anticon-check-square{
  cursor: pointer;
  position: absolute;
  top: 4px;
  font-size: 24px;
  color: #1890ff;
  transition: all .3s;
  z-index: 1;
  right: -1.5rem;
  opacity: .7;
}
i.anticon-check-square:hover, i.anticon-edit:hover, i.anticon-close-square:hover {
  opacity: 1;
}

}
}
