/* notification v1 15.05.2018 */
.notification {
	margin-left:10px;
	margin-right: 10px;
	position: relative;
	width: 21px !important;
    height: 24px !important;
	cursor: pointer;
}

.notification .count {
	position: absolute;
    top: -2px;
    right: -6px;
    color: #fff;
    background-color: red;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
}

.notification .count {
	-moz-animation-duration: 1.2s;
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-moz-animation-name: slidein;
	-webkit-animation-name: slidein;
	animation-name: slidein;
}

.notification_content .new {
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-moz-animation-name: neww;
	-webkit-animation-name: neww;
	animation-name: neww;
	background: #fffee7;
}

@keyframes neww {
  from {
    background: #fffdbb;
  }
  to {
    background: #fffee7;
  }
}

@-webkit-keyframes slidein {
  from {
    top: -25px; 
	opacity: 0;
  }
  to {
    top: -2px;
	opacity: 1;
  }
}

@-moz-keyframes slidein {
  from {
    top: -25px; 
	opacity: 0;
  }
  to {
    top: -2px;
	opacity: 1;
  }
}

@keyframes slidein {
  from {
    top: -25px; 
	opacity: 0;
  }
  to {
    top: -2px;
	opacity: 1;
  }
}

.notification.off {
	background: url(/misc/notification/notification.png) 0px 0px;
}
.notification.on {
	background: url(/misc/notification/notification.png) 20px 0px;
	-webkit-animation: bzz 5s infinite linear;
	-moz-animation: bzz 5s infinite linear;
	-o-animation: bzz 5s infinite linear;
	animation: bzz 5s infinite linear;
}

.bg-red {
	background: #ed0700;
}

.notification_block {
	display:none;
}
.notification_block_show {
	display: block;
    position: absolute;
    background: #fff;
    border-top: 1px solid #ed0700;
    width: 354px;
    margin-left: -313px;
    line-height: 25px;
    opacity: 1;
    max-height: 430px;
    margin-top: 2px;
    box-shadow: 0px 6px 10px #ccc;
}

.notification_block .header {
	text-align: left;
    background: #ed0700;
    padding-left: 10px;
    font-weight: bold;
    color: #ffffff;
    line-height: 32px;
    height: 32px !important;
    border-bottom: 2px solid #ddd;
}

.notification_block .notification_content {
	max-width: 430px !important;
    padding: 0px 5px;
	overflow: auto;
    max-height: 380px;
}
.notification_content a {
	font-weight:400;
}
.notification_content div {
	padding: 5px 0px;
}
.notification_content .loading {
	text-align: center;
}
.notification_content .time {
	font-size: 8px;
    float: right;
    color: #a0a0a0;
}
.notification_content .time:hover {
    color: #000;
}

.n_n {
	line-height: 15px;
    margin: 2px 0px;
    border-bottom: 1px solid #ddd;
    display: inline-block;
	width: 100%;
	cursor: pointer;
	position: relative;
}
.n_n:hover {
	background: #f7f7f7;
}
.n_n img {
	max-height: 25px;
    margin: 2px 4px;
    float: left;
}
.n_n p {
	line-height: 15px;
	margin: 0px 2px;
	word-break: break-word;
}

.n_info {
	background: #c7e0ff;
}
.n_info:hover {
	background: #bbd9ff;
}

/**/
.n_sell_content {
	/*border-left: 2px solid red;
    border-right: 2px solid red;
	border-bottom: 2px solid red;*/
}
.n_sell_content .naimen {
	padding: 0px;
	font-size: 12px;
	line-height: 15px;
	height: 30px;
	overflow: hidden;
}

.n_sell_content .sale {
	font-size: 17px;
	font-weight: bold;
    color: red;
}

.n_sell_content .sale_p {
	font-size: 17px;
	font-weight: bold;
    color: red;
}

.n_sell_content .price {
	font-size: 17px;
    font-weight: bold;
	color: black;
}

.n_sell_content .bord {
	height: 1px;
    background: #ccc;
	padding: 0px;
}

.n_sell_content thead {
	line-height: 12px;
    color: #737373;
}
.n_sell_content thead th {
	text-align: left;
    padding-left: 10px;
    background: orange;
    height: 24px;
}
.n_sell_content thead th a {
	font-weight: bold;
    color: #fff;
}

/* korz */
.korzina_main {
  position:relative;
}

.korzina_main .korz-tooltip {
    display: block;
    border-radius: 5px;
    width: 300px;
    position: absolute;
    padding: 12px 18px;
    font-family: open-sans-regular, sans-serif;
    font-size: 14px;
    color: white;
    line-height: 22px;
    box-sizing: border-box;
    outline: none;
	cursor:pointer;
}

.korz-tooltip.down {
	top: 15px;
	opacity: 1;
	
	transition: all 0.4s ease;
	animation: shake 500ms ease-in-out forwards;
	z-index: 1;
}

.korz-tooltip.up {
	top: 0px;
	opacity: 0;
	transition: all 0.4s ease;
	z-index: -1;
}

.korz-tooltip.korzina { /* статус 0 */
	background: #da251c;
	box-shadow: 0px 2px 0px #a71a13;
}
.korz-tooltip.korzina > .arrow { /* статус 0 */
	border-bottom: 10px solid #da251c;
}

.korz-tooltip.korzina_order { /* статус 1 */
	background: #43b02a;
	box-shadow: 0px 2px 0px #33901e;
}
.korz-tooltip.korzina_order > .arrow { /* статус 1 */
	border-bottom: 10px solid #43b02a;
}

.korz-tooltip.korzina_confirm { /* статус 2 */
	background: #2d94ca;
	box-shadow: 0px 2px 0px #1d76a5;
}
.korz-tooltip.korzina_confirm > .arrow { /* статус 2 */
	border-bottom: 10px solid #2d94ca;
}

.korz-tooltip.korzina_race { /* статус 3 */
	background: #f39545;
    box-shadow: 0px 2px 0px #d77927;
}
.korz-tooltip.korzina_race > .arrow { /* статус 3 */
	border-bottom: 10px solid #f39545;
}

.korzina_main .korz-tooltip .close {
	display: block;
    color: white;
    float: right;
    margin: -14px -14px 0 0;
    font-size: 14px;
    text-decoration: none;
	cursor: pointer;
}
.korzina_main .korz-tooltip .arrow {
	width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    margin-top: -10px;
    margin-left: -10px;
    top: 0px;
}

@keyframes shake {
  0% { 
    transform: rotate(2deg);
  }
  50% {
   transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes bzz {
	0%, 49%, 59%, 100% { 
		transform: rotate(0deg);
	}
	50% {
	   transform: rotate(10deg);
	}
	53% {
	   transform: rotate(-10deg);
	}
	56% {
	   transform: rotate(5deg);
	}
	58% {
	   transform: rotate(-2deg);
	}
}

@-webkit-keyframes bzz {
	0%, 49%, 59%, 100% { 
		transform: rotate(0deg);
	}
	50% {
	   transform: rotate(10deg);
	}
	53% {
	   transform: rotate(-10deg);
	}
	56% {
	   transform: rotate(5deg);
	}
	58% {
	   transform: rotate(-2deg);
	}
}