/* ---- Дизайн для стандартного Инфобокса ---- */

.portable-infobox .pi-smart-group-head+.pi-smart-group-body {
    border-top-width: 0px;
}

.portable-infobox .pi-horizontal-group .pi-data-label,
.portable-infobox .pi-smart-group .pi-smart-data-label {
    padding-bottom: 0 !important;
}

.portable-infobox .pi-smart-group .pi-smart-data-label, 
.portable-infobox .pi-smart-group .pi-smart-data-value {
	margin: 0;
}

.portable-infobox .pi-data-value, 
.portable-infobox .pi-secondary-font {
    line-height: 18px;
}

.portable-infobox .pi-data-value li {
    line-height: 19px;
}

.portable-infobox .pi-data-value {
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--theme-page-text-color,#3a3a3a);
}

.portable-infobox .pi-navigation.pi-item-spacing.pi-secondary-font {
    font-size: 12px;
}

.portable-infobox .pi-navigation {
    background-color: transparent;
}

/* PI Image Изображение */

.portable-infobox .pi-image-thumbnail {
    width: 100%;
    height: 100%;
}

.portable-infobox .pi-image {
	overflow: hidden;
}

.portable-infobox .pi-image img {
	-webkit-transition: transform 2s, filter 0.4s;
	-moz-transition: transform 2s, filter 0.4s;
	-ms-transition: transform 2s, filter 0.4s;
	-o-transition: transform 2s, filter 0.4s;
	transition: transform 2s, filter 0.4s;
}

.portable-infobox .pi-image:hover img {
	transform: scale(1.05);
}

.portable-infobox .pi-image:hover,
.portable-infobox .pi-item .pi-data:hover,
.portable-infobox .pi-item.pi-data:hover,
.portable-infobox .pi-layout-stacked .pi-data:hover,
.portable-infobox.pi-layout-stacked .pi-data:hover,
.portable-infobox .pi-horizontal-group:hover,
.portable-infobox .pi-smart-group:hover,
.portable-infobox .pi-panel-scroll-wrapper:hover,
.portable-infobox .wds-tabs__wrapper:hover,
.portable-infobox .pi-navigation:hover {
    background: rgba(0, 0, 0, 0.06);
	-webkit-transition: all .1s linear 0s;
	-moz-transition: all 1s linear 0s;
	-ms-transition: all .1s linear 0s;
	-o-transition: all .1s linear 0s;
	transition: all .1s linear 0s;
}

.portable-infobox {
	border-radius: 10px;
	border: 1px solid #000;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
	font-family: Rubik, "Helvetica Neue", Helvetica, Arial, sans-serif;
	transition: box-shadow 1s;
    background-color: var(--theme-page-background-color--secondary,#fbfbfb); /* Цвет фона*/ 
    background-image: linear-gradient(rgb(var(--theme-page-background-color--rgb),0.50),rgb(var(--theme-page-background-color--rgb),0.50));
	margin-right: 7px;
	width: 280px;
    color: #1a1a1a; /* Цвет текста */
    color: rgba(var(--theme-page-dynamic-color-1--rgb),.90);
    box-sizing: content-box;
    overflow: hidden;
}

.portable-infobox .pi-border-color {
    border-color: transparent; /* Цвет фона*/ 
}

.portable-infobox:hover {
	box-shadow: 0 0 5px rgb(0 0 0 / 20%);
}

.portable-infobox .pi-title {
	border-top-left-radius: 9px;
    border-top-right-radius: 9px;
	border-bottom: 1px solid #000 !important;
    padding: 5px 10px !important;
    line-height: 28px !important;
}

.portable-infobox .pi-header {
	font-size: small !important;
	text-transform: uppercase;
	border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    padding: 5px 10px !important;
    line-height: 18px !important;
}

.portable-infobox .pi-title, 
.portable-infobox .pi-header {
    background-color: var(--themed-button-background, var(--theme-header-background-color, var(--theme-accent-color--hover, #fe7e03)));
	font-weight: bold;
	transition: color 0.2s;
	text-align: center;
	color: #ffcc00;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000;
}

.portable-infobox .pi-title:hover, 
.portable-infobox .pi-header:hover {
    color: #ffd400;
}

.portable-infobox .pi-title,
.portable-infobox .pi-header,
.portable-infobox .pi-item-spacing {
    padding: 5px 10px !important;
}

.portable-infobox .pi-collapse-closed:last-child .pi-header {
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 9px;
	transition: background-color 0.5s, border-radius 0s !important;
}

.portable-infobox .pi-collapse-closed .pi-header {
    border-top: 1px solid #000 !important;
    border-bottom: 0px solid #000 !important;
}

.portable-infobox .pi-collapse-closed .pi-item.pi-header:first-child::after {
	transform: none !important;
}

.portable-infobox .pi-data-label {
	font-size: x-small !important;
	text-transform: uppercase;
	line-height: 18px !important;
}

.portable-infobox .pi-collapse .pi-header:first-child:after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.707 3.293a.999.999 0 0 0-1.414 0L6 7.586 1.707 3.293A.999.999 0 1 0 .293 4.707l5 5a.997.997 0 0 0 1.414 0l5-5a.999.999 0 0 0 0-1.414' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.707 3.293a.999.999 0 0 0-1.414 0L6 7.586 1.707 3.293A.999.999 0 1 0 .293 4.707l5 5a.997.997 0 0 0 1.414 0l5-5a.999.999 0 0 0 0-1.414' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.707 3.293a.999.999 0 0 0-1.414 0L6 7.586 1.707 3.293A.999.999 0 1 0 .293 4.707l5 5a.997.997 0 0 0 1.414 0l5-5a.999.999 0 0 0 0-1.414' fill-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.707 3.293a.999.999 0 0 0-1.414 0L6 7.586 1.707 3.293A.999.999 0 1 0 .293 4.707l5 5a.997.997 0 0 0 1.414 0l5-5a.999.999 0 0 0 0-1.414' fill-rule='evenodd'/%3E%3C/svg%3E");
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    background-color: #1a1a1a;
    background-image: none !important;
    height: 12px !important;
    width: 12px !important;
    -webkit-mask-repeat: no-repeat;
    border: none;
    transform: rotate(180deg);
    margin-top: -6px;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}

.portable-infobox .pi-collapse-closed .pi-header:first-child::after {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transition: none;
}

/* Инфобокс Медведь */

.portable-infobox.pi-theme-Медведь .pi-title, 
.portable-infobox.pi-theme-Медведь .pi-header {
    background-color: #c2700f;
}

.portable-infobox.pi-theme-Медведь .pi-image-thumbnail {
    width: 270px;
    height: auto;
    padding-right: 5px;
    padding-left: 5px;
}

/* Инфобокс Собиратель пыльцы */

.portable-infobox.pi-theme-Собиратель-пыльцы .pi-title, 
.portable-infobox.pi-theme-Собиратель-пыльцы .pi-header {
    background-color: #3283ff;
}

.portable-infobox.pi-theme-Собиратель-пыльцы .pi-image-thumbnail {
    width: 150px;
    height: auto;
    padding-right: 65px;
    padding-left: 65px;
}

.portable-infobox.pi-theme-Собиратель-пыльцы .pi-item.pi-data.pi-item-spacing.pi-border-color .pi-data-label.pi-secondary-font { 
    flex-basis: 128px;
}

/* Инфобокс Монстр */

.portable-infobox.pi-theme-Монстр .pi-title, 
.portable-infobox.pi-theme-Монстр .pi-header {
    background-color: #f2494b;
}

/* Инфобокс Поле */

.portable-infobox.pi-theme-Поле .pi-title, 
.portable-infobox.pi-theme-Поле .pi-header {
    background-color: #298c3a;
}

.portable-infobox.pi-theme-Поле .pi-item.pi-data.pi-item-spacing.pi-border-color .pi-data-label.pi-secondary-font {
    flex-basis: 114px;
}

/* Инфобокс Квестовый-персонаж */

.portable-infobox.pi-theme-Квестовый-персонаж .pi-title, 
.portable-infobox.pi-theme-Квестовый-персонаж .pi-header {
    background-color: #396ed8;
}

/* Инфобокс Экипировка пчелы */

.portable-infobox.pi-theme-Экипировка-пчелы .pi-title, 
.portable-infobox.pi-theme-Экипировка-пчелы .pi-header {
    background-color: #c5d7e2;
}

.portable-infobox.pi-theme-Экипировка-пчелы .pi-image-thumbnail {
    width: 140px;
    height: auto;
    padding: 10px 60px;
}

/* Инфобокс Инвентарь */

.portable-infobox.pi-theme-Инвентарь .pi-title, 
.portable-infobox.pi-theme-Инвентарь .pi-header {
    background-color: #d4ddda;
}

.portable-infobox.pi-theme-Инвентарь .pi-item.pi-data.pi-item-spacing.pi-border-color .pi-data-label.pi-secondary-font { 
    flex-basis: 263px;
}

.portable-infobox.pi-theme-Инвентарь .pi-image-thumbnail {
    width: 150px;
    height: auto;
    padding: 10px 65px;
}

/* Инфобокс Рюкзак */

.portable-infobox.pi-theme-Рюкзак .pi-title, 
.portable-infobox.pi-theme-Рюкзак .pi-header {
    background-color: #3283ff;
}

/* Инфобокс Предмет */

.portable-infobox.pi-theme-Предмет .pi-title, 
.portable-infobox.pi-theme-Предмет .pi-header {
    background-color: #3283ff;
}

/* Инфобокс Разбрызгиватель */

.portable-infobox.pi-theme-Разбрызгиватель .pi-title, 
.portable-infobox.pi-theme-Разбрызгиватель .pi-header {
    background-color: #3283ff;
}

/* Инфобокс Плантатор  */

.portable-infobox.pi-theme-Плантатор .pi-title, 
.portable-infobox.pi-theme-Плантатор .pi-header {
    background-color: #3283ff;
}

.portable-infobox.pi-theme-Плантатор .pi-image[data-item-name="model"] .pi-image-thumbnail {
    width: 210px;
    height: auto;
    padding: 10px 35px;
}

.portable-infobox.pi-theme-Плантатор .pi-image[data-item-name="inventory"] .pi-image-thumbnail {
    width: 150px;
    height: auto;
    padding: 10px 65px;
}

.portable-infobox.pi-theme-Плантатор .pi-item.pi-data.pi-item-spacing.pi-border-color .pi-data-label.pi-secondary-font {
    flex-basis: 95px;
}

/* Инфобокс Медвежонок */

.portable-infobox.pi-theme-Медвежонок .pi-title, 
.portable-infobox.pi-theme-Медвежонок .pi-header {
    background-color: #ae7a62;
}

.portable-infobox.pi-theme-Медвежонок .pi-image-thumbnail {
    width: 150px;
    height: auto;
    padding: 10px 65px;
}

/* Инфобокс Пчёлы*/

.portable-infobox.pi-theme-Пчёлы .pi-image:hover img, 
.portable-infobox.pi-theme-Пчёлы .pi-image:focus img, 
.portable-infobox.pi-theme-Пчёлы .pi-image:active img,
.portable-infobox.pi-theme-Редкая .pi-image:hover img,
.portable-infobox.pi-theme-Редкая .pi-image:focus img, 
.portable-infobox.pi-theme-Редкая .pi-image:active img,
.portable-infobox.pi-theme-Эпическая .pi-image:hover img, 
.portable-infobox.pi-theme-Эпическая .pi-image:focus img, 
.portable-infobox.pi-theme-Эпическая .pi-image:active img,
.portable-infobox.pi-theme-Легендарная .pi-image:hover img, 
.portable-infobox.pi-theme-Легендарная .pi-image:focus img, 
.portable-infobox.pi-theme-Легендарная .pi-image:active img,
.portable-infobox.pi-theme-Мифическая .pi-image:hover img, 
.portable-infobox.pi-theme-Мифическая .pi-image:focus img, 
.portable-infobox.pi-theme-Мифическая .pi-image:active img,
.portable-infobox.pi-theme-Ивентовская .pi-image:hover img, 
.portable-infobox.pi-theme-Ивентовская .pi-image:focus img, 
.portable-infobox.pi-theme-Ивентовская .pi-image:active img {
    -webkit-animation: swing 1.2s infinite linear;
    -moz-animation: swing 1.2s infinite linear;
    -ms-animation: swing 1.2s infinite linear;
    -o-animation: swing 1.2s infinite linear;
    animation: swing 1.2s infinite linear;
}

.portable-infobox.pi-theme-Пчёлы .pi-image-thumbnail,
.portable-infobox.pi-theme-Редкая .pi-image-thumbnail,
.portable-infobox.pi-theme-Эпическая .pi-image-thumbnail,
.portable-infobox.pi-theme-Легендарная .pi-image-thumbnail,
.portable-infobox.pi-theme-Мифическая .pi-image-thumbnail,
.portable-infobox.pi-theme-Ивентовская .pi-image-thumbnail {
    width: 200px;
    height: auto;
}

/* Обычная */

.portable-infobox.pi-theme-Пчёлы .pi-title, 
.portable-infobox.pi-theme-Пчёлы .pi-header {
    background-color: #ae792f;
}

/* Редкая */

.portable-infobox.pi-theme-Редкая .pi-title, 
.portable-infobox.pi-theme-Редкая .pi-header {
    background-color: #dcdde4;
}

/* Эпическая */

.portable-infobox.pi-theme-Эпическая .pi-title, 
.portable-infobox.pi-theme-Эпическая .pi-header {
    background-color: #f5d010;
}

/* Легендарная */

.portable-infobox.pi-theme-Легендарная .pi-title, 
.portable-infobox.pi-theme-Легендарная .pi-header {
    background-color: #48ead6;
}

/* Мифическая */

.portable-infobox.pi-theme-Мифическая .pi-title, 
.portable-infobox.pi-theme-Мифическая .pi-header {
    background-color: #bda4ff;
}

/* Ивентовская */

.portable-infobox.pi-theme-Ивентовская .pi-title, 
.portable-infobox.pi-theme-Ивентовская .pi-header {
    background-color: #9eea6a;
}

/* Цвет пчёлы */

/* Синий */

.portable-infobox.pi-theme-Синий {
    background-color: #90CAF9; /* Цвет фона*/ 
    background-image: none;
}

.portable-infobox.pi-theme-Синий .pi-border-color {
    border-color: #90CAF9;
}

/* Красный */

.portable-infobox.pi-theme-Красный {
    background-color: #EF9A9A; /* Цвет фона*/
    background-image: none;
}

.portable-infobox.pi-theme-Красный .pi-border-color {
    border-color: #EF9A9A;
}

/* Анимация */
@-webkit-keyframes swing {
	 0% {
	transform: rotate(0deg);
	 }
	 
	 12% {
	transform: rotate(-5deg);
	 }
	 
     37% {
    transform: rotate(5deg);
     }
     
     62% {
    transform: rotate(-5deg);
     }
     
     87% {
    transform: rotate(5deg);
     }
    
    100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}