@import url('night.css');
@import url('fonts/poppins/poppins.css');
:root {
  --background-color: #eee; 
  --form-select-color: #edf8ff;
  --main-color: #333;
  --link-color: #2480db;
  --intense-blue-color: #1a87ff;
  --light-blue-color: #f1f9ff;
  --warn-color: #fff9df;
  --highlight: #ffa;
  --body-color: #fff;
  --button-color: #ddd;
  --black: #000;
  --gray-333: #333;
  --gray-555: #555;
  --gray-888: #888;
  --gray-aaa: #aaa;
  --gray-bbb: #bbb;
  --gray-ccc: #ccc;
  --gray-ddd: #ddd;
  --gray-eee: #eee;
  --gray-f2f2f2: #f2f2f2;
  --gray-f8f8f8: #f8f8f8;
  --white: #fff;
}
[contenteditable=true] {outline: none;}
[contenteditable=true]:empty:before {content: attr(placeholder); display: block; color: #888; color: var(--gray-888); cursor: text;}
a {color: #2480db; color: var(--link-color);}
a:hover {text-decoration: none;}
a.opaque {text-decoration: none;}
a.opaque:hover {text-decoration: underline;}
html, body {background-color: #eee; background-color: var(--background-color); color: #000; color: var(--black); margin: 0; padding: 0; font-family: Arial; font-size: 10pt;}
body div, body span, body a, body img, body form, body form input, body h1, body h2, body h3, body table td, body table th {background-repeat: no-repeat;}
input, textarea, select {outline: none; resize: none; font-family: Arial; box-sizing: border-box;}
input:not([type=button]), select, textarea {font-family: Poppins,Arial; padding: 5px 10px; border: 1px solid #bbb; border-color: var(--gray-bbb); letter-spacing: 1px; transition: all 0.5s ease; background-color: var(--white);}
input:not([type=button]):hover, select:hover, textarea:hover {border-color: #888; border-color: var(--gray-888);}
input:not([type=button]):focus, select:focus, textarea:focus {border-color: var(--link-color); background-color: var(--form-select-color);}

aside {width: 200px; min-width: 200px; flex: 0 0 auto;}
aside .box {margin: 0 0 30px 20px; border: 1px solid #aaa; border-color: var(--gray-aaa); border-radius: 5px; overflow: hidden;}
aside .box .content {background-color: #fff; background-color: var(--white); padding: 10px 5px; font-family: Poppins, Arial;}
aside .box .content a.clickableimg {display: block; height: 80px; background-position: center; background-size: cover; margin-bottom: 10px;}
aside .box .header {padding: 5px; font-family: Poppins, Arial; font-size: 11pt; color: #fff; color: var(--white); background-color: #aaa; background-color: var(--gray-aaa);}
aside .box .badges {text-align: center;}
aside .box .badges > div {display: inline-block; width: 50px; height: 50px; background-position: center; background-size: 48px; margin: 5px;}
aside .box .karmabar {background-color: #eee; background-color: var(--gray-eee); clear: both; height: 6px; overflow: hidden; margin: 5px 0; position: relative;}
aside .box .karmabar > div {background-color: #2480db; background-color: var(--link-color); position: absolute; height: 100%;}
aside .box .forms {margin: 0 0 5px 0; padding: 5px 5px 5px 45px; background-position: 5px center; background-size: 30px auto; font-family: Arial;}
aside .box .forms.big {background-image: url('img/icons/profile/form.svg');}
aside .box .forms.dogplay {background-image: url('img/icons/profile/form_dogplay.svg');}
aside .box .forms.personal {background-image: url('img/icons/profile/form_personal.svg');}
aside .box .forms.spanking {background-image: url('img/icons/profile/form_spanking.svg');}
aside .box .forms a {font-weight: bold; overflow: hidden; height: 16px; display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
aside .box .forms span {display: block; color: #888; color: var(--gray-888); overflow: hidden; height: 16px;}
aside .dating {margin-left: 15px;}
aside .dating h3, aside .meetings h3 {font-family: Poppins,Arial; font-size: 14pt; color: #333; color: var(--gray-333); margin-top: 20px;}
aside .dating .group {margin: 0 0 25px 10px;}
aside .dating .group .checkbox-contain .img {padding: 5px 0 5px 30px; background-size: auto 20px; background-position: 5px;}
aside .dating .group .moreOpt {display: none;}
aside .dating .group .moreOptA {text-align: right;}
aside .dating .group .title {font-family: Poppins, Arial; margin: 0 0 10px -10px; font-weight: bold; color: #333; color: var(--gray-333);}
aside .dating .onlyvipinfo {margin-bottom: 10px; padding-left: 22px; background-image: url('img/icons/filter/alert.svg'); background-position: left; background-size: 12px;}
aside .dating .savedfilter {font-family: Poppins, Arial; margin: 5px 0 5px 10px;}
aside .dating .savedfilter .delete {display: inline-block; float: right; margin-left: 10px; width: 12px; height: 12px; background-image: url('img/icons/filter/delete.svg'); background-size: contain; position: relative; top: 2px;}
aside .dating .savedfilter .name {display: inline-block; max-width: calc(100% - 25px); white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
aside > .group {border: 1px solid #aaa; border-color: var(--gray-aaa); border-radius: 0 5px 5px 0; border-left: 0; margin-bottom: 30px; font-family: Poppins, Arial;}
aside > .group a {color: #555; color: var(--gray-555); text-decoration: none; padding: 5px 15px; display: block;}
aside > .group a:hover {color: #000; color: var(--black); text-decoration: underline;}
aside > .group a.sel {color: #2480db; color: var(--link-color); background-color: #fff; background-color: var(--white); border-bottom: 1px solid #2480db; border-top: 1px solid #2480db; border-top-color: var(--link-color); border-bottom-color: var(--link-color); text-decoration: none;}
aside > .group .header {background-color: #aaa; background-color: var(--gray-aaa); color: #fff; color: var(--white); padding: 5px 10px; font-size: 11pt;}
aside > .group .header span {background-position: center; display: block; float: left; width: 24px; height: 24px; margin-right: 10px; background-size: contain; position: relative; top: -2px; left: -2px;}
aside .meeting {margin-top: 100px;}
aside .meeting .info {background-size: 25px auto; background-position: 10px 12px; padding-left: 45px; margin-bottom: 10px; background-color: #fff; background-color: var(--white); border: 1px solid #fff; border-color: var(--white); border-left: 0; border-radius: 0 5px 5px 0; box-shadow: 0 0 5px #ccc; font-family: Poppins, Arial; line-height: 1.2;}
aside .meeting .info .main {font-size: 14pt; text-align: center; font-weight: bold; padding: 5px 0;}
aside .meeting .info .main.region {background-size: auto 40px; padding-top: 50px; background-position: center 10px; font-size: 11pt;}
aside .meeting .info .sub {text-align: center; padding-bottom: 5px;}
aside .meeting .info .thin {font-weight: normal; margin-left: 8px;}
aside .meeting .info .title {font-size: 9pt; padding-top: 5px;}
aside .meetings h3, aside .meetings div {margin-left: 15px;}
aside .meetings .info {background-image: url('img/icons/meetings/info.svg'); background-size: auto 30px; background-position: left top; padding-left: 40px; margin-bottom: 25px;}
aside .meetings .my {background-color: #fff; background-color: var(--white); padding-left: 15px; margin-bottom: 15px;}
aside .meetings .my td {border-bottom: 2px solid var(--background-color); vertical-align: top; height: 30px;}
aside .meetings .my td:first-of-type {font-size: 9pt; width: 35px; max-width: 35px;}
aside .meetings .my tr:last-of-type td {border-bottom: 0;}
aside .meetings .my .date {padding: 0; margin: 0; font-size: 11pt;}
aside .meetings .my .nothing {font-style: italic; color: #ccc; color: var(--gray-ccc);}
aside .meetings .upcoming a {display: inline-block; max-width: 70%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; float: left; clear: both;}
aside .meetings .upcoming .time {color: #555; color: var(--gray-555); float: right; display: inline-block; max-width: 30%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
aside .meetingsettings a {padding: 5px 0 5px 25px; background-size: 16px; background-position: left; display: inline-block;}
aside .menu {border-radius: 0 5px 5px 0; box-shadow: 1px 1px 3px #ccc;}
aside .menu a {background-color: #fff; background-color: var(--white); display: block; border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); border-right: 1px solid #ccc; border-right-color: var(--gray-ccc); padding: 8px 15px; color: #555; color: var(--gray-555); text-decoration: none; font-family: Poppins, Arial; height: 38px; box-sizing: border-box;}
aside .menu a:first-of-type {border-top: 1px solid #ccc; border-top-color: var(--gray-ccc); border-radius: 0 5px 0 0;}
aside .menu a:last-of-type {border-radius: 0 0 5px 0;}
aside .menu a:hover {color: #000; color: var(--black);}
aside .menu a.sel {position: relative; z-index: 2; font-weight: bold; color: var(--link-color);}
aside .menu a.sel:after {content: ''; position: absolute; border-style: solid; border-width: 6px 0 6px 5px; border-color: transparent #fff; display: block; width: 0; z-index: 1; left: 3px; top: 12px;}
aside .menu a.sel:before{content: ''; position: absolute; border-style: solid; border-width: 6px 0 6px 5px; border-color: transparent #888; display: block; width: 0; z-index: 0; left: 4px; top: 12px;}
aside .menu a.disabled {color: #ccc; color: var(--gray-ccc); cursor: default;}
aside .newtopics {margin: 20px 0 40px 20px; background-image: url('img/icons/main/discussions.svg'); padding-left: 50px; background-position: 5px center; background-size: auto 30px; min-height: 30px;}
aside .topusers {margin-left: 20px;}
aside .topusers .buyTop {border: 1px solid #f5871e; background-color: var(--white); text-align: center; padding: 5px 10px; width: 100%; box-sizing: border-box; cursor: pointer; border-radius: 5px; margin: 35px 0 50px 0;}
aside .topusers .buyTop:hover {background-color: var(--white); box-shadow: 0 0 10px #f5871e;}
aside .topusers .buyTop:before {content: ''; display: block; position: relative; left: -10px; top: -20px; width: 30px; height: 30px; margin-bottom: -30px; background-image: url('img/icons/aside/wreath.svg'); background-size: contain;}
aside .topusers .user {border: 2px solid #f5871e; text-decoration: none; color: var(--black); border-radius: 5px; background-color: var(--white); padding: 5px; width: 100%; display: block; margin: 45px 0 15px 0; height: 100px; box-sizing: border-box;}
aside .topusers .user .name {font-size: 14pt; font-weight: bold; text-align: center; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
aside .topusers .user .title {color: var(--gray-333); font-weight: bold; text-align: center; font-family: Poppins, Arial;}
aside .topusers .user .wreath {width: 100%; height: 65px; background-image: url('img/icons/aside/wreath.svg'); display: grid; background-size: contain; background-position: center; position: relative; top: -35px; margin-bottom: -30px;}
aside .topusers .user .wreath > span {width: 45px; height: 45px; border-radius: 50%; display: block; background-position: center; background-size: cover; align-self: center; justify-self: center;}
aside .userinfo .arrow {position: relative; background: #fff; border: 1px solid #fff; border-color: var(--white); width: 1px; margin: 130px 0 -130px -2px; z-index: 3;}
aside .userinfo .arrow:after, aside .userinfo .arrow:before {left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
aside .userinfo .arrow:after {border-color: rgba(255, 255, 255, 0); border-left-color: #fff; border-left-color: var(--white); border-width: 10px; margin-top: -10px;}
aside .userinfo .arrow:before {border-color: rgba(204, 204, 204, 0); border-left-color: #ccc; border-left-color: var(--gray-ccc); border-width: 11px; margin-top: -11px;}
aside .userinfo .bio {width: 100%; display: table; table-layout: fixed; margin-top: 30px; border: 0;}
aside .userinfo .bio .tr {display: table-row;}
aside .userinfo .bio .td, aside .userinfo .bio .th {display: table-cell; border-bottom: 1px dotted #ccc; border-bottom-color: var(--gray-ccc); padding: 5px; font-family: Poppins, Arial; font-size: 12.5pt; height: 40px; box-sizing: border-box;}
aside .userinfo .bio .tr:last-of-type .td, aside .userinfo .bio .tr:last-of-type .th {border-bottom: 0;}
aside .userinfo .bio .td > div {max-height: 50px; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical;}
aside .userinfo .bio .th {width: 40px; background-size: 25px; background-position: center;} 
aside .userinfo .biodiv {margin-left: 20px;}
aside .userinfo .buttons {margin-left: 20px;}
aside .userinfo .buttons a {display: block; text-decoration: none; border: 1px solid #ccc; border-color: var(--gray-ccc); color: #333; color: var(--gray-333); border-radius: 100px; padding: 5px; margin-bottom: 10px; text-align: center; transition: all 0.3s ease; background-color: #fff; background-color: var(--white);}
aside .userinfo .buttons a:hover {border-color: var(--link-color); color: #000; color: var(--black);}
aside .userinfo .name {text-align: center; margin: 0 0 30px 20px;}
aside .userinfo .name a {color: #333; color: var(--gray-333); font-size: 16pt; font-family: Poppins, Arial;}
aside .userinfo .photo {width: 150px; height: 150px; border-radius: 50%; background-position: center; background-size: cover; border: 2px solid #fff; border-color: var(--white); background-color: #888; background-color: var(--gray-888); margin: 50px auto 30px auto; position: relative; left: 10px;}
aside .usersonline, aside .cart, aside .hide_me, aside .newvisits {padding-left: 50px; margin: 20px 0 20px 20px; background-position: left center; background-image: url('img/icons/users/group.svg'); background-size: 36px; line-height: 1.5;}
aside .usersonline a, aside .newtopics a, aside .cart a, aside .newvisits a {color: #555; color: var(--gray-555);}
aside .usersonline a:hover, aside .newtopics a:hover, aside .cart a:hover, aside .newvisits a:hover {color: #000; color: var(--black);}
aside .cart {background-image: url('img/icons/market/cart.svg');}
aside .hide_me {background-image: url('img/icons/main/hide.svg'); background-repeat: no-repeat; border: 1px solid var(--gray-ccc); background-color: var(--white); border-radius: 3px; cursor: pointer; display: block; line-height: 1.2; padding-top: 5px; padding-bottom: 5px;}
aside .hide_me input {float: right; position: relative; top: -2px; margin-left: 10px; left: -2px;}
aside .newvisits {background-image: url('img/icons/main/visitors.svg'); margin-top: -20px; line-height: 1.2; background-size: 26px; background-position: 5px;}
#body {display: flex; width: 1040px; margin: auto auto; transform: scale(1); transition: all 0.3s; position: relative; z-index: 3; padding-top: 45px;}
#body > .main {flex: 1 1 auto; min-width: 20px; background-color: #fff; background-color: var(--body-color); display: block; box-shadow: 0 0 5px #ccc; position: relative; z-index: 1; padding: 15px 25px;}
#body, #body > * {transition: background-color 0.5s ease;}
#body.scale {transform: scale(1.5); opacity: 0;}
#bodyprogress {position: fixed; top: 45px; left: 0; height: 2px; background-color: #1a87ff; background-color: var(--intense-blue-color); box-shadow: 0 0 6px var(--intense-blue-color); z-index: 9; width: 10%;}
#copybody {display: flex; width: 1040px; margin: auto auto; position: absolute; top: 45px; left: 50%; margin-left: -520px; opacity: 0.3;}
h1, h2, h3 {font-family: Poppins, Arial; font-size: 26pt; font-weight: normal; color: #333; color: var(--gray-333); margin: 0 0 20px 0; padding: 0;}
h1:after {content: ''; display: block; clear: both;}
h2 {font-size: 16pt; margin-bottom: 10px;}
h2.blue {color: #2480db; color: var(--link-color);}
h3 {font-size: 14pt; margin-bottom: 10px;}
footer {text-align: center; color: #555; color: var(--gray-555); text-shadow: 1px 1px #fff; margin: 20px; font-family: Poppins, Arial; line-height: 1.5;}
footer a {color: #555; color: var(--gray-555); margin: 0 10px;}
header {height: 45px; background-color: #333; background-color: var(--main-color); position: fixed; z-index: 10; width: 100%;}
header > .content {width: 1040px; margin: auto auto; display: flex; justify-content: space-between; position: relative;}
header > .content a.toHome {display: block; float: left; width: 160px; height: 45px; background-image: url('img/logonobk.svg'); background-size: contain; background-position: left 3px;}
header > .content .right {float: right; width: 160px; text-align: right;}
header > .content .right .user {border: 1px solid #333; border-color: var(--main-color); display: inline-block; width: 40px; height: 40px; border-radius: 5px; background-position: center; background-size: cover; margin-top: 1px;}
header > .content .sections {float: left; flex: 1; text-align: center;}
header > .content .sections a {overflow: hidden; position: relative; display: inline-block; width: 40px; height: 34px; border: 1px solid #333; border: 1px solid var(--main-color); border-bottom: 0; background-color: #333; background-color: var(--main-color); text-decoration: none; margin: 10px 2px 0 3px;}
header > .content .sections a:before {content: ''; display: block; background-image: url('img/topmenu.svg'); background-repeat: no-repeat; width: 24px; height: 24px; margin: 5px 8px;}
header > .content .sections a:after {content: ''; display: block; background-color: #333; background-color: var(--main-color); width: 100%; height: 3px; margin-top: -3px;}
header > .content .sections a:hover:after {background-color: #333; background-color: var(--main-color);}
header > .content .sections a.sel {background-color: #fff; background-color: var(--white); border-radius: 5px 5px 0 0 ;}
header > .content .sections a.sel:after {background-color: #fff; background-color: var(--white);}
header > .content .sections a.catalog:before {background-position: -72px 0;}
header > .content .sections a.catalog.sel:before {background-position: -72px -24px;}
header > .content .sections a.home:before {background-position: 0 0;}
header > .content .sections a.home.sel:before {background-position: 0 -24px;}
header > .content .sections a.market:before {background-position: -96px 0;}
header > .content .sections a.market.sel:before {background-position: -96px -24px;}
header > .content .sections a.msg:before {background-position: -120px 0;}
header > .content .sections a.msg.sel:before {background-position: -120px -24px;}
header > .content .sections a.user:before {background-position: -24px 0;}
header > .content .sections a.user.sel:before {background-position: -24px -24px;}
header > .content .sections a.vip:before {background-position: -48px 0;}
header > .content .sections a.vip.sel:before {background-position: -48px -24px;}
header > .content .sections a span {position: absolute; bottom: 3px; right: 0; background-color: #f00; color: #fff; color: var(--white); font-family: Poppins, Arial; font-size: 7pt; border: 1px solid #f00; border-radius: 3px; display: block; width: 16px; height: 14px; text-align: center;}
header > .content .sections a.sel span {display: none;}
.menuunderheader {position: fixed; width: 100%; z-index: 9;}
.menuunderheader .container {width: 1040px; margin: auto auto; background-color: #f00; position: relative;}
.menuunderheader .usermenu {display: none; position: absolute; top: 45px; right: 0; border: 1px solid #888; border-color: var(--gray-888); background-color: #fff; background-color: var(--white); box-shadow: 0 0 10px var(--main-color); z-index: 9; width: 250px; border-radius: 0 0 5px 5px; font-family: Poppins, Arial; overflow: hidden;}
.menuunderheader .usermenu a.user {text-decoration: none; text-align: center; display: block; padding: 20px;}
.menuunderheader .usermenu a.user .img {border-radius: 50%; background-position: center; background-size: cover; display: block; width: 100px; height: 100px; margin: 0 auto 10px auto;}
.menuunderheader .usermenu a.user .name {font-size: 16pt; color: #555; color: var(--gray-555);}
.menuunderheader .usermenu .menu {background-color: #555; background-color: var(--gray-555); color: #fff; color: var(--white);}
.menuunderheader .usermenu .menu .item {padding: 8px 10px; margin: 0 10px; border-bottom: 1px solid #888; border-color: var(--gray-888); cursor: pointer;}
.menuunderheader .usermenu .menu .item:hover {text-decoration: underline;}
.menuunderheader .usermenu .menu .item:last-of-type {border-bottom: 0;}
.menuunderheader .usermenu .menu .item input[type='checkbox'] {height: 0; position: relative; border: 3px solid #f00; float: right;}
.menuunderheader .usermenu .menu .item input[type='checkbox']:after {content: ''; display: block; background-color: #888; width: 18px; height: 18px; position: absolute; right: 20px; top: -2px; border-radius: 50%; background-position: center; background-size: 12px; background-repeat: no-repeat; transition: all 0.5s ease;}
.menuunderheader .usermenu .menu .item input[type='checkbox']:checked:after {right: 0; background-color: #2ecc40;}
.menuunderheader .usermenu .menu .item input[type='checkbox']:before {content: ''; display: block; position: absolute; right: -1px; top: -3px; width: 40px; height: 20px; background-color: #333; border-radius: 100px;}
.menuunderheader .usermenu .menu .item input[type='checkbox'].nightmode:after {background-image: url('img/icons/header/sun.svg'); background-color: #ffdc00;}
.menuunderheader .usermenu .menu .item input[type='checkbox'].nightmode:checked:after {background-image: url('img/icons/header/moon.svg'); background-color: #0074d9;}
.menuunderheader .usermenu .vipno {background-color: var(--highlight); padding: 10px; text-align: center; cursor: help;}
nav {width: 200px; min-width: 200px; flex: 0 0 auto; padding-top: 10px; font-family: Poppins, Arial; position: relative; z-index: 2; transition: all 0.5s ease;}
nav .editMyMenu {margin: 0 10px 5px 0; text-align: right;}
nav .editMyMenu a {color: var(--gray-555); text-decoration: underline!important;}
nav .editMyMenu a:hover {text-decoration: none;}
nav .group {border: 1px solid #aaa; border-color: var(--gray-aaa); border-radius: 5px 0 0 5px; border-right: 0; margin-bottom: 30px; overflow: hidden;}
nav .group a {color: #555; color: var(--gray-555); text-decoration: none; padding: 5px 15px; display: block;}
nav .group a:hover {color: #000; color: var(--black); text-decoration: underline;}
nav .group a.new {background-image: url('/img/icons/menu/new.svg'); background-position: right 10px center; background-size: 16px;}
nav .group a.sel {color: #2480db; color: var(--link-color); background-color: #fff; background-color: var(--white); border-bottom: 1px solid #2480db; border-top: 1px solid #2480db; border-top-color: var(--link-color); border-bottom-color: var(--link-color); text-decoration: none;}
nav .group a.specific {background-image: url('/img/icons/menu/specific.svg'); background-position: right 10px center; background-size: 16px;}
nav .group a.premium {background-image: url('/img/icons/profile/premium.svg'); background-position: right 10px center; background-size: 16px;}
nav .group .header {background-color: #aaa; background-color: var(--gray-aaa); color: #fff; color: var(--white); padding: 5px 10px; font-size: 11pt;}
nav .group .header span {background-position: center; display: block; float: left; width: 24px; height: 24px; margin-right: 10px; background-size: contain; position: relative; top: -2px; left: -2px;}
nav.msgnav {width: 300px; height: 100%; display: grid; grid-template-rows: 30px 1fr; margin-top: -10px;}
nav .messages {background-color: #fff; background-color: var(--white); border-right: 1px solid #ddd; border-right-color: var(--gray-ddd); overflow: auto;}
nav .messages::-webkit-scrollbar {width: 6px;}
nav .messages::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #fff; background-color: var(--white);}
nav .messages:hover::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ddd; background-color: var(--gray-ddd);}
nav .messages .nomsg {text-align: center; padding-top: 80px; background-image: url('img/icons/pm/empty_mailbox.svg'); background-repeat: no-repeat; background-position: center 10px; background-size: auto 50px;}
nav .messages .recipient {padding: 10px; height: 60px; cursor: pointer;}
nav .messages .recipient:hover, nav .messages .recipient.sel {background-color: #eee; background-color: var(--gray-eee);}
nav .messages .recipient .att {background-image: url('img/icons/pm/attachment.svg'); float: right; width: 15px; margin-left: 15px; background-size: contain; background-position: center; height: 15px;}
nav .messages .recipient .date {float: right; color: #888; color: var(--gray-888); margin: 10px 0 0 10px;}
nav .messages .recipient .date .deleteConv {display: inline-block; width: 12px; height: 12px; background-image: url('img/icons/pm/delete.svg'); background-position: center; background-size: contain;}
nav .messages .recipient .img {float: left; width: 60px; height: 60px; border: 1px solid #fff; border-color: var(--white); border-radius: 100px; margin-right: 10px; background-position: center; background-size: cover;}
nav .messages .recipient .name {font-size: 11pt; height: 20px; overflow: hidden; color: #333; color: var(--gray-333); margin: 10px 0;}
nav .messages .recipient .name.not {font-weight: bold;}
nav .messages .recipient .preview {height: 18px; overflow: hidden; color: #aaa; color: var(--gray-aaa); text-overflow: ellipsis; white-space: nowrap;}
nav .messages .recipient .preview.not {color: #ccc; color: var(--gray-ccc); font-style: italic;}
nav .messages .recipient .preview img {height: 14px;}
nav .messages_filter {height: 28px; background-color: var(--gray-eee); border-bottom: 1px solid var(--gray-ddd); border-right: 1px solid var(--gray-ddd); overflow: hidden; display: grid; grid-template-columns: 1fr 30px;}
nav .messages_filter .buttons {height: 100%; text-align: center;}
nav .messages_filter .buttons > span {display: inline-block; border: 1px solid var(--gray-888); margin: 2px; border-radius: 2px; background-position: center; background-size: 20px; background-repeat: no-repeat; cursor: pointer; width: 22px; height: 22px;}
nav .messages_filter .buttons > span:hover {border-color: var(--gray-ccc);}
nav .messages_filter .buttons > span.sel {border-color: var(--link-color);}
nav .messages_filter .buttons .filter_unread {background-image: url('img/icons/pm/filter_unread.svg');}
nav .messages_filter label {cursor: pointer; padding-left: 30px; background-image: url('img/icons/pm/filter.svg'); background-position: 6px 7px; background-size: 16px; background-repeat: no-repeat;}
nav .messages_filter label input, nav .messages_filter label input:focus {border: 0; width: 100%; background-color: var(--gray-eee);}
nav .newNewsCount {font-size: 8pt; font-weight: bold; color: #ff4136; margin-left: 10px;}
nav .profile {border: 1px solid #aaa; border-color: var(--gray-aaa); margin: 0 10px 40px 0; border-radius: 100px; background-color: #f8f8f8; box-sizing: border-box; height: 38px; padding: 5px 5px 10px 40px; line-height: 2; position: relative; text-decoration: none; color: #555; color: var(--gray-555); display: block; overflow: hidden;}
nav .profile:hover {border-color: #333; border-color: var(--gray-333); background-color: #fff; background-color: var(--white);}
nav .profile span.img1 {display: block; width: 32px; height: 32px; border: 1px solid #fff; border-color: var(--white); border-radius: 50px; float: left; position: absolute; top: 1px; left: 1px; background-position: center; background-size: cover;}

.actioncenter .friendrequest {margin-top: 20px; height: 60px;}
.actioncenter .friendrequest:after {content: 'Vyžaduje tvoji pozornost'; display: inline-block; font-family: Poppins, Arial; font-size: 12pt; color: #f00; animation: slide_left 1s ease-in-out infinite; position: absolute; right: 30px; margin-top: -40px; background-image: url('img/icons/ac/red_arrow.svg'); background-position: left; background-size: contain; padding-left: 40px; background-repeat: no-repeat;}
.actioncenter .friendrequest a.name {font-weight: bold; margin-right: 5px; font-size: 11pt;}
.actioncenter .friendrequest .action {margin-top: 10px;}
.actioncenter .friendrequest .action .button {margin-right: 10px;}
.actioncenter .friendrequest .img {float: left; margin-right: 20px; width: 60px; height: 60px; border-radius: 60px; border-color: #fff; border-color: var(--white); background-size: cover; background-position: center;}
.actioncenter .matchmaker {margin-top: 30px;}
.actioncenter .matchmaker .content {display: flex; flex-wrap: wrap; position: relative; max-height: 200px; overflow: hidden;}
.actioncenter .matchmaker .content .match {border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; margin: 5px; flex: 1 1 300px; box-sizing: border-box; padding: 10px; position: relative; max-width: 49%;}
.actioncenter .matchmaker .content .match .action {margin-top: 20px; text-align: center;}
.actioncenter .matchmaker .content .match .action .button {margin: 0 5px; font-size: 9pt;}
.actioncenter .matchmaker .content .match .img {float: left; width: 100px; height: 100%; position: relative; background-size: cover; background-position: center; margin-right: 20px;}
.actioncenter .matchmaker .content .match .img img {position: absolute; bottom: 0; right: 0;}
.actioncenter .matchmaker .content .match .title {font-family: Poppins, Arial; font-size: 12pt; font-weight: bold; overflow: hidden; height: 27px;}
.actioncenter .matchmaker .content .match .subtitle {color: #555; color: var(--gray-555);}
.actioncenter .matchmaker .content .more {background-image:  linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); padding: 50px 20px 10px 0; text-align: right; position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box;}
.actioncenter .matchmaker .header .score {float: right;}
.actioncenter .new_notifications {display: none; padding: 12px 0 12px 50px; line-height: 1.5; background-image: url('img/icons/ac/notification.svg'); background-position: 10px; background-size: 30px; margin-top: 15px; border-top: 1px solid #e74c3c; border-bottom: 1px solid #e74c3c; background-color: var(--gray-eee);}
.actioncenter .notification {width: 100%; box-sizing: border-box; min-height: 55px; display: grid; grid-template-columns: 40px 1fr; grid-gap: 10px; background-color: var(--gray-f2f2f2); border: 1px solid var(--gray-ddd); margin-bottom: 5px; position: relative; border-left: 0; z-index: 2; padding: 5px 10px; border-radius: 0 20px 20px 0; align-items: center;}
.actioncenter .notification.unread {background-color: var(--white);}
.actioncenter .notification .icon {position: relative; box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45); border-radius: 50%; width: 40px; height: 40px; background-position: center; background-size: 60%;}
.actioncenter .notification .icon.photo {background-size: cover;}
.actioncenter .notification .txt {display: inline-block; width: 100%; position: relative; overflow: hidden;}
.actioncenter .notification .txt a.user {font-weight: bold; color: var(--black); display: block; max-width: 100%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; line-height: 1.5;}
.actioncenter .notification .type {position: absolute; left: 28px; top: 28px; width: 16px; height: 16px; border-radius: 50%; background-position: center; background-size: cover; background-image: url('img/icons/ac/like.svg');}
.actioncenter .notification .type.dislike {background-image: url('img/icons/ac/dislike.svg');}
.actioncenter .orders {margin-top: 30px;}
.actioncenter .orders .order {display: flex; gap: 10px; flex-wrap: wrap; padding: 5px; border-radius: 3px; background-color: var(--gray-f2f2f2); margin-bottom: 15px;}
.actioncenter .orders .order .delivery {font-size: 10pt; width: 180px; padding: 5px 0;}
.actioncenter .orders .order .delivery .tracking {margin-top: 5px; font-weight: bold;}
.actioncenter .orders .order .progressbar {flex-basis: 100%; display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 5px;}
.actioncenter .orders .order .progressbar > div {height: 5px; background: linear-gradient(to left, var(--gray-888) 50%, #2ecc40 50%); background-size: 200% 100%; background-position:right bottom; transition:all 1s ease;}
.actioncenter .orders .order .progressbar > div:nth-child(2) {transition-delay: 1s;}
.actioncenter .orders .order .progressbar > div:nth-child(3) {transition-delay: 2s;}
.actioncenter .orders .order .progressbar > div:nth-child(4) {transition-delay: 3s;}
.actioncenter .orders .order .progressbar > div.active {transition:all 0.5s ease-in-out; animation: blink_order normal 1.5s infinite ease-in-out; background: none; background-size: auto; background-position:0% 0%;}
.actioncenter .orders .order .progressbar > div.sel {background-position:left bottom;}
.actioncenter .orders .order .state {flex-basis: 100%; padding: 5px; text-align: center; background-color: var(--gray-ddd);}
.actioncenter .orders .order .state.ok {background-color: #2ecc40; color: #fff;}
.actioncenter .orders .order .states {flex-basis: 100%; display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 5px;}
.actioncenter .orders .order .states > div {text-align: center; font-size: 9pt;}
.actioncenter .orders .order .states > div div {font-size: 8pt; margin-top: 5px;}
.actioncenter .orders .order .title {flex: 1; padding: 5px 0 5px 50px; font-weight: bold; font-family: Poppins, Arial; font-size: 11pt; background-image: url('img/icons/ac/order.svg'); background-size: 30px; background-position: 10px;}
.actioncenter .payments {margin: 30px 0; max-height: 10px;}
.actioncenter .payments .paymentstable, .actioncenter .points .pointstable {width: 100%;}
.actioncenter .payments .paymentstable tr:nth-of-type(odd), .actioncenter .points .pointstable tr:nth-of-type(odd) {background-color: #eee; background-color: var(--gray-eee);}
.actioncenter .payments .paymentstable tr td:nth-of-type(1) {width: 80px; font-weight: bold;}
.actioncenter .payments .paymentstable tr td:nth-of-type(3) {width: 130px; text-align: right;}
.actioncenter .payments .paymentstable .button {margin: -10px 0;}
.actioncenter .payments .paymentstable .cancelled {font-style: italic; color: #ccc; color: var(--gray-ccc);}
.actioncenter .points {margin: 30px 0;}
.actioncenter .points .total {float: right;}
.actioncenter .points .pointstable tr td:nth-of-type(1) {width: 100px;}
.actioncenter .points .pointstable tr td:nth-of-type(2) {width: 80px; text-align: right;}
.actioncenter .points .pointstable .minus {font-weight: bold; color: #e00;}
.actioncenter .points .pointstable .plus {font-weight: bold; color: #090;}
.actioncenter .reminder {padding: 12px 0 0 50px; min-height: 30px; line-height: 1.5; background-image: url('img/icons/ac/reminder.svg'); background-position: left top; background-size: 40px;}
.actioncenter .reminder.nothing {color: #ccc; color: var(--gray-ccc); font-style: italic;}
.actioncenter .reminder .date {font-weight: bold; display: inline-block; width: 80px; margin-right: 10px;}
.blogs {background-color: inherit;}
.blogs.article h1 {padding-top: 40px!important;}
.blogs.aside .group {height: 20px; overflow: hidden; margin-bottom: 5px;}
.blogs.aside .group.sel {height: auto;}
.blogs.aside .group .articles {margin: 5px 0; padding-left: 23px; font-family: Arial;}
.blogs.aside .group .articles li {margin-bottom: 5px;}
.blogs.aside .group .month {font-weight: bold; cursor: pointer;}
.blogs.aside .group .month:before {content: ''; display: block; float: left; width: 18px; height: 18px; background-image: url('img/icons/blogs/archive_arrow.svg'); background-size: 10px; background-position: center; margin-right: 5px; background-repeat: no-repeat; transition: all 0.3s ease;}
.blogs.aside .group .month.sel:before {transform: rotate(90deg);}
.blogs h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin-top: 10px;}
.blogs .button.image {float: right; margin-top: 10px; margin-left: 20px;}
.blogs .button.image.back {background-image: url('img/icons/buttons/back_gray.svg');}
.blogs .button.image.delete {background-image: url('img/icons/buttons/delete_gray.svg');}
.blogs .button.image.edit {background-image: url('img/icons/buttons/edit_gray.svg');}
.blogs .article {border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; padding: 10px 20px 40px 20px; margin-bottom: 50px; position: relative; background-color: inherit;}
.blogs.article .article {border-color: transparent; padding: 10px 0 40px 0;}
.blogs .article img {max-width: 100%;}
.blogs .article .txt {font-size: 11pt; line-height: 1.5;}
.blogs .article .user {position: absolute; bottom: -20px; border: inherit; background-color: inherit; padding: 10px 15px 10px 46px; border-radius: 100px; font-family: Poppins, Arial; height: 40px; box-sizing: border-box;}
.blogs .article .user a {display: block; float: left; margin-right: 15px; max-width: 180px; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.blogs .article .user a span {display: block; float: left; width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; position: absolute; top: 2px; left: 2px;}
.blogs .article .views {margin-left: 30px;}
.dating h1 .button {float: right; margin: 10px 0 0 10px;}
.dating .ad {border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; margin-top: 40px; overflow: hidden;}
.dating .ad.premium {border-color: var(--link-color);}
.dating .ad .body {padding: 15px 15px 5px 15px; font-size: 11pt; line-height: 1.5; background-color: #f2f2f2; background-color: var(--gray-f2f2f2); border-radius: 0 0 5px 5px;}
.dating .ad .body .links {margin-top: 10px; font-size: 11pt; color: #333; color: var(--gray-333);}
.dating .ad .body .links a {margin: 0 15px; font-size: 10pt;}
.dating .ad .body .links a:first-of-type {margin-left: 0; font-weight: bold;}
.dating .ad .body .links .date {float: right; font-size: 9pt; font-weight: normal; padding-top: 2px; cursor: help;}
.dating .ad .header {height: 50px; overflow: hidden; padding: 5px 5px 10px 15px; box-sizing: border-box; border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc);}
.dating .ad .header .age {font-family: Poppins, Arial; font-size: 11pt; color: #555; color: var(--gray-555); margin-left: 10px;}
.dating .ad .header .nick {font-family: Poppins, Arial; font-size: 13pt; padding-left: 20px; background-size: 16px; background-position: left;}
.dating .ad .header .region {width: 40px; height: 40px; margin-left: 10px; background-size: contain; background-position: center; float: right; cursor: help;}
.dating .ad .header .relationship {width: 40px; height: 40px; margin-left: 10px; background-size: 26px; background-position: center; float: right; cursor: help;}
.dating .ad .header .title {font-size: 9pt; font-weight: bold; color: #333; color: var(--gray-333); white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.dating .ad .photo {background-color: #f2f2f2; background-color: var(--gray-f2f2f2); border: 0; border-radius: 5px 0 5px 0; width: 50px; height: 50px; background-position: center; background-size: cover; display: block; float: left;}
.dating .ad.premium .photo {border-color: var(--link-color);}
.dating .button.image, .discussion .button.image.new {background-image: url('img/icons/buttons/add_white.svg'); margin-bottom: 20px;}
.dating .premiuminfo {border-bottom: 5px ridge var(--link-color); padding-bottom: 25px; margin-bottom: 25px;}
.dating .premiuminfo .header {font-size: 12pt; text-align: center; margin: 15px 0;}
.dating .premiuminfo .note {color: var(--gray-555);}
.dating .premiuminfo .title {background-image: url('img/graphic/dating/eyes.svg'); background-size: auto 70%; background-position: top; padding-top: 150px; text-align: center; font-weight: bold; font-size: 22pt; font-family: Poppins,Arial;}
.disconnectMessage {position: fixed; z-index: 9999999; bottom: 0; left: 0; width: 100%; box-sizing: border-box; background-color: rgba(51,51,51,0.9); padding: 20px; color: #fff; font-family: Poppins, Arial; font-size: 13pt; font-weight: bold;}
.disconnectMessage > span {display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: #f00; margin-right: 15px; animation: disconnectBlinking 1s infinite;}
@keyframes disconnectBlinking {0%, 49% {background-color: #f00;}  50%, 100% {background-color: transparent;}}
.discussion h1 a {color: #333; color: var(--gray-333);}
.discussion h2 {padding-left: 40px; background-position: left; background-size: 32px; color: var(--link-color);}
.discussion .button.image.back {float: right; margin-top: 10px; background-image: url('img/icons/buttons/back_gray.svg'); margin-left: 50px;}
.discussion .button.image.favorite {background-image: url('img/icons/buttons/favorite_gray.svg');}
.discussion .button.image.favorite.selected {background-image: url('img/icons/buttons/favorite_color.svg');}
.discussion .button.image.lock {background-image: url('img/icons/discussion/unlocked.svg');}
.discussion .button.image.lock.selected {background-image: url('img/icons/discussion/locked.svg');}
.discussion .button.image.new {float: right;}
.discussion .info {font-family: Poppins, Arial; color: #333; color: var(--gray-333); padding-left: 50px;}
.discussion .lastposts {border: 2px solid #555; border-color: var(--gray-555); border-radius: 5px; overflow: hidden; width: 700px; max-width: 90%; margin: 10px 0 30px 50px; table-layout: fixed;}
.discussion.root .lastposts {margin-bottom: 50px;}
.discussion .lastposts .row {display: grid; grid-template-columns: minmax(150px, 1fr) minmax(20px,120px) minmax(20px,100px); align-items: center; border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); grid-template-areas: "title last-auth last-date" "creator last-auth last-date";}
.discussion .lastposts .row.row1 {grid-template-columns: 1fr;}
.discussion .lastposts .row > div {padding: 5px 10px; text-align: center; box-sizing: border-box;}
.discussion .lastposts .row .col1 {text-align: left; line-height: 1; font-size: 8pt; color: #555; color: var(--gray-555); background-size: 16px; background-position: right; grid-area: title;}
.discussion .lastposts .row.row1 .col1 {font-size: 10pt; color: var(--black); line-height: 1.5;}
.discussion .lastposts .row.row1 .col1 b {color: var(--link-color);}
.discussion .lastposts .row .col1a {text-align: left; line-height: 1; font-size: 8pt; color: #555; color: var(--gray-555); grid-area: creator;}
.discussion .lastposts .row .col2 {font-weight: bold; display: flex; justify-content: center; grid-area: last-auth;}
.discussion .lastposts .row .col2 a {display: inline-block; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; max-width: 100%;}
.discussion .lastposts .row .col3 {grid-area: last-date;}
.discussion .lastposts .row .col3 .new {display: block; font-weight: bold; color: #c00; font-family: Poppins, Arial; font-size: 8pt;}
.discussion .lastposts .row:hover {background-color: #f2f2f2; background-color: var(--gray-f2f2f2);}
.discussion .lastposts .row:last-of-type {border-bottom: 0;}
.discussion .lastposts .row.hot .col1, .discussion .legend .hot {background-image: url('img/icons/discussion/hot.svg');}
.discussion .lastposts .row.locked .col1, .discussion .legend .locked {background-image: url('img/icons/discussion/locked.svg');}
.discussion .lastposts .row.new .col1, .discussion .legend .new {background-image: url('img/icons/discussion/new.svg');}
.discussion .lastposts .title {color: #333; color: var(--gray-333); font-weight: bold; font-size: 13pt; display: inline-block; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; max-width: 100%;}
.discussion .lastposts .header {background-color: #555; background-color: var(--gray-555); color: #eee; color: var(--gray-eee); text-align: left; padding: 5px 10px; font-weight: bold;}
.discussion .lastposts .header .last {float: right; width: 250px; text-align: center;}
.discussion .legend {line-height: 1.8; margin: 50px 0 20px 70px;}
.discussion .legend div {padding-left: 30px; background-position: 5px; background-size: 16px;}
.discussion .search {margin-bottom: 50px; position: relative;}
.discussion .search:before {display: block; content: ""; width: 20px; height: 20px; background-size: 16px; background-image: url('img/icons/userslist/search.svg'); background-repeat: no-repeat; position: absolute; z-index: 2; top: 8px; left: 11px;}
.discussion .search .query {border-radius: 100px; position: relative; padding-left: 35px; width: 250px;}
.discussion .search .query:focus {width: 100%;}
.discussion .topic {border: 1px solid #ccc; border-color: var(--gray-ccc); margin: 0 0 30px 50px; border-radius: 20px 5px 5px 5px; overflow: hidden;}
.discussion .topic.master {margin: 30px 0 40px 0;}
.discussion .topic.new {border-color: #a33;}
.discussion .topic .body {padding: 10px 20px; line-height: 1.5;}
.discussion .topic .footer {background-color: #f2f2f2; background-color: var(--gray-f2f2f2); padding: 10px 20px; position: relative;}
.discussion .topic .footer .karma {display: inline-block; height: 20px; position: absolute; top: 8px; width: 101px;}
.discussion .topic .footer .karma .button {float: left; margin-right: 5px; padding: 0 10px!important; background-position: center;}
.discussion .topic .footer .karma .button:last-of-type {float: right;}
.discussion .topic .footer .karma .button.btndis.selected {border-color: #ff4136!important;}
.discussion .topic .footer .karma .meter {position: relative; width: 40px; background-color: #888; background-color: var(--gray-888); color: #fff; height: 20px; border: 1px solid #f2f2f2; border-color: var(--gray-f2f2f2); border-radius: 5px; overflow: hidden;}
.discussion .topic .footer .karma .meter .dislike {height: 100%; background-color: #FF4136; position: absolute; right: 0; z-index: 1;}
.discussion .topic .footer .karma .meter .like {height: 100%; background-color: #2ECC40; position: absolute; left: 0; z-index: 1;}
.discussion .topic .footer .karma .meter .value {cursor: pointer; height: 100%; width: 100%; position: absolute; left: 0; z-index: 2; text-align: center; padding-top: 1px; font-family: Poppins, Arial; font-weight: bold; text-shadow: 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;}
.discussion .topic .footer .reply, .discussion .topic .footer .edit {float: right; margin-top: -6px;}
.discussion .topic .header {padding: 5px; height: 40px;}
.discussion .topic .header .date {font-size: 8pt;}
.discussion .topic .header .date .edits {margin-left: 15px;}
.discussion .topic .header .image {float: left; width: 40px; height: 40px; border: 1px solid #fff; border-color: var(--white); border-radius: 100px; margin-right: 15px; background-size: cover; background-position: center;}
.discussion .topic .header .name {font-family: Poppins, Arial; font-size: 13pt;}
.discussion .topic .header .name.pro:after {content: ''; display: inline-block; width: 23px; height: 23px; margin-left: 15px; position: absolute; background-image: url('img/icons/discussion/doctor.svg'); background-size: contain; background-position: right;}
.discussion .topic .link_to {margin-right: 10px;}
.discussion .topic .quote, .discussion .lastposts .row.row1 .col1 .quote {margin: 0 0 15px 30px; border-left: 3px solid #888; border-left-color: var(--gray-888); padding-left: 15px; font-size: 8pt;}
.discussion .topic .quote .name, .discussion .lastposts .row.row1 .col1 .quote .name {font-weight: bold; color: #333; color: var(--gray-333);}
.dsforms h1 .button {margin-left: 10px;}
.dsforms .list td:nth-child(1) {padding-left: 5px!important;}
.dsforms .list td:nth-child(2) span.g {display: inline-block; width: 26px; height: 26px; background-size: contain; background-position: center; position: relative; top: 5px;}
.dsforms .list td:nth-child(2) span.g.m {background-image: url('img/icons/forms/gender_m0.svg');}
.dsforms .list td:nth-child(2) span.g.mm {background-image: url('img/icons/forms/gender_mm0.svg');}
.dsforms .list td:nth-child(2) span.g.fm {background-image: url('img/icons/forms/gender_fm0.svg');}
.dsforms .list td:nth-child(2) span.g.ff {background-image: url('img/icons/forms/gender_ff0.svg');}
.dsforms .list td:nth-child(2) span.g.f {background-image: url('img/icons/forms/gender_f0.svg');}
.dsforms .list td:nth-child(2) span.g.m.s {background-image: url('img/icons/forms/gender_m1.svg');}
.dsforms .list td:nth-child(2) span.g.mm.s {background-image: url('img/icons/forms/gender_mm1.svg');}
.dsforms .list td:nth-child(2) span.g.fm.s {background-image: url('img/icons/forms/gender_fm1.svg');}
.dsforms .list td:nth-child(2) span.g.ff.s {background-image: url('img/icons/forms/gender_ff1.svg');}
.dsforms .list td:nth-child(2) span.g.f.s {background-image: url('img/icons/forms/gender_f1.svg');}
.dsforms .list tr.my td {background-color: var(--light-blue-color)!important;}
.dsforms .rating-star {border: 1px solid #888; border-color: var(--gray-888); border-radius: 100px; background-image: none!important; height: 8px!important; overflow: hidden; position: relative; width: 30px!important;}
.dsforms .rating-star > .rating-value {border-radius: 100px; background-image: none!important; background-color: #d00; height: 8px!important; position: absolute; top: 0;}
.dsforms .table h2 {color: var(--link-color);}
.dsforms .table > div {width: 100%;}
.dsforms .table .form {padding: 5px; margin-bottom: 30px;}
.dsforms .table .form input, .dsforms .table .form textarea, .dsforms .table .form select {width: 100%;}
.dsforms .table .form input[type=checkbox] {width: auto;}
.dsforms .table .form td, .dsforms .table .form th {padding: 8px 10px; border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); overflow: hidden;}
.dsforms .table .form td .genderTable {display: grid; grid-template-columns: repeat(2, 50px 1fr); column-gap: 10px;}
.dsforms .table .form td .genderTable .g.a {background-color: var(--gray-888); font-weight: bold; text-align: center; color: var(--white); font-size: 8pt; padding: 2px 0;}
.dsforms .table .form td .genderTable .g.a::before {display: inline-block; height: 50%; vertical-align: baseline; content: ''; padding-top: 4px;}
.dsforms .table .form th {text-align: left; width: 40%; font-size: 8pt;}
.dsforms .table .form th .infobubble {cursor: help; display: inline-block; width: 12px; height: 12px; margin-left: 10px; position: relative; top: 2px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.dsforms .table .form th .infobubble.info {background-image: url('img/icons/forms/bubble_info_gray.svg');}
.dsforms .table .form th .infobubble.info:hover {background-image: url('img/icons/forms/bubble_info_color.svg');}
.dsforms .table .form th .infobubble.warn {background-image: url('img/icons/forms/bubble_warn_color.svg');}
.dsforms .table .form th .infobubble.warn:hover {background-image: url('img/icons/forms/bubble_warn_color.svg');}
.dsforms .table .form tr:nth-child(1) td, .dsforms .table .form tr:nth-child(1) th {border-top: 1px solid #ccc; border-top-color: var(--gray-ccc);}
.dsforms .table .form tr:nth-child(even) td, .dsforms .table .form tr:nth-child(even) th {background-color: #ddd; background-color: var(--gray-ddd);}
.dsforms .table .form tr:nth-child(odd) td, .dsforms .table .form tr:nth-child(odd) th {background-color: #f2f2f2; background-color: var(--gray-f2f2f2);}
.dsforms .table .form tr:hover td, .dsforms .table .form tr:hover th {background-color: var(--highlight);}
.dsforms .table .win {display: none;}
.errorpage {width: 90%; height: 90%; overflow: auto; box-sizing: border-box; border: 1px solid #888; background-color: #fff; padding: 20px; position: absolute; top: 5%; left: 5%; transition-property: none;}
.errorpage h1 {margin: -20px -20px 20px -20px; padding: 20px; background-color: #c00; text-align: center; color: #fff;}
.errorpage .errnumber {position: absolute; bottom: 10px; left: 10px; color: #ccc;}
.errorpage .info {background-color: var(--warn-color); padding: 20px; margin: 20px 20%; font-family: Poppins, Arial; font-size: 14pt; color: var(--gray-555);}
.galleries h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin-top: 10px;}
.galleries .photos {display: grid; grid-template-columns: repeat(auto-fill,minmax(150px, 1fr));}
.galleries .photos a.photo {border: 1px solid #ccc; border-color: var(--gray-ccc); background-color: #ccc; background-color: var(--gray-ccc); display: block; margin: 5px; height: 250px; border-radius: 5px; overflow: hidden; background-size: cover; background-position: center; position: relative;}
.galleries .photos a.photo span {display: block; background-color: rgba(255,255,255,0.8); padding: 5px; position: absolute; bottom: 20px; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.hashtags .tag {background-color: var(--gray-eee); border-radius: 5px; padding: 10px; line-height: 1.5; margin-bottom: 25px; cursor: pointer;}
.hashtags .tag .date {text-align: right; color: var(--gray-555); font-size: 9pt; position: relative; top: 8px;}
.helpwindow {border: 1px solid #555; border-color: var(--gray-555); padding: 20px; background-color: #fff; background-color: var(--white); margin: 10px; min-height: calc(100vh - 20px); box-sizing: border-box; font-family: Arial; font-size: 11pt; line-height: 1.5;}
.helpwindow > .header {font-family: Poppins, Arial; background-color: #333; background-color: var(--main-color); color: #fff; font-size: 18pt; padding: 10px 20px; margin: -20px -20px 20px -20px;}
.helpwindow > .header .navigation {float: right; display: none;}
.helpwindow > .header .navigation > div {display: inline-block; width: 36px; height: 36px; cursor: pointer; border-radius: 3px; background-position: center; background-size: 26px; margin: 0 2px;}
.helpwindow > .header .navigation > div:hover {background-color: #555;}
.helpwindow > .header .navigation .back {background-image: url('img/icons/help/back.svg');}
.helpwindow > .header .navigation .home {background-image: url('img/icons/help/home.svg');}
.helpwindow h1 {font-family: Poppins, Arial; font-size: 16pt;}
.helpwindow h2 {font-family: Poppins, Arial; font-size: 13pt; margin: 20px 0 5px 0; padding: 0; color: var(--black); font-weight: bold;}
.helpwindow h2 ~ p {margin-top: 0;}
.helpwindow fieldset {margin-bottom: 25px; border: 1px solid transparent; border-top-color: var(--black);}
.helpwindow fieldset legend {margin: auto; padding: 0 10px;}
.homepage .fullmsg {border: 2px solid #f00; padding: 70px 15px 15px 15px; font-family: Poppins, Arial; font-size: 11pt; text-align: justify; color: #555; color: var(--gray-555); background-image: url('img/icons/errors/message.svg'); background-size: auto 50px; background-position: center 15px; border-radius: 10px; box-shadow: 2px 2px #aaa;}
.homepage .fullmsg .btn {margin-top: 15px;}
.homepage .fullmsg .btn a {margin-right: 30px;}
.homepage .topflex {display: flex;}
.homepage .topflex .top {flex: 1; order: 1;}
.homepage .topflex .top .matchmaker {margin: 10px 0 5px 0; padding: 6px 30px; width: 150px; color: #555; color: var(--gray-555); background-image: url(img/icons/matchmaker/icon.svg); background-position: 5px center; background-size: 20px; cursor: pointer;}
.homepage .topflex .top .matchmaker:hover {text-decoration: underline;}
.homepage .topflex .top .newbie {margin-bottom: 10px; position: relative; top: -5px; padding: 6px 30px; font-weight: bold; background-image: url(img/icons/main/newbie.svg); background-position: 5px 4px; background-size: 20px; line-height: 1.5; max-width: 100%;}
.homepage .topflex .top .newbie a {color: #800000;}
.homepage .topflex .top .reminder {margin-bottom: 10px; padding: 6px 30px; color: #555; color: var(--gray-555); background-image: url(img/icons/others/calendar.svg); background-position: 5px 4px; background-size: 20px; line-height: 1.5; max-width: 100%;}
.homepage .topflex .top .reminder .date {float: left; width: 85px; font-weight: bold;}
.homepage .topflex .top .vip {margin-bottom: 10px; padding: 6px 0 6px 30px; color: #555; color: var(--gray-555); background-image: url(img/icons/menu/vip.svg); background-position: 5px center; background-size: 20px; cursor: pointer;}
.homepage .topflex .top .vip:hover {text-decoration: underline;}
.homepage .topflex .top .viptip {color: var(--black); margin-left: 30px; position: relative; top: -10px;}
.homepage .topflex > .user {flex: 0 0 250px; order: 2;}
.homepage .topflex > .user .photo {border: 1px solid #fff; border-color: var(--white); background-color: var(--white); width: 150px; height: 150px; margin: 20px auto 30px auto; background-position: center; background-size: cover; border-radius: 500px; position: relative; z-index: 2;}
.homepage .topflex > .user .photo .change {background-color: rgba(212,212,212,0.9); color: #000; padding: 8px 15px 8px 30px; width: 40px; margin: 60px 30px; border: 1px solid #fff; border-color: var(--white); border-radius: 5px; background-image: url('img/icons/others/pencil.svg'); background-position: 5px center; background-size: 16px; cursor: pointer; visibility: hidden;}
.homepage .topflex > .user .photo:hover .change {visibility: visible; animation: showusereditbtn 0.2s ease-out forwards; opacity: 1;}
.homepage .topflex > .user .pie {width: 180px; height: 180px; margin: 4px auto -186px auto; position: relative; z-index: 1; cursor: help;}
.homepage .topflex > .user .userchart {fill: #ddd; stroke: #0c3; stroke-width: 10; stroke-dasharray: 0 100; animation: fillupuserchart 0.5s ease-out forwards;}
.homepage .topflex > .user .verified {margin: 0 auto 10px auto; text-align: center; padding: 6px 30px;}
.homepage .topflex > .user .verifyno {width: 80px; color: #555; color: var(--gray-555); background-image: url(img/icons/others/verify-account.svg); background-position: 5px center; background-size: 20px; cursor: pointer;}
.homepage .topflex > .user .verifyno:hover {text-decoration: underline;}
.homepage .topflex > .user .verifyyes {cursor: pointer; border: 1px solid #0c3; border-radius: 50px; width: 120px; background-image: url(img/icons/others/tick-inside-circle.svg); background-position: 5px center; background-size: 20px;}
.chat {font-family: Poppins, Arial;}
.chat .kickreason {border: 1px solid #f00; border-radius: 5px; font-size: 14pt; padding: 15px 15px 15px 100px; margin: 30px 0; background-image: url(img/icons/chat/kick.svg); background-position: 15px center; background-size: auto 50px;}
.chat .room {margin-top: 40px; padding: 15px; background-color: var(--gray-f2f2f2); border-radius: 5px; border: 1px solid var(--gray-eee);}
.chat .room h2 {padding: 5px 0 5px 40px; margin: 0; background-position: left; background-size: 30px auto;}
.chat .room h2 a {color: var(--black);}
.chat .room .desc {margin: 15px 0; font-size: 11pt;}
.chat .room .userscount {width: 100%; overflow-x: hidden;}
.chat .room .userscount > div {display: inline-block; position: relative; top: 5px; margin-left: 20px; height: 20px; overflow: hidden;}
.chat .room .userscount > div span {width: 20px; height: 20px; margin-left: -3px; display: block; float: left; border-radius: 50%; background-size: cover; background-position: center;}
.chat .room .userscount > div span:first-of-type {margin-left: 0;}
.chat .room .userslist {margin-top: 10px;}
.chat .room .userslist a {margin: 0 15px 10px 0; white-space: nowrap;}
.chat .schedule h2 {margin-top: 50px; padding-left: 40px; background-position: left; background-size: 30px;}
.chat .schedule table td {line-height: 1;}
.chat .schedule table td:first-of-type {font-weight: bold; width: 120px; vertical-align: top;}
.chat .schedule table td span {width: 35px; height: 35px; display: block; float: left; margin-right: 15px; background-position: center; background-size: cover;}
.chat .schedule table td p {display: block; margin: 0; padding: 0; font-size: 11pt; font-weight: bold;}
.chat .totalusers {text-align: center; font-size: 14pt; padding-top: 80px; background-image: url('img/icons/chat/totalusers.svg'); background-position: center top; background-size: auto 70px;}
.chat_aside {background-color: #f2f2f2; background-color: var(--gray-f2f2f2); height: 100%; overflow: hidden; display: flex; flex-direction: column;}
.chat_aside, .chat_aside div {transition: all 0.5s ease;}
.chat_aside .menu {height: 50px; flex: 0 0 50px; background-color: #eee; background-color: var(--gray-eee); border-bottom: 1px solid #888; border-bottom-color: var(--gray-888); overflow: hidden; margin-top: -5px; box-sizing: border-box;}
.chat_aside .menu .btn {background-size: 18px; background-position: center; margin: 8px 0 0 5px; cursor: pointer; border: 1px solid #eee; border-color: var(--gray-eee); display: inline-block; width: 35px; height: 35px; border-radius: 100px; transition: all 0.5s ease;}
.chat_aside .menu .btn:first-of-type {margin-left: 10px;}
.chat_aside .menu .btn:hover {background-color: #ccc; background-color: var(--gray-ccc); border-color: #ccc; border-color: var(--gray-ccc);}
.chat_aside .menu .btn.sel {border-color: var(--link-color); background-color: #fff; background-color: var(--white);}
.chat_aside .menu .btn.fontsize {background-image: url('img/icons/chat/fontsize_off.svg');}
.chat_aside .menu .btn.leave {background-image: url('img/icons/chat/leave.svg');}
.chat_aside .menu .btn.nightmode {background-image: url('img/icons/chat/night_off.svg');}
.chat_aside .menu .btn.onlyme {background-image: url('img/icons/chat/filter_off.svg');}
.chat_aside .menu .btn.settings {background-image: url('img/icons/chat/settings.svg');}
.chat_aside .menu .btn.sort {background-image: url('img/icons/chat/sort_off.svg');}
.chat_aside .menu .btn.fontsize.sel {background-image: url('img/icons/chat/fontsize_on.svg');}
.chat_aside .menu .btn.nightmode.sel {background-image: url('img/icons/chat/night_on.svg');}
.chat_aside .menu .btn.onlyme.sel {background-image: url('img/icons/chat/filter_on.svg');}
.chat_aside .menu .btn.sort.sel {background-image: url('img/icons/chat/sort_on.svg');}
.chat_aside .users {margin-top: 20px; overflow: auto; flex: 1 1 auto; padding-bottom: 90px; box-sizing: border-box;}
.chat_aside .users::-webkit-scrollbar {width: 6px;}
.chat_aside .users::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ccc; background-color: var(--gray-ccc);}
.chat_aside .users .user {height: 36px; overflow: hidden; padding: 0 10px; padding-top: 4px; transition-property: none;}
.chat_aside .users .user:hover {background-color: #ccc; background-color: var(--gray-ccc);}
.chat_aside .users .user .buttons {display: block; float: right; padding-top: 5px; visibility: hidden; transition-property: none;}
.chat_aside .users .user:hover .buttons {visibility: visible;}
.chat_aside .users .user .buttons .btn {cursor: pointer; display: inline-block; background-size: 15px; transition-property: none; background-position: center; width: 20px; height: 20px; border: 1px solid transparent; border-radius: 100px;}
.chat_aside .users .user .buttons .btn:hover {background-color: #eee; background-color: var(--gray-eee);}
.chat_aside .users .user .buttons .btn.other {background-image: url('img/icons/chat/menu.svg');}
.chat_aside .users .user .buttons .btn.whisper {background-image: url('img/icons/chat/whisper.svg');}
.chat_aside .users .user .img {display: block; float: left; cursor: pointer; margin-right: 10px; width: 30px; height: 30px; border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 100px; background-size: cover; background-position: center;}
.chat_aside .users .user .name {font-family: Poppins, Arial; cursor: pointer; margin-top: 6px; font-size: 11pt; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; max-width: 60%;}
.chat_aside .users .user .name:hover {text-decoration: underline;}
.chat_aside_div {width: 300px;}
.chat_main {height: 100%; max-height: 100%; display: flex; flex-direction: column; margin: 0; background-color: #eee; background-color: var(--gray-eee);}
.chat_main, .chat_main * {transition: background-color 0.5s ease;}
.chat_main .menu {max-height: 45px; background-color: #fff; background-color: var(--white); box-sizing: border-box; width: 100%; padding-top: 15px; flex: 1; margin-bottom: 10px;}
.chat_main .menu .links {margin: 0; background-color: #fff; background-color: var(--white); border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); display: grid; grid-template-columns: repeat(auto-fit, minmax(0, max-content)); padding: 0 30px; height: 30px; box-sizing: border-box; max-width: 100%;}
.chat_main .menu .links .link {padding: 5px 23px 5px 10px; overflow: hidden; color: #555; color: var(--gray-555); border: 1px solid #ccc; border-color: var(--gray-ccc); cursor: pointer; display: inline-block; font-family: Poppins, Arial; height: 30px; box-sizing: border-box; border-radius: 5px 5px 0 0; position: relative; white-space: nowrap; overflow: hidden !important; margin-left: -1px;}
.chat_main .menu .links .link:hover {text-decoration: underline;}
.chat_main .menu .links .link.main {background-image: url('img/icons/chat/chat.svg'); background-size: auto 16px; background-position: 10px; padding-left: 32px;}
.chat_main .menu .links .link.select {background-color: #fff; background-color: var(--white); border-bottom: 1px solid #eee; border-bottom-color: var(--gray-eee); color: #000; color: var(--black); text-decoration: none; margin-top: -4px; height: 34px; font-weight: bold;}
.chat_main .menu .links .link .close {display: block; background-color: #ccc; background-color: var(--gray-ccc); border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 100px; width: 10px; height: 10px; position: absolute; right: 5px; top: 8px; z-index: 2; background-image: url('img/icons/chat/closetab.svg'); background-position: center; background-size: 6px;}
.chat_main .menu .links .link .close:hover {background-color: #f2f2f2; background-color: var(--gray-f2f2f2);}
.chat_main .menu .links .link .img {display: block; float: left; width: 16px; height: 16px; background-size: cover; background-position: center; border-radius: 100px; margin-right: 5px;}
.chat_main .menu .links .link .newpoint {display: block; width: 5px; height: 5px; position: absolute; top: 2px; left: 2px;}
.chat_main .menu .links .link .newpoint.show {border-radius: 100px; border: 1px solid #ff851b; background-color: #ff851b;}
.chat_main .newmsg {min-height: 90px; max-height: 90px; background-color: #fff; background-color: var(--white); border-top: 1px solid #ddd; border-top-color: var(--gray-ddd); padding: 0; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column;}
.chat_main .newmsg .buttons {height: 40px; padding-top: 10px; box-sizing: border-box; margin-right: 10px;}
.chat_main .newmsg .buttons a.icon {display: inline-block; float: right; position: relative; z-index: 2; width: 30px; height: 30px; border: 1px solid #fff; border-color: var(--white); border-radius: 50px; background-position: center; background-size: 18px; margin-left: 5px;}
.chat_main .newmsg .buttons a.icon:hover {background-color: #ddd; background-color: var(--gray-ddd);}
.chat_main .newmsg .buttons a.icon.send:hover {background-color: #e6f4ff;}
.chat_main .newmsg .buttons .room {position: relative; z-index: 1; margin-left: 20px; top: 10px; color: #555; color: var(--gray-555);}
.chat_main .newmsg .txt {flex: 1 1 auto; max-height: 46px; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; overflow: auto; box-sizing: border-box; padding: 10px 20px;}
.chat_main .newmsg .txt::-webkit-scrollbar {width: 6px;}
.chat_main .newmsg .txt::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #eee; background-color: var(--gray-eee);}
.chat_main .newmsg .txt img, .chat_main .window .container .msg img.emoji {height: 18px; vertical-align: middle; margin: 0 2px;}
.chat_main .window {box-sizing: border-box; flex: 1 0 auto; height: 0px; position: relative; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; background-color: #eee; background-color: var(--gray-eee);}
.chat_main .window .container {position: absolute; bottom: 0; padding: 0 25px 20px 25px; max-height: 100%; overflow: auto; display: flex; flex-flow: column; box-sizing: border-box; width: 100%;}
.chat_main .window .container.reverse {flex-flow: column-reverse;}
.chat_main .window .container::-webkit-scrollbar {width: 6px;}
.chat_main .window .container::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ddd; background-color: var(--gray-ddd);}
.chat_main .window .container.bigsize .msg {font-size: 13pt;}
.chat_main .window .container .msg {padding: 3px; font-size: 10pt; border: 1px solid transparent; border-radius: 5px; transition-property: none;}
.chat_main .window .container .msg:hover {background-color: #fff; background-color: var(--white);}
.chat_main .window .container .msg .arrow {display: inline-block; margin-right: 5px; background-image: url('img/icons/chat/right-arrow.svg'); background-size: contain; background-position: left; width: 10px; height: 10px;}
.chat_main .window .container .msg .from {font-weight: bold; margin-right: 5px; cursor: pointer;}
.chat_main .window .container .msg .room {background-color: #ccc; background-color: var(--gray-ccc); color: #fff; color: var(--white); margin-right: 5px; padding: 3px 10px; border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px;}
.chat_main .window .container .msg .txt {font-family: Verdana; margin-left: 5px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;}
.chat_main .window .container .msg .time {float: right; margin-left: 15px; font-size: 8pt; color: #888; color: var(--gray-888);}
.chat_main .window .container .msg .to {font-weight: bold; margin-right: 5px; cursor: pointer;}
.chat_main .window .container .msg.new:before {content: ' '; position: absolute; left: 15px; width: 6px; height: 6px; border: 1px solid #ff851b; background-color: #ff851b; border-radius: 100px; margin-top: 5px;}
.chat_main .window .container .msg.to_me .to, .chat_main .window .container .msg.from_me .from {font-weight: bold; background-color: #ff4136; color: #fff; color: var(--white); padding: 3px 10px; border: 1px solid #ff4136; border-radius: 5px;}
.chat_main .window .container .msg.from_me .from {background-color: #2ecc40; border-color: #2ecc40;}
.chat_main .window .container .msg.whisper .arrow {background-image: url('img/icons/chat/whisper.svg'); width: 18px; height: 18px; position: absolute;}
.chat_main .window .container .msg.whisper .to {margin-left: 22px;}
.chat_main .window .errormsg {position: absolute; width: 100%; background-color: #f00; color: #fff; padding: 10px; top: -10px; left: 0; z-index: 2; box-shadow: 0 3px 3px var(--gray-ccc); display: none;}
.klub .settings {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;}
.klub .settings .bonuses .bonus, .klub .settings .options .opt {border: 1px solid var(--gray-aaa); cursor: pointer; margin-bottom: 25px; border-radius: 5px; background-size: 34px auto; overflow: hidden; background-position: 10px 10px; box-sizing: border-box;}
.klub .settings .bonuses .bonus {cursor: default;}
.klub .settings .bonuses .bonus .title {padding: 10px 10px 10px 55px; color: var(--link-color); font-family: Poppins,Arial; font-size: 14pt; box-sizing: border-box; width: 100%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; background-size: 34px auto; background-position: 10px 10px;}
.klub .settings .bonuses .bonus .win {border-top: 1px dashed var(--gray-ccc); padding: 10px;}
.klub .settings .bonuses .bonus .win .colornick a {display: inline-block; margin: 0 15px; width: 80px; text-align: center;}
.klub .settings .bonuses .bonus .win .colornick a > span {display: block; width: 50%; padding-top: 50%; margin: 0 auto 10px auto; border-radius: 50%; background-size: cover; background-position: center;}
.klub .settings .bonuses .bonus .win .colornick .name {text-align: center; font-family: Poppins, Arial; font-size: 16pt; margin-bottom: 20px; width: 100%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.klub .settings .bonuses .bonus .win .colors {display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 50px)); gap: 10px;}
.klub .settings .bonuses .bonus .win .colors a > span {display: block; width: calc(100% - 6px); padding-top: calc(100% - 6px); margin: 3px 0 10px 3px; border-radius: 50%; box-shadow: 0 0 3px var(--black);}
.klub .settings .bonuses .bonus .win .exchange .offers a {display: grid; grid-template-columns: 1fr 60px; grid-gap: 10px; border: 1px solid var(--gray-ccc); padding: 5px 10px; color: var(--black); text-decoration: none; border-radius: 2px; margin: 5px 0;}
.klub .settings .bonuses .bonus .win .exchange .offers a:hover {border-color: var(--link-color);}
.klub .settings .bonuses .bonus .win .exchange .offers a > span:nth-of-type(1) {white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.klub .settings .bonuses .bonus .win .exchange .offers a > span:nth-of-type(2) {font-weight: bold; text-align: right;}
.klub .settings .bonuses .bonus .win .exchange .resume {text-align: center; background-color: var(--gray-eee); border-radius: 2px; padding-bottom: 30px; margin-bottom: 30px;}
.klub .settings .bonuses .bonus .win .exchange .resume .help {display: inline-block; width: 12px; height: 12px; background-image: url('img/icons/klub/question.svg'); background-size: contain;}
.klub .settings .bonuses .bonus .win .exchange .resume > span {font-size: 32pt; display: block; padding: 30px 0 10px 0;}
.klub .settings .bonuses .bonus .win .visitors {display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 63px)); gap: 10px;}
.klub .settings .bonuses .bonus .win .visitors a, .klub .settings .bonuses .bonus .win .colors a {display: inline-block; text-align: center; width: 100%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; padding: 0 0 5px 0;}
.klub .settings .bonuses .bonus .win .visitors a > span {background-position: center; display: block; width: 100%; padding-top: 100%; margin-bottom: 10px; border-radius: 50%; background-size: cover;}
.klub .settings .options .opt:hover {border-color: var(--gray-555);}
.klub .settings .options .opt .title {padding: 10px 10px 10px 55px; color: var(--link-color); font-family: Poppins,Arial; font-size: 14pt; box-sizing: border-box; width: 100%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.klub .settings .options .opt .value {background-color: var(--gray-eee); text-align: center; padding: 5px 10px; box-sizing: border-box; width: 100%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.klub .status {background-color: var(--gray-f2f2f2); border-radius: 5px; background-image: url('img/backgrounds/vip.svg'); background-size: auto 70%; background-position: right 20px bottom; padding: 20px; margin-bottom: 50px;}
.klub .status .title {margin-bottom: 30px; font-family: Poppins, Arial; font-size: 16pt; color: var(--link-color); padding-right: 150px;}
.klub .status .values {padding-right: 150px;}
.klub .status .values .from {padding: 10px; border-left: 1px solid var(--black); float: left;}
.klub .status .values .progress {clear: both; border: 1px solid var(--black); width: 100%; box-sizing: border-box; height: 15px;}
.klub .status .values .progress .remain {background-color: var(--link-color); width: 0; height: 100%; transition: all 0.5s ease;}
.klub .status .values .remaintxt {text-align: center; margin: 5px 0 10px 0;}
.klub .status .values .to {padding: 10px; border-right: 1px solid var(--black); float: right;}
.klub .status .values .footer {text-align: center; height: 30px;}
.leave .buttons {text-align: center;}
.leave .warn {border: 2px solid #e00; border-radius: 5px; background-color: var(--gray-eee); padding: 30px 20px; margin: 50px 0; font-size: 12pt; line-height: 1.5; position: relative;}
.leave .warn:before {content: ''; display: block; width: 50px; height: 50px; position: absolute; top: -25px; left: 50%; margin-left: -25px; background-image: url(img/icons/others/stop.svg); background-size: contain;}
.leave .warn a {overflow-wrap: break-word; font-weight: bold;}
.loginpage .about {position: relative; width: 100%; font-family: Poppins, Arial; font-size: 10pt; padding: 20px; box-sizing: border-box; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);}
.loginpage .about:before, .loginpage .about:after {position: absolute; width: 40%; height: 10px; content: ' '; left: 12px; bottom: 12px; background: transparent; transform: skew(-5deg) rotate(-5deg); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); z-index: -1;}
.loginpage .about:after {left: auto; right: 12px; transform: skew(5deg) rotate(5deg);}
.loginpage .about > div {font-size: 12pt; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ccc;}
.loginpage .advantages {display: flex; flex-wrap: wrap; margin-top: 40px;}
.loginpage .advantages .adv {flex: 1 1 140px; background-position: center 5px; background-size: 60px; padding-top: 80px; font-family: Poppins, Arial; font-size: 17pt; text-align: center; margin: 20px 5px;}
.loginpage .advantages .adv .nextline {display: block; font-size: 12pt;}
.loginpage .container {display: grid; grid-template-columns: 450px auto; grid-column-gap: 30px;}
.loginpage .rightpanel {width: 100%;}
.loginpage .rightpanel .agerestrict {margin: 30px 0; background-image: url('img/icons/main/age.svg'); background-size: 30px; background-position: 5px; font-weight: bold; border-top: 2px solid #ff4136; border-bottom: 2px solid #ff4136; padding: 10px 5px 10px 45px;}
.loginpage .rightpanel .login, .loginpage .rightpanel .applogin, .loginpage .rightpanel .qrlogin {border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; padding: 30px 10px 10px 10px; position: relative; box-shadow: 2px 2px 3px #888;}
.loginpage .rightpanel .login:before {content: ''; display: block; position: absolute; box-sizing: border-box; width: 60px; height: 60px; background-color: #fff; background-color: var(--white); border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 50%; top: -30px; left: 50%; margin-left: -30px; background-size: 40px; background-repeat: no-repeat; background-position: center; background-image: url('img/icons/main/lock.svg');}
.loginpage .rightpanel .login p {position: relative;}
.loginpage .rightpanel .login p:before {content: ''; display: block; border: 1px solid #ccc; background-color: #ccc; width: 30px; height: calc(100% - 2px); position: absolute; left: 1px; top: 1px; z-index: 1; box-sizing: border-box; border-radius: 100px 0 0 100px; background-size: 16px; background-position: center; background-repeat: no-repeat;}	
.loginpage .rightpanel .login p input, .loginpage .rightpanel .login p select {width: 100%; box-sizing: border-box; border-radius: 100px; padding-left: 40px; position: relative; z-index: 2; background-color: transparent;}
.loginpage .rightpanel .login p input:focus, .loginpage .rightpanel .login p select:focus { background-color: transparent; border-color: #555; border-color: var(--gray-555);}
.loginpage .rightpanel .login p select option {font-size: 10pt; font-family: Arial;}
.loginpage .rightpanel .login .links {margin-top: 15px; border-top: 1px solid #ccc; padding-top: 10px;}
.loginpage .rightpanel .login .links a {display: inline-block; margin-left: 10%; padding: 5px 0 3px 25px; background-size: 20px; background-position: left;}
.loginpage .rightpanel .qrlogin, .loginpage .rightpanel .applogin {margin-top: 30px; padding: 10px; text-align: center;}
.loginpage .rightpanel .qrlogin .code {background-position: center; background-size: contain; margin: 10px 0; display: grid; align-items: center; height: 80px;}
.loginpage .rightpanel .qrlogin .code > div {visibility: hidden;}
.loginpage .rightpanel .qrlogin .title, .loginpage .rightpanel .applogin .title {font-weight: bold;}
.maps h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin-top: 10px;}
.maps .mapgrid {display: grid; grid-template-columns: repeat(auto-fill,minmax(280px, 1fr)); grid-gap: 15px;}
.maps .mapgrid .map {border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; overflow: hidden; position: relative;}
.maps .mapgrid .map .desc {opacity: 0; box-sizing: border-box; width: 100%; height: 250px; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,0.9); padding: 20px; z-index: 3; line-height: 1.5; transition: opacity 0.5s ease;}
.maps .mapgrid .map:hover {border-color: #888; border-color: var(--gray-888);}
.maps .mapgrid .map:hover .desc {opacity: 1;}
.maps .mapgrid .map .desc .detail {text-align: center; position: absolute; bottom: 25px; width: 100%; left: 0;}
.maps .mapgrid .map .desc .txt {max-height: 160px; overflow: auto; margin-bottom: 15px;}
.maps .mapgrid .map .desc .txt::-webkit-scrollbar {width: 6px;}
.maps .mapgrid .map .desc .txt::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ccc; background-color: var(--gray-ccc);}
.maps .mapgrid .map .icons {text-align: center; height: 30px; padding: 10px;}
.maps .mapgrid .map .icons .icon, .maps .mapgrid .map .icons .region {width: 30px; height: 30px; margin: 0 5px; cursor: help; background-size: contain; background-position: center; display: inline-block;}
.maps .mapgrid .map .icons .region {width: 50px;}
.maps .mapgrid .map .img {width: 100%; height: 250px; margin-bottom: 10px;}
.maps .mapgrid .map .title {font-family: Poppins,Arial; font-size: 12pt; font-weight: bold; padding: 10px; text-align: center;}
.maps .mapgrid .map .title a {display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.maps .place {font-family: Poppins,Arial; font-size: 12pt; font-weight: bold; color: var(--link-color); background-image: url('img/icons/maps/place.svg'); background-size: 25px; margin-bottom: 10px; padding-left: 35px;}
.maps .summary {padding: 20px; border-bottom: 1px dashed #ccc; border-bottom-color: var(--gray-ccc);}
.maps .summary .item {background-size: auto 30px; padding: 10px 0 10px 60px; font-family: Poppins,Arial; font-size: 11pt; font-weight: bold;}
.maps .summary .item.gpsc span {font-weight: normal; margin-left: 10px;}
.maps .txtinfo {font-size: 11pt; line-height: 1.5; margin: 20px 0;}
.maps .txtinfo .user {margin: 30px 20px 0 20px; font-size: 9pt; border: 1px solid #ccc; border-color: var(--gray-ccc); color: #555; color: var(--gray-555); height: 40px; padding: 2px 10px 2px 2px; overflow: hidden; background-color: #f2f2f2; background-color: var(--gray-f2f2f2); border-radius: 100px; line-height: 1.5; max-width: 250px;}
.maps .txtinfo .user .img {width: 40px; height: 40px; float: left; background-size: cover; background-position: center; margin-right: 15px; border-radius: 50%;}
.maps .txtinfo .user .name a {display: inline-block; max-width: calc(100% - 60px); white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; font-family: Poppins, Arial; font-size: 12pt;}
.mapsaside .photos {max-height: calc(100vh - 200px); overflow: auto; margin-bottom: 20px;}
.mapsaside .photos::-webkit-scrollbar {width: 6px;}
.mapsaside .photos::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ccc; background-color: var(--gray-ccc);}
.mapsaside .photos .photo {width: 100%; height: 150px; background-size: cover; background-position: center; margin-bottom: 15px; cursor: pointer; position: relative;}
.market .about {font-family: Poppins, Arial; line-height: 1.5; background-color: #ecf9ff; margin-bottom: 50px; padding: 10px 100px 10px 10px; border: 1px solid #ecf9ff; border-radius: 5px; background-image: url('img/backgrounds/market_customers.svg'); background-position: right 20px bottom 10px; background-size: auto 100px;}
.market .goods {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 10px;}
.market .goods:after {content: ''; display: block; clear: both;}
.market .goods .item {font-family: Poppins, Arial; overflow: hidden; position: relative; text-decoration: none; display: block; border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; padding: 10px 10px 250px 10px; box-sizing: border-box; min-width: 280px;}
.market .goods .item .bottom {display: block; width: calc(100% - 20px); position: absolute; bottom: 10px;}
.market .goods .item .bottom .button {float: right;}
.market .goods .item .bottom .icons {height: 20px; margin-top: 5px; display: block;}
.market .goods .item .bottom .icons span {display: inline-block; cursor: help; margin-right: 5px; width: 20px; height: 20px; background-position: center; background-size: contain;}
.market .goods .item .bottom .icons .post {background-image: url('img/icons/market/postman.svg');}
.market .goods .item .bottom .icons .shop {background-image: url('img/icons/market/shop.svg');}
.market .goods .item .bottom .icons .ver_sel {background-image: url('img/icons/market/verified_seller.svg');}
.market .goods .item .bottom .img {height: 160px; display: block; background-position: center; background-size: cover; margin-bottom: 20px;}
.market .goods .item .bottom .price {font-size: 16pt; font-weight: bold; color: #555; color: var(--gray-555);}
.market .goods .item .title {font-size: 14pt; display: block;}
.market .goods .item:hover {border-color: #888; border-color: var(--gray-888);}
.market .goods .item:hover .title {text-decoration: underline;}
.market_kategorie .filter {margin-bottom: 30px;}
.market_kategorie .filter .newonly {float: right; cursor: pointer;}
.market_kategorie .filter .price {float: left; min-height: 40px;}
.market_kategorie .filter .price input[type="number"] {font-family: Arial; font-size: 8pt; width: 50px; height: 30px; padding: 0 0 0 5px;}
.market_kategorie .filter .price .set {height: 30px; border: 0; background-color: var(--link-color); border-radius: 3px; color: #fff; margin-left: 5px; position: relative; top: 1px; cursor: pointer;}
.market_kategorie .filter .sort {clear: left; padding: 8px 0; margin-top: 15px;}
.market_kategorie .filter .sort > a {padding: 5px 8px; border: 1px solid var(--gray-ccc); border-radius: 3px; margin-left: 5px; color: var(--gray-555); text-decoration: none;}
.market_kategorie .filter .sort > a:hover {border-color: var(--gray-888); color: var(--black);}
.market_kategorie .filter .sort > a.sel {border-color: var(--link-color); color: var(--link-color);}
.market_kategorie .subcats {display: grid; grid-template-columns: repeat(auto-fit,minmax(150px, 1fr)); grid-gap: 15px; margin-bottom: 30px;}
.market_kategorie .subcats > a {border: 1px solid var(--gray-ccc); display: grid; align-items: center; color: var(--gray-333); text-decoration: none; padding: 0 10px 0 50px; box-sizing: border-box; border-radius: 3px; height: 43px; line-height: 1.3; overflow: hidden; box-shadow: 2px 2px 2px var(--gray-ccc); background-size: 30px; background-position: 10px center;}
.market_kategorie .subcats > a:hover {border-color: var(--gray-888); color: var(--black);}
.market_kategorie .subcats > a:active {position: relative; top: 2px; left: 2px; box-shadow: none;}
.market_order .delivery {background-color: #004b8d; color: #fff; padding: 10px; border-radius: 5px; margin-bottom: 50px;}
.market_order .delivery .additional_info {display: grid; grid-template-columns: auto auto auto; grid-gap: 15px;}
.market_order .delivery .additional_info span {font-weight: bold; margin-right: 5px;}
.market_order .delivery .point > span {font-weight: bold; display: block;}
.market_order .delivery .point > div {display: grid; grid-template-columns: 1fr 140px; grid-gap: 10px; margin-bottom: 10px;}
.market_order .delivery .point > div > div {background-color: #4f84c4; padding: 10px 10px 10px 50px; border-radius: 5px; background-size: 30px; background-position: 10px center; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.market_order .delivery .point > div > div.balikovna {background-image: url('img/icons/market/carriers/balikovna.svg');}
.market_order .delivery .point > div > div.zasilkovna {background-image: url('img/icons/market/carriers/zasilkovna.svg');}
.market_order .delivery .point .change {transition:all 0.3s ease; text-align: center; color: #fff; text-decoration: none; padding: 10px; background-color: #223a5e; display: block; border-radius: 5px; box-sizing: border-box; border: 1px solid #223a5e;}
.market_order .delivery .point .change:hover {background-color: #fff; color: #223a5e;}
.market_order .orderitem {margin-top: 30px; background-color: var(--gray-f2f2f2); padding: 15px;}
.market_order .orderitem .header {display: grid; grid-template-columns: auto auto; grid-gap: 15px; align-items: center; border-bottom: 1px solid var(--gray-333); margin-bottom: 15px; padding-bottom: 10px;}
.market_order .orderitem .header .ship {padding-left: 40px; background-position: left; background-size: 30px;}
.market_order .orderitem .header .ship.b2c {background-image: url('img/icons/market/seller_b2c.svg');}
.market_order .orderitem .header .ship.c2c {background-image: url('img/icons/market/seller_c2c.svg');}
.market_order .orderitem .header .ship > a {color: var(--gray-555); font-size: 9pt;}
.market_order .orderitem .header .ship > span {display: block; font-size: 12pt; color: var(--gray-333); font-family: Poppins, Arial; font-weight: bold; margin-top: 5px;}
.market_order .orderitem .header .button {float: right;}
.market_order .orderitem .items {border-bottom: 1px solid var(--gray-333); margin-bottom: 15px;}
.market_order .orderitem .items .item {border-bottom: 1px dotted var(--gray-555); padding-bottom: 15px; margin-bottom: 15px; display: grid; grid-template-columns: 150px 1fr; grid-gap: 10px;}
.market_order .orderitem .items .item:last-of-type {border-bottom: 0; margin-bottom: 0;}
.market_order .orderitem .items .item .img {grid-row: 1/5; border: 1px solid var(--gray-ccc); background-color: #fff; width: 150px; height: 150px; background-size: contain; background-position: center; box-sizing: border-box;}
.market_order .orderitem .items .item .price {font-family: Poppins, Arial; font-size: 12pt; font-weight: bold; text-align: right; color: var(--gray-555); align-self: end;}
.market_order .orderitem .items .item .qty > a {font-family: Poppins, Arial; font-size: 11pt; display: inline-block; box-sizing: border-box; overflow: hidden; background-color: var(--gray-ccc); text-align: center; width: 20px; height: 20px; border-radius: 50%; text-decoration: none; color: var(--gray-333);}
.market_order .orderitem .items .item .qty > span {margin: 0 15px; position: relative; top: -5px;}
.market_order .orderitem .items .item .title {font-family: Poppins, Arial; font-size: 12pt; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.market_order .orderitem .protection {background-image: url('img/icons/market/shield.svg'); background-position: left; background-size: 16px; padding: 3px 0 3px 23px;}
.market_order .orderitem .protection a {color: var(--gray-333);}
.market_order .orderitem .shipping {text-align: right;}
.market_order .total {border-bottom: 1px solid var(--gray-888); display: grid; grid-template-columns: 1fr 150px; grid-gap: 15px; align-items: center;}
.market_order .total span {display: block; font-family: Poppins, Arial; font-size: 14pt; font-weight: bold; color: var(--gray-333);}
.market_order .total .orderallbtn {display: block; text-align: center; background-color: #9b2335; color: #fff; padding: 8px; border: 1px solid #9b2335;}
.market_order .total .orderallbtn:hover {background-color: #fff; color: #9b2335;}
.meeting h2 {margin: 0 0 20px 0; color: var(--link-color);}
.meeting .comments {padding: 20px; margin-top: 0!important;}
.meeting .detail {clear: both; margin-top: 30px; font-size: 11pt; line-height: 1.5; padding: 0 20px 20px 20px; border-bottom: 1px dashed #ccc; border-bottom-color: var(--gray-ccc);}
.meeting .detail .button {float: right;}
.meeting .editable.edit {border: 2px solid var(--intense-blue-color); border-radius: 5px; padding: 8px; margin: -10px;}
.meeting > .header {background-size: cover; background-position: center; height: 300px; margin-bottom: 20px; position: relative;}
.meeting > .header .editbk {background-color: rgba(0,0,0,0.7); visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.meeting > .header:hover .editbk {visibility: visible;}
.meeting > .header .signed {background-image: url('img/icons/meetings/checked.svg'); width: 50px; height: 50px; background-size: contain; background-position: center; float: right; margin: 20px 20px 0 0; border: 2px solid #fff; border-color: var(--white); border-radius: 100px; cursor: help; box-shadow: 0 0 10px #000;}
.meeting .participants {padding: 20px 20px 40px 20px; border-top: 1px dashed #ccc; border-top-color: var(--gray-ccc);}
.meeting .participants table {table-layout: fixed;}
.meeting .participants table td {padding: 10px; border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); position: relative;}
.meeting .participants table td .age {display: inline-block; margin-left: 5px; position: relative; top: -3px; color: #333; color: var(--gray-333);}
.meeting .participants table td .icon {display: block; width: 16px; height: 16px; background-position: center; background-size: cover; margin: -7px 0 -13px 0;}
.meeting .participants table td .img {display: block; float: left; width: 25px; height: 25px; border: 1px solid #fff; border-color: var(--white); border-radius: 100px; background-position: center; background-size: cover; margin: -5px 10px -20px 0;}
.meeting .participants table td .name {display: inline-block; max-width: calc(100% - 80px); overflow: hidden!important; white-space: nowrap; text-overflow: ellipsis;}
.meeting .participants table td.subst {text-align: center; font-weight: bold; background-image: linear-gradient(135deg, var(--white) 25%, var(--gray-ddd) 25%, var(--gray-ddd) 50%, var(--white) 50%, var(--white) 75%, var(--gray-ddd) 75%, var(--gray-ddd) 100%); background-size: 5.66px 5.66px; background-repeat: repeat;}
.meeting .participants table th {border-bottom: 2px solid #555; border-bottom-color: var(--gray-555); padding: 10px; font-weight: bold; text-align: left;}
.meeting .participants table tr:hover td {background-color: #f2f2f2; background-color: var(--gray-f2f2f2);}
.meeting .participants .summary {float: right;}
.meeting .participants .summary .item {float: right; border: 1px solid #555; border-color: var(--gray-555); border-radius: 5px; margin-left: 5px; padding: 7px 10px 7px 30px; background-size: 16px; background-position: 5px; color: #555; color: var(--gray-555);}
.meeting .promoter {margin-left: 20px;}
.meeting .promoter .img {width: 60px; height: 60px; border: 1px solid #fff; border-color: var(--white); border-radius: 100px; float: left; margin-right: 10px; background-size: cover; background-position: center;}
.meeting .promoter .sub a {margin-right: 20px;}
.meeting .promoter .title {font-family: Poppins, Arial; font-size: 12pt; padding: 5px 0;}
.meeting .promoter .title a {font-weight: bold;}
.meeting .rules {margin-top: 20px; font-size: 9pt; line-height: 1.5; padding: 0 20px 20px 20px; border-bottom: 1px dashed #ccc; border-bottom-color: var(--gray-ccc);}
.meeting .rules .button {float: right;}
.meeting .signin {margin-top: 20px; line-height: 1.5; text-align: center; padding: 0 20px 20px 20px;}
.meeting .signin .deadline {margin-bottom: 15px;}
.meeting .signin .notice {font-weight: bold; margin-bottom: 15px;}
.meeting .signin .notice span, .meeting .signin .deadline span {font-weight: bold; color: var(--link-color);}
.meetings h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin-top: 10px;}
.meetings .hint {margin-bottom: 20px; min-height: 30px; background-image: url('img/icons/meetings/hint.svg'); background-size: auto 30px; background-position: 10px; background-color: var(--light-blue-color); border: 1px solid var(--intense-blue-color); color: #ccc; color: var(--gray-ccc); padding: 5px 10px 5px 50px; border-radius: 5px; color: #333; color: var(--gray-333);}
.meetings .list .item {margin-top: 25px; border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 42px; overflow: hidden; height: 42px; padding: 5px;}
.meetings .list .item .date {float: right; border: 1px solid var(--link-color); text-align: center; font-size: 12pt; font-family: Poppins, Arial; font-weight: bold; height: 42px; overflow-y: hidden; border-radius: 5px 40px 40px 5px; box-sizing: border-box;}
.meetings .list .item .date .day {background-color: var(--link-color); color: #fff; color: var(--white); font-family: Arial; padding: 2px 10px; font-size: 8pt; min-width: 40px;}
.meetings .list .item .name a {font-weight: bold;}
.meetings .list .item .region {float: right; margin-right: 10px; height: 42px; width: 50px; background-position: right; background-size: contain; cursor: help;}
.meetings .list .item .title {color: var(--link-color); font-family: Poppins, Arial; font-weight: bold; font-size: 14pt; max-width: 65%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.meetings .list .item .userimg {border: 1px solid #fff; border-color: var(--white); display: block; width: 40px; height: 40px; background-size: cover; background-position: center; margin-right: 10px; float: left; border-radius: 100px;}
.meetings .viplist {display: grid; margin: 20px 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 10px;}
.meetings .viplist .item {margin-bottom: 15px; border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; overflow: hidden; min-width: 280px;}
.meetings .viplist .item .host {padding: 5px 10px 0px 10px;}
.meetings .viplist .item .host .guests {background-image: url('img/icons/meetings/users.svg'); background-size: 12px; background-position: left top; padding-left: 16px; color: #333; color: var(--gray-333); float: right; position: relative; top: 8px;}
.meetings .viplist .item .host .region {float: left; width: 43px; height: 30px; background-size: contain; background-position: right; cursor: help; position: relative; top: -2px; margin-right: 10px;}
.meetings .viplist .item .host .user {max-width: 55%; height: 22px; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; display: inline-block; padding-top: 8px;}
.meetings .viplist .item .host .user span {border: 1px solid #fff; border-color: var(--white); display: inline-block; width: 26px; height: 26px; background-size: cover; background-position: center; margin-right: 6px; float: left; border-radius: 100px; position: relative; top: -8px;}
.meetings .viplist .item .image {height: 180px; background-size: cover; background-position: center; display: block;}
.meetings .viplist .item .image .checked {display: block; cursor: help; float: right; margin: 15px 15px 0 0; width: 30px; height: 30px; border: 2px solid #fff; border-color: var(--white); border-radius: 100px; background-image: url('img/icons/meetings/checked.svg'); background-position: center; background-size: cover;}
.meetings .viplist .item .time {font-weight: bold; padding: 10px 0 10px 33px; background-image: url('img/icons/meetings/calendar.svg'); background-size: 16px; background-position: 10px;}
.meetings .viplist .item .time .days {color: #888; color: var(--gray-888); margin-left: 8px; font-weight: normal;}
.meetings .viplist .item .title {background-color: #f2f2f2; background-color: var(--gray-f2f2f2); text-align: center; padding: 10px; font-family: Poppins, Arial; font-size: 14pt; display: block; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.miniforms h1.icon, .dsforms h1.icon {padding-left: 40px; background-size: 30px; background-position: left 10px;}
.miniforms h1 .button, .dsforms h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin: 10px 0 0 10px;}
.miniforms .form td {height: 30px; width: 30px; overflow: hidden;}
.miniforms .form td label {cursor: pointer; margin: 3px 0;}
.miniforms .form td select {width: 100%; box-sizing: border-box;}
.miniforms .form th, .miniforms .form td {font-family: Poppins, Arial; font-size: 9pt; text-align: center; padding: 5px 0; border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); border-right: 1px solid #ccc; border-right-color: var(--gray-ccc);}
.miniforms .form.spanking th:nth-of-type(1) {width: 240px;}
.miniforms .form.spanking tr:nth-of-type(1) th:nth-of-type(2) {border-top: 1px solid #ccc; border-top-color: var(--gray-ccc);}
.miniforms .form.spanking tr:nth-of-type(2) th {height: 90px; padding: 0; max-width: 30px; overflow: hidden;}
.miniforms .form.spanking tr:nth-of-type(2) th span {display: block; transform: rotate(270deg); text-align: left; margin-bottom: -20px;}
.miniforms .form.spanking tr:nth-of-type(n+3) th:nth-of-type(1) {border-left: 1px solid #ccc; border-left-color: var(--gray-ccc); text-align: left; padding: 5px;}
.miniforms .form.spanking tr:nth-of-type(n+3):hover {background-color: var(--highlight);}
.miniforms .form.spanking .pie {width: 28px; height: 28px; margin: auto auto;}
.miniforms .form.spanking .userchart {fill: transparent; stroke: #0c3; stroke-width: 10; stroke-dasharray: 0 100; animation: fillupuserchart 0.5s ease-out forwards;}
.miniforms .form.dogplay tr:nth-of-type(2) th {height: 110px; padding: 0; max-width: 60px; overflow: hidden;}
.miniforms .form.dogplay tr:nth-of-type(2) th span {margin-bottom: 0;}
.miniforms .form.personal th, .miniforms .form.personal td {border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); border-right: 1px solid #ccc; border-right-color: var(--gray-ccc); text-align: left; padding: 10px 5px; box-sizing: border-box; width: auto;}
.miniforms .form.personal td {font-size: 11pt; padding-left: 10px;}
.miniforms .form.personal th {border-left: 1px solid #ccc; border-left-color: var(--gray-ccc); border-right: 0; width: 190px; padding-left: 35px; background-size: 20px; background-position: 5px;}
.miniforms .form.personal tr:first-of-type td, .miniforms .form.personal tr:first-of-type th {border-top: 1px solid #ccc; border-top-color: var(--gray-ccc);}
.miniforms .form.personal tr:hover {background-color: var(--highlight);}
.miniforms .form.personal span.color {display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px;}
.miniforms .form.personal span.opt {margin-right: 10px; font-size: 9pt; color: #ccc; color: var(--gray-ccc); white-space: pre;}
.miniforms .form.personal span.opt.sel {color: var(--link-color); font-weight: bold;}
.miniforms .form.personal span.yesno {display: block; width: 16px; height: 16px; margin-right: 8px; float: left; background-size: contain; background-position: center; position: relative; top: 3px;}
.miniforms .form.personal span.yesno.no {background-image: url('img/icons/forms/personal_no.svg');}
.miniforms .form.personal span.yesno.yes {background-image: url('img/icons/forms/personal_yes.svg');}
.miniforms .form.personal span.icon {display: block; width: 30px; height: 30px; margin-right: 8px; margin-bottom: -20px; float: left; background-size: contain; background-position: center; position: relative; top: -4px;}
.miniforms .list, .miniforms .form, .dsforms .list, .dsforms .form {table-layout: fixed;}
.miniforms .list th, .miniforms .list td, .dsforms .list th, .dsforms .list td {font-family: Poppins, Arial; font-size: 11pt; text-align: left; padding: 5px; border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc);}
.miniforms .list td:nth-child(1), .dsforms .list td:nth-child(1) {background-size: 16px; background-position: left; padding-left: 30px; color: #555; color: var(--gray-555); padding-top: 12px;}
.miniforms .list td:nth-child(1) a, .dsforms .list td:nth-child(1) a {display: inline-block; float: left; padding-top: 8px; margin: -10px 10px 0 0; max-width: 75%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.miniforms .list td:nth-child(1) a span, .dsforms .list td:nth-child(1) a span {background-size: cover; background-position: center; float: left; width: 25px; height: 25px; border-radius: 100px; margin: -3px 10px 0 0;}
.miniforms .list td:nth-child(2) {font-size: 9pt; padding-left: 40px; background-position: left; background-size: 30px;}
.miniforms .list td:nth-child(2).da, .miniforms h1.da {background-image: url('img/icons/forms/minidoga.svg');}
.miniforms .list td:nth-child(2).dp, .miniforms h1.dp {background-image: url('img/icons/forms/minidogp.svg');}
.miniforms .list td:nth-child(2).p, .miniforms h1.p {background-image: url('img/icons/forms/minipersonal.svg');}
.miniforms .list td:nth-child(2).sa, .miniforms h1.sa {background-image: url('img/icons/forms/minispanka.svg');}
.miniforms .list td:nth-child(2).sp, .miniforms h1.sp {background-image: url('img/icons/forms/minispankp.svg');}
.miniforms .list td:nth-child(2) b {display: block;}
.miniforms .list td:nth-child(3), .dsforms .list td:nth-child(3) {height: 35px; background-size: auto 25px; background-position: center; cursor: help;}
.miniforms .list th, .dsforms .list th {border-bottom: 2px solid #888; border-bottom-color: var(--gray-888); color: #555; color: var(--gray-555);}
.miniforms .list th:nth-child(3), .dsforms .list th:nth-child(3) {text-align: center;}
.miniforms .list tr:hover td, .dsforms .list tr:hover td {background-color: #f2f2f2; background-color: var(--gray-f2f2f2);}
.miniforms .list tr:last-of-type td, .dsforms .list tr:last-of-type td {border-bottom: 2px solid #888; border-bottom-color: var(--gray-888);}
.miniforms .list tr.my td {background-color: var(--light-blue-color)!important;}
.miniforms .table, .dsforms .table {overflow-x: auto;}
.miniforms .table > div {width: 590px;}
.mynotes .list {display: grid; grid-template-columns: 1fr; grid-gap: 30px;}
.mynotes .list .user {display: grid; grid-template-columns: 60px 1fr; max-width: 100%;}
.mynotes .list .user .info {border: 1px solid var(--link-color); padding: 10px; border-radius: 5px; overflow: hidden;}
.mynotes .list .user .info .name {display: inline-block; font-family: Poppins, Arial; font-size: 12pt;}
.mynotes .list .user .info .note {color: var(--gray-555);}
.mynotes .list .user .info .tags {margin-top: 15px; padding-bottom: 5px;}
.mynotes .list .user .info .tags .tag {margin: 10px 10px 0 0; border: 1px solid var(--gray-888); text-decoration: none; padding: 5px 10px 5px 25px; background-position: 5px center; background-size: 16px; border-radius: 50px; color: var(--gray-555);}
.mynotes .list .user .info .tags .tag:hover {border-color: var(--link-color); color: var(--link-color);}
.mynotes .list .user .photo {position: relative; border: 2px solid var(--link-color); border-radius: 50%; display: block; width: 50px; height: 50px; background-position: center; background-size: cover;}
.mynotes .list .user .photo::before {content: ''; position: absolute; left: 100%; bottom: 17px; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent var(--link-color);}
.mynotes .list .user.f .photo::before {border-color: transparent transparent transparent #e70a41;}
.mynotes .list .user.f .photo, .mynotes .list .user.f .info {border-color: #e70a41;}
.mynotes .nothing {padding: 20px; text-align: center;}
.news h2 {color: var(--link-color); margin-bottom: 5px;}
.news .info {font-size: 9pt; font-weight: bold; color: #555; color: var(--gray-555); margin-bottom: 10px;}
.news .past {margin-bottom: 35px;}
.news .txt {line-height: 1.8; font-size: 11pt; text-align: justify; margin: 5px 0 35px 0; padding-bottom: 35px; border-bottom: 1px dotted #ccc; border-bottom-color: var(--gray-ccc);}
.newuser {font-size: 12pt; font-family: Poppins;}
.nxewuser .accounttypes {display: flex; flex-wrap: wrap; background-color: #f2f2f2; background-color: var(--gray-f2f2f2); padding: 10px 0; margin-bottom: 15px;}
.newuser .accounttypes {display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 25px; background-color: #f2f2f2; background-color: var(--gray-f2f2f2); padding: 10px; margin-bottom: 15px;}
.newuser .accounttypes .type {position: relative; background-color: #fff; background-color: var(--white); border: 1px solid #ddd; border-color: var(--gray-ddd); border-radius: 5px; width: 100%; box-sizing: border-box; padding: 5px 10px;}
.newuser .accounttypes .type .footer {text-align: center; position: absolute; bottom: 10px; width: 100%; margin-left: -10px;}
.newuser .accounttypes .type .icon {margin-bottom: 15px; height: 60px; background-position: center; background-size: contain;}
.newuser .accounttypes .type .note {color: #555; color: var(--gray-555); font-size: 10pt; margin-bottom: 40px;}
.newuser .accounttypes .type .title {font-size: 14pt; color: #555; color: var(--gray-555); margin-bottom: 10px; text-align: center;}
.newuser .frm {background-color: #f2f2f2; background-color: var(--gray-f2f2f2); border: 1px solid #ccc; border-color: var(--gray-ccc); padding: 20px; font-size: 10pt;}
.newuser .frm .act {margin-left: 25px; background-size: 20px; padding: 5px 0 5px 30px; font-weight: bold; color: #333; color: var(--gray-333); background-position: left; font-size: 12pt;}
.newuser .frm.activation {font-size: 12pt;}
.newuser .frm .note {position: relative; top: -10px; font-size: 8pt; color: var(--link-color);}
.newuser .frm .fullwidth {width: 100%; margin-bottom: 15px;}
.newuser .frm input {width: 100%; margin-bottom: 15px;}
.newuser .frm .title {margin-bottom: 20px; background-size: 40px; padding: 10px 0 10px 60px; font-weight: bold; color: #333; color: var(--gray-333); background-position: left; font-size: 20pt;}
.newuser .frm .title.mail, .newuser .frm .act.mail {background-image: url('img/icons/newuser/mail.svg');}
.newuser .frm .title.overall {background-image: url('img/icons/newuser/traffic_light.svg');}
.newuser .frm .title.sms, .newuser .frm .act.sms {background-image: url('img/icons/newuser/sms.svg');}
.newuser .header {font-size: 16pt; font-family: Poppins; color: var(--intense-blue-color); margin-bottom: 15px;}
.newuser .infobox {margin: 20px 0; background-image: url('img/icons/newuser/info.svg'); background-size: 40px; padding: 15px 0 15px 60px; font-weight: bold; color: #333; color: var(--gray-333); background-position: left;}
.newuser .region {background-color: var(--form-select-color); border: 1px solid var(--link-color); padding: 15px 15px 15px 80px; font-size: 20pt; background-size: 50px; background-position: 15px;}
.newuser .rules {border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; margin: 0 0 20px 0; padding: 20px 20px 10px 20px; background-color: #f2f2f2; background-color: var(--gray-f2f2f2); max-height: 500px; overflow: auto;}
.newuser .rules::-webkit-scrollbar {width: 6px;}
.newuser .rules::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ccc; background-color: var(--gray-ccc);}
.newuser .win {display: none;}
.payment .bank {background-color: #ecf9ff; margin: 20px 0; border-radius: 5px; border-color: #ecf9ff; padding: 30px; font-family: Poppins; color: #333; color: var(--gray-333); font-size: 10pt;}
.payment .bank .data {font-size: 16pt; margin-bottom: 15px;}
.payment .bank .data.wide {letter-spacing: 0.15em;}
.payment .bank .info {font-weight: bold; color: #f30;}
.payment .bank .info.blue {color: var(--link-color); margin-top: 5px;}
.payment .bank .info.green {color: #0c0;}
.payment .bank .qr {float: right; width: 170px; height: 170px; margin-left: 20px; background-position: center; background-size: contain; background-color: #fff; background-color: var(--white); border: 1px solid #b9def4; border-radius: 5px;}
.payment .bank .title {font-weight: bold;}
.payment .item {font-size: 16pt; font-family: Poppins; color: var(--intense-blue-color); padding-left: 40px; background-image: url('img/icons/payment/shopping-bag.svg'); background-position: left; background-size: auto 32px;}
.payment .methods {margin-top: 40px;}
.payment .methods .method {clear: right; margin-bottom: 20px; border: 2px solid #888; border-color: var(--gray-888); border-radius: 5px; padding: 15px 10px 15px 80px; background-position: 5px; background-size: 50px auto; font-family: Poppins; font-size: 12pt; color: #555; color: var(--gray-555); width: 46%; float: right; cursor: pointer; box-sizing: border-box;}
.payment .methods .method.primary {float: left; font-weight: bold; font-size: 13pt; padding-left: 100px; background-size: contain; color: #333; color: var(--gray-333);}
.payment .methods .method:hover {border-color: var(--link-color); color: var(--link-color);}
.payment .methods .method {clear: none; float: none; width: 100%; max-width: 300px;}
.payment .paid {background-color: var(--highlight); padding: 20px 20px 20px 60px; margin-bottom: 40px; background-size: 30px; background-position: 10px center; background-image: url('img/icons/ac/coins.svg');}
.payment .vouchercode {width: 100%; border: 1px solid var(--link-color); border-radius: 5px; box-sizing: border-box; font-family: Poppins, Arial; font-size: 16pt; padding: 10px;}
.photodetail .frame {display: flex; flex-wrap: wrap;}
.photodetail .frame > .photo {display: inline-block; width: 70%; margin-right: 15px; box-sizing: border-box; padding-bottom: 15px;}
.photodetail .frame > .photo img {max-width: 100%;}
.photodetail.gallerydetail .frame .photo .list {display: grid; grid-template-columns: repeat(auto-fill,minmax(150px, 1fr)); grid-gap: 10px;}
.photodetail.gallerydetail .galleryinfo {margin-bottom: 20px; white-space: pre-wrap; line-height: 1.5; color: #555; color: var(--gray-555);}
.photodetail.gallerydetail .frame .othergalleries {width: 100%; height: 250px; overflow: hidden; margin-top: 30px; border-top: 1px dashed #ccc; border-top-color: var(--gray-ccc); padding-top: 10px;}
.photodetail.gallerydetail .frame .othergalleries h2 {display: block; width: 100%;}
.photodetail.gallerydetail .frame .othergalleries .list {display: grid; grid-template-columns: repeat(auto-fill,minmax(100px, 1fr)); grid-gap: 10px;}
.photodetail.gallerydetail .frame .othergalleries .photo {height: 200px!important; position: relative; -webkit-filter: grayscale(100%); transition: all 0.3s;}
.photodetail.gallerydetail .frame .othergalleries .photo:hover {-webkit-filter: grayscale(0%);}
.photodetail.gallerydetail .frame .othergalleries .photo span {display: block; background-color: rgba(255,255,255,0.8); padding: 5px; position: absolute; bottom: 20px; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.photodetail.gallerydetail .frame .photo a.photo {border: 1px solid #ccc; border-color: var(--gray-ccc); background-color: #ccc; background-color: var(--gray-ccc); display: block; height: 200px; border-radius: 5px; overflow: hidden; background-size: cover; background-position: center;}
.photodetail.gallerydetail .frame .sidephoto h2 {margin: 40px 0 0 0;}
.photodetail.gallerydetail .notApproved {margin-top: 20px; border-top: 1px dashed var(--gray-ccc); padding: 20px;}
.photodetail .frame .sidephoto {border-left: 1px dashed #ccc; border-left-color: var(--gray-ccc); padding-left: 15px; box-sizing: border-box; max-width: calc(30% - 15px); min-width: 210px; padding-bottom: 15px;}
.photodetail .frame .sidephoto .camera {padding: 2px 0 0 24px; background-image: url('img/icons/photos/camera.svg'); background-size: 16px; margin-left: 10px;}
.photodetail .frame .sidephoto .likes .buttons {display: flex; flex-wrap: wrap;}
.photodetail .frame .sidephoto .likes .buttons a {flex: 1; border: 1px solid #555; border-color: var(--gray-555); border-radius: 5px; font-family: Poppins; font-size: 12pt; text-decoration: none; color: #555; color: var(--gray-555); margin: 0 2px; padding: 5px 0 5px 40px; box-sizing: border-box; background-position: 5px; background-size: 24px;}
.photodetail .frame .sidephoto .likes .buttons a:hover {color: #000; color: var(--black); border-color: #000; border-color: var(--black);}
.photodetail .frame .sidephoto .likes .buttons a.delete {flex: 0 0 100%; background-image: url('img/icons/photos/delete.svg');}
.photodetail .frame .sidephoto .likes .buttons a.dislike {background-image: url('img/icons/photos/dislike.svg');}
.photodetail .frame .sidephoto .likes .buttons a.like {background-image: url('img/icons/photos/like.svg');}
.photodetail .frame .sidephoto .likes .buttons a.rename {flex: 0 0 100%; margin-bottom: 10px; background-image: url('img/icons/photos/rename.svg');}
.photodetail .frame .sidephoto .likes .buttons a.selected {color: var(--link-color); border-color: var(--link-color); background-color: var(--light-blue-color);}
.photodetail .frame .sidephoto .likes .karma {background-color: #ccc; background-color: var(--gray-ccc); height: 6px; border-radius: 20px; overflow: hidden; margin: 15px 5px;}
.photodetail .frame .sidephoto .likes .karma .progress {background-color: var(--intense-blue-color); border-radius: 20px; height: 6px;}
.photodetail .frame .sidephoto .otherphotos {margin: 25px 0;}
.photodetail .frame .sidephoto .otherphotos .photo {display: inline-block; margin: 0 5px 5px 0; background-color: #ccc; background-color: var(--gray-ccc); background-position: center; background-size: cover; width: 95px; height: 95px;}
.photodetail .frame .sidephoto .otherphotos .photo:nth-of-type(2n+2) {margin-right: 0;}
.photodetail.gallerydetail .frame .sidephoto .otherphotos .photo {margin: 5px 0; width: 100%; height: 250px; position: relative;}
.photodetail.gallerydetail .frame .sidephoto .otherphotos .photo span {display: block; background-color: rgba(255,255,255,0.8); padding: 5px; position: absolute; bottom: 20px; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.photopage h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin-top: 10px;}
.photopage .photos {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 10px; justify-content: space-between}
.photopage .photos .photo {display: inline-block; box-sizing: border-box; border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; overflow: hidden; height: 230px; width: 100%;}
.photopage .photos .photo:nth-of-type(5n+5) {margin-right: 0;}
.photopage .photos .photo .bar {display: block; height: 30px; background-color: var(--gray-eee);}
.photopage .photos .photo .bar .user {display: block; float: left; width: 20px; height: 20px; border: 1px solid #fff; border-color: var(--white); border-radius: 5px; background-position: center; background-size: cover; margin: 3px 0 0 5px;}
.photopage .photos .photo .bar .userlink {margin: 6px 5px 0 5px; max-width: 70%; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; display: inline-block;}
.photopage .photos .photo .img {display: block; height: 200px; background-position: center; background-size: cover;}
.pmessages {height: 100%; max-height: 100%; display: flex; flex-direction: column; margin: 0 -25px;}
.pmessages .new {position: relative; min-height: 110px; max-height: 50%; border-top: 1px solid #ddd; border-top-color: var(--gray-ddd); padding: 0; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column;}
.pmessages .new .attachment {display: none;}
.pmessages .new .attachment .input {display: none;}
.pmessages .new .attachment .line {padding: 5px 10px 5px 35px; font-size: 10pt; font-family: Poppins, Arial; color: var(--link-color); background-image: url('img/icons/pm/attachment.svg'); background-size: 16px; background-position: 10px center; width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.pmessages .new .attachment .line .remove {margin-left: 15px; display: inline-block; width: 12px; height: 12px; cursor: pointer; background-size: contain; background-position: center; background-image: url('img/icons/common/trash_red.svg'); position: relative; top: 2px;}
.pmessages .new .buttons {height: 60px; padding-top: 10px; box-sizing: border-box; margin-right: 10px;}
.pmessages .new .buttons a.icon {display: inline-block; width: 30px; height: 30px; border: 1px solid #fff; border-color: var(--white); border-radius: 50px; background-position: center; background-size: 18px; margin-left: 5px;}
.pmessages .new .buttons a.icon:hover {background-color: #ddd; background-color: var(--gray-ddd);}
.pmessages .new .buttons a.icon.send:hover {background-color: #e6f4ff;}
.pmessages .new .disabled {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-color: var(--white); text-align: center; font-family: Poppins, Arial; font-size: 16pt; padding-top: 30px; display: none;}
.pmessages .new .txt {flex: 1 1 auto; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; max-height: 100%; overflow: auto; box-sizing: border-box; padding: 10px;}
.pmessages .new .txt::-webkit-scrollbar {width: 6px;}
.pmessages .new .txt::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #eee; background-color: var(--gray-eee);}
.pmessages .new .txt img, .pmessages .window .container .msg img.emoji {height: 18px; vertical-align: middle; margin: 0 2px;}
.pmessages .userpan {display: grid; grid-template-columns: 45px 1fr 80px; grid-gap: 15px; height: 40px; border-bottom: 1px solid var(--gray-ccc); box-sizing: border-box; margin-top: -15px; box-shadow: 0 2px 5px var(--gray-ccc); position: relative; z-index: 3;}
.pmessages .userpan .buttons {display: grid; grid-template-columns: repeat(auto-fill, 30px); grid-gap: 10px; height: 100%; margin-right: 10px; align-self: center; height: 30px;}
.pmessages .userpan .buttons > div {background-position: center; background-size: 80%; cursor: pointer; border-radius: 50%;}
.pmessages .userpan .buttons > div:hover {background-color: var(--gray-ddd);}
.pmessages .userpan .buttons .del {background-image: url('img/icons/pm/delete.svg');}
.pmessages .userpan .buttons .ignore {background-image: url('img/icons/pm/ignore.svg');}
.pmessages .userpan .name {width: 100%; align-self: center; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.pmessages .userpan .name a {font-family: Poppins, Arial; font-size: 15pt; color: var(--black);}
.pmessages .userpan .photo {margin-left: 10px; align-self: center; width: 35px; height: 35px; border-radius: 50%; background-position: center; background-size: cover;}
.pmessages .warntime {background-color: #c00; color: #fff; font-weight: bold; font-size: 12pt; padding: 10px; box-sizing: border-box; position: fixed; bottom: 0; width: 100%; z-index: 10; display: none;}
.pmessages .warntime a {color: #fff;}
.pmessages .welcome {height: 100%; margin-top: -15px; background-color: var(--gray-ddd); background-image: url('img/icons/pm/openmail.svg'); background-size: 170px; background-position: center 120px; box-sizing: border-box; padding-top: 350px; text-align: center; font-family: Poppins; overflow-y: auto;}
.pmessages .welcome .vip {margin: 50px 15% 0 15%; background-color: var(--gray-eee); border-radius: 5px; padding: 20px; text-align: left;}
.pmessages .window {box-sizing: border-box; flex: 1 1 auto; height: 0px; position: relative; margin-top: 20px;}
.pmessages .window .container {position: absolute; bottom: 0; padding: 0 25px 20px 25px; max-height: 100%; overflow: auto; width: 100%; box-sizing: border-box;}
.pmessages .window .container::-webkit-scrollbar, .pmessages .welcome::-webkit-scrollbar {width: 6px;}
.pmessages .window .container::-webkit-scrollbar-thumb, .pmessages .welcome::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #fff; background-color: var(--white);}
.pmessages .window .container:hover::-webkit-scrollbar-thumb, .pmessages .welcome:hover::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ddd; background-color: var(--gray-ddd);}
.pmessages .window .container .msg {max-width: 70%; clear: both; margin-top: 25px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;}
.pmessages .window .container .msg.in {float: left;}
.pmessages .window .container .msg.out {float: right;}
.pmessages .window .container .msg .date {text-align: right; margin-top: 5px; font-size: 8pt; color: #555; color: var(--gray-555);}
.pmessages .window .container .msg .date a {margin-left: 5px; color: #888; color: var(--gray-888); text-decoration: none;}
.pmessages .window .container .msg .date a:hover {color: #333; color: var(--gray-333); text-decoration: underline;}
.pmessages .window .container .msg .date .checkicon {margin-left: 5px; width: 10px; height: 10px; display: inline-block; background-position: center; background-size: contain;}
.pmessages .window .container .msg .date .checkicon.read {background-image: url('img/icons/pm/check_read.svg');}
.pmessages .window .container .msg .date .checkicon.sent {background-image: url('img/icons/pm/check_sent.svg');}
.pmessages .window .container .msg .img {float: left; width: 40px; height: 40px; border: 1px solid #fff; border-color: var(--white); border-radius: 100px; background-size: cover; background-position: center; margin-right: 15px;}
.pmessages .window .container .msg .txt {margin-left: 55px; min-width: 100px; padding: 10px; background-color: #eee; background-color: var(--gray-eee); border: 1px solid #eee; border-color: var(--gray-eee); border-radius: 5px;}
.pmessages .window .container .msg .txt .att {margin-top: 10px; font-style: italic; background-image: url('img/icons/pm/attachment.svg'); background-size: 12pt; padding-left: 20px;}
.pmessages .window .container .msg.in .txt .att a {color: var(--gray-555);}
.pmessages .window .container .msg.out .txt .att a {color: var(--black);}
.pmessages .window .container .msg .txt .attimg {display: block; width: 100px; height: 100px; background-size: cover; background-position: center; border: 1px solid var(--gray-555); background-color: var(--gray-888); border-radius: 5px; margin-top: 10px;}
.pmessages .window .container .msg .txt .h {font-weight: bold; margin-bottom: 5px;}
.pmessages .window .container .msg.in.newin .txt {border: 1px solid var(--link-color);}
.pmessages .window .container .msg.out .txt {background-color: var(--link-color); color: #fff; color: var(--white);}
.pmessages .window .container .msg.out .txt a {color: var(--white);}
.pmessages .window .container .msg.sent .txt {background-color: #555; background-color: var(--gray-555);}
.podpora .detail .reply {border: 1px solid var(--gray-ddd); background-color: var(--gray-f2f2f2); border-radius: 5px; padding: 10px; margin-bottom: 50px; border-radius: 5px;}
.podpora .detail .reply textarea {border: 0; width: 100%; box-sizing: border-box; border-radius: 5px;}
.podpora .detail .stream .msg {display: grid; grid-template-columns: 100px 1fr; margin-bottom: 50px; grid-column-gap: 10px;}
.podpora .detail .stream .msg > div {align-self: start;}
.podpora .detail .stream .msg .icon {justify-self: end;}
.podpora .detail .stream .msg .icon span {border-radius: 50%; display: block; width: 60px; height: 60px; border: 5px solid var(--gray-eee); background-size: cover; background-position: center;}
.podpora .detail .stream .msg.mod .icon span {border-color: #76b5d1;}
.podpora .detail .stream .msg.sys .icon span {border-color: #e49f6c;}
.podpora .detail .stream .msg .txt {background-color: var(--gray-eee); padding: 10px; border-radius: 5px;}
.podpora .detail .stream .msg .txt .attachment {background-image: url('img/icons/pm/attachment.svg'); display: inline-block; width: 16px; height: 16px; margin-right: 10px; background-position: left; background-size: contain; cursor: help;}
.podpora .detail .stream .msg .txt .date {font-size: 8pt; margin-bottom: 10px;}
.podpora .detail .stream .msg .txt .name {font-weight: bold;}
.podpora .detail .stream .msg .txt .t {line-height: 1.5; font-size: 12pt;}
.podpora .detail .stream .msg.me .txt .t {color: var(--gray-333);}
.podpora .detail .stream .msg.mod .icon span {background-image: url('img/icons/support/operator.svg');}
.podpora .detail .stream .msg.sys .icon span {background-image: url('img/icons/support/system.svg');}
.podpora .detail .stream .msg.sys .txt .t {font-weight: bold;}
.podpora .detail .ticket {display: grid; background-color: var(--gray-f2f2f2); grid-template-columns: 50px 1fr; padding: 5px 0; margin-bottom: 50px; grid-column-gap: 10px; border-bottom: 1px solid var(--gray-ccc); border-top: 1px solid var(--gray-ccc);}
.podpora .detail .ticket .point {justify-self: center; align-self: center;}
.podpora .detail .ticket .point span {width: 30px; height: 30px; display: block; background-size: contain; background-position: center;}
.podpora .info {font-family: Poppins; font-size: 16pt; padding: 30px; background-color: var(--gray-eee); margin-bottom: 50px;}
.podpora .frm {background-color: #c5e3fa; border-radius: 5px; padding: 20px; margin: 20px 0; display: none; color: #000;}
.podpora .frm h2 {color: #000;}
.podpora .center input {margin: 0 5px;}
.podpora .frm label {font-weight: bold; display: block; margin-bottom: 20px;}
.podpora .frm select, .podpora .frm textarea {box-sizing: border-box; width: 100%; font-family: Arial; font-size: 11pt;}
.podpora .frm .warn {background-color: #fee4c2; border-radius: 5px; padding: 20px 20px 20px 150px; margin-bottom: 30px; background-image: url('img/icons/support/doc.svg'); background-position: 20px center; background-size: 110px auto; line-height: 1.5;}
.podpora .frm .warn .title {font-family: Poppins,Arial; font-size: 12pt; margin-bottom: 20px;} 
.podpora .tickets {border-top: 1px solid var(--gray-ccc); border-bottom: 1px solid var(--gray-ccc); min-height: 250px; box-sizing: border-box; background-color: var(--gray-f2f2f2); margin-top: 5px;}
.podpora .tickets.noticket {text-align: center; font-family: Poppins; font-size: 16pt; padding: 200px 30px 50px 30px; background-image: url('img/icons/support/empty.svg'); background-position: center 50px; background-size: 100px;}
.podpora .tickets .ticket {display: grid; grid-template-columns: 50px 1fr 160px 140px; grid-column-gap: 10px; border-bottom: 1px solid var(--gray-ccc);}
.podpora .tickets .ticket:nth-child(odd) {background-color: var(--white);}
.podpora .tickets .ticket > div {justify-self: center; align-self: center; padding: 5px 0;}
.podpora .ticket .point span {width: 30px; height: 30px; display: block; background-size: contain; background-position: center;}
.podpora .ticket.answered .point span {background-image: url('img/icons/support/replied.svg');}
.podpora .ticket.closed .point span {background-image: url('img/icons/support/closed.svg');}
.podpora .ticket.waiting .point span {background-image: url('img/icons/support/waiting.svg');}
.podpora .tickets .ticket .title, .podpora .tickets .ticket .last {justify-self: start;}
.podpora .tickets .ticket .title a {font-family: Poppins,Arial; font-size: 12pt; margin-bottom: 5px;}
.polls h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin-top: 10px;}
.polls .detail {width: 50%; margin-right: 30px; padding-right: 8px; float: left; box-sizing: border-box;}
.polls .gline {transition: all 1.5s ease; text-align: right; font-size: 9pt; overflow: hidden; color: #fff; color: var(--white);}
.polls .grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); grid-gap: 16px;}
.polls .nothing {background-image: url('img/graphic/polls/web.svg'); background-size: auto 120px; background-position: right top; padding-top: 130px; text-align: center; font-size: 22pt; position: relative; top: -30px; font-family: Poppins, Arial; padding-bottom: 150px;}
.polls .poll {border: 1px solid #555; border-color: var(--gray-555); border-radius: 5px; overflow: hidden; background-color: #f2f2f2; background-color: var(--gray-f2f2f2);}
.polls .poll.answered {border-color: #ccc; border-color: var(--gray-ccc);}
.polls .poll h2 {font-family: Poppins, Arial; font-size: 12pt; padding: 10px; margin: 0; background-color: #f2f2f2; background-color: var(--gray-f2f2f2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 45px; border-bottom: 1px dashed #ccc; border-bottom-color: var(--gray-ccc); border-radius: 5px 5px 0 0;}
.polls .poll .answer {font-weight: bold; padding: 10px 20px; cursor: pointer; color: #333; color: var(--gray-333); position: relative; margin: 0 -10px; height: 16px; border-top: 1px solid transparent; border-bottom: 1px solid transparent;}
.polls .poll .answer.answered {background-color: #fff; background-color: var(--white); border-top: 1px solid #ccc; border-top-color: var(--gray-ccc); border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); color: #000; color: var(--black);}
.polls .poll .answer:hover > div {color: #000; color: var(--black); text-decoration: underline;}
.polls .poll .answer.answered:hover > div {text-decoration: none;}
.polls .poll .answer > div {white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; max-width: 70%; float: left;}
.polls .poll .answer .bar {position: absolute; height: 1px; bottom: 7px; width: 100%; padding-right: 40px; box-sizing: border-box;}
.polls .poll .answer .bar > span {height: 100%; display: block;}
.polls .poll .answer.answered .bar {height: 3px; bottom: 5px;}
.polls .poll .answer .cube {float: left; width: 12px; height: 12px; border-radius: 3px; margin-right: 10px; position: relative; top: 1px;}
.polls .poll .answer .value {float: right; font-weight: normal; text-decoration: none!important; color: #000; color: var(--black);}
.polls .poll .answer.answered .value {font-weight: bold;}
.polls .poll .answers {background-color: #f2f2f2; background-color: var(--gray-f2f2f2); border-top: 1px dashed #ccc; border-top-color: var(--gray-ccc); border-radius: 0 0 5px 5px; padding: 5px 0;}
.polls .poll .graph {height: 150px; background-color: #fff; background-color: var(--white);}
.polls .poll .pie {text-align: center; background-color: #fff; background-color: var(--white); padding: 25px 0; position: relative;}
.polls .poll .pie .commentsicon {position: absolute; top: 50px; left: 10px; width: 30px; height: 30px; background-size: 30px 60px; background-position: top; background-image: url('img/icons/polls/bubble.svg'); cursor: pointer; font-size: 8pt; font-weight: bold; text-align: center; padding-top: 7px; overflow: hidden; box-sizing: border-box; color: var(--link-color);}
.polls .poll .pie .commentsicon:hover {background-position: bottom;}
.polls .poll .pie .hide {position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background-size: 30px 60px; background-position: top; background-image: url('img/icons/polls/hide.svg'); cursor: pointer;}
.polls .poll .pie .hide:hover {background-position: bottom;}
.polls .poll .pie .onlyfor {position: absolute; right: 5px; top: 10px; width: 30px;}
.polls .poll .pie .onlyfor > div {width: 30px; height: 30px; margin-bottom: 10px; background-size: contain; background-position: center; cursor: help;}
.polls .rw {float: left; width: calc(50% - 30px);}
.polls .rw .gender {width: 20px; height: 20px; background-size: contain; background-position: center;}
.polls .rw .gendergraph {height: 30px; position: relative; top: -25px; width: 100%; border: 1px solid #555; border-color: var(--gray-555); background-color: #0074d9; box-sizing: border-box; grid-column: 2;}
.polls .rw .gendergraph:before {content: ''; border-right: 1px solid #555; border-right-color: var(--gray-555); height: 50px; margin-left: 50%; margin-top: -10px; position: absolute;}
.polls .rw .gendergraph .gline {width: 0; height: 100%;}
.polls .rw .graph .colors {clear: both; float: left; width: 10%; box-sizing: border-box; border-right: 1px solid #555; border-right-color: var(--gray-555); padding: 10px 5px; position: relative; margin-top: 10px;}
.polls .rw .graph .colors .color {width: 80%; margin: 20px 10%; height: 20px; border-radius: 3px;}
.polls .rw .graph .lans, .polls .rw .graph .rans {float: left; width: 45%; box-sizing: border-box; border-right: 1px solid #555; border-right-color: var(--gray-555); padding: 10px 0; position: relative; margin-top: 10px;}
.polls .rw .graph .rans {transform: scaleX(-1); border-left: 1px solid #555; border-left-color: var(--gray-555); border-right: 0;}
.polls .rw .graph .lans > div {width: 0; height: 20px; margin: 20px 0; background-color: #ff4136;}
.polls .rw .graph .rans > div {width: 0; height: 20px; margin: 20px 0; background-color: #0074d9;}
.polls .rw .graph .xaxis {clear: both; border-top: 1px solid #555; border-top-color: var(--gray-555); padding-top: 10px; position: relative; top: -8px; margin-bottom: 20px;}
.polls .prefgraph {clear: both; padding-top: 30px; margin-bottom: 50px;}
.polls .prefgraph .container {display: grid; grid-template-columns: 250px auto;}
.polls .prefgraph .graph {box-sizing: border-box; border: 1px solid #555; border-color: var(--gray-555); border-top: 0; position: relative;}
.polls .prefgraph .graph:after {content: ''; border-right: 1px dashed #555; border-right-color: var(--gray-555); width: 0; position: absolute; top: 0; bottom: -10px; left: 75%;}
.polls .prefgraph .graph:before {content: ''; border-right: 1px dashed #555; border-right-color: var(--gray-555); width: 0; position: absolute; top: 0; bottom: -10px; left: 50%;}
.polls .prefgraph .graph .gline {width: 0; height: 10px; margin: 5px 0; font-size: 7pt;}
.polls .prefgraph .graph > span {border-right: 1px dashed #555; border-right-color: var(--gray-555); width: 0; position: absolute; top: 0; bottom: -10px; left: 25%;}
.polls .prefgraph .select {justify-content: center; display: flex; align-items: center;}
.polls .win {display: none;}
.profile > .header {background-color: #888; background-color: var(--gray-888); position: relative; background-position: center; background-size: cover; height: 200px; margin: -15px -25px 0 -25px; padding: 15px;}
.profile > .header h1 {color: #fff; text-shadow: 2px 2px 2px #000; margin-bottom: 5px; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.profile > .header .srsn {font-family: Poppins, Arial; font-size: 9pt; color: #fff; text-shadow: 2px 2px 2px #000; position: absolute; cursor: pointer;}
.profile > .header .age, .profile > .header .home {font-family: Poppins, Arial; font-size: 9pt; color: #fff; text-shadow: 2px 2px 2px #000;}
.profile > .header .age {font-weight: bold; margin-top: 80px;}
.profile > .header .buttons {position: absolute; bottom: 8px; right: 10px;}
.profile > .header .buttons a {margin-left: 15px;}
.profile > .header > .change {background-color: rgba(212,212,212,0.9); width: 25px; height: 25px; border: 1px solid #fff; border-color: var(--white); border-radius: 5px; background-image: url('img/icons/others/pencil.svg'); background-position: center; background-size: 16px; cursor: pointer; visibility: hidden; position: absolute; top: 5px; right: 5px; z-index: 6;}
.profile > .header:hover > .change {visibility: visible; animation: showusereditbtn 0.2s ease-out forwards; opacity: 1;}
.profile > .header .icons {height: 34px;}
.profile > .header .icons img {background-size: 32px 32px; background-position: 2px 2px; padding: 0 2px 2px 0; margin-right: 5px;}
.profile > .header > .user {float: right; width: 200px; margin-top: -10px;}
.profile > .header > .user .photo {border: 1px solid #fff; border-color: var(--white); cursor: pointer; background-color: #fff; background-color: var(--white); width: 150px; height: 150px; margin: 20px auto 30px auto; background-position: center; background-size: cover; border-radius: 500px; position: relative; z-index: 3;}
.profile > .header > .user .photo .change {background-color: rgba(212,212,212,0.9); color: #000; padding: 8px 15px 8px 30px; width: 40px; margin: 60px 30px; border: 1px solid #fff; border-color: var(--white); border-radius: 5px; background-image: url('img/icons/others/pencil.svg'); background-position: 5px center; background-size: 16px; cursor: pointer; visibility: hidden;}
.profile > .header > .user .photo:hover .change {visibility: visible; animation: showusereditbtn 0.2s ease-out forwards; opacity: 1;}
.profile > .header > .user .pie {width: 180px; height: 180px; margin: 4px auto -186px auto; position: relative; z-index: 2; cursor: help;}
.profile > .notExist {margin: 50px 0; background-color: var(--highlight); border-radius: 5px; padding: 30px 30px 30px 160px; background-image: url('/img/icons/profile/dead.svg'); background-size: 100px; background-position: 30px center; font-family: Poppins, Arial; font-size: 22pt; text-align: center; min-height: 100px; box-sizing: border-box;}
.profile > .notExist .reason {font-size: 14pt;}
.profile > .usermenu {border-bottom: 1px solid #ddd; border-bottom-color: var(--gray-ddd); background-color: #fff; background-color: var(--white); display: flex; margin: 0 -25px 15px -25px;}
.profile > .usermenu a {border-right: 1px solid #ddd; border-right-color: var(--gray-ddd); padding: 10px; font-weight: bold; text-decoration: none; flex: 1; text-align: center; transition:all 0.5s ease;}
.profile > .usermenu a:hover {background-color: #ddd; background-color: var(--gray-ddd); text-decoration: underline;}
.profile > .usermenu a:last-of-type {border-right: none;}
.profile > .usermenu a.sel {color: #000; color: var(--black); cursor: default; text-decoration: none; background-color: #fff; background-color: var(--white); position:relative;}
.profile > .usermenu a.sel:after, .profile > .usermenu a.sel:before {bottom: -1px;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}
.profile > .usermenu a.sel:after {border-color: rgba(255, 255, 255, 0);border-bottom-color: #fff; border-bottom-color: var(--white);border-width: 6px;margin-left: -6px;}
.profile > .usermenu a.sel:before {border-color: rgba(221, 221, 221, 0);border-bottom-color: #ddd; border-bottom-color: var(--gray-ddd);border-width: 7px;margin-left: -7px;}
.profile > .userwindows {position: relative; overflow: hidden; margin-left: -25px; margin-right: -25px; padding: 0 25px;}
.profile > .userwindows .userwindow {display: none; background-color: #fff; background-color: var(--white); position: relative; z-index: 1;}
.profile > .userwindows .userwindow.sel {z-index: 2; display: block; transform: scale(1); transition: all 0.2s;}
.profile > .userwindows .userwindow.sel.dismiss {transform: scale(1.5); opacity: 0;}
.profile > .userwindows .uw1 .aboutme, .profile > .userwindows .uw1 .mynotes .notes {border: 1px solid #ccc; border-color: var(--gray-ccc); padding: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 20px; color: #555; color: var(--gray-555); position: relative;}
.profile > .userwindows .uw1 .aboutme .content {max-height: 100px; overflow: hidden;}
.profile > .userwindows .uw1 .aboutme .header, .profile > .userwindows .uw1 .mynotes .notes .header {margin: -10px -10px 10px -10px; background-color: #ccc; background-color: var(--gray-ccc); padding: 5px 10px 5px 40px; box-sizing: border-box; font-family: Poppins, Arial; font-size: 11pt; color: #555; color: var(--gray-555); background-image: url('img/icons/profile/me.svg'); background-position: 10px center; background-size: 20px;}
.profile > .userwindows .uw1 .aboutme .header a, .profile > .userwindows .uw1 .aboutme .more a {float: right; color: #555; color: var(--gray-555); font-family: Poppins, Arial;}
.profile > .userwindows .uw1 .aboutme .more {background-image:  linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); padding: 50px 20px 10px 0; text-align: right; position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box;}
.profile > .userwindows .uw1 .bdsm {background-image: url('img/icons/profile/hotlink_bdsm.svg'); float: right;}
.profile > .userwindows .uw1 .hotlink {padding: 6px 0 6px 25px; background-position: left center; background-size: auto 16px; color: #888; color: var(--gray-888);}
.profile > .userwindows .uw1 .hotlink:nth-child(even) {justify-self: right;}
.profile > .userwindows .uw1 .hotlink span {color: #000; color: var(--black);}
.profile > .userwindows .uw1 .hotlinks {border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); margin-bottom: 15px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
.profile > .userwindows .uw1 .lastactivity {background-image: url('img/icons/profile/hotlink_clock.svg'); }
.profile > .userwindows .uw1 .membersince {background-image: url('img/icons/profile/hotlink_calendar.svg');}
.profile > .userwindows .uw1 .mynotes .notes .header {background-image: url('img/icons/profile/mynotes_notes.svg'); display: grid; grid-template-columns: 1fr 100px;}
.profile > .userwindows .uw1 .mynotes .notes .header > a {display: inline-block; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.profile > .userwindows .uw1 .mynotes .notes .header .savebtn {text-align: right; display: none; color: var(--black);}
.profile > .userwindows .uw1 .mynotes .notes .header .savebtn.disabled {color: var(--gray-888); text-decoration: none;}
.profile > .userwindows .uw1 .mynotes .notes .tags {border-top: 1px dashed var(--gray-888); margin: 10px -10px 0 -10px; padding: 10px;}
.profile > .userwindows .uw1 .mynotes .notes .tags .tag {display: inline-block; border: 1px solid var(--gray-555); padding: 5px 10px 5px 32px; border-radius: 50px; cursor: pointer; margin: 0 10px 10px 0; background-size: 16px; background-position: 10px center; opacity: 0.8;}
.profile > .userwindows .uw1 .mynotes .notes .tags .tag:hover {border-color: var(--black); color: var(--black); opacity: 1;}
.profile > .userwindows .uw1 .mynotes .notes .tags .tag.sel {border-color: var(--link-color); background-color: var(--link-color); color: #fff; opacity: 1;}
.profile > .userwindows .uw1 .mynotes .notes .tags .tag.disabled {border-color: var(--gray-888); background-color: var(--gray-333); color: #fff; opacity: 1;}
.profile > .userwindows .uw1 .mynotes .notes, .profile > .userwindows .uw1 .mynotes .notes .tags {padding-bottom: 0; position: relative;}
.profile > .userwindows .uw1 .mynotes .premium {position: absolute; top: 0; padding-top: 16px; left: 0; width: 100%; height: 100%; display: grid; align-items: center; justify-items: center; color: var(--black); z-index: 2;}
.profile > .userwindows .uw1 .mynotes .premium::after {content: ""; position: absolute; top: 32px; left: 0; width: 100%; height: 100%; background-color: var(--white); opacity: 0.8; z-index: -1;}
.profile > .userwindows .uw1 .partners {margin-bottom: 20px;}
.profile > .userwindows .uw1 .partners .partner {background-image: url('img/icons/profile/blue_heart.svg'); background-size: auto 16px; background-position: left bottom; padding-left: 25px; margin-bottom: 5px;}
.profile > .userwindows .uw1 .partners .partner.lookfor {background-image: url('img/icons/profile/blue_heart_arrow.svg'); margin-top: 15px;}
.profile > .userwindows .uw1 .partners .partner a {color: #555; color: var(--gray-555); border: 1px solid #ccc; border-color: var(--gray-ccc); background-color: #eee; background-color: var(--gray-eee); border-radius: 50px; padding: 5px 10px 5px 2px; text-decoration: none;}
.profile > .userwindows .uw1 .partners .partner a:hover {background-color: #fff; background-color: var(--white); color: var(--link-color); border-color: var(--link-color);}
.profile > .userwindows .uw1 .partners .partner a span {display: inline-block; width: 21px; height: 21px; border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 50px; background-position: center; background-size: cover; margin-right: 8px; position: relative; top: 7px;}
.profile > .userwindows .uw1 .photos {border: 1px solid #ccc; border-color: var(--gray-ccc); padding: 1px; border-radius: 5px; overflow: hidden; margin-bottom: 20px;}
.profile > .userwindows .uw1 .photos .content {display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); grid-gap: 2px;}
.profile > .userwindows .uw1 .photos .content a {height: 120px; box-sizing: border-box; background-position: center; background-size: cover; position: relative;}
.profile > .userwindows .uw1 .photos .content a > .gallery {width: 20px; height: 20px; position: absolute; bottom: 15px; right: 15px; background-image: url('img/icons/profile/gallery_black.svg'); background-size: 20px 20px;}
.profile > .userwindows .uw1 .photos .content a > .gallery:before {display: block; content: ''; background-image: url('img/icons/profile/gallery_white.svg'); background-size: 20px 20px; width: 20px; height: 20px; position: relative; top: -1px; left: -1px;}
.profile > .userwindows .uw1 .photos .header {flex: 1 0 100%; margin: -1px -1px 1px -1px; background-color: #eee; background-color: var(--gray-eee); padding: 5px 0 5px 40px; box-sizing: border-box; font-family: Poppins, Arial; font-size: 11pt; color: #555; color: var(--gray-555); background-image: url('img/icons/profile/camera.svg'); background-position: 10px center; background-size: 20px;}
.profile > .userwindows .uw1 .photos .header a, .profile > .userwindows .uw1 .mynotes .notes .header a {color: #555; color: var(--gray-555);}
.profile > .userwindows .uw1 .punishment {border: 1px solid #c00; padding: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 20px; color: #555; color: var(--gray-555);}
.profile > .userwindows .uw1 .punishment a {float: right; color: #c00; font-family: Poppins, Arial;}
.profile > .userwindows .uw1 .punishment .header {margin: -10px -10px 10px -10px; background-color: #c00; padding: 5px 0 5px 40px; box-sizing: border-box; font-family: Poppins, Arial; font-size: 11pt; color: #fff; color: var(--white); background-image: url('img/icons/profile/punishment.svg'); background-position: 10px center; background-size: 20px;}
.profile > .userwindows .uw1 .punishment li span {color: #c00;}
.profile > .userwindows .uw1 .sexualorientation {background-image: url('img/icons/profile/hotlink_condom.svg'); float: right;}
.profile > .userwindows .uw2 .matchmaker {min-height: 60px;}
.profile > .userwindows .uw2 .matchmaker .sex, .profile > .userwindows .uw2 .matchmaker .age, .profile > .userwindows .uw2 .matchmaker .ds, .profile > .userwindows .uw2 .matchmaker .desc {color: #555; color: var(--gray-555); margin-left: 30px; background-image: url('img/icons/profile/mm_sex.svg'); padding: 2px 0 5px 25px; background-size: 20px; line-height: 1.5;}
.profile > .userwindows .uw2 .matchmaker .age {background-image: url('img/icons/profile/mm_age.svg');}
.profile > .userwindows .uw2 .matchmaker .desc {background-image: url('img/icons/profile/mm_desc.svg');}
.profile > .userwindows .uw2 .matchmaker .desc div {color: #aaa; color: var(--gray-aaa);}
.profile > .userwindows .uw2 .matchmaker .ds {background-image: url('img/icons/profile/mm_ds.svg');}
.profile > .userwindows .uw2 .matchmaker .love {background-image: url('img/icons/profile/mm_love.svg'); padding: 8px 15px 8px 35px; background-size: 15px; background-position: 10px; float: right; border: 1px solid #f20000; border-radius: 100px; color: #555; color: var(--gray-555); transition: all 1.0s ease;}
.profile > .userwindows .uw2 .matchmaker .love.yes {background-image: url('img/icons/profile/mm_love_yes.svg'); background-color: #fee}
.profile > .userwindows .uw2 .matchmaker .status {background-image: url('img/icons/profile/blue_heart_arrow.svg'); padding: 5px 0 5px 35px; background-size: 25px; margin-bottom: 5px;}
.profile > .userwindows .uw2 .match {margin-top: 20px;}
.profile > .userwindows .uw2 .match .about {font-family: Poppins, Arial; font-size: 11pt; color: #555; color: var(--gray-555); margin: 5px 0 15px 0;}
.profile > .userwindows .uw2 .match .header {background-color: #f20000; color: #fff; color: var(--white); padding: 5px 15px 5px 60px; background-image: url('img/icons/profile/mm_match.svg'); background-position: 15px; background-size: 35px; font-family: Poppins, Arial; font-size: 18pt; border-radius: 5px;}
.profile > .userwindows .uw2 .match .matches {display: flex; flex-wrap: wrap; margin-top: 15px;}
.profile > .userwindows .uw2 .match .matches .m {flex: 1 0 40%; margin: 10px 10px 15px 10px; background-position: left top; background-size: 40px; box-sizing: border-box; padding-left: 50px; padding-bottom: 15px; border-bottom: 1px solid #eee; border-bottom-color: var(--gray-eee);}
.profile > .userwindows .uw2 .match .matches .m.astrology {background-image: url('img/icons/profile/mm_zodiac.svg');}
.profile > .userwindows .uw2 .match .matches .m.chinese {background-image: url('img/icons/profile/mm_chinese_zodiac.svg');}
.profile > .userwindows .uw2 .match .matches .m.numerology {background-image: url('img/icons/profile/mm_numerology.svg');}
.profile > .userwindows .uw2 .match .matches .m.overall {background-image: url('img/icons/profile/mm_overall.svg');}
.profile > .userwindows .uw2 .match .matches .m.practices {background-image: url('img/icons/profile/mm_practices.svg');}
.profile > .userwindows .uw2 .match .matches .m.vision {background-image: url('img/icons/profile/mm_vision.svg');}
.profile > .userwindows .uw2 .match .matches .m .note {color: #555; color: var(--gray-555);}
.profile > .userwindows .uw2 .match .matches .m .result {text-align: center; font-family: Poppins, Arial; font-size: 20pt; height: 50px; overflow: hidden;}
.profile > .userwindows .uw2 .match .matches .m .title {font-family: Poppins, Arial; font-size: 12pt;}
.profile > .userwindows .uw2 .pm {text-align: center; clear: both; margin-top: 20px;}
.profile > .userwindows .uw2 .pm .warn {margin: 20px 15%; background-color: #fff9df; background-color: var(--warn-color); border: 1px solid #fff9df; border-color: var(--warn-color); border-radius: 5px; padding: 60px 20px 10px 20px; background-image: url('img/icons/errors/warning.svg'); background-position: center 10px; text-align: left; background-size: 40px;}
.profile > .userwindows .uw2 .pm .warn span {font-weight: bold; display: block; margin-bottom: 10px;}
.profile > .userwindows .uw3 .addtofriend, .profile > .userwindows .uw3 .removefromfriend {border: 1px solid #2480db; border-color: var(--link-color); border-radius: 5px; overflow: hidden;}
.profile > .userwindows .uw3 .addtofriend .content, .profile > .userwindows .uw3 .removefromfriend .content {padding: 10px 15px; color: #555; color: var(--gray-555);}
.profile > .userwindows .uw3 .addtofriend .content .button, .profile > .userwindows .uw3 .removefromfriend .content .button {float: right; margin-left: 20px;}
.profile > .userwindows .uw3 .addtofriend .header, .profile > .userwindows .uw3 .removefromfriend .header {background-color: #2480db; background-color: var(--link-color); color: #fff; color: var(--white); font-family: Poppins, Arial; font-size: 11pt; padding: 5px 10px;}
.profile > .userwindows .uw3 .removefromfriend {border-color: var(--gray-888); display: none;}
.profile > .userwindows .uw3 .removefromfriend .header {background-color: var(--gray-888);}
.profile > .userwindows .uw3 .friends {margin-top: 30px;}
.profile > .userwindows .uw3 .friends .content {display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-gap: 10px;}
.profile > .userwindows .uw3 .friends .content .friend {box-sizing: border-box; border: 1px solid #ccc; border-color: var(--gray-ccc); overflow: hidden; display: grid; grid-template-columns: 100px 1fr; grid-gap: 10px;}
.profile > .userwindows .uw3 .friends .content .friend .middle {color: #888; color: var(--gray-888); width: 100%; overflow: hidden;}
.profile > .userwindows .uw3 .friends .content .friend .middle > a {display: block; height: 20px; margin: 10px 0 -3px 0; font-weight: bold; font-size: 11pt; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.profile > .userwindows .uw3 .friends .content .friend .middle .from {height: 50px; overflow: hidden; margin-top: 10px; line-height: 1.3;}
.profile > .userwindows .uw3 .friends .content .friend .photo {width: 100px; height: 100px; border-right: 1px solid #ccc; border-right-color: var(--gray-ccc); background-position: center; background-size: cover;}
.profile > .userwindows .uw3 .friends .header {font-family: Poppins, Arial; font-size: 13pt; margin-bottom: 10px; color: #555; color: var(--gray-555); background-color: #eee; background-color: var(--gray-eee); padding: 8px 0 8px 50px; border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); background-image: url('img/icons/profile/friendship.svg'); background-position: 10px; background-size: 25px; border-radius: 5px 5px 0 0;}
.profile > .userwindows .uw4 .blogs .blog {border: 1px solid #ccc; border-color: var(--gray-ccc); box-shadow: 1px 1px 1px #ccc; overflow: hidden; border-radius: 5px; margin-top: 15px; padding: 5px 20px 10px 20px; line-height: 1.5;}
.profile > .userwindows .uw4 .blogs .blog:last-of-type {margin-bottom: 0;}
.profile > .userwindows .uw4 .blogs .blog a.title {font-size: 18pt;}
.profile > .userwindows .uw4 .blogs .blog .footer {background-color: #eee; background-color: var(--gray-eee); margin: 15px -20px -10px -20px; padding: 10px;}
.profile > .userwindows .uw4 .blogs .blog .footer .date {float: right; color: #555; color: var(--gray-555);}
.profile > .userwindows .uw4 .viewblog {border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; overflow: hidden; margin-bottom: 40px;}
.profile > .userwindows .uw4 .viewblog .content {padding: 10px 15px; color: #555; color: var(--gray-555);}
.profile > .userwindows .uw4 .viewblog .content .button {float: right; margin-left: 20px;}
.profile > .userwindows .uw4 .viewblog .header {background-color: #eee; background-color: var(--gray-eee); font-family: Poppins, Arial; font-size: 11pt; padding: 5px 10px;}
.profile > .userwindows .uw5 .others .other {margin: 50px 0 0 0; color: #555; color: var(--gray-555); min-height: 50px; background-position: left; background-size: auto 50px; padding: 5px 0 5px 60px;}
.profile > .userwindows .uw5 .others .other > a {float: right; margin: 20px 0 0 30px;}
.profile > .userwindows .uw5 .others .other .content .title a {text-decoration: none; font-family: Poppins, Arial; font-size: 14pt; margin-bottom: 5px;}
.profile > .userwindows .uw5 .others .other .content .title a:hover {text-decoration: underline;}
.profile > .userwindows .uw5 .others .other .content .subtitle {line-height: 1.5;}
.profile > .userwindows .uw5 .others .other.disabled .title a, .profile > .userwindows .uw5 .others .other.disabled .title a:hover {cursor: default; color: #888; color: var(--gray-888); text-decoration: none;}
.profile > .userwindows .uw5 .others .other.disabled > a, .profile > .userwindows .uw5 .others .other.disabled > a:hover {cursor: default; color: #eee; color: var(--gray-eee); background-color: #888; background-color: var(--gray-888); border-color: #888; border-color: var(--gray-888); text-decoration: none;}
.profile > .userwindows .uw5 .others .other.dating {background-image: url('img/icons/profile/dating.svg');}
.profile > .userwindows .uw5 .others .other.disabled.dating {background-image: url('img/icons/profile/dating_gray.svg');}
.profile > .userwindows .uw5 .others .other.discussion {background-image: url('img/icons/profile/discussion.svg');}
.profile > .userwindows .uw5 .others .other.disabled.discussion {background-image: url('img/icons/profile/discussion_gray.svg');}
.profile > .userwindows .uw5 .others .other.meetings {background-image: url('img/icons/profile/meeting.svg');}
.profile > .userwindows .uw5 .others .other.disabled.meetings {background-image: url('img/icons/profile/meeting_gray.svg');}
.profile > .userwindows .uw5 .others .other.tales {background-image: url('img/icons/profile/tales.svg');}
.profile > .userwindows .uw5 .others .other.disabled.tales {background-image: url('img/icons/profile/tales_gray.svg');}
.profile > .userwindows .uw5 .report {max-height: 10px;}
.profile > .userwindows .uw5 .report textarea {padding: 5px; line-height: 1.5; box-sizing: border-box; height: 80px; width: 100%; margin: 15px 0; min-width: 100%; max-width: 100%; min-height: 80px; max-height: 400px; resize: vertical;}
.profile > .userwindows .uw5 .report .send {text-align: right;}
.reviews h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin-top: 10px;}
.reviews .collection {display: grid; grid-column-gap: 15px; grid-row-gap: 35px; grid-template-columns: repeat( auto-fill, minmax(185px,1fr) );}
.reviews .collection a.item {display: block; border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; overflow: hidden; position: relative; padding-bottom: 20px;}
.reviews .collection a.item:hover {border-color: #888; border-color: var(--gray-888); box-shadow: 0 0 2px #888;}
.reviews .collection a.item .img {display: block; height: 250px; background-size: cover; background-position: center;}
.reviews .collection a.item .newicon {position: absolute; top: 10px; right: 0;}
.reviews .collection a.item .rating-star {position: absolute; right: 10px; bottom: 10px;}
.reviews .collection a.item .title {text-align: center; font-weight: bold; font-family: Poppins, Arial; font-size: 10pt; padding: 10px 10px 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  overflow: hidden; max-height: 50px; box-sizing: border-box; margin-bottom: 10px;}
.reviews .collection a.item .year {display: inline-block; color: #555; color: var(--gray-555); text-decoration: none!important; position: absolute; left: 10px; bottom: 10px;}
.reviews .rev {display: grid; grid-template-columns: 1fr 300px; grid-column-gap: 30px;}
.reviews .rev .lpan .content {line-height: 1.5; padding-left: 20px; text-align: justify;}
.reviews .rev .lpan .comment .commentlinks .rating-star {position: relative;}
.reviews .rev .lpan .comment .commentlinks .rating-star .rating-value {position: absolute; top: 0;}
.reviews .rev .lpan .comments .reply_win select {margin-bottom: 15px;}
.reviews .rev .lpan .grid {width: 100%; margin: 30px 0;}
.reviews .rev .lpan .grid tr td {border-bottom: 1px solid #ddd; border-bottom-color: var(--gray-ddd); padding: 10px 0;}
.reviews .rev .lpan .grid .title {font-weight: bold; color: #555; color: var(--gray-555); padding-left: 20px; width: 120px; vertical-align: top;}
.reviews .rev .rpan {position: relative;}
.reviews .rev .rpan img {max-width: 100%; width: 100%;}
.reviews .rev .rpan .rating {margin-top: 30px; text-align: center;}
.reviews .rev .rpan .rating .rating-star {width: 120px; height: 24px;}
.reviews .rev .rpan .user {margin: 30px 20px 0 20px; border: 1px solid #ccc; border-color: var(--gray-ccc); color: #555; color: var(--gray-555); height: 40px; padding: 2px 10px 2px 2px; overflow: hidden; background-color: #f2f2f2; background-color: var(--gray-f2f2f2); border-radius: 100px; line-height: 1.5;}
.reviews .rev .rpan .user .img {width: 40px; height: 40px; float: left; background-size: cover; background-position: center; margin-right: 15px; border-radius: 50%;}
.reviews .rev .rpan .user .name a {display: inline-block; max-width: calc(100% - 60px); white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; font-family: Poppins, Arial; font-size: 12pt;}
.reviews .tab1 td {padding: 10px 5px; border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc);}
.reviews .tab1 td:first-of-type {font-weight: bold;}
.reviews .tab1 tr:hover td {background-color: var(--highlight);}
.reviews .tab1 tr:last-of-type td {border-bottom: 2px solid #888; border-bottom-color: var(--gray-888);}
.reviews .tab1 th {text-align: left; font-family: Poppins, Arial; font-size: 11pt; padding: 8px 5px; border-bottom: 2px solid #888; border-bottom-color: var(--gray-888);}
.reviews .win {display: none;}
.settings .set {margin-bottom: 30px;}
.settings .set > .footer {padding: 5px 10px; color: var(--gray-888);}
.settings .set > .header {font-family: Poppins, Arial; padding: 5px 50px 5px 10px; border-bottom: 1px solid var(--gray-888); font-weight: bold;}
.settings .set > .header input {float: right; position: relative; left: 40px;}
.settings .set > .header input[type="button"] {position: relative; top: -5px;}
.slavecontracts h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin-top: 10px;}
.slavecontracts .list {display: grid; grid-template-columns: 1fr; grid-gap: 15px;}
.slavecontracts .list .row {display: grid; grid-template-areas: "dom plus sub action"; grid-template-columns: 1fr 40px 1fr 100px; grid-gap: 10px;}
.slavecontracts .list .row {border: 1px solid var(--gray-eee); background-color: var(--gray-f8f8f8); border-radius: 5px; padding: 10px;}
.slavecontracts .list .row > div {text-align: center; align-self: center;}
.slavecontracts .list .row > div a.item {display: grid; grid-template-columns: 1fr; width: 100%; grid-gap: 10px; border: 1px solid var(--gray-eee); border-radius: 3px; padding: 5px; background-color: var(--white); box-sizing: border-box;}
.slavecontracts .list .row > div a.item .img {border: 2px solid #0b78f0; border-radius: 50%; width: 50px; aspect-ratio: 1 / 1; box-sizing: border-box; background-size: cover; background-position: center; justify-self: center;}
.slavecontracts .list .row > div a.item.gender_f .img {border-color: #e70a41;}
.slavecontracts .list .row > div a.item .name {text-align: center!important; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.slavecontracts .list .row .action {grid-area: action; display: grid; grid-template-rows: 30px 1fr 30px; align-content: center; height: 100%;}
.slavecontracts .list .row .action .date {display: grid; align-content: end; color: var(--gray-aaa);}
.slavecontracts .list .row .action .number {display: grid; align-content: start; color: var(--gray-ccc);}
.slavecontracts .list .row .action > span {align-self: center;}
.slavecontracts .list .row .dom {grid-area: dom; text-align: right; justify-content: end; display: grid; grid-template-columns: repeat(auto-fit, minmax(60px,1fr)); grid-gap: 5px;}
.slavecontracts .list .row .plus {grid-area: plus; font-size: 40pt; color: var(--gray-888);}
.slavecontracts .list .row .sub {grid-area: sub; text-align: left; display: grid; grid-template-columns: repeat(auto-fit, minmax(60px,1fr)); grid-gap: 5px;}
.stories h1 {clear: both; padding-top: 15px;}
.stories h1 .button {background-image: url('img/icons/buttons/add_white.svg'); float: right; margin-top: 10px;}
.stories h2.icon {background-size: auto 30px; padding-left: 35px;}
.stories .aside .user {display: block; border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 100px; height: 40px; padding: 5px 15px 5px 5px; text-decoration: none; transition: all 0.5s ease; margin-bottom: 15px;}
.stories .aside .user:hover {background-color: #fff; background-color: var(--white); border-color: #555; border-color: var(--gray-555);}
.stories .aside .user .img {display: block; float: left; width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; background-size: cover; background-position: center;}
.stories .aside .user .name {font-family: Poppins, Arial; font-size: 11pt; text-decoration: underline; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis; display: block;}
.stories .aside .user .stories {color: #555; color: var(--gray-555); display: block;}
.stories .button.image.back {float: right; margin-top: 10px; background-image: url('img/icons/buttons/back_gray.svg'); margin-left: 20px;}
.stories .button.image.nightmode {float: right; margin-top: 10px; background-image: url('img/icons/stories/night_off.svg'); margin-left: 50px;}
.stories .button.image.nightmode.sel {background-image: url('img/icons/stories/night_on.svg'); border-color: var(--link-color); color: var(--link-color); background-color: #fff; background-color: var(--white);0}
.stories .otherParts {border-top: 1px dashed #ccc; border-top-color: var(--gray-ccc); padding-top: 30px;}
.stories .parts li {font-size: 13pt; font-family: Poppins, Arial; margin-bottom: 10px;}
.stories .story {margin-bottom: 30px;}
.stories .story .txt {margin: 10px 20px 30px 20px; line-height: 1.5; font-size: 11pt;}
.stories .story .user {float: left; margin-right: 25px; position: relative;}
.stories .story .user:after {content: ''; position: absolute; border-style: solid; border-width: 8px 0 8px 6px; border-color: transparent #555; display: block; width: 0; z-index: 1; right: -12px; top: 7px;}
.stories .story .user a {width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; display: block; float: left; color: transparent; font-size: 0;}
.subscription {height: 30px; margin-bottom: 20px; font-size: 9pt;}
.subscription:last-of-type {margin-bottom: 0;}
.subscription .title {font-weight: bold; float: left;}
.subscription .progress {overflow: hidden; background-color: #ddd; background-color: var(--gray-ddd); height: 8px; clear: both;}
.subscription .progress > div {background-color: #2480db; background-color: var(--link-color); height: 8px;}
.subscription .remain {float: right;}
.userslist .list {display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); grid-gap: 10px; justify-content: space-between;}
.userslist .list .user {border: 1px solid var(--intense-blue-color); border-radius: 5px; background-color: #f8f8f8; background-color: var(--gray-f8f8f8); box-sizing: border-box; padding: 5px; position: relative;}
.userslist .list .user.f {border-color: #d00;}
.userslist .list .user .info .age {margin: -15px 0 10px 0; height: 34px; overflow: hidden; line-height: 1.3;}
.userslist .list .user .info .name {font-family: Poppins, Arial; color: var(--intense-blue-color); font-size: 11pt; margin: 5px 0 15px 0; white-space: nowrap; overflow: hidden!important; max-width: 120px; max-width: calc(100% - 120px); display: inline-block; text-overflow: ellipsis;}
.userslist .list .user.f .info .name {color: #d00;}
.userslist .list .user .info .row {display: flex; flex-wrap: wrap; margin-bottom: 5px;}
.userslist .list .user .info .row div {flex-grow: 1;}
.userslist .list .user .info .row div:first-of-type {color: #888; color: var(--gray-888);}
.userslist .list .user .info .row div:last-of-type {text-align: right;}
.userslist .list .user .photo {border: 1px solid #f8f8f8; border-color: var(--gray-f8f8f8); display: block; text-decoration: none; border-radius: 5px; width: 100px; min-height: 120px; height: 100%; background-position: center; background-size: cover; float: left; margin-right: 15px;}
.userslist .list .user .region {position: absolute; cursor: help; bottom: 5px; left: 60px; width: 40px; height: 30px; background-size: contain; background-position: center;}
.userslist .search, .mynotes .search {position: relative;}
.userslist .search:before, .mynotes .search:before {display: block; content: ""; width: 20px; height: 20px; background-size: 16px; background-image: url('img/icons/userslist/search.svg'); background-repeat: no-repeat; position: absolute; z-index: 2; top: 8px; left: 11px;}
.userslist .search .filter {display: inline-block; width: 30px; height: 30px; background-size: contain; background-image: url('img/icons/filter/filter.svg');}
.userslist .search .username, .mynotes .search .username {border-radius: 100px; padding-left: 35px; width: 250px; margin-bottom: 20px;}
.userslist .search .username:focus, .mynotes .search .username:focus {width: 100%;}
.vip .advantages .offers {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-gap: 15px;}
.vip .advantages .offers:after {content: ''; clear: both; display: block;}
.vip .advantages .offers .adv {overflow: hidden; box-sizing: border-box; border: 1px solid #ddd; border-color: var(--gray-ddd); border-radius: 5px; position: relative;}
.vip .advantages .offers .adv .desc {font-size: 9pt; color: #333; color: var(--gray-333); margin: 0 10px 50px 10px; font-family: Poppins, Arial; text-align: justify;}
.vip .advantages .offers .adv .img {height: 100px; background-position: center; background-size: cover;}
.vip .advantages .offers .adv .price {font-size: 13pt; font-weight: bold; color: #555; color: var(--gray-555); padding: 0 10px 0 10px; box-sizing: border-box; font-family: Poppins, Arial; text-align: right; position: absolute; bottom: 10px; width: 100%;}
.vip .advantages .offers .adv .price span {float: left; width: 20px; height: 20px; background-position: center; background-size: contain; position: relative; top: 2px; cursor: help;}
.vip .advantages .offers .adv .price span.el {background-image: url('img/icons/vip/electronic.svg');}
.vip .advantages .offers .adv .price span.snail {background-image: url('img/icons/vip/snail.svg');}
.vip .advantages .offers .adv .price .button {margin-left: 20px;}
.vip .advantages .offers .adv .title {font-size: 13pt; margin: 10px; color: var(--link-color);}
.vip .advantages .title {font-family: Poppins, Arial; font-size: 16pt; margin: 50px 0 20px 0;}
.vip .club {border: 1px solid #eee; border-color: var(--gray-eee); background-color: #eee; background-color: var(--gray-eee); padding: 15px; border-radius: 5px; background-image: url('img/backgrounds/vip.svg'); background-position: right 20px bottom; background-size: auto 250px;}
.vip .club ul li {margin-bottom: 5px; font-size: 11pt;}
.vip .club .buttons {text-align: center; width: 400px; margin: 20px 0;}
.vip .club .title {font-family: Poppins, Arial; color: var(--link-color); font-size: 14pt;}
.vip .club > .title {font-size: 18pt; padding: 3px 0 3px 50px; background-image: url('img/icons/vip/pass.svg'); background-position: left; background-size: contain; margin-bottom: 15px;}
.vip .club .subtitle {font-family: Poppins, Arial; color: #555; color: var(--gray-555); font-size: 12pt; margin-bottom: 10px;}


.bubble {position: relative; background: #fff; background: var(--white); border: 1px solid #ddd; border-color: var(--gray-ddd); box-sizing: border-box; padding: 10px; border-radius: 5px; z-index: 5;}
.bubble.down:after, .bubble.down:before, .bubble.up:after, .bubble.up:before, .bubble.downright:after, .bubble.downright:before, .bubble.upright:after, .bubble.upright:before {top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.bubble.down:after, .bubble.up:after, .bubble.downright:after, .bubble.upright:after {border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-top-color: var(--white); border-width: 10px; margin-left: -10px;}
.bubble.down:before, .bubble.up:before, .bubble.downright:before, .bubble.upright:before {border-color: rgba(221, 221, 221, 0); border-top-color: #ddd; border-top-color: var(--gray-ddd); border-width: 11px; margin-left: -11px;}
.bubble.downright:after, .bubble.downright:before {right: 0; left: auto;}
.bubble.up:after, .bubble.up:before {bottom: 100%; top: auto;}
.bubble.up:after, .bubble.upright:after {border-bottom-color: #fff; border-bottom-color: var(--white); border-top-color: transparent;}
.bubble.up:before, .bubble.upright:before {border-bottom-color: #ddd; border-bottom-color: var(--gray-ddd); border-top-color: transparent;}
.bubble.upright:after, .bubble.upright:before {bottom: 100%; right: 0; top: auto; left: auto;}
.bubbleemoji img {cursor: pointer; margin: 5px; height: 40px;}
.bubbleemoji .more {display: block; text-decoration: none; text-align: center; border: 1px solid var(--gray-aaa); background-color: var(--gray-eee); padding: 5px; color: var(--gray-555); border-radius: 2px;}
.bubbleemoji .more:hover {background-color: var(--white); border-color: var(--gray--888); color: var(--gray-333);}
.button {transition:all 0.3s ease; font-family: Poppins, Arial; font-size: 10pt; border: 1px solid #ddd; border-color: var(--gray-ddd); color: #333; color: var(--gray-333); text-decoration: none; background-color: #ddd; background-color: var(--button-color); padding: 3px 10px; border-radius: 5px; cursor: pointer; outline: none;}
.button.default {border: 1px solid #2480db; border-color: var(--link-color); color: #fff; color: var(--white); background-color: #2480db; background-color: var(--link-color);}
.button.image {padding-left: 30px; background-position: 8px; background-size: 14px; background-repeat: no-repeat;}
.button.image.right {padding-right: 30px; padding-left: 10px; background-position: right 8px center;}
.button.selected {border: 1px solid #063; color: #063; background-color: #fff; background-color: var(--white);}
.button:hover {background-color: #fff; background-color: var(--white); }
.button.default:hover {background-color: #65abf8;}
.button:disabled, .button:hover:disabled {background-color: #888; background-color: var(--gray-888); color: #eee; color: var(--gray-eee); cursor: default; border-color: #888; border-color: var(--gray-888);}
.center {text-align: center;}
.clear {clear: both; overflow: hidden; width: 0px; height: 0px;}
.left {float: left;}
.left.clear {clear: both; overflow: auto; padding: 0; width: auto; height: auto;}
.right {float: right;} 
.comments {width: 100%; margin-top: 30px; border-top: 1px dashed #ccc; border-top-color: var(--gray-ccc); padding-top: 10px; box-sizing: border-box;}
.comments h2 {display: block; width: 100%;}
.comments .comment {margin-top: 20px;}
.comments .comment .commentbody {margin-left: 55px; line-height: 1.5;}
.comments .comment .commentbody .commentlinks {margin-top: -2px; padding: 0 10px;}
.comments .comment .commentbody .commentlinks a {margin-right: 10px;}
.comments .comment .commentbody .commentlinks .date, .comments .comment .commentbody .commentlinks .edited {color: #888; color: var(--gray-888); float: right;}
.comments .comment .commentbody .commentlinks .edited {margin-right: 15px; cursor: help;}
.comments .comment .commentbody .commenttext {background-color: #eee; background-color: var(--gray-eee); border: 1px solid #eee; border-color: var(--gray-eee); border-radius: 10px; margin: 5px 0; padding: 5px 10px;}
.comments .comment .commentbody .commenttext a.user {font-weight: bold; margin-right: 10px;}
.comments .comment .commentbody .commenttext a.replyto {margin-right: 5px;}
.comments .comment .img {float: left; margin-right: 15px; border: 1px solid #ccc; border-color: var(--gray-ccc); background-size: cover; background-position: center; background-color: #eee; background-color: var(--gray-eee); width: 40px; height: 40px; border-radius: 100px; overflow: hidden;}
.comments .comment.owner .img {border: 2px solid var(--link-color);}
.comments .comment.owner .commentbody .commenttext {border: 1px solid var(--link-color);}
.comments .comment.owner .commentbody .commenttext a.user:after {content: ''; display: inline-block; width: 20px; height: 12px; background-image: url('/img/icons/common/star_full.svg'); background-position: center; background-size: contain; background-repeat: no-repeat;}
.comments .commentsloading {margin-bottom: 20px; height: 50px; background-image: url('img/preloader/ripple.svg'); background-position: center; background-size: contain;}
.comments .newcomment {border: 2px dashed #888; border-color: var(--gray-888); border-radius: 5px; padding: 20px 0; text-align: center; cursor: text; font-size: 12pt; color: #555; color: var(--gray-555);}
.comments .newcomment.editable {border: 1px solid var(--intense-blue-color); padding: 11px; text-align: left; cursor: auto; font-size: 10pt; color: #000; color: var(--black); min-height: 60px; max-height: 300px; overflow: auto;}
.comments .newcomment.editable:focus {border: 2px solid var(--intense-blue-color); padding: 10px;}
.comments .nextCommentsButton {padding-top: 10px;}
.commentoptions a {padding: 10px; text-decoration: none; display: block; color: var(--gray-333);}
.commentoptions a:hover {background-color: var(--gray-eee); color: var(--black);}
.events {clear: both; padding-top: 50px;}
.events .event {border: 1px solid #ddd; border-color: var(--gray-ddd); border-radius: 5px; overflow: hidden; box-shadow: 0 30px 0 #eee; margin-bottom: 20px; background-color: #fff; background-color: var(--white);}
.events .event:last-of-type {box-shadow: none;}
.events .event .content {font-size: 11pt; padding: 15px; line-height: 1.5;}
.events .event .header {border-bottom: 1px solid #ddd; border-bottom-color: var(--gray-ddd); height: 40px; padding: 5px 10px;}
.events .event .header .date {color: #888; color: var(--gray-888);}
.events .event .header .icon {float: left; width: 40px; height: 40px; border: 1px solid #ddd; border-color: var(--gray-ddd); border-radius: 50px; background-position: center; background-size: cover; margin: 0 15px 0 -5px;}
.events .event .header .info {float: left;}
.events .event .header .menu {float: right; font-family: Poppins, Arial; font-size: 18pt; text-decoration: none; color: #888; color: var(--gray-888);}
.events .event .header .menu:hover {color: #000; color: var(--black);}
.events .event .header .user {font-family: Poppins, Arial; font-size: 12pt; text-decoration: none;}
.events .event .header .user:hover {text-decoration: underline;}
.events .event > .likes {border-top: 1px solid #ddd; border-top-color: var(--gray-ddd); border-bottom: 1px solid #ddd; border-bottom-color: var(--gray-ddd); padding: 10px; margin: 15px; height: 16px;}
.events .event > .likes .btn {float: right;}
.events .event > .likes .btn .like {transition:all 0.5s ease; text-decoration: none; font-weight: bold; color: #555; color: var(--gray-555); padding: 6px 30px 6px 50px; border: 1px solid #fff; border-color: var(--white); border-radius: 5px; background-position: 20px center; background-size: 16px; background-image: url('img/icons/buttons/like.svg');}
.events .event > .likes .btn .like:hover {background-color: #eee; background-color: var(--gray-eee); border-color: #eee; border-color: var(--gray-eee);}
.events .event > .likes .status {float: left;}
.events .event > .likes .status a.like {text-decoration: none; padding: 6px 5px 6px 25px; background-position: 5px center; background-size: 16px; background-image: url('img/icons/buttons/likea.svg'); color: #555; color: var(--gray-555);}
.events .event .replies .my {display: flex; margin-bottom: 15px;}
.events .event .replies .my .icon {display: inline-block; flex: 0 0 30px; width: 30px; height: 30px; background-position: center; background-size: cover; border: 1px solid #ddd; border-color: var(--gray-ddd); border-radius: 50px; margin: 0 10px 0 15px;}
.events .event .replies .my .textarea {box-sizing: border-box; border: 1px solid #ddd; border-color: var(--gray-ddd); border-radius: 20px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; background-color: #eee; background-color: var(--gray-eee); padding: 5px 15px; line-height: 1.5; width: 100%; margin-right: 15px;}
.events .event .replies .next {margin: 0 0 10px 15px;}
.events .event .replies .others .comment {display: flex; margin-bottom: 15px;}
.events .event .replies .others .comment .container {flex: 1; box-sizing: border-box;}
.events .event .replies .others .comment .content {border: 1px solid #eee; border-color: var(--gray-eee); border-radius: 10px; background-color: #eee; background-color: var(--gray-eee); padding: 5px 10px; font-size: 9pt; margin-right: 15px;}
.events .event .replies .others .comment .content .from {text-decoration: none; font-weight: bold; margin-right: 10px;}
.events .event .replies .others .comment .content .from:hover, .homepage .events .event .replies .others .comment .content .to:hover {text-decoration: underline;}
.events .event .replies .others .comment .content .to {text-decoration: none; margin-right: 10px;}
.events .event .replies .others .comment .icon {display: inline-block; flex: 0 0 30px; width: 30px; height: 30px; background-position: center; background-size: cover; border: 1px solid #ddd; border-color: var(--gray-ddd); border-radius: 50px; margin: 0 10px 0 30px;}
.events .event .replies .others .comment .likes {text-align: right; font-size: 8pt; border: 1px solid #ddd; border-color: var(--gray-ddd); background-color: #fff; background-color: var(--white); float: right; padding: 2px; border-radius: 20px; margin: -5px 20px 0 0;}
.events .event .replies .others .comment .likes a.like {background-image: url('img/icons/buttons/likea.svg'); background-position: 5px center; background-size: 12px; padding: 5px 5px 5px 20px; text-decoration: none; color: #888; color: var(--gray-888);}
.events .event .replies .others .comment .menu {margin: 3px 0 0 10px; float: left;}
.events .event .replies .others .comment .menu .date {color: #888; color: var(--gray-888);}
.events .event .replies .others .comment .menu .like, .homepage .events .event .replies .others .comment .menu .reply, .homepage .events .event .replies .others .comment .menu .others {margin-right: 10px;}
.events .new {margin-bottom: 30px; border: 1px solid var(--gray-ccc); border-radius: 5px;}
.events .new .header {padding: 10px 0; margin: 0 10px; font-family: Poppins, Arial; font-size: 12pt; color: var(--link-color); border-bottom: 1px solid var(--gray-ccc);}
.events .new .input {display: grid; grid-template-columns: 60px 1fr;}
.events .new .input .img {background-position: center; background-size: cover; width: 40px; height: 40px; border-radius: 50%; margin: 10px;}
.events .new .input .txt {border-radius: 100px; background-color: var(--gray-eee); margin: 10px; box-sizing: border-box; padding: 10px; font-family: Poppins; color: var(--gray-333); cursor: pointer;}
.events .new .input .txt:hover {background-color: var(--gray-ddd);}
.filter_is_active {margin: 20px 0; padding: 10px 10px 10px 40px; background-image: url('img/icons/filter/filter.svg'); background-position: 10px; background-size: 20px; border-bottom: 2px solid var(--link-color);}
.filter_is_active .button {float: right; position: relative; top: -5px; margin-left: 5px;}
.gender_f {color: #e70a41;}
.gender_m {color: #0b78f0;}
.graywindow {border: 1px solid #ccc; border-color: var(--gray-ccc); border-radius: 5px; overflow: hidden; padding: 10px;}
.graywindow .content, .redwindow .content {line-height: 1.5;}
.graywindow .header {background-color: #ccc; background-color: var(--gray-ccc); color: #333; color: var(--gray-333); font-family: Poppins, Arial; font-size: 11pt; padding: 5px 10px; margin: -10px -10px 10px -10px;}
.graywindow .header.icon, .redwindow .header.icon {padding-left: 40px; background-position: 10px; background-size: 20px;}
.graywindow .header a {color: #555; color: var(--gray-555);}
.checkbox-contain *, .checkbox-contain *::before, .checkbox-contain *::after {box-sizing: content-box !important;}
.checkbox-contain input {position: absolute;z-index: -1;opacity: 0;}
.checkbox-contain span {line-height: 1.54;font-size: 1rem;font-family: inherit;}
.checkbox-contain {display: table;position: relative;padding-left: 2.15rem;cursor: pointer;margin-bottom: 0.53rem;}
.checkbox-contain input[type="checkbox"] ~ .checkbox-input {position: absolute;top: 3px;left: 0;height: 1.25rem;width: 1.25rem;background: rgba(241, 245, 248, 1);transition: background 250ms;border: 1px solid rgba(184, 194, 204, 1);border-radius: 0.125rem;}
.checkbox-contain input[type="radio"] ~ .checkbox-input {position: absolute;top: 0;left: 0;height: 1.25rem;width: 1.25rem;background: rgba(241, 245, 248, 1);transition: background 250ms;border: 1px solid rgba(184, 194, 204, 1);border-radius: 2.0rem;}
.checkbox-contain input[type="checkbox"] ~ .checkbox-input::after {content: '';position: absolute;display: none;left: .45rem;top: .18rem;width: .25rem;height: .6rem;border: solid rgba(255, 255, 255, 1);border-width: 0 2px 2px 0;transition: background 250ms;transform: rotate(45deg);}
.checkbox-contain input[type="radio"] ~ .checkbox-input::after {content: '';position: absolute;display: none;left: .25rem;top: .25rem;width: .75rem;height: .75rem;border-radius: 2.0rem;background: rgba(255, 255, 255, 1);transition: background 250ms;}
.checkbox-contain input:disabled ~ .checkbox-input::after {border-color: rgba(135, 149, 161, 1);}
.checkbox-contain input:checked ~ .checkbox-input::after {display: block;}
.checkbox-contain:hover input ~ .checkbox-input,.checkbox-contain input:focus ~ .checkbox-input {background: rgb(231, 238, 243);}
.checkbox-contain input:checked ~ .checkbox-input {background: rgba(0, 130, 243, 1);border-color: rgba(0, 130, 243, 1);}
.checkbox-contain input[type="checkbox"]:disabled ~ .checkbox-input {background: rgba(241, 245, 248, 1);border-color: rgba(184, 194, 204, 1);opacity: 0.6;cursor: not-allowed;}
.checkbox-contain input[type="radio"]:disabled ~ .checkbox-input {background: rgba(241, 245, 248, 1);border-color: rgba(184, 194, 204, 1);opacity: 0.6;cursor: not-allowed;}
.checkbox-contain input[type="radio"]:disabled ~ .checkbox-input::after {background: rgba(135, 149, 161, 1);}
.checkbox-contain input:checked:focus ~ .checkbox-input, .checkbox-contain:hover input:not([disabled]):checked ~ .checkbox-input {background: rgba(13, 143, 255, 1);border-color: rgba(13, 143, 255, 1);}
.checkbox-contain .checkbox-input::before {content: '';display: none;position: absolute;left: 0;top: 0;width: 3rem;height: 3rem;margin-left: -0.85rem;margin-top: -0.85rem;background: rgba(0, 130, 243, 1);border-radius: 2rem;opacity: .6;z-index: 99999;transform: scale(0);}
.checkbox-switch {width: 0px; height: 0px; max-width: 0px; max-height: 0px; position: relative;}
.checkbox-switch:before {content: ''; cursor: pointer; display: block; width: 30px; height: 17px; background-color: var(--gray-555); border-radius: 50px; position: absolute; right: 0;}
.checkbox-switch:after {content: ''; transition: all 0.5s ease; cursor: pointer; display: block; width: 15px; height: 15px; background-color: var(--gray-ccc); border-radius: 50px; position: absolute; right: 14px; top: 1px;}
.checkbox-switch:checked:after {right: 1px; background-color: #2ecc40;}
@keyframes b-ripple {0% {transform: scale(0);} 20% {transform: scale(1);} 100% {opacity: 0;transform: scale(1);}}
@keyframes b-ripple-duplicate {0% {transform: scale(0);} 30% {transform: scale(1);} 60% {transform: scale(1);} 100% {opacity: 0;transform: scale(1);}}
.checkbox-contain input + .checkbox-input::before {animation: b-ripple 250ms ease-out;}
.checkbox-contain input:checked + .checkbox-input::before {animation-name: b-ripple-duplicate;}
.checkbox-contain .checkbox-input::before {visibility: hidden;}
.checkbox-contain input:focus + .checkbox-input::before {visibility: visible;}
.checkbox-contain:first-child .checkbox-input::before {visibility: hidden;}
.inline_menu {border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); margin-bottom: 30px; padding: 1px 0; overflow-x: auto;}
.inline_menu > div {width: 100%;  padding: 6px 0; white-space: nowrap;}
.inline_menu a {padding: 5px 10px; font-weight: bold; font-family: Poppins, Arial; font-size: 9.5pt; text-decoration: none; color: #555; color: var(--gray-555);}
.inline_menu a:hover {border-bottom: 3px solid #555; border-bottom-color: var(--gray-555);}
.inline_menu a.sel {border-bottom: 3px solid var(--link-color); color: #000; color: var(--black);}
.inline_menu a.disabled {color: #ccc; color: var(--gray-ccc); cursor: default; border: 0;}
.loading1 {clear: both; margin: 20px auto 20px auto; border: 1px solid #ddd; border-color: var(--gray-ddd); background-color: #eee; background-color: var(--gray-eee); color: #555; color: var(--gray-555); border-radius: 50px; background-image: url('img/preloader/ripple.svg'); font-family: Poppins, Arial; font-size: 10pt; padding: 8px 10px 8px 50px; background-position: 5px center; background-size: 40px; display: block; width: 90px; cursor: default;}
.newicon:after {content: 'NOVÝ'; background-color: var(--intense-blue-color); color: #fff; color: var(--white); font-weight: bold; padding: 3px; margin: 0 10px; border-radius: 3px; border: 1px solid var(--intense-blue-color); font-size: 8pt;}
.nothingfound {text-align: center; padding-top: 300px; background-image: url('img/backgrounds/detective.svg'); background-position: center top; background-size: auto 280px; font-family: Poppins, Arial; font-size: 20pt; color: var(--gray-888);}
.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 1000;}
.pagebar {clear: both; text-align: center; margin-top: 20px; height: 40px;}
.pagebar a {border: 1px solid #555; border-color: var(--gray-555); background-color: #f2f2f2; background-color: var(--gray-f2f2f2); font-family: Poppins, Arial; font-size: 12pt; text-align: center; width: 25px; height: 25px; overflow: hidden; box-sizing: border-box; display: inline-block; margin-left: 5px; text-decoration: none; color: #333; color: var(--gray-333); cursor: pointer; border-radius: 3px; transition: all 0.2s ease;}
.pagebar a:hover {background-color: #fff; background-color: var(--white); color: #000; color: var(--black); border-color: #000; border-color: var(--black);}
.pagebar a.na {background-color: #888; background-color: var(--gray-888); color: #ccc; color: var(--gray-ccc); border-color: #555; border-color: var(--gray-555); cursor: default;}
.pagebar a.sel {background-color: var(--link-color); color: #fff; color: var(--white); border-color: var(--intense-blue-color);}
.pagebar a.sel:hover {background-color: #65abf8;}
.phoneonly {display: none!important;}
.prompt {position: fixed;  top: 50%; left: 50%; width: 6%; height: 6%; margin: -3% 0 0 -3%; background-color: #fff; background-color: var(--white); border: 1px solid #fff; border-color: var(--white); border-radius: 5px; font-family: Poppins, Arial; color: #333; color: var(--gray-333); line-height: 1.5; z-index: 1001; max-width: 80%; max-height: 80%; overflow: hidden; padding: 15px; box-sizing: border-box;}
.prompt *, .sideprompt * {background-repeat: no-repeat;}
.prompt.loading, .sideprompt.loading {background-image: url('img/preloader/ripple.svg'); background-position: center; background-size: 80%; background-repeat: no-repeat;}
.prompt h1 {font-size: 16pt; margin: 10px 0;}
.prompt > * {display: flex; flex-direction: column; height: 100%;}
.prompt > * > .content {flex: 1 1 auto; order: 2; overflow: auto; margin-right: -10px; padding-right: 10px;}
.prompt > * > .content::-webkit-scrollbar {width: 6px; height: 6px; visibility: hidden;}
.prompt > * > .content:hover::-webkit-scrollbar {visibility: visible; cursor: pointer;}
.prompt > * > .content:hover::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ccc; background-color: var(--gray-ccc);}
.prompt *::-webkit-scrollbar, .sideprompt *::-webkit-scrollbar {width: 6px; height: 6px; visibility: hidden;}
.prompt *::-webkit-scrollbar, .sideprompt *::-webkit-scrollbar {visibility: visible; cursor: pointer;}
.prompt *:hover::-webkit-scrollbar-thumb, .sideprompt *:hover::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ccc; background-color: var(--gray-ccc);}
.prompt > * .error, .prompt > * .question, .prompt > * .warning {padding: 15px 10px 15px 40px; background-image: url('img/icons/others/error.svg'); background-size: 30px auto; background-position: left;}
.prompt > * .question {background-image: url('img/icons/others/question.svg');}
.prompt > * .warning {background-image: url('img/icons/others/warning.svg');}
.prompt .footer {order: 3; height: 30px;}
.prompt .header {margin: -15px -15px 15px -15px; flex: 0 0 20px; order: 1; padding: 10px; font-size: 12pt; color: var(--link-color); border-bottom: 1px solid #ccc; border-bottom-color: var(--gray-ccc); height: 25px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.prompt .header .closebtn, .prompt .header .helpbtn {float: right; display: block; width: 16px; height: 16px; position:relative; margin-top: 3px; margin-left: 20px; cursor: pointer;}
.prompt .header .closebtn::before, .prompt .header .helpbtn::before {content: ""; top: 0; left: 0; width: 100%; height: 100%; position: absolute; background-image: url('img/icons/buttons/close.svg'); background-size: cover; filter: grayscale(100%) brightness(180%);}
.prompt .header .closebtn:hover::before, .prompt .header .helpbtn:hover::before {filter: grayscale(0%) brightness(100%);}
.prompt .header .helpbtn::before {background-image: url('img/icons/buttons/help.svg');}
.rating-star {display: inline-block; width: 60px; text-align: left!important; height: 12px; background-image: url('img/icons/common/star_blank.svg'); background-repeat: repeat-x; background-position: left center; background-size: auto 100%;}
.rating-star > .rating-value {display: inline-block; background-image: url('img/icons/common/star_full.svg'); height: 100%; background-repeat: repeat-x; background-position: left center; background-size: auto 100%;}
.redwindow {border: 1px solid #c00; border-radius: 5px; line-height: 1.5; overflow: hidden; padding: 10px;}
.redwindow.icon > .content {padding-left: 50px; background-size: 30px; min-height: 30px;}
.redwindow .header {background-color: #c00; color: #fff; font-family: Poppins, Arial; font-size: 11pt; padding: 5px 10px; margin: -10px -10px 10px -10px;}
.redwindow .header a {color: #fff;}
.reply_win {margin: 20px 0;}
.reply_win .image {width: 50px; height: 50px; border: 1px solid #fff; border-color: var(--white); border-radius: 100px; float: left; margin-right: 10px; background-size: cover; background-position: center;}
.reply_win .replywin {border: 1px solid #888; border-color: var(--gray-888); border-radius: 5px; margin-bottom: 15px; line-height: 1.5; min-height: 60px; margin-left: 65px; position: relative; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;}
.reply_win .replywin:after, .reply_win .replywin:before {right: 100%; top: 25px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.reply_win .replywin:after {border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-right-color: var(--white); border-width: 10px; margin-top: -10px;}
.reply_win .replywin:before {border-color: rgba(136, 136, 136, 0); border-right-color: #888; border-right-color: var(--gray-888); border-width: 11px; margin-top: -11px;}
.reply_win .replytxt {min-height: 60px; max-height: 50vh; overflow-x: hidden; overflow-y: auto; padding: 10px;}
.reply_win .replytxt .quote {font-style: italic; display: inline; color: #333; color: var(--gray-333); margin: 0 10px;}
.reply_win .replytxt .quotetag {font-weight: bold; color: #b10dc9; display: inline;}
.reply_win .replytxt::-webkit-scrollbar {width: 6px; cursor: pointer;}
.reply_win .replytxt::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ddd; background-color: var(--gray-ddd);}
.sideprompt {position: absolute; width: 400px; max-width: calc(100vw - 50px); box-shadow: 0 0 10px var(--gray-888); height: 80%; background-color: var(--white); border: 1px solid var(--gray-aaa); font-family: Poppins, Arial; color: #333; color: var(--gray-333); line-height: 1.5; z-index: 9; box-sizing: border-box;}
.sideprompt.loading {background-size: 60px;}
.sideprompt:after, .sideprompt:before {left: 100%; top: 30px; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none;}
.sideprompt:after {border-color: rgba(0,0,0,0); border-left-color: var(--white);	border-width: 10px;	margin-top: -10px;}
.sideprompt:before {border-color: rgba(0,0,0,0); border-left-color: var(--gray-aaa); border-width: 11px; margin-top: -11px;}
.sideprompt .content {width: 100%; height: 100%; overflow-y: scroll; padding: 15px; box-sizing: border-box;}
.stop {font-family: Poppins,Arial;}
.stop .top {background-color: #eee; font-size: 20pt; padding: 10px; text-align: center; margin-top: 20px;}
.stop .amigo, .stop .amiga {position: relative; background-image: url('img/graphic/stop/howdy.png'); background-repeat: no-repeat; background-position: center center; width: 400px; height: 500px; float: left; margin-right: 20px;}
.stop .amiga {background-image: url('img/graphic/stop/amiga.png');}
.stop .info {float: left; width: 360px; font-size: 16pt; border-bottom: 1px dotted #888; margin-top: 20px; padding-bottom: 10px;}
.stop .body {padding: 10px 20px; background-color: #ccc; font-size: 14pt; float: left; width: 360px; box-sizing: border-box; margin-top: 20px;}
.stop .body .bodu {font-weight: bold; color: #314ac4;}
.stop .next {padding: 10px 20px; background-color: #ffcf9f; font-size: 14pt; float: left; width: 360px; box-sizing: border-box; margin-top: 20px;}
.stop .vip {padding: 10px 20px; background-color: #bcf2b5; font-size: 14pt; float: left; width: 360px; box-sizing: border-box; margin-top: 20px;}
.stop .amigo a {position: absolute; bottom: 0; right: 0; transform: rotate(-20deg);}
.main .userinfo {background-color: #f2f2f2; background-color: var(--gray-f2f2f2); border-bottom: 2px solid #555; border-bottom-color: var(--gray-555); margin-bottom: 20px; position: relative; min-height: 80px; padding: 20px;}
.main .userinfo:after {content: ''; position: absolute; border-style: solid; border-width: 0 11px 7px; border-color: var(--white) transparent; display: block; width: 0; z-index: 1; bottom: -2px; left: 51px;}
.main .userinfo:before {content: ''; position: absolute; border-style: solid; border-width: 0 12px 8px; border-color: var(--gray-555) transparent; display: block; width: 0; z-index: 0; bottom: 0; left: 50px;}
.main .userinfo .arrow {display: none;}
.main .userinfo .bio .tr {display: inline-block; margin-right: 20px;}
.main .userinfo .bio .td, .main .userinfo .bio .th {display: inline-block; float: left; padding: 0 5px; font-family: Poppins, Arial; font-size: 9pt; height: 15px; box-sizing: border-box;}
.main .userinfo .bio .tr:last-of-type .td, .main .userinfo .bio .tr:last-of-type .th {border-bottom: 0;}
.main .userinfo .bio .td > div {max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: pre; display: inline;}
.main .userinfo .bio .th {width: 28px; background-size: auto 15px!important; background-position: bottom;} 
.main .userinfo .biodiv {margin-top: 5px; position: relative; left: -5px; height: 16px; overflow: hidden;}
.main .userinfo .buttons a {display: inline-block; text-decoration: none; border: 1px solid #ccc; border-color: var(--gray-ccc); color: #333; color: var(--gray-333); border-radius: 100px; padding: 5px 20px; margin-bottom: 10px; text-align: center; transition: all 0.3s ease; background-color: #fff; background-color: var(--white); width: 150px; box-sizing: border-box;}
.main .userinfo .buttons a:hover {border-color: var(--link-color); color: #000; color: var(--black);}
.main .userinfo .name {font-family: Poppins, Arial; font-size: 16pt; position: relative; top: -10px; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
.main .userinfo .photo {border: 2px solid #fff; border-color: var(--white); border-radius: 50%; background-size: cover; background-position: center; width: 80px; height: 80px; float: left; margin-right: 30px;}
.userbox1 {margin-bottom: 20px; height: 50px; max-width: 100%;}
.userbox1 .img {float: left; width: 50px; height: 50px; border-radius: 50px; margin-right: 15px; background-size: cover; background-position: center;}
.userbox1 .info .gender {width: 12px; height: 12px; margin-right: 10px; background-size: contain; background-position: left; display: inline-block; position: relative; top: 1px;}
.userbox1 .name {max-width: 100%; display: block; font-size: 11pt; margin-bottom: 5px; padding-top: 5px; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
#userPanel {position: absolute; z-index: 1002; border: 1px solid var(--gray-ccc); background-color: var(--white); width: 350px; min-height: 150px; padding: 5px; box-shadow: 2px 2px 5px var(--gray-555);}
#userPanel.down:after, #userPanel.down:before, #userPanel.up:after, #userPanel.up:before, #userPanel.left:after, #userPanel.left:before, #userPanel.right:after, #userPanel.right:before {content: ''; position: absolute; border-style: solid; border-width: 0 12px 6px; display: block; width: 0; margin-left: -12px; left: 50%;}
#userPanel.down:after, #userPanel.down:before {border-width: 6px 12px 0;}
#userPanel.down:after {border-color: var(--gray-ccc) transparent; z-index: 1; bottom: -6px;}
#userPanel.down:before {border-color: var(--gray-888) transparent; z-index: 0; bottom: -7px;}
#userPanel.up:after {border-color: var(--white) transparent; z-index: 1; top: -6px;}
#userPanel.up:before {border-color: var(--gray-ccc) transparent; z-index: 0; top: -7px;}
#userPanel.left:after, #userPanel.left:before, #userPanel.right:after, #userPanel.right:before {margin-left: 0; left: auto; right: auto; margin-top: -12px; border-color: transparent var(--white); z-index: 1; left: -6px; top: 50%;}
#userPanel.left:after, #userPanel.left:before {border-width: 12px 6px 12px 0;}
#userPanel.left:before {z-index: 0; left: -7px; border-color: transparent var(--gray-ccc);}
#userPanel.right:after, #userPanel.right:before {border-width: 12px 0 12px 6px; right: -6px; left: auto;}
#userPanel.right:before {z-index: 0; right: -7px; border-color: transparent var(--gray-ccc);}
#userPanel .city {min-height: 16px; margin: -16px 0 10px 170px; padding-left: 30px; color: var(--gray-555); max-width: 150px; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
#userPanel .footer {clear: left; display: flex; margin: 10px -5px -5px -5px; background-color: var(--gray-ccc); height: 50px;}
#userPanel .footer > div {flex: 1 1 auto; margin: 5px; background-position: center; background-size: auto 30px; cursor: pointer;}
#userPanel .footer > div:hover {background-color: var(--gray-aaa);}
#userPanel .footer .atf {background-image: url('img/icons/userpanel/addtofriends.svg');}
#userPanel .footer .block {background-image: url('img/icons/userpanel/ignore.svg');}
#userPanel .footer .pm {background-image: url('img/icons/userpanel/pm.svg');}
#userPanel .footer .rff {background-image: url('img/icons/userpanel/removefromfriends.svg');}
#userPanel .loading {height: 150px; background-position: center; background-size: 40px; background-image: url('img/preloader/ripple.svg');}
#userPanel .name a {display: inline-block; vertical-align: top; font-family: Poppins, Arial; font-size: 13pt; max-width: 150px; white-space: nowrap; overflow: hidden!important; text-overflow: ellipsis;}
#userPanel .name .gender {display: inline-block; width: 20px; height: 16px; background-position: right; background-size: contain; margin-top: 5px;}
#userPanel .name .gender.f {background-image: url('img/icons/common/gender_f.svg');}
#userPanel .name .gender.m {background-image: url('img/icons/common/gender_m.svg');}
#userPanel .name .gender.ts {background-image: url('img/icons/common/gender_ts.svg');}
#userPanel .orientation {margin-top: 10px;}
#userPanel .photo {float: left; display: block; margin-right: 20px; width: 150px; height: 150px; background-size: cover; background-position: center;}
#userPanel .region {padding: 0 0 16px 30px; background-position: left 2px; background-size: 20px auto; margin: 10px 0 0 170px;}
#userPanel .region.A {background-image: url('img/icons/common/region_A.svg');}
#userPanel .region.B {background-image: url('img/icons/common/region_B.svg');}
#userPanel .region.C {background-image: url('img/icons/common/region_C.svg');}
#userPanel .region.E {background-image: url('img/icons/common/region_E.svg');}
#userPanel .region.H {background-image: url('img/icons/common/region_H.svg');}
#userPanel .region.J {background-image: url('img/icons/common/region_J.svg');}
#userPanel .region.K {background-image: url('img/icons/common/region_K.svg');}
#userPanel .region.L {background-image: url('img/icons/common/region_L.svg');}
#userPanel .region.M {background-image: url('img/icons/common/region_M.svg');}
#userPanel .region.P {background-image: url('img/icons/common/region_P.svg');}
#userPanel .region.S {background-image: url('img/icons/common/region_S.svg');}
#userPanel .region.T {background-image: url('img/icons/common/region_T.svg');}
#userPanel .region.U {background-image: url('img/icons/common/region_U.svg');}
#userPanel .region.Z {background-image: url('img/icons/common/region_Z.svg');}
#userPanel .unknownUser {text-align: center; font-family: Poppins, Arial; font-weight: bold; color: var(--gray-555); font-size: 12pt; padding-top: 100px; background-image: url('img/icons/userpanel/unknown.svg'); background-position: center 20px; background-size: 60px;}


@keyframes blink_order {0%, 100% {background-color: var(--intense-blue-color);} 50% {background-color: var(--gray-888);}}
@keyframes fillupuserchart {from { stroke-dasharray: 0 100; }}
@keyframes showusereditbtn {from { opacity: 0; }}
@keyframes slide_left {0%, 100% {transform: translate(0, 0);} 50% {transform: translate(-20px, 0);}}

@media all and (display-mode: standalone) {
	.notShowInPWA {display: none;}
}