

/* Start:/local/templates/roltop/components/bitrix/news/catalog.roltop/bitrix/news.detail/.default/style.css?17920471759979*/
div.news-detail
{
	word-wrap: break-word;
}
div.news-detail img.detail_picture
{
	float:left;
	margin:0 8px 6px 1px;
}
.news-date-time
{
	color:#486DAA;
}
.article-gallery {
  margin: 20px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}
.article-gallery-item {
   -webkit-box-flex: 0;
	  -ms-flex: 0 0 200px;
		  flex: 0 0 200px;
    max-width: 200px;
    max-height: 200px;
	display: flex;
		align-items: center;
		justify-content: center;
}





/* акардион   */
  	.accordion{
  		max-width: 1400px;
	   margin: 50px 0;
  	}
  	.title_faq{
  		font-size: 30px;
  		color: #438DCC;
  		line-height: 33px;
  		margin-bottom: 30px;
  	}
  	.accordion-item{
  		border-radius: 10px;
  		overflow: hidden;
  		border: 1px solid #ececec;
  	}
    .accordion-item:not(last-item) {
      margin-bottom: 15px;
    }
    .accordion-header{
		padding: 0;
    	color: #333333;
    	font-size: 22px;
    	line-height: 26px;
    	border: 1px solid #ececec;
		border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
    	cursor: pointer;
    	display: flex;
    	align-items: center;
    	justify-content: start;
    	transition: background-color 0.3s ease;
    	overflow: hidden;
    }
     .accordion-header.active-header {
      background-color: #f0f8ff; /* Изменение цвета фона при открытии */
    }
    .click__item{
    	flex: 1 1 100%;
    	display: flex;
    	align-content: center;
    	align-items: center;
    	justify-content: space-between;
    }
    .accordion-header .number{
      color: #438DCC;
      margin: 0 30px;
      font-size: 30px;
      line-height: 33px;
      font-weight: 400;
    }
    .arrow{
    	width: 24px;
    	height: 24px;
    	stroke: #438DCC;
    }

    .arrow {
      transition: transform 0.3s ease;
    }
    .arrow.return {
      transform: rotate(180deg); /* Поворачиваем стрелку на 180 градусов */
    }
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      padding: 0 85px;
      font-size: 16px;
      line-height: 25px;
      transition: max-height 0.3s ease, padding 0.3s ease;

    }
    .accordion-content .show.arrow{
    	background-color: red;
    }
    .accordion-content.show {
      max-height: 200px; /* Достаточное значение для полного раскрытия */
      padding: 35px 85px;
    }

   .arrow__box {
		padding: 25px 30px;
   		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease .1s;
    }
	.arrow__box span {
		transform: rotate(0deg);
		background-image:url("data:image/svg+xml,%3Csvg class='arrow' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'%3E%3C/path%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		height: 24px;
		width: 24px;
		transition: all 0.3s ease .1s;
	}
    .arrow__box.active-box {
      background-color: #438DCC;
      color: white;
    }
	.arrow__box.active-box span {
		transform: rotate(180deg);
		background-image:url("data:image/svg+xml,%3Csvg class='arrow' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'%3E%3C/path%3E%3C/svg%3E");
	}
    .arrow {
      transition: transform 0.3s ease 0.1s; /* Задержка в 0.1s */
    }
    .arrow.active-arrow {
    	stroke: #fff;
      transform: rotate(180deg); /* Поворот стрелки на 180 градусов */
    }


    @media screen and (max-width: 560px) {
    	.click__item{
    		font-size: 18px;
    	}
    	.arrow__box {
    		padding: 25px;
    	}

    	.accordion-content{
    		padding: 0 30px;
    	}
    	.accordion-content.show{
    		padding: 30px;
    	}
    }

 /* аккордеон   */
                            .accordion {
                                max-width: 1400px;
                                margin: 50px 0;
                            }

                            .title_faq {
                                font-size: 30px;
                                color: #438DCC;
                                line-height: 33px;
                                margin-bottom: 30px;
                            }

                            .accordion-item {
                                border-radius: 10px;
                                overflow: hidden;
                                border: 1px solid #ececec;
                            }

                            .accordion-item:not(last-item) {
                                margin-bottom: 15px;
                            }

                            .accordion-header {
                                color: #333333;
                                font-size: 22px;
                                line-height: 26px;
                                border: 1px solid #ececec;
                                border-radius: 10px;
                                -webkit-border-radius: 10px;
                                -moz-border-radius: 10px;
                                -ms-border-radius: 10px;
                                -o-border-radius: 10px;
                                cursor: pointer;
                                display: flex;
                                align-items: center;
                                justify-content: start;
                                transition: background-color 0.3s ease;
                                overflow: hidden;
                            }

                            .accordion-header.active-header {
                                background-color: #f0f8ff;
                                /* Изменение цвета фона при открытии */
                            }

                            .click__item {
                                flex: 1 1 100%;
                                display: flex;
                                align-content: center;
                                align-items: center;
                                justify-content: space-between;
                            }

                            .accordion-header .number {
                                color: #438DCC;
                                margin: 0 30px;
                                font-size: 30px;
                                line-height: 33px;
                                font-weight: 400;
                            }

                            .arrow {
                                width: 24px;
                                height: 24px;
                                stroke: #438DCC;
                            }

                            .arrow {
                                transition: transform 0.3s ease;
                            }

                            .arrow.return {
                                transform: rotate(180deg);
                                /* Поворачиваем стрелку на 180 градусов */
                            }

                            .accordion-content {
                                max-height: 0;
                                overflow: hidden;
                                padding: 0 85px;
                                font-size: 16px;
                                line-height: 25px;
                                transition: max-height 0.3s ease, padding 0.3s ease;
                            }

                            .accordion-content .show.arrow {
                                background-color: red;
                            }

                            .accordion-content.show {
                                max-height: 200px;
                                /* Достаточное значение для полного раскрытия */
                                padding: 35px 85px;
                            }

                            .arrow__box {
                                padding: 25px 30px;
                                border-radius: 10px;
                                /*      transition: transform 0.3s ease 0s;*/
                                transition: all 0.3s ease .1s;
                            }

                            .arrow__box.active-box {
                                background-color: #438DCC;
                            }

                            .arrow {
                                transition: transform 0.3s ease 0.1s;
                                /* Задержка в 0.1s */
                            }

                            .arrow.active-arrow {
                                stroke: #fff;
                                transform: rotate(180deg);
                                /* Поворот стрелки на 180 градусов */
                            }

                            @media screen and (max-width: 560px) {
                                .click__item {
                                    font-size: 18px;
                                }

                                .arrow__box {
                                    padding: 25px;
                                }

                                .accordion-content {
                                    padding: 0 30px;
                                }

                                .accordion-content.show {
                                    padding: 30px;
                                }
                            }





/* End */
/* /local/templates/roltop/components/bitrix/news/catalog.roltop/bitrix/news.detail/.default/style.css?17920471759979 */
