:root {
  --primary-color: #cb11ab;
}

body {
  background-image: url(../images/back.jpg);
  background-size: 200px;
  background-color: #dddddd;
}

h2 {
  font-weight: 500;
}

.hdr1__user-name {
  color: #fff;
}

.hdr1__sum,
.upsll1__tb,
.explntn,
.grnt {
  border-color: #fff;
}

.cht__content {
  border-color: #CB11AB;
}

.hdr1 {
  background-image: url(../images/header-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: var(--primary-color);
}

.gvaway1__title span {
  color: var(--primary-color);
}

.gvaway1__info {
  border: none;
  padding-top: 0;
}

.gvaway1__info-text span {
  color: var(--primary-color);
}

.gvaway1__info-icon svg path {
  fill: var(--primary-color);
}

.gvaway1__box.active {
  background: none;
}

.btn,
.btn:disabled {
  color: #fff;
  background: var(--primary-color);
  border-radius: 8px;
}

.btn:hover {
  background: var(--primary-color) !important;
}

.btn:disabled {
  opacity: .5;
}

.btn:disabled:hover {
  opacity: .5;
}

.chtoper__btn {
  background: var(--primary-color) !important;
}

.chtoper__btn_fixed {
  border-radius: 0;
}

.cht__nav {
  background: linear-gradient(90deg, #CB11AB 0%, #481173 100%);
}

.cht__heading {
  color: #fff;
}

.cht__nav-icon svg path {
  fill: #fff;
}

.cht__send svg circle {
  fill: var(--primary-color);
}

.cht__send svg path {
  fill: #fff;
}

.cht__message-name {
  color: var(--primary-color);
}

.cht__scroll {
  background-color: var(--primary-color);
}

.cht__scroll-wrap svg path {
  fill: #fff;
}

.mssngr__message-name {
  color: var(--primary-color);
}

.csht__info-icon svg path {
  fill: var(--primary-color);
}

@-webkit-keyframes blink-1 {
  50% {
    color: #17BB6C;
  }
  51% {
    color: #fff;
  }
  100% {
    color: #fff;
  }
}

@keyframes blink-1 {
  50% {
    color: #17BB6C;
  }
  51% {
    color: #fff;
  }
  100% {
    color: #fff;
  }
}

@-webkit-keyframes blink-2 {
  50% {
    color: #D40205;
  }
  51% {
    color: #fff;
  }
  100% {
    color: #fff;
  }
}

@keyframes blink-2 {
  50% {
    color: #D40205;
  }
  51% {
    color: #fff;
  }
  100% {
    color: #fff;
  }
}

@media screen and (max-width: 576px) {
  .mdl {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .mdl__content {
    max-width: 95%;
  }
}