.header_top {
	/* margin-bottom: 20px; */
	
}



.header_top__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header_top-left {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: normal;
}
.header_top-left img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}
.top-left-btn{
	padding: 6px 12px;
	border-radius: 20px;
    background-color: #054588;
    display: flex;
    align-items: center;
	 gap: 8px;
	 line-height: normal;
	 text-transform: uppercase;
}
@media (max-width: 767px) {
    .top-left-btn {
      padding: 6px;
		font-size: 12px;
}}
.header_top-right {
	display: flex;
	align-items: center;
	gap: 10px;
}
@media (max-width: 767px) {
    .header_top-right {
        display: none;
}}

/* === Header: Общий стиль === */
.header {
  border-radius: 10px;
  padding: 10px;
  transition: border-radius 0.2s;
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.header__logo {
  display: flex;
  align-items: center;
  width: 15%;
}
@media (max-width: 767px) {
    .header__logo {
        width: 50%;
}}
.header__logo img {
  width: 100%;
  height: auto;
  max-width: 200px; /* Ограничение ширины логотипа */
  object-fit: contain;
}

/* === Навигация === */
.header__nav {
background-color: #00316680;
border-radius: 20px;
padding: 6px 14px;;
width: 100%;
display: flex;
    justify-content: center;
} 
.header__nav ul {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-direction: row;
}
.munav {
	border: 2px solid #ffb801;
	padding: 6px 14px;
    border-radius: 20px;
}

.header__nav ul li {
  position: relative;
}

/* === Ссылки в навигации === */
.header__nav ul li a {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s;
}

.header__nav ul li a:hover {
  color: #ffb801;
}

/* === Кнопки в шапке === */
.header_buttons {
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* === Горизонтальное меню (мобильное) === */
.scrollable-menu {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 20px;
  scroll-behavior: smooth;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.scrollable-menu li {
  white-space: nowrap;
  flex-shrink: 0;
}

/* === Кастомная полоса прокрутки (Chrome/Safari) === */
.scrollable-menu::-webkit-scrollbar {
  height: 6px;
}

.scrollable-menu::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.scrollable-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* === Мобильная версия header === */
.header__container-mobile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.header_buttons-mobile,
.header__button-register,
.header__button-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
@media (max-width: 767px) {
    .header_buttons-mobile,
.header__button-register,
.header__button-login {
        display: none;
}}

/* === Media Queries === */
@media (max-width: 767px) {
  .header {
    display: none;
  }

}

@media (min-width: 768px) {
  .header_mobile {
    display: none;
  }
}

.header_mobile {
	margin-top: 20px;
} 

/* === main === */
.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  margin: 20px 0;
}
.home-menu {
	background-color: #fff;
	padding: 20px;
	border-radius: 12px;
	color: #333;
} 

.sidebar-left,
.sidebar-right {
  flex: 0 0 18%;
      gap: 20px;
    display: flex;
    flex-direction: column;

}
@media (max-width: 1024px) {
    .sidebar-left,
.sidebar-right {
        display: none;
}}

.sidebar-left,
.sidebar-right {
	position: sticky;
  top: 20px;
  height: fit-content;
}

.main-content {
  flex: 1;
  background-color: #fff;
  color: #000;
  padding: 20px;
  border-radius: 12px;
}

/* Адаптив: на мобилках всё в столбик */
@media (max-width: 768px) {
  .sidebar-left,
  .sidebar-right,
  .main-content {
    flex: 0 0 100%;
  }
}


/* === Лкевый блок === */
.sports-menu {
  width: 220px;
  background: linear-gradient(to bottom, #002c6d, #003875);
  color: white;
  font-family: Arial, sans-serif;
  border-radius: 12px;
  overflow-y: auto;
  max-height: 100vh;
  padding: 10px 0;
}

.menu-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-item {
	background: #003266;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
  text-decoration: none;
  color: white;
}

.menu-item.active {
  background: #003266;
}

.menu-item .arrow {
  margin-left: auto;
  font-size: 12px;
}

.sports-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.sports-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sports-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color:#000;
  text-decoration: none;
  transition: background 0.2s;
}

.sports-list li a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sports-list li img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* слайдер */
.simple-carousel {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  /* background: #003875; */
}

.carousel-track  {
  display: flex;
  transition: transform 0.5s ease;
  gap: 16px;
  flex-wrap: nowrap;
}

.carousel-slide {
  flex: 0 0 100%;
  max-width: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 350px;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}
@media (max-width: 767px) {
    .carousel-slide img {
  width: 100%;
  height: 200px;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}
}

/* правый блок */
.bonus-banner {
  background: radial-gradient(circle at center, #00458a 0%, #002c6d 100%);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
  max-width: 300px;
  /* margin: 20px auto; */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.bonus-text .amount {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 6px;
  display: block;
}

.bonus-text .yellow {
  color: #ffdc3b;
}

.bonus-text .white {
  color: #ffffff;
}

.bonus-text .subtext {
  font-size: 14px;
  font-weight: 600;
  color: #86c8ff;
  margin-bottom: 16px;
}

.bonus-btn {
  display: inline-block;
  background-color: #ff4a00;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 30px;
  transition: background 0.2s;
}

.bonus-btn:hover {
  background-color: #e34000;
}

.games-widget {
  width: 280px;
  background: #00387c;
  border-radius: 12px;
  font-family: Arial, sans-serif;
  color: #fff;
  overflow: hidden;
}

.games-section {
  padding: 12px 12px 16px;
  background: #00387c;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}

.section-header.live {
  background: #401d8c;
  border-radius: 8px 8px 0 0;
  padding: 10px 12px;
  margin: -12px -12px 10px;
}

.section-header .count {
  color: #77c7ff;
  font-weight: normal;
  margin-left: 6px;
}

.view-all {
  font-size: 12px;
  color: #a9d0ff;
  text-decoration: none;
}

.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.game-grid img {
  width: 100%;
  border-radius: 6px;
  display: block;
}

.winners-widget {
  background: #00387c;
  color: #fff;
  border-radius: 12px;
  padding: 12px;
  width: 270px;
  font-family: Arial, sans-serif;
}

.winners-header {
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  text-transform: uppercase;
}

.winners-header span {
  font-weight: normal;
  display: block;
  font-size: 12px;
  color: #86c8ff;
}

.winners-header img {
  width: 20px;
  height: 20px;
}

.winners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.winners-list li {
  display: flex;
  align-items: center;
  background: #002c6d;
  border-radius: 8px;
  padding: 6px;
  gap: 10px;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.winners-list li a {
	display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
  gap: 10px;
}

.winners-list img {
  width: 50px;
  height: 38px;
  object-fit: cover;
  border-radius: 6px;
}

.winners-list .info {
  flex-grow: 1;
}

.winners-list .game {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.winners-list .user {
  font-size: 12px;
  color: #aad9ff;
}

.winners-list .amount {
  background: #ffca00;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.top-games {
  background: #002c6d;
  border-radius: 12px;
  padding: 16px;
  color: white;
  font-family: Arial, sans-serif;
  margin-top: 20px;
}

.top-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 12px;
  position: relative;
}

.top-header img {
  width: 18px;
  height: 18px;
}

.view-all {
  margin-left: auto;
  font-size: 12px;
  color: #a9d0ff;
  text-decoration: none;
  font-weight: bold;
}

.scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.game-scroll {
  display: flex;
  gap: 12px;
  min-width: max-content;
  padding-bottom: 10px;
  scrollbar-width: none;
}

.game-scroll::-webkit-scrollbar {
  display: none;
}

.game-card {
  flex: 0 0 auto;
  min-width: 160px;
  border-radius: 10px;
  overflow: hidden;
}

/* 💻 Десктоп-сетка */
@media (min-width: 768px) {
  .scroll-wrapper {
    overflow-x: unset;
  }

  .game-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    min-width: unset;
    width: 100%;
  }

  .game-card {
    width: 100%;
    min-width: unset;
    flex: unset;
  }
}




.game-card img {
  width: 100%;
  height: 100px;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}


/* live */
/* 🔹 Панель фильтров */
.sport-filter {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #f0f0f0;
  border-radius: 10px;
  flex-wrap: wrap;
}

.sport-filter button {
  border: none;
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sport-filter button.active {
  background: #ff6600;
  color: white;
}

.sport-filter img {
  width: 20px;
  height: 20px;
}

/* 🔸 Лига и матчи */
.league {
  margin-top: 16px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
}

.league-header {
  background: #f9b400;
  padding: 12px 16px;
  font-weight: bold;
  font-size: 14px;
  color: #000;
}

.match-row {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #eee;
  padding: 10px 16px;
  align-items: center;
}

.match-time {
  width: 70px;
  font-size: 12px;
  text-align: center;
  color: #555;
}

.match-teams {
  flex: 1 1 150px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.match-odds {
  display: grid;
  grid-template-columns: repeat(9, auto);
  gap: 6px;
  flex: 2;
}

.match-odds div {
  background: #fafafa;
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #222;
  min-width: 40px;
}

/* 📱 Адаптив */
@media (max-width: 768px) {
  .match-row {
    /* flex-direction: column; */
    align-items: flex-start;
  }

  .match-odds {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .match-teams {
    margin-bottom: 8px;
  }
}

@media (max-width: 1318px) {
    .sidebar-right {
        display: none;
}}

.text {
  color: #211E1E;
  font-family: Arial, sans-serif;
  font-size: 14px; /* Соответствует вашим текстам, например, .match-row */
}

.text img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* Соответствует вашим отступам */
  border-radius: 12px; /* Из .main-content */
}

.text .image-style-align-center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.text ul {
  margin-bottom: 20px;
  list-style-type: square;
  list-style-position: inside;
}

.text ul ul {
  margin-top: 10px; /* Уменьшено для компактности */
  margin-left: 15px;
}

.text ol {
  margin-bottom: 20px;
  list-style-position: inside;
}

.text ul ul li {
  list-style-type: square;
}

.text li + li {
  margin-top: 5px;
  text-align: left;
}

.text p {
  margin-bottom: 20px;
  text-align: left;
}

.text p:last-child {
  margin-bottom: 0;
}

.text .info-box {
  margin-bottom: 20px;
  color: #211E1E;
  padding: 20px;
  background-color: #fff; /* Из .main-content */
  border-radius: 12px; /* Из .main-content */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); /* Из .league */
}

.text .info-box svg {
  margin-right: 15px;
  flex-shrink: 0;
  width: 30px; /* Уменьшено для компактности */
  height: 30px;
}

.text .info-box.info-box-success {
  background-color: #e6f0ff; /* Заменено на оттенок из вашей палитры (#86c8ff) */
}

.text .info-box.info-box-info {
  background-color: #fff7e6; /* Заменено на оттенок из вашей палитры (#ffdc3b) */
}

.text .info-box.info-box-warning {
  background-color: #fff3e0; /* Заменено на оттенок из вашей палитры (#ff4a00) */
}

.text .info-box.info-box-danger {
  background-color: #ffe6e6; /* Заменено на оттенок из вашей палитры (#ff4a00) */
}

.text .info-box.info-box-success:before {
  content: "";
  display: block;
  background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M25.2703 0.383606C11.7615 0.383606 0.770264 11.3748 0.770264 24.8836C0.770264 38.3924 11.7615 49.3836 25.2703 49.3836C38.779 49.3836 49.7703 38.3924 49.7703 24.8836C49.7703 11.3748 38.779 0.383606 25.2703 0.383606ZM38.9632 18.4362L23.3054 33.9713C22.3843 34.8924 20.9106 34.9538 19.9282 34.0327L11.6387 26.4801C10.6562 25.559 10.5948 24.024 11.4545 23.0415C12.3755 22.059 13.9106 21.9976 14.8931 22.9187L21.4632 28.9362L35.4632 14.9362C36.4457 13.9538 37.9808 13.9538 38.9632 14.9362C39.9457 15.9187 39.9457 17.4538 38.9632 18.4362Z' fill='%2386c8ff' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='49' height='49' fill='white' transform='translate(0.770264 0.383606)' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); /* Цвет изменён на ваш #86c8ff */
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  flex-shrink: 0;
}

.text .info-box.info-box-info:before {
  content: "";
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='info-circle' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-info-circle fa-w-16 fa-3x'%3E%3Cpath fill='%23ffdc3b' d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' class=''%3E%3C/path%3E%3C/svg%3E"); /* Цвет изменён на ваш #ffdc3b */
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  flex-shrink: 0;
}

.text .info-box.info-box-warning:before {
  content: "";
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='exclamation-circle' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-exclamation-circle fa-w-16 fa-3x'%3E%3Cpath fill='%23ff4a00' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' class=''%3E%3C/path%3E%3C/svg%3E"); /* Цвет изменён на ваш #ff4a00 */
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  flex-shrink: 0;
}

.text .info-box.info-box-danger:before {
  content: "";
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='exclamation-circle' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-exclamation-circle fa-w-16 fa-3x'%3E%3Cpath fill='%23f9b400' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' class=''%3E%3C/path%3E%3C/svg%3E"); /* Цвет изменён на ваш #f9b400 */
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  flex-shrink: 0;
}

.text .info-box ul,
.text .info-box ol {
  margin: 10px 0;
}

.text .info-box p {
  margin: 5px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  background-color: #fff; /* Из .main-content */
  border-radius: 12px; /* Из .main-content */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); /* Из .league */
}

thead th {
  background-color: #f9b400; /* Из .league-header */
  color: #000;
  font-weight: 600;
  text-align: left;
  padding: 12px 15px;
  border: 1px solid #eee; /* Из .match-row */
  word-break: break-word;
  overflow-wrap: break-word;
}

td {
  padding: 12px 15px;
  border: 1px solid #eee;
  word-break: break-word;
  overflow-wrap: break-word;
}

tbody tr:nth-child(even) {
  background-color: #fafafa; /* Из .match-odds */
}

@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  thead,
  tbody,
  th,
  td,
  tr {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  tr {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  td,
  th {
    text-align: left;
    padding: 8px;
  }

  th {
    background-color: transparent;
    font-weight: bold;
  }
}

[class*="b"], [class*="t"], [class*="l"], [class*="r"] {
  box-sizing: border-box;
}

.b0 { margin-bottom: 0; }
.b5 { margin-bottom: 5px; }
.b10 { margin-bottom: 10px; }
.b15 { margin-bottom: 15px; }
.b20 { margin-bottom: 20px; }
.b25 { margin-bottom: 25px; }
.b30 { margin-bottom: 30px; }
.b35 { margin-bottom: 35px; }
.b40 { margin-bottom: 40px; }
.b50 { margin-bottom: 50px; }
.b60 { margin-bottom: 60px; }
.b70 { margin-bottom: 70px; }
.b80 { margin-bottom: 80px; }
.b90 { margin-bottom: 90px; }
.b100 { margin-bottom: 100px; }

.t0 { margin-top: 0; }
.t5 { margin-top: 5px; }
.t10 { margin-top: 10px; }
.t15 { margin-top: 15px; }
.t20 { margin-top: 20px; }
.t25 { margin-top: 25px; }
.t30 { margin-top: 30px; }
.t35 { margin-top: 35px; }
.t40 { margin-top: 40px; }
.t50 { margin-top: 50px; }
.t60 { margin-top: 60px; }
.t70 { margin-top: 70px; }
.t80 { margin-top: 80px; }
.t90 { margin-top: 90px; }
.t100 { margin-top: 100px; }

.l0 { margin-left: 0; }
.l5 { margin-left: 5px; }
.l10 { margin-left: 10px; }
.l15 { margin-left: 15px; }
.l20 { margin-left: 20px; }
.l25 { margin-left: 25px; }
.l30 { margin-left: 30px; }
.l35 { margin-left: 35px; }
.l40 { margin-left: 40px; }
.l50 { margin-left: 50px; }
.l60 { margin-left: 60px; }
.l70 { margin-left: 70px; }
.l80 { margin-left: 80px; }
.l90 { margin-left: 90px; }
.l100 { margin-left: 100px; }

.r0 { margin-right: 0; }
.r5 { margin-right: 5px; }
.r10 { margin-right: 10px; }
.r15 { margin-right: 15px; }
.r20 { margin-right: 20px; }
.r25 { margin-right: 25px; }
.r30 { margin-right: 30px; }
.r35 { margin-right: 35px; }
.r40 { margin-right: 40px; }
.r50 { margin-right: 50px; }
.r60 { margin-right: 60px; }
.r70 { margin-right: 70px; }
.r80 { margin-right: 80px; }
.r90 { margin-right: 90px; }
.r100 { margin-right: 100px; }