html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, code, embed, del, em, img, small, strike, strong, b, u, i, center, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;vertical-align: baseline;max-height: 10000000px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {border: 1px dotted transparent;}
*:focus {outline: 0;}
a {outline: 0; color:inherit;}
a img {border: none;}
ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}
h1, h2, h3, h4, h5, h6 {clear: both;font-weight: normal;}
i {font-weight: normal;position: relative;}
img {image-rendering: -webkit-optimize-contrast; display:block;}
textarea::-webkit-input-placeholder {color: #8f94a5;opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;}
textarea::-moz-placeholder {color: #8f94a5;opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;}
textarea:-moz-placeholder {color: #8f94a5;opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;}
textarea:-ms-input-placeholder {color: #8f94a5;opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;}

/*---------- Layout ----------*/
html {overflow: hidden;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;background: #fff; }
html, body {width: 100%;overflow-y: auto;min-height: 100%;background: #15171e;}
body {color: #eee;font-family: effra, Arial, 'Helvetica Neue', Helvetica, sans-serif;margin: 0 auto;position: relative;overflow-x: hidden;background: #15171e;}
.wakka { padding: 0 40px;margin: auto;min-width: 320px;max-width: 92%; max-width:1480px; position: relative; }
@media (max-width : 1280px) {.wakka { max-width: 100%; padding:0 20px; } }

/*---------- Global Elements ----------*/
.force-blur { filter: blur(12px); -webkit-filter: blur(12px); }
hr {border: 0;clear: both;height: 1px; }
.ellipsis {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

textarea, select, input, input[type="text"], input[type="password"], input[type="email"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"] {border:0;padding: 0 8px;color: #eee;font-size: 14px;outline: none;-webkit-appearance: none;-webkit-border-radius: 0;font-family:effra;}

input[type="checkbox"], input[type="radio"] {-webkit-appearance: checkbox;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {opacity: 1;}
input::-webkit-input-placeholder {color: #8f94a5;opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;}
input::-moz-placeholder {color: #8f94a5;opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;}
input:-moz-placeholder {color: #8f94a5;opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;}
input:-ms-input-placeholder {color: #8f94a5;opacity: 1;filter: alpha(opacity=100);-moz-opacity: 1;}
input[type="file"] {position: absolute;height: 100%;right: 0px;top: 0px;z-index: 5;opacity: 0;filter: alpha(opacity=0);-moz-opacity: 0;width: 100%;padding: 0;font-size:0;cursor: pointer;}
input::-moz-focus-inner {border: 0;padding: 0;}
input, textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a:link,a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}

/*---------- Header ----------*/
.head-all {z-index: 1000;position: relative; padding-bottom:35px; padding-bottom:0; background:#15171e; }
@media (max-width : 800px) { .head-all { padding-bottom:0; } }
.head-mobile-padding { height:45px; width: 100%; display:none; }

.head { width: 100%; z-index: 20; position: relative; transform: translate3d (0,0,0); -webkit-transform: translate(0px,0px); transform: translate(0px,0px); }
.head-wrap { height: 65px; margin: 0 auto; position: relative; padding: 0; border-bottom: 1px solid rgb(8 10 14 / 50%); box-shadow: 0px 1px rgb(255 255 255 / 1%); }
.head-line { border-color: #171717; }
.head-body { min-width:320px; margin: auto; display: block; height: 66px; position: relative; }
.logo-all { position: relative; height: 100%; width: 100%; }
.logo-wrap { float: left; height: 55px; position: relative; cursor: pointer; display: none; }
.logo-title { color: #f3f3f3; height: 21px; left: 3px; top: 11px; font-family:chalet; font-size: 28px; text-shadow: 1px 1px #323232; position: relative; line-height: 40px; text-shadow: 0px 0px rgb(255 255 255 / 35%); }
.logo-title:hover { text-decoration: none; }
.logo-title-tone-1 { color: #f77997; color: #f188a1; text-shadow:none; }
.logo-title-tone-2 { color: #00BCD4; color: #74b2dd; text-shadow:none; }
.logo-center { display: block; width: 232px; border: 0; padding-left: 71px; position: relative; height: 64px; border-right: 1px solid rgb(8 10 14 / 73%); box-shadow: 1px 0px rgb(255 255 255 / 2%); float: left; } .logo { width: 43px; height: 55px; margin: 4px -6px 0px 2px; opacity: .95; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); transform: translateZ(0); }
.logo-round { width: 38px; height: 38px; margin: 6px 0px 0px; opacity: 0.93; border-radius: 100%; border: 3px solid #4c4c4c; box-shadow: 0px 1px #313131; }
.head-btn-wrap { position: absolute; top: 0; right: 10px; }
.head-btn-wrap .head-button { float: right; font-size: 16px; font-family: effrabold; line-height: 17px; padding: 9px 12px 8px; margin: 11px 5px 0px 5px; background: #434343; box-shadow: 2px 2px 3px #393939; color: #f3f3f3; border-radius: 3px; cursor: pointer; -webkit-transition: all 0.06s linear; -moz-transition: all 0.06s linear; transition: all 0.06s linear; }
.head-btn-wrap .head-button:hover { background: #f07d95; color: #fff; -webkit-transition: all 0.06s linear; -moz-transition: all 0.06s linear; transition: all 0.06s linear; text-decoration: none; }
.head-log-btn { background: #e55678; background: #db5e7c; font-size: 16px;text-shadow: 1px 1px rgba(0, 0, 0, 0.06);z-index: 1000;width: auto;height: 29px;margin: 18px 6px 0 6px;border-radius: 3px;text-align: center;float: right;color: #fff;line-height: 29px;font-size: 14px;cursor: pointer;padding: 0 13px;font-family: 'effrasemi';transition: 0.12s; }
.head-log-btn:hover { text-decoration:none; }
.head-white-btn { background: none; border: 1px solid #bbb; border-radius: 5px; line-height: 27px; }
.head-upgrade-btn { background: linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab); background-size: 420% 420%;animation: gradient 12s ease infinite;display: none; }
.head-profile-btn { background: none;border: 1px solid;border-radius: 5px;width: 42px; padding: 0;text-align: center;display: none; }

.menu-btn-wrap { width: 67px; height: 61px; position: absolute; top: 0; left: 0; cursor: pointer; display: block; padding: 4px 0 0 7px; }
.menu-btn-click { position: absolute; top: 0; bottom: 0; right: 0; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition: 400ms ease all; padding: 20px 20px 20px 15px; }
.mbl { width: 32px; height: 3px; margin: 2px 0px 6px; background: #eee; position: relative; transition: 400ms ease all; }
.mbl-1 { width:18px; }
.mbl-2 {width: 26px;}

.ch-gens {float: left;width: 200px;}
.ch-gens label {display: block;float: left;width: 100px;height: 32px;line-height: 35px;position: relative;font-size: 12px;padding-left: 12px;border: 1px solid rgb(8 10 14 / 73%);border-top: 0;border-left: 0;cursor: pointer;box-shadow: 1px 1px rgb(255 255 255 / 1.5%);}
.ch-gens input { cursor: pointer; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; }
.ch-gens-check { width: 12px; height: 12px; display: block; float: left; border: 1px solid #0b0c10; border-radius: 3px; margin-right: 5px; background: #20232d; margin-top: 11px; color: #000; position: relative; }
.ch-gens label input:checked + div i { color: #fff; text-align: center; font-size: 8px; display: block; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; background: #90adff; border-radius: 3px; line-height: 13px; }
.ch-gens-3, .ch-gens-4 { box-shadow:1px 0px rgb(255 255 255 / 1.5%) !important; }
.ch-gens-swamp .ch-gens-text-1 { display: none; }
.ch-gens-swamp .ch-gens-text-2 { display: inline; color: #fdb1cb; font-style: italic; }
.ch-learn {}
.ch-learn-row { width: 97px;display: block;float: left;text-align: center;line-height: 63px;border-right: 1px solid rgb(8 10 14 / 73%);box-shadow: 1px 0px rgb(255 255 255 / 1.5%);height: 64px;font-size: 13px; position:relative; transition:.27s; cursor:pointer; }
.ch-learn-row:hover { text-decoration:none; color: #b0d7f5; }
.ch-learn-drop { position: absolute; top: 65px; left: -1px; right: -1px; border: 1px solid #0e1015; background: #1d2028; box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; border-radius: 0 0 4px 4px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.13); border-top: 0; width: 203%; } /* logged out menus */
.ch-learn-drop a { display: block; Padding: 11px 9px 12px; line-height: 14px; text-align: left; font-size: 12px; color: #eee; transition: .27s; border-bottom: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 1px 1px rgba(255, 255, 255, .6%) inset; letter-spacing: .25px; }
.ch-learn-drop a:hover { color:#fdb1cb; text-decoration:none; }
.ch-learn-5 .ch-learn-drop { width:178px; }
.ch-learn-drop a:last-of-type { border-bottom:0; }
.ch-learn-drop a:nth-child(even) { background:#1b1e26b2; }

.ch-menu-m { }
.ch-menu-m-btn { height: 44px; width: 52px; font-size: 12px; line-height: 46px; border-left: 1px solid rgb(8 10 14 / 73%); box-shadow: 1px 0px rgb(255 255 255 / 1.5%) inset; display: block; float: right; text-align: center; transition: .27s; position:relative; cursor:pointer; } /* logged in menus */
.ch-menu-m-btn:hover, .ch-menu-m-selected i { color: #85cd88; text-decoration:none; }
.ch-menu-m-selected .ch-menu-drop { display:block; }
.ch-menu-drop { position: absolute; right: 0; top: 45px; min-width: 135px; border: 1px solid #121518; background: #1f222b; border-top: 0; box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; border-radius: 0 0 4px 4px; }
.ch-menu-m-1 .ch-menu-drop { border-bottom-right-radius:0; min-width: 138px; }
.ch-menu-m-4 .ch-menu-drop { left:-1px; right:auto; min-width: 208px; }
.ch-menu-m-5 .ch-menu-drop { left:-1px; right:auto; }
.ch-menu-drop a { color:#eee; display: block; padding: 9px 10px 10px; line-height: 17px; text-align: left; border-bottom: 1px solid rgb(0 0 0 / 18%); box-shadow: 0 1px rgb(255 255 255 / 1%); cursor: pointer; }
.ch-menu-drop a:hover { text-decoration:none; color:#85cd88; }
.ch-menu-drop a:last-of-type { box-shadow:none; border:0; }
.ch-menu-drop .ch-menu-sub { }
.ch-menu-dropped .ch-menu-drop { display:block; }
.ch-menu-dropped .ch-menu-m-i { color:#85cd88; }
.ch-menu-drop a:nth-child(odd) { background:#1b1e2642; }
.ch-mes-yes { color: #87c2ff; }
.ch-mes-counter { font-family:effrasemi; position: absolute; font-size: 11px; min-width: 19px; top: 1px; right: 15px; bottom: 0; line-height: 45px; }
.ch-mes-yes .ch-mes-counter { display:block; }

@media (max-width : 1200px) { .logo-center { padding-left:66px; width:212px; } .logo-title { font-size:25px; } .ch-gens label { font-size: 11px; line-height:36px; } .ch-learn-row { width: 85px;  font-size: 13px; } html .ch-learn-3 {display:none; } .head-log-btn { font-size:13px; } }
@media (max-width : 965px) { .ch-gens {display:none; } html .ch-learn-3 {display:block; } .head-log-btn { padding-left:13px; padding-right:13px; } }
@media (max-width : 840px) { html .ch-learn-3 {display:none; }  .ch-menu-m-1 .ch-menu-drop { min-width: 130px; } }
@media (max-width : 800px) {
.head-mobile-padding { display:block; }
.head-all { position:fixed; top:0;left:0;right:0; }
.head-wrap { height: 45px; }
.head-body { height:44px; }
.logo-center { height: 44px; padding-left: 64px; width: 168px; }
.ch-learn-row { height: 44px; width: 64px; font-size: 11px;  line-height: 46px; }
.ch-learn-drop { width:204%; top:45px; }
.ch-learn-drop a { Padding: 5px 10px 6px; line-height: 17px; font-size: 11px; }
.ch-mes-counter { font-size: 9px; top: -9px; right: 8px; }
.logo-title { font-size: 19px; top: 3px;}
.menu-btn-wrap { width: 55px; height: 44px; padding:0; border-right: 1px solid rgb(0 0 0 / 48%); box-shadow: 1px 0 rgb(255 255 255 / 2%); }
.mbl { height:2px; width: 30px; } .mbl-2 { width: 24px; } .mbl-1 { width: 16px; }
.menu-btn-click { padding: 11px 10px 10px 12px;  }
.head-log-btn { padding-left: 9px; padding-right: 9px; height: 24px; font-size: 11px; line-height: 23px; margin: 10px 0px 0 8px; }
.head-white-btn { line-height:22px; }
.ch-menu-m-1 .ch-menu-drop { min-width: 156px; }
.ch-menu-drop a { font-size:12px; }
}
@media (max-width : 600px) { html .ch-learn-1 { display:none; } }
@media (max-width : 535px) { html .ch-learn-4 { display:none; } }
@media (max-width : 480px) { .ch-learn { display:none; } .logo-center { width: 158px; border-right: 0; box-shadow:none; } .logo-title { font-size: 18px; top: 2px; } .head-log-btn { padding-left: 9px; padding-right: 9px; } .ch-menu-m-4 .ch-menu-drop { min-width: 193px; } }
@media (max-width : 345px) { .logo-title { font-size: 17px; } .logo-center {  padding-left: 61px; width: 152px; } }
@media (max-width : 330px) { .logo-center { padding-left: 60px; width: 142px; } .logo-title { font-size: 16px; top: 3px; } }

.logged .head-btn-wrap, .logged .ch-learn { display:none; }
.logged .ch-gens { display:block; }
.logged .ch-menu-m { display:block; }
@media (min-width : 801px) {
.logged .logo-center  { margin: auto; padding: 0; position: absolute; left: 0; right: 0; border: 0; box-shadow: none; text-align: center; width: auto; }
.logged .ch-gens { margin-left: 70px; }
.logged .ch-gens-1, .logged .ch-gens-3 { border-left: 1px solid rgb(8 10 14 / 73%); box-shadow: 1px 1px rgb(255 255 255 / 1.5%), 1px 0px rgb(255 255 255 / 1.5%) inset !important; }
.logged .ch-gens-3 { box-shadow: 1px 0px rgba(255, 255, 255, 0.02), 1px 0px rgba(255, 255, 255, 0.02) inset !important; }
.logged .menu-btn-click { padding: 20px 20px 20px 20px; }
.logged .ch-menu-m-btn { height: 65px; width: 69px; font-size: 16px; line-height: 68px; }
.logged .ch-menu-m-5 { float: left; border-left: 0; border-right: 1px solid rgb(8 10 14 / 73%); box-shadow: 1px 0px rgb(255 255 255 / 1.5%); }
.logged .ch-menu-m-6 { color: #ffd592; }

.ch-menu-drop { top: 65px; font-size: 12px; }
}
@media (max-width : 1300px) { .ch-gens { width: 190px; } .ch-gens label { width: 95px; } }
@media (min-width : 881px) and (max-width : 1100px) { .ch-gens { width: 180px; } .ch-gens label { width: 90px; } }
@media (min-width : 801px) and (max-width : 880px) { .ch-gens { width: 170px; } .ch-gens label { width: 85px; } .logged .ch-menu-m-btn { width:65px; } .logged .ch-menu-m-5 { display:None; } }
@media (max-width : 980px) { .logged .ch-menu-m-6 { display:none; } }
@media (max-width : 800px) {
.logged .ch-gens { display:none; }
.logged .logo-center  { border:0; box-shadow:none; }
.logged .ch-menu-m-6 { display: block; }
}
@media (max-width : 485px) { .logged .ch-menu-m-5 { display:none; } }
@media (max-width : 440px) { .logged .ch-menu-m .ch-menu-m-btn { width: 48px; } .ch-menu-m-1 .ch-menu-drop { min-width: 144px; } }
@media (max-width : 410px) { .logged .ch-menu-m-6 { display:none; } }
@media (max-width : 360px) { .logged .ch-menu-m .ch-menu-m-btn { width: 44px; } .ch-mes-counter { font-size: 8px; top: -8px; right: 4px; } .ch-menu-m-4 .ch-menu-drop { min-width: 173px; } .ch-menu-m-1 .ch-menu-drop { width: 132px; min-width: 132px; } }
@media (max-width : 330px) { .ch-menu-m .ch-menu-m-btn { width: 43px; } }

/*---------- Mobile Menu ----------*/
.mobile-menu { position:fixed; width:233px; background:#222531; left:-300px; top:0;bottom:0;overflow:hidden; z-index:11001; transition:all 300ms ease 0s; transform: translate(0); }
.mobile-menu-slide { left: 0; }
.mobile-scroll {overflow-y: scroll;  overflow-x: hidden; max-height: 100%; padding-right: 50px; width: 100%;-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; letter-spacing:.25px; }
.mobile-menu .menu-btn-wrap { left: auto; right: 0px; padding: 0px; text-align: center; padding-right: 14px; transition: all 300ms ease 0s; visibility: visible; opacity: 1; height: 54px; border:0; box-shadow:none; }
.logo-mobile { height: 55px; width: 233px; font-size: 20px; position: relative; display: block; overflow: hidden; }
.mobile-logo-title { color: #e9e9e9; text-shadow: 1px 1px #323232; position: relative; top: 18px; left: 9px; line-height: 18px; float: left; font-family: effrabold; font-size: 17px; }
.mobile-logo-title:hover { text-decoration: none; }
.logo-mobile .menu-btn-click { top: -4px; padding: 20px 20px 20px 15px; }
.mobile-menu .logo-wrap { padding-left: 7px; }
.mobile-profile-photo { width: 34px; height: 34px; float: left; margin: 11px 0px 0px 8px; border-radius: 100%; }
.mobile-profile-name { font-size: 15px; position: absolute; top: 16px; left: 51px; right: 64px; line-height: 23px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-family: 'effrasemi'; }
.mobile-profile-name:hover {text-decoration: none; }

.m-slot { line-height: 19px; min-height: 41px; width: 232px; font-size: 12px; padding: 11px 0 0 10px; display: block; z-index: 5; position: relative; cursor: pointer; transition:.27s; }
.m-slot:hover, .m-slot:hover i { text-decoration: none; color: #addbfd; transition:.27s; }
.m-slot i { padding-right: 9px; width: 21px; display: block; float: left; color: rgb(189 194 223 / 74%); padding-right: 11px; width: 23px; float: right; }
.m-slot .icon-cloud-1 { right: 2px; font-size: 11px; }
.m-slot-wrap .m-slot:first-child { box-shadow: 0px 4px 4px rgb(22 24 34 / 45%) inset; padding-top: 16px; padding-bottom: 9px; }
.m-slot .icon-down-open, .m-slot .icon-right-open { float: right; margin-right: 11px; font-size: 9px; font-weight: normal; line-height: 18px; display: none; }
.m-slot .m-link { color: #f1f1f1; position: absolute;top: 0;left: 0;right: 0;bottom: 0;padding-top: 11px;padding-left: 10px; }
.m-slot .m-link:hover { color: #addbfd; text-decoration: none; }
.m-slot .m-count-right {position: absolute; right: 10px; }
.m-slot-mes { position: absolute; right: 10px; display: none; }
.m-drop { display: none; background: rgb(84 83 109 / 12%); margin: 11px 0 0 -10px; padding: 4px 0 8px; cursor: auto; border-top: 1px solid rgb(0 0 0 / 22%); border-bottom: 1px solid rgb(0 0 0 / 22%); }
.m-drop-link { color: #f1f1f1; display: block; position: relative; height: 33px; cursor: pointer; font-size: 12px; line-height: 34px; box-shadow: none; padding: 0 8px 0 11px; }
.m-drop-link:hover { text-decoration:none; color: #fdb1cb; }

.m-tokens { border-bottom: 1px solid rgb(0 0 0 / 22%); float: left; }
.m-token-row { width: 240px; line-height: 33px; float: left; display: block; position: relative; font-size: 11px; cursor: pointer; box-shadow: rgba(255, 255, 255, 0.016) 0px 1px 0px inset; padding: 5px 8px 4px 10px; background: rgb(30, 32, 43); border-top: 1px solid rgba(12, 14, 20, 0.27); transition: all 0.27s ease 0s; color: rgb(189 194 223 / 74%); }
.m-token-top { padding-top: 6px; }
.m-token-row:hover { text-decoration:none; color: #91e090; }
.m-token-text { display: inline; }
.m-token-row i { float: right; right: 9px; }

.zig-slider { background: transparent url("../images/zig-mobile.jpg") repeat-x scroll; width: 280px; margin-top: -7px; height: 12px; display: block; position: relative; z-index: 5; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: pixelated; pointer-events: none; top: 10px; }
.m-slot .zig-slider { margin-top: -17px; margin-bottom: 9px; opacity: .85; background: transparent url("../images/zig-mobile-2.jpg") repeat-x scroll; }

.gender-slider { width: 240px; padding: 5px 8px 4px 10px; line-height: 33px; float: left; background: #1e202b; border-top: 1px solid rgb(12 14 20 / 27%); display: block; position: relative; font-size: 12px; cursor: pointer; box-shadow: 0px 1px 0px rgb(255 255 255 / 1.5%) inset; transition: .27s; }
.gender-slider:hover { color: #91e090;}
.gender-slider:before { left: 0; right: 0; top: 0;}
.gender-slider-last { border-bottom: 1px solid rgb(0 0 0 / 10%); }
.gender-slider input { cursor: pointer; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0;}
.gender-slider-check { width: 12px; height: 12px; display: block; float: left; border: 1px solid rgb(11 12 16 / 90%); border-radius: 3px; margin-right: 6px; background: #2d303b; margin-top: 10px; position: relative; }
.gender-slider input:checked + div i { color: #fff; text-align: center; font-size: 8px; display: block; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; background: #90adff; border-radius: 3px; line-height: 13px; }
.gender-text {  display: inline;}
.view-swamp .gender-text {  display: none;}
.view-swamp .gender-alert {  display: inline; color: #fdb1cb; font-style: italic; }
.gender-apply { white-space: normal; line-height: 17px; padding: 22px 10px 12px; text-align: center; border: 0;}
.gender-apply i { display: block; font-size: 24px; padding: 0px 0 10px;}
.gender-slider-top {padding-top: 7px;}

/*---------------------------- Footer  ----------------------------*/
.footer-wrap { padding: 36px 0px 22px; background: rgb(18 19 27 / 80%); background: #12131b; background: #12141c; min-width: 320px; position: relative; -webkit-transform: translate(0px,0px); transform: translate(0px,0px); }
.zigo { width: 100%; position: absolute; top: -15px; white-space: nowrap; overflow: hidden; height: 20px; text-align: center; line-height: 20px; pointer-events: none; }
.zigo .zig-w { width: 100%; border: 0; border-bottom:0; left: 0; right: 0; top: 0px; position: absolute; outline: 0; display: inline-block; margin-right: 0px; }
.zigo div { margin-right: 0px; display: inline-block; width: 60px; border: 13px transparent solid; border-bottom: 10px solid #12141c; position: relative; top: -7px; }
#footer { font-size: 12px; color: #dbdbdb; min-width: 320px; max-width: 1280px; margin: 0px auto; clear: both; overflow: auto; }
.foo-left { margin-bottom: 26px; float: left; width: 35%; padding-left: 30px; }
.foo-row { width: 22%; margin-bottom: 13px; float: right; }
.foo-row-last { width: 14%; }
.foo-title { font-family: effrabold; font-size: 15px; margin-bottom: 5px; }
.foo-slot { clear: both; height: 24px; float: left; font-size: 13px; font-family: effra; color: #DBDBDB; cursor: pointer; }
.foo-social { font-size: 22px; }
.foo-social a { margin-right: 14px; color: #d3d3d3; cursor: pointer; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; }
.foo-social a:hover { color: #f5f5f5; text-decoration: none; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; transition: all .1s linear; }
.foo-social .foo-reddit { font-size: 28px; position: relative; top: 1px; line-height: 0; display: inline-block; }
.foo-app-wrap { width: 100%; float: left; padding-top: 13px; margin-top: 14px; border-top: 1px solid rgb(8 9 12 / 70%); box-shadow: 0px 1px rgb(255 255 255 / 2%) inset; border-top: 1px solid rgb(8 9 12 / 65%); box-shadow: 0px 1px rgb(255 255 255 / 1%) inset; }
.foo-app { border: 1px solid #fff; width: 155px; height: 46px; float: left; display: block; margin: 0 12px 12px 0; color: #DBDBDB; line-height: 18px; cursor: pointer; border-radius:6px; }
.foo-app:hover { border-color: #7DCAD7; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; text-decoration: none; }
.foo-app-r { margin-right: 0; }
.foo-app-r:hover { border-color:#ff646b; }
.foo-app-r img { float: left; width: 21px; margin: 8px 7px 0 9px; }
.foo-app i { top: 13px; float: left; min-height: 30px; font-size: 24px; line-height: 20px; color:#93DD80; margin:0 7px 0 9px; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; }
.foo-app:hover i { color: #7DCAD7; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; }
.foo-app span { font-size: 11px; font-family: effra; display: block; margin-top: 4px; }
.foo-app div { position: relative; top: -4px; font-size: 13px; font-family: effrasemi; }
.foo-app .foo-i-left { color: #7DCAD7; font-size: 22px; top: 13px; line-height: 15px; }
.footer-bottom { float: left; margin-top: -21px; padding-left: 30px; font-family: effra; font-size: 12px; overflow: hidden; }
.foot-link { color: #e3e3e3; font-size: 10px; padding-right: 4px; padding-top: 4px; }
.fl { text-align: center; min-height: 120px; max-width: 100%; margin: auto; padding-top: 20px; background: #333; border-top: 10px solid #444; }
.fl-social { font-size: 26px; padding-top: 7px; }
.fl-social a { margin-right: 5px; cursor: pointer; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; transition: all .1s linear; color: #D3D3D3; }
.fl-social a:hover { color: #E65959; text-decoration: none; }

@media (max-width : 1100px) { .foo-left { width: 37%; } }
@media (max-width : 955px) {
.foo-left { margin: auto; padding: 0 30px 25px; float:none; text-align: center; width: auto; }
.foo-app-wrap { margin-bottom:12px; }
.foo-app { width:48%; margin-right:0; }
.foo-app-r { float:right; }
.foo-app span, .foo-app div { text-align:left; }
.foo-row-wrap { padding:0 30px; }
.foo-row { width:auto; margin-bottom: 26px; width:33%; float: right; padding:0; display:block; }
.foo-row a { float:none; display:block; }
.foo-row-last { text-align:right; }
.foo-row-middle { text-align:center; }
.footer-bottom { text-align: center; clear: both; border-top: 1px solid rgb(8 9 12 / 70%); box-shadow: 0px 1px rgb(255 255 255 / 2%) inset; padding: 18px 0 0; margin: 0; float: none; }
#site-copyright { margin-bottom:4px; }
}
@media (max-width : 800px) { .foo-social { font-size: 19px; } .foo-social .foo-reddit { font-size: 25px; } .foo-title { font-size: 13px; } .foo-slot { font-size:12px; } .foo-app div { top: -4px; font-size: 12px; } .foo-app i { font-size: 22px; } .foo-app .foo-i-left { color: #7DCAD7; font-size: 20px; top: 13px; } .foo-app span { margin-top: 4px; } .footer-bottom { font-size: 11px; } }
@media (max-width : 380px) { .foo-row { clear: both; width:auto; float: left; text-align:left; } }

@media (max-width : 400px) { .foo-app { width:48%; } .zigo div { width: 55px; border: 10px transparent solid; border-bottom: 8px #11131a solid; top: -3px; }}
@media (max-width : 356px) { .foo-app { width:100%; float:none; } }

/*--- Toggle ---*/
.switch { position: relative; width: 46px; height: 22px; float: right; }
.switch a { position: absolute; cursor: pointer; top: 0px; left: 0; right: 0; bottom: 0; background-color:#414557; -webkit-transition: .4s; transition: .4s; border-radius: 34px; }
.switch a:hover { background: #727daf; }
.switch span { position: absolute; height: 14px; width: 14px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 100%; }
.switch-on a { background: #d96a84 !important; background: #d1798d !important; }
.switch-on span { left: auto !important; right: 4px; background:#fff; }

/*---------- Browsing ----------*/

.chrono { padding-top: 35px; overflow: auto; background: rgb(255 255 255 / .7%); background: #181a22; background: #1a1c25; background: #191b24; }
.c-tags { padding: 0 0 4px; position: relative; width: 100%; clear: both; float: left; }
.c-tag { float: left; border: 1px solid; padding: 2px 5px; border-radius: 4px; color: #95bcd7; font-size: 11px; margin: 0 2px 4px; line-height: 13px; cursor: pointer; transition:.3s; }
.c-tag:hover { color: #9bc5e1; }
.c-tag i { font-size: 7px; padding-left: 4px; line-height: 13px; float: right; height: 4px; }
.c-cat-menu {position: relative;width: 100%;padding: 9px 0 22px;clear: both;float: left;}
.c-cat, .c-cat-edit { float: left; background: #222531; background: #2d303e; color: #fff; padding: 6px 11px; margin: 0px 6px 6px 0; font-size: 12px; border-radius: 4px; cursor: pointer; transition:.27s; }
.c-cat:hover, .c-cat-edit:hover { color: #fbb6cf; color: #bec9fd; }
.c-cat-selected { background: none; border: 2px solid #5d69ad; padding: 4px 9px !important; border-radius: 5px; color:#eee !important; }
.c-cat .icon-plus { font-size: 5px; padding-left: 2px; top: -1px; }
.c-cat-menu .c-cut { display:none; }
.c-cat-show-all .c-cut { display:block; }
.c-search-area {margin: 50px auto 0;float: left;position: relative;width: 100%;}
.c-search-wrap { position: relative; margin-right: 182px;  }
.c-search {position: relative;width: 100%;float: left;}
.c-search input { width: 100%; border-radius: 6px; height: 38px; background: #222531; background: #2d303e; border: 0; padding: 1px 44px 0 15px; font-size:13px; }
.c-search input::-webkit-input-placeholder {color: #999cb3;} .c-search input::-moz-placeholder {color: #999cb3;}
.c-search-i { position: absolute; right: 0; top: 0; font-size: 14px; cursor: pointer; padding: 12px 14px 9px; }
.c-search-i:hover { color: #93cf97; transition:.27s; }
.c-search-drop { position: absolute; z-index: 100; padding: 0; top: 38px; width: 100%; border-radius: 0 0 6px 6px; background: #292d3b; box-shadow: 1px 1px rgba(255, 255, 255, 0.01) inset; border-top: 1px solid rgba(27, 30, 40, 0.53); }
.c-search-recent { border-bottom: 1px solid rgb(0 0 0 / 22%); box-shadow: 0 1px rgb(255 255 255 / 1%); float: none; width: 100%; display: inline-block; height: 38px; }
.c-search-recent-l { position: absolute; top: 0; font-size: 12px; padding: 0 11px; height: 37px; line-height: 36px; font-family: effrasemi; border-right: 1px solid rgb(0 0 0 / 22%); box-shadow: 1px 0px rgb(255 255 255 / 1%); color: #d7bf93; width: 62px; }
.c-search-recent-r { position: relative; margin-left: 66px; margin-right: 6px; float: none; width: auto; overflow: hidden; overflow-x: auto; cursor: grab; display: flex; white-space: nowrap; z-index: 100; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
@-moz-document url-prefix() { .c-search-recent-r {  scrollbar-color: rgb(29 31 39 / 0%) rgb(29 31 39 / 0%); } }
.c-search-recent-r::-webkit-scrollbar { width: 0px; height: 0; }
.c-search-recent-r::-webkit-scrollbar-track { background: none; }
.c-search-recent-r::-webkit-scrollbar-thumb { background: none; }
.c-search-recent span { font-size: 11px; padding: 11px 8px 12px; float: left; color: #989fb9; cursor: pointer; }
.c-search-recent span:hover { color: #9ba2bd; }
.c-search-recent i {  font-size: 8px;  margin: -10px;  padding: 10px;  display: inline-block;  padding-left: 12px; }
.c-search-type { font-size: 13px; float: left; width: 100%; position: relative; min-height: 38px; }
.c-search-type-l { position: absolute; top: 0; font-size: 12px; padding: 0 11px; line-height: 36px; height: 37px; font-family: effrasemi; width: 62px; border-right: 1px solid rgb(0 0 0 / 22%); box-shadow: 1px 0px rgb(255 255 255 / 1%); color: #d7bf93; }
.c-search-type-r { position: relative; padding-left: 72px; float: left; width: 100%; }
.c-search-type-r span { display: block; float: left; padding: 2px 8px; background: #30384b; border: 1px solid rgb(0 0 0 / 33%); border-radius: 4px; margin-top: 9px; margin-right: 6px; cursor: pointer; box-shadow: 1px 1px rgb(255 255 255 / 2%) inset; font-size:11px; }
.c-search-type-r span:hover { }
.c-search-type-selected { border: 1px solid rgb(0 0 0 / 44%) !important; background: #5f2734 !important; }
.c-search-dropped .c-search-drop { display:block; }
.c-search-dropped input { border-radius: 6px 6px 0 0; }

.c-search-btn {float: right;background: #222531; background: #2d303e; border-radius: 6px;height: 38px;line-height: 38px;font-size: 12px; position: relative; cursor: pointer; transition:.27s; }
.c-create-btn {width: 44px;margin-left:10px;font-size: 13px; text-align: center; text-indent: -5px; }
.c-create-btn:hover { color: #90cb94; text-decoration:none; }
.c-sort-btn { padding:0 10px; width: 117px; position: relative; z-index: 10; }
.c-sort-btn:hover .c-sort-btn-label, .c-sort-btn:hover .c-sort-btn-label i, .c-sort-dropped .c-sort-btn-label, .c-sort-dropped .c-sort-btn-label i { color: #96d29a; transition:.27s; }
.c-sort-drop { position: absolute; left: 0; right: 0; border-radius: 0 0 6px 6px; background: #3a3d4d; margin-top: -2px; border-top: 1px solid rgb(0 0 0 / 32%); text-align:left; color:#eee; padding:0; }
.c-sort-btn-label i { float:right }
.c-sort-btn-label-m { display:none; text-align:center; float:none; }
.c-create-plus { font-size: 6px; position: absolute; top: -2px; right: 13px; }
.c-sort-drop div { cursor: pointer; padding:1px 10px 2px; line-height: 33px; }
.c-sort-drop div:nth-child(odd) { background:#353848; }
.c-sort-drop div:hover { color: #8ed3f4; }
html .c-sort-dropped { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.c-sort-dropped .c-sort-drop { display:block; }

@media (max-width : 1100px) { .c-sort-btn { font-size:12px; } .c-create-btn { font-size:13px; } }
@media (max-width : 800px) { .c-cat-menu { padding:6px 0 18px; } .c-cat, .c-cat-edit { padding: 6px 10px; margin: 0 6px 6px 0; font-size: 11px; } .c-cat-toggle:hover { color:#eee; } }
@media (max-width : 700px) { .c-search-wrap { margin-right: 102px; } .c-sort-btn { width:45px; border-radius: 6px !important; } .c-sort-btn-label { display:none; } .c-sort-btn-label-m { display:block; height: 38px; } html .c-sort-drop { min-width: 96px; border-radius: 6px; border: 0; margin-top: 4px; overflow: hidden; } .c-sort-drop div { padding: 1px 10px 3px; line-height: 31px; } .c-create-btn { margin-left: 6px; width: 45px; } .c-search-btn { line-height:40px; } }
@media (max-width : 580px) { .c-search-wrap { margin-right: 96px; } html .c-search input { font-size:12px; } .c-search-i { font-size: 13px;  padding: 13px 14px 9px; } .c-sort-btn { font-size: 12px; width: 42px; } html .c-sort-drop { min-width: 92px; } .c-create-btn { font-size: 12px; width: 42px; } .c-create-plus { font-size: 5px;  right: 13px; } }
@media (max-width : 420px) { .c-search-wrap { margin-right: 86px; } .c-sort-btn, .c-create-btn { width: 38px; } html .c-sort-drop { min-width: 83px; font-size: 11px; margin-top: 3px; } .c-create-btn { width: 38px; text-indent: -6px; margin-left: 5px; } .c-create-plus { right: 11px; } .c-search input { padding: 0px 38px 0px 12px; } .c-search-i { font-size: 13px; padding: 12px 11px 11px 14px; } .c-cat-menu { padding:5px 0 17px; } .c-cat, .c-cat-edit { padding: 5px 9px; font-size: 10px; margin: 0 3px 5px 2px; } .c-search-recent-l, .c-search-type-l { font-size:10px; padding: 0 8px; width:50px; } .c-search-type-r { padding-left: 58px; } .c-search-recent-r { margin-left:51px; }  .c-search-recent span { padding-right:6px; } .c-search-recent span, .c-search-type-r span { font-size: 10px; } }
@media (max-width : 365px) { .c-search-type-r span { margin-right:4px; } }
@media (max-width : 355px) { .c-search-type-r span { padding: 2px 5px; } }
@media (max-width : 335px) { .c-search-recent-l, .c-search-type-l { font-size:8px; padding: 0 8px; width:43px; } .c-search-type-r { padding-left: 50px; } .c-search-recent-r { margin-left: 47px; } .c-search-recent span { padding: 11px 4px; } .c-search-type-r span { padding:2px 4px; } }

/*---------- Main Character Rows ----------*/
.cr-loop { position:relative; margin: 0 -8px; }
.cr-slot { float: left; width: 20%; padding: 0 8px 16px; -webkit-transition: all 0.1s linear; transition: all 0.1s linear; position: relative; }
.cr-slot::after { content: ''; display: block; clear: both; }
.cr-top { position: relative; width: 100%; height: 100%; overflow: hidden; }
.cr-top img { width: 100%; height: auto; display: block; color: transparent; border-radius: 6px 6px 0 0; }
.cr-top:hover + .cr-details .cr-title, .cr-title:hover { color: #f7b2d5; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; }
.cr-details { position: relative; border-radius: 0 0 6px 6px; background: #292c39; background: #2d303e; }
.cr-title { color: #eee; font-family: effrasemi; position: relative; display: block; padding: 2px 10px 6px; height: 29px; line-height: 23px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; border-bottom: 1px solid rgba(0, 0, 0, 0.27); background: #292c39; background: #35384a; letter-spacing: 0.50px; font-size: 13px; }
.cr-title:hover { text-decoration: none; }
.cr-bottom { position: relative; font-size: 13px; padding: 0; display: inline-block; width: 100%; height:auto; }
.cr-bio { margin: 10px -1px 13px; padding: 0px 11px 0px; height: 27px; font-family: effra; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; letter-spacing: .5px; color: #bdbcce; color:#c8c0dd; color: #b2b3d0; line-height: 13px; }
.c-animate { height: 2px; width: 0; position: absolute; left: 0; right: 0; top: -31px; margin: auto; -webkit-transition: all .6s; }
.cr-top:hover + .cr-details .c-animate, .cr-title:hover + .cr-bottom .c-animate { width: 100%; background: #ef9bba; }
.cr-cat { font-size: 10px; width: 100%; height: 28px; border-top: 1px solid rgb(0 0 0 / 18%); box-shadow: 0 1px rgba(255, 255, 255, 0.01) inset; text-align:center; float:left; position:relative; cursor:pointer; }
.cr-cat span { position: relative; padding: 6px 4px 8px; float: left; min-width: 47px; height: 28px; color: #a7aec7; color: #bdbcce; color:#b2b3d0; border-right: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 1px 0px rgba(255, 255, 255, 0.02); }
.cr-cat span i { padding-right: 2px; font-size: 9px; text-shadow: 0px 0px #a7aec7; }
.cr-cat .cr-cat-r { padding-left:10px; padding-right:0; float: right; }
.cr-cat-drop {float: right; border-left: 1px solid rgba(0, 0, 0, 0.18); box-shadow: 1px 0px rgba(255, 255, 255, 0.02) inset; border-right: 0; position: relative; padding: 6px 14px 8px; height: 28px; color: #a7aec7; font-size: 13px; text-shadow: 0 0 #a7aec7b2; transition:.27s; }
.cr-cat-drop i { display: block; }
.cr-cat:hover .cr-cat-drop { color: #e9bbcc; text-shadow: 0 0 rgb(233 187 204 / 30%); }
.cr-cat-favorited { color: #8ab2f2 !important; color: #90b5f0 !important; }
.cr-cat-favorited .cr-cat-heart-full { display:inline; }
.cr-cat-favorited .cr-cat-heart-empty { display:none; }
.cr-cat-counter { display:inline; }

.cr-loading { min-height: 400px; line-height: 0; position: relative; clear: both; }
.cr-loading .spinner { position: absolute; left: 0; right: 0; top: 44%; }
.cr-nope { clear: both; margin: auto; text-align: center; padding: 100px 0 190px; }
.cr-nope i { clear: both; display: block; font-size: 67px; color: #e9b15e; }
.cr-nope-title { font-size: 18px; margin-top: 2px; font-family: effrasemi; }
.cr-nope-info { font-size: 13px; margin: 2px 0 10px; }
.cr-nope-btns { margin: auto; width: 100%; text-align: center; }
.cr-nope-btns a { margin: 3px 3px 6px; font-size: 13px; padding: 8px 42px 9px; background: #2d303e; border-radius: 4px; display: inline-block; transition:.25s; }
.cr-nope-btns a:hover { text-decoration:none; cursor: pointer; background: #303342; }

@media (max-width : 1100px) { .cr-slot { width: 25%; padding: 0px 7px 14px; } .cr-loop { position:relative; margin: 0 -7px; } }
@media (max-width : 800px) {
.characters .wakka { padding: 0 18px; } .cr-loop { margin: 0 -7px; } .cr-title { line-height: 23px; height: 25px; font-size: 11px; padding: 0 7px; }
.cr-cat { font-size: 10px; padding: 0; height: 24px; } .cr-cat span { padding:5px 3px; min-width:43px; height:23px; } .cr-cat span i { padding-right:3px;font-size: 8px; } .cr-cat-drop { padding:5px 12px 8px;font-size: 11px;height: 23px; } .c-animate { top: -27px; }
.cr-bio { font-size: 11px; margin: 7px 0 12px; padding: 0 8px; line-height: 12px; height: 23px; letter-spacing: 0.25px; }
.cr-nope { padding:70px 0 144px; } .cr-nope i { font-size: 57px; } .cr-nope-title { font-size: 17px; margin-top: 1px; } .cr-nope-info { font-size: 12px; margin: 1px 0 10px; } .cr-nope-btns a { margin: 1px 3px 6px; font-size: 11px; padding: 8px 27px; }
}
@media (max-width : 680px) { .characters .wakka { padding: 0 15px; } .cr-loop { margin: 0 -6px; } .cr-slot {  width: 33.33333333%;  padding: 0px 6px 12px; } }
@media (max-width : 540px) { .cr-nope { padding: 60px 0 142px; } .cr-nope i { font-size: 54px; } .cr-nope-info {  font-size: 11px; } .cr-nope-btns a { padding: 8px 13px; } }
@media (max-width : 480px) { .cr-nope {  padding: 38px 20px 102px; } .cr-nope-title { font-size: 16px; } .cr-nope-btns a { margin: 1px 0 7px; padding: 8px 12px; width: 100%; } }
@media (max-width : 460px) {
.characters .wakka { padding: 0px 12px; } .cr-loop { margin: 0px -5px; } .cr-slot { padding: 0px 5px 10px; }
}
@media (max-width : 480px) { .cr-slot { width:50%; } .cr-bio { font-size: 10px; } }
@media (max-width : 420px) { .cr-nope {  padding: 28px 20px 82px; } .cr-nope i { font-size: 52px; } }
@media (max-width : 360px) { .cr-nope {  padding: 25px 15px 80px; } .cr-nope i { font-size: 51px;  } .cr-nope-title { font-size: 15px; } .cr-nope-info { margin: 2px 0px 10px; font-size: 11px; } }

/*------ Character Drop ------*/
.cr-drop .cr-drop-row-wrap { position: absolute; z-index: 5; margin-top: 0px; padding-bottom: 1px; border-radius: 0 0 5px 5px; background: #2d3040; box-shadow: 0px 6px 5px #0000006b; }
.cr-drop .cr-bio { /* -webkit-line-clamp: 10; line-clamp: 10; height:auto; */ }
.cr-drop-tags { width: 100%; border-top: 1px solid rgb(0 0 0 / 18%); box-shadow: 0 1px rgb(255 255 255 / 1%) inset; padding: 9px 9px 9px; cursor: initial; background: #2f3242; clear: both; }
.cr-drop-tag { padding: 4px 5px 4px; margin: 1px 3px 2px 0; color: #d2d2d2; color: #f4dda5; color: #ffc0d2; border-radius: 4px; width: auto; position: relative; display: inline-block; font-size: 11px; background: #383c51; text-align: center; font-family: effrasemi; }
.cr-drop-row { font-size: 12px; width: 100%; border-top:1px solid rgba(0, 0, 0, 0.15); box-shadow:0 1px rgb(255 255 255 / 1%) inset; padding:9px 9px 10px; color:#d2d2d2; color:#cacbd5; float:left; transition:.27s; background:#2d3040; }
.cr-drop-row:nth-child(odd) { background: #2f3242; }
.cr-drop-row-l { padding-right: 0px; padding-right: 6px; position: relative; display: inline-block; }
.cr-drop-row-r { position: relative; padding-left: 10px; padding-right: 0; float: right; }
.cr-drop-row .icon-angle-double-up { display: block; font-size: 12px; top: 1px; margin-bottom: -2px; }
.cr-drop-row .icon-cancel-1 { display: block; font-size: 6px; margin-bottom: -2px; top: 4px; }
.cr-drop-upvote { cursor:pointer; }
.cr-drop-upvoted { color: #97ca97; cursor:pointer; }
.cr-drop-upvote:hover { color:#a4dba4; color:#a7dfa7; }
.cr-drop-favorite { cursor:pointer; }
.cr-drop-favorited { color: #a3c8d7; cursor:pointer; }
.cr-drop-favorite:hover { color: #b3d6e6; color: #aed4e6; }
.cr-drop-block { color:#cacbd5; cursor:pointer; }
.cr-drop-block:hover {  color: #ff8383; color:#ff9090; }
.cr-drop-creator .cr-drop-row-l { display: inline-block; width: 86%; }
.cr-drop-creator:hover, .cr-drop-close:hover { color: #c5a9ec; color: #c7abee; cursor:pointer; }
@media (max-width : 800px) { .cr-drop-tags { padding:8px 7px 10px; margin-top: 9px; } .cr-drop-tag {font-size:10px; padding: 3px 4px 3px; margin: 2px 3px 1px 0; } .cr-drop-row { padding:8px 7px; font-size: 11px; } .cr-drop-row .icon-angle-double-up { font-size: 11px; top: 0px; } .cr-drop-row .icon-cancel-1 { font-size: 6px; top: 3px; } }
@media (max-width : 480px) { .cr-drop-tags {  padding: 7px 7px 8px; } .cr-drop-tag {font-size:9px; } .cr-drop-row {  font-size: 10px; padding: 7px 7px 8px; } .cr-drop-row .icon-angle-double-up { font-size: 10px; } .cr-drop-row .icon-cancel-1 { font-size: 5px; top:4px; } }
@media (max-width : 460px) { .cr-drop .c-animate { top: -26px; }}

/*--------- PAGINATION ---------*/
.pagi-empty {text-align: center;position: relative;font-size: 20px;color: #489EB1;float: left;margin: 18px auto 50px 0px;height: 26px;width: 100%;font-family: effrabold;padding-top: 26px;border-top: 1px dashed #DCDCDC;}
.pagination {display: block;margin: 32px auto 60px;float: left;width: 100%;}.pagination-area {display: inline-block;margin: auto;display: table;}
.pagination span, .pagination a {display: block;position: relative;float: left;padding: 0px 6px 6px 0px;text-align: center;text-decoration: none;height: 32px;width: 34px;font-size: 16px;line-height: 34px;font-family: effrasemi;cursor: pointer;-webkit-transition: .14s all linear;-moz-transition: .14s all linear;transition: .14s all linear;}
.pagination a:hover { color: #e97da2; }
.pagination .current { color: #22a8d7 !important; }
.pagination .inactive { line-height: 34px;}
.pagi-messages .pagi-empty {margin-top: 38px;}
@media (max-width : 800px) { .pagination { margin: 29px auto 51px; } .pagination span, .pagination a { font-size:14px; } }
@media (max-width : 480px) {  .pagination span, .pagination a { font-size: 13px; } }
/*--------- Logged in and Character Page Hide Splash ---------*/
.characters-page .fx-slot, .characters-page .z-navi-wrap, .characters-page .token-home { display:none !important; } .logged .chrono .c-search-area { margin: 2px auto 0; } .logged .chrono .fx-slot { display:none; }
@media (max-width : 800px) { .logged .chrono .c-search-area { margin: 0px auto 0; } }
@media (max-width : 540px) { .logged .chrono .c-search-area { margin-top: -5px; } }


/*---------- Slider ----------*/
.fx-slot { margin: 0 0 1px; background: #262933; position: relative; border: 1px solid rgb(0 0 0 / 47%); border-radius: 6px; width: 100%; display: inline-block; transition: .27s; max-height: 100%; overflow: visible; }
.fx-slot .stars { Opacity:36%; }
.fx-slide-title { position: absolute; width: 75%; line-height: 0; top: 50%; z-index: 5; left: 0; right: 0; margin: auto; text-align: center; letter-spacing: 7px; color: #9ef1ff; font-size: 23px; text-shadow: 0px 0px 2px rgb(0 0 0 / 25%); font-family: chalet; opacity: .5; }
.fx-img { border-radius:6px 6px 0 0; max-height: 270px; float: left; width: 100%; border-bottom: 1px solid rgba(30, 32, 42, 0.65); overflow: hidden; position: relative; }
.fx-img img { width: 100%; position: relative; top: -45px; }
.fx-title { font-size: 15px; line-height: 49px; height: 52px; position: relative; padding: 0 16px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: effrasemi; border-bottom: 1px solid rgba(0, 0, 0, 0.30); background: #2d303e; border-radius: 0; letter-spacing: .25px; }
.fx-text { font-size: 14px; line-height: 20px; padding: 13px 18px 22px; color: #dcdee7; clear: both; background: #262933; border-radius: 0 0 6px 6px; letter-spacing: .5px; }
.fx-slot .feta-v2 { display:inline; } .fx-slot .feta-v1 { display:none; }
.feta-4 img { margin-top:16px; }
.feta-3 img { margin-top:-19px; }
.fx-arrow, .slide-arrow-r { position: absolute; padding: 0px 21px; cursor: pointer; z-index: 11; line-height: 0; top: 50%; color: #9ef1ff; opacity: .3; font-size: 25px; }
.fx-arrow-r { right:0; }
.fx-arrow i, .slide-arrow-r i { padding: 10px 16px; margin: -10px -16px; cursor: pointer; }
.fx-arrow:hover i, .fx-arrow-r:hover i { opacity: .5; }

@media (max-width : 1320px) { .fx-text { font-size:14px; } }
@media (max-width : 1280px) { .fx-slot { margin-top:-5px; }  .fx-title { font-size: 14px; } .fea-text { line-height: 19px; padding: 12px 16px 21px; } }
@media (max-width : 1200px) { .fx-slot { margin-top:-15px; } .fx-slide-title { font-size: 21px; } }
@media (max-width : 1080px) { .fx-img img { top: 0; margin:0; } .fx-text { letter-spacing: 0; } }
@media (max-width : 1000px) { .fx-slot .feta-v1 { display:inline; } .fx-slot .feta-v2 { display:none; }  }
@media (max-width : 800px) { .fx-slot { margin-top:-17px; } .fx-text { font-size: 13px; line-height: 18px; padding: 11px 16px 20px; } .fx-title { font-size: 13px; line-height: 44px; height: 47px; padding: 0 14px 0; } .fx-slide-title { font-size: 17px; letter-spacing: 4px; } }
@media (max-width : 725px) { .fx-text { min-height:84px; } }
@media (max-width : 680px) { .fx-slot { margin-top:-20px; }  }
@media (max-width : 600px) { .fea-title { font-size: 13px; line-height: 46px; height: 49px; } .fx-slide-title { font-size: 12px; } }
@media (max-width : 505px) { .fx-text { letter-spacing:0;font-size:12px;overflow:hidden;display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; padding:0; margin:11px 16px 20px; min-height:54px; } }
@media (max-width : 460px) {.fx-slot { margin-top:-23px; } }
@media (max-width : 450px) { .fx-text { margin: 10px 14px 16px; -webkit-line-clamp: 4; line-clamp: 4; min-height: 72px; letter-spacing: 0.25px; } .fx-title { font-size: 13px; line-height: 43px; height: 45px; padding: 0 13px 0; } .fx-slide-title { font-size: 11px; letter-spacing: 3px; } }
@media (max-width : 420px) { .fx-slide-title { font-size: 10px; } }
@media (max-width : 420px) { .fx-img img { width: 130%; left: -15%; } }
@media (max-width : 370px) { .fx-slide-title { font-size: 9px; letter-spacing: 2px; } }
@media (max-width : 364px) { .fx-text { font-size: 11px; letter-spacing: 0; } }
@media (max-width : 350px) { .fx-img img { width: 142%; left: -21%; } }
@media (max-width : 344px) { .fx-text { letter-spacing: .4px; margin: 12px 14px 17px; min-height: 90px; -webkit-line-clamp: 5; line-clamp: 5; } .fx-slide-title { font-size: 8px; top: 49%; } }

.z-navi-wrap { position: absolute; z-index: 5; left: 0; right: 0; bottom: -27px; width: 100%; margin: auto; display: inline-block; text-align: center; }
.z-navi-slot { border-radius: 100%; width: 10px; height: 10px; border: 2px solid #77bedd; display: inline-block; margin-left: 4px; cursor: pointer; }
.z-navi { background: #77bedd; width: 10px; height: 10px; border-radius: 100%; position: relative; top: -2px; left: -2px; }
.z-navi-slot:hover .sl-navi { display:block; }
@media (max-width : 640px) { .z-navi-wrap { bottom:-19px; } .z-navi-slot, .z-navi { width:7px; height:7px; border-width:1px; } .z-navi { top: -1px;left: -1px; } }
@media (max-width : 380px) { .z-navi-wrap { bottom:-19px; } .z-navi-slot, .z-navi { width:7px; height:7px; } .z-navi-slot { margin-left:2px; } }

/*---------- Sub Page ----------*/
.sub { line-height: 1.5; background: rgb(255 255 255 / .6%); overflow: auto; padding: 35px 0 60px; background: #191b24; }
.sub-title { text-align: center;font-size: 20px;font-family: 'effrasemi';margin-top: 0px; letter-spacing: .25px; }
.sub-sub-title { text-align: center; padding-bottom: 22px; color: #bbc5e8; font-size: 14px; margin-top: -4px; letter-spacing: .25px; }
.sub-p { width: 23%;float: left;background: #222531;text-align: center;padding: 15px 0 0;margin: 0 1%;position: relative;font-size: 15px;border-radius: 0 0 10px 10px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.11); }
.sub-top { height: 4px; position: absolute; top: -2px; border-radius: 5px 5px 0 0; background: #fd602e; left: 0; right: 0; }
.sub-p-1 { }
.sub-p-2 .sub-top, .sub-p-2 .sub-btn { background: #2b97ed; }
.sub-p-3 .sub-top, .sub-p-3 .sub-btn { background: #009688; }
.sub-p-4 .sub-top, .sub-p-4 .sub-btn { background: #ed9b22; }
.sub-p-title { font-size: 17px;font-family: 'effrasemi';padding: 1px 0 14px;}
.sub-p-price { background: #292d3d;padding: 9px;font-size: 15px; }
.sub-p-time {}
.sub-p-time span { width: 50%;display: block;float: left;height: 35px;line-height: 35px;font-size: 12px;background: #1f222f;cursor: pointer;  transition:.27s; }
.sub-p-time span:hover { color: #c0c6df; }
.sub-p-time-selected { color: #7ecf84 !important;font-family: 'effrasemi'; }
.sub-p-time-selected i { display:inline !important; }
.sub-p-list { padding: 11px 0 0px;clear: both;}
.sub-p-list span { padding: 7px 15px;display: inline-block;width: 100%;font-size: 13px;text-align: left;position: relative; letter-spacing:.2px; }
.sub-p-list i { font-size: 8px;padding-right: 5px;top: -1px;color: #84d584; }
.sub-p-null, .sub-p-null i { color: #707485; }
.sub-btn { background: #fd602e;padding: 11px;margin-top: 12px;font-family: 'effrasemi';font-size: 15px;border-radius: 0 0 6px 5px; cursor:pointer;  transition:.27s; }
.sub-btn:hover { opacity:.96; }
.sub-list-show { font-size: 13px; font-family: 'effrasemi'; padding: 7px 15px; text-align: left; }
.sub-list-show i { color:inherit; }
.sub-p-2 .sub-list-show { color: #7fc9ff; }
.sub-p-3 .sub-list-show { color: #44cbbf; }
.sub-p-4 .sub-list-show { color: #f7bb61; }

@media (max-width : 1280px) { .sub { padding: 33px 0 58px; } .sub-title { font-size: 18px; } .sub-sub-title { padding-bottom: 19px; font-size: 14px; } .sub-p-title { font-size: 15px; padding: 1px 0 13px; } .sub-p-price { font-size: 14px; } }
@media (max-width : 1100px) { .sub-p { margin: 0 1%; width: 23%; } }
@media (max-width : 980px) { .sub-p { margin-bottom: 21px; width: 48%; } .sub { padding: 30px 0 32px; } .sub-title { font-size: 18px; } .sub-sub-title { padding-bottom:18px; font-size: 14px; margin-top: -3px; } }
@media (max-width : 800px) { .sub { padding-top: 28px; } .sub .wakka { padding:0 10px; } .sub-p { margin-bottom: 17px; } .sub-title { font-size: 17px; } .sub-sub-title { padding-bottom: 16px; font-size: 13px; margin-top: -4px; } .sub-btn { padding: 10px; } }
@media (max-width : 620px) { .sub { padding: 24px 0 32px; } .sub-p { margin-bottom: 12px; } .sub-title { text-align: center; font-size: 16px; } .sub-sub-title { padding-bottom: 16px; font-size: 12px; } }
@media (max-width : 540px) { .sub-p { width:auto; margin:0 5px 15px; } .sub-list-hide { display:none; } .sub .sub-list-show { display:block; } .sub-btn { padding:9px; font-size:14px; margin:12px 12px 18px; border-radius: 4px; } }
@media (max-width : 440px) { .sub { padding: 23px 0 30px; } .sub-sub-title { padding-bottom: 15px; font-size: 12px; } }

/*---------- Sub Success ----------*/
.subbed { padding: 35px 0 65px; background: rgb(255 255 255 / 1.3%); }
.subbed-wrap { margin: auto; width: 470px; border: 1px solid rgb(0 0 0 / 48%); padding: 35px 25px; background: #22252d; font-size: 15px; border-radius: 6px; box-shadow: 1px 1px rgb(255 255 255 / 2%) inset; }
.subbed-top-i { text-align: center; font-size: 95px; color: #ffc55b; background: linear-gradient(135deg, #ffea92, #ffc55b, #fff0d9); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.subbed-title { text-align: center; font-family: effrasemi; font-size: 19px; padding-bottom: 10px; }
.subbed-row { float: left; width: 100%; padding: 17px 0; border-bottom: 1px solid rgb(0 0 0 / 20%); box-shadow: 0 1px rgb(255 255 255 / 1%); }
.subbed-row div { }
.subbed-l { float:left; }
.subbed-r { float:right; }
.subbed-info { clear: both; padding: 15px 0 0; font-style: italic; font-size: 13px; line-height: 16px; color: #a9aeb3; }

@media (max-width : 800px) { .subbed { padding:0; } .subbed .wakka { padding:0; } .subbed-wrap { width: auto; border: 0; background: rgb(26 29 35 / 85%); padding: 30px 20px 50px; border-radius:0; box-shadow:none; } }
@media (max-width : 560px) { .subbed-wrap { padding: 27px 17px 50px; } .subbed-top-i { font-size:80px; } .subbed-title { font-size:16px; } .subbed-row { padding:15px 0; font-size:13px; } .subbed-info { font-size:12px; } }

/*--------- Edit Profile ---------*/
.p-single { padding: 58px 0 0; overflow: auto; background: rgb(255 255 255 / .5%); background: #191b24; }
.p-img { margin: auto; text-align: center; }
.p-img img { margin: auto; border-radius: 100%; height: 300px; width: 300px; position: relative; border: 4px solid #2d3039; }
.p-no-photo { margin: auto; border-radius: 100%; height: 300px; width: 300px; position: relative; border: 4px solid #363a49; background: #20232d; background:#232631; transition:.27s; }
/* .p-no-photo-icon { top: 41%; font-size: 46px; color: transparent; }
.p-no-photo-icon:hover { color: #363a49; }
.p-no-photo:hover i { color: #3e4253; } */
.p-no-photo-icon { top: 41%; font-size: 46px; color: #3e4253; }
.p-snapshot-icon { position: absolute; right: 10px; top: 20px; font-size: 20px; color: #3e4253; cursor: pointer;}
.p-no-photo input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 100%; z-index: 50; background: none; opacity: 0; }
.p-no-photo-loading .spinner { position: absolute; left: 0; right: 0; top: 50%; margin-top: -26px; }
.p-heart { position: absolute; margin-left: -235px; font-size: 44px; margin-top: 5px; color: #e38ba0; }
.p-heart-r { margin-left: 185px; color: #89b6d7; }

.p-data-wrap { position: absolute; top: 0; margin: auto; width: 824px; left: 0; right: 0; }
.p-data { position: absolute; top: 106px; left: 0; margin: auto; }
.p-data-right { right: 0%; left: auto; }
.p-data-btn { padding: 10px 12px; background: #232631; margin: 8px; width: 208px; border-radius: 5px; font-size: 14px; transition:.25s; display:block; }
.p-data-follow:hover, .p-edit .p-data-btn:hover { cursor:pointer; background: #262a35; text-decoration:none; }
.p-data-follow-yes { background: #468348 !important; }
.p-data-follow-yes i { float: right; font-size: 10px; top: 3px; }
.p-name { font-size: 23px; display: block; padding: 15px 0 0px; text-align: center; font-family: 'chalet'; }
.p-descr { padding: 11px 0 30px; text-align: center; border-bottom: 1px solid rgb(13 16 21 / 62%); box-shadow: 0 1px rgb(255 255 255 / 1%); margin-bottom: 35px; font-size: 15px; max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto; }
.p-descr span { max-width: 600px; display: block; text-align: center; margin: auto; }
.p-load { border-top: 1px solid rgb(11 13 18 / 54%); box-shadow: 0 1px rgb(255 255 255 / 1%) inset; font-family: effrasemi; text-align: center; padding: 53px 0 45px; clear: both; margin-top: 20px; float: left; width: 100%; margin-bottom: 19px; font-size: 15px; cursor:pointer; transition:.25s; }
.p-load:hover { color: #edd3aa; }
.p-empty { text-align: center; margin: 27px 0 85px; clear: both; float: left; width: 100%; }
.p-empty img { width: 145px; margin: 6px auto 0; }
.p-empty-label { padding: 14px 0 0; font-size: 15px; }

@media (max-width : 1280px) { .p-single { padding:50px 0 0; } }

@media (max-width : 860px) { .p-descr { border:0; box-shadow:none; padding: 11px 0 22px; margin-bottom:0; } .p-data-wrap { position: relative; width: 100%; border-bottom: 1px solid rgba(13, 16, 21, 0.62); box-shadow: 0 1px rgb(255 255 255 / 1%); padding-bottom: 23px; margin-bottom: 30px; float: left; } .p-data { width: 50%; float: left; position: relative; top: 0; padding-right: 4px; } .p-data-right { float:right; padding-right:0; padding-left: 4px; } .p-data-btn { margin:8px 0; width:100%; } }

@media (max-width : 800px) { .p-single { padding:40px 0 0; } .p-name { font-size: 21px; } .p-descr { font-size:14px; } .p-data-wrap { padding-bottom: 19px; } .p-data-btn { padding: 11px 12px 11px; font-size:13px;  } .p-data-follow-yes i { font-size: 9px; top: 3px; } .p-img img, .p-no-photo { height: 274px; width: 274px; } .p-no-photo-icon { top:40%;font-size:42px; } .p-heart { font-size: 36px; margin-top: 10px; } .p-heart-l { margin-left: -170px; } .p-heart-r { margin-left: 136px; } .p-load { padding: 43px 0 35px; margin-top: 16px; font-size: 14px; } .p-single-rows { float: left; width: 100%; margin: -5px 0 0; } }
@media (max-width : 700px) { .p-single { padding:37px 0 0; } }
@media (max-width : 600px) { .p-img img, .p-no-photo { height: 260px; width: 260px; } .p-no-photo-icon { font-size:39px; } .p-heart { font-size: 32px; margin-top: 10px; } .p-heart-l { margin-left: -165px; } .p-heart-r { margin-left: 134px; } .p-load { padding: 37px 0 30px; } }
@media (max-width : 500px) { .p-single { padding: 32px 0 0; } .p-img img, .p-no-photo { height: 225px; width: 225px; } .p-no-photo .p-no-photo-icon { top: 39.5%; font-size: 36px; } .p-name { font-size: 18px; padding: 13px 0 0px; } .p-descr { font-size: 13px; padding: 7px 0 12px; } .p-data-wrap { padding-bottom:13px; } .p-data-btn { font-size: 12px; padding: 11px 12px 10px; } .p-data-follow-yes i { font-size: 8px; top: 3px; } .p-heart { font-size: 32px; margin-top: 10px; } .p-heart-l { margin-left: -151px; } .p-heart-r { margin-left: 120px; } .p-empty img { width: 138px; margin-top: 3px; } .p-empty-label { padding: 12px 0 0; font-size: 13px; } .p-single-rows { margin: -10px 0 0; } .p-load { margin-top: 13px; } }
@media (max-width : 460px) { .p-load { margin-top: 17px; } }
@media (max-width : 420px) { .p-single { padding: 30px 0 0; } }
@media (max-width : 335px) { .p-heart-l { margin-left: -146px; } .p-heart-r { margin-left: 115px; } .p-data-messages span { display:none; } }

/*---------- My Favorites ----------*/
.my { overflow: auto; background: rgb(255 255 255 / 1%); background: #191b24; min-width: 320px; }
.my .wakka { min-height:300px; }
.my-menu-wrap { width: 100%; border-bottom: 1px solid rgb(8 10 14 /47%); box-shadow: 0px 1px rgb(255 255 255 / 1%); background: rgb(255 255 255 / .9%); margin-bottom: 27px; }
.my-menu { max-width: 1480px; margin: auto; padding: 22px 44px 24px; overflow: auto; width: auto; }
.my-menu-title { font-family: effrasemi; font-size: 19px; margin-bottom: 4px; color: #f3f3f3; }
.my-menu a { padding: 7px 9px; cursor: pointer; border-radius: 4px; font-size: 12px; display: block; float: left; margin: 0px 5px 5px 0; background: #2d2f3c; width: auto; border: 1px solid #16171d; box-shadow: 1px 1px rgba(255, 255, 255, 0.01) inset; height: 30px; line-height: 13px; transition:.25s; }
.my-menu a:hover { text-decoration: none; color: #9eccf5; }
.my-counter span { background: #292c39; margin: -7px -9px -15px 14px; padding: 7px 8px 6px 7px; display: block; border-left: 1px solid #20222dc9; border-radius: 0 5px 5px 0; box-shadow: 1px 0 rgba(255, 255, 255, 0.01) inset; height: 28px; color: #a6a6a6; float: right; }
.my-menu i { transform: rotate(90deg); -webkit-transform: rotate(90deg); top: 1px; font-size: 14px; margin-bottom: -3px; margin-right: 3px; float: left; }
.my-counter-selected { color: #e8d0a4 !important; font-family: effrasemi !important; }
.my .my-counter-selected i { display:block; }

.my .favorite-remove, .my-gallery-total .cr-cat-l { padding-left:10px; padding-right:10px; }

.my .p-empty { text-align: center; margin: 55px 0 74px; clear: both; float: left; width: 100%; }
.my .p-empty img { width: 120px; margin: auto; }
.my .p-empty-label { padding: 10px 0 0; font-size: 13px; }
.my .p-load { border-top: 1px solid rgb(11 13 18 / 51%); box-shadow: 0 1px rgb(255 255 255 / 1%) inset; font-size: 15px; margin: 15px 0 0px; background: rgb(255 255 255 / .9%); padding:53px 0 59px; }
.p-load-no-hover { cursor:auto !important; }
.p-load-no-hover span { color:#eee !important; }

@media (max-width : 1280px) { .my-menu { padding: 20px 20px 22px; } .my .p-load { padding:49px 0 56px; } }
@media (max-width : 980px) { .my .wakka { padding:0 12px; } }
@media (max-width : 960px) { .my-menu-wrap {margin-bottom:23px; } .my-menu { padding-left:16px; padding-right:16px; } .my-menu-title { font-size: 16px; margin-bottom: 5px; } .my-menu a { font-size:12px; height:29px; padding: 7px 8px; } .my-menu i { font-size:13px; margin-right:2px; } .my-counter span { height:27px; margin: -7px -8px -15px 12px; } }
@media (max-width : 800px) {
.my-menu-wrap {  margin-bottom: 22px; } .my-menu { padding: 17px 16px 18px; } .my-menu-title { font-size: 15px; margin-bottom: 4px; }
.my .p-empty { margin: 44px 0 60px; }
.my .p-empty img { width: 110px; margin: auto; }
.my .p-empty-label { padding: 8px 0 0; font-size: 12px; }
.my .p-load { font-size: 13px; padding: 40px 0 45px; margin-top: 12px; }
}
@media (max-width : 540px) { .my .wakka { padding:0 10px; } .my-menu-wrap { margin-bottom: 18px; } .my-menu-title { font-size: 14px; margin-bottom: 3px; } .my-menu { padding: 15px 12px 15px; } .my-menu a { font-size: 11px; height: 27px; padding: 6px 6px; margin: 0px 3px 3px 0; } .my-counter span { height: 25px; margin: -6px -6px 0px 11px; } .my .p-load { padding: 35px 0 42px; margin-top: 9px; } }
@media (max-width : 460px) { .my-menu a { height: 26px; line-height: 11px; } .my-counter span { margin:-6px -6px 0 6px; padding: 7px 7px 6px 6px; height: 24px; } .my .p-empty img { width: 100px; } .my .p-empty-label { font-size: 11px; } .my .p-load { font-size:12px; padding:33px 0 40px; margin-top:10px; } }

/*----------- LORAs & Voices -----------*/
.my-loras-loop .cr-cat-l { padding-left:10px; padding-right:10px; }
.my-voices-loop { gap:9px; grid-template-rows: auto auto auto; grid-template-columns: 1fr 1fr 1fr; display:grid; padding: 10px 4px 16px; }
.my-voices-loop .mk-model-row { border-color: #111216d9; float: none; margin: 0; padding: 0; width: auto; }
@media (max-width : 1280px) { .my-voices-loop { padding: 6px 0px 12px; } }
@media (max-width : 1220px) { .my-voices-loop { padding: 6px 0px 19px; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; } }
@media (max-width : 980px) { .my-voices-loop { padding: 0 8px 14px; } }
@media (max-width : 960px) { .my-voices-loop { padding: 4px 4px 12px; } }
@media (max-width : 800px) { .my-voices-loop { padding: 2px 5px 12px; } }
@media (max-width : 725px) { .my-voices-loop { grid-template-rows: auto; grid-template-columns: 1fr; } }
@media (max-width : 540px) { .my-voices-loop { padding: 0 2px 10px; } }

/*----------- Messages -----------*/
@-moz-document url-prefix() { .mes-1 { scrollbar-color: #11131a #15171e; scrollbar-width: thin !important; } .mes-2 { scrollbar-color: #11131a rgb(21 23 30 / 0%); } .mes-2-input { scrollbar-color: #1f222b rgb(21 23 30 / 0%); } .mes-3, .mes-1 { scrollbar-color: rgb(21 23 30 / 0%) rgb(21 23 30 / 0%); } }
.mes-1 ::-webkit-scrollbar { width: 4px; }
.mes-1 ::-webkit-scrollbar-track { background: none; }
.mes-1 ::-webkit-scrollbar-thumb { background: #11131a; }
.mes-1 ::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }
.mes-2 ::-webkit-scrollbar { width: 7px; }
.mes-2 ::-webkit-scrollbar-track { background: none; }
.mes-2 ::-webkit-scrollbar-thumb { background: #11131a; }
.mes-2 ::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }
.mes-2-input ::-webkit-scrollbar { width:7px; }
.mes-2-input ::-webkit-scrollbar-track { background: none; }
.mes-2-input ::-webkit-scrollbar-thumb { background: #1f222b; }
.mes-2-input ::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }
.mes-3 ::-webkit-scrollbar { width: 0px; }
.mes-3 ::-webkit-scrollbar-track { background: none; }
.mes-3 ::-webkit-scrollbar-thumb { background: none; }
.mes-page .head-wrap { border-bottom-color: rgba(8, 10, 14, 0.45); }

.mes { width:100%; min-width:300px; margin-top:0; z-index: 500; position: relative; float: left; width: 100%; background: #15171e; color-scheme: dark; overflow: hidden; }
.mes-1 { width: 20%; position: relative; overflow-x: hidden; float: left; background: #1a1e28; }
.mes-1-top { font-family: effrasemi; padding: 13px 8px; font-size: 16px; height: 43px; background: #191c24; }
.mes-1-top-m { display:none; }
.mes-1-top-r { float: right; font-size: 11px; font-family: effra; line-height: 17px; padding:7px 11px; margin-top:-6px; color: #c2bad582; transition: .27s; position: absolute; right: 0; top: 13px; cursor:pointer; }
.mes-1-top-r:hover { color: #c2bad58f; color:#c4bdd78f; text-decoration:none; }
.mes-1-search { position: relative; width: 100%; }
.mes-1-search input { width: 100%; height: 39px; padding: 9px 35px 10px 10px; background: #1e212b; border: 1px solid rgba(12, 13, 18, 0.55); border-left: 0; border-right: 0; color: #eee; font-size: 13px; }
.mes-1-search i { position: absolute; right: 9px; top: 15px; font-size: 11px; color: #656b7f; padding: 9px 10px 10px; margin: -10px -10px; transition: .3s; cursor: pointer; }
.mes-1-search i:hover { color: #7e8391; }
.mes-1-search .mes-1-search-close { font-size: 9px;top: 14px;}
.mes-1-row-scroll { position: relative; height: calc(100vh - 147px); height: calc(100dvh - 147px);  overflow-y: auto; background: #1a1e28; }
.mes-1-row { float: left; width: 100%; border-bottom: 1px solid rgb(8 10 14 / 35%); box-shadow: 1px 1px rgba(255, 255, 255, 0.01), 0px 1px rgba(255, 255, 255, 0.6%) inset; position: relative; overflow: hidden; cursor: pointer; background: rgb(26, 30, 40); transition:.27s; }
.mes-1-row:hover { background: rgb(28, 33, 45); background: rgb(28, 32, 43); }
.mes-1-img { float: left; padding:7px; } .mes-1-img img { width: 52px; height: 52px; border-radius: 100%; }
.mes-1-row-r { position: relative; padding: 16px 18px 0 70px; font-size: 13px; letter-spacing: 0.5px; color: #d9ddee; }
.mes-1-row-yes { color: #9dd5ff; }
.mes-1-row-yes .mes-1-row-counter { }
.mes-1-row-r .mes-1-del { font-size: 8px; position: absolute; right: 0px; top: 0; padding: 8px; color: #10121a; text-shadow: 1px 1px rgb(255 255 255 / 3%); transition: .3s; }
.mes-1-row-r .mes-1-del:hover { color: #ca5a5a; }
.mes-1-row-name { padding-right:12px; }
.mes-1-row-descr { color: #959cb5; font-size: 11px; letter-spacing: .25px; margin: 0; font-family: effra; text-transform: none; color: #a4afd2; padding-right:12px; }
.mes-1-row-date { position: absolute; font-size: 9px; right: 8px; bottom: 7px; font-family: effrasemi; color: #938f86; text-transform: uppercase; }
.mes-1-scroll-bottom { float: left; width: 100%; height: 56px; padding: 11px; z-index: 5353; position: relative; overflow: hidden; background: #181d28; box-shadow: 0px 3px 3px rgb(0 0 0 / 18%) inset; }
.mes-1-scroll-bottom .spinner { width: 34px; }

.mes-2 { width: 60%; position: relative; overflow-x: hidden; float: left; border: 1px solid rgb(18, 22, 30); border-right-color: rgb(20, 24, 32); border-top: 0; border-bottom:0; overflow:hidden; }
.mes-2-top { border-bottom: 1px solid rgba(0, 0, 0, 0.21); width: 100%; padding: 14px 15px; clear: both; height: 82px; position: relative; box-shadow: 1px 0px rgb(255 255 255 / 1%) inset; z-index: 100; background: #191c24; }
.mes-2-img { width: 54px; height: 54px; float: left; }
.mes-2-img img { border-radius: 100%; width: 100%; height: 54px; float: left; cursor: pointer; }
.mes-2-img-r { float: left; padding-left: 10px; position: relative; top: 5px; width: 69%; }
.mes-2-name { font-size: 18px; font-family: effrasemi; float: left; clear: both; }
.mes-2-actions { float: left; font-size: 13px; font-family: effrasemi; top: 4px; position: relative; clear: both; }
.mes-2-actions .mes-2-action:hover { color: #a9d4f7; cursor:pointer; transition:.27s; }
.mes-2-action { float:left; padding: 6px 6px; margin: -6px -5px; }
.mes-2-actions-dot { width: 1px; height: 12px; display: inline-block; position: relative; top: 2px; margin: 0 8px 0 8px; border-radius: 100%; background: #060608; box-shadow: 1px 0 rgb(255 255 255 / 3%); float: left; }
.mes-2-action-drop { position: absolute; background: #2f3546; padding: 0;  margin-top: 5px; transition: .27s; width: auto; text-wrap: nowrap; overflow: hidden; border-radius: 0 5px 5px 5px; min-width:150px; }
.mes-2-action-span { padding: 7px 12px; font-size: 13px; color: #eee; font-family: effra; display: block; transition:.15s; position:relative; }
.mes-2-action-span:hover { color: #b8dfff; cursor:pointer; }
.mes-2-action-span:first-of-type { padding-top:12px; }
.mes-2-action-span:last-of-type { padding-bottom:13px; }
.mes-2-action-span input { font-size: 0; left: -20px; right: 0; width: auto; }
.mes-2-action-drop-r { display: block; background: #2f3546; background: #363d5121; color: #ecd9c2; text-wrap: wrap; padding: 10px 11px 11px; font-size: 12px; cursor: auto; line-height: 13px; font-family: effrasemi; }
.mes-2-action-drop-info { letter-spacing:.5px; }
.mes-2-action-drop-info i { padding-right:2px; }
.mes-2-action-explain-back { cursor:pointer; }
.mes-2-action-drop-info-descr { width: 279px; display: block; text-wrap: wrap; padding: 11px 12px 15px; margin-top: 0; border-top: 1px solid rgb(0 0 0 / 13%); box-shadow: 0 1px rgb(255 255 255 / 1%) inset; font-family: effra; background: rgb(0 0 0 / 8%); cursor: auto; color: #eee !important; font-size: 12px; line-height: 16px; }
.call-chat-ask-menu .mes-2-action-drop { min-width: 315px; background: #2b3040; }
.mes-2-mood { }
.mes-2-mood i { margin-top: -2px; margin-left: 0px; font-style: normal; display: inline-block; }

/*-- Skill Drop --*/
@-moz-document url-prefix() { .mes-2-action { scrollbar-color: #1f2331 rgb(41 45 61 / 0%); }  }
.mes-2-action ::-webkit-scrollbar { width: 7px; }
.mes-2-action ::-webkit-scrollbar-track { background: none; }
.mes-2-action ::-webkit-scrollbar-thumb { background: #1f232f; filter: brightness(.92); }
.mes-2-action ::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }
.mes-2-skills { overflow-y: auto; max-height: 287px; }
.mes-2-action-drop .switch a { background-color: #4b5068; }
.mes-2-skill-top:hover .switch a, .mes-2-skill:hover .switch a { background: #515671; }
.mes-2-skill { padding: 11px 8px 15px 12px; font-size: 13px; color: #eee; font-family: effra; display: block; position: relative; border-top: 1px solid rgb(23 27 37 / 34%); box-shadow: 0 1px rgb(255 255 255 / 1%) inset; cursor:pointer; }
.mes-2-skill-first { border:0; box-shadow:none; }
.mes-2-skill-top { display: block; background: #2f3546; color: #eee; font-family: effra; text-wrap: wrap; padding: 9px 8px 7px 9px; font-size: 10px; line-height: 11px; font-style: italic; height: 29px; border-bottom: 1px solid rgb(23 27 37 / 39%); box-shadow: 0 1px rgb(255 255 255 / .6%); }
.mes-2-skill b { font-weight:normal; font-family: effrasemi; }
.mes-2-sk { color: #aeb6cd; font-family: effra; text-wrap: wrap; font-size: 11px; line-height: 13px; padding-top: 4px; }
.call-chat-ask-menu .switch { width: 19px; height: 11px; }
.call-chat-ask-menu .switch span { height: 5px; width: 5px; left: 3px; bottom: 3px; background-color: rgb(255 255 255 / 82%); }
.call-chat-ask-menu .switch-on a { background: #329188 !important; }
.call-chat-ask-menu .switch-on span { background-color: rgb(255 255 255 / 90%); right: 3px;}
.mes-2-skulls {  }
.mes-2-sku { display: block; background: #2f3546; color: #eee; font-family: effra; text-wrap: wrap; padding: 9px 8px 7px 8px; font-size: 10px; line-height: 11px; font-style: italic; height: 29px;  border-top: 1px solid rgb(23 27 37 / 32%); box-shadow: 0 1px rgb(255 255 255 / 1%) inset; }
.mes-2-sku:first-of-type { border-top: 1px solid rgba(23, 27, 37, 0.36); }
.mes-2-sku div { float:right; }
.mes-2-sku span { float:left; }
.disabled-element { pointer-events: none; user-select: none; opacity: 0.6; }
@media (max-width : 410px) { .call-chat-ask-menu .mes-2-action-drop { min-width:300px; } }
@media (max-width : 390px) { .call-chat-ask-menu .mes-2-action-drop { min-width:288px; } }
@media (max-width : 380px) { .call-chat-ask-menu .mes-2-action-drop { min-width:280px; } }
@media (max-width : 370px) { .call-chat-ask-menu .mes-2-action-drop { min-width:272px; } }
@media (max-width : 360px) { .call-chat-ask-menu .mes-2-action-drop { min-width:258px; } }
@media (max-width : 350px) { .call-chat-ask-menu .mes-2-action-drop { min-width:250px; } }
@media (max-width : 340px) { .call-chat-ask-menu .mes-2-action-drop { min-width:240px; } }
@media (max-width : 330px) { .call-chat-ask-menu .mes-2-action-drop { min-width:230px; } }

/*-- Right Menu Drop --*/
.mes-2-menu { position: absolute; right: 0; top: 0; bottom: 0; }
.mes-2-menu .mes-2-menu-extras { font-size: 28px; padding: 24px 26px 23px 27px; float: right; cursor: pointer; transition: .27s; }
.mes-2-menu .mes-2-menu-extras:hover { color: #ffd4e3; }
.mes-2-drop { width: 172px; background: #2f3546; position: absolute; top: 71px; right: 16px; border-radius: 5px; }
.mes-2-edge { border-left: 9px solid transparent; border-right: 9px solid transparent; position: absolute; width: 1px; border-bottom: 8px solid #2f3546; margin: auto;top: -8px;right:14px; }
.mes-2-drop-option { padding: 8px 11px; font-size: 13px; display:block; transition: .15s; cursor: pointer; }
.mes-2-drop-option:first-of-type { padding-top:15px; }
@media (min-width : 651px) { .mes-2-drop-option:nth-of-type(2) { padding-top:15px; } }
.mes-2-drop-option:hover, .mes-2-creator:hover { color: #a9d4f7; color: #b8dfff; text-decoration:none; }
.mes-2-creator { border-top:1px solid rgba(0, 0, 0, 0.19); display:block; margin-top:8px; box-shadow:0 1px hsl(0deg 0% 100% / 2%) inset; padding:6px 8px 7px; font-size:12px; color:#a3acc6; transition:.27s; background:#32384a; }
.mes-2-creator-i { font-size: 11px; top: 0px; padding-right: 2px; margin-left: 3px; }
.mes-2-drop-line { border-top: 1px solid rgba(0, 0, 0, 0.19); display: block; box-shadow: 0 1px hsl(0deg 0% 100% / 2%); }
.mes-2-drop-i { cursor:pointer; float:left; width:33.3333333%; font-size:13px; padding:14px 13px 13px; text-align: center; box-shadow:1px 0px hsl(0deg 0% 100% / 2%); border-right:1px solid rgba(0, 0, 0, 0.19); transition: .27s; }
.mes-2-drop-i:last-of-type { border:0; box-shadow:none; }
.mes-2-drop-i-up:hover { color: #5ead61; }
.mes-2-drop-i-down:hover { color: #d94d43; }
.mes-2-drop-i-fav:hover { color: #db5c7a; color: #569ed7; }
.mes-2-drop-i-up.drop-i-selected { color: #5ead61; }
.mes-2-drop-i-down.drop-i-selected { color: #d94d43; }
.mes-2-drop-i-fav.drop-i-selected { color: #db5c7a; color: #569ed7; }
.mes-2-drop-search { position: relative; width: 100%; float: left; }
.mes-2-drop-search input { width:100%;color:#eee; box-shadow:0 1px hsl(0deg 0% 100% / 2%) inset; padding:8px 24px 8px 8px;font-size:11px;background:#32384a; border-top:1px solid rgba(0, 0, 0, 0.19); border-radius:0 0 5px 5px; }
.mes-2-drop-search input::-webkit-input-placeholder {color: #8c95ac;} .mes-2-drop-search input::-moz-placeholder {color: #8c95ac;}
.mes-2-drop-search i { position: absolute; right: 8px; top: 9px; font-size: 11px; color: #6a7188; padding: 8px 8px 8px; margin: -8px -8px; transition: .3s; }
.mes-2-drop-search i:hover { color: #7e8391; cursor:pointer; }
.mes-2-search-control { cursor:pointer; }
.mes-2-search-results-arrow { padding-left: 1px;font-size: 10px; }

.mes-2-chat { position: relative; overflow: hidden; height: calc(100vh - 148px); height: calc(100dvh - 148px); box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; background: rgb(28, 31, 40); }
.mes-2-chat-bg { opacity: .2; position: absolute; }
.mes-2-chat-bg-character { width: 100%; opacity: 1%; object-fit: cover; height: 100%; filter: grayscale(1); }
.mes-2-input { position: absolute; bottom: 14px; width: 100%; z-index: 10; }
.mes-2-textarea { padding: 0 15px 0 15px; position: relative; }
.mes-2-textarea-pad { background: #282b35; background: #2d3346; background: #2f3546; border-radius: 5px; padding-right: 54px; }
.mes-2-input textarea { width: 100%; height: 46px; max-height: 122px; font-size: 14px; background: none; color: #eee; padding: 17px 7px 0px 12px; line-height: 13px; resize: none; }
.mes-2-send { position: absolute; width: 43px; text-align: center; top:0; right:15px; padding: 6px 0; font-size: 17px; background: #4e97d1; color: #fff; border-radius: 6px; height: 40px; line-height: 29px; box-shadow: -3px 0 rgb(24 26 33 / 18%); cursor: pointer; transition: .5s; margin: 4px; }
.mes-2-send:hover { background: #519bd5; }
.mes-2-input textarea[rows="2"], .mes-2-input textarea[rows="3"], .mes-2-input textarea[rows="4"], .mes-2-input textarea[rows="5"], .mes-2-input textarea[rows="6"], .mes-2-input textarea[rows="7"], .mes-2-input textarea[rows="8"], .mes-2-input textarea[rows="9"], .mes-2-input textarea[rows="10"], .mes-2-input textarea[rows="11"], .mes-2-input textarea[rows="12"], .mes-2-input textarea[rows="13"], .mes-2-input textarea[rows="14"], .mes-2-input textarea[rows="15"], .mes-2-input textarea[rows="16"], .mes-2-input textarea[rows="17"], .mes-2-input textarea[rows="18"], .mes-2-input textarea[rows="19"], .mes-2-input textarea[rows="20"], .mes-2-input textarea[rows="21"], .mes-2-input textarea[rows="22"] { padding-top: 11px; padding-bottom: 14px; line-height: 14px; }
.mes-2-input textarea::-webkit-input-placeholder {color: #a1a6b7;}
.mes-2-input textarea::-moz-placeholder {color: #a1a6b7;}
.mes-2-input textarea:-moz-placeholder {color: #a1a6b7;}
.mes-2-input textarea:-ms-input-placeholder {color: #a1a6b7;}
.mes-2-send-voice { background: #579f5a !important; }
.mes-2-send-voice .pulse-voice, .mes-2-send-voice .mes-2-send-mic { display:block; }
.mes-2-send-voice .mes-2-send-plane { display:none; }
.pulse-voice {content:''; width: 53px; height: 49px; background: #579f5a; border: 5px solid #579f5a; border-radius: 6px; position: absolute; top: -5px; left: -5px; animation: pulsevoice infinite 1.5s; display:none; }
@-webkit-keyframes pulsevoice { 0% { -webkit-transform: scale(1, 1); opacity: 1; } 100% { -webkit-transform: scale(1.3, 1.3); opacity: 0; } }
.mes-2-send-loading { background:none !important; box-shadow:none !important; }
.mes-2-send-loading i { display:none; }
.mes-2-send-loading  .spinner { width:30px; visibility:visible; display:grid; border-width: 2px; position: relative; top: 0px; }

/*-- Command drop and label --*/
@-moz-document url-prefix() { .mes-com-drop { scrollbar-color: #383c4b rgb(41 45 61 / 0%); }  }
.mes-com-drop::-webkit-scrollbar { width: 7px; }
.mes-com-drop::-webkit-scrollbar-thumb { background: #383c4b; filter: brightness(.99); }
.mes-com-drop::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }
.mes-com-drop { left: 15px; background: #2f3546; border-radius: 5px; right: 15px; position: absolute; bottom: 68px; z-index: 20; overflow-y:auto; max-height: 190px; }
.mes-com-row { padding:11px 8px 15px 12px; font-size:13px; color:#eee; font-family:effra; display:block; position:relative; border-top:1px solid rgb(23 27 37 / 31%); box-shadow:0 1px rgb(255 255 255 / 1%) inset;transition:.25s; }
.mes-com-row:hover { background: #313749; cursor:pointer; }
.mes-com-row span { font-weight:normal; font-family: effrasemi; }
.mes-com-row div { color: #aeb6cd; font-family: effra; text-wrap: wrap; font-size: 11px; line-height: 13px; padding-top: 1px; }
.mes-com-label { position: absolute; top: 0; padding: 0px 2px; font-size: 13px; width: 68px; background: rgba(45, 49, 61, 0.5); border-radius: 6px 0 0 6px; text-align: center; color: #f4dfad; border-right: 1px solid rgba(0, 0, 0, 0.17); font-family: effrasemi; cursor: pointer; height: 100%; box-shadow: 1px 0 #ffffff03; }
.mes-com-label span { display: block; line-height: 0; top: 50%; position: relative; }
.mes-command-view .mes-com-label { display:block; }
.mes-command-view textarea { padding-left:76px !important;}

@media (max-width : 1280px) { .mes-com-drop { bottom:64px; } }
@media (max-width : 980px) { .mes-com-drop { bottom:58px; left: 12px; right: 12px; } }
@media (max-width : 800px) { .mes-2-input textarea[rows="2"], .mes-2-input textarea[rows="3"], .mes-2-input textarea[rows="4"], .mes-2-input textarea[rows="5"], .mes-2-input textarea[rows="6"], .mes-2-input textarea[rows="7"], .mes-2-input textarea[rows="8"], .mes-2-input textarea[rows="9"], .mes-2-input textarea[rows="10"], .mes-2-input textarea[rows="11"], .mes-2-input textarea[rows="12"], .mes-2-input textarea[rows="13"], .mes-2-input textarea[rows="14"], .mes-2-input textarea[rows="15"], .mes-2-input textarea[rows="16"], .mes-2-input textarea[rows="17"], .mes-2-input textarea[rows="18"], .mes-2-input textarea[rows="19"], .mes-2-input textarea[rows="20"], .mes-2-input textarea[rows="21"], .mes-2-input textarea[rows="22"] { padding-top: 10px; padding-bottom: 11px; line-height: 13px; } }
@media (max-width : 650px) { .mes-com-drop { bottom:55px; left: 10px; right: 10px; } .mes-com-row { padding: 10px 8px 12px 12px; font-size: 12px; } .mes-com-row div { font-size:10px; padding-top:0; } .mes-com-label { font-size:13px; } .mes-com-label { width:65px; } .mes-command-view textarea { padding-left:74px !important; } }
@media (max-width : 420px) { .mes-com-label { width:62px; } .mes-command-view textarea { padding-left:70px !important; } }

/*-- Message Bubbles --*/
.mes-convo { text-align: center; padding: 5px; margin:5px 0 68px; overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 5; overflow-x: hidden; }

.mes-convo-date { position: relative; top: 0px; left: 50%; transform: translateX(-50%); font-size: 11px; margin: 18px 0; text-transform: uppercase; letter-spacing: 1px; color: rgba(200, 200, 220, 0.7); display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.3s ease-in-out; }
.mes-convo-date::before, .mes-convo-date::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(50, 55, 70, 0), rgba(200, 200, 220, 0.5), rgba(50, 55, 70, 0)); }
.mes-convo-date::after { position: relative; }
.mes-convo-date::after::before { content: "✦"; position: absolute; left: -10px; top: -3px; font-size: 12px; color: rgba(255, 215, 250, 0.5); animation: twinkle 1.5s infinite alternate; }
.mes-convo-date::after::after { content: "✧"; position: absolute; right: -10px; top: 3px; font-size: 10px; color: rgba(255, 235, 255, 0.4); animation: twinkle 2s infinite alternate; }
@keyframes twinkle { from { opacity: 0.5; transform: scale(1); } to { opacity: 1; transform: scale(1.1); } }
.mes-convo-pan > .mes-convo-date:first-child { margin: 2px 0 9px; }

.mes-bubble { text-align: left; margin: 5px 10px 15px; position: relative; font-size: 14px; width: 100%; float:left; transition: transform 0.2s ease-in-out; }
.mes-bubble.slide-left { transform: translateX(-100%);}
.mes-bubble.slide-right { transform: translateX(100%);}
.mes-bubble-1st-img { width: 100%; border-radius: 0 5px 5px 5px; padding-bottom: 7px; margin-top: 3px; }
.mes-bubble-text { font-size: 13.4px; line-height: 19px; padding: 10px 12px 12px; border-radius: 0 6px 6px 6px; max-width: 70%; display: block; clear: both; min-height: 36px; float: left; position: relative; word-break: break-word; letter-spacing: .25px; background: rgba(10, 10, 17, 0.62); backdrop-filter: blur(10px); margin-left: 47px; }
.mes-bubble-audio { padding: 10px 12px; border-radius: 0 6px 6px 6px; max-width: 70%; display: block; clear: both; min-height:36px; float:left; position:relative; word-break: break-word; } /* audio play directly in chat */
.mes-bubble-story { font-style: italic !important; }
.mes-bubble-data { font-size: 11px; padding: 3px 0; margin-left: 47px; padding-right:20px; float:left; clear: both; cursor:pointer; }
.mes-bubble-dot { width: 2px; height: 2px; display: inline-block; background: #eee; position: relative; top: -3px; margin: 0 5px 0 5px; border-radius: 100%; }
.mes-bubble-edit { padding: 15px 12px 10px; margin: -15px -12px -10px; display: inline-block; cursor:pointer; }
.mes-bubble-right { float: right; }
.mes-bubble-right .mes-bubble-text { border-radius: 6px 0 6px 6px; float: right; text-align: left; backdrop-filter: blur(10px); background: rgba(42, 65, 117, 0.47); margin-right: 47px; margin-left:0; }
.mes-bubble-right .mes-bubble-audio { border-radius: 6px 0 6px 6px; float: right; text-align: left; }
.mes-bubble-right .mes-bubble-data { text-align: right; float:right; padding-left:20px; padding-right:0; margin-right: 47px; }
.mes-bubble-text-right-section {display: flex; float: right; justify-content: flex-end;}

.mes-bubble-voice-play { clear: both; float: left; cursor: pointer; height: 20px; display: block; line-height: 13px; margin-top: 5px; font-size: 11px; color: #2f3546; margin-left:-6px; padding:0 14px 0 6px; transition:.27s; }
.mes-bubble-voice-play:hover { color: #414757; }

.mes-wave { display: flex; justify-content: space-between; align-items: center; width: 14px; height: 4px; margin-top: 3px; float: left; }
.mes-wave span { display: block; width: 2px; height: 100%; background: #4caf50; animation: wave 1.2s infinite ease-in-out; border-radius: 2px; background: #af924c; }
.mes-wave span:nth-child(1) { animation-delay: -1s; }.mes-wave span:nth-child(2) { animation-delay: -0.8s; }.mes-wave span:nth-child(3) { animation-delay: -0.6s; }.mes-wave span:nth-child(4) { animation-delay: -0.4s; }.mes-wave span:nth-child(5) { animation-delay: -0.2s; } @keyframes wave { 0%, 100% { height: 20%; } 50% { height: 100%; } }

.mes-wave { display: flex; justify-content: space-between; align-items: center; width: 14px; height: 4px; margin-top: 3px; float: left; }
.mes-wave span { display: block; width: 2px; height: 100%; background: #4caf50; animation: wave 1.2s infinite ease-in-out; border-radius: 2px; background: #af924c; }
.mes-wave span:nth-child(1) { animation-delay: -1s; }.mes-wave span:nth-child(2) { animation-delay: -0.8s; }.mes-wave span:nth-child(3) { animation-delay: -0.6s; }.mes-wave span:nth-child(4) { animation-delay: -0.4s; }.mes-wave span:nth-child(5) { animation-delay: -0.2s; } @keyframes wave { 0%, 100% { height: 20%; } 50% { height: 100%; } }

.mes-bubble-redo { position: absolute; padding-left: 112px; bottom: -21px; left: 9px; z-index: 10; width: 100%; display: block; }
.mes-bubble-redo-icons { position: absolute; right: 0; bottom: 0; float: left; }
.mes-bubble-redo i { float: left; text-align: center; color: #8c8ea3; font-size: 13px; cursor: pointer; width: 23px; height: 23px; line-height: 23px; transition: .27s; }
.mes-bubble-redo i:hover {  }
.mes-bubble-text-short .mes-bubble-redo { left: 75px; }
.mes-bubble-text-short .mes-bubble-redo-icons { left: 0; right: auto; }
.mes-bubble-textarea-show { width:100% !important; }
.mes-bubble-textarea-show .mes-bubble-textarea { display:block; }
.mes-bubble-textarea textarea { background: rgba(51, 61, 79, 0.3); padding: 6px 11px 8px; font-size: 13px; max-height: 204px; min-height: 116px; border-radius: 0 5px 5px; width: 100%; max-width: 100%; color-scheme: auto; min-width: 100%; line-height: 16px; letter-spacing: .25px; }
.mes-bubble-textarea-btn { float: right; padding: 3px 9px; font-size: 11px; padding-left: 18px; margin: -2px -8px -7px 8px; cursor: pointer; transition:.27s; }
.mes-bubble-textarea-btn:hover { color: #ebd4bc; }
.mes-bubble-right .mes-bubble-textarea textarea { background: rgb(0 0 0 / 25%); }
.mes-bubble-right .mes-bubble-textarea-btn { padding: 3px 9px 3px 9px; padding-left: 18px; margin-right: -9px; }
.mes-bubble-photo img { border-radius:0 4px 4px 4px; }

.bubble-dialogue { }
.bubble-narration { font-style:italic;}
.bubble-thought { font-style: italic; opacity: 0.8; padding-top: 10px; padding-bottom: 10px;}
.bubble-action { font-style:effrasemi; }
.bubble-action, .bubble-dialogue, .bubble-thought {
  display: block;
}
.bubble-whisper { font-style: italic; opacity: 0.7; }
.bubble-shout  { text-transform: uppercase; letter-spacing:1px; }
.bubble-system { padding-top: 10px; padding-bottom: 10px; border-radius: 5px; font-size: 0.9em; }
.bubble-code { font-family: "Courier New", monospace; background: #1e1e1e; color: #00ff99; padding: 5px 8px; border-radius: 4px; font-size: 0.9em; white-space: pre-wrap; }
.bubble-italic { font-style:italic; }
.bubble-bold { font-family:effrasemi; }
.bubble-italic-bold { font-style-italic; font-family:effrasemi; }
.bubble-strike { text-decoration-line: line-through; }

.mes-bubble-user-avatar { 
    text-align: right;
    padding-right: 10px;
 }
.mes-bubble-avatar-user-img{
    width: 40px;
    height: 40px;
    border-radius: 3px;
}
.mes-bubble-avatar { position: absolute; left: 0; float: none; width: auto; }
.mes-bubble-avatar img { border-radius: 4px; width: 40px; height: 40px; float: left; cursor: pointer; }
.mes-bubble-avatar-r { left: auto; right:0; }
.mes-bubble-avatar-r {
    left: auto !important;
    right: -52px !important; /* Move to the right side */
    float: right;
}
.mes-strict { padding: 16px; text-align: center; background: rgb(255 255 255 / 4%); border-radius: 0 5px 5px; margin: 2px -1px 1px; }
.mes-strict i { font-size: 30px; color: #fdaec7; margin: -1px 0 -1px; display: block; }
.mes-strict-text { padding: 6px 0 0; font-style: italic; }
.mes-strict-with-message { margin: 6px 0 2px; margin:0; }
.mes-bubble-drop { position: absolute; background: #513f57; background: #4d3b53; border-radius: 0 6px 6px 6px; margin-top: -11px; transition: .27s; z-index: 5; text-align:left; }
.mes-bubble-drop div { padding: 5px 10px; font-size: 12px; }
.mes-bubble-drop div:hover { color: #fff; cursor:pointer; }
.mes-bubble-drop div:first-of-type { padding-top:9px; }
.mes-bubble-drop div:last-of-type { padding-bottom:10px; }
.mes-bubble-drop-audio { opacity: .33; transform: scale(.75); transform-origin: top left; position: relative;  float: left; max-width: 158px; margin-bottom: -3px; }
.mes-bubble-drop-audio audio { width:calc(100% * 1.35); }
.mes-bubble-right .mes-bubble-drop { right:0; border-radius: 6px 0 6px 6px; }
.mes-bubble-big-top-img { max-width: 235px; padding: 4px; background: rgb(0 0 0 / 20%); border-radius: 6px; margin-bottom: -1px; display: block; clear: both; cursor:pointer; } /* Not Used */
.mes-bubble-big-top-img img { width: 100%; border-radius: 4px; }
.mes-bubble-error .mes-bubble-text { border: 1px solid #952323; background: rgb(10 10 17 / 55%); backdrop-filter: blur(10px); }
.mes-bubble-error .mes-bubble-text-words { font-style: italic; color: #ff5656; }
.mes-bubble-error-options { margin: auto; border-top: 1px solid rgb(0 0 0 / 45%); margin-top: 6px; box-shadow: 0 1px rgb(255 255 255 / 1%); font-size: 12px; }
.mes-bubble-error-options span:hover { color: #7f97dd; cursor:pointer; transition: .27s; }
.mes-bubble-error-l { padding: 5px 7px 4px 0; float: left; } .mes-bubble-error-r { float: right; padding: 5px 0 4px 7px; }
.mes-file-upload .mes-bubble-text { border: 1px solid #5287b1; border-radius: 6px 0 6px 6px; background: #0a1012; float: right; text-align: left; padding: 10px 12px; font-size: 14px; max-width: 70%; font-family: effra; }
.mes-docu .mes-bubble-text { padding: 5px 5px; }
.mes-docu img { width: 40px; float: left; border-radius: 5px; }
.mes-docu-txt { display: block; padding: 11px 9px; color: #adadad; }
.mes-color-title { font-style: italic; color: #6cb9dd; }
.mes-color-top-words { font-size: 13px; padding: 3px 0; color: #abbfcf; }
.mes-color-options { margin: auto; border-top: 1px solid rgb(0 0 0 / 45%); margin-top: 6px; box-shadow: 0 1px rgb(255 255 255 / 1%); font-size: 12px; color: #e3e3e3; }
.mes-color-l { padding: 5px 7px 4px 0; float: left; }
.mes-color-r { float: right; padding: 5px 0 4px 7px; }
.mes-color-options span:hover, .mes-color-options a:hover { color: #7f97dd; cursor: pointer; transition: .27s; text-decoration: none; }

.mes-spin { display: block; position: absolute; top: 40%; line-height: 0; text-align: center; left: 0; right: 0; z-index:10; }
.mes-spin-blur { -webkit-backdrop-filter: blur(5px);  backdrop-filter: blur(1px); z-index: 5; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.mes .bouncy-wrap { position: relative; top: 1px; }
.mes-convo-load { float: left; width: 100%; padding: 5px 0 13px; }
.mes-convo-load .spinner { width: 32px; }

.mes-convo-area-bio { padding: 13px 12px 20px 12px; float: left; font-size: 12px; line-height: 16px; width: 100%; margin-top: 1px; text-align: left; position: relative; border-top: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px rgba(255, 255, 255, 0.01) inset; letter-spacing: .1px; color: #686f82; font-style: italic; color: #53596a; }

/* .mes-3-tags,
.mes-3-action-by,
.mes-3-text,
.mes-3-greeting {
    margin-bottom: 18px;
} */

.mes-3 { width: 20%; position: absolute; right: 0; overflow-y: auto; top: 0px; transition:all 300ms ease 0s; }
.mes-3-body { position: relative; overflow-y: auto; height: calc(100vh - 61px); height: calc(100dvh - 61px); overflow-x: hidden; scrollbar-width: none; box-shadow: 1px 0px rgb(255 255 255 / 1%) inset; background: #20242d; }
.mes-3-img { position: relative; width: 100%; height: 0; padding-top: 100%; }
.mes-3-img img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-position: top center; }
.avatar-3d { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; object-position: top center;}
.mes-3-img-arrow { position: absolute; top: 46%; left: 11px; width: 34px; height: 34px; text-align: center; border: 1px solid rgb(238 238 238 / 85%); border-radius: 100%; line-height: 33px; font-size: 20px; overflow: hidden; text-indent: -2px; cursor: pointer; }
.mes-3-img-arrow-r { right: 11px; left: auto; text-indent: 0; }
.mes-3-img-arrow span { background: #fff; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: .2; }
.mes-3-name-descr-wrap { padding:12px 14px 18px; float:left; width:100%; position:relative; min-height: 100px; }
.mes-3-name { font-family: effrasemi; font-size: 16px; padding: 1px 0 4px; position:relative; z-index:5; }
.mes-3-descr { font-size: 13px; line-height: 18px; letter-spacing: .15px; margin-top:1px; position:relative; z-index:5; margin-top: 10px; max-height: 180px; overflow-y: auto; padding-right: 6px;}
.mes-3-tags { border-top: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 1px rgb(255 255 255 / 1%), 0 1px rgb(255 255 255 / 1.5%) inset; padding: 13px 14px 17px; float: left; border-bottom: 1px solid rgba(0, 0, 0, 0.3); clear: both; width: 100%; position:relative; min-height: 105px; }
.mes-3-tags-title { font-family: effrasemi; font-size: 14px; padding-bottom: 10px; z-index: 5; position: relative; }
.mes-3-tag { border: 1px solid; border-radius: 4px; font-size: 12px; float: left; padding: 4px 7px; margin: 0px 4px 4px 0; color: #e383a4; font-family: effrasemi; cursor: pointer; letter-spacing: 0.25px; border: 0; color: #eee; background: #7d2f3e; background: linear-gradient(135deg, rgba(137, 53, 71, 0.8) 10%, rgba(157, 68, 95, 0.8) 40%, rgba(137, 53, 71, 0.8) 90%); z-index: 5; position: relative; }
.mes-3-tag:hover { text-decoration:none; }
.mes-3-text { clear: both; border-bottom: 1px solid rgba(0, 0, 0, 0.25); box-shadow: 0 1px rgb(255 255 255 / 1%); padding: 15px 14px 19px; position:relative; min-height: 105px; }
.mes-3-text-title { font-family: effrasemi; padding-bottom:2px; font-size: 14px; position:relative; z-index:5; margin-bottom: 10px;}
.mes-3-text span { font-size: 13px; display: block; line-height: 18px; letter-spacing: .15px; position:relative; z-index:5; }
.mes-3-text:last-of-type { border-bottom:0; }
.call-chat-view-character { display:none; }
.mes-3-btn-menu { float: left; width: 100%; overflow: hidden; z-index: 5; position: relative; letter-spacing: 0.5px; float: left; width: 100%; border-top: 1px solid rgba(8, 10, 14, 0.21); border-bottom: 1px solid rgba(8, 10, 14, 0.19); }
.mes-3-btn { background: rgb(37, 41, 51);  font-size: 11px; padding: 5px 8px 6px;color: #d9ddee; float:left; width: 50%; box-shadow: 0px 1px rgba(255, 255, 255, 1%) inset; position:relative; cursor:pointer; transition:.27s; }
.mes-3-btn:hover { background: rgba(44, 48, 60, 0.58); box-shadow: none; color: #dfe2f2; }
.mes-3-btn-1, .mes-3-btn-3 { border-right: 1px solid rgba(8, 10, 14, 0.24); }
.mes-3-btn-1, .mes-3-btn-2 { border-bottom: 1px solid rgba(8, 10, 14, 0.24); }
.mes-3-btn-menu .mes-wave { float: right; top: 2px; position: relative; }
.mes-3-sakura { background-image: url('/public/images/chat-sakura.png'); background-size: 100% auto; background-position: top center; max-width: 35px; width: 15%; height: 100%; position: absolute; background-repeat: no-repeat; filter: grayscale(1); opacity: .2; top: 6px; z-index: 0; right: 1px; display:none; }
.mes-3-name-descr-wrap .mes-3-sakura { max-width:35px; top:5px; display:block; }
.mes-3-name-descr-wrap .mes-3-water { display:none; }
.mes-3-water { background-image: url('/public/images/chat-water.png'); background-size: 100% 100%; background-position: top center; width: 100%; position: absolute; background-repeat: no-repeat; filter: grayscale(1); opacity: 0.0255; z-index: 0; left: 0; top: 8px; bottom: 0; }
.mes-3-greek { background-image: url('/public/images/chat-greek.png'); background-size: contain; background-repeat: repeat-x; background-position: bottom center; width: 100%; height: 100%; position: absolute; opacity: 1.3%; z-index: 0; right: 0px; left: 0; top: 0; bottom: 0; }

.mes-3-actions { float: left; width: 100%; }
.mes-3-action-by { border-bottom: 1px solid rgba(0, 0, 0, 0.25); display: block; box-shadow: 0 1px rgb(255 255 255 / 1%), 1px 1px rgb(255 255 255 / 1%) inset; padding: 6px 10px 7px; font-size: 12px; color: #99a3c3; transition: .27s; background: #1c1f28; background: #1d212b; position:relative; }
.mes-3-action-by:hover { color: #94c5ec; cursor:pointer; text-decoration:none; }
.mes-3-action-by-date { float: right; color: #626771bf;  color: #99a3c34d; }
.mes-3-action-i { cursor:pointer; float:left; width:20%; font-size:12px; padding: 16px 13px; text-align:center; box-shadow: 1px 0 rgb(255 255 255 / 1%); border-right: 1px solid rgba(0, 0, 0, 0.25); transition:.27s; height:44px;}
.mes-3-action-i-comment { font-size:10px; }
.mes-3-action-i-up:hover, .mes-like { color: #5ead61 !important; }
.mes-3-action-i-down:hover, .mes-dislike { color: #d94d43 !important; }
.mes-3-action-i-fav:hover, .mes-favorited { color: #569ed7 !important; }
.mes-3-action-i-comment:hover, .mes-3-action-i-chats:hover  { cursor:auto; }
.mes-3-action-i:last-of-type { border:0; box-shadow:none; }
.mes-3-action-i-up.drop-i-selected { color: #5ead61; }
.mes-3-action-i-down.drop-i-selected { color: #d94d43; }
.mes-3-action-i-fav.drop-i-selected { color: #db5c7a; color: #569ed7; }
.mes-3-action-counter-wrap { float:left;width:100%;position:relative; }
.mes-3-action-counter { float: left; font-size: 12px; padding: 3px 4px 4px; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.25); border-top: 1px solid rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25); display: block; box-shadow: 0 1px rgba(255, 255, 255, .6%), 1px 1px rgba(255, 255, 255, 0.01) inset; width: 20%; color: #bdac9c; font-family: effrasemi; background: #1d212b; position:relative; z-index:5; }
.mes-3-action-counter-1 { width:40%; }
.mes-3-action-i:last-of-type  { border-right:0; }
.mes-3-action-counter i { font-size: 13px; top: 1px; }

.mes-profile-viewing .mes-2 { width:100%; border:0; } /*-- SHOW --*/
.mes-profile-viewing .mes-2-top { background: #191b22; }
.mes-profile-viewing .mes-3 { width: 100%; z-index: 10; background: #15171e; right:0;   position: absolute; overflow-y: scroll; overflow-x: hidden; }
.mes-profile-viewing .mes-3-body { padding-top: 66px;   overflow-x: hidden; height: 100vh; height: calc(100dvh - -4px); overflow-y: scroll; }

.mes-hide { transition:300s; }
.mes-hide .head-all { display:none; }
.mes-hide .mes-1-row-scroll { height: calc(100vh - 82px); height: calc(100dvh - 82px); }
.mes-hide .mes-2-chat { height: calc(100vh - 83px); height: calc(100dvh - 83px); }
.mes-hide .mes-3-body { height: calc(100vh - 0px); height: calc(100dvh - 0px); }
.mes-hide .mes-2-drop-option-hide-1 { display:none; }
.mes-hide .mes-2-drop-option-hide-2 { display:inline; }
@media (min-width : 981px) { .mes-call-hide-inbox  { display:block !important; }}
@media (min-width : 651px) {
.mes-call-hide-profile { display:block !important; }
.mes-inbox-hide .mes-1 { display:none; }
.mes-inbox-hide .mes-2 { width:80%; }
.mes-inbox-hide .mes-3 { width:20%; }
.mes-profile-hide .mes-1 { width:20%; }
.mes-profile-hide .mes-2 { width:80%; }
.mes-profile-hide .mes-3 { display:none; }
.mes-2-full-screen .mes-1, .mes-2-full-screen .mes-3 { display:none; }
.mes-2-full-screen .mes-2 { width:100%; }
}

@media (min-width : 1279px) { .mes-1, .mes-3 { width:18%; } .mes-2 { width:64%; } }
@media (min-width : 981px) {
.mes-1-row { background: rgb(37, 41, 51); background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(188, 190, 193, 0.05), rgba(103, 112, 128, 0.15)); padding: 3px 0; border-bottom: 1px solid rgba(8, 10, 14, 0.24); }
.mes-1-row:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(188, 190, 193, 0.07), rgba(103, 112, 128, 0.18));  box-shadow: none; }
.mes-1-row-scroll .mes-1-row:nth-last-child(2) { border-bottom: 1px solid rgba(8, 10, 14, 0.42); box-shadow: none; }
.mes-1-row-r { letter-spacing: 0.5px; color: #d9ddee; padding: 18px 18px 0 66px; font-size: 12px; }
.mes-1-row-r .mes-1-del { color: #191b28; }
.mes-1-row-r .mes-1-del:hover { color: #bf6767; }
.mes-1-row-descr { margin: 0 0 0; font-family: effra; text-transform: none; color: #9fa8bd; padding-right: 20px; font-style: italic; letter-spacing: .5px; }
.mes-1-row-date { font-style: italic; color: #404755; text-transform: none; }
.mes-1-search input { border-bottom-color: rgba(12, 13, 18, 0.32); }
.mes-empty .mes-1-search input { border-bottom-color: rgba(12, 13, 18, 0.52); }
.mes-1-scroll-bottom { background: #1a1e28;box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.06) inset;  }
}
@media (min-width : 981px) and (max-width : 1600px) { .mes-1-row-r .mes-1-del { padding:7px 8px 7px 10px; } .mes-1-img img { width: 48px; height: 48px; } .mes-1-row-r { padding:16px 18px 0 62px; font-size:12px; } .mes-1-row-descr  { margin-top:-1px; padding-right:10px; } .mes-1-row-date { font-size:8px; right:8px; } }
@media (max-width : 1280px) {
.mes-hide .mes-1-row-scroll { height: calc(100vh - 74px); height: calc(100dvh - 74px);  }
.mes-hide .mes-2-chat { height: calc(100vh - 75px); height: calc(100dvh - 75px); }

.mes-1-top { padding: 10px 9px 11px; font-size: 15px; height: 37px; }
.mes-1-search input { font-size:13px; padding: 11px 33px 11px 10px; height: 37px; }
.mes-1-search i { top: 13px; font-size: 12px; right: 9px; }
.mes-1-row-scroll {  height: calc(100vh - 139px); height: calc(100dvh - 139px); }

.mes-2-chat { height: calc(100vh - 140px); height: calc(100dvh - 140px);  }
.mes-2-top { height: 74px; padding: 13px 13px; } .mes-2-img { width: 48px; height: 48px; } .mes-2-img img { height: 48px; } .mes-2-img-r { top: 4px; } .mes-2-name { font-size: 16px; } .mes-2-actions { font-size: 12px; } .mes-2-menu .mes-2-menu-extras { font-size: 24px; padding: 23px 20px 21px; } .mes-2-drop {  top: 65px; right: 12px; }

.mes-convo { margin-bottom:64px; }
.mes-convo-date { font-size:11px; margin: 15px 0; }
.mes-bubble-text {  min-height: 32px; padding: 9px 12px; }
.mes-bubble-data { font-size: 11px; }
.mes .bouncy { height:4px; width:4px; margin-right: 2px; margin-top: 0; }

.mes-2-textarea-pad { padding-right: 48px; }
.mes-2-input textarea { font-size: 14px; line-height: 12px; height: 42px; padding: 14px 11px 0px 11px; }
.mes-2-send { width: 40px; height: 36px; font-size: 16px; line-height: 25px; }
.mes-2-send-voice .pulse-voice { width: 50px; height: 46px; }
.mes-2-send-loading .spinner { top: -1px; width:28px; }

.mes-3-img-arrow { width: 32px; height: 32px; line-height: 31px; font-size: 18px; } .mes-3-name { font-size:16px; } .mes-3-descr { font-size: 13px; line-height: 16px; } .mes-3-tags-title { font-size: 13px; } .mes-3-tag {  font-size: 11px; } .mes-3-text-title { font-size: 14px; } .mes-3-text span { font-size: 13px; line-height: 16px; } .mes-3-action-by { font-size: 11px; } .mes-3-action-i { font-size: 11px; padding: 15px 13px 14px; height: 42px; } .mes-3-action-i-comment { font-size: 9px; } .mes-3-action-counter { font-size:11px; } .mes-3-action-counter i { font-size:11px; }
}
@media (max-width : 1100px) { .mes-3-action-i { font-size: 10px; padding: 13px 13px 13px; height: 39px; } .mes-3-action-i-comment { font-size:9px; } .mes-3-action-counter { font-size: 11px; padding: 2px 4px 3px; } }

@media (max-width : 1060px) {
.mes-3-img-arrow { width: 28px; height: 28px; line-height: 27px; font-size: 17px; left: 9px; }
.mes-3-img-arrow-r { right: 9px; left:auto; }
}

@media (max-width : 980px) {
.mes-1 { display:none; }
.mes-1-top { padding: 12px 9px 11px; font-size: 14px; height: 39px; }
.mes-1-top-r { font-size:10px; top: 8px; letter-spacing: .25px; }
.mes-chats-viewing .mes-2, .mes-chats-viewing .mes-3 { display:none; }
.mes-chats-viewing { margin-top: 0px !important; }
.mes-chats-viewing .mes-1 { width: 100%; background: #15171e; z-index: 5; display:block !important; }
.mes-chats-viewing .mes-2, .mes-chats-viewing .mes-3 { z-index:0; }
.mes-chats-viewing { z-index:10 !important; }
.mes-hide .mes-1-row-scroll { height: calc(100vh - 76px); height: calc(100dvh - 76px); }
.mes-hide .mes-2-chat { height: calc(100vh - 67px); height: calc(100dvh - 67px); }
.mes-1-row-scroll:last-of-type .mes-1-row { border-bottom: 1px solid rgb(8 10 14 / 22%); }
.mes-1-row-r .mes-1-del { padding: 6px 7px 10px 11px; font-size:9px;  }
.mes-1-row-r { font-family:effrasemi; padding-top:16px; padding: 17px 18px 0 70px; }
.mes-1-row-scroll { height: calc(100vh - 116px); height: calc(100dvh - 116px); background: #1c202b; }
.mes-1-top { padding: 10px 9px 10px; font-size: 13px; height: 36px; line-height: 14px; }
.mes-1-top-d { display:none; }
.mes-1-top .mes-1-top-m { display:block; }
.mes-1-search input { height:35px; border: 1px solid rgba(12, 13, 18, 0.48); }
.mes-1-row-name { padding-right:0; }
.mes-1-row-descr { margin-top:-1px; padding-right:0; }
.mes-1-row-date { color:#999387; text-transform:none; }
.mes-1-img img { width: 54px; height: 54px; }

.mes-2 { width: 75%; border-left:0; }
.mes-3 { width: 25%; }
.mes-2-chat { height: calc(100vh - 132px); height: calc(100dvh - 132px); }
.mes-2-img { width: 44px; height: 44px; }
.mes-2-img img { height: 44px; }
.mes-2-top { padding: 10px 10px 10px 23px;  height: 66px; }
.mes-back { display: block !important; }
.mes-back { position: absolute; top: 24px; left: 3px; font-size: 14px; padding: 25px 35px 25px 10px; margin: -25px -15px -25px -5px; z-index: 10; }
.mes-2-img-r { top: 3px; }
.mes-2-name { font-size: 15px; }
.mes-2-actions { top: 3px; }
.mes-2-menu .mes-2-menu-extras { font-size: 20px; padding: 21px 19px; }
.mes-2-drop { top: 56px; right: 8px; }
.mes-bubble-error-options { font-size:11px; }

.mes-2-input { bottom: 13px; }
.mes-2-textarea { padding: 0 12px 0 12px; }
.mes-2-textarea-pad { padding-right: 42px; }
.mes-2-input textarea { font-size: 14px; line-height: 14px; height: 38px; padding: 11px 11px 5px 11px; min-height: auto; }
.mes-2-send { width: 36px; height: 34px; font-size: 15px; line-height: 24px; right: 12px; margin: 3px; }
.mes-2-send-voice .pulse-voice { width: 46px; height: 44px; }
.mes-2-send-loading  .spinner { width: 25px;  border-width: 1px;  top: -1px; }
}

#mes-mobile-inbox-btn {
  display: none;
}
@media (max-width: 980px) {
  #mes-mobile-inbox-btn {
    display: block;
    position: fixed;
    left: 8px;          /* <-- left edge, not right */
    bottom: 96px;        /* <-- a bit higher to clear keyboard/sendbar */
    width: 52px;
    height: 52px;
    background: #262d3d;
    border: none;
    border-radius: 50%;
    box-shadow: 0 3px 18px rgba(0,0,0,0.18);
    color: #fff;
    cursor: pointer;
    z-index: 100;
    padding: 0;
    transition: background 0.18s, box-shadow 0.18s;
  }
  #mes-mobile-inbox-btn:active,
  #mes-mobile-inbox-btn:focus {
    background: #1c2331;
    box-shadow: 0 1px 6px rgba(0,0,0,0.20);
  }
  #mes-mobile-inbox-btn svg {
    width: 28px;
    height: 28px;
    margin-top: 5px;
    margin-left: 2px;
    color: #fff;
  }
}



@media (min-width : 740px) and (max-width : 900px) {
.mes-3-img-arrow { width: 26px; height: 26px; line-height: 24px; font-size: 15px; left: 8px; } .mes-3-img-arrow-r { right: 8px; left: auto; }
.mes-3-name-descr-wrap { padding:12px 12px 18px; } .mes-3-name { font-size: 14px; padding: 0 0 2px; } .mes-3-descr { font-size: 11px; line-height:14px; } .mes-3-text {  padding: 13px 12px 17px; } .mes-3-text-title { font-size: 12px; } .mes-3-text span { font-size: 11px; line-height:14px; } .mes-3-tags-title { font-size: 12px; } .mes-3-tags {  padding: 12px 12px 13px; } .mes-3-tag { font-size: 10px; margin: 0px 4px 4px 0; padding: 3px 4px 3px; }
.mes-3-btn {  padding: 5px 7px 6px; font-size: 10px; }
}
@media (min-width : 740px) and (max-width : 800px) { .mes-3-btn { font-size: 9px; } }
@media (max-width : 800px) {
.mes { margin-top:-45px; z-index:2500; }
.mes-2-chat { height: calc(100vh - 67px); height: calc(100dvh - 67px); }
.mes-convo { margin-bottom:59px; margin-top:0; }
.mes-2-actions-dot { background: rgb(6 6 8 / 80%); box-shadow: 1px 0 rgb(255 255 255 / 2%); }
.mes-2-action-drop { border-radius: 0 6px 6px 6px; }
.mes-2-action-span { font-size: 12px; }
.mes-2-drop { width:158px; }
.mes-2-drop-option { font-size: 12px; padding: 8px 11px 7px; }
.mes-2-action-drop-info-descr  { font-size:12px; }
.mes-call-hide-header { display:none; }
.mes-2-creator { padding: 5px 8px 6px; font-size: 11px;  }
.mes-2-drop-search input { padding: 6px 24px 8px 8px; }
.mes-2-drop-search i { padding: 7px 8px 8px; }
.mes-bubble-data { font-size: 10px; padding-top:2px; padding-bottom:2px; }
.mes-bubble-textarea-btn { font-size: 10px; }
.mes-convo-pan > .mes-convo-date:first-child { margin: 8px 0 8px; }
.mes-bubble-text-short .mes-bubble-redo { left: 68px; }
.mes-bubble-redo { bottom:-20px; }

.mes-3-body { height: calc(100vh - -4px); height: calc(100dvh - -4px); }
.mes-3-action-i { padding: 12px 13px 13px; height: 36px; font-size: 9px; } .mes-3-action-i-comment { font-size: 8px; } .mes-3-action-counter { font-size: 10px; padding: 1px 4px 3px; }
}
@media (max-width : 740px) {
.mes-2 { width: 100%; border:0; } .call-chat-view-character { display:block; } .mes-convo { padding: 5px 1px; margin-bottom: 56px; }  .mes-2-input { bottom: 10px; } .mes-2-textarea { padding: 0 10px 0 10px; } .mes-2-input textarea { font-size: 13px; line-height: 16px; } .mes-2-send { right: 10px; }

.mes-3 {
  display: block;
  position: static;
  right: 0;
  width: 100%;
  z-index: 1;
  background: #191c24;
  border-top: 1px solid #21242c;
  box-shadow: 0 -1px 8px rgba(0,0,0,0.11);
}
.mes-3-body { padding-top: 66px; } .mes-3-action-i { padding: 16px 13px 16px; height: 44px; font-size: 12px; } .mes-3-action-i-comment { font-size: 10px; } .mes-3-action-counter { font-size: 11px; padding: 3px 4px 4px; }

.mes-prelude .mes-3 { position: relative;overflow: visible;clear: both; right: 0; }
.mes-prelude .mes-3-body { padding: 0;overflow: visible;height: 100%; }
.mes-prelude .mes-2-input { background: #191c24;padding: 8px;bottom: 0;border-top: 1px solid #00000030; }
.mes-prelude .mes-2-textarea { padding: 0; }
.mes-prelude .mes-2-send { top: 8px;right: 8px; }
.mes-prelude-fix .mes-3, .mes-prelude-fix .mes-2-send { transition:none; }
}
@media (max-width : 480px) {
.mes-1-search input { font-size: 11px; padding: 9px 33px 10px 10px; height: 36px; }
.mes-1-search i { top: 12px; font-size: 11px; }
.mes-1-search .mes-1-search-close { font-size: 8px;top: 13px; }
.mes-1-row-scroll { height: calc(100vh - 117px); height: calc(100dvh - 117px); }

.mes-2-chat { height: calc(100vh - 60px); height: calc(100dvh - 60px);  margin-top: 60px; }
.mes-2-top { padding: 7px 10px 7px 23px; height: 60px; position: fixed; }
.mes-back { top: 15px; left: 8px; font-size: 14px; padding: 31px 35px 20px 11px; margin: -25px -15px -25px -11px; }
.mes-2-menu .mes-2-menu-extras { font-size: 20px; padding: 17px 18px 18px 22px; }
.mes-2-drop { top: 52px; right: 7px; }
.mes-convo-date { font-size: 10px; margin: 13px 0; }
.mes-bubble-text {padding: 8px 10px 9px; width: auto; max-width: calc(100% - 66px); }

.mes-profile-viewing .mes-3-body { padding-top: 60px; }
.mes-3-action-i { padding: 16px 13px 16px; height: 44px; font-size: 11px; } .mes-3-action-i-comment { font-size: 9px; } .mes-3-action-counter { font-size: 10px; padding: 2px 4px 3px; }
}
@media (max-width : 420px) {
.mes-bubble-drop div { padding: 5px 9px 4px 8px; font-size: 11px; }
.mes-bubble-drop div:first-of-type { padding-top: 8px; }
.mes-bubble-drop div:last-of-type { padding-bottom: 9px; }
.mes-2-action-drop-info-descr { width: 244px; }
}
@media (max-width : 370px) { .mes-2-action-drop-info-descr { width: 202px; } }

.mes-empty { margin:0 !important; }
.mes-empty .mes-1 { width: 25% !important; }
.mes-empty .mes-2 { width: 75% !important; border-right: 0; }
.mes-empty .mes-3, .mes-empty .mes-convo, .mes-empty .mes-2-img img, .mes-empty .mes-2-name { display:none !important; }
.mes-empty .mes-1, .mes-empty .mes-2-img .mes-2-img-empty, .mes-empty .mes-2-name-empty { display:block !important; }
.mes-empty .mes-1-search { box-shadow:0px 1px rgba(32, 36, 49, 0.41);z-index: 5; }
.mes-empty .mes-1-search-input { border-bottom-color: rgba(12, 13, 18, 0.40); }
.mes-empty .mes-2-empty-text { display:block; text-align: center; top: 42%; position: relative; line-height: 0; font-family:chalet; font-size: 21px; color: #f18daf; color:#f1c388; z-index:5; }
.mes-empty .mes-1-empty-text { text-align: center; line-height: 0; font-family: chalet; font-size: 21px; color: #f188a1; display: block; position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); z-index: 100; width: 100%; }
.mes-empty .mes-1-empty-text i { display: block; top: -50px; font-size: 56px; }
.mes-empty .mes-1-empty-text span { color: #eee; }
.mes-empty .mes-1-empty-text div { padding-top: 21px; font-family: effra; font-size: 13px; color: #c3c3c3; font-style: italic; }
@media (max-width : 980px) { .mes-empty .mes-1 { width: 100% !important; } .mes-empty .mes-2 { display:none !important; } .mes-empty .mes-1-empty-text { display:block; font-family: effrasemi; font-size: 19px;top:50%;margin-top: 40px; } .mes-empty .mes-1-empty-text div {display:block; } .mes-empty .mes-1-search input { border-bottom-color: rgba(12, 13, 18, 0.40); } }
@media (max-width : 540px) { .mes-empty .mes-1-empty-text { font-size: 17px; } .mes-empty .mes-1-empty-text i { top: -46px; font-size: 54px; } .mes-empty .mes-1-empty-text div { font-size:12px; padding-top: 20px; } }
@media (max-height : 420px) { .mes-empty .mes-1-empty-text { margin-top: 58px; } }
@media (min-width : 981px) and (max-height : 620px) { .mes-empty .mes-1-empty-text { margin-top: 20px; } }
@media (min-width : 981px) and (max-height : 510px) { .mes-empty .mes-1-empty-text { margin-top: 32px; } }

.mes-corner-img { position: absolute; top: 0; right: 0; z-index: 10000; box-shadow: -2px 2px 3px #0000001a; border: 4px solid #333846; border-top-width: 4px; border-top-style: solid; border-top-color: rgb(51, 56, 70); border-right-width: 4px; border-right-style: solid; border-right-color: rgb(51, 56, 70); border-top: 0; border-right: 0; width: 58%; max-width: 400px; border-radius: 0 0 0 7px; cursor: pointer; }
.mes-corner-img img { width: 100%; border-radius: 0px 0 0 7px; }
@media (max-width : 1280px) { .mes-corner-img { max-width: 385px; border-radius: 0; } .mes-corner-img img { border-radius: 0; } }
@media (max-width : 1180px) { .mes-corner-img { max-width: 375px; } }
@media (max-width : 1080px) { .mes-corner-img { max-width: 365px; } }
@media (max-width : 800px) { .mes-corner-img { max-width: 350px; } }
@media (max-width : 740px) { .mes-corner-img { max-width: 335px; } }
@media (max-width : 680px) { .mes-corner-img { max-width: 325px; } }
@media (max-width : 640px) { .mes-corner-img { max-width: 315px; } }
@media (max-width : 600px) { .mes-corner-img { max-width: 280px; } }
@media (max-width : 540px) { .mes-corner-img { max-width: 260px; } }
@media (max-width : 500px) { .mes-corner-img { max-width: 250px; } }
@media (max-width : 430px) { .mes-corner-img { max-width: 225px; } }
@media (max-width : 420px) { .mes-corner-img { max-width: 215px; } }
@media (max-width : 410px) { .mes-corner-img { max-width: 238px; } }
@media (max-width : 400px) { .mes-corner-img { max-width: 100%; width:57%; } }
@media (max-width : 365px) { .mes-corner-img { width:55%; } }
@media (max-width : 350px) { .mes-corner-img { width:54%; } }
@media (max-width : 340px) { .mes-corner-img { width:53%; } }
@media (max-width : 330px) { .mes-corner-img {  width:64.2%; } }
@media (max-width : 320px) { .mes-corner-img {  width:63%; } }
@media (min-width : 1600px) { .mes-corner-img { max-width: 415px; } }
@media (min-width : 1750px) { .mes-corner-img { max-width: 465px; } }
@media (min-width : 1850px) { .mes-corner-img { max-width: 490px; } }
@media (min-width : 2000px) { .mes-corner-img { max-width: 515px; } }





/*----------- Create Character -----------*/
@-moz-document url-prefix() { .mk { scrollbar-color: #16181f #1d1f27; } .mk-2-row-textarea {  scrollbar-color: #10121a #16181f; } .mk-3 {  scrollbar-color: rgb(29 31 39 / 0%) rgb(29 31 39 / 0%); } }
.mk ::-webkit-scrollbar { width: 10px; }
.mk ::-webkit-scrollbar-track { background: none; }
.mk ::-webkit-scrollbar-thumb { background: #16181f; }
.mk ::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }
.mk-2-row-textarea ::-webkit-scrollbar { width: 7px; }
.mk-2-row-textarea ::-webkit-scrollbar-track { background: none; }
.mk-2-row-textarea ::-webkit-scrollbar-thumb { background: #0f1118; background: #10121a; }
.mk-2-row-textarea ::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }
.mk-3 ::-webkit-scrollbar { width: 0px; }
.mk-3 ::-webkit-scrollbar-track { background: none; }
.mk-3 ::-webkit-scrollbar-thumb { background: none; }

.mk { padding: 35px 0 35px; background: rgb(255 255 255 / .6%); color-scheme: dark; }
.mk input, .mk textarea { font-size:13px; }
.mk-wrap { border:1px solid rgb(8 10 14 / 73%); min-height: 575px; border-radius: 6px; box-shadow: 1px 1px rgb(255 255 255 / 2%) inset; background: rgb(29 31 39 / 92%); height: calc(100vh - 136px); max-width: 1480px; }
.mk-1 { width: 15%; float: left; position: relative; height:100%; background: #3b3f4f12; }
.mk-1-top { padding: 14px 18px 15px; font-size: 17px; font-family: effrasemi; border-bottom: 1px solid rgb(0 0 0 / 21%); box-shadow: 0 1px rgb(255 255 255 / 2%); color: #80d183; }
.mk-1-top-menu { border-bottom: 1px solid rgb(0 0 0 / 21%); box-shadow: 0 1px rgba(255, 255, 255, 1.4%); overflow: auto; margin-bottom: 5px; }
.mk-1-top-menu div { float: left; width: 50%; padding: 9px 2px; cursor: pointer; text-align: center; font-size: 12px; background: #21242d; background: #22252e; box-shadow: 1px 1px rgb(255 255 255 / 2%) inset; transition:.27s; }
.mk-1-top-menu-1 { border-right: 1px solid rgb(0 0 0 / 24%); }
.mk-1-top-menu-selected { color: #7cc5ff !important; font-family: effrasemi; }
.mk-1-row { padding: 10px 18px; font-size:14px; cursor: pointer; transition:.27s; }
.mk-1-row-selected { color: #7cc5ff !important; }
.mk-1-row-selected .mk-1-row-i { display:inline !important; }
.mk-1-row:hover, .mk-1-top-menu div:hover { color: #fdb1c4; }
.mk-1-row-i { display:none; }
.mk-1-row-i { padding-right: 1px; font-size: 13px; }
.mk-1-row-incomplete-icon { float: right; padding: 0; color: #3b404f; font-size: 14px; top: 1px; padding-right: 0 !important; right: -2px; }
.mk-1-row-incomplete-alert { color: #cb4848; }
.mk-1-row-complete-icon { color:#586473; }
.mk-1-btn { position:absolute; bottom:0;left:0;right:0;height:45px; width:100%; background: #856c48; background:#89704d; font-size:15px; text-align:center; line-height:45px; border-radius:0 0 0 6px; z-index:5; cursor:pointer; transition:.27s; }
.mk-1-btn:hover { background: #8d7450; }
.mk-1-avatar { position: absolute; bottom: 47px; padding: 9px 4px 9px 9px; left: 0; right: 0; }
.mk-1-avatar img { width: 32px; float: left; border-radius:3px; position: relative; top: 1px; }
.mk-1-avatar-r { line-height: 14px; padding-left: 6px; font-size: 13px; position: relative; top: 4px; }
.mk-1-avatar-name { white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden; }
.mk-1-avatar-sub { color: #999999; font-size: 11px; position:relative; }
.mk-1-more { padding: 15px -0px; border-top: 1px solid rgb(0 0 0 / 28%); box-shadow: 0 1px rgb(255 255 255 / 2%) inset; margin: 10px 18px 50px; color: #939393; display:block; font-size: 14px; cursor:pointer; transition:.27s; }
.mk-1-more i { padding-right: 2px; }
.mk-1-more:hover { color:#aaa; text-decoration:none; }
.mk-2 { padding: 15px 28px; width: 70%; border-left: 1px solid rgb(0 0 0 / 27%); border-right: 1px solid rgb(0 0 0 / 27%); float: left; box-shadow: 1px 0 rgb(255 255 255 / 1%), 1px 0 rgb(255 255 255 / 1%) inset; height: 100%; overflow-x: hidden; overflow-y: auto; position:relative; }

.mk-basic .mk-title { padding: 12px 0 10px; }
.mk-bar { background: #36414f; height: 8px; position: relative; clear: both; margin-bottom: 27px; border-radius: 2px; }
.mk-bar-progress { position: absolute; left: 0; top: 0; bottom: 0; background: #56c4fb; width: 25%; border-radius: 3px; }
.m-bar-red { background: #453535; } .m-bar-red .mk-bar-progress { background: #cf4343; }
.m-bar-yellow { background: #433c31; } .m-bar-yellow .mk-bar-progress { background: #e1b159; }

.mk-2-row { margin-bottom: 25px; }
.mk-2-row-label { font-family: effrasemi; font-size: 14px; padding: 0px 0 5px; float: left; width:100%; }
.mk-2-row-label a { padding: 4px 6px; margin: -4px -4px -4px; cursor:pointer; transition:.27s; float: right; position: relative; top: 1px; color: #3b404f; }
.mk-2-row-label a:hover { color: #7cc5ff !important; text-decoration:none; }
.mk-req { background: #a72d2d; color: #eee; display: inline-block; font-size: 9px; padding: 0px 3px; border-radius: 2px; font-family: effrasemi; margin-left: 5px; position: relative; top: -1px; }
.mk-2-row-input { }
.mk-2-row-input input { width: 100%; padding: 12px 12px; background: #15171e; background: #16181f; border-radius: 5px; margin-bottom:2px; }
.mk-2-row-textarea { }
.mk-2-row-textarea textarea { padding: 12px 12px; min-height: 140px; min-width: 100%; max-width: 100%; background: #15171e; background: #16181f; border-radius: 5px; }

.mk-drop-wrap { height: 39px; width: 100%; margin-bottom: 26px; font-size: 13px; padding: 1px 14px; float: left; position: relative; background: #16181f; border-radius: 5px; cursor:pointer; }
.mk-drop-wrap-span { line-height: 35px; text-align: left; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; left: 12px; right: 30px; }
.mk-drop-wrap i { float: right; right: 0px; font-size: 13px; top: 10px; line-height: 18px; transition:.27s; }
.mk-drop-wrap i:hover, .mk-drop-dropped i { color: #6dc5f2; }
.mk-drop-wrap ul { position:absolute; background:#262a35; background:#2d313d; left:0;right:0;top:39px;z-index:25; border-radius:0 0 5px 5px; overflow-y:auto; max-height: 280px; text-align:left; transition:.27s; display:none; }
.mk-drop-wrap li { padding: 0 12px; height: 40px; line-height: 41px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.mk-drop-wrap li:hover { background: #303441; background: #333745; }
.mk-drop-wrap.mk-drop-dropped { border-color: #d4d4d4; border-radius: 5px 5px 0 0; background: rgb(17 19 26 / 42%); }
.mk-drop-dropped ul { display: block; }
.mk-voices-drop-wrapped, .mk-llm-drop-wrapped-3x { margin-top:16px; }
.mk-models-voices .mk-drop-wrap, .mk-models-llm .mk-drop-wrap, .mk-models-avatar-3x .mk-drop-wrap { height:34px; font-size:13px; padding:0px 10px; margin-bottom:16px; min-width:100px; width:24%; min-width:108px; margin-right:9px; }
.mk-models-voices .mk-drop-wrap-span, .mk-models-llm .mk-drop-wrap-span, .mk-models-avatar-3x .mk-drop-wrap-span { font-size: 12px; left: 12px; line-height: 34px; }
.mk-models-voices .mk-drop-wrap i, .mk-models-llm .mk-drop-wrap i, .mk-models-avatar-3x .mk-drop-wrap i { right: 1px; font-size: 12px; top: 9px; }
.mk-models-voices .mk-drop-wrap ul, .mk-models-llm .mk-drop-wrap ul, .mk-models-avatar-3x .mk-drop-wrap ul { top: 34px; font-size: 12px; }
.mk-models-voices .mk-drop-wrap li, .mk-models-llm .mk-drop-wrap li, .mk-models-avatar-3x .mk-drop-wrap li { padding: 0 10px; height: 31px; line-height: 31px; }
.mk-models-avatar-3x .mk-drop-wrap { margin-bottom:13px; }
.mk-drop-search { margin-right:0 !important; }
.mk-drop-search input { position: absolute;left: 0;right: 0;bottom: 0;top: 0;background: none;padding: 0;margin: 0;padding: 0 30px 0 11px; font-size:12px; width:100%;height:100%; }
.mk .mk-drop-search .mk-drop-search-i { right: 0px;font-size: 11px;top: 8px;padding: 8px 8px;margin: -8px; cursor:pointer; }
.mk-drop-wrapped-3x .mk-drop-wrap { width:32.50%; margin-right:1.25%; min-width:auto; }
.mk-voices-load { font-family: effrasemi;text-align: center;padding: 15px 0 14px;clear: both;margin-top: 5px;float: left;width: 100%;margin-bottom: 15px;font-size: 14px;cursor: pointer; }
.mk-voices-load:hover { color: #edd3aa; }


.mk-3 { width: 15%; float: right; overflow: hidden; position: relative; height: 100%; background: #3b3f4f12; }
.mk-title { font-family: effrasemi; font-size: 19px; padding: 12px 0 7px; }
.mk-3-img { aspect-ratio: 2 / 3; background: #20222a; border-radius: 0 6px 0 0; border-bottom: 1px solid rgb(0 0 0 / 29%); background: #2326311f; position: relative; text-align: center; }
.mk-3-img span { position: absolute; top: 50%; line-height: 0; left: 0; right: 0; color: #5c606f; font-size: 15px; letter-spacing: .3px; }
.mk-3-info { overflow-y: scroll; overflow-x: hidden; scrollbar-width: none; position: relative; height: calc(100vh - 453px); height: calc(100dvh - 453px); }
.mk-3-info-title { font-size: 14px; border-bottom: 1px solid rgb(0 0 0 / 24%); box-shadow: 0 1px rgb(255 255 255 / 1%) inset; padding: 8px 15px; background: #1c1e25b2; background: #1c1e2591; }
.mk-3-info-title-2 { border-top: 1px solid rgb(0 0 0 / 24%); }
.mk-3-info-row-wrap { padding: 6px 0 10px; box-shadow: 0 1px rgb(255 255 255 / 1%) inset; }
.mk-3-info-row { padding: 10px 15px; font-size: 13px; }
.mk-3-info-label { font-family: effrasemi; padding-bottom: 2px; }
.mk-3-info-descr { font-size: 13px; }
.pop-help-title { font-size: 21px; }
.pop-help-info { font-size: 15px; padding: 15px 0 15px; line-height: 19px; }

.mk-models { margin-bottom: 10px; float: left; width: 100%; }
.mk-models .mk-title { border-bottom: 1px solid rgb(21 22 27 / 75%); box-shadow: 0 1px rgb(255 255 255 / 1%); margin-bottom: 12px; padding-bottom: 10px; }
.mk-model-menu { clear: both; float: left; width: 100%; margin-bottom: 20px; }
.mk-model-menu-btn { float: left; padding: 7px 6px; cursor: pointer; text-align: center; font-size: 14px; margin-right: 15px; }
.mk-model-menu-btn:hover { color: #fdb1c4; }
.mk-model-menu-btn-selected { font-family: effrasemi; color: #c7a7ff; border-bottom: 1px dashed #c7a7ff; }
.mk-model-row-selected .mk-model-label::before { font-family: 'fontello'; content: '\e1012'; padding-right: 3px; position: relative; top: 0px; font-size: 13px; }

.mk-model-row { margin-bottom: 10px; float: left; width: 100%; margin-top: 0px; border: 1px solid #181a20; border: 1px solid #14161cd6; background: #21242d; background: #23262f; border-radius: 6px; font-size: 13px; cursor: pointer; position: relative; overflow:hidden; }
.mk-model-check { width: 84px; height: 100%; background: rgb(36 40 53 / 52%); line-height: 0; position: absolute; border-right: 1px solid rgb(0 0 0 / 24%); color: #363c4f; border-radius:6px 0 0 6px; }
.mk-model-check i { line-height: 0; position: absolute; top: 52%; left: 0; right: 0; text-align: center; font-size: 23px; transition:.27s; }
.mk-model-pause-btn { transform: scale(0.9);  display: inline-block; }
.mk-model-r { padding: 13px 16px 16px 98px; }
.mk-model-label { font-family: effrasemi; font-size: 15px; transition: .27s; }
.mk-model-descr { padding: 4px 0 0; }
.mk-model-tags { padding-top: 5px; font-size: 11px; font-style: italic; color: #9b9da3; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 15px; }
.mk-model-tags span { padding-right:6px; }
.mk-model-play-bar { background: #2d3240;height: 3px;position: absolute;left: 0;right: 0;bottom: 0;clear: both;border-radius: 0 0 6px 6px; overflow:hidden; }
.mk-model-play-progress { position: absolute;left: 0;top: 0;bottom: 0;background: #42495e;width: 1.5%;border-radius: 3px 0 0 3px; }
.mk-model-row-edit-drop-show { overflow:visible !important; border-radius: 6px 6px 0; }
.mk-model-row-edit-drop-show .mk-model-edit-voice-btn i { color: #38404d; }
.mk-model-row-selected .mk-model-play-bar { background: #393f4f; } .mk-model-row-selected .mk-model-play-progress { background: #495268; }
/*.mk-model-row:hover .mk-model-check:hover i,*/ .mk-models-llm .mk-model-r:hover .mk-model-label { color: #6dc5ff; }
.mk-model-row-selected .mk-model-check i, .mk-model-row-selected .mk-model-label { color: #6dc5ff !important; }
.mk-model-row-selected { border-color:#6dc5ff; border: 1px solid #10131a; border: 1px solid #10131ad4; background: #2a2e38; }

.mk-model-edit-voice-btn { position: absolute;font-size: 15px;bottom: 0;right: 0;z-index: 10;cursor: pointer; }
.mk-model-edit-voice-btn i { color: #3b424d; padding: 10px; display: block; transition: .22s; }
.mk-model-edit-voice-btn:hover i { color: #505b67; }
.mk-model-edit-voice-drop { color: #fff; position: absolute; right: -1px; background: #292d39; padding: 4px 0 4px; width: 105px; font-size: 12px; margin-top: 0px; border-radius: 0 0 5px 5px; border: 1px solid #141720; border-bottom-width: 2px; transition: .27s; border-top-color: #0006; }
.mk-model-edit-voice-option { padding: 6px 12px; transition: .22s; }
.mk-model-edit-voice-option:hover { color: #6dc5ff; }

.mk-voices-title-link { height: 19px; font-size: 12px; padding: 0px 8px; position: relative; border-radius: 5px; cursor: pointer; float: right; font-family: effrasemi; line-height: 20px; transition: .25s; color: #797c8c; letter-spacing: .25px; margin-right: -8px; }
.mk-voices-title-link i { padding-right: 1px; }
.mk-voices-title-link:hover { color: #8a8d9d; text-decoration:none; }
.mk-models-voices .mk-model-row:hover .mk-model-check i, .mk-models-voices .mk-model-row:hover .mk-model-label, .x-voice-solo .mk-model-check:hover i { color: #c7a7ff; }
.x-voice-solo .mk-model-r:hover { cursor:auto; }
.mk-models-voices .mk-model-row-selected .mk-model-check i, .mk-models-voices .mk-model-row-selected .mk-model-label { color: #c7a7ff !important; }
.mk-models-voices .mk-model-row-selected { border-color:#c7a7ff; border: 1px solid #10131a; border: 1px solid #10131ad4; background: #2a2e38; }

.mk-models-avatar .mk-model-row:hover .mk-model-label { color: #80d183; }
.mk-avatar-row-selected .mk-model-label { color: #80d183 !important; }

.mk-models-avatar { float: left; width: 100%; }
.mk-models-avatar .mk-drop-wrap-avatar-type { width: 100%; margin: 4px 0 16px; }
.mk-2-avatar-img { background: #16181f; float: left; width: 240px; height: 360px; position: relative; line-height: 0; border-radius: 6px; }
.mk-2-avatar-img-label { text-align: center; position: absolute; left: 0; right: 0; top: 50%; color: #5e6479; }
.mk-2-loading-img .spinner { position: absolute; left: 0; right: 0; top: 50%; margin-top: -66px; }
.mk-2-avatar-r { padding-left: 268px; }
.mk-2-avatar-title { clear: both; float: left; width: 100%; margin: 37px 0 8px; font-family: effrasemi; font-size: 17px; }
.mk-models-avatar-3x { float: left; width: 100%; }

.mk-2-avatar-generate-view .mk-2-avatar-img { width: 200px; height: 300px; }
.mk-2-avatar-generate-view .mk-2-avatar-img-label { font-size: 14px; }
.mk-2-avatar-generate-view .mk-2-avatar-r { padding-left: 220px; }
.mk-2-avatar-generate-view .mk-2-row { margin-bottom: 17px; }
.mk-2-avatar-generate-view .mk-2-row-label { font-size:13px; }
.mk-2-avatar-generate-view .mk-2-row-textarea textarea { min-height: 88px; padding: 8px 12px; line-height: 16px; }
.mk-2-avatar-btn { background: #89704d; padding: 10px; height: 37px; text-align: center; border-radius: 4px; cursor: pointer; transition: .27s; font-size: 14px; line-height: 18px; margin-top: 3px; float: left; width: 100%; }
.mk-2-avatar-btn:hover { background: #8d7450; }

.mk-2-avatar-readyplayer { float: left; width: 100%; height: 300px; position: relative;}

.mk-model-row-img { width: 100px; height: 100%; position: absolute; }
.mk-model-row-img img { width:100%; border-radius:6px 0 0 6px; }
.mk-avatar-row { min-height: 103px; }
.mk-avatar-row .mk-model-r { padding: 13px 16px 16px 113px; }
.mk-avatar-row .mk-model-descr { padding-top: 4px; }
.mk-avatar-row-selected { border-color: #80d183; }
.mk-2-avatar-file-area { float:left;width:100%;height:360px;position:relative;font-family:effrasemi; line-height: 0; border-radius:6px; cursor:pointer; border:1px dashed rgb(255 255 255 / 14%); color: #404651; transition:.3s; }
.mk-2-avatar-file-area i { font-size: 60px; text-align: center; left: 0; right: 0; margin: auto; float: left; position:absolute; width: 100%; line-height: 0; top: 41%; }
.mk-2-avatar-file-area-text { text-align: center; margin: auto; width: 100%; position: absolute; top: 55%; font-size: 15px; }
.mk-2-avatar-file-area-text-2 { clear: both; width: 100%; position: relative; display: block; top: 22px; color: #7b6860; transition:.3s; }
.mk-2-avatar-file-area-text-2 span { padding:0 2px; }
.mk-2-avatar-file-area:hover { border-color: #565d67; color: #565d67; }
.mk-2-avatar-file-area:hover .mk-2-avatar-file-area-text-2 { color: #9d857c; }
.mk-2-avatar-file-area input { }

.mk-no-results { position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;margin: auto; min-width: 180px; }
.mk-no-results img {width: 110px;margin: auto;}
.mk-no-results-label {padding: 8px 0 0;font-size: 13px;}
.mk-models-avatar .mk-no-results { position: relative; transform: none; left: 0; top: 0; padding: 30px 0 20px; margin: 45px 0 60px; float: left; width: 100%; }
.mk-models-avatar .mk-no-results img { max-width:100px; }

.mk-settings { margin-bottom: 15px; float: left; width: 100%; }
.mk-settings .mk-title { border-bottom: 1px solid rgb(21 22 27 / 75%); box-shadow: 0 1px rgb(255 255 255 / 1.5%); margin-bottom: 0; padding-bottom: 10px; }
.mk-settings .mk-settings-descr { float: left; width: 100%; border-bottom: 1px solid rgb(21 22 27 / 75%); box-shadow: 0 1px rgb(255 255 255 / 1.5%), 0 1px rgb(255 255 255 / 1.5%) inset; border-top: 1px solid rgb(21 22 27 / 75%); padding: 35px 0; margin-bottom: 33px; }
.mk-toggle { float: left; width: 100%; margin-bottom: 24px; margin-top: 29px; }
.mk-toggle-title { font-size: 15px; font-family: effrasemi; color: #c7a7ff; padding-bottom: 7px; }
.mk-toggle-row { float: left; position: relative; width: 100%; margin: 8px 0px; }
.mk-toggle-row-label { float: left; font-size: 14px; position: relative; line-height: 22px; }
.mk-toggle-row-label a { float: left; padding: 4px 6px; margin: -4px 0px -4px -6px; color: #3b404f; cursor:pointer; transition: .27s; }
.mk-toggle-row-label a:hover { color:#7cc5ff; text-decoration:none; }
.mk-settings .mk-2-row-label { padding-bottom:7px; }
.mk-tags  { clear: both; float: left; width: 100%; margin-bottom: 30px; margin-top: 5px; }
.mk-tags div { float: left; border: 1px solid #e2e2e2; border-radius: 6px; padding: 3px 7px 3px; margin: 0 8px 8px 0; font-size: 12px; cursor: pointer; transition: .27s; color: #eee;  }
.mk-tags div:hover { color: #fdb1c4; border-color: #fdb1c4; }
.mk-tags .mk-tag-selected { color: #7cc5ff !important; border-color: #7cc5ff !important; border-style: dashed !important; }
.mk-tags-rating div { min-width: 48px; text-align: center; }
.mk-advanced .mk-title { border-bottom: 1px solid rgb(21 22 27 / 75%); box-shadow: 0 1px rgb(255 255 255 / 1.5%); margin-bottom: 27px; padding: 12px 0 15px; }
.mk-advanced .mk-title-2 { padding-top: 17px; }
.mk-advanced .mk-2-row-label { font-size:14px; }
.mk-advanced .mk-2-row-label a { float:right; color: #3b404f; }
.mk-advanced .mk-toggle { margin:0; padding:0; }
.mk-advanced-btn { background: #414557; padding: 10px; height: 40px; text-align: center; border-radius: 5px; cursor: pointer; transition: .27s; clear: both; margin-top: 22px; width: 100%; margin-bottom: 18px; display: inline-block; font-size: 15px; font-family: effrasemi; line-height: 21px; }
.mk-advanced-btn:hover { background: #464a5d; }

/*lora start*/
.mk-lora .mk-title { border:0; box-shadow:none; margin-bottom: 27px; padding: 12px 0 15px; }
.mk-lora-buy { width: 100%; padding: 8px 8px; background: #16181f; border-radius: 5px; margin-bottom: 25px; height: 100px; letter-spacing: .2px; margin-top: -28px; position: relative; }
.mk-lora-buy-left { float: left; position: absolute; width: 62px; margin: 0px; text-align: center; line-height: 0; font-family: effrasemi; font-size: 14px; color: #ddbd8d; top: 50%; margin-top: -6px; }
.mk-lora-buy-left span { display: block; line-height: 0; position: absolute; top: 50%; left: 0; right: 0; font-size: 10px; font-family: effrasemi; text-transform: uppercase; margin-top: 14px; }
.mk-lora-buy-right { padding-left: 64px; font-size: 13px; }
.mk-lora-buy-right i { padding-right: 1px; position: relative; top: 0px; font-size: 11px; }
.mk-lora-buy-buy { padding: 11px 11px; height: 36px; border-radius: 4px 4px 0 0; font-size: 12px; color: #beb3eb; color: #ddbd8d; box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; background: #21242d; border-bottom: 1px solid #181a20;cursor:pointer; transition:.27s; }
.mk-lora-buy-buy:hover { color:#ddbd8d; }
.mk-lora-buy-info { box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; background: #21242d; padding: 10px 11px; height: 48px; font-size: 12px; border-radius: 0 0 4px 4px; }
.mk-lora-buy-info span { display: block; color: #aaa; font-style: italic; font-size: 10px; }
.mk-grid { margin: 22px 0 0; float: left; overflow: hidden; border-radius: 4px; }
.mk-grid-row { width: 10%; float: left; position: relative; cursor: pointer; }
.mk-grid-row img { width: 100%;padding:0 1px 1px 0; }
.mk-grid-delete-img { width: 16px; height: 14px; padding: 9px 10px; }
.mk-grid-img i { position: absolute; bottom: 1px; right: 0; background: rgb(0 0 0 / 27%); width: 18px; height: 16px; text-align: center; line-height: 18px; font-size: 6px; border-radius: 3px 0 0 0; }
.mk-grid-spin { position: relative; background: #16181f; float: left; width: 100%; padding: 50%; line-height: 0; }
.mk-grid-spin .spinner { position: absolute; line-height: 0; top: 50%; margin-top: -18px; left: 0; right: 0; width: 35px; border-width: 2px; }
@media (min-width : 801px) { .mk-lora .mk-2-row-label { font-size:13px; } }
@media (min-width : 1281px) { .mk-lora .mk-2-row-label { font-size:14px; } }
@media (max-width : 1280px) { .mk-lora .mk-title { padding: 1px 0 12px; font-size: 15px; } .mk-grid-spin .spinner { margin-top: -15px; width: 30px; } }
@media (max-width : 800px) { .mk-grid { margin: 12px 0 0; } .mk-grid-row { width: 12.50%; } }
@media (max-width : 680px) { .mk-grid-row { width: 20%; } }
@media (max-width : 500px) { .mk-lora-buy { margin-bottom: 20px; padding: 6px; height: 90px; } .mk-lora-buy-right i { font-size:10px; } .mk-lora-buy-buy { padding: 10px 11px; height: 33px; font-size: 11px; } .mk-lora-buy-info {height: 45px; font-size: 11px; } }
@media (max-width : 480px) { .mk-grid-row { width: 25%; } .mk-grid-delete-img { width: 16px; height: 14px; padding: 9px 10px; } .mk-grid-img i { width: 16px; height: 14px; line-height: 15px; font-size: 5px; } }
@media (max-width : 470px) { .mk-lora-buy { margin-bottom: 20px; padding: 5px; height: 88px; } .mk-lora-buy-left { width: 36px; margin-top: -6px; font-size: 11px; } .mk-lora-buy-left span { font-size: 8px; margin-top: 11px; } .mk-lora-buy-right { padding-left: 40px; } }
@media (max-width : 420px) { .mk-lora .mk-2-avatar-file-area { height: 180px; } .mk-lora .mk-2-avatar-file-area i { font-size: 30px; top: 41%; } .mk-lora .mk-2-avatar-file-area-text { font-size: 11px; top: 57%; } .mk-lora .mk-2-avatar-file-area-text-2 { top: 11px; font-size: 9px; line-height: 0px; } }
@media (max-width : 360px) { .mk-lora-buy-left { width:31px;font-size:10px; } .mk-lora-buy-left span { font-size:7px; } .mk-lora-buy-right { padding-left:34px; } .mk-lora-buy-buy, .mk-lora-buy-info { padding:9px 4px 9px 9px; } }
@media (max-width : 350px) { .mk-grid-spin .spinner { border-width: 1px; width: 24px; margin-top: -12px; } }
@media (max-width : 344px) { .mk-lora-buy-info span { font-size: 9px; } }
/*lora end*/

/*Clone start*/
.mk-clone .mk-title { border-bottom: 1px solid rgb(21 22 27 / 75%); box-shadow: 0 1px rgb(255 255 255 / 1.5%); margin-bottom: 25px; padding: 12px 0 15px; }
.mk-model-trash { font-size: 9px; position: absolute; bottom: 0; right: 0; background: #292c37; padding: 7px 10px; border-radius: 6px 0 0 0; transition: 0.12s; cursor: pointer; } .mk-model-trash:hover { background: #db4468; }
.mk-model-trash:hover { background: #a33535; }
.mk-clone-btns { float: left; width: 100%; }
.mk-clone-btn { position:relative; padding: 9px 9px; height: 46px; border-radius: 4px; font-size: 13px; box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; line-height: 26px; text-align: center; width: 49.5%; float: left; border: 1px solid #181a20; background: #21242d; cursor: pointer; }
.mk-clone-btn-r { float: right; }
.mk-clone-btn:hover { background: rgb(65 69 87 / 20%); }
.recording-circle { background-color: red; width: 9px; height: 9px; border-radius: 50%; animation: ease recording 2s infinite; margin-right: 1px; display: inline-block; position: relative; top: 0px; }
 @keyframes recording { 0% { background-color: red; } 50% { background-color: #f06c6c; } 100% { background-color: red; } }
.mk-clone .mk-advanced-btn { margin-top: 11px;  font-size: 14px; }
@media (min-width : 1281px) { .mk-clone .mk-2-row-label { font-size:14px; } }
@media (min-width : 801px) { .mk-clone .mk-title { font-size: 17px; } }
@media (max-width : 1280px) { .mk-clone .mk-title { padding: 1px 0 10px; } .mk-clone .mk-model-row { margin-bottom: 8px; }  }
@media (max-width : 800px) { .mk-clone-btn { width: 49.3%; font-size: 12px; } .mk-clone .mk-advanced-btn { margin-top: 10px; } }
@media (max-width : 540px) { .mk-clone-btn-r { margin-top: 6px; } .mk-clone-btn { width:100%; } .mk-clone .mk-model-row { margin-bottom: 6px; } }
/*Clone end*/

@media (min-width : 980px) and (max-height : 680px) {  .mk-1-avatar { display:none; } }
@media (max-width : 1280px) {
.mk { padding: 16px 0 16px; } .mk .wakka { padding: 0 16px; } .mk-wrap { height: calc(100vh - 97px); height: calc(100dvh - 96px); }

.mk-1-top { padding: 15px 11px 13px; font-size: 15px; } .mk-1-top-menu div { font-size:11px; } .mk-1-row { padding: 10px 14px; font-size: 13px; } .mk-1-row-i { font-size: 12px; } .mk-1-row-incomplete-icon { font-size: 13px; top:0; } .mk-1-more { font-size: 13px; margin: 10px 14px 50px; } .mk-1-btn { font-size:15px; height: 40px; line-height: 41px; } .mk-1-avatar { bottom: 41px; }

.mk-title { font-size: 17px; padding: 1px 0 7px; } .mk-model-menu-btn { padding: 7px 6px; font-size:13px; margin-right:13px; } .mk-drop-wrap { font-size:13px; height: 38px; padding:0px 14px; } .mk-drop-wrap-span { left:12px; } .mk-drop-wrap i { right: 0px; font-size: 13px; top: 10px; } .mk-drop-wrap ul { top:38px; font-size: 12px; } .mk-drop-wrap li { padding: 0 12px; height: 36px; line-height: 37px; }

.mk-2-avatar-img-label { font-size:14px; } .mk-2-avatar-file-area i { font-size: 52px; top: 44%; } .mk-2-avatar-file-area-text { font-size: 13px; top:56%; } .mk-2-avatar-file-area-text-2 { top: 19px; }
.mk-2-avatar-title { margin-top: 30px; font-size: 16px; } .mk-model-label {  font-size: 14px; } .mk-model-descr { font-size: 12px; } .mk-model-row-selected .mk-model-label::before { font-size: 12px; }


.mk-toggle-title { font-size: 13px; } .mk-toggle-row { margin:6px 0; } .mk-toggle-row-label { font-size: 13px; } .mk-2-row-label { font-size: 14px; } .mk-2-row-textarea textarea { font-size: 13px; line-height: 16px; } .mk-tags div { padding: 4px 7px 4px; margin: 0 9px 9px 0; font-size: 12px; } .mk .switch { width: 44px; height: 20px; top: 1px; } .mk .switch span { height: 12px; width: 12px; }

.mk-settings .mk-title { padding: 1px 0 10px; } .mk-settings .mk-2-row-label { font-size:13px; } .mk-settings .mk-2-row { margin-bottom: 30px; }

.mk-advanced .mk-title { padding: 1px 0 12px; font-size: 15px; } .mk-advanced .mk-title-2 { padding-top: 8px; } .mk-advanced .mk-2-row-label { font-size: 13px; } .mk-2-row-input input { padding: 12px 13px; font-size: 13px; } .mk-advanced-btn { padding: 8px; height: 38px; font-size: 13px; }

.mk-basic .mk-title { padding: 10px 0 10px; }

.mk-3-info { height: calc(100vh - 284px); }  .mk-3-info-title { font-size: 13px; padding: 7px 12px;  } .mk-3-info-row { padding:9px 13px;font-size:13px; } .mk-3-info-descr { font-size:12px; } .mk-3-img span { font-size: 14px; }
}

@media (max-width : 980px) {
.mk-3 { display:none; }
.mk-1 { width: 20%; }
.mk-2 {  width: 80%; border-right: 0; box-shadow: 1px 0 rgb(255 255 255 / 2%) inset; }
}

@media (max-width : 800px) {
.mk-wrap { height: calc(100vh - 77px); height: calc(100dvh - 77px);  }
.mk-2 { padding: 15px 25px; }
.mk-title { font-size: 15px; }
.mk-basic .mk-title { padding: 6px 0 11px; }
.mk-2-row { margin-bottom: 20px; }
.mk-2-row-label { font-size: 13px; }
.mk-2-row-input input { font-size:12px; }
.mk-2-row-textarea textarea { font-size: 12px; padding: 10px 12px; }

.mk-1-avatar { bottom:40px; padding:7px 4px 7px 7px; }
.mk-1-avatar img { width: 26px;top:2px; border-radius:4px; }
.mk-1-avatar-r { font-size: 12px; top: 3px; }
.mk-1-avatar-sub { color: #999999; font-size: 9px; top: -2px; }
.mk-2-avatar-generate-view .mk-2-avatar-img { width: 140px; height: 210px; }
.mk-2-avatar-generate-view .mk-2-avatar-img-label { font-size: 12px; }
.mk-2-avatar-generate-view .mk-2-avatar-r { padding-left: 154px; }
.mk-2-avatar-generate-view .mk-2-row { margin-bottom: 9px; }
.mk-2-avatar-generate-view .mk-2-row-label { font-size: 11px; padding: 0px 0 3px; font-family: effra; }
.mk-2-avatar-generate-view .mk-2-row-textarea textarea { min-height: 60px; font-size: 11px; line-height: 14px; }
.mk-2-avatar-generate-view .mk-2-avatar-btn { line-height: 11px; height: 30px; font-size: 12px; margin-top: 1px; }

.mk-models .mk-title { padding-bottom: 12px; } .mk-model-menu-btn { font-size: 13px; padding: 7px 0; }
.mk-models-avatar .mk-drop-wrap-avatar-type { margin: 6px 0 12px; }
.mk-drop-wrap { font-size: 12px; height: 37px;  } .mk-drop-wrap i { font-size: 12px; right: -1px; } .mk-drop-wrap ul { top: 37px; font-size: 12px; } .mk-drop-wrap li { padding: 0 12px; height: 34px; line-height: 34px; }

.mk-2-avatar-img { width: 160px; height: 240px; } .mk-2-avatar-r { padding-left: 174px; } .mk-2-avatar-file-area { height: 240px; } .mk-2-avatar-file-area i { font-size: 40px; top: 43%; } .mk-2-avatar-file-area-text { font-size: 12px; top: 57%; } .mk-2-avatar-file-area-text-2 { top: 16px; font-size: 11px; }
.mk-2-avatar-title { font-size: 15px; margin-bottom: 8px; }

.mk-models-llm .mk-model-check { width: 62px; }  .mk-models-llm .mk-model-check i { font-size: 17px; } .mk-models-llm .mk-model-r { padding: 13px 16px 16px 73px; } .mk-models-llm .mk-model-label { font-size: 13px; } .mk-model-row-selected .mk-model-label::before { font-size: 12px; }

.mk-voices-title-link { font-size: 11px; line-height: 16px; }
.mk-drop-wrapped-3x .mk-drop-wrap { width:32.4%; margin-right:1.4%;}
.mk-models-voices .mk-req { font-size:8px; margin-left: 3px; }

.mk-no-results img {width: 95px;margin: auto;}
.mk-no-results-label {padding: 6px 0 0;font-size: 12px;}

.mk-settings .mk-title { padding: 1px 0 12px;  }
}

@media (max-width : 720px) {
.mk-1 { width: 25%; }
.mk-2 {  width: 75%; padding: 15px 22px; }
}
@media (max-width : 610px) {
.mk { padding: 0px; }
.mk-2 { box-shadow: 1px 0px rgb(255 255 255 / 1%) inset; padding: 15px 19px; }
.mk .wakka { padding:0; }
.mk-wrap { border:0; height: calc(100vh - 83px); height: calc(100dvh - 83px);  box-shadow: 1px 0px rgb(255 255 255 / 1%) inset; border-radius:0; }
.mk-1-top { padding: 14px 11px 13px; font-size: 13px; }
.mk-1-top-menu { box-shadow: 0 1px rgb(255 255 255 / 1%); }
.mk-1-top-menu div { box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; }
.mk-1-row { padding: 9px 14px; font-size: 12px; }
.mk-1-row-i { font-size: 11px; }
.mk-1-row-incomplete-icon { font-size:11px; top: 1px; }
.mk-1-more { margin: 10px 14px 50px; padding: 14px 0px; font-size: 12px; box-shadow: 0 1px rgb(255 255 255 / 1%) inset; }
.mk-1-more i { font-size:11px; }
.mk-1-btn { position: fixed; background: #263757; border-top: 1px solid #181a20; font-family:effrasemi; height: 39px; line-height: 38px; font-size: 13px; border-radius:0; }
.mk-1-btn:hover { background: #283b5d; border-color: rgb(24 26 32 / 85%); }
.mk-1-avatar { bottom: 0; }
.mk-1-avatar-r {  font-size: 11px; }

.mk-title { font-size: 14px; margin-top: -1px; }
.mk-basic .mk-title { padding: 5px 0 8px; }
.mk-bar { height: 6px; }
.mk-2-avatar-img { width: 120px; height: 180px; } .mk-2-avatar-img-label { font-size: 12px; } .mk-2-avatar-r { padding-left: 132px; } .mk-2-avatar-file-area { height:180px; } .mk-2-avatar-file-area i { font-size: 35px; top: 40%; } .mk-2-avatar-file-area-text { font-size: 12px; top: 58%; } .mk-2-avatar-file-area-text-2 { top: 15px; font-size: 11px; } .mk-2-avatar-file-area-text-1 { text-transform:capitalize; } .mk-2-avatar-file-area-text-1 span { display:none; } .mk-2-avatar-title {  font-size: 14px;  margin-bottom: 2px; }

.mk-models .mk-title { padding-bottom: 10px; } .mk-model-check i { font-size:22px; }

.mk-settings .mk-title { padding: 1px 0 10px;  } .mk-settings .mk-toggle { float: left; width: 100%; margin-bottom: 16px; margin-top: 21px; } .mk-settings .mk-settings-descr  { padding: 25px 0 26px; margin-bottom: 27px; } .mk-tags { margin-bottom:26px; } .mk-settings .mk-req { font-size: 7px; margin-left: 4px; } .mk-tags div { margin: 0 6px 6px 0; font-size: 11px; }
}

@media (max-width : 610px) {
.mk-voices-drop-wrapped, .mk-llm-drop-wrapped-3x { margin: 2px 0 5px; float: left; width: 100%; }
.mk-models-avatar-3x { margin:6px 0 5px; }
.mk-models-voices .mk-drop-wrap, .mk-models-llm .mk-drop-wrap, .mk-models-avatar-3x .mk-drop-wrap { margin-right: 7px; margin-bottom: 7px; height: 30px; min-width: 95px; }
.mk-models-voices .mk-drop-wrap-span, .mk-models-llm .mk-drop-wrap-span, .mk-models-avatar-3x .mk-drop-wrap-span { font-size: 11px; left: 10px; line-height: 29px; }
.mk-models-voices .mk-drop-wrap i, .mk-models-llm .mk-drop-wrap i, .mk-models-avatar-3x .mk-drop-wrap i  { right: 0px; font-size: 11px; top: 6px; }
.mk-models-voices .mk-drop-wrap ul, .mk-models-llm .mk-drop-wrap ul, .mk-models-avatar-3x .mk-drop-wrap ul { top: 30px; font-size: 11px; }
.mk-models-voices .mk-drop-wrap li, .mk-models-llm .mk-drop-wrap li, .mk-models-avatar-3x .mk-drop-wrap li { height: 28px; line-height: 29px; }
.mk-models-voices .mk-req { font-size:7px; }
html .mk-drop-wrapped-3x .mk-drop-wrap:first-of-type { width:49.1%; margin-right:1.8%; }
html .mk-drop-wrapped-3x .mk-drop-wrap { width:49.1%; margin-right:0; margin-bottom:1.8%; min-width:auto; }
html .mk-drop-wrapped-3x .mk-drop-search { width:100%; }
.mk-drop-search input { font-size:11px; padding:0 30px 0 10px; }
.mk .mk-drop-search .mk-drop-search-i { font-size: 10px; right: -3px; top: 7px; padding: 5px 9px; margin: -6px; }
}

@media (max-width : 520px) {
.mk-1-top { padding: 11px 9px 11px; font-size: 11px; } .mk-1-top-menu div { padding: 7px 2px 9px; font-size: 9px; } .mk-1-row { padding: 8px 10px; font-size: 11px; } .mk-1-row-i { padding-right: 0; font-size: 9px; } .mk-1-row-incomplete-icon { font-size: 9px; top: 1px; }  .mk-1-more { font-size:11px; margin: 10px 10px 50px; }

.mk-2-row-label { font-size: 12px; }

.mk-basic .mk-req { font-size: 7px; margin-left: 4px;  }

.mk-advanced .mk-2-row-label { font-size: 12px; }
.mk-advanced-btn { padding: 7px; height: 34px; font-size: 12px; }
.mk-clone .mk-advanced-btn { font-size: 13px; padding: 6px; }

.mk-model-menu-btn { font-size: 12px; }
.mk-model-check { width: 60px; } .mk-model-r { padding: 13px 16px 16px 71px; } .mk-model-check i { font-size: 18px; }
.mk-model-edit-voice-btn {  font-size: 13px; } .mk-2-row-input input { font-size:12px; }

.mk-voices-title-link { font-size: 10px; }

.mk-models-llm .mk-model-check { width: 52px; }  .mk-models-llm .mk-model-check i { font-size: 16px; } .mk-models-llm .mk-model-r { padding: 13px 16px 16px 64px; } .mk-models-llm .mk-model-descr { font-size: 10px; }

.mk-models-avatar .mk-drop-wrap-avatar-type { height: 35px; } .mk-models-avatar .mk-drop-wrap-avatar-type i { font-size: 12px; right: -2px; top: 10px; } .mk-models-avatar .mk-drop-wrap-avatar-type ul { top: 35px; font-size: 11px; }
}

@media (max-width : 500px) {
.mk-2-avatar-generate-view .mk-2-avatar-img { width: 100%; aspect-ratio: 2/3; height: auto; }
.mk-2-avatar-generate-view .mk-2-avatar-img-label { font-size: 13px; }
.mk-2-avatar-generate-view .mk-2-avatar-r { padding: 0; margin-top: 14px; float: left; width: 100%; }
.mk-2-avatar-generate-view .mk-2-row-label { font-size: 12px; padding: 0px 0 3px; font-family:effrasemi; }
.mk-2-avatar-generate-view .mk-2-row-textarea textarea { min-height: 77px; font-size: 12px; line-height: 16px; }
.mk-2-avatar-generate-view .mk-2-avatar-btn { line-height: 11px; height: 31px; font-size: 12px; margin-top: 4px; }
}

@media (max-width : 470px) { .mk-voices-drop-wrapped, .mk-llm-drop-wrapped-3x { margin:0 0 7px; } .mk-models-avatar-3x { margin:3px 0 6px; } }

@media (max-width : 440px) {
.mk-1-avatar-r { font-size: 10px; }
html .mk-drop-wrapped-3x .mk-drop-wrap:first-of-type {  width: 49%;  margin-right: 2%; }  html .mk-drop-wrapped-3x .mk-drop-wrap {width: 49%; margin-bottom: 2%; } html .mk-drop-wrapped-3x .mk-drop-search { width: 100%; }
}
@media (max-width : 440px) {
.mk-1-top-menu div { width:100%; border:0;text-align: left; padding: 7px 10px 8px; font-size: 9px; } .mk .mk-1-top-menu-1 { border-bottom: 1px solid rgb(0 0 0 / 28%); }

.mk-2 { padding: 15px 17px; }
.mk-2-row-textarea textarea { padding: 10px 13px; min-height: 142px; }

.mk-advanced .mk-toggle-row-label { font-size: 12px; }
.mk-advanced .mk-title-2 { font-size: 14px; }
.mk-advanced .mk-2-row-input input { padding: 11px 12px; font-size: 12px; }

.mk-2-avatar-file-area i { font-size: 27px; top: 42%; } .mk-2-avatar-file-area-text { font-size: 10px; top: 57%; } .mk-2-avatar-file-area-text-2 { top: 5px; font-size: 9px; line-height: 12px; }
.mk-2-avatar-title { margin: 28px 0 4px; font-size: 13px; } .mk-avatar-row .mk-model-r { padding: 10px 14px 16px 96px; } .mk-model-row-img { width: 85px; overflow:hidden; } .mk-model-row-img img { width: 130%; left: -15%; position: relative; } .mk-model-label { font-size: 13px; } .mk-model-descr { font-size: 11px; line-height: 12px; padding-top:3px; } .mk-model-row-selected .mk-model-label::before { font-size: 11px; } .mk-avatar-row .mk-model-descr { padding-top: 5px; } .mk-model-tags { font-size: 9px; } .mk-model-tags span { padding-right: 5px; }

.mk-model-check { width: 52px; } .mk-model-r { padding: 13px 16px 16px 63px; } .mk-model-check i { font-size: 16px; }
.mk-models-llm .mk-model-label { font-size: 12px; } .mk-models-llm .mk-req { font-size: 8px; }

.mk-voices-load { font-size: 12px; margin:0px 0 12px; }
}

@media (max-width : 440px) {
.mk-1 { width: 20%; }
.mk-2 {  width: 80%; }
.mk-1-top { padding: 11px 8px 11px; font-size: 11px; } .mk-1-top-menu div { padding: 7px 8px 8px; } .mk-1-row { padding: 8px 8px; font-size: 10px; } .mk-1-more { font-size: 10px; margin: 8px 8px 50px; } .mk-1-more i { font-size: 9px; } .mk-1-row-info-d { display:none; } .mk-1-row-info-m { display:inline !important; }

.mk-1-avatar { text-align: center; padding: 2px; bottom: 1px; } .mk-1-avatar img { margin: auto; float: none; padding: 0; margin-bottom: 3px; border-radius: 3px; width: 22px; } .mk-1-avatar-r { clear: both; padding: 0 2px; font-size: 9px; top: 1px; } .mk-1-avatar-sub { font-size: 8px; top: -4px; }

.mk-no-results img {width: 85px;margin: auto;}
.mk-no-results-label {padding: 6px 0 0;font-size: 11px;}
}

@media (max-width : 380px) { .mk-2-avatar-file-area-text-2 { top: 5px; font-size: 8px; } }
@media (max-width : 365px) {
.mk-avatar-row .mk-model-r { padding: 10px 14px 16px 86px; } .mk-model-row-img { width: 75px; } .mk-model-row-img img { width: 150%; left: -25%; position: relative; }
}
@media (max-width : 360px) { .mk-2-avatar-img { width: 100px; height: 150px; } .mk-2-avatar-r { padding-left: 110px; } .mk-2-avatar-file-area { height: 150px; } .mk-2-avatar-file-area-text { top: 59%; } }

/*--- Simple Section ---*/
.mk-1-simple .mk-1-row { display:none; }
.mk-1-simple .mk-1-row-simple { display:block; }
.mk-section-simple { padding-bottom: 10px; float: left; width: 100%; }
.mk-section-simple .mk-title { padding-bottom: 10px; border-bottom: 1px solid rgb(21 22 27 / 75%); box-shadow: 0 1px rgb(255 255 255 / 1.5%); }
.mk-section-simple .mk-drop-wrap-avatar-type { margin: 1px 0 12px !important; }
.mk-section-simple .mk-drop-wrap-simple-voices { margin: 0 0 25px; }
.mk .mk-simple-voice-label { margin: 0; padding-top: 28px; }
.mk-section-simple  .mk-tags { margin-bottom: 25px; }
.mk-asterisk { color: #ef5252; display: inline-block; font-size: 14px; padding: 0px 1px; }
.mk-section-simple .mk-drop-wrap-avatar-type { width:49.5%; }
.mk-section-simple .mk-drop-wrap-model-art { width:49.5%; float:right; }
.mk-section-simple .mk-drop-wrap-avatar-type-right { float:right; }
.mk-simple-avatar-wrap-v2 .mk-drop-wrap-model-art { display:none !important; }
.mk-simple-avatar-wrap-v2 .mk-drop-wrap-avatar-type-right { display:none !important; }
.mk-simple-avatar-wrap-v2 .mk-drop-wrap-avatar-type { width:100% !important; }
@media (max-width : 1280px) { .mk-asterisk { font-size:13px; } .mk-section-simple .mk-drop-wrap-avatar-type { width:49%; } .mk-section-simple .mk-drop-wrap-model-art { width:49%; } }
@media (max-width : 800px) {
.mk-section-simple .mk-title { padding: 1px 0 10px; }
.mk-section-simple .mk-drop-wrap { margin-bottom: 23px;  }
.mk-asterisk { font-size:12px; }
.mk .mk-simple-voice-label { padding-top: 25px; }
.mk-section-simple .mk-drop-wrap-simple-voices { margin: 0 0 24px; }
.mk-section-simple  .mk-tags { margin-bottom: 20px; }
.mk-section-simple .mk-drop-wrap-avatar-type { width:48.5%; }
.mk-section-simple .mk-drop-wrap-model-art { width:48.5%; }
 }
@media (max-width : 700px) { .mk-section-simple .mk-drop-wrap-avatar-type { width:48%; } .mk-section-simple .mk-drop-wrap-model-art { width:48%; } }
@media (max-width : 520px) { .mk-asterisk { font-size:12px; } .mk-section-simple .mk-drop-wrap-avatar-type { width:48.2%; } .mk-section-simple .mk-drop-wrap-model-art { width:48.2%; } }
@media (max-width : 470px) { .mk-section-simple .mk-drop-wrap-avatar-type { width:100%; float:left; } .mk-section-simple .mk-drop-wrap-model-art { width:100%; float:right; margin: -4px 0 9px !important; } .mk-section-simple .mk-drop-wrap-avatar-type-right { margin: -4px 0 9px !important; } }

/*---------- Voice Cloning Page ----------*/
.voi { background: rgb(25, 27, 36); padding-bottom: 10px; letter-spacing: .3px; }
.voi .wakka { padding-top: 30px; padding-bottom: 55px; max-width: 720px; }
.voi .mk-clone { padding: 22px 28px 28px; border-radius: 5px; background: #272b35; border: 1px solid #0000006b; box-shadow: 1px 1px #ffffff05 inset; }
.voi .mk-title { border-bottom: 1px solid rgba(12, 13, 18, 0.23); box-shadow: 0 1px rgba(255, 255, 255, 1.4%); font-size: 17px; padding: 0px 0 37px; }
.voi-title-bottom { clear: both; float: left; font-size: 12px; font-style: italic; color: #969bac; margin-top:1px; font-family: effra; padding-bottom: 11px; color: #eadfc4; color: #f9ddb9; }
.voi .mk-clone .mk-2-row-label { padding: 0px 0 3px; }
.voi .mk-2-row-input input, .voi .mk-drop-wrap { background: #20232d; }
.voi .mk-2-row-input input { font-size:13px; }
.voi .mk-model-row { border:0; background: #20232d; margin-bottom: 10px; border-radius: 5px; }
.voi .mk-model-check { border: 0; background: rgba(23, 25, 32, 0.36); }
.voi .mk-model-label { font-size: 13px; }
.voi .mk-model-descr { font-size:12px; }
.voi .mk-drop-wrap ul { background: #303442; } .voi .mk-drop-wrap li:hover { background: #363a4ad4; }
.voi .mk-clone-btn { height: 42px; line-height: 24px; box-shadow:none; border:0; background: #20232d; }
.voi .mk-clone-btn:hover { background: #1e212b; }
.voi-about { font-size: 11px; margin-top: -13px; color: #969bac; margin-bottom: 10px; font-style: italic; line-height: 12px; }
.voi .mk-model-trash { background: #303340f5; }
.voi .mk-model-trash:hover {  background: #a33535; }
.voi .mk-clone .mk-advanced-btn { margin-top:11px; background: #505382; }
.voi .mk-title svg { float: left; height: 58px; width: 58px; margin: -15px; margin-right: -15px; margin-right: -6px; }
.voi .mk-model-edit-voice-drop { border: 0;background: #323746;right: 0; box-shadow:none; }
.voi-bg { opacity: .2; position: absolute; filter: brightness(500%); left: 0; right: 0; top: 0; width: 100%; object-fit: cover; height: 100%; }

@media (min-width : 801px) { .voi .mk-clone .mk-2-row-label { font-size:13px; } }
@media (max-width : 800px) {
.voi-bg { filter: brightness(250%); }
.voi { background: #272b35; background: rgb(28, 30, 38); }
.voi .wakka { padding: 0; max-width: 100%; }
.voi .mk-clone { border: 0; padding: 20px 25px 35px; box-shadow: none; background: none; border-radius: 0; }
.voi .mk-title svg { display:none; }
.voi .mk-clone .mk-title { margin-bottom: 21px; padding: 0px 0 27px; font-size: 15px; border-bottom: 1px solid rgba(12, 13, 18, 0.37);  box-shadow: 0 1px rgba(255, 255, 255, 1%); }
.voi-title-bottom { font-size: 11px; margin-top: -1px; color: #eadfc4; }
.voi .mk-2-row-input input, .voi .mk-drop-wrap {background: #252933; }
.voi .mk-2-row-input input { font-size: 12px; }
.voi .mk-2-row { margin-bottom: 23px; }
.voi .mk-drop-wrap { margin-bottom: 29px; }
.voi .mk-model-row { background: #252933; }
.voi .mk-model-check { background: rgb(40, 45, 57); }
.voi .mk-clone-btn { background: #252933; }
.voi .mk-clone-btn:hover { background: #272b35; }
.voi .mk-clone .mk-advanced-btn { font-size: 13px; padding: 10px; height: 40px; margin-top: 11px; }
}
@media (max-width : 540px) { .voi .mk-clone { padding: 20px 20px 35px; } .voi-title-bottom { font-size: 10px; } .voi .mk-clone-btn-r { margin-top: 10px; }  }
@media (max-width : 440px) { .voi .mk-model-descr { font-size:11px; } .voi-about { font-size: 10px; margin-top: -14px; line-height: 11px; } }

/*---------- Contact ----------*/
.page-contact .head-wrap, .page-voi .head-wrap { border-bottom: 1px solid rgba(8, 10, 14, 0.45); }
.contact { overflow: auto; padding: 40px 0 40px; position:relative; z-index:5; }
.contact-main-title { font-family: chalet; font-size: 21px; letter-spacing: 1px; text-align: center; margin-bottom: 13px; }
.contact-sub-title { text-align: center; color: #aea798; font-size: 13px; font-family: effra; }
.main-contact { width: 100%; max-width: 580px; margin: auto; }
.contact-wrap { padding: 24px 0 0; }
.c-input-wrap { position: relative; width: 100%; float: left; padding: 0 0 14px 0; }
.contact .c-input-text, .contact .c-input-textarea { width: 100%; line-height: 21px; float: left; z-index: 5; position: relative; font-size: 14px; border-radius: 5px; padding: 11px 14px 11px; color: #fff; background: #262935; border: 1px solid #14161e; box-shadow: 1px 1px rgba(255, 255, 255, 0.01) inset; letter-spacing: .35px; }
.contact .c-input-textarea { min-height: 254px; min-width: 100%; max-width: 100%; line-height: 21px; padding: 10px 14px; }
.contact-right { margin-top: 24px; }
.contact-right span { font-family: effra; font-size: 13px; line-height: 17px; margin: -17px 0 40px; display: block; letter-spacing: .35px; }
.c-input::-webkit-input-placeholder {color: #8f93a3;}
.c-input::-moz-placeholder {color: #8f93a3; }
.c-input:-moz-placeholder {color: #8f93a3; }
.c-input:-ms-input-placeholder { color: 8f93a3;}
.c-button-submit { padding-top: 2px; clear: both; width: 100%; }
.c-button-submit input { width: 100%; height: 41px; background: #bd526d; border: none; color: #fff; font-size: 15px; line-height: 18px; border-radius: 3px 3px 3px 3px; padding: 0; position: relative; text-align: center; font-family: effrasemi; cursor: pointer; transition: .17s; }
.c-button-submit input:hover { cursor: pointer; background: #c45571; }
.c-bg { opacity: .2; position: absolute; filter: brightness(250%); left: 0; right: 0; top: 0; width: 100%; object-fit: cover; height: 100%; }

@media (max-width : 800px) { .contact { padding: 29px 0 25px; } .contact-main-title {  font-size: 19px; margin-bottom: 5px; } .contact-sub-title { font-size: 12px; } }
@media (max-width : 480px) { .contact { padding: 25px 0 20px; } .contact-main-title { font-size: 18px; margin-bottom: -1px; } .contact-sub-title { font-size: 11px; margin-top: -1px; } .contact .c-input-text, .contact .c-input-textarea { font-size:13px; line-height:20px } .c-button-submit input { height:39px; line-height:17px; } .contact-right span { font-size: 12px; line-height: 16px; } }

/*---------- FAQ and Features ----------*/
.faq { background: #181a21; overflow: hidden; }
.faq-e { clear: both; width: 100%; border-bottom: 1px solid rgb(0 0 0 / 28%); box-shadow: 0 1px rgb(255 255 255 / .6%) inset; float: left; padding-bottom: 50px; background: #181a21; }
.faq-e-left { float: left; width: 59%; font-size: 16px; line-height: 24px; top: 198px; padding-right: 18px; position: relative; }
.faq-e-left-title { font-size: 29px; padding-bottom: 12px; float: left; width: 100%; font-family:chalet; }
.faq-e-left-i { position: absolute; left: 0px; right: 0; margin: auto; text-align: center; font-size: 418px; opacity: .008; top: 40%; transform: rotate(-45deg); }
.faq-e-right { float: right; width: 33%; margin-top: 55px; }
.faq-e-right img { width:100%; }
.f-help-btns { clear: both; float: left; width: 100%; margin: 16px 0 18px; }
.f-help-btns a { border: 1px solid #eee; border-radius: 8px; padding: 8px 49px; text-align: center; margin: 0 10px 0 0; font-size: 13px; position: relative; float: left; transition:.27s; }
.f-help-btns a:hover { text-decoration:none; cursor:pointer; }
.f-help-btns i { float: left; padding-right: 5px; }
.f-help-blue i { color:#90c2e9; }
.f-help-green i { color: #a4cf97; }
.f-help-blue:hover { border-color:#90c2e9; color:#90c2e9; }
.f-help-green:hover { border-color:#a4cf97; color:#a4cf97; }

.bots { padding:45px 0 55px; float:left; clear:both; width:100%; background: #1b1d24; box-shadow: 0 1px rgba(255, 255, 255, 0.01) inset; }
.bots-main-title { font-family: chalet; font-size: 21px; padding: 0 0 11px; text-align: center; color: #d3bef9; }
.bots-main-title i { border-radius: 4px; overflow: hidden; display: inline-block; position: relative; top: 2px; margin-right: 3px; font-size: 16px; }
.bots-row { width: 33.333333%; float: left; transition:.27s; }
.bots-row:hover { color: #9ed4ff; text-decoration:none; cursor:pointer; }
.bots-row-body { margin: 0 5px 10px; border: 1px solid rgb(0 0 0 / 45%); background: rgba(255, 255, 255, 0.04); box-shadow: 1px 1px rgba(255, 255, 255, 0.01) inset; border-radius: 6px; overflow: hidden; }
.bots-img { float: left; width: 50px; }
.bots-img img { width:100%; }
.bots-title { padding-left: 61px; font-size: 15px; line-height: 48px; height: 50px; }

.faq-wrap { border-bottom: 1px solid rgb(0 0 0 / 22%); box-shadow: 0 1px rgb(255 255 255 / 1%); float: left; padding-bottom: 30px; width: 100%; letter-spacing: .25px; }
.faq-wrap-title { text-align: center; padding: 40px 0 17px; font-size: 28px; font-family:chalet; color: #87c9fd; }
.faq-wrap-sub-title { color:#eee; font-family: effra; font-size: 14px; }
.f-main { padding: 5px 0 42px; background: #1b1d24; box-shadow: 0 1px rgba(255, 255, 255, 0.01) inset; border-bottom: 1px solid rgba(0, 0, 0, 0.34); letter-spacing: .25px; }
.f-body { -webkit-column-gap: 12px; column-gap: 12px; -webkit-column-count: 2; column-count: 2; display: inline-block; width: 100%; }
.f-slot { position: relative; overflow: hidden; max-height: 55px; margin: 0 0 8px; border: 1px solid rgb(0 0 0 / 45%); background: rgba(255, 255, 255, 0.04); border-radius:6px; width:100%; display:inline-block; box-shadow: 1px 1px rgba(255, 255, 255, 0.01) inset; }
.f-title { font-size: 14px; line-height: 53px; min-height: 55px; max-height: 55px; position: relative; top: 0; padding: 0 18px 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-title i { float:right; }
.f-title:hover { color: #9ed4ff; }
.f-text { font-size: 14.4px; line-height: 21px; padding: 17px 28px 22px; }
.f-show { max-height:100%; overflow:visible; margin-bottom: 11px !important; }
.f-show .f-title { border-bottom: 1px solid rgb(0 0 0 / 28%); background: rgba(42, 45, 55, 0.68); color: #eecb9d; border-radius: 6px 6px 0 0; }
.f-img { }
.f-img img { width:100%; }
.f-slot a { color: #8ac78d; }

.fea-body { -webkit-column-gap: 12px; column-gap: 14px; -webkit-column-count: 3; column-count: 3; display: inline-block; width: 100%; }
.fea-slot { position: relative; margin: 0 0 14px; border: 1px solid rgb(0 0 0 / 45%); background: rgb(255 255 255 / 3%); border-radius: 6px; width: 100%; display: inline-block; transition: .27s; max-height: 100%; overflow: visible; }
.fea-img { float: left; max-height: 100px; border-radius:0; width: 100%; border-bottom: 1px solid rgb(0 0 0 / 23%); overflow: hidden; position:relative; }
.fea-img img { width: 100%; position: relative; opacity: .95; }
.fea-img .stars { opacity:40%; }
.fea-title { font-size: 15px; line-height: 51px; height: 52px; position: relative; top: 0; padding: 0 16px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 5; font-family: effrasemi; border-bottom: 1px solid rgb(0 0 0 / 23%); background: rgb(32 35 45 / 68%); background: #262933; border-radius: 6px 6px 0 0; }
.fea-text { font-size: 13px; line-height: 18px; padding: 13px 18px 21px; color: #dcdee7; clear: both; background: #22252e; border-radius: 0 0 6px 6px; }
.fea-slot i { display:none; }
.fea-slot-top .fea-title  { border-radius:0; }
.fea-slot-top .fea-img { border-radius:6px 6px 0 0; max-height: 190px; }
.fea-slot-top .fea-img img { top:-82px; opacity:100%; }

@media (max-width : 1280px) {
.faq-wrap-title { padding: 35px 0 15px; font-size: 26px; }
.faq-wrap-sub-title { font-size: 13px; }
.fea-text { font-size: 13px; line-height: 19px; padding: 12px 16px 21px; }
.fea-title { font-size: 14px; }

.f-main .faq-wrap-title { padding: 37px 0 15px; }
.f-title { font-size: 14px; padding: 0 15px 0 16px; }
.f-text { font-size: 14px; line-height: 20px; padding: 19px 25px 22px; color: #dcdee7; }

.faq-e .wakka { padding: 0 20px 0 24px; }
.faq-e-left { font-size: 15px; top: 180px; }
.faq-e-left-title { font-size: 27px; padding-bottom: 9px; }
.faq-e-left-i { top:32%; font-size: 362px; }

.bots-title { font-size: 14px; line-height: 52px; }
}
@media (max-width : 1240px) {
.faq-e-left { top: 178px; }
.fea-slot-top .fea-img { max-height: 180px; }
.fea-slot-top .fea-img img { top:-64px; }
}
@media (max-width : 1180px) {
.faq-e { padding-bottom: 50px; }
.faq-e-left { top: 165px; }
.faq-e-right { width:375px; }
.faq-e-left-i { top:32%; }
}
@media (max-width : 1060px) {
.fea-slot-top .fea-img { max-height: 170px; }
.fea-slot-top .fea-img img { top:-43px; }
.faq-e-left { font-size: 14px; line-height: 22px; top: 155px; width: 63%; }
.faq-e-left-title { font-size: 25px; padding-bottom: 9px; }
.f-help-btns { margin: 15px 0 18px; }
.faq-e-left-i { font-size: 345px; top: 34%; }
.faq-e-right { width: 345px; }
}
@media (max-width : 980px) {
.faq-e { padding: 54px 0px 40px; }
.faq-e-left { width: 100%; text-align: center; top: 0; padding: 30px 10% 0; }
.f-help-btns { margin: 15px 0 18px; float: none; display: inline-block; width: auto;  }
.faq-e-left-i { display:none; }
.faq-e-right { width: 45%;min-width: 345px; margin: auto; float: none; }
}
@media (max-width : 800px) {
.faq-wrap-title { padding: 28px 0 12px; font-size: 21px; }
.fea-body { -webkit-column-gap: 12px; column-gap: 12px; -webkit-column-count: 2; column-count: 2; }
.fea-slot { margin: 0 0px 12px; }
.fea-slot-top .fea-img img { top:0; }
.fea-title { font-size: 14px; line-height: 49px; height: 51px; padding: 0 14px 0; }
.fea-text { font-size: 12px; line-height: 18px; padding: 11px 16px 20px; }

.f-main { padding: 5px 0 39px; }
.f-main .faq-wrap-title { padding: 35px 0 15px; }
.f-body { -webkit-column-count: 1; column-count: 1; }
.f-slot { margin: 0 0 7px; }

.faq-e { padding: 52px 0px 32px; }
.faq-e-left { padding: 25px 5% 0; }
.faq-e-right { width: 50%; }

.bots-main-title { font-size: 20px; padding: 0 0 10px; text-align: center; color: #d3bef9; }
.bots-main-title i { margin-right: 2px; font-size: 15px; }
.bots-row { width: 50%; }
}
@media (max-width : 600px) {
.faq-e { padding: 48px 0px 30px; }
.faq-e-left { padding: 22px 4px 0; }

.bots-main-title { font-size: 19px;  }
.bots-main-title i { font-size: 14px; }
.bots-title { font-size: 13px; line-height: 50px; }
}
@media (max-width : 540px) {
.faq-wrap-title { padding: 24px 0 11px; font-size: 19px; }
.faq-wrap-sub-title { font-size: 12px; }
.fea-body { -webkit-column-count: 1; column-count: 1; }

.f-main { padding: 5px 0 26px; }
.f-main .faq-wrap-title { padding: 31px 0 15px; }

.bots { padding: 45px 0 50px; }
.bots-row { width: 100%; }
}
@media (max-width : 460px) {
.faq-e { padding: 43px 0 30px; }
.faq-e-left { padding: 18px 0px 0; line-height: 20px; }
.faq-e-left-title { font-size: 23px; padding-bottom: 8px; }
.faq-e-right { min-width: 100%; padding: 0 8px; }

.f-help-btns { margin: 15px 0 8px; width: 100%; display: block; float: left; }
.f-help-btns a { width: 100%; margin: 0 0 10px; padding: 8px 12px; }
.f-help-btns i { float: none; padding-right: 2px; }

.bots { padding: 40px 0 50px; }
.bots-main-title { font-size: 18px; }
.bots-main-title i { font-size: 13px; margin-right: 1px; }
}
@media (max-width : 420px) {
.faq .wakka { padding: 0 12px; }
.faq-wrap-title { padding: 22px 0 11px; font-size: 18px; }
.fea-slot { margin: 0 0px 11px; }

.f-title { font-size: 13px; }
.f-text { font-size: 13px; line-height: 20px; padding: 14px 16px 20px;  }
}

/*---------- Guides ----------*/
.page-guides .footer-wrap { margin-left:150px; min-width: 260px; }
.page-guides #footer { min-width: 260px;  }
.page-guides .foo-row a { white-space: nowrap; }
.guides { margin-left: 150px; background: rgb(255 255 255 / 1%); overflow:hidden; }
.guides .wakka { min-height: 650px; min-width:250px; max-width: 100%; }
.g-menu { position: absolute; left: 0; top: 65px; bottom: 0; width: 150px; background: rgb(27 30 39 / 96%); z-index: 100; overflow-x: hidden; overflow-y: auto; border-right: 1px solid rgb(17 18 22 / 77%); }
.g-menu-title { font-family: effrasemi; float: left; padding: 10px 10px; background: rgb(105 107 133 / 4%); width: 100%; border-top: 1px solid rgb(0 0 0 / 21%); border-bottom: 1px solid rgb(0 0 0 / 21%); font-size: 12px; }
.g-menu a { float: left; width: 100%; padding: 10px 10px; font-size: 12px; color: #d7d6e9; position:relative; }
.g-menu a:hover { color: #ffbfd6; cursor:pointer; text-decoration:none; }
.g-menu .g-menu-top { padding-top: 14px; padding-bottom: 14px; }
.g-menu a span { width: 2px; position: absolute; left: 0; top: 0; bottom: 0; background: #b0e1ff; display:none; }
.g-menu-selected { color: #b0e1ff !important; }
.g-menu-selected span { display:block !important; }
@-moz-document url-prefix() { .g-menu { scrollbar-color: #11131a #15171e; } }
.g-menu ::-webkit-scrollbar { width: 8px; }
.g-menu ::-webkit-scrollbar-track { background: none; }
.g-menu ::-webkit-scrollbar-thumb { background: #11131a; }
.g-menu ::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

.g-top-title { text-align: center; padding: 35px 0 18px; font-size: 26px; font-family: chalet; color: #87c9fd; letter-spacing: .3px; }
.g-top-sub-title { color: #eee; font-family: effra; font-size: 14px; }
.g-body { position: relative; width: 100%; padding-bottom: 25px; letter-spacing: .3px; }
.g-img { float: left; width: 100%; overflow: hidden; border-radius: 6px; max-height: 245px; margin-bottom:20px; }
.g-img img { width: 100%; position: relative; top: -55px; }
.g-title { font-size: 19px; line-height: 22px; padding: 0px 0 8px; position: relative; top: 0; float: left; width: 100%; font-family: 'effrasemi'; }
.g-titles-green { color: #92dd9b; }
.g-text { font-size: 15px; line-height: 22px; padding: 0px 0px 35px; color: #dcdee7; clear: both; }
.g-tm { font-family: 'effrasemi'; color: #93d1ff; }
.g-xm, .g-p-row { padding-bottom: 28px; }
.g-text .g-xm:last-child { padding:0; }
.g-p-row p { padding: 11px 0px 3px; line-height: 19px; }
.g-tl { margin: 12px 0px; }
.g-tl b { font-family: 'effrasemi'; font-weight: normal; color: #8ecf91; }
.g-list div { padding: 4px 0 5px; }
.g-anchor { color: #8ecf91; cursor:pointer; }
.g-anchor i { display:inline-block; padding-right: 4px; }
.guide-article .g-tl b { color: #b1dfb2; }
.g-single-url { color: #d5b8a3; margin-top: -19px; display: block; zoom: .85; }

.g-nav { float:left; width:100%; padding-bottom: 70px; }
.g-nav a:hover { text-decoration:none; }
.g-nav-btn { border: 1px solid #eee; border-radius: 6px; padding: 17px 18px; font-family: effrasemi; width: 40%; cursor: pointer; transition: .27s; height: 67px; position: relative; }
.g-nav-btn:hover, .g-nav-btn:hover i { border-color:#90c2e9; color:#90c2e9; }
.g-nav-left { float:left; }
.g-nav-right { float:right; }
.g-nav-body { }
.g-nav-position { padding-left: 43px; text-align: right; position: absolute; right: 16px; top: 15px; overflow: hidden; left: 0px; }
.g-nav-right .g-nav-position { text-align: left; padding: 0 43px 0 18px; right: 0; left: 0; }
.g-nav-label { font-size: 14px; }
.g-nav-text { font-size: 12px; font-family:effra; max-width: 210px; }
.g-nav-left .g-nav-text { float: right; }
.g-nav-left i { font-size: 23px; left: -1px; top: 0px; }
.g-nav-right i { font-size: 23px; right: -1px; top: 0px; float:right; }

@media (min-width : 941px) and (max-width : 1160px) { .page-guides .foo-left { width: 43%;  } .page-guides .foo-app { width: 145px; } .page-guides .foo-row { width: 19%; } .page-guides .foo-row-last { width: 13%; } }
@media (max-width : 1280px) { .page-guides .footer-wrap { margin-left: 138px; } .guides { margin-left: 138px; } .g-menu { width: 138px; } .guides .wakka { padding: 0 24px; } }
@media (max-width : 1200px) { .g-top-title { padding: 33px 0 15px; font-size: 23px; } .g-img img { top:0; }  }
@media (max-width : 800px) {
.page-guides .footer-wrap { margin-left:112px; }
.guides { margin-left: 112px; }
.guides .wakka { padding: 0 18px; }
.g-menu { width:112px; top:45px; }
.g-menu a, .g-menu-title { font-size:10px; }

.g-top-title { padding: 27px 0 12px; font-size: 19px; }
.g-title { font-size: 16px; padding: 0px 0 2px; }
.g-text { font-size: 14px; line-height: 21px; }
.g-img { margin-bottom: 15px; }
.g-xm, .g-p-row { padding-bottom: 25px; }

.g-nav-btn { height: 54px; padding: 12px 14px; width: 48.5%; }
.g-nav-position { right: 12px; top: 10px; padding-left: 33px; }
.g-nav-right .g-nav-position { padding: 0 33px 0 12px; }
.g-nav-label { font-size: 13px; }
.g-nav-text { font-size: 11px; max-width: 100%; top:-2px; position: relative; }
.g-nav-btn i { font-size: 17px; right: -2px; top: 2px; }
.g-nav-left i {  left: -2px; }
}
@media (max-width : 610px) { .page-guides .footer-wrap { margin-left:62px; } .guides { margin-left: 62px; } .g-menu {  width:62px; border-right: 1px solid rgb(13 13 16 / 46%);text-align: center; } .g-menu a, .g-menu-title { padding: 10px 4px; font-size: 9px; } .g-top-title { padding: 24px 0 12px; font-size: 18px; } .g-top-sub-title { font-size: 12px; } .g-title { font-size: 15px; } .g-text { font-size: 13px; line-height: 20px; padding: 0px 0px 25px; } .g-p-row { padding-bottom:19px; } .g-p-row p { padding: 8px 0px 6px; line-height: 16px; } .g-nav-label { font-size: 12px; } }
@media (max-width : 520px) { .g-img { border-radius: 4px; margin-bottom: 12px; } .g-title { font-size: 14px; line-height: 22px; padding: 0; } .g-top-sub-title { font-size: 11px; } .g-text { font-size: 12px; line-height: 19px; } .g-xm { padding-bottom: 17px; } .g-p-row { padding-bottom: 14px; } .g-nav-label { font-size: 12px; } }
@media (max-width : 440px) { .g-img { margin-bottom: 10px; } .g-img img { width: 120%; left: -10%; } }
@media (max-width : 420px) { .page-guides .footer-wrap { margin-left:58px; } .page-guides .foo-app { width: 100%; } .guides { margin-left: 58px; } .g-menu { width: 58px; } .g-menu a, .g-menu-title { font-size:9px; } .g-menu .g-spontaneous { padding-left:2px; padding-right:2px; letter-spacing: -.25px; } }
@media (max-width : 420px) { .guides .g-nav { padding-bottom:45px; } .guides .g-nav-position { right: 9px; top: 8px; padding-left: 20px; } .guides .g-nav-right .g-nav-position {  padding: 0 15px 0 9px; right:0; } .guides .g-nav-text { font-size: 10px; top: -1px; } .guides .g-nav-label { font-size: 11px; } .guides .g-nav-btn {  height: 48px; padding: 12px 11px; } .guides .g-nav-btn i { font-size: 12px; right: -2px; top: 2px; } .guides .g-nav-left i { top: -2px; } }
@media (max-width : 380px) { .page-guides .footer-wrap { margin-left:54px; } .guides { margin-left: 54px; } .g-menu { width: 54px; } .g-menu a, .g-menu-title { font-size: 8px; } .g-img img { top: 0; width: 130%; left: -15%; }

}
@media (max-width : 440px) { .g-img img { width: 140%; left: -20%; } }

/*--------- Crypto Token ---------*/
.crypto { padding: 35px 0 0; overflow: auto; background: rgb(255 255 255 / .5%); background: #181a21; min-width: 320px; }
.crypto-page .stars { opacity: .07; z-index:0; pointer-events: none }
.crypto .fea-slot { float: left; border: 1px solid rgba(0, 0, 0, 0.4); }
.crypto .fea-title span { float:right; color: #fd9abc; font-size: 13px; }
.crypto .fea-text li { display: block; padding: 7px 0 2px; font-size: 14px; }
.crypto .fea-text li i { color: #707485; display: block; float: left; clear: both; font-size: 10px; padding-right: 7px; }
.crypto .fea-text li .crypto-ok { color: #84d584; }
.crypto-infinite  { overflow: hidden; display: flex; height:30px; width: 100vw; margin: 0 auto; display:none; }
.crypto-infinite a { height: 100px; min-width: 16%; text-align:center; animation: slide 15s linear infinite; }
@keyframes slide {  0% { transform: translate3d(-100vw, 0, 0);  } 100% {  transform: translate3d(100vw, 0, 0); } }
.crypto .fea-title, .crypto .fea-img { border-bottom: 1px solid rgba(0, 0, 0, 0.13); }

.crypto .faq-wrap { background: #15171e; background: #1b1d24; box-shadow: 0 1px rgb(255 255 255 / 1%), 0 1px rgb(255 255 255 / 1%) inset; }
.crypto .faq-wrap-title { font-size:23px; letter-spacing:.5px; }
.crypto .f-slot { background:#1c1e25; background:#21242d; width:99.5%; border: 1px solid rgba(0, 0, 0, 0.4); }
.crypto .f-slot b { font-family:effrasemi; font-weight:normal; }
.crypto .f-slot a { color: #8ac78d; display: block; padding: 5px 0 0; cursor:pointer; }
.crypto .f-slot li { padding: 2px 0 18px; line-height: 17px; font-size: 14px; display: block; }
.crypto .f-title { line-height:51px; }
.crypto .faq-e { background: #1d1f26; border-bottom: 1px solid rgba(0, 0, 0, 0.38); }
.crypto .f-main { border: 0; background: #15171e; background: #1b1d24; box-shadow: 0 1px rgb(255 255 255 / 1%) inset; padding: 5px 0 60px; }
.crypto .faq-e-right { max-width: 430px; }
.crypto .faq-e-left-i { margin-top:1%; }
.faq-e-contract { clear: both; font-size: 12px; color: #9d9d9d; padding-top: 13px; }

.token { overflow: auto; border-bottom: 1px solid rgb(0 0 0 / 24%); box-shadow: 0 1px rgb(255 255 255 / 1%); padding-bottom: 46px; }
.token-img { width:160px; float:left; }
.token-img img { width:100%; }
.token-r { margin-left:175px; }
.token-menu { margin-top: 22px; float: left; width: 100%; margin-bottom: 0px; overflow: hidden; border-radius: 6px; border: 1px solid rgb(0 0 0 / 25%); }
.token-menu a {float:left;width:25%;font-size:14px;padding:16px 14px 14px;position:relative; border-right:1px solid rgb(0 0 0 / 27%);background:#1f222b;box-shadow:1px 1px rgb(255 255 255 / 1%) inset;z-index:5;text-align:center; }
.token-menu a:hover { text-decoration:none; color: #85cd88; }
.token-title { font-family:chalet; font-size: 22px; padding: 32px 0 5px; }
.token-descr { font-size: 15px; }
.token-bar { background: #323c5b; height: 6px; position: relative; }
.token-progress { position: absolute; left: 0; top: 0; bottom: 0; background: #56c4fb; width: 2%; }
.token-bar-1 .token-progress { width: 2%; }
.token-bar-2 .token-progress { width: 2%; }
.token-bar-3 .token-progress { width: 2%; }
.token-bar-4 .token-progress { width: 2%; }
.token-bar-5 .token-progress { width: 2%; }
.token-bar-6 .token-progress { width: 2%; }

.crypto-data { display: inline-block; width: 99.5%; margin-bottom: 18px; border-radius: 5px; border: 1px solid rgb(0 0 0 / 25%); }
.crypto-data-title { font-family: effrasemi; font-size: 14px; padding: 16px 14px 14px; position: relative; text-transform: uppercase; border-bottom: 1px solid rgb(0 0 0 / 29%); background: #21242d; border-radius: 6px 6px 0 0; box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; }
.crypto-data-body { color: #dcdee7; clear: both; background: #1c1e25; background: #1f222b; border-radius: 0 0 6px 6px; }
.crypto-data-bracket { width: 33.33333%; float: left; padding: 28px 4px; background: rgb(0 0 0 / 9%); text-align: center; }
.crypto-data-bracket:nth-child(even) { background:none; }
.crypto-data-bracket span { color: #b8b1d9; font-size: 13px; }
.crypto-data-bracket div { font-family: effrasemi; font-size: 15px; }
.crypto-data a { text-decoration:none; cursor:pointer; }
.crypto-data a:hover span { color:#87c18a; transition:.27s; }

@media (max-width: 1280px) { .crypto .faq-wrap-title { font-size:22px; letter-spacing:0; padding:40px 0 15px; } .crypto-data-bracket div { font-size:14px; } .crypto-data-bracket span { font-size:12px; } .crypto .faq-e-left-i { margin-top:3%; } }
@media (max-width: 1160px) { .crypto { padding: 30px 0 0;  } .token-img { width: 145px; } .token-r { margin-left: 161px; } .token-title { font-size: 21px; padding: 30px 0 5px; } .token-descr { font-size: 14px; } .token-menu a { font-size: 13px; padding: 13px 14px 13px; } .crypto .fea-text li { font-size: 13px; } }
@media (max-width: 950px) { .fea-body { -webkit-column-count: 1; column-count: 1; } .crypto .fea-text li { font-size: 14px; } }
@media (max-width: 925px) { .token-title {  padding: 20px 0 5px; } }
@media (max-width: 800px) {
.crypto { padding: 24px 0 0; }
.token-img { width: 125px; }
.token-r { margin-left: 140px;  }
.token-title { font-family: chalet; font-size: 19px; padding: 12px 0 4px; }
.token-descr { font-size: 13px; }
.token-menu a { font-size: 13px; padding: 12px 6px 12px; }

.crypto .faq-wrap-title { font-size: 20px; padding: 33px 0 15px; }
.crypto .faq-wrap-features { padding-bottom: 22px; }
.crypto .f-main { padding: 5px 0 44px; }

.crypto .f-slot, .crypto-data { width:100%; }
.crypto-data-title { text-transform: none; font-family: effra; }
}

@media (max-width: 670px) {  .token-title { font-family: chalet; font-size: 19px; padding: 8px 0 3px; } }
@media (max-width: 540px) { .token { padding-bottom: 32px; } .token-r { margin-bottom: 2px; } .token-title { padding-top:0; font-size: 18px; } .token-menu a { width: 50%; font-size: 12px; padding: 10px 6px 9px; } .token-menu-btn-1, .token-menu-btn-2 { border-bottom: 1px solid rgb(0 0 0 / 27%); } .token .token-menu-btn-2, .token .token-menu-btn-4 { border-right:0; }  .crypto .faq-wrap-title { font-size: 19px; padding: 34px 0 12px; } }
@media (max-width: 480px) { .token-img { width: 110px; } .token-r { margin-left: 125px; } .crypto .wakka { padding: 0 14px; } .crypto .fea-text li { font-size: 13px; padding: 5px 0 1px; } .crypto .fea-text li i { font-size: 9px; padding-right: 6px; } .crypto .faq-wrap-features { padding-bottom: 20px; } .crypto .f-main { padding: 5px 0 36px; } }
@media (max-width: 420px) { .crypto-data-title { font-size: 13px; } }
@media (max-width: 400px) { .crypto-data-bracket div { font-size: 15px; margin-bottom: -2px; } .crypto-data-bracket span { font-size: 11px; }  .crypto-data-bracket.af-br1 { background: rgb(0 0 0 / 9%) !important; } .crypto-data-bracket.af-br2 { background:none; } .crypto-data-bracket { width: 50%; } }

.token-home { padding-top: 35px; border: 0; box-shadow: none; padding-bottom:0; margin-bottom:-2px; background: rgb(255 255 255 / .7%); overflow: hidden; display:none; }
.token-title i { font-size: 13px; float: right; padding: 15px; margin: -15px; cursor: pointer; transition:.3s; position: relative; top: 5px; }
.token-title i:hover { color: #ef82a7; }
@media (max-width: 1160px) { .token-home { padding-top:30px; } .token-title i { font-size: 11px; } }
@media (max-width: 800px) { .token-home { padding-top:24px; padding-bottom: 0; margin-bottom: -16px; }  .token-home .wakka { padding: 0 18px; } .token-title i { font-size: 10px; }  }
@media (max-width: 680px) { .token-home .wakka { padding: 0 15px; } .token-home { margin-bottom: -20px; } }
@media (max-width: 460px) { .token-home .wakka { padding: 0 12px; } .token-home { margin-bottom: -22px; } }

/*--------- Blog Browse ---------*/
.blog { overflow: hidden; background: rgb(255 255 255 / 1%);  }
.blog-top-title { text-align: center; padding: 35px 0 18px; font-size: 25px; font-family: chalet; color: #87c9fd; }
.blog-top-sub-title { color: #eee; font-family: effra; font-size: 14px; }

.blog-cat { float: left; position: relative; top: 6px; }
.blog-cat a { cursor: pointer; transition: .27s; padding: 7px 10px; background: rgb(15 15 22 / 92%); border-radius: 5px; font-size: 11px; margin-right: 6px; display: block; float: left; }
.blog-cat a:hover { text-decoration:none; color: #9ed4ff; }
.blog-s { margin-bottom: 12px; width: 272px; float: right; }
.blog-s-body { padding: 16px 15px; display: block; position: relative; border: 1px solid rgb(0 0 0 / 50%); background: rgb(33 35 43); border-radius: 4px; }
.blog-s-submit { position: absolute; right: -1px; top: -1px; bottom: 0; width: 38px; text-align: center; }
.blog-s-go { z-index: 5; font-size: 11px; line-height: 26px; position: relative; top: 6px; }
.blog-s-submit:hover { color: #93cf97; transition: .27s; cursor:pointer; }
.blog-s-submit input { position: absolute; left: 0; top: 0px; bottom: 0; right: 0px; width: 100%; background: none; border: 0; cursor: pointer; transition: .15s all linear; }
.blog-s-input { position: absolute; left: 0; top: 0; bottom: 0; right: 38px; }
.blog-s-input input { font-size: 12px; width: 100%; background: none; height: 100%; padding: 0px 0px 2px 11px; }
.blog-cat a.blog-cat-selected {
    background: #292952 !important;
    color: #fff !important;
    font-weight: 500;
}


.blog-rows { margin: 0 -6px; }
.boo-row { height: 100%; position: relative; width: 33.3333333%; float: left; }
.boo-body { border: 1px solid rgb(0 0 0 / 50%); background: rgb(33 35 43); margin: 0 6px 12px; border-radius: 5px; overflow: hidden; }
.boo-top { width: 100%; position: relative; float: left; overflow: hidden; }
.boo-row img { width: 100%; float: left; height:100%; display: block; font-size: 0; }
.boo-wrap { line-height: 18px; position: relative; float: left; width: 100%; overflow: hidden; padding: 0 11px 65px; }
.boo-title { font-size: 13px; padding: 12px 0 1px; display: block; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .27s; cursor: pointer; }
.boo-title:hover { text-decoration: none; color: #9ed4ff; }
.boo-auth { display: block; float: left; width: 100%; position: relative; margin: 0 0 10px; font-family: effra; font-size: 11px; border-bottom: 1px solid rgb(0 0 0 / 22%); padding: 0px 0px 9px; color: #888799; box-shadow: 0 1px rgb(255 255 255 / 1.4%); }
.boo-auth a { position: relative; padding-right: 5px; max-width: 95px; display: block; float: left; }
.boo-auth a:hover { color: #9e9e9e; text-decoration:none; }
.boo-date { float: right; }
.boo-excerpt { width: auto; padding: 2px 0px 0 0; height: auto; position: relative; float: left; font-size: 12px; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }
.boo-more { }
.boo-more a { height: 32px; line-height: 33px; background: #1c1e25; position: absolute; bottom: 11px; text-align: center; transition: .27s all linear; font-size: 12px; left: 11px; right: 11px; border-radius: 4px; color: #c7bba3; font-family: 'effrasemi'; }
.boo-more a:hover { text-decoration:none; background:#1a1c23; }

@media (max-width : 980px) { .boo-row { width:50%; } }
@media (max-width : 800px) { .blog-top-title { padding: 23px 0 18px; font-size: 20px; } .blog-top-sub-title { font-size: 12px; padding-top: 2px; font-style: italic; } }
@media (max-width : 700px) { .blog-top-title { padding: 20px 0 18px; font-size: 18px; } .blog-top-sub-title { font-size: 11px; } }
@media (max-width : 650px) { .blog-s { display:none; } .blog-top-title { padding-bottom:0; } .blog-cat { width:100%; text-align:center; margin:6px 0 20px; } .blog-cat a { font-size:10px;  margin-right:4px; display:inline-block; float:none; } }
@media (max-width : 620px) { .blog .wakka { max-width: 100%; padding: 0 15px; } .boo-body { margin: 0 5px 10px; } .boo-wrap { padding: 0 10px 62px; } .boo-title { font-size: 12px; padding: 8px 0 0px; } .boo-auth { font-size:10px; padding: 0 0 7px; margin: 0 0 7px; } .boo-excerpt { font-size: 11px; line-height: 16px; } .boo-more a { height: 29px; line-height: 30px; left: 10px; right: 10px; bottom:10px; font-size: 11px; } }
@media (max-width : 520px) { .boo-title { font-size: 11px; padding: 7px 0 0px; } .boo-auth { margin: -4px 0 7px; padding: 0px 0px 6px;  font-size: 9px; } }
@media (max-width : 450px) { .blog-top-title { padding-top:18px; } .blog .wakka { padding: 0 11px; } .blog-rows { margin: 0 -4px; } .boo-body { margin: 0 4px 8px; } .boo-excerpt { font-size: 10px; line-height: 15px; padding: 0; } }
@media (max-width : 400px) { .boo-row { width:100%; } .boo-title { font-size: 12px; } }

/*--------- Blog Single ---------*/
.bs { float: left; width: 100%; background: rgb(255 255 255 / 1%); }
.bs-title { padding: 35px 0 10px; font-size: 25px; font-family: chalet; color: #90ceff; }
.bs-title h1 { font-size: 25px; }
.bs-info { font-size: 13px; border-bottom: 1px solid rgb(0 0 0 / 25%); clear: both; float: left; width: 100%; padding: 4px 0 12px; box-shadow: 0 1px rgb(255 255 255 / 1%); margin-bottom: 15px; color: #e7bf81; }
.bs-cat { float:left; }
.bs-date { float:right; }
.bs-info i { padding-right:3px; }
.bs-img {  float: left; width: 100%; overflow: hidden; border-radius: 6px; max-height: 225px; margin-bottom: 9px; }
.bs-img img { width: 100%; position: relative; top: -55px; }
.bs-content { line-height: 25px; font-size: 15px; clear: both; letter-spacing: .25px; }
.bs-content b {  font-weight: normal;  font-family: effrasemi;  display: block;  font-size: 17px;  margin-top: 14px;  color: #90ceff; }
.bs-content u {  font-style: italic;  text-decoration: none;  color: #ffdfbd; }
.bs-content br { margin-top:10px; display:block; }
.x-title { font-size: 18px; margin-bottom: 0px; font-family: effrasemi; }
.bs .g-nav { margin:0; padding: 26px 0 55px; }

.bsrec { float: left; width: 100%; padding: 0; margin: 0 0 70px; }
.bsrec-pad { float: left; padding: 0; width: 100%; border: 1px solid rgb(0 0 0 / 50%); background: rgb(33 35 43); border-radius: 6px; overflow: hidden; }
.bsrec-title { font-size: 14px; font-family: effrasemi; background: rgb(37 39 47); border-bottom: 1px solid rgb(0 0 0 / 28%); padding: 14px 13px 13px; box-shadow: 0 1px rgb(255 255 255 / 1%), 1px 1px rgb(255 255 255 / 1%) inset; }
.bsrec-slot { padding: 6px; position: relative; width: 100%; clear: both; height: 67px; border-bottom: 1px solid rgb(0 0 0 / 25%); box-shadow: 0 1px rgb(255 255 255 / 1%); }
.bsrec-slot:hover a, .bsrec-a:hover { text-decoration:none; color: #9ed4ff; }
.bsrec-slot:last-child { border-bottom:0; box-shadow:none; }
.bsrec-slot img { float: left; width: 54px; height: 54px; border-radius: 3px; position: absolute; }
.bsrec-a { display: block; font-size: 13px; font-family: effra; line-height: 22px; position: relative; padding: 15px 0 0 65px; overflow: hidden; transition: all 0.03s linear; color: #eee; text-overflow: ellipsis;
 white-space: nowrap; overflow: hidden; }

.bs .blog-cat { position: relative; top: 0; margin: 0 -.25% 8px; overflow:hidden; float: none; width: auto; display: block; }
.bs .blog-cat a { cursor: pointer; transition: .27s; padding: 10px 10px; border-radius: 5px; font-size: 11px; display: block; float: left; width: 24.5%; background: rgb(37 39 47); border-bottom: 1px solid rgb(0 0 0 / 25%); border: 1px solid rgb(0 0 0 / 50%); margin: 0 .25%; }
.bs .blog-s { width: 100%; float: left; margin: 0 0 8px; display:block; }
.bs .blog-s-body { padding: 20px 15px; }
.bs .blog-s-submit { width: 42px; }
.bs .blog-s-go { font-size: 14px; top: 9px; }
.bs .blog-s-input { right: 44px; }
.bs .blog-s-input input { box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; }

@media (max-width : 1280px) { .bs-title { padding: 30px 0 10px; } .bs-title h1 { font-size: 22px; } }
@media (max-width : 800px) { .bs-title { padding: 22px 0 7px; } .bs-title h1 { font-size: 19px; } .bs-content { font-size: 13px; line-height: 22px; margin-bottom: 12px; } .bs-content b { font-size: 16px;  margin-top: 10px; } .bs .g-nav { padding: 20px 0 11px; } .bs .blog-cat {  margin: 0 -.5% 8px; } .bs .blog-cat a { width: 24%; margin: 0 .5%; } .bsrec { margin: 0 0 60px; } .bsrec-title { font-size: 14px; padding: 14px 13px 13px;  } .bsrec-slot img { width: 48px; height: 48px;  } .bsrec-slot { height: 61px; } .bsrec-a { padding: 12px 0 0 58px; } }
@media (max-width : 680px) { .bs-title { padding: 20px 0 6px; font-size: 23px; } .bs-title h1 { font-size: 18px; } .bs-img { max-height: 190px; } }
@media (max-width : 480px) { .wakka { padding: 0 15px; } .bs-content { margin-bottom: 10px; } .bs-title { padding: 20px 0 5px; font-family:effrasemi; } .bs-title h1 { font-size: 16px; } .bs-info { font-size: 11px; padding: 1px 0 9px;  } .x-title { font-size: 17px; } }
@media (max-width : 460px) { .bs .blog-cat { margin: 0 -.25% 4px; } .bs .blog-cat a { width: 49%; margin: 0.5%; text-align: center; } .bs .blog-s { margin: 0 0 4px; } .bs .g-nav { padding:20px 0 9px; } .bsrec { margin: 0 0 52px; } }

/*--- Social Share Area ---*/
.pop-info { opacity:0; filter:alpha(opacity=0); -moz-opacity:0; top: 41px; right: -2px; visibility: hidden; backface-visibility: hidden; position: absolute; height: 27px; max-width:500px; z-index:10; line-height: 17px; }
.s-icon:hover .pop-info, #pin:hover .pop-info { visibility: visible; opacity:1; filter:alpha(opacity=100); -moz-opacity:1; transition-delay:.5s; }
.pop-body { color:#fff; background: #DA4F4F; text-overflow: ellipsis; white-space:nowrap; font-weight:bold; padding: 6px 10px; font-style:normal; font-size:11px; font-family:verdana,arial,helvetica,sans-serif; border-radius:2px; }
.pop-edge { width: 1px; border-left: 6px solid transparent;border-bottom: 7px solid #DA4F4F; border-right: 7px solid transparent; position: absolute; top: -7px;right: 9px; }
.social-wrap { margin-top: -1px; position: absolute; right: 0; top: 0; }
.social-slot, #pin { color: #F6F6F6; width: 30px; height: 30px; float: left; position: relative; margin-left: 6px; }
.s-icon { width: 30px; height: 30px; position: absolute; left: 0; cursor: pointer; background: url('../images/social.png') no-repeat; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; opacity: 0.94; }
.social-slot .s-icon:hover, #pin:hover .s-icon { top:-1px; }
#pin a, #pin span { z-index:55; height:auto !important; width:auto !important; position:absolute !important; opacity: 0.00001 !important; filter:alpha(opacity=00001) !important; -moz-opacity:.00001 !important; left: 0px !important; top: 0 !important; right: 0 !important; bottom: 0 !important; }
.tumblr { background-position: -150px 0; }
.facebook {  background-position: -60px 0; }
.twitter { background-position: -90px 0;  }
.google { background-position: -30px 0; }
.pinterest { background-position: -120px 0;  }
.email { background-position: -210px 0; }

/*---------- Privacy ----------*/
.basic { font-size: 14px; padding: 48px 0 55px; background: rgb(255 255 255 / 1%); line-height: 23px; letter-spacing: .5px; }
.basic .wakka { max-width:1280px; }
.basic-main-title {font-family: effrasemi;font-size: 20px;letter-spacing: 1px;text-align: center;margin-bottom: 32px; line-height: 24px; }
.basic-sub-title { text-align: center; color: #999; font-size: 12px; }
.basic-rt, .basic b {font-weight: normal;font-family: 'effrasemi';color: #d7cba7;font-size: 16px;margin-bottom: -1px; margin-top: 15px; }
.basic b { font-size: 13px; color: #d7cba7; color: #bdc1e8; font-style: italic; }
.basic br {margin-bottom: 11px;display: block;position: relative;}
.basic a { color: #42d7c9; }
.basic-span-wrap {margin: -6px 0 -4px;}
.basic span {padding: 4px 0;display: inline-block;}
.ba-t {font-family: effrasemi;display: inline;color: #42d7c9;color: #d7cba7;}

@media (max-width : 800px) {
.basic { font-size: 13px; padding: 29px 0 45px; line-height: 20px; }
.basic-main-title { font-size:16px; margin-bottom: 16px; }
.basic-sub-title { font-size: 11px; margin-top: -6px; }
.basic-rt, .basic b { font-size: 14px; margin-top: 10px; }
.basic b { font-size: 12px; }
}
@media (min-width : 901px) { .basic .wakka { padding: 0 20px; } }
@media (max-width : 900px) { .basic .wakka { padding: 0 16px; } }
@media (max-width : 500px) {
.basic { font-size: 12px; padding: 25px 0 40px; }
.basic-main-title { font-size:14px; margin-bottom: 18px; }
.basic-sub-title { font-size: 10px; }
.basic-rt, .basic b { font-size: 13px; }
.basic b { font-size: 12px; }
 }

/*---------- Alerts ----------*/
.alerto { min-width: 40px; text-align: center; position: fixed; font-family: effrasemi;font-size: 15px; margin: 4px; height: 56px; padding: 16px 24px; border-radius: 7px; background: #272b37; background: #2b2f3d; right: 0; left: auto; width: calc(100% - 8px); box-shadow:0 3px 3px #00000047; border: 2px solid #5d7ab3; z-index: 99999; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.alerto span { z-index:5; }
.alerto-fail { border-color: #e65454; background: #3c2525; background: #273038; background: #2b2f3d; border-color: #e63c5b; }
.alerto::before { content:'\e80d'; width:22px; position:absolute; right:-1px; top:-1px; background:#5d7ab3; font-family: "fontello"; align-content:center; font-size:7px; height:22px; border-radius:0 0 0 4px; cursor:pointer; }
.alerto-fail::before { background: #e63c5b; }
@media (max-width : 800px) {
.alerto { font-size:13px; height:46px; padding:13px 7px; margin:3px; width:calc(100% - 6px); border-radius:4px; }
.alerto::before { right:-1px; top:-2px; width:15px; font-size:6px; height:15px; }
}
@media (max-width : 480px) { .alerto::before { right: -1px; top: -2px; width: 14px; font-size: 5px; height: 14px; } }

.notice { border-bottom: 1px solid #00000054; border-top: 0; background: #1b1d25; box-shadow: 0 1px rgb(255 255 255 / 1%); padding: 14px 45px 17px 10px; font-style: italic; position:relative; line-height:13px; }
.notice i { font-size: 8px; position: absolute; right: 0; padding: 18px; top: 0; color: #b5bad7; cursor:pointer; }
.notice span { font-size: 12px; color: #b5bad7; }
@media (max-width : 800px) { .notice { padding-top:11px; padding-bottom:14px; } .notice span { font-size: 12px; } .notice i {  padding: 16px; } }
@media (max-width : 700px) { .notice { line-height: 12px; padding-top: 10px; padding-bottom: 12px; } .notice span { font-size: 11px; }}

/*---------- Animated ----------*/
.bouncy-wrap { display:inline-block; }
.bouncy { display: inline-block; background: #eee; height: 5px; width: 5px; border-radius: 25px; margin-right: 3px; margin-top: 0; }
.bouncy-1 { -webkit-animation-name: bounce; -webkit-animation-delay: 1s; -webkit-animation-duration: 1.2s; -webkit-animation-iteration-count: infinite; }
.bouncy-2 { -webkit-animation-name: bounce; -webkit-animation-delay: 1.1s; -webkit-animation-duration: 1.2s; -webkit-animation-iteration-count: infinite; }
.bouncy-3 { -webkit-animation-name: bounce; -webkit-animation-delay: 1.2s; -webkit-animation-duration: 1.2s; -webkit-animation-iteration-count: infinite; }
@-webkit-keyframes bounce { 0% { transform: translateY(0); } 40% { transform: translateY(4px); } 60% { transform: translateY(-5px); } 80%{ transform: translateY(0); } }
.spinner { width: 50px;aspect-ratio: 1;display: grid;border: 3px solid #0000;border-radius: 50%;border-color: #eee #0000;animation: spinner 1s infinite linear; margin:auto; }
.spinner::before, .spinner::after { content: "";grid-area: 1/1;margin: 2px;border: inherit;border-radius: 50%; }
.spinner::before { border-color: #47bbef #0000;animation: inherit; animation-duration: .5s;animation-direction: reverse; }
.spinner::after { margin: 8px; }
@keyframes spinner { 100%{transform: rotate(1turn)} }

/*---------- Global ----------*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
input[type=number] { -moz-appearance: textfield; }
body .clear { clear:both; }
body .xb { border:0; }
body .xbl { border-left:0; }
body .xbr { border-right:0; }
body .xbt { border-top:0; }
body .xbb { border-bottom:0; }
body .box { box-shadow:none; }
body .h:hover { text-decoration:underline; }
body .mr { margin-right:0 !important; }
body .pad { padding:0; }
body .fl { float:left; }
body .fr { float:right; }
body .relative { position:relative; }
body .center { text-align:center; }
body .overflow { overflow:auto; }
.overflow-hidden { overflow:hidden; }
body .none { display:none; }
body .line-x { line-height:0; }
body .cursor { cursor:auto !important; }
body .demi { background: none; border: 0; box-shadow: none; margin:0; padding:0; }
input[type="radio"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; -ms-appearance: checkbox; }
.flip-lr { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: fliph; filter: fliph; }
.stone { display:block !important; }
.uppercase { text-transform: uppercase; }
.capital { text-transform: capitalize; }
.pointer { cursor:pointer; }
body .absolute { position: absolute; top:0;bottom:0;left:0;right:0; }
.super-hide { display:none !important; }





/*------ Login Pop ------*/
.login { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 10000; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);  overflow-y: auto;}
.login-body { background: #fff; width: 318px; margin: auto; margin-bottom: 82px; border-radius: 6px; overflow: hidden; top: 33px; position: relative; }
.login-top { float: left; width: 100%; padding:0; text-align: center; font-size: 15px; font-family: effrasemi; }
.login-top div { width: 33.333333333%; float: left; cursor: pointer; padding: 13px 0; background: #ed3d5c; }
.login-top div:hover { opacity: .96; }
.login-close { transition:.3s; position: absolute;z-index:10; right: 14px; top: 56px; background: #fff; padding: 2px 7px; font-size: 14px; border-radius: 4px; border:2px solid #ed3d5c; color:#ed3d5c; font-family:'effrabold'; cursor:pointer; }
.login-close:hover { background: #ed3d5c; color: #fff; }
.login-img { position: relative; padding: 20px; clear: both; }
.login-img img { width: 160px; margin: auto; }
.login-title { text-align: center; width: 100%; font-family: effrabold; margin: -3px 0 4px; color: #222; font-size: 21px; }
.login-sub-title { text-align: center; width: 100%; font-family: effra; margin: 4px 0 12px; font-size: 15px; color: #999; }
.login-input { padding:10px 14px 4px; }
html .login-input input { width: 100%; border: 2px solid #e5e3e3; padding: 13px; border-radius: 6px; font-family: effra; font-size: 14px; background: #fbfbfb; color: #3f4041; }
html .login-input input:hover, .login-input input:active { border-color:#ddd; }
html .login-input input:focus { border-color: #d9d9d9; }
html .login-input input::-webkit-input-placeholder {color: #aeb0b5; }
html .login-input input::-moz-placeholder {color: #aeb0b5;}
.login-error { font-size: 12px; color: #ed3d5c; position: relative; top: 2px; display:none; }
.login-btn { background: #ed3d5c; padding: 11px 20px 12px; display: block; margin: auto; color: #fff; border: 0; font-size: 16px; font-family: effrabold; cursor: pointer; text-align: center; margin-top: 20px; }
.login-btn:hover { opacity:.96; }

.login-top i { font-size: 14px; padding-right: 1px; top: 0px; }
.login-show .login-top-b2 i { display:inline; }
.login-show .login-top-b1 i, .login-show .login-top-b3 i, .login-show .register-view, .login-show .forgot-view { display:none; }
.login-show .login-view { display:block; }
.register-show .login-top-b1 i { display:inline; }
.register-show .login-top-b2 i, .register-show .login-top-b3 i, .register-show .login-view, .register-show .forgot-view { display:none; }
.register-show .register-view { display:block; }
.forgot-show .login-top-b3 i { display:inline; }
.forgot-show .login-top-b2 i, .forgot-show .login-top-b1 i, .forgot-show .login-view, .forgot-show .register-view { display:none; }
.forgot-show .forgot-view { display:block; }

@media (max-width : 480px) { .login-body { width: auto; top: 0; margin: 14px; min-width: 300px; } }


/*------ General Pop ------*/
.pop-data { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; padding: 30px; overflow-y: auto; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); min-width: 320px; z-index: 9999; }
.pop-data-body { position: relative; top: 0; left: 0; right: 0; max-width: 600px; width: 100%; margin: auto; background: #222531; border-radius: 6px; padding: 25px; border: 4px solid #393e53; box-shadow: 2px 2px 4px rgb(0 0 0 / 20%); overflow: hidden; }
.pop-data-cancel { font-size: 12px; position: absolute; right: 15px; top: 15px; padding: 18px 20px 15px 22px; margin: -15px -15px; cursor: pointer; color: #eee; transition: .27s; z-index:10; }
.pop-data-cancel:hover { cursor:pointer; color: #f790a9; }
.pop-data-title { font-family: effrasemi; font-size: 21px; margin-bottom: 30px; }
.pop-data-info { font-style: italic; margin-bottom: 12px; font-size: 13px; color: #b3bad7; }
.pop-data-input { margin-bottom: 25px; }
.pop-data-input-label { font-size: 14px; font-family: effrasemi; }
.pop-data-input-label span { color: #F44336; }
.pop-data-input input { padding: 13px 15px; width: 100%; background: #2f3343; margin-top: 3px; border-radius: 5px; font-size: 13px; }
.pop-data-textarea { width: 100%; min-height: 150px; }
.pop-data-textarea textarea { background: #2f3343; min-width: 100%; max-width: 100%; min-height: 150px; padding: 10px 12px; margin-top: 3px; border-radius: 5px; font-size: 13px; }
.pop-data-switch { margin-top: 26px; margin-bottom:30px; float:left;position: relative; width: 100%; }
.pop-data-switch-label { float: left; font-size: 13px; position: relative; line-height: 22px; }
.pop-data .switch { top:1px; width: 44px; height: 20px; }
.pop-data .switch span { height: 12px; width: 12px; left: 5px; bottom: 4px; }
.pop-data .switch-on span { right:5px; }

.pop-data-btn { clear: both; width: 100%; height: 40px; font-family: effrasemi; text-align: center; line-height: 41px; border-radius: 5px; float: left; background: #525b85; font-size: 14px; transition: .27s; cursor: pointer; }
.pop-data-btn:hover { background: #555e87; }

.pop-data-error { font-size: 12px; color: #ff91a0; position: relative; top: 2px; display:none; }

/*------ Chats Moderation ------*/
.pop-chats { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); min-width:320px; z-index: 9999; overflow-y: auto; }
.pop-chats-body { position: relative; max-width: 700px; width: 90%; top: 25px; left: 0; right: 0; margin: auto auto 75px; background: #222531; border-radius: 6px; padding: 25px; border: 4px solid #393e53; box-shadow: 2px 2px 4px rgb(0 0 0 / 20%); }
.pop-chats-cancel { font-size: 12px; position: absolute; right: 15px; top: 15px; padding: 15px 20px 15px 22px; margin: -15px -15px; cursor: pointer; color: #eee; transition: .27s; }
.pop-chats-cancel:hover { cursor:pointer; color: #f790a9; }
.pop-chats-top { text-align: center; margin-bottom: 21px; }
.pop-chats-img img { cursor:pointer; width: 64px; height: 64px; border-radius: 100%; margin: auto; }
.pop-chats-img i { position: absolute; margin-left: -67px; margin-top: 12px; color: #f3a1c2; font-size: 19px; }
.pop-chats-top .pop-chats-heart-r {  margin-left: 48px; }
.pop-chats-title { font-size: 17px; display: block; padding: 7px 0 0; }

.pop-chats-scroll { /*overflow-y: auto; overflow-x: hidden; max-height: 539px; */ }
.pop-chats-row { float: left; width: 100%; border-top: 1px solid #1c1f29; box-shadow: 0px 1px rgb(255 255 255 / 2%) inset; padding:6px 0; cursor:pointer; }
.pop-chats-row-img { float: left; }
.pop-chats-row-img img { width: 64px; height: 64px; border-radius: 100%; padding: 8px; margin-left: -8px; }
.pop-chats-row-r { padding-left: 58px; position: relative; padding-top: 10px; font-size: 14px; }
.pop-chats-row-icons { padding: 8px 0 8px 8px; transition: .27s; float: left; font-size: 12px; color: #878fad; }
.pop-chats-view { padding: 7px 18px 7px 7px; margin: -7px 15px -7px -14px; float: left; cursor: pointer; transition: .27s; }
.pop-chats-view:hover { color: #9fc2ed; }
.pop-chats-view i { font-size: 11px; padding-right:3px; }
.pop-chats-del { padding: 10px 14px; float: left; margin: -10px; cursor: pointer; transition: .27s; }
.pop-chats-del:hover { color: #f59797; }
.pop-chats-del i { font-size: 9px; padding-right: 3px; top: -1px; }
.pop-chats-download { padding: 7px 13px 7px 7px; float: left; margin: -7px 11px -7px -14px; cursor: pointer; transition: .27s; }
.pop-chats-download i { font-size: 10px; padding-right:3px; }
.pop-chats-download:hover { color: #b6cbab; }
.pop-chats-row-descr { padding-top: 2px; font-size: 13px; position: relative; top: 3px; }
.pop-chats-row-time { float: right; font-size: 11px; padding-top: 9px; color: #878fad; color: #dfd2b7; }
.pop-chats-upload { color: #dfd2b7; text-align: center; font-size: 15px; width: 100%; padding: 22px 0px 19px; margin-bottom: -18px; border-top: 1px solid #1c1f29; box-shadow: 0px 1px rgb(255 255 255 / 2%) inset; cursor: pointer; clear: both; }
.pop-chats-upload i { font-size: 6px; display: inline-block; position: relative; top: -2px; padding-right: 3px; }
.pop-chats-upload:hover { color: #e5dcc9; }
.pop-chats-input {position: absolute;height: 20% !important;right: 0px;bottom: 0px !important;top: auto !important;z-index: 5;opacity: 0;filter: alpha(opacity=0);-moz-opacity: 0;width: 100%;padding: 0;font-size:0;cursor: pointer;}
/*------ Edit Profile Pop ------*/
.pop-edit-profile .pop-data-title { margin-bottom: 27px; }
.pop-edit-profile .pop-data-textarea { margin-bottom: 20px; }
.pop-edit-profile-email-label { border-bottom: 1px solid rgb(0 0 0 / 19%); box-shadow: 0 1px rgb(255 255 255 / 1%); padding-bottom: 6px; margin-bottom: 8px; font-size: 15px; font-family: effrasemi; }
.pop-edit-profile-switch { margin-top: 5px; margin-bottom: 5px; float: left; position: relative; width: 100%; }
.pop-edit-profile .pop-data-switch-label {  font-size: 13px; }
.pop-edit-profile .pop-data-btn { margin-top: 19px; }

/*------ Delete Pop ------*/
.pop-delete-profile .pop-data-btn { margin-top:5px; font-family: effrasemi; }

/*------ Queue Pop ------*/
.pop-que { text-align: center; z-index: 100000; }
.pop-que-title { font-family: effrasemi; font-size: 23px; }
.pop-que-time { font-size: 28px; padding: 13px 0px 0; color: #ff9abc; }
.pop-que-info { font-size: 15px; padding: 15px 0 15px; line-height: 19px; }
.pop-que-img { position: relative; }
.pop-que-img img { width: 100%; border-radius: 6px; }
.pop-que-slot { position: relative; margin: 0 0px 4px; border: 1px solid rgb(0 0 0 / 26%); background: rgb(41 45 61); border-radius: 6px; display: inline-block; transition: .27s; max-height: 100%; overflow: hidden; width: auto; text-align: left; margin-top: 10px; }
.pop-que-btn { margin-top:21px; background:#db9b3c; background:#7f2430; font-family:effrasemi; font-size:15px; height:42px; line-height: 42px; width: 100%; border-radius: 5px; float: left; transition: .27s; text-align: center; }
.pop-que-btn:hover { background: #555e87; text-decoration:none; cursor: pointer; }

.pop-que .fx-slot { position: relative; margin: 10px 0px 1px; border: 1px solid rgb(0 0 0 / 26%); background: rgb(41 45 61); border-radius: 6px; display: inline-block; transition: .27s; max-height: 100%; overflow: hidden; width: auto; text-align: left; }
.pop-que .fx-title { display:none; }
.pop-que .fx-img { float: left; max-height: 100px; overflow: hidden; margin: 8px 8px 0; border-radius: 6px; width: auto; border-bottom: 1px solid rgb(0 0 0 / 23%); }
.pop-que .fx-img img { margin:0; top:0; }
.pop-que .fx-text { font-size:13px;line-height:18px; padding: 0; margin:11px 16px 17px; float:left; clear:both; min-height:auto; color:#dcdee7; background:none;line-clamp: 6; -webkit-line-clamp:6; letter-spacing: .2px; }
.pop-que .fx-slide-title { letter-spacing: 4px;  font-size: 10px; }
.pop-que .z-navi-wrap { position:relative; margin:0; padding:0; bottom:0;top:0; }
.pop-que .z-navi-slot { width: 8px; height: 8px; border: 0; background: #4b5271; margin-left: 3px; margin-right:2px; }
.pop-que .z-navi { background: #737ca3; width: 8px; height: 8px; left: 0; top: 0; }
@media (max-width : 800px) { .pop-que .fx-text { font-size: 12px; line-height: 17px; margin: 10px 17px 15px; letter-spacing:0; } .pop-que-info { font-size: 14px; } }
@media (max-width : 740px) { .pop-que .fx-text { font-size: 13px; letter-spacing:.2px; } }
@media (max-width : 680px) { .pop-que .fx-text { font-size: 12px; margin: 8px 14px 14px; } .pop-que .z-navi-slot { width: 7px; height: 7px; }.pop-que .z-navi { width: 7px; height: 7px; } }
@media (max-width : 540px) {
.pop-que .pop-data-body { padding: 22px 16px 22px; }
.pop-que-title { font-size: 20px; }
.pop-que-time { font-size: 24px; padding:11px 0px 0; }
.pop-que-info { font-size: 13px; padding: 12px 0 11px; line-height: 17px; }
.pop-que-slot-img { margin: 6px 6px 0px; }
.pop-que-slot-text { font-size: 12px; line-height: 17px; padding: 11px 12px 13px; }
.pop-que-btn { font-size: 14px; height: 39px; line-height: 40px; }
.pop-que .fx-img { margin: 6px 6px 0px; }
.pop-que .fx-text { font-size: 12px; line-height: 17px; margin: 9px 12px 13px; letter-spacing: 0; }
}
@media (max-width : 510px) { .pop-que .fx-text { font-size: 11px; line-height: 15px; margin: 7px 12px 13px; line-clamp: 3; webkit-line-clamp: 3; } .pop-que .fx-slide-title { font-size: 8px; } }
@media (max-width : 475px) { .pop-que .fx-text { line-clamp: 4; webkit-line-clamp: 4; letter-spacing: .5px; height: 60px; } }
@media (max-width : 450px) { .pop-que .fx-text { letter-spacing: .3px; } }
@media (max-width : 440px) { .pop-que .fx-text { letter-spacing: 0; } .pop-que .fx-slide-title { font-size: 7px; } }
@media (max-width : 390px) { .pop-que .fx-text { font-size: 10px; } .pop-que-info { font-size: 12px; padding: 13px 0 10px; }  }
@media (max-width : 359px) { .pop-que .fx-text { font-size: 11px; line-clamp: 5; webkit-line-clamp: 5; } }
@media (max-width : 330px) { .pop-que .fx-text { font-size: 10px; } }

/*-- Sub Required --*/
.pop-sub-required-title { font-family: effrasemi; font-size: 20px; letter-spacing: .2px; }
.pop-sub-required-info { font-size: 14px; padding: 12px 0 9px; line-height: 19px; letter-spacing: .2px; }
@media (max-width : 540px) { .pop-sub-required-title { font-size:18px; } .pop-sub-required-info { font-size: 13px; padding: 9px 0 7px; line-height: 17px; } }
@media (max-width : 390px) { .pop-sub-required-title { font-size: 16px; padding-top: 1px; } .pop-sub-required-info { font-size: 11px; line-height: 15px; padding: 9px 0 4px; } }

/*------ Manage Subscription pop ------*/
.pop-subby .pop-data-title { margin-bottom:20px; font-size: 20px; }
.pop-subby .pop-data-cancel { font-size: 11px; padding: 18px 20px 15px 22px; }
.pop-subby-row { border-bottom: 1px solid #1c1f29; box-shadow: 0px 1px rgb(255 255 255 / 2%); clear: both; padding: 19px 0px 23px; float: left; width: 100%; font-size:13px; color-scheme: auto; }
.pop-subby-row .pop-subby-row-l { float:left; }
.pop-subby-row .pop-subby-row-r { float:right; }
.pop-subby-basic { color: #acd6f7; }
.pop-subby-advanced { color: #5bdbcf; }
.pop-subby-elite { color: #fde0a8; }
.pop-subby-green { color: #9ddda0; }
.pop-subby-red { color: #ff8989; }
.pop-subby-row i { font-size: 12px; }
.pop-subby-row-click { cursor:pointer; }
.pop-subby-drop { float: left; width: 100%; border-top: 1px solid #1a1d27; box-shadow: 0px 1px rgb(255 255 255 / 2%) inset; clear: both; padding-top: 20px; font-size: 13px; margin-top: 20px; cursor:auto; }
.pop-subby-btn { background:#525b85; padding:10px 0 9px; color:#fff; width:49%; float:left; display:block; text-align:center; margin:9px 0 0; border-radius:4px; cursor:pointer; transition: all 0.2s linear; font-size: 13px; }
.pop-subby-btn-r { float: right; background: #2c7d75; }
.pop-subby-drop-label { margin-top: 7px; float: left; cursor: pointer; font-size: 12px; color: #b6bbcc; position: relative; padding-left: 20px; }
.pop-subby-drop-label input { top: 0px; position: absolute; left: 0; margin: 2px 6px 0 0; padding: 0; }
.pop-subby-drop-check-menu { float:left; width:100%; margin-top: -3px; }
.pop-subby-drop-check-menu label { padding: 8px 8px 0 0; cursor:pointer; }
.pop-subby-drop-check-menu input { top: 2px; position: relative; margin-right: 5px; }
.pop-subby-row-clicked .pop-subby-drop { display:block; }
.pop-subby-select { height: 42px; width: 100%; font-size: 13px; padding: 2px 14px; float: left; position: relative; background: #2f3343; border-radius: 5px; cursor:pointer; }
.pop-subby-select-span { line-height: 37px; text-align: left; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; left: 12px; right: 39px; }
.pop-subby-select i { float: right; right: 0px; font-size: 13px; top: 11px; line-height: 18px; transition:.27s; }
.pop-subby-select:hover i { color: #6dc5f2; }
.pop-subby-select ul { position:absolute; font-size:12px; background:#2d313d; left:0;right:0;top:39px;z-index:25; border-radius:0 0 5px 5px; overflow-y:auto; max-height: 280px; text-align:left; transition:.27s; display:none; }
.pop-subby-select li { padding: 0 12px; height: 40px; line-height: 41px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.pop-subby-select li:hover { background: #303441; background: #333745; }
.pop-subby-select.pop-subby-selected { border-color: #d4d4d4; border-radius: 5px 5px 0 0; background: rgb(17 19 26 / 42%); }
.pop-subby-selected ul { display: block; }
.pop-subby-select-info { font-style: italic; font-size: 10px; color: #b3bad7; margin: 4px 0 15px;  float: left; }

@media (max-width : 560px) { .pop-subby-row, .pop-subby-drop { font-size:12px; } .pop-subby-drop-label { font-size: 11px; line-height: 12px; } .pop-subby-btn { padding: 9px 0 9px; font-size: 12px; } }

/*------ Verify Email Pop ------*/
.pop-email { }
.pop-email-title { font-size: 20px; font-family: effrasemi; }
.pop-email-info { font-size: 15px; padding: 15px 0 14px; line-height: 19px; }
.pop-email-btn { text-align: center; margin-top: 21px; background: #db9b3c; font-family: effrasemi; font-size: 16px; height: 42px; line-height: 42px; width: 100%; border-radius: 5px; float: left; transition: .27s; cursor: pointer; }
.pop-email-btn:hover { background: #555e87; }


@media (max-width : 800px) {
.pop-data { padding:20px; } .pop-data-body { max-width:100%; }

.pop-subby .pop-data-cancel { font-size: 9px; padding: 15px 20px 15px 22px; right: 12px; }
.pop-subby .pop-data-title { font-size: 18px; margin-bottom: 14px; }
.pop-subby .pop-subby-row { font-size: 14px; }

.pop-chats-body { width: auto; max-width: 100%; margin: 18px; top: 0; bottom:0;  }
.pop-chats-row-descr { padding-top:2px; font-size: 13px;  }
.pop-chats-row-time { font-size: 10px; }
.pop-chats-upload { font-size: 13px; }
 }

@media (max-width : 560px) {
.pop-data { padding:16px; }
.pop-data-body { border-width:3px; }
.pop-pad .pop-data-body { transform: none; width: auto; left: 14px; right: 14px; top: 14px; bottom:auto; }

.pop-email .pop-data-body { padding: 22px; }
.pop-email-title { font-size: 18px; }
.pop-email-info { font-size: 14px; padding: 10px 0 6px; line-height: 19px; }
.pop-email-btn { font-size: 15px; height: 40px; line-height: 41px; }
}

@media (max-width : 540px) {
.pop-data { padding:12px; }
.pop-data-body { padding: 22px 18px 22px; }
.pop-data-title { font-size:17px; margin-bottom: 21px; }
.pop-data-cancel { font-size: 9px; right: 12px; padding-top:15px; }
.pop-data-input-label { font-size: 13px; }
.pop-data-textarea textarea { font-size:12px; }
.pop-data-input input { padding: 12px 12px; font-size: 12px; }
.pop-data-btn { font-size: 13px; height: 38px; line-height: 40px;  }
.pop-data-error { font-size: 11px; }

.pop-edit-profile .pop-data-title { margin-bottom: 21px; }
.pop-edit-profile-email-label { font-size: 13px; }
.pop-edit-profile .pop-data-switch-label { font-size:12px; }

.pop-subby .pop-subby-drop-label { font-size: 12px; }
.pop-subby .pop-subby-btn { font-size: 12px; }
.pop-subby .pop-subby-drop-label input { margin-bottom: 14px; }

.pop-chats-body { margin: 11px; padding: 22px 18px 25px; }
.pop-chats-top { margin-bottom: 18px; }
.pop-chats-row-r { padding-left: 56px; }
}

@media (max-width : 420px) {
.pop-data-switch-label {  font-size: 12px; }
.pop-chats-title { font-size: 15px; padding: 9px 0 0; }
.pop-chats-row-descr { padding-top: 2px; font-size: 12px; }
.pop-chats-row-time { font-size: 9px; position: absolute; right: 1px; bottom: -38px; padding-top: 0px; font-style: italic; color: #dbafc1; color: #dfd2b7; color: #424657; }
.pop-chats-row-icons { font-size: 11px; } .pop-chats-view i { font-size: 10px; } .pop-chats-download i { font-size: 9px; } .pop-chats-del i { font-size:8px; }
.pop-chats-upload { font-size: 12px; }
}

@media (max-width : 360px) {
.pop-chats-title { font-size: 16px; }
.pop-chats-row-icons { font-size: 11px; }
}
@media (max-width : 335px) {
.pop-chats-download { padding: 7px 6px 7px 0px; }
}


/*------ Payment Pop ------*/
.pop-pay { overflow-y:auto; backdrop-filter: blur(9px); }
.pop-pay .pop-data-cancel { font-size:11px; padding: 18px 20px 15px 22px; }
.pop-pay-title { font-family: effrasemi; font-size: 19px; margin-bottom: 3px; margin-top:-3px; }
.pop-pay-sub-title { font-size: 14px; padding-bottom: 21px; font-style: italic; color: #97df99; border-bottom: 1px solid rgb(0 0 0 / 25%); box-shadow: 0 1px rgb(255 255 255 / 2%);margin-bottom: 23px; border:0;box-shadow:none;margin:0; }
.pop-pay-card { margin-top: 25px; margin-bottom: 3px; float: left; }
.pop-pay-cardelement-container { border-radius: 5px; margin-top: 20px; padding: 12px 10px; background-color: #2f3343; width: 100%; }

.pop-pay-options { overflow: hidden; border: 1px solid rgb(0 0 0 / 18%); margin: 0px -25px; border-left: 0; border-right: 0; }
.pop-pay-opt { width: 50%; height:38px; float: left; font-size: 13px; box-shadow: 1px 1px rgb(255 255 255 / 1%) inset; cursor: pointer; background: rgb(47 51 67 / 50%); }
.pop-pay-opt-1 { }
.pop-pay-opt-2 { border-left: 1px solid rgb(0 0 0 / 21%); }
.pop-pay-opt span { color: #fff; padding: 11px 4px 11px; float: left; width: 100%; text-align: center; }
.pop-pay-opt-selected span { color: #ffd087;  }
.pop-pay-opt i { display:none; transform: rotate(-90deg); font-size: 16px; margin-right: 0px; margin-top: -6px; position: relative; top: 1px; }
.pop-pay-opt-selected i { display:inline-block; }

.pop-pay-input-label { font-size: 14px; font-family: effrasemi; float: left; width: 100%; }
.pop-pay-input { margin-bottom: 23px; float: left; width: 100%; }
.pop-pay-input input { padding: 12px 10px; width: 100%; background: #2f3343; margin-top: 3px; border-radius: 5px; font-size:13px; }
.pop-pay-input-l { width:48.5%; float:left; }
.pop-pay-input-r { width:48.5%; float:right; }
.pop-pay-input-3x { width:33%; float:left; }
.pop-pay-drop-wrap { }
.pop-pay-drop { height: 39px; width: 100%; margin-bottom: 24px; margin-top: 3px; font-size: 14px; padding: 2px 14px; float: left; position: relative; background: #2f3343; border-radius: 5px; cursor: pointer; }
.pop-pay-drop-span { line-height: 37px; text-align: left; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; left: 14px; right: 39px; }
.pop-pay-drop i { float: right; right: 2px; font-size: 15px; top: 10px; line-height: 18px; transition:.27s; }
.pop-pay-drop:hover i { color: #6dc5f2; }
.pop-pay-drop ul { position: absolute; background: #383d4f; left: 0; right: 0; top: 39px; z-index: 25; border-radius: 0 0 5px 5px; overflow-y: auto; max-height: 280px; text-align: left; transition: .27s; display:none; }
.pop-pay-drop li { padding: 0 12px; height: 40px; line-height: 41px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.pop-pay-drop li:hover { background: #303441; background: #3f4459; }
.pop-pay-dropped .pop-pay-drop { border-radius: 5px 5px 0 0;  }
.pop-pay-dropped ul { display: block; }
.pop-pay-error { font-size: 11px; color: #ff91a0; position: relative; top: 3px; display:none; }
.pop-pay-btn { clear: both; width: 100%; height: 40px; text-align: center; line-height: 41px; border-radius: 5px; float: left; background: #525b85; font-size: 15px; margin-top: 6px; transition: .27s; cursor: pointer; }
.pop-pay-btn:hover { background:#57608b; }
.pop-pay-info { font-size: 13px; line-height: 15px; padding: 7px 0 0; float: left; }
.pop-pay-credit-row { position: relative; float: left; height: 28px; margin-top: 2px; }
.pop-pay-credit-row img { width: 26px; display: inline; padding-top: 2px; }

.pop-pay-crypto { float: left; width: 100%; }
.pp-label { font-family:effrasemi; font-size:13px; letter-spacing: .2px; margin-top:28px; float:left; width:100%; border-bottom:1px solid rgb(0 0 0 / 19%); box-shadow:0 1px rgb(255 255 255 / 1.5%); padding-bottom: 9px; color:#ffabbd; color:#abb1ff; }
.pp-label-r { float: right; font-size: 11px; font-family: effra; opacity: .4; position: relative; top: 1px; cursor: pointer; padding: 4px 0 4px 4px; margin: -4px 0 -4px -4px; }
.pp-label-r:hover { opacity:.7; }
.pp-wallet-wrap { float: left; width: 100%; }
.pp-wallet-l, .pp-wallet-r { float: left; width: 100%; clear: both; }
.pp-wallet-btn { display: block; cursor: pointer; line-height: 46px; height: 46px; color: #fff; font-size: 13px; border-bottom: 1px solid rgb(0 0 0 / 19%); box-shadow: 0 1px rgb(255 255 255 / 1.5%); }
.pp-wallet-btn:hover, .pp-row:hover { color: #ffd087; }
.pp-wallet-l img { float: right; margin-top: 12px; width: 24px; }
.pp-wallet-r img { float: right; margin-top: 16px; width: 21px; margin-right: 1px; }
.pp-wallet-connected .pp-text-v1 { display:none; }
.pp-wallet-connected .pp-text-v2 { display:inline; color:#eee !important; }
.pp-wallet-connected .pp-wallet-btn { cursor:auto; }
.pp-row { float: left; width: 100%; padding: 15px 0px; font-size: 13px; border-bottom: 1px solid rgb(0 0 0 / 19%); box-shadow: 0 1px rgb(255 255 255 / 1.5%); color: #707485; cursor: pointer; }
.pp-row img { float: left; width: 25px; margin-right: 9px; margin-top: -11px; top: 6px; position: relative; }
.pp-row-bitcoin img { width: 23px; margin-right: 10px; margin-left: 1px; top: 7px; }
.pp-row-r { float: right; }
.pp-row i { margin-left: -6px; float: left; font-size: 16px; height: 10px; position: relative; top: 3px; margin-right: 8px; transform: rotate(-90deg); display: none; }
.pp-row-last { border-bottom: 0; box-shadow: none; margin-bottom: -4px; cursor: auto; color: #eee !important; }
.pp-row-selected { color:#eee !important; cursor:auto; }
.pp-row-selected i { display:inline; }
.pop-pay-crypto .pop-pay-info { padding-bottom:10px; }
.pop-pay-coin-row { position: relative; float: left; height: 28px; margin-top:8px; }
.pop-pay-coin-row img { width: 16px; display: inline;  margin-right: 4px; filter: grayscale(1); opacity: .8; }
.pop-pay-coin-row .pop-pay-coin-row-1 { width: 18px; margin-bottom: -1px; }
.pop-pay-coin-row .pop-pay-coin-row-6 { top: -2px; position: relative; }

@media (max-width : 560px) {
.pop-pay-title { font-size: 17px; margin-bottom:2px; }
.pop-pay-sub-title { font-size:13px; }
.pop-pay-btn {  height: 38px; line-height: 39px; font-size: 14px; }
.pop-pay-info { font-size: 12px; line-height: 14px; }

.pop-pay-opt { height: 37px; }
.pop-pay-opt span, .pp-label, .pp-wallet-btn, .pp-row { font-size: 12px; }
}
@media (max-width : 540px) {
.pop-pay .pop-data-cancel { font-size:10px; padding-top: 15px; }
}
@media (max-width : 360px) {
.pop-pay-opt span { font-size: 12px; }
}

.favorite-remove { cursor: pointer;}

.pop-loading-container {position:absolute; top: 0; left: 0; width: 100%; height: 100%; display:flex; justify-content: center; align-items: center; z-index:9999;}