body{
    background: #FFF;
}


   .vazhno {
            background-color: #fff3cd;
            padding: 15px;
            border-left: 5px solid #dc3545;
            margin: 10px 0;
        }
        .sovet {
            background-color: #e7f5ff;
            padding: 15px;
            border-left: 5px solid #28a745;
            margin: 10px 0;
        }

        
.wrapper__post{
    width: 1100px;
    margin: 50px auto;
}
.wrapper__post_id{
    width: 1100px;
    margin: 0 auto;
}
.wrapper_description___post{
    width: 1100px;
    margin: -75px auto;
}

.wrapper_desc__p{
    width: 100%;
    margin: 20px auto;
     display: inline-block;
    vertical-align: top;
    background: #FFF;
    padding: 0px;
    border-radius: 20px;
}
.wrapper_post_content{
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}
.title_wrapper__post{

}
.wrapper_related{
    width: 340px;
    margin-top: 20px;
    border-radius: 20px;
    display: inline-block;
    vertical-align: top;
}
#wrapper__article{
   border: 0.5px solid var(--border-color);
   margin-top: 20px;
}

h1#title{
    font-size: 36px;
    line-height: 64px;
    font-family: "Roboto-Medium", sans-serif;
    padding-top: 20px;
}
.line_title___post{
    width: 100%;
    height: 0.5px;
    background: var(--border-color);
}
.wrapper_share_block{
width: 100%;
display: inline-block;
vertical-align: top;
margin-top: 0px;
}

.wrapper_comment{
 display: inline-block;
 vertical-align: top;
    }
.wrapper_share_and_comment{
    width: 50px;
    display: inline-block;
    vertical-align: top;
}
.view_panel{
    width: auto;
    display: inline-block;
    float: right;
    vertical-align: top;
    margin-top: 10px;
}
.view_content, .view_data{
    width: auto;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    padding-top: 10px;
    margin-top: -10px;
    display: inline-block;
    vertical-align: top;
     border: 0.5px solid var(--border-color);
}

.view_content span , .view_data span{
    font-size: 13px;
     font-family: "Roboto-Regular", sans-serif;

}
.wrapper_share{
display: inline-block;
 vertical-align: top;
}
.i-comment , .i-share{
    width: 30px;
    margin: 5px;
}

.avatar_post{
    width: 100%;
    height: 500px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 20px;
    margin-top: 20px;
     display: inline-block;
    vertical-align: top;
}

.wrapper_related_avatar{
    width: 340px;
    height: 520px;
    margin-top: 20px;
    border-radius: 20px;
    border: 0.5px solid var(--border-color);
    display: inline-block;
    vertical-align: top;
    background: #FFF;
}


.wrapper_description___post p ,.description_wrapper p{
    white-space: pre-line;
    font-size: 16px;
    line-height: 31px;
    color: #333;
    font-family: "Roboto-Regular", sans-serif;
}

.description_wrapper li{
    font-size: 16px;
    color: #333;
    line-height: 40px;
    font-family: "Roboto-Regular", sans-serif;
}
.description_wrapper h2{
   font-size: 28px;
    color: #333;
    line-height: 40px;
    padding-top: 20px;
    font-weight: bold;
    white-space: pre-line;
    font-family: "Roboto-Medium", sans-serif;
}
.description_wrapper h3,h4,h5{
    font-size: 24px;
    color: #333;
    line-height: 40px;
    padding-top: 20px;
    font-weight: bold;
    white-space: pre-line;
    font-family: "Roboto-Medium", sans-serif;
}
#wrapper_description{
 
    font-size: 16px;
    line-height: 40px;
    color: #333;
    font-family: "Roboto-Regular", sans-serif;
}







        #share{
        background: rgba(000, 000, 000, 0.7);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: none;
        z-index: 8;
    }
    #okno_share{
        z-index: 1000;
        width: 300px;
        height: auto;
        right: 0;
        border-radius: 10px;
        padding: 20px;
        top: 100px;
        background: #fff;
        position: relative;
        left: 0;
        margin: auto;
        text-align: center;
    }
    #close{
        width: 20px;
        height: 20px;
        opacity: 0.7;
        background: transparent;
        margin-top: -10px;
    }
    #okno_share strong{
       font-size: 18px;

    }
    #okno_share b{
       font-size: 15px;
       color: #114AA1;

    }
    #share:target {display: block;}
    
    #shre_desc{
        display: inline-block;
    }

#mobile_share{
    display: none;
    position: fixed;
}



.share_blck{
    display: inline-block;
    vertical-align: top;
    width: 120px;
    margin-top: -5px;
    float: left;
}
#share_link{
    background: #eee;
    border-radius: 10px;
    width: auto;
    float: left;
    height: 40px;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
}

#share_link span{
    font-size: 14px;
    color: #8B8B8B;
    display: inline-block;
    vertical-align: top;
    margin-top: 12px;
    margin-right: 10px;
}
#share_link:hover .i-folder{
-webkit-filter: sepia(1) hue-rotate(320deg) saturate(10);
  filter: sepia(1) hue-rotate(320deg) saturate(10);
}
.i-folder{
  height: 23px;
  width: 23px;
  margin: .5em;
  padding: 3px;
-webkit-filter: sepia(0) hue-rotate(0deg) saturate(0);
  filter: sepia(0) hue-rotate(0deg) saturate(0);
}

            #blc_article_more{
                width: 100%;
                text-align: left;
                margin-top: 20px;
            }
            #blc_article_more img{
                width: 270px;
                height: 140px;
                object-fit: cover;
                border-radius: 10px;
                background: #fff;
            }
            #text_article_more{
                width: 270px;
            }
            #blc_article_more strong{
                font-size: 14px;
            }
            #blc_article_more span{
                color: gray;
                opacity: 0.8;
                font-size: 10px;
            }
            #blc_article_more p{
                color: gray;
                line-height: 19px;
                font-size: 12px;
            }
.form_main{
  width: 100%;
  margin: 50px auto;
    text-align: center;
}

.telegram_wrapper{
    width: 100%;
    padding: 13px;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #E6EAED;
    margin: 9.5px auto;
    background: transparent;
    border-radius: 8px;
    white-space: none;

}
.telegram_wrapper:hover{
background: #E6EAED;
    }
.text_telegram_wrapper{
    width: 170px;
    display: inline-block;
    vertical-align: top;
    margin: 5px auto;
}
.text_telegram_wrapper span{
   font-size: 13px;
   color: #333;
   font-weight: normal;
   font-family: "Roboto-Bold", sans-serif;

}
.telegram_logo{
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: top;
    padding: 5px;
}
.telegram_logo img{
    max-width: 100%;
    max-height: 100%;
}
#voteForm{
    width: 100%;
    display: inline-block; 
    vertical-align: top;
    text-align: center;
}

.description_wrapper{

}

.description_wrapper section{
    margin-top: 0px;
}
.description_wrapper a{
    color: #2C6CF9;
    text-decoration: none;
}
.description_wrapper a:hover{
    text-decoration: underline;
}

    #voteForm button{
width: 120px;
font-size: 30px;
display: inline-block;
vertical-align: top;
margin: 10px auto;
padding: 10px;
border: 1px solid #E6EAED;
position: relative;
    padding-left: 25px;
    text-align: center;
    background: #FFF;
    }

#likeBtn{
border-radius: 8px 0 0 8px;
}
#dislikeBtn{
border-radius: 0 8px 8px 0;
}
     #voteForm button:hover{
background: #E6EAED;
    }
    #voteForm button span{
font-size: 20px;
color: #444;
font-weight: normal;
    padding-top: 7px;
    display: inline-block;
    vertical-align: top;
    }

.icon_voteForm{
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: top;
    margin: 2px auto;
}
.icon_voteForm img{
    max-width: 100%;
    max-height: 100%;
}
   .advantages li {
            list-style-type: none; /* Убираем стандартные маркеры */
        }
        .advantages li::before {
            content: "\2705"; /* Знак плюса */
            color: green; /* Зеленый цвет для плюсов */
            margin-right: 5px; /* Отступ справа от знака */
        }
        .disadvantages li {
            list-style-type: none; /* Убираем стандартные маркеры */
        }
        .disadvantages li::before {
            content: "\274C"; /* Знак минуса */
            color: red; /* Красный цвет для минусов */
            margin-right: 5px; /* Отступ справа от знака */
        }

@media  screen and (max-width: 1100px) {
.wrapper_description___post {
    width: 100%;
}
.wrapper__post, .wrapper__post_id{
    width: 900px;
}
.wrapper_post_content{
    width: 100%;
    display: inherit;
}
.avatar_post{
    width: 100%;
    height: 400px;
}

.wrapper_related_avatar{
    width: 100%;
    height: auto;
}
.wrapper_desc__p{
    width: 100%;
    border: 0px;
    background: transparent;
}
.wrapper_related{
    width: 900px;
}
}

@media  screen and (max-width: 900px) {

.wrapper__post, .wrapper__post_id{
    width: 800px;
}
.wrapper_post_content{
    width: 800px;
    display: inherit;
}
.avatar_post{
    width: 800px;
}
.wrapper_related_avatar{
    width: 800px;
    height: auto;
}
.wrapper_desc__p{
    width: 800px;
}
.wrapper_related{
    width: 800px;
}
    
}

@media  screen and (max-width: 800px) {

.wrapper__post, .wrapper__post_id{
    width: 600px;
}
.wrapper_post_content{
    width: 600px;
    display: inherit;
}
.avatar_post{
    width: 600px;
}
.wrapper_related_avatar{
    width: 600px;
    height: auto;
}
.wrapper_desc__p{
    width: 600px;
}
.wrapper_related{
    width: 600px;
}
h1#title{
    font-size: 28px;
    line-height: 45px;
}
    
}

@media  screen and (max-width: 660px) {

.wrapper__post, .wrapper__post_id{
    width: 500px;
    margin: 20px auto;
}
.wrapper_post_content{
    width: 500px;
    display: inherit;
}
.avatar_post{
    width: 500px;
    height: 300px;
}
.wrapper_related_avatar{
    width: 500px;
    height: auto;
}
.wrapper_desc__p{
    width: 500px;
}
.wrapper_related{
    width: 500px;
}


#voteForm{
    width: 100%;
    min-width: 248px;
}
  #voteForm button{
width: 49.5%;
    }
    .telegram_wrapper{
    width: 100%;
    min-width: 350px;

}
    
}

@media  screen and (max-width: 500px) {
.wrapper__post, .wrapper__post_id{
    width: 350px;
    margin: 20px auto;
}
.wrapper_post_content{
    width: 350px;
    display: inherit;
}
.avatar_post{
    width: 350px;
    height: 230px;
}
.wrapper_related_avatar{
    width: 350px;
    height: auto;
}
.wrapper_desc__p{
    width: 350px;
     padding: 0px;
}

.wrapper_related{
    width: 350px;
    display: block;
}
.description_wrapper{
    padding: 10px;
}

  #voteForm button{
width: 49%;
    }
    
}