:root {
    --oc: rgba(0, 0, 0, 1);
    --sc: rgba(102, 102, 102, 1);
    --tc: rgba(255, 255, 255, 1);
    --fc: rgba(207, 98, 209, 1);
    --fvc: rgba(102, 102, 102, .5);
    --grey-light: rgba(102, 102, 102, .2);
}



body,div,span,a,h1,h2,h3,h4,h5,h6
{ 
    font-weight:  400;
    font-family: Arial;
    line-height: 1.15;
    font-style: normal;
    margin: 0px;
    padding: 0px;
    font-weight: normal;
}
p{
    margin: 16px;
    margin-left: 0px;
    margin-right: 0px;
}

a {
    text-decoration: none;
    color:#000000;
}
a:hover {
    color: var(--fc);
}
.display_none
{
    /*	display: none !important;*/
    max-height: 0px !important;;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: all .2s ease-in;
}
select {
    width: -webkit-fill-available;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(207, 98, 209, 1);
    color: rgba(102, 102, 102, 1);
    max-width: 400px;
    border-radius: .5rem;
    border-width: 1px;

}

.main_body
{
    margin:0px;
    padding:0px;
    background: rgba(236, 237, 241, .3);
}
.main_body.dark_bg .block_read_text {
    background: transparent;
}
.main_body.dark_bg .boobox  {
    background: transparent;
}
.main_body.dark_bg .seria_tlt  {
    color:  #fff !important;
}
.main_body.dark_bg .logo img  {
    filter: grayscale(var(--value, 100%)) invert(var(--value, 100%));
}
.main_body.dark_bg .div_str_knigi_similar_name  {
    border-top: 1px solid rgba(255,255,255, .1);
}
.main_body.dark_bg a  {
    color: rgba(207, 98, 209, 1) !important;
}
.white_color  {
    color:  #fff !important;
}
.main_body.dark_bg a.a_paging  {
    color:  #fff !important;
}
.seriabox.white_color {
    background: #666;
}
.gray_bg.white_color {
    background: transparent;
}
.footer_counter.white_color {
    background: transparent;
}


.main {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    max-width: 1100px;
    /*	background:  #ffffff;*/
    margin: auto;
}  

.head {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    max-width: 1100px;
    background:  #ffffff;
    margin: auto;
    padding-top: 2s0px;

}

.center_col{
    width: 100%;
}


.center_col--list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 50px 0px 20px 0px;

}

@media (min-width: 801px) {
    .div_menu
    {
        width: 100%;
        font-family: Arial;
        padding: 0px 0px 0px 0px;
        text-align: left;
        max-height: 9001em;
        margin: 0px;
    }
}
@media (max-width: 800px) {
    .div_menu
    {
        width: 100%;
        font-family: Arial;
        padding: 0px 0px 10px 0px;
        text-align: center;
        max-height: 9001em;
        margin: 0px;
    }
}



.a_menu {
    text-decoration: underline;
    font-size: 18px;
    color:var(--fc);
}

.div_main_title {
    width:100%;
    margin: 0px 0px 0px 0px;
    text-align: left;
    max-height: 9001em;
    padding: 0px;
}
.h_main_title {
    font-family: Arial;
    font-size: 18px;
    color: #666;
}

.input_search {
    width: -moz-available;
    width: -webkit-fill-available; 
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    border-style:  solid;
    border-width: 1px;
    border-color:  rgba(207, 98, 209, 1);
    color: rgba(102, 102, 102, 1);
    max-width: 400px; 

    border-radius: .5rem;
    border-width: 1px; 
}
.input_search::placeholder {
    color: rgba(102, 102, 102, .5);
}
.input_search:focus::placeholder {
    border-color:  rgba(207, 98, 209, 1);
}

.button_search
{
    margin-left: 18px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    color: #ffffff;

    background: red;
    border-style:  solid;
    border-width: 1px;
    border-color: #000000;
    width: 140px;
    height: 40px;

    font-size: 19px;
}

.btn {	
    width: 100%;
    border-radius: 1rem;
    border-width: 2px;
    border-color: transparent;   
    background-color: rgba(207, 98, 209, 1);
    padding: 5px 20px 5px 20px ;
    text-align: center;
    font-weight: 700;
    color: #fff;
    outline: 2px solid transparent;  
    transition: all .2s ease-out;
}

.btn:hover {
    cursor: pointer; 
    background-color: #fff;
    border-color: rgba(207, 98, 209, 1);
    color: rgba(207, 98, 209, 1);
}


.leading-\[1\.5\] {
    line-height: 1.5;
}

.div_search {
    /*	margin: 0px 4px 20px 4px;*/
    flex: 3;
    display: flex;
    justify-content: end;	 
}

.form_search {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px; 

}
.div_search_btns
{
    padding-left: 20px;
}
.search_type {
    width: 30px;
    color: rgba(102, 102, 102, .5);
    text-decoration: none;
    font-size: 12px;
    /*	padding: 10px;*/
    cursor: pointer;
    display: inline-flex;
    width: min-content;
    align-items: center;
    font-family: Arial;

}

.search_type:hover { 
    color: rgba(207, 98, 209, 1);
}

.search_type_active { 
    color: rgba(0, 0, 0, 1);
}

.search_type_active + .switcher__wrp .switcher__image   {	
    transform: scaleX(-1);	 
}

.div_main_genry_block
{
    width:100%;

}
.div_genre_list {
    width:100%;
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    max-height: 100%;
    /*	text-align: justify;*/
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid rgba(205,205,205, .5);
    border-bottom: 1px solid rgba(205,205,205, .5);
    background: rgba(236, 237, 241, .3);
    transition: all .6s ease-in;
    overflow: hidden;
}

.h3_genre,
.selected {
    text-decoration: underline;
    cursor: pointer;
    text-align: right;
    width:  max-content;	
    color:#666;
    font-size: 12px;
    padding: 2px 15px 2px 15px;
    font-family: Arial;
    text-decoration: none;
    font-family: Arial;
}
.selected span {
    font-family: Arial;
    font-size: 16px;
}
.selected:hover {
    cursor: auto;
}
.h3_genre--left {
    margin-right: auto;
}
.h3_genre--right {
    margin-left: auto;
}



.h3_genre2 {
    padding: 0px;
    margin: auto;
    font-family: Arial;
}
.h3_pop_authors {
    margin: auto;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    padding: 7px;
}

.a_genre {
    color: #CF62D1;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold; 
    display: block;
    margin: 0;

}
.a_genre:hover .h_genre {
    box-shadow: 8px 5px 4px -3px rgba(0,0,0,0.75);

}
.a_genre_active .h_genre {
    background: #fff;
    border-color: #CF62D1;
    outline: 2px solid #CF62D1;
    color: #CF62D1;
    background: transparent;
}
.a_genre_active:hover .h_genre {
    box-shadow: 8px 5px 4px -3px  rgba(0,0,0,0.75);
}

.h_genre {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    background-color: rgb(207 98 209 / .3);
    color: #000;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 1rem; 
    transition: all .2s ease-out;
    font-family: Arial;
}

.a_genre_active {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;

}

.div_genre {
    /*	margin: 10px;*/
    display: inline-block;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 2px 5px 2px 5px ;
}



.div_pop_authors {
    margin: 0px;
    display: inline-block;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
}
.div_genre2 {
    margin: 10px;
    display: flex;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

.div_genre_header {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
}


.a_knigi_block
{
    display: contents;
}

.knigi_ramka
{

    -webkit-border-radius: 10px;
    border-radius: 1px;

    border-style:  solid;
    border-width: 1px;
    border-color: #CF62D1;


    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
    background: #fff;


}

.knigi_ramka_series
{
    margin: auto;
    padding: 10px 0px 10px 0px;
    background: #fff;
    max-width: 1100px;
}

.div_header
{
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
    color: #666;
    font-size: 12px;
    font-family: Arial;
    text-decoration: none;
    font-family: Arial;
    text-align: center;
}


.knigi_name {
    display:flex;

    height: 100%;

    text-align: left;

    color: #666;
    font-size: 24px;

    margin-left: 14px;
    margin-right: 10px; 
}
.knigi_author {
    display:flex;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;
    margin-bottom: 20px;

    width: 100%;
    text-align: left;

    color: #CF62D1;

    font-size: 19px;

}

.knigi_ramka_inf
{
    width:100%;
    display:flex;


}
.knigi_ramka_left{

    width: 60%;
    display:  inline-block;
    margin: auto;

}
.knigi_ramka_right{
    margin: 0px;
    padding: 0px;
    width: 40%;
    display:  inline-block;
    text-align: right;
}
.knigi_seriya
{
    padding: 12px;

}
.knigi_genre
{
    padding: 12px;

}
.knigi_r
{
    padding: 12px;
}
.knigi_span_seriya
{         
    font-size: 18px;
    color:#CF62D1;
}
.span_knigi_r
{
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    color:#CF62D1;
}
.span_knigi_r_digit
{
    font-size: 24px;
    text-decoration: none;
    color:#666;
}
.knigi_span_genre
{
    font-size: 18px;

    text-decoration: none;
    display: inline-block;
    color: #666;
}

.knigi_img
{


    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    width: 120px;
    margin-right:10px;
    margin-bottom: 3px;
}

/* Paging */
.div_paging_block
{
    display: block;
    margin: 0px 0px 18px 0px;
    text-align: center;
    padding: 5px 0px 0px 0px;
}
.a_paging {
    color: #ffffff;
    background: #CF62D1;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;

    -webkit-border-radius: 10px;
    border-radius: 10px;

    border-style:  solid;
    border-width: 1px;
    border-color: #000000;
    width: 50px;
    display: inline-block;

    margin: 5px;
    font-family: Arial;

}
a.a_paging:hover {
    background: #fff;
    color: var(--oc) !important;
}
.a_paging_active {
    color: #666;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 8px;

    -webkit-border-radius: 10px;
    border-radius: 10px;

    border-style:  solid;
    border-width: 2px;
    border-color: #666;
    width: 50px;
    display: inline-block;

    margin: 5px;
    font-family: Arial;
}
.a_paging_active_dark {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 6px;

    -webkit-border-radius: 10px;
    border-radius: 10px;

    border-style:  solid;
    border-width: 2px;
    border-color: #ffffff;
    width: 50px;
    display: inline-block;

    margin: 5px;
    font-family: Arial;
}

/* Правая колонка*/
.ramka_right_col
{
    -webkit-border-radius: 10px;
    border-radius: 10px;

    border-style:  solid;
    border-width: 1px;
    border-color: #000000;

    padding: 10px;
    margin: 20px;
    display: block;
}

/* Footer */

.footer {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    max-width: 1100px; 	
    text-align: center;
    margin: auto;	
}

.footer_main { 
    display: flex;
    width: 100%;
    margin-top: 10px;
}
.footer_link
{
    margin: 0px auto 0px 0px;
}
.footer_counter { 
    width: 100%;
    text-align: center;
    background: #fff;
    padding: 20px;
}



/* Book_view */
.div_knigi_name {
    display: flex;
    text-align: left;
    margin-left: 14px;
    margin-right: 10px; 
}
.div_knigi_author
{  
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;

    width: 100%;
}
.a_knigi_author {
    text-decoration: underline;

    margin-left: 0px;
    margin-right: 0px;
    color: #CF62D1;
    font-size: 19px;
}
.h_knigi_name {
    display: inline-block;
    color: #666;
    font-size: 24px;
    text-align: left;
}


@media (min-width: 801px) {

    .knigi_ramka_inf2
    {
        width:100%;
        display:flex;
        margin-top: 20px;
    }


    .knigi_ramka_left2{

        width: 60%;
        display:  inline-block;
        margin: auto;

    }
    .knigi_ramka_right2{
        margin: 0px;
        padding: 0px;
        width: 40%;
        display:  inline-block;
        text-align: right;
    }
    .knigi_img2
    {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        width: 160px;
        margin-right:15px;
        margin-bottom: 0px;
    }

    .div_knigi_r
    {
        padding: 0px 45px 0px 0px;

    }
    .span_knigi_r2
    {
        font-size: 16px;
        color: #CF62D1;
        text-decoration: none;

    }
    .span_knigi_r_digit2
    {
        font-size: 24px;
        color: #666;
        text-decoration: none;
    }
    .span_vote_block
    {
        margin-right: 3px; 

    }

}
@media (max-width: 800px) {
    .knigi_ramka_inf2
    {
        display: flex;
        width: 100%;
        margin-top: 20px;
        flex-direction: column-reverse;
    }

    .knigi_ramka_left2{


        width: 100%;
        margin: auto;
        display: block;
        text-align: left;
    }
    .knigi_ramka_right2{



        padding: 0px;
        display: block;
        margin: auto; 


    }
    .knigi_img2
    {  
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        width: 160px;
        margin-bottom: 0px;
    }


    .div_knigi_r
    {
        padding: 0px;
        margin: 0px 0px 10px 0px;
        text-align: center;
    }
    .span_knigi_r2
    {

        font-size: 16px;
        color: #CF62D1;
        text-decoration: none;

    }
    .span_knigi_r_digit2
    {
        font-size: 24px;
        color: #666;
        text-decoration: none; 
    }
    .span_vote_block
    {
        margin: 0px; 

    }

}

.div_knigi_seriya
{
    padding: 12px;

}
.div_knigi_genre
{
    padding: 12px;
}
.div_knigi_year
{
    padding: 12px;
    font-size: 18px;
    color: #CF62D1;
}

.a_knigi_seriya
{         
    font-size: 18px;
    color: #666;
    text-decoration: underline;
    display: inline-block;
}

.a_knigi_genre
{
    font-size: 18px;
    color: #666;
    text-decoration: underline;
    display: inline-block;
}

.a_knigi_vote
{
    font-family: Courier;
    font-size: 30px; 
    color: #CF62D1;
}
.div_knigi_anons
{
    display: flex;
    margin: 0px 0px 20px 0px;
}
.span_knigi_anons
{
    font-size: 15px;
    text-align: justify;
}
.div_buttons
{
    margin: 10px 5px 10px 0px;  
    text-align: right;   
}
.a_buttons
{
    margin: 8px 10px 0px 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;

    background: red;
    width: 110px;
    padding: 9px; 

    font-size: 19px;
    display: inline-block;
    text-align: center;

}
.div_msg_closed
{
    -webkit-border-radius: 1px;
    border-radius: 1px;
    border-style:  solid;
    border-width: 1px;
    border-color: #CF62D1;
    margin: 20px;
    padding: 10px 10px 10px 10px;
    font-size: 16px;
    color: #666;
}
.div_msg_notfull
{
    -webkit-border-radius: 1px;
    border-radius: 1px;
    border-style:  solid;
    border-width: 1px;
    border-color: #CF62D1;
    margin: 20px;
    padding: 10px 10px 10px 10px;
    font-size: 16px;
    color: #666;
}

/* avtor_view */

.div_block_avtor_inf
{                   

    display: block;  
    padding: 12px;

}
.div_avtor_view_str
{                   
    margin: 5px 0px 5px 0px;
    width: 100%;
    display: flex;
}
.div_avtor_header
{
    font-size: 16px;
    color: #000000;

    display: inline-flex;
    width: 120px;
}
.div_avtor_inf
{
    font-size: 16px;
    color: #000000;
    display: flex;
    word-break: break-all;
    width: 120px;
}
.div_block_bio
{
    margin-top: 0px; 
    margin-bottom: 10px;
}
.h_bio_header
{
    font-size: 16px; 
    font-weight: normal;
    color:#666;
}

/* Список книг в строчку */
@media (max-width: 800px) {

    .div_str_knigi_similar_name
    {
        margin: 5px 0px 5px 0px;
        width: 100%;
        display: block;

    }
    .div_str_knigi_similar_left
    {
        display: block;
    }
}
@media (min-width: 801px) {
    .div_str_knigi_similar_name
    {
        margin: 5px 0px 5px 0px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--grey-light);
        padding: 5px 0px 0px 0px;

    }
    .div_str_knigi_similar_left
    {
        display: inline-flex;
        width: 570px;
    }

}
.div_block_knigi_similar_header
{
    display: block;
    margin: 5px 15px 15px 0px; 
}
.div_block_knigi_similar
{
    display: block;
    margin: 10px 0px 0px 0px;
}
.div_series_name
{
    margin: 10px 0px 10px 15px;
}

.div_str_knigi_r_right
{
    display: inline-flex;
    margin-left: auto;

}
.h_knigi_similar_series
{
    display: inline-block;
    font-size: 18px;
    color: #CF62D1;
}
.h_knigi_similar_knigi_name
{
    display: flex;
}
.span_knigi_similar_n
{
    font-size: 15px;
    color: #666;
    font-weight: normal;
}
.a_knigi_similar_series
{
    display: inline-block;
    font-size: 18px;
    color: #666;
    text-decoration: underline;
}
.a_knigi_similar_knigi_name
{
    display: inline-block;
    font-size: 15px;
    color: #666;
    text-decoration: underline;
    font-size: 12px;
    font-family: Arial;
    text-decoration: none;
}
.span_knigi_similar_knigi_r_digit
{
    font-size: 15px;
    color: #666;
    display: inline-block;
}
.span_knigi_similar_knigi_r
{             
    font-size: 13px;
    color: #CF62D1;
    display: inline-block;
}

/* series_view */
.block_series_view
{
    width: 100%;
    display: block;
}
.div_s_view_str
{
    width: 100%;
    display: flex;
    margin-bottom: 15px;
}
.div_s_view_name
{
    margin: 0px auto 0px 29px;
    padding-right: 20px; 
}
.div_s_view_r
{
    margin-left: auto;
    display: ruby;
}
.div_s_view_author
{
    display: flex;
    margin-bottom: 10px;
    margin-left:15px;
    margin-top: 15px;

}

.a_s_view_author
{
    color: #666;
    font-size: 18px;
}

.h_s_view_name
{
    color: #CF62D1;
    font-size: 20px;
}

.span_s_view_r_digit
{
    font-size: 20px;
    color: #000000;
    display: inline-block;
}
.span_s_view_r_text
{             
    font-size: 13px;
    color: #000000;
    display: inline-block;
}

/* knigi_read */

@media (max-width: 850px) {
    .block_read_text
    {
        text-align: justify;


        border-bottom: 1px solid rgba(205, 205, 205, .5);



        margin: 20px 0px 20px 0px;
        padding: 10px 10px 10px 10px;

    }

}
@media (min-width: 851px) {
    .block_read_text
    {
        text-align: justify; 
        padding: 20px 20px 20px 20px;
        background: #fff;

        border-bottom: 1px solid rgba(205, 205, 205, .5);
    }

}
.div_read_settings
{
    display: flex;
    margin-bottom: 15px;

}
.div_read_panel {
    padding: 0px;
    display: flex;
    margin: auto;
}
.div_read_panel2 {
    padding: 0px 0px 0px 0px;
    display: flex;

}
.div_read_view_r
{
    margin-left: auto;
    display: ruby;
}

.h_font_header {
    margin-top:10px;
    margin-right: 7px;
    font-size: 15px;
    color:#666;
    font-family: Arial;
    font-size: 16px;
}
.select_font {
    margin-right: 1px;
    border-color: #CF62D1;
    width: 130px;
    cursor: pointer;
    height: 37px;
}
.option_font{
    font-size: 12px;
}
.button_plus_minus{
    width: 37px;
    height: 37px;    
    font-size: 25px; 
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0px 0px 0px 5px; 
    border-radius: 1rem;
    border-width: 2px;
    border-color: transparent;
    background-color: rgba(207, 98, 209, 1);
    padding: 5px 20px 5px 20px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    outline: 2px solid transparent;
    transition: all .2s ease-out;
    border: 1px solid rgba(207, 98, 209, 1);
}
.button_plus_minus:hover {
    cursor: pointer;
    background-color: transparent;
    color: rgba(207, 98, 209, 1);
    border: 1px solid rgba(207, 98, 209, 1);
}
.button_dark{
    width: 37px;
    height: 37px;

    cursor: pointer;
    border: none;  
    margin: 0px 3px 0px 3px;
    border: 1px solid #00ad45;
}
.a_back
{
    color: #CF62D1;
    font-size: 22;
    text-decoration: underline;
}

.white_color {
    color: #ffffff;
}
.dark_bg {
    background: #000000;
}
.gray_bg
{
    background: #f0f0f0;
}
.dark_color {
    color: #000000;
}
.div_img
{
    text-align: center;
}
.img_in_r
{
    width: 298px;
    margin: 4px;
}
.div_read_note
{
    display:none;
    position:absolute;
    z-index:100;font-size:17px;
    opacity:.9;
    color:#000000;
    font-weight:300;
    max-width:300px;
    padding:0px 5px 0px 5px;
    background:#ffffff;
    border:1px solid #eee;
    -webkit-border-radius:2px;
    border-radius:2px;
    -webkit-box-shadow:2px 2px 5px #777;
    box-shadow:2px 2px 5px #777;
}
.a_read_note
{
    color: #000000;
    text-decoration: none;

}

/* knigi_dl */

.div_block_files
{
    width: 100%;

    display: block;
    text-align: center;
    margin: 20px 0px 20px 0px;
}
.div_header_files
{
    display: block;
    margin: 10px 30px 10px 30px;
}
.div_block_files_line
{
    display: flex;
    width: 300px;
    margin: 10px auto 10px auto;
}
.div_left_files
{
    width: 100px;
    display: flex;

    font-size: 20px;
}
.div_right_files
{
    display: flex;
    margin-left: auto;
}
.h_header_files
{
    font-size: 20px;
}
.a_file
{
    font-size: 20px;
    color: #000000;
    text-decoration: underline;
}

.div_help_share
{
    max-height: 9001em;
    font-size: 18px;
    display: block;
    margin: 20px 15px 20px 15px;
}
.a_disable
{
    cursor: not-allowed;
    opacity: 0.5;
}
.a_help_share
{
    font-size: 18px;
    color: #000000;
    text-decoration: underline;
}

/* status 404 */
.div_status_page
{
    margin: 20px;
}
.h_status_page
{
    font-size: 20px;
}

/* Contacts */
.div_block_message
{

}
.div_mes_err
{
    margin: 20px 0px 20px 20px;
}
.h_mes_err
{
    font-size: 18px;
    margin-bottom: 5px; 
}
.span_mes_err
{
    font-size: 16px;
    display: block;
}

.form_mes
{
    width: 100%;
}
.div_form_header
{
    display: block;
    margin: 10px 10px 10px 20px;
}
.div_form_input
{
    display: block;
    margin: 0px 0px 20px 0px;
}
.div_form_textarea
{
    text-align: right;
    margin: 0px 20px 20px 0px;
}
.span_name
{
    font-size: 18px;
}
.input_name
{
    width: 99%;
    font-size: 18px;
    height: 30px;
    font-weight: normal;
}
.textarea_txt
{
    font-size: 18px;
    width: 99%;
    height: 100px; 
    color: #000000;
    font-family: MS Shell Dlg 2;
}
.button_send
{
    margin-left: 18px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    color: #ffffff;

    background: #000000;
    border-style:  solid;
    border-width: 1px;
    border-color: #000000;
    width: 120px;
    height: 35px;

    font-size: 16px;
}

/* Author_list */

.a_avtor_l_str
{
    display: flex;
    color: #000000;
    margin: 20px;
}

@media (min-width: 701px) {
    .div_avtor_str
    {
        -webkit-border-radius: 1px;
        border-radius: 1px;

        border-style:  solid;
        border-width: 1px;
        border-color: #CF62D1;


        padding: 10px 10px 10px 10px;
        width: 100%;
        display: flex;
    }
    .div_avtor_l_name
    {
        width: 320px;
        display: inline-block;
    }
    .div_avtor_l_count
    {
        width: 130px;
        display: flex;
        margin-left: auto;
    }
    .div_avtor_l_r
    {

        display: flex;
        margin-left: auto;
    }
    .span_avtor_l_r_txt
    {
        font-size: 14px;
        padding-top: 3px;
        color:#CF62D1;
    }
}
@media (max-width: 700px) {
    .div_avtor_str
    {
        -webkit-border-radius: 1px;
        border-radius: 1px;

        border-style:  solid;
        border-width: 1px;
        border-color: #CF62D1;

        padding: 10px 10px 10px 10px;
        display: block;
        width: 100%;
    }
    .div_avtor_l_name
    {
        width: 100%;
        display: block;
    }
    .div_avtor_l_count
    {
        width: 100%;
        display: block;

    }
    .div_avtor_l_r
    {
        width: 100%;
        display: block;

    }
    .span_avtor_l_r_txt
    {
        font-size: 14px;
        display: inline-block;
        color:#CF62D1;
    }
}



.h_avtor_l_name
{
    font-size: 18px;
    display: contents;
}
.span_avtor_l_r_digit
{
    font-size: 18px;
}


/* ------------------ MY CODE-----------------*/
/*Header*/
.header {

}

.head__wrap {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 10px 15px 10px 15px;
}
.head__logo {
    flex: 1;
}
.head__form {
    flex: 6;
}
.logo {
    padding-top: 3px;
}
.logo img {
    display: block;
    max-width: 100%;
}
.form_search {
    display: flex;
    justify-content: space-around;
    padding: 10;
    width: auto;
}


.switcher {
    display: flex;
    align-items: center;
    justify-content: center;
}

.switcher__wrp {	
    display: flex;
    flex-flow: row write;	
    flex: 1;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
    justify-content: center;
}

.switcher__box { 
    display: flex;
    flex-flow: row nowrap;
    max-width: 300px;
    margin-right: 10px;
}

.switcher__image {
    display: block;		
    max-width: 30px;
    height: auto;
}

.hider {
    display: flex;
    align-items: center;
}
.hider.is-active .hider__icon {
    transform: scaleY(-1);
}
.hider__icon { 
    display: inline-block;
    width: 12px;
    height: 12px; 
    background: url(../images/swp.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 5px; 	 
}

.boobox {
    display: block; 
    background: #fff; 
    margin-bottom: 50px;
    border-bottom: 1px solid rgba(205, 205, 205, .5);
}

.boobox__wrp {
    padding: 5px 15px 15px 15px;
}

.boobox__content {
    display: flex;
    flex-flow: column nowrap;
    padding: 0px 0px 0px 10px;
}

.boobox__thumb {
    overflow: hidden;
    width: 100%;
    height: 300px;
    margin-top: -50px;
    box-shadow: 7px 5px 5px -3px rgba(0, 0, 0, 0.25);
}
.boobox__thumb--ramka {
    margin-top: 0;	
}
@media (min-width: 701px) {
    .boobox__img {
        max-width: 185px;
        height: 100%;
    }
}
@media (max-width: 700px) {
    .boobox__img {
        width: 110px;
        height: 100%;
    }
}

.boobox__top { 
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px; 
    padding: 10px  0px 10px 0px;
}
.boobox__btn {
    display: flex;
    justify-content: flex-end;
    padding: 5px 0 0 0;
    margin-top: auto;
}
.boobox__bottom {
    padding: 10px  0px 10px 0px;
    border-top: 1px solid rgba(102,102,102, .3);
}

.ganres {
    display: flex;
    flex-flow: row wrap;
    font-family: Arial;
    font-size: 14px;
}

.ganres__title {
    display: flex;
    align-items: center;
    font-family: Arial;
    font-size: 14px;
    margin-right: 10px;
}

.ganres__item {
    display: flex;
    align-items: center;
    font-family: Arial;
    font-size: 12px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 5px;
    color: var(--fvc);
}

.ganres__item:hover {
    color: var(--fc);
}

.caption {
    display: flex; 

}
.caption a { 
    font-size: 18px;
    margin-bottom: 5px;
    font-family: Arial !important; 
}
.caption--big {
    font-size: 24px; 
    margin-bottom: 5px;
    font-family: Arial !important;
}
.autor {
    font-size: 12px;
    color: var(--sc);
}

.desription {
    font-size: 12px;
    padding: 10px 0px 10px 0px;
}

.raiting {
    display: flex;
    flex-flow: row nowrap;
    justify-content: end;
    padding: 0px 0px 5px 0px;
    align-items: center;
}
.raiting__num {
    color: var(--oc);
    font-size: 22px;
    color: var(--fvc);
}
.raiting__num--small { 
    font-size: 16px; 
}
.raiting__txt {
    padding: 0px 0px 0px 5px;
    font-size: 10px;
    max-width: 50px;
    color: var(--fvc);
    font-family: Arial;
}
.raiting__txt--small {
    font-size: 10px;
}
.seria {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    font-family: Arial;
}
.seria--ramka {
    display: flex;
    justify-content: flex-start;  
    padding-top: 10px;
}
.seria a:hover {
    color: var(--fc);
}
.seria_tlt { 
    font-size: 12px;
    font-family: Arial;
    padding-right: 10px;
    color: var(--fvc);
}
a.seria_link {
    font-size: 12px;
    font-family: Arial;
}
.pagin {
    width: 100%;
}

.butt {
    width: auto;
    border-radius: 1rem;
    border-width: 2px;
    border-color: transparent;   
    border: 1px solid rgba(207, 98, 209, 1);
    background-color: rgba(207, 98, 209, 1);
    padding: 5px 20px 5px 20px ;
    text-align: center;
    font-weight: 700;
    color: #fff;
    outline: 2px solid transparent;  
    transition: all .2s ease-out;
}

.butt:hover {
    cursor: pointer; 
    background-color: #fff;
    border: 1px solid rgba(207, 98, 209, 1);
    border-color: rgba(207, 98, 209, 1);
    color: rgba(207, 98, 209, 1);
}


.seriabox {
    display: block;
    background: #EFEFF2;
    padding: 10px 20px 5px 20px;
    border-radius: 10px;
    margin: 10px 0px 10px 0px;
}




.sun { 
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 3px;
}
.sun__img {
    display: block;
    max-width: 100%;
    height: auto;
}














/*********************OPTIMIZATIONS***********************/

@media (min-width: 1024px) {
    /* DESKTOP */

}

@media (min-width: 425px) and (max-width: 1024px){
    /* TABLET */
    .logo {
        min-width: 100px;
    }
    .form_search {
        flex-flow: row wrap;
    }
    .switcher {
        padding-top: 10px;
        margin-left: auto;
    }
    .center_col--list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

}

@media (max-width: 425px) {
    /* MOBILE */
    .switcher {
        padding-top: 10px;
        margin: 0;
    }
    .logo {
        max-width: 100%;
        min-width: auto;
    }
    .logo img {
        max-width: 100px; 
    }
    .form_search {
        flex-flow: row wrap;
    }
    .switcher {
        padding-top: 10px;
        margin: 0;
        display: flex;
        flex-flow: row nowrap;
        margin: 0;
        padding-left: 0;
    }
    .switcher__box {
        width: 100%;
        max-width: none;
    }
    .head__logo { 
        display: flex;
        justify-content: center;
        padding-bottom: 10px;
    }
    .head__wrap {
        flex-flow: row wrap;
    }
    .btn {
        width: auto;
        margin-top: 5px;
    }
    .h3_genre--left {
        font-size: 12px;
    }
    .h3_genre--left span {
        font-size: 12px;
    }
    .a_genre {
        font-size: 12px;
    }
    .h_genre  {
        font-size: 10px !important;
    }
    .center_col--list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 0px 10px 0px;

    }
    .boobox  {
        margin-bottom: 10px;
    }
    .boobox__thumb {
        height: 150px !important;
        margin: 0;		
    }

    .a_paging_active  {
        font-size: 10px;
        width: auto;
        margin: 2px;
        padding: 5px 15px 5px 15px;
    }
    .a_paging {
        font-size: 10px;
        width: auto;
        margin: 2px;
        padding: 5px 15px 5px 15px;
    }
    .input_search {
        height: 30px;
    }
    .desription {
        font-size: 10px;
        padding: 5px 0px 5px 0px;
    }

    .boobox__top--ramka {
        grid-template-columns: 1fr;
    }
    .boobox__thumb--ramka {
        box-shadow: none;
        display: flex;
        justify-content: center;
    }
    .raiting--ramka {
        margin: auto;
    }
    .h3_genre--left {
        text-align: left;
    }
    .h_font_header {
        font-size: 12px;
    }
    .select_font {
        width: 100px;
    }
    .div_str_knigi_similar_name {
        display: flex;
    }
}

.input_comment
{
    width: -moz-available;
    width: -webkit-fill-available;
    font-size: 15px;
    color: #666;
}
.text_comment
{
    width: -moz-available;
    width: -webkit-fill-available;
    font-size: 15px;
    height: 80px;
    color: #666;
}
.comment_header {
    display: flex;

    text-align: center;
    color: #666;
    font-size: 16px;
    margin-left: 14px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.comment_name {
    margin-bottom: 3px;
    margin-left: 5px;
    font-size: 15px;
    color: #CF62D1;
}
.comment_text {
    margin-bottom: 6px;
    font-size: 15px;
    color: #666;
}
.comment_date {
    margin-bottom: 10px;
    font-size: 12px;
    text-align: right; 
    color: #CF62D1;
}
.button_com {
    margin-top: 5px;
    width: 110px;
    border-radius: 1rem;
    border-width: 2px;
    border-color: transparent;
    background-color: rgba(207, 98, 209, 1);
    padding: 5px 20px 5px 20px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    outline: 2px solid transparent;
    transition: all .2s ease-out;
}
.button_com:hover {
    cursor: pointer; 
    background-color: #fff;
    border-color: rgba(207, 98, 209, 1);
    color: rgba(207, 98, 209, 1);
}

