diff --git "a/css/style.css" "b/css/style.css" new file mode 100644--- /dev/null +++ "b/css/style.css" @@ -0,0 +1,8330 @@ +@charset "utf-8"; +/* +/* Copyright (c) 2024 SRBThemes +/* Author: SRBThemes +/* Item URL: https://themeforest.net/item/techwave-ai-html-dashboard-for-image-generation-chat-bot/46197058 +/* This file is made for CURRENT TEMPLATE +/* + + + List of CSS codes: + + 01) ROOT + 02) Base + 03) PRELOADER + 04) Container + 05) New tags and some custom codes + 06) Site Structure + 07) Main Button + 08) Left Panel + 09) Header + 10) Footer + 11) Page: Home (index) + 12) Shortcode: Title + 13) Shortcode: Interactive List + 14) Shortcode: Members + 15) Shortcode: Animated Title + 16) Page Title + 17) Page: Changelog + 18) Searchbar + 19) Shortcode: Accordion + 20) Page: Community Feed + 21) Tabs + 22) Page: Personal Feed + 23) Shortcode: Gallery Items + 24) Like Button + 25) Checkbox + 26) Image Lightbox + 27) Follow Button + 28) Icon Button + 29) Model Button (used in image lightbox) + 30) Prompt Details (used in image lightbox) + 31) Detailed list (used in image lightbox) + 32) Grid Items (used in image lightbox) + 33) Reportbox + 34) Ajax Loader (Loading) + 35) Page: Sign In and Sign Up + 36) Select Filter (personal feed page) + 37) Page: Notifications + 38) Back To button (notification single page) + 39) Page: Pricing + 40) Shortcode: Pricing Mobile + 41) Page: User Profile + 42) Shortcode: Options list (used in user profile page) + 43) Page: User Settings + 44) Upload Button + 45) Page: User Billing + 46) Page: AI Chat Bot + 47) Page: Documentation + 48) Page: Image Generation + 49) Icon Options (icon lightbox) + 50) Generation Item (used in image generation page) + 51) Generation List (used in image generation page) + 52) Input Toggle (custom) + 53) Select Model (used in image generation page) + 53) Page: Image Generation + 54) Input quantity (custom) + 55) Input Range (custom) + 56) Page: Privacy Policy + 57) Contact Form + 58) Page: Contact + 59) Page: Models + 60) Model Items (used in model page) + 61) Bookmark button + 62) Font Trigger (used in AI chat bot page) + 63) Font Trigger Lightbox + 64) Tooltipster custom theme named: tooltipster-techwave (it can be changed in init.js) + 65) Page: Intro + 66) Media Queries (Responsive) + + + + +/*------------------------------------------------------------------*/ + +/* 01) ROOT +/*------------------------------------------------------------------*/ + +:root { + color-scheme: dark; + --techwave-site-bg-color: #0f0e11; + --techwave-header-bg-color: #17151b; + --techwave-some-r-bg-color: #17151b; + --techwave-some-a-bg-color: #2b2830; + --techwave-main-color: #7c5fe3; + --techwave-main-color1: #8768f8; + --techwave-main-color2: #b7a4fb; + --techwave-heading-color: #c0bcca; + --techwave-body-color: #7e7a86; + --techwave-border-color: #312e37; + --techwave-button-bg-color: #1c1925; + --techwave-hover-color: #fff; + --techwave-heading-font-family: 'Heebo', sans-serif; + --techwave-body-font-family: 'Work Sans', sans-serif; + --techwave-left-panel-width: 300px; + --techwave-header-height: 100px; +} + +@media(min-width: 1041px) { + .panel-opened:root { + --techwave-left-panel-width: 76px; + } +} + +@media(max-width: 1040px) { + :root { + --techwave-header-height: 80px; + } +} + +[data-techwave-skin="light"]:root { + color-scheme: light; + --techwave-site-bg-color: #fff; + --techwave-header-bg-color: #f5f5f5; + --techwave-some-r-bg-color: #f5f5f5; + --techwave-some-a-bg-color: #e7e7e7; + --techwave-main-color: #7c5fe3; + --techwave-main-color1: #8768f8; + --techwave-main-color2: #b7a4fb; + --techwave-heading-color: #333; + --techwave-body-color: #444; + --techwave-border-color: #ddd; + --techwave-button-bg-color: #f5f5f5; + --techwave-hover-color: #000; +} + +/*------------------------------------------------------------------*/ + +/* 02) Base +/*------------------------------------------------------------------*/ + +html { + overflow-x: hidden; + padding: 0px; + margin: 0px; +} + +*:after, +*:before, +* { + box-sizing: border-box; +} + +body { + font-family: var(--techwave-body-font-family); + font-size: 16px; + letter-spacing: 0; + line-height: 1.5; + font-weight: 400; + color: var(--techwave-body-color); + position: relative; + word-break: break-word; + background-color: var(--techwave-site-bg-color); +} + +.fn__svg { + fill: currentcolor; + width: 18px; + height: 18px; +} + +.replaced-svg { + opacity: 1; +} + +p { + letter-spacing: 0; + margin-bottom: 20px; +} + +ol li { + margin-bottom: 17px; +} + +ol li:last-child { + margin-bottom: 0; +} + +.heading_color { + color: var(--techwave-heading-color); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + line-height: 1.22; + letter-spacing: 0; +} + +h1>a, +h2>a, +h3>a, +h4>a, +h5>a, +h6>a { + text-decoration: none; + color: var(--techwave-heading-color); +} + +h1>a:hover, +h2>a:hover, +h3>a:hover, +h4>a:hover, +h5>a:hover, +h6>a:hover { + color: var(--techwave-main-color); +} + +select:focus { + border-color: var(--techwave-main-color); +} + +select { + display: block; + height: 40px; + width: 100%; + padding: 0 14px; + background-color: var(--techwave-some-a-bg-color); + border: 2px solid transparent; + border-radius: 5px; + outline: none; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + font-size: 16px; + position: relative; + line-height: 40px; +} + +hr { + outline: none; + border: none; + border-top: 1px solid var(--techwave-border-color); + margin: 0; + margin-bottom: 20px; +} + +hr[data-h="2"] { + border-top-width: 2px; +} + +hr[data-h="3"] { + border-top-width: 3px; +} + +hr[data-h="4"] { + border-top-width: 4px; +} + +hr[data-h="5"] { + border-top-width: 5px; +} + +hr[data-h="6"] { + border-top-width: 6px; +} + +hr[data-h="7"] { + border-top-width: 7px; +} + +hr[data-h="8"] { + border-top-width: 8px; +} + +hr[data-h="9"] { + border-top-width: 9px; +} + +hr[data-h="10"] { + border-top-width: 10px; +} + +/*------------------------------------------------------------------*/ + +/* 03) PRELOADER +/*------------------------------------------------------------------*/ + +.techwave_fn_preloader.fn_ready { + opacity: 0; + visibility: hidden; + pointer-events: none; +} + +.techwave_fn_preloader.enabled { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; +} + +.techwave_fn_preloader { + position: fixed; + padding: 0; + margin: 0; + z-index: 1000; + left: 0; + right: 0; + bottom: 0; + top: 0; + background-color: var(--techwave-site-bg-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + display: none; + -ms-align-items: center; + align-items: center; + justify-content: center; + transition: all .3s ease; +} + +.techwave_fn_preloader svg { + width: 240px; + height: 240px; + border-radius: 100%; + position: relative; +} + +.techwave_fn_preloader .first_circle { + fill: none; + stroke-width: 10px; + stroke: #080808; +} + +.techwave_fn_preloader .second_circle { + fill: none; + stroke-width: 10px; + stroke-linecap: round; + transform: rotate(-90deg); + transform-origin: 50% 50%; + stroke-dasharray: 360; + stroke-dashoffset: 100; + stroke: var(--techwave-main-color); + animation: techwave_fn_preloader 10s infinite; + position: relative; + z-index: 1; +} + +@keyframes techwave_fn_preloader { + 0% { + stroke-dasharray: 360; + } + 50% { + stroke-dasharray: 1; + } + 100% { + stroke-dasharray: 360; + } +} + +/*------------------------------------------------------------------*/ + +/* 04) Container +/*------------------------------------------------------------------*/ + +.container { + width: 100%; + max-width: 1400px; + padding: 0 40px; + margin: 0 auto; +} + +.container.wide { + max-width: 1680px; +} + +.container.small { + max-width: 780px; +} + +.container.medium { + max-width: 980px; +} + +.container:after, +.clearfix:after, +.clearfix:before { + content: ''; + clear: both; + display: table; +} + +@media(max-width: 1040px) { + .container { + padding: 0 20px; + } +} + +@media(max-width: 480px) { + .container { + padding: 0 10px; + } +} + +/*------------------------------------------------------------------*/ + +/* 05) New tags and some custom codes +/*------------------------------------------------------------------*/ + +.fn__full_link { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +frenify_main { + color: var(--techwave-main-color); + -webkit-user-select: all; + -moz-user-select: all; + -ms-user-select: all; + -o-user-select: all; + user-select: all; +} + +frenify_uselect { + -webkit-user-select: all; + -moz-user-select: all; + -ms-user-select: all; + -o-user-select: all; + user-select: all; +} + +frenify_typing { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; +} + +frenify_typing h3 { + margin: 0; + font-size: 16px; + font-weight: 400; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; +} + +frenify_typing span { + color: var(--techwave-heading-color); + overflow: hidden; + border-right: 2px solid var(--techwave-main-color); + white-space: nowrap; + -webkit-animation: frenify_typing_animation 1s steps(150, end), frenify_blink_caret .5s step-end infinite; + animation: frenify_typing_animation 1s steps(150, end), frenify_blink_caret .5s step-end infinite; +} + +@keyframes frenify_typing_animation { + from { + width: 0 + } + to { + width: 100% + } +} + +@keyframes frenify_blink_caret { + from, + to { + border-color: transparent + } + 50% { + border-color: var(--techwave-main-color); + } +} + +/*------------------------------------------------------------------*/ + +/* 06) Site Structure +/*------------------------------------------------------------------*/ + +.techwave_fn_wrapper, +.techwave_fn_wrapper * { + box-sizing: border-box; +} + +.techwave_fn_wrapper:not(.fn__has_sidebar) .techwave_fn_image_generation_page .sidebar__trigger { + color: var(--techwave-main-color); +} + +.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_content { + margin-right: 300px; +} + +.techwave_fn_content { + position: relative; + margin-left: var(--techwave-left-panel-width); + margin-top: var(--techwave-header-height); + min-height: calc(100vh - var(--techwave-header-height)); + transition: all .2s ease; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; +} + +/*------------------------------------------------------------------*/ + +/* 07) Main Button +/*------------------------------------------------------------------*/ + +.fn__submit { + display: block; + position: relative; + background-color: var(--techwave-button-bg-color); + border-radius: 20px; +} + +.fn__submit input, +.techwave_fn_button { + display: block; + width: fit-content; + max-width: 100%; + text-decoration: none; + font-weight: 500; + font-size: 14px; + letter-spacing: .5px; + font-family: var(--techwave-heading-font-family); + height: 40px; + line-height: 40px; + padding: 0 34px; + position: relative; + color: var(--techwave-heading-color); + text-transform: uppercase; + text-align: center; + white-space: nowrap; + background-color: var(--techwave-button-bg-color); + outline: none; + outline-color: transparent; + border-radius: 20px; + overflow: hidden; + text-overflow: ellipsis; +} + +.fn__submit input { + width: 100%; + background-color: transparent !important; +} + +.techwave_fn_button.medium { + padding: 0 97px; + height: 60px; + line-height: 60px; + border-radius: 30px; + font-size: 18px; +} + +.techwave_fn_button.medium:after, +.techwave_fn_button.medium:before { + border-radius: 30px; +} + +.techwave_fn_button.small__border:after, +.techwave_fn_button.small__border:before, +.techwave_fn_button.small__border { + border-radius: 5px; +} + +.techwave_fn_button.small__border { + background-color: var(--techwave-some-a-bg-color); + padding: 0 20px; +} + +.techwave_fn_button.has__icon { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; +} + +.techwave_fn_button.has__icon .fn__svg { + width: 16px; + height: 16px; + margin-right: 5px; +} + +.fn__submit input, +.techwave_fn_button span { + position: relative; + z-index: 5; +} + +.techwave_fn_button span { + top: 1px; +} + +.fn__submit:hover:after, +.techwave_fn_button:hover:after { + animation-duration: 2s; +} + +.fn__submit:hover, +.techwave_fn_button:hover { + color: var(--techwave-hover-color); +} + +.fn__submit:after, +.techwave_fn_button:after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 20px; + border: 2px solid transparent; + background: -moz-linear-gradient(270deg, var(--techwave-main-color1), var(--techwave-main-color2), var(--techwave-main-color1), var(--techwave-main-color2)) border-box; + background: -webkit-linear-gradient(270deg, var(--techwave-main-color1), var(--techwave-main-color2), var(--techwave-main-color1), var(--techwave-main-color2)) border-box; + background: linear-gradient(270deg, var(--techwave-main-color1), var(--techwave-main-color2), var(--techwave-main-color1), var(--techwave-main-color2)) border-box; + -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: destination-out; + -webkit-mask-composite: source-out; + mask-composite: exclude; + background-size: 300% 300%; + -webkit-animation: animatedgradient 4s ease alternate infinite; + animation: animatedgradient 4s ease alternate infinite; +} + +.fn__submit:before, +.techwave_fn_button:before { + right: 0; + bottom: 0; + top: 0; + left: 0; + position: absolute; + color: var(--techwave-main-color1); + content: ''; + opacity: .1; + border-radius: 20px; + box-shadow: 0px 5px 15px; +} + +.techwave_fn_button.enabled:after { + display: block; +} + +.techwave_fn_button.disabled { + background-color: var(--techwave-some-a-bg-color); +} + +.techwave_fn_button.disabled:after { + display: none; +} + +@keyframes animatedgradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/*------------------------------------------------------------------*/ + +/* 08) Left Panel +/*------------------------------------------------------------------*/ + +.short_logo { + display: none; +} + +.retina_logo { + display: none; +} + +@media (-webkit-min-device-pixel-ratio: 1.1), +(min-device-pixel-ratio: 1.1), +(min-resolution: 120dpi) { + .retina_logo { + display: block; + } + .desktop_logo { + display: none; + } +} + +.techwave_fn_leftpanel { + z-index: 101; + position: fixed; + background-color: var(--techwave-some-r-bg-color); + width: var(--techwave-left-panel-width); + left: 0; + top: 0; + bottom: 0; + border-right: 1px solid var(--techwave-border-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + transition: all .2s ease; +} + +.techwave_fn_leftpanel .leftpanel_logo { + min-height: var(--techwave-header-height); + height: var(--techwave-header-height); + border-bottom: 1px solid var(--techwave-border-color); + padding: 20px 70px 20px 30px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + position: relative; +} + +.techwave_fn_leftpanel .mobile_closer { + display: none; +} + +.techwave_fn_leftpanel .fn__icon_button { + position: absolute; + top: 50%; + margin-top: -15px; + right: 20px; + z-index: 4; +} + +.techwave_fn_leftpanel .fn__icon_button .fn__svg { + transform: rotate(180deg); +} + +.techwave_fn_leftpanel .leftpanel_content { + flex: 1 0 auto; + padding: 48px 20px; + overflow-y: auto; + height: calc(100% - var(--techwave-header-height)); +} + +.techwave_fn_leftpanel .leftpanel_content { + scrollbar-width: thin; + scrollbar-color: #999 #fff; +} + +.techwave_fn_leftpanel .leftpanel_content::-webkit-scrollbar { + width: 4px; +} + +.techwave_fn_leftpanel .leftpanel_content:-webkit-scrollbar-track { + background: var(--techwave-some-a-bg-color); +} + +.techwave_fn_leftpanel .leftpanel_content::-webkit-scrollbar-thumb { + background-color: var(--techwave-some-a-bg-color); + border-radius: 6px; +} + +.techwave_fn_leftpanel .nav_group { + margin-bottom: 38px; +} + +.techwave_fn_leftpanel .nav_group:last-child { + margin-bottom: 0; +} + +.techwave_fn_leftpanel .group__title { + margin: 0; + padding: 0 10px; + text-transform: uppercase; + font-weight: 500; + font-size: 11px; + letter-spacing: .5px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 12px; +} + +.techwave_fn_leftpanel .group__list { + margin: 0; + padding: 0; + list-style-type: none; +} + +.techwave_fn_leftpanel .group__list li { + margin-bottom: 4px; + position: relative; +} + +.techwave_fn_leftpanel .group__list li:last-child { + margin-bottom: 0px; +} + +.techwave_fn_leftpanel .group__list a { + font-weight: 400; + border-radius: 5px; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-heading-color); + text-decoration: none; + min-height: 36px; + padding: 5px 10px 5px 42px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + position: relative; +} + +.techwave_fn_leftpanel .group__list .menu-item-has-children>a { + padding-right: 22px; +} + +.techwave_fn_leftpanel .group__list .hovered>a, +.techwave_fn_leftpanel .group__list a.active, +.techwave_fn_leftpanel .group__list a:hover { + background-color: var(--techwave-some-a-bg-color); +} + +.techwave_fn_leftpanel .group__list a.active .text { + color: var(--techwave-hover-color); +} + +.techwave_fn_leftpanel .group__list .icon { + position: absolute; + left: 10px; + top: 50%; + margin-top: -8px; + display: block; +} + +.techwave_fn_leftpanel .group__list .icon .fn__svg { + width: 16px; + height: 16px; + display: block; +} + +.techwave_fn_leftpanel .group__list .text { + line-height: 24px; + position: relative; + top: 1px; +} + +.techwave_fn_leftpanel .group__list .trigger { + right: 5px; + top: 50%; + margin-top: -6px; + position: absolute; + display: block; + color: var(--techwave-heading-color); + transform: rotate(90deg); + transition: all .2s ease; +} + +.techwave_fn_leftpanel .group__list .closed .trigger { + transform: rotate(-90deg); +} + +.techwave_fn_leftpanel .group__list .trigger .fn__svg { + width: 12px; + height: 12px; + display: block; +} + +.techwave_fn_leftpanel .group__list .count { + width: 24px; + margin-left: 10px; + display: inline-block; + height: 24px; + background-color: #ab0cdf; + color: #fff; + font-weight: 500; + line-height: 25px; + text-align: center; + font-size: 11px; + font-family: var(--techwave-heading-font-family); + border-radius: 100%; + vertical-align: top; +} + +.fn__sup { + color: var(--techwave-main-color); + vertical-align: super; + text-transform: uppercase; + font-weight: 500; + font-size: 11px; + letter-spacing: .5px; + margin-left: 2px; +} + +.techwave_fn_leftpanel .group__list ul { + margin: 0; + list-style-type: none; + padding: 0; + margin-left: 26px; + margin-top: 4px; + overflow: hidden; +} + +.techwave_fn_leftpanel .group__list ul a { + padding-left: 17px; +} + +.techwave_fn_leftpanel .group__list ul a:after { + width: 5px; + height: 2px; + background-color: var(--techwave-heading-color); + position: absolute; + left: 6px; + top: 50%; + margin-top: -1px; + content: ''; +} + +@media(min-width: 1041px) { + .panel-opened .techwave_fn_leftpanel .group__list .icon .fn__svg { + width: 18px; + height: 18px; + } + .panel-opened .techwave_fn_leftpanel .group__list a { + width: 36px; + padding: 0; + } + .panel-opened .techwave_fn_leftpanel .group__list .menu-item-has-children>a:after { + content: ''; + position: absolute; + width: 10px; + height: 10px; + background-color: #f1416c; + left: 50%; + bottom: 50%; + margin-left: 2px; + margin-bottom: 2px; + border-radius: 100%; + } + .panel-opened .techwave_fn_leftpanel .leftpanel_logo { + padding: 0; + justify-content: center; + } + .panel-opened .techwave_fn_leftpanel .short_logo { + display: block; + } + .panel-opened .techwave_fn_leftpanel .fn__closer { + right: -15px; + transform: rotate(180deg); + } + .panel-opened .techwave_fn_leftpanel .full_logo, + .panel-opened .techwave_fn_leftpanel .group__title, + .panel-opened .techwave_fn_leftpanel .group__list .trigger, + .panel-opened .techwave_fn_leftpanel .group__list .text { + display: none; + } + .panel-opened .techwave_fn_leftpanel .group__list ul { + display: none !important; + } +} + +/*------------------------------------------------------------------*/ + +/* 09) Header +/*------------------------------------------------------------------*/ + +.techwave_fn_header { + position: fixed; + top: 0; + left: var(--techwave-left-panel-width); + right: 0; + height: var(--techwave-header-height); + background-color: var(--techwave-header-bg-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + -ms-align-items: center; + align-items: center; + padding: 0 40px; + z-index: 100; + transition: all .2s ease; +} + +.techwave_fn_header:after { + content: ''; + pointer-events: none; + position: absolute; + bottom: 0; + z-index: 1; + left: 0; + right: 0; + height: 1px; + background-color: var(--techwave-border-color); +} + +.fn__token_info { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + height: var(--techwave-header-height); + position: relative; +} + +.fn__token_info:hover .token__popup { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.fn__token_info .token__popup { + opacity: 0; + visibility: hidden; + transform: translateY(20px); + width: 200px; + position: absolute; + left: 0; + top: 100%; + background-color: var(--techwave-header-bg-color); + padding: 12px 15px; + border-radius: 0 0 5px 5px; + border: 1px solid var(--techwave-border-color); + ; + margin-top: -1px; + font-family: var(--techwave-heading-font-family); + font-size: 12px; + letter-spacing: .5px; + transition: all .2s ease; +} + +.fn__token_info .token__popup span { + color: var(--techwave-heading-color); +} + +.fn__token_info .token_summary { + border-radius: 5px; + background-color: var(--techwave-some-a-bg-color); + font-family: var(--techwave-heading-font-family); + line-height: 16px; + height: 40px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + padding: 5px 12px; + margin-right: 20px; +} + +.fn__token_info .count { + font-weight: 600; + font-size: 18px; + color: var(--techwave-heading-color); + padding-right: 25px; + position: relative; +} + +.fn__token_info .text { + line-height: 16px; + font-size: 12px; +} + +.fn__token_info .count:after { + content: ''; + position: absolute; + right: 12px; + top: 50%; + margin-top: -15px; + height: 30px; + background-color: #413e45; + width: 1px; +} + +.fn__nav_bar { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; +} + +.fn__nav_bar .bar__item { + height: var(--techwave-header-height); + position: relative; + margin-right: 10px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.fn__nav_bar .bar__item:last-child { + margin-right: 0; +} + +.fn__nav_bar .item_opener { + width: 50px; + height: 50px; + text-decoration: none; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + background-color: var(--techwave-some-a-bg-color); + border-radius: 100%; + color: var(--techwave-heading-color); + position: relative; +} + +.fn__nav_bar .item_opener:hover { + opacity: 0.8; +} + +.fn__nav_bar .item_opener.full_screen .f_screen { + opacity: 0; + transform: scale(0.7); +} + +.fn__nav_bar .item_opener.full_screen .s_screen { + opacity: 1; + transform: scale(1); +} + +.fn__nav_bar .item_opener .fn__svg { + width: 24px; + height: 24px; + transition: all .3s ease; +} + +.fn__nav_bar .item_opener .dark_mode { + opacity: 0; + position: absolute; + left: 50%; + top: 50%; + margin: -12px 0 0 -12px; + transform: scale(0.7) rotate(-90deg); +} + +[data-techwave-skin="light"] .fn__nav_bar .item_opener .dark_mode { + opacity: 1; + transform: scale(1) rotate(0deg); +} + +[data-techwave-skin="light"] .fn__nav_bar .item_opener .light_mode { + opacity: 0; + transform: scale(0.7) rotate(90deg); +} + +[data-techwave-skin="dark"] .fn__nav_bar .item_opener .light_mode { + opacity: 1; + transform: scale(1) rotate(0deg); +} + +[data-techwave-skin="dark"] .fn__nav_bar .item_opener .dark_mode { + opacity: 0; + transform: scale(0.7) rotate(-90deg); +} + +.fn__nav_bar .item_opener .s_screen { + opacity: 0; + position: absolute; + left: 50%; + top: 50%; + margin: -9px 0 0 -9px; + transform: scale(0.7); + width: 18px; + height: 18px; +} + +.fn__nav_bar .bar__item_user { + margin-left: 10px; +} + +.fn__nav_bar .user_opener { + width: 60px; + height: 60px; + border: 2px solid var(--techwave-border-color); + border-radius: 5px; + overflow: hidden; +} + +.fn__nav_bar .user_opener img { + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 1 / 1; + border-radius: 3px; +} + +.fn__nav_bar .item_popup { + position: absolute; + right: 0; + top: 100%; + background-color: var(--techwave-header-bg-color); + border: 1px solid var(--techwave-border-color); + border-radius: 0 0 5px 5px; + opacity: 0; + visibility: hidden; + transform: translateY(20px); + transition: all .2s ease; + margin-top: -1px; +} + +.fn__nav_bar .item_popup[data-position="left"] { + right: auto; + left: 0; +} + +.fn__nav_bar .bar__item_user .item_popup { + padding: 20px; + width: 300px; + max-width: calc(100vw - 80px); +} + +.fn__nav_bar .bar__item_user.opened .item_popup { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.fn__nav_bar .bar__item_user:hover .user_opener, +.fn__nav_bar .bar__item_user.opened .user_opener { + border-color: var(--techwave-main-color); +} + +.fn__nav_bar .bar__item_user .user_profile { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + padding: 0 10px 20px 10px; + border-bottom: 1px solid var(--techwave-border-color); + -ms-align-items: center; + align-items: center; +} + +.fn__nav_bar .bar__item_user .user_img { + margin-right: 15px; + width: 60px; + min-width: 60px; +} + +.fn__nav_bar .bar__item_user .user_img img { + width: 100%; + object-fit: cover; + aspect-ratio: 1 / 1; + border: 2px solid var(--techwave-border-color); + border-radius: 5px; +} + +.fn__nav_bar .bar__item_user .user_name { + margin: 0; + padding: 0; + font-weight: 400; + font-size: 16px; +} + +.fn__nav_bar .bar__item_user .user_name span { + height: 16px; + line-height: 16px; + display: inline-block; + padding: 0 5px; + border-radius: 5px; + background-color: #ab0cdf; + color: #fff; + font-weight: 500; + font-size: 11px; + text-transform: uppercase; + font-family: var(--techwave-heading-font-family); + margin-left: 10px; + vertical-align: middle; + position: relative; + top: -2px; +} + +.fn__nav_bar .bar__item_user .user_profile p { + margin: 0; + padding: 0; + font-family: var(--techwave-heading-font-family); + font-size: 12px; + letter-spacing: 0; +} + +.fn__nav_bar .bar__item_user .user_profile a { + text-decoration: none; + color: var(--techwave-heading-color); +} + +.fn__nav_bar .bar__item_user .user_profile a:hover { + color: var(--techwave-main-color); +} + +.fn__nav_bar .bar__item_user .user_nav { + padding-top: 20px; +} + +.fn__nav_bar .bar__item_user .user_nav li { + margin-bottom: 4px; +} + +.fn__nav_bar .bar__item_user .user_nav li:last-child { + margin-bottom: 0px; +} + +.fn__nav_bar .bar__item_user .user_nav ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.fn__nav_bar .bar__item_user .user_nav a { + font-weight: 400; + border-radius: 5px; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-heading-color); + text-decoration: none; + height: 36px; + padding: 0 10px 0 42px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + position: relative; +} + +.fn__nav_bar .bar__item_user .user_nav .icon { + position: absolute; + left: 10px; + top: 50%; + margin-top: -8px; + display: block; +} + +.fn__nav_bar .bar__item_user .user_nav .icon .fn__svg { + width: 16px; + height: 16px; + display: block; +} + +.fn__nav_bar .bar__item_user .user_nav a.active, +.fn__nav_bar .bar__item_user .user_nav a:hover { + background-color: var(--techwave-some-a-bg-color); +} + +.fn__nav_bar .bar__item_user .user_nav .text { + position: relative; + top: 1px; +} + +.fn__nav_bar .bar__item_language.opened .item_popup { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.fn__nav_bar .bar__item_language.opened .item_opener { + color: var(--techwave-main-color); +} + +.fn__nav_bar .bar__item_language .item_popup { + padding: 20px; + width: 200px; + max-width: calc(100vw - 80px); +} + +.fn__nav_bar .bar__item_language .item_popup li { + margin-bottom: 4px; +} + +.fn__nav_bar .bar__item_language .item_popup li:last-child { + margin-bottom: 0px; +} + +.fn__nav_bar .bar__item_language .item_popup ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.fn__nav_bar .bar__item_language .item_popup span, +.fn__nav_bar .bar__item_language .item_popup a { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + height: 36px; + padding: 0 15px; + border-radius: 5px; + text-decoration: none; + font-size: 16px; + letter-spacing: 0; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-heading-color); + transition: all .3s ease; +} + +.fn__nav_bar .bar__item_language .item_popup a:hover, +.fn__nav_bar .bar__item_language .item_popup .active { + background-color: var(--techwave-some-a-bg-color); + color: var(--techwave-hover-color); +} + +.fn__nav_bar .bar__item_notification .item_opener:after { + content: ''; + position: absolute; + width: 12px; + height: 12px; + background-color: #f1416c; + border-radius: 100%; + top: 9px; + right: 10px; + opacity: 0; + visibility: hidden; +} + +.fn__nav_bar .bar__item_notification.has_notification .item_opener:after { + opacity: 1; + visibility: visible; +} + +.fn__nav_bar .bar__item_notification .item_popup { + width: 340px; + padding: 20px; + max-width: calc(100vw - 80px); +} + +.fn__nav_bar .bar__item_notification.opened .item_popup { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.fn__nav_bar .bar__item_notification .ntfc_header { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: space-between; + column-gap: 20px; + padding: 1px 15px 20px; + border-bottom: 1px solid var(--techwave-border-color); +} + +.fn__nav_bar .bar__item_notification .ntfc_title { + font-size: 12px; + font-weight: 500; + margin: 0; + letter-spacing: .5px; + text-transform: uppercase; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-body-color); +} + +.fn__nav_bar .bar__item_notification .ntfc_header a { + text-decoration: none; + font-size: 12px; + font-weight: 400; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-body-color); +} + +.fn__nav_bar .bar__item_notification .ntfc_header a:hover { + color: var(--techwave-main-color); +} + +.fn__nav_bar .bar__item_notification .ntfc_list { + padding: 25px 15px 0; +} + +.fn__nav_bar .bar__item_notification .ntfc_list ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.fn__nav_bar .bar__item_notification .ntfc_list li { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + margin-bottom: 20px; +} + +.fn__nav_bar .bar__item_notification .ntfc_list li:last-child { + margin-bottom: 0; +} + +.fn__nav_bar .bar__item_notification .ntfc_list p { + margin: 0; + padding: 0; + font-size: 16px; + font-weight: 400; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-heading-color); +} + +.fn__nav_bar .bar__item_notification .ntfc_list p a { + color: var(--techwave-heading-color); + text-decoration: none; +} + +.fn__nav_bar .bar__item_notification .ntfc_list p a:hover { + color: var(--techwave-main-color); +} + +.fn__nav_bar .bar__item_notification .ntfc_list span { + font-size: 12px; + font-weight: 400; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-body-color); + margin-top: -1px; +} + +.fn__nav_bar .bar__item_search .item_popup { + width: 200px; + padding: 20px; + max-width: calc(100vw - 80px); +} + +.techwave_fn_fixedsub { + opacity: 0; + visibility: hidden; + position: fixed; + left: var(--techwave-left-panel-width); + top: var(--techwave-header-height); + z-index: 101; + display: none; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + border-left: none; + margin-top: calc(var(--techwave-header-height) - 21px); + /* 20px = padding-top and 1px = border-top */ + padding: 20px; + transition: all .2s ease; +} + +.panel-opened .techwave_fn_fixedsub { + display: block; +} + +.techwave_fn_fixedsub.opened { + opacity: 1; + visibility: visible; +} + +.techwave_fn_fixedsub ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.techwave_fn_fixedsub li { + margin-bottom: 4px; + position: relative; +} + +.techwave_fn_fixedsub li:last-child { + margin-bottom: 0; +} + +.techwave_fn_fixedsub a { + font-weight: 400; + border-radius: 5px; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-heading-color); + text-decoration: none; + min-height: 36px; + padding: 5px 10px 5px 17px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + position: relative; +} + +.techwave_fn_fixedsub a:after { + width: 5px; + height: 2px; + background-color: var(--techwave-heading-color); + position: absolute; + left: 6px; + top: 50%; + margin-top: -1px; + content: ''; +} + +.techwave_fn_fixedsub a.active, +.techwave_fn_fixedsub a:hover { + background-color: var(--techwave-some-a-bg-color); +} + +/*------------------------------------------------------------------*/ + +/* 10) Footer +/*------------------------------------------------------------------*/ + +.techwave_fn_footer { + margin-top: auto; + min-height: 71px; + padding: 18px 40px; + border-top: 1px solid var(--techwave-border-color); +} + +.techwave_fn_footer_content { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + -ms-align-items: center; + align-items: center; +} + +.techwave_fn_footer .copyright p { + margin: 0; + padding: 0; + font-size: 14px; + letter-spacing: .5px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_footer .menu_items ul { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + margin-left: -30px; +} + +.techwave_fn_footer .menu_items li { + margin: 5px 0 5px 30px; +} + +.techwave_fn_footer .menu_items a { + text-decoration: none; + font-size: 14px; + letter-spacing: .5px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_footer .menu_items a:hover { + color: var(--techwave-main-color); +} + +/*------------------------------------------------------------------*/ + +/* 11) Page: Home (index) +/*------------------------------------------------------------------*/ + +.section_home { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + min-height: calc(100vh - var(--techwave-header-height) - 71px); +} + +.section_home .section_left { + padding: 93px 40px 80px; + border-right: 1px solid var(--techwave-border-color); + width: 60%; +} + +.section_home .section_right { + width: 40%; + padding: 155px 40px; +} + +.section_home .company_info { + margin: 0 auto; + max-width: 350px; +} + +.section_home .company_info hr { + margin-bottom: 24px; +} + +.section_home .company_info p { + margin-bottom: 23px; +} + +.section_home .company_info img { + margin-bottom: 25px; +} + +.section_home .techwave_fn_title_holder { + margin-bottom: 43px; +} + +/*------------------------------------------------------------------*/ + +/* 12) Shortcode: Title +/*------------------------------------------------------------------*/ + +.techwave_fn_title_holder { + text-align: center; +} + +.techwave_fn_title_holder .title { + margin: 0; + padding: 0; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-heading-color); + margin-bottom: -1px; + font-size: 40px; +} + +.techwave_fn_title_holder .desc { + margin: 0; + padding: 0; + font-size: 18px; + font-weight: 400; + font-family: var(--techwave-body-font-family); + color: var(--techwave-body-color); +} + +/*------------------------------------------------------------------*/ + +/* 13) Shortcode: Interactive List +/*------------------------------------------------------------------*/ + +.techwave_fn_interactive_list ul { + margin: 0; + padding: 0; + list-style-type: none; + margin-left: -20px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.techwave_fn_interactive_list li { + width: 360px; + max-width: 50%; + padding-left: 20px; + margin-bottom: 20px; +} + +.techwave_fn_interactive_list .item { + border: 2px solid var(--techwave-border-color); + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + min-height: 100%; + text-align: center; + transition: all .2s ease; +} + +.techwave_fn_interactive_list .item:hover { + background-color: var(--techwave-some-a-bg-color); + border-color: var(--techwave-main-color); +} + +.techwave_fn_interactive_list a { + text-decoration: none; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + justify-content: center; + -ms-align-items: center; + align-items: center; + padding: 48px 30px; + min-height: 100%; +} + +.techwave_fn_interactive_list .icon { + width: 120px; + height: 120px; + border-radius: 100%; + background-color: var(--techwave-main-color); + position: relative; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + color: #fff; + margin-bottom: 26px; +} + +.techwave_fn_interactive_list .icon .fn__svg { + width: 50px; + height: 50px; + display: block; +} + +.techwave_fn_interactive_list .title { + margin: 0; + padding: 0; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-heading-color); + font-weight: 400; + font-size: 24px; + margin-bottom: 20px; +} + +.techwave_fn_interactive_list .desc { + margin: 0; + padding: 0; + font-family: var(--techwave-body-font-family); + color: var(--techwave-body-color); + font-weight: 400; + font-size: 16px; + line-height: 20px; + margin-bottom: 22px; +} + +.techwave_fn_interactive_list .arrow { + display: block; + width: 50px; + height: 14px; + color: var(--techwave-heading-color); + position: relative; +} + +.techwave_fn_interactive_list .arrow:after { + position: absolute; + content: ''; + height: 2px; + top: 50%; + margin-top: -1px; + background-color: var(--techwave-heading-color); + transition: all .3s ease; + right: 100%; + left: 0%; + margin-right: 0 +} + +.techwave_fn_interactive_list .item:hover .arrow:after { + right: 0; + margin-right: 4px; + left: 0; +} + +.techwave_fn_interactive_list .item:hover .arrow .fn__svg { + right: 0; + margin-right: 0; +} + +.techwave_fn_interactive_list .arrow .fn__svg { + width: 14px; + height: 14px; + display: block; + position: absolute; + right: 50%; + margin-right: -7px; + transition: all .3s ease; +} + +.techwave_fn_interactive_list.modern { + max-width: 700px; + margin: 0 auto; +} + +.techwave_fn_interactive_list.modern li { + width: 100%; + max-width: 100%; +} + +.techwave_fn_interactive_list.modern a { + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + -o-flex-direction: row; + flex-direction: row; + justify-content: flex-start; + padding: 18px 38px; +} + +.techwave_fn_interactive_list.modern .desc { + display: none; +} + +.techwave_fn_interactive_list.modern .icon { + margin-bottom: 0; + margin-right: 20px; + min-width: 60px; + width: 60px; + height: 60px; +} + +.techwave_fn_interactive_list.modern .icon .fn__svg { + width: 24px; + height: 24px; +} + +.techwave_fn_interactive_list.modern .title { + margin-bottom: 0; + margin-right: 20px; + font-size: 20px; +} + +.techwave_fn_interactive_list.modern .arrow { + margin-left: auto; +} + +/*------------------------------------------------------------------*/ + +/* 14) Shortcode: Members +/*------------------------------------------------------------------*/ + +.fn__members .item { + position: relative; + padding-left: 22px; + font-size: 16px; + line-height: 24px; + min-height: 24px; +} + +.fn__members .item { + margin-bottom: 8px; +} + +.fn__members .item:last-child { + margin-bottom: 0; +} + +.fn__members .circle { + width: 12px; + height: 12px; + border-radius: 100%; + display: block; + background-color: var(--techwave-body-color); + position: absolute; + top: 6px; + left: 0; +} + +.fn__members .active .circle { + background-color: #45c569; +} + +/*------------------------------------------------------------------*/ + +/* 15) Shortcode: Animated Title +/*------------------------------------------------------------------*/ + +.fn__animated_text { + opacity: 0; +} + +.fn__animated_text.ready { + opacity: 1; +} + +.fn__animated_text span { + animation: fn__animated_text 0.8s both; +} + +.fn__animated_text em { + opacity: 0; +} + +@keyframes fn__animated_text { + 0% { + opacity: 0; + } + 65% { + opacity: 1; + text-shadow: 0 0 25px white; + } + 75% { + opacity: 0.7; + } + 100% { + opacity: 1 + } +} + +/*------------------------------------------------------------------*/ + +/* 16) Page Title +/*------------------------------------------------------------------*/ + +.techwave_fn_pagetitle { + padding: 34px 40px; + border-bottom: 1px solid var(--techwave-border-color); +} + +.techwave_fn_pagetitle .title { + margin: 0; + padding: 0; + font-size: 22px; + line-height: 1.364; + font-weight: 600; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_pagetitle span { + color: var(--techwave-body-color); +} + +/*------------------------------------------------------------------*/ + +/* 17) Page: Changelog +/*------------------------------------------------------------------*/ + +.change_log { + padding: 40px 0; +} + +.faq { + padding: 40px 0; +} + +.techwave_fn_changelog .changelog__item { + border-radius: 5px; + border: 1px solid var(--techwave-border-color); + background-color: var(--techwave-some-r-bg-color); + margin-bottom: 40px; +} + +.techwave_fn_changelog .changelog__item:last-child { + margin-bottom: 0; +} + +.techwave_fn_changelog .item__header { + padding: 24px 30px; + border-bottom: 1px solid var(--techwave-border-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + column-gap: 20px; + justify-content: space-between; + -ms-align-items: center; + align-items: center; +} + +.techwave_fn_changelog .item__ver { + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + font-size: 20px; + font-weight: 400; +} + +.techwave_fn_changelog .item__date { + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + font-size: 11px; + font-weight: 500; + text-transform: uppercase; +} + +.techwave_fn_changelog .item__content { + padding: 40px 30px 34px; +} + +.techwave_fn_changelog .item__group { + margin-bottom: 34px; +} + +.techwave_fn_changelog .item__group:last-child { + margin-bottom: 0px; +} + +.techwave_fn_changelog .item__title { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + margin-bottom: 15px; +} + +.techwave_fn_changelog .item__title span { + height: 18px; + line-height: 18px; + padding: 0 10px; + border-radius: 9px; + font-weight: 500; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + text-align: center; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + text-transform: uppercase; + font-size: 11px; + background-color: var(--techwave-some-a-bg-color); + padding-top: 1px; +} + +.techwave_fn_changelog .item__list { + margin: 0; + padding: 0; + list-style-type: none; +} + +.techwave_fn_changelog .item__list li { + position: relative; + min-height: 24px; + line-height: 24px; + font-size: 18px; + color: var(--techwave-body-color); + font-weight: 400; + padding-left: 15px; + margin-bottom: 8px; +} + +.techwave_fn_changelog .item__list li:last-child { + margin-bottom: 0; +} + +.techwave_fn_changelog .item__list li:after { + content: ''; + position: absolute; + left: 0; + top: 11px; + height: 2px; + background-color: var(--techwave-body-color); + width: 5px; +} + +/*------------------------------------------------------------------*/ + +/* 18) Searchbar +/*------------------------------------------------------------------*/ + +.techwave_fn_searchbar { + opacity: 0; + visibility: hidden; + transform: translateX(100px); + position: fixed; + top: 0; + left: var(--techwave-left-panel-width); + right: 0; + height: var(--techwave-header-height); + background-color: var(--techwave-header-bg-color); + padding: 0 40px; + z-index: 102; + transition: all .3s ease; + border-bottom: 1px solid var(--techwave-border-color); +} + +.techwave_fn_searchbar.opened { + opacity: 1; + visibility: visible; + transform: translateX(0); +} + +.techwave_fn_searchbar .search__results { + opacity: 0; + visibility: hidden; + transform: translateY(20px); + position: absolute; + top: 100%; + left: 0; + right: 0; + border-bottom: 1px solid var(--techwave-border-color); + background-color: var(--techwave-header-bg-color); + margin-top: 1px; + padding: 46px 40px; + transition: all .2s ease; +} + +.techwave_fn_searchbar .search__results.opened { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.techwave_fn_searchbar .search__input { + height: var(--techwave-header-height); + padding: 0 50px 0 45px; + display: block; + width: 100%; + background-color: transparent !important; + border: none !important; + font-size: 16px; + font-weight: 400; + letter-spacing: 0; + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_searchbar .results__title { + font-weight: 500; + text-transform: uppercase; + font-size: 11px; + margin: 0; + margin-bottom: 19px; +} + +.techwave_fn_searchbar .search__icon { + width: 24px; + height: 24px; + display: block; + position: absolute; + top: 50%; + margin-top: -12px; + left: 40px; + pointer-events: none; +} + +.techwave_fn_searchbar .search__closer { + text-decoration: none; + width: 30px; + height: 30px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + border-radius: 5px; + background-color: var(--techwave-some-a-bg-color); + position: absolute; + right: 40px; + top: 50%; + margin-top: -15px; + color: var(--techwave-heading-color); +} + +.techwave_fn_searchbar .search__closer .fn__svg { + width: 12px; + height: 12px; +} + +.techwave_fn_searchbar .search__results ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.techwave_fn_searchbar .search__results li { + font-weight: 400; + font-family: var(--techwave-heading-font-family); + font-size: 16px; + letter-spacing: 0; + color: var(--techwave-heading-color); + margin-bottom: 13px; +} + +.techwave_fn_searchbar .search__results li:last-child { + margin-bottom: 0; +} + +.techwave_fn_searchbar .search__results a { + text-decoration: none; + color: var(--techwave-heading-color); +} + +.techwave_fn_searchbar .search__results a:hover { + color: var(--techwave-main-color); +} + +/*------------------------------------------------------------------*/ + +/* 19) Shortcode: Accordion +/*------------------------------------------------------------------*/ + +.techwave_fn_accordion.small .acc__item { + border-width: 1px; +} + +.techwave_fn_accordion.small .acc__header { + padding: 15px 20px; +} + +.techwave_fn_accordion.small .acc__icon:after { + width: 11px; + height: 1px; + right: 20px; + margin-top: -1px; +} + +.techwave_fn_accordion.small .acc__icon:before { + width: 1px; + height: 11px; + right: 25px; + margin-top: -6px; +} + +.techwave_fn_accordion.small .acc__title { + font-size: 14px; + text-transform: uppercase; + line-height: 20px; +} + +.techwave_fn_accordion.small .acc__content { + padding: 14px 20px; +} + +.techwave_fn_accordion .acc__item { + border: 2px solid var(--techwave-border-color); + background-color: var(--techwave-some-r-bg-color); + border-radius: 5px; + margin-bottom: 10px; +} + +.techwave_fn_accordion .acc__item.opened .acc__header, +.techwave_fn_accordion .acc__item .acc__header:hover { + background-color: var(--techwave-some-a-bg-color); +} + +.techwave_fn_accordion .acc__item:last-child { + margin-bottom: 0; +} + +.techwave_fn_accordion .acc__header { + padding: 26px 30px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + column-gap: 20px; + justify-content: space-between; + -ms-align-items: center; + align-items: center; + position: relative; + cursor: pointer; + transition: all .3s ease; +} + +.techwave_fn_accordion .acc__title { + margin: 0; + padding: 0; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + font-size: 20px; + font-weight: 400; + line-height: 1.25; + padding-right: 23px; + top: 1px; +} + +.techwave_fn_accordion .acc__icon:after { + width: 18px; + height: 2px; + background-color: var(--techwave-heading-color); + content: ''; + position: absolute; + right: 30px; + top: 50%; + margin-top: -1px; +} + +.techwave_fn_accordion .opened .acc__icon:before { + transform: scale(0) rotate(90deg); +} + +.techwave_fn_accordion .acc__icon:before { + width: 2px; + height: 18px; + background-color: var(--techwave-heading-color); + content: ''; + position: absolute; + right: 38px; + top: 50%; + margin-top: -9px; + transition: all .3s ease; +} + +.techwave_fn_accordion .acc__content { + padding: 24px 30px; + display: none; + overflow: hidden; + border-top: 1px solid var(--techwave-border-color); +} + +.techwave_fn_accordion .acc__content p { + margin-bottom: 18px; +} + +.techwave_fn_accordion .acc__content>*:last-child { + margin-bottom: 0; +} + +/*------------------------------------------------------------------*/ + +/* 20) Page: Community Feed +/*------------------------------------------------------------------*/ + +.techwave_fn_community_page { + padding: 36px 0 40px 0; +} + +.techwave_fn_community_page .fn__title_holder { + margin-bottom: 28px; +} + +.fn__title_holder .title { + margin: 0; + padding: 0; + font-size: 22px; + font-weight: 600; +} + +/*------------------------------------------------------------------*/ + +/* 21) Tabs +/*------------------------------------------------------------------*/ + +.fn__tabs { + border-bottom: 1px solid var(--techwave-border-color); + margin-bottom: 30px; +} + +.fn__tabs .tab_in { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + width: 100%; + flex-wrap: wrap; +} + +.fn__tabs a { + text-decoration: none; + font-size: 14px; + font-weight: 500; + letter-spacing: .5px; + text-transform: uppercase; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-right: 30px; + line-height: 40px; + position: relative; +} + +.fn__tabs a:after { + content: ''; + opacity: 0; + position: absolute; + left: 50%; + bottom: -1px; + height: 2px; + background-color: var(--techwave-main-color); + right: 50%; + transition: all .3s ease; +} + +.fn__tabs a.active:after { + left: 0; + right: 0; + opacity: 1; +} + +/*------------------------------------------------------------------*/ + +/* 22) Page: Personal Feed +/*------------------------------------------------------------------*/ + +.techwave_fn_feed .feed__filter { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + column-gap: 50px; + margin-bottom: 30px; + position: relative; + -ms-align-items: center; + align-items: center; + flex-wrap: wrap; +} + +.techwave_fn_feed .filter__left { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + margin: 5px 0; + flex-wrap: wrap; +} + +.techwave_fn_feed .filter__upscaled { + margin: 5px 0; +} + +.techwave_fn_feed .filter__left>* { + margin-right: 30px; +} + +.techwave_fn_feed .filter__left>*:last-child { + margin-right: 0; +} + +.techwave_fn_feed .filter__search { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; +} + +.techwave_fn_feed .filter__search a { + margin: 5px 0; +} + +.techwave_fn_feed .filter__search input { + margin: 5px 10px 5px 0; +} + +.techwave_fn_feed .filter__sorting { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + margin-left: -10px; +} + +.techwave_fn_feed .filter__sorting a { + margin: 5px 0 5px 10px; +} + +.fn__selection_box { + display: none; + border-top: 1px solid var(--techwave-border-color); + border-bottom: 1px solid var(--techwave-border-color); + padding: 25px 0; + margin-bottom: 30px; + position: sticky; + top: var(--techwave-header-height); + z-index: 5; + background: var(--techwave-site-bg-color); +} + +.fn__selection_box .desc { + margin: 0; + padding: 0; +} + +.fn__selection_box .selection_in { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + -ms-align-items: center; + align-items: center; +} + +.fn__selection_box .actions { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; +} + +.fn__selection_box .actions a { + margin: 5px 0 5px 10px; +} + +.techwave_fn_feed .feed__results { + margin-bottom: 60px; + position: relative; +} + +.techwave_fn_feed .feed__results.loading .fn__gallery_items { + opacity: 0; + visibility: hidden; +} + +.techwave_fn_feed .feed__results.loading .fn__preloader { + opacity: 1; + visibility: visible; +} + +.techwave_fn_feed .feed__more { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: center; +} + +/*------------------------------------------------------------------*/ + +/* 23) Shortcode: Gallery Items +/*------------------------------------------------------------------*/ + +.fn__gallery_items { + margin: 0; + padding: 0; + list-style-type: none; + margin-left: -20px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; +} + +.fn__gallery_items .item.select__ready .item__info { + display: none; +} + +.fn__gallery_items .item.select__ready .fn__selectable_item { + opacity: 1; + visibility: visible; + pointer-events: all; +} + +.fn__selectable_item { + opacity: 0; + visibility: hidden; + pointer-events: none; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + z-index: 3; + color: var(--techwave-hover-color); + border: 2px solid transparent; + border-radius: 5px; + cursor: pointer; +} + +.fn__selectable_item.selected { + border-color: var(--techwave-main-color); +} + +.fn__selectable_item.selected .icon { + background-color: var(--techwave-main-color); +} + +.fn__selectable_item.selected:after { + opacity: 0.1; +} + +.fn__selectable_item:after { + background-color: var(--techwave-site-bg-color); + opacity: .6; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + content: ''; +} + +.fn__selectable_item .icon { + width: 50px; + height: 50px; + background-color: var(--techwave-some-a-bg-color); + border-radius: 100%; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: center; + -ms-align-items: center; + align-items: center; +} + +.fn__selectable_item .fn__svg { + position: relative; + z-index: 3; +} + +.fn__gallery_item { + margin: 0; + padding: 0; + padding-left: 20px; + width: 25%; + margin-bottom: 20px; +} + +.fn__gallery_items .item { + position: relative; + width: 100%; + overflow: hidden; + cursor: pointer; +} + +.fn__gallery_items .img img { + border-radius: 5px; + width: 100%; + height: 100%; +} + +.fn__gallery_items .item:hover .item__info { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.fn__gallery_items .item__info { + opacity: 0; + visibility: hidden; + transform: translateY(20px); + position: absolute; + bottom: 10px; + left: 10px; + right: 10px; + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + padding: 20px 15px 19px; + transition: all .3s ease; +} + +.fn__gallery_items .info__header { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + margin-bottom: 14px; + -ms-align-items: center; + align-items: center; + column-gap: 15px; +} + +.fn__gallery_items .user__info { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + max-width: 60%; +} + +.fn__gallery_items .author_name { + margin: 0; + padding: 0; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + font-size: 14px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.fn__gallery_items .user__info img { + width: 20px; + height: 20px; + object-fit: cover; + border-radius: 100%; + margin-right: 7px; +} + +.fn__gallery_items .item__info .desc { + margin: 0; + padding: 0; + font-size: 14px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + line-clamp: 3; + -webkit-box-orient: vertical; +} + +/*------------------------------------------------------------------*/ + +/* 24) Like Button +/*------------------------------------------------------------------*/ + +a.fn__like { + text-decoration: none; + font-size: 14px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + position: relative; + z-index: 25; + padding: 0 18px; + padding-right: 42px; + height: 40px; + border: 2px solid var(--techwave-some-a-bg-color); + border-radius: 20px; + line-height: 36px; +} + +a.fn__like .count { + position: relative; + top: 1px; +} + +a.fn__like .fn__svg { + position: absolute; + width: 18px; + height: 18px; + right: 18px; + top: 50%; + margin-top: -9px; + opacity: 0; +} + +a.fn__like .empty__like { + opacity: 1; +} + +a.fn__like.has__like .empty__like { + opacity: 0; +} + +a.fn__like.has__like .full__like { + opacity: 1; + color: var(--techwave-main-color); +} + +a.fn__like:hover { + opacity: .8; +} + +a.fn__like.has__like { + border-color: var(--techwave-main-color); +} + +a.fn__like.no_border { + border: none; + padding: 0 24px 0 0; + line-height: 16px; + border-radius: 0; + height: 16px; +} + +a.fn__like.no_border .fn__svg { + right: 0; +} + +/*------------------------------------------------------------------*/ + +/* 25) Checkbox +/*------------------------------------------------------------------*/ + +.fn__checkbox { + margin: 0; + padding: 0; + position: relative; + min-height: 20px; + line-height: 20px; + padding-left: 27px; + font-size: 16px; + font-weight: 400; + border: none; + outline: none; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.fn__checkbox .fn__svg { + opacity: 0; + width: 12px; + height: 12px; + position: absolute; + left: 4px; + top: 50%; + margin-top: -6px; + border-color: var(--techwave-main-color); +} + +.fn__checkbox input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +.fn__checkbox input:checked~.fn__svg { + opacity: 1; +} + +.fn__checkbox input:checked~.checkmark { + border-color: var(--techwave-main-color); +} + +.fn__checkbox .checkmark { + width: 20px; + height: 20px; + display: block; + position: absolute; + top: 50%; + margin-top: -10px; + left: 0; + border: 2px solid var(--techwave-border-color); + border-radius: 3px; +} + +/*------------------------------------------------------------------*/ + +/* 26) Image Lightbox +/*------------------------------------------------------------------*/ + +.techwave_fn_img_lightbox { + opacity: 0; + visibility: hidden; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 105; + background-color: var(--techwave-site-bg-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + overflow-y: auto; + pointer-events: none; + transition: all .3s ease; +} + +.techwave_fn_img_lightbox.opened { + opacity: 1; + visibility: visible; + pointer-events: all; +} + +.techwave_fn_img_lightbox .lightbox__top { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + border-bottom: 1px solid var(--techwave-border-color); +} + +.techwave_fn_img_lightbox .lightbox__tl { + width: 70%; + width: calc(100% - 440px); +} + +.techwave_fn_img_lightbox .lightbox__tr { + width: 30%; + width: 440px; + border-left: 1px solid var(--techwave-border-color); +} + +.techwave_fn_img_lightbox .lightbox__tlbar { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + padding: 20px; + -ms-align-items: center; + align-items: center; +} + +.techwave_fn_img_lightbox .lightbox__tlbar_left { + flex: 3; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; +} + +.techwave_fn_img_lightbox .lightbox__tlbar_left .item { + margin: 2.5px 5px 2.5px 0; +} + +.techwave_fn_img_lightbox .lightbox__tlbar_center { + flex: 2; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + column-gap: 5px; +} + +.techwave_fn_img_lightbox .lightbox__tlbar_right { + flex: 3; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: flex-end; +} + +.techwave_fn_img_lightbox .img_nav { + text-decoration: none; + width: 40px; + height: 40px; + border: 2px solid var(--techwave-some-a-bg-color); + border-radius: 100%; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + color: var(--techwave-heading-color); +} + +.techwave_fn_img_lightbox .img_nav:hover { + border-color: var(--techwave-main-color); +} + +.techwave_fn_img_lightbox .img_nav .fn__svg { + width: 12px; + height: 12px; +} + +.techwave_fn_img_lightbox .img_nav.nav_prev .fn__svg { + transform: rotate(180deg); +} + +.techwave_fn_img_lightbox .lightbox__tlimg { + padding: 0 40px 60px; + text-align: center; +} + +.techwave_fn_img_lightbox .user__profile { + padding: 20px 70px 20px 20px; + position: relative; + position: sticky; + top: 0; + background-color: var(--techwave-site-bg-color); + z-index: 2; + border-bottom: 1px solid var(--techwave-border-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + width: 100%; +} + +.techwave_fn_img_lightbox .user__profile .profile_link { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + text-decoration: none; + -ms-align-items: center; + align-items: center; + margin-right: 10px; + max-width: 55%; +} + +.techwave_fn_img_lightbox .user__profile .profile_link .user_name { + margin: 0; + padding: 0; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 16px; +} + +.techwave_fn_img_lightbox .user__profile .profile_link img { + min-width: 40px; + width: 40px; + height: 40px; + border-radius: 100%; + margin-right: 10px; + object-fit: cover; +} + +.techwave_fn_img_lightbox .fn__closer { + position: absolute; + right: 20px; + top: 50%; + margin-top: -15px; +} + +.techwave_fn_img_lightbox .item__details { + padding: 20px; + border-bottom: 1px solid var(--techwave-border-color); +} + +.techwave_fn_img_lightbox .item__details>* { + margin-bottom: 10px; +} + +.techwave_fn_img_lightbox .item__details>*:last-child { + margin-bottom: 0px; +} + +.techwave_fn_img_lightbox .lightbox__related { + padding: 36px 40px 20px; +} + +.techwave_fn_img_lightbox .lightbox__related .fn__title_holder { + margin-bottom: 33px; +} + +/*------------------------------------------------------------------*/ + +/* 27) Follow Button +/*------------------------------------------------------------------*/ + +.fn__follow { + padding: 0 10px; + position: relative; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + height: 24px; + white-space: nowrap; + max-width: 100%; + text-decoration: none; + background-color: var(--techwave-some-a-bg-color); + font-family: var(--techwave-heading-font-family); + font-size: 11px; + letter-spacing: .5px; + text-transform: uppercase; + border-radius: 12px; + line-height: 24px; + color: var(--techwave-body-color); + font-weight: 400; +} + +.fn__follow:hover { + opacity: .8; +} + +.fn__follow.has__follow { + background-color: #f1416c; + color: #fff; +} + +/*------------------------------------------------------------------*/ + +/* 28) Icon Button +/*------------------------------------------------------------------*/ + +.fn__icon_button { + width: 30px; + height: 30px; + border-radius: 5px; + background-color: var(--techwave-some-a-bg-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + color: var(--techwave-heading-color); +} + +.fn__icon_button .dots { + display: block; + position: relative; + width: 15px; + height: 3px; + border-left: 3px solid var(--techwave-heading-color); + border-right: 3px solid var(--techwave-heading-color); +} + +.fn__icon_button .dots:after { + width: 3px; + top: 0; + bottom: 0; + left: 3px; + content: ''; + position: absolute; + background-color: var(--techwave-heading-color); +} + +.fn__icon_button:hover { + opacity: .8; +} + +.fn__icon_button .fn__svg { + width: 12px; + height: 12px; +} + +/*------------------------------------------------------------------*/ + +/* 29) Model Button (used in image lightbox) +/*------------------------------------------------------------------*/ + +.fn__model { + position: relative; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + border-radius: 5px; + padding: 10px 70px 10px 20px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; +} + +.fn__model .fn__icon_button { + position: absolute; + right: 20px; + top: 50%; + margin-top: -15px; +} + +.fn__model .model_img img { + width: 60px; + height: 60px; + object-fit: cover; + border-radius: 5px; + margin-right: 15px; +} + +.fn__model .model_subtitle { + margin: 0; + padding: 0; + font-weight: 500; + letter-spacing: .5px; + font-size: 11px; + text-transform: uppercase; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 5px; +} + +.fn__model .model_title { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/*------------------------------------------------------------------*/ + +/* 30) Prompt Details (used in image lightbox) +/*------------------------------------------------------------------*/ + +.fn__prompt_details { + position: relative; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + border-radius: 5px; +} + +.fn__prompt_details .prompt__content { + padding: 0 20px 15px 20px; +} + +.fn__prompt_details .prompt__content p { + margin: 0; + font-size: 16px; + line-height: 20px; +} + +.fn__prompt_details .prompt__text { + margin: 0; + padding: 0; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-transform: uppercase; +} + +.fn__prompt_details .prompt__options:hover .prompt__popup { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.fn__prompt_details .prompt__popup { + right: 0; + position: absolute; + top: 100%; + padding-top: 5px; + opacity: 0; + visibility: hidden; + transform: translateY(20px); + transition: all .3s ease; +} + +.fn__prompt_details .prompt__popup ul { + width: 180px; + list-style-type: none; + background-color: var(--techwave-some-a-bg-color); + border-radius: 5px; + margin: 0; + padding: 15px 20px; +} + +.fn__prompt_details .prompt__popup a { + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + text-decoration: none; + overflow: hidden; +} + +.fn__prompt_details .prompt__popup a:hover { + color: var(--techwave-main-color); +} + +.fn__prompt_details .prompt__popup li { + margin: 0; + margin-bottom: 3px; + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.fn__prompt_details .prompt__popup li:last-child { + margin-bottom: 0; +} + +.fn__prompt_details .prompt__options { + position: absolute; + top: 50%; + right: 20px; + margin-top: -15px; +} + +.fn__prompt_details .prompt__header { + position: relative; + padding: 15px 70px 10px 20px; +} + +/*------------------------------------------------------------------*/ + +/* 31) Detailed list (used in image lightbox) +/*------------------------------------------------------------------*/ + +.fn__details_list { + padding: 27px 30px 3px; +} + +.fn__details_list ul { + margin: 0; + padding: 0; + list-style-type: none; + margin-left: -30px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; +} + +.fn__details_list li { + padding-left: 30px; + margin-bottom: 20px; + width: 50%; +} + +.fn__details_list .sub_title { + margin: 0; + padding: 0; + font-weight: 500; + letter-spacing: .5px; + font-size: 11px; + text-transform: uppercase; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 1px; +} + +.fn__details_list .title { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +/*------------------------------------------------------------------*/ + +/* 32) Grid Items (used in image lightbox) +/*------------------------------------------------------------------*/ + +.fn__grid_items ul { + margin: 0; + padding: 0; + list-style-type: none; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; + margin-left: -20px; +} + +.fn__grid_items li { + padding-left: 20px; + margin-bottom: 20px; + width: 16.6666%; +} + +.fn__grid_items img { + border-radius: 5px; + display: block; + width: 100%; + height: 100%; + aspect-ratio: 1 / 1; + object-fit: cover; + transition: all .3s ease; +} + +.fn__grid_items img:hover { + -webkit-filter: brightness(.5); + filter: brightness(.5); +} + +/*------------------------------------------------------------------*/ + +/* 33) Reportbox +/*------------------------------------------------------------------*/ + +.techwave_fn_report { + pointer-events: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 110; + opacity: 0; + visibility: hidden; + background-color: var(--techwave-site-bg-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + overflow-y: auto; + padding: 40px; +} + +.techwave_fn_report.opened { + pointer-events: all; + opacity: 1; + visibility: visible; +} + +.techwave_fn_report .report__closer { + z-index: 1; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.techwave_fn_report .report__content { + width: 600px; + max-width: 100%; + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + padding: 30px; + padding-bottom: 25px; + position: relative; + border: 1px solid var(--techwave-border-color); + z-index: 3; +} + +.techwave_fn_report .fn__closer { + position: absolute; + right: 30px; + top: 30px; + z-index: 2; +} + +.techwave_fn_report .title { + text-align: center; + margin: 0; + padding: 0; + font-weight: 500; + font-size: 24px; + letter-spacing: 0; + margin-bottom: 4px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_report .subtitle { + display: block; + margin: 0; + padding: 0; + font-size: 16px; + font-weight: 400; + line-height: 40px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_report .reason_field { + display: block; + width: 100%; + margin-bottom: 15px; + height: 50px; + border-radius: 5px; +} + +.techwave_fn_report .btns { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; +} + +.techwave_fn_report .btns .cancel { + opacity: .6; +} + +.techwave_fn_report .btns a { + margin: 5px 10px 5px 0; +} + +/*------------------------------------------------------------------*/ + +/* 34) Ajax Loader (Loading) +/*------------------------------------------------------------------*/ + +.fn__preloader { + opacity: 0; + visibility: hidden; + position: absolute; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + -ms-align-items: center; + align-items: center; + justify-content: center; + width: 100%; + height: 150px; + border: 2px solid var(--techwave-border-color); + top: 0; + left: 0; + z-index: 1; +} + +.fn__preloader .text { + display: block; + font-size: 18px; + letter-spacing: .25px; + text-transform: uppercase; + font-family: var(--techwave-heading-font-family); + font-weight: 600; + color: var(--techwave-heading-color); +} + +.fn__preloader .icon { + width: 60px; + height: 60px; + display: block; + border: 4px solid transparent; + border-top-color: var(--techwave-hover-color); + border-right-color: var(--techwave-hover-color); + border-bottom-color: var(--techwave-hover-color); + border-radius: 100%; + animation: techwave_spin 1s linear infinite; + margin-bottom: 15px; +} + +.fn__preloader.loading { + opacity: 1; + visibility: visible; +} + +@keyframes techwave_spin { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +/*------------------------------------------------------------------*/ + +/* 35) Page: Sign In and Sign Up +/*------------------------------------------------------------------*/ + +.techwave_fn_sign { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 110; + background-color: var(--techwave-site-bg-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + overflow-y: auto; + padding: 50px 40px; +} + +.techwave_fn_sign .logo { + background-image: none, url(../img/logo-desktop-full.png); + background-size: 141px; + background-position: center top; + background-repeat: no-repeat; + color: #3c434a; + height: 17px; + font-size: 20px; + font-weight: 400; + line-height: 1.3; + margin: 0 auto 50px; + padding: 0; + text-decoration: none; + width: 141px; + text-indent: -9999px; + outline: 0; + overflow: hidden; + display: block; +} + +.techwave_fn_sign .sign__desc p { + margin: 0; + margin-top: 25px; + text-align: center; + font-size: 14px; + line-height: 18px; + letter-spacing: 0; + font-family: var(--techwave-body-font-family); + color: var(--techwave-body-color); +} + +.techwave_fn_sign .sign__desc p a { + text-decoration: none; + color: var(--techwave-heading-color); +} + +.techwave_fn_sign .sign__desc p a:hover { + text-decoration: underline; +} + +.techwave_fn_sign .sign__content { + width: 500px; + max-width: 100%; +} + +.techwave_fn_sign .form__content { + width: 100%; + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + padding: 36px 50px 40px 50px; + position: relative; + border: 1px solid var(--techwave-border-color); +} + +.techwave_fn_sign .form__email, +.techwave_fn_sign .form__name, +.techwave_fn_sign .form__username { + margin-bottom: 17px; +} + +.techwave_fn_sign .pass_lab { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: space-between; +} + +.techwave_fn_sign .pass_lab a { + font-size: 16px; + text-decoration: none; + font-family: var(--techwave-body-font-family); + color: var(--techwave-main-color); + line-height: 40px; +} + +.techwave_fn_sign .pass_lab a:hover { + text-decoration: underline; +} + +.techwave_fn_sign .form__title { + text-align: center; + font-size: 24px; + margin: 0; + font-weight: 500; + font-family: var(--techwave-body-font-family); + color: var(--techwave-heading-color); + line-height: 1; + margin-bottom: 3px; +} + +.techwave_fn_sign label { + display: block; + font-size: 16px; + font-weight: 400; + font-family: var(--techwave-body-font-family); + color: var(--techwave-heading-color); + line-height: 40px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.techwave_fn_sign input[type="text"], +.techwave_fn_sign input[type="password"] { + display: block; + width: 100%; + border-radius: 5px; + height: 60px; + min-width: 100%; +} + +.techwave_fn_sign .fn__lined_text { + margin-bottom: 14px; +} + +.fn__lined_text { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + width: 100%; +} + +.fn__lined_text .line { + width: 50%; + height: 1px; + background-color: var(--techwave-border-color); +} + +.fn__lined_text .text { + white-space: nowrap; + font-size: 14px; + text-transform: uppercase; + margin: 0; + color: var(--techwave-body-color); + font-family: var(--techwave-body-font-family); + padding: 0 10px; +} + +.techwave_fn_sign .form__alternative a { + width: 100%; +} + +.techwave_fn_sign .form__submit { + margin-bottom: 14px; +} + +.techwave_fn_sign .form__pass { + margin-bottom: 30px; +} + +/*------------------------------------------------------------------*/ + +/* 36) Select Filter (personal feed page) +/*------------------------------------------------------------------*/ + +.filter__select { + position: relative; + z-index: 5; +} + +.filter__select .item__popup { + opacity: 0; + visibility: hidden; + transform: translateY(20px); + position: absolute; + right: 0; + top: 100%; + width: 140px; + margin: 0; + padding: 0; + padding-top: 5px; + transition: all .3s ease; +} + +.filter__select:hover .item__popup { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.filter__select .item__popup ul { + list-style-type: none; + background-color: var(--techwave-some-a-bg-color); + border-radius: 5px; + margin: 0; + padding: 15px 20px; +} + +.filter__select .item__popup li:last-child { + margin-bottom: 0; +} + +.filter__select .item__popup li { + margin: 0; + margin-bottom: 3px; + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.filter__select .item__popup a { + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + text-decoration: none; + overflow: hidden; +} + +.filter__select .item__popup a:hover { + color: var(--techwave-main-color); + opacity: .9; +} + +/*------------------------------------------------------------------*/ + +/* 37) Page: Notifications +/*------------------------------------------------------------------*/ + +.techwave_fn_notifications_content { + padding: 40px 0; +} + +.techwave_fn_notifications_list .notification__item:last-child { + margin-bottom: 0; +} + +.techwave_fn_notifications_list .notification__item { + padding: 24px 30px; + border-radius: 5px; + border: 1px solid var(--techwave-border-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + column-gap: 20px; + justify-content: space-between; + -ms-align-items: center; + align-items: center; + background-color: var(--techwave-some-r-bg-color); + margin-bottom: 10px; + position: relative; + transition: all .3s ease; +} + +.techwave_fn_notifications_list .notification__item:hover { + background-color: var(--techwave-some-a-bg-color); +} + +.techwave_fn_notifications_list .item__title { + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + font-size: 20px; + font-weight: 400; + margin: 0; + padding: 0; +} + +.techwave_fn_notifications_list .item__date { + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + font-size: 11px; + font-weight: 500; + text-transform: uppercase; +} + +.techwave_fn_notification_single_content { + padding: 40px 0; +} + +/*------------------------------------------------------------------*/ + +/* 38) Back To button (notification single page) +/*------------------------------------------------------------------*/ + +.fn__backto { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.fn__backto a { + text-decoration: none; + height: 30px; + line-height: 30px; + position: relative; + padding-left: 30px; + padding-right: 13px; + border-radius: 5px; + font-size: 16px; + letter-spacing: 0; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-heading-color); + font-weight: 400; + display: block; + background-color: var(--techwave-some-a-bg-color); +} + +.fn__backto a:hover { + color: var(--techwave-main-color); +} + +.fn__backto a .text { + position: relative; + top: 1px; +} + +.fn__backto a .fn__svg { + transform: rotate(180deg); + width: 12px; + height: 12px; + left: 10px; + top: 50%; + margin-top: -6px; + position: absolute; +} + +/*------------------------------------------------------------------*/ + +/* 39) Page: Pricing +/*------------------------------------------------------------------*/ + +.techwave_fn_pricing_page { + padding: 93px 0px 100px; +} + +.techwave_fn_pricing_page .techwave_fn_title_holder { + margin-bottom: 43px; +} + +.techwave_fn_pricing_page .techwave_fn_pricing { + margin-bottom: 111px; +} + +.techwave_fn_pricing .pricing__tab { + display: none; +} + +.techwave_fn_pricing .pricing__tab.active { + display: block; +} + +.techwave_fn_pricing .pricing__toggle { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + margin-bottom: 40px; +} + +.techwave_fn_pricing .pricing__toggle .bg { + position: absolute; + height: 40px; + top: 9px; + left: 50%; + border-radius: 20px; + background-color: var(--techwave-some-a-bg-color); + z-index: 1; + transition: all .3s ease; + width: 0; +} + +.techwave_fn_pricing .pricing__toggle .toggle_in { + border: 1px solid var(--techwave-border-color); + border-radius: 60px; + padding: 9px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + position: relative; +} + +.techwave_fn_pricing .pricing__toggle a { + text-decoration: none; + height: 40px; + line-height: 40px; + padding: 0 35px; + font-size: 14px; + margin: 0; + font-weight: 500; + text-transform: uppercase; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + position: relative; + z-index: 2; +} + +.techwave_fn_pricing .pricing__toggle a:hover { + color: var(--techwave-main-color); +} + +.techwave_fn_pricing .pricing__content { + border: 1px solid var(--techwave-border-color); + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); +} + +.techwave_fn_pricing .popular { + position: absolute; + top: 0; + margin-top: -16px; + background-color: #ab0cdf; + height: 30px; + border-radius: 15px; + font-weight: 500; + color: #fff; + letter-spacing: 0; + text-transform: uppercase; + font-family: var(--techwave-heading-font-family); + padding: 0 18px; + font-size: 14px; + line-height: 30px; + left: 50%; + transform: translateX(-50%); + text-align: center; + z-index: 3; +} + +.techwave_fn_pricing .popular * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + display: block; +} + +.techwave_fn_pricing .popular:after { + content: ''; + left: 50%; + margin-left: -6px; + top: 100%; + width: 0; + height: 0; + border-style: solid; + border-width: 4px 6px 0 6px; + border-color: #ab0cdf transparent transparent transparent; + position: absolute; +} + +.techwave_fn_pricing .item_row { + margin-left: -1px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + text-align: center; +} + +.techwave_fn_pricing .item_row .item_col:nth-child(1) { + width: 31%; + max-width: 31%; + text-align: left; + justify-content: flex-start; +} + +.techwave_fn_pricing .item_row .item_col { + width: 23%; + max-width: 23%; + border-left: 1px solid var(--techwave-border-color); + position: relative; +} + +.techwave_fn_pricing .pricing__header .title { + margin: 0; + padding: 0; + font-size: 24px; + letter-spacing: 0; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 10px; +} + +.techwave_fn_pricing .pricing__header .price { + margin: 0; + padding: 0; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + font-size: 14px; + font-weight: 500; + margin-bottom: 11px; +} + +.techwave_fn_pricing .pricing__header .price span { + font-size: 36px; + font-weight: 500; +} + +.techwave_fn_pricing .pricing__header .desc { + margin: 0; + padding: 0; + font-size: 14px; + letter-spacing: 0; + line-height: 20px; + font-weight: 400; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 24px; +} + +.techwave_fn_pricing .pricing__header .desc span { + color: var(--techwave-heading-color); +} + +.techwave_fn_pricing .pricing__header .purchase { + padding: 0; + margin: 0; +} + +.techwave_fn_pricing .pricing__header .purchase a { + width: 100%; +} + +.techwave_fn_pricing .pricing__header .item_col { + padding: 35px 30px 40px 30px; +} + +.techwave_fn_pricing .pricing__heading { + background-color: var(--techwave-some-a-bg-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + margin: 0 -1px; +} + +.techwave_fn_pricing .pricing__heading .item.wide { + width: 69%; + max-width: 69%; +} + +.techwave_fn_pricing .pricing__heading .item { + height: 54px; + position: relative; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + padding: 0 30px; +} + +.techwave_fn_pricing .pricing__heading .item { + width: 31%; + max-width: 31%; +} + +.techwave_fn_pricing .pricing__heading .title { + font-size: 14px; + margin: 0; + padding: 0; + font-weight: 500; + letter-spacing: .5px; + text-transform: uppercase; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_pricing .pricing__heading .item_col:first-child { + padding: 0 40px; +} + +.techwave_fn_pricing .pricing__heading .item.wide:after { + content: ''; + left: 30px; + right: 30px; + position: absolute; + height: 4px; + border-radius: 5px; + top: 50%; + margin-top: -2px; + background-color: var(--techwave-site-bg-color); +} + +.techwave_fn_pricing .pricing__fields .item_row:nth-child(1) .item_col { + padding-top: 35px; +} + +.techwave_fn_pricing .pricing__fields .item_row:last-child .item_col { + padding-bottom: 24px; +} + +.techwave_fn_pricing .pricing__fields .item_col { + padding: 9px 30px; + line-height: 24px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.techwave_fn_pricing .pricing__fields .option_text { + font-size: 16px; + margin: 0; + padding: 0; + letter-spacing: .5px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_pricing .pricing__fields .heading_text { + font-size: 16px; + margin: 0; + padding: 0; + letter-spacing: .5px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_pricing .pricing__footer { + border-top: 1px solid var(--techwave-border-color); +} + +.techwave_fn_pricing .pricing__footer .item_col { + padding: 40px 30px; +} + +.techwave_fn_pricing .pricing__footer a { + width: 100%; +} + +/*------------------------------------------------------------------*/ + +/* 40) Shortcode: Pricing Mobile +/*------------------------------------------------------------------*/ + +.fn__mobile_pricing { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + display: none; + flex-wrap: wrap; + margin-left: -20px; + text-align: center; +} + +.fn__mobile_pricing .pricing__item { + width: 33.3333%; + padding-left: 20px; + margin-bottom: 20px; +} + +.fn__mobile_pricing .pricing__item_holder { + width: 100%; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + border-radius: 5px; + position: relative; +} + +.fn__mobile_pricing .pricing__item__header { + padding: 35px 10px 40px 10px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + justify-content: center; + -ms-align-items: center; + align-items: center; +} + +.fn__mobile_pricing .pricing__item__header .title { + margin: 0; + padding: 0; + font-size: 24px; + letter-spacing: 0; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 10px; +} + +.fn__mobile_pricing .pricing__item__header .price { + margin: 0; + padding: 0; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + font-size: 14px; + font-weight: 500; + margin-bottom: 11px; +} + +.fn__mobile_pricing .pricing__item__header .price span { + font-size: 36px; + font-weight: 500; +} + +.fn__mobile_pricing .pricing__item__header .desc { + margin: 0; + padding: 0; + font-size: 14px; + letter-spacing: 0; + line-height: 20px; + font-weight: 400; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 24px; +} + +.fn__mobile_pricing .pricing__item__header .desc span { + color: var(--techwave-heading-color); +} + +.fn__mobile_pricing .pricing__item__header .purchase { + padding: 0; + margin: 0; +} + +.fn__mobile_pricing .pricing__item__header .purchase a { + width: 100%; +} + +.fn__mobile_pricing .pricing__item__heading { + background-color: var(--techwave-some-a-bg-color); + padding: 0 10px; + text-align: center; + height: 40px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.fn__mobile_pricing .pricing__item__heading .title { + font-size: 14px; + margin: 0; + padding: 0; + font-weight: 500; + letter-spacing: .5px; + text-transform: uppercase; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.fn__mobile_pricing .pricing__item_list { + padding: 10px 0px; +} + +.fn__mobile_pricing .pricing__item_list_item { + padding: 7px 10px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: space-between; + column-gap: 20px; +} + +.fn__mobile_pricing .pricing__item_list .title { + font-size: 14px; + margin: 0; + padding: 0; + letter-spacing: .5px; + font-weight: 400; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + text-align: left; +} + +.fn__mobile_pricing .pricing__item_list .desc { + font-size: 16px; + margin: 0; + padding: 0; + letter-spacing: .5px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + text-align: right; + white-space: nowrap; +} + +.fn__mobile_pricing .pricing__item_footer { + padding: 30px 10px; + border-top: 1px solid var(--techwave-border-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +/*------------------------------------------------------------------*/ + +/* 41) Page: User Profile +/*------------------------------------------------------------------*/ + +.techwave_fn_user_profile { + padding: 40px 0; +} + +.techwave_fn_user_profile .user__profile { + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + position: relative; + padding: 30px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + margin-bottom: 10px; +} + +.techwave_fn_user_profile .user__profile .user_edit { + position: absolute; + top: 30px; + right: 30px; +} + +.techwave_fn_user_profile .user__profile .user_edit .fn__svg { + width: 16px; + height: 16px; +} + +.techwave_fn_user_profile .user__profile .user_avatar { + width: 200px; + min-width: 200px; + margin-right: 30px; +} + +.techwave_fn_user_profile .user__profile .user_avatar img { + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 1 / 1; + border-radius: 5px; +} + +.techwave_fn_user_profile .user__profile .user_details ul { + margin: 0; + padding: 0; + list-style-type: none; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; + margin-left: -20px; +} + +.techwave_fn_user_profile .user__profile .user_details li { + margin: 11px 0; + padding: 0; + width: 50%; + padding-left: 20px; +} + +.techwave_fn_user_profile .user__profile .subtitle { + margin: 0; + padding: 0; + font-weight: 500; + letter-spacing: .5px; + font-size: 11px; + text-transform: uppercase; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 7px; +} + +.techwave_fn_user_profile .user__profile .title { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_user_profile .user__plan { + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + position: relative; + padding: 38px 30px 33px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: space-between; + margin-bottom: 38px; + column-gap: 30px; +} + +.techwave_fn_user_profile .user__plan .subtitle { + margin: 0; + padding: 0; + font-weight: 500; + letter-spacing: .5px; + font-size: 11px; + text-transform: uppercase; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 4px; +} + +.techwave_fn_user_profile .user__plan .info { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_user_profile .user__plan .info span { + color: var(--techwave-heading-color); +} + +.techwave_fn_user_profile .user__interests .title { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 14px; +} + +/*------------------------------------------------------------------*/ + +/* 42) Shortcode: Options list (used in user profile page) +/*------------------------------------------------------------------*/ + +.fn__options_list ul { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; + margin-left: -10px; +} + +.fn__options_list li { + padding-left: 10px; + margin-bottom: 10px; +} + +/*------------------------------------------------------------------*/ + +/* 43) Page: User Settings +/*------------------------------------------------------------------*/ + +.techwave_fn_user_settings { + padding: 40px 0; +} + +.techwave_fn_user_settings .user__settings { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + column-gap: 40px; +} + +.techwave_fn_user_settings .settings_left { + width: 300px; + max-width: 50%; +} + +.techwave_fn_user_settings .settings_right { + flex: auto; + max-width: 50%; +} + +.techwave_fn_user_settings .input_label { + display: block; + font-size: 16px; + font-weight: 400; + font-family: var(--techwave-body-font-family); + color: var(--techwave-heading-color); + line-height: 40px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.techwave_fn_user_settings .input_item { + position: relative; +} + +.techwave_fn_user_settings .input_item .email { + margin: 0; + padding: 0; + position: absolute; + top: 50%; + margin-top: -15px; + border-radius: 5px; + display: block; + width: 30px; + height: 30px; + background-color: var(--techwave-some-a-bg-color); + left: 12px; + color: var(--techwave-main-color); + line-height: 30px; + text-align: center; + font-size: 16px; + font-family: var(--techwave-body-font-family); + pointer-events: none; +} + +.techwave_fn_user_settings .input { + display: block; + width: 100%; + border-radius: 5px; + height: 60px; +} + +.techwave_fn_user_settings .settings_right .fn__checkbox { + margin: 30px 0; + display: block; + width: fit-content; + max-width: 100%; +} + +.techwave_fn_user_settings .settings_right .item { + margin-bottom: 17px; +} + +.techwave_fn_user_settings .settings_right .item:last-child { + margin-bottom: 0; +} + +.techwave_fn_user_settings #username { + padding-left: 50px; +} + +/*------------------------------------------------------------------*/ + +/* 44) Upload Button +/*------------------------------------------------------------------*/ + +.fn__upload { + cursor: pointer; + text-align: center; + width: 100%; + aspect-ratio: 1 / 1; + border: 2px dashed var(--techwave-border-color); + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + padding: 46px; + transition: all .3s ease; + position: relative; + display: block; + overflow: hidden; +} + +.fn__upload .upload_content { + width: 100%; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + justify-content: center; + -ms-align-items: center; + align-items: center; + min-height: 100%; +} + +.fn__upload.has_img { + border-color: var(--techwave-main-color); +} + +.fn__upload.has_img .upload_content { + opacity: 0; +} + +.fn__upload .upload_preview { + opacity: 0; + visibility: hidden; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.fn__upload.has_img .upload_preview { + opacity: 1; + visibility: visible; +} + +.fn__upload:hover { + opacity: .8; +} + +.fn__upload .preview_img { + object-fit: cover; +} + +.fn__upload .preview_img[src="#"] { + opacity: 0; +} + +.fn__upload input[type="file"] { + z-index: 2; + position: absolute; + top: 0; + left: 0; + opacity: 0; + width: 100%; + height: 100%; + display: block; + cursor: pointer; +} + +.fn__upload .upload_content .fn__svg { + width: 70px; + height: auto; + color: var(--techwave-heading-color); + margin-bottom: 15px; +} + +.fn__upload .upload_content .fn__lined_text { + margin-bottom: 4px; +} + +.fn__upload .upload_content .title { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 3px; +} + +.fn__upload .upload_content .desc { + margin: 0; + padding: 0; + padding-top: 6px; + font-size: 12px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.fn__upload .fn__closer { + position: absolute; + right: 10px; + top: 10px; + z-index: 3; +} + +/*------------------------------------------------------------------*/ + +/* 45) Page: User Billing +/*------------------------------------------------------------------*/ + +.techwave_fn_user_billing { + padding: 40px 0; +} + +.techwave_fn_user_billing .billing__plan { + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + position: relative; + padding: 28px 30px 23px; + margin-bottom: 10px; +} + +.techwave_fn_user_billing .billing__plan .title { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 4px; +} + +.techwave_fn_user_billing .billing__plan .desc { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_user_billing .billing__plan .plan { + position: absolute; + left: 30px; + top: -10px; + display: block; + height: 20px; + padding: 0 15px; + background-color: var(--techwave-main-color); + color: #fff; + font-family: var(--techwave-heading-font-family); + font-weight: 500; + font-size: 11px; + letter-spacing: .5px; + text-transform: uppercase; + line-height: 20px; + border-radius: 10px; +} + +.techwave_fn_user_billing .billing__plan .plan * { + position: relative; + top: 1px; +} + +.techwave_fn_user_billing .billing__activation { + margin-bottom: 39px; +} + +.techwave_fn_user_billing .billing__activation .activation_status .title { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 5px; +} + +.techwave_fn_user_billing .billing__activation .activation_status .desc { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_user_billing .billing__activation .activation_status { + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + position: relative; + padding: 28px 30px 23px; + margin-bottom: 15px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + column-gap: 30px; +} + +.techwave_fn_user_billing .billing__activation .status_right { + width: 150px; + max-width: 50%; + text-align: right; +} + +.techwave_fn_user_billing .billing__activation .status_right .info { + display: block; + font-size: 11px; + letter-spacing: .5px; + text-transform: uppercase; + font-weight: 500; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + line-height: 1; + margin-bottom: 6px; +} + +.techwave_fn_user_billing .billing__activation .status_right .progress { + display: block; + width: 100%; + height: 4px; + background-color: var(--techwave-some-a-bg-color); + border-radius: 4px; + position: relative; +} + +.techwave_fn_user_billing .billing__activation .status_right .progress.active:after { + width: var(--frenify-progress); +} + +.techwave_fn_user_billing .billing__activation .status_right .progress:after { + right: 0; + top: 0; + position: absolute; + bottom: 0; + background-color: var(--techwave-main-color); + border-radius: 4px; + width: 0; + transition: all .3s ease; + content: ''; +} + +.techwave_fn_user_billing .billing__activation .activation_actions { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; +} + +.techwave_fn_user_billing .billing__activation .activation_actions a { + margin: 5px 10px 5px 0; +} + +.techwave_fn_user_billing .payment__methods .title { + margin: 0; + padding: 0; + font-size: 22px; + line-height: 1.364; + font-weight: 600; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 22px; +} + +.techwave_fn_user_billing .payment__methods .payment__list { + margin: 0; + list-style-type: none; + padding: 0; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; + margin-left: -20px; +} + +.techwave_fn_user_billing .payment__methods .payment__list_item { + margin: 0; + padding: 0; + width: 50%; + padding-left: 20px; + margin-bottom: 20px; +} + +.techwave_fn_user_billing .payment__methods .ready .item { + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + position: relative; +} + +.techwave_fn_user_billing .payment__methods .ready .item_header { + padding: 17px 15px 13px; + border-bottom: 1px solid var(--techwave-border-color); +} + +.techwave_fn_user_billing .payment__methods .ready .title { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 3px; +} + +.techwave_fn_user_billing .payment__methods .ready .subtitle { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_user_billing .payment__methods .ready .action { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + width: 100%; + justify-content: space-between; + height: 40px; + padding: 0 15px; + -ms-align-items: center; + align-items: center; +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper { + position: relative; +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .options { + width: 30px; + height: 30px; + border-radius: 30px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .dots { + display: block; + position: relative; + width: 15px; + height: 3px; + border-left: 3px solid var(--techwave-heading-color); + border-right: 3px solid var(--techwave-heading-color); +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .dots:after { + width: 3px; + top: 0; + bottom: 0; + left: 3px; + content: ''; + position: absolute; + background-color: var(--techwave-heading-color); +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper:hover .edit__popup { + opacity: 1; + visibility: visible; + transform: translateY(0px); +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup { + position: absolute; + left: 100%; + bottom: 0; + width: 140px; + opacity: 0; + visibility: hidden; + transition: all .3s ease; + transform: translateY(-20px); +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup a { + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + text-decoration: none; + overflow: hidden; +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup a:hover { + color: var(--techwave-main-color); +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup ul { + list-style-type: none; + background-color: var(--techwave-some-a-bg-color); + border-radius: 5px; + margin: 0; + padding: 15px 20px; +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup li { + margin: 0; + margin-bottom: 3px; + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup li:last-child { + margin-bottom: 0; +} + +.techwave_fn_user_billing .payment__methods .ready .primary { + display: block; + height: 20px; + padding: 0 15px; + background-color: var(--techwave-main-color); + color: #fff; + font-family: var(--techwave-heading-font-family); + font-weight: 500; + font-size: 11px; + letter-spacing: .5px; + text-transform: uppercase; + line-height: 20px; + border-radius: 15px; +} + +.techwave_fn_user_billing .payment__methods .ready .primary span { + position: relative; + top: 1px; +} + +.techwave_fn_user_billing .payment__methods .new .item { + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + position: relative; + padding: 30px 15px 27px; + text-align: center; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.techwave_fn_user_billing .payment__methods .new .item a { + z-index: 2; +} + +.techwave_fn_user_billing .payment__methods .new .add { + height: 40px; + width: 40px; + position: relative; + margin-bottom: 9px; +} + +.techwave_fn_user_billing .payment__methods .new .add:after { + width: 2px; + height: 40px; + position: absolute; + content: ''; + left: 50%; + margin-left: -1px; + background-color: var(--techwave-border-color); + top: 50%; + margin-top: -20px; +} + +.techwave_fn_user_billing .payment__methods .new .add:before { + width: 40px; + height: 2px; + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin-left: -20px; + margin-top: -1px; + background-color: var(--techwave-border-color); +} + +.techwave_fn_user_billing .payment__methods .new .text { + font-weight: 500; + font-size: 14px; + line-height: 1; + text-transform: uppercase; + letter-spacing: .5px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +/*------------------------------------------------------------------*/ + +/* 46) Page: AI Chat Bot +/*------------------------------------------------------------------*/ + +.techwave_fn_aichatbot_page { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + min-height: calc(100vh - var(--techwave-header-height) - 71px); +} + +.techwave_fn_aichatbot_page .chat__page { + width: 100%; + padding-top: 38px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + position: relative; + z-index: 3; +} + +.techwave_fn_image_generation_page .generation__sidebar, +.techwave_fn_doc_page .docsidebar, +.techwave_fn_aichatbot_page .chat__sidebar { + width: 300px; + min-width: 300px; + border-left: 1px solid var(--techwave-border-color); + background-color: var(--techwave-header-bg-color); + top: var(--techwave-header-height); + position: fixed; + z-index: 1; + right: 0; + bottom: 0; + transform: translateX(105%); + transition: all .2s ease; +} + +.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_image_generation_page .generation__sidebar, +.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_doc_page .docsidebar, +.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_aichatbot_page .chat__sidebar { + transform: translateX(0); +} + +.techwave_fn_aichatbot_page .chat__sidebar .sidebar_header { + padding: 20px; + border-bottom: 1px solid var(--techwave-border-color); +} + +.techwave_fn_aichatbot_page .chat__sidebar .sidebar_content { + padding: 20px; +} + +.techwave_fn_aichatbot_page .chat__sidebar .sidebar_content ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.fn__chat_link { + text-decoration: none; + display: block; + height: 40px; + line-height: 40px; + padding: 0 20px; + padding-right: 40px; + border: 1px solid var(--techwave-border-color); + border-radius: 5px; + font-size: 16px; + font-weight: 400; + letter-spacing: 0; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-body-color); + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.fn__chat_link:hover { + border-color: var(--techwave-body-color); +} + +.fn__chat_link.active { + border-color: var(--techwave-main-color); + color: var(--techwave-heading-color); +} + +.fn__chat_link a:hover { + border-color: var(--techwave-main-color); +} + +.fn__chat_link .text { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.fn__chat_link .options { + position: absolute; + right: 0; + top: 0; + bottom: 0; + display: block; +} + +.fn__chat_link.opened .trigger span:after { + background-color: var(--techwave-heading-color); +} + +.fn__chat_link.opened .trigger span { + border-left-color: var(--techwave-heading-color); + border-right-color: var(--techwave-heading-color); +} + +.fn__chat_link.opened .trigger { + background-color: var(--techwave-some-a-bg-color); +} + +.fn__chat_link .trigger { + background-color: transparent; + padding: 0; + margin: 0; + outline: none; + border: none; + width: 38px; + height: 38px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 0 4px 4px 0; +} + +.fn__chat_link .trigger:hover { + background-color: var(--techwave-some-a-bg-color); +} + +.fn__chat_link .trigger span { + display: block; + position: relative; + width: 15px; + height: 3px; + border-left: 3px solid var(--techwave-body-color); + border-right: 3px solid var(--techwave-body-color); +} + +.fn__chat_link .trigger span:after { + width: 3px; + top: 0; + bottom: 0; + left: 3px; + content: ''; + position: absolute; + background-color: var(--techwave-body-color); +} + +.fn__chat_link.opened { + z-index: 10; +} + +.fn__chat_link.opened .options__popup { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.fn__chat_link .options__popup { + position: absolute; + top: 100%; + right: -1px; + width: 140px; + transition: all .3s ease; + padding-top: 6px; + opacity: 0; + visibility: hidden; + transform: translateY(20px); +} + +.fn__chat_link .options__list { + list-style-type: none; + background-color: var(--techwave-some-a-bg-color); + border-radius: 5px; + margin: 0; + padding: 15px 20px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; +} + +.fn__chat_link .options__list button:last-child { + margin-bottom: 0; +} + +.fn__chat_link .options__list button:hover { + color: var(--techwave-main-color); +} + +.fn__chat_link .options__list button { + background-color: transparent; + outline: none; + border: none; + padding: 0; + margin: 0; + text-align: left; + cursor: pointer; + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + text-decoration: none; + overflow: hidden; + margin-bottom: 3px; + transition: all .3s ease; +} + +.fn__chat_link.live_edit .save_options, +.fn__chat_link.live_edit input { + opacity: 1; + visibility: visible; +} + +.fn__chat_link.live_edit .options, +.fn__chat_link.live_edit .text { + opacity: 0; + visibility: hidden; +} + +.fn__chat_link input { + position: absolute; + height: 24px; + left: 12px; + right: 63px; + margin: 0; + padding: 0 7px; + top: 50%; + margin-top: -11px; + font-size: 16px; + font-weight: 400; + letter-spacing: 0; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-body-color); + background-color: transparent; + outline: none; + opacity: 0; + visibility: hidden; + min-width: inherit; + border: 1px solid var(--techwave-border-color); + border-radius: 5px; +} + +.fn__chat_link .save_options { + position: absolute; + right: 0; + top: 0; + bottom: 0; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + opacity: 0; + visibility: hidden; +} + +.fn__chat_link .save_options button { + width: 24px; + height: 24px; + border: none; + cursor: pointer; + outline: none; + border-radius: 5px; + background-color: var(--techwave-some-a-bg-color); + margin-right: 5px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + color: var(--techwave-heading-color); +} + +.fn__chat_link .save_options button:hover { + background-color: var(--techwave-main-color); + color: #fff; +} + +.fn__chat_link .save_options .fn__svg { + width: 10px; + height: 10px; +} + +.techwave_fn_aichatbot_page .chat__sidebar .group__title { + margin: 0; + padding: 0 10px; + text-transform: uppercase; + font-weight: 500; + font-size: 11px; + letter-spacing: .5px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 12px; +} + +.techwave_fn_aichatbot_page .chat__comment { + margin-top: auto; + position: sticky; + bottom: 0; + padding: 20px 0; + background-color: var(--techwave-site-bg-color) +} + +.fn__chat_comment { + position: relative; +} + +.fn__chat_comment .new__chat { + position: absolute; + width: 500px; + max-width: 100%; + bottom: 100%; + margin-bottom: 53px; + left: 50%; + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); + border-radius: 5px; + padding: 35px 40px 33px; + text-align: center; + transform: translateY(-20px) translateX(-50%) translateZ(0); + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: all .3s ease; +} + +.fn__chat_comment.neww .new__chat { + transform: translateY(0px) translateX(-50%) translateZ(0); + opacity: 1; + visibility: visible; +} + +.fn__chat_comment .new__chat:after { + position: absolute; + left: 50%; + margin-left: -19px; + top: 100%; + margin-top: -1px; + width: 0; + height: 0; + border-style: solid; + border-width: 14px 19px 0 19px; + border-color: var(--techwave-some-r-bg-color) transparent transparent transparent; + content: ''; + filter: drop-shadow(0px 1px var(--techwave-border-color)); +} + +.fn__chat_comment .new__chat * { + margin: 0; + padding: 0; + font-size: 16px; + line-height: 1.5; + letter-spacing: .5px; + font-weight: 500; + text-transform: uppercase; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.fn__hidden_textarea { + position: absolute; + top: 0; + left: 0; + right: 0; + max-height: inherit; + opacity: 0; + pointer-events: none; + overflow-y: scroll; +} + +.fn__chat_comment textarea { + border: 2px solid var(--techwave-border-color); + background-color: transparent; + border-radius: 5px; + outline: none; + display: block; + width: 100%; + padding: 18px 20px 16px; + padding-right: 72px; + font-size: 16px; + font-weight: 400; + line-height: 22px; + max-height: 170px; + font-family: var(--techwave-heading-font-family); + resize: none; + overflow-y: hidden; + color: var(--techwave-heading-color); +} + +#fn__chat_textarea::-webkit-scrollbar { + width: 0; +} + +.fn__chat_comment textarea:focus { + border-color: var(--techwave-main-color); +} + +.fn__chat_comment button { + position: absolute; + width: 60px; + height: 44px; + bottom: 8px; + right: 8px; + padding: 0; + margin: 0; + border-radius: 5px; + outline: none; + cursor: pointer; + border: none; + background-color: var(--techwave-some-a-bg-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + color: var(--techwave-heading-color); + transition: all .3s ease; +} + +.fn__chat_comment button.disabled { + cursor: not-allowed; + opacity: .5; +} + +.fn__chat_comment button:hover { + opacity: .8; +} + +.fn__chat_comment .fn__svg { + width: 21px; + height: 21px; +} + +.fn__new_chat_link { + text-decoration: none; + display: block; + width: 100%; + height: 40px; + line-height: 40px; + padding: 0 10px 0 44px; + position: relative; + font-weight: 500; + text-transform: uppercase; + font-size: 14px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + background-color: var(--techwave-some-a-bg-color); + border-radius: 5px; +} + +.fn__new_chat_link:hover { + opacity: .8; +} + +.fn__new_chat_link .text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + position: relative; + top: 1px; +} + +.fn__new_chat_link .icon { + position: absolute; + width: 24px; + height: 24px; + display: block; + border-radius: 100%; + background-color: #454449; + left: 10px; + top: 50%; + margin-top: -12px; +} + +.fn__new_chat_link .icon:before { + content: ''; + position: absolute; + width: 2px; + height: 8px; + background-color: #b3aac7; + top: 50%; + left: 50%; + margin: -4px 0 0 -1px; +} + +.fn__new_chat_link .icon:after { + content: ''; + position: absolute; + width: 8px; + height: 2px; + background-color: #b3aac7; + top: 50%; + left: 50%; + margin: -1px 0 0 -4px; +} + +.techwave_fn_aichatbot_page .fn__title_holder { + margin-bottom: 23px; +} + +.techwave_fn_aichatbot_page .chat__item { + display: none; +} + +.techwave_fn_aichatbot_page .chat__item.active { + display: block; +} + +.fn__chatbot .chat__box { + position: relative; + margin-bottom: 20px; +} + +.fn__chatbot .chat__box:last-child { + margin-bottom: 0; +} + +.fn__chatbot .author { + position: absolute; + left: 30px; + top: -10px; + display: block; + height: 20px; + padding: 0 15px; + background-color: var(--techwave-main-color); + color: #fff; + font-family: var(--techwave-heading-font-family); + font-weight: 500; + font-size: 11px; + letter-spacing: .5px; + text-transform: uppercase; + line-height: 20px; + border-radius: 10px; +} + +.fn__chatbot .author * { + position: relative; + top: 1px; +} + +.fn__chatbot .chat { + padding: 30px; + border-radius: 5px; + font-size: 16px; + font-weight: 400; + line-height: 1.375; + font-family: var(--techwave-heading-font-family); +} + +.fn__chatbot .chat a { + text-decoration: underline; + color: var(--techwave-main-color); +} + +.fn__chatbot .chat a:hover { + text-decoration: none; +} + +.fn__chatbot .your__chat .chat { + background-color: var(--techwave-some-a-bg-color); + color: var(--techwave-heading-color); +} + +.fn__chatbot .bot__chat .author { + background-color: var(--techwave-some-a-bg-color); + color: var(--techwave-body-color); +} + +.fn__chatbot .bot__chat .chat { + background-color: var(--techwave-some-r-bg-color); + border: 1px solid var(--techwave-border-color); +} + +.fn__chatbot .chat>*:last-child:not(ul) { + margin-bottom: 0; +} + +/*------------------------------------------------------------------*/ + +/* 47) Page: Documentation +/*------------------------------------------------------------------*/ + +.techwave_fn_doc_page .doccontent { + padding: 40px 0; +} + +.techwave_fn_doc_page .doccontent * { + margin-bottom: 20px; +} + +.rounded { + border-radius: 5px; +} + +.techwave_fn_doc_page .docsidebar { + padding: 20px; +} + +.techwave_fn_doc_page .docsidebar .trigger { + right: 5px; + top: 50%; + margin-top: -6px; + position: absolute; + display: block; + color: var(--techwave-heading-color); + transform: rotate(90deg); + transition: all .2s ease; +} + +.techwave_fn_doc_page .docsidebar ul ul { + margin: 0; + list-style-type: none; + padding: 0; + margin-left: 26px; + margin-top: 4px; + overflow: hidden; +} + +.techwave_fn_doc_page .docsidebar .trigger .fn__svg { + width: 12px; + height: 12px; + display: block; +} + +.techwave_fn_doc_page .docsidebar li { + position: relative; + margin-bottom: 4px; +} + +.techwave_fn_doc_page .docsidebar ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.techwave_fn_doc_page .docsidebar ul ul a { + padding-left: 17px; +} + +.techwave_fn_doc_page .docsidebar ul ul a:after { + width: 5px; + height: 2px; + background-color: var(--techwave-heading-color); + position: absolute; + left: 6px; + top: 50%; + margin-top: -1px; + content: ''; +} + +.techwave_fn_doc_page .docsidebar li:hover>a, +.techwave_fn_doc_page .docsidebar .current>a { + background-color: var(--techwave-some-a-bg-color); +} + +.techwave_fn_doc_page .docsidebar a { + font-weight: 400; + border-radius: 5px; + font-family: var(--techwave-heading-font-family); + color: var(--techwave-heading-color); + text-decoration: none; + min-height: 36px; + padding: 5px 20px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + position: relative; +} + +/*------------------------------------------------------------------*/ + +/* 48) Page: Image Generation +/*------------------------------------------------------------------*/ + +.techwave_fn_image_generation_page .generation__page { + position: relative; + z-index: 2; +} + +.techwave_fn_image_generation_page .generation_more { + padding: 60px 40px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.techwave_fn_image_generation_page .generation_more .techwave_fn_button { + padding: 0 57px; +} + +.techwave_fn_image_generation_page .generation_header { + padding: 40px; + border-bottom: 1px solid var(--techwave-border-color); +} + +.techwave_fn_image_generation_page .generation_header .title { + margin: 0; + padding: 0; + font-size: 22px; + font-weight: 600; +} + +.techwave_fn_image_generation_page .generation_header .header_top { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + column-gap: 20px; + -ms-align-items: center; + align-items: center; + margin-bottom: 25px; +} + +.techwave_fn_image_generation_page .generation_header .setup { + -ms-align-items: center; + align-items: center; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + column-gap: 15px; +} + +.techwave_fn_image_generation_page .generation_header .info { + margin: 0; + padding: 0; + font-size: 12px; + font-weight: 400; + letter-spacing: 0; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_image_generation_page .sidebar__trigger { + min-width: 50px; + width: 50px; + height: 50px; + text-decoration: none; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + background-color: var(--techwave-some-a-bg-color); + border-radius: 100%; + color: var(--techwave-heading-color); + position: relative; +} + +.techwave_fn_image_generation_page .sidebar__trigger .fn__svg { + width: 24px; + height: 24px; + transition: all .3s ease; +} + +.techwave_fn_image_generation_page .header_bottom textarea { + border: 2px solid var(--techwave-border-color); + background-color: transparent; + border-radius: 5px; + outline: none; + display: block; + width: 100%; + padding: 18px 20px 16px; + font-size: 16px; + font-weight: 400; + line-height: 22px; + max-height: 170px; + font-family: var(--techwave-heading-font-family); + resize: none; + overflow-y: hidden; + color: var(--techwave-heading-color); +} + +.techwave_fn_image_generation_page .header_bottom textarea:focus { + border-color: var(--techwave-main-color); +} + +.techwave_fn_image_generation_page .include_area { + margin-bottom: 10px; + position: relative; +} + +.techwave_fn_image_generation_page .exclude_area { + position: relative; + overflow: hidden; +} + +.techwave_fn_image_generation_page .generate_section { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: flex-end; +} + +.techwave_fn_image_generation_page .generate_section #generate_it { + margin: 10px 0 10px 20px; +} + +.techwave_fn_image_generation_page .generation__sidebar .sidebar_details { + padding: 20px; +} + +.techwave_fn_image_generation_page .generation__sidebar .sidebar_details .title { + margin: 0; + padding: 0; + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; +} + +.techwave_fn_image_generation_page .generation__sidebar .sidebar_details .title .fn__tooltip { + margin-left: 8px; +} + +.techwave_fn_image_generation_page .generation__sidebar .sidebar_details .title .fn__svg { + display: block; + width: 14px; + height: 14px; + color: var(--techwave-body-color); +} + +.techwave_fn_image_generation_page .generation__sidebar .sidebar_model { + padding: 30px 20px; + border-bottom: 1px solid var(--techwave-border-color); + position: relative; + z-index: 5; +} + +.techwave_fn_image_generation_page .generation__sidebar .contrast_switcher, +.techwave_fn_image_generation_page .generation__sidebar .prompt_magic_switcher { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + -ms-align-items: center; + align-items: center; +} + +.techwave_fn_image_generation_page .generation__sidebar .number_of_images { + margin-bottom: 29px; +} + +.techwave_fn_image_generation_page .generation__sidebar .number_of_images .title { + margin-bottom: 9px; +} + +.techwave_fn_image_generation_page .generation__sidebar .img_sizes { + margin-bottom: 28px; +} + +.techwave_fn_image_generation_page .generation__sidebar .img_sizes .title { + margin-bottom: 10px; +} + +.techwave_fn_image_generation_page .generation__sidebar .guidance_scale .title { + margin-bottom: 4px; +} + +.techwave_fn_image_generation_page .generation__sidebar .guidance_scale { + margin-bottom: 23px; +} + +.techwave_fn_image_generation_page .generation__sidebar .prompt_magic_switcher { + margin-bottom: 30px; +} + +/*------------------------------------------------------------------*/ + +/* 49) Icon Options (icon lightbox) +/*------------------------------------------------------------------*/ + +.fn__icon_options { + position: relative; +} + +.fn__icon_options.align_right .fn__icon_popup { + left: auto; + right: 0; +} + +.fn__icon_options .fn__icon_popup { + opacity: 0; + visibility: hidden; + transform: translateY(20px); + position: absolute; + left: 0; + top: 100%; + width: 240px; + margin: 0; + padding: 0; + padding-top: 5px; + transition: all .3s ease; + pointer-events: none; +} + +.fn__icon_options.medium_size .fn__icon_button { + width: 40px; + height: 40px; +} + +.fn__icon_options.medium_size .fn__icon_button .fn__svg { + width: 16px; + height: 16px; +} + +.fn__icon_options:hover .fn__icon_popup { + opacity: 1; + visibility: visible; + transform: translateY(0); + pointer-events: all; +} + +.fn__icon_options .fn__icon_popup ul { + list-style-type: none; + background-color: var(--techwave-some-a-bg-color); + border-radius: 5px; + margin: 0; + padding: 15px 20px; +} + +.fn__icon_options .fn__icon_popup li:last-child { + margin-bottom: 0; +} + +.fn__icon_options .fn__icon_popup li { + margin: 0; + margin-bottom: 3px; + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.fn__icon_options .fn__icon_popup a { + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + text-decoration: none; + overflow: hidden; +} + +.fn__icon_options .fn__icon_popup a:hover { + color: var(--techwave-main-color); + opacity: .9; +} + +.fn__icon_options .fn__icon_popup .high_priorety a { + color: #f1416c; +} + +/*------------------------------------------------------------------*/ + +/* 50) Generation Item (used in image generation page) +/*------------------------------------------------------------------*/ + +.fn__generation_item { + padding: 31px 40px 10px; + border-bottom: 1px solid var(--techwave-border-color); + position: relative; +} + +.fn__generation_item:hover { + z-index: 10; +} + +.fn__generation_item .item_header { + padding: 0 0 20px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + column-gap: 20px; + -ms-align-items: center; + align-items: center; + width: 100%; + position: relative; + z-index: 1; +} + +.fn__generation_item .item_header .item_options { + width: 100%; + width: auto; + -webkit-box-pack: end; + justify-content: flex-end; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + column-gap: 5px; +} + +.fn__generation_item .item_header .title_holder { + width: 100%; +} + +.fn__generation_item .item_header .prompt_title { + margin: 0; + padding: 0; + font-size: 16px; + line-height: 22px; + font-weight: 400; + letter-spacing: 0; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + align-self: flex-end; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + --chakra-line-clamp: 1; +} + +.fn__generation_item .item_header .negative_prompt_title { + margin: 0; + padding: 0; + font-size: 14px; + line-height: 22px; + font-weight: 400; + letter-spacing: 0; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); + align-self: flex-end; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + --chakra-line-clamp: 1; +} + +/*------------------------------------------------------------------*/ + +/* 51) Generation List (used in image generation page) +/*------------------------------------------------------------------*/ + +.fn__generation_list { + margin: 0; + padding: 0; + list-style-type: none; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; + margin-left: -20px; +} + +.fn__generation_list .fn__gl_item { + margin: 0; + padding: 0; + padding-left: 20px; + width: 25%; + margin-bottom: 20px; +} + +.fn__generation_list .fn__gl__item { + width: 100%; + position: relative; +} + +.fn__generation_list .fn__gl__item:before { + content: ""; + height: 0px; + display: block; + padding-bottom: 100%; +} + +.fn__generation_list .abs_item { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.fn__generation_list .abs_item img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 5px; +} + +.fn__generation_list .fn__gl__item:hover .all_options { + transform: translateY(0); + opacity: 1; + visibility: visible; + pointer-events: all; +} + +.fn__generation_list .all_options { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + position: absolute; + bottom: 5px; + left: 10px; + right: 10px; + flex-wrap: wrap; + transform: translateY(20px); + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: all .3s ease; +} + +.fn__generation_list .all_options .fn__icon_options { + margin: 0 5px 5px 0; +} + +/*------------------------------------------------------------------*/ + +/* 52) Input Toggle (custom) +/*------------------------------------------------------------------*/ + +.fn__toggle { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + column-gap: 7px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + font-size: 16px; + font-weight: 400; + letter-spacing: 0; + font-family: var(--techwave-heading-font-family); +} + +.fn__toggle .t_in { + position: relative; + width: 34px; + height: 20px; +} + +.fn__toggle .t_content:before { + right: 0; + bottom: 0; + top: 0; + left: 0; + position: absolute; + color: var(--techwave-main-color1); + content: ''; + opacity: .1; + border-radius: 20px; + box-shadow: 0px 5px 15px; +} + +.fn__toggle .t_content:after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 20px; + border: 2px solid transparent; + -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: destination-out; + -webkit-mask-composite: source-out; + mask-composite: exclude; + background-size: 300% 300%; + -webkit-animation: animatedgradient 4s ease alternate infinite; + animation: animatedgradient 4s ease alternate infinite; +} + +.fn__toggle input { + opacity: 0; + width: 0; + height: 0; +} + +.fn__toggle .t_slider { + position: absolute; + cursor: pointer; + width: 12px; + height: 12px; + background-color: var(--techwave-main-color); + left: 4px; + top: 50%; + margin-top: -6px; + border-radius: 100%; + -webkit-transition: .4s; + transition: .4s; +} + +.fn__toggle .t_content:after { + background: #454449; +} + +.fn__toggle .t_slider { + background-color: #454449; +} + +.fn__toggle input:checked+.t_slider { + -webkit-transform: translateX(14px); + -ms-transform: translateX(14px); + transform: translateX(14px); + background-color: var(--techwave-main-color); +} + +.fn__toggle input:checked~.t_content:after { + background: -moz-linear-gradient(270deg, var(--techwave-main-color1), var(--techwave-main-color2), var(--techwave-main-color1), var(--techwave-main-color2)) border-box; + background: -webkit-linear-gradient(270deg, var(--techwave-main-color1), var(--techwave-main-color2), var(--techwave-main-color1), var(--techwave-main-color2)) border-box; + background: linear-gradient(270deg, var(--techwave-main-color1), var(--techwave-main-color2), var(--techwave-main-color1), var(--techwave-main-color2)) border-box; +} + +.fn__toggle .t_in { + border-radius: 34px; +} + +.fn__toggle .t_in:before { + border-radius: 50%; +} + +/*------------------------------------------------------------------*/ + +/* 53) Select Model (used in image generation page) +/*------------------------------------------------------------------*/ + +.fn__select_model { + position: relative; +} + +.fn__select_model .all_models { + position: absolute; + width: 100%; + left: 0; + top: 100%; + right: 0; + padding-top: 5px; + opacity: 0; + visibility: hidden; + transform: translateY(20px); + transition: all .3s ease; + pointer-events: none; +} + +.fn__select_model.opened .all_models { + opacity: 1; + visibility: visible; + pointer-events: all; + transform: translateY(0); +} + +.fn__select_model .all_models ul { + list-style-type: none; + background-color: var(--techwave-some-a-bg-color); + border-radius: 5px; + margin: 0; + padding: 15px 20px; +} + +.fn__select_model .all_models li:last-child { + margin-bottom: 0; +} + +.fn__select_model .all_models li { + margin: 0; + margin-bottom: 3px; + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.fn__select_model .all_models a.selected { + color: var(--techwave-body-color); +} + +.fn__select_model .all_models a { + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + text-decoration: none; + overflow: hidden; +} + +.fn__select_model .all_models a:hover { + color: var(--techwave-main-color); + opacity: .9; +} + +.fn__select_model .model_open { + text-decoration: none; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + padding-right: 50px; + position: relative; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} + +.fn__select_model .fn__icon_button { + position: absolute; + top: 50%; + margin-top: -15px; + right: 0; +} + +.fn__select_model .user_img { + margin-right: 15px; + width: 40px; + height: 40px; + border-radius: 5px; + object-fit: cover; +} + +.fn__select_model .subtitle { + margin: 0; + padding: 0; + font-weight: 500; + text-transform: uppercase; + letter-spacing: .5px; + font-size: 11px; + color: var(--techwave-body-color); + font-family: var(--techwave-heading-font-family); +} + +.fn__select_model .title { + margin: 0; + padding: 0; + font-weight: 400; + letter-spacing: 0px; + font-size: 16px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +/*------------------------------------------------------------------*/ + +/* 54) Input quantity (custom) +/*------------------------------------------------------------------*/ + +.fn__quantity { + width: 120px; + height: 40px; + position: relative; +} + +.fn__quantity a { + display: block; + position: absolute; + width: 24px; + height: 24px; + text-decoration: none; + border-radius: 100%; + background-color: var(--techwave-border-color); + top: 50%; + margin-top: -12px; +} + +.fn__quantity a:after { + content: ''; + position: absolute; + background-color: var(--techwave-heading-color); + top: 50%; + left: 50%; + width: 8px; + height: 2px; + margin: -1px 0 0 -4px; +} + +.fn__quantity a.increase:before { + content: ''; + position: absolute; + background-color: var(--techwave-heading-color); + top: 50%; + left: 50%; + width: 2px; + height: 8px; + margin: -4px 0 0 -1px; +} + +.fn__quantity .decrease { + left: 8px; +} + +.fn__quantity .increase { + right: 8px; +} + +.fn__quantity input { + width: 100%; + max-width: 100%; + min-width: 100%; + border-radius: 20px; + height: 40px; + display: block; + text-align: center; + font-size: 16px; + font-weight: 400; + padding: 0 34px; + border: 2px solid var(--techwave-border-color); + color: var(--techwave-heading-color); +} + +.fn__quantity input::-webkit-outer-spin-button, +.fn__quantity input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.fn__quantity input[type=number] { + -moz-appearance: textfield; +} + +/*------------------------------------------------------------------*/ + +/* 55) Input Range (custom) +/*------------------------------------------------------------------*/ + +.fn__range { + position: relative; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; +} + +.fn__range .range_in { + position: relative; + width: 100%; +} + +.fn__range .slider { + width: 0; + display: block; + position: absolute; + left: 0; + border-radius: 5px; + height: 4px; + top: 50%; + margin-top: -2px; + pointer-events: none; +} + +.fn__range .slider:after { + left: 0; + right: 0; + top: 0; + bottom: 0; + position: absolute; + content: ''; + border-radius: 5px 0 0 5px; + background-color: var(--techwave-main-color); +} + +.fn__range .slider:before { + width: 14px; + height: 14px; + background: var(--techwave-heading-color); + cursor: pointer; + border-radius: 100%; + position: absolute; + display: block; + right: 0; + top: 50%; + margin-top: -7px; + content: ''; + z-index: 2; +} + +.fn__range .value { + flex: auto; + width: 40px; + text-align: right; + padding-left: 10px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + font-size: 16px; +} + +.fn__range input { + -webkit-appearance: none; + display: block; + width: 100%; + margin: 0; + height: 4px; + border-radius: 5px; + outline: none; + border: none; + background-color: var(--techwave-some-a-bg-color); +} + +.fn__range input::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 14px; + height: 14px; + background: var(--techwave-heading-color); + cursor: pointer; + border-radius: 100%; + opacity: 0; +} + +.fn__range input::-moz-range-thumb { + width: 14px; + height: 14px; + background: var(--techwave-heading-color); + cursor: pointer; + border-radius: 100%; + z-index: 3; + opacity: 0; +} + +/*------------------------------------------------------------------*/ + +/* 56) Page: Privacy Policy +/*------------------------------------------------------------------*/ + +.techwave_fn_privacy_page .privacypage { + padding: 40px 0; +} + +.techwave_fn_privacy_page .privacypage hr { + margin: 30px 0; +} + +.techwave_fn_privacy_page .privacypage h4 { + font-weight: 500; + font-size: 22px; +} + +/*------------------------------------------------------------------*/ + +/* 57) Contact Form +/*------------------------------------------------------------------*/ + +.fn_contact_form .input_list ul { + margin: 0; + padding: 0; + margin-left: -10px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; + list-style-type: none; +} + +.fn_contact_form .input_list input[type="text"], +.fn_contact_form .input_list input[type="email"] { + display: block; + width: 100%; + border-radius: 5px; + height: 60px; +} + +.fn_contact_form .input_list input, +.fn_contact_form .input_list textarea { + display: block; +} + +.fn_contact_form .input_list li { + margin: 0; + padding: 0; + width: 100%; + padding-left: 10px; + margin-bottom: 10px; +} + +.fn_contact_form .input_list li:last-child { + margin-top: 10px; +} + +.fn_contact_form .empty_notice, +.fn_contact_form .returnmessage { + padding: 20px; + width: 100%; + display: none; + color: var(--techwave-heading-color); + margin-top: 20px; + position: relative; + pointer-events: none; +} + +.fn_contact_form .empty_notice:after, +.fn_contact_form .returnmessage:after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 20px; + border: 2px solid transparent; + background: -moz-linear-gradient(270deg, var(--techwave-main-color1), var(--techwave-main-color2), var(--techwave-main-color1), var(--techwave-main-color2)) border-box; + background: -webkit-linear-gradient(270deg, var(--techwave-main-color1), var(--techwave-main-color2), var(--techwave-main-color1), var(--techwave-main-color2)) border-box; + background: linear-gradient(270deg, var(--techwave-main-color1), var(--techwave-main-color2), var(--techwave-main-color1), var(--techwave-main-color2)) border-box; + -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: destination-out; + -webkit-mask-composite: source-out; + mask-composite: exclude; + background-size: 300% 300%; + -webkit-animation: animatedgradient 4s ease alternate infinite; + animation: animatedgradient 4s ease alternate infinite; +} + +.fn_contact_form .empty_notice:before, +.fn_contact_form .returnmessage:before { + right: 0; + bottom: 0; + top: 0; + left: 0; + position: absolute; + color: var(--techwave-main-color1); + content: ''; + opacity: .1; + border-radius: 20px; + box-shadow: 0px 5px 15px; +} + +/*------------------------------------------------------------------*/ + +/* 58) Page: Contact +/*------------------------------------------------------------------*/ + +.techwave_fn_contact_page .contactpage { + padding: 40px 0; +} + +.techwave_fn_contact_page .contactpage { + font-size: 18px; + line-height: 24px; +} + +/*------------------------------------------------------------------*/ + +/* 59) Page: Models +/*------------------------------------------------------------------*/ + +.techwave_fn_models_page { + padding: 36px 0 40px 0; +} + +.techwave_fn_models_page .fn__title_holder { + margin-bottom: 28px; +} + +.techwave_fn_models_page .models__filter { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: space-between; + -ms-align-items: center; + align-items: center; + column-gap: 50px; + margin-bottom: 30px; + position: relative; + z-index: 10; + flex-wrap: wrap; +} + +.techwave_fn_models_page .models__filter .filter__left { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; +} + +.techwave_fn_models_page .models__filter .filter__right { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + column-gap: 5px; + margin: 5px 0; +} + +.techwave_fn_models_page .filter__search { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + flex-wrap: wrap; +} + +.techwave_fn_models_page .filter__search input { + margin: 5px 10px 5px 0; +} + +.techwave_fn_models_page .filter__search a { + margin: 5px 0; +} + +.techwave_fn_models_page .models__more { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + justify-content: center; + margin-top: 40px; + margin-bottom: 20px; +} + +.techwave_fn_models .models__results { + position: relative; +} + +.techwave_fn_models .loading .tab__item { + opacity: 0; + visibility: hidden; +} + +.techwave_fn_models .loading .fn__preloader { + opacity: 1; + visibility: visible; +} + +.tab__item { + display: none; +} + +.tab__item.active { + display: block; +} + +/*------------------------------------------------------------------*/ + +/* 60) Model Items (used in model page) +/*------------------------------------------------------------------*/ + +.fn__model_items { + margin: 0; + padding: 0; + list-style-type: none; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; + margin-left: -20px; +} + +.fn__model_item { + margin: 0; + padding: 0; + width: 20%; + padding-left: 20px; + margin-bottom: 20px; +} + +.fn__model_item .item { + border: 1px solid var(--techwave-border-color); + border-radius: 5px; + position: relative; + background-color: var(--techwave-some-r-bg-color); + min-height: 100%; +} + +.fn__model_item.new .item a { + z-index: 3; +} + +.fn__model_item.new .item { + padding: 30px 15px 27px; + text-align: center; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.fn__model_item.new .item .add { + height: 80px; + width: 80px; + position: relative; + margin-bottom: 29px; +} + +.fn__model_item.new .item .add:after { + width: 2px; + height: 80px; + position: absolute; + content: ''; + left: 50%; + margin-left: -1px; + background-color: var(--techwave-border-color); + top: 50%; + margin-top: -40px; +} + +.fn__model_item.new .item:hover { + border-color: var(--techwave-main-color); +} + +.fn__model_item.new .item .add:before { + width: 80px; + height: 2px; + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin-left: -40px; + margin-top: -1px; + background-color: var(--techwave-border-color); +} + +.fn__model_item.new .item .text { + font-weight: 500; + font-size: 14px; + line-height: 1; + text-transform: uppercase; + letter-spacing: .5px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.fn__model_item .item:hover .fn__bookmark { + opacity: 1; + visibility: visible; + pointer-events: all; +} + +.fn__model_item .img:before { + height: 0; + content: ''; + padding-bottom: 100%; + display: block; +} + +.fn__model_item .img { + position: relative; + margin: -1px; + margin-bottom: 0; +} + +.fn__model_item .img img { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + top: 0; + left: 0; + border-radius: 5px 5px 0 0; +} + +.fn__model_item .item__info { + padding: 18px 15px 14px; +} + +.fn__model_item .item__info .title { + margin: 0; + padding: 0; + font-size: 16px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); + margin-bottom: 5px; +} + +.fn__model_item .item__info .desc { + margin: 0; + padding: 0; + font-size: 14px; + font-weight: 400; + color: var(--techwave-body-color); + font-family: var(--techwave-body-font-family); + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + /* number of lines to show */ + line-clamp: 3; + -webkit-box-orient: vertical; +} + +.fn__model_item .item__author { + height: 41px; + border-top: 1px solid var(--techwave-border-color); + padding: 10px 15px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; +} + +.fn__model_item .item__author img { + margin-right: 7px; + width: 20px; + height: 20px; + display: block; + border-radius: 100%; + object-fit: cover; +} + +.fn__model_item .author_name { + margin: 0; + padding: 0; + font-size: 14px; + font-weight: 400; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +/*------------------------------------------------------------------*/ + +/* 61) Bookmark button +/*------------------------------------------------------------------*/ + +.fn__bookmark { + background-color: var(--techwave-some-r-bg-color); + width: 40px; + height: 40px; + border-radius: 100%; + text-decoration: none; + position: absolute; + top: 10px; + left: 10px; + z-index: 3; + color: var(--techwave-heading-color); + opacity: 0; + visibility: hidden; + pointer-events: none; +} + +.fn__bookmark.has__bookmark .hasbook { + opacity: 1; +} + +.fn__bookmark.has__bookmark .hasntbook { + opacity: 0; +} + +.fn__bookmark .fn__svg { + width: 16px; + height: 16px; + position: absolute; + top: 50%; + left: 50%; + margin: -8px 0 0 -8px; +} + +.fn__bookmark .hasbook { + opacity: 0; + color: var(--techwave-main-color); +} + +/*------------------------------------------------------------------*/ + +/* 62) Font Trigger (used in AI chat bot page) +/*------------------------------------------------------------------*/ + +.font__trigger { + width: 11px; + height: 60px; + position: fixed; + right: 300px; + margin-right: 14px; + top: 50%; + margin-top: -30px; + z-index: 15; + cursor: pointer; +} + +.font__trigger:after { + content: ''; + position: absolute; + left: -10px; + right: -10px; + bottom: -10px; + top: -10px; +} + +.font__trigger:hover span:after, +.font__trigger:hover span:before, +.font__trigger:hover span { + background-color: var(--techwave-main-color); +} + +.font__trigger span { + width: 1px; + display: block; + top: 0; + bottom: 0; + left: 5px; + background-color: var(--techwave-border-color); + position: absolute; + transition: all .2s ease; +} + +.font__trigger span:after, +.font__trigger span:before { + width: 1px; + top: 50%; + margin-top: -20px; + height: 40px; + background-color: var(--techwave-border-color); + content: ''; + position: absolute; + transition: all .2s ease; +} + +.font__trigger span:before { + right: 100%; + margin-right: 5px; +} + +.font__trigger span:after { + left: 100%; + margin-left: 5px; +} + +/*------------------------------------------------------------------*/ + +/* 63) Font Trigger Lightbox +/*------------------------------------------------------------------*/ + +.techwave_fn_font.opened { + pointer-events: all; + opacity: 1; + visibility: visible; +} + +.techwave_fn_font { + pointer-events: none; + opacity: 0; + visibility: hidden; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 110; + background-color: var(--techwave-site-bg-color); + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + overflow-y: auto; + padding: 40px; +} + +.techwave_fn_font .font__closer_link { + position: fixed; + right: 35px; + top: 35px; + z-index: 2; +} + +.techwave_fn_font .font__closer { + z-index: 1; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.techwave_fn_font .font__dialog { + width: 500px; + max-width: 100%; + border-radius: 5px; + background-color: var(--techwave-some-r-bg-color); + padding: 35px 50px 40px; + position: relative; + border: 1px solid var(--techwave-border-color); + z-index: 3; +} + +.techwave_fn_font .title { + text-align: center; + margin: 0; + padding: 0; + font-weight: 500; + font-size: 24px; + letter-spacing: 0; + margin-bottom: 4px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_font select { + margin-bottom: 30px; +} + +.techwave_fn_font label { + display: block; + font-size: 16px; + font-weight: 400; + line-height: 40px; + color: var(--techwave-heading-color); + font-family: var(--techwave-heading-font-family); +} + +.techwave_fn_font .techwave_fn_button { + width: 100%; +} + +/*------------------------------------------------------------------*/ + +/* 64) Tooltipster custom theme named: tooltipster-techwave (it can be changed in init.js) +/*------------------------------------------------------------------*/ + +.tooltipster-sidetip.tooltipster-techwave .tooltipster-box { + border: 1px solid var(--techwave-border-color); + background: var(--techwave-some-r-bg-color); +} + +.tooltipster-sidetip.tooltipster-techwave .tooltipster-content { + color: var(--techwave-heading-color); + font-size: 14px; +} + +.tooltipster-sidetip.tooltipster-techwave .tooltipster-arrow-uncropped { + display: none; +} + +.tooltipster-sidetip.tooltipster-techwave.tooltipster-bottom .tooltipster-arrow:after { + content: ''; + position: absolute; + top: 5px; + left: 3px; + width: 14px; + height: 14px; + transform: rotate(45deg); + border: 1px solid var(--techwave-border-color); + background-color: var(--techwave-some-r-bg-color); +} + +.tooltipster-sidetip.tooltipster-techwave.tooltipster-bottom .tooltipster-arrow { + background-color: transparent; + top: -1px; +} + +.tooltipster-sidetip.tooltipster-techwave.tooltipster-right .tooltipster-arrow { + left: -1px; + background-color: transparent; +} + +.tooltipster-sidetip.tooltipster-techwave.tooltipster-right .tooltipster-arrow:after { + content: ''; + position: absolute; + top: 3px; + left: 5px; + width: 14px; + height: 14px; + transform: rotate(45deg); + border: 1px solid var(--techwave-border-color); + background-color: var(--techwave-some-r-bg-color); +} + +.tooltipster-sidetip.tooltipster-techwave.tooltipster-left .tooltipster-arrow { + right: -1px; + background-color: transparent; +} + +.tooltipster-sidetip.tooltipster-techwave.tooltipster-left .tooltipster-arrow:after { + content: ''; + position: absolute; + top: 3px; + right: 5px; + width: 14px; + height: 14px; + transform: rotate(45deg); + border: 1px solid var(--techwave-border-color); + background-color: var(--techwave-some-r-bg-color); +} + +/*------------------------------------------------------------------*/ + +/* 65) Page: Intro +/*------------------------------------------------------------------*/ + +.techwave_fn_intro { + padding: 150px 20px 100px; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + -ms-align-items: center; + align-items: center; +} + +.techwave_fn_intro .first { + text-align: center; + margin-bottom: 54px; +} + +.techwave_fn_intro .txt { + opacity: 0; + position: absolute; + pointer-events: none; +} + +.techwave_fn_intro .mac { + margin: 0 -20px; + margin-bottom: 86px; +} + +.techwave_fn_intro .mac img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.techwave_fn_intro .livechat { + padding: 24px; + position: relative; + border: 2px dashed #252525; + border-radius: 30px; + width: 825px; + max-width: 100%; + margin: 0 auto; + margin-top: 41px; + margin-bottom: 133px; +} + +.techwave_fn_intro .livechat .chat__comment { + margin-top: 20px; +} + +.techwave_fn_intro .livechat .chat_decor { + position: absolute; + right: 47px; + z-index: 5; + top: 100%; + margin-top: -25px; +} + +.techwave_fn_intro .or { + padding-top: 87px; + padding-bottom: 55px; + text-align: center; +} + +.techwave_fn_intro .or h1 { + font-size: 150px; + font-size: calc(50px + 5.211vw); + font-weight: 700; + text-transform: uppercase; + font-family: sans-serif; +} + +.techwave_fn_intro .or h1 span { + color: var(--techwave-site-bg-color); + -webkit-text-stroke: 1px var(--techwave-main-color); + text-stroke: 1px var(--techwave-main-color); + letter-spacing: -6px; +} + +.fn__center_title { + text-align: center; + max-width: 700px; +} + +.fn__center_title h3.big { + font-size: 60px; + margin-top: -6px; + margin-bottom: 18px; +} + +.fn__center_title p { + margin: 0; +} + +.fn__center_title h3 { + font-size: 32px; + line-height: 1.2; + margin: 0; + font-weight: 300; + text-transform: uppercase; + letter-spacing: .5px; + text-shadow: 0px 0px 15px rgba(124, 95, 227, .35); +} + +.fn__center_title .lines { + position: relative; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + height: 18px; + margin-bottom: 34px; + -ms-align-items: center; + align-items: center; + justify-content: center; +} + +.fn__center_title .lines span { + position: relative; +} + +.fn__center_title .lines .r, +.fn__center_title .lines .l { + width: 100px; + height: 2px; + display: block; + background-color: var(--techwave-main-color); +} + +.fn__center_title .lines span:after { + right: 0; + bottom: 0; + top: 0; + left: 0; + position: absolute; + color: var(--techwave-main-color1); + content: ''; + opacity: .35; + box-shadow: 0px 0px 10px; +} + +.fn__center_title .lines .c:after { + border-radius: 6px; + left: -2px; + right: -2px; + top: -2px; + bottom: -2px; +} + +.fn__center_title .lines .c { + width: 120px; + height: 18px; + display: block; + border: 2px solid var(--techwave-main-color); + margin: 0 10px; + border-radius: 6px; +} + +.txt_unlim { + width: 100%; + overflow: hidden; +} + +.marquee { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; +} + +.TickerNews { + width: 100%; + overflow: hidden; +} + +.TickerNews .js-marquee-wrapper { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: nowrap; +} + +.TickerNews .ti_wrapper { + width: 100%; + position: relative; + overflow: hidden; +} + +.TickerNews .ti_slide { + position: relative; + left: 0; + top: 0; +} + +.TickerNews .marquee { + overflow: hidden; +} + +.TickerNews .ti_content { + position: relative; + float: left; +} + +.TickerNews .js-marquee { + float: left; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: nowrap; +} + +.TickerNews .item { + float: left; + position: relative; + white-space: nowrap; + color: var(--techwave-site-bg-color); + -webkit-text-stroke: 1px var(--techwave-main-color); + text-stroke: 1px var(--techwave-main-color); + letter-spacing: -6px; + font-size: 150px; + font-size: calc(50px + 5.211vw); + font-weight: 900; + font-family: sans-serif; + text-transform: uppercase; +} + +.techwave_fn_intro .templates { + width: 1650px; + max-width: 100% +} + +.techwave_fn_intro .templates ul { + margin: 0; + list-style-type: none; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + flex-wrap: wrap; + margin-left: -50px; +} + +.techwave_fn_intro .templates li { + margin: 0; + padding: 0; + padding-left: 50px; + margin-bottom: 50px; + width: 50%; +} + +.techwave_fn_intro .templates .top { + display: block; + width: 100%; + text-decoration: none; + border: 1px solid var(--techwave-border-color); + border-radius: 5px; + transition: all .4s ease; + position: relative; +} + +.techwave_fn_intro .templates .top:after { + content: ''; + position: absolute; + top: 100%; + left: 0; + right: 0; + height: 20px; + transform: translateY(-20px); + transition: all .4s ease; +} + +.techwave_fn_intro .templates .top img { + display: block; + border-radius: 4px; +} + +.techwave_fn_intro .templates .top:hover:after { + transform: translateY(0px); +} + +.techwave_fn_intro .templates .top:hover { + transform: translateY(-20px); +} + +.techwave_fn_intro .templates div div { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -ms-align-items: center; + align-items: center; + justify-content: center; + padding-top: 30px; +} + +.techwave_fn_intro .templates .techwave_fn_button { + padding: 0 52px; +} + +#img_gen { + padding-top: 48px; + margin-bottom: 91px; +} + +#demos { + padding-top: 100px; + margin-bottom: 73px; +} + +/*------------------------------------------------------------------*/ + +/* 66) Media Queries (Responsive) +/*------------------------------------------------------------------*/ + +@media(max-width: 1400px) { + .fn__model_item { + width: 25%; + } +} + +@media(max-width: 1367px) { + .techwave_fn_interactive_list li { + width: 100%; + max-width: 100%; + } +} + +@media(max-width: 1200px) { + .fn__model_item { + width: 33.3333%; + } +} + +@media(max-width: 1040px) { + .techwave_fn_pricing .pricing__content { + display: none; + } + .fn__mobile_pricing { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + } + .font__trigger { + right: 0px; + } + .techwave_fn_accordion .acc__title { + font-size: 18px; + } + .techwave_fn_sign, + .techwave_fn_sign .form__content, + .techwave_fn_interactive_list.modern a, + .techwave_fn_changelog .item__header, + .techwave_fn_changelog .item__content, + .techwave_fn_accordion .acc__header, + .techwave_fn_accordion .acc__content { + padding-left: 20px; + padding-right: 20px; + } + .techwave_fn_pricing .pricing__footer .item_col, + .techwave_fn_pricing .pricing__heading .item, + .techwave_fn_pricing .pricing__fields .item_col, + .techwave_fn_pricing .pricing__header .item_col { + padding-left: 20px; + padding-right: 20px; + } + .techwave_fn_image_generation_page .generation_header, + .fn__generation_item { + padding-left: 20px; + padding-right: 20px; + } + .techwave_fn_image_generation_page .sidebar__trigger { + display: none; + } + .techwave_fn_aichatbot_page, + .techwave_fn_doc_page, + .techwave_fn_image_generation_page { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-direction: column-reverse; + -moz-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + -o-flex-direction: column-reverse; + flex-direction: column-reverse; + min-height: inherit; + } + .techwave_fn_wrapper.fn__has_sidebar .techwave_fn_content { + margin-right: 0; + } + .techwave_fn_wrapper.fn__has_sidebar .techwave_fn_doc_page .docsidebar, + .techwave_fn_aichatbot_page .chat__sidebar, + .techwave_fn_image_generation_page .generation__sidebar { + position: relative; + width: 100%; + height: auto; + left: auto; + right: auto; + top: auto; + min-width: 100%; + border-left: none; + border-bottom: 1px solid var(--techwave-border-color); + } + .techwave_fn_searchbar { + left: 0; + padding: 0 20px; + } + .techwave_fn_searchbar .search__icon { + left: 20px; + } + .techwave_fn_searchbar .search__closer { + right: 20px; + } + .techwave_fn_searchbar .search__input { + padding-left: 25px; + padding-right: 30px; + } + .techwave_fn_img_lightbox .lightbox__tlimg { + padding-left: 20px; + padding-right: 20px; + } + .techwave_fn_img_lightbox .lightbox__related { + padding-left: 20px; + padding-right: 20px; + } + .fn__grid_items li { + width: 25%; + } + .fn__gallery_item { + width: 33.3333%; + } + .techwave_fn_header { + padding: 0 20px 0 60px; + } + .techwave_fn_leftpanel .mobile_closer { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + } + .techwave_fn_leftpanel .desktop_closer { + display: none; + } + .techwave_fn_leftpanel .mobile_extra_closer { + position: absolute; + left: 100%; + width: calc(100vw - var(--techwave-left-panel-width)); + top: 0; + bottom: 0; + background-color: var(--techwave-some-r-bg-color); + opacity: 0; + pointer-events: none; + margin-left: 1px; + } + .section_home { + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + } + .section_home .section_left { + width: 100%; + border-right: none; + border-bottom: 1px solid var(--techwave-border-color); + padding: 73px 20px 60px; + } + .section_home .section_right { + width: 100%; + padding: 70px 20px; + } + .techwave_fn_footer { + padding-left: 20px; + padding-right: 20px; + } + .section_home .company_info { + max-width: 100%; + } + .techwave_fn_content { + margin-left: 0; + } + .techwave_fn_header { + left: 0; + } + .techwave_fn_leftpanel { + transform: translateX(-100%); + } + .techwave_fn_leftpanel .fn__icon_button { + right: -51px; + width: 40px; + height: 40px; + transform: rotate(180deg); + margin-top: -20px; + } + .mobile-panel-opened .techwave_fn_leftpanel .fn__icon_button { + transform: rotate(0); + } + .mobile-panel-opened .techwave_fn_leftpanel .mobile_extra_closer { + opacity: 0.9; + pointer-events: all; + } + .mobile-panel-opened .techwave_fn_header, + .mobile-panel-opened .techwave_fn_content { + transform: translateX(300px); + } + .mobile-panel-opened .techwave_fn_leftpanel { + transform: translateX(0); + } +} + +@media(max-width: 900px) { + .techwave_fn_pricing .item_row .item_col { + width: 25% !important; + max-width: 25% !important; + } + .techwave_fn_pricing .pricing__header .price span { + font-size: 20px; + } + .techwave_fn_pricing .pricing__footer .item_col, + .techwave_fn_pricing .pricing__heading .item, + .techwave_fn_pricing .pricing__fields .item_col, + .techwave_fn_pricing .pricing__header .item_col { + padding-left: 10px; + padding-right: 10px; + } + .techwave_fn_img_lightbox .lightbox__top { + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + -o-flex-direction: column; + flex-direction: column; + } + .techwave_fn_img_lightbox .lightbox__tl { + width: 100%; + } + .techwave_fn_img_lightbox .lightbox__tr { + width: 100%; + border-left: none; + border-top: 1px solid var(--techwave-border-color); + } +} + +@media(max-width: 768px) { + .fn__mobile_pricing .pricing__item { + width: 100%; + } + .fn__generation_list .fn__gl_item { + width: 50%; + } + .fn__model_item { + width: 50%; + } + .fn__gallery_items .item__info { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + .techwave_fn_footer_content { + flex-wrap: wrap; + } + .fn__grid_items li { + width: 50%; + } + .fn__gallery_item { + width: 50%; + } + .techwave_fn_header .header__left { + display: none; + } + .techwave_fn_header { + justify-content: flex-end; + } +} + +@media(max-width: 480px) { + .techwave_fn_sign, + .techwave_fn_sign .form__content, + .techwave_fn_changelog .item__header, + .techwave_fn_changelog .item__content, + .techwave_fn_accordion .acc__header, + .techwave_fn_accordion .acc__content { + padding-left: 10px; + padding-right: 10px; + } + .fn__generation_list .fn__gl_item { + width: 100%; + } + .techwave_fn_image_generation_page .generation_header, + .fn__generation_item { + padding-left: 10px; + padding-right: 10px; + } + .fn__model_item { + width: 100%; + } + .fn__grid_items ul { + margin-left: -10px; + } + .fn__grid_items li { + padding-left: 10px; + margin-bottom: 10px; + } + .fn__nav_bar .user_opener { + width: 50px; + height: 50px; + } + .fn__details_list li { + width: 100%; + } + .fn__gallery_item { + width: 100%; + } + .techwave_fn_header { + padding-right: 10px; + } + .fn__nav_bar .item_opener .dark_mode { + margin: -9px 0 0 -9px; + } + .fn__nav_bar .bar__item { + margin-right: 5px; + } + .fn__nav_bar .bar__item_user { + margin-left: 5px; + } + .fn__nav_bar .item_opener { + width: 40px; + height: 40px; + } + .fn__nav_bar .item_opener .fn__svg { + width: 18px; + height: 18px; + } +} \ No newline at end of file