@media (min-width: 768px) {
    .modal-dialog-md {
        min-width: 900px!important;
    }
            }
            .chat-wrap {
 position:relative;
 display:flex;
 height:calc(100vh - 265px);
 overflow:hidden
}
.chat-wrap .dropdown-content {
 box-shadow:0px 0 35px 0px rgba(0,0,0,0.05)
}
.chat-wrap .dropdown-content-top-left {
 top:0
}
.chat-wrap .simplebar-track,
.chat-wrap .simplebar-scrollbar {
 visibility:hidden !important
}
.chat-wrap .simplebar-content {
 display:flex;
 flex-direction:column
}
.chat-wrap .simplebar-scroll-content {
 padding-right:0 !important;
 margin-bottom:0 !important
}
.chat-wrap:after {
 position:absolute;
 top:0;
 left:0;
 bottom:0;
 right:0;
 content:'';
 background:rgba(0,0,0,0.3);
 visibility:hidden;
 opacity:0;
 transition:all .4s
}
.chat-wrap.contact-active:after,
.chat-wrap.information-active:after {
 opacity:1;
 visibility:visible
}
.chat-avatar {
 flex-shrink:0
}
.chat-avatar img {
 width:36px;
 border-radius:6px;
 border:2px solid #fff
}
.chat-avatar-xs img {
 width:18px
}
.chat-avatar-sm img {
 width:24px
}
.chat-avatar-lg img {
 width:40px
}
.chat-avatar.circle img {
 border-radius:50%
}
.chat-avatar-group {
 position:relative;
 border-radius:6px;
 overflow:hidden;
 border:2px solid #fff
}
.circle>.chat-avatar-group {
 border-radius:50%
}
.chat-avatar-group:before,
.chat-avatar-group:after {
 position:absolute;
 content:'';
 background-color:#fff;
 left:50%;
 z-index:1
}
.chat-avatar-group:before {
 height:100%;
 width:1px
}
.chat-avatar-group:after {
 top:50%;
 width:50%;
 height:1px
}
.chat-avatar-group img {
 border-radius:0 !important;
 border:none
}
.chat-avatar-group img:not(:first-child) {
 position:absolute;
 width:20px;
 right:0
}
.chat-avatar-group img:nth-child(2) {
 top:0
}
.chat-avatar-group img:nth-child(3) {
 bottom:0
}
.chat-name {
 margin-bottom:0;
 font-weight:500;
 font-size:14px;
 color:#495463
}
.chat-status {
 position:relative
}
.chat-status:after {
 position:absolute;
 height:10px;
 width:10px;
 border-radius:50%;
 top:-5px;
 right:-5px;
 border:2px solid #fff;
 content:'';
 background:#758698
}
.chat-status-idle:after {
 background:#ffc100
}
.chat-status-active:after {
 background:#00d285
}
.chat-status.circle:after {
 top:2px;
 right:2px
}
.chat-time {
 font-size:12px;
 color:#758698
}
.chat-time .icon {
 font-size:11px;
 color:#b9d2f2
}
.chat-time .icon:not(:first-of-type) {
 margin-left:-5px
}
.chat-time .icon+span {
 margin-left:2px
}
.chat-time span+.icon:first-of-type {
 margin-left:5px
}
.chat-seen .icon {
 color:#00d285
}
.chat-lock .icon {
 color:#495463;
 margin-right:10px
}
.chat-attachment {
 position:relative;
 max-width:130px;
 overflow:hidden
}
.chat-attachment:first-child {
 border-radius:4px 0 0 0
}
.self .chat-attachment:first-child {
 border-radius:0 4px 0 0
}
.chat-attachment:last-child {
 border-radius:0 4px 4px 0
}
.self .chat-attachment:last-child {
 border-radius:4px 0 0 4px
}
.chat-attachment:before {
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 right:0;
 background:#000;
 content:'';
 opacity:.4;
 transition:all .4s
}
.self .chat-attachment:before {
 opacity:.7;
 background:#2c80ff
}
.chat-attachment:hover:before {
 opacity:0.6
}
.self .chat-attachment:hover:before {
 opacity:.9
}
.chat-attachment-caption {
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 color:#fff;
 padding:7px 15px;
 font-size:13px;
 opacity:1;
 transition:all .4s
}
.chat-attachment-download {
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%, -50%);
 opacity:0;
 transition:all .4s;
 color:#fff;
 width:32px;
 line-height:32px;
 background:rgba(255,255,255,0.2);
 text-align:center
}
.chat-attachment-download:hover {
 color:#495463;
 background:#fff
}
.self .chat-attachment-download:hover {
 color:#2c80ff
}
.chat-attachment:hover .chat-attachment-caption {
 opacity:0
}
.chat-attachment:hover .chat-attachment-download {
 opacity:1
}
.chat-attachment-list {
 display:flex;
 margin:-5px
}
.chat-attachment-list li {
 width:33.33%;
 padding:5px
}
.chat-attachment-item {
 border:5px solid rgba(230,239,251,0.5);
 height:100%;
 min-height:60px;
 text-align:center;
 font-size:30px;
 display:flex;
 align-items:center;
 justify-content:center
}
.chat-users {
 display:none;
 align-items:center
}
.chat-users>* {
 padding:0 10px
}
.chat-users-stack {
 display:flex;
 flex-direction:row-reverse
}
.chat-users-stack .chat-avatar:not(:first-child) {
 margin-right:-12px
}
.chat-users-search {
 display:flex;
 margin:-5px
}
.chat-users-search>div {
 padding:5px
}
.chat-users-add {
 position:relative
}
.chat-contacts {
 position:absolute;
 left:-100%;
 top:0;
 width:350px;
 max-width:85%;
 flex-shrink:0;
 transition:all .4s;
 z-index:1;
 background:#fff;
 height:100%
}
.chat-contacts.active {
 left:0
}
.chat-contacts-tools {
 padding:20px;
 position:relative;
 overflow:hidden
}
.chat-contacts-tools-long {
 transition:all .4s
}
.chat-contacts-tools-short {
 transition:all .4s;
 position:absolute;
 top:20px;
 opacity:0
}
.chat-contacts-heading {
 background:#d2dde9;
 padding:5px 20px;
 display:flex;
 align-items:center;
 justify-content:space-between
}
.chat-contacts-heading .toggle-tigger {
 color:#758698;
 position:relative;
 top:2px
}
.chat-contacts-title {
 font-size:0.8rem;
 font-weight:500;
 letter-spacing:0.1em;
 margin-bottom:0;
 text-transform:uppercase;
 white-space:nowrap
}
.chat-contacts-title span {
 color:#758698
}
.chat-contacts-list {
 height:100%;
 width:350px;
 max-width:100%
}
.chat-contacts-wrap {
 height:calc(100% - 117px);
 overflow:hidden;
 position:relative
}
.chat-contacts-wrap:after {
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 height:20px;
 content:'';
 background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%)
}
.chat-contacts-wrap .simplebar-content {
 padding-bottom:0 !important
}
.chat-contacts-item {
 display:flex;
 align-items:center;
 padding:8px 20px;
 min-height:96px;
 transition:background .4s
}
.chat-contacts-item:not(:last-child) {
 border-bottom:1px solid #e6effb
}
.chat-contacts-item:hover,
.chat-contacts-item.current,
.chat-contacts-item.active {
 background:#f7fafd
}
.chat-contacts-item.unseen p {
 font-weight:500;
 color:#292f37
}
.chat-contacts-content {
 padding-left:10px;
 transition:all .4s
}
.chat-contacts-content .chat-name {
 margin-bottom:3px
}
.chat-contacts-content p {
 color:#758698;
 font-size:12px;
 line-height:1.34;
 max-width:85%;
 margin-bottom:0;
 overflow:hidden;
 height:18px
}
.chat-contacts-badges {
 display:flex;
 align-items:center;
 margin:0 -3px;
 margin-bottom:2px
}
.chat-contacts-badges li {
 padding:0 3px;
 display:inline-flex
}
.chat-contacts-info {
 justify-content:space-between;
 align-items:center
}
.chat-contacts-texts {
 position:relative
}
.chat-contacts-texts .badge {
 position:absolute;
 right:0;
 top:50%;
 transform:translateY(-50%)
}
.chat-messages {
 display:flex;
 flex-direction:column;
 flex-grow:1
}
.chat-messages-head {
 position:relative;
 padding:14px 12px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 border-bottom:1px solid #d2dde9
}
.chat-messages-name {
 font-weight:500;
 display:inline-flex;
 align-items:center
}
.chat-messages-name .icon {
 margin-left:7px
}
.chat-messages-name-ellipsis {
 width:80px;
 display:inline-block;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis
}
.chat-messages-tools {
 display:flex
}
.chat-messages-tools>li {
 padding:0 0;
 display:inline-flex
}
.chat-messages-tools>li>a {
 display:inline-flex;
 color:#495463;
 border-radius:50%;
 padding:7px
}
.chat-messages-tools>li>a.active {
 color:#2c80ff
}
.chat-messages-tools>li>a.show-information.active {
 color:#2c80ff;
 background:#e6effb
}
.chat-messages-search {
 position:absolute;
 top:100%;
 left:30px;
 right:30px;
 bottom:-20px;
 z-index:4;
 padding:10px 0 0 0;
 margin-top:1px;
 background:#fff;
 opacity:0;
 visibility:hidden;
 transition:all .4s
}
.chat-messages-search.active {
 transform:translateY(10px);
 opacity:1;
 visibility:visible
}
.chat-messages-body {
 height:calc(100% - 165px)
}
.chat-messages-body .simplebar-content {
 padding-top:15px;
 padding-bottom:15px
}
.chat-messages-list {
 padding:15px 12px 0
}
.chat-messages-item {
 display:flex;
 align-items:flex-end;
 padding:5px 0
}
.chat-messages-item.self {
 flex-direction:row-reverse
}
.chat-messages-sap {
 position:relative;
 width:70%;
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 padding:5px 0
}
.chat-messages-sap span {
 display:inline-block;
 padding:0 20px;
 background:#fff;
 position:relative;
 z-index:5;
 color:#758698;
 font-size:13px
}
.chat-messages-sap:before {
 position:absolute;
 top:50%;
 height:1px;
 left:0;
 right:0;
 background:#e6effb;
 content:'';
 transform:translateY(-50%)
}
.chat-messages-content {
 margin:0;
 flex-grow:1
}
.chat-messages-bubble {
 position:relative;
 padding:16px 20px;
 background:#f7fafd;
 margin:4px 0;
 display:inline-block;
 border-radius:4px
}
.chat-messages-body .chat-messages-bubble {
 border-radius:4px 4px 4px 0;
 clear:both;
 float:left
}
.chat-messages-body .self .chat-messages-bubble {
 text-align:right;
 float:right;
 background:#2c80ff;
 color:#fff;
 border-radius:4px 4px 0 4px
}
.chat-messages-bubble p {
 margin-bottom:8px
}
.chat-messages-bubble p:last-of-type {
 margin-bottom:0
}
.chat-messages-bubble:hover .chat-messages-actions {
 opacity:1
}
.chat-messages-attachments {
 padding:4px 0;
 display:flex;
 width:100%;
 margin:0 -1px
}
.chat-messages-attachments>div {
 margin:0 1px
}
.self .chat-messages-attachments {
 flex-direction:row-reverse
}
.chat-messages-actions {
 position:absolute;
 left:100%;
 top:50%;
 transform:translateY(-50%);
 opacity:0;
 transition:all .4s;
 z-index:2
}
.self .chat-messages-actions {
 left:auto;
 right:100%
}
.chat-messages-actions>a {
 padding:0 20px;
 color:#495463
}
.chat-messages-actions>a:hover {
 color:#2c80ff
}
.chat-messages-badges {
 padding:4px 0 2px;
 display:flex;
 margin:0 -5px
}
.chat-messages-badges>div,
.chat-messages-badges>li {
 padding:0 5px
}
.chat-messages-info {
 display:flex;
 margin:0 -8px;
 padding-top:2px;
 clear:both;
 flex-wrap:wrap
}
.self .chat-messages-info {
 flex-direction:row-reverse
}
.chat-messages-info li {
 font-size:12px;
 padding:0 8px;
 position:relative
}
.chat-messages-info li:not(:last-child):after {
 position:absolute;
 right:0;
 top:50%;
 content:'';
 height:4px;
 width:4px;
 background:#d2dde9;
 border-radius:50%;
 transform:translate(50%, -50%)
}
.self .chat-messages-info li:not(:last-child):after {
 right:auto;
 left:0;
 transform:translate(-50%, -50%)
}
.chat-messages-info li a {
 color:#758698
}
.chat-messages-info li a:hover {
 color:#2c80ff
}
.chat-messages-info-name {
 width:100%
}
.chat-messages-info-name:after {
 display:none
}
.chat-messages-field {
 padding:0 12px 12px;
 margin-top:auto;
 display:flex;
 align-items:center
}
.chat-messages-field .toggle-mobile-content {
 bottom:100%;
 left:50%;
 transform:translateX(-50%)
}
.chat-messages-input {
 position:relative;
 flex-grow:1;
 margin-right:8px
}
.chat-messages-insert {
 margin:0 -10px;
 padding:0 5px;
 background:#fff
}
.chat-messages-insert li {
 padding:8px 10px
}
.chat-messages-icon {
 display:inline-flex
}
.chat-messages-icon a {
 display:inline-flex
}
.chat-information {
 width:350px;
 max-width:100%;
 padding:0 30px;
 flex-shrink:0;
 height:100%;
 overflow-y:scroll
}
.chat-information-wrap {
 position:absolute;
 right:-100%;
 top:0;
 transition:all .4s;
 width:350px;
 max-width:85%;
 height:100%;
 overflow:hidden;
 flex-shrink:0;
 background:#fff;
 z-index:1;
 padding:25px 0
}
.chat-information-wrap.active {
 right:0
}
.chat-information .accordion-content {
 padding-right:0 !important
}
.chat-information .accordion-heading {
 text-transform:uppercase;
 color:#495463;
 font-size:13px;
 font-weight:500;
 margin-bottom:16px;
 letter-spacing:0.03em
}
.chat-information .accordion-heading span {
 color:#758698;
 display:inline-block;
 margin-left:4px
}
.chat-details-item {
 margin-bottom:15px
}
.chat-details-title {
 font-weight:12px;
 color:#758698;
 margin-bottom:8px
}
.chat-details-info {
 display:flex;
 align-items:center
}
.chat-details-info .chat-name {
 margin-left:8px
}
.chat-details-drop {
 margin-left:auto;
 position:relative;
 display:inline-flex
}
.chat-details-drop>a {
 display:inline-flex;
 color:#758698
}
.chat-details-drop .dropdown-content {
 top:-5px
}
.chat-member-list {
 margin-left:-10px;
 margin-right:-10px;
 height:165px;
 margin-top:15px
}
.chat-member-item {
 position:relative;
 display:flex;
 align-items:center;
 padding:4px 10px
}
.chat-member-item .chat-name {
 margin-left:5px;
 color:#758698
}
.chat-member-item>* {
 position:relative;
 z-index:1
}
.chat-member-item:before {
 position:absolute;
 content:'';
 background:rgba(230,239,251,0.5);
 top:0;
 bottom:0;
 left:0;
 right:0;
 z-index:0;
 opacity:0;
 transition:all .4s
}
.chat-member-item:hover:before,
.chat-member-item:hover .chat-member-action {
 opacity:1
}
.chat-member-item:hover .chat-name {
 color:#495463
}
.chat-member-action,
.chat-member-position {
 margin-left:auto
}
.chat-member-action {
 position:relative;
 opacity:0;
 transition:all .4s
}
.chat-member-action a {
 position:relative;
 color:#758698;
 top:2px
}
.chat-member-action .dropdown-content {
 margin-top:-3px
}
.chat-member-position {
 color:#758698;
 font-size:11px
}
.chat-add-short {
 position:absolute;
 top:20px;
 left:20px;
 opacity:0;
 transition:all .4s
}
.btn-long {
 display:none
}
@media (min-width: 480px) {
 .chat-contacts-info {
  display:flex
 }
 .chat-contacts-content p {
  max-width:75%;
  height:auto
 }
 .btn-short {
  display:none
 }
 .btn-long {
  display:block
 }
}
@media (min-width: 576px) {
 .chat-messages-head {
  padding:14px 30px
 }
 .chat-messages-list {
  padding:15px 30px 0
 }
 .chat-messages-name-ellipsis {
  width:auto;
  max-width:220px
 }
 .chat-messages-info-name {
  width:auto
 }
 .chat-messages-info-name:after {
  display:block
 }
 .chat-messages-body .chat-messages-bubble {
  max-width:85%
 }
 .chat-messages-input {
  margin-right:20px
 }
 .chat-messages-field {
  padding:0 30px 30px
 }
 .chat-messages-field .toggle-mobile-content {
  transform:translateX(0)
 }
 .chat-messages-insert {
  display:flex
 }
}
@media (min-width: 992px) {
 .chat-wrap {
  overflow:visible
 }
 .chat-wrap:after {
  display:none !important
 }
 .chat-contacts {
  position:static
 }
 .chat-contacts.short {
  width:80px
 }
 .chat-contacts-list {
  min-width:350px
 }
 .chat-contacts-tools-long {
  opacity:1
 }
 .short .chat-contacts-tools-long {
  opacity:0
 }
 .chat-contacts-tools-short {
  opacity:0
 }
 .short .chat-contacts-tools-short {
  opacity:1
 }
 .chat-contacts-heading {
  justify-content:space-between
 }
 .short .chat-contacts-heading {
  justify-content:center
 }
 .short .chat-contacts-title {
  display:none
 }
 .short .chat-contacts-content {
  opacity:0
 }
 .chat-users {
  margin:0 -10px
 }
 .chat-users-search {
  transition:all .4s
 }
 .short .chat-users-search {
  opacity:0
 }
 .short .chat-add-short {
  opacity:1
 }
 .chat-information {
  min-width:350px
 }
 .chat-information-wrap {
  position:static;
  width:0;
  right:0
 }
 .chat-information-wrap.active {
  width:350px
 }
 .chat-users {
  display:flex
 }
 .chat-messages {
  border-left:1px solid #d2dde9;
  border-right:1px solid #d2dde9
 }
 .chat-messages-icon {
  display:none
 }
}
.timeline {
 position:relative;
 padding:15px 0
}
.timeline-wrap {
 position:relative;
 overflow:hidden;
 height:100%;
 min-height:300px
}
.timeline-wrap .timeline-innr {
 overflow-x:hidden;
 height:100%;
 position:absolute;
 padding-right:20px;
 padding-bottom:30px
}
.timeline-wrap.loaded .timeline-innr {
 padding-bottom:0
}

                .mobile{
                        display: none;
                    }
                    .desProfit{
                        display: block;
                    }
                    .mobileProfit {
                        display: none;
                    }
                    .heded{
                       height:210px
                    }
                    
                @media (max-width: 576px) {
                    .mobile{
                        display: flex;
                    }
                    .heded{
                       height: 120px
                    }
                   .mrnr{
                       display: none
                   }
                    
                    .hbetf{
                       display: none
                   }
                    .mobileProfit {
                        padding-top: 20px;
                        display: block;
                    }
                    .desProfit {
                        display: none;
                    }
                    .kjfwf {
                        display: none;
                    }
                }
                    
                    .mfjkg{
                        color:#2c80ff!important;
                        cursor:default;
                    }
                .asff4 {
                    color:#2c80ff;
                }
                </style>

            <style>


        .loader-support {
  --path: #253992;
  --dot: #2c80ff;
  --duration: 3s;
  width: 44px;
  height: 44px;
  position: relative;
}
.loader-support:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  display: block;
  background: var(--dot);
  top: 37px;
  left: 19px;
  -webkit-transform: translate(-18px, -18px);
          transform: translate(-18px, -18px);
  -webkit-animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader-support svg {
  display: block;
  width: 100%;
  height: 100%;
}
.loader-support svg rect,
.loader-support svg polygon,
.loader-support svg circle {
  fill: none;
  stroke: var(--path);
  stroke-width: 6px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.loader-support svg polygon {
  stroke-dasharray: 145 76 145 76;
  stroke-dashoffset: 0;
  -webkit-animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader-support svg rect {
  stroke-dasharray: 192 64 192 64;
  stroke-dashoffset: 0;
  -webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader-support svg circle {
  stroke-dasharray: 150 50 150 50;
  stroke-dashoffset: 75;
  -webkit-animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}


@-webkit-keyframes pathRect {
  25% {
    stroke-dashoffset: 64;
  }
  50% {
    stroke-dashoffset: 128;
  }
  75% {
    stroke-dashoffset: 192;
  }
  100% {
    stroke-dashoffset: 256;
  }
}

@keyframes pathRect {
  25% {
    stroke-dashoffset: 64;
  }
  50% {
    stroke-dashoffset: 128;
  }
  75% {
    stroke-dashoffset: 192;
  }
  100% {
    stroke-dashoffset: 256;
  }
}
@-webkit-keyframes dotRect {
  25% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(18px, -18px);
            transform: translate(18px, -18px);
  }
  75% {
    -webkit-transform: translate(0, -36px);
            transform: translate(0, -36px);
  }
  100% {
    -webkit-transform: translate(-18px, -18px);
            transform: translate(-18px, -18px);
  }
}
@keyframes dotRect {
  25% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(18px, -18px);
            transform: translate(18px, -18px);
  }
  75% {
    -webkit-transform: translate(0, -36px);
            transform: translate(0, -36px);
  }
  100% {
    -webkit-transform: translate(-18px, -18px);
            transform: translate(-18px, -18px);
  }
}
@-webkit-keyframes pathCircle {
  25% {
    stroke-dashoffset: 125;
  }
  50% {
    stroke-dashoffset: 175;
  }
  75% {
    stroke-dashoffset: 225;
  }
  100% {
    stroke-dashoffset: 275;
  }
}
@keyframes pathCircle {
  25% {
    stroke-dashoffset: 125;
  }
  50% {
    stroke-dashoffset: 175;
  }
  75% {
    stroke-dashoffset: 225;
  }
  100% {
    stroke-dashoffset: 275;
  }
}
.loader-support {
  display: inline-block;
  margin: 0 16px;
}
    
    


                .mobile{
                        display: none;
                    }
                    . desProfit{
                        display: block;
                    }
                    .mobileProfit {
                        display: none;
                    }
                    .heded{
                       height:210px
                    }
                    
                @media (max-width: 576px) {
                    .mobile{
                        display: flex;
                    }
                    .heded{
                       height: 120px
                    }
                   .mrnr{
                       display: none
                   }
                    
                    .hbetf{
                       display: none
                   }
                    .mobileProfit {
                        padding-top: 20px;
                        display: block;
                    }
                    .desProfit {
                        display: none;
                    }
                    .kjfwf {
                        display: none;
                    }
                }
                    
                    .mfjkg{
                        color:#2c80ff!important;cursor:default;
                    }
                                           .avatar_in_roll{
            width: 60px;
    height: 60px;
    margin: 15px 1px;
    background-color: #2b3035;
    border-radius: 3px;
    background-size: 100% 100%;
    }
                                        .effect-shine {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}
.actives {
    color:#fff;
}
                       .circle {
                           border:1px solid rgba(149,147,147,0.5); 
                           color:gray;
                           background:#fff;
                       }
                       .circle:hover {
                           
                           color:#fff;
                           
                       }
                       .actives {
    color:#fff;
}
                       .circle {
                           border:1px solid rgba(149,147,147,0.5); 
                           color:#000;
                       }