/* CSS Variables */

:root {
    --background-checkbox-hover: var(--color-accent-pink, rgba(227, 68, 73, .3));
    --background-dropdown: #fff;
    --background-dropdown-color: #303030;
    --background-dropdown-hover: #dadada;
    --background-header-nav: #303030;
    --background-input: #fff;
    --background-input-readonly: #eaeaea;
    --background-modal-body: #eaeaea;
    --background-modal-header: #f5f5f5;
    --color-accent-green: #00bd8f;
    --color-accent-green-bg-in-light: #00bd8f;
    --color-accent-pink: rgba(227, 68, 73, .3);
    --color-accent-pink-pale: rgba(227, 68, 73, .2);
    --color-accent-red: #e34449;
    --color-accent-red-bg-in-light: #e34449;
    --color-accent-transparent-red: rgba(227, 68, 73, .7);
    --color-black: #000;
    --color-black-origin: #000;
    --color-blue: #3f67f5;
    --color-blue-light: #2d87d4;
    --color-blue-lighter: #5db6fa;
    --color-button-black: #303030;
    --color-button-border: #ccc;
    --color-button-gray: #dadada;
    --color-cobalt: #707070;
    --color-cobalt-dark: #434343;
    --color-cobalt-dark-origin: #434343;
    --color-cobalt-darker: #303030;
    --color-cobalt-darker-origin: #303030;
    --color-cobalt-light: #dadada;
    --color-cobalt-light-origin: #dadada;
    --color-cobalt-lighter: #f5f5f5;
    --color-cobalt-lighter-origin: #f5f5f5;
    --color-gay: #2d86d4;
    --color-gold: #f4bb2e;
    --color-gray: #ccc;
    --color-gray-dark: #a0a0a0;
    --color-gray-dark-origin: #a0a0a0;
    --color-gray-light: #eaeaea;
    --color-gray-light-origin: #eaeaea;
    --color-gray-origin: #ccc;
    --color-header-border: #000;
    --color-input-text-border: #ccc;
    --color-light-red: #f95274;
    --color-line-separator: #dadada;
    --color-purple: #9264dc;
    --color-red-dark: #d1363b;
    --color-shemale: #dc1aac;
    --color-ui-hover: #ccc;
    --color-white: #fff;
    --color-white-gray: #fff;
    --color-white-origin: #fff;
    --iridescent-ai: linear-gradient(38deg, #521ca1, #6052e2 50%, #00bd8f);
    --main-background: #303030;
    --coloe-ads-by: #818181;
    --background-app: #101010;
    --color-white-90: hsla(0, 0%, 100%, .9);
    --color-black-origin-90: rgba(0, 0, 0, .9);
    --color-white-origin-25: hsla(0, 0%, 100%, .25);
    --color-white-origin-45: hsla(0, 0%, 100%, .45);
    --try-mobile-bg: url(/xh-shared/images/common/header/try-mobile.svg);
    --vrplayer-download-url: url(/xh-shared/images/dialog/vr-app-download.svg);
    --logo-media: url(/xh-shared/images/logo/logo-media.svg);
    --background-modal-wrapper: rgba(0, 0, 0, .8);
    --color-cobalt-lighter-40: hsla(0, 0%, 96%, .4);
    --color-cobalt-darker-40: rgba(48, 48, 48, .4);
    --color-cobalt-darker-lighten-4: #3a3a3a;
    --color-cobalt-lighter-70: hsla(0, 0%, 96%, .7);
    --background-signup-xh: linear-gradient(180deg, var(--color-cobalt-dark, #434343) 0%, var(--color-cobalt-darker, #303030) 100%);
    --user-status-triangle: url(/xh-shared/images/user/status-editor/triangle.svg);
    --color-cobalt-light-4-lightened: #e4e4e4;
    --color-gray-light-70: hsla(0, 0%, 92%, .7);
    --bg-pm-active: var(--color-cobalt-darker, #303030);
    --color-pm-active: var(--color-white-origin, #fff);
    --bg-form-button-block: hsla(0, 0%, 85%, .5);
    --color-white-origin-70: hsla(0, 0%, 100%, .7);
    --color-white-origin-90: hsla(0, 0%, 100%, .9);
    --color-cobalt-darker-70: rgba(48, 48, 48, .7);
    --color-cobalt-darker-origin-70: rgba(48, 48, 48, .7);
    --color-cobalt-darker-50: rgba(48, 48, 48, .5);
    --color-blue-darker-10: #0f41f2;
    --color-bright-violet: #af38f3;
    --color-soft-violet: #965bfa;
    --color-gray-dusty: #979797;
    --color-tooltip-background: #434343;
    --bg-carousel-item: #202020;
    --bg-signup-feedback-block: #272727;
    --color-line-button-border: #ccc;
    --color-visited-mobile: #707070;
    --color-visited-desktop: #ccc;
    --icon-profile-blogger: url(/xh-shared/images/social/light/blogger.svg);
    --icon-profile-facebook: url(/xh-shared/images/social/light/facebook.svg);
    --icon-profile-googleplus: url(/xh-shared/images/social/light/googleplus.svg);
    --icon-profile-instagram: url(/xh-shared/images/social/light/instagram.svg);
    --icon-profile-reddit: url(/xh-shared/images/social/light/reddit.svg);
    --icon-profile-snapchat: url(/xh-shared/images/social/light/snapchat.svg);
    --icon-profile-telegram: url(/xh-shared/images/social/light/telegram.svg);
    --icon-profile-twitter: url(/xh-shared/images/social/light/twitter.svg);
    --icon-profile-viber: url(/xh-shared/images/social/light/viber.svg);
    --icon-profile-whatsapp: url(/xh-shared/images/social/light/whatsapp.svg);
    --icon-profile-manyvids: url(/xh-shared/images/social/light/manyvids.svg);
    --icon-profile-clip4sale: url(/xh-shared/images/social/light/clips4sale.svg);
    --icon-profile-myclub: url(/xh-shared/images/social/light/myclub.svg);
    --icon-profile-xhamsterlive: url(/xh-shared/images/social/light/xhamsterlive.svg);
    --icon-profile-website: url(/xh-shared/images/social/light/website.svg);
    --icon-profile-tumblr: url(/xh-shared/images/social/light/tumblr.svg);
    --icon-profile-vimeo: url(/xh-shared/images/social/light/vimeo.svg);
    --icon-profile-vk: url(/xh-shared/images/social/light/vk.svg);
    --bg-become-creators-container: #f5f5f5;
    --color-cobalt-origin: #707070;
    --nft-color-l1: #44b1c8;
    --nft-color-l2: #e95489;
    --nft-color-l3: #796adc;
    --nft-divider-color: #fff;
    
    /* Modern UI Variables */
    --primary-color: #007acc;
    --primary-hover: #005a9e;
    --secondary-color: #6c757d;
    --secondary-hover: #5a6268;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --error-color: #d32f2f;
    --background: #f7f7f7;
    --text-primary: #20232a;
    --text-secondary: #555;
    --text-muted: #888;
    --border-color: #ddd;
    --border-light: #e0e0e0;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .1);
    --border-radius: 0.5rem;
    --border-radius-sm: 0.25rem;
    --transition: all 0.3s ease;
    --top-header-height: 60px;
    --top-menu-height: 45px;
    --xh-legacy-z-index-header: 100;
}




/* :root {
  --primary-color: #007acc;
  --primary-hover: #005a9e;
  --secondary-color: #6c757d;
  --secondary-hover: #5a6268;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --error-color: #d32f2f;
  --background: #f7f7f7;
  --text-primary: #20232a;
  --text-secondary: #555;
  --text-muted: #888;
  --border-color: #ddd;
  --border-light: #e0e0e0;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .05);
  --border-radius: 0.5rem;
  --border-radius-sm: 0.25rem;
  --transition: all 0.3s ease;
} */

/* Reset & Base */
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

* {
  box-sizing: border-box;
  outline: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  background: var(--color-cobalt-darker, #303030);
  color: var(--text-primary);
  min-width: 1024px;
  position: relative;

}

body p {
  font-size: 14px;
}

html {
  scroll-behavior: smooth;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  margin-bottom: 1rem;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.1rem;
}

p {
  margin-bottom: 0.5rem;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-hover);
}

/* Lists */
ul,
ol {
  margin-left: 1.5rem;
}

/* Code */
code {
  background: #f5f5f5;
  padding: 0.2rem 0.4rem;
  border-radius: var(--border-radius-sm);
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
}

/* Container */
.container {
  margin: 0 auto;
}