@import url(style_cs.1673288584.css);

/* используются в дизайне */
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700|Open+Sans:400,400i,600,600i,700,700i,800,800i|Roboto:100,300,400,700,900');
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --base-bg: #E1CB9D url(https://forumstatic.ru/files/001b/97/37/24645.jpg) no-repeat fixed center center;
  --base-bg2: #F6F6F6;
  --base-bg3: #F2F0E8;

  --header-img: url(http://forumstatic.ru/files/001b/97/37/83448.png) no-repeat center center, url(https://forumstatic.ru/files/001b/97/37/57305.jpg);

  --base-link: #7E3119;
  --base-text: #373737;
  
  --borders: #BDA37F;
  --borders-red: #642916;
  --borders-gray: #DDDBD3;

  --tcl-bg: #161616;
  --tcl-bg-new: linear-gradient(290deg, #161616 70%, #161616 70%, #21271B 70%, rgba(34, 43, 26, 0.56) 70%);

  --i-old: #F6F6F6;
  --i-new: #DCC08A;
  --i-stik: #A43F20;
  --i-closed: #414141;

  --i-old-b: #BDA37F;
  --i-new-b: #BDA37F;
  --i-stik-b: #642916;
  --i-closed-b: #090909;

  --shadow: 9px 9px 10px rgba(0,0,0,.2);
}


@font-face {
	font-family: icon;
	src: url(https://forumstatic.ru/files/0019/78/52/99693.eot?), url(https://forumstatic.ru/files/0019/78/52/81517.woff) format('woff'), url(https://forumstatic.ru/files/0019/78/52/58230.ttf) format('truetype');
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: icon2;
	src: url(https://forumstatic.ru/files/0019/bd/e6/80769.eot?), url(https://forumstatic.ru/files/0019/bd/e6/75926.woff) format('woff'), url(https://forumstatic.ru/files/0019/bd/e6/86147.ttf) format('truetype');
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: icon3;
	src: url(https://forumstatic.ru/files/0019/bd/e6/50376.eot?), url(https://forumstatic.ru/files/0019/bd/e6/78030.woff) format('woff'), url(https://forumstatic.ru/files/0019/bd/e6/59980.ttf) format('truetype');
	font-weight: 400;
	font-style: normal
}

* {
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  margin: 0;
  border: none;
  line-height: 150%;
}

table {
  width: 100%;
  table-layout: fixed;
}

tr {
  vertical-align: middle
}

input, textarea {
    outline: none;
}  
input:active, textarea:active {
    outline: none;
} 

:focus {
    outline: none;
}

body {
  font-size: 100.01%;
  }

.punbb {
  font: normal 70%  verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;  
}

#pun {
  width: 1000px;
  margin: auto;
  word-wrap: break-word;
}

.punbb {
  width: auto;
  margin: auto;
  padding: 25px 30px;
  text-align: justify
}

#pun_wrap, HTML, body {
    position: relative;
}
#pun_wrap {
    padding-top:36px;
  padding-bottom: 20px
}

#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  }

 #pun-redirect{
      border:0 none!important;
      margin:0;
      padding:0;
      left:0;right:0;
      top:0;bottom:0;
      position:fixed;
      width:100%;
      height:100%;
      text-align:center;
    background: var(--base-bg) !important;
 background-size: cover;
    }
    #pun-redirect *{
      border:0 none;
    }
    #pun-redirect .main-title {
      display:none;
    }
    #pun-redirect.punbb .info .container{
      text-align:center;
      font:500 11px inter;
      display:inline-block;
      margin: 0 auto;
      width:auto;
      padding:40px 0px;
      height:auto;
      background: var(--base-bg2);
  border: 1px solid var(--borders);
      width: 1000px;
      margin-top: 100px
    }



/* лишнее */
h1.title-logo, #pun-navlinks h2, #pun-status h2, #pun-ulinks h2, #pun-crumbs1 strong, #pun-crumbs2 strong, thead, th, #pun-crumbs1 .container strong+em, 
#pun-crumbs2 .container strong+em, #pun-index #pun-main h1, .stickytext, .closedatafield, #pun-live-rusff, .pl-reports, td .modlist, li#navawards, .pa-gifts,
.acchide, .forum h2, .usertable h2, .topic h2, a.sharelink, #pun .pa-ua, .pa-author img, .lastedit,
fieldset legend, #pun .pl-reports, #pun .mini_gifts, #pun-userlist .main h2, #pun-search .main h1, #profilenav h2, #profile-gifts, #messages li.pl-email, #pun .email, .catleft, .catright, #pun .pl-share, p.inputfield label em, p.selectfield label em {
  display: none
}

#pun-navlinks ul {
  display: flex;
  gap: 20px;
}

#pun-ulinks ul {
  display: flex;
  gap: 10px;
  justify-content: center
}

#pun-navlinks.section {
  margin-bottom: 5px
}

#pun-ulinks.section {
  margin-bottom: 20px
}

#pun-status {
  font-size: 10px;
  position: absolute;
  top: 37px;
  height: 25px;
  width: 940px;
  text-align: center;
}

#pun-status .item4 {
  float: none !important;
}

#pun-crumbs1, #pun-crumbs2 {
  margin: 10px 0
}

.category h2 {
  margin-bottom: 10px
}

#pun-category1 {
  margin-top: 0px;
}

.category {
  margin-bottom: 20px
}

.tc2,.tc3 {
  text-align: center;
  width: 8%
}

#pun-userlist .tc2, #pun-userlist .tc3 {
  width: 15%
}

.tcl {
  width: 50%
}

.category tr {
  display: flex;
  justify-content: space-between;
}


.tcr {
  flex: auto
}

#pun-stats h2 {
  margin-bottom: 10px
}

.statscon .item1, .statscon .item2, .statscon .item3, .statscon .item4 {
  font-size: 10px;
  flex: auto;
  font: 400 11px inter
}

.statscon .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


.statscon #onlinelist {
  width: auto;
  margin-bottom: 10px
}


#pun-about p {
  text-align: center;
  font-size: 10px
}

#pun-main h1 {
  font-size: 15px
}

.linksb, .linkst {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  font-size: 10px
}

#pun .long {
  width: auto
}

.linksb noindex {
  order: 2
}

.modmenu p{
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  align-items: center
}

#pun-index td.tcr, #pun-viewforum td.tcr, 
#pun-searchtopics td.tcr, .intd,
#pun-userlist td.username, #pun-viewforum .tclcon {
  display: grid;
}
 
.intd {
  grid: auto / auto 1fr;
  align-items: center;
}
 
#pun-index td.tcr, #pun-viewforum td.tcr, #pun-searchtopics td.tcr {
  align-items: center;
  justify-content: start;
  width: inherit;
  /* height: 48px;  меняем высоту на нужную */
}
 
#pun-index td.tcr {
  grid-template:
      "tcr-em tcr-a"
      "tcr-em tcr-span"/ auto auto;
  align-content: center;
  margin-left: 10px
}
 
#pun-viewforum td.tcr, #pun-searchtopics td.tcr {
  grid-template:
      "tcr-em tcr-a tcr-span"
	  / auto auto auto;
}
 
#pun-viewforum .tclcon {
  grid:
      "stickytext closedatafield atopic pagestext"
	  ". . byuser ."
	  / auto auto 5fr 1fr;
}
 
#pun-index td.tcr br, #pun-viewforum td.tcr br, #pun-searchtopics td.tcr br {display: none;}
 
td.tcr em {grid-area: tcr-em;}
td.tcr a {grid-area: tcr-a;}
td.tcr span {grid-area: tcr-span;}
.stickytext {grid-area: stickytext;}
.closedatafield {grid-area: closedatafield;}
.pagestext {grid-area: pagestext;text-align: right;}
.acchide + a, .acchide + span + a, .acchide + span + span + a {grid-area: atopic;}
.byuser {grid-area: byuser;}
 
#pun .punbb .tcr em.user-avatar {
  float: none;
  height: 36px;
  width: 36px;
  margin: 0 9px 0 0;
}
 
#pun-userlist .main td.username {
  grid: auto / auto 1fr;
  align-items: center;
  width: 100%;
}

.icon {
  width: 13px;
  height: 13px;
  margin-right: 10px
}

.post + .post {
  margin-top: 20px
}

.post h3 {
  margin-bottom: 10px
}

.post h3 span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.post h3 span strong {
  order: 2;
  margin-left: auto
}

.post .container {
  display: flex;
  flex-wrap: wrap;
}

.post-links {
  width: 100%;
  margin-top: 10px;
}

.post-links ul {
 text-align: right;
}

.post-links li {
  display: inline;
}

.profile, .pm, .email {
  float: left
}

.post-links li + li {
  margin-left: 10px
}

.post-body {
  flex: 1;
}

.post-author ul {
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
}

.post-author {
  margin-right: 20px
}

.post-rating {
  margin-top: 20px;
}

#topic-users-in {
  margin-top: 20px
}

#topic-users-in.modmenu p {
  display: block;
}

#pun-viewtopic .postlink {
  order: 3
}

.subscribelink {
  order: 1
}

#post-form {
  margin-top: 10px;
}

#post-form h2 {
 display: none
}

#form-buttons {
  margin-bottom: 10px
}

#tags {
  position: relative
}

#tags > div {
  top: 10px !important;
}

textarea {
  padding: 15px;
  height: 200px;
  width: 100% !important;
}

#pun-admain1 textarea {
  height: auto
}

#profile p.formsubmit {
  margin-top: 20px
}

#post-form p.formsubmit {
  margin-top: 0
}

p.formsubmit {
  margin-top: 10px;
  text-align: center
}

input[type="button"], .button {
  cursor: pointer
}

.button + .button {
 margin-left: 20px;
}

.fs-box.inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 10px
}

.fs-box p.infofield {
  width: 100%;
  margin: 20px 0 10px 0;
/* font-size: 13px */
}


.fs-box p {
  flex: auto;
}

.fs-box p.inputfield label, .fs-box p.selectfield label {
  margin-bottom: 5px;
  display: inline-block;
}

p.inputfield input, p.selectfield select {
  width: 100%
}

.usertable {
  margin-top: 20px
}

.usertable td {
  padding: 10px 0
}

#viewprofile-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

#viewprofile-next #profilenav {
  display: none
}

#viewprofile-next tr {
  vertical-align: top
}

#profile-left li + li {
  margin-top: 15px;
}

#profile-right {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: auto !important;
}

#profile-right li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: auto;
  text-align: center;
  padding: 5px 10px;
  font-size: 11px
}

li#pa-gifts {
  display: none
}

#profile-right li strong {
  flex: auto;
  font-weight: normal;
  padding: 0 !important;
}

#pa-posts {
  width: 100%;
  order: -1
}

#profilenav {
  float: left;
  width: 180px;
  margin-top: 0px;
  margin-left: -180px
}

#profilenav ul {
  margin-left: 20px
}

#profilenav li + li {
  margin-top: 5px
}

#profile .container {
  padding-left: 180px
}

#profile fieldset + fieldset, #messages  {
  margin-top: 25px
}

#profile p + p {
  margin-top: 10px !important;
}

#profile .datafield {
  margin-top: 5px
}

#profile input {
  width: auto;
  margin-right: 10px
}

#profile input[id^="fld"] {
  width: 100%;
}

#pun-messages .messages-container {
  display: flex;
  flex-wrap: wrap
}

#pun-messages #profile .container {
  padding-left: 28px
}

#pun-messages #profilenav {
  float: none;
  width: 100%;
  margin: 0;
  padding: 15px;
  display: grid; 
  grid-template-columns: auto 2fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 10px 15px; 
  align-items: center
}

#pun #pun-messages #profilenav h2 {
  display: inline-flex !important;
  text-transform: uppercase;
  padding: 5px 15px !important;
  margin: 0 !important;
  text-align: center;
  justify-content: center
}

#pun-messages #profilenav ul {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  gap: 15px
}

#pun-messages #profilenav li {
  padding: 6px 10px
}

#pun-messages #profilenav li.isactive {
  font-weight: bold
}

#pun-messages #profilenav li + li {
  margin: 0;
}

#pun .checkfield input[type="checkbox"], #pun .radiofield input[type="radio"] {
  width: auto;
  margin: 5px 10px 5px 0px;
}


input[type="checkbox"] {
    appearance: none;
    padding: 6px !important;
    cursor: pointer;
    transition: all .4s ease-in-out 0s;
}

input[type="radio"] {
  border-radius: 100%;
    appearance: none;
    padding: 5px !important;
    cursor: pointer;
    transition: all .4s ease-in-out 0s 
}

p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: auto;
  }

p#email input {
  margin-bottom: 10px
}

#profile fieldset legend {
  display: block;
}

#profile .container:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
}

#profile.formal {
  margin-top: 15px
}

#profile .container {
  margin-bottom: 20px;
}

#profile fieldset {
  border: 1px solid var(--base-text);
  padding: 15px
}

#profile fieldset legend {
  padding: 0 15px
}

#profile fieldset p {
  margin: 5px 0
}

#profile .avatardemo {
  margin-left: 20px
}

form#register .fs-box {
  margin-top: 20px
}

form#register p.infofield {
  margin-top: 10px
}

input#username, input#token {
  width: 19em
}

input, select {
  padding: 3px 5px;
  font-size: 11px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center
}

select {
  min-height: 24px
}

#profile select {
  width: auto
}


input + input, select + select {
  margin-top: 10px;
}

#ctl_tzselect, #ctl_regselect {
  width: auto
}

#pun-messages #profilenav h2 {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}


.clearer {
  display: none
}

#pun .post-content td {
  border-width:0px !important; 
  border-style:solid !important; 
  padding:0em !important; 
  overflow: visible
}

.post-content p {
  margin: 0;
  padding: 0 0 1.5em 0;
  line-height: 150%;
 font-family: 'Verdana', sans-serif; 
}

b {
  font-weight: 600
}


pre {
     white-space: pre-wrap;      
     white-space: -moz-pre-wrap;  
     white-space: -pre-wrap;      
     white-space: -o-pre-wrap;    
     word-wrap: break-word;  
}

.scrollbox {
  overflow: auto;
  height: auto
}

table.container td {
  padding: 10px 0px;
  border-bottom: 1px solid var(--brd-forum)
}

.forum_name {
  margin-top: 20px
}

.pl-select.checkfield, span.radio {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end
}

span.radio {
  gap: 5px;
  justify-content: flex-start
}

span.radio + br {
  display: none
}

#pun-respect .main .container {
  margin-bottom: 20px
}

.inner.post_reputation h1 {
  color: var(--base-text)
}

.post-content abbr {text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: #555}

#BookmCntToggle {margin-top: 1px !important;}
#MyBookmarks {  background: var(--base-bg3);
  box-shadow: 0 0 0 1px var(--brd-d) inset, 0 0 0 2px var(--brd-dy) inset, var(--bx-sdw), 0 0 0 1px var(--brd-b) !important;
  border: 1px solid var(--brd-y) !important;
  text-shadow: none;
  color: var(--base-text2);
  padding: 10px 20px 10px 20px;
  box-sizing: border-box;
  width: 280px !important;
}
#MyBookmarks inner {
  padding-top: 40px !important;
}
#MyBookmarks a {
  color: var(--base-link2)
}
#MyBookmarks a:hover {
  color: var(--base-text2)
}
#BookmCntToggle.default-style {background: var(--base-bg3) !important;
border-radius:2px;
box-shadow: 2px 2px 1px #000;
opacity: .95;
}
#MyBookmarks h2 {
  margin: 0 !important;
  padding: 10px 0 !important;
}
.post .bookmark {color: var(--base-link2) !important;} 
#BookmCntToggle.default-style {color: var(--base-link2) !important;} 

#BookmCntToggle {
	top: 10px;
	left: 40px !important;
}

#MyBookmarks {
  z-index: 999 !important;
}

#guest.pa-online {display: none}

#imageupload-left input[type=button] {width:auto !important}

.forum td {
  margin: 15px 0 !important;
}

#pun .user-avatar {
  margin-right: 20px !important;
}

#form-buttons {
	margin-bottom: 6px;
	margin-top: 10px
}

#form-buttons td img {
	position: relative
}

#form-buttons td {
	transition: all .5s ease-in-out 0s;
	color: var(--base-text)
}

#form-buttons td:hover {
	color: var(--base-link);
}


#button-font,
#button-size,
#button-bold,
#button-italic,
#button-underline,
#button-strike,
#button-indent,
#button-left,
#button-center,
#button-right,
#floatbut,
#button-link,
#button-spoiler,
#button-image,
#button-video,
#button-hide,
#button-quote,
#button-code,
#button-color,
#button-table,
#button-smile,
#button-keyboard,
#button-addition,
#button-mask {
	position: relative !important;
	background: none !important;
}

#button-font:before,
#button-size:before,
#button-bold:before,
#button-italic:before,
#button-underline:before,
#button-strike:before,
#button-indent:before,
#button-left:before,
#button-center:before,
#button-right:before,
#floatbut:before,
#button-link:before,
#button-spoiler:before,
#button-image:before,
#button-video:before,
#button-hide:before,
#button-quote:before,
#button-code:before,
#button-color:before,
#button-table:before,
#button-smile:before,
#button-keyboard:before,
#button-addition:before,
#button-mask:before {
	content: "";
	height: 26px;
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	font-family: icon3;
	text-align: center;
	font-size: 15px;
	line-height: 26px;
	z-index: 0
}

#button-font:before {
	content: "\f031"
}

#button-size:before {
	content: "\f034"
}

#button-bold:before {
	content: "\f032"
}

#button-italic:before {
	content: "\f033"
}

#button-underline:before {
	content: "\f0cd";
	top: 1px
}

#button-strike:before {
	content: "\f0cc"
}

#button-indent:before {
	content: "\f03c"
}

#button-left:before {
	content: "\f036"
}

#button-center:before {
	content: "\f037"
}

#button-right:before {
	content: "\f038"
}

#floatbut:before {
	content: "\f03b"
}

#button-link:before {
	content: "\f0c1"
}

#button-spoiler:before {
	content: "\f070";
	font-size: 17px
}

#button-image:before {
	content: "\f03e";
	font-size: 18px
}

#button-video:before {
	content: "\f167";
	font-family: icon2;
	font-size: 18px;
	top: 0px
}

#button-hide:before {
	content: "\f023"
}

#button-quote:before {
	content: "\f10e"
}

#button-code:before {
	content: "\f121";
}

#button-color:before {
	content: "\f576"
}

#button-table:before {
	content: "\f0ce"
}

#button-smile:before {
	content: "\f118"
}

td#button-files_rusff,
td#button-graffiti_rusff {
	display: none !important;
}

#button-keyboard:before {
	content: "\f11c";
	font-size: 16px
}

#button-addition:before {
	content: "\f0fe"
}

#button-mask:before {
	content: "\f630"
}

#pun-admain .adlabel {
  width: 18em !important;
}


#quenta {
  margin: 0px auto 20px auto;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.q_info {
    background: var(--base-bg3);
  border: 1px solid var(--borders-gray);
  padding: 20px;
    flex: 410px
}

.q_info b:first-child {
  display: block;
  color: #444;
  font: 700 15px inter;
  text-transform: uppercase;
  text-align: center;
  margin-top: -5px;
  margin-bottom: 5px
}

.q_info {
  font: 500 9px 'inter';
  color: #444;
  text-align: center;
  text-transform: uppercase
}

.q_info span {
  display: block;
  background: rgba(0,0,0,.05);
  font: 400 11px inter;
  text-align: center;
  padding: 2px 0;
  color: #555;
  margin: 13px 0
}

.q_info div {
  font: 400 11px/16px 'inter';
  text-transform: none;
  text-align: justify;
  overflow-y: auto;
  height: 50px;
  padding-right: 5px;
}

.q_info + .q_fc {
  margin-left: 20px;
}

.q_fc {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
    padding-right: 2px;
  flex: 1
}

.q_fc img {
  border: 2px solid var(--borders);
  height: 130px;
  width: 260px;
  object-fit: cover;
}

.q_fc span {
  display: block;
  background: rgba(0,0,0,.05);
  font: 400 12px inter;
  text-align: center;
  padding: 4px 0;
  color: #555;
  flex: 1;
}

.q_life {
  margin: 0px auto 20px auto;
  position: relative;
    background: var(--base-bg3);
  border: 1px solid var(--borders-gray);
  padding: 20px;
  font: normal 10px/16px 'inter'
}



.tabs {
  width: auto;
	padding: 0px;
	margin: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-bottom: 30px
}

.tabs>section {
	display: none;
    background: var(--base-bg3);
  border: 1px solid var(--borders-gray);
  padding: 20px;
  width: 100%;
  margin-top: 10px;
  line-height: 150%;
}
.tabs>section div span {
  display: block;
  margin: 0 5px 15px 2px
}
.tabs>section>div {
	animation-duration: 2s;
	animation-name: Grayscale;
  padding-right: 15px;
  overflow-y: auto;
 max-height: 610px;
 min-height: 400px
}
 
@keyframes Grayscale{
	from {
		filter: grayscale(100%);
	}
	to {
		filter: grayscale(0%);
	}
}
.tabs>input {
	display: none;
	position: absolute;
}


.tabs>label {
	display: block;
	padding: 5px 25px;
	text-align: center;
    background: var(--base-bg3);
  border: 1px solid var(--borders);
  color: var(--base-text) !important;
  border-radius: 1px;
  font: 400 11px inter;
  text-transform: uppercase;
  transition: all .3s cubic-bezier(.64,.51,.55,1.66) 0s;
}
.tabs>label:hover {
	cursor: pointer;
    background: var(--i-stik);
  border: 1px solid var(--i-stik-b); 
  color: var(--base-bg3) !important;
}

.tabs>input:checked+label {
  background: var(--i-stik);
  border: 1px solid var(--i-stik-b); 
  color: var(--base-bg3) !important;
}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4,
#tab5:checked~#content-tab5,
#tab6:checked~#content-tab6 {
	display: block;
}

.needperson {
  display: flex;
  justify-content: space-between;
}

.needperson + .needperson {
  margin-top: 15px
}

.needperson img {
  width: 100px;
  height: 100px;
  border: 2px solid var(--borders);
  margin-right: 10px;
  margin-top: 0px
}

#pun .needperson p {
  padding: 15px !important;
    background: var(--base-bg3);
  border: 1px solid var(--borders);
  font: 500 10px/150% 'inter' !important
}


.needperson p big {
  font-weight: 800;
  font-size: 14px;
  display: block;
  font-family: inter;
  margin-bottom: 5px !important;
  margin-top: -2px !important;

}

.roles {
  width: auto;
	padding: 0px;
	margin: 10px 10px;
margin-top: -10px;
  margin-bottom: 20px;
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  align-items: flex-end
}


.roleblock {
    background: var(--base-bg3);
  border: 1px solid var(--borders);
  width: 265px;
  padding: 10px;
  height: 220px
}
.roleblock + .roleblock {
  margin-top: 15px
}

.roleblock h5 {
  text-align: center;
  display: block;
  color: #444;
  font: 700 13px 'inter';
  text-transform: uppercase;
  margin-top: 0px;
  margin-bottom: 10px;
    background: var(--base-bg2);
  border: 1px solid var(--borders-gray);
  padding: 5px 0;
}

.roleblock div {
  overflow-y: auto;
  padding-right: 5px;
  margin: 0 2px;
  height: 160px;
}

.roleblock span {
  font: 700 13px 'inter';
  color: #555;
  margin-right: 5px !important;
  display: inline-block;
  position: relative;
  cursor: default;
}

.roleblock br {
  margin: 2px 0
}

#tem-title {background: var(--base-bg3);
  border: 1px solid var(--borders-gray);
  font-family: inter;;
      font-weight: 800;
  font-size: 1.4em;
  text-align: center;
  padding: 6px 0;
}

#tem-title-light {    border: 3px double var(--borders-gray);
    border-radius: 2px;
      background: var(--base-bg3);
  font-family: inter;
    font-weight: 600;
  font-size: 1.4em;
  text-align: center;
  padding: 6px 0;
}



.roles1 {   display: grid;
   grid-template-columns: 280px 1fr;
margin: 10px 0;
  padding: 10px;
transition: all 0.4s ease-in-out 0s;
  width: 700px;
}


.roles1:hover {
  background: var(--base-bg3);
  box-shadow: 0 0 0 1px var(--borders) inset
}

.roles1 div:first-child {  display: flex;
  align-items: center;}

.roles1 div:last-child {border-left: 2px solid var(--borders);
}

.roles1 div {    color: #444;
font-family: inter;
font-weight: 500;
font-size: 11px;
padding: 10px;
}

.roles1 span {font-weight: 700;
font-size: 18px;
  font-family: inter
}

.roles1 span sm {font-weight: 500;
font-size: 10px;
display: block;
  font-family: inter;
margin-top: 0px;}

.roles1 div a {display: block}

.html-post-box {
  padding-bottom: 0 !important;
  margin-bottom: -10px !important;
}

.need_pic {
  width: 550px;
  margin: 15px auto;
  position: relative;
    border: 3px solid #292929;
  line-height: 0 !important;
}

.need_pic p {
  padding: 0 !important;
  line-height: 0;
}

.need_pic img {
margin: 0 !important;
}

.need_name {
  position: absolute;
  right: -3px;
  background: #292929;
  font: 600 17px inter;
  text-transform: uppercase;
  color: #c8c8c8;
  padding: 20px 15px !important;
  top: 130px
}

.need_intro {
  margin: auto;
  width: 550px;
  background: var(--base-bg3);
  border:  1px solid var(--borders);
  padding: 6px 10px;
  margin-bottom: 13px;
    text-transform: uppercase;
      display: flex;
  justify-content: space-between;
}

.need_intro p {
  padding: 4px !important;
  font: normal 10px 'inter' !important;
}

.need_intro_cont {
  width: 300px;
}

.need_intro_cont:last-child {
  border-left: 1px solid var(--borders);
  text-align: right;
}

.need_intro:last-child {
  text-transform: none !important;
}
.need_intro:last-child p {
  font-size: 11px !important;
}

.need_intro_scroll {
  overflow-y: auto;
  max-height: 100px;
    display: flex;
  justify-content: space-between;
  padding-right: 0px;
      text-transform: none !important;
}

.need_text {
  background: var(--base-bg3);
  border:  1px solid var(--borders-gray);
    margin: auto;
  width: 550px;
  padding: 10px 15px;
  margin-bottom: 13px
}

.need_text p {
  font: normal 11px 'inter' !important;
}

.need_text p:last-child {
  padding: 0 !important;
}


.need_tocall {
  margin: auto;
  width: 550px;
  background: var(--base-bg3);
  border:  1px solid var(--borders);
  padding: 6px 10px;
  margin-bottom: 13px;
    text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px
}

.need_tocall p {
  padding: 0 !important;
  font: normal 10px 'inter' !important;
}