:root { --FONT_default_family: "Suisse Intl", serif; --FONT_default_400: 300 36px/42px var(--FONT_default_family); --FONT_default_300: 300 28px/34px var(--FONT_default_family); --FONT_default_200: 300 22px/28px var(--FONT_default_family); --FONT_default_100: 400 18px/22px var(--FONT_default_family); --FONT_default_75: 400 14px/17px var(--FONT_default_family); --FONT_default_50: 400 11px/14px var(--FONT_default_family); --FONT_highlight_400: 600 36px/42px var(--FONT_default_family); --FONT_highlight_300: 600 28px/34px var(--FONT_default_family); --FONT_highlight_200: 600 22px/28px var(--FONT_default_family); --FONT_highlight_100: 600 18px/22px var(--FONT_default_family); --FONT_highlight_75: 600 14px/17px var(--FONT_default_family); --FONT_highlight_50: 600 11px/14px var(--FONT_default_family); --FONT_brand_family: "National 2 Compressed", serif; --FONT_brand_400: 500 52px/52px var(--FONT_brand_family); --FONT_brand_300: 500 48px/48px var(--FONT_brand_family); --FONT_brand_200: 500 44px/44px var(--FONT_brand_family); --FONT_brand_100: 500 40px/40px var(--FONT_brand_family); --FONT_deco_family: "National 2 Compressed", serif; --FONT_deco_300: 400 40px/40px var(--FONT_deco_family); --FONT_deco_200: 400 34px/34px var(--FONT_deco_family); --FONT_deco_100: 400 30px/30px var(--FONT_deco_family); } @font-face { font-family: "Suisse Intl"; font-style: normal; font-weight: 400; src: url("../../SuisseIntl-Regular-WebS.woff2") format("woff2"); font-display: fallback; } @font-face { font-family: "Suisse Intl"; font-style: normal; font-weight: 300; src: url("../../SuisseIntl-Light-WebS.woff2") format("woff2"); font-display: fallback; } @font-face { font-family: "Suisse Intl"; font-style: normal; font-weight: 600; src: url("../../SuisseIntl-SemiBold-WebS.woff2") format("woff2"); font-display: fallback; } @font-face { font-family: "National 2 Compressed"; font-style: normal; font-weight: 400; src: url("../../national-2-compressed-regular.woff2") format("woff2"); font-display: fallback; } @font-face { font-family: "National 2 Compressed"; font-style: normal; font-weight: 500; src: url("../../national-2-compressed-medium.woff2") format("woff2"); font-display: fallback; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper, #messengerPage #contactArea #contactList, #conversationArea .emptyChatContainer, #conversationArea #messagesList, #myProfilePage peg-my-highlight-list .contentWrapper, #myProfilePage peg-my-highlight-list, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer, #partnerProfilePage peg-partner-highlight-list, peg-onboarding-imrl wdk-gallery .steps article, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open, .wdk-form-text .inputWrapper textarea, .wdk-modalbox .modalboxContent article { overflow-y: auto; scrollbar-color: var(--COLOR_supportDark_500) var(--COLOR_supportLight_100); scrollbar-width: thin; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar, #messengerPage #contactArea #contactList::-webkit-scrollbar, #conversationArea .emptyChatContainer::-webkit-scrollbar, #conversationArea #messagesList::-webkit-scrollbar, #myProfilePage peg-my-highlight-list .contentWrapper::-webkit-scrollbar, #myProfilePage peg-my-highlight-list::-webkit-scrollbar, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi::-webkit-scrollbar, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody::-webkit-scrollbar, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer::-webkit-scrollbar, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer::-webkit-scrollbar, #partnerProfilePage peg-partner-highlight-list::-webkit-scrollbar, peg-onboarding-imrl wdk-gallery .steps article::-webkit-scrollbar, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText::-webkit-scrollbar, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open::-webkit-scrollbar, .wdk-form-text .inputWrapper textarea::-webkit-scrollbar, .wdk-modalbox .modalboxContent article::-webkit-scrollbar { width: 12px; height: 12px; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-track, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-track, #messengerPage #contactArea #contactList::-webkit-scrollbar-track, #conversationArea .emptyChatContainer::-webkit-scrollbar-track, #conversationArea #messagesList::-webkit-scrollbar-track, #myProfilePage peg-my-highlight-list .contentWrapper::-webkit-scrollbar-track, #myProfilePage peg-my-highlight-list::-webkit-scrollbar-track, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi::-webkit-scrollbar-track, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody::-webkit-scrollbar-track, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer::-webkit-scrollbar-track, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer::-webkit-scrollbar-track, #partnerProfilePage peg-partner-highlight-list::-webkit-scrollbar-track, peg-onboarding-imrl wdk-gallery .steps article::-webkit-scrollbar-track, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText::-webkit-scrollbar-track, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open::-webkit-scrollbar-track, .wdk-form-text .inputWrapper textarea::-webkit-scrollbar-track, .wdk-modalbox .modalboxContent article::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); border-radius: var(--borderRadius_rounded); } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-thumb, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-thumb, #messengerPage #contactArea #contactList::-webkit-scrollbar-thumb, #conversationArea .emptyChatContainer::-webkit-scrollbar-thumb, #conversationArea #messagesList::-webkit-scrollbar-thumb, #myProfilePage peg-my-highlight-list .contentWrapper::-webkit-scrollbar-thumb, #myProfilePage peg-my-highlight-list::-webkit-scrollbar-thumb, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi::-webkit-scrollbar-thumb, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody::-webkit-scrollbar-thumb, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer::-webkit-scrollbar-thumb, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer::-webkit-scrollbar-thumb, #partnerProfilePage peg-partner-highlight-list::-webkit-scrollbar-thumb, peg-onboarding-imrl wdk-gallery .steps article::-webkit-scrollbar-thumb, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText::-webkit-scrollbar-thumb, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open::-webkit-scrollbar-thumb, .wdk-form-text .inputWrapper textarea::-webkit-scrollbar-thumb, .wdk-modalbox .modalboxContent article::-webkit-scrollbar-thumb { background: var(--COLOR_supportDark_500); border: 3px solid rgba(0, 0, 0, 0); border-radius: var(--borderRadius_rounded); background-clip: content-box; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-thumb:hover, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-thumb:hover, #messengerPage #contactArea #contactList::-webkit-scrollbar-thumb:hover, #conversationArea .emptyChatContainer::-webkit-scrollbar-thumb:hover, #conversationArea #messagesList::-webkit-scrollbar-thumb:hover, #myProfilePage peg-my-highlight-list .contentWrapper::-webkit-scrollbar-thumb:hover, #myProfilePage peg-my-highlight-list::-webkit-scrollbar-thumb:hover, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi::-webkit-scrollbar-thumb:hover, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody::-webkit-scrollbar-thumb:hover, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer::-webkit-scrollbar-thumb:hover, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer::-webkit-scrollbar-thumb:hover, #partnerProfilePage peg-partner-highlight-list::-webkit-scrollbar-thumb:hover, peg-onboarding-imrl wdk-gallery .steps article::-webkit-scrollbar-thumb:hover, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText::-webkit-scrollbar-thumb:hover, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open::-webkit-scrollbar-thumb:hover, .wdk-form-text .inputWrapper textarea::-webkit-scrollbar-thumb:hover, .wdk-modalbox .modalboxContent article::-webkit-scrollbar-thumb:hover { background: var(--COLOR_supportDark_400); border: 3px solid rgba(0, 0, 0, 0); background-clip: content-box; } :root { --COLOR_primary_100_dark: #1e5a32; --COLOR_primary_100: #307d58; --COLOR_primary_100_light: #f0f5f2; --COLOR_secondary_100: #f0f5f2; --COLOR_tertiary_100: #fffaf5; --COLOR_decoration_100_dark: #203e20; --COLOR_decoration_100: #527052; --COLOR_decoration_100_light: #f1f4f1; --COLOR_decoration_200_dark: #00325a; --COLOR_decoration_200: #006e96; --COLOR_decoration_200_light: #ebf3f7; --COLOR_decoration_300_dark: #700; --COLOR_decoration_300: #a91e1e; --COLOR_decoration_300_light: #f8eded; --COLOR_decoration_400_dark: #3b0c0c; --COLOR_decoration_400: #77390b; --COLOR_decoration_400_light: #f4efec; --COLOR_premium_100: #ef6054; --COLOR_premium_200: #e84134; --COLOR_premium_300: #f89637; --COLOR_offer_100: #e84034; --COLOR_offer_200: #e84134; --COLOR_gradient_unlock_100_45: linear-gradient( 45deg, var(--COLOR_unlock_100) 0%, var(--COLOR_unlock_200) 100% ); --COLOR_gradient_unlock_100_90: linear-gradient( 90deg, var(--COLOR_unlock_100) 0%, var(--COLOR_unlock_200) 100% ); --COLOR_gradient_unlock_100_180: linear-gradient( 0deg, var(--COLOR_unlock_100) 0%, var(--COLOR_unlock_200) 100% ); --COLOR_gradient_unlock_150_0_fade: linear-gradient( 0deg, rgb(0 110 150 / 90%) 0%, rgb(14 173 178 / 50%) 50.52%, rgb(14 173 178 / 0%) 100% ); --COLOR_gradient_healthy_dating_100_45: linear-gradient( 45deg, var(--COLOR_offer_200) 0%, var(--COLOR_decoration_200) 100% ); --COLOR_gradient_healthy_dating_100_90: linear-gradient( 90deg, var(--COLOR_offer_200) 0%, var(--COLOR_decoration_200) 100% ); --COLOR_gradient_premium_100_45: linear-gradient( 45deg, var(--COLOR_premium_100) 0%, var(--COLOR_premium_300) 100% ); --COLOR_gradient_premium_100_90: linear-gradient( 90deg, var(--COLOR_premium_100) 0%, var(--COLOR_premium_300) 100% ); --COLOR_gradient_premium_100_90_alpha: linear-gradient( 90deg, #ef605415 0%, #f8963715 100% ); --COLOR_unlock_100: #006e96; --COLOR_unlock_200: #0eadb2; --COLOR_alertError_100: #dc001a; --COLOR_alertError_200: #fdebed; --COLOR_alertInfo_100: #0270c9; --COLOR_alertInfo_200: #ebf4fb; --COLOR_alertSuccess_100: #198000; --COLOR_alertSuccess_200: #edf5eb; --COLOR_alertWarning_100: #ef5602; --COLOR_alertWarning_200: #ef5602; --COLOR_alertOnline_100: #00df9a; --COLOR_supportDark_100: #000; --COLOR_supportDark_200: #404047; --COLOR_supportDark_300: #66666c; --COLOR_supportDark_400: #99999d; --COLOR_supportDark_500: #d9d9db; --COLOR_supportDark_600: #f2f2f2; --COLOR_supportDark_090: #000000d9; --COLOR_supportDark_080: #00000a99; --COLOR_supportDark_070: #00000a8a; --COLOR_supportDark_060: #00000057; --COLOR_supportDark_050: #00000026; --COLOR_supportDark_040: #0000000d; --COLOR_supportLight_100: #fff; --COLOR_supportLight_090: #fffffff0; --COLOR_supportLight_080: #ffffffb3; --COLOR_supportLight_070: #ffffff80; --COLOR_supportLight_060: #ffffff54; --COLOR_supportLight_050: #ffffff29; --COLOR_supportLight_040: #ffffff1a; --COLOR_defaultText: var(--COLOR_supportDark_100); --COLOR_defaultText_hover: var(--COLOR_alertInfo_100); --COLOR_defaultText2: var(--COLOR_primary_100); --COLOR_defaultText2_hover: var(--COLOR_supportDark_100); --COLOR_intern_peg: #c8007d; } bst-opener::after { position: absolute; visibility: hidden; content: "S"; } @media only screen and (min-width: 481px) { bst-opener::after { content: "M"; } } @media only screen and (min-width: 768px) { bst-opener::after { content: "L"; } } @media only screen and (min-width: 980px) { bst-opener::after { content: "XL"; } } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper, #messengerPage #contactArea #contactList, #conversationArea .emptyChatContainer, #conversationArea #messagesList, #myProfilePage peg-my-highlight-list .contentWrapper, #myProfilePage peg-my-highlight-list, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer, #partnerProfilePage peg-partner-highlight-list, peg-onboarding-imrl wdk-gallery .steps article, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open, .wdk-form-text .inputWrapper textarea, .wdk-modalbox .modalboxContent article { overflow-y: auto; scrollbar-color: var(--COLOR_supportDark_500) var(--COLOR_supportLight_100); scrollbar-width: thin; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar, #messengerPage #contactArea #contactList::-webkit-scrollbar, #conversationArea .emptyChatContainer::-webkit-scrollbar, #conversationArea #messagesList::-webkit-scrollbar, #myProfilePage peg-my-highlight-list .contentWrapper::-webkit-scrollbar, #myProfilePage peg-my-highlight-list::-webkit-scrollbar, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi::-webkit-scrollbar, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody::-webkit-scrollbar, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer::-webkit-scrollbar, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer::-webkit-scrollbar, #partnerProfilePage peg-partner-highlight-list::-webkit-scrollbar, peg-onboarding-imrl wdk-gallery .steps article::-webkit-scrollbar, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText::-webkit-scrollbar, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open::-webkit-scrollbar, .wdk-form-text .inputWrapper textarea::-webkit-scrollbar, .wdk-modalbox .modalboxContent article::-webkit-scrollbar { width: 12px; height: 12px; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-track, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-track, #messengerPage #contactArea #contactList::-webkit-scrollbar-track, #conversationArea .emptyChatContainer::-webkit-scrollbar-track, #conversationArea #messagesList::-webkit-scrollbar-track, #myProfilePage peg-my-highlight-list .contentWrapper::-webkit-scrollbar-track, #myProfilePage peg-my-highlight-list::-webkit-scrollbar-track, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi::-webkit-scrollbar-track, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody::-webkit-scrollbar-track, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer::-webkit-scrollbar-track, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer::-webkit-scrollbar-track, #partnerProfilePage peg-partner-highlight-list::-webkit-scrollbar-track, peg-onboarding-imrl wdk-gallery .steps article::-webkit-scrollbar-track, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText::-webkit-scrollbar-track, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open::-webkit-scrollbar-track, .wdk-form-text .inputWrapper textarea::-webkit-scrollbar-track, .wdk-modalbox .modalboxContent article::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); border-radius: var(--borderRadius_rounded); } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-thumb, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-thumb, #messengerPage #contactArea #contactList::-webkit-scrollbar-thumb, #conversationArea .emptyChatContainer::-webkit-scrollbar-thumb, #conversationArea #messagesList::-webkit-scrollbar-thumb, #myProfilePage peg-my-highlight-list .contentWrapper::-webkit-scrollbar-thumb, #myProfilePage peg-my-highlight-list::-webkit-scrollbar-thumb, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi::-webkit-scrollbar-thumb, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody::-webkit-scrollbar-thumb, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer::-webkit-scrollbar-thumb, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer::-webkit-scrollbar-thumb, #partnerProfilePage peg-partner-highlight-list::-webkit-scrollbar-thumb, peg-onboarding-imrl wdk-gallery .steps article::-webkit-scrollbar-thumb, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText::-webkit-scrollbar-thumb, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open::-webkit-scrollbar-thumb, .wdk-form-text .inputWrapper textarea::-webkit-scrollbar-thumb, .wdk-modalbox .modalboxContent article::-webkit-scrollbar-thumb { background: var(--COLOR_supportDark_500); border: 3px solid rgba(0, 0, 0, 0); border-radius: var(--borderRadius_rounded); background-clip: content-box; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-thumb:hover, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper::-webkit-scrollbar-thumb:hover, #messengerPage #contactArea #contactList::-webkit-scrollbar-thumb:hover, #conversationArea .emptyChatContainer::-webkit-scrollbar-thumb:hover, #conversationArea #messagesList::-webkit-scrollbar-thumb:hover, #myProfilePage peg-my-highlight-list .contentWrapper::-webkit-scrollbar-thumb:hover, #myProfilePage peg-my-highlight-list::-webkit-scrollbar-thumb:hover, #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi::-webkit-scrollbar-thumb:hover, #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody::-webkit-scrollbar-thumb:hover, #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer::-webkit-scrollbar-thumb:hover, #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer::-webkit-scrollbar-thumb:hover, #partnerProfilePage peg-partner-highlight-list::-webkit-scrollbar-thumb:hover, peg-onboarding-imrl wdk-gallery .steps article::-webkit-scrollbar-thumb:hover, peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText::-webkit-scrollbar-thumb:hover, .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open::-webkit-scrollbar-thumb:hover, .wdk-form-text .inputWrapper textarea::-webkit-scrollbar-thumb:hover, .wdk-modalbox .modalboxContent article::-webkit-scrollbar-thumb:hover { background: var(--COLOR_supportDark_400); border: 3px solid rgba(0, 0, 0, 0); background-clip: content-box; } @keyframes spin-left { 0% { transform: rotate(359deg); } 100% { transform: rotate(0deg); } } @keyframes spin-right { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes highlightFade { 0% { background: none; } 20% { background: var(--COLOR_supportDark_050); } 50% { background: var(--COLOR_supportDark_050); } 100% { background: none; } } .spinLeft { display: inline-block; transform-origin: center center; animation: spin-left 2s infinite linear; } .spinRight { display: inline-block; transform-origin: center center; animation: spin-right 2s infinite linear; } @keyframes anim-effect-ivana-1 { 0% { opacity: 1; transform: scale3d(0.5, 0.5, 1); } 7.5% { opacity: 0; transform: scale3d(1.1, 1.1, 1); } 7.51% { opacity: 1; transform: scale3d(0.5, 0.5, 1); } 15%, 100% { opacity: 0; transform: scale3d(1.1, 1.1, 1); } } @keyframes anim-effect-ivana-2 { 0% { opacity: 1; transform: scale3d(0.5, 0.5, 1); } 6%, 7.5% { opacity: 0; transform: scale3d(1.2, 1.2, 1); } 7.51% { opacity: 1; transform: scale3d(0.5, 0.5, 1); } 12%, 100% { opacity: 0; transform: scale3d(1.2, 1.2, 1); } } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } @keyframes slide-from-right { from { transform: translateX(60px); } } @keyframes slide-to-right { to { transform: translateX(60px); } } @keyframes slide-to-left { to { transform: translateX(-60px); } } ::view-transition-old(conversation-area) { animation: 200ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right; } ::view-transition-new(conversation-area) { animation: 200ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; } ::view-transition-old(full-size), ::view-transition-new(full-size) { animation: none; mix-blend-mode: normal; } .has-noViewTransition { view-transition-name: none !important; } .wdk-icon { width: 24px; height: 24px; fill: var(--COLOR_supportDark_090); } .wdk-icon img { width: 100%; height: 100%; } .wdk-icon[class*=" illu_"], .wdk-icon [class^="illu_"] { width: 48px; height: 48px; } .wdk-iconInline { width: 24px; height: 24px; } .wdk-iconInline path#a { fill: #ff0; } .wdk-iconInline path#b { fill: red; } [class^="bg-icon_"]::before, [class*=" bg-icon_"]::before, [class^="bg-illu_"]::before, [class*=" bg-illu_"]::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; } [class^="bg-illu_"]::before, [class*=" bg-illu_"]::before { width: 48px; height: 48px; } .bg-icon_arrow_down::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_down.svg); mask-image: url(../../img/icons/single_color/icon_arrow_down.svg); } .bg-icon_arrow_up::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_up.svg); mask-image: url(../../img/icons/single_color/icon_arrow_up.svg); } .bg-icon_arrow_left::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_left.svg); mask-image: url(../../img/icons/single_color/icon_arrow_left.svg); } .bg-icon_arrow_right::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right.svg); } .bg-icon_arrow_down_bold::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_down_bold.svg); mask-image: url(../../img/icons/single_color/icon_arrow_down_bold.svg); } .bg-icon_arrow_up_bold::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_up_bold.svg); mask-image: url(../../img/icons/single_color/icon_arrow_up_bold.svg); } .bg-icon_arrow_left_bold::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_left_bold.svg); mask-image: url(../../img/icons/single_color/icon_arrow_left_bold.svg); } .bg-icon_arrow_right_bold::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right_bold.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right_bold.svg); } .bg-icon_arrow_down_light::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_down_light.svg); mask-image: url(../../img/icons/single_color/icon_arrow_down_light.svg); } .bg-icon_arrow_up_light::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_up_light.svg); mask-image: url(../../img/icons/single_color/icon_arrow_up_light.svg); } .bg-icon_arrow_left_light::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_left_light.svg); mask-image: url(../../img/icons/single_color/icon_arrow_left_light.svg); } .bg-icon_arrow_right_light::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right_light.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right_light.svg); } .bg-icon_arrow_down_regular::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); } .bg-icon_arrow_up_regular::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_up_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_up_regular.svg); } .bg-icon_arrow_left_regular::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_left_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_left_regular.svg); } .bg-icon_arrow_right_regular::before { -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); } .bg-icon_add_circle_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_add_circle_filled.svg); mask-image: url(../../img/icons/single_color/icon_add_circle_filled.svg); } .bg-icon_add_circle_off::before { -webkit-mask-image: url(../../img/icons/single_color/icon_add_circle_off.svg); mask-image: url(../../img/icons/single_color/icon_add_circle_off.svg); } .bg-icon_add::before { -webkit-mask-image: url(../../img/icons/single_color/icon_add.svg); mask-image: url(../../img/icons/single_color/icon_add.svg); } .bg-icon_address_book::before { -webkit-mask-image: url(../../img/icons/single_color/icon_address_book.svg); mask-image: url(../../img/icons/single_color/icon_address_book.svg); } .bg-icon_android::before { -webkit-mask-image: url(../../img/icons/single_color/icon_android.svg); mask-image: url(../../img/icons/single_color/icon_android.svg); } .bg-icon_anniv::before { -webkit-mask-image: url(../../img/icons/single_color/icon_anniv.svg); mask-image: url(../../img/icons/single_color/icon_anniv.svg); } .bg-icon_apple::before { -webkit-mask-image: url(../../img/icons/single_color/icon_apple.svg); mask-image: url(../../img/icons/single_color/icon_apple.svg); } .bg-icon_atom_heart::before { -webkit-mask-image: url(../../img/icons/single_color/icon_atom_heart.svg); mask-image: url(../../img/icons/single_color/icon_atom_heart.svg); } .bg-icon_badge::before { -webkit-mask-image: url(../../img/icons/single_color/icon_badge.svg); mask-image: url(../../img/icons/single_color/icon_badge.svg); } .bg-icon_bike::before { -webkit-mask-image: url(../../img/icons/single_color/icon_bike.svg); mask-image: url(../../img/icons/single_color/icon_bike.svg); } .bg-icon_bin_restore::before { -webkit-mask-image: url(../../img/icons/single_color/icon_bin_restore.svg); mask-image: url(../../img/icons/single_color/icon_bin_restore.svg); } .bg-icon_bin::before { -webkit-mask-image: url(../../img/icons/single_color/icon_bin.svg); mask-image: url(../../img/icons/single_color/icon_bin.svg); } .bg-icon_birthday_cake::before { -webkit-mask-image: url(../../img/icons/single_color/icon_birthday_cake.svg); mask-image: url(../../img/icons/single_color/icon_birthday_cake.svg); } .bg-icon_body_height::before { -webkit-mask-image: url(../../img/icons/single_color/icon_body_height.svg); mask-image: url(../../img/icons/single_color/icon_body_height.svg); } .bg-icon_book_checkmark::before { -webkit-mask-image: url(../../img/icons/single_color/icon_book_checkmark.svg); mask-image: url(../../img/icons/single_color/icon_book_checkmark.svg); } .bg-icon_buggy::before { -webkit-mask-image: url(../../img/icons/single_color/icon_buggy.svg); mask-image: url(../../img/icons/single_color/icon_buggy.svg); } .bg-icon_bulb::before { -webkit-mask-image: url(../../img/icons/single_color/icon_bulb.svg); mask-image: url(../../img/icons/single_color/icon_bulb.svg); } .bg-icon_burger_menu::before { -webkit-mask-image: url(../../img/icons/single_color/icon_burger_menu.svg); mask-image: url(../../img/icons/single_color/icon_burger_menu.svg); } .bg-icon_cam_outline::before { -webkit-mask-image: url(../../img/icons/single_color/icon_cam_outline.svg); mask-image: url(../../img/icons/single_color/icon_cam_outline.svg); } .bg-icon_cam::before { -webkit-mask-image: url(../../img/icons/single_color/icon_cam.svg); mask-image: url(../../img/icons/single_color/icon_cam.svg); } .bg-icon_camera_badge::before { -webkit-mask-image: url(../../img/icons/single_color/icon_camera_badge.svg); mask-image: url(../../img/icons/single_color/icon_camera_badge.svg); } .bg-icon_capitol::before { -webkit-mask-image: url(../../img/icons/single_color/icon_capitol.svg); mask-image: url(../../img/icons/single_color/icon_capitol.svg); } .bg-icon_chart::before { -webkit-mask-image: url(../../img/icons/single_color/icon_chart.svg); mask-image: url(../../img/icons/single_color/icon_chart.svg); } .bg-icon_check_bold::before { -webkit-mask-image: url(../../img/icons/single_color/icon_check_bold.svg); mask-image: url(../../img/icons/single_color/icon_check_bold.svg); } .bg-icon_check_circle_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_check_circle_filled.svg); mask-image: url(../../img/icons/single_color/icon_check_circle_filled.svg); } .bg-icon_check_circle::before { -webkit-mask-image: url(../../img/icons/single_color/icon_check_circle.svg); mask-image: url(../../img/icons/single_color/icon_check_circle.svg); } .bg-icon_check::before { -webkit-mask-image: url(../../img/icons/single_color/icon_check.svg); mask-image: url(../../img/icons/single_color/icon_check.svg); } .bg-icon_circle_000p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_000p.svg); mask-image: url(../../img/icons/single_color/icon_circle_000p.svg); } .bg-icon_circle_010p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_010p.svg); mask-image: url(../../img/icons/single_color/icon_circle_010p.svg); } .bg-icon_circle_020p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_020p.svg); mask-image: url(../../img/icons/single_color/icon_circle_020p.svg); } .bg-icon_circle_030p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_030p.svg); mask-image: url(../../img/icons/single_color/icon_circle_030p.svg); } .bg-icon_circle_040p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_040p.svg); mask-image: url(../../img/icons/single_color/icon_circle_040p.svg); } .bg-icon_circle_050p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_050p.svg); mask-image: url(../../img/icons/single_color/icon_circle_050p.svg); } .bg-icon_circle_060p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_060p.svg); mask-image: url(../../img/icons/single_color/icon_circle_060p.svg); } .bg-icon_circle_070p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_070p.svg); mask-image: url(../../img/icons/single_color/icon_circle_070p.svg); } .bg-icon_circle_080p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_080p.svg); mask-image: url(../../img/icons/single_color/icon_circle_080p.svg); } .bg-icon_circle_090p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_090p.svg); mask-image: url(../../img/icons/single_color/icon_circle_090p.svg); } .bg-icon_circle_100p::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_100p.svg); mask-image: url(../../img/icons/single_color/icon_circle_100p.svg); } .bg-icon_circle_arrows::before { -webkit-mask-image: url(../../img/icons/single_color/icon_circle_arrows.svg); mask-image: url(../../img/icons/single_color/icon_circle_arrows.svg); } .bg-icon_clipboard::before { -webkit-mask-image: url(../../img/icons/single_color/icon_clipboard.svg); mask-image: url(../../img/icons/single_color/icon_clipboard.svg); } .bg-icon_clock::before { -webkit-mask-image: url(../../img/icons/single_color/icon_clock.svg); mask-image: url(../../img/icons/single_color/icon_clock.svg); } .bg-icon_clover::before { -webkit-mask-image: url(../../img/icons/single_color/icon_clover.svg); mask-image: url(../../img/icons/single_color/icon_clover.svg); } .bg-icon_compass_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_compass_filled.svg); mask-image: url(../../img/icons/single_color/icon_compass_filled.svg); } .bg-icon_compass::before { -webkit-mask-image: url(../../img/icons/single_color/icon_compass.svg); mask-image: url(../../img/icons/single_color/icon_compass.svg); } .bg-icon_compatibility::before { -webkit-mask-image: url(../../img/icons/single_color/icon_compatibility.svg); mask-image: url(../../img/icons/single_color/icon_compatibility.svg); } .bg-icon_control::before { -webkit-mask-image: url(../../img/icons/single_color/icon_control.svg); mask-image: url(../../img/icons/single_color/icon_control.svg); } .bg-icon_crown::before { -webkit-mask-image: url(../../img/icons/single_color/icon_crown.svg); mask-image: url(../../img/icons/single_color/icon_crown.svg); } .bg-icon_device_desktop::before { -webkit-mask-image: url(../../img/icons/single_color/icon_device_desktop.svg); mask-image: url(../../img/icons/single_color/icon_device_desktop.svg); } .bg-icon_device_smartphone::before { -webkit-mask-image: url(../../img/icons/single_color/icon_device_smartphone.svg); mask-image: url(../../img/icons/single_color/icon_device_smartphone.svg); } .bg-icon_download::before { -webkit-mask-image: url(../../img/icons/single_color/icon_download.svg); mask-image: url(../../img/icons/single_color/icon_download.svg); } .bg-icon_drag_handle::before { -webkit-mask-image: url(../../img/icons/single_color/icon_drag_handle.svg); mask-image: url(../../img/icons/single_color/icon_drag_handle.svg); } .bg-icon_diamond::before { -webkit-mask-image: url(../../img/icons/single_color/icon_diamond.svg); mask-image: url(../../img/icons/single_color/icon_diamond.svg); } .bg-icon_dot_menu::before { -webkit-mask-image: url(../../img/icons/single_color/icon_dot_menu.svg); mask-image: url(../../img/icons/single_color/icon_dot_menu.svg); } .bg-icon_earth::before { -webkit-mask-image: url(../../img/icons/single_color/icon_earth.svg); mask-image: url(../../img/icons/single_color/icon_earth.svg); } .bg-icon_edit_note::before { -webkit-mask-image: url(../../img/icons/single_color/icon_edit_note.svg); mask-image: url(../../img/icons/single_color/icon_edit_note.svg); } .bg-icon_education::before { -webkit-mask-image: url(../../img/icons/single_color/icon_education.svg); mask-image: url(../../img/icons/single_color/icon_education.svg); } .bg-icon_envelope::before { -webkit-mask-image: url(../../img/icons/single_color/icon_envelope.svg); mask-image: url(../../img/icons/single_color/icon_envelope.svg); } .bg-icon_exclamation_point_circle_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_exclamation_point_circle_filled.svg); mask-image: url(../../img/icons/single_color/icon_exclamation_point_circle_filled.svg); } .bg-icon_exclamation_point_circle::before { -webkit-mask-image: url(../../img/icons/single_color/icon_exclamation_point_circle.svg); mask-image: url(../../img/icons/single_color/icon_exclamation_point_circle.svg); } .bg-icon_exclamation_point::before { -webkit-mask-image: url(../../img/icons/single_color/icon_exclamation_point.svg); mask-image: url(../../img/icons/single_color/icon_exclamation_point.svg); } .bg-icon_eye_closed::before { -webkit-mask-image: url(../../img/icons/single_color/icon_eye_closed.svg); mask-image: url(../../img/icons/single_color/icon_eye_closed.svg); } .bg-icon_eye::before { -webkit-mask-image: url(../../img/icons/single_color/icon_eye.svg); mask-image: url(../../img/icons/single_color/icon_eye.svg); } .bg-icon_filter::before { -webkit-mask-image: url(../../img/icons/single_color/icon_filter.svg); mask-image: url(../../img/icons/single_color/icon_filter.svg); } .bg-icon_flower::before { -webkit-mask-image: url(../../img/icons/single_color/icon_flower.svg); mask-image: url(../../img/icons/single_color/icon_flower.svg); } .bg-icon_forbidden::before { -webkit-mask-image: url(../../img/icons/single_color/icon_forbidden.svg); mask-image: url(../../img/icons/single_color/icon_forbidden.svg); } .bg-icon_gift::before { -webkit-mask-image: url(../../img/icons/single_color/icon_gift.svg); mask-image: url(../../img/icons/single_color/icon_gift.svg); } .bg-icon_glas::before { -webkit-mask-image: url(../../img/icons/single_color/icon_glas.svg); mask-image: url(../../img/icons/single_color/icon_glas.svg); } .bg-icon_group_2::before { -webkit-mask-image: url(../../img/icons/single_color/icon_group_2.svg); mask-image: url(../../img/icons/single_color/icon_group_2.svg); } .bg-icon_group::before { -webkit-mask-image: url(../../img/icons/single_color/icon_group.svg); mask-image: url(../../img/icons/single_color/icon_group.svg); } .bg-icon_heart::before { -webkit-mask-image: url(../../img/icons/single_color/icon_heart.svg); mask-image: url(../../img/icons/single_color/icon_heart.svg); } .bg-icon_heart_fill::before { -webkit-mask-image: url(../../img/icons/single_color/icon_heart_fill.svg); mask-image: url(../../img/icons/single_color/icon_heart_fill.svg); } .bg-icon_heart_icebreaker_1::before { -webkit-mask-image: url(../../img/icons/single_color/icon_heart_icebreaker_1.svg); mask-image: url(../../img/icons/single_color/icon_heart_icebreaker_1.svg); } .bg-icon_heart_icebreaker::before { -webkit-mask-image: url(../../img/icons/single_color/icon_heart_icebreaker.svg); mask-image: url(../../img/icons/single_color/icon_heart_icebreaker.svg); } .bg-icon_heart_like_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_heart_like_filled.svg); mask-image: url(../../img/icons/single_color/icon_heart_like_filled.svg); } .bg-icon_heart_like_outline::before { -webkit-mask-image: url(../../img/icons/single_color/icon_heart_like_outline.svg); mask-image: url(../../img/icons/single_color/icon_heart_like_outline.svg); } .bg-icon_house_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_house_filled.svg); mask-image: url(../../img/icons/single_color/icon_house_filled.svg); } .bg-icon_house::before { -webkit-mask-image: url(../../img/icons/single_color/icon_house.svg); mask-image: url(../../img/icons/single_color/icon_house.svg); } .bg-icon_i_circle_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_i_circle_filled.svg); mask-image: url(../../img/icons/single_color/icon_i_circle_filled.svg); } .bg-icon_i_circle::before { -webkit-mask-image: url(../../img/icons/single_color/icon_i_circle.svg); mask-image: url(../../img/icons/single_color/icon_i_circle.svg); } .bg-icon_inbox::before { -webkit-mask-image: url(../../img/icons/single_color/icon_inbox.svg); mask-image: url(../../img/icons/single_color/icon_inbox.svg); } .bg-icon_invisible::before { -webkit-mask-image: url(../../img/icons/single_color/icon_invisible.svg); mask-image: url(../../img/icons/single_color/icon_invisible.svg); } .bg-icon_keys::before { -webkit-mask-image: url(../../img/icons/single_color/icon_keys.svg); mask-image: url(../../img/icons/single_color/icon_keys.svg); } .bg-icon_kid::before { -webkit-mask-image: url(../../img/icons/single_color/icon_kid.svg); mask-image: url(../../img/icons/single_color/icon_kid.svg); } .bg-icon_language::before { -webkit-mask-image: url(../../img/icons/single_color/icon_language.svg); mask-image: url(../../img/icons/single_color/icon_language.svg); } .bg-icon_lifebelt::before { -webkit-mask-image: url(../../img/icons/single_color/icon_lifebelt.svg); mask-image: url(../../img/icons/single_color/icon_lifebelt.svg); } .bg-icon_list::before { -webkit-mask-image: url(../../img/icons/single_color/icon_list.svg); mask-image: url(../../img/icons/single_color/icon_list.svg); } .bg-icon_location_pin::before { -webkit-mask-image: url(../../img/icons/single_color/icon_location_pin.svg); mask-image: url(../../img/icons/single_color/icon_location_pin.svg); } .bg-icon_lock::before { -webkit-mask-image: url(../../img/icons/single_color/icon_lock.svg); mask-image: url(../../img/icons/single_color/icon_lock.svg); } .bg-icon_logo::before { -webkit-mask-image: url(../../img/icons/single_color/icon_logo.svg); mask-image: url(../../img/icons/single_color/icon_logo.svg); } .bg-icon_logout::before { -webkit-mask-image: url(../../img/icons/single_color/icon_logout.svg); mask-image: url(../../img/icons/single_color/icon_logout.svg); } .bg-icon_love_couple::before { -webkit-mask-image: url(../../img/icons/single_color/icon_love_couple.svg); mask-image: url(../../img/icons/single_color/icon_love_couple.svg); } .bg-icon_magazin::before { -webkit-mask-image: url(../../img/icons/single_color/icon_magazin.svg); mask-image: url(../../img/icons/single_color/icon_magazin.svg); } .bg-icon_magnifying_glass_minus::before { -webkit-mask-image: url(../../img/icons/single_color/icon_magnifying_glass_minus.svg); mask-image: url(../../img/icons/single_color/icon_magnifying_glass_minus.svg); } .bg-icon_magnifying_glass_plus::before { -webkit-mask-image: url(../../img/icons/single_color/icon_magnifying_glass_plus.svg); mask-image: url(../../img/icons/single_color/icon_magnifying_glass_plus.svg); } .bg-icon_male_female::before { -webkit-mask-image: url(../../img/icons/single_color/icon_male_female.svg); mask-image: url(../../img/icons/single_color/icon_male_female.svg); } .bg-icon_message_2::before { -webkit-mask-image: url(../../img/icons/single_color/icon_message_2.svg); mask-image: url(../../img/icons/single_color/icon_message_2.svg); } .bg-icon_message_bubble::before { -webkit-mask-image: url(../../img/icons/single_color/icon_message_bubble.svg); mask-image: url(../../img/icons/single_color/icon_message_bubble.svg); } .bg-icon_message_bubbles::before { -webkit-mask-image: url(../../img/icons/single_color/icon_message_bubbles.svg); mask-image: url(../../img/icons/single_color/icon_message_bubbles.svg); } .bg-icon_message_outline::before { -webkit-mask-image: url(../../img/icons/single_color/icon_message_outline.svg); mask-image: url(../../img/icons/single_color/icon_message_outline.svg); } .bg-icon_message_plus::before { -webkit-mask-image: url(../../img/icons/single_color/icon_message_plus.svg); mask-image: url(../../img/icons/single_color/icon_message_plus.svg); } .bg-icon_message_plus_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_message_plus_filled.svg); mask-image: url(../../img/icons/single_color/icon_message_plus_filled.svg); } .bg-icon_message_service::before { -webkit-mask-image: url(../../img/icons/single_color/icon_message_service.svg); mask-image: url(../../img/icons/single_color/icon_message_service.svg); } .bg-icon_message::before { -webkit-mask-image: url(../../img/icons/single_color/icon_message.svg); mask-image: url(../../img/icons/single_color/icon_message.svg); } .bg-icon_mic_off::before { -webkit-mask-image: url(../../img/icons/single_color/icon_mic_off.svg); mask-image: url(../../img/icons/single_color/icon_mic_off.svg); } .bg-icon_mic::before { -webkit-mask-image: url(../../img/icons/single_color/icon_mic.svg); mask-image: url(../../img/icons/single_color/icon_mic.svg); } .bg-icon_minimize::before { -webkit-mask-image: url(../../img/icons/single_color/icon_minimize.svg); mask-image: url(../../img/icons/single_color/icon_minimize.svg); } .bg-icon_minus_circle_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_minus_circle_filled.svg); mask-image: url(../../img/icons/single_color/icon_minus_circle_filled.svg); } .bg-icon_minus_circle::before { -webkit-mask-image: url(../../img/icons/single_color/icon_minus_circle.svg); mask-image: url(../../img/icons/single_color/icon_minus_circle.svg); } .bg-icon_more_an::before { -webkit-mask-image: url(../../img/icons/single_color/icon_more_an.svg); mask-image: url(../../img/icons/single_color/icon_more_an.svg); } .bg-icon_more_io::before { -webkit-mask-image: url(../../img/icons/single_color/icon_more_io.svg); mask-image: url(../../img/icons/single_color/icon_more_io.svg); } .bg-icon_muffin::before { -webkit-mask-image: url(../../img/icons/single_color/icon_muffin.svg); mask-image: url(../../img/icons/single_color/icon_muffin.svg); } .bg-icon_music::before { -webkit-mask-image: url(../../img/icons/single_color/icon_music.svg); mask-image: url(../../img/icons/single_color/icon_music.svg); } .bg-icon_nameplate::before { -webkit-mask-image: url(../../img/icons/single_color/icon_nameplate.svg); mask-image: url(../../img/icons/single_color/icon_nameplate.svg); } .bg-icon_no_photo::before { -webkit-mask-image: url(../../img/icons/single_color/icon_no_photo.svg); mask-image: url(../../img/icons/single_color/icon_no_photo.svg); } .bg-icon_office_building::before { -webkit-mask-image: url(../../img/icons/single_color/icon_office_building.svg); mask-image: url(../../img/icons/single_color/icon_office_building.svg); } .bg-icon_outgoing::before { -webkit-mask-image: url(../../img/icons/single_color/icon_outgoing.svg); mask-image: url(../../img/icons/single_color/icon_outgoing.svg); } .bg-icon_paper_plane_v2::before { -webkit-mask-image: url(../../img/icons/single_color/icon_paper_plane_v2.svg); mask-image: url(../../img/icons/single_color/icon_paper_plane_v2.svg); } .bg-icon_paper_plane::before { -webkit-mask-image: url(../../img/icons/single_color/icon_paper_plane.svg); mask-image: url(../../img/icons/single_color/icon_paper_plane.svg); } .bg-icon_paw::before { -webkit-mask-image: url(../../img/icons/single_color/icon_paw.svg); mask-image: url(../../img/icons/single_color/icon_paw.svg); } .bg-icon_payment_credit_card::before { -webkit-mask-image: url(../../img/icons/single_color/icon_payment_credit_card.svg); mask-image: url(../../img/icons/single_color/icon_payment_credit_card.svg); } .bg-icon_percent::before { -webkit-mask-image: url(../../img/icons/single_color/icon_percent.svg); mask-image: url(../../img/icons/single_color/icon_percent.svg); } .bg-icon_pencil::before { -webkit-mask-image: url(../../img/icons/single_color/icon_pencil.svg); mask-image: url(../../img/icons/single_color/icon_pencil.svg); } .bg-icon_phone::before { -webkit-mask-image: url(../../img/icons/single_color/icon_phone.svg); mask-image: url(../../img/icons/single_color/icon_phone.svg); } .bg-icon_photo_rejected::before { -webkit-mask-image: url(../../img/icons/single_color/icon_photo_rejected.svg); mask-image: url(../../img/icons/single_color/icon_photo_rejected.svg); } .bg-icon_photo::before { -webkit-mask-image: url(../../img/icons/single_color/icon_photo.svg); mask-image: url(../../img/icons/single_color/icon_photo.svg); } .bg-icon_picture::before { -webkit-mask-image: url(../../img/icons/single_color/icon_picture.svg); mask-image: url(../../img/icons/single_color/icon_picture.svg); } .bg-icon_pin_minus::before { -webkit-mask-image: url(../../img/icons/single_color/icon_pin_minus.svg); mask-image: url(../../img/icons/single_color/icon_pin_minus.svg); } .bg-icon_pin_plus::before { -webkit-mask-image: url(../../img/icons/single_color/icon_pin_plus.svg); mask-image: url(../../img/icons/single_color/icon_pin_plus.svg); } .bg-icon_pin::before { -webkit-mask-image: url(../../img/icons/single_color/icon_pin.svg); mask-image: url(../../img/icons/single_color/icon_pin.svg); } .bg-icon_plane::before { -webkit-mask-image: url(../../img/icons/single_color/icon_plane.svg); mask-image: url(../../img/icons/single_color/icon_plane.svg); } .bg-icon_play::before { -webkit-mask-image: url(../../img/icons/single_color/icon_play.svg); mask-image: url(../../img/icons/single_color/icon_play.svg); } .bg-icon_pray::before { -webkit-mask-image: url(../../img/icons/single_color/icon_pray.svg); mask-image: url(../../img/icons/single_color/icon_pray.svg); } .bg-icon_question_mark_circle_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_question_mark_circle_filled.svg); mask-image: url(../../img/icons/single_color/icon_question_mark_circle_filled.svg); } .bg-icon_question_mark_circle::before { -webkit-mask-image: url(../../img/icons/single_color/icon_question_mark_circle.svg); mask-image: url(../../img/icons/single_color/icon_question_mark_circle.svg); } .bg-icon_question_mark::before { -webkit-mask-image: url(../../img/icons/single_color/icon_question_mark.svg); mask-image: url(../../img/icons/single_color/icon_question_mark.svg); } .bg-icon_reply::before { -webkit-mask-image: url(../../img/icons/single_color/icon_reply.svg); mask-image: url(../../img/icons/single_color/icon_reply.svg); } .bg-icon_rocket::before { -webkit-mask-image: url(../../img/icons/single_color/icon_rocket.svg); mask-image: url(../../img/icons/single_color/icon_rocket.svg); } .bg-icon_search::before { -webkit-mask-image: url(../../img/icons/single_color/icon_search.svg); mask-image: url(../../img/icons/single_color/icon_search.svg); } .bg-icon_settings_cog::before { -webkit-mask-image: url(../../img/icons/single_color/icon_settings_cog.svg); mask-image: url(../../img/icons/single_color/icon_settings_cog.svg); } .bg-icon_share::before { -webkit-mask-image: url(../../img/icons/single_color/icon_share.svg); mask-image: url(../../img/icons/single_color/icon_share.svg); } .bg-icon_shield::before { -webkit-mask-image: url(../../img/icons/single_color/icon_shield.svg); mask-image: url(../../img/icons/single_color/icon_shield.svg); } .bg-icon_smile::before { -webkit-mask-image: url(../../img/icons/single_color/icon_smile.svg); mask-image: url(../../img/icons/single_color/icon_smile.svg); } .bg-icon_smiley_happy::before { -webkit-mask-image: url(../../img/icons/single_color/icon_smiley_happy.svg); mask-image: url(../../img/icons/single_color/icon_smiley_happy.svg); } .bg-icon_smiley_joyful::before { -webkit-mask-image: url(../../img/icons/single_color/icon_smiley_joyful.svg); mask-image: url(../../img/icons/single_color/icon_smiley_joyful.svg); } .bg-icon_smiley_neutral::before { -webkit-mask-image: url(../../img/icons/single_color/icon_smiley_neutral.svg); mask-image: url(../../img/icons/single_color/icon_smiley_neutral.svg); } .bg-icon_smiley_sad::before { -webkit-mask-image: url(../../img/icons/single_color/icon_smiley_sad.svg); mask-image: url(../../img/icons/single_color/icon_smiley_sad.svg); } .bg-icon_smiley_skeptical::before { -webkit-mask-image: url(../../img/icons/single_color/icon_smiley_skeptical.svg); mask-image: url(../../img/icons/single_color/icon_smiley_skeptical.svg); } .bg-icon_smoke::before { -webkit-mask-image: url(../../img/icons/single_color/icon_smoke.svg); mask-image: url(../../img/icons/single_color/icon_smoke.svg); } .bg-icon_social_facebook::before { -webkit-mask-image: url(../../img/icons/single_color/icon_social_facebook.svg); mask-image: url(../../img/icons/single_color/icon_social_facebook.svg); } .bg-icon_social_feed::before { -webkit-mask-image: url(../../img/icons/single_color/icon_social_feed.svg); mask-image: url(../../img/icons/single_color/icon_social_feed.svg); } .bg-icon_sort::before { -webkit-mask-image: url(../../img/icons/single_color/icon_sort.svg); mask-image: url(../../img/icons/single_color/icon_sort.svg); } .bg-icon_sparkle_outline::before { -webkit-mask-image: url(../../img/icons/single_color/icon_sparkle_outline.svg); mask-image: url(../../img/icons/single_color/icon_sparkle_outline.svg); } .bg-icon_sparkle::before { -webkit-mask-image: url(../../img/icons/single_color/icon_sparkle.svg); mask-image: url(../../img/icons/single_color/icon_sparkle.svg); } .bg-icon_spin_left::before { -webkit-mask-image: url(../../img/icons/single_color/icon_spin_left.svg); mask-image: url(../../img/icons/single_color/icon_spin_left.svg); } .bg-icon_spin_right::before { -webkit-mask-image: url(../../img/icons/single_color/icon_spin_right.svg); mask-image: url(../../img/icons/single_color/icon_spin_right.svg); } .bg-icon_sport_shoe::before { -webkit-mask-image: url(../../img/icons/single_color/icon_sport_shoe.svg); mask-image: url(../../img/icons/single_color/icon_sport_shoe.svg); } .bg-icon_star_2::before { -webkit-mask-image: url(../../img/icons/single_color/icon_star_2.svg); mask-image: url(../../img/icons/single_color/icon_star_2.svg); } .bg-icon_star::before { -webkit-mask-image: url(../../img/icons/single_color/icon_star.svg); mask-image: url(../../img/icons/single_color/icon_star.svg); } .bg-icon_super_cards_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_super_cards_filled.svg); mask-image: url(../../img/icons/single_color/icon_super_cards_filled.svg); } .bg-icon_super_cards_outline::before { -webkit-mask-image: url(../../img/icons/single_color/icon_super_cards_outline.svg); mask-image: url(../../img/icons/single_color/icon_super_cards_outline.svg); } .bg-icon_table_tennis::before { -webkit-mask-image: url(../../img/icons/single_color/icon_table_tennis.svg); mask-image: url(../../img/icons/single_color/icon_table_tennis.svg); } .bg-icon_tactic::before { -webkit-mask-image: url(../../img/icons/single_color/icon_tactic.svg); mask-image: url(../../img/icons/single_color/icon_tactic.svg); } .bg-icon_thumbs_up_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_thumbs_up_filled.svg); mask-image: url(../../img/icons/single_color/icon_thumbs_up_filled.svg); } .bg-icon_thumbs_up::before { -webkit-mask-image: url(../../img/icons/single_color/icon_thumbs_up.svg); mask-image: url(../../img/icons/single_color/icon_thumbs_up.svg); } .bg-icon_thumbs_down_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_thumbs_down_filled.svg); mask-image: url(../../img/icons/single_color/icon_thumbs_down_filled.svg); } .bg-icon_thumbs_down::before { -webkit-mask-image: url(../../img/icons/single_color/icon_thumbs_down.svg); mask-image: url(../../img/icons/single_color/icon_thumbs_down.svg); } .bg-icon_ticket::before { -webkit-mask-image: url(../../img/icons/single_color/icon_ticket.svg); mask-image: url(../../img/icons/single_color/icon_ticket.svg); } .bg-icon_tools::before { -webkit-mask-image: url(../../img/icons/single_color/icon_tools.svg); mask-image: url(../../img/icons/single_color/icon_tools.svg); } .bg-icon_upload::before { -webkit-mask-image: url(../../img/icons/single_color/icon_upload.svg); mask-image: url(../../img/icons/single_color/icon_upload.svg); } .bg-icon_user_outline::before { -webkit-mask-image: url(../../img/icons/single_color/icon_user_outline.svg); mask-image: url(../../img/icons/single_color/icon_user_outline.svg); } .bg-icon_user_uni_200_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_user_uni_200_filled.svg); mask-image: url(../../img/icons/single_color/icon_user_uni_200_filled.svg); } .bg-icon_user::before { -webkit-mask-image: url(../../img/icons/single_color/icon_user.svg); mask-image: url(../../img/icons/single_color/icon_user.svg); } .bg-icon_wallet::before { -webkit-mask-image: url(../../img/icons/single_color/icon_wallet.svg); mask-image: url(../../img/icons/single_color/icon_wallet.svg); } .bg-icon_warning::before { -webkit-mask-image: url(../../img/icons/single_color/icon_warning.svg); mask-image: url(../../img/icons/single_color/icon_warning.svg); } .bg-icon_wedding_rings::before { -webkit-mask-image: url(../../img/icons/single_color/icon_wedding_rings.svg); mask-image: url(../../img/icons/single_color/icon_wedding_rings.svg); } .bg-icon_x_circle_filled::before { -webkit-mask-image: url(../../img/icons/single_color/icon_x_circle_filled.svg); mask-image: url(../../img/icons/single_color/icon_x_circle_filled.svg); } .bg-icon_x_circle::before { -webkit-mask-image: url(../../img/icons/single_color/icon_x_circle.svg); mask-image: url(../../img/icons/single_color/icon_x_circle.svg); } .bg-icon_x::before { -webkit-mask-image: url(../../img/icons/single_color/icon_x.svg); mask-image: url(../../img/icons/single_color/icon_x.svg); } .bg-illu_academic_cap::before { -webkit-mask-image: url(../../img/icons/single_color/illu_academic_cap.svg); mask-image: url(../../img/icons/single_color/illu_academic_cap.svg); } .bg-illu_apron::before { -webkit-mask-image: url(../../img/icons/single_color/illu_apron.svg); mask-image: url(../../img/icons/single_color/illu_apron.svg); } .bg-illu_arm::before { -webkit-mask-image: url(../../img/icons/single_color/illu_arm.svg); mask-image: url(../../img/icons/single_color/illu_arm.svg); } .bg-illu_armchair::before { -webkit-mask-image: url(../../img/icons/single_color/illu_armchair.svg); mask-image: url(../../img/icons/single_color/illu_armchair.svg); } .bg-illu_avocado::before { -webkit-mask-image: url(../../img/icons/single_color/illu_avocado.svg); mask-image: url(../../img/icons/single_color/illu_avocado.svg); } .bg-illu_baby_bottle::before { -webkit-mask-image: url(../../img/icons/single_color/illu_baby_bottle.svg); mask-image: url(../../img/icons/single_color/illu_baby_bottle.svg); } .bg-illu_backpack::before { -webkit-mask-image: url(../../img/icons/single_color/illu_backpack.svg); mask-image: url(../../img/icons/single_color/illu_backpack.svg); } .bg-illu_backpack2::before { -webkit-mask-image: url(../../img/icons/single_color/illu_backpack2.svg); mask-image: url(../../img/icons/single_color/illu_backpack2.svg); } .bg-illu_backstage_pass::before { -webkit-mask-image: url(../../img/icons/single_color/illu_backstage_pass.svg); mask-image: url(../../img/icons/single_color/illu_backstage_pass.svg); } .bg-illu_badminton::before { -webkit-mask-image: url(../../img/icons/single_color/illu_badminton.svg); mask-image: url(../../img/icons/single_color/illu_badminton.svg); } .bg-illu_bag::before { -webkit-mask-image: url(../../img/icons/single_color/illu_bag.svg); mask-image: url(../../img/icons/single_color/illu_bag.svg); } .bg-illu_ballet_shoes::before { -webkit-mask-image: url(../../img/icons/single_color/illu_ballet_shoes.svg); mask-image: url(../../img/icons/single_color/illu_ballet_shoes.svg); } .bg-illu_balls::before { -webkit-mask-image: url(../../img/icons/single_color/illu_balls.svg); mask-image: url(../../img/icons/single_color/illu_balls.svg); } .bg-illu_baseball::before { -webkit-mask-image: url(../../img/icons/single_color/illu_baseball.svg); mask-image: url(../../img/icons/single_color/illu_baseball.svg); } .bg-illu_basketball::before { -webkit-mask-image: url(../../img/icons/single_color/illu_basketball.svg); mask-image: url(../../img/icons/single_color/illu_basketball.svg); } .bg-illu_bicycle_bag::before { -webkit-mask-image: url(../../img/icons/single_color/illu_bicycle_bag.svg); mask-image: url(../../img/icons/single_color/illu_bicycle_bag.svg); } .bg-illu_bicycle::before { -webkit-mask-image: url(../../img/icons/single_color/illu_bicycle.svg); mask-image: url(../../img/icons/single_color/illu_bicycle.svg); } .bg-illu_birthday_cake::before { -webkit-mask-image: url(../../img/icons/single_color/illu_birthday_cake.svg); mask-image: url(../../img/icons/single_color/illu_birthday_cake.svg); } .bg-illu_bonfire::before { -webkit-mask-image: url(../../img/icons/single_color/illu_bonfire.svg); mask-image: url(../../img/icons/single_color/illu_bonfire.svg); } .bg-illu_books::before { -webkit-mask-image: url(../../img/icons/single_color/illu_books.svg); mask-image: url(../../img/icons/single_color/illu_books.svg); } .bg-illu_boots::before { -webkit-mask-image: url(../../img/icons/single_color/illu_boots.svg); mask-image: url(../../img/icons/single_color/illu_boots.svg); } .bg-illu_bowl::before { -webkit-mask-image: url(../../img/icons/single_color/illu_bowl.svg); mask-image: url(../../img/icons/single_color/illu_bowl.svg); } .bg-illu_bowling::before { -webkit-mask-image: url(../../img/icons/single_color/illu_bowling.svg); mask-image: url(../../img/icons/single_color/illu_bowling.svg); } .bg-illu_brush_pencil::before { -webkit-mask-image: url(../../img/icons/single_color/illu_brush_pencil.svg); mask-image: url(../../img/icons/single_color/illu_brush_pencil.svg); } .bg-illu_burger::before { -webkit-mask-image: url(../../img/icons/single_color/illu_burger.svg); mask-image: url(../../img/icons/single_color/illu_burger.svg); } .bg-illu_bus::before { -webkit-mask-image: url(../../img/icons/single_color/illu_bus.svg); mask-image: url(../../img/icons/single_color/illu_bus.svg); } .bg-illu_camera::before { -webkit-mask-image: url(../../img/icons/single_color/illu_camera.svg); mask-image: url(../../img/icons/single_color/illu_camera.svg); } .bg-illu_canoe::before { -webkit-mask-image: url(../../img/icons/single_color/illu_canoe.svg); mask-image: url(../../img/icons/single_color/illu_canoe.svg); } .bg-illu_canyon::before { -webkit-mask-image: url(../../img/icons/single_color/illu_canyon.svg); mask-image: url(../../img/icons/single_color/illu_canyon.svg); } .bg-illu_capitol::before { -webkit-mask-image: url(../../img/icons/single_color/illu_capitol.svg); mask-image: url(../../img/icons/single_color/illu_capitol.svg); } .bg-illu_car::before { -webkit-mask-image: url(../../img/icons/single_color/illu_car.svg); mask-image: url(../../img/icons/single_color/illu_car.svg); } .bg-illu_carrot::before { -webkit-mask-image: url(../../img/icons/single_color/illu_carrot.svg); mask-image: url(../../img/icons/single_color/illu_carrot.svg); } .bg-illu_cat_dog::before { -webkit-mask-image: url(../../img/icons/single_color/illu_cat_dog.svg); mask-image: url(../../img/icons/single_color/illu_cat_dog.svg); } .bg-illu_checklist::before { -webkit-mask-image: url(../../img/icons/single_color/illu_checklist.svg); mask-image: url(../../img/icons/single_color/illu_checklist.svg); } .bg-illu_chefs_toque::before { -webkit-mask-image: url(../../img/icons/single_color/illu_chefs_toque.svg); mask-image: url(../../img/icons/single_color/illu_chefs_toque.svg); } .bg-illu_children::before { -webkit-mask-image: url(../../img/icons/single_color/illu_children.svg); mask-image: url(../../img/icons/single_color/illu_children.svg); } .bg-illu_child_figures::before { -webkit-mask-image: url(../../img/icons/single_color/illu_child_figures.svg); mask-image: url(../../img/icons/single_color/illu_child_figures.svg); } .bg-illu_chili_pepper::before { -webkit-mask-image: url(../../img/icons/single_color/illu_chili_pepper.svg); mask-image: url(../../img/icons/single_color/illu_chili_pepper.svg); } .bg-illu_chocolate::before { -webkit-mask-image: url(../../img/icons/single_color/illu_chocolate.svg); mask-image: url(../../img/icons/single_color/illu_chocolate.svg); } .bg-illu_cigarette::before { -webkit-mask-image: url(../../img/icons/single_color/illu_cigarette.svg); mask-image: url(../../img/icons/single_color/illu_cigarette.svg); } .bg-illu_cocktail::before { -webkit-mask-image: url(../../img/icons/single_color/illu_cocktail.svg); mask-image: url(../../img/icons/single_color/illu_cocktail.svg); } .bg-illu_coffee_mug::before { -webkit-mask-image: url(../../img/icons/single_color/illu_coffee_mug.svg); mask-image: url(../../img/icons/single_color/illu_coffee_mug.svg); } .bg-illu_coffee::before { -webkit-mask-image: url(../../img/icons/single_color/illu_coffee.svg); mask-image: url(../../img/icons/single_color/illu_coffee.svg); } .bg-illu_communication::before { -webkit-mask-image: url(../../img/icons/single_color/illu_communication.svg); mask-image: url(../../img/icons/single_color/illu_communication.svg); } .bg-illu_compass::before { -webkit-mask-image: url(../../img/icons/single_color/illu_compass.svg); mask-image: url(../../img/icons/single_color/illu_compass.svg); } .bg-illu_controller::before { -webkit-mask-image: url(../../img/icons/single_color/illu_controller.svg); mask-image: url(../../img/icons/single_color/illu_controller.svg); } .bg-illu_countryside::before { -webkit-mask-image: url(../../img/icons/single_color/illu_countryside.svg); mask-image: url(../../img/icons/single_color/illu_countryside.svg); } .bg-illu_crazy_eyes::before { -webkit-mask-image: url(../../img/icons/single_color/illu_crazy_eyes.svg); mask-image: url(../../img/icons/single_color/illu_crazy_eyes.svg); } .bg-illu_cricket::before { -webkit-mask-image: url(../../img/icons/single_color/illu_cricket.svg); mask-image: url(../../img/icons/single_color/illu_cricket.svg); } .bg-illu_croissant::before { -webkit-mask-image: url(../../img/icons/single_color/illu_croissant.svg); mask-image: url(../../img/icons/single_color/illu_croissant.svg); } .bg-illu_crossed_fingers::before { -webkit-mask-image: url(../../img/icons/single_color/illu_crossed_fingers.svg); mask-image: url(../../img/icons/single_color/illu_crossed_fingers.svg); } .bg-illu_cruise_ship::before { -webkit-mask-image: url(../../img/icons/single_color/illu_cruise_ship.svg); mask-image: url(../../img/icons/single_color/illu_cruise_ship.svg); } .bg-illu_cupcake::before { -webkit-mask-image: url(../../img/icons/single_color/illu_cupcake.svg); mask-image: url(../../img/icons/single_color/illu_cupcake.svg); } .bg-illu_daypack::before { -webkit-mask-image: url(../../img/icons/single_color/illu_daypack.svg); mask-image: url(../../img/icons/single_color/illu_daypack.svg); } .bg-illu_disco_ball::before { -webkit-mask-image: url(../../img/icons/single_color/illu_disco_ball.svg); mask-image: url(../../img/icons/single_color/illu_disco_ball.svg); } .bg-illu_diving_glasses::before { -webkit-mask-image: url(../../img/icons/single_color/illu_diving_glasses.svg); mask-image: url(../../img/icons/single_color/illu_diving_glasses.svg); } .bg-illu_diy::before { -webkit-mask-image: url(../../img/icons/single_color/illu_diy.svg); mask-image: url(../../img/icons/single_color/illu_diy.svg); } .bg-illu_dobok::before { -webkit-mask-image: url(../../img/icons/single_color/illu_dobok.svg); mask-image: url(../../img/icons/single_color/illu_dobok.svg); } .bg-illu_dumbbell::before { -webkit-mask-image: url(../../img/icons/single_color/illu_dumbbell.svg); mask-image: url(../../img/icons/single_color/illu_dumbbell.svg); } .bg-illu_ear::before { -webkit-mask-image: url(../../img/icons/single_color/illu_ear.svg); mask-image: url(../../img/icons/single_color/illu_ear.svg); } .bg-illu_earth::before { -webkit-mask-image: url(../../img/icons/single_color/illu_earth.svg); mask-image: url(../../img/icons/single_color/illu_earth.svg); } .bg-illu_educational_building::before { -webkit-mask-image: url(../../img/icons/single_color/illu_educational_building.svg); mask-image: url(../../img/icons/single_color/illu_educational_building.svg); } .bg-illu_empanadas::before { -webkit-mask-image: url(../../img/icons/single_color/illu_empanadas.svg); mask-image: url(../../img/icons/single_color/illu_empanadas.svg); } .bg-illu_eye::before { -webkit-mask-image: url(../../img/icons/single_color/illu_eye.svg); mask-image: url(../../img/icons/single_color/illu_eye.svg); } .bg-illu_face_blowing_a_kiss::before { -webkit-mask-image: url(../../img/icons/single_color/illu_face_blowing_a_kiss.svg); mask-image: url(../../img/icons/single_color/illu_face_blowing_a_kiss.svg); } .bg-illu_face_laughing::before { -webkit-mask-image: url(../../img/icons/single_color/illu_face_laughing.svg); mask-image: url(../../img/icons/single_color/illu_face_laughing.svg); } .bg-illu_face_with_hand_over_mouth::before { -webkit-mask-image: url(../../img/icons/single_color/illu_face_with_hand_over_mouth.svg); mask-image: url(../../img/icons/single_color/illu_face_with_hand_over_mouth.svg); } .bg-illu_face_with_monocle::before { -webkit-mask-image: url(../../img/icons/single_color/illu_face_with_monocle.svg); mask-image: url(../../img/icons/single_color/illu_face_with_monocle.svg); } .bg-illu_face_with_pleading_eyes::before { -webkit-mask-image: url(../../img/icons/single_color/illu_face_with_pleading_eyes.svg); mask-image: url(../../img/icons/single_color/illu_face_with_pleading_eyes.svg); } .bg-illu_face_with_rolling_eyes::before { -webkit-mask-image: url(../../img/icons/single_color/illu_face_with_rolling_eyes.svg); mask-image: url(../../img/icons/single_color/illu_face_with_rolling_eyes.svg); } .bg-illu_face_with_tears_of_joy::before { -webkit-mask-image: url(../../img/icons/single_color/illu_face_with_tears_of_joy.svg); mask-image: url(../../img/icons/single_color/illu_face_with_tears_of_joy.svg); } .bg-illu_falafel::before { -webkit-mask-image: url(../../img/icons/single_color/illu_falafel.svg); mask-image: url(../../img/icons/single_color/illu_falafel.svg); } .bg-illu_figure_ruler::before { -webkit-mask-image: url(../../img/icons/single_color/illu_figure_ruler.svg); mask-image: url(../../img/icons/single_color/illu_figure_ruler.svg); } .bg-illu_filmstrip::before { -webkit-mask-image: url(../../img/icons/single_color/illu_filmstrip.svg); mask-image: url(../../img/icons/single_color/illu_filmstrip.svg); } .bg-illu_fish_2::before { -webkit-mask-image: url(../../img/icons/single_color/illu_fish_2.svg); mask-image: url(../../img/icons/single_color/illu_fish_2.svg); } .bg-illu_fish::before { -webkit-mask-image: url(../../img/icons/single_color/illu_fish.svg); mask-image: url(../../img/icons/single_color/illu_fish.svg); } .bg-illu_fitness::before { -webkit-mask-image: url(../../img/icons/single_color/illu_fitness.svg); mask-image: url(../../img/icons/single_color/illu_fitness.svg); } .bg-illu_flipper::before { -webkit-mask-image: url(../../img/icons/single_color/illu_flipper.svg); mask-image: url(../../img/icons/single_color/illu_flipper.svg); } .bg-illu_float::before { -webkit-mask-image: url(../../img/icons/single_color/illu_float.svg); mask-image: url(../../img/icons/single_color/illu_float.svg); } .bg-illu_food_truck::before { -webkit-mask-image: url(../../img/icons/single_color/illu_food_truck.svg); mask-image: url(../../img/icons/single_color/illu_food_truck.svg); } .bg-illu_football::before { -webkit-mask-image: url(../../img/icons/single_color/illu_football.svg); mask-image: url(../../img/icons/single_color/illu_football.svg); } .bg-illu_games::before { -webkit-mask-image: url(../../img/icons/single_color/illu_games.svg); mask-image: url(../../img/icons/single_color/illu_games.svg); } .bg-illu_gender::before { -webkit-mask-image: url(../../img/icons/single_color/illu_gender.svg); mask-image: url(../../img/icons/single_color/illu_gender.svg); } .bg-illu_glas::before { -webkit-mask-image: url(../../img/icons/single_color/illu_glas.svg); mask-image: url(../../img/icons/single_color/illu_glas.svg); } .bg-illu_globe_leaf::before { -webkit-mask-image: url(../../img/icons/single_color/illu_globe_leaf.svg); mask-image: url(../../img/icons/single_color/illu_globe_leaf.svg); } .bg-illu_globe::before { -webkit-mask-image: url(../../img/icons/single_color/illu_globe.svg); mask-image: url(../../img/icons/single_color/illu_globe.svg); } .bg-illu_gluten_free::before { -webkit-mask-image: url(../../img/icons/single_color/illu_gluten_free.svg); mask-image: url(../../img/icons/single_color/illu_gluten_free.svg); } .bg-illu_goggles::before { -webkit-mask-image: url(../../img/icons/single_color/illu_goggles.svg); mask-image: url(../../img/icons/single_color/illu_goggles.svg); } .bg-illu_golf::before { -webkit-mask-image: url(../../img/icons/single_color/illu_golf.svg); mask-image: url(../../img/icons/single_color/illu_golf.svg); } .bg-illu_gong::before { -webkit-mask-image: url(../../img/icons/single_color/illu_gong.svg); mask-image: url(../../img/icons/single_color/illu_gong.svg); } .bg-illu_gourmet::before { -webkit-mask-image: url(../../img/icons/single_color/illu_gourmet.svg); mask-image: url(../../img/icons/single_color/illu_gourmet.svg); } .bg-illu_grill::before { -webkit-mask-image: url(../../img/icons/single_color/illu_grill.svg); mask-image: url(../../img/icons/single_color/illu_grill.svg); } .bg-illu_guitar_mic::before { -webkit-mask-image: url(../../img/icons/single_color/illu_guitar_mic.svg); mask-image: url(../../img/icons/single_color/illu_guitar_mic.svg); } .bg-illu_halal::before { -webkit-mask-image: url(../../img/icons/single_color/illu_halal.svg); mask-image: url(../../img/icons/single_color/illu_halal.svg); } .bg-illu_hammer_wrench::before { -webkit-mask-image: url(../../img/icons/single_color/illu_hammer_wrench.svg); mask-image: url(../../img/icons/single_color/illu_hammer_wrench.svg); } .bg-illu_hand_heart::before { -webkit-mask-image: url(../../img/icons/single_color/illu_hand_heart.svg); mask-image: url(../../img/icons/single_color/illu_hand_heart.svg); } .bg-illu_hand_shake::before { -webkit-mask-image: url(../../img/icons/single_color/illu_hand_shake.svg); mask-image: url(../../img/icons/single_color/illu_hand_shake.svg); } .bg-illu_handball::before { -webkit-mask-image: url(../../img/icons/single_color/illu_handball.svg); mask-image: url(../../img/icons/single_color/illu_handball.svg); } .bg-illu_hat::before { -webkit-mask-image: url(../../img/icons/single_color/illu_hat.svg); mask-image: url(../../img/icons/single_color/illu_hat.svg); } .bg-illu_headphones::before { -webkit-mask-image: url(../../img/icons/single_color/illu_headphones.svg); mask-image: url(../../img/icons/single_color/illu_headphones.svg); } .bg-illu_heart::before { -webkit-mask-image: url(../../img/icons/single_color/illu_heart.svg); mask-image: url(../../img/icons/single_color/illu_heart.svg); } .bg-illu_hearts::before { -webkit-mask-image: url(../../img/icons/single_color/illu_hearts.svg); mask-image: url(../../img/icons/single_color/illu_hearts.svg); } .bg-illu_helmet::before { -webkit-mask-image: url(../../img/icons/single_color/illu_helmet.svg); mask-image: url(../../img/icons/single_color/illu_helmet.svg); } .bg-illu_hiking_boots::before { -webkit-mask-image: url(../../img/icons/single_color/illu_hiking_boots.svg); mask-image: url(../../img/icons/single_color/illu_hiking_boots.svg); } .bg-illu_hockey::before { -webkit-mask-image: url(../../img/icons/single_color/illu_hockey.svg); mask-image: url(../../img/icons/single_color/illu_hockey.svg); } .bg-illu_house::before { -webkit-mask-image: url(../../img/icons/single_color/illu_house.svg); mask-image: url(../../img/icons/single_color/illu_house.svg); } .bg-illu_house2::before { -webkit-mask-image: url(../../img/icons/single_color/illu_house2.svg); mask-image: url(../../img/icons/single_color/illu_house2.svg); } .bg-illu_hugging_face::before { -webkit-mask-image: url(../../img/icons/single_color/illu_hugging_face.svg); mask-image: url(../../img/icons/single_color/illu_hugging_face.svg); } .bg-illu_index_pointing_up::before { -webkit-mask-image: url(../../img/icons/single_color/illu_index_pointing_up.svg); mask-image: url(../../img/icons/single_color/illu_index_pointing_up.svg); } .bg-illu_jambalaya::before { -webkit-mask-image: url(../../img/icons/single_color/illu_jambalaya.svg); mask-image: url(../../img/icons/single_color/illu_jambalaya.svg); } .bg-illu_kayak::before { -webkit-mask-image: url(../../img/icons/single_color/illu_kayak.svg); mask-image: url(../../img/icons/single_color/illu_kayak.svg); } .bg-illu_kite::before { -webkit-mask-image: url(../../img/icons/single_color/illu_kite.svg); mask-image: url(../../img/icons/single_color/illu_kite.svg); } .bg-illu_kosher::before { -webkit-mask-image: url(../../img/icons/single_color/illu_kosher.svg); mask-image: url(../../img/icons/single_color/illu_kosher.svg); } .bg-illu_language::before { -webkit-mask-image: url(../../img/icons/single_color/illu_language.svg); mask-image: url(../../img/icons/single_color/illu_language.svg); } .bg-illu_laptop_code::before { -webkit-mask-image: url(../../img/icons/single_color/illu_laptop_code.svg); mask-image: url(../../img/icons/single_color/illu_laptop_code.svg); } .bg-illu_laptop_text::before { -webkit-mask-image: url(../../img/icons/single_color/illu_laptop_text.svg); mask-image: url(../../img/icons/single_color/illu_laptop_text.svg); } .bg-illu_laptop_world::before { -webkit-mask-image: url(../../img/icons/single_color/illu_laptop_world.svg); mask-image: url(../../img/icons/single_color/illu_laptop_world.svg); } .bg-illu_laptop::before { -webkit-mask-image: url(../../img/icons/single_color/illu_laptop.svg); mask-image: url(../../img/icons/single_color/illu_laptop.svg); } .bg-illu_leaves::before { -webkit-mask-image: url(../../img/icons/single_color/illu_leaves.svg); mask-image: url(../../img/icons/single_color/illu_leaves.svg); } .bg-illu_leaves2::before { -webkit-mask-image: url(../../img/icons/single_color/illu_leaves2.svg); mask-image: url(../../img/icons/single_color/illu_leaves2.svg); } .bg-illu_light_bulb::before { -webkit-mask-image: url(../../img/icons/single_color/illu_light_bulb.svg); mask-image: url(../../img/icons/single_color/illu_light_bulb.svg); } .bg-illu_location_pin::before { -webkit-mask-image: url(../../img/icons/single_color/illu_location_pin.svg); mask-image: url(../../img/icons/single_color/illu_location_pin.svg); } .bg-illu_lotus::before { -webkit-mask-image: url(../../img/icons/single_color/illu_lotus.svg); mask-image: url(../../img/icons/single_color/illu_lotus.svg); } .bg-illu_luggage::before { -webkit-mask-image: url(../../img/icons/single_color/illu_luggage.svg); mask-image: url(../../img/icons/single_color/illu_luggage.svg); } .bg-illu_mask::before { -webkit-mask-image: url(../../img/icons/single_color/illu_mask.svg); mask-image: url(../../img/icons/single_color/illu_mask.svg); } .bg-illu_mat::before { -webkit-mask-image: url(../../img/icons/single_color/illu_mat.svg); mask-image: url(../../img/icons/single_color/illu_mat.svg); } .bg-illu_mat2::before { -webkit-mask-image: url(../../img/icons/single_color/illu_mat2.svg); mask-image: url(../../img/icons/single_color/illu_mat2.svg); } .bg-illu_meat::before { -webkit-mask-image: url(../../img/icons/single_color/illu_meat.svg); mask-image: url(../../img/icons/single_color/illu_meat.svg); } .bg-illu_medal::before { -webkit-mask-image: url(../../img/icons/single_color/illu_medal.svg); mask-image: url(../../img/icons/single_color/illu_medal.svg); } .bg-illu_mic::before { -webkit-mask-image: url(../../img/icons/single_color/illu_mic.svg); mask-image: url(../../img/icons/single_color/illu_mic.svg); } .bg-illu_microphone::before { -webkit-mask-image: url(../../img/icons/single_color/illu_microphone.svg); mask-image: url(../../img/icons/single_color/illu_microphone.svg); } .bg-illu_motorcycle::before { -webkit-mask-image: url(../../img/icons/single_color/illu_motorcycle.svg); mask-image: url(../../img/icons/single_color/illu_motorcycle.svg); } .bg-illu_mountain_climbing::before { -webkit-mask-image: url(../../img/icons/single_color/illu_mountain_climbing.svg); mask-image: url(../../img/icons/single_color/illu_mountain_climbing.svg); } .bg-illu_mountainbike::before { -webkit-mask-image: url(../../img/icons/single_color/illu_mountainbike.svg); mask-image: url(../../img/icons/single_color/illu_mountainbike.svg); } .bg-illu_mountains::before { -webkit-mask-image: url(../../img/icons/single_color/illu_mountains.svg); mask-image: url(../../img/icons/single_color/illu_mountains.svg); } .bg-illu_mouth::before { -webkit-mask-image: url(../../img/icons/single_color/illu_mouth.svg); mask-image: url(../../img/icons/single_color/illu_mouth.svg); } .bg-illu_naan::before { -webkit-mask-image: url(../../img/icons/single_color/illu_naan.svg); mask-image: url(../../img/icons/single_color/illu_naan.svg); } .bg-illu_neutral_face::before { -webkit-mask-image: url(../../img/icons/single_color/illu_neutral_face.svg); mask-image: url(../../img/icons/single_color/illu_neutral_face.svg); } .bg-illu_olive_oil::before { -webkit-mask-image: url(../../img/icons/single_color/illu_olive_oil.svg); mask-image: url(../../img/icons/single_color/illu_olive_oil.svg); } .bg-illu_om_symbol::before { -webkit-mask-image: url(../../img/icons/single_color/illu_om_symbol.svg); mask-image: url(../../img/icons/single_color/illu_om_symbol.svg); } .bg-illu_open_book::before { -webkit-mask-image: url(../../img/icons/single_color/illu_open_book.svg); mask-image: url(../../img/icons/single_color/illu_open_book.svg); } .bg-illu_paddle::before { -webkit-mask-image: url(../../img/icons/single_color/illu_paddle.svg); mask-image: url(../../img/icons/single_color/illu_paddle.svg); } .bg-illu_padel_tennis::before { -webkit-mask-image: url(../../img/icons/single_color/illu_padel_tennis.svg); mask-image: url(../../img/icons/single_color/illu_padel_tennis.svg); } .bg-illu_palette::before { -webkit-mask-image: url(../../img/icons/single_color/illu_palette.svg); mask-image: url(../../img/icons/single_color/illu_palette.svg); } .bg-illu_palm_tree::before { -webkit-mask-image: url(../../img/icons/single_color/illu_palm_tree.svg); mask-image: url(../../img/icons/single_color/illu_palm_tree.svg); } .bg-illu_parachute::before { -webkit-mask-image: url(../../img/icons/single_color/illu_parachute.svg); mask-image: url(../../img/icons/single_color/illu_parachute.svg); } .bg-illu_parasol::before { -webkit-mask-image: url(../../img/icons/single_color/illu_parasol.svg); mask-image: url(../../img/icons/single_color/illu_parasol.svg); } .bg-illu_party_face::before { -webkit-mask-image: url(../../img/icons/single_color/illu_party_face.svg); mask-image: url(../../img/icons/single_color/illu_party_face.svg); } .bg-illu_paw::before { -webkit-mask-image: url(../../img/icons/single_color/illu_paw.svg); mask-image: url(../../img/icons/single_color/illu_paw.svg); } .bg-illu_peace_hand::before { -webkit-mask-image: url(../../img/icons/single_color/illu_peace_hand.svg); mask-image: url(../../img/icons/single_color/illu_peace_hand.svg); } .bg-illu_pen::before { -webkit-mask-image: url(../../img/icons/single_color/illu_pen.svg); mask-image: url(../../img/icons/single_color/illu_pen.svg); } .bg-illu_pencile_brush::before { -webkit-mask-image: url(../../img/icons/single_color/illu_pencile_brush.svg); mask-image: url(../../img/icons/single_color/illu_pencile_brush.svg); } .bg-illu_phone_like::before { -webkit-mask-image: url(../../img/icons/single_color/illu_phone_like.svg); mask-image: url(../../img/icons/single_color/illu_phone_like.svg); } .bg-illu_piano::before { -webkit-mask-image: url(../../img/icons/single_color/illu_piano.svg); mask-image: url(../../img/icons/single_color/illu_piano.svg); } .bg-illu_pillar::before { -webkit-mask-image: url(../../img/icons/single_color/illu_pillar.svg); mask-image: url(../../img/icons/single_color/illu_pillar.svg); } .bg-illu_pizza::before { -webkit-mask-image: url(../../img/icons/single_color/illu_pizza.svg); mask-image: url(../../img/icons/single_color/illu_pizza.svg); } .bg-illu_plant::before { -webkit-mask-image: url(../../img/icons/single_color/illu_plant.svg); mask-image: url(../../img/icons/single_color/illu_plant.svg); } .bg-illu_plaster::before { -webkit-mask-image: url(../../img/icons/single_color/illu_plaster.svg); mask-image: url(../../img/icons/single_color/illu_plaster.svg); } .bg-illu_pommel_horse::before { -webkit-mask-image: url(../../img/icons/single_color/illu_pommel_horse.svg); mask-image: url(../../img/icons/single_color/illu_pommel_horse.svg); } .bg-illu_pool::before { -webkit-mask-image: url(../../img/icons/single_color/illu_pool.svg); mask-image: url(../../img/icons/single_color/illu_pool.svg); } .bg-illu_popcorn_menu::before { -webkit-mask-image: url(../../img/icons/single_color/illu_popcorn_menu.svg); mask-image: url(../../img/icons/single_color/illu_popcorn_menu.svg); } .bg-illu_pot::before { -webkit-mask-image: url(../../img/icons/single_color/illu_pot.svg); mask-image: url(../../img/icons/single_color/illu_pot.svg); } .bg-illu_prawn::before { -webkit-mask-image: url(../../img/icons/single_color/illu_prawn.svg); mask-image: url(../../img/icons/single_color/illu_prawn.svg); } .bg-illu_pray::before { -webkit-mask-image: url(../../img/icons/single_color/illu_pray.svg); mask-image: url(../../img/icons/single_color/illu_pray.svg); } .bg-illu_pumpkin::before { -webkit-mask-image: url(../../img/icons/single_color/illu_pumpkin.svg); mask-image: url(../../img/icons/single_color/illu_pumpkin.svg); } .bg-illu_race_car::before { -webkit-mask-image: url(../../img/icons/single_color/illu_race_car.svg); mask-image: url(../../img/icons/single_color/illu_race_car.svg); } .bg-illu_racetrack::before { -webkit-mask-image: url(../../img/icons/single_color/illu_racetrack.svg); mask-image: url(../../img/icons/single_color/illu_racetrack.svg); } .bg-illu_record_player::before { -webkit-mask-image: url(../../img/icons/single_color/illu_record_player.svg); mask-image: url(../../img/icons/single_color/illu_record_player.svg); } .bg-illu_relieved_face::before { -webkit-mask-image: url(../../img/icons/single_color/illu_relieved_face.svg); mask-image: url(../../img/icons/single_color/illu_relieved_face.svg); } .bg-illu_rope::before { -webkit-mask-image: url(../../img/icons/single_color/illu_rope.svg); mask-image: url(../../img/icons/single_color/illu_rope.svg); } .bg-illu_rugby::before { -webkit-mask-image: url(../../img/icons/single_color/illu_rugby.svg); mask-image: url(../../img/icons/single_color/illu_rugby.svg); } .bg-illu_ruler::before { -webkit-mask-image: url(../../img/icons/single_color/illu_ruler.svg); mask-image: url(../../img/icons/single_color/illu_ruler.svg); } .bg-illu_running_top::before { -webkit-mask-image: url(../../img/icons/single_color/illu_running_top.svg); mask-image: url(../../img/icons/single_color/illu_running_top.svg); } .bg-illu_saddle::before { -webkit-mask-image: url(../../img/icons/single_color/illu_saddle.svg); mask-image: url(../../img/icons/single_color/illu_saddle.svg); } .bg-illu_sailboat::before { -webkit-mask-image: url(../../img/icons/single_color/illu_sailboat.svg); mask-image: url(../../img/icons/single_color/illu_sailboat.svg); } .bg-illu_sandwich::before { -webkit-mask-image: url(../../img/icons/single_color/illu_sandwich.svg); mask-image: url(../../img/icons/single_color/illu_sandwich.svg); } .bg-illu_shoeprint::before { -webkit-mask-image: url(../../img/icons/single_color/illu_shoeprint.svg); mask-image: url(../../img/icons/single_color/illu_shoeprint.svg); } .bg-illu_skateboard::before { -webkit-mask-image: url(../../img/icons/single_color/illu_skateboard.svg); mask-image: url(../../img/icons/single_color/illu_skateboard.svg); } .bg-illu_skater::before { -webkit-mask-image: url(../../img/icons/single_color/illu_skater.svg); mask-image: url(../../img/icons/single_color/illu_skater.svg); } .bg-illu_ski_lift::before { -webkit-mask-image: url(../../img/icons/single_color/illu_ski_lift.svg); mask-image: url(../../img/icons/single_color/illu_ski_lift.svg); } .bg-illu_ski::before { -webkit-mask-image: url(../../img/icons/single_color/illu_ski.svg); mask-image: url(../../img/icons/single_color/illu_ski.svg); } .bg-illu_skyline::before { -webkit-mask-image: url(../../img/icons/single_color/illu_skyline.svg); mask-image: url(../../img/icons/single_color/illu_skyline.svg); } .bg-illu_smiling_face_degree::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smiling_face_degree.svg); mask-image: url(../../img/icons/single_color/illu_smiling_face_degree.svg); } .bg-illu_smiling_face_licking_lips::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smiling_face_licking_lips.svg); mask-image: url(../../img/icons/single_color/illu_smiling_face_licking_lips.svg); } .bg-illu_smiling_face_with_glasses::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smiling_face_with_glasses.svg); mask-image: url(../../img/icons/single_color/illu_smiling_face_with_glasses.svg); } .bg-illu_smiling_face_with_halo::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smiling_face_with_halo.svg); mask-image: url(../../img/icons/single_color/illu_smiling_face_with_halo.svg); } .bg-illu_smiling_face_with_heart_eyes::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smiling_face_with_heart_eyes.svg); mask-image: url(../../img/icons/single_color/illu_smiling_face_with_heart_eyes.svg); } .bg-illu_smiling_face_with_hearts::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smiling_face_with_hearts.svg); mask-image: url(../../img/icons/single_color/illu_smiling_face_with_hearts.svg); } .bg-illu_smiling_face_with_smiling_eyes::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smiling_face_with_smiling_eyes.svg); mask-image: url(../../img/icons/single_color/illu_smiling_face_with_smiling_eyes.svg); } .bg-illu_smiling_face_with_sunglasses::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smiling_face_with_sunglasses.svg); mask-image: url(../../img/icons/single_color/illu_smiling_face_with_sunglasses.svg); } .bg-illu_smirking_face::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smirking_face.svg); mask-image: url(../../img/icons/single_color/illu_smirking_face.svg); } .bg-illu_smoothie::before { -webkit-mask-image: url(../../img/icons/single_color/illu_smoothie.svg); mask-image: url(../../img/icons/single_color/illu_smoothie.svg); } .bg-illu_sneaker::before { -webkit-mask-image: url(../../img/icons/single_color/illu_sneaker.svg); mask-image: url(../../img/icons/single_color/illu_sneaker.svg); } .bg-illu_snowboard::before { -webkit-mask-image: url(../../img/icons/single_color/illu_snowboard.svg); mask-image: url(../../img/icons/single_color/illu_snowboard.svg); } .bg-illu_soccer::before { -webkit-mask-image: url(../../img/icons/single_color/illu_soccer.svg); mask-image: url(../../img/icons/single_color/illu_soccer.svg); } .bg-illu_soup_bowl::before { -webkit-mask-image: url(../../img/icons/single_color/illu_soup_bowl.svg); mask-image: url(../../img/icons/single_color/illu_soup_bowl.svg); } .bg-illu_spa::before { -webkit-mask-image: url(../../img/icons/single_color/illu_spa.svg); mask-image: url(../../img/icons/single_color/illu_spa.svg); } .bg-illu_star_struck::before { -webkit-mask-image: url(../../img/icons/single_color/illu_star_struck.svg); mask-image: url(../../img/icons/single_color/illu_star_struck.svg); } .bg-illu_steak_leaves::before { -webkit-mask-image: url(../../img/icons/single_color/illu_steak_leaves.svg); mask-image: url(../../img/icons/single_color/illu_steak_leaves.svg); } .bg-illu_stones::before { -webkit-mask-image: url(../../img/icons/single_color/illu_stones.svg); mask-image: url(../../img/icons/single_color/illu_stones.svg); } .bg-illu_stoppwatch::before { -webkit-mask-image: url(../../img/icons/single_color/illu_stoppwatch.svg); mask-image: url(../../img/icons/single_color/illu_stoppwatch.svg); } .bg-illu_sup_board::before { -webkit-mask-image: url(../../img/icons/single_color/illu_sup_board.svg); mask-image: url(../../img/icons/single_color/illu_sup_board.svg); } .bg-illu_surfboard::before { -webkit-mask-image: url(../../img/icons/single_color/illu_surfboard.svg); mask-image: url(../../img/icons/single_color/illu_surfboard.svg); } .bg-illu_sushi::before { -webkit-mask-image: url(../../img/icons/single_color/illu_sushi.svg); mask-image: url(../../img/icons/single_color/illu_sushi.svg); } .bg-illu_sword_wand::before { -webkit-mask-image: url(../../img/icons/single_color/illu_sword_wand.svg); mask-image: url(../../img/icons/single_color/illu_sword_wand.svg); } .bg-illu_table_tennis::before { -webkit-mask-image: url(../../img/icons/single_color/illu_table_tennis.svg); mask-image: url(../../img/icons/single_color/illu_table_tennis.svg); } .bg-illu_taco::before { -webkit-mask-image: url(../../img/icons/single_color/illu_taco.svg); mask-image: url(../../img/icons/single_color/illu_taco.svg); } .bg-illu_tajine::before { -webkit-mask-image: url(../../img/icons/single_color/illu_tajine.svg); mask-image: url(../../img/icons/single_color/illu_tajine.svg); } .bg-illu_telescope::before { -webkit-mask-image: url(../../img/icons/single_color/illu_telescope.svg); mask-image: url(../../img/icons/single_color/illu_telescope.svg); } .bg-illu_target::before { -webkit-mask-image: url(../../img/icons/single_color/illu_target.svg); mask-image: url(../../img/icons/single_color/illu_target.svg); } .bg-illu_tennis::before { -webkit-mask-image: url(../../img/icons/single_color/illu_tennis.svg); mask-image: url(../../img/icons/single_color/illu_tennis.svg); } .bg-illu_tent::before { -webkit-mask-image: url(../../img/icons/single_color/illu_tent.svg); mask-image: url(../../img/icons/single_color/illu_tent.svg); } .bg-illu_thinker::before { -webkit-mask-image: url(../../img/icons/single_color/illu_thinker.svg); mask-image: url(../../img/icons/single_color/illu_thinker.svg); } .bg-illu_thought_balloon::before { -webkit-mask-image: url(../../img/icons/single_color/illu_thought_balloon.svg); mask-image: url(../../img/icons/single_color/illu_thought_balloon.svg); } .bg-illu_tickets::before { -webkit-mask-image: url(../../img/icons/single_color/illu_tickets.svg); mask-image: url(../../img/icons/single_color/illu_tickets.svg); } .bg-illu_travel_pin::before { -webkit-mask-image: url(../../img/icons/single_color/illu_travel_pin.svg); mask-image: url(../../img/icons/single_color/illu_travel_pin.svg); } .bg-illu_trees_2::before { -webkit-mask-image: url(../../img/icons/single_color/illu_trees_2.svg); mask-image: url(../../img/icons/single_color/illu_trees_2.svg); } .bg-illu_trees::before { -webkit-mask-image: url(../../img/icons/single_color/illu_trees.svg); mask-image: url(../../img/icons/single_color/illu_trees.svg); } .bg-illu_tv::before { -webkit-mask-image: url(../../img/icons/single_color/illu_tv.svg); mask-image: url(../../img/icons/single_color/illu_tv.svg); } .bg-illu_tzatziki::before { -webkit-mask-image: url(../../img/icons/single_color/illu_tzatziki.svg); mask-image: url(../../img/icons/single_color/illu_tzatziki.svg); } .bg-illu_upside_down_face::before { -webkit-mask-image: url(../../img/icons/single_color/illu_upside_down_face.svg); mask-image: url(../../img/icons/single_color/illu_upside_down_face.svg); } .bg-illu_van::before { -webkit-mask-image: url(../../img/icons/single_color/illu_van.svg); mask-image: url(../../img/icons/single_color/illu_van.svg); } .bg-illu_vase::before { -webkit-mask-image: url(../../img/icons/single_color/illu_vase.svg); mask-image: url(../../img/icons/single_color/illu_vase.svg); } .bg-illu_volleyball::before { -webkit-mask-image: url(../../img/icons/single_color/illu_volleyball.svg); mask-image: url(../../img/icons/single_color/illu_volleyball.svg); } .bg-illu_walking_sticks::before { -webkit-mask-image: url(../../img/icons/single_color/illu_walking_sticks.svg); mask-image: url(../../img/icons/single_color/illu_walking_sticks.svg); } .bg-illu_waving_hand::before { -webkit-mask-image: url(../../img/icons/single_color/illu_waving_hand.svg); mask-image: url(../../img/icons/single_color/illu_waving_hand.svg); } .bg-illu_wedding_rings::before { -webkit-mask-image: url(../../img/icons/single_color/illu_wedding_rings.svg); mask-image: url(../../img/icons/single_color/illu_wedding_rings.svg); } .bg-illu_wellness::before { -webkit-mask-image: url(../../img/icons/single_color/illu_wellness.svg); mask-image: url(../../img/icons/single_color/illu_wellness.svg); } .bg-illu_windsurf_boards::before { -webkit-mask-image: url(../../img/icons/single_color/illu_windsurf_boards.svg); mask-image: url(../../img/icons/single_color/illu_windsurf_boards.svg); } .bg-illu_wine_glasses::before { -webkit-mask-image: url(../../img/icons/single_color/illu_wine_glasses.svg); mask-image: url(../../img/icons/single_color/illu_wine_glasses.svg); } .bg-illu_wine::before { -webkit-mask-image: url(../../img/icons/single_color/illu_wine.svg); mask-image: url(../../img/icons/single_color/illu_wine.svg); } .bg-illu_wallet::before { -webkit-mask-image: url(../../img/icons/single_color/illu_wallet.svg); mask-image: url(../../img/icons/single_color/illu_wallet.svg); } .bg-illu_world::before { -webkit-mask-image: url(../../img/icons/single_color/illu_world.svg); mask-image: url(../../img/icons/single_color/illu_world.svg); } .icon-photo::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_photo.svg"); mask-image: url("../../img/icons/single_color/icon_photo.svg"); } .icon-lock::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_lock.svg"); mask-image: url("../../img/icons/single_color/icon_lock.svg"); } .icon-cam::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_cam.svg"); mask-image: url("../../img/icons/single_color/icon_cam.svg"); } .icon-male-female::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_male_female.svg"); mask-image: url("../../img/icons/single_color/icon_male_female.svg"); } .icon-halfling_search::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_search.svg"); mask-image: url("../../img/icons/single_color/icon_search.svg"); } .icon-settings::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_tools.svg"); mask-image: url("../../img/icons/single_color/icon_tools.svg"); } .icon-user::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_user_uni_200_filled.svg"); mask-image: url("../../img/icons/single_color/icon_user_uni_200_filled.svg"); } .icon-play::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_play.svg"); mask-image: url("../../img/icons/single_color/icon_play.svg"); } .icon-speakbubbles::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_message_bubbles.svg"); mask-image: url("../../img/icons/single_color/icon_message_bubbles.svg"); } .icon-book-checkmark::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_book_checkmark.svg"); mask-image: url("../../img/icons/single_color/icon_book_checkmark.svg"); } .icon-compass::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_compass.svg"); mask-image: url("../../img/icons/single_color/icon_compass.svg"); } .icon-compatibility::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_compatibility.svg"); mask-image: url("../../img/icons/single_color/icon_compatibility.svg"); } .icon-love-couple::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_love_couple.svg"); mask-image: url("../../img/icons/single_color/icon_love_couple.svg"); } .icon-gift::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_gift.svg"); mask-image: url("../../img/icons/single_color/icon_gift.svg"); } .icon-magazin::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_magazin.svg"); mask-image: url("../../img/icons/single_color/icon_magazin.svg"); } .icon-bulb::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_bulb.svg"); mask-image: url("../../img/icons/single_color/icon_bulb.svg"); } .icon-office-building::before { content: "" !important; margin-right: 8px; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; background-color: var(--COLOR_supportDark_300); -webkit-mask-image: url("../../img/icons/single_color/icon_office_building.svg"); mask-image: url("../../img/icons/single_color/icon_office_building.svg"); } :root { --boxShadow_small: 0 3px 8px 1px rgb(0 0 0 / 20%); --boxShadow_mid: 0 5px 14px 2px rgb(0 0 0 / 20%); --boxShadow_large: 0 9px 26px 2px rgb(0 0 0 / 30%); --boxShadow_extra_large: 0 5px 80px 2px rgb(0 0 0 / 15%); } :root { --borderRadius_75: 10px; --borderRadius_100: 20px; --borderRadius_200: 32px; --borderRadius_rounded: 500px; --borderRadius_circle: 50%; --borderRadius_textfield: var(--borderRadius_75); --borderRadius_button: var(--borderRadius_rounded); } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :focus { outline: none; } :where(:not(:defined)) { display: none; } :where(:not(:defined)):where([jsless]) { display: block; } body { -webkit-font-smoothing: antialiased !important; } @media (pointer: coarse) { body { cursor: pointer; } } body .debugLayerOutput { position: absolute; top: 0; padding: 4px; overflow: scroll; width: 100%; height: 100%; font-size: 12px; z-index: 999; background-color: var(--COLOR_supportDark_600); margin-bottom: 8px; color: var(--COLOR_supportDark_100); } body .debugLayerOutput table { margin-top: 8px; border-collapse: collapse; } body .debugLayerOutput table tr td { border: 1px solid var(--COLOR_supportDark_500); padding: 1px 4px; } body #pageWrapper { overflow: hidden; } body strong { font-weight: 600; } body a:focus-visible, body button:focus-visible { outline: 2px dashed currentcolor; } .noDisplay { display: none !important; } .visuallyHidden { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } @media (max-width: 480px) { .hideInS { display: none !important; } } @media (min-width: 481px) and (max-width: 767px) { .hideInM { display: none !important; } } @media (min-width: 768px) and (max-width: 979px) { .hideInL { display: none !important; } } @media (min-width: 980px) { .hideInXL { display: none !important; } } @media (max-width: 480px) { .hideInSM { display: none !important; } } @media (min-width: 481px) and (max-width: 767px) { .hideInSM { display: none !important; } } @media (min-width: 768px) and (max-width: 979px) { .hideInLXL { display: none !important; } } @media (min-width: 980px) { .hideInLXL { display: none !important; } } #postscribeTracking, #affiliate_tracking, #webtracking { display: none; } @media print { .hidden-print { display: none !important; } } .fromIap { padding: 20px; } .fromIap h1 { font: var(--FONT_highlight_200); } .fromIap p { font: var(--FONT_default_100); } .photo img, img.photo, #bgImgBox img { pointer-events: none !important; } #techErrorMessages { display: block !important; position: absolute; top: 0; width: 100%; } #errorOnMediaServer { display: none !important; } .topInfoBar { display: none; position: relative; z-index: 1000; width: 100%; margin: 0 auto; border-top: 5px solid #ef5602; border-bottom: 5px solid #000; background-color: #fff; background-attachment: fixed; } .topInfoBar .textWrapper { padding-top: 15px; padding-bottom: 15px; padding-left: 30px; } .topInfoBar .textWrapper p { color: #000; font: var(--FONT_highlight_75); margin: 0; } @media only screen and (min-width: 768px) { .topInfoBar .textWrapper p { font: var(--FONT_highlight_100); } } .topInfoBar .textWrapper p.withWarning::before .wdk-icon.icon_warning { vertical-align: bottom; fill: #ef5602; } .topInfoBar .textWrapper p a { color: var(--COLOR_primary_100); } .topInfoBar a.buttonStyle { border: 1px solid #8a8a8a; border-radius: var(--borderRadius_75); background-color: #dadada; padding: 13px 15px; color: #000; font: var(--FONT_default_75); text-decoration: none; display: inline-block; } .topInfoBar a.buttonStyle::before { font: var(--FONT_highlight_300); vertical-align: -16%; } .topInfoBar a.buttonStyle:hover { background-color: #fff; } .topInfoBar a.buttonStyle:active { background-color: #dadada; } .topInfoBar .hideInfoBar { cursor: pointer; position: absolute; right: 6%; top: 12px; display: block; font: var(--FONT_highlight_300); color: #66666b; text-decoration: none; } .topInfoBar .hideInfoBar .wdk-icon { width: 20px; height: 20px; } .no-cookies #cookieError { display: block !important; } #JSError { display: block; } #JSError .withWarning .wdk-icon.icon_warning { vertical-align: bottom; } .legacybrowser #legacyBrowser { display: block !important; } .legacybrowser #legacyBrowser .textWrapper { padding: 8px 60px 0 12px; margin: 0 auto; max-width: 980px; } .legacybrowser #legacyBrowser .textWrapper::after { content: ""; display: table; clear: both; } .legacybrowser #legacyBrowser .hideInfoBar { right: 12px; } .legacybrowser #legacyBrowser .withWarning { position: relative; padding-left: 44px; margin-bottom: 16px; font: var(--FONT_default_50); } @media only screen and (min-width: 768px) { .legacybrowser #legacyBrowser .withWarning { font: var(--FONT_default_75); } } .legacybrowser #legacyBrowser .withWarning .wdk-icon.icon_warning { vertical-align: bottom; fill: var(--COLOR_alertWarning_100); } .legacybrowser #legacyBrowser .withWarning strong { font-weight: bold; } .legacybrowser #legacyBrowser .browserButtons { text-align: center; margin: 0 0 12px 0; padding: 0; } .legacybrowser #legacyBrowser .browserButtons::after { content: ""; display: table; clear: both; } .legacybrowser #legacyBrowser .browserButtons li { display: inline-block; margin: 0 4px; } .legacybrowser #legacyBrowser .browserButtons li a { line-height: 1.1em; text-align: left; padding: 8px 8px; } .legacybrowser #legacyBrowser .browserButtons li a span { display: inline-block; } .legacybrowser #legacyBrowser .browserButtons li a .browsericon { width: 33px; height: 33px; margin-right: 8px; background-repeat: no-repeat; } .legacybrowser #legacyBrowser .browserButtons li a.chrome .browsericon { background-image: url("../../img/browser_chrome.png"); } .legacybrowser #legacyBrowser .browserButtons li a.firefox .browsericon { background-image: url("../../img/browser_firefox.png"); } .legacybrowser #legacyBrowser .browserButtons li a.ie { display: none; } @media only screen and (min-width: 768px) { .legacybrowser #legacyBrowser .browserButtons li a.ie { display: inline-block; } } .legacybrowser #legacyBrowser .browserButtons li a.ie .browsericon { background-image: url("../../img/browser_edge.png"); } #errorModalboxSessionExpired { text-align: center; } #errorModalboxSessionExpired .scrollingContent { overflow: hidden; } #errorModalboxSessionExpired i { display: block; margin: 0 auto; width: 30px; height: 30px; overflow: hidden; font: var(--FONT_highlight_300); } #offlineError { position: fixed; display: flex; bottom: 0; margin: 8px; width: calc(100% - 16px); background-color: var(--COLOR_supportDark_090); z-index: 1000; padding: 8px 16px; text-align: center; font: var(--FONT_default_75); color: var(--COLOR_supportLight_100); box-shadow: var(--boxShadow_mid); } @keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-5px, 0, 0); } 40%, 60% { transform: translate3d(5px, 0, 0); } } #offlineError.attention p { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } #offlineError p { width: 100%; margin: 0; } html.is-offline .js-onlineOnly { filter: blur(2px) saturate(0); } #lieFiNotification { position: fixed; display: flex; justify-content: space-between; align-items: center; bottom: 0; margin: 8px; width: calc(100% - 16px); background-color: var(--COLOR_supportDark_090); z-index: 1000; padding: 0 16px; text-align: center; font: var(--FONT_default_75); color: var(--COLOR_supportLight_100); box-shadow: var(--boxShadow_mid); } #lieFiNotification p { margin-right: 16px; } html.is-inPWA body { overscroll-behavior-y: none; -webkit-user-select: none; user-select: none; touch-action: pan-y pan-x; } html.is-inPWA body p, html.is-inPWA body a { -webkit-user-drag: none; } #counter #countdownStatic { text-align: center; font: var(--FONT_default_200); } #pageWrapper { min-height: 100vh; display: flex; flex-direction: column; } #pageWrapper #content { flex: 1 0 auto; } peg-footer { width: 100%; background-color: rgba(0, 0, 0, 0); padding: 16px 8px; margin-top: 12px; overflow: auto; font: var(--FONT_default_50); line-height: 24px; color: var(--COLOR_defaultText); text-align: center; } peg-footer nav { margin: 0; } peg-footer nav ul { margin: 0; padding: 0; list-style: none; font-size: 0; } peg-footer nav ul li { display: inline-block; padding: 0 9px 0 0; font: var(--FONT_default_50); } peg-footer nav ul li::before { content: "·"; padding-right: 6px; color: var(--COLOR_supportDark_300); font: var(--FONT_highlight_200); vertical-align: -4px; } peg-footer nav ul li:first-child::before { display: none; } peg-footer nav ul li:last-child { padding-right: 0; } peg-footer nav ul li a { color: var(--COLOR_supportDark_100); text-decoration: none; } peg-footer nav ul li a:hover { text-decoration: underline; } peg-footer nav ul li a sup.updated::after { content: "Updated"; padding: 0 4px 0 2px; border-radius: var(--borderRadius_rounded); text-align: center; background-color: var(--COLOR_alertError_100); color: var(--COLOR_supportLight_100); font-size: 9px; } @media only screen and (min-width: 768px) { peg-footer nav ul li a sup.updated::after { margin-left: 4px; } } peg-footer .copyrightText { color: var(--COLOR_supportDark_300); margin: 20px 0 0 0; } peg-footer .trustWrapper { margin-top: 8px; } peg-footer .trustWrapper .trustLogo { display: inline-flex; align-items: center; padding: 4px 8px 4px 10px; border: 1px solid var(--COLOR_supportDark_070); border-radius: var(--borderRadius_75); } peg-footer .trustWrapper .trustLogo img { display: inline-block; margin-left: 12px; } peg-footer[skin="primaryDark"] { color: var(--COLOR_supportLight_100); background-color: var(--COLOR_primary_100_dark); } peg-footer[skin="primaryDark"] nav ul li a, peg-footer[skin="primaryDark"] nav ul li::before, peg-footer[skin="primaryDark"] .copyrightText { color: var(--COLOR_supportLight_100); } peg-footer[skin="lightgray"] { background-color: var(--COLOR_supportDark_040); } @media only screen and (min-width: 768px) { peg-footer[skin="lightgray"] nav ul li.logout { display: none; } } peg-footer[skin="oldRegistrationCheckout"] { color: var(--COLOR_supportLight_100); background-color: var(--COLOR_supportDark_050); } peg-footer[skin="oldRegistrationCheckout"] nav ul li a, peg-footer[skin="oldRegistrationCheckout"] nav ul li::before, peg-footer[skin="oldRegistrationCheckout"] .copyrightText { color: var(--COLOR_supportLight_100); } .editModalLayer:not(#editBackgroundImage).has-hintboxShown header { margin-bottom: 12px; } .editModalLayer:not(#editBackgroundImage).has-hintboxShown article { margin-top: 24px; } .editModalLayer:not(#editBackgroundImage) .scrollingContent { transition: padding 0.2s; } .editModalLayer:not(#editBackgroundImage) h2, .editModalLayer:not(#editBackgroundImage) header { position: relative; } .editModalLayer:not(#editBackgroundImage) h2 .editLayerHint, .editModalLayer:not(#editBackgroundImage) header .editLayerHint { position: absolute; top: 100%; left: 0; right: 0; display: flex; align-items: center; margin: 0; overflow: hidden; font-size: 0; line-height: 0; transition: max-height 0.2s linear, min-height 0.2s linear, opacity 0.2s linear; z-index: 1; } .editModalLayer:not(#editBackgroundImage) h2 .editLayerHint .wdk-icon, .editModalLayer:not(#editBackgroundImage) header .editLayerHint .wdk-icon { width: 0; height: 0; fill: var(--COLOR_alertError_100); position: absolute; left: 8px; top: 5px; bottom: 0; } .editModalLayer:not(#editBackgroundImage) h2 .editLayerHint.is-visible, .editModalLayer:not(#editBackgroundImage) header .editLayerHint.is-visible { min-height: 36px; max-height: 200px; opacity: 1; padding: 6px 6px 6px 39px; font: var(--FONT_default_50); } .editModalLayer:not(#editBackgroundImage) h2 .editLayerHint.is-visible .wdk-icon, .editModalLayer:not(#editBackgroundImage) header .editLayerHint.is-visible .wdk-icon { width: 24px; height: 24px; } .editModalLayer:not(#editBackgroundImage) h2 .editLayerHint.t-success, .editModalLayer:not(#editBackgroundImage) header .editLayerHint.t-success { background-color: var(--COLOR_alertSuccess_100); color: var(--COLOR_supportLight_100); } .editModalLayer:not(#editBackgroundImage) h2 .editLayerHint.t-success .wdk-icon, .editModalLayer:not(#editBackgroundImage) header .editLayerHint.t-success .wdk-icon { fill: var(--COLOR_supportLight_100); } .editModalLayer:not(#editBackgroundImage) h2 .editLayerHint.t-error, .editModalLayer:not(#editBackgroundImage) header .editLayerHint.t-error { background-color: var(--COLOR_alertError_200); color: var(--COLOR_alertError_100); } section.wdk-cardDeck { border-radius: var(--borderRadius_100); background-color: var(--COLOR_supportLight_100); max-width: 1024px; margin: 0 auto; border: 0; padding: 24px 24px 0 24px; box-shadow: var(--boxShadow_small); overflow: auto; width: 100%; flex-grow: 1; } @media (min-width: 0) and (max-width: 767px) { section.wdk-cardDeck { border-radius: 0; } } @media only screen and (min-width: 980px) { section.wdk-cardDeck { padding: 32px 32px 0 32px; } } @media only screen and (min-width: 768px) { section.wdk-cardDeck:not(.t-oneColumn) { display: grid; grid-column-gap: 24px; grid-template-columns: minmax(346px, 1fr) 304px; } } @media only screen and (min-width: 980px) { section.wdk-cardDeck:not(.t-oneColumn) { grid-template-columns: minmax(368px, 1fr) 304px; } } @media only screen and (width >= 1024px) { section.wdk-cardDeck:not(.t-oneColumn) { grid-template-columns: minmax(0, 1fr) 304px; } } section.wdk-cardDeck header.cardDeckHeaderOutsideOfCards { display: flex; flex-direction: row; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 481px) { section.wdk-cardDeck header.cardDeckHeaderOutsideOfCards { margin-bottom: 24px; } } section.wdk-cardDeck header.cardDeckHeaderOutsideOfCards h2 { flex-grow: 1; font: var(--FONT_highlight_100); color: var(--COLOR_primary_100); word-break: break-word; } section.wdk-cardDeck .wdk-card { display: grid; margin: 0 0 48px 0; } @media only screen and (min-width: 768px) { section.wdk-cardDeck .wdk-card { padding: 20px; border-radius: var(--borderRadius_100); border: solid 10px var(--COLOR_supportDark_600); margin: 4px 0 20px 0; } } @media only screen and (min-width: 980px) { section.wdk-cardDeck .wdk-card { margin: 4px 0 32px 0; } } section.wdk-cardDeck .wdk-card.t-noBorder { padding: 0; margin: 0 0 48px 0; border-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); border-radius: 0; overflow: initial; } @media only screen and (min-width: 768px) { section.wdk-cardDeck .wdk-card.t-noBorder { border: 0; margin: 4px 0 20px 0; } } @media only screen and (min-width: 980px) { section.wdk-cardDeck .wdk-card.t-noBorder { margin: 4px 0 32px 0; } } section.wdk-cardDeck .wdk-card.t-noCardDesign { padding: 0; margin: 0; border: 0; background-color: rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; overflow: initial; } section.wdk-cardDeck .wdk-card > h1, section.wdk-cardDeck .wdk-card > h2 { padding-bottom: 24px; color: var(--COLOR_supportDark_300); font: var(--FONT_default_75); text-transform: uppercase; } section.wdk-cardDeck .wdk-card > h3, section.wdk-cardDeck .wdk-card > h4 { font: var(--FONT_highlight_75); margin: 0 0 8px 0; } section.wdk-cardDeck .wdk-card > p { margin: 0 0 16px 0; } html.has-modalboxOpen { height: 100vh; overflow-y: initial; } html.has-modalboxOpen body { width: 100%; overflow: hidden; } html.has-modalboxOpen body #pageWrapper { filter: blur(16px); } .wdk-modalbox { position: fixed; top: 0; left: 0; display: flex; overflow: hidden; width: 0; height: 0; justify-content: center; } @media only screen and (min-width: 768px) { .wdk-modalbox { align-items: center; } } .wdk-modalbox::before { content: ""; display: block; position: fixed; inset: 0 0 0 0; z-index: -1; width: 0; height: 0; will-change: opacity; opacity: 0; background-color: var(--COLOR_supportDark_080); } .wdk-modalbox.is-open { z-index: 210; overflow: visible; width: 100%; height: 100%; } .wdk-modalbox.is-open::before { width: 100%; height: 100%; opacity: 1; } @media only screen and (min-width: 768px) { .wdk-modalbox.is-open::before { transition: opacity 200ms ease-out; } } @media only screen and (max-width: 767px) { .wdk-modalbox.is-open.is-bottomDrawer { width: 100%; height: 100%; margin-top: 0; align-items: flex-end; justify-content: center; } .wdk-modalbox.is-open.is-bottomDrawer .modalboxContent { max-width: 540px; max-height: 90vh; height: auto; margin-left: 0; margin-right: 0; border-radius: 0; } } .wdk-modalbox.is-open.has-smallContent { margin-top: 0; width: 100%; height: 100%; align-items: center; justify-content: center; } .wdk-modalbox.is-open.has-smallContent .modalboxContent { max-width: 540px; max-height: 90vh; margin-left: 16px; margin-right: 16px; height: auto; border-radius: var(--borderRadius_100); } .wdk-modalbox.is-open.has-fullBgImage .modalboxContent { background-size: cover; color: var(--COLOR_supportLight_100); } .wdk-modalbox.is-open.has-fullBgImage .modalboxContent h3 { color: var(--COLOR_supportLight_100); } .wdk-modalbox.is-open.transition-in .modalboxContent { opacity: 1; } @media only screen and (min-width: 768px) { .wdk-modalbox.is-open.transition-in .modalboxContent { transform: scale(1) translate(0); } } .wdk-modalbox.is-open.transition-out .modalboxContent { opacity: 0; } @media only screen and (min-width: 768px) { .wdk-modalbox.is-open.transition-out .modalboxContent { transform: scale(0.8) translateY(50%); } } .wdk-modalbox.t-success header h3 { color: var(--COLOR_alertSuccess_100); } .wdk-modalbox .modalboxContent { position: relative; width: 100%; height: 100%; opacity: 0; display: flex; flex-direction: column; background-color: var(--COLOR_supportLight_100); overflow: hidden; transition: opacity 150ms ease-out; } .ios .wdk-modalbox .modalboxContent { overflow: scroll; -webkit-overflow-scrolling: touch; } .ios .wdk-modalbox .modalboxContent article { flex-grow: initial; } @media only screen and (min-width: 768px) { .wdk-modalbox .modalboxContent { height: auto; max-height: 90vh; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transform: scale(0.8) translateY(50%); will-change: transform; width: 100%; max-width: 560px; border-radius: var(--borderRadius_100); } } .wdk-modalbox .modalboxContent header h3 { display: inline-block; margin: 0; padding: 12px 8px 0 12px; font: var(--FONT_default_200); color: var(--COLOR_defaultText); width: calc(100% - 34px); } @media only screen and (min-width: 481px) { .wdk-modalbox .modalboxContent header h3 { padding: 18px 8px 14px 20px; } } .wdk-modalbox .modalboxContent article { position: relative; display: flex; flex-direction: column; flex-grow: 1; padding: 12px; max-width: calc(100% - 34px); -webkit-overflow-scrolling: touch; } @media only screen and (min-width: 481px) { .wdk-modalbox .modalboxContent article { padding: 20px; } } .wdk-modalbox .modalboxContent article p { margin: 0 0 16px 0; } .wdk-modalbox .modalboxContent article p:last-child { margin: 0; } .wdk-modalbox .modalboxContent header + article { max-width: 100%; } @media only screen and (max-width: 767px) { .wdk-modalbox .modalboxContent header + footer { margin-top: 24px; } } .wdk-modalbox .modalboxContent footer { display: flex; width: 100%; min-height: 44px; padding: 8px 4px; align-items: center; justify-content: center; background-color: var(--COLOR_supportLight_100); flex-shrink: 0; } @media only screen and (min-width: 481px) { .wdk-modalbox .modalboxContent footer { padding: 20px 10px; } } .wdk-modalbox .modalboxContent footer .buttonsContainer { width: 100%; display: flex; flex-flow: wrap; justify-content: space-between; margin: 0; padding: 0; } .wdk-modalbox .modalboxContent footer .buttonsContainer .buttonItem { flex-basis: calc(40% - 20px); flex-grow: 1; list-style: none; text-align: center; vertical-align: top; margin: 2px 0; padding: 0 10px; } .wdk-modalbox .modalboxContent footer .buttonsContainer .buttonItem .wdk-button { width: 100%; } .wdk-modalbox .modalboxContent .layerInModalbox { display: none; position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; z-index: 11; justify-content: center; align-items: center; background-color: var(--COLOR_supportDark_050); } .wdk-modalbox .modalboxContent .layerInModalbox.is-open { display: flex; } .wdk-modalbox .modalboxContent .layerInModalbox .layerContent { width: calc(100% - 32px); height: auto; background-color: var(--COLOR_supportLight_100); flex: none; text-align: left; border-radius: var(--borderRadius_100); box-shadow: var(--boxShadow_mid); } @media only screen and (min-width: 768px) { .wdk-modalbox .modalboxContent .layerInModalbox .layerContent { width: 70%; overflow: hidden; } } .wdk-modalbox .modalboxContent .layerInModalbox .layerContent footer { padding: 16px 16px 32px 16px; background-color: rgba(0, 0, 0, 0); } .wdk-modalbox .wdk-button.closeX { position: absolute; top: 16px; right: 16px; z-index: 230; } .wdk-modalbox .wdk-button.closeX.t-plainHighlightSkin4 { background-color: var(--COLOR_supportDark_600); padding: 0; border: 2px solid rgba(0, 0, 0, 0); border-radius: 30px; height: 32px; width: 32px; } .wdk-modalbox .wdk-button.closeX.t-plainHighlightSkin4 .icon { margin-right: 0; } .wdk-modalbox .wdk-button.closeX.t-plainHighlightSkin4 .icon svg { width: 14px; height: 14px; fill: var(--COLOR_supportDark_400); } .wdk-modalbox.is-opaque.is-open > .wdk-button.closeX { display: block; } .wdk-modalbox.is-opaque > .wdk-button.closeX { display: none; position: fixed; top: 12px; right: 12px; color: #fff; } .wdk-modalbox.is-opaque > .wdk-button.closeX.t-plainHighlightSkin4 { background-color: rgba(0, 0, 0, 0); } @media only screen and (min-width: 768px) { .wdk-modalbox.is-opaque > .wdk-button.closeX { top: 20px; right: 20px; } } .wdk-modalbox.is-opaque > .wdk-button.closeX .icon { margin-right: 0; } .wdk-modalbox.is-opaque > .wdk-button.closeX .icon .wdk-icon.icon_x { fill: var(--COLOR_supportLight_100); width: 32px; height: 32px; } .wdk-modalbox.is-opaque.is-open div.modalboxContent { background-color: rgba(0, 0, 0, 0); color: var(--COLOR_supportLight_100); } @media only screen and (max-width: 767px) { .wdk-modalbox.is-opaque.is-open div.modalboxContent { max-height: calc(100% - 62px); margin-top: 50px; margin-bottom: 12px; } } .wdk-modalbox.is-opaque footer { background-color: rgba(0, 0, 0, 0); } .wdk-modalbox.skipIntroAnimation.is-open::before { transition: none; transform: none; } .wdk-modalbox.skipIntroAnimation.transition-in .modalboxContent { transition: none; transform: none; } .wdk-modalbox.skipOutroAnimation.is-open::before { transition: none; transform: none; } .wdk-modalbox.skipOutroAnimation.transition-out .modalboxContent { transition: none; transform: none; } body::before { content: ""; display: block; position: fixed; opacity: 0; inset: 0 0 0 0; width: 0; height: 0; z-index: 110; background-color: var(--COLOR_supportDark_080); transition: opacity 0.3s, width 0.3s step-end, height 0.3s step-end; } body.has-openBottomsheet { overscroll-behavior-y: contain; position: fixed; overflow: hidden; width: 100%; } body.has-openBottomsheet::before { opacity: 1; width: 100%; height: 100%; transition: opacity 0.3s, width 0.3s step-start, height 0.3s step-start; } body.has-openBottomsheet #pageWrapper { filter: blur(16px); } .bottomSheet { position: fixed; bottom: 0; width: 100%; max-width: 600px; height: 85vh; border-top-left-radius: var(--borderRadius_100); border-top-right-radius: var(--borderRadius_100); transition: transform 0.3s ease-in-out 0s; -webkit-user-select: none; user-select: none; z-index: -1; background-color: var(--COLOR_supportLight_100); transform: translateY(100%); } @media only screen and (min-width: 481px) { .bottomSheet { overflow: hidden; top: -200vh; left: calc(50% - 300px); border-radius: var(--borderRadius_100); opacity: 0; } } .bottomSheet[inert] { position: fixed !important; } .bottomSheet.is-open { transform: translateY(0); z-index: 120; } @media only screen and (min-width: 481px) { .bottomSheet.is-open { top: calc(50% - 42.5vh); opacity: 1; transition: top 0.3s step-start, opacity 0.3s; transform: initial; } } .bottomSheet.is-moving { transition: none; } .bottomSheet.is-closing { transform: translateY(100%); } @media only screen and (min-width: 481px) { .bottomSheet.is-closing { top: -200vh; opacity: 0; transition: top 0.3s step-end, opacity 0.3s; } } .ios .bottomSheet { height: 80vh; } .ios .bottomSheet.has-keyboardVisible { height: 52vh; } .bottomSheet .grabBar { cursor: grab; width: 100%; padding: 4px; z-index: 2; position: relative; } @media only screen and (min-width: 481px) { .bottomSheet .grabBar { display: none; } } .bottomSheet .grabBar::after { content: ""; position: absolute; width: 100%; height: 60px; top: 0; left: 0; } .bottomSheet .grabBar .grabIndicator { height: 4px; width: 32px; margin: 0 auto; border-radius: var(--borderRadius_75); background-color: var(--COLOR_supportDark_500); } .bottomSheet .wdk-button.closeButton { position: absolute; top: 16px; right: 16px; z-index: 230; } .bottomSheet .wdk-button.closeButton.t-primarySkin4 { background-color: var(--COLOR_supportDark_600); } .bottomSheet .wdk-button.closeButton.t-primarySkin4 .icon svg { width: 14px; height: 14px; fill: var(--COLOR_supportDark_400); } .bottomSheet .bottomSheetInner { height: calc(100% - 12px); } @media only screen and (min-width: 481px) { .bottomSheet .bottomSheetInner { height: 100%; } } .formGroupText { display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 20px; } .formGroupText .wdk-form-text { padding-bottom: 0; } .formGroupText label { display: flex; align-items: center; width: 100%; font: var(--FONT_default_75); color: var(--COLOR_supportDark_100); white-space: normal; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; padding-right: 20px; } @media only screen and (min-width: 481px) { .formGroupText label { white-space: nowrap; } } .formGroupText label .mandatory { margin-right: 4px; position: relative; vertical-align: unset; top: 0; font: var(--FONT_default_100); align-self: flex-start; line-height: 17px; } .formGroupText label.t-icon::before { float: left; margin-top: 3px; margin-right: 3px; } .formGroupText .infoText { display: block; width: 100%; padding: 4px 0; font: var(--FONT_default_75); color: var(--COLOR_alertInfo_100); } .wdk-form-text { position: relative; display: block; padding-bottom: 20px; } .wdk-form-text .designWrapper { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; display: flex; flex-wrap: wrap; -webkit-user-select: none; user-select: none; position: relative; text-align: left; width: 100%; } .wdk-form-text .designWrapper .infoLink { position: absolute; display: block; top: -4px; right: 0; font-size: 20px; color: var(--COLOR_alertInfo_100); z-index: 1; text-decoration: none; } .wdk-form-text .designWrapper .infoLink + label { padding-right: 24px; } .no-touchevents .wdk-form-text .designWrapper .infoLink:hover { text-decoration: none; } .wdk-form-text .designWrapper .infoLink::before { width: 18px; height: 18px; } .wdk-form-text label { display: flex; align-items: center; width: 100%; font: var(--FONT_default_75); color: var(--COLOR_supportDark_100); white-space: normal; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; padding-right: 20px; } @media only screen and (min-width: 481px) { .wdk-form-text label { white-space: nowrap; } } .wdk-form-text label .mandatory { margin-right: 4px; position: relative; vertical-align: unset; top: 0; font: var(--FONT_default_100); align-self: flex-start; line-height: 17px; } .wdk-form-text label.t-icon::before { float: left; margin-right: 4px; } .wdk-form-text label.t-icon .wdk-icon { width: 14px; height: 14px; margin-right: 4px; } .wdk-form-text .inputWrapper { position: relative; width: 100%; } .wdk-form-text .inputWrapper textarea, .wdk-form-text .inputWrapper input { position: relative; display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 8px; border: 2px solid var(--COLOR_supportDark_070); border-radius: var(--borderRadius_75); appearance: none; background: var(--COLOR_supportLight_100); font: var(--FONT_default_100); color: var(--COLOR_supportDark_100); transition: border-color 0.2s; } .wdk-form-text .inputWrapper textarea:focus-visible, .wdk-form-text .inputWrapper input:focus-visible { border-color: var(--COLOR_supportDark_090); } .wdk-form-text .inputWrapper textarea::placeholder, .wdk-form-text .inputWrapper input::placeholder { color: var(--COLOR_supportDark_400); } .wdk-form-text .inputWrapper textarea[disabled], .wdk-form-text .inputWrapper textarea[readonly], .wdk-form-text .inputWrapper input[disabled], .wdk-form-text .inputWrapper input[readonly] { color: var(--COLOR_supportDark_050); border-color: var(--COLOR_supportDark_050); } .wdk-form-text .inputWrapper textarea[type="number"], .wdk-form-text .inputWrapper input[type="number"] { appearance: textfield; } .wdk-form-text .inputWrapper.t-icon .wdk-icon { position: absolute; top: 0; display: block; margin-top: 10px; margin-left: 12px; width: 22px; height: 22px; z-index: 1; transition: color 0.3s; pointer-events: none; fill: var(--COLOR_defaultText); } .wdk-form-text .inputWrapper.t-icon input { padding-left: 44px; } .wdk-form-text .inputWrapper textarea { line-height: 24px; padding: 9px 10px; resize: none; word-wrap: break-word; min-height: 166px; height: 100%; } .ios .wdk-form-text .inputWrapper textarea { overflow: scroll; } @media only screen and (min-width: 768px) { .ios .wdk-form-text .inputWrapper textarea { min-height: 200px; } } .wdk-form-text .inputWrapper .limitReachedInfo { top: 0; left: -2px; width: 1px; height: 1px; position: absolute; overflow: hidden; } .wdk-form-text .inputWrapper .charCounter { display: none; } .wdk-form-text .infoText { display: block; width: 100%; padding: 4px 8px; font: var(--FONT_default_75); color: var(--COLOR_alertInfo_100); } .wdk-form-text wdk-approval-tag { margin-top: 8px; } .wdk-form-text.has-error input, .wdk-form-text.has-error textarea, .wdk-form-text:has(wdk-hintbox-error[show]) input, .wdk-form-text:has(wdk-hintbox-error[show]) textarea { border-color: var(--COLOR_alertError_100); } .wdk-form-text.has-hiddenLabel label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .wdk-form-text.has-fullHeight { flex-grow: 1; } .wdk-form-text.has-fullHeight .designWrapper { display: flex; flex-flow: column; height: 100%; } .wdk-form-text.has-fullHeight label, .wdk-form-text.has-fullHeight .wdk-styledHintBox { flex-shrink: 0; } .wdk-form-text.has-fullHeight .inputWrapper { flex-grow: 1; } .wdk-form-text.is-nearLimit input, .wdk-form-text.is-nearLimit textarea { padding-right: 58px; } .wdk-form-text.is-nearLimit .charCounter { position: absolute; bottom: 2px; right: 2px; height: 40px; padding: 0 12px 0 24px; display: flex; align-items: center; color: var(--COLOR_alertSuccess_100); font: var(--FONT_default_75); } .wdk-form-text.is-limitReached .charCounter { color: var(--COLOR_alertError_100); } .wdk-form-toggles { position: relative; } .wdk-form-toggles input[type="checkbox"], .wdk-form-toggles input[type="radio"] { position: absolute; opacity: 0; } .wdk-form-toggles input[type="checkbox"] + label, .wdk-form-toggles input[type="radio"] + label { position: relative; display: inline-block; min-height: 48px; margin-left: -14px; padding-left: 48px; padding-top: 17px; cursor: pointer; } .wdk-form-toggles input[type="checkbox"] + label::before, .wdk-form-toggles input[type="radio"] + label::before { content: ""; position: absolute; left: 14px; top: 17px; width: 20px; height: 20px; background-color: var(--COLOR_supportLight_100); transition: border 0.15s linear; border: 2px solid var(--COLOR_supportDark_080); } .wdk-form-toggles input[type="checkbox"] + label::after, .wdk-form-toggles input[type="radio"] + label::after { content: ""; position: absolute; background-color: var(--COLOR_alertSuccess_100); opacity: 0; transition: all 0.15s linear; } .wdk-form-toggles input[type="checkbox"]:checked + label::before, .wdk-form-toggles input[type="radio"]:checked + label::before { border-color: var(--COLOR_alertSuccess_100); } .wdk-form-toggles input[type="checkbox"]:checked + label::after, .wdk-form-toggles input[type="radio"]:checked + label::after { opacity: 1; } .wdk-form-toggles input[type="checkbox"]:disabled + label, .wdk-form-toggles input[type="radio"]:disabled + label { color: var(--COLOR_supportDark_070); cursor: default; } .wdk-form-toggles input[type="checkbox"]:disabled + label::before, .wdk-form-toggles input[type="radio"]:disabled + label::before { border-color: var(--COLOR_supportDark_070); } .wdk-form-toggles input[type="checkbox"]:disabled + label::after, .wdk-form-toggles input[type="radio"]:disabled + label::after { background-color: var(--COLOR_supportDark_040); } .wdk-form-toggles input[type="checkbox"]:focus-visible + label::before, .wdk-form-toggles input[type="radio"]:focus-visible + label::before { outline: 2px dashed currentcolor; outline-offset: 2px; outline-offset: 1px; } .wdk-form-toggles input[type="radio"] { top: 17px; left: 4px; } .wdk-form-toggles input[type="radio"] + label::before { top: 17px; border-radius: 10px; } .wdk-form-toggles input[type="radio"] + label::after { top: 22px; left: 19px; width: 10px; height: 10px; border-radius: var(--borderRadius_circle); } .wdk-form-toggles input[type="radio"]:checked:disabled + label::after { background-color: var(--COLOR_supportDark_100); opacity: 0.2; } .wdk-form-toggles input[type="checkbox"] { top: 20px; left: 4px; } .wdk-form-toggles input[type="checkbox"] + label::before { border-radius: 4px; } .wdk-form-toggles input[type="checkbox"] + label::after { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_check.svg); mask-image: url(../../img/icons/single_color/icon_check.svg); vertical-align: -3px; width: 18px; height: 18px; top: 18px; left: 15px; background-color: var(--COLOR_supportLight_100); padding-top: 1px; } .wdk-form-toggles input[type="checkbox"]:checked + label::before { background-color: var(--COLOR_alertSuccess_100); } .wdk-form-toggles input[type="checkbox"]:checked:disabled + label::before { border: 0; background-color: var(--COLOR_supportDark_070); } .wdk-form-toggles input[type="checkbox"]:checked:disabled + label::after { background-color: var(--COLOR_supportLight_100); } .wdk-form-toggles input[type="checkbox"].switch { position: absolute; opacity: 0; top: 24px; left: 27px; } .wdk-form-toggles input[type="checkbox"].switch + label { margin-left: 0; padding-top: 12px; outline: none; -webkit-user-select: none; user-select: none; } .wdk-form-toggles input[type="checkbox"].switch + label::before { padding: 2px; width: 36px; height: 14px; left: 6px; top: 20px; background: var(--COLOR_supportDark_100); opacity: 0.5; border: 0; transition: all 0.3s; border-radius: 14px; } .wdk-form-toggles input[type="checkbox"].switch + label::after { -webkit-mask-image: none; mask-image: none; content: ""; top: 17px; left: 3px; height: 20px; width: 20px; background-color: var(--COLOR_supportLight_100); border: 1px solid var(--COLOR_supportDark_090); opacity: 1; border-radius: 14px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .wdk-form-toggles input[type="checkbox"].switch:checked + label::before { background-color: var(--COLOR_alertSuccess_100); } .wdk-form-toggles input[type="checkbox"].switch:checked + label::after { margin-left: 22px; background-color: var(--COLOR_alertSuccess_100); border-color: var(--COLOR_alertSuccess_100); } .wdk-form-toggles input[type="checkbox"].switch:disabled + label::after { background-color: var(--COLOR_supportDark_600); border-color: var(--COLOR_supportDark_050); } .wdk-form-toggles input[type="checkbox"].switch:checked:disabled + label::before { background-color: var(--COLOR_alertSuccess_100); opacity: 0.25; } .wdk-form-toggles input[type="checkbox"].switch:checked:disabled + label::after { border-color: var(--COLOR_alertSuccess_100); } .formGroupDropdown { display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 20px; position: relative; } .formGroupDropdown label { display: flex; align-items: center; width: 100%; font: var(--FONT_default_75); color: var(--COLOR_supportDark_100); white-space: normal; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; padding-right: 20px; } @media only screen and (min-width: 481px) { .formGroupDropdown label { white-space: nowrap; } } .formGroupDropdown label .mandatory { margin-right: 4px; position: relative; vertical-align: unset; top: 0; font: var(--FONT_default_100); align-self: flex-start; line-height: 17px; } .formGroupDropdown label.t-icon { display: flex; align-items: center; } .formGroupDropdown label.t-icon::before { float: left; margin-top: 3px; margin-right: 3px; } .formGroupDropdown label.t-icon .wdk-icon { width: 14px; height: 14px; margin-right: 4px; } .formGroupDropdown .infoLink { position: absolute; display: block; top: -4px; right: 0; font-size: 20px; color: var(--COLOR_alertInfo_100); z-index: 1; text-decoration: none; } .formGroupDropdown .infoLink + label { padding-right: 24px; } .no-touchevents .formGroupDropdown .infoLink:hover { text-decoration: none; } .formGroupDropdown .infoLink::before { width: 18px; height: 18px; } .formGroupDropdown .infoText { display: block; width: 100%; padding: 4px 0; font: var(--FONT_default_75); color: var(--COLOR_alertInfo_100); } .formGroupDropdown .wdk-form-dropdown { padding-bottom: 0; } .wdk-form-dropdown { position: relative; padding-bottom: 20px; } .wdk-form-dropdown.has-error .designWrapper .selectWrapper select, .wdk-form-dropdown:has(wdk-hintbox-error[show]) .designWrapper .selectWrapper select { border-color: var(--COLOR_alertError_100); } .wdk-form-dropdown.has-hiddenLabel label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .wdk-form-dropdown.has-hiddenLabel label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .wdk-form-dropdown .designWrapper { display: flex; flex-wrap: wrap; } .wdk-form-dropdown .designWrapper label { display: flex; align-items: center; width: 100%; font: var(--FONT_default_75); color: var(--COLOR_supportDark_100); white-space: normal; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; padding-right: 20px; } @media only screen and (min-width: 481px) { .wdk-form-dropdown .designWrapper label { white-space: nowrap; } } .wdk-form-dropdown .designWrapper label .mandatory { margin-right: 4px; position: relative; vertical-align: unset; top: 0; font: var(--FONT_default_100); align-self: flex-start; line-height: 17px; } .wdk-form-dropdown .designWrapper label.t-icon { display: flex; align-items: center; } .wdk-form-dropdown .designWrapper label.t-icon::before { float: left; margin-top: 3px; margin-right: 3px; } .wdk-form-dropdown .designWrapper label.t-icon .wdk-icon { width: 14px; height: 14px; margin-right: 4px; } .wdk-form-dropdown .designWrapper .selectWrapper { position: relative; width: 100%; } .wdk-form-dropdown .designWrapper .selectWrapper::after { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); vertical-align: -3px; width: 14px; height: 14px; position: absolute; top: 15px; right: 8px; pointer-events: none; } .wdk-form-dropdown .designWrapper .selectWrapper select { appearance: none; height: 44px; width: 100%; padding: 0 32px 0 8px; border: 2px solid var(--COLOR_supportDark_070); border-radius: var(--borderRadius_75); background-color: var(--COLOR_supportLight_100); font: var(--FONT_default_100); color: var(--COLOR_defaultText); } .wdk-form-dropdown .designWrapper .selectWrapper select:focus-visible { border-color: var(--COLOR_supportDark_090); } .wdk-form-dropdown .infoText { display: block; width: 100%; padding: 4px 0; font: var(--FONT_default_75); color: var(--COLOR_alertInfo_100); } .wdk-form-dropdown .infoLink { position: absolute; display: block; top: -4px; right: 0; font-size: 20px; color: var(--COLOR_alertInfo_100); z-index: 1; text-decoration: none; } .wdk-form-dropdown .infoLink + label { padding-right: 24px; } .no-touchevents .wdk-form-dropdown .infoLink:hover { text-decoration: none; } .wdk-form-dropdown .infoLink::before { width: 18px; height: 18px; } .wdk-form-customDropdown { margin-bottom: 20px; overflow: hidden; } .wdk-form-customDropdown a { position: relative; display: block; padding: 10px 32px 10px 8px; min-height: 44px; border: 2px solid var(--COLOR_supportDark_070); border-radius: var(--borderRadius_75); background: rgba(0, 0, 0, 0); font: var(--FONT_default_100); color: var(--COLOR_defaultText); text-decoration: none; transition: border-color 0.2s; } .wdk-form-customDropdown a:hover, .wdk-form-customDropdown a:active { border-color: var(--COLOR_supportDark_070); text-decoration: none; } .wdk-form-customDropdown a::after { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); vertical-align: -3px; width: 14px; height: 14px; position: absolute; right: 8px; top: 15px; } .wdk-form-customDropdown.is-open a { border-color: var(--COLOR_supportDark_070); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .wdk-form-customDropdown.is-open a::after { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_up_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_up_regular.svg); vertical-align: -3px; width: 14px; height: 14px; position: absolute; right: 8px; top: 15px; } .wdk-form-customDropdown .selection { display: none; position: relative; padding-left: 0 !important; overflow: visible !important; font: var(--FONT_default_100); border: 2px solid var(--COLOR_supportDark_070); border-top: 0; border-bottom-left-radius: var(--borderRadius_75); border-bottom-right-radius: var(--borderRadius_75); } .wdk-form-customDropdown .selection::before { top: 0; } .wdk-form-customDropdown .selection::after { bottom: 0; } .wdk-form-customDropdown .selection li { position: relative; list-style-type: none; margin: 0; padding: 12px 10px; } .wdk-form-customDropdown .selection li:hover, .wdk-form-customDropdown .selection li.isKeyboardSelected { cursor: pointer; background-color: var(--COLOR_supportDark_040); } .wdk-form-customDropdown .selection li::after { content: ""; position: absolute; inset: 0 0 0 0; z-index: 1; display: block; } .wdk-form-customDropdown .selection li.selectedListItem { background-color: var(--COLOR_supportDark_050); } .wdk-form-customDropdown .selection li:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; } .wdk-form-customDropdown label { display: flex; align-items: center; width: 100%; font: var(--FONT_default_75); color: var(--COLOR_supportDark_100); white-space: normal; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; padding-right: 20px; } @media only screen and (min-width: 481px) { .wdk-form-customDropdown label { white-space: nowrap; } } .wdk-form-customDropdown label .mandatory { margin-right: 4px; position: relative; vertical-align: unset; top: 0; font: var(--FONT_default_100); align-self: flex-start; line-height: 17px; } .wdk-form-customDropdown label.t-icon { display: flex; align-items: center; } .wdk-form-customDropdown label.t-icon::before { float: left; margin-top: 3px; margin-right: 3px; } .wdk-form-customDropdown label.t-icon .wdk-icon { width: 12px; height: 12px; margin-right: 4px; } .wdk-form-autofillDropdown { position: relative; } .wdk-form-autofillDropdown .wdk-form-text .wdk_loadingIndicator .trippleDot { left: auto; right: 30px; } .wdk-form-autofillDropdown .autofillDropdownDatalist { position: absolute; z-index: 1; width: 100%; background: var(--COLOR_supportLight_100); max-height: 167px; overflow: hidden auto; top: 42px; } .wdk-form-autofillDropdown .autofillDropdownDatalist.is-open { border: 2px solid var(--COLOR_supportDark_090); border-top: 1px solid var(--COLOR_supportDark_090); border-bottom-left-radius: var(--borderRadius_75); border-bottom-right-radius: var(--borderRadius_75); } .wdk-form-autofillDropdown .autofillDropdownDatalist .selection { display: none; position: relative; padding-left: 0 !important; overflow: visible !important; font: var(--FONT_default_100); margin: 0; } .wdk-form-autofillDropdown .autofillDropdownDatalist .selection::before { top: 0; } .wdk-form-autofillDropdown .autofillDropdownDatalist .selection::after { bottom: 0; } .wdk-form-autofillDropdown .autofillDropdownDatalist .selection li { position: relative; list-style-type: none; margin: 0; padding: 12px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wdk-form-autofillDropdown .autofillDropdownDatalist .selection li:not(.noResult):hover, .wdk-form-autofillDropdown .autofillDropdownDatalist .selection li:not(.noResult).isKeyboardSelected { cursor: pointer; background-color: var(--COLOR_supportDark_040); } .wdk-form-autofillDropdown .autofillDropdownDatalist .selection li.noResult { cursor: not-allowed; } .wdk-form-autofillDropdown .autofillDropdownDatalist .selection li::after { content: ""; position: absolute; inset: 0 0 0 0; z-index: 1; display: block; } .wdk-button { position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 0 20px; font: var(--FONT_highlight_100); white-space: nowrap; cursor: pointer; text-decoration: none; opacity: 1; transition: opacity 0.3s 0.1s, background-color 0.2s, box-shadow 0.2s linear; box-shadow: var(--boxShadow_mid); height: 48px; border: 2px solid rgba(0, 0, 0, 0); background: var(--COLOR_supportDark_080); background-origin: border-box; border-radius: var(--borderRadius_button); color: var(--COLOR_supportLight_100); } .wdk-button::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 48px; margin-top: -2px; } .wdk-button.hover, .wdk-button:hover { text-decoration: none; } .wdk-button:active, .wdk-button.active { transition-duration: 0s; box-shadow: var(--boxShadow_small); } .wdk-button:disabled, .wdk-button:disabled:hover, .wdk-button:disabled:active, .wdk-button.disabled, .wdk-button.disabled:hover, .wdk-button.disabled:active { cursor: default; pointer-events: none; opacity: 0.4; } html:not(.ios, .macSafari) .wdk-button:disabled, html:not(.ios, .macSafari) .wdk-button:disabled:hover, html:not(.ios, .macSafari) .wdk-button:disabled:active, html:not(.ios, .macSafari) .wdk-button.disabled, html:not(.ios, .macSafari) .wdk-button.disabled:hover, html:not(.ios, .macSafari) .wdk-button.disabled:active { box-shadow: none; } .wdk-button:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; } .wdk-button .icon { display: flex; margin-right: 8px; } .wdk-button .icon svg, .wdk-button .icon img { width: 18px; height: 18px; } .wdk-button.t-rightIcon { flex-direction: row-reverse; } .wdk-button.t-rightIcon .icon { margin-left: 8px; margin-right: 0; } .wdk-button.t-iconOnly { width: 48px; height: 48px; padding: 0; } .wdk-button.t-iconOnly.is-loading .icon { opacity: 0; } .wdk-button.t-iconOnly.t-size_auto { height: auto; width: auto; } .wdk-button.t-iconOnly.t-size_auto::after { height: calc(100% + 16px); width: calc(100% + 16px); inset: -8px 8px 8px -8px; } .wdk-button.t-iconOnly.t-size_auto .icon svg, .wdk-button.t-iconOnly.t-size_auto .icon img { width: 20px; height: 20px; } .wdk-button.t-iconOnly.t-size_50 { height: 32px; width: 32px; } .wdk-button.t-iconOnly.t-size_50::after { height: 48px; width: 48px; margin-top: -10px; margin-left: -10px; } .wdk-button.t-iconOnly.t-size_50 .icon svg, .wdk-button.t-iconOnly.t-size_50 .icon img { width: 20px; height: 20px; } .wdk-button.t-iconOnly.t-size_75 { height: 36px; width: 36px; } .wdk-button.t-iconOnly.t-size_75::after { height: 48px; width: 48px; margin-top: -10px; margin-left: -10px; } .wdk-button.t-iconOnly.t-size_75 .icon svg, .wdk-button.t-iconOnly.t-size_75 .icon img { width: 20px; height: 20px; } .wdk-button.t-iconOnly.t-size_200 { height: 56px; width: 56px; } .wdk-button.t-iconOnly.t-size_200::after { display: none; } .wdk-button.t-iconOnly.t-size_200 .icon svg, .wdk-button.t-iconOnly.t-size_200 .icon img { width: 32px; height: 32px; } .wdk-button.t-iconOnly .text { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } .wdk-button.t-iconOnly .icon { margin: 0; } .wdk-button.t-iconOnly .icon svg, .wdk-button.t-iconOnly .icon img { width: 24px; height: 24px; } @media only screen and (max-width: 767px) { .wdk-button.t-iconOnlyInSM { padding: 0 8px; } .wdk-button.t-iconOnlyInSM.is-loading .wdk-icon { opacity: 0; } .wdk-button.t-iconOnlyInSM .icon svg, .wdk-button.t-iconOnlyInSM .icon img { width: 24px; height: 24px; } .wdk-button.t-iconOnlyInSM .text { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } .wdk-button.t-iconOnlyInSM .trippleDot::before { left: -12px; } .wdk-button.t-iconOnlyInSM .trippleDot::after { left: 12px; } } .wdk-button.t-bubbleTopLeft { border-top-left-radius: 0; } .wdk-button.t-bubbleTopRight { border-top-right-radius: 0; } .wdk-button.t-primarySkin1 { background-color: var(--COLOR_primary_100); color: var(--COLOR_supportLight_100); } @media (hover: hover) { .wdk-button.t-primarySkin1:hover, .wdk-button.t-primarySkin1.hover { background-color: #588169; } } .wdk-button.t-primarySkin1:active, .wdk-button.t-primarySkin1.active { background-color: #346145; } .wdk-button.t-primarySkin1.disabled, .wdk-button.t-primarySkin1.disabled:hover, .wdk-button.t-primarySkin1.disabled:active, .wdk-button.t-primarySkin1.disabled.active, .wdk-button.t-primarySkin1:disabled, .wdk-button.t-primarySkin1:disabled:hover, .wdk-button.t-primarySkin1:disabled:active, .wdk-button.t-primarySkin1:disabled.active { opacity: 0.3; } .wdk-button.t-primarySkin1:focus-visible { outline-color: var(--COLOR_primary_100); } .wdk-button.t-primarySkin1 .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-primarySkin1.t-circle .text { color: var(--COLOR_supportDark_300); } .wdk-button.t-primarySkin2 { background-color: var(--COLOR_supportLight_100); color: var(--COLOR_primary_100); } @media (hover: hover) { .wdk-button.t-primarySkin2:hover, .wdk-button.t-primarySkin2.hover { opacity: 0.8; background-color: var(--COLOR_supportDark_600); } } .wdk-button.t-primarySkin2:active, .wdk-button.t-primarySkin2.active { opacity: 0.6; background-color: var(--COLOR_supportDark_600); } .wdk-button.t-primarySkin2.disabled, .wdk-button.t-primarySkin2.disabled:hover, .wdk-button.t-primarySkin2.disabled:active, .wdk-button.t-primarySkin2.disabled.active, .wdk-button.t-primarySkin2:disabled, .wdk-button.t-primarySkin2:disabled:hover, .wdk-button.t-primarySkin2:disabled:active, .wdk-button.t-primarySkin2:disabled.active { opacity: 0.4; } .wdk-button.t-primarySkin2:focus-visible { outline-color: var(--COLOR_supportDark_100); } .wdk-button.t-primarySkin2 .icon svg { fill: var(--COLOR_primary_100); } .wdk-button.t-primarySkin3 { background-color: var(--COLOR_supportLight_100); color: var(--COLOR_supportDark_100); } @media (hover: hover) { .wdk-button.t-primarySkin3:hover, .wdk-button.t-primarySkin3.hover { opacity: 0.8; background-color: var(--COLOR_supportDark_600); } } .wdk-button.t-primarySkin3:active, .wdk-button.t-primarySkin3.active { opacity: 0.6; background-color: var(--COLOR_supportDark_600); } .wdk-button.t-primarySkin3.disabled, .wdk-button.t-primarySkin3.disabled:hover, .wdk-button.t-primarySkin3.disabled:active, .wdk-button.t-primarySkin3.disabled.active, .wdk-button.t-primarySkin3:disabled, .wdk-button.t-primarySkin3:disabled:hover, .wdk-button.t-primarySkin3:disabled:active, .wdk-button.t-primarySkin3:disabled.active { opacity: 0.4; } .wdk-button.t-primarySkin3 .icon svg { fill: var(--COLOR_supportDark_100); } .wdk-button.t-primarySkin4 { background-color: var(--COLOR_supportDark_080); color: var(--COLOR_supportLight_100); box-shadow: none; } @media (hover: hover) { .wdk-button.t-primarySkin4:hover, .wdk-button.t-primarySkin4.hover { background-color: var(--COLOR_supportDark_090); } } .wdk-button.t-primarySkin4:focus-visible { outline-color: var(--COLOR_defaultText); } .wdk-button.t-primarySkin4:active, .wdk-button.t-primarySkin4.active { background-color: var(--COLOR_supportDark_100); } .wdk-button.t-primarySkin4.disabled, .wdk-button.t-primarySkin4.disabled:hover, .wdk-button.t-primarySkin4.disabled:active, .wdk-button.t-primarySkin4.disabled.active, .wdk-button.t-primarySkin4:disabled, .wdk-button.t-primarySkin4:disabled:hover, .wdk-button.t-primarySkin4:disabled:active, .wdk-button.t-primarySkin4:disabled.active { opacity: 0.4; } .wdk-button.t-primarySkin4 .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-primarySkin5 { background-color: var(--COLOR_supportLight_050); color: var(--COLOR_supportLight_100); border: 0 none; box-shadow: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: var(--FONT_default_100); } .wdk-button.t-primarySkin5::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; border-radius: var(--borderRadius_button); border: 1px solid var(--COLOR_supportLight_080); mix-blend-mode: soft-light; pointer-events: none; } @media (hover: hover) { .wdk-button.t-primarySkin5:hover, .wdk-button.t-primarySkin5.hover { background-color: var(--COLOR_supportLight_060); } } .wdk-button.t-primarySkin5:focus-visible { outline-color: var(--COLOR_defaultText); } .wdk-button.t-primarySkin5:active, .wdk-button.t-primarySkin5.active { border: 0 none; background-color: var(--COLOR_supportLight_040); color: var(--COLOR_supportLight_070); } .wdk-button.t-primarySkin5:active::before, .wdk-button.t-primarySkin5.active::before { border-color: var(--COLOR_supportLight_050); } .wdk-button.t-primarySkin5:active .icon svg, .wdk-button.t-primarySkin5.active .icon svg { fill: var(--COLOR_supportLight_070); } .wdk-button.t-primarySkin5.disabled, .wdk-button.t-primarySkin5.disabled:hover, .wdk-button.t-primarySkin5.disabled:active, .wdk-button.t-primarySkin5.disabled.active, .wdk-button.t-primarySkin5:disabled, .wdk-button.t-primarySkin5:disabled:hover, .wdk-button.t-primarySkin5:disabled:active, .wdk-button.t-primarySkin5:disabled.active { background-color: var(--COLOR_supportLight_040); color: var(--COLOR_supportLight_060); border: 0 none; opacity: 1; } .wdk-button.t-primarySkin5.disabled::before, .wdk-button.t-primarySkin5.disabled:hover::before, .wdk-button.t-primarySkin5.disabled:active::before, .wdk-button.t-primarySkin5.disabled.active::before, .wdk-button.t-primarySkin5:disabled::before, .wdk-button.t-primarySkin5:disabled:hover::before, .wdk-button.t-primarySkin5:disabled:active::before, .wdk-button.t-primarySkin5:disabled.active::before { border-color: var(--COLOR_supportLight_060); } .wdk-button.t-primarySkin5.disabled .icon svg, .wdk-button.t-primarySkin5.disabled:hover .icon svg, .wdk-button.t-primarySkin5.disabled:active .icon svg, .wdk-button.t-primarySkin5.disabled.active .icon svg, .wdk-button.t-primarySkin5:disabled .icon svg, .wdk-button.t-primarySkin5:disabled:hover .icon svg, .wdk-button.t-primarySkin5:disabled:active .icon svg, .wdk-button.t-primarySkin5:disabled.active .icon svg { fill: var(--COLOR_supportLight_070); } .wdk-button.t-primarySkin5 .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-primarySpecialSkin1 { background-image: var(--COLOR_gradient_unlock_100_45); color: var(--COLOR_supportLight_100); } @media (hover: hover) { .wdk-button.t-primarySpecialSkin1:hover, .wdk-button.t-primarySpecialSkin1.hover { background-image: var(--COLOR_gradient_unlock_100_180); } } .wdk-button.t-primarySpecialSkin1:active, .wdk-button.t-primarySpecialSkin1.active { background-image: var(--COLOR_gradient_unlock_100_90); } .wdk-button.t-primarySpecialSkin1.disabled, .wdk-button.t-primarySpecialSkin1.disabled:hover, .wdk-button.t-primarySpecialSkin1.disabled:active, .wdk-button.t-primarySpecialSkin1.disabled.active, .wdk-button.t-primarySpecialSkin1:disabled, .wdk-button.t-primarySpecialSkin1:disabled:hover, .wdk-button.t-primarySpecialSkin1:disabled:active, .wdk-button.t-primarySpecialSkin1:disabled.active { opacity: 0.3; } .wdk-button.t-primarySpecialSkin1:focus-visible { outline-color: var(--COLOR_primary_100); } .wdk-button.t-primarySpecialSkin1 .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-primarySpecialSkin1.t-circle .text { color: var(--COLOR_supportDark_300); } .wdk-button.t-primarySpecialSkin2 { background-color: var(--COLOR_supportLight_100); color: var(--COLOR_supportDark_100); } @media (hover: hover) { .wdk-button.t-primarySpecialSkin2:hover, .wdk-button.t-primarySpecialSkin2.hover { opacity: 0.7; } } .wdk-button.t-primarySpecialSkin2:active, .wdk-button.t-primarySpecialSkin2.active { opacity: 0.6; } .wdk-button.t-primarySpecialSkin2.disabled, .wdk-button.t-primarySpecialSkin2.disabled:hover, .wdk-button.t-primarySpecialSkin2.disabled:active, .wdk-button.t-primarySpecialSkin2.disabled.active, .wdk-button.t-primarySpecialSkin2:disabled, .wdk-button.t-primarySpecialSkin2:disabled:hover, .wdk-button.t-primarySpecialSkin2:disabled:active, .wdk-button.t-primarySpecialSkin2:disabled.active { opacity: 0.3; } .wdk-button.t-primarySpecialSkin2:focus-visible { outline-color: var(--COLOR_primary_100); } .wdk-button.t-primarySpecialSkin2 .icon::before { background-image: var(--COLOR_gradient_unlock_100_45); } .wdk-button.t-primarySpecialSkin2 .text { background: var(--COLOR_supportDark_100); background-image: var(--COLOR_gradient_unlock_100_45); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); } .wdk-button.t-primarySpecialSkin2.t-circle .text { color: var(--COLOR_supportDark_300); } .wdk-button.t-outlineSkin1 { border-width: 1px; border-color: var(--COLOR_supportLight_100); color: var(--COLOR_supportLight_100); background-color: rgba(0, 0, 0, 0); box-shadow: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-outlineSkin1:hover, .wdk-button.t-outlineSkin1.hover { background-color: color-mix( in srgb, var(--COLOR_supportLight_100), transparent 92% ); } } .wdk-button.t-outlineSkin1:active, .wdk-button.t-outlineSkin1.active { background-color: color-mix( in srgb, var(--COLOR_supportLight_100), transparent 84% ); } .wdk-button.t-outlineSkin1.disabled, .wdk-button.t-outlineSkin1.disabled:hover, .wdk-button.t-outlineSkin1.disabled:active, .wdk-button.t-outlineSkin1.disabled.active, .wdk-button.t-outlineSkin1:disabled, .wdk-button.t-outlineSkin1:disabled:hover, .wdk-button.t-outlineSkin1:disabled:active, .wdk-button.t-outlineSkin1:disabled.active { opacity: 0.5; } .wdk-button.t-outlineSkin1 .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-outlineSkin2 { border-width: 1px; border-color: var(--COLOR_supportDark_080); color: var(--COLOR_supportDark_100); background-color: rgba(0, 0, 0, 0); box-shadow: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-outlineSkin2:hover, .wdk-button.t-outlineSkin2.hover { background-color: color-mix( in srgb, var(--COLOR_supportDark_100), transparent 92% ); } } .wdk-button.t-outlineSkin2:active, .wdk-button.t-outlineSkin2.active { background-color: color-mix( in srgb, var(--COLOR_supportDark_100), transparent 84% ); } .wdk-button.t-outlineSkin2.disabled, .wdk-button.t-outlineSkin2.disabled:hover, .wdk-button.t-outlineSkin2.disabled:active, .wdk-button.t-outlineSkin2.disabled.active, .wdk-button.t-outlineSkin2:disabled, .wdk-button.t-outlineSkin2:disabled:hover, .wdk-button.t-outlineSkin2:disabled:active, .wdk-button.t-outlineSkin2:disabled.active { opacity: 0.5; } .wdk-button.t-outlineSkin2 .icon svg { fill: var(--COLOR_supportDark_100); } .wdk-button.t-outlineSkin3 { border-width: 1px; border-color: var(--COLOR_primary_100); color: var(--COLOR_primary_100); background-color: rgba(0, 0, 0, 0); box-shadow: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-outlineSkin3:hover, .wdk-button.t-outlineSkin3.hover { background-color: color-mix( in srgb, var(--COLOR_primary_100), transparent 92% ); } } .wdk-button.t-outlineSkin3:active, .wdk-button.t-outlineSkin3.active { background-color: color-mix( in srgb, var(--COLOR_primary_100), transparent 84% ); } .wdk-button.t-outlineSkin3.disabled, .wdk-button.t-outlineSkin3.disabled:hover, .wdk-button.t-outlineSkin3.disabled:active, .wdk-button.t-outlineSkin3.disabled.active, .wdk-button.t-outlineSkin3:disabled, .wdk-button.t-outlineSkin3:disabled:hover, .wdk-button.t-outlineSkin3:disabled:active, .wdk-button.t-outlineSkin3:disabled.active { opacity: 0.5; } .wdk-button.t-outlineSkin3 .icon svg { fill: var(--COLOR_primary_100); } .wdk-button.t-outlineSkin4 { border-width: 1px; border-color: var(--COLOR_decoration_100); color: var(--COLOR_decoration_100); background-color: rgba(0, 0, 0, 0); box-shadow: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-outlineSkin4:hover, .wdk-button.t-outlineSkin4.hover { background-color: color-mix( in srgb, var(--COLOR_decoration_100), transparent 92% ); } } .wdk-button.t-outlineSkin4:active, .wdk-button.t-outlineSkin4.active { background-color: color-mix( in srgb, var(--COLOR_decoration_100), transparent 84% ); } .wdk-button.t-outlineSkin4.disabled, .wdk-button.t-outlineSkin4.disabled:hover, .wdk-button.t-outlineSkin4.disabled:active, .wdk-button.t-outlineSkin4.disabled.active, .wdk-button.t-outlineSkin4:disabled, .wdk-button.t-outlineSkin4:disabled:hover, .wdk-button.t-outlineSkin4:disabled:active, .wdk-button.t-outlineSkin4:disabled.active { opacity: 0.5; } .wdk-button.t-outlineSkin4 .icon svg { fill: var(--COLOR_decoration_100); } .wdk-button.t-outlineSkin5 { border-width: 1px; border-color: var(--COLOR_decoration_200); color: var(--COLOR_decoration_200); background-color: rgba(0, 0, 0, 0); box-shadow: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-outlineSkin5:hover, .wdk-button.t-outlineSkin5.hover { background-color: color-mix( in srgb, var(--COLOR_decoration_200), transparent 92% ); } } .wdk-button.t-outlineSkin5:active, .wdk-button.t-outlineSkin5.active { background-color: color-mix( in srgb, var(--COLOR_decoration_200), transparent 84% ); } .wdk-button.t-outlineSkin5.disabled, .wdk-button.t-outlineSkin5.disabled:hover, .wdk-button.t-outlineSkin5.disabled:active, .wdk-button.t-outlineSkin5.disabled.active, .wdk-button.t-outlineSkin5:disabled, .wdk-button.t-outlineSkin5:disabled:hover, .wdk-button.t-outlineSkin5:disabled:active, .wdk-button.t-outlineSkin5:disabled.active { opacity: 0.5; } .wdk-button.t-outlineSkin5 .icon svg { fill: var(--COLOR_decoration_200); } .wdk-button.t-outlineSkin6 { border-width: 1px; border-color: var(--COLOR_decoration_300); color: var(--COLOR_decoration_300); background-color: rgba(0, 0, 0, 0); box-shadow: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-outlineSkin6:hover, .wdk-button.t-outlineSkin6.hover { background-color: color-mix( in srgb, var(--COLOR_decoration_300), transparent 92% ); } } .wdk-button.t-outlineSkin6:active, .wdk-button.t-outlineSkin6.active { background-color: color-mix( in srgb, var(--COLOR_decoration_300), transparent 84% ); } .wdk-button.t-outlineSkin6.disabled, .wdk-button.t-outlineSkin6.disabled:hover, .wdk-button.t-outlineSkin6.disabled:active, .wdk-button.t-outlineSkin6.disabled.active, .wdk-button.t-outlineSkin6:disabled, .wdk-button.t-outlineSkin6:disabled:hover, .wdk-button.t-outlineSkin6:disabled:active, .wdk-button.t-outlineSkin6:disabled.active { opacity: 0.5; } .wdk-button.t-outlineSkin6 .icon svg { fill: var(--COLOR_decoration_300); } .wdk-button.t-plainHighlightSkin1 { padding: 0; border: none; border-radius: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; color: var(--COLOR_primary_100); transition: none; } @media (hover: hover) { .wdk-button.t-plainHighlightSkin1:hover, .wdk-button.t-plainHighlightSkin1.hover { opacity: 0.7; text-decoration: underline; text-underline-position: under; } } .wdk-button.t-plainHighlightSkin1.t-size_50, .wdk-button.t-plainHighlightSkin1.t-size_75, .wdk-button.t-plainHighlightSkin1.t-size_200 { padding-inline: 0; } .wdk-button.t-plainHighlightSkin1.t-size_50, .wdk-button.t-plainHighlightSkin1.t-size_75 { font: var(--FONT_highlight_75); } .wdk-button.t-plainHighlightSkin1.t-size_200 { font: var(--FONT_highlight_100); } .wdk-button.t-plainHighlightSkin1:active, .wdk-button.t-plainHighlightSkin1.active { opacity: 0.7; text-decoration: underline; text-underline-position: under; } .wdk-button.t-plainHighlightSkin1.disabled, .wdk-button.t-plainHighlightSkin1.disabled:hover, .wdk-button.t-plainHighlightSkin1.disabled:active, .wdk-button.t-plainHighlightSkin1.disabled.active, .wdk-button.t-plainHighlightSkin1:disabled, .wdk-button.t-plainHighlightSkin1:disabled:hover, .wdk-button.t-plainHighlightSkin1:disabled:active, .wdk-button.t-plainHighlightSkin1:disabled.active { opacity: 0.4; } .wdk-button.t-plainHighlightSkin1 .icon svg { fill: var(--COLOR_primary_100); } .wdk-button.t-plainHighlightSkin2 { padding: 0; border: none; border-radius: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; color: var(--COLOR_supportLight_100); transition: none; } @media (hover: hover) { .wdk-button.t-plainHighlightSkin2:hover, .wdk-button.t-plainHighlightSkin2.hover { opacity: 0.7; text-decoration: underline; text-underline-position: under; } } .wdk-button.t-plainHighlightSkin2.t-size_50, .wdk-button.t-plainHighlightSkin2.t-size_75, .wdk-button.t-plainHighlightSkin2.t-size_200 { padding-inline: 0; } .wdk-button.t-plainHighlightSkin2.t-size_50, .wdk-button.t-plainHighlightSkin2.t-size_75 { font: var(--FONT_highlight_75); } .wdk-button.t-plainHighlightSkin2.t-size_200 { font: var(--FONT_highlight_100); } .wdk-button.t-plainHighlightSkin2:active, .wdk-button.t-plainHighlightSkin2.active { opacity: 0.7; text-decoration: underline; text-underline-position: under; } .wdk-button.t-plainHighlightSkin2.disabled, .wdk-button.t-plainHighlightSkin2.disabled:hover, .wdk-button.t-plainHighlightSkin2.disabled:active, .wdk-button.t-plainHighlightSkin2.disabled.active, .wdk-button.t-plainHighlightSkin2:disabled, .wdk-button.t-plainHighlightSkin2:disabled:hover, .wdk-button.t-plainHighlightSkin2:disabled:active, .wdk-button.t-plainHighlightSkin2:disabled.active { opacity: 0.4; } .wdk-button.t-plainHighlightSkin2 .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-plainHighlightSkin3 { padding: 0; border: none; border-radius: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; color: var(--COLOR_supportDark_100); transition: none; } @media (hover: hover) { .wdk-button.t-plainHighlightSkin3:hover, .wdk-button.t-plainHighlightSkin3.hover { opacity: 0.7; text-decoration: underline; text-underline-position: under; } } .wdk-button.t-plainHighlightSkin3.t-size_50, .wdk-button.t-plainHighlightSkin3.t-size_75, .wdk-button.t-plainHighlightSkin3.t-size_200 { padding-inline: 0; } .wdk-button.t-plainHighlightSkin3.t-size_50, .wdk-button.t-plainHighlightSkin3.t-size_75 { font: var(--FONT_highlight_75); } .wdk-button.t-plainHighlightSkin3.t-size_200 { font: var(--FONT_highlight_100); } .wdk-button.t-plainHighlightSkin3:active, .wdk-button.t-plainHighlightSkin3.active { opacity: 0.7; text-decoration: underline; text-underline-position: under; } .wdk-button.t-plainHighlightSkin3.disabled, .wdk-button.t-plainHighlightSkin3.disabled:hover, .wdk-button.t-plainHighlightSkin3.disabled:active, .wdk-button.t-plainHighlightSkin3.disabled.active, .wdk-button.t-plainHighlightSkin3:disabled, .wdk-button.t-plainHighlightSkin3:disabled:hover, .wdk-button.t-plainHighlightSkin3:disabled:active, .wdk-button.t-plainHighlightSkin3:disabled.active { opacity: 0.4; } .wdk-button.t-plainHighlightSkin3 .icon svg { fill: var(--COLOR_supportDark_100); } .wdk-button.t-plainHighlightSkin4 { padding: 0; border: none; border-radius: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; color: var(--COLOR_supportDark_300); transition: none; } @media (hover: hover) { .wdk-button.t-plainHighlightSkin4:hover, .wdk-button.t-plainHighlightSkin4.hover { opacity: 0.7; text-decoration: underline; text-underline-position: under; } } .wdk-button.t-plainHighlightSkin4.t-size_50, .wdk-button.t-plainHighlightSkin4.t-size_75, .wdk-button.t-plainHighlightSkin4.t-size_200 { padding-inline: 0; } .wdk-button.t-plainHighlightSkin4.t-size_50, .wdk-button.t-plainHighlightSkin4.t-size_75 { font: var(--FONT_highlight_75); } .wdk-button.t-plainHighlightSkin4.t-size_200 { font: var(--FONT_highlight_100); } .wdk-button.t-plainHighlightSkin4:active, .wdk-button.t-plainHighlightSkin4.active { opacity: 0.7; text-decoration: underline; text-underline-position: under; } .wdk-button.t-plainHighlightSkin4.disabled, .wdk-button.t-plainHighlightSkin4.disabled:hover, .wdk-button.t-plainHighlightSkin4.disabled:active, .wdk-button.t-plainHighlightSkin4.disabled.active, .wdk-button.t-plainHighlightSkin4:disabled, .wdk-button.t-plainHighlightSkin4:disabled:hover, .wdk-button.t-plainHighlightSkin4:disabled:active, .wdk-button.t-plainHighlightSkin4:disabled.active { opacity: 0.4; } .wdk-button.t-plainHighlightSkin4 .icon svg { fill: var(--COLOR_supportDark_080); } .wdk-button.t-plainDefaultSkin1 { padding: 0; border: none; border-radius: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; color: var(--COLOR_primary_100); transition: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-plainDefaultSkin1:hover, .wdk-button.t-plainDefaultSkin1.hover { opacity: 0.7; text-decoration: underline; text-underline-position: under; } } .wdk-button.t-plainDefaultSkin1.t-size_50, .wdk-button.t-plainDefaultSkin1.t-size_75, .wdk-button.t-plainDefaultSkin1.t-size_200 { padding-inline: 0; } .wdk-button.t-plainDefaultSkin1:active, .wdk-button.t-plainDefaultSkin1.active { opacity: 0.7; text-decoration: underline; text-underline-position: under; } .wdk-button.t-plainDefaultSkin1.disabled, .wdk-button.t-plainDefaultSkin1.disabled:hover, .wdk-button.t-plainDefaultSkin1.disabled:active, .wdk-button.t-plainDefaultSkin1.disabled.active, .wdk-button.t-plainDefaultSkin1:disabled, .wdk-button.t-plainDefaultSkin1:disabled:hover, .wdk-button.t-plainDefaultSkin1:disabled:active, .wdk-button.t-plainDefaultSkin1:disabled.active { opacity: 0.4; } .wdk-button.t-plainDefaultSkin1 .icon svg { fill: var(--COLOR_primary_100); } .wdk-button.t-plainDefaultSkin2 { padding: 0; border: none; border-radius: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; color: var(--COLOR_supportLight_100); transition: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-plainDefaultSkin2:hover, .wdk-button.t-plainDefaultSkin2.hover { opacity: 0.7; text-decoration: underline; text-underline-position: under; } } .wdk-button.t-plainDefaultSkin2.t-size_50, .wdk-button.t-plainDefaultSkin2.t-size_75, .wdk-button.t-plainDefaultSkin2.t-size_200 { padding-inline: 0; } .wdk-button.t-plainDefaultSkin2:active, .wdk-button.t-plainDefaultSkin2.active { opacity: 0.7; text-decoration: underline; text-underline-position: under; } .wdk-button.t-plainDefaultSkin2.disabled, .wdk-button.t-plainDefaultSkin2.disabled:hover, .wdk-button.t-plainDefaultSkin2.disabled:active, .wdk-button.t-plainDefaultSkin2.disabled.active, .wdk-button.t-plainDefaultSkin2:disabled, .wdk-button.t-plainDefaultSkin2:disabled:hover, .wdk-button.t-plainDefaultSkin2:disabled:active, .wdk-button.t-plainDefaultSkin2:disabled.active { opacity: 0.4; } .wdk-button.t-plainDefaultSkin2 .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-plainDefaultSkin3 { padding: 0; border: none; border-radius: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; color: var(--COLOR_supportDark_100); transition: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-plainDefaultSkin3:hover, .wdk-button.t-plainDefaultSkin3.hover { opacity: 0.7; text-decoration: underline; text-underline-position: under; } } .wdk-button.t-plainDefaultSkin3.t-size_50, .wdk-button.t-plainDefaultSkin3.t-size_75, .wdk-button.t-plainDefaultSkin3.t-size_200 { padding-inline: 0; } .wdk-button.t-plainDefaultSkin3:active, .wdk-button.t-plainDefaultSkin3.active { opacity: 0.7; text-decoration: underline; text-underline-position: under; } .wdk-button.t-plainDefaultSkin3.disabled, .wdk-button.t-plainDefaultSkin3.disabled:hover, .wdk-button.t-plainDefaultSkin3.disabled:active, .wdk-button.t-plainDefaultSkin3.disabled.active, .wdk-button.t-plainDefaultSkin3:disabled, .wdk-button.t-plainDefaultSkin3:disabled:hover, .wdk-button.t-plainDefaultSkin3:disabled:active, .wdk-button.t-plainDefaultSkin3:disabled.active { opacity: 0.4; } .wdk-button.t-plainDefaultSkin3 .icon svg { fill: var(--COLOR_supportDark_100); } .wdk-button.t-plainDefaultSkin4 { padding: 0; border: none; border-radius: 0; background-color: rgba(0, 0, 0, 0); box-shadow: none; color: var(--COLOR_supportDark_300); transition: none; font: var(--FONT_default_100); } @media (hover: hover) { .wdk-button.t-plainDefaultSkin4:hover, .wdk-button.t-plainDefaultSkin4.hover { opacity: 0.7; text-decoration: underline; text-underline-position: under; } } .wdk-button.t-plainDefaultSkin4.t-size_50, .wdk-button.t-plainDefaultSkin4.t-size_75, .wdk-button.t-plainDefaultSkin4.t-size_200 { padding-inline: 0; } .wdk-button.t-plainDefaultSkin4:active, .wdk-button.t-plainDefaultSkin4.active { opacity: 0.7; text-decoration: underline; text-underline-position: under; } .wdk-button.t-plainDefaultSkin4.disabled, .wdk-button.t-plainDefaultSkin4.disabled:hover, .wdk-button.t-plainDefaultSkin4.disabled:active, .wdk-button.t-plainDefaultSkin4.disabled.active, .wdk-button.t-plainDefaultSkin4:disabled, .wdk-button.t-plainDefaultSkin4:disabled:hover, .wdk-button.t-plainDefaultSkin4:disabled:active, .wdk-button.t-plainDefaultSkin4:disabled.active { opacity: 0.4; } .wdk-button.t-plainDefaultSkin4 .icon svg { fill: var(--COLOR_supportDark_080); } .wdk-button.t-premiumSkin1 { border: none; background-image: var(--COLOR_gradient_premium_100_45); background-position: 0; background-size: cover; color: var(--COLOR_supportLight_100); } .wdk-button.t-premiumSkin1::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 48px; border-radius: var(--borderRadius_button); } @media (hover: hover) { .wdk-button.t-premiumSkin1:hover::before, .wdk-button.t-premiumSkin1.hover::before { box-shadow: inset 0 0 0 1000px var(--COLOR_supportLight_050); } } .wdk-button.t-premiumSkin1:active::before, .wdk-button.t-premiumSkin1.active::before { box-shadow: inset 0 0 0 1000px color-mix(in srgb, var(--COLOR_supportDark_100), transparent 80%) !important; } .wdk-button.t-premiumSkin1.disabled, .wdk-button.t-premiumSkin1.disabled:hover, .wdk-button.t-premiumSkin1.disabled:active, .wdk-button.t-premiumSkin1.disabled.active, .wdk-button.t-premiumSkin1:disabled, .wdk-button.t-premiumSkin1:disabled:hover, .wdk-button.t-premiumSkin1:disabled:active, .wdk-button.t-premiumSkin1:disabled.active { opacity: 0.9; } .wdk-button.t-premiumSkin1:focus-visible { outline-color: var(--COLOR_premium_100); } .wdk-button.t-premiumSkin1.t-size_50::before { height: 32px; } .wdk-button.t-premiumSkin1.t-size_75::before { height: 36px; } .wdk-button.t-premiumSkin1.t-size_200::before { height: 60px; } .wdk-button.t-premiumSkin1 .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-premiumSkin1 .text { position: relative; } .wdk-button.t-premiumSkin2 { border: none; background-color: var(--COLOR_supportLight_100); color: var(--COLOR_supportLight_100); } .wdk-button.t-premiumSkin2::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 48px; border-radius: var(--borderRadius_button); } @media (hover: hover) { .wdk-button.t-premiumSkin2:hover::before, .wdk-button.t-premiumSkin2.hover::before { box-shadow: inset 0 0 0 1000px var(--COLOR_supportLight_050); } } .wdk-button.t-premiumSkin2:active::before, .wdk-button.t-premiumSkin2.active::before { box-shadow: inset 0 0 0 1000px color-mix(in srgb, var(--COLOR_supportDark_100), transparent 80%) !important; } .wdk-button.t-premiumSkin2.disabled, .wdk-button.t-premiumSkin2.disabled:hover, .wdk-button.t-premiumSkin2.disabled:active, .wdk-button.t-premiumSkin2.disabled.active, .wdk-button.t-premiumSkin2:disabled, .wdk-button.t-premiumSkin2:disabled:hover, .wdk-button.t-premiumSkin2:disabled:active, .wdk-button.t-premiumSkin2:disabled.active { opacity: 0.9; } .wdk-button.t-premiumSkin2:focus-visible { outline-color: var(--COLOR_premium_100); } .wdk-button.t-premiumSkin2.t-size_50::before { height: 32px; } .wdk-button.t-premiumSkin2.t-size_75::before { height: 36px; } .wdk-button.t-premiumSkin2.t-size_200::before { height: 60px; } .wdk-button.t-premiumSkin2 .icon::before { background-image: var(--COLOR_gradient_premium_100_45); width: 18px; height: 18px; } .wdk-button.t-premiumSkin2 .icon svg { fill: var(--COLOR_offer_200); } .wdk-button.t-premiumSkin2 .text { position: relative; background: var(--COLOR_premium_100); background-image: var(--COLOR_gradient_premium_100_45); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); } .wdk-button.t-primarySuccess { background-color: var(--COLOR_alertSuccess_100); color: var(--COLOR_supportLight_100); } @media (hover: hover) { .wdk-button.t-primarySuccess:hover, .wdk-button.t-primarySuccess.hover { background-color: #3e9429; } } .wdk-button.t-primarySuccess:active, .wdk-button.t-primarySuccess.active { background-color: #156d01; } .wdk-button.t-primarySuccess.disabled, .wdk-button.t-primarySuccess.disabled:hover, .wdk-button.t-primarySuccess.disabled:active, .wdk-button.t-primarySuccess.disabled.active, .wdk-button.t-primarySuccess:disabled, .wdk-button.t-primarySuccess:disabled:hover, .wdk-button.t-primarySuccess:disabled:active, .wdk-button.t-primarySuccess:disabled.active { opacity: 0.3; } .wdk-button.t-primarySuccess:focus-visible { outline-color: var(--COLOR_alertSuccess_100); } .wdk-button.t-primarySuccess .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-primaryAttention { background-color: var(--COLOR_alertWarning_100); color: var(--COLOR_supportLight_100); } @media (hover: hover) { .wdk-button.t-primaryAttention:hover, .wdk-button.t-primaryAttention.hover { background-color: #f2712a; } } .wdk-button.t-primaryAttention:active, .wdk-button.t-primaryAttention.active { background-color: #cb4903; } .wdk-button.t-primaryAttention.disabled, .wdk-button.t-primaryAttention.disabled:hover, .wdk-button.t-primaryAttention.disabled:active, .wdk-button.t-primaryAttention.disabled.active, .wdk-button.t-primaryAttention:disabled, .wdk-button.t-primaryAttention:disabled:hover, .wdk-button.t-primaryAttention:disabled:active, .wdk-button.t-primaryAttention:disabled.active { opacity: 0.3; } .wdk-button.t-primaryAttention:focus-visible { outline-color: var(--COLOR_alertWarning_100); } .wdk-button.t-primaryAttention .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-primaryError { background-color: var(--COLOR_alertError_100); color: var(--COLOR_supportLight_100); } @media (hover: hover) { .wdk-button.t-primaryError:hover, .wdk-button.t-primaryError.hover { background-color: #e2293f; } } .wdk-button.t-primaryError:active, .wdk-button.t-primaryError.active { background-color: #bb0018; } .wdk-button.t-primaryError.disabled, .wdk-button.t-primaryError.disabled:hover, .wdk-button.t-primaryError.disabled:active, .wdk-button.t-primaryError.disabled.active, .wdk-button.t-primaryError:disabled, .wdk-button.t-primaryError:disabled:hover, .wdk-button.t-primaryError:disabled:active, .wdk-button.t-primaryError:disabled.active { opacity: 0.3; } .wdk-button.t-primaryError:focus-visible { outline-color: var(--COLOR_alertError_100); } .wdk-button.t-primaryError .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-primaryInfo { background-color: var(--COLOR_alertInfo_100); color: var(--COLOR_supportLight_100); } @media (hover: hover) { .wdk-button.t-primaryInfo:hover, .wdk-button.t-primaryInfo.hover { background-color: #2a87d2; } } .wdk-button.t-primaryInfo:active, .wdk-button.t-primaryInfo.active { background-color: #025fac; } .wdk-button.t-primaryInfo.disabled, .wdk-button.t-primaryInfo.disabled:hover, .wdk-button.t-primaryInfo.disabled:active, .wdk-button.t-primaryInfo.disabled.active, .wdk-button.t-primaryInfo:disabled, .wdk-button.t-primaryInfo:disabled:hover, .wdk-button.t-primaryInfo:disabled:active, .wdk-button.t-primaryInfo:disabled.active { opacity: 0.3; } .wdk-button.t-primaryInfo:focus-visible { outline-color: var(--COLOR_alertInfo_100); } .wdk-button.t-primaryInfo .icon svg { fill: var(--COLOR_supportLight_100); } .wdk-button.t-knightRider { width: 100%; white-space: normal; } .wdk-button.t-knightRider::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAADBCAMAAAD4iKLmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAkUExURQAAAM7k/9jq/9bp/9Ln/87l/9Pn/9fp/9To/9Hm/8/l/9Dm/37zm1IAAAAMdFJOUwCVCyVUikQXNGR+cuN0eqEAAAI0SURBVHja7ZzJcsMgEAURIEDw//8bLUkk2/KSSgmeSj1Hn6aaGZ7amzHHl7UxurGsESm7dJTGsiodzYhSCiE4lYYWRCF4750UorGhYfBRBVGYOhqGUoq3UohKyTkHKUQ5932fk8hY/3TUdV2JUoi6qZqM03o5Lg2tiMZqcnTby/Ee0TRNg5NC1OdcSrDNN3+LaOxoGFKzRdtFNL7oQ6x8Zm8QeR9CrWeC+83fReTnjpLTQjR1VONxbu9yzI8NLYici9FW3fwHRFNDW0Rj99bWR9S/RHRwR88j9mbz54bqIXJaiOwnl+OKqFJDbxEFEH14OVZftNf5UWXR/ogoVkS0KtrT/FCYoryHiPx4svmh4ljHU+dHFMkPIvZs+SGMqEF+nDJi61+OWWfzBRTNomjkB4pGxKJoKNrF8gNFQ9HIj/+PtQoio5YfFkVD0VA08gNFI2JRtEsomuVTNBQNRSM/UDQUDUVD0VA08gNFQ9FQNBQNRUPRiFjyQ1nR+KIjioaioWjkB4qGoqFoKBqKhqIRsSgaioaioWgoGvmBohGxKBq/ReO3aCgaikZ+fJAflcb6zIpW9/0rFA1FQ9E08sNcNz+CQn4QsRdRNHM8o78pmjm8rNSnaEtFncvxF5OKom0xaSGaKyn8afLd0QUtRFO54V1+mOqVcsv82D86r4Vo3rrSLD9eHN2TiDXtKmQpRMs4td/8h3Hy94hM83JeCtF3sGiM9e0zgRSi5XEuaTU0jXi1jr4A9M/Pk1ODkzQAAAAASUVORK5CYII=") no-repeat -1500% -30px; animation: knightrider 6s linear infinite; } @keyframes knightrider { 0% { background-position: -1500% -30px; } 60% { background-position: 300% -30px; } 100% { background-position: 300% -30px; } } .wdk-button.t-lottieAnimation { overflow: visible; } .wdk-button.t-lottieAnimation .lottiAnimation { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); z-index: 20; } .wdk-button.t-lottieAnimation .lottiAnimation wdk-lottie-animation { width: 56px; position: relative; top: -14px; } .wdk-button.t-lottieAnimation .icon { width: 24px; height: 24px; position: relative; } .wdk-button.t-lottieAnimation .icon svg { width: 24px; height: 24px; } .wdk-button.t-lottieAnimation.t-size_200 .icon { width: 32px; height: 32px; } .wdk-button.t-lottieAnimation.t-size_200 .icon svg { width: 32px; height: 32px; } .wdk-button.t-size_50 { height: 32px; padding: 0 14px; font: var(--FONT_highlight_75); font-weight: 500; } .wdk-button.t-size_50::after { margin-top: -10px; height: 48px; } .wdk-button.t-size_50 .icon svg, .wdk-button.t-size_50 .icon img { width: 12px; height: 12px; } .wdk-button.t-size_75 { height: 36px; padding: 0 16px; font: var(--FONT_default_75); } .wdk-button.t-size_75::after { margin-top: -8px; height: 48px; } .wdk-button.t-size_75 .icon svg, .wdk-button.t-size_75 .icon img { width: 14px; height: 14px; } .wdk-button.t-size_200 { height: 56px; padding: 0 24px; } .wdk-button.t-size_200::after { display: none; } .wdk-button.t-circle { width: 48px; height: 48px; padding: 0; border-radius: var(--borderRadius_circle); } .wdk-button.t-circle.t-size_50 { width: 32px; height: 32px; } .wdk-button.t-circle.t-size_50::after { height: 48px; width: 48px; margin-top: -10px; margin-left: -10px; } .wdk-button.t-circle.t-size_50 .icon svg, .wdk-button.t-circle.t-size_50 .icon img { width: 20px; height: 20px; } .wdk-button.t-circle.t-size_75 { width: 36px; height: 36px; } .wdk-button.t-circle.t-size_75::after { height: 48px; width: 48px; margin-top: -8px; margin-left: -8px; } .wdk-button.t-circle.t-size_75 .icon svg, .wdk-button.t-circle.t-size_75 .icon img { width: 20px; height: 20px; } .wdk-button.t-circle.t-size_200 { width: 60px; height: 60px; } .wdk-button.t-circle.t-size_200::after { display: none; } .wdk-button.t-circle.t-size_200 .icon svg, .wdk-button.t-circle.t-size_200 .icon img { width: 36px; height: 36px; } .wdk-button.t-circle.is-loading .icon { opacity: 0; } .wdk-button.t-circle.is-loading .text { opacity: 1; } .wdk-button.t-circle .icon { margin: 0; } .wdk-button.t-circle .icon svg, .wdk-button.t-circle .icon img { width: 24px; height: 24px; } .wdk-button.t-circle .text { display: block; position: absolute; top: 100%; left: 50%; width: 158%; margin: 5px 0 0 -79%; white-space: normal; text-align: center; font: var(--FONT_default_50); } .wdk-paginator { display: block; text-align: center; margin: 16px 0 0 0; padding: 8px 0; font-size: 0; line-height: 0; } .wdk-paginator li { display: inline-block; margin: 0 2px; padding: 0; list-style: none; font: var(--FONT_highlight_75); line-height: 36px; } @media only screen and (min-width: 481px) { .wdk-paginator li { margin: 0 4px; line-height: 40px; } } .wdk-paginator li:first-child { margin-left: 0; } .wdk-paginator li:last-child { margin-right: 0; } .wdk-paginator li.prev a, .wdk-paginator li.next a { background: var(--COLOR_supportLight_100); } .no-touchevents .wdk-paginator li.prev a:hover, .wdk-paginator li.prev a:active, .no-touchevents .wdk-paginator li.next a:hover, .wdk-paginator li.next a:active { background: var(--COLOR_supportDark_050); } .wdk-paginator li.prev a .wdk-icon, .wdk-paginator li.next a .wdk-icon { width: 14px; height: 14px; vertical-align: middle; fill: var(--COLOR_supportDark_070); } .wdk-paginator li.divider span { width: 16px; } .wdk-paginator li a, .wdk-paginator li > span { position: relative; display: block; width: 36px; padding: 0; color: var(--COLOR_defaultText); text-align: center; text-decoration: none; white-space: nowrap; background-color: rgba(0, 0, 0, 0); } @media only screen and (min-width: 481px) { .wdk-paginator li a, .wdk-paginator li > span { width: 40px; } } .wdk-paginator li a::after { content: ""; position: absolute; left: 0; right: 0; height: 48px; margin-top: -6px; line-height: 40px; } @media only screen and (min-width: 481px) { .wdk-paginator li a::after { margin-top: -4px; } } .no-touchevents .wdk-paginator li a:hover, .wdk-paginator li a:active { text-decoration: none; background-color: var(--COLOR_supportDark_040); } .wdk-paginator li span.active { color: var(--COLOR_primary_100); } body .wdk-styledHintBox { position: relative; margin-top: 8px; padding: 9px 6px; color: var(--COLOR_supportLight_100); font: var(--FONT_default_75); text-align: left; flex-shrink: 0; border-radius: var(--borderRadius_75); } body .wdk-styledHintBox .wdk-icon { position: absolute; left: 8px; top: 50%; margin-top: -16px; padding-right: 8px; fill: var(--COLOR_supportLight_100); width: 32px; height: 32px; } body .wdk-styledHintBox .wdk-icon + .textWrapper { padding-left: 39px; } body .wdk-styledHintBox.t-error, body .wdk-styledHintBox.t-error2 { margin-top: 0; max-height: 0; padding: 0; background-color: var(--COLOR_alertError_200); color: var(--COLOR_alertError_100); overflow: hidden; opacity: 0; transition: max-height 0.2s linear, opacity 0.2s linear, border 0.2s linear; border-width: 0 2px; } body .wdk-styledHintBox.t-error .wdk-icon, body .wdk-styledHintBox.t-error2 .wdk-icon { opacity: 0; transition: max-height 0.2s linear, opacity 0.1s linear; fill: var(--COLOR_alertError_100); } body .wdk-styledHintBox.t-error a, body .wdk-styledHintBox.t-error2 a { color: var(--COLOR_alertError_100) !important; } body .wdk-styledHintBox.t-error2 { background-color: var(--COLOR_alertError_200); color: var(--COLOR_alertError_100); } body .wdk-styledHintBox.t-error2 .wdk-icon { fill: var(--COLOR_alertError_100); } body .wdk-styledHintBox.t-errorForm { display: none; width: 100%; margin-top: 0; padding: 0; font: var(--FONT_default_75); color: var(--COLOR_alertError_100); } body .wdk-styledHintBox.t-errorForm.is-visible { padding: 4px 0; display: block; } body .wdk-styledHintBox a { text-decoration: underline; color: var(--COLOR_supportLight_100) !important; } .no-touchevents body .wdk-styledHintBox a:hover { text-decoration: none; color: inherit; } body .wdk-styledHintBox .ariaLabel { display: none; } .wdk-styledHintBox.t-error.is-visible, .wdk-styledHintBox.t-error2.is-visible { margin-top: 8px; max-height: 210px; font: var(--FONT_default_75); opacity: 1; padding: 9px 6px; } .wdk-styledHintBox.t-error.is-visible .wdk-icon, .wdk-styledHintBox.t-error2.is-visible .wdk-icon { opacity: 1; } .wdk-styledHintBox.t-error.is-visible .wdk-icon + .textWrapper, .wdk-styledHintBox.t-error2.is-visible .wdk-icon + .textWrapper { padding-left: 39px; } @keyframes spinning-wheel { to { transform: rotate(360deg); } } #messengerPage #contactArea #contactList .contactItem.is-loading::after, .wdk-loadingSpinner { display: block; width: 22px; height: 22px; background-image: url("../../img/spinningwheel.svg"); background-repeat: no-repeat; background-size: 22px 22px; transform-origin: center center; } #messengerPage #contactArea #contactList .is-loading.contactItem::after, .is-loading.wdk-loadingSpinner { animation: spinning-wheel 1s steps(12, end) infinite; } #messengerPage #contactArea #contactList .t-white.contactItem.is-loading::after, .t-white.wdk-loadingSpinner { background-image: url("../../img/spinningwheel_white.svg"); } #messengerPage #contactArea #contactList .t-size200.contactItem.is-loading::after, .t-size200.wdk-loadingSpinner { width: 32px; height: 32px; background-size: 32px 32px; } .wdk_loadingIndicator { position: relative; } .wdk_loadingIndicator.is-loading .text { opacity: 0; } .wdk_loadingIndicator.is-loading .icon { opacity: 0; } .wdk_loadingIndicator.is-loading .loader { opacity: 1; } .wdk_loadingIndicator.is-loading .loader.trippleDot { animation: trippleDots 1s ease-in-out 0.6s infinite; } .wdk_loadingIndicator.is-loading .loader.trippleDot::before { animation: trippleDots 1s ease-in-out 0.3s infinite; } .wdk_loadingIndicator.is-loading .loader.trippleDot::after { animation: trippleDots 1s ease-in-out 0s infinite; } .wdk_loadingIndicator.is-loading .loader.trippleDot.t-dark { animation: trippleDotsDark 1s ease-in-out 0.6s infinite; } .wdk_loadingIndicator.is-loading .loader.trippleDot.t-dark::before { animation: trippleDotsDark 1s ease-in-out 0.3s infinite; } .wdk_loadingIndicator.is-loading .loader.trippleDot.t-dark::after { animation: trippleDotsDark 1s ease-in-out 0s infinite; } .wdk_loadingIndicator .text { display: inline-block; transition: opacity 0.25s; } .wdk_loadingIndicator .icon { display: inline-flex; transition: opacity 0.25s; } .wdk_loadingIndicator .loader { display: block; opacity: 0; transition: opacity 0.25s; } .wdk_loadingIndicator .trippleDot { position: absolute; width: 6px; height: 6px; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: var(--COLOR_supportLight_070); border-radius: var(--borderRadius_circle); } .wdk_loadingIndicator .trippleDot::before { content: ""; position: absolute; left: -10px; height: 6px; width: 6px; border-radius: var(--borderRadius_circle); background-color: var(--COLOR_supportLight_070); } .wdk_loadingIndicator .trippleDot::after { content: ""; position: absolute; left: 10px; height: 6px; width: 6px; border-radius: var(--borderRadius_circle); background-color: var(--COLOR_supportLight_100); } .wdk_loadingIndicator .trippleDot.t-dark { background-color: var(--COLOR_supportDark_070); } .wdk_loadingIndicator .trippleDot.t-dark::before { background-color: var(--COLOR_supportDark_070); } .wdk_loadingIndicator .trippleDot.t-dark::after { background-color: var(--COLOR_supportDark_070); } @keyframes trippleDots { 0% { background-color: var(--COLOR_supportLight_070); } 25% { background-color: var(--COLOR_supportLight_070); } 50% { background-color: var(--COLOR_supportLight_070); } 75% { background-color: var(--COLOR_supportLight_100); } 100% { background-color: var(--COLOR_supportLight_070); } } @keyframes trippleDotsDark { 0% { background-color: var(--COLOR_supportDark_070); } 25% { background-color: var(--COLOR_supportDark_070); } 50% { background-color: var(--COLOR_supportDark_070); } 75% { background-color: var(--COLOR_supportDark_100); } 100% { background-color: var(--COLOR_supportDark_070); } } .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation .onlineNow, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation .onlineNow, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation .onlineNow, .wdk-tags { display: inline-block; width: fit-content; margin: 0; padding: 1px 8px 2px 8px; border-radius: 16px; font: var(--FONT_default_50); background-color: var(--COLOR_supportDark_080); white-space: nowrap; color: var(--COLOR_supportLight_100); } .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation .premium.onlineNow, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation .premium.onlineNow, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation .premium.onlineNow, .premium.wdk-tags { padding: 4px 8px; background-image: var(--COLOR_gradient_premium_100_45); border-radius: var(--borderRadius_75); font: var(--FONT_highlight_50); } .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation .unlock.onlineNow, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation .unlock.onlineNow, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation .unlock.onlineNow, .unlock.wdk-tags { padding: 4px 8px; background-image: var(--COLOR_gradient_unlock_100_45); border-radius: var(--borderRadius_75); font: var(--FONT_highlight_50); } wdk-approval-tag { height: 16px; display: none; font: var(--FONT_default_50); } wdk-approval-tag .wdk-button { position: initial; height: 16px; padding: 1px 6px 2px 6px; font: var(--FONT_default_50); border: none; box-shadow: none; } wdk-approval-tag .wdk-button::after { display: none; } wdk-approval-tag .wdk-button:active, wdk-approval-tag .wdk-button.active { box-shadow: none; } wdk-approval-tag .wdk-button .inReview, wdk-approval-tag .wdk-button .rejected { display: none; } wdk-approval-tag[type="inReviewText"], wdk-approval-tag[type="inReviewPhoto"] { display: block; } wdk-approval-tag[type="inReviewText"] .wdk-button .inReview, wdk-approval-tag[type="inReviewPhoto"] .wdk-button .inReview { display: block; } wdk-approval-tag[type="rejectedText"], wdk-approval-tag[type="rejectedPhoto"] { display: block; } wdk-approval-tag[type="rejectedText"] .wdk-button .rejected, wdk-approval-tag[type="rejectedPhoto"] .wdk-button .rejected { display: block; } wdk-approval-tag wdk-popover { text-align: left; } .wdk-premiumBanner { width: 220px; height: 40px; display: flex; overflow: hidden; background-image: var(--COLOR_gradient_premium_100_45); background-size: cover; align-items: center; justify-content: center; text-decoration: none; color: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_rounded); font: var(--FONT_default_100); font-size: 14px; } .wdk-premiumBanner .bannerText { display: inline-block; white-space: normal; width: 100%; text-align: center; line-height: 18px; } .wdk-premiumBanner .bannerText .linkTextLong { display: none; } .wdk-premiumBanner.has-discount { font: var(--FONT_highlight_50); } .wdk-premiumBanner.has-discount .bannerText { position: relative; padding: 0 0 0 6px; } .no-touchevents .wdk-premiumBanner:hover { transition: box-shadow 0.2s; box-shadow: 0 0.85px 4px 0 var(--COLOR_supportDark_080); color: var(--COLOR_supportLight_100); } .wdk-premiumBanner .bannerDiscountDetails { display: flex; height: inherit; align-items: center; justify-content: center; position: relative; right: -1px; padding: 0 10px 0 21px; background-size: cover; background-position: left 50%; font: var(--FONT_highlight_200); } .wdk-premiumBanner .bannerDiscountDetails::before { content: ""; position: absolute; border-radius: var(--borderRadius_rounded); width: calc(100% - 14px); height: 32px; background-color: var(--COLOR_supportLight_050); top: 4px; } .wdk-premiumBanner .bannerDiscountDetails .discountBox { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; margin-top: 0; padding: 0 4px; opacity: 1; } .wdk-premiumBanner .bannerDiscountDetails .discountBox span { white-space: nowrap; text-align: center; } .wdk-premiumBanner .bannerDiscountDetails .discountBox span.is-limited { min-width: 110px; } .wdk-premiumBanner .bannerDiscountDetails .discountBox span.is-limited.is-absoluteDiscount { padding-top: 4px; font-size: 20px; line-height: 10px; padding-left: 4px; padding-right: 4px; } .wdk-premiumBanner .bannerDiscountDetails .discountBox span.is-limited.is-absoluteDiscount > span { font: var(--FONT_highlight_50); margin-right: 4px; color: var(--COLOR_supportLight_080); } .wdk-premiumBanner .bannerDiscountDetails .discountBox span.is-limited.is-relativeDiscount { font-size: 18px; line-height: 26px; } .wdk-premiumBanner .bannerDiscountDetails .discountBox .discountInMonthsText { font-weight: 600; font-size: 11px; line-height: 13px; position: relative; top: -4px; color: var(--COLOR_supportLight_080); } .wdk-premiumBanner .bannerDiscountDetails.has-countdownClock .discountBox, .wdk-premiumBanner .bannerDiscountDetails.has-daysLeft .discountBox { position: absolute; top: 0; } .wdk-premiumBanner .bannerDiscountDetails .countdownBox { --wdkCountdown-digits-min-width: 25px; --wdkCountdown-digits-font: 700 20px/26px arial; min-width: 126px; opacity: 0; font: var(--FONT_default_75); white-space: nowrap; text-align: center; } .wdk-premiumBanner .bannerDiscountDetails .countdownBox .daysLeft { background-color: var(--COLOR_supportLight_100); display: inline-block; padding: 1px 4px; border-radius: var(--borderRadius_75); color: var(--COLOR_supportDark_100); } .wdk-premiumBanner .bannerDiscountDetails.has-daysLeft .discountBox, .wdk-premiumBanner .bannerDiscountDetails.has-countdownClock .discountBox { animation: fadeDiscountBox 12s infinite; } .wdk-premiumBanner .bannerDiscountDetails.has-daysLeft .countdownBox, .wdk-premiumBanner .bannerDiscountDetails.has-countdownClock .countdownBox { animation: fadeCountdownBox 12s infinite; } @keyframes fadeDiscountBox { 0% { opacity: 1; } 23% { opacity: 1; } 25% { opacity: 0.6; } 27% { opacity: 0; } 73% { opacity: 0; } 75% { opacity: 0.6; } 77% { opacity: 1; } 100% { opacity: 1; } } @keyframes fadeCountdownBox { 0% { opacity: 0; } 23% { opacity: 0; } 25% { opacity: 0.6; } 27% { opacity: 1; } 73% { opacity: 1; } 75% { opacity: 0.6; } 77% { opacity: 0; } 100% { opacity: 0; } } .wdk-premiumElement { position: relative; display: flex; flex-direction: column; padding: 12px 16px; background-image: var(--COLOR_gradient_premium_100_45); font: var(--FONT_default_100); color: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_75); text-align: center; } @media only screen and (min-width: 768px) { .wdk-premiumElement { padding: 20px; } .wdk-premiumElement .wdk-button { margin: 0 auto; } } .wdk-premiumElement.t-linkOnly { display: block; text-decoration: none; padding-right: 40px; } .wdk-premiumElement.t-linkOnly:hover { color: var(--COLOR_supportLight_100); } .wdk-premiumElement.t-linkOnly::before { position: absolute; right: 16px; top: calc(50% - 10px); font-size: 20px; } .wdk-premiumElement.t-bubble { border-radius: var(--borderRadius_100); border-top-left-radius: 0; text-align: left; padding-right: 16px; font: var(--FONT_highlight_75); } @media only screen and (min-width: 980px) { .wdk-premiumElement.t-bubble { font: var(--FONT_default_100); } } .wdk-premiumElement.t-bubble.has-subscriptionDesign { background-image: var(--COLOR_gradient_premium_100_45); } .wdk-premiumElement.t-bubble.has-matchUnlockDesign { background-image: var(--COLOR_gradient_unlock_100_45); } .wdk-premiumElement.t-bubble::before { display: none; } wdk-collapsible { scroll-margin-top: 50px; display: grid; grid-template-rows: 1fr auto; max-height: 208px; min-height: 208px; transition: max-height 0.2s ease-out; } wdk-collapsible .collapsibleContainer { overflow: hidden; min-height: 30px; margin: 0 0 8px 0; } wdk-collapsible .buttonsWrapper { display: grid; justify-items: center; } wdk-collapsible.is-collapsible .collapsibleContainer { position: relative; } wdk-collapsible.is-collapsible .collapsibleContainer::after { content: ""; display: block; position: absolute; bottom: -1px; left: 0; height: 60px; width: 100%; background-image: linear-gradient( rgba(255, 255, 255, 0) 0%, var(--COLOR_supportLight_100) 90%, var(--COLOR_supportLight_100) 100% ); z-index: 10; } wdk-collapsible.is-expanded { max-height: 100%; height: auto; overflow: initial; } wdk-collapsible.is-expanded .collapsibleContainer::after { display: none; } wdk-popover { all: initial; display: none; position: absolute; width: max-content; top: 0; left: 0; z-index: 100; border: none; overflow: visible; margin: 0; padding: 14px; border-radius: var(--borderRadius_75); background-color: var(--COLOR_supportLight_100); box-shadow: var(--boxShadow_large); max-width: 240px; transition: opacity 0.2s; text-align: left; } wdk-popover[show] { display: block; } wdk-popover .container { display: flex; flex-direction: column; justify-content: center; row-gap: 4px; width: auto; border: none; white-space: break-spaces; } wdk-popover .container:focus-visible { outline: none; } wdk-popover .container h3.headline { font: var(--FONT_default_50); text-transform: uppercase; color: var(--COLOR_supportDark_080); margin: 0 0 4px 0; } wdk-popover .container p { margin: 0 0 4px 0 !important; padding: 0 !important; font: var(--FONT_default_75) !important; color: var(--COLOR_supportDark_100); } wdk-popover .arrow { position: absolute; width: 16px; height: 16px; pointer-events: none; background-color: inherit; transform: rotate(45deg); } wdk-search-field { position: relative; display: flex; } wdk-search-field input { background-color: var(--COLOR_supportDark_600); border-radius: var(--borderRadius_75); border-color: rgba(0, 0, 0, 0); height: 48px; width: 100%; text-indent: 16px; padding-right: 32px; } wdk-search-field input::placeholder { padding: 13px 0; } wdk-search-field button.t-iconOnly.closeSearchButton { width: 24px; margin-left: 0; margin-right: 16px; } wdk-search-field .clearSearchButton { position: absolute; top: 0; right: 0; } wdk-search-field .clearSearchButton .icon { display: flex; justify-content: center; } wdk-search-field .clearSearchButton .icon .wdk-icon { width: 16px; height: 16px; } wdk-input-radio { display: inline-block; width: 100%; margin-bottom: 16px; } wdk-input-radio input, wdk-input-radio label { cursor: pointer; } wdk-input-radio[disabled] { opacity: 0.6; } wdk-input-radio[disabled] input, wdk-input-radio[disabled] label { cursor: not-allowed; } wdk-input-radio:not([skin="onBrand"]) { color: var(--COLOR_supportDark_200); } wdk-input-radio:not([skin="onBrand"]) .labelWrapper { color: var(--COLOR_supportDark_200); } wdk-input-radio:not([skin="onBrand"]) .inputWrapper:not(.switch) { color: var(--COLOR_supportDark_200); } wdk-input-radio:not([skin="onBrand"]) .inputWrapper:not(.switch) input { border-color: var(--COLOR_supportDark_200); accent-color: var(--COLOR_alertSuccess_100); } wdk-input-radio:not([skin="onBrand"]) .inputWrapper.switch .switchSlider .switchKnob { background-color: var(--COLOR_supportDark_050); } wdk-input-radio:not([skin="onBrand"]) .inputWrapper.switch input:checked + .switchSlider .switchKnob { background-color: var(--COLOR_supportDark_050); } wdk-input-radio:not([skin="onBrand"]) .inputWrapper.switch input:checked + .switchSlider .switchKnob::before { background-color: var(--COLOR_supportLight_100); } wdk-input-radio:not([skin="onBrand"]) .inputWrapper.switch .switchBg { border-color: var(--COLOR_supportDark_100); } wdk-input-radio .designWrapper { display: flex; align-items: center; margin-bottom: 8px; gap: 12px; } wdk-input-radio .designWrapper .inputWrapper:not(.switch) { position: relative; height: 20px; } wdk-input-radio .designWrapper .inputWrapper:not(.switch) input { width: 20px; height: 20px; } wdk-input-radio .designWrapper .inputWrapper:not(.switch) input:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; } wdk-input-radio .designWrapper .inputWrapper.switch { position: relative; } wdk-input-radio .designWrapper .inputWrapper.switch input { position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } wdk-input-radio .designWrapper .inputWrapper.switch input:checked + .switchSlider .switchKnob { margin-left: 20px; } wdk-input-radio .designWrapper .inputWrapper.switch input:checked + .switchSlider .switchKnob::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_check.svg); mask-image: url(../../img/icons/single_color/icon_check.svg); vertical-align: -3px; width: 13px; height: 13px; } wdk-input-radio .designWrapper .inputWrapper.switch input:focus-visible + .switchSlider .switchBg { outline: 2px dashed currentcolor; outline-offset: 2px; } wdk-input-radio .designWrapper .inputWrapper.switch .switchSlider { position: relative; display: inline-block; min-height: 48px; width: 52px; cursor: pointer; margin-left: 0; padding-top: 12px; outline: none; -webkit-user-select: none; user-select: none; } wdk-input-radio .designWrapper .inputWrapper.switch .switchSlider .switchBg { content: ""; position: absolute; padding: 2px; width: 52px; height: 32px; left: 0; top: 11px; border-width: 2px; border-style: solid; transition: all 0.3s; border-radius: var(--borderRadius_rounded); } wdk-input-radio .designWrapper .inputWrapper.switch .switchSlider .switchKnob { position: absolute; top: 15px; left: 4px; height: 24px; width: 24px; border-radius: var(--borderRadius_circle); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } wdk-input-radio .designWrapper .inputWrapper.switch .switchSlider .switchKnob::before { position: absolute; top: 5px; left: 5px; content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_x.svg); mask-image: url(../../img/icons/single_color/icon_x.svg); vertical-align: -3px; width: 13px; height: 13px; } wdk-input-radio .designWrapper .labelWrapper { position: relative; display: inline-block; } wdk-input-radio .designWrapper .labelWrapper label { display: block; font: var(--FONT_default_100); } wdk-input-radio .designWrapper .labelWrapper label strong { font: var(--FONT_highlight_75); } wdk-input-radio .designWrapper .labelWrapper label sub { display: block; margin: 0; font: var(--FONT_default_75); bottom: 0; } wdk-input-radio .errors:has(wdk-hintbox-error[show]) { padding-inline: 16px; margin-bottom: 8px; } #burgerMenu .microProfil, #topNavi #myProfile .myProfileDropdown .microProfil { position: relative; padding: 10px 10px 0 10px; height: 64px; color: var(--COLOR_supportLight_100); background-position: center center; background-size: cover; text-shadow: none; } #burgerMenu .microProfil::before, #topNavi #myProfile .myProfileDropdown .microProfil::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; background-color: var(--COLOR_supportDark_100); } #burgerMenu .microProfil .profileImage, #topNavi #myProfile .myProfileDropdown .microProfil .profileImage { display: block; position: relative; z-index: 5; float: left; margin-right: 20px; } #burgerMenu .microProfil::after, #topNavi #myProfile .myProfileDropdown .microProfil::after { content: ""; display: table; clear: both; } #burgerMenu .microProfil .microProfilWrapper, #topNavi #myProfile .myProfileDropdown .microProfil .microProfilWrapper { position: relative; display: inline-block; z-index: 5; } #burgerMenu .microProfil .microProfilWrapper h5, #topNavi #myProfile .myProfileDropdown .microProfil .microProfilWrapper h5 { max-width: 166px; margin: 1px 0 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--FONT_highlight_100); } #burgerMenu .microProfil .microProfilWrapper p, #topNavi #myProfile .myProfileDropdown .microProfil .microProfilWrapper p { margin: 0; font: var(--FONT_default_75); } #burgerMenu ul, #topNavi #myProfile .myProfileDropdown ul { padding: 0; margin: 0; border-top: 1px solid var(--COLOR_supportDark_050); } #burgerMenu ul:first-of-type, #topNavi #myProfile .myProfileDropdown ul:first-of-type { border-top: 0; } #burgerMenu ul li, #topNavi #myProfile .myProfileDropdown ul li { position: relative; } #burgerMenu ul li a, #topNavi #myProfile .myProfileDropdown ul li a { display: block; padding: 22px 10px; color: var(--COLOR_defaultText); font: var(--FONT_default_100); background-color: rgba(0, 0, 0, 0); transition: border-color 200ms linear; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-decoration: none; line-height: 21px; padding: 14px 10px; border-left: 6px solid rgba(0, 0, 0, 0); } #burgerMenu ul li a::after, #topNavi #myProfile .myProfileDropdown ul li a::after { content: ""; display: table; clear: both; } #burgerMenu ul li a::before, #topNavi #myProfile .myProfileDropdown ul li a::before { line-height: 0; margin-right: 15px; color: var(--COLOR_supportDark_300); vertical-align: -6px; } .no-touchevents #burgerMenu ul li a:hover, #burgerMenu .no-touchevents ul li a:hover, .no-touchevents #topNavi #myProfile .myProfileDropdown ul li a:hover, #topNavi #myProfile .myProfileDropdown .no-touchevents ul li a:hover { border-color: var(--COLOR_primary_100); } #burgerMenu ul li a:focus, #topNavi #myProfile .myProfileDropdown ul li a:focus { background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); } .js #burgerMenu ul li a:active, #burgerMenu .js ul li a:active, .js #topNavi #myProfile .myProfileDropdown ul li a:active, #topNavi #myProfile .myProfileDropdown .js ul li a:active { background-color: var(--COLOR_supportDark_040); border-color: var(--COLOR_supportDark_050); } #burgerMenu ul li a .bubble, #topNavi #myProfile .myProfileDropdown ul li a .bubble { position: absolute; right: 10px; top: 50%; margin-top: -10px; color: var(--COLOR_primary_100); color: var(--COLOR_supportLight_100); } #burgerMenu ul li::after, #topNavi #myProfile .myProfileDropdown ul li::after { display: none; } #burgerMenu ul li.active a, #topNavi #myProfile .myProfileDropdown ul li.active a { border-color: var(--COLOR_primary_100); } #burgerMenu ul li.active a::before, #topNavi #myProfile .myProfileDropdown ul li.active a::before { color: var(--COLOR_supportDark_100); } #topNavi #myProfile .userHead, #burgerMenu .microProfil .profileImage, #topNavi #myProfile .myProfileDropdown .microProfil .profileImage { width: 45px; height: 45px; border: 2px solid var(--COLOR_supportLight_100); background-position: 0 40%; background-color: var(--COLOR_supportLight_100); background-repeat: no-repeat; background-size: 100% auto; border-radius: var(--borderRadius_circle); } #topNavi #myProfile .noPic.userHead, #burgerMenu .microProfil .noPic.profileImage, #topNavi #myProfile .myProfileDropdown .microProfil .noPic.profileImage { background-size: cover; background-position: center; background-color: var(--COLOR_supportLight_100); } #topNavi > ul > li .bubble, #burgerMenu ul li a .bubble, #topNavi #myProfile .myProfileDropdown ul li a .bubble { display: none; font: var(--FONT_highlight_50); line-height: 1; border-radius: var(--borderRadius_75); background: var(--COLOR_supportLight_100); border: 2px solid var(--COLOR_primary_100); color: var(--COLOR_primary_100); font-size: 10px; padding: 2px 4px 3px 4px; } #topNavi > ul > li .is-visible.bubble, #burgerMenu ul li a .is-visible.bubble, #topNavi #myProfile .myProfileDropdown ul li a .is-visible.bubble { display: block; } @keyframes dancingRight { 0% { opacity: 0; } 15% { opacity: 1; } 25% { padding-right: 6px; } 35% { padding-right: 0; } 45% { padding-right: 6px; } 55% { padding-right: 0; } 65% { padding-right: 6px; } 75% { padding-right: 0; } 85% { padding-right: 6px; } 90% { opacity: 1; margin-right: 0; } 99% { opacity: 0; margin-right: -10px; } 100% { margin-right: -1000px; } } @keyframes dancingLeft { 0% { opacity: 0; } 15% { opacity: 1; } 25% { padding-left: 6px; } 35% { padding-left: 0; } 45% { padding-left: 6px; } 55% { padding-left: 0; } 65% { padding-left: 6px; } 75% { padding-left: 0; } 85% { padding-left: 6px; } 90% { opacity: 1; margin-left: 0; } 99% { opacity: 0; margin-left: -10px; } 100% { margin-left: -1000px; } } #pageHeader { position: fixed; top: 0; width: 100%; min-width: 320px; line-height: 1.5; z-index: 101; background-color: var(--COLOR_primary_100); transition: transform 0.6s; } #pageHeader.isHiddenNavi { min-height: 48px; } @media only screen and (min-width: 768px) { #pageHeader.isHiddenNavi { min-height: 98px; } } @media only screen and (min-width: 768px) { #pageHeader { position: fixed; } } @media only screen and (min-width: 768px) and (height <= 580px) { #pageHeader { position: absolute; } } #pageHeader::after { content: ""; position: absolute; left: 0; width: 100%; bottom: -48px; height: 48px; background-color: var(--COLOR_supportLight_100); } #pageHeader a:focus-visible { outline-offset: -2px; } #pageHeader .skipNavigation { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } #pageHeader .skipNavigation:focus { clip: auto; height: auto; overflow: auto; position: absolute; top: 0; padding: 4px; display: block; width: 100%; text-align: center; background-color: var(--COLOR_alertInfo_100); color: var(--COLOR_supportLight_100); z-index: 2; } .noSubnavi #pageHeader::before { display: none; } .noSubnavi #pageHeader::after { display: none; } #pageHeader.fadeOut { transform: translate3d(0, -150px, 0); } #pageHeader #logoWrapperGeneric { max-width: 1024px; margin: 0 auto; padding: 17px 0; } #pageHeader #logoWrapperGeneric img { width: 170px; } #secondaryNavi { display: none; width: 100%; height: 34px; overflow: hidden; } @media only screen and (min-width: 768px) { #secondaryNavi { display: block; } } #secondaryNavi .secondaryNaviWrapper { max-width: 1024px; margin: 0 auto; padding-top: 4px; text-align: right; font-size: 0; line-height: 0; white-space: nowrap; } #secondaryNavi .secondaryNaviWrapper ul { display: inline-flex; align-items: center; } #secondaryNavi .secondaryNaviWrapper ul > li a { display: flex; align-items: center; } #secondaryNavi .secondaryNaviWrapper ul > li a .wdk-icon { fill: var(--COLOR_supportLight_100); width: 20px; height: 20px; margin-right: 4px; } #secondaryNavi #logoWrapper { float: left; margin: 8px 0 0 15px; } #secondaryNavi #logoWrapper img { height: 22px; } #secondaryNavi ul { display: inline-block; } #secondaryNavi ul li { position: relative; display: inline-block; } #secondaryNavi ul li a { position: relative; display: block; font: var(--FONT_default_50); text-decoration: none; color: var(--COLOR_supportLight_100); padding: 9px 14px; } #secondaryNavi ul li a:active { background-color: var(--COLOR_primary_100_dark); } .no-touchevents #secondaryNavi ul li a:hover { color: var(--COLOR_supportLight_080); } .no-touchevents #secondaryNavi ul li a:hover::after { top: -10px; } #secondaryNavi ul li a::after { position: absolute; top: -15px; left: 50%; content: ""; height: 0; width: 0; margin-left: -10px; pointer-events: none; border: 10px solid rgba(0, 0, 0, 0); border-top-color: var(--COLOR_supportLight_100); transition: top 0.15s ease-in; } #topNavi { position: relative; max-width: 1024px; margin: 0 auto; } #topNavi > ul { margin-left: 0; line-height: 0; font-size: 0; pointer-events: none; } .no-touchevents #topNavi > ul:hover li.active > a::after { transform: translate3d(0, 0, 0); } #topNavi > ul > li { margin: 0; display: inline-block; line-height: 1.5; pointer-events: all; } .isExternalNavi #topNavi > ul > li { display: none; } @media only screen and (min-width: 980px) { .isExternalNavi #topNavi > ul > li { display: inline-block; } } #topNavi > ul > li#naviLogo { display: inline-block; width: 80%; width: calc(100% - 93px); } @media only screen and (min-width: 768px) { #topNavi > ul > li#naviLogo { display: none; } } #topNavi > ul > li#naviLogo a { padding: 0; } #topNavi > ul > li#naviLogo img { display: block; height: 20px; margin: 14px auto 0 auto; padding: 0; } #topNavi > ul > li > a { display: flex; align-items: center; position: relative; overflow: hidden; height: 48px; padding: 9px 14px; color: var(--COLOR_supportLight_100); text-decoration: none; font: var(--FONT_default_100); } @media only screen and (min-width: 768px) { #topNavi > ul > li > a { border-radius: var(--borderRadius_75) var(--borderRadius_75) 0 0; padding: 9px 13px; } } #topNavi > ul > li > a .wdk-icon { width: 28px; height: 28px; fill: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #topNavi > ul > li > a { padding: 17px; height: 64px; line-height: 30px; } } #topNavi > ul > li > a:active, #topNavi > ul > li > a span:active { background-color: var(--COLOR_primary_100_dark); } #topNavi > ul > li > a::after { position: absolute; content: ""; bottom: -10px; left: 50%; height: 0; width: 0; border: solid rgba(0, 0, 0, 0); pointer-events: none; border-bottom-color: var(--COLOR_supportLight_100); border-width: 9px; margin-left: -9px; transform: translate3d(0, 0, 0); transition: transform 0.1s ease-in; } @media only screen and (min-width: 768px) { #topNavi > ul > li > a::after { border-bottom-color: var(--COLOR_supportDark_600); } } .no-touchevents #topNavi > ul > li:hover > a::after, #topNavi > ul > li.active > a::after { transform: translate3d(0, -10px, 0); } .isExternalNavi #topNavi > ul > li.active { display: inline-block; } .isExternalNavi #topNavi > ul > li.active a { display: flex; } .isExternalNavi #topNavi > ul > li.active ~ #naviLogo { display: none; } .no-touchevents #topNavi > ul > li.active:hover > a::after { display: block; transform: translate3d(0, -10px, 0); } #topNavi > ul > li.active .swiperContainer { display: block; } #topNavi > ul > li .bubble { position: absolute; top: 8px; left: 33px; color: var(--COLOR_primary_100); min-width: 19px; text-align: center; } @media only screen and (min-width: 768px) { #topNavi > ul > li .bubble { top: 11px; left: 33px; } } #topNavi > ul > li .iconText { margin-left: 6px; vertical-align: 18%; } .isExternalNavi #topNavi > ul > li .iconText { margin-left: 0; display: inline-block; line-height: 32px; } @media only screen and (max-width: 980px) { #topNavi > ul > li#home .iconText, #topNavi > ul > li#incoming .iconText, #topNavi > ul > li#pvl .iconText, #topNavi > ul > li#messenger .iconText { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } } #topNavi > ul > li#profileMenuListItem { position: absolute; top: 0; right: 0; } @media only screen and (min-width: 481px) { #topNavi > ul > li#profileMenuListItem { display: none; } } #topNavi > ul > li#profileMenuListItem a:active { background-color: rgba(0, 0, 0, 0); } #topNavi > ul > li#profileMenuListItem a::after { display: none; } #topNavi .swiperContainer { display: none; position: absolute; z-index: 100; top: 48px; left: 0; height: 48px; min-width: 320px; width: 100%; max-width: 100%; background-color: rgba(0, 0, 0, 0); font: var(--FONT_default_100); transition: opacity, height 0.3s 0.2s ease; } @media only screen and (min-width: 768px) { #topNavi .swiperContainer { top: 64px; } } #topNavi .swiperContainer .iconWrapper { position: absolute; z-index: 100; top: -1000px; width: 50px; height: 44px; padding-top: 12px; opacity: 0; transition: opacity 0.5s; } @media only screen and (max-width: 767px) { #topNavi .swiperContainer.showSwiperArrows .iconWrapper { top: 0; animation-fill-mode: forwards; animation-delay: 0.5s; } #topNavi .swiperContainer.showSwiperArrows .iconWrapper.bg-icon_arrow_left_light { left: 0; padding-left: 6px; text-align: left; background-image: linear-gradient( to right, var(--COLOR_supportLight_100) 25%, var(--COLOR_supportLight_040) 100% ); animation: dancingLeft 2.3s linear; } #topNavi .swiperContainer.showSwiperArrows .iconWrapper.bg-icon_arrow_right_light { right: 0; padding-right: 6px; text-align: right; background-image: linear-gradient( to right, var(--COLOR_supportLight_040) 0, var(--COLOR_supportLight_100) 75% ); animation: dancingRight 2.3s linear; } } #topNavi .swiperContainer ul.swiperWrapper { display: flex; width: 100%; margin: 0; white-space: nowrap; } #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide { position: relative; width: 100%; display: inline-flex; justify-content: center; padding: 0; text-align: center; scroll-snap-align: start; border-bottom: 3px solid rgba(0, 0, 0, 0); } #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide::after { position: absolute; content: ""; bottom: -3px; left: 0; width: 100%; height: 3px; opacity: 0; background-color: var(--COLOR_primary_100); transition: opacity 0.2s ease; } #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide a { display: block; padding: 13px 24px 11px 24px; color: var(--COLOR_defaultText); text-decoration: none; } @media only screen and (min-width: 980px) { #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide a { padding: 13px 10px 11px 10px; } } #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide a:active { background-color: var(--COLOR_supportDark_040); } #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide a::after { content: ""; position: absolute; border-left: 1px solid var(--COLOR_supportDark_050); right: 0; top: 21%; height: 62%; } #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide:last-child a::after { display: none; } #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide.active a { pointer-events: none; } .no-touchevents #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide:hover a, #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide.active a { color: var(--COLOR_primary_100); } .no-touchevents #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide:hover::after, #topNavi .swiperContainer ul.swiperWrapper li.swiperSlide.active::after { opacity: 1; } #topNavi #openBurger { display: inline-block; vertical-align: top; } @media only screen and (min-width: 768px) { #topNavi #openBurger { display: none; } } .isExternalNavi #topNavi #openBurger { display: inline-block; } @media only screen and (min-width: 980px) { .isExternalNavi #topNavi #openBurger { display: none; } } #topNavi #openBurger > a peg-my-notifications-bubble[has-unread] { position: absolute; top: 6px; right: 10px; } #topNavi #openBurger > a::after { bottom: -10px; } #topNavi #openBurger > a::before { width: 32px; height: 32px; } #topNavi #bannerInTopNavi.wdk-premiumBanner { position: absolute; display: none; top: 4px; right: 6px; } @media only screen and (min-width: 481px) { #topNavi #bannerInTopNavi.wdk-premiumBanner { display: flex; } } @media only screen and (min-width: 768px) { #topNavi #bannerInTopNavi.wdk-premiumBanner { top: 12px; right: 92px; } } #topNavi #bannerInTopNavi.wdk-premiumBanner:focus-visible { outline-offset: 3px; } #topNavi #bannerInTopNavi.wdk-premiumBanner .bannerText { line-height: 14px; } #topNavi #bannerInTopNavi.wdk-premiumBanner .bannerDiscountDetails { padding: 0 8px 0 8px; border-top-right-radius: var(--borderRadius_75); border-bottom-right-radius: var(--borderRadius_75); } #topNavi #bannerInTopNavi.wdk-premiumBanner .bannerDiscountDetails .discountBox { min-width: 126px; text-align: center; display: flex; justify-content: center; align-items: center; } #topNavi #bannerInTopNavi.wdk-premiumBanner .bannerDiscountDetails .discountBox > span { text-align: center; } #topNavi #bannerInTopNavi.wdk-premiumBanner.has-discount { width: 250px; } #topNavi #bannerInTopNavi.wdk-premiumBanner.has-discount.is-extendOrReactivate { width: 272px; } @media only screen and (min-width: 768px) { #topNavi #bannerInTopNavi.wdk-premiumBanner.has-discount { top: 14px; } } #topNavi #myProfile { margin-right: 0; float: none; } #topNavi #myProfile::after { content: ""; display: table; clear: both; } @media only screen and (min-width: 768px) { #topNavi #myProfile { float: right; } } #topNavi #myProfile a::after { margin-left: -9px; } @media only screen and (min-width: 768px) { #topNavi #myProfile a::after { margin-left: 0; } } #topNavi #myProfile > a { display: none; padding: 9px 10px; } #topNavi #myProfile > a::before { display: block; } @media only screen and (min-width: 768px) { #topNavi #myProfile > a { display: block; padding: 11px 14px 12px 0; } #topNavi #myProfile > a::before { display: none; } #topNavi #myProfile > a .iconText { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } } #topNavi #myProfile .userHead { display: none; width: 41px; height: 41px; border-color: var(--COLOR_supportLight_100); margin-left: 32px; } @media only screen and (min-width: 768px) { #topNavi #myProfile .userHead { display: inline-block; } } #topNavi #myProfile .userHead::before { content: ""; display: inline-block; height: 6px; margin-left: -23px; margin-top: 15px; border: solid rgba(0, 0, 0, 0); border-width: 6px; border-top-color: var(--COLOR_supportLight_100); } #topNavi #myProfile .userHead.noPic { background-size: cover; background-repeat: no-repeat; } #topNavi #myProfile .userHead peg-my-notifications-bubble[has-unread] { position: absolute; top: 10px; right: 12px; } #topNavi #myProfile .myProfileDropdown { position: absolute; z-index: 101; top: -1000px; opacity: 0; transition: opacity 0.3s, top 0s ease 0.3s; width: 300px; right: 10px; background: var(--COLOR_supportLight_100); box-shadow: 0 1.3px 2.5px 0 var(--COLOR_supportDark_050); } #topNavi #myProfile .myProfileDropdown .microProfil h5 { max-width: 200px !important; } #topNavi #myProfile .myProfileDropdown ul li a { padding: 12px 10px; width: 100%; } #topNavi #myProfile .myProfileDropdown ul li a .wdk-icon { margin-right: 12px; vertical-align: -6px; } #topNavi #myProfile .myProfileDropdown ul li a peg-my-notifications-bubble[has-unread] { position: absolute; z-index: 1; left: 31px; top: 9px; } #topNavi #myProfile.is-open .myProfileDropdown { opacity: 1; transition: opacity 0.3s, top 0s; top: 64px; } #burgerMenu { display: block; position: fixed; top: 0; left: -270px; width: 270px; height: 100%; overflow: hidden auto; -webkit-overflow-scrolling: touch; background: var(--COLOR_supportLight_100); color: var(--COLOR_supportDark_100); z-index: 1000; transition: all 0.2s 0.1s ease; } .burgerOpened #burgerMenu { transform: translate3d(270px, 0, 0); } #burgerMenu .headerLogo { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; height: 48px; text-align: center; line-height: 1; background-color: var(--COLOR_primary_100); } #burgerMenu .headerLogo a { text-decoration: none; margin-left: 16px; } #burgerMenu .headerLogo img { height: 20px; width: auto; margin-top: 5px; } #burgerMenu .headerLogo #closeBurgerMenu { display: flex; align-items: center; justify-content: center; padding: 8px 13px 8px 8px; } #burgerMenu .headerLogo .wdk-icon { fill: var(--COLOR_supportLight_100); cursor: pointer; } #burgerMenu ul li { margin: 0; } #burgerMenu ul li a { display: flex; align-items: center; } #burgerMenu ul li a::before { font-size: 28px; } #burgerMenu ul li a .wdk-icon { width: 28px; height: 28px; margin-right: 16px; } #burgerMenu ul li a peg-my-notifications-bubble[has-unread] { position: absolute; margin-left: 14px; top: 9px; } #burgerMenu ul li.incoming a::before, #burgerMenu ul li.pvl a::before { width: 20px; height: 20px; } #burgerMenu #bannerInBurgerMenu.wdk-premiumBanner { display: flex; height: 46px; width: 100%; border-radius: 0; font: var(--FONT_default_75); } #burgerMenu #bannerInBurgerMenu.wdk-premiumBanner:hover { text-decoration: none; } #burgerMenu #bannerInBurgerMenu.wdk-premiumBanner .bannerDiscountDetails { padding: 0 6px 0 16px; } #burgerMenu #bannerInBurgerMenu.wdk-premiumBanner .bannerDiscountDetails::before { width: calc(100% - 22px); top: 7px; } #burgerMenu #bannerInBurgerMenu.wdk-premiumBanner .discountBox, #burgerMenu #bannerInBurgerMenu.wdk-premiumBanner .countdownBox { animation: none; } #burgerMenu #bannerInBurgerMenu.wdk-premiumBanner .discountBox { position: static; } #burgerMenu #bannerInBurgerMenu.wdk-premiumBanner .countdownBox { display: none; } #burgerMenu:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; } #burgerMenu.a11y-visibilityHidden { visibility: hidden; } html { overflow: hidden scroll; interpolate-size: allow-keywords; overscroll-behavior: initial; } html body { overscroll-behavior: initial; } html.burgerOpened, html.has-openMessageMenu { overflow: hidden; } html.burgerOpened.no-touchevents, html.has-openMessageMenu.no-touchevents { margin-right: 17px; } [class^="bg-icon_"], [class*=" bg-icon_"], [class^="bg-illu_"], [class*=" bg-illu_"], [class^="icon-"], [class*=" icon-"], .wdk-icon { content-visibility: auto; } [class^="bg-icon_"]::before, [class*=" bg-icon_"]::before, [class^="bg-illu_"]::before, [class*=" bg-illu_"]::before, [class^="icon-"]::before, [class*=" icon-"]::before, .wdk-icon::before { content-visibility: auto; } body { z-index: 0; height: 100%; color: var(--COLOR_defaultText); font: var(--FONT_default_100); background-color: var(--COLOR_supportDark_600); } body section { background-color: var(--COLOR_supportLight_100); border: 1px solid var(--COLOR_supportDark_050); border-radius: var(--borderRadius_75); } body h1, body h2, body h3 { margin: 0; } body ul { padding: 0; margin: 0; } body ul li { list-style-type: none; } body input::-ms-clear { display: none; width: 0; height: 0; } body svg [font-family*="Open Sans"], body svg [font-family*="OpenSans"] { font-family: "Open Sans", sans-serif; font-weight: normal; } body svg [font-family*="OpenSans-ExtraLight"] { font-weight: 200; } body svg [font-family*="OpenSans-Light"] { font-weight: 300; } body svg [font-family*="OpenSans-Bold"], body svg [font-family*="OpenSans-SemiBold"], body svg [font-family*="OpenSans-Semibold"] { font-weight: 600; } #pageWrapper { position: relative; min-width: 320px; padding-top: 96px; } @media only screen and (min-width: 481px) { #pageWrapper { padding-top: 110px; } } @media only screen and (min-width: 768px) { #pageWrapper { padding-top: 172px; } } html.no-touchevents #pageWrapper { min-width: 280px; } #pageWrapper::after { content: ""; position: fixed; z-index: 202; top: 0; left: 0; width: 0; height: 0; background: var(--COLOR_supportDark_050); opacity: 0; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; will-change: opacity; } .burgerOpened #pageWrapper::after, .has-openMessageMenu #pageWrapper::after, .has-openProfileMenu #pageWrapper::after { width: 100%; height: 100%; opacity: 1; transition: opacity 0.5s; } body.noSubnavi #pageWrapper { padding-top: 48px; } @media only screen and (min-width: 768px) { body.noSubnavi #pageWrapper { padding-top: 120px; } } .has-openMessageMenu #pageWrapper::after { background: var(--COLOR_supportLight_090); } main { width: 100%; max-width: 1024px; margin: 0 auto; flex-direction: column; display: flex; } main a { color: var(--COLOR_defaultText2); text-decoration: underline; } main a:hover { text-decoration: none; } main .smartScoreDebug { position: absolute; left: 8px; top: 50px; padding: 2px 4px; font: var(--FONT_default_50); background-color: var(--COLOR_decoration_100); color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #premiumBannerCard { padding: 0; margin: 0; } } #premiumBannerCard #bannerInContent.wdk-premiumBanner { height: 56px; width: 100%; padding: 0 8px; gap: 8px; border-radius: var(--borderRadius_200); font: var(--FONT_default_100); font-size: 15px; } @media only screen and (min-width: 481px) { #premiumBannerCard #bannerInContent.wdk-premiumBanner { display: none; } } @media only screen and (min-width: 768px) { #premiumBannerCard #bannerInContent.wdk-premiumBanner { display: none; } } #premiumBannerCard #bannerInContent.wdk-premiumBanner.has-discount .bannerText { padding: 0; } #premiumBannerCard #bannerInContent.wdk-premiumBanner:not(.has-discount) .linkTextLong { display: block; } #premiumBannerCard #bannerInContent.wdk-premiumBanner:not(.has-discount) .linkText { display: none; } #premiumBannerCard #bannerInContent.wdk-premiumBanner:focus-visible { outline-offset: -2px; } #premiumBannerCard #bannerInContent.wdk-premiumBanner .bannerText { width: 60%; } #premiumBannerCard #bannerInContent.wdk-premiumBanner .bannerDiscountDetails { width: 40%; padding: 0; right: auto; } #premiumBannerCard #bannerInContent.wdk-premiumBanner .bannerDiscountDetails::before { left: auto; top: auto; margin: 0; width: 100%; height: calc(100% - 16px); } peg-app-shell #appShellLoader { display: none; } peg-app-shell #appShellLoader.is-loading { display: flex; position: fixed; inset: 0 0 0 0; background-color: var(--COLOR_supportDark_050); color: var(--COLOR_supportLight_100); z-index: 101; align-items: center; justify-content: center; } body #appShellContent #pageWrapper.is-fallbackContent #pageHeader::after, body #appShellContent #pageWrapper.is-fallbackContent ul li.active .swiper-container, body #appShellContent #pageWrapper.is-fallbackContent ul li.active a::after, body #appShellContent #pageWrapper.is-fallbackContent #bannerInTopNavi { display: none; } .urcCard { position: relative; margin-bottom: 0 !important; text-align: center; } .urcCard .showURCName { position: absolute; width: 100%; left: 0; top: 0; margin: 0; padding: 0; font: var(--FONT_highlight_75); opacity: 0.7; background: var(--COLOR_intern_peg); color: var(--COLOR_supportLight_100); } .urcCard .urcWrapper { margin-bottom: 8px; } @media only screen and (min-width: 481px) { .urcCard .urcWrapper { margin-bottom: 24px; } } .urcCard.has-slideInAnimation .urcWrapper { transition: max-height 0.3s ease-out; max-height: 210px; overflow: hidden; } .urcCard.has-slideInAnimation .urcWrapper.is-hidden { max-height: 0; } .urcCard.parmacontoTopFullWidth { margin-left: -2px; margin-right: -2px; } .urcCard.parmacontoTopFullWidth svg { max-width: 980px; } .urcCard a { display: block; max-width: 100%; text-decoration: none; } .urcCard img { max-width: 100%; height: auto; } .urcCard svg { max-width: 300px; } @media only screen and (min-width: 768px) { .urcCard svg { max-width: 684px; } } .urcCard .secondaryCol svg { max-width: 304px; } peg-communication-primer .imageContainer { width: 64px; height: 64px; margin: 0 0 24px 0; } peg-communication-primer .imageContainer img { display: block; height: 100%; width: 100%; } peg-communication-primer h2 { font: var(--FONT_highlight_300); color: var(--COLOR_primary_100); margin: 0 0 24px 0; } peg-communication-primer strong { margin: 0 0 24px 0; } peg-communication-primer ul { margin-block-end: 1em; margin-inline: 0 0; padding-inline-start: 40px; } peg-communication-primer ul li { list-style-type: initial; } peg-communication-primer a.highlight { color: var(--COLOR_primary_100); font: var(--FONT_highlight_100); text-decoration: none; } .wdk-modalbox.has-smallContent .modalboxContent.betterDating { border-radius: var(--borderRadius_100); } @media only screen and (min-width: 481px) { .wdk-modalbox.has-smallContent .modalboxContent.betterDating { max-width: 343px; } } .wdk-modalbox .betterDating { text-align: center; border-radius: var(--borderRadius_100); } .wdk-modalbox .betterDating header { padding: 24px; } .wdk-modalbox .betterDating header h3 { align-self: center; padding: 16px 0 0 0; font: var(--FONT_brand_400); font-style: var(--FONT_style_brand); color: var(--COLOR_defaultText); } .wdk-modalbox .betterDating article { padding: 0 24px; overflow: hidden; } .wdk-modalbox .betterDating footer { padding: 24px 24px 40px 24px; background-color: rgba(0, 0, 0, 0); } .wdk-modalbox .layerInModalbox .layerContent.betterDating { text-align: center; border-radius: var(--borderRadius_100); } .betterDatingDialog { text-align: center; } .betterDatingDialog [slot="header"] { width: 100%; text-align: center; padding: 40px 24px 24px 24px; font: var(--FONT_brand_400); font-style: var(--FONT_style_brand); color: var(--COLOR_defaultText); } .betterDatingDialog .content { padding: 0 24px; overflow: hidden; } .betterDatingDialog .wdk-button { margin-bottom: 20px; } .modalboxContent.profileCompleteness article { padding: 8px 0; max-width: 100%; } .modalboxContent.profileCompleteness article .wdk-icon.icon_badge { width: 48px; height: 48px; display: block; margin: 20px auto 0; fill: var(--COLOR_primary_100); } .modalboxContent.profileCompleteness article h3 { padding: 28px 40px; border-bottom: 1px solid var(--COLOR_supportDark_070); font: var(--FONT_default_200); } .modalboxContent.profileCompleteness article p { padding: 28px 40px 0; } .allIcebreakerModal .modalboxContent.profileCompleteness { max-width: 560px !important; } .allIcebreakerModal .modalboxContent.profileCompleteness footer { margin-top: 20px; } #messageLimitPerDay p, #messageLimitPerHour p { display: flex; flex-direction: column; } #messageLimitPerDay p img, #messageLimitPerHour p img { align-self: center; width: 115px; margin-bottom: 16px; } #annoyanceLimitPerContact { max-width: 560px; } #annoyanceLimitPerContact .howItWorks { margin-top: 32px; padding-top: 224px; background-repeat: no-repeat; background-position: top center; background-image: url("../../img/partner_profile/annoyance_graphic.svg"); } @media only screen and (min-width: 481px) { #annoyanceLimitPerContact .howItWorks { padding-top: 0; padding-left: 180px; min-height: 192px; background-position: top left; } } @media only screen and (min-width: 768px) { #annoyanceLimitPerContact .howItWorks { padding-left: 208px; } } #annoyanceLimitPerContact .howItWorks h3 { font: var(--FONT_highlight_75); } #annoyanceLimitPerContact .howItWorks ol { padding: 0; margin: 0; list-style: none; counter-reset: how-it-works; } #annoyanceLimitPerContact .howItWorks ol li { position: relative; padding-left: 40px; margin-top: 28px; } #annoyanceLimitPerContact .howItWorks ol li::before { content: counter(how-it-works); counter-increment: how-it-works; display: inline-block; position: absolute; left: 0; top: 50%; margin-top: -12px; height: 24px; width: 24px; background-color: var(--COLOR_primary_100); color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_75); line-height: 23px; text-align: center; border-radius: var(--borderRadius_circle); } #annoyanceLimitPerContact .howItWorks ol li:first-child { margin-top: 18px; } peg-subscription-denier-layer#pegSubscriptionDenierLayer .modalboxContent { padding: 30px 16px; text-align: center; background-image: var(--COLOR_gradient_unlock_100_45); } peg-subscription-denier-layer#pegSubscriptionDenierLayer .modalboxContent header h3 { color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_200); margin-bottom: 14px; } peg-subscription-denier-layer#pegSubscriptionDenierLayer .modalboxContent article { margin-bottom: 14px; } peg-report-profile-form { text-align: left; } peg-report-profile-form .safetyHintbox { margin-bottom: 24px; } peg-report-profile-form article h3 { font: var(--FONT_default_75); text-transform: uppercase; } peg-report-profile-form ul.attachOptions li { display: flex; align-items: center; justify-content: space-between; padding-inline: 16px; border-bottom: 1px solid var(--COLOR_supportDark_500); } peg-report-profile-form ul.attachOptions li:last-child { border-bottom: none; } peg-report-profile-form ul.attachOptions li p { margin: 0 !important; } peg-report-profile-form .accuracyOption.wdk-form-toggles label { font: var(--FONT_default_75); } peg-report-profile-form .aboutYou { padding-top: 24px; } peg-report-profile-form .aboutYou h3 { padding-bottom: 8px; } #reportProfileSuccess article .brandIconWrapper { margin-top: 48px; margin-bottom: 24px; display: flex; justify-content: center; } #reportProfileSuccess article .brandIconWrapper .brandIcon { fill: var(--COLOR_primary_100); scale: 3; } #reportProfileSuccess article h3 { margin: 24px 0; font: var(--FONT_highlight_400); text-align: center; } #reportProfileSuccess article p { text-align: center; } peg-welcome-discount-dialog { --wdk-dialog-closing-x-color: var(--COLOR_supportLight_100); } peg-welcome-discount-dialog .contentWrapper { padding: 32px 16px; border-radius: var(--borderRadius_100); background-image: var(--COLOR_gradient_premium_100_45); display: block; text-align: center; color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { peg-welcome-discount-dialog .contentWrapper { padding: 32px 42px; } } peg-welcome-discount-dialog .contentWrapper wdk-lottie-animation { width: 80px; margin-bottom: 16px; } peg-welcome-discount-dialog .contentWrapper h3 { margin: 0 0 40px 0; color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_300); max-width: 100%; } peg-welcome-discount-dialog .contentWrapper .discountBox { position: relative; display: inline-block; padding: 8px 16px; border-radius: var(--borderRadius_75); background-color: var(--COLOR_supportLight_100); animation: 4s pulse-animation 2s infinite cubic-bezier(0, 0.55, 0.45, 1); z-index: 1; } peg-welcome-discount-dialog .contentWrapper .discountBox::before { display: block; content: ""; position: absolute; inset: 0 0 0 0; z-index: -1; border-radius: var(--borderRadius_75); animation: 4s pulse-animation 2.2s infinite cubic-bezier(0.61, 1, 0.88, 1); } peg-welcome-discount-dialog .contentWrapper .discountBox .discountText { display: flex; align-items: center; font: var(--FONT_highlight_300); } peg-welcome-discount-dialog .contentWrapper .discountBox .discountText small { font: var(--FONT_default_75); background: var(--COLOR_premium_100); background-image: var(--COLOR_gradient_premium_100_45); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); } peg-welcome-discount-dialog .contentWrapper .discountBox .discountText span { padding: 0 8px; background: var(--COLOR_premium_100); background-image: var(--COLOR_gradient_premium_100_45); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); } peg-welcome-discount-dialog .contentWrapper .discountBox .discountText br { display: none; } peg-welcome-discount-dialog .contentWrapper .countdownBox { display: flex; flex-direction: column; justify-content: center; margin-top: -24px; padding-top: 12px; width: 100%; height: 116px; min-height: 116px; border: 1px solid var(--COLOR_supportLight_100); border-radius: var(--borderRadius_100); } peg-welcome-discount-dialog .contentWrapper .countdownBox .expireText { font: var(--FONT_default_75); margin-bottom: 8px; padding: 0 8px; } peg-welcome-discount-dialog .contentWrapper .countdownBox .timers p { margin: 0; font: var(--FONT_highlight_200); } peg-welcome-discount-dialog .contentWrapper .countdownBox .timers p.countdownClock { font: var(--FONT_default_200); } peg-welcome-discount-dialog .contentWrapper .countdownBox .timers p wdk-countdown { --wdkCountdown-digits-font: var(--FONT_highlight_200); } peg-welcome-discount-dialog .contentWrapper .bulletpoints { margin-top: 16px; font: var(--FONT_default_50); } peg-welcome-discount-dialog .contentWrapper .wdk-button { margin: 20px 10px; } @keyframes pulse-animation { 0% { box-shadow: 0 0 0 0 #fff; } 25% { box-shadow: 0 0 0 12px hsla(0, 0%, 100%, 0); } 100% { box-shadow: 0 0 0 12px hsla(0, 0%, 100%, 0); } } peg-like-scarcity-celebration-dialog wdk-dialog { --wdk-dialog-body-default-bg-color: var(--COLOR_decoration_200); --wdk-dialog-closing-x-color: var(--COLOR_supportLight_100); } peg-like-scarcity-celebration-dialog wdk-dialog .contentWrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto 1fr; justify-items: center; height: 100%; color: var(--COLOR_supportLight_100); text-align: center; } peg-like-scarcity-celebration-dialog wdk-dialog .contentWrapper .visualWrapper { align-self: end; margin-bottom: 24px; } peg-like-scarcity-celebration-dialog wdk-dialog .contentWrapper .roofLine { font: var(--FONT_default_50); text-transform: uppercase; margin-bottom: 4px; } peg-like-scarcity-celebration-dialog wdk-dialog .contentWrapper h3 { font: var(--FONT_brand_300); font-style: var(--FONT_style_brand); margin-bottom: 16px; } @media (min-width: 0) and (max-width: 374px) { peg-like-scarcity-celebration-dialog wdk-dialog .contentWrapper h3 { font: var(--FONT_brand_200); font-style: var(--FONT_style_brand); } } peg-like-scarcity-celebration-dialog wdk-dialog .contentWrapper p { align-self: start; font: var(--FONT_default_100); margin: 0 0 3px 0; } peg-like-scarcity-snackbar wdk-snackbar { --wdk-snackbar-default-bg-color: var(--COLOR_decoration_200); } peg-like-scarcity-snackbar .contentWrapper { display: grid; grid-template-columns: 34px auto; gap: 8px; align-items: center; min-height: 34px; } peg-highlight-item { display: flex; gap: 8px; padding: 24px; position: relative; flex-direction: column; justify-content: flex-start; align-items: center; min-width: 225px; aspect-ratio: 3/4; border-radius: var(--borderRadius_100); } peg-highlight-item:focus-visible { outline: 2px dashed currentcolor; outline-offset: -2px; } peg-highlight-item .bgIcon { display: flex; height: 64px; width: 64px; padding: 12px; border-radius: var(--borderRadius_circle); background-color: var(--COLOR_supportLight_070); } peg-highlight-item .bgIcon::before { width: 100%; height: auto; } peg-highlight-item .label { display: flex; height: 44px; align-items: center; text-align: center; justify-content: center; margin-top: 8px; } peg-highlight-item .label .designWrapper { font: var(--FONT_highlight_100); overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } peg-highlight-item[mode="supercard"] { min-width: 132px; height: 100%; justify-content: inherit; } peg-highlight-item[mode="supercard"] h2 { width: 100%; align-items: center; font: var(--FONT_default_75); text-transform: uppercase; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 8px; } @media only screen and (min-width: 400px) { peg-highlight-item[mode="supercard"] h2 { margin-bottom: 24px; } } peg-highlight-item[mode="supercard"] .contentWrapper { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; height: 100%; } @media only screen and (min-width: 380px) { peg-highlight-item[mode="supercard"] .contentWrapper { gap: 24px; } } peg-highlight-item[mode="supercard"] .contentWrapper .label { margin-top: initial; } peg-highlight-item[mode="supercard"] .bgIcon { height: 152px; width: 152px; padding: 24px; content-visibility: visible; position: relative; } peg-highlight-item[mode="supercard"] .bgIcon::after { content: ""; position: absolute; width: 212px; height: 152px; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-mask-image: url("../../img/listpages/sparkels.svg"); mask-image: url("../../img/listpages/sparkels.svg"); -webkit-mask-size: cover; mask-size: cover; } peg-highlight-item[mode="supercard"] .bgIcon:has(.similarityBadge) { border: 2px solid var(--COLOR_supportDark_400); } peg-highlight-item[mode="supercard"] .bgIcon .similarityBadge { position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 0); display: flex; text-align: center; border-radius: var(--borderRadius_rounded); font: var(--FONT_default_50); text-transform: uppercase; gap: 5px; padding: 4px 8px; color: var(--COLOR_supportLight_100); } peg-highlight-item[mode="supercard"] .bgIcon .similarityBadge .wdk-icon { height: 14px; width: 14px; } peg-highlight-item[mode="supercard"] .label { height: 68px; margin-bottom: -8px; } peg-highlight-item[mode="supercard"] .label .designWrapper { font: var(--FONT_highlight_300); } peg-highlight-item[mode="supercard"] .content { display: flex; flex-flow: column wrap; text-align: center; width: 100%; } peg-highlight-item[mode="supercard"] .content p.highlightText { height: 100%; width: 100%; margin: 0; font: var(--FONT_default_75); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } @media only screen and (min-width: 380px) { peg-highlight-item[mode="supercard"] .content p.highlightText { font: var(--FONT_default_100); } } peg-highlight-item[mode="reactionAndComment"] { width: calc(100% - 80px); height: auto; margin: 0 auto; } @media only screen and (min-width: 481px) { peg-highlight-item[mode="reactionAndComment"] { max-width: 245px; } } peg-highlight-item[mode="reactionAndComment"] .content { display: flex; flex-flow: column wrap; flex-grow: 1; justify-content: end; text-align: left; width: 100%; } peg-highlight-item[mode="reactionAndComment"] .content:has(.similarityBadge) p.highlightText { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } peg-highlight-item[mode="reactionAndComment"] .content p.highlightText { flex-grow: 1; height: 84px; width: 100%; margin: 0; font: var(--FONT_default_75); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; text-align: center; } peg-highlight-item[mode="reactionAndComment"] .content .similarityBadge { display: flex; width: fit-content; text-align: center; border-radius: var(--borderRadius_200); font: var(--FONT_default_50); text-transform: uppercase; gap: 5px; padding: 4px 8px; margin: 12px auto 0 auto; color: var(--COLOR_supportLight_100); } peg-highlight-item[mode="reactionAndComment"] .content .similarityBadge .wdk-icon { height: 14px; width: 14px; } peg-highlight-item[mode="partnerProfileList"] { height: 300px; cursor: pointer; } peg-highlight-item[mode="partnerProfileList"] peg-pp-like-element { position: absolute; top: 16px; right: 16px; } peg-highlight-item[mode="partnerProfileList"] .content { display: flex; flex-flow: column wrap; text-align: left; height: 120px; width: 100%; } peg-highlight-item[mode="partnerProfileList"] .content p.highlightText { height: 84px; width: 100%; margin: 0; font: var(--FONT_default_75); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; text-align: center; } peg-highlight-item[mode="partnerProfileList"] .content .similarityBadge { display: flex; width: fit-content; text-align: center; border-radius: var(--borderRadius_200); font: var(--FONT_default_50); text-transform: uppercase; gap: 5px; padding: 4px 8px; margin: 14px auto 0 auto; color: var(--COLOR_supportLight_100); } peg-highlight-item[mode="partnerProfileList"] .content .similarityBadge .wdk-icon { height: 14px; width: 14px; } peg-highlight-item[mode="partnerProfileXLPreview"] { align-self: center; width: 312px; border-radius: var(--borderRadius_200); } peg-highlight-item[mode="partnerProfileXLPreview"] .bgIcon { height: 88px; width: 88px; } peg-highlight-item[mode="partnerProfileXLPreview"] .label { height: 56px; } peg-highlight-item[mode="partnerProfileXLPreview"] .label .designWrapper { font: var(--FONT_highlight_200); overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } peg-highlight-item[mode="partnerProfileXLPreview"] .content { display: flex; flex-flow: column wrap; text-align: left; height: 192px; width: 100%; flex: 1; } peg-highlight-item[mode="partnerProfileXLPreview"] .content p.highlightText { height: 164px; width: 100%; margin: 0; font: var(--FONT_default_100); overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; text-align: center; flex: 1; } peg-highlight-item[mode="partnerProfileXLPreview"] .content .similarityBadge { display: flex; width: fit-content; text-align: center; border-radius: var(--borderRadius_200); font: var(--FONT_default_50); text-transform: uppercase; gap: 5px; padding: 4px 8px; margin: 6px auto 0 auto; color: var(--COLOR_supportLight_100); } peg-highlight-item[mode="partnerProfileXLPreview"] .content .similarityBadge .wdk-icon { height: 14px; width: 14px; } peg-highlight-item[mode="myProfileList"] { height: 300px; } peg-highlight-item[mode="myProfileList"] .content { display: flex; flex-flow: column wrap; text-align: left; height: 112px; width: 100%; } peg-highlight-item[mode="myProfileList"] .content:has(button) { justify-content: center; } peg-highlight-item[mode="myProfileList"] .content .openHighlightEditorModal { align-self: center; } peg-highlight-item[mode="myProfileList"] .content p.highlightText { height: 84px; width: 100%; margin: 0; font: var(--FONT_default_75); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; text-align: center; } peg-highlight-item[mode="myProfileList"] .content wdk-approval-tag { margin-top: 8px; } peg-highlight-item[mode="myProfileList"][empty] { justify-content: center; border: 1px dashed var(--COLOR_supportDark_050); } @media only screen and (min-width: 481px) { peg-highlight-item[mode="myProfileList"][empty] .wdk-button { width: 36px; height: 36px; } } peg-highlight-item[mode="myProfileEditor"] { max-width: 225px; } peg-highlight-item[mode="myProfileEditor"][empty] { margin-top: 24px; justify-content: center; border: 1px solid var(--COLOR_supportDark_050); } peg-highlight-item[mode="myProfileEditor"][empty] .noHighlightsIcon { width: 120px; height: 120px; } peg-highlight-item[mode="myProfileEditor"][empty] .noHighlightsIcon::before { background-color: var(--COLOR_primary_100_light); } peg-highlight-item[mode="myProfileEditor"] .js-removeGalleryItem { position: absolute; top: -8px; right: -8px; } peg-highlight-item[category-name="INTERESTS"] { background-color: var(--COLOR_decoration_200_light); } peg-highlight-item[category-name="INTERESTS"] h2 { color: var(--COLOR_decoration_200_dark); } peg-highlight-item[category-name="INTERESTS"] .bgIcon { box-shadow: 0 6px 16px 1px color-mix(in srgb, var(--COLOR_decoration_200), transparent 85%); } peg-highlight-item[category-name="INTERESTS"] .bgIcon::before { color: var(--COLOR_decoration_200); } peg-highlight-item[category-name="INTERESTS"] .bgIcon::after { background-color: var(--COLOR_decoration_200); } peg-highlight-item[category-name="INTERESTS"] .highlightText { color: var(--COLOR_decoration_200_dark); } peg-highlight-item[category-name="INTERESTS"][mode="supercard"] .bgIcon { border-color: var(--COLOR_decoration_200); } peg-highlight-item[category-name="INTERESTS"] .similarityBadge { background-color: var(--COLOR_decoration_200); } peg-highlight-item[category-name="INTERESTS"] .label { color: var(--COLOR_decoration_200); } peg-highlight-item[category-name="SPORTS"] { background-color: var(--COLOR_decoration_300_light); } peg-highlight-item[category-name="SPORTS"] h2 { color: var(--COLOR_decoration_300_dark); } peg-highlight-item[category-name="SPORTS"] .bgIcon { box-shadow: 0 6px 16px 1px color-mix(in srgb, var(--COLOR_decoration_300), transparent 85%); } peg-highlight-item[category-name="SPORTS"] .bgIcon::before { color: var(--COLOR_decoration_300); } peg-highlight-item[category-name="SPORTS"] .bgIcon::after { background-color: var(--COLOR_decoration_300); } peg-highlight-item[category-name="SPORTS"] .highlightText { color: var(--COLOR_decoration_300_dark); } peg-highlight-item[category-name="SPORTS"][mode="supercard"] .bgIcon { border-color: var(--COLOR_decoration_300); } peg-highlight-item[category-name="SPORTS"] .similarityBadge { background-color: var(--COLOR_decoration_300); } peg-highlight-item[category-name="SPORTS"] .label { color: var(--COLOR_decoration_300); } peg-highlight-item[category-name="FAVORITE_CUISINE"] { background-color: var(--COLOR_primary_100_light); } peg-highlight-item[category-name="FAVORITE_CUISINE"] h2 { color: var(--COLOR_primary_100_dark); } peg-highlight-item[category-name="FAVORITE_CUISINE"] .bgIcon { box-shadow: 0 6px 16px 1px color-mix(in srgb, var(--COLOR_primary_100), transparent 85%); } peg-highlight-item[category-name="FAVORITE_CUISINE"] .bgIcon::before { color: var(--COLOR_primary_100); } peg-highlight-item[category-name="FAVORITE_CUISINE"] .bgIcon::after { background-color: var(--COLOR_primary_100); } peg-highlight-item[category-name="FAVORITE_CUISINE"] .highlightText { color: var(--COLOR_primary_100_dark); } peg-highlight-item[category-name="FAVORITE_CUISINE"][mode="supercard"] .bgIcon { border-color: var(--COLOR_primary_100); } peg-highlight-item[category-name="FAVORITE_CUISINE"] .similarityBadge { background-color: var(--COLOR_primary_100); } peg-highlight-item[category-name="FAVORITE_CUISINE"] .label { color: var(--COLOR_primary_100); } peg-highlight-item[category-name="HOLIDAY"] { background-color: var(--COLOR_decoration_100_light); } peg-highlight-item[category-name="HOLIDAY"] h2 { color: var(--COLOR_decoration_100_dark); } peg-highlight-item[category-name="HOLIDAY"] .bgIcon { box-shadow: 0 6px 16px 1px color-mix(in srgb, var(--COLOR_decoration_100), transparent 85%); } peg-highlight-item[category-name="HOLIDAY"] .bgIcon::before { color: var(--COLOR_decoration_100); } peg-highlight-item[category-name="HOLIDAY"] .bgIcon::after { background-color: var(--COLOR_decoration_100); } peg-highlight-item[category-name="HOLIDAY"] .highlightText { color: var(--COLOR_decoration_100_dark); } peg-highlight-item[category-name="HOLIDAY"][mode="supercard"] .bgIcon { border-color: var(--COLOR_decoration_100); } peg-highlight-item[category-name="HOLIDAY"] .similarityBadge { background-color: var(--COLOR_decoration_100); } peg-highlight-item[category-name="HOLIDAY"] .label { color: var(--COLOR_decoration_100); } peg-matching-points .wdk-button.t-size_50:not(.t-iconOnly) { padding: 0 8px; } peg-matching-points .wdk-button .icon { margin-right: 4px; } peg-matching-points .wdk-button .icon svg.wdk-icon { width: 22px; height: 22px; } peg-matching-points .wdk-button .icon img { width: auto; height: auto; } peg-matching-points .wdk-button .text { font: var(--FONT_default_200); } peg-compatibility-insight-card { display: block; background: var(--COLOR_secondary_100); border-radius: var(--borderRadius_100); overflow: hidden; } peg-compatibility-insight-card[type="cardWithDimension"] { padding: 24px; } peg-compatibility-insight-card[type="cardWithDimension"] h2 { font: var(--FONT_default_50); text-transform: uppercase; color: var(--COLOR_primary_100_dark) !important; padding-bottom: 16px; } peg-compatibility-insight-card[type="cardWithDimension"] .insightContainer { display: flex; place-items: center; flex-direction: column; } peg-compatibility-insight-card[type="cardWithDimension"] .insightContainer img { width: 200px; height: auto; margin-bottom: 16px; } peg-compatibility-insight-card[type="cardWithDimension"] .insightContainer h3 { width: 100%; font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); color: var(--COLOR_primary_100); padding-bottom: 0; margin-bottom: 8px; } peg-compatibility-insight-card[type="cardWithDimension"] .insightContainer p { width: 100%; font: var(--FONT_default_75); color: var(--COLOR_primary_100_dark); margin: 0; } peg-compatibility-insight-card[type="cardWithDimension"] .buttonContainer { display: flex; justify-content: space-between; margin-top: 16px; text-align: right; } peg-compatibility-insight-card[type="cardWithDimension"] .buttonContainer peg-pp-like-element .wdk-button.is-liked .icon .wdk-icon { fill: var(--COLOR_primary_100) !important; } peg-compatibility-insight-card[type="cardWithDimension"] .buttonContainer peg-pp-like-element .wdk-button .icon .wdk-icon { stroke: var(--COLOR_primary_100) !important; } peg-compatibility-insight-card[type="cardWithoutDimension"] { display: grid; padding: 32px 24px; } peg-compatibility-insight-card[type="cardWithoutDimension"].animatePictures .myPic { animation: flyToMe1 1200ms cubic-bezier(0.42, 0, 0.31, 1) forwards; } peg-compatibility-insight-card[type="cardWithoutDimension"].animatePictures .partnerPic { animation: flyToMe2 1200ms cubic-bezier(0.42, 0, 0.31, 1) forwards; } peg-compatibility-insight-card[type="cardWithoutDimension"] h2 { font: var(--FONT_brand_200) !important; font-style: var(--FONT_style_brand) !important; color: var(--COLOR_primary_100) !important; text-align: center; padding-bottom: 24px !important; text-transform: initial !important; } peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer { display: block; position: relative; min-height: 200px; max-width: 100%; margin: 0 auto; } peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .photoWrap { position: absolute; } peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .photoWrap.myPic { right: 65px; transform: rotate(-8deg); opacity: 0; } peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .photoWrap.partnerPic { left: 65px; transform: rotate(8deg); opacity: 0; } peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .photoWrap .photo { display: block; height: 185px; width: 145px; background-color: var(--COLOR_supportDark_500); background-repeat: no-repeat; background-size: cover; box-shadow: var(--boxShadow_small); border-radius: var(--borderRadius_100); background-position: center; } @media only screen and (min-width: 768px) { peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .photoWrap .photo { height: 162px; width: 127px; } } peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .photoWrap .photo::after { content: ""; position: absolute; display: block; inset: 0 0 0 0; border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_100); z-index: 2; } peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .matchingPoints { position: absolute; bottom: -6px; left: 50%; transform: translate(-50%, 0); z-index: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; height: 42px; padding: 14px; background: var(--COLOR_secondary_100); color: var(--COLOR_primary_100); border-radius: var(--borderRadius_100); } @media only screen and (min-width: 768px) { peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .matchingPoints { bottom: 17px; } } peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .matchingPoints .wdk-icon { width: 28px; height: 28px; fill: var(--COLOR_primary_100); margin-right: 6px; } peg-compatibility-insight-card[type="cardWithoutDimension"] .insightContainer .matchingPoints .matchingPointsValue { font: var(--FONT_highlight_300); color: var(--COLOR_primary_100); z-index: 10; } peg-compatibility-insight-card[type="cardWithoutDimension"] .buttonToCompatibilityPage { width: fit-content; margin: 32px auto 0 auto; } @media only screen and (min-width: 768px) { peg-compatibility-insight-card[type="cardWithoutDimension"] .buttonToCompatibilityPage { margin: 15px auto 0 auto; } } peg-compatibility-insight-card[type="compact"] { margin: 0 40px; padding: 24px; } @media only screen and (min-width: 481px) { peg-compatibility-insight-card[type="compact"] { max-width: 312px; margin: 0 auto; } } peg-compatibility-insight-card[type="compact"] .insightContainer { display: flex; place-items: center; flex-direction: column; } peg-compatibility-insight-card[type="compact"] .insightContainer img { width: 100px; height: auto; margin-bottom: 16px; } peg-compatibility-insight-card[type="compact"] .insightContainer h3 { width: 100%; font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); color: var(--COLOR_primary_100); padding-bottom: 0; margin-bottom: 8px; } peg-compatibility-insight-card[type="compact"] .insightContainer p { font: var(--FONT_default_75); color: var(--COLOR_primary_100_dark); margin: 0; } peg-compatibility-insight-card[type="message"] { max-width: 245px; margin: 0; padding: 24px 24px 40px 24px; } peg-compatibility-insight-card[type="message"] .insightContainer { display: flex; place-items: center; flex-direction: column; } peg-compatibility-insight-card[type="message"] .insightContainer img { width: 100px; padding-bottom: 16px; } peg-compatibility-insight-card[type="message"] .insightContainer h3 { width: 100%; font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); color: var(--COLOR_primary_100); text-align: left; padding-bottom: 0; margin-bottom: 8px; text-transform: initial; } peg-compatibility-insight-card[type="message"] .insightContainer p { font: var(--FONT_default_75); color: var(--COLOR_primary_100_dark); margin: 0; } @keyframes flyToMe1 { 100% { transform: rotate(-3deg); right: -2px; opacity: 1; } } @keyframes flyToMe2 { 100% { left: -2px; transform: rotate(3deg); opacity: 1; } } peg-write-reaction-message #messagingBox { position: relative; display: flex; align-items: flex-end; } peg-write-reaction-message #messagingBox .wdk-form-text { padding-bottom: 0; } peg-write-reaction-message #messagingBox .wdk-form-text .designWrapper { border-radius: var(--borderRadius_100); background-color: var(--COLOR_supportDark_600); flex-direction: row; } peg-write-reaction-message #messagingBox .wdk-form-text .inputWrapper { background-color: var(--COLOR_supportDark_600); border-radius: var(--borderRadius_200); padding: 10px 0 10px 16px; width: initial; flex-grow: 1; } peg-write-reaction-message #messagingBox .wdk-form-text .inputWrapper textarea { resize: none; border: none; -webkit-overflow-scrolling: touch; margin-top: 0; height: 28px; min-height: 76px; max-height: 82px; overflow-y: auto !important; padding: 2px; background-color: rgba(0, 0, 0, 0); } peg-write-reaction-message #messagingBox .wdk-form-text .inputWrapper textarea[readonly] { border-color: var(--COLOR_supportDark_080); box-shadow: none; -webkit-user-select: none; user-select: none; } peg-write-reaction-message #messagingBox #sendTextMessage { align-self: flex-end; margin: 0 8px 7px 4px; min-width: 36px; } peg-write-reaction-message #messagingBox #sendTextMessage.is-greyedOut { background-color: rgba(0, 0, 0, 0); border: 3px solid var(--COLOR_primary_100); box-shadow: none; opacity: 0.4; } peg-write-reaction-message #messagingBox #sendTextMessage.is-greyedOut .wdk-icon { fill: var(--COLOR_supportDark_100); } peg-write-reaction-message #messagingBox .contactRightsBadge { display: none; width: auto; white-space: nowrap; padding: 4px 8px; margin-right: 10px; color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_50); border-radius: var(--borderRadius_rounded); cursor: pointer; align-self: flex-end; } peg-write-reaction-message #messagingBox.is-purchaseSubscription .inputWrapper, peg-write-reaction-message #messagingBox.is-redeemMatchUnlock .inputWrapper, peg-write-reaction-message #messagingBox.is-purchaseMatchUnlock .inputWrapper { display: flex; flex-direction: column; align-items: center; margin: 2px; border-radius: calc(var(--borderRadius_100) - 2px); width: calc(100% - 4px); } peg-write-reaction-message #messagingBox.is-purchaseSubscription .inputWrapper .contactRightsBadge, peg-write-reaction-message #messagingBox.is-redeemMatchUnlock .inputWrapper .contactRightsBadge, peg-write-reaction-message #messagingBox.is-purchaseMatchUnlock .inputWrapper .contactRightsBadge { display: block; } peg-write-reaction-message #messagingBox.is-purchaseSubscription .wdk-form-text .designWrapper, peg-write-reaction-message #messagingBox.is-purchaseSubscription .wdk-form-text .contactRightsBadge { background-image: var(--COLOR_gradient_premium_100_45); } peg-write-reaction-message #messagingBox.is-redeemMatchUnlock .wdk-form-text .designWrapper, peg-write-reaction-message #messagingBox.is-redeemMatchUnlock .wdk-form-text .contactRightsBadge, peg-write-reaction-message #messagingBox.is-purchaseMatchUnlock .wdk-form-text .designWrapper, peg-write-reaction-message #messagingBox.is-purchaseMatchUnlock .wdk-form-text .contactRightsBadge { background-image: var(--COLOR_gradient_unlock_100_45); } body .wdk-button.favoriteToggle { transition: background-color 0.2s; } body .wdk-button.favoriteToggle .icon .wdk-icon { fill: rgba(0, 0, 0, 0); stroke: var(--COLOR_supportLight_100); stroke-width: 1.6px; } body .wdk-button.favoriteToggle.is-animated { animation: favoriteToggle 0.4s ease-in-out forwards; } body .wdk-button.favoriteToggle.is-favorite { opacity: 1; } body .wdk-button.favoriteToggle.is-favorite:hover { background-color: var(--COLOR_supportDark_080); } body .wdk-button.favoriteToggle.is-favorite .wdk-icon { fill: var(--COLOR_supportLight_100); } @keyframes favoriteToggle { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } #wdk-passwordRestrictionBox.t-default { position: absolute; bottom: 78%; width: 100%; margin-top: 20px; margin-bottom: 20px; padding: 12px; border: 2px solid var(--COLOR_primary_100); font: var(--FONT_default_75); border-radius: var(--borderRadius_75); z-index: 1; background: var(--COLOR_supportDark_600); } #wdk-passwordRestrictionBox.t-default::before, #wdk-passwordRestrictionBox.t-default::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -15px; } #wdk-passwordRestrictionBox.t-default::before { border-color: var(--COLOR_primary_100) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid; border-width: 15px 15px 9px 15px; z-index: 0; } #wdk-passwordRestrictionBox.t-default::after { margin-left: -13px; margin-top: 0; border-color: var(--COLOR_supportDark_600) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-style: solid; border-width: 12px 13px 9px 13px; z-index: 1; } #wdk-passwordRestrictionBox.t-default.success { border-color: var(--COLOR_alertSuccess_100); } #wdk-passwordRestrictionBox.t-default.success::before { border-color: var(--COLOR_alertSuccess_100) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); } #wdk-passwordRestrictionBox.t-default ul { padding-left: 3px; } #wdk-passwordRestrictionBox.t-default ul li { position: relative; display: flex; margin: 13px 0 0 0; list-style-type: none !important; align-items: center; flex: 1 0 auto; } #wdk-passwordRestrictionBox.t-default ul li .wdk-icon { width: 16px; height: 16px; fill: var(--COLOR_primary_100); margin-right: 4px; } #wdk-passwordRestrictionBox.t-default ul li .wdk-icon.icon_check { display: none; } #wdk-passwordRestrictionBox.t-default ul li.success { color: var(--COLOR_alertSuccess_100); } #wdk-passwordRestrictionBox.t-default ul li.success .wdk-icon { fill: var(--COLOR_alertSuccess_100); } #wdk-passwordRestrictionBox.t-default ul li.success .wdk-icon.icon_check { display: inline-block; } #wdk-passwordRestrictionBox.t-default ul li.success .wdk-icon.icon_x { display: none; } #wdk-passwordRestrictionBox.t-default ul li span { width: 100%; } #ratingAfterPurchaseLayer p { margin: 0 0 28px 0; } #ratingAfterPurchaseLayer .smileyContainer { display: flex; justify-content: center; margin-bottom: 12px; } #ratingAfterPurchaseLayer .smileyContainer .smiley { margin: 0 3px; } @media only screen and (max-width: 360px) { #ratingAfterPurchaseLayer .smileyContainer .smiley .wdk-button { width: 48px; height: 48px; } } #ratingAfterPurchaseLayer .smileyContainer .smiley .wdk-button.rated { background-color: var(--COLOR_primary_100); } #ratingAfterPurchaseLayer .smileyContainer .smiley .wdk-button.rated .wdk-icon { fill: var(--COLOR_supportLight_100); } #ratingAfterPurchaseLayer .infoText { margin: 8px 0 18px 0; font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); text-align: center; } .usercentricsModalbox .modalboxContent { text-align: center; } .usercentricsModalbox .modalboxContent header h3 { width: auto; padding: 32px 16px 32px 16px; font: var(--FONT_highlight_300); color: var(--COLOR_primary_100); } .usercentricsModalbox .modalboxContent article { padding: 0 16px; } .usercentricsModalbox .modalboxContent article p.infoText { font: var(--FONT_default_75); color: var(--COLOR_supportDark_080); margin: 12px 0 0 0; } .usercentricsModalbox .modalboxContent .heartContainer { display: flex; justify-content: center; align-items: center; min-height: 60px; } .usercentricsModalbox .modalboxContent .heartContainer li.heart { height: 40px; width: 40px; margin: 0 4px; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button { height: 40px; width: 40px; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button:hover { opacity: 1; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button::after { display: none; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button span.text svg { overflow: visible; width: 40px; height: 40px; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button span.text svg path { transform-origin: center; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button span.text svg:first-child { position: absolute; top: 0; left: 0; z-index: 1; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button span.text svg:last-child { position: absolute; top: 0; left: 0; z-index: 0; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button .icon_heart_fill-a { fill: var(--COLOR_supportLight_100); stroke: var(--COLOR_primary_100); stroke-width: 2px; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button .icon_heart_fill-b { fill: rgba(0, 0, 0, 0); } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button.rated span.text svg { width: 42px; height: 42px; } .usercentricsModalbox .modalboxContent .heartContainer li.heart .wdk-button.rated .icon_heart_fill-a { stroke-opacity: 0; } .usercentricsModalbox .modalboxContent .heartContainer li.heart#heart01 .wdk-button.rated .icon_heart_fill-a { fill: url("#paint0_linear_svgHeart01"); } .usercentricsModalbox .modalboxContent .heartContainer li.heart#heart02 .wdk-button.rated .icon_heart_fill-a { fill: url("#paint0_linear_svgHeart02"); } .usercentricsModalbox .modalboxContent .heartContainer li.heart#heart03 .wdk-button.rated .icon_heart_fill-a { fill: url("#paint0_linear_svgHeart03"); } .usercentricsModalbox .modalboxContent .heartContainer li.heart#heart04 .wdk-button.rated .icon_heart_fill-a { fill: url("#paint0_linear_svgHeart04"); } .usercentricsModalbox .modalboxContent .heartContainer li.heart#heart05 .wdk-button.rated .icon_heart_fill-a { fill: url("#paint0_linear_svgHeart05"); } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue1"] .icon_heart_fill-b.svgHeart01 { animation: pulseHeart 2000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue1"] .icon_heart_fill-a.svgHeart01 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue2"] .icon_heart_fill-b.svgHeart02 { animation: pulseHeart 2000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue2"] .icon_heart_fill-b.svgHeart01 { animation: pulseHeart 1960ms ease-in-out forwards; animation-delay: 50ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue2"] .icon_heart_fill-a.svgHeart02 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue2"] .icon_heart_fill-a.svgHeart01 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 50ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue3"] .icon_heart_fill-b.svgHeart03 { animation: pulseHeart 2000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue3"] .icon_heart_fill-b.svgHeart02 { animation: pulseHeart 1960ms ease-in-out forwards; animation-delay: 50ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue3"] .icon_heart_fill-b.svgHeart01 { animation: pulseHeart 1940ms ease-in-out forwards; animation-delay: 100ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue3"] .icon_heart_fill-a.svgHeart03 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue3"] .icon_heart_fill-a.svgHeart02 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 50ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue3"] .icon_heart_fill-a.svgHeart01 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 100ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue4"] .icon_heart_fill-b.svgHeart04 { animation: pulseHeart 2000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue4"] .icon_heart_fill-b.svgHeart03 { animation: pulseHeart 1960ms ease-in-out forwards; animation-delay: 50ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue4"] .icon_heart_fill-b.svgHeart02 { animation: pulseHeart 1940ms ease-in-out forwards; animation-delay: 100ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue4"] .icon_heart_fill-b.svgHeart01 { animation: pulseHeart 1920ms ease-in-out forwards; animation-delay: 150ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue4"] .icon_heart_fill-a.svgHeart04 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue4"] .icon_heart_fill-a.svgHeart03 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 50ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue4"] .icon_heart_fill-a.svgHeart02 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 100ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue4"] .icon_heart_fill-a.svgHeart01 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 150ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-b.svgHeart05 { animation: pulseHeart 2000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-b.svgHeart04 { animation: pulseHeart 1960ms ease-in-out forwards; animation-delay: 50ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-b.svgHeart03 { animation: pulseHeart 1940ms ease-in-out forwards; animation-delay: 100ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-b.svgHeart02 { animation: pulseHeart 1920ms ease-in-out forwards; animation-delay: 150ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-b.svgHeart01 { animation: pulseHeart 1900ms ease-in-out forwards; animation-delay: 200ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-a.svgHeart05 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 0s; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-a.svgHeart04 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 50ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-a.svgHeart03 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 100ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-a.svgHeart02 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 150ms; } .usercentricsModalbox .modalboxContent .heartContainer.is-animated[data-rated-value="ratedValue5"] .icon_heart_fill-a.svgHeart01 { animation: scaleHeart 1000ms ease-in-out forwards; animation-delay: 200ms; } .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="1"] #heart01 .icon_heart_fill-a { fill: var(--COLOR_primary_100_light); } .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="2"] #heart01 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="2"] #heart02 .icon_heart_fill-a { fill: var(--COLOR_primary_100_light); } .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="3"] #heart01 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="3"] #heart02 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="3"] #heart03 .icon_heart_fill-a { fill: var(--COLOR_primary_100_light); } .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="4"] #heart01 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="4"] #heart02 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="4"] #heart03 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="4"] #heart04 .icon_heart_fill-a { fill: var(--COLOR_primary_100_light); } .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="5"] #heart01 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="5"] #heart02 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="5"] #heart03 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="5"] #heart04 .icon_heart_fill-a, .usercentricsModalbox .modalboxContent .heartContainer[data-hover-value="5"] #heart05 .icon_heart_fill-a { fill: var(--COLOR_primary_100_light); } .usercentricsModalbox#usercentricsRatingLayerSuccess .modalboxContent { min-height: 360px; justify-content: center; } .usercentricsModalbox#usercentricsRatingLayerSuccess header { display: flex; flex-direction: column; justify-content: center; align-items: center; } .usercentricsModalbox#usercentricsRatingLayerSuccess header .wdk-icon { width: 40px; height: 40px; fill: var(--COLOR_primary_100); margin: 26px 0 0 0; } .usercentricsModalbox#usercentricsRatingLayerSuccess header h3 { padding-top: 46px; } .usercentricsModalbox#usercentricsRatingLayerError .modalboxContent { min-height: initial; } .usercentricsModalbox#usercentricsRatingLayerFollowupPositive header h3, .usercentricsModalbox#usercentricsRatingLayerFollowupNegative header h3 { color: var(--COLOR_supportDark_100); font: var(--FONT_default_200); } @keyframes pulseHeart { 0% { fill: rgba(0, 0, 0, 0); transform: scale(1); } 25% { fill: var(--COLOR_primary_100); transform: scale(1.7); opacity: 0.2; } 40% { transform: scale(1); opacity: 0.2; } 80% { opacity: 0.2; } 100% { opacity: 0; } } @keyframes scaleHeart { 0% { transform: scale(1); stroke-opacity: 1; } 30% { transform: scale(0.7); stroke-opacity: 0.5; } 50% { transform: scale(1); stroke-opacity: 0; } 100% { transform: scale(1); stroke-opacity: 0; } } peg-quick-rejection-trigger .wdk-button { width: 100%; } peg-quick-rejection-trigger .wdk-button.t-iconOnly { width: 100%; } peg-quick-rejection-trigger .wdk-button.t-iconOnly .icon .wdk-icon { width: 24px; height: 24px; } peg-quick-rejection-trigger .wdk-button.t-primarySkin2:disabled, peg-quick-rejection-trigger .wdk-button.t-primarySkin2.disabled, peg-quick-rejection-trigger .wdk-button.t-primarySkin2[disabled] { opacity: 1; } peg-quick-rejection-trigger .wdk-button.t-primarySkin2:active, peg-quick-rejection-trigger .wdk-button.t-primarySkin2.active { opacity: 1; background-color: var(--COLOR_supportDark_600); } peg-profile-invisible-warning { position: absolute; width: 100%; top: 98px; left: 0; padding: 6px; font: var(--FONT_default_50); color: var(--COLOR_supportLight_100); background-color: var(--COLOR_alertWarning_100); text-align: center; } @media only screen and (min-width: 481px) { peg-profile-invisible-warning { top: 170px; } } peg-profile-invisible-warning .contentWrapper { display: inline-flex; align-items: center; } peg-profile-invisible-warning a { color: inherit; } peg-profile-invisible-warning .wdk-icon.icon_warning { min-width: 24px; min-height: 24px; fill: var(--COLOR_supportLight_100); margin-right: 6px; } #partnerSuggestionListPage #pageWrapper:has(peg-profile-invisible-warning) { padding-top: 155px; } @media only screen and (min-width: 768px) { #partnerSuggestionListPage #pageWrapper:has(peg-profile-invisible-warning) { padding-top: 216px; } } #partnerSuggestionListPage peg-profile-invisible-warning { top: 100px; } @media only screen and (min-width: 768px) { #partnerSuggestionListPage peg-profile-invisible-warning { top: 147px; } } #myProfilePage #pageWrapper:has(peg-profile-invisible-warning), #welcomePage #pageWrapper:has(peg-profile-invisible-warning) { padding-top: 87px; } @media only screen and (min-width: 768px) { #myProfilePage #pageWrapper:has(peg-profile-invisible-warning), #welcomePage #pageWrapper:has(peg-profile-invisible-warning) { padding-top: 137px; } } #myProfilePage peg-profile-invisible-warning, #welcomePage peg-profile-invisible-warning { top: 48px; } @media only screen and (min-width: 768px) { #myProfilePage peg-profile-invisible-warning, #welcomePage peg-profile-invisible-warning { top: 98px; } } @media only screen and (min-width: 768px) { .allIcebreakerModal .modalboxContent:not(.has-smallContent) { max-width: 90%; } } @media only screen and (min-width: 980px) { .allIcebreakerModal .modalboxContent:not(.has-smallContent) { max-width: 980px; } } .allIcebreakerModal .modalboxContent #loadingLayer { display: flex; margin: 0 auto; background-color: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); height: 100%; justify-content: center; align-items: center; flex-direction: column; } @media only screen and (min-width: 768px) { .allIcebreakerModal .modalboxContent #loadingLayer { height: 552px; } } .allIcebreakerModal .modalboxContent #loadingLayer .wdk-icon { width: 92px; height: 92px; fill: var(--COLOR_primary_100); } .allIcebreakerModal .modalboxContent #loadingLayer .wdk-loadingSpinner { display: block; visibility: hidden; } .allIcebreakerModal .modalboxContent #loadingLayer .wdk-loadingSpinner.is-loading { visibility: visible; } .allIcebreakerModal .modalboxContent #mainContent { display: none; height: 100%; position: relative; } .allIcebreakerModal .modalboxContent #mainContent article { position: relative; overflow: hidden; padding: 0; height: 100%; max-width: 100%; } @media only screen and (min-width: 768px) { .allIcebreakerModal .modalboxContent #mainContent article { height: 500px; } } .allIcebreakerModal .modalboxContent #mainContent article #playBoard { position: relative; height: 100%; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard::after { content: ""; opacity: 0; transition: opacity 0.3s ease-in; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard.is-loading::after { position: absolute; inset: 0 0 0 0; z-index: 9; background-color: var(--COLOR_supportDark_090); opacity: 1; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard.is-loading #timeoutLoadingSpinner { position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; height: 100%; } @media only screen and (min-width: 768px) { .allIcebreakerModal .modalboxContent #mainContent article #playBoard.is-loading #timeoutLoadingSpinner { height: calc(100% - 20px); } } .allIcebreakerModal .modalboxContent #mainContent article #playBoard #timeoutLoadingSpinner { display: none; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar { position: relative; width: 100%; height: 10px; z-index: 6; background-color: var(--COLOR_supportDark_080); } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; height: 10px; width: 0; background-color: var(--COLOR_primary_100); transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar::after { content: "0/5"; position: absolute; left: 0; top: 10px; padding: 5px 10px; background-color: var(--COLOR_supportDark_080); color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_75); border-bottom-right-radius: var(--borderRadius_75); } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair1::before { width: 20px; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair1::after { content: "1/5"; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair2::before { width: 20%; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair2::after { content: "2/5"; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair3::before { width: 40%; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair3::after { content: "3/5"; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair4::before { width: 60%; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair4::after { content: "4/5"; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair5::before { width: 80%; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair5::after { content: "5/5"; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair6::before { width: 100%; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .progressBar.pair6::after { content: "5/5"; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair { position: absolute; width: 100%; right: -10%; height: 100%; transition: all cubic-bezier(0.19, 1, 0.22, 1); transition-duration: 0.5s; background-color: var(--COLOR_supportLight_100); opacity: 0.5; z-index: 0; visibility: hidden; } @media only screen and (min-width: 768px) { .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair { right: 0; top: -5%; } } @media (min-width: 0) and (max-width: 767px) { .ios .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair { height: calc(100% - 10px); } } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair.is-visible { height: inherit; top: 0; right: 0; opacity: 1; z-index: 1; visibility: visible; } @media only screen and (min-width: 768px) { .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair.is-visible { top: 0; } } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair.is-alreadySelected { right: 0; top: 0; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li { position: absolute; width: 100%; transition: all cubic-bezier(0.19, 1, 0.22, 1); transition-duration: 0.9s; cursor: pointer; height: 49.8%; } @media only screen and (min-width: 768px) { .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li { display: inline-block; width: 49.89%; height: 100%; transition-duration: 1.2s; } } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li .wdk-loadingSpinner { position: absolute; z-index: -1; top: 50%; left: 50%; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li .image { display: block; background-position: center; background-size: cover; width: 100%; height: 100%; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li .successCheckWrapper { display: none; opacity: 0; transition: opacity 0.9s linear; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li.is-selected { z-index: 2; } @media (min-width: 0) and (max-width: 767px) { .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li.is-selected { height: 100%; } } @media only screen and (min-width: 768px) { .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li.is-selected { width: 100%; } } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li.is-selected .successCheckWrapper { position: absolute; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; opacity: 0.75; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li.is-selected .successCheckWrapper .successCheck { content: ""; position: relative; width: 75px; height: 75px; border-radius: var(--borderRadius_circle); border: 3px solid var(--COLOR_supportLight_080); background-color: var(--COLOR_supportLight_100); } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li.is-selected .successCheckWrapper .successCheck::after { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_check_circle_filled.svg); mask-image: url(../../img/icons/single_color/icon_check_circle_filled.svg); vertical-align: -3px; width: 70px; height: 70px; content: ""; position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -35px; background-color: var(--COLOR_alertSuccess_100); } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li label { display: block; width: 100%; height: 100%; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li.firstImage { top: 0; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li.secondImage { bottom: 0; } @media only screen and (min-width: 768px) { .allIcebreakerModal .modalboxContent #mainContent article #playBoard .imagePair li.secondImage { top: 0; right: 0; } } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .messagingErrors { position: absolute; bottom: 52px; margin: 0 12px; width: calc(100% - 24px); z-index: 11; } .allIcebreakerModal .modalboxContent #mainContent article #playBoard .messagingErrors .wdk-styledHintBox { z-index: 1; } .allIcebreakerModal .modalboxContent #mainContent footer { position: absolute; left: 0; bottom: 0; padding: 0 14px; z-index: 10; background-color: var(--COLOR_supportDark_080); } .allIcebreakerModal .modalboxContent #mainContent footer .buttonsContainer { justify-content: flex-end; } .allIcebreakerModal .modalboxContent #mainContent footer .buttonsContainer .buttonItem { flex-grow: initial; flex-basis: initial; } .allIcebreakerModal .modalboxContent #mainContent footer .t-plainHighlightSkin2.is-shuffleNotAllowed { opacity: 0.5; pointer-events: none; cursor: default; } .allIcebreakerModal .modalboxContent footer { margin-top: 0; } .allIcebreakerModal .overlayInModalbox { position: absolute; top: 0; width: 100%; height: 100%; z-index: 10; display: flex; justify-content: center; align-items: center; background-color: var(--COLOR_supportDark_090); } .allIcebreakerModal .overlayInModalbox article { max-width: calc(100% - 75px); padding: 0; text-align: center; color: var(--COLOR_supportLight_100); overflow-y: hidden; } @media only screen and (min-width: 768px) { .allIcebreakerModal .overlayInModalbox article { max-width: 430px; } } .allIcebreakerModal .overlayInModalbox article h2 { font: var(--FONT_default_300); } .allIcebreakerModal .overlayInModalbox article p { margin-top: 30px; margin-bottom: 50px; } .allIcebreakerModal .overlayInModalbox#imagereleaseLayer .photoWrapper { display: inline-block; width: 80px; height: 80px; overflow: hidden; border: 2px solid var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); } @media only screen and (min-width: 768px) { .allIcebreakerModal .overlayInModalbox#imagereleaseLayer .photoWrapper { width: 120px; height: 120px; } } .allIcebreakerModal .overlayInModalbox#imagereleaseLayer .photoWrapper .photo { display: inline-block; width: inherit; height: inherit; background-color: var(--COLOR_supportDark_070); background-repeat: no-repeat; background-size: 100% auto; background-position: center; } .allIcebreakerModal .overlayInModalbox#imagereleaseLayer .photoWrapper .photo.is-blurred { filter: blur(6px); } .allIcebreakerModal .overlayInModalbox#imagereleaseLayer h2 { margin-top: 24px; } @media only screen and (min-width: 768px) { .allIcebreakerModal .overlayInModalbox#imagereleaseLayer h2 { margin-left: 36px; text-align: left; } } .allIcebreakerModal .overlayInModalbox#imagereleaseLayer .wdk-form-toggles { padding-bottom: 36px; } .allIcebreakerModal .overlayInModalbox#imagereleaseLayer .wdk-form-toggles label { text-align: left; } .icebreakerResultModal #partyLayer { z-index: 50; } .icebreakerResultModal #partyLayer.animationFinished { z-index: 0; } .icebreakerResultModal #partyLayer .icebreakerUserPhotosAnim { position: absolute; left: 0; top: 0; width: 100%; height: 90vh; padding: 0 20px; } .icebreakerResultModal #partyLayer .icebreakerUserPhotosAnim .userPhotos { position: relative; width: 100%; z-index: 100; top: 250px; display: flex; } @media only screen and (min-width: 768px) { .icebreakerResultModal #partyLayer .icebreakerUserPhotosAnim .userPhotos { margin-top: -7px; } } @media only screen and (min-width: 768px) { .icebreakerResultModal #partyLayer .icebreakerUserPhotosAnim .userPhotos { top: 200px; } } .icebreakerResultModal #partyLayer .icebreakerUserPhotosAnim .userPhotos li { position: absolute; display: inline-block; width: 50%; text-align: center; opacity: 0; } .icebreakerResultModal #partyLayer .icebreakerUserPhotosAnim .userPhotos li span { display: inline-block; width: 76px; height: 76px; background-color: var(--COLOR_supportDark_080); border: 3px solid var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); background-size: 100% auto; background-position: center; } @media only screen and (min-width: 768px) { .icebreakerResultModal #partyLayer .icebreakerUserPhotosAnim .userPhotos li span { width: 120px; height: 120px; } } .icebreakerResultModal #partyLayer .icebreakerLogoWrapper { position: absolute; width: 100%; height: 100%; padding: 0 20px; z-index: 3; left: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; } .icebreakerResultModal #partyLayer .icebreakerLogoWrapper.has-endposition { z-index: 0; } .icebreakerResultModal #partyLayer .icebreakerLogoWrapper .icebreakerLogo { display: flex; position: relative; align-items: center; justify-content: center; width: 74px; height: 74px; margin-bottom: 234px; } .icebreakerResultModal #partyLayer .icebreakerLogoWrapper .icebreakerLogo .borderFrames { position: absolute; top: 0; left: 0; } .icebreakerResultModal #partyLayer .icebreakerLogoWrapper .icebreakerLogo img { display: none; position: absolute; width: 74px; height: 74px; left: 0; top: 0; } .icebreakerResultModal #partyLayer .icebreakerLogoWrapper .icebreakerLogo img.is-visible { display: block !important; } .icebreakerResultModal #partyLayer .background { position: absolute; width: 100%; height: 100%; z-index: 2; background-color: var(--COLOR_primary_100); } .icebreakerResultModal #partyLayer .background.has-endposition { z-index: 0; } .icebreakerResultModal #partyLayer .background .godrays { position: absolute; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; opacity: 0; transform: translateY(-123px); } .icebreakerResultModal #partyLayer .background .godrays img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .icebreakerResultModal #partyLayer .counterText { opacity: 0; } .icebreakerResultModal #partyLayer .counterAndTextWrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; display: flex; justify-content: center; align-items: center; flex-direction: column; } .icebreakerResultModal #partyLayer .counterAndTextWrapper .counter { display: block; font: var(--FONT_default_400); color: var(--COLOR_supportLight_100); margin-top: 104px; } .icebreakerResultModal #partyLayer .counterAndTextWrapper .counter.has-mainColorText { color: var(--COLOR_primary_100); } .icebreakerResultModal #partyLayer .counterAndTextWrapper .counter .counterWrapper { display: inline-block; position: relative; } .icebreakerResultModal #partyLayer .counterAndTextWrapper .counter [class^="counterElement"] { display: inline-block; position: absolute; top: 0; left: 0; opacity: 0; } .icebreakerResultModal #partyLayer .counterAndTextWrapper .counter .spacer { visibility: hidden; } .icebreakerResultModal #partyLayer .counterAndTextWrapper p { margin-top: 100px; color: var(--COLOR_supportLight_100); opacity: 0; font: var(--FONT_highlight_300); } @media only screen and (min-width: 481px) { .icebreakerResultModal #partyLayer .counterAndTextWrapper p { font: var(--FONT_highlight_400); } } .icebreakerResultModal #mainContent { display: flex; flex-direction: column; height: 100%; } @media only screen and (min-width: 768px) { .icebreakerResultModal #mainContent { height: 90vh; } } .icebreakerResultModal #mainContent header { padding: 0 20px; box-shadow: 0 10px 20px 0 var(--COLOR_supportDark_070); z-index: 1; height: 110px; } @media only screen and (min-width: 768px) { .icebreakerResultModal #mainContent header { height: 128px; } } .icebreakerResultModal #mainContent header h2 { margin-top: 14px; text-align: center; color: var(--COLOR_primary_100); line-height: 1rem; position: absolute; width: calc(100% - 40px); top: 0; } @media only screen and (min-width: 768px) { .icebreakerResultModal #mainContent header h2 { top: 10px; } } .icebreakerResultModal #mainContent header h2 .logoSpacer { display: block; visibility: hidden; margin: 0 auto; width: 32px; height: 32px; } .icebreakerResultModal #mainContent header h2 span { font: var(--FONT_default_200); } .icebreakerResultModal #mainContent header .userPhotos { position: relative; top: 62px; width: 100%; z-index: 1; display: flex; opacity: 0; } @media only screen and (min-width: 768px) { .icebreakerResultModal #mainContent header .userPhotos { top: 68px; margin-top: -8px; } } .icebreakerResultModal #mainContent header .userPhotos.is-visible { opacity: 1; } .icebreakerResultModal #mainContent header .userPhotos li { display: inline-block; width: 50%; text-align: center; } .icebreakerResultModal #mainContent header .userPhotos li span { display: inline-block; width: 76px; height: 76px; background-color: var(--COLOR_supportDark_080); border: 3px solid var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); background-size: 100% auto; background-position: center; } @media only screen and (min-width: 768px) { .icebreakerResultModal #mainContent header .userPhotos li span { width: 120px; height: 120px; } } .icebreakerResultModal #mainContent article { position: relative; background-color: var(--COLOR_supportDark_040); } .icebreakerResultModal #mainContent article .imageArea { display: none; position: relative; z-index: 0; } .icebreakerResultModal #mainContent article .imageArea.is-visible { display: block; } .icebreakerResultModal #mainContent article .imageArea .row { position: relative; margin-bottom: 20px; font-size: 0; line-height: 0; overflow: hidden; border-radius: var(--borderRadius_75); z-index: 1; } .icebreakerResultModal #mainContent article .imageArea .row::after { content: ""; display: table; clear: both; } .icebreakerResultModal #mainContent article .imageArea .row:last-of-type { margin-bottom: 0; } .icebreakerResultModal #mainContent article .imageArea .row .image { position: relative; display: inline-block; height: 130px; background-position: center; background-size: cover; background-color: var(--COLOR_supportDark_070); } .icebreakerResultModal #mainContent article .imageArea .row.has-sameImage .image { width: 100%; } .icebreakerResultModal #mainContent article .imageArea .row.has-differentImage .image { width: calc(50% - 1px); } .icebreakerResultModal #mainContent article .imageArea .row.has-differentImage .image::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--COLOR_supportLight_080); } .icebreakerResultModal #mainContent article .imageArea .row .image + .image { float: right; } wdk-dialog#usedUpUnlocksInSubscriptionDialog { color-scheme: dark; --wdk-dialog-closing-x-color: var(--COLOR_supportLight_100); } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal { min-height: 300px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--COLOR_supportLight_100); } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal .content { display: flex; justify-content: center; flex-direction: column; flex-grow: 1; gap: 32px; padding: 48px; border-radius: var(--borderRadius_100); background-image: var(--COLOR_gradient_unlock_100_180); } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal .content h2 { margin-top: 16px; font: var(--FONT_highlight_200); } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal .content .counterContainer { display: flex; justify-content: center; align-items: center; margin-block: 8px; } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal .content .counterContainer wdk-lottie-animation { position: absolute; width: 100%; max-width: 380px; padding: 8px; } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal .content .counterContainer .innerCounterContainer { display: flex; justify-content: center; position: relative; } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal .content .counterContainer .innerCounterContainer .remainingTime { position: absolute; display: flex; gap: 6px; justify-content: center; align-items: center; height: 30px; padding: 16px; top: -15px; border-radius: var(--borderRadius_rounded); background: var(--COLOR_supportLight_100); color: var(--COLOR_supportDark_100); } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal .content .counterContainer .innerCounterContainer .counterText { display: flex; align-items: center; border-radius: var(--borderRadius_100); background: var(--COLOR_supportLight_050); height: 100px; padding: 32px 16px 24px 16px; } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal .content .explainText { font: var(--FONT_default_75); color: var(--COLOR_supportLight_100); } wdk-dialog#usedUpUnlocksInSubscriptionDialog peg-used-up-unlocks-in-subscription-modal .content a { width: fit-content; align-self: center; } :root { --COLOR_match_unlock_gradient_border: linear-gradient( to right, var(--COLOR_supportLight_100), var(--COLOR_supportLight_100) ) padding-box, var(--COLOR_gradient_unlock_100_180) border-box; } peg-redeem-match-unlock form, #freeUnlocksOfferModal .modalboxContent { text-align: center; background-image: var(--COLOR_gradient_unlock_100_180); } peg-redeem-match-unlock form a.closeX, #freeUnlocksOfferModal .modalboxContent a.closeX { background-color: var(--COLOR_supportDark_050); } peg-redeem-match-unlock form article, #freeUnlocksOfferModal .modalboxContent article { overflow-x: hidden; } peg-redeem-match-unlock form .icon .icon_x, #freeUnlocksOfferModal .modalboxContent .icon .icon_x { fill: var(--COLOR_supportLight_100); } .ios peg-redeem-match-unlock form article, .ios #freeUnlocksOfferModal .modalboxContent article { flex-grow: 1; } peg-redeem-match-unlock form article, #freeUnlocksOfferModal .modalboxContent article { min-width: 240px; } peg-redeem-match-unlock form .headlineImg, #freeUnlocksOfferModal .modalboxContent .headlineImg { display: flex; margin-top: 40px; flex-grow: 1; align-items: flex-end; justify-content: center; } peg-redeem-match-unlock form .unlockAmountWrapper, #freeUnlocksOfferModal .modalboxContent .unlockAmountWrapper { position: relative; height: 200px; min-height: 200px; display: flex; flex-grow: 2; flex-direction: column; align-items: center; justify-content: center; } peg-redeem-match-unlock form .unlockAmountWrapper wdk-lottie-animation, #freeUnlocksOfferModal .modalboxContent .unlockAmountWrapper wdk-lottie-animation { position: absolute; width: 100%; max-width: 380px; height: 100%; } peg-redeem-match-unlock form .unlockAmountWrapper .unlockAmountBox, #freeUnlocksOfferModal .modalboxContent .unlockAmountWrapper .unlockAmountBox { position: absolute; width: 80%; max-width: 300px; padding: 24px 0 16px 0; border: 1px solid var(--COLOR_supportLight_100); border-radius: var(--borderRadius_100); background-color: var(--COLOR_supportLight_050); color: var(--COLOR_supportLight_100); } peg-redeem-match-unlock form .unlockAmountWrapper .unlockAmountBox .countNo, #freeUnlocksOfferModal .modalboxContent .unlockAmountWrapper .unlockAmountBox .countNo { position: absolute; display: flex; justify-content: center; align-items: center; top: -20px; left: calc(50% - 20px); color: var(--COLOR_defaultText); font: var(--FONT_highlight_200); width: 40px; height: 40px; background-color: #fff; border-radius: var(--borderRadius_circle); box-shadow: var(--boxShadow_small); } peg-redeem-match-unlock form .unlockAmountWrapper .unlockAmountBox p, #freeUnlocksOfferModal .modalboxContent .unlockAmountWrapper .unlockAmountBox p { overflow: hidden; } peg-redeem-match-unlock form .bottomInfos, #freeUnlocksOfferModal .modalboxContent .bottomInfos { flex-grow: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 0 40px; } peg-redeem-match-unlock form .bottomInfos .unlockButton, peg-redeem-match-unlock form .bottomInfos .js-closeModalbox, #freeUnlocksOfferModal .modalboxContent .bottomInfos .unlockButton, #freeUnlocksOfferModal .modalboxContent .bottomInfos .js-closeModalbox { align-self: center; } peg-redeem-match-unlock form { border-radius: 20px; } peg-redeem-match-unlock-dialog wdk-dialog[closing-x="inside"] dialog .closingX svg line { stroke: var(--COLOR_supportLight_100); } #matchUnlock #matchUnlockConfetti { position: fixed; display: flex; justify-content: center; inset: 0 0 0 0; z-index: 211; } #matchUnlock #matchUnlockConfetti wdk-lottie-animation { width: 100%; } #freeUnlocksOfferModal { color: var(--COLOR_supportLight_100); } #freeUnlocksOfferModal .bottomInfos { max-height: 170px; } #freeUnlocksOfferModal .bottomInfos p { margin-top: 40px; font: var(--FONT_default_50); } #freeUnlocksOfferModal .bottomInfos p a { font: var(--FONT_highlight_50); color: var(--COLOR_supportLight_100); text-decoration: none; } #newUnlocksPurchasedNotification .wdk-icon { display: none; } @media only screen and (min-width: 768px) { #newUnlocksPurchasedNotification .wdk-icon { display: inline-block; width: 34px; height: 34px; margin-bottom: 8px; fill: #fff; } } peg-reject-partner-modal .partnerDetails { margin-bottom: 32px; visibility: visible; position: static; left: initial; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; gap: 8px; font: var(--FONT_default_300); } @media (width >= 0) and (width <= 360px) { peg-reject-partner-modal .partnerDetails { font: var(--FONT_default_100); } } @media only screen and (min-width: 481px) { peg-reject-partner-modal .partnerDetails { flex-direction: row; } } peg-reject-partner-modal .partnerDetails > div { text-align: center; } peg-reject-partner-modal .partnerDetails .primaryPartnerLabel { font: var(--FONT_highlight_300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (width >= 0) and (width <= 360px) { peg-reject-partner-modal .partnerDetails .primaryPartnerLabel { font: var(--FONT_highlight_100); } } @media (max-width: 480px) { peg-reject-partner-modal .partnerDetails .primaryPartnerLabel { width: 100%; } } peg-reject-partner-modal .partnerImage { display: flex; justify-content: center; } @media only screen and (min-width: 481px) { peg-reject-partner-modal .partnerImage { margin-bottom: 24px; } } peg-reject-partner-modal .partnerImage .photo { position: relative; width: 128px; height: 192px; background: var(--COLOR_supportDark_500); border-radius: var(--borderRadius_75); box-shadow: var(--boxShadow_mid); overflow: hidden; } @media (width >= 0) and (width <= 360px) { peg-reject-partner-modal .partnerImage .photo { width: 108px; height: 152px; } } peg-reject-partner-modal .partnerImage .photo::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 10, 0.06) 15.63%, rgba(0, 0, 10, 0.17) 32.8%, rgba(0, 0, 10, 0.32) 50.51%, rgba(0, 0, 10, 0.42) 67.98%, rgba(0, 0, 10, 0.45) 100% ); } peg-reject-partner-modal .partnerImage .photo .userPhoto { width: 128px; height: 192px; object-fit: cover; } @media (width >= 0) and (width <= 360px) { peg-reject-partner-modal .partnerImage .photo .userPhoto { width: 108px; height: 152px; } } peg-reject-partner-modal .partnerImage .photo.is-unlockedUser::after { background-image: var(--COLOR_gradient_unlock_150_0_fade); opacity: 0.7; } peg-reject-partner-modal.wdk-modalbox .modalboxContent article { max-width: 100%; } peg-reject-partner-modal footer { flex-wrap: wrap; } peg-reject-partner-modal footer .hintText { text-align: center; font: var(--FONT_default_50); gap: 4px; margin-top: 32px; } peg-reject-partner-modal footer .hintText .wdk-icon { margin-bottom: 2px; vertical-align: middle; width: 10px; height: 10px; fill: var(--COLOR_supportLight_100); } peg-onboarding-imrl { --wdk-dialog-body-default-bg-color: var(--COLOR_tertiary_100); text-align: center; display: block; } peg-onboarding-imrl wdk-gallery { display: flex; flex-direction: column; height: 100%; } peg-onboarding-imrl wdk-gallery::part(galleryPager) { position: absolute; bottom: 100px; width: 100%; } peg-onboarding-imrl wdk-gallery::part(pagerItemActive) { border: none; width: 7px; height: 7px; } peg-onboarding-imrl wdk-gallery::part(pagerItem) { background-color: var(--COLOR_supportDark_500); border: none; width: 7px; height: 7px; } peg-onboarding-imrl wdk-gallery .steps { height: 100%; display: flex; flex-direction: column; } peg-onboarding-imrl wdk-gallery .steps article { display: grid; grid-template-rows: auto auto auto; gap: 48px; max-width: 100%; margin-top: 28px; padding: 24px 24px 24px 24px; } @media only screen and (height >= 540px) { peg-onboarding-imrl wdk-gallery .steps article { gap: 28px; } } peg-onboarding-imrl wdk-gallery .steps article h3 { width: 100%; padding: 0; margin: 0; font: var(--FONT_brand_400); align-self: end; } peg-onboarding-imrl wdk-gallery .steps article p { margin: 0; } peg-onboarding-imrl wdk-gallery .steps article p:last-child { margin-bottom: 3px; } @media (min-width: 0) and (max-width: 389px) { peg-onboarding-imrl wdk-gallery .steps article p { min-height: 90px; } } @media (min-width: 390) and (max-width: 519px) { peg-onboarding-imrl wdk-gallery .steps article p { min-height: 70px; } } peg-onboarding-imrl wdk-gallery .steps article img { justify-self: center; } @media (min-width: 0) and (max-width: 389px) { peg-onboarding-imrl wdk-gallery .steps article img { width: 248px; height: auto; } } peg-onboarding-imrl wdk-gallery .steps footer { padding: 48px 4px 16px 4px; } peg-onboarding-imrl wdk-gallery .steps footer .buttonsContainer .buttonItem .wdk-button { width: auto; } wdk-dialog:has(peg-commerce-feature-carrot) { color-scheme: dark; --wdk-dialog-closing-x-color: var(--COLOR_supportLight_100); } peg-commerce-feature-carrot { display: block; max-width: 600px; overflow: hidden; text-align: center; color: var(--COLOR_supportLight_100); background-image: var(--COLOR_gradient_premium_100_45); border-top-left-radius: var(--borderRadius_100); border-top-right-radius: var(--borderRadius_100); } @media only screen and (min-width: 481px) { peg-commerce-feature-carrot { border-bottom-left-radius: var(--borderRadius_100); border-bottom-right-radius: var(--borderRadius_100); } } peg-commerce-feature-carrot .contentRow { padding: 32px 16px 24px 16px; } peg-commerce-feature-carrot .contentRow svg { width: 64px; height: 64px; fill: var(--COLOR_supportLight_100); margin-bottom: 16px; } peg-commerce-feature-carrot .contentRow .photo { display: block; width: 100px; height: 100px; border-radius: var(--borderRadius_circle); margin: 30px auto 20px auto; background-size: contain; border: 2px solid var(--COLOR_supportLight_100); } peg-commerce-feature-carrot .contentRow.fromMessagingPhotos .partnerPhoto { position: relative; display: flex; max-width: 236px; margin: 0 auto; } peg-commerce-feature-carrot .contentRow.fromMessagingPhotos .partnerPhoto .carrotSVG { position: absolute; top: -4px; left: 3px; width: 100%; text-align: center; } peg-commerce-feature-carrot .contentRow.fromMessagingPhotos .partnerPhoto .carrotSVG img { width: 100px; height: auto; } peg-commerce-feature-carrot .contentRow.fromMessagingPhotos .photo { width: 70px; height: 70px; margin: 30px 0 20px 0; } peg-commerce-feature-carrot .contentRow.fromMessagingPhotos .photo:last-child { margin-left: 96px; } peg-commerce-feature-carrot .contentRow h2 { margin-bottom: 16px; font: var(--FONT_highlight_200); } peg-commerce-feature-carrot .contentRow p { font: var(--FONT_default_100); } peg-commerce-feature-carrot .footerRow { padding: 24px 16px; background: var(--COLOR_supportLight_100); } #welcomePage #pageWrapper { padding-top: 48px; } @media only screen and (min-width: 768px) { #welcomePage #pageWrapper { padding-top: 98px; } } #welcomePage #pc_welcomepage_banner_fullWidth { padding: 0 12px; } #welcomePage .messageListCard .messageList { position: relative; margin-bottom: 24px; } #welcomePage .messageListCard .messageList .messageItem { position: relative; display: flex; align-items: center; width: 100%; text-decoration: none; padding-top: 16px; padding-bottom: 16px; } @media only screen and (min-width: 768px) { #welcomePage .messageListCard .messageList .messageItem { padding-top: 20px; padding-bottom: 20px; } } .no-touchevents #welcomePage .messageListCard .messageList .messageItem:hover { background-color: var(--COLOR_supportDark_040); } #welcomePage .messageListCard .messageList .messageItem::after { content: ""; display: block; position: absolute; top: 0; right: 0; border-bottom: 1px solid var(--COLOR_supportDark_070); width: calc(100% - 72px); } #welcomePage .messageListCard .messageList .messageItem .photoWrapper { position: relative; width: 80px; height: 80px; overflow: hidden; border-radius: var(--borderRadius_circle); flex-shrink: 0; } @media only screen and (min-width: 481px) { #welcomePage .messageListCard .messageList .messageItem .photoWrapper { width: 90px; height: 90px; } } #welcomePage .messageListCard .messageList .messageItem .photoWrapper .photo { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; } #welcomePage .messageListCard .messageList .messageItem .messageHeader { position: relative; margin-left: 16px; vertical-align: top; width: calc(100% - 96px); } #welcomePage .messageListCard .messageList .messageItem .messageHeader .primaryPartnerLabelRow { position: relative; color: var(--COLOR_defaultText); margin-top: 0; margin-bottom: 4px; font: var(--FONT_highlight_100); white-space: nowrap; } #welcomePage .messageListCard .messageList .messageItem .messageHeader .primaryPartnerLabelRow > span { display: inline-block; vertical-align: middle; } #welcomePage .messageListCard .messageList .messageItem .messageHeader .primaryPartnerLabelRow .primaryPartnerLabel { display: inline-block; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 52px); } @media only screen and (min-width: 481px) { #welcomePage .messageListCard .messageList .messageItem .messageHeader .primaryPartnerLabelRow .primaryPartnerLabel { max-width: none; } } #welcomePage .messageListCard .messageList .messageItem .messageHeader .messageText { color: var(--COLOR_defaultText); margin-bottom: 8px; } #welcomePage .messageListCard .messageList .messageItem .messageHeader .time { margin-top: 3px; font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); } #welcomePage .messageListCard .messageList .messageItem .answerButton { position: absolute; bottom: 4px; right: 16px; } @media only screen and (min-width: 768px) { #welcomePage .messageListCard .messageList .messageItem .answerButton { bottom: 12px; right: 20px; } } #welcomePage .messageListCard .messageList .messageItem .answerButton .text { display: none; } @media only screen and (min-width: 768px) { #welcomePage .messageListCard .messageList .messageItem .answerButton .text { display: inline; } } #welcomePage .messageListCard .messageList .messageItem.is-unread::before { display: block; content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; background-color: var(--COLOR_primary_100); width: 4px; } #welcomePage .messageListCard .messageList .messageItem.is-favorite .wdk-icon { width: 18px; height: 18px; fill: var(--COLOR_supportDark_100); vertical-align: middle; } .no-touchevents #welcomePage .messageListCard .messageList .messageItem.is-favorite:hover .wdk-icon { fill: var(--COLOR_primary_100); } #welcomePage .messageListCard .messageList .messageItem.is-matchUnlocked .photoWrapper { border-radius: var(--borderRadius_circle); background: var(--COLOR_match_unlock_gradient_border); border: 2px solid rgba(0, 0, 0, 0); } #welcomePage .messageListCard .messageList::after { content: ""; display: block; position: absolute; bottom: 0; right: 0; border-bottom: 1px solid var(--COLOR_supportDark_070); width: calc(100% - 72px); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList h2#suggestionCount { float: left; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 24px; margin-bottom: 24px; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem { position: relative; color: var(--COLOR_supportLight_100); text-decoration: none; outline-offset: 0; max-width: 100%; aspect-ratio: 1/1; overflow: hidden; } @media only screen and (width >= 487px) { #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem { aspect-ratio: 2/3; } } @media only screen and (min-width: 768px) { #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem { aspect-ratio: 1/1; } } @media only screen and (width >= 875px) { #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem { aspect-ratio: 2/3; } } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem.is-matchUnlocked .photoWrapper { background: var(--COLOR_match_unlock_gradient_border); border: 2px solid rgba(0, 0, 0, 0); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem.is-matchUnlocked .photoWrapper .photo { border-radius: calc(var(--borderRadius_100) - 2px); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem p { text-align: left; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .photoWrapper { position: absolute; top: 0; left: 0; width: 100%; background-color: var(--COLOR_supportDark_040); aspect-ratio: 1/1; border-radius: var(--borderRadius_100); overflow: hidden; } @media only screen and (width >= 487px) { #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .photoWrapper { aspect-ratio: 2/3; } } @media only screen and (min-width: 768px) { #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .photoWrapper { aspect-ratio: 1/1; } } @media only screen and (width >= 875px) { #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .photoWrapper { aspect-ratio: 2/3; } } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .photoWrapper .photo { width: 100%; height: 100%; display: block; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper { display: grid; grid-template-rows: 1fr auto; position: absolute; inset: 0 0 0 0; z-index: 10; padding: 16px; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .onPicture .matchingPoints { display: inline-flex; align-items: center; margin-top: 0; position: absolute; z-index: 300; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .onPicture .matchingPoints .wdk-button .icon .wdk-icon { width: 22px; height: 22px; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .onPicture .matchingPoints .wdk-button .text { font: var(--FONT_default_200); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .onPicture .favoriteToggle { position: absolute; top: 8px; right: -2px; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture h4 { font: var(--FONT_default_300); margin-top: 8px; margin-bottom: 3px; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture h4 .primaryPartnerLabel { overflow: hidden; max-width: calc(100% - 33px); display: inline-block; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; font: var(--FONT_highlight_300); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .occupation { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation { margin-top: 8px; width: 100%; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation .onlineNow { padding-left: 4px; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation .onlineNow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--COLOR_alertOnline_100); border-radius: var(--borderRadius_circle); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation .linkToDistance { cursor: pointer; position: relative; padding-left: 16px; pointer-events: all; display: inline-flex; align-items: center; background-image: var(--COLOR_gradient_premium_100_45); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation .linkToDistance .wdk-icon { position: absolute; left: 4px; width: 12px; height: 12px; fill: var(--COLOR_supportLight_100); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation .zip, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerInfoWrapper .belowPicture .onlineAndLocation .distance { white-space: nowrap; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList a.partnerItem .partnerProfileContent { display: none; } @media only screen and (width >= 487px) { #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList.oneItemOnly a.partnerItem { max-width: 50%; } } @media only screen and (min-width: 768px) { #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList.oneItemOnly a.partnerItem { aspect-ratio: 1/1; max-width: 100%; } } @media only screen and (width >= 875px) { #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList.oneItemOnly a.partnerItem { aspect-ratio: 2/3; max-width: 50%; } } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList .wdk-premiumElement { display: flex; justify-content: center; background-size: cover; background-position: bottom; color: var(--COLOR_supportLight_100); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList .wdk-premiumElement p { font: var(--FONT_default_75); } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .partnerList .wdk-premiumElement a { width: 100%; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .wdk-paginator { margin-top: 0; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .emptyListCard { color: var(--COLOR_supportDark_090); clear: both; padding-bottom: 24px; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .emptyListCard .iconVisual { text-align: center; margin-bottom: 28px; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .emptyListCard .iconVisual .wdk-icon { width: 88px; height: 88px; fill: var(--COLOR_supportDark_050); } #welcomePage #visitorsCard .visitorWrapper { position: relative; text-align: center; display: flex; justify-content: space-around; } #welcomePage #visitorsCard .visitorWrapper .partnerItem { position: relative; text-decoration: none; } #welcomePage #visitorsCard .visitorWrapper .partnerItem.is-matchUnlocked .photoWrapper { border-radius: var(--borderRadius_circle); background: var(--COLOR_match_unlock_gradient_border); border: 4px solid rgba(0, 0, 0, 0); } #welcomePage #visitorsCard .visitorWrapper .partnerItem .photoWrapper { position: relative; display: inline-block; overflow: hidden; border-radius: var(--borderRadius_circle); margin-bottom: 4px; width: 56px; height: 56px; opacity: 1; transition: opacity 0.3s; } @media only screen and (min-width: 481px) { #welcomePage #visitorsCard .visitorWrapper .partnerItem .photoWrapper { width: 80px; height: 80px; } } @media only screen and (min-width: 980px) { #welcomePage #visitorsCard .visitorWrapper .partnerItem .photoWrapper { width: 90px; height: 90px; } } .no-touchevents #welcomePage #visitorsCard .visitorWrapper .partnerItem .photoWrapper:hover { opacity: 0.75; } #welcomePage #visitorsCard .visitorWrapper .partnerItem .photoWrapper .photo { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center; } #welcomePage #visitorsCard .visitorWrapper .partnerItem.premiumBox .photoWrapper::before { content: ""; display: block; position: absolute; top: 0; left: 0; border-radius: var(--borderRadius_circle); width: 100%; height: 100%; background-image: url("../../img/payment/premium_bg.svg"); background-size: cover; opacity: 0.8; } #welcomePage #visitorsCard .visitorWrapper .partnerItem.premiumBox .photoWrapper::after { content: ""; background-image: url("../../img/listpages/visitor_list_premium_icon.svg"); background-repeat: no-repeat; display: block; position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px; width: 32px; height: 32px; } #welcomePage #visitorsCard .visitorWrapper .partnerItem .matchingPoints { font: var(--FONT_highlight_100); display: flex; align-items: center; justify-content: center; } #welcomePage #visitorsCard .visitorWrapper .partnerItem .matchingPoints img { margin-right: 4px; } #welcomePage #visitorsCard .visitorWrapper .partnerItem .matchingPoints .wdk-icon { fill: var(--COLOR_primary_100); } #welcomePage #visitorsCard #visitListsDisabled, #welcomePage #visitorsCard .wdk-premiumElement { margin-bottom: 16px; } #welcomePage #firstStepsModal .modalboxContent { max-width: 660px; } #welcomePage #firstStepsModal .modalboxContent .picCol { display: none; } @media only screen and (min-width: 768px) { #welcomePage #firstStepsModal .modalboxContent .picCol { display: block; float: right; margin-left: 24px; margin-bottom: 24px; text-align: right; } } @media (max-width: 480px) { #welcomePage #earlyBirdLayer .modalboxContent { max-height: 100%; margin: 0; border-radius: 0; } } #welcomePage #earlyBirdLayer .modalboxContent article img { max-width: 100%; } #welcomePage #earlyBirdLayer .modalboxContent article a { text-decoration: none; } #welcomePage #earlyBirdLayer .modalboxContent article svg { width: 100%; max-width: 320px; } @media only screen and (min-width: 768px) { #welcomePage #earlyBirdLayer .modalboxContent article svg { max-width: 780px; } } #welcomePage #earlyBirdLayer .modalboxContent article #addCountdownHere { position: absolute; margin: 0 auto; margin-bottom: 10px; text-align: center; top: 66%; left: 0; right: 0; } @media only screen and (min-width: 768px) { #welcomePage #earlyBirdLayer .modalboxContent article #addCountdownHere { position: absolute; width: 39%; margin-left: 0; inset: 71% 6% auto auto; } } @media only screen and (min-width: 768px) and (max-height: 579px) { #welcomePage #earlyBirdLayer .modalboxContent article #addCountdownHere { display: none; } } #welcomePage #earlyBirdLayer .modalboxContent article #addCountdownHere #counter { margin: 0 auto; } #welcomePage #earlyBirdLayer article .contentWrapper { position: relative; text-align: center; } #welcomePage #earlyBirdLayer #ps_modalwidth, #welcomePage #earlyBirdLayer #ps_modalheadline { display: none; } #welcomePage #ps_earlyBirdLayerButtonRow { margin-top: 4px; text-align: center; } @media only screen and (min-width: 768px) { #welcomePage #ps_earlyBirdLayerButtonRow { text-align: right; } } #welcomePage .modalboxAllOptinLayer .modalboxContent { color: var(--COLOR_supportLight_100); background-color: var(--COLOR_primary_100); } #welcomePage .modalboxAllOptinLayer .modalboxContent article { max-width: 100%; } #welcomePage #nameAndPhotoOptinModal .modalboxContent h3 { font: var(--FONT_highlight_100); text-align: center; margin: 24px 0 16px 0; } #welcomePage #nameAndPhotoOptinModal .modalboxContent footer .buttonsContainer { flex-direction: column; } #welcomePage #nameAndPhotoOptinModal footer .buttonsContainer { flex-direction: column; } #welcomePage #nameAndPhotoOptinModal #infoLayerServerErrorMessage, #welcomePage #nameAndPhotoOptinModal #serverErrorMessage { width: 100%; margin-top: 0; } #welcomePage #nameAndPhotoOptinModal #infoLayerServerErrorMessage.is-visible, #welcomePage #nameAndPhotoOptinModal #serverErrorMessage.is-visible { margin-bottom: 16px; } #welcomePage #nameAndPhotoOptinModal .profileImageContainer { margin-top: 20px; display: flex; justify-content: center; } #welcomePage #nameAndPhotoOptinModal .profileImageContainer .imageWrapper { position: relative; display: inline-block; } #welcomePage #nameAndPhotoOptinModal .profileImageContainer .imageWrapper .profileImage { width: 125px; height: 125px; border-radius: var(--borderRadius_circle); border: 2px solid #fff; display: inline-block; background-color: var(--COLOR_supportLight_070); } #welcomePage #nameAndPhotoOptinModal .profileImageContainer .imageWrapper .imageUnblurred { position: relative; margin-left: -30px; z-index: 1; } #welcomePage #nameAndPhotoOptinAccepted article { text-align: center; } #welcomePage #nameAndPhotoOptinAccepted article .icon_check { fill: var(--COLOR_supportLight_100); background-color: var(--COLOR_supportLight_050); border: 2px solid var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); padding: 10px; width: 90px; height: 90px; margin: 20px auto; } #welcomePage #messageCard.messageListCard, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList, #welcomePage #visitorsCard.visitorsListCard { padding-bottom: 24px; } #welcomePage #messageCard.messageListCard h2 span, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList h2 span, #welcomePage #visitorsCard.visitorsListCard h2 span { color: var(--COLOR_defaultText); } #welcomePage #messageCard.messageListCard h2 .wdk-icon, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList h2 .wdk-icon, #welcomePage #visitorsCard.visitorsListCard h2 .wdk-icon { display: inline-block; position: relative; top: 8px; width: 26px; height: 26px; margin-right: 6px; fill: var(--COLOR_primary_100); } #welcomePage #messageCard.messageListCard .seeAllLink, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .seeAllLink, #welcomePage #visitorsCard.visitorsListCard .seeAllLink { text-align: right; } #welcomePage #messageCard.messageListCard .emptyListCard, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .emptyListCard, #welcomePage #visitorsCard.visitorsListCard .emptyListCard { color: var(--COLOR_supportDark_400); padding-bottom: 0; } #welcomePage #messageCard.messageListCard .emptyListCard .iconVisual, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .emptyListCard .iconVisual, #welcomePage #visitorsCard.visitorsListCard .emptyListCard .iconVisual { text-align: center; margin-bottom: 28px; } #welcomePage #messageCard.messageListCard .emptyListCard .iconVisual .wdk-icon, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .emptyListCard .iconVisual .wdk-icon, #welcomePage #visitorsCard.visitorsListCard .emptyListCard .iconVisual .wdk-icon { width: 88px; height: 88px; fill: var(--COLOR_supportDark_050); } #welcomePage #messageCard.messageListCard .emptyListCard p, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .emptyListCard p, #welcomePage #visitorsCard.visitorsListCard .emptyListCard p { text-align: center; margin-bottom: 24px; } #welcomePage #messageCard.messageListCard .emptyListCard .buttonWrapper, #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .emptyListCard .buttonWrapper, #welcomePage #visitorsCard.visitorsListCard .emptyListCard .buttonWrapper { text-align: right; } #welcomePage #partnerSuggestionCard.partnerListCard.is-legacyList .shortPvlTip { margin: 0 0 16px 0; } @media (max-width: 480px) { #welcomePage #premiumBannerCard { margin-bottom: 24px; } } #welcomePage #matchNotificationCard { position: relative; overflow: hidden; padding: 45px 24px 43px 24px; border-radius: var(--borderRadius_100); background: var(--COLOR_primary_100); cursor: pointer; } #welcomePage #matchNotificationCard peg-match-notification-card { display: grid; grid-auto-rows: auto; justify-items: center; } #welcomePage #matchNotificationCard peg-match-notification-card .partnerList { display: grid; grid-template-columns: 54px 69px 54px; align-items: center; margin-bottom: 11px; } #welcomePage #matchNotificationCard peg-match-notification-card .partnerList .photoWrapper { position: relative; border-radius: var(--borderRadius_75); overflow: hidden; width: 54px; height: 72px; grid-row: 1; } #welcomePage #matchNotificationCard peg-match-notification-card .partnerList .photoWrapper::after { content: ""; position: absolute; display: block; inset: 0 0 0 0; border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_75); z-index: 2; } #welcomePage #matchNotificationCard peg-match-notification-card .partnerList .photoWrapper .photo img { object-fit: cover; } #welcomePage #matchNotificationCard peg-match-notification-card .partnerList .photoWrapper .photo.is-unlockedByMe::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: var(--COLOR_gradient_unlock_150_0_fade); opacity: 0.7; } #welcomePage #matchNotificationCard peg-match-notification-card .partnerList .photoWrapper:nth-child(1) { grid-column: 2; width: 69px; height: 92px; z-index: 1; } #welcomePage #matchNotificationCard peg-match-notification-card .partnerList .photoWrapper:nth-child(2) { grid-column: 3; rotate: 4deg; right: 15px; margin-top: 6px; } #welcomePage #matchNotificationCard peg-match-notification-card .partnerList .photoWrapper:nth-child(3) { grid-column: 1; rotate: -4deg; left: 15px; margin-top: 6px; } #welcomePage #matchNotificationCard peg-match-notification-card .contentWrapper { font: var(--FONT_highlight_200); color: var(--COLOR_supportLight_100); text-align: center; margin-bottom: 17px; } #welcomePage #matchNotificationCard.is-visuallyHidden { opacity: 0; } #welcomePage #firstStepsCard { position: relative; display: block; min-height: 360px; border-radius: var(--borderRadius_100); background: var(--COLOR_supportDark_040); padding: 24px; } @media only screen and (min-width: 481px) { #welcomePage #firstStepsCard { min-height: 338px; } } @media only screen and (min-width: 768px) { #welcomePage #firstStepsCard { min-height: 360px; border-radius: var(--borderRadius_100); background: rgba(0, 0, 0, 0); padding: 0; margin-top: 4px; } } #welcomePage #firstStepsCard wdk-gallery { display: none; position: static; } @media only screen and (min-width: 768px) { #welcomePage #firstStepsCard wdk-gallery { margin: 0 24px; } } #welcomePage #firstStepsCard wdk-gallery:defined { display: block; } #welcomePage #firstStepsCard wdk-gallery .steps h2 { font: var(--FONT_default_75); text-transform: uppercase; padding-bottom: 24px; } @media only screen and (min-width: 768px) { #welcomePage #firstStepsCard wdk-gallery .steps h2 { padding-top: 24px; } } #welcomePage #firstStepsCard wdk-gallery .steps .stepIcon { text-align: center; margin-bottom: 20px; height: 64px; } #welcomePage #firstStepsCard wdk-gallery .steps .stepIcon img { height: 100%; width: auto; } #welcomePage #firstStepsCard wdk-gallery .steps .stepLink { padding: 12px 0; text-align: center; color: var(--COLOR_primary_100); } #welcomePage #firstStepsCard wdk-gallery .steps .stepLink .wdk-button::before { margin-left: -6px; } @media only screen and (min-width: 768px) { #welcomePage #firstStepsCard wdk-gallery::part(galleryPager) { padding-bottom: 12px; } } #welcomePage #firstStepsCard wdk-gallery::part(pagerItem) { border-color: var(--COLOR_supportDark_300); } #welcomePage #firstStepsCard wdk-gallery::part(pagerItemActive) { background-color: var(--COLOR_primary_100); border-color: var(--COLOR_primary_100); } #welcomePage #firstStepsCard wdk-gallery::part(btnPrevLink), #welcomePage #firstStepsCard wdk-gallery::part(btnNextLink) { top: 70px; } @media (pointer: coarse) { #welcomePage #firstStepsCard wdk-gallery .swiper-button-prev, #welcomePage #firstStepsCard wdk-gallery .swiper-button-next { border: 1px solid; display: none; } } #welcomePage #firstStepsCard wdk-gallery .swiper-button-prev, #welcomePage #firstStepsCard wdk-gallery .swiper-button-next { position: absolute; cursor: pointer; z-index: 1; width: auto; height: auto; background: none; text-decoration: none; opacity: 0; } #welcomePage #firstStepsCard wdk-gallery .swiper-button-prev::after, #welcomePage #firstStepsCard wdk-gallery .swiper-button-next::after { content: ""; display: block; background-color: var(--COLOR_supportDark_050); width: 20px; height: 56px; } #welcomePage #firstStepsCard wdk-gallery .swiper-button-prev::before, #welcomePage #firstStepsCard wdk-gallery .swiper-button-next::before { content: ""; display: block; position: absolute; top: 16px; width: 16px; height: 16px; } #welcomePage #firstStepsCard wdk-gallery .swiper-button-prev:hover, #welcomePage #firstStepsCard wdk-gallery .swiper-button-next:hover { opacity: 1; } #welcomePage #firstStepsCard wdk-gallery .swiper-button-prev.swiper-button-disabled, #welcomePage #firstStepsCard wdk-gallery .swiper-button-next.swiper-button-disabled { display: none; } #welcomePage #firstStepsCard wdk-gallery .swiper-button-prev { left: 0; padding-left: 0; } #welcomePage #firstStepsCard wdk-gallery .swiper-button-prev::after { border-top-right-radius: var(--borderRadius_75); border-bottom-right-radius: var(--borderRadius_75); } #welcomePage #firstStepsCard wdk-gallery .swiper-button-prev::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_left_light.svg); mask-image: url(../../img/icons/single_color/icon_arrow_left_light.svg); vertical-align: -3px; background-color: var(--COLOR_supportDark_080); left: -2px; } #welcomePage #firstStepsCard wdk-gallery .swiper-button-next { right: 0; padding-right: 0; } #welcomePage #firstStepsCard wdk-gallery .swiper-button-next::after { border-top-left-radius: var(--borderRadius_75); border-bottom-left-radius: var(--borderRadius_75); } #welcomePage #firstStepsCard wdk-gallery .swiper-button-next::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right_light.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right_light.svg); vertical-align: -3px; background-color: var(--COLOR_supportDark_080); right: -2px; } @media (hover: hover) and (pointer: fine) { #welcomePage #firstStepsCard:hover wdk-gallery .swiper-button-prev, #welcomePage #firstStepsCard:hover wdk-gallery .swiper-button-next { opacity: 0.2; } #welcomePage #firstStepsCard:hover wdk-gallery .swiper-button-prev:hover, #welcomePage #firstStepsCard:hover wdk-gallery .swiper-button-next:hover { opacity: 1; } } #welcomePage #headerBackground { position: absolute; left: 0; right: 0; z-index: -1; height: 254px; background-position: 50% 50%; background-repeat: no-repeat; background-color: var(--COLOR_supportDark_040); background-size: cover; } @media only screen and (min-width: 768px) { #welcomePage #headerBackground { height: 324px; } } #welcomePage #headerBackground::before { content: ""; display: block; position: absolute; top: 0; right: 0; height: 100%; width: 100%; background: var(--COLOR_supportDark_050); } #welcomePage #headerBackground.is-inProfileApprovalBackground { height: 300px; } @media only screen and (min-width: 768px) { #welcomePage #headerBackground.is-inProfileApprovalBackground { height: 354px; } } #welcomePage #headerModule { min-height: 254px; display: flex; flex-direction: column; justify-content: center; } @media only screen and (min-width: 768px) { #welcomePage #headerModule { min-height: 324px; margin-bottom: 20px; } } #welcomePage #headerModule .myInfoWrapper { display: block; text-align: center; margin-bottom: 16px; } @media only screen and (min-width: 768px) { #welcomePage #headerModule .myInfoWrapper { margin-bottom: 20px; } } #welcomePage #headerModule .myInfoWrapper #myProfilePic { color: var(--COLOR_supportLight_100); } #welcomePage #headerModule .myInfoWrapper #myProfilePic .photoWrapper { display: inline; } #welcomePage #headerModule .myInfoWrapper #myProfilePic .photoWrapper .photo { display: inline-block; width: 60px; height: 60px; background-color: var(--COLOR_supportLight_100); background-repeat: no-repeat; background-size: 100% auto; background-position: center; border-radius: var(--borderRadius_circle); border: 2px solid var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #welcomePage #headerModule .myInfoWrapper #myProfilePic .photoWrapper .photo { width: 128px; height: 128px; } } #welcomePage #headerModule .myInfoWrapper h1 { font: var(--FONT_default_200); color: var(--COLOR_supportLight_100); margin-top: 8px; } @media only screen and (min-width: 768px) { #welcomePage #headerModule .myInfoWrapper h1 { font: var(--FONT_default_300); } } #welcomePage #headerModule #commandListIcons { display: flex; margin-bottom: 20px; justify-content: center; } @media only screen and (min-width: 768px) { #welcomePage #headerModule #commandListIcons { justify-content: center; margin-bottom: 28px; } } #welcomePage #headerModule #commandListIcons li { padding: 0 10px; } @media only screen and (min-width: 768px) { #welcomePage #headerModule #commandListIcons li { padding: 0 25px; } } #welcomePage #headerModule #commandListIcons li.has-noItems a { opacity: 0.5; } #welcomePage #headerModule #commandListIcons li.secured { position: relative; } #welcomePage #headerModule #commandListIcons li.secured .wdk-icon.icon_check_circle_filled { position: absolute; z-index: 1; top: 5px; right: 38px; width: 16px; fill: var(--COLOR_supportLight_100); stroke: var(--COLOR_supportDark_080); } #welcomePage #headerModule #commandListIcons li.secured a { pointer-events: none; } html.no-touchevents #welcomePage #headerModule #commandListIcons li.secured a:hover { background-color: rgba(0, 0, 0, 0); } #welcomePage #headerModule.is-inProfileApprovalHeader { height: 300px; } @media only screen and (min-width: 768px) { #welcomePage #headerModule.is-inProfileApprovalHeader { height: 354px; } } #welcomePage #headerModule.is-inProfileApprovalHeader .myInfoWrapper { position: relative; } #welcomePage #headerModule.is-inProfileApprovalHeader .myInfoWrapper .photoWrapper .is-inProfileApproval { position: static; font: var(--FONT_default_50); background: rgba(0, 0, 0, 0); text-transform: uppercase; text-shadow: none; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 12px; width: 100%; height: auto; } #welcomePage #headerModule.is-inProfileApprovalHeader .myInfoWrapper .photoWrapper .is-inProfileApproval span { display: inline-block; width: auto; border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_rounded); padding: 4px 8px; } #welcomePage #headerModule.is-inProfileApprovalHeader .myInfoWrapper .photoWrapper .is-inProfileApproval span br { display: none; } body.errorPages#offlinePage #content { text-align: center; } body.errorPages#error500Page #content { overflow: scroll; } body.errorPages #content { max-width: 360px; padding: 32px 16px; } @media only screen and (min-width: 481px) { body.errorPages #content { padding: 32px 24px; max-width: 520px; } } @media only screen and (min-width: 768px) { body.errorPages #content { padding: 48px 24px; max-width: 720px; } } body.errorPages #content h2 { font: var(--FONT_default_200); margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; } @media only screen and (min-width: 768px) { body.errorPages #content h2 { font: var(--FONT_default_300); margin-bottom: 48px; } } body.errorPages #content h2 .wdk-icon { width: 82px; height: 82px; fill: var(--COLOR_supportDark_080); margin-bottom: 50px; } body.errorPages #content h2::before { display: block; color: var(--COLOR_supportDark_400); font-size: 72px; margin-bottom: 24px; } body.errorPages #content p { margin: 12px 0 32px; } body.errorPages #content .wdk-button { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } #partnerProfilePage #pageWrapper { padding-top: 48px; } @media only screen and (min-width: 768px) { #partnerProfilePage #pageWrapper { padding-top: 98px; } } #partnerProfilePage #pageWrapper #content { max-width: none; } #partnerProfilePage #pageWrapper .hintBoxWrapper { background-color: var(--COLOR_alertInfo_200); } #partnerProfilePage #pageWrapper #optinStatusHintboxCard { margin-bottom: 24px; } #partnerProfilePage #pageWrapper wdk-popover { z-index: 22; } #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper { background-color: var(--COLOR_primary_100); padding-top: 0; } @media only screen and (min-width: 768px) { #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper { background-color: rgba(0, 0, 0, 0); padding-top: 48px; } } #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-navigation { display: none; z-index: -1; } @media only screen and (min-width: 768px) { #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-navigation { display: block; } } @media only screen and (min-width: 768px) { #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper #content::after { content: ""; display: block; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 101; background-color: var(--COLOR_supportDark_080); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } } #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper wdk-snackbar#writeReactionTextSuccess, #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper wdk-snackbar#writeReactionLikeSuccess { visibility: hidden; } #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-footer { background: var(--COLOR_primary_100_dark); margin-top: 0; } @media only screen and (min-width: 768px) { #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-footer { background: rgba(0, 0, 0, 0); margin-top: 12px; } } #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-footer nav ul li a { color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-footer nav ul li a { color: var(--COLOR_supportDark_100); } } #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-footer nav ul li::before { color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-footer nav ul li::before { color: var(--COLOR_supportDark_100); } } #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-footer .copyrightText { color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #partnerProfilePage:has(peg-product-featured-profile) #pageWrapper peg-footer .copyrightText { color: var(--COLOR_supportDark_100); } } @media only screen and (min-width: 768px) { #partnerProfilePage:has(peg-product-featured-profile):has( .wdk-modalbox.is-open ) peg-product-featured-profile { z-index: 101; } } #partnerProfilePage:has(peg-registration-featured-profile) #pageWrapper { background-color: var(--COLOR_primary_100); padding-top: 0; } @media only screen and (min-width: 768px) { #partnerProfilePage:has(peg-registration-featured-profile) #pageWrapper { padding-top: 0; } } #partnerProfilePage:has(peg-registration-featured-profile) #pageWrapper peg-footer { background: var(--COLOR_primary_100_dark); margin-top: 0; } #partnerProfilePage:has(peg-registration-featured-profile) #pageWrapper peg-footer nav ul li a { color: var(--COLOR_supportLight_100); } #partnerProfilePage:has(peg-registration-featured-profile) #pageWrapper peg-footer nav ul li::before { color: var(--COLOR_supportLight_100); } #partnerProfilePage:has(peg-registration-featured-profile) #pageWrapper peg-footer .copyrightText { color: var(--COLOR_supportLight_100); } #partnerProfilePage:has(peg-registration-featured-profile) #pageWrapper wdk-snackbar#writeReactionTextSuccess, #partnerProfilePage:has(peg-registration-featured-profile) #pageWrapper wdk-snackbar#writeReactionLikeSuccess { visibility: hidden; } #partnerProfilePage peg-registration-featured-profile { margin: 0 8px; height: calc(100dvh + 5px); display: flex; flex-direction: column; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-registration-featured-profile { margin: 0 24px; } } @media only screen and (min-width: 980px) { #partnerProfilePage peg-registration-featured-profile { margin: 0 auto; } } #partnerProfilePage peg-registration-featured-profile > header { color: var(--COLOR_supportLight_100); display: grid; align-items: flex-end; margin-inline: 24px; margin-top: 24px; max-width: 1024px; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-registration-featured-profile > header { margin-top: 0; } } #partnerProfilePage peg-registration-featured-profile > header img.brandLogo { display: block; margin: 40px auto 0 auto; height: 30px; } #partnerProfilePage peg-registration-featured-profile > header h2 { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; font: var(--FONT_default_100); } #partnerProfilePage peg-registration-featured-profile > header h2 span:first-of-type { font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); } #partnerProfilePage peg-registration-featured-profile > header h2 span:last-of-type { font: var(--FONT_default_50); font-style: var(--FONT_style_brand); color: var(--COLOR_supportLight_080); } @media only screen and (min-width: 768px) { #partnerProfilePage peg-registration-featured-profile > header h2 span:last-of-type { font: var(--FONT_default_75); } } #partnerProfilePage peg-registration-featured-profile > header .contentWrapper { margin-bottom: 16px; font: var(--FONT_default_75); } @media only screen and (min-width: 768px) { #partnerProfilePage peg-registration-featured-profile > header .contentWrapper { font: var(--FONT_default_100); } } #partnerProfilePage peg-registration-featured-profile ul.actionButtons { display: flex; justify-content: space-between; min-height: 72px; margin-inline: 24px; margin-top: 24px; color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #partnerProfilePage peg-registration-featured-profile ul.actionButtons { justify-content: center; min-height: 88px; gap: 47px; } } #partnerProfilePage peg-registration-featured-profile[start-animation] peg-partner-profile { scale: 0; } #partnerProfilePage peg-registration-featured-profile .featuredProfileScrollOnboarding { display: grid; grid-template-rows: 1fr 32px; justify-items: center; position: sticky; z-index: 22; bottom: 0; width: 100%; height: 120px; background-image: linear-gradient(transparent, var(--COLOR_supportDark_080)); opacity: 1; } #partnerProfilePage peg-registration-featured-profile .featuredProfileScrollOnboarding.is-bouncing .wdk-icon { animation: bounce 0.5s ease infinite alternate; } #partnerProfilePage peg-registration-featured-profile .featuredProfileScrollOnboarding .wdk-icon { grid-row: 2; align-self: flex-end; width: 26px; height: 26px; fill: var(--COLOR_supportLight_100); } #partnerProfilePage peg-registration-featured-profile .featuredProfileScrollOnboarding .scrollText { align-self: flex-end; font: var(--FONT_default_50); color: var(--COLOR_supportLight_100); } #partnerProfilePage peg-registration-featured-profile .featuredProfileScrollOnboarding.fade-out { animation: fade-out-scroll-onboarding 0.5s ease-out forwards; } @keyframes fade-out-scroll-onboarding { 0% { display: grid; opacity: 1; } 100% { display: none; opacity: 0; } } @keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } #partnerProfilePage peg-product-featured-profile { margin: 0 24px; height: 100dvh; display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-product-featured-profile { position: absolute; height: auto; z-index: 102; inset: 80px 24px 70px 24px; max-width: 1024px; margin: auto; padding: 40px; background-color: var(--COLOR_primary_100); border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_200); } } #partnerProfilePage peg-product-featured-profile > header { color: var(--COLOR_supportLight_100); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 12px; margin-bottom: 16px; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-product-featured-profile > header { gap: 8px; margin-bottom: 24px; } } #partnerProfilePage peg-product-featured-profile > header .backToDiscover { grid-column: 1 / span 2; grid-row: 1; margin-top: 12px; margin-bottom: -16px; position: relative; left: -20px; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-product-featured-profile > header .backToDiscover { background-color: var(--COLOR_supportDark_600); position: absolute; top: 16px; right: 16px; left: auto; margin-top: 0; } } @media only screen and (min-width: 768px) and (pointer: fine) { #partnerProfilePage peg-product-featured-profile > header .backToDiscover:hover { opacity: 0.7; } #partnerProfilePage peg-product-featured-profile > header .backToDiscover:active { opacity: 0.7; } } @media only screen and (min-width: 768px) { #partnerProfilePage peg-product-featured-profile > header .backToDiscover .icon svg { width: 14px; height: 14px; fill: var(--COLOR_supportDark_400); } } #partnerProfilePage peg-product-featured-profile > header h2 { grid-column: 1; grid-row: 2; margin: 0; font: var(--FONT_default_100); } @media only screen and (min-width: 768px) { #partnerProfilePage peg-product-featured-profile > header h2 { grid-column: 1 / span 2; grid-row: 1 / span 2; } } #partnerProfilePage peg-product-featured-profile > header h2 span:first-of-type { font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); } #partnerProfilePage peg-product-featured-profile > header .contentWrapper { grid-column: 1; grid-row: 3; font: var(--FONT_default_75); } @media only screen and (min-width: 768px) { #partnerProfilePage peg-product-featured-profile > header .contentWrapper { font: var(--FONT_default_100); } } #partnerProfilePage peg-product-featured-profile > header .profilesCount { font: var(--FONT_default_50); color: var(--COLOR_supportLight_080); grid-column: 2; grid-row: 2; align-self: end; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-product-featured-profile > header .profilesCount { font: var(--FONT_default_75); grid-row: 3; } } #partnerProfilePage peg-product-featured-profile ul.actionButtons { display: flex; justify-content: space-between; margin: 24px 0; color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #partnerProfilePage peg-product-featured-profile ul.actionButtons { justify-content: center; margin-bottom: 0; gap: 47px; } } #partnerProfilePage peg-product-featured-profile[start-animation] peg-partner-profile { scale: 0; } #partnerProfilePage peg-onboarding-registration-featured-profile-dialog { --wdk-dialog-body-default-bg-color: var(--COLOR_tertiary_100); } #partnerProfilePage peg-onboarding-registration-featured-profile-dialog .contentWrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 0 12px; } #partnerProfilePage peg-onboarding-registration-featured-profile-dialog .contentWrapper .contentBody { display: flex; flex-direction: column; gap: 24px; } #partnerProfilePage peg-onboarding-registration-featured-profile-dialog .contentWrapper .visual { display: flex; justify-content: center; } #partnerProfilePage peg-onboarding-registration-featured-profile-dialog .contentWrapper h3 { width: 100%; padding: 0; margin: 0; font: var(--FONT_brand_400); font-style: var(--FONT_style_brand); } #partnerProfilePage peg-onboarding-registration-featured-profile-dialog .contentWrapper p { margin: 0 0 3px 0; } @media only screen and (height <= 712px) { #partnerProfilePage peg-onboarding-registration-featured-profile-dialog .contentWrapper img { width: 180px; height: 180px; } } #partnerProfilePage peg-partner-profile { display: block; } #partnerProfilePage peg-partner-profile[is-product-featured-profile] { flex-grow: 1; overflow-y: scroll; max-width: 1024px; border-radius: calc(var(--borderRadius_100)); box-shadow: var(--boxShadow_large); background: var(--COLOR_supportLight_100); scale: 1; transition: scale 0.4s ease-out; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-partner-profile[is-product-featured-profile] { border: 4px solid var(--COLOR_supportLight_100); border-radius: calc(var(--borderRadius_100) + 4px); } #partnerProfilePage peg-partner-profile[is-product-featured-profile]::-webkit-scrollbar { width: 0; } } #partnerProfilePage peg-partner-profile[is-registration-featured-profile] { overflow-y: scroll; max-width: 1024px; border-radius: calc(var(--borderRadius_100)); box-shadow: var(--boxShadow_large); background: var(--COLOR_supportLight_100); scale: 1; transition: scale 0.4s ease-out; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-partner-profile[is-registration-featured-profile] { border: 4px solid var(--COLOR_supportLight_100); border-radius: calc(var(--borderRadius_100) + 4px); } #partnerProfilePage peg-partner-profile[is-registration-featured-profile]::-webkit-scrollbar { width: 0; } } @media (max-width: 480px) { #partnerProfilePage peg-partner-profile:has(#likeProfile:not(.is-liked)) .primaryCol { margin-bottom: 46px; } } #partnerProfilePage #profileHeader { position: relative; color: var(--COLOR_supportLight_100); background-color: var(--COLOR_supportDark_500); } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader { width: 100%; overflow: hidden; } } #partnerProfilePage #profileHeader #headerContentWrapper { --column-gap: 16px; position: relative; display: grid; grid-template-columns: [image-start] var(--column-gap) [back-start] min-content [back-end] auto [menu-start] min-content [menu-end] var( --column-gap ) [image-end]; grid-template-rows: [image-start] 24px [back-start menu-start] 1fr [back-end] auto [menu-end] 52px [image-end]; max-width: 1024px; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #headerContentWrapper { grid-auto-columns: min-content; grid-template-columns: minmax(240px, 360px) 1fr min-content; grid-template-rows: 1fr auto; grid-template-areas: "image matchingpoints menu" "image info like"; margin: 32px auto 96px auto; padding: 0 24px; z-index: 10; grid-column-gap: var(--column-gap); } } @media only screen and (min-width: 768px) { #partnerProfilePage #profileHeader #headerContentWrapper { --column-gap: 24px; padding: 0 32px; } } @media only screen and (min-width: 980px) { #partnerProfilePage #profileHeader #headerContentWrapper { padding: 0 40px; } } @media only screen and (min-width: 1030px) { #partnerProfilePage #profileHeader #headerContentWrapper { padding: 0; } } #partnerProfilePage #profileHeader #headerContentWrapper .wdk-button { z-index: 10; } #partnerProfilePage #profileHeader #headerContentWrapper .wdk-button.t-size_50:not(.t-iconOnly) { padding: 0 8px; } #partnerProfilePage #profileHeader #headerContentWrapper .backButton { grid-area: back; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #headerContentWrapper .backButton { display: none; } } #partnerProfilePage #profileHeader #headerContentWrapper .profileImageContainer { view-transition-name: full-size; grid-area: image; } #partnerProfilePage #profileHeader #headerContentWrapper .profileImageContainer .photoWrapper { grid-column: 1; grid-row: 1; } #partnerProfilePage #profileHeader #headerContentWrapper .profileImageContainer #photoBox { display: grid; } #partnerProfilePage #profileHeader #headerContentWrapper .profileImageContainer #photoBox .subscriptionButtons { grid-column: 1; grid-row: 1; place-self: end center; margin-bottom: 60px; z-index: 10; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #headerContentWrapper .profileImageContainer #photoBox .subscriptionButtons { margin-bottom: 32px; } } #partnerProfilePage #profileHeader #headerContentWrapper #contextMenu { grid-area: menu; text-align: right; } #partnerProfilePage #profileHeader #headerContentWrapper #contextMenu [slot="openButton"] .icon::before { width: 18px; height: 18px; } #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo { display: grid; grid-template-rows: 1fr; grid-template-columns: auto auto 1fr; align-items: center; margin-bottom: 0; gap: 4px; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo { align-items: flex-end; } } #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo peg-photo-gallery-dialog-trigger, #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo peg-photo-mitigation-trigger, #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo wdk-tag, #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo .wdk-tags { display: flex; z-index: 1; } #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo span.onlineState { color: var(--COLOR_supportLight_080); } #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo span.onlineState .onlineNow { display: grid; grid-template-columns: auto 1fr; grid-gap: 4px; align-items: center; } #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo span.onlineState .onlineNow wdk-lottie-animation { grid-column: 1; width: 22px; height: 22px; } #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo span.onlineState .onlineNow span { grid-column: 2; } #partnerProfilePage #profileHeader #headerContentWrapper #additionalInfo #photosNumber { cursor: pointer; } #partnerProfilePage #profileHeader #headerContentWrapper .partnerInfoWrapper { grid-area: info; } #partnerProfilePage #profileHeader #headerContentWrapper peg-matching-points { display: none; grid-area: matchingpoints; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #headerContentWrapper peg-matching-points { display: block; } } #partnerProfilePage #profileHeader #headerContentWrapper #likeProfileButtonWrapper { position: fixed; bottom: 46px; right: 16px; width: 56px; height: 56px; z-index: 22; grid-area: like; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #headerContentWrapper #likeProfileButtonWrapper { width: 48px; height: 48px; position: relative; bottom: auto; right: auto; display: flex; align-items: center; place-self: flex-end flex-end; } } @media only screen and (min-width: 768px) { #partnerProfilePage #profileHeader #headerContentWrapper #likeProfileButtonWrapper { width: initial; height: 48px; } } #partnerProfilePage #profileHeader #headerContentWrapper #likeProfileButtonWrapper[show-single-profile-discovery-enabled] { right: auto; left: 16px; bottom: 24px; display: grid; grid-template-columns: 1fr 1fr; place-self: initial; gap: 8px; width: calc(100% - 32px); } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #headerContentWrapper #likeProfileButtonWrapper[show-single-profile-discovery-enabled] { width: 48px; height: 48px; position: relative; bottom: auto; right: auto; left: auto; display: flex; align-items: center; grid-column: 4; grid-row: 2; place-self: flex-end flex-end; } } @media only screen and (min-width: 768px) { #partnerProfilePage #profileHeader #headerContentWrapper #likeProfileButtonWrapper[show-single-profile-discovery-enabled] { width: initial; height: 48px; } } #partnerProfilePage #profileHeader #headerContentWrapper #likeProfileButtonWrapper[show-single-profile-discovery-enabled]:has( .wdk-button.noDisplay ), #partnerProfilePage #profileHeader #headerContentWrapper #likeProfileButtonWrapper[show-single-profile-discovery-enabled]:has( .wdk-button.is-liked ) { z-index: 1; } @media (max-width: 480px) { #partnerProfilePage #profileHeader.headerPositionStatic { position: static; } #partnerProfilePage #profileHeader.headerPositionStatic #headerContentWrapper { position: static; } } #partnerProfilePage :is([is-product-featured-profile], [is-registration-featured-profile]) #profileHeader .profileImageContainer.has-imagePermissionGranted #photoBox { aspect-ratio: 1/1; } @media only screen and (min-width: 768px) { #partnerProfilePage :is([is-product-featured-profile], [is-registration-featured-profile]) #profileHeader #headerContentWrapper { padding: 0 32px; } } #partnerProfilePage :is([is-product-featured-profile], [is-registration-featured-profile]) #profileHeader #headerContentWrapper .backButton { display: none; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul { text-align: left; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li { padding: 0 10px; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li:hover { background: var(--COLOR_supportDark_600); } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li .wdk-button { width: 100%; justify-content: flex-start; padding: 8px 14px; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li .wdk-button:hover { text-decoration: none; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#favoriteButton .removeFavorite { display: none; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#favoriteButton .is-favorite .addFavorite { display: none; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#favoriteButton .is-favorite .removeFavorite { display: inline; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#imageUnreleaseButton { display: none; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#imageUnreleaseButton.is-visible { display: block; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#rejectButton #rejectContact { display: none; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#rejectButton #rejectProfile { display: flex; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#rejectButton.is-contact #rejectContact { display: flex; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#rejectButton.is-contact #rejectProfile { display: none; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#parnterChiffre { margin-top: 8px; padding: 0; border-top: 1px solid var(--COLOR_supportDark_050); } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#parnterChiffre:hover { background: none; } #partnerProfilePage #profileHeader peg-partner-profile-menu ul li#parnterChiffre p.chiffre { font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); margin: 16px 24px; } #partnerProfilePage #bgImgBox { display: none; } @media only screen and (min-width: 481px) { #partnerProfilePage #bgImgBox { display: block; position: absolute; width: 100%; height: 100%; } #partnerProfilePage #bgImgBox.showBGShadow::before { content: ""; position: absolute; z-index: 1; bottom: 0; width: 100%; height: 100%; display: block; background-image: linear-gradient( var(--COLOR_supportDark_040), var(--COLOR_supportDark_070) ); } #partnerProfilePage #bgImgBox img { width: 100%; height: 100%; object-fit: cover; filter: blur(60px); transform: scale(1.5); opacity: 0.8; } } @media only screen and (min-width: 481px) and (min-width: 481px) { #partnerProfilePage #bgImgBox img::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 180px; display: block; z-index: 1; background-image: linear-gradient( transparent, var(--COLOR_supportDark_070) ); } } #partnerProfilePage #profileHeader #photoBox { position: relative; width: 100%; aspect-ratio: 1/1; } @media (max-width: 480px) { #partnerProfilePage #profileHeader #photoBox:not(.is-dummyPhoto):has(picture) { aspect-ratio: 2/3; } } #partnerProfilePage #profileHeader #photoBox.lessDarkness .photoWrapper { background-color: var(--COLOR_supportDark_040); } #partnerProfilePage #profileHeader #photoBox.lessDarkness .photoWrapper .photo::before { height: 130px; background-image: linear-gradient(transparent, var(--COLOR_supportDark_060)); } #partnerProfilePage #profileHeader #photoBox .photoWrapper { position: relative; overflow: hidden; background-color: var(--COLOR_supportDark_070); } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #photoBox .photoWrapper { border-radius: var(--borderRadius_100); width: 100%; height: 100%; --focus-visible-border-radius: var(--borderRadius_100); } } #partnerProfilePage #profileHeader #photoBox .photoWrapper .has-hover .overlay, .no-touchevents #partnerProfilePage #profileHeader #photoBox .photoWrapper:hover .overlay { height: 94px; padding: 22px; } #partnerProfilePage #profileHeader #photoBox .photoWrapper .has-hover .overlay .teaser, .no-touchevents #partnerProfilePage #profileHeader #photoBox .photoWrapper:hover .overlay .teaser { display: none; } #partnerProfilePage #profileHeader #photoBox .photoWrapper .has-hover .overlay .fulltext, .no-touchevents #partnerProfilePage #profileHeader #photoBox .photoWrapper:hover .overlay .fulltext { display: block; } #partnerProfilePage #profileHeader #photoBox .photoWrapper .has-hover .overlay, .no-touchevents #partnerProfilePage #profileHeader #photoBox .photoWrapper:hover .overlay { height: 64px; } #partnerProfilePage #profileHeader #photoBox .photoWrapper peg-photo-gallery-dialog-trigger { display: block; } #partnerProfilePage #profileHeader #photoBox .photoWrapper peg-photo-gallery-dialog-trigger:focus-visible { outline-offset: -20px; } #partnerProfilePage #profileHeader #photoBox .photoWrapper .photo { display: block; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #photoBox .photoWrapper .photo { border-radius: var(--borderRadius_100); } } #partnerProfilePage #profileHeader #photoBox .photoWrapper .photo .dummyPhoto { display: block; width: 100%; height: 100%; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #photoBox .photoWrapper .photo .dummyPhoto { border-radius: var(--borderRadius_100); } } #partnerProfilePage #profileHeader #photoBox .photoWrapper .photo::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 180px; display: block; background-image: linear-gradient(transparent, var(--COLOR_supportDark_090)); } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #photoBox .photoWrapper .photo::before { display: none; } } #partnerProfilePage #profileHeader #photoBox .photoWrapper .photo img { display: block; width: 100%; height: 100%; object-fit: cover; content-visibility: initial; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #photoBox .photoWrapper .photo img { border-radius: var(--borderRadius_100); } } #partnerProfilePage #profileHeader #photoBox.is-matchUnlocked .photoWrapper .photo { background: linear-gradient(#fff, #fff) padding-box, var(--COLOR_gradient_unlock_100_180) border-box; border: 2px solid rgba(0, 0, 0, 0); } #partnerProfilePage #profileHeader #photoBox.is-matchUnlocked .photoWrapper .photo [class^="fallbackGradient_"], #partnerProfilePage #profileHeader #photoBox.is-matchUnlocked .photoWrapper .photo [class*=" fallbackGradient_"] { border: 2px solid var(--COLOR_supportLight_100); } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader #photoBox.is-matchUnlocked .photoWrapper .photo .dummyPhoto { border-radius: calc(var(--borderRadius_100) - 2px); } #partnerProfilePage #profileHeader #photoBox.is-matchUnlocked .photoWrapper .photo img { border-radius: calc(var(--borderRadius_100) - 2px); } } #partnerProfilePage #profileHeader .profileImageContainer.is-premium #photoBox { aspect-ratio: 2/3; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileHeader .profileImageContainer.is-premium #photoBox { aspect-ratio: 1/1; } } #partnerProfilePage #profileHeader .profileImageContainer.is-premium #photoBox.is-dummyPhoto { aspect-ratio: 1/1; } #partnerProfilePage #mainProfileInfos { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; } #partnerProfilePage #mainProfileInfos peg-partner-user-infos { grid-column: 1; display: block; margin-bottom: 4px; } #partnerProfilePage #mainProfileInfos span.onlineState { grid-column: 1; grid-row: 2; font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); } #partnerProfilePage #mainProfileInfos span.onlineState .onlineNow { display: grid; grid-template-columns: auto 1fr; grid-gap: 4px; align-items: center; } #partnerProfilePage #mainProfileInfos span.onlineState .onlineNow wdk-lottie-animation { grid-column: 1; width: 16px; height: 16px; } #partnerProfilePage #mainProfileInfos span.onlineState .onlineNow span { grid-column: 2; } #partnerProfilePage #mainProfileInfos peg-matching-points { grid-column: 2; display: inline-block; } #partnerProfilePage #mainProfileInfos peg-matching-points a { background-color: rgba(0, 0, 0, 0); border: 1px solid var(--COLOR_supportDark_500); color: var(--COLOR_supportDark_200); padding: 0 10px; } #partnerProfilePage #mainProfileInfos peg-matching-points a .wdk-icon { fill: var(--COLOR_supportDark_200); } #partnerProfilePage #mainProfileInfos peg-matching-points a:hover { background-color: var(--COLOR_supportDark_600); } #partnerProfilePage #profileBody { position: relative; top: -30px; margin-bottom: -30px; margin-top: 0; border-radius: var(--borderRadius_200); z-index: 20; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileBody { top: -64px; margin-bottom: -64px; } } #partnerProfilePage #profileBody .topRow { grid-column: 1 / span 2; } #partnerProfilePage #profileBody .primaryCol { display: grid; } #partnerProfilePage #profileBody .primaryCol:has(#openChat:not(.noDisplay)), #partnerProfilePage #profileBody .primaryCol:has(#addMessage:not(.noDisplay)) { margin-bottom: 46px; } @media only screen and (min-width: 481px) { #partnerProfilePage #profileBody .primaryCol:has(#openChat:not(.noDisplay)), #partnerProfilePage #profileBody .primaryCol:has(#addMessage:not(.noDisplay)) { margin-bottom: 76px; } } #partnerProfilePage #profileBody .primaryCol #aboutMeStatementCard { order: 1; } #partnerProfilePage #profileBody .primaryCol #factfileCard { order: 2; } #partnerProfilePage #profileBody .primaryCol #compatibilityCheckCard { order: 3; } #partnerProfilePage #profileBody .primaryCol #highlightCard { order: 4; } #partnerProfilePage #profileBody .primaryCol #partnerProfilePhotoCard_1 { order: 5; } #partnerProfilePage #profileBody .primaryCol #lifestyleCardInterests { order: 6; } #partnerProfilePage #profileBody .primaryCol #compatibilityInsight { order: 7; } #partnerProfilePage #profileBody .primaryCol #mySongCard { order: 8; } #partnerProfilePage #profileBody .primaryCol #singleQuestion_0 { order: 9; } #partnerProfilePage #profileBody .primaryCol #lifestyleCardSports { order: 10; } #partnerProfilePage #profileBody .primaryCol #matchingCard { order: 11; } #partnerProfilePage #profileBody .primaryCol #singleQuestion_1 { order: 12; } #partnerProfilePage #profileBody .primaryCol #lifestyleCardCuisine { order: 13; } #partnerProfilePage #profileBody .primaryCol #partnerProfilePhotoCard_2 { order: 14; } #partnerProfilePage #profileBody .primaryCol #lifestyleCardHoliday { order: 15; } #partnerProfilePage #profileBody .primaryCol #urcPartnerBodyTop { order: 16; } #partnerProfilePage #profileBody .primaryCol #singleQuestion_2 { order: 17; } #partnerProfilePage #profileBody .primaryCol #entertainmentCard { order: 18; } #partnerProfilePage #profileBody .primaryCol #partnerProfileQuestionSliderCard { order: 19; } #partnerProfilePage #profileBody .primaryCol #singleQuestion_3 { order: 20; } #partnerProfilePage #profileBody .primaryCol #lifestyleCardCharacter { order: 21; } #partnerProfilePage #profileBody .primaryCol .partnerProfileImagesSliderCard { order: 22; } #partnerProfilePage #profileBody .primaryCol #partnerProfilePhotoCard_3 { order: 23; } #partnerProfilePage #profileBody .primaryCol .linkListCard { order: 24; } #partnerProfilePage #profileBody .primaryCol #urcPartnerBodyBottomMobile { order: 25; } @media only screen and (min-width: 768px) { #partnerProfilePage #profileBody .primaryCol { display: block; } #partnerProfilePage #profileBody .primaryCol #aboutMeStatementCard, #partnerProfilePage #profileBody .primaryCol #highlightCard, #partnerProfilePage #profileBody .primaryCol #factfileCard, #partnerProfilePage #profileBody .primaryCol #mySongCard, #partnerProfilePage #profileBody .primaryCol #partnerProfilePhotoCard_1, #partnerProfilePage #profileBody .primaryCol #lifestyleCardInterests, #partnerProfilePage #profileBody .primaryCol #singleQuestion_0, #partnerProfilePage #profileBody .primaryCol #lifestyleCardSports, #partnerProfilePage #profileBody .primaryCol peg-compatibility-insight-card, #partnerProfilePage #profileBody .primaryCol #compatibilityCheckCard, #partnerProfilePage #profileBody .primaryCol #matchingCard, #partnerProfilePage #profileBody .primaryCol #singleQuestion_1, #partnerProfilePage #profileBody .primaryCol #lifestyleCardCuisine, #partnerProfilePage #profileBody .primaryCol #imagePair_1, #partnerProfilePage #profileBody .primaryCol #lifestyleCardHoliday, #partnerProfilePage #profileBody .primaryCol #urcPartnerBodyTop, #partnerProfilePage #profileBody .primaryCol #singleQuestion_2, #partnerProfilePage #profileBody .primaryCol #entertainmentCard, #partnerProfilePage #profileBody .primaryCol #partnerProfileQuestionSliderCard, #partnerProfilePage #profileBody .primaryCol #lifestyleCardCharacter, #partnerProfilePage #profileBody .primaryCol #partnerProfilePhotoCard_2, #partnerProfilePage #profileBody .primaryCol .partnerProfileImagesSliderCard, #partnerProfilePage #profileBody .primaryCol #imagePair_2, #partnerProfilePage #profileBody .primaryCol #partnerProfilePhotoCard_3, #partnerProfilePage #profileBody .primaryCol #singleQuestion_3, #partnerProfilePage #profileBody .primaryCol .linkListCard, #partnerProfilePage #profileBody .primaryCol #urcPartnerBodyBottomMobile { order: initial; } } #partnerProfilePage [is-product-featured-profile] #profileBody, #partnerProfilePage [is-registration-featured-profile] #profileBody { box-shadow: none; } #partnerProfilePage peg-pp-open-messenger-buttons { position: fixed; z-index: 22; bottom: 46px; right: 50%; display: flex; justify-content: center; width: calc(100% - 32px); max-width: 992px; transform: translate(50%); } @media only screen and (min-width: 481px) { #partnerProfilePage peg-pp-open-messenger-buttons { bottom: 46px; } } #partnerProfilePage peg-pp-open-messenger-buttons.positionAbsolute { position: absolute; bottom: 30px; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-pp-open-messenger-buttons #openChat { height: 56px; line-height: 16px; } } #partnerProfilePage peg-pp-open-messenger-buttons #openChat .icon .wdk-icon { width: 28px; height: 28px; } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage::before { height: 100%; } @media (max-width: 480px) { #partnerProfilePage peg-pp-open-messenger-buttons #addMessage { justify-content: left; width: 100%; background-color: var(--COLOR_supportLight_100); padding: 0 16px; } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage .icon { display: none; } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage .text { display: flex; justify-content: space-between; align-items: center; width: 100%; font: var(--FONT_default_100); text-align: left; color: var(--COLOR_supportDark_400); } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage .contactRightsBadge { width: auto; white-space: nowrap; padding: 4px 8px; color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_50); border-radius: var(--borderRadius_75); cursor: pointer; align-self: flex-end; } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage.is-purchaseSubscription { background: linear-gradient(white, white) padding-box, var(--COLOR_gradient_premium_100_45) border-box; border: 2px solid rgba(0, 0, 0, 0); } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage.is-purchaseSubscription .contactRightsBadge { background-image: var(--COLOR_gradient_premium_100_45); } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage.is-redeemMatchUnlock, #partnerProfilePage peg-pp-open-messenger-buttons #addMessage.is-purchaseMatchUnlock { background: linear-gradient(white, white) padding-box, var(--COLOR_gradient_unlock_100_45) border-box; border: 2px solid rgba(0, 0, 0, 0); } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage.is-redeemMatchUnlock .contactRightsBadge, #partnerProfilePage peg-pp-open-messenger-buttons #addMessage.is-purchaseMatchUnlock .contactRightsBadge { background-image: var(--COLOR_gradient_unlock_100_45); } } @media only screen and (min-width: 481px) { #partnerProfilePage peg-pp-open-messenger-buttons #addMessage { height: 56px; line-height: 16px; } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage .contactRightsBadge { display: none; } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage .icon { display: block; } #partnerProfilePage peg-pp-open-messenger-buttons #addMessage .icon .wdk-icon { width: 28px; height: 28px; } } #partnerProfilePage article.profileQuestionCard { margin: 0 0 48px 0; } @media only screen and (min-width: 768px) { #partnerProfilePage article.profileQuestionCard { margin: 4px 0 20px 0; } } @media only screen and (min-width: 980px) { #partnerProfilePage article.profileQuestionCard { margin: 4px 0 32px 0; } } #partnerProfilePage wdk-collapsible.profile-collapsible { grid-template-rows: 1fr auto; padding: 20px 20px 0 20px; position: relative; z-index: 21; border-radius: var(--borderRadius_100); box-shadow: var(--boxShadow_extra_large); } @media only screen and (min-width: 768px) { #partnerProfilePage wdk-collapsible.profile-collapsible { margin-bottom: 0; border: solid 10px var(--COLOR_supportDark_600); box-shadow: none; } } #partnerProfilePage wdk-collapsible.profile-collapsible .collapsibleContainer { position: relative; } #partnerProfilePage wdk-collapsible.profile-collapsible .collapsibleContainer h4 { font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); word-break: break-word; } #partnerProfilePage wdk-collapsible.profile-collapsible .collapsibleContainer p { font: var(--FONT_deco_200); font-style: var(--FONT_style_deco); word-wrap: break-word; margin: 0; } #partnerProfilePage wdk-collapsible.profile-collapsible .buttonsWrapper { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; margin: 0 -4px 14px -4px; } #partnerProfilePage wdk-collapsible.profile-collapsible .buttonsWrapper .collapseButtons { grid-column: 2; grid-row: 1; } #partnerProfilePage wdk-collapsible.profile-collapsible .buttonsWrapper peg-pp-like-element { justify-self: flex-end; grid-column: 3; grid-row: 1; } @media only screen and (min-width: 768px) { #partnerProfilePage wdk-collapsible.profile-collapsible .buttonsWrapper peg-pp-like-element { padding: 0; justify-self: flex-end; } } #partnerProfilePage wdk-collapsible.profile-collapsible .buttonsWrapper .moreButton, #partnerProfilePage wdk-collapsible.profile-collapsible .buttonsWrapper .lessButton { height: 36px; } #partnerProfilePage wdk-collapsible.profile-collapsible.is-aboutmeStatement { min-height: 80px; } #partnerProfilePage #partnerProfileQuestionSliderCard, #partnerProfilePage .partnerProfileImagesSliderCard { position: relative; } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery { display: none; margin: 0 -24px 0 -24px; position: static !important; } @media only screen and (min-width: 768px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery { margin: 0 0 12px 0; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery:defined, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery:defined { display: flex; flex-direction: column; } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery .wdk-button:not(.likeIt), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery .wdk-button:not(.likeIt) { opacity: 1; cursor: pointer; } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item { padding: 24px 4px; min-width: 90%; scroll-snap-align: center; z-index: 0; } @media only screen and (width >= 400px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item { min-width: 91%; } } @media only screen and (width >= 500px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item { min-width: 92%; } } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item { min-width: 94%; padding: 10px 4px 46px 4px; } } @media only screen and (min-width: 768px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item { min-width: 100%; padding: 0 0 28px 0; margin: 0 12px; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:first-of-type, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item:first-of-type { min-width: 96%; padding: 10px 4px 24px 24px; } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:first-of-type, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item:first-of-type { min-width: 97%; padding: 10px 4px 46px 24px; } } @media only screen and (min-width: 768px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:first-of-type, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item:first-of-type { min-width: 100%; padding: 0 0 28px 0; margin: 0; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:last-of-type, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item:last-of-type { min-width: 96%; padding: 10px 24px 24px 4px; } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:last-of-type, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item:last-of-type { min-width: 97%; padding: 10px 24px 46px 4px; } } @media only screen and (min-width: 768px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:last-of-type, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item:last-of-type { min-width: 100%; padding: 0 0 28px 0; margin: 0; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item a, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item a { text-decoration: none; } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(galleryPager), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(galleryPager) { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; width: 220px; align-self: center; position: absolute; bottom: 0; } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(galleryPager), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(galleryPager) { bottom: 14px; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(pagerItem), #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(pagerItemActive), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(pagerItem), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(pagerItemActive) { margin: 0 1px; border: none; border-radius: var(--borderRadius_rounded); width: initial; height: 3px; } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(pagerItem), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(pagerItem) { background-color: var(--COLOR_supportDark_500); } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(pagerItemActive), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(pagerItemActive) { background-color: var(--COLOR_supportDark_300); } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnPrevLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnPrevLink) { display: none; top: auto; bottom: 0; height: auto; } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnPrevLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnPrevLink) { display: block; } } @media only screen and (min-width: 481px) and (pointer: coarse) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnPrevLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnPrevLink) { display: none; } } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnPrevLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnPrevLink) { display: block; } } @media only screen and (min-width: 481px) and (pointer: coarse) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnPrevLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnPrevLink) { display: block; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnNextLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnNextLink) { right: calc(50% - 161px); } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(btnPrevLink), #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery::part(btnPrevLink) { left: calc(50% - 161px); } #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item { padding-top: 0; } #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item:first-of-type, #partnerProfilePage .partnerProfileImagesSliderCard wdk-gallery wdk-gallery-item:last-of-type { padding-top: 0; } @media (max-width: 480px) { #partnerProfilePage #partnerProfileQuestionSliderCard.wdk-card { top: -66px; margin-bottom: -66px; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item { padding: 70px 4px; overflow: hidden; } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item { padding: 10px 4px 46px 4px; } } @media only screen and (min-width: 768px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item { padding: 0 0 28px 0; margin: 0 12px; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:first-of-type { min-width: 96%; padding: 70px 4px 70px 24px; } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:first-of-type { min-width: 97%; padding: 10px 4px 46px 24px; } } @media only screen and (min-width: 768px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:first-of-type { min-width: 100%; padding: 0 0 28px 0; margin: 0; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:last-of-type { min-width: 96%; padding: 70px 24px 70px 4px; } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:last-of-type { min-width: 97%; padding: 10px 24px 46px 4px; } } @media only screen and (min-width: 768px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery wdk-gallery-item:last-of-type { min-width: 100%; padding: 0 0 28px 0; margin: 0; } } #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(galleryPager) { bottom: 40px; } @media only screen and (min-width: 481px) { #partnerProfilePage #partnerProfileQuestionSliderCard wdk-gallery::part(galleryPager) { bottom: 14px; } } #partnerProfilePage#partnerProfilePage .premiumTeaserInSliderWrapper { display: block; position: relative; aspect-ratio: 1/1; } #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider { padding: 12px; border-radius: var(--borderRadius_100); color: var(--COLOR_supportLight_100); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; } #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider.premium { background-image: var(--COLOR_gradient_premium_100_45); } #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider.unlock { background-image: var(--COLOR_gradient_unlock_100_45); } @media only screen and (min-width: 481px) { #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider { border: solid 10px var(--COLOR_supportDark_600); } } @media (min-width: 768px) and (max-width: 831px) { #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider .teaserHeader { font: var(--FONT_highlight_75); } #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider .teaserText { font: var(--FONT_default_75); } #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider .wdk-button { height: 36px; padding: 0 16px; font: var(--FONT_highlight_75); } } #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider h3 { font: var(--FONT_highlight_100); text-align: center; } #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider .teaserText { margin: 0 0 16px 0; text-align: center; } #partnerProfilePage#partnerProfilePage .premiumTeaserInSlider .wdk-button { width: auto; } #partnerProfilePage#partnerProfilePage .imagePair { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 24px; } #partnerProfilePage #matchingCard { padding: 24px; border-radius: var(--borderRadius_100); background: var(--COLOR_primary_100); cursor: pointer; overflow: hidden; } #partnerProfilePage #matchingCard h2 { color: var(--COLOR_supportLight_100); font: var(--FONT_brand_300); text-align: center; padding-bottom: 30px; text-transform: initial; } #partnerProfilePage #matchingCard #matchingBox { display: block; position: relative; min-height: 200px; max-width: 100%; margin: 0 auto; } #partnerProfilePage #matchingCard #matchingBox.animatePictures .myPic { animation: flyToMe1 1200ms cubic-bezier(0.42, 0, 0.31, 1) forwards; } #partnerProfilePage #matchingCard #matchingBox.animatePictures .partnerPic { animation: flyToMe2 1200ms cubic-bezier(0.42, 0, 0.31, 1) forwards; } #partnerProfilePage #matchingCard #matchingBox .photoWrap { position: absolute; } #partnerProfilePage #matchingCard #matchingBox .photoWrap.myPic { right: 65px; transform: rotate(-8deg); opacity: 0; } #partnerProfilePage #matchingCard #matchingBox .photoWrap.partnerPic { left: 65px; transform: rotate(8deg); opacity: 0; } #partnerProfilePage #matchingCard #matchingBox .photoWrap .photo { display: block; height: 185px; width: 145px; background-color: var(--COLOR_supportDark_500); background-repeat: no-repeat; background-size: cover; box-shadow: var(--boxShadow_small); border-radius: var(--borderRadius_75); background-position: center; } @media only screen and (min-width: 768px) { #partnerProfilePage #matchingCard #matchingBox .photoWrap .photo { height: 165px; width: 130px; } } #partnerProfilePage #matchingCard #matchingBox .photoWrap .photo::after { content: ""; position: absolute; display: block; inset: 0 0 0 0; border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_75); z-index: 2; } #partnerProfilePage #matchingCard #matchingBox .matchingPoints { position: absolute; bottom: -6px; left: 50%; transform: translate(-50%, 0); z-index: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; height: 42px; padding: 14px; background: var(--COLOR_primary_100); color: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_100); } @media only screen and (min-width: 768px) { #partnerProfilePage #matchingCard #matchingBox .matchingPoints { bottom: 12px; } } #partnerProfilePage #matchingCard #matchingBox .matchingPoints .wdk-icon { width: 32px; height: 32px; fill: var(--COLOR_supportLight_100); margin-right: 6px; } #partnerProfilePage #matchingCard #matchingBox .matchingPoints .matchingPointsValue { font: var(--FONT_highlight_300); z-index: 10; } #partnerProfilePage #matchingCard .buttonRow { margin-top: 30px; margin-bottom: 6px; text-align: center; } @media only screen and (min-width: 768px) { #partnerProfilePage #matchingCard .buttonRow { margin-top: 8px; } } @keyframes flyToMe1 { 100% { transform: rotate(-3deg); right: -2px; opacity: 1; } } @keyframes flyToMe2 { 100% { left: -2px; transform: rotate(3deg); opacity: 1; } } #partnerProfilePage #profileBody #urcPartnerBodyTop .urcWrapper { margin: 0 0 56px 0; } #partnerProfilePage #profileBody #urcPartnerBodyBottomMobile .urcWrapper { margin: 0 0 56px 0; } #partnerProfilePage peg-partner-highlight-list { margin-inline: -24px; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-partner-highlight-list { margin-inline: -20px; } } #partnerProfilePage peg-partner-highlight-list .contentWrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 0 24px 8px 24px; width: fit-content; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-partner-highlight-list .contentWrapper { padding: 0 20px 8px 20px; } } #partnerProfilePage#partnerProfilePage .lifestyleCard { scroll-margin: 48px; } #partnerProfilePage#partnerProfilePage .lifestyleCard h2 { font: var(--FONT_default_75); text-transform: uppercase; color: var(--COLOR_supportDark_300); text-align: left; } #partnerProfilePage#partnerProfilePage .lifestyleCard .lifeStyleChipsContainer { display: flex; flex-wrap: wrap; } @media (hover: hover) { #partnerProfilePage#partnerProfilePage .lifestyleCard peg-lifestyle-tag .wdk-button.t-plainHighlightSkin3:hover, #partnerProfilePage#partnerProfilePage .lifestyleCard peg-lifestyle-tag .wdk-button.t-plainHighlightSkin3.hover { opacity: 1; } } #partnerProfilePage#partnerProfilePage .lifestyleCard.lifestyleCardChips { grid-template-columns: 1fr auto; align-items: center; row-gap: 16px; } #partnerProfilePage#partnerProfilePage .lifestyleCard.lifestyleCardChips h2 { padding-bottom: 19px; align-self: flex-start; } #partnerProfilePage#partnerProfilePage .lifestyleCard.lifestyleCardChips .wdk-button.triggerChipLikes { padding: 0; border-width: 0; left: 6px; top: -10px; } #partnerProfilePage#partnerProfilePage .lifestyleCard.lifestyleCardChips .wdk-button.triggerChipLikes.t-outlineSkin2 { border-width: 0; } #partnerProfilePage#partnerProfilePage .lifestyleCard.lifestyleCardChips .wdk-button.triggerChipLikes .icon { width: 20px; height: 20px; } #partnerProfilePage#partnerProfilePage .lifestyleCard.lifestyleCardChips .wdk-button.triggerChipLikes .icon .wdk-icon { width: 20px; height: 20px; fill: rgba(0, 0, 0, 0); stroke: var(--COLOR_defaultText); stroke-width: 1.6px; } #partnerProfilePage#partnerProfilePage .lifestyleCard.lifestyleCardChips .lifeStyleChipsContainer { gap: 10px; grid-column: 1 / span 2; } @media (hover: hover) { #partnerProfilePage#partnerProfilePage:not( :has(peg-pp-like-element .is-liked) ) peg-lifestyle-tag[category-name="INTERESTS"]:hover { border-color: color-mix( in srgb, var(--COLOR_decoration_200), transparent 50% ); } } #partnerProfilePage#partnerProfilePage:not(:has(peg-pp-like-element .is-liked)) peg-lifestyle-tag[category-name="INTERESTS"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_200), transparent 84% ); border-color: rgba(0, 0, 0, 0); } @media (hover: hover) { #partnerProfilePage#partnerProfilePage:not( :has(peg-pp-like-element .is-liked) ) peg-lifestyle-tag[category-name="SPORTS"]:hover { border-color: color-mix( in srgb, var(--COLOR_decoration_300), transparent 50% ); } } #partnerProfilePage#partnerProfilePage:not(:has(peg-pp-like-element .is-liked)) peg-lifestyle-tag[category-name="SPORTS"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_300), transparent 84% ); border-color: rgba(0, 0, 0, 0); } @media (hover: hover) { #partnerProfilePage#partnerProfilePage:not( :has(peg-pp-like-element .is-liked) ) peg-lifestyle-tag[category-name="FAVORITE_CUISINE"]:hover { border-color: color-mix(in srgb, var(--COLOR_primary_100), transparent 50%); } } #partnerProfilePage#partnerProfilePage:not(:has(peg-pp-like-element .is-liked)) peg-lifestyle-tag[category-name="FAVORITE_CUISINE"]:active { background-color: color-mix( in srgb, var(--COLOR_primary_100), transparent 84% ); border-color: rgba(0, 0, 0, 0); } @media (hover: hover) { #partnerProfilePage#partnerProfilePage:not( :has(peg-pp-like-element .is-liked) ) peg-lifestyle-tag[category-name="HOLIDAY"]:hover { border-color: color-mix( in srgb, var(--COLOR_decoration_100), transparent 50% ); } } #partnerProfilePage#partnerProfilePage:not(:has(peg-pp-like-element .is-liked)) peg-lifestyle-tag[category-name="HOLIDAY"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_100), transparent 84% ); border-color: rgba(0, 0, 0, 0); } @media (hover: hover) { #partnerProfilePage#partnerProfilePage:not( :has(peg-pp-like-element .is-liked) ) peg-lifestyle-tag[category-name="BEST_LIVE_SKILLS"]:hover { border-color: color-mix( in srgb, var(--COLOR_decoration_400), transparent 50% ); } } #partnerProfilePage#partnerProfilePage:not(:has(peg-pp-like-element .is-liked)) peg-lifestyle-tag[category-name="BEST_LIVE_SKILLS"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_400), transparent 84% ); border-color: rgba(0, 0, 0, 0); } #partnerProfilePage #aboutMeStatementCard { padding-bottom: 0; margin: 0 0 48px 0; } @media only screen and (min-width: 768px) { #partnerProfilePage #aboutMeStatementCard { margin: 4px 0 20px 0; } } @media only screen and (min-width: 980px) { #partnerProfilePage #aboutMeStatementCard { margin: 4px 0 32px 0; } } #partnerProfilePage#partnerProfilePage #factfileCard { scroll-margin-top: 50px; } #partnerProfilePage#partnerProfilePage #factfileCard ul li#region p { display: inline; white-space: nowrap; } #partnerProfilePage#partnerProfilePage #factfileCard ul li#region .js-openZipMap { cursor: pointer; text-decoration: underline; } .no-touchevents #partnerProfilePage#partnerProfilePage #factfileCard ul li#region .js-openZipMap:hover { text-decoration: none; } #partnerProfilePage#partnerProfilePage #factfileCard ul li#region .distanceLinkWrapper { text-decoration: none; margin: 3px; display: inline-block; } #partnerProfilePage#partnerProfilePage #factfileCard ul li#region .distanceLinkWrapper .linkToDistance { position: relative; pointer-events: all; display: inline-flex; align-items: center; background-image: var(--COLOR_gradient_premium_100_45); } #partnerProfilePage#partnerProfilePage #factfileCard ul li#region .distanceLinkWrapper .linkToDistance .wdk-icon { width: 12px; height: 12px; fill: var(--COLOR_supportLight_100); } #partnerProfilePage#partnerProfilePage #factfileCard .moreFactfileItems { transition: max-height 0.4s ease; max-height: 0; } #partnerProfilePage#partnerProfilePage #factfileCard .buttonMore { display: flex; margin-top: 24px; height: 48px; } #partnerProfilePage#partnerProfilePage #factfileCard .buttonLess { display: none; margin-top: 24px; height: 48px; } #partnerProfilePage#partnerProfilePage #factfileCard.is-open .moreFactfileItems { transition: max-height 0.8s ease; height: auto; max-height: 1300px; } #partnerProfilePage#partnerProfilePage #factfileCard.is-open .buttonMore { display: none; } #partnerProfilePage#partnerProfilePage #factfileCard.is-open .buttonLess { display: flex; } @media only screen and (min-width: 768px) { #partnerProfilePage#partnerProfilePage #factfileCard .moreFactfileItems { transition: none; max-height: initial; } #partnerProfilePage#partnerProfilePage #factfileCard .buttonMore, #partnerProfilePage#partnerProfilePage #factfileCard .buttonLess { display: none; } } @media only screen and (min-width: 768px) { #partnerProfilePage#partnerProfilePage #zipMapModal .modalboxContent { max-height: 620px; } } #partnerProfilePage#partnerProfilePage #zipMapModal .modalboxContent article { text-align: center; } @media only screen and (min-width: 768px) { #partnerProfilePage#partnerProfilePage #zipMapModal .modalboxContent article { max-height: 620px !important; } } #partnerProfilePage#partnerProfilePage #zipMapModal .modalboxContent article img { max-width: 100%; max-height: 420px; } #partnerProfilePage #mySongCard .spotifyLogo { margin: 0 auto; } #partnerProfilePage#partnerProfilePage .profileBigIconCard { padding-bottom: 0; } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul { overflow: hidden; } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul li { position: relative; padding: 16px 0 0 0; display: grid; grid-template-columns: 48px auto; grid-template-rows: auto auto; column-gap: 16px; align-items: start; } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul li:first-child { padding-top: 0; } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul li:last-child { padding-bottom: 0; } @media only screen and (min-width: 768px) { #partnerProfilePage#partnerProfilePage .profileBigIconCard ul li:last-child { padding-bottom: 24px; } } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul li h4 { width: 100%; margin: 0 0 4px 0; font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); text-transform: uppercase; grid-column: 2/2; grid-row: 1/2; align-self: end; } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul li h4.premiumDistance { margin: 0 0 1px 0; } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul li .wdk-icon.itemIcon { display: inline-block; width: 48px; height: 48px; grid-column: 1/2; grid-row: 1/3; align-self: center; } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul li .itemValue { display: block; overflow: hidden; text-overflow: ellipsis; width: 100%; font: var(--FONT_default_100); color: var(--COLOR_supportDark_100); grid-column: 2/3; grid-row: 2/2; } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul li .icon_pencil { grid-column: 3/4; grid-row: 1/3; align-self: center; fill: var(--COLOR_primary_100); } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul.moreFactfileItems li:first-child { padding-top: 16px; } #partnerProfilePage#partnerProfilePage .profileBigIconCard ul.lessFactfileItems li:last-child { padding-bottom: 0; } #partnerProfilePage#partnerProfilePage .profileBigIconCard .buttonsWrapper { display: flex; justify-content: center; overflow: hidden; background: var(--COLOR_supportLight_100); } #partnerProfilePage#partnerProfilePage .profileBigIconCard .buttonsWrapper .wdk-icon { width: 18px; height: 18px; } @media only screen and (min-width: 768px) { #partnerProfilePage#partnerProfilePage .profileBigIconCard .buttonsWrapper { display: none; } } #partnerProfilePage #newImagereleaseMessage .mainCol, #partnerProfilePage #newImageunreleaseMessage .mainCol, #partnerProfilePage #photoUploadTeaser .mainCol, #partnerProfilePage #icebreakerPhotoUploadTeaser .mainCol { display: inline-block; width: 100%; } @media only screen and (min-width: 768px) { #partnerProfilePage #newImagereleaseMessage .mainCol, #partnerProfilePage #newImageunreleaseMessage .mainCol, #partnerProfilePage #photoUploadTeaser .mainCol, #partnerProfilePage #icebreakerPhotoUploadTeaser .mainCol { width: 82%; } } #partnerProfilePage #newImagereleaseMessage .mainCol p, #partnerProfilePage #newImageunreleaseMessage .mainCol p, #partnerProfilePage #photoUploadTeaser .mainCol p, #partnerProfilePage #icebreakerPhotoUploadTeaser .mainCol p { margin: 0; } #partnerProfilePage #newImagereleaseMessage .mainCol p.lineOne, #partnerProfilePage #newImageunreleaseMessage .mainCol p.lineOne, #partnerProfilePage #photoUploadTeaser .mainCol p.lineOne, #partnerProfilePage #icebreakerPhotoUploadTeaser .mainCol p.lineOne { margin-bottom: 15px; } #partnerProfilePage #newImagereleaseMessage .imageCol, #partnerProfilePage #newImageunreleaseMessage .imageCol, #partnerProfilePage #photoUploadTeaser .imageCol, #partnerProfilePage #icebreakerPhotoUploadTeaser .imageCol { display: none; width: 15%; text-align: center; vertical-align: top; margin-top: 10px; padding-left: 10px; } @media only screen and (min-width: 768px) { #partnerProfilePage #newImagereleaseMessage .imageCol, #partnerProfilePage #newImageunreleaseMessage .imageCol, #partnerProfilePage #photoUploadTeaser .imageCol, #partnerProfilePage #icebreakerPhotoUploadTeaser .imageCol { display: inline-block; } #partnerProfilePage #newImagereleaseMessage .imageCol span, #partnerProfilePage #newImageunreleaseMessage .imageCol span, #partnerProfilePage #photoUploadTeaser .imageCol span, #partnerProfilePage #icebreakerPhotoUploadTeaser .imageCol span { color: var(--COLOR_primary_100); } #partnerProfilePage #newImagereleaseMessage .imageCol span::before, #partnerProfilePage #newImageunreleaseMessage .imageCol span::before, #partnerProfilePage #photoUploadTeaser .imageCol span::before, #partnerProfilePage #icebreakerPhotoUploadTeaser .imageCol span::before { width: 70px; height: 70px; } } #partnerProfilePage #newImagereleaseMessage .imageCol img, #partnerProfilePage #newImageunreleaseMessage .imageCol img, #partnerProfilePage #photoUploadTeaser .imageCol img, #partnerProfilePage #icebreakerPhotoUploadTeaser .imageCol img { display: block; width: 80px; height: 80px; border-radius: var(--borderRadius_circle); } #partnerProfilePage #getPremiumTeaser { background-color: var(--COLOR_premium_100); background-image: var(--COLOR_gradient_premium_100_45); } #partnerProfilePage #getPremiumTeaser header h3 { margin-bottom: 0; } #partnerProfilePage #getPremiumTeaser .getPremiumButtonRow { margin-top: 16px; text-align: center; } #partnerProfilePage peg-partner-user-infos { display: flex; flex-wrap: wrap; margin-bottom: 8px; } @media only screen and (min-width: 320px) { #partnerProfilePage peg-partner-user-infos { color: var(--COLOR_defaultText); } } @media only screen and (min-width: 481px) { #partnerProfilePage peg-partner-user-infos { color: var(--COLOR_supportLight_100); } } #partnerProfilePage peg-partner-user-infos h2 { display: flex; position: relative; width: 100%; flex-wrap: wrap; align-items: center; white-space: nowrap; font: var(--FONT_highlight_300); } #partnerProfilePage peg-partner-user-infos h2 .partnerDisplayName { display: inline-block; margin-right: 4px; white-space: normal; font: var(--FONT_highlight_300); word-break: break-all; } @media only screen and (min-width: 389px) { #partnerProfilePage peg-partner-user-infos h2 .partnerDisplayName { font: var(--FONT_highlight_400); } } #partnerProfilePage peg-partner-user-infos h2 .age { display: inline-block; margin-right: 4px; font: var(--FONT_default_300); } @media only screen and (min-width: 389px) { #partnerProfilePage peg-partner-user-infos h2 .age { font: var(--FONT_default_400); } } #partnerProfilePage peg-partner-user-infos h2 .idSecured, #partnerProfilePage peg-partner-user-infos h2 .photoBadged { display: flex; width: 36px; } #partnerProfilePage peg-partner-user-infos h2 .idSecured .wdk-button, #partnerProfilePage peg-partner-user-infos h2 .photoBadged .wdk-button { height: 30px; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-partner-user-infos h2 .idSecured .wdk-button, #partnerProfilePage peg-partner-user-infos h2 .photoBadged .wdk-button { height: 48px; } } #partnerProfilePage peg-partner-user-infos h2 .idSecured .wdk-button .wdk-icon, #partnerProfilePage peg-partner-user-infos h2 .photoBadged .wdk-button .wdk-icon { width: 30px; height: 30px; fill: var(--COLOR_supportDark_200); } @media only screen and (min-width: 481px) { #partnerProfilePage peg-partner-user-infos h2 .idSecured .wdk-button .wdk-icon, #partnerProfilePage peg-partner-user-infos h2 .photoBadged .wdk-button .wdk-icon { fill: var(--COLOR_supportLight_100); } } #partnerProfilePage peg-partner-user-infos h2 .favoredProfile { display: flex; width: 0; align-items: center; justify-content: center; transition: width 0.3s; } #partnerProfilePage peg-partner-user-infos h2 .favoredProfile.is-favorite { width: 36px; } #partnerProfilePage peg-partner-user-infos h2 .favoredProfile .wdk-icon.icon_star_2 { width: 30px; height: 30px; fill: var(--COLOR_supportDark_200); } @media only screen and (min-width: 481px) { #partnerProfilePage peg-partner-user-infos h2 .favoredProfile .wdk-icon.icon_star_2 { fill: var(--COLOR_supportLight_100); } } #partnerProfilePage peg-partner-user-infos h3.occupation { display: inline-block; font: var(--FONT_default_100); color: var(--COLOR_supportDark_200); word-break: break-all; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-partner-user-infos h3.occupation { font: var(--FONT_default_200); color: var(--COLOR_supportLight_100); } } #partnerProfilePage peg-compatibility-check-teaser { display: block; overflow: hidden; background: var(--COLOR_primary_100_dark) url("../../img/partner_profile/compatibility_check/background1.svg") no-repeat center center/cover; text-align: center; color: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_100); padding: 24px; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-compatibility-check-teaser { padding: 32px; } } #partnerProfilePage peg-compatibility-check-teaser h2 { font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); margin-bottom: 16px; } #partnerProfilePage peg-compatibility-check-teaser h2 wdk-tag { display: block; margin-top: 8px; } #partnerProfilePage peg-compatibility-check-teaser p { font: var(--FONT_default_100); margin: 0 0 24px 0; color: var(--COLOR_supportLight_070); mix-blend-mode: plus-lighter; } #partnerProfilePage peg-compatibility-check-dialog { display: block; height: 100dvh; background-color: var(--COLOR_supportDark_100); color: var(--COLOR_supportLight_100); overflow: hidden; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-compatibility-check-dialog { height: 80dvh; max-height: 800px; border-radius: var(--borderRadius_100); } } #partnerProfilePage peg-compatibility-check-dialog .closeX { position: absolute; z-index: 2; right: 16px; top: 16px; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-compatibility-check-dialog .closeX { right: 24px; top: 24px; } } #partnerProfilePage peg-compatibility-check-dialog #loadingPage { display: none; height: 100%; padding: 0; } #partnerProfilePage peg-compatibility-check-dialog #loadingPage.show { display: block; } #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer { display: grid; grid-template-rows: 1fr 1fr; height: 100%; scrollbar-color: var(--COLOR_supportLight_070) var(--COLOR_supportLight_040); } #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer video { display: block; margin: 0 auto; width: 100%; height: auto; max-width: 327px; max-height: 327px; align-self: end; } #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer .textAnimation { position: relative; width: 100%; font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); align-self: start; } #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer .textAnimation [class^="textGroup"] { display: none; } #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer .textAnimation [class^="textGroup"].show { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; align-items: center; } #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer .textAnimation p { display: inline; grid-row: 1; grid-column: 1; width: 100%; max-width: 390px; margin: 0 auto; padding: 40px 0; background-color: var(--COLOR_supportDark_100); opacity: 0; text-align: center; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer .textAnimation p:nth-child(1) { z-index: 1; animation: show 0.3s forwards; } #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer .textAnimation p:nth-child(2) { z-index: 2; animation: show 0.3s 3.3s forwards; } #partnerProfilePage peg-compatibility-check-dialog #loadingPage .scrollContainer .textAnimation p:nth-child(3) { z-index: 3; animation: show 0.3s 6.6s forwards; } @keyframes show { to { opacity: 1; } } #partnerProfilePage peg-compatibility-check-dialog #errorPage { display: none; height: 100%; padding: 0; } #partnerProfilePage peg-compatibility-check-dialog #errorPage.show { display: block; } #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer { display: grid; grid-template-rows: 1fr 1fr; height: 100%; scrollbar-color: var(--COLOR_supportLight_070) var(--COLOR_supportLight_040); } #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer img { display: block; margin: 0 auto; width: 100%; height: auto; max-width: 327px; max-height: 327px; align-self: end; } #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer .errorText { width: 100%; max-width: 327px; padding: 40px 0; margin: 0 auto; text-align: center; color: var(--COLOR_supportLight_100); align-self: start; } #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer .errorText h2 { font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); margin: 0 40px 8px 40px; } #partnerProfilePage peg-compatibility-check-dialog #errorPage .scrollContainer .errorText p { font: var(--FONT_default_100); margin: 0 40px 32px 40px; color: var(--COLOR_supportLight_080); } #partnerProfilePage peg-compatibility-check-dialog #successPage { --bottom-offset: 152px; --offset-gallery-controls: 72px; position: relative; z-index: 1; display: none; padding-block-start: clamp(24px, 5vh, 64px); padding-inline-end: 8px; height: 100%; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-compatibility-check-dialog #successPage { --bottom-offset: 160px; } } #partnerProfilePage peg-compatibility-check-dialog #successPage::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: var(--COLOR_primary_100_dark) url("../../img/partner_profile/compatibility_check/background1.svg") no-repeat center center/cover; } #partnerProfilePage peg-compatibility-check-dialog #successPage::before { --top-offset-half-like-button: calc( 100% - 24px - var(--offset-gallery-controls) ); --blur-start: calc(var(--top-offset-half-like-button) - min(200px, 20vh)); --blur-end: var(--top-offset-half-like-button); content: ""; position: absolute; z-index: 1; inset: 0; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-mask: linear-gradient( to bottom, transparent var(--blur-start), rgb(0, 0, 0) var(--blur-end) ); mask: linear-gradient( to bottom, transparent var(--blur-start), rgb(0, 0, 0) var(--blur-end) ); pointer-events: none; } #partnerProfilePage peg-compatibility-check-dialog #successPage:has(* .feedback)::before { content: none; } #partnerProfilePage peg-compatibility-check-dialog #successPage:has(* .feedback) .card { margin-bottom: 32px; } #partnerProfilePage peg-compatibility-check-dialog #successPage.show { display: block; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-compatibility-check-dialog #successPage { padding-inline-end: 0; } } #partnerProfilePage peg-compatibility-check-dialog #successPage h2 { text-align: center; margin: 0 16px 16px 16px; font: var(--FONT_highlight_300); color: var(--COLOR_supportLight_090); } @media only screen and (min-width: 481px) { #partnerProfilePage peg-compatibility-check-dialog #successPage h2 { margin: 0 32px 16px 32px; } } #partnerProfilePage peg-compatibility-check-dialog #successPage h2 wdk-tag { display: block; margin-top: 8px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery { width: 100%; height: 100%; padding: 0 0 var(--bottom-offset) 0; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery wdk-gallery-item { margin: 0 8px; padding: 0 16px 0 16px; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery wdk-gallery-item { margin: 0; padding: 0 64px 0 64px; } } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery wdk-gallery-item::part(liElement) { position: relative; overflow-y: auto; height: 100%; padding-right: 8px; overflow-y: auto; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery wdk-gallery-item::part(liElement)::-webkit-scrollbar { width: 6px; height: 6px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery wdk-gallery-item::part(liElement)::-webkit-scrollbar-track { background: var(--COLOR_supportLight_060); border-radius: 3px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery wdk-gallery-item::part(liElement)::-webkit-scrollbar-thumb { background: var(--COLOR_supportLight_070); border-radius: 3px; background-clip: content-box; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery wdk-gallery-item::part(liElement)::-webkit-scrollbar-thumb:hover { background: var(--COLOR_supportLight_080); background-clip: content-box; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(btnNextLink), #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(btnPrevLink) { background-color: rgba(0, 0, 0, 0); } @media (pointer: coarse) { #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(btnNextLink), #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(btnPrevLink) { display: none; } } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(btnPrevLink) { top: calc(50% - 120px); left: 16px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(btnNextLink) { top: calc(50% - 120px); right: 16px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(galleryPager) { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 0; width: fit-content; margin: 12px auto; padding: 12px; background: var(--COLOR_supportLight_050); border-radius: var(--borderRadius_rounded); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); z-index: 1; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(galleryPager)::before { content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; z-index: 1; border-radius: var(--borderRadius_rounded); border: 1px solid var(--COLOR_supportLight_080); mix-blend-mode: soft-light; pointer-events: none; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(pagerItem) { background-color: var(--COLOR_supportLight_050); border: none; width: 8px; height: 8px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery::part(pagerItemActive) { background-color: var(--COLOR_supportLight_080); border: none; width: 8px; height: 8px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .card { position: relative; background: var(--COLOR_supportDark_040); border-radius: var(--borderRadius_100); margin-bottom: 75px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border-radius: var(--borderRadius_100); border: 1px solid var(--COLOR_supportLight_080); mix-blend-mode: soft-light; pointer-events: none; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .card .top { padding: 24px; mix-blend-mode: plus-lighter; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .card .top h3 { font: var(--FONT_default_50); text-transform: uppercase; color: var(--COLOR_supportLight_080); margin-bottom: 8px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .card .top p { font: var(--FONT_highlight_200); color: var(--COLOR_supportLight_070); margin: 0; padding: 0; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .card .bottom { padding: 24px 24px 32px 24px; background: var(--COLOR_supportLight_040); mix-blend-mode: plus-lighter; border-bottom-right-radius: var(--borderRadius_100); border-bottom-left-radius: var(--borderRadius_100); } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .card .bottom h3 { font: var(--FONT_default_50); text-transform: uppercase; color: var(--COLOR_supportLight_080); margin-bottom: 4px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .card .bottom p { font: var(--FONT_default_100); color: var(--COLOR_supportLight_080); margin: 0; padding: 0; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback { text-align: center; padding: 12px 20px 40px 20px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback.hide { animation: fadeOut 0.8s 3s forwards; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback h3 { font: var(--FONT_default_50); text-transform: uppercase; color: var(--COLOR_supportLight_080); margin-bottom: 8px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback h3.hide { visibility: hidden; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback .feedbackButtons { display: flex; justify-content: center; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback .feedbackButtons button { margin: 0 4px 0 4px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback .feedbackButtons button[disabled] { opacity: 1; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback .feedbackButtons button[disabled]::before { border-color: var(--COLOR_supportLight_100); } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback .feedbackButtons button[disabled] .wdk-icon { fill: var(--COLOR_supportLight_100); } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback .feedbackButtons button.positiveFeedback[disabled] .icon { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_thumbs_up_filled.svg); mask-image: url(../../img/icons/single_color/icon_thumbs_up_filled.svg); vertical-align: -3px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback .feedbackButtons .thankYou { align-content: center; opacity: 0; animation: fadeIn 0.8s forwards; margin: 0 4px 0 4px; } #partnerProfilePage peg-compatibility-check-dialog #successPage wdk-gallery .feedback .feedbackButtons button.negativeFeedback[disabled] .icon { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_thumbs_down_filled.svg); mask-image: url(../../img/icons/single_color/icon_thumbs_down_filled.svg); vertical-align: -3px; } @keyframes fadeOut { to { opacity: 0; visibility: hidden; } } @keyframes fadeIn { to { opacity: 1; } } #partnerProfilePage peg-compatibility-check-dialog #successPage .compatibilityLikeWrapper { position: absolute; width: 100%; bottom: calc(var(--offset-gallery-controls) + 8px); z-index: 2; display: grid; place-content: end center; pointer-events: none; } #partnerProfilePage peg-compatibility-check-dialog #successPage .compatibilityLikeWrapper > * { pointer-events: auto; } #partnerProfilePage peg-compatibility-check-dialog #successPage .compatibilityLikeWrapper .icon_heart_like_filled { stroke: var(--COLOR_supportLight_100); } #partnerProfilePage peg-compatibility-check-dialog #successPage .compatibilityLikeWrapper .is-liked { width: 48px; height: 48px; } #partnerProfilePage peg-compatibility-check-dialog #successPage .compatibilityLikeWrapper .is-liked .icon_heart_like_filled { fill: var(--COLOR_supportLight_100); } #partnerProfilePage peg-compatibility-check-dialog #successPage .compatibilityLikeWrapper .is-liked .text { opacity: 0; position: absolute; } #partnerProfilePage peg-compatibility-check-dialog #successPage .compatibilityLikeWrapper .is-liked .icon { margin: 0; } #partnerProfilePage peg-mysong-player { display: flex; width: 100%; height: 128px; position: relative; flex-direction: row; justify-content: flex-start; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-mysong-player { height: 168px; } } #partnerProfilePage peg-mysong-player .content { display: flex; width: 100%; flex-direction: row; gap: 8px; } #partnerProfilePage peg-mysong-player .content .cover { position: relative; width: 128px; height: 128px; background-color: var(--COLOR_supportDark_500); } #partnerProfilePage peg-mysong-player .content .cover::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/illu_headphones.svg); mask-image: url(../../img/icons/single_color/illu_headphones.svg); vertical-align: -3px; width: 48px; height: 48px; position: absolute; color: var(--COLOR_supportDark_300); top: 50%; left: 50%; transform: translate(-50%, -50%); } #partnerProfilePage peg-mysong-player .content .songContentWrapper { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; height: 112px; } #partnerProfilePage peg-mysong-player .content .songContentWrapper .textContent { flex: 1; margin-bottom: 8px; } #partnerProfilePage peg-mysong-player .content .songContentWrapper .textContent:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; } #partnerProfilePage peg-mysong-player .content .songContentWrapper .textContent .title { overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font: var(--FONT_default_100); color: var(--COLOR_supportDark_100); margin-bottom: 4px; text-transform: initial; } #partnerProfilePage peg-mysong-player .content .songContentWrapper .textContent .artist { overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font: var(--FONT_default_75); color: var(--COLOR_supportDark_070); margin-bottom: 4px; } #partnerProfilePage peg-mysong-player .content .songContentWrapper .textContent .linkToSpotify { overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); } #partnerProfilePage peg-mysong-player .content .buttons { display: flex; width: 100%; justify-content: space-between; align-items: flex-end; } #partnerProfilePage peg-mysong-player .content .buttons .js-selectButton, #partnerProfilePage peg-mysong-player .content .buttons .js-selectedButton { min-width: 86px; } #partnerProfilePage peg-mysong-player[mode="emptyMode"] { justify-content: center; border-radius: var(--borderRadius_100); border: 1px dashed var(--COLOR_supportDark_050); cursor: pointer; flex-direction: column; } #partnerProfilePage peg-mysong-player[mode="songSelectionMode"] { height: 148px; padding-right: 4px; } #partnerProfilePage peg-mysong-player[mode="songSelectionMode"] .songContentWrapper { height: initial; margin-right: 8px; } #partnerProfilePage peg-mysong-player[mode="songSelectionMode"] .songContentWrapper .textContent .artist { color: var(--COLOR_supportDark_300); } #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content { height: 100%; padding: initial; } #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .backDropWrapper, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .backDropWrapper, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .backDropWrapper { padding: 8px; height: 100%; flex: 1; border-radius: 18px; -webkit-backdrop-filter: blur(48px) saturate(200%); backdrop-filter: blur(48px) saturate(200%); display: flex; flex-direction: row; gap: 8px; border: 1px solid rgba(0, 0, 0, 0); } @media only screen and (min-width: 768px) { #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .backDropWrapper, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .backDropWrapper, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .backDropWrapper { flex-direction: column; } } #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .songContentWrapper, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .songContentWrapper, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper { flex-direction: row; align-items: center; gap: 8px; padding: 8px; background-color: var(--COLOR_supportLight_080); border-radius: var(--borderRadius_75); z-index: 1; border: 1px solid var(--COLOR_supportLight_080); background-blend-mode: soft-light; } #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .songContentWrapper .cover, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .songContentWrapper .cover, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .cover { width: 96px; height: 96px; } #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .songContentWrapper .textContent, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .songContentWrapper .textContent, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .textContent { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 100%; margin-bottom: initial; } #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .songContentWrapper .textContent .title, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .songContentWrapper .textContent .title, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .textContent .title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font: var(--FONT_default_75); } #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .buttons, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .buttons, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .buttons { align-items: normal; flex-direction: column; width: initial; padding: 4px 0; } @media only screen and (min-width: 768px) { #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .buttons, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .buttons, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .buttons { flex-direction: row; width: 100%; padding: 0 4px; } } #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .bgCover, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .bgCover, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .bgCover { position: absolute; height: 100%; width: 100%; top: 0; left: 0; border-radius: 18px; opacity: 0.7; z-index: 0; } #partnerProfilePage peg-mysong-player[mode="myProfileMode"] .content .bgCover::before, #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .bgCover::before, #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .bgCover::before { content: ""; position: absolute; top: 0; left: 0; background-color: var(--COLOR_supportDark_500); height: 100%; width: 100%; border-radius: 18px; } #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .buttons peg-pp-like-element .wdk-button.is-liked .icon .wdk-icon { fill: var(--COLOR_supportLight_100) !important; } #partnerProfilePage peg-mysong-player[mode="partnerProfileMode"] .buttons peg-pp-like-element .wdk-button .icon .wdk-icon { stroke: var(--COLOR_supportLight_100) !important; } #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .textContent { text-align: center; align-items: center; overflow: hidden; } #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .textContent .title { font: var(--FONT_default_75); } #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .js-reloadButton.isLoading { animation: rotation 2s infinite linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #partnerProfilePage peg-mysong-player[mode="errorMode"] .content .bgCover { filter: initial; opacity: 1; } #partnerProfilePage peg-mysong-selection { display: flex; height: 100vh; width: 100%; gap: 32px; margin-top: 16px; align-items: stretch; flex-direction: column; justify-content: space-between; } @media only screen and (min-width: 481px) { #partnerProfilePage peg-mysong-selection { height: 75vh; } } #partnerProfilePage peg-mysong-selection .initialContent { display: flex; flex-direction: column; align-items: center; align-content: center; text-align: center; flex: 1; } #partnerProfilePage peg-mysong-selection .initialContent .headphones { width: 184px; height: 184px; margin-bottom: 24px; } #partnerProfilePage peg-mysong-selection .initialContent .title { margin-bottom: 8px; font: var(--FONT_highlight_200); } #partnerProfilePage peg-mysong-selection .initialContent .text { font: var(--FONT_default_75); margin-bottom: 32px; } #partnerProfilePage peg-mysong-selection .resultContent { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; } #partnerProfilePage peg-mysong-selection .resultContent .title { font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); text-transform: uppercase; } #partnerProfilePage peg-mysong-selection .resultContent .wdk-loadingSpinner { margin: 0 auto; } #partnerProfilePage peg-mysong-selection .resultContent .songSelectionList { display: flex; flex-direction: column; width: 100%; overflow: auto; flex-grow: 1; flex-basis: 0; gap: 8px; padding-top: 8px; } #partnerProfilePage peg-mysong-selection .noResultContent, #partnerProfilePage peg-mysong-selection .errorContent { display: flex; gap: 8px; align-items: center; flex-direction: column; flex: 1; } #partnerProfilePage peg-mysong-selection .noResultContent .title, #partnerProfilePage peg-mysong-selection .errorContent .title { font: var(--FONT_highlight_200); } #partnerProfilePage peg-mysong-selection .noResultContent .text, #partnerProfilePage peg-mysong-selection .errorContent .text { font: var(--FONT_default_75); margin-bottom: 56px; } #partnerProfilePage peg-mysong-selection .spotifyLogo { margin: 0 auto; } #invalidPartnerProfilePage #pageWrapper #content { max-width: none; padding: 32px 0; } @media (max-width: 480px) { #invalidPartnerProfilePage #pageWrapper #content { background-color: var(--COLOR_supportLight_100); } } #invalidPartnerProfilePage peg-invalid-partner-profile { flex-grow: 1; display: flex; } #invalidPartnerProfilePage peg-invalid-partner-profile .invalidPartnerContainer { flex-grow: 1; display: grid; grid-template-rows: 1fr auto; width: 100%; text-align: center; margin: 0 auto; padding: 0 24px; } @media only screen and (min-width: 481px) { #invalidPartnerProfilePage peg-invalid-partner-profile .invalidPartnerContainer { max-width: 520px; } } @media only screen and (min-width: 768px) { #invalidPartnerProfilePage peg-invalid-partner-profile .invalidPartnerContainer { max-width: 720px; } } #invalidPartnerProfilePage peg-invalid-partner-profile .invalidPartnerContainer .invalidPartnerContainerBody { margin-bottom: 24px; } #invalidPartnerProfilePage peg-invalid-partner-profile .invalidPartnerContainer .userDummyImage { margin-bottom: 16px; } #invalidPartnerProfilePage peg-invalid-partner-profile .invalidPartnerContainer .userDummyImage img { display: block; border-radius: 50%; overflow: hidden; } #invalidPartnerProfilePage peg-invalid-partner-profile .invalidPartnerContainer h2 { margin-bottom: 0; font: var(--FONT_highlight_100); } #invalidPartnerProfilePage peg-invalid-partner-profile .invalidPartnerContainer > article { display: flex; flex-direction: column; justify-content: center; align-items: center; font: var(--FONT_default_75); color: var(--COLOR_supportDark_100); margin-bottom: 40px; } #invalidPartnerProfilePage peg-invalid-partner-profile .invalidPartnerContainer .buttonWrapper { display: grid; gap: 16px; margin: 0 auto; } #invalidProductFeaturedProfilePage #pageWrapper { background-color: var(--COLOR_primary_100); padding-top: 0; } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage #pageWrapper { background-color: rgba(0, 0, 0, 0); padding-top: 48px; } } #invalidProductFeaturedProfilePage #pageWrapper peg-navigation { display: none; } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage #pageWrapper peg-navigation { display: block; } } #invalidProductFeaturedProfilePage #pageWrapper #content { max-width: none; padding: 32px 0; } @media (max-width: 480px) { #invalidProductFeaturedProfilePage #pageWrapper #content { background-color: rgba(0, 0, 0, 0); } } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage #pageWrapper #content::after { content: ""; display: block; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 101; background-color: var(--COLOR_supportDark_080); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } } #invalidProductFeaturedProfilePage #pageWrapper peg-footer { background: var(--COLOR_primary_100_dark); color: var(--COLOR_supportLight_100); margin-top: 0; } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage #pageWrapper peg-footer { background: rgba(0, 0, 0, 0); margin-top: 12px; } } #invalidProductFeaturedProfilePage #pageWrapper peg-footer nav ul li a { color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage #pageWrapper peg-footer nav ul li a { color: var(--COLOR_supportDark_100); } } #invalidProductFeaturedProfilePage #pageWrapper peg-footer nav ul li::before { color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage #pageWrapper peg-footer nav ul li::before { color: var(--COLOR_supportDark_100); } } #invalidProductFeaturedProfilePage #pageWrapper peg-footer .copyrightText { color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage #pageWrapper peg-footer .copyrightText { color: var(--COLOR_supportDark_100); } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer { height: calc(100dvh - 64px); margin: 0 24px; } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer { height: auto; position: absolute; z-index: 102; inset: 80px 24px 70px 24px; max-width: 1024px; margin: auto; padding: 40px; background-color: var(--COLOR_primary_100); border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_200); } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header { color: var(--COLOR_supportLight_100); display: grid; align-items: flex-end; } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header .backToDiscover { margin-top: 12px; position: relative; left: -20px; } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header .backToDiscover { background-color: var(--COLOR_supportDark_600); position: absolute; top: 16px; right: 16px; left: auto; margin-top: 0; } } @media only screen and (min-width: 768px) and (pointer: fine) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header .backToDiscover:hover { opacity: 0.7; } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header .backToDiscover:active { opacity: 0.7; } } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header .backToDiscover .icon svg { width: 14px; height: 14px; fill: var(--COLOR_supportDark_400); } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header h2 { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 0; margin-bottom: 12px; font: var(--FONT_default_100); } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header h2 { margin-bottom: 8px; } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header h2 span:first-of-type { font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header .contentWrapper { margin-bottom: 16px; font: var(--FONT_default_75); } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer > header .contentWrapper { margin-bottom: 24px; font: var(--FONT_default_100); } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper { display: flex; flex-direction: column; max-height: calc(100dvh - 212px); margin-bottom: 40px; overflow: hidden; max-width: 1024px; border-radius: calc(var(--borderRadius_100)); box-shadow: var(--boxShadow_large); background: var(--COLOR_supportLight_100); scale: 1; transition: scale 0.4s ease-out; } @media only screen and (min-width: 481px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper { height: calc(100dvh - 230px); border: 4px solid var(--COLOR_supportLight_100); border-radius: calc(var(--borderRadius_100) + 4px); } } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper { height: calc(100dvh - 390px); } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader { position: relative; color: var(--COLOR_supportLight_100); background-color: var(--COLOR_supportDark_500); background-image: linear-gradient(transparent, var(--COLOR_supportDark_050)); } @media only screen and (min-width: 481px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader { width: 100%; } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper { position: relative; display: grid; grid-template-columns: 8px 1fr 8px; grid-template-rows: auto auto; grid-column-gap: 8px; max-width: 1024px; } @media only screen and (width >= 400px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper { grid-template-columns: 16px 1fr 16px; grid-column-gap: 16px; } } @media only screen and (min-width: 481px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper { grid-template-columns: minmax(240px, 360px) auto; grid-template-rows: auto; margin: 32px auto 96px auto; padding: 0 24px; } } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper { grid-column-gap: 32px; padding: 0 32px; } } @media only screen and (min-width: 980px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper { padding: 0 40px; } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileImageContainer { grid-column: 1 / span 3; grid-row: 1; } @media only screen and (min-width: 481px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileImageContainer { grid-column: 1; } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileImageContainer #photoBox { display: initial; width: 100%; aspect-ratio: 1/1; position: relative; overflow: hidden; background-color: var(--COLOR_supportDark_070); } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileImageContainer #photoBox img { display: block; width: 100%; height: 100%; object-fit: cover; content-visibility: initial; border-radius: var(--borderRadius_100); } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileContentContainer { display: flex; align-items: center; text-align: center; } @media (max-width: 480px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileContentContainer { grid-column: 1 / span 3; background: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_100); margin-top: -40px; z-index: 1; padding: 20px; } } @media only screen and (min-width: 481px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileContentContainer { grid-column: 2; } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileContentContainer article.invalidProductFeaturedProfileContent { width: 100%; color: var(--COLOR_supportDark_100); } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileContentContainer article.invalidProductFeaturedProfileContent h3 { font: var(--FONT_highlight_75); margin-bottom: 12px; } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileContentContainer article.invalidProductFeaturedProfileContent .contentWrapper { font: var(--FONT_default_75); margin-bottom: 12px; } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileContentContainer article.invalidProductFeaturedProfileContent .buttonWrapper { display: inline-grid; grid-auto-rows: auto; margin-bottom: 4px; justify-items: center; } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileHeader #headerContentWrapper .profileContentContainer article.invalidProductFeaturedProfileContent .buttonWrapper .wdk-button { width: fit-content; } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody { box-shadow: none; position: relative; top: -40px; margin-bottom: -40px; margin-top: 0; padding-bottom: 24px; border-top-left-radius: var(--borderRadius_200); border-top-right-radius: var(--borderRadius_200); } @media only screen and (min-width: 481px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody { top: -60px; margin-bottom: -60px; overflow: hidden; } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody .topRow .contentSkeleton { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; } @media only screen and (min-width: 768px) { #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody .topRow .contentSkeleton { grid-template-columns: 2fr 1fr; grid-template-rows: auto; gap: 32px; } } #invalidProductFeaturedProfilePage peg-invalid-partner-profile .invalidProductFeaturedProfileContainer #invalidProductFeaturedProfileWrapper #invalidProductFeaturedProfileBody .topRow .contentSkeleton .wdk-card { height: 140px; border-radius: var(--borderRadius_100); border: solid 10px var(--COLOR_supportDark_600); padding: 20px; } #emptyProductFeaturedProfilePage #pageWrapper { background-color: var(--COLOR_primary_100); padding-top: 0; } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage #pageWrapper { background-color: rgba(0, 0, 0, 0); padding-top: 48px; } } #emptyProductFeaturedProfilePage #pageWrapper peg-navigation { display: none; } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage #pageWrapper peg-navigation { display: block; } } @media (max-width: 480px) { #emptyProductFeaturedProfilePage #pageWrapper #content { background-color: rgba(0, 0, 0, 0); } } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage #pageWrapper #content::after { content: ""; display: block; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 101; background-color: var(--COLOR_supportDark_080); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } } #emptyProductFeaturedProfilePage #pageWrapper peg-footer { background: var(--COLOR_primary_100_dark); margin-top: 0; } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage #pageWrapper peg-footer { background: rgba(0, 0, 0, 0); margin-top: 12px; } } #emptyProductFeaturedProfilePage #pageWrapper peg-footer nav ul li a { color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage #pageWrapper peg-footer nav ul li a { color: var(--COLOR_supportDark_100); } } #emptyProductFeaturedProfilePage #pageWrapper peg-footer nav ul li::before { color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage #pageWrapper peg-footer nav ul li::before { color: var(--COLOR_supportDark_100); } } #emptyProductFeaturedProfilePage #pageWrapper peg-footer .copyrightText { color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage #pageWrapper peg-footer .copyrightText { color: var(--COLOR_supportDark_100); } } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile { margin: 0 24px; height: 100dvh; display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage peg-empty-product-featured-profile { height: auto; position: absolute; z-index: 102; inset: 80px 24px 70px 24px; max-width: 1024px; margin: auto; padding: 40px; background-color: var(--COLOR_primary_100); border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_200); } } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header { color: var(--COLOR_supportLight_100); display: grid; align-items: flex-end; } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header .backToDiscover { margin-top: 12px; position: relative; left: -20px; } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header .backToDiscover { background-color: var(--COLOR_supportDark_600); position: absolute; top: 16px; right: 16px; left: auto; margin-top: 0; } } @media only screen and (min-width: 768px) and (pointer: fine) { #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header .backToDiscover:hover { opacity: 0.7; } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header .backToDiscover:active { opacity: 0.7; } } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header .backToDiscover .icon svg { width: 14px; height: 14px; fill: var(--COLOR_supportDark_400); } } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header h2 { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 0; margin-bottom: 12px; font: var(--FONT_default_100); } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header h2 { margin-bottom: 8px; } } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header h2 span:first-of-type { font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header .contentWrapper { margin-bottom: 16px; font: var(--FONT_default_75); } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage peg-empty-product-featured-profile > header .contentWrapper { margin-bottom: 24px; font: var(--FONT_default_100); } } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile .emptyProductFeaturedProfileContentWrapper { flex-grow: 1; display: flex; justify-content: center; align-items: center; text-align: center; max-width: 1024px; padding: 0 24px; overflow: hidden; border-radius: calc(var(--borderRadius_100)); background: var(--COLOR_supportLight_040); scale: 1; transition: scale 0.4s ease-out; color: var(--COLOR_supportLight_100); border: 1px solid var(--COLOR_supportLight_040); } @media only screen and (min-width: 481px) { #emptyProductFeaturedProfilePage peg-empty-product-featured-profile .emptyProductFeaturedProfileContentWrapper { border-radius: calc(var(--borderRadius_100) + 4px); } } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile .emptyProductFeaturedProfileContentWrapper .contentWrapper { display: grid; grid-auto-rows: auto; grid-gap: 16px; justify-items: center; max-width: 480px; font: var(--FONT_default_75); } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile .emptyProductFeaturedProfileContentWrapper .contentWrapper h2 { font: var(--FONT_highlight_100); } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile .emptyProductFeaturedProfileContentWrapper .contentWrapper .countdownBox { --wdkCountdown-digits-min-width: 18px; --wdkCountdown-digits-font: var(--FONT_highlight_75); width: fit-content; height: 44px; display: flex; justify-content: center; align-items: center; background-color: var(--COLOR_supportLight_100); padding: 0 16px; border-radius: 8px; font: var(--FONT_default_75); color: var(--COLOR_primary_100); } #emptyProductFeaturedProfilePage peg-empty-product-featured-profile .actionButtons { display: flex; justify-content: center; margin: 24px 0; } @media only screen and (min-width: 768px) { #emptyProductFeaturedProfilePage peg-empty-product-featured-profile .actionButtons { margin-bottom: 0; } } #partnerCompatibilityPage peg-partner-compatibility { --responsive-padding: clamp(1rem, 5vw, 2rem); display: grid; grid-template-columns: var(--responsive-padding) 1fr var(--responsive-padding); padding-block: 1rem; row-gap: 1rem; background-color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #partnerCompatibilityPage peg-partner-compatibility { background-color: unset; padding-block: unset; } } #partnerCompatibilityPage peg-partner-compatibility .backToProfile { grid-column: 2/3; } @media only screen and (min-width: 980px) { #partnerCompatibilityPage peg-partner-compatibility .backToProfile { grid-column: 1/2; } } #partnerCompatibilityPage peg-partner-compatibility .backToProfile.primarySkinFlat { box-shadow: none; background: var(--COLOR_supportDark_600); } #partnerCompatibilityPage peg-partner-compatibility .containerCard > header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: relative; min-height: 3rem; } #partnerCompatibilityPage peg-partner-compatibility .containerCard > header .pageHeading { font: var(--FONT_brand_300); color: var(--COLOR_primary_100); } #partnerCompatibilityPage peg-partner-compatibility .containerCard > header > *:not(.pageHeading, #likeProfileButtonWrapper) { position: absolute; } #partnerCompatibilityPage peg-partner-compatibility .containerCard > header #likeProfileButtonWrapper { position: fixed; inset-block-end: 46px; inset-inline-end: 16px; z-index: 1; } @media only screen and (min-width: 481px) { #partnerCompatibilityPage peg-partner-compatibility .containerCard > header #likeProfileButtonWrapper { position: initial; inset-block-end: initial; inset-inline-end: initial; z-index: initial; } } #partnerCompatibilityPage peg-partner-compatibility .containerCard > header #likeProfileButtonWrapper peg-pp-like-element #likeProfile { transition: opacity 200ms ease-in; opacity: 0; } #partnerCompatibilityPage peg-partner-compatibility .containerCard > header #likeProfileButtonWrapper peg-pp-like-element #likeProfile.is-liked { visibility: unset; } #partnerCompatibilityPage peg-partner-compatibility .containerCard > header #likeProfileButtonWrapper peg-pp-like-element #likeProfile.fadeIn { opacity: 1; } #partnerCompatibilityPage peg-partner-compatibility .containerCard { display: grid; row-gap: 2rem; padding: 0.5rem var(--responsive-padding) var(--responsive-padding) var(--responsive-padding); border: 0; grid-column: 1/4; } @media only screen and (min-width: 768px) { #partnerCompatibilityPage peg-partner-compatibility .containerCard { box-shadow: var(--boxShadow_small); border-radius: var(--borderRadius_100); background-color: var(--COLOR_supportLight_100); padding: var(--responsive-padding); } } #partnerCompatibilityPage peg-partner-compatibility wdk-dialog:not([open]) { position: absolute; } #partnerCompatibilityPage peg-partner-compatibility-intro { display: grid; } #partnerCompatibilityPage peg-partner-compatibility-intro .headline { color: var(--COLOR_supportDark_300); font: var(--FONT_default_75); text-transform: uppercase; padding-block-end: 0.5rem; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard { display: grid; gap: 1rem; padding: clamp(1rem, 5vw, 2rem); border-radius: var(--borderRadius_100); background: var(--COLOR_secondary_100); justify-items: center; border: none; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox { --image-width: clamp(100px, 25vw, 145px); --image-rotation: 3deg; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox.matchboxLayout { display: grid; grid-template-columns: [fullWidth-start photoMe-start] 1fr [photoPartner-start] 10px [photoMe-end] 1fr [photoPartner-end fullWidth-end]; grid-template-rows: [photo-start] 1fr [matchingPoints-start] min-content [photo-end] min-content [matchingPoints-end]; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox.matchboxLayout [data-layout="photoMe"] { grid-area: photo/photoMe; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox.matchboxLayout [data-layout="photoPartner"] { grid-area: photo/photoPartner; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox.matchboxLayout [data-layout="matchingPoints"] { justify-self: center; grid-area: matchingPoints/fullWidth; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox .photoMe { --direction: -1; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox .photo { display: block; object-fit: cover; position: relative; aspect-ratio: 0.75; width: var(--image-width); border-radius: var(--borderRadius_75); outline: 1px solid var(--COLOR_supportLight_060); outline-offset: -1px; box-shadow: var(--boxShadow_small); } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox .rotated { --flyIn-distance: calc(var(--image-width) / 2 * var(--direction, 1)); --flyIn-rotation: calc(2 * var(--image-rotation) * var(--direction, 1)); rotate: calc(var(--image-rotation) * var(--direction, 1)); transform-origin: bottom; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox .unlocked { border-radius: var(--borderRadius_75); background: var(--COLOR_gradient_unlock_150_0_fade); height: 50%; align-self: end; } @media (prefers-reduced-motion: no-preference) { #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox .photoAnimation { animation: flyToMe 1200ms cubic-bezier(0.42, 0, 0.31, 1); } } @keyframes flyToMe { from { opacity: 0; transform: translateX(var(--flyIn-distance)) rotate(var(--flyIn-rotation)); } } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox .matchingPoints { position: relative; display: grid; grid-auto-flow: column; place-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; background: var(--COLOR_secondary_100); color: var(--COLOR_primary_100); border-radius: var(--borderRadius_100); } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox .matchingPoints .wdk-icon { height: 24px; width: 24px; fill: var(--COLOR_primary_100); } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .matchbox .matchingPoints .matchingPointsValue { font: var(--FONT_highlight_200); } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .dimensionsBarChart { display: grid; row-gap: 0.25rem; width: clamp(200px, 100%, 480px); } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .dimensionsBarChart .dimensionBar { border-radius: var(--borderRadius_rounded); align-items: center; border: 1px solid color-mix(in srgb, var(--COLOR_primary_100), transparent 80%); background: var(--COLOR_supportLight_100); } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .dimensionsBarChart .dimensionBar.dimensionBarLayout { display: grid; grid-template-columns: [fullWidth-start] 1fr [dialogTrigger-start] min-content [dialogTrigger-end fullWidth-end]; grid-template-rows: [fullHeight-start] min-content [fullHeight-end]; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .dimensionsBarChart .dimensionBar.dimensionBarLayout [data-layout="dimensionBar"] { grid-area: fullHeight/fullWidth; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .dimensionsBarChart .dimensionBar.dimensionBarLayout [data-layout="dimensionDialogTrigger"] { grid-area: fullHeight/dialogTrigger; } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .dimensionsBarChart .dimensionBar wdk-dialog-trigger svg { fill: var(--COLOR_supportDark_200); background: var(--COLOR_supportLight_080); border-radius: var(--borderRadius_circle); } #partnerCompatibilityPage peg-partner-compatibility-intro .introCard .dimensionsBarChart .dimensionBar .bar { width: clamp(0%, var(--bar_chart_percentage), 100%); min-width: min-content; border-radius: inherit; background: var(--COLOR_primary_100); padding: 0.5rem 0.75rem; color: var(--COLOR_supportLight_100); font: var(--FONT_default_75); } #partnerCompatibilityPage peg-partner-compatibility-intro .outroLink { justify-self: end; color: var(--COLOR_supportDark_200); } #partnerCompatibilityPage peg-partner-compatibility-details { display: block; } #partnerCompatibilityPage peg-partner-compatibility-details .headline { color: var(--COLOR_supportDark_300); font: var(--FONT_default_75); text-transform: uppercase; padding-block-end: 0.5rem; } #partnerCompatibilityPage peg-partner-compatibility-details .groupHeading { margin-block-end: 2.5rem; font: var(--FONT_highlight_300); color: var(--COLOR_supportDark_200); word-break: break-word; } #partnerCompatibilityPage peg-partner-compatibility-details .groupContent { display: grid; gap: var(--responsive-padding); margin-block-end: 4rem; } #partnerCompatibilityPage peg-partner-compatibility-details .groupContent:last-child { margin-block-end: unset; } #partnerCompatibilityPage peg-partner-compatibility-details-card { padding: clamp(1rem, 5vw, 2rem); background: var(--COLOR_compatibility_light); border-radius: var(--borderRadius_100); position: relative; } @media only screen and (min-width: 768px) { #partnerCompatibilityPage peg-partner-compatibility-details-card { padding: 2rem 2.5rem; } } #partnerCompatibilityPage peg-partner-compatibility-details-card[data-variant="personalityStructure"] { --COLOR_compatibility_light: var(--COLOR_decoration_100_light); --COLOR_compatibility_default: var(--COLOR_decoration_100); --COLOR_compatibility_dark: var(--COLOR_decoration_100_dark); } #partnerCompatibilityPage peg-partner-compatibility-details-card[data-variant="ambitionsAndTendancies"] { --COLOR_compatibility_light: var(--COLOR_decoration_200_light); --COLOR_compatibility_default: var(--COLOR_decoration_200); --COLOR_compatibility_dark: var(--COLOR_decoration_200_dark); } #partnerCompatibilityPage peg-partner-compatibility-details-card[data-variant="everydayBehaviour"] { --COLOR_compatibility_light: var(--COLOR_decoration_300_light); --COLOR_compatibility_default: var(--COLOR_decoration_300); --COLOR_compatibility_dark: var(--COLOR_decoration_300_dark); } #partnerCompatibilityPage peg-partner-compatibility-details-card[data-variant="communicationStyle"] { --COLOR_compatibility_light: var(--COLOR_decoration_400_light); --COLOR_compatibility_default: var(--COLOR_decoration_400); --COLOR_compatibility_dark: var(--COLOR_decoration_400_dark); } #partnerCompatibilityPage peg-partner-compatibility-details-card.areaLayoutCard { display: grid; grid-template: "image" min-content "heading" min-content "content" min-content/1fr; justify-items: center; gap: 0.75rem; } @media only screen and (min-width: 768px) { #partnerCompatibilityPage peg-partner-compatibility-details-card.areaLayoutCard { grid-template: "image heading content" min-content/min-content 1fr 1.33fr; align-items: center; gap: 2rem; } } #partnerCompatibilityPage peg-partner-compatibility-details-card.areaLayoutCard [data-layout="cardImage"] { grid-area: image; } #partnerCompatibilityPage peg-partner-compatibility-details-card.areaLayoutCard [data-layout="cardHeading"] { grid-area: heading; } @media only screen and (min-width: 768px) { #partnerCompatibilityPage peg-partner-compatibility-details-card.areaLayoutCard [data-layout="cardHeading"] { justify-self: start; } } #partnerCompatibilityPage peg-partner-compatibility-details-card.areaLayoutCard [data-layout="cardContent"] { grid-area: content; } #partnerCompatibilityPage peg-partner-compatibility-details-card > wdk-dialog-trigger { position: absolute; inset-inline-end: 0; inset-block-start: 0; } #partnerCompatibilityPage peg-partner-compatibility-details-card > wdk-dialog-trigger svg { fill: var(--COLOR_supportDark_200); } #partnerCompatibilityPage peg-partner-compatibility-details-card .image { padding: 0.75rem 1rem; } #partnerCompatibilityPage peg-partner-compatibility-details-card .heading { text-align: center; margin: 0; margin-block-end: 1.25rem; } @media only screen and (min-width: 768px) { #partnerCompatibilityPage peg-partner-compatibility-details-card .heading { text-align: unset; margin-block-end: 0; } } #partnerCompatibilityPage peg-partner-compatibility-details-card .content { width: 100%; display: grid; gap: 1.5rem; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart { list-style-type: none; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart.areaLayoutDimensions { display: grid; grid-template: "name dialogTrigger" min-content "dimensionPartner dimensionPartner" 1fr "dimensionMe dimensionMe" 1fr "legend legend" min-content/auto 1fr; gap: 0.25rem; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart.areaLayoutDimensions [data-layout="dimensionDialogTrigger"] { align-self: center; grid-area: dialogTrigger; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart.areaLayoutDimensions [data-layout="dimensionName"] { grid-area: name; align-self: center; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart.areaLayoutDimensions [data-layout="dimensionPartner"] { grid-area: dimensionPartner; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart.areaLayoutDimensions [data-layout="dimensionMe"] { grid-area: dimensionMe; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart.areaLayoutDimensions [data-layout="dimensionLegend"] { grid-area: legend; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .name { margin: 0; color: var(--COLOR_supportDark_200); font: var(--FONT_default_75); padding-inline-start: 0.5rem; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .dialogTrigger, #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .dialogTrigger :is(button, svg) { width: 18px; height: 18px; fill: var(--COLOR_supportDark_200); } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .dimensionBar { border-radius: var(--borderRadius_rounded); width: 100%; position: relative; border: 1px solid color-mix(in srgb, var(--COLOR_compatibility_default), transparent 80%); background: var(--COLOR_supportLight_100); } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .dimensionBar .bar { width: clamp(0%, var(--bar_chart_percentage), 100%); min-width: min-content; display: grid; grid-template-columns: 1fr min-content; background: var(--COLOR_compatibility_default); border-radius: inherit; place-items: center end; padding-inline: 0.25rem; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .dimensionBar.dimensionMe .bar { background: var(--COLOR_compatibility_light); outline: 2px solid var(--COLOR_compatibility_default); outline-offset: -2px; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .dimensionBar .photo { height: 1.5rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--borderRadius_circle); border: 1px solid var(--COLOR_supportLight_070); } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .dimensionBar .value { color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_75); padding: 0.5rem 0.25rem; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .dimensionBar.dimensionMe .value { color: var(--COLOR_compatibility_default); } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .legend { overflow: hidden; font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); padding: 0.25rem 0.5rem; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .legend.areaLayoutLegend { display: grid; grid-template: "start center end" min-content/1.5fr 1fr 1.5fr; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .legend.areaLayoutLegend [data-layout="legendStart"] { grid-area: start; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .legend.areaLayoutLegend [data-layout="legendCenter"] { grid-area: center; justify-self: center; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .legend.areaLayoutLegend [data-layout="legendEnd"] { grid-area: end; justify-self: end; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .legend.areaLayoutLegend::before { grid-area: center; } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .legend::before { content: ""; position: relative; width: 100%; height: 100%; border: 1px solid var(--COLOR_supportDark_300); border-radius: 0.25rem; transform: translateY(-45%); clip-path: inset(60% 0 0 0); } #partnerCompatibilityPage peg-partner-compatibility-details-card .dimensionsBarChart .legend .average { background: var(--COLOR_compatibility_light); position: relative; padding-inline: 0.25rem; } #myProfilePage #pageWrapper { padding-top: 48px; } @media only screen and (min-width: 768px) { #myProfilePage #pageWrapper { padding-top: 98px; } } #myProfilePage #pageWrapper #content { max-width: none; } #myProfilePage #pageWrapper .hintBoxWrapper { background-color: var(--COLOR_alertInfo_200); } #myProfilePage #pageWrapper .hintBoxWrapper .wdk-hintbox#optinStatusHintbox { max-width: 1024px; margin: 0 auto; } #myProfilePage #pageWrapper #serviceUnavailable { margin: 32px 0; } #myProfilePage .wdk-modalbox .modalboxContent article { min-height: 160px; } #myProfilePage #entertainmentCard wdk-approval-tag { margin-top: 8px; } #myProfilePage #profileTabNavi { position: relative; min-width: 320px; width: 100%; margin-left: auto; margin-right: auto; max-width: 1024px; background-color: var(--COLOR_supportLight_100); font: var(--FONT_default_100); transition: opacity, height 0.3s 0.2s ease; z-index: 1; height: 48px; margin-top: 10px; } @media only screen and (min-width: 481px) { #myProfilePage #profileTabNavi { margin-top: 0; } } #myProfilePage #profileTabNavi a:focus-visible { outline-offset: -2px; } #myProfilePage #profileTabNavi .iconWrapper { position: absolute; z-index: 100; top: -1000px; width: 50px; height: 44px; padding-top: 12px; opacity: 0; transition: opacity 0.5s; } @media only screen and (max-width: 767px) { #myProfilePage #profileTabNavi.showSwiperArrows .iconWrapper { top: 0; animation-fill-mode: forwards; animation-delay: 0.5s; } #myProfilePage #profileTabNavi.showSwiperArrows .iconWrapper.bg-icon_arrow_left_light { left: 0; padding-left: 6px; text-align: left; background-image: linear-gradient( to right, var(--COLOR_supportLight_100) 25%, var(--COLOR_supportLight_040) 100% ); animation: dancingLeft 2.3s linear; } #myProfilePage #profileTabNavi.showSwiperArrows .iconWrapper.bg-icon_arrow_right_light { right: 0; padding-right: 6px; text-align: right; background-image: linear-gradient( to right, var(--COLOR_supportLight_040) 0, var(--COLOR_supportLight_100) 75% ); animation: dancingRight 2.3s linear; } } #myProfilePage #profileTabNavi ul { display: flex; width: 100%; margin: 0; white-space: nowrap; } @media only screen and (min-width: 768px) { #myProfilePage #profileTabNavi ul { justify-content: space-evenly; } } #myProfilePage #profileTabNavi ul li { position: relative; display: inline-flex; padding: 0; width: 100%; justify-content: center; text-align: center; scroll-snap-align: start; border-bottom: 3px solid rgba(0, 0, 0, 0); } #myProfilePage #profileTabNavi ul li::after { position: absolute; content: ""; bottom: -3px; left: 0; width: 100%; height: 3px; opacity: 0; background-color: var(--COLOR_primary_100); transition: opacity 0.2s ease; } #myProfilePage #profileTabNavi ul li::before { content: ""; position: absolute; border-left: 1px solid var(--COLOR_supportDark_040); right: 0; top: 21%; height: 62%; } #myProfilePage #profileTabNavi ul li.is-loading .loader { opacity: 0.3; } #myProfilePage #profileTabNavi ul li:last-child::before { display: none; } #myProfilePage #profileTabNavi ul li a { display: block; width: 100%; padding: 13px 24px 11px 24px; color: var(--COLOR_defaultText); text-decoration: none; color: var(--COLOR_supportDark_300); } @media only screen and (min-width: 980px) { #myProfilePage #profileTabNavi ul li a { padding: 13px 10px 11px 10px; } } #myProfilePage #profileTabNavi ul li a:active { background-color: var(--COLOR_supportDark_040); } #myProfilePage #profileTabNavi ul li a.is-disabled { color: var(--COLOR_supportDark_400); pointer-events: none; cursor: default; } .no-touchevents #myProfilePage #profileTabNavi ul li:hover::after, #myProfilePage #profileTabNavi ul li.active::after { opacity: 1; } .no-touchevents #myProfilePage #profileTabNavi ul li:hover a, #myProfilePage #profileTabNavi ul li.active a { color: var(--COLOR_primary_100); } .no-touchevents #myProfilePage #profileTabNavi ul li:hover a.is-disabled, #myProfilePage #profileTabNavi ul li.active a.is-disabled { cursor: default; color: var(--COLOR_supportDark_400); } .no-touchevents #myProfilePage #profileTabNavi ul li:hover a.is-disabled::after, #myProfilePage #profileTabNavi ul li.active a.is-disabled::after { opacity: 0; } #myProfilePage #tabContents { width: 100%; margin: 12px auto 0 auto; } @media only screen and (min-width: 768px) { #myProfilePage #tabContents { margin-top: 24px; } } #myProfilePage #tabContents > div { display: none; } #myProfilePage #tabContents > div.active { display: block; } #myProfilePage #profileHeader { position: relative; color: var(--COLOR_defaultText); background-color: var(--COLOR_supportLight_100); } #myProfilePage #profileHeader #sedCard, #myProfilePage #profileHeader .moreInfoBox { max-width: 1024px; margin: 0 auto; } @media only screen and (min-width: 481px) { #myProfilePage #profileHeader #sedCard, #myProfilePage #profileHeader .moreInfoBox { position: relative; } } @media only screen and (min-width: 481px) { #myProfilePage #profileHeader .moreInfoBox { padding-top: 152px; } } #myProfilePage #profileHeader #profileMenu { position: fixed; top: 10px; right: -300px; width: 300px; max-width: 300px; z-index: 500; opacity: 0; transform: scale(0); transform-origin: 100% 0; transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1); } @media only screen and (min-width: 481px) { #myProfilePage #profileHeader #profileMenu { position: absolute; top: 16px; opacity: 1; z-index: 50; transform: scale(1) translate3d(0, 0, 0); transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), z-index 0.05s 0.3s linear; } } .has-openProfileMenu #myProfilePage #profileHeader #profileMenu { right: 10px; opacity: 1; transform: scale(1); } @media only screen and (min-width: 481px) { .has-openProfileMenu #myProfilePage #profileHeader #profileMenu { right: -300px; z-index: 500; transform: translate3d(-300px, 0, 0); transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } } .has-openProfileMenu #myProfilePage #profileHeader #profileMenu .openProfilemenu { transform: translate3d(calc(100% - 48px), 0, 0); } .has-openProfileMenu #myProfilePage #profileHeader #profileMenu .profileMenuListHeader #closeProfileMenu { display: block; } .has-openProfileMenu #myProfilePage #profileHeader #profileMenu #profileMenuList ul li { display: block; } .has-openProfileMenu #myProfilePage #profileHeader #profileMenu #profileMenuList ul li:first-child { display: flex; justify-content: space-between; align-items: center; } @media only screen and (min-width: 768px) { .has-openProfileMenu #myProfilePage #profileHeader #profileMenu #profileMenuList ul li:first-child { display: block; } } #myProfilePage #profileHeader #profileMenu .wdk-icon { fill: var(--COLOR_supportDark_090); } #myProfilePage #profileHeader #profileMenu .openProfilemenu { display: none; position: absolute; top: 0; right: 300px; height: 48px; padding: 0 23px 0 8px; z-index: -1; font: var(--FONT_highlight_75); text-transform: uppercase; color: var(--COLOR_supportLight_100); white-space: nowrap; text-decoration: none; background-color: var(--COLOR_primary_100); border-top-left-radius: var(--borderRadius_75); border-bottom-left-radius: var(--borderRadius_75); transform: translate3d(0, 0, 0); transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } #myProfilePage #profileHeader #profileMenu .openProfilemenu::before, #myProfilePage #profileHeader #profileMenu .openProfilemenu::after { width: 28px; height: 28px; position: relative; top: 10px; margin-right: 8px; } @media only screen and (min-width: 481px) { #myProfilePage #profileHeader #profileMenu .openProfilemenu { display: block; padding: 0 23px 0 8px; } #myProfilePage #profileHeader #profileMenu .openProfilemenu::before, #myProfilePage #profileHeader #profileMenu .openProfilemenu::after { margin-right: 12px; } } #myProfilePage #profileHeader #profileMenu .openProfilemenu span { pointer-events: none; } #myProfilePage #profileHeader #profileMenu .profileMenuListHeader { display: flex; justify-content: flex-end; height: 48px; background-color: var(--COLOR_supportLight_100); border-bottom: 1px solid var(--COLOR_supportDark_070); } @media only screen and (min-width: 481px) { #myProfilePage #profileHeader #profileMenu .profileMenuListHeader { display: none; } } #myProfilePage #profileHeader #profileMenu .profileMenuListHeader #closeProfileMenu { display: none; padding: 10px; } #myProfilePage #profileHeader #profileMenu #profileMenuList { position: relative; z-index: 1; width: 300px; } #partnerProfilePage #myProfilePage #profileHeader #profileMenu #profileMenuList ul li:first-child { border-bottom: 1px solid var(--COLOR_supportDark_070); } #myProfilePage #profileHeader #profileMenu #profileMenuList { background-color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 481px) { #myProfilePage #profileHeader #profileMenu #profileMenuList { border-bottom-left-radius: var(--borderRadius_75); } } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li { display: none; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li #favoriteProfile .removeFavorite { display: none; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li #favoriteProfile.is-favorite::before { color: var(--COLOR_primary_100); } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li #favoriteProfile.is-favorite .addFavorite { display: none; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li #favoriteProfile.is-favorite .removeFavorite { display: inline; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li#imageUnreleaseButton { display: none; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li#imageUnreleaseButton.is-visible { display: block; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li.is-contact #rejectContact { display: flex; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li.is-contact #rejectProfile { display: none; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li.is-favorite #removeFavoriteMessengerProfile { display: flex; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li.is-favorite #favoriteMessengerProfile { display: none; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li .chiffre { display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 0 18px 0 16px; font: var(--FONT_default_75); line-height: 48px; color: var(--COLOR_supportDark_300); } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li .chiffre::before { float: left; margin-right: 32px; line-height: 48px; font-size: 23px; color: var(--COLOR_supportDark_300); } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li .chiffre .wdk-icon { margin-right: 14px; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li #closePartnerProfileMenu { width: auto; padding: 10px; } @media only screen and (min-width: 768px) { #myProfilePage #profileHeader #profileMenu #profileMenuList ul li #closePartnerProfileMenu { display: none; } } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li button, #myProfilePage #profileHeader #profileMenu #profileMenuList ul li a { width: 100%; height: auto; padding-left: 16px; line-height: 48px; text-align: left; text-transform: none; letter-spacing: normal; font-weight: inherit; border-radius: 0; justify-content: flex-start; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li button::before, #myProfilePage #profileHeader #profileMenu #profileMenuList ul li a::before { line-height: 48px; color: var(--COLOR_supportDark_300); position: relative; top: 3px; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li button span.text, #myProfilePage #profileHeader #profileMenu #profileMenuList ul li a span.text { margin-left: 16px; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li button#reportProfile .wdk-icon, #myProfilePage #profileHeader #profileMenu #profileMenuList ul li a#reportProfile .wdk-icon { fill: var(--COLOR_alertError_100); } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li button#rejectContact, #myProfilePage #profileHeader #profileMenu #profileMenuList ul li a#rejectContact { display: none; } #myProfilePage #profileHeader #profileMenu #profileMenuList ul li button#removeFavoriteMessengerProfile, #myProfilePage #profileHeader #profileMenu #profileMenuList ul li a#removeFavoriteMessengerProfile { display: none; } #myProfilePage #bgImgBox { position: relative; height: 132px; background-position: 50% 50%; background-repeat: no-repeat; background-color: var(--COLOR_supportDark_040); background-size: cover; cursor: pointer; } @media only screen and (min-width: 481px) { #myProfilePage #bgImgBox { height: 280px; } } @media only screen and (min-width: 481px) { #myProfilePage #bgImgBox::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 120px; background-image: linear-gradient( transparent, var(--COLOR_supportDark_090) ); } } #myProfilePage #profileHeader { --photoBoxS: 144px; } #myProfilePage #profileHeader #photoBox { position: absolute; z-index: 2; left: 50%; top: 64px; margin-left: calc(-1 * var(--photoBoxS) / 2); width: var(--photoBoxS); height: var(--photoBoxS); } @media only screen and (min-width: 481px) { #myProfilePage #profileHeader #photoBox { top: -72px; left: 12px; margin: 0; } } @media only screen and (min-width: 980px) { #myProfilePage #profileHeader #photoBox { top: -88px; height: 176px; width: 176px; } } #myProfilePage #profileHeader #photoBox .photoWrapper { position: relative; width: 100%; height: 100%; overflow: hidden; border: 4px solid var(--COLOR_supportLight_100); background-color: var(--COLOR_supportDark_070); border-radius: var(--borderRadius_circle); z-index: 1; --focus-visible-border-radius: var(--borderRadius_circle); } #myProfilePage #profileHeader #photoBox .photoWrapper .overlay { position: absolute; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; padding: 8px; font: var(--FONT_default_50); color: var(--COLOR_supportLight_100); text-align: center; transition: height 0.3s, padding-top 0.3s; background-color: var(--COLOR_supportDark_080); } #myProfilePage #profileHeader #photoBox .photoWrapper .overlay .fulltext { display: none; } #myProfilePage #profileHeader #photoBox .photoWrapper .has-hover .overlay, .no-touchevents #myProfilePage #profileHeader #photoBox .photoWrapper:hover .overlay { height: 94px; padding: 22px; } #myProfilePage #profileHeader #photoBox .photoWrapper .has-hover .overlay .teaser, .no-touchevents #myProfilePage #profileHeader #photoBox .photoWrapper:hover .overlay .teaser { display: none; } #myProfilePage #profileHeader #photoBox .photoWrapper .has-hover .overlay .fulltext, .no-touchevents #myProfilePage #profileHeader #photoBox .photoWrapper:hover .overlay .fulltext { display: block; } #myProfilePage #profileHeader #photoBox .photoWrapper .has-hover .overlay, .no-touchevents #myProfilePage #profileHeader #photoBox .photoWrapper:hover .overlay { height: 64px; } #myProfilePage #profileHeader #photoBox .photoWrapper a { display: block; width: 100%; height: 100%; } #myProfilePage #profileHeader #photoBox .photoWrapper a:focus-visible { outline-offset: -20px; } #myProfilePage #profileHeader #photoBox .photoWrapper .photo { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center; } #myProfilePage #profileHeader #photoBox #addPhotos { position: absolute; width: 42px; height: 42px; bottom: 8px; right: -3px; z-index: 2; margin: 0; padding: 8px; } @media only screen and (min-width: 768px) { #myProfilePage #profileHeader #photoBox #addPhotos { bottom: 2px; right: 0; } } @media only screen and (min-width: 980px) { #myProfilePage #profileHeader #photoBox #addPhotos { bottom: 6px; right: 12px; } } #myProfilePage #miniGallery { position: absolute; top: 150px; right: 6%; z-index: 1; } @media only screen and (min-width: 481px) { #myProfilePage #miniGallery { top: 20px; right: auto; left: 184px; width: auto; } } @media only screen and (min-width: 768px) { #myProfilePage #miniGallery { top: 24px; } } @media only screen and (min-width: 980px) { #myProfilePage #miniGallery { left: 232px; } } #myProfilePage #miniGallery li { display: none; } @media only screen and (min-width: 768px) { #myProfilePage #miniGallery li { display: inline-block; } } #myProfilePage #miniGallery li:first-child { display: block; } @media only screen and (min-width: 768px) { #myProfilePage #miniGallery li:first-child { display: inline-block; } } .no-touchevents #myProfilePage #miniGallery li:hover .photo { box-shadow: 0 2px 10px 0 var(--COLOR_supportDark_080); } #myProfilePage #miniGallery li:active .photo { opacity: 0.8; } #myProfilePage #miniGallery li::before { position: absolute; width: 48px; font: var(--FONT_highlight_100); line-height: 48px; text-align: center; } #myProfilePage #miniGallery li.has-more::before { content: attr(data-remaining); } #myProfilePage #miniGallery li.has-more .photo { background-image: none !important; background-color: rgba(0, 0, 0, 0) !important; border: 1px solid var(--COLOR_supportDark_070); } #myProfilePage #miniGallery li#previewPic_3, #myProfilePage #miniGallery li#previewPic_4, #myProfilePage #miniGallery li#previewPic_5, #myProfilePage #miniGallery li#previewPic_6, #myProfilePage #miniGallery li#previewPic_7, #myProfilePage #miniGallery li#previewPic_8, #myProfilePage #miniGallery li#previewPic_9 { display: none; } @media only screen and (min-width: 768px) { #myProfilePage #miniGallery li#previewPic_3 { display: inline-block; } } @media only screen and (min-width: 768px) { #myProfilePage #miniGallery li#previewPic_4 { display: inline-block; } } @media only screen and (min-width: 818px) { #myProfilePage #miniGallery li#previewPic_5 { display: inline-block; } } @media only screen and (min-width: 868px) { #myProfilePage #miniGallery li#previewPic_6 { display: inline-block; } } @media only screen and (min-width: 918px) { #myProfilePage #miniGallery li#previewPic_7 { display: inline-block; } } @media only screen and (min-width: 968px) { #myProfilePage #miniGallery li#previewPic_8 { display: inline-block; } } @media only screen and (min-width: 1018px) { #myProfilePage #miniGallery li#previewPic_9 { display: inline-block; } } #myProfilePage #miniGallery li .photoWrap { position: relative; z-index: 2; display: block; margin: 0 auto; width: 48px; } #myProfilePage #miniGallery li .photoWrap peg-photo-gallery-dialog-trigger { display: block; width: 100%; --focus-visible-border-radius: var(--borderRadius_circle); } #myProfilePage #miniGallery li .photoWrap peg-photo-gallery-dialog-trigger .photo { display: block; width: 40px; height: 40px; margin: 4px; background-color: var(--COLOR_supportDark_070); background-repeat: no-repeat; background-size: 100% auto; border-radius: var(--borderRadius_circle); transition: box-shadow 0.2s; } #myProfilePage #miniGallery li .photoWrap .remainingSM { position: absolute; top: -2px; right: -2px; width: 21px; height: 21px; padding-top: 3px; padding-left: 1px; font: var(--FONT_highlight_50); text-align: center; color: var(--COLOR_primary_100); background-color: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); box-shadow: 0 0.85px 4px 0 var(--COLOR_supportDark_080); } @media only screen and (min-width: 768px) { #myProfilePage #miniGallery li .photoWrap .remainingSM { display: none; } } #myProfilePage #actionButtons { position: relative; width: auto; color: var(--COLOR_supportLight_100); } @media (max-width: 480px) { #myProfilePage #actionButtons { display: none; } } @media only screen and (min-width: 481px) { #myProfilePage #actionButtons { position: absolute; top: 12px; right: 12px; bottom: auto; width: 150px; z-index: 1; } } @media only screen and (min-width: 550px) { #myProfilePage #actionButtons { top: 24px; width: auto; } } @media only screen and (min-width: 768px) { #myProfilePage #actionButtons { top: 28px; right: 24px; } } @media only screen and (min-width: 980px) { #myProfilePage #actionButtons { right: 12px; } } @media only screen and (min-width: 481px) { #myProfilePage #actionButtons ul::after { content: ""; display: table; clear: both; } } @media only screen and (min-width: 481px) { #myProfilePage #actionButtons ul li { float: right; margin-right: 12px; } } @media only screen and (min-width: 768px) { #myProfilePage #actionButtons ul li { margin-right: 28px; } } @media only screen and (min-width: 980px) { #myProfilePage #actionButtons ul li { margin-right: 32px; } } #myProfilePage #actionButtons ul li:first-child { margin-right: 0; } @media (min-width: 481px) and (max-width: 549px) { #myProfilePage #actionButtons ul li:first-child { margin-bottom: 10px; } } @media (min-width: 481px) and (max-width: 549px) { #myProfilePage #actionButtons ul li:nth-child(2) { margin-bottom: 10px; } } @media (min-width: 481px) and (max-width: 549px) { #myProfilePage #actionButtons ul li:nth-child(3) { margin-right: 0; } } #myProfilePage #actionButtons ul li #iDCheckDone { cursor: default; color: var(--COLOR_alertSuccess_100); border-color: var(--COLOR_alertSuccess_100); } #myProfilePage #actionButtons ul li #iDCheckDone::before { color: var(--COLOR_alertSuccess_100); } #myProfilePage #actionButtons ul li #iDCheckDone .text { color: var(--COLOR_supportDark_300); } #myProfilePage #actionButtons ul li .wdk-button.t-circle .text { word-wrap: break-word; width: 152%; } @media (min-width: 481px) and (max-width: 767px) { #myProfilePage #actionButtons ul li .wdk-button.t-circle .text { display: none; } } #myProfilePage #mainUserInfo { text-align: center; margin: 92px 8px 0 8px; } @media only screen and (min-width: 481px) { #myProfilePage #mainUserInfo { position: absolute; top: auto; bottom: 40px; left: 214px; width: calc(100% - 214px - 8px); margin: 0; text-align: left; color: var(--COLOR_supportLight_100); } } @media only screen and (min-width: 980px) { #myProfilePage #mainUserInfo { left: 242px; width: calc(100% - 242px - 8px); } } @media only screen and (min-width: 481px) { #myProfilePage #mainUserInfo.isDisplayNameEnabled { bottom: 18px; } } #myProfilePage #mainUserInfo.isDisplayNameEnabled .age { display: block; font: var(--FONT_default_100); color: var(--COLOR_supportDark_100); } @media only screen and (min-width: 481px) { #myProfilePage #mainUserInfo.isDisplayNameEnabled .age { color: var(--COLOR_supportLight_100); } } #myProfilePage #mainUserInfo h2#myNameText { position: relative; display: inline-flex; align-items: center; font: var(--FONT_highlight_300); cursor: pointer; flex-direction: column; margin-bottom: 12px; } @media only screen and (min-width: 481px) { #myProfilePage #mainUserInfo h2#myNameText { flex-direction: row; margin-bottom: 0; font: var(--FONT_default_200); } } #myProfilePage #mainUserInfo h2#myNameText.js-openEditLayer { cursor: pointer; } #myProfilePage #mainUserInfo h2#myNameText .myName { display: flex; align-items: center; } #myProfilePage #mainUserInfo h2#myNameText .myName .wdk-icon { fill: var(--COLOR_supportLight_100); display: none; } @media only screen and (min-width: 481px) { #myProfilePage #mainUserInfo h2#myNameText .myName .wdk-icon { display: block; } } #myProfilePage #mainUserInfo h2#myNameText .noBreakWrapper { white-space: nowrap; } #myProfilePage #mainUserInfo h2#myNameText wdk-approval-tag { margin-top: 8px; } @media only screen and (min-width: 481px) { #myProfilePage #mainUserInfo h2#myNameText wdk-approval-tag { margin-top: 0; } } #myProfilePage #mainUserInfo h3#occupation { display: flex; align-items: center; justify-content: center; cursor: pointer; font: var(--FONT_default_100); color: var(--COLOR_supportDark_300); } @media only screen and (min-width: 481px) { #myProfilePage #mainUserInfo h3#occupation { justify-content: flex-start; color: var(--COLOR_supportLight_100); } } @media only screen and (min-width: 768px) { #myProfilePage #mainUserInfo h3#occupation { font: var(--FONT_default_200); } } #myProfilePage .editModalLayer .modalboxContent { min-height: 320px; } #myProfilePage .editModalLayer .wrapList { margin-bottom: 16px; } #myProfilePage #editOccupationModal .saveError.is-visible { display: block; } #myProfilePage #editBackgroundImage .modalboxContent article h3 { margin: 40px 0 24px 0; font: var(--FONT_highlight_75); } #myProfilePage #editBackgroundImage .modalboxContent article h3:first-child { margin-top: 0; } #myProfilePage #editBackgroundImage .modalboxContent article ul { padding: 0; font-size: 0; line-height: 0; } #myProfilePage #editBackgroundImage .modalboxContent article ul li { position: relative; list-style: none; margin-top: 8px; cursor: pointer; border: 1px solid var(--COLOR_supportDark_070); overflow: hidden; } #myProfilePage #editBackgroundImage .modalboxContent article ul li:first-child { margin-top: 0; } #myProfilePage #editBackgroundImage .modalboxContent article ul li::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_check_circle.svg); mask-image: url(../../img/icons/single_color/icon_check_circle.svg); vertical-align: -3px; width: 36px; height: 36px; opacity: 0; display: block; position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -18px; color: var(--COLOR_alertSuccess_100); background-color: var(--COLOR_alertSuccess_100); transition: opacity 0.2s; z-index: 2; } #myProfilePage #editBackgroundImage .modalboxContent article ul li::after { opacity: 0; display: block; position: absolute; margin: -28px 0 0 -28px; left: 50%; top: 50%; content: ""; border-radius: var(--borderRadius_circle); width: 56px; height: 56px; background-color: var(--COLOR_supportLight_100); transition: opacity 0.2s; } #myProfilePage #editBackgroundImage .modalboxContent article ul li.active { cursor: default; } #myProfilePage #editBackgroundImage .modalboxContent article ul li.active::before, #myProfilePage #editBackgroundImage .modalboxContent article ul li.active::after { opacity: 1; } #myProfilePage #editBackgroundImage .modalboxContent article ul li img { display: inline-block; width: 100%; max-width: 100%; } #myProfilePage #editEducationLevelAndTitleModal hr { margin: 8px -8px; border: 0; border-top: 1px solid var(--COLOR_supportDark_070); } #myProfilePage #editReligionModal footer, #myProfilePage #editEthnicityModal footer, #myProfilePage #editPoliticalViewModal footer { flex-flow: column; } #myProfilePage #editReligionModal footer .consentText, #myProfilePage #editEthnicityModal footer .consentText, #myProfilePage #editPoliticalViewModal footer .consentText { width: 100%; text-align: left; padding-top: 16px; font: var(--FONT_default_50); border-top: 1px solid var(--COLOR_supportDark_070); } #myProfilePage #editReligionModal footer .consentText a, #myProfilePage #editEthnicityModal footer .consentText a, #myProfilePage #editPoliticalViewModal footer .consentText a { color: var(--COLOR_primary_100); } #myProfilePage #editReligionModal footer .consentText a:hover, #myProfilePage #editEthnicityModal footer .consentText a:hover, #myProfilePage #editPoliticalViewModal footer .consentText a:hover { color: var(--COLOR_supportDark_100); } #myProfilePage #addLifestyleSuggestionsModal article { text-align: center; } #myProfilePage #addLifestyleSuggestionsModal article .wdk-icon { display: block; width: 60px; height: 60px; margin: 16px auto 32px auto; fill: var(--COLOR_primary_100); } #myProfilePage #addLifestyleSuggestionsModal article .thanks { font: var(--FONT_highlight_200); } #myProfilePage #addLifestyleSuggestionsModal article .text { margin-bottom: 32px; } @media only screen and (min-width: 768px) { #myProfilePage #editLifestyleModal .modalboxContent { height: 88vh; } } #myProfilePage #editLifestyleModal .modalboxContent header { padding: 24px 20px 0 20px; } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer { display: block; height: auto; align-items: center; } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer h3 { font: var(--FONT_default_200); padding: 0 8px 16px 0; } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer .searchContainer { display: flex; height: 54px; gap: 16px; } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer .searchContainer wdk-search-field { width: 100%; } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi { display: flex; gap: 8px; color: var(--COLOR_supportDark_100); margin-top: 16px; margin-bottom: 8px; } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li { padding: 8px 12px; margin-bottom: 4px; font: var(--FONT_default_75); border-radius: var(--borderRadius_200); white-space: nowrap; height: fit-content; cursor: pointer; -webkit-user-select: none; user-select: none; } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li:hover { background-color: var(--COLOR_supportDark_600); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_INTERESTS"] { color: var(--COLOR_decoration_200); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_INTERESTS"].active { background-color: var(--COLOR_decoration_200_light); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_SPORTS"] { color: var(--COLOR_decoration_300); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_SPORTS"].active { background-color: var(--COLOR_decoration_300_light); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_FAVORITE_CUISINE"] { color: var(--COLOR_primary_100); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_FAVORITE_CUISINE"].active { background-color: var(--COLOR_primary_100_light); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_HOLIDAY"] { color: var(--COLOR_decoration_100); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_HOLIDAY"].active { background-color: var(--COLOR_decoration_100_light); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_BEST_LIVE_SKILLS"] { color: var(--COLOR_decoration_400); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li[data-modal-show-tab="tab_BEST_LIVE_SKILLS"].active { background-color: var(--COLOR_decoration_400_light); } #myProfilePage #editLifestyleModal .modalboxContent header .headerContainer #modalTabNavi li button { border: 0; padding: 0; margin: 0; background-color: rgba(0, 0, 0, 0); color: inherit; } #myProfilePage #editLifestyleModal .modalboxContent article { display: block; padding-top: 16px; } #myProfilePage #editLifestyleModal .modalboxContent article .lifestyleContainer { display: block; } #myProfilePage #editLifestyleModal .modalboxContent article .modalTabNaviTab { display: flex; flex-wrap: wrap; gap: 12px 8px; margin-bottom: 32px; } #myProfilePage #editLifestyleModal .modalboxContent article .modalTabNaviTab h2 { display: block; width: 100%; font: var(--FONT_default_75); text-transform: uppercase; color: #5e5e63; } #myProfilePage #editLifestyleModal .modalboxContent article .modalTabNaviTab[data-similarities-category="INTERESTS"] h2 { color: var(--COLOR_decoration_200); } #myProfilePage #editLifestyleModal .modalboxContent article .modalTabNaviTab[data-similarities-category="SPORTS"] h2 { color: var(--COLOR_alertInfo_100); } #myProfilePage #editLifestyleModal .modalboxContent article .modalTabNaviTab[data-similarities-category="FAVORITE_CUISINE"] h2 { color: var(--COLOR_primary_100); } #myProfilePage #editLifestyleModal .modalboxContent article .modalTabNaviTab[data-similarities-category="HOLIDAY"] h2 { color: var(--COLOR_decoration_100); } #myProfilePage #editLifestyleModal .modalboxContent article .modalTabNaviTab[data-similarities-category="BEST_LIVE_SKILLS"] h2 { color: var(--COLOR_decoration_400); } #myProfilePage #editLifestyleModal .modalboxContent article .lifestyleNoEntries { width: 100%; display: block; margin: 32px 0 0 0; row-gap: 8px; } #myProfilePage #editLifestyleModal .modalboxContent article .lifestyleNoEntries .header { display: flex; justify-content: center; font: var(--FONT_highlight_200); } #myProfilePage #editLifestyleModal .modalboxContent article .lifestyleNoEntries .subtext { display: block; text-align: center; max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } #myProfilePage #editLifestyleModal .modalboxContent article .lifestyleNoEntries .openLifestyleSuggestionsModal { margin-top: 60px; } #myProfilePage #editLifestyleModal #confirmLifestyleRemovalModal .layerContent header h3 { padding-left: 0; } #myProfilePage #editLifestyleModal #confirmLifestyleRemovalModal .layerContent article { min-height: 80px; } #myProfilePage #aboutMeStatementCard { padding-bottom: 8px; } #myProfilePage #aboutMeStatementCard::after { content: ""; display: table; clear: both; } #myProfilePage #aboutMeStatementCard .contentWrapper > h2 { padding-bottom: 24px; color: var(--COLOR_supportDark_300); font: var(--FONT_default_75); text-transform: uppercase; } #myProfilePage #aboutMeStatementCard .aboutMeStatementText { padding-bottom: 8px; margin-bottom: 0; cursor: pointer; word-wrap: anywhere; color: var(--COLOR_supportDark_100); } #myProfilePage #aboutMeStatementCard .cardFooter { text-align: right; } #myProfilePage #aboutMeStatementCard .cardFooter #openEditAboutMeStatement { color: var(--COLOR_supportDark_400); } @media only screen and (min-width: 768px) { #myProfilePage #aboutMeStatementCard .cardFooter #openEditAboutMeStatement { color: var(--COLOR_supportDark_100); } } #myProfilePage #aboutMeStatementCard .cardFooter #openEditAboutMeStatement .icon::before { width: 24px; height: 24px; } #myProfilePage #aboutMeStatementCard .cardFooter #openEditAboutMeStatement .text { color: var(--COLOR_supportDark_100); font: var(--FONT_highlight_100); } #myProfilePage #aboutMeStatementCard .cardFooter #openEditAboutMeStatement::before { font-size: 24px; } #myProfilePage #profileQuestionCard { padding-bottom: 8px; } #myProfilePage #profileQuestionCard #profileQuestions li { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 95px; border-top: 1px solid var(--COLOR_supportDark_050); padding: 16px 0; cursor: pointer; } #myProfilePage #profileQuestionCard #profileQuestions li:first-of-type { border-top: 0; } #myProfilePage #profileQuestionCard #profileQuestions li.highlight { animation: highlightFade 1.2s ease-in-out; } #myProfilePage #profileQuestionCard #profileQuestions li .listItemFooter { margin: 12px 0 -12px 0; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } #myProfilePage #profileQuestionCard #profileQuestions li .listItemFooter .openEditIcon { color: var(--COLOR_supportDark_100); } #myProfilePage #profileQuestionCard #profileQuestions li .listItemFooter .openEditIcon .wdk-icon { width: 24px; height: 24px; fill: var(--COLOR_supportDark_400); } @media only screen and (min-width: 768px) { #myProfilePage #profileQuestionCard #profileQuestions li .listItemFooter .openEditIcon .wdk-icon { fill: var(--COLOR_supportDark_100); } } #myProfilePage #profileQuestionCard #profileQuestions li .listItemFooter .openEditIcon .text { color: var(--COLOR_supportDark_100); font: var(--FONT_highlight_100); } #myProfilePage #profileQuestionCard #profileQuestions li .actionButtons, #myProfilePage #profileQuestionCard #profileQuestions li .upDownButtons { white-space: nowrap; } #myProfilePage #profileQuestionCard #profileQuestions li .actionButtons .wdk-button:first-child, #myProfilePage #profileQuestionCard #profileQuestions li .upDownButtons .wdk-button:first-child { margin-right: 20px; } #myProfilePage #profileQuestionCard #profileQuestions li .upDownButtons { margin-right: 20px; } #myProfilePage #profileQuestionCard #profileQuestions li .upDownButtons .wdk-button::before { position: relative; top: 2px; } #myProfilePage #profileQuestionCard #profileQuestions li .upDownButtons .wdk-button.moveUp::before { top: 4px; } #myProfilePage #profileQuestionCard #profileQuestions li .upDownButtons .wdk-button.disabled .wdk-icon { fill: var(--COLOR_supportDark_400); } #myProfilePage #profileQuestionCard #profileQuestions li h4 { margin-top: 0; font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); } #myProfilePage #profileQuestionCard #profileQuestions li p { word-wrap: anywhere; margin-bottom: 0; padding-right: 40px; font: var(--FONT_default_100); color: var(--COLOR_supportDark_100); } #myProfilePage #profileQuestionCard #profileQuestions li wdk-approval-tag { margin-top: 8px; } #myProfilePage #profileQuestionCard #noQuestionsAnswered { padding: 16px 24px; color: var(--COLOR_supportDark_300); } #myProfilePage #profileQuestionCard #addProfileQuestion { width: 100%; margin: 8px 0 12px 0; } #myProfilePage #profileQuestionCard #addProfileQuestion::before { display: none; } @media only screen and (min-width: 481px) { #myProfilePage #profileQuestionCard #addProfileQuestion::before { display: block; } } #myProfilePage #profileQuestionCard #addProfileQuestion .text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } #myProfilePage #profileQuestionCard #allQuestionsAnswered { margin: 8px 0 16px 0; } @media only screen and (min-width: 768px) { #myProfilePage #profileQuestionCard #allQuestionsAnswered { margin: 8px 0 24px 0; } } @media (max-width: 480px) { #myProfilePage .editProfileQuestionModal header h3 { font: var(--FONT_highlight_75); white-space: normal; } #myProfilePage .editProfileQuestionModal header .closeX { height: 42px; } } #myProfilePage .editProfileQuestionModal #profileQuestionAnswerInput { margin-top: 0; } #myProfilePage .addProfileQuestionModal .wdk-form-customDropdown { overflow: visible; } #myProfilePage #factfileCard ul li#region p { display: inline; white-space: nowrap; } #myProfilePage #factfileCard ul li#region .linkToDistance { position: relative; display: inline-block; padding-left: 0; text-decoration: underline; } #myProfilePage #factfileCard ul li#region .linkToDistance .wdk-icon { position: relative; top: 2px; display: inline-block; width: 18px; height: 18px; } #myProfilePage #factfileCard ul li#region .linkToDistance .wdk-icon img { width: 100%; height: auto; } #myProfilePage #factfileCard ul li#region .linkToDistance:hover { text-decoration: none; } #myProfilePage #factfileCard ul li#region, #myProfilePage #factfileCard ul li#bodyHeight, #myProfilePage #factfileCard ul li#starSign { cursor: default; background-color: rgba(0, 0, 0, 0); } #myProfilePage #factfileCard ul li#region::after, #myProfilePage #factfileCard ul li#bodyHeight::after, #myProfilePage #factfileCard ul li#starSign::after { display: none; } #myProfilePage #factfileCard ul li wdk-approval-tag { margin-top: 8px; } #myProfilePage #editLanguageModal .scrollingContent::after { content: ""; display: table; clear: both; } #myProfilePage #editLanguageModal .scrollingContent .wdk-form-toggles { float: left; width: 50%; } #myProfilePage #editLanguageModal .wrapList::after { content: ""; display: table; clear: both; } #myProfilePage #editLanguageModal .wrapList .wdk-form-toggles { float: left; width: 50%; padding-right: 8px; } #myProfilePage #editLanguageModal .wrapList .wdk-form-toggles:nth-child(odd) { clear: left; } #myProfilePage #editLanguageModal .wrapList .wdk-form-toggles label { max-width: 100%; word-wrap: break-word; } #myProfilePage #lifestyleCard .lifestyleCategoryContainer { margin: 0 0 56px 0; overflow: hidden; } @media (pointer: fine) { #myProfilePage #lifestyleCard .lifestyleCategoryContainer:hover { cursor: pointer; } } #myProfilePage #lifestyleCard .lifestyleCategoryContainer:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; } #myProfilePage #lifestyleCard .lifestyleCategoryContainer#highlights { margin-inline: -24px; } @media only screen and (min-width: 768px) { #myProfilePage #lifestyleCard .lifestyleCategoryContainer#highlights { margin-inline: -20px; } } @media (pointer: fine) { #myProfilePage #lifestyleCard .lifestyleCategoryContainer#highlights:hover { cursor: default; } } #myProfilePage #lifestyleCard .lifestyleCategoryContainer#highlights .headlineContainer { margin: 0 24px 16px 24px; } @media only screen and (min-width: 768px) { #myProfilePage #lifestyleCard .lifestyleCategoryContainer#highlights .headlineContainer { margin: 0 20px 16px 20px; } } #myProfilePage #lifestyleCard .lifestyleCategoryContainer .headlineContainer { display: flex; justify-content: space-between; align-items: center; margin: 0 0 16px 0; } #myProfilePage #lifestyleCard .lifestyleCategoryContainer .headlineContainer h4 { text-transform: uppercase; } #myProfilePage #lifestyleCard .lifestyleCategoryContainer .lifestyleContainer { display: flex; flex-wrap: wrap; gap: 8px; } #myProfilePage #lifestyleCard .lifestyleCategoryContainer#highlights { margin-bottom: 48px; } #myProfilePage #mySongCard .spotifyLogo { margin: 0 auto; } #myProfilePage #mySongSelectionModal .modalBoxArticle { height: 100%; padding: 20px 12px 12px 12px; } #myProfilePage #profilecompletenessCard { padding-bottom: 24px; min-height: 198px; } #myProfilePage #profilecompletenessCard #completenessBox { display: flex; align-items: center; } #myProfilePage #profilecompletenessCard #completenessBox #completenessVisual { text-align: center; margin-left: -4px; margin-right: 12px; } @media only screen and (min-width: 481px) { #myProfilePage #profilecompletenessCard #completenessBox #completenessVisual { margin-right: 20px; } } @media only screen and (min-width: 768px) { #myProfilePage #profilecompletenessCard #completenessBox #completenessVisual { margin-right: 12px; } } #myProfilePage #profilecompletenessCard #completenessBox #completenessVisual #completenessIcon { display: block; color: var(--COLOR_primary_100); } #myProfilePage #profilecompletenessCard #completenessBox #completenessVisual #completenessIcon.inProgress { color: inherit; } #myProfilePage #profilecompletenessCard #completenessBox #completenessVisual #completenessIcon.complete { color: var(--COLOR_alertSuccess_100); } #myProfilePage #profilecompletenessCard #completenessBox #completenessVisual #completenessIcon::before { width: 60px; height: 60px; } #myProfilePage #profilecompletenessCard #completenessBox #completenessVisual #percentLabel { display: block; font: var(--FONT_highlight_75); } #myProfilePage #profilecompletenessCard #completenessBox #completenessVisual #percentLabel.is-animated { animation: like 0.7s ease-in-out forwards; } #myProfilePage #profilecompletenessCard #completenessBox .completenessDesc { margin-bottom: 0; color: var(--COLOR_supportDark_300); width: calc(100% - 72px); } #myProfilePage .profileBigIconCard ul { height: auto; max-height: initial; } #myProfilePage .profileBigIconCard ul li { position: relative; display: grid; grid-template-columns: 48px auto 24px; grid-template-rows: auto auto; margin: 0 0 16px -8px; cursor: pointer; column-gap: 16px; align-items: start; } #myProfilePage .profileBigIconCard ul li:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; outline-offset: -2px; } @media (hover: hover) { #myProfilePage .profileBigIconCard ul li:hover .icon_arrow_right_regular { fill: var(--COLOR_supportDark_100); } } #myProfilePage .profileBigIconCard ul li h4 { width: 100%; margin: 0 0 4px 0; font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); text-transform: uppercase; grid-column: 2/2; grid-row: 1/2; align-self: end; } #myProfilePage .profileBigIconCard ul li .wdk-icon.itemIcon { display: inline-block; width: 48px; height: 48px; grid-column: 1/2; grid-row: 1/3; align-self: center; } #myProfilePage .profileBigIconCard ul li .itemValue { display: block; overflow: hidden; text-overflow: ellipsis; width: 100%; font: var(--FONT_default_100); color: var(--COLOR_supportDark_100); grid-column: 2/3; grid-row: 2/2; } #myProfilePage .profileBigIconCard ul li .bodyTextApprovalWrapper { grid-column: 2/2; overflow: hidden; } #myProfilePage .profileBigIconCard ul li .icon_arrow_right_regular { fill: var(--COLOR_supportDark_400); grid-column: 3/3; align-self: center; position: absolute; } #myProfilePage .profileBigIconCard ul li wdk-approval-tag { grid-column: 2/2; grid-row: 2/2; align-self: end; } #myProfilePage peg-my-highlight-selection-modal header { padding-top: 18px; } #myProfilePage peg-my-highlight-selection-modal header .headerContainer { display: block; } #myProfilePage peg-my-highlight-selection-modal header .headerContainer h3 { padding-top: 0; padding-bottom: 0; } #myProfilePage peg-my-highlight-selection-modal article { padding-top: 0; } #myProfilePage peg-my-highlight-selection-modal article wdk-hintbox { margin-top: 8px; } #myProfilePage peg-my-highlight-selection-modal article peg-my-highlight-selection { display: flex; flex-wrap: wrap; gap: 12px; opacity: 1; } #myProfilePage peg-my-highlight-selection-modal article peg-my-highlight-selection .counter { position: sticky; top: 0; z-index: 100; display: block; width: 100%; margin-bottom: 0; padding: 12px 0; font: var(--FONT_default_100); background-color: var(--COLOR_supportLight_100); } #myProfilePage peg-my-highlight-selection-modal article peg-my-highlight-selection .lifestyleList { display: flex; gap: 8px; flex-wrap: inherit; width: 100%; } #myProfilePage peg-my-highlight-selection-modal article peg-my-highlight-selection .smallHint { display: flex; font: var(--FONT_default_50); color: var(--COLOR_supportDark_400); margin-top: 28px; } #myProfilePage peg-my-highlight-selection-modal article peg-my-highlight-selection .smallHint svg { width: 12px; height: 12px; fill: var(--COLOR_supportDark_400); margin-right: 6px; } #myProfilePage peg-my-highlight-selection-modal article .lifestyleNoEntries { color: var(--COLOR_supportDark_400); font: var(--FONT_075_default); margin: 0 auto; padding: 24px; text-align: center; } #myProfilePage peg-my-highlight-selection-modal article .lifestyleNoEntries svg { width: 14px; height: 14px; fill: var(--COLOR_supportDark_400); } #myProfilePage peg-my-highlight-selection-modal article .lifestyleNoEntries span { display: block; } #myProfilePage peg-my-highlight-list { overflow: initial; } #myProfilePage peg-my-highlight-list .contentWrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; width: 100%; padding: 0 24px 8px 24px; } @media only screen and (min-width: 768px) { #myProfilePage peg-my-highlight-list .contentWrapper { width: initial; padding: 0 20px 8px 20px; } } @media (pointer: fine) { #myProfilePage peg-my-highlight-list .contentWrapper peg-highlight-item:hover { cursor: pointer; } } #myProfilePage peg-my-highlight-editor-modal article { padding-top: 12px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper { display: flex; justify-content: center; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery { width: 100%; padding-bottom: 16px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery::part(btnNextLink), #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery::part(btnPrevLink) { top: 25%; } @media (pointer: coarse) { #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery::part(btnNextLink), #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery::part(btnPrevLink) { display: none; } } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery::part(btnNextLink) { right: 12px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery::part(btnPrevLink) { left: 12px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery::part(pagerItemActive) { border: none; width: 7px; height: 7px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery::part(pagerItem) { background-color: var(--COLOR_supportDark_500); border: none; width: 7px; height: 7px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery::part(galleryPager) { height: 20px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery wdk-gallery-item { padding-top: 16px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery wdk-gallery-item::part(liElement) { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery wdk-gallery-item .wdk-form-text { width: calc(100% - 24px); margin-top: 32px; padding-bottom: 0; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery wdk-gallery-item .wdk-form-text label { margin: 0; padding: 0; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery wdk-gallery-item .wdk-form-text textarea { min-height: 100px; padding-right: 10px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery wdk-gallery-item .wdk-form-text .charCounter { bottom: -34px; padding-right: 0; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery wdk-gallery-item .wdk-form-text .approvalTagWrapper { margin-top: 8px; height: 16px; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery wdk-gallery-item .wdk-form-text .approvalTagWrapper wdk-approval-tag { margin-top: 0; } #myProfilePage peg-my-highlight-editor-modal article .contentWrapper wdk-gallery wdk-gallery-item.emptyGalleryItem .dummyTextArea { height: 172px; } #myProfilePage peg-my-highlight-editor-modal article #confirmRejectedTextRemovalModalbox article { display: block; } #myProfilePage peg-my-highlight-editor-modal wdk-gallery-item wdk-approval-tag wdk-popover { left: 12px !important; } #myProfilePage peg-lifestyle-tag-add { display: none; padding: 9px 12px; align-items: center; width: auto; height: 46px; border-radius: var(--borderRadius_200); border: 1px dashed var(--COLOR_supportDark_050); gap: 5px; font: var(--FONT_default_75); } #myProfilePage peg-lifestyle-tag-add[show] { display: flex; } #myProfilePage peg-lifestyle-tag-add i.categoryIcon { height: 28px; } #myProfilePage peg-lifestyle-tag-add i.categoryIcon::before { width: 28px; height: 28px; } #myProfilePage peg-lifestyle-tag-add i.plusIcon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); box-shadow: var(--boxShadow_small); margin: 0 0 0 5px; } #myProfilePage peg-lifestyle-tag-add i.plusIcon::before { width: 16px; height: 16px; } #myProfilePage peg-lifestyle-tag-add[category-name="INTERESTS"] i.categoryIcon { color: var(--COLOR_decoration_200); } #myProfilePage peg-lifestyle-tag-add[category-name="INTERESTS"] i.plusIcon { background-color: var(--COLOR_decoration_200); } #myProfilePage peg-lifestyle-tag-add[category-name="INTERESTS"] span { color: var(--COLOR_decoration_200); } #myProfilePage peg-lifestyle-tag-add[category-name="INTERESTS"]:hover { background-color: var(--COLOR_decoration_200_light); } #myProfilePage peg-lifestyle-tag-add[category-name="INTERESTS"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_200), transparent 84% ); } #myProfilePage peg-lifestyle-tag-add[category-name="SPORTS"] i.categoryIcon { color: var(--COLOR_decoration_300); } #myProfilePage peg-lifestyle-tag-add[category-name="SPORTS"] i.plusIcon { background-color: var(--COLOR_decoration_300); } #myProfilePage peg-lifestyle-tag-add[category-name="SPORTS"] span { color: var(--COLOR_decoration_300); } #myProfilePage peg-lifestyle-tag-add[category-name="SPORTS"]:hover { background-color: var(--COLOR_decoration_300_light); } #myProfilePage peg-lifestyle-tag-add[category-name="SPORTS"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_300), transparent 84% ); } #myProfilePage peg-lifestyle-tag-add[category-name="FAVORITE_CUISINE"] i.categoryIcon { color: var(--COLOR_primary_100); } #myProfilePage peg-lifestyle-tag-add[category-name="FAVORITE_CUISINE"] i.plusIcon { background-color: var(--COLOR_primary_100); } #myProfilePage peg-lifestyle-tag-add[category-name="FAVORITE_CUISINE"] span { color: var(--COLOR_primary_100); } #myProfilePage peg-lifestyle-tag-add[category-name="FAVORITE_CUISINE"]:hover { background-color: var(--COLOR_primary_100_light); } #myProfilePage peg-lifestyle-tag-add[category-name="FAVORITE_CUISINE"]:active { background-color: color-mix( in srgb, var(--COLOR_primary_100), transparent 84% ); } #myProfilePage peg-lifestyle-tag-add[category-name="HOLIDAY"] i.categoryIcon { color: var(--COLOR_decoration_100); } #myProfilePage peg-lifestyle-tag-add[category-name="HOLIDAY"] i.plusIcon { background-color: var(--COLOR_decoration_100); } #myProfilePage peg-lifestyle-tag-add[category-name="HOLIDAY"] span { color: var(--COLOR_decoration_100); } #myProfilePage peg-lifestyle-tag-add[category-name="HOLIDAY"]:hover { background-color: var(--COLOR_decoration_100_light); } #myProfilePage peg-lifestyle-tag-add[category-name="HOLIDAY"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_100), transparent 84% ); } #myProfilePage peg-lifestyle-tag-add[category-name="BEST_LIVE_SKILLS"] i.categoryIcon { color: var(--COLOR_decoration_400); } #myProfilePage peg-lifestyle-tag-add[category-name="BEST_LIVE_SKILLS"] i.plusIcon { background-color: var(--COLOR_decoration_400); } #myProfilePage peg-lifestyle-tag-add[category-name="BEST_LIVE_SKILLS"] span { color: var(--COLOR_decoration_400); } #myProfilePage peg-lifestyle-tag-add[category-name="BEST_LIVE_SKILLS"]:hover { background-color: var(--COLOR_decoration_400_light); } #myProfilePage peg-lifestyle-tag-add[category-name="BEST_LIVE_SKILLS"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_400), transparent 84% ); } #myProfilePage peg-lifestyle-tag-edit { padding: 9px 12px; display: flex; align-items: center; width: auto; height: 46px; border-radius: var(--borderRadius_200); border: 2px solid var(--COLOR_supportDark_040); gap: 5px; font: var(--FONT_default_75); } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit:hover { border-color: var(--COLOR_supportDark_500); cursor: pointer; } #myProfilePage peg-lifestyle-tag-edit:active { background-color: var(--COLOR_supportDark_600); border-color: rgba(0, 0, 0, 0); } } #myProfilePage peg-lifestyle-tag-edit.t-highlight .wdk-form-toggles input[checked] + label::after { content: attr(highlight-position); -webkit-mask-image: none; mask-image: none; left: auto; right: -17px; top: -23px; width: 21px; height: 20px; color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_75); line-height: 15px; background: rgba(0, 0, 0, 0); display: flex; justify-content: center; align-items: center; } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit.t-highlight.t-disabled:hover { border-color: var(--COLOR_supportDark_040); cursor: default; } #myProfilePage peg-lifestyle-tag-edit.t-highlight.t-disabled label:hover { cursor: default; } #myProfilePage peg-lifestyle-tag-edit.t-highlight.t-disabled:active { background-color: rgba(0, 0, 0, 0); border-color: var(--COLOR_supportDark_040); } } #myProfilePage peg-lifestyle-tag-edit.is-selected .wdk-form-toggles input[type="checkbox"]:checked + label::before { border-radius: var(--borderRadius_circle); opacity: 1; top: -23px; right: -17px; left: auto; width: 21px; height: 21px; } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="INTERESTS"] { border-color: var(--COLOR_decoration_200); } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="INTERESTS"]:hover { background-color: var(--COLOR_decoration_200_light); border-color: var(--COLOR_decoration_200); } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="INTERESTS"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_200), transparent 84% ); } } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="INTERESTS"] .wdk-form-toggles input[type="checkbox"] + label::before { background-color: var(--COLOR_decoration_200); } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="SPORTS"] { border-color: var(--COLOR_decoration_300); } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="SPORTS"]:hover { background-color: var(--COLOR_decoration_300_light); border-color: var(--COLOR_decoration_300); } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="SPORTS"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_300), transparent 84% ); } } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="SPORTS"] .wdk-form-toggles input[type="checkbox"] + label::before { background-color: var(--COLOR_decoration_300); } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="FAVORITE_CUISINE"] { border-color: var(--COLOR_primary_100); } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="FAVORITE_CUISINE"]:hover { background-color: var(--COLOR_primary_100_light); border-color: var(--COLOR_primary_100); } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="FAVORITE_CUISINE"]:active { background-color: color-mix( in srgb, var(--COLOR_primary_100), transparent 84% ); } } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="FAVORITE_CUISINE"] .wdk-form-toggles input[type="checkbox"] + label::before { background-color: var(--COLOR_primary_100); } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="HOLIDAY"] { border-color: var(--COLOR_decoration_100); } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="HOLIDAY"]:hover { background-color: var(--COLOR_decoration_100_light); border-color: var(--COLOR_decoration_100); } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="HOLIDAY"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_100), transparent 84% ); } } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="HOLIDAY"] .wdk-form-toggles input[type="checkbox"] + label::before { background-color: var(--COLOR_decoration_100); } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="BEST_LIVE_SKILLS"] { border-color: var(--COLOR_decoration_400); } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="BEST_LIVE_SKILLS"]:hover { background-color: var(--COLOR_decoration_400_light); border-color: var(--COLOR_decoration_400); } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="BEST_LIVE_SKILLS"]:active { background-color: color-mix( in srgb, var(--COLOR_decoration_400), transparent 84% ); } } #myProfilePage peg-lifestyle-tag-edit.is-selected[category-name="BEST_LIVE_SKILLS"] .wdk-form-toggles input[type="checkbox"] + label::before { background-color: var(--COLOR_decoration_400); } #myProfilePage peg-lifestyle-tag-edit:focus-visible { outline: 2px dashed currentcolor; } #myProfilePage peg-lifestyle-tag-edit i.bgIcon { display: block; height: 28px; color: var(--COLOR_supportDark_400); } #myProfilePage peg-lifestyle-tag-edit i.bgIcon::before { width: 28px; height: 28px; } #myProfilePage peg-lifestyle-tag-edit .wdk-form-toggles input[type="checkbox"] + label { min-height: initial; margin: 0; padding: 0; } #myProfilePage peg-lifestyle-tag-edit .wdk-form-toggles input[type="checkbox"] + label::before { opacity: 0; border: none; } #myProfilePage peg-lifestyle-tag-edit .wdk-form-toggles input[type="checkbox"] + label::after { opacity: 0; } #myProfilePage peg-lifestyle-tag-edit .wdk-form-toggles input[checked] + label::before { border-radius: var(--borderRadius_circle); opacity: 1; top: -23px; right: -17px; left: auto; width: 21px; height: 21px; } #myProfilePage peg-lifestyle-tag-edit .wdk-form-toggles input[checked] + label::after { -webkit-mask-image: url("../../img/icons/single_color/icon_check_light.svg"); mask-image: url("../../img/icons/single_color/icon_check_light.svg"); opacity: 1; top: -18px; right: -22px; left: auto; width: 21px; height: 21px; transition: none; } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit[category-name="INTERESTS"]:hover { border-color: color-mix( in srgb, var(--COLOR_decoration_200), transparent 50% ); } #myProfilePage peg-lifestyle-tag-edit[category-name="INTERESTS"]:active { background-color: var(--COLOR_decoration_200_light); border-color: rgba(0, 0, 0, 0); } } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit[category-name="SPORTS"]:hover { border-color: color-mix( in srgb, var(--COLOR_decoration_300), transparent 50% ); } #myProfilePage peg-lifestyle-tag-edit[category-name="SPORTS"]:active { background-color: var(--COLOR_decoration_300_light); border-color: rgba(0, 0, 0, 0); } } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit[category-name="FAVORITE_CUISINE"]:hover { border-color: color-mix(in srgb, var(--COLOR_primary_100), transparent 50%); } #myProfilePage peg-lifestyle-tag-edit[category-name="FAVORITE_CUISINE"]:active { background-color: var(--COLOR_primary_100_light); border-color: rgba(0, 0, 0, 0); } } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit[category-name="HOLIDAY"]:hover { border-color: color-mix( in srgb, var(--COLOR_decoration_100), transparent 50% ); } #myProfilePage peg-lifestyle-tag-edit[category-name="HOLIDAY"]:active { background-color: var(--COLOR_decoration_100_light); border-color: rgba(0, 0, 0, 0); } } @media (pointer: fine) { #myProfilePage peg-lifestyle-tag-edit[category-name="BEST_LIVE_SKILLS"]:hover { border-color: color-mix( in srgb, var(--COLOR_decoration_400), transparent 50% ); } #myProfilePage peg-lifestyle-tag-edit[category-name="BEST_LIVE_SKILLS"]:active { background-color: var(--COLOR_decoration_400_light); border-color: rgba(0, 0, 0, 0); } } #myProfilePage #testresultTabContent a.bg-icon_i_circle_filled, #myProfilePage #matchingTabContent a.bg-icon_i_circle_filled { display: inline-block; padding: 4px 16px 4px 0; text-decoration: none; color: inherit; } #myProfilePage #testresultTabContent a.bg-icon_i_circle_filled:hover::before, #myProfilePage #matchingTabContent a.bg-icon_i_circle_filled:hover::before { color: var(--COLOR_supportDark_400); } #myProfilePage #testresultTabContent a.bg-icon_i_circle_filled::before, #myProfilePage #matchingTabContent a.bg-icon_i_circle_filled::before { width: 16px; height: 16px; color: var(--COLOR_supportDark_400); position: relative; top: 4px; margin-right: 4px; } #myProfilePage #introCard { padding-bottom: 8px; } #myProfilePage #matchingWheel { position: relative; padding-left: 8px; padding-right: 8px; } @media only screen and (min-width: 768px) { #myProfilePage #matchingWheel { padding-left: 16px; padding-right: 16px; } } #myProfilePage #matchingWheel::before { position: absolute; content: ""; display: block; top: 0; left: 0; width: 100%; height: 100%; } #myProfilePage #matchingWheel .matchingWheelInner { position: relative; display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; margin: 37px auto 20px; text-align: center; background: url("../../img/partner_profile/bg_matching_wheel.svg") no-repeat; background-size: 300px 300px; } @media only screen and (min-width: 768px) { #myProfilePage #matchingWheel .matchingWheelInner { width: 480px; height: 480px; margin: 30px auto 36px; background-size: 480px 480px; } } #myProfilePage #matchingWheel .matchingWheelInner .outerCirclePie { fill: none; stroke-dasharray: 100; stroke-linecap: round; transform-box: fill-box; transform-origin: center; stroke-width: 0.5%; } #myProfilePage #matchingWheel .matchingWheelInner .outerCirclePie.personalityStructure { stroke: #32825a; } #myProfilePage #matchingWheel .matchingWheelInner .outerCirclePie.ambitionsAndTendencies { stroke: #77390b; } #myProfilePage #matchingWheel .matchingWheelInner .outerCirclePie.everydayBehaviour { stroke: #a91e1e; } #myProfilePage #matchingWheel .matchingWheelInner .outerCirclePie.communicationStyle { stroke: #006e96; } #myProfilePage #matchingWheel .matchingWheelInner .planet { display: none; } @media only screen and (min-width: 768px) { #myProfilePage #matchingWheel .matchingWheelInner .planet { display: block; } } #myProfilePage #matchingWheel .matchingWheelInner .planet.personalityStructure { fill: #32825a; } #myProfilePage #matchingWheel .matchingWheelInner .planet.ambitionsAndTendencies { fill: #77390b; } #myProfilePage #matchingWheel .matchingWheelInner .planet.everydayBehaviour { fill: #a91e1e; } #myProfilePage #matchingWheel .matchingWheelInner .planet.communicationStyle { fill: #006e96; } #myProfilePage #matchingWheel canvas { position: relative; z-index: 3; } #myProfilePage #matchingWheel #innerCircle { position: absolute; display: flex; flex-direction: column; z-index: 5; top: 50%; left: 50%; width: 124px; height: 124px; margin: -62px 0 0 -62px; text-align: center; border-radius: var(--borderRadius_circle); } #myProfilePage #myProfilePage #matchingWheel #innerCircle { padding: 9px; background-color: var(--COLOR_supportDark_040); } @media only screen and (min-width: 768px) { #myProfilePage #myProfilePage #matchingWheel #innerCircle { padding: 14px; } } #partnerProfilePage #myProfilePage #matchingWheel #innerCircle { background-color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #myProfilePage #matchingWheel #innerCircle { margin: -78px 0 0 -78px; width: 156px; height: 156px; } } #myProfilePage #matchingWheel #innerCircle .matchingHeart { width: 28px; height: 28px; margin: 8px auto 10px; } @media only screen and (min-width: 768px) { #myProfilePage #matchingWheel #innerCircle .matchingHeart { width: 52px; height: 52px; margin: 12px auto 16px; } } #myProfilePage #matchingWheel #innerCircle .matchingPoints { margin-bottom: 0; font: var(--FONT_highlight_300); line-height: 18px; } @media only screen and (min-width: 768px) { #myProfilePage #matchingWheel #innerCircle .matchingPoints { font: var(--FONT_highlight_400); line-height: 18px; } } #myProfilePage #matchingWheel #innerCircle .matchingPointsText { margin-top: 4px; font: var(--FONT_default_50); } @media only screen and (min-width: 768px) { #myProfilePage #matchingWheel #innerCircle .matchingPointsText { margin-top: 17px; } } #myProfilePage #matchingWheel #innerCircle .profilePhoto { border-radius: var(--borderRadius_circle); width: 100%; height: auto; } #myProfilePage #matchingWheel .circleLabel { display: none; position: absolute; z-index: 1; } @media only screen and (min-width: 768px) { #myProfilePage #matchingWheel .circleLabel { display: flex; align-items: flex-end; } } #myProfilePage #matchingWheel .circleLabel .labelText { display: block; font: var(--FONT_default_50); position: relative; text-decoration: none; width: 160px; } #myProfilePage #matchingWheel .circleLabel .labelText strong { display: block; font: var(--FONT_highlight_75); text-transform: uppercase; } #myProfilePage #matchingWheel .circleLabel.personalityStructure .labelText { color: #32825a; } #myProfilePage #matchingWheel .circleLabel.everydayBehaviour .labelText { color: #a91e1e; } #myProfilePage #matchingWheel .circleLabel.ambitionsAndTendencies .labelText { color: #77390b; } #myProfilePage #matchingWheel .circleLabel.communicationStyle .labelText { color: #006e96; } #myProfilePage #matchingWheel #chartjsTooltip { position: absolute; top: 50%; left: 50%; display: flex; justify-content: center; align-items: center; font: var(--FONT_default_75); background-color: var(--COLOR_supportLight_100); z-index: 6; pointer-events: none; border-radius: var(--borderRadius_circle); overflow: visible; color: var(--COLOR_supportLight_100); opacity: 0; transition: opacity 0.3s, background-color 0.2s; padding: 10px; margin: -78px 0 0 -78px; width: 156px; height: 156px; } @media only screen and (min-width: 768px) { #myProfilePage #matchingWheel #chartjsTooltip.is-visible { opacity: 1; } } @media (pointer: coarse) { #myProfilePage #matchingWheel #chartjsTooltip { visibility: hidden; overflow: hidden; width: 0; height: 0; } } #myProfilePage #detailCard .subTabDesc { border-bottom: 1px solid var(--COLOR_supportDark_070); padding-bottom: 16px; margin-bottom: 32px; min-height: 68px; } #myProfilePage #detailCard .subTabDesc h3 { margin-top: 32px; font: var(--FONT_default_200); color: var(--COLOR_primary_100); } #myProfilePage #detailCard .subTabDesc p { margin: 16px 0; color: var(--COLOR_supportDark_300); } #myProfilePage #detailCard #matchingSubTabs { display: table; width: 100%; border-bottom: 1px solid var(--COLOR_supportDark_070); } #myProfilePage #detailCard #matchingSubTabs li { display: table-cell; position: relative; width: 25%; border-bottom: 3px solid rgba(0, 0, 0, 0); transition: border-color 0.3s ease; text-align: center; } #myProfilePage #detailCard #matchingSubTabs li::after { content: ""; position: absolute; right: 0; top: 30%; height: 44%; border-right: 1px solid var(--COLOR_supportDark_070); } #myProfilePage #detailCard #matchingSubTabs li:last-child::after { display: none; } #myProfilePage #detailCard #matchingSubTabs li#personalityStructure { color: var(--COLOR_primary_100); } #myProfilePage #detailCard #matchingSubTabs li#personalityStructure:hover, #myProfilePage #detailCard #matchingSubTabs li#personalityStructure.active { border-color: var(--COLOR_primary_100); } #myProfilePage #detailCard #matchingSubTabs li#personalityStructure .wdk-icon { fill: var(--COLOR_primary_100); } #myProfilePage #detailCard #matchingSubTabs li#ambitionsAndTendencies { color: var(--COLOR_decoration_400); } #myProfilePage #detailCard #matchingSubTabs li#ambitionsAndTendencies:hover, #myProfilePage #detailCard #matchingSubTabs li#ambitionsAndTendencies.active { border-color: var(--COLOR_decoration_400); } #myProfilePage #detailCard #matchingSubTabs li#ambitionsAndTendencies .wdk-icon { fill: var(--COLOR_decoration_400); } #myProfilePage #detailCard #matchingSubTabs li#everydayBehaviour { color: var(--COLOR_decoration_300); } #myProfilePage #detailCard #matchingSubTabs li#everydayBehaviour:hover, #myProfilePage #detailCard #matchingSubTabs li#everydayBehaviour.active { border-color: var(--COLOR_decoration_300); } #myProfilePage #detailCard #matchingSubTabs li#everydayBehaviour .wdk-icon { fill: var(--COLOR_decoration_300); } #myProfilePage #detailCard #matchingSubTabs li#communicationStyle { color: var(--COLOR_decoration_200); } #myProfilePage #detailCard #matchingSubTabs li#communicationStyle:hover, #myProfilePage #detailCard #matchingSubTabs li#communicationStyle.active { border-color: var(--COLOR_decoration_200); } #myProfilePage #detailCard #matchingSubTabs li#communicationStyle .wdk-icon { fill: var(--COLOR_decoration_200); } #myProfilePage #detailCard #matchingSubTabs li a { display: flex; align-items: center; flex-direction: column; padding: 12px 10px 6px; text-decoration: none; color: inherit; } @media only screen and (min-width: 980px) { #myProfilePage #detailCard #matchingSubTabs li a { padding: 14px 10px; flex-direction: row; justify-content: center; } } #myProfilePage #detailCard #matchingSubTabs li a:focus-visible { outline-offset: -2px; } #myProfilePage #detailCard #matchingSubTabs li a .wdk-icon { margin-right: 8px; width: 32px; height: 32px; } #myProfilePage #detailCard #matchingSubTabs li a span { display: none; color: var(--COLOR_defaultText); font: var(--FONT_default_75); } @media only screen and (min-width: 768px) { #myProfilePage #detailCard #matchingSubTabs li a span { display: block; margin: 6px 0; } } @media only screen and (min-width: 980px) { #myProfilePage #detailCard #matchingSubTabs li a span { margin: 0; } } #myProfilePage #detailCard #subTabContents { padding: 0; } #myProfilePage #detailCard #subTabContents > div { display: none; } #myProfilePage #detailCard #subTabContents > div.active { display: block; } #myProfilePage #detailCard #subTabContents .subTabDesc { border: 0; margin-bottom: 32px; padding-bottom: 0; background-size: 64px 64px; background-position: 48px 0; background-repeat: no-repeat; } @media only screen and (min-width: 481px) { #myProfilePage #detailCard #subTabContents .subTabDesc { padding-left: 160px; } } #myProfilePage #detailCard #subTabContents .subTabDesc p { margin-bottom: 0; } #myProfilePage #detailCard #subTabContents .group { position: relative; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--COLOR_supportDark_050); } @media only screen and (min-width: 768px) { #myProfilePage #detailCard #subTabContents .group { padding-top: 36px; margin-top: 36px; font-size: 0; } } #myProfilePage #detailCard #subTabContents .group > a { position: absolute; top: 8px; right: 16px; padding: 0; z-index: 1; } #myProfilePage #detailCard #subTabContents .group > a::before { width: 24px; height: 24px; } #myProfilePage #detailCard #subTabContents .group > a::after { content: ""; position: absolute; inset: -12px -12px -12px -12px; } #myProfilePage #detailCard #subTabContents .intro { position: relative; text-align: center; font: var(--FONT_default_75); } @media only screen and (min-width: 481px) { #myProfilePage #detailCard #subTabContents .intro { display: table; width: 100%; table-layout: fixed; text-align: left; margin-top: 16px; margin-left: 16px; margin-bottom: 36px; padding-right: 40px; } } @media only screen and (min-width: 768px) { #myProfilePage #detailCard #subTabContents .intro { display: inline-block; width: 50%; margin: 0; padding-right: 48px; padding-left: 24px; padding-bottom: 24px; text-align: center; vertical-align: middle; } } #myProfilePage #detailCard #subTabContents .intro .imgWrapper { margin-bottom: 8px; } @media only screen and (min-width: 481px) { #myProfilePage #detailCard #subTabContents .intro .imgWrapper { display: table-cell; width: 120px; } } @media only screen and (min-width: 768px) { #myProfilePage #detailCard #subTabContents .intro .imgWrapper { display: inline-block; margin-right: 0; margin-bottom: 12px; } } #myProfilePage #detailCard #subTabContents .intro .imgWrapper > img { width: 80px; } #myProfilePage #detailCard #subTabContents .intro p { margin-bottom: 24px; } @media only screen and (min-width: 481px) { #myProfilePage #detailCard #subTabContents .intro p { display: table-cell; vertical-align: middle; } } @media only screen and (min-width: 768px) { #myProfilePage #detailCard #subTabContents .intro p { display: block; margin-bottom: 0; } } #myProfilePage #detailCard #subTabContents .scale { position: relative; width: 100%; font: var(--FONT_default_75); } @media only screen and (min-width: 768px) { #myProfilePage #detailCard #subTabContents .scale { display: inline-block; width: 50%; vertical-align: middle; } } #myProfilePage #detailCard #subTabContents .scale::before { position: absolute; left: 37.5%; width: 25%; content: ""; display: block; margin: 0 auto; height: calc(100% - 25px); z-index: 0; background-color: var(--COLOR_supportDark_040); } #myProfilePage #detailCard #subTabContents .scale .nextDimension { position: relative; } #myProfilePage #detailCard #subTabContents .scale .nextDimension h4 { margin-bottom: 0; } #myProfilePage #detailCard #subTabContents .scale .nextDimension a { text-shadow: 1px 1px 2px var(--COLOR_supportLight_100), 1px -1px 2px var(--COLOR_supportLight_100), -1px 1px 2px var(--COLOR_supportLight_100), -1px -1px 2px var(--COLOR_supportLight_100); } @media (max-width: 480px) { #myProfilePage #detailCard #subTabContents .scale .nextDimension .hideTextInS span { display: none; } } #myProfilePage #detailCard #subTabContents .scale .myBar, #myProfilePage #detailCard #subTabContents .scale .partnerBar { height: 24px; padding: 1px 6px; border: 2px solid rgba(0, 0, 0, 0); border-radius: var(--borderRadius_rounded); text-align: right; } #myProfilePage #detailCard #subTabContents .scale .myBar span, #myProfilePage #detailCard #subTabContents .scale .partnerBar span { float: left; } #myProfilePage #detailCard #subTabContents .scale .myBar { display: block; margin-bottom: 8px; color: var(--COLOR_supportLight_100); } #myProfilePage #detailCard #subTabContents .scale .partnerBar { display: block; border-color: var(--COLOR_supportDark_090); background-color: var(--COLOR_supportLight_100); } #myProfilePage #detailCard #subTabContents .scale .legend { width: 100%; margin-top: 28px; } #myProfilePage #detailCard #subTabContents .scale .legend ul { position: relative; border-top: 1px solid var(--COLOR_supportDark_080); } #myProfilePage #detailCard #subTabContents .scale .legend ul li { display: inline-block; position: absolute; top: 0; font: var(--FONT_default_75); margin-top: 5px; } #myProfilePage #detailCard #subTabContents .scale .legend ul li::before { position: absolute; content: ""; display: block; height: 10px; margin-top: -10px; border-left: 1px solid var(--COLOR_supportDark_080); } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_60 { left: 0; text-align: left; } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_60::before { left: 0; } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_90 { right: 62.5%; text-align: right; } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_90::before { right: 0; } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_avarage { position: relative; width: 25%; margin: 5px auto 0 auto; display: block; text-align: center; } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_avarage::before { display: none; } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_110 { left: 62.5%; text-align: left; } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_110::before { left: 0; } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_140 { right: 0; text-align: right; } #myProfilePage #detailCard #subTabContents .scale .legend ul li.val_140::before { right: 0; } #myProfilePage #detailCard #subTabContents .testresultScoringInfo { position: relative; margin: 24px 16px; padding: 8px 16px; border-radius: var(--borderRadius_75); box-shadow: 0 0.75px 3px 0 var(--COLOR_supportDark_080); } @media only screen and (min-width: 768px) { #myProfilePage #detailCard #subTabContents .testresultScoringInfo { margin: 24px; } } #myProfilePage #detailCard #subTabContents .testresultScoringInfo h3 { position: relative; padding-left: 0; padding-right: 16px; margin: 0; font: var(--FONT_highlight_75); text-transform: uppercase; } #myProfilePage #detailCard #subTabContents .testresultScoringInfo h3 a { display: block; text-decoration: none; } #myProfilePage #detailCard #subTabContents .testresultScoringInfo h3 a::after { position: absolute; top: calc(50% - 8px); right: 0; content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); vertical-align: -3px; width: 16px; height: 16px; color: var(--COLOR_defaultText); z-index: 1; transition: transform 0.2s; } #myProfilePage #detailCard #subTabContents .testresultScoringInfo.is-opening a::after { transform: rotate(90deg); } #myProfilePage #detailCard #subTabContents .testresultScoringInfo.is-openDone .infoText strong { margin-left: -20px; opacity: 1; background-color: var(--COLOR_alertInfo_200); } #myProfilePage #detailCard #subTabContents .testresultScoringInfo.is-openDone .infoText strong::before { transition: opacity 0.4s; opacity: 1; } #myProfilePage #detailCard #subTabContents .testresultScoringInfo .infoText { display: none; } #myProfilePage #detailCard #subTabContents .testresultScoringInfo .infoText p { display: block; margin: 0; margin-top: 20px; } #myProfilePage #detailCard #subTabContents .testresultScoringInfo .infoText strong { display: block; opacity: 0; padding: 16px; padding-left: 20px; margin: 12px 0 20px 0; color: var(--COLOR_defaultText); font: var(--FONT_default_75); font-style: italic; border-top-right-radius: var(--borderRadius_75); border-bottom-right-radius: var(--borderRadius_75); transition: margin 0.3s, opacity 0.4s; } #myProfilePage #detailCard #subTabContents .testresultScoringInfo .infoText strong::before { position: absolute; opacity: 0; content: ""; bottom: 24px; left: -3px; width: 0; height: 0; border-top: 3px solid rgba(0, 0, 0, 0); border-bottom: 3px solid rgba(0, 0, 0, 0); border-left: 3px solid var(--COLOR_supportDark_080); transform: rotate(-45deg); } #myProfilePage #detailCard #subTabContents .buttonWrapper { margin-top: 32px; } #myProfilePage #detailCard #subTabContents .buttonWrapper .wdk-button { width: 100%; } #myProfilePage #detailCard #subTabContents #personalityStructureContent { padding-bottom: 24px; } #myProfilePage #detailCard #subTabContents #personalityStructureContent .scale .myBar { background: var(--COLOR_primary_100); } @media only screen and (min-width: 481px) { #myProfilePage #detailCard #subTabContents #personalityStructureContent .subTabDesc { background-image: url("../../img/matching/matching_minichart_character.svg"); } } #myProfilePage #detailCard #subTabContents #personalityStructureContent .testresultScoringInfo h3 a { color: var(--COLOR_primary_100); } #myProfilePage #detailCard #subTabContents #ambitionsAndTendenciesContent { padding-bottom: 24px; } #myProfilePage #detailCard #subTabContents #ambitionsAndTendenciesContent .scale .myBar { background: var(--COLOR_decoration_400); } @media only screen and (min-width: 481px) { #myProfilePage #detailCard #subTabContents #ambitionsAndTendenciesContent .subTabDesc { background-image: url("../../img/matching/matching_minichart_drive.svg"); } } #myProfilePage #detailCard #subTabContents #ambitionsAndTendenciesContent .testresultScoringInfo h3 a { color: var(--COLOR_decoration_400); } #myProfilePage #detailCard #subTabContents #everydayBehaviourContent { padding-bottom: 24px; } #myProfilePage #detailCard #subTabContents #everydayBehaviourContent .scale .myBar { background: var(--COLOR_decoration_300); } @media only screen and (min-width: 481px) { #myProfilePage #detailCard #subTabContents #everydayBehaviourContent .subTabDesc { background-image: url("../../img/matching/matching_minichart_dailyRoutine.svg"); } } #myProfilePage #detailCard #subTabContents #everydayBehaviourContent .testresultScoringInfo h3 a { color: var(--COLOR_decoration_300); } #myProfilePage #detailCard #subTabContents #communicationStyleContent { padding-bottom: 24px; } #myProfilePage #detailCard #subTabContents #communicationStyleContent .scale .myBar { background: var(--COLOR_decoration_200); } @media only screen and (min-width: 481px) { #myProfilePage #detailCard #subTabContents #communicationStyleContent .subTabDesc { background-image: url("../../img/matching/matching_minichart_communication.svg"); } } #myProfilePage #detailCard #subTabContents #communicationStyleContent .testresultScoringInfo h3 a { color: var(--COLOR_decoration_200); } #myProfilePage peg-my-photo-tab { display: grid; border-radius: 0; background-color: var(--COLOR_supportLight_100); width: min(100%, 1024px); margin: 0 auto; border: 0; padding: 24px; box-shadow: var(--boxShadow_small); gap: 32px; } @media only screen and (min-width: 768px) { #myProfilePage peg-my-photo-tab { border-radius: var(--borderRadius_100); } } @media only screen and (min-width: 980px) { #myProfilePage peg-my-photo-tab { padding: 32px; } } #myProfilePage peg-my-photo-tab > * { display: grid; gap: 24px; } @media only screen and (min-width: 768px) { #myProfilePage peg-my-photo-tab > * { padding: 20px; border-radius: var(--borderRadius_100); border: solid 10px var(--COLOR_supportDark_600); } } #myProfilePage peg-my-photo-tab > * > h2 { color: var(--COLOR_supportDark_300); font: var(--FONT_default_75); text-transform: uppercase; } #myProfilePage peg-my-photo-tab .upload > ul { display: grid; gap: 0.5rem; } #myProfilePage peg-my-photo-tab .upload > ul li { position: relative; display: flex; align-items: center; gap: 0.5rem; } #myProfilePage peg-my-photo-tab .upload > ul li span { width: 100%; } #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout { display: grid; justify-content: center; grid-gap: 20px; } @media only screen and (pointer: fine) and (min-width: 481px) { #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout { grid-template-columns: min-content 1fr; grid-auto-flow: column; } } #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout peg-photo-selector { grid-template-rows: 1fr max-content; } #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout peg-photo-selector:has(> .wdk-styledHintBox.t-error.is-visible) { grid-template-rows: max-content 1fr max-content; } #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout .uploadImagePlaceholder { height: 280px; aspect-ratio: 2/3; justify-self: center; object-fit: cover; border-radius: var(--borderRadius_75); } #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout .uploadButton button { width: 100%; } #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout peg-photo-uploader, #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout .wdk-styledHintBox { grid-column: 1/-1; } #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout .wdk-styledHintBox:not(.is-visible), #myProfilePage peg-my-photo-tab .upload .photoSelectorLayout wdk-dialog:not([open]) { position: absolute; } #myProfilePage peg-my-photo-tab[photo-count="some"] .motivatorContent.singlePicture { display: none; } #myProfilePage peg-my-photo-tab[photo-count="none"] peg-photo-organizer, #myProfilePage peg-my-photo-tab[photo-count="none"] .motivatorContent.multiplePictures { display: none; } #myProfilePage peg-my-photo-tab[photo-count="max"] .motivator, #myProfilePage peg-my-photo-tab[photo-count="max"] .upload { display: none; } #myProfilePage peg-my-photo-tab .motivatorContent { display: grid; gap: 1rem; } @media only screen and (min-width: 768px) { #myProfilePage peg-my-photo-tab .motivatorContent { grid-template-columns: 1fr 1fr; grid-template-rows: min-content 1fr; grid-template-areas: "headline image" "list image"; } #myProfilePage peg-my-photo-tab .motivatorContent ul { grid-area: list; } #myProfilePage peg-my-photo-tab .motivatorContent h2 { grid-area: headline; } #myProfilePage peg-my-photo-tab .motivatorContent img { grid-area: image; } } #myProfilePage peg-my-photo-tab .motivatorContent h4 { font: var(--FONT_highlight_75); margin: 0; color: var(--COLOR_alertInfo_100); } #myProfilePage peg-my-photo-tab .motivatorContent img { width: 100%; } #myProfilePage peg-my-photo-tab .motivatorContent li { line-height: 34px; margin-inline-start: 24px; text-indent: -20px; } #myProfilePage peg-my-photo-tab .motivatorContent li::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_check.svg); mask-image: url(../../img/icons/single_color/icon_check.svg); vertical-align: -3px; width: 16px; height: 16px; margin-right: 4px; background-color: var(--COLOR_alertInfo_100); } #myProfilePage peg-photo-organizer .listContainer { display: grid; gap: 24px; } #myProfilePage peg-photo-organizer .listContainer li { display: grid; grid-template-columns: 4px min-content 1fr; grid-template-rows: min-content 1fr; grid-template-areas: "infos infos controls" ". photos controls" ". buttons controls"; gap: 8px 16px; } @media only screen and (min-width: 481px) { #myProfilePage peg-photo-organizer .listContainer li { grid-template-columns: min-content 1fr min-content; grid-template-areas: "photos infos controls" "buttons infos controls"; } } #myProfilePage peg-photo-organizer .listContainer li .pictureInfos { grid-area: infos; } #myProfilePage peg-photo-organizer .listContainer li .photos { grid-area: photos; } #myProfilePage peg-photo-organizer .listContainer li .controls { grid-area: controls; justify-self: end; } #myProfilePage peg-photo-organizer .listContainer li .makeProfilePic, #myProfilePage peg-photo-organizer .listContainer li .approvalImage { grid-area: buttons; } #myProfilePage peg-photo-organizer .listContainer li:not(:last-of-type) { border-bottom: 1px solid var(--COLOR_supportDark_050); padding-bottom: 24px; } #myProfilePage peg-photo-organizer .listContainer li .photos { display: grid; grid-auto-flow: column; gap: 8px; } #myProfilePage peg-photo-organizer .listContainer li .photos img { width: 75px; display: inline-block; background-color: var(--COLOR_supportLight_100); border: 1px solid var(--COLOR_supportDark_070); } #myProfilePage peg-photo-organizer .listContainer li .controls { display: grid; grid-template-rows: min-content min-content 1fr; align-items: end; } #myProfilePage peg-photo-organizer .listContainer li .pictureInfos { display: grid; grid-template-columns: min-content 1fr; grid-auto-rows: min-content; gap: 4px; } #myProfilePage peg-photo-organizer .listContainer li .pictureInfos .orderNum { font: var(--FONT_highlight_100); text-wrap: nowrap; } #myProfilePage peg-photo-organizer .listContainer li .pictureInfos .comment, #myProfilePage peg-photo-organizer .listContainer li .pictureInfos wdk-approval-tag { grid-column: 2/3; } #myProfilePage #photoUpload { padding-bottom: 24px; margin-left: auto; margin-right: auto; } #myProfilePage #photoUpload.uploading #progressBar { display: block !important; } #myProfilePage #photoUpload.uploading #dragDropArea { display: none !important; } #myProfilePage #photoUpload #uploadInfoTop { margin: 0 0 28px; } #myProfilePage #photoUpload #uploadInfoTop li { position: relative; margin: 0 0 12px; display: flex; align-items: center; } #myProfilePage #photoUpload #uploadInfoTop li span { width: 100%; } #myProfilePage #photoUpload #wrongFiletype, #myProfilePage #photoUpload #filesizeExceeded { display: none; margin-top: 12px; } #myProfilePage #photoUpload #wrongFiletype.error, #myProfilePage #photoUpload #filesizeExceeded.error { display: block; } #myProfilePage #photoUpload .error .wdk-styledHintBox.t-error { margin-top: 0; margin-bottom: 10px; } #myProfilePage #photoUpload #uploadPictureRow { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; grid-gap: 20px; } #myProfilePage #photoUpload #uploadPictureRow .uploadImageNoDragNDrop { height: 280px; grid-row: 1 / span 2; aspect-ratio: 2/3; justify-self: center; object-fit: cover; border-radius: var(--borderRadius_75); } #myProfilePage #photoUpload #uploadPictureRow #dragDropArea { grid-column: 2; } #myProfilePage #photoUpload #uploadPictureRow #uploadButton { grid-column: 2; } @media (pointer: coarse) { #myProfilePage #photoUpload #uploadPictureRow { grid-template-columns: 1fr; grid-template-rows: auto auto; } #myProfilePage #photoUpload #uploadPictureRow .uploadImageNoDragNDrop { grid-row: 1; grid-column: 1; } #myProfilePage #photoUpload #uploadPictureRow #uploadButton { grid-row: 2; grid-column: 1; } } @media only screen and (max-width: 481px) { #myProfilePage #photoUpload #uploadPictureRow { grid-template-columns: 1fr; grid-template-rows: auto auto; } #myProfilePage #photoUpload #uploadPictureRow .uploadImageNoDragNDrop { grid-row: 1; grid-column: 1; } #myProfilePage #photoUpload #uploadPictureRow #uploadButton { grid-row: 2; grid-column: 1; } } #myProfilePage #photoUpload #uploadPictureRow #dragDropArea, #myProfilePage #photoUpload #uploadPictureRow #uploadButton { width: 100%; text-align: center; } #myProfilePage #photoUpload #uploadPictureRow #dragDropArea { display: flex; min-height: 128px; margin: 0; padding: 10px 20px; cursor: pointer; font: var(--FONT_default_100); color: var(--COLOR_supportDark_300); border: 2px dashed var(--COLOR_supportDark_070); text-align: center; border-radius: var(--borderRadius_75); align-items: center; justify-content: center; flex-direction: column; } @media only screen and (max-width: 481px) { #myProfilePage #photoUpload #uploadPictureRow #dragDropArea { display: none; } } #myProfilePage #photoUpload #uploadPictureRow #dragDropArea.dragOver { border-color: var(--COLOR_alertSuccess_100); box-shadow: 0 0 20px -6px var(--COLOR_supportDark_090) inset; } @media (pointer: coarse) { #myProfilePage #photoUpload #uploadPictureRow #dragDropArea { display: none; } } #myProfilePage #photoUpload #uploadPictureRow #dragDropArea .wdk-icon.icon_upload { display: block; width: 46px; height: 46px; } #myProfilePage #photoUpload #uploadPictureRow #uploadButton { position: relative; } #myProfilePage #photoUpload #uploadPictureRow #uploadButton #uploadPicture { float: none; cursor: pointer; } @media (pointer: coarse) { #myProfilePage #photoUpload #uploadPictureRow #uploadButton #uploadPicture { max-width: 400px; } } @media only screen and (min-width: 481px) { #myProfilePage #photoUpload #uploadPictureRow #uploadButton #uploadPicture { width: 100%; } } #myProfilePage #photoUpload #uploadPictureRow.hide { display: none; } #myProfilePage #photoUpload wdk-hintbox.hint { margin-top: 20px; } @media (max-width: 480px) { #myProfilePage #photoUpload wdk-hintbox.hint { display: none; } } #myProfilePage #uploadOrTakePicture { display: none; } #myProfilePage #photoOrganizer { padding-bottom: 60px; } #myProfilePage #photoOrganizer #listContainer { margin-left: 0; } #myProfilePage #photoOrganizer #listContainer li { position: relative; padding-top: 16px; margin-top: 16px; margin-bottom: 16px; border-top: 1px solid var(--COLOR_supportDark_050); display: flex; flex-direction: column; gap: 12px; } @media only screen and (min-width: 481px) { #myProfilePage #photoOrganizer #listContainer li { flex-direction: row; } } #myProfilePage #photoOrganizer #listContainer li:first-child { margin-top: 0; padding-top: 0; border-top: none; } #myProfilePage #photoOrganizer #listContainer li:first-child .pictureInfos .headRow { display: block; } #myProfilePage #photoOrganizer #listContainer li:first-child .pictureInfos .headRow .profilePicIndicator { display: inline-block; font: var(--FONT_default_100); color: var(--COLOR_supportDark_100); } #myProfilePage #photoOrganizer #listContainer li:first-child .pictureInfos .headRow .comment { display: block; margin: 4px 36px 0 20px; } #myProfilePage #photoOrganizer #listContainer li .pictureInfos { max-width: 100%; margin-right: 32px; } @media only screen and (min-width: 481px) { #myProfilePage #photoOrganizer #listContainer li .pictureInfos { order: 2; } } #myProfilePage #photoOrganizer #listContainer li .pictureInfos .headRow { display: flex; } #myProfilePage #photoOrganizer #listContainer li .pictureInfos .headRow .orderNum { display: inline-block; font: var(--FONT_highlight_100); text-wrap: nowrap; } #myProfilePage #photoOrganizer #listContainer li .pictureInfos .headRow .orderNum::after { padding-right: 2px; content: " | "; } #myProfilePage #photoOrganizer #listContainer li .pictureInfos .headRow .profilePicIndicator { display: none; } #myProfilePage #photoOrganizer #listContainer li .pictureInfos .headRow .comment { margin: 0; } #myProfilePage #photoOrganizer #listContainer li .approvalText wdk-approval-tag { margin-top: 8px; margin-left: 20px; } #myProfilePage #photoOrganizer #listContainer li .photos { margin-left: 20px; } @media only screen and (min-width: 481px) { #myProfilePage #photoOrganizer #listContainer li .photos { order: 1; margin-left: 0; } } #myProfilePage #photoOrganizer #listContainer li .photos .pictures { display: flex; } #myProfilePage #photoOrganizer #listContainer li .photos .pictures span { display: inline-block; background-color: var(--COLOR_supportLight_100); border: 1px solid var(--COLOR_supportDark_070); width: 74px; height: 112px; vertical-align: middle; background-repeat: no-repeat; background-position: center center; background-size: cover; } #myProfilePage #photoOrganizer #listContainer li .photos .pictures span:first-child { margin-right: 8px; } #myProfilePage #photoOrganizer #listContainer li .photos .approvalPhoto wdk-approval-tag { margin-top: 8px; } #myProfilePage #photoOrganizer #listContainer li .upDownButtons { position: absolute; top: 16px; right: 0; height: 100%; padding-bottom: 16px; display: flex; flex-direction: column; justify-content: space-between; } #myProfilePage #photoOrganizer #listContainer li .upDownButtons a { display: flex; } #myProfilePage #photoOrganizer #listContainer li .makeProfilePic { display: none; margin-top: 8px; margin-left: 0; } #myProfilePage #photoOrganizer #listContainer li .makeProfilePic.show { display: inline-flex; } #myProfilePage #motivatorBoxes { padding-bottom: 16px; margin-left: auto; margin-right: auto; } #myProfilePage #motivatorBoxes .motivatorBox { display: none; } #myProfilePage #motivatorBoxes .motivatorBox.show { display: block; } @media only screen and (min-width: 768px) { #myProfilePage #motivatorBoxes .motivatorBox.show { display: flex; justify-content: space-between; } } #myProfilePage #motivatorBoxes .motivatorBox .motivatorText h4 { font: var(--FONT_highlight_75); color: var(--COLOR_alertInfo_100); } #myProfilePage #motivatorBoxes .motivatorBox .motivatorText ul { margin-top: 16px; margin-bottom: 32px; } #myProfilePage #motivatorBoxes .motivatorBox .motivatorText ul li { margin-left: 24px; line-height: 34px; text-indent: -20px; } #myProfilePage #motivatorBoxes .motivatorBox .motivatorText ul li::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_check.svg); mask-image: url(../../img/icons/single_color/icon_check.svg); vertical-align: -3px; width: 16px; height: 16px; margin-right: 4px; background-color: var(--COLOR_alertInfo_100); } #myProfilePage #motivatorBoxes .motivatorBox .imgWrapperForFlexbox { width: 100%; max-width: 300px; } @media only screen and (min-width: 768px) { #myProfilePage #motivatorBoxes .motivatorBox .imgWrapperForFlexbox { max-width: 370px; height: 100%; } } #myProfilePage #motivatorBoxes .motivatorBox .imgWrapperForFlexbox img { width: 100%; } #myProfilePage peg-mysong-player { display: flex; width: 100%; height: 128px; position: relative; flex-direction: row; justify-content: flex-start; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 768px) { #myProfilePage peg-mysong-player { height: 168px; } } #myProfilePage peg-mysong-player .content { display: flex; width: 100%; flex-direction: row; gap: 8px; } #myProfilePage peg-mysong-player .content .cover { position: relative; width: 128px; height: 128px; background-color: var(--COLOR_supportDark_500); } #myProfilePage peg-mysong-player .content .cover::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/illu_headphones.svg); mask-image: url(../../img/icons/single_color/illu_headphones.svg); vertical-align: -3px; width: 48px; height: 48px; position: absolute; color: var(--COLOR_supportDark_300); top: 50%; left: 50%; transform: translate(-50%, -50%); } #myProfilePage peg-mysong-player .content .songContentWrapper { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; height: 112px; } #myProfilePage peg-mysong-player .content .songContentWrapper .textContent { flex: 1; margin-bottom: 8px; } #myProfilePage peg-mysong-player .content .songContentWrapper .textContent:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; } #myProfilePage peg-mysong-player .content .songContentWrapper .textContent .title { overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font: var(--FONT_default_100); color: var(--COLOR_supportDark_100); margin-bottom: 4px; text-transform: initial; } #myProfilePage peg-mysong-player .content .songContentWrapper .textContent .artist { overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font: var(--FONT_default_75); color: var(--COLOR_supportDark_070); margin-bottom: 4px; } #myProfilePage peg-mysong-player .content .songContentWrapper .textContent .linkToSpotify { overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); } #myProfilePage peg-mysong-player .content .buttons { display: flex; width: 100%; justify-content: space-between; align-items: flex-end; } #myProfilePage peg-mysong-player .content .buttons .js-selectButton, #myProfilePage peg-mysong-player .content .buttons .js-selectedButton { min-width: 86px; } #myProfilePage peg-mysong-player[mode="emptyMode"] { justify-content: center; border-radius: var(--borderRadius_100); border: 1px dashed var(--COLOR_supportDark_050); cursor: pointer; flex-direction: column; } #myProfilePage peg-mysong-player[mode="songSelectionMode"] { height: 148px; padding-right: 4px; } #myProfilePage peg-mysong-player[mode="songSelectionMode"] .songContentWrapper { height: initial; margin-right: 8px; } #myProfilePage peg-mysong-player[mode="songSelectionMode"] .songContentWrapper .textContent .artist { color: var(--COLOR_supportDark_300); } #myProfilePage peg-mysong-player[mode="myProfileMode"] .content, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content, #myProfilePage peg-mysong-player[mode="errorMode"] .content { height: 100%; padding: initial; } #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .backDropWrapper, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .backDropWrapper, #myProfilePage peg-mysong-player[mode="errorMode"] .content .backDropWrapper { padding: 8px; height: 100%; flex: 1; border-radius: 18px; -webkit-backdrop-filter: blur(48px) saturate(200%); backdrop-filter: blur(48px) saturate(200%); display: flex; flex-direction: row; gap: 8px; border: 1px solid rgba(0, 0, 0, 0); } @media only screen and (min-width: 768px) { #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .backDropWrapper, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .backDropWrapper, #myProfilePage peg-mysong-player[mode="errorMode"] .content .backDropWrapper { flex-direction: column; } } #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .songContentWrapper, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .songContentWrapper, #myProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper { flex-direction: row; align-items: center; gap: 8px; padding: 8px; background-color: var(--COLOR_supportLight_080); border-radius: var(--borderRadius_75); z-index: 1; border: 1px solid var(--COLOR_supportLight_080); background-blend-mode: soft-light; } #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .songContentWrapper .cover, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .songContentWrapper .cover, #myProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .cover { width: 96px; height: 96px; } #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .songContentWrapper .textContent, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .songContentWrapper .textContent, #myProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .textContent { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 100%; margin-bottom: initial; } #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .songContentWrapper .textContent .title, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .songContentWrapper .textContent .title, #myProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .textContent .title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font: var(--FONT_default_75); } #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .buttons, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .buttons, #myProfilePage peg-mysong-player[mode="errorMode"] .content .buttons { align-items: normal; flex-direction: column; width: initial; padding: 4px 0; } @media only screen and (min-width: 768px) { #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .buttons, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .buttons, #myProfilePage peg-mysong-player[mode="errorMode"] .content .buttons { flex-direction: row; width: 100%; padding: 0 4px; } } #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .bgCover, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .bgCover, #myProfilePage peg-mysong-player[mode="errorMode"] .content .bgCover { position: absolute; height: 100%; width: 100%; top: 0; left: 0; border-radius: 18px; opacity: 0.7; z-index: 0; } #myProfilePage peg-mysong-player[mode="myProfileMode"] .content .bgCover::before, #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .content .bgCover::before, #myProfilePage peg-mysong-player[mode="errorMode"] .content .bgCover::before { content: ""; position: absolute; top: 0; left: 0; background-color: var(--COLOR_supportDark_500); height: 100%; width: 100%; border-radius: 18px; } #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .buttons peg-pp-like-element .wdk-button.is-liked .icon .wdk-icon { fill: var(--COLOR_supportLight_100) !important; } #myProfilePage peg-mysong-player[mode="partnerProfileMode"] .buttons peg-pp-like-element .wdk-button .icon .wdk-icon { stroke: var(--COLOR_supportLight_100) !important; } #myProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .textContent { text-align: center; align-items: center; overflow: hidden; } #myProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .textContent .title { font: var(--FONT_default_75); } #myProfilePage peg-mysong-player[mode="errorMode"] .content .songContentWrapper .js-reloadButton.isLoading { animation: rotation 2s infinite linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #myProfilePage peg-mysong-player[mode="errorMode"] .content .bgCover { filter: initial; opacity: 1; } #myProfilePage peg-mysong-selection { display: flex; height: 100vh; width: 100%; gap: 32px; margin-top: 16px; align-items: stretch; flex-direction: column; justify-content: space-between; } @media only screen and (min-width: 481px) { #myProfilePage peg-mysong-selection { height: 75vh; } } #myProfilePage peg-mysong-selection .initialContent { display: flex; flex-direction: column; align-items: center; align-content: center; text-align: center; flex: 1; } #myProfilePage peg-mysong-selection .initialContent .headphones { width: 184px; height: 184px; margin-bottom: 24px; } #myProfilePage peg-mysong-selection .initialContent .title { margin-bottom: 8px; font: var(--FONT_highlight_200); } #myProfilePage peg-mysong-selection .initialContent .text { font: var(--FONT_default_75); margin-bottom: 32px; } #myProfilePage peg-mysong-selection .resultContent { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; } #myProfilePage peg-mysong-selection .resultContent .title { font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); text-transform: uppercase; } #myProfilePage peg-mysong-selection .resultContent .wdk-loadingSpinner { margin: 0 auto; } #myProfilePage peg-mysong-selection .resultContent .songSelectionList { display: flex; flex-direction: column; width: 100%; overflow: auto; flex-grow: 1; flex-basis: 0; gap: 8px; padding-top: 8px; } #myProfilePage peg-mysong-selection .noResultContent, #myProfilePage peg-mysong-selection .errorContent { display: flex; gap: 8px; align-items: center; flex-direction: column; flex: 1; } #myProfilePage peg-mysong-selection .noResultContent .title, #myProfilePage peg-mysong-selection .errorContent .title { font: var(--FONT_highlight_200); } #myProfilePage peg-mysong-selection .noResultContent .text, #myProfilePage peg-mysong-selection .errorContent .text { font: var(--FONT_default_75); margin-bottom: 56px; } #myProfilePage peg-mysong-selection .spotifyLogo { margin: 0 auto; } /*! * Cropper.js v1.5.6 * https://fengyuanchen.github.io/cropperjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2019-10-04T04:33:44.164Z */ .cropper-container { direction: ltr; font-size: 0; line-height: 0; position: relative; touch-action: none; -webkit-user-select: none; user-select: none; } .cropper-container img { display: block; height: 100%; image-orientation: 0deg; max-height: none !important; max-width: none !important; min-height: 0 !important; min-width: 0 !important; width: 100%; } .cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .cropper-wrap-box, .cropper-canvas { overflow: hidden; } .cropper-drag-box { background-color: #fff; opacity: 0; } .cropper-modal { background-color: #000; opacity: 0.5; } .cropper-view-box { display: block; height: 100%; outline: 1px solid #39f; outline-color: rgba(51, 153, 255, 0.75); overflow: hidden; width: 100%; } .cropper-dashed { border: 0 dashed #eee; display: block; opacity: 0.5; position: absolute; } .cropper-dashed.dashed-h { border-bottom-width: 1px; border-top-width: 1px; height: 33.3333333333%; left: 0; top: 33.3333333333%; width: 100%; } .cropper-dashed.dashed-v { border-left-width: 1px; border-right-width: 1px; height: 100%; left: 33.3333333333%; top: 0; width: 33.3333333333%; } .cropper-center { display: block; height: 0; left: 50%; opacity: 0.75; position: absolute; top: 50%; width: 0; } .cropper-center::before, .cropper-center::after { background-color: #eee; content: " "; display: block; position: absolute; } .cropper-center::before { height: 1px; left: -3px; top: 0; width: 7px; } .cropper-center::after { height: 7px; left: 0; top: -3px; width: 1px; } .cropper-face, .cropper-line, .cropper-point { display: block; height: 100%; opacity: 0.1; position: absolute; width: 100%; } .cropper-face { background-color: #fff; left: 0; top: 0; } .cropper-line { background-color: #39f; } .cropper-line.line-e { cursor: ew-resize; right: -3px; top: 0; width: 5px; } .cropper-line.line-n { cursor: ns-resize; height: 5px; left: 0; top: -3px; } .cropper-line.line-w { cursor: ew-resize; left: -3px; top: 0; width: 5px; } .cropper-line.line-s { bottom: -3px; cursor: ns-resize; height: 5px; left: 0; } .cropper-point { background-color: #39f; height: 5px; opacity: 0.75; width: 5px; } .cropper-point.point-e { cursor: ew-resize; margin-top: -3px; right: -3px; top: 50%; } .cropper-point.point-n { cursor: ns-resize; left: 50%; margin-left: -3px; top: -3px; } .cropper-point.point-w { cursor: ew-resize; left: -3px; margin-top: -3px; top: 50%; } .cropper-point.point-s { bottom: -3px; cursor: s-resize; left: 50%; margin-left: -3px; } .cropper-point.point-ne { cursor: nesw-resize; right: -3px; top: -3px; } .cropper-point.point-nw { cursor: nwse-resize; left: -3px; top: -3px; } .cropper-point.point-sw { bottom: -3px; cursor: nesw-resize; left: -3px; } .cropper-point.point-se { bottom: -3px; cursor: nwse-resize; height: 20px; opacity: 1; right: -3px; width: 20px; } @media (min-width: 768px) { .cropper-point.point-se { height: 15px; width: 15px; } } @media (min-width: 992px) { .cropper-point.point-se { height: 10px; width: 10px; } } @media (min-width: 1200px) { .cropper-point.point-se { height: 5px; opacity: 0.75; width: 5px; } } .cropper-point.point-se::before { background-color: #39f; bottom: -50%; content: " "; display: block; height: 200%; opacity: 0; position: absolute; right: -50%; width: 200%; } .cropper-invisible { opacity: 0; } .cropper-bg { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC"); } .cropper-hide { display: block; height: 0; position: absolute; width: 0; } .cropper-hidden { display: none !important; } .cropper-move { cursor: move; } .cropper-crop { cursor: crosshair; } .cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point { cursor: not-allowed; } #consentPage .modalboxAllOptinLayerMock .modalboxContent { color: var(--COLOR_supportLight_100); background-color: var(--COLOR_primary_100); } #consentPage .modalboxAllOptinLayerMock .modalboxContent article { max-width: 100%; } #consentPage #nameAndPhotoOptinModal .modalboxContent { transform: none; } #consentPage #nameAndPhotoOptinModal .modalboxContent h3 { font: var(--FONT_highlight_100); text-align: center; margin: 24px 0 16px 0; } #consentPage #nameAndPhotoOptinModal .modalboxContent footer .buttonsContainer { flex-direction: column; } #consentPage #nameAndPhotoOptinModal #serverErrorMessage { width: 100%; margin-top: 0; } #consentPage #nameAndPhotoOptinModal #serverErrorMessage.is-visible { margin-bottom: 16px; } #consentPage #nameAndPhotoOptinModal .profileImageContainer { margin-top: 20px; display: flex; justify-content: center; } #consentPage #nameAndPhotoOptinModal .profileImageContainer .imageWrapper { position: relative; display: inline-block; } #consentPage #nameAndPhotoOptinModal .profileImageContainer .imageWrapper .profileImage { width: 125px; height: 125px; border-radius: var(--borderRadius_circle); border: 2px solid #fff; display: inline-block; background-color: var(--COLOR_supportLight_070); } #consentPage #nameAndPhotoOptinModal .profileImageContainer .imageWrapper .imageUnblurred { position: relative; margin-left: -30px; z-index: 1; } #consentPage #nameAndPhotoOptinAccepted article { text-align: center; } #consentPage #nameAndPhotoOptinAccepted article .icon_check { fill: var(--COLOR_supportLight_100); background-color: var(--COLOR_supportLight_050); border: 2px solid var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); padding: 10px; width: 90px; height: 90px; margin: 20px auto; } @keyframes notActiveContactReceivesMessageAni { 0% { opacity: 0; transform: scale(0.5); } 50% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes activeContactReceivesMessageAni { 10% { transform: scale(1.4); } 15% { transform: scale(0.9); } 20% { transform: scale(1); } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeInNewMessage { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInOldMessage { 0% { opacity: 0; } 2% { opacity: 1; } 100% { opacity: 1; } } #conversationArea { position: fixed; width: 100%; min-width: 0; height: 100dvh; display: flex; flex-flow: column nowrap; padding: 0; overflow: hidden; background: var(--COLOR_supportLight_100); } html.macSafari #conversationArea { transform: translate3d(0, 0, 0); } @media only screen and (min-width: 481px) { #conversationArea { position: relative; width: 100%; height: initial; } } #conversationArea::before { content: ""; position: fixed; width: 100%; height: 100%; top: -200vh; left: 0; background-color: var(--COLOR_supportDark_050); opacity: 0; z-index: 5; transition: opacity 0.3s, top 0.3s step-end; } @media only screen and (min-width: 768px) { #conversationArea::before { z-index: 120; } } #conversationArea.has-openProfileMenu::before { top: 0; opacity: 1; transition: opacity 0.3s, top 0.3s step-start; } #conversationArea.is-deleteMode header #conversationHeader { width: 100px; } #conversationArea.is-deleteMode header peg-messenger-profile-menu { display: none; } #conversationArea.is-deleteMode header a#abortDeleteMode { display: flex; } #conversationArea.is-deleteMode #messagesList .messageRow .deleteCheckbox { display: block; } #conversationArea.is-deleteMode #messagesList .messageRow .messageContent, #conversationArea.is-deleteMode #messagesList .messageRow .messageActions, #conversationArea.is-deleteMode #messagesList .messageRow .wdk-premiumElement { width: 75%; margin-left: 50px; } #conversationArea.is-deleteMode #messagesList .messageRow .metaInfos { margin-left: 50px; } #conversationArea.is-deleteMode #messagesList .messageRow .editDraft, #conversationArea.is-deleteMode #messagesList .messageRow .deleteDraft { display: none; } #conversationArea.is-deleteMode #messageInteractions peg-write-text-message, #conversationArea.is-deleteMode #messageInteractions #otherMessageButtons, #conversationArea.is-deleteMode #messageInteractions #messagingErrors { display: none; } #conversationArea.is-deleteMode #messageInteractions #deleteActions { display: flex; } #conversationArea .photoWrapper { position: relative; vertical-align: top; margin-right: 12px; padding: 2px 0 0 0; } #conversationArea .photoWrapper .photoMask { position: relative; display: inline-block; overflow: hidden; border-radius: var(--borderRadius_circle); transition: box-shadow 0.2s; } #conversationArea .photoWrapper .photoMask .photo { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; background-position: center; } #conversationArea .photoWrapper .photoMask.isDummy { background: var(--COLOR_primary_100); } #conversationArea .photoWrapper .photoMask.isDummy .photo { display: flex; justify-content: center; align-items: center; } #conversationArea .photoWrapper .photoMask.isDummy .photo::before { background-color: var(--COLOR_supportLight_100); } #conversationArea > header { display: flex; align-items: center; justify-content: space-between; background-color: var(--COLOR_supportLight_100); flex: 0 0 auto; z-index: 6; height: 52px; } @media only screen and (min-width: 481px) { #conversationArea > header { height: 62px; } } @media only screen and (min-width: 768px) { #conversationArea > header { height: 69px; } #messengerPage #conversationArea > header { border-bottom: 1px solid var(--COLOR_supportDark_050); } } #conversationArea > header .backToContacts { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; text-decoration: none; } @media only screen and (min-width: 768px) { #conversationArea > header .backToContacts { display: none; } } #conversationArea > header .backToContacts .wdk-icon.icon_arrow_left_regular { fill: var(--COLOR_primary_100); } #conversationArea > header .photoWrapper { margin-right: 8px; } #conversationArea > header .photoWrapper .photoMask { width: 32px; height: 32px; display: block; } #conversationArea > header .primaryPartnerLabelRow { display: flex; align-items: center; font: var(--FONT_highlight_100); flex-wrap: wrap; } #conversationArea > header .primaryPartnerLabelRow .primaryPartnerLabel { display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; } #conversationArea > header .primaryPartnerLabelRow .messengerHeaderOnlineState { width: 100%; font: var(--FONT_default_50); } #conversationArea > header #conversationHeader { display: flex; color: var(--COLOR_defaultText); width: 100px; text-decoration: none; align-items: center; flex-grow: 1; } @media only screen and (min-width: 768px) { #conversationArea > header #conversationHeader { margin-left: 24px; } } #conversationArea > header #conversationHeader .wdk-icon { display: none; } @media (pointer: fine) { #conversationArea > header #conversationHeader:hover { color: var(--COLOR_primary_100); } #conversationArea > header #conversationHeader.is-deleted:hover, #conversationArea > header #conversationHeader.is-rejected:hover, #conversationArea > header #conversationHeader.is-scammer:hover { color: var(--COLOR_defaultText); } } #conversationArea > header #conversationHeader.is-favorite .wdk-icon { display: block; fill: var(--COLOR_supportDark_100); margin-left: 4px; width: 18px; height: 18px; } .no-touchevents #conversationArea > header #conversationHeader.is-favorite:hover .wdk-icon { fill: var(--COLOR_primary_100); } #conversationArea > header #conversationHeader.is-matchUnlocked .photoWrapper { margin-left: 4px; margin-right: 4px; } #conversationArea > header #conversationHeader.is-matchUnlocked .photoWrapper .photoMask { width: 40px; height: 40px; padding: 2px; background: var(--COLOR_match_unlock_gradient_border); border: 2px solid rgba(0, 0, 0, 0); } #conversationArea > header #conversationHeader.is-matchUnlocked .photoWrapper .photoMask .photo { border-radius: var(--borderRadius_circle); } #conversationArea > header #conversationHeader.is-matchUnlocked .photoWrapper .photoMask.isDummy .photo { display: flex; justify-content: center; align-items: center; background: var(--COLOR_primary_100); } #conversationArea > header #conversationHeader.is-matchUnlocked .photoWrapper .photoMask.isDummy .photo::before { background-color: var(--COLOR_supportLight_100); } #conversationArea > header .headerActions { display: flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; flex-grow: 0; } @media only screen and (min-width: 768px) { #conversationArea > header .headerActions { margin-right: 16px; } } #conversationArea > header .headerActions .reloadMessageList { display: flex; font-size: 32px; color: var(--COLOR_primary_100); } @media only screen and (min-width: 768px) { #conversationArea > header .headerActions .reloadMessageList { display: none; } } #conversationArea > header .headerActions #abortDeleteMode { display: none; margin-left: 8px; margin-right: 8px; } #conversationArea #scammerError[show], #conversationArea #deletedError[show], #conversationArea #lowProfileQualityError[show], #conversationArea #inactiveError[show] { width: calc(100% - 40px); margin-top: 20px; margin-left: 20px; } @media (min-width: 320px) and (max-width: 767px) { #conversationArea #scammerError[show], #conversationArea #deletedError[show], #conversationArea #lowProfileQualityError[show], #conversationArea #inactiveError[show] { width: calc(100% - 16px); margin-left: 8px; margin-top: 0; } } #conversationArea peg-reclaim-unlock-box { width: calc(100% - 40px); margin-top: 8px; margin-left: 20px; padding: 16px; border-radius: var(--borderRadius_100); color: var(--COLOR_supportLight_100); background: var(--COLOR_gradient_unlock_100_90); text-align: center; } @media (min-width: 320px) and (max-width: 767px) { #conversationArea peg-reclaim-unlock-box { width: calc(100% - 16px); margin-left: 8px; } } #conversationArea peg-reclaim-unlock-box p { margin: 0 0 16px 0; } #conversationArea peg-reclaim-unlock-box p.reclaimSuccess { margin-top: 24px; display: flex; gap: 8px; justify-content: center; align-items: center; font: var(--FONT_highlight_100); } #conversationArea peg-reclaim-unlock-box p.reclaimSuccess:not(.noDisplay) { opacity: 1; transform: translateY(0); transition: opacity 0.3s, transform 0.5s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } #conversationArea peg-reclaim-unlock-box p.reclaimSuccess:not(.noDisplay) { animation: fadeIn 0.5s forwards; } #conversationArea peg-reclaim-unlock-box p .wdk-icon { fill: var(--COLOR_supportLight_100); } #conversationArea peg-messages-list#messagesList { flex-flow: column-reverse nowrap; } #conversationArea #messagesList { position: relative; padding: 0 16px 0 16px; background-color: var(--COLOR_supportLight_100); border: none; border-radius: 0; opacity: 0; transition: opacity 0.3s; flex: 1 1 1px; display: flex; flex-flow: column; } @media only screen and (min-width: 768px) { #conversationArea #messagesList { padding: 0 24px 0 24px; flex-basis: 0; flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } } @media only screen and (min-width: 980px) { #conversationArea #messagesList { padding: 0 32px 0 32px; } } #conversationArea #messagesList.is-visible { opacity: 1; } #conversationArea #messagesList.emptyList { flex: initial; } #conversationArea #messagesList #loadOlderMessages { display: flex; margin: 12px auto 20px auto; } #conversationArea #messagesList #loadOlderMessages .wdk-icon.icon_arrow_up_regular { fill: var(--COLOR_primary_100); } #conversationArea #messagesList h5 { font: var(--FONT_default_50); color: var(--COLOR_supportLight_100); text-align: center; margin-top: 32px; } #conversationArea #messagesList h5:first-of-type { margin-top: 20px; } #conversationArea #messagesList h5 span { display: inline-block; border-radius: var(--borderRadius_100); padding: 4px 6px; background-color: var(--COLOR_supportDark_080); } #conversationArea #messagesList .messageRow { position: relative; margin-bottom: 16px; font: var(--FONT_default_100); opacity: 0; display: flex; flex-flow: column nowrap; align-items: flex-start; padding-inline: 8px; } #conversationArea #messagesList .messageRow::after { content: ""; display: table; clear: both; } #conversationArea #messagesList .messageRow:not(.fade-in) { animation-name: fadeInOldMessage; animation-duration: 0.1s; animation-fill-mode: forwards; } #conversationArea #messagesList .messageRow.fade-in { animation-name: fadeInNewMessage; animation-duration: 1.2s; animation-timing-function: ease; animation-fill-mode: forwards; } #conversationArea #messagesList .messageRow:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; border-radius: var(--borderRadius_100); } #conversationArea #messagesList .messageRow[data-message-type="smile"] wdk-lottie-animation { width: 44px; height: 44px; } #conversationArea #messagesList .messageRow[data-message-type="like"].is-partnerMessage .miniBubble { background-color: var(--COLOR_supportDark_600); border: 2px solid var(--COLOR_supportLight_100); } #conversationArea #messagesList .messageRow[data-message-type="like"].is-partnerMessage .miniBubble .wdk-icon.mutualMatch { fill: var(--COLOR_supportDark_100); } #conversationArea #messagesList .messageRow[data-message-type="like"].is-partnerMessage .messageContent { background-color: var(--COLOR_supportLight_100); } #conversationArea #messagesList .messageRow[data-message-type="like"] .messageContent { box-shadow: 0 1px 14px 0 var(--COLOR_supportDark_050); min-height: 100px; margin-bottom: 30px; } #conversationArea #messagesList .messageRow[data-message-type="like"] .messageContent.noBody { min-height: 70px; } #conversationArea #messagesList .messageRow[data-message-type="like"] .messageContent.isCard { box-shadow: none; padding: 0; } #conversationArea #messagesList .messageRow[data-message-type="like"] .messageContent p.likeType { font: var(--FONT_default_75); color: var(--COLOR_supportDark_400); } #conversationArea #messagesList .messageRow[data-message-type="like"] .messageContent p.body { font: var(--FONT_default_100); margin-top: 8px; margin-bottom: 28px; } #conversationArea #messagesList .messageRow[data-message-type="like"] .miniBubble { position: absolute; bottom: -32px; left: 0; border-radius: var(--borderRadius_100); border-top-left-radius: 0; background-color: var(--COLOR_supportDark_040); overflow: hidden; min-height: 56px; min-width: 56px; display: flex; align-items: center; justify-content: center; } #conversationArea #messagesList .messageRow[data-message-type="like"] .miniBubble wdk-lottie-animation { width: 48px; height: 48px; } #conversationArea #messagesList .messageRow[data-message-type="like"] .miniBubble .wdk-icon.mutualMatch { width: 32px; height: 32px; fill: var(--COLOR_supportLight_100); } #conversationArea #messagesList .messageRow[data-message-type="like"] .metaInfos { bottom: -64px; } #conversationArea #messagesList .messageRow[data-message-type="like"] peg-mysong-player { max-width: 500px; height: 130px; margin-bottom: 0; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent { background: rgba(0, 0, 0, 0); max-width: 100%; width: 100%; flex-direction: column; align-items: center; text-align: center; padding: 0; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .wdk-button, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .wdk-button { width: 26px; height: 26px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .wdk-button.t-lottieAnimation .icon, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .wdk-button.t-lottieAnimation .icon { width: 20px; height: 20px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .wdk-button.t-lottieAnimation .icon svg, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .wdk-button.t-lottieAnimation .icon svg { width: 20px; height: 20px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .wdk-button.t-lottieAnimation .lottiAnimation, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .wdk-button.t-lottieAnimation .lottiAnimation { top: calc(50% + 7px); } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .wdk-button.t-lottieAnimation .lottiAnimation wdk-lottie-animation, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .wdk-button.t-lottieAnimation .lottiAnimation wdk-lottie-animation { width: 47px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .messageText, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .messageText { margin-top: -4px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .subject, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .subject { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; font: var(--FONT_highlight_50); color: var(--COLOR_primary_100); margin-top: 4px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .subject::before, #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .subject::after, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .subject::before, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .subject::after { content: ""; display: block; width: 100%; border-top: 1px solid var(--COLOR_primary_100_light); } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="mutual_match"] .messageContent .body, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="mutual_match"] .messageContent .body { font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); margin-top: 4px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="icebreaker_response"] .messageContent, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="icebreaker_response"] .messageContent { display: block; min-width: 229px; text-decoration: none; color: var(--COLOR_supportLight_100); text-align: center; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="icebreaker_response"] .messageContent .successText, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="icebreaker_response"] .messageContent .successText { margin: 12px 0 6px 0; font: var(--FONT_highlight_200); } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="icebreaker_response"] .messageContent .noOfHits, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="icebreaker_response"] .messageContent .noOfHits { position: relative; margin: 4px 0 4px 0; font: var(--FONT_default_200); } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="icebreaker_response"] .messageContent .noOfHits .wdk-icon, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="icebreaker_response"] .messageContent .noOfHits .wdk-icon { position: absolute; right: 0; top: 4px; fill: var(--COLOR_supportLight_100); height: 20px; width: 20px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="icebreaker_response"] wdk-lottie-animation, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="icebreaker_response"] wdk-lottie-animation { width: 120px; height: 120px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="icebreaker_request"] wdk-lottie-animation, #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="icebreaker_request"] wdk-lottie-animation { width: 44px; height: 44px; } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="icebreaker_response"] .messageContent { color: var(--COLOR_supportDark_100); } #conversationArea #messagesList .messageRow.is-partnerMessage[data-message-type="icebreaker_response"] .messageContent .noOfHits .wdk-icon { fill: var(--COLOR_supportDark_100); } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent { background-color: var(--COLOR_supportDark_600); } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent:has(peg-photo-teaser-messaging) { background-color: rgba(0, 0, 0, 0); } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent:has(peg-messaging-mitigation-trigger) { padding: 6px; border-radius: var(--borderRadius_100); border: 2px solid rgba(0, 0, 0, 0); cursor: pointer; } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent:has(peg-messaging-mitigation-trigger):has( + peg-messaging-mitigation-trigger ) { border-bottom-left-radius: 0; } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent:has(peg-messaging-mitigation-trigger):has( [mitigation="PURCHASE_SUBSCRIPTION"] ), #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent:has(peg-messaging-mitigation-trigger):has( [mitigation="UPGRADE_SUBSCRIPTION"] ) { background: linear-gradient( var(--COLOR_supportDark_600), var(--COLOR_supportDark_600) ) padding-box, var(--COLOR_gradient_premium_100_45) border-box; } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent:has(peg-messaging-mitigation-trigger):has( [mitigation="REDEEM_MATCH_UNLOCK"] ), #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent:has(peg-messaging-mitigation-trigger):has( [mitigation="PURCHASE_MATCH_UNLOCK"] ) { background: linear-gradient( var(--COLOR_supportDark_600), var(--COLOR_supportDark_600) ) padding-box, var(--COLOR_gradient_unlock_100_180) border-box; } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent wdk-dragscroll { padding: 6px; width: fit-content; border-radius: var(--borderRadius_100); border-bottom-left-radius: 0; border: 2px solid rgba(0, 0, 0, 0); } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent wdk-dragscroll[mitigation="PURCHASE_SUBSCRIPTION"], #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent wdk-dragscroll[mitigation="UPGRADE_SUBSCRIPTION"] { background: linear-gradient( var(--COLOR_supportDark_600), var(--COLOR_supportDark_600) ) padding-box, var(--COLOR_gradient_premium_100_45) border-box; } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent wdk-dragscroll[mitigation="REDEEM_MATCH_UNLOCK"], #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent wdk-dragscroll[mitigation="PURCHASE_MATCH_UNLOCK"] { background: linear-gradient( var(--COLOR_supportDark_600), var(--COLOR_supportDark_600) ) padding-box, var(--COLOR_gradient_unlock_100_180) border-box; } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent wdk-dragscroll:focus-visible { outline: 2px dashed currentColor; outline-offset: 1px; } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent .messageIcon.iconComment .wdk-icon { width: 52px; height: 52px; fill: var(--COLOR_primary_100); } #conversationArea #messagesList .messageRow.is-partnerMessage .messageContent peg-highlight-item { margin: 0 0 0 2px; } #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="like"] .messageContent { background-color: var(--COLOR_supportLight_100); color: var(--COLOR_defaultText); } #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="like"] .messageContent .miniBubble { left: auto; right: 0; border-top-left-radius: inherit; border-top-right-radius: 0; background-color: var(--COLOR_primary_100); } #conversationArea #messagesList .messageRow.is-myMessage .messageContent { color: var(--COLOR_supportLight_100); background-color: var(--COLOR_primary_100); align-self: flex-end; } #conversationArea #messagesList .messageRow.is-myMessage .messageContent .messageIcon.iconComment .wdk-icon { width: 52px; height: 52px; fill: var(--COLOR_supportLight_100); } #conversationArea #messagesList .messageRow.is-myMessage .messageActions { float: right; } #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="draft"] { opacity: 1; } #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="draft"].has-hideAnimation { opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1); transform: translate3d(-10%, 130%, 0) scale(0.5); } #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="draft"] .messageContent { background-color: var(--COLOR_alertWarning_100); } #conversationArea #messagesList .messageRow.is-myMessage[data-message-type="draft"] .messageActions .deleteDraft { padding: 0 12px; } #conversationArea #messagesList .messageRow.is-myMessage peg-highlight-item { margin: 0 0 0 auto; } #conversationArea #messagesList .messageRow .messageActions { clear: both; max-width: 85%; padding-top: 4px; } #conversationArea #messagesList .messageRow .messageActions .wdk-button + .wdk-button { margin-left: 6px; } #conversationArea #messagesList .messageRow .deleteCheckbox { display: none; float: left; position: absolute; top: 50%; height: 44px; margin: -22px 8px 0 8px; } #conversationArea #messagesList .messageRow .messageContent { position: relative; display: flex; max-width: 85%; padding: 12px 16px; border-radius: var(--borderRadius_100); margin-top: 4px; align-items: flex-start; } #conversationArea #messagesList .messageRow .messageContent.emojiOnly { font-size: 32px; line-height: 40px; padding: 0 12px; text-align: center; width: 56px; height: 56px; align-items: center; } #conversationArea #messagesList .messageRow .messageContent:has(wdk-dragscroll) { min-width: auto; padding: 0; } #conversationArea #messagesList .messageRow .messageContent:has(wdk-dragscroll) wdk-dragscroll { max-width: 250px; } #conversationArea #messagesList .messageRow .messageContent:has(wdk-dragscroll) wdk-dragscroll ul { display: flex; height: 68px; white-space: nowrap; font-size: 0; } #conversationArea #messagesList .messageRow .messageContent:has(wdk-dragscroll) wdk-dragscroll ul li { display: inline-block; width: 68px; height: 68px; scroll-snap-align: start; } #conversationArea #messagesList .messageRow .messageContent:has(wdk-dragscroll) wdk-dragscroll ul li + li { margin-left: 8px; } #conversationArea #messagesList .messageRow .messageContent peg-photo-mitigation-trigger wdk-dragscroll { cursor: pointer; } #conversationArea #messagesList .messageRow .messageContent + .messageContent { clear: both; } #conversationArea #messagesList .messageRow .messageContent .messageIcon { background-repeat: no-repeat; display: inline-block; width: 50px; margin-top: -6px; margin-right: 12px; background-size: 40px 30px; background-position: right top; } #conversationArea #messagesList .messageRow .messageContent .photoWrapper { margin: 0; padding: 0; display: block; overflow: hidden; height: 68px; } #conversationArea #messagesList .messageRow .messageContent .photoWrapper .photoMask { width: 68px; height: 68px; border-radius: var(--borderRadius_100); } #conversationArea #messagesList .messageRow .messageContent .messageText { vertical-align: top; width: 100%; word-wrap: break-word; } #conversationArea #messagesList .messageRow .messageContent .messageText.has-alignTextWithIcon { margin-left: 52px; } #conversationArea #messagesList .messageRow .messageContent .messageText.is-blurredText p { filter: blur(4px); -webkit-user-select: none; user-select: none; padding: 4px; } #conversationArea #messagesList .messageRow .messageContent .messageText .subject { display: block; margin: 0; } #conversationArea #messagesList .messageRow .messageContent .messageText p { margin: 0; overflow: hidden; text-overflow: ellipsis; } #conversationArea #messagesList .messageRow .messageContent .messageIcon + .messageText { width: calc(100% - 48px); } #conversationArea #messagesList .messageRow .metaInfos { display: block; font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); padding-top: 7px; } #conversationArea #messagesList .messageRow .metaInfos.has-readByReceiverIcon, #conversationArea #messagesList .messageRow .metaInfos.has-sentIcon { align-self: flex-end; padding-top: 0; } #conversationArea #messagesList .messageRow .metaInfos.has-readByReceiverIcon::after, #conversationArea #messagesList .messageRow .metaInfos.has-sentIcon::after { content: ""; display: inline-block; width: 24px; height: 18px; margin-left: 4px; background-size: 24px; background-repeat: no-repeat; } #conversationArea #messagesList .messageRow .metaInfos.has-sentIcon::after { background-image: url("../../img/messenger/icon_check_sent.svg"); } #conversationArea #messagesList .messageRow .metaInfos.has-readByReceiverIcon::after { background-image: url("../../img/messenger/icon_check_read_by_receiver.svg"); } #conversationArea #messagesList .messageRow .wdk-premiumElement, #conversationArea #messagesList .messageRow peg-offering-teaser-messages-list { width: 85%; margin-top: 4px; clear: both; float: left; } #conversationArea .emptyChatContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 16px 0 16px; flex: 1 1 1px; height: 100%; color: var(--COLOR_supportDark_300); align-self: center; opacity: 1; transition: opacity 0.3s; } #conversationArea .emptyChatContainer > * { text-align: center; max-width: 312px; } #conversationArea .emptyChatContainer .iconContainer { min-height: 80px; } #conversationArea .emptyChatContainer .iconContainer .wdk-icon { width: 80px; height: 80px; fill: var(--COLOR_supportDark_300); } #conversationArea .emptyChatContainer h2 { font: var(--FONT_highlight_200); margin-top: 16px; margin-bottom: 8px; } #conversationArea #allMessagesDeleted { margin: 20px 16px 0 16px; } @media only screen and (min-width: 768px) { #conversationArea #allMessagesDeleted { margin: 20px 24px 0 24px; } } @media only screen and (min-width: 980px) { #conversationArea #allMessagesDeleted { margin: 20px 32px 0 32px; } } #conversationArea wdk-hintbox { margin-bottom: 16px; } #messageInteractions { border: none; display: flex; flex-wrap: wrap; background: var(--COLOR_supportLight_100); padding: 16px; width: 100%; flex: 0 0 auto; column-gap: 12px; } @media only screen and (min-width: 481px) { #messageInteractions { column-gap: 16px; } } #messageInteractions #messagingErrors { width: 100%; margin-bottom: 8px; } #messageInteractions #messagingErrors .wdk-styledHintBox.has-closingX { padding-right: 36px; } #messageInteractions #messagingErrors .wdk-styledHintBox.has-closingX .closeX { position: absolute; top: 0; right: 0; color: var(--COLOR_defaultText); width: 36px; height: 36px; text-decoration: none; text-align: center; } #messageInteractions #messagingErrors .wdk-styledHintBox.has-closingX .closeX::before { float: none; font-size: 24px; line-height: 36px; } #messageInteractions #messagingErrors .wdk-styledHintBox.has-closingX .closeX .wdk-icon { width: 20px; height: 20px; } #messageInteractions #messagingErrors .wdk-styledHintBox.has-closingX .closeX:hover { background-color: rgba(0, 0, 0, 0); } #messageInteractions #deleteActions { display: none; justify-content: center; align-items: center; background: var(--COLOR_supportLight_100); } #messageInteractions #deleteActions .deleteAllCheckbox { margin-left: 12px; } #messageInteractions #deleteActions p { margin-bottom: 0; margin-top: 8px; width: 100%; text-align: center; font: var(--FONT_default_100); } #messageInteractions #deleteActions .wdk-button.t-iconOnly .icon { margin-top: 8px; } #messageInteractions #otherMessageButtons { display: flex; align-self: flex-end; z-index: 1; } #messageInteractions #otherMessageButtons #otherMessageButtonsInner { display: grid; align-items: end; grid-auto-rows: 1fr auto auto; position: absolute; width: 100%; top: 100%; left: 0; padding: 8px 0 54px 0; will-change: transform; opacity: 0; transform: translate3d(0, 0, 0) scaleY(0); transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.05s 0.25s linear; background: var(--COLOR_supportLight_100); border-top-left-radius: var(--borderRadius_100); border-top-right-radius: var(--borderRadius_100); } #messageInteractions #otherMessageButtons #otherMessageButtonsInner .wdk-button { width: 100%; font: var(--FONT_default_100); position: relative; height: 48px; padding-left: 12px; padding-right: 12px; background-color: rgba(0, 0, 0, 0); border: none; box-shadow: none; } #messageInteractions #otherMessageButtons #otherMessageButtonsInner .wdk-button:active { background: none !important; } #messageInteractions #otherMessageButtons #otherMessageButtonsInner .wdk-button:active .text { color: var(--COLOR_supportDark_400); } #messageInteractions #otherMessageButtons #otherMessageButtonsInner .wdk-button .icon { display: flex; justify-content: center; align-items: center; margin-left: 6px; margin-right: 4px; opacity: 1; transition: opacity 0.3s 0.1s, background-color 0.2s, box-shadow 0.2s linear; box-shadow: none; height: 36px; width: 36px; border: 2px solid rgba(0, 0, 0, 0); background: var(--COLOR_supportLight_100); background-origin: border-box; border-radius: 30px; } #messageInteractions #otherMessageButtons #otherMessageButtonsInner .wdk-button .icon .wdk-icon { fill: var(--COLOR_primary_100); width: 20px; height: 20px; } #messageInteractions #otherMessageButtons #otherMessageButtonsInner .wdk-button .text { flex-grow: 1; position: relative; display: inline-block; margin-top: 0; text-align: left; color: var(--COLOR_defaultText); margin-left: 0; left: 0; top: 0; } @media (max-width: 480px) { #messageInteractions #otherMessageButtons #otherMessageButtonsInner .wdk-button.is-loading::before { margin-top: -24px; opacity: 1; } } @media (max-width: 480px) { #messageInteractions #otherMessageButtons #otherMessageButtonsInner .wdk-button.is-loading .text { opacity: 0; } } @media (max-width: 480px) { #messageInteractions #otherMessageButtons #otherMessageButtonsInner .wdk-button:disabled .text { color: var(--COLOR_supportDark_400); } } #messageInteractions #otherMessageButtons #toggleConversationAreaMessengerMenu { align-self: flex-end; margin-bottom: 6px; transition-delay: 0s; animation: rotateToggleMenuButtonLeft 0.5s linear forwards; } #messageInteractions #otherMessageButtons::before { content: ""; width: 100%; height: 100%; background: var(--COLOR_supportDark_050); position: absolute; top: -200%; left: 0; opacity: 0; transition: opacity 0.3s, top 0.3s step-end; } #messageInteractions #otherMessageButtons.is-open #toggleConversationAreaMessengerMenu { transition-delay: 0s; animation: rotateToggleMenuButtonRight 0.5s linear forwards; } #messageInteractions #otherMessageButtons.is-open::before { top: 0; opacity: 1; transition: opacity 0.3s, top 0.3s step-start; } #messageInteractions #otherMessageButtons.is-open #otherMessageButtonsInner { opacity: 1; transform: translate3d(0, -100%, 0) scaleY(1); transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes rotateToggleMenuButtonRight { from { transform: rotate(0deg); } to { transform: rotate(45deg); } } @keyframes rotateToggleMenuButtonLeft { from { transform: rotate(45deg); } to { transform: rotate(0deg); } } peg-write-text-message { width: calc(100% - 48px); } @media only screen and (min-width: 481px) { peg-write-text-message { width: calc(100% - 54px); } } peg-write-text-message #messagingBox { position: relative; display: flex; align-items: flex-end; } peg-write-text-message #messagingBox .wdk-form-text { padding-bottom: 0; } peg-write-text-message #messagingBox .wdk-form-text .designWrapper { border-radius: var(--borderRadius_textfield); background-color: var(--COLOR_supportDark_600); flex-direction: row; } peg-write-text-message #messagingBox .wdk-form-text .inputWrapper { background-color: var(--COLOR_supportDark_600); border-radius: var(--borderRadius_200); padding: 10px 0 10px 16px; width: initial; flex-grow: 1; } peg-write-text-message #messagingBox .wdk-form-text .inputWrapper textarea { resize: none; border: none; -webkit-overflow-scrolling: touch; margin-top: 0; height: 28px; min-height: 28px; max-height: 97px; overflow: auto !important; padding: 2px; background-color: rgba(0, 0, 0, 0); } peg-write-text-message #messagingBox .wdk-form-text .inputWrapper textarea:placeholder-shown { text-overflow: ellipsis; } peg-write-text-message #messagingBox .wdk-form-text .inputWrapper textarea::placeholder { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } peg-write-text-message #messagingBox .wdk-form-text .inputWrapper textarea[readonly] { border-color: var(--COLOR_supportDark_080); box-shadow: none; -webkit-user-select: none; user-select: none; } peg-write-text-message #messagingBox #sendTextMessage { align-self: flex-end; margin: 0 8px 6px 4px; min-width: 36px; } peg-write-text-message #messagingBox .contactRightsBadge { display: none; width: auto; white-space: nowrap; padding: 4px 8px; margin-right: 14px; color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_50); border-radius: var(--borderRadius_75); cursor: pointer; } peg-write-text-message #messagingBox.is-purchaseSubscription .inputWrapper, peg-write-text-message #messagingBox.is-redeemMatchUnlock .inputWrapper, peg-write-text-message #messagingBox.is-purchaseMatchUnlock .inputWrapper { display: flex; flex-direction: row; align-items: center; margin: 2px; border-radius: calc(var(--borderRadius_textfield) - 2px); width: calc(100% - 4px); } peg-write-text-message #messagingBox.is-purchaseSubscription .inputWrapper .contactRightsBadge, peg-write-text-message #messagingBox.is-redeemMatchUnlock .inputWrapper .contactRightsBadge, peg-write-text-message #messagingBox.is-purchaseMatchUnlock .inputWrapper .contactRightsBadge { display: block; } peg-write-text-message #messagingBox.is-purchaseSubscription .wdk-form-text .designWrapper, peg-write-text-message #messagingBox.is-purchaseSubscription .wdk-form-text .contactRightsBadge { background-image: var(--COLOR_gradient_premium_100_45); } peg-write-text-message #messagingBox.is-redeemMatchUnlock .wdk-form-text .designWrapper, peg-write-text-message #messagingBox.is-redeemMatchUnlock .wdk-form-text .contactRightsBadge, peg-write-text-message #messagingBox.is-purchaseMatchUnlock .wdk-form-text .designWrapper, peg-write-text-message #messagingBox.is-purchaseMatchUnlock .wdk-form-text .contactRightsBadge { background-image: var(--COLOR_gradient_unlock_100_45); } #messengerPage #pageWrapper section.wdk-cardDeck { display: flex; padding: 0; } #messengerPage #pageWrapper section.wdk-cardDeck .primaryCol { width: 100%; } #messengerPage peg-messenger { display: flex; align-items: stretch; flex: 1 0 auto; width: 100%; height: calc(100% - 1px); } #messengerPage peg-messenger #conversationArea { display: none; } @media only screen and (min-width: 768px) { #messengerPage peg-messenger #conversationArea { display: flex; } } #messengerPage #premiumBannerCard #bannerInContent.wdk-premiumBanner { margin: 0 24px; width: calc(100% - 48px); } @media only screen and (max-width: 767px) { #messengerPage.has-conversationAreaOpen #pageWrapper { padding-top: 0; } #messengerPage.has-conversationAreaOpen #pageWrapper #pageHeader { display: none; } #messengerPage.has-conversationAreaOpen #pageWrapper peg-footer { display: none; } #messengerPage.has-conversationAreaOpen #contactArea { display: none !important; } #messengerPage.has-conversationAreaOpen #conversationArea { display: flex !important; } } #messengerPage peg-messenger-profile-menu ul { padding-bottom: 16px; } #messengerPage peg-messenger-profile-menu ul li { padding-inline: 10px; } #messengerPage peg-messenger-profile-menu ul li:hover { background: var(--COLOR_supportDark_600); } #messengerPage peg-messenger-profile-menu ul li:not(.is-favorite) #removeFavoriteMessengerProfile { display: none; } #messengerPage peg-messenger-profile-menu ul li.is-favorite #removeFavoriteMessengerProfile { display: flex; } #messengerPage peg-messenger-profile-menu ul li.is-favorite #favoriteMessengerProfile { display: none; } #messengerPage peg-messenger-profile-menu ul li#imageUnreleaseButton { display: none; } #messengerPage peg-messenger-profile-menu ul li#imageUnreleaseButton.is-visible { display: flex; } #messengerPage peg-messenger-profile-menu ul li.is-contact #rejectContact { display: flex; } #messengerPage peg-messenger-profile-menu ul li.is-contact #rejectProfile { display: none; } #messengerPage peg-messenger-profile-menu ul li .wdk-button { display: flex; width: 100%; justify-content: flex-start; padding: 8px 14px; } #messengerPage peg-messenger-profile-menu ul li .wdk-button:hover { text-decoration: none; } #messengerPage peg-messenger-profile-menu ul li .wdk-button#reportProfile .wdk-icon { fill: var(--COLOR_alertError_100); } #messengerPage peg-messenger-profile-menu ul li .wdk-button#rejectContact { display: none; } #messengerPage #contactArea { display: flex; flex-direction: column; position: relative; min-width: 320px; width: 100%; transition: min-width 0.1s, max-width 0.1s; } @media only screen and (min-width: 768px) { #messengerPage #contactArea { max-width: 375px; border-right: 2px solid var(--COLOR_supportDark_600); } } #messengerPage #contactArea header { display: flex; align-items: center; height: 69px; padding-left: 24px; } @media only screen and (min-width: 980px) { #messengerPage #contactArea header { padding-left: 32px; } } #messengerPage #contactArea header h2 { display: inline-block; font: var(--FONT_highlight_100); color: var(--COLOR_primary_100); margin-top: 26px; } #messengerPage #contactArea header #refreshhView { margin-left: auto; font-size: 32px; color: var(--COLOR_primary_100); } #messengerPage #contactArea #contactList { position: relative; overflow-y: visible; display: grid; grid-template-rows: auto auto 1fr auto; } @media only screen and (min-width: 768px) { #messengerPage #contactArea #contactList { overflow-y: auto; flex-basis: 0; flex-grow: 1; -webkit-overflow-scrolling: touch; } } #messengerPage #contactArea #contactList .urcWrapper { margin-bottom: 0; overflow: initial; } #messengerPage #contactArea #contactList .urcWrapper img { max-height: 142px; } #messengerPage #contactArea #contactList .contactListWrapper .innerListWrapper { display: grid; } @media only screen and (min-width: 768px) { #messengerPage #contactArea #contactList .contactListWrapper .innerListWrapper { background: var(--COLOR_supportDark_600); } } #messengerPage #contactArea #contactList .contactListWrapper #hasMoreContacts { height: 50px; position: relative; } #messengerPage #contactArea #contactList .contactItem { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-gap: 16px; align-items: center; padding: 16px 20px; background-color: var(--COLOR_supportLight_100); text-decoration: none; border-bottom: 1px solid var(--COLOR_supportDark_050); } @media only screen and (min-width: 768px) { #messengerPage #contactArea #contactList .contactItem { min-width: 320px; max-width: 375px; } } @media only screen and (min-width: 980px) { #messengerPage #contactArea #contactList .contactItem { padding: 16px 28px; } } #messengerPage #contactArea #contactList .contactItem:last-of-type:not(:first-of-type) { border-bottom: none; } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper h2.primaryPartnerLabelRow { color: var(--COLOR_supportDark_100); margin: 0 0 4px 0; } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper h2.primaryPartnerLabelRow .wdk-icon { display: none; width: 18px; height: 18px; min-width: 18px; fill: var(--COLOR_supportDark_100); } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper h2.primaryPartnerLabelRow .primaryPartnerLabel { display: flex; align-items: center; gap: 8px; } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper h2.primaryPartnerLabelRow .myName { display: inline-block; max-width: 100%; font: var(--FONT_highlight_100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper h2.primaryPartnerLabelRow .newMatchBadge { font: var(--FONT_default_50); color: var(--COLOR_alertInfo_100); border-radius: var(--borderRadius_rounded); border: 1px solid var(--COLOR_alertInfo_100); padding: 0 6px 0 6px; height: 17px; display: flex; justify-content: center; align-items: center; white-space: nowrap; } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper .messageTextAndCount { display: flex; align-items: center; color: var(--COLOR_defaultText); font: var(--FONT_default_75); } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper .messageTextAndCount .messageText { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper .count { position: absolute; top: 50%; right: 24px; translate: 0 -50%; display: inline-block; min-width: 14px; height: 14px; background-color: var(--COLOR_primary_100); font: var(--FONT_highlight_50); border-radius: var(--borderRadius_200); color: var(--COLOR_supportLight_100); text-align: center; padding: 0 2px; } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper .yourTurnBadge { position: absolute; top: 50%; right: 24px; translate: 0 -50%; font: var(--FONT_default_50); color: var(--COLOR_decoration_200); border-radius: var(--borderRadius_rounded); border: 1px solid var(--COLOR_decoration_200); padding: 0 6px 0 6px; height: 17px; overflow: hidden; display: flex; justify-content: center; align-items: center; white-space: nowrap; opacity: 0; } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper .yourTurnBadge.fadeIn { display: flex !important; animation-name: activeContactYourTurnAni; animation-delay: 0.6s; animation-duration: 0.6s; animation-timing-function: ease; animation-fill-mode: forwards; } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper:has(.count) .messageTextAndCount .messageText { max-width: calc(100% - 20px); } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper:has(.count) h2.primaryPartnerLabelRow .myName { max-width: calc(100% - 20px); } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper:has(.count):has(.newMatchBadge) h2.primaryPartnerLabelRow .myName { max-width: calc(100% - 90px); } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper:has(.yourTurnBadge.fadeIn) .messageTextAndCount .messageText { max-width: calc(100% - 100px); } #messengerPage #contactArea #contactList .contactItem .contactInfoWrapper:has(.yourTurnBadge.fadeIn) .myName { max-width: calc(100% - 70px); } #messengerPage #contactArea #contactList .contactItem .photoWrapper { position: relative; display: flex; justify-content: center; } #messengerPage #contactArea #contactList .contactItem .photoWrapper .photoMask { position: relative; display: inline-block; width: 56px; height: 56px; overflow: hidden; border-radius: var(--borderRadius_circle); transition: box-shadow 0.2s; } @media only screen and (min-width: 768px) { #messengerPage #contactArea #contactList .contactItem .photoWrapper .photoMask:hover { box-shadow: 0 2px 10px 0 var(--COLOR_supportDark_080); } } #messengerPage #contactArea #contactList .contactItem .photoWrapper .photoMask .photo { display: block; width: 100%; height: 100%; object-fit: cover; } #messengerPage #contactArea #contactList .contactItem .photoWrapper .isOnline { position: absolute; bottom: 0; right: 5px; width: 16px; height: 16px; border: 2px solid var(--COLOR_supportLight_100); background-color: var(--COLOR_alertOnline_100); border-radius: var(--borderRadius_circle); z-index: 1; } #messengerPage #contactArea #contactList .contactItem .openRejectPartnerModal { position: absolute; top: 50%; right: 14px; translate: 0 -50%; z-index: 100; } #messengerPage #contactArea #contactList .contactItem:focus-visible { outline: 2px dashed currentcolor; outline-offset: -6px; } #messengerPage #contactArea #contactList .contactItem.dummy { justify-content: center; } #messengerPage #contactArea #contactList .contactItem.dummy .wdk-icon { position: absolute; right: 8px; } #messengerPage #contactArea #contactList .contactItem.is-loading::after { position: absolute; content: "" !important; top: inherit; bottom: inherit; right: 12px; padding: 0; background-color: var(--COLOR_supportLight_100); } .no-touchevents #messengerPage #contactArea #contactList .contactItem:not(.is-scammer):hover { background-color: var(--COLOR_supportLight_080); } #messengerPage #contactArea #contactList .contactItem.is-active:not(.is-loading) { background-color: rgba(0, 0, 0, 0); } #messengerPage #contactArea #contactList .contactItem.is-active:not(.is-loading)::after { display: none; } #messengerPage #contactArea #contactList .contactItem.is-active:not(.is-loading):hover { background-color: rgba(0, 0, 0, 0); } #messengerPage #contactArea #contactList .contactItem.is-active:not(.is-loading).has-newMessageReceived .contactInfoWrapper .count { animation-name: activeContactReceivesMessageAni; animation-duration: 1s; animation-timing-function: ease; animation-fill-mode: forwards; } #messengerPage #contactArea #contactList .contactItem:not(.is-active).has-newMessageReceived .contactInfoWrapper .count { animation-name: notActiveContactReceivesMessageAni; animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: forwards; } #messengerPage #contactArea #contactList .contactItem.is-scammer .messageTextAndCount, #messengerPage #contactArea #contactList .contactItem.is-deleted .messageTextAndCount, #messengerPage #contactArea #contactList .contactItem.is-inactive .messageTextAndCount, #messengerPage #contactArea #contactList .contactItem.rejectedByPartner .messageTextAndCount { color: var(--COLOR_supportDark_300); } #messengerPage #contactArea #contactList .contactItem.is-scammer .photoWrapper, #messengerPage #contactArea #contactList .contactItem.is-deleted .photoWrapper, #messengerPage #contactArea #contactList .contactItem.is-inactive .photoWrapper, #messengerPage #contactArea #contactList .contactItem.rejectedByPartner .photoWrapper { cursor: default; } #messengerPage #contactArea #contactList .contactItem.is-scammer .photoWrapper .photoMask:hover, #messengerPage #contactArea #contactList .contactItem.is-deleted .photoWrapper .photoMask:hover, #messengerPage #contactArea #contactList .contactItem.is-inactive .photoWrapper .photoMask:hover, #messengerPage #contactArea #contactList .contactItem.rejectedByPartner .photoWrapper .photoMask:hover { box-shadow: none; } #messengerPage #contactArea #contactList .contactItem.is-scammer .photoWrapper, #messengerPage #contactArea #contactList .contactItem.is-deleted .photoWrapper, #messengerPage #contactArea #contactList .contactItem.is-inactive .photoWrapper { opacity: 0.5; } #messengerPage #contactArea #contactList .contactItem.is-scammer .spamHint { font: var(--FONT_default_75); color: var(--COLOR_alertError_100); display: block; } #messengerPage #contactArea #contactList .contactItem.is-favorite .contactInfoWrapper h2.primaryPartnerLabelRow .myName { max-width: calc(100% - 20px); } #messengerPage #contactArea #contactList .contactItem.is-favorite .contactInfoWrapper h2.primaryPartnerLabelRow .wdk-icon { display: block; } #messengerPage #contactArea #contactList .contactItem.is-favorite .contactInfoWrapper:has(.yourTurnBadge.fadeIn) h2.primaryPartnerLabelRow .myName { max-width: calc(100% - 90px); } #messengerPage #contactArea #contactList .contactItem.is-matchUnlocked .photoWrapper .photoMask { padding: 2px; background: var(--COLOR_match_unlock_gradient_border); border: 2px solid rgba(0, 0, 0, 0); width: 64px; height: 64px; } #messengerPage #contactArea #contactList .contactItem.is-matchUnlocked .photoWrapper .photoMask .photo { border-radius: var(--borderRadius_circle); } #messengerPage #contactArea #contactList .contactItem.is-matchUnlocked .photoWrapper .photoMask .isOnline { bottom: 5px; right: 4px; } #messengerPage #contactArea #contactList .contactItem.is-visited .contactInfoWrapper h2 { color: var(--COLOR_defaultText); } #messengerPage #contactArea #contactList .contactItem.is-scammer .contactInfoWrapper h2.primaryPartnerLabelRow .primaryPartnerLabel, #messengerPage #contactArea #contactList .contactItem.is-deleted .contactInfoWrapper h2.primaryPartnerLabelRow .primaryPartnerLabel, #messengerPage #contactArea #contactList .contactItem.is-inactive .contactInfoWrapper h2.primaryPartnerLabelRow .primaryPartnerLabel, #messengerPage #contactArea #contactList .contactItem.rejectedByPartner .contactInfoWrapper h2.primaryPartnerLabelRow .primaryPartnerLabel { max-width: calc(100% - 24px); } #messengerPage #contactArea #contactList .contactItem.is-scammer.is-favorite .contactInfoWrapper h2.primaryPartnerLabelRow .primaryPartnerLabel, #messengerPage #contactArea #contactList .contactItem.is-deleted.is-favorite .contactInfoWrapper h2.primaryPartnerLabelRow .primaryPartnerLabel, #messengerPage #contactArea #contactList .contactItem.is-inactive.is-favorite .contactInfoWrapper h2.primaryPartnerLabelRow .primaryPartnerLabel, #messengerPage #contactArea #contactList .contactItem.rejectedByPartner.is-favorite .contactInfoWrapper h2.primaryPartnerLabelRow .primaryPartnerLabel { max-width: calc(100% - 42px); } @media only screen and (min-width: 768px) { #messengerPage #contactArea #contactList.has-noContacts { background-color: var(--COLOR_supportLight_100); } } #messengerPage #contactArea #contactList.has-noContacts .innerListWrapper { background: rgba(0, 0, 0, 0); } #messengerPage #contactArea #contactList.has-noContacts .emptyPlaceholderWrapper { margin-top: 20%; } #messengerPage #contactArea #contactList.has-noContacts .emptyPlaceholderWrapper .emptyPlaceholder { width: 100%; text-align: center; } #messengerPage #contactArea #contactList.has-noContacts .emptyPlaceholderWrapper .emptyPlaceholder img { height: 160px; opacity: 0.1; } @media only screen and (min-width: 768px) { #messengerPage #contactArea #contactList.has-noContacts h2 { margin-top: 20px; text-align: center; font: var(--FONT_default_300); color: var(--COLOR_supportDark_400); } } @keyframes activeContactYourTurnAni { 0% { opacity: 0; } 100% { opacity: 1; } } #messengerPage #newImagereleaseMessage .mainCol, #messengerPage #newImageunreleaseMessage .mainCol, #messengerPage #photoUploadTeaser .mainCol, #messengerPage #icebreakerPhotoUploadTeaser .mainCol { display: inline-block; width: 100%; } @media only screen and (min-width: 768px) { #messengerPage #newImagereleaseMessage .mainCol, #messengerPage #newImageunreleaseMessage .mainCol, #messengerPage #photoUploadTeaser .mainCol, #messengerPage #icebreakerPhotoUploadTeaser .mainCol { width: 82%; } } #messengerPage #newImagereleaseMessage .mainCol p, #messengerPage #newImageunreleaseMessage .mainCol p, #messengerPage #photoUploadTeaser .mainCol p, #messengerPage #icebreakerPhotoUploadTeaser .mainCol p { margin: 0; } #messengerPage #newImagereleaseMessage .mainCol p.lineOne, #messengerPage #newImageunreleaseMessage .mainCol p.lineOne, #messengerPage #photoUploadTeaser .mainCol p.lineOne, #messengerPage #icebreakerPhotoUploadTeaser .mainCol p.lineOne { margin-bottom: 15px; } #messengerPage #newImagereleaseMessage .imageCol, #messengerPage #newImageunreleaseMessage .imageCol, #messengerPage #photoUploadTeaser .imageCol, #messengerPage #icebreakerPhotoUploadTeaser .imageCol { display: none; width: 15%; text-align: center; vertical-align: top; margin-top: 10px; padding-left: 10px; } @media only screen and (min-width: 768px) { #messengerPage #newImagereleaseMessage .imageCol, #messengerPage #newImageunreleaseMessage .imageCol, #messengerPage #photoUploadTeaser .imageCol, #messengerPage #icebreakerPhotoUploadTeaser .imageCol { display: inline-block; } #messengerPage #newImagereleaseMessage .imageCol span, #messengerPage #newImageunreleaseMessage .imageCol span, #messengerPage #photoUploadTeaser .imageCol span, #messengerPage #icebreakerPhotoUploadTeaser .imageCol span { color: var(--COLOR_primary_100); } #messengerPage #newImagereleaseMessage .imageCol span::before, #messengerPage #newImageunreleaseMessage .imageCol span::before, #messengerPage #photoUploadTeaser .imageCol span::before, #messengerPage #icebreakerPhotoUploadTeaser .imageCol span::before { width: 70px; height: 70px; } } #messengerPage #newImagereleaseMessage .imageCol img, #messengerPage #newImageunreleaseMessage .imageCol img, #messengerPage #photoUploadTeaser .imageCol img, #messengerPage #icebreakerPhotoUploadTeaser .imageCol img { display: block; width: 80px; height: 80px; border-radius: var(--borderRadius_circle); } #messengerPage #getPremiumTeaser { background-color: var(--COLOR_premium_100); background-image: var(--COLOR_gradient_premium_100_45); } #messengerPage #getPremiumTeaser header h3 { margin-bottom: 0; } #messengerPage #getPremiumTeaser .getPremiumButtonRow { margin-top: 16px; text-align: center; } #messengerPage .emptyContactList { flex-grow: 1; align-self: center; text-align: center; padding: 40px 16px 0 16px; background-color: var(--COLOR_supportLight_100); } @media only screen and (min-width: 768px) { #messengerPage .emptyContactList { max-width: 400px; width: 100%; margin: 0; padding: 64px 0 0 0; background-color: rgba(0, 0, 0, 0); border-radius: initial; display: flex; flex-direction: column; } } #messengerPage .emptyContactList .imageWrapper { margin-bottom: 40px; display: flex; justify-content: center; align-items: center; } #messengerPage .emptyContactList .imageWrapper img { width: 184px; height: 184px; } @media only screen and (height <= 710px) { #messengerPage .emptyContactList .imageWrapper img { width: 124px; height: 124px; } } #messengerPage .emptyContactList h3 { font: var(--FONT_highlight_200); color: var(--COLOR_supportDark_100); margin-bottom: 16px; } #messengerPage .emptyContactList .infoText { font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); margin-bottom: 32px; } #messengerPage .emptyContactList .buttonWrapper { margin-bottom: 32px; } #messengerPage .emptyContactList wdk-hintbox { text-align: left; margin-bottom: 16px; } #messengerPage peg-footer .copyrightText { display: none; } @media only screen and (min-width: 768px) { html.ios #messengerPage #content #contactArea { height: 84vh; } } @media only screen and (min-width: 980px) { html.ios #messengerPage #content #contactArea { height: 80vh; } } html.ios #messengerPage #content #conversationArea #messagesList { overscroll-behavior: contain; } peg-photo-gallery-dialog dialog[open] { width: auto; aspect-ratio: 32/57; } peg-photo-gallery-dialog wdk-dialog-body-freestyle { width: 100%; } @media (max-width: 480px) { peg-photo-gallery-dialog dialog[open]::backdrop { background-color: #000; opacity: 0.9; } } @media only screen and (max-width: 480px) and (height >= 721px) { peg-photo-gallery-dialog dialog { display: flex; flex-direction: column; justify-content: center; } } peg-photo-gallery-dialog wdk-gallery { display: flex; width: 100%; height: 100%; flex-direction: column; border-radius: var(--borderRadius_100); } @media only screen and (min-width: 481px) { peg-photo-gallery-dialog wdk-gallery { background-color: var(--COLOR_tertiary_100); } } peg-photo-gallery-dialog wdk-gallery wdk-gallery-item { position: relative; overflow: hidden; height: auto; } @media only screen and (max-width: 480px) and (height >= 721px) { peg-photo-gallery-dialog wdk-gallery wdk-gallery-item { margin-top: 100px; height: calc(80dvh - 100px); } } @media only screen and (min-width: 481px) { peg-photo-gallery-dialog wdk-gallery wdk-gallery-item { height: auto; } } peg-photo-gallery-dialog wdk-gallery wdk-gallery-item .pictureWrapper { display: flex; position: relative; height: 100%; justify-content: center; } peg-photo-gallery-dialog wdk-gallery wdk-gallery-item .pictureWrapper .photo { display: flex; position: relative; width: 100%; height: 100%; justify-content: center; align-items: center; padding: 10px; } peg-photo-gallery-dialog wdk-gallery wdk-gallery-item .pictureWrapper .photo img { width: 100%; height: 100%; border-radius: var(--borderRadius_100); object-fit: cover; aspect-ratio: 2/3; } @media only screen and (min-width: 481px) { peg-photo-gallery-dialog wdk-gallery wdk-gallery-item .pictureWrapper .photo img { border-radius: calc(var(--borderRadius_100) - 6px); } } peg-photo-gallery-dialog wdk-gallery wdk-gallery-item .pictureWrapper .photo .icon_camera_badge { width: 28px; height: 28px; position: absolute; top: 8px; left: 12px; fill: var(--COLOR_supportLight_100); } peg-photo-gallery-dialog wdk-gallery wdk-gallery-item .pictureWrapper .text { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; padding: 12px 24px; font: var(--FONT_default_75); color: var(--COLOR_supportLight_100); text-align: center; margin: 10px; border-bottom-left-radius: var(--borderRadius_100); border-bottom-right-radius: var(--borderRadius_100); background-color: var(--COLOR_supportDark_080); } @media only screen and (min-width: 481px) { peg-photo-gallery-dialog wdk-gallery wdk-gallery-item .pictureWrapper .text { border-bottom-left-radius: calc(var(--borderRadius_100) - 6px); border-bottom-right-radius: calc(var(--borderRadius_100) - 6px); } } peg-photo-gallery-dialog wdk-gallery wdk-gallery-item peg-photo-mitigation-trigger { position: absolute; margin: 0 20px; bottom: 20px; width: calc(100% - 40px); left: 0; } peg-photo-gallery-dialog wdk-gallery .swiper-pagination { bottom: 40px; width: 100%; height: 20px; } @media (max-width: 480px) { peg-photo-gallery-dialog wdk-gallery .swiper-button-prev, peg-photo-gallery-dialog wdk-gallery .swiper-button-next { display: none; } } peg-photo-gallery-dialog wdk-gallery .swiper-button-prev, peg-photo-gallery-dialog wdk-gallery .swiper-button-next { position: absolute; z-index: 10; cursor: pointer; background: none; width: auto; height: auto; padding: 20px; text-decoration: none; } peg-photo-gallery-dialog wdk-gallery .swiper-button-prev:hover::after, peg-photo-gallery-dialog wdk-gallery .swiper-button-next:hover::after { background-color: var(--COLOR_supportLight_080); } peg-photo-gallery-dialog wdk-gallery .swiper-button-prev::after, peg-photo-gallery-dialog wdk-gallery .swiper-button-next::after { content: ""; display: block; background-color: var(--COLOR_supportLight_070); width: 30px; height: 56px; } peg-photo-gallery-dialog wdk-gallery .swiper-button-prev::before, peg-photo-gallery-dialog wdk-gallery .swiper-button-next::before { content: ""; display: block; position: absolute; top: 36px; color: var(--COLOR_defaultText); width: 16px; height: 16px; } peg-photo-gallery-dialog wdk-gallery .swiper-button-prev { left: 0; padding-left: 0; } peg-photo-gallery-dialog wdk-gallery .swiper-button-prev::after { border-top-right-radius: var(--borderRadius_75); border-bottom-right-radius: var(--borderRadius_75); } peg-photo-gallery-dialog wdk-gallery .swiper-button-prev::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_left_light.svg); mask-image: url(../../img/icons/single_color/icon_arrow_left_light.svg); vertical-align: -3px; background-color: var(--COLOR_supportDark_080); left: 5px; } peg-photo-gallery-dialog wdk-gallery .swiper-button-next { right: 0; padding-right: 0; } peg-photo-gallery-dialog wdk-gallery .swiper-button-next::after { border-top-left-radius: var(--borderRadius_75); border-bottom-left-radius: var(--borderRadius_75); } peg-photo-gallery-dialog wdk-gallery .swiper-button-next::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right_light.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right_light.svg); vertical-align: -3px; background-color: var(--COLOR_supportDark_080); right: 5px; } peg-photo-gallery-dialog wdk-gallery::part(galleryPager) { margin-bottom: 10px; } @media (max-width: 480px) { peg-photo-gallery-dialog wdk-gallery::part(pagerItem) { border-color: var(--COLOR_supportLight_080); } peg-photo-gallery-dialog wdk-gallery::part(pagerItemActive) { background-color: var(--COLOR_supportLight_080); border-color: var(--COLOR_supportLight_080); } } peg-photo-gallery-dialog wdk-gallery .premiumTeaserLink { position: absolute; bottom: 50px; left: 0; right: 0; text-decoration: none; z-index: 10; margin: 0 20px; } peg-photo-gallery-dialog wdk-gallery .premiumTeaserLink .teaser { display: flex; align-items: center; flex-direction: column; justify-content: center; height: auto; padding: 12px; color: var(--COLOR_supportLight_100); border-radius: calc(var(--borderRadius_100) - 6px); } @media only screen and (min-width: 481px) { peg-photo-gallery-dialog wdk-gallery .premiumTeaserLink .teaser { border-radius: calc(var(--borderRadius_100) - 8px); } } peg-photo-gallery-dialog wdk-gallery .premiumTeaserLink .teaser h4 { margin: 0 0 8px 0; } peg-photo-gallery-dialog wdk-gallery .premiumTeaserLink .teaser p { margin: 0; } peg-photo-gallery-dialog wdk-gallery .premiumTeaserLink .teaser.premium { background-image: var(--COLOR_gradient_premium_100_45); } peg-photo-gallery-dialog wdk-gallery .premiumTeaserLink .teaser.unlock { background-image: var(--COLOR_gradient_unlock_100_45); } peg-behavior-driven-nudges-dialog { --wdk-dialog-body-default-bg-color: var(--COLOR_tertiary_100); } peg-behavior-driven-nudges-dialog .nudgesContentWrapper { text-align: center; display: grid; grid-auto-rows: auto; gap: 8px; justify-items: center; } @media only screen and (min-width: 481px) { peg-behavior-driven-nudges-dialog .nudgesContentWrapper { gap: 24px; padding-top: 32px; } } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto { position: relative; width: 132px; height: 200px; border-radius: var(--borderRadius_100); overflow: hidden; } @media (min-width: 0) and (max-width: 320px) { peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto { width: 66px; height: 100px; } } @media (min-width: 321px) and (max-width: 375px) { peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto { width: 99px; height: 150px; } } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto img { width: 100%; height: 100%; object-fit: cover; } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto .contentOverlay { position: absolute; z-index: 10; width: 100%; padding: 16px 8px; bottom: 0; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 10, 0.06) 16%, rgba(0, 0, 10, 0.17) 33%, rgba(0, 0, 10, 0.32) 51%, rgba(0, 0, 10, 0.42) 68%, rgba(0, 0, 10, 0.45) ); } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto .contentOverlay .userName { font: var(--FONT_highlight_100); color: var(--COLOR_supportLight_100); padding-bottom: 4px; text-align: left; } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto .contentOverlay .userName span { display: block; } @media (min-width: 0) and (max-width: 320px) { peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto .contentOverlay .userName::before { content: "..."; font: var(--FONT_highlight_200); position: relative; top: 6px; } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto .contentOverlay .userName span { display: none; } } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto .contentOverlay .textSkeleton { display: flex; gap: 4px; } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper .dummyPhoto .contentOverlay .textSkeleton span { display: block; width: 22px; height: 9px; background-color: var(--COLOR_supportLight_100); opacity: 0.16; border-radius: 8px; } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper wdk-lottie-animation { width: 100px; height: 100px; } @media only screen and (min-width: 375px) { peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper wdk-lottie-animation { width: 150px; height: 150px; } } @media only screen and (min-width: 429px) { peg-behavior-driven-nudges-dialog .nudgesContentWrapper .visualWrapper wdk-lottie-animation { width: 200px; height: 200px; } } peg-behavior-driven-nudges-dialog .nudgesContentWrapper h2 { font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } peg-behavior-driven-nudges-dialog .nudgesContentWrapper p { font: var(--FONT_default_100); margin: 0 0 3px 0; padding: 0; } peg-behavior-driven-nudges-dialog .nudgesContentWrapper .buttonWrapper { display: grid; grid-auto-rows: auto; gap: 8px; justify-items: center; margin-top: 54px; } peg-profile-completeness-dialog { --wdk-dialog-body-default-bg-color: var(--COLOR_tertiary_100); } peg-profile-completeness-dialog .messagingNotAllowedReasonWrapper { text-align: center; display: grid; grid-auto-rows: auto; gap: 8px; justify-items: center; } @media only screen and (min-width: 481px) { peg-profile-completeness-dialog .messagingNotAllowedReasonWrapper { gap: 24px; padding-top: 32px; } } peg-profile-completeness-dialog .messagingNotAllowedReasonWrapper .visualWrapper wdk-lottie-animation { width: 100px; height: 100px; } @media only screen and (min-width: 375px) { peg-profile-completeness-dialog .messagingNotAllowedReasonWrapper .visualWrapper wdk-lottie-animation { width: 150px; height: 150px; } } @media only screen and (min-width: 429px) { peg-profile-completeness-dialog .messagingNotAllowedReasonWrapper .visualWrapper wdk-lottie-animation { width: 200px; height: 200px; } } peg-profile-completeness-dialog .messagingNotAllowedReasonWrapper h2 { font: var(--FONT_brand_100); font-style: var(--FONT_style_brand); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } peg-profile-completeness-dialog .messagingNotAllowedReasonWrapper p { font: var(--FONT_default_100); margin: 1px 0; padding: 0; } peg-profile-completeness-dialog .messagingNotAllowedReasonWrapper .buttonWrapper { display: grid; grid-auto-rows: auto; gap: 8px; justify-items: center; margin-top: 54px; } #appShellContent peg-pp-like-element .likeIt { place-self: flex-end flex-end; } #appShellContent peg-pp-like-element .likeIt.t-outlineSkin2 { border-width: 0; } #appShellContent peg-pp-like-element .likeIt .icon { width: 20px; height: 20px; } #appShellContent peg-pp-like-element .likeIt .icon .wdk-icon { width: 20px; height: 20px; fill: rgba(0, 0, 0, 0); stroke: var(--COLOR_defaultText); stroke-width: 1.6px; } #appShellContent peg-pp-like-element .likeIt[disabled], #appShellContent peg-pp-like-element .likeIt:disabled, #appShellContent peg-pp-like-element .likeIt.is-disabled { opacity: 1; cursor: default; } #appShellContent peg-pp-like-element .likeIt.is-liked { cursor: default; pointer-events: none; } #appShellContent peg-pp-like-element .likeIt.is-liked .icon .wdk-icon { fill: var(--COLOR_defaultText); transition: fill 0.3s; } #appShellContent peg-pp-like-element .likeIt.is-liked:hover { opacity: 1; background-color: rgba(0, 0, 0, 0); } #appShellContent peg-pp-like-element .likeIt.is-animated { animation: like 0.4s ease-in-out forwards; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity { position: absolute; z-index: 10; top: 0; left: 0; border-radius: var(--borderRadius_200); width: 100%; height: 100%; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity .icon, #appShellContent peg-pp-like-element .likeIt.likeSimilarity .text { opacity: 0; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity .icon { position: absolute; margin: 0; z-index: 1; top: -20px; right: -20px; width: 62px; height: 55px; display: inline-block; background-image: url("../../img/cloud.svg"); background-size: cover; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity .icon .wdk-icon { width: 14px; height: 14px; position: absolute; top: 15px; right: 21px; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity .icon .lottiAnimation { top: calc(50% + 3px); left: calc(50% + 3px); width: 56px; height: 56px; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity .icon .lottiAnimation wdk-lottie-animation { width: 42px; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity.is-visible .icon, #appShellContent peg-pp-like-element .likeIt.likeSimilarity.is-visible .text { opacity: 1; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity.is-loading { background-color: var(--COLOR_supportLight_100); opacity: 1; overflow: hidden; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity.is-loading .icon { opacity: 0 !important; } #appShellContent peg-pp-like-element .likeIt.likeSimilarity.is-liked .icon { opacity: 1; } #appShellContent peg-pp-like-element .likeIt#likeProfile:not([show-single-profile-discovery-enabled]) { width: 56px; height: 56px; } @media only screen and (min-width: 481px) { #appShellContent peg-pp-like-element .likeIt#likeProfile:not([show-single-profile-discovery-enabled]) { width: 48px; height: 48px; } } @media only screen and (min-width: 768px) { #appShellContent peg-pp-like-element .likeIt#likeProfile:not([show-single-profile-discovery-enabled]) { width: initial; height: 48px; } } #appShellContent peg-pp-like-element .likeIt#likeProfile:not([show-single-profile-discovery-enabled]) .icon { margin-right: 0; } @media only screen and (min-width: 768px) { #appShellContent peg-pp-like-element .likeIt#likeProfile:not([show-single-profile-discovery-enabled]) .icon { margin-right: 8px; } } #appShellContent peg-pp-like-element .likeIt#likeProfile[show-single-profile-discovery-enabled] { width: 100%; } #appShellContent peg-pp-like-element .likeIt#likeProfile .icon { width: 24px; height: 24px; } #appShellContent peg-pp-like-element .likeIt#likeProfile .icon .wdk-icon { width: 24px; height: 24px; stroke: var(--COLOR_supportLight_100); fill: rgba(0, 0, 0, 0); } #appShellContent peg-pp-like-element .likeIt#likeProfile:not([show-single-profile-discovery-enabled]) .text { display: none; } @media only screen and (min-width: 768px) { #appShellContent peg-pp-like-element .likeIt#likeProfile:not([show-single-profile-discovery-enabled]) .text { display: block; } } @media (max-width: 480px) { #appShellContent peg-pp-like-element .likeIt#likeProfile.is-liked { visibility: hidden; } } #appShellContent peg-pp-like-element .likeIt#likeProfile.is-liked .icon .wdk-icon { fill: var(--COLOR_supportLight_100); } #appShellContent peg-pp-like-element .likeIt#likeProfile.likeFeaturedProfile { width: initial; height: 48px; } #appShellContent peg-pp-like-element .likeIt#likeProfile.likeFeaturedProfile .icon { margin-right: 8px; } #appShellContent peg-pp-like-element .likeIt#likeProfile.likeFeaturedProfile .icon .wdk-icon { stroke: var(--COLOR_primary_100); } #appShellContent peg-pp-like-element .likeIt#likeProfile.likeFeaturedProfile .text { display: block; } @media (max-width: 480px) { #appShellContent peg-pp-like-element .likeIt#likeProfile.likeFeaturedProfile.is-liked { visibility: visible; } } #appShellContent peg-pp-like-element .likeIt#likeProfile.likeFeaturedProfile.is-liked .icon .wdk-icon { fill: var(--COLOR_primary_100); } #appShellContent peg-pp-like-element .likeIt.likeHighlight .icon .wdk-icon { stroke: var(--COLOR_supportLight_100); fill: rgba(0, 0, 0, 0); } #appShellContent peg-pp-like-element .likeIt.likeHighlight.is-liked .icon .wdk-icon { fill: var(--COLOR_supportLight_100); } @keyframes like { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } peg-reaction-and-comment { height: 100%; } @media only screen and (min-width: 481px) { peg-reaction-and-comment { padding: 18px 16px 16px 16px; } } peg-reaction-and-comment article { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 8px; overflow: hidden; } peg-reaction-and-comment #messagingErrors .wdk-styledHintBox.t-error.is-visible { margin-bottom: 16px; } peg-reaction-and-comment .reactionContent { width: 100%; } @media (max-width: 480px) { peg-reaction-and-comment .reactionContent { display: flex; flex-direction: column; justify-content: center; } } peg-reaction-and-comment .reactionContent h2 { margin: 0 32px 12px 32px; font: var(--FONT_highlight_200); color: var(--COLOR_supportDark_200); text-align: center; } @media only screen and (min-width: 481px) { peg-reaction-and-comment .reactionContent h2 { margin: 0 32px 22px 32px; } } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper { flex-grow: 1; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; place-items: center center; justify-content: center; overflow: auto; height: calc(100dvh - 280px); } @media only screen and (min-width: 481px) { peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper { min-height: calc(55dvh - 280px); max-height: calc(80dvh - 280px); height: auto; } } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.lifestyleItems .contentForReactionAndComment { width: calc(100% - 80px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment { position: relative; width: calc(100% - 80px); margin: 0 40px; } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment img { width: 100%; aspect-ratio: 2/3; border-radius: var(--borderRadius_100); } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment .contentWrapper { position: absolute; display: flex; left: 0; right: 0; bottom: 45px; height: 134px; margin: 0 24px; flex-direction: column; justify-content: center; } @media only screen and (width <= 375px) { peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment .contentWrapper { bottom: 35px; } } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment .contentWrapper h4 { font: var(--FONT_default_75); text-transform: uppercase; color: var(--COLOR_defaultText); text-align: center; margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment .contentWrapper p { font: var(--FONT_highlight_300); color: var(--COLOR_defaultText); text-align: center; margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.compatibilityInsight peg-compatibility-insight-card { overflow: visible; } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .textWrapper { width: calc(100% - 80px); margin: 0 40px; border-radius: var(--borderRadius_100); border: 2px solid var(--COLOR_supportDark_600); padding: 24px; } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .textWrapper h4 { font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); margin: 0 0 12px 0; } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .textWrapper p { font: var(--FONT_deco_100); font-style: var(--FONT_style_deco); margin: 0; } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper #photoBox, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .photoWrapper { max-width: 245px; margin: 0 auto; } peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper #photoBox img, peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .photoWrapper img { border-radius: 20px; aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; } peg-reaction-and-comment .hintContainer { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 0 16px; color: var(--COLOR_primary_100); font: var(--FONT_default_50); } @media only screen and (min-width: 481px) { peg-reaction-and-comment .hintContainer { font: var(--FONT_default_75); } } peg-reaction-and-comment .hintContainer .lottiWrapper { width: 24px; height: 27px; } peg-reaction-and-comment .hintContainer .textWrapper span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } peg-reaction-and-comment .textAreaWrapper { min-height: 98px; width: 100%; } peg-reaction-and-comment .wdk-styledHintBox.has-closingX a.closeX { position: absolute; top: -2px; right: 32px; } peg-reaction-and-comment .wdk-styledHintBox.has-closingX .textWrapper { padding-right: 39px; } peg-reaction-and-comment:has(.wdk-styledHintBox.t-error.is-visible) .reactionContent .reactionAndCommentContentWrapper { height: calc(100dvh - 380px); } peg-reaction-and-comment-dialog #matchUnlockConfetti { position: fixed; display: flex; justify-content: center; inset: 0 0 0 0; z-index: 211; } peg-reaction-and-comment-dialog #matchUnlockConfetti wdk-lottie-animation { width: 100%; } #writeReactionLikeSuccess[visible], #writeReactionTextSuccess[visible] { bottom: 112px; } #bottomsheetMessenger #conversationArea { display: none; height: calc(100% - 12px); border-top-left-radius: var(--borderRadius_100); border-top-right-radius: var(--borderRadius_100); } #bottomsheetMessenger #conversationArea.is-visible { display: flex !important; } @media only screen and (min-width: 481px) { #bottomsheetMessenger #conversationArea { border-top-left-radius: initial; border-top-right-radius: initial; } } @media only screen and (min-width: 768px) { #bottomsheetMessenger #conversationArea { display: none; } } #bottomsheetMessenger #conversationArea header { z-index: 220; } #bottomsheetMessenger #conversationArea header .backToContacts, #bottomsheetMessenger #conversationArea header .headerActions { display: none !important; } #bottomsheetMessenger #conversationArea header a#conversationHeader { pointer-events: none; margin-left: 24px; } #bottomsheetMessenger #conversationArea #messagesList { background-color: var(--COLOR_supportLight_100); } #bottomsheetMessenger #conversationArea #emptyLoader { margin-top: 50%; } #bottomsheetMessenger.has-keyboardVisible .emptyChatContainer { opacity: 0; transition: opacity 0.3s; } @media only screen and (min-width: 481px) { #bottomsheetMessenger.has-keyboardVisible .emptyChatContainer { opacity: 1; transition: none; } } #genericMessagingNotAllowedModalbox .wdk-styledHintBox { background-color: rgba(0, 0, 0, 0); font: var(--FONT_default_100); } #genericMessagingNotAllowedModalbox .wdk-styledHintBox .wdk-icon { display: none; } #genericMessagingNotAllowedModalbox .wdk-styledHintBox .textWrapper { padding-left: 0; color: var(--COLOR_defaultText); } #bottomsheetMessenger { --header-margin: -5%; } #bottomsheetMessenger #animationContent { backface-visibility: hidden; position: absolute; overflow: hidden; width: 102%; height: 102%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1200; opacity: 1; background-color: var(--COLOR_supportLight_100); } @media (max-width: 480px) { #bottomsheetMessenger #animationContent { height: 100vh; position: fixed; bottom: 0; top: auto; left: auto; transform: initial; } } #bottomsheetMessenger #animationContent .heartContainer { display: flex; position: absolute; left: 50%; top: 50%; opacity: 1; animation-timing-function: ease-out; } @media (max-width: 480px) { #bottomsheetMessenger #animationContent .heartContainer { position: fixed; } } #bottomsheetMessenger #animationContent .heartContainer .icon_heart_like_filled { fill: var(--COLOR_primary_100); height: 3400px; width: 3400px; } #bottomsheetMessenger #animationContent .header { opacity: 0; font: var(--FONT_brand_400); color: var(--COLOR_supportLight_100); width: 100%; height: 50%; align-items: flex-end; display: flex; justify-content: center; text-align: center; } #bottomsheetMessenger #animationContent .pictures { display: flex; height: 50%; width: 100%; justify-content: center; align-items: flex-start; position: absolute; top: 45%; } #bottomsheetMessenger #animationContent .pictures .photo.isMatchUnlocked::after { border-bottom-right-radius: var(--borderRadius_100); border-bottom-left-radius: var(--borderRadius_100); content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: var(--COLOR_gradient_unlock_150_0_fade); opacity: 0.7; } #bottomsheetMessenger #animationContent .pictures .photo.myPic { transform: translate(-500px, 100px) rotate(-15deg); opacity: 0; } #bottomsheetMessenger #animationContent .pictures .photo.partnerPic { transform: translate(500px, 100px) rotate(15deg); opacity: 0; } #bottomsheetMessenger #animationContent .pictures .photo img { display: block; height: 165px; width: 130px; box-shadow: var(--boxShadow_small); border-radius: var(--borderRadius_100); object-fit: cover; } @media only screen and (min-width: 768px) { #bottomsheetMessenger #animationContent .pictures .photo img { height: 185px; width: 145px; } } #bottomsheetMessenger #animationContent .pictures .photo::before { content: ""; position: absolute; display: block; inset: 0 0 0 0; border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_100); z-index: 2; } #bottomsheetMessenger #animationContent.is-animating .heartContainer { will-change: transform, opacity, height, width, scale; } #bottomsheetMessenger #animationContent.is-animating .heartContainer .icon_heart_like_filled { will-change: transform, opacity, height, width, scale; animation: heart 3.5s forwards; } #bottomsheetMessenger #animationContent.is-animating .header { animation: header 3.5s ease-out forwards; } #bottomsheetMessenger #animationContent.is-animating .myPic { will-change: transform, scale; animation: myPicFlyIn 3.5s forwards; } #bottomsheetMessenger #animationContent.is-animating .partnerPic { will-change: transform; animation: partnerPicFlyIn 3.5s forwards; } @keyframes myPicFlyIn { 0% { transform: translate(-500px, 100px) rotate(-15deg); opacity: 0; animation-timing-function: cubic-bezier(0.8, 0.14, 0.31, 0.88); } 45% { transform: translate(6px, 0) rotate(-3deg); opacity: 1; animation-timing-function: ease-out; } 50% { transform: translate(4px, 0) rotate(-3deg); opacity: 1; animation-timing-function: ease-out; } 60%, 85% { transform: translate(0, 0) rotate(-3deg); opacity: 1; } 100% { opacity: 0; transform: translate(50px, 0) rotate(-3deg) scale(0); } } @keyframes partnerPicFlyIn { 0% { transform: translate(500px, 100px) rotate(15deg); opacity: 0; animation-timing-function: cubic-bezier(0.8, 0.14, 0.31, 0.88); } 45% { transform: translate(-6px, 0) rotate(3deg); opacity: 1; animation-timing-function: ease-out; } 50% { transform: translate(-4px, 0) rotate(3deg); opacity: 1; animation-timing-function: ease-out; } 60%, 85% { transform: translate(0, 0) rotate(3deg); opacity: 1; } 100% { opacity: 0; transform: translate(-50px, 0) rotate(3deg) scale(0); } } @keyframes header { 0%, 10% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20%, 25% { opacity: 1; transform: translate(0, 0) scale(1); } 45% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.75); } 50% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.77); } 60%, 85% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.75); } 100% { transform: translate(0, 50%) scale(0); opacity: 0; } } @keyframes heart { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.15); } 40%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); background-color: rgba(0, 0, 0, 0); } } .matchRequestPages #pageWrapper { padding-top: 60px; } @media only screen and (min-width: 768px) { .matchRequestPages #pageWrapper { padding-top: 112px; } } .matchRequestPages #pageWrapper #pageHeader::after { display: none; } .matchRequestPages #pageWrapper #pageHeader.is-scrolled::before { display: none; } .matchRequestPages section.wdk-cardDeck { display: flex; flex-direction: column; } .matchRequestPages section.wdk-cardDeck .primaryCol { flex-grow: 1; display: flex; flex-direction: column; } .matchRequestPages section.wdk-cardDeck article.wdk-card { flex-grow: 1; } .matchRequestPages section.wdk-cardDeck article.wdk-card:has(.emptyRequestList) { grid-template-rows: 1fr; } .matchRequestPages section.wdk-cardDeck article.wdk-card .emptyRequestList { display: flex; justify-content: flex-end; flex-direction: column; max-width: 540px; margin: 0 auto; text-align: center; color: var(--COLOR_defaultText); } .matchRequestPages section.wdk-cardDeck article.wdk-card .emptyRequestList .imageWrapper { margin-bottom: 40px; display: flex; justify-content: center; align-items: center; } .matchRequestPages section.wdk-cardDeck article.wdk-card .emptyRequestList .imageWrapper img { width: 184px; height: 184px; } @media only screen and (height <= 710px) { .matchRequestPages section.wdk-cardDeck article.wdk-card .emptyRequestList .imageWrapper img { width: 124px; height: 124px; } } .matchRequestPages section.wdk-cardDeck article.wdk-card .emptyRequestList h3 { font: var(--FONT_highlight_200); color: var(--COLOR_supportDark_100); margin-bottom: 16px; } .matchRequestPages section.wdk-cardDeck article.wdk-card .emptyRequestList .infoText { font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); margin-bottom: 32px; } .matchRequestPages section.wdk-cardDeck article.wdk-card .emptyRequestList .buttonWrapper { flex-grow: 1; margin-bottom: 32px; } .matchRequestPages section.wdk-cardDeck article.wdk-card .emptyRequestList wdk-hintbox { text-align: left; margin-bottom: 0; } .matchRequestPages section.wdk-cardDeck article.wdk-card.t-noBorder { margin-bottom: 24px; } .matchRequestPages#outgoingMatchRequestPage section.wdk-cardDeck .primaryCol { grid-template-rows: auto 1fr; } .matchRequestPages#outgoingMatchRequestPage #goToPageWrapper { padding-bottom: 12px; padding-left: 18px; } @media only screen and (min-width: 980px) { .matchRequestPages#outgoingMatchRequestPage #goToPageWrapper { padding-left: 0; } } .matchRequestPages#outgoingMatchRequestPage .outgoingMatchHintBox { margin: 40px auto 0 auto; color: var(--COLOR_supportDark_300); font: var(--FONT_default_75); } @media only screen and (min-width: 481px) { .matchRequestPages#outgoingMatchRequestPage .outgoingMatchHintBox { margin: 40px auto 16px auto; } } .matchRequestPages#outgoingMatchRequestPage .outgoingMatchHintBox .contentWrapper { border-radius: var(--borderRadius_75); border: 1px solid var(--COLOR_supportDark_500); padding: 16px; display: flex; justify-content: center; flex-direction: column; } .matchRequestPages#outgoingMatchRequestPage .outgoingMatchHintBox h4 { font: var(--FONT_highlight_75); } @media only screen and (min-width: 768px) { .matchRequestPages#incomingMatchRequestPage #pageWrapper { padding-top: 122px; } } .matchRequestPages#incomingMatchRequestPage section.wdk-cardDeck header.cardDeckHeaderOutsideOfCards { display: grid; width: 100%; align-items: center; gap: 16px; grid-template-columns: 1fr minmax(150px, auto); } .matchRequestPages#incomingMatchRequestPage section.wdk-cardDeck header.cardDeckHeaderOutsideOfCards h2 { word-break: normal; } .matchRequestPages#incomingMatchRequestPage section.wdk-cardDeck header.cardDeckHeaderOutsideOfCards #goToOutgoingPage .wdk-button { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .matchRequestPages#incomingMatchRequestPage section.wdk-cardDeck header.cardDeckHeaderOutsideOfCards #goToOutgoingPage .wdk-button .text { overflow: hidden; text-overflow: ellipsis; } .matchRequestPages#incomingMatchRequestPage section.wdk-cardDeck header.cardDeckHeaderOutsideOfCards #goToOutgoingPage .wdk-icon.icon_outgoing { width: 20px; height: 20px; } @media only screen and (min-width: 481px) { .matchRequestPages#incomingMatchRequestPage section.wdk-cardDeck header.cardDeckHeaderOutsideOfCards #goToOutgoingPage .wdk-icon.icon_outgoing { width: 18px; height: 18px; } } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumTopTeaser { margin-bottom: 24px; display: flex; flex-direction: row; gap: 24px; align-items: center; padding: 16px; background-image: var(--COLOR_gradient_premium_100_90_alpha); border-radius: var(--borderRadius_75); } @media only screen and (min-width: 768px) { .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumTopTeaser { margin-bottom: 32px; padding: 32px; } } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumTopTeaser .linkOverlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumTopTeaser .textWrapper { flex-grow: 1; font: var(--FONT_highlight_75); background-image: var(--COLOR_gradient_premium_100_90); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); } @media only screen and (min-width: 768px) { .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumTopTeaser .textWrapper { font: var(--FONT_highlight_200); } } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumTopTeaser .wdk-icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; fill: var(--COLOR_premium_300); } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser { grid-row: 5; border-radius: var(--borderRadius_75); background-image: linear-gradient(90deg, #ef6054 0%, #f89637 100%); margin-bottom: 56px; padding: 24px 16px; } @media only screen and (min-width: 768px) { .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser { padding: 32px; margin-bottom: 32px; } } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .linkOverlay { position: absolute; inset: 0 0 0 0; z-index: 10; } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent { display: flex; flex-direction: column; align-items: center; gap: 24px; } @media only screen and (min-width: 768px) { .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent { flex-direction: row; } } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .contentWrapper { flex-grow: 1; } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .contentWrapper h3 { margin: 16px 0; font: var(--FONT_highlight_200); } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .contentWrapper .bulletpoints { font: var(--FONT_default_50); margin-bottom: 0; } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .contentWrapper .discountBox { display: inline-block; padding: 6px 12px; border-radius: var(--borderRadius_200); background-color: var(--COLOR_supportLight_100); } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .contentWrapper .discountBox .discountText { display: flex; align-items: center; font: var(--FONT_highlight_100); } @media only screen and (min-width: 768px) { .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .contentWrapper .discountBox .discountText { font: var(--FONT_highlight_200); } } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .contentWrapper .discountBox .discountText small { font: var(--FONT_default_75); background: var(--COLOR_premium_100); background-image: var(--COLOR_gradient_premium_200); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .contentWrapper .discountBox .discountText span { padding: 0 8px; background: var(--COLOR_premium_100); background-image: var(--COLOR_gradient_premium_200); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); } .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .contentWrapper .discountBox .discountText br { display: none; } @media (max-width: 480px) { .matchRequestPages#incomingMatchRequestPage .wdk-premiumElement#imrlPremiumBetweenTeaser .premiumContent .buttonsWrapper { position: relative; top: 46px; display: flex; flex-direction: column; align-items: center; margin-top: -46px; } } .matchRequestPages peg-omrlist { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } @media only screen and (min-width: 768px) { .matchRequestPages peg-omrlist { grid-template-columns: 1fr 1fr 1fr; } } .matchRequestPages peg-omrlist .buttonWrapper { grid-column: 1/-1; display: flex; justify-content: center; } .matchRequestPages peg-omrlist .buttonWrapper .wdk-button#loadMore { margin-top: 24px; } .matchRequestPages peg-omrlist-item { aspect-ratio: 1/1; position: relative; border-radius: var(--borderRadius_100); background-color: var(--COLOR_supportDark_040); min-height: 80px; overflow: hidden; } .matchRequestPages peg-omrlist-item::after { content: ""; display: block; padding-bottom: 100%; } .matchRequestPages peg-omrlist-item .itemContent { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .matchRequestPages peg-omrlist-item .itemContent .partnerLink { position: absolute; width: 100%; height: 100%; z-index: 11; } .matchRequestPages peg-omrlist-item .itemContent .photoWrapper { width: 100%; height: 100%; } .matchRequestPages peg-omrlist-item .itemContent .photoWrapper .photo { display: block; width: 100%; height: 100%; object-fit: cover; } .matchRequestPages peg-omrlist-item .itemContent .itemFooter { position: absolute; bottom: 0; left: 0; width: 100%; min-height: 80%; display: flex; align-items: flex-end; color: var(--COLOR_supportLight_100); z-index: 12; pointer-events: none; } .matchRequestPages peg-omrlist-item .itemContent .itemFooter h3 { display: flex; z-index: 1; gap: 4px; padding: 12px 16px; margin: 0; width: 100%; } @media only screen and (min-width: 481px) { .matchRequestPages peg-omrlist-item .itemContent .itemFooter h3 { padding: 24px; } } .matchRequestPages peg-omrlist-item .itemContent .itemFooter h3 .primaryPartnerLabel { font: var(--FONT_highlight_100); overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap; } @media only screen and (min-width: 481px) { .matchRequestPages peg-omrlist-item .itemContent .itemFooter h3 .primaryPartnerLabel { font: var(--FONT_highlight_300); } } .matchRequestPages peg-omrlist-item .itemContent .itemFooter h3 .age { font: var(--FONT_default_100); } @media only screen and (min-width: 481px) { .matchRequestPages peg-omrlist-item .itemContent .itemFooter h3 .age { font: var(--FONT_default_300); } } .matchRequestPages peg-omrlist-item .itemContent .itemFooter::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 10, 0.06) 16%, rgba(0, 0, 10, 0.17) 33%, rgba(0, 0, 10, 0.32) 51%, rgba(0, 0, 10, 0.42) 68%, rgba(0, 0, 10, 0.45) ); } .matchRequestPages peg-omrlist-item.is-unlockedUser .itemContent .itemFooter::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background-image: var(--COLOR_gradient_unlock_150_0_fade); opacity: 0.7; } .matchRequestPages peg-imrlist { display: grid; } .matchRequestPages peg-imrlist peg-imrlist-loadmore-button { display: flex; justify-content: center; } .matchRequestPages peg-imrlist peg-imrlist-loadmore-button .wdk-button { margin-top: 16px; margin-bottom: 40px; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist peg-imrlist-loadmore-button .wdk-button { margin-top: 4px; } } .matchRequestPages peg-imrlist peg-imrlist-reset-button { position: fixed; top: 58px; left: 0; z-index: 14; width: 100%; display: flex; justify-content: center; opacity: 1; animation: bounce2 2s ease; transition: transform 0.6s 0.8s; } @media only screen and (min-width: 768px) { .matchRequestPages peg-imrlist peg-imrlist-reset-button { top: 114px; } } .matchRequestPages peg-imrlist peg-imrlist-reset-button.fadeOut { transform: translate3d(0, -48px, 0); transition: transform 0.6s 0.3s; } .matchRequestPages peg-imrlist wdk-hintbox { margin-bottom: 32px; height: fit-content; } @media only screen and (min-width: 980px) { .matchRequestPages peg-imrlist wdk-hintbox { margin-bottom: 24px; } } @keyframes bounce2 { 0%, 20%, 50%, 80%, 100% { opacity: 1; transform: translateY(0); } 40% { opacity: 0.5; transform: translateY(-30px); } 60% { opacity: 0.7; transform: translateY(-15px); } } .matchRequestPages peg-imrlist-item { position: relative; border-radius: var(--borderRadius_100); background-color: var(--COLOR_supportLight_100); max-height: 100%; opacity: 1; transition: opacity 0.6s, max-height 0.1s 0.8s; margin-bottom: 28px; } .matchRequestPages peg-imrlist-item:last-of-type { margin-bottom: 40px; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item { margin-bottom: 12px; } .matchRequestPages peg-imrlist-item:last-of-type { margin-bottom: 40px; } } .matchRequestPages peg-imrlist-item .cardLoader.is-loading { position: absolute; z-index: 1; inset: 0 0 0 0; align-items: center; justify-content: center; background: var(--COLOR_supportDark_050); margin-bottom: 20px; border-radius: var(--borderRadius_100); } .matchRequestPages peg-imrlist-item.is-notInViewport .wdk-card.incomingMatchRequestItem { min-height: 513px; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item.is-notInViewport .wdk-card.incomingMatchRequestItem { min-height: 364px; } } .matchRequestPages peg-imrlist-item.is-notInViewport .wdk-card.incomingMatchRequestItem > * { display: none; } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem { position: relative; width: 100%; margin: 0 0 26px 0; box-shadow: var(--boxShadow_mid); border-radius: var(--borderRadius_100); } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem { display: grid; grid-template-columns: minmax(138px, 304px) minmax(319px, 596px); grid-template-rows: auto 1fr auto; column-gap: 32px; box-shadow: none; padding: 20px 20px 0 20px; border-radius: var(--borderRadius_100); border: solid 10px var(--COLOR_supportDark_600); margin: 0 0 20px 0; } } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper { grid-column: 1; grid-row: 1 / span 3; padding-bottom: 20px; } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper .photo { position: relative; width: 100%; height: 327px; border-top-right-radius: var(--borderRadius_100); border-top-left-radius: var(--borderRadius_100); overflow: hidden; background: var(--COLOR_supportDark_500); } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper .photo { border-radius: var(--borderRadius_75); height: initial; } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper .photo span.promotedUpgradeOptionTrigger, .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper .photo .partnerLink { cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper .photo img, .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper .photo svg { border-top-right-radius: var(--borderRadius_100); border-top-left-radius: var(--borderRadius_100); display: inline; width: 100%; height: 327px; object-fit: cover; content-visibility: initial; aspect-ratio: 1/1; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper .photo img, .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper .photo svg { border-radius: var(--borderRadius_75); height: auto; display: block; } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .photoWrapper .photo .wdk-button { position: absolute; top: 16px; left: 16px; z-index: 12; } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper { position: absolute; width: 100%; height: 327px; top: 0; left: 0; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper { position: initial; height: initial; } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo { align-items: center; width: 100%; height: 100%; padding: 16px 16px 38px 16px; color: var(--COLOR_supportLight_100); display: grid; grid-template-rows: 1fr auto auto auto; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo { grid-template-columns: 1fr 80px; grid-template-rows: auto auto; height: auto; padding: 0; color: var(--COLOR_defaultText); } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo { margin: 0; display: flex; align-items: flex-end; min-width: 0; } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo a, .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo .promotedUpgradeOptionTrigger { color: var(--COLOR_supportLight_100); text-decoration: none; display: grid; grid-template-columns: 1fr auto; cursor: pointer; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo a, .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo .promotedUpgradeOptionTrigger { color: var(--COLOR_defaultText); } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo .primaryPartnerLabel { font: var(--FONT_highlight_300); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-right: 8px; } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo .age { color: var(--COLOR_supportLight_100); font: var(--FONT_default_300); } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo .age { color: var(--COLOR_supportDark_080); } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .openRejectPartnerModal { order: -1; place-self: flex-start flex-end; z-index: 12; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .openRejectPartnerModal { order: initial; background-color: rgba(0, 0, 0, 0); } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .openRejectPartnerModal .icon svg { fill: var(--COLOR_supportDark_080); } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .occupation { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .occupation { grid-column: 1 / span 2; } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .onlineState { align-self: flex-start; margin-top: 9px; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .onlineState { order: -1; align-self: center; margin: 0 10px 0 0; padding: 0; background-color: rgba(0, 0, 0, 0); } } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .onlineState .onlineNow { width: 12px; overflow: hidden; display: block; } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .onlineState .onlineNow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--COLOR_alertOnline_100); border-radius: var(--borderRadius_circle); } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .onlineState .onlineNow::before { width: 11px; height: 11px; } } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo.is-online { grid-template-columns: auto 1fr 80px; } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .buttonsWrapper { position: relative; top: 22px; display: flex; flex-direction: column; align-items: center; margin-top: -22px; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .buttonsWrapper { position: initial; top: auto; flex-direction: row; width: calc(100% - 32px); margin: 0 auto 16px auto; justify-content: space-between; } } .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .buttonsWrapper .collapseButtons .wdk-button { margin-bottom: 8px; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item .wdk-card.incomingMatchRequestItem .buttonsWrapper .collapseButtons .wdk-button { margin-bottom: 0; } } .matchRequestPages peg-imrlist-item .wdk-button.t-lottieAnimation:disabled { opacity: 1; } .matchRequestPages peg-imrlist-item .wdk-button.t-lottieAnimation.is-loading { opacity: 0.3; } .matchRequestPages peg-imrlist-item .wdk-button.likeIt .wdk-icon:not(.icon_thumbs_up) { fill: rgba(0, 0, 0, 0); stroke: var(--COLOR_supportLight_100); stroke-width: 1.6px; width: 24px; height: 24px; } .matchRequestPages peg-imrlist-item .wdk-button.likeIt.is-liked .wdk-icon:not(.icon_thumbs_up) { fill: var(--COLOR_supportLight_100); } .matchRequestPages peg-imrlist-item wdk-collapsible.collapsibleMessageList { scroll-margin-top: 340px; min-height: 108px; max-height: 248px; position: relative; top: -40px; margin-bottom: -40px; z-index: 0; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item wdk-collapsible.collapsibleMessageList { scroll-margin-top: 120px; min-height: 264px; max-height: 264px; position: initial; top: initial; width: calc(100% + 32px); margin: 0 0 0 -16px; } } .matchRequestPages peg-imrlist-item wdk-collapsible.collapsibleMessageList .collapsibleContainer { margin-bottom: 24px; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item wdk-collapsible.collapsibleMessageList .collapsibleContainer { margin-bottom: 8px; } } .matchRequestPages peg-imrlist-item wdk-collapsible.collapsibleMessageList.is-expanded { max-height: calc(100% + 40px); } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item wdk-collapsible.collapsibleMessageList.is-expanded { max-height: 100%; } } .matchRequestPages peg-imrlist-item ul.messageList { padding: 16px 16px 0 16px; position: relative; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item ul.messageList { padding: 20px 0 0 0; position: initial; top: initial; width: calc(100% - 32px); margin: 0 auto; } } .matchRequestPages peg-imrlist-item ul.messageList li.messageRow { position: relative; margin-bottom: 16px; font: var(--FONT_default_100); } .matchRequestPages peg-imrlist-item ul.messageList li.messageRow:last-child { margin-bottom: 0; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent { font: var(--FONT_default_50); color: var(--COLOR_defaultText); border-radius: var(--borderRadius_100); background-color: var(--COLOR_supportLight_100); overflow: hidden; width: fit-content; max-width: 100%; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent span.headline { display: block; color: var(--COLOR_supportDark_300); } .matchRequestPages peg-imrlist-item ul.messageList .messageContent span.body { display: block; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent .miniBubble { position: absolute; bottom: -30px; left: 0; width: 46px; height: 46px; display: flex; justify-content: center; align-items: center; border-radius: var(--borderRadius_100); border-top-left-radius: 0; background-color: var(--COLOR_supportDark_600); overflow: hidden; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent img.emojiIcon { width: 22px; height: 22px; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent .messageText { word-break: break-word; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent .messageText.is-blurredText { cursor: pointer; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent .messageText.is-blurredText span.body { filter: blur(4px); -webkit-user-select: none; user-select: none; padding: 4px; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.typeLike { padding: 13px 15px; margin-bottom: 44px; box-shadow: var(--boxShadow_small); } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.typeLike span.headline { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.typeLike span.subHeadline { font: var(--FONT_highlight_50); color: var(--COLOR_supportDark_100); display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 4px; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.typeLike span.body { margin: 4px 0 10px 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.typeText { font: var(--FONT_default_100); background-color: var(--COLOR_supportDark_600); padding: 11px 15px; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.emojiOnly { width: 46px; height: 46px; display: flex; justify-content: center; align-items: center; background-color: var(--COLOR_supportDark_600); } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseSubscription, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-redeemMatchUnlock, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseMatchUnlock { padding: 0; display: grid; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseSubscription::before, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-redeemMatchUnlock::before, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseMatchUnlock::before { grid-column: 1; grid-row: 1; content: ""; inset: 0 0 0 0; z-index: 0; border-radius: inherit; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseSubscription .messageText, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-redeemMatchUnlock .messageText, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseMatchUnlock .messageText { z-index: 2; grid-column: 1; grid-row: 1; padding: 11px 15px; background-color: var(--COLOR_supportDark_600); border: 2px solid rgba(0, 0, 0, 0); background-clip: padding-box; border-radius: var(--borderRadius_100); } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseSubscription .contactRightsBadge, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-redeemMatchUnlock .contactRightsBadge, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseMatchUnlock .contactRightsBadge { z-index: 3; grid-column: 1; grid-row: 1; width: fit-content; height: fit-content; padding: 4px 8px; color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_50); border-radius: var(--borderRadius_75); cursor: pointer; place-self: flex-end flex-end; margin: 0 8px 8px 8px; pointer-events: none; } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseMatchUnlock::before, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-redeemMatchUnlock::before { background-image: var(--COLOR_gradient_unlock_100_45); } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseMatchUnlock .contactRightsBadge, .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-redeemMatchUnlock .contactRightsBadge { background-image: var(--COLOR_gradient_unlock_100_45); } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseSubscription::before { background-image: var(--COLOR_gradient_premium_100_45); } .matchRequestPages peg-imrlist-item ul.messageList .messageContent.is-purchaseSubscription .contactRightsBadge { background-image: var(--COLOR_gradient_premium_100_45); } @media (max-width: 480px) { .matchRequestPages peg-imrlist-item:not(:first-of-type) ul.messageList { position: initial; top: initial; margin-bottom: 0; grid-column: 1 / span 2; } } .matchRequestPages peg-imrlist-item.is-unlockedUser .photoWrapper .photo::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: var(--COLOR_gradient_unlock_150_0_fade); opacity: 0.7; } @media only screen and (min-width: 768px) { .matchRequestPages peg-imrlist-item.is-unlockedUser .photoWrapper .photo::after { border-bottom-right-radius: var(--borderRadius_75); border-bottom-left-radius: var(--borderRadius_75); } } @media (max-width: 480px) { .matchRequestPages peg-imrlist-item.is-unlockedUser .wdk-card.incomingMatchRequestItem { border: 2px solid rgba(0, 0, 0, 0); background: linear-gradient(white, white) padding-box, var(--COLOR_gradient_unlock_100_180) border-box; border-radius: calc(var(--borderRadius_100) + 2px); } } .matchRequestPages peg-imrlist-item.is-animating { overflow: hidden; opacity: 0; min-height: 0; max-height: 0; } .matchRequestPages peg-imrlist-item:first-of-type .photoWrapper .photo::before { content: ""; position: absolute; bottom: 0; width: 100%; height: 150px; display: block; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 10, 0.06) 16%, rgba(0, 0, 10, 0.17) 33%, rgba(0, 0, 10, 0.32) 51%, rgba(0, 0, 10, 0.42) 68%, rgba(0, 0, 10, 0.45) ); } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-item:first-of-type .photoWrapper .photo::before { display: none; } } @media (max-width: 480px) { .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem { position: relative; grid-template-columns: 64px 1fr; column-gap: 16px; min-height: 174px; } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .photoWrapper .photo { margin-top: 16px; margin-left: 16px; overflow: hidden; width: 48px; height: 48px; border-radius: var(--borderRadius_circle); } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .photoWrapper .photo img, .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .photoWrapper .photo svg { width: 48px; height: 48px; border-radius: var(--borderRadius_circle); } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .photoWrapper .photo .wdk-button { display: none; } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper { position: static; padding-top: 16px; padding-right: 16px; height: initial; } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo { grid-template-columns: 1fr 40px; height: auto; padding: 0; color: var(--COLOR_defaultText); } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo a, .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo .promotedUpgradeOptionTrigger { cursor: pointer; color: var(--COLOR_defaultText); } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo .primaryPartnerLabel { font: var(--FONT_highlight_100); margin-right: 4px; } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo h3.userInfo .age { font: var(--FONT_default_100); color: var(--COLOR_defaultText); } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .openRejectPartnerModal { order: initial; background-color: rgba(0, 0, 0, 0); } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .openRejectPartnerModal .icon svg { fill: var(--COLOR_supportDark_080); } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .occupation { font: var(--FONT_default_50); margin-top: -4px; margin-bottom: 4px; } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .onlineState { position: absolute; top: 52px; left: 52px; padding: 0; margin: 0; background-color: rgba(0, 0, 0, 0); z-index: 10; } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .onlineState .onlineNow { width: 16px; overflow: hidden; display: block; } .matchRequestPages peg-imrlist-item:not(:first-of-type) .wdk-card.incomingMatchRequestItem .contentWrapper .mainUserInfo .onlineState .onlineNow::before { width: 13px; height: 13px; border: 1px solid var(--COLOR_supportLight_100); } .matchRequestPages peg-imrlist-item:not(:first-of-type) wdk-collapsible.collapsibleMessageList { scroll-margin-top: 120px; min-height: 108px; max-height: 248px; grid-column: 1 / span 2; top: initial; margin-bottom: 0; } .matchRequestPages peg-imrlist-item:not(:first-of-type) wdk-collapsible.collapsibleMessageList.is-expanded { max-height: 100%; } .matchRequestPages peg-imrlist-item:not(:first-of-type).is-unlockedUser .wdk-card.incomingMatchRequestItem .photoWrapper .photo::after { content: ""; background-image: none; } } @keyframes rotate { to { transform: rotate(360deg); } } .matchRequestPages peg-imrlist-skeleton .wdk-card.incomingMatchRequestItem { width: 100%; margin: 0 0 26px 0; box-shadow: var(--boxShadow_mid); border-radius: var(--borderRadius_100); min-height: 399px; } @media only screen and (min-width: 481px) { .matchRequestPages peg-imrlist-skeleton .wdk-card.incomingMatchRequestItem { box-shadow: none; border-radius: var(--borderRadius_100); border: 10px solid var(--COLOR_supportDark_600); margin: 0 0 20px 0; min-height: 364px; } } @media (max-width: 480px) { .matchRequestPages peg-imrlist-skeleton:not(:first-of-type) .wdk-card.incomingMatchRequestItem { min-height: 174px; } } .matchRequestPages #bottomsheetMessenger #conversationArea { display: none; height: calc(100% - 12px); border-top-left-radius: var(--borderRadius_100); border-top-right-radius: var(--borderRadius_100); } .matchRequestPages #bottomsheetMessenger #conversationArea.is-visible { display: flex !important; } @media only screen and (min-width: 481px) { .matchRequestPages #bottomsheetMessenger #conversationArea { border-top-left-radius: initial; border-top-right-radius: initial; } } @media only screen and (min-width: 768px) { .matchRequestPages #bottomsheetMessenger #conversationArea { display: none; } } .matchRequestPages #bottomsheetMessenger #conversationArea header { z-index: 220; } .matchRequestPages #bottomsheetMessenger #conversationArea header .backToContacts, .matchRequestPages #bottomsheetMessenger #conversationArea header .headerActions { display: none !important; } .matchRequestPages #bottomsheetMessenger #conversationArea header a#conversationHeader { pointer-events: none; margin-left: 24px; } .matchRequestPages #bottomsheetMessenger #conversationArea #messagesList { background-color: var(--COLOR_supportLight_100); } .matchRequestPages #bottomsheetMessenger #conversationArea #emptyLoader { margin-top: 50%; } .matchRequestPages #bottomsheetMessenger.has-keyboardVisible .emptyChatContainer { opacity: 0; transition: opacity 0.3s; } @media only screen and (min-width: 481px) { .matchRequestPages #bottomsheetMessenger.has-keyboardVisible .emptyChatContainer { opacity: 1; transition: none; } } .matchRequestPages #genericMessagingNotAllowedModalbox .wdk-styledHintBox { background-color: rgba(0, 0, 0, 0); font: var(--FONT_default_100); } .matchRequestPages #genericMessagingNotAllowedModalbox .wdk-styledHintBox .wdk-icon { display: none; } .matchRequestPages #genericMessagingNotAllowedModalbox .wdk-styledHintBox .textWrapper { padding-left: 0; color: var(--COLOR_defaultText); } .matchRequestPages #bottomsheetMessenger { --header-margin: -5%; } .matchRequestPages #bottomsheetMessenger #animationContent { backface-visibility: hidden; position: absolute; overflow: hidden; width: 102%; height: 102%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1200; opacity: 1; background-color: var(--COLOR_supportLight_100); } @media (max-width: 480px) { .matchRequestPages #bottomsheetMessenger #animationContent { height: 100vh; position: fixed; bottom: 0; top: auto; left: auto; transform: initial; } } .matchRequestPages #bottomsheetMessenger #animationContent .heartContainer { display: flex; position: absolute; left: 50%; top: 50%; opacity: 1; animation-timing-function: ease-out; } @media (max-width: 480px) { .matchRequestPages #bottomsheetMessenger #animationContent .heartContainer { position: fixed; } } .matchRequestPages #bottomsheetMessenger #animationContent .heartContainer .icon_heart_like_filled { fill: var(--COLOR_primary_100); height: 3400px; width: 3400px; } .matchRequestPages #bottomsheetMessenger #animationContent .header { opacity: 0; font: var(--FONT_brand_400); color: var(--COLOR_supportLight_100); width: 100%; height: 50%; align-items: flex-end; display: flex; justify-content: center; text-align: center; } .matchRequestPages #bottomsheetMessenger #animationContent .pictures { display: flex; height: 50%; width: 100%; justify-content: center; align-items: flex-start; position: absolute; top: 45%; } .matchRequestPages #bottomsheetMessenger #animationContent .pictures .photo.isMatchUnlocked::after { border-bottom-right-radius: var(--borderRadius_100); border-bottom-left-radius: var(--borderRadius_100); content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: var(--COLOR_gradient_unlock_150_0_fade); opacity: 0.7; } .matchRequestPages #bottomsheetMessenger #animationContent .pictures .photo.myPic { transform: translate(-500px, 100px) rotate(-15deg); opacity: 0; } .matchRequestPages #bottomsheetMessenger #animationContent .pictures .photo.partnerPic { transform: translate(500px, 100px) rotate(15deg); opacity: 0; } .matchRequestPages #bottomsheetMessenger #animationContent .pictures .photo img { display: block; height: 165px; width: 130px; box-shadow: var(--boxShadow_small); border-radius: var(--borderRadius_100); object-fit: cover; } @media only screen and (min-width: 768px) { .matchRequestPages #bottomsheetMessenger #animationContent .pictures .photo img { height: 185px; width: 145px; } } .matchRequestPages #bottomsheetMessenger #animationContent .pictures .photo::before { content: ""; position: absolute; display: block; inset: 0 0 0 0; border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_100); z-index: 2; } .matchRequestPages #bottomsheetMessenger #animationContent.is-animating .heartContainer { will-change: transform, opacity, height, width, scale; } .matchRequestPages #bottomsheetMessenger #animationContent.is-animating .heartContainer .icon_heart_like_filled { will-change: transform, opacity, height, width, scale; animation: heart 3.5s forwards; } .matchRequestPages #bottomsheetMessenger #animationContent.is-animating .header { animation: header 3.5s ease-out forwards; } .matchRequestPages #bottomsheetMessenger #animationContent.is-animating .myPic { will-change: transform, scale; animation: myPicFlyIn 3.5s forwards; } .matchRequestPages #bottomsheetMessenger #animationContent.is-animating .partnerPic { will-change: transform; animation: partnerPicFlyIn 3.5s forwards; } @keyframes myPicFlyIn { 0% { transform: translate(-500px, 100px) rotate(-15deg); opacity: 0; animation-timing-function: cubic-bezier(0.8, 0.14, 0.31, 0.88); } 45% { transform: translate(6px, 0) rotate(-3deg); opacity: 1; animation-timing-function: ease-out; } 50% { transform: translate(4px, 0) rotate(-3deg); opacity: 1; animation-timing-function: ease-out; } 60%, 85% { transform: translate(0, 0) rotate(-3deg); opacity: 1; } 100% { opacity: 0; transform: translate(50px, 0) rotate(-3deg) scale(0); } } @keyframes partnerPicFlyIn { 0% { transform: translate(500px, 100px) rotate(15deg); opacity: 0; animation-timing-function: cubic-bezier(0.8, 0.14, 0.31, 0.88); } 45% { transform: translate(-6px, 0) rotate(3deg); opacity: 1; animation-timing-function: ease-out; } 50% { transform: translate(-4px, 0) rotate(3deg); opacity: 1; animation-timing-function: ease-out; } 60%, 85% { transform: translate(0, 0) rotate(3deg); opacity: 1; } 100% { opacity: 0; transform: translate(-50px, 0) rotate(3deg) scale(0); } } @keyframes header { 0%, 10% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20%, 25% { opacity: 1; transform: translate(0, 0) scale(1); } 45% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.75); } 50% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.77); } 60%, 85% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.75); } 100% { transform: translate(0, 50%) scale(0); opacity: 0; } } @keyframes heart { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.15); } 40%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); background-color: rgba(0, 0, 0, 0); } } html[prevent-pull-to-refresh] { overscroll-behavior: none; overflow-x: hidden; } html[prevent-pull-to-refresh] body { overscroll-behavior: none; } .listPages#partnerSuggestionListPage .modalboxAllOptinLayer .modalboxContent { color: var(--COLOR_supportLight_100); background-color: var(--COLOR_primary_100); } .listPages#partnerSuggestionListPage .modalboxAllOptinLayer .modalboxContent article { max-width: 100%; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal .modalboxContent h3 { font: var(--FONT_highlight_100); text-align: center; margin: 24px 0 16px 0; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal .modalboxContent footer .buttonsContainer { flex-direction: column; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal footer .buttonsContainer { flex-direction: column; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal #infoLayerServerErrorMessage, .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal #serverErrorMessage { width: 100%; margin-top: 0; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal #infoLayerServerErrorMessage.is-visible, .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal #serverErrorMessage.is-visible { margin-bottom: 16px; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal .profileImageContainer { margin-top: 20px; display: flex; justify-content: center; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal .profileImageContainer .imageWrapper { position: relative; display: inline-block; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal .profileImageContainer .imageWrapper .profileImage { width: 125px; height: 125px; border-radius: var(--borderRadius_circle); border: 2px solid #fff; display: inline-block; background-color: var(--COLOR_supportLight_070); } .listPages#partnerSuggestionListPage #nameAndPhotoOptinModal .profileImageContainer .imageWrapper .imageUnblurred { position: relative; margin-left: -30px; z-index: 1; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinAccepted article { text-align: center; } .listPages#partnerSuggestionListPage #nameAndPhotoOptinAccepted article .icon_check { fill: var(--COLOR_supportLight_100); background-color: var(--COLOR_supportLight_050); border: 2px solid var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); padding: 10px; width: 90px; height: 90px; margin: 20px auto; } .listPages#partnerSuggestionListPage .supercardCard .supercardOnboardingOverlayScrolling { display: none; } @media (max-width: 480px) { .listPages#partnerSuggestionListPage .supercardCard .supercardOnboardingOverlayScrolling { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; height: 250px; padding: 16px 32px; text-align: center; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 10, 0.08) 16%, rgba(0, 0, 10, 0.24) 33%, rgba(0, 0, 10, 0.24) 33%, rgba(0, 0, 10, 0.53) 51%, rgba(0, 0, 10, 0.71) 68%, rgba(0, 0, 10, 0.95) ); visibility: visible; opacity: 1; transition: visibility 0.5s, opacity 0.5s linear; } .listPages#partnerSuggestionListPage .supercardCard .supercardOnboardingOverlayScrolling.hide { visibility: hidden; opacity: 0; } .listPages#partnerSuggestionListPage .supercardCard .supercardOnboardingOverlayScrolling wdk-lottie-animation { height: 36px; width: 36px; } .listPages#partnerSuggestionListPage .supercardCard .supercardOnboardingOverlayScrolling p { margin: 16px 16px 32px 16px; font: var(--FONT_highlight_100); color: var(--COLOR_supportLight_100); } } .listPages#partnerSuggestionListPage .supercardCard h2 { float: left; } .listPages#partnerSuggestionListPage peg-supercard-list { display: block; } .listPages#partnerSuggestionListPage peg-supercard-list #listEntries { clear: both; display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list #listEntries { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-gap: 8px; padding: 0 0 16px 0; } } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage peg-supercard-list #listEntries { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-gap: 16px; padding: 0 0 20px 0; } } .listPages#partnerSuggestionListPage peg-supercard-list #loadMoreRow { display: flex; justify-content: center; margin-bottom: 72px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] { position: relative; transition: opacity 1s cubic-bezier(0.25, 0.8, 0.25, 1), max-height 1s cubic-bezier(0.25, 0.8, 0.25, 1); max-height: 900px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"].has-closingAnimation { overflow: hidden; opacity: 0; max-height: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper { position: relative; padding: 10px 10vw 54px 10vw; display: flex; gap: 3vw; scroll-padding-left: 10vw; scroll-padding-right: 10vw; overflow: auto hidden; width: 100vw; justify-items: center; opacity: 1; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper::after { content: ""; display: block; min-width: 10vw; } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper::after { display: none; } } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper { display: block; width: auto; height: 100%; gap: 0; padding: 0; scroll-padding: 0; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper::-webkit-scrollbar { display: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] { width: 100%; height: 100%; aspect-ratio: 2/3; color: var(--COLOR_supportLight_100); border: none; cursor: pointer; scroll-snap-align: center; flex: 0 0 auto; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] { display: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel].active { display: block; } } html.no-touchevents .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] { display: none; } html.no-touchevents .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel].active { display: block; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] a.partnerLink { position: absolute; width: 100%; height: 100%; z-index: 11; border-radius: calc(var(--borderRadius_100) - 2px); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] a.partnerLink:focus-visible { outline: 0; border: 2px dashed var(--COLOR_supportDark_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] a.partnerLink:focus-visible::after { content: ""; display: block; border: 2px dashed var(--COLOR_supportLight_100); height: 100%; border-radius: var(--borderRadius_100); } @media (pointer: fine) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel]:hover { color: var(--COLOR_supportLight_090); } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel]:focus-visible { outline: 0; } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel].active .scaleWrapper { transform: scale(1); box-shadow: var(--boxShadow_mid); } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel].is-matchUnlocked .scaleWrapper { background: var(--COLOR_match_unlock_gradient_border); border: 2px solid rgba(0, 0, 0, 0); border-radius: calc(var(--borderRadius_100) + 2px); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel].is-matchUnlocked [class^="fallbackGradient_"], .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel].is-matchUnlocked [class*=" fallbackGradient_"] { border: 2px solid var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] .scaleWrapper { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--borderRadius_100); background-color: var(--COLOR_supportDark_040); transition: box-shadow 0.2s linear, transform 0.2s linear; } .macSafari .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] .scaleWrapper { height: calc(100% - 8px); } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] .scaleWrapper { transform: scale(0.93); box-shadow: var(--boxShadow_small); } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] .scaleWrapper .onboarding { display: flex; position: absolute; visibility: visible; opacity: 1; transition: visibility 0.5s, opacity 0.5s linear; border-radius: var(--borderRadius_100); inset: 0 0 0 0; z-index: 13; background-color: var(--COLOR_supportDark_090); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] .scaleWrapper .onboarding.hide { visibility: hidden; opacity: 0; transition: visibility 0.5s, opacity 0.5s linear; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] .scaleWrapper .onboarding#onboardingProfileCard wdk-lottie-animation { height: 128px; width: 128px; margin: 0 auto; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] .scaleWrapper .onboarding .onboardingContainer { display: flex; flex-direction: column; justify-content: center; padding: 0 32px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] .scaleWrapper .onboarding .onboardingContainer p { font: var(--FONT_highlight_100); text-align: center; } @supports not (aspect-ratio: 1/1) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel] .scaleWrapper::after { content: ""; display: block; padding-bottom: 150%; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper [card-panel]:nth-last-child(2) { scroll-snap-stop: always; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] { contain: layout; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .photoWrapper { position: absolute; inset: 0 0 0 0; flex-grow: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .photoWrapper .photo { display: block; height: 100%; width: 100%; object-fit: cover; border-radius: var(--borderRadius_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader { position: relative; z-index: 12; padding: 0 16px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .matchingPoints { position: absolute; top: 16px; left: 16px; margin-top: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .matchingPoints .wdk-button { padding: 0 8px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .matchingPoints .wdk-button .icon { margin-right: 4px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .matchingPoints .wdk-button .icon svg.wdk-icon { width: 22px; height: 22px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .matchingPoints .wdk-button .icon img { width: auto; height: auto; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .matchingPoints .wdk-button .text { font: var(--FONT_default_200); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .openRejectPartnerModal { position: absolute; top: 16px; right: 16px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .openRejectPartnerModal:focus-visible { outline-width: 1px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .openRejectPartnerModal:focus-visible::after { outline: 2px dashed currentcolor; outline-offset: 2px; outline-width: 1px; outline-color: var(--COLOR_supportDark_100); outline-offset: -5px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .favoriteToggle { position: absolute; top: 67px; right: 16px; } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .favoriteToggle { top: 74px; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .favoriteToggle:focus-visible { outline-width: 1px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardHeader .favoriteToggle:focus-visible::after { outline: 2px dashed currentcolor; outline-offset: 2px; outline-width: 1px; outline-color: var(--COLOR_supportDark_100); outline-offset: -5px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFallbackInfo { position: absolute; display: flex; align-items: center; padding: 0 16px; height: 100%; word-break: break-word; z-index: 11; pointer-events: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFallbackInfo h4 { font: var(--FONT_default_75); margin: -29px 0 12px 0; } @media (min-width: 481px) and (max-width: 767px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFallbackInfo h4 { margin-top: -12px; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFallbackInfo p { font: var(--FONT_deco_100); font-style: var(--FONT_style_deco); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFallbackInfo p { font: var(--FONT_highlight_75); -webkit-line-clamp: 3; } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFallbackInfo p { font: var(--FONT_deco_100); -webkit-line-clamp: 5; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) { position: absolute; z-index: 12; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: 0 16px; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 10, 0.06) 16%, rgba(0, 0, 10, 0.17) 33%, rgba(0, 0, 10, 0.32) 51%, rgba(0, 0, 10, 0.42) 68%, rgba(0, 0, 10, 0.45) ); min-height: 140px; pointer-events: none; border-radius: var(--borderRadius_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 { display: flex; align-items: center; margin: 0 0 8px 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 .primaryPartnerLabel { order: 1; overflow: hidden; max-width: calc(100% - 45px); display: inline-block; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; font: var(--FONT_highlight_300); } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 .primaryPartnerLabel { font: var(--FONT_highlight_200); } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 .primaryPartnerLabel { font: var(--FONT_highlight_300); } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 .age { order: 2; font: var(--FONT_default_300); } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 .age { font: var(--FONT_highlight_200); } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 .age { font: var(--FONT_default_300); } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 .idSecured { display: inline-flex; order: 3; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 .idSecured svg { fill: var(--COLOR_supportLight_080); margin-left: 4px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) h3 .idSecured + .primaryPartnerLabel { max-width: calc(100% - 60px); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation { margin-top: 8px; margin-bottom: 40px; min-height: 44px; width: 100%; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation { margin-bottom: 20px; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation .onlineNow { padding-left: 4px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation .onlineNow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--COLOR_alertOnline_100); border-radius: var(--borderRadius_circle); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation .linkToDistance { position: relative; padding-left: 16px; pointer-events: all; display: inline-flex; align-items: center; background-image: var(--COLOR_gradient_premium_100_45); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation .linkToDistance .wdk-icon { position: absolute; left: 4px; width: 12px; height: 12px; fill: var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation .zip, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .onlineAndLocation .distance { white-space: nowrap; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter:not(.withMoreTags) .occupation { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags { position: absolute; z-index: 12; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: 0 16px; background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 10, 0.06) 16%, rgba(0, 0, 10, 0.17) 33%, rgba(0, 0, 10, 0.32) 51%, rgba(0, 0, 10, 0.42) 68%, rgba(0, 0, 10, 0.45) ); min-height: 140px; pointer-events: none; border-bottom-right-radius: var(--borderRadius_100); border-bottom-left-radius: var(--borderRadius_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 { display: flex; align-items: center; margin: 0 0 6px 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .onlineNow { padding-right: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .onlineNow::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; margin-bottom: calc(50% - 5px); background: var(--COLOR_alertOnline_100); border-radius: var(--borderRadius_circle); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .primaryPartnerLabel { overflow: hidden; display: inline-block; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; font: var(--FONT_highlight_300); } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .primaryPartnerLabel { font: var(--FONT_highlight_200); } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .primaryPartnerLabel { font: var(--FONT_highlight_300); } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .age { font: var(--FONT_default_300); } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .age { font: var(--FONT_highlight_200); } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .age { font: var(--FONT_default_300); } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .statusIcons { display: inline-flex; align-items: center; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .statusIcons svg { fill: var(--COLOR_supportLight_080); margin-left: 4px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags h3 .statusIcons .newProfile { margin-left: 4px; --wdk-tag-background-color: var(--COLOR_primary_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags .locationAndTags { max-height: 62px; width: 100%; margin-bottom: 40px; overflow: hidden; line-height: 0; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags .locationAndTags { margin-bottom: 20px; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags .locationAndTags wdk-tag { margin-bottom: 4px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags .locationAndTags wdk-commerce-tag { pointer-events: all; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags .locationAndTags .zip, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags .locationAndTags .distance { white-space: nowrap; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] .cardFooter.withMoreTags .occupation { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-discovery[card-panel] p { text-align: left; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-special-similarity[card-panel] { color: var(--COLOR_defaultText); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-special-similarity[card-panel] .scaleWrapper { background-color: var(--COLOR_supportLight_100); position: relative; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-special-similarity[card-panel] .scaleWrapper > img { object-fit: cover; height: 100%; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-special-similarity[card-panel] .scaleWrapper .contentWrapper { position: absolute; display: flex; left: 0; right: 0; bottom: 45px; height: 134px; margin: 0 24px; flex-direction: column; justify-content: center; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-special-similarity[card-panel] .scaleWrapper .contentWrapper h2 { font: var(--FONT_default_75); text-transform: uppercase; color: var(--COLOR_defaultText); text-align: center; margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-special-similarity[card-panel] .scaleWrapper .contentWrapper p { font: var(--FONT_highlight_300); color: var(--COLOR_defaultText); text-align: center; margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-similarity[card-panel] { color: var(--COLOR_defaultText); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-similarity[card-panel] .scaleWrapper { background-color: var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-similarity[card-panel] .scaleWrapper h2 { display: flex; justify-content: left; width: 100%; padding: 24px 24px; color: var(--COLOR_supportDark_100); font: var(--FONT_default_75); text-transform: uppercase; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-similarity[card-panel] .scaleWrapper peg-lifestyle-tag-supercard-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 24px; max-height: 336px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-similarity[card-panel] .scaleWrapper peg-lifestyle-tag-supercard-container.singleItem { min-height: 308px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] { margin-left: -4px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper { background-color: rgba(0, 0, 0, 0); box-shadow: none; display: flex; flex-direction: row; align-items: center; } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper { transform: none; box-shadow: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper button.goToProfile { opacity: 1; background-color: var(--COLOR_supportDark_090); transform: scale(1) translateX(0); transition: transform 0.6s linear, opacity 0.3s 0.4s; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper .photoWrapper { position: absolute; inset: 0 0 0 0; height: 100%; width: 100%; border-radius: var(--borderRadius_100); overflow: hidden; transform: translateX(160px); transition: transform 0.6s linear; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper .photoWrapper .photo { display: block; height: 100%; width: 100%; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper::before { border: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper .wdk-button { width: 24px; height: 24px; background-color: var(--COLOR_supportDark_100); border-radius: var(--borderRadius_circle); aspect-ratio: 1/1; position: relative; z-index: 100; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper .wdk-button .wdk-icon { width: 16px; height: 16px; fill: var(--COLOR_supportLight_100); } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel].active .scaleWrapper { box-shadow: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel].active .scaleWrapper button.goToProfile { opacity: 0; transform: scale(2.5) translateX(60px); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel].active .scaleWrapper .photoWrapper { transform: translateX(0); } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .onboardingWrapper { position: absolute !important; z-index: -1; opacity: 0; transition: opacity 0.75s cubic-bezier(0.25, 0.8, 0.25, 1); padding-top: 10px; display: flex; gap: 3vw; padding-left: 10vw; padding-right: 10vw; scroll-padding-left: 10vw; scroll-padding-right: 10vw; overflow: auto hidden; width: 100vw; justify-items: center; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .onboardingWrapper { display: none; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .onboardingWrapper .onboardingCard { position: relative; aspect-ratio: 2/3; width: 100%; height: 100%; text-align: center; border-radius: var(--borderRadius_100); border: 1px dashed var(--COLOR_supportDark_400); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .onboardingWrapper .onboardingCard .innerWrapper { position: absolute; top: 0; left: 0; height: 100%; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .onboardingWrapper .onboardingCard .innerWrapper wdk-lottie-animation { height: 50vw; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .onboardingWrapper .onboardingCard::after { content: ""; display: block; padding-bottom: 150%; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"].has-contactOnboardingCard { padding-bottom: 32px; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"].has-contactOnboardingCard { display: none; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"].has-contactOnboardingCard .onboardingWrapper { z-index: 11; opacity: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"].has-contactOnboardingCard .scrollWrapper { padding-bottom: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"].has-contactOnboardingCard .scrollWrapper, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"].has-contactOnboardingCard .interactionButtonsVibeCheck { transition: opacity 0.75s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons { position: absolute; bottom: 33px; width: 100%; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons { display: none; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button { box-shadow: var(--boxShadow_large); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.t-primarySkin3 { width: 19vw; max-width: 72px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.t-primarySkin3:disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.t-primarySkin3.disabled { opacity: 1; background-color: var(--COLOR_supportDark_500); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.t-primarySkin3:active { opacity: 1; background-color: var(--COLOR_supportDark_500); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.t-primarySkin3:hover { opacity: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.middleButton { width: 114px; margin: 0 8px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.middleButton:disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.middleButton.disabled { opacity: 1; background-color: #b5d9dc; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.middleButton:active { opacity: 1; background-color: #056970; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons button.wdk-button.middleButton svg { width: 32px; height: 32px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons.healthyDatingCardButton { bottom: 32px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons.healthyDatingCardButton button.wdk-button.t-primarySkin3 { max-width: initial; width: auto; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons.healthyDatingCardButton { bottom: 16px; } } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] .interactionButtons.healthyDatingCardButton { bottom: 24px; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) { position: absolute; height: 48px; bottom: 33px; width: 100%; align-items: center; justify-content: center; display: grid; grid-template-columns: 1fr 174px 1fr; grid-template-rows: 1fr; gap: 16px; opacity: 1; transition: grid-template-columns 200ms, opacity 0.6s; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) { display: none; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .no-touchevents { display: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ).hideInteractionButtons { opacity: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button { grid-row: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin3:disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin3.disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin3[disabled] { opacity: 1; background-color: var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin3:active { opacity: 1; background-color: var(--COLOR_supportDark_500); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin3:hover { opacity: 1; background-color: var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin1:disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin1.disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin1[disabled] { opacity: 1; background-color: var(--COLOR_primary_100_dark); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin1:active { opacity: 1; background-color: var(--COLOR_primary_100_dark); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.t-primarySkin1:hover { opacity: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.vibeCheckButton { z-index: 10; grid-column: 2/2; transition: opacity 200ms; opacity: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.prev, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.next { width: 52px; z-index: 0; position: relative; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.likeButton { width: 128px; justify-self: center; z-index: 9; grid-column: 2/2; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.likeButton .icon { margin: 0; width: 28px; height: 28px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.likeButton .icon .wdk-icon { width: 28px; height: 28px; fill: rgba(0, 0, 0, 0); stroke: var(--COLOR_supportLight_100); stroke-width: 1.6px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.likeButton.is-liked .icon .wdk-icon { fill: var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.likeButton.is-loading { background-color: color-mix(in srgb, var(--COLOR_primary_100), #fff 70%); opacity: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.likeButton.is-loading .icon { visibility: hidden; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.prev { grid-column: 1; justify-self: flex-end; left: 100px; transition: left 250ms 250ms ease-out; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.next { grid-column: 3; justify-self: flex-start; right: 100px; transition: right 250ms 250ms ease-out; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ) .wdk-button.is-animating { pointer-events: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled )[type="default"] .wdk-button.likeButton, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled )[type="default"] .wdk-button.next, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled )[type="default"] .wdk-button.prev { box-shadow: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled )[type="moreButtons"] { grid-template-columns: 1fr 128px 1fr; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled )[type="moreButtons"] .wdk-button.vibeCheckButton { opacity: 0; z-index: 8; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled )[type="moreButtons"] .wdk-button.prev { z-index: initial; left: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled )[type="moreButtons"] .wdk-button.next { z-index: initial; right: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ).onlyDiscoveryCard .wdk-button.next, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ).onlyDiscoveryCard .wdk-button.prev, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck:not( .isSingleSuperCardEnabled ).onlyDiscoveryCard .wdk-button.likeButton { opacity: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled { position: absolute; height: 48px; bottom: 33px; width: 100%; align-items: center; justify-content: center; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 8px; opacity: 1; transition: grid-template-columns 200ms, opacity 0.6s; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled { display: none; } } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .no-touchevents { display: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled.hideInteractionButtons { opacity: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button { grid-row: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin2:disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin2.disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin2[disabled] { opacity: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin2:active, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin2.active { opacity: 1; background-color: var(--COLOR_supportDark_600); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin1:disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin1.disabled, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin1[disabled] { opacity: 1; background-color: var(--COLOR_primary_100_dark); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin1:active { opacity: 1; background-color: var(--COLOR_primary_100_dark); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.t-primarySkin1:hover { opacity: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.likeButton { width: 128px; justify-self: start; z-index: 9; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.likeButton .icon { margin-right: 8px; width: 28px; height: 28px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.likeButton .icon .wdk-icon { width: 28px; height: 28px; fill: rgba(0, 0, 0, 0); stroke: var(--COLOR_supportLight_100); stroke-width: 1.6px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.likeButton.is-liked .icon .wdk-icon { fill: var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.likeButton.is-loading { background-color: color-mix(in srgb, var(--COLOR_primary_100), #fff 70%); opacity: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.likeButton.is-loading .icon { visibility: hidden; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled .wdk-button.is-animating { pointer-events: none; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled peg-quick-rejection-trigger { grid-row: 1; width: 128px; justify-self: end; z-index: 9; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled peg-quick-rejection-trigger .wdk-button:active { opacity: 1; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled peg-quick-rejection-trigger .wdk-button .icon { margin: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled peg-quick-rejection-trigger .wdk-button .icon .wdk-icon { width: 28px; height: 28px; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-interaction-buttons.isSingleSuperCardEnabled.onlyDiscoveryCard .wdk-button.likeButton { opacity: 0; } .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-match-discovery .scaleWrapper::before, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-match-similarity .scaleWrapper::before, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-match-special-similarity .scaleWrapper::before, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-match-profile .scaleWrapper::before, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-match-highlight .scaleWrapper::before, .listPages#partnerSuggestionListPage peg-supercard-list [role="listitem"] peg-supercard-match-similarity .scaleWrapper::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; border-radius: calc(var(--borderRadius_100)); border: 1px solid var(--COLOR_supportLight_070); mix-blend-mode: soft-light; pointer-events: none; } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list[show-scarcity-banner-enabled] [role="listitem"] .scrollWrapper { padding: 10px 8vw 54px 8vw; gap: 1vw; scroll-padding-left: 8vw; scroll-padding-right: 8vw; } .listPages#partnerSuggestionListPage peg-supercard-list[show-scarcity-banner-enabled] [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper .wdk-button { left: 4px; } .listPages#partnerSuggestionListPage peg-supercard-list[show-scarcity-banner-enabled] [role="listitem"] .onboardingWrapper { gap: 1vw; padding-left: 8vw; padding-right: 8vw; scroll-padding-left: 8vw; scroll-padding-right: 8vw; } .listPages#partnerSuggestionListPage peg-supercard-list[show-scarcity-banner-enabled] [role="listitem"].has-contactOnboardingCard .scrollWrapper { padding-bottom: 0; } } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"] .scrollWrapper { padding: 10px 8vw 84px 8vw; gap: 1vw; scroll-padding-left: 8vw; scroll-padding-right: 8vw; } } @media only screen and (max-width: 480px) and (height >= 700px) { .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"] .scrollWrapper { padding: 10px 8vw 184px 8vw; } } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"] .scrollWrapper peg-supercard-match-profile[card-panel] .scaleWrapper .wdk-button { left: 4px; } .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck { bottom: 63px; } } @media only screen and (max-width: 480px) and (height >= 700px) { .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"] peg-supercard-interaction-buttons.interactionButtonsVibeCheck { bottom: 163px; } } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"] .onboardingWrapper { gap: 1vw; padding-left: 8vw; padding-right: 8vw; scroll-padding-left: 8vw; scroll-padding-right: 8vw; } .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"] .interactionButtons { bottom: 62px; } } @media only screen and (max-width: 480px) and (height >= 700px) { .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"] .interactionButtons { bottom: 163px; } } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"].has-contactOnboardingCard { padding-bottom: 154px; } .listPages#partnerSuggestionListPage peg-supercard-list[show-single-profile-discovery-enabled] [role="listitem"].has-contactOnboardingCard .scrollWrapper { padding-bottom: 0; } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper { text-align: center; background-image: var(--COLOR_gradient_premium_100_45); } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper { border: 1px solid var(--COLOR_supportDark_500); } } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper { padding-top: 16px; padding-bottom: 16px; } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper { padding-top: 32px; padding-bottom: 32px; } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .partnerLink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; border-radius: var(--borderRadius_100); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent { position: absolute; left: 0; height: 100%; width: 100%; padding: 16px 24px 40px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent { height: calc(100% - 90px); padding: 0 24px; } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent wdk-lottie-animation { display: none; } @media (min-width: 375px) and (max-width: 766px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent wdk-lottie-animation { display: inline-block; width: 80px; margin-bottom: 16px; } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent h3 { margin: 0 0 16px 0; color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_200); display: block; margin-bottom: 24px; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } @media only screen and (min-width: 360px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent h3 { font: var(--FONT_highlight_300); } } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent h3 { font: var(--FONT_highlight_100); } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent h3 { font: var(--FONT_highlight_300); } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent h3.is-directDiscount { -webkit-line-clamp: 2; } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent h3.is-directDiscount { -webkit-line-clamp: 3; } } @keyframes pulse-animation { 0% { box-shadow: 0 0 0 0 #fff; } 25% { box-shadow: 0 0 0 12px hsla(0, 0%, 100%, 0); } 100% { box-shadow: 0 0 0 12px hsla(0, 0%, 100%, 0); } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .discountBox { position: relative; padding: 8px 16px; border-radius: var(--borderRadius_75); background-color: var(--COLOR_supportLight_100); animation: 4s pulse-animation 2s infinite cubic-bezier(0, 0.55, 0.45, 1); z-index: 1; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .discountBox::before { display: block; content: ""; position: absolute; inset: 0 0 0 0; z-index: -1; border-radius: var(--borderRadius_75); animation: 4s pulse-animation 2.2s infinite cubic-bezier(0.61, 1, 0.88, 1); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .discountBox .discountText { display: flex; align-items: center; font: var(--FONT_highlight_300); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .discountBox .discountText small { font: var(--FONT_default_75); background: var(--COLOR_premium_100); background-image: var(--COLOR_gradient_premium_100_45); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .discountBox .discountText span { padding: 0 8px; background: var(--COLOR_premium_100); background-image: var(--COLOR_gradient_premium_100_45); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .discountBox .discountText br { display: none; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .countdownBox { display: flex; flex-direction: column; justify-content: center; margin-top: -24px; padding-top: 12px; width: 100%; height: 116px; border: 1px solid var(--COLOR_supportLight_100); border-radius: var(--borderRadius_100); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .countdownBox .expireText { font: var(--FONT_default_75); margin-bottom: 8px; padding: 0 8px; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .countdownBox .timers p { margin: 0; font: var(--FONT_highlight_200); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .countdownBox .timers p.countdownClock { font: var(--FONT_default_200); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .countdownBox .timers p wdk-countdown { --wdkCountdown-digits-font: var(--FONT_highlight_200); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .scaleWrapper .premiumContent .bulletpoints { margin-top: 16px; font: var(--FONT_default_50); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .closingX { position: absolute; top: 12px; right: 35px; z-index: 12; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .interactionButtons { display: flex !important; bottom: 32px; z-index: 12; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .interactionButtons { bottom: 16px; } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-premium .interactionButtons { bottom: 32px; } } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .interactionButtons { display: flex; } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating .scaleWrapper { background-image: var(--COLOR_gradient_healthy_dating_100_45); color: var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating .healthyDatingContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating .healthyDatingContainer header { width: 100%; text-align: right; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating .healthyDatingContainer header .healthyDatingLogo { width: auto; height: 56px; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating .healthyDatingContainer .healthyDatingContent { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating .healthyDatingContainer .healthyDatingContent h2 { font: var(--FONT_brand_400); font-style: var(--FONT_style_brand); color: var(--COLOR_supportLight_100); padding: 0; margin-bottom: 24px; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating .healthyDatingContainer .healthyDatingContent .wdk-button { color: var(--COLOR_supportLight_100); margin-top: 24px; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating .healthyDatingContainer .healthyDatingContent .wdk-button { margin-top: 0; } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating .healthyDatingContainer .healthyDatingContent .wdk-button .wdk-icon { fill: var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating:first-of-type .healthyDatingContainer { height: auto; top: 50%; transform: translate(0, -50%); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating:first-of-type .healthyDatingContainer header { text-align: center; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-healthydating[role="listitem"] .supercardHealthyDating:first-of-type .healthyDatingContainer header .healthyDatingLogo { height: 120px; margin-bottom: 24px; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper { padding: 32px 16px; text-align: center; background-color: var(--COLOR_supportLight_100) !important; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper { border: 1px solid var(--COLOR_supportDark_500); } } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper { padding-top: 16px; padding-bottom: 16px; } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper { padding-top: 32px; padding-bottom: 32px; } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .partnerLink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; border-radius: var(--borderRadius_100); } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .infoText { position: absolute; left: 0; padding: 0 24px; } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .infoText wdk-lottie-animation { margin: 0 0 12px 0; } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .infoText wdk-lottie-animation { width: 80%; height: 80%; } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .infoText h3 { margin: 0 0 4px 0; color: var(--COLOR_supportDark_400); font: var(--FONT_default_75); text-transform: uppercase; } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .infoText h3 { font: var(--FONT_default_50); } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .infoText h3 { font: var(--FONT_default_75); } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .infoText p { color: var(--COLOR_defaultText); font: var(--FONT_default_200); margin-bottom: 64px; } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .infoText p { font: var(--FONT_default_75); } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .scaleWrapper .infoText p { font: var(--FONT_default_200); } } .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .interactionButtons { display: flex !important; bottom: 32px; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .interactionButtons { bottom: 16px; } } @media only screen and (min-width: 980px) { .listPages#partnerSuggestionListPage peg-supercard-list peg-supercard-searchsetting[role="listitem"] .interactionButtons { bottom: 24px; } } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger { --header-margin: -5%; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent { backface-visibility: hidden; position: absolute; overflow: hidden; width: 102%; height: 102%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1200; opacity: 1; background-color: var(--COLOR_supportLight_100); } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent { height: 100vh; position: fixed; bottom: 0; top: auto; left: auto; transform: initial; } } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .heartContainer { display: flex; position: absolute; left: 50%; top: 50%; opacity: 1; animation-timing-function: ease-out; } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .heartContainer { position: fixed; } } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .heartContainer .icon_heart_like_filled { fill: var(--COLOR_primary_100); height: 3400px; width: 3400px; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .header { opacity: 0; font: var(--FONT_brand_400); color: var(--COLOR_supportLight_100); width: 100%; height: 50%; align-items: flex-end; display: flex; justify-content: center; text-align: center; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .pictures { display: flex; height: 50%; width: 100%; justify-content: center; align-items: flex-start; position: absolute; top: 45%; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .pictures .photo.isMatchUnlocked::after { border-bottom-right-radius: var(--borderRadius_100); border-bottom-left-radius: var(--borderRadius_100); content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: var(--COLOR_gradient_unlock_150_0_fade); opacity: 0.7; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .pictures .photo.myPic { transform: translate(-500px, 100px) rotate(-15deg); opacity: 0; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .pictures .photo.partnerPic { transform: translate(500px, 100px) rotate(15deg); opacity: 0; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .pictures .photo img { display: block; height: 165px; width: 130px; box-shadow: var(--boxShadow_small); border-radius: var(--borderRadius_100); object-fit: cover; } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .pictures .photo img { height: 185px; width: 145px; } } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent .pictures .photo::before { content: ""; position: absolute; display: block; inset: 0 0 0 0; border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_100); z-index: 2; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent.is-animating .heartContainer { will-change: transform, opacity, height, width, scale; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent.is-animating .heartContainer .icon_heart_like_filled { will-change: transform, opacity, height, width, scale; animation: heart 3.5s forwards; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent.is-animating .header { animation: header 3.5s ease-out forwards; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent.is-animating .myPic { will-change: transform, scale; animation: myPicFlyIn 3.5s forwards; } .listPages#partnerSuggestionListPage peg-supercard-list #bottomsheetMessenger #animationContent.is-animating .partnerPic { will-change: transform; animation: partnerPicFlyIn 3.5s forwards; } @keyframes myPicFlyIn { 0% { transform: translate(-500px, 100px) rotate(-15deg); opacity: 0; animation-timing-function: cubic-bezier(0.8, 0.14, 0.31, 0.88); } 45% { transform: translate(6px, 0) rotate(-3deg); opacity: 1; animation-timing-function: ease-out; } 50% { transform: translate(4px, 0) rotate(-3deg); opacity: 1; animation-timing-function: ease-out; } 60%, 85% { transform: translate(0, 0) rotate(-3deg); opacity: 1; } 100% { opacity: 0; transform: translate(50px, 0) rotate(-3deg) scale(0); } } @keyframes partnerPicFlyIn { 0% { transform: translate(500px, 100px) rotate(15deg); opacity: 0; animation-timing-function: cubic-bezier(0.8, 0.14, 0.31, 0.88); } 45% { transform: translate(-6px, 0) rotate(3deg); opacity: 1; animation-timing-function: ease-out; } 50% { transform: translate(-4px, 0) rotate(3deg); opacity: 1; animation-timing-function: ease-out; } 60%, 85% { transform: translate(0, 0) rotate(3deg); opacity: 1; } 100% { opacity: 0; transform: translate(-50px, 0) rotate(3deg) scale(0); } } @keyframes header { 0%, 10% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20%, 25% { opacity: 1; transform: translate(0, 0) scale(1); } 45% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.75); } 50% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.77); } 60%, 85% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.75); } 100% { transform: translate(0, 50%) scale(0); opacity: 0; } } @keyframes heart { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.15); } 40%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); background-color: rgba(0, 0, 0, 0); } } .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea { display: none; height: calc(100% - 12px); border-top-left-radius: var(--borderRadius_100); border-top-right-radius: var(--borderRadius_100); } .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea.is-visible { display: flex !important; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea { border-top-left-radius: initial; border-top-right-radius: initial; } } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea { display: none; } } .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea header { z-index: 220; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea header .backToContacts, .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea header .headerActions { display: none !important; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea header a#conversationHeader { pointer-events: none; margin-left: 24px; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea #messagesList { background-color: var(--COLOR_supportLight_100); } .listPages#partnerSuggestionListPage #bottomsheetMessenger #conversationArea #emptyLoader { margin-top: 50%; } .listPages#partnerSuggestionListPage #bottomsheetMessenger.has-keyboardVisible .emptyChatContainer { opacity: 0; transition: opacity 0.3s; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage #bottomsheetMessenger.has-keyboardVisible .emptyChatContainer { opacity: 1; transition: none; } } .listPages#partnerSuggestionListPage #genericMessagingNotAllowedModalbox .wdk-styledHintBox { background-color: rgba(0, 0, 0, 0); font: var(--FONT_default_100); } .listPages#partnerSuggestionListPage #genericMessagingNotAllowedModalbox .wdk-styledHintBox .wdk-icon { display: none; } .listPages#partnerSuggestionListPage #genericMessagingNotAllowedModalbox .wdk-styledHintBox .textWrapper { padding-left: 0; color: var(--COLOR_defaultText); } .listPages#partnerSuggestionListPage peg-reaction-and-comment { height: 100%; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-reaction-and-comment { padding: 18px 16px 16px 16px; } } .listPages#partnerSuggestionListPage peg-reaction-and-comment article { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 8px; overflow: hidden; } .listPages#partnerSuggestionListPage peg-reaction-and-comment #messagingErrors .wdk-styledHintBox.t-error.is-visible { margin-bottom: 16px; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent { width: 100%; } @media (max-width: 480px) { .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent { display: flex; flex-direction: column; justify-content: center; } } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent h2 { margin: 0 32px 12px 32px; font: var(--FONT_highlight_200); color: var(--COLOR_supportDark_200); text-align: center; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent h2 { margin: 0 32px 22px 32px; } } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper { flex-grow: 1; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; place-items: center center; justify-content: center; overflow: auto; height: calc(100dvh - 280px); } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper { min-height: calc(55dvh - 280px); max-height: calc(80dvh - 280px); height: auto; } } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.lifestyleItems .contentForReactionAndComment { width: calc(100% - 80px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment { position: relative; width: calc(100% - 80px); margin: 0 40px; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment img { width: 100%; aspect-ratio: 2/3; border-radius: var(--borderRadius_100); } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment .contentWrapper { position: absolute; display: flex; left: 0; right: 0; bottom: 45px; height: 134px; margin: 0 24px; flex-direction: column; justify-content: center; } @media only screen and (width <= 375px) { .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment .contentWrapper { bottom: 35px; } } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment .contentWrapper h4 { font: var(--FONT_default_75); text-transform: uppercase; color: var(--COLOR_defaultText); text-align: center; margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.specialSimilarity .contentForReactionAndComment .contentWrapper p { font: var(--FONT_highlight_300); color: var(--COLOR_defaultText); text-align: center; margin: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; word-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper.compatibilityInsight peg-compatibility-insight-card { overflow: visible; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .textWrapper { width: calc(100% - 80px); margin: 0 40px; border-radius: var(--borderRadius_100); border: 2px solid var(--COLOR_supportDark_600); padding: 24px; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .textWrapper h4 { font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); margin: 0 0 12px 0; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .textWrapper p { font: var(--FONT_deco_100); font-style: var(--FONT_style_deco); margin: 0; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper #photoBox, .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .photoWrapper { max-width: 245px; margin: 0 auto; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper #photoBox img, .listPages#partnerSuggestionListPage peg-reaction-and-comment .reactionContent .reactionAndCommentContentWrapper .photoWrapper img { border-radius: 20px; aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .hintContainer { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 0 16px; color: var(--COLOR_primary_100); font: var(--FONT_default_50); } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage peg-reaction-and-comment .hintContainer { font: var(--FONT_default_75); } } .listPages#partnerSuggestionListPage peg-reaction-and-comment .hintContainer .lottiWrapper { width: 24px; height: 27px; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .hintContainer .textWrapper span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .textAreaWrapper { min-height: 98px; width: 100%; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .wdk-styledHintBox.has-closingX a.closeX { position: absolute; top: -2px; right: 32px; } .listPages#partnerSuggestionListPage peg-reaction-and-comment .wdk-styledHintBox.has-closingX .textWrapper { padding-right: 39px; } .listPages#partnerSuggestionListPage peg-reaction-and-comment:has(.wdk-styledHintBox.t-error.is-visible) .reactionContent .reactionAndCommentContentWrapper { height: calc(100dvh - 380px); } .listPages#partnerSuggestionListPage peg-reaction-and-comment-dialog #matchUnlockConfetti { position: fixed; display: flex; justify-content: center; inset: 0 0 0 0; z-index: 211; } .listPages#partnerSuggestionListPage peg-reaction-and-comment-dialog #matchUnlockConfetti wdk-lottie-animation { width: 100%; } .listPages#partnerSuggestionListPage #writeReactionLikeSuccess[visible], .listPages#partnerSuggestionListPage #writeReactionTextSuccess[visible] { bottom: 112px; } .listPages#partnerSuggestionListPage #bottomsheetMessenger { --header-margin: -5%; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent { backface-visibility: hidden; position: absolute; overflow: hidden; width: 102%; height: 102%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1200; opacity: 1; background-color: var(--COLOR_supportLight_100); } @media (max-width: 480px) { .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent { height: 100vh; position: fixed; bottom: 0; top: auto; left: auto; transform: initial; } } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .heartContainer { display: flex; position: absolute; left: 50%; top: 50%; opacity: 1; animation-timing-function: ease-out; } @media (max-width: 480px) { .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .heartContainer { position: fixed; } } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .heartContainer .icon_heart_like_filled { fill: var(--COLOR_primary_100); height: 3400px; width: 3400px; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .header { opacity: 0; font: var(--FONT_brand_400); color: var(--COLOR_supportLight_100); width: 100%; height: 50%; align-items: flex-end; display: flex; justify-content: center; text-align: center; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .pictures { display: flex; height: 50%; width: 100%; justify-content: center; align-items: flex-start; position: absolute; top: 45%; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .pictures .photo.isMatchUnlocked::after { border-bottom-right-radius: var(--borderRadius_100); border-bottom-left-radius: var(--borderRadius_100); content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-image: var(--COLOR_gradient_unlock_150_0_fade); opacity: 0.7; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .pictures .photo.myPic { transform: translate(-500px, 100px) rotate(-15deg); opacity: 0; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .pictures .photo.partnerPic { transform: translate(500px, 100px) rotate(15deg); opacity: 0; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .pictures .photo img { display: block; height: 165px; width: 130px; box-shadow: var(--boxShadow_small); border-radius: var(--borderRadius_100); object-fit: cover; } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .pictures .photo img { height: 185px; width: 145px; } } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent .pictures .photo::before { content: ""; position: absolute; display: block; inset: 0 0 0 0; border: 1px solid var(--COLOR_supportLight_070); border-radius: var(--borderRadius_100); z-index: 2; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent.is-animating .heartContainer { will-change: transform, opacity, height, width, scale; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent.is-animating .heartContainer .icon_heart_like_filled { will-change: transform, opacity, height, width, scale; animation: heart 3.5s forwards; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent.is-animating .header { animation: header 3.5s ease-out forwards; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent.is-animating .myPic { will-change: transform, scale; animation: myPicFlyIn 3.5s forwards; } .listPages#partnerSuggestionListPage #bottomsheetMessenger #animationContent.is-animating .partnerPic { will-change: transform; animation: partnerPicFlyIn 3.5s forwards; } @keyframes myPicFlyIn { 0% { transform: translate(-500px, 100px) rotate(-15deg); opacity: 0; animation-timing-function: cubic-bezier(0.8, 0.14, 0.31, 0.88); } 45% { transform: translate(6px, 0) rotate(-3deg); opacity: 1; animation-timing-function: ease-out; } 50% { transform: translate(4px, 0) rotate(-3deg); opacity: 1; animation-timing-function: ease-out; } 60%, 85% { transform: translate(0, 0) rotate(-3deg); opacity: 1; } 100% { opacity: 0; transform: translate(50px, 0) rotate(-3deg) scale(0); } } @keyframes partnerPicFlyIn { 0% { transform: translate(500px, 100px) rotate(15deg); opacity: 0; animation-timing-function: cubic-bezier(0.8, 0.14, 0.31, 0.88); } 45% { transform: translate(-6px, 0) rotate(3deg); opacity: 1; animation-timing-function: ease-out; } 50% { transform: translate(-4px, 0) rotate(3deg); opacity: 1; animation-timing-function: ease-out; } 60%, 85% { transform: translate(0, 0) rotate(3deg); opacity: 1; } 100% { opacity: 0; transform: translate(-50px, 0) rotate(3deg) scale(0); } } @keyframes header { 0%, 10% { opacity: 0; transform: translate(0, 0) scale(0.6); } 20%, 25% { opacity: 1; transform: translate(0, 0) scale(1); } 45% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.75); } 50% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.77); } 60%, 85% { opacity: 1; transform: translate(0, var(--header-margin)) scale(0.75); } 100% { transform: translate(0, 50%) scale(0); opacity: 0; } } @keyframes heart { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.15); } 40%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); background-color: rgba(0, 0, 0, 0); } } .listPages#partnerSuggestionListPage #pc_pvl_banner_fullWidth { padding: 0 12px; } .listPages#partnerSuggestionListPage .cardDeckHeaderOutsideOfCards { gap: 16px; margin-bottom: 6px; margin-top: 16px; justify-content: flex-end; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage .cardDeckHeaderOutsideOfCards { gap: 24px; margin-bottom: 24px; margin-top: 0; justify-content: flex-start; } } .listPages#partnerSuggestionListPage .cardDeckHeaderOutsideOfCards:has(peg-like-scarcity-banner) { flex-wrap: wrap; } .listPages#partnerSuggestionListPage:has(#listEntries peg-supercard-match) .productFeaturedProfile .bubble { display: flex; } .listPages#partnerSuggestionListPage .productFeaturedProfile { position: relative; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage .productFeaturedProfile .wdk-button.t-size_75 { padding: 0 20px; font: var(--FONT_default_100); height: 48px; } } .listPages#partnerSuggestionListPage .productFeaturedProfile .bubble { display: none; align-items: center; justify-content: center; position: absolute; top: -4px; right: 2px; width: 14px; height: 14px; background-color: var(--COLOR_primary_100); color: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_circle); font: var(--FONT_highlight_50); border: 2px solid var(--COLOR_supportLight_100); } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage .productFeaturedProfile .bubble { top: -6px; right: 8px; } } .listPages#partnerSuggestionListPage #sorting { padding: 0; } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage #sorting { width: auto; } } .listPages#partnerSuggestionListPage #sorting wdk-dialog-trigger[dialog-id="sortingDialog"] { margin-right: 16px; } .listPages#partnerSuggestionListPage #searchOptions .searchOptionsBody { padding-bottom: 24px; } .listPages#partnerSuggestionListPage #searchOptions .searchOptionsBody::after { content: ""; display: table; clear: both; } .listPages#partnerSuggestionListPage #searchOptions .searchOptionsBody dl { margin: 0 0 8px 0; } .listPages#partnerSuggestionListPage #searchOptions .searchOptionsBody dl dt { display: none; } .listPages#partnerSuggestionListPage #searchOptions .searchOptionsBody dl dd { margin: 0; position: relative; padding: 14px 0 14px 48px; word-wrap: break-word; } .listPages#partnerSuggestionListPage #searchOptions .searchOptionsBody dl dd .wdk-icon { position: absolute; top: 12px; left: 0; } .listPages#partnerSuggestionListPage #filterOptions .filter { position: relative; margin: 0 0 0 0; padding: 0 0 0 48px; } .listPages#partnerSuggestionListPage #filterOptions .filter .wdk-icon { position: absolute; top: 7px; left: 0; width: 24px; height: 24px; fill: var(--COLOR_supportDark_090); } .listPages#partnerSuggestionListPage #filterOptions .filter#filter_holiday .wdk-form-dropdown { padding-bottom: 8px; } .listPages#partnerSuggestionListPage #filterOptions #filteredSuggestions { position: relative; margin: 20px 0 8px 0; padding: 24px 12px; background: var(--COLOR_supportDark_600); text-align: center; } .listPages#partnerSuggestionListPage #filterOptions #filteredSuggestions::before { position: absolute; content: ""; left: 47%; bottom: 100%; width: 0; height: 0; border-style: solid; border-width: 0 10px 12px 10px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) var(--COLOR_supportDark_600) rgba(0, 0, 0, 0); } .listPages#partnerSuggestionListPage #filterOptions #filteredSuggestions span { display: block; color: var(--COLOR_primary_100); } .listPages#partnerSuggestionListPage #filterOptions .cardFooter { justify-content: center; margin: 8px 0; } .listPages#partnerSuggestionListPage #filterOptions .is-premiumFeature { display: none; } .listPages#partnerSuggestionListPage #filterOptions .is-premiumFeature p { font: var(--FONT_default_75); text-align: center; } .listPages#partnerSuggestionListPage #filterOptions .is-premiumFeature.is-visible { display: block; } .listPages#partnerSuggestionListPage #searchOptions .wdk-button:not([class*="plainDefault"]), .listPages#partnerSuggestionListPage #searchOptions .wdk-button:not([class*="plainHighlight"]), .listPages#partnerSuggestionListPage #filterOptions .wdk-button:not([class*="plainDefault"]), .listPages#partnerSuggestionListPage #filterOptions .wdk-button:not([class*="plainHighlight"]) { width: 100%; } .listPages#partnerSuggestionListPage #searchOptions .cardFooter, .listPages#partnerSuggestionListPage #filterOptions .cardFooter { display: flex; flex-wrap: wrap; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage #searchOptions .cardFooter, .listPages#partnerSuggestionListPage #filterOptions .cardFooter { flex-wrap: nowrap; } } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage #searchOptions .cardFooter, .listPages#partnerSuggestionListPage #filterOptions .cardFooter { flex-wrap: wrap; } } .listPages#partnerSuggestionListPage #searchOptions .cardFooter .wdk-button:not([class*="plainDefault"]):first-child, .listPages#partnerSuggestionListPage #searchOptions .cardFooter .wdk-button:not([class*="plainHighlight"]):first-child, .listPages#partnerSuggestionListPage #filterOptions .cardFooter .wdk-button:not([class*="plainDefault"]):first-child, .listPages#partnerSuggestionListPage #filterOptions .cardFooter .wdk-button:not([class*="plainHighlight"]):first-child { margin-bottom: 12px; } @media only screen and (min-width: 481px) { .listPages#partnerSuggestionListPage #searchOptions .cardFooter .wdk-button:not([class*="plainDefault"]):first-child, .listPages#partnerSuggestionListPage #searchOptions .cardFooter .wdk-button:not([class*="plainHighlight"]):first-child, .listPages#partnerSuggestionListPage #filterOptions .cardFooter .wdk-button:not([class*="plainDefault"]):first-child, .listPages#partnerSuggestionListPage #filterOptions .cardFooter .wdk-button:not([class*="plainHighlight"]):first-child { margin-right: 20px; } } @media only screen and (min-width: 768px) { .listPages#partnerSuggestionListPage #searchOptions .cardFooter .wdk-button:not([class*="plainDefault"]):first-child, .listPages#partnerSuggestionListPage #searchOptions .cardFooter .wdk-button:not([class*="plainHighlight"]):first-child, .listPages#partnerSuggestionListPage #filterOptions .cardFooter .wdk-button:not([class*="plainDefault"]):first-child, .listPages#partnerSuggestionListPage #filterOptions .cardFooter .wdk-button:not([class*="plainHighlight"]):first-child { margin-right: 0; } } .listPages .partnerListCard { grid-auto-rows: auto 1fr; } .listPages .partnerListCard ul.partnerList { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; padding: 0 0 16px 0; } @media only screen and (min-width: 768px) { .listPages .partnerListCard ul.partnerList { grid-gap: 16px; padding: 0 0 20px 0; grid-template-columns: 1fr 1fr 1fr; } } .listPages .partnerListCard ul.partnerList li { position: relative; aspect-ratio: 2/3; color: var(--COLOR_supportLight_100); border-radius: var(--borderRadius_100); max-width: 310px; } .listPages .partnerListCard ul.partnerList li::after { content: ""; display: block; padding-bottom: 150%; } .listPages .partnerListCard ul.partnerList li.is-matchUnlocked { border-radius: calc(var(--borderRadius_100) + 2px); background: var(--COLOR_match_unlock_gradient_border); border: 2px solid rgba(0, 0, 0, 0); } .listPages .partnerListCard ul.partnerList li.is-matchUnlocked [class^="fallbackGradient_"], .listPages .partnerListCard ul.partnerList li.is-matchUnlocked [class*=" fallbackGradient_"] { border: 2px solid var(--COLOR_supportLight_100); } .listPages .partnerListCard ul.partnerList li a.partnerItem { position: absolute; width: 100%; height: 100%; z-index: 11; border-radius: var(--borderRadius_100); } .listPages .partnerListCard ul.partnerList li a.partnerItem:focus-visible { outline: 0; border: 2px dashed var(--COLOR_supportDark_100); } .listPages .partnerListCard ul.partnerList li a.partnerItem:focus-visible::after { content: ""; display: block; border: 2px dashed var(--COLOR_supportLight_100); height: 100%; border-radius: var(--borderRadius_100); } .listPages .partnerListCard ul.partnerList li a.partnerItem.is-disabled { opacity: 0.7; z-index: 13; background-image: var(--COLOR_gradient_premium_100_45); } .listPages .partnerListCard ul.partnerList li .photoWrapper { position: absolute; inset: 0 0 0 0; flex-grow: 1; } .listPages .partnerListCard ul.partnerList li .photoWrapper .photo { display: block; height: 100%; width: 100%; object-fit: cover; border-radius: var(--borderRadius_100); } .listPages .partnerListCard ul.partnerList li .cardHeader { position: relative; z-index: 12; padding: 0 8px; } @media only screen and (min-width: 481px) { .listPages .partnerListCard ul.partnerList li .cardHeader { padding: 0 16px; } } .listPages .partnerListCard ul.partnerList li .cardHeader .matchingPoints { position: absolute; top: 8px; left: 8px; margin-top: 0; } @media only screen and (min-width: 481px) { .listPages .partnerListCard ul.partnerList li .cardHeader .matchingPoints { top: 16px; left: 16px; } } .listPages .partnerListCard ul.partnerList li .cardHeader .matchingPoints .wdk-button { padding: 0 8px; } .listPages .partnerListCard ul.partnerList li .cardHeader .matchingPoints .wdk-button svg.wdk-icon { width: 22px; height: 22px; fill: var(--COLOR_supportLight_100); } .listPages .partnerListCard ul.partnerList li .cardHeader .matchingPoints .wdk-button img { width: auto; height: auto; } .listPages .partnerListCard ul.partnerList li .cardHeader .matchingPoints .wdk-button .text { font: var(--FONT_default_200); } .listPages .partnerListCard ul.partnerList li .cardHeader .favoriteToggle { position: absolute; top: 8px; right: 8px; } @media only screen and (min-width: 481px) { .listPages .partnerListCard ul.partnerList li .cardHeader .favoriteToggle { top: 16px; right: 16px; } } .listPages .partnerListCard ul.partnerList li .cardHeader .favoriteToggle:focus-visible { outline-width: 1px; } .listPages .partnerListCard ul.partnerList li .cardHeader .favoriteToggle:focus-visible::after { outline: 2px dashed currentcolor; outline-offset: 2px; outline-width: 1px; outline-color: var(--COLOR_supportDark_100); outline-offset: -5px; } .listPages .partnerListCard ul.partnerList li .cardFooter { position: absolute; z-index: 12; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: 0 8px 16px 8px; background-image: linear-gradient(transparent, var(--COLOR_supportDark_090)); border-bottom-left-radius: var(--borderRadius_100); border-bottom-right-radius: var(--borderRadius_100); min-height: 140px; pointer-events: none; } @media only screen and (min-width: 481px) { .listPages .partnerListCard ul.partnerList li .cardFooter { padding: 0 16px 20px 16px; } } .listPages .partnerListCard ul.partnerList li .cardFooter h3 { display: flex; align-items: center; margin: 0 0 8px 0; } .listPages .partnerListCard ul.partnerList li .cardFooter h3 .onlineNow { margin: 0; line-height: 0; } @media only screen and (min-width: 768px) { .listPages .partnerListCard ul.partnerList li .cardFooter h3 .onlineNow { display: none; } } .listPages .partnerListCard ul.partnerList li .cardFooter h3 .onlineNow::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; background: var(--COLOR_alertOnline_100); border-radius: var(--borderRadius_circle); } .listPages .partnerListCard ul.partnerList li .cardFooter h3 .onlineNow .onlineText { display: none; } .listPages .partnerListCard ul.partnerList li .cardFooter h3 .primaryPartnerLabel { order: 1; overflow: hidden; max-width: 100%; display: inline-block; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; font: var(--FONT_highlight_100); } @media only screen and (min-width: 481px) { .listPages .partnerListCard ul.partnerList li .cardFooter h3 .primaryPartnerLabel { font: var(--FONT_highlight_200); } } @media only screen and (min-width: 768px) { .listPages .partnerListCard ul.partnerList li .cardFooter h3 .primaryPartnerLabel { max-width: calc(100% - 45px); } } @media only screen and (min-width: 980px) { .listPages .partnerListCard ul.partnerList li .cardFooter h3 .primaryPartnerLabel { font: var(--FONT_highlight_300); } } .listPages .partnerListCard ul.partnerList li .cardFooter h3 .age { order: 2; font: var(--FONT_default_100); } @media only screen and (min-width: 481px) { .listPages .partnerListCard ul.partnerList li .cardFooter h3 .age { font: var(--FONT_highlight_200); } } @media only screen and (min-width: 980px) { .listPages .partnerListCard ul.partnerList li .cardFooter h3 .age { font: var(--FONT_default_300); } } .listPages .partnerListCard ul.partnerList li .cardFooter h3 .idSecured { display: inline-flex; order: 3; } .listPages .partnerListCard ul.partnerList li .cardFooter h3 .idSecured svg { fill: var(--COLOR_supportLight_080); margin-left: 4px; } .listPages .partnerListCard ul.partnerList li .cardFooter h3 .idSecured + .primaryPartnerLabel { max-width: calc(100% - 60px); } .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation { margin-top: 8px; margin-bottom: 40px; min-height: 44px; width: 100%; } @media only screen and (min-width: 481px) { .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation { margin-bottom: 0; } } .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation .onlineNow { padding-left: 4px; } .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation .onlineNow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--COLOR_alertOnline_100); border-radius: var(--borderRadius_circle); } .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation .linkToDistance { position: relative; padding-left: 16px; pointer-events: all; display: inline-flex; align-items: center; background-image: var(--COLOR_gradient_premium_100_45); } .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation .linkToDistance .wdk-icon { position: absolute; left: 4px; width: 12px; height: 12px; fill: var(--COLOR_supportLight_100); } .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation .zip, .listPages .partnerListCard ul.partnerList li .cardFooter .onlineAndLocation .distance { white-space: nowrap; } .listPages .partnerListCard ul.partnerList li .cardFooter .occupation { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .listPages .partnerListCard ul.partnerList li.wdk-premiumElement { padding: 0; justify-content: center; background-image: var(--COLOR_gradient_premium_100_45); } .listPages .partnerListCard ul.partnerList li.wdk-premiumElement .partnerItem:hover + .premiumText a { text-decoration: underline; } .listPages .partnerListCard ul.partnerList li.wdk-premiumElement .premiumText { position: absolute; left: 0; z-index: 11; padding: 0 8px; font: var(--FONT_default_75); cursor: pointer; } @media only screen and (min-width: 481px) { .listPages .partnerListCard ul.partnerList li.wdk-premiumElement .premiumText { padding: 0 16px; font: var(--FONT_default_100); } } @media (max-width: 480px) { .listPages#favoritesListPage .wdk-cardDeck #premiumBannerCard, .listPages#visitedListPage .wdk-cardDeck #premiumBannerCard, .listPages#visitorsListPage .wdk-cardDeck #premiumBannerCard { margin-bottom: 24px; } } .listPages#favoritesListPage section.wdk-cardDeck.t-oneColumn, .listPages#visitedListPage section.wdk-cardDeck.t-oneColumn, .listPages#visitorsListPage section.wdk-cardDeck.t-oneColumn { display: grid; grid-template-rows: 1fr auto; } .listPages#favoritesListPage section.wdk-cardDeck.t-oneColumn .primaryCol, .listPages#visitedListPage section.wdk-cardDeck.t-oneColumn .primaryCol, .listPages#visitorsListPage section.wdk-cardDeck.t-oneColumn .primaryCol { display: grid; grid-template-rows: auto 1fr; } .listPages .partnerListCardEmpty { display: grid; } @media only screen and (min-width: 768px) { .listPages .partnerListCardEmpty { grid-template-rows: auto 1fr; } } .listPages .partnerListCardEmpty .emptyListCard { padding-bottom: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 540px; margin: 0 auto; font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); } .listPages .partnerListCardEmpty .emptyListCard .imageWrapper { margin-bottom: 40px; } .listPages .partnerListCardEmpty .emptyListCard .textWrapper { text-align: center; margin-bottom: 32px; } .listPages .partnerListCardEmpty .emptyListCard h3 { font: var(--FONT_highlight_200); color: var(--COLOR_supportDark_100); margin-bottom: 16px; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .listPages #welcomeModal { height: fit-content; background-color: var(--COLOR_tertiary_100); } @media only screen and (min-width: 481px) { .listPages #welcomeModal { top: 0; bottom: 0; margin: auto 0; } } .listPages #welcomeModal .bottomSheetInner { height: fit-content; text-align: center; padding: 36px 24px; } @media only screen and (min-width: 768px) { .listPages #welcomeModal .bottomSheetInner { padding-bottom: 20px; } } .listPages #welcomeModal .bottomSheetInner article { display: grid; grid-template-rows: auto auto auto; gap: 24px; max-width: 100%; } .listPages #welcomeModal .bottomSheetInner article .visual { align-self: flex-end; } .listPages #welcomeModal .bottomSheetInner article h3 { width: 100%; padding: 0; margin: 0; font: var(--FONT_brand_200); font-style: var(--FONT_style_brand); } .listPages #welcomeModal .bottomSheetInner article img { justify-self: center; width: 230px; height: 230px; } .listPages #welcomeModal .bottomSheetInner footer { display: flex; width: 100%; min-height: 44px; padding: 8px 0; align-items: center; justify-content: center; background-color: var(--COLOR_tertiary_100); flex-shrink: 0; } @media only screen and (min-width: 481px) { .listPages #welcomeModal .bottomSheetInner footer { padding: 20px 10px; } } .listPages #welcomeModal .bottomSheetInner footer .buttonsContainer { width: 100%; display: flex; flex-flow: wrap; justify-content: space-between; margin: 0; padding: 0; } .listPages #welcomeModal .bottomSheetInner footer .buttonsContainer .buttonItem { flex-basis: calc(40% - 20px); flex-grow: 1; list-style: none; text-align: center; vertical-align: top; margin: 2px 0; padding: 0 10px; } .listPages #welcomeModal .bottomSheetInner footer .buttonsContainer .buttonItem .wdk-button { top: initial; right: initial; z-index: initial; width: auto; } .listPages peg-onboarding-product-featured-profile { --wdk-dialog-body-default-bg-color: var(--COLOR_tertiary_100); } .listPages peg-onboarding-product-featured-profile article { text-align: center; padding: 42px 16px 0 16px; } .listPages peg-onboarding-product-featured-profile article .newTag { display: inline-block; margin: 10px; padding: 4px 10px; height: auto; background-color: var(--COLOR_primary_100_light); color: var(--COLOR_primary_100); font: var(--FONT_default_75); border-radius: var(--borderRadius_rounded); } .listPages peg-onboarding-product-featured-profile article h3 { font: var(--FONT_brand_400); font-style: var(--FONT_style_brand); margin-bottom: 35px; } .listPages peg-onboarding-product-featured-profile article img { margin-bottom: 19px; width: 100%; max-width: 300px; height: auto; } .listPages peg-onboarding-product-featured-profile article p { margin: 0 0 24px 0; } .listPages .wdk-cardDeck .primaryCol { width: 100%; margin-right: 0; float: none; } .listPages .wdk-cardDeck .secondaryCol { float: none; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .listPages .wdk-cardDeck .secondaryCol .wdk-card { width: 100%; } @media only screen and (min-width: 768px) { .listPages .wdk-cardDeck .secondaryCol .wdk-card { width: calc(50% - 10px); } } .listPages .wdk-cardDeck .secondaryCol .wdk-card.linkListCard { width: 100%; } .listPages .wdk-card > h2 span { color: var(--COLOR_supportDark_090); } peg-sorting-dialog-content { display: block; } peg-sorting-dialog-content form { margin-top: 3px; } peg-sorting-dialog-content form .row { display: flex; } peg-sorting-dialog-content form .row peg-sorting-mitigation-trigger { cursor: pointer; } peg-like-scarcity-banner { opacity: 1; width: 100%; max-height: 400px; transition: opacity 0.5s, max-height 0.5s; } peg-like-scarcity-banner #contentWrapper { display: grid; grid-auto-rows: auto; gap: 16px; justify-items: center; width: 100%; padding: 24px 16px; margin-bottom: 10px; color: var(--COLOR_supportLight_100); background-color: var(--COLOR_decoration_200); box-shadow: inset 0 0 0 1px var(--COLOR_supportLight_070); border-radius: var(--borderRadius_100); text-align: center; } peg-like-scarcity-banner #contentWrapper:has(wdk-tag) { padding-bottom: 10px; } @media only screen and (min-width: 768px) { peg-like-scarcity-banner #contentWrapper { grid-template-columns: 1fr auto; grid-auto-rows: initial; grid-template-rows: auto; gap: 4px 8px; place-items: center start; padding: 16px 24px; text-align: left; } peg-like-scarcity-banner #contentWrapper:has(.wdk-button.closeButtonMobile) { grid-template-columns: 1fr auto auto; padding: 16px 12px 16px 24px; } peg-like-scarcity-banner #contentWrapper:has(wdk-tag) { padding-bottom: 16px; } } @media only screen and (min-width: 768px) { peg-like-scarcity-banner #contentWrapper .bannerBody { grid-column: 1; } } peg-like-scarcity-banner #contentWrapper .bannerBody h3 { font: var(--FONT_highlight_100); margin: 0; } peg-like-scarcity-banner #contentWrapper .bannerBody p { font: var(--FONT_default_75); margin: 0; padding: 0; } peg-like-scarcity-banner #contentWrapper .bannerBody p:empty { margin: 0; } peg-like-scarcity-banner #contentWrapper .bannerBody h3:not(:empty) + p:not(:empty) { margin: 8px 0 0 0; } @media only screen and (min-width: 768px) { peg-like-scarcity-banner #contentWrapper .bannerBody h3:not(:empty) + p:not(:empty) { margin: 4px 0 0 0; } } peg-like-scarcity-banner #contentWrapper wdk-lottie-animation { display: flex; width: 153px; height: auto; } @media only screen and (min-width: 768px) { peg-like-scarcity-banner #contentWrapper wdk-lottie-animation { grid-column: 2; } } @media only screen and (min-width: 768px) { peg-like-scarcity-banner #contentWrapper .wdk-button { grid-column: 3; } } peg-like-scarcity-banner #contentWrapper wdk-tag { --wdk-tag-background-color: transparent; --wdk-tag-text-color: var(--COLOR_supportLight_090); justify-self: end; } peg-like-scarcity-banner.has-closingAnimation { overflow: hidden; opacity: 0; max-height: 0; } #basiccriteriaPage .buttonRow { display: flex; justify-content: flex-end; gap: 16px; } #basiccriteriaPage #validationError { margin-bottom: 16px; } #basiccriteriaPage .searchCriteriaItem { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(48px, auto) 1fr auto; column-gap: 16px; position: relative; } @media only screen and (min-width: 768px) { #basiccriteriaPage .searchCriteriaItem { padding: 0 16px; } } #basiccriteriaPage .searchCriteriaItem:not(:first-of-type) { border-top: 1px solid var(--COLOR_supportDark_050); padding-top: 24px; padding-bottom: 8px; } #basiccriteriaPage .searchCriteriaItem .wdk-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; } #basiccriteriaPage .searchCriteriaItem h3 { grid-column: 2; grid-row: 1; margin: 8px 0 0 0; color: var(--COLOR_supportDark_300); font: var(--FONT_default_50); text-transform: uppercase; } #basiccriteriaPage .searchCriteriaItem .displayValue { grid-column: 2; grid-row: 2; } #basiccriteriaPage .searchCriteriaItem .wdk-tags.premium { grid-column: 3; grid-row: 1 / span 2; align-self: center; } #basiccriteriaPage .searchCriteriaItem .editButtonWrapper { grid-column: 3; grid-row: 1 / span 2; align-self: center; } #basiccriteriaPage .searchCriteriaItem.formElementRow .fromToWrapper { grid-column: 2; grid-row: 2; margin-top: 4px; } #basiccriteriaPage .searchCriteriaItem.formElementRow .fromToWrapper .fromToCol { float: left; width: 45%; max-width: 120px; margin-right: 5%; } #basiccriteriaPage .searchCriteriaItem.formElementRow .fromToWrapper .fromToCol .c-nativeSelectFormElement { margin: 4px 0; } #basiccriteriaPage .searchCriteriaItem.formElementRow .fromToWrapper .wdk-form-dropdown { padding-bottom: 0; } #basiccriteriaPage .searchCriteriaItem.formElementRow:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; } #basiccriteriaPage .searchCriteriaItem.formElementRow.editable { cursor: pointer; } #basiccriteriaPage .searchCriteriaItem.is-premiumFeature { cursor: pointer; } #basiccriteriaPage .searchCriteriaItem.is-premiumFeature:hover .wdk-tags.premium { box-shadow: inset 0 0 0 1000px var(--COLOR_supportLight_050); } #basiccriteriaPage .searchCriteriaItem#countrySearch, #basiccriteriaPage .searchCriteriaItem#distanceSearch { display: block; padding-top: 2px; } #basiccriteriaPage .searchCriteriaItem#countrySearch .wdk-form-toggles label, #basiccriteriaPage .searchCriteriaItem#distanceSearch .wdk-form-toggles label { font: var(--FONT_highlight_100); } #basiccriteriaPage .searchCriteriaItem#countrySearch .displayToggle, #basiccriteriaPage .searchCriteriaItem#distanceSearch .displayToggle { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 0fr; gap: 16px; margin-left: 34px; transition: grid-template-rows 0.3s; } #basiccriteriaPage .searchCriteriaItem#countrySearch .displayToggle .displayValue, #basiccriteriaPage .searchCriteriaItem#distanceSearch .displayToggle .displayValue { font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); overflow: hidden; grid-column: auto; grid-row: auto; } #basiccriteriaPage .searchCriteriaItem#countrySearch .displayToggle .editButtonWrapper, #basiccriteriaPage .searchCriteriaItem#distanceSearch .displayToggle .editButtonWrapper { overflow: hidden; grid-column: auto; grid-row: auto; align-self: auto; } #basiccriteriaPage .searchCriteriaItem#countrySearch .displayToggle.is-open, #basiccriteriaPage .searchCriteriaItem#distanceSearch .displayToggle.is-open { grid-template-rows: 1fr; } #basiccriteriaPage .searchCriteriaItem#countrySearch .displayToggle.is-open .editButtonWrapper, #basiccriteriaPage .searchCriteriaItem#distanceSearch .displayToggle.is-open .editButtonWrapper { padding: 4px; } #basiccriteriaPage .searchCriteriaItem#distanceSearch.is-premiumFeature .premiumInfo { display: grid; justify-content: space-between; gap: 16px; margin-left: 34px; } #basiccriteriaPage .searchCriteriaItem#distanceSearch.is-premiumFeature .premiumInfo .displayValue { grid-row: 1; grid-column: 1; font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); } #basiccriteriaPage .searchCriteriaItem#distanceSearch.is-premiumFeature .premiumInfo wdk-commerce-tag { grid-row: 1; grid-column: 2; } #basiccriteriaPage .wdk-card#cardCriterias, #basiccriteriaPage .wdk-card#cardCountry { gap: 16px; } #basiccriteriaPage .wdk-card#cardCriterias h2, #basiccriteriaPage .wdk-card#cardCountry h2 { padding-bottom: 0; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries { margin-top: 16px; padding: 0; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li { position: relative; margin-bottom: 8px; border: 1px solid var(--COLOR_supportDark_500); border-radius: 4px; list-style: none; cursor: pointer; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li li:last-of-type { margin-bottom: 16px; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li.has-checkedStates button { color: var(--COLOR_alertSuccess_100); } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li.has-checkedStates button .statesCountWrapper { display: inline-block; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li.is-open button { border-bottom: 1px solid var(--COLOR_supportDark_500); } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li.is-open button::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); vertical-align: -3px; width: 14px; height: 14px; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li.is-open .modalStates { max-height: 5000px; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li.is-singleState .singleState { display: inline-block; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li.is-multiStates .multiStates { display: inline-block; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li button { width: 100%; text-align: left; display: inline-block; border: none; border-radius: 4px; background-color: var(--COLOR_supportLight_100); color: var(--COLOR_primary_100); cursor: pointer; padding: 12px 48px 8px 8px; font: var(--FONT_highlight_75); text-transform: uppercase; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li button::before { position: absolute; right: 16px; content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); vertical-align: -3px; width: 12px; height: 12px; } @media (hover: hover) { #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li button:hover { color: var(--COLOR_supportDark_100); } } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li button .statesCountWrapper { display: none; text-transform: none; font: var(--FONT_default_75); font-style: italic; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li button .singleState, #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li button .multiStates { display: none; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li ul.modalStates { padding-left: 14px; overflow: hidden; transition: max-height 300ms ease-in-out; max-height: 0; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li ul.modalStates li { list-style: none; margin-left: 16px; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li ul.modalStates li.allStatesChecker { font-style: italic; margin-left: 0; } #basiccriteriaPage #editCountrySearchModal ul.modalCountries > li ul.modalStates li label { min-height: 40px; width: 100%; } #basiccriteriaPage #editCountrySearchModal:has(wdk-premium-teaser) ul.modalCountries { margin-top: 0; } body.legalPages.isInApp #pageWrapper { padding-top: 0; } body.legalPages.isInApp #pageWrapper #pageHeader, body.legalPages.isInApp #pageWrapper peg-footer { display: none; } body.legalPages.isInApp #pageWrapper .wdk-cardDeck .primaryCol { width: 100%; margin-right: 0; } body.legalPages.isInApp #pageWrapper .wdk-cardDeck .secondaryCol { display: none; } body.legalPages#personalDataInquiryInfoPage .wdk-cardDeck .wdk-card > h3 { font: var(--FONT_highlight_100); margin-top: 16px; } body.legalPages#personalDataInquiryInfoPage details { margin-block: 24px; border: 2px solid var(--COLOR_supportDark_070); border-radius: var(--borderRadius_75); } body.legalPages#personalDataInquiryInfoPage details summary { position: relative; padding: 8px; cursor: pointer; } body.legalPages#personalDataInquiryInfoPage details summary h3 { display: inline; font: var(--FONT_default_100); } body.legalPages#personalDataInquiryInfoPage details .content { color: var(--COLOR_defaultText); position: relative; padding: 9px 22px 9px 40px; } body.legalPages#personalDataInquiryInfoPage details .content p { margin: 0 0 12px 0; font: var(--FONT_default_75); } body.legalPages#personalDataInquiryInfoPage details .content .list { padding-left: 12px; list-style: lower-alpha; font: var(--FONT_default_75); } body.legalPages#personalDataInquiryInfoPage details .content .list li { padding-left: 8px; } body.legalPages#fvvCancellationPage #fvvCancellationForm, body.legalPages#dsaComplaintPage #dsaCompliantForm, body.legalPages#dsaContactPage #dsaContactForm { max-width: 600px; margin: 40px 0; } @media only screen and (min-width: 481px) { body.legalPages#fvvCancellationPage #fvvCancellationForm .form-grid, body.legalPages#dsaComplaintPage #dsaCompliantForm .form-grid, body.legalPages#dsaContactPage #dsaContactForm .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: 20px; } body.legalPages#fvvCancellationPage #fvvCancellationForm .form-grid .full-width, body.legalPages#dsaComplaintPage #dsaCompliantForm .form-grid .full-width, body.legalPages#dsaContactPage #dsaContactForm .form-grid .full-width { grid-column: 1 / span 2; } } body.legalPages#fvvCancellationPage #fvvCancellationForm .wdk-form-text.is-nearLimit input, body.legalPages#fvvCancellationPage #fvvCancellationForm .wdk-form-text.is-nearLimit textarea, body.legalPages#dsaComplaintPage #dsaCompliantForm .wdk-form-text.is-nearLimit input, body.legalPages#dsaComplaintPage #dsaCompliantForm .wdk-form-text.is-nearLimit textarea, body.legalPages#dsaContactPage #dsaContactForm .wdk-form-text.is-nearLimit input, body.legalPages#dsaContactPage #dsaContactForm .wdk-form-text.is-nearLimit textarea { padding-right: 70px; } body.legalPages#fvvCancellationPage #fvvCancellationForm button[type="submit"], body.legalPages#dsaComplaintPage #dsaCompliantForm button[type="submit"], body.legalPages#dsaContactPage #dsaContactForm button[type="submit"] { margin-top: 30px; } body.legalPages#dsaComplaintPage #dsaCompliantForm .fileInputWrapper, body.legalPages#dsaContactPage #dsaContactForm .fileInputWrapper { display: flex; } body.legalPages#dsaComplaintPage #dsaCompliantForm input[type="file"], body.legalPages#dsaContactPage #dsaContactForm input[type="file"] { padding: 10px; cursor: pointer; } body.legalPages#dsaComplaintPage #dsaCompliantForm .resetFileInput, body.legalPages#dsaContactPage #dsaContactForm .resetFileInput { display: none; min-width: 48px; } @media print { body.legalPages#fvvCancellationConfirmationPage #pageWrapper { padding-top: 0; } body.legalPages#fvvCancellationConfirmationPage #pageHeader, body.legalPages#fvvCancellationConfirmationPage peg-footer { display: none; } } body.legalPages#fvvCancellationConfirmationPage table { margin: 40px 0; border-collapse: collapse; } body.legalPages#fvvCancellationConfirmationPage table td { display: table-cell; padding: 8px 0; vertical-align: top; } body.legalPages#fvvCancellationConfirmationPage table td:first-of-type { padding-right: 16px; } @media only screen and (max-width: 481px) { body.legalPages#fvvCancellationConfirmationPage table tr, body.legalPages#fvvCancellationConfirmationPage table td { display: block; } body.legalPages#fvvCancellationConfirmationPage table tr { margin-bottom: 10px; } body.legalPages#fvvCancellationConfirmationPage table td { padding: 0; } body.legalPages#fvvCancellationConfirmationPage table td:first-of-type { padding-right: 0; } } body.legalPages#fvvCancellationConfirmationPage #printConfirmation { display: inline-block; margin-bottom: 10px; text-decoration: none; cursor: pointer; } body.legalPages#fvvCancellationConfirmationPage #printConfirmation:hover { text-decoration: underline; } body.legalPages#fvvCancellationConfirmationPage #printConfirmation::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_download.svg); mask-image: url(../../img/icons/single_color/icon_download.svg); vertical-align: -3px; width: 32px; height: 32px; display: inline-block; fill: var(--COLOR_primary_100); vertical-align: -11px; margin-right: 5px; } body.legalPages#fvvCancellationConfirmationPage .small { font: var(--FONT_default_75); } body.user-interview .header-image { display: block; width: 100%; height: auto; margin-bottom: 24px; } @media only screen and (min-width: 768px) { body.user-interview .header-image { width: calc(100% + 48px); margin-left: -24px; } } body.user-interview #userinterviewsForm { margin: 40px 0; } @media only screen and (min-width: 481px) { body.user-interview #userinterviewsForm .form-grid { display: grid; grid-column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); place-items: start; justify-items: stretch; } } body.user-interview #userinterviewsForm .form-grid .full-width { grid-column: 1 / span 2; } body.user-interview #userinterviewsForm span.label { display: flex; align-items: center; width: 100%; font: var(--FONT_default_75); color: var(--COLOR_supportDark_100); white-space: normal; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; padding-right: 20px; } body.user-interview #userinterviewsForm .offered-dates { display: flex; flex-wrap: wrap; padding-bottom: 20px; } body.user-interview #userinterviewsForm .offered-dates .label { flex: 0 0 100%; } body.user-interview #userinterviewsForm .offered-dates .wdk-form-toggles { flex: 0 0 50%; } body.user-interview #userinterviewsForm .wdk-form-toggles input[type="checkbox"] + label, body.user-interview #userinterviewsForm .wdk-form-toggles input[type="radio"] + label { padding-top: 13px; padding-left: 44px; } body.user-interview #userinterviewsForm .wdk-form-toggles input[type="checkbox"] + label::before, body.user-interview #userinterviewsForm .wdk-form-toggles input[type="radio"] + label::before { top: 13px; } body.user-interview #userinterviewsForm .wdk-form-toggles input[type="radio"] { top: 13px; } body.user-interview #userinterviewsForm .wdk-form-toggles input[type="radio"] + label::before { top: 13px; } body.user-interview #userinterviewsForm .wdk-form-toggles input[type="radio"] + label::after { top: 18px; } body.user-interview #userinterviewsForm .wdk-form-text .inputWrapper input { min-height: 48px; } body.user-interview #userinterviewsForm .wdk-form-text.is-nearLimit input, body.user-interview #userinterviewsForm .wdk-form-text.is-nearLimit textarea { padding-right: 70px; } body.user-interview .legal-text { margin-top: 20px; font: var(--FONT_default_75); } body.user-interview table { margin: 40px 0; border-collapse: collapse; } body.user-interview table td { display: table-cell; padding: 8px 0; vertical-align: top; } body.user-interview table td:first-of-type { padding-right: 16px; font: var(--FONT_highlight_100); } @media only screen and (max-width: 481px) { body.user-interview table tr, body.user-interview table td { display: block; } body.user-interview table tr { margin-bottom: 10px; } body.user-interview table td { padding: 0; } body.user-interview table td:first-of-type { padding-right: 0; } } #logoutPage .content { padding-top: 0; padding-bottom: 24px; border-bottom: 1px solid var(--COLOR_supportDark_050); } #logoutPage .content:first-of-type { padding-top: 0; } #logoutPage .content:first-of-type h3 { margin-top: 0; } #logoutPage .content:last-child { border-bottom: none; } #logoutPage .content .colWrapper::after { content: ""; display: table; clear: both; } #logoutPage .content .colWrapper .picCol { float: left; width: 180px; padding-right: 16px; } @media only screen and (min-width: 481px) { #logoutPage .content .colWrapper .picCol { width: 250px; } } #logoutPage .content .colWrapper .picCol a { display: block; } #logoutPage .content .colWrapper .picCol a img { width: 100%; max-width: 232px; border: 1px solid var(--COLOR_supportDark_050); } #logoutPage .content .colWrapper .textCol h4 { margin-top: 0; } #logoutPage .content .colWrapper .textCol p { margin-bottom: 0; } #logoutPage #oscLogoutIframe { display: none; } #cancellationTermtimePage article { padding-bottom: 16px; } #cancellationTermtimePage article .changeMembershipStatus { margin-bottom: 24px; } #cancellationTermtimePage #cancellationConcernContainer .membershipHelpQuestions { transition: max-height 1s ease; height: auto; max-height: 400px; } #cancellationTermtimePage #cancellationConcernContainer .membershipHelpButtons { height: 0; overflow: hidden; transition: height 1s ease; } #cancellationTermtimePage #cancellationConcernContainer.is-closed .membershipHelpQuestions { height: 0; max-height: 0; overflow: hidden; } #cancellationTermtimePage #cancellationConcernContainer.is-closed .membershipHelpButtons { height: 152px; } @media only screen and (min-width: 481px) { #cancellationTermtimePage #cancellationConcernContainer.is-closed .membershipHelpButtons { height: 76px; } } #arDowngradeModal header h3 { font: var(--FONT_highlight_200); color: var(--COLOR_primary_100); } #arDowngradeModal .subText { font: var(--FONT_default_75); margin-bottom: 12px; } #arDowngradeModal .stylishPriceMacro { margin-right: 16px; margin-bottom: 0; white-space: nowrap; color: var(--COLOR_supportDark_100); } #arDowngradeModal .stylishPriceMacro .intValueAndSep { position: relative; font: var(--FONT_highlight_300); } #arDowngradeModal .stylishPriceMacro .intValueAndSep .decValue { position: absolute; bottom: 0.9em; right: -1em; font: var(--FONT_highlight_75); } #arDowngradeModal .currentPlan { width: 100%; padding: 12px; border-radius: var(--borderRadius_75); font: var(--FONT_default_75); color: var(--COLOR_supportDark_400); background-color: var(--COLOR_supportDark_040); text-align: center; } #arDowngradeModal .currentPlan h4 { margin: 0; padding: 0 0 8px 0; } #arDowngradeModal .currentPlan .stylishPriceMacro { color: var(--COLOR_supportDark_100); } #arDowngradeModal .switchTo { display: flex; justify-content: center; align-items: center; margin-top: 8px; margin-bottom: 8px; } #arDowngradeModal .switchTo svg { fill: var(--COLOR_primary_100); } #arDowngradeModal .switchTo span { display: inline-block; margin: 0 8px; color: var(--COLOR_primary_100); font: var(--FONT_highlight_75); } #arDowngradeModal .downgradePlan { padding: 12px; text-align: center; border-radius: var(--borderRadius_75); background: var(--COLOR_gradient_premium_100_45); color: var(--COLOR_supportLight_100); } #arDowngradeModal .downgradePlan p { font: var(--FONT_default_75); } #arDowngradeModal .downgradePlan .stylishPriceMacro { color: var(--COLOR_supportLight_100); } #arDowngradeModal .downgradePlan .cancelInfo { display: flex; justify-content: center; align-items: center; padding-top: 12px; border-top: 1px solid var(--COLOR_supportLight_100); } #arDowngradeModal .downgradePlan .cancelInfo svg { fill: var(--COLOR_supportLight_100); margin-right: 4px; width: 20px; height: 20px; } #arDowngradeModal .downgradePlan .cancelInfo p { font: var(--FONT_default_100); } #arDowngradeModal .billingStart, #arDowngradeModal .billingStart2 { margin-top: 8px; margin-bottom: 8px; text-align: center; font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); } #arDowngradeModal label { font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); } #arDowngradeModal footer { flex-direction: column; } #arDowngradeModal footer .billingStart2 { margin-top: 0; font: var(--FONT_default_50); } @media only screen and (min-width: 768px) { #arDowngradeModal footer .billingStart2 { margin-bottom: 12px; } } @media only screen and (min-width: 481px) { #arDowngradeModal footer .buttonsContainer { flex-direction: row-reverse; } } #arDowngradeSuccessModal header { display: flex; align-items: center; flex-direction: column; text-align: center; padding-top: 20px; } #arDowngradeSuccessModal header .wdk-icon { width: 40px; height: 40px; fill: var(--COLOR_alertSuccess_100); } #arDowngradeSuccessModal header h3 { padding-top: 0; padding-bottom: 12px; margin: 4px 0 0 0; font: var(--FONT_highlight_200); } #arDowngradeSuccessModal article { text-align: center; } #cancellationReasonPage .soTextDiv ul { margin: 16px 0; } #cancellationReasonPage .soTextDiv ul li { margin-left: 20px; list-style-type: disc; } @media only screen and (min-width: 768px) { #cancellationReasonPage article { padding-bottom: 0; } } #cancellationContactTypePage .iconContainer { margin: 24px 0 32px 0; display: flex; justify-content: center; align-items: center; } #cancellationContactTypePage .iconContainer .wdk-icon { width: 120px; height: 120px; } #cancellationContactTypePage .iconContainer .wdk-icon img { width: 100%; height: auto; } #cancellationContactTypePage #cashbackModalbox .headerContainer { width: calc(100% + 24px); margin: -8px -12px 0 -12px; padding: 24px 12px; background: var(--COLOR_decoration_100); color: var(--COLOR_supportLight_100); text-align: center; font: var(--FONT_default_75); } @media only screen and (min-width: 768px) { #cancellationContactTypePage #cashbackModalbox .headerContainer { width: calc(100% + 40px); margin: -20px -20px 0 -20px; padding: 24px 20px; } } #cancellationContactTypePage #cashbackModalbox .headerContainer h3 { font: var(--FONT_highlight_200); margin-bottom: 16px; } #cancellationContactTypePage #cashbackModalbox .contentContainer { padding-top: 24px; font: var(--FONT_default_50); color: var(--COLOR_supportDark_300); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles { color: var(--COLOR_supportDark_070); margin-bottom: 16px; border: solid 2px var(--COLOR_supportDark_070); border-radius: var(--borderRadius_100); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles:last-of-type { margin-bottom: 24px; } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label { flex-direction: row; margin-left: 0; padding: 16px; display: flex; justify-content: center; font: var(--FONT_default_75); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label.cashbackOption span.iconWrapper { width: 64px; height: 51px; -webkit-mask-image: url("../../img/cashback_gifts.svg"); mask-image: url("../../img/cashback_gifts.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 64px 51px; mask-size: 64px 51px; background-color: var(--COLOR_supportDark_400); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label::before { top: calc(50% + 5px); transform: translate(0, calc(-50% - 5px)); border-color: var(--COLOR_supportDark_070); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label::after { top: calc(50% + 5px); transform: translate(0, calc(-50% - 5px)); background: var(--COLOR_supportDark_070); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label .labelWrapper { margin-left: 28px; flex-grow: 1; } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label .labelWrapper:first-child > span { display: block; } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label .labelWrapper:first-child > span:first-child { font: var(--FONT_highlight_200); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label .labelWrapper:first-child > span:last-child { font: var(--FONT_default_75); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label .labelWrapper:last-child > span { display: block; } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label .labelWrapper:last-child > span:first-child { font: var(--FONT_highlight_100); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"] + label .labelWrapper:last-child > span:last-child { font: var(--FONT_default_75); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"]:checked + label::before { border-color: var(--COLOR_primary_100); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"]:checked + label::after { background: var(--COLOR_primary_100); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles input[type="radio"]:checked + label.cashbackOption span.iconWrapper { background-color: var(--COLOR_primary_100); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles .cashbackPriceText { font: var(--FONT_default_75); } #cancellationContactTypePage #cashbackModalbox .contentContainer .wdk-form-toggles.is-checked { color: var(--COLOR_primary_100); border-color: var(--COLOR_primary_100); box-shadow: var(--boxShadow_small); } #cancellationContactTypePage #cashbackModalbox .contentContainer p:last-of-type { margin-bottom: 12px; } #cancellationContactTypePage #cashbackModalbox footer { padding-left: 0; padding-right: 0; } #cancellationContactTypePage #cashbackModalbox footer .buttonsContainer { margin: 0; } #cancellationContactTypePage #cashbackModalbox footer .buttonsContainer .buttonItem { display: none; padding: 0; margin: 0; } #cancellationContactTypePage #cashbackModalbox footer .buttonsContainer .buttonItem.is-visible { display: block; } #cancellationContactTypePage #cashbackModalbox footer .buttonsContainer .buttonItem .wdk-button { width: 100%; } #cancellationContactTypePage #cashbackAcceptedModalbox .modalboxContent { text-align: center; font: var(--FONT_default_100); background: var(--COLOR_decoration_100); color: var(--COLOR_supportLight_100); } #cancellationContactTypePage #cashbackAcceptedModalbox .modalboxContent h3 { width: 100%; margin-bottom: 24px; font: var(--FONT_highlight_300); color: var(--COLOR_supportLight_100); } #cancellationContactTypePage #cashbackAcceptedModalbox .modalboxContent .iconWrapper { width: 120px; height: 96px; margin-bottom: 64px; -webkit-mask-image: url("../../img/cashback_gifts.svg"); mask-image: url("../../img/cashback_gifts.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 120px 96px; mask-size: 120px 96px; -webkit-mask-position: top center; mask-position: top center; background-color: var(--COLOR_supportLight_100); } #cancellationContactTypePage #cashbackAcceptedModalbox .modalboxContent article { align-items: center; justify-content: center; } #cancellationContactTypePage #cashbackAcceptedModalbox .modalboxContent footer { background-color: rgba(0, 0, 0, 0); } #cancellationSendMailPage #cancellationSendMailForm { margin-top: 24px; } #cancellationSendMailPage #cancellationSendMailForm .mandatoryInfo { font: var(--FONT_default_50); margin-bottom: 24px; } #cancellationSendMailPage #cancellationSendMailForm .buttonsContainer { margin: 40px 0 24px 0; display: flex; justify-content: center; } @media only screen and (min-width: 768px) { #cancellationSendMailPage #cancellationSendMailForm .buttonsContainer { justify-content: flex-end; } } #cancellationSendMailPage #cancellationSendMailForm .buttonsContainer .buttonItem { width: 100%; } @media only screen and (min-width: 768px) { #cancellationSendMailPage #cancellationSendMailForm .buttonsContainer .buttonItem { width: 50%; } } #cancellationSendMailPage #cancellationSendMailForm .buttonsContainer .buttonItem .wdk-button { width: 100%; } #cancellationSendMailPage #cancellationSendMailForm #membershipHelpTextareaContainer { display: none; } #cancellationSendMailPage #cancellationSendMailForm #membershipHelpTextareaContainer.is-visible { display: block; } #cancellationSendMailPage #cancellationSendMailForm .changeMembershipAnswers, #cancellationSendMailPage #cancellationSendMailForm .dissatisfiedAnswers { display: none; } #cancellationSendMailPage #cancellationSendMailForm .changeMembershipAnswers.is-visible, #cancellationSendMailPage #cancellationSendMailForm .dissatisfiedAnswers.is-visible { display: block; } #cancellationSendMailPage #cancellationSendMailForm .wdk-form-customDropdown a, #cancellationSendMailPage #cancellationSendMailForm .wdk-form-customDropdown ul { background-color: var(--COLOR_supportLight_100); } #cancellationTermtimePage article .buttonsContainer, #cancellationReasonPage article .buttonsContainer, #cancellationChangeMembershipPage article .buttonsContainer, #cancellationDissatisfiedPage article .buttonsContainer, #cancellationContactTypePage article .buttonsContainer { display: flex; justify-content: space-between; flex-direction: column; margin: 8px 0; } #cancellationTermtimePage article .buttonsContainer .buttonItem, #cancellationReasonPage article .buttonsContainer .buttonItem, #cancellationChangeMembershipPage article .buttonsContainer .buttonItem, #cancellationDissatisfiedPage article .buttonsContainer .buttonItem, #cancellationContactTypePage article .buttonsContainer .buttonItem { margin: 16px 0; } #cancellationTermtimePage article .buttonsContainer .buttonItem:first-child, #cancellationReasonPage article .buttonsContainer .buttonItem:first-child, #cancellationChangeMembershipPage article .buttonsContainer .buttonItem:first-child, #cancellationDissatisfiedPage article .buttonsContainer .buttonItem:first-child, #cancellationContactTypePage article .buttonsContainer .buttonItem:first-child { margin: 16px 0 0 0; } @media only screen and (min-width: 481px) { #cancellationTermtimePage article .buttonsContainer, #cancellationReasonPage article .buttonsContainer, #cancellationChangeMembershipPage article .buttonsContainer, #cancellationDissatisfiedPage article .buttonsContainer, #cancellationContactTypePage article .buttonsContainer { flex-direction: row; } #cancellationTermtimePage article .buttonsContainer .buttonItem:last-child, #cancellationReasonPage article .buttonsContainer .buttonItem:last-child, #cancellationChangeMembershipPage article .buttonsContainer .buttonItem:last-child, #cancellationDissatisfiedPage article .buttonsContainer .buttonItem:last-child, #cancellationContactTypePage article .buttonsContainer .buttonItem:last-child { order: -1; } #cancellationTermtimePage article .buttonsContainer .buttonItem:first-child, #cancellationReasonPage article .buttonsContainer .buttonItem:first-child, #cancellationChangeMembershipPage article .buttonsContainer .buttonItem:first-child, #cancellationDissatisfiedPage article .buttonsContainer .buttonItem:first-child, #cancellationContactTypePage article .buttonsContainer .buttonItem:first-child { margin: 16px 0; } } #cancellationTermtimePage article .buttonsContainer .wdk-button, #cancellationReasonPage article .buttonsContainer .wdk-button, #cancellationChangeMembershipPage article .buttonsContainer .wdk-button, #cancellationDissatisfiedPage article .buttonsContainer .wdk-button, #cancellationContactTypePage article .buttonsContainer .wdk-button { width: 100%; text-overflow: ellipsis; overflow: hidden; } @media only screen and (min-width: 481px) { #cancellationTermtimePage article .buttonsContainer .wdk-button, #cancellationReasonPage article .buttonsContainer .wdk-button, #cancellationChangeMembershipPage article .buttonsContainer .wdk-button, #cancellationDissatisfiedPage article .buttonsContainer .wdk-button, #cancellationContactTypePage article .buttonsContainer .wdk-button { width: auto; } } peg-settings-change-membership-links { display: block; } peg-settings-change-membership-links a.wdk-button { white-space: normal; } peg-settings-subnavi { padding: 4px 24px 0 24px; border-radius: var(--borderRadius_100); background: var(--COLOR_supportDark_040); } @media only screen and (min-width: 768px) { peg-settings-subnavi { border-radius: 0; background: rgba(0, 0, 0, 0); padding: 0; } } peg-settings-subnavi ul li a.wdk-button { height: 40px; } peg-settings-subnavi ul li a.wdk-button peg-my-notifications-bubble[has-unread] { position: absolute; top: calc(50% - 15px); right: 16px; } peg-settings-subnavi ul li.active a.wdk-button { font-weight: bold; } peg-settings-payment-plan ul { width: 100%; } peg-settings-payment-plan ul li { margin-bottom: 0; padding-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--COLOR_supportDark_070); } peg-settings-payment-plan ul li span { padding: 6px 0; } peg-settings-payment-plan ul li .amount { padding-left: 20px; } peg-settings-payment-plan .renewalPaymentText { margin: 32px 0 8px 0; } peg-cancel-current-product-info h3.productDescription { font: var(--FONT_highlight_200); } peg-cancel-current-product-info .orderDate { margin-bottom: 8px; } peg-cancel-current-product-info .freeTrialPeriod { margin-top: 0; margin-bottom: 8px; color: var(--COLOR_primary_100); } peg-cancel-current-product-info .productBenefitInfo { margin-bottom: 16px; } peg-cancel-current-product-info .productBenefitInfo h4 { margin-bottom: 8px; } peg-cancel-current-product-info .productBenefitInfo ul { display: flex; flex-direction: column; justify-content: center; gap: 8px; margin-bottom: 24px; } peg-cancel-current-product-info .productBenefitInfo ul li { display: flex; gap: 8px; align-items: center; list-style-type: none; } peg-cancel-current-product-info .productBenefitInfo ul li::before { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_check.svg); mask-image: url(../../img/icons/single_color/icon_check.svg); vertical-align: -3px; width: 28px; height: 28px; min-width: 28px; background-color: var(--COLOR_primary_100); } peg-free-trial-cancel-card footer { margin-top: 24px; display: flex; justify-content: space-between; width: 100%; flex-flow: wrap; gap: 20px; } peg-free-trial-cancel-card footer .buttonWrapper { flex-grow: 1; list-style: none; text-align: center; vertical-align: top; } peg-free-trial-cancel-handling { text-align: left; } .rwdDataAndSettingsPages .dataCard { padding-bottom: 4px; } .rwdDataAndSettingsPages .dataCard .row { position: relative; border-top: 1px solid var(--COLOR_supportDark_070); padding-top: 24px; padding-bottom: 24px; padding-left: 40px; } .rwdDataAndSettingsPages .dataCard .row:first-of-type { border-top: 0; } .rwdDataAndSettingsPages .dataCard .row:first-of-type { padding-top: 0; } .rwdDataAndSettingsPages .dataCard .row:first-of-type::before { top: -6px; } .rwdDataAndSettingsPages .dataCard .row .wdk-icon.icon_nameplate { position: absolute; top: -5px; left: 0; } .rwdDataAndSettingsPages .dataCard .row.has-edit { cursor: pointer; } .rwdDataAndSettingsPages .dataCard .row.has-edit::after { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_pencil.svg); mask-image: url(../../img/icons/single_color/icon_pencil.svg); vertical-align: -3px; display: block; position: absolute; right: 0; top: 22px; background-color: var(--COLOR_primary_100); } .no-touchevents .rwdDataAndSettingsPages .dataCard .row.has-edit:hover::after { background-color: var(--COLOR_defaultText); } .rwdDataAndSettingsPages .dataCard .row.has-edit:focus-visible { outline: 2px dashed currentcolor; outline-offset: 2px; } .rwdDataAndSettingsPages .dataCard .row.has-inlineSwitch { padding-right: 60px; } .rwdDataAndSettingsPages .dataCard .row.has-inlineSwitch > wdk-hintbox { margin-right: -60px; } .rwdDataAndSettingsPages .dataCard .row.has-inlineSwitch .inlineSwitch { position: absolute; top: 16px; right: 0; } .rwdDataAndSettingsPages .dataCard .row > ul > li { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--COLOR_supportDark_070); } .rwdDataAndSettingsPages .dataCard .row > ul > li:last-of-type { border: none; margin-bottom: 0; padding-bottom: 0; } .rwdDataAndSettingsPages .dataCard .row h4 { margin-bottom: 4px; } .rwdDataAndSettingsPages .dataCard .row h4:first-child { margin-top: 0; } .rwdDataAndSettingsPages .dataCard .row h4 .wdk-icon { position: absolute; left: 0; top: 20px; } .rwdDataAndSettingsPages .dataCard .row p { margin-bottom: 0; } .rwdDataAndSettingsPages .dataCard .row p#deleteProfileLink { margin-top: 12px; } .rwdDataAndSettingsPages .dataCard .row .servicePassword { background-color: var(--COLOR_alertInfo_200); color: var(--COLOR_alertInfo_100); padding-top: 12px; padding-left: 12px; margin-top: -12px; } .rwdDataAndSettingsPages .buttonRow { margin-top: 16px; margin-bottom: 8px; text-align: right; } .rwdDataAndSettingsPages .buttonRow .wdk-button { margin-left: 8px; } .rwdDataAndSettingsPages .buttonRow .wdk-button:first-child { margin-left: 0; } #myNotificationsPage #myNotificationsRow { padding-left: 0; } #manageProfilePage .linkWrapper { margin-top: 4px; } #manageProfilePage #mandateReference { margin-top: 4px; } #manageProfilePage #setNewPasswordModal #wdk-passwordRestrictionBox { position: relative; bottom: auto; } #manageProfilePage #disconnectFromApple .buttonRow { display: flex; justify-content: flex-end; } #manageProfilePage #gender { padding: 24px 0 24px 40px; } #manageProfilePage #gender #userGenderContainer { padding: 0 0 24px 0; } #manageProfilePage #gender #userGenderContainer::after { top: -2px; } #manageProfilePage #gender #searchGenderContainer { padding: 12px 0 0 0; } #manageProfilePage #gender #searchGenderContainer::after { top: 10px; } #manageProfilePage #setSearchGender .searchGenderSelect { margin-left: 16px; } @keyframes details-show { from { opacity: 0; transform: translateY(-0.5em); } to { opacity: 1; transform: translateY(0); } } #myNotificationsPage details { border-bottom: 1px solid var(--COLOR_supportDark_500); padding: 8px 0; } #myNotificationsPage details summary { position: relative; cursor: pointer; } #myNotificationsPage details summary:focus-visible { outline: 2px dashed currentcolor; outline-offset: 8px; } #myNotificationsPage details summary::marker { content: ""; } #myNotificationsPage details summary::-webkit-details-marker { display: none; } #myNotificationsPage details summary::after { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_down_regular.svg); vertical-align: -3px; width: 14px; height: 14px; position: absolute; top: 4px; right: 8px; } #myNotificationsPage details .content { margin-top: 28px; opacity: 0; transition: opacity 0.1s ease-in; } #myNotificationsPage details .content p { margin-bottom: 16px; } #myNotificationsPage details[open] { padding-bottom: 24px; } #myNotificationsPage details[open] summary::after { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_up_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_up_regular.svg); vertical-align: -3px; width: 14px; height: 14px; } #myNotificationsPage details[open] .content { opacity: 1; } #myNotificationsPage p.infoText { font: var(--FONT_default_75); } #myNotificationsPage #accordion { margin: 32px 0; } #myNotificationsPage #accordion details.is-unread summary .subject { font: var(--FONT_highlight_100); } #myNotificationsPage #accordion details summary { display: flex; } #myNotificationsPage #accordion details summary span, #myNotificationsPage #accordion details summary time { padding-right: 24px; } #myNotificationsPage #accordion details .content { font: var(--FONT_default_75); } #myNotificationsPage #accordion details .content .actions { display: flex; justify-content: space-between; margin-top: 32px; } #myNotificationsPage #serviceUnavailable { margin: 32px 0; } .disconnectSocialLoginPages #setPasswordForm { position: relative; } .disconnectSocialLoginPages #disconnectGoogleForm { position: relative; } .disconnectSocialLoginPages .currentEmail { margin: 28px 0; } #personaldataPage #editPersonalData::after { top: 32px; margin-top: 0; } #personaldataPage #editPersonalData p { word-wrap: break-word; margin-bottom: 12px; } #personaldataPage #editPersonalData p.qa-unconfirmedEmailAdress { margin-top: 12px; } #personaldataPage #editPersonalData .awaitingConfirmation { display: inline-flex; padding: 3px 12px; margin-left: 18px; color: var(--COLOR_supportLight_100); font: var(--FONT_default_50); border-radius: var(--borderRadius_75); white-space: nowrap; text-overflow: ellipsis; background-color: var(--COLOR_alertWarning_100); vertical-align: middle; align-items: center; } #personaldataPage #editPersonalData .awaitingConfirmation::before { width: 18px; height: 18px; color: var(--COLOR_supportLight_100); margin-right: 4px; } #personaldataPage #editPersonalDataModal .is-disabled { pointer-events: none; } #personaldataPage #editPersonalDataModal #zipAutofill.wdk-form-autofillDropdown { position: relative; } #personaldataPage #editPersonalDataModal #zipAutofill.wdk-form-autofillDropdown .wdk-form-text.is-nearLimit input { padding: 0 8px; } #personaldataPage #editPersonalDataModal #zipAutofill.wdk-form-autofillDropdown #zip { width: 100%; } #personaldataPage #editPersonalDataModal #emailHelp { margin-bottom: 20px; } #personaldataPage #editPersonalDataModal #emailHelp h2 { font: var(--FONT_highlight_75); margin: 8px 0; } #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul { overflow: hidden; padding: 0; background-color: var(--COLOR_supportLight_100); color: var(--COLOR_defaultText); font: var(--FONT_default_75); border-radius: var(--borderRadius_75); border: 1px solid var(--COLOR_supportDark_070); } #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li { position: relative; padding: 12px 12px 12px 32px; border-top: 1px solid var(--COLOR_supportDark_050); background-color: var(--COLOR_supportLight_100); cursor: pointer; list-style-type: none; transition: background-color 0.5s 0s; } #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li:first-child { border: 0; } .no-touchevents #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li:hover, #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li:active { background-color: var(--COLOR_supportDark_050); } #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li.active { background-color: var(--COLOR_supportDark_050); cursor: default; } #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li.active h5::before { color: var(--COLOR_primary_100); transform: rotate(90deg); } #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li h5 { margin: 0; font: var(--FONT_highlight_75); } @media only screen and (min-width: 768px) { #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li h5 { font: var(--FONT_default_75); } } #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li h5::before { position: absolute; top: 12px; left: 6px; color: var(--COLOR_supportDark_300); transition: all 0.5s 0s; content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); vertical-align: -3px; width: 13px; height: 13px; } #personaldataPage #editPersonalDataModal #emailHelp.accordionContainer ul li .accordionPanel { display: none; padding-top: 12px; } #personaldataPage #editPersonalDataModal #emailHelp .helpSectionContent { color: var(--COLOR_supportDark_300); } #personaldataPage #editPersonalDataModal #emailHelp .helpSectionContent p { margin-bottom: 20px; } #personaldataPage #editPersonalDataModal #emailHelp .helpSectionContent .spamFolderHint { padding: 20px; border: 2px solid var(--COLOR_alertWarning_100); background-color: var(--COLOR_supportLight_100); text-align: center; color: var(--COLOR_supportDark_100); border-radius: var(--borderRadius_75); } #personaldataPage #editPersonalDataModal #emailHelp .helpSectionContent .buttonRow { text-align: center; } #personaldataPage #editPersonalDataModal #emailHelp .helpSectionContent strong { font-weight: 600; color: var(--COLOR_defaultText); } #personaldataPage #editPersonalDataModal #emailHelp .helpSectionContent a { color: var(--COLOR_primary_100); text-decoration: none; } .no-touchevents #personaldataPage #editPersonalDataModal #emailHelp .helpSectionContent a:hover { text-decoration: underline; } #personaldataPage #editPersonalDataModal #emailHelp #resendEmailSuccess { display: none; } #personaldataPage #editPersonalDataModal #emailHelp #resendEmailSuccess.is-visible { display: flex; margin-top: 24px; margin-bottom: 12px; } #personaldataPage #editPersonalDataModal #emailHelp #resendEmailError { display: none; } #personaldataPage #editPersonalDataModal #emailHelp #resendEmailError.is-visible { display: block; margin-top: 24px; margin-bottom: 12px; } #personaldataPage #emailDOIConfirmationModal article p:first-child { margin-top: 0; } #personaldataPage #emailDOIConfirmationModal article p:last-child { margin-bottom: 0; } #personaldataPage #preparingExpertiseDownload { padding: 0 20px; text-align: center; font: var(--FONT_highlight_100); } #personaldataPage #preparingExpertiseDownload p { margin: 1em 0 1em 0; position: relative; } #personaldataPage #preparingExpertiseDownload i { display: block; margin-top: 18px; font-size: 40px; line-height: 0.5em; color: var(--COLOR_supportDark_300); } @media only screen and (min-width: 768px) { #personaldataPage #preparingExpertiseDownload i { display: inline-block; margin-left: 10px; margin-top: 0; font-size: 28px; line-height: 20px; vertical-align: -14%; } } #personaldataPage #showExpertiseDownload a.is-disabled { pointer-events: none; text-decoration: none; cursor: default; color: var(--COLOR_supportDark_400); } #personaldataPage .linkWrapper { margin-top: 4px; } #notificationPage .introText, #notificationPageNoAuth .introText, #notificationoptionsDuringTestPage .introText, #notificationoptionsDuringTestPageNoAuth .introText { margin-bottom: 8px; } #notificationPage #notificationEmail, #notificationPageNoAuth #notificationEmail, #notificationoptionsDuringTestPage #notificationEmail, #notificationoptionsDuringTestPageNoAuth #notificationEmail { display: block; position: relative; text-decoration: none; font: var(--FONT_default_100); overflow: hidden; text-overflow: ellipsis; padding-top: 8px; padding-bottom: 8px; padding-left: 0; } #notificationPage #notificationEmail::after, #notificationPageNoAuth #notificationEmail::after, #notificationoptionsDuringTestPage #notificationEmail::after, #notificationoptionsDuringTestPageNoAuth #notificationEmail::after { top: 8px; } #notificationPage #notificationForm li, #notificationPage #notificationGlobalForm li, #notificationPageNoAuth #notificationForm li, #notificationPageNoAuth #notificationGlobalForm li, #notificationoptionsDuringTestPage #notificationForm li, #notificationoptionsDuringTestPage #notificationGlobalForm li, #notificationoptionsDuringTestPageNoAuth #notificationForm li, #notificationoptionsDuringTestPageNoAuth #notificationGlobalForm li { display: table; width: 100%; border-bottom: 1px solid var(--COLOR_supportDark_070); } #notificationPage #notificationForm li:last-child, #notificationPage #notificationGlobalForm li:last-child, #notificationPageNoAuth #notificationForm li:last-child, #notificationPageNoAuth #notificationGlobalForm li:last-child, #notificationoptionsDuringTestPage #notificationForm li:last-child, #notificationoptionsDuringTestPage #notificationGlobalForm li:last-child, #notificationoptionsDuringTestPageNoAuth #notificationForm li:last-child, #notificationoptionsDuringTestPageNoAuth #notificationGlobalForm li:last-child { border-bottom: 0; } #notificationPage #notificationForm li p, #notificationPage #notificationForm li .notificationSwitch, #notificationPage #notificationGlobalForm li p, #notificationPage #notificationGlobalForm li .notificationSwitch, #notificationPageNoAuth #notificationForm li p, #notificationPageNoAuth #notificationForm li .notificationSwitch, #notificationPageNoAuth #notificationGlobalForm li p, #notificationPageNoAuth #notificationGlobalForm li .notificationSwitch, #notificationoptionsDuringTestPage #notificationForm li p, #notificationoptionsDuringTestPage #notificationForm li .notificationSwitch, #notificationoptionsDuringTestPage #notificationGlobalForm li p, #notificationoptionsDuringTestPage #notificationGlobalForm li .notificationSwitch, #notificationoptionsDuringTestPageNoAuth #notificationForm li p, #notificationoptionsDuringTestPageNoAuth #notificationForm li .notificationSwitch, #notificationoptionsDuringTestPageNoAuth #notificationGlobalForm li p, #notificationoptionsDuringTestPageNoAuth #notificationGlobalForm li .notificationSwitch { display: table-cell; vertical-align: middle; } #notificationPage #notificationForm li p, #notificationPage #notificationGlobalForm li p, #notificationPageNoAuth #notificationForm li p, #notificationPageNoAuth #notificationGlobalForm li p, #notificationoptionsDuringTestPage #notificationForm li p, #notificationoptionsDuringTestPage #notificationGlobalForm li p, #notificationoptionsDuringTestPageNoAuth #notificationForm li p, #notificationoptionsDuringTestPageNoAuth #notificationGlobalForm li p { width: 90%; margin: 0; padding: 20px 0; } #notificationPage #notificationForm li .notificationSwitch, #notificationPage #notificationGlobalForm li .notificationSwitch, #notificationPageNoAuth #notificationForm li .notificationSwitch, #notificationPageNoAuth #notificationGlobalForm li .notificationSwitch, #notificationoptionsDuringTestPage #notificationForm li .notificationSwitch, #notificationoptionsDuringTestPage #notificationGlobalForm li .notificationSwitch, #notificationoptionsDuringTestPageNoAuth #notificationForm li .notificationSwitch, #notificationoptionsDuringTestPageNoAuth #notificationGlobalForm li .notificationSwitch { width: 10%; text-align: right; } #notificationPage #notificationGlobalForm li label, #notificationPageNoAuth #notificationGlobalForm li label, #notificationoptionsDuringTestPage #notificationGlobalForm li label, #notificationoptionsDuringTestPageNoAuth #notificationGlobalForm li label { cursor: pointer; } #notificationPage #notificationGlobalForm li .notificationSwitch, #notificationPageNoAuth #notificationGlobalForm li .notificationSwitch, #notificationoptionsDuringTestPage #notificationGlobalForm li .notificationSwitch, #notificationoptionsDuringTestPageNoAuth #notificationGlobalForm li .notificationSwitch { display: none; } #personalDataInquiryPage .personalDataInquiryLegaltext { font: var(--FONT_default_75); color: var(--COLOR_supportDark_400); } #personalDataInquiryPage #personalDataInquiryCard #appleLoginWrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } #personalDataInquiryPage #personalDataInquiryCard #appleLoginWrapper peg-apple-social-button { width: 300px; } #personalDataInquiryPage #personalDataInquiryCard #appleLoginWrapper svg.icon_check { display: none; fill: var(--COLOR_alertSuccess_100); } #personalDataInquiryPage #personalDataInquiryCard #appleLoginWrapper svg.icon_check.is-visible { display: block; margin-left: 8px; } #personalDataInquiryPage #personalDataInquiryCard #googleLoginWrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } #personalDataInquiryPage #personalDataInquiryCard #googleLoginWrapper peg-google-social-button { width: 300px; } #personalDataInquiryPage #personalDataInquiryCard #googleLoginWrapper peg-google-social-button img { display: block; } #personalDataInquirySuccessPage #personalDataInquirySuccessHintBox { margin-bottom: 8px; } .idSecurePages #helpForIdSecure { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--COLOR_supportDark_070); } #idSecurePage #idSecureCard { padding-bottom: 8px; } #idSecurePage #idSecureCard .wdk-button { width: 100%; } @media only screen and (min-width: 481px) { #idSecurePage #idSecureCard .wdk-button { width: initial; } } @media only screen and (min-width: 768px) { #idSecurePage #idSecureCard { padding-bottom: 16px; } } #idSecurePage .beValidationError { margin-top: 16px; margin-bottom: 16px; } #idSecurePage .soIntroText { margin-bottom: 24px; } #idSecurePage #idSecureSteps { counter-reset: idsecure-steps; margin: 0; padding: 0; } #idSecurePage #idSecureSteps li { position: relative; padding: 12px 8px 12px 56px; margin-top: 16px; list-style: none; border: 2px solid var(--COLOR_alertInfo_100); border-radius: var(--borderRadius_75); } #idSecurePage #idSecureSteps li::after { content: counter(idsecure-steps); counter-increment: idsecure-steps; display: block; position: absolute; left: -10px; top: -8px; height: 25px; width: 25px; background-color: var(--COLOR_alertInfo_100); border: 2px solid var(--COLOR_supportLight_100); color: var(--COLOR_supportLight_100); font: var(--FONT_highlight_50); line-height: 20px; text-align: center; border-radius: var(--borderRadius_circle); } #idSecurePage #idSecureSteps li .wdk-icon { position: absolute; left: 8px; top: 50%; margin-top: -20px; width: 32px; height: 32px; } #idSecurePage #idSecureSteps li .wdk-icon.icon_shield { fill: var(--COLOR_alertSuccess_100); } #idSecurePage #idSecureSteps li .wdk-icon.icon_device_smartphone { fill: var(--COLOR_supportDark_100); } #idSecureEnterPhonePage #enterPhoneCard { padding-bottom: 8px; } @media only screen and (min-width: 768px) { #idSecureEnterPhonePage #enterPhoneCard { padding-bottom: 16px; } } #idSecureEnterPhonePage .generalPhoneErrorCode { margin-bottom: 12px; } #idSecureEnterPhonePage form { margin-top: 12px; } #idSecureEnterPhonePage form .phoneNumberWrapper { display: flex; flex-direction: column; } @media only screen and (min-width: 481px) { #idSecureEnterPhonePage form .phoneNumberWrapper { flex-direction: row; } } #idSecureEnterPhonePage form .phoneNumberWrapper #mobilePrefixRow { display: inline-block; margin-top: 14px; margin-right: 0; } @media only screen and (min-width: 481px) { #idSecureEnterPhonePage form .phoneNumberWrapper #mobilePrefixRow { margin-right: 24px; width: 140px; } } #idSecureEnterPhonePage form .phoneNumberWrapper #mobilePrefixRow label { text-align: right; margin-left: 40px; } @media only screen and (min-width: 481px) { #idSecureEnterPhonePage form .phoneNumberWrapper #mobilePrefixRow label { margin-left: 0; } } #idSecureEnterPhonePage form .phoneNumberWrapper #mobilePrefixRow .areaCodeDisplay { float: left; padding-top: 12px; width: 40px; font: var(--FONT_highlight_100); } #idSecureEnterPhonePage form .phoneNumberWrapper #mobilePrefixRow .selectWrapper { width: calc(100% - 40px); } #idSecureEnterPhonePage form .phoneNumberWrapper #mobilePrefixRow #mobilePrefixError { text-align: right; } #idSecureEnterPhonePage form .phoneNumberWrapper #numberRow { display: inline-block; width: calc(100% - 40px); margin-left: 40px; margin-top: 14px; } @media only screen and (min-width: 481px) { #idSecureEnterPhonePage form .phoneNumberWrapper #numberRow { width: calc(100% - 140px - 24px); margin-left: 0; } } #idSecureEnterPhonePage form .buttonRow { display: flex; flex-direction: column; } @media only screen and (min-width: 481px) { #idSecureEnterPhonePage form .buttonRow { flex-direction: row; justify-content: space-between; } } #idSecureEnterPhonePage form .buttonRow .wdk-button { width: 100%; margin: 0 0 10px 0; } @media only screen and (min-width: 481px) { #idSecureEnterPhonePage form .buttonRow .wdk-button { width: initial; margin-bottom: 0; } } #idSecureEnterPinPage article .wdk-button { width: 100%; } @media only screen and (min-width: 481px) { #idSecureEnterPinPage article .wdk-button { width: initial; } } #idSecureEnterPinPage .beValidationError { margin-top: -8px; border-radius: 0; padding-left: 6px; } #idSecureEnterPinPage .beValidationError::before { display: none; } #idSecureEnterPinPage #pinNotRecived { margin: 28px 0; padding-top: 8px; border-top: 1px solid var(--COLOR_supportDark_070); } #idSecureEnterPinPage #pinNotRecived::after { content: ""; display: table; clear: both; } #idSecureEnterPinPage #pinNotRecived #restartProcess { float: right; } #idSecureEnterPinPage #helpForIdSecure { margin-top: 16px; } #idSecureDonePage .successBox2 { font: var(--FONT_highlight_100); text-align: center; padding-bottom: 20px; } #idSecureDonePage .successBox2 .iconWrapper { position: relative; display: block; margin: 0 auto 16px auto; width: 80px; height: 80px; text-align: center; color: var(--COLOR_alertSuccess_100); border: 2px solid var(--COLOR_alertSuccess_100); border-radius: var(--borderRadius_circle); } #idSecureDonePage .successBox2 .iconWrapper .wdk-icon.icon_shield { position: absolute; top: calc(50% - 27px); left: calc(50% - 27px); fill: var(--COLOR_alertSuccess_100); width: 54px; height: 54px; } #idSecureDonePage .successBox { position: relative; padding: 16px 12px 16px 60px; margin-top: 16px; margin-bottom: 40px; list-style: none; border: 2px solid var(--COLOR_alertInfo_100); border-radius: var(--borderRadius_75); } #idSecureDonePage .successBox::before { position: absolute; left: 8px; top: 50%; font-size: 40px; margin-top: -20px; color: var(--COLOR_alertSuccess_100); } @media only screen and (max-width: 481px) { #userGenderPage .dataAndSettingsSubNavi { display: none; } } @media only screen and (min-width: 768px) { #userGenderPage .dataAndSettingsSubNavi { display: block; } } #userGenderPage #genderSelectionContainer > .container { border-top: 1px solid #d3d3d3; padding: 24px 4px 12px 4px; } #userGenderPage #genderSelectionContainer > .container#changeOwnGenderForm { border-top: 0; padding-top: 0; } #userGenderPage #genderSelectionContainer > .container#changeOwnGenderForm h2 { display: flex; align-items: center; padding: 0; } #userGenderPage #genderSelectionContainer > .container#changeOwnGenderForm h2 #backButton { margin-left: -20px; } #userGenderPage #genderSelectionContainer > .container#changeOwnGenderForm h2 #backButton .wdk-icon { width: 16px; height: 16px; } #userGenderPage #genderSelectionContainer > .container#moreAboutMyGender { cursor: pointer; padding: 20px 4px 20px 4px; } #userGenderPage #genderSelectionContainer > .container#moreAboutMyGender .headerContainer { display: flex; justify-content: space-between; height: 28px; margin: 0 0 4px 0; } #userGenderPage #genderSelectionContainer > .container#moreAboutMyGender .headerContainer #openGenderAttribute .icon_arrow_right_regular { margin: 0 0 0 4px; width: 14px; height: 14px; } #userGenderPage #genderSelectionContainer > .container#moreAboutMyGender .headerContainer #openGenderAttribute .text { font: var(--FONT_highlight_75); } #userGenderPage #genderSelectionContainer > .container#moreAboutMyGender .headerContainer #deleteGenderExtension .icon_bin { fill: var(--COLOR_supportDark_300); } #userGenderPage #genderSelectionContainer > .container#moreAboutMyGender .moreAboutMyGenderText { margin: 16px 0 0 0; font: var(--FONT_default_75); color: var(--COLOR_supportDark_300); } #userGenderPage #genderSelectionContainer > .container#showGenderInOwnProfile { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; padding-top: 12px; } #userGenderPage #genderSelectionContainer > .container#showGenderInOwnProfile .container { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; grid-column: 1 / span 2; grid-row: 1; } #userGenderPage #genderSelectionContainer > .container#showGenderInOwnProfile .container span { align-self: center; } #userGenderPage #genderSelectionContainer > .container#showGenderInOwnProfile .container .wdk-form-toggles { grid-column: 2; grid-row: 1 / span 2; } #userGenderPage #genderSelectionContainer > .container#showGenderInOwnProfile .container .shownAsText { font: var(--FONT_default_75); color: var(--COLOR_supportDark_200); } #userGenderPage #genderSelectionContainer > .container#showGenderInOwnProfile wdk-hintbox { max-height: 250px; } #userGenderPage #moreAboutMyGenderModal .genderExtensionList .genderSelection { display: flex; justify-content: space-between; padding: 13px 8px; border-radius: 8px; height: 50px; } #userGenderPage #moreAboutMyGenderModal .genderExtensionList .genderSelection:hover { background-color: var(--COLOR_supportDark_040); cursor: pointer; } #userGenderPage #moreAboutMyGenderModal .genderExtensionList .genderSelection:active { background-color: var(--COLOR_supportDark_050); } #userGenderPage #moreAboutMyGenderModal .genderExtensionList .genderSelection .wdk-icon { display: none; fill: var(--COLOR_primary_100); } #userGenderPage #moreAboutMyGenderModal .genderExtensionList .genderSelection.is-selected .wdk-icon { display: block; } #userGenderPage #moreAboutMyGenderModal .genderExtensionList .genderSelection:focus-visible { outline-color: var(--COLOR_primary_100); } #userGenderPage #moreAboutMyGenderModal .suggestGender { justify-content: flex-start; } #userGenderPage #genderSuggestionFeedbackModal article { height: 100%; align-items: center; justify-content: center; } #userGenderPage #genderSuggestionFeedbackModal article .container { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; gap: 24px; } #userGenderPage #genderSuggestionFeedbackModal article .container .wdk-icon { fill: var(--COLOR_primary_100); width: 64px; height: 64px; } #userGenderPage #genderSuggestionFeedbackModal article .container h1 { color: var(--COLOR_primary_100); font: var(--FONT_highlight_300); } .exoticLinkPage .buttonRow { text-align: right; } .exoticLinkPage .listElementLabel { margin-bottom: 12px; } .exoticLinkPage .listElement > li, .exoticLinkPage #content ul > li { list-style-type: disc; margin: 0 0 4px 22px; } .exoticLinkPage.errorPages #content .wdk-icon.icon_check_circle_filled { fill: var(--COLOR_alertSuccess_100); } .exoticLinkPage.errorPages #content .wdk-icon.icon_warning { fill: var(--COLOR_alertWarning_100); } .exoticLinkPage.errorPages #content .wdk-hintbox.t-info { margin: 20px 0; } .exoticLinkPage .exoticLinkForm { position: relative; } .exoticLinkPage .exoticLinkForm #wdk-passwordRestrictionBox { bottom: 92%; } #forgotPasswordPage #formRequestPassword h2 { margin-bottom: 0; } #forgotPasswordPage #wdk-passwordRestrictionBox ul li { list-style-type: none; } #emailCorrectionPage #duplicateEmailError { margin-bottom: 16px; } #emailCorrectionPage #emailDOIConfirmationModal article p:first-child { margin-top: 0; } #emailCorrectionPage #emailDOIConfirmationModal article p:last-child { margin-bottom: 0; } #emailCorrectionPage .buttonRow > a, #renewPasswordSuccessPage .buttonRow > a, #setNewPasswordSuccessPage .buttonRow > a { margin-right: 16px; } #emailCorrectionPage .buttonRow > a:last-child, #renewPasswordSuccessPage .buttonRow > a:last-child, #setNewPasswordSuccessPage .buttonRow > a:last-child { margin-right: 0; } .partnerListCard .fallbackGradient, .supercardCard .fallbackGradient, peg-omrlist-item .fallbackGradient, peg-imrlist-item .fallbackGradient, .photo .fallbackGradient { background: var(--COLOR_decoration_100); } .partnerListCard .has-fallbackView .cardFooter, .supercardCard .has-fallbackView .cardFooter, peg-omrlist-item .has-fallbackView .cardFooter, peg-imrlist-item .has-fallbackView .cardFooter, .photo .has-fallbackView .cardFooter { background-image: linear-gradient( transparent, var(--COLOR_supportDark_070) ) !important; } peg-photo-editor #imageContainer { --gap: calc(2 * 24px); --padding: calc(2 * 24px); --buttons: calc(2 * 48px); --headline: 28px; --base-height: 100dvh; max-height: calc( var(--base-height) - var(--gap) - var(--padding) - var(--buttons) - var(--headline) ); min-height: 380px; } @media only screen and (min-width: 481px) { peg-photo-editor #imageContainer { --base-height: 80dvh; } } peg-photo-editor #imageContainer .cropper-view-box { outline: 1px solid var(--COLOR_supportDark_100); outline-color: var(--COLOR_supportDark_100); } peg-photo-editor #imageContainer .cropper-view-box::after { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; left: 0; content: ""; width: 100%; height: 0; padding-bottom: 100%; border: 1px solid var(--COLOR_supportDark_100); border-radius: var(--borderRadius_circle); } peg-photo-editor .photouploadControls { display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0; } peg-photo-editor .photouploadControls .controlGroup { display: flex; justify-content: center; } @media (pointer: coarse) { peg-photo-editor .photouploadControls { grid-template-columns: 1fr; } peg-photo-editor .photouploadControls .controlGroup.zoom { display: none; } } peg-photo-selector { display: grid; gap: 1rem; width: 100%; } peg-photo-selector .wdk-styledHintBox.t-error:not(.is-visible), peg-photo-selector wdk-dialog:not([open]) { position: absolute; visibility: hidden; } peg-photo-selector .wdk-styledHintBox.t-error, peg-photo-selector .wdk-styledHintBox.t-error.is-visible { margin: 0; } peg-photo-selector #dragDropArea { display: grid; place-content: center; place-items: center; min-height: 100px; padding: 1.25rem; cursor: default; font: var(--FONT_default_100); text-align: center; color: var(--COLOR_supportDark_300); border-radius: var(--borderRadius_75); border: 2px dashed var(--COLOR_defaultText); } @media only screen and (pointer: coarse) { peg-photo-selector #dragDropArea { display: none; } } peg-photo-selector #dragDropArea.dragOver { border-color: var(--COLOR_alertSuccess_100); box-shadow: 0 0 20px -6px var(--COLOR_supportDark_100) inset; } peg-photo-selector #dragDropArea .wdk-icon.icon_upload { display: block; width: 46px; height: 46px; } peg-photo-selector #uploadButton { position: relative; display: flex; justify-content: center; } peg-photo-uploader { display: flex; justify-content: center; flex-direction: column; } peg-photo-uploader progress { accent-color: var(--COLOR_primary_100); width: 100%; height: 30px; } peg-photo-upload-dialog { --gap: 48px; display: grid; padding: calc(var(--gap) / 2); background-color: var(--COLOR_supportLight_100); height: 100dvh; } @media only screen and (min-width: 481px) { peg-photo-upload-dialog { border-radius: var(--borderRadius_100); height: auto; } } peg-photo-upload-dialog[enable-photo-description] { grid-template-columns: 100% 100%; overflow: hidden; gap: var(--gap); } peg-photo-upload-dialog[enable-photo-description] > * { transition: 200ms ease-in; } peg-photo-upload-dialog:has(> [data-tab="photo-editor"][inert]) [data-tab="photo-editor"], peg-photo-upload-dialog:has(> [data-tab="photo-editor"][inert]) [data-tab="photo-description"] { transform: translateX(calc(-100% - var(--gap))); } peg-photo-upload-dialog:has(> [data-tab="photo-description"][inert]) [data-tab="photo-editor"], peg-photo-upload-dialog:has(> [data-tab="photo-description"][inert]) [data-tab="photo-description"] { transform: translateX(0); } peg-photo-upload-dialog [data-tab="photo-editor"] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: min-content 1fr min-content; grid-template-areas: "heading heading" "editor editor" "abort save"; gap: 24px; } peg-photo-upload-dialog [data-tab="photo-editor"] h3 { grid-area: heading; } peg-photo-upload-dialog [data-tab="photo-editor"] peg-photo-editor { grid-area: editor; } peg-photo-upload-dialog [data-tab="photo-editor"] .abort { grid-area: abort; } peg-photo-upload-dialog [data-tab="photo-editor"] .save, peg-photo-upload-dialog [data-tab="photo-editor"] .continue { grid-area: save; } peg-photo-upload-dialog [data-tab="photo-description"] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: min-content 1fr min-content; grid-template-areas: "heading heading" "label label" "back save"; gap: 24px; } peg-photo-upload-dialog [data-tab="photo-description"] h3 { grid-area: heading; } peg-photo-upload-dialog [data-tab="photo-description"] .back { grid-area: back; } peg-photo-upload-dialog [data-tab="photo-description"] .descriptionLayer { grid-area: label; } peg-photo-upload-dialog [data-tab="photo-description"] .save, peg-photo-upload-dialog [data-tab="photo-description"] .continue { grid-area: save; } peg-photo-upload-dialog h3 { font: var(--FONT_default_200); color: var(--COLOR_defaultText); margin: 0; } peg-photo-editor-old #imageContainer { height: 74vh; } @media only screen and (min-width: 481px) { peg-photo-editor-old #imageContainer { min-height: 380px; max-height: 380px; height: auto; } } peg-photo-editor-old #imageContainer .cropper-view-box { outline: 1px solid var(--COLOR_supportDark_100); outline-color: var(--COLOR_supportDark_100); } peg-photo-editor-old #imageContainer .cropper-view-box::after { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; left: 0; content: ""; width: 100%; height: 0; padding-bottom: 100%; border: 1px solid var(--COLOR_supportDark_100); border-radius: var(--borderRadius_circle); } peg-photo-editor-old .photouploadControls { display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0; } peg-photo-editor-old .photouploadControls .controlGroup { display: flex; justify-content: center; } @media (pointer: coarse) { peg-photo-editor-old .photouploadControls { grid-template-columns: 1fr; } peg-photo-editor-old .photouploadControls .controlGroup.zoom { display: none; } } peg-photo-selector-old #dragDropArea { display: none; } @media (pointer: fine) { peg-photo-selector-old #dragDropArea { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 100px; margin-bottom: 15px; padding: 20px; cursor: default; font: var(--FONT_default_100); color: var(--COLOR_supportDark_300); border: 2px dashed var(--COLOR_defaultText); border-radius: var(--borderRadius_75); } } peg-photo-selector-old #dragDropArea.dragOver { border-color: var(--COLOR_alertSuccess_100); box-shadow: 0 0 20px -6px var(--COLOR_supportDark_100) inset; } peg-photo-selector-old #dragDropArea .wdk-icon.icon_upload { display: block; width: 46px; height: 46px; } peg-photo-selector-old #uploadButton { position: relative; display: flex; justify-content: center; } peg-photo-uploader-old { display: flex; justify-content: center; flex-direction: column; margin-top: 30px; } peg-photo-uploader-old progress { accent-color: var(--COLOR_primary_100); width: 100%; height: 30px; } peg-lifestyle-tag { display: none; position: relative; padding: 9px 12px; align-items: center; width: auto; height: 46px; border-radius: var(--borderRadius_rounded); border: 2px solid var(--COLOR_supportDark_040); gap: 5px; font: var(--FONT_default_75); } peg-lifestyle-tag[show] { display: flex; } peg-lifestyle-tag[moreItems] { font: var(--FONT_default_200); } peg-lifestyle-tag[moreItems] .bgIcon { width: 12px; height: 12px; } peg-lifestyle-tag[match][category-name="INTERESTS"] { background-color: var(--COLOR_decoration_200_light); border-color: rgba(0, 0, 0, 0); } peg-lifestyle-tag[match][category-name="INTERESTS"] .bgIcon, peg-lifestyle-tag[match][category-name="INTERESTS"] span { color: var(--COLOR_decoration_200); fill: var(--COLOR_decoration_200); } peg-lifestyle-tag[match][category-name="SPORTS"] { background-color: var(--COLOR_decoration_300_light); border-color: rgba(0, 0, 0, 0); } peg-lifestyle-tag[match][category-name="SPORTS"] .bgIcon, peg-lifestyle-tag[match][category-name="SPORTS"] span { color: var(--COLOR_decoration_300); fill: var(--COLOR_decoration_300); } peg-lifestyle-tag[match][category-name="FAVORITE_CUISINE"] { background-color: var(--COLOR_primary_100_light); border-color: rgba(0, 0, 0, 0); } peg-lifestyle-tag[match][category-name="FAVORITE_CUISINE"] .bgIcon, peg-lifestyle-tag[match][category-name="FAVORITE_CUISINE"] span { color: var(--COLOR_primary_100); fill: var(--COLOR_primary_100); } peg-lifestyle-tag[match][category-name="HOLIDAY"] { background-color: var(--COLOR_decoration_100_light); border-color: rgba(0, 0, 0, 0); } peg-lifestyle-tag[match][category-name="HOLIDAY"] .bgIcon, peg-lifestyle-tag[match][category-name="HOLIDAY"] span { color: var(--COLOR_decoration_100); fill: var(--COLOR_decoration_100); } peg-lifestyle-tag[match][category-name="BEST_LIVE_SKILLS"] { background-color: var(--COLOR_decoration_400_light); border-color: rgba(0, 0, 0, 0); } peg-lifestyle-tag[match][category-name="BEST_LIVE_SKILLS"] .bgIcon, peg-lifestyle-tag[match][category-name="BEST_LIVE_SKILLS"] span { color: var(--COLOR_decoration_400); fill: var(--COLOR_decoration_400); } peg-lifestyle-tag[is-animated] { animation: like 0.4s ease-in-out forwards; } @keyframes like { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } peg-lifestyle-tag .bgIcon { display: block; color: var(--COLOR_supportDark_400); height: 28px; contain-intrinsic-size: 28px; } peg-lifestyle-tag .bgIcon::before { width: 28px; height: 28px; contain-intrinsic-size: 28px; } .linkListCard { border-radius: var(--borderRadius_100); background: var(--COLOR_supportDark_040); padding: 24px; } @media only screen and (min-width: 768px) { .linkListCard { border-radius: 0; background: rgba(0, 0, 0, 0); padding: 0; } } .linkListCard ul { margin-top: -10px; margin-bottom: 8px; } .linkListCard ul li.active a { text-decoration: none; } .linkListCard ul li.active a::after { display: none; } .linkListCard ul li a { position: relative; display: block; padding: 10px 0; text-decoration: none; } @media (hover: hover) { .linkListCard ul li a:hover { text-decoration: underline; } } .linkListCard ul li a::after { content: ""; width: 24px; height: 24px; -webkit-mask-size: cover; mask-size: cover; display: inline-block; color: inherit; background-color: currentcolor; -webkit-mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); mask-image: url(../../img/icons/single_color/icon_arrow_right_regular.svg); vertical-align: -3px; width: 13px; height: 13px; white-space: nowrap; vertical-align: -2px; } .linkListCard.isPremium a.onlyBasic, .linkListCard.isBasic a.onlyPremium { display: none; }