@import '~src/function.scss';

.main-header{
  width: 100%; /* 400px */
  height: 100%;
  font-family: Roboto;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  background-color: #fff;
  overflow:hidden;
  padding: 30px 20px 5px 20px;
  color:#000;
  transform: translate3d(0, 1px, 0);

  .left{
    width: fit-content;
    float: left;
    //font-size: rem(35);
    overflow: hidden;

    .header-top-btn{
      background: transparent;
      font-size: rem(25) !important;
      font-weight: 100 !important;
      /* color: #0782c9; */
      color: #42b9fe;
    }
  }

  .middle-container{
    overflow: auto;
    width:calc(100% - 45px);
    height: auto;

    .middle{
      padding: 0!important;
      float: left;
      width:calc(100% - 77px);
      margin: 0px 0 0 10px;
      display: flex;
      align-items: center;

      .title{
        font-size: rem(25);
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        float: left;
      }
    }
  }
}

.media {
  background-color: #ebebeb;
  padding: 10px !important;
  height: 100% !important;
  overflow: auto !important;

  .media-content{
    height: 100% !important;
    overflow: auto !important;
    img{
      width: fit-content !important;
      max-height: 500px;

    }
  }
}


@media only screen and (min-width: 800px) {
  .media {
    .media-content{
      height: 100% !important;

      img{
        width: fit-content !important;
        max-height: 555px;
  
      }
    }
  }
}