/* Font Family */ /* ========================= 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%); --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%); --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)); 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 { } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); color: hsl(var(--heading-color)); font-weight: 600; line-height: 1.2; 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; 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%; } ul, ol { padding: 0; margin: 0; list-style: none; } button { border: 0; background-color: transparent; } button:focus { outline: none; box-shadow: none; } /* ================================= Common Typography Css End =========================== */ /* ============================= 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 ============================= */ /* ================================= 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; 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; } .modal-backdrop { background: hsl(var(--dark)); opacity: 0.3 !important; } [data-theme="light"] .modal-backdrop { background: hsl(var(--white) / 0.7); } .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)); } .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; } } @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 { border-radius: 6px; margin-bottom: 40px; } .custom--tab .nav-item { border-bottom: 0; padding: 1px; } .custom--tab .nav-item .nav-link { padding: 5px 15px; 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; 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: #ffffff; 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; 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; gap: 24px; } @media screen and (max-width: 1499px) { .home-body__shorts { } } @media screen and (max-width: 1199px) { .home-body__shorts { } } @media screen and (max-width: 991px) { .home-body__shorts { } } @media screen and (max-width: 767px) { .home-body__shorts { } } @media (min-width: 400px) and (max-width: 599px) { .home-body__shorts { column-gap: 15px; } } @media (max-width: 399px) { .home-body__shorts { } } .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; } @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); } .channel-tab__item { position: relative; padding: 0 10px 10px; margin-right: 30px; font-weight: 500; } @media screen and (max-width: 1199px) { .channel-tab__item { margin-right: 20px; } } @media screen and (max-width: 991px) { .channel-tab__item { padding: 0 8px 8px; font-size: 0.875rem; } } @media screen and (max-width: 575px) { .channel-tab__item { padding: 0 6px 6px; margin-right: 15px; } } @media screen and (max-width: 374px) { .channel-tab__item { padding: 0 4px 4px; margin-right: 10px; } } @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; 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; 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; } } @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; } @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: #e9ecef; 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_codes { 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_codes { width: 75px; padding-left: 7px; } .form-control.phone { padding-left: 85px; } } @media screen and (max-width: 424px) { .country_codes { width: 48px; } .form-control.phone { padding-left: 58px; } } .country_codes::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; 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 { } } @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; 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 { margin-bottom: 20px; } } @media screen and (max-width: 767px) { .dashboard-card-wrapper { gap: 10px; } } .dashboard-card-wrapper.sm { 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 { } } @media screen and (max-width: 767px) { .dashboard-card-wrapper.sm { gap: 10px; } } @media screen and (max-width: 575px) { .dashboard-card-wrapper.sm { } } .dashboard-card { position: relative; border-radius: 10px; padding: 35px 20px; overflow: hidden; background: #e9ecef; } @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__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; gap: 16px; } @media screen and (max-width: 991px) { .dashboard-video { } } @media screen and (max-width: 767px) { .dashboard-video { } } @media screen and (max-width: 575px) { .dashboard-video { } } .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 { 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-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; } @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: 100%; 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: 100%; 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)); } .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; 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; 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%; object-fit: cover; } .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: 132px !important; max-height: 108px !important; } .playlist-releted-card .plyr { min-width: 130px !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) / .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); } } /* ================================= Common Typography Css End =========================== */ /* ================================= Custom Classes Css Start =========================== */ /* Column Extra Small Screen */ @media screen and (min-width: 425px) and (max-width: 575px) { .col-xsm-6 { width: 50%; } } /* Custom Container */ .custom--container { max-width: 1680px; margin: 0 auto; padding: 0 15px; } /* Section Background */ .section-bg { background-color: hsl(var(--section-bg)); } /* Full Screen Height Css */ .full-display { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-preferred-size: auto; flex-basis: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* Bg Image Css */ .bg-img { background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%; } /* Hide Scroll bar Css For Custom Modal */ .scroll-hide { position: fixed; overflow-y: scroll; top: 0; left: 0; width: 100%; } /* ================================= Custom Classes Css End =========================== */ /* Fully Fit image Css */ .fit-image, .customer__thumb img { width: 40%; height: 40%; -o-object-fit: cover; object-fit: cover; } .coin-img-one, .coin-img-two { background-color: hsl(var(--white)); border-radius: 50%; display: grid; height: 30px; width: 30px; place-items: center; } .coin-img-one { z-index: 1; } .coin-img-two { z-index: 0; margin-left: -10px; } .coin-img-one img, .coin-img-two img { width: 100%; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } /* ============================= Display Flex Css Start ============================= */ .flex-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-align, .customer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-between { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* ============================= 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, .history__date-item, .history__price-item, .history__amount-item, .market__change-item, .market__price-item, .market__pair-icon, .trading-bottom__fee, .trading-bottom__trade, .sort-item__label, .total__item, .amount__item, .price__item, .bottom-footer__right-text, .bottom-footer__text, .custom--tab.tab-two .nav-item .nav-link { font-size: 0.75rem; } .form--control.style-three::-webkit-input-placeholder, .form--control.style-two::-webkit-input-placeholder { font-size: 0.8125rem; } .form--control.style-three::-moz-placeholder, .form--control.style-two::-moz-placeholder { font-size: 0.8125rem; } .form--control.style-three:-ms-input-placeholder, .form--control.style-two:-ms-input-placeholder { font-size: 0.8125rem; } .form--control.style-three::-ms-input-placeholder, .form--control.style-two::-ms-input-placeholder { font-size: 0.8125rem; } .fs-13, .table tbody tr td, .form--control.style-three::placeholder, .form--control.style-two::placeholder { font-size: 0.8125rem; } .fs-14, .forget-password, .trading-market__header-three, .trading-market__header-two, .trading-market__header-one, .market__pair-item, .buy-sell__title, .trading-header__number, .currency-item__content-date, .coincheck-section .coincheck-item .link, .ongoing-campaign__title, .single-slider__desc, .badge-two, .badge, .custom--tab .nav-item .nav-link, .table thead tr th, .table-wrapper__item .link, .form--label { font-size: 0.875rem; } .fs-15, .number .select, .table tbody tr td::before, .table thead tr th, .table, .btn--icon { font-size: 0.9375rem; } .form--control::-webkit-input-placeholder { font-size: 1rem; } .form--control::-moz-placeholder { font-size: 1rem; } .form--control:-ms-input-placeholder { font-size: 1rem; } .form--control::-ms-input-placeholder { font-size: 1rem; } .fs-16, .account-content__member .account-link, .subscribe-wrapper__subtitle, .coincheck-section .coincheck-item__desc, .scroll-top, .customer__name, .form--control::placeholder, p { font-size: 1rem; } @media screen and (max-width: 575px) { .form--control::-webkit-input-placeholder { font-size: 0.9375rem; } .form--control::-moz-placeholder { font-size: 0.9375rem; } .form--control:-ms-input-placeholder { font-size: 0.9375rem; } .form--control::-ms-input-placeholder { font-size: 0.9375rem; } .fs-16, .account-content__member .account-link, .subscribe-wrapper__subtitle, .coincheck-section .coincheck-item__desc, .scroll-top, .customer__name, .form--control::placeholder, p { 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, .btn, .custom--accordion .accordion-button { font-size: 1.125rem; } @media screen and (max-width: 991px) { .fs-18, .btn, .custom--accordion .accordion-button { font-size: 1rem; } } /* ===================== Font Size For resposive devices End =================== */ /* Transition Class */ .transition { -webkit-transition: 0.2s ease-in; transition: 0.2s ease-in; } /* Width Height 100% */ .w-100 { width: 100%; } .h-100 { height: 100%; } /* ====================== Section Heading ==================== */ .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__desc { max-width: 720px; text-align: center; font-size: 20px; margin: 0 auto; } @media screen and (max-width: 575px) { .section-heading__desc { font-size: 16px; } } .section-heading.style-left { text-align: left; } .section-heading.style-left .section-heading__title::before { left: 0; -webkit-transform: translateX(0); transform: translateX(0); } .section-heading.style-left .section-heading__desc { margin-left: 0 !important; text-align: left; } /* ====================== Section Heading En d==================== */ /* -------------- Slick Slider Arrow Style two ------------ */ .slick-arrow { position: absolute; z-index: 1; border: none; background-color: transparent; color: hsl(var(--white)); width: 32px; height: 34px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 5px; -webkit-transition: 0.4s; transition: 0.4s; background-color: hsl(var(--dark)); color: hsl(var(--white)); top: 600px; } @media screen and (max-width: 1199px) { .slick-arrow { top: -40px; } } @media screen and (max-width: 767px) { .slick-arrow { top: auto; bottom: -50px; right: 50%; } } .slick-arrow:hover { background-color: hsl(var(--dark)); color: hsl(var(--white)); } .slick-next { right: 10px; background-color: hsl(var(--base)); } @media screen and (max-width: 767px) { .slick-next { top: auto; right: calc(50% - 37px); } } .slick-prev { right: 52px; } @media screen and (max-width: 767px) { .slick-prev { top: auto; right: calc(50% + 5px); } } /* Dots Css Start */ .slick-dots { text-align: center; padding-top: 20px; } .slick-dots li { display: inline-block; } .slick-dots li button { border: none; background-color: hsl(var(--dark)); color: hsl(var(--white)); margin: 0 3px; width: 8px; height: 8px; border-radius: 1px; border-radius: 50%; text-indent: -9999px; -webkit-transition: 0.3s linear; transition: 0.3s linear; } .slick-dots li.slick-active button { background-color: hsl(var(--base)); width: 25px; border-radius: 5px; } /* Dots Css End */ /* ================= Slick Arrow & Dots css Start ================ */ /* ================================= Background Color Css Start =========================== */ .bg--base { background-color: #f2f2f2; } .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; } } /* ================================= 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: 130px; padding-bottom: 130px; } } .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; } } .py-50 { padding-top: 25px; padding-bottom: 25px; } @media (min-width: 576px) { .py-50 { padding-top: 35px; padding-bottom: 35px; } } @media (min-width: 992px) { .py-50 { padding-top: 50px; padding-bottom: 50px; } } .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; } } /* ================================= 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; } .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(--static-black)); background-color: hsl(var(--body-background)) !important; border-radius: 8px; overflow: hidden; } .custom--accordion .accordion-item:not(:last-child) { margin-bottom: 25px; } .custom--accordion .accordion-item:has(.accordion-collapse.collapse.show) { border: 1px solid hsl(var(--base)) !important; } .custom--accordion .accordion-body { padding: 0 25px 25px 25px; background-color: transparent; color: hsl(var(--body-color)); } .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: 8px; } .custom--accordion:last-of-type .accordion-button.collapsed { border-radius: 8px; } .custom--accordion .accordion-button { background-color: transparent; color: var(--black); font-family: var(--body-font); font-weight: 400; padding: 25px; } @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 { -webkit-box-shadow: none; box-shadow: none; } .custom--accordion .accordion-button:not(.collapsed) { color: hsl(var(--base)); background-color: transparent !important; -webkit-box-shadow: none; box-shadow: none; } .custom--accordion .accordion-button:not(.collapsed)::after { -webkit-transform: rotate(0deg); 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: "\f106"; display: inline-block; position: relative; margin-left: auto; width: unset !important; right: 0px; color: hsl(var(--base)); } .custom--accordion .accordion-button[aria-expanded="false"]::after { content: "\f107"; color: hsl(var(--black)); } [data-theme="light"] .custom--accordion .accordion-item:has(.accordion-collapse.collapse.show) { border: 1px solid hsl(var(--base)) !important; } /* ================================= Accordion Css End =========================== */ /* ================================= Button Css Start =========================== */ button { border: none; -webkit-transition: 0.2s linear; transition: 0.2s linear; } button:focus { outline: none; -webkit-box-shadow: 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: 40px; } .btn { color: hsl(var(--black)) !important; font-weight: 300; padding: 16px 48px; border-radius: 8px; position: relative; text-align: center; border: 1px solid hsl(var(--base)); font-family: var(--body-font); line-height: 1; } .btn:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } @media screen and (max-width: 767px) { .btn { padding: 14px 35px; } } @media screen and (max-width: 575px) { .btn { padding: 12px 20px; } } .btn:hover, .btn:focus, .btn:focus-visible { color: hsl(var(--white)); -webkit-box-shadow: none !important; box-shadow: none !important; } .btn:active { top: 2px; } .btn--lg { padding: 20px 60px; } @media screen and (max-width: 991px) { .btn--lg { padding: 20px 40px; } } @media screen and (max-width: 767px) { .btn--lg { padding: 16px 25px; } } .btn--sm { padding: 10px 20px; font-size: 14px !important; } @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: 5px; } .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)) !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: #fff !important; } .btn--base-two { background-color: hsl(var(--base-two)) !important; border: 1px solid hsl(var(--base-two)) !important; color: hsl(var(--white)) !important; } .btn--base-two:hover, .btn--base-two:focus .btn--base-two:focus-visible { background-color: hsl(var(--base-two-d-100)) !important; border: 1px solid hsl(var(--base-two)) !important; color: hsl(var(--white)) !important; } .btn--base-two.outline { background-color: transparent !important; border: 1px solid hsl(var(--base-two)) !important; color: hsl(var(--base-two)) !important; } .btn--base-two.outline:hover, .btn--base-two.outline:focus .btn--base-two.outline:focus-visible { background-color: hsl(var(--base-two)) !important; color: hsl(var(--white)) !important; } .btn--primary { background-color: hsl(var(--primary)) !important; border: 1px solid hsl(var(--primary)) !important; color: hsl(var(--static-white)) !important; } .btn--dark { background-color: hsl(var(--dark)) !important; border: 1px solid hsl(var(--dark)) !important; color: hsl(var(--static-white)) !important; } .btn--dark:hover { border: 1px solid hsl(var(--dark)) !important; } .btn--primary:hover, .btn--primary:focus .btn--primary:focus-visible { background-color: hsl(var(--primary) / 0.9) !important; color: hsl(var(--static-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; border: 1px solid hsl(var(--secondary)) !important; color: hsl(var(--static-white)) !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)) !important; color: hsl(var(--static-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; border: 1px solid hsl(var(--success)) !important; color: hsl(var(--static-white)) !important; } .btn--success:hover, .btn--success:focus .btn--success:focus-visible { background-color: hsl(var(--success-d-100)) !important; border: 1px solid hsl(var(--success)) !important; color: hsl(var(--static-white)) !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; border: 1px solid hsl(var(--danger)) !important; color: hsl(var(--static-white)) !important; } .btn--danger:hover, .btn--danger:focus .btn--danger:focus-visible { background-color: hsl(var(--danger-d-100)) !important; border: 1px solid hsl(var(--danger)) !important; color: hsl(var(--static-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; color: hsl(var(--static-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)) !important; border: 1px solid hsl(var(--info)) !important; color: hsl(var(--info)) !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-d-100)) !important; color: hsl(var(--static-white)) !important; } /* ================================= Button Css End =========================== */ /* ================================= Card Css Start =========================== */ [data-theme="light"] .custom--card { background-color: hsl(var(--footer-bg)); padding: 30px; border-radius: 5px; } .custom--card { border-radius: 10px; -webkit-box-shadow: var(--box-shadow-three); box-shadow: var(--box-shadow-three); background-color: hsl(var(--white)); border: transparent; } .custom--card .card-header { padding: 30px; background-color: transparent; border-bottom: 1px solid hsl(var(--black) / 0.1); } .custom--card .card-body { padding: 30px; border-radius: 5px; } .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 Css End =========================== */ /* ================================= Form Css Start =========================== */ /* Form Label */ .form--label { margin-bottom: 6px; /* color: hsl(var(--black)); */ font-weight: 300; } .form-group { margin-bottom: 1.5rem; } /* Form Select */ .select { color: hsl(var(--white) / 0.7) !important; background-color: transparent !important; height: 30px; border: 1px solid hsl(var(--white) / 0.3); padding: 4px; border-radius: 5px; } .select:focus { border-color: hsl(var(--white)); color: hsl(var(--white)) !important; } .select option { background-color: hsl(var(--black)); color: hsl(var(--white)); } /* Form Select End */ /* Form Control Start */ .form--control { border-radius: 4px; font-weight: 400; outline: none; width: 100%; padding: 15px; background-color: transparent; border: 1px solid hsl(var(--black) / 0.2); color: hsl(var(--black)); line-height: 1; } .form--control.style-two { border-color: hsl(var(--white) / 0.2); padding: 5px; padding-left: 25px; color: hsl(var(--white)); } .form--control.style-two:focus { color: hsl(var(--white)) !important; } .form--control.style-three { border-color: hsl(var(--white) / 0.2); padding: 8px; padding-right: 70px; color: hsl(var(--body-color)); } .form--control.style-three:focus { color: hsl(var(--body-color)) !important; } .form--control::-webkit-input-placeholder { color: hsl(var(--body-color) / 0.8); } .form--control::-moz-placeholder { color: hsl(var(--body-color) / 0.8); } .form--control:-ms-input-placeholder { color: hsl(var(--body-color) / 0.8); } .form--control::-ms-input-placeholder { color: hsl(var(--body-color) / 0.8); } .form--control::placeholder { color: hsl(var(--body-color) / 0.8); } .form--control:focus { border-radius: 4px; color: hsl(var(--black)); -webkit-box-shadow: none; box-shadow: none; border-color: hsl(var(--base)) !important; background-color: transparent; } .form--control:disabled, .form--control[readonly] { background-color: hsl(var(--section-bg) / 0.7); opacity: 1; border: 0; } .buy-sell__price .form--control:disabled, .buy-sell__price .form--control[readonly] { background-color: #12272d; } .form--control[type="password"] { color: hsl(var(--black) / 0.5); } .form--control[type="password"]:focus { color: hsl(var(--black)); } .form--control[type="file"] { line-height: 50px; padding: 0; position: relative; } .form--control[type="file"]::-webkit-file-upload-button { border: 1px solid hsl(var(--black) / 0.08); padding: 4px 6px; border-radius: 0.2em; background-color: hsl(var(--base)) !important; -webkit-transition: 0.2s linear; transition: 0.2s linear; line-height: 25px; position: relative; margin-left: 15px; color: #fff !important; } .form--control[type="file"]::file-selector-button { border: 1px solid hsl(var(--black) / 0.08); padding: 4px 6px; border-radius: 0.2em; background-color: hsl(var(--base)) !important; -webkit-transition: 0.2s linear; transition: 0.2s linear; line-height: 25px; position: relative; margin-left: 15px; color: #fff !important; } .form--control[type="file"]::-webkit-file-upload-button:hover { background-color: hsl(var(--base)); border: 1px solid hsl(var(--base)); color: #fff; } .form--control[type="file"]::file-selector-button:hover { background-color: hsl(var(--base)); border: 1px solid hsl(var(--base)); color: #fff; } /* Form Control End */ textarea.form--control { height: 150px; } /* 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; } [data-theme="light"] input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset; -webkit-text-fill-color: hsl(var(--black)) !important; } /* Autofill Css End */ /* input gruop */ .input--group { position: relative; } /* Show Hide Password */ .password-show-hide { position: absolute; right: 20px; z-index: 5; cursor: pointer; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: hsl(var(--black)); } /* --------------- 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: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .form--check a { display: inline; } .form--check .form-check-input { -webkit-box-shadow: none; 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(--base)); cursor: pointer; } .form--check .form-check-input:checked { background-color: hsl(var(--base)) !important; border-color: hsl(var(--base)) !important; -webkit-box-shadow: none; 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(--white)); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .form--check .form-check-label { width: calc(100% - 14px); padding-left: 8px; cursor: pointer; } @media screen and (max-width: 424px) { .form--check label { font-size: 0.9375rem; } } @media screen and (max-width: 424px) { .form--check a { font-size: 0.9375rem; } } .login-btn { background: #19292e; border: 1px solid #19292e; } .login-btn span { color: hsl(var(--body-color)); } .login-btn:hover { border: 1px solid #19292e; } .login-btn a { color: hsl(var(--base)); } /* Custom Radion Design */ .form--radio .form-check-input { -webkit-box-shadow: none; box-shadow: none; border: 2px solid hsl(var(--base)); position: relative; background-color: transparent; cursor: pointer; width: 14px; height: 14px; } .form--radio .form-check-input:active { -webkit-filter: brightness(100%); 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: 7px; height: 7px; background-color: hsl(var(--base)); border-radius: 50%; z-index: 999; } .form--radio .form-check-label { width: calc(100% - 18px); padding-left: 5px; cursor: pointer; } /* Custom Switch Design */ .form--switch .form-check-input { border-radius: 3px; background-image: none; position: relative; -webkit-box-shadow: none; box-shadow: none; border: 0; background-color: hsl(var(--black) / 0.2) !important; padding: 10px !important; margin-left: 0; margin-bottom: 5px; border-radius: 40px; width: 70px; height: 38px; cursor: pointer; } .form--switch .form-check-input:focus { border-radius: 40px; background-image: none; position: relative; -webkit-box-shadow: none; box-shadow: none; border: 0; } .form--switch .form-check-input::before { position: absolute; content: ""; width: 28px; height: 28px; background-color: hsl(var(--white)); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 2px; left: 5px; border-radius: 50%; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .form--switch .form-check-input:checked { background-color: hsl(var(--base)) !important; } .form--switch .form-check-input:checked::before { left: calc(100% - 33px); background-color: hsl(var(--white)) !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 { -webkit-filter: invert(0.5); 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: 1px solid hsl(var(--black) / 0.2); padding: 15px; } .custom--modal .modal-footer { border-top: 1px solid hsl(var(--black) / 0.2) !important; } .custom--modal .modal-header.close { width: 35px; height: 35px; background-color: hsl(var(--danger)); font-size: 1.5625rem; line-height: 1; border-radius: 4px; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .custom--modal .modal-header.close:hover { background-color: hsl(var(--danger-l-100)); } .custom--modal .modal-header.close :focus { -webkit-box-shadow: none; box-shadow: none; } .custom--modal .modal-content { background-color: hsl(var(--white)); border-radius: 10px !important; } [data-theme="light"] .modal-content { background-color: #1e1e1e !important; } [data-theme="light"] .modal-header { border-color: #dee2e61a; } [data-theme="light"] .modal-footer { border-color: #dee2e61a; } .custom--modal .modal-body { padding: 15px; } .custom--modal .modal-icon i { font-size: 2rem; color: hsl(var(--base)); border: 3px solid hsl(var(--base)); width: 50px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50%; } .custom--modal .modal-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 15px; border-top: 1px solid hsl(var(--white) / 0.12); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /* ================================= Modal Css End =========================== */ /* ================================= Pagination Css Start =========================== */ .pagination { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 60px; } @media screen and (max-width: 1199px) { .pagination { margin-top: 50px; } } @media screen and (max-width: 991px) { .pagination { margin-top: 40px; } } @media screen and (max-width: 767px) { .pagination { margin-top: 30px; } } .pagination .page-item .page-link { border: 1px solid hsl(var(--dark) / 0.08); margin: 0 5px; border-radius: 50%; height: 40px; width: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; font-weight: 500; padding: 0; color: hsl(var(--dark)); } .pagination .page-item .page-link.active, .pagination .page-item .page-link:hover { background-color: hsl(var(--base)); color: hsl(var(--white)); } .pagination .page-item .page-link:focus { -webkit-box-shadow: none; box-shadow: none; } /* ================================= Pagination Css End =========================== */ /* ================================= Table Css Start =========================== */ .delete-icon { color: hsl(var(--danger)); visibility: hidden; opacity: 0; font-size: 14px; } .table-section { position: relative; z-index: 1; overflow: hidden; } .table-section__shape { position: absolute; right: -10px; bottom: 40px; z-index: -1; opacity: 0.03; } .table-section__shape.style { opacity: 0.06; } .table-wrapper__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .table-wrapper__item .link { color: hsl(var(--base)) !important; padding: 5px !important; -webkit-transition: 0.2s; transition: 0.2s; font-weight: 400; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .table-wrapper__item .link:hover { text-decoration: underline; } .table-wrapper__link { font-size: 20px; margin-left: 10px; font-weight: 300; } .table-header-menu { margin-bottom: -1px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 767px) { .table-header-menu { margin-bottom: 15px; } } .table-header-menu__link { padding: 8px 20px; color: hsl(var(--body-color)); font-weight: 300; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-size: 18px; border-radius: 8px; } @media screen and (max-width: 991px) { .table-header-menu__link { font-size: 20px; padding: 10px 5px; } } @media screen and (max-width: 767px) { .table-header-menu__link { font-size: 17px; margin-right: 10px; } } .table-header-menu__link.active { background-color: hsl(var(--base) / 0.3); color: hsl(var(--black)); } /* Table Content Css start */ @media screen and (max-width: 374px) { .customer { display: block; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } } .pair-thumb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 8px; } .customer__name { margin-bottom: 0; color: hsl(var(--black) / 0.7); } .table { margin: 0; border-collapse: collapse; border-collapse: separate; border-spacing: 0px 0px; } .table.table-two thead tr th { background-color: #0d1e23 !important; padding: 10px 3px; } .table.table-two tbody { background-color: #0d1e23 !important; } .table.table-two tbody tr:hover, .table.table-two tbody tr:focus { background-color: hsl(var(--white) / 0.1); } .table.table-two tbody tr:hover .delete-icon, .table.table-two tbody tr:focus .delete-icon { visibility: visible; opacity: 1; } .table.table-two tbody tr td { color: hsl(var(--white) / 0.7); padding: 3px; } .table.table-two tbody tr td:nth-last-child(3) { color: hsl(var(--white) / 0.7); } .table.table-two tbody tr td::before { color: hsl(var(--white) / 0.7); } .table thead tr th { background-color: hsl(var(--white)); padding: 15px 20px; color: hsl(var(--body-color)); font-family: var(--heading-font); font-weight: 400; border-bottom: 0; max-width: 170px; } .table tbody { border: 0 !important; background-color: hsl(var(--white)); } .table tbody tr:last-child { border-bottom: 0; } .table tbody tr td { vertical-align: middle; padding: 10px 15px; border-width: 1px; border: 0; font-family: var(--heading-font); color: hsl(var(--black) / 0.7); font-weight: 500; max-width: 170px; } .table tbody tr td:nth-last-child(3) { color: hsl(var(--danger)); } .table tbody tr td::before { content: attr(data-label); font-family: var(--heading-font); color: hsl(var(--black)); font-weight: 500; display: none; width: 45% !important; text-align: left; } @media screen and (max-width: 767px) { .table--responsive--md thead { display: none; } .table--responsive--md tbody tr { display: block; } .table--responsive--md tbody tr:nth-child(odd) { background-color: hsl(var(--base) / 0.05); } .table--responsive--md tbody tr td { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 15px; padding: 10px 15px; border: none; max-width: unset; } .table--responsive--md tbody tr td:last-child { border: none; } .table--responsive--md tbody tr td:first-child { border-left: 0; } .table--responsive--md tbody tr td::before { display: block; font-size: 0.875rem; color: hsl(var(--black) / 0.7); } } @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:nth-child(odd) { background-color: hsl(var(--base) / 0.05); } .table--responsive--lg tbody tr td { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 15px; text-align: right; padding: 10px 15px; border: none; max-width: unset; } .table--responsive--lg tbody tr td:last-child { border: none; } .table--responsive--lg tbody tr td:first-child { border-left: 0; } .table--responsive--lg tbody tr td::before { display: block; font-size: 0.875rem; color: hsl(var(--black) / 0.7); } } @media screen and (max-width: 991px) { .table--responsive--lg tbody tr td { border: none; } } .coin-pair-list-table tbody tr td { border-top: 1.5px solid #181d20ad; } [data-theme="dark"] .coin-pair-list-table tbody tr td { border-top: 1.5px solid #181d200f; } [data-theme="light"] .coin-pair-list-table a.btn { color: hsl(var(--black) / 0.7) !important; } .coin-pair-list-table a.btn { border: 1px solid hsl(var(--black) / 0.7); } .coin-pair-list-table a.btn:hover { color: hsl(var(--base)) !important; border-color: hsl(var(--base)) !important; } /* ================================= Table Css End =========================== */ /* ================================= Social Icon Css End =========================== */ /* ------------------------------------ range slider css ---------------------------------------*/ span.ui-slider-handle.ui-corner-all.ui-state-default { display: none; } span.ui-slider-handle.ui-corner-all.ui-state-default:last-child { display: block; } .custom--range { padding: 20px; } .custom--range__content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 10px; } .custom--range__content label { width: 50%; } .custom--range__content input { width: 50%; text-align: right; } .custom--range input { border: 0; color: hsl(var(--body-color)); font-weight: 500; background-color: transparent; } .custom--range .slider-range { height: 3px; border: 0 !important; background: hsl(var(--black)); } .custom--range .slider-range .ui-widget-header { background-color: hsl(var(--base)); } .custom--range .slider-range .ui-slider-handle { width: 10px !important; height: 10px !important; background-color: hsl(var(--base)) !important; border: 2px solid hsl(var(--base)) !important; border-radius: 50%; } .custom--range__range .ui-slider-handle:first-child { display: none !important; } .ui-slider-horizontal .ui-slider-handle { top: -0.3em; margin-left: 0 !important; } .range-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin-top: 5px; } .range-list__number { font-size: 10px; position: relative; } .range-list__number span { -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-transform: translateX(-50%) rotate(47deg); transform: translateX(-50%) rotate(47deg); background-color: #181a20; color: #848e9c; width: 7px; height: 7px; border-radius: 2px; border: 2px solid #474d57; z-index: 1; overflow: visible; cursor: pointer; position: absolute; top: -13px; left: 5px; } .range-list__number:nth-child(2) span { left: 15px; } .range-list__number:nth-child(3) span { left: 20px; } .range-list__number:nth-child(4) span { left: 25px; } .range-list .range-list__number:last-child span { left: 22px !important; } .ui-slider-horizontal .ui-slider-handle { top: -0.23em; margin-left: -0.6em; z-index: 22; } /* =========================== Banner Section Start Here ========================= */ .banner-section { position: relative; z-index: 1; padding: 235px 0 55px; overflow: hidden; } @media screen and (max-width: 1199px) { .banner-section { padding: 200px 0 50px; } } @media screen and (max-width: 991px) { .banner-section { padding: 160px 0 50px; } } @media screen and (max-width: 575px) { .banner-section { padding: 115px 0 50px; } } .banner-section__shape { position: absolute; top: -75px; left: 0; z-index: -1; } @media screen and (max-width: 1399px) { .banner-section__shape { left: -200px; } } @media screen and (max-width: 1199px) { .banner-section__shape { left: -300px; } } @media screen and (max-width: 991px) { .banner-section__shape { display: none; } } .banner-section__shape-one { position: absolute; right: 0; top: 0; z-index: -1; } .banner-section__shape-one.dark-mood { top: -270px; } @media screen and (max-width: 991px) { .banner-section__shape-one.dark-mood { display: none !important; } } @media screen and (max-width: 1399px) { .banner-section__shape-one { right: -200px; } } @media screen and (max-width: 1199px) { .banner-section__shape-one { right: -400px; } } @media screen and (max-width: 991px) { .banner-section__shape-one { right: -500px; } } @media screen and (max-width: 767px) { .banner-section__shape-one { display: none !important; } } @media screen and (max-width: 991px) { .banner-section.bg-img { background-position: center right; -o-object-fit: contain; object-fit: contain; } } .banner-content__title { color: hsl(var(--heading-color)); margin-bottom: 70px; } @media screen and (max-width: 1399px) { .banner-content__title { margin-bottom: 30px; } } .banner-content__title-base { color: hsl(var(--base)); } .banner-content__desc { max-width: 600px; font-size: 24px; color: hsl(var(--black) / 0.7); } @media screen and (max-width: 767px) { .banner-content__desc { font-size: 20px; } } .banner-content__button { margin-top: 30px; } .banner-right { position: relative; z-index: 9; right: -270px; } @media (max-width: 1700px) { .banner-right { right: -200px; } } @media screen and (max-width: 1599px) { .banner-right { right: -100px; } } @media screen and (max-width: 1199px) { .banner-right { right: -50px; } } @media screen and (max-width: 991px) { .banner-right { right: -180px; top: 150px; } } @media screen and (max-width: 767px) { .banner-right { right: -100px; top: 150px; } } @media screen and (max-width: 575px) { .banner-right { top: 50px; right: -70px; } } @media screen and (max-width: 424px) { .banner-right { top: 50px; right: -30px; } } .banner-right__thumb { width: 500px; position: relative; } @media screen and (max-width: 1499px) { .banner-right__thumb { width: 400px; } } @media screen and (max-width: 767px) { .banner-right__thumb { width: 350px; } } @media screen and (max-width: 575px) { .banner-right__thumb { width: 300px; } } @media screen and (max-width: 374px) { .banner-right__thumb { width: 250px; } } .banner-right__thumb-shape { position: absolute; bottom: -15px; right: 50px; -webkit-animation: shape 7s linear infinite; animation: shape 7s linear infinite; } @media screen and (max-width: 1599px) { .banner-right__thumb-shape { right: 30px; } } @media screen and (max-width: 767px) { .banner-right__thumb-shape { width: 120px; } } @media screen and (max-width: 575px) { .banner-right__thumb-shape { width: 100px; } } @media screen and (max-width: 374px) { .banner-right__thumb-shape { width: 90px; } } @-webkit-keyframes shape { 0% { bottom: -15px; } 50% { bottom: -15px; opacity: 0.5; } 75% { opacity: 0.1; } 100% { bottom: -15px; opacity: 0.8; } } @keyframes shape { 0% { bottom: -15px; } 50% { bottom: -15px; opacity: 0.5; } 75% { opacity: 0.1; } 100% { bottom: -15px; opacity: 0.8; } } .banner-right__shape { position: absolute; bottom: 250px; left: 100px; z-index: -1; width: 450px; -webkit-transition: 0.3s; transition: 0.3s; -webkit-animation: UpDown 7s linear infinite; animation: UpDown 7s linear infinite; } @media screen and (max-width: 1499px) { .banner-right__shape { width: 300px; } } @media screen and (max-width: 991px) { .banner-right__shape { width: 280px; } } @media screen and (max-width: 767px) { .banner-right__shape { width: 250px; } } @media screen and (max-width: 575px) { .banner-right__shape { display: none; } } .banner-right__shape-bg { position: relative; } .banner-right__shape-bg-one { position: absolute; bottom: 80px; left: 10px; width: 280px; height: 280px; background-color: #f7f4f4; border-radius: 50%; z-index: -2; } @media screen and (max-width: 1499px) { .banner-right__shape-bg-one { width: 240px; height: 240px; } } @media screen and (max-width: 1399px) { .banner-right__shape-bg-one { width: 180px; height: 180px; bottom: 100px; } } @media screen and (max-width: 991px) { .banner-right__shape-bg-one { display: none; } } .banner-right__shape-bg-two { position: absolute; right: 120px; top: -120px; width: 240px; height: 240px; background-color: #f7f4f4; border-radius: 50%; z-index: -2; } @media screen and (max-width: 1499px) { .banner-right__shape-bg-two { width: 150px; height: 150px; right: 200px; } } @media screen and (max-width: 1399px) { .banner-right__shape-bg-two { right: 180px; } } @media screen and (max-width: 1199px) { .banner-right__shape-bg-two { right: 80px; } } @media screen and (max-width: 991px) { .banner-right__shape-bg-two { display: none; } } .banner-right__shape-bg-three { position: absolute; right: 150px; bottom: 100px; width: 140px; height: 140px; background-color: #f7f4f4; border-radius: 50%; z-index: -2; } @media screen and (max-width: 1499px) { .banner-right__shape-bg-three { width: 90px; height: 90px; right: 260px; } } @media screen and (max-width: 1399px) { .banner-right__shape-bg-three { right: 200px; } } @media screen and (max-width: 1199px) { .banner-right__shape-bg-three { right: 110px; } } @media screen and (max-width: 991px) { .banner-right__shape-bg-three { display: none; } } @-webkit-keyframes UpDown { 0% { bottom: 230px; } 50% { bottom: 200px; } 100% { bottom: 230px; } } @keyframes UpDown { 0% { bottom: 230px; } 50% { bottom: 200px; } 100% { bottom: 230px; } } /*======= banner-slider css start here =======*/ .single-slider { padding-top: 80px; } @media screen and (max-width: 991px) { .single-slider { padding-top: 200px; } } @media screen and (max-width: 575px) { .single-slider { padding-top: 110px; } } @media screen and (max-width: 424px) { .single-slider { padding-top: 90px; } } .single-slider__item { text-align: center; } .single-slider__desc { color: hsl(var(--black) / 0.7); font-weight: 400; font-family: var(--body-font); } .single-slider__link { color: hsl(var(--base)); -webkit-transition: 0.2s; transition: 0.2s; } .single-slider__link:hover { text-decoration: underline; } .light-mood { display: block; } .dark-mood { display: none; } [data-theme="light"] .dark-mood { display: block; } [data-theme="light"] .light-mood { display: none; } .bg { background-color: #f7f4f4; } [data-theme="light"] .bg { background-color: #121212; } /* =========================== Banner Section End Here ========================= */ /* ================================ Testimonails Section Css Start ============================= */ .ongoing-campaign { position: relative; overflow: hidden; padding: 35px 0; } .ongoing-campaign__title { margin-bottom: 25px; color: hsl(var(--black) / 0.8); font-family: var(--body-font); font-weight: 400; } .testimonials-card { height: 100%; } .swiper { overflow: unset; overflow-x: clip !important; position: relative; } .swiper-two { position: relative; } .swiper-slide { text-align: center; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 5px; } .swiper-button-next { position: absolute !important; top: -25px; right: 0; height: 30px; width: 30px; background-image: none !important; } @media screen and (max-width: 424px) { .swiper-button-next { top: -43px; } } .swiper-button-next::after { font-size: 20px; line-height: 1; font-family: "Font Awesome 5 Free"; content: "\f054" !important; font-weight: 900; color: hsl(var(--black) / 0.8); margin-left: 10px; } @media screen and (max-width: 575px) { .swiper-button-next::after { font-size: 15px; } } .swiper-button-next-two { position: absolute !important; top: 0px; right: 0; height: 20px; width: 20px; z-index: 999; background-image: none !important; background-color: #0d1e23; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .swiper-button-next-two::after { font-size: 14px; position: absolute; line-height: 1; font-family: "Font Awesome 5 Free"; content: "\f054" !important; font-weight: 900; color: hsl(var(--white) / 0.8); margin-left: 10px; } @media screen and (max-width: 575px) { .swiper-button-next-two::after { font-size: 15px; } } .swiper-button-disabled { display: none !important; } .swiper-button-prev { position: absolute !important; top: -25px; right: 80px !important; height: 30px; width: 30px; left: unset !important; line-height: 30; color: hsl(var(--black) / 0.8); } .swiper-button-prev-two { position: absolute !important; top: 0px; left: 0px !important; height: 20px; width: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; left: unset !important; line-height: 30; z-index: 999; color: hsl(var(--white) / 0.8); background-color: #0d1e23; } .swiper-button-prev-two::after { font-size: 14px; line-height: 1; position: absolute; font-family: "Font Awesome 5 Free"; content: "\f053" !important; font-weight: 700; color: hsl(var(--white) / 0.8); margin-right: 10px; } @media screen and (max-width: 575px) { .swiper-button-prev-two::after { font-size: 13px; } } @media screen and (max-width: 424px) { .swiper-button-prev { right: 48px !important; top: -43px; } } .swiper-button-prev::after { font-size: 18px; line-height: 1; font-family: "Font Awesome 5 Free"; content: "\f053" !important; font-weight: 700; color: hsl(var(--black) / 0.8); margin-right: 10px; } @media screen and (max-width: 575px) { .swiper-button-prev::after { font-size: 15px; } } .swiper-pagination-fraction { left: unset; width: none; width: unset; position: absolute; right: 40px !important; top: -44px !important; font-size: 15px; } @media screen and (max-width: 424px) { .swiper-pagination-fraction { right: 22px !important; top: -60px !important; font-size: 13px; } } .swiper-pagination-current { color: hsl(var(--black)); } .swiper-wrapper { -ms-flex-wrap: unset; flex-wrap: unset; } .custom--tab.swiper-wrapper { margin: 0 -15px; } .custom--tab.tab-two .nav-item .nav-link { border: none !important; } /* ================================ Testimonials Section Css End ============================= */ /* ================================= Blog Section Css Start Here ============================= */ .coincheck-section { background-color: hsl(var(--section-bg-two)); position: relative; z-index: 1; overflow: hidden; } .coincheck-section__shape { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; } @media screen and (max-width: 767px) { .coincheck-section__shape { display: none; } } .coincheck-section .section-heading__title { color: hsl(var(--static-white)); } .coincheck-section .coincheck-item__icon { font-size: 50px; color: hsl(var(--static-white)); margin-bottom: 30px; } @media screen and (max-width: 1199px) { .coincheck-section .coincheck-item__icon { margin-bottom: 20px; } } @media screen and (max-width: 991px) { .coincheck-section .coincheck-item__icon { margin-bottom: 15px; } } @media screen and (max-width: 575px) { .coincheck-section .coincheck-item__icon { font-size: 40px; margin-bottom: 15px; } } .coincheck-section .coincheck-item__icon-two { font-size: 24px; position: absolute; top: 55%; right: -35px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 575px) { .coincheck-section .coincheck-item__icon-two { font-size: 20px; } } .coincheck-section .coincheck-item__title { color: hsl(var(--static-white)); } .coincheck-section .coincheck-item__desc { color: hsl(var(--static-white) / 0.8); margin-bottom: 30px; max-width: 270px; } @media screen and (max-width: 991px) { .coincheck-section .coincheck-item__desc { margin-bottom: 15px; } } @media screen and (max-width: 575px) { .coincheck-section .coincheck-item__desc { margin-bottom: 10px; } } .coincheck-section .coincheck-item .link { padding: 0; -webkit-transition: 0.2s; transition: 0.2s; color: hsl(var(--static-white)) !important; font-weight: 300; position: relative; } .coincheck-section .coincheck-item .link:hover { text-decoration: underline; } .light { color: hsl(var(--white)); } [data-theme="dark"] .link.light { color: hsl(var(--white)) !important; } [data-theme="light"] .link.light { color: hsl(var(--base)) !important; } .coincheck-item__icon-two.light { color: hsl(var(--white)); } [data-theme="dark"] .coincheck-item__icon-two.light { color: hsl(var(--white)) !important; } [data-theme="light"] .coincheck-item__icon-two.light { color: hsl(var(--base)) !important; } /* Text Border Bottom Animation Css Start */ /* Text Border Bottom Animation Css Ends */ /* ================================= Blog Section Css End Here ================================= */ /*================= invest section css start here =================*/ .invest-item { position: relative; padding-left: 60px; } @media screen and (max-width: 575px) { .invest-item { padding-left: 50px; } } .invest-item::before { position: absolute; content: ""; left: 5px; top: 0; background-color: hsl(var(--black) / 0.2); width: 1px; height: calc(100% - 90px); } @media screen and (max-width: 575px) { .invest-item::before { height: calc(100% - 80px); left: 18px; } } .invest-item__content { margin-bottom: 40px; } .invest-item__content:hover .invest-item__style { color: hsl(var(--static-white)); background-color: hsl(var(--base)); border: 1px solid transparent; } @media screen and (max-width: 991px) { .invest-item__content { margin-bottom: 30px; } } @media screen and (max-width: 575px) { .invest-item__content { margin-bottom: 20px; } } .invest-item__title { margin-bottom: 15px; font-weight: 400; } @media screen and (max-width: 575px) { .invest-item__title { margin-bottom: 10px; } } .invest-item__style { position: absolute; left: -18px; background-color: hsl(var(--white)); border: 1px solid hsl(var(--black) / 0.5); width: 48px; height: 48px; font-size: 22px; text-align: center; border-radius: 50%; line-height: 48px; -webkit-transition: 0.2s linear; transition: 0.2s linear; color: hsl(var(--black)); } @media screen and (max-width: 575px) { .invest-item__style { width: 35px; height: 35px; line-height: 35px; left: 0; } } .invest-item__desc { max-width: 320px; } .invest-thumb { height: 100%; width: 100%; } .l-mood { display: block; } .d-mood { display: none; } [data-theme="light"] .l-mood { display: none; } [data-theme="light"] .d-mood { display: block; } /*================= invest section css end here =================*/ /*=========================== currency section css start here ===========================*/ .currency-item { padding: 20px; background-color: hsl(var(--body-background)); border-radius: 10px; -webkit-transition: 0.2s linear; transition: 0.2s linear; } @media screen and (max-width: 767px) { .currency-item { padding: 15px; } } .currency-item:hover { -webkit-box-shadow: var(--box-shadow-two); box-shadow: var(--box-shadow-two); } .currency-item__icon { width: 30px; height: 30px; border-radius: 50%; } .currency-item__icon img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .currency-item__icon-link { width: 30px; height: 30px; border-radius: 50%; background-color: hsl(var(--black) / 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: hsl(var(--black) / 0.4); } .currency-item__icon-link:hover { color: hsl(var(--static-white)); background-color: hsl(var(--base)); } .currency-item__coin { padding-left: 15px; } @media screen and (max-width: 575px) { .currency-item__coin { padding-left: 8px; } } .currency-item__coin-title { margin-bottom: 0px; } .currency-item__content { padding-left: 45px; margin-top: 20px; } @media screen and (max-width: 575px) { .currency-item__content { padding-left: 35px; } } .currency-item__content-date { margin-bottom: 0; color: hsl(var(--black)); font-family: var(--body-font); font-weight: 300; } .currency-item__content-number { margin-bottom: 0; color: hsl(var(--body-color)) !important; } .button { margin-top: 40px; } @media screen and (max-width: 575px) { .button { margin-top: 25px; } } /*=========================== currency section css end here ===========================*/ /*=================== product-section css start here ===================*/ .product-section { position: relative; z-index: 1; overflow: hidden; } .product-section__shape { position: absolute; right: 0; top: 50px; z-index: -1; } .product-item { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 40px; } .product-item:last-child { margin-bottom: 0; } @media screen and (max-width: 575px) { .product-item { margin-bottom: 25px; } } .product-item__icon { width: 30px; font-size: 30px; color: hsl(var(--base)); } .product-item__content { width: calc(100% - 30px); padding-left: 20px; } .product-item__title { margin-bottom: 15px; font-weight: 400; } @media screen and (max-width: 575px) { .product-item__title { margin-bottom: 10px; } } .product-item__title .icon { -webkit-transform: rotate(318deg); transform: rotate(318deg); margin-left: 5px; color: hsl(var(--black)); } .product-thumb { width: 100%; } /*=================== product-section css end here ===================*/ /*====================== subscribe section css start here ======================*/ .subscribe-wrapper { -webkit-box-shadow: var(--box-shadow-two); box-shadow: var(--box-shadow-two); border-radius: 10px; padding: 10px 20px; position: relative; z-index: 1; overflow: hidden; } .subscribe-wrapper__shape { position: absolute; top: 30px; right: 20px; z-index: -1; } .subscribe-wrapper__shape-one { position: absolute; bottom: 20px; left: 45%; z-index: -1; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 991px) { .subscribe-wrapper__shape-one { display: none; } } .subscribe-wrapper__title { max-width: 550px; margin-bottom: 40px; font-weight: 600; } @media screen and (max-width: 575px) { .subscribe-wrapper__title { margin-bottom: 25px; } } .subscribe-wrapper__item .form--control { width: calc(100% - 170px) !important; margin-right: 20px; border-radius: 8px; background-color: #000; color: #fff !important; border: 1px solid #181d20; } .subscribe-wrapper__item .form--control::-webkit-input-placeholder { color: hsl(var(--body-color)); } .subscribe-wrapper__item .form--control::-moz-placeholder { color: hsl(var(--body-color)); } .subscribe-wrapper__item .form--control:-ms-input-placeholder { color: hsl(var(--body-color)); } .subscribe-wrapper__item .form--control::-ms-input-placeholder { color: hsl(var(--body-color)); } .subscribe-wrapper__item .form--control::placeholder { color: hsl(var(--body-color)); } [data-theme="dark"] .subscribe-wrapper__item .form--control { background-color: #f5f5f5; border: 1px solid hsl(var(--section-bg)); } .subscribe-wrapper__item .form--control:focus { border-radius: 8px; color: hsl(var(--static-black)); -webkit-box-shadow: none; box-shadow: none; border-color: hsl(var(--base)); } @media screen and (max-width: 1199px) { .subscribe-wrapper__item .form--control { margin-right: 10px; width: calc(100% - 170px); } } @media screen and (max-width: 575px) { .subscribe-wrapper__item .form--control { width: 100% !important; margin-right: 10px; } } .subscribe-wrapper__item .btn { width: 170px; border-radius: 10px; } @media screen and (max-width: 1199px) { .subscribe-wrapper__item .btn { width: 170px; } } @media screen and (max-width: 575px) { .subscribe-wrapper__item .btn { margin-top: 10px; } } .subscribe-wrapper__form { margin-bottom: 10px; } @media screen and (max-width: 575px) { .subscribe-wrapper__form { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .subscribe-wrapper__subtitle { margin-bottom: 10px; } .star { color: hsl(var(--danger)); } /*====================== subscribe section css end here ======================*/ /*====================== trading section css start here ======================*/ .trading-body { background-color: #0d1e23 !important; } /*====== custom container css start here ======*/ .custom--container { max-width: 1544px; } .bg-color { background-color: #091619; } .trading-section ::-webkit-scrollbar-thumb { background-color: hsl(var(--body-color) / 0.5); border: 0px solid transparent; border-radius: 10px; } .trading-left { border: 1px solid hsl(var(--base-two) / 0.09); padding: 20px; border-radius: 8px; background-color: #0d1e23 !important; } .trading-list-empty { height: 100%; } @media screen and (max-width: 767px) { .trading-left.two { display: none; } } .trading-left.show-left-sidebar { -webkit-transform: translateX(0); transform: translateX(0); } @media screen and (max-width: 1499px) { .trading-left { padding: 15px; } } @media screen and (max-width: 1199px) { .trading-left { margin-top: 10px; } } @media screen and (max-width: 767px) { .trading-left { padding: 15px 10px; } } @media screen and (max-width: 575px) { .trading-left { padding: 12px; } } @media screen and (max-width: 424px) { .trading-left { padding: 5px; } } .trading-left__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 32px; } .trading-left__top-title { color: hsl(var(--base)); margin-bottom: 0; margin-right: 4px; } @media screen and (max-width: 1499px) { .trading-left__top-title { font-size: 15px; } } @media screen and (max-width: 1399px) { .trading-left__top-title { font-size: 14px; } } .trading-left__header { margin-bottom: 15px; } .trading-left__list { cursor: pointer; padding: 4px 5px; } .trading-left__list:hover { background-color: hsl(var(--white) / 0.1); } .trading-left__list:last-child { margin-bottom: 0; } .trading-left__buy { text-align: center; } .trading-left__buy.left-two .price__item { color: hsl(var(--base-two)); } .trading-left__bottom-title { margin: 30px 0; text-align: center; color: hsl(var(--base)); } .empty-thumb img { width: 60px; } .trading-left__bottom-title .icon { color: hsl(var(--danger)); } .trading-left__wrapper { max-height: 290px; overflow-y: auto; min-width: 300px; } @media (max-width: 1150px) { .trading-left__wrapper { min-width: 270px; } } @media (max-width: 1050px) { .trading-left__wrapper { min-width: 250px; } } @media (max-width: 980px) { .trading-left__wrapper { min-width: 230px; } } @media (max-width: 890px) { .trading-left__wrapper { min-width: 200px; } } @media (max-width: 800px) { .trading-left__wrapper { min-width: 180px; } } @media (max-width: 767px) { .trading-left__wrapper { min-width: 320px; } } @media (max-width: 700px) { .trading-left__wrapper { min-width: 290px; } } @media (max-width: 640px) { .trading-left__wrapper { min-width: 260px; } } @media (max-width: 580px) { .trading-left__wrapper { min-width: 240px; } } @media (max-width: 540px) { .trading-left__wrapper { min-width: 200px; } } @media (max-width: 470px) { .trading-left__wrapper { min-width: 180px; } } @media (max-width: 420px) { .trading-left__wrapper { min-width: 160px; max-height: 200px; } } @media (max-width: 374px) { .trading-left__wrapper { min-width: 136px; max-height: 170px; } } .price { text-align: left; } .price__title { color: hsl(var(--white)); font-family: var(--heading-font); font-weight: 400; color: hsl(var(--body-color)); } @media screen and (max-width: 991px) { .price__title { font-size: 13px; } } @media (max-width: 470px) { .price__title { font-size: 10px; } } .price__item { color: hsl(var(--danger)); } @media screen and (max-width: 374px) { .price__item { font-size: 10px; } } .amount { text-align: right; } .amount__title { color: hsl(var(--white)); font-family: var(--heading-font); font-weight: 400; color: hsl(var(--body-color)); } @media screen and (max-width: 991px) { .amount__title { font-size: 13px; } } @media (max-width: 470px) { .amount__title { font-size: 10px; } } @media screen and (max-width: 374px) { .amount__item { font-size: 10px; } } .total { text-align: right; } .total__title { color: hsl(var(--white)); font-family: var(--heading-font); font-weight: 400; color: hsl(var(--body-color)); } @media screen and (max-width: 991px) { .total__title { font-size: 13px; } } @media (max-width: 470px) { .total__title { font-size: 10px; } } @media screen and (max-width: 374px) { .total__item { font-size: 10px; } } /*======= trading-right css =======*/ .trading-right { border: 1px solid hsl(var(--base-two) / 0.09); border-radius: 8px; background-color: #0d1e23; position: relative; } .trading-right__title { color: hsl(var(--base)); margin-bottom: 0; font-weight: 500; } @media screen and (max-width: 1499px) { .trading-right__title { width: 100px; } } .trading-right__top { padding: 10px; } .trading-right__bottom { border: 1px solid hsl(var(--base-two) / 0.09); background-color: #0d1e23; border-radius: 8px; margin-top: 15px; } .search-btn { position: absolute; top: 53%; left: 5px; -webkit-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .sort-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .sort-item__label-icon { cursor: pointer; } @media screen and (max-width: 420px) { .trading-right__title { width: 100%; } .trading-right__top .input--group { width: 100%; margin-left: 0px; } } /*====== trading header css start here ======*/ .trading-header { border: 1px solid hsl(var(--base-two) / 0.09); background-color: #0d1e23; padding: 38px 15px; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 1199px) { .trading-header { padding: 20px 15px; } } @media screen and (max-width: 991px) { .trading-header { margin-top: 40px; } } @media screen and (max-width: 575px) { .trading-header { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; padding: 20px 10px; } } .trading-header__title { color: hsl(var(--body-color)); margin-bottom: 0; font-weight: 500; } @media screen and (max-width: 575px) { .trading-header__title { font-size: 16px; } } @media screen and (max-width: 767px) { .trading-header__number { font-size: 12px; } } @media screen and (max-width: 575px) { .trading-header__number { font-size: 10px; } } /*===== trading bottom css start here =====*/ .trading-bottom { background-color: #0d1e23; margin-top: 15px; border-radius: 8px; } @media screen and (max-width: 767px) { .trading-bottom.two { display: none; } } @media screen and (max-width: 1199px) { .trading-bottom { margin-top: 0; } } .trading-bottom__header { padding: 15px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1199px) { .trading-bottom__header { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; } } @media screen and (max-width: 767px) { .trading-bottom__header { padding: 15px; } } .trading-bottom__trade { position: relative; } .trading-bottom__trade::after { position: absolute; content: ""; left: -50px; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 20px; width: 0.1px; background-color: hsl(var(--body-color) / 0.3); } @media screen and (max-width: 1399px) { .trading-bottom__trade::after { display: none; } } .trading-bottom__trade::before { position: absolute; content: ""; right: -40px; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 20px; width: 0.1px; background-color: hsl(var(--body-color) / 0.3); } @media screen and (max-width: 1399px) { .trading-bottom__trade::before { display: none; } } .trading-bottom__wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 1199px) { .trading-bottom__wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .trading-bottom__wrapper::before { position: absolute; content: ""; left: 50%; top: 0; height: 100%; width: 1px; background-color: hsl(var(--white) / 0.1); } @media screen and (max-width: 1199px) { .trading-bottom__wrapper::before { display: none; } } .trading-bottom__button { padding: 5px 20px 10px 20px; } @media screen and (max-width: 767px) { .trading-bottom__button { width: 100%; } } @media screen and (max-width: 575px) { .trading-bottom__button { padding: 5px 10px; } } .trading-bottom__fixed { display: none; } @media screen and (max-width: 767px) { .trading-bottom__fixed { width: 100%; position: fixed; z-index: 1031; bottom: 0px; background-color: #0d1e23 !important; display: block; padding: 10px; } } .trading-bottom__tab { background-color: #0d1e23; padding: 10px; margin-top: 10px; border-radius: 10px; } .buy-sell { width: 50%; } @media screen and (max-width: 1199px) { .buy-sell { width: 100%; } } @media screen and (max-width: 767px) { .buy-sell-one { background-color: #0d1e23 !important; width: 100%; position: fixed; left: 0; bottom: -800px; z-index: 99991; border-radius: 0; overflow-y: auto; -webkit-transition: 0.2s linear; transition: 0.2s linear; background-color: hsl(var(--black)); } } .buy-sell-one.buy-sell-one-show { bottom: 0; } @media screen and (max-width: 767px) { .buy-sell-two { background-color: #0d1e23 !important; width: 100%; position: fixed; left: 0; bottom: -800px; z-index: 99991; border-radius: 0; overflow-y: auto; -webkit-transition: 0.2s linear; transition: 0.2s linear; background-color: hsl(var(--black)); } } .buy-sell-two.buy-sell-two-show { bottom: 15px; } .buy-sell__wrapper { border-bottom: 1px solid hsl(var(--white) / 0.1); padding: 15px 20px; background-color: hsl(var(--white) / 0.05); } @media screen and (max-width: 767px) { .buy-sell__wrapper { margin-top: 60px; } } .buy-sell__title { margin-bottom: 0; color: hsl(var(--base)); font-weight: 600; } .buy-sell__price { padding: 15px 20px 0 20px; } .buy-sell__price-title { width: 50px; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 36px; } .buy-sell__price-btc { position: absolute; right: -30px; top: 50%; border-radius: 0 5px 5px 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: transparent; padding: 10px 16px; } .buy-sell__price-number { text-align: right; padding: 5px 20px; } .buy-sell__deposit { position: absolute; right: -40px; top: 50%; border-radius: 0 10px 10px 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #5adbff3a; padding: 10px 15px; } .buy-sell .content { padding: 0 20px 20px 20px; } .buy-sell .content__text { margin-bottom: 10px; } /*============ market css start ============*/ .market { padding: 0 15px 20px 15px; } @media (max-width: 1299px) { .market { padding: 0 10px 20px 10px; } } .market-wrapper { overflow-y: auto; max-height: 550px; } @media screen and (max-width: 1199px) { .market-wrapper { max-height: 250px; } } .market__list { cursor: pointer; padding: 5px; } .market__list:hover { background-color: hsl(var(--white) / 0.1); } @media (max-width: 1299px) { .market__list { margin: 0 auto; } } @media screen and (max-width: 1199px) { .market__list { margin: 0; } } .market__title { color: hsl(var(--body-color)); margin-bottom: 5px; } .market__pair-icon { margin-right: 4px; } .market__price-item { text-align: right; } .market__change-item { color: hsl(var(--danger)); text-align: right; /*min-width: 120px;*/ } /*======= trading history css start here =======*/ .trading-history { padding: 20px 20px 30px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 424px) { .trading-history { padding: 20px 10px; } } .trading-history__title { margin-bottom: 0; color: hsl(var(--base)); } @media screen and (max-width: 1399px) { .trading-history__title { font-size: 20px; } } .history { padding: 0 20px 20px 20px; } @media screen and (max-width: 1399px) { .history { padding: 0 15px 15px 15px; } } @media screen and (max-width: 424px) { .history { padding: 0 10px 10px 10px; } } .history__list { cursor: pointer; padding: 4px 5px; } .history__list:hover { background-color: hsl(var(--white) / 0.1); } .history__title { color: hsl(var(--body-color)); margin-bottom: 5px; } .history__amount-item { color: hsl(var(--base-two)); /*min-width: 110px;*/ } .history__price-item { /*min-width: 70px;*/ text-align: right; } .history__date-item { /*min-width: 120px;*/ text-align: right; } .trading-icon { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0px; min-width: 0px; color: currentcolor; font-size: 10px; fill: currentcolor; -webkit-transform: scale(1.6); transform: scale(1.6); -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 1em; height: 1em; cursor: pointer; } /* =====trading market header===== */ .trading-market__header { margin-bottom: 5px; padding: 0 20px; } @media screen and (max-width: 424px) { .trading-market__header { padding: 0 10px; } } .trading-market__header-two { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .trading-market__header--price { min-width: 100px; } .trading-market__header-three { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /*========== trading table css start here ==========*/ .trading-table { border: 1px solid hsl(var(--base-two) / 0.09); padding: 15px; border-radius: 8px; background-color: #0d1e23; margin-top: 10px; } @media screen and (max-width: 767px) { .trading-table { margin-top: 0; } } @media screen and (max-width: 575px) { .trading-table { overflow-x: auto; margin-bottom: 30px; } } @media screen and (max-width: 424px) { .trading-table { padding: 8px; } } .trading-table__title { color: hsl(var(--base)); padding-right: 20px; } @media screen and (max-width: 575px) { .trading-table__title { font-size: 17px; padding-right: 5px; } } @media screen and (max-width: 424px) { .trading-table__title { font-size: 15px; } } .trading-table__header { margin-bottom: 25px; } @media screen and (max-width: 575px) { .trading-table__header { margin-bottom: 10px; } } @media screen and (max-width: 424px) { .trading-table .btn { padding: 5px; font-size: 12px !important; } } @media screen and (max-width: 374px) { .trading-table .custom--tab .nav-item { padding: 0 3px; } } @media screen and (max-width: 424px) { .trading-table .custom--tab .nav-item .nav-link { font-size: 12px; } } .table-wrapper-two { /*max-height: 250px;*/ overflow-y: auto; } @media screen and (max-width: 575px) { .table-wrapper-two { min-width: 600px; } } .table-wrapper-two thead { position: sticky; top: 0; z-index: 99; } /*========== trading table css end here ==========*/ @media screen and (max-width: 1199px) { .trading-sidebar { display: none; } } .sidebar__close { text-align: center; line-height: 40px; position: absolute; top: 10px; right: 15px; width: 40px; height: 40px; color: hsl(var(--white)); background-color: hsl(var(--base)); border-radius: 50%; border: 1px solid transparent !important; } .trading-top__tab { display: none; } @media screen and (max-width: 767px) { .trading-top__tab { display: block; background-color: #0d1e23; padding: 25px 10px; margin-top: 15px; border-radius: 10px; } } /*====================== trading section css end here ======================*/ /* ==================================== Contact top Start ==================================== */ .contact-content-section { position: relative; overflow: hidden; z-index: 1; } .contact-content-section__shape { position: absolute; top: -75px; left: 0; z-index: -1; } @media screen and (max-width: 1399px) { .contact-content-section__shape { left: -200px; } } @media screen and (max-width: 1199px) { .contact-content-section__shape { left: -300px; } } @media screen and (max-width: 991px) { .contact-content-section__shape { display: none; } } .contact-item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } .contact-item__icon { width: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: hsl(var(--base)); font-size: 40px; font-weight: 300; } .contact-item__icon i { line-height: 0; } @media screen and (max-width: 767px) { .contact-item__icon { width: 40px; font-size: 1.125rem; } } .contact-item__desc { width: calc(100% - 50px); padding-left: 10px; } @media screen and (max-width: 767px) { .contact-item__desc { width: calc(100% - 40px); padding-left: 5px; } } .contact-item__title { margin-bottom: 7px; color: hsl(var(--black)); } .contact-item__desc { color: hsl(var(--black)); } .contact-content-section { padding: 80px 0; } @media screen and (max-width: 991px) { .contact-content-section { padding-top: 120px; padding-bottom: 60px; } } @media screen and (max-width: 575px) { .contact-content-section { padding-bottom: 40px; } } /*================================== Contact Bottom End ==================================*/ /* =========================================== Account Css Start =========================*/ .account-inner { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100vh; overflow: hidden; } /* Left Content Css */ .account-left { width: 40%; position: relative; z-index: 1; padding: 180px 120px 210px 100px; background-color: hsl(var(--base)); } @media screen and (max-width: 1599px) { .account-left { padding: 180px 75px 210px 75px; } } @media screen and (max-width: 1499px) { .account-left { padding: 170px 70px 120px 70px; } } @media screen and (max-width: 1399px) { .account-left { padding: 160px 60px 120px 60px; } } @media screen and (max-width: 1199px) { .account-left { padding: 160px 30px 120px 30px; } } @media screen and (max-width: 991px) { .account-left { padding: 160px 15px 120px 15px; } } @media screen and (max-width: 767px) { .account-left { display: none; } } @media screen and (max-width: 575px) { .account-left { padding: 140px 30px; } } @media screen and (max-width: 424px) { .account-left { padding: 130px 20px; } } .account-left__thumb { position: absolute; left: 50px; z-index: -2; } @media screen and (max-width: 1199px) { .account-left__thumb { left: 0; } } .account-left__thumb-two { position: absolute; left: 50px; z-index: -2; } @media screen and (max-width: 1599px) { .account-left__thumb-two { bottom: 100px; } } @media screen and (max-width: 1499px) { .account-left__thumb-two { bottom: 150px; } } @media screen and (max-width: 1399px) { .account-left__thumb-two { bottom: 200px; } } @media screen and (max-width: 1199px) { .account-left__thumb-two { left: 0; bottom: 280px; } } @media screen and (max-width: 991px) { .account-left__thumb-two { bottom: 350px; } } .account-left__logo { position: absolute; top: 25px; z-index: -1; } @media screen and (max-width: 1399px) { .account-left__logo { left: 30px; } } .account-left__subtitle { color: hsl(var(--static-white)); margin-bottom: 15px; font-weight: 400; } @media screen and (max-width: 991px) { .account-left__subtitle { font-size: 16px; } } .account-left__subtitle-two { display: inline-block; position: relative; z-index: 1; font-weight: 300; color: hsl(var(--static-white)); } .account-left__subtitle-two img { position: absolute; bottom: 0; right: -60px; } .account-left__title { color: hsl(var(--static-white)); font-weight: 500; position: relative; } @media screen and (max-width: 991px) { .account-left__title { font-size: 24px; } } .account-left__title::before { position: absolute; content: ""; bottom: -4px; left: 5px; width: 66px; height: 4px; background-color: hsl(var(--static-white)); } .account-left__title-two { color: hsl(var(--static-white)); } .account-left__title-two-style { color: #f9ec31; text-shadow: 1px 3px #e84142; font-size: 48px; font-family: var(--heading-font); font-weight: 700; } .account-left__title-three { color: hsl(var(--static-white)); font-size: 30px; position: relative; z-index: 1; font-weight: 500; } .account-left__title-three::before { position: absolute; content: ""; left: 5px; bottom: -4px; width: 50px; height: 4px; background-color: hsl(var(--static-white)); } /* Right Content Css */ .account-right { padding: 70px 230px; } @media screen and (max-width: 1599px) { .account-right { padding: 10px 200px; } } @media screen and (max-width: 1499px) { .account-right { padding: 10px 150px; } } @media screen and (max-width: 1399px) { .account-right { padding: 32px 90px; } } @media screen and (max-width: 1199px) { .account-right { padding: 32px 60px; } } @media screen and (max-width: 991px) { .account-right { padding: 32px 45px; } } @media screen and (max-width: 767px) { .account-right { padding: 40px; } } @media screen and (max-width: 575px) { .account-right { padding: 40px 0px; } } @media screen and (max-width: 424px) { .account-right { padding: 25px 0px; } } .account-right-wrapper { padding: 10px 30px; width: 60%; background-color: hsl(var(--white)); } @media screen and (max-width: 991px) { .account-right-wrapper { padding: 10px 20px; } } @media screen and (max-width: 767px) { .account-right-wrapper { width: 100%; padding: 20px; } } .account-right-wrapper .theme-switch-wrapper { margin-left: 0; } @media screen and (max-width: 991px) { .account-right-wrapper .theme-switch-wrapper { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } .account-right-wrapper .slider { width: 40px; height: 40px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: hsl(var(--black) / 0.2); } .account-right-wrapper .slider i { color: hsl(var(--black)); font-size: 20px; } .account-right-wrapper [data-theme="light"] .theme-switch .slider i::before { content: "\f186"; color: hsl(var(--static-black)); } .continue-google { margin-bottom: 24px; } [data-theme="dark"] .continue-google .btn:hover { background-color: #eee6 !important; } [data-theme="light"] .continue-google .btn:hover { background-color: #151313c7 !important; } .continue-google .google-icon { color: hsl(var(--base)); margin-right: 5px; font-size: 16px; } .continue-facebook .facebook-icon { color: hsl(var(--base)); margin-right: 5px; font-size: 16px; } /* Continue Google Css */ /* Account Content Css Start */ .account-content__top { margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; padding-right: 50px; } @media screen and (max-width: 1399px) { .account-content__top { margin-bottom: 60px; padding-right: 30px; } } @media screen and (max-width: 991px) { .account-content__top { margin-bottom: 50px; padding-right: 0; } } @media screen and (max-width: 767px) { .account-content__top { margin-bottom: 20px; } } .continue-google .btn { border: 1px solid hsl(var(--black) / 0.2); } .continue-facebook .btn { border: 1px solid hsl(var(--black) / 0.2); } .account-content__member { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 991px) { .account-content__member { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } } .account-content__member .account-link { color: hsl(var(--base)); } .account-content__member .custom--dropdown > .custom--dropdown__selected { background-color: transparent; cursor: pointer; padding: 10px; font-size: 14px; padding-right: 30px; } @media screen and (max-width: 1399px) { .account-content__member .custom--dropdown > .custom--dropdown__selected { padding-right: 15px; } } .account-content__member .custom--dropdown > .custom--dropdown__selected .text { color: hsl(var(--black)) !important; } .account-content__logo { max-width: 200px; } .account-content__member-text { margin-right: 14px; font-weight: 500; } .account-link { -webkit-transition: 0.2s; transition: 0.2s; } .account-link:hover { text-decoration: underline; } /* Account Content Css End */ /* Account Form Css Start */ .account-form { max-width: 480px; } .account-form__desc { margin-bottom: 40px; } @media screen and (max-width: 991px) { .account-form__desc { margin-bottom: 30px; } } @media screen and (max-width: 767px) { .account-form { max-width: unset; } } /* Account Form Css End */ /* Or Other Option Css Start */ .other-option { margin: 30px 0 30px; position: relative; text-align: center; z-index: 1; } @media screen and (max-width: 1399px) { .other-option { margin: 30px 0 20px; } } @media screen and (max-width: 1199px) { .other-option { margin: 20px 0 15px; } } .other-option::before { position: absolute; content: ""; left: 0; top: 50%; width: 100%; height: 1px; background-color: hsl(var(--black) / 0.2); z-index: -1; } .other-option__text { background-color: hsl(var(--white)); color: hsl(var(--black)); display: inline-block; padding: 0 16px; font-family: var(--body-font); } .forget-password { color: hsl(var(--base)); } .forget-password:hover { text-decoration: underline; } .country .select { border-radius: 4px; font-weight: 400; outline: none; width: 100%; padding: 15px; background-color: transparent; border: 1px solid hsl(var(--black) / 0.2); color: hsl(var(--black)); line-height: 1; } .country .select:focus { border-color: hsl(var(--base)) !important; } .number .select { color: hsl(var(--white)) !important; border: 1px solid hsl(var(--black) / 0.2); background-color: transparent !important; padding: 5px 8px; font-weight: 400; border-radius: 5px; } .number .select option { background-color: hsl(var(--black)); } .form-group.style .input-group { border: 1px solid hsl(var(--black) / 0.2); border-radius: 4px; } .form-group.style .input-group:focus-within { border-radius: 4px; color: hsl(var(--black)); -webkit-box-shadow: none; box-shadow: none; border-color: hsl(var(--base)) !important; background-color: transparent; } .form-group.style .select { background-color: transparent !important; border: none !important; } .form-group.style .form--control { border-left: none !important; border: none !important; } .account-right .input-group-text { border: none !important; border-right: 1px solid hsl(var(--black) / 0.2) !important; background-color: transparent !important; color: hsl(var(--black)); } [data-theme="light"] .select option { background-color: hsl(var(--static-white)) !important; } label.required:after { content: "*"; color: hsl(var(--danger)) !important; margin-left: 4px; } .currency-item__icon img { border-radius: 50%; } .up { color: hsl(var(--base-two)); -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } .down { color: hsl(var(--danger)); -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } .account-right-custom { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 100%; } .buy-sell__price .form--control { padding-right: 55px; padding-left: 60px; } /* market overview design start here */ .market-overview-subtitle { max-width: 720px; } .market-overview-card { background-color: hsl(var(--body-background)); padding: 20px; border-radius: 10px; } .market-overview-card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .market-overview-card__header h6 { color: hsl(var(--black) / 0.7) !important; font-size: 14px; } .market-overview-card__header .more-btn { color: hsl(var(--base)); font-weight: 500; } .market-overview-card__item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 5px; font-size: 0.875rem; margin-bottom: 5px; margin-left: -5px; -webkit-transition: 0.3s; transition: 0.3s; border-radius: 5px; } .market-overview-card__item:hover { background-color: hsl(var(--section-bg)); } .market-overview-card__item:last-child { margin-bottom: 0px; } .market-overview-card__item .coin-name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 500; } .market-overview-card__item .coin-name img { border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; margin-right: 10px; } .market-list-search { position: relative; width: 300px; } .market-list-search .market-list-search-field { background-color: #000; color: hsl(var(--base)); border: 1px solid #181d20; border-radius: 5px; padding-left: 40px; width: 100%; } [data-theme="dark"] .market-list-search .market-list-search-field { background-color: hsl(var(--section-bg)); border: 1px solid hsl(var(--section-bg)); } .market-list-search i { position: absolute; left: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .empty-thumb { min-height: 340px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .market-overview-card__list .empty-thumb { min-height: unset; } .empty-thumb p { font-size: 12px; } .register-select option { color: hsl(var(--body-color)); background-color: hsl(var(--section-bg)); font-weight: normal !important; } /* SKELETON */ .skeleton { position: relative; } .skeleton::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; z-index: 10; background: -webkit-gradient( linear, left top, right top, from(#091619), color-stop(#0d1e23), to(#091619) ); background: linear-gradient(90deg, #091619, #0d1e23, #091619); background-size: 200% !important; animation: skeleton 1.5s infinite reverse; } tr.skeleton::after { height: 98%; min-height: 98%; } [data-theme="light"] .skeleton::after { background: -webkit-gradient( linear, left top, right top, from(#181d20), color-stop(#080808), to(#181d20) ); background: linear-gradient(90deg, #181d20, #080808, #181d20); } [data-theme="dark"] .skeleton::after { background: -webkit-gradient( linear, left top, right top, from(#eee), color-stop(#f9f9f9), to(#eee) ); background: linear-gradient(to right, #eee, #f9f9f9, #eee); } @-webkit-keyframes skeleton { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } @keyframes skeleton { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } .table thead tr th:last-child, .table tbody tr td:last-child { text-align: right; } .tradingview-widget-copyright { display: none !important; } .trading-chart { background-color: #0d1e23; margin-top: 15px; border-radius: 8px; padding: 20px; } @media screen and (max-width: 1199px) { .trading-chart { margin-top: 0; } } /* blog css */ .blog-details { border-radius: 8px; overflow: hidden; height: 100%; -webkit-box-shadow: 0px 2px 15px hsl(var(--white) / 0.25); box-shadow: 0px 2px 15px hsl(var(--white) / 0.25); } .blog-details__thumb { max-height: 100%; } .blog-details__thumb img { border-radius: 8px; height: 100%; } @media screen and (max-width: 991px) { .blog-details__thumb { height: 350px; } } @media screen and (max-width: 767px) { .blog-details__thumb { height: 300px; } } .blog-details__thumb img { border-radius: 15px; } .blog-details__content { padding: 45px 0px 0px; } @media screen and (max-width: 767px) { .blog-details__content { padding: 35px 0px 0px; } } @media screen and (max-width: 575px) { .blog-details__content { padding: 20px 0px 0px; } } .blog-details__title { font-weight: 500; margin: 0 auto; margin-top: 25px; margin-bottom: 25px; } @media screen and (max-width: 575px) { .blog-details__title { margin-bottom: 15px; margin-top: 15px; } } .blog-details__desc { margin-bottom: 40px; } @media screen and (max-width: 575px) { .blog-details__desc { margin-bottom: 30px; } } @media screen and (max-width: 991px) { .market-overview { padding-top: 120px !important; } } .blog-details__share { border-top: 1px solid #ececec; padding: 20px 0px; } .blog-details__share .social-share__title { font-weight: 700; } .details-subtitle { font-weight: 700; margin-bottom: 30px; } .my-order-list-table tr th { font-size: 0.875rem !important; } .my-order-list-table tr.skeleton::before { height: 90%; min-height: 90%; } .text--gold { color: #ffb608; } .account-left__logo img { max-width: 250px; } .my-order-list-table .empty-thumb { min-height: 190px !important; } .cursor-pointer { cursor: pointer; } .offcanvas { background-color: #09171a; z-index: 99999; } @media only screen and (min-width: 768px) { .offcanvas { width: 60% !important; } } @media only screen and (min-width: 1440px) { .offcanvas { width: 30% !important; } } .offcanvas .form--control { border-color: hsl(var(--white) / 0.2) !important; color: hsl(var(--body-color)) !important; } .offcanvas .input-group-text, .order-update-form .input-group-text, .offcanvas .list-group-item { border-color: hsl(var(--white) / 0.2) !important; background: transparent !important; color: hsl(var(--body-color)) !important; } .offcanvas .form--control option { color: hsl(var(--body-color)); background-color: #09171a; font-weight: normal !important; } .empty-gateway { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .has-my-order { position: relative; } .has-my-order::before { position: absolute; width: 4px; height: 4px; content: ""; border-radius: 50%; left: -8px; background: #000; background: hsl(var(--warning)); } .order--amount-rate-wrapper { position: relative; } .order-update-form { position: absolute; top: 0; right: 0; z-index: 99; background: #0d1e23; width: 15.625rem; height: 3.5rem; } .order-update-form .form--control { padding: 0 15px !important; } .order-update-form .form--control { color: hsl(var(--body-color)); border-color: hsl(var(--white) / 0.2) !important; } .order-update-form .input-group-text { color: hsl(var(--white) / 0.7) !important; } .amount-rate-update { cursor: pointer; } /* mega menu start here */ .nav-item.has-mega-menu { position: relative; } .has-mega-menu .mega-menu { position: absolute; width: 400px; left: 50% !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important; top: 100%; border-radius: 10px; z-index: 99; overflow: unset; margin-top: 0px; visibility: hidden; opacity: 0; } .nav-item.has-mega-menu:hover .mega-menu { visibility: visible; opacity: 1; z-index: 99; } .mega-menu-list__link { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0px !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mega-menu-list__content { width: calc(100% - 45px); } .mega-menu-list__title { font-size: 18px; font-weight: 500; margin-bottom: 2px; color: hsl(var(--static-black)); } .mega-menu-list__desc { color: hsl(var(--static-black)); font-size: 12px; } .mega-menu-list__icon { width: 45px; } .mega-menu-list__item { padding: 30px 20px; background-color: hsl(var(--base) / 0.07); border-radius: 8px; } .mega-menu-list__item:not(:last-child) { margin-bottom: 10px; } .mega-item-bg1 { background-color: #7ed5f0; } .mega-item-bg2 { background-color: #b7f598; } .mega-item-bg3 { background-color: #0EA5E9; } .mega-menu-list__icon { width: 45px; height: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; font-size: 18px; } @media (max-width: 991px) { .has-mega-menu .mega-menu { display: none; background-color: #181d20 !important; } .has-mega-menu .mega-menu.open { position: inherit; width: 100%; max-width: unset; display: block; margin-top: 10px; } } @media (max-width: 420px) { .has-mega-menu .mega-menu { width: 100%; } .mega-menu-list__item, .has-mega-menu .mega-menu { padding: 10px !important; } } .mega-menu-list__item { -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .mega-menu-list__item:hover { -webkit-transform: scale(1.03); transform: scale(1.03); } .progress-cricle { width: 80px; height: 80px; border-radius: 50%; left: 5%; z-index: 99; bottom: 0; position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .select2-dropdown { background-color: hsl(var(--body-background)); border-color: hsl(var(--white) / 0.14); } [data-theme="light"] .select2-container--default .select2-search--dropdown .select2-search__field { border-radius: 6px; font-weight: 400; outline: none; width: 100%; padding: 10px; background-color: hsl(var(--footer-bg)); border-color: hsl(var(--black) / 0.2) !important; color: #fff !important; line-height: 1; margin: 10px 0px; } .select2-container--default .select2-selection--single { background-color: transparent !important; border-color: hsl(var(--black) / 0.2); height: 52px; padding: 10px 0px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: hsl(var(--body-color)) !important; } .select2-container .selection { width: 100%; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 11px !important; right: 5px !important; } .select2-container--default .select2-results__option--selected { background-color: hsl(var(--base) / 0.8) !important; } .banner-section::before { position: absolute; content: ""; width: 520px; height: 520px; left: -400px; top: -330px; z-index: -1; background: -webkit-gradient(linear, left top, left bottom, from(rgba(219, 223, 240, 0.5)), to(rgba(62, 79, 152, 0.5))); background: linear-gradient(180deg, rgba(219, 223, 240, 0.5) 0%, rgba(62, 79, 152, 0.5) 100%); -webkit-filter: blur(700px); filter: blur(700px); } .banner-content__subtitle { color: hsl(var(--heading-color)); font-weight: 600; margin-bottom: 12px; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#efeff3)); background: linear-gradient(180deg, #ffffff 0%, #efeff3 100%); border-radius: 8px; padding: 11px 16px; font-size: 14px; line-height: 1; } .banner-content__title { margin-bottom: 24px; } .banner-content__desc { max-width: 660px; font-size: 24px; font-weight: 600; font-family: var(--heading-font); } @media screen and (max-width: 991px) { .banner-content__desc { font-size: 20px; } } @media screen and (max-width: 575px) { .banner-content__desc { font-size: 18px; } } @media screen and (max-width: 424px) { .banner-content__desc { font-size: 16px; } } .banner-content__button { margin-top: 40px; } @media screen and (max-width: 767px) { .banner-content__button { margin-top: 24px; } } @media screen and (max-width: 424px) { .banner-content__button .btn { width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } } .banner-thumb-wrapper { text-align: center; position: relative; } .banner-thumb-wrapper__shape { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; z-index: -1; animation:color-change 7s ease-in-out infinite alternate; background: linear-gradient(90deg, #eee, #f3f3f3, #eee); background-size: 300% 300%; background-repeat: no-repeat; } @keyframes color-change { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .banner-thumb-wrapper__client { position: absolute; bottom: 110px; left: -30px; background: #f5f5f5; padding: 24px 16px; -webkit-box-shadow: 8px 4px 6px 0px #00000033; box-shadow: 8px 4px 6px 0px #00000033; border-radius: 8px; animation: ban 3s linear infinite; } @keyframes ban { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } .banner-thumb-wrapper__client img{ max-width: 135px; } @media screen and (max-width: 767px) { .banner-thumb-wrapper__client { left: 0; bottom: 150px; } } @media screen and (max-width: 424px) { .banner-thumb-wrapper__client { bottom: 130px; padding: 10px; } } .banner-thumb-wrapper__client .title { font-family: var(--body-font); margin-bottom: 5px; } .banner-thumb-wrapper__client .text { color: hsl(var(--heading-color)); margin-bottom: 16px; font-size: 18px; } @media screen and (max-width: 767px) { .banner-thumb-wrapper__client .text { font-size: 16px; margin-bottom: 12px; } } @media screen and (max-width: 424px) { .banner-thumb-wrapper__client .text { font-size: 14px; margin-bottom: 5px; } } /* =========================== Banner Section End Here ========================= */ /*================= category css start here =================*/ .category-item { background-color: hsl(var(--white)); border-radius: 8px; -webkit-box-shadow: 0px 2px 8px 0px #63636333; box-shadow: 0px 2px 8px 0px #63636333; padding: 10px 10px; text-align: center; -webkit-transition: 0.2s linear; transition: 0.2s linear; height: 100%; width: 100%; border-bottom: 4px solid transparent; } .category-item:hover { border-bottom: 4px solid hsl(var(--base)); border-radius: 8px; } .category-item__thumb { margin: 0 auto; } .category-item__title { font-weight: 600; margin-top: 16px; color: hsl(var(--heading-color)); } .insurance-thumb { max-width: 400px; margin: 0 auto; } /*=================== category css end here =================*/ .left-bg { position: absolute; width: 520px; height: 520px; left: -15%; bottom: -30%; z-index: -1; background: -webkit-gradient(linear, left top, left bottom, from(rgba(219, 223, 240, 0.6)), to(rgba(62, 79, 152, 0.6))); background: linear-gradient(180deg, rgba(219, 223, 240, 0.6) 0%, rgba(62, 79, 152, 0.6) 100%); -webkit-filter: blur(700px); filter: blur(700px); } .right-bg { position: absolute; width: 520px; height: 520px; right: -15%; bottom: -30%; z-index: -1; background: -webkit-gradient(linear, left top, left bottom, from(rgba(219, 223, 240, 0.6)), to(rgba(62, 79, 152, 0.6))); background: linear-gradient(180deg, rgba(219, 223, 240, 0.6) 0%, rgba(62, 79, 152, 0.6) 100%); -webkit-filter: blur(700px); filter: blur(700px); } @media (max-width: 1399px) { .right-bg { filter: blur(350px); } .left-bg { filter: blur(350px); } } /*================= area section css start here =================*/ .area-section { position: relative; z-index: 3; background: hsl(var(--section-bg)); } .area-section .left-bg, .area-section .right-bg { -webkit-filter: blur(300px); filter: blur(300px); } .area-form { background: hsl(var(--white)); padding: 32px; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); border-radius: 8px; } .area-form .btn--white:hover, .area-form .btn--white:focus-visible, .area-form .btn--white:active { background-color: hsl(var(--white)); } .quote-thumb { text-align: center; margin-bottom: -60px; } @media screen and (max-width: 991px) { .quote-thumb { display: none; } } @media screen and (max-width: 575px) { .area-form { padding: 20px; } } .area-form .form--label { color: hsl(var(--body-color)); } .area-form .form--control:focus { border-color: hsl(var(--base)); } /*================== area section css end here =================*/ .step-section { position: relative; z-index: 1; overflow: hidden; } .step-section .step-wrapper__right { background-color: hsl(var(--white)); padding: 24px; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); border-radius: 8px; height: 100%; } @media screen and (max-width: 424px) { .step-section .step-wrapper__right { padding: 20px 16px; } } .step-section .step-wrapper__verify { -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px 20px; display: grid; grid-template-columns: 3fr auto; } @media screen and (max-width: 424px) { .step-section .step-wrapper__verify { grid-template-columns: 1fr; } } .step-section .step-wrapper .step-list { counter-reset: step-counter; } .step-section .step-wrapper .step-list__item { background-color: hsl(var(--white)); -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); padding: 24px; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; counter-increment: step-counter; margin-bottom: 20px; } @media screen and (max-width: 424px) { .step-section .step-wrapper .step-list__item { padding: 20px 16px; } } .step-section .step-wrapper .step-list__item:last-child { margin-bottom: 0; } .step-section .step-wrapper .step-list__number { color: hsl(var(--heading-color)); font-size: 32px; font-weight: 600; position: relative; content: counter(step-counter); padding-right: 20px; } .step-section .step-wrapper .step-list__number::before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; content: counter(step-counter); } .step-section .step-wrapper .step-list__number::after { position: absolute; content: ""; right: -3px; bottom: -12px; width: 5px; height: 5px; border-radius: 50%; background-color: hsl(var(--heading-color)); } .step-section .step-wrapper .step-list__title { margin-bottom: 5px; } .insurance-details__main { margin-top: 16px; padding: 20px; background-color: hsl(var(--white)); border-radius: 8px; border: 1px solid hsl(var(--black) / .1); } .insurance-details__title { margin-bottom: 16px; color: hsl(var(--heading-color)); font-size: 14px; font-weight: 600; } .insurance-details__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 14px; font-weight: 600; justify-content: space-between; } .insurance-details__item:not(:last-child) { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid hsl(var(--black) / .07); } .insurance-details__item .text { color: hsl(var(--heading-color)); } /*========== insurance section css start here ==========*/ .insurance-section { position: relative; z-index: 1; overflow: hidden; } .insurance-section__shape { position: absolute; top: 0; left: 0; z-index: -1; height: 100%; } .insurance-section::before { position: absolute; content: ""; width: 520px; height: 520px; left: -400px; top: -330px; z-index: -1; background: -webkit-gradient(linear, left top, left bottom, from(rgba(219, 223, 240, 0.7)), to(rgba(62, 79, 152, 0.7))); background: linear-gradient(180deg, rgba(219, 223, 240, 0.7) 0%, rgba(62, 79, 152, 0.7) 100%); -webkit-filter: blur(700px); filter: blur(700px); } .insurance-form { border: 1px solid hsl(var(--border-color) / 0.2); background-color: hsl(var(--section-bg) / 0.2); padding: 20px; border-radius: 16px; } .check-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .check-wrapper .type--check { position: relative; padding: 11px 14px; line-height: 1; border: #f5f5f5; border-radius: 8px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 40px; } @media (max-width: 424px) { .check-wrapper .type--check { padding: 10px; } } .check-wrapper .type--check .type--input { position: relative; border-radius: 4px; width: 16px; height: 16px; border: #f5f5f5; cursor: pointer; } .check-wrapper .type--check .type--input::before { position: absolute; content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: hsl(var(--body-color)); font-size: 0.75rem; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .check-wrapper .type--check .type-text { font-size: 14px; color: hsl(var(--heading-color)); } .type--check:has(input:checked) { background-color: #ddd; border-color: #ccc; } .type--check:has(input:checked) .type--input::before { opacity: 1; color: hsl(var(--base)); } .type--check:has(input:checked) .type--input { border-color: hsl(var(--base)); } /*========== insurance section css end here ==========*/ /*============== insurance plan section start here ==============*/ .plan-section { position: relative; z-index: 1; overflow: hidden; } .plan-section__shape { position: absolute; top: 0; left: 0; z-index: -1; height: 100%; } .plan-section::before { position: absolute; content: ""; width: 520px; height: 100%; left: -400px; top: -330px; z-index: -1; background: -webkit-gradient(linear, left top, left bottom, from(rgba(219, 223, 240, 0.7)), to(rgba(62, 79, 152, 0.7))); background: linear-gradient(180deg, rgba(219, 223, 240, 0.7) 0%, rgba(62, 79, 152, 0.7) 100%); -webkit-filter: blur(700px); filter: blur(700px); } .plan-section__btn { margin-bottom: 32px; } @media screen and (max-width: 575px) { .plan-section__btn { margin-top: 20px; } } .plan-section__top { padding: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: -webkit-gradient(linear, left top, right top, color-stop(-93.24%, #b7bfe1), to(#f5f5f5)); background: linear-gradient(90deg, #b7bfe1 -93.24%, #f5f5f5 100%); border-radius: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px 40px; } @media screen and (max-width: 991px) { .plan-section__top { display: grid; grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 767px) { .plan-section__top { grid-template-columns: 1fr; } } @media screen and (max-width: 575px) { .plan-section__top { gap: 20px; } } .plan-section__top .insurance-info { position: relative; } .plan-section__top .insurance-info::after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -100px; width: 1px; height: 100%; background: hsl(var(--border-color) / 0.4); } @media screen and (max-width: 1399px) { .plan-section__top .insurance-info::after { right: -70px; } } @media screen and (max-width: 1199px) { .plan-section__top .insurance-info::after { display: none; } } .plan-section__top .insurance-info:last-child::after { display: none; } .plan-section__top .insurance-info__title { color: hsl(var(--white)); margin-bottom: 4px; } @media screen and (max-width: 575px) { .plan-section__top .insurance-info__title { font-size: 14px; } } .plan-section__top .insurance-info__text { color: hsl(var(--white)); font-weight: 600; font-size: 18px; } @media screen and (max-width: 575px) { .plan-section__top .insurance-info__text { font-size: 16px; } } .plan-section .edit-btn { color: hsl(var(--white)); font-size: 18px; } .back-btn { font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; } .back-btn__icon { font-size: 18px; } .plan-container { margin-top: 24px; } .plan-container__title { margin-bottom: 20px; font-weight: 600; } .plan-container .plan-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media screen and (max-width: 991px) { .plan-container .plan-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .plan-container .plan-wrapper__left { width: calc(100% - 300px); } @media screen and (max-width: 991px) { .plan-container .plan-wrapper__left { width: 100%; } } .plan-container .plan-wrapper__right { width: 300px; } @media screen and (max-width: 991px) { .plan-container .plan-wrapper__right { width: 100%; } } .plan-container .plan-wrapper__right .plan-sidebar { padding: 20px; border-radius: 8px; background: hsl(var(--section-bg) / 0.2); border: 1px solid hsl(var(--border-color) / 0.2); margin-bottom: 10px; } .plan-container .plan-wrapper__right .plan-sidebar:last-child { margin-bottom: 10px; } .plan-container .plan-wrapper__right .plan-sidebar__top { margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; } .plan-container .plan-wrapper__right .plan-sidebar__title { margin-bottom: 0; font-family: var(--body-font); font-weight: 600; } .plan-container .plan-wrapper__right .plan-sidebar__text { font-size: 14px; color: hsl(var(--heading-color)); } .plan-container .plan-wrapper__right .plan-sidebar .plan-list__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; font-size: 14px; margin-bottom: 10px; color: hsl(var(--heading-color)); } .plan-container .plan-wrapper__right .plan-sidebar .plan-list__item:last-child { margin-bottom: 0; } .plan-container .plan-wrapper__right .plan-sidebar .plan-list__item-text { font-weight: 600; } .plan-container .plan-wrapper__right .plan-sidebar .plan-list__icon { font-size: 12px; } .plan-item { background-color: hsl(var(--section-bg)); padding: 24px; border: 1px solid hsl(var(--border-color) / 0.4); border-radius: 8px; margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; display: grid; grid-template-columns: repeat(4, 1fr); } @media screen and (max-width: 1199px) { .plan-item { display: grid; grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 575px) { .plan-item { grid-template-columns: 1fr; gap: 20px; } } @media screen and (max-width: 575px) { .plan-item { gap: 20px; } } .plan-item:last-child { margin-bottom: 0; } .plan-item .text { font-size: 12px; font-weight: 600; color: hsl(var(--heading-color)); } .plan-item__content { position: relative; } .plan-item__content .form-check { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .plan-item__content .form-check .form-check-input { margin-top: 0; } .plan-item__content:last-child::after { display: none; } .plan-item__content:nth-last-child(2)::after { display: none; } .plan-item__content .btn { margin-bottom: 12px; } .plan-item__title { margin-bottom: 4px; color: hsl(var(--heading-color)); } .plan-item__number { margin-bottom: 4px; font-weight: 600; font-family: var(--body-font); } .plan-item__desc { font-size: 12px; color: hsl(var(--heading-color)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .plan-item__desc .icon { color: hsl(var(--base)); } /*============== insurance plan section end here ================*/ /*========== plan details css start here ==========*/ .plan-details-section { position: relative; z-index: 1; overflow: hidden; } .plan-details-section__shape { position: absolute; top: 0; left: 0; z-index: -1; height: 100%; } .plan-details-section::before { position: absolute; content: ""; width: 520px; height: 500px; left: -400px; top: -330px; z-index: -1; background: -webkit-gradient(linear, left top, left bottom, from(rgba(219, 223, 240, 0.7)), to(rgba(62, 79, 152, 0.7))); background: linear-gradient(180deg, rgba(219, 223, 240, 0.7) 0%, rgba(62, 79, 152, 0.7) 100%); -webkit-filter: blur(300px); filter: blur(300px); } .plan-details__item { margin-top: 24px; } .plan-details__title { margin-bottom: 24px; } @media screen and (max-width: 575px) { .plan-details__title { margin-bottom: 10px; } } .content-list-wrapper { gap: 16px 30px; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); max-width: 650px; gap: 16px; } @media screen and (max-width: 575px) { .content-list-wrapper .form--check { margin-bottom: 10px; } } .content-list-wrapper .form--check:last-child { margin-bottom: 0; } .feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .feature-list .feature-item { background-color: hsl(var(--section-bg)); padding: 20px 12px; border-radius: 8px; text-align: center; } .feature-list .feature-item__icon { max-width: 60px; margin: 0 auto; margin-bottom: 16px; } .feature-list .feature-item__text { color: hsl(var(--heading-color)); margin-bottom: 4px; } .feature-list .feature-item__title { font-family: var(--body-font); margin-bottom: 0; } .check-item { display: flex; align-items: center; gap: 10px; } .check-item__box { position: relative; border-radius: 6px; width: 20px; height: 20px; background-color: hsl(var(--base) / 0.06) !important; border: 1px solid hsl(var(--base)) !important; } .check-item__box.style-two { background-color: hsl(var(--danger) / 0.06) !important; border: 1px solid hsl(var(--danger)) !important; } .check-item__box::after { position: absolute; content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: hsl(var(--base)); font-size: 0.6875rem; top: 50%; left: 50%; transform: translate(-50%, -50%); } .check-item__box.style-two::after { content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: hsl(var(--danger)); } .check-item__text { font-weight: 600; width: calc(100% - 20px); font-size: 0.875rem; color: hsl(var(--heading-color)); } /*============ plan details css end here ==========*/ /*============== insurance compare section start here ==============*/ .compare-section { position: relative; z-index: 1; overflow: hidden; } .compare-section__shape { position: absolute; top: 0; left: 0; z-index: -1; height: 100%; } .compare-section::before { position: absolute; content: ""; width: 520px; height: 500px; left: -400px; top: -330px; z-index: -1; background: -webkit-gradient(linear, left top, left bottom, from(rgba(219, 223, 240, 0.7)), to(rgba(62, 79, 152, 0.7))); background: linear-gradient(180deg, rgba(219, 223, 240, 0.7) 0%, rgba(62, 79, 152, 0.7) 100%); -webkit-filter: blur(300px); filter: blur(300px); } .compare-section .edit-btn { color: hsl(var(--white)); font-size: 18px; } .section-btn { margin-bottom: 32px; } @media screen and (max-width: 575px) { .section-btn { margin-top: 20px; } } .compare-container__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px 20px; margin-bottom: 24px; } @media screen and (max-width: 424px) { .compare-container__top { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .compare-container__top .title { margin-bottom: 0; } .back-btn__icon { font-size: 18px; } .compare-item { background-color: hsl(var(--section-bg)); padding: 24px; border-radius: 8px; } @media screen and (max-width: 424px) { .compare-item { padding: 16px; } } .compare-item__text { color: hsl(var(--heading-color)); font-weight: 600; } .compare-item__close-icon { width: 20px; height: 20px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: hsl(var(--white)); background-color: #cacacf; cursor: pointer; -webkit-transition: 0.2s; transition: 0.2s; } .compare-item__close-icon:hover { background-color: hsl(var(--danger)); } .compare-item__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 24px; } @media screen and (max-width: 575px) { .compare-item__top { margin-bottom: 16px; } } .compare-item-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px 90px; } @media screen and (max-width: 1399px) { .compare-item-wrapper { gap: 10px 40px; } } @media screen and (max-width: 1199px) { .compare-item-wrapper { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media screen and (max-width: 424px) { .compare-item-wrapper { gap: 20px; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .compare-item-wrapper__content { position: relative; } .compare-item-wrapper__content::after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -45px; width: 1px; height: 50px; background: hsl(var(--border-color) / 0.4); } @media screen and (max-width: 1399px) { .compare-item-wrapper__content::after { right: -20px; } } @media screen and (max-width: 1199px) { .compare-item-wrapper__content::after { display: none; } } .compare-item-wrapper__content:last-child::after { display: none; } .compare-item-wrapper__title { margin-bottom: 4px; color: hsl(var(--heading-color)); } .compare-item-wrapper__number { margin-bottom: 4px; font-weight: 600; font-family: var(--body-font); } .compare-item-wrapper__desc { font-size: 12px; color: hsl(var(--heading-color)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .compare-item-wrapper__desc .icon { color: hsl(var(--base)); } .compare-table { margin: 0; margin-top: 12px; border-collapse: collapse; border-collapse: separate; border-spacing: 0px 0px; } .compare-table tbody { border: 0 !important; } .compare-table tbody tr .title { background-color: hsl(var(--section-bg) / 0.2) !important; color: hsl(var(--heading-color)) !important; font-weight: 600 !important; padding: 16px !important; } @media screen and (max-width: 424px) { .compare-table tbody tr .title { padding: 12px !important; } } .compare-table tbody tr:last-child { border-bottom: 0; } .compare-table tbody tr:last-child td { border-bottom: 1px solid hsl(var(--border-color) / 0.4) !important; } .compare-table tbody tr:last-child td:first-child { border-radius: 0px; } .compare-table tbody tr:last-child td:last-child { border-radius: 0; } .compare-table tbody tr td { text-align: left; vertical-align: middle; padding: 16px; border-width: 1px; color: hsl(var(--heading-color)); font-weight: 400; max-width: 170px; font-size: 1rem; border: 0; background-color: hsl(var(--white)); border: 1px solid hsl(var(--border-color) / 0.4); border-right: 0; border-bottom: 0; } @media screen and (max-width: 1399px) { .compare-table tbody tr td { font-size: 0.875rem; } } @media screen and (max-width: 424px) { .compare-table tbody tr td { padding: 10px; font-size: 12px; } } .compare-table tbody tr td::before { content: attr(data-label); font-family: var(--heading-font); font-size: 0.9375rem; color: hsl(var(--black)); font-weight: 500; display: none; width: 45% !important; text-align: left; } .compare-table tbody tr td:first-child { text-align: left; font-weight: 400; color: hsl(var(--body-color)); border-left: 1px solid hsl(var(--border-color) / 0.4); } .compare-table tbody tr td:last-child { text-align: left; border-right: 1px solid hsl(var(--border-color) / 0.4); } .compare-table tbody tr td:nth-child(2) { text-align: left; } /* info card css here */ .info-main-container { gap: 20px; display: grid; grid-template-columns: 1fr 1fr; } @media (max-width:767px) { .info-main-container { grid-template-columns: 1fr; } } .info-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .info-wrapper__title { margin-bottom: 10px; } .info-card { background-color: hsl(var(--white)); -webkit-box-shadow: var(--box-shadow-two); box-shadow: var(--box-shadow-two); padding: 16px; border-radius: 8px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .info-list__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .info-list__item:not(:last-child) { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid hsl(var(--black) / .06); } @media screen and (max-width: 1199px) { .info-list__item { font-size: 14px; } } .info-list__item:last-child { margin-bottom: 0; } .info-list__title { font-weight: 600; color: hsl(var(--heading-color)); } /*=========== policy-list css start here ===========*/ .policy-renewal { margin-top: 24px; } .policy-renewal__header { padding: 12px 20px; border-radius: 8px; background-color: hsl(var(--section-bg)); } .policy-renewal__body { margin-top: 24px; } .policy-renewal__body .text { margin-bottom: 6px; color: hsl(var(--heading-color)); } .policy-renewal__body .policy-list { list-style: auto; padding-left: 20px; } .policy-renewal__body .policy-list__item { margin-bottom: 6px; color: hsl(var(--heading-color)); } .policy-renewal__body .policy-list__item:last-child { margin-bottom: 0; } .policy-renewal__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 16px; gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .amount-list { background: hsl(var(--section-bg)); padding: 16px 12px; border-radius: 8px; } .amount-list__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px 10px; margin-bottom: 8px; font-size: 12px; font-weight: 600; } .amount-list__item:last-child { margin-bottom: 0; } .amount-list__item.total { color: hsl(var(--heading-color)); border-top: 1px solid hsl(var(--border-color)); padding-top: 8px; } /*============== insurance plan page css start here ==============*/ .insurance-plan-wrapper { border-radius: 8px; overflow: hidden; background-color: hsl(var(--white)); -webkit-box-shadow: var(--box-shadow-two); box-shadow: var(--box-shadow-two); } .insurance-plan-wrapper__header { position: relative; padding: 32px 40px; z-index: 1; background: -webkit-gradient(linear, left top, right top, color-stop(-93%, #eee), to(#dee2e6)); background: linear-gradient(90deg, #eee -93%, #f8f9fa 100%); -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media screen and (max-width: 767px) { .insurance-plan-wrapper__header { padding: 24px; } } .insurance-plan-wrapper__header .title { color: hsl(var(--white)); margin-bottom: 6px; } .insurance-plan-wrapper__header .text { color: hsl(var(--white)); } .insurance-plan-wrapper__shape { position: absolute; top: 0; right: 0; width: 70%; height: 100%; z-index: -1; } .insurance-plan-wrapper__shape img { width: 100%; height: 100%; } .insurance-plan-wrapper__body { padding: 50px 40px; } @media screen and (max-width: 1499px) { .insurance-plan-wrapper__body { padding: 40px 30px; } } @media screen and (max-width: 1399px) { .insurance-plan-wrapper__body { padding: 40px 20px; } } @media screen and (max-width: 424px) { .insurance-plan-wrapper__body { padding: 30px 16px; } } .information-container { background: #f8f9fa; padding: 24px; border-radius: 8px; } @media screen and (max-width: 424px) { .information-container { padding: 0; background-color: transparent; } } .information-container.information-two { background-color: hsl(var(--white)); -webkit-box-shadow: var(--box-shadow-two); box-shadow: var(--box-shadow-two); } .plan-info { margin-top: 90px; } @media screen and (max-width: 575px) { .plan-info { margin-top: 40px; padding: 0 40px; } } @media screen and (max-width: 424px) { .plan-info { padding: 0 20px; } } .page-list { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; counter-reset: step; padding: 0 40px; } @media screen and (max-width: 1399px) { .page-list { padding: 0 20px; } } @media screen and (max-width: 575px) { .page-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .page-list .nav-item { border-bottom: 0; padding: 3px; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } @media screen and (max-width: 575px) { .page-list .nav-item { padding-bottom: 40px; text-align: left; } } @media screen and (max-width: 575px) { .page-list .nav-item:last-child { padding-bottom: 0; } } .page-list .nav-item::after { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 20px; height: 20px; bottom: 8px; color: hsl(var(--body-color)); font-size: 16px; top: -26px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; counter-increment: step; content: counter(step); z-index: 2; font-size: 24px; } @media screen and (max-width: 1399px) { .page-list .nav-item::after { font-size: 20px; } } @media screen and (max-width: 575px) { .page-list .nav-item::after { top: 16px; left: -7px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); font-size: 18px; } } .page-list .nav-item::before { content: ""; position: absolute; top: -17px; right: 50%; width: 100%; height: 6px; background: hsl(var(--section-bg)); } @media screen and (max-width: 575px) { .page-list .nav-item::before { top: 0; left: 0; right: unset; width: 6px; height: 100%; } } .page-list .nav-item .nav-link { padding: 0 !important; background-color: transparent !important; border-radius: 5px; -webkit-transition: 0.4s; transition: 0.4s; border: 0 !important; position: relative; } .page-list .nav-item .nav-link::before { position: absolute; content: ""; top: -38px; left: 50%; width: 40px; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 40px; border-radius: 50%; background-color: hsl(var(--section-bg)); z-index: 2; } @media screen and (max-width: 991px) { .page-list .nav-item .nav-link::before { display: block !important; } } @media screen and (max-width: 575px) { .page-list .nav-item .nav-link::before { top: 50%; left: -18px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); width: 36px; height: 36px; } } .page-list .nav-item .nav-link__title { margin-top: 10px; font-weight: 600; } @media screen and (max-width: 1399px) { .page-list .nav-item .nav-link__title { font-size: 15px; } } @media screen and (max-width: 1199px) { .page-list .nav-item .nav-link__title { font-size: 14px; } } @media screen and (max-width: 767px) { .page-list .nav-item .nav-link__title { font-size: 12px; } } @media screen and (max-width: 575px) { .page-list .nav-item .nav-link__title { margin-top: 0; margin-left: 40px; font-size: 14px; } .nav-link__desc { margin-left: 40px; } } .page-list .nav-item.active.nav-item::after { color: hsl(var(--white)); content: "\f00c" !important; font-family: "Font Awesome 6 Free"; font-weight: 800; } .page-list .nav-item.active.nav-item::before { background-color: hsl(var(--success)); } .page-list .nav-item.active.nav-item .nav-link::before { background-color: hsl(var(--success)); } .page-list .nav-item.active.nav-item .nav-link__title { color: hsl(var(--heading-color)); } .page-list .nav-item.active .transaction-item__title { color: hsl(var(--white)); } .page-list .nav-item.active .transaction-item__text { color: hsl(var(--white)); } .page-list .nav-item:last-child::before { right: -50%; width: 200%; } @media screen and (max-width: 575px) { .page-list .nav-item:last-child::before { top: 0; left: 0; right: unset; width: 6px; height: 100%; display: none; } } .winner-section { position: relative; } .winner-section .shape1 { left: -100px; top: 50px; z-index: -1; opacity: 0.1; } .investor-item__thumb { display: flex; align-items: center; justify-content: center; } /*================= competition section css start here ================= */ .live-competition-section { background-color: hsl(var(--black)); padding: 180px 0 120px; } @media (max-width: 991px) { .live-competition-section { padding: 130px 0 70px; } } .competition-item { position: relative; z-index: 1; border-radius: 8px; overflow: hidden; background-color: #2e0327; height: 100%; border: 1px solid hsl(var(--white) / 0.2); } .competition-item__thumb { width: 100%; max-height: 250px; overflow: hidden; border-bottom: 1px solid hsl(var(--white) / 0.2); } .competition-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .competition-item__content { padding: 20px 10px; } .competition-item__status { position: absolute; top: 0; left: 0; background-color: hsl(var(--base)); color: hsl(var(--black)); padding: 5px 20px; font-weight: 600; font-size: 16px; } .remaining-time__content { gap: 10px; } .remaining-time__desc { font-size: 0.875rem; margin-top: 10px; } .remaining-time .box { width: 100%; border-radius: 4px; background-color: hsl(var(--white) / 0.1); padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 16px; font-weight: 400; color: hsl(var(--white)); padding: 5px; } @media screen and (max-width: 424px) { .remaining-time .box { width: 70px; height: 50px; font-size: 16px; } } .countdown-item__title { margin-bottom: 10px; } .competittion-item__btn { margin-top: 35px; } .competition-details__dip { margin-bottom: 30px; } .competition-details__dip .title { margin-bottom: 10px; } .dip-wrapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } @media (max-width: 575px) { .dip-wrapper { gap: 10px; } } .dip-wrapper .btn-item { background-color: hsl(var(--white) / 0.1); padding: 10px 20px; border-radius: 30px; color: hsl(var(--white)); transition: 0.2s; } .dip-wrapper .btn-item:hover { background-color: hsl(var(--base)); color: hsl(var(--black)); } .countdown-item { margin-top: 20px; } .remaining-time .box__text { font-size: 12px; color: hsl(var(--white)); margin-top: 5px; } .description-list { margin-top: 30px; line-height: 2rem; /* display: grid; grid-template-columns: 1fr 1fr; gap: 20px 70px; */ } @media (max-width: 991px) { .description-list { gap: 20px; } } @media (max-width: 991px) { .description-list { gap: 20px; grid-template-columns: 1fr; } } .description-list__text { position: relative; z-index: 1; padding-left: 25px; } .description-list__text::after { position: absolute; content: ""; top: 5px; left: 0; width: 10px; height: 10px; background: hsl(var(--base)); border-radius: 50%; } /*================= competition section css end here ================= */ .competition-details-section { padding: 160px 0 110px; overflow: hidden; } @media screen and (max-width: 991px) { .competition-details-section { padding: 120px 0 150px; } } .tickets-wrapper { margin-top: 30px; } .tickets-wrapper__title { margin: 15px 0; } .competition-details__top { display: flex; margin-bottom: 30px; flex-wrap: wrap; gap: 10px; } .competition-gallery__item { display: flex !important; justify-content: center; cursor: pointer; max-height: 100px; margin-right: 8px; border-radius: 4px; overflow: hidden; align-items: center; } .competition-details__item img { width: 100%; height: auto; object-fit: contain; min-height: 450px; max-height: 450px; border: 1px solid hsl(var(--white) / 0.1); overflow: hidden; } .competition-gallery__item img { width: 100%; height: auto; object-fit: contain; max-width: 120px; border: 1px solid hsl(var(--white) / 0.1); } .competition-details__wrapper { padding-bottom: 20px; position: relative; z-index: 1; } .competition-details__postal { margin: 40px 0; } .competition-details__wrapper::after { position: absolute; content: ""; top: 10px; left: 200px; width: 150px; height: 280px; background-color: hsl(var(--base)); filter: blur(160px); z-index: -1; } .remaining-time .title { margin-bottom: 10px; } .competition-details__wrapper.slick-slider .slick-slide img { border-radius: 8px; } .faq-wrapper { margin-top: 60px; } .competition-details__item { position: relative; width: 100%; height: 100%; display: flex !important; justify-content: center; cursor: pointer; } .competition-details .slide-slide img { display: block; width: 100%; } .competition-details__gallery.slick-slide .slick-slide img { border-radius: 4px; } .competition-details__right-title { margin-bottom: 20px; line-height: 1; } @media screen and (max-width: 424px) { .competition-details__right-title { font-size: 20px; } } .competition-details__right-link { margin-bottom: 20px; } @media screen and (max-width: 424px) { .competition-details__right-link { font-size: 15px; } } .competition-details__quantity { gap: 30px 20px; flex-wrap: wrap; margin-bottom: 20px; } .competition-details__tab { margin-top: 65px; } @media (max-width: 991px) { .competition-details__tab { margin-top: 30px; } } /*======== quantity cart css start here ========*/ .qty { display: flex; flex-wrap: wrap; text-align: center; } .qty label { flex: 1 0 100%; } .qty #qty { background-color: transparent !important; color: hsl(var(--white)) !important; border: 1px solid hsl(var(--white) / 0.15) !important; } .qty #qty:focus { outline: none; } .qty input { width: 144px; height: 48px; font-size: 1rem; text-align: center; border-radius: 4px; } @media screen and (max-width: 424px) { .qty input { width: 110px; } } .qty button { width: 48px; height: 48px; color: hsl(var(--white)); font-size: 20px; background-color: hsl(var(--white) / 0.1); border-radius: 4px; } .qty .qtyminus { margin-right: 10px; } .qty .qtyplus { margin-left: 10px; } /*======== quantity cart css end here ========*/ /*======= custom progress css start here =======*/ .custom--progress { height: 15px; border-radius: 4px; background-color: hsl(var(--white) / 0.1); } .competition-details__progressbar { margin-top: 35px; } .progressbar-count { display: flex; justify-content: space-between; margin-bottom: 10px; } .remaining-count { margin-top: 7px; } /*======= custom progress css end here =======*/ /* ================================ ticket btn Css Start ============================= */ .competition-details__ticket-range { margin: 0 40px; } .ticket-btn { background-color: hsl(var(--white) / 0.1); padding: 10px 20px; color: hsl(var(--white)); border-radius: 30px; } .ticket-btn.slick-slide { margin-right: 5px; } .ticket-btn.slick-slide:hover { background: hsl(var(--base)); color: hsl(var(--black)); } .ticket-btn.slick-slide.active { background: hsl(var(--base)); color: hsl(var(--black)); } .competition-details__ticket-range .slick-arrow.arrow-left { top: 50%; left: -42px; transform: translateY(-50%); } .competition-details__ticket-range .slick-arrow.arrow-right { top: 50%; right: -42px; transform: translateY(-50%); } .competition-details__ticket-range .slick-arrow { box-shadow: none; background-color: hsl(var(--white) / 0.2); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .ticket-number-list { display: flex; gap: 3px; flex-wrap: wrap; } .ticket-number-item { width: 65px; height: 60px; background-color: hsl(var(--base)); display: flex; justify-content: center; align-items: center; color: hsl(var(--black)); font-weight: 600; cursor: pointer; transition: 0.2s linear; border-radius: 5px; } .ticket-number-item.click:hover { background-color: hsl(var(--base-d-300)); } .ticket-number-item.active { background-color: hsl(var(--danger)); color: hsl(var(--white)); cursor: no-drop; } .ticket-number-wrapper { margin-top: 20px; } @media (max-width: 575px) { .ticket-number-item { width: 55px; height: 50px; } } /* ================================ ticket btn Css End ============================= */ /*========================= competition details css end ========================= */ .product-qty { display: flex; flex-direction: row; position: relative; } /* qty css end */ .top-section { position: relative; } .top-section::before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background: hsl(var(--section-bg) / 0.6); opacity: 1; } .top-section .container { position: relative; z-index: 1; } .top-section .part-title { font-size: 20px; text-align: center; } .top-investor-slider .slick-list { padding: 15px 0 !important; } .investor-item__thumb { width: 80px; height: 80px; border-radius: 50%; position: relative; } @media (max-width: 1199px) { .investor-item__thumb { width: 80px; height: 80px; } } .investor-item__thumb img { border-radius: 50%; width: 60px; height: 60px; background: hsl(var(--base)); } @media (max-width: 1199px) { .investor-item__thumb img { width: 65px; height: 65px; } } .investor-item__content .name { font-size: 14px; font-weight: 400; } .investor-item .amount { font-size: 14px; font-family: var(--heading-font); } .lastest-winner__info { background-color: hsl(var(--section-bg)); padding: 20px; border-radius: 4px; height: 100%; } .info-title { margin-bottom: 20px; } .lastest-winner__info .icon { font-size: 50px; margin-bottom: 25px; } .investor-item { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; border: 1px solid hsl(var(--white) / 0.1); padding: 10px; border-radius: 8px; margin-right: 10px; } .investor-item .amount { position: unset; } .top-winner-wrapper .icon { font-size: 50px; margin-bottom: 20px; } .top-winner-wrapper { background-color: hsl(var(--section-bg)); padding: 25px; height: 100%; border-radius: 8px; } .cmn--btn { color: hsl(var(--black)) !important; padding: 10px 24px; text-align: center; font-weight: 600; cursor: pointer; outline: none; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; transition: all ease 0.3s; border-radius: 10px; z-index: 1; border: 0; font-family: var(--heading-font); } button:focus:not(:focus-visible) { outline: 0; box-shadow: none; } @media (max-width: 1199px) { .btn, .cmn--btn { font-size: 18px; } } .cmn--btn:hover { color: #1f1f23; box-shadow: 0px 2px 11px hsl(var(--base) / 0.2), 0px 0px 20px hsl(var(--base) / 0.4); } .btn.btn--lg, .cmn--btn.btn--lg { padding: 12px 30px !important; font-size: 18px; } .btn.btn--md, .cmn--btn.btn--md { padding: 8px 20px !important; } .btn.btn--sm, .cmn--btn.btn--sm { padding: 5px 15px !important; font-size: 14px; } .btn.btn--xs, .cmn--btn.btn--xs { padding: 0px 10px !important; font-size: 13px; } .cmn--btn { position: relative; overflow: hidden; } .cmn--btn::before, .cmn--btn::after { position: absolute; content: ""; height: 100%; width: 100%; z-index: -1; top: 0; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; transition: all ease 0.3s; } .cmn--btn::before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; top: 100%; background: hsl(var(--base)); } .cmn--btn:hover::before, .cmn--btn.active::before { top: 0; } .ticket-box { background: #350b2d; border-radius: 10px; } @media (max-width: 991px) { .ticket-box .btn, .ticket-box .cmn--btn { padding: 10px 20px; font-size: 16px; } } .shape { position: absolute; } .cmn--btn, .slick-arrow { box-shadow: 0px 2px 11px hsl(var(--base) / 0.2), 0px 0px 20px hsl(var(--base) / 0.4); } .cmn--btn:hover { box-shadow: -3.828px -3.828px 6px 0px hsl(var(--base) / 0.4), 3px 5px 8px 0px hsl(var(--base) / 0.2); } .cmn--btn, .button-wrapper .cmn--btn, .tab-menu li .cmn--btn.active, .btn:disabled, .cmn--btn:disabled { opacity: 0.5 !important; } /* coverage country */ .coverage-country { max-height: 500px; overflow-y: auto; } .area-plan { display: flex; flex-direction: column; gap: 16px; } .area-plan__body { flex: 1 1 auto; overflow-y: auto; height: 300px; margin-inline: -12px; padding-inline: 12px; scrollbar-width: thin; scrollbar-color: hsl(var(--black)/0.1) hsl(var(--black)/0.01); } .list-group--coverage { display: flex; flex-direction: column; gap: 16px; } .list-group--coverage:has(.no-data:not(.d-none)) { height: 100%; justify-content: center; align-items: center; } .list-group--coverage .list-group-item { display: flex; align-items: center; gap: 12px; border: none; padding: 0px; border-radius: 0px; } .list-group--coverage .list-group-item .country-flag, .list-group--coverage .list-group-item .country-code { --size: 35px; width: var(--size); height: var(--size); border-radius: 50%; flex-shrink: 0; } .list-group--coverage .list-group-item .country-flag { display: block; object-fit: cover; } .list-group--coverage .list-group-item .country-code { display: flex; align-items: center; justify-content: center; font-size: calc(var(--size) * 0.35); font-weight: 600; color: hsl(var(--black)); background-color: hsl(var(--black)/0.05); } .list-group--coverage .list-group-item .country-name { font-size: 1rem; font-weight: 500; margin-bottom: 0px; } .details-card { border: 1px solid hsl(var(--border-color)); border-radius: 8px; overflow: hidden; height: 100%; background-color: hsl(var(--white)); } .details-card__title { padding: 10px 16px; font-size: 1rem; font-weight: 700; background-color: hsl(var(--black) / 0.03); color: hsl(var(--heading-color)); } .details-card__body { padding: 16px; } .details-card__item.total { .value, .label { color: hsl(var(--heading-color)); font-weight: 700; font-size: 1rem; } } .details-card__item { display: flex; gap: 4px; align-items: center; justify-content: space-between; } .details-card__item:not(:last-child) { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid hsl(var(--black) / .05); } .details-card__item .label { color: hsl(var(--black) / .6); font-weight: 500; font-size: 0.9125rem; } .details-card__item .value { color: hsl(var(--black)); font-weight: 500; font-size: 0.9125rem; text-align: right; } .qr-code-wrapper { display: flex; flex-direction: column; } .qr-code-wrapper .img { height: 80px; width: 80px; object-fit: cover; border-radius: 8px; padding: 8px; border: 1px solid hsl(var(--border-color)); } .qr-code-wrapper .img img { border-radius: 4px; } @media (max-width: 1399px) { .details-card__item .label { font-size: 0.875rem; } .details-card__item .value { font-size: 0.875rem; } } .details-card.style-two .details-card__title { background-color: transparent; } .details-card.style-two .details-card__item { padding-bottom: 0; border: 0; } .details-card.style-two .details-card__item.total { border-top: 1px solid hsl(var(--black) / .1); padding-top: 16px; } /* qr code container css start here */ .qr-code-container { display: flex; gap: 40px; } .qr-code-container .qr-code { width: 150px; } .qr-code-container .installation-step { width: calc(100% - 150px); } @media (max-width:767px) { .qr-code-container { flex-direction: column; gap: 20px; justify-content: center; align-items: center; } .qr-code-container .installation-step { width: 100%; padding-left: 20px; } } .qr-code-container .steps-title { margin-bottom: 0px; font-size: 16px; font-weight: 500; } .qr-code-container .steps-desc { font-size: 14px; } .qr-code-container .steps { display: flex; flex-direction: column; gap: 10px; list-style: auto; } .qr-code-container .steps li::marker { color: hsl(var(--black)) !important; } /* qr code container css end here */ /* top up css start here */ .topup-card-container { max-height: 684px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: hsl(var(--black)/0.1) hsl(var(--black)/0.05); padding: 0px 12px; } .topup-card { cursor: pointer; } .topup-card .card-title { font-size: 1.125rem; } .topup-card .card-price { color: hsl(var(--black)); font-weight: 700; } .topup-card__input { --size: 20px; width: var(--size); height: var(--size); border-radius: 50%; display: block; flex-shrink: 0; border: 2px solid hsl(var(--border-color)); -webkit-transition: all linear 0.3s; transition: all linear 0.3s; position: relative; margin-top: 4px; position: absolute; top: 12px; right: 12px; } .topup-card__input::before { content: "\f00c"; width: var(--size); height: var(--size); font-family: "Font Awesome 6 Free"; font-weight: 900; border-radius: inherit; position: absolute; inset: 0; margin: auto; transition: all 0.1s; transform: scale(0); transform-origin: center; background-color: transparent; display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--white)); font-size: calc(var(--size) * 0.6); } .topup-card:has(input:checked) { border-color: hsl(var(--base)); background-color: hsl(var(--base) / 0.05); } .topup-card:has(input:checked) .topup-card__input::before { background-color: hsl(var(--base)); transform: scale(1); } .topup-card:has(input:checked) .card-price { color: hsl(var(--base)); } .country-code-avatar { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border: 1px solid #3d3d3d; border-radius: 50px; background: transparent; color: hsl(var(--black)); } .coverage-area__scarch { width: 800px; } .coverage-area .banner-content__search { max-width: 800px; margin: 0 auto; } /* ====================== Range Slider CSS Start ====================== */ .custom--range__content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; 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) / 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(--base)) !important; border: 2px solid hsl(var(--white)) !important; border-radius: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 35px !important; } /* ====================== Select2 CSS Start ======================== */ .select2-wrapper { --border-radius: 8px; --height: 50px; --select2-border: hsl(var(--border-color)); position: relative; } .select2+.select2-container { border: 1px solid var(--select2-border) !important; border-radius: var(--border-radius); width: 100% !important; height: 50px; } .select2+.select2-container:has(.select2-dropdown) { border-color: transparent !important; } .select2+.select2-container .select2-selection__rendered { line-height: var(--height); padding-left: 0px !important; } .select2+.select2-container .select2-selection--single { height: var(--height); } .select2+.select2-container .select2-selection { border: 0; background-color: transparent; width: 100%; } .select2+.select2-container .selection { width: 100%; } .select2+.select2-container .select2-selection__arrow { top: 50% !important; right: 12px !important; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: transparent; border-radius: inherit; height: calc(var(--height) - 10px); width: calc(var(--height) - 10px); } .select2+.select2-container .select2-selection__arrow::after { position: absolute; content: "\f078"; inset: 0; font-weight: 900; font-family: "Font Awesome 6 Free"; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.2s; transition: all 0.2s; } .select2+.select2-container .select2-selection__arrow b { border: 0; } .select2-container--open:has(.select2-dropdown--above) { margin-top: -12px; } .select2-container--open .select2-dropdown { border: 1px solid var(--select2-border) !important; border-radius: var(--border-radius) !important; overflow: hidden; } .select2-container--open .select2-dropdown--above { margin-bottom: 10px; } .select2-search__field { border-radius: var(--border-radius); border: 1px solid var(--select2-border) !important; } .select2-search__field:focus { outline: 0; border-color: hsl(var(--base)) !important; } .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: hsl(var(--base)); } .select2-container--below.select2-container--open .select2-selection__arrow::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .service-details__image { border-radius: 16px; } .service-details__title { font-weight: 700; color: hsl(var(--black)); margin-top: 32px; } .service-details__desc { font-size: 16px; font-weight: 400; padding-bottom: 32px; } .service-details__desc-bottom { font-size: 16px; font-weight: 400; padding-bottom: 32px; } .service-details__left-image { border-radius: 16px; margin-right: 18px; } @media screen and (max-width: 1399px) { .service-details__left-image { width: 430px; } } @media screen and (max-width: 1199px) { .service-details__left-image { width: 340px; } } @media screen and (max-width: 767px) { .service-details__left-image { width: 228px; } } @media screen and (max-width: 374px) { .service-details__left-image { margin-bottom: 20px; } } .service-details__right-image { border-radius: 16px; } @media screen and (max-width: 1399px) { .service-details__right-image { width: 236px; } } @media screen and (max-width: 1199px) { .service-details__right-image { width: 186px; } } @media screen and (max-width: 767px) { .service-details__right-image { width: 125px; } } .service-details__desc-top { padding-top: 32px; font-size: 16px; font-weight: 400; } .sim-replacement { padding-top: 32px; } .sim-replacement__title { font-size: 24px; font-weight: 700; color: hsl(var(--black)); } .sim-replacement__desc { font-size: 16px; font-weight: 400; padding-bottom: 24px; } .sim-replacement__list { font-size: 18px; font-weight: 500; margin-bottom: 16px; color: hsl(var(--black)); } @media screen and (max-width: 575px) { .sim-replacement__list { font-size: 16px; } } .main-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 1399px) { .main-list { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (max-width: 991px) { .processing-time { margin-bottom: 32px; } } .processing-time__title { font-size: 24px; font-weight: 700; color: hsl(var(--black)); } .processing-time__table { overflow-x: auto; } .processing-time__table table { min-width: 650px; } .filter { position: relative; } .filter-bar { position: absolute; top: -2px; right: -2px; z-index: 2; -webkit-filter: drop-shadow(-4px 0px 24px hsl(var(--black) / 0.1)); filter: drop-shadow(-4px 0px 24px hsl(var(--black) / 0.1)); background-color: hsl(var(--white)); width: 410px; border-radius: 12px; text-align: left; visibility: hidden; opacity: 0; -webkit-transition: all linear 0.3s; transition: all linear 0.3s; } @media screen and (max-width: 575px) { .filter-bar { width: 286px; } } .filter-bar.show { visibility: visible; opacity: 1; } .filter-wrapper { padding: 30px; } .filter-wrapper__top-title { color: hsl(var(--black)) !important; } .filter-wrapper__title { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: hsl(var(--black)) !important; } .filter-wrapper .form-check-label { color: hsl(var(--body-color)); font-size: 16px !important; font-weight: 400; } .filter-wrapper__close { color: hsl(var(--black)); background-color: hsl(var(--heading-color)); color: hsl(var(--black)); padding: 0px 4px; border-radius: 6px; } .filter-wrapper__close:hover { color: hsl(var(--black)); } .filter-item { border-bottom: 1px solid hsl(var(--border-color)); padding-bottom: 20px; padding-top: 20px; } .filter-btn { background-color: hsl(var(--base)); padding: 7px 20px; border-radius: 10px; margin-top: 40px; color: hsl(var(--white)); font-size: 14px; font-weight: 800; } .resat-text { color: hsl(var(--base)); border-bottom: 1px solid hsl(var(--base)); margin-left: 35px; font-size: 14px; } /* ====================== plan Start ======================*/ .choose-thumb { margin-top: 50px; } .choose-plan-switch__search-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .choose-plan-switch__inner-bar { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-radius: 8px; border: 1px solid hsl(var(--border-color)); background-color: hsl(var(--heading-color)); gap: 12px; } .form-check-label__title-text { color: hsl(var(--base)) !important; } .form-check-input__switch { border-radius: 3px; background-image: none; position: relative; -webkit-box-shadow: none; box-shadow: none; border: 0; --bs-form-check-bg: transparent !important; padding: 10px !important; margin-left: 0; margin-bottom: 5px; border-radius: 40px; width: 50px; height: 29px; cursor: pointer; } .form-check-input__switch::before { position: absolute; content: ""; width: 12px; height: 12px; background-color: hsl(var(--base)) !important; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 2px; left: 8px; border-radius: 50%; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .form-check-input__switch::after { content: ""; background: transparent; border: 4px solid hsl(var(--base)) !important; width: 50px; height: 29px; position: absolute; border-radius: 50px; top: 0; left: 0; } .form-check-input__switch:checked { background-color: hsl(var(--white)) !important; border-color: hsl(var(--white)) !important; -webkit-box-shadow: none; box-shadow: none; } .form-check-input__switch:checked[type="checkbox"] { background-image: none; } .form--search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid hsl(var(--border-color)); border-radius: 4px; padding: 5px 12px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .form--search__input { border: none; outline: none; font-size: 16px; padding: 5px; background: transparent; width: 100%; } @media screen and (max-width: 374px) { .form--search__input { max-width: 165px; } } .form--search__button { background: none; border: none; cursor: pointer; font-size: 18px; } .filter { border: 1px solid hsl(var(--border-color)); display: inline-block; padding: 10px 12px; border-radius: 4px; margin-left: 16px; } /* ====================== plan End ======================*/ .search-box__main-box { background-color: hsl(var(--heading-color)); padding: 24px; border-radius: 0px 0px 12px 12px; } @media screen and (max-width: 1199px) { .search-box__main-box { padding: 8px; } } @media screen and (max-width: 991px) { .search-box__main-box { padding: 20px; } } .refer-section .section-heading__title { max-width: 470px; } .refer-section__inner { position: relative; padding: 100px 32px 32px 32px; border-radius: 32px; overflow: hidden; background-color: hsl(var(--section-bg)); } @media screen and (max-width: 767px) { .refer-section__inner { padding: 50px 20px 20px 20px; } } .refer-section__inner::before { --size: 140px; content: ""; height: var(--size); width: var(--size); border: 24px solid hsl(var(--base)); position: absolute; top: calc((var(--size) * 0.2285714286) * -1); right: calc((var(--size) * 0.2285714286) * -1); border-radius: 50%; } @media screen and (max-width: 575px) { .refer-section__inner::before { --size: 120px; } } .refer-thumb { position: relative; width: 100%; margin-top: -68px; } @media screen and (max-width: 991px) { .refer-thumb { max-width: 100%; } } @media screen and (max-width: 767px) { .refer-thumb { margin-top: -40px; } } /* ====================== Refer Section End ====================== */ /* ====================== Refer Process Section Start ==================== */ .refer-process-item { position: relative; } .refer-process-item__image { width: 100%; display: block; object-fit: cover; border-radius: clamp(0.9375rem, 0.7029rem + 1.1728vw, 1.875rem); } .refer-process-item__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; padding: 24px 32px; background-color: hsl(var(--white)); border: 1px solid hsl(var(--border-color)); -webkit-box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; border-radius: clamp(0.9375rem, 0.7029rem + 1.1728vw, 1.875rem); position: absolute; left: 0; right: 0; bottom: 0; } @media screen and (max-width: 1399px) { .refer-process-item__content { padding: 16px 24px; } } .refer-process-item__count { --size: 56px; width: var(--size); height: var(--size); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(var(--size) * 0.5); color: hsl(var(--white)); background-color: hsl(var(--base)); text-align: center; flex-shrink: 0; } @media screen and (max-width: 1199px) { .refer-process-item__count { --size: 48px; } } .refer-process-item__title { margin-bottom: 0; } /* ====================== Refer Process Section End ====================== */ /* ====================== Refer Program Section Start ==================== */ .refer-program .section-heading { margin-bottom: 16px; } .refer-program .section-heading__title { margin-bottom: 24px; } .refer-program .section-heading__desc { color: hsl(var(--heading-color)); font-weight: 600; } .refer-program-thumb { width: 100%; max-width: 560px; display: block; object-fit: cover; margin-top: -24px; } @media screen and (max-width: 991px) { .refer-program-thumb { max-width: 100%; margin-top: 0; } } .refer-program-content { max-width: 490px; } @media screen and (max-width: 991px) { .refer-program-content { max-width: 100%; } } /* ====================== Refer Program Section End ====================== */ /* ====================== Service Section Start ========================== */ .service-section { background-color: hsl(var(--section-bg)); } .service-card { background-color: hsl(var(--white)); border: 1px solid hsl(var(--border-color)); border-radius: 16px; padding: 32px; text-align: center; -webkit-transition: 0.3s linear; transition: 0.3s linear; display: block; height: 100%; } @media screen and (max-width: 767px) { .service-card { padding: 24px 16px; } } @media screen and (max-width: 575px) { .service-card { padding: 16px 12px; } } .service-card__icon { --size: 72px; width: var(--size); height: calc(var(--size) * 1.1111111111); -webkit-transition: 0.3s linear; transition: 0.3s linear; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; -webkit-mask-image: url("../images/icon/service-shape.png"); mask-image: url("../images/icon/service-shape.png"); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: hsl(var(--base)); position: relative; z-index: 1; } .service-card__icon img { width: calc(var(--size) * 0.5); height: calc(var(--size) * 0.5); object-fit: contain; -webkit-filter: invert(100%) brightness(1000%) contrast(100%); filter: invert(100%) brightness(1000%) contrast(100%); mix-blend-mode: lighten; } @media screen and (max-width: 767px) { .service-card__icon { --size: 56px; } } @media screen and (max-width: 575px) { .service-card__icon { --size: 48px; } } .service-card__content { margin-top: 24px; } @media screen and (max-width: 575px) { .service-card__content { margin-top: 16px; } } .service-card__title { color: hsl(var(--black)); -webkit-transition: 0.3s; transition: 0.3s; } @media screen and (max-width: 575px) { .service-card__title { margin-bottom: 8px; } } .service-card__desc { font-size: 16px; color: hsl(var(--body-color)); } @media screen and (max-width: 575px) { .service-card__desc { font-size: 14px; } } .service-card__desc:hover { color: hsl(var(--white)); } .service-card:hover { background-color: hsl(var(--base)); } .service-card:hover .service-card__icon { background-color: hsl(var(--white)); } .service-card:hover .service-card__icon img { -webkit-filter: unset; filter: unset; mix-blend-mode: unset; } .service-card:hover .service-card__title { color: hsl(var(--white)); } .service-card:hover .service-card__desc { color: hsl(var(--white)); } /* ====================== Service Section End ============================ */ /* ====================== Easier Section Start =========================== */ @media screen and (max-width: 991px) { .section-content { margin-left: 0px !important; } } .easier-section-content { max-width: 560px; margin-left: auto; } @media screen and (max-width: 991px) { .easier-section-content { max-width: 100%; margin-left: 0px; } } .easier-section__item { position: relative; text-align: center; } @media screen and (max-width: 991px) { .easier-section__item { margin-bottom: 24px; } } .easier-section__shape { height: 100%; max-width: 558px; width: 100%; background: hsl(var(--base-l-900)); border-radius: 20px; position: absolute; bottom: 0; left: 0; overflow: hidden; margin-right: 24px; } @media screen and (max-width: 1199px) { .easier-section__shape { max-width: 100%; } } @media screen and (max-width: 991px) { .easier-section__shape { margin-right: unset; } } .easier-section__shape::after { content: ""; height: 300px; width: 300px; border-radius: 50%; border: 43px solid hsl(var(--base)); position: absolute; bottom: -110px; left: -80px; } @media screen and (max-width: 374px) { .easier-section__shape::after { height: 200px; width: 200px; border: 35px solid hsl(var(--base)); } } .easier-section__image { width: 100%; max-width: 660px; object-fit: cover; display: block; } .easier-section__point { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 69px; } @media screen and (max-width: 991px) { .easier-section__point { margin-left: 0px !important; } } @media screen and (max-width: 424px) { .easier-section__point { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } } .easier-section__alart { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; background-color: hsl(var(--white)); border: 1px solid hsl(var(--border-color)); -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; border-radius: 10px; max-width: 212px; padding: 16px; position: absolute; top: 41px; right: 50%; -webkit-transform: translateX(150%); transform: translateX(150%); } @media screen and (max-width: 1199px) { .easier-section__alart { max-width: 185px; top: 34px; } } @media screen and (max-width: 991px) { .easier-section__alart { max-width: 212px; top: 34px; } } @media screen and (max-width: 767px) { .easier-section__alart { max-width: 192px; } } @media screen and (max-width: 575px) { .easier-section__alart { max-width: 142px; padding: 8px; } } @media screen and (max-width: 374px) { .easier-section__alart { max-width: 120px; } } .easier-section__list { font-size: 18px; color: hsl(var(--body-color)); font-weight: 500; margin-bottom: 18px; } @media screen and (max-width: 575px) { .easier-section__list { font-size: 14px !important; } } .easier-section__text { font-size: 20px; font-weight: 500; color: hsl(var(--black)); text-align: left; } @media screen and (max-width: 767px) { .easier-section__text { font-size: 16px; width: 90px; } } @media screen and (max-width: 575px) { .easier-section__text { font-size: 14px; width: 90px; } } .easier-section__icon-shape { background-color: hsl(var(--base-l-900)); padding: 10px 9px; border-radius: 50%; } @media screen and (max-width: 374px) { .easier-section__icon-shape { height: 29px; width: 35px; } } @media screen and (max-width: 374px) { .easier-section__icons { height: 20px; width: 20px; position: absolute; top: 15px; left: 13px; } } /* ====================== Easier Section End ============================ */ /* ====================== Best Pricing Section Start ===================== */ .best-pricing-section__thumb { width: 100%; max-width: 600px; display: block; object-fit: cover; } /* ====================== Best Pricing Section End ======================= */ /* ====================== Our Guarantee Section Start ===================== */ .our-guarantee__thumb { width: 100%; max-width: 600px; object-fit: cover; display: block; } /* ====================== Our Guarantee Section End ======================= */ /* ====================== Choose Plan Section Start ======================= */ .choose-plan-item-container { max-height: 500px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: hsl(var(--black)/0.1) hsl(var(--black)/0.05); padding: 0px 12px; } .choose-plan-item { width: 100%; height: 100%; position: relative; padding: 24px; border: 1px solid hsl(var(--border-color)); border-radius: 8px; display: flex; flex-direction: column; cursor: pointer; -webkit-transition: all linear 0.3s; transition: all linear 0.3s; } .choose-plan-item__input { --size: 24px; width: var(--size); height: var(--size); border-radius: 50%; display: block; flex-shrink: 0; border: 2px solid hsl(var(--border-color)); -webkit-transition: all linear 0.3s; transition: all linear 0.3s; position: relative; margin-top: 4px; position: absolute; top: 12px; right: 12px; } .choose-plan-item__input::before { content: "\f00c"; width: var(--size); height: var(--size); font-family: "Font Awesome 6 Free"; font-weight: 900; border-radius: inherit; position: absolute; inset: 0; margin: auto; transition: all 0.1s; transform: scale(0); transform-origin: center; background-color: transparent; display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--white)); font-size: calc(var(--size) * 0.6); } .choose-plan-item__body { flex: 1 1 auto; } .choose-plan-item__capacity { font-size: 1rem; font-weight: 600; color: hsl(var(--gray-d-500)); display: block; } .choose-plan-item__validity { font-size: 0.875rem; font-weight: 400; color: hsl(var(--gray-d-200)); display: block; } .choose-plan-item__package-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .choose-plan-item__package { font-size: 0.875rem; font-weight: 400; color: hsl(var(--gray-d-200)); display: flex; align-items: center; gap: 4px; } .choose-plan-item__price { font-size: 1.125rem; font-weight: 600; color: hsl(var(--gray-d-500)); display: block; margin-top: 6px; margin-bottom: 12px; } .choose-plan-item:hover, .choose-plan-item:focus-within { background-color: hsl(var(--gray-l-500)); } .choose-plan-item:has(input:checked) { border-color: hsl(var(--base)); background-color: hsl(var(--base) / 0.05); } .choose-plan-item:has(input:checked) .choose-plan-item__input::before { background-color: hsl(var(--base)); transform: scale(1); } .choose-plan-info { display: flex; gap: 16px; } .choose-plan-info__flag { --size: 56px; width: var(--size); height: var(--size); border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: hsl(var(--gray-l-500)); flex-shrink: 0; } .choose-plan-info__flag img { width: 60%; height: 60%; border-radius: inherit; object-fit: cover; display: block; flex-shrink: 0; } .choose-plan-info__content { flex-grow: 1; } .choose-plan-info__title { margin-bottom: 4px; } .choose-plan-info__desc { font-size: 0.875rem; font-weight: 400; color: hsl(var(--gray-d-100)); } .choose-plan-feat { padding: 12px; background-color: hsl(var(--base-l-900) / 0.5); border-radius: 8px; } .choose-plan-feat__item { display: flex; align-items: center; justify-content: space-between; } .choose-plan-feat__item:not(:last-child) { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid hsl(var(--border-color)); } .choose-plan-feat__item .label, .choose-plan-feat__item .value { font-size: 0.875rem; font-weight: 400; } .choose-plan-feat__item .label { color: hsl(var(--gray-d-200)); } .choose-plan-feat__item .value { font-size: 1rem; font-weight: 600; color: hsl(var(--gray-d-400)); } .choose-plan-meta {} .choose-plan-meta__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid hsl(var(--border-color)); } .choose-plan-meta__item .label, .choose-plan-meta__item .value { font-size: 0.875rem; } .choose-plan-meta__item .label { color: hsl(var(--gray-d-200)); } .choose-plan-meta__item .value { font-weight: 400; color: hsl(var(--gray-d-400)); } .choose-plan-meta__item .value.highlighted { font-size: 1rem; font-weight: 600; color: hsl(var(--gray-d-400)); } .choose-plan-sidebar { padding: 24px; gap: 24px; display: flex; flex-direction: column; border-radius: 8px; border: 1px solid hsl(var(--border-color)); position: sticky; top: 100px; } .choose-plan-sidebar__body { flex: 1 1 auto; } /* ====================== Choose Plan Section End ========================= */ .client-section { background-color: hsl(var(--black)/0.01); } .client-slider__slide { text-align: center; } .client-slider__logo { width: 100%; max-width: 150px; object-fit: cover; display: block; border: 1px solid hsl(var(--border-color)); padding: 16px; border-radius: 8px; margin-inline: auto; background-color: hsl(var(--white)); } @media screen and (max-width: 991px) { .client-slider__logo { max-width: 120px; padding: 12px; } } @media screen and (max-width: 424px) { .client-slider__logo { max-width: 100%; padding: 16px; } } .destination-top { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: 16px 24px; } .destination-top:not(:last-child) { margin-bottom: 32px; } @media screen and (max-width: 575px) { .destination-top:not(:last-child) { margin-bottom: 24px; } } .destination-top .esim-plan-tab { flex-grow: 1; padding: 6px; min-width: fit-content; max-width: 600px; margin-inline: unset; margin-bottom: 0px; } .destination-top .esim-plan-tab__btn { padding: 12px; } @media screen and (max-width: 1199px) { .destination-top .esim-plan-tab { max-width: 500px; } } @media screen and (max-width: 991px) { .destination-top .search-box { flex-grow: 1; max-width: 100%; } .destination-top .esim-plan-tab { max-width: 100%; min-width: unset; } } .wotk-process_item { background-color: hsl(var(--base-l-900)); border-radius: 30px; } .wotk-process_item__image { text-align: center; padding-top: 36px; } .wotk-process_item__content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: hsl(var(--white)); border: 1px solid hsl(var(--border-color)); -webkit-box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; padding: 24px 30px; border-radius: inherit; } @media screen and (max-width: 1399px) { .wotk-process_item__content { padding: 13px; border-radius: inherit; } } @media screen and (max-width: 575px) { .wotk-process_item__content { gap: 8px; border-radius: inherit; } } .wotk-process_item__counts { color: hsl(var(--white)); font-size: 36px; font-weight: 800; height: 53px; width: 53px; background-color: hsl(var(--base)); text-align: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1199px) { .wotk-process_item__counts { height: 50px; width: 50px; font-size: 32px; } } @media screen and (max-width: 767px) { .wotk-process_item__counts { height: 40px; width: 40px; font-size: 24px; } } @media screen and (max-width: 575px) { .wotk-process_item__counts { height: 32px; width: 32px; font-size: 18px; } } .wotk-process_item__desc { font-size: 18px; font-weight: 700; color: hsl(var(--heading-color)); } @media screen and (max-width: 1399px) { .wotk-process_item__desc { font-size: 16px; } } @media screen and (max-width: 1199px) { .wotk-process_item__desc { font-size: 14px; } } .search-box { position: relative; } .search-box-field { display: flex; align-items: center; border-radius: 10px; border: 1px solid hsl(var(--border-color) / 0.8); background-color: hsl(var(--white)); gap: 12px; transition: 0.2s ease; padding-right: 16px; } @media screen and (max-width: 575px) { .search-box-field { padding: 12px; } } .search-box-field:focus-within { border-color: hsl(var(--base)); } .search-box-field:focus-within .search-box-field__icon { color: hsl(var(--base)); } .search-box-field__icon { font-size: 32px; flex-shrink: 0; color: hsl(var(--black) / 0.5); line-height: 100%; display: inline-flex; align-items: center; justify-content: center; } .search-box-field__input { width: 100%; border: none; font-size: 1rem; padding: 16px; font-weight: 400; color: hsl(var(--black)); background-color: transparent; } @media screen and (max-width: 575px) { .search-box-field__input { padding: 0px; } } .search-box-field__input::placeholder { color: hsl(var(--black) / 0.5); } .search-box-field__input:focus, .search-box-field__input:focus-visible { outline: none; box-shadow: none; } .search-box-result { visibility: hidden; opacity: 0; max-height: 300px; border-radius: 10px; border: 1px solid hsl(var(--border-color) / 0.8); background-color: hsl(var(--white)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: hsl(var(--black) / 0.05) hsl(var(--black) / 0.05); position: absolute; top: 100%; left: 0; right: 0; z-index: 4; padding: 16px 24px; transition: 0.5s ease; } @media screen and (max-width: 575px) { .search-box-result { padding: 12px 20px; } } .search-box.show .search-box-result { opacity: 1; visibility: visible; top: calc(100% + 12px); } .search-box-list__item:has(.label) { margin-inline: -8px; margin-block: 8px; } .search-box-list__item:has(.label):is(:first-child) { margin-block-start: 0px; } .search-box-list__item:not(:has(.label)) { display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin-inline: -24px; } @media screen and (max-width: 575px) { .search-box-list__item:not(:has(.label)) { padding: 8px 12px; margin-inline: -20px; } } .search-box-list__item:not(:has(.label))::after { content: "\f061"; flex-shrink: 0; font-family: "Line Awesome Free"; font-size: 18px; font-weight: 900; color: hsl(var(--base)); margin-left: auto; transition: 0.2s linear; } .search-box-list__item:not(:has(.label)):hover, .search-box-list__item:not(:has(.label)):focus { outline: none; box-shadow: none; background-color: hsl(var(--base) / 0.1); } .search-box-list__item:not(:has(.label)):hover .title, .search-box-list__item:not(:has(.label)):focus .title { color: hsl(var(--base)); } .search-box-list__item .flag { --size: 24px; width: var(--size); height: var(--size); border-radius: 50%; object-fit: cover; flex-shrink: 0; } .search-box-list__item .title { color: hsl(var(--black)); font-size: 16px; font-weight: 600; margin-bottom: 0px; } .search-box-list__item .label { font-size: 16px; color: hsl(var(--base)); margin-bottom: 0px; } @media screen and (max-width: 575px) { .search-box-list__item .flag { --size: 20px; } .search-box-list__item .title { font-size: 14px; } .search-box-list__item .label { font-size: 14px; } } .esim-plan-tab { max-width: 800px; display: flex; align-items: center; border: 1px solid hsl(var(--border-color)); padding: 8px; border-radius: 10px; margin-bottom: 24px; margin-inline: auto; } @media screen and (max-width: 767px) { .esim-plan-tab { padding: 6px; } } @media screen and (max-width: 575px) { .esim-plan-tab { padding: 4px; border-radius: 8px; } } .esim-plan-tab__btn { font-size: 18px; font-weight: 500; flex: 1 1 auto; padding: 16px; border-radius: 8px; } .esim-plan-tab__btn:hover, .esim-plan-tab__btn:focus { color: hsl(var(--base)); } @media screen and (max-width: 767px) { .esim-plan-tab__btn { font-size: 16px; padding: 12px; } } @media screen and (max-width: 575px) { .esim-plan-tab__btn { font-size: 14px; padding: 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } } .esim-plan-tab__btn.active { color: hsl(var(--white)); background-color: hsl(var(--base)); } .esim-plan-tab-content>.tab-pane { position: relative; z-index: 1; } .esim-plan-tab-content>.tab-pane:not(:empty)::after { content: ""; width: 95.0617284%; height: 95.0617284%; display: inline-block; position: absolute; inset: 0; margin: auto; background-image: url("../images/thumbs/globe.png"); background-repeat: no-repeat; background-size: contain; background-position: center; z-index: -1; } .esim-plan-card { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; border: 1px solid hsl(var(--border-color) / 0.5); padding: 24px 16px; border-radius: 12px; background-color: hsl(var(--black) / 0.05); -webkit-transition: 0.3s; transition: 0.3s; gap: 16px; backdrop-filter: blur(5px); position: relative; } .esim-plan-card::after { content: "\f061"; flex-shrink: 0; font-family: "Line Awesome Free"; font-size: 32px; font-weight: 900; color: hsl(var(--base)); } @media screen and (max-width: 767px) { .esim-plan-card { gap: 8px; padding: 16px 12px; } .esim-plan-card::after { --size: 28px; } } .esim-plan-card:hover, .esim-plan-card:focus { outline: none; border-color: hsl(var(--base)); background-color: hsl(var(--base) / 0.1); } .esim-plan-card__img { --size: 52px; width: var(--size); height: var(--size); border-radius: 50%; flex-shrink: 0; object-fit: cover; } @media screen and (max-width: 1199px) { .esim-plan-card__img { --size: 48px; } } @media screen and (max-width: 1199px) { .esim-plan-card__img { --size: 40px; } } .esim-plan-card__content { flex-grow: 1; } .esim-plan-card__title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: hsl(var(--black)); margin-bottom: 8px; } @media screen and (max-width: 767px) { .esim-plan-card__title { margin-bottom: 6px; font-size: clamp(1rem, 0.9404rem + 0.2981vw, 1.125rem); } } .esim-plan-card__price { font-size: 16px; font-weight: 500; color: hsl(var(--body-color)); } @media screen and (max-width: 767px) { .esim-plan-card__price { font-size: 14px; } } .esim-plan-card2 { height: 100%; display: block; border: 1px solid hsl(var(--border-color) / 0.5); padding: 24px 16px; border-radius: 12px; background-color: hsl(var(--black) / 0.05); -webkit-transition: 0.3s; transition: 0.3s; gap: 16px; backdrop-filter: blur(5px); position: relative; } .esim-plan-card2:hover, .esim-plan-card2:focus { outline: none; border-color: hsl(var(--base)); background-color: hsl(var(--base) / 0.1); } .esim-plan-card2__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .esim-plan-card2__title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: hsl(var(--black)); line-height: 100%; margin-bottom: 4px; } @media screen and (max-width: 767px) { .esim-plan-card2__title { margin-bottom: 6px; font-size: clamp(1rem, 0.9404rem + 0.2981vw, 1.125rem); } } .esim-plan-card2__plan { font-size: 14px; font-weight: 500; color: hsl(var(--base)); } .esim-plan-card2__icon { color: hsl(var(--base)); font-size: 32px; } .esim-plan-card2__map { width: 100%; max-width: 200px; object-fit: cover; display: block; margin-inline: auto; margin-top: 16px; } .flex-center, .choose-plan-switch .form--switch { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-between { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .esim-qr-img { width: 180px; height: 180px; display: block; object-fit: cover; margin-inline: auto; border: 1px solid hsl(var(--border-color)); padding: 16px; border-radius: 8px; margin-top: 16px; } .icon-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .icon-list-item { display: flex; align-items: center; gap: 12px; border-radius: 8px; border: 1px solid hsl(var(--border-color)); padding: 12px; } .icon-list-item__icon { --size: 32px; width: var(--size); height: var(--size); display: block; object-fit: cover; flex-shrink: 0; } .icon-list-item__title { font-weight: 500; margin-bottom: 0px; } @media screen and (max-width: 1199px) { .icon-list { gap: 16px; } .icon-list-item__title { font-size: 1rem; } } @media screen and (max-width: 575px) { .icon-list { gap: 12px; } .icon-list-item { padding: 12px 8px; gap: 8px; } .icon-list-item__title { font-size: 0.875rem; } .icon-list-item__icon { --size: 24px; } } .info-list__item { display: flex; align-items: flex-start; gap: 8px; } .info-list__item:not(:last-child) { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid hsl(var(--border-color)); } .info-list__label, .info-list__value { font-size: 0.875rem; } .info-list__label { width: 150px; font-weight: 400; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: space-between; color: hsl(var(--gray-d-200)); } .info-list__label::after { content: ":"; display: inline-block; } .info-list__value { flex-grow: 1; font-weight: 500; color: hsl(var(--gray-d-500)); } @media screen and (max-width: 991px) { .about-us .underline-word svg { bottom: -10px; } } @media screen and (max-width: 575px) { .about-us .underline-word svg { bottom: -8px; } } .about-us-statistics { --gap: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; align-items: center; justify-content: space-between; gap: var(--gap); } .about-us-statistics-item { position: relative; flex: 1 1 calc(33.3333333333% - var(--gap)); display: flex; align-items: center; gap: 12px; } .about-us-statistics-item__icon { --size: 48px; width: var(--size); height: var(--size); border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: hsl(var(--gray-l-400) / 0.5); position: relative; z-index: 1; flex-shrink: 0; } .about-us-statistics-item__icon img { width: 50%; height: 50%; display: block; object-fit: cover; } .about-us-statistics-item__content { flex-grow: 1; } .about-us-statistics-item__title { color: hsl(var(--gray-d-400)); line-height: 100%; margin-bottom: 0px; } .about-us-statistics-item__desc { font-size: 14px; font-weight: 400; color: hsl(var(--gray-d-300)); } @media screen and (max-width: 1199px) { .about-us-statistics-item { gap: 8px; } .about-us-statistics-item__icon { --size: 40px; } .about-us-statistics-item__desc { font-size: 14px; } } @media screen and (max-width: 575px) { .about-us-statistics { gap: 8px; margin-top: 16px; } .about-us-statistics-item__icon { --size: 32px; } .about-us-statistics-item__title { font-size: clamp(1rem, 0.9404rem + 0.2981vw, 1.125rem); } .about-us-statistics-item__desc { font-size: 12px; } } @media screen and (max-width: 424px) { .about-us-statistics-item { flex-direction: column; } .about-us-statistics-item__content { text-align: center; } } .about-us__thumb { width: 100%; max-width: 660px; object-fit: cover; display: block; margin-left: auto; } @media screen and (max-width: 991px) { .about-us__thumb { margin-left: auto; margin-right: auto; } } .how-it-works .section-heading__desc { max-width: 60%; } @media screen and (max-width: 1399px) { .how-it-works .section-heading__desc { max-width: 70%; } } @media screen and (max-width: 1199px) { .how-it-works .section-heading__desc { max-width: 100%; } } .how-it-works .underline-word svg { bottom: -6px; } .how-it-works-tab { max-width: 90%; } @media screen and (max-width: 1399px) { .how-it-works-tab { max-width: 100%; } } .how-it-works-tab-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px; border-radius: 10px; transition: 0.2s ease; } .how-it-works-tab-item:hover { background-color: hsl(var(--black) / 0.05); } .how-it-works-tab-item:not(:last-child) { margin-bottom: 16px; } .how-it-works-tab-item__icon { --size: 56px; width: var(--size); height: var(--size); border-radius: 10px; color: hsl(var(--base)); font-size: calc(var(--size) * 0.6); font-weight: 600; border: 1px solid hsl(var(--border-color) / 0.5); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.2s ease; } @media screen and (max-width: 1199px) { .how-it-works-tab-item__icon { --size: 40px; } } .how-it-works-tab-item__content { flex-grow: 1; } .how-it-works-tab-item__title { color: hsl(var(--black)); margin-bottom: 8px; line-height: 150%; } .how-it-works-tab-item__desc { font-size: 1rem; font-weight: 400; } @media screen and (max-width: 1199px) { .how-it-works-tab-item__desc { font-size: 0.875rem; } } .how-it-works-tab-item.active { background-color: hsl(var(--base)); } .how-it-works-tab-item.active .how-it-works-tab-item__title { color: hsl(var(--white)); } .how-it-works-tab-item.active .how-it-works-tab-item__icon { border-color: hsl(var(--white)); background-color: hsl(var(--white)); } .how-it-works-tab-item.active .how-it-works-tab-item__desc { color: hsl(var(--white) / 0.8); } .how-it-works__thumb { width: 100%; height: 100%; display: block; object-fit: cover; margin-inline: auto; border-radius: clamp(0.75rem, 0.4685rem + 1.4073vw, 1.875rem); } .how-it-works-tab-content, .how-it-works-tab-content>.tab-pane { height: 100%; } .choose-us-section { position: relative; overflow: hidden; z-index: 1; } .choose-us-card { height: 100%; background-color: hsl(var(--white)); border-radius: 8px; overflow: hidden; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } .choose-us-card__thumb { max-height: 300px; overflow: hidden; position: relative; } .choose-us-card__thumb-inner { width: 100%; height: 100%; } .choose-us-card__thumb-inner img { -webkit-transition: 1s; transition: 1s; background-size: cover; width: 100%; } .choose-us-card__thumb-inner .image1 { -webkit-transform: translatex(50%) scalex(1); transform: translatex(50%) scalex(1); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .choose-us-card__thumb-inner .image2 { -webkit-transform: translatex(0%) scalex(1); transform: translatex(0%) scalex(1); opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); position: absolute; top: 0; left: 0; bottom: 0; right: 0; -o-object-fit: cover; object-fit: cover; } .choose-us-card:hover .choose-us-card__thumb-inner .image1 { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .choose-us-card:hover .choose-us-card__thumb-inner .image2 { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .choose-us-card__content { padding: 24px; } .choose-us-card__title { margin-bottom: 10px; font-weight: 600; } .choose-us-card__desc { color: hsl(var(--heading-color)); } .choose-us-slider .slick-list { margin-bottom: -15px; padding-bottom: 15px; } .choose-us-wrapper__bottom { text-align: center; margin-top: 50px; } @media screen and (max-width: 767px) { .choose-us-wrapper__bottom { margin-top: 30px; } } .choose-us-wrapper__bottom .title { margin-bottom: 24px; } @media screen and (max-width: 767px) { .choose-us-wrapper__bottom .title { margin-bottom: 16px; } } .popular-section { position: relative; z-index: 1; overflow: hidden; } .popular-item { background-color: hsl(var(--white)); border-radius: 8px; overflow: hidden; height: 100%; -webkit-box-shadow: var(--box-shadow); box-shadow: var(--box-shadow); } .popular-item__thumb { max-height: 300px; overflow: hidden; position: relative; } .popular-item__thumb-link { width: 100%; height: 100%; } .popular-item__thumb-link img { -webkit-transition: 1s; transition: 1s; background-size: cover; width: 100%; } .popular-item__thumb-link .image1 { -webkit-transform: translatex(50%) scalex(1); transform: translatex(50%) scalex(1); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .popular-item__thumb-link .image2 { -webkit-transform: translatex(0%) scalex(1); transform: translatex(0%) scalex(1); opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); position: absolute; top: 0; left: 0; bottom: 0; right: 0; -o-object-fit: cover; object-fit: cover; } .popular-item:hover .popular-item__thumb-link .image1 { -webkit-transform: translatex(0) scalex(1); transform: translatex(0) scalex(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .popular-item:hover .popular-item__thumb-link .image2 { -webkit-transform: translatex(-50%) scalex(2); transform: translatex(-50%) scalex(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .popular-item__content { padding: 24px; } @media screen and (max-width: 767px) { .popular-item__content { padding: 20px 16px; } } .popular-item__title { margin-bottom: 24px; } .popular-item__title .btn { font-weight: 600; } .popular-item__bottom { margin-top: 32px; } .popular-item .advantage-wrapper__title { font-weight: 600; color: hsl(var(--heading-color)); margin-bottom: 20px; } .popular-item .advantage-wrapper .value-list__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 12px; margin-bottom: 20px; } @media screen and (max-width: 767px) { .popular-item .advantage-wrapper .value-list__item { margin-bottom: 12px; } } .popular-item .advantage-wrapper .value-list__item:last-child { margin-bottom: 0; } .popular-item .advantage-wrapper .value-list__icon { color: hsl(var(--success)); } .content-wrapper { margin-bottom: 24px; } .content-wrapper__title { margin-bottom: 16px; font-weight: 600; } .content-wrapper:last-child { margin-bottom: 0; } .content-list__item { margin-bottom: 10px; font-size: 18px; font-weight: 600; color: hsl(var(--heading-color)); position: relative; padding-left: 20px; } @media screen and (max-width: 767px) { .content-list__item { font-size: 16px; margin-bottom: 8px; } } @media screen and (max-width: 424px) { .content-list__item { font-size: 14px; margin-bottom: 5px; } } .content-list__item::before { position: absolute; content: ""; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background-color: hsl(var(--black)); } .content-list.list-two .content-list__item { font-size: 16px; margin-bottom: 16px; color: hsl(var(--body-color)); font-weight: 400; } /*--------------------------------------- 2.23 Header Primary -----------------------------------------*/ .header-primary { padding: 16px 0; position: sticky; top: 0; left: 0; width: 100%; z-index: 1024; background: hsl(var(--dark-600)); } /*--------------------------------------- 2.24 App Nav -----------------------------------------*/ .app-nav { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 9999; background: hsl(var(--dark-600)); } @media screen and (min-width: 992px) { .app-nav { display: none; } } .app-nav__menu { --gap: 5px; } .app-nav__menu-link { display: block; text-align: center; } .app-nav__menu-link.active .app-nav__menu-icon { color: hsl(var(--base)); } .app-nav__menu-link-important-container { position: relative; width: 60px; height: 60px; z-index: 1; pointer-events: auto; display: flex; justify-content: center; } .app-nav__menu-link-important { width: 50px; height: 50px; display: grid; place-items: center; top: -23px; left: 0; position: relative; border: 3px solid hsl(var(--white)); border-radius: 50%; background: hsl(var(--dark-600)); font-size: 24px; color: hsl(var(--white)); } .app-nav__menu-link-important:hover { color: hsl(var(--white)); } .app-nav__menu-icon { display: block; font-size: 18px; line-height: 1; color: hsl(var(--light) / 0.9); } .app-nav__menu-icon i { font-size: 18px !important; } .app-nav__menu-icon img { height: 18px; width: 18px; } .app-nav__menu-text { display: block; font-size: 12px; color: hsl(var(--light) / 0.9); } .app-nav__drawer { position: absolute; transform: translateX(-100%); width: 300px; bottom: var(--nav-h); height: calc(100vh - (var(--header-h) + var(--nav-h))); padding: 20px 15px; background-color: hsl(var(--dark)); transition: all 0.3s linear; } .app-nav__drawer.active-sidebar { transform: translateX(0); } .app-nav__drawer-list { --gap: 0; } .app-nav__drawer-list li { border-bottom: 1px solid hsl(var(--light) / 0.1); } .app-nav__drawer-list li:last-child { border-bottom: none; } .app-nav__drawer-link { display: inline-flex; align-items: center; gap: 0.5rem; padding-top: 5px; padding-bottom: 5px; color: hsl(var(--light)); } .app-nav__drawer-link:hover { color: hsl(var(--base)); } .app-nav__drawer-icon { display: inline; color: hsl(var(--base)); } .app-nav__drawer-text { display: inline-block; font-size: 14px; letter-spacing: 0.03em; } /*--------------------------------------- 2.25 Odd List -----------------------------------------*/ .odd-list { width: 100%; transition: all 0.3s ease; padding-bottom: 60px; } @media screen and (min-width: 992px) { .odd-list { padding-bottom: 0; padding-top: 15px; } } .odd-list__item { padding: 10px 15px; border-radius: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.125); display: flex; flex-wrap: wrap; --gap: 0.2rem; justify-content: space-between; align-items: center; } .odd-list__item:last-child { border-bottom: none; } .odd-list__item-title { font-size: 0.875rem; } .odd-list__head { display: flex; align-items: center; gap: 0.8rem; padding: 15px; z-index: 8; border-top: 1px solid hsl(var(--light) / 0.1); border-bottom: 1px solid hsl(var(--light) / 0.1); background: linear-gradient(319deg, hsl(var(--base)) 0%, hsl(var(--dark))); justify-content: center; border-radius: 5px 5px; margin-bottom: 24px; } @media screen and (min-width: 992px) { .odd-list__head { position: relative; top: auto; border-radius: 10px 10px; } } .odd-list__body { margin-bottom: 15px; } @media screen and (min-width: 992px) { .odd-list__body { min-height: calc(100vh - 440px); } } .odd-list__team { display: flex; align-items: center; gap: 0.5rem; } .odd-list__team-name { font-size: 12px; color: hsl(var(--light)); } .odd-list__team-img { width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%; } .odd-list__team-img-is { border-radius: inherit; width: 100%; height: 100%; object-fit: cover; display: block; } .odd-list__team-divide { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border-radius: 3px; background: hsl(var(--light) / 0.1); font-size: 12px; color: hsl(var(--light)); } .odd-list__title { font-size: 18px; margin-bottom: 24px; } @media screen and (min-width: 992px) { .odd-list__title { margin-bottom: 16px; } } .flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .odd-list__btn { margin: 0; padding: 0; } .odd-list__btn .form-check-input { display: none; } .odd-list__btn .form-check-input:checked { color: hsl(var(--white)); } /*--------------------------------------- 2.26 Sports Category -----------------------------------------*/ .sports-category { position: sticky; background: hsl(var(--dark-600)); z-index: 9; top: var(--header-h); width: var(--left-side); height: calc(100vh - var(--header-h)); border-top: none; border-bottom: none; border-right: 1px solid hsl(var(--light) / 0.2); flex-shrink: 0; display: flex; flex-direction: column; } .sports-category__list { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; flex: 1; } .sports-category__link.live-btn { flex: unset; background: transparent !important; border-bottom: 1px solid hsl(var(--white) / 0.1); } .sports-category__link.live-btn i { font-size: 1.5rem; } .sports-category__list::-webkit-scrollbar { width: 7px; } .sports-category__list::-webkit-scrollbar-thumb { background-color: hsl(var(--white) / 0.2); border-radius: 12px; } .sports-category__list::-webkit-scrollbar-track { background-color: hsl(var(--black) / 0.2); } @media (max-width: 991px) { .sports-category { position: fixed; top: 0; left: 0; z-index: 99999; height: 100vh; transition: all linear 0.2s; transform: translateX(-100%); } .sports-category.active-category-side { transform: translateX(0); } } @media screen and (min-width: 992px) { .sports-category__list { display: flex; flex-direction: column; gap: 1px; } } .sports-category__list.arrow-prev-active .sports-category__arrow-prev { opacity: 1; visibility: visible; background-image: linear-gradient(90deg, hsl(var(--base) / 0.5), transparent); } .sports-category__list.arrow-prev-active .sports-category__arrow-next { opacity: 0; visibility: hidden; } .sports-category__link { display: flex; flex-direction: column; text-align: center; flex: 1; padding: 8px 0; position: relative; max-height: 62px; } .sports-category__link:hover { background: hsl(var(--light) / 0.1); } .sports-category__link.active { background: hsl(var(--light) / 0.1); } .sports-category__link.active .sports-category__icon { color: hsl(var(--base)); } .sports-category__link.active .sports-category__text { color: hsl(var(--base)); } .sports-category__icon { font-size: 18px; line-height: 1; color: hsl(var(--light) / 0.8); } .sports-category__text { display: block; width: 100%; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; padding: 0 5px; text-align: center; color: hsl(var(--light) / 0.8); } .sports-category__notification { position: absolute; top: 5px; right: 5px; padding: 2px 4px; background: hsl(var(--danger)); border-radius: 3px; font-size: 8px; line-height: 1; letter-spacing: 0.1em; color: hsl(var(--light)); } .sports-category__arrow { position: absolute; top: 0; bottom: 0; border: none; z-index: 1; transition: all 0.3s ease; color: hsl(var(--white)); background-color: transparent; } .sports-category__arrow-prev { left: 0; background-image: linear-gradient(89deg, hsl(var(--base) / 0.5), transparent); } .sports-category__arrow-next { right: 0; background-image: linear-gradient(268deg, hsl(var(--base) / 0.5), transparent); } /*--------------------------------------- 2.28 Sports Sub Category Drawer -----------------------------------------*/ @media screen and (min-width: 992px) { .sports-category::after { content: ""; width: 10px; height: 10px; background-image: url(../images/radius.svg); background-position: left top; background-size: contain; background-repeat: no-repeat; position: absolute; top: 0; left: 100%; } } .sub-category-drawer { transition: all 0.3s ease; background-color: hsl(var(--white)); border-radius: 10px; width: 100%; overflow: hidden; } .sub-category-drawer .slick-track { margin-left: 0; display: flex; justify-content: flex-start; align-items: center; gap: 32px; } .sub-category-drawer .slick-slide>div { display: flex; height: 100%; } .sub-category-drawer__body { padding-top: 15px; padding-bottom: 15px; } .sub-category-drawer__list { padding: 0; margin: 0; list-style: none; padding: 0 10px; } .sub-category-drawer__list li { position: relative; } .sub-category-drawer__link { display: flex; align-items: center; gap: 0.3rem; position: relative; padding: 10px 3px 10px 0; } .sub-category-drawer__link.active { border-bottom: 2px solid hsl(var(--base)); } .sub-category-drawer__link:hover .sub-category-drawer__text { color: hsl(var(--base)); } .sub-category-drawer__flag { display: flex; width: 20px; height: 20px; flex-shrink: 0; } .sub-category-drawer__flag-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: inline-block; } .sub-category-drawer__text { display: block; color: hsl(var(--dark)); font-size: 14px; transition: all 0.3s ease; line-height: 1; } @media screen and (min-width: 992px) { .sub-category-drawer__text { font-size: 12px; } } .sub-category-drawer__title { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .sub-category-drawer__title-icon { display: inline-block; font-size: 18px; color: hsl(var(--base)); } .sub-category-drawer__title-text { display: inline-block; color: hsl(var(--light)); font-size: 14px; font-family: var(--heading-font); } /*--------------------------------------- 2.29 Open Sub category drawer -----------------------------------------*/ .open-sub-category-drawer .sub-category-drawer { opacity: 1; visibility: visible; transform: translateX(0); } /*--------------------------------------- 2.30 League Title -----------------------------------------*/ .league-title { display: inline-flex; align-items: center; gap: 0.5rem; } .league-title__name { color: hsl(var(--base)); } .league-title__flag-img { width: 25px; height: 25px; object-fit: contain; border-radius: 5px; } .league-title__name { display: block; font-size: 14px; font-weight: 500; color: hsl(var(--dark)); } /*--------------------------------------- 2.31 Sports Body -----------------------------------------*/ .sports-body { padding: 1rem; padding-bottom: calc(60px + 1.5rem); background: hsl(var(--dark) / 0.05); min-height: calc(100vh - 230px); width: 100%; } @media screen and (min-width: 576px) { .sports-body { padding: 1rem; padding-bottom: calc(60px + 1rem); } } @media screen and (min-width: 992px) { .sports-body { width: calc(100% - (var(--right-side) + var(--left-side))); padding: 1.5rem !important; position: relative; min-height: calc(100vh - var(--header-h)); } } .home-page { background: hsl(var(--dark) / 0.05); } /*--------------------------------------- 2.46 Home Page -----------------------------------------*/ @media screen and (min-width: 992px) { .home-page { display: flex; align-items: flex-start; background: hsl(var(--dark) / 0.05); } } /*--------------------------------------- 2.47 Betslip -----------------------------------------*/ @media screen and (max-width: 991px) { .open-betslip .betslip { opacity: 1; visibility: visible; transform: translateX(0); } .betslip { position: fixed; right: 0; left: auto; width: 100%; height: calc(100vh - var(--nav-h)); bottom: var(--nav-h); z-index: 9999; padding: 10px; transition: all 0.3s ease; opacity: 0; visibility: hidden; transform: translateX(100%); max-width: 280px; box-shadow: 5px 0 7px 0px #000000; background-color: #f3f3f5; } .betslip__head { display: block; gap: 5px; padding: 0.8rem 1rem; border-radius: 10px 10px 0 0; background: hsl(var(--dark-400)); border-radius: 10px; } .betslip__body { background: hsl(var(--dark-400)); } .betslip__footer-list { gap: 0; } .list.betslip__list { gap: 0px; } .betslip__footer li { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; padding-left: 10px; padding-right: 10px; } .betslip__footer li:first-child { padding-bottom: 8px; border-bottom: 1px solid hsl(var(--dark) / 0.1); } .betslip__footer-text { display: block; font-size: 12px; color: hsl(var(--dark)); line-height: 1.2; } .betslip__footer-btn { width: 100%; color: hsl(var(--light)); } .betslip__footer-bottom { padding-left: 10px; padding-right: 10px; margin-top: 1rem; } .betslip__footer-bottom .form--control { border: 1px solid hsl(var(--base)); color: hsl(var(--dark)); background: hsl(var(--white)); } .betslip__footer-bottom .form--control::placeholder { color: hsl(var(--dark) / 0.4); } .betslip__footer-bottom .form--control:focus { outline: none; border: 1px solid hsl(var(--base)); background: hsl(var(--white)); color: hsl(var(--dark)); box-shadow: none; } .betslip__list { --gap: 0.2rem; margin-top: 0.2rem; margin-bottom: 0.2rem; } .betslip__list-close { width: 25px; display: flex; align-items: center; border: none !important; justify-content: center; } .btn.betslip__list-close:hover { color: hsl(var(--danger)) !important; } .betslip__list-suspended { font-size: 10px; background-color: hsl(var(--danger) / 0.07); padding: 3px; width: 70px; text-align: center; font-weight: 500; margin-top: 3px; border-radius: 3px; color: hsl(var(--danger)); } .betslip__list-text { font-size: 12px; margin-top: 3px; color: hsl(var(--base)); } .betslip-return { font-size: 12px; } .fullbetslip__selection-body { width: 100%; } .betslip__footer-list .betslip__list-odd { color: hsl(var(--base)); font-weight: 500; } .betslip__list-ratio span { font-size: 10px; color: hsl(var(--dark) / 0.8); } .betslip__list-ratio input:focus { border-color: hsl(var(--base)); } .betslip__list-text { font-size: 12px; margin-top: 3px; color: hsl(var(--base)); } .betslip-return { font-size: 12px; } .fullbetslip__selection-body { width: 100%; } .betslip__footer-list .betslip__list-odd { color: hsl(var(--base)); font-weight: 500; } .btn.betslip__list-close:hover { color: hsl(var(--danger)) !important; } .betslip__list-odd { font-size: 12px; line-height: 1.5; color: hsl(var(--dark)); letter-spacing: 0.03em; } .betslip__list-match { font-size: 11px; line-height: 1.5; color: hsl(var(--dark) / 0.9); letter-spacing: 0.03em; } .betslip__list-ratio span { font-size: 10px; color: hsl(var(--dark) / 0.8); } .betslip__list-question { font-size: 12px; line-height: 1.5; color: hsl(var(--dark) / 0.7); letter-spacing: 0.03em; font-weight: 500; } .betslip__list-ratio input { width: 100%; border: none; border-bottom: 1px solid #ddd; background: transparent !important; padding: 0px; font-size: 0.875rem; text-align: right; } .place-btn { width: calc(100% - 40px); padding-left: 20px; } .betslip__list-ratio span { display: block; font-size: 10px; } .betslip__list-ratio span.amount { border-bottom: 1px solid #ddd; } .betslip__footer { background-color: #fff; padding-bottom: 25px; border-radius: 10px; } } @media screen and (min-width: 992px) { .betslip { display: block; position: sticky; top: var(--header-h); width: var(--right-side); height: calc(100vh - var(--header-h)); padding: 10px; flex-shrink: 0; } .betslip__head { display: block; align-items: center; justify-content: space-between; gap: 5px; padding: 0.8rem 1rem; border-radius: 10px; background: hsl(var(--dark)); } .betslip__head-content { padding-left: 10px; font-size: 12px; color: hsl(var(--light)); } .betslip__body { background: hsl(var(--base) / 0.05); padding: 8px 12px; } .betslip__footer-list { gap: 0; } .list.betslip__list { gap: 0px; } .betslip__footer li { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; padding-left: 10px; padding-right: 10px; } .betslip__footer li:first-child { padding-bottom: 8px; border-bottom: 1px solid hsl(var(--dark) / 0.1); } .betslip__footer-text { display: block; font-size: 13px; color: hsl(var(--dark)); line-height: 1.2; } .betslip__footer-btn { width: 100%; color: hsl(var(--light)); } .betslip__footer-bottom .form--control { border: 1px solid hsl(var(--base)); color: hsl(var(--dark)); background: hsl(var(--white)); } .betslip__footer-bottom .form--control::placeholder { color: hsl(var(--dark) / 0.4); } .betslip__footer-bottom .form--control:focus { outline: none; border: 1px solid hsl(var(--base)); background: hsl(var(--white)); color: hsl(var(--dark)); box-shadow: none; } .betslip__list { --gap: 0.2rem; margin-top: 0.2rem; margin-bottom: 0.2rem; } .betslip__list-close:hover { color: hsl(var(--danger)); } .betslip__list-suspended { font-size: 10px; background-color: hsl(var(--danger) / 0.07); padding: 3px; width: 70px; text-align: center; font-weight: 500; margin-top: 3px; border-radius: 3px; color: hsl(var(--danger)); } .betslip__list-ratio input:focus { border-color: hsl(var(--base)); } .betslip__list-text { font-size: 12px; margin-top: 3px; color: hsl(var(--base)); } .fullbetslip__selection-body { width: 100%; } .betslip__footer-list .betslip__list-odd { color: hsl(var(--base)); font-weight: 500; } .betslip__list-ratio span { font-size: 0.7rem; color: hsl(var(--dark) / 0.8); font-weight: 600; display: block; } .place-btn { width: calc(100% - 40px); padding-left: 20px; } .betslip__list-ratio span.amount { border-bottom: 1px solid #ddd; } .betslip__footer { background-color: #fff; padding-bottom: 25px; border-radius: 10px; } } .betslip-item-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 12px !important; } .betslip-item-league { display: flex; align-items: center; gap: 6px; flex: 1; } .betslip-item-league .icon { display: flex; } .betslip-item-league p { font-size: 0.75rem; line-height: 1; font-weight: 500; color: hsl(var(--dark)); margin: 0; } .betslip-item-left { flex: 1; display: flex; flex-direction: column; gap: 4px; } .betslip__list-ratio input { width: 100%; border: 1px solid #ddd; background: transparent !important; padding: 2px 6px; border-radius: 6px; text-align: right; } @media screen and (min-width: 992px) and (min-width: 992px) { .betslip__list-close { border: 1px solid hsl(var(--base)); color: hsl(var(--base)); } } @media screen and (min-width: 992px) { .betslip__list-bet { display: flex; align-items: center; gap: 0.5rem; } } @media screen and (min-width: 992px) { .betslip__list-odd { font-size: 12px; line-height: 1.5; color: hsl(var(--dark)); letter-spacing: 0.03em; } } .betslip__list-teams { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .betslip__list-teams .vs { font-size: 10px; font-weight: 500; color: hsl(var(--black) / 0.6); } .betslip__list-team { flex-grow: 1; font-size: 0.7rem; line-height: 1.3; color: hsl(var(--dark) / 0.8); text-align: center; } .betslip__list-team .name { text-align: center; font-size: 12px; font-weight: 500; color: hsl(var(--black) / 0.8); } .betslip__list-team img { height: 18px; width: 18px; display: block; margin-inline: auto; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .betslip__list-selected-team { display: flex; justify-content: space-between; background-color: hsl(var(--base)); padding: 3px 3px 3px 12px; border-radius: 50px; } .betslip__list-selected-team .name { font-size: 12px; color: hsl(var(--white)); } .betslip__list-selected-team .badge { line-height: 1; border-radius: 50px; } .betslip__list-selected-team .text { font-size: 12px; } .betslip__list-rates { display: flex; align-items: center; gap: 8px; } .betslip__list-rates label { font-size: 12px; font-weight: 500; color: hsl(var(--dark)); } .betslip__list-rates .input-group { border-radius: 5px; border: 1px solid hsl(var(--black) / 0.15); } .betslip__list-rates .input-group-text { font-size: 14px; background-color: transparent; padding: 0px 3px 0px 6px; border: none; color: hsl(var(--black) / 0.8); } .betslip__list-rates .form--control { padding: 0 !important; height: 28.75px; border: none; font-weight: 400; color: hsl(var(--black) / 0.8) !important; } .betslip__list-rates .form--control[readonly] { background: transparent !important; } .betslip__list-rates .form--control::placeholder { color: hsl(var(--black) / 0.8); } @media screen and (min-width: 992px) { .betslip__list-match { font-size: 11px; line-height: 1.5; color: hsl(var(--dark) / 0.9); letter-spacing: 0.03em; } } @media screen and (min-width: 992px) { .betslip__list-question { font-size: 0.75rem; line-height: 1; color: hsl(var(--dark) / 0.7); font-weight: 600; display: block; } .betslip__list-question span { font-weight: 500; color: hsl(var(--base)); } } @media screen and (min-width: 992px) { .betslip__list-ratio { flex-shrink: 0; color: hsl(var(--dark)); font-size: 13px; } } @media screen and (min-width: 1920px) { .betslip { width: 280px; } } @media screen and (min-width: 992px) { .primary-menu-container { display: flex; align-items: center; gap: 30px; justify-content: space-between; width: 100% !important; } } .primary-menu { --gap: 10px; } @media screen and (min-width: 992px) { .primary-menu { --gap: 15px; } } *# custom css */ label.required:after { content: "*"; color: #dc3545 !important; margin-left: 2px; } .sub-category-drawer__link, .sub-category-drawer__link.active .sub-category-drawer__text { color: hsl(var(--base)); } .option-odd-list__item button.active { background: hsl(var(--base) / 0.7); color: hsl(var(--white)); } .bet-type { padding-bottom: 15px; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 0.5rem; } .bet-type__btn { cursor: pointer; display: inline-block; width: 100%; padding: 8px 15px; border: 1px solid hsl(var(--dark) / 0.3); background: transparent; font-size: 14px; line-height: 1.2; color: hsl(var(--dark)); text-align: center; transition: all 0.3s ease; border-radius: 5px; } .bet-type__btn input { display: none; } .bet-type__btn:hover { background: hsl(var(--base)); color: hsl(var(--white)); border-color: hsl(var(--base)); } .bet-type__btn:has(input:checked) { background: hsl(var(--base)); color: hsl(var(--white)); border-color: hsl(var(--base)); } .betslip:has(#betslips:checked) .bet-slip-container { display: flex; } .betslip:has(#betslips:checked) .mybet-container { display: none; } .betslip:has(#mybets-btn:checked) .bet-slip-container { display: none; } .betslip:has(#mybets-btn:checked) .mybet-container { display: block; } .single-bet li, .single-bet li { padding: 0; } .single-bet .betslip-return { text-align: center; font-size: 0.6rem; color: hsl(var(--black) / 0.7); } .single-bet .bet-return-amount { font-size: 1rem; display: block; font-weight: 700; line-height: 1; color: hsl(var(--black)); } @media screen and (min-width: 992px) { .select-lang__icon { position: absolute; left: -7px; top: -4px; } .select-lang .form-select { padding: 0 12px; } .betting-body { min-height: calc(100vh - 615px); } } button.rotate::after { content: "\f106" !important; color: hsl(var(--base)); } .betslip__body { background: #fff; border: 1px solid #dddddddb; margin: 10px 0; border-radius: 10px; margin-top: 0px; overflow-y: auto; overscroll-behavior: contain; } .betslip__body::-webkit-scrollbar { width: 0px; } .game-title { text-align: center; padding: 15px 0 7px 0; } .sports-category .slick-track, .sports-sub-category .slick-track { margin-left: 0 !important; } @media (max-width: 991px) { .sub-category-drawer__text { font-size: 12px !important; } .sub-category-drawer__link { text-align: center; } } .bet-type__live, .bet-type__upcoming { display: inline-block; width: 100%; padding: 6px 8px; border: 1px solid hsl(var(--white)); background: transparent; font-size: 14px; line-height: 1.2; color: hsl(var(--white)); text-align: center; transition: all 0.3s ease; border-radius: 3px; } .bet-type__live:hover, .bet-type__upcoming:hover { background: hsl(var(--base)); color: hsl(var(--white)); border-color: hsl(var(--base)); } .bet-type__live.active, .bet-type__upcoming.active { background: hsl(var(--base)); color: hsl(var(--white)); border-color: hsl(var(--base)); } .post-card { height: 100%; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .post-card:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .post-card__thumb { box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); border-radius: 5px; position: relative; } .post-card__thumb img { width: 100%; border-radius: 5px 5px 0px 0px; max-height: 250px; } .post-card__content { padding: 20px; } .sidebar .small-post-list .small-post { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid #e5e5e5; } .sidebar .small-post-list .small-post:first-child { padding-top: 0; } .sidebar .small-post-list .small-post:last-child { padding-bottom: 0; border-bottom: none; } .sidebar .small-post-list .small-post__thumb { width: 60px; height: 50px; } .sidebar .small-post-list .small-post__thumb img { width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; object-position: center; -o-object-position: center; } .sidebar .small-post-list .small-post__content { width: calc(100% - 60px); padding-left: 20px; } .sidebar .small-post-list .small-post__content .post__title a { font-size: 16px; font-weight: 600; } .banner-slider { position: relative; overflow: hidden; width: 100%; border-radius: 10px; } .banner_slide { position: relative; width: 100%; height: 100%; top: 0; } .banner_image { width: 100%; } .banner_overlay { position: absolute; z-index: 900; width: 800px; height: 100%; left: 50%; margin-left: -400px; } .banner_overlay_container { position: absolute; top: 0; width: 70%; padding-left: 50px; } .banner-slider_nav { position: absolute; z-index: 9999; width: 800px; bottom: 0; text-align: center; left: 50%; margin-left: -400px; padding-left: 0; margin-bottom: 0; } .banner-slider_nav_item { display: inline; } .banner-slider_nav_item>a { display: inline-block; font-size: 3em; color: rgba(0, 0, 0, 0.5); text-decoration: none; padding: 8px 3px; line-height: 12px; } .banner-slider_nav_item>a:hover { color: rgba(0, 0, 0, 0.75); } .banner-slider_nav_item--is-selected>a { color: #000; } .banner_slide { position: absolute; width: 100%; height: 100%; top: 0; } .banner_button { padding: 20px; text-decoration: none; color: #fff; display: inline-block; } @media screen and (max-width: 425px) { .betslip { max-width: 100% !important; } } .simplebar-offset { right: 0; bottom: 0; } .simplebar-content-wrapper { height: auto; overflow: hidden scroll; } .simplebar-wrapper { margin: 0px -4.8px; } @media (max-width: 991px) { .sports-sub-category .simplebar-content { background: hsl(var(--light) / 0.1); } } @media only screen and (max-width: 574px) and (min-width: 425px) { .col-msm-6 { width: 50%; } } .validation-msg, .total-validation-msg, .total-stake-amount { display: block; font-size: 0.6875rem; padding-top: 2px; } .simplebar-horizontal { visibility: hidden; } .simplebar-horizontal .simplebar-scrollbar { width: 0px; display: none; } .simplebar-vertical { visibility: visible; } .simplebar-vertical .simplebar-scrollbar { height: 725px; transform: translate3d(0px, 0px, 0px); display: block; } .simplebar-placeholder { width: auto; height: 735px; } .empty-slip-message { display: grid; place-content: center; color: #cfcfcf; font-size: 0.8754rem; font-family: inherit; height: 100%; } .empty-slip-message img { width: 75px; margin-bottom: 0.875rem; } .bet-return { line-height: 1rem; } .bet-return span { font-size: 12px; } .delete-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: hsl(var(--danger)); border-radius: 50%; color: #fff; border: 0; } .delete-btn i { font-size: 20px; } .betslip__list-close { width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; border: 0; padding: 0; color: hsl(var(--danger)); background-color: hsl(var(--danger) / 0.15) !important; font-size: 10px; } .betslip__list-close i { font-size: 12px; } .betslip-form { display: none; } .empty-message { display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100vh - 630px); } .empty-message img { width: 110px; } .empty-message p { margin-top: 0.5rem; color: #b5b5b5; font-size: 0.875rem; } .widget-card__icon i { font-size: 22px; } .option-odd-list .sports-category__arrow-next, .option-odd-list .sports-category__arrow-prev { background: linear-gradient(268deg, #ffffff, #ffffffc9); color: #3b3b3b; top: 1px; border-radius: 0 3px 3px 0; border-left: 0; line-height: 1; width: 35px; } .option-odd-list .sports-category__arrow-prev.slick-disabled { display: none !important; } .option-odd-list .sports-category__arrow-next { right: -14px; } .option-odd-list .sports-category__arrow-prev { left: -14px; left: 0; opacity: 1; visibility: visible; background: linear-gradient(268deg, #ffffffc9, #ffffff); } .option-odd-list .sports-category__arrow-next i { font-size: 0.875rem; } .custom-dropdown { margin-bottom: 7px; } .option-odd-list .slick-slide { margin: 0 6px; } .locked { position: relative; opacity: 0.6; pointer-events: none; } .locked::before { position: absolute; content: "\f023"; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-style: normal; font-variant: normal; width: 100%; height: 100%; background-color: #00000080; left: 0; top: 0; border-radius: inherit; color: white; text-align: center; display: flex; justify-content: center; font-size: 0.875rem; align-items: center; } .option-odd-list__item .btn-light.active:focus, .option-odd-list__item .btn-light.active:active { box-shadow: none !important; } .list--group .list-group-item { background-color: hsl(var(--white)); border-color: hsl(var(--dark) / 0.07); } .list--group .list-group-item.head { background-color: hsl(var(--dark) / 0.05); } .slick-arrow.slick-disabled { display: none !important; } .arrow-next.category-slider-btn { right: 0; } .arrow-prev.category-slider-btn { left: 0; } .category-slider-btn { position: absolute; top: 50%; transform: translateY(-50%); height: 100%; width: 30px; border: 0; z-index: 9; background: transparent; } .category-slider-btn::after { content: ""; position: absolute; height: 100%; width: 50px; top: 0; z-index: -1; border-radius: 10px; } .arrow-prev.category-slider-btn::after { left: 0; background: linear-gradient(319deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 62%); } .arrow-next.category-slider-btn::after { right: 0; background: linear-gradient(319deg, rgba(255, 255, 255, 1) 38%, rgba(0, 0, 0, 0) 100%); } /* sports card */ .sports-card { display: block; background: hsl(var(--white)); border-radius: 10px; transition: all 0.3s ease; overflow: hidden; --left-width: 25%; --inner-count: 4; --inner-width: calc((100% - var(--left-width)) / var(--inner-count)); --head-width: 100%; overflow-x: auto; } .sports-card::-webkit-scrollbar { width: 0; height: 0; } @media (max-width: 1599px) { .sports-card { --left-width: 20%; } } @media (max-width: 375px) { .sports-card { --left-width: 17%; } } .sports-card:hover .sports-card__list-item { background: hsl(var(--base) / 0.15); } .sports-card__team { display: flex; align-items: center; justify-content: flex-start; gap: 6px; } .sports-card__team:not(:last-child) { margin-bottom: 6px; } .sports-card__team-flag { width: 16px; height: 16px; display: block; border-radius: 50%; overflow: hidden; background: #f1f1f1; } .sports-card__team-flag-img { height: 100%; width: 100%; display: block; object-fit: cover; } .sports-card__team-name { display: block; font-size: 0.875rem; line-height: 1; color: hsl(var(--dark)); } @media (max-width: 991px) { .sports-card__team-name { font-size: 0.75rem; } } .sports-card__info { display: flex; align-items: center; justify-content: flex-start; gap: 6px; } .sports-card__info-text { display: block; font-size: 0.65rem; line-height: 1; color: hsl(var(--dark)); } .details-link { text-decoration: underline; font-size: 0.7rem; } .sports-card__info-time { display: block; font-size: 0.6875rem; font-weight: 500; line-height: 1; color: hsl(var(--dark)); } .sports-card__stream { display: flex; line-height: 1; color: hsl(var(--dark) / 0.5); justify-content: center; } .sports-card__stream i { font-size: 0.7rem; } .sports-card__stream.live { color: hsl(var(--danger)); } .sports-card-wrapper { display: flex; justify-content: space-between; } @media (min-width: 992px) and (max-width: 1199px) { .sports-card-wrapper { min-width: 1200px; } } @media (max-width: 767px) { .sports-card-wrapper { min-width: 925px; } } .sports-card-wrapper-lg .sports-card-inner { min-width: max-content; width: 100%; } .sports-card-wrapper-lg .option-odd-lists .btn { width: auto; min-width: 50px; } .extra-title { font-size: 0.875rem; font-weight: 600; color: hsl(var(--black) / 0.6); margin-bottom: 4px; display: block; } .sports-card-left { width: var(--left-width); position: sticky; left: 0; z-index: 5; background-color: hsl(var(--white)); flex-shrink: 0; } .sports-card-inner { width: var(--inner-width); display: flex; flex-direction: column; } .sports-card-left-bottom { display: flex; align-items: center; gap: 12px; } .sports-card-heading { padding: 0.5rem 1rem; background-color: hsl(var(--black) / 0.05); margin-bottom: 0; font-size: 0.75rem; font-weight: 500; color: hsl(var(--dark) / 0.6); white-space: nowrap; user-select: none; } .sports-card-body { padding: 0.5rem 1rem; } .sports-card-inner:not(:last-child) .sports-card-body { border-right: 1px solid hsl(var(--black) / 0.1); } .sports-card-left .sports-card-body { border-right: 1px solid hsl(var(--black) / 0.1); } .sports-card-inner .sports-card-body { flex: 1; display: flex; } .sports-card-top-inner { display: flex; align-items: center; justify-content: center; } .team-select-title { width: var(--head-width); text-align: center; line-height: 1; } .option-odd-lists { display: flex; align-items: center; justify-content: space-around; width: 100%; gap: 8px; } .option-odd-lists .btn { font-size: 0.75rem; border: 0 !important; background: hsl(var(--black) / 0.06); font-weight: 400; padding: 10px 0; width: 100%; line-height: 1; } .option-odd-list__item .point { font-size: 0.75rem; text-align: center; white-space: nowrap; } @media (max-width: 1599px) { .sports-card-heading { padding-inline: 0.5rem; } .sports-card-body { padding: 0.5rem; } .option-odd-lists .btn { padding: 8px 8px; font-size: 0.65rem; } .sports-card-heading { font-size: 0.7rem; } .option-odd-list__item .point { font-size: 0.65rem; } } @media (max-width: 575px) { .sports-card-heading { padding-inline: 0.3rem; } .sports-card-body { padding: 0.3rem; } .sports-card__team-name { font-size: 0.75rem; } .sports-card__team { gap: 4px; } .sports-card__team:not(:last-child) { margin-bottom: 4px; } .details-link { font-size: 0.65rem; } } .option-odd-list__item { width: var(--head-width); text-align: center; } .hide-scroll { height: 100vh; overflow: hidden; } .top-sticky { position: sticky; top: var(--header-h); z-index: 99; } .betslip { display: flex; flex-direction: column; } .betslip-header { flex-shrink: 0; } .betslip__body { flex: 1; } .betslip-inner { flex: 1; display: flex; flex-direction: column; overflow-y: auto; } .betslip__list-footer { padding-top: 6px; border-top: 1px solid hsl(var(--black) / 0.1); } .betslip-inner::-webkit-scrollbar { width: 0px; } .betslip__footer { flex-shrink: 0; } .betslip-select { margin-bottom: 8px; padding: 12px; padding-bottom: 12px; border-bottom: 1px solid #ececec; } .betslip-select .form-select { padding: 3px 6px; border: 1px solid #ddd; box-shadow: none !important; font-size: 0.875rem; } .betslip-select .form-select:focus { border-color: hsl(var(--base)); } .betslip-righ { flex: 1; padding-inline: 12px; } .betslip__footer-bottom { margin-top: 12px; padding-top: 12px; padding-inline: 12px; border-top: 1px solid #ececec; } .betslip-return { font-size: 12px; display: block; text-align: end; margin-top: 4px; } .betslip-input-inner { position: absolute; top: 50%; transform: translateY(-50%); left: 9px; color: hsl(var(--black) / 0.5); font-weight: 400; } .betslip__list-ratio:has(.betslip-input-inner) input { padding-left: 42px; } .live-btn-wrapper { width: calc(var(--left-side) - (var(--bs-gutter-x) * 0.5)); flex-shrink: 0; } /* ========================= */ .betslip-item { padding: 12px; border: 1px solid hsl(var(--black) / 0.15); border-radius: 5px; background: hsl(var(--white)); } .betslip-item:not(:last-child) { margin-bottom: 8px; } .betslip-item>*:not(:last-child) { margin-bottom: 12px; } .betslip-item-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .betslip-item-body>*:not(:last-child) { margin-bottom: 8px; } .betslip-item-close { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: none; color: hsl(var(--black)); background-color: hsl(var(--black) / 0.1); } .betslip-item-close i { font-size: 12px; } .betslip-item-league { font-size: 12px; display: flex; align-items: flex-start; gap: 8px; } .betslip-item-league i { font-size: 12px; color: hsl(var(--dark)); } .betslip-item-league__name { line-height: 1.2; font-weight: 400; color: hsl(var(--dark)); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .betslip-item-teams> :not(:last-child) { margin-bottom: 4px; } .betslip-item-team { display: flex; align-items: center; gap: 8px; } .betslip-item-team__logo { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; } .betslip-item-team__name { font-size: 12px; font-weight: 500; color: #334155; } .betslip-item-market { font-size: 12px; } .betslip-item-market__wrapper { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; } .betslip-item-market__type { font-size: 10px; font-weight: 500; color: #94a3b8; line-height: normal; } .betslip-item-market__label { line-height: 1; font-weight: 500; color: hsl(var(--dark) / 0.5); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .betslip-item-market__score { font-style: 12px; font-weight: 600; color: hsl(var(--base)); line-height: 1; } .betslip-item-stake { line-height: normal; } .betslip-item-stake__label { font-size: 12px; font-weight: 500; color: #334155; } .betslip-item-stake .input-group { border-radius: 5px; border: 1px solid hsl(var(--black) / 0.15); } .betslip-item-stake .input-group:focus-within { border-color: hsl(var(--base)); } .betslip-item-stake .input-group .input-group-text { font-size: 12px; padding: 0; background-color: transparent; border: none; color: #334155; } .betslip-item-stake .input-group .input-group-text:first-child { padding: 0px 0px 0px 6px; } .betslip-item-stake .input-group .input-group-text:last-child { padding: 0px 6px 0px 0px; } .betslip-item-stake .input-group .form-control { padding: 0px 3px 0px 6px; height: 28px; border: none; font-size: 12px; font-weight: 400; } .betslip-item-stake .input-group .form-control::placeholder { color: #334155; font-weight: 400; } .betslip-item-return { margin-top: 0px; } .betslip-item-return__text { font-size: 12px; color: hsl(var(--dark) / 0.5); line-height: 1; } .betslip-item-return__text span { font-size: 11px; font-weight: 600; color: hsl(var(--dark)); } .odd-list__outcomes { padding: 16px; } .accordion-body:has(.odd-list__outcomes) { background-color: transparent; } .odd-list__outcomes li { padding: 10px 12px; background-color: #f9f9f9; border-radius: 8px; } .odd-list__outcomes li:not(:last-child) { margin-bottom: 16px; } .odd-list__outcome.oddBtn { border: 0; background: hsl(var(--black) / 0.1); padding: 6px 12px; line-height: 1; font-size: 0.875rem; border-radius: 4px; font-weight: 500; color: hsl(var(--black) / 9); } .odd-list__outcome-text { font-size: 0.875rem; } .odd-list__outcome.active { background: hsl(var(--base) / 0.7); color: hsl(var(--white)); } .bet-list-item__header { padding: 8px 16px; border-bottom: 1px solid #dddddddb; } .bet-list-item__body { padding: 0px 16px; } .bet-list-item__footer { padding: 12px 16px; } .bet-list-item__title { font-size: 14px; font-weight: 600; font-style: normal; } .bet-single { line-height: 1; margin: 0 -16px; padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .bet-market_type { font-size: 12px; font-weight: 600; font-style: normal; line-height: 1; color: #979797; } .bet-single__teams { line-height: 1; margin-top: 4px; } .bet-single__team { font-size: 12px; font-weight: 500; color: rgba(0, 0, 0, 0.7); } .bet-single__vs { font-size: 14px; line-height: normal; font-weight: 500; color: rgba(0, 0, 0, 0.5); } .bet-single__selected-team { margin-top: 4px; border-radius: 50px; padding: 6px 12px; color: rgba(0, 0, 0, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05); } .bet-single__selected-team .name { font-size: 12px; font-weight: 600; line-height: 1; } .bet-single__selected-team .badge { border: none; border-radius: 999px; background: unset; } .bet-single__selected-team .badge--warning { color: #ffbf00; } .bet-single-info__item { display: flex; flex-wrap: wrap; justify-content: space-between; line-height: 1; } .bet-single-info__item:not(:last-child) { margin-bottom: 12px; } .bet-single-info__item .label, .bet-single-info__item .value { font-size: 12px; font-weight: 500; white-space: nowrap; } .bet-single-info__item .label { color: #475569; } .bet-single-info__item .value { color: rgba(0, 0, 0, 0.8); } .show-bet-status .badge { border: none; border-radius: 999px; } .bet-list-item .badge { border-radius: 0; background-color: transparent !important; padding: 0 !important; border: none !important; font-weight: 400; } .property-section { padding: 0px 0 80px 0; } .property-section .property-box { background: var(--white); box-shadow: var(--shadow); border-radius: 5px; overflow: hidden; } .property-section .property-box .img-box { position: relative; } /*.property-section .property-box .img-box img {*/ /* height: 100%;*/ /*}*/ .property-section .property-box .img-box::before { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%); left: 0; top: 0; z-index: 0; } .property-section .property-box .img-box .badges { position: absolute; right: 20px; top: 20px; } .property-section .property-box .img-box .badges span { background: #000; color: var(--white); border-radius: 3px; padding: 3px 8px; font-size: 12px; display: inline-block; } .property-section .property-box .img-box .badges .popular { background: #26cc8c; } .property-section .property-box .img-box .badges .featured { background: #ffa415; background: #212529; } .property-section .property-box .img-box .badges .top { background: #ff5529; } .property-section .property-box .img-box .tag, .property-section .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; } .property-section .property-box .img-box .tag::after, .property-section .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .property-section .property-box .img-box .tag, .property-section .property-box .img-box .tag2 { background: red; } .property-section .property-box .img-box .category { background: var(--white); border-top-right-radius: 5px; border-top-left-radius: 5px; padding: 3px 10px; position: absolute; left: 20px; bottom: 0; margin-bottom: 0; } .property-section .property-box .img-box .price, .property-section .property-box .img-box .price2 { position: absolute; color: var(--black); right: 20px; bottom: -20px; } .property-section .property-box .img-box .price2{ bottom: -14px !important; } .property-section .property-box .img-box .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .property-section .property-box .text-box { padding: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px; } .property-section .property-box .text-box i { font-size: 14px; } .property-section .property-box .text-box .title { font-family: "Jost", sans-serif; color: var(--black); font-size: 20px; font-weight: 500; transition: 0.4s; } .property-section .property-box .text-box .title:hover { color: #000; } .property-section .property-box .text-box .review { margin-bottom: 10px; } .property-section .property-box .text-box .review i { color: var(--gold); } .property-section .property-box .text-box .address { font-size: 14px; margin-top: 10px; } .property-section .property-box .text-box .aminities { display: flex; justify-content: space-between; margin: 10px 0; } .property-section .property-box .text-box .aminities i { background: var(--bgLight); color: #000; font-size: 12px; width: 25px; height: 25px; border-radius: 50%; text-align: center; padding-top: 7px; margin-right: 6px; margin-bottom: 5px; } .property-box .text-box .invest-btns { margin-top: 10px; border-bottom: 1px solid var(--borderColor); margin-bottom: 15px; padding-bottom: 15px; } .property-box .text-box .invest-btns button, .property-box .text-box .invest-btns a{ font-size: 15px; background: var(--bgLight2); padding: 3px 8px; color: #000; margin-right: 5px; border-radius: 3px; font-family: "Jost", sans-serif; font-weight: 500; } .invest-completed, .investor-invest-completed { position: absolute; bottom: 0px; left: 20px; background: var(--white); padding: 4px 8px; margin-right: 5px; border-top-right-radius: 3px; border-top-left-radius: 3px; font-size: 15px; } .invest-completed i, .investor-invest-completed i { color: #000; } .investor-invest-completed i{ margin-right: 5px !important; } .investor-invest-completed{ bottom: -15px !important; } .invest-completed-details{ background: #26cc8c; padding: 4px 8px; margin-right: 5px; font-size: 15px; color: white; border-radius: 5px; } .invest-completed-details i{ color: white; } .invested-user{ background: #000; padding: 3px 7px; margin-right: 5px; font-size: 15px; color: white; border-radius: 5px; height: 29px; } .property-section .property-box .text-box .plan h5 { margin-bottom: 5px; font-size: 16px; } .property-box .text-box .plan div:nth-child(1) h5 { color: #26cc8c; } .property-box .text-box .plan div:nth-child(2) h5 { color: #212529; } .property-box .text-box .plan div:nth-child(3) h5 { color: #ff6379; } .plan.d-flex.justify-content-between h5 { margin-bottom: 5px; } .latest-property { padding: 100px 0; } .latest-property .property-box { background: var(--white); box-shadow: var(--shadow); border-radius: 5px; overflow: hidden; display: flex; } .latest-property .property-box .img-box { position: relative; width: 300px; } .latest-property .property-box .img-box img { height: 100%; } .latest-property .property-box .img-box .badges { position: absolute; right: 20px; top: 20px; } .latest-property .property-box .img-box .badges span { background: #000; color: var(--white); border-radius: 3px; padding: 3px 8px; font-size: 12px; display: inline-block; } .latest-property .property-box .img-box .badges .popular { background: #26cc8c; } .latest-property .property-box .img-box .badges .featured { background: #ffa415; background: #212529; } .latest-property .property-box .img-box .badges .top { background: #ff5529; } .latest-property .property-box .img-box .tag { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; } .latest-property .property-box .img-box .tag::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .latest-property .property-box .img-box .category { background: var(--white); border-top-right-radius: 5px; border-top-left-radius: 5px; padding: 3px 10px; position: absolute; left: 20px; bottom: 0; margin-bottom: 0; } .latest-property .property-box .img-box .price { position: absolute; color: var(--white); left: 20px; bottom: 30px; } .latest-property .property-box .img-box .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .latest-property .property-box .img-box::before { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%); left: 0; top: 0; z-index: 0; } .latest-property .property-box .text-box { width: calc(100% - 300px); padding: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px; } .latest-property .property-box .text-box i { font-size: 14px; } .latest-property .property-box .text-box .title { font-family: "Jost", sans-serif; color: var(--black); font-size: 20px; font-weight: 500; transition: 0.4s; } .latest-property .property-box .text-box .title:hover { color: #000; } .latest-property .property-box .text-box .review { margin-bottom: 10px; } .latest-property .property-box .text-box .review i { color: var(--gold); } .latest-property .property-box .text-box .address { font-size: 14px; margin-top: 10px; } .latest-property .property-box .text-box .aminities { display: flex; justify-content: space-between; margin: 10px 0; } .latest-property .property-box .text-box .aminities i { background: var(--bgLight); color: #000; font-size: 10px; width: 20px; height: 20px; border-radius: 50%; text-align: center; padding-top: 6px; margin-right: 3px; margin-bottom: 5px; } .property-box .text-box .invest-btns { margin-top: 10px; border-bottom: 1px solid var(--borderColor); margin-bottom: 15px; padding-bottom: 15px; } .property-box .text-box .invest-btns button { font-size: 15px; background: var(--bgLight2); padding: 3px 8px; color: #000; margin-right: 5px; border-radius: 3px; font-family: "Jost", sans-serif; font-weight: 500; } .latest-property .property-box .text-box .plan h5 { margin-bottom: 5px; font-size: 16px; } .latest-property .property-box .text-box .plan div:nth-child(1) h5 { color: #26cc8c; } .latest-property .property-box .text-box .plan div:nth-child(2) h5 { color: #212529; } .latest-property .property-box .text-box .plan div:nth-child(3) h5 { color: #ff6379; } .shop-section { padding: 10px 0; } .shop-section .property-box { background: var(--white); box-shadow: var(--shadow); border-radius: 5px; overflow: hidden; } .shop-section .property-box .img-box { position: relative; } /*.shop-section .property-box .img-box img {*/ /* height: 100%;*/ /*}*/ .shop-section .property-box .img-box::before { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%); left: 0; top: 0; z-index: 0; } .shop-section .property-box .img-box .badges { position: absolute; right: 20px; top: 14px; } .shop-section .property-box .img-box .badges span { background: #000; color: var(--white); border-radius: 3px; padding: 3px 8px; font-size: 12px; display: inline-block; } .shop-section .property-box .img-box .badges .popular { background: #26cc8c; } .shop-section .property-box .img-box .badges .featured { /*background: #ffa415;*/ background: #212529; } .shop-section .property-box .img-box .badges .success { background: #28a745!important; } .shop-section .property-box .img-box .badges .warning { background: #ffa415 !important; } .shop-section .property-box .img-box .badges .danger { background: #dc3545!important; } .shop-section .property-box .img-box .badges .top { background: #ff5529; } .shop-section .property-box .img-box .tag, .shop-section .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; } .shop-section .property-box .img-box .tag2{ background: #212529; left: 140px; } .shop-section .property-box .img-box .tag::after, .shop-section .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .shop-section .property-box .img-box .tag2::after{ content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow-3.png); background-size: cover; } .shop-section .property-box .img-box .save{ top: 20px; left: 20px; width: 35px; height: 35px; border-radius: 100px; background: #000; color: var(--white); text-align: center; padding-top: 0px; -webkit-transition: 0.4s; transition: 0.4s; } /* home property section start */ .property-section .property-box .img-box .tag, .property-section .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; } .property-section .property-box .img-box .tag::after, .property-section .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .property-section .property-box .img-box .tag, .property-section .property-box .img-box .tag2 { background: red; } .property-section .property-box .img-box .tag, .shop-section .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; } .property-section .property-box .img-box .tag2{ background: #212529; left: 140px; } .property-section .property-box .img-box .tag::after, .shop-section .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .property-section .property-box .img-box .tag2::after{ content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow-3.png); background-size: cover; } .property-section .property-box .img-box .save{ top: 20px; left: 20px; width: 30px; height: 30px; border-radius: 100px; background: #000; color: var(--white); text-align: center; padding-top: 0px; -webkit-transition: 0.4s; transition: 0.4s; margin-top: -4px; } /* home property section end */ /* home latest property section start */ .latest-property .property-box .img-box .tag, .latest-property .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 5px; font-size: 14px; display: inline-block; font-size: 12px !important; } .latest-property .property-box .img-box .tag::after, .latest-property .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .latest-property .property-box .img-box .tag, .latest-property .property-box .img-box .tag2 { background: red; } .latest-property .property-box .img-box .tag, .latest-property .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; } .latest-property .property-box .img-box .tag2{ background: #212529; left: 126px; font-size: 12px; } .latest-property .property-box .img-box .tag::after, .latest-property .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .latest-property .property-box .img-box .tag2::after{ content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow-3.png); background-size: cover; } .latest-property .property-box .img-box .save{ top: 20px; left: 20px; width: 25px; height: 25px; border-radius: 100px; background: #000; color: var(--white); text-align: center; padding-top: 0px; -webkit-transition: 0.4s; transition: 0.4s; } .latest-property .property-box .img-box .save i{ font-size: 14px; } /* home latest property section end*/ /* property section start */ .shop-section .property-box .img-box .tag, .shop-section .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; font-size: 12px !important; } .shop-section .property-box .img-box .tag::after, .shop-section .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .shop-section .property-box .img-box .tag, .shop-section .property-box .img-box .tag2 { background: red; } .shop-section .property-box .img-box .tag, .shop-section .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; } .shop-section .property-box .img-box .tag2{ background: #212529; left: 140px; } .shop-section .property-box .img-box .tag::after, .shop-section .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .shop-section .property-box .img-box .tag2::after{ content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow-3.png); background-size: cover; } .shop-section .property-box .img-box .save{ top: 20px; left: 20px; width: 30px; height: 30px; border-radius: 50%; background: #000; color: var(--white); text-align: center; padding-top: 0px; -webkit-transition: 0.4s; transition: 0.4s; } /* property section end */ /* agent section start */ .agent-profile-section .property-box .img-box .tag, .agent-profile-section .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; font-size: 12px !important; } .agent-profile-section .property-box .img-box .tag::after, .agent-profile-section .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .agent-profile-section .property-box .img-box .tag, .agent-profile-section .property-box .img-box .tag2 { background: red; } .agent-profile-section .property-box .img-box .tag, .agent-profile-section .property-box .img-box .tag2 { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; } .agent-profile-section .property-box .img-box .tag2{ background: #212529; left: 125px; } .shop-section .property-box .img-box .tag::after, .agent-profile-section .property-box .img-box .tag2::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .agent-profile-section .property-box .img-box .tag2::after{ content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow-3.png); background-size: cover; } .agent-profile-section .property-box .img-box .save{ position: relative; top: -3px; right: 0; width: 30px; height: 30px; border-radius: 50%; background: #000; color: var(--white); text-align: center; padding-top: 0px; -webkit-transition: 0.4s; transition: 0.4s; } /* agent section end */ .shop-section .property-box .img-box .category { background: var(--white); border-top-right-radius: 5px; border-top-left-radius: 5px; padding: 3px 10px; position: absolute; left: 20px; bottom: 0; margin-bottom: 0; } .shop-section .property-box .img-box .price { position: absolute; color: var(--white); right: 20px; bottom: 20px; } .shop-section .property-box .img-box .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .shop-section .property-box .text-box { padding: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px; } .shop-section .property-box .text-box i { font-size: 14px; } .shop-section .property-box .text-box .title { font-family: "Jost", sans-serif; color: var(--black); font-size: 18px; font-weight: 500; transition: 0.4s; } .shop-section .property-box .text-box .title:hover { color: #000; } .shop-section .property-box .text-box .review { margin-bottom: 10px; } .shop-section .property-box .text-box .review i { color: var(--gold); } .shop-section .property-box .text-box .address { font-size: 14px; margin-top: 10px; } .shop-section .property-box .text-box .aminities { display: flex; justify-content: space-between; margin: 10px 0; } .shop-section .property-box .text-box .aminities i, .searchAmenities i { background: var(--bgLight); color: #000 !important; font-size: 12px !important; width: 25px; height: 25px; border-radius: 50%; text-align: center; padding-top: 6px; line-height: 14px; margin-right: 6px; } .shop-section .property-box .sidebar-dropdown-items .dropdown-menu { border-radius: 5px; background: var(--white); border: none; box-shadow: var(--shadow2); } .shop-section .property-box .sidebar-dropdown-items .dropdown-item { background: white; color: var(--fontColor); transition: 0.4s; } .shop-section .property-box .sidebar-dropdown-items .dropdown-item i { transition: 0.4s; } .shop-section .property-box .sidebar-dropdown-items .dropdown-item:hover, .shop-section .property-box .sidebar-dropdown-items .dropdown-item:active, .shop-section .property-box .sidebar-dropdown-items .dropdown-item i { color: #000 !important; text-decoration: none !important; } .shop-section .property-box .sidebar-dropdown-items .dropdown-item:hover i, .shop-section .property-box .sidebar-dropdown-items .dropdown-item:active i { color: var(--white); } .shop-section .property-box .sidebar-dropdown-items .dropdown-item i { color: #000; width: 22px; } .shop-section .property-box .sidebar-dropdown-items .dropdown-toggle { background: #000; height: 30px; width: 30px; border-radius: 50px; color: var(--white); position: relative; padding: 0px; transition: 0.4s; } .shop-section .property-box .sidebar-dropdown-items .dropdown-toggle::after { display: none; } .shop-section .filter-area .filter-box { background: var(--white); padding: 0; margin-bottom: 30px; } .shop-section .filter-area .filter-box h4 { text-transform: capitalize; margin-bottom: 20px; } .shop-section .filter-area .filter-box .links { margin-bottom: 0; padding-left: 0; list-style: none; } .shop-section .filter-area .filter-box .links li { margin-bottom: 10px; border-bottom: 1px solid var(--borderColor); padding-bottom: 10px; } .shop-section .filter-area .filter-box .links li a { color: var(--fontColor); text-transform: capitalize; transition: 0.4s; } .shop-section .filter-area .filter-box .links li a:hover { color: #000; } .shop-section .filter-area .filter-box .links li:last-child { margin-bottom: 0; border-bottom: none; } .shop-section .filter-area .filter-box .tag-item label { background: var(--bgLight); margin: 0 10px 10px 0; font-size: 16px; text-transform: capitalize; color: var(--fontColor); border: 1px solid var(--bgLight); border-radius: 3px; } .shop-section .filter-area .filter-box .tag-item .btn-check:checked + .btn-primary { background: #000 !important; color: #fff; border: 1px solid #000; } .shop-section .filter-area .filter-box .tag-item .btn-check:focus + .btn-primary, .shop-section .filter-area .filter-box .tag-item .btn-primary:focus { color: #fff; background-color: #fff; border-color: #000; border: 1px solid #000; box-shadow: 0 0 0 0rem rgba(49, 132, 253, 0.5); } .shop-section .filter-area .filter-box .form-check label i { color: var(--gold); font-size: 14px; } .shop-section .filter-area .input-box label { font-weight: 500; margin-bottom: 10px; text-transform: capitalize; } .shop-section .filter-area .input-box .form-select, .shop-section .filter-area .input-box .form-control { height: 50px; border-radius: 5px; background-color: var(--bgLight); border: 2px solid var(--bgLight); padding: 8px; padding-left: 15px; font-weight: normal; caret-color: #000; color: var(--fontColor); } .shop-section .filter-area .input-box .form-select:focus, .shop-section .filter-area .input-box .form-control:focus { color: var(--fontColor); box-shadow: 0 0 0 0rem var(--white); border: 2px solid #000; } .shop-section .filter-area .input-box .form-select::-moz-placeholder, .shop-section .filter-area .input-box .form-control::-moz-placeholder { color: var(--fontColor); } .shop-section .filter-area .input-box .form-select:-ms-input-placeholder, .shop-section .filter-area .input-box .form-control:-ms-input-placeholder { color: var(--fontColor); } .shop-section .filter-area .input-box .form-select::placeholder, .shop-section .filter-area .input-box .form-control::placeholder { color: var(--fontColor); } .shop-section .filter-area .input-box .form-select { background-image: url(../img/icon/downward-arrow.png); } .shop-section .filter-area .input-box .form-select option { background: var(--white); color: var(--fontColor); } .shop-section .filter-area .input-box textarea.form-control { height: 150px; border-radius: 5px; } .shop-section .filter-area .input-box .select2 { width: calc(100% - 0px) !important; margin-left: auto; } .shop-section .filter-area .input-box .select2-container--default .select2-selection--single { height: 50px; background: var(--bgLight); border: 1px solid var(--bgLight); } .shop-section .filter-area .input-box .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 50px; padding-left: 15px; color: var(--fontColor); } .shop-section .filter-area .input-group .form-control { border: none; height: 50px; font-size: 16px; padding: 15px; background: var(--bgLight); caret-color: #000; border: 1px solid var(--bgLight); border-radius: 5px !important; transition: 0.4s; } .shop-section .filter-area .input-group .form-control:focus { color: var(--fontColor); background-color: var(--bgLight); border-color: #000; outline: 0; box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0.25); } .shop-section .filter-area .input-group .form-control::-moz-placeholder { text-transform: capitalize; } .shop-section .filter-area .input-group .form-control:-ms-input-placeholder { text-transform: capitalize; } .shop-section .filter-area .input-group .form-control::placeholder { text-transform: capitalize; } .shop-section .filter-area .input-group button { background: var(--bgLight); position: absolute; right: 9px; top: 1px; color: #000; height: 48px; width: 50px; border: none; border-radius: 5px; transition: 0.4s; z-index: 4; } .shop-section .filter-area .input-group button i { font-size: 18px; } .shop-section .filter-area .property-side-box { display: flex; margin-bottom: 30px; padding: 0; box-shadow: none; } .shop-section .filter-area .property-side-box .title { font-family: "Jost", sans-serif; color: var(--black); font-size: 18px; font-weight: 500; margin-bottom: 5px; display: inline-block; transition: 0.4s; } .shop-section .filter-area .property-side-box .title:hover { color: #000; } .shop-section .filter-area .property-side-box .address { display: block; font-size: 14px; text-transform: capitalize; color: var(--fontColor); margin-bottom: 5px; } .shop-section .filter-area .property-side-box .img-box { border-radius: 5px; margin-right: 10px; } .shop-section .filter-area .property-side-box .img-box img { height: 80px; width: 120px; border-radius: 5px; } .shop-section .filter-area .property-side-box .img-box .category { top: 10px; right: 10px; } .shop-section .filter-area .property-side-box .text-box { width: calc(100% - 80px); padding-left: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .shop-section .filter-area .property-side-box .price { color: #000; margin-bottom: 0; } .shop-section .filter-area .property-side-box:last-child { margin-bottom: 0; } .shop-section .filter-area .property-side-box .text-box { padding-left: 0; padding-right: 15px; } .property-details { padding: 30px 0; } .property-details .gallery-box { background: var(--white); box-shadow: var(--shadow); padding: 20px; border-radius: 5px; margin-bottom: 30px; } .property-details .info-box { padding: 15px 0; } .property-details .info-box .category { color: #000; display: inline-block; border: 2px solid #000; border-radius: 100px; font-size: 12px; text-transform: uppercase; padding: 2px 10px; margin-bottom: 15px; } .property-details .info-box .tag { background: #26cc8c; color: var(--white); padding: 3px 10px; border-radius: 3px; margin-bottom: 10px; font-weight: 400; display: inline-block; font-size: 14px; position: relative; top: -3px; } .property-details .info-box .title { font-size: 32px; font-weight: 600; transition: 0.4s; } .property-details .info-box .website, .property-details .info-box .address { font-size: 15px; margin-bottom: 0; color: var(--gray); } .property-details .info-box .website i, .property-details .info-box .address i { font-size: 16px; color: #000; width: 20px; } .property-details .info-box .website a, .property-details .info-box .address a { color: var(--gray); transition: 0.4s; } .property-details .info-box .website a:hover, .property-details .info-box .address a:hover { color: #000; } .property-details .info-box .right-side { float: right; text-align: right; } .property-details .info-box .review { margin-bottom: 10px; font-size: 14px; } .property-details .info-box .review i { font-size: 14px; color: var(--gold); } .property-details .info-box .price { color: #26cc8c; font-size: 32px; } .property-details .info-box .price span { color: var(--fontColor); font-size: 18px; font-weight: 500; } .property-details .map-box, .property-details .amenities-box, .property-details .description-box { background: var(--white); border-radius: 5px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 30px; } .property-details #shareBlock .btn-light { background: none !important; border: none; } .property-details #shareBlock .btn-light i { font-size: 24px; } .property-details .amenity-box { text-align: center; } .property-details .amenity-box i { color: #000; font-size: 24px; margin-bottom: 15px; } .property-details .faq-box .accordion-item { background: var(--white); box-shadow: var(--shadow); margin-bottom: 25px; border-radius: 5px; border: none; } .property-details .faq-box .accordion-button { background: var(--white); border: none; border-radius: 5px !important; padding-left: 0; font-size: 18px; font-weight: 500; padding: 20px; padding-right: 70px; color: var(--black); transition: 0.4s; } .property-details .faq-box .accordion-button:focus { z-index: 3; border-color: var(--borderColor); outline: 0; box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0.25); } .property-details .faq-box .accordion-button::after { border-radius: 5px; background-image: url(../img/icon/down-arrow.png); background-size: contain; position: absolute; right: 20px; height: 16px; width: 16px; background-position: center; } .property-details .faq-box .accordion-body { padding: 20px; padding-top: 0; border-radius: 5px; } .property-details .faq-box .accordion-button:not(.collapsed) { box-shadow: none; color: #000; } .property-details .faq-box .accordion-button:not(.collapsed)::after { background-image: url(../img/icon/down-arrow2.png); } .property-details .side-bar .agent-box { display: flex; margin-bottom: 20px; } .property-details .side-bar .agent-box .img-box { width: 80px; } .property-details .side-bar .agent-box .img-box .profile { height: 80px; width: 80px; border-radius: 5px; } .property-details .side-bar .agent-box .text-box { width: calc(100% - 80px); padding-left: 15px; } .property-details .side-bar .agent-box .text-box .agent-name { margin-bottom: 0; display: block; font-size: 20px; font-weight: 500; font-family: "Jost", sans-serif; color: var(--black); transition: 0.4s; } .property-details .side-bar .agent-box .text-box .agent-name:hover { color: #000; } .property-details .side-bar #chart { width: 100%; font-family: "Jost", sans-serif !important; color: var(--black); } .property-details .side-bar #chart span, .property-details .side-bar #chart p, .property-details .side-bar #chart tspan { font-family: "Jost", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: var(--fontColor) !important; } .property-details .side-bar .side-box { background: var(--white); border-radius: 5px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 30px; } .property-details .side-bar .side-box h4 { text-transform: capitalize; margin-bottom: 20px; } .property-details .side-bar .side-box ul { padding-left: 0; margin-bottom: 0; } .property-details .side-bar .side-box ul li { list-style: none; color: var(--gray); margin-bottom: 15px; } .property-details .side-bar .side-box ul li i { display: inline-block; color: #000; width: 20px; } .property-details .side-bar .side-box .profit-calculation { margin: 15px 0; } .property-details .side-bar .side-box .profit-calculation span { float: right; } .property-details .side-bar .side-box .profit-calculation li:last-child { margin-bottom: 0; } .property-details .side-bar .side-box .social-links a { background: #26cc8c; display: inline-block; width: 35px; height: 35px; border-radius: 2px; padding-top: 5px; margin-right: 5px; text-align: center; color: var(--white); } .property-details .side-bar .side-box .social-links a i { font-size: 13px; line-height: 25px; } .property-details .side-bar .side-box .social-links a.facebook { background: #3b5998; } .property-details .side-bar .side-box .social-links a.twitter { background: #55acee; } .property-details .side-bar .side-box .social-links a.linkedin { background: #1565c0; } .property-details .side-bar .side-box .social-links a.youtube { background: var(--ytColor); } .property-details .side-bar .property-side-box { display: flex; margin-bottom: 30px; padding: 0; box-shadow: none; } .property-details .side-bar .property-side-box .title { font-family: "Jost", sans-serif; color: var(--black); font-size: 18px; font-weight: 500; margin-bottom: 5px; display: inline-block; transition: 0.4s; } .property-details .side-bar .property-side-box .title:hover { color: #000; } .property-details .side-bar .property-side-box .address { display: block; font-size: 14px; text-transform: capitalize; color: var(--fontColor); margin-bottom: 5px; } .property-details .side-bar .property-side-box .img-box { border-radius: 5px; } .property-details .side-bar .property-side-box .img-box img { height: 80px; width: 120px; border-radius: 5px; } .property-details .side-bar .property-side-box .img-box .category { top: 10px; right: 10px; } .property-details .side-bar .property-side-box .text-box { width: calc(100% - 80px); padding-left: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .property-details .side-bar .property-side-box .price { color: #000; margin-bottom: 0; } .property-details .side-bar .property-side-box:last-child { margin-bottom: 0; } .property-details .side-bar .input-box label { margin-bottom: 0; text-transform: capitalize; } .property-details .side-bar .input-box .form-select, .property-details .side-bar .input-box .form-control { height: 50px; border-radius: 5px; background-color: var(--bgLight); border: 1px solid var(--bgLight); padding: 10px; padding-left: 15px; padding-right: 15px; caret-color: #000; color: var(--black); } .property-details .side-bar .input-box .form-select:focus, .property-details .side-bar .input-box .form-control:focus { color: var(--black); box-shadow: 0 0 0 0rem var(--white); border: 1px solid #000; } .property-details .side-bar .input-box .form-select::-moz-placeholder, .property-details .side-bar .input-box .form-control::-moz-placeholder { color: var(--gray); } .property-details .side-bar .input-box .form-select:-ms-input-placeholder, .property-details .side-bar .input-box .form-control:-ms-input-placeholder { color: var(--gray); } .property-details .side-bar .input-box .form-select::placeholder, .property-details .side-bar .input-box .form-control::placeholder { color: var(--gray); } .property-details .side-bar .input-box .form-select { background-image: url(../img/icon/downward-arrow.png); border: 1px solid transparent; } .property-details .side-bar .input-box textarea.form-control { height: 150px; border-radius: 5px; } .property-details .owl-nav { position: absolute; width: auto; justify-content: space-between; display: flex !important; top: -50px; right: -5px; } .property-details .owl-nav .owl-next, .property-details .owl-nav .owl-prev { background: #000 !important; width: 30px; height: 30px; border-radius: 100px; color: var(--white) !important; box-shadow: var(--shadow); margin-right: 5px; transition: 0.4s; } .property-details .owl-nav .owl-next:hover, .property-details .owl-nav .owl-prev:hover { background: #000 !important; color: var(--white) !important; } .property-details .owl-nav .owl-next span, .property-details .owl-nav .owl-prev span { position: relative; top: -2px; } .property-details .owl-nav .owl-next { margin-right: 0; } .property-details .owl-carousel .owl-item { padding: 0; } .property-details .owl-dots { display: none; text-align: center; } .property-details .owl-dots .owl-dot { width: 10px; height: 10px; background: var(--borderColor); margin: 0 5px; border-radius: 10px; transition: 0.4s; } .property-details .owl-dots .owl-dot.active { background: #000; width: 20px; } .main_carousel { width: 100%; margin: 0 auto 1rem auto; --carousel-button-color: #170724; --carousel-button-bg: #fff; --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%); --carousel-button-svg-width: 20px; --carousel-button-svg-height: 20px; --carousel-button-svg-stroke-width: 2.5; border-radius: 5px; overflow: hidden; } .main_carousel .carousel__slide { width: 100%; padding: 0; } .main_carousel .carousel__slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0px !important; } .main_carousel .carousel__button.is-prev { left: 1rem; } .main_carousel .carousel__button.is-next { right: 1rem; } .main_carousel .carousel__button:focus { outline: none; box-shadow: 0 0 0 0px #fe6600; } .thumb_carousel .carousel__slide { opacity: 0.5; padding: 0; margin: 5px; width: 100px; height: 60px; cursor: pointer; } .thumb_carousel .carousel__slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 2px; } .thumb_carousel .carousel__slide.is-nav-selected { opacity: 1; } .rtl .thumb_carousel, .rtl .main_carousel { direction: ltr; } .agent-profile-section { padding: 100px 0; } .agent-profile-section .agent-box { display: flex; margin-bottom: 30px; background: var(--white); border-radius: 5px; padding: 20px; box-shadow: var(--shadow); position: relative; } .agent-profile-section .agent-box .img-box { width: 200px; } .agent-profile-section .agent-box .img-box .profile { height: 200px; width: 200px; border-radius: 5px; } .agent-profile-section .agent-box .property-count { padding: 3px 10px; background: #26cc8c; color: var(--white); display: inline-block; border-radius: 3px; font-size: 14px; font-family: "Jost", sans-serif; position: absolute; right: 20px; top: 20px; } .agent-profile-section .agent-box .text-box { width: calc(100% - 200px); padding-left: 20px; } .agent-profile-section .agent-box .text-box .agent-name { margin-bottom: 5px; display: block; font-size: 24px; font-weight: 500; font-family: "Jost", sans-serif; color: var(--black); transition: 0.4s; } .agent-profile-section .agent-box .text-box .title { color: #26cc8c; display: inline-block; margin-bottom: 15px; } .agent-profile-section .agent-box ul { padding-left: 0; margin-bottom: 0; } .agent-profile-section .agent-box ul li { list-style: none; color: var(--gray); margin-bottom: 10px; } .agent-profile-section .agent-box ul li i { display: inline-block; color: #000; width: 20px; } .agent-profile-section .agent-box ul li a, .agent-profile-section .agent-box ul li span { color: var(--fontColor); transition: 0.4s; } .agent-profile-section .agent-box ul li a:hover { color: #000; } .agent-profile-section .agent-box .social-links { display: flex; justify-content: center; } .agent-profile-section .agent-box .social-links a { background: #26cc8c; display: inline-block; width: 35px; height: 35px; border-radius: 35px; padding-top: 5px; margin-right: 5px; text-align: center; color: var(--white); } .agent-profile-section .agent-box .social-links a i { font-size: 13px; } .agent-profile-section .agent-box .social-links a.facebook { background: #3b5998; } .agent-profile-section .agent-box .social-links a.twitter { background: #55acee; } .agent-profile-section .agent-box .social-links a.linkedin { background: #1565c0; } .agent-profile-section .agent-box .social-links a.youtube { background: var(--ytColor); } .agent-profile-section .agent-description { margin-top: 50px; } .agent-profile-section .agent-description .navigator { border-bottom: 2px solid var(--borderColor); margin-bottom: 30px; } .agent-profile-section .agent-description .navigator .tab { padding: 15px; transition: 0.4s; border-bottom: 2px solid transparent; margin-bottom: -2px; text-align: center; font-size: 18px; font-weight: 500; font-family: "Jost", sans-serif; } .agent-profile-section .agent-description .navigator .tab:hover, .agent-profile-section .agent-description .navigator .tab.active { border-bottom: 2px solid #000; color: #000; } .agent-profile-section .agent-description .content { display: none; } .agent-profile-section .agent-description .content.active { display: block; } .agent-profile-section .agent-description h4 { text-transform: capitalize; margin-bottom: 30px; position: relative; } .agent-profile-section .agent-description .property-box { background: var(--white); box-shadow: var(--shadow); border-radius: 5px; overflow: hidden; display: flex; } .agent-profile-section .agent-description .property-box .img-box { position: relative; width: 300px; } .agent-profile-section .agent-description .property-box .img-box img { height: 100%; } .agent-profile-section .agent-description .property-box .img-box .badges { position: absolute; right: 20px; top: 20px; } .agent-profile-section .agent-description .property-box .img-box .badges span { background: #000; color: var(--white); border-radius: 3px; padding: 3px 8px; font-size: 12px; display: inline-block; } .agent-profile-section .agent-description .property-box .img-box .badges .popular { background: #26cc8c; } .agent-profile-section .agent-description .property-box .img-box .badges .featured { background: #ffa415; background: #212529; } .agent-profile-section .agent-description .property-box .img-box .badges .top { background: #ff5529; } .agent-profile-section .agent-description .property-box .img-box .tag { position: absolute; left: 20px; top: 20px; background: #000; color: var(--white); border-radius: 3px; padding: 3px 15px; font-size: 14px; display: inline-block; } .agent-profile-section .agent-description .property-box .img-box .tag::after { content: ""; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 44px; height: 44px; background: url(../img/icon/up-arrow.png); background-size: cover; } .agent-profile-section .agent-description .property-box .img-box .category { background: var(--white); border-top-right-radius: 5px; border-top-left-radius: 5px; padding: 3px 10px; position: absolute; left: 20px; bottom: 0; margin-bottom: 0; } .agent-profile-section .agent-description .property-box .img-box .price { position: absolute; color: var(--white); left: 20px; bottom: 30px; } .agent-profile-section .agent-description .property-box .img-box .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; } .agent-profile-section .agent-description .property-box .img-box::before { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%); left: 0; top: 0; z-index: 0; } .agent-profile-section .agent-description .property-box .text-box { width: calc(100% - 300px); padding: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px; } .agent-profile-section .agent-description .property-box .text-box i { font-size: 14px; } .agent-profile-section .agent-description .property-box .text-box .title { font-family: "Jost", sans-serif; color: var(--black); font-size: 20px; font-weight: 500; transition: 0.4s; } .agent-profile-section .agent-description .property-box .text-box .title:hover { color: #000; } .agent-profile-section .agent-description .property-box .text-box .review { margin-bottom: 10px; } .agent-profile-section .agent-description .property-box .text-box .review i { color: var(--gold); } .agent-profile-section .agent-description .property-box .text-box .address { font-size: 14px; margin-top: 10px; } .agent-profile-section .agent-description .property-box .text-box .aminities { display: flex; justify-content: space-between; margin: 10px 0; } .agent-profile-section .agent-description .property-box .text-box .aminities i { background: var(--bgLight); color: #000; font-size: 16px; width: 30px; height: 30px; border-radius: 100px; text-align: center; padding-top: 8px; margin-right: 5px !important; } .agent-profile-section .side-bar .side-box { background: var(--white); border-radius: 5px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 30px; } .agent-profile-section .side-bar .side-box h4 { text-transform: capitalize; margin-bottom: 20px; } .agent-profile-section .side-bar .property-side-box { display: flex; margin-bottom: 30px; padding: 0; box-shadow: none; } .agent-profile-section .side-bar .property-side-box .title { font-family: "Jost", sans-serif; color: var(--black); font-size: 18px; font-weight: 500; margin-bottom: 5px; display: inline-block; transition: 0.4s; } .agent-profile-section .side-bar .property-side-box .title:hover { color: #000; } .agent-profile-section .side-bar .property-side-box .address { display: block; font-size: 14px; text-transform: capitalize; color: var(--fontColor); margin-bottom: 5px; } .agent-profile-section .side-bar .property-side-box .img-box { border-radius: 5px; } .agent-profile-section .side-bar .property-side-box .img-box img { height: 80px; width: 120px; border-radius: 5px; } .agent-profile-section .side-bar .property-side-box .img-box .category { top: 10px; right: 10px; } .agent-profile-section .side-bar .property-side-box .text-box { width: calc(100% - 80px); padding-left: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .agent-profile-section .side-bar .property-side-box .price { color: #000; margin-bottom: 0; } .agent-profile-section .side-bar .property-side-box:last-child { margin-bottom: 0; } .agent-profile-section .side-bar .input-box label { margin-bottom: 0; text-transform: capitalize; } .agent-profile-section .side-bar .input-box .form-select, .agent-profile-section .side-bar .input-box .form-control { height: 50px; border-radius: 5px; background-color: var(--bgLight); border: 1px solid var(--bgLight); padding: 10px; padding-left: 15px; padding-right: 15px; caret-color: #000; color: var(--black); } .agent-profile-section .side-bar .input-box .form-select:focus, .agent-profile-section .side-bar .input-box .form-control:focus { color: var(--black); box-shadow: 0 0 0 0rem var(--white); border: 1px solid #000; } .agent-profile-section .side-bar .input-box .form-select::-moz-placeholder, .agent-profile-section .side-bar .input-box .form-control::-moz-placeholder { color: var(--gray); } .agent-profile-section .side-bar .input-box .form-select:-ms-input-placeholder, .agent-profile-section .side-bar .input-box .form-control:-ms-input-placeholder { color: var(--gray); } .agent-profile-section .side-bar .input-box .form-select::placeholder, .agent-profile-section .side-bar .input-box .form-control::placeholder { color: var(--gray); } .agent-profile-section .side-bar .input-box .form-select { background-image: url(../img/icon/downward-arrow.png); border: 1px solid transparent; } .agent-profile-section .side-bar .input-box textarea.form-control { height: 150px; border-radius: 5px; } .banner-section { position: relative; background-size: cover !important; background-position: center !important; overflow: hidden; padding-left: 10px; z-index: 1; padding: 0px 0 90px 0; } .banner-section h3 { text-transform: capitalize; color: var(--black); } .banner-section .breadcrumb-item { color: var(--black); transition: 0.4s; text-transform: capitalize; } .banner-section .breadcrumb-item:hover, .banner-section .breadcrumb-item.active { color: #000; } .banner-section .breadcrumb-item:hover a, .banner-section .breadcrumb-item.active a { color: #000; transition: 0.4s; } .banner-section .breadcrumb-item a { color: var(--black); } .banner-section .breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: 0.5rem; color: var(--black); content: var(--bs-breadcrumb-divider, "-"); } #sidebar .wallet-box { background: var(--white); box-shadow: var(--shadow); border-radius: 10px; padding: 20px; margin: 20px 0 20px 0; position: relative; z-index: 1; } #sidebar .wallet-box::before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; background: url(../img/shape/pentagon.png); background-size: contain; background-position: bottom right; background-repeat: no-repeat; z-index: -1; } #sidebar .wallet-box h4 { font-size: 20px; } #sidebar .wallet-box .tag { background: #000; background: #ffce00; color: var(--white); font-size: 12px; padding: 2px 6px; border-radius: 2px; position: absolute; right: 20px; top: 20px; } #sidebar .wallet-box ul { height: 100%; padding: 0; margin-bottom: 0; } #sidebar .wallet-box ul li { font-size: 16px; font-family: "Jost", sans-serif; color: var(--black); font-weight: 500; margin-bottom: 10px; } #sidebar .wallet-box ul li:last-child { margin-bottom: 0; } #sidebar .wallet-box ul li span { float: right; } #sidebar .wallet-box ul li img { width: 20px; height: 20px; } #sidebar .wallet-wrapper { margin: 0 20px; } #sidebar .wallet-wrapper .btn-custom { height: 40px; width: 122px; font-size: 14px; font-weight: 400; text-transform: capitalize; } #sidebar .wallet-wrapper .btn-custom:first-child { background: #ff6379; } #sidebar .wallet-wrapper .btn-custom:last-child { background: #59c8ff; } .level-box { margin: auto; background: var(--white); width: 45px; height: 45px; border-radius: 50%; padding-top: 30px; text-align: center; border: 2px solid #26cc8c; position: relative; margin-top: 5px; } #sidebar .level-alert { background: var(--bgLight); border-radius: 5px; margin: 10px; } #sidebar .level-alert .close-btn { position: absolute; right: 15px; top: 10px; color: #5a5a5a; } #sidebar .level-alert .close-btn:hover { color: #000; } .level-box .level-badge { position: absolute; top: -8px; right: 0; width: 22px; } .level-box h6 { font-size: 10px !important; margin: 0 !important; padding: 0; position: absolute; top: 16px; left: 6px; color: #000; } .level-box p{ } .view-property-details .view-property-details-box { background: var(--white); box-shadow: var(--shadow2); border-radius: 10px; padding: 20px; } .view-property-details .view-property-details-box ul { list-style: none; padding: 0; margin-bottom: 0; } .view-property-details .view-property-details-box ul li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding: 0px 0px 10px 0px; border-bottom: 1px solid #f5f5f5; } .view-property-details .view-property-details-box ul li:last-child{ border-bottom: 0px !important; } .view-property-details .view-property-details-box ul li h5 { font-size: 18px; margin-bottom: 0; } .view-property-details .view-property-details-box ul li .images img { width: 100%; height: 100px; border-radius: 5px; -o-object-fit: cover; object-fit: cover; } .not-found { height: 100vh; background: var(--black); } .not-found .img-box { max-width: 500px; margin: auto; } .not-found .text-box a { color: #000; text-transform: capitalize; } .modal .modal-content { background: var(--white); border-radius: 5px; border: none; } .modal .modal-content .modal-header { border-bottom: 1px solid var(--borderColor); } .modal .modal-content .modal-header .close-btn i { color: var(--fontColor); transition: 0.4s; } .modal .modal-content .modal-header .close-btn i:hover { color: #000; } .modal .modal-content .modal-footer { border-top: 1px solid var(--borderColor); } .modal h5 { margin-bottom: 5px; } .modal .btn-custom { width: auto; height: 45px; background: #26cc8c; padding: 10px 25px; text-transform: capitalize; font-weight: 400; font-size: 16px; } .modal form .input-box label { font-weight: 500; margin-bottom: 10px; text-transform: capitalize; } .modal form .input-box .form-select, .modal form .input-box .form-control { height: 50px; border-radius: 5px; background-color: var(--bgLight); border: 2px solid var(--bgLight); padding: 8px; padding-left: 15px; font-weight: normal; caret-color: #000; color: var(--fontColor); } .modal form .input-box .form-select:focus, .modal form .input-box .form-control:focus { color: var(--fontColor); box-shadow: 0 0 0 0rem var(--white); border: 2px solid #000; } .modal form .input-box .form-select::-moz-placeholder, .modal form .input-box .form-control::-moz-placeholder { color: var(--fontColor); } .modal form .input-box .form-select:-ms-input-placeholder, .modal form .input-box .form-control:-ms-input-placeholder { color: var(--fontColor); } .modal form .input-box .form-select::placeholder, .modal form .input-box .form-control::placeholder { color: var(--fontColor); } .modal form .input-box .form-select { background-image: url(../img/icon/downward-arrow.png); } .modal form .input-box .form-select option { background: var(--white); color: var(--fontColor); } .modal form .input-box textarea.form-control { height: 150px; border-radius: 5px; } .modal form .input-group .form-control { border: none; height: 50px; font-size: 16px; padding: 10px; background: var(--bgLight); caret-color: #000; border: 2px solid var(--bgLight); border-radius: 5px !important; transition: 0.4s; } .modal form .input-group .form-control:focus { color: var(--fontColor); background-color: var(--bgLight); border-color: #000; outline: 0; box-shadow: 0 0 0 0rem rgba(13, 110, 253, 0.25); } .modal form .input-group .form-control::-moz-placeholder { text-transform: capitalize; } .modal form .input-group .form-control:-ms-input-placeholder { text-transform: capitalize; } .modal form .input-group .form-control::placeholder { text-transform: capitalize; } .modal form .input-group button { background: #000; position: absolute; right: 0; top: 0; color: var(--white); height: 50px; width: 80px; border: none; border-radius: 5px; transition: 0.4s; z-index: 4; } .modal form .input-group button i { font-size: 18px; } #Notiflix-Icon-Success, #Notiflix-Icon-Failure, #Notiflix-Icon-Warning { fill: #fff !important; } @media (max-width: 767px) { h2 { font-size: 36px; } h3 { font-size: 24px; } .svg-wave { display: none; } .latest-property .property-box { display: block; } .latest-property .property-box .img-box { width: 100%; } .latest-property .property-box .text-box { width: 100%; } .agent-profile-section .agent-description .property-box { display: block; } .agent-profile-section .agent-description .property-box .img-box { width: 100%; } .agent-profile-section .agent-description .property-box .text-box { width: 100%; } .agent-profile-section .agent-box { display: block; } .agent-profile-section .agent-box .img-box { margin: auto; margin-bottom: 15px; } .agent-profile-section .agent-box .text-box { width: 100%; padding-left: 0; } .chart-information .progress-wrapper { padding-bottom: 0px; border-radius: 10px; height: 100%; text-align: center; } .chart-information .progress-wrapper.progress-wrapper-circle { background: #fff !important; padding: 30px; border-radius: 10px; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; } .progress-wrapper { background: var(--white); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 10px; height: 100%; text-align: center; } .progress-wrapper2 { border-radius: 10px; height: 100%; text-align: center; } svg.radial-progress text { fill: #000 !important; font: 400 10px/1 'Poppins', sans-serif; text-anchor: middle; font-weight: bold !important; } .payment-gateway .gateway-box:hover { border: 2px solid #000; } .payment-gateway .gateway-box { background: #fff; padding: 15px; border-radius: 10px; border: 2px solid var(--white); transition: .4s; } } .investment-details-card{ box-shadow: 1px 1px 5px 1px #dfdfdf; padding: 15px; } .shadow-sm { box-shadow: 0 2px 9px 0 rgba(169,184,200,.2)!important; } .property__image img{ width: 100px; height: 70px; margin-right: 10px; margin-bottom: 20px; border-radius: 5px; } .invest-history-details-ul li{ list-style-type: none !important; } .invest-history-details-ul li i{ margin-right: 5px; } .site__color{ color: #000; } .error__color{ color: darkred; } .invest-details-back{ font-size: 16px !important; position: relative; top: -4px; height: 36px; } .investment__block{ margin-bottom: 10px; } .property a{ color: #7c8798; } .property a:hover{ color: #0a53be; } .nav-pills .nav-link.active, .nav-pills .show>.nav-link{ color: #fff !important; background-color: #000 !important; } .nav-pills .nav-link { background: 0 0; border: 0; border-radius: 0.25rem; border: 1px solid; margin-bottom: 8px; color: #475057; } .copyReferalLink{ font-size: 12px !important; } #chart-container { font-family: Arial; height: 420px; border: 2px dashed #aaa; border-radius: 5px; overflow: auto; text-align: center; } .orgchart { background: #fff; } .orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; } .orgchart td>.down { background-color: #aaa; } .orgchart .middle-level .title { background-color: #006699; } .orgchart .middle-level .content { border-color: #006699; } .orgchart .product-dept .title { background-color: #009933; } .orgchart .product-dept .content { border-color: #009933; } .orgchart .rd-dept .title { background-color: #993366; } .orgchart .rd-dept .content { border-color: #993366; } .orgchart .pipeline1 .title { background-color: #996633; } .orgchart .pipeline1 .content { border-color: #996633; } .orgchart .frontend1 .title { background-color: #cc0066; } .orgchart .frontend1 .content { border-color: #cc0066; } #github-link { position: fixed; top: 0px; right: 10px; font-size: 3em; } .tree .branch { background: var(--bgLight2); padding: 8px 20px; border-radius: 5px; margin-bottom: 18px; display: inline-block; position: relative; z-index: 1; } .branch-1::after { content: ""; width: 1px; height: 41px; background: #000; position: absolute; right: 12px; left: 0; bottom: -100%; margin: auto; z-index: -1; } .branch-1::before { content: ""; width: 280px; height: 1px; background: #000; position: absolute; left: 50%; transform: translateX(-50%); bottom: -100%; margin: auto; z-index: -1; } /*review css start*/ .reviews .customer-review { background: var(--white); border-radius: 10px; padding: 20px; -webkit-box-shadow: var(--shadow); box-shadow: var(--shadow); margin-bottom: 30px; } .reviews .review-box { margin: 15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; background: var(--bgLight); border-radius: 10px; padding: 10px; } .reviews .review-box .text { width: 80%; } .reviews .review-box .text img { width: 50px; margin-right: 15px; border-radius: 10px; } .reviews .review-box .text p { font-size: 14px; } .reviews .review-box .review-date { width: 20%; text-align: right; } .reviews .review-box .review-date i { color: var(--gold); } .reviews .review-box .review-date .date { text-transform: uppercase; font-size: 12px; display: inline-block; margin-top: 10px; } .reviews .add-review { background: var(--white); border-radius: 10px; padding: 20px; -webkit-box-shadow: var(--shadow); box-shadow: var(--shadow); margin-bottom: 30px; } .reviews #half-stars-example { margin-bottom: 30px; } .reviews #half-stars-example .rating-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -13px; } .reviews #half-stars-example .rating__icon { pointer-events: none; } .reviews #half-stars-example .rating__input { position: absolute !important; left: -9999px !important; } .reviews #half-stars-example .rating__label { cursor: pointer; padding: 0 0.1em; font-size: 24px; } .reviews #half-stars-example .rating__label--half { padding-right: 0; margin-right: -16px; z-index: 0; width: 16px; } .reviews #half-stars-example .rating__icon--star { color: var(--gold); } .reviews #half-stars-example .rating__icon--none { color: #eee; } .reviews #half-stars-example .rating__input--none:checked + .rating__label .rating__icon--none { color: red; } .reviews #half-stars-example .rating__input:checked ~ .rating__label .rating__icon--star { color: #ddd; } .reviews #half-stars-example .rating-group:hover .rating__label .rating__icon--star, .listing-details .reviews #half-stars-example .rating-group:hover .rating__label--half .rating__icon--star { color: var(--gold); } .reviews #half-stars-example .rating__input:hover ~ .rating__label .rating__icon--star, .reviews #half-stars-example .rating__input:hover ~ .rating__label--half .rating__icon--star { color: #ddd; } .reviews #half-stars-example .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none { color: #eee; } .reviews #half-stars-example .rating__input--none:hover + .rating__label .rating__icon--none { color: red; } .frontend-not-data-found{ color: var(--fontColor); } .not-found-times{ font-size: 50px !important; } .reviews .add-review { background: var(--white); border-radius: 10px; padding: 20px; -webkit-box-shadow: var(--shadow); box-shadow: var(--shadow); margin-bottom: 30px; } .reviews .add__review__login { display: flex !important; justify-content: space-between !important; } /* review css end*/ .propertyMarketActive{ color: #000 !important; } .offerList .count { background: #000; min-width: 20px; height: 20px; border-radius: 50px; color: var(--white); top: 4px; font-size: 12px; font-weight: 500; padding: 1px 7px 2px 7px; } .invest-btns .badge.bg-secondary::before { background: #26cc8c; } /*offer conversation css start*/ #content .search-bar { margin-bottom: 15px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; background: var(--white); border-radius: 10px; padding: 20px 15px; } #content .my-search-bar { padding: 0px !important; } .conversation-section { padding: 100px 0; } .inbox-wrapper { background: var(--black); border-radius: 5px; position: relative; overflow: hidden; } .inbox-wrapper .top-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 15px; background: #000; background-image: var(--gradient); } .massenger_active { position: relative; } .inbox-wrapper .top-bar .user { width: 50px; height: 50px; border-radius: 100px; margin-right: 10px; } .deActive-icon-messenger { width: 12px; height: 12px; border: 2px solid #f7f7f7; background: #c1c1c1; border-radius: 50%; position: absolute; bottom: -10px; left: 37px; color: #ffffff; } .active-icon-messenger{ width: 12px; height: 12px; background: #32b952; border: 2px solid white; border-radius: 50%; position: absolute; bottom: -12px; left: 37px; color: #ffffff; } .inbox-wrapper .top-bar .name { font-weight: 500; font-family: "Michroma", sans-serif; font-size: 14px; } .inbox-wrapper .chats { padding: 30px 15px 10px 15px; height: 500px; overflow-y: auto; position: relative; background: url(../img/messenger_background.png); } .inbox-wrapper .chats .opposite-side { -webkit-box-pack: start; justify-content: start; } .inbox-wrapper .chats .opposite-side .img { margin-left: 0; margin-right: 10px; } .inbox-wrapper .chats .chat-box .img { margin-left: 10px; min-width: 30px; min-height: 30px; } .inbox-wrapper .chats .chat-box .img img { width: 40px; height: 40px; border-radius: 50%; } .opposite-side .text-wrapper { background: white; padding: 0px 0px 10px 5px; border-radius: 8px; } .inbox-wrapper .chats .opposite-side .text-wrapper .text { float: left; } .inbox-wrapper .chats .chat-box { display: flex; -webkit-box-pack: end; justify-content: end; margin-bottom: 20px; } .this-side .text-wrapper { background: white; padding: 0px 0px 10px 5px; border-radius: 8px; } .inbox-wrapper .chats .chat-box .text-wrapper .text p { margin-bottom: 0; } .inbox-wrapper .chats .opposite-side .text-wrapper .time { text-align: right; padding-right: 10px; } .inbox-wrapper .chats .chat-box .text-wrapper .time { font-size: 10px; display: inline-block; width: 100%; text-align: right; padding-right: 10px; } .inbox-wrapper .chats .chat-box .text-wrapper .text { padding: 10px; border-radius: 3px; float: right; margin-bottom: 5px; max-width: 300px; } .this-side .text-wrapper .fileimg img { width: 100% !important; height: 100px !important; } .custom--mar { margin-top: 6px !important; color: #000; } #content form { margin-bottom: 15px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; background: var(--white); border-radius: 10px; padding: 20px 15px; } #content .refferal-link form{ margin-bottom: 0px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important; background: none; border-radius: 0px; padding: 0px; } .productInfoThumbnail { width: 100%; height: 197px; } .productClientImage { width: 50px; height: 50px; border-radius: 50%; } .btn-custom__product__reply { background: #000; color: var(--white); width: 160px; height: 50px; border-radius: 100px; text-transform: uppercase; font-family: "Teko", sans-serif; font-size: 18px; padding-top: 5px; -webkit-transition: 0.4s; transition: 0.4s; line-height: 43px; width: 100%; } .inbox-wrapper .typing-area { padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 15px; background: #000; background-image: var(--gradient); } #content .search-bar .input-group { position: relative; border-radius: 105px; background: var(--white); z-index: 0; } .inbox-wrapper .typing-area .input-group { border-radius: 3px; overflow: hidden; } #content .search-bar .input-group button { padding: 10px 5px 14px 15px; font-size: 6px; color: #000; padding-right: 0; right: 0; top: 0; padding-top: 17px; padding-left: 19px; z-index: 23; } .inbox-wrapper .typing-area .input-group .send-file-btn { position: relative; background: #FFFFFF; border: none; width: 40px; height: 100%; border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-align: center; color: var(--gray); } .inbox-wrapper .typing-area .input-group button { width: 50px; border: none; background: #000; border: none; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .inbox-wrapper .typing-area .input-group .send-file-btn i { -webkit-transition: 0.4s; transition: 0.4s; position: relative; color: #000; } .inbox-wrapper .typing-area .input-group button i { color: var(--white); font-size: 16px; -webkit-transition: 0.4s; transition: 0.4s; } #content .search-bar .input-group .form-control { padding-top: 13px; } .inbox-wrapper .typing-area .input-group .send-file-btn .form-control { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; } .inbox-wrapper .typing-area .input-group .form-control { height: 45px; background: var(--bgDark); border-radius: 0; border: none; font-size: 13px; color: var(--gray); padding: 7px; } .typing-area button.submit-btn { padding: 10px !important; } .inbox-wrapper .img-preview { background: var(--bgDark); display: inline-block; position: relative; left: 0px; bottom: 5px; max-width: 100px; border-radius: 3px; padding: 3px; background: #f8f9fa; margin-top: 11px; margin-right: 10px; } .inbox-wrapper .img-preview button.delete { position: absolute; right: -10px; top: -10px; background: #FFFFFF; width: 20px; height: 20px; border-radius: 20px; text-align: center; border: none; } .inbox-wrapper .img-preview button.delete i { font-size: 14px; color: #000; } .inbox-wrapper .img-preview img { width: 100%; height: auto; border-top-left-radius: 3px; border-top-right-radius: 3px; } button.gold-btn.copyReferalLink { padding: 0px !important; color: #fff !important; background: #000 !important; padding-top: 2px !important; padding-left: 1px !important; } /*offer conversation css end*/ /* pwa css */ #content .balance-box { /*background: var(--gradient);*/ color: var(--white); position: relative; border-radius: 10px; } .balance-box .cash-in{ background-color: var(--white); padding: 5px 15px; border-radius: 5px; color: #000; font-size: 14px; font-family: "Jost", sans-serif; font-weight: 400; display: inline-flex; align-items: center; position: absolute; top: 20px; right: 20px; } .balance-box .cash-in:hover{ color: var(--white); background-color: #000; transition: 0.3s; } .balance-box .cash-in i{ font-size: 13px !important; } .user-account-number{ position: relative; } .user-account-number .account-wallet { position: absolute; bottom: 0; color: #fff; opacity: .1; font-size: 150px; line-height: 1; right: 10px; } #content .quick-links .link-item { text-align: center; background: var(--white); padding: 20px 10px; border-radius: 10px; box-shadow: var(--shadow); } #content .quick-links .link-item i { color: #000; font-size: 20px; margin-bottom: 10px; } #content .quick-links .link-item span { display: block; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 16px; color: var(--darkblue); } .bottom-nav { width: 100%; background: var(--white); box-shadow: var(--shadow2); z-index: 1032; display: flex; align-items: center; justify-content: space-around; } .bottom-nav .link-item { text-align: center; padding: 5px; top: 0; transition: 0.4s; position: relative; } .bottom-nav .link-item i { color: #000; font-size: 16px; width: 36px; height: 36px; border-radius: 40px; display: flex; align-items: center; justify-content: center; transition: 0.4s; position: relative; top: 0; margin: auto; margin-bottom: 5px; } .bottom-nav .link-item span { font-size: 14px; display: block; color: var(--black); } .bottom-nav .link-item:hover i, .bottom-nav .link-item.active i { background: #000; color: var(--white); } #content .owl-carousel.card-boxes .dashboard-box { margin-right: 32.5px; } .bd-callout { padding: 1rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border-left: 0px solid #000; border-left-width: 0.2rem; border-radius: 1rem; background: #f2f5fa; } .bgGateway { background-color: var(--white); box-shadow: var(--shadow); position: relative; border-radius: 10px; padding: 30px; z-index: 1; border: none; } /* preview blade css */ #content .preview-form { box-shadow: none !important; } .preview-form .input-box .form-control { height: 50px; border-radius: 5px; background-color: var(--white); border: 2px solid var(--bgLight); padding: 10px 15px; font-weight: normal; font-size: 16px; caret-color: #000; color: var(--fontColor); } .preview-form .input-box .form-control:focus { color: var(--fontColor); box-shadow: 0 0 0 0rem var(--white); border: 2px solid #000; } .card { border-color: #ebebeb; border-radius: 0.5rem; } .card .card-body { padding: 0.75rem; } .card-img-top { border-top-left-radius: calc(.75rem - 1px); border-top-right-radius: calc(.75rem - 1px); } .catagory-card { position: relative; z-index: 1; text-align: center; } .catagory-card a { display: block; } .catagory-card img { margin-bottom: 0.6rem; max-height: 42px; } .catagory-card span { -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; display: block; font-size: 12px; font-weight: 700; line-height: 1; color: #000; } .catagory-card:hover span, .catagory-card:focus span { color: #000; } .subcatagory-card { position: relative; z-index: 1; text-align: center; } .subcatagory-card a { display: block; } .subcatagory-card img { margin-bottom: 0.6rem; max-height: 42px; } .subcatagory-card span { -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; display: block; font-size: 12px; font-weight: 700; line-height: 1; color: #000; } .subcatagory-card:hover span, .subcatagory-card:focus span { color: #000; } .coupon-card .card-body { padding: 1.25rem; } .apply-coupon { position: relative; z-index: 1; } .apply-coupon p { font-size: 12px; } .coupon-form { position: relative; z-index: 1; } .coupon-form .form-control { height: 34.4px; padding: 5px 15px; font-size: 12px; } .coupon-form button { position: absolute; top: 0; right: 0; z-index: 10; } /*card elements*/ .card { -webkit-box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.05); box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.05); background-color: #fff; margin-bottom: 20px; border-color: #ebedf2; } .card .card-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; padding: 12px 25px; border-bottom: 1px solid #ebedf2; min-height: 50px; border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: transparent; } .card .card-body { padding: 20px 25px; border-radius: 4px; } .card .card-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top: 1px solid #ebedf2; background-color: transparent; padding: 12px 25px; } .card-bordered { border: 1px solid #ebedf2; } .cart-table { position: relative; z-index: 1; } .cart-table table { max-width: 100%; } .cart-table table tbody tr { background-color: #ffffff; border-bottom: 2px dashed #ebebeb; } .cart-table table tbody tr:last-child { border-bottom: 0; } .cart-table table a { color: #020310; font-weight: 700; } .cart-table table a.remove-product { color: #ffffff; width: 24px; height: 24px; background-color: #ea4c62; display: inline-block; text-align: center; line-height: 25px; border-radius: 50%; font-size: 10px; } .cart-table table a.remove-product:hover, .cart-table table a.remove-product:focus { color: #ffffff; background-color: #020310; } .cart-table table a span { display: block; color: #747794; } .cart-table table a:hover, .cart-table table a:focus { color: #100DD1; } .cart-table .table td, .cart-table .table th { vertical-align: middle; color: #747794; font-size: 12px; /*padding: 1rem .5rem;*/ border: 0; } .cart-table img { max-width: 2.5rem; border: 1px solid #ebebeb; } .cart-table .qty-text { border: 1px solid #ebebeb; width: 2.5rem; text-align: center; height: 2rem; border-radius: .25rem; -webkit-transition-duration: 300ms; -o-transition-duration: 300ms; transition-duration: 300ms; } .cart-table .qty-text:focus { border: 1px solid #100DD1; } .hover-input-popup { position: relative; } .input-popup { display: none; } .hover-input-popup .input-popup { display: block; position: absolute; bottom: 130%; left: 50%; width: 280px; background-color: #1a1a1a; color: #fff; padding: 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .input-popup::after { position: absolute; content: ""; bottom: -19px; left: 50%; margin-left: -5px; border-width: 10px 10px 10px 10px; border-style: solid; border-color: transparent transparent #1a1a1a transparent; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .input-popup p { padding-left: 20px; position: relative; color: #fff; } .input-popup p::before { position: absolute; content: ""; font-family: "Line Awesome Free"; font-weight: 900; left: 0; top: 4px; line-height: 1; font-size: 18px; } .input-popup p.error { text-decoration: line-through; } .input-popup p.error::before { content: "\f057"; color: #ea5455; } .input-popup p.success::before { content: "\f058"; color: #28c76f; } .show-filter { display: none; } @media (max-width: 767px) { .responsive-filter-card { display: none; transition: none; } .show-filter { display: block; } } /* ////////////////// select 2 css //////////////// */ .select2-dropdown { border: 0 !important; margin-top: 8px !important; border-radius: 5px !important; box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05), 6px 4px 19px rgb(115 103 240 / 20%); } .select2-search--dropdown { padding: 10px 10px !important; border-color: #ced4da !important; } .select2-container--default .select2-search--dropdown .select2-search__field { border-color: hsl(var(--base)/.3) !important; padding: 7px 14px; } .input-group .select2-container--default .select2-search--dropdown .select2-search__field{ padding: 4px 14px; } .select2-results__option.select2-results__option--selected, .select2-results__option--selectable, .select2-container--default .select2-results__option--disabled { padding: 8px 14px !important; border-bottom: 1px solid #eee; } .select2-results__option.select2-results__message { text-align: center !important; padding: 12px 14px !important; } .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar { width: 8px; border-radius: 5px; } .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 5px; } .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb { background: #ddd; } .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover { background: #ddd; } .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; } .select2-container--default .select2-selection--single .select2-selection__arrow:after { position: absolute; right: 10px; top: 0; content: "\f107"; font-family: "Line Awesome Free"; font-weight: 900; transition: 0.3s; } .select2-container--default .select2-selection--single { border: 1px solid hsl(var(--border-color)) !important; border-width: 1px !important; border-radius: 0.375rem !important; padding: 0.375rem 0.75rem !important; height: 100% !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 8px !important; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after { transform: rotate(-180deg); } .select2-results__option:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .select2-results__option:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } .select2-results__option.select2-results__option--selected, .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: hsl(var(--base)/.3) !important; color: hsl(var(--black)) !important; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: hsl(var(--base)) !important; box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important; outline: 0 !important; } .select2-dropdown .country-flag { width: 25px; height: 25px; border-radius: 8px; } .select2-dropdown .gateway-title { font-size: 14px; font-weight: 600; margin-bottom: 0px !important; } .select2-dropdown .gateway-subtitle { font-size: 12px; margin-bottom: 0px !important; } .select2-container--open .select2-selection.select2-selection--single, .select2-container--open .select2-selection.select2-selection--multiple { border-color: hsl(var(--base)) !important; border-radius: 0.375rem !important; } .select2+.select2-container .select2-selection__arrow { top: 46% !important; right: 5px !important; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: transparent; border-radius: inherit; height: calc(var(--height) - 10px); width: calc(var(--height) - 10px); } .select2+.select2-container .select2-selection__arrow::after { position: absolute; content: "\f078"; inset: 0; font-weight: 900; font-family: "Font Awesome 6 Free"; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.2s; transition: all 0.2s; font-size: 14px; color: hsl(var(--body-color)/.6); } .gateway-card { padding: 15px; } .payment-card-title { padding: 13px 25px; text-align: center; background-color: hsl(var(--white)); box-shadow: var(--box-shadow); border-radius: 5px; border: 0; margin-bottom: 0px; color: #fff; } .payment-system-list { --thumb-width: 100px; --thumb-height: 40px; --radio-size: 12px; --border-color: #cccccf59; --hover-border-color: rgb(var(--main)); background-color: hsl(var(--white)); box-shadow: var(--box-shadow); border-radius: 5px; height: 100%; } .payment-system-list.is-scrollable { max-height: min(388px, 70vh); overflow-x: auto; padding-block: 4px; } .payment-system-list.is-scrollable::-webkit-scrollbar { width: 5px; } .payment-system-list.is-scrollable::-webkit-scrollbar { width: 5px; } .payment-system-list.is-scrollable::-webkit-scrollbar-thumb { background-color: rgb(var(--main)); border-radius: 10px; } .payment-item { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 18px; border: 1px solid #fff; border-top-color: var(--border-color); transition: all 0.3s; border-left: 3px solid transparent; } .payment-item:first-child { border-top-color: #fff; border-radius: 5px 5px 0 0; } .payment-item:has(.payment-item__radio:checked) { border-left: 3px solid hsl(var(--base)); border-radius: 0px; } .payment-item__check { border: 3px solid transparent; } .payment-item:has(.payment-item__radio:checked) .payment-item__check { border: 3px solid hsl(var(--base)); } .payment-item__info { display: flex; align-items: center; flex-wrap: wrap; max-width: calc(100% - var(--thumb-width)); } .payment-item__check { width: var(--radio-size); height: var(--radio-size); border: 1px solid hsl(var(--base)); display: inline-block; border-radius: 100%; } .payment-item__name { padding-left: 10px; width: calc(100% - var(--radio-size)); transition: all 0.3s; } .payment-item__thumb { width: var(--thumb-width); height: var(--thumb-height); text-align: right; padding-left: 10px; &:has(.text) { width: fit-content; } } .payment-item__thumb img { max-width: var(--thumb-width); max-height: var(--thumb-height); object-fit: cover; } .deposit-info { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px; } .deposit-info__title { max-width: 50%; margin-bottom: 0px; text-align: left; } .deposit-info__input { max-width: 50%; text-align: right; width: 100%; } .deposit-info__input-select { border: 1px solid var(--border-color); width: 100%; border-radius: 5px; padding-block: 6px; } .deposit-info__input-group { border: 1px solid var(--border-color); border-radius: 5px; .deposit-info__input-group-text { align-self: center; padding-left: 5px; } } .deposit-info__input-group .form--control { padding: 5px; border: 0; height: 35px; text-align: right; } .deposit-info__input-group .form--control:focus { box-shadow: unset; } .info-text .text, .deposit-info__input .text { font-size: 14px; } .deposit-info__title .text.has-icon { display: flex; align-items: center; gap: 5px; } .total-amount { border-top: 1px solid var(--border-color); } .total-amount .deposit-info__title { font-weight: 600; } .payment-item__btn { border: 0; border-block: 1px solid var(--border-color); border-bottom: 0; background: #fff; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; font-weight: 500; } .payment-item:hover+.payment-item__btn { border-top-color: #fff; } button .spinner-border { --bs-spinner-width: 1.5rem; --bs-spinner-height: 1.5rem; } label.required:after { content: '*'; color: hsl(var(--danger)); margin-left: 2px; } /* Custom Checkbox Design */ .form--check { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form--check a { display: inline; } .form--check .form-check-input { -webkit-box-shadow: none; box-shadow: none; background-color: hsl(var(--white)); box-shadow: none !important; border: 0; position: relative; border-radius: 6px; width: 20px; height: 20px; border: 1px solid hsl(var(--black) / 0.2); cursor: pointer; margin-top: 0; } .form--check .form-check-input:checked { background-color: hsl(var(--base) / 0.06) !important; border-color: hsl(var(--base)) !important; -webkit-box-shadow: none; 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(--base)); font-size: 0.6875rem; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .form--check .form-check-label { font-weight: 600; width: calc(100% - 20px); padding-left: 12px; cursor: pointer; font-size: 0.875rem; color: hsl(var(--heading-color)); } @media screen and (max-width: 424px) { .form--check label { font-size: 0.9375rem; } } @media screen and (max-width: 424px) { .form--check a { font-size: 0.875rem; } } /* Custom Radio Design */ .form--radio .form-check-input { -webkit-box-shadow: none; box-shadow: none; border: 1px solid hsl(var(--black) / 0.2); position: relative; background-color: transparent; cursor: pointer; width: 16px; height: 16px; } .form--radio .form-check-input:active { -webkit-filter: brightness(100%); 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: 7px; height: 7px; background-color: hsl(var(--base)); border-radius: 50%; z-index: 999; } .form--radio .form-check-label { font-weight: 600; width: calc(100% - 16px); padding-left: 12px; cursor: pointer; font-size: 0.875rem; } /* Custom Switch Design */ .form--switch .form-check-input { border-radius: 3px; background-image: none; position: relative; -webkit-box-shadow: none; box-shadow: none; border: 0; background-color: hsl(var(--black) / 0.2) !important; padding: 10px !important; margin-left: 0; margin-bottom: 5px; border-radius: 40px; width: 50px; height: 24px; cursor: pointer; } .form--switch .form-check-input:focus { border-radius: 40px; background-image: none; position: relative; -webkit-box-shadow: none; box-shadow: none; border: 0; } .form--switch .form-check-input::before { position: absolute; content: ""; width: 20px; height: 20px; background-color: hsl(var(--white)); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 2px; left: 5px; border-radius: 50%; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .form--switch .form-check-input:checked { background-color: hsl(var(--success)) !important; } .form--switch .form-check-input:checked::before { left: calc(100% - 24px); background-color: hsl(var(--white)) !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 */ /* ================================= Form Css End =========================== */ /* --======================Custom Input group Start ======================*/ .input--group { border-radius: 5px; border: 1px solid hsl(var(--border-color)); } .input--group .form--control { border-width: 0.1px !important; padding-right: 5px; border-color: #6c757d; -webkit-box-shadow: unset; box-shadow: unset; } .input--group .input-group-text+.form--control { padding-right: 20px; padding-left: 10px; } .input--group:focus-within { border: 1px solid hsl(var(--base)); } .input--group .input-group-text { border-width: 0px; height: calc(100% - 10px); margin: 5px; border-radius: 5px; background-color: hsl(var(--black) / 0.1); color: hsl(var(--body-color)); } .input--group-text { margin-left: 5px; } .input--group .form--control[readonly] { background: hsl(var(--black) / 0.2) !important; } .input--group .form--control[readonly]:focus { border-color: hsl(var(--black) / 0.2); } .input--group:has(.form--control[readonly]) { background: hsl(var(--black) / 0.2) !important; } .input--group:has(.form--control[readonly]):focus-within { border-color: hsl(var(--black) / 0.4) !important; } /* --======================Custom Input group End ======================*/ .input-group .input-group-text { border: 1px solid hsl(var(--border-color)); background-color: #efeff3; -webkit-box-shadow: 0px 1px 2px 0px #1018280d; box-shadow: 0px 1px 2px 0px #1018280d; padding: 0 10px; } .input-group .input-group-text .form--control { border: 0 !important; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; padding-right: 30px; } .input-group .input-group-text:has(.form--control) { padding: 0; } .input-group .input-group-text .select2+.select2-container { background: transparent !important; box-shadow: none !important; border: 0 !important; } .input-group .input-group-text:has(.select2+.select2-container) { height: 40px !important; } /* ================================= Modal Css Start =========================== */ .custom--modal .modal-header { border: 0; padding: 32px 40px; position: relative; z-index: 1; background: -webkit-gradient(linear, left top, right top, color-stop(-93%, #b7bfe1), to(hsl(var(--base)))); background: linear-gradient(90deg, #051e39 -93%, #000000 100%); -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media screen and (max-width: 767px) { .custom--modal .modal-header { padding: 24px; } } .custom--modal .modal-header__shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .custom--modal .modal-header__shape img { width: 100%; height: 100%; } .custom--modal .modal-header .btn-close { margin: 0; padding: 0; background: none; width: unset; height: unset; opacity: 1; background-image: none; border-radius: 0; box-shadow: none; } .custom--modal .modal-header .btn-close__icon { width: 25px; height: 25px; background-color: hsl(var(--white)); font-size: 1rem; color: hsl(var(--base)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; border-radius: 50%; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .custom--modal .modal-header .btn-close__icon:hover { background-color: hsl(var(--danger-l-100)); color: hsl(var(--white)); } .custom--modal .modal-header .btn-close :focus { -webkit-box-shadow: none; box-shadow: none; } .custom--modal .modal-header .modal-title { color: hsl(var(--white)); margin-bottom: 10px; } .custom--modal .modal-header__desc { color: hsl(var(--white)); } @media screen and (max-width: 424px) { .custom--modal .modal-header__desc { font-size: 12px; } } .custom--modal .modal-content { border-radius: 10px !important; border: 0; } .custom--modal .modal-body { padding: 32px 40px; } @media screen and (max-width: 767px) { .custom--modal .modal-body { padding: 24px; } } .custom--modal .modal-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 32px 40px; border-top: 1px solid hsl(var(--border-color)); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /* ================================= Modal Css End =========================== */ /* ================================= preload Css Start =========================== */ .preloader { position: fixed; z-index: 999999; background-color: hsl(var(--black)); width: 100%; height: 100%; } .loader-p { border: 0 solid transparent; border-radius: 50%; width: 150px; height: 150px; position: absolute; top: calc(50vh - 75px); left: calc(50vw - 75px); } .loader-p:before, .loader-p:after { content: ""; border: 1em solid hsl(var(--base)); border-radius: 50%; width: inherit; height: inherit; position: absolute; top: 0; left: 0; -webkit-animation: loader 2s linear infinite; animation: loader 2s linear infinite; opacity: 0; } .loader-p:before { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } @-webkit-keyframes loader { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes loader { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /* ================================= preload Css End =========================== */ .u-hidden { display: none } @media screen and (max-width: 600px) { .u-hidden--mobile { display:none } } .u-trapped { overflow: hidden } .u-mobile-only { display: none } @media screen and (max-width: 600px) { .u-mobile-only { display:block } } .auth-logo .logo-txt{color:var(--bs-dark);font-size:20px} .logo-dark{display:none}body[data-layout=horizontal][data-topbar=colored] .logo-light{display:block}body[data-layout=horizontal][data-topbar=colored] .logo-dark span.logo-sm{display:block}.navbar-brand-box .logo-light{display:none}.topnav{max-height:360px;overflow-y:auto;padding:0}. .logo{color:#fff!important}body[data-sidebar=dark] .logo span.logo-lg{display:none}body[data-sidebar-size=sm] .logo span.logo-sm{display:block}body[data-sidebar-size=sm] .logo{line-height:69px;color:inherit!important}.logo .logo-sm{display:none}.logo-txt{font-weight:700;font-size:18px;vertical-align:middle;margin-left:5px}.logo-light{display:none}body:not([data-sidebar-size=sm]) #vertical-menu-btn{margin-left:-52px;margin-right:20px}@media (max-width:991.98px){body:not([data-sidebar-size=sm]) #vertical-menu-btn{margin-left:0}}. .cmn-btn{ background-color: #f5f5f5; } .logo-wrapper{max-width:200px}.navbar-area.nav-style-02 .nav-container .logo-wrapper .logo{font-size:36px;font-weight:600} .logo-wrapper a{display:block}.logo-wrapper a img{max-width:120px} @media (min-width: 300px) and (max-width: 991.98px) { .navbar-area .nav-container .logo-wrapper { height: 18px; } } .aiz-thecore .rounded-75{ border-radius: 0.75rem !important; } /* slider */ .thecore-square-box { width: 100%; border-radius: 0.5rem; } .thecore-square-box img { width: 100%; height: 100%; object-fit: cover; /* crop the overflow */ object-position: center; /* keep centered */ } /* Countdown Circle */ .aiz-count-down-circle { display: flex; justify-content: center; min-height: 100%; background-color: rgba(255, 255, 255, 0.6)!important; padding: 1rem; box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.16); } .aiz-count-down-circle #time { display: flex; } .aiz-count-down-circle #time .circle { position: relative; width: 55px; height: 55px; display: flex; justify-content: center; align-items: center; } .aiz-count-down-circle #time .circle svg { position: relative; width: 55px; height: 55px; transform: rotate(270deg); } .aiz-count-down-circle #time .circle svg circle { width: 100%; height: 100%; fill: transparent; stroke-width: 1; stroke: #f7f2f2; stroke-linecap: round; transform: translate(5px, 5px); } .aiz-count-down-circle #time .circle svg circle:nth-child(2) { stroke: #000000; stroke-width: 2; stroke-dasharray: 138; stroke-dashoffset: 138; } .aiz-count-down-circle #time div { position: absolute; text-align: center; font-weight: 700; color: #1b1b28; font-size: 14px; } .aiz-count-down-circle #time div span { position: absolute; transform: translateX(-50%) translateY(-10%); font-size: 8px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; } [dir="rtl"] .aiz-count-down-circle #time div span { transform: translateX(50%) translateY(-10%); } @media (max-width: 767px) { .aiz-count-down-circle { box-shadow: 0px 3px 20px rgb(0 0 0 / 16%); } } /* Hide arrows by default */ .hot-categories .carousel-arrow .slick-arrow { opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } /* Show arrows on hover */ .hot-categories .carousel-arrow:hover .slick-arrow { opacity: 1; visibility: visible; } .aiz-carousel .slick-arrow { width: 24px !important; height: 64px !important; background: #ffffff00; box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0), 0 3px 1px 0 rgba(255, 255, 255, 0); } .aiz-carousel .slick-arrow:hover{ background:#ffffff; box-shadow: 0 0 1px 1px rgba(20, 23, 28, 0.1), 0 3px 1px 0 rgba(20, 23, 28, 0.1); } .aiz-thecore .featured-categories .aiz-carousel .slick-next { right: -15px !important; } .aiz-thecore .featured-categories .aiz-carousel .slick-prev { left: -15px !important; } /* carosel arrow btn */ @media (max-width: 576px) { .aiz-thecore .featured-categories .slick-list { margin-left: 0 !important; margin-right: 0 !important; } .aiz-thecore .featured-categories .aiz-carousel .slick-next, .aiz-thecore .featured-categories .aiz-carousel .slick-prev{ display: none!important; } } .aiz-thecore .featured-categories .slick-list { margin-left: 3rem; margin-right: 3rem; } .aiz-thecore .todays-deal .slick-list { margin-left: 3rem !important; margin-right: 3rem !important; } .aiz-thecore .featured-categories .aiz-carousel .slick-next, .aiz-thecore .todays-deal .aiz-carousel .slick-next { border-radius: 5px 0 0 5px !important; } .aiz-thecore .featured-categories .aiz-carousel .slick-prev, .aiz-thecore .todays-deal .aiz-carousel .slick-prev { border-radius: 0 5px 5px 0 !important; } .aiz-thecore .featured-categories .aiz-carousel .slick-next i, .aiz-thecore .todays-deal .aiz-carousel .slick-next i { display: inline-block; margin-right: 1rem !important; transition: transform 0.3s ease; } .aiz-thecore .featured-categories .aiz-carousel .slick-next:hover i, .aiz-thecore .todays-deal .aiz-carousel .slick-next:hover i { transform: translateX(5px); } .aiz-thecore .featured-categories .aiz-carousel .slick-prev i, .aiz-thecore .todays-deal .aiz-carousel .slick-prev i { display: inline-block; margin-left: 0.8rem !important; transition: transform 0.3s ease; } .aiz-thecore .featured-categories .aiz-carousel .slick-prev:hover i, .aiz-thecore .todays-deal .aiz-carousel .slick-prev:hover i { transform: translateX(-8px); } /* circle Arrow icon */ .view-more-slide-btn { overflow: hidden; display: flex; position: relative; align-items: center; justify-content: center; flex-direction: row-reverse; transition: width 0.3s ease-in-out; width: 32px !important; height: 32px !important; white-space: nowrap; border-radius: 20px; background-color: #000; color: #fff; padding: 0; } .view-more-slide-btn .text { opacity: 0; overflow: hidden; transition: all 0.3s ease; } .view-more-slide-btn:hover .text { opacity: 1; margin-right: 0.1rem; display: inline-block; } .view-more-slide-btn:hover { width: 90px !important; justify-content: space-between; padding-left: 10px; padding-right: 10px; } .view-more-slide-btn:active .text { text-decoration: underline; } .view-more-slide-btn i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; } .view-more-slide-btn:hover i { left: 75%; } /* Hover animation for products */ .hov-animate-outline-2 { position: relative; border-radius: 0.25rem; overflow: hidden; } .hov-animate-outline-2::before, .hov-animate-outline-2::after { content: ""; position: absolute; border: 2px solid transparent; width: 0; height: 0; top: 0; left: 0; border-radius: inherit; pointer-events: none; } .hov-animate-outline-2:hover::before { border-top-color: black; border-right-color: black; width: 100%; height: 100%; transition: width 0.3s ease-out, height 0.3s ease-out 0.3s; } .hov-animate-outline-2:hover::after { border-bottom-color: black; border-left-color: black; width: 100%; height: 100%; transition: height 0.3s ease-out, width 0.3s ease-out 0.3s; } #aiz-data-table .data-row { border-top: 1px dashed var(--soft-light); border-bottom: 0 !important; } #aiz-data-table .data-row:last-of-type { border-bottom: 0 !important; } /* #aiz-data-table .data-row:first-of-type { border-bottom: 0 !important; } */ #aiz-data-table .data-row td { border: 0 !important; } /* Details row */ #aiz-data-table .details-row { display: none; } #aiz-data-table .details-row td { background-color: var(--white); padding: 15px 0px !important; } #aiz-data-table .detail-item { border-bottom: 1px dashed var(--soft-light); } #aiz-data-table .detail-item:last-of-type{ border-bottom: none!important; } #aiz-data-table thead th { border-bottom: 1px solid var(--soft-light); border-top: 0 !important; } /*====== MY TABLE END =====*/ #shippingTab .nav-item .nav-link.active{ color: var(--dark)!important; } .choose-address{ margin-top: -45px; } @media (max-width: 700px) { .choose-address{ margin-top: 0 !important; justify-content: start !important; } } #bulk-action-modal{ z-index: 1050!important; } #request-pickup-btn{ margin-top: 26px ; border: 1px solid #ffc700 ; } .nx-popup-backdrop { position: fixed; left: 0; top: 0; width: 100%; background-color: rgba(0, 0, 0, .6); content: ""; z-index: 999; height: 100%; transition: .3s all; visibility: hidden; opacity: 0 } .nx-popup-backdrop.show { visibility: visible; opacity: 1 } .nx-popup-wrapper.show { visibility: visible; opacity: 1 } .nx-popup-wrapper { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0 } .only-image-modal .nx-modal-inner-content-wrapper { width: 700px; min-height: 400px; background-size: cover; background-position: center } .nx-popup-wrapper.notice-modal .nx-modal-inner-content-wrapper { background-image: url(../img/popup/notice-popup-bg.png) } .nx-modal-inner-content-wrapper { width: 700px; background-color: #fff; padding: 40px; position: relative; background-position: center; height: 400px } .nx-popup-wrapper.notice-modal .nx-modal-inner-content-wrapper .nx-popup-close { background-color: #fff; width: 20px; height: 20px; line-height: 20px; text-align: center } .nx-modal-inner-content-wrapper .nx-popup-close { position: absolute; right: 10px; top: 5px; font-size: 20px; line-height: 20px; color: red; cursor: pointer } .notice-modal .nx-modal-header .title { display: inline-block; background-color: red; padding: 10px 20px; border-radius: 2px; color: #fff; font-size: 16px; line-height: 26px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700 } .notice-modal .nx-modal-header { text-align: center; margin-bottom: 30px } .notice-modal .nx-modal-content { text-align: center } .notice-modal .nx-modal-content p { color: #444; font-size: 18px; line-height: 28px } .notice-modal .nx-modal-content .btn-wrapper { margin-top: 30px } .notice-modal .nx-modal-content .btn-wrapper .btn-boxed { display: inline-block; padding: 10px 30px; background-color: #639; color: #fff; border-radius: 3px; font-weight: 600; transition: .3s all } .notice-modal .nx-modal-content .btn-wrapper .btn-boxed:hover { background-color: beige; color: #fff } .notice-modal-content-wrapper { text-align: left } .notice-modal-content-wrapper .right-side-content { max-width: 320px } .nx-popup-wrapper.notice-modal .nx-modal-content { display: flex; justify-content: flex-end; align-items: center; height: 100% } .notice-modal-content-wrapper .right-side-content .title { font-size: 50px; line-height: 55px; font-weight: 700; color: #fff; text-transform: uppercase } .notice-modal-content-wrapper .right-side-content p { font-size: 18px; line-height: 34px; color: rgba(255, 255, 255, .8) } .promotional-modal-content-wrapper .left-content-warp img { max-width: 400px } .promotional-modal-content-wrapper .left-content-warp { width: 50%; margin-right: 20px; text-align: left } .promotional-modal-content-wrapper { display: flex; align-self: flex-start } .promotional-modal-content-wrapper .right-content-warp { display: flex; align-items: center } .promotional-modal-content-wrapper .right-content-warp .title { font-size: 60px; line-height: 70px; font-weight: 700; text-transform: uppercase; color: var(--main-color-two) } .promotional-modal-content-wrapper .right-content-warp p { font-size: 18px; line-height: 28px; color: #636363 } .promotional-modal-content-wrapper .right-content-warp .btn-boxed { display: inline-block; border: none; background-color: var(--main-color-two); padding: 8px 30px; border-radius: 5px; margin-top: 20px; color: #fff; font-weight: 600; transition: .3s all } .promotional-modal-content-wrapper .right-content-warp .btn-boxed:hover { background-color: var(--main-color-one); color: #fff } .nx-popup-wrapper.promotion-modal .nx-modal-inner-content-wrapper { padding: 30px } .nx-popup-wrapper.discount-modal .nx-modal-inner-content-wrapper { padding: 20px } .nx-popup-wrapper.discount-modal { padding: 30px } .discount-modal-content-wrapper { display: flex; align-items: center; justify-content: space-between; align-self: flex-start } .discount-modal-content-wrapper .left-content-wrap { width: 400px; margin-right: 20px } .discount-modal-content-wrapper .left-content-warp { width: 330px } .discount-modal-content-wrapper .right-content-warp { flex: 1; display: flex; align-items: center; justify-content: center } .discount-modal-content-wrapper .right-content-warp .title { font-size: 50px; line-height: 60px; text-transform: uppercase; font-weight: 700; color: var(--main-color-two) } .discount-modal-content-wrapper .right-content-warp p { font-size: 18px; line-height: 28px; color: #656565 } .discount-modal-content-wrapper .right-content-warp .btn-boxed { display: inline-block; background-color: var(--main-color-two); color: #fff; font-size: 14px; font-weight: 600; padding: 8px 25px; border-radius: 5px; margin-top: 20px; transition: .3s all } .discount-modal-content-wrapper .right-content-warp .btn-boxed:hover { background-color: var(--main-color-one) } .discount-modal-content-wrapper #countdown { display: flex } .discount-modal-content-wrapper .nx-singular-countdown-item { width: calc(100% / 4 - 10px); background-color: var(--main-color-one) } .discount-modal-content-wrapper .nx-singular-countdown-item+.nx-singular-countdown-item { margin-left: 10px } .discount-modal-content-wrapper .nx-singular-countdown-item .time { display: block; font-size: 35px; font-weight: 700; line-height: 45px; color: #fff; margin-bottom: 0 } .discount-modal-content-wrapper .nx-singular-countdown-item { text-align: center } .discount-modal-content-wrapper .countdown-wrapper { margin-top: 20px } .discount-modal-content-wrapper .nx-singular-countdown-item .label { display: block; text-transform: uppercase; font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 8px }