.notiImg {
  width: 78px;
  height: 78px;
}

.bdy-left {
  margin-left: 100px;
  margin-top: -15px;
}

.date-left {
  margin-left: 100px;
}

.media-left {
  margin-left: 100px;
}

.media-text {
  font-size: 14px;
}

.dash-top {
  margin-top: -100px;
}
.card-overlay {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
}

.blk-grad {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.721),
    rgb(0, 0, 0)
  );
}

.vid-shadow {
  /* box-shadow: 10px 0px 10px 10px rgba(0,0,0,0.9),30px 0px 30px 30px rgba(0,0,0,0.9),25px 0px 50px 39px rgba(0,0,0,0.9); */
  /* box-shadow: 10px 0px 10px 10px rgba(0,0,0,0.9),50px 0px 50px 50px rgba(0,0,0,0.9),70px 0px 70px 35px rgba(0,0,0,0.9); */
  box-shadow: 10px 0px 10px 10px rgba(0, 0, 0, 0.9),
    50px 0px 50px 50px rgba(0, 0, 0, 0.9), 70px 0px 70px 35px rgba(0, 0, 0, 0.9),
    120px 0px 100px 70px rgba(0, 0, 0, 0.7);
  background-color: #000;
}

.vid-fade {
  --scale: 1;
  mask-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) calc(var(--scale) * 0%),
    rgba(255, 255, 255, 0.1) calc(var(--scale) * 6%),
    rgba(255, 255, 255, 0.5) calc(var(--scale) * 22.5%),
    rgba(255, 255, 255, 0.6) calc(var(--scale) * 25.5%),
    rgba(255, 255, 255, 0.7) calc(var(--scale) * 30%),
    rgba(255, 255, 255, 0.8) calc(var(--scale) * 36%),
    rgba(255, 255, 255, 0.9) calc(var(--scale) * 48%),
    rgba(255, 255, 255, 1) calc(var(--scale) * 60%)
  );
}

.dp-hov:hover {
  background-color: #eafff8 !important;
  
}

body.dark .dp-hov:hover {
  color: #000 !important;
  background-color: #333333 !important;
  
}

.vid-fade2 {
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0),
    rgba(0, 0, 0, 0.6)
  );
  /* background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));
  background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1)); */
}

.color-danger{
  color: #ff0022;
}

.btn-primary{
  border: none !important;
  color: #fff !important;

}

.pImx{
  width: 68px;
  height: 68px;
}

.pImx img{
  width: 68px;
  height: 68px;
}

.pTxxt{
  width: 300px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

.chatBack{
  background-image: url("../img/chatBack.png");
}

.ovx1{

  height: 100vh;  border-top-left-radius: 0px; border-bottom-left-radius: 0px; position: relative; margin: 0; padding: 0; border-radius: 0px; 
  
}

.btn-primary{
  box-shadow: none !important;
}

.btn-outline-primary{
  box-shadow: none !important;
}

.hp-select-box-item > input:checked ~ label .card {
  border-color: #9146ff !important;
  -webkit-box-shadow: 0px 0px 10px rgba(10, 255, 226, 0.35);
          box-shadow: 0px 0px 10px rgba(10, 255, 226, 0.35);
}
.hp-select-box-item ul li {
  list-style: disc;
}

/* The container must be positioned relative: */
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: transparent;
  color: #2d3436;
  border-radius: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z' fill='rgba%28178,190,195,1%29'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 24px;
}


/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #2d3436;
  padding: 8px 16px;
  border: 1px solid #b2bec3;
  cursor: pointer;
  border-radius: 5px;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: transparent;
  color: #2d3436;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: #9146ff4d;
}

.mvxp{}

.btmmm1{

  bottom: 20px;

}

.btmmm2{
  margin-bottom: 90px;
}

@media screen and (max-width: 666px) {
  /* .ovx1{
    height: 100vh;  border-top-left-radius: 0px; border-bottom-left-radius: 0px; position: fixed;  margin-top: 55px; padding: 0; border-radius: 0px; margin-bottom: 0; margin-left: 0; margin-right: 0; 
  } */

  .btmmm1{

    bottom: 60px;

  }

  .btmmm2{
    margin-bottom: 130px;
  }

  .ovx1{
    height: 100vh;  border-top-left-radius: 0px; border-bottom-left-radius: 0px; position: fixed; margin-top: 50px;  padding: 0; border-radius: 0px; margin-bottom: 0; margin-left: 0; margin-right: 0; overflow: hidden; 
  }

  .mvxp{
    margin-left: 30px;
  }

  .dash-top {
    margin-top: -30px;
  }

  .notiImg {
    width: 58px;
    height: 58px;
  }

  .bdy-left {
    margin-left: 80px;
    margin-top: 10px;
  }

  .date-left {
    margin-left: 80px;
  }

  .media-left {
    margin-left: 20px;
  }

  .media-text {
    font-size: 10px;
  }

  .pImx{
    width: 48px;
    height: 48px;
  }

  .pImx img{
    width: 48px;
    height: 48px;
  }

  .pTxxt{
    width: 180px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; 
  }
}
