.material-loader {
  position: relative;
  margin: 0px auto;
  width: 100px;
  height: 100px;
  zoom: 1.7;
  margin-top: -94px;
  margin-right: 10px;
}

.material-circular {
  -webkit-animation: rotate 2.5s linear infinite;
          animation: rotate 2.5s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}

.material-path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 2.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 2.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%, 90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%, 90% {
    stroke: #ffa700;
  }
}

.ph-item {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     padding: 30px 15px 15px 15px;
     overflow: hidden;
     /* margin-bottom: 30px; */
     /* background-color: #fff; */
     /* border: 1px solid #e6e6e6; */
     /* border-radius: 2px; */
}

.ph-item, .ph-item *, .ph-item ::after, .ph-item ::before {
     box-sizing: border-box;
}

.ph-item::before {
     content: " ";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 50%;
     z-index: 1;
     width: 500%;
     margin-left: -250%;
     -webkit-animation: phAnimation 0.8s linear infinite;
     animation: phAnimation 0.8s linear infinite;
     background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
}

.ph-item > * {
     flex: 1 1 auto;
     display: flex;
     flex-flow: column;
     padding-right: 15px;
     padding-left: 15px;
}

.ph-row {
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 7.5px;
}

.ph-row div {
     height: 10px;
     margin-bottom: 7.5px;
     background-color: #ced4da;
}

.ph-row .big, .ph-row.big div {
     height: 20px;
     margin-bottom: 15px;
}

.ph-row .empty {
     background-color: rgba(255, 255, 255, 0);
}

.ph-col-2 {
     flex: 0 0 16.66667%;
}

.ph-col-4 {
     flex: 0 0 33.33333%;
}

.ph-col-6 {
     flex: 0 0 50%;
}

.ph-col-8 {
     flex: 0 0 66.66667%;
}

.ph-col-10 {
     flex: 0 0 83.33333%;
}

.ph-col-12 {
	flex: 0 0 100%;
}

.ph-avatar {
     position: relative;
     width: 100%;
     min-width: 60px;
     background-color: #ced4da;
     margin-bottom: 15px;
     border-radius: 50%;
     overflow: hidden;
}

.ph-avatar::before {
     content: " ";
     display: block;
     padding-top: 100%;
}

.ph-picture {
     width: 100%;
     height: 120px;
     background-color: #ced4da;
     margin-bottom: 15px;
}

@-webkit-keyframes phAnimation {
     0% {
         transform: translate3d(-30%, 0, 0);
    }
     100% {
         transform: translate3d(30%, 0, 0);
    }
}

@keyframes phAnimation {
     0% {
         transform: translate3d(-30%, 0, 0);
    }
     100% {
         transform: translate3d(30%, 0, 0);
    }
}

.spinLoader,
.spinLoader:before,
.spinLoader:after {
    background: #06c5a6 !important;
    -webkit-animation: spinLoaderChat 1s infinite ease-in-out;
    animation: spinLoaderChat 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
}

.spinLoader {
    color: #06c5a6 !important;
    text-indent: -9999em;
    margin: 50% auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.spinLoader:before,
.spinLoader:after {
    position: absolute;
    top: 0;
    content: '';
}

.spinLoader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinLoader:after {
    left: 1.5em;
}

@-webkit-keyframes spinLoaderChat {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

@keyframes spinLoaderChat {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

.lv-message .lv-item.right .ms-item .typing_loader.typing_loader_white, 
.lv-message .lv-item.left .ms-item .typing_loader, 
.typing_loader {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
    -moz-animation: typing 1s linear infinite alternate;
    -ms-animation: typing 1s linear infinite alternate;
    animation: typing 1s linear infinite alternate;
    position: relative;
    left: -12px;
    margin: 7px 15px 6px;
}

.lv-message .lv-item.left .ms-item .typing_loader_black, 
.lv-message .lv-item.right .ms-item .typing_loader_black, 
.lv-message .lv-item.right .ms-item .typing_loader, 
.to .typing_loader {
    animation: typing-black 1s linear infinite alternate;
}

@-webkit-keyframes typing {
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    50% {
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,1),
        24px 0px 0px 0px rgba(255,255,255,0.4);
    }
    100%{ background-color: rgba(255,255,255, 0.2);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,1);
    }
}

@-moz-keyframes typing {
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    50% {
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,1),
        24px 0px 0px 0px rgba(255,255,255,0.4);
    }
    100%{ background-color: rgba(255,255,255, 0.2);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,1);
    }
}

@keyframes typing-black {
    0%{
        background-color: rgba(74, 74, 74, 1);
        box-shadow: 12px 0px 0px 0px rgba(74, 74, 74, 0.4),
        24px 0px 0px 0px rgba(74, 74, 74, 0.2);
    }
    50% {
        background-color: rgba(74, 74, 74, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(74, 74, 74, 1),
        24px 0px 0px 0px rgba(74, 74, 74,0.4);
    }
    100%{ background-color: rgba(74, 74, 74, 0.2);
        box-shadow: 12px 0px 0px 0px rgba(74, 74, 74,0.4),
        24px 0px 0px 0px rgba(74, 74, 74,1);
    }
}

@keyframes typing {
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    50% {
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,1),
        24px 0px 0px 0px rgba(255,255,255,0.4);
    }
    100%{ background-color: rgba(255,255,255, 0.2);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.4),
        24px 0px 0px 0px rgba(255,255,255,1);
    }
}