#skeletonLoader {display: block; }
.cardLoader { width: 100%; min-height: 100vh; background-color: #f2f2f2; position: relative; z-index: 9; margin-bottom: 50px; }
.clBox {display: table; width: 100%; height: 160px; background-color: #fff; border: 1px solid #eee; border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; padding: 10px; margin-bottom: 15px; position: relative;}
.clb1, .clb2, .clbGroup {display: flex; }
.clbContent {flex: auto;}
.avatar1 {
  width: calc(100%/3 - 10px);
  height: 152px;
  background-color: #ccc;
  margin: 5px;
  background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
  background-size: 600px;
  animation: shine-avatar 2s infinite ease-out;
}

.avatar2 {
    width: 140px;
    height: 140px;
    background-color: #ccc;
    margin: 5px 15px 5px 5px;
    background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
    background-size: 600px;
    animation: shine-avatar 2s infinite ease-out;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.line.lh {width: 320px; height: 24px; margin-bottom: 20px;}
.line {
  width: 240px;
  height: 25px;
  margin-top: 12px;
  background-color: #ccc;
  border-radius: 7px;
  background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
  background-size: 600px;
  animation: shine-lines 2s infinite ease-out;
}
.clBtn {
    width: 140px;
  height: 40px;
  margin-top: 12px;
  margin-right: 15px;
  background-color: #ccc;
  border-radius: 7px;
  background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
  background-size: 600px;
  animation: shine-lines 2s infinite ease-out;
}
.clR {margin-left: auto; margin-right: 0;}
.clbEdit {
    position: absolute;
    right: 15px;
    top: 15px;
  width: 40px;
  height: 40px;
  background-color: #ccc;
  background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(229, 229, 229, 0.8) 40px, #F4F4F4 80px);
  background-size: 600px;
  animation: shine-lines 2s infinite ease-out;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}
.clbox2 {display: flex;}
.clLt {width: 280px; text-align: center; }
.clLt .avatar2, .clLt .line, .clLt .clBtn {
    margin: 20px auto 60px auto;
    background-color: #f9f9f9;
    background-image: linear-gradient(90deg, #fff 0px, rgba(229, 229, 229, 0.8) 40px, #fff 80px);
}
.clLt .clBtn {width: 90%; margin: 15px auto 0;}
.clLt .line.lh {max-width: 240px; margin-top: 0px;}
.clRt {height: 100%; flex: 1; background-color: #fff; border: 1px solid #eee; border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; padding: 10px; margin-bottom: 15px; margin-left: 10px; position: relative;}
.clRt > .line {width: 100%;}
.clRt > .line + .line {width: 90%;}
hr.my {margin: 15px auto;}
.clRt  .clbGroup {margin-top: 15px;}
.clRt  .clbGroup > .clBtn {width: 25%; height: 60px;}
.clRcontent {max-width: 80%;}
.clRcontent .line {width: 80%;}
.clRcontent .line.lh {width: 50%;}
.clRcontent .line.l2 {width: 62%;}
.clRcontent .line.l3 {width: 67%;}
.clRcontent .line.l4 {width: 70%;}
.clRcontent .line.l5 {width: 55%;}
.clRcontent .line.l6 {width: 75%;}
.cl-top .line.lh {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    margin: 0px 6px 40px 6px;
}
@keyframes shine-lines {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 500px;
  }
}
@keyframes shine-avatar {
  0% {
    background-position: -32px;
  }
  40%, 100% {
    background-position: 300px;
  }
}
.clRt .clbGroup-2 > .clBtn {
    width: 100%;
    height: 90px;
}
.btm-crl{
    display: flex;
    padding: 30px 60px;
    position: absolute;
    bottom: 20%;
}
.crl-social {
    background-color: #f9f9f9;
    background-image: linear-gradient(90deg, #fff 0px, rgb(255 255 255 / 80%) 40px, #6c757d 80px);
    width: 120px;
    height: 120px;
    border-radius: 100%;
    animation: shine-lines 2s infinite ease-out;
    margin: 0 10px;
}
@media (max-width:767px) {
  .clb2 {flex-direction: column; }
  .clb2 .avatar2 {margin: 15px auto 15px;}
  .clbox2 {flex-direction: column; align-items: center;}
  .clRt {width: 100%; margin: auto; margin-top: 30px;}
  .clb1 > .avatar1 {width: calc(100%/2 - 10px);}
  .clLt{display: none;}
  .clRt { margin-top: 0px;}
}
@media (max-width:575px) {
  .clBtn {width: 90px;}
  .mbl1{display: block;}
  .clb1 > .avatar1 {width: calc(100%/1 - 10px);}
  .clLt{display: none;}
  .clRt { margin-top: 0px;}
}