/**
* @package CSS Magic Extension 
* @copyright (c) 2015 martin - https://www.martins-phpbb.com
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
---------------------------------------------------------------------------- */

/* Put your logo in the path below and set height and width if it needs it
.site_logo {
    background-image: url("ext/martin/cssmagicaddon/styles/prosilver/theme/images/site_logo.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 350px;
    height: 55px;

}
*/


.mchat-message-flash {
	animation-name: flash-message;
	animation-duration: .8s;
	animation-timing-function: ease-out;
}

@keyframes flash-message {

	0% {
		background-color: #FF0000;
		opacity: 0;
	}

	100% {
		background-color: transparent;
		opacity: 1;
	}

}

.mchat-room.active .mchat-room-name {
    	text-decoration: blink;
	-webkit-animation-name: pulsate;
	-webkit-animation-duration: 1.8s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

@-webkit-keyframes pulsate {
    0% { 
        opacity: 0.1;
    }
    50% { 
        opacity: 1.0;
    }
    100% { 
        opacity: 0.1;
    }
}


.mchat-room-protected, .mchat-room-private {
    display: none;
}

.mchat-rooms-body {
	border-radius: 6px !important;
}

.mchat-status {
	position: absolute;
	top: calc(50% - 2px) !important;
	font-size: 14px !important;
}

.mchat-panel-buttons .icon {
	font-size: 16px;
	margin-top: -5px;
}

/** Ticker **/
.ticker {
  --ticker-duration: 10s;
  z-index: 10;
  overflow: hidden;
  padding: 0.5rem;
}

.ticker__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: var(--ticker-duration);
  text-align: center;
  margin-top: -7px;
  width: max-content;
  padding-left: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ticker__inner {
    flex-wrap: wrap;
    white-space: inherit;
    padding-left: 0;
    width: auto;
  }
}

.ticker__inner p {
  margin: 0 2rem;
}

@keyframes ticker {
  0% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}