/* Табы */
.rules_card_header 
{
    float: left;
    margin: 5px 0px 0px 10px;
}
.rules_card_right {
    width: 100%;
}
.tabs-block {
  display: block;
  border-radius: 3px;
  overflow: hidden;
}
@media (min-width: 600px) {
.tab-link {
  padding: 0 20px;
  font-size: 10pt;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
}
@media (max-width: 600px) {
.tab-link {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
}
.tab-link.active1 {
  background: var(--span-color-button);
  color: #fff;
}

.tab-content-block {
  display: block;
  padding: 0px 10px 0px 10px;
  color: rgba(255, 255, 255, .85);
}

.tab-content:not(.active1) {
  display: none;
}

.tab-link {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: all linear .2s;
}
	
/* vertical */
@media all and (min-width: 850px) {

	.blockrl {
	  padding: 0px 20px 30px 20px;
	}

	.tab-link:not(.active1):hover {
	  background: var(--span-color-button);
	  box-shadow: -3px 0 0 0 var(--span-color) inset;
	}

	.tab-link-block {
	  display: block;
	  /*background: var(--hover);*/
	  overflow: hidden;
	  box-shadow: -1px 0 0 0 #17191f inset;
	}

	.tabs-block {
	  display: grid;
	  grid-template-columns: 280px auto;
	  grid-gap: 0;
	}

	.tabs-block .tab-link {
	  display: block;
	  /*width: calc(100% - 20px);*/
	}

	.tabs-block .tab-link.active1 {
	  box-shadow: -3px 0 0 0 var(--span-color-back) inset;
	}
}

/* horizontal */
@media (min-width: 451px) and (max-width: 850px) {
	
	.blockrl {
	  padding: none;
	}
	
	.tab-link:not(.active1):hover {
	  background: rgba(77, 77, 77, .2);
	  box-shadow: 0 -3px 0 0 var(--span-color) inset;
	}

	.tab-link-block {
	  display: block;
	  /*background: var(--hover);*/
	  overflow: hidden;
	}

	.tabs-block .tab-link-block::after {
	  content: '';
	  display: block;
	  clear: both;
	}

	.tabs-block .tab-link {
	  display: inline-block;
	  float: left;
	  min-width: calc(50px - 20px);
	  max-width: 250px;
	  margin-right: 2px;
	}

	.tabs-block .tab-link.active1 {
	  box-shadow: 0 -3px 0 0 var(--span-color-back) inset;
	}

	.tabs-block .tab-link:last-child {
	  margin-right: 0;
	}
}

/* vertical */
@media all and (max-width: 450px) {

	.blockrl {
	  padding: 30px 0 30px 0;
	}

	.tab-link:not(.active1):hover {
	  background: rgba(77, 77, 77, .2);
	  box-shadow: -3px 0 0 0 var(--span-color) inset;
	}

	.tab-link-block {
	  display: block;
	 /*background: var(--hover);*/
	  text-align: center;
	  overflow: hidden;
	  box-shadow: -1px 0 0 0 #2b2b2b inset;
	}

	.tabs-block .tab-link {
	  display: block;
	  width: 100%;
	  /*width: calc(100% - 20px);*/
	}

	.tabs-block .tab-link.active1 {
	  box-shadow: -3px 0 0 0 var(--span-color-back) inset;
	}
}
   ul.cp {
    margin: 0; /* Обнуляем значение отступов */
	margin-bottom: 10px;
   }
   ul.cp li.cp {
    display: inline; /* Отображать как строчный элемент */
    margin-right: 10px; /* Отступ слева */
   }
   a.cp:active1 {
	   color: #8f8d8d;
   }
   a.cp:hover {
	   color: #dedede;
   }
   a.cp {
	   color: #8c8c8c;
   }
@media (min-width: 0px) and (max-width: 356px) { 
rm {
  font-size: 8px;
}
}
@media (min-width: 356px) and (max-width: 386px) { 
rm {
  font-size: 9px;
}
}
@media (min-width: 386px) and (max-width: 412px) { 
rm {
  font-size: 10px;
}
}
@media (min-width: 412px) and (max-width: 700px){ 
rm {
  font-size: 11px;
}
}
@media (min-width: 700px) { 
rm {
  font-size: 13.3px;
}
}
rtb {
  font-size: 13px;
  align: right;
}
bm {
  color: #ff0000;
}

dm {
  color: #cc0000;
}

zl {
  color: #00b300;
}

.kostil {
  color: #abb2c6;
}

A.dot {
  text-decoration: none; /* Убираем подчеркивание */
  border-bottom: 1px dashed #FFF; /* Добавляем свою линию */ 
  color: #FFF;
}

A.dot:hover {
  color: #FFF; /* Цвет ссылки при наведении на нее курсора */
}

ol.tn {
  list-style: none;
  counter-reset: li; 
}

li.tn {
  position: relative;
  box-sizing: border-box;
  padding: 0 10px 0 25px;
  margin: 25px 0;
  text-align: start;
}

/* Не трогать, а то пизды дам, я с этим ебался 2 часа
*/
li.tn:before {
  content: counters(li,".") ". "; 
  counter-increment: li; 
  position: absolute;
  left: -22px;
  top: 0;
  height: 20px;
  width: 40px;
  text-align: right;
}
li.tn:hover {
    color: #fff;
}

.tooltip2 {
	cursor: help;
}

.tooltip2::after {
	background: var(--bg-color);
	border-radius: 0px 8px 8px 8px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	color: #ff0000;
	content: attr(data-tooltip); /* Главная часть кода, определяющая содержимое всплывающей подсказки */
    margin-left: -27px;
	opacity: 0; /* Наш элемент прозрачен... */
	bottom: -37px;
	padding: 3px 7px;
	position: absolute;
	visibility: hidden; /* ...и скрыт. */
	transition: all 0.3s ease-in-out; /* Добавить плавности по вкусу */
}
		
.tooltip2:hover::after {
	opacity: 1; /* Показываем его */
	visibility: visible;
}

.tooltip1 {
    border-bottom: 1px dotted #FF0000;
    cursor: help;
}