html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; -moz-appearance: none; } input[type=search] { -webkit-appearance: none; -moz-appearance: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; vertical-align: top; resize: vertical; } audio, canvas, video { display: inline-block; display: inline; max-width: 100%; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } img { border: 0; -ms-interpolation-mode: bicubic; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; height: 13px; width: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } html, button, input, select, textarea { color: #222; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } :root { --brand-primary-main: #EC6C83; --brand-primary-hover: #EA5A74; --brand-primary-light: #F3A4B2; --brand-primary-lighter: #F7C3CD; --brand-primary-pale: #FBDBE1; --brand-primary-paler: #FFF3F5; --brand-secondary-main: #253041; --brand-secondary-hover: #172232; --brand-secondary-light: #475770; --brand-secondary-lighter: #748AAA; --brand-secondary-pale: #DFE5EB; --brand-secondary-paler: #F1F5F9; --assistive-info-main: #0163F7; --assistive-info-dark: #024FC4; --assistive-info-light: #5B8CEF; --assistive-info-pale: #DAE8FF; --assistive-success-main: #17803D; --assistive-success-dark: #14532D; --assistive-success-light: #17A34A; --assistive-success-pale: #DCFCE7; --assistive-warning-main: #CA8A03; --assistive-warning-dark: #A16207; --assistive-warning-light: #EBB305; --assistive-warning-pale: #FEF9C3; --assistive-error-main: #991B1B; --assistive-error-dark: #7F1C1D; --assistive-error-light: #EF4444; --assistive-error-pale: #FEE2E1; --surface-main: #FAFAFA; --surface-dark: #F4F4F5; --surface-light: #FDFEFF; --surface-scrim: #100F0F4D; --text-main: #1E293B; --text-secondary: #334155; --text-teriary: #64758B; --text-disable: #AFBCCC; --border-main: #CBD5E1; --border-dark: #64758B; --border-light: #F1F5F9; --max-width-size: 1440px; --marginSideSize: 2rem; --marginSideSizeMobile: 0rem; } @font-face { font-family: 'Farhang'; font-style: normal; font-weight: 400; src: url(/font/elegant-wedding.woff); src: url(/font/elegant-wedding.woff) format('woff'), url(/font/elegant-wedding.eot?#iefix) format('embedded-opentype'), url(/font/elegant-wedding.ttf) format('truetype') } @font-face { font-family: 'Mulish'; src: url('/font/Mulish-Regular.ttf'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Mulish'; src: url('/font/Mulish-Medium.ttf'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Mulish'; src: url('/font/Mulish-Bold.ttf'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Mulish'; src: url('/font/Mulish-ExtraBold.ttf'); font-weight: 800; font-style: normal; } html { font-size: 16px; font-family: 'Mulish' !important; font-style: normal !important; font-weight: normal !important; line-height: normal !important; /* scroll-behavior: smooth; */ scroll-padding-top: 6rem; overflow: auto; scrollbar-width: 2rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { html { --device: mobileP; font-size: clamp(0px, 3.80952380952381vw, 16px); scrollbar-width: none; -ms-overflow-style: none; /* scroll-behavior: smooth; */ } } @media only screen and (min-width:0px) and (max-width:900px) and (orientation:landscape) and (pointer: coarse) { html { --device: mobileL; font-size: clamp(0px, 1.3vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:501px) and (max-width:2500px) and (orientation:portrait) and (pointer: coarse) { html { --device: tabletP; font-size: clamp(0px, 2vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:901px) and (max-width:2900px) and (orientation:landscape) and (pointer: coarse) { html { --device: tabletL; font-size: clamp(0px, 2vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (pointer: fine) { html { font-size: clamp(0px, 1.11111111111vw, 16px); } @media only screen and (orientation:landscape) { html { --device: desktopL; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (orientation:portrait) { html { --device: desktopP; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (min-width:0px) and (max-width:1024px) { :root { --marginSideSize: 1rem; } } } .paddingBig { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; box-sizing: border-box !important; } .paddingBigLeft { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; box-sizing: border-box !important; } .paddingBig2 { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; box-sizing: border-box !important; } .marginBig { margin-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; margin-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSize)) !important; box-sizing: border-box !important; } .marginBig2 { margin-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; margin-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2)) !important; box-sizing: border-box !important; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .paddingBig { padding-left: var(--marginSideSizeMobile) !important; padding-right: var(--marginSideSizeMobile) !important; } .paddingBig2 { padding-left: 0 !important; padding-right: 0 !important; } } @media only screen and (min-width:501px) and (max-width:2500px) and (orientation:portrait) and (pointer: coarse) { .paddingBig { padding-left: 0 !important; padding-right: 0 !important; } .paddingBig2 { padding-left: 0 !important; padding-right: 0 !important; } } @media only screen and (min-width:901px) and (max-width:2900px) and (orientation:landscape) and (pointer: coarse) { .paddingBig { padding-left: 0 !important; padding-right: 0 !important; } .paddingBig2 { padding-left: 0 !important; padding-right: 0 !important; } } * { box-sizing: border-box; } .hidden { display: none !important; } .w100 { width: 100% !important; } .w50 { width: 50% !important; } .w50rem05 { width: calc(50% - 0.5rem) !important; } .w33rem2 { width: calc((100% - 2rem) / 3) !important; } .w66rem2 { width: calc((2 * ((100% - 2rem) / 3)) + 1rem) !important; } .mb1 { margin-bottom: 1rem !important; } .ml1 { margin-left: 1rem !important; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .ml1m { margin-left: 1rem !important; } } .mb2 { margin-bottom: 2rem !important; } .mt2 { margin-top: 2rem !important; } .flex1 { flex: 1 !important; } a { cursor: pointer !important; } .center { text-align: center; } .mla { margin-left: auto; } .mra { margin-right: auto; } .mt6 { margin-top: 6rem; } .mt1_5 { margin-top: 1.5rem; } .mb1_5 { margin-bottom: 1.5rem; } .ml0_5 { margin-left: 0.5rem; } .DH1 { font-size: 2rem; font-weight: 700; line-height: normal; } .DH2 { font-size: 1.5rem; font-weight: 800; line-height: normal; } .DH3 { font-size: 1.25rem; font-weight: 800; line-height: normal; } .DH4, .DH5, .DH6 { font-size: 1.125rem; font-weight: 700; line-height: normal; } .DB1B { font-size: 1rem; font-weight: 700; line-height: normal; } .DB1 { font-size: 1rem; font-weight: 500; line-height: 1.5rem; } .DB2B { font-size: 0.875rem; font-weight: 700; line-height: normal; } .DB2 { font-size: 0.875rem; font-weight: 500; line-height: normal; } .DB3B { font-size: 0.75rem; font-weight: 700; line-height: normal; } .DB3 { font-size: 0.75rem; font-weight: 500; line-height: normal; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .MH1 { font-size: 1.5rem; font-weight: 700; line-height: normal; } .MH3 { font-size: 1rem; font-weight: 700; line-height: normal; } .DB1 { font-size: 0.875rem; font-weight: 400; line-height: normal; } .MB1B { font-size: 0.875rem; font-weight: 700; line-height: normal; } .MB3 { font-size: 0.625rem; font-weight: 500; line-height: normal; } .mw100 { width: 100% !important; } .mmb1 { margin-bottom: 1rem !important; } .mw50rem05 { width: calc(50% - 0.5rem) !important; } .mmla { margin-left: auto !important; } .mmra { margin-right: auto !important; } .mml0_5 { margin-left: 0.5rem; } .mmlu { margin-left: unset; } } .clickable { cursor: pointer; } .zindex4 { z-index: 4; } .myButton { /* width: 100%; */ display: inline-flex; justify-content: center; align-items: center; border-radius: 0.25rem; font-family: 'Mulish'; font-style: normal; line-height: normal; font-size: 1rem; font-weight: 600; gap: 0.5rem; text-decoration: none; box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; white-space: nowrap; } .myButton:hover { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myButton.onlyIcon { height: 2.75rem; width: 2.75rem; padding-left: 0 !important; padding-right: 0 !important; } .myButton.large { padding: 0.75rem 1.25rem; } .myButton.large.iconLeft { padding-left: 0.75rem; } .myButton.large.iconRight { padding-right: 0.75rem; } .myButton.large.free { padding: 0.75rem; } .myButton.medium { padding: 0.75rem 1.25rem; } .myButton.medium.iconLeft { padding-left: 0.75rem; } .myButton.medium.iconRight { padding-right: 0.75rem; } .myButton.medium.free { padding: 0.75rem; } .myButton.small { padding: 0.5rem 1rem; } .myButton.small.iconLeft { padding-left: 0.5rem; } .myButton.small.iconRight { padding-right: 0.5rem; } .myButton.small.free { padding: 0.5rem; } .myButton.small.onlyIcon { height: 2.375rem; width: 2.375rem; padding-left: 0 !important; padding-right: 0 !important; } .myButton.iconLeft::before, .myButton.iconRight::after { content: attr(iconcodeleft); font-family: 'Farhang'; font-weight: normal; display: flex; justify-content: center; align-items: center; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; color: var(--text-contrast, #FFFDFE); } .myButton.iconRight::after { content: attr(iconcoderight); } .myButton:hover::before, .myButton:hover::after { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myButton.large.iconLeft::before, .myButton.large.iconRight::after { font-size: 1.5rem; width: 1.5rem; height: 1.5rem; } .myButton.medium.iconLeft::before, .myButton.medium.iconRight::after { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; } .myButton.small.iconLeft::before, .myButton.small.iconRight::after { font-size: 1.125rem; width: 1.125rem; height: 1.125rem; } .myButton.elevated { border: 0; background: var(--brand-primary-main, #EC6C83); box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); color: var(--text-contrast, #FFFDFE); } .myButton.elevated:hover { background: var(--brand-primary-hover, #EA5A74); box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); } .myButton.elevated[disabled] { background: var(--text-disable, #AFBCCC); box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); } .myButton.primary { border: 1px solid transparent; background: var(--brand-primary-main, #EC6C83); color: var(--text-contrast, #FFFDFE); } .myButton.primary:hover { border: 1px solid transparent; background: var(--brand-primary-hover, #EA5A74); color: var(--text-contrast, #FFFDFE); } .myButton.primary[disabled] { border: 1px solid transparent; background: var(--text-disable, #AFBCCC); color: var(--text-contrast, #FFFDFE); } .myButton.secondary { background: var(--brand-secondary-main, #253041); color: var(--text-contrast, #FFFDFE); border: 0; } .myButton.secondary:hover { background: var(--brand-secondary-hover, #172232); color: var(--text-contrast, #FFFDFE); } .myButton.secondary[disabled] { background: var(--text-disable, #AFBCCC); color: var(--text-contrast, #FFFDFE); } .myButton.mainOutline { background-color: transparent; border: 1px solid var(--brand-primary-main, #EC6C83); color: var(--brand-primary-main, #EC6C83); } .myButton.mainOutline:hover { background-color: transparent; border: 1px solid var(--brand-primary-hover, #EA5A74); color: var(--brand-primary-hover, #EA5A74); } .myButton.mainOutline[disabled] { background-color: transparent; border: 1px solid var(--text-disable, #AFBCCC); color: var(--text-disable, #AFBCCC); } .myButton.mainOutline.iconLeft::before, .myButton.mainOutline.iconRight::after { color: var(--brand-primary-main, #EC6C83); } .myButton.mainOutline.iconLeft:hover::before, .myButton.mainOutline.iconRight:hover::after { color: var(--brand-primary-hover, #EA5A74); } .myButton.mainOutline.iconLeft[disabled]::before, .myButton.mainOutline.iconRight[disabled]::after { color: var(--text-disable, #AFBCCC); } .myButton.grayOutline { background-color: transparent; border: 1px solid var(--border-main, #CBD5E1); color: var(--text-main, #1E293B); } .myButton.grayOutline:hover { background-color: transparent; border: 1px solid var(--border-dark, #64758B); color: var(--text-main, #1E293B); } .myButton.grayOutline[disabled] { background-color: transparent; border: 1px solid var(--text-disable, #AFBCCC); color: var(--text-disable, #AFBCCC); } .myButton.grayOutline.iconLeft::before, .myButton.grayOutline.iconRight::after { color: var(--text-main, #1E293B); } .myButton.grayOutline.iconLeft:hover::before, .myButton.grayOutline.iconRight:hover::after { color: var(--text-main, #1E293B); } .myButton.grayOutline.iconLeft[disabled]::before, .myButton.grayOutline.iconRight[disabled]::after { color: var(--text-disable, #AFBCCC); } .myButton.text { background-color: transparent; border: 1px solid transparent; color: var(--brand-primary-main, #EC6C83); } .myButton.text:hover { background-color: transparent; border: 1px solid transparent; color: var(--brand-primary-hover, #EA5A74); } .myButton.text[disabled] { background-color: transparent; border: 1px solid transparent; color: var(--text-disable, #AFBCCC); } .myButton.text.iconLeft::before, .myButton.text.iconRight::after { color: var(--brand-primary-main, #EC6C83); } .myButton.text.iconLeft:hover::before, .myButton.text.iconRight:hover::after { color: var(--brand-primary-hover, #EA5A74); } .myButton.text.iconLeft[disabled]::before, .myButton.text.iconRight[disabled]::after { color: var(--text-disable, #AFBCCC); } .myButton.wide { width: 100%; } .myButton.iconLeft[iconcodecolor]::before { color: var(--leftcolor) !important; } .myButton.iconLeft.loading::before { content: '\e946'; rotate: 360deg; animation: loadingAnimation 1s ease 0s infinite forwards; } .myButton.iconRight.loading::after { content: '\e946'; rotate: 360deg; animation: loadingAnimation 1s ease 0s infinite forwards; } @keyframes loadingAnimation { 0% { content: '\e946'; rotate: 0deg; } 80% { content: '\e946'; rotate: 360deg; } 100% { content: '\e946'; rotate: 360deg; } } .myButton.rotate180::before, .myButton.rotate180::after { transform: rotateX(180deg); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .wideMobile { width: 100%; } } /* <label class="myInput iconLeft iconRight" labeltext="abcd efgh" helpertext="qwer trew"><input type="email" placeholder="Search vendors names, locations and services"> <span iconcodeleft="&#xe913" iconcoderight="&#xe913"></span></label> */ .myInput { display: flex; flex-direction: column; position: relative; gap: 0.5rem; } .myInput[labeltext]::before { content: attr(labelText); color: var(--text-main, #1E293B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 1.3; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput[helpertext]::after { content: attr(helperText); color: var(--text-secondary, #334155); font-family: Mulish; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput>input, .myInput>textarea { display: flex; width: 100%; height: 2.75rem; padding: 0.75rem 0.5rem; align-items: center; gap: 0.5rem; border-radius: 0.25rem; border: 1px solid var(--border-main, #CBD5E1); box-sizing: border-box; color: var(--text-teriary, #64758B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput>textarea { height: unset; min-height: 2.75rem; scrollbar-width: thin; resize: none; line-height: 1.125rem; } /* .myInput input.disable { pointer-events: none; } */ .myInput.iconLeft>input, .myInput.iconLeft>textarea { padding-left: 2.5rem; } .myInput.iconRight>input, .myInput.iconRight>textarea { padding-right: 2.5rem; } .myInput.iconLeft>span[iconcodeleft] { position: absolute; left: 0.625rem; /* top: 0.625rem; */ width: 1.5rem; height: 1.5rem; } .myInput.iconRight>span[iconcoderight] { position: absolute; right: 0.625rem; /* top: 0.625rem; */ width: 1.5rem; height: 1.5rem; } .myInput.iconLeft>span[iconcodeleft]::before { content: attr(iconcodeleft); font-family: 'Farhang'; font-weight: normal; font-size: 1.5rem; color: var(--text-teriary, #64758B); width: 1.5rem; height: 1.5rem; display: flex; align-items: center; } .myInput.iconRight>span[iconcoderight]::before { content: attr(iconcoderight); font-family: 'Farhang'; font-weight: normal; font-size: 1.5rem; color: var(--text-teriary, #64758B); width: 1.5rem; height: 1.5rem; display: flex; align-items: center; } .myInput.iconRight.dropdown>input { cursor: pointer; } .myInput.dropdown.multiselect>input { display: none; } .myInput.iconRight.dropdown>span[iconcoderight] { cursor: pointer; transform: rotateX(0deg); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconRight.show.dropdown>span[iconcoderight] { transform: rotateX(180deg); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconRight.show.dropdown>span[iconcoderight].noRotate { transform: rotateX(0deg); } .myInput>span { bottom: 0.625rem !important; } .myInput[helpertext]>span { top: 2.3rem !important; bottom: unset !important; } .myInput>input:focus { border: 1px solid var(--border-dark, #64758B); color: var(--text-main, #1E293B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.error[helpertext]::after { color: var(--assistive-error-main, #991B1B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.error>input { border: 1px solid var(--assistive-error-main, #991B1B); color: var(--text-main, #1E293B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconLeft.error>span::before, .myInput.iconRight.error>span::after { color: var(--assistive-error-main, #991B1B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.success[helpertext]::after { color: var(--assistive-success-main, #17803D); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.success>input { border: 1px solid var(--assistive-success-main, #17803D); color: var(--text-main, #1E293B); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconLeft.success>span::before, .myInput.iconRight.success>span::after { color: var(--assistive-success-main, #17803D); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.disabled[helpertext]::after { color: var(--text-disable, #AFBCCC); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.disabled>input { border: 1px solid var(--border-main, #CBD5E1); background: var(--surface-dark, #F4F4F5); color: var(--text-disable, #AFBCCC); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.iconLeft.disabled>span::before, .myInput.iconRight.disabled>span::after { color: var(--border-main, #CBD5E1); background: var(--surface-dark, #F4F4F5); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.dropdown>div { display: flex; width: 100%; padding: 0; flex-direction: column; align-items: flex-start; border-radius: 0.25rem; border: 1px solid var(--border-main, #CBD5E1); background: var(--surface-light, #FDFEFF); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); position: absolute; top: 100%; z-index: 3; opacity: 0; padding: 0; overflow: hidden; scrollbar-width: thin; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; max-height: 15rem; overflow: auto; } .myInput.show.dropdown>div { opacity: 1; top: calc(100% + 0.12rem); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.dropdown.multiselect>div { position: unset; max-height: 13.75rem; min-height: 13.75rem; height: 13.75rem; } .myInput[labelText].dropdown>div { top: 4.7rem; } .myInput.dropdown>div>div { display: flex; width: 100%; padding: 0.25rem 0rem; flex-direction: column; align-items: flex-start; background: var(--surface-light, #FDFEFF); z-index: -1; opacity: 0; padding: 0; /* overflow: hidden; */ scrollbar-width: thin; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; max-height: 15rem; overflow: auto; } .myInput.show.dropdown>div>div { opacity: 1; top: calc(100% + 0.12rem); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.dropdown>div>div>* { display: flex; width: 100%; box-sizing: border-box; height: 0rem; padding: 0rem 1rem; align-items: center; gap: 0.5rem; opacity: 0; color: var(--text-main, #1E293B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; cursor: pointer; white-space: nowrap; overflow: hidden; box-sizing: border-box; min-height: 0rem; } .myInput.show.dropdown>div>div>* { opacity: 1; height: 2.75rem; min-height: 2.75rem; padding: 0.25rem 1rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.show.dropdown>div>div>*.selected { background: var(--brand-primary-paler, #FFF3F5); color: var(--brand-primary-hover, #EA5A74); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.show.dropdown>div>div>*:hover { color: var(--brand-primary-hover, #EA5A74); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media only screen and (pointer: coarse) { .myInput.show.dropdown>div>div>*:hover { color: var(--text-main, #1E293B); -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; } .myInput.show.dropdown>div>div>*.selected:hover { background: var(--brand-primary-paler, #FFF3F5); color: var(--brand-primary-hover, #EA5A74); -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; } } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) {} .myInput.date>div { display: none; width: calc(20.5rem + 2px); padding: 1rem 1rem 1.5rem; flex-direction: column; align-items: center; border-radius: 0.25rem; background: var(--surface-light, #FDFEFF); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); border: 1px solid var(--border-main, #CBD5E1); position: absolute; top: 2.9rem; right: 0; z-index: 2; opacity: 0; overflow: hidden; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: auto; box-sizing: border-box; } .myInput.date>div.showTop { top: unset; bottom: 2.9rem; } .myInput.date.double>div { width: calc(39rem + 2px); } .myInput.show.date>div { display: flex; opacity: 1; animation: showDate 0.3s ease-in-out 0s 1 forwards; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; z-index: 10000; } @keyframes showDate { 0% { opacity: 0; display: none; } 1% { opacity: 0; display: flex; } 100% { display: flex; opacity: 1; } } .myInput[labelText].date>div { top: 4.5rem; } .myInput[labelText].date>div.showTop { top: unset; bottom: 2.9rem; } .myInput.date>div>div { display: flex; padding: 0.5rem; flex-direction: row; align-items: flex-start; gap: 1rem; /* width: 100%; */ box-sizing: border-box; } .myInput.date div.daysAndName { gap: 2rem; } .myInput.date>div>div>div { display: flex; padding: 0; flex-direction: column; align-items: flex-start; gap: 1rem; width: 17.5rem; box-sizing: border-box; } .myInput.date>div>.myButton { /* width: calc(50% - 0.5rem); */ width: 8rem; margin: 0 0.5rem; } .myInput.date div.monthYear { display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; position: relative; gap: 0; } .myInput.date div.monthYear>* { color: var(--text-main, #1E293B) !important; z-index: 1; } .myInput.date div.monthYear>*::before { color: var(--text-teriary, #64758B) !important; } .myInput.date div.monthYear>.myButton:nth-child(4)::before { rotate: 180deg; } .myInput.date div.monthYear>.myButton:nth-child(2), .myInput.date div.monthYear>.myButton:nth-child(3) { padding: 0.75rem 0.5rem !important; } .myInput.date.double div.monthYear>.myButton:nth-child(2), .myInput.date.double div.monthYear>.myButton:nth-child(3) { padding: 0.75rem 0.5rem !important; width: calc(50% - 1rem); position: absolute; left: 0; z-index: 0; } .myInput.date.double div.monthYear>.myButton:nth-child(3) { left: unset; right: 0; } /* .myInput.date>div>div.monthYear>*.free { position: absolute; left: 0; top: 0; } */ .myInput.date div.monthYear>div.monthYearDetail { width: 100%; position: absolute; top: 0; left: 0; gap: 3rem; display: none; opacity: 0; flex-direction: row; justify-content: center; align-items: center; z-index: 1; background-color: white; } .myInput.date div.monthYear>div.monthYearDetail.showDetail { display: flex; opacity: 1; animation: showDetail 0.2s ease 0s 1 forwards; } @keyframes showDetail { 0% { display: none; opacity: 0; } 1% { display: flex; opacity: 0; } 100% { display: flex; opacity: 1; } } .myInput.date>div .monthYear>div { display: none; width: 8.5rem; height: 0rem; padding: 0rem 0.25rem; flex-direction: column; align-items: flex-start; position: absolute; left: 0; top: 3.1875rem; border-radius: 0.25rem; border: 1px solid var(--border-main, #CBD5E1); background: var(--surface-main, #FAFAFA); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); box-sizing: border-box; } .myInput.date>div .monthYear>div.yearDetail { left: unset; right: 0; } .myInput.date>div .monthYear>div.showDetail { display: flex; padding: 0.25rem; height: 10rem; animation: showDetailAnim 0.5s ease 0s 1 forwards; } @keyframes showDetailAnim { 0% { display: none; height: 0rem; padding: 0rem 0.25rem; } 1% { display: flex; height: 0rem; padding: 0rem 0.25rem; } 100% { display: flex; padding: 0.25rem 0.25rem; height: 10rem; } } .myInput.date>div .monthYear>div>div { display: flex; flex-direction: column; overflow: auto; width: 100%; height: 100%; scrollbar-width: thin; } .myInput.date>div .monthYear>div>div>Span { display: flex; height: 2.75rem; padding: 0.5rem 1rem; align-items: center; gap: 0.5rem; align-self: stretch; color: var(--text-main, #1E293B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; width: 96%; cursor: pointer; box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.date>div .monthYear>div>div>Span:hover { background: var(--brand-primary-pale, #FBDBE1); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myInput.date div.daysAndName { display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; } .myInput.date div.days { display: flex; flex-direction: row; flex-wrap: wrap; } .myInput.date div.dayOfWeek { display: flex; flex-direction: row; justify-content: space-around; width: 100%; } .myInput.date div.days>span { display: flex; width: 2.5rem; height: 2rem; padding: 0.5rem; justify-content: center; align-items: center; box-sizing: border-box; color: var(--text-main, #1E293B); text-align: center; background: linear-gradient(90deg, transparent 0%, transparent 100%); /* desktop/body2 */ font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; -webkit-transition: border-radius 0s; -moz-transition: border-radius 0s; -ms-transition: border-radius 0s; -o-transition: border-radius 0s; transition: border-radius 0s; position: relative; } .myInput.date div.dayOfWeek>* { color: var(--brand-primary-main, #EC6C83); } .myInput.date div.days>* { border-radius: 0.25rem; cursor: pointer; } .myInput.date div.days>span.pre { background: transparent; color: var(--text-disable, #AFBCCC); } .myInput.date div.days>span:hover { background: linear-gradient(90deg, var(--brand-primary-pale, #FBDBE1) 0%, var(--brand-primary-pale, #FBDBE1) 100%); } .myInput.date div.days>span.selectedStart { border-radius: 0.25rem 0 0 0.25rem; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-main, #EC6C83) 100%) !important; color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.selectedEnd { border-radius: 0 0.25rem 0.25rem 0; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-main, #EC6C83) 100%) !important; color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.selectedEndVirtual { border-radius: 0 0.25rem 0.25rem 0; background: linear-gradient(90deg, var(--brand-primary-ligh, #F3A4B2) 0%, var(--brand-primary-ligh, #F3A4B2) 100%) !important; color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.endVirtual, .myInput.date div.days>span.startVirtual { border-radius: 0; background: linear-gradient(90deg, var(--brand-primary-ligh, #F3A4B2) 0%, var(--brand-primary-ligh, #F3A4B2) 100%); color: var(--Text-contrast, #FFF); } /* khonehaye vasat */ .myInput.date div.days>span.startVirtual~span:has(~span.selectedEnd), .myInput.date div.days>span.startVirtual~span:has(~span.selectedEndVirtual), .myInput.date div.days>span.selectedStart~span:has(~span.selectedEnd), .myInput.date div.days>span.selectedStart~span:has(~span.selectedEndVirtual), .myInput.date div.days>span.selectedStart~span:has(~span.endVirtual) { border-radius: 0; background: linear-gradient(90deg, var(--brand-primary-ligh, #F3A4B2) 0%, var(--brand-primary-ligh, #F3A4B2) 100%); color: var(--Text-contrast, #FFF); } /* avali bade start */ .myInput.date div.days>span.selectedStart+span:has(~span.selectedEnd), .myInput.date div.days>span.selectedStart+span:has(~span.selectedEndVirtual), .myInput.date div.days>span.selectedStart+span:has(~span.endVirtual) { border-radius: 0; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-ligh, #F3A4B2) 100%); color: var(--Text-contrast, #FFF); } /* akhari ghable end */ .myInput.date div.days>span.startVirtual~span:has(+span.selectedEnd), .myInput.date div.days>span.selectedStart~span:has(+span.selectedEnd) { border-radius: 0; background: linear-gradient(270deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-ligh, #F3A4B2) 100%); color: var(--Text-contrast, #FFF); } /* 3 khone */ .myInput.date div.days>span.selectedStart+span:has(+span.selectedEnd) { border-radius: 0; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-ligh, #F3A4B2) 50%, var(--brand-primary-main, #EC6C83) 100%); color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.selectedStart.selectedEnd { border-radius: 0.25rem 0.25rem; background: linear-gradient(90deg, var(--brand-primary-main, #EC6C83) 0%, var(--brand-primary-main, #EC6C83) 100%); color: var(--Text-contrast, #FFF); } .myInput.date div.days>span.disable, .myInput.date div.days>span.disable:hover { background: linear-gradient(90deg, transparent 0%, transparent 100%) !important; cursor: auto; } .myInput.checkbox { flex-direction: row; align-items: center; gap: 0; } .myInput.checkbox input { opacity: 0; width: 1rem; } .myInput.checkbox::after { content: '\e968'; font-family: 'Farhang'; font-size: 1rem; line-height: 1rem; width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; color: transparent; background: transparent; border: 1px solid var(--border-main, #CBD5E1); -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; transform: translateX(-1rem); } .myInput.checkbox:has(input[type="checkbox"]:checked)::after { color: white; background: var(--brand-primary-main, #EC6C83); border: 1px solid var(--brand-primary-main, #EC6C83); -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .myInput.date>div { min-width: 100%; } .myInput.date div.daysAndName { width: 100%; } .myInput.date>div>div>div { width: 100%; } .myInput.date div.days>span { width: calc(100% / 7); } .myInput.show.date>div { justify-content: space-around; position: fixed; bottom: 0 !important; top: unset !important; } .myInput>input, .myInput>textarea { font-size: clamp(16px, 0.875rem, 32px) !important; } } body>main { width: 100%; padding-top: 4.85rem; height: 100dvh; display: flex; flex-direction: row; } main>aside { display: flex; width: 16.6875rem; height: 100%; padding: 2rem 1rem; flex-direction: column; /* justify-content: space-between; */ align-items: center; flex-shrink: 0; box-sizing: border-box; gap: 0.5rem; background: var(--surface-light, #FDFEFF); z-index: 12; } main>aside>* { width: 100%; } main>aside>ul { display: flex; flex-direction: column; gap: 0.5rem; } main>aside>ul::before { content: attr(titletext); color: var(--text-teriary, #64758B); /* desktop/body2 */ font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; width: 100%; height: 1.5rem; padding-left: 0.5rem; box-sizing: border-box; } hr { width: 100%; height: 0.0625rem; background: #CBD5E1; border: 0; } main>aside>button { margin-top: auto; } main>article { background: var(--surface-main, #FAFAFA); width: calc(100% - 16.6875rem); height: calc(100vh - 4.75rem); padding: 0 2rem 2rem 2rem; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; } main>article>header { display: flex; flex-direction: row; width: 100%; height: 5rem; padding: 0.75rem 0rem; justify-content: space-between; align-items: center; box-sizing: border-box; } main>article>header>div { display: flex; flex-direction: row; gap: 0.75rem; } main>article>div { display: flex; flex-direction: column; padding: 1rem 1.5rem; justify-content: flex-start; align-items: center; background: var(--surface-light, #FDFEFF); gap: 1.5rem; width: 100%; height: calc(100% - 2rem); margin-top: 2rem; box-sizing: border-box; } main>article>header+div { margin-top: 0; height: calc(100% - 5rem); } main>article>div:has(>header) { height: calc(100% - 5rem); } main>article>div:has(+aside) { width: calc(100% - 18rem); padding: 0 1.5rem 0 0; } main>article>div+aside { width: 18rem; height: calc(100% - 5rem); background: var(--surface-light, #FDFEFF); box-sizing: border-box; border-left: 1px solid var(--border-light, #F1F5F9); display: flex; padding: 2rem 1rem 2rem 2rem; flex-direction: column; justify-content: flex-start; box-sizing: border-box; } main>article>div.busInfo { display: inline-flex; flex-direction: row; flex-wrap: wrap; padding: 1.5rem; justify-content: flex-start; align-items: flex-end; align-content: flex-start; background: var(--surface-light, #FDFEFF); gap: 1rem; width: 100%; max-height: calc(100% - 5rem); box-sizing: border-box; overflow: auto; scrollbar-width: thin; } main>article>div.busInfo h2 { font-weight: bolder; font-size: 1.5rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { body>main { padding-top: 4rem; height: 100dvh; } main>aside { position: fixed; height: calc(100dvh - 4rem); width: 100%; left: -100%; bottom: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } body.showMenu main>aside { left: 0%; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } main>article { width: 100%; height: calc(100dvh - 4rem); padding: 0 0 1rem 0; } main>article>header { background: var(--surface-main, #FAFAFA); flex-wrap: wrap; height: unset; padding: 2rem 1rem 1rem; justify-content: space-around; row-gap: 1rem; position: sticky; top: 4rem; z-index: 10; } main>article>header+div { height: unset } } .userCard { margin-bottom: 2rem; display: flex; padding: 0rem 0.5rem; justify-content: center; align-items: flex-start; flex-direction: column; height: 3rem; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: 0.75rem; overflow: hidden; } .userCard.noPadding { padding: 0; } .userCard>h2 { color: var(--text-main, #1E293B); /* desktop/h3 */ font-family: Mulish; font-size: 1.25rem; font-style: normal; font-weight: 800; line-height: normal; } .userCard>p { color: var(--text-teriary, #64758B); /* desktop/body2 */ font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; } .myButton[iconcodecolor] { color: var(--brand-secondary-main, #253041) !important; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .profileDivParent { min-height: calc(100dvh - 12rem); } } div.myNotification { display: none; flex-direction: row; padding: 0 !important; align-items: center; gap: 0.5rem; flex-shrink: 0; border-radius: 0rem 0.25rem 0.25rem 0rem; max-width: 0%; height: 0rem; min-height: 0rem; border-left: 4px solid; overflow: hidden; box-sizing: border-box; z-index: 1000; } div.myNotification.bottomleft{ position: fixed; top: unset; right: unset; left: 2rem; bottom: 2rem; } div.myNotification.bottomright{ position: fixed; top: unset; left: unset; right: 2rem; bottom: 2rem; } div.myNotification.topleft{ position: fixed; bottom: unset; right: unset; left: 2rem; top: 2rem; } div.myNotification.topright{ position: fixed; bottom: unset; left: unset; right: 2rem; top: 2rem; } div.myNotification>* { opacity: 0; } div.myNotification.neutral { border-color: var(--brand-secondary-light, #475770); background: var(--brand-secondary-paler, #F1F5F9); } div.myNotification.info { border-color: var(--assistive-info-dark, #024FC4); background: var(--assistive-info-pale, #DAE8FF); } div.myNotification.warning { border-color: var(--assistive-warning-dark, #A16207); background: var(--assistive-warning-pale, #FEF9C3); } div.myNotification.error { border-color: var(--assistive-error-dark, #7F1C1D); background: var(--assistive-error-pale, #FEE2E1); } div.myNotification.success { border-color: var(--assistive-success-dark, #14532D); background: var(--assistive-success-pale, #DCFCE7); } div.myNotification.show { display: inline-flex; max-width: 50%; padding: 0 0 0 1rem !important; min-height: 2.75rem; height: 2.75rem; animation: notifShow 1s ease 0s 1 forwards; } @keyframes notifShow { 0% { display: none; max-width: 0%; padding: 0 !important; min-height: 0rem; height: 0rem; } 1% { display: inline-flex; max-width: 0%; padding: 0 !important; min-height: 0rem; height: 0rem; } 20% { max-width: 4px; padding: 0 !important; min-height: 2.75rem; height: 2.75rem; } 100% { max-width: 50%; padding: 0 0 0 1rem !important; min-height: 2.75rem; height: 2.75rem; } } div.myNotification>span { flex: 1; display: flex; width: 21.4375rem; flex-direction: column; justify-content: center; padding: 0.5rem 0; color: var(--text-main, #1E293B); /* desktop/body2 */ font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } div.myNotification>.lastBtn::before { color: var(--text-secondary, #334155) !important; } div.myNotification>* { opacity: 0; } div.myNotification.show>* { opacity: 1; animation: notifShow2 1.3s ease 0s 1 forwards; } @keyframes notifShow2 { 0% { opacity: 0; } 85% { opacity: 0; } 100% { opacity: 1; } } div.myNotification.show.hide { opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } div.myNotification.show.hide>* { opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { div.myNotification { gap: 0rem; } div.myNotification.show { width: calc(100% - 2rem); padding: 0 0 0 1rem !important; } div.myNotification.bottomleft{ top: unset; right: unset; left: 1rem; bottom: 2rem; } div.myNotification.bottomright{ top: unset; left: unset; right: 1rem; bottom: 2rem; } div.myNotification.topleft{ bottom: unset; right: unset; left: 1rem; top: 2rem; } div.myNotification.topright{ bottom: unset; left: unset; right: 1rem; top: 2rem; } @keyframes notifShow { 0% { display: none; max-width: 0%; padding: 0 0 0 0rem !important; min-height: 0rem; height: 0rem; } 1% { display: inline-flex; max-width: 0%; padding: 0 0 0 0rem !important; min-height: 0rem; height: 0rem; } 20% { max-width: 4px; padding: 0 0 0 0rem !important; min-height: 2.75rem; height: 2.75rem; } 100% { max-width: 100%; padding: 0 0 0 1rem !important; min-height: 2.75rem; height: 2.75rem; } } } .siteHeader { display: flex; flex-direction: row; width: 100%; padding: 1rem 2rem; justify-content: space-between; align-items: center; box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); z-index: 11; position: fixed; top: 0; left: 0; background: var(--surface-light, #FDFEFF); } .siteHeader.noShadow { box-shadow: unset; } .siteHeader.onlyLogo { justify-content: center; } .siteHeader>.hamburger { display: none; z-index: 1; /* width: 2.75rem; */ } .siteHeader>.backColor { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--brand-primary-paler, #FFF3F5); } .siteHeader a { text-decoration: none; color: var(--text-teriary, #64758B); } .siteHeader .click a.title { width: 20%; margin-right: 80%; margin-bottom: 1.5rem; color: var(--text-main, #1E293B); } .siteHeader>.logo, .siteHeader>.menu>.logo2 { width: 7.1875rem; height: 2.75rem; flex-shrink: 0; order: 0; z-index: 1; } .siteHeader.onlyLogo>.logo { width: 20rem; } .siteHeader>.logo>a, .siteHeader>.menu>.logo2>a { background-image: url("/image/logo.webp"); background-size: 7.1875rem auto; background-repeat: no-repeat; background-position: center; width: 7.1875rem; height: 2.75rem; display: inline-block; position: absolute; bottom: 1rem; } .siteHeader.onlyLogo>.logo>a { width: 20rem; } .siteHeader>.menu>.logo2 { display: none; } .siteHeader>.menu { display: flex; flex-direction: row; flex-grow: 2; order: 1; margin-left: 2rem; } .siteHeader>.menu>* { display: flex; height: 2.75rem; padding: 0.25rem 1rem; align-items: center; gap: 0.5rem; color: var(--text-teriary, #64758B); position: relative; cursor: pointer; box-sizing: border-box; } .siteHeader>.menu>*::before { content: ''; width: 0; height: 2px; position: absolute; right: 1px; bottom: -2px; background-color: var(--brand-primary-main, #EC6C83); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>*:has(ul)::after { content: '\e900'; font-family: 'Farhang'; width: 1.5rem; height: 1.5rem; font-size: 1.5rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>*:hover, .siteHeader>.menu>*.active { color: var(--brand-primary-main, #EC6C83); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>*.active::after { transform: rotateX(180deg); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>*:hover::before, .siteHeader>.menu>*.active::before { width: calc(100% - 2px); right: unset; left: 1px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>div.vendors>div { display: flex; position: fixed; top: -20rem; left: 0; width: 100%; height: 16.75rem; padding: 1.5rem; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; border-radius: 0rem 0rem 0.25rem 0.25rem; border: 1px solid var(--border-main, #CBD5E1); background: var(--surface-light, #FDFEFF); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: -1; cursor: auto; overflow: hidden; background: var(--brand-primary-paler, #FFF3F5); } .siteHeader>.menu>div.vendors.active>div { top: 4.75rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } /* .siteHeader>.menu>div.vendors>div::after { content: attr(iconcode); font-family: 'Farhang'; font-size: 10rem; color: var(--brand-primary-lighter, #F7C3CD); position: absolute; bottom: -1rem; left: max(calc(((100vw - min(100vw, var(--max-width-size))) / 2) - 10rem), 0rem); rotate: 20deg; opacity: 0; z-index: -1; } .siteHeader>.menu>div.vendors>div[iconcode]::after { opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>div.vendors>div[iconcode]:has(ul>li>a:hover):after { opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } */ .siteHeader>.menu>div.vendors>div>p { width: 100%; display: flex; height: 1.25rem; flex-direction: column; justify-content: center; color: var(--text-main, #1E293B); margin-bottom: 1.5rem; } .siteHeader>.menu>div.vendors ul.listItem { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; box-sizing: border-box; width: 37.5rem; } .siteHeader>.menu>div.vendors ul.listItem>li { width: calc(12.5rem - 1px); } .siteHeader>.menu>div.vendors ul.listItem>li:nth-child(n + 13) { display: none; } .siteHeader>.menu>div.vendors ul.otherVendors { display: flex; width: 28rem; align-items: flex-start; align-content: flex-start; gap: 0.5rem; flex-wrap: wrap; } .siteHeader>.menu>div.vendors .mainVendors ul.otherVendors>li { display: flex; height: 2.5rem; padding: 0rem 0.5rem; align-items: center; gap: 0.25rem; border-radius: 0.25rem; border: 1px solid var(--border-main, #CBD5E1); } .siteHeader>.menu>div.vendors img { display: flex; width: 13.75rem; height: 10.9375rem; padding: 0.625rem; justify-content: space-between; align-items: center; box-sizing: border-box; object-fit: contain; } .siteHeader>.menu>div.tools>div { display: flex; position: fixed; top: -20rem; padding: 1.5rem; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; border-radius: 0rem 0rem 0.25rem 0.25rem; border-top: 1px solid var(--surface-main, #FAFAFA); background: var(--surface-light, #FDFEFF); box-shadow: 0px 0px 12px 1px rgba(152, 155, 160, 0.08); box-sizing: border-box; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: -1; cursor: auto; background: var(--brand-primary-paler, #FFF3F5); } .siteHeader>.menu>div.tools.active>div { top: 4.87rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .siteHeader>.menu>div.tools>div>p { width: 100%; display: flex; height: 1.25rem; flex-direction: column; justify-content: center; color: var(--text-main, #1E293B); margin-bottom: 1.5rem; } .siteHeader>.menu>div.tools ul { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; box-sizing: border-box; width: 25rem; } .siteHeader>.menu>div.tools ul>li { width: 12.5rem; } .siteHeader>.user { display: none; flex-direction: row; order: 2; z-index: 1; padding: 0; justify-content: flex-end; align-items: center; gap: 1.5rem; } .siteHeader>.new { display: flex; flex-direction: row; /* height: 2.75rem; */ padding: 0 0 0 1rem; align-items: center; gap: 0.5rem; position: relative; box-sizing: border-box; order: 2; } .siteHeader>.new::before { content: ''; width: 0.0625rem; height: 2.625rem; background: #CBD5E1; position: absolute; left: 0; } .siteHeader>.new>p { color: var(--brand-primary-main, #EC6C83); display: flex; padding: 0.25rem 1rem; align-items: center; gap: 0.5rem; } .siteHeader>.new>a { display: flex; padding: 0.75rem 1.25rem; justify-content: center; align-items: center; border-radius: 0.25rem; background: var(--brand-secondary-main, #253041); color: var(--text-contrast, #FFFDFE); text-decoration: none; font-weight: 600; } html[userid] .siteHeader>.new { display: none; } html[userid] .siteHeader>.user { display: flex; } .siteHeader a.lang { margin-left: auto; text-transform: uppercase; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .siteHeader { padding: 0.75rem 1rem !important; height: 4.375rem; } .siteHeader>.backColor:has(~div.menu.show) { height: 100dvh; background: #00000055; } .siteHeader>.hamburger { display: flex; z-index: 10000; } .siteHeader>.menu { display: flex; flex-direction: column; margin-left: 0; } .siteHeader>.menu>.logo2 { display: initial; width: 100%; position: relative; aspect-ratio: 2 / 1; height: unset; } .siteHeader>.menu>.logo2::before { content: ''; /* background-image: url(../image/menu-header.png); */ background-color: var(--brand-primary-paler, #FFF3F5); width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; right: 0px; bottom: 0px; } .siteHeader>.user>a.bell { display: none; } .siteHeader>.new { padding: 0; } .siteHeader>.new::before { content: unset; } .siteHeader>.new>p { display: none; } .siteHeader>.new>a { display: flex; background-color: transparent; height: 2.75rem; padding: 0 1rem; align-items: center; color: var(--text-teriary, #64758B); } .siteHeader>.menu { display: none; flex-direction: column; height: 100dvh; width: 80vw; position: absolute; left: 0; top: 0; background: var(--surface-light, #FDFEFF); /* Soft shadow */ box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); z-index: 1; } .siteHeader>.menu>*::before { content: unset; } .siteHeader>.menu.show { display: flex; overflow: hidden; transform: translateX(0); animation: menuMobShow 0.5s ease 0s 1 forwards; } @keyframes menuMobShow { 0% { display: none; transform: translateX(-100vw); } 1% { display: flex; transform: translateX(-100vw); } 100% { display: flex; transform: translateX(0); } } .siteHeader>.menu> :hover, .siteHeader>.menu>.active { color: var(--text-secondary, #334155); } .siteHeader>.menu>* { justify-content: space-between; color: var(--text-secondary, #334155); font-family: Mulish; font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: normal; height: 3.5rem; padding-block: 1rem; } .siteHeader>.menu>*.vendors { height: unset; padding-top: 4rem; } .siteHeader>.menu>*:has(ul)::after { rotate: -90deg; } .siteHeader>.menu>.active::after { transform: unset; } .siteHeader>.menu>div.vendors>div { position: absolute; top: 0 !important; left: 100%; width: 100%; height: calc(100dvh - 40vw - 1.2rem); flex-direction: column; flex-wrap: nowrap; padding: 0.75rem 1rem; z-index: 1; border: 0; box-shadow: none; background-color: white; } /* .siteHeader>.menu>div.vendors.active>div { left: 0; } */ .siteHeader>.menu>div.vendors>div>p { width: 100%; box-sizing: border-box; padding: 0 1rem; margin-bottom: 1rem; } .siteHeader>.menu>div.vendors ul.listItem { width: 100%; padding: 0 1rem; box-sizing: border-box; overflow: scroll; } .siteHeader>.menu>div.vendors ul.otherVendors { /* display: flex; width: 100%; padding: 1rem; box-sizing: border-box; background: var(--surface-light, #FDFEFF); */ display: none; } /* .siteHeader>.menu>div.vendors ul.otherVendors>* { display: none; } .siteHeader>.menu>div.vendors ul.otherVendors>*:nth-last-child(1) { display: initial; width: 100%; box-sizing: border-box; } .siteHeader>.menu>div.vendors ul.otherVendors>*:nth-last-child(1)>a { width: 100%; box-sizing: border-box; } */ .siteHeader>.menu>div.vendors ul.listItem>li { width: 100%; } .siteHeader>.menu>div.vendors ul.listItem>li:nth-child(n + 13) { display: initial; } .listItem>li>a { height: 3.5rem; font-size: 1rem; } .siteHeader>.menu>div.vendors.active, .siteHeader>.menu>div.vendors.active~* { transform: translateX(-100%); margin-left: unset; } .siteHeader a.lang { margin-right: 1rem; } } @media only screen and (min-width:501px) and (max-width:2500px) and (orientation:portrait) and (pointer: coarse) { .siteHeader>.logo, .siteHeader>.menu>.logo2 { padding-left: 2rem !important; } .siteHeader>.user { padding-right: 2rem !important; } } @media only screen and (min-width:901px) and (max-width:2900px) and (orientation:landscape) and (pointer: coarse) { .siteHeader>.logo, .siteHeader>.menu>.logo2 { padding-left: 2rem !important; } .siteHeader>.user { padding-right: 2rem !important; } } .messangerParent { display: flex; flex-direction: row !important; gap: 0 !important; } .messangerParent>*:nth-child(1) { width: 100%; padding-right: 0; } .messangerParent>*:nth-child(2) { display: flex; width: 18.125rem; padding: 2rem 1rem 2rem 2rem; flex-direction: column; justify-content: space-between; align-items: center; border-left: 1px solid var(--border-light, #F1F5F9); height: 100%; /* box-shadow: 0 0 12px 1px rgba(152, 155, 160, 0.08); */ } .messangerParent>*:nth-child(1)+div { width: calc(100% - 18.125rem); padding-right: 1.5rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .messangerParent { min-height: calc(100dvh - 12rem); } .messageManagerParent { min-height: calc(100dvh - 12rem) !important; } } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .subsDivParent { min-height: calc(100dvh - 12rem); } } .reviewPart>button { margin: 4.25rem auto; } .reviewPart>div { display: flex; flex-direction: row; align-items: flex-start; margin: 3rem 0 10rem; } .reviewPart>div>.Left { width: 13rem; margin-right: 1rem; display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; padding: 0.7rem 0; } .reviewPart>div>.Right { width: calc(100% - 14rem); } .reviewPart>div>.Left>*:nth-child(1) { color: var(--text-main, #1E293B); font-family: Mulish; font-size: 2.5rem; font-style: normal; font-weight: 800; line-height: normal; } .reviewPart>div>.Left>*:nth-last-child(1) { color: var(--text-teriary, #64758B); display: flex; flex-direction: row; align-items: center; gap: 0.25rem; margin: 0 !important; } .reviewPart>div>.Left>*:nth-last-child(1)::before { content: '\e923'; font-family: 'Farhang'; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; color: var(--assistive-info-main, #0163F7); } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .reviewPart>button { margin: 1.5rem auto; } .reviewPart>div { flex-direction: column; margin: 1.5rem 0; gap: 1.5rem; } .reviewPart>div>.Left { width: 100%; } .reviewPart>div>.Right { width: 100%; } } .sideMenu { text-decoration: none; padding: 0.65625rem calc(1rem + 4px) 0.65625rem 0.5rem; display: flex; flex-direction: row; align-items: center; gap: 0.75rem; /* background-color: var(--text-contrast, #FFFDFE); */ background: var(--surface-light, #FDFEFF); color: var(--text-secondary, #334155); justify-content: flex-start; width: 100%; border: 0; cursor: pointer; box-sizing: border-box; -webkit-transition: color 0.3s ease, background 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease; } .sideMenu.select { padding: 0.65625rem 1rem 0.65625rem 0.5rem; border-radius: 0.25rem 0rem 0rem 0.25rem; border-right: 4px solid var(--brand-primary-light, #F3A4B2); background: var(--brand-primary-background, #FFFAFA); color: var(--brand-primary-light, #F3A4B2); -webkit-transition: color 0.3s ease, background 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease; } .sideMenu.select::marker { width: 10px; height: 10px; position: absolute; top: 0; left: 0; background-color: blue; } .sideMenu[iconcode]::before { content: attr(iconcode); font-family: 'Farhang'; font-size: 1.125rem; font-weight: normal; display: flex; justify-content: center; align-items: center; color: var(--text-teriary, #64758B); } .sideMenu[iconcode].select::before { color: var(--brand-primary-light, #F3A4B2); } .sideMenu[badgecounter].sideBadge::after { content: attr(badgecounter); display: flex; padding: 0.25rem; justify-content: center; align-items: center; border-radius: 50%; background: var(--brand-primary-light, #F3A4B2); color: var(--text-contrast, #FFFDFE); /* desktop/body3 - B */ font-family: Mulish; font-size: 0.75rem; font-style: normal; font-weight: 700; line-height: normal; margin-left: auto; width: 1.4375rem; height: 1.4375rem; } div.countdown { display: flex; padding: 1rem; align-items: flex-start; gap: 1rem; border-radius: 0.25rem; background: var(--brand-primary-paler, #FFF3F5); } div.countdown>span { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; } div.countdown>span::before { content: attr(text); color: var(--text-main, #1E293B); text-align: center; font-family: Mulish; font-size: 0.875rem !important; font-style: normal; font-weight: 500 !important; line-height: normal; } div.countdown>span::after { content: attr(data-text2); display: flex; width: 4rem; height: 4rem; padding: 0.625rem; justify-content: center; align-items: center; gap: 0.625rem; border-radius: 0.25rem; background: var(--brand-secondary-hover, #172232); color: var(--text-contrast, #FFFDFE); text-align: center; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { div.countdown>span::after { width: 2.5rem; height: 2.5rem; } } .back { color: var(--text-main, #1E293B); border: 0; background-color: transparent; display: flex; flex-direction: row; gap: 0.25rem; align-items: center; /* width: 25rem; */ text-decoration: none; margin: 1.5rem 0; /* width: 100%; */ } .back.type2 { margin: 0; height: 3.5rem; color: var(--text-main, #1E293B); font-family: Mulish; font-size: 2rem; font-style: normal; font-weight: 700; line-height: normal; } .back::before { content: '\e911'; rotate: 180deg; font-family: 'Farhang'; font-size: 1.5rem; width: 1.5rem; height: 1.5rem; font-weight: 400; color: var(--text-teriary, #64758B); display: flex; align-items: center; } .back.type2::before { font-size: 2rem; width: 2rem; height: 2rem; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .back { margin: 0; padding-left: 0; } .back.type2 { margin: 0; height: 3.5rem; color: var(--text-main, #1E293B); /* mobile/h1 */ font-family: Mulish; font-size: 1.5rem; font-style: normal; font-weight: 700; line-height: normal; } } .listItem>li>a { display: flex; height: 2.75rem; padding: 0.25rem 1rem 0.25rem 0; align-items: center; gap: 0.5rem; flex-shrink: 0; box-sizing: border-box; align-items: center; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItem>li>a { width: 100%; } .listItem>li li>a { padding: 0.25rem 1rem 0.25rem 3.5rem; } .listItem>li>a.iconLeft::before { content: attr(iconcodeleft); font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; width: 1.25rem; height: 1.25rem; flex-shrink: 0; display: flex; align-items: center; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItem>li>a.iconRight::after { content: attr(iconcoderight); font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItem>li:hover>a, .listItem>li:hover>a.iconLeft::before, .listItem>li:hover>a.iconRight::after { color: var(--brand-primary-main, #EC6C83); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItemP { display: flex; height: 2.75rem; padding: 0.25rem 1rem 0.25rem 0; align-items: center; gap: 0.5rem; flex-shrink: 0; box-sizing: border-box; align-items: center; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItemP { width: 100%; } /* .listItemP { padding: 0.25rem 1rem 0.25rem 3.5rem; } */ .listItemP.iconLeft::before { content: attr(iconcodeleft); font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; width: 1.25rem; height: 1.25rem; flex-shrink: 0; display: flex; align-items: center; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .listItemP.iconRight::after { content: attr(iconcoderight); font-family: 'Farhang'; font-weight: normal; font-size: 1.25rem; width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--text-secondary, #334155); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } /* .listItemP:hover, .listItemP.iconLeft:hover::before, .listItemP.iconRight:hover::after { color: var(--brand-primary-main, #EC6C83); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } */ div.profileCards { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; gap: 1rem; flex-wrap: wrap; } .profileCard { text-decoration: none; width: calc((100% - 3rem) / 4); aspect-ratio: 16 / 9; border-radius: 0.25rem; background: linear-gradient(180deg, #DE548B 0%, #C64A7D 100%); color: var(--text-contrast, #FFFDFE); /* desktop/body1 - B */ font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; padding: 0.75rem 1.37rem 6.56rem 2.56rem; border: 0; text-align: start; position: relative; } .profileCard.visitor { background: var(--brand-primary-paler, #FFF3F5); color: var(--brand-primary-main, #EC6C83); } .profileCard[iconcode]::before { content: attr(iconcode); color: var(--text-contrast, #FFFDFE); font-family: 'Farhang'; font-weight: 400; width: 1.25rem; height: 1.25rem; font-size: 1.25rem; position: absolute; top: 0.75rem; left: 0.81rem; } .profileCard[iconcode]::after { content: attr(iconcode); color: var(--brand-primary-pale, #FBDBE1); font-family: 'Farhang'; font-weight: 400; width: 6.375rem; height: 6.375rem; font-size: 6.375rem; position: absolute; bottom: -0.85rem; right: -0.85rem; } .profileCard.visitor[iconcode]::before { color: var(--brand-primary-main, #EC6C83); } .profileCard.visitor[iconcode]::after { color: var(--brand-primary-pale, #FBDBE1); } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .profileCard { width: calc(50% - 0.5rem) } } @media only screen and (min-width:501px) and (max-width:2500px) and (orientation:portrait) and (pointer: coarse) { .profileCard { width: calc(50% - 0.5rem) } } @media only screen and (min-width:901px) and (max-width:2900px) and (orientation:landscape) and (pointer: coarse) { .profileCard { width: calc(50% - 0.5rem) } } div.addNewWindow { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; background: transparent; position: fixed; top: 0; left: 0; z-index: 100; margin: 0 !important; } div.addNewWindow.show { background: var(--surface-scrim, rgba(16, 15, 15, 0.30)); -webkit-transition: all .3s ease 0.5s; -moz-transition: all .3s ease 0.5s; -o-transition: all .3s ease 0.5s; transition: all .3s ease 0.5s; } div.addNewWindow>div { display: flex; width: 35.0625rem; padding: 1.5rem; flex-direction: row; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 1rem; border-radius: 0.25rem; background: var(--surface-light, #FDFEFF); box-shadow: 0 0 12px 1px rgba(152, 155, 160, 0.08); position: relative; } div.addNewWindow>div>.closeBtn { position: absolute; top: 1.5rem; right: 1.5rem; } div.addNewWindow .btnBottom { display: flex; justify-content: space-between; align-items: center; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { div.addNewWindow>div { max-width: 100%; } div.addNewWindow .btnBottom { flex-wrap: wrap; } } .categoryChartCard { display: flex; width: 10rem; height: 1.5rem; align-items: center; color: var(--text-main, #1E293B); /* desktop/body2 */ font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; border: 0; background-color: transparent; overflow: hidden; white-space: nowrap; z-index: 0; position: relative; margin: 0; padding-inline: 1rem 2rem; text-decoration: none; } .categoryChartCard::before { content: ''; width: 0.75rem; height: 0.75rem; border-radius: 0.25rem; background: var(--myColor); margin-right: 0.5rem; position: absolute; left: 0; z-index: 1; } .categoryChartCard::after { content: '\e93c'; font-family: 'Farhang'; font-size: 1.5rem; width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin-left: auto; position: absolute; right: 0; z-index: 1; } .myTable { width: 100%; } .myTable>tr { width: 100%; flex-direction: row; flex-wrap: wrap; } .myTable>tr:has(th), .myTable>tr:has(td) { width: 100%; display: flex; align-items: flex-start; align-self: stretch; min-height: 2.5rem; padding: 0.625rem 1rem; align-items: center; background: var(--surface-dark, #F4F4F5); color: var(--text-teriary, #64758B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; } .myTable>tr:has(td) { border-bottom: 1px solid var(--border-light, #F1F5F9); background: var(--surface-light, #FDFEFF); color: var(--text-main, #1E293B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; } .myTable>tr>*:nth-child(1) { flex: var(--c1) 0 1%; } .myTable>tr>*:nth-child(2) { flex: var(--c2) 0 1%; } .myTable>tr>*:nth-child(3) { flex: var(--c3) 0 1%; } .myTable>tr>*:nth-child(4) { flex: var(--c4) 0 1%; } .myTable>tr>*:nth-child(5) { flex: var(--c5) 0 1%; } .myTable>tr>*:nth-child(6) { flex: var(--c6) 0 1%; } .myTable>tr>*:nth-child(7) { flex: var(--c7) 0 1%; } .myTable>tr>*:nth-child(8) { flex: var(--c8) 0 1%; } .myTable>tr>*:nth-child(9) { flex: var(--c9) 0 1%; } .myTable>tr>*:nth-child(10) { flex: var(--c10) 0 1%; } .myTable th, .myTable td { display: flex; align-items: center; justify-content: flex-start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .myTable caption { caption-side: top; text-align: left; margin-bottom: 1rem; color: var(--text-main, #1E293B); } .myTable .closeBtn { rotate: 0deg; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myTable.show .closeBtn { rotate: 180deg; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .myTable p.oneRow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 25rem; } .myTable>tr:has(td) { opacity: 0; display: none; animation: hideTasks0 0.3s ease 0s 1 forwards; } @keyframes hideTasks0 { 0% { opacity: 1; display: flex; } 99% { opacity: 0; display: flex; } 100% { opacity: 0; display: none; } } .myTable.show>tr:has(td) { opacity: 1; display: flex; animation: showTasks0 0.3s ease 0s 1 forwards; } @keyframes showTasks0 { 0% { opacity: 0; display: none; } 1% { opacity: 0; display: flex; } 100% { opacity: 1; display: flex; } } .myTable.closeable>tr:has(th), .myTable.closeable>tr:has(td) { min-height: unset !important; } .myTable.closeable>tr:has(td) { /* height: 0; */ padding: 0rem 1rem; animation: hideTasks 0.3s ease 0s 1 forwards; } @keyframes hideTasks { 0% { /* height: 2.5rem; */ padding: 0.625rem 1rem; } 99% { /* height: 0; */ padding: 0rem 1rem; } 100% { /* height: 0; */ padding: 0rem 1rem; } } .myTable.closeable.show>tr:has(td) { /* height: 2.5rem; */ padding: 0.625rem 1rem; animation: showTasks 0.3s ease 0s 1 forwards; } @keyframes showTasks { 0% { /* height: 0; */ padding: 0rem 1rem; } 1% { /* height: 0; */ padding: 0rem 1rem; } 100% { /* height: 2.5rem; */ padding: 0.625rem 1rem; } } .myTable .myButton, .myTable .myInput input { padding-block: 0 !important; height: unset !important; } .myTable .extraDiv { flex: 0 0 100% !important; padding: 1rem; display: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-top: 1rem; opacity: 0; border: 1px solid var(--border-light, #F1F5F9); padding: 0; border-radius: 0.5rem; align-items: normal; } .myTable .extraDiv * { width: 35%; padding: 0.5rem 1rem; background-color: transparent !important; justify-content: flex-start; } .myTable .extraDiv>*:nth-child(4n + 1), .myTable .extraDiv>*:nth-child(4n + 2) { background-color: var(--brand-primary-paler, #FFF3F5) !important; } .myTable .extraDiv>*:nth-child(2n) { width: 65%; } .myTable .extraDiv { animation: showExtraData 0.3s ease 0s 1 forwards; /* max-height: 20rem; */ display: flex; opacity: 1; } @keyframes showExtraData { 0% { /* max-height: 0rem; */ display: none; opacity: 0; } 1% { /* max-height: 0rem; */ display: flex; opacity: 0; } 100% { /* max-height: 20rem; */ display: flex; opacity: 1; } } @media only screen and (pointer: fine) { .myTable .dh { display: none; } } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .myTable>tr>th.hm, .myTable>tr>td.hm { display: none; } .myTable .mPh { display: none; } } @media only screen and (min-width:0px) and (max-width:900px) and (orientation:landscape) and (pointer: coarse) { .myTable .mLh { display: none; } } @media only screen and (min-width:501px) and (max-width:2500px) and (orientation:portrait) and (pointer: coarse) { .myTable .tPh { display: none; } } @media only screen and (min-width:901px) and (max-width:2900px) and (orientation:landscape) and (pointer: coarse) { .myTable .tLh { display: none; } } .badge { display: inline-flex; padding: 0.25rem 0.5rem; justify-content: center; align-items: center; gap: 0.25rem; border-radius: 0.25rem; font-family: Mulish; font-size: 0.75rem; font-style: normal; font-weight: 500; line-height: normal; } .badge:empty { display: none; } .badge[iconcode]::before { content: attr(iconcode); font-family: 'Farhang'; font-size: 0.9rem; font-weight: normal; width: 1rem; height: 1rem; align-items: center; display: flex; justify-content: center; } .badge.info.light { color: var(--assistive-info-main, #0163F7); background: var(--assistive-info-pale, #DAE8FF); } .badge.info.dark { color: var(--text-contrast, #FFFDFE); background: var(--assistive-info-main, #0163F7); } .badge.success.light { color: var(--assistive-success-main, #17803D); background: var(--assistive-success-pale, #DCFCE7); } .badge.success.dark { color: var(--text-contrast, #FFFDFE); background: var(--assistive-success-main, #17803D); } .badge.error.light { color: var(--assistive-error-main, #991B1B); background: var(--assistive-error-pale, #FEE2E1); } .badge.error.dark { color: var(--text-contrast, #FFFDFE); background: var(--assistive-error-main, #991B1B); } .badge.warning.light { color: var(--assistive-warning-main, #CA8A03); background: var(--assistive-warning-pale, #FEF9C3); } .badge.warning.dark { color: var(--text-contrast, #FFFDFE); background: var(--assistive-warning-main, #CA8A03); } .badge.brand.light { color: var(--brand-primary-main, #EC6C83); background: var(--brand-primary-paler, #FFF3F5); } .badge.brand.dark { color: var(--text-contrast, #FFFDFE); background: var(--brand-primary-light, #F3A4B2); } .badge.neutral.light { color: var(--brand-secondary-main, #253041); background: var(--brand-secondary-paler, #F1F5F9); } .badge.neutral.dark { color: var(--text-contrast, #FFFDFE); background: var(--brand-secondary-light, #475770); } .chat { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 1.5rem; box-sizing: border-box; position: relative; } .chat::before { content: ''; width: 100%; height: 5rem; position: absolute; top: 0; left: 0; background: rgb(255, 255, 255); background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); z-index: 1; } .chat>.messages { flex: 1; width: 100%; display: flex; flex-direction: column-reverse; gap: 0.75rem; overflow: auto; scrollbar-width: thin; padding: 0rem 1rem; position: relative; scroll-behavior: smooth; } .chat>.messages>li:nth-last-child(1) { margin-top: 5rem; } .chat>.messages>li:nth-child(1) { margin-bottom: 3rem; } .chat>.messages>li { max-width: 30rem; border-radius: 1rem 1rem 0rem 1rem; background: var(--brand-secondary-main, #253041); display: flex; flex-direction: column; padding: 0.625rem; justify-content: flex-start; align-items: flex-end; gap: 0.625rem; color: var(--text-contrast, #FFFDFE); font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 500; line-height: 1.5rem; position: relative; margin-bottom: 2rem; margin-left: auto; } .chat>.messages>li::after { content: attr(time); position: absolute; top: calc(100% + 0.25rem); right: 0; color: var(--text-teriary, #64758B); font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; white-space: nowrap; } .chat>.messages>li>div { display: flex; flex-direction: row; gap: 0.75rem; } .chat>.messages>li>div>span, .chat>.messages>li>div>span>img { aspect-ratio: 1 / 1; width: 7rem; border-radius: 0.25rem; position: relative; } .chat>.messages>li>div>span::after { content: '\e914'; font-family: 'Farhang'; font-size: 1.5rem; color: #FFFAFA; width: 7rem; aspect-ratio: 1 / 1; background-color: #00000055; border-radius: 0.25rem; position: absolute; top: 0; left: 0; opacity: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; z-index: 2; } .chat>.messages>li>div>span:hover::after { opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .chat>.messages>li.myChat { margin-left: unset; margin-right: auto; border-radius: 0rem 1rem 1rem 1rem; background: var(--brand-primary-background, #FFFAFA); color: var(--text-main, #1E293B); align-items: flex-start; } .chat>.messages>li.myChat::after { right: unset; left: 0; } .chat>.tools { display: flex; padding: 1rem; align-items: center; gap: 0.625rem; align-self: stretch; border-top: 1px solid var(--border-light, #F1F5F9); background: var(--surface-light, #FDFEFF); box-sizing: border-box; align-items: flex-end; display: flex; flex-direction: row; } .chat>.tools>*:nth-child(1) { flex: 1; } .chat .gaurd { width: 100%; height: 5rem; background-color: transparent !important; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { .chat { height: calc(100dvh - 10.5rem) !important; } } .subsCards { padding: 1rem 0.5rem; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width: 100%; gap: 1.5rem; align-items: flex-start; overflow: auto; scrollbar-width: thin; box-sizing: border-box; } .subscriptionCard { display: flex; width: calc((100% - 3rem) / 3); aspect-ratio: 2 / 3; padding: 1.5rem; flex-direction: column; /* justify-content: space-between; */ align-items: flex-start; flex-shrink: 0; border-radius: 0.25rem; background: var(--brand-primary-background, #FFFAFA); box-shadow: 0px 2px 12px 0px rgba(99, 98, 101, 0.19); gap: 1.5rem; } .subscriptionCard>.myButton { margin-top: auto; } .subscriptionCard>h2 { display: flex; height: 2.125rem; flex-direction: column; justify-content: center; flex-shrink: 0; align-self: stretch; color: var(--brand-primary-main, #EC6C83); /* desktop/h3 */ font-family: Mulish; font-size: 1.25rem; font-style: normal; font-weight: 800; line-height: normal; } .subscriptionCard>span.monthly { color: var(--text-main, #1E293B); /* desktop/h1 */ font-family: Mulish; font-size: 2rem; font-style: normal; font-weight: 700; line-height: normal; } .subscriptionCard>span.monthly::after { content: 'C$/month'; padding-left: 0.2rem; color: var(--text-secondary, #334155); /* desktop/body1 */ font-family: Mulish; font-size: 1rem; font-style: normal; font-weight: 500; line-height: 1.5rem; /* 150% */ } .subscriptionCard>span.annual { color: var(--brand-primary-main, #EC6C83); /* desktop/body2 - B */ font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 700; line-height: normal; } .subscriptionCard>span.annual::after { content: 'C$ for ' attr(total); color: var(--brand-primary-main, #EC6C83); /* desktop/body2 */ font-family: Mulish; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: normal; } .subscriptionCard>ul { list-style-type: disc; list-style-position: inside; } p.roozShomar::before { content: var(--remain) ' '; color: var(--brand-primary-light, #F3A4B2); } p.roozShomar::after { content: "of " var(--total) " days remaining"; } p[bulletcolor] { display: flex; flex-direction: row; gap: 0.5rem; align-items: center; } p[bulletcolor]::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 1rem; background-color: var(--bulletcolor); } .subscriptionCard>div { width: 100%; height: 6rem; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; justify-content: center; column-gap: 0.5rem; } div.chart { width: 6rem; height: 6rem; background: var(--surface-dark, #F4F4F5); border-radius: 50%; position: relative; overflow: hidden; } div.chart::before { content: var(--remain); display: flex; justify-content: center; align-items: center; color: var(--brand-primary-hover, #EA5A74); position: absolute; top: 50%; left: 50%; width: 3rem; height: 3rem; background-color: white; /* دایره داخلی سفید */ border-radius: 50%; transform: translate(-50%, -50%); z-index: 1; } div.chart::after { content: ''; position: absolute; top: -6rem; left: -6rem; width: 18rem; height: 18rem; background-color: var(--brand-primary-light, #F3A4B2); z-index: 0; /* -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; */ --percent: calc(var(--currentDarsad) * (pi / 180)); --percent2: calc(((360 - var(--currentDarsad)) / 4) * (pi / 180)); clip-path: polygon(50% 50%, calc((sin(var(--percent) + (0 * var(--percent2))) * 50%) + 50%) calc((cos(var(--percent) + (0 * var(--percent2))) * (-50%)) + 50%), calc((sin(var(--percent) + (1 * var(--percent2))) * 50%) + 50%) calc((cos(var(--percent) + (1 * var(--percent2))) * (-50%)) + 50%), calc((sin(var(--percent) + (2 * var(--percent2))) * 50%) + 50%) calc((cos(var(--percent) + (2 * var(--percent2))) * (-50%)) + 50%), calc((sin(var(--percent) + (3 * var(--percent2))) * 50%) + 50%) calc((cos(var(--percent) + (3 * var(--percent2))) * (-50%)) + 50%), 50% 0, 50% 50%); } div.chart>p { position: absolute; left: 100%; } .avatar.vendor { display: flex; width: 1.25rem; height: 1.25rem; padding: 0.1875rem 0.25rem; justify-content: center; align-items: center; flex-shrink: 0; } .avatar.rectangle { border-radius: 0.25rem; } .avatar.round { border-radius: 1.5rem; } .avatar.large { width: 2.5rem; height: 2.5rem; flex-shrink: 0; } .avatar.small { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .avatar.fixW{ width: 100%; height: unset; aspect-ratio: 1 / 1; } .avatar.fixH{ height: 100%; width: unset; aspect-ratio: 1 / 1; }