@import "variables";
.widget-cartMessagers {
	//background: #d5e6f6;
	background: -moz-linear-gradient(top, rgba(213,230,246,1) 0%, rgba(125,185,232,0) 100%);
	background: -webkit-linear-gradient(top, rgba(213,230,246,1) 0%,rgba(125,185,232,0) 100%);
	background: linear-gradient(to bottom, rgba(213,230,246,1) 0%,rgba(125,185,232,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5e6f6', endColorstr='#007db9e8',GradientType=0 );
	display: flex;
	margin-left: -24px;
	margin-right: -24px;
	padding: 24px;
	@media (max-width: 767px) {
		margin-left: -12px;
		margin-right: -12px;
		padding: 16px 12px;
	}
	.w-side {
		width: 56px;
		min-width: 56px;
		margin-right: 24px;
	}
	.w-body {
		flex-grow: 1;
	}
	.w-userpic {
		position: relative;
		img {
			display: block;
			max-width: 100%;
			@include border-radius(50%);
		}
		&:before {
			content: '';
			position: absolute; bottom: 0; right: 0;
			display: block;
			width: 16px;
			height: 16px;
			@include border-radius(50%);
		}
		&.online {
			&:before {
				background: #2db92d;
			}
		}
	}
	.w-h1 {
		margin-bottom: 4px;
		font-size: 18px;
		font-weight: 700;
		color: $blue;
	}
	.w-h2 {
		margin-bottom: 4px;
		font-size: 16px;
		font-weight: 700;
		color: $blue;
	}
	.w-messagers {
		display: flex;
		flex-wrap: wrap;
		margin: 8px -8px 0;
		padding: 0;
		list-style: none;
		li {
			padding: 8px;
		}
		.w-messager,
		a.w-messager {
			background: $white;
			border: 0 !important;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100px;
			height: 100px;
			color: #333 !important;
			@include border-radius(4px);
			@include box-shadow(0 0 6px 2px #DDE4EC);
			.w-messager__icon {
				position: relative;
				display: block;
				width: 32px;
				height: 32px;
				img {
					display: block;
					max-width: 100%;
				}
			}
			.w-messager__name {
				margin-top: 8px;
				font-size: 12px;
				font-weight: 700;
				text-align: center;
			}
			&:hover {
				@include box-shadow(0 0 13px -3px #0D61AB);
			}
		}
	}
}