/* Блок Руни */

  .lol-info-block-runes h4 {
    font-size: 16px !important;
    margin-top: 0px;
    margin-bottom: 0px;
    text-transform: uppercase !important;
}
  
  .lol-info-block-runes {
    position: relative;
    padding: 10px;
    margin: 10px 0px;
    background-color: var(--lol-info-blockcustom-runes-background);
    border-radius: 10px;
    }
    
    
    .lol-info-blocknewbg-runes {
    display: flex;
    position: relative;
    padding: 10px;
    margin: 0px 0px 10px 0;
    background-color: var(--lol-info-runestumb-background);
    min-height: 90px;
    border-radius: 10px;
    }
    
    
    
    .lol-iconrunesinfo {
    width: 70px;
    height: 70px;
    border: 3px solid var(--lol-info-blockcustom-runes-background);
    border-radius: 45px;
    }
    
    
    
    
    .lol-contentcustomb-runes {
    margin: 0 0 0 10px;
    }
    
    
    .lol-contentcustomb-runes p {
    margin-top: 0;
    margin-bottom: 0rem;
    }
    
    
    
    
    .typerunes-container {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    position: relative;
    margin-top: 3px;
    }
    
    
    
    
    .typeirunes-item img {
    margin: 0px 10px 2px 0px;
    }
    
    
    
    .typerunes-item p {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 15px;
    line-height: 1.5;
    }  
    
    .typerunes-item {
    display: flex;
    align-items: center;
    background-color: var(--lol-info-blockcustom-runes-background);
    padding: 6px 10px 6px 10px;
    border-radius: 5px;
    }
    
    .typerunes-item img {
    width: 14px;
    height: auto;
    margin-right: 5px;
    
    }
    
    
    
    
    .lol-info-block-runes-fullwith {
      margin: 0 15px 0 15px;
      }
      
    
    
    
     /* Блок Руни Кінець*/









  /* Блок Предмету */

  .lol-info-block-items h4 {
    font-size: 16px !important;
    margin-top: 0px;
    margin-bottom: 0px;
    text-transform: uppercase !important;
}
  
  .lol-info-block-items {
    position: relative;
    padding: 10px;
    margin: 10px 0px;
    background-color: var(--lol-info-blockcustom-items-background);
    border-radius: 10px;
    }
    
    
    .lol-info-blocknewbg-items {
    display: flex;
    position: relative;
    padding: 10px;
    margin: 0px 0px 10px 0;
    background-color: var(--lol-info-itemstumb-background);
    min-height: 90px;
    border-radius: 10px;
    }
    
    
    
    .lol-iconitemsinfo {
    width: 70px;
    height: 70px;
    border: 3px solid var(--lol-info-blockcustom-items-background);
    border-radius: 10px;
    }
    
    
    
    
    .lol-contentcustomb-items {
    margin: 0 0 0 10px;
    }
    
    
    .lol-contentcustomb-items p {
    margin-top: 0;
    margin-bottom: 0rem;
    }
    
    
    
    
    .typeitems-container {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    position: relative;
    margin-top: 3px;
    }
    
    
    
    
    .typeitems-item img {
    margin: 0px 10px 2px 0px;
    }
    
    
    
    .typeitems-item p {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 15px;
    line-height: 1.5;
    }  
    
    .typeitems-item {
    display: flex;
    align-items: center;
    background-color: var(--lol-info-blockcustom-items-background);
    padding: 6px 10px 6px 10px;
    border-radius: 5px;
    }
    
    .typeitems-item img {
    width: 14px;
    height: auto;
    margin-right: 5px;
    
    }
    
    
    
    
    .lol-info-block-items-fullwith {
      margin: 0 15px 0 15px;
      }
      
    
    
    
     /* Блок предмету Кінець*/
















.lol-separatorvert {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: -4px;

  vertical-align: middle;
  width: 18px; /* Змініть за потреби */
  height: auto;
}



.keyboardskil {
  background-image: url('/wp-content/themes/CatOwl/assets/images/ico/keyboardskill.svg'); /* шлях до зображення */
  background-size: cover;
  background-position: center;
  width: 14px;
  height: 14px;
  margin-right: 5px;

}


 /* Блок типу шкоди чемпіона*/


 .characdamagetype-item {
  display: flex;
  align-items: center;
  position: relative;
}



.characdamagetype-item img {
margin: 0px 10px 2px 0px;
}

 
 .characdamagetype-container {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  position: relative;
  margin-top: 3px;
}

@media (max-width: 1199px) {
  .characdamagetype-container {
      display: block;
      position: relative;
  }

  .containerlolskinblockgrid {
    column-count: 1;
  }


}


.characdamagetype-item p {
margin-top: 0px;
margin-bottom: 0px;
font-size: 15px;
line-height: 1.5;
}


.characdamagetype-item {
  display: flex;
  align-items: center;
  background-color: var(--lol-info-blockcustom2-background);
  padding: 6px 10px 6px 10px;
  border-radius: 5px;
}

.characdamagetype-item img {
  width: 14px;
  height: auto;
  margin-right: 5px;
  
}

.characdamagetype-label {
  font-weight: bold;
  margin-right: 5px;
}


/* Блок типу шкоди чемпіона Кінець*/







/* Перемикач кнопок розділів чемпіона*/

.content-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  background-color: var(--col-md-69-background);
  padding: 5px;
  border-radius: 10px;
}

.content-toggle button {
  position: relative;
  height: 50px; /* Фіксована висота */
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: var(--col-md-6-background);
  color: var(--pcolor-background);
  font-weight: 800;
  font-family: 'Beaufort for LOL', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px; /* Відступи по 10 пікселів з боків */
  width: 50px; /* Ширина кнопки за замовчуванням для неактивної кнопки */
  transition: width 0.3s ease;

}

.content-toggle button.active {
  width: auto; /* Динамічна ширина для активних кнопок */
  padding: 0px 12px 0px 32px; /* Відступи для активної кнопки */
  border: 1px solid #d0a85c;
}

.content-toggle button img {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 50%; /* Іконка по центру */
  top: 50%; /* Вертикальне центрування */
  transform: translate(-50%, -50%); /* Точне центрування іконки */
  transition: left 0.2s ease;
}

.content-toggle button.active img {
  left: 25px; /* Зміщуємо іконку ліворуч менше, щоб текст був ближче */
}

.button-text {
  opacity: 0;
  white-space: nowrap; /* Запобігає переносу тексту */
  transition: opacity 0.1s ease;
  margin-left: 10px; /* Менший відступ тексту від іконки */
}

.content-toggle button.active .button-text {
  opacity: 1; /* Текст стає видимим, коли кнопка активна */
}



@media (max-width: 500px) {
  .content-toggle {
    justify-content: center; /* Центруємо кнопки по горизонталі */
    align-items: center; /* Центруємо по вертикалі */
  }

  .content-toggle button {
    transform: scale(1); /* Стандартний розмір кнопки */
    transition: transform 0.3s ease; /* Анімація збільшення кнопки */
  }

  .content-toggle button.active {
    transform: scale(1.1); /* Збільшення кнопки на 10% при активації */
  }

  .content-toggle button img {
    left: 50%; /* Фіксуємо іконку по центру */
    top: 50%; /* Вертикальне центрування */
    transform: translate(-50%, -50%); /* Точне центрування іконки */
    transition: none; /* Вимикаємо будь-яку анімацію для іконки */
  }

  .content-toggle button.active img {
    left: 50%; /* Іконка залишається по центру навіть при активації */
  }

  .content-toggle button .button-text {
    display: none; /* Приховуємо текст при ширині менше 500 пікселів */
  }
}


/* Перемикач кнопок розділів чемпіона КІНЕЦЬ */





















/* Рут темної теми */

:root {
    --lol-info-block-background: #c4b39047;
    }
    [data-theme="dark"] {
    --lol-info-block-background: #1a1d20;
    }





:root {
    --lol-info-blocksolidicons-background: #c4b39047;
    }
    [data-theme="dark"] {
    --lol-info-blocksolidicons-background: #2f2c23;
    }

  /* Рут темної теми Кінець */




:root {
    --lol-info-blockcustom2-background: #f8f6f2;
    }
    [data-theme="dark"] {
    --lol-info-blockcustom2-background: #202427;
    }



:root {
--lol-info-blockcustom-items-background: #eff7f6;
}
[data-theme="dark"] {
  --lol-info-blockcustom-items-background: #202427;
}




:root {
  --lol-info-blockcustom-runes-background: #f6f5f9;
  }
  [data-theme="dark"] {
    --lol-info-blockcustom-runes-background: #202427;
  }
  




:root {
    --lol-info-championtumb-background: #c4b39047;
    }
    [data-theme="dark"] {
    --lol-info-championtumb-background: #1a1d20;
    }



:root {
--lol-info-itemstumb-background: #90c4c247;
}
[data-theme="dark"] {
--lol-info-itemstumb-background: #1a1d20;
}    




:root {
  --lol-info-runestumb-background: #ae90c447;
  }
  [data-theme="dark"] {
  --lol-info-runestumb-background: #1a1d20;
  }    
  


:root {
    --lol-info-championtumbchild-background: #eae4d7;
    }
    [data-theme="dark"] {
    --lol-info-championtumbchild-background: #1a1d20;
    }


:root {
    --lol-info-blockcustom3-background: #f0f5fa;
    }
    [data-theme="dark"] {
    --lol-info-blockcustom3-background: #202427;
    }


  /* Блок патчу 2 */

.lol-iconchild2 {
  width: 65px;
  height: 65px;
  border: 3px solid var(--lol-info-blockcustom2-background);
  border-radius: 5px;
}

.lol-info-blocknewbg-child {
  display: flex;
    position: relative;
    padding: 10px;
    margin: 10px 0;
    background-color: var(--lol-info-championtumbchild-background);
    border-radius: 10px;
   
}


.lol-info-item-child {
  position: relative;
  padding: 10px;
  margin: 10px 0;
  background-color: var(--lol-info-blockcustom3-background);
 
}


.lol-contentcustomb-child {
    margin: 0 0 0 10px;
}

.lol-contentcustomb-child p {
margin-top: 0;
margin-bottom: 4px;
}


.lol-info-blocknewbg {
display: flex;
    position: relative;
    padding: 10px;
    margin: 0px 0px 10px 0;
background-color: var(--lol-info-championtumb-background);
min-height: 90px;
border-radius: 10px;
}


.lol-info-itemor-child {
  position: relative;
  padding: 15px;
  margin: 0px 0px 10px 0;
background-color: var(--lol-info-blockcustom2-background);
min-height: 90px;
}

.lol-contentcustomb {
margin: 0 0 0 10px;
}
.lol-contentcustomb p {
    margin-top: 0;
    margin-bottom: 0rem;
}

.lol-contentfullwith {
margin: 0 15px 0 15px;
}


.lol-iconchampinfo {
  width: 85px;
  height: 85px;
  border: 3px solid var(--lol-info-blockcustom2-background);
  border-radius: 10px;
}

  /* Блок патчу 2 Кінець */




  /* Блок патчу */
  
  .lol-info-block {
    position: relative;
    padding: 10px;
    margin: 10px 0px;
	background-color: var(--lol-info-blockcustom2-background);
  border-radius: 10px;
  }
  
  .lol-info-blockcat {
    position: relative;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    border: 2px solid var(--lol-info-block-background);
    border-radius: 10px;
  }
  
  .lol-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 70px;
    height: auto;
    border: 2px solid var(--lol-info-block-background);
    padding: 4px;
  }


  .lol-icon-item {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 70px;
    height: auto;
    border: 2px solid var(--lol-info-block-background);
    padding: 4px;
  }

  .lol-icon-rune {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 70px;
    height: auto;
    border: 2px solid var(--lol-info-block-background);
    padding: 4px;
  }
  
  .lol-iconcat {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 70px;
    height: auto;
    padding: 4px;
  }
  
  
  .lol-iconchild {
    position: absolute;
    left: 10px;
    width: 50px;
    height: auto;
    border: 2px solid var(--lol-info-block-background);
    margin: 0px 0px 0px 19px;
  }
  
  .lol-content {
 margin: 0px 0px 0px 85px;
  }
  
  .separator {
    display: flex;
    align-items: center;
    margin: 10px 10px 10px 10px;
  }
  
  .separator::before {
    content: "";
    flex: 1;
    height: 3px;
    background-color: var(--lol-info-block-background);
    margin-right: 10px;
    margin-left: 9px;
  }
 /* Блок патчу Кінець*/



/* Нове та Видалене */ 
.new {
color: #fff;
background-color: rgb(78, 166, 78);
padding: 1px 7px 1px 7px;
font-size: 12px;
margin: 0px 5px 0px 0px;
}

.dell {
color: #fff;
background-color: rgb(191, 48, 42);
padding: 1px 7px 1px 7px;

font-size: 12px;
margin: 0px 5px 0px 0px;
}

/* Нове та Видалене Кінець*/ 



  /* Кастомні кольори тексту */
  .physical-text {
    color: #ec8d34; 
    font-size: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
}


.health-text {
    color: #1F995C; 
    font-size: inherit; 
    position: relative;
    display: inline-flex; 
    align-items: center; 
}


.magic-text {
    color: #00B0F0;
    font-size: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
}



.energy-text {
    color: #ffff00;
    font-size: inherit; 
    position: relative;
    display: inline-flex;
    align-items: center;
}

 /* Кастомні кольори тексту Кінець */



 /* Галерея скінів */
  
 .imglol {
    vertical-align: middle;
    width: 100%;
      border: 4px solid var(--lol-info-block-background);
  }
  
  .carousel {
    position: relative;
    overflow: hidden;
  }
  
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease;
  }
  
  .carousel-image {
    position: relative;
    flex: 0 0 auto;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: flex;
    flex-direction: column;
  }
  
  .image-caption-wrapper {
    display: flex;
    position: absolute;
    bottom: 5px;
    left: 5px;
  margin: 5px;
  }
  
  .image-caption {
  color: white;
  font-size: 15px;
  background-color: rgb(188 147 59);
  padding: 3px 10px 3px 10px;
  margin-right: 5px;
  white-space: nowrap;
  }
  
  .thumbnails {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap; 
  }
  
  .thumbnail {
    flex: 0 0 auto;
    width: 100px;
    margin: 0 5px;
    cursor: pointer;
  }
  
  .thumbnail img {
    width: 100%;
    border: 2px solid transparent;
  }
  
  .thumbnail.selected img {
  border-color: #bc933b;
  }
  
  .carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgb(188 147 59);
  padding: 6px;
  cursor: pointer;
  height: 45px;
  z-index: 1000;
  margin: 10px;
  }
  
  .carousel-prev {
    left: 0;
  }
  
  .carousel-next {
    right: 0;
  }

 /* Галерея скінів Кінець*/



   /* Контейнер вмінь чемпіона */
  
   .custom-container {
    padding: 15px;
    background-color: var(--col-md-69-background);
    max-width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  
  .custom-video-container {
    position: relative;
    padding-bottom: 68.25%; /* 16:9 aspect ratio - 56.25%*/
    height: 0;
  }
  
  .custom-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  
  .custom-icon {
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin: 0 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    border-radius: 5px;
    border: 2px solid #bc933b;
  }
  
  
  @media (max-width: 300px) {
    .custom-icon {
      width: 25px;
      height: 25px;
      border-radius: 5px;
    }
  }
  @media (min-width: 300px) {
    .custom-icon {
      width: 25px;
      height: 25px;
      border-radius: 5px;
    }
  }
  
  @media (min-width: 353px) {
    .custom-icon {
      width: 35px;
      height: 35px;
      border-radius: 5px;
    }
  }
  
  @media (min-width: 575px) {
    .custom-icon {
      width: 50px;
      height: 50px;
      border-radius: 5px;
    }
  }
  
  @media (min-width: 768px) {
    .custom-icon {
      width: 50px;
      height: 50px;
      border-radius: 5px;
    }
  }
  
  
  .custom-icon:hover {
    transform: scale(1.1);
  }
  
  .custom-icon.active {
    border: 2px solid #bc933b;
    transform: scale(1.1) translateY(-5px);


  }
  
  @keyframes borderAnimation {
    from {
      border-width: 0;
    }
    to {
      border-width: 2px;
    }
  }



  .custom-icons p {
    font-size: 24px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-transform: uppercase;
    font-weight: bold;
}



  







#videoWrapper {
  position: relative;
  width: 100%;
  padding-bottom: 68.25%;
  height: 0;
  overflow: hidden;
}

#videoPlayer {
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  max-width: 100%;
  margin: 0 auto;
}

.custom-icons {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  padding: 10px;
}

.icon-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}


.custom-text-container {
  margin-bottom: 10px;
  text-align: left;
  color: #fff;
  width: 100%;
  font-family: 'Beaufort for LOL', sans-serif;
}

#custom-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin: 0 10px;
  text-shadow: 2px 3px 5px black;
}

.custom-container {
  position: relative;
}

#custom-description {
  font-size: 14px;
}









  
   /* Контейнер вмінь чемпіона Кінець */







        @media (max-width: 600px) {

        }


        @media (min-width: 600px) and (max-width: 768px) {
	
			
  .lol-icon {
    position: unset;
    top: 10px;
    left: 10px;
    width: 100%;;
    height: auto;
    border: 2px solid var(--lol-info-block-background);
    padding: 4px;
  }			



.lol-content {
    margin: 15px 0px 0px 85px;
}
        }


        @media (min-width: 768px) and (max-width: 992px) {

        }


        @media (min-width: 992px) and (max-width: 1200px) {

        }


        @media (min-width: 1200px) {

        }



/* Кастомний li */
.customlol_li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.customlol_li li {
    position: relative;
    padding-left: 25px;
}

.customlol_li li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5.4px;
    width: 12px;
    height: 12px;
    background: url('/wp-content/themes/CatOwl/assets/images/bullet-list.png') no-repeat center center;
    background-size: contain;
}

.customlol_li li {
    line-height: 1.5;
}

/* Кастомний li Кінець */



/* Заголовок для публікацій*/
:root {
    --lol-info-title-bgcolor: #f0f5fa;
    }
    [data-theme="dark"] {
    --lol-info-title-bgcolor: #202427;
    }




.lol-customtitle-ancor {
    position: relative;
    padding: 10px;
    margin: 0 0 10px 0;
    background-color: var(--lol-info-blockcustom2-background);
    border-radius: 10px;
}



.lol-customtitle-ancor h1 {
  color: var(--pcolor-background);
  margin: 0;
  font-weight: 700;
}


.lol-customtitle-ancor h2 {
  color: var(--pcolor-background);
  margin: 0;
  font-weight: 700;
}

.lol-customtitle-ancor h3 {
    color: var(--pcolor-background);
    margin: 0;
    font-weight: 700;
}


.lol-customtitle-ancor h4 {
  color: var(--pcolor-background);
  margin: 0;
  font-weight: 700;
}


.lol-customtitle-ancor h5 {
  color: var(--pcolor-background);
  margin: 0;
  font-weight: 700;
}


.lol-customtitle-ancor h6 {
  color: var(--pcolor-background);
  margin: 0;
  font-weight: 700;
}

.lol-customtitle-ancor p {
    margin: 0px;
}
/* Заголовок для публікацій Кінець*/



 /* Галерея патч*/
.gallery-lolbl {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.gallery-item-lolbl {
    flex: 1 1 calc(50% - 20px);
    box-sizing: border-box;
    position: relative;
    margin-bottom: 5px;
    margin-top: 5px;
}

.gallery-item-lolbl img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 5px;
}

.caption-lolbl {
    text-align: left;
    margin-top: 10px;
    padding-left: 20px;
    position: relative;
    display: flex;
    align-items: center;
}

.caption-lolbl::before {
    content: "";
    position: absolute;
    left: 0;
    width: 15px;
    height: 15px;
    background: url('/wp-content/themes/CatOwl/assets/images/bullet-list.png') no-repeat center center;
    background-size: contain;
}

@media (max-width: 799px) {
    .gallery-item-lolbl {
        flex: 1 1 100%;
    }
}

.lightbox-lolbl {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.lightbox-content-lolbl {
    max-width: 90%;
    max-height: 80%;
}

.close-lolbl {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

 /* Галерея патч кінець*/






 /* Блоки ліво право центр */
        .dualinfobl-container {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            background-color: var(--lol-info-title-bgcolor);
            margin: 5px 0px 5px 0px;
        }
        .dualinfobl-text, .dualinfobl-image {
            padding: 10px;
            flex: 1 1 45%;
            box-sizing: border-box;
            margin: 0px;
        }
        .dualinfobl-image img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
            background-color: var(--lol-info-blockcustom2-background);
        }
        @media (max-width: 1399px) {
            .dualinfobl-container {
                flex-direction: column;
            }
            .dualinfobl-image {
                order: 1;
            }
            .dualinfobl-text {
                order: 2;
            }
        }



        .dualinfobl-image p {
            margin-top: 5px;
            margin-bottom: 0rem;
            text-align: center;
        }



        .dualburginfobl-image p {
            margin-top: 5px;
            margin-bottom: 0rem;
            text-align: center;
        }



        .dualinfobl-text p {
            margin-top: 0;
            margin-bottom: 0rem;
        }

        



        .dualburginfobl-container {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            background-color: var(--lol-info-title-bgcolor);
            margin: 5px 0px 5px 0px;
        }
        .dualburginfobl-text, .dualburginfobl-image {
            padding: 10px;
            flex: 1 1 45%;
            box-sizing: border-box;
            margin: 0px;
            order: 2;
        }
        .dualburginfobl-image img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
            order: 1;
        }        

        .dualburginfobl-video iframe {
            width: 100%;
			height: auto;
            min-height: 400px;
        }

        .dualburginfobl-text p {
            margin-top: 0;
            margin-bottom: 0rem;
        }

 /* Блоки ліво право центр Кінець*/








.col-lg-81.full-width {
  width: 100% !important; /* Контент займає 100% ширини */
  padding: 20px; /* Зберігаємо відступи */
}





.containerlolskinblockgrid.full-grid {
    column-count: 2;
    column-gap: 20px;
}





 /* Блок образів чемпіона */


 .containerlolskinblockgrid {
  column-count: 1;
  column-gap: 20px;
}

.champpginfo-container {
  padding: 12px;
  box-sizing: border-box;
  background-color: var(--body-lol-background);
  border-radius: 10px;
  height: auto;
  break-inside: avoid; /* Уникати розривів в колонках */
  margin-bottom: 20px; /* Відстань між публікаціями */
}



    .champpginfo-sidebar-image,
    .champpginfo-image,

    .champpginfo-text {
      order: 2;
      width: 100%;
      margin-left: 0;
    }


    .champpginfo-text h4 {
      font-size: 18px !important;
      margin-top: 10px !important;
      margin-bottom: 10px !important;
  }
  
  

    .champpginfo-sidebar-image {
        width: 100%;
        align-self: flex-start;
    }
    .champpginfo-sidebar-image img {
        width: 100%;
        height: auto;
        cursor: pointer;
    }
    .champpginfo-content {
      flex-direction: column;
      margin-top: 6px;
    }
    .champpginfo-image {
      order: 3;
      width: 100%;
      margin-left: 0;
    }
    .champpginfo-image img {
        max-width: 100%;
        height: auto;
        cursor: pointer;
    }
    .champpginfo-text {
        flex: 1 1 55%;
        margin-left: 4px;
position: relative;
    }
    @media (max-width: 1199px) {
        .champpginfo-content {
            flex-direction: column;
        }
        .champpginfo-image {
            order: 3;
            width: 100%;
            margin-left: 0;
        }
        .champpginfo-text {
            order: 2;
            width: 100%;
            margin-left: 0;
        }
    }
    .champpginfo-text p {
      margin-top: 15px;
      margin-bottom: 25px;
    }

 .characteristics-container {
        display: block;
        flex-direction: row;
        box-sizing: border-box;
        position: relative;
        bottom: 5px;
    }

    @media (max-width: 1199px) {
        .characteristics-container {
            display: block;
            position: relative;
        }

        .containerlolskinblockgrid {
          column-count: 1;
        }


    }


    .characteristic-item p {
      margin-top: 0px;
      margin-bottom: 0px;
      font-size: 15px;
      line-height: 1.5;
  }


    .characteristic-item {
        display: flex;
        align-items: center;
        background-color: var(--col-md-69-background);
        padding: 6px 10px 6px 10px;
        margin: 10px 5px 0 0;
        border-radius: 5px;
    }

    .characteristic-item img {
        width: 14px;
        height: auto;
        margin-right: 5px;
        
    }



    .characteristic-label {
        font-weight: bold;
        margin-right: 5px;
    }











    .characteristic-item-white p {
      margin-top: 0px;
      margin-bottom: 0px;
      font-size: 15px;
      line-height: 1.5;
  }


    .characteristic-item-white {
        display: flex;
        align-items: center;
        background-color: var(--col-md-6-background);
        padding: 6px 10px 6px 10px;
        margin: 10px 5px 0 0;
        border-radius: 5px;
    }

    .characteristic-item-white img {
        width: 14px;
        height: auto;
        margin-right: 5px;
        
    }




    .cusskin {
      color: var(--pcolor-background);
      font-size: 20px;

  }


  .cusskin:hover {
    color: var(--pcolor-background);
    font-size: 20px;
}








    .characteristic-button {
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      background-color: #c89b3d; /* Колір кнопки, як ви просили */
      padding: 6px 10px;
      margin: 10px 5px 0 0;
      border-radius: 5px;
      text-decoration: none;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      transition: background-color 0.3s ease;
  }


  .characteristic-button a {
      box-sizing: border-box;
      font-size: 0.952rem;
  }

  .characteristic-button img {
      width: 14px;
      height: auto;
      margin-right: 5px;
  }

  .characteristic-button:hover {
      background-color: #a07a30; /* Темніший відтінок для hover */
      color: #fff; /* Кастомний колір тексту в hover */
  }




 /* Блок образів чемпіона Кінець*/




 /* Кнопки інформація про скіни */

.characteristic-itembth {
    display: flex;
    align-items: center;
    background-color: var(--lol-info-blockcustom2-background);
    padding: 6px 10px;
    margin: 10px 5px 0 0;
    text-decoration: none;
    color: inherit;
}

.characteristic-itembth img {
 width: 14px; 
height: auto; 
margin-right: 5px;
}

.characteristic-itembth div {
    display: flex;
    flex-direction: column;
}

.characteristic-labelbth {
    font-weight: bold;
}


 /* Кнопки інформація про скіни Кінець*/




 /* Поапи до характеристик образів*/
        .characteristic-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            position: relative;
        }




        .savedclass {

        }

        .characteristic-item img {
          margin: 0px 10px 2px 0px;
        }

        .popup {
            display: none;
            position: absolute;
            top: 40px;
            left: 0;
            padding: 10px;
            background-color: var(--col-md-6-background);
            border: 1px solid var(--lol-info-title-bgcolor);
            z-index: 100;
            width: 300px;
            width: 450px;
            border-radius: 10px;
            margin: 10px 0px 10px 0px;
        }

        .popup img {
            float: left;
            margin-right: 5px;
            margin-top: 4px;
            width: 15px;
        }

        .popup span {
            display: block;
        }

 /* Поапи до характеристик образів Кінець*/








 /* Стилі для фіксованого блоку управління */
 @keyframes slideIn {
  0% {
      transform: translateY(20px); /* Початкова позиція на 20 пікселів нижче */
      opacity: 0; /* Початкова непрозорість */
  }
  100% {
      transform: translateY(0); /* Закінчення анімації на звичайній позиції */
      opacity: 1; /* Кінцева непрозорість */
  }
}

#control-panel {
  position: fixed;
  top: 45%;
  left: 2%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px;
  background-color: var(--col-md-6-background);
  border-radius: 40px;
  z-index: 1000;
  align-items: center;
  opacity: 0; /* Спочатку приховуємо панель */
  animation: slideIn 0.5s ease forwards; /* Додаємо анімацію при завантаженні */
}

#control-panel.visible {
  opacity: 1; /* Панель видима, коли має клас visible */
}

#toggle-sidebar {
  display: none; /* Спочатку приховуємо кнопку */
}


/* Стилі для кнопок */
#control-panel .control-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px; /* Простір навколо іконок */
}

/* Іконки у кнопках */
#control-panel .control-btn img {
  width: 20px; /* Ширина іконок 20 пікселів */
  height: auto; /* Автоматичне коригування висоти */
}




@media (max-width: 1500px) {
  #control-panel {
  position: fixed;
  top: 45%; /* Відцентровуємо по вертикалі */
  left: 0.5%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px;
  background-color: var(--col-md-6-background);
  border-radius: 40px;
  z-index: 1000;
  align-items: center;
}




}













@media (max-width: 1430px) {
  #control-panel {
      top: auto; /* Прибираємо прив'язку до середини */
      left: 0;
      bottom: 0; /* Блок прилип до нижньої частини екрану */
      width: 100%; /* Розтягуємо блок на всю ширину */
      flex-direction: row; /* Кнопки розташовані горизонтально */
      justify-content: center; /* Вирівнюємо кнопки по центру */
      padding: 10px;
      border-radius: 0; /* Прибираємо закруглення */
      background-color: #1a1d20;
  }


  #control-panel .control-btn {
      flex: 1; /* Кнопки займатимуть рівну частину простору */
      padding: 5px;
  }

  #control-panel .control-btn img {
      width: 20px; /* Зберігаємо розмір іконок */
      height: auto;
  }



}














@media (max-width: 991px) {
  #control-panel {
      top: auto; /* Прибираємо прив'язку до середини */
      left: 0;
      bottom: 0; /* Блок прилип до нижньої частини екрану */
      width: 100%; /* Розтягуємо блок на всю ширину */
      flex-direction: row; /* Кнопки розташовані горизонтально */
      justify-content: center; /* Вирівнюємо кнопки по центру */
      padding: 10px;
      border-radius: 0; /* Прибираємо закруглення */
  }


  #control-panel .control-btn {
      flex: 1; /* Кнопки займатимуть рівну частину простору */
      padding: 5px;
  }

  #control-panel .control-btn img {
      width: 20px; /* Зберігаємо розмір іконок */
      height: auto;
  }

  /* Приховуємо кнопку тогла сайдбару на екранах менше 700px */
  #toggle-sidebar {
      display: none;
  }


}


 /* Стилі для фіксованого блоку Кінець */

/* Патч-контейнер чемпіона */
.patch-ab-container {
            margin: auto;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            margin-top: 10px;
            border: 1px solid var(--patch-border-bg);
        }


        .patch-champion {
            display: flex;
            align-items: center;
            background: var(--backpatch-bl-2);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
        }
        .patch-champion img {
            width: 70px;
            height: 70px;
            border-radius: 10px;
            border: 5px solid var(--bth-background);
            margin-right: 15px;
        }
        .patch-champion-info {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .patch-champion-info h4 {
            margin-bottom: 0px !important;
            font-size: 18px;
        }

        .patch-champion-description {
            display: flex;
            align-items: flex-start;
            background: var(--backpatch-bl-3);
            padding: 5px 10px 5px 35px;
            border-radius: 10px;
            margin-top: 5px;
            position: relative;
        }

        .patch-champion-description p {
            margin: 0px !important;
        }

        .patch-champion-description::before {
            content: "";
            position: absolute;
            left: 10px;
            top: calc(50% - 8px);
            width: 16px;
            height: 16px;
            background: url('/wp-content/themes/CatOwl/assets/images/ico/keyboardskill.svg') no-repeat 50% / contain;
        }


        .patch-ability-cont {
            background: var(--backpatch-bl-1);
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px;
            align-items: center;
        }



        .patch-ability {
            background: var(--backpatch-bl-2);
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .patch-ability img {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            border: 5px solid var(--bth-background);
            margin-right: 15px;
        }

        .patch-ability-info {
            display: flex;
            align-items: center;
        }
        .patch-ability-text {
            display: flex;
            flex-direction: column;
            text-transform: uppercase;
            font-size: 14px;
        }

        .patch-ability-text strong{
            font-weight: 600 !important;
        }

        .patch-passive {
            background: var(--bth-background);
            color: var(--textbthwhite-background);
            padding: 3px 7px;
            border-radius: 5px;
            font-size: 12px;
            margin-top: 5px;
            display: inline-block;
            text-transform: uppercase;
            font-weight: 700;
            white-space: nowrap;
            max-width: max-content;
}


        .patch-ability-description {
            padding: 0px 10px 0px 10px;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .lightbox-no-detect {

        }

    /* Патч-контейнер чемпіона Кінець*/



/* Патч-контейнер предмета */



.patch-items-cont {
    background: var(--backpatch-bl-1);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    align-items: center;
}



.patch-items {
    background: var(--backpatch-bl-2);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.patch-items img {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    border: 5px solid var(--bth-background);
    margin-right: 15px;
}

.patch-items-info {
    display: flex;
    align-items: center;
}
.patch-items-text {
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    font-size: 14px;
}

.patch-items-text strong{
    font-weight: 600 !important;
}

.patch-items-description {
padding: 0px 10px 0px 10px;
border-radius: 10px;
margin-bottom: 10px;
}

.patch-passive-item {
    background: var(--bth-background);
    color: var(--textbthwhite-background);
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 12px;
    margin-top: 5px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    max-width: max-content;
}



/* Патч-контейнер предмета Кінець*/    



/* Патч-контейнер руни */


.patch-runes-cont {
    background: var(--backpatch-bl-1);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    align-items: center;
}



.patch-runes {
    background: var(--backpatch-bl-2);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.patch-runes img {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    border: 5px solid var(--bth-background);
    margin-right: 15px;
}

.patch-runes-info {
    display: flex;
    align-items: center;
}
.patch-runes-text {
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    font-size: 14px;
}

.patch-runes-text strong{
    font-weight: 600 !important;
}

.patch-runes-description {
padding: 0px 10px 0px 10px;
border-radius: 10px;
margin-bottom: 10px;
}

.patch-passive-rune {
    background: var(--bth-background);
    color: var(--textbthwhite-background);
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 12px;
    margin-top: 5px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    max-width: max-content;
}


/* Патч-контейнер руни Кінець*/