/* Font Family */ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); /* ========================= Css Variables Start ======================== */ :root { --inline-p: 32px; @media (max-width: 1400px) { --inline-p: 24px; } @media (max-width: 1200px) { --inline-p: 20px; } --header-h: 74px; /* Font Family */ --heading-font: "Roboto", sans-serif; --body-font: "Roboto", sans-serif; /* ========================= Color Variables Start =========================== */ --white: 0 0% 100%; --static-white: 0 0% 100%; --static-black: 0 0% 0%; --black-h: 0; --black-s: 0%; --black-l: 0%; --black: var(--black-h) var(--black-s) var(--black-l); --light-h: 0; --light-s: 0%; --light-l: 95%; --light: var(--light-h) var(--light-s) var(--light-l); --static-light: 0 0% 95%; --light-two-h: 0; --light-two-s: 0%; --light-two-l: 67%; --light-two: var(--light-two-h) var(--light-two-s) var(--light-two-l); --static-light-two: 0 0% 67%; --heading-color: var(--light); --body-color: var(--light-two); --body-background: var(--dark); --card-background: var(--dark-two); --header-search-bg: hsla(0, 0%, 100%, 0.06); --border-color: hsl(0, 0%, 38%); --border-color-two: hsl(0, 0%, 85%); --form-border: hsl(0, 0%, 38%); --list-border: hsl(0, 0%, 85%); --wh-bg: hsla(0, 0%, 40%, 0.059); --setting-menu-bg: hsl(240, 1%, 14%); --setting-menu-active-bg: hsl(0, 0%, 16%); --cover-photo-bg: hsl(240, 1%, 14%); --tag-color: hsl(0, 0%, 93%); --tag-bg: hsla(0, 0%, 100%, 0.6); --tag-border: hsla(0, 0%, 100%, 0.502); --progress-bg: hsla(0, 0%, 95%, 0.1); --switch-bg: hsl(0, 0%, 32%); --switch: hsl(0, 0%, 67%); --white-btn-bg: hsl(0, 0%, 95%); --dark-btn-bg: hsl(210, 11%, 15%); --bg-color: 0, 0%, 11%; --card-two-bg: 0 3% 20%; --linear-gradient: linear-gradient( 90deg, #212121 53.27%, rgba(32, 32, 32, 0.03) 100% ); --linear-gradient-two: linear-gradient( -90deg, #212121 53.27%, rgba(32, 32, 32, 0.03) 100% ); /* ================================ Box Shadow Start =============================== */ --header-box-shadow: 0px -1px 15px 3px hsl(var(--black) / 0.3); --mobile-box-shadow: 0px -1px 5px 0px hsl(var(--black) / 0.92); --box-shadow: 0px 4px 8px 0px hsla(0, 0%, 0%, 0.06), 0px 0px 4px 0px hsla(0, 0%, 0%, 0.04); --box-shadow-two: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.02); /* ================================ Box Shadow End =============================== */ /* ========================= Base Color ============================= */ --base-h: 0; --base-s: 100%; --base-l: 50%; --base: var(--base-h) var(--base-s) var(--base-l); /* Base Darken */ --base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.1); --base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.2); --base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.3); --base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.4); --base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.5); --base-d-600: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.6); --base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7); --base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7); --base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.8); --base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.8); --base-d-900: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.9); /* Base Lighten */ --base-l-100: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.1); --base-l-200: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.2); --base-l-300: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.3); --base-l-400: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.4); --base-l-500: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.5); --base-l-600: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.6); --base-l-700: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.7); --base-l-800: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.8); --base-l-900: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.9); --background-gradient: linear-gradient( 45deg, hsl(var(--base)), hsl(var(--base-two)) ); /* ========================= Base Two Color ============================= */ --base-two-h: 353; --base-two-s: 86%; --base-two-l: 54%; --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l); /* Base Two Darken */ --base-two-d-100: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.05); --base-two-d-200: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.1); --base-two-d-300: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.2); --base-two-d-400: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.3); --base-two-d-500: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.4); --base-two-d-600: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.5); --base-two-d-700: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.6); --base-two-d-800: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.7); --base-two-d-900: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.8); /* Base Two Lighten */ --base-two-l-100: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.05); --base-two-l-200: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.1); --base-two-l-300: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.2); --base-two-l-400: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.3); --base-two-l-500: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.4); --base-two-l-600: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.5); --base-two-l-700: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.6); --base-two-l-800: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.7); --base-two-l-900: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.8); /* Dark Color*/ --dark-h: 240; --dark-s: 5%; --dark-l: 8%; --dark: var(--dark-h) var(--dark-s) var(--dark-l); --static-dark: 0 0% 13%; --dark-d-100: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.1); --dark-d-200: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.2); --dark-d-300: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.3); --dark-d-400: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.4); --dark-d-500: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.5); --dark-d-600: var(--dark-h) var(--dark-s) calc(var(--dark-l) - var(--dark-l) * 0.6); --dark-l-100: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.1); --dark-l-200: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.2); --dark-l-300: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.3); --dark-l-400: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.4); --dark-l-500: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.5); --dark-l-600: var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.6); /* Dark Color*/ --dark-two-h: 0; --dark-two-s: 0%; --dark-two-l: 16%; --dark-two: var(--dark-two-h) var(--dark-two-s) var(--dark-two-l); --dark-two-d-100: var(--dark-two-h) var(--dark-two-s) calc(var(--dark-two-l) - var(--dark-two-l) * 0.1); --dark-two-d-200: var(--dark-two-h) var(--dark-two-s) calc(var(--dark-two-l) - var(--dark-two-l) * 0.2); --dark-two-d-300: var(--dark-two-h) var(--dark-two-s) calc(var(--dark-two-l) - var(--dark-two-l) * 0.3); --dark-two-d-400: var(--dark-two-h) var(--dark-two-s) calc(var(--dark-two-l) - var(--dark-two-l) * 0.4); --dark-two-d-500: var(--dark-two-h) var(--dark-two-s) calc(var(--dark-two-l) - var(--dark-two-l) * 0.5); --dark-two-d-600: var(--dark-two-h) var(--dark-two-s) calc(var(--dark-two-l) - var(--dark-two-l) * 0.6); --dark-two-l-100: var(--dark-two-h) calc(var(--dark-two-s)) calc(var(--dark-two-l) + (100% - var(--dark-two-l)) * 0.1); --dark-two-l-200: var(--dark-two-h) calc(var(--dark-two-s)) calc(var(--dark-two-l) + (100% - var(--dark-two-l)) * 0.2); --dark-two-l-300: var(--dark-two-h) calc(var(--dark-two-s)) calc(var(--dark-two-l) + (100% - var(--dark-two-l)) * 0.3); --dark-two-l-400: var(--dark-two-h) calc(var(--dark-two-s)) calc(var(--dark-two-l) + (100% - var(--dark-two-l)) * 0.4); --dark-two-l-500: var(--dark-two-h) calc(var(--dark-two-s)) calc(var(--dark-two-l) + (100% - var(--dark-two-l)) * 0.5); --dark-two-l-600: var(--dark-two-h) calc(var(--dark-two-s)) calc(var(--dark-two-l) + (100% - var(--dark-two-l)) * 0.6); /* Purple Color*/ --purple-h: 266; --purple-s: 100%; --purple-l: 64%; --purple: var(--purple-h) var(--purple-s) var(--purple-l); /* Purple Darken */ --purple-d-100: var(--purple-h) var(--purple-s) calc(var(--purple) - var(--purple-l) * 0.1); --purple-d-200: var(--purple-h) var(--purple-s) calc(var(--purple) - var(--purple-l) * 0.2); --purple-d-300: var(--purple-h) var(--purple-s) calc(var(--purple) - var(--purple-l) * 0.3); --purple-d-400: var(--purple-h) var(--purple-s) calc(var(--purple) - var(--purple-l) * 0.4); --purple-d-500: var(--purple-h) var(--purple-s) calc(var(--purple) - var(--purple-l) * 0.5); /* Purple Lighten */ --purple-l-100: var(--purple-h) calc(var(--purple-s)) calc(var(--purple-l) + (100% - var(--purple-l)) * 0.1); --purple-l-200: var(--purple-h) calc(var(--purple-s)) calc(var(--purple-l) + (100% - var(--purple-l)) * 0.2); --purple-l-300: var(--purple-h) calc(var(--purple-s)) calc(var(--purple-l) + (100% - var(--purple-l)) * 0.3); --purple-l-400: var(--purple-h) calc(var(--purple-s)) calc(var(--purple-l) + (100% - var(--purple-l)) * 0.4); --purple-l-500: var(--purple-h) calc(var(--purple-s)) calc(var(--purple-l) + (100% - var(--purple-l)) * 0.5); --purple-l-600: var(--purple-h) calc(var(--purple-s)) calc(var(--purple-l) + (100% - var(--purple-l)) * 0.6); /* ============================== Bootstrap Modifier Start ============================== */ /* Primary Color */ --primary-h: 216; --primary-s: 83%; --primary-l: 50%; --primary: var(--primary-h) var(--primary-s) var(--primary-l); /* Primary Darken */ --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1); --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2); --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3); --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4); --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5); /* primary Lighten */ --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1); --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2); --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3); --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4); --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5); --primary-l-600: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.6); /* Secondary Color */ --secondary-h: 208; --secondary-s: 7%; --secondary-l: 46%; --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l); /* Secondary Darken */ --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1); --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2); --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3); --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4); --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5); /* secondary Lighten */ --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1); --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2); --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3); --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4); --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5); --secondary-l-600: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.6); /* Success Color */ --success-h: 137; --success-s: 75%; --success-l: 40%; --success: var(--success-h) var(--success-s) var(--success-l); /* Success Darken */ --success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1); --success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2); --success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3); --success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4); --success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5); /* Success Lighten */ --success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1); --success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2); --success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3); --success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4); --success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5); --success-l-600: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.6); /* Danger Color */ --danger-h: 0; --danger-s: 96%; --danger-l: 63%; --danger: var(--danger-h) var(--danger-s) var(--danger-l); /* Danger Darken */ --danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1); --danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2); --danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3); --danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4); --danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5); /* danger Lighten */ --danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1); --danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2); --danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3); --danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4); --danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5); --danger-l-600: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.6); /* Warning Color */ --warning-h: 32; --warning-s: 100%; --warning-l: 49%; --warning: var(--warning-h) var(--warning-s) var(--warning-l); /* Warning Darken */ --warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1); --warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2); --warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3); --warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4); --warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5); /* Warning Lighten */ --warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1); --warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2); --warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3); --warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4); --warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5); --warning-l-600: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.6); /* Info Color */ --info-h: 196; --info-s: 100%; --info-l: 50%; --info: var(--info-h) var(--info-s) var(--info-l); /* Info Darken */ --info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1); --info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2); --info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3); --info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4); --info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5); --info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1); --info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2); --info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3); --info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4); --info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5); --info-l-600: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.6); /* Violet Color */ --violet-h: 276; --violet-s: 70%; --violet-l: 53%; --violet: var(--violet-h) var(--violet-s) var(--violet-l); /* Violet Darken */ --violet-d-100: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.1); --violet-d-200: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.2); --violet-d-300: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.3); --violet-d-400: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.4); --violet-d-500: var(--violet-h) var(--violet-s) calc(var(--violet-l) - var(--violet-l) * 0.5); /* Violet Lighten */ --violet-l-100: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.1); --violet-l-200: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.2); --violet-l-300: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.3); --violet-l-400: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.4); --violet-l-500: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.5); --violet-l-600: var(--violet-h) calc(var(--violet-s)) calc(var(--violet-l) + (100% - var(--violet-l)) * 0.6); /* Yellow Color */ --yellow-h: 50; --yellow-s: 100%; --yellow-l: 50%; --yellow: var(--yellow-h) var(--yellow-s) var(--yellow-l); /* Yellow Darken */ --yellow-d-100: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.1); --yellow-d-200: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.2); --yellow-d-300: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.3); --yellow-d-400: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.4); --yellow-d-500: var(--yellow-h) var(--yellow-s) calc(var(--yellow-l) - var(--yellow-l) * 0.5); /* yellow Lighten */ --yellow-l-100: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.1); --yellow-l-200: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.2); --yellow-l-300: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.3); --yellow-l-400: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.4); --yellow-l-500: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.5); --yellow-l-600: var(--yellow-h) calc(var(--yellow-s)) calc(var(--yellow-l) + (100% - var(--yellow-l)) * 0.6); /* ============================== Bootstrap Modifier End ============================== */ } [data-theme="light"] { --white: 0 0% 21%; --bg-color: 0 0% 100%; --static-white: 0 0% 100%; --card-two-bg: 197 23% 94%; --black-h: 0; --black-s: 0%; --black-l: 100%; --black: var(--black-h) var(--black-s) var(--black-l); --static-black: 0 0% 0%; --light-h: 210; --light-s: 11%; --light-l: 15%; --light: var(--light-h) var(--light-s) var(--light-l); --static-light: 0 0% 95%; --light-two-h: 0; --light-two-s: 0%; --light-two-l: 38%; --light-two: var(--light-two-h) var(--light-two-s) var(--light-two-l); --static-light-two: 0 0% 67%; --dark-h: 197; --dark-s: 24%; --dark-l: 94%; --dark: var(--dark-h) var(--dark-s) var(--dark-l); --static-dark: 0 0% 13%; --dark-two-h: 197; --dark-two-s: 20%; --dark-two-l: 93%; --dark-two: var(--dark-two-h) var(--dark-two-s) var(--dark-two-l); --card-bg-h: 0; --card-bg-s: 0%; --card-bg-l: 98%; --card-bg: var(--card-bg-h) var(--card-bg-s) var(--card-bg-l); --heading-color: var(--light); --body-color: var(--light-two); --border-color: hsla(0, 0%, 38%, 0.2); --border-color-two: hsl(0, 0%, 38%); --form-border: hsl(0, 0%, 67%); --list-border: hsl(0, 0%, 38%); --body-background: var(--dark); --header-search-bg: hsl(186, 26%, 93%); --section-bg: 208 100% 97%; --box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1); --wh-bg: hsla(0, 0%, 40%, 0.02); --setting-menu-bg: hsl(197, 20%, 93%); --setting-menu-active-bg: hsla(210, 11%, 15%, 0.06); --cover-photo-bg: hsla(210, 11%, 15%, 0.06); --tag-color: hsl(210, 11%, 15%); --tag-bg: hwb(0 38% 62%); --tag-border: hsl(0, 0%, 38%); --progress-bg: hsla(210, 11%, 15%, 0.06); --switch: hsla(210, 11%, 15%, 0.14); --switch-bg: hsla(210, 11%, 15%, 0.11); --white-btn-bg: hsl(210, 11%, 15%); --dark-btn-bg: hsl(0, 0%, 95%); --linear-gradient: linear-gradient(90deg, #edf2f4 53.27%, #edf2f400 100%); --linear-gradient-two: linear-gradient( -90deg, #edf2f4 53.27%, #edf2f400 100% ); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--body-font); color: hsl(var(--body-color)); word-break: break-word; background-color: hsl(var(--body-background)); min-height: 100vh; display: flex; flex-direction: column; padding: 0 !important; overflow: auto !important; overflow-x: hidden !important; overflow-y: auto !important; } p { margin: 0; font-weight: 400; } span { display: inline-block; } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); color: hsl(var(--heading-color)); font-weight: 600; line-height: 1.2; word-break: break-word; margin: 0 0 15px 0; } @media screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6 { margin: 0 0 10px 0; } } h1 { font-size: clamp(1.5625rem, 1.7vw + 1rem, 2.5rem); } h2 { font-size: clamp(1.25rem, 0.8vw + 1rem, 1.875rem); } h3 { font-size: clamp(1rem, 0.5vw + 1rem, 1.5rem); } h4 { font-size: clamp(0.875rem, 0.3vw + 1rem, 1.25rem); } h5 { font-size: 1rem; } h6 { font-size: 0.875rem; } h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { color: inherit; font-weight: inherit; line-height: inherit; word-break: break-word; transition: 0.1s linear; } a { display: inline-block; transition: 0.1s linear; text-decoration: none; color: hsl(var(--body-color)); } a:hover { color: hsl(var(--base)); } img { max-width: 100%; height: auto; } select { cursor: pointer; } ul, ol { padding: 0; margin: 0; list-style: none; } button { border: 0; background-color: transparent; } button:focus { outline: none; box-shadow: none; } .form-select:focus { outline: 0; box-shadow: none; } /* ================================= Common Typography Css End =========================== */ /* ================================= Custom Classes Css Start =========================== */ /* Column Extra Small Screen */ @media screen and (min-width: 520px) and (max-width: 575px) { .col-xsm-6 { width: 50%; } } /* Custom Container */ .custom--container { max-width: 1680px; margin: 0 auto; padding: 0 15px; } .h-45 { height: 45px; } /* Section Background */ .section-bg { background-color: hsl(var(--section-bg)); } /* Full Screen Height Css */ .full-display { flex-grow: 1; flex-shrink: 1; flex-basis: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; } /* Bg Image Css */ .bg-img { background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; width: 100%; height: 100%; } /* Background Ovelray Css Start */ .bg-overlay { position: relative; isolation: isolate; } .bg-overlay::before { position: absolute; content: ""; left: 0; top: 0; background-color: hsl(var(--base-two)); opacity: 0.8; width: 100%; height: 100%; z-index: -1; } .bg-overlay-two { position: relative; isolation: isolate; } .bg-overlay-two::before { position: absolute; content: ""; left: 0; top: 0; background-color: hsl(var(--base)); opacity: 0.8; width: 100%; height: 100%; z-index: -1; } /* Hide Scroll bar Css For Custom Modal */ .scroll-hide { position: absolute; overflow-y: scroll; top: 0; left: 0; width: 100%; } /* ================================= Custom Classes Css End =========================== */ /* Fully Fit image Css */ .fit-image, .account-thumb img, .home-fluid .home-header__right .user-info__thumb img, .customer__thumb img { width: 100%; height: 100%; } /* ============================= Display Flex Css Start ============================= */ .flex-wrap, .dashboard-wrapper, .setting-wrapper, .video-wh-item, .channel-tab { display: flex; flex-wrap: wrap; } .flex-align, .dashboard-menu__link, .create-advertising__form .form-group .mediaUploadLabel, .varification__form .varification-code, .monetization-progress .title, .wallet-setting__wallet .buttons, .setting-menu__link, .upload-thumbnail .bottom__inner, .upload-buttons, .play-video .primary__comment .top, .wl-playlist__buttons, .ellipsis-list__btn, .wh-shorts-heading__title, .filter-form__select, .filter-form__price, .channel-header__buttons, .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item, .home-fluid .home-header__right .user-info__button, .home-fluid .home-header__right .create__list-link, .home-fluid .home-header__right .create__btn, .home-fluid .home-header__right, .action-buttons, .customer { display: flex; flex-wrap: wrap; align-items: center; } .flex-center, .custom-share-modal .modal-body .share-items, .toggle-search__box, .toggle-search__close { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .flex-between, .video-analytics__top, .chart-box__top, .dashboard-content__top, .advertising-heading, .security-setting .connected-device__item, .upload-elements__subtitle, .uploading-progress__meta, .play-video .primary__channel, .play-video .primary__videometa, .filter-form, .channel-header, .home-fluid .home-header__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } /* ============================= Display Flex Css End ============================= */ /* ===================== Font Size For resposive devices Start =================== */ .fs-10 { font-size: 0.625rem; } .fs-11, .form--check .form-check-input:checked::before { font-size: 0.6875rem; } .fs-12, .home-fluid .home-header__right .create__btn, .text-list__item-icon, .form--label { font-size: 0.75rem; } .fs-13, .sidebar-menu .menu-title, .customer__name { font-size: 0.8125rem; } .fs-14, .table tbody tr td, .form--control::placeholder, .form--control, p { font-size: 0.875rem; } .fs-15, .sidebar-menu-list__link, .table, .btn--icon { font-size: 0.875rem; } .fs-16, .scroll-top, .table thead tr th, .btn { font-size: 1rem; } @media screen and (max-width: 575px) { .fs-16, .scroll-top, .table thead tr th, .btn { font-size: 0.9375rem; } } .fs-17 { font-size: 1.0625rem; } @media screen and (max-width: 991px) { .fs-17 { font-size: 1rem; } } @media screen and (max-width: 575px) { .fs-17 { font-size: 0.9375rem; } } .fs-18, .toggle-search__button-icon, .toggle-search__icon, .custom--accordion .accordion-button { font-size: 1.125rem; } @media screen and (max-width: 991px) { .fs-18, .toggle-search__button-icon, .toggle-search__icon, .custom--accordion .accordion-button { font-size: 1rem; } } /* ===================== Font Size For resposive devices End =================== */ /* ============================= Positioning Css Class Start ===================== */ .pa, .toggle-search__close { position: absolute; content: ""; } .pa-wh-100 { position: absolute; width: 100%; height: 100%; } .pa-tl-0 { position: absolute; content: ""; top: 0; left: 0; } .pa-wh-100-tl-0 { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; } .top-center { top: 50%; transform: translateY(-50%); } .left-center { left: 50%; transform: translateX(-50%); } .top-center { top: 50%; transform: translateY(-50%); } .top-left-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ============================= Positioning Css Class End ===================== */ /* ====================== Section Heading Start ==================== */ .section-heading { text-align: center; margin-bottom: 50px; } @media screen and (max-width: 1199px) { .section-heading { margin-bottom: 40px; } } @media screen and (max-width: 991px) { .section-heading { margin-bottom: 30px; } } .section-heading__title { position: relative; padding-bottom: 10px; } .section-heading__title::before { position: absolute; content: ""; left: 50%; bottom: 0px; transform: translateX(-50%); width: 80px; height: 2px; background-color: hsl(var(--base)); } .section-heading__desc { max-width: 750px; margin-left: auto; margin-right: auto; } .section-heading.style-left { text-align: left; } .section-heading.style-left .section-heading__title::before { left: 0; transform: translateX(0); } .section-heading.style-left .section-heading__desc { margin-left: 0; } .section-heading.style-three { display: flex; justify-content: space-between; align-items: center; text-align: left; } @media screen and (max-width: 767px) { .section-heading.style-three { display: block; } } .section-heading.style-three .section-heading__title { margin-bottom: 0; padding-bottom: 0; margin-right: 50px; padding-right: 50px; flex-shrink: 0; position: relative; } @media screen and (max-width: 767px) { .section-heading.style-three .section-heading__title { margin-bottom: 10px; margin-right: 0px; padding-right: 0px; } } .section-heading.style-three .section-heading__title::before { position: absolute; content: ""; left: 100%; top: 50%; transform: translateY(-50%); width: 2px; height: 35px; background-color: hsl(var(--base)); } @media screen and (max-width: 767px) { .section-heading.style-three .section-heading__title::before { display: none; } } .section-heading.style-three .section-heading__desc { max-width: 100%; margin-left: 0; } /* ====================== Section Heading End ==================== */ /* ====================== Dark Light Logo And Switch Manage Start ==================== */ .sidebar-logo__link.light { display: none; } .home-fluid .home__right.big-space .home-header__left .logo.light { display: none; } .home-fluid.pv-page .home-header__left .logo.light { display: none; } @media screen and (max-width: 1399px) { .home-fluid .home__right .home-header__left .logo.light { display: none; } } .home-fluid .user-info .user-info-list__item .list__item.theme-switch-item .text.light { display: none; } .home-fluid .user-info .user-info-list__item .list__item.theme-switch-item .theme-switch-wrapper .slider .icon.light { visibility: hidden; opacity: 0; } [data-theme="light"] .sidebar-logo__link.light { display: inline-block; } [data-theme="light"] .sidebar-logo__link.dark, [data-theme="light"] .home-fluid.pv-page .home-header__left .logo.dark { display: none; } [data-theme="light"] .home-fluid .home__right.big-space .home-header__left .logo.light, [data-theme="light"] .home-fluid.pv-page .home-header__left .logo.light { display: inline-block; } [data-theme="light"] .home-fluid .home__right.big-space .home-header__left .logo.dark { display: none; } @media screen and (max-width: 1399px) { [data-theme="light"] .home-fluid .home__right .home-header__left .logo.light { display: inline-block; } [data-theme="light"] .home-fluid .home__right .home-header__left .logo.dark { display: none; } } [data-theme="light"] .home-fluid .user-info .user-info-list__item .list__item.theme-switch-item .text.light { display: inline-block; } [data-theme="light"] .home-fluid .user-info .user-info-list__item .list__item.theme-switch-item .text.dark { display: none; } [data-theme="light"] .home-fluid .user-info .user-info-list__item .list__item.theme-switch-item .theme-switch-wrapper .slider .icon.light { visibility: visible; opacity: 1; } [data-theme="light"] .home-fluid .user-info .user-info-list__item .list__item.theme-switch-item .theme-switch-wrapper .slider .icon.dark i { visibility: hidden; opacity: 0; } /* ====================== Dark Light Logo And Switch Manage End ==================== */ /* ================= Apex Charts Start ================ */ .apexcharts-menu-icon svg { fill: hsl(var(--heading-color)) !important; transition: 0.25s linear !important; } .apexcharts-menu-icon:hover svg { fill: hsl(var(--base)) !important; } .apexcharts-menu { min-width: 120px !important; text-align: center !important; background-color: hsl(var(--bg-color)) !important; box-shadow: var(--box-shadow); border-radius: 10px !important; transition: 0.25s linear !important; border: 0 !important; } .apexcharts-menu-item { color: hsl(var(--body-color)) !important; padding: 7px !important; font-size: 11px !important; } .apexcharts-menu-item:hover { background: transparent !important; color: hsl(var(--base)) !important; } /* ================= Apex Charts End ================ */ /* ================= Slick Arrow & Dots Start ================ */ .slick-arrow { position: absolute; z-index: 1; border: none; background-color: transparent; color: hsl(var(--static-white)); width: 32px; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 0; transition: 0.4s; bottom: 0; left: 0; font-size: 0.875rem; } .slick-arrow i { position: relative; z-index: 2; } .slick-arrow::after { position: absolute; content: ""; background: var(--linear-gradient); width: calc(100% + 15px); height: calc(100% + 2px); bottom: -1px; left: 0; } .slick-arrow.slick-prev.slick-disabled { display: none !important; } .slick-arrow.slick-next { left: auto; right: 0; } .slick-arrow.slick-next::after { background: var(--linear-gradient-two); left: auto; right: 0; } .slick-arrow.slick-next.slick-disabled { display: none !important; } .slick-arrow:hover { color: hsl(var(--base)); background: transparent !important; } /* ================= Slick Arrow & Dots Start ================ */ /* ================================= Background Color Css Start =========================== */ .bg--base { background-color: hsl(var(--base)) !important; } .bg--primary { background-color: hsl(var(--primary)) !important; } .bg--secondary { background-color: hsl(var(--secondary)) !important; } .bg--success { background-color: hsl(var(--success)) !important; } .bg--danger { background-color: hsl(var(--danger)) !important; } .bg--warning { background-color: hsl(var(--warning)) !important; } .bg--info { background-color: hsl(var(--info)) !important; } .bg--violet { background-color: hsl(var(--violet)) !important; } /* ================================= Background Color Css End =========================== */ /* ================================= Color Css Start =========================== */ .text--base { color: hsl(var(--base)) !important; } .text--base-two { color: hsl(var(--base-two)) !important; } .text--primary { color: hsl(var(--primary)) !important; } .text--secondary { color: hsl(var(--secondary)) !important; } .text--success { color: hsl(var(--success)) !important; } .text--danger { color: hsl(var(--danger)) !important; } .text--warning { color: hsl(var(--warning)) !important; } .text--info { color: hsl(var(--info)) !important; } .text--violet { color: hsl(var(--violet)) !important; } /* ================================= Color Css End =========================== */ /* ================================= Margin Css Start =========================== */ .my-120 { margin-top: 60px; margin-bottom: 60px; } @media (min-width: 992px) { .my-120 { margin-top: 120px; margin-bottom: 120px; } } .mt-120 { margin-top: 60px; } @media (min-width: 992px) { .mt-120 { margin-top: 120px; } } .mb-120 { margin-bottom: 60px; } @media (min-width: 992px) { .mb-120 { margin-bottom: 120px; } } .my-60 { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 992px) { .my-60 { margin-top: 120px; margin-bottom: 60px; } } .mt-60 { margin-top: 30px; } @media (min-width: 992px) { .mt-60 { margin-top: 60px; } } .mb-60 { margin-bottom: 30px; } @media (min-width: 992px) { .mb-60 { margin-bottom: 60px; } } .my-80 { margin-top: 40px; margin-bottom: 40px; } @media (min-width: 992px) { .my-80 { margin-top: 80px; margin-bottom: 80px; } } .mt-80 { margin-top: 40px; } @media (min-width: 992px) { .mt-80 { margin-top: 80px; } } .mb-80 { margin-bottom: 40px; } @media (min-width: 992px) { .mb-80 { margin-bottom: 80px; } } .my-40 { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 992px) { .my-40 { margin-top: 40px; margin-bottom: 40px; } } .mt-40 { margin-top: 30px; } @media (min-width: 992px) { .mt-40 { margin-top: 40px; } } .mb-40 { margin-bottom: 30px; } @media (min-width: 992px) { .mb-40 { margin-bottom: 40px; } } /* ================================= Margin Css End =========================== */ /* ================================= padding Css Start =========================== */ .py-120 { padding-top: 60px; padding-bottom: 60px; } @media (min-width: 576px) { .py-120 { padding-top: 80px; padding-bottom: 80px; } } @media (min-width: 992px) { .py-120 { padding-top: 120px; padding-bottom: 120px; } } .pt-120 { padding-top: 60px; } @media (min-width: 576px) { .pt-120 { padding-top: 80px; } } @media (min-width: 992px) { .pt-120 { padding-top: 120px; } } .pb-120 { padding-bottom: 60px; } @media (min-width: 576px) { .pb-120 { padding-bottom: 80px; } } @media (min-width: 992px) { .pb-120 { padding-bottom: 120px; } } .py-60 { padding-top: 30px; padding-bottom: 30px; } @media (min-width: 576px) { .py-60 { padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 992px) { .py-60 { padding-top: 60px; padding-bottom: 60px; } } .pt-60 { padding-top: 30px; } @media (min-width: 576px) { .pt-60 { padding-top: 40px; } } @media (min-width: 992px) { .pt-60 { padding-top: 60px; } } .pb-60 { padding-bottom: 30px; } @media (min-width: 576px) { .pb-60 { padding-bottom: 40px; } } @media (min-width: 992px) { .pb-60 { padding-bottom: 60px; } } /* ========================= Padding Md 60 Bottom =========================== */ .pt-md-60 { padding-top: 60px; } @media (min-width: 576px) { .pt-md-60 { padding-top: 80px; } } @media (min-width: 992px) { .pt-md-60 { padding-top: 60px; } } .pb-md-60 { padding-bottom: 60px; } @media (min-width: 576px) { .pb-md-60 { padding-bottom: 80px; } } @media (min-width: 992px) { .pb-md-60 { padding-bottom: 60px; } } /* ================================= padding Css End =========================== */ /* ================================= Border Color Css Start =========================== */ .border--base { border-color: hsl(var(--base)) !important; } .border--primary { border-color: hsl(var(--primary)) !important; } .border--secondary { border-color: hsl(var(--secondary)) !important; } .border--success { border-color: hsl(var(--success)) !important; } .border--danger { border-color: hsl(var(--danger)) !important; color: hsl(var(--static-white)); } .border--warning { border-color: hsl(var(--warning)) !important; } .border--info { border-color: hsl(var(--info)) !important; } .border--violet { border-color: hsl(var(--violet)) !important; } /* ================================= Border Color Css End =========================== */ /* =========================== Accodion Css start ============================= */ .custom--accordion .accordion-item { border: 1px solid hsl(var(--dark) / 0.09); background-color: transparent !important; border-radius: 5px; overflow: hidden; } .custom--accordion .accordion-item:not(:last-child) { margin-bottom: 20px; } .custom--accordion .accordion-body { padding: 20px; background-color: hsl(var(--section-bg)); } .custom--accordion .accordion-body .text { max-width: 60%; } @media screen and (max-width: 575px) { .custom--accordion .accordion-body .text { max-width: 100%; } } .custom--accordion:first-of-type .accordion-button.collapsed { border-radius: 5px; } .custom--accordion:last-of-type .accordion-button.collapsed { border-radius: 5px; } .custom--accordion .accordion-button { background-color: hsl(var(--section-bg)); color: var(--heading-color); padding: 15px; } @media screen and (max-width: 575px) { .custom--accordion .accordion-button { padding: 13px; padding-right: 30px; } } .custom--accordion .accordion-button::after { background-image: none; } .custom--accordion .accordion-button:focus { box-shadow: none; } .custom--accordion .accordion-button:not(.collapsed) { color: hsl(var(--white)); background-color: hsl(var(--dark)) !important; box-shadow: none; } .custom--accordion .accordion-button:not(.collapsed)::after { transform: rotate(0deg); background-image: none; color: hsl(var(--base)); } .custom--accordion .accordion-button[aria-expanded="true"]::after, .custom--accordion .accordion-button[aria-expanded="false"]::after { font-family: "Line Awesome Free"; font-weight: 600; content: "\f068"; display: inline-block; position: relative; margin-left: auto; width: unset !important; right: 0px; color: hsl(var(--white)); } .custom--accordion .accordion-button[aria-expanded="false"]::after { content: "\f067"; color: hsl(var(--body-color)); } /* ================================= Accodion Css End =========================== */ /* ================================= Button Css Start =========================== */ button { border: none; transition: 0.1s linear; } button:focus { outline: none; box-shadow: none; } .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active { color: none; background-color: none; border-color: none; } .pill { border-radius: 44px !important; } .btn { color: hsl(var(--static-white)) !important; font-weight: 500; padding: 11px 39px; border-radius: 4px; position: relative; z-index: 1; text-align: center; border: 1px solid transparent; line-height: 1; } .btn:focus { outline: none; box-shadow: none; } @media screen and (max-width: 767px) { .btn { font-size: 0.9375rem; padding: 10px 32px; } } @media screen and (max-width: 575px) { .btn { font-size: 0.875rem; padding: 9px 28px; } } .btn:hover, .btn:focus, .btn:focus-visible { color: hsl(var(--heading-color)); border-color: transparent !important; box-shadow: none !important; } .btn--lg { padding: 16px 32px; } @media screen and (max-width: 1499px) { .btn--lg { padding: 14px 28px; } } @media screen and (max-width: 1399px) { .btn--lg { padding: 13px 26px; } } @media screen and (max-width: 767px) { .btn--lg { padding: 11px 25px; } } .btn--sm { padding: 10px 15px; font-size: 14px; } @media screen and (max-width: 767px) { .btn--sm { padding: 8px 12px; } } .btn--icon { width: 35px; height: 35px; line-height: 35px; padding: 0; } .btn .icon { margin-right: 3px; } .btn--base { background-color: hsl(var(--base)) !important; color: hsl(var(--static-white)) !important; } .btn--base:hover, .btn--base:focus .btn--base:focus-visible { background-color: hsl(var(--base-d-100)) !important; border: 1px solid hsl(var(--base-d-100)) !important; color: hsl(var(--static-white)) !important; } .btn--base.outline { background-color: transparent !important; border: 1px solid hsl(var(--base)) !important; color: hsl(var(--base)) !important; } .btn--base.outline:hover, .btn--base.outline:focus .btn--base.outline:focus-visible { background-color: hsl(var(--base)) !important; color: hsl(var(--white)) !important; } .btn--white { background-color: var(--white-btn-bg) !important; color: var(--dark-btn-bg) !important; } .btn--white:hover, .btn--white:focus .btn--white:focus-visible { background-color: hsl(var(--white)) !important; border: 1px solid hsl(var(--white)) !important; color: hsl(var(--black)) !important; opacity: 0.9; } .btn--white.outline { background-color: transparent !important; border: 1px solid hsl(var(--white)) !important; color: hsl(var(--white)) !important; } .btn--white.outline:hover, .btn--white.outline:focus .btn--base.outline:focus-visible { background-color: hsl(var(--white)) !important; color: hsl(var(--black)) !important; } .btn--static-white { background-color: hsl(var(--static-white)) !important; color: #22262a !important; } .btn--static-white:hover, .btn--static-white:focus .btn--static-white:focus-visible { background-color: hsl(var(--base)) !important; border: 1px solid hsl(var(--base)) !important; color: hsl(var(--static-white)) !important; } .btn--dark { background-color: hsl(var(--black)) !important; color: var(--white-btn-bg) !important; } .btn--dark:hover, .btn--dark:focus .btn--dark:focus-visible { background-color: hsl(var(--black)) !important; border: 1px solid hsl(var(--black)) !important; color: hsl(var(--white)) !important; } .btn--primary { background-color: hsl(var(--primary)) !important; } .btn--primary:hover, .btn--primary:focus .btn--primary:focus-visible { background-color: hsl(var(--primary-d-100)) !important; border: 1px solid hsl(var(--primary-d-100)) !important; color: hsl(var(--white)) !important; } .btn--primary.outline { border: 1px solid hsl(var(--primary)) !important; background-color: transparent !important; color: hsl(var(--primary)) !important; } .btn--primary.outline:hover, .btn--primary.outline:focus .btn--primary.outline:focus-visible { background-color: hsl(var(--primary)) !important; color: hsl(var(--white)) !important; } .btn--secondary { background-color: hsl(var(--secondary)) !important; } .btn--secondary:hover, .btn--secondary:focus .btn--secondary:focus-visible { background-color: hsl(var(--secondary-d-100)) !important; border: 1px solid hsl(var(--secondary-d-100)) !important; color: hsl(var(--white)) !important; } .btn--secondary.outline { border: 1px solid hsl(var(--secondary)) !important; background-color: transparent !important; color: hsl(var(--secondary)) !important; } .btn--secondary.outline:hover, .btn--secondary.outline:focus .btn--secondary.outline:focus-visible { background-color: hsl(var(--secondary)) !important; color: hsl(var(--white)) !important; } .btn--success { background-color: hsl(var(--success)) !important; } .btn:disabled { border: 0; opacity: 0.4; } .btn--success:hover, .btn--success:focus .btn--success:focus-visible { background-color: hsl(var(--success-d-200)) !important; color: hsl(var(--white)) !important; border-color: hsl(var(--success-d-200)) !important; } .btn--success.outline { border: 1px solid hsl(var(--success)) !important; background-color: transparent !important; color: hsl(var(--success)) !important; } .btn--success.outline:hover, .btn--success.outline:focus .btn--success.outline:focus-visible { background-color: hsl(var(--success)) !important; color: hsl(var(--white)) !important; } .btn--danger { background-color: hsl(var(--danger)) !important; } .btn--danger:hover, .btn--danger:focus .btn--danger:focus-visible { background-color: hsl(var(--danger-d-300)) !important; border: 1px solid hsl(var(--danger-d-300)) !important; color: hsl(var(--white)) !important; } .btn--danger.outline { border: 1px solid hsl(var(--danger)) !important; background-color: transparent !important; color: hsl(var(--danger)) !important; } .btn--danger.outline:hover, .btn--danger.outline:focus .btn--danger.outline:focus-visible { background-color: hsl(var(--danger)) !important; color: hsl(var(--white)) !important; } .btn--warning { background-color: hsl(var(--warning)) !important; } .btn--warning:hover, .btn--warning:focus .btn--warning:focus-visible { background-color: hsl(var(--warning-d-100)) !important; border: 1px solid hsl(var(--warning-d-100)) !important; color: hsl(var(--white)) !important; } .btn--warning.outline { border: 1px solid hsl(var(--warning)) !important; background-color: transparent !important; color: hsl(var(--warning)) !important; } .btn--warning.outline:hover, .btn--warning.outline:focus .btn--warning.outline:focus-visible { background-color: hsl(var(--warning)) !important; color: hsl(var(--white)) !important; } .btn--info { background-color: hsl(var(--info)) !important; } .btn--info:hover, .btn--info:focus .btn--info:focus-visible { background-color: hsl(var(--info-d-100)) !important; border: 1px solid hsl(var(--info-d-100)) !important; color: hsl(var(--white)) !important; } .btn--info.outline { border: 1px solid hsl(var(--info)) !important; background-color: transparent !important; color: hsl(var(--info)) !important; } .btn--info.outline:hover, .btn--info.outline:focus .btn--info.outline:focus-visible { background-color: hsl(var(--info)) !important; color: hsl(var(--white)) !important; } /* ================================= Button Css End =========================== */ /* ================================= Card Css Start =========================== */ .custom--card { border-radius: 5px; box-shadow: none; background-color: hsl(var(--bg-color)); border: transparent; } .custom--card .card-header { padding: 13px 20px; background-color: transparent; border-bottom: 1px solid hsl(var(--white) / 0.1); } .custom--card .card-header .card-title { margin-bottom: 0; } .custom--card .card-body { background-color: transparent; padding: 20px; border-radius: 0px; } .custom--card .card-title { color: hsl(var(--white)); } .custom--card .card-body__icon { font-size: 26px; color: hsl(var(--white)); } .custom--card .card-footer { padding: 13px 20px; background-color: transparent; border-top: 1px solid hsl(var(--dark) / 0.1); } .card.custom--card.ticket-box { background: transparent; border: 0; } .ticket-box .card-header { padding: 0; border: 0; } .ticket-box .card-body { padding: 0; } .ticket-box__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 10px; } .ticket-box__header .title { margin-bottom: 0; } .ticket-box__header .btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; } /* ================================= Card Css End =========================== */ /* ================================= Form Css Start =========================== */ /* Form Label */ .form--label { color: hsl(var(--heading-color)); margin-bottom: 6px; } .form-group { margin-bottom: 1rem; } @media screen and (max-width: 575px) { .form-group { margin-bottom: 12px; } } /* Form Select */ .select { color: hsl(var(--body-color)) !important; } .select:focus { border-color: hsl(var(--base)); color: hsl(var(--heading-color)) !important; } .select option { background-color: hsl(var(--bg-color)); color: hsl(var(--heading-color)); } .form--control { width: 100%; font-weight: 400; line-height: 1; color: hsl(var(--white)); background-color: transparent; border: 1px solid hsl(var(--white) / 0.1); border-radius: 5px; padding: 11px 15px; outline: none; } .form-select { height: 45px !important; } .form--control::placeholder { color: hsl(var(--body-color)); } @media screen and (max-width: 575px) { .form--control::placeholder { font-size: 0.8125rem; } } .form--control:focus { color: hsl(var(--white)); box-shadow: none; border-color: hsl(var(--white) / 0.2); background-color: transparent; } .form--control:disabled, .form--control[readonly] { background-color: hsl(var(--white) / 0.1); opacity: 0.5; cursor: no-drop; border: 1px solid hsl(var(--white) / 0.1) !important; } .form--control[type="password"] { color: hsl(var(--body)); } .form--control[type="password"]:focus { color: hsl(var(--heading-color)); } .form--control[type="date"] { color: hsl(var(--body-color)); } .form--control[type="date"]:focus { color: hsl(var(--heading-color)); } .form--control[type="file"] { line-height: 43px; padding: 0; position: relative; } .form--control[type="file"]::file-selector-button { border: 1px solid transparent; padding: 4px 6px; border-radius: 0.2em; background-color: hsl(var(--base)) !important; transition: 0.1s linear; line-height: 21px; position: relative; margin-left: 8px; color: hsl(var(--static-white)) !important; } .form--control[type="file"]::file-selector-button:hover { background-color: hsl(var(--base)); border: 1px solid hsl(var(--base)); color: hsl(var(--black)); } /* Form Control End */ textarea.form--control { height: 148px; } @media screen and (max-width: 575px) { textarea.form--control { height: 125px; } } @media screen and (max-width: 575px) { textarea.form--control { height: 115px; } } /* Autofill Css */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset; -webkit-text-fill-color: hsl(var(--heading-color)) !important; } [data-theme="dark"] { input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: hsl(var(--light)) !important; caret-color: hsl(var(--light)); } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #2d2d2f inset; -webkit-text-fill-color: hsl(var(--light)) !important; caret-color: hsl(var(--light)); } } /* Autofill Css End */ /* input gruop */ .input--group { position: relative; } .border-color { border: 1px solid hsl(var(--white) / 0.2); } /* Show Hide Password */ .password-show-hide { position: absolute; right: 20px; z-index: 5; cursor: pointer; top: 50%; transform: translateY(-50%); color: hsl(var(--heading-color)); } /* --------------- Number Arrow None --------------------- */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } /* Custom Checkbox Design */ .form--check { display: flex; flex-wrap: wrap; } .form--check a { display: inline; } .form--check .form-check-input { box-shadow: none; background-color: transparent; box-shadow: none !important; border: 0; position: relative; border-radius: 2px; width: 14px; height: 14px; border: 1px solid hsl(var(--white) / 0.2); cursor: pointer; } .form--check .form-check-input:checked { background-color: hsl(var(--base)) !important; border-color: hsl(var(--base)) !important; box-shadow: none; } .form--check .form-check-input:checked[type="checkbox"] { background-image: none; } .form--check .form-check-input:checked::before { position: absolute; content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: hsl(var(--static-white)); top: 50%; left: 50%; transform: translate(-50%, -50%); } .form--check .form-check-label { width: calc(100% - 14px); padding-left: 8px; cursor: pointer; font-size: 0.875rem; } @media screen and (max-width: 424px) { .form--check label { font-size: 0.875rem; } } @media screen and (max-width: 424px) { .form--check a { font-size: 0.875rem; } } /* Custom Radion Design */ .form--radio .form-check-input { box-shadow: none; border: 1px solid hsl(var(--body-color)); position: relative; background-color: transparent; cursor: pointer; width: 20px; height: 20px; } @media screen and (max-width: 424px) { .form--radio .form-check-input { width: 17px; height: 17px; } } .form--radio .form-check-input:active { filter: brightness(100%); } .form--radio .form-check-input:checked { background-color: transparent; border-color: hsl(var(--base)); } .form--radio .form-check-input:checked[type="radio"] { background-image: none; } .form--radio .form-check-input:checked::before { position: absolute; content: ""; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 14px; height: 14px; background-color: hsl(var(--base)); border-radius: 50%; z-index: 999; } @media screen and (max-width: 424px) { .form--radio .form-check-input:checked::before { width: 11px; height: 11px; -webkit-transform: translate(-55%, -55%); transform: translate(-55%, -55%); } } .form--radio .form-check-label { font-size: 0.875rem; color: hsl(var(--heading-color)); width: calc(100% - 18px); padding-left: 5px; cursor: pointer; } /* Custom Switch Design */ .form--switch { display: inline-block; } .form--switch .form-check-input { border-radius: 3px; background-image: none; position: relative; box-shadow: none; border: 0; background-color: var(--switch-bg) !important; padding: 10px !important; margin-left: 0; margin-bottom: 5px; border-radius: 40px; width: 40px; height: 20px; cursor: pointer; } .form--switch .form-check-input:focus { border-radius: 40px; background-image: none; position: relative; box-shadow: none; border: 0; } .form--switch .form-check-input::before { position: absolute; content: ""; width: 17px; height: 17px; background-color: var(--switch); top: 50%; transform: translateY(-50%); left: 2px; border-radius: 50%; transition: 0.1s linear; } .form--switch .form-check-input:checked::before { left: calc(100% - 19px); background-color: hsl(var(--base)) !important; } .form--switch .form-check-input:checked[type="checkbox"] { background-image: none; } .form--switch .form-check-label { width: calc(100% - 14px); padding-left: 5px; cursor: pointer; } /* Custom Switch End Design */ ::-webkit-calendar-picker-indicator { filter: invert(0.5); } ::-webkit-calendar-picker-indicator { background-image: url('data:image/svg+xml;utf8,'); } /* ================================= Form Css End =========================== */ /* ================================= Modal Css Start =========================== */ .custom--modal .modal-header { border-bottom: 0; padding: 24px 16px 0; background-color: hsl(var(--bg-color)); } .payment-modal.custom--modal .modal-header { padding: 24px 16px; gap: 15px; border-bottom: 1px solid hsl(var(--white) / 0.1); } .custom--modal .modal-header .btn-close { background-image: none; font-size: 1.5rem; -webkit-transition: var(--transition); transition: var(--transition); color: hsl(var(--white) / 0.8) !important; padding: 0; background-color: transparent; } .custom--modal .modal-header .btn-close:hover { color: hsl(var(--white)) !important; } .custom--modal .modal-header .btn-close:focus, .custom--modal .modal-header .btn-close:active { border: 0 !important; -webkit-box-shadow: none; box-shadow: none; } .custom--modal .modal-content { background-color: hsl(var(--bg-color)); border-radius: 8px; overflow: hidden; border: 0; box-shadow: 0 0 20px hsl(var(--black) / 0.8); } .custom--modal .modal-body { padding: 24px 16px; } .custom--modal .modal-icon i { font-size: 2rem; color: hsl(var(--base)); border: 3px solid hsl(var(--base)); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .custom--modal .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0 16px 24px; border-top: 0; justify-content: flex-end; } .custom--modal.top-slide .modal-dialog { transition: transform 0.3s ease-out !important; transform: translateY(-50%) !important; } .custom--modal.top-slide.show .modal-dialog { transform: translateY(0) !important; } .custom--modal.scale-style .modal-dialog { transform: scale(0.9) !important; } .custom--modal.scale-style.show .modal-dialog { transform: none !important; } .view-video--modal .modal-header { position: relative; padding: 16px 24px; border-bottom: 1px solid hsl(var(--white) / 0.1); } .view-video--modal .modal-footer { position: relative; padding: 16px 24px; border-top: 1px solid hsl(var(--white) / 0.1); } .view-video--modal .modal-content { overflow: visible; } .view-video--modal .modal-close-btn { --size: 24px; width: var(--size); height: var(--size); border-radius: 50%; color: hsl(var(--black)); font-size: calc(var(--size) / 2); border: 1px solid hsl(var(--black) / 0.15) !important; background-color: hsl(var(--black) / 0.1) !important; backdrop-filter: blur(5px); z-index: 1; } [data-theme="dark"] .view-video--modal .modal-close-btn { color: hsl(var(--white)) !important; border: 1px solid hsl(var(--white) / 0.15) !important; background-color: hsl(var(--white) / 0.1) !important; } .view-video--modal .video-list { max-height: 450px; overflow-y: auto; } .modal-backdrop { background: hsl(var(--white) / 0.7); } [data-theme="dark"] .modal-backdrop { background: hsl(var(--black)); opacity: 0.7 !important; } .share-embed-btn.copy-btn { top: auto; bottom: 8px; transform: unset; } .share-embed textarea.form--control { height: 100px; display: block; } /* ================================= Modal Css End =========================== */ /* ================================= Pagination Css Start =========================== */ .flex-sm-fill.d-sm-flex.align-items-sm-center.justify-content-sm-between { padding: 16px 24px; } .pagination { flex-wrap: wrap; justify-content: center; } .pagination .page-item .page-link { border: 1px solid hsl(var(--white) / 0.08); margin: 0 5px; border-radius: 6px; height: 36px; width: 36px; display: flex; justify-content: center; align-items: center; background-color: transparent; font-weight: 500; padding: 0; color: hsl(var(--white)); font-size: 14px; } .pagination .page-item.active .page-link, .pagination .page-item .page-link:hover { background-color: hsl(var(--base)); color: hsl(var(--static-white)); } .pagination .page-item .page-link:focus { box-shadow: none; } /* ================================= Pagination Css End =========================== */ /* ================================= Table Css Start =========================== */ /* Table Content Css start */ @media screen and (max-width: 374px) { .customer { display: block; text-align: left; } } .customer__thumb { width: 35px; height: 35px; border-radius: 50%; overflow: hidden; } @media screen and (max-width: 374px) { .customer__thumb { margin-left: auto; } } .customer__content { width: calc(100% - 35px); padding-left: 15px; text-align: left; } @media screen and (max-width: 424px) { .customer__content { padding-left: 8px; } } @media screen and (max-width: 374px) { .customer__content { width: 100%; padding-left: 0px; padding-top: 5px; } } .customer__name { margin-bottom: 0; color: hsl(var(--heading-color)); } .action-buttons { gap: 10px; justify-content: flex-end; } @media screen and (max-width: 575px) { .action-buttons { gap: 7px; } } .action-btn { font-size: 0.75rem; font-weight: 400; border-radius: 5px; padding: 2px 10px; border: 1px solid transparent; } @media screen and (max-width: 575px) { .action-btn { padding: 2px 6px; } } .delete-btn { color: hsl(var(--static-light)); background-color: hsl(var(--danger)); } .pause-btn { color: hsl(var(--static-white)); background-color: hsl(var(--warning)); } .active-btn { color: hsl(var(--black)); background-color: hsl(var(--white)); } .info-btn { color: hsl(var(--static-white)); background-color: hsl(var(--info)); } .info-btn:hover { color: hsl(var(--static-white)); } /* Table Content Css end */ .table { margin: 0; border-collapse: collapse; border-collapse: separate; border-spacing: 0px 0px; } .table thead tr th { background-color: transparent; text-align: center; padding: 16px; color: hsl(var(--heading-color)); border-bottom: 1px solid hsl(var(--white) / 0.1); font-weight: 600; max-width: 170px; font-size: 14px; } @media screen and (max-width: 1599px) { .table thead tr th { font-size: 0.9375rem; } } .table thead tr th:not(:first-child) { border-left: 0; } .table thead tr th:first-child { text-align: left; } .table thead { background-color: hsl(var(--white) / 0.05); } .table thead tr th:last-child { text-align: right; } .table tbody { border: 0 !important; } .table tbody tr td { text-align: center; vertical-align: middle; padding: 12px 16px; border: 0; color: hsl(var(--heading-color)); max-width: 170px; font-size: 14px; } .table tbody tr td { border-bottom: 1px solid hsl(var(--white) / 0.05); } .empty-msg { width: 100% !important; justify-content: center !important; align-items: center !important; } .empty-msg::before { display: none !important; } @media screen and (max-width: 575px) { .table tbody tr td { font-size: 0.8125rem; } } .table tbody tr td::before { content: attr(data-label); color: hsl(var(--heading-color)); font-weight: 500; display: none; width: 45% !important; text-align: left; } .table tbody tr td:first-child { text-align: left; } .table tbody tr td:last-child { text-align: right; } /* .table tbody tr:first-child td { padding-top: 15px; } .table tbody tr:last-child td { padding-bottom: 0; } */ @media screen and (max-width: 767px) { .table--responsive--md thead { display: none; } .table--responsive--md tbody tr { display: block; } .table--responsive--md tbody tr:not(:last-child) { border-bottom: 1px solid var(--form-border); } .table--responsive--md tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: right; padding: 10px 15px; border: none; border-bottom: 1px solid hsl(var(--black) / 0.8); max-width: unset; } } @media screen and (max-width: 767px) and (max-width: 575px) { .table--responsive--md tbody tr td { padding-bottom: 8px !important; padding-top: 8px !important; } } @media screen and (max-width: 767px) { .table--responsive--md tbody tr td:last-child { border: none; } } @media screen and (max-width: 767px) { .table--responsive--md tbody tr td:first-child { text-align: right; border-left: 0; } } @media screen and (max-width: 767px) { .table--responsive--md tbody tr td::before { display: block; font-size: 0.875rem; color: hsl(var(--heading-color)); } } @media screen and (max-width: 767px) and (max-width: 575px) { .table--responsive--md tbody tr td::before { font-size: 0.8125rem; } } @media screen and (max-width: 767px) and (max-width: 767px) { .table--responsive--md tbody tr td { padding-left: 0; padding-right: 0; } } @media screen and (max-width: 767px) { .table--responsive--md tbody tr td { border: 0; } } @media screen and (max-width: 991px) { .table--responsive--lg thead { display: none; } .table--responsive--lg tbody tr { display: block; } .table--responsive--lg tbody tr:not(:last-child) { border-bottom: 1px solid hsl(var(--white) / 0.1); } .table--responsive--lg tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: right; padding: 10px 15px; border: none; max-width: unset; } } @media screen and (max-width: 991px) and (max-width: 575px) { .table--responsive--lg tbody tr td { padding-bottom: 8px !important; padding-top: 8px !important; } } @media screen and (max-width: 991px) { .table--responsive--lg tbody tr td:last-child { border: none; } } @media screen and (max-width: 991px) { .table--responsive--lg tbody tr td:first-child { text-align: right; border-left: 0; } } @media screen and (max-width: 991px) { .table--responsive--lg tbody tr td::before { display: block; font-size: 0.875rem; color: hsl(var(--heading-color)); } } @media screen and (max-width: 991px) and (max-width: 575px) { .table--responsive--lg tbody tr td::before { font-size: 0.8125rem; } } @media screen and (max-width: 991px) { .table--responsive--lg tbody tr td { border: none; } } @media screen and (max-width: 1199px) { .table--responsive--xl thead { display: none; } .table--responsive--xl tbody tr { display: block; } .table--responsive--xl tbody tr:not(:last-child) { border-bottom: 1px solid var(--form-border); } .table--responsive--xl tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: right; padding: 10px 15px; border: none; border-bottom: 1px solid hsl(var(--black) / 0.08); max-width: unset; } } @media screen and (max-width: 1199px) and (max-width: 575px) { .table--responsive--xl tbody tr td { padding-bottom: 8px !important; padding-top: 8px !important; } } @media screen and (max-width: 1199px) { .table--responsive--xl tbody tr td:last-child { border: none; } } @media screen and (max-width: 1199px) { .table--responsive--xl tbody tr td:first-child { text-align: right; border-left: 0; } } @media screen and (max-width: 1199px) { .table--responsive--xl tbody tr td::before { display: block; font-size: 0.875rem; color: hsl(var(--heading-color)); } } @media screen and (max-width: 1199px) and (max-width: 575px) { .table--responsive--xl tbody tr td::before { font-size: 0.8125rem; } } @media screen and (max-width: 1199px) and (max-width: 1199px) { .table--responsive--xl tbody tr td { padding-left: 0; padding-right: 0; } } @media screen and (max-width: 1199px) { .table--responsive--xl tbody tr td { border: 0; } } @media screen and (max-width: 1399px) { .table--responsive--xxl thead { display: none; } .table--responsive--xxl tbody tr { display: block; } .table--responsive--xxl tbody tr:not(:last-child) { border-bottom: 1px solid var(--form-border); } .table--responsive--xxl tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: 15px; text-align: right; padding: 10px 15px; border: none; border-bottom: 1px solid hsl(var(--black) / 0.08); max-width: unset; } } @media screen and (max-width: 1399px) and (max-width: 575px) { .table--responsive--xxl tbody tr td { padding-bottom: 8px !important; padding-top: 8px !important; } } @media screen and (max-width: 1399px) { .table--responsive--xxl tbody tr td:last-child { border: none; } } @media screen and (max-width: 1399px) { .table--responsive--xxl tbody tr td:first-child { text-align: right; border-left: 0; } } @media screen and (max-width: 1399px) { .table--responsive--xxl tbody tr td::before { display: block; font-size: 0.875rem; color: hsl(var(--heading-color)); } } @media screen and (max-width: 1399px) and (max-width: 575px) { .table--responsive--xxl tbody tr td::before { font-size: 0.8125rem; } } @media screen and (max-width: 1399px) and (max-width: 1399px) { .table--responsive--xxl tbody tr td { padding-left: 0; padding-right: 0; } } @media screen and (max-width: 1399px) { .table--responsive--xxl tbody tr td { border: 0; } } /* ================================= Table Css End =========================== */ /* ================================= Tab Css Start =========================== */ .custom--tab { justify-content: center; border-radius: 6px; margin-bottom: 40px; } .custom--tab .nav-item { border-bottom: 0; padding: 5px; } .custom--tab .nav-item .nav-link { color: hsl(var(--white)); padding: 8px 25px; background-color: transparent !important; border-radius: 5px; transition: 0.4s; border: 1px solid hsl(var(--black) / 0.08) !important; } @media screen and (max-width: 1199px) { .custom--tab .nav-item .nav-link { padding: 12px 15px; } } .custom--tab .nav-item .nav-link.active { color: hsl(var(--white)); background-color: hsl(var(--base-d-200)) !important; border: 1px solid transparent !important; } .custom--tab .nav-item .nav-link.active:hover { color: hsl(var(--white)); } .custom--tab .nav-item .nav-link:hover { color: hsl(var(--base)); } /* ================================= Tab Css End =========================== */ /* ================================= Bandge Css Start =========================== */ .badge { font-size: 0.8em; font-weight: 500; color: var(--badge-color) !important; background-color: var(--badge-bg) !important; border: 1px solid var(--badge-border) !important; padding: 6px 12px; border-radius: 5px; padding-left: 26px; position: relative; line-height: 1; } .badge::after { content: ""; position: absolute; top: 49%; transform: translateY(-50%); left: 12px; width: 7px; height: 7px; background-color: var(--badge-color); border-radius: 50%; animation: shadowEfect 2s linear infinite; } @keyframes shadowEfect { 0% { box-shadow: 0 0 0 0 var(--badge-border); } 70% { box-shadow: 0 0 0 7px rgba(0, 91, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 91, 234, 0); } } .badge--base { --badge-color: hsl(var(--base)); --badge-bg: hsl(var(--base) / 0.05); --badge-border: hsl(var(--base) / 0.3); } .badge--white { --badge-color: hsl(var(--white)); --badge-bg: hsl(var(--white) / 0.05); --badge-border: hsl(var(--white) / 0.3); } .badge--primary { --badge-color: hsl(var(--primary)); --badge-bg: hsl(var(--primary) / 0.05); --badge-border: hsl(var(--primary) / 0.3); } .badge--secondary { --badge-color: hsl(var(--secondary)); --badge-bg: hsl(var(--secondary) / 0.05); --badge-border: hsl(var(--secondary) / 0.3); } .badge--success { --badge-color: hsl(var(--success)); --badge-bg: hsl(var(--success) / 0.05); --badge-border: hsl(var(--success) / 0.3); } .badge--danger { --badge-color: hsl(var(--danger)); --badge-bg: hsl(var(--danger) / 0.05); --badge-border: hsl(var(--danger) / 0.3); } .badge--warning { --badge-color: hsl(var(--warning)); --badge-bg: hsl(var(--warning) / 0.05); --badge-border: hsl(var(--warning) / 0.3); } .badge--info { --badge-color: hsl(var(--info)); --badge-bg: hsl(var(--info) / 0.05); --badge-border: hsl(var(--info) / 0.3); } .badge--dark { --badge-color: hsl(var(--white)); --badge-bg: hsl(var(--white) / 0.05); --badge-border: hsl(var(--white) / 0.3); } .badge--violet { --badge-color: hsl(var(--violet)); --badge-bg: hsl(var(--violet) / 0.05); --badge-border: hsl(var(--violet) / 0.3); } /* ================================= Bandge Css End =========================== */ /* ================================= preload Css Start =========================== */ .preloader { position: fixed; z-index: 999999; background-color: hsl(var(--black)); width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; } .loader { width: 60px; height: 60px; border-radius: 50%; position: relative; animation: rotate 1s linear infinite; margin-bottom: 10px; } @media (max-width: 767px) { .loader { width: 40px; height: 40px; } } .loader::before, .loader::after { content: ""; box-sizing: border-box; position: absolute; inset: 0px; border-radius: 50%; border: 5px solid hsl(var(--white)); animation: prixClipFix 2s linear infinite; } .loader::after { transform: rotate3d(90, 90, 0, 180deg); border-color: hsl(var(--base)); } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes prixClipFix { 0% { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); } 50% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); } 75%, 100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); } } .loading06 span { position: relative; color: hsl(var(--white) / 0.2); font-size: 32px; font-weight: 700; } @media (max-width: 767px) { .loading06 span { font-size: 24px; } } .loading06 span::after { position: absolute; top: 0; left: 0; content: attr(data-text); color: hsl(var(--white)); opacity: 0; transform: rotateY(-90deg); animation: loading06 4s infinite; } .loading06 span:nth-child(2)::after { animation-delay: 0.2s; } .loading06 span:nth-child(3)::after { animation-delay: 0.4s; } .loading06 span:nth-child(4)::after { animation-delay: 0.6s; } .loading06 span:nth-child(5)::after { animation-delay: 0.8s; } .loading06 span:nth-child(6)::after { animation-delay: 1s; } .loading06 span:nth-child(7)::after { animation-delay: 1.2s; } @keyframes loading06 { 0%, 75%, 100% { transform: rotateY(-90deg); opacity: 0; } 25%, 50% { transform: rotateY(0); opacity: 1; } } /* ================================= preload Css End =========================== */ /* ===================== Scroll to Top Start ================================= */ .scroll-top { position: fixed; right: 30px; bottom: 30px; color: hsl(var(--white)); width: 40px; height: 40px; display: flex; border: 2px solid hsl(var(--white)); border-radius: 50%; justify-content: center; align-items: center; z-index: 5; transition: 0.5s; cursor: pointer; visibility: hidden; opacity: 0; bottom: -50px; animation: scroll_top 5s linear infinite; } @media screen and (max-width: 767px) { .scroll-top { right: 20px; width: 35px; height: 35px; } } .scroll-top:hover { color: hsl(var(--black)); background-color: hsl(var(--white)); } .scroll-top.show { visibility: visible; opacity: 1; bottom: 30px; } @keyframes scroll_top { 0%, to { transform: translateY(0px); } 50% { transform: translateY(20px); } } /* ===================== Scroll to Top End ================================= */ /* =================== Overlay Search Box Start ===================================== */ @media screen and (max-width: 991px) { .toggle-search { order: -1; margin-left: auto; margin-right: 20px; } } .toggle-search__close { right: 30px; top: 30px; font-size: 1.5rem; width: 60px; height: 60px; border-radius: 50%; background-color: transparent; border: 1px solid hsl(var(--black) / 0.2); } .toggle-search__close:hover { background-color: hsl(var(--base)); border-color: hsl(var(--base)); color: hsl(var(--white)); } @media screen and (max-width: 991px) { .toggle-search__close { font-size: 1.25rem; width: 50px; height: 50px; } } @media screen and (max-width: 767px) { .toggle-search__close { font-size: 1rem; width: 45px; height: 45px; } } .toggle-search__icon { color: hsl(var(--white)); transform: scaleX(-1); } .toggle-search__box { position: fixed; z-index: 99999; width: 100%; height: 100%; background-color: hsl(var(--white)); transform: scale(0.8); visibility: hidden; opacity: 0; transition: 0.3s ease-in-out; } .toggle-search__box.show { transform: scale(1); visibility: visible; opacity: 1; } .toggle-search__inner { width: 60%; } @media screen and (max-width: 991px) { .toggle-search__inner { width: 70%; } } @media screen and (max-width: 767px) { .toggle-search__inner { width: 80%; } } @media screen and (max-width: 424px) { .toggle-search__inner { width: 90%; } } .toggle-search__button { color: hsl(var(--white)); background-color: hsl(var(--base)); border: 0; } .toggle-search__button-icon { transform: scaleX(-1); } /* =================== Overlay Search Box End ===================================== */ /* ================================= Template Selection Css Start =========================== */ ::selection { color: hsl(var(--white)); background: hsl(var(--base-d-100)); } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background-color: hsl(var(--base-d-100)); border: 0px solid transparent; border-radius: 0px; } ::-webkit-scrollbar-track { background-color: hsl(var(--black) / 0.15); } /* ================================= Template Selection Css End =========================== */ /* ================================= Social Icon Css Start =========================== */ .social-list { display: flex; flex-wrap: wrap; align-items: center; } .social-list__item { margin-right: 10px; } .social-list__item:last-child { margin-right: 0; } .social-list__link { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; position: relative; overflow: hidden; border: 1px solid hsl(var(--white) / 0.4); transition: 0.3s; cursor: pointer; color: hsl(var(--white)); } .social-list__link.active { background-color: hsl(var(--base)); color: hsl(var(--white)) !important; border-color: hsl(var(--base)) !important; } @media screen and (max-width: 767px) { .social-list__link { width: 35px; height: 35px; font-size: 0.875rem; } } .social-list__link:hover, .social-list__link:focus { background-color: hsl(var(--base)); color: hsl(var(--white)); border-color: hsl(var(--base)); } /* ================================= Social Icon Css End =========================== */ /* ================================= Text List Css Start =========================== */ .text-list { margin: -8px 0px; } .text-list.inline { display: flex; align-items: center; margin: 0px -8px; } .text-list.inline .text-list__item { padding: 0px 8px; } .text-list__item { padding: 8px 0px; color: hsl(var(--body-color)); } .text-list__item-icon { color: hsl(var(--base)); margin-right: 5px; } /* ================================= Text List Css End =========================== */ /* ================================= Home Fulid Sidebar Css Start =========================== */ .sidebar-logo { display: block; padding: 26px 24px; flex-shrink: 0; } @media (max-width: 991px) { .sidebar-logo { padding: 24px 20px 20px; } } .sidebar-logo__link { display: inline-block; width: 100%; } .sidebar-logo img { max-width: 160px; width: 100%; } .sidebar-menu { --sidebar-width: 215px; height: 100vh; z-index: 999; width: var(--sidebar-width); border-radius: 0; transition: width 0.2s linear; position: fixed; left: 0; top: 0; align-items: start; flex-direction: row; background-color: hsl(var(--bg-color)); } .sidebar-menu__inner { display: flex; flex-direction: column; height: 100%; overscroll-behavior: contain; } .sidebar-menu-list { flex: 1; overflow-y: auto; } .sidebar-menu-list::-webkit-scrollbar { width: 8px; } .sidebar-menu.show { background: hsl(var(--body-background)); box-shadow: var(--box-shadow-two); border-right: 0; transform: translateX(0); z-index: 99991; } @media screen and (max-width: 1399px) { .sidebar-menu { height: calc(100vh - var(--header-h)); top: var(--header-h); transform: translateX(-100%); z-index: 9992; transition: all 0.2s linear; box-shadow: var(--box-shadow); } } .sidebar-menu__inner { width: 100%; } .sidebar-menu-list { padding: 0; } @media (max-width: 1399px) { .sidebar-menu-list { padding-block: 20px; } } .sidebar-menu-list__item { padding-inline: 10px; } .sidebar-menu-list__title:hover { background-color: transparent !important; } .sidebar-menu-list__link { display: flex; position: relative; width: 100%; color: hsl(var(--light)); font-weight: 500; font-size: 14px; border-radius: 5px; padding: 10px 16px; line-height: 1; align-items: center; justify-content: flex-start; gap: 12px; transition: unset; white-space: nowrap; } .sidebar-menu-list__link:hover, .sidebar-menu-list__link.active, .sidebar-menu-list__item.active > a { color: hsl(var(--white)); background-color: hsl(var(--white) / 0.03); } .sidebar-menu-list__link .icon { position: relative; /* width: 30px; */ display: flex; /* align-items: center; */ justify-content: center; font-size: 20px; } .sidebar-menu-list .separate-border { display: block; border-top: 1px solid hsl(var(--white) / 0.06); margin: 20px 0; } .sidebar-menu.show-sm { --sidebar-width: 68px; width: var(--sidebar-width); } @media screen and (max-width: 1399px) { .sidebar-menu.show-sm { width: 215px; transform: translateX(0); } } .sidebar-menu.show-sm .sidebar-menu__inner .sidebar-logo { padding-inline: 0; text-align: center; } .side-sm-logo { max-width: 32px; width: 100%; display: none; } @media (min-width: 1400px) { .sidebar-menu.show-sm .sidebar-menu-list__link { padding-inline: 0; justify-content: center; } .sidebar-menu.show-sm .side-sm-logo { display: inline-block; } .sidebar-menu.show-sm .sidebar-menu__inner .sidebar-logo__link { display: none; } } .sidebar-menu.show-sm .sidebar-menu__inner .sidebar-menu-list__link { text-align: center; } .sidebar-menu.show-sm .sidebar-menu__inner .sidebar-menu-list__link .text { display: none; } @media screen and (max-width: 1399px) { .sidebar-menu.show-sm .sidebar-menu__inner .sidebar-menu-list__link .text { display: inline-block; } } .sidebar-menu.two { transform: translateX(99999999px); z-index: 9992; } .sidebar-menu.two .sidebar-logo { padding-left: 0; justify-content: center; } .sidebar-menu.two .sidebar-logo__link { display: none; } .sidebar-menu.two.show { transform: translateX(99999999px); z-index: 9992; } @media screen and (max-width: 1399px) { .sidebar-menu.two { transform: translateX(0); z-index: 99991; width: 68px; } } @media screen and (max-width: 767px) { .sidebar-menu.two { display: none; } } .sidebar-menu.two .sidebar-menu-list__link { padding: 0; text-align: center; } .sidebar-menu.two .sidebar-menu-list__link .icon { margin: 0; } .sidebar-menu.two.pv-page { transform: translateX(0); z-index: 99991; width: 68px; } .sidebar-menu.two.pv-page.show { transform: translateX(-99999999px); z-index: 9992; } .sidebar-menu.pv-page { position: fixed; top: 0; left: 0; height: 100%; transform: translateX(-100%); z-index: 9992; } .sidebar-menu.pv-page.show { background: hsl(var(--body-background)); border-right: 0; transform: translateX(0); z-index: 99991; } /* ================================= Home Fulid Sidebar Css End =========================== */ /* ================================= Home Css Start =========================== */ .home-fluid { position: relative; } .home-fluid .home { position: relative; } .home-fluid .home__inner { display: flex; flex-wrap: wrap; } .home-fluid .home__right { width: 100%; padding-left: 215px; } .home-fluid .home__right.big-space { padding-left: 68px; } @media screen and (max-width: 1399px) { .home-fluid .home__right.big-space { padding-left: 0; } } .home-fluid .home__right.big-space .home-header__left .logo { display: inline-block; } .home-fluid .home__right.big-space .home-header__left .logo img { max-width: 150px; } @media screen and (max-width: 1399px) { .home-fluid .home__right.big-space .home-header__left .logo { display: none; } } .home-fluid .home__right.big-space .home-body.wh-body { padding: 15px 160px 0px 197px; } @media screen and (max-width: 1399px) { .home-fluid .home__right { padding-left: 0; } .home-fluid .home__right .home-header__left .logo { display: inline-block; } } @media screen and (max-width: 767px) { .home-fluid .home__right { padding-left: 0; } } .home-fluid .dropdown { display: inline-block !important; } .home-fluid .home-header { position: sticky; top: 0; background: hsl(var(--body-background)); z-index: 99; } .home-fluid .home-header__inner { padding: 16px var(--inline-p); gap: 10px; background-color: hsl(var(--bg-color)); position: relative; } .home-fluid .home-header__left { display: flex; align-items: center; justify-content: flex-start; gap: 24px; } @media (max-width: 991px) { .home-fluid .home-header__left { gap: 16px; } } .home-fluid .home-header__left .logo { display: none; transition: 0.1s linear; } .home-fluid .home-header__left .search-form { width: 500px; } @media screen and (max-width: 1499px) { .home-fluid .home-header__left .search-form { width: 440px; } } @media screen and (max-width: 991px) { .home-fluid .home-header__left .search-form { width: 260px; } } @media screen and (max-width: 767px) { .home-fluid .home-header__left .search-form { width: calc(100% - 20px); background-color: hsl(var(--bg-color)); height: 100%; position: absolute; visibility: hidden; opacity: 0; right: 0; top: 0; z-index: 99; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } .home-fluid .home-header__left .search-form .form-group { width: 100%; } } .home-fluid .home-header__left .search-form.show { visibility: visible; opacity: 1; } .home-fluid .home-header__left .search-form .form-group { position: relative; margin-bottom: 0; } .home-fluid .home-header__left .search-form .form-group .form--control { font-size: 0.875rem; color: hsl(var(--heading-color)); background-color: var(--header-search-bg); padding: 14px 25px 14px 45px; border-radius: 24px; transition: 0.1s linear; border: 0; font-weight: 500; } .home-fluid .home-header__left .search-form .form-group .form--control::placeholder { font-size: 0.875rem; color: hsl(var(--body-color)); font-weight: 500; } @media screen and (max-width: 767px) { .home-fluid .home-header__left .search-form .form-group .form--control { padding: 10px 35px 10px 45px; background: hsl(var(--body-background)); } } .home-fluid .home-header__left .search-form .form-group .search-form-btn { line-height: 1; color: hsl(var(--heading-color)); position: absolute; left: 15px; top: 0; bottom: 0; } .home-fluid .home-header__left .search-form .form-group .search-form-btn:hover { color: hsl(var(--base)); } .home-fluid .home-header__left .sm-search-btn { font-size: 1.25rem; line-height: 1; color: hsl(var(--heading-color)); } @media screen and (max-width: 424px) { .home-fluid .home-header__left .sm-search-btn { font-size: 1.125rem; } } .home-fluid .home-header__left .search-close { display: inline-block !important; font-size: 0.75rem; line-height: 1; color: hsl(var(--heading-color)); position: absolute; right: 999999px; top: 0; bottom: 0; margin: auto 0; visibility: hidden; opacity: 0; z-index: 99; } .home-fluid .home-header__left .search-close.show { visibility: visible; opacity: 1; right: 24px; } .home-fluid .home-header__left-mic { font-size: 1.4375rem; line-height: 1; color: hsl(var(--heading-color)); cursor: pointer; flex-shrink: 0; } .home-fluid .home-header__left-mic:hover { color: hsl(var(--base)); } @media screen and (max-width: 424px) { .home-fluid .home-header__left-mic { font-size: 1.125rem; } } .home-fluid .home-header__right { gap: 15px; } @media screen and (max-width: 991px) { .home-fluid .home-header__right { gap: 10px; } } @media screen and (max-width: 575px) { .home-fluid .home-header__right { gap: 5px; } } @media screen and (max-width: 424px) { .home-fluid .home-header__right { gap: 3px; } } .home-fluid .home-header__right.hide { display: none; } .home-fluid .home-header__right .create { position: relative; } .home-fluid .home-header__right .create__btn { padding: 10.5px 21.5px; color: hsl(var(--static-white)) !important; font-size: 16px; display: flex; gap: 4px; align-items: center; } @media screen and (max-width: 424px) { .home-fluid .home-header__right .create__btn:focus-visible { background-color: transparent !important; border: 0 !important; } .home-fluid .home-header__right .create__btn:hover { background-color: transparent !important; } } .home-fluid .home-header__right .create__btn:active { top: 0; } .home-fluid .home-header__right .create__btn .icon { font-size: 0.875rem; line-height: 1; } @media screen and (max-width: 575px) { .home-fluid .home-header__right .create__btn { padding: 0; background: transparent !important; border: 0 !important; font-size: 1rem; flex-direction: column; color: hsl(var(--white)) !important; } } @media screen and (max-width: 575px) { .home-fluid .home-header__right .create__btn .text { display: none; } } @media screen and (max-width: 991px) { .home-fluid .home-header__right .create__btn { padding: 12px 20px; } } @media screen and (max-width: 767px) { .home-fluid .home-header__right .create__btn { padding: 10px 15px; } } @media screen and (max-width: 575px) { .home-fluid .home-header__right .create__btn { padding: 9px 12px; } } @media screen and (max-width: 424px) { .home-fluid .home-header__right .create__btn { padding: 0; background: transparent !important; border: 0 !important; font-size: 1.125rem; } .home-fluid .home-header__right .create__btn:active { top: 0; } .home-fluid .home-header__right .create__btn::hover { background: transparent !important; color: hsl(var(--base)); } } .home-fluid .home-header__right .create__list { width: 190px; background-color: hsl(var(--bg-color)); border-radius: 10px; overflow: hidden; box-shadow: var(--box-shadow); position: absolute; left: 0; top: 100%; margin-top: 12px; z-index: 999; transition: 0.25s linear; visibility: hidden; opacity: 0; } @media screen and (max-width: 424px) { .home-fluid .home-header__right .create__list { width: 160px; right: -40px; } } .home-fluid .home-header__right .create__list.show { visibility: visible; opacity: 1; } .home-fluid .home-header__right .create__list-item { padding-left: 15px; padding-bottom: 15px; } .home-fluid .home-header__right .create__list-item:first-of-type { padding-top: 25px; } .home-fluid .home-header__right .create__list-item:last-of-type { border-top: 1px solid var(--border-color); padding-top: 10px; padding-bottom: 15px; } .home-fluid .home-header__right .create__list-link { font-size: 1rem; color: hsl(var(--white)); } @media screen and (max-width: 424px) { .home-fluid .home-header__right .create__list-link { font-size: 0.875rem; } } .home-fluid .home-header__right .create__list-link:hover { color: hsl(var(--base)); } .home-fluid .home-header__right .create__list-link .icon { color: hsl(var(--base)); font-size: 1.0625rem; line-height: 1; margin-right: 10px; } @media screen and (max-width: 424px) { .home-fluid .home-header__right .create__list-link .icon { font-size: 1rem; } } .home-fluid .home-header__right .create__list-link .icon.one { color: hsl(var(--primary)); } .home-fluid .home-header__right .create__list-link .icon.two { color: hsl(var(--success)); } .home-fluid .home-header__right .create__list-link .icon.three { color: hsl(var(--purple)); } .notification { position: relative; margin-right: 10px; } .notification__btn { font-size: 1.375rem; color: hsl(var(--heading-color)); } @media screen and (max-width: 424px) { .notification__btn { font-size: 1.125rem; margin-left: 10px; } } .notification__btn:hover { color: hsl(var(--base)); } .notification__list { width: 350px; background-color: hsl(var(--bg-color)); border-radius: 10px; overflow: hidden; box-shadow: var(--box-shadow); position: absolute; right: 0; top: 100%; margin-top: 12px; z-index: 999; transition: 0.25s linear; visibility: hidden; opacity: 0; } .notification__list.show { visibility: visible; opacity: 1; box-shadow: 0 0 15px hsl(var(--black)); } @media screen and (max-width: 767px) { .notification__list { width: 415px; } } @media screen and (max-width: 575px) { .notification__list { width: 350px; right: 0; } } @media screen and (max-width: 374px) { .notification__list { width: 290px; } } .notification__list-link { display: flex; align-items: flex-start; padding: 10px 20px; gap: 16px; } .notification__list-item:first-child .notification__list-link { padding-top: 30px; } .notification__list-item:last-child { border-top: 1px solid hsl(var(--white) / 0.1); padding: 6px; } @media screen and (max-width: 767px) { .notification__list-link { padding: 15px 15px 10px; } } @media screen and (max-width: 374px) { .notification__list-link { padding: 10px 8px; } } .notification__list-link:hover { background: var(--header-search-bg); } .notification__list-link:hover .content .title { color: hsl(var(--base)); } .notification__list-link .content { position: relative; width: calc(100% - 35px); } .notification__list-link .channel-thumb { width: 35px; height: 35px; border-radius: 50%; overflow: hidden; } .notification__list-link .content .title { font-weight: 400; margin-bottom: 0; transition: 0.1s linear; } @media screen and (max-width: 575px) { .notification__list-link .content .title { font-weight: 400; font-size: 0.8125rem; } } .notification__list-link .content .time { font-size: 0.75rem; color: hsl(var(--body-color)); } .notification__list-link .video-thumb { width: 85px; } @media screen and (max-width: 767px) { .notification__list-link .video-thumb { width: 75px; } } @media screen and (max-width: 575px) { .notification__list-link .video-thumb { width: 65px; } } @media screen and (max-width: 374px) { .notification__list-link .video-thumb { width: 55px; } } .home-fluid .home-header__right .user-info { position: relative; text-align: center; margin-left: 10px; } .user-info__button .title { font-size: 20px; width: 10px; text-align: right; } .home-fluid .home-header__right .user-info__button { position: relative; max-width: 40px; display: flex; justify-content: center; align-items: center; } .home-fluid .home-header__right .user-info__thumb { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid hsl(var(--white) / 0.1); } @media screen and (max-width: 424px) { .home-fluid .home-header__right .user-info__thumb { width: 33px; height: 33px; margin-left: 5px; } } @media screen and (max-width: 374px) { .home-fluid .home-header__right .user-info__thumb { width: 25px; height: 25px; margin-left: 0; } .home-fluid .home-header__right .user-info { margin-left: 5px; } } .home-fluid .home-header__right .user-info .user-info-list { width: 300px; background-color: hsl(var(--bg-color)); border-radius: 10px; overflow: hidden; box-shadow: var(--box-shadow); position: absolute; right: 0; top: 100%; padding: 0; margin-top: 12px; z-index: 999; transition: 0.25s linear; visibility: hidden; opacity: 0; } .home-fluid .home-header__right .user-info .user-info-list.show { visibility: visible; opacity: 1; } @media screen and (max-width: 767px) { .home-fluid .home-header__right .user-info .user-info-list { width: 270px; } } .home-fluid .home-header__right .user-info .user-info-list__item { text-align: left; border-bottom: 1px solid var(--border-color); padding: 17px 0; } .home-fluid .home-header__right .user-info .user-info-list__item:last-of-type { border-bottom: 0; padding-bottom: 35px; } @media screen and (max-width: 767px) { .home-fluid .home-header__right .user-info .user-info-list__item:last-of-type { padding-bottom: 20px; } } .home-fluid .home-header__right .user-info .user-info-list__item:first-child { padding: 25px 20px 25px 15px; } @media screen and (max-width: 767px) { .home-fluid .home-header__right .user-info .user-info-list__item:first-child { padding: 20px 15px 20px 15px; } } .home-fluid .home-header__right .user-info .user-info-list__item .author { position: relative; padding-left: 75px; padding-top: 8px; } @media screen and (max-width: 767px) { .home-fluid .home-header__right .user-info .user-info-list__item .author { padding-left: 60px; padding-top: 0; } } .home-fluid .home-header__right .user-info .user-info-list__item .author__thumb { width: 54px; height: 54px; border-radius: 50%; position: absolute; left: 0; top: 0; overflow: hidden; } .home-fluid .home-header__right .user-info .user-info-list__item .author__thumb img { height: 100%; width: 100%; object-fit: cover; } @media screen and (max-width: 767px) { .home-fluid .home-header__right .user-info .user-info-list__item .author__thumb { width: 50px; height: 50px; } } .home-fluid .home-header__right .user-info .user-info-list__item .author__content .title { font-weight: 400; margin-bottom: 0; } @media screen and (max-width: 575px) { .home-fluid .home-header__right .user-info .user-info-list__item .author__content .title { font-size: 0.875rem; } } .home-fluid .home-header__right .user-info .user-info-list__item .author__content .username { font-size: 0.8125rem; } .home-fluid .home-header__right .user-info .user-info-list__item .list { position: relative; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item { position: relative; margin-bottom: 15px; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item:hover .list__link { color: hsl(var(--base)); } .home-fluid .home-header__right .user-info .user-info-list__item .list__item:hover.has-dropdown::after { color: hsl(var(--base)); } @media screen and (max-width: 575px) { .home-fluid .home-header__right .user-info .user-info-list__item .list__item { margin-bottom: 10px; } } .home-fluid .home-header__right .user-info .user-info-list__item .list__item:last-of-type { margin-bottom: 0; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.has-dropdown::after { position: absolute; content: "\f105"; font-family: "Line Awesome Free"; font-weight: 900; right: 15px; top: 2px; transition: 0.1s linear; color: hsl(var(--white)); font-size: 0.875rem; transition: 0.1s linear; } @media screen and (max-width: 575px) { .home-fluid .home-header__right .user-info .user-info-list__item .list__item.has-dropdown::after { font-size: 0.8125rem; } } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.has-dropdown.active::after { transform: rotate(90deg); color: hsl(var(--base)); } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.has-dropdown.active > a { color: hsl(var(--base)) !important; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item .user-info-submenu { display: none; margin-top: 10px; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item .user-info-submenu__item { margin-bottom: 10px; padding-left: 45px; padding-right: 15px; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item .user-info-submenu__item:last-of-type { margin-bottom: 0; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item .user-info-submenu__link { color: hsl(var(--white)); display: block; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item .user-info-submenu__link:hover { color: hsl(var(--base)); } .home-fluid .home-header__right .user-info .user-info-list__item .list__item .user-info-submenu__link .icon { font-size: 0.8125rem; margin-right: 5px; } @media screen and (max-width: 575px) { .home-fluid .home-header__right .user-info .user-info-list__item .list__item .user-info-submenu__link .icon { font-size: 0.75rem; } } .home-fluid .home-header__right .user-info .user-info-list__item .list__item .user-info-submenu__link .text { font-size: 0.875rem; } @media screen and (max-width: 575px) { .home-fluid .home-header__right .user-info .user-info-list__item .list__item .user-info-submenu__link .text { font-size: 0.8125rem; } } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item { justify-content: flex-start; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item .text { font-size: 0.875rem; color: hsl(var(--white)); padding: 0 15px; } @media screen and (max-width: 575px) { .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item .text { font-size: 0.8125rem; padding: 0 10px; } } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item .theme-switch-wrapper { display: inline-block; position: relative; padding-left: 15px; height: 20px; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item .theme-switch-wrapper .theme-switch { display: inline-block; height: 20px; position: relative; width: 42px; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item .theme-switch-wrapper .theme-switch input { display: none; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item .theme-switch-wrapper .slider { background: transparent; border: 1px solid hsl(var(--white)); border-radius: 20px; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item .theme-switch-wrapper .slider .icon { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 15px; height: 15px; background: hsl(var(--white)); border-radius: 50%; position: absolute; top: 0; bottom: 0; margin: auto 0; left: 2px; transition: 0.4s; color: hsl(var(--black)); font-size: 0.625rem; } .home-fluid .home-header__right .user-info .user-info-list__item .list__item.theme-switch-item .theme-switch-wrapper input:checked + .slider .icon { transform: translateX(22px); } .home-fluid .home-header__right .user-info .user-info-list__item .list__link { color: hsl(var(--white)); display: block; padding: 0 15px; } .home-fluid .home-header__right .user-info .user-info-list__item .list__link .icon { font-size: 1rem; margin-right: 10px; line-height: 1; position: relative; top: 2px; } @media screen and (max-width: 575px) { .home-fluid .home-header__right .user-info .user-info-list__item .list__link .icon { font-size: 0.875rem; margin-right: 5px; } } .home-fluid .home-header__right .user-info .user-info-list__item .list__link .text { font-size: 0.875rem; line-height: 1; } @media screen and (max-width: 575px) { .home-fluid .home-header__right .user-info .user-info-list__item .list__link .text { font-size: 0.8125rem; } } .home-fluid .home-header.two { padding-bottom: 0 !important; } .home-fluid .tag_sliders { position: relative; margin: 0; padding-inline: var(--inline-p); padding-block: 16px; } .play-video .home-fluid .tag_sliders { padding-block: 0; } .owl-carousel .owl-stage-outer { margin: 0 10px; } .home-fluid .tag_sliders .owl-nav button { position: absolute; z-index: 1; color: hsl(var(--heading-color)); width: 32px; height: 32px; transition: 0.4s; top: 50%; left: 0; font-size: 0.875rem; transform: translateY(-50%); display: grid; place-content: center; background-color: hsl(var(--white) / 0.09); border-radius: 50%; border: 1px solid hsl(var(--white) / 0.1); } @media screen and (max-width: 575px) { .home-fluid .tag_sliders .owl-nav button { width: 27px; height: 27px; } } .home-fluid .tag_sliders .owl-nav button:hover { color: hsl(var(--base)); } .home-fluid .tag_sliders .owl-nav button i { position: relative; z-index: 2; } .home-fluid .tag_sliders .owl-nav button.owl-prev.disabled { display: none; } .home-fluid .tag_sliders .owl-nav button.owl-next { left: auto; right: 0; } .home-fluid .tag_sliders .owl-nav button.owl-next::after { background: var(--linear-gradient-two); left: auto; right: 0; } .home-fluid .tag_sliders .owl-nav button.owl-next.disabled { display: none; } .home-fluid .tag-item { font-size: 0.75rem; padding: 5px 18px; background-color: hsl(var(--white) / 0.06); border: 1px solid hsl(var(--white) / 0.06); text-align: center; border-radius: 6px; color: var(--tag-color); font-weight: 500; } .home-fluid .tag-item.active, .home-fluid .tag-item:hover { background: hsl(var(--white) / 0.15); border-color: hsl(var(--white) / 0.15); color: hsl(var(--white)); } @media screen and (max-width: 767px) { .home-fluid .tag-item { font-size: 0.75rem; } } @media screen and (max-width: 575px) { .home-fluid .tag-item { padding: 5px 15px; } } @media screen and (max-width: 424px) { .home-fluid .tag-item { padding: 4px 12px; } } .home-fluid.pv-page .home__right { padding-left: 68px; } @media screen and (max-width: 767px) { .home-fluid.pv-page .home__right { padding-left: 0; } } .home-fluid.pv-page .home-header { padding: 0 68px 13px 25px; } @media screen and (max-width: 1499px) { .home-fluid.pv-page .home-header { padding: 0 40px 13px 25px; } } @media screen and (max-width: 1399px) { .home-fluid.pv-page .home-header { padding: 0 25px 10px; } } @media screen and (max-width: 1199px) { .home-fluid.pv-page .home-header { padding: 0 20px 10px; } } @media screen and (max-width: 767px) { .home-fluid.pv-page .home-header { padding: 0 16px 10px; } } .home-fluid.pv-page .home-header__left .logo { display: inline-block; margin-right: 24px; } @media screen and (max-width: 374px) { .home-fluid.pv-page .home-header__left .logo { margin-right: 15px; } } .home-fluid.pv-page .home-header__left .logo img { max-width: 101px; } .home-body { position: relative; padding: 24px var(--inline-p); min-height: calc(100vh - var(--header-h)); } .home-body__item { margin-bottom: 24px; position: relative; z-index: 1; } .home-body__item::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: hsl(var(--white) / 0.1); z-index: -1; } .home-body__title { display: inline-flex; align-items: center; justify-content: flex-start; margin-bottom: 0; padding-right: 12px; background-color: hsl(var(--dark)); } .home-body__title .icon { margin-right: 5px; } .home-body__shorts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; } @media screen and (max-width: 1499px) { .home-body__shorts { grid-template-columns: repeat(5, 1fr); } } @media screen and (max-width: 1199px) { .home-body__shorts { grid-template-columns: repeat(4, 1fr); } } @media screen and (max-width: 991px) { .home-body__shorts { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 767px) { .home-body__shorts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 400px) and (max-width: 599px) { .home-body__shorts { column-gap: 15px; } } @media (max-width: 399px) { .home-body__shorts { grid-template-columns: repeat(1, 1fr); } } .home-body.channel-body { min-height: 400px !important; } .home-body.channel-body .empty-container { position: unset; transform: unset; top: 0; left: 0; } .home-body.stock-video-body { padding-top: 25px !important; } @media screen and (max-width: 767px) { .home-body.stock-video-body { padding-top: 15px !important; } } @media screen and (max-width: 424px) { .home-body.stock-video-body { padding-top: 10px !important; } } .home-body.wh-body { padding: 15px 160px 0px 170px; } @media screen and (max-width: 1599px) { .home-body.wh-body { padding: 15px 68px 0px 80px; } } @media screen and (max-width: 1499px) { .home-body.wh-body { padding: 0 40px 0; } } @media screen and (max-width: 1399px) { .home-body.wh-body { padding: 0 30px; } } @media screen and (max-width: 1199px) { .home-body.wh-body { padding: 0 24px; } } @media screen and (max-width: 767px) { .home-body.wh-body { padding: 0 16px; } } .home-body.wl-body { padding-top: 40px !important; } @media screen and (max-width: 1499px) { .home-body.wl-body { padding-top: 35px !important; } } @media screen and (max-width: 991px) { .home-body.wl-body { padding-top: 15px !important; } } .video-item-wrapper { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px; } .video-item { width: calc(100% / 5 - 16px); position: relative; border-radius: 8px; overflow: hidden; background: hsl(var(--dark)); box-shadow: 0 0 15px hsl(var(--black)); } @media (max-width: 1199px) { .video-item { width: calc(100% / 4 - 15px); } } @media (max-width: 991px) { .video-item { width: calc(100% / 3 - 14px); } } @media (max-width: 767px) { .video-item { width: calc(100% / 2 - 10px); } } @media (max-width: 424px) { .video-item { width: 100%; } } .premium-icon { position: absolute; top: 15px; left: 15px; height: 32px; width: 32px; display: grid; place-content: center; background-color: hsl(var(--black) / 0.5); border-radius: 6px; } .premium-icon svg { width: 30px; fill: hsl(var(--warning)) !important; } .video-item.ad .video-item__thumb .expand-icon { font-size: 0.8125rem; color: hsl(var(--static-light)); position: absolute; right: 10px; bottom: 10px; } .video-item .premium-badge { position: absolute; top: 10px; left: 10px; overflow: hidden; } .video-item .premium-icon img { width: 35px; } .video-item.ad .video-item__thumb .expand-icon:hover { color: hsl(var(--base)); } .video-item.ad .video-item__content .menu-icon { position: absolute; right: 0; cursor: pointer; transition: 0.1s linear; } .video-item.ad .video-item__content .menu-icon:hover { color: hsl(var(--base)); } .video-item.ad .video-item__content .desc { margin-bottom: 5px; } .video-item.ad .video-item__content .desc:last-of-type { margin-bottom: 0; } .video-item.ad .video-item__content .desc span { font-weight: 700; } .video-item__thumb { position: relative; width: 100%; transition: all 0.2s linear; display: block; } .video-item:hover .video-item__thumb { border-radius: 0; } .video-item:hover .video-item__price { transform: translateX(0); } @media screen and (max-width: 991px) { .video-item__thumb { border-radius: 8px; } } @media screen and (max-width: 767px) { .video-item__thumb { border-radius: 6px; } } @media screen and (max-width: 424px) { .video-item__thumb { border-radius: 4px; } } .video-item__thumb img { border-radius: 10px; width: 100%; } .video-item__channel-author { width: 48px; height: 48px; background: hsl(var(--bg-color)); border: 6px solid hsl(var(--bg-color)); border-radius: 50%; position: absolute; top: -35px; left: 16px; z-index: 9; overflow: hidden; } @media screen and (max-width: 1599px) { .video-item__channel-author { width: 45px; height: 45px; border: 4px solid hsl(var(--bg-color)); } } @media screen and (max-width: 1499px) { .video-item__channel-author { width: 40px; height: 40px; border: 3px solid hsl(var(--bg-color)); top: -30px; } } .video-item__content { position: relative; padding: 16px; } .video-item__content .title a { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media (max-width: 1399px) { .video-item__content .title a { font-size: 14px; } } .video-item__content .title a:hover { color: hsl(var(--white)); } .video-item__content .channel { font-size: 0.875rem; margin-bottom: 4px; font-weight: 600; } .video-item__content .title { margin-bottom: 4px; font-weight: 400; line-height: 1.5; } @media screen and (max-width: 1199px) { .video-item__content .title { margin-bottom: 5px; } } @media screen and (max-width: 575px) { .video-item__content .title { margin-bottom: 2px; } } .video-item__content .meta { font-size: 0.75rem; font-weight: 500; } .video-item__content .meta .view { position: relative; padding-right: 20px; } .video-item__content .meta .view::after { position: absolute; content: ""; background: hsl(var(--body-color)); width: 2px; height: 2px; border-radius: 50%; right: 8px; top: 0; bottom: 0; margin: auto 0; } .video-item__time { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; line-height: 1; color: hsl(var(--static-light)); background: hsl(var(--static-dark) / 0.8); min-width: 30px; min-height: 20px; border-radius: 5px; padding: 4px; position: absolute; bottom: 10px; left: 10px; } .video-item__time.two { left: unset; right: 10px; } .video-item__price { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-direction: column; gap: 4px; line-height: 1; font-weight: 500; color: hsl(var(--static-light)); background: hsl(var(--base)); position: absolute; min-width: 40px; min-height: 50px; padding: 4px; border-radius: 0px; top: 0px; right: 10px; z-index: 1; transition: 0.2s linear; transform: translateY(-170%); } .video-item__price::before { position: absolute; content: ""; bottom: -9px; right: 0px; width: 100%; height: 17px; background: hsl(var(--base)); z-index: -1; clip-path: polygon(100% 0%, 100% 100%, 51% 42%, 0 98%, 0 0); } .video-item__manage { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .video-item__edit { font-size: 1rem; line-height: 1; color: hsl(var(--white)); height: 32px; width: 32px; display: grid; place-content: center; border: 1px solid hsl(var(--white) / 0.1); border-radius: 50%; background-color: hsl(var(--white) / 0.05); } .video-item__edit:hover { cursor: pointer; color: hsl(var(--black)); background-color: hsl(var(--white)); border-color: hsl(var(--white)); } .short-item { position: relative; border-radius: 10px; overflow: hidden; } .short-item:hover { cursor: pointer; } .short-item:hover .short-item__thumb img { transform: scale(1.1) rotate(1deg); } .short-item::after { position: absolute; content: ""; background: linear-gradient( 0deg, rgba(15, 15, 15, 0.5) 0%, rgba(15, 15, 15, 0) 100% ); bottom: 0; left: 0; width: 100%; height: 150px; } .short-item__thumb { position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; } .short-item__thumb img { width: 100%; height: 100%; transition: 0.1s linear; } .short-item__content { position: absolute; bottom: 25px; left: 0; padding: 0 24px 10px 10px; z-index: 2; } @media screen and (max-width: 991px) { .short-item__content { padding: 0 10px 10px; } } @media screen and (max-width: 424px) { .short-item__content { padding: 0 8px 10px; } } @media (max-width: 399px) { .short-item__content { padding: 0 40px 20px 20px; } } @media screen and (max-width: 374px) { .short-item__content { padding: 0 30px 20px 15px; } } .short-item__title { color: hsl(var(--static-white)); font-size: 0.875rem; margin-bottom: 0; font-weight: 600; } .short-item__title a:hover { color: hsl(var(--static-white)); } .short-item__view { color: hsl(var(--static-light-two)); font-size: 0.75rem; position: absolute; right: 10px; bottom: 10px; z-index: 1; } .short-item__channel { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; border: 1px solid hsl(var(--base)); border-radius: 50%; z-index: 2; overflow: hidden; } .channel-cover { position: relative; } .channel-cover img { width: 100%; max-height: 320px; object-fit: cover; } @media screen and (max-width: 991px) { .channel-cover img { min-height: 200px; } } @media screen and (max-width: 767px) { .channel-cover img { min-height: 160px; } } @media screen and (max-width: 575px) { .channel-cover img { min-height: 125px; } } @media screen and (max-width: 424px) { .channel-cover img { min-height: 100px; } } .channel-cover .social { position: absolute; right: 67px; bottom: 35px; } @media screen and (max-width: 1599px) { .channel-cover .social { bottom: 30px; } } @media screen and (max-width: 1499px) { .channel-cover .social { right: 40px; bottom: 25px; } } @media screen and (max-width: 1399px) { .channel-cover .social { right: 30px; } } @media screen and (max-width: 1199px) { .channel-cover .social { right: 24px; bottom: 20px; } } @media screen and (max-width: 767px) { .channel-cover .social { right: 16px; bottom: 15px; } } .channel-cover .social__link { font-size: 1.25rem; margin-left: 15px; } .channel-cover .social__link:first-child { margin-left: 0; } @media screen and (max-width: 1199px) { .channel-cover .social__link { font-size: 1.125rem; } } @media screen and (max-width: 767px) { .channel-cover .social__link { font-size: 1rem; margin-left: 10px; } } @media screen and (max-width: 424px) { .channel-cover .social__link { font-size: 0.9375rem; margin-left: 8px; } } .channel-header { padding-inline: var(--inline-p); gap: 16px 42px; justify-content: flex-start; } .channel-header__content { position: relative; padding: 10px 0 0 130px; } @media (max-width: 767px) { .channel-header__content { position: relative; padding: 10px 0 0 120px; } } @media screen and (max-width: 374px) { .channel-header__content { padding: 10px 0 0 90px; } } .channel-header__content .avatar { width: 100px; height: 100px; position: absolute; top: -30px; left: 0; overflow: hidden; border-radius: 50%; outline: 8px solid hsl(var(--bg-color)); background-color: hsl(var(--bg-color)); } @media screen and (max-width: 575px) { .channel-header__content .avatar { width: 90px; height: 90px; } } @media screen and (max-width: 374px) { .channel-header__content .avatar { width: 70px; height: 70px; } } .channel-header__content .avatar img { position: relative; z-index: 2; } .channel-header__content .name { font-weight: 500; margin-bottom: 0; } @media screen and (max-width: 991px) { .channel-header__content .name { font-size: 1.125rem; } } @media screen and (max-width: 575px) { .channel-header__content .name { font-size: 1rem; } } .channel-header__content .username { font-size: 0.875rem; margin-bottom: 5px; } @media screen and (max-width: 1199px) { .channel-header__content .username { margin-bottom: 0; } } @media screen and (max-width: 575px) { .channel-header__content .username { font-size: 0.8125rem; } } @media screen and (max-width: 424px) { .channel-header__content .meta { margin-top: -3px; } } .channel-header__content .meta span { position: relative; font-size: 0.875rem; padding-right: 20px; } @media screen and (max-width: 575px) { .channel-header__content .meta span { font-size: 0.8125rem; padding-right: 14px; } } .channel-header__content .meta span::after { position: absolute; content: ""; background: hsl(var(--body-color)); width: 2px; height: 2px; border-radius: 50%; right: 8px; top: 0; bottom: 0; margin: auto 0; } @media screen and (max-width: 575px) { .channel-header__content .meta span::after { right: 4px; } } .channel-header__content .meta span:last-of-type { padding-right: 0; } .channel-header__content .meta span:last-of-type::after { display: none; } @media screen and (max-width: 575px) { .channel-header__buttons { padding-left: 115px; } } @media screen and (max-width: 424px) { .channel-header__buttons { padding-left: 95px; } } @media screen and (max-width: 374px) { .channel-header__buttons { padding-left: 85px; } } .channel-header__buttons .btn { padding: 12px 15.5px; } @media screen and (max-width: 1199px) { .channel-header__buttons .btn { font-size: 0.875rem; } } @media screen and (max-width: 575px) { .channel-header__buttons .btn { font-size: 0.8125rem; padding: 11px 15px; } } @media screen and (max-width: 424px) { .channel-header__buttons .btn { font-size: 0.75rem; padding: 10px 14px; } } .channel-header.user-profile { padding-top: 65px; } @media screen and (max-width: 1499px) { .channel-header.user-profile { padding-top: 50px; } } @media screen and (max-width: 1199px) { .channel-header.user-profile { padding-top: 40px; } } @media screen and (max-width: 767px) { .channel-header.user-profile { display: block; padding-top: 20px; } } @media screen and (max-width: 575px) { .channel-header.user-profile { padding-top: 10px; } } @media screen and (max-width: 575px) { .channel-header.user-profile .channel-header__content { padding-left: 100px; padding-top: 8px; } } @media screen and (max-width: 424px) { .channel-header.user-profile .channel-header__content { padding-left: 90px; } } @media screen and (max-width: 767px) { .channel-header.user-profile .channel-header__content .avatar { width: 100px; height: 100px; top: 0; } } @media screen and (max-width: 575px) { .channel-header.user-profile .channel-header__content .avatar { width: 90px; height: 90px; } } @media screen and (max-width: 424px) { .channel-header.user-profile .channel-header__content .avatar { width: 80px; height: 80px; } } @media screen and (max-width: 424px) { .channel-header.user-profile .channel-header__content .avatar { width: 75px; height: 75px; } } .channel-header.user-profile .channel-header__buttons { gap: 24px; } @media screen and (max-width: 1499px) { .channel-header.user-profile .channel-header__buttons { gap: 20px; } } @media screen and (max-width: 1199px) { .channel-header.user-profile .channel-header__buttons { gap: 15px; } } @media screen and (max-width: 991px) { .channel-header.user-profile .channel-header__buttons { gap: 10px; } } @media screen and (max-width: 767px) { .channel-header.user-profile .channel-header__buttons { padding-left: 125px; margin-top: 15px; } } @media screen and (max-width: 575px) { .channel-header.user-profile .channel-header__buttons { display: block; padding-left: 100px; } } @media screen and (max-width: 424px) { .channel-header.user-profile .channel-header__buttons { padding-left: 90px; } } @media screen and (max-width: 374px) { .channel-header.user-profile .channel-header__buttons { padding-left: 0; } } @media screen and (max-width: 991px) { .channel-header.user-profile .channel-header__buttons .btn { padding: 12px; } } @media screen and (max-width: 767px) { .channel-header.user-profile .channel-header__buttons .btn { font-size: 0.8125rem; padding: 10px; } } @media screen and (max-width: 575px) { .channel-header.user-profile .channel-header__buttons .btn { font-size: 0.75rem; padding: 10px; } } @media screen and (max-width: 424px) { .channel-header.user-profile .channel-header__buttons .btn { padding: 9px 10px; } } .channel-tab { border-bottom: 1px solid hsl(var(--white) / 0.1); margin-top: 40px; padding-inline: var(--inline-p); gap: 16px 24px; } @media screen and (max-width: 575px) { .channel-tab { gap: 16px; } } @media screen and (max-width: 424px) { .channel-tab { gap: 16px 12px; } } .channel-tab__item { position: relative; padding: 0 10px 10px; font-weight: 500; } @media screen and (max-width: 991px) { .channel-tab__item { padding: 0 8px 8px; font-size: 0.875rem; } } @media screen and (max-width: 374px) { .channel-tab__item { padding: 0 4px 4px; } } @media screen and (max-width: 424px) { .channel-tab__item.hide { visibility: hidden; opacity: 0; } } .channel-tab__item:last-child { margin-right: 0; } .channel-tab__item::after { position: absolute; content: ""; background: hsl(var(--white)); width: 100%; height: 2px; left: 0; bottom: -2px; visibility: hidden; opacity: 0; transition: 0.1s linear; } .channel-tab__item:hover { color: hsl(var(--white)); } .channel-tab__item:hover::after { visibility: visible; opacity: 1; } .channel-tab__item.active { color: hsl(var(--white)); } @media screen and (max-width: 767px) { .channel-tab__item.active { font-weight: 400; } } .channel-tab__item.active::after { visibility: visible; opacity: 1; } @media screen and (max-width: 424px) { .channel-tab .channel-search { margin-left: auto; } } .channel-tab .channel-search .form-group { position: relative; margin-bottom: 0; } .channel-tab .channel-search .form-group .form--control { font-size: 0.75rem; padding: 0; color: hsl(var(--heading-color)); border: 0 !important; border-bottom: 1px solid hsl(var(--light-two)) !important; border-radius: 0 !important; position: absolute; left: 30px; bottom: 3px; width: 0; transition: 0.1s linear; width: 110px; visibility: hidden; opacity: 0; } @media screen and (max-width: 575px) { .channel-tab .channel-search .form-group .form--control { width: 75px; } } @media screen and (max-width: 575px) { .channel-tab .channel-search .form-group .form--control { left: 25px; bottom: 4px; } } @media screen and (max-width: 424px) { .channel-tab .channel-search .form-group .form--control { width: 135px; left: unset; bottom: 4px; right: 15px; } } .channel-tab .channel-search .form-group .form--control::placeholder { font-size: 0.75rem; } .channel-tab .channel-search .form-group .form--control:focus { border-color: hsl(var(--base)) !important; } .channel-tab .channel-search .form-group .form--control.show { visibility: visible; opacity: 1; } .channel-tab .channel-search .form-group .channel-search-btn { color: hsl(var(--heading-color)); line-height: 1; } @media screen and (max-width: 575px) { .channel-tab .channel-search .form-group .channel-search-btn { font-size: 0.9375rem; } } .channel-tags { margin: 20px 0; } .page-title { margin-bottom: 25px; } @media screen and (max-width: 767px) { .page-title { margin-bottom: 15px; } } @media screen and (max-width: 424px) { .page-title { margin-bottom: 10px; } } .stock-video-search { max-width: 530px; margin-bottom: 30px; } @media screen and (max-width: 1699px) { .stock-video-search { max-width: 500px; } } @media screen and (max-width: 1499px) { .stock-video-search { max-width: 440px; } } @media screen and (max-width: 1199px) { .stock-video-search { margin-bottom: 20px; } } @media screen and (max-width: 991px) { .stock-video-search { max-width: 415px; } } @media screen and (max-width: 767px) { .stock-video-search { max-width: 295px; } } @media screen and (max-width: 424px) { .stock-video-search { max-width: 100%; } } .stock-video-search .form-group { position: relative; margin-bottom: 0; } .stock-video-search .form-group .form--control { border: 0 !important; border-bottom: 1px solid var(--border-color-two) !important; border-radius: 0 !important; padding: 8px 30px; color: hsl(var(--heading-color)); } .stock-video-search .form-group .form--control::placeholder { color: hsl(var(--light-two)); } .stock-video-search .form-group .btn { padding: 0; line-height: 1; position: absolute; left: 1px; top: 0; bottom: 0; margin: auto 0; } .stock-video-search .form-group .btn:hover { color: hsl(var(--base)); } .filter-form { margin-bottom: 40px; } @media screen and (max-width: 1199px) { .filter-form { display: block; margin-bottom: 30px; } } @media screen and (max-width: 767px) { .filter-form { margin-bottom: 10px; } } @media screen and (max-width: 1199px) { .filter-form__price { margin-bottom: 20px; } } @media screen and (max-width: 991px) { .filter-form__price { margin-bottom: 15px; } } @media screen and (max-width: 767px) { .filter-form__price { margin-bottom: 10px; } } .filter-form__price .form-group { position: relative; margin-bottom: 0; margin-right: 15px; } .filter-form__price .form-group:last-of-type { margin-right: 0; } @media screen and (max-width: 1199px) { .filter-form__price .form-group { margin-right: 15px; } } .filter-form__price .form-group .counter { position: relative; display: block; } .filter-form__price .form-group .counter__field { text-align: center; max-width: 155px; padding: 6px 33px; font-size: 0.875rem; color: hsl(var(--heading-color)); } @media screen and (max-width: 1199px) { .filter-form__price .form-group .counter__field { max-width: 140px; } } @media screen and (max-width: 424px) { .filter-form__price .form-group .counter__field { font-size: 0.8125rem; max-width: 135px; } } .filter-form__price .form-group .counter__field::placeholder { font-size: 0.875rem; color: hsl(var(--heading-color)); } @media screen and (max-width: 424px) { .filter-form__price .form-group .counter__field::placeholder { font-size: 0.8125rem; } } .filter-form__price .form-group .counter__btn { font-size: 0.75rem; color: hsl(var(--heading-color)); height: 100%; position: absolute; left: 0; width: 20%; text-align: center; } .filter-form__price .form-group .counter__btn.increment { left: auto; right: 0; } .filter-form__price .form-group .counter__btn.increment::after { right: auto; left: 0; } .filter-form__price .form-group .counter__btn::after { position: absolute; content: ""; background: hsl(var(--heading-color)); width: 1px; height: 14px; right: 0; top: 0; bottom: 0; margin: auto 0; } .filter-form__select .form-group { margin-bottom: 0; margin-left: 30px; } .filter-form__select .form-group:first-of-type { margin-left: 0; } @media screen and (max-width: 1699px) { .filter-form__select .form-group { margin-left: 20px; } } @media screen and (max-width: 1199px) { .filter-form__select .form-group { margin-left: 0; margin-right: 15px; } .filter-form__select .form-group:last-of-type { margin-right: 0; } } @media screen and (max-width: 767px) { .filter-form__select .form-group { margin-bottom: 10px; } } .filter-form__select .form-group .form--control { color: hsl(var(--heading-color)) !important; font-size: 0.875rem; padding: 5.5px 32px 5.5px 15px; } .filter-form__select .form-group .form--control::placeholder { color: hsl(var(--heading-color)) !important; font-size: 0.875rem; } @media screen and (max-width: 1699px) { .filter-form__select .form-group .form--control { padding: 5.5px 24px 5.5px 12px; } } @media screen and (max-width: 1199px) { .filter-form__select .form-group .form--control { padding: 5.5px 27px 5.5px 15px; } } @media screen and (max-width: 991px) { .filter-form__select .form-group .form--control { padding: 5.5px 17px 5.5px 10px; } } @media screen and (max-width: 424px) { .filter-form__select .form-group .form--control { padding: 5px 10px; font-size: 0.8125rem; } } .wh-page-header .page-title { margin-bottom: 0; background-color: hsl(var(--dark)); padding-right: 12px; } .wh-search-clear { position: relative; display: flex; align-items: center; margin-bottom: 32px; padding: 24px; background-color: hsl(var(--bg-color)); border-radius: 8px; } .wh-search-clear .watch-history-search { width: 240px; } @media screen and (max-width: 991px) { .wh-search-clear { padding: 20px; } } @media (max-width: 575px) { .wh-search-clear .watch-history-search { width: 220px; } .wh-search-clear { padding: 16px; } } .wh-search-clear .watch-history-search.show { visibility: visible; opacity: 1; } .wh-search-clear .watch-history-search .form-group { position: relative; margin-bottom: 0; } .wh-search-clear .watch-history-search .form-group .form--control { border: 0 !important; border-bottom: 1px solid var(--border-color-two) !important; border-radius: 0 !important; padding: 8px 10px 8px 26px; color: hsl(var(--heading-color)); } @media screen and (max-width: 991px) { .wh-search-clear .watch-history-search .form-group .form--control { font-size: 0.8125rem; padding: 7px 0 7px 24px; } } @media screen and (max-width: 424px) { .wh-search-clear .watch-history-search .form-group .form--control { padding: 7px 24px 7px 0; } } .wh-search-clear .watch-history-search .form-group .form--control::placeholder { color: hsl(var(--light-two)); } @media screen and (max-width: 991px) { .wh-search-clear .watch-history-search .form-group .form--control::placeholder { font-size: 0.8125rem; } } .wh-search-clear .watch-history-search .form-group .btn { padding: 0; line-height: 1; position: absolute; left: 1px; top: 0; bottom: 0; margin: auto 0; color: hsl(var(--white)) !important; } @media screen and (max-width: 991px) { .wh-search-clear .watch-history-search .form-group .btn { font-size: 0.875rem; } } @media screen and (max-width: 424px) { .wh-search-clear .watch-history-search .form-group .btn { left: auto; right: 1px; } } .wh-search-clear .watch-history-search .form-group .btn:hover { color: hsl(var(--base)); } .wh-search-clear .wh-sm-search { display: none; padding: 0; color: hsl(var(--white)); font-size: 1rem; line-height: 1; } .wh-search-clear .wh-sm-search.change-icon { font-size: 0.75rem; } @media screen and (max-width: 424px) { .wh-search-clear .wh-sm-search.change-icon i::before { content: "\e90b"; } } .wh-search-clear .clear-history-btn { color: hsl(var(--heading-color)); font-size: 0.875rem; margin-left: 40px; padding: 8px 15px; border-radius: 6px; background: hsl(var(--white) / 0.1); } @media (max-width: 575px) { .wh-search-clear .clear-history-btn { margin-left: 20px; } } .wh-search-clear .clear-history-btn i { font-size: 1.0625rem; position: relative; top: 2px; } @media screen and (max-width: 991px) { .wh-search-clear .clear-history-btn i { font-size: 0.9375rem; } } @media screen and (max-width: 575px) { .wh-search-clear .clear-history-btn .text { display: none; } } .wh-search-clear .clear-history-btn:hover { color: hsl(var(--white)); background: hsl(var(--white) / 0.2); } .wh-shorts-heading { margin-top: 25px; } @media screen and (max-width: 575px) { .wh-shorts-heading { margin-top: 20px; } } .wh-shorts-heading__title { font-weight: 400; margin-bottom: 25px; } @media screen and (max-width: 575px) { .wh-shorts-heading__title { margin-bottom: 15px; } } .wh-shorts-heading__title .icon { margin-right: 5px; } .wh-shorts-heading__title.large { font-weight: 600; margin-bottom: 30px; } @media screen and (max-width: 1199px) { .wh-shorts-heading__title.large { margin-bottom: 20px; } } .short_slider_wh.owl-carousel { position: relative; } .short_slider_wh.owl-carousel .short-item { margin-bottom: 0; } @media (min-width: 1600px) { .short_slider_wh.owl-carousel .short-item__content { padding: 0 0 10px 15px; } } .short_slider_wh.owl-carousel .owl-nav button { width: 40px; height: 40px; border-radius: 50%; background: hsl(var(--bg-color)) !important; box-shadow: var(--box-shadow); font-size: 1.1rem !important; color: hsl(var(--heading-color)) !important; position: absolute; left: -20px; top: 0; bottom: 0; margin: auto 0; transition: 0.1s linear; } @media screen and (max-width: 991px) { .short_slider_wh.owl-carousel .owl-nav button { width: 33px; height: 33px; font-size: 1rem !important; left: -16px; } } @media screen and (max-width: 767px) { .short_slider_wh.owl-carousel .owl-nav button { display: none; } } .short_slider_wh.owl-carousel .owl-nav button:hover { background: hsl(var(--base)) !important; color: hsl(var(--static-white)) !important; } .short_slider_wh.owl-carousel .owl-nav button.owl-prev.disabled { display: none; } .short_slider_wh.owl-carousel .owl-nav button.owl-next { left: auto; right: -20px; } .short_slider_wh.owl-carousel .owl-nav button.owl-next.disabled { display: none; } @media screen and (max-width: 991px) { .short_slider_wh.owl-carousel .owl-nav button.owl-next { right: -16px; } } .video-wh { position: relative; border-top: 1px solid var(--border-color); padding-top: 24px; margin-top: 40px; } @media screen and (max-width: 767px) { .video-wh { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 15px; } } @media screen and (max-width: 575px) { .video-wh { column-gap: 15px; } } @media (max-width: 499px) { .video-wh { display: block; } } .video-wh.wl-page { width: calc(100% - 435px); border: 0; padding: 0; margin: 0; margin-left: 24px; } @media screen and (max-width: 1699px) { .video-wh.wl-page { width: calc(100% - 390px); } } @media screen and (max-width: 1499px) { .video-wh.wl-page { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 15px; } } @media screen and (max-width: 1199px) { .video-wh.wl-page { width: calc(100% - 305px); } } @media screen and (max-width: 991px) { .video-wh.wl-page { width: 100%; display: block; margin-left: 0; } } @media screen and (max-width: 767px) { .video-wh.wl-page { display: grid; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 499px) { .video-wh.wl-page { display: block; } } .video-wh-item { position: relative; align-items: flex-start; } .video-wh-item__action { display: flex; align-items: center; gap: 12px; } .video-wh-item:not(:last-child) { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid hsl(var(--white) / 0.1); } .video-wh-item__link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 991px) { .video-wh-item { padding: 12px; } } @media (max-width: 499px) { .video-wh-item { padding: 15px 15px 20px; } } @media screen and (max-width: 374px) { .video-wh-item { padding: 10px 10px 15px; } } .video-wh-item__thumb { position: relative; border-radius: 5px; overflow: hidden; width: 200px; } @media screen and (max-width: 767px) { .video-wh-item__thumb { max-width: 100%; width: 100%; margin-bottom: 10px; } } .video-wh-item__thumb img { width: 100%; } .video-wh-item__thumb .time { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; line-height: 1; color: hsl(var(--static-light)); background: hsl(var(--static-dark) / 0.8); min-width: 30px; min-height: 20px; border-radius: 5px; padding: 4px; position: absolute; bottom: 10px; right: 10px; } .video-wh-item__content { width: calc(100% - 200px); padding: 0 25px 0; display: flex; align-items: flex-start; } .video-wh-item__title { max-width: 400px; font-weight: 500; margin-bottom: 4px; } @media screen and (max-width: 1199px) { .video-wh-item__content { padding: 0 10px 0 15px; } } @media screen and (max-width: 991px) { .video-wh-item__content { padding: 0 10px 0 15px; } } @media screen and (max-width: 767px) { .video-wh-item__content { position: relative; width: 100%; padding: 10px 10px 0 0; } } @media screen and (max-width: 767px) { .video-wh-item__title { font-size: 0.9375rem; } } .video-wh-item__channel { position: relative; font-size: 0.75rem; line-height: 1.2; margin-right: 15px; } .video-wh-item__channel::after { position: absolute; content: ""; background: hsl(var(--body-color)); width: 2px; height: 2px; border-radius: 50%; right: -10px; top: 0; bottom: 0; margin: auto 0; } .video-wh-item__view { font-size: 0.75rem; line-height: 1.2; } .video-wh-item__desc { font-size: 0.75rem; line-height: 1.5; * { color: hsl(var(--white)) !important; } } @media screen and (max-width: 767px) { .video-wh-item__desc { margin-top: 10px; } } @media screen and (max-width: 1499px) { .video-wh-item.two { display: block; } } @media screen and (max-width: 1199px) { .video-wh-item.two { padding: 15px; } } @media screen and (max-width: 991px) { .video-wh-item.two { display: flex; } } @media screen and (max-width: 767px) { .video-wh-item.two { display: block; padding: 12px; } } @media screen and (max-width: 1699px) { .video-wh-item.two .video-wh-item__thumb { max-width: 250px; } } @media screen and (max-width: 1599px) { .video-wh-item.two .video-wh-item__thumb { max-width: 240px; } } @media screen and (max-width: 1499px) { .video-wh-item.two .video-wh-item__thumb { max-width: 100%; display: block; width: 100%; } } @media screen and (max-width: 991px) { .video-wh-item.two .video-wh-item__thumb { max-width: 190px; } } @media screen and (max-width: 767px) { .video-wh-item.two .video-wh-item__thumb { max-width: 100%; width: 100%; margin-bottom: 10px; } } .video-wh-item.two .video-wh-item__content { max-width: 605px; } @media (max-width: 1799px) { .video-wh-item.two .video-wh-item__content { max-width: 570px; } } @media screen and (max-width: 1699px) { .video-wh-item.two .video-wh-item__content { max-width: 530px; padding: 0 15px 0 20px; } } @media screen and (max-width: 1599px) { .video-wh-item.two .video-wh-item__content { max-width: 450px; } } @media screen and (max-width: 1499px) { .video-wh-item.two .video-wh-item__content { position: relative; padding: 15px 10px 0 0; } } @media screen and (max-width: 991px) { .video-wh-item.two .video-wh-item__content { position: initial; max-width: 430px; padding: 0 10px 0 15px; } } @media screen and (max-width: 767px) { .video-wh-item.two .video-wh-item__content { position: relative; max-width: 100%; padding: 0 10px 0 0; } } @media screen and (max-width: 1499px) { .video-wh-item.two .video-wh-item__content .ellipsis-wrapper { right: -6px; top: 14px; } } @media screen and (max-width: 991px) { .video-wh-item.two .video-wh-item__content .ellipsis-wrapper { right: 10px; top: 10px; } } @media screen and (max-width: 767px) { .video-wh-item.two .video-wh-item__content .ellipsis-wrapper { right: -5px; top: -2px; } } .ellipsis-wrapper { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } @media (max-width: 767px) { .ellipsis-wrapper { right: 0px; top: auto; bottom: 0px; z-index: 999; } } .ellipsis-btn { color: hsl(var(--body-color)); line-height: 1; } .ellipsis-btn:hover { color: hsl(var(--base)); } @media screen and (max-width: 767px) { .ellipsis-btn { font-size: 0.875rem; } } .ellipsis-list { width: 130px; padding: 5px 0; background-color: hsl(var(--bg-color)); border-radius: 5px; overflow: hidden; box-shadow: var(--box-shadow); position: absolute; right: 0; top: 100%; margin-top: 5px; z-index: 9; transition: 0.25s linear; visibility: hidden; opacity: 0; } @media screen and (max-width: 767px) { .ellipsis-list { margin-top: 0; } } @media screen and (max-width: 424px) { .ellipsis-list { width: 115px; } } .ellipsis-list.show { visibility: visible; opacity: 1; } .ellipsis-list__btn { color: hsl(var(--heading-color)); } .video-wh-item__left { flex: 1; } .custom-share-modal .modal-content { position: relative; background: hsl(var(--bg-color)); } .custom-share-modal .modal-content .btn-close { background: none; width: auto; height: auto; border-radius: 0; font-size: 1.125rem; color: hsl(var(--heading-color)); position: absolute; right: 5px; top: 5px; cursor: pointer; padding: 0; z-index: 2; opacity: 1; } .custom--modal .modal-body .share-items { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; } .custom--modal .modal-body .share-item { color: hsl(var(--static-white)); background: hsl(var(--base)); width: 40px; height: 40px; border-radius: 50%; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4375rem; } .custom--modal .modal-body .share-item.facebook { background: #1877f2; } .custom--modal .modal-body .share-item.facebook:hover { background: #0267dc; } .custom--modal .modal-body .share-item.whatsapp { background: #25d366; } .custom--modal .modal-body .share-item.whatsapp:hover { background: #2bb13e; } .custom--modal .modal-body .share-item.instagram { background: linear-gradient(115deg, #f9ce34, #ee2a7b, #6228d7); } .custom--modal .modal-body .share-item.instagram:hover { background: linear-gradient(-115deg, #f9ce34, #ee2a7b, #6228d7); } .custom--modal .modal-body .share-item.twitter { background: #000000; } .custom--modal .modal-body .share-item.twitter:hover { background: #000000; } .custom--modal .modal-body .share-item.envelope { background: #888888; } .custom--modal .modal-body .share-item.envelope:hover { background: #808080; } .share-embed { position: relative; } .share-embed .form--control { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid hsl(var(--white) / 0.1); padding-right: 85px !important; } .share-embed-btn { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); background: hsl(var(--white)); color: hsl(var(--black)); padding: 4px 10px; border-radius: 5px; font-weight: 500; font-size: 12px; } .watch-later-wrapper { display: flex; align-items: flex-start; justify-content: flex-start; } @media screen and (max-width: 991px) { .watch-later-wrapper { display: block; margin-bottom: 30px; } } .wl-playlist { position: relative; width: 435px; min-height: 860px; border-radius: 10px; overflow: hidden; padding: 30px 30px 60px; } @media screen and (max-width: 1699px) { .wl-playlist { width: 390px; padding: 25px 25px 50px; min-height: 700px; } } @media screen and (max-width: 1599px) { .wl-playlist { width: 335px; padding: 20px 20px 45px; min-height: 600px; } } @media screen and (max-width: 1499px) { .wl-playlist { min-height: 500px; } } @media screen and (max-width: 1199px) { .wl-playlist { width: 305px; padding: 15px 15px 35px; } } @media screen and (max-width: 991px) { .wl-playlist { display: flex; flex-wrap: wrap; width: 100%; min-height: auto; padding: 20px; margin-bottom: 25px; } } @media screen and (max-width: 575px) { .wl-playlist { padding: 15px; } } @media (max-width: 499px) { .wl-playlist { display: block; } } .wl-playlist::after { position: absolute; content: ""; background: rgba(36, 36, 36, 0.7); width: 100%; height: 100%; left: 0; top: 0; backdrop-filter: blur(20px); } .wl-playlist__thumb { position: relative; z-index: 2; text-align: center; border-radius: 10px; overflow: hidden; margin-bottom: 20px; } @media screen and (max-width: 991px) { .wl-playlist__thumb { max-width: 250px; margin-bottom: 0; } } @media screen and (max-width: 767px) { .wl-playlist__thumb { max-width: 240px; } } @media screen and (max-width: 575px) { .wl-playlist__thumb { max-width: 200px; } } @media (max-width: 499px) { .wl-playlist__thumb { max-width: 100%; width: 100%; margin-bottom: 15px; } } @media (max-width: 499px) { .wl-playlist__thumb img { width: 100%; } } .wl-playlist__content { position: relative; z-index: 2; } @media screen and (max-width: 991px) { .wl-playlist__content { padding-left: 25px; } } @media screen and (max-width: 767px) { .wl-playlist__content { padding-left: 20px; } } @media (max-width: 499px) { .wl-playlist__content { padding: 0; } } .wl-playlist__title { font-weight: 600; line-height: 1.2; color: hsl(var(--static-white)); margin-bottom: 15px; } @media screen and (max-width: 767px) { .wl-playlist__title { margin-bottom: 10px; } } @media screen and (max-width: 575px) { .wl-playlist__title { margin-bottom: 5px; } } .wl-playlist__channel { color: hsl(var(--static-light)); font-size: 0.75rem; font-weight: 400; margin-bottom: 0; } .wl-playlist__video-numbers { color: hsl(var(--static-light-two)); font-size: 0.75rem; } .wl-playlist__buttons { gap: 24px; margin-top: 20px; } @media screen and (max-width: 1599px) { .wl-playlist__buttons { gap: 15px; } } @media screen and (max-width: 1199px) { .wl-playlist__buttons { justify-content: space-between; gap: 10px; } } @media screen and (max-width: 575px) { .wl-playlist__buttons { margin-top: 10px; } } @media (max-width: 499px) { .wl-playlist__buttons { justify-content: flex-start; } } .wl-playlist__buttons .btn { display: inline-flex; align-items: center; justify-content: center; } @media screen and (max-width: 1599px) { .wl-playlist__buttons .btn { font-size: 0.9375rem; padding: 10px 30px; } } @media screen and (max-width: 991px) { .wl-playlist__buttons .btn { font-size: 0.875rem; padding: 10px 25px; } } @media screen and (max-width: 575px) { .wl-playlist__buttons .btn { font-size: 0.8125rem; padding: 9px 20px; } } .play-body { position: relative; padding: 24px var(--inline-p); } .play-video { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; } @media screen and (max-width: 1399px) { .play-video { gap: 20px; } } @media screen and (max-width: 1199px) { .play-video { display: block; } } .play-video .primary__vtitle { margin-bottom: 6px; margin-top: 16px; font-weight: 500; max-width: 650px; width: 100%; } .play-video .primary__videometa { align-items: center; border-bottom: 1px solid hsl(var(--white) / 0.1); padding-bottom: 16px; margin-bottom: 16px; } @media screen and (max-width: 991px) { .play-video .primary__videometa { gap: 15px; } } @media screen and (max-width: 424px) { .play-video .primary__videometa { gap: 8px; } } .play-video .primary__videometa .items { font-size: 0.75rem; line-height: 1; font-weight: 500; } .play-video .primary__videometa .items .icon { margin-right: 5px; font-size: 0.875rem; } @media screen and (max-width: 767px) { .play-video .primary__videometa .items { font-size: 0.8125rem; } } .play-video .primary__videometa .items .view { position: relative; padding-right: 20px; } @media screen and (max-width: 767px) { .play-video .primary__videometa .items .view { padding-right: 15px; } } @media screen and (max-width: 424px) { .play-video .primary__videometa .items .view { font-size: 0.75rem; padding-right: 12px; } } .play-video .primary__videometa .items .view::after { position: absolute; content: ""; background: hsl(var(--body-color)); width: 2px; height: 2px; border-radius: 50%; right: 6px; top: 0; bottom: 0; margin: auto 0; } @media screen and (max-width: 767px) { .play-video .primary__videometa .items .view::after { right: 5px; } } @media screen and (max-width: 424px) { .play-video .primary__videometa .items .view::after { right: 3px; } } .play-video .primary__videometa .meta-buttons__button { line-height: 1; color: hsl(var(--heading-color)); display: flex; align-items: center; gap: 6px; background-color: hsl(var(--white) / 0.05); font-size: 14px; padding: 10px 15px; border-radius: 25px; cursor: pointer; } @media screen and (max-width: 575px) { .play-video .primary__videometa .meta-buttons__button .text { display: none; } } .play-video .primary__videometa .meta-buttons__button .icon { font-size: 1rem; } @media screen and (max-width: 424px) { .play-video .primary__videometa .meta-buttons__button .icon { font-size: 0.8125rem; } } .play-video .primary__videometa .meta-buttons__button.save .icon { font-size: 0.875rem; } @media screen and (max-width: 424px) { .play-video .primary__videometa .meta-buttons__button.save .icon { font-size: 0.75rem; } } .play-video .primary__videometa .meta-buttons__button.dislike .icon, .play-video .primary__videometa .meta-buttons__button.embed .icon { position: relative; top: 1px; } .play-video .primary__channel { margin-bottom: 24px; justify-content: flex-start; gap: 32px; } .play-video .primary__channel .author { position: relative; display: flex; align-items: center; gap: 12px; } .play-video .primary__channel .author__thumb { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .play-video .primary__channel .author__content { flex: 1; } .play-video .primary__channel .author__content .channel-name { min-width: max-content; max-width: 400px; font-size: 1rem; font-weight: 500; line-height: 100%; color: hsl(var(--white)); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } @media screen and (max-width: 575px) { .play-video .primary__channel .author__thumb { width: 40px; height: 40px; } } .play-video .primary__channel .author__thumb img { width: 100%; height: 100%; } .play-video .primary__channel .author__name { margin-bottom: 0; } .play-video .primary__channel .author__name a { display: inline-flex; align-items: center; justify-content: center; } .play-video .primary__channel .author__name a .varified { position: relative; top: -1px; margin-left: 5px; } .play-video .primary__channel .author__subscriber { font-size: 0.875rem; } .play-video .primary__channel .btn { padding: 8px 15px; font-size: 14px; font-weight: 500; } .play-video .primary__channel .btn:hover { background-color: hsl(var(--white)) !important; border-color: hsl(var(--white)) !important; color: hsl(var(--black)) !important; opacity: 0.8; } @media screen and (max-width: 575px) { .play-video .primary__channel .btn { padding: 6px 15px; font-size: 0.75rem; } } .play-video .primary__desc { padding: 16px; margin-bottom: 24px; background-color: hsl(var(--bg-color)); border-radius: 12px; } .play-video .primary__desc-text { color: hsl(var(--heading-color)); font-size: 0.875rem; line-height: 1.8; font-weight: 400; position: relative; } .play-video .primary__desc-button { color: hsl(var(--body-color)); font-weight: 600; text-transform: uppercase; margin-top: 12px; font-size: 12px; } .play-video .primary__comment .top { margin-bottom: 24px; } .play-video .primary__comment .top .comment-number { margin-right: 20px; margin-bottom: 0; } .play-video .primary__comment .top .sort-by { font-size: 1rem; color: hsl(var(--heading-color)); font-weight: 600; } .play-video .primary__comment .top .sort-by .icon { font-size: 1.0625rem; position: relative; top: 2px; } .play-video .comment-form-wrapper { position: relative; padding-left: 55px; margin-bottom: 16px; } @media screen and (max-width: 424px) { .play-video .comment-form-wrapper { padding-left: 45px; } } .play-video .primary__comment .comment-form-wrapper .comment-author { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; position: absolute; left: 0; top: -3px; } @media screen and (max-width: 424px) { .play-video .primary__comment .comment-form-wrapper .comment-author { width: 32px; height: 32px; top: 0; } } .play-video .primary__comment .comment-form-wrapper .comment-author img { width: 100%; height: 100%; } .play-video .primary__comment .comment-form .form-group { text-align: right; margin-bottom: 0; } .play-video .primary__comment .comment-form .form-group::after { content: ""; display: block; width: 0; height: 1px; background: hsl(var(--white)); position: absolute; bottom: -1px; left: 0; transition: all 0.1s linear; } .play-video .primary__comment .comment-form .form-group:has(.form--control:focus)::after { width: 100%; } .play-video .primary__comment .comment-form .form-group .form--control { border: 0; border-bottom: 1px solid hsl(var(--white) / 0.1); border-radius: 0; padding: 0; font-size: 0.875rem; color: hsl(var(--heading-color)); background-color: transparent; padding-right: 60px; display: block; } .play-video .primary__comment .comment-form .form-group .comment-btn { color: hsl(var(--white)); background: transparent; font-size: 1rem; position: absolute; top: 0; right: 0; height: 100%; width: 40px; } @media (max-width: 1199px) { .play-video .primary__comment .comment-form .form-group .comment-btn svg { height: 20px; width: 20px; } } .play-video .primary__comment-list .comment-item { position: relative; } .play-video .primary__comment-list .comment-item__commenter-thumb { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; position: absolute; left: 0; top: 0; } @media screen and (max-width: 424px) { .play-video .primary__comment-list .comment-item__commenter-thumb { width: 27px; height: 27px; } } .play-video .primary__comment-list .comment-item__commenter-thumb img { width: 100%; } .play-video .primary__comment-list .comment-item__commenter { font-weight: 400; line-height: 1; margin-bottom: 8px; } @media screen and (max-width: 575px) { .play-video .primary__comment-list .comment-item__commenter { margin-bottom: 5px; } } @media screen and (max-width: 424px) { .play-video .primary__comment-list .comment-item__commenter { font-weight: 500; font-size: 0.8125rem; } } .play-video .primary__comment-list .comment-item__commenter a { margin-right: 8px; } .play-video .primary__comment-list .comment-item__commenter .date, .play-video .primary__comment-list .comment-item__commenter .edit { font-size: 0.75rem; color: hsl(var(--body-color)); } .play-video .primary__comment-list .comment-item__comment { color: hsl(var(--heading-color)); margin-bottom: 15px; } @media screen and (max-width: 575px) { .play-video .primary__comment-list .comment-item__comment { font-size: 0.8125rem; margin-bottom: 10px; } } .play-video .primary__comment-list .comment-item__buttons .button { line-height: 1; font-size: 1.0625rem; color: hsl(var(--heading-color)); margin-right: 10px; } @media screen and (max-width: 575px) { .play-video .primary__comment-list .comment-item__buttons .button { font-size: 0.875rem; margin-right: 7px; } } @media screen and (max-width: 424px) { .play-video .primary__comment-list .comment-item__buttons .button { font-size: 0.8125rem; } } .play-video .primary__comment-list .comment-item__buttons .button:hover { color: hsl(var(--base)); } .play-video .primary__comment-list .comment-item__buttons .button.dislike { position: relative; top: 2px; } .play-video .primary__comment-list .comment-item__buttons .button.reply { font-size: 0.875rem; } @media screen and (max-width: 575px) { .play-video .primary__comment-list .comment-item__buttons .button.reply { font-size: 0.8125rem; } } @media screen and (max-width: 424px) { .play-video .primary__comment-list .comment-item__buttons .button.reply { font-size: 0.75rem; } } .play-video .secondary { width: 430px; flex-shrink: 0; } .play-video .primary { flex: 1; } .play-video .primary .primary__videoPlayer { border-radius: 12px; overflow: hidden; } @media screen and (max-width: 1699px) { .play-video .secondary { width: 400px; } } @media screen and (max-width: 1599px) { .play-video .secondary { width: 385px; } } @media screen and (max-width: 1499px) { .play-video .secondary { width: 370px; } } @media screen and (max-width: 1399px) { .play-video .secondary { width: 350px; } } @media screen and (max-width: 1199px) { .play-video .secondary { width: 100%; } } @media screen and (max-width: 575px) { .play-video .secondary { margin-top: 20px; } } @media screen and (max-width: 1599px) { .play-video .secondary .tag_sliders .tag-item { padding: 3px 15px; } } .play-video .secondary__playlist { margin-top: 25px; } @media screen and (max-width: 1599px) { .play-video .secondary__playlist { margin-top: 20px; } } @media screen and (max-width: 1199px) { .play-video .secondary__playlist { margin-top: 30px; } } @media screen and (max-width: 991px) { .play-video .secondary__playlist { margin-top: 25px; } } @media screen and (max-width: 575px) { .play-video .secondary__playlist { margin-top: 20px; } } .play-video .secondary__playlist .video-item { display: flex; align-items: flex-start; justify-content: flex-start; margin-bottom: 16px !important; border: 0; align-items: center; width: 100%; } @media screen and (max-width: 424px) { .play-video .secondary__playlist .video-item { display: block; } } .play-video .secondary__playlist .video-item__thumb { max-width: 190px; max-height: 108px; border-radius: 6px; overflow: hidden; } .play-video .secondary__playlist .related-video-player { height: 100%; width: 100%; } @media screen and (max-width: 1499px) { .play-video .secondary__playlist .video-item__thumb { max-width: 175px; max-height: 95px; } } @media screen and (max-width: 1399px) { .play-video .secondary__playlist .video-item__thumb { max-width: 155px; max-height: 90px; } } @media screen and (max-width: 424px) { .play-video .secondary__playlist .video-item__thumb { max-width: 100%; width: 100%; max-height: 100%; } } .play-video .secondary__playlist .video-item__time { left: auto; right: 10px; bottom: 10px; } @media screen and (max-width: 1599px) { .play-video .secondary__playlist .video-item__time { right: 5px; bottom: 5px; } } @media screen and (max-width: 1499px) { .play-video .secondary__playlist .video-item__time { font-size: 0.6875rem; } } .play-video .secondary__playlist .video-item__content { padding: 0 5px 0 15px; flex: 1; } @media screen and (max-width: 424px) { .play-video .secondary__playlist .video-item__content { padding: 6px; margin-bottom: 10px; } } .play-video .secondary__playlist .video-item__content .title { margin-bottom: 5px; } @media screen and (max-width: 1599px) { .play-video .secondary__playlist .video-item__content .title { font-size: 0.875rem; } } @media screen and (max-width: 1499px) { .play-video .secondary__playlist .video-item__content .title { margin-bottom: 2px; } } @media screen and (max-width: 1399px) { .play-video .secondary__playlist .video-item__content .title { font-size: 0.8125rem; } } @media screen and (max-width: 1499px) { .play-video .secondary__playlist .video-item__content .channel { font-size: 0.8125rem; } } @media screen and (max-width: 1499px) { .play-video .secondary__playlist .video-item.ad .video-item__content .desc { font-size: 0.8125rem; } } .play-video .secondary__playlist .video-item.ad .video-item__content .desc span { font-weight: 600; } @media screen and (max-width: 374px) { .play-video .secondary__playlist .video-item.ad .video-item__content .desc span { font-weight: 500; } } .upload-import-area { max-width: 1050px; width: 100%; margin: 0 auto 30px; } .upload-list { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: hsl(var(--bg-color)); border-radius: 8px; margin-bottom: 24px; } .upload-list__item { flex: 1; position: relative; } .upload-list__item:not(:first-child)::before { content: ""; position: absolute; top: 20px; right: 50%; width: 100%; height: 2px; background: #2e2e31; border-radius: 8px; z-index: 1; } .upload-list__item.active::before { background: hsl(var(--base)); } .upload-list__link { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; font-size: 14px; color: hsl(var(--white)); font-weight: 700; } .upload-list__link .circle { height: 40px; width: 40px; border-radius: 50%; background: #2e2e31; color: hsl(var(--static-white)); display: flex; align-items: center; justify-content: center; font-size: 16px; position: relative; z-index: 3; } .btn-link { color: hsl(var(--white)); } .btn-link:hover { color: hsl(var(--base)); } .upload-list__item.active .upload-list__link .circle { background: hsl(var(--base)); } @media (max-width: 575px) { .upload-list__link .circle { height: 32px; width: 32px; font-size: 14px; } .upload-list__link { font-size: 12px; } } .uplaod_wrapper { padding: 48px 24px; background-color: hsl(var(--bg-color)); border-radius: 10px; } .upload-details-wrapper { display: flex; align-items: flex-start; gap: 24px; } @media screen and (max-width: 991px) { .upload-details-wrapper { flex-direction: column; } } .thumbGenerate { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: hsl(var(--white)); background: hsl(var(--white) / 0.1); border: 1px dashed hsl(var(--white) / 0.1); padding: 9px 16px; border-radius: 6px; } .upload-details__left { max-width: 400px; width: 100%; } .upload-details__right { flex: 1; } @media screen and (max-width: 991px) { .upload-details__left { max-width: 100%; } .upload-details__right { width: 100%; } } .upload__outer { text-align: center; } .upload-import-area__desc { max-width: 560px; font-size: 13px; font-weight: 400; margin: 16px auto 0; text-align: center; } .upload__dragBox { max-width: 50%; margin: 0 auto; position: relative; text-align: center; transition: transform 0.3s; } @media screen and (max-width: 991px) { .upload__dragBox { max-width: 70%; } } @media screen and (max-width: 575px) { .upload__dragBox { max-width: 100%; } } .upload__dragBox input[type="file"] { position: absolute; height: 100%; width: 100%; opacity: 0; top: 0; left: 0; cursor: pointer; transition: 0.2s linear; } .upload__dragBox .icon { line-height: 1; font-size: 5rem; margin-bottom: 30px; } @media screen and (max-width: 1699px) { .upload__dragBox .icon { font-size: 4rem; margin-bottom: 25px; } } @media screen and (max-width: 991px) { .upload__dragBox .icon { font-size: 3rem; margin-bottom: 15px; } } @media screen and (max-width: 575px) { .upload__dragBox .icon { font-size: 2.1rem; margin-bottom: 10px; } } .upload__dragBox .title { font-weight: 600; margin-bottom: 3px; } @media screen and (max-width: 991px) { .upload__dragBox .title { font-size: 0.875rem; margin-bottom: 0; } } @media screen and (max-width: 424px) { .upload__dragBox .title { font-size: 0.8125rem; } } .upload__dragBox .tagDes { font-size: 0.75rem; font-weight: 400; line-height: 1; } @media screen and (max-width: 424px) { .upload__dragBox .tagDes { font-size: 0.6875rem; } } .upload .btn { padding: 14px 24px; margin-top: 25px; } @media screen and (max-width: 991px) { .upload .btn { font-size: 0.875rem; padding: 12px 20px; margin-top: 15px; } } @media screen and (max-width: 575px) { .upload .btn { padding: 10px 18px; margin-top: 10px; } } @media screen and (max-width: 424px) { .upload .btn { font-size: 0.8125rem; } } .upload .draging { transform: scale(1.1); } .upload #preview { text-align: center; } .upload #preview img { max-width: 100%; } .fetch-youtube-form { margin-bottom: 20px; } .upload-details__left { margin-bottom: 20px; } .uploaded-item { border-radius: 6px; } .uploaded-item__thumb { border-radius: 6px; overflow: hidden; } .uploaded-item__thumb img { width: 100%; } .uploaded-item__content .filename { font-size: 0.75rem; margin-bottom: 5px; } @media screen and (max-width: 424px) { .uploaded-item__content .filename { margin-bottom: 3px; } } .uploaded-item__content .title { font-size: 0.875rem; font-weight: 400; margin-bottom: 0; } @media screen and (max-width: 424px) { .uploaded-item__content .title { font-size: 0.8125rem; } } .uploading-progress { margin-top: 20px; } @media screen and (max-width: 767px) { .uploading-progress { margin-top: 10px; width: calc(50% - 30px); margin-top: 0; } } @media screen and (max-width: 575px) { .uploading-progress { width: 100%; margin-top: 15px; } } .uploading-progress__progress { position: relative; width: 100%; height: 2px; background: transparent; border-radius: 2px; overflow: hidden; } @media screen and (max-width: 424px) { .uploading-progress__progress { height: 1px; } } .uploading-progress__progress::after { position: absolute; content: ""; background: var(--progress-bg); width: 100%; height: 100%; left: 0; top: 0; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .uploading-progress__progressbar { width: 0px; height: 2px; background-color: hsl(var(--base)); border-radius: 2px; position: absolute; left: -1px; top: 0; } @media screen and (max-width: 424px) { .uploading-progress__progressbar { height: 1px; } } .uploading-progress__caption { font-size: 0.75rem; color: hsl(var(--heading-color)); margin-bottom: 10px; } @media screen and (max-width: 767px) { .uploading-progress__caption { margin-bottom: 5px; } } .uploading-progress__meta { color: hsl(var(--heading-color)); font-size: 0.625rem; margin-top: 5px; } .video-upload-form .form-group { margin-bottom: 20px; } @media screen and (max-width: 767px) { .video-upload-form .form-group .form--label { margin-bottom: 4px; } } @media screen and (max-width: 1199px) { .video-upload-form .form-group textarea.form--control { height: 125px; } } @media screen and (max-width: 991px) { .video-upload-form .form-group textarea.form--control { height: 110px; } } @media screen and (max-width: 575px) { .video-upload-form .form-group textarea.form--control { height: 100px; } } @media screen and (max-width: 424px) { .video-upload-form .form-group textarea.form--control { height: 90px; } } .upload-buttons { justify-content: flex-end; gap: 10px; } .upload-buttons .btn { padding: 14px 23px; margin-left: 10px; } .upload-buttons .btn:first-child { margin-left: 0; } @media screen and (max-width: 1199px) { .upload-buttons .btn { padding: 12px 18px; } } @media screen and (max-width: 991px) { .upload-buttons .btn { font-size: 0.875rem; } } @media screen and (max-width: 767px) { .upload-buttons .btn { font-size: 0.8125rem; padding: 11px 13px; } } @media screen and (max-width: 424px) { .upload-buttons .btn { font-size: 0.75rem; padding: 10px 11px; } } .upload-thumbnail { margin-bottom: 40px; } @media screen and (max-width: 1199px) { .upload-thumbnail { margin-bottom: 30px; } } @media screen and (max-width: 767px) { .upload-thumbnail { margin-bottom: 20px; } } @media screen and (max-width: 575px) { .upload-thumbnail { margin-bottom: 10px; } } .upload-thumbnail__title { font-size: 0.875rem; margin-bottom: 5px; } @media screen and (max-width: 991px) { .upload-thumbnail__title { font-size: 0.8125rem; margin-bottom: 3px; } } @media screen and (max-width: 767px) { .upload-thumbnail__title { font-size: 0.75rem; margin-bottom: 0; } } .upload-thumbnail__desc { font-size: 0.75rem; padding-right: 15px; margin-bottom: 10px; } @media screen and (max-width: 1199px) { .upload-thumbnail__desc { padding-right: 0; } } @media screen and (max-width: 767px) { .upload-thumbnail__desc { font-size: 0.6875rem; } } .upload-thumbnail .bottom { overflow-x: auto; padding-bottom: 10px; margin-right: -30px; } @media screen and (max-width: 1199px) { .upload-thumbnail .bottom { margin-right: -25px; } } @media screen and (max-width: 991px) { .upload-thumbnail .bottom { margin-right: -20px; } } @media screen and (max-width: 575px) { .upload-thumbnail .bottom { margin-right: -15px; } } @media screen and (max-width: 575px) { .upload-thumbnail .bottom { margin-right: -10px; } } .upload-thumbnail .bottom::-webkit-scrollbar { width: 5px; height: 5px; } @media screen and (max-width: 991px) { .upload-thumbnail .bottom::-webkit-scrollbar { width: 3px; height: 3px; } } @media screen and (max-width: 767px) { .upload-thumbnail .bottom::-webkit-scrollbar { width: 2px; height: 2px; } } .upload-thumbnail .bottom::-webkit-scrollbar-track { background: transparent; } .upload-thumbnail .bottom::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background: hsl(var(--heading-color)); } .upload-thumbnail .bottom__inner { flex-wrap: nowrap; gap: 16px; } @media screen and (max-width: 991px) { .upload-thumbnail .bottom__inner { gap: 10px; } } @media screen and (max-width: 575px) { .upload-thumbnail .bottom__inner { gap: 7px; } } .upload-thumbnail .bottom__inner .video-thumb-preview { width: 145px; height: 90px; flex-shrink: 0; border-radius: 4px; overflow: hidden; } @media screen and (max-width: 1199px) { .upload-thumbnail .bottom__inner .video-thumb-preview { width: 130px; height: 75px; } } @media screen and (max-width: 991px) { .upload-thumbnail .bottom__inner .video-thumb-preview { width: 115px; height: 65px; } } @media screen and (max-width: 575px) { .upload-thumbnail .bottom__inner .video-thumb-preview { width: 105px; height: 60px; } } .upload-thumbnail .bottom__inner .video-thumb-preview img { width: 100%; } .video-thumb-upload { position: relative; display: inline-block; flex-shrink: 0; } .video-thumb-upload input { font-size: 0; opacity: 0; width: 0; height: 0; } .video-thumb-upload__box { border: 1px dashed hsl(var(--heading-color)); border-radius: 4px; text-align: center; width: 145px; height: 90px; padding: 20px 10px; cursor: pointer; } @media screen and (max-width: 1199px) { .video-thumb-upload__box { width: 130px; height: 75px; padding: 15px 10px; } } @media screen and (max-width: 991px) { .video-thumb-upload__box { width: 115px; height: 65px; padding: 10px 5px; } } @media screen and (max-width: 575px) { .video-thumb-upload__box { width: 105px; height: 60px; padding: 7px 0; } } .video-thumb-upload__box .icon { font-size: 1.375rem; line-height: 1; margin-bottom: 5px; } @media screen and (max-width: 1199px) { .video-thumb-upload__box .icon { font-size: 1.25rem; } } @media screen and (max-width: 991px) { .video-thumb-upload__box .icon { font-size: 1rem; margin-bottom: 2px; } } @media screen and (max-width: 575px) { .video-thumb-upload__box .icon { font-size: 0.875rem; margin-bottom: 0; } } .video-thumb-upload__box .text { display: block; font-size: 0.625rem; } .video-thumb-upload:has(img) .video-thumb-upload__box { border: none; } .video-thumb-upload__thumbnailPreview { position: relative; } .video-thumb-upload__thumbnailPreview img { position: absolute; height: 90px; width: 145px; pointer-events: none; } .upload-elements__subtitle { background-color: hsl(var(--white) / 0.03); border-radius: 10px; padding: 15px; margin-bottom: 25px; } @media screen and (max-width: 991px) { .upload-elements__subtitle { padding: 13px; margin-bottom: 15px; } } @media screen and (max-width: 767px) { .upload-elements__subtitle { padding: 13px 10px 10px; margin-bottom: 10px; } } @media screen and (max-width: 575px) { .upload-elements__subtitle { align-items: flex-start; } } .upload-elements__subtitle .subtitle-content { position: relative; padding-left: 50px; } @media screen and (max-width: 991px) { .upload-elements__subtitle .subtitle-content { padding-left: 45px; } } @media screen and (max-width: 767px) { .upload-elements__subtitle .subtitle-content { padding-left: 35px; } } @media screen and (max-width: 575px) { .upload-elements__subtitle .subtitle-content { padding-left: 0; max-width: calc(100% - 40px); } } .upload-elements__subtitle .subtitle-content__icon { font-size: 2rem; line-height: 1; color: hsl(var(--heading-color)); position: absolute; left: 0; top: 0; } @media screen and (max-width: 991px) { .upload-elements__subtitle .subtitle-content__icon { font-size: 1.625rem; top: 3px; } } @media screen and (max-width: 767px) { .upload-elements__subtitle .subtitle-content__icon { font-size: 1.25rem; top: 0; } } @media screen and (max-width: 575px) { .upload-elements__subtitle .subtitle-content__icon { position: relative; font-size: 1.125rem; } } .upload-elements__subtitle .subtitle-content__title { font-weight: 400; line-height: 1; margin-bottom: 0; } @media screen and (max-width: 991px) { .upload-elements__subtitle .subtitle-content__title { font-size: 0.8125rem; } } @media screen and (max-width: 575px) { .upload-elements__subtitle .subtitle-content__title { margin-bottom: 5px; } } .upload-elements__subtitle .subtitle-content__desc { font-size: 0.75rem; line-height: 1; } @media screen and (max-width: 575px) { .upload-elements__subtitle .subtitle-content__desc { font-size: 0.6875rem; } } .upload-elements__subtitle .add-subtitle-btn { color: hsl(var(--heading-color)); line-height: 1; } @media screen and (max-width: 991px) { .upload-elements__subtitle .add-subtitle-btn { font-size: 0.9375rem; } } @media screen and (max-width: 767px) { .upload-elements__subtitle .add-subtitle-btn { font-size: 0.875rem; } } .upload-elements__subtitle .add-subtitle-btn:hover { color: hsl(var(--base)); } .setting-wrapper { position: relative; align-items: flex-start; justify-content: space-between; gap: 24px; } @media screen and (max-width: 1599px) { .setting-wrapper { gap: 15px; } } @media screen and (max-width: 1199px) { .setting-wrapper { display: block; } } .setting-wrapper .setting-menu-btn { font-size: 1.125rem; padding: 7px; width: 45px; height: 40px; margin-bottom: 15px; } @media screen and (max-width: 575px) { .setting-wrapper .setting-menu-btn { padding: 5px; width: 40px; height: 37px; margin-bottom: 10px; } } @media screen and (max-width: 374px) { .setting-wrapper .setting-menu-btn { width: 35px; height: 32px; font-size: 1.0625rem; } } .setting-menu { width: 370px; background: hsl(var(--bg-color)); box-shadow: var(--box-shadow-two); padding: 30px 0 10px 0; border-radius: 10px; overflow: hidden; transition: 0.1s linear; } @media screen and (max-width: 1599px) { .setting-menu { width: 320px; } } @media screen and (max-width: 1499px) { .setting-menu { width: 320px; } } @media screen and (max-width: 1399px) { .setting-menu { width: 290px; } } @media screen and (max-width: 1199px) { .setting-menu { width: 225px; } } @media screen and (max-width: 1199px) { .setting-menu { transform: translateX(-100%); z-index: 999992; border-radius: 0; height: 100%; position: fixed; left: 0; top: 0; } } .setting-menu.show { transform: translateX(0); } .setting-menu__close { position: absolute; top: 8px; right: 16px; color: hsl(var(--body-color)); font-size: 1.25rem; transition: 0.2s linear; cursor: pointer; z-index: 9; } .setting-menu__title { font-weight: 500; padding-left: 20px; margin-bottom: 20px; } @media screen and (max-width: 1399px) { .setting-menu__title { font-size: 1.25rem; } } @media screen and (max-width: 1199px) { .setting-menu__title { font-size: 1.125rem; } } .setting-menu__item { margin-bottom: 2px; } .setting-menu__link { position: relative; line-height: 1; padding: 15px 10px 15px 30px; } @media screen and (max-width: 1399px) { .setting-menu__link { padding: 12px 8px 12px 20px; } } @media screen and (max-width: 1199px) { .setting-menu__link { font-size: 0.9375rem; } } .setting-menu__link .icon { font-size: 1.375rem; margin-right: 20px; } @media screen and (max-width: 1399px) { .setting-menu__link .icon { font-size: 1.125rem; margin-right: 15px; } } @media screen and (max-width: 1199px) { .setting-menu__link .icon { font-size: 1rem; margin-right: 10px; position: relative; top: 1px; } } .setting-menu__link::after { position: absolute; content: ""; background: hsl(var(--base)); width: 4px; height: 100%; border-radius: 0 3px 3px 0; left: 0; top: 0; visibility: hidden; opacity: 0; transition: 0.1s linear; } @media screen and (max-width: 1399px) { .setting-menu__link::after { width: 3px; } } .setting-menu__link:hover, .setting-menu__link.active { color: hsl(var(--heading-color)); background: var(--setting-menu-active-bg); } .setting-menu__link:hover::after, .setting-menu__link.active::after { visibility: visible; opacity: 1; } .setting-content { width: calc(100% - 394px); background-color: hsl(var(--bg-color)); box-shadow: var(--box-shadow-two); border-radius: 10px; padding: 30px; margin-bottom: 30px; transition: 0.1s linear; } @media screen and (max-width: 1599px) { .setting-content { width: calc(100% - 335px); } } @media screen and (max-width: 1499px) { .setting-content { width: calc(100% - 335px); } } @media screen and (max-width: 1399px) { .setting-content { width: calc(100% - 305px); padding: 30px 20px; } } @media screen and (max-width: 1199px) { .setting-content { width: 100%; min-height: 100%; padding: 30px; } } @media screen and (max-width: 991px) { .setting-content { padding: 20px; } } @media screen and (max-width: 767px) { .setting-content { padding: 15px; } } .setting-content__title { color: hsl(var(--white)); font-weight: 500; margin-bottom: 20px; } @media screen and (max-width: 1399px) { .setting-content__title { font-size: 1.25rem; } } .setting-content .subtitle { color: hsl(var(--heading-color)); font-size: 0.875rem; margin-bottom: 30px; line-height: 1.2; } @media screen and (max-width: 575px) { .setting-content .subtitle { font-size: 0.8125rem; margin-bottom: 20px; } } .edit-profile__photo { position: relative; } .edit-profile__photo .cover-photo { position: relative; background: var(--cover-photo-bg); border-radius: 10px; height: 175px; overflow: hidden; } .edit-profile__photo .cover-photo .cover-edit .coverPhotoUpload { font-size: 0; opacity: 0; width: 0; } .edit-profile__photo .cover-photo .cover-edit label { display: flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; position: absolute; bottom: 16px; right: 16px; gap: 7px; padding: 4px 10px; background-color: hsl(var(--static-light) / 0.1); color: hsl(var(--static-light)); border-radius: 6px; border: 1px dashed hsl(var(--static-light)); } .edit-profile__photo .cover-photo .cover-edit label .text { font-size: 0.75rem; } .edit-profile__photo .profile-picture { position: absolute; display: inline-block; background: #d9d9d9; border-radius: 50%; left: 40px; bottom: -32px; } @media screen and (max-width: 767px) { .edit-profile__photo .profile-picture { left: 30px; bottom: -30px; } } .edit-profile__photo .profile-picture__inner { position: relative; width: 64px; height: 64px; border: 3px solid hsl(var(--static-light-two)); border-radius: 50%; overflow: hidden; } @media screen and (max-width: 767px) { .edit-profile__photo .profile-picture__inner { width: 60px; height: 60px; border: 2px solid hsl(var(--static-light-two)); } } .edit-profile__photo .profile-picture input { font-size: 0; opacity: 0; width: 0; } .edit-profile__photo .profile-picture label { font-size: 1rem; color: hsl(var(--white)); background: hsl(var(--black) / 0.25); cursor: pointer; position: absolute; top: 0; left: 0; visibility: visible; opacity: 1; display: grid; place-items: center; width: 100%; height: 100%; } .edit-profile__form { margin-top: 64px; } @media screen and (max-width: 767px) { .edit-profile__form { margin-top: 60px; } } .profile-setting-form .notice-text { font-size: 0.625rem; } .privacy-setting-form .notice { background: hsl(var(--bg-color)); box-shadow: var(--box-shadow-two); font-size: 0.875rem; color: hsl(var(--heading-color)); padding: 25px 30px; border-radius: 5px; margin: 30px 0 45px; } @media screen and (max-width: 1599px) { .privacy-setting-form .notice { padding: 25px; margin: 25px 0 40px; } } @media screen and (max-width: 991px) { .privacy-setting-form .notice { padding: 20px; margin: 20px 0 30px; } } @media screen and (max-width: 575px) { .privacy-setting-form .notice { font-size: 0.8125rem; padding: 15px; margin: 15px 0 20px; } } @media screen and (max-width: 424px) { .privacy-setting-form .notice { font-size: 0.75rem; } } .wallet-setting__tagline { font-size: 0.75rem; font-weight: 400; } .wallet-setting__balance { font-size: 2.5rem; line-height: 1; font-weight: 600; } @media screen and (max-width: 767px) { .wallet-setting__balance { font-size: 2.125rem; } } @media screen and (max-width: 575px) { .wallet-setting__balance { font-size: 1.875rem; margin-top: 15px; } } .wallet-setting__balance sup { font-size: 0.75rem; font-weight: 400; position: relative; top: -20px; margin-right: 5px; } @media screen and (max-width: 767px) { .wallet-setting__balance sup { top: -15px; } } @media screen and (max-width: 575px) { .wallet-setting__balance sup { top: -13px; } } .wallet-setting__buttons button { display: inline-flex; align-items: center; justify-content: center; width: 210px; height: 100px; border-radius: 5px; background: hsl(var(--purple)); color: hsl(var(--static-light)); line-height: 1; font-weight: 600; margin-right: 30px; } @media screen and (max-width: 1399px) { .wallet-setting__buttons button { width: 180px; height: 85px; margin-right: 20px; } } @media screen and (max-width: 767px) { .wallet-setting__buttons button { width: 165px; height: 75px; margin-right: 15px; } } @media screen and (max-width: 575px) { .wallet-setting__buttons button { width: 145px; height: 55px; margin-right: 10px; font-weight: 500; font-size: 0.875rem; } } @media screen and (max-width: 374px) { .wallet-setting__buttons button { width: 120px; height: 45px; margin-right: 5px; font-size: 0.8125rem; } } .wallet-setting__buttons button:last-of-type { margin-right: 0; } .wallet-setting__buttons button:hover { background: hsl(var(--purple-l-100)); } .wallet-setting__buttons button.add { background: hsl(var(--success)); } .wallet-setting__buttons button.add:hover { background: hsl(var(--success-d-100)); } .wallet-setting__buttons button .icon { width: 24px; height: 24px; margin-right: 5px; } @media screen and (max-width: 575px) { .wallet-setting__buttons button .icon { width: 20px; height: 20px; } } @media screen and (max-width: 575px) { .wallet-setting__buttons button .icon { width: 17px; height: 17px; } } @media screen and (max-width: 374px) { .wallet-setting__buttons button .icon { display: none; } } .wallet-setting__wallet { margin-top: 40px; } @media screen and (max-width: 767px) { .wallet-setting__wallet { margin-top: 20px; } } .wallet-setting__wallet .buttons { gap: 20px; } @media screen and (max-width: 1599px) { .wallet-setting__wallet .buttons { gap: 15px; } } @media screen and (max-width: 1499px) { .wallet-setting__wallet .buttons { gap: 15px; } } @media screen and (max-width: 575px) { .wallet-setting__wallet .buttons { gap: 10px; } } .wallet-setting__wallet .wallet-btn { width: 80px; height: 42px; border: 1px solid var(--border-color); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; transition: 0.1s linear; } @media screen and (max-width: 1599px) { .wallet-setting__wallet .wallet-btn { width: 70px; height: 40px; } } @media screen and (max-width: 767px) { .wallet-setting__wallet .wallet-btn { width: 65px; height: 35px; } } @media screen and (max-width: 575px) { .wallet-setting__wallet .wallet-btn { width: 55px; height: 30px; } } .wallet-setting__wallet .wallet-btn img { max-width: 32px; } @media screen and (max-width: 575px) { .wallet-setting__wallet .wallet-btn img { max-width: 30px; } } .wallet-setting__wallet .wallet-btn:hover { border-color: hsl(var(--base)); } .wallet-setting__wallet .wallet-btn.add-wallet { border: 0; border-radius: 0; padding: 0; color: hsl(var(--body-color)); width: auto; height: auto; transition: 0.1s linear; } @media screen and (max-width: 767px) { .wallet-setting__wallet .wallet-btn.add-wallet { font-size: 0.9375rem; } } @media screen and (max-width: 575px) { .wallet-setting__wallet .wallet-btn.add-wallet { font-size: 0.875rem; } } .wallet-setting__wallet .wallet-btn.add-wallet .icon { margin-right: 8px; } @media screen and (max-width: 767px) { .wallet-setting__wallet .wallet-btn.add-wallet .icon { margin-right: 5px; } } .wallet-setting__wallet .wallet-btn.add-wallet:hover { color: hsl(var(--base)); } .wallet-setting__wallet .wallet-btn.add-wallet:hover svg { fill: hsl(var(--base)); } .monetization-card { position: relative; background: var(--cover-photo-bg); border-radius: 10px; padding: 40px 30px; } @media screen and (max-width: 991px) { .monetization-card { padding: 25px 20px; } } @media screen and (max-width: 575px) { .monetization-card { padding: 20px 15px; } } .monetization-card__title { max-width: 475px; font-weight: 500; margin-bottom: 30px; } @media screen and (max-width: 1499px) { .monetization-card__title { max-width: 445px; } } @media screen and (max-width: 991px) { .monetization-card__title { max-width: 385px; } } @media screen and (max-width: 767px) { .monetization-card__title { max-width: 365px; } } @media screen and (max-width: 575px) { .monetization-card__title { max-width: 100%; margin-bottom: 15px; } } @media screen and (max-width: 374px) { .monetization-card__title { font-size: 1rem; } } .monetization-card__tagline { font-size: 0.875rem; color: hsl(var(--heading-color)); margin-right: 15px; } @media screen and (max-width: 424px) { .monetization-card__tagline { display: block; margin-right: 0; margin-bottom: 10px; } } .monetization-card .btn { font-size: 0.875rem; font-weight: 400; padding: 12px 20px; } @media screen and (max-width: 767px) { .monetization-card .btn { padding: 10px 18px; } } @media screen and (max-width: 767px) { .monetization-card .btn { font-size: 0.8125rem; } } @media screen and (max-width: 424px) { .monetization-card .btn { padding: 9px 16px; } } .monetization-card .img { position: absolute; right: 25px; top: 0; bottom: 0; margin: auto 0; } @media screen and (max-width: 991px) { .monetization-card .img { max-width: 140px; } } @media screen and (max-width: 767px) { .monetization-card .img { max-width: 100px; right: 15px; } } @media screen and (max-width: 575px) { .monetization-card .img { display: none; } } .monetization-card.paid .monetization-card__title { margin-bottom: 15px; } @media screen and (max-width: 424px) { .monetization-card.paid .monetization-card__title { margin-bottom: 10px; } } .monetization-card.paid .monetization-card__desc { max-width: 345px; margin-bottom: 25px; } @media screen and (max-width: 575px) { .monetization-card.paid .monetization-card__desc { max-width: 100%; } } @media screen and (max-width: 424px) { .monetization-card.paid .monetization-card__desc { margin-bottom: 15px; } } .monetization-progress { background: transparent; border-radius: 0; margin: 40px 0; } .monetization-progress .title { margin-bottom: 30px; } @media screen and (max-width: 424px) { .monetization-progress .title { font-size: 0.9375rem; margin-bottom: 20px; } } @media screen and (max-width: 374px) { .monetization-progress .title { font-size: 0.875rem; margin-bottom: 15px; } } .monetization-progress .title .icon { font-size: 0.9375rem; line-height: 1; margin-left: 10px; } @media screen and (max-width: 575px) { .monetization-progress .title .icon { margin-left: 5px; } } @media screen and (max-width: 374px) { .monetization-progress .title .icon { display: none; } } .progress-wrap .progress-item { position: relative; margin-bottom: 25px; } @media screen and (max-width: 424px) { .progress-wrap .progress-item { margin-bottom: 20px; } } .progress-wrap .progress-item:last-of-type { margin-bottom: 0; } .progress-wrap .progress-item .progress { position: relative; width: 100%; height: 10px; background: transparent; border-radius: 10px; overflow: hidden; } @media screen and (max-width: 424px) { .progress-wrap .progress-item .progress { height: 8px; } } .progress-wrap .progress-item .progress::after { position: absolute; content: ""; background: var(--progress-bg); width: 100%; height: 100%; left: 0; top: 0; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .progress-wrap .progress-item .progressbar { width: 0px; height: 10px; background-color: hsl(var(--base)); border-radius: 10px; position: absolute; left: -1px; top: 0; } @media screen and (max-width: 424px) { .progress-wrap .progress-item .progressbar { height: 8px; } } .progress-wrap .progress-item__caption { color: hsl(var(--heading-color)); font-size: 0.875rem; font-weight: 400; margin-top: 10px; margin-bottom: 0; } @media screen and (max-width: 575px) { .progress-wrap .progress-item__caption { font-size: 0.8125rem; } } @media screen and (max-width: 424px) { .progress-wrap .progress-item__caption { margin-top: 7px; } } .progress-wrap .progress-item__caption span { color: hsl(var(--body-color)); } @media screen and (max-width: 575px) { .progress-wrap .progress-item__caption span { font-size: 0.75rem; } } @media screen and (max-width: 374px) { .progress-wrap .progress-item__caption span { display: block; } } .progress-wrap .progress-item__number { color: hsl(var(--heading-color)); font-size: 0.875rem; position: absolute; right: 0; bottom: -3px; } @media screen and (max-width: 575px) { .progress-wrap .progress-item__number { font-size: 0.8125rem; } } @media screen and (max-width: 424px) { .progress-wrap .progress-item__number { bottom: 0; } } @media screen and (max-width: 374px) { .progress-wrap .progress-item__number { bottom: auto; top: 13px; } } .playback__title { margin-bottom: 2px; } .playback__tagline { font-size: 0.75rem; margin-bottom: 5px; } .playback__form .form-group { margin-bottom: 35px; } @media screen and (max-width: 767px) { .playback__form .form-group { margin-bottom: 25px; } } @media screen and (max-width: 424px) { .playback__form .form-group { margin-bottom: 20px; } } .playback__form .form-group:first-of-type { margin-bottom: 40px; } @media screen and (max-width: 767px) { .playback__form .form-group:first-of-type { margin-bottom: 30px; } } @media screen and (max-width: 424px) { .playback__form .form-group:first-of-type { margin-bottom: 20px; } } .playback__form .form-group:last-of-type { margin-bottom: 0; } .playback__form .form-group:not(:first-of-type) { max-width: 305px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .playback__form .form-group .form--label { font-size: 1rem; font-weight: 600; display: inline-block; margin-bottom: 0; } @media screen and (max-width: 767px) { .playback__form .form-group .form--label { font-size: 0.9375rem; } } @media screen and (max-width: 767px) { .playback__form .form-group .form--label { font-size: 0.875rem; } } .playback__form .form-group .form--control { width: auto; display: inline-block; font-size: 0.875rem; padding: 5px; color: hsl(var(--heading-color)) !important; margin-left: 10px; } @media screen and (max-width: 424px) { .playback__form .form-group .form--control { font-size: 0.8125rem; } } .playback__form .form-group .form--radio .form-check-label { position: relative; top: 2px; } @media screen and (max-width: 424px) { .playback__form .form-group .form--radio .form-check-label { font-size: 0.8125rem; top: 0; padding-left: 0; } } .varification__desc { margin: 5px 0 30px; } @media screen and (max-width: 575px) { .varification__desc { margin: 5px 0 20px; font-size: 0.8125rem; } } .country_code { width: 85px; position: absolute; left: 0; top: 50%; padding-left: 12px; transform: translateY(-50%); } .form-control.phone { padding-left: 95px; } @media screen and (max-width: 575px) { .country_code { width: 75px; padding-left: 7px; } .form-control.phone { padding-left: 85px; } } @media screen and (max-width: 424px) { .country_code { width: 48px; } .form-control.phone { padding-left: 58px; } } .country_code::after { position: absolute; content: ""; background: hsl(var(--heading-color)); width: 1px; height: 11px; right: 0; top: 0; bottom: 0; margin: auto 0; } .country_code__caption { cursor: pointer; padding: 0; } .country_code__caption .flag { position: relative; width: 20px; height: 14px; margin-right: 2px; } @media screen and (max-width: 424px) { .country_code__caption .flag { width: 14px; height: 14px; margin-right: 0; } } .country_code__caption .flag img { border-radius: 3px; width: 100%; } .country_code__caption .text { font-size: 0.75rem; color: hsl(var(--heading-color)); } @media screen and (max-width: 424px) { .country_code__caption .text { font-size: 0.6875rem; } } .country_code__list { position: absolute; width: 100%; min-width: 80px; background: hsl(var(--bg-color)); border-radius: 5px; box-shadow: var(--box-shadow-two); opacity: 0; overflow: hidden; -webkit-transition: all 0.15s cubic-bezier(0.25, 0, 0.25, 1.75), opacity 0.1s linear; transition: all 0.15s cubic-bezier(0.25, 0, 0.25, 1.75), opacity 0.1s linear; -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; top: calc(100% + 12px); z-index: -1; visibility: hidden; padding: 0; } .country_code__item { cursor: pointer; padding: 3px 10px; border-bottom: 1px solid var(--form-border); } .country_code__item:last-of-type { border-bottom: 0; } .country_code__item .flag { width: 18px; height: 18px; } @media screen and (max-width: 424px) { .country_code__item .flag { width: 14px; height: 14px; } } .country_code__item .flag img { width: 100%; } .country_code__item .text { font-size: 0.75rem; font-weight: 500; color: hsl(var(--heading-color)); } @media screen and (max-width: 424px) { .country_code__item .text { font-size: 0.6875rem; } } .country_code.open .country_code__list { -webkit-transform: scale(1); transform: scale(1); opacity: 1; z-index: 1; visibility: visible; } .varification-success { text-align: center; padding: 10% 0; } .varification-success__icon { width: 100px; height: 100px; background: hsl(var(--success)); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--heading-color)); font-size: 3rem; margin-bottom: 45px; } @media screen and (max-width: 991px) { .varification-success__icon { width: 85px; height: 85px; font-size: 2.5rem; margin-bottom: 30px; } } @media screen and (max-width: 767px) { .varification-success__icon { width: 75px; height: 75px; font-size: 2.1rem; margin-bottom: 25px; } } @media screen and (max-width: 424px) { .varification-success__icon { width: 60px; height: 60px; font-size: 1.6rem; margin-bottom: 18px; } } .varification-success__msg { margin-bottom: 0; } @media screen and (max-width: 767px) { .varification-success__msg { font-size: 1rem; } } @media screen and (max-width: 767px) { .varification-success__msg { font-size: 0.875rem; } } .security-setting__title { margin-bottom: 16px; } @media screen and (max-width: 374px) { .security-setting__title { font-size: 1rem; } } .security-setting__item { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 30px; } @media screen and (max-width: 1399px) { .security-setting__item { margin-bottom: 20px; } } @media screen and (max-width: 767px) { .security-setting__item { align-items: center; } } @media screen and (max-width: 575px) { .security-setting__item { flex-wrap: wrap; gap: 10px; margin-bottom: 15px; } } @media screen and (max-width: 374px) { .security-setting__item { gap: 7px; } } .security-setting__item:last-of-type { margin-bottom: 0; } .security-setting__item .title { margin-bottom: 0; } @media screen and (max-width: 575px) { .security-setting__item .title { font-size: 0.875rem; } } .security-setting__item .desc { font-size: 0.75rem; max-width: 495px; } @media screen and (max-width: 767px) { .security-setting__item .desc { max-width: 410px; } } @media screen and (max-width: 575px) { .security-setting__item .desc { max-width: 100%; } } @media screen and (max-width: 374px) { .security-setting__item .desc { font-size: 0.6875rem; } } .security-setting__item .btn { font-size: 0.875rem; padding: 10px 11px; } @media screen and (max-width: 575px) { .security-setting__item .btn { font-size: 0.8125rem; padding: 8px; } } .security-setting .connected-device { background: hsl(var(--bg-color)); box-shadow: var(--box-shadow-two); padding: 30px; border-radius: 10px; overflow: hidden; margin-bottom: 30px; } @media screen and (max-width: 1399px) { .security-setting .connected-device { margin-bottom: 20px; } } @media screen and (max-width: 575px) { .security-setting .connected-device { padding: 20px 15px; margin-bottom: 15px; } } @media screen and (max-width: 374px) { .security-setting .connected-device { padding: 15px 10px; } } .security-setting .connected-device .title { margin-bottom: 0; } @media screen and (max-width: 575px) { .security-setting .connected-device .title { font-size: 0.875rem; } } .security-setting .connected-device .desc { font-size: 0.75rem; margin-bottom: 18px; } @media screen and (max-width: 374px) { .security-setting .connected-device .desc { font-size: 0.6875rem; margin-bottom: 15px; } } .security-setting .connected-device__item { margin-bottom: 15px; } .security-setting .connected-device__item:last-of-type { margin-bottom: 0; } .security-setting .connected-device__item .details { position: relative; padding-left: 42px; } @media screen and (max-width: 575px) { .security-setting .connected-device__item .details { padding-left: 37px; } } .security-setting .connected-device__item .details .icon { width: 32px; height: 32px; background: #04aaf1; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: hsl(var(--heading-color)); position: absolute; left: 0; top: 0; } @media screen and (max-width: 575px) { .security-setting .connected-device__item .details .icon { width: 28px; height: 28px; font-size: 0.875rem; } } .security-setting .connected-device__item .details .icon.phone { background: hsl(var(--purple)); } .security-setting .connected-device__item .details .title { line-height: 1; } @media screen and (max-width: 575px) { .security-setting .connected-device__item .details .title { font-size: 0.8125rem; } } .security-setting .connected-device__item .details .date { position: relative; font-size: 0.75rem; padding-right: 14px; } @media screen and (max-width: 374px) { .security-setting .connected-device__item .details .date { font-size: 0.6875rem; padding-right: 10px; } } .security-setting .connected-device__item .details .date::after { position: absolute; content: ""; background: hsl(var(--body-color)); width: 2px; height: 2px; border-radius: 50%; right: 4px; top: 0; bottom: 0; margin: auto 0; } @media screen and (max-width: 374px) { .security-setting .connected-device__item .details .date::after { right: 2px; } } .security-setting .connected-device__item .details .location { font-size: 0.75rem; } @media screen and (max-width: 374px) { .security-setting .connected-device__item .details .location { font-size: 0.6875rem; } } .security-setting .connected-device__item .details .location.active { font-weight: 600; color: hsl(var(--base)); } .security-setting .connected-device__item .remove-btn { font-size: 0.75rem; font-weight: 600; color: hsl(var(--heading-color)); text-decoration: underline; } @media screen and (max-width: 374px) { .security-setting .connected-device__item .remove-btn { font-size: 0.6875rem; } } .security-setting .connected-device__item .remove-btn:hover { color: hsl(var(--base)); } .change-password__back { line-height: 1; color: hsl(var(--heading-color)); font-size: 1.875rem; margin-bottom: 5px; } @media screen and (max-width: 575px) { .change-password__back { font-size: 1.5625rem; margin-bottom: 0; } } .deactive-delete-account__back { line-height: 1; color: hsl(var(--heading-color)); font-size: 1.875rem; margin-bottom: 20px; } @media screen and (max-width: 767px) { .deactive-delete-account__back { margin-bottom: 10px; } } @media screen and (max-width: 575px) { .deactive-delete-account__back { font-size: 1.5625rem; margin-bottom: 5px; } } .deactive-delete-account .title { margin-bottom: 20px; } @media screen and (max-width: 767px) { .deactive-delete-account .title { margin-bottom: 15px; } } @media screen and (max-width: 767px) and (max-width: 767px) { .deactive-delete-account .title { font-size: 0.9375rem; } } @media screen and (max-width: 767px) and (max-width: 575px) { .deactive-delete-account .title { font-size: 0.875rem; } } .deactive-delete-account__form .form-group .form--radio { margin-bottom: 20px; } @media screen and (max-width: 767px) { .deactive-delete-account__form .form-group .form--radio { margin-bottom: 15px; } } @media screen and (max-width: 575px) { .deactive-delete-account__form .form-group .form--radio { margin-bottom: 10px; } } .deactive-delete-account__form .form-group .form--radio:last-of-type { margin-bottom: 0; } @media screen and (max-width: 424px) { .deactive-delete-account__form .form-group .form-check-input:checked::before { width: 11px; height: 11px; -webkit-transform: translate(-55%, -47%); transform: translate(-55%, -47%); } } .deactive-delete-account__form .form-group .form-check-label { padding-left: 15px; } @media screen and (max-width: 767px) { .deactive-delete-account__form .form-group .form-check-label { padding-left: 10px; font-size: 0.9375rem; } } @media screen and (max-width: 575px) { .deactive-delete-account__form .form-group .form-check-label { padding-left: 5px; font-size: 0.875rem; } } .two-fa-wrapper__back { line-height: 1; color: hsl(var(--heading-color)); font-size: 1.875rem; margin-bottom: 15px; } @media screen and (max-width: 575px) { .two-fa-wrapper__back { font-size: 1.5625rem; margin-bottom: 5px; } } .two-fa-wrapper .title { margin-bottom: 20px; } @media screen and (max-width: 991px) { .two-fa-wrapper .title { margin-bottom: 15px; } } @media screen and (max-width: 575px) { .two-fa-wrapper .title { font-size: 0.9375rem; margin-bottom: 10px; } } .two-fa__title { margin-bottom: 10px; } @media screen and (max-width: 991px) { .two-fa__title { margin-bottom: 5px; } } @media screen and (max-width: 575px) { .two-fa__title { font-size: 0.875rem; } } .two-fa__desc { font-size: 0.75rem; max-width: 500px; margin-bottom: 15px; } @media screen and (max-width: 767px) { .two-fa__desc { max-width: 100%; } } @media screen and (max-width: 575px) { .two-fa__desc { margin-bottom: 10px; } } @media screen and (max-width: 374px) { .two-fa__desc { font-size: 0.6875rem; } } @media screen and (max-width: 767px) { .two-fa__qr { margin-bottom: 25px; } } .two-fa__qr .qr { max-width: 164px; max-height: 164px; margin-bottom: 15px; } @media screen and (max-width: 1199px) { .two-fa__qr .qr { max-width: 130px; max-height: 130px; } } @media screen and (max-width: 991px) { .two-fa__qr .qr { max-width: 110px; max-height: 110px; } } @media screen and (max-width: 575px) { .two-fa__qr .qr { max-width: 100px; max-height: 100px; margin-bottom: 10px; } } .two-fa__qr .note { font-size: 0.75rem; color: hsl(var(--heading-color)); margin-bottom: 12px; } @media screen and (max-width: 575px) { .two-fa__qr .note { margin-bottom: 5px; } } @media screen and (max-width: 374px) { .two-fa__qr .note { font-size: 0.6875rem; } } .two-fa__qr .copy-form { position: relative; max-width: 255px; } @media screen and (max-width: 767px) { .two-fa__qr .copy-form { max-width: 100%; } } .two-fa__qr .copy-form .form-group .form--control { font-size: 1rem; padding: 8px 50px 8px 15px; border-radius: 44px; } @media screen and (max-width: 991px) { .two-fa__qr .copy-form .form-group .form--control { font-size: 0.875rem; padding: 10px 50px 10px 15px; } } @media screen and (max-width: 575px) { .two-fa__qr .copy-form .form-group .form--control { font-size: 0.8125rem; padding: 9px 50px 9px 15px; } } .two-fa__qr .copy-form .form-group .form--control::placeholder { color: hsl(var(--heading-color)); font-size: 1rem; } @media screen and (max-width: 991px) { .two-fa__qr .copy-form .form-group .form--control::placeholder { font-size: 0.875rem; } } @media screen and (max-width: 575px) { .two-fa__qr .copy-form .form-group .form--control::placeholder { font-size: 0.8125rem; } } .two-fa__qr .copy-form .form-group .copyCode-btn { color: hsl(var(--heading-color)); font-size: 1.0625rem; line-height: 1; position: absolute; right: 0; top: 0; bottom: 0; margin: auto 0; padding-left: 10px; padding-right: 18px; } .two-fa__qr .copy-form .form-group .copyCode-btn:hover { color: hsl(var(--base)); } .two-fa__qr .copy-form .form-group .copyCode-btn::after { position: absolute; content: ""; background: hsl(var(--body-color)); width: 1px; height: 14px; left: 0; top: 0; bottom: 0; margin: auto 0; } @media screen and (max-width: 575px) { .two-fa__form .form-group { margin-bottom: 7px; } } @media screen and (max-width: 374px) { .two-fa__form .form-group .form--label { font-size: 0.6875rem; } } .two-fa__form .form-group .form--control { font-size: 0.75rem; } .two-fa__form .form-group .form--control::placeholder { font-size: 0.75rem; } .two-fa__form .form-group .btn { font-weight: 600; } @media screen and (max-width: 991px) { .two-fa__form .form-group .btn { font-size: 0.875rem; } } @media screen and (max-width: 767px) { .two-fa__form .form-group .btn { padding: 13px 25px; } } @media screen and (max-width: 575px) { .two-fa__form .form-group .btn { font-size: 0.8125rem; font-weight: 500; padding: 12.5px 15px; } } .create-advertising { max-width: 1200px; width: 100%; } .create-advertising__back { line-height: 1; color: hsl(var(--heading-color)); font-size: 1.875rem; margin-bottom: 5px; } @media screen and (max-width: 575px) { .create-advertising__back { font-size: 1.5625rem; } } .create-advertising__title { margin-bottom: 30px; } @media screen and (max-width: 1199px) { .create-advertising__title { margin-bottom: 25px; } } @media screen and (max-width: 991px) { .create-advertising__title { margin-bottom: 20px; } } @media screen and (max-width: 575px) { .create-advertising__title { font-size: 0.875rem; margin-bottom: 15px; } } .create-advertising__form .form-group { position: relative; margin-bottom: 20px; } @media screen and (max-width: 1199px) { .create-advertising__form .form-group { margin-bottom: 15px; } } .create-advertising__form .form-group .form--label { display: block; } .create-advertising__form .form-group .form--control { font-size: 0.8125rem; } @media screen and (max-width: 991px) { .create-advertising__form .form-group .form--control { font-size: 0.75rem; } } .create-advertising__form .form-group .form--control::placeholder { font-size: 0.8125rem; } @media screen and (max-width: 991px) { .create-advertising__form .form-group .form--control::placeholder { font-size: 0.75rem; } } .create-advertising__form .form-group .form--control.select { color: hsl(var(--heading-color)) !important; padding-top: 10.5px; padding-bottom: 10.5px; } @media screen and (max-width: 575px) { .create-advertising__form .form-group .form--control.select { padding-top: 9.5px; padding-bottom: 9.5px; } } .create-advertising__form .form-group textarea.form--control { resize: none; height: 145px; } @media screen and (max-width: 991px) { .create-advertising__form .form-group textarea.form--control { height: 120px; } } @media screen and (max-width: 991px) { .create-advertising__form .form-group textarea.form--control { height: 100px; } } .create-advertising__form .form-group .btn { font-size: 0.875rem; line-height: 1; padding: 12px 18px; } @media screen and (max-width: 991px) { .create-advertising__form .form-group .btn { font-size: 0.8125rem; padding: 12px 18px; } } .create-advertising__form .form-group .btn i { font-size: 0.75rem; margin-right: 5px; } @media screen and (max-width: 991px) { .create-advertising__form .form-group .btn i { font-size: 0.6875rem; margin-right: 2px; } } .create-advertising__form .form-group .mediaUploadLabel { color: hsl(var(--white) / 0.8); border: 1px dashed hsl(var(--white) / 0.1); border-radius: 5px; outline: none; cursor: pointer; width: 100%; height: 105px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 14px; gap: 6px; } .mediaUploadLabel input, .mediaUploadLabel input { display: none; } .mediaUploadLabel.required:after { display: none; } .create-advertising__form .left .form--control { width: calc(100% - 30px); } @media screen and (max-width: 1499px) { .create-advertising__form .left .form--control { width: calc(100% - 15px); } } @media screen and (max-width: 1199px) { .create-advertising__form .left .form--control { width: 100%; } } .advertising-wrapper { max-width: 1396px; min-height: 700px; background-color: hsl(var(--bg-color)); box-shadow: var(--box-shadow-two); border-radius: 10px; padding: 30px; margin: 0 auto 30px; } @media screen and (max-width: 1599px) { .advertising-wrapper { padding: 20px; } } @media screen and (max-width: 767px) { .advertising-wrapper { padding: 15px; } } .advertising-heading { position: relative; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid hsl(var(--white) / 0.1); } @media screen and (max-width: 1199px) { .advertising-heading { padding-bottom: 12px; margin-bottom: 16px; } } .advertising-heading__title { margin-bottom: 0; } @media screen and (max-width: 424px) { .advertising-heading__title { font-size: 1rem; } } .advertising-heading__title .icon { width: 32px; height: 32px; background: hsl(var(--base)); border-radius: 50%; font-size: 1.125rem; color: hsl(var(--static-light)); display: inline-flex; align-items: center; justify-content: center; margin-right: 3px; } @media screen and (max-width: 991px) { .advertising-heading__title .icon { width: 28px; height: 28px; font-size: 1rem; } } @media screen and (max-width: 424px) { .advertising-heading__title .icon { width: 25px; height: 25px; font-size: 0.875rem; } } .advertising-heading .btn { font-size: 0.875rem; padding: 12px 20px; } .advertising-heading .btn i { font-size: 0.75rem; margin-right: 2px; } @media screen and (max-width: 991px) { .advertising-heading .btn i { font-size: 0.6875rem; } } @media screen and (max-width: 575px) { .advertising-heading .btn i { font-size: 0.625rem; } } @media screen and (max-width: 991px) { .advertising-heading .btn { font-size: 0.8125rem; padding: 11px 16px; } } @media screen and (max-width: 575px) { .advertising-heading .btn { font-size: 0.75rem; padding: 11px 14px; } } @media screen and (max-width: 424px) { .advertising-heading .btn { padding: 10px 12px; } } .advertising-card-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 25px; margin-bottom: 40px; } @media screen and (max-width: 1599px) { .advertising-card-wrapper { gap: 30px; margin-bottom: 25px; } } @media screen and (max-width: 1399px) { .advertising-card-wrapper { gap: 24px; } } @media screen and (max-width: 1199px) { .advertising-card-wrapper { gap: 15px; } } @media screen and (max-width: 991px) { .advertising-card-wrapper { grid-template-columns: repeat(1, 1fr); } } @media screen and (max-width: 575px) { .advertising-card-wrapper { gap: 10px; } } .advertising-card { background: hsl(var(--bg-color)); padding: 30px 24px; border-radius: 10px; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; } @media screen and (max-width: 1599px) { .advertising-card { padding: 25px 20px; } } @media screen and (max-width: 1199px) { .advertising-card { padding: 15px; } } @media screen and (max-width: 991px) { .advertising-card { padding: 20px; } } @media screen and (max-width: 575px) { .advertising-card { padding: 15px; } } @media screen and (max-width: 424px) { .advertising-card { display: block; } } .advertising-card__content { position: relative; padding-left: 30px; display: flex; flex-direction: column; gap: 10px; } @media screen and (max-width: 1199px) { .advertising-card__content { padding-left: 0; width: calc(100% - 100px); } } @media screen and (max-width: 991px) { .advertising-card__content { padding-left: 50px; } } @media screen and (max-width: 575px) { .advertising-card__content { padding-left: 0; width: calc(100% - 100px); } } @media screen and (max-width: 424px) { .advertising-card__content { width: 100%; } } .advertising-card__icon { width: 80px; height: 80px; background: hsl(var(--warning) / 0.1); border-radius: 10px; font-size: 2rem; color: hsl(var(--warning)); display: inline-flex; align-items: center; justify-content: center; } @media screen and (max-width: 1399px) { .advertising-card__icon { width: 60px; height: 60px; font-size: 1.5rem; } } @media screen and (max-width: 1199px) { .advertising-card__icon { position: relative; margin-bottom: 10px; } } @media screen and (max-width: 575px) { .advertising-card__icon { position: relative; margin-bottom: 12px; width: 50px; height: 50px; font-size: 1.2rem; } } .advertising-card__icon.two { background: hsl(var(--purple) / 0.1); color: hsl(var(--purple)); } .advertising-card__title { margin-bottom: 5px; } @media screen and (max-width: 1599px) { .advertising-card__title { font-size: 1.25rem; } } @media screen and (max-width: 1199px) { .advertising-card__title { font-size: 1.125rem; } } @media screen and (max-width: 575px) { .advertising-card__title { font-size: 1rem; margin-bottom: 0; } } @media screen and (max-width: 424px) { .advertising-card__title { font-size: 0.9375rem; } } @media screen and (max-width: 1199px) { .advertising-card__desc { font-size: 0.8125rem; } } @media screen and (max-width: 575px) { .advertising-card__desc { font-size: 0.75rem; } } @media screen and (max-width: 424px) { .advertising-card__desc { margin-bottom: 10px; } } .advertising-card__amount { margin-bottom: 0; } @media screen and (max-width: 1599px) { .advertising-card__amount { font-size: 1.4375rem; } } @media screen and (max-width: 1399px) { .advertising-card__amount { font-size: 1.25rem; } } @media screen and (max-width: 575px) { .advertising-card__amount { font-size: 1rem; } } @media screen and (max-width: 424px) { .advertising-card__amount { font-size: 0.9375rem; } } .advertising-table { border-radius: 12px; border: 1px solid hsl(var(--white) / 0.1); background: hsl(var(--bg-color)); } .advertising-table__search { padding: 24px; border-bottom: 1px solid hsl(var(--white) / 0.1); } .advertising-table__search .form-group { max-width: 305px; margin-bottom: 0; } @media screen and (max-width: 575px) { .advertising-table__search .form-group { max-width: 100%; } } .advertising-table__search .form-group { position: relative; } .advertising-table__search .form-group .form--control { font-size: 0.75rem; padding: 10px 10px 10px 40px; border-radius: 6px; } @media screen and (max-width: 424px) { .advertising-table__search .form-group .form--control { padding-bottom: 9px; padding-top: 9px; padding-left: 30px; } } .advertising-table__search .form-group .form--control::placeholder { font-size: 0.75rem; } .advertising-table__search .form-group .search-btn { font-size: 0.875rem; line-height: 1; color: hsl(var(--heading-color)); position: absolute; left: 15px; top: 0; bottom: 0; } @media screen and (max-width: 424px) { .advertising-table__search .form-group .search-btn { font-size: 0.8125rem; left: 10px; } } .advertising-table__search .form-group .search-btn:hover { color: hsl(var(--base)); } .user-profile-empty__thumb { margin-bottom: 40px; } @media screen and (max-width: 1499px) { .user-profile-empty__thumb { margin-bottom: 30px; } } @media screen and (max-width: 1199px) { .user-profile-empty__thumb { max-width: 200px; margin: 0 auto 20px; } } @media screen and (max-width: 767px) { .user-profile-empty__thumb { max-width: 180px; margin: 0 auto 15px; } } @media screen and (max-width: 767px) { .user-profile-empty__thumb { max-width: 150px; } } @media screen and (max-width: 374px) { .user-profile-empty__title { font-size: 1rem; margin-bottom: 5px; } } .user-profile-empty__desc { font-size: 1rem; max-width: 600px; margin: 0 auto 35px; } @media screen and (max-width: 991px) { .user-profile-empty__desc { font-size: 0.875rem; margin-bottom: 20px; } } @media screen and (max-width: 575px) { .user-profile-empty__desc { max-width: 100%; margin-bottom: 15px; } } @media screen and (max-width: 424px) { .user-profile-empty__desc { font-size: 0.8125rem; margin-bottom: 10px; } } .user-profile-empty .btn { padding: 12px 15.5px; } @media screen and (max-width: 1199px) { .user-profile-empty .btn { font-size: 0.875rem; } } @media screen and (max-width: 575px) { .user-profile-empty .btn { font-size: 0.8125rem; padding: 11px 15px; } } @media screen and (max-width: 424px) { .user-profile-empty .btn { font-size: 0.75rem; padding: 10px 14px; } } .dashboard-wrapper { position: relative; align-items: flex-start; justify-content: flex-start; gap: 24px; } @media screen and (max-width: 1599px) { .dashboard-wrapper { gap: 15px; justify-content: space-between; } } @media screen and (max-width: 1199px) { .dashboard-wrapper { display: block; } } .dashboard-wrapper .dashboard-menu-btn { font-size: 1.125rem; padding: 7px; width: 45px; height: 40px; margin-bottom: 15px; } @media screen and (max-width: 575px) { .dashboard-wrapper .dashboard-menu-btn { padding: 5px; width: 40px; height: 37px; margin-bottom: 10px; } } @media screen and (max-width: 374px) { .dashboard-wrapper .dashboard-menu-btn { width: 35px; height: 32px; font-size: 1.0625rem; } } .dashboard-menu { width: 245px; min-height: 230px; background: hsl(var(--bg-color)); padding: 24px 0; border-radius: 10px; overflow: hidden; transition: 0.1s linear; position: sticky; top: calc(var(--header-h) + 24px); } @media screen and (max-width: 1699px) { .dashboard-menu { width: 220px; min-height: 205px; } } @media screen and (max-width: 1399px) { .dashboard-menu { width: 190px; min-height: 180px; } } @media screen and (max-width: 1199px) { .dashboard-menu { width: 200px; padding-top: 50px; transform: translateX(-100%); z-index: 999992; border-radius: 0; height: 100%; position: fixed; left: 0; top: 0; } } .dashboard-menu.show { transform: translateX(0); } .alert-heading { margin-bottom: 0; } .dashboard-menu__close { position: absolute; top: 8px; right: 16px; color: hsl(var(--body-color)); font-size: 1.25rem; transition: 0.2s linear; cursor: pointer; z-index: 9; } .dashboard-menu__item { margin-bottom: 30px; position: relative; } .dashboard-menu .dashboard-menu__item.has-dropdown.active > a { color: hsl(var(--base)); } .dashboard-menu__item.has-dropdown.active .sidebar-submenu__open { display: block; } .dashboard-menu .dashboard-menu__item.has-dropdown.active > a:before { /* transform: rotate(90deg); */ right: 18px; color: hsl(var(--base)); transform: translateY(-50%) rotate(90deg); } .dashboard-menu .dashboard-menu__item.has-dropdown > a:before { position: absolute; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; text-align: center; background: 0 0; right: 16px; top: 50%; transform: translateY(-50%); left: unset; transition: 0.1s linear; color: hsl(var(--text-color)); visibility: visible; opacity: 1; } .dashboard-menu .sidebar-submenu-list__item.active > a { color: hsl(var(--base)); } .dashboard-menu .sidebar-submenu-list { padding-top: 15px; margin-left: 50px; } .sidebar-submenu-list__item { margin-bottom: 10px; } .sidebar-submenu-list__item:last-child { margin-bottom: 0px; } .dashboard-menu__item.has-dropdown.active .dashboard-menu__link { color: hsl(var(--base)); } .sidebar-submenu { display: none; } .sidebar-submenu.open { display: block; } .dashboard-menu__item .open-submenu { display: block; } .dashboard-menu .sidebar-submenu-list__link { display: block; color: hsl(var(--body-color)); font-weight: 500; padding-left: 20px; margin-bottom: 4px; position: relative; } .sidebar-submenu-list__link::before { position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; background: transparent; border-radius: 50%; border: 1px solid hsl(var(--body-color)); } .dashboard-menu .sidebar-submenu-list__link:last-child { margin-bottom: 0; } .dashboard-menu .sidebar-submenu-list__link:hover { color: hsl(var(--base)); } .sidebar-submenu-list__link:hover.sidebar-submenu-list__link::before { border: 1px solid hsl(var(--base)) !important; } @media screen and (max-width: 1399px) { .dashboard-menu__item { margin-bottom: 25px; } } @media screen and (max-width: 1199px) { .dashboard-menu__item { margin-bottom: 15px; } } .dashboard-menu__item:last-child { margin-bottom: 0; } .dashboard-menu__link { position: relative; line-height: 1; padding-left: 24px; padding-right: 10px; } @media screen and (max-width: 1399px) { .dashboard-menu__link { font-size: 0.9375rem; } } @media screen and (max-width: 1199px) { .dashboard-menu__link { padding: 5px 10px 5px 24px; } } .dashboard-menu__link .icon { font-size: 1.25rem; margin-right: 8px; } @media screen and (max-width: 1399px) { .dashboard-menu__link .icon { font-size: 1rem; margin-right: 5px; position: relative; top: 2px; } } @media screen and (max-width: 1199px) { .dashboard-menu__link .icon { margin-right: 10px; } } .dashboard-menu__link::after { position: absolute; content: ""; background: hsl(var(--base)); width: 2px; height: 100%; border-radius: 0 2px 2px 0; left: 0; top: 0; visibility: hidden; opacity: 0; transition: 0.1s linear; } .dashboard-menu__link.active { font-weight: 600; } .dashboard-menu__link:hover, .dashboard-menu__link.active { color: hsl(var(--white)); } .dashboard-menu__link:hover::after, .dashboard-menu__link.active::after { visibility: visible; opacity: 1; } .dashboard-content { flex: 1; max-width: 1200px; width: 100%; } .dashboard-content.content-two { padding: 40px; } .dashboard-content__top { margin-bottom: 30px; } @media screen and (max-width: 1499px) { .dashboard-content__top { margin-bottom: 20px; } } .dashboard-content__title { margin-bottom: 0; } @media screen and (max-width: 575px) { .dashboard-content__title { font-size: 0.9375rem; } } @media screen and (max-width: 424px) { .dashboard-content__title { font-size: 0.875rem; } } .dashboard-content .filter-btn { color: hsl(var(--heading-color)); font-size: 1rem; } @media screen and (max-width: 424px) { .dashboard-content .filter-btn { font-size: 0.9375rem; } } .dashboard-content .filter-btn:hover { color: hsl(var(--base)); } .dashboard-card-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; margin-bottom: 30px; } @media screen and (max-width: 1699px) { .dashboard-card-wrapper { gap: 20px; } } @media screen and (max-width: 1399px) { .dashboard-card-wrapper { gap: 15px; } } @media screen and (max-width: 991px) { .dashboard-card-wrapper { grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; } } @media screen and (max-width: 767px) { .dashboard-card-wrapper { gap: 10px; grid-template-columns: repeat(1, 1fr); } } .dashboard-card-wrapper.sm { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; } @media screen and (max-width: 1699px) { .dashboard-card-wrapper.sm { gap: 20px; } } @media screen and (max-width: 1399px) { .dashboard-card-wrapper.sm { gap: 15px; } } @media screen and (max-width: 991px) { .dashboard-card-wrapper.sm { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 767px) { .dashboard-card-wrapper.sm { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media screen and (max-width: 575px) { .dashboard-card-wrapper.sm { grid-template-columns: repeat(1, 1fr); } } .dashboard-card { position: relative; border-radius: 10px; padding: 35px 20px; overflow: hidden; background: #fa8500; } @media screen and (max-width: 1599px) { .dashboard-card { padding: 30px 15px; } } @media screen and (max-width: 991px) { .dashboard-card { padding: 25px 15px; } } @media screen and (max-width: 575px) { .dashboard-card { padding: 20px 15px; } } @media screen and (max-width: 575px) { .dashboard-card { padding: 15px; } } .dashboard-card.info { background: #219cba; } .dashboard-card.purple { background: #8800c7; } .dashboard-card.caribbean-green { background: #00c7a2; } .dashboard-card.brown { background: #9b5a10 !important; } .dashboard-card__title { color: hsl(var(--static-light) / 0.9); margin-bottom: 20px; } @media screen and (max-width: 1599px) { .dashboard-card__title { margin-bottom: 15px; } } @media screen and (max-width: 1399px) { .dashboard-card__title { margin-bottom: 10px; } } @media screen and (max-width: 767px) { .dashboard-card__title { margin-bottom: 5px; } } @media screen and (max-width: 575px) { .dashboard-card__title { font-size: 0.875rem; } } .dashboard-card__number { font-size: 2rem; color: hsl(var(--static-light)); margin-bottom: 0; } @media screen and (max-width: 1699px) { .dashboard-card__number { font-size: 1.75rem; } } @media screen and (max-width: 1599px) { .dashboard-card__number { font-size: 1.6875rem; } } @media screen and (max-width: 1499px) { .dashboard-card__number { font-size: 1.625rem; } } @media screen and (max-width: 767px) { .dashboard-card__number { font-size: 1.4375rem; } } @media screen and (max-width: 575px) { .dashboard-card__number { font-size: 1.25rem; } } .dashboard-card__icon { position: absolute; top: 0; right: 0; max-width: 78px; } @media screen and (max-width: 1599px) { .dashboard-card__icon { max-width: 55px; } } @media screen and (max-width: 1199px) { .dashboard-card__icon { max-width: 50px; } } @media screen and (max-width: 767px) { .dashboard-card__icon { max-width: 45px; } } @media screen and (max-width: 575px) { .dashboard-card__icon { max-width: 35px; } } .dashboard-card.sm { background: hsl(var(--bg-color)); padding: 30px 20px 25px; } @media screen and (max-width: 767px) { .dashboard-card.sm { padding: 20px; } } @media screen and (max-width: 575px) { .dashboard-card.sm { padding: 15px; } } .dashboard-card.sm .dashboard-card__title { color: hsl(var(--heading-color)); font-weight: 400; margin-bottom: 10px; } @media screen and (max-width: 1199px) { .dashboard-card.sm .dashboard-card__title { font-size: 0.8125rem; margin-bottom: 5px; } } @media screen and (max-width: 424px) { .dashboard-card.sm .dashboard-card__title { font-size: 0.75rem; } } .dashboard-card.sm .dashboard-card__number { font-size: 1.5rem; color: hsl(var(--heading-color)); } @media screen and (max-width: 1499px) { .dashboard-card.sm .dashboard-card__number { font-size: 1.375rem; } } @media screen and (max-width: 991px) { .dashboard-card.sm .dashboard-card__number { font-size: 1.25rem; } } @media screen and (max-width: 575px) { .dashboard-card.sm .dashboard-card__number { font-size: 1.125rem; } } @media screen and (max-width: 424px) { .dashboard-card.sm .dashboard-card__number { font-size: 1.0625rem; } } .chart-box { background: hsl(var(--bg-color)); border-radius: 10px; padding: 30px; min-height: 390px; margin-bottom: 55px; } @media screen and (max-width: 1699px) { .chart-box { margin-bottom: 30px; } } @media screen and (max-width: 1399px) { .chart-box { padding: 25px 20px; margin-bottom: 20px; } } @media screen and (max-width: 991px) { .chart-box { padding: 20px; } } @media screen and (max-width: 767px) { .chart-box { padding: 20px 15px; } } @media screen and (max-width: 424px) { .chart-box { padding: 15px 10px; } } .chart-box__top { margin-bottom: 15px; } .chart-box__title { margin-bottom: 0; } @media screen and (max-width: 575px) { .chart-box__title { font-size: 0.875rem; } } .chart-box__form .form-group { margin-bottom: 0; } .chart-box__form .form-group .form--control { font-size: 0.75rem; color: hsl(var(--heading-color)) !important; border-radius: 24px; padding: 5px 25px 5px 10px; } @media screen and (max-width: 424px) { .chart-box__form .form-group .form--control { padding: 4px 10px 4px 5px; } } @media screen and (max-width: 374px) { .chart-box__form .form-group .form--control { font-size: 0.6875rem; padding: 4px 10px 4px 5px; } } .chart-box.two { margin-bottom: 30px; } @media screen and (max-width: 991px) { .chart-box.two { margin-bottom: 20px; } } .video-analytics { position: relative; } .video-analytics__top { margin-bottom: 25px; } @media screen and (max-width: 1199px) { .video-analytics__top { margin-bottom: 15px; } } .video-analytics__title { margin-bottom: 0; } @media screen and (max-width: 1399px) { .video-analytics__title { font-size: 1.125rem; } } @media screen and (max-width: 1199px) { .video-analytics__title { font-size: 1rem; } } @media screen and (max-width: 575px) { .video-analytics__title { font-size: 0.875rem; } } .video-analytics__form .form-group { margin-bottom: 0; } .video-analytics__form .form-group .form--control { font-size: 0.75rem; color: hsl(var(--heading-color)) !important; border-radius: 24px; padding: 5px 15px 5px 10px; } .dashboard-video { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media screen and (max-width: 991px) { .dashboard-video { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 767px) { .dashboard-video { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 575px) { .dashboard-video { grid-template-columns: repeat(1, 1fr); } } .dashboard-video .video-item { width: 100%; background-color: hsl(var(--dark)); } .dashboard-video .video-item__thumb::after { position: absolute; content: ""; background: linear-gradient( 180deg, rgba(15, 15, 15, 0.57) 0%, rgba(15, 15, 15, 0) 100% ); width: 100%; height: 32px; left: 0; top: 0; } @media screen and (max-width: 575px) { .dashboard-video .video-item__content .title { font-size: 0.875rem; } } .withdraw { height: 100%; border-radius: 10px; } @media screen and (max-width: 575px) { .withdraw { padding: 15px; } } @media screen and (max-width: 424px) { .withdraw { padding: 15px 10px; } } .withdraw__title { margin-bottom: 5px; } @media screen and (max-width: 1199px) { .withdraw__title { font-size: 1.125rem; } } @media screen and (max-width: 575px) { .withdraw__title { font-size: 1.0625rem; } } @media screen and (max-width: 575px) { .withdraw__title { font-size: 1rem; } } @media screen and (max-width: 424px) { .withdraw__title { margin-bottom: 0; } } .withdraw__desc { font-size: 0.75rem; margin-bottom: 25px; } @media screen and (max-width: 767px) { .withdraw__desc { margin-bottom: 15px; } } @media screen and (max-width: 767px) { .withdraw__form .form-group .form--control { padding: 10px; } } @media screen and (max-width: 575px) { .withdraw__form .form-group .form--control { padding: 9px 10px; } } .withdraw__form .form-group .btn { padding: 14px 23px; } @media screen and (max-width: 1499px) { .withdraw__form .form-group .btn { padding: 13px 20px; } } @media screen and (max-width: 1199px) { .withdraw__form .form-group .btn { font-size: 0.9375rem; padding: 12px 18px; } } @media screen and (max-width: 767px) { .withdraw__form .form-group .btn { font-size: 0.875rem; padding: 12px 15px; } } .method-thumb, .withdraw-method-image { max-width: 120px; } .wallet-setting { padding: 24px; background: hsl(var(--bg-color)); border-radius: 10px; } .custom--dropdown { position: relative; height: 45px; border: 1px solid var(--form-border); border-radius: 5px; } @media screen and (max-width: 767px) { .custom--dropdown { height: 43px; } } @media screen and (max-width: 575px) { .custom--dropdown { height: 40px; } } .custom--dropdown:after { content: "\f107"; position: absolute; font-weight: 900; font-family: "Line Awesome Free"; top: 50%; right: 10px; transition: auto; transform: translateY(-50%); transition: 0.3s ease-in-out; font-size: 0.8125rem; } .custom--dropdown.open:after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .custom--dropdown > .custom--dropdown__selected { padding: 5px 15px; height: 100%; } .custom--dropdown > .custom--dropdown__selected, .custom--dropdown > .dropdown-list__item { background-color: transparent; border-radius: 10px; cursor: pointer; } .custom--dropdown > .custom--dropdown__selected .thumb { max-width: 40px; max-height: 16px; } .custom--dropdown > .dropdown-list { position: absolute; background-color: hsl(var(--bg-color)); border: 1px solid var(--form-border); border-top: 0; border-radius: 0; overflow: hidden; box-shadow: var(--box-shadow); width: 100%; -webkit-box-shadow: 0px 12px 24px rgba(21, 18, 51, 0.13); box-shadow: 0px 12px 24px rgba(21, 18, 51, 0.13); opacity: 0; overflow: hidden; transition: 0.25s ease-in-out; transform: scaleY(0); -webkit-transform-origin: top center; transform-origin: top center; top: 100%; left: 0; margin-top: 0; z-index: -1; visibility: hidden; max-height: 95px; overflow-y: auto !important; } .custom--dropdown > .dropdown-list::-webkit-scrollbar { width: 4px; height: 4px; } .custom--dropdown > .dropdown-list::-webkit-scrollbar-track { background: hsl(var(--base) / 0.15); } .custom--dropdown > .dropdown-list::-webkit-scrollbar-thumb { -webkit-border-radius: 4px; border-radius: 4px; background: hsl(var(--base) / 0.3); } .custom--dropdown.open > .dropdown-list { -webkit-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; z-index: 999 !important; } .dropdown-list > .dropdown-list__item { padding: 10px 15px; cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s; font-size: 14px; } .dropdown-list > .dropdown-list__item:hover { background-color: hsl(var(--base)); } .dropdown-list > .dropdown-list__item, .custom--dropdown > .custom--dropdown__selected { display: flex; align-items: center; flex-wrap: wrap; } .dropdown-list > .dropdown-list__item .thumb, .custom--dropdown > .custom--dropdown__selected .thumb { max-width: 30px; } .dropdown-list > .dropdown-list__item .text, .custom--dropdown > .custom--dropdown__selected .text { width: calc(100% - 30px); padding-left: 10px; color: hsl(var(--heading-color)); } .dropdown-list > .dropdown-list__item.selected, .dropdown-list > .dropdown-list__item.selected:hover { background-color: hsl(var(--base) / 0.15); } /* ================================= Home Css End =========================== */ /* ================================= Body Overlay Start =========================== */ .body-overlay { position: fixed; width: 100%; height: 100%; content: ""; left: 0; top: 0; background-color: hsl(var(--black) / 0.35); z-index: 99; transition: 0.1s linear; visibility: hidden; opacity: 0; } .body-overlay.show { visibility: visible; opacity: 1; } .sidebar-overlay { position: fixed; width: 100%; height: 100%; content: ""; left: 0; top: 0; background-color: hsl(var(--black) / 0.35); z-index: 99; transition: 0.1s linear; visibility: hidden; opacity: 0; } .sidebar-overlay.show { visibility: visible; opacity: 1; z-index: 999; } /* ================================= Body Overlay End =========================== */ /* ================================= Range Slider Css Start =========================== */ .custom--range__content { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 10px; } .custom--range__content label { width: 40%; } .custom--range__content input { width: 60%; text-align: right; } .custom--range input { border: 0; color: hsl(var(--body-color)); font-weight: 500; } .custom--range #slider-range { height: 5px; border: 0; background: hsl(var(--base-two) / 0.2); } .custom--range #slider-range .ui-widget-header { background-color: hsl(var(--base)); } .custom--range #slider-range span:focus { background-color: hsl(var(--base)); } .custom--range #slider-range .ui-slider-handle { width: 15px !important; height: 15px !important; background-color: hsl(var(--white)) !important; border: 2px solid hsl(var(--base)) !important; border-radius: 50%; } /* ================================= Range Slider Css End =========================== */ /* =========================================== Account Css Start =========================*/ .modal-content { background-color: hsl(var(--body-background)); } .modal-close-btn { color: hsl(var(--light)) !important; } .user-info__button .title { color: hsl(var(--light)); } .border-bottom { border-bottom: 1px solid hsl(var(--white) / 0.2) !important; } label.required:after { content: "*"; color: #dc3545 !important; margin-left: 2px; } /*=============== social login css start here =============== */ .account .card-header { text-align: center; border-bottom: 0; padding: 40px 30px; padding-bottom: 0; } .account .card-body { padding: 40px 30px; } .account .card-title { margin-bottom: 0; margin-top: 12px; } .social-login-wrapper { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; justify-content: center; } .social-login-btn { width: 32px; height: 32px; padding: 0; background-color: transparent; } @media (max-width: 575px) { .social-login-wrapper { gap: 16px; } .social-login-btn { width: 30px; height: 30px; padding: 0; background-color: transparent; } } .social-login-btn span, .social-login-btn img { height: 100%; width: 100%; } body:has(.account-section) { padding: 0; } .another-login { position: relative; text-align: center; width: 100%; margin-block: 24px; } @media (max-width: 575px) { .another-login { margin-block: 20px; } } .another-login::after { position: absolute; content: ""; top: 50%; left: 0; width: 100%; border-bottom: 1px solid hsl(var(--white) / 0.1); } .another-login .text { background-color: hsl(var(--bg-color)); padding: 0 7px; position: relative; z-index: 1; } .other-login { color: hsl(var(--white) / 0.7); } .other-login a { color: hsl(var(--white)) !important; font-weight: 700; } /* =============social login css end here ============= */ .comment-box-wrapper { max-height: 1000px; } .video-wrapper { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px; } /*=========== verify section css start here =========== */ .verify-section { height: 100vh; padding: 30px 0; display: flex; justify-content: center; align-items: center; } /* notification css */ .countDown { font-size: 12px; margin-left: -7px; background: hsl(var(--base)); color: hsl(var(--static-white)); border: 0 !important; width: 20px; height: 20px; display: flex; position: absolute; bottom: 18px; right: -9px; justify-content: center; align-items: center; padding: 0 !important; font-size: 11px !important; border: 1px solid hsl(var(--base)) !important; } /* popup-container css start here */ .popup-container { background: hsl(var(--bg-color)); box-shadow: 0 0 20px hsl(var(--black) / 0.8); border-radius: 10px; padding: 20px; overflow: hidden; width: 480px; height: 400px; margin: auto; top: 35%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8); opacity: 0; visibility: hidden; position: fixed; z-index: 99; display: flex; flex-direction: column; transition: 0.2s linear; } @media (max-width: 575px) { .popup-container { width: 380px; top: 32%; } } .popup-container__title { padding-right: 25px; } .popup-container.show { visibility: visible; opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); z-index: 99991; } .popup-container__body { padding: 20px; text-align: center; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; } @media (max-width: 424px) { .popup-container { width: 300px; top: 28%; height: unset; } .popup-container__body { display: flex; justify-content: center; align-items: center; } } .popup-container__body .shape-icon { width: 70px; height: 70px; margin: 0 auto; text-align: center; background: hsl(var(--white) / 0.3); display: flex; justify-content: center; align-items: center; border-radius: 50%; color: hsl(var(--static-white)); font-size: 26px; cursor: pointer; } @media (max-width: 424px) { .popup-container { width: 300px; top: 26%; height: unset; } .popup-container__body .shape-icon { width: 50px; height: 50px; font-size: 20px; } } .popup-container .close-icon { color: hsl(var(--white)); cursor: pointer; transition: 0.1s; position: absolute; top: 20; right: 22px; } .popup-container .close-icon:hover { color: hsl(var(--danger)); } /* datepicker css start here */ .daterangepicker { background-color: hsl(var(--black)) !important; border-color: transparent !important; } .daterangepicker .ranges li:hover { background-color: #4634ff !important; color: #fff !important; } .daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker .ranges li.active { background-color: #4634ff !important; color: #fff !important; } .daterangepicker:before { border-bottom: 6px solid hsl(var(--black)) !important; } .daterangepicker:after { border-bottom: 6px solid hsl(var(--black)) !important; } .daterangepicker .ranges li { color: hsl(var(--white)) !important; } .border { border: 1px solid hsl(var(--white) / 0.4) !important; } .nicEdit-panelContain { background: hsl(var(--section-bg)) !important; } .empty-container { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; } .empty-container.empty-card-two { position: unset; transform: unset; min-height: 310px; } .not-found-thumb svg { width: 100px; max-width: 110px; max-height: 100px; height: 100px; fill: hsl(var(--light) / 0.8); } .empty-message { color: hsl(var(--light) / 0.8); } .empty-container.empty-card-two .not-found-thumb svg { width: 80px; } @media (max-width: 575px) { .empty-container.empty-card-two { min-height: 240px; } .empty-container.empty-card-two .not-found-thumb svg { width: 60px; } } .chart-box text { fill: hsl(var(--white)) !important; } .apexcharts-legend-text { color: hsl(var(--white)) !important; } #impressionDatePicker { color: hsl(var(--white)); } /* my css */ .menu-button { height: 18px; width: 26px; position: relative; flex-shrink: 0; } .menu-button-line { height: 1px; width: 100%; background: hsl(var(--white)); transition: all 0.3s linear; } .menu-button-line:first-child { position: absolute; top: 0; left: 0; } .menu-button-line:nth-child(2) { position: absolute; top: 50%; left: 0; } .menu-button-line:last-child { position: absolute; bottom: 0; left: 0; } .menu-button.active .menu-button-line:first-child { top: 50%; transform: rotate(45deg) translateY(-50%); } .menu-button.active .menu-button-line:last-child { bottom: 50%; transform: rotate(-45deg) translateY(50%); } .menu-button.active .menu-button-line:nth-child(2) { opacity: 0; visibility: hidden; } .search-form-wrapper { display: flex; align-items: center; gap: 12px; justify-content: flex-start; } .author_image { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: inline-block; vertical-align: middle; border: 1px solid hsl(var(--white) / 0.1); padding: 4px; } .author_image img { border-radius: 50%; } .trending-section, .shorts-section { margin-bottom: 32px; } .video-item .plyr--video { overflow: hidden; border-radius: 8px; } .video-item .plyr__controls .plyr__controls__item:first-child { margin-left: 0; margin-right: 0; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-thumb { background: hsl(var(--white) / 0.3); } .notification__list-header { padding: 8px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid hsl(var(--white) / 0.1); } .no-notification { min-height: 305px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .no-notification .icon { font-size: 64px; color: hsl(var(--white) / 0.2); } .no-notification .text { font-weight: 600; font-size: 14px; } .sm-bottom-nav { display: none; } @media (max-width: 575px) { body { padding-bottom: 60px !important; } .notification--sm { position: fixed; top: 14px; right: 8px; } .sm-bottom-nav { display: block; } .sm-bottom-nav a { display: flex; flex-direction: column; font-size: 12px; color: hsl(var(--white)); align-items: center; justify-content: center; gap: 2px; } .home-fluid .home-header__right { padding-block: 6px; gap: 0px; position: fixed; bottom: 0; left: 0; background-color: hsl(var(--dark)); width: 100%; border-top: 1px solid hsl(var(--white) / 0.1); z-index: 9; } .user-info, .sm-bottom-nav, .manageCreate.create__btn, .create__btn { width: calc(20% - 2px); } .home-fluid .home-header__right .user-info__button { margin: 0 auto; } .home-fluid .home-header__right .user-info__thumb { width: 30px; height: 30px; } .home-fluid .home-header__right .create__btn .icon { margin: 0; height: 28px; width: 28px; display: grid; place-content: center; font-size: 16px; border: 1px solid hsl(var(--white)); border-radius: 50%; } .home-fluid .home-header__right .user-info .user-info-list { top: auto; bottom: 100%; } .home-fluid .home-header__right .create__list { top: auto; left: 0; bottom: calc(100% + 12px); } .home-fluid .home-header__left { width: 100%; } .search-form-wrapper { flex: 1; justify-content: flex-end; } .menu-button { height: 16px; width: 20px; } .home-header:has(.notification--sm) .search-form-wrapper { padding-right: 40px; } .scroll-top.show { bottom: 76px; right: 16px; } } @media (max-width: 424px) { body { padding-bottom: 50px !important; } .notification__btn { font-size: 1.125rem; margin-left: 0; } .search-form-wrapper { gap: 10px; } .home-header:has(.notification--sm) .search-form-wrapper { padding-right: 26px; } .notification--sm { top: 16px; } .sm-bottom-nav a { font-size: 10px; } } .placeholder-container { text-align: center; min-height: 400px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .playlist-card-wrapper { display: flex; align-items: stretch; justify-content: flex-start; gap: 42px 24px; flex-wrap: wrap; } .playlist-card { width: calc(100% / 5 - 20px); position: relative; z-index: 1; } .playlist-card > a { height: 100%; } @media (max-width: 1599px) { .playlist-card { width: calc(100% / 4 - 18px); } } @media (max-width: 1199px) { .playlist-card { width: calc(100% / 3 - 16px); } } .playlist-card::after { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: calc(100% - 16px); height: 50%; background: var(--border-color); z-index: -1; border-radius: 10px; } .playlist-card:hover { color: hsl(var(--body-color)) !important; } .playlist-card:hover .playlist-card__title { text-decoration: underline; } .playlist-card::before { content: ""; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); height: 50%; background: hsl(var(--white) / 0.1); z-index: -2; border-radius: 12px; } @media (max-width: 767px) { .playlist-card-wrapper { gap: 24px 16px; } .playlist-card { width: calc(100% / 2 - 8px); } .playlist-card::after { top: -6px; width: calc(100% - 16px); } .playlist-card::before { top: -12px; width: calc(100% - 32px); } } @media (max-width: 575px) { .playlist-card { width: calc(100% / 1); } } .playlist-card__content { background-color: hsl(var(--bg-color)); height: 100%; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .playlist-card__thumb { position: relative; } .playlist-count { position: absolute; bottom: 10px; right: 10px; background-color: hsl(var(--bg-color)); color: hsl(var(--white)); padding: 3px 6px; border-radius: 4px; font-size: 12px; font-weight: 500; } .playlist-status { position: absolute; top: 10px; right: 10px; } .playlist-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; } .playlist-card__btn { margin-top: auto; text-align: end; } .playlist-card__btn .btn { padding: 0; height: 36px; width: 36px; display: grid; place-content: center; margin-left: auto; margin-top: 6px; color: hsl(var(--white)) !important; background-color: hsl(var(--white) / 0.1); border: 1px solid hsl(var(--white) / 0.1); border-radius: 50%; } .playlist-card__name { font-size: 14px; font-weight: 600; } .playlist-card__title { font-size: 14px; font-weight: 400; margin-top: 6px; margin-bottom: 4px; line-height: 1.5; } .playlist-card__desc { font-size: 14px; } @media (max-width: 991px) { .playlist-card__body { padding: 12px; } .playlist-card__name, .playlist-card__desc { font-size: 12px; } .playlist-card__title { font-size: 14px; } } /* alert design css */ .alert { margin-bottom: 0; font-weight: 400; padding: 17px 24px; border-radius: 5px; display: flex; align-items: flex-start; gap: 12px; justify-content: flex-start; margin-bottom: 16px; } @media screen and (max-width: 991px) { .alert { padding: 16px; } } @media screen and (max-width: 575px) { .alert { padding: 12px; } } .alert__icon { font-size: 1.5rem; line-height: 1; } .alert__content { width: calc(100% - 24px); padding-left: 32px; } @media screen and (max-width: 991px) { .alert__content { padding-left: 16px; } } @media screen and (max-width: 575px) { .alert__content { padding-left: 0; width: 100%; margin-top: 6px; } } .alert__title { color: hsl(var(--base-two) / 0.8); font-weight: 600; font-family: var(--heading-font); margin-bottom: 6px; } .alert__desc { color: hsl(var(--base-two) / 0.5); display: block; line-height: 1.375; } @media screen and (max-width: 424px) { .alert__desc { font-size: 0.8125rem; } } .alert__link { position: relative; } .alert--info { border: 1px solid hsl(var(--info) / 30%); background-color: hsl(var(--info) / 5%); } .alert--info .alert__icon { color: hsl(var(--info)); } .alert--primary { border: 1px solid hsl(var(--primary) / 30%); background-color: hsl(var(--primary) / 5%); } .alert--primary .alert__icon { color: hsl(var(--primary)); } .alert--danger { border: 1px solid hsl(var(--danger) / 50%); background-color: hsl(var(--danger) / 5%); } .alert--danger .alert__icon { color: hsl(var(--danger)); } .alert--warning { border: 1px solid hsl(var(--warning) / 50%); background-color: hsl(var(--warning) / 5%); } .alert--warning .alert__icon { color: hsl(var(--warning)); } .link-color { color: hsl(var(--base)) !important; text-decoration: underline; } .chart-title-text { font-size: 14px; } @media (max-width: 767px) { .chart-title-text { font-size: 12px; } } @media (max-width: 424px) { .chart-title-text { font-size: 10px; } } .note-text { display: flex; font-size: 13px; gap: 0 8px; margin-top: 7px; line-height: 1.5; } .account-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; } .account-section__header { padding-block: 24px; background-color: hsl(var(--bg-color)); } .account-section__logo { display: block; } .account-section__logo img { max-width: 160px; width: 100%; } .account-section__logo img.dark-logo { display: none; } [data-theme="light"] .account-section__logo img.light-logo { display: none; } [data-theme="light"] .account-section__logo img.dark-logo { display: block; } .account-section__body { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 50px; } @media (max-width: 575px) { .account-section__body { padding-block: 32px; } } .account-form { border-radius: 10px; overflow: hidden; background: hsl(var(--dark)); padding: 32px 40px; margin: 24px; max-width: 500px; width: 100%; margin: 0 auto; background-color: hsl(var(--bg-color)); } .account-form.style-lg { max-width: 700px; } .account-form.ban { max-width: 500px; width: 100%; background-color: hsl(var(--bg-color)); } @media (max-width: 1199px) { .account-form { padding: 32px 24px; } } @media (max-width: 575px) { .account-form { padding: 24px; margin: 0; background-color: hsl(var(--bg-color)); } } .account-form__heading { text-align: center; margin-bottom: 32px; } @media (max-width: 767px) { .account-form__heading { margin-bottom: 24px; } } @media (max-width: 575px) { .account-form__heading { margin-bottom: 16px; } } .account-form__title { margin-bottom: 6px; } .account-form__text { font-weight: 500; font-size: 14px; } .account-form .form--label { font-size: 14px; color: hsl(var(--white)); margin-bottom: 8px; } .forgot-pass { color: hsl(var(--white)); font-size: 14px; text-decoration: underline; } .account-form .form-group { margin-bottom: 24px; } @media (max-width: 767px) { .account-form .form-group { margin-bottom: 16px; } } .account-section__footer p { padding-block: 40px; color: hsl(var(--white) / 0.7); font-size: 14px; font-weight: 400; line-height: 120%; } .text--white { color: hsl(var(--white)); } .chanel-details__date { color: hsl(var(--white)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; font-weight: 600; } .chanel-social__icon { max-width: 20px; } .chanel-social__title { font-weight: 700; font-size: 0.875rem; display: block; font-family: var(--heading-font); } .chanel-social__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .chanel-social__item:not(:last-child) { margin-bottom: 16px; } .chanel-social__link { color: hsl(var(--primary)); text-decoration: underline; } .home-header__inner .sidebar-logo__link { max-width: 140px; } .play-video .secondary__playlist .video-item__content .title a { font-size: 13px; color: hsl(var(--white)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .play-video .secondary__playlist .video-item__content .title a:hover { color: hsl(var(--base)); } .play-video .secondary__playlist .video-item__content .title, .play-video .secondary__playlist .video-item__content .channel { margin-bottom: 0px; } .meta-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } @media (max-width: 575px) { .meta-buttons { gap: 6px; } } .meta-react-wrapper { border-radius: 25px; overflow: hidden; } .meta-react-inner { display: flex; margin-bottom: 2px; gap: 2px; } .meta-react-inner .meta-buttons__button { border-radius: 0; padding: 9px 12px !important; font-size: 14px; border-radius: 0px !important; } .meta-react-inner .meta-buttons__button:has(.vti-like-fill) { background-color: hsl(var(--white) / 0.1); } .meta-react-inner .meta-buttons__button:has(.vti-dislike-fill) { background-color: hsl(var(--white) / 0.1); } .meta-react-bar { height: 5px; position: relative; } .meta-react-bar-fill { background: hsl(var(--white) / 0.2); position: absolute; left: 0; top: 0; bottom: 0; height: 100%; width: 100%; } button span.shape { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } button span span { content: ""; position: absolute; margin: auto; height: 8px; width: 2px; background: hsl(var(--success)); opacity: 0; } button span span:nth-of-type(1) { top: -20px; left: 0; right: 0; } button span span:nth-of-type(2) { bottom: -20px; left: 0; right: 0; } button span span:nth-of-type(3) { top: 0; bottom: 0; left: -10px; } button span span:nth-of-type(4) { top: 0; bottom: 0; right: -10px; } button span span:nth-of-type(5) { top: -20px; left: -70%; right: 0; transform: rotate(-30deg); } button span span:nth-of-type(6) { top: -20px; left: 0; right: -70%; transform: rotate(30deg); } button span span:nth-of-type(7) { bottom: -20px; right: 0; left: -70%; transform: rotate(30deg); } button span span:nth-of-type(8) { bottom: -20px; left: 0; right: -70%; transform: rotate(-30deg); } /* let's animate this */ @keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } button.active { animation: bounce 0.3s ease-out 1; } button.active span span:nth-of-type(1) { animation: anim1 0.4s ease-out 1; } button.active span span:nth-of-type(2) { animation: anim2 0.4s ease-out 1; } button.active span span:nth-of-type(3) { animation: anim3 0.4s ease-out 1; } button.active span span:nth-of-type(4) { animation: anim4 0.4s ease-out 1; } button.active span span:nth-of-type(5) { animation: anim5 0.4s ease-out 1; } button.active span span:nth-of-type(6) { animation: anim6 0.4s ease-out 1; } button.active span span:nth-of-type(7) { animation: anim7 0.4s ease-out 1; } button.active span span:nth-of-type(8) { animation: anim8 0.4s ease-out 1; } @keyframes anim1 { 0% { transform: scaleY(0.5); opacity: 0; } 50% { transform: translateY(-10px) scaleY(1.4); opacity: 1; } 100% { transform: translateY(-20px) scaleY(0.5); opacity: 0; } } @keyframes anim2 { 0% { transform: scaleY(1); opacity: 0; } 50% { transform: translateY(10px) scaleY(1.4); opacity: 1; } 100% { transform: translateY(20px) scaleY(0.5); opacity: 0; } } @keyframes anim3 { 0% { transform: rotate(90deg) scaleX(0.5); opacity: 0; } 50% { transform: rotate(90deg) translateY(10px) scaleX(1.4); opacity: 1; } 100% { transform: rotate(90deg) translateY(20px) scaleX(0.5); opacity: 0; } } @keyframes anim4 { 0% { transform: rotate(90deg) scaleX(0.5); opacity: 0; } 50% { transform: rotate(90deg) translateY(-10px) scaleX(1.4); opacity: 1; } 100% { transform: rotate(90deg) translateY(-20px) scaleX(0.5); opacity: 0; } } @keyframes anim5 { 0% { transform: rotate(-30deg) scaleY(0.5); opacity: 0; } 50% { transform: rotate(-30deg) translateY(-8px) scaleY(1.4); opacity: 1; } 100% { transform: rotate(-30deg) translateY(-16px) scaleY(0.5); opacity: 0; } } @keyframes anim6 { 0% { transform: rotate(30deg) scaleY(0.5); opacity: 0; } 50% { transform: rotate(30deg) translateY(-8px) scaleY(1.4); opacity: 1; } 100% { transform: rotate(30deg) translateY(-16px) scaleY(0.5); opacity: 0; } } @keyframes anim7 { 0% { transform: rotate(30deg) scaleY(0.5); opacity: 0; } 50% { transform: rotate(30deg) translateY(8px) scaleY(1.4); opacity: 1; } 100% { transform: rotate(30deg) translateY(16px) scaleY(0.5); opacity: 0; } } @keyframes anim8 { 0% { transform: rotate(-30deg) scaleY(0.5); opacity: 0; } 50% { transform: rotate(-30deg) translateY(8px) scaleY(1.4); opacity: 1; } 100% { transform: rotate(-30deg) translateY(16px) scaleY(0.5); opacity: 0; } } .reaction-btn-inner { display: flex; align-items: center; gap: 12px; } .reaction-btn__dislike, .reaction-btn__like { display: flex; align-items: center; gap: 6px; line-height: 1; cursor: pointer; font-size: 13px; font-weight: 500; } .reaction-btn__reply .reply { display: flex; align-items: center; gap: 6px; line-height: 1; font-size: 12px; color: hsl(var(--body-color)); } .show-reply { display: flex; align-items: center; justify-content: flex-start; gap: 6px; color: hsl(var(--success)); font-size: 13px; font-weight: 700; cursor: pointer; } .show-reply.active .icon { transition: all 0.3s ease; } .show-reply.active .icon { transform: rotate(180deg); } .append-reply .comment-item:first-child { margin-top: 16px; } .append-reply .comment-item { margin-bottom: 20px; } .channel-header .subscriber-btn .btn { padding: 8px 15px; font-size: 14px; font-weight: 500; } .channel-header .subscriber-btn .btn:hover { background-color: hsl(var(--white)) !important; border-color: hsl(var(--white)) !important; opacity: 0.8; color: hsl(var(--black)) !important; } .btn.addPlaylist, .btn.addVideo { border-radius: 6px; padding: 6px 14px; display: flex; justify-content: center; align-items: center; gap: 6px; border: 1px solid hsl(var(--white) / 0.2); background-color: hsl(var(--white) / 0.1); font-size: 14px; font-weight: 500; color: hsl(var(--white)) !important; } .btn.addPlaylist:hover, .btn.addVideo:hover { background-color: hsl(var(--white) / 0.2) !important; border-color: hsl(var(--white) / 0.3) !important; } .btn.addPlaylist .icon, .btn.addVideo .icon { font-size: 24px; } .add-create-form { background-color: hsl(var(--bg-color)); padding: 24px; border-radius: 12px; } .check-type-wrapper { display: flex; align-items: stretch; justify-content: flex-start; gap: 12px; flex-wrap: wrap; } .check-type { cursor: pointer; display: flex; align-items: center; gap: 6px; color: hsl(var(--white) / 0.8); background-color: hsl(var(--white) / 0.03); border: 1px solid hsl(var(--white) / 0.05); font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 6px; user-select: none; --color: hsl(var(--white)); --bg-color: hsl(var(--white) / 0.05); --border-color: hsl(var(--white) / 0.2); } .check-type-primary { --color: hsl(var(--primary)); --bg-color: hsl(var(--primary) / 0.05); --border-color: hsl(var(--primary) / 0.2); } .check-type-base { --color: hsl(var(--base)); --bg-color: hsl(var(--base) / 0.05); --border-color: hsl(var(--base) / 0.2); } .check-type-success { --color: hsl(var(--success)); --bg-color: hsl(var(--success) / 0.05); --border-color: hsl(var(--success) / 0.2); } .check-type-warning { --color: hsl(var(--warning)); --bg-color: hsl(var(--warning) / 0.05); --border-color: hsl(var(--warning) / 0.2); } .check-type:has(.check-type-input:checked) { color: var(--color); background-color: var(--bg-color); border: 1px solid var(--border-color); } .check-type-img { max-width: 100px; border-radius: 6px; } .check-type-input { display: none; } .check-type-icon { height: 20px; width: 20px; position: relative; border: 1px solid hsl(var(--white) / 0.2); border-radius: 50%; display: grid; flex-shrink: 0; place-content: center; } .check-type:has(.check-type-input:checked) .check-type-icon { border-color: var(--border-color); } .check-circle { height: 12px; width: 12px; display: none; color: var(--color); transform: scale(0.85); } @media (max-width: 767px) { .check-type-icon { height: 16px; width: 16px; } .check-circle { transform: scale(0.75); } .check-type { gap: 4px; font-size: 12px; padding: 5px 8px; } } .check-type:has(.check-type-input:checked) .check-circle { display: block; } .check { stroke-width: 2px; stroke-dasharray: 50px, 50px; stroke-dashoffset: 0px; animation: checkmark ease-in-out 0.7s backwards; } @keyframes checkmark { 0% { stroke-dashoffset: 50px; } 100% { stroke-dashoffset: 0px; } } .btn--link { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: hsl(var(--white)); transition: all 0.3s ease; } .btn--link:hover { color: hsl(var(--white)) !important; text-decoration: underline; } .btn--link .icon { height: 24px; width: 24px; display: flex; align-items: center; justify-content: center; font-size: 13px; background-color: hsl(var(--white) / 0.1); border-radius: 50%; } .action-btn.notification-btn { height: 32px; width: 32px; display: grid; place-content: center; font-size: 14px; color: hsl(var(--white)); border-radius: 50%; border: 1px solid hsl(var(--white) / 0.2); flex-shrink: 0; transition: all 0.3s ease; } .action-btn.notification-btn:hover { background-color: hsl(var(--white) / 0.1); border-color: hsl(var(--white) / 0.3); } .notification-card-wrapper { display: flex; align-items: center; justify-content: space-between; } .notification-card-title { margin-bottom: 0; font-weight: 500; color: hsl(var(--white) / 0.8); } .notification-card { background: transparent !important; border-bottom: 1px solid hsl(var(--white) / 0.1) !important; padding: 9px 16px; } .notification-read-card { border-bottom: 1px solid hsl(var(--white) / 0.1) !important; padding: 9px 16px; background-color: hsl(var(--success) / 0.03) !important; } .notification-read-card .notification-card-title { color: hsl(var(--success)); } .form--check-table .form-check-input { height: 18px; width: 18px; border-radius: 4px; border-color: hsl(var(--white) / 0.2); } .view-btn { display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; border-radius: 50%; font-size: 14px; font-weight: 500; color: hsl(var(--white)); transition: all 0.3s ease; margin-left: auto; background-color: hsl(var(--white) / 0.1); border: 1px solid hsl(var(--white) / 0.2); } .view-btn:hover { background-color: hsl(var(--white)); border-color: hsl(var(--white)); color: hsl(var(--black)); } .support-priority-wrapper { display: flex; align-items: center; justify-content: flex-start; gap: 8px 16px; flex-wrap: wrap; } .support-priority { display: flex; align-items: center; padding: 7px 14px; border-radius: 4px; border: 1px solid hsl(var(--white) / 0.1); gap: 12px; background-color: hsl(var(--white) / 0.05); cursor: pointer; color: hsl(var(--body-color)); font-weight: 500; line-height: 1; transition: all linear 0.3s; font-size: 0.875rem; } @media (max-width: 424px) { .support-priority { flex-grow: 1; justify-content: center; } } .support-priority[for="low"] .support-priority-circle { border-color: hsl(var(--success)); } .support-priority[for="low"] .check-circle { color: hsl(var(--success)); } .support-priority[for="medium"] .support-priority-circle { border-color: hsl(var(--warning)); } .support-priority[for="medium"] .check-circle { color: hsl(var(--warning)); } .support-priority[for="high"] .support-priority-circle { border-color: hsl(var(--danger)); } .support-priority[for="high"] .check-circle { color: hsl(var(--danger)); } .support-priority-circle { position: relative; height: 1.2rem; width: 1.2rem; border: 1px solid hsl(var(--white) / 0.1); border-radius: 50%; display: grid; place-content: center; flex-shrink: 0; } .support-priority .check-circle { transform: scale(0.8); position: unset; top: 0; left: 0; } .support-priority input { display: none; } .support-priority:has(input:checked) .check-circle { display: block; } .support-priority:has(input:checked)[for="low"] { background-color: hsl(var(--success) / 0.1); border-color: hsl(var(--success)); color: hsl(var(--success)); } .support-priority:has(input:checked)[for="medium"] { background-color: hsl(var(--warning) / 0.1); border-color: hsl(var(--warning)); color: hsl(var(--warning)); } .support-priority:has(input:checked)[for="high"] { background-color: hsl(var(--danger) / 0.1); border-color: hsl(var(--danger)); color: hsl(var(--danger)); } /* preview image */ .atach-preview-wrapper { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: wrap; margin-block: 1.5rem; } .atach-preview { padding: 0.5rem; border-radius: 6px; background-color: hsl(var(--white) / 0.03); border: 1px solid hsl(var(--white) / 0.05); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media (max-width: 768px) { .atach-preview { flex-grow: 1; } } .atach-preview__left { flex: 1; display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; } .atach-preview__image { max-width: 2.2rem; flex-shrink: 0; } .atach-preview__image img { border-radius: 6px; } .atach-preview__content { flex: 1; } .atach-preview__title { font-size: 0.75rem; font-weight: 600; color: hsl(var(--body-color)); } .atach-preview__size { font-size: 0.75rem; font-weight: 700; color: var(--color-text); } .atach-preview__action { flex-shrink: 0; } .atach-preview .atach-icon { font-size: 0.875rem; cursor: pointer; color: hsl(var(--body-color)); } .ticket-info-list { display: flex; align-items: flex-start; gap: 16px; flex-direction: column; } .ticket-info-item { display: flex; flex-direction: column; gap: 6px; } .ticket-info-title { font-size: 0.875rem; font-weight: 700; color: hsl(var(--body-color)); } .ticket-info-text { font-size: 0.875rem; font-weight: 700; color: hsl(var(--white)); display: flex; align-items: center; gap: 4px; } .ticket-info-text .i { font-size: 0.75rem; } .chat-item { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .chat-item:not(:last-of-type) { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid hsl(var(--white) / 0.1); } .chat-item.reply { flex-direction: row-reverse; text-align: right; } .chat-item.reply .atach-preview-wrapper { justify-content: flex-end; } .chat-item__thumb { flex-shrink: 0; height: 36px; width: 36px; } .chat-item__thumb img { height: 100%; width: 100%; border-radius: 50%; object-fit: cover; } .chat-item__content { flex: 1; } .chat-item__name { font-size: 1rem; font-weight: 600; line-height: 1; margin-bottom: 0.5rem; } .chat-item__time { font-size: 0.75rem; font-weight: 600; color: hsl(var(--body-color)); } .chat-item__message { margin-top: 0.5rem; margin-bottom: 1rem; font-size: 0.75rem; font-weight: 500; color: hsl(var(--body-color)); } .chat-item-wrapper { max-height: 460px; overflow-y: auto; padding-right: 20px; } .chat-form { display: flex; flex-wrap: wrap; align-items: flex-start; } .chat-form-file { height: 3rem; width: 3rem; flex-shrink: 0; display: grid; place-content: center; cursor: pointer; font-size: 1.3rem; color: hsl(var(--body-color)); } .chat-form-file .file-upload { display: none; } .chat-form-inner { background-color: hsl(var(--white) / 0.5); border-radius: 6px; display: flex; align-items: flex-end; justify-content: space-between; flex: 1; } .chat-form-input { height: 3rem; flex: 1; background-color: transparent; padding: 1rem; border: 0; color: hsl(var(--body-color)); font-size: 0.875rem; font-weight: 600; outline: 0; overflow: hidden; resize: none; line-height: 1; } .chat-form-submit { height: 3rem; width: 3rem; display: grid; place-content: center; font-size: 1.3rem; color: hsl(var(--body-color)); } .input-note-text { font-size: 0.75rem; font-weight: 500; color: hsl(var(--body-color)); display: flex; align-items: center; } .input-note-text .i { font-size: 0.75rem; } .ticket--btn { font-size: 0.75rem; font-weight: 600; color: hsl(var(--white)) !important; background-color: hsl(var(--white) / 0.1); border: 1px solid hsl(var(--white) / 0.2); border-radius: 4px; padding: 0.35rem 0.75rem; } .ticket--btn:hover { background-color: hsl(var(--white)); border-color: hsl(var(--white)); color: hsl(var(--black)) !important; } .about-artist { padding: 16px; background-color: hsl(var(--bg-color)); border-radius: 12px; } .add-subtitle-btn { display: flex; gap: 6px; flex-direction: column; align-items: center; font-size: 0.75rem; font-weight: 500; height: 35px; width: 35px; background-color: hsl(var(--white) / 0.1); border-radius: 50%; justify-content: center; border: 1px solid hsl(var(--white) / 0.1); } .subtitle--content { padding: 16px; background-color: hsl(var(--white) / 0.03); border-radius: 10px; position: relative; } .subtitle--content:not(:last-of-type) { margin-bottom: 16px; } .file-close-btn { height: 36px; width: 36px; display: grid; place-content: center; font-size: 14px; color: hsl(var(--white)); border-radius: 50%; margin-left: auto; margin-bottom: 16px; background-color: hsl(var(--danger)); position: absolute; top: 10px; right: 10px; } .sub-title-input { height: 85px; width: 220px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 6px; background-color: hsl(var(--white) / 0.03); border: 1px dashed hsl(var(--white) / 0.05); cursor: pointer; } .stock-video { position: relative; height: 120px; width: 200px; border-radius: 8px; background-color: hsl(var(--white) / 0.03); border: 1px solid hsl(var(--white) / 0.05); cursor: pointer; padding: 16px; display: flex; justify-content: center; flex-direction: column; gap: 16px; } .check-circle-inner { position: absolute; top: 16px; right: 16px; height: 24px; width: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid hsl(var(--white) / 0.1); } .stock-video .icon { font-size: 1.5rem; color: hsl(var(--warning)); } .stock-video .text { font-size: 0.875rem; font-weight: 600; } .stock-video:has(input:checked) .check-circle { display: block; } .stock-video:has(input:checked) .text { color: hsl(var(--white)); } .stock-video:has(input:checked) { border-color: hsl(var(--white) / 0.3); background-color: hsl(var(--white) / 0.05); } .stock-price { display: none; } .stock-video-wrapper:has(input:checked) ~ .stock-price { display: block; } @media (max-width: 767px) { .plyr__menu__container [role="menu"] { max-height: 200px; overflow-y: auto; } .plyr__menu__container [role="menu"]::-webkit-scrollbar { width: 3px; } } @media (max-width: 575px) { .plyr__controls__item.plyr__control[data-plyr="rewind"], .plyr__controls__item.plyr__control[data-plyr="fast-forward"] { display: none; } .plyr__menu__container [role="menu"] { max-height: 150px; overflow-y: auto; } } @media (max-width: 425px) { .plyr__menu__container [role="menu"] { max-height: 100px; overflow-y: auto; } } .premium-stock { position: absolute; top: 0; right: 0; height: 100%; width: 100%; display: flex; align-items: flex-end; justify-content: flex-end; background-color: hsl(var(--static-black) / 0.2); cursor: pointer; } .premium-stock-inner { background-color: hsl(var(--static-black) / 0.5); padding: 24px 16px; /* width: 100%; */ text-align: center; display: flex; align-items: flex-end; gap: 16px; justify-content: center; } .premium-stock-price { font-size: 24px; color: hsl(var(--static-white)); font-weight: 600; } .premium-stock-icon { display: flex; align-items: center; justify-content: center; gap: 8px; color: hsl(var(--static-white) / 0.8); font-size: 14px; margin-top: 7px; } .premium-stock-icon svg { height: 16px; width: 16px; fill: hsl(var(--warning)); } .premium-stock-text { text-decoration: underline; font-size: 14px; cursor: pointer; font-weight: 500; color: hsl(var(--static-white)); } .premium-stock-lock { position: absolute; top: 12px; left: 12px; color: hsl(var(--warning)); height: 48px; width: 48px; background-color: hsl(var(--static-black) / 0.3); border-radius: 6px; display: grid; place-content: center; } @media (max-width: 767px) { .premium-stock-inner { padding: 12px 16px; } .premium-stock-price { font-size: 20px; line-height: 1; } } @media (max-width: 575px) { .premium-stock-inner { padding: 8 12px; } .premium-stock-price { font-size: 16px; line-height: 1; } .premium-stock-icon { font-size: 12px; margin-top: 6px; } .premium-stock-text { font-size: 12px; } } .comment-box-item__thumb img { height: 100%; width: 100%; } .daterangepicker .ranges li.active { background-color: hsl(var(--base)) !important; color: #fff; } .daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker .ranges li.active { background-color: hsl(var(--base)) !important; } .applyBtn { background-color: hsl(var(--base)) !important; } .daterangepicker .ranges li:hover { background-color: hsl(var(--base)) !important; color: #fff !important; } .notification-card:last-child { border-bottom: unset !important; } /* error */ .error-btn { display: flex !important; align-items: center; justify-content: center; gap: 10px; max-width: fit-content; text-align: center; } .error-btn .icon svg { width: 20px; height: 20px; fill: hsl(var(--base)); transition: all 0.3s; } .error-btn:hover .icon svg { fill: hsl(var(--white)) !important; } .error .description, .error .title { color: hsl(var(--black)); } .error .title { margin-top: 45px; margin-bottom: 20px; } .payment-item__btn-text, .payment-item__btn__icon { color: hsl(var(--success)) !important; } video::-webkit-media-controls { display: none !important; } .playlist-releted-card { max-height: 500px; overflow: auto; } .playlist-releted-card::-webkit-scrollbar { width: 8px; } .playlist-releted-card .video-item__thumb { max-width: 100px !important; max-height: 60px; } .playlist-releted-card .plyr { min-width: 100px !important; } .playlist-releted-card .video-item__content .title a { font-size: 12px; font-weight: 400; } .playlist-releted-card .video-item__content .channel { font-size: 0.75rem; } @media screen and (max-width: 424px) { .playlist-releted-card .video-item__thumb { max-width: 100% !important; } .playlist-releted-card .plyr { min-width: 100% !important; } } .custom--card:has(.playlist-releted-card) { border: 1px solid hsl(var(--white) / 0.1); } @media (max-width: 767px) { .play-body { padding: 0; } .play-video .primary .primary__videoPlayer { border-radius: 0; } .primary__video-content { padding-inline: 16px; } .play-video .secondary { padding-inline: 16px; } .play-video .comment-box__content { padding-inline: 16px !important; } } .video-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } .video-spinner { border: 3px solid hsl(var(--static-white)); border-left-color: transparent !important; border-radius: 50%; animation: spin 1s linear infinite; width: 32px; height: 32px; } .play-video .primary .video-spinner { border-width: 5px; width: 54px; height: 54px; } @media (max-width: 575px) { .play-video .primary .video-spinner { border-width: 3px; width: 36px; height: 36px; } } @keyframes spin { to { transform: rotate(360deg); } }