.tooltip {
	/* border-bottom: 1px dotted #0077AA; */
	cursor: help;
}

.tooltip::after {
	background: #6176a2;
	border-radius: 8px 8px 8px 0px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	color: #FFF;
	content: attr(data-tooltip); /* Главная часть кода, определяющая содержимое всплывающей подсказки */
	margin-top: -24px;
	margin-left: 0;
	opacity: 0; /* Наш элемент прозрачен... */
	padding: 3px 7px;
	position: absolute;
	visibility: hidden; /* ...и скрыт. */
			
	/*transition: all 0.4s ease-in-out; /* Добавить плавности по вкусу */
	max-width:250px;
	z-index:1;
	display: none;
}
.class_mktu{
	position: relative;
}	
.tooltip-hover{
	background: #6176a2;
	border-radius: 8px 8px 8px 0px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	color: #FFF;
	content: attr(data-tooltip);
	margin-top: -24px;
	margin-left: 0;
	/* opacity: 0; */
	padding: 3px 7px;
	position: absolute;
	/* visibility: hidden; */
	width: 250px;
	z-index: 1;
	top: 70px;
}

/*Для мобильных устройств чтобы подсказка не выходила за пределы экрана*/
.tooltip.tooltip_7::after,
.tooltip.tooltip_8::after,
.tooltip.tooltip_9::after,
.tooltip.tooltip_16::after,
.tooltip.tooltip_17::after,
.tooltip.tooltip_18::after,
.tooltip.tooltip_25::after,
.tooltip.tooltip_26::after,
.tooltip.tooltip_27::after,
.tooltip.tooltip_34::after,
.tooltip.tooltip_35::after,
.tooltip.tooltip_36::after,
.tooltip.tooltip_43::after,
.tooltip.tooltip_44::after,
.tooltip.tooltip_45::after {
	left: auto;
	right: 0;
	margin: 0;
}
@media screen and (min-width: 767px){
	.tooltip:hover::after {
		opacity: 1; /* Показываем его */
		visibility: visible;
	}
}
@media screen and (max-width: 767px){
	.class_mktu input:checked + label.tooltip:hover::after {
		opacity: 1; /* Показываем его */
		visibility: visible;
	}
}

/*----------------------------------------------------------------------*/
@media screen and (max-width: 520px){
	.tooltip::after{
		right: auto!important
	}
	.tooltip.tooltip_1::after,
	.tooltip.tooltip_10::after,
	.tooltip.tooltip_19::after,
	.tooltip.tooltip_28::after,
	.tooltip.tooltip_37::after{
		left: 0!important;
	}
	.tooltip.tooltip_2::after,
	.tooltip.tooltip_11::after,
	.tooltip.tooltip_20::after,
	.tooltip.tooltip_29::after,
	.tooltip.tooltip_38::after{
		left: -140%!important;
	}
	.tooltip.tooltip_3::after,
	.tooltip.tooltip_12::after,
	.tooltip.tooltip_21::after,
	.tooltip.tooltip_30::after,
	.tooltip.tooltip_39::after{
		left: -270%!important;
	}
	.tooltip.tooltip_4::after,
	.tooltip.tooltip_13::after,
	.tooltip.tooltip_22::after,
	.tooltip.tooltip_31::after,
	.tooltip.tooltip_40::after{
		left: -410%!important;
	}
	.tooltip.tooltip_5::after,
	.tooltip.tooltip_14::after,
	.tooltip.tooltip_23::after,
	.tooltip.tooltip_32::after,
	.tooltip.tooltip_41::after{
		left: -550%!important;
	}
	.tooltip.tooltip_6::after,
	.tooltip.tooltip_15::after,
	.tooltip.tooltip_24::after,
	.tooltip.tooltip_33::after,
	.tooltip.tooltip_42::after{
		left: -680%!important;
	}
	.tooltip.tooltip_7::after,
	.tooltip.tooltip_16::after,
	.tooltip.tooltip_25::after,
	.tooltip.tooltip_34::after,
	.tooltip.tooltip_43::after{
		left: -820%!important;
	}
	.tooltip.tooltip_8::after,
	.tooltip.tooltip_17::after,
	.tooltip.tooltip_26::after,
	.tooltip.tooltip_35::after,
	.tooltip.tooltip_44::after{
		left: -950%!important;
	}
	.tooltip.tooltip_9::after,
	.tooltip.tooltip_18::after,
	.tooltip.tooltip_27::after,
	.tooltip.tooltip_36::after,
	.tooltip.tooltip_45::after{
		left: -1090%!important;
	}
}