@media screen {
  html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    text-align: left;
    overflow-x: auto;
  }
  body {
    width:100%; 
    color: #000;
    font-family: Roboto, Arial, Helvetica;
    font-size: 18px; 
  }
  #white {
     background-color: #fff; 
     padding: 5%;
     display: inline-table;   
     width: auto; 
     min-width: 100%;
  }
  a.menu {
    border-color: rgb(87, 87, 87);
    border-style: none;
    box-sizing: content-box;
    color: #555;
    cursor: pointer;
    display: inline;
    font-size: 21px;
    list-style-type: none;
    text-align: center;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-wrap: none;
    white-space-collapse: collapse;
  }
  a.menu:hover {
      text-decoration: underline;
  }
  .menu_s {
    border-style: none;
    box-sizing: content-box;
    color: #333;
    cursor: pointer;
    display: inline;
    font-size: 21px;
    font-weight: bold;
    list-style-type: none;
    text-align: center;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-wrap: none;
    white-space-collapse: collapse;
  }  
  .r_menu {
    border-style: none;
    box-sizing: content-box;
    color: #555;
    cursor: pointer;
    display: inline;
    list-style-type: none;
    text-align: center;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-wrap: none;
    white-space-collapse: collapse;
  }
  .r_menu_s {
    border-style: none;
    box-sizing: content-box;
    color: #333;
    cursor: pointer;
    display: inline;
    font-weight: bold;
    list-style-type: none;
    text-align: center;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-wrap: none;
    white-space-collapse: collapse;
  }  
  ul.menu {
    box-sizing: content-box;
    display: block;
    height: 30px;
    list-style-type: none;
    text-align: center;
    unicode-bidi: isolate;
    padding: 8px 0px 0px 0px;
    margin: 0px;
    border-bottom: 4px solid #9d793d;      
  }
  ul.menu li {
    box-sizing: content-box;
    clear: both;
    color: #000;
    display: inline-block;
    height: 18px;
    list-style-type: none;
    padding-right: 32px;
    text-align: center;
    text-wrap: none;
    unicode-bidi: isolate;
    white-space-collapse: collapse;
  }
  ul.r_menu {
    box-sizing: content-box;
    display: block;
    height: 30px;
    list-style-type: none;
    text-align: center;
    unicode-bidi: isolate;
    padding: 8px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    border-bottom: 1px solid #888;
  }  
  ul.r_menu li {
    box-sizing: content-box;
    clear: both;
    color: #000;
    display: inline-block;
    height: 24px;
    list-style-type: none;
    padding-right: 32px;
    text-align: center;
    text-wrap: none;
    unicode-bidi: isolate;
    white-space-collapse: collapse;
  }  
  .r_menu {
    text-wrap: none;
  }
  .r_menu:hover {
      text-decoration: underline;
  }
  .tlist {
    text-align: center;
    margin: auto;
    background-color: #fff;    
  }
  .thlist {
    font-weight: normal;
    padding: 4px 8px;
    text-align: center;
    color: #444;
  }
  .thlist_v {
    font-size: 16px;
    font-weight: normal;
    padding: 4px 32px;
    text-align: center;
    color: #444;
/*    writing-mode: vertical-rl; */
  }  
  .tdlist {
    padding: 8px 8px 8px 8px;
    text-align: center;
    vertical-align: middle;
    border-top: 1px solid #888;
  }
  .softline {
    border-top: 1px dotted #888;
    padding: 8px;
    font-size: 16px;
    color: #444;
  }
  .softlink, .softlink:visited {
    text-decoration: none;
    color: #000;
  }
  .softlink:hover {
    text-decoration: underline;
  }
  .namelink, .namelink:visited {
    color: #000;
    font-size: 21px;
    font-weight: bold;
    text-decoration: none;
    padding: 0px;    
    margin: 0px;
  }
  .namelink:hover {
    text-decoration: underline;
  }
  .namelinksm, .namelinksm:visited {
    color: #000;
    font-weight: normal;
    text-decoration: none;
    padding: 0px;    
    margin: 0px;
  }
  .namelinksm:hover {
    text-decoration: underline;
  }  
  .namelinksm2, .namelinksm2:visited {
    color: #000;
    font-weight: bold;
    text-decoration: none;
    padding: 0px;    
    margin: 0px;
  }
  .namelinksm2:hover {
    text-decoration: underline;
  }  
  .link, .link:visited {
    color: #000;
    text-decoration: none;
    padding: 0px;    
    margin: 0px;
  }
  .link:hover {
    text-decoration: underline;
  }
  .name {
    padding: 0px;    
    margin: 0px 0px 8px 0px;
  }
  .name_data {
    font-weight: normal;
    padding: 0px;    
    margin: 0px;
  }
  .link {
    padding: 0px;    
    margin: 8px 0px 16px 0px;
    color: #000;
  }
  .musiclink {
    text-decoration: underline;
     color: #008;
    font-size: 21px;
    padding: 0px 16px 16px 0px;
  }
  .info_title {
    font-size: 21px;
    font-weight: bold;
    padding: 0px 16px;
    margin: 8px 0px;
    text-align: left;
  }
  .info_data {
    padding: 0px 16px;
    margin: 8px 0px;
    text-align: left;
  }

  .hint {
    cursor: pointer;
    color: #000;
    font-size: 21px;
    text-align: center;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-wrap: none;
  }
  .score, .score:visited {
    font-size: 21px;
    font-weight: bold;
    color: #000;
  }
  .pbody {
    text-align: center;
    padding: 0px;
    margin: 10px auto 10px auto;
    min-width: 990px;
    width: min-content;
  }
  .pbodybg {
    text-align: center;
    margin: 0px 0px 0px 0px;
  }
  .topnews {
    text-align: left;
    padding: 8px 24px 16px 24px;
    margin: 10px auto 10px auto;
    min-width: 892px;
    width: min-content;
  }    
  .news {
    font-weight: bold;
    color: #444;
    text-align: left;
    padding: 8px;
    margin: 0px;
  }

  .info_block {
     text-align: left;
     vertical-align: top; 
     display: inline-block;
     padding: 0px;
     margin: 0px 0px 0px 0px;
     background-color: #fff;
  }
  .info_block p {
     padding-left: 18px;
  }
  .news_block {
     font-size: 18px;
     text-align: left;
     vertical-align: top; 
     display: inline-block;
     padding: 0px 0px 16px 0px;
     border-bottom: 1px solid #888;
     margin: 0px 0px 16px 0px; 
  }
  .news_block img {
     float: left;
     margin: 0px 16px 8px 0px;
  }
  .info_block_big {
     text-align: left;
     vertical-align: top; 
     display: inline-block;
     padding: 0px;
     margin: 0px 0px 0px 0px;
  }
  .photo {
     text-align: left; 
     display: inline-block;
  }
  .school {
    padding: 0px;
    margin: 8px 0px 0px 16px;
  }
  .bigstars {
    font-size: 25px;
    font-weight: bold;
    color: #fd0;
  }
  .lane {
     text-align: center; 
     clear: both;
     padding: 0px;
     margin: 0px;
  }
  .lane2 {
     text-align: center; 
     clear: both;
     padding: 0px;
     margin: 0px;
  }  
  .line1 {
    font-weight: bold;
    color: #444;
    text-align: center; 
    display: inline-block;
    padding: 4px 0px;
    margin: 36px 8px; 
    border: 1px;
  }
  .l1 {
    padding: 8px 0px;    
    margin: 0px;
    text-align: center; 
  }
  .header {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #9d793d;      
    margin: 0px;
    padding: 16px 0px 0px 0px;
  }
  
.barGraph {
	position: relative; 
	height: 100px;
	margin: 1em 0; 
	padding: 0;
    background: url(img/horizontal_line.png) bottom left;
	font: 11px Helvetica, Geneva, sans-serif;
    }
    
.barGraph li {
	position: absolute; 
	bottom: 0; 
	margin: 0; 
	padding: 0 0 0 0;
	text-align: center; 
	list-style: none;
	width: 39px; 
	border: 1px solid #555; 
	border-bottom: none; 
	color: #000;
    }
    
.p1{ background-color:#dab368; }
.p2{ background-color:#80693d; }
.p3{ background-color:#fff; }

.score4 {
    background-color: #80693d;   
    width: 16px;
    height: 16px;
    border: 1px solid #444;
    position: absolute;
    }
.score5 {
    background-color: #dab368;   
    width: 16px;
    height: 16px;
    border: 1px solid #444;
    position: absolute;
    }    
.comment {
    text-align: left;
    font-size: 18px;
}
.raitimg {
    vertical-align: middle;
    float: left;   
}
.rait {
    text-align: left;
    float: left;   
    padding: 0px 16px;
}
.raiting {
    margin: 0px 0px 8px 0px;
    padding: 0px;
    font-size: 28px;
    color: #444;
    text-align: center;
}
#place {
    font-size: 40px;
    font-weight: bold;
    color: #444;
    vertical-align: middle;
    border-top: 1px solid #888;
    line-height: 36px;
    padding: 0px;
    margin: 0px;
}

.pagination a {
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
   display: inline-block;
}

 .active {
  border: 1px solid #ec7000;
  color: #000;
}

.pagination {
    margin: 4px;
    text-align: center;
    width: 100%;
    
}

.pagination a:hover:not(.active) {background-color: #ddd;}

#mobile-link {
    display: none;
}

#desktop-link {
    display: block;
}

.profile_tab {
	display: flex;
	justify-content: flex-start;
	margin-top: 16px;
	gap: 10px;
	border-bottom: 2px solid #444;
}

.tab_sel {
    text-decoration: none;
    color: #fff !important;
    background-color: #444;
    padding: 4px 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: background-color .3s;
    font-weight: bold;
    user-select: none;
}

.tab_base {
    text-decoration: none;
    color: #444 !important;
    background-color: #fff;
    padding: 4px 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: background-color .3s;
    font-weight: bold;
    user-select: none;
}

.letter {
    font-size: 40px;
    font-weight: bold;
    color: #ec7000;
    padding: 8px 0px;
    clear: both;
}

.mem_col {
    display: flex;
    flex-wrap: wrap;
    max-width: 780px;
}
.mem_person {
    display: flex;
    align-items: flex-start;
    width: 380px;
    margin-bottom: 10px;
}
.mem_ph {
    height: auto;
    margin-right: 10px;
    object-fit: cover;
}
.mem_data {
    flex-grow: 1;
}

@media only screen and (max-width: 768px) {
    #mobile-link {
        display: block;
    }
    #desktop-link {
        display: none;
    }
}

.pagination {
    margin: 20px 0;
}

.pagination__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;    
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.pagination__item {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* Ссылки пагинации */
.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    text-decoration: none;
    color: #333;
    border: 1px solid #fff;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagination__link:hover:not(.pagination__link--active):not(.pagination__link--disabled) {
    border: 1px solid #ddd;
    color: #000;
}

.pagination__link:focus {
    border: 1px solid #ec7000;
    outline-offset: 2px;
}

/* Активная ссылка */
.pagination__link--active {
    color: #fff;
    border: 1px solid #ec7000;
    cursor: default;
}

/* Отключенные ссылки */
.pagination__link--disabled {
    color: #999;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Кнопки prev/next */
.pagination__link--prev,
.pagination__link--next {
    min-width: auto;
    padding: 8 16px;
}

/* Многоточие */
.pagination__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    color: #666;
    user-select: none;
}

/* Адаптивность */
@media (max-width: 600px) {
    .pagination__list {
        gap: 3px;
    }
    
    .pagination__link {
        padding: 8 16px;
    }
    
    .pagination__link--prev,
    .pagination__link--next {
        padding: 8 16px;
    }
}

.ver {
    color: #444;
    font-size: 14px;
    padding: 0px 0px 0px 8px;
}

.arrow_up {
    color: #4a0; 
    padding: 0px; 
    margin: 0px;
    font-size: 52px;
    line-height: 40px;
    padding: 0px;
    margin: 0px;
}
.arrow_down {
    color: #c60; 
    line-height: 40px;
    padding: 0px; 
    margin: 0px;
    font-size: 52px;
}
.sign_new {
    color: #ffd700; 
    line-height: 40px;
    padding: 0px; 
    margin: 0px;
    font-size: 24px;
}
.score_up {
    color: #4a0; 
    font-weight: bold;
}
.score_down {
    color: #c60; 
    font-weight: bold;
}
h3 {
    padding: 0px;   
    margin: 8px;
}
.charts {
    padding: 0px;   
    margin: 8px 0px;
    text-align: left;
    line-height: 24px;
}
.charts a {
   color: #ec7000;
   border: 1px solid #ec7000;
   border-radius: 6px;
   padding: 2px 8px;
   margin: 8px 8px;
}
.charts span {
   color: #ffffff;
   border: 1px solid #ec7000;
   border-radius: 6px;
   padding: 2px 8px;
   margin: 8px 8px;
   background-color: #ec7000;
   display: inline-block; 
}
.strong {
    padding-left: 16px;
    font-weight: bold;
    margin: 16px 0px 0px 0px;
    padding: 0px;
}
.raits {
    padding: 0px 16px;
    margin: 0px;
}
#gp_score {
    font-size: 40px;
    font-weight: bold;
    color: #b19d42;
    vertical-align: middle;
    border-top: 1px solid #888;
    line-height: 36px;
    padding: 0px;
    margin: 0px;
}
}